fix(gui): keep seed revalidate across StrictMode and harden revisit UX

Clear seedNeedsRevalidate only after a settled fetch so aborted mounts still revalidate, stabilize the Claude Desktop port callback, and validate/announce Models combo cache failures.

Author: Wibias

gui/src/client-resource.ts

@@ -230,6 +230,8 @@ async function runFetch<T>(
   try {
     const data = await fetcher(controller.signal);
     if (gen !== store.generation || controller.signal.aborted) return;
+    // Cleared on settle (not at subscribe) so StrictMode's aborted first mount still revalidates.
+    store.seedNeedsRevalidate = false;
     store.snapshot = {
       data,
       error: undefined,
@@ -240,6 +242,7 @@ async function runFetch<T>(
     };
   } catch (error) {
     if (gen !== store.generation || controller.signal.aborted) return;
+    store.seedNeedsRevalidate = false;
     store.snapshot = {
       ...store.snapshot,
       // Normalize so a loader that rejects with `undefined` still reads as a failure.
@@ -309,7 +312,6 @@ function subscribeResource<T>(
   // cached data across transient 0→1 resubscribe gaps when neither applies.
   if (store.subscriberCount === 1) {
     if (store.snapshot.data === undefined || store.seedNeedsRevalidate) {
-      store.seedNeedsRevalidate = false;
       void runFetch(store, fetcher, { replaceInflight: true, owner: onStoreChange });
     }
   }

gui/src/pages/Claude.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, type KeyboardEvent } from "react";
+import { useCallback, useRef, useState, type KeyboardEvent } from "react";
 import ClaudeCode from "./ClaudeCode";
 import ClaudeDesktop from "./ClaudeDesktop";
 import { useT } from "../i18n/shared";
@@ -22,7 +22,14 @@ export default function Claude({ apiBase }: { apiBase: string }) {
   const seededDesktopPort = readCachedDesktopPort(apiBase);
   const [liveDesktopPort, setLiveDesktopPort] = useState<{ base: string; port: number | null } | null>(null);
   const desktopPort = liveDesktopPort?.base === apiBase ? liveDesktopPort.port : seededDesktopPort;
-  const setDesktopPort = (port: number | null) => setLiveDesktopPort({ base: apiBase, port });
+  const desktopSettled = liveDesktopPort?.base === apiBase;
+  // Skip no-op writes: an unstable callback + always-new object would loop with Desktop's effect.
+  const setDesktopPort = useCallback((port: number | null) => {
+    setLiveDesktopPort((prev) => {
+      if (prev?.base === apiBase && prev.port === port) return prev;
+      return { base: apiBase, port };
+    });
+  }, [apiBase]);
 
   const selectTab = (next: ClaudeTab) => {
     setTab(next);
@@ -59,7 +66,9 @@ export default function Claude({ apiBase }: { apiBase: string }) {
           <p className="page-sub">
             {desktopPort != null
               ? t("claudeDesktop.subtitle", { port: desktopPort })
-              : t("claudeDesktop.loading")}
+              : desktopSettled
+                ? t("claudeDesktop.loadFail")
+                : t("claudeDesktop.loading")}
           </p>
         )}
       </div>

gui/src/pages/ClaudeDesktop.tsx

@@ -150,8 +150,8 @@ export default function ClaudeDesktop({
 }: {
   apiBase: string;
   active?: boolean;
-  /** Keeps the Claude page intro subtitle in sync once /api/claude-desktop resolves a port. */
-  onPortChange?: (port: number) => void;
+  /** Keeps the Claude page intro subtitle in sync once /api/claude-desktop settles (port or failure). */
+  onPortChange?: (port: number | null) => void;
 }) {
   const { t, locale } = useI18n();
   const localeTag = LOCALES.find(l => l.code === locale)?.htmlLang;
@@ -225,8 +225,14 @@ export default function ClaudeDesktop({
   const destinations = Object.keys(draftDestinations).length > 0 ? draftDestinations : resourceDestinations;
 
   useEffect(() => {
-    if (typeof data?.port === "number") onPortChange?.(data.port);
-  }, [data?.port, onPortChange]);
+    if (!onPortChange) return;
+    if (typeof data?.port === "number") {
+      onPortChange(data.port);
+      return;
+    }
+    // Cold failure with no port: stop the parent subtitle from claiming "Loading…" forever.
+    if (loadState.kind === "failed-cold") onPortChange(null);
+  }, [data?.port, loadState.kind, onPortChange]);
 
   const dirty = useMemo(
     () => profile !== null && savedProfile !== null && JSON.stringify(profile) !== JSON.stringify(savedProfile),

gui/src/pages/Models.tsx

@@ -56,6 +56,12 @@ type CachedModelsPage = {
   contextCapValue: number;
 };
 
+/** Session JSON is untrusted — only seed rows that survive parseComboList (targets always arrays). */
+function readCachedCombos(value: unknown): ComboItem[] | null {
+  if (!Array.isArray(value)) return null;
+  return parseComboList({ combos: value });
+}
+
 export default function Models({ apiBase }: { apiBase: string }) {
   const t: TFn = useT();
   const cacheKey = `ocx.models.catalog.v1:${apiBase}`;
@@ -106,11 +112,11 @@ export default function Models({ apiBase }: { apiBase: string }) {
   // null + combosError so an API error never masquerades as "no combos configured".
   const combosCacheKey = `ocx.models.combos.v1:${apiBase}`;
   const seededCombos = useMemo(() => {
-    const own = readSessionListCache<ComboItem[]>(combosCacheKey);
-    if (own) return own;
+    const own = readCachedCombos(readSessionListCache<unknown>(combosCacheKey));
+    if (own !== null) return own;
     // Reuse the Combos workspace session snapshot when Models opens first in the session.
-    const workspace = readSessionListCache<{ combos?: ComboItem[] }>(`ocx.combos.workspace.v1:${apiBase}`);
-    return Array.isArray(workspace?.combos) ? workspace.combos : null;
+    const workspace = readSessionListCache<{ combos?: unknown }>(`ocx.combos.workspace.v1:${apiBase}`);
+    return readCachedCombos(workspace?.combos);
   }, [apiBase, combosCacheKey]);
   const combosResource = useDataSurface<ComboItem[]>(
     `models-combos:${apiBase}`,
@@ -127,7 +133,8 @@ export default function Models({ apiBase }: { apiBase: string }) {
   const combosState = combosResource.state;
   // Keep a previously painted card on a later failure so the catalog does not yank down.
   const combos = combosState.data ?? seededCombos;
-  const combosError = combosState.showError && combos === null;
+  // Announce failures even when stale/seeded rows remain (layout kept; freshness not faked).
+  const combosError = combosState.showError;
   const [combosOpen, setCombosOpen] = useState(readCombosOpen);
 
   // App owns the in-session view mode; fallback to persisted mode for isolated renders/tests.
@@ -1053,23 +1060,35 @@ export default function Models({ apiBase }: { apiBase: string }) {
               <strong>{t("nav.combos")}</strong>
               <span className="muted text-label" role="alert">{t("models.loadFail")}</span>
             </div>
-            <a className="btn btn-sm" href="#combos" style={{ flexShrink: 0 }}>{t("models.combosSetup")}</a>
+            <button type="button" className="btn btn-sm" style={{ flexShrink: 0 }} onClick={() => combosResource.refresh()}>
+              {t("common.retry")}
+            </button>
           </div>
         </div>
       )}
-      {combos !== null && !combosError && combos.length === 0 && (
+      {combos !== null && combos.length === 0 && (
         <div className="card models-combos-card">
           <div className="row models-combos-empty-head">
             <div className="row models-field-row" style={{ minWidth: 0 }}>
               <IconShuffle width={14} height={14} aria-hidden="true" style={{ flexShrink: 0 }} />
               <strong>{t("nav.combos")}</strong>
-              <span className="muted text-label">{t("models.combosEmpty")}</span>
+              {combosError ? (
+                <span className="muted text-label" role="alert">{t("models.loadFail")}</span>
+              ) : (
+                <span className="muted text-label">{t("models.combosEmpty")}</span>
+              )}
             </div>
-            <a className="btn btn-sm" href="#combos" style={{ flexShrink: 0 }}>{t("models.combosSetup")}</a>
+            {combosError ? (
+              <button type="button" className="btn btn-sm" style={{ flexShrink: 0 }} onClick={() => combosResource.refresh()}>
+                {t("common.retry")}
+              </button>
+            ) : (
+              <a className="btn btn-sm" href="#combos" style={{ flexShrink: 0 }}>{t("models.combosSetup")}</a>
+            )}
           </div>
         </div>
       )}
-      {combos !== null && !combosError && combos.length > 0 && (
+      {combos !== null && combos.length > 0 && (
         <div className="card models-combos-card">
           <div className={`row group-head models-field-row${combosOpen ? " open" : ""}`}>
             <button
@@ -1083,8 +1102,17 @@ export default function Models({ apiBase }: { apiBase: string }) {
               <IconShuffle width={14} height={14} aria-hidden="true" style={{ flexShrink: 0 }} />
               <strong>{t("nav.combos")}</strong>
               <span className="muted mono text-label">{t("models.combosActive", { count: combos.length })}</span>
+              {combosError && (
+                <span className="muted text-label" role="alert">{t("models.loadFail")}</span>
+              )}
             </button>
-            <a className="btn btn-sm btn-ghost" href="#combos" style={{ flexShrink: 0 }}>{t("models.combosSetup")}</a>
+            {combosError ? (
+              <button type="button" className="btn btn-sm btn-ghost" style={{ flexShrink: 0 }} onClick={() => combosResource.refresh()}>
+                {t("common.retry")}
+              </button>
+            ) : (
+              <a className="btn btn-sm btn-ghost" href="#combos" style={{ flexShrink: 0 }}>{t("models.combosSetup")}</a>
+            )}
           </div>
           {combosOpen && (
             <div>

gui/tests/client-resource-poll.test.tsx

@@ -591,3 +591,40 @@ test("pre-subscribe seed still quiet-revalidates on first subscribe", async () =
   });
   container.remove();
 });
+
+test("StrictMode remount still quiet-revalidates a pre-subscribe seed", async () => {
+  const { createRoot } = await import("react-dom/client");
+  const { StrictMode } = await import("react");
+  const container = document.createElement("div");
+  document.body.append(container);
+
+  const KEY = `seed-strictmode-${Date.now()}`;
+  let fetches = 0;
+  setClientResourceData(KEY, "seeded");
+
+  function Page() {
+    const resource = useClientResource(KEY, async () => {
+      fetches += 1;
+      return "fresh";
+    });
+    return <span>{resource.data ?? ""}</span>;
+  }
+
+  let root!: Root;
+  await act(async () => {
+    root = createRoot(container);
+    root.render(
+      <StrictMode>
+        <Page />
+      </StrictMode>,
+    );
+  });
+  // Dev StrictMode aborts the first subscribe's fetch; the remount must still revalidate.
+  await waitFor(() => container.textContent === "fresh");
+  expect(fetches).toBeGreaterThanOrEqual(1);
+
+  await act(async () => {
+    root.unmount();
+  });
+  container.remove();
+});