perf(chat): make session switching feel instant

Switching sessions ran as one synchronous commit: sidebar highlight, URL,
a full timeline remount with markdown re-parse, and around nine requests,
so nothing changed on screen for 150-250ms after the click.

- ChatContainer swaps the timeline on a deferred copy of the selection, so
  the active row, URL, and tab commit first and the timeline renders behind
  them; selection policy keeps reading the live store value.
- The message fetch starts before the selection is published.
- Sidebar rows stop re-rendering on a project switch: directory-scoped sync
  hooks read the runtime context and a subscribable current-directory source
  instead of the directory-bearing context; the grouping builder reads git
  branches through a ref and section caches key the branches they use;
  descendant ids are keyed by content. Rows per switch went from 73 to 8.
- Markdown skips the async re-render when the settled cached blocks are
  already painted, and mounts synchronously once its lazy module is loaded;
  the module is preloaded at boot.
- A timeline reveal gate holds a freshly opened session at opacity 0 while
  any provisional markdown paint catches up (250ms cap), then fades the whole
  timeline in once, so text, tools, and recap appear together.
- Switch fan-out trimmed: knowledge summary deduped, MCP status refreshed only
  when stale, non-repo directories cached by the git repo check, OpenChamber
  defaults cached briefly, agent memory reused for the same project, goal
  text cached, PWA manifest rebuilt after the switch settles.
- Header tabs snap into the active state and keep the title at the same
  height in both states.
- Prefetch on row press; composer focus moved off the commit.

`bun run profile:switch` records ack/content latency, longest task, and
requests per switch, cold and warm, and compares runs against a baseline.
Measured warm switch: ack 228ms to about 40-60ms, content 228ms to about
100-120ms.

packages/ui/src/components/chat/ChatContainer.tsx

@@ -11,6 +11,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import ChatEmptyState from './ChatEmptyState';
 import { useGlobalSyncStore } from '@/sync/global-sync-store';
 import MessageList, { type MessageListHandle } from './MessageList';
+import { createTimelineRevealGate, TIMELINE_REVEAL_CAP_MS, TimelineRevealGateContext } from './timelineRevealGate';
 import { PermissionCard } from './PermissionCard';
 import { QuestionCard } from './QuestionCard';
 import { hasActiveQuestionToolInCurrentTurn, recoverPendingQuestionWithRetry } from '@/sync/question-recovery';
@@ -175,9 +176,6 @@ type ChatViewportProps = {
     } | null;
     scrollToBottom: () => void;
     endPinningReleased: boolean;
-    // One-shot fade for content that replaced the hydration skeleton;
-    // cached sessions render instantly without it.
-    revealContent: boolean;
     sessionQuestions: QuestionRequest[];
     sessionPermissions: PermissionRequest[];
     isProgrammaticFollowActive: boolean;
@@ -214,7 +212,6 @@ const ChatViewport = React.memo(({
     retryOverlay,
     scrollToBottom,
     endPinningReleased,
-    revealContent,
     sessionQuestions,
     sessionPermissions,
     isProgrammaticFollowActive,
@@ -368,6 +365,45 @@ const ChatViewport = React.memo(({
         </>
     ), [currentSessionId, directory, isMobile, sessionPermissions, sessionQuestions]);
 
+    // Opening a session paints the timeline as one finished picture: the root
+    // stays invisible while any renderer holds a provisional first paint, then
+    // everything appears together. A warm switch, where nothing is held,
+    // reveals in the same frame; a cold open fades in once as a whole.
+    const timelineRootRef = React.useRef<HTMLDivElement | null>(null);
+    const revealGate = React.useMemo(() => createTimelineRevealGate(), [currentSessionKey]);
+    React.useLayoutEffect(() => {
+        const root = timelineRootRef.current;
+        if (!root) return;
+        root.setAttribute('data-timeline-reveal', 'pending');
+        let finished = false;
+        let timer: number | null = null;
+        const reveal = (fade: boolean) => {
+            if (finished) return;
+            finished = true;
+            if (timer !== null) window.clearTimeout(timer);
+            if (fade) root.setAttribute('data-timeline-reveal', 'fading');
+            else root.removeAttribute('data-timeline-reveal');
+        };
+        // Holds are taken in layout effects, including those of rows the list
+        // mounts in a nested synchronous pass; a microtask runs after all of
+        // them and still before the browser paints this commit.
+        queueMicrotask(() => {
+            if (finished) return;
+            revealGate.close();
+            if (revealGate.holds === 0) {
+                reveal(false);
+                return;
+            }
+            revealGate.onEmpty = () => reveal(true);
+            timer = window.setTimeout(() => reveal(true), TIMELINE_REVEAL_CAP_MS);
+        });
+        return () => {
+            finished = true;
+            if (timer !== null) window.clearTimeout(timer);
+            revealGate.onEmpty = null;
+        };
+    }, [revealGate]);
+
     const scrollContainerProps = React.useMemo(() => ({
         className: 'absolute inset-0 overflow-y-auto overflow-x-hidden z-0 chat-scroll overlay-scrollbar-target',
         style: CHAT_SCROLL_STYLE,
@@ -385,11 +421,12 @@ const ChatViewport = React.memo(({
                 isDesktopExpandedInput
                     ? 'absolute inset-0 opacity-0 pointer-events-none'
                     : 'flex-1',
-                revealContent && !isDesktopExpandedInput && 'oc-chat-hydration-reveal',
             )}
+            ref={timelineRootRef}
             aria-hidden={isDesktopExpandedInput}
         >
             <div className="absolute inset-0">
+              <TimelineRevealGateContext.Provider value={revealGate}>
                 <MessageList
                     key={currentSessionKey}
                     ref={messageListRef}
@@ -417,6 +454,7 @@ const ChatViewport = React.memo(({
                     listFooter={listFooter}
                     scrollContainerProps={scrollContainerProps}
                 />
+              </TimelineRevealGateContext.Provider>
                 <OverlayScrollbar containerRef={scrollRef} disableHorizontal suppressVisibility={isProgrammaticFollowActive} userIntentOnly observeMutations={false} />
                 {showPromptNavigator && promptTurnIds.length >= 2 ? (
                     <PromptNavigatorRail
@@ -448,7 +486,6 @@ const ChatViewport = React.memo(({
         && prev.retryOverlay === next.retryOverlay
         && prev.scrollToBottom === next.scrollToBottom
         && prev.endPinningReleased === next.endPinningReleased
-        && prev.revealContent === next.revealContent
         && prev.sessionQuestions === next.sessionQuestions
         && prev.sessionPermissions === next.sessionPermissions
         && prev.isProgrammaticFollowActive === next.isProgrammaticFollowActive
@@ -824,9 +861,6 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         return () => setWorkStatusPanelVisible(false);
     }, [setWorkStatusPanelVisible, showWorkStatusPanel]);
     const messageListRef = React.useRef<MessageListHandle | null>(null);
-    // Session keys that showed the hydration skeleton this app run; their
-    // content gets a one-shot reveal fade once it replaces the skeleton.
-    const hydrationRevealKeyRef = React.useRef<string | null>(null);
 
     const currentSession = useSession(currentSessionId, effectiveSessionDirectory);
     const parentSession = useParentSession(currentSessionId, effectiveSessionDirectory);
@@ -1163,15 +1197,6 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
     const isSessionHydrating =
         Boolean(currentSessionId)
         && !hasRenderableSessionSnapshot;
-    React.useEffect(() => {
-        if (isSessionHydrating || hydrationRevealKeyRef.current === null) return;
-        // One-shot: forget the key after the reveal animation has played so a
-        // later (now cached) visit to the same session opens instantly.
-        const timer = setTimeout(() => {
-            hydrationRevealKeyRef.current = null;
-        }, 400);
-        return () => clearTimeout(timer);
-    }, [isSessionHydrating, currentSessionKey]);
     const retrySessionLoad = React.useCallback(() => {
         if (!messagesEnabled || !currentSessionId) return;
         void sync.ensureSessionRenderable(currentSessionId, true, effectiveSessionDirectory);
@@ -1310,9 +1335,6 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
         }
 
         const showHydrationSkeleton = isSessionHydrating && sessionMessages.length === 0 && !sessionIsWorking;
-        if (showHydrationSkeleton) {
-            hydrationRevealKeyRef.current = currentSessionKey ?? currentSessionId ?? null;
-        }
         if (showHydrationSkeleton) {
             if (sessionMessageLoadState.status === 'error') {
                 return (
@@ -1415,7 +1437,6 @@ export const ChatContainer: React.FC<ChatContainerProps> = ({
                 retryOverlay={retryOverlay}
                 scrollToBottom={resumeToLatestInstant}
                 endPinningReleased={userOwnsScroll}
-                revealContent={hydrationRevealKeyRef.current !== null && hydrationRevealKeyRef.current === (currentSessionKey ?? currentSessionId ?? null)}
                 sessionQuestions={sessionQuestions}
                 sessionPermissions={sessionPermissions}
                 isProgrammaticFollowActive={isFollowingProgrammatically}

packages/ui/src/components/chat/ChatInput.tsx

@@ -72,8 +72,8 @@ import { useChatSearchDirectory } from '@/hooks/useChatSearchDirectory';
 import { opencodeClient } from '@/lib/opencode/client';
 import { useGitStore, useIsGitRepo } from '@/stores/useGitStore';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
-import { useSkillsStore } from '@/stores/useSkillsStore';
-import { useCommandsStore } from '@/stores/useCommandsStore';
+import { selectSkillsForDirectory, useSkillsStore } from '@/stores/useSkillsStore';
+import { selectCommandsForDirectory, useCommandsStore } from '@/stores/useCommandsStore';
 import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
 import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
 import { usePermissionStore } from '@/stores/permissionStore';
@@ -602,8 +602,8 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
 
     // Known slash-invocations (commands + skills + built-ins) used to highlight
     // matching /tokens in the composer, the same way confirmed @files are.
-    const availableCommands = useCommandsStore((s) => s.commands);
-    const availableSkills = useSkillsStore((s) => s.skills);
+    const availableCommands = useCommandsStore((s) => selectCommandsForDirectory(s, currentDirectory));
+    const availableSkills = useSkillsStore((s) => selectSkillsForDirectory(s, currentDirectory));
     const knownSlashNames = React.useMemo(() => {
         const names = new Set<string>([
             'init', 'review', 'undo', 'redo', 'timeline', 'compact', 'btw', 'summary', 'workspace-review', 'plan-feature', 'craft-goal', 'schedule-task', 'catch-up', 'debug', 'weigh', 'explore',
@@ -1140,7 +1140,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
             : [];
 
         const availableSkillNames = new Set(
-            useSkillsStore.getState().skills.map((skill) => skill.name),
+            selectSkillsForDirectory(useSkillsStore.getState(), currentDirectory).map((skill) => skill.name),
         );
 
         const outgoing = buildOutgoingMessage({
@@ -2262,10 +2262,14 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({
     };
 
     React.useEffect(() => {
-
-        if (active && currentSessionId && composerRef.current && !isMobile) {
-            composerRef.current.focus();
-        }
+        if (!active || !currentSessionId || isMobile) return;
+        // Focusing forces layout. Right after a session switch the layout is
+        // dirty from the whole timeline mounting, so the focus call would pay
+        // for that layout inside the commit; a frame later it is nearly free.
+        const frame = window.requestAnimationFrame(() => {
+            composerRef.current?.focus();
+        });
+        return () => window.cancelAnimationFrame(frame);
     }, [active, currentSessionId, isMobile]);
 
     React.useEffect(() => {

packages/ui/src/components/chat/MarkdownRenderer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { lazyWithChunkRecovery } from '@/lib/chunkLoadRecovery';
 import { isMobileSurfaceRuntime } from '@/lib/runtimeSurface';
 import { cn } from '@/lib/utils';
-import { loadMarkdownRendererModule } from './markdownRendererLoader';
+import { getLoadedMarkdownRendererModule, loadMarkdownRendererModule } from './markdownRendererLoader';
 
 // Thin lazy wrapper around the MarkdownRenderer implementation.
 // The full implementation (marked + Shiki highlighting + KaTeX + morphdom
@@ -41,21 +41,29 @@ const MobileMarkdownFallback = (props: { content?: unknown; className?: unknown;
   );
 };
 
-export const MarkdownRenderer: React.FC<React.ComponentPropsWithoutRef<typeof MarkdownRendererLazy>> = (props) => (
-  <React.Suspense fallback={<MobileMarkdownFallback {...props} />}>
-    <MarkdownRendererLazy {...props} />
-  </React.Suspense>
-);
+export const MarkdownRenderer: React.FC<React.ComponentPropsWithoutRef<typeof MarkdownRendererLazy>> = (props) => {
+  const loaded = getLoadedMarkdownRendererModule();
+  if (loaded) return <loaded.MarkdownRenderer {...props} />;
+  return (
+    <React.Suspense fallback={<MobileMarkdownFallback {...props} />}>
+      <MarkdownRendererLazy {...props} />
+    </React.Suspense>
+  );
+};
 
 type SimpleMarkdownRendererProps = React.ComponentPropsWithoutRef<typeof SimpleMarkdownRendererLazy> & {
   fallbackContent?: React.ReactNode;
 };
 
-export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({ fallbackContent, ...props }) => (
-  <React.Suspense fallback={fallbackContent ?? <MobileMarkdownFallback {...props} />}>
-    <SimpleMarkdownRendererLazy {...props} />
-  </React.Suspense>
-);
+export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({ fallbackContent, ...props }) => {
+  const loaded = getLoadedMarkdownRendererModule();
+  if (loaded) return <loaded.SimpleMarkdownRenderer {...props} />;
+  return (
+    <React.Suspense fallback={fallbackContent ?? <MobileMarkdownFallback {...props} />}>
+      <SimpleMarkdownRendererLazy {...props} />
+    </React.Suspense>
+  );
+};
 
 export const MarkdownImageGallery: React.FC<React.ComponentPropsWithoutRef<typeof MarkdownImageGalleryLazy>> = (props) => (
   <React.Suspense fallback={null}>

packages/ui/src/components/chat/MarkdownRendererImpl.test.ts

@@ -193,6 +193,8 @@ const fakeReact = {
         return hookStates[index] as { current: T };
     },
     memo: <T>(component: T): T => component,
+    createContext: <T>(defaultValue: T) => ({ Provider: 'provider', defaultValue }),
+    useContext: <T>(context: { defaultValue: T }): T => context.defaultValue,
 };
 
 const fakeJsx = (_type: string, props: FakeJsxProps | null, ...children: FakeElement[]): FakeElement => {

packages/ui/src/components/chat/MarkdownRendererImpl.tsx

@@ -51,6 +51,7 @@ import {
 import { fileReferenceExists } from './fileReferenceStat';
 import { streamPerfCount, streamPerfObserve } from '@/stores/utils/streamDebug';
 import { detachedMarkdownDomCache, type DetachedMarkdownDomKey } from './markdown/detachedMarkdownDomCache';
+import { TimelineRevealGateContext } from './timelineRevealGate';
 import { getRuntimeKey } from '@/lib/runtime-switch';
 
 const useCurrentMermaidTheme = () => {
@@ -692,6 +693,30 @@ const useMermaidInlineInteractions = ({
 const MERMAID_RENDER_CACHE = new Map<string, MermaidRender>();
 const MERMAID_RENDER_CACHE_MAX = 100;
 const MARKDOWN_DECORATION_ID_ATTR = 'data-md-decoration-id';
+
+// True when the container already holds exactly these settled blocks with the
+// current decoration. The first paint of a remounted message is served from
+// the block cache; when that paint is already final, the async render would
+// only parse, highlight, sanitize, and morph the same HTML into place again.
+const domMatchesRenderedBlocks = (
+  target: HTMLElement,
+  blocks: ReadonlyArray<{ id: string }>,
+  decorationId: string,
+): boolean => {
+  const children = target.children;
+  if (children.length !== blocks.length) return false;
+  for (let index = 0; index < blocks.length; index += 1) {
+    const child = children[index];
+    if (
+      !child
+      || child.getAttribute('data-md-id') !== blocks[index]?.id
+      || child.getAttribute(MARKDOWN_DECORATION_ID_ATTR) !== decorationId
+    ) {
+      return false;
+    }
+  }
+  return true;
+};
 const MARKDOWN_DECORATION_IDS = new WeakMap<DecorateContext, string>();
 let nextMarkdownDecorationId = 0;
 const MARKDOWN_DOM_CACHE_MAX_SOURCE_CHARS = 200_000;
@@ -804,6 +829,16 @@ const useMorphdomMarkdown = ({
 
   const mermaidViewerRef = React.useRef<ReturnType<typeof createMermaidViewerRegistry> | null>(null);
   const renderRevisionRef = React.useRef(0);
+  // A provisional first paint (blocks not in the settled cache) holds the
+  // timeline reveal until the async render lands, so the session opens with
+  // final code highlighting instead of a visible restyle.
+  const revealGate = React.useContext(TimelineRevealGateContext);
+  const releaseRevealHoldRef = React.useRef<(() => void) | null>(null);
+  const releaseRevealHold = React.useCallback(() => {
+    releaseRevealHoldRef.current?.();
+    releaseRevealHoldRef.current = null;
+  }, []);
+  React.useEffect(() => releaseRevealHold, [releaseRevealHold]);
   // Only DOM that was actually restored or completed by the async pipeline is
   // eligible for capture. A fallback from an earlier content revision is not.
   const mountedDomRef = React.useRef<{
@@ -909,6 +944,9 @@ const useMorphdomMarkdown = ({
         }
         if (hasMermaidBlock) refreshMermaidViewers();
       } else {
+        if (!streaming && !releaseRevealHoldRef.current) {
+          releaseRevealHoldRef.current = revealGate?.hold() ?? null;
+        }
         const block = document.createElement('div');
         block.setAttribute('data-md-block', '');
         block.style.display = 'contents';
@@ -939,6 +977,18 @@ const useMorphdomMarkdown = ({
     const renderRevision = renderRevisionRef.current;
     const decorationId = getMarkdownDecorationId(ctx);
 
+    if (!streaming) {
+      const cachedBlocks = getCachedMarkdownBlocks(text, imageMode);
+      if (cachedBlocks && domMatchesRenderedBlocks(target, cachedBlocks, decorationId)) {
+        mountedDomRef.current = domCacheKey
+          ? { key: domCacheKey, copiedLabel: ctx.labels.copied }
+          : null;
+        streamPerfCount('ui.markdown_renderer.settled_paint.reused');
+        releaseRevealHold();
+        return;
+      }
+    }
+
     void renderMarkdownBlocks(text, streaming, imageMode).then((blocks) => {
       if (!active || renderRevisionRef.current !== renderRevision) return;
       const existing = Array.from(target.children) as HTMLElement[];
@@ -1028,12 +1078,13 @@ const useMorphdomMarkdown = ({
       mountedDomRef.current = domCacheKey
         ? { key: domCacheKey, copiedLabel: ctx.labels.copied }
         : null;
+      releaseRevealHold();
     });
 
     return () => {
       active = false;
     };
-  }, [containerRef, ctx, domCacheKey, imageMode, refreshMermaidViewers, streaming, text]);
+  }, [containerRef, ctx, domCacheKey, imageMode, refreshMermaidViewers, releaseRevealHold, streaming, text]);
 
   React.useEffect(() => {
     const container = containerRef.current;

packages/ui/src/components/chat/markdownRendererLoader.ts

@@ -1,13 +1,31 @@
-let markdownRendererModulePromise: Promise<typeof import('./MarkdownRendererImpl')> | null = null;
+type MarkdownRendererModule = typeof import('./MarkdownRendererImpl');
+
+let markdownRendererModulePromise: Promise<MarkdownRendererModule> | null = null;
+let markdownRendererModule: MarkdownRendererModule | null = null;
 
 export const loadMarkdownRendererModule = () => {
-  markdownRendererModulePromise ??= import('./MarkdownRendererImpl').catch((error) => {
-    markdownRendererModulePromise = null;
-    throw error;
-  });
+  markdownRendererModulePromise ??= import('./MarkdownRendererImpl')
+    .then((module) => {
+      markdownRendererModule = module;
+      return module;
+    })
+    .catch((error) => {
+      markdownRendererModulePromise = null;
+      throw error;
+    });
   return markdownRendererModulePromise;
 };
 
+/**
+ * The module once it has loaded, so a renderer can mount synchronously instead
+ * of suspending. A lazy component that suspends — even on an already-resolved
+ * promise — shows its fallback for a tick, and React then throttles the reveal
+ * of every boundary that resolves in the following ~300ms, which is how a
+ * freshly opened session showed user text first and assistant text a third of
+ * a second later.
+ */
+export const getLoadedMarkdownRendererModule = () => markdownRendererModule;
+
 export const preloadMarkdownRenderer = () => {
   void loadMarkdownRendererModule().catch(() => undefined);
 };

packages/ui/src/components/chat/timelineRevealGate.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+
+/**
+ * Coordinates the first paint of a freshly opened session so the timeline
+ * appears as one finished picture instead of arriving in pieces.
+ *
+ * Renderers that mount with a provisional paint (markdown whose blocks are not
+ * in the settled cache yet, so code is unhighlighted) take a hold while they
+ * catch up. The timeline stays invisible while any hold is open, then reveals
+ * everything at once. The gate accepts holds only during the opening commit:
+ * rows that mount later, while scrolling, must never hide the timeline.
+ *
+ * A hold that never releases must not hide the chat forever, so the owner
+ * reveals after `TIMELINE_REVEAL_CAP_MS` regardless.
+ */
+type TimelineRevealGate = {
+  /** Take a hold; returns the release. Returns null once the gate is closed. */
+  hold: () => (() => void) | null;
+  /** Stops accepting holds. Existing holds still count. */
+  close: () => void;
+  readonly holds: number;
+  /** Called when the last hold releases, if the gate is closed by then. */
+  onEmpty: (() => void) | null;
+};
+
+export const TIMELINE_REVEAL_CAP_MS = 250;
+
+export const createTimelineRevealGate = (): TimelineRevealGate => {
+  let holds = 0;
+  let accepting = true;
+  const gate: TimelineRevealGate = {
+    hold: () => {
+      if (!accepting) return null;
+      holds += 1;
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        holds -= 1;
+        if (holds === 0 && !accepting) gate.onEmpty?.();
+      };
+    },
+    close: () => {
+      accepting = false;
+    },
+    get holds() {
+      return holds;
+    },
+    onEmpty: null,
+  };
+  return gate;
+};
+
+export const TimelineRevealGateContext = React.createContext<TimelineRevealGate | null>(null);

packages/ui/src/components/chat/work-status/WorkStatusMcpSection.tsx

@@ -13,6 +13,8 @@ type Props = {
   directory: string | null;
 };
 
+const MCP_STATUS_MAX_AGE_MS = 60_000;
+
 /**
  * MCP servers with their connection switches, reusing the dropdown's own
  * connect/disconnect actions.
@@ -23,17 +25,19 @@ export const WorkStatusMcpSection: React.FC<Props> = ({ directory }) => {
   const mcpStatus = useMcpStore(
     React.useCallback((state) => state.getStatusForDirectory(directory), [directory]),
   );
-  const refreshMcp = useMcpStore((state) => state.refresh);
+  const ensureMcpFresh = useMcpStore((state) => state.ensureFresh);
   const connect = useMcpStore((state) => state.connect);
   const disconnect = useMcpStore((state) => state.disconnect);
   const [busyServer, setBusyServer] = React.useState<string | null>(null);
 
   // The panel must not depend on the header dropdown having been mounted or
   // opened to know its MCP servers. Silent and background-gated, so it cannot
-  // compete with chat bootstrap traffic for sockets.
+  // compete with chat bootstrap traffic for sockets. The section remounts on
+  // every session switch, so it only asks for a status that is missing or
+  // older than a minute; connect/disconnect/auth refresh on their own.
   React.useEffect(() => {
-    void runBackgroundNetworkTask(() => refreshMcp({ directory, silent: true }));
-  }, [directory, refreshMcp]);
+    void runBackgroundNetworkTask(() => ensureMcpFresh({ directory, silent: true, maxAgeMs: MCP_STATUS_MAX_AGE_MS }));
+  }, [directory, ensureMcpFresh]);
 
   const mcpServers = React.useMemo(
     () => Object.entries(mcpStatus ?? {}).sort(([left], [right]) => left.localeCompare(right)),