diff --git a/src/browser/components/ArchivedWorkspaces/ArchivedWorkspaces.tsx b/src/browser/components/ArchivedWorkspaces/ArchivedWorkspaces.tsx
index fb04e530193..c99ce16fbb0 100644
--- a/src/browser/components/ArchivedWorkspaces/ArchivedWorkspaces.tsx
+++ b/src/browser/components/ArchivedWorkspaces/ArchivedWorkspaces.tsx
@@ -8,7 +8,7 @@ import type {
   WorkspaceRemovalDescendant,
 } from "@/common/types/workspace";
 import { getErrorMessage } from "@/common/utils/errors";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import { usePopoverError } from "@/browser/hooks/usePopoverError";
@@ -334,6 +334,7 @@ export const ArchivedWorkspaces: React.FC<ArchivedWorkspacesProps> = ({
 
   const { unarchiveWorkspace, removeWorkspace, setSelectedWorkspace } = useWorkspaceContext();
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const [searchQuery, setSearchQuery] = React.useState("");
   const [processingIds, setProcessingIds] = React.useState<Set<string>>(new Set());
   const [deleteWorktreeIds, setDeleteWorktreeIds] = React.useState<Set<string>>(new Set());
@@ -626,7 +627,7 @@ export const ArchivedWorkspaces: React.FC<ArchivedWorkspacesProps> = ({
   };
 
   const handleBulkDeleteWorktree = async () => {
-    if (!api) {
+    if (!liveApi) {
       return;
     }
 
@@ -654,7 +655,7 @@ export const ArchivedWorkspaces: React.FC<ArchivedWorkspacesProps> = ({
       setDeleteWorktreeIds((prev) => new Set(prev).add(id));
 
       try {
-        const result = await api.workspace.deleteWorktree({ workspaceId: id });
+        const result = await liveApi.workspace.deleteWorktree({ workspaceId: id });
         if (!result.success) {
           setBulkOperation((prev) =>
             prev
@@ -701,7 +702,7 @@ export const ArchivedWorkspaces: React.FC<ArchivedWorkspacesProps> = ({
     const rect = anchorEl?.getBoundingClientRect();
     const anchor = rect ? { top: rect.top + window.scrollY, left: rect.right + 10 } : undefined;
 
-    if (!api) {
+    if (!liveApi) {
       deleteWorktreeError.showError(workspaceId, "Not connected to server", anchor);
       return;
     }
@@ -709,7 +710,7 @@ export const ArchivedWorkspaces: React.FC<ArchivedWorkspacesProps> = ({
     setProcessingIds((prev) => new Set(prev).add(workspaceId));
     setDeleteWorktreeIds((prev) => new Set(prev).add(workspaceId));
     try {
-      const result = await api.workspace.deleteWorktree({ workspaceId });
+      const result = await liveApi.workspace.deleteWorktree({ workspaceId });
       if (result.success) {
         onWorkspacesChanged?.();
         return;
diff --git a/src/browser/components/DirectoryPickerModal/DirectoryPickerModal.tsx b/src/browser/components/DirectoryPickerModal/DirectoryPickerModal.tsx
index f3168383103..bf04ba2134b 100644
--- a/src/browser/components/DirectoryPickerModal/DirectoryPickerModal.tsx
+++ b/src/browser/components/DirectoryPickerModal/DirectoryPickerModal.tsx
@@ -12,7 +12,7 @@ import { Checkbox } from "../Checkbox/Checkbox";
 import { Input } from "@/browser/components/Input/Input";
 import type { FileTreeNode } from "@/common/utils/git/numstatParser";
 import { DirectoryTree } from "../DirectoryTree/DirectoryTree";
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 import { formatKeybind, isMac } from "@/browser/utils/ui/keybinds";
 import { getErrorMessage } from "@/common/utils/errors";
 
@@ -31,7 +31,7 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
   onClose,
   onSelectPath,
 }) => {
-  const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const [root, setRoot] = useState<FileTreeNode | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -45,7 +45,7 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
 
   const loadDirectory = useCallback(
     async (path: string) => {
-      if (!api) {
+      if (!liveApi) {
         setError("Not connected to server");
         return;
       }
@@ -54,7 +54,7 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
       setCanCreateFolder(false);
 
       try {
-        const result = await api.general.listDirectory({ path });
+        const result = await liveApi.general.listDirectory({ path });
 
         if (!result.success) {
           const errorMessage = typeof result.error === "string" ? result.error : "Unknown error";
@@ -82,7 +82,7 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
         setIsLoading(false);
       }
     },
-    [api]
+    [liveApi]
   );
 
   // Sync pathInput with initialPath when modal opens (component stays mounted)
@@ -110,13 +110,16 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
 
     // If user has typed a different path, try to load it first
     if (trimmedInput && trimmedInput !== root?.path) {
-      if (!api) return;
+      if (!liveApi) {
+        setError("Not connected to server");
+        return;
+      }
       setIsLoading(true);
       setError(null);
       setCanCreateFolder(false);
 
       try {
-        const result = await api.general.listDirectory({ path: trimmedInput });
+        const result = await liveApi.general.listDirectory({ path: trimmedInput });
         if (!result.success) {
           const errorMessage = typeof result.error === "string" ? result.error : "Unknown error";
           const isNotFound =
@@ -150,17 +153,21 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
 
     onSelectPath(root.path);
     onClose();
-  }, [onClose, onSelectPath, root, pathInput, api]);
+  }, [onClose, onSelectPath, root, pathInput, liveApi]);
 
   const handleCreateFolder = useCallback(async () => {
     const trimmedPath = pathInput.trim();
-    if (!trimmedPath || !api) return;
+    if (!trimmedPath) return;
+    if (!liveApi) {
+      setError("Not connected to server");
+      return;
+    }
 
     setIsLoading(true);
     setError(null);
 
     try {
-      const createResult = await api.general.createDirectory({ path: trimmedPath });
+      const createResult = await liveApi.general.createDirectory({ path: trimmedPath });
       if (!createResult.success) {
         setError(createResult.error ?? "Failed to create folder");
         setCanCreateFolder(false);
@@ -176,7 +183,7 @@ export const DirectoryPickerModal: React.FC<DirectoryPickerModalProps> = ({
     } finally {
       setIsLoading(false);
     }
-  }, [pathInput, api, loadDirectory]);
+  }, [pathInput, liveApi, loadDirectory]);
 
   const handleOpenChange = useCallback(
     (open: boolean) => {
diff --git a/src/browser/components/LegacyPlanImportBanner/LegacyPlanImportBanner.tsx b/src/browser/components/LegacyPlanImportBanner/LegacyPlanImportBanner.tsx
index 32883834637..89a5a5f5b57 100644
--- a/src/browser/components/LegacyPlanImportBanner/LegacyPlanImportBanner.tsx
+++ b/src/browser/components/LegacyPlanImportBanner/LegacyPlanImportBanner.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { FileInput, Loader2 } from "lucide-react";
 import { ChatDockSurface } from "@/browser/components/ChatPane/chatDockColumn";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { useOptionalCommandRegistry } from "@/browser/contexts/CommandRegistryContext";
 import { useOptionalWorkspaceMetadata } from "@/browser/contexts/WorkspaceContext";
 import { refetchPostCompactionState } from "@/browser/hooks/usePostCompactionState";
@@ -26,7 +26,7 @@ export interface LegacyPlanImportNoticeProps {
  * The backend copies it (never replacing an existing plan) and leaves the legacy file in place.
  */
 export const LegacyPlanImportNotice: React.FC<LegacyPlanImportNoticeProps> = (props) => {
-  const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const registerSource = useOptionalCommandRegistry()?.registerSource;
   const [importing, setImporting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -39,7 +39,7 @@ export const LegacyPlanImportNotice: React.FC<LegacyPlanImportNoticeProps> = (pr
 
   const importPlan = async () => {
     if (inFlightRef.current) return;
-    if (!api) {
+    if (!liveApi) {
       setError("Not connected to the backend");
       return;
     }
@@ -47,7 +47,7 @@ export const LegacyPlanImportNotice: React.FC<LegacyPlanImportNoticeProps> = (pr
     setImporting(true);
     setError(null);
     try {
-      const result = await api.workspace.importLegacyPlan({ workspaceId: props.workspaceId });
+      const result = await liveApi.workspace.importLegacyPlan({ workspaceId: props.workspaceId });
       if (!result.success) {
         setError(result.error);
       } else if (result.data.status === "nothing_to_import") {
diff --git a/src/browser/components/ProjectCreateModal/ProjectCreateModal.cloneAbort.test.tsx b/src/browser/components/ProjectCreateModal/ProjectCreateModal.cloneAbort.test.tsx
index 9e84fcc891f..5025de5e05a 100644
--- a/src/browser/components/ProjectCreateModal/ProjectCreateModal.cloneAbort.test.tsx
+++ b/src/browser/components/ProjectCreateModal/ProjectCreateModal.cloneAbort.test.tsx
@@ -7,6 +7,7 @@ import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
 import { installDom } from "../../../../tests/ui/dom";
+import { createConnectionHarness, GAP_MODES } from "@/browser/contexts/connection.testHarness";
 let cleanupDom: (() => void) | null = null;
 let currentClientMock: TestApiOverrides<APIClient> = {};
 
@@ -126,4 +127,43 @@ describe("ProjectAddForm", () => {
     await waitFor(() => expect(receivedSignal?.aborted).toBe(true));
     await waitFor(() => expect(onIsCreatingChange).toHaveBeenCalledWith(false));
   });
+
+  test.each([...GAP_MODES])(
+    "adding the existing clone while offline says it is not connected (%s)",
+    async (mode) => {
+      const createProject = mock(() => Promise.resolve({ success: false as const, error: "x" }));
+      const harness = createConnectionHarness(mode, () => ({
+        projects: {
+          getDefaultProjectDir: () => Promise.resolve("/tmp"),
+          create: createProject,
+          clone: () =>
+            Promise.resolve(
+              (async function* () {
+                await Promise.resolve();
+                yield {
+                  type: "error" as const,
+                  code: "destination_exists" as const,
+                  error: "Destination already exists",
+                  normalizedPath: "/tmp/repo",
+                };
+              })()
+            ),
+        },
+      }));
+      const view = render(<ProjectAddForm isOpen onSuccess={() => undefined} />, {
+        wrapper: harness.Wrapper,
+      });
+      fireEvent.click(view.getByText("Clone repo"));
+      const repoInput = view.getByPlaceholderText("owner/repo or https://github.com/...");
+      const user = userEvent.setup({ document: repoInput.ownerDocument });
+      await user.type(repoInput, "owner/repo");
+      fireEvent.click(view.getByText("Clone Project"));
+      const addButton = await view.findByText("Add this project instead");
+
+      await harness.drop();
+      fireEvent.click(addButton);
+      await view.findByText("Not connected to server");
+      expect(createProject).not.toHaveBeenCalled();
+    }
+  );
 });
diff --git a/src/browser/components/ProjectCreateModal/ProjectCreateModal.tsx b/src/browser/components/ProjectCreateModal/ProjectCreateModal.tsx
index 66463f819e1..7c284246a0c 100644
--- a/src/browser/components/ProjectCreateModal/ProjectCreateModal.tsx
+++ b/src/browser/components/ProjectCreateModal/ProjectCreateModal.tsx
@@ -15,7 +15,7 @@ import {
   ToggleGroupItem,
 } from "@/browser/components/ToggleGroupPrimitive/ToggleGroupPrimitive";
 import type { ProjectConfig } from "@/node/config";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 
 type ApiClient = ReturnType<typeof useAPI>["api"];
 
@@ -125,6 +125,7 @@ export const ProjectCreateForm = React.forwardRef<ProjectCreateFormHandle, Proje
     ref
   ) {
     const { api } = useAPI();
+    const liveApi = useLiveAPI();
     const resolvedSubmitLabel =
       submitLabel ?? (createNewGitRepo ? "Create Project" : "Add Project");
     const resolvedPlaceholder =
@@ -190,7 +191,7 @@ export const ProjectCreateForm = React.forwardRef<ProjectCreateFormHandle, Proje
       }
 
       setError("");
-      if (!api) {
+      if (!liveApi) {
         setError("Not connected to server");
         return false;
       }
@@ -198,11 +199,11 @@ export const ProjectCreateForm = React.forwardRef<ProjectCreateFormHandle, Proje
 
       try {
         // First check if project already exists
-        const existingProjects = await api.projects.list();
+        const existingProjects = await liveApi.projects.list();
         const existingPaths = new Map(existingProjects);
 
         // Backend handles path resolution (bare names → ~/.xum/projects/name)
-        const result = await api.projects.create({
+        const result = await liveApi.projects.create({
           projectPath: trimmedPath,
           initGit: createNewGitRepo || undefined,
         });
@@ -233,7 +234,17 @@ export const ProjectCreateForm = React.forwardRef<ProjectCreateFormHandle, Proje
       } finally {
         setCreating(false);
       }
-    }, [api, createNewGitRepo, isCreating, onClose, onSuccess, path, reset, setCreating, setError]);
+    }, [
+      liveApi,
+      createNewGitRepo,
+      isCreating,
+      onClose,
+      onSuccess,
+      path,
+      reset,
+      setCreating,
+      setError,
+    ]);
 
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent) => {
@@ -401,6 +412,7 @@ function processTerminalOutput(raw: string): string {
 const ProjectCloneForm = React.forwardRef<ProjectCloneFormHandle, ProjectCloneFormProps>(
   function ProjectCloneForm(props, ref) {
     const { api } = useAPI();
+    const liveApi = useLiveAPI();
     const [repoUrl, setRepoUrl] = useState("");
     const [cloneParentDir, setCloneParentDir] = useState(props.defaultProjectDir);
     const [hasEditedCloneParentDir, setHasEditedCloneParentDir] = useState(false);
@@ -520,7 +532,7 @@ const ProjectCloneForm = React.forwardRef<ProjectCloneFormHandle, ProjectCloneFo
         return false;
       }
 
-      if (!api) {
+      if (!liveApi) {
         setError("Not connected to server");
         return false;
       }
@@ -535,7 +547,7 @@ const ProjectCloneForm = React.forwardRef<ProjectCloneFormHandle, ProjectCloneFo
       abortControllerRef.current = controller;
 
       try {
-        const cloneEvents = await api.projects.clone(
+        const cloneEvents = await liveApi.projects.clone(
           {
             repoUrl: trimmedRepoUrl,
             cloneParentDir: trimmedCloneParentDir || undefined,
@@ -590,10 +602,15 @@ const ProjectCloneForm = React.forwardRef<ProjectCloneFormHandle, ProjectCloneFo
           setCreating(false);
         }
       }
-    }, [api, isCreating, props, repoUrl, reset, setCreating, setError, trimmedCloneParentDir]);
+    }, [liveApi, isCreating, props, repoUrl, reset, setCreating, setError, trimmedCloneParentDir]);
 
     const handleAddExistingProject = useCallback(async () => {
-      if (!api || !destinationExistsPath) {
+      if (!destinationExistsPath) {
+        return;
+      }
+      // The button stays enabled while offline: say why the click does nothing.
+      if (!liveApi) {
+        setError("Not connected to server");
         return;
       }
 
@@ -602,7 +619,7 @@ const ProjectCloneForm = React.forwardRef<ProjectCloneFormHandle, ProjectCloneFo
       addProjectAbortControllerRef.current = controller;
 
       try {
-        const result = await api.projects.create(
+        const result = await liveApi.projects.create(
           { projectPath: destinationExistsPath },
           { signal: controller.signal }
         );
@@ -631,7 +648,7 @@ const ProjectCloneForm = React.forwardRef<ProjectCloneFormHandle, ProjectCloneFo
           setIsAddingProject(false);
         }
       }
-    }, [api, destinationExistsPath, props, reset, setError]);
+    }, [liveApi, destinationExistsPath, props, reset, setError]);
 
     const handleRetry = useCallback(() => {
       setError("");
diff --git a/src/browser/components/ProjectSidebar/ProjectSidebar.tsx b/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
index fac8a743759..2557dcbd038 100644
--- a/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
+++ b/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
@@ -42,7 +42,7 @@ import {
   isEditableElement,
   KEYBINDS,
 } from "@/browser/utils/ui/keybinds";
-import { useAPI, useLiveAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 import {
   CUSTOM_EVENTS,
   getStorageChangeEvent,
@@ -767,7 +767,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
   useWorkspaceAttentionSubscription(sortedWorkspacesByProject, workspaceStore);
   const runtimeStatusStore = useRuntimeStatusStoreRaw();
   const { navigateToProject, isAnalyticsOpen } = useRouter();
-  const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const { confirm: confirmDialog } = useConfirmDialog();
   const settings = useSettings();
   // The settings and analytics modals cover the chat without changing the route's workspace;
@@ -1100,19 +1100,19 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
   const handleForkWorkspace = useCallback(
     async (workspaceId: string, buttonElement?: HTMLElement) => {
       const anchor = getErrorAnchor(buttonElement);
-      const error = await forkWorkspaceFromMenu(api, workspaceId);
+      const error = await forkWorkspaceFromMenu(liveApi, workspaceId);
       if (error) workspaceForkError.showError(workspaceId, error, anchor);
     },
-    [api, workspaceForkError]
+    [liveApi, workspaceForkError]
   );
 
   const handleStopRuntime = useCallback(
     async (workspaceId: string, buttonElement?: HTMLElement) => {
       const anchor = getErrorAnchor(buttonElement);
-      const error = await stopWorkspaceRuntime(api, runtimeStatusStore, workspaceId);
+      const error = await stopWorkspaceRuntime(liveApi, runtimeStatusStore, workspaceId);
       if (error) workspaceStopRuntimeError.showError(workspaceId, error, anchor);
     },
-    [api, runtimeStatusStore, workspaceStopRuntimeError]
+    [liveApi, runtimeStatusStore, workspaceStopRuntimeError]
   );
 
   useWorkspaceActionKeybinds({
diff --git a/src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.test.tsx b/src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.test.tsx
index 0874845de03..b1bd538bda0 100644
--- a/src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.test.tsx
+++ b/src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.test.tsx
@@ -192,6 +192,10 @@ function installWorkspaceMenuBarTestDoubles() {
   spyOn(APIModule, "useAPI").mockImplementation(
     () => ({ api: mockApi }) as unknown as ReturnType<typeof APIModule.useAPI>
   );
+  // Handlers read the live client; the same double stands for a live connection.
+  spyOn(APIModule, "useLiveAPI").mockImplementation(
+    () => mockApi as ReturnType<typeof APIModule.useLiveAPI>
+  );
   spyOn(WorkspaceContextModule, "useWorkspaceActions").mockImplementation(
     () =>
       ({
diff --git a/src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.tsx b/src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.tsx
index 6fee5112adf..7a284fd5a53 100644
--- a/src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.tsx
+++ b/src/browser/components/WorkspaceMenuBar/WorkspaceMenuBar.tsx
@@ -67,7 +67,7 @@ import { ArchiveIcon } from "../icons/ArchiveIcon/ArchiveIcon";
 
 import { SkillIndicator } from "../SkillIndicator/SkillIndicator";
 import { WorkspaceLinks } from "../WorkspaceLinks/WorkspaceLinks";
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 
 import { useWorkspaceActions, useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { useProjectContext } from "@/browser/contexts/ProjectContext";
@@ -151,7 +151,7 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
   onOpenSidebar,
   sidebarFullscreen = false,
 }) => {
-  const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const { preflightArchiveWorkspace, archiveWorkspace, archivingWorkspaceIds, setWorkspacePinned } =
     useWorkspaceActions();
   const isArchiving = archivingWorkspaceIds.has(workspaceId);
@@ -484,12 +484,12 @@ export const WorkspaceMenuBar: React.FC<WorkspaceMenuBarProps> = ({
 
   const handleForkWorkspace = async (anchorEl: HTMLElement) => {
     const anchor = getErrorAnchor(anchorEl);
-    const error = await forkWorkspaceFromMenu(api, workspaceId);
+    const error = await forkWorkspaceFromMenu(liveApi, workspaceId);
     if (error) forkError.showError(workspaceId, error, anchor);
   };
 
   const handleStopRuntime = async () => {
-    const error = await stopWorkspaceRuntime(api, runtimeStatusStore, workspaceId);
+    const error = await stopWorkspaceRuntime(liveApi, runtimeStatusStore, workspaceId);
     if (error) {
       stopRuntimeError.showError(workspaceId, error, getErrorAnchor(moreActionsButtonRef.current));
     }
diff --git a/src/browser/components/WorkspaceUnrelatedMessagingModal/WorkspaceUnrelatedMessagingDialog.tsx b/src/browser/components/WorkspaceUnrelatedMessagingModal/WorkspaceUnrelatedMessagingDialog.tsx
index b25a4279406..b1743cde1c8 100644
--- a/src/browser/components/WorkspaceUnrelatedMessagingModal/WorkspaceUnrelatedMessagingDialog.tsx
+++ b/src/browser/components/WorkspaceUnrelatedMessagingModal/WorkspaceUnrelatedMessagingDialog.tsx
@@ -1,4 +1,4 @@
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 import { DEFAULT_RUNTIME_CONFIG } from "@/common/constants/workspace";
 import {
   isLocalProjectRuntime,
@@ -21,7 +21,8 @@ interface WorkspaceUnrelatedMessagingDialogProps {
 
 /** The "Messages from other workspaces" dialog wired to the backend, for both menus (#6202). */
 export function WorkspaceUnrelatedMessagingDialog(props: WorkspaceUnrelatedMessagingDialogProps) {
-  const { api } = useAPI();
+  // The live client only: offline the saves return "Not connected to server".
+  const api = useLiveAPI();
   const { workspaceId } = props;
   // Mirrors TaskService.isLocalUnrelatedMessagingEndpoint: unrelated delivery requires local or
   // worktree runtimes on both endpoints, so remote/container workspaces get no consent switch —
diff --git a/src/browser/features/ChatInput/index.tsx b/src/browser/features/ChatInput/index.tsx
index e5a7592e6a6..b9b45549ccb 100644
--- a/src/browser/features/ChatInput/index.tsx
+++ b/src/browser/features/ChatInput/index.tsx
@@ -29,7 +29,7 @@ import { useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { useProjectContext } from "@/browser/contexts/ProjectContext";
 import { useAgent } from "@/browser/contexts/AgentContext";
 import { ThinkingSelector } from "@/browser/components/ThinkingSelector/ThinkingSelector";
-import { useAPI, type APIClient } from "@/browser/contexts/API";
+import { useAPI, type APIClient, useLiveAPI } from "@/browser/contexts/API";
 import { useExperimentValue } from "@/browser/hooks/useExperiments";
 import { normalizeSelectedModel } from "@/common/utils/ai/models";
 import {
@@ -313,6 +313,7 @@ interface EditSession {
 
 const ChatInputInner: React.FC<ChatInputProps> = (props) => {
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const { variant } = props;
   // A /side chat composer is mounted next to the main one. Window shortcuts act only in the pane
   // that owns the focused element, and unscoped palette events (open model selector, voice, toasts)
@@ -638,7 +639,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
     onSend: () => void handleSend(),
     isTranscriptionAvailable,
     useRecordingKeybinds: true,
-    api,
+    api: liveApi,
   });
 
   const voiceInputUnavailableMessage =
@@ -1898,7 +1899,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
     // Without an API client (backend reconnecting) hydration cannot finish, and waiting would
     // hold this send in flight and fire it after reconnect; let the send path report
     // "Not connected to server" instead.
-    if (!api || reviewStateStore.isHydrated(workspaceId)) return renderTime;
+    if (!liveApi || reviewStateStore.isHydrated(workspaceId)) return renderTime;
     const attached = await reviewStateStore.readAttachedReviewsForSend(workspaceId);
     if (attached === null) {
       // The render-time notes may be a stale cache; send none rather than a possibly wrong set.
@@ -1986,7 +1987,8 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
     const commandFileParts = chatAttachmentsToFileParts(attachments, { validate: true });
     const asyncCommandToken = ++asyncCommandTokenRef.current;
     const commandEnv: SlashCommandEnv = {
-      api,
+      // Commands report "Not connected to server" themselves when there is no live client.
+      api: liveApi,
       aiScopeId: sendOptionsScopeId,
       variant,
       workspaceId: commandWorkspaceId,
@@ -2312,7 +2314,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
           messageText,
           agentSkillDescriptors,
           mcpPromptDescriptors,
-          api,
+          api: liveApi,
           discovery: skillDiscovery,
           signal: resolutionSignal,
         });
@@ -2327,7 +2329,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
             messageText,
             slashInvocation: resolution.skillInvocation,
             agentSkillDescriptors,
-            api,
+            api: liveApi,
             discovery: skillDiscovery,
             candidates: inlineReferenceCandidates,
           }),
@@ -2335,7 +2337,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
             messageText,
             slashInvocation: resolution.mcpPromptInvocation,
             descriptors: mcpPromptDescriptors,
-            api,
+            api: liveApi,
             discovery: skillDiscovery,
             candidates: inlineReferenceCandidates,
             signal: resolutionSignal,
@@ -2411,7 +2413,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
       let creationOptionsOverride: Partial<SendMessageOptions> | undefined;
 
       if (skillInvocation) {
-        if (!api) {
+        if (!liveApi) {
           pushToast({ type: "error", message: "Not connected to server" });
           return;
         }
@@ -2529,7 +2531,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
         mcpPromptInvocation?.userText ??
         messageText;
 
-      if (!api) {
+      if (!liveApi) {
         pushToast({ type: "error", message: "Not connected to server" });
         return;
       }
@@ -2540,7 +2542,11 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
       let sendAttachments = attachments;
       const pendingFilesForSend = getPendingFileAttachments(attachments);
       if (pendingFilesForSend.length > 0) {
-        const stagingOutcome = await stagePendingFiles(api, props.workspaceId, pendingFilesForSend);
+        const stagingOutcome = await stagePendingFiles(
+          liveApi,
+          props.workspaceId,
+          pendingFilesForSend
+        );
         if (stagingOutcome.staged.length > 0) {
           sendAttachments = replacePendingFilesWithStaged(attachments, stagingOutcome.staged);
           // Swap staged chips into the composer so a later failure or retry
@@ -2692,7 +2698,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
               metadata,
               sendOptions,
             } = prepareCompactionMessage({
-              api,
+              api: liveApi,
               workspaceId: props.workspaceId,
               maxOutputTokens: parsed.maxOutputTokens,
               // Include current attachments + reviews in followUpContent so they're queued
@@ -2875,10 +2881,10 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
 
         props.onMessageSendStarted?.(overrides?.queueDispatchMode ?? "tool-end");
 
-        let result: Awaited<ReturnType<typeof api.workspace.sendMessage>> | undefined;
+        let result: Awaited<ReturnType<typeof liveApi.workspace.sendMessage>> | undefined;
         let thrown: unknown;
         try {
-          result = await api.workspace.sendMessage({
+          result = await liveApi.workspace.sendMessage({
             workspaceId: props.workspaceId,
             message: finalMessageText,
             options: { ...sendOptions, sendId },
@@ -2902,7 +2908,7 @@ const ChatInputInner: React.FC<ChatInputProps> = (props) => {
           // draft entry.)
           if (outcome === "accepted" || outcome === "pending") accepted = true;
         } else if (!accepted) {
-          accepted = await isEditSendAccepted(api, props.workspaceId, sendId);
+          accepted = await isEditSendAccepted(liveApi, props.workspaceId, sendId);
         }
 
         if (!accepted) {
diff --git a/src/browser/features/Messages/AssistantMessage.tsx b/src/browser/features/Messages/AssistantMessage.tsx
index 89d98c67a5d..10780f1d179 100644
--- a/src/browser/features/Messages/AssistantMessage.tsx
+++ b/src/browser/features/Messages/AssistantMessage.tsx
@@ -13,7 +13,7 @@ import {
   Package,
 } from "lucide-react";
 import { PopoverError } from "@/browser/components/PopoverError/PopoverError";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { Button } from "@/browser/components/Button/Button";
 import { forkWorkspace } from "@/browser/utils/chatCommands";
 import {
@@ -50,6 +50,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
 }) => {
   const [showRaw, setShowRaw] = useState(false);
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const forkError = usePopoverError();
 
   const content = message.content;
@@ -91,7 +92,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
       return;
     }
 
-    if (!api) {
+    if (!liveApi) {
       forkError.showError(message.historyId, "Not connected to server");
       return;
     }
@@ -106,7 +107,7 @@ export const AssistantMessage: React.FC<AssistantMessageProps> = ({
         // Response-level forks branch from this assistant turn instead of cloning the entire
         // transcript, so users can explore alternatives without carrying over later replies.
         const result = await forkWorkspace({
-          client: api,
+          client: liveApi,
           sourceWorkspaceId: workspaceId,
           sourceMessageId: message.historyId,
         });
diff --git a/src/browser/features/Messages/ChatBarrier/RetryBarrier.tsx b/src/browser/features/Messages/ChatBarrier/RetryBarrier.tsx
index 97082bc6753..49fe34f0813 100644
--- a/src/browser/features/Messages/ChatBarrier/RetryBarrier.tsx
+++ b/src/browser/features/Messages/ChatBarrier/RetryBarrier.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { AlertTriangle, RefreshCw } from "lucide-react";
 import { useUserPreferences } from "@/browser/stores/AppConfigStore";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { useWorkspaceState } from "@/browser/stores/WorkspaceStore";
 import { getLastMainRetryCandidateMessage } from "@/common/utils/messages/retryEligibility";
 import {
@@ -149,6 +149,7 @@ const RetryButton: React.FC<{ disabled: boolean; onRetry: () => void }> = (props
 
 export const RetryBarrierContent: React.FC<RetryBarrierContentProps> = (props) => {
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const [countdown, setCountdown] = useState(0);
   const [manualRetryError, setManualRetryError] = useState<string | null>(null);
   const [isManualRetrying, setIsManualRetrying] = useState(false);
@@ -170,11 +171,12 @@ export const RetryBarrierContent: React.FC<RetryBarrierContentProps> = (props) =
   const manualRetryRollbackPendingRef = useRef(false);
   const manualRetryRollbackArmedRef = useRef(false);
   const manualRetryRollbackBaselineMessageCountRef = useRef<number | null>(null);
-  const apiRef = useRef(api);
+  // The rollback skips while offline, as it did when useAPI() went null in the gap.
+  const apiRef = useRef(liveApi);
 
   useEffect(() => {
-    apiRef.current = api;
-  }, [api]);
+    apiRef.current = liveApi;
+  }, [liveApi]);
 
   const rollbackManualRetryAutoRetryIfNeeded = useCallback(
     async (options?: { suppressErrors?: boolean }): Promise<void> => {
@@ -290,7 +292,7 @@ export const RetryBarrierContent: React.FC<RetryBarrierContentProps> = (props) =
     }
   }, [isAutoRetryActive]);
   const handleManualRetry = async () => {
-    if (!api) {
+    if (!liveApi) {
       setManualRetryError("Not connected to server");
       return;
     }
@@ -327,7 +329,7 @@ export const RetryBarrierContent: React.FC<RetryBarrierContentProps> = (props) =
           options = applyCompactionOverrides(options, lastUserMessage.compactionRequest.parsed);
         }
 
-        const enableResult = await api.workspace.setAutoRetryEnabled?.({
+        const enableResult = await liveApi.workspace.setAutoRetryEnabled?.({
           workspaceId: props.workspaceId,
           enabled: true,
           persist: false,
@@ -346,7 +348,7 @@ export const RetryBarrierContent: React.FC<RetryBarrierContentProps> = (props) =
           manualRetryRollbackBaselineMessageCountRef.current = props.messages.length;
         }
 
-        const resumeResult = await api.workspace.resumeStream({
+        const resumeResult = await liveApi.workspace.resumeStream({
           workspaceId: props.workspaceId,
           options,
         });
diff --git a/src/browser/features/Messages/UserMessage.tsx b/src/browser/features/Messages/UserMessage.tsx
index c7d8ae8b200..5999d1f6553 100644
--- a/src/browser/features/Messages/UserMessage.tsx
+++ b/src/browser/features/Messages/UserMessage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { APIContext } from "@/browser/contexts/API";
+import { APIContext, liveClientOf } from "@/browser/contexts/API";
 import { useOptionalWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { cn } from "@/common/lib/utils";
 import type { DisplayedMessage } from "@/common/types/message";
@@ -111,7 +111,8 @@ export const UserMessage: React.FC<UserMessageProps> = ({
     window.matchMedia("(max-width: 768px) and (pointer: coarse)").matches;
 
   const apiState = React.useContext(APIContext);
-  const api = apiState?.api ?? null;
+  // The live client only: offline, the download reports its own error.
+  const api = apiState == null ? null : liveClientOf(apiState);
   const workspaceContext = useOptionalWorkspaceContext();
   // Prefer the transcript's own workspace: a /side chat transcript renders next to the routed
   // (selected) workspace, so the selection would download, cache-key, and guard against the wrong
diff --git a/src/browser/features/RightSidebar/ArtifactsTab/ArtifactsReconnect.test.tsx b/src/browser/features/RightSidebar/ArtifactsTab/ArtifactsReconnect.test.tsx
index 84777ede690..43103ca75f7 100644
--- a/src/browser/features/RightSidebar/ArtifactsTab/ArtifactsReconnect.test.tsx
+++ b/src/browser/features/RightSidebar/ArtifactsTab/ArtifactsReconnect.test.tsx
@@ -418,6 +418,21 @@ describe.each([...GAP_MODES])("Artifacts tab across a dropped connection (%s)",
     await waitFor(() => expect(sends).toEqual([{ version: null }]));
   });
 
+  test("Send while offline shows the reconnecting message and sends nothing", async () => {
+    const view = render(<ArtifactsPanel workspaceId="ws-r" />, { wrapper: ConnectionWrapper });
+    const frame = (await view.findByTestId("artifact-frame")) as HTMLIFrameElement;
+    await flush();
+    postFromFrame(frame, { xumArtifact: 1, type: "send", text: "Ship" });
+    const sendButton = (await view.findByRole("button", { name: "Send" })) as HTMLButtonElement;
+    await waitFor(() => expect(sendButton.disabled).toBe(false), {
+      timeout: CONFIRM_ARM_DELAY_MS + 1000,
+    });
+    await dropConnection();
+    fireEvent.click(sendButton);
+    await view.findByText("Xum is reconnecting. Send again once it is back.");
+    expect(sends).toEqual([]);
+  });
+
   test("a canvas keeps its data through a refresh made while offline", async () => {
     files["data/s.json"] = ok("data/s.json", JSON.stringify({ series: [{ q: "Q1", v: 1 }] }));
     const content = JSON.stringify({
diff --git a/src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.test.tsx b/src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.test.tsx
index b28a4354388..e976175a328 100644
--- a/src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.test.tsx
+++ b/src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.test.tsx
@@ -5,6 +5,7 @@ import { afterEach, beforeEach, describe, expect, spyOn, test } from "bun:test";
 import { act, cleanup, fireEvent, render, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { installDom } from "../../../../../tests/ui/dom";
+import { createConnectionHarness, GAP_MODES } from "@/browser/contexts/connection.testHarness";
 import { APIProvider, type APIClient } from "@/browser/contexts/API";
 import { ThemeProvider } from "@/browser/contexts/ThemeContext";
 import { createTestApiClient, type TestApiOverrides } from "@/browser/testUtils";
@@ -40,8 +41,8 @@ let toolCalls: Array<{
   consented: boolean;
 }> = [];
 
-function Wrapper(props: { children: ReactNode }) {
-  const api: TestApiOverrides<APIClient> = {
+function serverApi(): TestApiOverrides<APIClient> {
+  return {
     mcpApps: {
       getView: () => {
         return Promise.resolve({
@@ -94,9 +95,12 @@ function Wrapper(props: { children: ReactNode }) {
       },
     },
   };
+}
+
+function Wrapper(props: { children: ReactNode }) {
   return (
     <ThemeProvider forcedTheme="dark">
-      <APIProvider client={createTestApiClient(api)}>{props.children}</APIProvider>
+      <APIProvider client={createTestApiClient(serverApi())}>{props.children}</APIProvider>
     </ThemeProvider>
   );
 }
@@ -176,6 +180,39 @@ describe("McpAppFrame", () => {
     cleanupDom = null;
   });
 
+  // A failed approval dismisses the strip for good, so offline Allow waits for the next client.
+  test.each([...GAP_MODES])(
+    "Allow is disabled while offline and the prompt stays (%s)",
+    async (mode) => {
+      invocation = { serverName: "charts-raw", toolName: "show_chart", arguments: {} };
+      viewCsp = { connectDomains: ["https://api.example.com"] };
+      const harness = createConnectionHarness(mode, serverApi);
+      const view = render(
+        <ThemeProvider forcedTheme="dark">
+          <harness.Wrapper>
+            <McpAppFrame workspaceId="ws" view={VIEW} />
+          </harness.Wrapper>
+        </ThemeProvider>
+      );
+      await view.findByTestId("mcp-app-frame");
+      const allow = () => view.getByRole("button", { name: "Allow" }) as HTMLButtonElement;
+      await waitFor(() => expect(allow().disabled).toBe(false), {
+        timeout: CONFIRM_ARM_DELAY_MS + 1000,
+      });
+
+      await harness.drop();
+      expect(allow().disabled).toBe(true);
+      harness.reconnect();
+      await waitFor(() => expect(allow().disabled).toBe(false));
+      await pressAllow(allow());
+      await waitFor(() =>
+        expect(approvals).toEqual([
+          { serverName: "charts-raw", origins: ["https://api.example.com"] },
+        ])
+      );
+    }
+  );
+
   test("declared domains run under the base policy until the user allows them", async () => {
     invocation = { serverName: "charts-raw", toolName: "show_chart", arguments: {} };
     viewCsp = {
diff --git a/src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.tsx b/src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.tsx
index bff4404448b..6a7182a7b24 100644
--- a/src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.tsx
+++ b/src/browser/features/RightSidebar/ArtifactsTab/McpAppFrame.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { X } from "lucide-react";
 import { TooltipIfPresent } from "@/browser/components/Tooltip/Tooltip";
 import { cn } from "@/common/lib/utils";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { useTheme } from "@/browser/contexts/ThemeContext";
 import { isDesktopMode } from "@/browser/hooks/useDesktopTitlebar";
 import { isLightThemeMode } from "@/browser/utils/highlighting/shiki-shared";
@@ -165,6 +165,11 @@ function inlineMaxHeight(): number {
   return Math.min(INLINE_MAX_HEIGHT, Math.round(window.innerHeight * 0.8));
 }
 
+/** Allow waits for the arming delay and for a live client (offline it would dismiss the prompt). */
+function isAllowDisabled(armed: boolean, liveApi: unknown): boolean {
+  return !armed || liveApi == null;
+}
+
 export function McpAppFrame(props: {
   workspaceId: string;
   view: McpAppViewRef;
@@ -204,11 +209,13 @@ export function McpAppFrame(props: {
   const { toolCallId, serverName, resourceUri } = view;
   // The view's host lives as long as its frame. The API is null while Xum reconnects and a new
   // client afterwards; tearing the host down for either reset the view. So the host calls tools
-  // through the latest client, and a call made while offline fails.
-  const apiRef = useRef(api);
+  // through the latest live client, and a call made while offline fails with its own message
+  // (useAPI() can keep the last client while Xum reconnects).
+  const liveApi = useLiveAPI();
+  const apiRef = useRef(liveApi);
   useEffect(() => {
-    apiRef.current = api;
-  }, [api]);
+    apiRef.current = liveApi;
+  }, [liveApi]);
   // Fetched once per tool call: a reconnect must not fetch it again (a failed refetch replaced a
   // working view with an error). A failed fetch is retried with the next client.
   const viewLoaded = loaded?.toolCallId === toolCallId && loaded.view != null;
@@ -269,10 +276,11 @@ export function McpAppFrame(props: {
   const [domainsPromptId] = useState(newConfirmPromptId);
   const domainsArming = useConfirmArmed(domainsPrompt != null ? domainsPromptId : null);
   const allowDomains = async (origins: string[]) => {
-    if (!api) return;
+    // Offline the prompt stays, with Allow disabled: a failed call would dismiss it for good.
+    if (!liveApi) return;
     try {
       const requestSeq = beginMcpAppViewDomainsRequest();
-      const result = await api.mcpApps.approveViewDomains({
+      const result = await liveApi.mcpApps.approveViewDomains({
         workspaceId,
         toolCallId,
         serverName: boundServerName,
@@ -522,7 +530,7 @@ export function McpAppFrame(props: {
           <button
             type="button"
             // Disabled briefly after the strip appears (confirmArming.ts), like the consent strip.
-            disabled={!domainsArming.armed}
+            disabled={isAllowDisabled(domainsArming.armed, liveApi)}
             onPointerDown={domainsArming.onPointerDown}
             onClick={(event) =>
               domainsArming.guardClick(event, () => void allowDomains(domainsPrompt))
diff --git a/src/browser/features/RightSidebar/ArtifactsTab/useArtifactInteractions.tsx b/src/browser/features/RightSidebar/ArtifactsTab/useArtifactInteractions.tsx
index 5743bd27436..092a9a44d1b 100644
--- a/src/browser/features/RightSidebar/ArtifactsTab/useArtifactInteractions.tsx
+++ b/src/browser/features/RightSidebar/ArtifactsTab/useArtifactInteractions.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { useAPI, type APIClient } from "@/browser/contexts/API";
+import { useAPI, type APIClient, useLiveAPI } from "@/browser/contexts/API";
 import { isAbortError } from "@/browser/utils/isAbortError";
 import { KEYBINDS, matchesKeybind } from "@/browser/utils/ui/keybinds";
 import { getErrorMessage } from "@/common/utils/errors";
@@ -60,6 +60,7 @@ export function useArtifactInteractions(
   handleKeyDown: (e: React.KeyboardEvent) => boolean;
 } {
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const [pendingByPath, setPendingByPath] = useState<ReadonlyMap<string, PendingArtifactSend>>(
     () => new Map()
   );
@@ -210,12 +211,12 @@ export function useArtifactInteractions(
   const send = () => {
     if (pending == null) return;
     const forPath = target.path;
-    if (!api) {
+    if (!liveApi) {
       setSendState({ path: forPath, sending: false, error: OFFLINE_SEND_ERROR });
       return;
     }
     setSendState({ path: forPath, sending: true, error: null });
-    api.artifacts
+    liveApi.artifacts
       .sendInteraction({
         workspaceId,
         path: forPath,
diff --git a/src/browser/features/RightSidebar/BrowserTab/useBrowserBridgeConnection.ts b/src/browser/features/RightSidebar/BrowserTab/useBrowserBridgeConnection.ts
index f0ead80454a..df564854fd7 100644
--- a/src/browser/features/RightSidebar/BrowserTab/useBrowserBridgeConnection.ts
+++ b/src/browser/features/RightSidebar/BrowserTab/useBrowserBridgeConnection.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 import { getBrowserBackendBaseUrl } from "@/browser/utils/backendBaseUrl";
 import type {
   BrowserViewportMetadata,
@@ -184,7 +184,7 @@ export function useBrowserBridgeConnection(workspaceId: string): {
     throw new Error("Browser bridge connection requires a workspaceId");
   }
 
-  const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const [session, setSession] = useState<BrowserSession | null>(null);
   const socketRef = useRef<WebSocket | null>(null);
   const generationRef = useRef(0);
@@ -229,7 +229,7 @@ export function useBrowserBridgeConnection(workspaceId: string): {
       const sessionId = `browser-${workspaceId}-${sessionName}-${generation}`;
       disconnectSocket(createSession(workspaceId, sessionName, sessionId, "starting"));
 
-      if (!api) {
+      if (!liveApi) {
         setSession((previousSession) =>
           previousSession?.id !== sessionId
             ? previousSession
@@ -245,7 +245,7 @@ export function useBrowserBridgeConnection(workspaceId: string): {
       }
 
       try {
-        const bootstrap = await api.browser.getBootstrap({
+        const bootstrap = await liveApi.browser.getBootstrap({
           workspaceId,
           sessionName,
           ...(options?.allowOtherWorkspaceSession === true
diff --git a/src/browser/features/RightSidebar/CodeReview/ImmersiveReviewView.tsx b/src/browser/features/RightSidebar/CodeReview/ImmersiveReviewView.tsx
index 9c2810d2978..3ae4453b759 100644
--- a/src/browser/features/RightSidebar/CodeReview/ImmersiveReviewView.tsx
+++ b/src/browser/features/RightSidebar/CodeReview/ImmersiveReviewView.tsx
@@ -39,7 +39,7 @@ import {
 } from "./immersiveMinimapMath";
 import { KeycapGroup } from "@/browser/components/Keycap/Keycap";
 import { useTheme } from "@/browser/contexts/ThemeContext";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { formatLineRangeCompact } from "@/browser/utils/review/lineRange";
 import {
   findAdjacentFileHunkId,
@@ -326,6 +326,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
   const hunkJumpRef = useRef(false);
   const pendingJumpSelectAllHunkIdRef = useRef<string | null>(null);
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const { theme } = useTheme();
 
   const {
@@ -1475,7 +1476,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
     }
     // The API union supplies api: null while connecting/reconnecting/errored; the
     // already-rendered view keeps its copy affordance, so fail visibly, not silently.
-    if (!api) {
+    if (!liveApi) {
       showCopyFileFeedback("failed", filePath, contentVersion, {
         message: "Copy failed: backend connection unavailable",
       });
@@ -1500,7 +1501,7 @@ export const ImmersiveReviewView: React.FC<ImmersiveReviewViewProps> = (props) =
       activeFilePathRef.current !== filePath ||
       activeFileContentVersionRef.current !== contentVersion;
     const copyFileContents = async () => {
-      const result = await api.workspace.executeBash({
+      const result = await liveApi.workspace.executeBash({
         workspaceId: props.workspaceId,
         script: buildReadFileScript(filePath, {
           // The IPC bash channel truncates output beyond 1MiB, so cap copies at what
diff --git a/src/browser/features/Settings/Sections/MCPSettingsSection.tsx b/src/browser/features/Settings/Sections/MCPSettingsSection.tsx
index fad3d969627..7e757c59951 100644
--- a/src/browser/features/Settings/Sections/MCPSettingsSection.tsx
+++ b/src/browser/features/Settings/Sections/MCPSettingsSection.tsx
@@ -8,7 +8,7 @@ import { getOwn } from "@/common/utils/getOwn";
 import { ClaudeDesignCard } from "./ClaudeDesignCard";
 import { CLAUDE_DESIGN_SERVER_NAME } from "@/common/constants/claudeDesign";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import {
   Trash2,
   Play,
@@ -347,13 +347,14 @@ function getMCPOAuthLoginFlowMode(input: {
 }
 
 function useMCPOAuthLogin(input: {
-  api: ReturnType<typeof useAPI>["api"];
   isDesktop: boolean;
   serverName: string;
   pendingServer?: MCPOAuthPendingServerConfig;
   onSuccess?: () => void | Promise<void>;
 }) {
-  const { api, isDesktop, serverName, pendingServer, onSuccess } = input;
+  const { isDesktop, serverName, pendingServer, onSuccess } = input;
+  // The live client only: offline, startLogin shows its own "not connected" error.
+  const api = useLiveAPI();
   const loginAttemptRef = useRef(0);
   const [flowId, setFlowId] = useState<string | null>(null);
 
@@ -623,9 +624,7 @@ const MCPOAuthRequiredCallout: React.FC<{
   disabledReason?: string;
   onLoginSuccess?: () => void | Promise<void>;
 }> = (props) => {
-  const { api } = useAPI();
   const login = useMCPOAuthLogin({
-    api,
     isDesktop: !!window.api,
     serverName: props.serverName,
     pendingServer: props.pendingServer,
@@ -679,7 +678,6 @@ const RemoteMCPOAuthSection: React.FC<{
   }, [refreshAuthStatus, transport, url, oauthRefreshNonce]);
 
   const { loginStatus, loginError, loginInProgress, startLogin, cancelLogin } = useMCPOAuthLogin({
-    api,
     isDesktop,
     serverName,
     onSuccess: refreshAuthStatus,
@@ -1235,7 +1233,6 @@ export const MCPSettingsSection: React.FC = () => {
       ? "OAuth login is only supported for remote (http/sse) MCP servers."
       : undefined;
   const newServerOauthLogin = useMCPOAuthLogin({
-    api,
     isDesktop: !!window.api,
     serverName: newServerName,
     pendingServer: newServerOauthPendingServer,
diff --git a/src/browser/features/Settings/Sections/ProvidersSection.tsx b/src/browser/features/Settings/Sections/ProvidersSection.tsx
index 5bab287576f..fad128014a2 100644
--- a/src/browser/features/Settings/Sections/ProvidersSection.tsx
+++ b/src/browser/features/Settings/Sections/ProvidersSection.tsx
@@ -32,7 +32,7 @@ import { PROVIDER_DEFINITIONS, type ProviderName } from "@/common/constants/prov
 import { useWorkspaceContext } from "@/browser/contexts/WorkspaceContext";
 import { ProviderIcon, ProviderWithIcon } from "@/browser/components/ProviderIcon/ProviderIcon";
 import { getStoredAuthToken } from "@/browser/components/AuthTokenModal/AuthTokenModal";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { DocsLink } from "@/browser/components/DocsLink/DocsLink";
 import { ConfigSwitchSetting, type SettingsApi } from "./ConfigSwitchSetting";
 import { useSettings } from "@/browser/contexts/SettingsContext";
@@ -480,6 +480,7 @@ export function ProvidersSection() {
   } = useSettings();
 
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const { config, loading: configLoading, refresh, updateOptimistically } = useProvidersConfig();
   const { refreshWorkspaceMetadata } = useWorkspaceContext();
   const visibleProviders = useMemo(() => getProviderIdsForUi(config), [config]);
@@ -596,7 +597,7 @@ export function ProvidersSection() {
   const startCodexOauthBrowserConnect = async () => {
     const attempt = ++codexOauthAttemptRef.current;
 
-    if (!api) {
+    if (!liveApi) {
       setCodexOauthStatus("error");
       setCodexOauthError("Xum API not connected.");
       return;
@@ -604,10 +605,10 @@ export function ProvidersSection() {
 
     // Best-effort: cancel any in-progress flow before starting a new one.
     if (codexOauthDesktopFlowId) {
-      void api.codexOauth.cancelDesktopFlow({ flowId: codexOauthDesktopFlowId });
+      void liveApi.codexOauth.cancelDesktopFlow({ flowId: codexOauthDesktopFlowId });
     }
     if (codexOauthDeviceFlow) {
-      void api.codexOauth.cancelDeviceFlow({ flowId: codexOauthDeviceFlow.flowId });
+      void liveApi.codexOauth.cancelDeviceFlow({ flowId: codexOauthDeviceFlow.flowId });
     }
 
     setCodexOauthError(null);
@@ -619,11 +620,11 @@ export function ProvidersSection() {
       setCodexOauthStatus("starting");
 
       if (!isDesktop) {
-        const startResult = await api.codexOauth.startDeviceFlow();
+        const startResult = await liveApi.codexOauth.startDeviceFlow();
 
         if (attempt !== codexOauthAttemptRef.current) {
           if (startResult.success) {
-            void api.codexOauth.cancelDeviceFlow({ flowId: startResult.data.flowId });
+            void liveApi.codexOauth.cancelDeviceFlow({ flowId: startResult.data.flowId });
           }
           return;
         }
@@ -643,7 +644,7 @@ export function ProvidersSection() {
 
         // Keep device-code login manual per user request: we only open the
         // verification page from the explicit "Copy & Open" action.
-        const waitResult = await api.codexOauth.waitForDeviceFlow({
+        const waitResult = await liveApi.codexOauth.waitForDeviceFlow({
           flowId: startResult.data.flowId,
         });
 
@@ -664,11 +665,11 @@ export function ProvidersSection() {
         return;
       }
 
-      const startResult = await api.codexOauth.startDesktopFlow();
+      const startResult = await liveApi.codexOauth.startDesktopFlow();
 
       if (attempt !== codexOauthAttemptRef.current) {
         if (startResult.success) {
-          void api.codexOauth.cancelDesktopFlow({ flowId: startResult.data.flowId });
+          void liveApi.codexOauth.cancelDesktopFlow({ flowId: startResult.data.flowId });
         }
         return;
       }
@@ -684,7 +685,7 @@ export function ProvidersSection() {
       setCodexOauthAuthorizeUrl(authorizeUrl);
       setCodexOauthStatus("waiting");
 
-      const waitResult = await api.codexOauth.waitForDesktopFlow({ flowId });
+      const waitResult = await liveApi.codexOauth.waitForDesktopFlow({ flowId });
 
       if (attempt !== codexOauthAttemptRef.current) {
         return;
@@ -712,7 +713,7 @@ export function ProvidersSection() {
   const startCodexOauthDeviceConnect = async () => {
     const attempt = ++codexOauthAttemptRef.current;
 
-    if (!api) {
+    if (!liveApi) {
       setCodexOauthStatus("error");
       setCodexOauthError("Xum API not connected.");
       return;
@@ -720,10 +721,10 @@ export function ProvidersSection() {
 
     // Best-effort: cancel any in-progress flow before starting a new one.
     if (codexOauthDesktopFlowId) {
-      void api.codexOauth.cancelDesktopFlow({ flowId: codexOauthDesktopFlowId });
+      void liveApi.codexOauth.cancelDesktopFlow({ flowId: codexOauthDesktopFlowId });
     }
     if (codexOauthDeviceFlow) {
-      void api.codexOauth.cancelDeviceFlow({ flowId: codexOauthDeviceFlow.flowId });
+      void liveApi.codexOauth.cancelDeviceFlow({ flowId: codexOauthDeviceFlow.flowId });
     }
 
     setCodexOauthError(null);
@@ -733,11 +734,11 @@ export function ProvidersSection() {
 
     try {
       setCodexOauthStatus("starting");
-      const startResult = await api.codexOauth.startDeviceFlow();
+      const startResult = await liveApi.codexOauth.startDeviceFlow();
 
       if (attempt !== codexOauthAttemptRef.current) {
         if (startResult.success) {
-          void api.codexOauth.cancelDeviceFlow({ flowId: startResult.data.flowId });
+          void liveApi.codexOauth.cancelDeviceFlow({ flowId: startResult.data.flowId });
         }
         return;
       }
@@ -755,7 +756,7 @@ export function ProvidersSection() {
       });
       setCodexOauthStatus("waiting");
 
-      const waitResult = await api.codexOauth.waitForDeviceFlow({
+      const waitResult = await liveApi.codexOauth.waitForDeviceFlow({
         flowId: startResult.data.flowId,
       });
 
@@ -786,7 +787,7 @@ export function ProvidersSection() {
   const disconnectCodexOauth = async () => {
     const attempt = ++codexOauthAttemptRef.current;
 
-    if (!api) {
+    if (!liveApi) {
       setCodexOauthStatus("error");
       setCodexOauthError("Xum API not connected.");
       return;
@@ -794,10 +795,10 @@ export function ProvidersSection() {
 
     // Best-effort: cancel any in-progress flow.
     if (codexOauthDesktopFlowId) {
-      void api.codexOauth.cancelDesktopFlow({ flowId: codexOauthDesktopFlowId });
+      void liveApi.codexOauth.cancelDesktopFlow({ flowId: codexOauthDesktopFlowId });
     }
     if (codexOauthDeviceFlow) {
-      void api.codexOauth.cancelDeviceFlow({ flowId: codexOauthDeviceFlow.flowId });
+      void liveApi.codexOauth.cancelDeviceFlow({ flowId: codexOauthDeviceFlow.flowId });
     }
 
     setCodexOauthError(null);
@@ -807,7 +808,7 @@ export function ProvidersSection() {
 
     try {
       setCodexOauthStatus("starting");
-      const result = await api.codexOauth.disconnect();
+      const result = await liveApi.codexOauth.disconnect();
 
       if (attempt !== codexOauthAttemptRef.current) {
         return;
@@ -904,18 +905,18 @@ export function ProvidersSection() {
       setMuxGatewayAuthorizeUrl(null);
 
       if (isDesktop) {
-        if (!api) {
+        if (!liveApi) {
           setMuxGatewayLoginStatus("error");
           setMuxGatewayLoginError("Xum API not connected.");
           return;
         }
 
         setMuxGatewayLoginStatus("starting");
-        const startResult = await api.muxGatewayOauth.startDesktopFlow();
+        const startResult = await liveApi.muxGatewayOauth.startDesktopFlow();
 
         if (attempt !== muxGatewayLoginAttemptRef.current) {
           if (startResult.success) {
-            void api.muxGatewayOauth.cancelDesktopFlow({ flowId: startResult.data.flowId });
+            void liveApi.muxGatewayOauth.cancelDesktopFlow({ flowId: startResult.data.flowId });
           }
           return;
         }
@@ -935,7 +936,7 @@ export function ProvidersSection() {
           return;
         }
 
-        const waitResult = await api.muxGatewayOauth.waitForDesktopFlow({ flowId });
+        const waitResult = await liveApi.muxGatewayOauth.waitForDesktopFlow({ flowId });
 
         if (attempt !== muxGatewayLoginAttemptRef.current) {
           return;
@@ -1123,7 +1124,7 @@ export function ProvidersSection() {
       setCopilotLoginError(null);
       setCopilotLoginStatus("starting");
 
-      if (!api) {
+      if (!liveApi) {
         setCopilotLoginStatus("error");
         setCopilotLoginError("API not connected.");
         return;
@@ -1131,16 +1132,16 @@ export function ProvidersSection() {
 
       // Best-effort: cancel any in-progress flow before starting a new one.
       if (copilotFlowIdRef.current) {
-        void api.copilotOauth.cancelDeviceFlow({ flowId: copilotFlowIdRef.current });
+        void liveApi.copilotOauth.cancelDeviceFlow({ flowId: copilotFlowIdRef.current });
         copilotFlowIdRef.current = null;
         setCopilotFlowId(null);
       }
 
-      const startResult = await api.copilotOauth.startDeviceFlow();
+      const startResult = await liveApi.copilotOauth.startDeviceFlow();
 
       if (attempt !== copilotLoginAttemptRef.current) {
         if (startResult.success) {
-          void api.copilotOauth.cancelDeviceFlow({ flowId: startResult.data.flowId });
+          void liveApi.copilotOauth.cancelDeviceFlow({ flowId: startResult.data.flowId });
         }
         return;
       }
@@ -1162,7 +1163,7 @@ export function ProvidersSection() {
       // verification page from the explicit "Copy & Open" action.
 
       // Wait for flow to complete (polling happens on backend)
-      const waitResult = await api.copilotOauth.waitForDeviceFlow({ flowId });
+      const waitResult = await liveApi.copilotOauth.waitForDeviceFlow({ flowId });
 
       if (attempt !== copilotLoginAttemptRef.current) return;
 
@@ -1257,7 +1258,7 @@ export function ProvidersSection() {
   const startCoderLogin = useCallback(async () => {
     const attempt = ++coderLoginAttemptRef.current;
 
-    if (!api) {
+    if (!liveApi) {
       setCoderLoginStatus("error");
       setCoderLoginError("Xum API not connected.");
       return;
@@ -1267,7 +1268,7 @@ export function ProvidersSection() {
     // old flow cannot commit a login after this replacement attempt begins.
     if (coderFlowId) {
       try {
-        await api.coderOauth.cancelDesktopFlow({ flowId: coderFlowId });
+        await liveApi.coderOauth.cancelDesktopFlow({ flowId: coderFlowId });
       } catch {
         // Proceed anyway; the backend's last-committed-login-wins semantics
         // still bound the damage if the old flow survives.
@@ -1298,7 +1299,7 @@ export function ProvidersSection() {
       // Desktop: loopback listener on this machine. Browser (local or remote
       // server): the redirect lands on the Xum server's own callback route.
       const startResult = isDesktop
-        ? await api.coderOauth.startDesktopFlow({ deploymentUrl, flowId })
+        ? await liveApi.coderOauth.startDesktopFlow({ deploymentUrl, flowId })
         : await startCoderServerFlow(backendBaseUrl, deploymentUrl, flowId);
 
       if (attempt !== coderLoginAttemptRef.current) {
@@ -1317,7 +1318,7 @@ export function ProvidersSection() {
       setCoderAuthorizeUrl(authorizeUrl);
       setCoderLoginStatus("waiting");
 
-      const waitResult = await api.coderOauth.waitForDesktopFlow({ flowId });
+      const waitResult = await liveApi.coderOauth.waitForDesktopFlow({ flowId });
 
       if (attempt !== coderLoginAttemptRef.current) return;
 
@@ -1336,17 +1337,21 @@ export function ProvidersSection() {
       setCoderLoginStatus("error");
       setCoderLoginError(getErrorMessage(err));
     }
-  }, [api, coderFlowId, coderDeploymentUrl, refresh, isDesktop, backendBaseUrl]);
+  }, [liveApi, coderFlowId, coderDeploymentUrl, refresh, isDesktop, backendBaseUrl]);
 
   const disconnectCoderOauth = async () => {
     const attempt = ++coderLoginAttemptRef.current;
-    if (!api) return;
+    if (!liveApi) {
+      setCoderLoginStatus("error");
+      setCoderLoginError("Xum API not connected.");
+      return;
+    }
 
     // Awaited: an unsettled flow could otherwise commit a login AFTER the
     // disconnect below cleared credentials, silently reconnecting the account.
     if (coderFlowId) {
       try {
-        await api.coderOauth.cancelDesktopFlow({ flowId: coderFlowId });
+        await liveApi.coderOauth.cancelDesktopFlow({ flowId: coderFlowId });
       } catch {
         // Proceed with disconnect regardless.
       }
@@ -1358,7 +1363,7 @@ export function ProvidersSection() {
     setCoderLoginStatus("idle");
 
     try {
-      const result = await api.coderOauth.disconnect();
+      const result = await liveApi.coderOauth.disconnect();
 
       if (attempt !== coderLoginAttemptRef.current) return;
 
@@ -1745,7 +1750,7 @@ export function ProvidersSection() {
   const handleAddCustomProvider = useCallback(async () => {
     setCustomProviderSubmitAttempted(true);
 
-    if (!api) {
+    if (!liveApi) {
       setCustomProviderSubmitError("Xum API not connected.");
       return;
     }
@@ -1781,7 +1786,7 @@ export function ProvidersSection() {
     setCustomProviderSubmitError(null);
     setCustomProviderNotice(null);
     try {
-      const result = await api.providers.addCustomProvider(input);
+      const result = await liveApi.providers.addCustomProvider(input);
       if (!result.success) {
         setCustomProviderSubmitError(result.error.message);
         return;
@@ -1808,7 +1813,7 @@ export function ProvidersSection() {
     setExpandedProvider(provider);
     setProvidersExpandedProvider(provider);
   }, [
-    api,
+    liveApi,
     customProviderApiKey,
     customProviderApiKeyFile,
     customProviderBaseUrl,
@@ -1831,7 +1836,7 @@ export function ProvidersSection() {
 
   const handleRemoveCustomProvider = useCallback(
     async (provider: string) => {
-      if (!api) {
+      if (!liveApi) {
         setCustomProviderRemoveErrors((prev) => ({
           ...prev,
           [provider]: "Xum API not connected.",
@@ -1854,7 +1859,7 @@ export function ProvidersSection() {
       setCustomProviderNotice(null);
       setCustomProviderRemoving(provider);
       try {
-        const result = await api.providers.removeCustomProvider({ provider });
+        const result = await liveApi.providers.removeCustomProvider({ provider });
         if (!result.success && result.error.code !== "config_repair_failed") {
           setCustomProviderRemoveErrors((prev) => ({
             ...prev,
@@ -1902,7 +1907,7 @@ export function ProvidersSection() {
       }
     },
     [
-      api,
+      liveApi,
       clearCustomProviderRemoveError,
       refresh,
       refreshWorkspaceMetadata,
diff --git a/src/browser/features/SplashScreens/OnboardingWizardSplash.tsx b/src/browser/features/SplashScreens/OnboardingWizardSplash.tsx
index 794b529b018..b923e607055 100644
--- a/src/browser/features/SplashScreens/OnboardingWizardSplash.tsx
+++ b/src/browser/features/SplashScreens/OnboardingWizardSplash.tsx
@@ -28,7 +28,7 @@ import { Button } from "@/browser/components/Button/Button";
 import { useSettings } from "@/browser/contexts/SettingsContext";
 import { getStoredAuthToken } from "@/browser/components/AuthTokenModal/AuthTokenModal";
 import { getBrowserBackendBaseUrl } from "@/browser/utils/backendBaseUrl";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { updatePersistedState } from "@/browser/hooks/usePersistedState";
 import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
 import { useRouting } from "@/browser/hooks/useRouting";
@@ -218,6 +218,7 @@ export function OnboardingWizardSplash(props: { onDismiss: () => void }) {
   const [direction, setDirection] = useState<Direction>("forward");
 
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const {
     data: muxGatewayAccountStatus,
     error: muxGatewayAccountError,
@@ -289,18 +290,18 @@ export function OnboardingWizardSplash(props: { onDismiss: () => void }) {
       setMuxGatewayServerState(null);
 
       if (isDesktop) {
-        if (!api) {
+        if (!liveApi) {
           setMuxGatewayLoginStatus("error");
           setMuxGatewayLoginError("Xum API not connected.");
           return;
         }
 
         setMuxGatewayLoginStatus("starting");
-        const startResult = await api.muxGatewayOauth.startDesktopFlow();
+        const startResult = await liveApi.muxGatewayOauth.startDesktopFlow();
 
         if (attempt !== muxGatewayLoginAttemptRef.current) {
           if (startResult.success) {
-            void api.muxGatewayOauth.cancelDesktopFlow({ flowId: startResult.data.flowId });
+            void liveApi.muxGatewayOauth.cancelDesktopFlow({ flowId: startResult.data.flowId });
           }
           return;
         }
@@ -322,7 +323,7 @@ export function OnboardingWizardSplash(props: { onDismiss: () => void }) {
           return;
         }
 
-        const waitResult = await api.muxGatewayOauth.waitForDesktopFlow({ flowId });
+        const waitResult = await liveApi.muxGatewayOauth.waitForDesktopFlow({ flowId });
 
         if (attempt !== muxGatewayLoginAttemptRef.current) {
           return;
@@ -429,7 +430,7 @@ export function OnboardingWizardSplash(props: { onDismiss: () => void }) {
       setMuxGatewayLoginStatus("error");
       setMuxGatewayLoginError(message);
     }
-  }, [api, backendBaseUrl, disableMuxGatewayRoute, isDesktop, refreshMuxGatewayAccountStatus]);
+  }, [liveApi, backendBaseUrl, disableMuxGatewayRoute, isDesktop, refreshMuxGatewayAccountStatus]);
 
   useEffect(() => {
     const attempt = muxGatewayLoginAttemptRef.current;
diff --git a/src/browser/features/Tools/AskUserQuestionToolCall.tsx b/src/browser/features/Tools/AskUserQuestionToolCall.tsx
index d859c2a1203..d2a84b130c5 100644
--- a/src/browser/features/Tools/AskUserQuestionToolCall.tsx
+++ b/src/browser/features/Tools/AskUserQuestionToolCall.tsx
@@ -3,7 +3,7 @@ import assert from "@/common/utils/assert";
 import { AlertTriangle, Check } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 import { useWorkspaceStoreRaw } from "@/browser/stores/WorkspaceStore";
 import { getSendOptionsFromStorage } from "@/browser/utils/messages/sendOptions";
 import { applyCompactionOverrides } from "@/browser/utils/messages/compactionOptions";
@@ -223,8 +223,6 @@ export function AskUserQuestionToolCall(props: {
   toolCallId: string;
   workspaceId?: string;
 }): JSX.Element {
-  const { api } = useAPI();
-
   // A live, blocking question must never be hidden behind a collapsed "tools"
   // preference, so force it open while executing. forceExpanded only overrides the
   // initial seed; once answered the row follows the sticky preference like any tool.
@@ -270,11 +268,13 @@ export function AskUserQuestionToolCall(props: {
   const autoRetryRollbackArmedRef = useRef(false);
   const autoRetryRollbackBaselineMessageCountRef = useRef<number | null>(null);
   const isMountedRef = useRef(true);
-  const apiRef = useRef(api);
+  // The rollback skips while offline, as it did when useAPI() went null in the gap.
+  const liveApi = useLiveAPI();
+  const apiRef = useRef(liveApi);
 
   useEffect(() => {
-    apiRef.current = api;
-  }, [api]);
+    apiRef.current = liveApi;
+  }, [liveApi]);
 
   const rollbackAutoRetryIfNeeded = useCallback(
     async (options?: { suppressErrors?: boolean }): Promise<void> => {
@@ -467,7 +467,7 @@ export function AskUserQuestionToolCall(props: {
         }
       }
 
-      assert(api, "API not connected");
+      assert(liveApi, "API not connected");
       assert(props.workspaceId, "workspaceId is required");
       workspaceId = props.workspaceId;
     } catch (error) {
@@ -477,7 +477,7 @@ export function AskUserQuestionToolCall(props: {
       return;
     }
 
-    api.workspace
+    liveApi.workspace
       .answerAskUserQuestion({
         workspaceId,
         toolCallId: props.toolCallId,
@@ -506,7 +506,7 @@ export function AskUserQuestionToolCall(props: {
           );
         }
 
-        const enableResult = await api.workspace.setAutoRetryEnabled?.({
+        const enableResult = await liveApi.workspace.setAutoRetryEnabled?.({
           workspaceId,
           enabled: true,
           persist: false,
@@ -520,7 +520,7 @@ export function AskUserQuestionToolCall(props: {
           // Ask-user resume temporarily enables auto-retry for this attempt.
           // Roll back only after the resumed stream reaches a terminal outcome.
           if (!isMountedRef.current) {
-            await api.workspace.setAutoRetryEnabled?.({
+            await liveApi.workspace.setAutoRetryEnabled?.({
               workspaceId,
               enabled: false,
               persist: false,
@@ -533,7 +533,7 @@ export function AskUserQuestionToolCall(props: {
           }
         }
 
-        const resumeResult = await api.workspace.resumeStream({
+        const resumeResult = await liveApi.workspace.resumeStream({
           workspaceId,
           options: sendOptions,
         });
diff --git a/src/browser/hooks/useCompactAndRetry.ts b/src/browser/hooks/useCompactAndRetry.ts
index e8bb5fbde74..11a273d5e1a 100644
--- a/src/browser/hooks/useCompactAndRetry.ts
+++ b/src/browser/hooks/useCompactAndRetry.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import { getSendOptionsFromStorage } from "@/browser/utils/messages/sendOptions";
 import { useRouting } from "@/browser/hooks/useRouting";
 import { useWorkspaceState, workspaceStore } from "@/browser/stores/WorkspaceStore";
@@ -123,6 +123,7 @@ export function buildFollowUpFromSource(
 export function useCompactAndRetry(props: { workspaceId: string }): CompactAndRetryState {
   const workspaceState = useWorkspaceState(props.workspaceId);
   const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const [providersConfig, setProvidersConfig] = useState<ProvidersConfigMap | null>(null);
   const { routePriority, routeOverrides } = useRouting();
   const [isRetryingWithCompaction, setIsRetryingWithCompaction] = useState(false);
@@ -256,7 +257,7 @@ export function useCompactAndRetry(props: { workspaceId: string }): CompactAndRe
       model: compactionSuggestion.modelArg,
     });
 
-    if (!api) {
+    if (!liveApi) {
       insertIntoChatInput(suggestedCommandLine + "\n");
       return;
     }
@@ -287,7 +288,7 @@ export function useCompactAndRetry(props: { workspaceId: string }): CompactAndRe
         const maxOutputTokens = parsedCompaction.maxOutputTokens;
         const nestedFollowUp = parsedCompaction.followUpContent;
         const result = await executeCompaction({
-          api,
+          api: liveApi,
           workspaceId: props.workspaceId,
           sendMessageOptions,
           model: compactionSuggestion.modelId,
@@ -321,7 +322,7 @@ export function useCompactAndRetry(props: { workspaceId: string }): CompactAndRe
       // For normal messages (not /compact), build follow-up content directly.
       const followUpContent = buildFollowUpFromSource(source);
       const result = await executeCompaction({
-        api,
+        api: liveApi,
         workspaceId: props.workspaceId,
         sendMessageOptions,
         model: compactionSuggestion.modelId,
@@ -342,14 +343,14 @@ export function useCompactAndRetry(props: { workspaceId: string }): CompactAndRe
         setIsRetryingWithCompaction(false);
       }
     }
-  }, [api, compactionSuggestion, props.workspaceId, triggerUserMessage]);
+  }, [liveApi, compactionSuggestion, props.workspaceId, triggerUserMessage]);
 
   /**
    * Auto-compact on context_exceeded. Runs silently - never touches chat input.
    * Returns true if compaction was attempted, false if preconditions not met.
    */
   const autoCompact = useCallback(async (): Promise<boolean> => {
-    if (!api || !triggerUserMessage || triggerUserMessage.compactionRequest) {
+    if (!liveApi || !triggerUserMessage || triggerUserMessage.compactionRequest) {
       return false;
     }
 
@@ -362,7 +363,7 @@ export function useCompactAndRetry(props: { workspaceId: string }): CompactAndRe
       const followUpContent = buildFollowUpFromSource(triggerUserMessage);
 
       const result = await executeCompaction({
-        api,
+        api: liveApi,
         workspaceId: props.workspaceId,
         sendMessageOptions,
         model: compactionSuggestion?.modelId,
@@ -387,12 +388,12 @@ export function useCompactAndRetry(props: { workspaceId: string }): CompactAndRe
         setIsRetryingWithCompaction(false);
       }
     }
-  }, [api, compactionSuggestion?.modelId, props.workspaceId, triggerUserMessage]);
+  }, [liveApi, compactionSuggestion?.modelId, props.workspaceId, triggerUserMessage]);
 
   // Auto-trigger compaction on context_exceeded for seamless recovery.
   // Only auto-compact if we have a compaction suggestion; otherwise show manual UI.
   const shouldAutoCompact =
-    api &&
+    liveApi &&
     isContextExceeded &&
     providersConfig !== undefined &&
     compactionSuggestion &&
diff --git a/src/browser/hooks/useResumeStream.test.tsx b/src/browser/hooks/useResumeStream.test.tsx
index 508d15acf89..1c310f7890c 100644
--- a/src/browser/hooks/useResumeStream.test.tsx
+++ b/src/browser/hooks/useResumeStream.test.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
 import { restoreDomGlobals, saveDomGlobals } from "../../../tests/ui/domGlobals";
-import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import { act, cleanup, fireEvent, render, renderHook, waitFor } from "@testing-library/react";
 import { GlobalWindow } from "happy-dom";
 
 import { APIProvider, type APIClient } from "@/browser/contexts/API";
@@ -15,6 +15,7 @@ import type { MuxMessage } from "@/common/types/message";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
 import { useResumeStream } from "./useResumeStream";
 import { createTestApiClient } from "@/browser/testUtils";
+import { createConnectionHarness, GAP_MODES } from "@/browser/contexts/connection.testHarness";
 
 const DEFAULT_WORKSPACE_ID = "ws-1";
 
@@ -150,4 +151,19 @@ describe("useResumeStream", () => {
 
     expect(view.queryByTestId("resume-error")).toBeNull();
   });
+
+  // useAPI() keeps the last client while reconnecting (kept-gap): resume must still see "offline".
+  test.each([...GAP_MODES])(
+    "while the connection is down (%s), resume shows the offline error",
+    async (mode) => {
+      const harness = createConnectionHarness(mode, () => ({ workspace: { resumeStream } }));
+      const { result } = renderHook(() => useResumeStream(DEFAULT_WORKSPACE_ID, "turn-1", []), {
+        wrapper: harness.Wrapper,
+      });
+      await harness.drop();
+      await act(() => result.current.resume());
+      expect(result.current.error).toBe("Not connected to server");
+      expect(resumeStream).not.toHaveBeenCalled();
+    }
+  );
 });
diff --git a/src/browser/hooks/useResumeStream.ts b/src/browser/hooks/useResumeStream.ts
index 8fe955af26c..bc473cbe93d 100644
--- a/src/browser/hooks/useResumeStream.ts
+++ b/src/browser/hooks/useResumeStream.ts
@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 import { getSendOptionsFromStorage } from "@/browser/utils/messages/sendOptions";
 import { applyCompactionOverrides } from "@/browser/utils/messages/compactionOptions";
 import { formatSendMessageError } from "@/common/utils/errors/formatSendError";
@@ -36,7 +36,7 @@ export function useResumeStream(
   messages: DisplayedMessage[],
   agentId?: string
 ): UseResumeStreamResult {
-  const { api } = useAPI();
+  const liveApi = useLiveAPI();
   const [error, setError] = useState<string | null>(null);
   const [isResuming, setIsResuming] = useState(false);
 
@@ -54,7 +54,7 @@ export function useResumeStream(
   }
 
   const resume = async (): Promise<void> => {
-    if (!api) {
+    if (!liveApi) {
       setError("Not connected to server");
       return;
     }
@@ -81,7 +81,7 @@ export function useResumeStream(
         options = applyCompactionOverrides(options, lastUserMessage.compactionRequest.parsed);
       }
 
-      const result = await api.workspace.resumeStream({ workspaceId, options });
+      const result = await liveApi.workspace.resumeStream({ workspaceId, options });
       if (!result.success) {
         const formatted = formatSendMessageError(result.error);
         applyIfCurrent(() =>