diff --git a/src/browser/components/BackgroundBashOutputDialog/BackgroundBashOutputDialog.tsx b/src/browser/components/BackgroundBashOutputDialog/BackgroundBashOutputDialog.tsx
index 739df965732..8c44293a3c4 100644
--- a/src/browser/components/BackgroundBashOutputDialog/BackgroundBashOutputDialog.tsx
+++ b/src/browser/components/BackgroundBashOutputDialog/BackgroundBashOutputDialog.tsx
@@ -1,14 +1,16 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { CopyButton } from "../CopyButton/CopyButton";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../Dialog/Dialog";
 import { DetailContent } from "@/browser/features/Tools/Shared/ToolPrimitives";
 import { useAPI } from "@/browser/contexts/API";
 import { useBackgroundProcesses } from "@/browser/stores/BackgroundBashStore";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import {
   appendLiveBashOutputChunk,
   type LiveBashOutputInternal,
 } from "@/browser/utils/messages/liveBashOutputBuffer";
 import { BASH_TRUNCATE_MAX_TOTAL_BYTES } from "@/common/constants/toolLimits";
+import { getErrorMessage } from "@/common/utils/errors";
 
 const BACKGROUND_BASH_INITIAL_TAIL_BYTES = 64_000;
 const BACKGROUND_BASH_POLL_INTERVAL_MS = 500;
@@ -47,11 +49,25 @@ export const BackgroundBashOutputDialog: React.FC<BackgroundBashOutputDialogProp
         )}
       </DialogHeader>
 
-      <BackgroundBashOutputViewer workspaceId={props.workspaceId} processId={props.processId} />
+      {/* Keyed by the process, so another process starts from an empty viewer, while a new API
+          client (a reconnect) only re-runs the viewer's read and keeps the output it shows. */}
+      <BackgroundBashOutputViewer
+        key={`${props.workspaceId}:${props.processId}`}
+        workspaceId={props.workspaceId}
+        processId={props.processId}
+      />
     </DialogContent>
   </Dialog>
 );
 
+/** The output pane: "Loading…" until the first read, then the output or a placeholder. */
+function outputPaneText(state: { isLoading: boolean; text: string; hasError: boolean }): string {
+  if (state.isLoading) return "Loading…";
+  if (state.text.length > 0) return state.text;
+  // The error shows above the pane; an empty pane under it reads better than "No output yet".
+  return state.hasError ? "" : "No output yet";
+}
+
 const BackgroundBashOutputViewer: React.FC<{ workspaceId: string; processId: string }> = (
   props
 ) => {
@@ -69,19 +85,24 @@ const BackgroundBashOutputViewer: React.FC<{ workspaceId: string; processId: str
   const [truncatedStart, setTruncatedStart] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  // True once a read landed: the viewer then shows output (or "No output yet"), not "Loading…".
+  const hasReadRef = useRef(false);
 
   useEffect(() => {
-    setOutput(undefined);
-    setStatus("running");
-    setTruncatedStart(false);
+    // No reset of the shown output here: the first read below replaces it.
     setError(null);
-    setIsLoading(true);
 
     if (!api) {
+      // Nothing can load without a client: a fresh viewer shows only the error, not a "Loading…"
+      // that never ends. A viewer that already read keeps its output.
       setIsLoading(false);
       setError("API unavailable");
       return;
     }
+    // Until the first read lands, the viewer shows "Loading…" (also after an offline start).
+    if (!hasReadRef.current) {
+      setIsLoading(true);
+    }
 
     let cancelled = false;
 
@@ -109,8 +130,12 @@ const BackgroundBashOutputViewer: React.FC<{ workspaceId: string; processId: str
         }
 
         setStatus(result.data.status);
-        if (result.data.truncatedStart) {
-          setTruncatedStart(true);
+        // The first read is a fresh tail (the only read that can be truncated at its start), so
+        // it replaces any output kept from an earlier run (a reconnect); later reads append.
+        if (offset === undefined) {
+          setTruncatedStart(result.data.truncatedStart);
+          setOutput(undefined);
+          hasReadRef.current = true;
         }
 
         offset = result.data.nextOffset;
@@ -133,12 +158,18 @@ const BackgroundBashOutputViewer: React.FC<{ workspaceId: string; processId: str
       }
     };
 
-    // A rejected read (e.g. a lost server connection) stops polling with the error shown instead
-    // of escaping as an unhandled rejection; reopening the dialog starts a fresh read.
+    // A rejected read stops polling with the error shown instead of escaping as an unhandled
+    // rejection; reopening the dialog starts a fresh read. Only a lost connection
+    // (ConnectionLostError) shows no error and keeps the output: the next client polls again. A
+    // server cancel on a live socket is a plain AbortError, and no new client would ever re-run
+    // this poll, so it shows its error.
     run().catch((err: unknown) => {
       if (cancelled) return;
+      // A viewer that already read keeps its output for the next client. A fresh one (its first
+      // read cut off) shows the error, not a "Loading…" with nothing behind it.
+      if (isConnectionLostError(err) && hasReadRef.current) return;
       setIsLoading(false);
-      setError(err instanceof Error ? err.message : String(err));
+      setError(getErrorMessage(err));
     });
 
     return () => {
@@ -184,7 +215,7 @@ const BackgroundBashOutputViewer: React.FC<{ workspaceId: string; processId: str
           min-h keeps a visible pane for "No output yet" while still letting very
           short windows shrink it instead of clipping it at the dialog edge. */}
       <DetailContent className="max-h-none min-h-24 flex-1 px-2 py-1.5">
-        {isLoading ? "Loading…" : text.length > 0 ? text : error ? "" : "No output yet"}
+        {outputPaneText({ isLoading, text, hasError: error != null })}
       </DetailContent>
     </div>
   );
diff --git a/src/browser/components/InstructionsTab/AdditionalSystemContextScratchpad.tsx b/src/browser/components/InstructionsTab/AdditionalSystemContextScratchpad.tsx
index 000d8daa0ed..243adb0de1b 100644
--- a/src/browser/components/InstructionsTab/AdditionalSystemContextScratchpad.tsx
+++ b/src/browser/components/InstructionsTab/AdditionalSystemContextScratchpad.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { ArrowUpRight, BookOpen } from "lucide-react";
 
 import { ChatInputDecoration } from "@/browser/components/ChatPane/ChatInputDecoration";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import {
   type AdditionalSystemContextSnapshot,
   getAdditionalSystemContextFocusGeneration,
@@ -14,6 +14,7 @@ import {
   useAdditionalSystemContextSnapshot,
 } from "@/browser/utils/additionalSystemContextStore";
 import { focusInstructionsTab } from "@/browser/utils/instructionsTabFocus";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import { cn } from "@/common/lib/utils";
 import { getErrorMessage } from "@/common/utils/errors";
 
@@ -40,6 +41,11 @@ interface ScratchpadState {
   content: string;
   enabled: boolean;
   loading: boolean;
+  /**
+   * Editing is off while the text loads, and while there is no live connection to save to (the
+   * editor keeps showing the text).
+   */
+  disabled: boolean;
   /** True once the save has been in flight longer than the indicator delay. */
   savingVisible: boolean;
   error: string | null;
@@ -47,46 +53,40 @@ interface ScratchpadState {
   setEnabled: (enabled: boolean) => void;
 }
 
-export function useChatInstructions(workspaceId: string): ScratchpadState {
+/**
+ * Loads the workspace's instructions into the store; returns whether the first load is pending.
+ *
+ * A re-run for the shown workspace (a new API client after a reconnect) keeps the editor as it
+ * is: it does not flash "Loading…" or take focus from the textarea. A local edit the backend has
+ * not settled (`dirtyRef`) is not replaced by the load.
+ */
+function useChatInstructionsLoad(
+  workspaceId: string,
+  dirtyRef: { current: boolean },
+  setError: (error: string | null) => void
+): boolean {
   const { api } = useAPI();
-  const snapshot = useAdditionalSystemContextSnapshot(workspaceId);
   const [loading, setLoading] = useState(true);
-  const [savingVisible, setSavingVisible] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const dirtyRef = useRef(false);
-  const mountedRef = useRef(true);
-  const savingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const clearSavingTimer = () => {
-    if (savingTimerRef.current != null) {
-      clearTimeout(savingTimerRef.current);
-      savingTimerRef.current = null;
-    }
-  };
-
-  useEffect(() => {
-    mountedRef.current = true;
-    return () => {
-      mountedRef.current = false;
-      clearSavingTimer();
-    };
-  }, []);
+  // The workspace whose instructions the editor shows (loaded, or failed to load).
+  const loadedWorkspaceIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    dirtyRef.current = false;
-    setLoading(true);
-    setSavingVisible(false);
-    clearSavingTimer();
+    if (loadedWorkspaceIdRef.current !== workspaceId) {
+      loadedWorkspaceIdRef.current = null;
+      dirtyRef.current = false;
+      setLoading(true);
+    }
     setError(null);
 
     if (!api) return;
 
     const loadVersion = getAdditionalSystemContextVersion(workspaceId);
+    // Set by the cleanup, which also runs on unmount.
     let cancelled = false;
     api.workspace
       .getAdditionalSystemContext({ workspaceId })
       .then((result) => {
-        if (cancelled || !mountedRef.current) return;
+        if (cancelled) return;
         if (!dirtyRef.current && getAdditionalSystemContextVersion(workspaceId) === loadVersion) {
           updateAdditionalSystemContextSnapshot(workspaceId, {
             content: result.content,
@@ -94,23 +94,64 @@ export function useChatInstructions(workspaceId: string): ScratchpadState {
           });
         }
         setLoading(false);
+        loadedWorkspaceIdRef.current = workspaceId;
       })
       .catch((err) => {
-        if (cancelled || !mountedRef.current) return;
+        // A lost connection is not a load error: keep the editor as it is for the next client.
+        if (cancelled || isConnectionLostError(err)) return;
         setError(getErrorMessage(err));
         setLoading(false);
+        loadedWorkspaceIdRef.current = workspaceId;
       });
 
     return () => {
       cancelled = true;
     };
-  }, [api, workspaceId]);
+  }, [api, workspaceId, dirtyRef, setError]);
+
+  return loading;
+}
+
+export function useChatInstructions(workspaceId: string): ScratchpadState {
+  // Saves need a live connection. While Xum reconnects the editor keeps showing the text but is
+  // read-only, so no edit waits for a later client.
+  const liveApi = useLiveAPI();
+  const snapshot = useAdditionalSystemContextSnapshot(workspaceId);
+  const [savingVisible, setSavingVisible] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  // An edit the backend has not settled yet: a load must not replace it. A failed save settles
+  // it too, so a later reload shows what the backend stored.
+  const dirtyRef = useRef(false);
+  const mountedRef = useRef(true);
+  const savingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const loading = useChatInstructionsLoad(workspaceId, dirtyRef, setError);
+
+  const clearSavingTimer = () => {
+    if (savingTimerRef.current != null) {
+      clearTimeout(savingTimerRef.current);
+      savingTimerRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      clearSavingTimer();
+    };
+  }, []);
+
+  // Another workspace starts without the previous one's "Saving…".
+  useEffect(() => {
+    setSavingVisible(false);
+    clearSavingTimer();
+  }, [workspaceId]);
 
   const queue = useCallback(
     (next: AdditionalSystemContextSnapshot) => {
+      if (!liveApi) return;
       dirtyRef.current = true;
       updateAdditionalSystemContextSnapshot(workspaceId, next);
-      if (!api) return;
       setError(null);
       // Only show the "Saving…" message if the save takes more than a beat —
       // sub-second writes shouldn't flicker the UI on every keystroke.
@@ -119,19 +160,20 @@ export function useChatInstructions(workspaceId: string): ScratchpadState {
         if (mountedRef.current) setSavingVisible(true);
         savingTimerRef.current = null;
       }, SAVING_INDICATOR_DELAY_MS);
-      queueAdditionalSystemContextSave(api, workspaceId, next, {
+      queueAdditionalSystemContextSave(liveApi, workspaceId, next, {
         onError: (err) => {
           if (!mountedRef.current) return;
           setError(getErrorMessage(err));
         },
         onIdle: () => {
+          dirtyRef.current = false;
           if (!mountedRef.current) return;
           clearSavingTimer();
           setSavingVisible(false);
         },
       });
     },
-    [api, workspaceId]
+    [liveApi, workspaceId]
   );
 
   const setContent = useCallback(
@@ -152,6 +194,7 @@ export function useChatInstructions(workspaceId: string): ScratchpadState {
     content: snapshot.content,
     enabled: snapshot.enabled,
     loading,
+    disabled: loading || liveApi == null,
     savingVisible,
     error,
     setContent,
@@ -229,7 +272,7 @@ export function ChatInstructionsEditor(props: ChatInstructionsEditorProps) {
           props.textareaClassName
         )}
         aria-label={`${CHAT_INSTRUCTIONS_LABEL} editor`}
-        disabled={state.loading}
+        disabled={state.disabled}
       />
       <div className="text-muted flex min-h-4 items-center justify-between gap-2 text-[10px]">
         <label className="flex cursor-pointer items-center gap-1.5 select-none">
@@ -237,7 +280,7 @@ export function ChatInstructionsEditor(props: ChatInstructionsEditorProps) {
             type="checkbox"
             className="accent-[var(--color-accent)]"
             checked={state.enabled}
-            disabled={state.loading}
+            disabled={state.disabled}
             onChange={(event) => state.setEnabled(event.currentTarget.checked)}
             aria-label="Enable Chat Instructions"
           />
diff --git a/src/browser/components/InstructionsTab/InstructionsTab.tsx b/src/browser/components/InstructionsTab/InstructionsTab.tsx
index 41d621c0289..1b7347922ca 100644
--- a/src/browser/components/InstructionsTab/InstructionsTab.tsx
+++ b/src/browser/components/InstructionsTab/InstructionsTab.tsx
@@ -80,7 +80,9 @@ function InstructionsTabImpl(props: InstructionsTabProps) {
       <div className="min-h-0 flex-1 overflow-y-auto">
         <ChatInstructionsPanel workspaceId={props.workspaceId} />
         {error && <ErrorBanner message={error} />}
-        {!error && !loading && data?.files.length === 0 && <EmptyState />}
+        {/* Not gated on `loading`: a reload (refresh, or a new API client after a reconnect)
+            keeps the empty state on screen, as it keeps a file list. */}
+        {!error && data?.files.length === 0 && <EmptyState />}
         {data && data.files.length > 0 && <InstructionsBody data={data} />}
         {loading && !data && <LoadingState />}
       </div>
diff --git a/src/browser/components/ProjectMCPOverview/ProjectMCPOverview.tsx b/src/browser/components/ProjectMCPOverview/ProjectMCPOverview.tsx
index d0caa54cf3f..4d7d15ded9d 100644
--- a/src/browser/components/ProjectMCPOverview/ProjectMCPOverview.tsx
+++ b/src/browser/components/ProjectMCPOverview/ProjectMCPOverview.tsx
@@ -6,11 +6,34 @@ import { useSettings } from "@/browser/contexts/SettingsContext";
 import { Button } from "@/browser/components/Button/Button";
 import { getMCPServersKey } from "@/common/constants/storage";
 import { readPersistedState, updatePersistedState } from "@/browser/hooks/usePersistedState";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 
 interface ProjectMCPOverviewProps {
   projectPath: string;
 }
 
+interface ShownServers {
+  projectPath: string;
+  servers: Record<string, MCPServerInfo>;
+}
+
+/** Reads the cached list from localStorage (no flash before the first load). */
+function cachedServers(projectPath: string): ShownServers {
+  return {
+    projectPath,
+    servers: readPersistedState<Record<string, MCPServerInfo>>(getMCPServersKey(projectPath), {}),
+  };
+}
+
+/**
+ * The servers to show for `projectPath`. ProjectPage keeps this card mounted across project
+ * navigation, and a load cut off by a lost connection keeps the shown list: never show another
+ * project's list under this one, show this project's cached list until its own load lands.
+ */
+function serversFor(shown: ShownServers, projectPath: string): Record<string, MCPServerInfo> {
+  return shown.projectPath === projectPath ? shown.servers : cachedServers(projectPath).servers;
+}
+
 export const ProjectMCPOverview: React.FC<ProjectMCPOverviewProps> = (props) => {
   const projectPath = props.projectPath;
   const { api } = useAPI();
@@ -18,10 +41,8 @@ export const ProjectMCPOverview: React.FC<ProjectMCPOverviewProps> = (props) =>
 
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
-  // Initialize from localStorage cache to avoid flash
-  const [servers, setServers] = React.useState<Record<string, MCPServerInfo>>(() =>
-    readPersistedState<Record<string, MCPServerInfo>>(getMCPServersKey(projectPath), {})
-  );
+  const [shown, setShown] = React.useState<ShownServers>(() => cachedServers(projectPath));
+  const servers = serversFor(shown, projectPath);
 
   React.useEffect(() => {
     if (!api || settings.isOpen) return;
@@ -33,20 +54,19 @@ export const ProjectMCPOverview: React.FC<ProjectMCPOverviewProps> = (props) =>
       .then((result) => {
         if (cancelled) return;
         const newServers = result ?? {};
-        setServers(newServers);
+        setShown({ projectPath, servers: newServers });
         // Cache for next load
         updatePersistedState(getMCPServersKey(projectPath), newServers);
         setError(null);
+        setLoading(false);
       })
       .catch((err) => {
-        if (cancelled) return;
-        setServers({});
+        // A lost connection is not a load error: keep the shown servers (and the spinner) for
+        // the next client, which loads them again.
+        if (cancelled || isConnectionLostError(err)) return;
+        setShown({ projectPath, servers: {} });
         setError(err instanceof Error ? err.message : "Failed to load MCP servers");
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setLoading(false);
-        }
+        setLoading(false);
       });
 
     return () => {
diff --git a/src/browser/features/RightSidebar/BrowserTab/BrowserTab.reconnect.test.tsx b/src/browser/features/RightSidebar/BrowserTab/BrowserTab.reconnect.test.tsx
new file mode 100644
index 00000000000..e4db35a45b3
--- /dev/null
+++ b/src/browser/features/RightSidebar/BrowserTab/BrowserTab.reconnect.test.tsx
@@ -0,0 +1,176 @@
+// Bootstrap Happy DOM before react-dom evaluates (see MemoryTab.test.tsx).
+import "../../../../../tests/ui/dom";
+
+import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { installDom } from "../../../../../tests/ui/dom";
+import { restoreModulesAfterSuite } from "../../../../../tests/ui/moduleMocks";
+import type { APIClient } from "@/browser/contexts/API";
+import {
+  createConnectionHarness,
+  GAP_MODES,
+  type ConnectionHarness,
+} from "@/browser/contexts/connection.testHarness";
+import * as RealBrowserBridgeConnectionModule from "@/browser/features/RightSidebar/BrowserTab/useBrowserBridgeConnection";
+import type { TestApiOverrides } from "@/browser/testUtils";
+import type { BrowserPageTab } from "./browserBridgeTypes";
+
+// The live bridge opens its own socket; this suite is about the API client, so stub the bridge
+// (as BrowserTab.test.tsx does) and restore the real module after the suite.
+restoreModulesAfterSuite([
+  [
+    "@/browser/features/RightSidebar/BrowserTab/useBrowserBridgeConnection",
+    { ...RealBrowserBridgeConnectionModule },
+  ],
+]);
+void mock.module("@/browser/features/RightSidebar/BrowserTab/useBrowserBridgeConnection", () => ({
+  useBrowserBridgeConnection: () => ({
+    session: null,
+    connect: () => undefined,
+    disconnect: () => undefined,
+    sendInput: () => undefined,
+    setPendingUrl: () => undefined,
+  }),
+}));
+
+import { BrowserTab } from "./BrowserTab";
+
+/*
+ * A dropped connection must not empty the browser tab: the discovered session and its page-tab
+ * strip stay, a listing cut off by the drop shows no error, and the next client's listing
+ * replaces them.
+ */
+
+/** What the server's listings answer; a test swaps them (or holds them) before a connect. */
+let answerSessions: () => Promise<unknown>;
+let answerTabs: () => Promise<unknown>;
+
+function pageTab(tabId: string, title: string, active: boolean): BrowserPageTab {
+  return { tabId, label: null, title, url: `https://${tabId}.example.com/`, active, type: "page" };
+}
+
+function serverOverrides(): TestApiOverrides<APIClient> {
+  return {
+    browser: {
+      listSessions: () => answerSessions(),
+      listTabs: () => answerTabs(),
+    },
+  } as unknown as TestApiOverrides<APIClient>;
+}
+
+let harness: ConnectionHarness;
+
+function Wrapper(props: { children: ReactNode }) {
+  const Connection = harness.Wrapper;
+  return <Connection>{props.children}</Connection>;
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  });
+}
+
+async function drop() {
+  await harness.drop();
+  await flush();
+}
+
+async function reconnect() {
+  harness.reconnect();
+  await flush();
+}
+
+/** Never answers: the listing stays in flight until a drop cuts it off. */
+function pending(): Promise<unknown> {
+  return new Promise(() => undefined);
+}
+
+describe.each([...GAP_MODES])("BrowserTab across a dropped connection (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    window.localStorage.clear();
+    harness = createConnectionHarness(mode, serverOverrides);
+    answerSessions = () =>
+      Promise.resolve({
+        sessions: [{ sessionName: "alpha", status: "attachable" }],
+        otherSessions: [],
+      });
+    answerTabs = () =>
+      Promise.resolve({
+        tabs: [pageTab("t1", "First tab", true), pageTab("t2", "Second tab", false)],
+        error: undefined,
+      });
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("keeps the page-tab strip through listings the drop cut off", async () => {
+    const view = render(<BrowserTab workspaceId="ws-1" projectPath="/project" />, {
+      wrapper: Wrapper,
+    });
+    await view.findByTestId("browser-page-tab-t2");
+
+    await drop();
+    expect(view.queryByTestId("browser-page-tab-t2")).not.toBeNull();
+
+    // The new client's listings are still in flight when a second drop cuts them off.
+    answerSessions = pending;
+    answerTabs = pending;
+    await reconnect();
+    await drop();
+    expect(view.queryByTestId("browser-page-tab-t2")).not.toBeNull();
+    expect(view.queryByText(/Not connected to the Xum server/)).toBeNull();
+
+    answerSessions = () =>
+      Promise.resolve({
+        sessions: [{ sessionName: "alpha", status: "attachable" }],
+        otherSessions: [],
+      });
+    answerTabs = () =>
+      Promise.resolve({
+        tabs: [pageTab("t1", "First tab", true), pageTab("t3", "Third tab", false)],
+        error: undefined,
+      });
+    await reconnect();
+    await view.findByTestId("browser-page-tab-t3");
+    expect(view.queryByTestId("browser-page-tab-t2")).toBeNull();
+  });
+
+  test("picking another session while reconnecting clears the previous session's page tabs", async () => {
+    answerSessions = () =>
+      Promise.resolve({
+        sessions: [
+          { sessionName: "alpha", status: "attachable" },
+          { sessionName: "beta", status: "attachable" },
+        ],
+        otherSessions: [],
+      });
+    const view = render(<BrowserTab workspaceId="ws-1" projectPath="/project" />, {
+      wrapper: Wrapper,
+    });
+    await view.findByTestId("browser-page-tab-t2");
+
+    await drop();
+    fireEvent.click(view.getByText("alpha"));
+    fireEvent.click(view.getByTestId("browser-session-beta"));
+    await flush();
+    expect(view.queryByTestId("browser-page-tab-t2")).toBeNull();
+
+    answerTabs = () =>
+      Promise.resolve({
+        tabs: [pageTab("b1", "Beta one", true), pageTab("b2", "Beta two", false)],
+        error: undefined,
+      });
+    await reconnect();
+    await view.findByTestId("browser-page-tab-b2");
+    expect(view.queryByTestId("browser-page-tab-t2")).toBeNull();
+  });
+});
diff --git a/src/browser/features/RightSidebar/BrowserTab/BrowserTab.tsx b/src/browser/features/RightSidebar/BrowserTab/BrowserTab.tsx
index b5778154f02..03c1bf833bb 100644
--- a/src/browser/features/RightSidebar/BrowserTab/BrowserTab.tsx
+++ b/src/browser/features/RightSidebar/BrowserTab/BrowserTab.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent }
 import { Check, ChevronDown, Globe2, Loader2, Play, TriangleAlert } from "lucide-react";
 import { useAPI } from "@/browser/contexts/API";
 import { stopKeyboardPropagation } from "@/browser/utils/events";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import { getBrowserSelectedSessionKey } from "@/common/constants/storage";
 import { cn } from "@/common/lib/utils";
@@ -121,6 +122,10 @@ function matchesBrowserPageTabRef(tab: BrowserPageTab, tabRef: string | null): b
   return tabRef != null && tab.tabId === tabRef;
 }
 
+function errorMessageOr(error: unknown, fallback: string): string {
+  return error instanceof Error ? error.message : fallback;
+}
+
 function areBrowserPageTabsEqual(first: BrowserPageTab[], second: BrowserPageTab[]): boolean {
   return JSON.stringify(first) === JSON.stringify(second);
 }
@@ -186,9 +191,8 @@ export function BrowserTab(props: BrowserTabProps) {
 
   useEffect(() => {
     if (api == null) {
+      // Keep the discovered sessions through a reconnect: the new client re-lists them.
       setDiscoveryError("Browser API client is unavailable.");
-      setDiscoveredSessions([]);
-      setOtherDiscoveredSessions([]);
       return;
     }
 
@@ -216,15 +220,14 @@ export function BrowserTab(props: BrowserTabProps) {
           chooseSelectedSession(currentSessionName, result.sessions)
         );
       } catch (error) {
-        if (cancelled) {
+        // A lost connection is not a discovery failure; the next client re-lists the sessions.
+        if (cancelled || isConnectionLostError(error)) {
           return;
         }
 
         // Preserve the last known discovery result so transient refresh failures do not
         // tear down an otherwise healthy browser bridge.
-        setDiscoveryError(
-          error instanceof Error ? error.message : "Failed to discover browser sessions."
-        );
+        setDiscoveryError(errorMessageOr(error, "Failed to discover browser sessions."));
       } finally {
         discoveryRefreshInFlightRef.current = false;
       }
@@ -243,29 +246,33 @@ export function BrowserTab(props: BrowserTabProps) {
   }, [api, props.workspaceId, setSelectedCurrentSessionName]);
 
   useEffect(() => {
-    if (
-      api == null ||
-      selectedSessionName == null ||
-      selectedDiscoveredSessionStatus !== "attachable"
-    ) {
-      tabRefreshInFlightSessionNameRef.current = null;
-      pageTabsSessionNameRef.current = null;
+    // Another session never shows the previous session's tabs, even without a client: picking a
+    // kept discovered session while Xum reconnects clears the strip at once.
+    if (pageTabsSessionNameRef.current !== selectedSessionName) {
+      pageTabsSessionNameRef.current = selectedSessionName;
       setPageTabs((currentTabs) => (currentTabs.length === 0 ? currentTabs : []));
       setPageTabsError(null);
       pendingTabIdRef.current = null;
       setPendingTabId(null);
+    }
+    // Without a client (a reconnect), keep the tab strip of the selected session as it is: the
+    // new client re-lists its tabs.
+    if (api == null) {
+      tabRefreshInFlightSessionNameRef.current = null;
       return;
     }
-
-    let cancelled = false;
-    if (pageTabsSessionNameRef.current !== selectedSessionName) {
-      pageTabsSessionNameRef.current = selectedSessionName;
+    if (selectedSessionName == null || selectedDiscoveredSessionStatus !== "attachable") {
+      tabRefreshInFlightSessionNameRef.current = null;
+      pageTabsSessionNameRef.current = null;
       setPageTabs((currentTabs) => (currentTabs.length === 0 ? currentTabs : []));
       setPageTabsError(null);
       pendingTabIdRef.current = null;
       setPendingTabId(null);
+      return;
     }
 
+    let cancelled = false;
+
     const refreshTabs = async (): Promise<void> => {
       if (tabRefreshInFlightSessionNameRef.current === selectedSessionName) {
         return;
@@ -298,14 +305,12 @@ export function BrowserTab(props: BrowserTabProps) {
         );
         setPageTabsError(null);
       } catch (error) {
-        if (cancelled) {
+        if (cancelled || isConnectionLostError(error)) {
           return;
         }
 
         setPageTabsError(
-          error instanceof Error
-            ? error.message
-            : `Failed to list browser tabs for session "${selectedSessionName}".`
+          errorMessageOr(error, `Failed to list browser tabs for session "${selectedSessionName}".`)
         );
       } finally {
         if (tabRefreshInFlightSessionNameRef.current === selectedSessionName) {
diff --git a/src/browser/features/RightSidebar/DevToolsTab/DevToolsRunCard.tsx b/src/browser/features/RightSidebar/DevToolsTab/DevToolsRunCard.tsx
index 9d9397534de..15b649f7483 100644
--- a/src/browser/features/RightSidebar/DevToolsTab/DevToolsRunCard.tsx
+++ b/src/browser/features/RightSidebar/DevToolsTab/DevToolsRunCard.tsx
@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { AlertCircle, ChevronRight, Loader2 } from "lucide-react";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, type APIClient } from "@/browser/contexts/API";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import { cn } from "@/common/lib/utils";
 import type { DevToolsRunSummary, DevToolsStep } from "@/common/types/devtools";
 import { formatDuration } from "@/common/utils/formatDuration";
@@ -12,44 +13,69 @@ interface DevToolsRunCardProps {
   liveSteps?: DevToolsStep[];
 }
 
-export function DevToolsRunCard(props: DevToolsRunCardProps) {
-  const { api } = useAPI();
+type RunDetailRead =
+  | { status: "ok"; steps: DevToolsStep[] }
+  | { status: "error"; error: string }
+  /** Cut off by a lost connection (ConnectionLostError): not an error, the next client retries. */
+  | { status: "lost" };
 
-  const [expanded, setExpanded] = useState(false);
+async function readRunDetail(
+  api: APIClient,
+  workspaceId: string,
+  runId: string
+): Promise<RunDetailRead> {
+  try {
+    const result = await api.devtools.getRunDetail({ workspaceId, runId });
+    return { status: "ok", steps: result?.steps ?? [] };
+  } catch (error: unknown) {
+    if (isConnectionLostError(error)) return { status: "lost" };
+    return {
+      status: "error",
+      error: error instanceof Error ? error.message : "Failed to load run detail",
+    };
+  }
+}
+
+/**
+ * The run's steps, read while the card is expanded and has none yet. A read cut off by a lost
+ * connection keeps the spinner, and the next client (a new `api`: the runs list stays mounted
+ * across a reconnect) reads it again instead of the card keeping a connection error.
+ */
+function useRunDetail(expanded: boolean, workspaceId: string, runId: string) {
+  const { api } = useAPI();
   const [steps, setSteps] = useState<DevToolsStep[] | null>(null);
-  const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const displaySteps = mergeDisplaySteps(steps, props.liveSteps);
-
-  const handleToggle = () => {
-    const nextExpanded = !expanded;
-    setExpanded(nextExpanded);
-
-    if (!nextExpanded || steps !== null || !api) {
+  const needsDetail = expanded && steps === null;
+  useEffect(() => {
+    if (!needsDetail || !api) {
       return;
     }
-
-    setLoading(true);
+    let cancelled = false;
     setError(null);
-    api.devtools
-      .getRunDetail({
-        workspaceId: props.workspaceId,
-        runId: props.run.id,
-      })
-      .then((result) => {
-        if (!result) {
-          setSteps([]);
-          return;
-        }
-        setSteps(result.steps);
-      })
-      .catch((detailError: unknown) => {
-        setError(detailError instanceof Error ? detailError.message : "Failed to load run detail");
-      })
-      .finally(() => {
-        setLoading(false);
-      });
+    void readRunDetail(api, workspaceId, runId).then((read) => {
+      if (cancelled || read.status === "lost") return;
+      if (read.status === "ok") {
+        setSteps(read.steps);
+      } else {
+        setError(read.error);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, needsDetail, workspaceId, runId]);
+
+  return { steps, error };
+}
+
+export function DevToolsRunCard(props: DevToolsRunCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const { steps, error } = useRunDetail(expanded, props.workspaceId, props.run.id);
+  const displaySteps = mergeDisplaySteps(steps, props.liveSteps);
+
+  const handleToggle = () => {
+    setExpanded(!expanded);
   };
 
   return (
@@ -82,7 +108,9 @@ export function DevToolsRunCard(props: DevToolsRunCardProps) {
 
       {expanded && (
         <div className="border-border-light min-w-0 border-t px-2 py-1.5">
-          {loading && steps === null ? (
+          {/* No steps and no error: the detail is loading, or waits for a client (it loads
+              once Xum reconnects), so this never claims "No steps recorded" too early. */}
+          {steps === null && error === null ? (
             <div className="flex justify-center py-2">
               <Loader2 className="text-muted h-4 w-4 animate-spin" />
             </div>
diff --git a/src/browser/features/RightSidebar/DevToolsTab/DevToolsTab.tsx b/src/browser/features/RightSidebar/DevToolsTab/DevToolsTab.tsx
index 5d54b7d6eb3..a09f4cbdf2e 100644
--- a/src/browser/features/RightSidebar/DevToolsTab/DevToolsTab.tsx
+++ b/src/browser/features/RightSidebar/DevToolsTab/DevToolsTab.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Loader2, Trash2 } from "lucide-react";
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 import { DevToolsRunCard } from "./DevToolsRunCard";
 import { useDevToolsSubscription } from "./useDevToolsSubscription";
 
@@ -9,23 +9,7 @@ interface DevToolsTabProps {
 }
 
 export function DevToolsTab(props: DevToolsTabProps) {
-  const { api } = useAPI();
   const { runs, stepsByRun, error } = useDevToolsSubscription(props.workspaceId);
-  const [clearing, setClearing] = useState(false);
-
-  const handleClear = () => {
-    if (!api || clearing) return;
-
-    setClearing(true);
-    void api.devtools
-      .clear({ workspaceId: props.workspaceId })
-      .catch((clearError: unknown) => {
-        console.warn("Failed to clear debug logs:", clearError);
-      })
-      .finally(() => {
-        setClearing(false);
-      });
-  };
 
   if (error) {
     return (
@@ -41,21 +25,7 @@ export function DevToolsTab(props: DevToolsTabProps) {
         <h3 className="text-foreground text-xs font-semibold tracking-wide uppercase">
           Debug Logs
         </h3>
-        {runs.length > 0 && (
-          <button
-            type="button"
-            onClick={handleClear}
-            disabled={clearing}
-            className="text-muted hover:text-foreground rounded p-1 transition-colors disabled:opacity-50"
-            aria-label="Clear debug logs"
-          >
-            {clearing ? (
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-            ) : (
-              <Trash2 className="h-3.5 w-3.5" />
-            )}
-          </button>
-        )}
+        {runs.length > 0 && <ClearLogsButton workspaceId={props.workspaceId} />}
       </div>
 
       <div className="min-w-0 flex-1 overflow-y-auto p-2">
@@ -83,3 +53,39 @@ export function DevToolsTab(props: DevToolsTabProps) {
     </div>
   );
 }
+
+/** Clears the debug logs. It needs a live connection: while Xum reconnects it is disabled. */
+function ClearLogsButton(props: { workspaceId: string }) {
+  const api = useLiveAPI();
+  const [clearing, setClearing] = useState(false);
+
+  const handleClear = () => {
+    if (!api || clearing) return;
+
+    setClearing(true);
+    void api.devtools
+      .clear({ workspaceId: props.workspaceId })
+      .catch((clearError: unknown) => {
+        console.warn("Failed to clear debug logs:", clearError);
+      })
+      .finally(() => {
+        setClearing(false);
+      });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClear}
+      disabled={clearing || api == null}
+      className="text-muted hover:text-foreground rounded p-1 transition-colors disabled:opacity-50"
+      aria-label="Clear debug logs"
+    >
+      {clearing ? (
+        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+      ) : (
+        <Trash2 className="h-3.5 w-3.5" />
+      )}
+    </button>
+  );
+}
diff --git a/src/browser/features/RightSidebar/DevToolsTab/useDevToolsSubscription.ts b/src/browser/features/RightSidebar/DevToolsTab/useDevToolsSubscription.ts
index df832d18f7a..5db1bdd85fe 100644
--- a/src/browser/features/RightSidebar/DevToolsTab/useDevToolsSubscription.ts
+++ b/src/browser/features/RightSidebar/DevToolsTab/useDevToolsSubscription.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAPI } from "@/browser/contexts/API";
 import { isAbortError } from "@/browser/utils/isAbortError";
 import type { DevToolsEvent, DevToolsRunSummary, DevToolsStep } from "@/common/types/devtools";
@@ -9,16 +9,21 @@ export function useDevToolsSubscription(workspaceId: string) {
   const [runs, setRuns] = useState<DevToolsRunSummary[]>([]);
   const [stepsByRun, setStepsByRun] = useState<Map<string, DevToolsStep[]>>(new Map());
   const [error, setError] = useState<string | null>(null);
+  // The workspace whose runs are shown. Only another workspace clears them: a re-run for the same
+  // one (no client during a reconnect, then a new client) keeps them until the new snapshot.
+  const shownWorkspaceIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    if (!api) {
+    if (shownWorkspaceIdRef.current !== workspaceId) {
+      shownWorkspaceIdRef.current = workspaceId;
       setRuns([]);
       setStepsByRun(new Map());
+    }
+
+    if (!api) {
       return;
     }
 
-    setRuns([]);
-    setStepsByRun(new Map());
     setError(null);
 
     const controller = new AbortController();
@@ -43,20 +48,9 @@ export function useDevToolsSubscription(workspaceId: string) {
             setRuns(event.runs);
             setStepsByRun(new Map());
             break;
-          case "run-created": {
-            setRuns((previousRuns) => {
-              // De-duplicate if the run is already in state (e.g., from initial snapshot).
-              const existingRunIndex = previousRuns.findIndex((run) => run.id === event.run.id);
-              if (existingRunIndex >= 0) {
-                const updatedRuns = [...previousRuns];
-                updatedRuns[existingRunIndex] = event.run;
-                return updatedRuns;
-              }
-
-              return [event.run, ...previousRuns];
-            });
+          case "run-created":
+            setRuns((previousRuns) => upsertRun(previousRuns, event.run));
             break;
-          }
           case "run-updated":
             setRuns((previousRuns) =>
               previousRuns.map((run) => (run.id === event.run.id ? event.run : run))
@@ -106,6 +100,21 @@ export function useDevToolsSubscription(workspaceId: string) {
   return { runs, stepsByRun, error };
 }
 
+function upsertRun(
+  previousRuns: DevToolsRunSummary[],
+  incomingRun: DevToolsRunSummary
+): DevToolsRunSummary[] {
+  // De-duplicate if the run is already in state (e.g., from initial snapshot).
+  const existingRunIndex = previousRuns.findIndex((run) => run.id === incomingRun.id);
+  if (existingRunIndex >= 0) {
+    const updatedRuns = [...previousRuns];
+    updatedRuns[existingRunIndex] = incomingRun;
+    return updatedRuns;
+  }
+
+  return [incomingRun, ...previousRuns];
+}
+
 function upsertStep(
   previousStepsByRun: Map<string, DevToolsStep[]>,
   incomingStep: DevToolsStep
diff --git a/src/browser/features/RightSidebar/GoalBoardSections.tsx b/src/browser/features/RightSidebar/GoalBoardSections.tsx
index db9dfcff262..620a6d6c19a 100644
--- a/src/browser/features/RightSidebar/GoalBoardSections.tsx
+++ b/src/browser/features/RightSidebar/GoalBoardSections.tsx
@@ -27,7 +27,8 @@ import {
 } from "lucide-react";
 import { useRef, useState } from "react";
 
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI, type APIClient } from "@/browser/contexts/API";
+import { ConnectionLostError } from "@/browser/contexts/connectionLink";
 import { useGoalDefaults } from "@/browser/utils/goals/useGoalDefaults";
 import { loadGoalDefaults, resolveGoalSetIntent } from "@/browser/utils/goals/resolveGoalSetIntent";
 import { cn } from "@/common/lib/utils";
@@ -57,6 +58,18 @@ import {
  * so clicking the row content doesn't fire a drag; `PointerSensor`'s
  * `distance: 6` activation keeps normal clicks intact.
  */
+/**
+ * The live client for a board change. While Xum reconnects the board stays on screen, so a click
+ * must not silently do nothing (or close an editor as if it saved): without a live client this
+ * throws, and each handler shows the error like any failed change.
+ */
+function liveClientFor(api: APIClient | null): APIClient {
+  if (api == null) {
+    throw new ConnectionLostError();
+  }
+  return api;
+}
+
 interface GoalBoardSectionsProps {
   workspaceId: string;
   board: GoalBoardSnapshot;
@@ -178,7 +191,7 @@ interface UpcomingSectionProps {
 }
 
 function UpcomingSection(props: UpcomingSectionProps) {
-  const { api } = useAPI();
+  const api = useLiveAPI();
   // Surfaces any backend rejection so users see why a click had no
   // effect. Cleared on next mutation. Backend errors arrive with the
   // server-side `error.message` intact via `ORPCError("BAD_REQUEST")`
@@ -199,14 +212,14 @@ function UpcomingSection(props: UpcomingSectionProps) {
 
   const handleDragEnd = async (event: DragEndEvent) => {
     const { active, over } = event;
-    if (!api || !over || active.id === over.id) return;
+    if (!over || active.id === over.id) return;
     const ids = props.entries.map((e) => e.goal.goalId);
     const fromIndex = ids.indexOf(String(active.id));
     const toIndex = ids.indexOf(String(over.id));
     if (fromIndex === -1 || toIndex === -1) return;
     const next = arrayMove(ids, fromIndex, toIndex);
     try {
-      await api.workspace.reorderUpcomingGoals({
+      await liveClientFor(api).workspace.reorderUpcomingGoals({
         workspaceId: props.workspaceId,
         upcomingIds: next,
       });
@@ -218,9 +231,11 @@ function UpcomingSection(props: UpcomingSectionProps) {
   };
 
   const promote = async (goalId: string) => {
-    if (!api) return;
     try {
-      await api.workspace.promoteUpcomingGoal({ workspaceId: props.workspaceId, goalId });
+      await liveClientFor(api).workspace.promoteUpcomingGoal({
+        workspaceId: props.workspaceId,
+        goalId,
+      });
       clearError();
       props.onMutated();
     } catch (caught) {
@@ -229,9 +244,8 @@ function UpcomingSection(props: UpcomingSectionProps) {
   };
 
   const archive = async (goalId: string) => {
-    if (!api) return;
     try {
-      await api.workspace.archiveGoal({ workspaceId: props.workspaceId, goalId });
+      await liveClientFor(api).workspace.archiveGoal({ workspaceId: props.workspaceId, goalId });
       clearError();
       props.onMutated();
     } catch (caught) {
@@ -240,9 +254,8 @@ function UpcomingSection(props: UpcomingSectionProps) {
   };
 
   const update = async (goalId: string, patch: UpcomingGoalPatch) => {
-    if (!api) return;
     try {
-      await api.workspace.updateUpcomingGoal({
+      await liveClientFor(api).workspace.updateUpcomingGoal({
         workspaceId: props.workspaceId,
         goalId,
         objective: patch.objective,
@@ -521,15 +534,14 @@ interface CompletedSectionProps {
 }
 
 function CompletedSection(props: CompletedSectionProps) {
-  const { api } = useAPI();
+  const api = useLiveAPI();
   const [error, setError] = useState<string | null>(null);
 
   if (props.entries.length === 0) return null;
 
   const archive = async (goalId: string) => {
-    if (!api) return;
     try {
-      await api.workspace.archiveGoal({ workspaceId: props.workspaceId, goalId });
+      await liveClientFor(api).workspace.archiveGoal({ workspaceId: props.workspaceId, goalId });
       setError(null);
       props.onMutated();
     } catch (caught) {
@@ -575,14 +587,16 @@ interface ArchivedSectionProps {
 }
 
 function ArchivedSection(props: ArchivedSectionProps) {
-  const { api } = useAPI();
+  const api = useLiveAPI();
   const [error, setError] = useState<string | null>(null);
   if (props.entries.length === 0) return null;
 
   const revive = async (goalId: string) => {
-    if (!api) return;
     try {
-      await api.workspace.reviveArchivedGoal({ workspaceId: props.workspaceId, goalId });
+      await liveClientFor(api).workspace.reviveArchivedGoal({
+        workspaceId: props.workspaceId,
+        goalId,
+      });
       setError(null);
       props.onMutated();
     } catch (caught) {
@@ -624,7 +638,7 @@ interface UpcomingAdderProps {
 }
 
 function UpcomingAdder(props: UpcomingAdderProps) {
-  const { api } = useAPI();
+  const api = useLiveAPI();
   const { defaults } = useGoalDefaults(props.workspaceId);
   const [isOpen, setIsOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -641,7 +655,6 @@ function UpcomingAdder(props: UpcomingAdderProps) {
   };
 
   const submit = async () => {
-    if (!api) return;
     const objective = (objectiveRef.current?.value ?? "").trim();
     if (objective.length === 0) {
       setError("Goal objective is required.");
@@ -678,18 +691,19 @@ function UpcomingAdder(props: UpcomingAdderProps) {
     setIsSubmitting(true);
     setError(null);
     try {
+      const client = liveClientFor(api);
       // Load effective defaults at submit time so a quick submit before
       // the hook fetch resolves still persists the current workspace/global
       // limits. Fall back to the hook snapshot if the network read fails.
       let effective = defaults;
       try {
-        effective = await loadGoalDefaults(api, props.workspaceId);
+        effective = await loadGoalDefaults(client, props.workspaceId);
       } catch {
         // Keep `effective` at the hook value (which is itself a
         // best-effort snapshot or the canonical default).
       }
       const resolved = resolveGoalSetIntent({ objective, budgetCents, turnCap }, effective);
-      await api.workspace.addUpcomingGoal({
+      await client.workspace.addUpcomingGoal({
         workspaceId: props.workspaceId,
         objective: resolved.objective,
         budgetCents: resolved.budgetCents,
diff --git a/src/browser/features/RightSidebar/GoalDefaultsSection.tsx b/src/browser/features/RightSidebar/GoalDefaultsSection.tsx
index 3dd176884aa..28c857b5ede 100644
--- a/src/browser/features/RightSidebar/GoalDefaultsSection.tsx
+++ b/src/browser/features/RightSidebar/GoalDefaultsSection.tsx
@@ -3,9 +3,11 @@ import React from "react";
 import { useEffect, useRef, useState } from "react";
 
 import { Input } from "@/browser/components/Input/Input";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI, type APIClient } from "@/browser/contexts/API";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import { GoalDefaultsControls } from "@/browser/features/Settings/Sections/GoalsSection";
 import { cn } from "@/common/lib/utils";
+import { getErrorMessage } from "@/common/utils/errors";
 import type { WorkspaceGoalDefaultsOverride } from "@/browser/utils/goals/resolveGoalSetIntent";
 import { mergeGoalDefaults } from "@/browser/utils/goals/resolveGoalSetIntent";
 import { DEFAULT_GOAL_DEFAULTS, normalizeGoalDefaults, type GoalDefaults } from "@/constants/goals";
@@ -67,11 +69,73 @@ function parseTurnCapValue(value: string): number | null {
   return Number.isSafeInteger(parsed) && parsed > 0 ? parsed : null;
 }
 
-export function GoalDefaultsSection(props: GoalDefaultsSectionProps) {
+interface GoalOverrideWrite {
+  workspaceId: string;
+  override: WorkspaceGoalDefaultsOverride;
+  onSaved: (() => void) | undefined;
+  onFailed: (error: unknown) => void;
+}
+
+/**
+ * Serializes workspace-default writes. The backend setter reads → mutates → writes the full
+ * config record, so two writes in flight could land out of order — a slower first request could
+ * complete after a later edit and overwrite it on disk while the UI continues to show the latest
+ * optimistic state, silently reverting the user's edit on next refetch. Each write waits for the
+ * previous one.
+ */
+class GoalOverrideWriter {
+  private chain: Promise<void> = Promise.resolve();
+  private readonly writesByWorkspace = new Map<string, number>();
+
+  /**
+   * How many writes this workspace has had. A read that began before a write (a reload by a new
+   * client after a reconnect) must not show its older answer over the written value.
+   */
+  writeCount(workspaceId: string): number {
+    return this.writesByWorkspace.get(workspaceId) ?? 0;
+  }
+
+  write(api: APIClient, edit: GoalOverrideWrite): void {
+    this.writesByWorkspace.set(edit.workspaceId, this.writeCount(edit.workspaceId) + 1);
+    this.chain = this.chain.then(() =>
+      api.workspace.goalDefaults
+        .set({
+          workspaceId: edit.workspaceId,
+          defaultBudgetCents: edit.override.defaultBudgetCents,
+          defaultTurnCap: edit.override.defaultTurnCap,
+          alwaysRequireExplicitBudget: edit.override.alwaysRequireExplicitBudget,
+        })
+        // Notify parent so prefilled create-form inputs can re-read the effective defaults.
+        .then(() => edit.onSaved?.(), edit.onFailed)
+    );
+  }
+}
+
+type OverrideRead =
+  | { status: "ok"; override: WorkspaceGoalDefaultsOverride | null }
+  | { status: "failed" }
+  /** Cut off by a lost connection (ConnectionLostError): the next client reads it again. */
+  | { status: "lost" };
+
+async function readOverride(api: APIClient, workspaceId: string): Promise<OverrideRead> {
+  try {
+    return {
+      status: "ok",
+      override: (await api.workspace.goalDefaults.get({ workspaceId })) ?? null,
+    };
+  } catch (error: unknown) {
+    return isConnectionLostError(error) ? { status: "lost" } : { status: "failed" };
+  }
+}
+
+/**
+ * The workspace's stored override, read once per workspace. The panel edits it optimistically
+ * through `edit`, which also writes it. Writes need a live connection: while Xum reconnects the
+ * override stays on screen but `readOnly` is true, and nothing waits for a later client.
+ */
+function useWorkspaceGoalOverride(workspaceId: string, onPersist: (() => void) | undefined) {
   const { api } = useAPI();
-  const [globalDefaults, setGlobalDefaults] = useState<GoalDefaults>(() => ({
-    ...DEFAULT_GOAL_DEFAULTS,
-  }));
+  const liveApi = useLiveAPI();
   const [override, setOverride] = useState<WorkspaceGoalDefaultsOverride | null>(null);
   // Distinguishes "loaded; no override stored" (override === null, isLoading
   // === false) from "still loading" (override === null, isLoading === true).
@@ -80,6 +144,67 @@ export function GoalDefaultsSection(props: GoalDefaultsSectionProps) {
   // which `set` then writes — clobbering any saved override on disk.
   // Preserve saved workspace defaults while loading.
   const [isLoading, setIsLoading] = useState(true);
+  // A write that failed (a lost connection included): the shown value may not be stored.
+  const [saveError, setSaveError] = useState<string | null>(null);
+  // The workspace whose override is loaded. A re-read for it (a new API client after a reconnect)
+  // keeps the controls shown; only another workspace resets them.
+  const loadedWorkspaceIdRef = useRef<string | null>(null);
+  const [writer] = useState(() => new GoalOverrideWriter());
+
+  // Workspace override is loaded once per workspaceId. `null` (the
+  // canonical "no override" state) is what we expect for fresh workspaces.
+  // Reset `isLoading` whenever the workspaceId changes so a workspace
+  // switch doesn't let the new workspace's edits race the old read.
+  useEffect(() => {
+    if (loadedWorkspaceIdRef.current !== workspaceId) {
+      loadedWorkspaceIdRef.current = null;
+      setOverride(null);
+      setSaveError(null);
+      setIsLoading(true);
+    }
+    if (!api) return;
+    let cancelled = false;
+    const writesAtStart = writer.writeCount(workspaceId);
+    void readOverride(api, workspaceId).then((read) => {
+      // A lost connection keeps what is shown for the next client. Another failure enables the
+      // controls on what is shown (the empty override on a first read), as before.
+      if (cancelled || read.status === "lost") return;
+      if (read.status === "ok" && writer.writeCount(workspaceId) === writesAtStart) {
+        setOverride(read.override);
+      }
+      setIsLoading(false);
+      loadedWorkspaceIdRef.current = workspaceId;
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, workspaceId, writer]);
+
+  const edit = (next: WorkspaceGoalDefaultsOverride) => {
+    if (liveApi == null) return;
+    setOverride(next);
+    setSaveError(null);
+    writer.write(liveApi, {
+      workspaceId,
+      override: next,
+      onSaved: onPersist,
+      onFailed: (error) => setSaveError(getErrorMessage(error)),
+    });
+  };
+
+  return { override, isLoading, readOnly: liveApi == null, saveError, edit };
+}
+
+export function GoalDefaultsSection(props: GoalDefaultsSectionProps) {
+  const { api } = useAPI();
+  const [globalDefaults, setGlobalDefaults] = useState<GoalDefaults>(() => ({
+    ...DEFAULT_GOAL_DEFAULTS,
+  }));
+  const onPersistProp = props.onPersist;
+  const { override, isLoading, readOnly, saveError, edit } = useWorkspaceGoalOverride(
+    props.workspaceId,
+    onPersistProp
+  );
 
   // Pull the global defaults so we can render inherited values inside the
   // workspace-override panel. We only re-read on mount/api change; updates
@@ -105,72 +230,12 @@ export function GoalDefaultsSection(props: GoalDefaultsSectionProps) {
     };
   }, [api]);
 
-  // Workspace override is loaded once per workspaceId. `null` (the
-  // canonical "no override" state) is what we expect for fresh workspaces.
-  // Reset `isLoading` whenever the workspaceId changes so a workspace
-  // switch doesn't let the new workspace's edits race the old read.
-  useEffect(() => {
-    if (!api) return;
-    let cancelled = false;
-    setIsLoading(true);
-    void api.workspace.goalDefaults
-      .get({ workspaceId: props.workspaceId })
-      .then((value) => {
-        if (cancelled) return;
-        setOverride(value ?? null);
-        setIsLoading(false);
-      })
-      .catch(() => {
-        if (cancelled) return;
-        setOverride(null);
-        setIsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [api, props.workspaceId]);
-
-  const onPersistProp = props.onPersist;
-  // Serialize workspace-default saves. The backend setter
-  // reads → mutates → writes the full config record, so two saves in
-  // flight could land out of order — a slower first request could
-  // complete after a later edit and overwrite it on disk while the UI
-  // continues to show the latest optimistic state, silently reverting
-  // the user's edit on next refetch. Chain saves via a promise ref so
-  // each request awaits the previous before issuing its own write.
-  const saveChainRef = useRef<Promise<void>>(Promise.resolve());
   const persistOverride = (next: WorkspaceGoalDefaultsOverride) => {
     // Ignore edits while the initial read is in flight.
     // Otherwise a stale all-null shape could overwrite saved overrides.
     // The UI also disables the toggles via `isLoading` below.
     if (isLoading) return;
-    setOverride(next);
-    if (!api) return;
-    saveChainRef.current = saveChainRef.current
-      .catch(() => {
-        // Previous save failed; we already swallowed its error in its
-        // own `.catch`, but the chain still has to continue so the
-        // next save isn't permanently rejected.
-      })
-      .then(() =>
-        api.workspace.goalDefaults
-          .set({
-            workspaceId: props.workspaceId,
-            defaultBudgetCents: next.defaultBudgetCents,
-            defaultTurnCap: next.defaultTurnCap,
-            alwaysRequireExplicitBudget: next.alwaysRequireExplicitBudget,
-          })
-          .then(() => {
-            // Notify parent so prefilled create-form inputs can re-read
-            // the effective defaults. Errors are swallowed (the
-            // optimistic `setOverride` above already updated local
-            // state).
-            onPersistProp?.();
-          })
-          .catch(() => {
-            /* swallow — same rationale as global panel */
-          })
-      );
+    edit(next);
   };
 
   // Synthesize a "current override" object (all-null is what the
@@ -197,7 +262,14 @@ export function GoalDefaultsSection(props: GoalDefaultsSectionProps) {
         globalDefaults={globalDefaults}
         onChange={persistOverride}
         isLoading={isLoading}
+        // Off while loading, and while there is no live connection to save to.
+        disabled={isLoading || readOnly}
       />
+      {saveError != null && (
+        <p className="text-danger-soft text-xs" role="alert">
+          {saveError}
+        </p>
+      )}
 
       <details className="border-border-light rounded-md border">
         <summary className="text-muted cursor-pointer list-none p-2 text-xs font-medium uppercase">
@@ -270,6 +342,7 @@ interface WorkspaceOverridePanelProps {
   globalDefaults: GoalDefaults;
   onChange: (next: WorkspaceGoalDefaultsOverride) => void;
   isLoading: boolean;
+  disabled: boolean;
 }
 
 function WorkspaceOverridePanel(props: WorkspaceOverridePanelProps) {
@@ -288,14 +361,14 @@ function WorkspaceOverridePanel(props: WorkspaceOverridePanelProps) {
         override={props.override.defaultBudgetCents}
         inheritValue={props.globalDefaults.defaultBudgetCents}
         onChange={(value) => props.onChange({ ...props.override, defaultBudgetCents: value })}
-        disabled={props.isLoading}
+        disabled={props.disabled}
       />
 
       <TurnCapOverrideRow
         override={props.override.defaultTurnCap}
         inheritValue={props.globalDefaults.defaultTurnCap}
         onChange={(value) => props.onChange({ ...props.override, defaultTurnCap: value })}
-        disabled={props.isLoading}
+        disabled={props.disabled}
       />
 
       <ExplicitBudgetOverrideRow
@@ -304,7 +377,7 @@ function WorkspaceOverridePanel(props: WorkspaceOverridePanelProps) {
         onChange={(value) =>
           props.onChange({ ...props.override, alwaysRequireExplicitBudget: value })
         }
-        disabled={props.isLoading}
+        disabled={props.disabled}
       />
     </div>
   );
@@ -365,6 +438,7 @@ function BudgetOverrideRow(props: BudgetOverrideRowProps) {
             onChange={(event) => setDraft(event.target.value)}
             onBlur={(event) => commit(event.currentTarget.value)}
             className="border-border-medium bg-background-secondary h-8 w-20 text-right text-sm"
+            disabled={props.disabled}
           />
         </div>
       }
@@ -443,6 +517,7 @@ function TurnCapOverrideRow(props: TurnCapOverrideRowProps) {
           onChange={(event) => setDraft(event.target.value)}
           onBlur={(event) => commit(event.currentTarget.value)}
           className="border-border-medium bg-background-secondary h-8 w-20 text-right text-sm"
+          disabled={props.disabled}
         />
       }
     />
@@ -479,6 +554,7 @@ function ExplicitBudgetOverrideRow(props: ExplicitBudgetOverrideRowProps) {
             checked={props.override ?? false}
             onChange={(event) => props.onChange(event.target.checked)}
             className="accent-accent h-4 w-4"
+            disabled={props.disabled}
           />
           <span className="text-muted text-xs">{(props.override ?? false) ? "ON" : "OFF"}</span>
         </label>
diff --git a/src/browser/features/RightSidebar/PlanFileDialog.tsx b/src/browser/features/RightSidebar/PlanFileDialog.tsx
index 9139e112dff..1a5ea885fc9 100644
--- a/src/browser/features/RightSidebar/PlanFileDialog.tsx
+++ b/src/browser/features/RightSidebar/PlanFileDialog.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import assert from "@/common/utils/assert";
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, type APIClient } from "@/browser/contexts/API";
 import { MarkdownCore } from "@/browser/features/Messages/MarkdownCore";
 import { PlanMarkdownContainer } from "@/browser/features/Messages/MarkdownRenderer";
 import {
@@ -9,6 +9,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/browser/components/Dialog/Dialog";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import { getErrorMessage } from "@/common/utils/errors";
 
 interface PlanFileDialogProps {
@@ -17,106 +18,131 @@ interface PlanFileDialogProps {
   workspaceId: string;
 }
 
-export const PlanFileDialog: React.FC<PlanFileDialogProps> = (props) => {
+export const PlanFileDialog: React.FC<PlanFileDialogProps> = (props) => (
+  <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+    <DialogContent className="flex max-h-[80vh] min-h-0 max-w-5xl flex-col overflow-hidden">
+      {/* PostCompactionSection renders this dialog while closed: the body, and so its plan
+          read, mounts only while the dialog is open. Keyed by workspace, so another workspace
+          (or reopening the dialog) starts from an empty body, while a new API client (a
+          reconnect) re-reads the plan in the background and keeps it shown. */}
+      <PlanFileBody key={props.workspaceId} workspaceId={props.workspaceId} />
+    </DialogContent>
+  </Dialog>
+);
+
+type PlanRead =
+  | { status: "ok"; content: string; path: string }
+  | { status: "error"; error: string }
+  /** Cut off by a lost connection (ConnectionLostError): not a plan error. */
+  | { status: "lost" };
+
+async function readPlan(api: APIClient, workspaceId: string): Promise<PlanRead> {
+  try {
+    const result = await api.workspace.getPlanContent({ workspaceId });
+    if (!result.success) {
+      return { status: "error", error: result.error };
+    }
+    assert(result.data.path.length > 0, "Plan path should be non-empty");
+    return { status: "ok", content: result.data.content, path: result.data.path };
+  } catch (error: unknown) {
+    return isConnectionLostError(error)
+      ? { status: "lost" }
+      : { status: "error", error: getErrorMessage(error) };
+  }
+}
+
+function usePlanFile(workspaceId: string) {
   const { api } = useAPI();
 
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [content, setContent] = useState<string | null>(null);
   const [path, setPath] = useState<string | null>(null);
+  // True once a plan is on screen: offline (no client during a reconnect) then keeps it.
+  const hasPlanRef = useRef(false);
 
   useEffect(() => {
-    // PostCompactionSection renders this dialog while closed.
-    // Delay IPC plan-file reads until the user explicitly opens the preview.
-    if (!props.open) {
+    assert(workspaceId.trim().length > 0, "workspaceId is required to load plan preview");
+
+    if (!api) {
+      if (!hasPlanRef.current) {
+        setIsLoading(false);
+        setError("API unavailable");
+      }
       return;
     }
 
-    assert(props.workspaceId.trim().length > 0, "workspaceId is required to load plan preview");
-
-    setIsLoading(true);
+    // A read with a client replaces the offline error. Without a plan on screen, it shows
+    // "Loading plan…" (the dialog may have opened while there was no client).
     setError(null);
-    setContent(null);
-    setPath(null);
-
-    if (!api) {
-      setIsLoading(false);
-      setError("API unavailable");
-      return;
+    if (!hasPlanRef.current) {
+      setIsLoading(true);
     }
 
     let cancelled = false;
 
-    const run = async () => {
-      try {
-        const result = await api.workspace.getPlanContent({ workspaceId: props.workspaceId });
-
-        if (cancelled) {
-          return;
-        }
-
-        if (!result.success) {
-          setError(result.error);
-          setIsLoading(false);
-          return;
-        }
-
-        assert(result.data.path.length > 0, "Plan path should be non-empty");
-
-        setContent(result.data.content);
-        setPath(result.data.path);
-        setIsLoading(false);
-      } catch (error: unknown) {
-        if (cancelled) {
-          return;
-        }
-
-        setError(getErrorMessage(error));
-        setIsLoading(false);
+    void readPlan(api, workspaceId).then((read) => {
+      // A lost connection (or this effect's own cleanup) keeps what is shown for the next client.
+      if (cancelled || read.status === "lost") {
+        return;
       }
-    };
-
-    void run();
+      setIsLoading(false);
+      if (read.status === "error") {
+        setError(read.error);
+        return;
+      }
+      setError(null);
+      setContent(read.content);
+      setPath(read.path);
+      hasPlanRef.current = true;
+    });
 
     return () => {
       cancelled = true;
     };
-  }, [api, props.open, props.workspaceId]);
+  }, [api, workspaceId]);
+
+  return { isLoading, error, content, path };
+}
+
+function PlanFileBody(props: { workspaceId: string }) {
+  const { isLoading, error, content, path } = usePlanFile(props.workspaceId);
 
   return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      <DialogContent className="flex max-h-[80vh] min-h-0 max-w-5xl flex-col overflow-hidden">
-        <DialogHeader>
-          <DialogTitle className="flex flex-col gap-1">
-            <span>Plan file</span>
-            {path && (
-              <code className="rounded bg-[var(--color-bg-tertiary)] px-1.5 py-0.5 font-mono text-[10px]">
-                {path}
-              </code>
-            )}
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="min-h-0 flex-1 overflow-y-auto rounded bg-[var(--color-bg-secondary)] p-3">
-          {error ? (
-            <div className="text-error text-[11px]" data-testid="plan-file-dialog-error">
-              {error}
-            </div>
-          ) : isLoading ? (
-            <div className="text-muted text-[11px] italic">Loading plan…</div>
-          ) : content !== null ? (
-            content.length > 0 ? (
-              <PlanMarkdownContainer>
-                <MarkdownCore content={content} />
-              </PlanMarkdownContainer>
-            ) : (
-              <div className="text-muted text-[11px] italic">Plan file is empty</div>
-            )
-          ) : (
-            <div className="text-muted text-[11px] italic">No plan loaded</div>
+    <>
+      <DialogHeader>
+        <DialogTitle className="flex flex-col gap-1">
+          <span>Plan file</span>
+          {path && (
+            <code className="rounded bg-[var(--color-bg-tertiary)] px-1.5 py-0.5 font-mono text-[10px]">
+              {path}
+            </code>
           )}
-        </div>
-      </DialogContent>
-    </Dialog>
+        </DialogTitle>
+      </DialogHeader>
+
+      <div className="min-h-0 flex-1 overflow-y-auto rounded bg-[var(--color-bg-secondary)] p-3">
+        {error ? (
+          <div className="text-error text-[11px]" data-testid="plan-file-dialog-error">
+            {error}
+          </div>
+        ) : isLoading ? (
+          <div className="text-muted text-[11px] italic">Loading plan…</div>
+        ) : content !== null ? (
+          content.length > 0 ? (
+            <PlanMarkdownContainer>
+              {/* Keyed by the text: a reload replaces the plan in place, and Streamdown's
+                  elements re-render only when their source position changes, so an edit that
+                  keeps the positions would otherwise stay stale on screen. */}
+              <MarkdownCore key={content} content={content} />
+            </PlanMarkdownContainer>
+          ) : (
+            <div className="text-muted text-[11px] italic">Plan file is empty</div>
+          )
+        ) : (
+          <div className="text-muted text-[11px] italic">No plan loaded</div>
+        )}
+      </div>
+    </>
   );
-};
+}
diff --git a/src/browser/features/RightSidebar/RightSidebar.reconnect.test.tsx b/src/browser/features/RightSidebar/RightSidebar.reconnect.test.tsx
new file mode 100644
index 00000000000..0763c412285
--- /dev/null
+++ b/src/browser/features/RightSidebar/RightSidebar.reconnect.test.tsx
@@ -0,0 +1,115 @@
+// Bootstrap Happy DOM before react-dom evaluates (see MemoryTab.test.tsx).
+import "../../../../tests/ui/dom";
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { act, cleanup, renderHook } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { installDom } from "../../../../tests/ui/dom";
+import { useAPI, type APIClient } from "@/browser/contexts/API";
+import {
+  createConnectionHarness,
+  GAP_MODES,
+  type ConnectionHarness,
+} from "@/browser/contexts/connection.testHarness";
+import type { TestApiOverrides } from "@/browser/testUtils";
+import { useDesktopAvailable, useLlmDebugLogsEnabled } from "./RightSidebar";
+
+/*
+ * The sidebar drops its Debug and Desktop tabs when the setting (or capability) reads false.
+ * A dropped connection is not such an answer: the last known value stays, so the tabs stay,
+ * until the next client reads it again.
+ */
+
+/** What the server answers; a test swaps it (or holds it) before a connect. */
+let answerConfig: () => Promise<unknown>;
+let answerCapability: () => Promise<unknown>;
+
+function serverOverrides(): TestApiOverrides<APIClient> {
+  return {
+    config: { getConfig: () => answerConfig() },
+    desktop: { getCapability: () => answerCapability() },
+  } as unknown as TestApiOverrides<APIClient>;
+}
+
+let harness: ConnectionHarness;
+
+function Wrapper(props: { children: ReactNode }) {
+  const Connection = harness.Wrapper;
+  return <Connection>{props.children}</Connection>;
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  });
+}
+
+async function drop() {
+  await harness.drop();
+  await flush();
+}
+
+async function reconnect() {
+  harness.reconnect();
+  await flush();
+}
+
+/** Never answers: the read stays in flight until a drop cuts it off. */
+function pending(): Promise<unknown> {
+  return new Promise(() => undefined);
+}
+
+describe.each([...GAP_MODES])("sidebar tab gates across a dropped connection (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    harness = createConnectionHarness(mode, serverOverrides);
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("the debug-logs setting keeps its value through a read the drop cut off", async () => {
+    answerConfig = () => Promise.resolve({ llmDebugLogs: true });
+    const view = renderHook(() => useLlmDebugLogsEnabled(useAPI().api), { wrapper: Wrapper });
+    await flush();
+    expect(view.result.current).toBe(true);
+
+    await drop();
+    expect(view.result.current).toBe(true);
+
+    answerConfig = pending;
+    await reconnect();
+    await drop();
+    expect(view.result.current).toBe(true);
+
+    answerConfig = () => Promise.resolve({ llmDebugLogs: false });
+    await reconnect();
+    expect(view.result.current).toBe(false);
+  });
+
+  test("the desktop capability keeps its value through a read the drop cut off", async () => {
+    answerCapability = () => Promise.resolve({ available: true });
+    const view = renderHook(() => useDesktopAvailable(useAPI().api, true, "ws-1"), {
+      wrapper: Wrapper,
+    });
+    await flush();
+    expect(view.result.current).toBe(true);
+
+    await drop();
+    expect(view.result.current).toBe(true);
+
+    answerCapability = pending;
+    await reconnect();
+    await drop();
+    expect(view.result.current).toBe(true);
+
+    answerCapability = () => Promise.resolve({ available: false });
+    await reconnect();
+    expect(view.result.current).toBe(false);
+  });
+});
diff --git a/src/browser/features/RightSidebar/RightSidebar.tsx b/src/browser/features/RightSidebar/RightSidebar.tsx
index 26731c423ea..b0fe2e174ad 100644
--- a/src/browser/features/RightSidebar/RightSidebar.tsx
+++ b/src/browser/features/RightSidebar/RightSidebar.tsx
@@ -22,7 +22,7 @@ import {
   usePersistedState,
 } from "@/browser/hooks/usePersistedState";
 import { useProvidersConfig } from "@/browser/hooks/useProvidersConfig";
-import { useAPI, liveClientOf } from "@/browser/contexts/API";
+import { useAPI, liveClientOf, type APIClient } from "@/browser/contexts/API";
 import { useWorkspaceMetadata } from "@/browser/contexts/WorkspaceContext";
 import { useSendMessageOptions } from "@/browser/hooks/useSendMessageOptions";
 import {
@@ -39,6 +39,7 @@ import type { GoalCreateIntent } from "@/browser/features/RightSidebar/GoalTab";
 import { usePopoverError } from "@/browser/hooks/usePopoverError";
 import { PopoverError } from "@/browser/components/PopoverError/PopoverError";
 import { hasWorkspaceRepository } from "@/browser/utils/workspaceCapabilities";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import { getErrorMessage } from "@/common/utils/errors";
 import { showFeedbackToast } from "@/browser/utils/feedbackToast";
 import { openSideChat } from "@/browser/utils/chatCommands";
@@ -847,6 +848,115 @@ const RegistryTabPanel: React.FC<{
   );
 };
 
+/**
+ * Whether LLM debug logs are on: null until the config is read, so the layout keeps its Debug
+ * tab until the setting is known. A toggle (the LLM_DEBUG_LOGS_CHANGED event) wins over a config
+ * read still in flight.
+ */
+export function useLlmDebugLogsEnabled(api: APIClient | null): boolean | null {
+  const [llmDebugLogsEnabled, setLlmDebugLogsEnabled] = React.useState<boolean | null>(null);
+  const debugLogsLocalOverrideRef = React.useRef(false);
+
+  React.useEffect(() => {
+    // Without a client (a reconnect), keep the last known value: the layout keeps its tabs.
+    if (!api) {
+      return;
+    }
+
+    // Reset local override so a fresh config fetch can set the initial value.
+    debugLogsLocalOverrideRef.current = false;
+    let cancelled = false;
+
+    void api.config
+      .getConfig()
+      .then((cfg) => {
+        if (cancelled) {
+          return;
+        }
+
+        // If the user toggled debug logs while this config fetch was in flight,
+        // the event listener has already set the authoritative value.
+        if (debugLogsLocalOverrideRef.current) {
+          return;
+        }
+
+        setLlmDebugLogsEnabled(cfg.llmDebugLogs === true);
+      })
+      .catch((error: unknown) => {
+        // A lost connection says nothing about the setting: keep the Debug tab for the next client.
+        if (cancelled || isConnectionLostError(error)) {
+          return;
+        }
+
+        setLlmDebugLogsEnabled(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [api]);
+
+  React.useEffect(() => {
+    const handleLlmDebugLogsChanged = (event: Event) => {
+      const detail = (event as CustomEvent<{ enabled: boolean }>).detail;
+      debugLogsLocalOverrideRef.current = true;
+      setLlmDebugLogsEnabled(detail?.enabled === true);
+    };
+
+    window.addEventListener(CUSTOM_EVENTS.LLM_DEBUG_LOGS_CHANGED, handleLlmDebugLogsChanged);
+    return () =>
+      window.removeEventListener(CUSTOM_EVENTS.LLM_DEBUG_LOGS_CHANGED, handleLlmDebugLogsChanged);
+  }, []);
+
+  return llmDebugLogsEnabled;
+}
+
+/**
+ * Whether the workspace can show a Desktop tab: null while unknown, so the layout keeps the tab.
+ */
+export function useDesktopAvailable(
+  api: APIClient | null,
+  desktopExperimentEnabled: boolean,
+  workspaceId: string
+): boolean | null {
+  const [desktopAvailable, setDesktopAvailable] = React.useState<boolean | null>(null);
+
+  React.useEffect(() => {
+    if (!desktopExperimentEnabled) {
+      setDesktopAvailable(false);
+      return;
+    }
+
+    // A degraded (slow) connection still has a usable api; only a missing api means offline.
+    // Offline keeps the last known value, so the layout keeps its Desktop tab.
+    if (!api) {
+      return;
+    }
+
+    let cancelled = false;
+
+    void api.desktop
+      .getCapability({ workspaceId })
+      .then((capability) => {
+        if (!cancelled) {
+          setDesktopAvailable(capability.available);
+        }
+      })
+      .catch((error: unknown) => {
+        // A lost connection is not a missing capability: keep the Desktop tab for the next client.
+        if (!cancelled && !isConnectionLostError(error)) {
+          setDesktopAvailable(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [api, desktopExperimentEnabled, workspaceId]);
+
+  return desktopAvailable;
+}
+
 const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   workspaceId,
   workspacePath,
@@ -942,9 +1052,8 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
   // Opening the tab by shortcut leaves focus where it was (usually the chat input), so the
   // panel claims focus once it renders, like terminals do with autoFocusTerminalSession.
   const [autoFocusArtifacts, setAutoFocusArtifacts] = React.useState(false);
-  const [llmDebugLogsEnabled, setLlmDebugLogsEnabled] = React.useState<boolean | null>(null);
-  const [desktopAvailable, setDesktopAvailable] = React.useState<boolean | null>(null);
-  const debugLogsLocalOverrideRef = React.useRef(false);
+  const llmDebugLogsEnabled = useLlmDebugLogsEnabled(api);
+  const desktopAvailable = useDesktopAvailable(api, desktopExperimentEnabled, workspaceId);
 
   const setDisplayedGoal = async (intent: {
     // RightSidebar buttons only ever request user-facing transitions;
@@ -1045,56 +1154,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     });
   };
 
-  React.useEffect(() => {
-    if (!api) {
-      setLlmDebugLogsEnabled(null);
-      return;
-    }
-
-    // Reset local override so a fresh config fetch can set the initial value.
-    debugLogsLocalOverrideRef.current = false;
-    let cancelled = false;
-
-    void api.config
-      .getConfig()
-      .then((cfg) => {
-        if (cancelled) {
-          return;
-        }
-
-        // If the user toggled debug logs while this config fetch was in flight,
-        // the event listener has already set the authoritative value.
-        if (debugLogsLocalOverrideRef.current) {
-          return;
-        }
-
-        setLlmDebugLogsEnabled(cfg.llmDebugLogs === true);
-      })
-      .catch(() => {
-        if (cancelled) {
-          return;
-        }
-
-        setLlmDebugLogsEnabled(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [api]);
-
-  React.useEffect(() => {
-    const handleLlmDebugLogsChanged = (event: Event) => {
-      const detail = (event as CustomEvent<{ enabled: boolean }>).detail;
-      debugLogsLocalOverrideRef.current = true;
-      setLlmDebugLogsEnabled(detail?.enabled === true);
-    };
-
-    window.addEventListener(CUSTOM_EVENTS.LLM_DEBUG_LOGS_CHANGED, handleLlmDebugLogsChanged);
-    return () =>
-      window.removeEventListener(CUSTOM_EVENTS.LLM_DEBUG_LOGS_CHANGED, handleLlmDebugLogsChanged);
-  }, []);
-
   // A tool explicitly requested for new layouts (RIGHT_SIDEBAR_TAB_KEY). Without one, a
   // workspace starts with just the New tab, which guides the user to the tools.
   // Not gated on canReviewDiffs: that is false until workspace metadata loads, and a "review"
@@ -1224,38 +1283,6 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
     setLayoutRaw,
   });
 
-  React.useEffect(() => {
-    if (!desktopExperimentEnabled) {
-      setDesktopAvailable(false);
-      return;
-    }
-
-    // A degraded (slow) connection still has a usable api; only a missing api means offline.
-    if (!api) {
-      setDesktopAvailable(null);
-      return;
-    }
-
-    let cancelled = false;
-
-    void api.desktop
-      .getCapability({ workspaceId })
-      .then((capability) => {
-        if (!cancelled) {
-          setDesktopAvailable(capability.available);
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setDesktopAvailable(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [api, desktopExperimentEnabled, workspaceId]);
-
   React.useEffect(() => {
     if (desktopAvailable == null) {
       return;
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowEmptyState.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowEmptyState.tsx
index 52bc6b34921..484a23a3a97 100644
--- a/src/browser/features/RightSidebar/Workflows/WorkflowEmptyState.tsx
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowEmptyState.tsx
@@ -140,6 +140,20 @@ interface WorkflowEmptyStateProps {
   // Keyed by scriptPath (unique) rather than descriptor.name, which can collide across skill
   // workflows that omit meta.name (both normalize to "workflow").
   busyScriptPath: string | null;
+  /** No live connection: nothing can start, so Run and Start are disabled. */
+  offline?: boolean;
+}
+
+/** Run is disabled for a blocked script, while another script starts, and while offline. */
+function isRunDisabled(
+  script: AvailableWorkflow,
+  busyScriptPath: string | null,
+  offline: boolean
+): boolean {
+  if (offline || !script.descriptor.executable) {
+    return true;
+  }
+  return busyScriptPath != null && busyScriptPath !== script.scriptPath;
 }
 
 /**
@@ -149,6 +163,7 @@ interface WorkflowEmptyStateProps {
  */
 export const WorkflowEmptyState: React.FC<WorkflowEmptyStateProps> = (props) => {
   const [configuring, setConfiguring] = React.useState<string | null>(null);
+  const offline = props.offline === true;
 
   return (
     <div className="flex flex-col gap-4">
@@ -225,9 +240,7 @@ export const WorkflowEmptyState: React.FC<WorkflowEmptyStateProps> = (props) =>
                     </div>
                     <button
                       type="button"
-                      disabled={
-                        !script.descriptor.executable || (props.busyScriptPath != null && !isBusy)
-                      }
+                      disabled={isRunDisabled(script, props.busyScriptPath, offline)}
                       onClick={onRunClick}
                       className="border-accent bg-accent text-accent-foreground hover:bg-accent-button-hover inline-flex shrink-0 items-center gap-1 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors disabled:cursor-default disabled:opacity-50"
                     >
@@ -237,7 +250,7 @@ export const WorkflowEmptyState: React.FC<WorkflowEmptyStateProps> = (props) =>
                   {isConfiguring && (
                     <WorkflowRunForm
                       script={script}
-                      busy={isBusy}
+                      busy={isBusy || offline}
                       onSubmit={(args) => props.onRun(script, args)}
                     />
                   )}
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowRunHeader.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowRunHeader.tsx
index ed770e40c54..7d63684dcd6 100644
--- a/src/browser/features/RightSidebar/Workflows/WorkflowRunHeader.tsx
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowRunHeader.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Check, ChevronRight, Clock, Coins, Play, RotateCcw, Square, Workflow } from "lucide-react";
 
-import { useAPI } from "@/browser/contexts/API";
+import { useLiveAPI } from "@/browser/contexts/API";
 import type { WorkflowRunRecord } from "@/common/types/workflow";
 import { canRetryWorkflowFromCheckpoint } from "@/common/utils/workflowRetryEligibility";
 
@@ -48,8 +48,11 @@ interface WorkflowRunHeaderProps {
 }
 
 export const WorkflowRunHeader: React.FC<WorkflowRunHeaderProps> = (props) => {
-  const { api } = useAPI();
+  // Run actions need a live connection. While Xum reconnects the run stays on screen, but its
+  // actions are disabled (`blocked`), so a click never silently does nothing.
+  const api = useLiveAPI();
   const [busy, setBusy] = React.useState(false);
+  const blocked = busy || api == null;
   const [actionError, setActionError] = React.useState<string | null>(null);
 
   const run = props.run;
@@ -62,7 +65,7 @@ export const WorkflowRunHeader: React.FC<WorkflowRunHeaderProps> = (props) => {
   const canRerun = rerunScriptPath != null;
 
   const runAction = async (action: () => Promise<unknown>) => {
-    if (api == null || busy) {
+    if (blocked) {
       return;
     }
     setBusy(true);
@@ -222,16 +225,16 @@ export const WorkflowRunHeader: React.FC<WorkflowRunHeaderProps> = (props) => {
 
       <div className="flex flex-wrap gap-2">
         {isLive ? (
-          <button type="button" className={BTN_DEFAULT} onClick={interrupt} disabled={busy}>
+          <button type="button" className={BTN_DEFAULT} onClick={interrupt} disabled={blocked}>
             <Square className="h-3 w-3" /> Interrupt
           </button>
         ) : run.status === "interrupted" ? (
           <>
-            <button type="button" className={BTN_ACCENT} onClick={resume} disabled={busy}>
+            <button type="button" className={BTN_ACCENT} onClick={resume} disabled={blocked}>
               <Play className="h-3 w-3" /> Resume
             </button>
             {canRerun && (
-              <button type="button" className={BTN_DEFAULT} onClick={rerun} disabled={busy}>
+              <button type="button" className={BTN_DEFAULT} onClick={rerun} disabled={blocked}>
                 <RotateCcw className="h-3 w-3" /> Re-run
               </button>
             )}
@@ -239,12 +242,12 @@ export const WorkflowRunHeader: React.FC<WorkflowRunHeaderProps> = (props) => {
         ) : (
           <>
             {canRetry && (
-              <button type="button" className={BTN_ACCENT} onClick={retry} disabled={busy}>
+              <button type="button" className={BTN_ACCENT} onClick={retry} disabled={blocked}>
                 <Play className="h-3 w-3" /> Retry from checkpoint
               </button>
             )}
             {canRerun && (
-              <button type="button" className={BTN_DEFAULT} onClick={rerun} disabled={busy}>
+              <button type="button" className={BTN_DEFAULT} onClick={rerun} disabled={blocked}>
                 <RotateCcw className="h-3 w-3" /> Re-run
               </button>
             )}
diff --git a/src/browser/features/RightSidebar/Workflows/WorkflowsTab.tsx b/src/browser/features/RightSidebar/Workflows/WorkflowsTab.tsx
index 075bd355a7b..990b30ed08c 100644
--- a/src/browser/features/RightSidebar/Workflows/WorkflowsTab.tsx
+++ b/src/browser/features/RightSidebar/Workflows/WorkflowsTab.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ChevronLeft } from "lucide-react";
 
-import { useAPI } from "@/browser/contexts/API";
+import { useAPI, useLiveAPI } from "@/browser/contexts/API";
 import type { AvailableWorkflow } from "@/common/types/workflow";
 
 import { WorkflowEmptyState } from "./WorkflowEmptyState";
@@ -12,31 +12,37 @@ import { projectWorkflowRun, selectPrimaryWorkflowRun } from "./projectWorkflowR
 import { useWorkflowRuns } from "./useWorkflowRuns";
 
 /**
- * Right-sidebar Workflows tab: a live, scannable view of the workspace's
- * durable workflow runs. Focuses the most recent active run by default; the
- * run-history list lets the user pin any prior run into focus.
+ * The empty state's script launcher for one workspace: the runnable scripts, the script being
+ * started, and the last start error.
  */
-export const WorkflowsTab: React.FC<{ workspaceId: string }> = (props) => {
+function useWorkflowLauncher(workspaceId: string, onStarted: () => void) {
   const { api } = useAPI();
-  const { runs, loading, error } = useWorkflowRuns(props.workspaceId);
-  const [overrideRunId, setOverrideRunId] = React.useState<string | null>(null);
+  // Starting a run needs a live connection. While Xum reconnects, the list stays on screen but
+  // its Run buttons are disabled (`offline`), so a click never silently does nothing.
+  const liveApi = useLiveAPI();
   const [scripts, setScripts] = React.useState<AvailableWorkflow[]>([]);
   const [busyScriptPath, setBusyScriptPath] = React.useState<string | null>(null);
   const [runError, setRunError] = React.useState<string | null>(null);
+  // The workspace the launcher state belongs to.
+  const launcherWorkspaceIdRef = React.useRef<string | null>(null);
 
   // Discover runnable scripts for the empty-state list (one per workspace).
   React.useEffect(() => {
     // Reset launcher state first so a workspace switch never shows or launches a stale script
     // from the previous workspace — including if the new fetch is still pending or fails.
-    setScripts([]);
-    setBusyScriptPath(null);
-    setRunError(null);
+    // A re-run for the same workspace (a new API client after a reconnect) keeps the list.
+    if (launcherWorkspaceIdRef.current !== workspaceId) {
+      launcherWorkspaceIdRef.current = workspaceId;
+      setScripts([]);
+      setBusyScriptPath(null);
+      setRunError(null);
+    }
     if (api == null) {
       return;
     }
     let ignore = false;
     api.workflows
-      .listScripts({ workspaceId: props.workspaceId })
+      .listScripts({ workspaceId })
       .then((result) => {
         if (!ignore) {
           setScripts(result);
@@ -48,24 +54,24 @@ export const WorkflowsTab: React.FC<{ workspaceId: string }> = (props) => {
     return () => {
       ignore = true;
     };
-  }, [api, props.workspaceId]);
+  }, [api, workspaceId]);
 
   const runScript = async (script: AvailableWorkflow, args: Record<string, unknown>) => {
-    if (api == null || busyScriptPath != null) {
+    if (liveApi == null || busyScriptPath != null) {
       return;
     }
     setBusyScriptPath(script.scriptPath);
     setRunError(null);
     try {
-      await api.workflows.start({
-        workspaceId: props.workspaceId,
+      await liveApi.workflows.start({
+        workspaceId,
         scriptPath: script.scriptPath,
         args,
         // Background the launch so the call returns immediately; the run then streams
         // into the tab via the subscription and becomes the focused run.
         runInBackground: true,
       });
-      setOverrideRunId(null);
+      onStarted();
     } catch (startError) {
       setRunError(startError instanceof Error ? startError.message : "Failed to start workflow");
     } finally {
@@ -73,6 +79,22 @@ export const WorkflowsTab: React.FC<{ workspaceId: string }> = (props) => {
     }
   };
 
+  return { scripts, busyScriptPath, runError, runScript, offline: liveApi == null };
+}
+
+/**
+ * Right-sidebar Workflows tab: a live, scannable view of the workspace's
+ * durable workflow runs. Focuses the most recent active run by default; the
+ * run-history list lets the user pin any prior run into focus.
+ */
+export const WorkflowsTab: React.FC<{ workspaceId: string }> = (props) => {
+  const { runs, loading, error } = useWorkflowRuns(props.workspaceId);
+  const [overrideRunId, setOverrideRunId] = React.useState<string | null>(null);
+  const { scripts, busyScriptPath, runError, runScript, offline } = useWorkflowLauncher(
+    props.workspaceId,
+    () => setOverrideRunId(null)
+  );
+
   if (error != null) {
     return <div className="text-danger text-sm">Failed to load workflows: {error}</div>;
   }
@@ -89,6 +111,7 @@ export const WorkflowsTab: React.FC<{ workspaceId: string }> = (props) => {
           scripts={scripts}
           onRun={(script, args) => void runScript(script, args)}
           busyScriptPath={busyScriptPath}
+          offline={offline}
         />
       </div>
     );
diff --git a/src/browser/features/RightSidebar/Workflows/useWorkflowRuns.ts b/src/browser/features/RightSidebar/Workflows/useWorkflowRuns.ts
index 93db8ec6b34..44964c25a1d 100644
--- a/src/browser/features/RightSidebar/Workflows/useWorkflowRuns.ts
+++ b/src/browser/features/RightSidebar/Workflows/useWorkflowRuns.ts
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 
 import { APIContext, useAPI, type APIClient } from "@/browser/contexts/API";
 import { isAbortError } from "@/browser/utils/isAbortError";
@@ -23,6 +23,29 @@ function recency(run: WorkflowRunRecord): number {
   return Number.isFinite(value) ? value : 0;
 }
 
+/**
+ * The state update for one feed event: a snapshot replaces the shown runs, a delta upserts one
+ * run. Called as the event arrives, so an unknown event throws into the feed's error handling.
+ */
+function workflowRunsUpdate(
+  event: WorkflowRunStreamEvent
+): (previous: Map<string, WorkflowRunRecord>) => Map<string, WorkflowRunRecord> {
+  switch (event.type) {
+    case "snapshot": {
+      const snapshot = new Map(event.runs.map((run) => [run.id, run]));
+      return () => snapshot;
+    }
+    case "run-changed":
+      return (previous) => {
+        const next = new Map(previous);
+        next.set(event.run.id, event.run);
+        return next;
+      };
+    default:
+      return assertNever(event);
+  }
+}
+
 /**
  * Live workflow-run feed for one workspace. Subscribes to `workflows.subscribe`
  * (snapshot + per-write deltas) and keeps a local id→record map in sync, so the
@@ -34,16 +57,24 @@ export function useWorkflowRuns(workspaceId: string): UseWorkflowRunsResult {
   const [runsById, setRunsById] = useState<Map<string, WorkflowRunRecord>>(new Map());
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  // The workspace whose runs are shown. Only another workspace clears them: a re-run for the same
+  // one (no client during a reconnect, then a new client) keeps them, and the empty state, until
+  // the new snapshot replaces them.
+  const shownWorkspaceIdRef = useRef<string | null>(null);
 
   useEffect(() => {
-    if (!api) {
+    if (shownWorkspaceIdRef.current !== workspaceId) {
+      shownWorkspaceIdRef.current = workspaceId;
       setRunsById(new Map());
-      setLoading(false);
+      setLoading(true);
+    }
+
+    // Without a client nothing is loaded yet, so `loading` stays as it is: still true before the
+    // first snapshot of this workspace (the tab must not show its empty state, then flip to runs).
+    if (!api) {
       return;
     }
 
-    setRunsById(new Map());
-    setLoading(true);
     setError(null);
 
     const controller = new AbortController();
@@ -62,20 +93,9 @@ export function useWorkflowRuns(workspaceId: string): UseWorkflowRunsResult {
         if (signal.aborted) {
           break;
         }
-        switch (event.type) {
-          case "snapshot":
-            setRunsById(new Map(event.runs.map((run) => [run.id, run])));
-            setLoading(false);
-            break;
-          case "run-changed":
-            setRunsById((previous) => {
-              const next = new Map(previous);
-              next.set(event.run.id, event.run);
-              return next;
-            });
-            break;
-          default:
-            assertNever(event);
+        setRunsById(workflowRunsUpdate(event));
+        if (event.type === "snapshot") {
+          setLoading(false);
         }
       }
     };
diff --git a/src/browser/features/RightSidebar/dialogsReconnect.test.tsx b/src/browser/features/RightSidebar/dialogsReconnect.test.tsx
new file mode 100644
index 00000000000..94da9846383
--- /dev/null
+++ b/src/browser/features/RightSidebar/dialogsReconnect.test.tsx
@@ -0,0 +1,292 @@
+// Bootstrap Happy DOM before react-dom evaluates (see MemoryTab.test.tsx).
+import "../../../../tests/ui/dom";
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { installDom } from "../../../../tests/ui/dom";
+import { BackgroundBashOutputDialog } from "@/browser/components/BackgroundBashOutputDialog/BackgroundBashOutputDialog";
+import type { APIClient } from "@/browser/contexts/API";
+import {
+  createConnectionHarness,
+  GAP_MODES,
+  type ConnectionHarness,
+} from "@/browser/contexts/connection.testHarness";
+import { SubagentTranscriptDialog } from "@/browser/features/Tools/SubagentTranscriptDialog";
+import type { TestApiOverrides } from "@/browser/testUtils";
+import { PlanFileDialog } from "./PlanFileDialog";
+
+/*
+ * A dialog that shows loaded content keeps it across a dropped connection: the new client
+ * reloads it in the background and replaces it only when the read lands. Opening another
+ * workspace, task or process still clears it.
+ */
+
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+}
+
+function deferred<T>(): Deferred<T> {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((r) => (resolve = r));
+  return { promise, resolve };
+}
+
+/** What each server procedure answers; a test swaps them before a reconnect. */
+let answerPlan: () => Promise<unknown>;
+let answerTranscript: () => Promise<unknown>;
+let answerOutput: () => Promise<unknown>;
+
+function planResult(content: string) {
+  return { success: true as const, data: { content, path: "/plans/plan.md" } };
+}
+
+function transcriptResult(thinkingLevel: "low" | "high") {
+  return { messages: [], thinkingLevel };
+}
+
+function outputResult(output: string) {
+  return {
+    success: true as const,
+    data: { status: "exited" as const, output, nextOffset: output.length, truncatedStart: false },
+  };
+}
+
+function serverOverrides(): TestApiOverrides<APIClient> {
+  return {
+    workspace: {
+      getPlanContent: () => answerPlan(),
+      getSubagentTranscript: () => answerTranscript(),
+      backgroundBashes: { getOutput: () => answerOutput() },
+    },
+  } as unknown as TestApiOverrides<APIClient>;
+}
+
+let harness: ConnectionHarness;
+
+function Wrapper(props: { children: ReactNode }) {
+  const Connection = harness.Wrapper;
+  return <Connection>{props.children}</Connection>;
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  });
+}
+
+/** Drop the connection and wait until the dialog settled on it. */
+async function drop() {
+  await harness.drop();
+  await flush();
+}
+
+async function reconnect() {
+  harness.reconnect();
+  await flush();
+}
+
+function noop() {
+  return undefined;
+}
+
+describe.each([...GAP_MODES])("dialogs across a dropped connection (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    harness = createConnectionHarness(mode, serverOverrides);
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("the plan dialog keeps the shown plan until the new client's read lands", async () => {
+    answerPlan = () => Promise.resolve(planResult("Plan A"));
+    const view = render(<PlanFileDialog open onOpenChange={noop} workspaceId="ws-1" />, {
+      wrapper: Wrapper,
+    });
+    await view.findByText("Plan A");
+
+    await drop();
+    expect(view.queryByText("Plan A")).not.toBeNull();
+    expect(view.queryByText("API unavailable")).toBeNull();
+
+    // The new client's read is still in flight, and is then cut off by a second drop.
+    const pending = deferred<unknown>();
+    answerPlan = () => pending.promise;
+    await reconnect();
+    expect(view.queryByText("Plan A")).not.toBeNull();
+    expect(view.queryByText("Loading plan…")).toBeNull();
+    await drop();
+    expect(view.queryByText("Plan A")).not.toBeNull();
+    expect(view.queryByTestId("plan-file-dialog-error")).toBeNull();
+
+    const next = deferred<unknown>();
+    answerPlan = () => next.promise;
+    await reconnect();
+    expect(view.queryByText("Plan A")).not.toBeNull();
+    next.resolve(planResult("Plan B"));
+    await view.findByText("Plan B");
+    expect(view.queryByText("Plan A")).toBeNull();
+  });
+
+  test("the transcript dialog keeps the shown transcript until the new client's read lands", async () => {
+    answerTranscript = () => Promise.resolve(transcriptResult("high"));
+    const view = render(<SubagentTranscriptDialog open onOpenChange={noop} taskId="task-1" />, {
+      wrapper: Wrapper,
+    });
+    await view.findByText("thinking: high");
+    expect(view.queryByText("Transcript is empty")).not.toBeNull();
+
+    // Offline may show an error box, but above the transcript, which stays.
+    await drop();
+    expect(view.queryByText("thinking: high")).not.toBeNull();
+    expect(view.queryByText("Transcript is empty")).not.toBeNull();
+
+    const pending = deferred<unknown>();
+    answerTranscript = () => pending.promise;
+    await reconnect();
+    expect(view.queryByText("thinking: high")).not.toBeNull();
+    expect(view.queryByText("Transcript is empty")).not.toBeNull();
+    await drop();
+    expect(view.queryByText("Transcript is empty")).not.toBeNull();
+    expect(view.queryByText(/WebSocket|connection/i)).toBeNull();
+
+    const next = deferred<unknown>();
+    answerTranscript = () => next.promise;
+    await reconnect();
+    next.resolve(transcriptResult("low"));
+    await view.findByText("thinking: low");
+  });
+
+  test("the background process dialog keeps the shown output until the new client's read lands", async () => {
+    answerOutput = () => Promise.resolve(outputResult("line A"));
+    const view = render(
+      <BackgroundBashOutputDialog open onOpenChange={noop} workspaceId="ws-1" processId="p1" />,
+      { wrapper: Wrapper }
+    );
+    await view.findByText("line A");
+
+    await drop();
+    expect(view.queryByText("line A")).not.toBeNull();
+
+    const pending = deferred<unknown>();
+    answerOutput = () => pending.promise;
+    await reconnect();
+    expect(view.queryByText("line A")).not.toBeNull();
+    expect(view.queryByText("Loading…")).toBeNull();
+    await drop();
+    expect(view.queryByText("line A")).not.toBeNull();
+    expect(view.queryByText(/WebSocket|connection/i)).toBeNull();
+
+    // The new read is a fresh tail: it replaces the kept output instead of appending to it.
+    const next = deferred<unknown>();
+    answerOutput = () => next.promise;
+    await reconnect();
+    next.resolve(outputResult("line B"));
+    await view.findByText("line B");
+    expect(view.queryByText(/line A/)).toBeNull();
+  });
+});
+
+describe.each([...GAP_MODES])("dialogs opened while reconnecting (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(async () => {
+    cleanupDom = installDom();
+    harness = createConnectionHarness(mode, serverOverrides);
+    // The dialog opens during the gap: nothing is shown yet.
+    await harness.drop();
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("the plan dialog shows its loading state once a client reads the plan", async () => {
+    answerPlan = () => Promise.resolve(planResult("unused"));
+    const view = render(<PlanFileDialog open onOpenChange={noop} workspaceId="ws-1" />, {
+      wrapper: Wrapper,
+    });
+    await flush();
+
+    const next = deferred<unknown>();
+    answerPlan = () => next.promise;
+    await reconnect();
+    expect(view.queryByText("Loading plan…")).not.toBeNull();
+    expect(view.queryByTestId("plan-file-dialog-error")).toBeNull();
+
+    next.resolve(planResult("Plan A"));
+    await view.findByText("Plan A");
+  });
+
+  test("the transcript dialog shows its loading state once a client reads the transcript", async () => {
+    answerTranscript = () => Promise.resolve(transcriptResult("low"));
+    const view = render(<SubagentTranscriptDialog open onOpenChange={noop} taskId="task-1" />, {
+      wrapper: Wrapper,
+    });
+    await flush();
+
+    const next = deferred<unknown>();
+    answerTranscript = () => next.promise;
+    await reconnect();
+    expect(view.queryByText(/Loading transcript/)).not.toBeNull();
+    expect(view.queryByText("No transcript loaded")).toBeNull();
+
+    next.resolve(transcriptResult("high"));
+    await view.findByText("thinking: high");
+  });
+});
+
+describe("dialogs opened on other data", () => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    harness = createConnectionHarness("kept-gap", serverOverrides);
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("another workspace clears the shown plan while its own plan loads", async () => {
+    answerPlan = () => Promise.resolve(planResult("Plan A"));
+    const view = render(<PlanFileDialog open onOpenChange={noop} workspaceId="ws-1" />, {
+      wrapper: Wrapper,
+    });
+    await view.findByText("Plan A");
+
+    const pending = deferred<unknown>();
+    answerPlan = () => pending.promise;
+    view.rerender(<PlanFileDialog open onOpenChange={noop} workspaceId="ws-2" />);
+    await waitFor(() => expect(view.queryByText("Loading plan…")).not.toBeNull());
+    expect(view.queryByText("Plan A")).toBeNull();
+  });
+
+  test("another process clears the shown output while its own output loads", async () => {
+    answerOutput = () => Promise.resolve(outputResult("line A"));
+    const view = render(
+      <BackgroundBashOutputDialog open onOpenChange={noop} workspaceId="ws-1" processId="p1" />,
+      { wrapper: Wrapper }
+    );
+    await view.findByText("line A");
+
+    const pending = deferred<unknown>();
+    answerOutput = () => pending.promise;
+    view.rerender(
+      <BackgroundBashOutputDialog open onOpenChange={noop} workspaceId="ws-1" processId="p2" />
+    );
+    await waitFor(() => expect(view.queryByText("Loading…")).not.toBeNull());
+    expect(view.queryByText("line A")).toBeNull();
+  });
+});
diff --git a/src/browser/features/RightSidebar/feedsReconnect.test.tsx b/src/browser/features/RightSidebar/feedsReconnect.test.tsx
new file mode 100644
index 00000000000..c94b40910b8
--- /dev/null
+++ b/src/browser/features/RightSidebar/feedsReconnect.test.tsx
@@ -0,0 +1,264 @@
+// Bootstrap Happy DOM before react-dom evaluates (see MemoryTab.test.tsx).
+import "../../../../tests/ui/dom";
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { act, cleanup, render, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { installDom } from "../../../../tests/ui/dom";
+import type { APIClient } from "@/browser/contexts/API";
+import {
+  createConnectionHarness,
+  GAP_MODES,
+  type ConnectionHarness,
+} from "@/browser/contexts/connection.testHarness";
+import type { TestApiOverrides } from "@/browser/testUtils";
+import type { DevToolsRunSummary } from "@/common/types/devtools";
+import type { AvailableWorkflow, WorkflowRunRecord } from "@/common/types/workflow";
+import { useDevToolsSubscription } from "./DevToolsTab/useDevToolsSubscription";
+import { useWorkflowRuns } from "./Workflows/useWorkflowRuns";
+import { WorkflowsTab } from "./Workflows/WorkflowsTab";
+
+/*
+ * Live feeds (a snapshot, then deltas) keep what they show across a dropped connection: the new
+ * client's snapshot replaces it when it arrives. Another workspace still clears it.
+ */
+
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+}
+
+function deferred<T>(): Deferred<T> {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((r) => (resolve = r));
+  return { promise, resolve };
+}
+
+/** The ids each feed's next snapshot carries; a test swaps them (or holds them) before a connect. */
+let devToolsSnapshot: () => Promise<string[]>;
+let workflowSnapshot: () => Promise<string[]>;
+let scriptNames: () => Promise<string[]>;
+
+/** A stream that sends one snapshot, then stays open until the connection drops. */
+function snapshotStream<T>(snapshot: Promise<T>) {
+  return Promise.resolve(
+    (async function* () {
+      yield await snapshot;
+      await new Promise(() => undefined);
+    })()
+  );
+}
+
+function devToolsRun(id: string): DevToolsRunSummary {
+  return { id } as unknown as DevToolsRunSummary;
+}
+
+function workflowRun(id: string): WorkflowRunRecord {
+  return { id, updatedAt: "2026-01-01T00:00:00.000Z" } as unknown as WorkflowRunRecord;
+}
+
+function script(name: string): AvailableWorkflow {
+  const workflow: AvailableWorkflow = {
+    descriptor: { name, description: `${name} script`, scope: "project", executable: true },
+    scriptPath: `skill://${name}/workflow.js`,
+    args: [],
+  };
+  return workflow;
+}
+
+function serverOverrides(): TestApiOverrides<APIClient> {
+  return {
+    devtools: {
+      subscribe: () =>
+        snapshotStream(
+          devToolsSnapshot().then((ids) => ({ type: "snapshot", runs: ids.map(devToolsRun) }))
+        ),
+    },
+    workflows: {
+      subscribe: () =>
+        snapshotStream(
+          workflowSnapshot().then((ids) => ({ type: "snapshot", runs: ids.map(workflowRun) }))
+        ),
+      listScripts: () => scriptNames().then((names) => names.map(script)),
+    },
+  } as unknown as TestApiOverrides<APIClient>;
+}
+
+let harness: ConnectionHarness;
+
+function Wrapper(props: { children: ReactNode }) {
+  const Connection = harness.Wrapper;
+  return <Connection>{props.children}</Connection>;
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  });
+}
+
+async function drop() {
+  await harness.drop();
+  await flush();
+}
+
+async function reconnect() {
+  harness.reconnect();
+  await flush();
+}
+
+function ids(runs: Array<{ id: string }>): string[] {
+  return runs.map((run) => run.id);
+}
+
+describe.each([...GAP_MODES])("live feeds across a dropped connection (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    harness = createConnectionHarness(mode, serverOverrides);
+    devToolsSnapshot = () => Promise.resolve(["run-a"]);
+    workflowSnapshot = () => Promise.resolve(["run-a"]);
+    scriptNames = () => Promise.resolve(["deploy"]);
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("the DevTools feed keeps the shown runs until the new snapshot", async () => {
+    const view = renderHook(() => useDevToolsSubscription("ws-1"), { wrapper: Wrapper });
+    await waitFor(() => expect(ids(view.result.current.runs)).toEqual(["run-a"]));
+
+    await drop();
+    expect(ids(view.result.current.runs)).toEqual(["run-a"]);
+
+    const next = deferred<string[]>();
+    devToolsSnapshot = () => next.promise;
+    await reconnect();
+    expect(ids(view.result.current.runs)).toEqual(["run-a"]);
+
+    next.resolve(["run-b"]);
+    await waitFor(() => expect(ids(view.result.current.runs)).toEqual(["run-b"]));
+  });
+
+  test("the workflow feed keeps the shown runs until the new snapshot", async () => {
+    const view = renderHook(() => useWorkflowRuns("ws-1"), { wrapper: Wrapper });
+    await waitFor(() => expect(ids(view.result.current.runs)).toEqual(["run-a"]));
+
+    await drop();
+    expect(ids(view.result.current.runs)).toEqual(["run-a"]);
+
+    const next = deferred<string[]>();
+    workflowSnapshot = () => next.promise;
+    await reconnect();
+    expect(ids(view.result.current.runs)).toEqual(["run-a"]);
+    expect(view.result.current.loading).toBe(false);
+
+    next.resolve(["run-b"]);
+    await waitFor(() => expect(ids(view.result.current.runs)).toEqual(["run-b"]));
+  });
+
+  test("the Workflows tab keeps its empty state and script list while it reloads", async () => {
+    workflowSnapshot = () => Promise.resolve([]);
+    const view = render(<WorkflowsTab workspaceId="ws-1" />, { wrapper: Wrapper });
+    await view.findByText("deploy");
+
+    await drop();
+    expect(view.queryByText("deploy")).not.toBeNull();
+
+    const nextRuns = deferred<string[]>();
+    const nextScripts = deferred<string[]>();
+    workflowSnapshot = () => nextRuns.promise;
+    scriptNames = () => nextScripts.promise;
+    await reconnect();
+    expect(view.queryByText("deploy")).not.toBeNull();
+    expect(view.queryByText("Loading workflow runs…")).toBeNull();
+
+    nextRuns.resolve([]);
+    nextScripts.resolve(["release"]);
+    await view.findByText("release");
+    expect(view.queryByText("deploy")).toBeNull();
+  });
+});
+
+describe.each([...GAP_MODES])("the Workflows tab opened while reconnecting (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(async () => {
+    cleanupDom = installDom();
+    harness = createConnectionHarness(mode, serverOverrides);
+    scriptNames = () => Promise.resolve(["deploy"]);
+    // The tab opens during the gap: no snapshot has landed yet.
+    await harness.drop();
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("shows its loading state, not the empty state, until the first snapshot lands", async () => {
+    workflowSnapshot = () => Promise.resolve([]);
+    const view = render(<WorkflowsTab workspaceId="ws-1" />, { wrapper: Wrapper });
+    await flush();
+
+    const next = deferred<string[]>();
+    workflowSnapshot = () => next.promise;
+    await reconnect();
+    expect(view.queryByText("Loading workflow runs…")).not.toBeNull();
+    expect(view.queryByText("deploy")).toBeNull();
+
+    next.resolve([]);
+    await view.findByText("deploy");
+    expect(view.queryByText("Loading workflow runs…")).toBeNull();
+  });
+});
+
+describe("live feeds of another workspace", () => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    harness = createConnectionHarness("kept-gap", serverOverrides);
+    devToolsSnapshot = () => Promise.resolve(["run-a"]);
+    workflowSnapshot = () => Promise.resolve(["run-a"]);
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("another workspace clears the shown runs while its own snapshot loads", async () => {
+    const devTools = renderHook(
+      (props: { workspaceId: string }) => useDevToolsSubscription(props.workspaceId),
+      {
+        wrapper: Wrapper,
+        initialProps: { workspaceId: "ws-1" },
+      }
+    );
+    const workflows = renderHook(
+      (props: { workspaceId: string }) => useWorkflowRuns(props.workspaceId),
+      {
+        wrapper: Wrapper,
+        initialProps: { workspaceId: "ws-1" },
+      }
+    );
+    await waitFor(() => expect(ids(devTools.result.current.runs)).toEqual(["run-a"]));
+    await waitFor(() => expect(ids(workflows.result.current.runs)).toEqual(["run-a"]));
+
+    devToolsSnapshot = () => new Promise(() => undefined);
+    workflowSnapshot = () => new Promise(() => undefined);
+    devTools.rerender({ workspaceId: "ws-2" });
+    workflows.rerender({ workspaceId: "ws-2" });
+    await flush();
+    expect(ids(devTools.result.current.runs)).toEqual([]);
+    expect(ids(workflows.result.current.runs)).toEqual([]);
+    expect(workflows.result.current.loading).toBe(true);
+  });
+});
diff --git a/src/browser/features/RightSidebar/loadersReconnect.test.tsx b/src/browser/features/RightSidebar/loadersReconnect.test.tsx
new file mode 100644
index 00000000000..c0eca4a12c7
--- /dev/null
+++ b/src/browser/features/RightSidebar/loadersReconnect.test.tsx
@@ -0,0 +1,364 @@
+// Bootstrap Happy DOM before react-dom evaluates (see MemoryTab.test.tsx).
+import "../../../../tests/ui/dom";
+
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { act, cleanup, fireEvent, render, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { installDom } from "../../../../tests/ui/dom";
+import { useChatInstructions } from "@/browser/components/InstructionsTab/AdditionalSystemContextScratchpad";
+import { InstructionsTab } from "@/browser/components/InstructionsTab/InstructionsTab";
+import { ProjectMCPOverview } from "@/browser/components/ProjectMCPOverview/ProjectMCPOverview";
+import type { APIClient } from "@/browser/contexts/API";
+import {
+  createConnectionHarness,
+  GAP_MODES,
+  type ConnectionHarness,
+} from "@/browser/contexts/connection.testHarness";
+import { RouterProvider } from "@/browser/contexts/RouterContext";
+import { SettingsProvider } from "@/browser/contexts/SettingsContext";
+import { TooltipProvider } from "@/browser/components/Tooltip/Tooltip";
+import type { TestApiOverrides } from "@/browser/testUtils";
+import { GoalDefaultsSection } from "./GoalDefaultsSection";
+import { useGoalBoard, type UseGoalBoardResult } from "./useGoalBoard";
+
+/*
+ * Panes that load once per workspace or project keep what they show across a dropped
+ * connection: the new client reloads in the background, a read cut off by the drop changes
+ * nothing, and only the read that lands replaces the shown data.
+ */
+
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T) => void;
+}
+
+function deferred<T>(): Deferred<T> {
+  let resolve!: (value: T) => void;
+  const promise = new Promise<T>((r) => (resolve = r));
+  return { promise, resolve };
+}
+
+/** What each server procedure answers; a test swaps them (or holds them) before a connect. */
+let answerBoard: () => Promise<unknown>;
+let answerServers: () => Promise<unknown>;
+let answerInstructions: () => Promise<unknown>;
+let answerChatInstructions: () => Promise<unknown>;
+let answerOverride: () => Promise<unknown>;
+let savedOverrides: unknown[] = [];
+let savedChatInstructions: Array<{ content: string; enabled: boolean }> = [];
+let failChatSave: Error | null = null;
+
+function board(goalId: string) {
+  return { entries: [{ section: "upcoming", goal: { goalId } }] };
+}
+
+function servers(name: string) {
+  return { [name]: { transport: "stdio", command: "run", disabled: false } };
+}
+
+function turnCapOverride(turnCap: number) {
+  return { defaultBudgetCents: null, defaultTurnCap: turnCap, alwaysRequireExplicitBudget: null };
+}
+
+function serverOverrides(): TestApiOverrides<APIClient> {
+  return {
+    workspace: {
+      getGoalBoard: () => answerBoard(),
+      getInstructions: () => answerInstructions(),
+      getAdditionalSystemContext: () => answerChatInstructions(),
+      setAdditionalSystemContext: (input: { content: string; enabled: boolean }) => {
+        if (failChatSave) return Promise.reject(failChatSave);
+        savedChatInstructions.push({ content: input.content, enabled: input.enabled });
+        return Promise.resolve({ content: input.content, enabled: input.enabled });
+      },
+      goalDefaults: {
+        get: () => answerOverride(),
+        set: (input: unknown) => {
+          savedOverrides.push(input);
+          return Promise.resolve();
+        },
+      },
+    },
+    mcp: { list: () => answerServers() },
+    config: { getConfig: () => Promise.resolve({}) },
+  } as unknown as TestApiOverrides<APIClient>;
+}
+
+let harness: ConnectionHarness;
+
+function Wrapper(props: { children: ReactNode }) {
+  const Connection = harness.Wrapper;
+  return (
+    <Connection>
+      <RouterProvider>
+        <SettingsProvider>
+          <TooltipProvider>{props.children}</TooltipProvider>
+        </SettingsProvider>
+      </RouterProvider>
+    </Connection>
+  );
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  });
+}
+
+async function drop() {
+  await harness.drop();
+  await flush();
+}
+
+async function reconnect() {
+  harness.reconnect();
+  await flush();
+}
+
+/** Never answers: the read stays in flight until a drop cuts it off. */
+function pending(): Promise<unknown> {
+  return new Promise(() => undefined);
+}
+
+function goalIds(result: { current: UseGoalBoardResult }): string[] {
+  return result.current.board.entries.map((entry) => entry.goal.goalId);
+}
+
+describe.each([...GAP_MODES])("loaded panes across a dropped connection (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    window.localStorage.clear();
+    harness = createConnectionHarness(mode, serverOverrides);
+    savedOverrides = [];
+    savedChatInstructions = [];
+    failChatSave = null;
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("the goal board keeps its goals through a reload the drop cut off", async () => {
+    answerBoard = () => Promise.resolve(board("goal-a"));
+    const view = renderHook(() => useGoalBoard("ws-1"), { wrapper: Wrapper });
+    await waitFor(() => expect(goalIds(view.result)).toEqual(["goal-a"]));
+
+    await drop();
+    expect(goalIds(view.result)).toEqual(["goal-a"]);
+
+    // The new client's read is still in flight when a second drop cuts it off.
+    answerBoard = pending;
+    await reconnect();
+    await drop();
+    expect(goalIds(view.result)).toEqual(["goal-a"]);
+
+    answerBoard = () => Promise.resolve(board("goal-b"));
+    await reconnect();
+    await waitFor(() => expect(goalIds(view.result)).toEqual(["goal-b"]));
+  });
+
+  test("the MCP overview keeps its servers through a reload the drop cut off", async () => {
+    answerServers = () => Promise.resolve(servers("alpha"));
+    const view = render(<ProjectMCPOverview projectPath="/projects/demo" />, {
+      wrapper: Wrapper,
+    });
+    await view.findByText("alpha");
+
+    await drop();
+    expect(view.queryByText("alpha")).not.toBeNull();
+
+    answerServers = pending;
+    await reconnect();
+    await drop();
+    expect(view.queryByText("alpha")).not.toBeNull();
+    expect(view.queryByText("No MCP servers enabled for this project.")).toBeNull();
+
+    answerServers = () => Promise.resolve(servers("beta"));
+    await reconnect();
+    await view.findByText("beta");
+  });
+
+  test("the Instructions tab keeps its empty state and an enabled editor while it reloads", async () => {
+    answerInstructions = () => Promise.resolve({ files: [], totalTokens: 0 });
+    answerChatInstructions = () => Promise.resolve({ content: "be brief", enabled: true });
+    const view = render(<InstructionsTab workspaceId="ws-instructions" />, { wrapper: Wrapper });
+    const editor = (await view.findByLabelText("Chat Instructions editor")) as HTMLTextAreaElement;
+    await waitFor(() => expect(editor.value).toBe("be brief"));
+    await view.findByText("No instruction files loaded for this workspace.");
+    expect(editor.disabled).toBe(false);
+
+    await drop();
+    const nextInstructions = deferred<unknown>();
+    const nextChatInstructions = deferred<unknown>();
+    answerInstructions = () => nextInstructions.promise;
+    answerChatInstructions = () => nextChatInstructions.promise;
+    await reconnect();
+    expect(view.queryByText("No instruction files loaded for this workspace.")).not.toBeNull();
+    expect(editor.disabled).toBe(false);
+    expect(view.queryByText("Loading…")).toBeNull();
+
+    nextInstructions.resolve({ files: [], totalTokens: 0 });
+    nextChatInstructions.resolve({ content: "be precise", enabled: true });
+    await waitFor(() => expect(editor.value).toBe("be precise"));
+  });
+
+  test("the goal defaults keep the override editable while they reload, and an edit wins", async () => {
+    answerOverride = () => Promise.resolve(turnCapOverride(5));
+    const view = render(<GoalDefaultsSection workspaceId="ws-1" embedded />, {
+      wrapper: Wrapper,
+    });
+    const turnCap = () =>
+      view.getByLabelText("Workspace default goal turn cap") as HTMLInputElement;
+    await waitFor(() => expect(turnCap().value).toBe("5"));
+
+    await drop();
+    const next = deferred<unknown>();
+    answerOverride = () => next.promise;
+    await reconnect();
+    expect(turnCap().value).toBe("5");
+    expect(turnCap().disabled).toBe(false);
+    expect(view.queryByText("Loading…")).toBeNull();
+
+    // The user edits while the reload is in flight; its older answer must not undo the edit.
+    fireEvent.change(turnCap(), { target: { value: "9" } });
+    fireEvent.blur(turnCap());
+    await waitFor(() => expect(savedOverrides).toHaveLength(1));
+    next.resolve(turnCapOverride(7));
+    await flush();
+    expect(turnCap().value).toBe("9");
+  });
+});
+
+describe.each([...GAP_MODES])("edits and navigation while reconnecting (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    window.localStorage.clear();
+    harness = createConnectionHarness(mode, serverOverrides);
+    savedOverrides = [];
+    savedChatInstructions = [];
+    failChatSave = null;
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("the chat-instructions editor is read-only while offline, and editable again after the reconnect", async () => {
+    const workspaceId = `ws-offline-edit-${mode}`;
+    answerInstructions = () => Promise.resolve({ files: [], totalTokens: 0 });
+    answerChatInstructions = () => Promise.resolve({ content: "be brief", enabled: true });
+    const view = render(<InstructionsTab workspaceId={workspaceId} />, { wrapper: Wrapper });
+    const editor = (await view.findByLabelText("Chat Instructions editor")) as HTMLTextAreaElement;
+    const toggle = view.getByLabelText("Enable Chat Instructions") as HTMLInputElement;
+    await waitFor(() => expect(editor.value).toBe("be brief"));
+    expect(editor.disabled).toBe(false);
+
+    await drop();
+    expect(editor.value).toBe("be brief");
+    expect(editor.disabled).toBe(true);
+    expect(toggle.disabled).toBe(true);
+
+    await reconnect();
+    await waitFor(() => expect(editor.disabled).toBe(false));
+    expect(toggle.disabled).toBe(false);
+    expect(savedChatInstructions).toEqual([]);
+  });
+
+  test("after a failed save, a reconnect shows what the server stored", async () => {
+    const workspaceId = `ws-failed-save-${mode}`;
+    answerChatInstructions = () => Promise.resolve({ content: "be brief", enabled: true });
+    const view = renderHook(() => useChatInstructions(workspaceId), { wrapper: Wrapper });
+    await waitFor(() => expect(view.result.current.content).toBe("be brief"));
+
+    failChatSave = new Error("disk full");
+    act(() => view.result.current.setContent("be kind"));
+    await waitFor(() => expect(view.result.current.error).toBe("disk full"));
+
+    await drop();
+    await reconnect();
+    await waitFor(() => expect(view.result.current.content).toBe("be brief"));
+  });
+
+  test("the goal defaults are read-only while offline, and editable again after the reconnect", async () => {
+    answerOverride = () => Promise.resolve(turnCapOverride(5));
+    const view = render(<GoalDefaultsSection workspaceId="ws-1" embedded />, {
+      wrapper: Wrapper,
+    });
+    const turnCap = () =>
+      view.getByLabelText("Workspace default goal turn cap") as HTMLInputElement;
+    const stopOverriding = () =>
+      view.getByRole("button", { name: "Stop overriding Default turn cap" }) as HTMLButtonElement;
+    await waitFor(() => expect(turnCap().value).toBe("5"));
+    expect(turnCap().disabled).toBe(false);
+
+    await drop();
+    expect(turnCap().value).toBe("5");
+    expect(turnCap().disabled).toBe(true);
+    expect(stopOverriding().disabled).toBe(true);
+
+    await reconnect();
+    await waitFor(() => expect(turnCap().disabled).toBe(false));
+    expect(stopOverriding().disabled).toBe(false);
+    expect(savedOverrides).toEqual([]);
+  });
+
+  test("the MCP overview never shows one project's servers under another", async () => {
+    answerServers = () => Promise.resolve(servers("alpha"));
+    const view = render(<ProjectMCPOverview projectPath="/projects/a" />, { wrapper: Wrapper });
+    await view.findByText("alpha");
+
+    // Project B's first list is still loading when the connection drops and cuts it off.
+    answerServers = pending;
+    view.rerender(<ProjectMCPOverview projectPath="/projects/b" />);
+    await flush();
+    expect(view.queryByText("alpha")).toBeNull();
+    await drop();
+    expect(view.queryByText("alpha")).toBeNull();
+
+    answerServers = () => Promise.resolve(servers("beta"));
+    await reconnect();
+    await view.findByText("beta");
+    expect(view.queryByText("alpha")).toBeNull();
+  });
+});
+
+describe("loaded panes of another workspace", () => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    window.localStorage.clear();
+    harness = createConnectionHarness("kept-gap", serverOverrides);
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("another workspace clears the shown override while its own loads", async () => {
+    answerOverride = () => Promise.resolve(turnCapOverride(5));
+    const view = render(<GoalDefaultsSection workspaceId="ws-1" embedded />, {
+      wrapper: Wrapper,
+    });
+    await waitFor(() =>
+      expect(
+        (view.getByLabelText("Workspace default goal turn cap") as HTMLInputElement).value
+      ).toBe("5")
+    );
+
+    answerOverride = pending;
+    view.rerender(<GoalDefaultsSection workspaceId="ws-2" embedded />);
+    await waitFor(() => expect(view.queryByText("Loading…")).not.toBeNull());
+    expect(view.queryByLabelText("Workspace default goal turn cap")).toBeNull();
+  });
+});
diff --git a/src/browser/features/RightSidebar/offlinePanes.test.tsx b/src/browser/features/RightSidebar/offlinePanes.test.tsx
new file mode 100644
index 00000000000..32cd9be9ed3
--- /dev/null
+++ b/src/browser/features/RightSidebar/offlinePanes.test.tsx
@@ -0,0 +1,369 @@
+// Bootstrap Happy DOM before react-dom evaluates (see MemoryTab.test.tsx).
+import "../../../../tests/ui/dom";
+
+import { afterEach, beforeEach, describe, expect, 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 { BackgroundBashOutputDialog } from "@/browser/components/BackgroundBashOutputDialog/BackgroundBashOutputDialog";
+import { ProjectMCPOverview } from "@/browser/components/ProjectMCPOverview/ProjectMCPOverview";
+import type { APIClient } from "@/browser/contexts/API";
+import {
+  createConnectionHarness,
+  GAP_MODES,
+  type ConnectionHarness,
+} from "@/browser/contexts/connection.testHarness";
+import { RouterProvider } from "@/browser/contexts/RouterContext";
+import { SettingsProvider } from "@/browser/contexts/SettingsContext";
+import type { TestApiOverrides } from "@/browser/testUtils";
+import type { DevToolsRunSummary } from "@/common/types/devtools";
+import type { GoalBoardSnapshot } from "@/common/types/goal";
+import type { AvailableWorkflow, WorkflowRunRecord } from "@/common/types/workflow";
+import { DevToolsRunCard } from "./DevToolsTab/DevToolsRunCard";
+import { DevToolsTab } from "./DevToolsTab/DevToolsTab";
+import { projectWorkflowRun } from "./Workflows/projectWorkflowRun";
+import { WorkflowRunHeader } from "./Workflows/WorkflowRunHeader";
+import { GoalBoardSections } from "./GoalBoardSections";
+import { WorkflowsTab } from "./Workflows/WorkflowsTab";
+
+/*
+ * Panes keep what they show while Xum reconnects. That must not hide failures:
+ * - a server cancel on a live socket (a plain AbortError) is an error like any other, not a lost
+ *   connection, since no new client will come to retry it;
+ * - a control that needs the server does nothing without one, so it says so or is disabled;
+ * - work cut off by the lost connection runs again on the next client.
+ */
+
+let answerServers: () => Promise<unknown>;
+let answerOutput: () => Promise<unknown>;
+let answerRunDetail: () => Promise<unknown>;
+let mutations: string[] = [];
+
+/** A server cancel on a live socket: an abort that is not a lost connection. */
+function serverCancel(): Promise<never> {
+  return Promise.reject(new DOMException("cancelled by the server", "AbortError"));
+}
+
+/** Never answers: the read stays in flight until a drop cuts it off. */
+function pending(): Promise<unknown> {
+  return new Promise(() => undefined);
+}
+
+function outputResult(output: string) {
+  return {
+    success: true as const,
+    data: { status: "exited" as const, output, nextOffset: output.length, truncatedStart: false },
+  };
+}
+
+function mutation(name: string) {
+  return () => {
+    mutations.push(name);
+    return Promise.resolve();
+  };
+}
+
+function serverOverrides(): TestApiOverrides<APIClient> {
+  return {
+    mcp: { list: () => answerServers() },
+    workspace: {
+      backgroundBashes: { getOutput: () => answerOutput() },
+      promoteUpcomingGoal: mutation("promote"),
+      archiveGoal: mutation("archive"),
+      reviveArchivedGoal: mutation("revive"),
+      updateUpcomingGoal: mutation("update"),
+      goalDefaults: { get: () => Promise.resolve(null) },
+    },
+    workflows: {
+      subscribe: () =>
+        Promise.resolve(
+          (async function* () {
+            yield { type: "snapshot", runs: [] };
+            await new Promise(() => undefined);
+          })()
+        ),
+      listScripts: () => Promise.resolve([workflowScript()]),
+      start: mutation("start"),
+    },
+    devtools: {
+      getRunDetail: () => answerRunDetail(),
+      subscribe: () =>
+        Promise.resolve(
+          (async function* () {
+            yield { type: "snapshot", runs: [devToolsRun()] };
+            await new Promise(() => undefined);
+          })()
+        ),
+      clear: mutation("clear"),
+    },
+    config: { getConfig: () => Promise.resolve({}) },
+  } as unknown as TestApiOverrides<APIClient>;
+}
+
+function workflowScript(): AvailableWorkflow {
+  const script: AvailableWorkflow = {
+    descriptor: {
+      name: "deploy",
+      description: "deploy script",
+      scope: "project",
+      executable: true,
+    },
+    scriptPath: "skill://deploy/workflow.js",
+    args: [],
+  };
+  return script;
+}
+
+function goalBoard(): GoalBoardSnapshot {
+  const goal = (goalId: string, objective: string) =>
+    ({
+      goalId,
+      objective,
+      status: "active",
+      budgetCents: null,
+      costCents: 0,
+    }) as unknown as GoalBoardSnapshot["entries"][number]["goal"];
+  return {
+    entries: [
+      { section: "upcoming", goal: goal("11111111-1111-4111-8111-111111111111", "Ship it") },
+      { section: "archived", goal: goal("22222222-2222-4222-8222-222222222222", "Old idea") },
+    ],
+  };
+}
+
+function devToolsRun(): DevToolsRunSummary {
+  return {
+    id: "run-1",
+    firstMessage: "hello",
+    stepCount: 0,
+    totalDurationMs: null,
+    modelId: null,
+    isInProgress: false,
+    hasError: false,
+  } as unknown as DevToolsRunSummary;
+}
+
+function workflowRun(status: WorkflowRunRecord["status"]): WorkflowRunRecord {
+  return {
+    id: "wfr_test",
+    workspaceId: "ws-1",
+    workflow: { name: "deploy", description: "deploy", scope: "project", executable: true },
+    source: "export default function workflow() { return null; }",
+    sourceHash: "sha256:test",
+    args: {},
+    status,
+    createdAt: "2026-05-29T00:00:00.000Z",
+    updatedAt: "2026-05-29T00:00:01.000Z",
+    events: [],
+    steps: [],
+  };
+}
+
+let harness: ConnectionHarness;
+
+function Wrapper(props: { children: ReactNode }) {
+  const Connection = harness.Wrapper;
+  return (
+    <Connection>
+      <RouterProvider>
+        <SettingsProvider>{props.children}</SettingsProvider>
+      </RouterProvider>
+    </Connection>
+  );
+}
+
+async function flush() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+  });
+}
+
+async function drop() {
+  await harness.drop();
+  await flush();
+}
+
+async function reconnect() {
+  harness.reconnect();
+  await flush();
+}
+
+function noop() {
+  return undefined;
+}
+
+describe.each([...GAP_MODES])("panes kept across a dropped connection (%s)", (mode) => {
+  let cleanupDom: (() => void) | null = null;
+
+  beforeEach(() => {
+    cleanupDom = installDom();
+    window.localStorage.clear();
+    harness = createConnectionHarness(mode, serverOverrides);
+    mutations = [];
+  });
+
+  afterEach(() => {
+    cleanup();
+    cleanupDom?.();
+    cleanupDom = null;
+  });
+
+  test("a server cancel on a live socket shows the MCP load error and ends its spinner", async () => {
+    answerServers = serverCancel;
+    const view = render(<ProjectMCPOverview projectPath="/projects/cancel" />, {
+      wrapper: Wrapper,
+    });
+    await flush();
+
+    expect(view.queryByText("cancelled by the server")).not.toBeNull();
+    expect(view.container.querySelector(".animate-spin")).toBeNull();
+  });
+
+  test("a server cancel on a live socket shows the process output error instead of loading", async () => {
+    answerOutput = serverCancel;
+    const view = render(
+      <BackgroundBashOutputDialog open onOpenChange={noop} workspaceId="ws-1" processId="p1" />,
+      { wrapper: Wrapper }
+    );
+    await flush();
+
+    expect(view.queryByText("cancelled by the server")).not.toBeNull();
+    expect(view.queryByText("Loading…")).toBeNull();
+  });
+
+  test("the Workflows tab disables Run while there is no live client", async () => {
+    const view = render(<WorkflowsTab workspaceId="ws-1" />, { wrapper: Wrapper });
+    const run = () => view.getByRole("button", { name: /Run/ }) as HTMLButtonElement;
+    await view.findByText("deploy");
+    expect(run().disabled).toBe(false);
+
+    await drop();
+    expect(view.queryByText("deploy")).not.toBeNull();
+    expect(run().disabled).toBe(true);
+
+    await reconnect();
+    expect(run().disabled).toBe(false);
+    fireEvent.click(run());
+    await waitFor(() => expect(mutations).toEqual(["start"]));
+  });
+
+  test("goal-board changes made offline say so, and an edit stays open", async () => {
+    const view = render(
+      <GoalBoardSections workspaceId="ws-1" board={goalBoard()} onMutated={noop} />,
+      { wrapper: Wrapper }
+    );
+    await flush();
+    await drop();
+
+    fireEvent.click(view.getByRole("button", { name: "Promote Ship it" }));
+    await view.findByText(/Not connected/);
+
+    fireEvent.click(view.getByRole("button", { name: "Edit Ship it" }));
+    fireEvent.click(view.getByRole("button", { name: "Save" }));
+    await flush();
+    // The editor stays open: nothing was saved.
+    expect(view.queryByLabelText("Goal objective")).not.toBeNull();
+
+    fireEvent.click(view.getByRole("button", { name: /Archived/ }));
+    fireEvent.click(view.getByRole("button", { name: "Revive Old idea" }));
+    await waitFor(() => expect(view.queryAllByText(/Not connected/).length).toBe(2));
+    expect(mutations).toEqual([]);
+  });
+
+  test("a background process opened offline ends its loading state, and loads on the next client", async () => {
+    await drop();
+    answerOutput = () => Promise.resolve(outputResult("line A"));
+    const view = render(
+      <BackgroundBashOutputDialog open onOpenChange={noop} workspaceId="ws-1" processId="p1" />,
+      { wrapper: Wrapper }
+    );
+    await flush();
+    expect(view.queryByText("Loading…")).toBeNull();
+
+    const next = Promise.withResolvers<unknown>();
+    answerOutput = () => next.promise;
+    await reconnect();
+    expect(view.queryByText("Loading…")).not.toBeNull();
+    next.resolve(outputResult("line A"));
+    await view.findByText("line A");
+  });
+
+  test("an expanded DevTools run whose detail the drop cut off reads it again on the next client", async () => {
+    answerRunDetail = pending;
+    const view = render(<DevToolsRunCard run={devToolsRun()} workspaceId="ws-1" />, {
+      wrapper: Wrapper,
+    });
+    fireEvent.click(view.getByRole("button", { name: /hello/ }));
+    await flush();
+
+    await drop();
+    expect(view.queryByText(/Not connected/)).toBeNull();
+
+    answerRunDetail = () => Promise.resolve(null);
+    await reconnect();
+    await view.findByText("No steps recorded");
+    expect(view.queryByText(/Not connected/)).toBeNull();
+  });
+
+  test("the run header's actions are disabled while there is no live client", async () => {
+    const live = workflowRun("running");
+    const interrupted = workflowRun("interrupted");
+    const view = render(
+      <>
+        <WorkflowRunHeader workspaceId="ws-1" run={live} view={projectWorkflowRun(live)} />
+        <WorkflowRunHeader
+          workspaceId="ws-1"
+          run={interrupted}
+          view={projectWorkflowRun(interrupted)}
+        />
+      </>,
+      { wrapper: Wrapper }
+    );
+    const interrupt = () => view.getByRole("button", { name: /Interrupt/ }) as HTMLButtonElement;
+    const resume = () => view.getByRole("button", { name: /Resume/ }) as HTMLButtonElement;
+    expect(interrupt().disabled).toBe(false);
+    expect(resume().disabled).toBe(false);
+
+    await drop();
+    expect(interrupt().disabled).toBe(true);
+    expect(resume().disabled).toBe(true);
+
+    await reconnect();
+    expect(interrupt().disabled).toBe(false);
+    expect(resume().disabled).toBe(false);
+  });
+
+  test("DevTools Clear is disabled while there is no live client", async () => {
+    const view = render(<DevToolsTab workspaceId="ws-1" />, { wrapper: Wrapper });
+    const clear = () => view.getByRole("button", { name: "Clear debug logs" }) as HTMLButtonElement;
+    await view.findByText("hello");
+    expect(clear().disabled).toBe(false);
+
+    await drop();
+    expect(view.queryByText("hello")).not.toBeNull();
+    expect(clear().disabled).toBe(true);
+
+    await reconnect();
+    expect(clear().disabled).toBe(false);
+    fireEvent.click(clear());
+    await waitFor(() => expect(mutations).toEqual(["clear"]));
+  });
+
+  test("a DevTools run expanded while reconnecting waits for its detail instead of showing none", async () => {
+    answerRunDetail = () => Promise.resolve(null);
+    const view = render(<DevToolsRunCard run={devToolsRun()} workspaceId="ws-1" />, {
+      wrapper: Wrapper,
+    });
+    await drop();
+    // In the kept gap the kept client's read fails at once with a lost connection.
+    answerRunDetail = pending;
+    fireEvent.click(view.getByRole("button", { name: /hello/ }));
+    await flush();
+    expect(view.queryByText("No steps recorded")).toBeNull();
+    expect(view.container.querySelector(".animate-spin")).not.toBeNull();
+
+    answerRunDetail = () => Promise.resolve(null);
+    await reconnect();
+    await view.findByText("No steps recorded");
+  });
+});
diff --git a/src/browser/features/RightSidebar/useGoalBoard.ts b/src/browser/features/RightSidebar/useGoalBoard.ts
index 8819e639b6c..625a2e5cb75 100644
--- a/src/browser/features/RightSidebar/useGoalBoard.ts
+++ b/src/browser/features/RightSidebar/useGoalBoard.ts
@@ -1,6 +1,7 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 
-import { APIContext } from "@/browser/contexts/API";
+import { APIContext, type APIClient } from "@/browser/contexts/API";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import type { GoalBoardSnapshot } from "@/common/types/goal";
 
 /**
@@ -20,6 +21,23 @@ import type { GoalBoardSnapshot } from "@/common/types/goal";
  * tighter coupling could push board snapshots through the activity
  * channel; today's reads are cheap enough to drive on-demand.
  */
+const EMPTY_BOARD: GoalBoardSnapshot = { entries: [] };
+
+/**
+ * Reads a workspace's board. A failed read is an empty board, as before, but a read cut off by a
+ * lost connection resolves to null: the caller keeps the board it shows for the next client.
+ */
+async function readGoalBoard(
+  api: APIClient,
+  workspaceId: string
+): Promise<GoalBoardSnapshot | null> {
+  try {
+    return (await api.workspace.getGoalBoard({ workspaceId })) ?? EMPTY_BOARD;
+  } catch (error) {
+    return isConnectionLostError(error) ? null : EMPTY_BOARD;
+  }
+}
+
 export interface UseGoalBoardResult {
   board: GoalBoardSnapshot;
   isLoading: boolean;
@@ -46,30 +64,24 @@ export function useGoalBoard(
   // `useGoalDefaults`.
   const context = useContext(APIContext);
   const api = context?.api ?? null;
-  const [board, setBoard] = useState<GoalBoardSnapshot>({ entries: [] });
+  const [board, setBoard] = useState<GoalBoardSnapshot>(EMPTY_BOARD);
   const [isLoading, setIsLoading] = useState(true);
   const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
     if (!api || !workspaceId) {
-      setBoard({ entries: [] });
+      // No client (a reconnect) keeps the shown board; no workspace has no board.
+      setBoard((current) => (workspaceId ? current : EMPTY_BOARD));
       setIsLoading(false);
       return;
     }
     let cancelled = false;
     setIsLoading(true);
-    void api.workspace
-      .getGoalBoard({ workspaceId })
-      .then((snapshot) => {
-        if (cancelled) return;
-        setBoard(snapshot ?? { entries: [] });
-        setIsLoading(false);
-      })
-      .catch(() => {
-        if (cancelled) return;
-        setBoard({ entries: [] });
-        setIsLoading(false);
-      });
+    void readGoalBoard(api, workspaceId).then((snapshot) => {
+      if (cancelled || snapshot == null) return;
+      setBoard(snapshot);
+      setIsLoading(false);
+    });
     return () => {
       cancelled = true;
     };
diff --git a/src/browser/features/Tools/SubagentTranscriptDialog.tsx b/src/browser/features/Tools/SubagentTranscriptDialog.tsx
index d10b2fc5145..885206e5df8 100644
--- a/src/browser/features/Tools/SubagentTranscriptDialog.tsx
+++ b/src/browser/features/Tools/SubagentTranscriptDialog.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import type { DisplayedMessage, MuxMessage } from "@/common/types/message";
 import type { ThinkingLevel } from "@/common/types/thinking";
 import type { ChatMuxMessage } from "@/common/orpc/types";
@@ -14,6 +14,7 @@ import { ErrorBox, LoadingDots } from "./Shared/ToolPrimitives";
 import { MessageRenderer } from "@/browser/features/Messages/MessageRenderer";
 import { ModelDisplay } from "@/browser/features/Messages/ModelDisplay";
 import { BashCollapsedSummaryModeProvider } from "./BashCollapsedSummaryModeContext";
+import { isConnectionLostError } from "@/browser/contexts/connectionLink";
 import { getErrorMessage } from "@/common/utils/errors";
 
 interface SubagentTranscriptDialogProps {
@@ -54,7 +55,10 @@ export const SubagentTranscriptDialog: React.FC<SubagentTranscriptDialogProps> =
           </DialogTitle>
         </DialogHeader>
 
+        {/* Keyed by the transcript, so another task starts from an empty viewer, while a new API
+            client (a reconnect) only re-runs the viewer's read and keeps the transcript shown. */}
         <SubagentTranscriptViewer
+          key={props.taskId}
           open={props.open}
           workspaceId={props.workspaceId}
           taskId={props.taskId}
@@ -70,8 +74,8 @@ const SubagentTranscriptViewer: React.FC<{
   open: boolean;
   workspaceId?: string;
   taskId: string;
-  setModel?: (model: string | undefined) => void;
-  setThinkingLevel?: (thinkingLevel: ThinkingLevel | undefined) => void;
+  setModel: (model: string | undefined) => void;
+  setThinkingLevel: (thinkingLevel: ThinkingLevel | undefined) => void;
 }> = (props) => {
   const { api } = useAPI();
 
@@ -81,9 +85,19 @@ const SubagentTranscriptViewer: React.FC<{
   const setModel = props.setModel;
   const setThinkingLevel = props.setThinkingLevel;
 
-  const [isLoading, setIsLoading] = useState(false);
+  // Loading until the first read lands: a fresh viewer (another task, or the dialog reopened)
+  // starts empty, and a new API client keeps what the viewer shows.
+  const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [messages, setMessages] = useState<MuxMessage[] | null>(null);
+  // True once a transcript is on screen: a re-read (a new API client) then keeps it shown.
+  const hasTranscriptRef = useRef(false);
+
+  // The header's model and thinking level belong to the transcript this viewer shows.
+  useEffect(() => {
+    setModel(undefined);
+    setThinkingLevel(undefined);
+  }, [setModel, setThinkingLevel]);
 
   useEffect(() => {
     // TaskToolCall renders this dialog component for each completed task even while closed.
@@ -92,11 +106,7 @@ const SubagentTranscriptViewer: React.FC<{
       return;
     }
 
-    setIsLoading(true);
     setError(null);
-    setMessages(null);
-    setModel?.(undefined);
-    setThinkingLevel?.(undefined);
 
     if (!api) {
       setIsLoading(false);
@@ -104,6 +114,12 @@ const SubagentTranscriptViewer: React.FC<{
       return;
     }
 
+    // Without a transcript on screen, show the loading state (the dialog may have opened while
+    // there was no client).
+    if (!hasTranscriptRef.current) {
+      setIsLoading(true);
+    }
+
     let cancelled = false;
 
     const run = async () => {
@@ -116,11 +132,14 @@ const SubagentTranscriptViewer: React.FC<{
         if (cancelled) return;
 
         setMessages(transcript.messages);
-        setModel?.(transcript.model);
-        setThinkingLevel?.(transcript.thinkingLevel);
+        setModel(transcript.model);
+        setThinkingLevel(transcript.thinkingLevel);
         setIsLoading(false);
+        hasTranscriptRef.current = true;
       } catch (err: unknown) {
-        if (cancelled) return;
+        // A lost connection (or this effect's own cleanup) is not a transcript error: keep what
+        // is shown for the next client.
+        if (cancelled || isConnectionLostError(err)) return;
         setIsLoading(false);
         setError(getErrorMessage(err));
       }