fix(gui): address review findings on dashboard/startup stack

Wibias · Wibias · commit 7481715219ca · 2026-07-30T11:05:59.000+02:00
diff --git a/docs-site/src/content/docs/reference/cli.md b/docs-site/src/content/docs/reference/cli.md
@@ -429,13 +429,15 @@ Windows **Task Scheduler**) that auto-starts on login and auto-restarts on crash
 | `start` | Start an installed service. |
 | `stop` | Stop the service and restore native Codex. |
 | `status` | Report whether the service is running. |
+| `repair` | Refresh installed service assets without re-registering (no Task Scheduler UAC). |
 | `uninstall` | Remove the service and restore native Codex. |
 | `remove` | Alias of `uninstall`. |
 
 ```bash
 ocx service
 ocx service install
 ocx service status
+ocx service repair
 ocx service uninstall
 ```
 
diff --git a/gui/src/components/provider-workspace/ProviderOverviewDashboard.tsx b/gui/src/components/provider-workspace/ProviderOverviewDashboard.tsx
@@ -51,10 +51,12 @@ export default function ProviderOverviewDashboard({
 
   const attention = useMemo(() => buildAttentionItems(sections, {}), [sections]);
   const attentionCount = attention.length;
-  const reauthCount = useMemo(
-    () => [...sections.ready, ...sections.needsSetup].filter(p => p.activeNeedsReauth).length,
+  const readyReauthCount = useMemo(
+    () => sections.ready.filter(p => p.activeNeedsReauth).length,
     [sections],
   );
+  const readyCount = sections.ready.length - readyReauthCount;
+  const needsAttentionCount = sections.needsSetup.length + readyReauthCount;
 
   /* Rate-limit rows: urgency first (highest utilisation), then name */
   const quotaProviders = useMemo(() => {
@@ -100,10 +102,10 @@ export default function ProviderOverviewDashboard({
       </div>
 
       <div className="pws-dashboard-summary">
-        <SummaryCard count={sections.ready.length} label={t("pws.status.ready")} tone="ok" />
+        <SummaryCard count={readyCount} label={t("pws.status.ready")} tone="ok" />
         <SummaryCard
-          count={sections.needsSetup.length}
-          label={reauthCount > 0 ? t("pws.status.needsAttention") : t("pws.status.needsSetup")}
+          count={needsAttentionCount}
+          label={readyReauthCount > 0 ? t("pws.status.needsAttention") : t("pws.status.needsSetup")}
           tone="warn"
         />
         <SummaryCard count={sections.disabled.length} label={t("prov.disabledBadge")} tone="muted" />
diff --git a/gui/src/pages/Startup.tsx b/gui/src/pages/Startup.tsx
@@ -132,10 +132,6 @@ export default function Startup({ apiBase }: { apiBase: string }) {
       const [settings, trayResult] = await Promise.all([settingsPromise, trayPromise]);
       if (signal?.aborted || generation !== loadGenerationRef.current) return;
 
-      const notice = deriveCodexRuntimeNotice(settings?.codexRuntime, t, next.platform);
-      setCodexRuntimeWarning(notice.warning);
-      setCodexRuntimeFix(notice.fix);
-      setRuntimeNoticePending(false);
       const nextTray = next.platform === "win32" ? trayResult.tray : null;
       if (next.platform === "win32") {
         setTray(nextTray);
@@ -145,13 +141,28 @@ export default function Startup({ apiBase }: { apiBase: string }) {
         setTrayError(false);
       }
       setTrayLoading(false);
+      setRuntimeNoticePending(false);
 
-      writeSessionListCache(cacheKey, {
-        data: next,
-        warning: notice.warning,
-        fix: notice.fix,
-        tray: nextTray,
-      } satisfies StartupPageCache);
+      if (settings) {
+        const notice = deriveCodexRuntimeNotice(settings.codexRuntime, t, next.platform);
+        setCodexRuntimeWarning(notice.warning);
+        setCodexRuntimeFix(notice.fix);
+        writeSessionListCache(cacheKey, {
+          data: next,
+          warning: notice.warning,
+          fix: notice.fix,
+          tray: nextTray,
+        } satisfies StartupPageCache);
+      } else {
+        // Settings fetch failure: keep the last-good runtime notice in UI + cache.
+        const prev = readSessionListCache<StartupPageCache>(cacheKey);
+        writeSessionListCache(cacheKey, {
+          data: next,
+          warning: prev?.warning ?? null,
+          fix: prev?.fix ?? null,
+          tray: nextTray,
+        } satisfies StartupPageCache);
+      }
     } catch {
       if (signal?.aborted || generation !== loadGenerationRef.current) return;
       setFailed(true);
@@ -289,6 +300,7 @@ export default function Startup({ apiBase }: { apiBase: string }) {
           <StartupDetailsSection
             data={data}
             failed={failed}
+            loading={loading}
             installBusy={installBusy}
             installResult={installResult}
             onInstall={(action, opts) => { void runInstallAction(action, opts); }}
diff --git a/gui/src/pages/dashboard-core-poll.ts b/gui/src/pages/dashboard-core-poll.ts
@@ -62,11 +62,16 @@ export type DashboardMultiAgentPoll = {
 /** Sidecar + shadow only — must not wait on /api/settings (startup-health). */
 export type DashboardSidecarPoll = {
   sidecar: SidecarData;
-  shadowCall: ShadowCallData | null;
+  /**
+   * `null` = authoritative endpoint failure (clear UI).
+   * `undefined` = lost poll authority (epoch gate) — do not commit.
+   */
+  shadowCall: ShadowCallData | null | undefined;
 };
 
 export type DashboardSettingsPoll = {
-  settings: SettingsData | null;
+  /** Absent when the poll lost authority — callers must keep prior settings/cache. */
+  settings: SettingsData | undefined;
   startupHealthSeed: SettingsData["startupHealth"] | null | undefined;
 };
 
@@ -149,7 +154,7 @@ export async function fetchDashboardSidecars(
   ]);
 
   const sidecar = await requireJson<SidecarData>(scRes);
-  let shadowCall: ShadowCallData | null = null;
+  let shadowCall: ShadowCallData | null | undefined = undefined;
   try {
     if (shRes.ok) {
       const nextShadow = await shRes.json() as ShadowCallData;
@@ -163,6 +168,15 @@ export async function fetchDashboardSidecars(
       )) {
         shadowCall = nextShadow;
       }
+    } else if (settingsPollMayCommit(
+      { request: shadowRequestEpoch, mutation: shadowMutationEpoch },
+      {
+        request: epochs.shadowCallRequestEpochRef.current,
+        mutation: epochs.shadowCallMutationEpochRef.current,
+        mutationInFlight: epochs.shadowCallMutationInFlightRef.current,
+      },
+    )) {
+      shadowCall = null;
     }
   } catch {
     if (settingsPollMayCommit(
@@ -191,7 +205,7 @@ export async function fetchDashboardSettings(
 
   const sRes = await fetch(`${apiBase}/api/settings`, { signal });
   const nextSettings = await requireJson<SettingsData>(sRes);
-  let settings: SettingsData | null = null;
+  let settings: SettingsData | undefined = undefined;
   let startupHealthSeed: SettingsData["startupHealth"] | null | undefined = undefined;
   if (settingsPollMayCommit(
     { request: settingsRequestEpoch, mutation: settingsMutationEpoch },
diff --git a/gui/src/pages/startup-sections.tsx b/gui/src/pages/startup-sections.tsx
@@ -77,19 +77,23 @@ export function StartupHeroSection({
 export function StartupDetailsSection({
   data,
   failed,
+  loading = false,
   installBusy,
   installResult,
   onInstall,
 }: {
   data: StartupHealthData;
   failed: boolean;
+  loading?: boolean;
   installBusy: StartupInstallAction | null;
   installResult: { kind: "success" | "error"; action: StartupInstallAction; repair?: boolean; detail?: string } | null;
   onInstall: (action: StartupInstallAction, opts?: { repair?: boolean }) => void;
 }) {
   const { t } = useI18n();
-  const serviceNeedsRepair = data.serviceSupported && data.serviceInstalled && !data.serviceViable;
+  // Repair only rewrites stale assets — conflict/disabled need uninstall/reinstall, not repair.
+  const serviceNeedsRepair = data.serviceSupported && data.serviceInstalled && data.serviceStale && !data.serviceConflict;
   const shimNeedsRepair = data.shimInstalled && !data.shimHealthy;
+  const actionsDisabled = installBusy !== null || failed || loading;
 
   return (
     <section className="panel startup-details">
@@ -106,12 +110,12 @@ export function StartupDetailsSection({
             no={t(data.serviceConflict ? "startup.conflict" : data.serviceStale ? "startup.stale" : data.serviceInstalled ? "startup.unhealthy" : data.serviceSupported ? "startup.notInstalled" : "startup.unsupported")}
           />
           {data.serviceSupported && !data.serviceInstalled && (
-            <button type="button" className="btn btn-primary btn-sm" aria-label={`${t("startup.service")} - ${t("startup.install")}`} disabled={installBusy !== null || failed} onClick={() => onInstall("install-service")}>
+            <button type="button" className="btn btn-primary btn-sm" aria-label={`${t("startup.service")} - ${t("startup.install")}`} disabled={actionsDisabled} onClick={() => onInstall("install-service")}>
               {t(installBusy === "install-service" ? "startup.installing" : "startup.install")}
             </button>
           )}
           {serviceNeedsRepair && (
-            <button type="button" className="btn btn-primary btn-sm" aria-label={`${t("startup.service")} - ${t("startup.repair")}`} disabled={installBusy !== null || failed} onClick={() => onInstall("install-service", { repair: true })}>
+            <button type="button" className="btn btn-primary btn-sm" aria-label={`${t("startup.service")} - ${t("startup.repair")}`} disabled={actionsDisabled} onClick={() => onInstall("install-service", { repair: true })}>
               {t(installBusy === "install-service" ? "startup.repairing" : "startup.repair")}
             </button>
           )}
@@ -128,12 +132,12 @@ export function StartupDetailsSection({
               : "startup.notInstalled")}
           />
           {!data.shimInstalled && (
-            <button type="button" className="btn btn-primary btn-sm" aria-label={`${t("startup.shim")} - ${t("startup.install")}`} disabled={installBusy !== null || failed} onClick={() => onInstall("install-shim")}>
+            <button type="button" className="btn btn-primary btn-sm" aria-label={`${t("startup.shim")} - ${t("startup.install")}`} disabled={actionsDisabled} onClick={() => onInstall("install-shim")}>
               {t(installBusy === "install-shim" ? "startup.installing" : "startup.install")}
             </button>
           )}
           {shimNeedsRepair && (
-            <button type="button" className="btn btn-primary btn-sm" aria-label={`${t("startup.shim")} - ${t("startup.repair")}`} disabled={installBusy !== null || failed} onClick={() => onInstall("install-shim", { repair: true })}>
+            <button type="button" className="btn btn-primary btn-sm" aria-label={`${t("startup.shim")} - ${t("startup.repair")}`} disabled={actionsDisabled} onClick={() => onInstall("install-shim", { repair: true })}>
               {t(installBusy === "install-shim" ? "startup.repairing" : "startup.repair")}
             </button>
           )}
diff --git a/gui/src/pages/use-dashboard-data.ts b/gui/src/pages/use-dashboard-data.ts
@@ -64,20 +64,8 @@ type CachedOverview = {
 
 type MaMode = "v1" | "default" | "v2";
 
-function readCachedControls(apiBase: string): CachedControls | null {
-  try {
-    const raw = sessionStorage.getItem(`${CONTROLS_CACHE_PREFIX}${apiBase}`);
-    if (!raw) return null;
-    return JSON.parse(raw) as CachedControls;
-  } catch {
-    return null;
-  }
-}
-
-function writeCachedControls(apiBase: string, value: CachedControls) {
-  try {
-    sessionStorage.setItem(`${CONTROLS_CACHE_PREFIX}${apiBase}`, JSON.stringify(value));
-  } catch { /* private mode / quota */ }
+function controlsCacheKey(apiBase: string): string {
+  return `${CONTROLS_CACHE_PREFIX}${apiBase}`;
 }
 
 export function useDashboardData(apiBase: string) {
@@ -86,7 +74,10 @@ export function useDashboardData(apiBase: string) {
   const [selectedSection, setSelectedSection] = useState<DashboardSection>(readDashboardSectionFromHash);
   const [modelQuery, setModelQuery] = useState("");
   const [expandedProviders, setExpandedProviders] = useState<Set<string>>(new Set());
-  const cachedControls = useMemo(() => readCachedControls(apiBase), [apiBase]);
+  const cachedControls = useMemo(
+    () => readSessionListCache<CachedControls>(controlsCacheKey(apiBase)),
+    [apiBase],
+  );
   const cachedOverview = useMemo(
     () => readSessionListCache<CachedOverview>(`${OVERVIEW_CACHE_PREFIX}${apiBase}`),
     [apiBase],
@@ -281,12 +272,12 @@ export function useDashboardData(apiBase: string) {
     if (!data) return;
     if (data.health) {
       setHealth(data.health);
+      setProviders(data.providers);
       writeSessionListCache(`${OVERVIEW_CACHE_PREFIX}${apiBase}`, {
         health: data.health,
         providers: data.providers,
       });
     }
-    setProviders(data.providers);
     setError(data.error);
   }, [overviewPoll.data, apiBase]);
 
@@ -318,19 +309,19 @@ export function useDashboardData(apiBase: string) {
     const data = sidecarPoll.data;
     if (!data) return;
     setSidecar(data.sidecar);
-    setShadowCall(data.shadowCall);
-    const prev = readCachedControls(apiBase) ?? {};
-    writeCachedControls(apiBase, {
+    if (data.shadowCall !== undefined) setShadowCall(data.shadowCall);
+    const prev = readSessionListCache<CachedControls>(controlsCacheKey(apiBase)) ?? {};
+    writeSessionListCache(controlsCacheKey(apiBase), {
       ...prev,
       sidecar: data.sidecar,
-      shadowCall: data.shadowCall,
+      ...(data.shadowCall !== undefined ? { shadowCall: data.shadowCall } : {}),
     });
   }, [sidecarPoll.data, apiBase]);
 
   useEffect(() => {
     const data = settingsPoll.data;
     if (!data) return;
-    if (data.settings) setSettings(data.settings);
+    if (data.settings !== undefined) setSettings(data.settings);
     // Latest-wins: only seed from settings when no newer dedicated probe has committed
     // while this settings poll was in flight. Always merge against the live ref.
     if (
@@ -342,11 +333,13 @@ export function useDashboardData(apiBase: string) {
       startupHealthRef.current = merged;
       if (merged) writeSessionListCache(`${STARTUP_CACHE_PREFIX}${apiBase}`, merged);
     }
-    const prev = readCachedControls(apiBase) ?? {};
-    writeCachedControls(apiBase, {
-      ...prev,
-      settings: data.settings ?? undefined,
-    });
+    if (data.settings !== undefined) {
+      const prev = readSessionListCache<CachedControls>(controlsCacheKey(apiBase)) ?? {};
+      writeSessionListCache(controlsCacheKey(apiBase), {
+        ...prev,
+        settings: data.settings,
+      });
+    }
   }, [settingsPoll.data, apiBase]);
 
   useEffect(() => {
@@ -455,8 +448,8 @@ export function useDashboardData(apiBase: string) {
       });
       const data = await requireJson<SidecarData>(res, "save failed");
       setSidecar({ webSearch: data.webSearch, vision: data.vision });
-      const prev = readCachedControls(apiBase) ?? {};
-      writeCachedControls(apiBase, {
+      const prev = readSessionListCache<CachedControls>(controlsCacheKey(apiBase)) ?? {};
+      writeSessionListCache(controlsCacheKey(apiBase), {
         ...prev,
         sidecar: { webSearch: data.webSearch, vision: data.vision },
       });
diff --git a/gui/src/pages/use-providers-fetch.ts b/gui/src/pages/use-providers-fetch.ts
@@ -43,7 +43,7 @@ export function useProvidersFetch({
       const provs: string[] = provData?.providers ?? [];
       setOauthProviders(provs);
       const oauthEntries = await Promise.all(provs.map(async p => {
-        const sRes = await fetch(`${apiBase}/api/oauth/status?provider=${p}`).catch(() => null);
+        const sRes = await fetch(`${apiBase}/api/oauth/status?provider=${encodeURIComponent(p)}`).catch(() => null);
         const s = sRes ? (await readJsonIfOk<OAuthStatus>(sRes) ?? { loggedIn: false }) : { loggedIn: false };
         return [p, s] as const;
       }));
diff --git a/gui/src/styles.css b/gui/src/styles.css
@@ -16,11 +16,6 @@
 @import "./styles-combos-workspace.css";
 @import "./styles-models-workspace.css";
 @import "./styles-dashboard-workspace.css";
-@import "./styles-storage-workspace.css";
-@import "./styles-subagents-workspace.css";
-@import "./styles-usage-workspace.css";
-@import "./styles-claudecode-workspace.css";
-@import "./styles-apikeys-workspace.css";
 
 :root {
   /* default: follow the OS; [data-theme] below pins color-scheme so light-dark() obeys it */
@@ -1092,10 +1087,7 @@ dialog.modal-overlay::backdrop {
 .quota-reset-time { font-size: var(--text-caption); color: var(--muted); white-space: nowrap; }
 .quota-reset-time { font-family: var(--font-code); }
 .bar { height: 5px; background: var(--raised); border-radius: var(--radius-2xs); overflow: hidden; min-width: 0; }
-<<<<<<< HEAD
-=======
 /* Full-width fill scaled on X — avoids layout thrash from animating width. */
->>>>>>> 6cbe980c (perf(gui): progressive dashboard paint and Startup safety CLS)
 .bar-fill {
   height: 100%;
   width: 100%;
@@ -1386,7 +1378,6 @@ dialog.modal-overlay::backdrop {
   flex: 1 1 auto;
   min-width: 0;
   overflow-wrap: anywhere;
-  word-break: break-word;
 }
 .startup-runtime-notice__fix .btn {
   flex: 0 0 auto;
diff --git a/gui/tests/collapse-store.test.ts b/gui/tests/collapse-store.test.ts
@@ -75,11 +75,11 @@ test("toggleInSet adds and removes without mutating its input", () => {
   expect(original.has("opus")).toBe(true);
 });
 
-test("every family folds by default", () => {
+test("empty families fold by default", () => {
   expect([...defaultCollapsedFamilies({ opus: 23, fable: 0, sonnet: 0, haiku: 0 })].toSorted())
-    .toEqual(["fable", "haiku", "opus", "sonnet"]);
+    .toEqual(["fable", "haiku", "sonnet"]);
   expect([...defaultCollapsedFamilies({ opus: 12, fable: 0, sonnet: 4, haiku: 0 })].toSorted())
-    .toEqual(["fable", "haiku", "opus", "sonnet"]);
+    .toEqual(["fable", "haiku"]);
   expect([...defaultCollapsedFamilies({ opus: 1, fable: 1, sonnet: 1, haiku: 1 })].toSorted())
-    .toEqual(["fable", "haiku", "opus", "sonnet"]);
+    .toEqual([]);
 });
diff --git a/src/server/management/config-routes.ts b/src/server/management/config-routes.ts
@@ -229,11 +229,11 @@ export async function handleConfigRoutes(ctx: ManagementContext): Promise<Respon
 
   if (url.pathname === "/api/sync" && req.method === "POST") {
     const { syncModelsToCodex } = await import("../../codex/sync");
+    const { attachStaleAppServerHint } = await import("../../codex/app-server-processes");
     const result = await syncModelsToCodex(undefined, config, null);
     return jsonResponse({
-      ...result,
+      ...attachStaleAppServerHint(result),
       ...(result.ok ? {} : { error: result.message }),
-      staleAppServerHint: "If Codex App still shows an older model list, restart its long-lived app-server process after sync.",
     }, result.ok ? 200 : 500);
   }
 
diff --git a/src/service.ts b/src/service.ts
diff --git a/tests/service.test.ts b/tests/service.test.ts
