Separate explorer checkout from panel state

packages/app/src/components/agent-stream-view.tsx

@@ -125,7 +125,8 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
     const [expandedInlineToolCallIds, setExpandedInlineToolCallIds] = useState<Set<string>>(
       new Set(),
     );
-    const openFileExplorer = usePanelStore((state) => state.openFileExplorer);
+    const showMobileFileExplorer = usePanelStore((state) => state.showMobileFileExplorer);
+    const openDesktopFileExplorer = usePanelStore((state) => state.openDesktopFileExplorer);
     const setExplorerTabForCheckout = usePanelStore((state) => state.setExplorerTabForCheckout);
 
     // Get serverId (fallback to agent's serverId if not provided)
@@ -205,15 +206,21 @@ const AgentStreamViewComponent = forwardRef<AgentStreamViewHandle, AgentStreamVi
           isGit: agent.projectPlacement?.checkout?.isGit ?? true,
           tab: "files",
         });
-        openFileExplorer();
+        if (isMobile) {
+          showMobileFileExplorer();
+          return;
+        }
+        openDesktopFileExplorer();
       },
       [
         agent.cwd,
-        openFileExplorer,
+        isMobile,
+        openDesktopFileExplorer,
         requestDirectoryListing,
         resolvedServerId,
         router,
         setExplorerTabForCheckout,
+        showMobileFileExplorer,
         openWorkspaceFile,
         workspaceId,
       ],

packages/app/src/components/explorer-sidebar.tsx

@@ -54,7 +54,8 @@ export function ExplorerSidebar({
   const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
-  const closeToAgent = usePanelStore((state) => state.closeToAgent);
+  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
+  const closeDesktopFileExplorer = usePanelStore((state) => state.closeDesktopFileExplorer);
   const explorerTab = usePanelStore((state) => state.explorerTab);
   const explorerWidth = usePanelStore((state) => state.explorerWidth);
   const setExplorerTabForCheckout = usePanelStore((state) => state.setExplorerTabForCheckout);
@@ -107,15 +108,26 @@ export function ExplorerSidebar({
         mobileView,
         desktopFileExplorerOpen,
       });
-      closeToAgent();
+      if (isMobile) {
+        showMobileAgent();
+        return;
+      }
+      closeDesktopFileExplorer();
     },
-    [closeToAgent, desktopFileExplorerOpen, isOpen, mobileView],
+    [
+      closeDesktopFileExplorer,
+      desktopFileExplorerOpen,
+      isMobile,
+      isOpen,
+      mobileView,
+      showMobileAgent,
+    ],
   );
 
   const handleCloseFromGesture = useCallback(() => {
     gestureAnimatingRef.current = true;
-    closeToAgent();
-  }, [closeToAgent, gestureAnimatingRef]);
+    showMobileAgent();
+  }, [gestureAnimatingRef, showMobileAgent]);
 
   const enableSidebarCloseGesture = isMobile && isOpen;
 

packages/app/src/components/headers/menu-header.tsx

@@ -48,7 +48,8 @@ export function SidebarMenuToggle({
   const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
-  const toggleAgentList = usePanelStore((state) => state.toggleAgentList);
+  const toggleMobileAgentList = usePanelStore((state) => state.toggleMobileAgentList);
+  const toggleDesktopAgentList = usePanelStore((state) => state.toggleDesktopAgentList);
   const toggleShortcutKeys = getShortcutOs() === "mac" ? ["mod", "B"] : ["mod", "."];
 
   const isOpen = isMobile ? mobileView === "agent-list" : desktopAgentListOpen;
@@ -57,7 +58,7 @@ export function SidebarMenuToggle({
 
   return (
     <HeaderToggleButton
-      onPress={toggleAgentList}
+      onPress={isMobile ? toggleMobileAgentList : toggleDesktopAgentList}
       tooltipLabel="Toggle sidebar"
       tooltipKeys={toggleShortcutKeys}
       tooltipSide={tooltipSide}

packages/app/src/components/left-sidebar.tsx

@@ -118,7 +118,7 @@ export const LeftSidebar = memo(function LeftSidebar({
   const isCompactLayout = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopAgentListOpen = usePanelStore((state) => state.desktop.agentListOpen);
-  const closeToAgent = usePanelStore((state) => state.closeToAgent);
+  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
   const pathname = usePathname();
   const daemons = useHosts();
   const activeServerIdFromPath = useMemo(() => parseServerIdFromPathname(pathname), [pathname]);
@@ -208,18 +208,18 @@ export const LeftSidebar = memo(function LeftSidebar({
   const openProjectPicker = useOpenProjectPicker(activeServerId);
 
   const handleOpenProjectMobile = useCallback(() => {
-    closeToAgent();
+    showMobileAgent();
     void openProjectPicker();
-  }, [closeToAgent, openProjectPicker]);
+  }, [showMobileAgent, openProjectPicker]);
 
   const handleOpenProjectDesktop = useCallback(() => {
     void openProjectPicker();
   }, [openProjectPicker]);
 
   const handleSettingsMobile = useCallback(() => {
-    closeToAgent();
+    showMobileAgent();
     router.push(buildSettingsRoute());
-  }, [closeToAgent]);
+  }, [showMobileAgent]);
 
   const handleSettingsDesktop = useCallback(() => {
     router.push(buildSettingsRoute());
@@ -272,7 +272,7 @@ export const LeftSidebar = memo(function LeftSidebar({
         insetsTop={insets.top}
         insetsBottom={insets.bottom}
         isOpen={isOpen}
-        closeToAgent={closeToAgent}
+        closeToAgent={showMobileAgent}
         handleOpenProject={handleOpenProjectMobile}
         handleSettings={handleSettingsMobile}
         handleViewMoreNavigate={handleViewMoreNavigate}

packages/app/src/components/terminal-pane.tsx

@@ -89,8 +89,8 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
   const xtermTheme = useMemo(() => toXtermTheme(theme.colors.terminal), [theme]);
   const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
-  const openAgentList = usePanelStore((state) => state.openAgentList);
-  const openFileExplorer = usePanelStore((state) => state.openFileExplorer);
+  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",
@@ -573,13 +573,13 @@ export function TerminalPane({ serverId, cwd, terminalId, isPaneFocused }: Termi
                 if (!swipeGesturesEnabled) {
                   return;
                 }
-                openAgentList();
+                showMobileAgentList();
               }}
               onSwipeLeft={() => {
                 if (!swipeGesturesEnabled) {
                   return;
                 }
-                openFileExplorer();
+                showMobileFileExplorer();
               }}
               onInput={handleTerminalData}
               onResize={handleTerminalResize}