feat(gui): move startup health into dashboard

Author: lidge-jun

gui/src/App.tsx

@@ -80,7 +80,6 @@ function providersHashForPage(): string {
 
 const NAV: { id: Page; tkey: TKey; Icon: typeof IconGrid }[] = [
   { id: "dashboard", tkey: "nav.dashboard", Icon: IconGrid },
-  { id: "startup", tkey: "nav.startup", Icon: IconPower },
   { id: "providers", tkey: "nav.providers", Icon: IconServer },
   { id: "models", tkey: "nav.models", Icon: IconBoxes },
   { id: "subagents", tkey: "nav.subagents", Icon: IconBot },
@@ -110,7 +109,6 @@ export default function App() {
   const [page, setPageState] = useState<Page>(readPageFromHash);
   const [theme, setTheme] = useState<Theme>(readStoredTheme);
   const [runtimeVersion, setRuntimeVersion] = useState<string | null>(null);
-  const [startupAtRisk, setStartupAtRisk] = useState(false);
   const { locale, setLocale } = useI18n();
   const t = useT();
 
@@ -154,35 +152,6 @@ export default function App() {
     return () => window.removeEventListener("hashchange", onHash);
   }, []);
 
-  useEffect(() => {
-    let cancelled = false;
-    let latestRequest = 0;
-    const readStartupHealth = async () => {
-      const request = ++latestRequest;
-      try {
-        const res = await fetch(`${API_BASE}/api/startup-health`);
-        if (!res.ok) {
-          if (!cancelled && request === latestRequest) setStartupAtRisk(true);
-          return;
-        }
-        const data = await res.json() as { status?: unknown; diagnosticStale?: unknown };
-        const valid = data.status === "native" || data.status === "protected" || data.status === "at-risk";
-        if (!cancelled && request === latestRequest) {
-          setStartupAtRisk(!valid || data.status === "at-risk" || data.diagnosticStale === true);
-        }
-      } catch {
-        // A failed refresh cannot preserve a previously green claim.
-        if (!cancelled && request === latestRequest) setStartupAtRisk(true);
-      }
-    };
-    void readStartupHealth();
-    const timer = window.setInterval(() => { void readStartupHealth(); }, 30_000);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-  }, []);
-
   useEffect(() => {
     const rawHash = window.location.hash.replace(/^#\/?/, "");
     // Legacy #debug deep links must resolve before generic normalization
@@ -339,9 +308,6 @@ export default function App() {
               }}
               aria-current={page === id ? "page" : undefined}>
               <Icon /> {t(tkey)}
-              {id === "startup" && startupAtRisk && (
-                <span className="nav-health-dot" title={t("startup.navRisk")} aria-label={t("startup.navRisk")} />
-              )}
             </button>
           ))}
         </nav>

gui/src/pages/Dashboard.tsx

@@ -3,11 +3,12 @@ import { formatUptime } from "../formatUptime";
 import { IconAlert, IconExternal, IconInfo, IconRefresh, IconX } from "../icons";
 import { Trans } from "../i18n/provider";
 import { useI18n, type TKey } from "../i18n/shared";
-import { settingsPollMayCommit, startupRiskDetailKey } from "../startup-health-ui";
+import { settingsPollMayCommit } from "../startup-health-ui";
 import { formatTokens } from "../format-tokens";
 import { EmptyState, Select } from "../ui";
 
 interface HealthData { status: string; version: string; uptime: number }
+type StartupHealthStatus = "native" | "protected" | "at-risk" | "error";
 interface ProviderInfo { name: string; adapter: string; baseUrl: string; defaultModel?: string; hasApiKey: boolean }
 interface ModelInfo { id: string; provider: string; owned_by?: string }
 interface SettingsData {
@@ -188,6 +189,7 @@ function useModalDialog(open: boolean, triggerRef: RefObject<HTMLButtonElement |
 export default function Dashboard({ apiBase }: { apiBase: string }) {
   const { locale, t } = useI18n();
   const [health, setHealth] = useState<HealthData | null>(null);
+  const [startupHealth, setStartupHealth] = useState<StartupHealthStatus | null>(null);
   const [providers, setProviders] = useState<ProviderInfo[]>([]);
   const [models, setModels] = useState<ModelInfo[]>([]);
   const [settings, setSettings] = useState<SettingsData | null>(null);
@@ -245,6 +247,29 @@ export default function Dashboard({ apiBase }: { apiBase: string }) {
     }
   }, []);
 
+  useEffect(() => {
+    let cancelled = false;
+    const readStartupHealth = async () => {
+      try {
+        const response = await fetch(`${apiBase}/api/startup-health`);
+        if (!response.ok) throw new Error("startup health unavailable");
+        const data = await response.json() as { status?: unknown; diagnosticStale?: unknown };
+        const status = data.status;
+        const validStatus = status === "native" || status === "protected" || status === "at-risk";
+        if (!validStatus) throw new Error("invalid startup health response");
+        if (!cancelled) setStartupHealth(data.diagnosticStale === true ? "at-risk" : status);
+      } catch {
+        if (!cancelled) setStartupHealth("error");
+      }
+    };
+    void readStartupHealth();
+    const interval = window.setInterval(() => { void readStartupHealth(); }, 30_000);
+    return () => {
+      cancelled = true;
+      window.clearInterval(interval);
+    };
+  }, [apiBase]);
+
   useEffect(() => {
     const fetchData = async () => {
       const settingsRequestEpoch = ++settingsRequestEpochRef.current;
@@ -648,16 +673,19 @@ export default function Dashboard({ apiBase }: { apiBase: string }) {
         </div>
       </div>
 
-      {(settings?.startupHealth?.status === "at-risk" || settings?.startupHealth?.diagnosticStale) && (
-        <div className="notice notice-warn" role="alert" style={{ marginTop: -12, marginBottom: 24 }}>
-          <IconAlert />
-          <span>
-            {settings.startupHealth.diagnosticStale
-              ? t("startup.staleData")
-              : t(startupRiskDetailKey(settings.startupHealth))}{" "}
-            <a href="#startup">{t("startup.title")}</a>
+      {startupHealth && (
+        <a className="startup-health-bar" href="#startup">
+          <span className={`dot ${startupHealth === "error" ? "dot-red" : startupHealth === "at-risk" ? "dot-amber" : "dot-green"}`} aria-hidden="true" />
+          <span className="startup-health-bar__summary">
+            {t(startupHealth === "error"
+              ? "startup.error"
+              : startupHealth === "at-risk"
+                ? "startup.summary.atRisk"
+                : startupHealth === "protected"
+                  ? "startup.summary.protected"
+                  : "startup.summary.native")}
           </span>
-        </div>
+        </a>
       )}
 
       {projectConfigWarnings.length > 0 && (

gui/src/styles.css

@@ -453,6 +453,27 @@ input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
 .stat .value { font-size: var(--text-title); font-weight: var(--weight-semibold); letter-spacing: 0; line-height: var(--leading-tight); }
 .stat .value.mono { font-family: var(--font-code); font-size: var(--text-subtitle); }
 
+.startup-health-bar {
+  min-height: var(--control-lg);
+  margin: calc(-1 * var(--space-3)) 0 var(--space-6);
+  padding: 0 var(--space-3);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  color: var(--muted);
+  background: var(--hover);
+  border-block: 1px solid var(--border-soft);
+  text-decoration: none;
+  font-size: var(--text-control);
+  line-height: var(--leading-ui);
+  transition: background var(--motion-fast), color var(--motion-fast);
+}
+.startup-health-bar:hover { background: var(--raised); color: var(--text); }
+.startup-health-bar:active { transform: translateY(1px); }
+.startup-health-bar:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
+.startup-health-bar__summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 /* ---- dashboard model grid (grouped by provider) ---- */
 .model-group-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: var(--text-control); font-weight: var(--weight-semibold); color: var(--text); }
 .model-group-head .count { font-family: var(--font-code); font-weight: var(--weight-medium); color: var(--faint); font-size: var(--text-label); }
@@ -709,16 +730,6 @@ dialog.modal-overlay::backdrop {
 .notice-warn { font-size: var(--text-label); line-height: var(--leading-body); padding: 8px 10px; border-radius: var(--radius-sm); background: var(--amber-soft); color: var(--amber); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
 .notice-warn svg { width: 14px; height: 14px; flex-shrink: 0; }
 
-/* Startup lifecycle health — compact infrastructure status, not a setup wizard. */
-.nav-health-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--radius-round);
-  background: var(--amber);
-  box-shadow: 0 0 0 3px var(--amber-soft);
-  margin-left: auto;
-  flex: 0 0 auto;
-}
 .startup-page-sub { margin-bottom: 0; }
 .startup-hero { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
 .startup-hero--safe { border-color: color-mix(in srgb, var(--green) 34%, var(--border)); background: color-mix(in srgb, var(--green-soft) 64%, var(--surface)); }