fix(gui): clear react-doctor warnings on dashboard stack

Author: Wibias

gui/src/components/provider-workspace/ProviderAuthPanel.tsx

@@ -28,9 +28,11 @@ import type { AccountLoadState, OAuthAccountRow, ApiKeyRow, LoginHint, ProviderA
 
 const DOCTOR_CMD = "ocx doctor";
 const QUOTA_ENRICH_RESERVE_MS = 4_000;
+const EMPTY_OAUTH_ACCOUNTS: OAuthAccountRow[] = [];
+const EMPTY_API_KEYS: ApiKeyRow[] = [];
 
 export default function ProviderAuthPanel({
-  item, apiBase, oauth, accounts = [], keys = [], accountLoadState = "ready",
+  item, apiBase, oauth, accounts = EMPTY_OAUTH_ACCOUNTS, keys = EMPTY_API_KEYS, accountLoadState = "ready",
   switchingAccountId = null, busy = false, loginHint, authHandlers, onCodexActiveNeedsReauthChange,
   codexController,
 }: {

gui/src/components/provider-workspace/ProviderWorkspaceShell.tsx

@@ -108,16 +108,17 @@ export default function ProviderWorkspaceShell({
   const [modelsLoadFailed, setModelsLoadFailed] = useState(false);
   const quotasCacheKey = `ocx.providers.quotas.v1:${apiBase}`;
   const usageCacheKey = `ocx.providers.usage.v1:${apiBase}`;
-  const cachedQuotas = readSessionListCache<Record<string, ProviderQuotaReportView>>(quotasCacheKey);
-  const cachedUsage = readSessionListCache<{
-    totals: Record<string, ProviderUsageTotals>;
-    models: Record<string, ProviderModelUsageRow[]>;
-  }>(usageCacheKey);
-  const [usageTotals, setUsageTotals] = useState<Record<string, ProviderUsageTotals>>(() => cachedUsage?.totals ?? {});
-  const [usageModels, setUsageModels] = useState<Record<string, ProviderModelUsageRow[]>>(() => cachedUsage?.models ?? {});
-  const [quotaReports, setQuotaReports] = useState<Record<string, ProviderQuotaReportView>>(() => cachedQuotas ?? {});
-  const [usageLoading, setUsageLoading] = useState(() => !cachedUsage);
-  const [quotasLoading, setQuotasLoading] = useState(() => !cachedQuotas);
+  const [usageTotals, setUsageTotals] = useState<Record<string, ProviderUsageTotals>>(() => (
+    readSessionListCache<{ totals: Record<string, ProviderUsageTotals> }>(usageCacheKey)?.totals ?? {}
+  ));
+  const [usageModels, setUsageModels] = useState<Record<string, ProviderModelUsageRow[]>>(() => (
+    readSessionListCache<{ models: Record<string, ProviderModelUsageRow[]> }>(usageCacheKey)?.models ?? {}
+  ));
+  const [quotaReports, setQuotaReports] = useState<Record<string, ProviderQuotaReportView>>(() => (
+    readSessionListCache<Record<string, ProviderQuotaReportView>>(quotasCacheKey) ?? {}
+  ));
+  const [usageLoading, setUsageLoading] = useState(() => !readSessionListCache(usageCacheKey));
+  const [quotasLoading, setQuotasLoading] = useState(() => !readSessionListCache(quotasCacheKey));
   const [modelsLoadEpoch, setModelsLoadEpoch] = useState(0);
   const filterWrapRef = useRef<HTMLDivElement>(null);
 
@@ -164,7 +165,9 @@ export default function ProviderWorkspaceShell({
     let cancelled = false;
     const timeout = window.setTimeout(() => {
       // Keep last-good paint when sessionStorage already seeded — don't flash loading skeletons.
-      if (!cachedUsage) setUsageLoading(true);
+      // Read inside the effect (keyed by usageCacheKey) so the seed check stays correct without
+      // closing over an unstable cachedUsage render value.
+      if (!readSessionListCache(usageCacheKey)) setUsageLoading(true);
       void fetch(`${apiBase}/api/usage?range=30d`)
         .then(r => readJsonIfOk<{
           providers?: Array<{ provider: string; requests: number; totalTokens?: number }>;
@@ -206,7 +209,7 @@ export default function ProviderWorkspaceShell({
   useEffect(() => {
     let cancelled = false;
     const timeout = window.setTimeout(() => {
-      if (!cachedQuotas) setQuotasLoading(true);
+      if (!readSessionListCache(quotasCacheKey)) setQuotasLoading(true);
       void fetch(`${apiBase}/api/provider-quotas`)
         .then(r => readJsonIfOk<{ reports?: Array<{ provider: string; label?: string; source?: string; updatedAt?: number; quota?: unknown }> }>(r))
         .then((data) => {

gui/src/pages/dashboard-core-poll.ts

@@ -1,5 +1,6 @@
 import { readJsonIfOk } from "../fetch-json";
 import {
+  beginPollEpoch,
   settingsPollMayCommit,
   mapStartupHealthProbe,
   type StartupHealthStatus,
@@ -145,8 +146,10 @@ export async function fetchDashboardSidecars(
   epochs: DashboardEpochRefs,
 ): Promise<DashboardSidecarPoll> {
   // Only bump shadow epochs — settings has its own poll and must not be invalidated here.
-  const shadowRequestEpoch = ++epochs.shadowCallRequestEpochRef.current;
-  const shadowMutationEpoch = epochs.shadowCallMutationEpochRef.current;
+  const { request: shadowRequestEpoch, mutation: shadowMutationEpoch } = beginPollEpoch(
+    epochs.shadowCallRequestEpochRef,
+    epochs.shadowCallMutationEpochRef,
+  );
 
   const [scRes, shRes] = await Promise.all([
     fetch(`${apiBase}/api/sidecar-settings`, { signal }),
@@ -200,8 +203,10 @@ export async function fetchDashboardSettings(
   signal: AbortSignal,
   epochs: DashboardEpochRefs,
 ): Promise<DashboardSettingsPoll> {
-  const settingsRequestEpoch = ++epochs.settingsRequestEpochRef.current;
-  const settingsMutationEpoch = epochs.settingsMutationEpochRef.current;
+  const { request: settingsRequestEpoch, mutation: settingsMutationEpoch } = beginPollEpoch(
+    epochs.settingsRequestEpochRef,
+    epochs.settingsMutationEpochRef,
+  );
 
   const sRes = await fetch(`${apiBase}/api/settings`, { signal });
   const nextSettings = await requireJson<SettingsData>(sRes);

gui/src/pages/use-dashboard-data.ts

@@ -108,7 +108,6 @@ export function useDashboardData(apiBase: string) {
   const [settingsSaving, setSettingsSaving] = useState(false);
   const [syncing, setSyncing] = useState(false);
   const [maMode, setMaMode] = useState<MaMode>(() => cachedMaMode ?? "default");
-  const [maModeResolved, setMaModeResolved] = useState(() => cachedMaMode !== null);
   const [maBusy, setMaBusy] = useState(false);
   const [maHelpOpen, setMaHelpOpen] = useState(false);
   const [effortCapHelpOpen, setEffortCapHelpOpen] = useState(false);
@@ -284,10 +283,13 @@ export function useDashboardData(apiBase: string) {
   useEffect(() => {
     if (maModePoll.data === undefined) return;
     setMaMode(maModePoll.data.maMode);
-    setMaModeResolved(true);
     writeSessionListCache(`${MA_MODE_CACHE_PREFIX}${apiBase}`, maModePoll.data.maMode);
   }, [maModePoll.data, apiBase]);
 
+  // Derived — avoids setState-on-prop-change for the resolved flag. Cache / poll / optimistic
+  // save (which writes the same cache key) all count as resolved for MA UI.
+  const maModeResolved = maModePoll.data !== undefined || cachedMaMode !== null;
+
   useEffect(() => {
     const data = multiAgentPoll.data;
     if (!data) return;
@@ -494,7 +496,6 @@ export function useDashboardData(apiBase: string) {
       });
       if (r.ok) {
         setMaMode(mode);
-        setMaModeResolved(true);
         writeSessionListCache(`${MA_MODE_CACHE_PREFIX}${apiBase}`, mode);
       }
     } catch { /* ignore */ }

gui/src/startup-health-ui.ts

@@ -25,7 +25,18 @@ export function settingsPollMayCommit(
     && started.mutation === current.mutation;
 }
 
-/** Snapshot + bump request epochs before issuing any poll fetches. */
+/** Snapshot + bump one request epoch before issuing a poll fetch. */
+export function beginPollEpoch(
+  request: { current: number },
+  mutation: { current: number },
+): SettingsPollEpoch {
+  return {
+    request: ++request.current,
+    mutation: mutation.current,
+  };
+}
+
+/** Snapshot + bump request epochs before issuing paired settings/shadow poll fetches. */
 export function beginPollEpochs(refs: {
   settingsRequest: { current: number };
   settingsMutation: { current: number };
@@ -36,14 +47,8 @@ export function beginPollEpochs(refs: {
   shadow: SettingsPollEpoch;
 } {
   return {
-    settings: {
-      request: ++refs.settingsRequest.current,
-      mutation: refs.settingsMutation.current,
-    },
-    shadow: {
-      request: ++refs.shadowRequest.current,
-      mutation: refs.shadowMutation.current,
-    },
+    settings: beginPollEpoch(refs.settingsRequest, refs.settingsMutation),
+    shadow: beginPollEpoch(refs.shadowRequest, refs.shadowMutation),
   };
 }
 

gui/src/styles-dashboard-workspace.css

@@ -28,8 +28,8 @@
 .dashboard-workspace-main .tbl-wrap {
   max-height: 520px;
   overflow-y: auto;
-  /* Inset table from border+surface so cells aren't flush to the frame. */
-  padding: var(--space-2);
+  /* Side/bottom inset only — top padding on a sticky scrollport leaks rows above thead. */
+  padding: 0 var(--space-2) var(--space-2);
 }
 
 .dashboard-workspace-main .tbl thead th {

gui/tests/dashboard-contracts.test.ts

@@ -1,12 +1,25 @@
 import { expect, test } from "bun:test";
 import { en } from "../src/i18n/en";
 import { normalizeInjectionSelection } from "../src/pages/dashboard-core-poll";
-import { PROJECT_CONFIG_DIAGNOSTICS_POLL_MS } from "../src/startup-health-ui";
+import { PROJECT_CONFIG_DIAGNOSTICS_POLL_MS, beginPollEpoch, beginPollEpochs } from "../src/startup-health-ui";
 
 test("project-config diagnostics poll cadence is owned by the shared constant", () => {
   expect(PROJECT_CONFIG_DIAGNOSTICS_POLL_MS).toBe(30_000);
 });
 
+test("dashboard poll epochs share beginPollEpoch", () => {
+  const refs = {
+    settingsRequest: { current: 0 },
+    settingsMutation: { current: 2 },
+    shadowRequest: { current: 0 },
+    shadowMutation: { current: 4 },
+  };
+  const paired = beginPollEpochs(refs);
+  expect(paired.settings).toEqual({ request: 1, mutation: 2 });
+  expect(paired.shadow).toEqual({ request: 1, mutation: 4 });
+  expect(beginPollEpoch(refs.settingsRequest, refs.settingsMutation)).toEqual({ request: 2, mutation: 2 });
+});
+
 test("Dashboard wires a single project-config diagnostics owner outside the settings poll", async () => {
   const core = await Bun.file(new URL("../src/pages/dashboard-core-poll.ts", import.meta.url)).text();
   const hook = await Bun.file(new URL("../src/pages/use-dashboard-data.ts", import.meta.url)).text();