@opengeni/react 0.12.0 → 0.15.0

package/src/components/workspace-dock.tsx

@@ -1,4 +1,13 @@
-import { type ReactNode, useCallback, useEffect, useLayoutEffect, useState } from "react";
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import {
   ChevronsLeftRightIcon,
   Maximize2Icon,
@@ -6,13 +15,7 @@ import {
   PanelRightCloseIcon,
   XIcon,
 } from "lucide-react";
-import {
-  Group,
-  Panel,
-  Separator,
-  useDefaultLayout,
-  usePanelRef,
-} from "react-resizable-panels";
+import { Group, Panel, Separator, useDefaultLayout, usePanelRef } from "react-resizable-panels";
 import { cn } from "../lib/cn";
 
 export type WorkspaceTab = {
@@ -34,6 +37,13 @@ export type WorkspaceDockProps = {
   /** Controlled collapsed state for hosts that expose their own dock toggle. */
   collapsed?: boolean | undefined;
   onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
+  /** A status accessory pinned to the right of the tab strip, left of the
+   *  maximize/collapse controls (e.g. the machine-state chip). Renders in both
+   *  the docked header and the full-screen overlay header. */
+  headerAccessory?: ReactNode | undefined;
+  /** Optional host navigation shown at the start of the phone overlay header.
+   *  It is intentionally absent from desktop dock chrome. */
+  mobileLeadingControl?: ReactNode | undefined;
   /** Persisted layout id (localStorage key) for react-resizable-panels. */
   autoSaveId?: string | undefined;
   /** Default dock width as a percent of the session area. */
@@ -94,6 +104,8 @@ export function WorkspaceDock({
   onActiveTabChange,
   collapsed: collapsedProp,
   onCollapsedChange,
+  headerAccessory,
+  mobileLeadingControl,
   autoSaveId = "og.session.dock",
   defaultSize = 34,
   minSize = 22,
@@ -101,6 +113,9 @@ export function WorkspaceDock({
   className,
 }: WorkspaceDockProps) {
   const narrow = useIsNarrow(DOCK_OVERLAY_BREAKPOINT);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const reopenRef = useRef<HTMLButtonElement | null>(null);
+  const returnFocusRef = useRef<HTMLElement | null>(null);
   const dockPanelRef = usePanelRef();
   const [internalCollapsed, setInternalCollapsed] = useState(false);
   const [maximized, setMaximized] = useState(false);
@@ -112,6 +127,7 @@ export function WorkspaceDock({
   // bug). Standalone (uncontrolled) usage keeps the built-in collapse button
   // and the thin re-open rail as its only affordances.
   const hostControlled = collapsedProp !== undefined;
+  const previousCollapsedRef = useRef(collapsed);
 
   // Persisted layout (width split) keyed by autoSaveId.
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({
@@ -120,9 +136,11 @@ export function WorkspaceDock({
     id: autoSaveId,
   } as Parameters<typeof useDefaultLayout>[0]);
 
-  const current = activeTab ?? internalTab;
-  const tabIds = tabs.map((tab) => tab.id).join("\u0000");
+  const requestedTab = activeTab ?? internalTab;
+  const tabIds = tabs.map((tab) => tab.id);
   const firstTabId = tabs[0]?.id ?? "";
+  const requestedTabIsValid = tabIds.includes(requestedTab);
+  const current = requestedTabIsValid ? requestedTab : firstTabId;
   const setTab = useCallback(
     (id: string) => {
       setInternalTab(id);
@@ -150,14 +168,52 @@ export function WorkspaceDock({
     }
   }, [collapsedProp, dockPanelRef]);
 
+  // Treat the narrow overlay like a real modal: remember the external opener,
+  // move focus into the selected tab, and restore it on close. The standalone
+  // desktop dock instead focuses its newly-visible reopen rail after collapse.
+  useEffect(() => {
+    const previous = previousCollapsedRef.current;
+    previousCollapsedRef.current = collapsed;
+    if (previous === collapsed) return;
+
+    if (!collapsed) {
+      const active = document.activeElement;
+      const workspaceSurface = rootRef.current?.querySelector<HTMLElement>(
+        narrow ? '[role="dialog"]' : "[data-workspace-surface]",
+      );
+      if (active instanceof HTMLElement && !workspaceSurface?.contains(active)) {
+        returnFocusRef.current = active;
+      }
+      if (narrow) {
+        const frame = requestAnimationFrame(() => {
+          rootRef.current
+            ?.querySelector<HTMLElement>('[role="dialog"] [role="tab"][aria-selected="true"]')
+            ?.focus();
+        });
+        return () => cancelAnimationFrame(frame);
+      }
+      return;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      if (!hostControlled) {
+        reopenRef.current?.focus();
+        return;
+      }
+      const target = returnFocusRef.current;
+      if (target?.isConnected) target.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [collapsed, hostControlled, narrow]);
+
   // Keep the active tab valid if the available tabs change.
   useEffect(() => {
-    if (firstTabId && !tabs.some((t) => t.id === current)) {
+    if (firstTabId && !requestedTabIsValid) {
       setTab(firstTabId);
     }
     // Depend on tab identity, not the tab content objects. Session live events
     // rebuild tab JSX frequently; only id changes can invalidate the active tab.
-  }, [tabIds, firstTabId, current, setTab]);
+  }, [firstTabId, requestedTabIsValid, setTab]);
 
   const collapse = useCallback(() => {
     dockPanelRef.current?.collapse();
@@ -186,31 +242,45 @@ export function WorkspaceDock({
   // driven by the same `collapsed` contract (collapsed → hidden).
   if (narrow) {
     return (
-      <div className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
+      <div ref={rootRef} className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
         <div className="min-h-0 min-w-0 flex-1">{primary}</div>
-        {!collapsed && (
-          <div
-            role="dialog"
-            aria-modal="true"
-            aria-label="Workspace"
-            className="fixed inset-0 z-40 flex flex-col bg-og-bg"
-            style={{
-              paddingTop: "env(safe-area-inset-top)",
-              paddingBottom: "env(safe-area-inset-bottom)",
-            }}
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label="Workspace"
+          className="fixed inset-0 z-40 flex flex-col bg-og-bg"
+          hidden={collapsed}
+          style={{
+            paddingTop: "env(safe-area-inset-top)",
+            paddingBottom: "env(safe-area-inset-bottom)",
+          }}
+        >
+          <DockChrome
+            tabs={tabs}
+            current={current}
+            onTab={setTab}
+            leading={mobileLeadingControl}
+            accessory={headerAccessory}
+            controls={
+              <ChromeButton onClick={collapse} title="Close workspace" label="Close workspace">
+                <XIcon className="size-4" />
+              </ChromeButton>
+            }
+          />
+        </div>
+        {collapsed && !hostControlled ? (
+          <button
+            ref={reopenRef}
+            type="button"
+            onClick={expand}
+            title="Open workspace"
+            aria-label="Open workspace"
+            className="absolute right-3 top-3 z-30 inline-flex size-11 items-center justify-center rounded-og-md border border-og-border bg-og-surface-1 text-og-fg-muted shadow-lg transition-colors hover:border-og-border-strong hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent"
+            style={{ marginTop: "env(safe-area-inset-top)" }}
           >
-            <DockChrome
-              tabs={tabs}
-              current={current}
-              onTab={setTab}
-              controls={
-                <ChromeButton onClick={collapse} title="Close workspace" label="Close workspace">
-                  <XIcon className="size-4" />
-                </ChromeButton>
-              }
-            />
-          </div>
-        )}
+            <ChevronsLeftRightIcon className="size-4" aria-hidden />
+          </button>
+        ) : null}
       </div>
     );
   }
@@ -220,6 +290,7 @@ export function WorkspaceDock({
       tabs={tabs}
       current={current}
       onTab={setTab}
+      accessory={headerAccessory}
       controls={
         <>
           <ChromeButton
@@ -227,7 +298,11 @@ export function WorkspaceDock({
             title={maximized ? "Restore (Esc)" : "Maximize"}
             label={maximized ? "Restore dock" : "Maximize dock"}
           >
-            {maximized ? <Minimize2Icon className="size-3.5" /> : <Maximize2Icon className="size-3.5" />}
+            {maximized ? (
+              <Minimize2Icon className="size-3.5" />
+            ) : (
+              <Maximize2Icon className="size-3.5" />
+            )}
           </ChromeButton>
           {hostControlled ? null : (
             <ChromeButton onClick={collapse} title="Collapse" label="Collapse dock">
@@ -240,7 +315,7 @@ export function WorkspaceDock({
   );
 
   return (
-    <div className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
+    <div ref={rootRef} className={cn("relative flex h-full min-h-0 w-full min-w-0", className)}>
       <Group
         orientation="horizontal"
         className="min-h-0 flex-1"
@@ -275,13 +350,19 @@ export function WorkspaceDock({
           }}
           className="min-h-0 min-w-0"
         >
-          {/* Hidden behind the overlay while maximized (avoids double-mounting
-              the surfaces). */}
-          {!collapsed && !maximized && (
-            <div className="flex h-full min-h-0 min-w-0 flex-col border-l border-og-border bg-og-bg">
-              {dockChrome}
-            </div>
-          )}
+          {/* One persistent mount across normal, collapsed, and maximized modes:
+              layout changes must never destroy an editor buffer or terminal view. */}
+          <div
+            data-workspace-surface
+            aria-hidden={collapsed ? true : undefined}
+            className={cn(
+              "flex h-full min-h-0 min-w-0 flex-col bg-og-bg",
+              maximized ? "fixed inset-0 z-40" : "border-l border-og-border",
+              collapsed && "invisible pointer-events-none",
+            )}
+          >
+            {dockChrome}
+          </div>
         </Panel>
       </Group>
 
@@ -289,6 +370,7 @@ export function WorkspaceDock({
           when the host controls collapse — its own toggle is the one way in. */}
       {collapsed && !maximized && !hostControlled && (
         <button
+          ref={reopenRef}
           type="button"
           onClick={expand}
           title="Open workspace"
@@ -297,13 +379,6 @@ export function WorkspaceDock({
           <ChevronsLeftRightIcon className="size-3.5" />
         </button>
       )}
-
-      {/* Maximize overlay: full-workspace surface above everything. */}
-      {maximized && (
-        <div className="fixed inset-0 z-40 flex flex-col bg-og-bg">
-          {dockChrome}
-        </div>
-      )}
     </div>
   );
 }
@@ -326,7 +401,7 @@ function ChromeButton({
       onClick={onClick}
       title={title}
       aria-label={label}
-      className="inline-flex items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg pointer-coarse:size-10"
+      className="inline-flex size-7 items-center justify-center rounded-og-sm p-1 transition-colors hover:bg-og-surface-2 hover:text-og-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:size-11 pointer-coarse:size-11"
     >
       {children}
     </button>
@@ -337,34 +412,93 @@ function DockChrome({
   tabs,
   current,
   onTab,
+  leading,
+  accessory,
   controls,
 }: {
   tabs: WorkspaceTab[];
   current: string;
   onTab: (id: string) => void;
+  /** Host navigation at the start of mobile overlay chrome. */
+  leading?: ReactNode | undefined;
+  /** A status accessory (machine chip) between the tab strip and the controls. */
+  accessory?: ReactNode | undefined;
   /** Right-aligned chrome controls (maximize / collapse, or the overlay close). */
   controls: ReactNode;
 }) {
   const active = tabs.find((t) => t.id === current) ?? tabs[0];
+  const tabsetId = useId();
+  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const [visitedTabs, setVisitedTabs] = useState<Set<string>>(() => new Set());
+  const activeId = active?.id ?? "";
+
+  useEffect(() => {
+    if (!activeId) return;
+    setVisitedTabs((previous) => {
+      if (previous.has(activeId)) return previous;
+      const next = new Set(previous);
+      next.add(activeId);
+      return next;
+    });
+  }, [activeId]);
+
+  const activateTab = (index: number) => {
+    const tab = tabs[index];
+    if (!tab) {
+      return;
+    }
+    onTab(tab.id);
+    tabRefs.current[index]?.focus();
+  };
+
+  const onTabKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {
+    if (tabs.length === 0) return;
+    let nextIndex: number | null = null;
+    if (event.key === "ArrowRight") nextIndex = (index + 1) % tabs.length;
+    else if (event.key === "ArrowLeft") nextIndex = (index - 1 + tabs.length) % tabs.length;
+    else if (event.key === "Home") nextIndex = 0;
+    else if (event.key === "End") nextIndex = tabs.length - 1;
+    if (nextIndex === null) return;
+    event.preventDefault();
+    activateTab(nextIndex);
+  };
+
   return (
     <>
-      <div className="flex shrink-0 items-center gap-2 border-b border-og-border px-1.5 py-1">
+      <div className="grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto_auto] items-center gap-x-2 border-b border-og-border px-1.5 py-1 max-[1023px]:grid-cols-[auto_minmax(0,1fr)_auto] max-[1023px]:gap-y-0 max-[1023px]:px-2 max-[1023px]:pb-1 max-[1023px]:pt-0">
+        <div className="flex min-w-0 shrink-0 items-center max-[1023px]:min-h-11">
+          {leading ?? (
+            <span className="hidden truncate px-1 text-og-sm font-semibold text-og-fg max-[1023px]:inline">
+              Workspace
+            </span>
+          )}
+        </div>
         {/* The tab list scrolls horizontally when it can't fit — it must never
             grow into or overlap the chrome controls (they stay shrink-0). The
-            scrollbar is hidden to keep the strip calm. */}
+            scrollbar is hidden to keep the strip calm. On the narrow overlay it
+            owns a full second row, so status/close chrome can never squeeze the
+            canonical workspace navigation out of view. */}
         <div
-          className="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          className="flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-[1023px]:col-span-3 max-[1023px]:row-start-2 max-[1023px]:w-full"
           role="tablist"
+          aria-orientation="horizontal"
         >
-          {tabs.map((tab) => (
+          {tabs.map((tab, index) => (
             <button
               key={tab.id}
+              ref={(node) => {
+                tabRefs.current[index] = node;
+              }}
+              id={`${tabsetId}-tab-${index}`}
               type="button"
               role="tab"
               aria-selected={tab.id === current}
+              aria-controls={`${tabsetId}-panel-${index}`}
+              tabIndex={tab.id === current ? 0 : -1}
               onClick={() => onTab(tab.id)}
+              onKeyDown={(event) => onTabKeyDown(event, index)}
               className={cn(
-                "flex shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors pointer-coarse:min-h-10",
+                "flex min-h-7 shrink-0 items-center justify-center gap-1 rounded-og-sm px-2 py-1 text-og-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent max-[1023px]:min-h-11 max-[1023px]:min-w-11 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
                 tab.id === current
                   ? "bg-og-accent-soft text-og-fg"
                   : "text-og-fg-subtle hover:text-og-fg",
@@ -375,10 +509,30 @@ function DockChrome({
             </button>
           ))}
         </div>
+        <div className="flex min-w-0 shrink-0 items-center justify-self-end">{accessory}</div>
         <div className="flex shrink-0 items-center gap-0.5 text-og-fg-subtle">{controls}</div>
       </div>
-      <div className="min-h-0 min-w-0 flex-1 overflow-hidden" role="tabpanel">
-        {active?.content}
+      <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
+        {tabs.length > 0 ? (
+          tabs.map((tab, index) => {
+            const selected = tab.id === activeId;
+            const shouldMount = selected || visitedTabs.has(tab.id);
+            return (
+              <div
+                key={tab.id}
+                id={`${tabsetId}-panel-${index}`}
+                aria-labelledby={`${tabsetId}-tab-${index}`}
+                className="h-full min-h-0 min-w-0 overflow-hidden"
+                hidden={!selected}
+                role="tabpanel"
+              >
+                {shouldMount ? tab.content : null}
+              </div>
+            );
+          })
+        ) : (
+          <div className="h-full min-h-0 min-w-0" aria-label="Workspace" role="tabpanel" />
+        )}
       </div>
     </>
   );

package/src/hooks/internal.ts

@@ -13,7 +13,10 @@ export type AsyncListState<T> = {
  * Shared fetch + optional polling loop for the list/read hooks. Stale
  * responses (superseded by a newer load or an unmount) are dropped.
  */
-export function usePolledValue<T>(load: () => Promise<T>, options: { pollIntervalMs?: number | undefined; enabled?: boolean | undefined } = {}): AsyncListState<T> {
+export function usePolledValue<T>(
+  load: () => Promise<T>,
+  options: { pollIntervalMs?: number | undefined; enabled?: boolean | undefined } = {},
+): AsyncListState<T> {
   const enabled = options.enabled ?? true;
   const pollIntervalMs = options.pollIntervalMs;
   const [data, setData] = useState<T | null>(null);
@@ -95,7 +98,7 @@ export function useMutationRunner(): MutationState & {
       mounted.current = false;
     };
   }, []);
-  const run = useCallback(async <T,>(operation: () => Promise<T>): Promise<T | null> => {
+  const run = useCallback(async <T>(operation: () => Promise<T>): Promise<T | null> => {
     inFlight.current += 1;
     if (mounted.current) {
       setMutating(true);

package/src/hooks/use-available-models.ts

@@ -25,10 +25,15 @@ export type UseAvailableModelsResult = {
  * provider-grouped `models` plus the `defaultModel` the picker should preselect.
  * Deployment-scoped, so it only needs the client (no workspace).
  */
-export function useAvailableModels(options: UseAvailableModelsOptions = {}): UseAvailableModelsResult {
+export function useAvailableModels(
+  options: UseAvailableModelsOptions = {},
+): UseAvailableModelsResult {
   const client = useOpenGeniClient(options);
   const load = useCallback(async () => await client.getClientConfig(), [client]);
-  const state = usePolledValue(load, { pollIntervalMs: options.pollIntervalMs, enabled: options.enabled });
+  const state = usePolledValue(load, {
+    pollIntervalMs: options.pollIntervalMs,
+    enabled: options.enabled,
+  });
   return {
     models: state.data?.models ?? [],
     defaultModel: state.data?.defaultModel ?? null,

package/src/hooks/use-billing-usage.ts

@@ -40,7 +40,10 @@ export function useBillingUsage(options: UseBillingUsageOptions = {}): UseBillin
       }),
     [client, accountId, workspaceId],
   );
-  const state = usePolledValue(load, { pollIntervalMs: options.pollIntervalMs, enabled: options.enabled });
+  const state = usePolledValue(load, {
+    pollIntervalMs: options.pollIntervalMs,
+    enabled: options.enabled,
+  });
   return {
     balance: state.data?.balance ?? null,
     usage: state.data?.usage ?? [],

package/src/hooks/use-codex-accounts.ts

@@ -1,7 +1,17 @@
 import { useCallback, useState } from "react";
-import type { CodexAccount, CodexAccountsResponse, CodexRotationSettings, SessionEvent } from "@opengeni/sdk";
+import type {
+  CodexAccount,
+  CodexAccountsResponse,
+  CodexRotationSettings,
+  SessionEvent,
+} from "@opengeni/sdk";
 import { useOpenGeni, type ClientOverride } from "../provider";
-import { useMutationRunner, usePolledValue, useSessionEventTrigger, type SessionEventFeedOptions } from "./internal";
+import {
+  useMutationRunner,
+  usePolledValue,
+  useSessionEventTrigger,
+  type SessionEventFeedOptions,
+} from "./internal";
 
 /** Events that change which Codex account a session runs on (or just ran). */
 export function isCodexAccountEvent(event: Pick<SessionEvent, "type">): boolean {
@@ -17,19 +27,27 @@ export function isCodexAccountEvent(event: Pick<SessionEvent, "type">): boolean
  */
 export type CodexAccountsClientLike = {
   listCodexAccounts: (workspaceId: string) => Promise<CodexAccountsResponse>;
-  getSession?: (workspaceId: string, sessionId: string) => Promise<{ codexPinnedCredentialId?: string | null; codexLastCredentialId?: string | null }>;
-  pinSessionCodexAccount?: (workspaceId: string, sessionId: string, target: string) => Promise<{ pinned: string }>;
+  getSession?: (
+    workspaceId: string,
+    sessionId: string,
+  ) => Promise<{ codexPinnedCredentialId?: string | null; codexLastCredentialId?: string | null }>;
+  pinSessionCodexAccount?: (
+    workspaceId: string,
+    sessionId: string,
+    target: string,
+  ) => Promise<{ pinned: string }>;
   /** Optional (absent ⇒ the card hides live refresh): batched live /wham/usage refresh. */
   refreshCodexUsage?: (workspaceId: string) => Promise<{ usage: Record<string, unknown> }>;
 };
 
-export type UseCodexAccountsOptions = ClientOverride & SessionEventFeedOptions & {
-  pollIntervalMs?: number | undefined;
-  /** Scope to a session so the hook resolves the pin + the effective account. */
-  sessionId?: string | undefined;
-  /** Override the client with one implementing `CodexAccountsClientLike`. */
-  codexClient?: CodexAccountsClientLike | undefined;
-};
+export type UseCodexAccountsOptions = ClientOverride &
+  SessionEventFeedOptions & {
+    pollIntervalMs?: number | undefined;
+    /** Scope to a session so the hook resolves the pin + the effective account. */
+    sessionId?: string | undefined;
+    /** Override the client with one implementing `CodexAccountsClientLike`. */
+    codexClient?: CodexAccountsClientLike | undefined;
+  };
 
 export type UseCodexAccountsResult = {
   accounts: CodexAccount[];
@@ -60,7 +78,11 @@ export type UseCodexAccountsResult = {
   mutationError: Error | null;
 };
 
-const EMPTY_SETTINGS: CodexRotationSettings = { rotationEnabled: false, rotationStrategy: "most_remaining", activeCredentialId: null };
+const EMPTY_SETTINGS: CodexRotationSettings = {
+  rotationEnabled: false,
+  rotationStrategy: "most_remaining",
+  activeCredentialId: null,
+};
 
 type CodexAccountsState = {
   accounts: CodexAccount[];
@@ -87,15 +109,16 @@ const EMPTY_STATE: CodexAccountsState = {
  */
 export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCodexAccountsResult {
   const { client, workspaceId } = useOpenGeni(options);
-  const codexClient = (options.codexClient ?? (client as unknown as CodexAccountsClientLike));
+  const codexClient = options.codexClient ?? (client as unknown as CodexAccountsClientLike);
   const sessionId = options.sessionId;
   const sharedEvents = options.events;
 
   const load = useCallback(async (): Promise<CodexAccountsState> => {
     const accountsP = codexClient.listCodexAccounts(workspaceId);
-    const sessionP = sessionId && codexClient.getSession
-      ? codexClient.getSession(workspaceId, sessionId).catch(() => null)
-      : Promise.resolve(null);
+    const sessionP =
+      sessionId && codexClient.getSession
+        ? codexClient.getSession(workspaceId, sessionId).catch(() => null)
+        : Promise.resolve(null);
     const [acc, session] = await Promise.all([accountsP, sessionP]);
     return {
       accounts: acc.accounts,
@@ -106,9 +129,16 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
     };
   }, [codexClient, workspaceId, sessionId]);
 
-  const state = usePolledValue(load, { pollIntervalMs: options.pollIntervalMs, enabled: options.enabled });
-  const mutation = useMutationRunner();
-  const usageMutation = useMutationRunner();
+  const {
+    data: loadedData,
+    loading,
+    refresh,
+  } = usePolledValue(load, {
+    pollIntervalMs: options.pollIntervalMs,
+    enabled: options.enabled,
+  });
+  const { run: runMutation, mutating: pinning, mutationError } = useMutationRunner();
+  const { run: runUsageMutation, mutating: refreshingUsage } = useMutationRunner();
   const [pinningTarget, setPinningTarget] = useState<string | null>(null);
 
   // Live flip: a manual switch (P1) or a failover (P3) emits codex.account.switched;
@@ -118,8 +148,11 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
     workspaceId,
     sessionId,
     isCodexAccountEvent,
-    () => void state.refresh(),
-    { enabled: options.enabled ?? true, ...(sharedEvents !== undefined ? { events: sharedEvents } : {}) },
+    () => void refresh(),
+    {
+      enabled: options.enabled ?? true,
+      ...(sharedEvents !== undefined ? { events: sharedEvents } : {}),
+    },
   );
 
   const pin = useCallback(
@@ -128,36 +161,33 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
         return false;
       }
       setPinningTarget(target);
-      const result = await mutation.run(async () => {
+      const result = await runMutation(async () => {
         await codexClient.pinSessionCodexAccount!(workspaceId, sessionId, target);
         return true;
       });
       setPinningTarget(null);
-      if (result) await state.refresh();
+      if (result) await refresh();
       return result === true;
     },
-    [codexClient, workspaceId, sessionId, mutation.run, state.refresh],
+    [codexClient, workspaceId, sessionId, runMutation, refresh],
   );
 
   // Live usage refresh: hit the batched provider read, then re-read cached
   // metadata so the fresh windows land on `accounts`. The provider read writes the
   // cache columns server-side; state.refresh() pulls them back.
-  const refreshUsage = useCallback(
-    async (): Promise<boolean> => {
-      if (!codexClient.refreshCodexUsage) {
-        return false;
-      }
-      const result = await usageMutation.run(async () => {
-        await codexClient.refreshCodexUsage!(workspaceId);
-        return true;
-      });
-      if (result) await state.refresh();
-      return result === true;
-    },
-    [codexClient, workspaceId, usageMutation.run, state.refresh],
-  );
+  const refreshUsage = useCallback(async (): Promise<boolean> => {
+    if (!codexClient.refreshCodexUsage) {
+      return false;
+    }
+    const result = await runUsageMutation(async () => {
+      await codexClient.refreshCodexUsage!(workspaceId);
+      return true;
+    });
+    if (result) await refresh();
+    return result === true;
+  }, [codexClient, workspaceId, runUsageMutation, refresh]);
 
-  const data = state.data ?? EMPTY_STATE;
+  const data = loadedData ?? EMPTY_STATE;
   const effectiveAccountId = data.pinnedAccountId ?? data.activeAccountId;
 
   return {
@@ -167,13 +197,13 @@ export function useCodexAccounts(options: UseCodexAccountsOptions = {}): UseCode
     effectiveAccountId,
     lastAccountId: data.lastAccountId,
     settings: data.settings,
-    loading: state.loading,
-    refresh: state.refresh,
+    loading,
+    refresh,
     refreshUsage,
-    refreshingUsage: usageMutation.mutating,
+    refreshingUsage,
     pin,
-    pinning: mutation.mutating,
+    pinning,
     pinningTarget,
-    mutationError: mutation.mutationError,
+    mutationError,
   };
 }