feat: add cc-connect dashboard health integration

Add a protected backend health endpoint and a new dashboard page/sidebar entry so cc-connect operational status is visible in the UI.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

dashboard/frontend/src/App.svelte

@@ -10,6 +10,7 @@
   import ChatSummary from "./routes/ChatSummary.svelte";
   import Security from "./routes/Security.svelte";
   import LiteLLM from "./routes/LiteLLM.svelte";
+  import CcConnect from "./routes/CcConnect.svelte";
   import Login from "./routes/Login.svelte";
   import { onMount } from "svelte";
   import { getToken, checkAuth, setToken, setRefreshToken, currentUser, setCurrentUser, getPreferences, savePreferences } from "./lib/api.js";
@@ -156,6 +157,8 @@
           <Security />
         {:else if page === "litellm" && hasPageAccess("dashboard")}
           <LiteLLM />
+        {:else if page === "cc-connect" && hasPageAccess("dashboard")}
+          <CcConnect />
         {:else}
           <Dashboard />
         {/if}

dashboard/frontend/src/components/Sidebar.svelte

@@ -42,6 +42,7 @@
 
   const defaultTools = [
     { id: "openclaw", label: "OpenClaw", icon: "openclaw" },
+    { id: "cc-connect", label: "cc-connect", icon: "users" },
     { id: "chat-digest", label: "Chat Digest", icon: "chat" },
     { id: "gitea", label: "Repos", icon: "git" },
     { label: "Gitea Web", remoteHref: "https://git.jimmygan.com:8443", icon: "git", external: true },

dashboard/frontend/src/lib/api.js

@@ -143,6 +143,10 @@ export function getLiteLLMHealth() {
   return get("/litellm/health");
 }
 
+export function getCcConnectHealth() {
+  return get("/cc-connect/health");
+}
+
 export function put(path, data) {
   return request(path, { method: "PUT", json: data });
 }

dashboard/frontend/src/routes/CcConnect.svelte

@@ -0,0 +1,119 @@
+<script>
+  import { onMount } from "svelte";
+  import { getCcConnectHealth } from "../lib/api.js";
+
+  let loading = $state(true);
+  let health = $state(null);
+  let requestError = $state("");
+
+  async function loadHealth() {
+    loading = true;
+    requestError = "";
+    try {
+      health = await getCcConnectHealth();
+    } catch (e) {
+      requestError = e?.body?.detail || e?.message || "Failed to load cc-connect health";
+      health = null;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function statusBadgeClass(status) {
+    if (status === "up") {
+      return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300";
+    }
+    return "bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300";
+  }
+
+  function valueOrDash(value) {
+    return value === null || value === undefined || value === "" ? "—" : value;
+  }
+
+  onMount(loadHealth);
+</script>
+
+<div class="space-y-6">
+  <div class="flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">cc-connect</h1>
+      <p class="text-sm text-surface-400 mt-1">Mobile bridge operational status</p>
+      <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] font-medium">
+        <span class="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">up</span>
+        <span class="px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">down</span>
+      </div>
+    </div>
+    <button onclick={loadHealth} disabled={loading} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50 dark:bg-primary-900/30 dark:text-primary-300">
+      {loading ? "Loading..." : "Refresh"}
+    </button>
+  </div>
+
+  {#if requestError}
+    <div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 rounded-xl p-4 shadow-sm">
+      <p class="text-sm font-medium text-rose-700 dark:text-rose-300">Failed to fetch cc-connect health</p>
+      <p class="text-xs text-rose-600 dark:text-rose-400 mt-1">{requestError}</p>
+    </div>
+  {/if}
+
+  <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
+    {#if loading && !health}
+      <div class="space-y-3">
+        <div class="h-6 w-36 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          {#each Array(8) as _}
+            <div class="h-16 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
+          {/each}
+        </div>
+      </div>
+    {:else if health}
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Health Status</h3>
+        <span class="px-2.5 py-1 text-xs font-semibold rounded-full {statusBadgeClass(health.status)}">{valueOrDash(health.status)}</span>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
+          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">OK</p>
+          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{String(Boolean(health.ok))}</p>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
+          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Source</p>
+          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.source)}</p>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
+          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Container</p>
+          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_name)}</p>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
+          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Container Status</p>
+          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_status)}</p>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
+          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Endpoint</p>
+          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.endpoint)}</p>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
+          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">HTTP Status</p>
+          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.http_status)}</p>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
+          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Latency</p>
+          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{health.latency_ms === null || health.latency_ms === undefined ? "—" : `${health.latency_ms} ms`}</p>
+        </div>
+
+        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3 sm:col-span-2 lg:col-span-2">
+          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Error</p>
+          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.error)}</p>
+        </div>
+      </div>
+    {:else}
+      <p class="text-sm text-surface-400">No health data available.</p>
+    {/if}
+  </div>
+</div>