Separate explorer checkout from panel state

packages/app/src/screens/agent/draft-agent-screen.tsx

@@ -36,7 +36,11 @@ import {
   useHostRuntimeIsConnected,
 } from "@/runtime/host-runtime";
 import { ExplorerSidebarAnimationProvider } from "@/contexts/explorer-sidebar-animation-context";
-import { usePanelStore, type ExplorerCheckoutContext } from "@/stores/panel-store";
+import { usePanelStore } from "@/stores/panel-store";
+import {
+  setActiveExplorerCheckout,
+  type ExplorerCheckoutContext,
+} from "@/stores/explorer-checkout-context";
 import { MAX_CONTENT_WIDTH, useIsCompactFormFactor } from "@/constants/layout";
 import { WelcomeScreen } from "@/components/welcome-screen";
 import type { Agent } from "@/contexts/session-context";
@@ -237,10 +241,12 @@ function DraftAgentScreenContent({
   const isMobile = useIsCompactFormFactor();
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
-  const toggleFileExplorer = usePanelStore((state) => state.toggleFileExplorer);
-  const openFileExplorer = usePanelStore((state) => state.openFileExplorer);
-  const closeFileExplorer = usePanelStore((state) => state.closeFileExplorer);
-  const setActiveExplorerCheckout = usePanelStore((state) => state.setActiveExplorerCheckout);
+  const showMobileFileExplorer = usePanelStore((state) => state.showMobileFileExplorer);
+  const toggleMobileFileExplorer = usePanelStore((state) => state.toggleMobileFileExplorer);
+  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
+  const openDesktopFileExplorer = usePanelStore((state) => state.openDesktopFileExplorer);
+  const toggleDesktopFileExplorer = usePanelStore((state) => state.toggleDesktopFileExplorer);
+  const closeDesktopFileExplorer = usePanelStore((state) => state.closeDesktopFileExplorer);
   const activateExplorerTabForCheckout = usePanelStore(
     (state) => state.activateExplorerTabForCheckout,
   );
@@ -646,18 +652,39 @@ function DraftAgentScreenContent({
       return;
     }
     activateExplorerTabForCheckout(draftExplorerCheckout);
-    openFileExplorer();
-  }, [activateExplorerTabForCheckout, draftExplorerCheckout, openFileExplorer]);
+    if (isMobile) {
+      showMobileFileExplorer();
+      return;
+    }
+    openDesktopFileExplorer();
+  }, [
+    activateExplorerTabForCheckout,
+    draftExplorerCheckout,
+    isMobile,
+    openDesktopFileExplorer,
+    showMobileFileExplorer,
+  ]);
   const handleToggleExplorer = useCallback(() => {
     if (!canOpenExplorer) {
       return;
     }
     if (isExplorerOpen) {
-      toggleFileExplorer();
+      if (isMobile) {
+        toggleMobileFileExplorer();
+        return;
+      }
+      toggleDesktopFileExplorer();
       return;
     }
     openExplorerForDraftCheckout();
-  }, [canOpenExplorer, isExplorerOpen, openExplorerForDraftCheckout, toggleFileExplorer]);
+  }, [
+    canOpenExplorer,
+    isExplorerOpen,
+    isMobile,
+    openExplorerForDraftCheckout,
+    toggleDesktopFileExplorer,
+    toggleMobileFileExplorer,
+  ]);
   const explorerOpenGesture = useExplorerOpenGesture({
     enabled: isMobile && mobileView === "agent" && canOpenExplorer,
     onOpen: openExplorerForDraftCheckout,
@@ -956,8 +983,19 @@ function DraftAgentScreenContent({
     if (!isFocused || canOpenExplorer || !isExplorerOpen) {
       return;
     }
-    closeFileExplorer();
-  }, [canOpenExplorer, closeFileExplorer, isExplorerOpen, isFocused]);
+    if (isMobile) {
+      showMobileAgent();
+      return;
+    }
+    closeDesktopFileExplorer();
+  }, [
+    canOpenExplorer,
+    closeDesktopFileExplorer,
+    isExplorerOpen,
+    isFocused,
+    isMobile,
+    showMobileAgent,
+  ]);
   useEffect(() => {
     return () => {
       setActiveExplorerCheckout(null);

packages/app/src/screens/open-project-screen.tsx

@@ -20,7 +20,7 @@ import { useIsLocalDaemon } from "@/hooks/use-is-local-daemon";
 import { PairDeviceModal } from "@/desktop/components/pair-device-modal";
 
 export function OpenProjectScreen({ serverId }: { serverId: string }) {
-  const openAgentList = usePanelStore((s) => s.openAgentList);
+  const openDesktopAgentList = usePanelStore((s) => s.openDesktopAgentList);
   const openProjectPicker = useOpenProjectPicker(serverId);
   const hasHydrated = useSessionStore((s) => s.sessions[serverId]?.hasHydratedWorkspaces ?? false);
   const hasProjects = useHasWorkspaces(serverId);
@@ -31,9 +31,9 @@ export function OpenProjectScreen({ serverId }: { serverId: string }) {
 
   useEffect(() => {
     if (!isCompactLayout) {
-      openAgentList();
+      openDesktopAgentList();
     }
-  }, [isCompactLayout, openAgentList]);
+  }, [isCompactLayout, openDesktopAgentList]);
 
   return (
     <View style={styles.container}>

packages/app/src/screens/workspace/workspace-screen.tsx

@@ -48,7 +48,11 @@ import { WorkspaceScriptsButton } from "@/screens/workspace/workspace-scripts-bu
 import { ExplorerSidebarAnimationProvider } from "@/contexts/explorer-sidebar-animation-context";
 import { useToast } from "@/contexts/toast-context";
 import { useExplorerOpenGesture } from "@/hooks/use-explorer-open-gesture";
-import { usePanelStore, type ExplorerCheckoutContext } from "@/stores/panel-store";
+import { usePanelStore } from "@/stores/panel-store";
+import {
+  setActiveExplorerCheckout,
+  type ExplorerCheckoutContext,
+} from "@/stores/explorer-checkout-context";
 import { useSessionStore } from "@/stores/session-store";
 import {
   buildWorkspaceTabPersistenceKey,
@@ -843,13 +847,14 @@ function WorkspaceScreenContent({
 
   const mobileView = usePanelStore((state) => state.mobileView);
   const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
-  const toggleFileExplorer = usePanelStore((state) => state.toggleFileExplorer);
-  const openFileExplorer = usePanelStore((state) => state.openFileExplorer);
+  const showMobileFileExplorer = usePanelStore((state) => state.showMobileFileExplorer);
+  const toggleMobileFileExplorer = usePanelStore((state) => state.toggleMobileFileExplorer);
+  const openDesktopFileExplorer = usePanelStore((state) => state.openDesktopFileExplorer);
+  const toggleDesktopFileExplorer = usePanelStore((state) => state.toggleDesktopFileExplorer);
   const activateExplorerTabForCheckout = usePanelStore(
     (state) => state.activateExplorerTabForCheckout,
   );
-  const closeToAgent = usePanelStore((state) => state.closeToAgent);
-  const setActiveExplorerCheckout = usePanelStore((state) => state.setActiveExplorerCheckout);
+  const showMobileAgent = usePanelStore((state) => state.showMobileAgent);
 
   const isExplorerOpen = isMobile ? mobileView === "file-explorer" : desktopFileExplorerOpen;
 
@@ -876,16 +881,36 @@ function WorkspaceScreenContent({
       return;
     }
     activateExplorerTabForCheckout(activeExplorerCheckout);
-    openFileExplorer();
-  }, [activateExplorerTabForCheckout, activeExplorerCheckout, openFileExplorer]);
+    if (isMobile) {
+      showMobileFileExplorer();
+      return;
+    }
+    openDesktopFileExplorer();
+  }, [
+    activateExplorerTabForCheckout,
+    activeExplorerCheckout,
+    isMobile,
+    openDesktopFileExplorer,
+    showMobileFileExplorer,
+  ]);
 
   const handleToggleExplorer = useCallback(() => {
     if (isExplorerOpen) {
-      toggleFileExplorer();
+      if (isMobile) {
+        toggleMobileFileExplorer();
+        return;
+      }
+      toggleDesktopFileExplorer();
       return;
     }
     openExplorerForWorkspace();
-  }, [isExplorerOpen, openExplorerForWorkspace, toggleFileExplorer]);
+  }, [
+    isExplorerOpen,
+    isMobile,
+    openExplorerForWorkspace,
+    toggleDesktopFileExplorer,
+    toggleMobileFileExplorer,
+  ]);
 
   const explorerOpenGesture = useExplorerOpenGesture({
     enabled: isMobile && mobileView === "agent",
@@ -899,14 +924,14 @@ function WorkspaceScreenContent({
 
     const handler = BackHandler.addEventListener("hardwareBackPress", () => {
       if (isExplorerOpen) {
-        closeToAgent();
+        showMobileAgent();
         return true;
       }
       return false;
     });
 
     return () => handler.remove();
-  }, [closeToAgent, isExplorerOpen, isRouteFocused]);
+  }, [isExplorerOpen, isRouteFocused, showMobileAgent]);
 
   const persistenceKey = useMemo(
     () =>
@@ -1190,7 +1215,7 @@ function WorkspaceScreenContent({
   const handleOpenFileFromExplorer = useCallback(
     function handleOpenFileFromExplorer(filePath: string) {
       if (isMobile) {
-        closeToAgent();
+        showMobileAgent();
       }
       if (!persistenceKey) {
         return;
@@ -1200,7 +1225,7 @@ function WorkspaceScreenContent({
         navigateToTabId(tabId);
       }
     },
-    [closeToAgent, isMobile, navigateToTabId, openWorkspaceTabFocused, persistenceKey],
+    [isMobile, navigateToTabId, openWorkspaceTabFocused, persistenceKey, showMobileAgent],
   );
 
   const handleOpenFileFromChat = useCallback(