Improve workspace navigation and render isolation

2026-04-20 16:14:22 +07:00
parent 403fb03c97
commit a6423f7f0a
46 changed files with 2801 additions and 862 deletions
@@ -125,8 +125,7 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
    const [expandedInlineToolCallIds, setExpandedInlineToolCallIds] = useState<Set<string>>(
      new Set(),
    );
-    const showMobileFileExplorer = usePanelStore((state) => state.showMobileFileExplorer);
-    const openDesktopFileExplorer = usePanelStore((state) => state.openDesktopFileExplorer);
+    const openFileExplorerForCheckout = usePanelStore((state) => state.openFileExplorerForCheckout);
    const setExplorerTabForCheckout = usePanelStore((state) => state.setExplorerTabForCheckout);

    // Get serverId (fallback to agent's serverId if not provided)
@@ -200,27 +199,25 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
          setCurrentPath: false,
        });

-        setExplorerTabForCheckout({
+        const checkout = {
          serverId: resolvedServerId,
          cwd: agent.cwd,
          isGit: agent.projectPlacement?.checkout?.isGit ?? true,
-          tab: "files",
+        };
+        setExplorerTabForCheckout({ ...checkout, tab: "files" });
+        openFileExplorerForCheckout({
+          isCompact: isMobile,
+          checkout,
        });
-        if (isMobile) {
-          showMobileFileExplorer();
-          return;
-        }
-        openDesktopFileExplorer();
      },
      [
        agent.cwd,
        isMobile,
-        openDesktopFileExplorer,
+        openFileExplorerForCheckout,
        requestDirectoryListing,
        resolvedServerId,
        router,
        setExplorerTabForCheckout,
-        showMobileFileExplorer,
        openWorkspaceFile,
        workspaceId,
      ],
@@ -20,6 +20,7 @@ const {
  deleteAttachmentsMock,
  encodeImagesMock,
  openExternalUrlMock,
+  markScrollInvestigationRenderMock,
  mockSessionState,
  setAgentStreamTailMock,
  setAgentStreamHeadMock,
@@ -135,6 +136,7 @@ const {
  );
  mockSessionState.setAgentStreamTail = setAgentStreamTailMock;
  mockSessionState.setAgentStreamHead = setAgentStreamHeadMock;
+  const markScrollInvestigationRenderMock = vi.fn();

  return {
    theme,
@@ -147,6 +149,7 @@ const {
    deleteAttachmentsMock: vi.fn(async () => {}),
    encodeImagesMock: vi.fn(async (images: AttachmentMetadata[]) => images),
    openExternalUrlMock: vi.fn(async () => {}),
+    markScrollInvestigationRenderMock,
    mockSessionState,
    setAgentStreamTailMock,
    setAgentStreamHeadMock,
@@ -313,7 +316,7 @@ vi.mock("@/contexts/toast-context", () => ({
 }));

 vi.mock("@/utils/scroll-jank-investigation", () => ({
-  markScrollInvestigationRender: vi.fn(),
+  markScrollInvestigationRender: markScrollInvestigationRenderMock,
  markScrollInvestigationEvent: vi.fn(),
 }));

@@ -547,6 +550,7 @@ beforeEach(() => {
  deleteAttachmentsMock.mockClear();
  encodeImagesMock.mockClear();
  openExternalUrlMock.mockClear();
+  markScrollInvestigationRenderMock.mockClear();
  setAgentStreamTailMock.mockClear();
  setAgentStreamHeadMock.mockClear();
  setQueuedMessagesMock.mockClear();
@@ -663,6 +667,12 @@ function queryAllAttachmentMenuItems(): NodeListOf<HTMLElement> {
  return document.querySelectorAll('[data-testid^="message-input-attachment-menu-item-"]');
 }

+function countMessageInputRenders(): number {
+  return markScrollInvestigationRenderMock.mock.calls.filter(
+    ([componentId]) => componentId === "MessageInput:server:agent",
+  ).length;
+}
+
 describe("Composer attachments", () => {
  it("opens a Plus menu with image and GitHub attachment actions", () => {
    renderComposer();
@@ -847,6 +857,27 @@ describe("Composer attachments", () => {
    expect(latestAttachments).toEqual([{ kind: "image", metadata: image }]);
  });

+  it("does not re-render MessageInput when opening the attachment lightbox", () => {
+    const image = imageAttachment("img-lightbox-render");
+    renderComposer({ initialAttachments: [{ kind: "image", metadata: image }] });
+    const renderCountBeforeLightbox = countMessageInputRenders();
+
+    click(queryByTestId("composer-image-attachment-pill")!);
+
+    expect(queryByTestId("attachment-lightbox-image")).not.toBeNull();
+    expect(countMessageInputRenders()).toBe(renderCountBeforeLightbox);
+  });
+
+  it("still re-renders MessageInput when submit loading semantics change", () => {
+    renderComposer({ initialText: "pending submit", isSubmitLoading: false });
+    const renderCountBeforeLoading = countMessageInputRenders();
+
+    renderComposer({ initialText: "pending submit", isSubmitLoading: true });
+
+    expect(countMessageInputRenders()).toBe(renderCountBeforeLoading + 1);
+    expect(document.querySelector('[aria-label="Send message"]')).toHaveProperty("disabled", true);
+  });
+
  it("locks the preserved draft while submit loading", () => {
    renderComposer({
      initialText: "keep this prompt",
@@ -1,5 +1,5 @@
 import { View, Pressable, Text, ActivityIndicator, Image } from "react-native";
-import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useState, useEffect, useRef, useCallback, useMemo, memo } from "react";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { useShallow } from "zustand/shallow";
@@ -134,6 +134,7 @@ interface ComposerProps {
 const EMPTY_ARRAY: readonly QueuedMessage[] = [];
 const DESKTOP_MESSAGE_PLACEHOLDER = "Message the agent, tag @files, or use /commands and /skills";
 const MOBILE_MESSAGE_PLACEHOLDER = "Message, @files, /commands";
+const StableMessageInput = memo(MessageInput);

 export function Composer({
  agentId,
@@ -172,6 +173,8 @@ export function Composer({
  const isConnected = useHostRuntimeIsConnected(serverId);
  const agentDirectoryStatus = useHostRuntimeAgentDirectoryStatus(serverId);
  const toast = useToast();
+  const toastErrorRef = useRef(toast.error);
+  toastErrorRef.current = toast.error;
  const voice = useVoiceOptional();
  const voiceToggleKeys = useShortcutKeys("voice-toggle");
  const dictationCancelKeys = useShortcutKeys("dictation-cancel");
@@ -238,6 +241,8 @@ export function Composer({
      messageInputRef.current?.focus();
    },
  });
+  const autocompleteOnKeyPressRef = useRef(autocomplete.onKeyPress);
+  autocompleteOnKeyPressRef.current = autocomplete.onKeyPress;

  // Clear send error when user edits the input
  useEffect(() => {
@@ -375,67 +380,82 @@ export function Composer({
    [agentId, serverId, setQueuedMessages],
  );

-  function queueMessage(message: string, attachments: ComposerAttachment[]) {
-    const trimmedMessage = message.trim();
-    if (!trimmedMessage && attachments.length === 0) return;
+  const queueMessage = useCallback(
+    (message: string, attachments: ComposerAttachment[]) => {
+      const trimmedMessage = message.trim();
+      if (!trimmedMessage && attachments.length === 0) return;

-    const newItem = {
-      id: generateMessageId(),
-      text: trimmedMessage,
-      attachments,
-    };
+      const newItem = {
+        id: generateMessageId(),
+        text: trimmedMessage,
+        attachments,
+      };

-    setQueuedMessages(serverId, (prev: Map<string, QueuedMessage[]>) => {
-      const next = new Map(prev);
-      next.set(agentId, [...(prev.get(agentId) ?? []), newItem]);
-      return next;
-    });
+      setQueuedMessages(serverId, (prev: Map<string, QueuedMessage[]>) => {
+        const next = new Map(prev);
+        next.set(agentId, [...(prev.get(agentId) ?? []), newItem]);
+        return next;
+      });

-    setUserInput("");
-    setSelectedAttachments([]);
-  }
+      setUserInput("");
+      setSelectedAttachments([]);
+    },
+    [agentId, serverId, setQueuedMessages, setSelectedAttachments, setUserInput],
+  );

-  async function sendMessageWithContent(
-    message: string,
-    attachments: ComposerAttachment[],
-    forceSend?: boolean,
-  ) {
-    await submitAgentInput({
-      message,
-      attachments,
-      hasExternalContent,
+  const sendMessageWithContent = useCallback(
+    async (message: string, attachments: ComposerAttachment[], forceSend?: boolean) => {
+      await submitAgentInput({
+        message,
+        attachments,
+        hasExternalContent,
+        allowEmptySubmit,
+        forceSend,
+        submitBehavior,
+        isAgentRunning,
+        // Parent-managed submits are still valid submit paths even when the
+        // transport is disconnected, because the parent decides the failure mode.
+        canSubmit: Boolean(sendAgentMessageRef.current || onSubmitMessageRef.current),
+        queueMessage: ({ message, attachments }) => {
+          queueMessage(message, attachments);
+        },
+        submitMessage: async ({ message, attachments }) => {
+          await submitMessage(message, attachments);
+        },
+        clearDraft,
+        setUserInput,
+        setAttachments: (nextAttachments) => {
+          setSelectedAttachments(nextAttachments);
+        },
+        setSendError,
+        setIsProcessing,
+        onSubmitError: (error) => {
+          console.error("[AgentInput] Failed to send message:", error);
+        },
+      });
+    },
+    [
      allowEmptySubmit,
-      forceSend,
-      submitBehavior,
-      isAgentRunning: agentState.status === "running",
-      // Parent-managed submits are still valid submit paths even when the
-      // transport is disconnected, because the parent decides the failure mode.
-      canSubmit: Boolean(sendAgentMessageRef.current || onSubmitMessageRef.current),
-      queueMessage: ({ message, attachments }) => {
-        queueMessage(message, attachments);
-      },
-      submitMessage: async ({ message, attachments }) => {
-        await submitMessage(message, attachments);
-      },
      clearDraft,
+      hasExternalContent,
+      isAgentRunning,
+      queueMessage,
+      setSelectedAttachments,
      setUserInput,
-      setAttachments: (nextAttachments) => {
-        setSelectedAttachments(nextAttachments);
-      },
-      setSendError,
-      setIsProcessing,
-      onSubmitError: (error) => {
-        console.error("[AgentInput] Failed to send message:", error);
-      },
-    });
-  }
+      submitBehavior,
+      submitMessage,
+    ],
+  );

-  function handleSubmit(payload: MessagePayload) {
-    if (blurOnSubmit) {
-      messageInputRef.current?.blur();
-    }
-    void sendMessageWithContent(payload.text, payload.attachments, payload.forceSend);
-  }
+  const handleSubmit = useCallback(
+    (payload: MessagePayload) => {
+      if (blurOnSubmit) {
+        messageInputRef.current?.blur();
+      }
+      void sendMessageWithContent(payload.text, payload.attachments, payload.forceSend);
+    },
+    [blurOnSubmit, sendMessageWithContent],
+  );

  const handlePickImage = useCallback(async () => {
    const result = await pickImages();
@@ -487,6 +507,18 @@ export function Composer({
    }
  }, [isAgentRunning, isConnected]);

+  const handleCancelAgent = useCallback(() => {
+    if (!isAgentRunning || isCancellingAgent) {
+      return;
+    }
+    if (!isConnected || !client) {
+      return;
+    }
+    setIsCancellingAgent(true);
+    void client.cancelAgent(agentIdRef.current);
+    messageInputRef.current?.focus();
+  }, [client, isAgentRunning, isCancellingAgent, isConnected]);
+
  const handleKeyboardAction = useCallback(
    (action: KeyboardActionDefinition): boolean => {
      if (!isPaneFocused) {
@@ -553,18 +585,6 @@ export function Composer({
    mode: "translate",
  });

-  function handleCancelAgent() {
-    if (!isAgentRunning || isCancellingAgent) {
-      return;
-    }
-    if (!isConnected || !client) {
-      return;
-    }
-    setIsCancellingAgent(true);
-    void client.cancelAgent(agentIdRef.current);
-    messageInputRef.current?.focus();
-  }
-
  const isVoiceModeForAgent = voice?.isVoiceModeForAgent(serverId, agentId) ?? false;

  const handleToggleRealtimeVoice = useCallback(() => {
@@ -582,10 +602,10 @@ export function Composer({
      const message =
        error instanceof Error ? error.message : typeof error === "string" ? error : null;
      if (message && message.trim().length > 0) {
-        toast.error(message);
+        toastErrorRef.current(message);
      }
    });
-  }, [agentId, hasAgent, isConnected, serverId, toast, voice]);
+  }, [agentId, hasAgent, isConnected, serverId, voice]);

  function handleEditQueuedMessage(id: string) {
    const item = queuedMessages.find((q) => q.id === id);
@@ -612,9 +632,12 @@ export function Composer({
    }
  }

-  const handleQueue = useCallback((payload: MessagePayload) => {
-    queueMessage(payload.text, payload.attachments);
-  }, []);
+  const handleQueue = useCallback(
+    (payload: MessagePayload) => {
+      queueMessage(payload.text, payload.attachments);
+    },
+    [queueMessage],
+  );

  const hasSendableContent = userInput.trim().length > 0 || selectedAttachments.length > 0;

@@ -633,91 +656,109 @@ export function Composer({
        return true;
      }

-      return autocomplete.onKeyPress(event);
+      return autocompleteOnKeyPressRef.current(event);
    },
+    [hasSendableContent, isAgentRunning, isCancellingAgent, isConnected, handleCancelAgent],
+  );
+
+  const cancelButton = useMemo(
+    () =>
+      isAgentRunning && !hasSendableContent && !isProcessing ? (
+        <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+          <TooltipTrigger
+            onPress={handleCancelAgent}
+            disabled={!isConnected || isCancellingAgent}
+            accessibilityLabel={isCancellingAgent ? "Canceling agent" : "Stop agent"}
+            accessibilityRole="button"
+            style={[
+              styles.cancelButton as any,
+              (!isConnected || isCancellingAgent ? styles.buttonDisabled : undefined) as any,
+            ]}
+          >
+            {isCancellingAgent ? (
+              <ActivityIndicator size="small" color="white" />
+            ) : (
+              <Square size={buttonIconSize} color="white" fill="white" />
+            )}
+          </TooltipTrigger>
+          <TooltipContent side="top" align="center" offset={8}>
+            <View style={styles.tooltipRow}>
+              <Text style={styles.tooltipText}>Interrupt</Text>
+              {dictationCancelKeys ? (
+                <Shortcut chord={dictationCancelKeys} style={styles.tooltipShortcut} />
+              ) : null}
+            </View>
+          </TooltipContent>
+        </Tooltip>
+      ) : null,
    [
-      autocomplete,
+      buttonIconSize,
+      dictationCancelKeys,
+      handleCancelAgent,
      hasSendableContent,
      isAgentRunning,
      isCancellingAgent,
      isConnected,
-      handleCancelAgent,
+      isProcessing,
    ],
  );

-  const cancelButton =
-    isAgentRunning && !hasSendableContent && !isProcessing ? (
-      <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-        <TooltipTrigger
-          onPress={handleCancelAgent}
-          disabled={!isConnected || isCancellingAgent}
-          accessibilityLabel={isCancellingAgent ? "Canceling agent" : "Stop agent"}
-          accessibilityRole="button"
-          style={[
-            styles.cancelButton as any,
-            (!isConnected || isCancellingAgent ? styles.buttonDisabled : undefined) as any,
-          ]}
-        >
-          {isCancellingAgent ? (
-            <ActivityIndicator size="small" color="white" />
-          ) : (
-            <Square size={buttonIconSize} color="white" fill="white" />
-          )}
-        </TooltipTrigger>
-        <TooltipContent side="top" align="center" offset={8}>
-          <View style={styles.tooltipRow}>
-            <Text style={styles.tooltipText}>Interrupt</Text>
-            {dictationCancelKeys ? (
-              <Shortcut chord={dictationCancelKeys} style={styles.tooltipShortcut} />
-            ) : null}
-          </View>
-        </TooltipContent>
-      </Tooltip>
-    ) : null;
-
  const showVoiceModeButton = !isVoiceModeForAgent && hasAgent;
-  const rightContent =
-    showVoiceModeButton || cancelButton ? (
-      <View style={styles.rightControls}>
-        {showVoiceModeButton ? (
-          <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
-            <TooltipTrigger
-              onPress={handleToggleRealtimeVoice}
-              disabled={!isConnected || voice?.isVoiceSwitching}
-              accessibilityLabel="Enable Voice mode"
-              accessibilityRole="button"
-              style={({ hovered }) => [
-                styles.realtimeVoiceButton as any,
-                (hovered ? styles.iconButtonHovered : undefined) as any,
-                (!isConnected || voice?.isVoiceSwitching
-                  ? styles.buttonDisabled
-                  : undefined) as any,
-              ]}
-            >
-              {({ hovered }) =>
-                voice?.isVoiceSwitching ? (
-                  <ActivityIndicator size="small" color="white" />
-                ) : (
-                  <AudioLines
-                    size={buttonIconSize}
-                    color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
-                  />
-                )
-              }
-            </TooltipTrigger>
-            <TooltipContent side="top" align="center" offset={8}>
-              <View style={styles.tooltipRow}>
-                <Text style={styles.tooltipText}>Voice mode</Text>
-                {voiceToggleKeys ? (
-                  <Shortcut chord={voiceToggleKeys} style={styles.tooltipShortcut} />
-                ) : null}
-              </View>
-            </TooltipContent>
-          </Tooltip>
-        ) : null}
-        {cancelButton}
-      </View>
-    ) : null;
+  const rightContent = useMemo(
+    () =>
+      showVoiceModeButton || cancelButton ? (
+        <View style={styles.rightControls}>
+          {showVoiceModeButton ? (
+            <Tooltip delayDuration={0} enabledOnDesktop enabledOnMobile={false}>
+              <TooltipTrigger
+                onPress={handleToggleRealtimeVoice}
+                disabled={!isConnected || voice?.isVoiceSwitching}
+                accessibilityLabel="Enable Voice mode"
+                accessibilityRole="button"
+                style={({ hovered }) => [
+                  styles.realtimeVoiceButton as any,
+                  (hovered ? styles.iconButtonHovered : undefined) as any,
+                  (!isConnected || voice?.isVoiceSwitching
+                    ? styles.buttonDisabled
+                    : undefined) as any,
+                ]}
+              >
+                {({ hovered }) =>
+                  voice?.isVoiceSwitching ? (
+                    <ActivityIndicator size="small" color="white" />
+                  ) : (
+                    <AudioLines
+                      size={buttonIconSize}
+                      color={hovered ? theme.colors.foreground : theme.colors.foregroundMuted}
+                    />
+                  )
+                }
+              </TooltipTrigger>
+              <TooltipContent side="top" align="center" offset={8}>
+                <View style={styles.tooltipRow}>
+                  <Text style={styles.tooltipText}>Voice mode</Text>
+                  {voiceToggleKeys ? (
+                    <Shortcut chord={voiceToggleKeys} style={styles.tooltipShortcut} />
+                  ) : null}
+                </View>
+              </TooltipContent>
+            </Tooltip>
+          ) : null}
+          {cancelButton}
+        </View>
+      ) : null,
+    [
+      buttonIconSize,
+      cancelButton,
+      handleToggleRealtimeVoice,
+      isConnected,
+      showVoiceModeButton,
+      theme.colors.foreground,
+      theme.colors.foregroundMuted,
+      voice,
+      voiceToggleKeys,
+    ],
+  );

  const hasContextWindowMeter =
    typeof agentState.contextWindowMaxTokens === "number" &&
@@ -725,15 +766,18 @@ export function Composer({
  const contextWindowMaxTokens = hasContextWindowMeter ? agentState.contextWindowMaxTokens : null;
  const contextWindowUsedTokens = hasContextWindowMeter ? agentState.contextWindowUsedTokens : null;

-  const beforeVoiceContent = (
-    <View style={styles.contextWindowMeterSlot}>
-      {contextWindowMaxTokens !== null && contextWindowUsedTokens !== null ? (
-        <ContextWindowMeter
-          maxTokens={contextWindowMaxTokens}
-          usedTokens={contextWindowUsedTokens}
-        />
-      ) : null}
-    </View>
+  const beforeVoiceContent = useMemo(
+    () => (
+      <View style={styles.contextWindowMeterSlot}>
+        {contextWindowMaxTokens !== null && contextWindowUsedTokens !== null ? (
+          <ContextWindowMeter
+            maxTokens={contextWindowMaxTokens}
+            usedTokens={contextWindowUsedTokens}
+          />
+        ) : null}
+      </View>
+    ),
+    [contextWindowMaxTokens, contextWindowUsedTokens],
  );

  const githubSearchQueryTrimmed = githubSearchQuery.trim();
@@ -808,12 +852,33 @@ export function Composer({
    [setSelectedAttachments, setGithubSearchQuery, setIsGithubPickerOpen],
  );

-  const leftContent =
-    resolveStatusControlMode(statusControls) === "draft" && statusControls ? (
-      <DraftAgentStatusBar {...statusControls} />
-    ) : (
-      <AgentStatusBar agentId={agentId} serverId={serverId} onDropdownClose={focusInput} />
-    );
+  const leftContent = useMemo(
+    () =>
+      resolveStatusControlMode(statusControls) === "draft" && statusControls ? (
+        <DraftAgentStatusBar {...statusControls} />
+      ) : (
+        <AgentStatusBar agentId={agentId} serverId={serverId} onDropdownClose={focusInput} />
+      ),
+    [agentId, focusInput, serverId, statusControls],
+  );
+
+  const handleAttachButtonRef = useCallback((node: View | null) => {
+    attachButtonRef.current = node;
+  }, []);
+
+  const handleSelectionChange = useCallback((selection: { start: number; end: number }) => {
+    setCursorIndex(selection.start);
+  }, []);
+
+  const handleFocusChange = useCallback(
+    (focused: boolean) => {
+      setIsMessageInputFocused(focused);
+      if (focused) {
+        onAttentionInputFocus?.();
+      }
+    },
+    [onAttentionInputFocus],
+  );

  return (
    <Animated.View
@@ -924,7 +989,7 @@ export function Composer({
            ) : null}

            {/* MessageInput handles everything: text, dictation, attachments, all buttons */}
-            <MessageInput
+            <StableMessageInput
              ref={messageInputRef}
              value={userInput}
              onChangeText={setUserInput}
@@ -938,9 +1003,7 @@ export function Composer({
              attachments={selectedAttachments}
              cwd={cwd}
              attachmentMenuItems={attachmentMenuItems}
-              onAttachButtonRef={(node) => {
-                attachButtonRef.current = node;
-              }}
+              onAttachButtonRef={handleAttachButtonRef}
              onAddImages={addImages}
              client={client}
              isReadyForDictation={isDictationReady}
@@ -959,15 +1022,8 @@ export function Composer({
              onQueue={handleQueue}
              onSubmitLoadingPress={isAgentRunning ? handleCancelAgent : undefined}
              onKeyPress={handleCommandKeyPress}
-              onSelectionChange={(selection) => {
-                setCursorIndex(selection.start);
-              }}
-              onFocusChange={(focused) => {
-                setIsMessageInputFocused(focused);
-                if (focused) {
-                  onAttentionInputFocus?.();
-                }
-              }}
+              onSelectionChange={handleSelectionChange}
+              onFocusChange={handleFocusChange}
              onHeightChange={onComposerHeightChange}
              inputWrapperStyle={inputWrapperStyle}
            />
@@ -17,6 +17,7 @@ import { PrPane } from "./pr-pane";
 import { usePrPaneData } from "@/hooks/use-pr-pane-data";
 import {
  usePanelStore,
+  selectIsFileExplorerOpen,
  MIN_EXPLORER_SIDEBAR_WIDTH,
  MAX_EXPLORER_SIDEBAR_WIDTH,
  type ExplorerTab,
@@ -52,8 +53,7 @@ export function ExplorerSidebar({
  const isScreenFocused = useIsFocused();
  const insets = useSafeAreaInsets();
  const isMobile = useIsCompactFormFactor();
-  const mobileView = usePanelStore((state) => state.mobileView);
-  const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
+  const isOpen = usePanelStore((state) => selectIsFileExplorerOpen(state, { isCompact: isMobile }));
  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
  const closeDesktopFileExplorer = usePanelStore((state) => state.closeDesktopFileExplorer);
  const explorerTab = usePanelStore((state) => state.explorerTab);
@@ -82,9 +82,6 @@ export function ExplorerSidebar({
    }
  }, [explorerWidth, isMobile, setExplorerWidth, viewportWidth]);

-  // Derive isOpen from the unified panel state
-  const isOpen = isMobile ? mobileView === "file-explorer" : desktopFileExplorerOpen;
-
  const {
    translateX,
    backdropOpacity,
@@ -105,8 +102,6 @@ export function ExplorerSidebar({
      logExplorerSidebar("handleClose", {
        reason,
        isOpen,
-        mobileView,
-        desktopFileExplorerOpen,
      });
      if (isMobile) {
        showMobileAgent();
@@ -114,14 +109,7 @@ export function ExplorerSidebar({
      }
      closeDesktopFileExplorer();
    },
-    [
-      closeDesktopFileExplorer,
-      desktopFileExplorerOpen,
-      isMobile,
-      isOpen,
-      mobileView,
-      showMobileAgent,
-    ],
+    [closeDesktopFileExplorer, isMobile, isOpen, showMobileAgent],
  );

  const handleCloseFromGesture = useCallback(() => {
@@ -5,7 +5,7 @@ import { PanelLeft } from "lucide-react-native";
 import { ScreenHeader } from "./screen-header";
 import { ScreenTitle } from "./screen-title";
 import { HeaderToggleButton } from "./header-toggle-button";
-import { usePanelStore } from "@/stores/panel-store";
+import { selectIsAgentListOpen, usePanelStore } from "@/stores/panel-store";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import { getShortcutOs } from "@/utils/shortcut-platform";

@@ -46,19 +46,16 @@ export function SidebarMenuToggle({
 }: SidebarMenuToggleProps = {}) {
  const { theme } = useUnistyles();
  const isMobile = useIsCompactFormFactor();
-  const mobileView = usePanelStore((state) => state.mobileView);
-  const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
-  const toggleMobileAgentList = usePanelStore((state) => state.toggleMobileAgentList);
-  const toggleDesktopAgentList = usePanelStore((state) => state.toggleDesktopAgentList);
+  const isOpen = usePanelStore((state) => selectIsAgentListOpen(state, { isCompact: isMobile }));
+  const toggleAgentListForLayout = usePanelStore((state) => state.toggleAgentListForLayout);
  const toggleShortcutKeys = getShortcutOs() === "mac" ? ["mod", "B"] : ["mod", "."];

-  const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
  const menuIconColor =
    !isMobile && isOpen ? theme.colors.foreground : theme.colors.foregroundMuted;

  return (
    <HeaderToggleButton
-      onPress={isMobile ? toggleMobileAgentList : toggleDesktopAgentList}
+      onPress={() => toggleAgentListForLayout({ isCompact: isMobile })}
      tooltipLabel="Toggle sidebar"
      tooltipKeys={toggleShortcutKeys}
      tooltipSide={tooltipSide}
@@ -32,7 +32,12 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { Shortcut } from "@/components/ui/shortcut";
 import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { router, usePathname } from "expo-router";
-import { usePanelStore, MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH } from "@/stores/panel-store";
+import {
+  usePanelStore,
+  selectIsAgentListOpen,
+  MIN_SIDEBAR_WIDTH,
+  MAX_SIDEBAR_WIDTH,
+} from "@/stores/panel-store";
 import { SidebarHeaderRow } from "@/components/sidebar/sidebar-header-row";
 import { SidebarWorkspaceList } from "./sidebar-workspace-list";
 import { SidebarAgentListSkeleton } from "./sidebar-agent-list-skeleton";
@@ -116,8 +121,9 @@ export const LeftSidebar = memo(function LeftSidebar({
  const { theme } = useUnistyles();
  const insets = useSafeAreaInsets();
  const isCompactLayout = useIsCompactFormFactor();
-  const mobileView = usePanelStore((state) => state.mobileView);
-  const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
+  const isOpen = usePanelStore((state) =>
+    selectIsAgentListOpen(state, { isCompact: isCompactLayout }),
+  );
  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
  const pathname = usePathname();
  const daemons = useHosts();
@@ -183,8 +189,6 @@ export const LeftSidebar = memo(function LeftSidebar({
  const hostTriggerRef = useRef<View | null>(null);
  const [isHostPickerOpen, setIsHostPickerOpen] = useState(false);

-  const isOpen = isCompactLayout ? mobileView === "agent-list" : desktopAgentListOpen;
-
  const { projects, isInitialLoad, isRevalidating, refreshAll } = useSidebarWorkspacesList({
    serverId: activeServerId,
    enabled: isOpen,
@@ -28,6 +28,12 @@ import type { HostProfile } from "@/types/host-connection";
 import { useSessionStore, type WorkspaceDescriptor } from "@/stores/session-store";
 import { useSidebarOrderStore } from "@/stores/sidebar-order-store";
 import { useWorkspaceFields } from "@/stores/session-store-hooks";
+import {
+  activateNavigationWorkspaceSelection,
+  syncNavigationActiveWorkspace,
+  useIsNavigationProjectActive,
+  useIsNavigationWorkspaceSelected,
+} from "@/stores/navigation-active-workspace-store";

 vi.mock("@react-native-async-storage/async-storage", () => ({
  default: {
@@ -43,6 +49,8 @@ type RenderCounts = {
  frame: number;
  headers: Record<string, number>;
  rows: Record<string, number>;
+  projectSelection: Record<string, number>;
+  rowSelection: Record<string, number>;
 };

 const runningScript: WorkspaceScriptPayload = {
@@ -166,6 +174,8 @@ function resetCounts(counts: RenderCounts): void {
  counts.frame = 0;
  counts.headers = {};
  counts.rows = {};
+  counts.projectSelection = {};
+  counts.rowSelection = {};
 }

 function incrementRecord(record: Record<string, number>, key: string): void {
@@ -201,6 +211,37 @@ function WorkspaceRowProbe({
  return null;
 }

+function ProjectActiveProbe({
+  serverId,
+  project,
+  counts,
+}: {
+  serverId: string;
+  project: SidebarProjectEntry;
+  counts: RenderCounts;
+}): null {
+  useIsNavigationProjectActive({
+    serverId,
+    workspaceIds: project.workspaces.map((workspace) => workspace.workspaceId),
+  });
+  incrementRecord(counts.projectSelection, project.projectKey);
+  return null;
+}
+
+function WorkspaceSelectionProbe({
+  serverId,
+  workspaceId,
+  counts,
+}: {
+  serverId: string;
+  workspaceId: string;
+  counts: RenderCounts;
+}): null {
+  useIsNavigationWorkspaceSelected({ serverId, workspaceId });
+  incrementRecord(counts.rowSelection, workspaceId);
+  return null;
+}
+
 function SidebarFrameProbe({ counts }: { counts: RenderCounts }): ReactElement {
  counts.frame += 1;
  const { projects } = useSidebarWorkspacesList({ serverId: SERVER_ID });
@@ -210,13 +251,20 @@ function SidebarFrameProbe({ counts }: { counts: RenderCounts }): ReactElement {
      {projects.map((project) => (
        <div key={project.projectKey}>
          <ProjectHeaderProbe project={project} counts={counts} />
+          <ProjectActiveProbe serverId={SERVER_ID} project={project} counts={counts} />
          {project.workspaces.map((workspace) => (
-            <WorkspaceRowProbe
-              key={workspace.workspaceKey}
-              serverId={workspace.serverId}
-              workspaceId={workspace.workspaceId}
-              counts={counts}
-            />
+            <React.Fragment key={workspace.workspaceKey}>
+              <WorkspaceRowProbe
+                serverId={workspace.serverId}
+                workspaceId={workspace.workspaceId}
+                counts={counts}
+              />
+              <WorkspaceSelectionProbe
+                serverId={workspace.serverId}
+                workspaceId={workspace.workspaceId}
+                counts={counts}
+              />
+            </React.Fragment>
          ))}
        </div>
      ))}
@@ -278,6 +326,7 @@ describe("sidebar workspace render isolation", () => {
    container?.remove();
    container = null;
    act(() => {
+      syncNavigationActiveWorkspace({ current: null });
      getHostRuntimeStore().syncHosts([]);
      useSessionStore.getState().clearSession(SERVER_ID);
      useSidebarOrderStore.setState({
@@ -288,7 +337,13 @@ describe("sidebar workspace render isolation", () => {
  });

  it("re-renders only the changed workspace row for a status update", async () => {
-    const counts: RenderCounts = { frame: 0, headers: {}, rows: {} };
+    const counts: RenderCounts = {
+      frame: 0,
+      headers: {},
+      rows: {},
+      projectSelection: {},
+      rowSelection: {},
+    };
    ({ root, container } = await renderProbe(counts));

    act(() => {
@@ -306,7 +361,13 @@ describe("sidebar workspace render isolation", () => {
  });

  it("does not re-render the sidebar for a host-runtime probe tick with no content change", async () => {
-    const counts: RenderCounts = { frame: 0, headers: {}, rows: {} };
+    const counts: RenderCounts = {
+      frame: 0,
+      headers: {},
+      rows: {},
+      projectSelection: {},
+      rowSelection: {},
+    };
    ({ root, container } = await renderProbe(counts));

    act(() => {
@@ -316,11 +377,23 @@ describe("sidebar workspace render isolation", () => {
      });
    });

-    expect(counts).toEqual({ frame: 0, headers: {}, rows: {} });
+    expect(counts).toEqual({
+      frame: 0,
+      headers: {},
+      rows: {},
+      projectSelection: {},
+      rowSelection: {},
+    });
  });

  it("does not re-render for a deep-equal scripts patch", async () => {
-    const counts: RenderCounts = { frame: 0, headers: {}, rows: {} };
+    const counts: RenderCounts = {
+      frame: 0,
+      headers: {},
+      rows: {},
+      projectSelection: {},
+      rowSelection: {},
+    };
    ({ root, container } = await renderProbe(counts));

    act(() => {
@@ -332,6 +405,49 @@ describe("sidebar workspace render isolation", () => {
      );
    });

-    expect(counts).toEqual({ frame: 0, headers: {}, rows: {} });
+    expect(counts).toEqual({
+      frame: 0,
+      headers: {},
+      rows: {},
+      projectSelection: {},
+      rowSelection: {},
+    });
+  });
+
+  it("isolates active selection updates to affected row and project boolean probes", async () => {
+    const counts: RenderCounts = {
+      frame: 0,
+      headers: {},
+      rows: {},
+      projectSelection: {},
+      rowSelection: {},
+    };
+
+    act(() => {
+      activateNavigationWorkspaceSelection({
+        serverId: SERVER_ID,
+        workspaceId: "a-one",
+      });
+    });
+    ({ root, container } = await renderProbe(counts));
+
+    act(() => {
+      activateNavigationWorkspaceSelection({
+        serverId: SERVER_ID,
+        workspaceId: "b-two",
+      });
+    });
+
+    expect(counts.frame).toBe(0);
+    expect(counts.headers).toEqual({});
+    expect(counts.rows).toEqual({});
+    expect(counts.projectSelection).toEqual({
+      "project-a": 1,
+      "project-b": 1,
+    });
+    expect(counts.rowSelection).toEqual({
+      "a-one": 1,
+      "b-two": 1,
+    });
  });
 });
@@ -91,14 +91,17 @@ import { useShortcutKeys } from "@/hooks/use-shortcut-keys";
 import { useKeyboardActionHandler } from "@/hooks/use-keyboard-action-handler";
 import { type PrHint, useWorkspacePrHint } from "@/hooks/use-checkout-pr-status-query";
 import { buildSidebarProjectRowModel } from "@/utils/sidebar-project-row-model";
-import { useNavigationActiveWorkspaceSelection } from "@/stores/navigation-active-workspace-store";
+import {
+  useIsNavigationProjectActive,
+  useIsNavigationWorkspaceSelected,
+} from "@/stores/navigation-active-workspace-store";
 import {
  normalizeWorkspaceDescriptor,
  useSessionStore,
  type WorkspaceDescriptor,
 } from "@/stores/session-store";
 import { useWorkspaceFields } from "@/stores/session-store-hooks";
-import { buildWorkspaceArchiveRedirectRoute } from "@/utils/workspace-archive-navigation";
+import { redirectIfArchivingActiveWorkspace } from "@/utils/sidebar-workspace-archive-redirect";
 import { openExternalUrl } from "@/utils/open-external-url";
 import {
  requireWorkspaceExecutionDirectory,
@@ -1175,7 +1178,6 @@ function WorkspaceRowWithMenu({
  isCreating?: boolean;
 }) {
  const toast = useToast();
-  const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
  const archiveWorktree = useCheckoutGitActionsStore((state) => state.archiveWorktree);
  const [isArchivingWorkspace, setIsArchivingWorkspace] = useState(false);
  const workspaceDirectory = resolveWorkspaceExecutionDirectory({
@@ -1193,22 +1195,11 @@ function WorkspaceRowWithMenu({
  const isWorktree = workspace.workspaceKind === "worktree";
  const isArchiving = isWorktree ? archiveStatus === "pending" : isArchivingWorkspace;
  const redirectAfterArchive = useCallback(() => {
-    if (
-      activeWorkspaceSelection?.serverId !== workspace.serverId ||
-      activeWorkspaceSelection.workspaceId !== workspace.workspaceId
-    ) {
-      return;
-    }
-
-    router.replace(
-      buildWorkspaceArchiveRedirectRoute({
-        serverId: workspace.serverId,
-        archivedWorkspaceId: workspace.workspaceId,
-        workspaces:
-          useSessionStore.getState().sessions[workspace.serverId]?.workspaces.values() ?? [],
-      }),
-    );
-  }, [activeWorkspaceSelection, workspace.serverId, workspace.workspaceId]);
+    redirectIfArchivingActiveWorkspace({
+      serverId: workspace.serverId,
+      workspaceId: workspace.workspaceId,
+    });
+  }, [workspace.serverId, workspace.workspaceId]);

  const handleArchiveWorktree = useCallback(() => {
    if (isArchiving) {
@@ -1401,25 +1392,13 @@ function NonGitProjectRowWithMenuContent({
 }) {
  const toast = useToast();
  const contextMenu = useContextMenu();
-  const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
  const [isArchivingWorkspace, setIsArchivingWorkspace] = useState(false);
  const redirectAfterArchive = useCallback(() => {
-    if (
-      activeWorkspaceSelection?.serverId !== workspace.serverId ||
-      activeWorkspaceSelection.workspaceId !== workspace.workspaceId
-    ) {
-      return;
-    }
-
-    router.replace(
-      buildWorkspaceArchiveRedirectRoute({
-        serverId: workspace.serverId,
-        archivedWorkspaceId: workspace.workspaceId,
-        workspaces:
-          useSessionStore.getState().sessions[workspace.serverId]?.workspaces.values() ?? [],
-      }) as any,
-    );
-  }, [activeWorkspaceSelection, workspace.serverId, workspace.workspaceId]);
+    redirectIfArchivingActiveWorkspace({
+      serverId: workspace.serverId,
+      workspaceId: workspace.workspaceId,
+    });
+  }, [workspace.serverId, workspace.workspaceId]);

  const handleArchiveWorkspace = useCallback(() => {
    if (isArchivingWorkspace) {
@@ -1546,6 +1525,7 @@ function FlattenedProjectRow({
  isProjectActive = false,
  onRemoveProject,
  removeProjectStatus,
+  selectionEnabled,
 }: {
  project: SidebarProjectEntry;
  displayName: string;
@@ -1563,8 +1543,14 @@ function FlattenedProjectRow({
  isProjectActive?: boolean;
  onRemoveProject?: () => void;
  removeProjectStatus?: "idle" | "pending";
+  selectionEnabled: boolean;
 }) {
  const workspace = useSidebarWorkspaceEntry(serverId, rowModel.workspace.workspaceId);
+  const selected = useIsNavigationWorkspaceSelected({
+    serverId,
+    workspaceId: rowModel.workspace.workspaceId,
+    enabled: selectionEnabled,
+  });

  if (!workspace) {
    return null;
@@ -1577,7 +1563,7 @@ function FlattenedProjectRow({
        displayName={displayName}
        iconDataUri={iconDataUri}
        workspace={workspace}
-        selected={rowModel.selected}
+        selected={selected}
        onPress={onPress}
        shortcutNumber={shortcutNumber}
        showShortcutBadge={showShortcutBadge}
@@ -1594,7 +1580,7 @@ function FlattenedProjectRow({
      displayName={displayName}
      iconDataUri={iconDataUri}
      workspace={workspace}
-      selected={rowModel.selected}
+      selected={selected}
      chevron={rowModel.chevron}
      onPress={onPress}
      serverId={serverId}
@@ -1616,7 +1602,6 @@ function FlattenedProjectRow({

 function WorkspaceRow({
  workspace,
-  selected,
  shortcutNumber,
  showShortcutBadge,
  onPress,
@@ -1625,9 +1610,9 @@ function WorkspaceRow({
  dragHandleProps,
  canCopyBranchName,
  isCreating = false,
+  selectionEnabled,
 }: {
  workspace: SidebarWorkspaceEntry;
-  selected: boolean;
  shortcutNumber: number | null;
  showShortcutBadge: boolean;
  onPress: () => void;
@@ -1636,8 +1621,14 @@ function WorkspaceRow({
  dragHandleProps?: DraggableListDragHandleProps;
  canCopyBranchName: boolean;
  isCreating?: boolean;
+  selectionEnabled: boolean;
 }) {
  const hydratedWorkspace = useSidebarWorkspaceEntry(workspace.serverId, workspace.workspaceId);
+  const selected = useIsNavigationWorkspaceSelected({
+    serverId: workspace.serverId,
+    workspaceId: workspace.workspaceId,
+    enabled: selectionEnabled,
+  });

  if (!hydratedWorkspace) {
    return null;
@@ -1665,7 +1656,7 @@ function ProjectBlock({
  displayName,
  iconDataUri,
  serverId,
-  activeWorkspaceSelection,
+  selectionEnabled,
  showShortcutBadges,
  shortcutIndexByWorkspaceKey,
  parentGestureRef,
@@ -1673,6 +1664,7 @@ function ProjectBlock({
  onWorkspacePress,
  onWorkspaceReorder,
  onWorktreeCreated,
+  currentPathname,
  drag,
  isDragging,
  dragHandleProps,
@@ -1684,7 +1676,7 @@ function ProjectBlock({
  displayName: string;
  iconDataUri: string | null;
  serverId: string | null;
-  activeWorkspaceSelection: { serverId: string; workspaceId: string } | null;
+  selectionEnabled: boolean;
  showShortcutBadges: boolean;
  shortcutIndexByWorkspaceKey: Map<string, number>;
  parentGestureRef?: MutableRefObject<GestureType | undefined>;
@@ -1692,6 +1684,7 @@ function ProjectBlock({
  onWorkspacePress?: () => void;
  onWorkspaceReorder: (projectKey: string, workspaces: SidebarWorkspaceEntry[]) => void;
  onWorktreeCreated?: (workspaceId: string) => void;
+  currentPathname: string | null;
  drag: () => void;
  isDragging: boolean;
  dragHandleProps?: DraggableListDragHandleProps;
@@ -1703,18 +1696,19 @@ function ProjectBlock({
      buildSidebarProjectRowModel({
        project,
        collapsed,
-        serverId,
-        activeWorkspaceSelection,
      }),
-    [activeWorkspaceSelection, collapsed, project, serverId],
+    [collapsed, project],
  );

-  const isProjectActive = useMemo(() => {
-    if (!serverId || !activeWorkspaceSelection || activeWorkspaceSelection.serverId !== serverId) {
-      return false;
-    }
-    return project.workspaces.some((w) => w.workspaceId === activeWorkspaceSelection.workspaceId);
-  }, [serverId, activeWorkspaceSelection, project.workspaces]);
+  const projectWorkspaceIds = useMemo(
+    () => project.workspaces.map((workspace) => workspace.workspaceId),
+    [project.workspaces],
+  );
+  const isProjectActive = useIsNavigationProjectActive({
+    serverId,
+    workspaceIds: projectWorkspaceIds,
+    enabled: selectionEnabled,
+  });

  const renderWorkspaceRow = useCallback(
    (
@@ -1725,25 +1719,20 @@ function ProjectBlock({
        dragHandleProps?: DraggableListDragHandleProps;
      },
    ) => {
-      const isSelected =
-        Boolean(serverId) &&
-        activeWorkspaceSelection?.serverId === serverId &&
-        activeWorkspaceSelection.workspaceId === item.workspaceId;
-
      return (
        <WorkspaceRow
          workspace={item}
-          selected={isSelected}
          shortcutNumber={shortcutIndexByWorkspaceKey.get(item.workspaceKey) ?? null}
          showShortcutBadge={showShortcutBadges}
          canCopyBranchName={project.projectKind === "git"}
          isCreating={creatingWorkspaceIds.has(item.workspaceId)}
+          selectionEnabled={selectionEnabled}
          onPress={() => {
            if (!serverId) {
              return;
            }
            onWorkspacePress?.();
-            navigateToWorkspace(serverId, item.workspaceId);
+            navigateToWorkspace(serverId, item.workspaceId, { currentPathname });
          }}
          drag={input?.drag ?? (() => {})}
          isDragging={input?.isDragging ?? false}
@@ -1752,11 +1741,12 @@ function ProjectBlock({
      );
    },
    [
-      activeWorkspaceSelection,
      project.projectKind,
      creatingWorkspaceIds,
+      currentPathname,
      onWorkspacePress,
      serverId,
+      selectionEnabled,
      shortcutIndexByWorkspaceKey,
      showShortcutBadges,
    ],
@@ -1843,7 +1833,9 @@ function ProjectBlock({
              return;
            }
            onWorkspacePress?.();
-            navigateToWorkspace(serverId, rowModel.workspace.workspaceId);
+            navigateToWorkspace(serverId, rowModel.workspace.workspaceId, {
+              currentPathname,
+            });
          }}
          serverId={serverId}
          onWorkspacePress={onWorkspacePress}
@@ -1856,6 +1848,7 @@ function ProjectBlock({
          isProjectActive={isProjectActive}
          onRemoveProject={handleRemoveProject}
          removeProjectStatus={isRemovingProject ? "pending" : "idle"}
+          selectionEnabled={selectionEnabled}
        />
      ) : (
        <>
@@ -1914,9 +1907,7 @@ export function SidebarWorkspaceList({
  listFooterComponent,
  parentGestureRef,
 }: SidebarWorkspaceListProps) {
-  const isMobile = useIsCompactFormFactor();
  const pathname = usePathname();
-  const activeWorkspaceSelection = useNavigationActiveWorkspaceSelection();
  const [creatingWorkspaceIds, setCreatingWorkspaceIds] = useState<Set<string>>(() => new Set());
  const creatingWorkspaceTimeoutsRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
    new Map(),
@@ -1932,7 +1923,7 @@ export function SidebarWorkspaceList({
    () => Boolean(pathname && parseHostWorkspaceRouteFromPathname(pathname)),
    [pathname],
  );
-  const effectiveActiveWorkspaceSelection = isWorkspaceRoute ? activeWorkspaceSelection : null;
+  const selectionEnabled = isWorkspaceRoute;

  const projectIconRequests = useMemo(() => {
    if (!serverId) {
@@ -2137,7 +2128,7 @@ export function SidebarWorkspaceList({
          displayName={item.projectName}
          iconDataUri={projectIconByProjectKey.get(item.projectKey) ?? null}
          serverId={serverId}
-          activeWorkspaceSelection={effectiveActiveWorkspaceSelection}
+          selectionEnabled={selectionEnabled}
          showShortcutBadges={showShortcutBadges}
          shortcutIndexByWorkspaceKey={shortcutIndexByWorkspaceKey}
          parentGestureRef={parentGestureRef}
@@ -2145,6 +2136,7 @@ export function SidebarWorkspaceList({
          onWorkspacePress={onWorkspacePress}
          onWorkspaceReorder={handleWorkspaceReorder}
          onWorktreeCreated={handleWorktreeCreated}
+          currentPathname={pathname}
          drag={drag}
          isDragging={isActive}
          dragHandleProps={dragHandleProps}
@@ -2155,13 +2147,14 @@ export function SidebarWorkspaceList({
    },
    [
      collapsedProjectKeys,
-      effectiveActiveWorkspaceSelection,
      handleWorktreeCreated,
      handleWorkspaceReorder,
      onWorkspacePress,
      onToggleProjectCollapsed,
      parentGestureRef,
+      pathname,
      projectIconByProjectKey,
+      selectionEnabled,
      serverId,
      shortcutIndexByWorkspaceKey,
      showShortcutBadges,
@@ -76,6 +76,7 @@ interface SplitContainerProps {
  workspaceKey: string;
  normalizedServerId: string;
  normalizedWorkspaceId: string;
+  isWorkspaceFocused: boolean;
  uiTabs: WorkspaceTab[];
  hoveredCloseTabKey: string | null;
  setHoveredTabKey: Dispatch<SetStateAction<string | null>>;
@@ -93,7 +94,6 @@ interface SplitContainerProps {
  onCreateTerminalTab: (input: { paneId?: string }) => void;
  buildPaneContentModel: (input: {
    paneId: string;
-    isPaneFocused: boolean;
    tab: WorkspaceTabDescriptor;
  }) => WorkspacePaneContentModel;
  onFocusPane: (paneId: string) => void;
@@ -158,11 +158,11 @@ interface SplitPaneViewProps
 interface MountedTabSlotProps {
  tabDescriptor: WorkspaceTabDescriptor;
  isVisible: boolean;
+  isWorkspaceFocused: boolean;
  isPaneFocused: boolean;
  paneId: string;
  buildPaneContentModel: (input: {
    paneId: string;
-    isPaneFocused: boolean;
    tab: WorkspaceTabDescriptor;
  }) => WorkspacePaneContentModel;
 }
@@ -170,6 +170,7 @@ interface MountedTabSlotProps {
 const MountedTabSlot = memo(function MountedTabSlot({
  tabDescriptor,
  isVisible,
+  isWorkspaceFocused,
  isPaneFocused,
  paneId,
  buildPaneContentModel,
@@ -178,15 +179,18 @@ const MountedTabSlot = memo(function MountedTabSlot({
    () =>
      buildPaneContentModel({
        paneId,
-        isPaneFocused,
        tab: tabDescriptor,
      }),
-    [buildPaneContentModel, isPaneFocused, paneId, tabDescriptor],
+    [buildPaneContentModel, paneId, tabDescriptor],
  );

  return (
    <View style={{ display: isVisible ? "flex" : "none", flex: 1 }}>
-      <WorkspacePaneContent content={content} />
+      <WorkspacePaneContent
+        content={content}
+        isWorkspaceFocused={isWorkspaceFocused}
+        isPaneFocused={isPaneFocused}
+      />
    </View>
  );
 });
@@ -241,6 +245,7 @@ export function SplitContainer({
  workspaceKey,
  normalizedServerId,
  normalizedWorkspaceId,
+  isWorkspaceFocused,
  uiTabs,
  hoveredCloseTabKey,
  setHoveredTabKey,
@@ -511,6 +516,7 @@ export function SplitContainer({
        focusedPaneId={layout.focusedPaneId}
        normalizedServerId={normalizedServerId}
        normalizedWorkspaceId={normalizedWorkspaceId}
+        isWorkspaceFocused={isWorkspaceFocused}
        hoveredCloseTabKey={hoveredCloseTabKey}
        setHoveredTabKey={setHoveredTabKey}
        setHoveredCloseTabKey={setHoveredCloseTabKey}
@@ -633,6 +639,7 @@ function SplitNodeView({
  focusedPaneId,
  normalizedServerId,
  normalizedWorkspaceId,
+  isWorkspaceFocused,
  hoveredCloseTabKey,
  setHoveredTabKey,
  setHoveredCloseTabKey,
@@ -668,6 +675,7 @@ function SplitNodeView({
        isFocused={node.pane.id === focusedPaneId}
        normalizedServerId={normalizedServerId}
        normalizedWorkspaceId={normalizedWorkspaceId}
+        isWorkspaceFocused={isWorkspaceFocused}
        hoveredCloseTabKey={hoveredCloseTabKey}
        setHoveredTabKey={setHoveredTabKey}
        setHoveredCloseTabKey={setHoveredCloseTabKey}
@@ -718,6 +726,7 @@ function SplitNodeView({
              focusedPaneId={focusedPaneId}
              normalizedServerId={normalizedServerId}
              normalizedWorkspaceId={normalizedWorkspaceId}
+              isWorkspaceFocused={isWorkspaceFocused}
              hoveredCloseTabKey={hoveredCloseTabKey}
              setHoveredTabKey={setHoveredTabKey}
              setHoveredCloseTabKey={setHoveredCloseTabKey}
@@ -767,6 +776,7 @@ function SplitPaneView({
  isFocused,
  normalizedServerId,
  normalizedWorkspaceId,
+  isWorkspaceFocused,
  hoveredCloseTabKey,
  setHoveredTabKey,
  setHoveredCloseTabKey,
@@ -916,6 +926,7 @@ function SplitPaneView({
                  key={tabId}
                  tabDescriptor={tabDescriptor}
                  isVisible={tabId === activeTabDescriptor?.tabId}
+                  isWorkspaceFocused={isWorkspaceFocused}
                  isPaneFocused={isFocused && tabId === activeTabDescriptor?.tabId}
                  paneId={pane.id}
                  buildPaneContentModel={buildPaneContentModel}
@@ -0,0 +1,128 @@
+/**
+ * @vitest-environment jsdom
+ */
+import React from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { StreamItem } from "@/types/stream";
+import type { StreamSegmentRenderers, StreamViewportHandle } from "./stream-strategy";
+import { createWebStreamStrategy } from "./stream-strategy-web";
+
+function userMessage(index: number): StreamItem {
+  return {
+    kind: "user_message",
+    id: `message-${index}`,
+    text: `Message ${index}`,
+    timestamp: new Date(`2026-04-20T00:00:${String(index % 60).padStart(2, "0")}.000Z`),
+  };
+}
+
+function createRenderers(onRowRender: () => void): StreamSegmentRenderers {
+  return {
+    renderHistoryVirtualizedRow: (item) => {
+      onRowRender();
+      return <div style={{ height: 24 }}>{item.id}</div>;
+    },
+    renderHistoryMountedRow: (item) => <div>{item.id}</div>,
+    renderLiveHeadRow: (item) => <div>{item.id}</div>,
+    renderLiveAuxiliary: () => null,
+  };
+}
+
+describe("createWebStreamStrategy", () => {
+  let root: Root | null = null;
+  let container: HTMLDivElement | null = null;
+  let originalScrollTo: HTMLElement["scrollTo"] | undefined;
+  let originalOffsetHeight: PropertyDescriptor | undefined;
+
+  beforeEach(() => {
+    Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+      value: true,
+      configurable: true,
+    });
+    Object.defineProperty(globalThis, "ResizeObserver", {
+      value: class ResizeObserver {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+      configurable: true,
+    });
+    originalScrollTo = HTMLElement.prototype.scrollTo;
+    HTMLElement.prototype.scrollTo = vi.fn();
+    originalOffsetHeight = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetHeight");
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+      configurable: true,
+      get() {
+        return 24;
+      },
+    });
+  });
+
+  afterEach(() => {
+    if (root) {
+      act(() => {
+        root?.unmount();
+      });
+    }
+    root = null;
+    container?.remove();
+    container = null;
+    if (originalScrollTo) {
+      HTMLElement.prototype.scrollTo = originalScrollTo;
+    } else {
+      Reflect.deleteProperty(HTMLElement.prototype, "scrollTo");
+    }
+    if (originalOffsetHeight) {
+      Object.defineProperty(HTMLElement.prototype, "offsetHeight", originalOffsetHeight);
+    } else {
+      Reflect.deleteProperty(HTMLElement.prototype, "offsetHeight");
+    }
+    vi.restoreAllMocks();
+  });
+
+  it("mounts virtualized history without recursive row measurement updates", () => {
+    const rowRenderCount = vi.fn();
+    const strategy = createWebStreamStrategy({ isMobileBreakpoint: true });
+    const viewportRef = React.createRef<StreamViewportHandle>();
+    const historyVirtualized = Array.from({ length: 16 }, (_, index) => userMessage(index));
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+
+    act(() => {
+      root?.render(
+        <>
+          {strategy.render({
+            agentId: "agent",
+            segments: {
+              historyVirtualized,
+              historyMounted: [],
+              liveHead: [],
+            },
+            boundary: {
+              hasVirtualizedHistory: true,
+              hasMountedHistory: false,
+              hasLiveHead: false,
+              historyToHeadGap: 0,
+            },
+            renderers: createRenderers(rowRenderCount),
+            listEmptyComponent: null,
+            viewportRef,
+            routeBottomAnchorRequest: null,
+            isAuthoritativeHistoryReady: true,
+            onNearBottomChange: vi.fn(),
+            scrollEnabled: true,
+            listStyle: null,
+            baseListContentContainerStyle: null,
+            forwardListContentContainerStyle: null,
+          })}
+        </>,
+      );
+    });
+
+    expect(rowRenderCount.mock.calls.length).toBeGreaterThan(0);
+    expect(rowRenderCount.mock.calls.length).toBeLessThanOrEqual(historyVirtualized.length);
+  });
+});
@@ -1,4 +1,4 @@
-import {
+import React, {
  Fragment,
  type CSSProperties,
  useCallback,
@@ -126,6 +126,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
  const lastTouchClientYRef = useRef<number | null>(null);
  const pendingAutoScrollFrameRef = useRef<number | null>(null);
  const pendingAutoScrollTimeoutRef = useRef<number | null>(null);
+  const pendingVirtualRowMeasureFramesRef = useRef(new Map<Element, number>());
  const showDesktopWebScrollbar = !isMobileBreakpoint;
  const scrollbarOverlay = useWebElementScrollbar(scrollContainerRef, {
    enabled: showDesktopWebScrollbar,
@@ -181,6 +182,38 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
  const virtualRows = rowVirtualizer.getVirtualItems();
  const virtualTotalSize = rowVirtualizer.getTotalSize();

+  const measureVirtualizedRowElement = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!node) {
+        rowVirtualizer.measureElement(null);
+        return;
+      }
+      const pendingFrames = pendingVirtualRowMeasureFramesRef.current;
+      const existingFrame = pendingFrames.get(node);
+      if (existingFrame !== undefined) {
+        window.cancelAnimationFrame(existingFrame);
+      }
+      const frame = window.requestAnimationFrame(() => {
+        pendingFrames.delete(node);
+        if (node.isConnected) {
+          rowVirtualizer.measureElement(node);
+        }
+      });
+      pendingFrames.set(node, frame);
+    },
+    [rowVirtualizer],
+  );
+
+  useEffect(() => {
+    const pendingFrames = pendingVirtualRowMeasureFramesRef.current;
+    return () => {
+      for (const frame of pendingFrames.values()) {
+        window.cancelAnimationFrame(frame);
+      }
+      pendingFrames.clear();
+    };
+  }, []);
+
  const cancelPendingStickToBottom = useCallback(() => {
    const pendingFrame = pendingAutoScrollFrameRef.current;
    if (pendingFrame !== null) {
@@ -696,7 +729,7 @@ function WebStreamViewport(props: StreamRenderInput & { isMobileBreakpoint: bool
                  <div
                    key={virtualRow.key}
                    data-index={virtualRow.index}
-                    ref={rowVirtualizer.measureElement}
+                    ref={measureVirtualizedRowElement}
                    style={renderVirtualRowStyle(virtualRow.start)}
                  >
                    {renderHistoryVirtualizedRow(
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useFocusEffect, useIsFocused } from "@react-navigation/native";
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
 import Animated, { runOnJS, useAnimatedReaction } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -27,7 +26,9 @@ interface TerminalPaneProps {
  serverId: string;
  cwd: string;
  terminalId: string;
+  isWorkspaceFocused: boolean;
  isPaneFocused: boolean;
+  onOpenFileExplorer: () => void;
 }

 const TERMINAL_REFIT_DELAYS_MS = [0, 48, 144, 320];
@@ -82,15 +83,20 @@ function terminalScopeKey(input: { serverId: string; cwd: string }): string {
  return `${input.serverId}:${input.cwd}`;
 }

-export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: TerminalPaneProps) {
-  const isScreenFocused = useIsFocused();
+export function TerminalPane({
+  serverId,
+  cwd,
+  terminalId,
+  isWorkspaceFocused,
+  isPaneFocused,
+  onOpenFileExplorer,
+}: TerminalPaneProps) {
  const isAppVisible = useAppVisible();
  const { theme } = useUnistyles();
  const xtermTheme = useMemo(() => toXtermTheme(theme.colors.terminal), [theme]);
  const isMobile = useIsCompactFormFactor();
  const mobileView = usePanelStore((state) => state.mobileView);
  const showMobileAgentList = usePanelStore((state) => state.showMobileAgentList);
-  const showMobileFileExplorer = usePanelStore((state) => state.showMobileFileExplorer);
  const swipeGesturesEnabled = isMobile && mobileView === "agent";
  const { shift: keyboardShift, style: keyboardPaddingStyle } = useKeyboardShiftStyle({
    mode: "padding",
@@ -131,7 +137,7 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
  }, []);

  useEffect(() => {
-    if (isMobile || !isScreenFocused || !isPaneFocused || !terminalId) {
+    if (isMobile || !isWorkspaceFocused || !isPaneFocused || !terminalId) {
      lastAutoFocusKeyRef.current = null;
      return;
    }
@@ -143,14 +149,14 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi

    lastAutoFocusKeyRef.current = nextFocusKey;
    requestTerminalFocus();
-  }, [isMobile, isPaneFocused, isScreenFocused, requestTerminalFocus, scopeKey, terminalId]);
+  }, [isMobile, isPaneFocused, isWorkspaceFocused, requestTerminalFocus, scopeKey, terminalId]);

  useEffect(() => {
-    if (isPaneFocused && isScreenFocused && isAppVisible && terminalId) {
+    if (isPaneFocused && isWorkspaceFocused && isAppVisible && terminalId) {
      lastReportedSizeRef.current = null;
      requestTerminalReflow();
    }
-  }, [isAppVisible, isPaneFocused, isScreenFocused, requestTerminalReflow, terminalId]);
+  }, [isAppVisible, isPaneFocused, isWorkspaceFocused, requestTerminalReflow, terminalId]);

  const clearKeyboardRefitTimeouts = useCallback(() => {
    if (keyboardRefitTimeoutsRef.current.length === 0) {
@@ -187,29 +193,27 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
    [pulseKeyboardRefits],
  );

-  useFocusEffect(
-    useCallback(() => {
-      if (!terminalId) {
-        return;
-      }
-      // Navigation transitions can temporarily report stale dimensions.
-      // Pulse forced refits so xterm fills the pane when returning to an agent.
-      const timeoutHandles = TERMINAL_REFIT_DELAYS_MS.map((delayMs) =>
-        setTimeout(() => {
-          requestTerminalReflow();
-        }, delayMs),
-      );
+  useEffect(() => {
+    if (!isWorkspaceFocused || !terminalId) {
+      return;
+    }
+    // Focus transitions can temporarily report stale dimensions.
+    // Pulse forced refits so xterm fills the pane when returning to a terminal.
+    const timeoutHandles = TERMINAL_REFIT_DELAYS_MS.map((delayMs) =>
+      setTimeout(() => {
+        requestTerminalReflow();
+      }, delayMs),
+    );

-      return () => {
-        for (const handle of timeoutHandles) {
-          clearTimeout(handle);
-        }
-      };
-    }, [requestTerminalReflow, terminalId]),
-  );
+    return () => {
+      for (const handle of timeoutHandles) {
+        clearTimeout(handle);
+      }
+    };
+  }, [isWorkspaceFocused, requestTerminalReflow, terminalId]);

  useEffect(() => {
-    if (!client || !isConnected || !isScreenFocused) {
+    if (!client || !isConnected || !isWorkspaceFocused) {
      return;
    }

@@ -232,7 +236,7 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
      });
      setModifiers({ ...EMPTY_MODIFIERS });
    });
-  }, [client, isConnected, workspaceTerminalSession.snapshots]);
+  }, [client, isConnected, isWorkspaceFocused, workspaceTerminalSession.snapshots]);

  useEffect(() => {
    lastReportedSizeRef.current = null;
@@ -257,14 +261,14 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
      client,
      getPreferredSize: () => lastReportedSizeRef.current,
      onOutput: ({ terminalId, text }) => {
-        if (!isScreenFocused || terminalIdRef.current !== terminalId) {
+        if (!isWorkspaceFocused || terminalIdRef.current !== terminalId) {
          return;
        }
        emulatorRef.current?.writeOutput(text);
      },
      onSnapshot: ({ terminalId, state }) => {
        workspaceTerminalSession.snapshots.set({ terminalId, state });
-        if (!isScreenFocused || terminalIdRef.current !== terminalId) {
+        if (!isWorkspaceFocused || terminalIdRef.current !== terminalId) {
          return;
        }
        emulatorRef.current?.renderSnapshot(state);
@@ -274,7 +278,7 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi

    streamControllerRef.current = controller;
    controller.setTerminal({
-      terminalId: isScreenFocused ? terminalIdRef.current : null,
+      terminalId: isWorkspaceFocused ? terminalIdRef.current : null,
    });

    return () => {
@@ -287,17 +291,17 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
    client,
    handleStreamControllerStatus,
    isConnected,
-    isScreenFocused,
+    isWorkspaceFocused,
    workspaceTerminalSession.snapshots,
  ]);

  useEffect(() => {
    pendingTerminalInputRef.current = [];
-    const nextTerminalId = isScreenFocused ? terminalId : null;
+    const nextTerminalId = isWorkspaceFocused ? terminalId : null;
    streamControllerRef.current?.setTerminal({
      terminalId: nextTerminalId,
    });
-  }, [isScreenFocused, terminalId]);
+  }, [isWorkspaceFocused, terminalId]);

  const enqueuePendingTerminalInput = useCallback((entry: PendingTerminalInput) => {
    const queue = pendingTerminalInputRef.current;
@@ -477,7 +481,7 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
      !client ||
      !terminalId ||
      !isPaneFocused ||
-      !isScreenFocused ||
+      !isWorkspaceFocused ||
      !isAppVisible ||
      rows <= 0 ||
      cols <= 0
@@ -550,7 +554,7 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
  return (
    <Animated.View style={[styles.container, keyboardPaddingStyle]}>
      <View style={styles.outputContainer}>
-        {isScreenFocused ? (
+        {isWorkspaceFocused ? (
          <View style={styles.terminalGestureContainer}>
            <TerminalEmulator
              ref={emulatorRef}
@@ -579,7 +583,7 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
                if (!swipeGesturesEnabled) {
                  return;
                }
-                showMobileFileExplorer();
+                onOpenFileExplorer();
              }}
              onInput={handleTerminalData}
              onResize={handleTerminalResize}
@@ -594,7 +598,7 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
          <View style={styles.terminalGestureContainer} />
        )}

-        {isAttaching && isScreenFocused ? (
+        {isAttaching && isWorkspaceFocused ? (
          <View style={styles.attachOverlay} pointerEvents="none" testID="terminal-attach-loading">
            <ActivityIndicator size="small" color={theme.colors.foregroundMuted} />
          </View>