fix(gui): address CodeRabbit follow-ups on dense workspaces

Author: Wibias

gui/src/App.tsx

@@ -300,8 +300,8 @@ export default function App() {
             {page === "startup" && <Startup apiBase={API_BASE} />}
             {page === "providers" && <Providers apiBase={API_BASE} />}
             {page === "models" && <Models apiBase={API_BASE} />}
-            {page === "combos" && <Combos apiBase={API_BASE} />}
-            {page === "subagents" && <Subagents apiBase={API_BASE} />}
+            {page === "combos" && <Combos key={API_BASE} apiBase={API_BASE} />}
+            {page === "subagents" && <Subagents key={API_BASE} apiBase={API_BASE} />}
             {page === "logs" && <Logs apiBase={API_BASE} />}
             {page === "usage" && <Usage apiBase={API_BASE} />}
             {page === "storage" && <Storage apiBase={API_BASE} />}

gui/src/components/apikeys-workspace/ApiKeysWorkspace.tsx

@@ -2,7 +2,7 @@
  * ApiKeysWorkspace — rail + main for the API tab. Overview hosts the existing
  * endpoint/auth/generate/models/usage panels; selecting a key opens detail.
  */
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { IconChevron, IconTrash } from "../../icons";
 import { useT } from "../../i18n/shared";
 import type { ExternalModelRow } from "../../api-access-models";
@@ -79,22 +79,39 @@ export default function ApiKeysWorkspace({
   const t = useT();
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const [confirmDelete, setConfirmDelete] = useState(false);
+  /** Armed after a short delay so a double-click / retained focus cannot confirm immediately. */
+  const [confirmArmed, setConfirmArmed] = useState(false);
 
   const selected = selectedId ? (keys.find(k => k.id === selectedId) ?? null) : null;
 
+  const clearDeleteConfirm = () => {
+    setConfirmDelete(false);
+    setConfirmArmed(false);
+  };
+
   const showOverview = () => {
     setSelectedId(null);
-    setConfirmDelete(false);
+    clearDeleteConfirm();
   };
 
-  const handleDeleteClick = () => {
-    if (!selected) return;
+  useEffect(() => {
     if (!confirmDelete) {
-      setConfirmDelete(true);
+      setConfirmArmed(false);
       return;
     }
+    const timer = window.setTimeout(() => setConfirmArmed(true), 300);
+    return () => window.clearTimeout(timer);
+  }, [confirmDelete]);
+
+  const handleRequestDelete = () => {
+    if (!selected) return;
+    setConfirmDelete(true);
+  };
+
+  const handleConfirmDelete = () => {
+    if (!selected || !confirmArmed) return;
     onDelete(selected.id);
-    setConfirmDelete(false);
+    clearDeleteConfirm();
     setSelectedId(null);
   };
 
@@ -128,7 +145,7 @@ export default function ApiKeysWorkspace({
                   key={k.id}
                   type="button"
                   className={`apikeys-workspace-rail-row${selectedId === k.id ? " apikeys-workspace-rail-row--selected" : ""}`}
-                  onClick={() => { setSelectedId(k.id); setConfirmDelete(false); }}
+                  onClick={() => { setSelectedId(k.id); clearDeleteConfirm(); }}
                   aria-current={selectedId === k.id ? "page" : undefined}
                 >
                   <span className="apikeys-workspace-rail-name">{k.name}</span>
@@ -156,18 +173,25 @@ export default function ApiKeysWorkspace({
                   <span className="awi-detail-actions">
                     {confirmDelete ? (
                       <>
-                        <button type="button" className="btn btn-danger btn-sm" onClick={handleDeleteClick}>
+                        <button
+                          key="confirm-delete"
+                          type="button"
+                          className="btn btn-danger btn-sm awi-confirm-delete"
+                          onClick={handleConfirmDelete}
+                          disabled={!confirmArmed}
+                        >
                           <IconTrash /> {t("api.confirm")}
                         </button>
-                        <button type="button" className="btn btn-ghost btn-sm" onClick={() => setConfirmDelete(false)}>
+                        <button type="button" className="btn btn-ghost btn-sm" onClick={clearDeleteConfirm}>
                           {t("common.cancel")}
                         </button>
                       </>
                     ) : (
                       <button
+                        key="request-delete"
                         type="button"
                         className="btn btn-danger btn-sm"
-                        onClick={handleDeleteClick}
+                        onClick={handleRequestDelete}
                         aria-label={t("api.deleteAria")}
                       >
                         <IconTrash /> {t("api.workspace.deleteKey")}

gui/src/components/subagents-workspace/SubagentsWorkspace.tsx

@@ -28,7 +28,7 @@ export interface SubagentsWorkspaceProps {
   onSave: () => void;
 }
 
-const FEATURED_MAX = 5;
+export const FEATURED_MAX = 5;
 
 export default function SubagentsWorkspace({
   available,
@@ -156,7 +156,7 @@ export default function SubagentsWorkspace({
               </button>
               <div className="swi-detail-head">
                 <span className="swi-detail-icon"><IconBot style={{ width: 24, height: 24 }} /></span>
-                <h2 className="swi-detail-title">{selected}</h2>
+                <h2 className="swi-detail-title">{modelLabel(selected)}</h2>
               </div>
 
               <div className="swi-detail-section">
@@ -184,6 +184,9 @@ export default function SubagentsWorkspace({
                       <IconPlus /> {full ? t("sub.workspace.featuredFull") : t("sub.workspace.addToFeatured", { m: selected })}
                     </button>
                   )}
+                  <button type="button" className="btn btn-primary" onClick={onSave} disabled={busy}>
+                    {t("common.save")}
+                  </button>
                 </div>
               </div>
             </div>

gui/src/pages/Claude.tsx

@@ -62,22 +62,22 @@ export default function Claude({ apiBase }: { apiBase: string }) {
         </button>
       </div>
 
-      {/* Code stays mounted; Desktop mounts only when selected so its fetch is not forever-stale. */}
+      {/* Both stay mounted so draft/UI state survives tab switches; Desktop pauses polls while hidden. */}
       <div
         id="claude-code-panel"
         role="tabpanel"
         aria-labelledby="claude-code-tab"
         hidden={tab !== "code"}
       >
-        <ClaudeCode apiBase={apiBase} />
+        <ClaudeCode key={apiBase} apiBase={apiBase} />
       </div>
       <div
         id="claude-desktop-panel"
         role="tabpanel"
         aria-labelledby="claude-desktop-tab"
         hidden={tab !== "desktop"}
       >
-        {tab === "desktop" ? <ClaudeDesktop apiBase={apiBase} /> : null}
+        <ClaudeDesktop key={apiBase} apiBase={apiBase} active={tab === "desktop"} />
       </div>
     </section>
   );

gui/src/pages/ClaudeCode.tsx

@@ -20,19 +20,22 @@ export { AutoConnectSetting, SmallFastModelSetting } from "./claude-code-setting
 
 type CachedClaudeCode = { state: ClaudeCodeState; rows: MapRow[] };
 
+function seedClaudeCode(cacheKey: string): CachedClaudeCode | null {
+  return readSessionListCache<CachedClaudeCode>(cacheKey);
+}
+
 export default function ClaudeCode({ apiBase }: { apiBase: string }) {
   const t = useT();
   const { locale } = useI18n();
   const localeTag = LOCALES.find(l => l.code === locale)?.htmlLang ?? "en";
   const cacheKey = `ocx.claude-code.v1:${apiBase}`;
-  const cached = readSessionListCache<CachedClaudeCode>(cacheKey);
-  const [state, setState] = useState<ClaudeCodeState | null>(() => cached?.state ?? null);
-  const [rows, setRows] = useState<MapRow[]>(() => cached?.rows ?? []);
+  const [state, setState] = useState<ClaudeCodeState | null>(() => seedClaudeCode(cacheKey)?.state ?? null);
+  const [rows, setRows] = useState<MapRow[]>(() => seedClaudeCode(cacheKey)?.rows ?? []);
   const [status, setStatus] = useState("");
   const [ok, setOk] = useState(false);
-  const [loading, setLoading] = useState(() => !cached?.state);
+  const [loading, setLoading] = useState(() => !seedClaudeCode(cacheKey)?.state);
   const [selectedSection, setSelectedSection] = useState("settings");
-  const hasCacheRef = useRef(Boolean(cached?.state));
+  const hasCacheRef = useRef(Boolean(seedClaudeCode(cacheKey)?.state));
 
   const load = useCallback(async () => {
     if (!hasCacheRef.current) setLoading(true);

gui/src/pages/ClaudeDesktop.tsx

@@ -121,22 +121,36 @@ function formatContextWindow(value: number | undefined, t: TFn): string | null {
     : t("claudeDesktop.contextK", { n: Math.round(value / 1_000) });
 }
 
-export default function ClaudeDesktop({ apiBase }: { apiBase: string }) {
+type CachedDesktop = { data: DesktopResponse; profile: DesktopProfile };
+
+function readDesktopCache(cacheKey: string): CachedDesktop | null {
+  return readSessionListCache<CachedDesktop>(cacheKey);
+}
+
+function seedDesktop(cacheKey: string) {
+  const cached = readDesktopCache(cacheKey);
+  return {
+    data: cached?.data ?? null,
+    profile: cached?.profile ?? null,
+    savedProfile: cached?.profile ? cloneProfile(cached.profile) : null,
+    destinations: cached?.data
+      ? Object.fromEntries(
+        cached.data.models.map(model => [model.route, cached.profile.assignments[model.route]?.family ?? "opus"]),
+      )
+      : {} as Record<string, Family>,
+    hasCache: Boolean(cached?.data),
+  };
+}
+
+export default function ClaudeDesktop({ apiBase, active = true }: { apiBase: string; active?: boolean }) {
   const t = useT();
   const cacheKey = `ocx.claude-desktop.v1:${apiBase}`;
-  const cached = readSessionListCache<{ data: DesktopResponse; profile: DesktopProfile }>(cacheKey);
+  const [data, setData] = useState<DesktopResponse | null>(() => seedDesktop(cacheKey).data);
+  const [profile, setProfile] = useState<DesktopProfile | null>(() => seedDesktop(cacheKey).profile);
+  const [savedProfile, setSavedProfile] = useState<DesktopProfile | null>(() => seedDesktop(cacheKey).savedProfile);
+  const [destinations, setDestinations] = useState<Record<string, Family>>(() => seedDesktop(cacheKey).destinations);
   const [status, setStatus] = useState<DesktopStatus | null>(null);
-  const [data, setData] = useState<DesktopResponse | null>(() => cached?.data ?? null);
-  const [profile, setProfile] = useState<DesktopProfile | null>(() => cached?.profile ?? null);
-  const [savedProfile, setSavedProfile] = useState<DesktopProfile | null>(() => (
-    cached?.profile ? cloneProfile(cached.profile) : null
-  ));
-  const [destinations, setDestinations] = useState<Record<string, Family>>(() => (
-    cached?.data
-      ? Object.fromEntries(cached.data.models.map(model => [model.route, cached.profile.assignments[model.route]?.family ?? "opus"]))
-      : {}
-  ));
-  const [loading, setLoading] = useState(() => !cached?.data);
+  const [loading, setLoading] = useState(() => !seedDesktop(cacheKey).hasCache);
   const [loadError, setLoadError] = useState("");
   const [message, setMessage] = useState<{ tone: "ok" | "err"; text: string } | null>(null);
   const [announcement, setAnnouncement] = useState("");
@@ -155,7 +169,7 @@ export default function ClaudeDesktop({ apiBase }: { apiBase: string }) {
   // is not, and restoring five open rows on reload would rebuild the wall this removes.
   const [openRows, setOpenRows] = useState<Record<string, boolean>>({});
   const importRef = useRef<HTMLInputElement>(null);
-  const hasCacheRef = useRef(Boolean(cached?.data));
+  const hasCacheRef = useRef(seedDesktop(cacheKey).hasCache);
 
   const load = useCallback(async () => {
     if (!hasCacheRef.current) setLoading(true);
@@ -220,16 +234,17 @@ export default function ClaudeDesktop({ apiBase }: { apiBase: string }) {
     return result;
   }, [modelsByFamily, profile]);
 
-  // Poll Desktop status every 5s for applied-state + health.
+  // Poll Desktop status every 5s for applied-state + health (paused while tab is hidden).
   useEffect(() => {
+    if (!active) return;
     let cancelled = false;
     let inFlight = false;
-    let active: ReturnType<typeof createBoundedFetch> | null = null;
+    let activeFetch: ReturnType<typeof createBoundedFetch> | null = null;
     const poll = () => {
       if (inFlight) return;
       inFlight = true;
       const bounded = createBoundedFetch(10_000);
-      active = bounded;
+      activeFetch = bounded;
       void fetch(`${apiBase}/api/claude-desktop/status`, { signal: bounded.signal })
         .then((response) => readJsonIfOk<DesktopStatus>(response))
         .then((data) => {
@@ -239,7 +254,7 @@ export default function ClaudeDesktop({ apiBase }: { apiBase: string }) {
         .catch(() => { /* offline / older proxy / aborted */ })
         .finally(() => {
           bounded.clear();
-          if (active === bounded) active = null;
+          if (activeFetch === bounded) activeFetch = null;
           inFlight = false;
         });
     };
@@ -248,10 +263,10 @@ export default function ClaudeDesktop({ apiBase }: { apiBase: string }) {
     return () => {
       cancelled = true;
       clearInterval(timer);
-      active?.controller.abort();
-      active?.clear();
+      activeFetch?.controller.abort();
+      activeFetch?.clear();
     };
-  }, [apiBase]);
+  }, [apiBase, active]);
 
   const moveModel = (route: string, family: Family) => {
     if (!profile || profile.assignments[route]?.family === family) return;

gui/src/pages/Combos.tsx

@@ -46,21 +46,24 @@ function responseSucceeded(data: unknown): boolean {
     && (data as { success?: unknown }).success === true;
 }
 
+function seedCombos(cacheKey: string): CachedCombosPage | null {
+  return readSessionListCache<CachedCombosPage>(cacheKey);
+}
+
 export default function Combos({ apiBase }: { apiBase: string }) {
   const t = useT();
   const cacheKey = `ocx.combos.workspace.v1:${apiBase}`;
-  const cached = readSessionListCache<CachedCombosPage>(cacheKey);
-  const hasCacheRef = useRef(Boolean(cached));
-  const [combos, setCombos] = useState<ComboItem[]>(() => cached?.combos ?? []);
-  const [providers, setProviders] = useState<ProviderOption[]>(() => cached?.providers ?? []);
-  const [models, setModels] = useState<ModelOption[]>(() => cached?.models ?? []);
+  const [combos, setCombos] = useState<ComboItem[]>(() => seedCombos(cacheKey)?.combos ?? []);
+  const [providers, setProviders] = useState<ProviderOption[]>(() => seedCombos(cacheKey)?.providers ?? []);
+  const [models, setModels] = useState<ModelOption[]>(() => seedCombos(cacheKey)?.models ?? []);
   const [cataloguedComboIds, setCataloguedComboIds] = useState<ReadonlySet<string>>(
-    () => new Set(cached?.cataloguedComboIds ?? []),
+    () => new Set(seedCombos(cacheKey)?.cataloguedComboIds ?? []),
   );
-  const [loading, setLoading] = useState(() => !cached);
+  const [loading, setLoading] = useState(() => !seedCombos(cacheKey));
   const [status, setStatus] = useState("");
   const [statusOk, setStatusOk] = useState(false);
   const [adding, setAdding] = useState(false);
+  const hasCacheRef = useRef(Boolean(seedCombos(cacheKey)));
 
   const notify = (msg: string, ok: boolean) => {
     setStatus(msg);
@@ -77,7 +80,7 @@ export default function Combos({ apiBase }: { apiBase: string }) {
     return () => window.clearTimeout(timer);
   }, [status, statusOk]);
 
-  const fetchAll = useCallback(async () => {
+  const fetchAll = useCallback(async (opts?: { notifyOnFail?: boolean }) => {
     // Soft refresh: keep last-good workspace painted while revalidating.
     if (!hasCacheRef.current) setLoading(true);
     try {
@@ -166,7 +169,7 @@ export default function Combos({ apiBase }: { apiBase: string }) {
         cataloguedComboIds: [...catalogued],
       } satisfies CachedCombosPage);
     } catch {
-      if (!hasCacheRef.current) notify(t("cws.loadFailed"), false);
+      if (!hasCacheRef.current || opts?.notifyOnFail) notify(t("cws.loadFailed"), false);
     } finally {
       setLoading(false);
     }
@@ -262,7 +265,7 @@ export default function Combos({ apiBase }: { apiBase: string }) {
           models={models}
           cataloguedComboIds={cataloguedComboIds}
           loading={loading}
-          onRefresh={() => { void fetchAll(); }}
+          onRefresh={() => { void fetchAll({ notifyOnFail: true }); }}
           onSave={saveCombo}
           onRemove={removeCombo}
           onAdd={() => setAdding(true)}