feat(app): retain workspace screens on sidebar switch

packages/app/src/app/_layout.tsx

@@ -83,7 +83,10 @@ import {
   parseWorkspaceOpenIntent,
   decodeWorkspaceIdFromPathSegment,
 } from "@/utils/host-routes";
-import { syncNavigationActiveWorkspace } from "@/stores/navigation-active-workspace-store";
+import {
+  addBrowserActiveWorkspaceLocationListener,
+  syncNavigationActiveWorkspace,
+} from "@/stores/navigation-active-workspace-store";
 import { isWeb, isNative } from "@/constants/platform";
 
 polyfillCrypto();
@@ -843,6 +846,7 @@ function NavigationActiveWorkspaceObserver() {
 
   useEffect(() => {
     syncNavigationActiveWorkspace(navigationRef);
+    const unsubscribeBrowserLocation = addBrowserActiveWorkspaceLocationListener();
     const unsubscribeState = navigationRef.addListener("state", () => {
       syncNavigationActiveWorkspace(navigationRef);
     });
@@ -850,6 +854,7 @@ function NavigationActiveWorkspaceObserver() {
       syncNavigationActiveWorkspace(navigationRef);
     });
     return () => {
+      unsubscribeBrowserLocation();
       unsubscribeState();
       unsubscribeReady();
     };

packages/app/src/app/h/[serverId]/workspace/[workspaceId]/_layout.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigation } from "@react-navigation/native";
+import { StyleSheet, View } from "react-native";
 import {
   useGlobalSearchParams,
   useLocalSearchParams,
@@ -7,6 +8,11 @@ import {
   useRootNavigationState,
 } from "expo-router";
 import { HostRouteBootstrapBoundary } from "@/components/host-route-bootstrap-boundary";
+import {
+  activateNavigationWorkspaceSelection,
+  type ActiveWorkspaceSelection,
+  useNavigationActiveWorkspaceSelection,
+} from "@/stores/navigation-active-workspace-store";
 import type { WorkspaceTabTarget } from "@/stores/workspace-tabs-store";
 import { WorkspaceScreen } from "@/screens/workspace/workspace-screen";
 import {
@@ -95,6 +101,23 @@ function HostWorkspaceLayoutContent() {
     ? (decodeWorkspaceIdFromPathSegment(workspaceValue) ?? "")
     : "";
   const openValue = getParamValue(globalParams.open);
+  const routeWorkspaceSelection = useMemo(
+    () =>
+      serverId && workspaceId
+        ? {
+            serverId,
+            workspaceId,
+          }
+        : null,
+    [serverId, workspaceId],
+  );
+
+  useEffect(() => {
+    if (!routeWorkspaceSelection) {
+      return;
+    }
+    activateNavigationWorkspaceSelection(routeWorkspaceSelection);
+  }, [routeWorkspaceSelection]);
 
   useEffect(() => {
     if (!openValue) {
@@ -144,11 +167,73 @@ function HostWorkspaceLayoutContent() {
     return null;
   }
 
+  return <WorkspaceDeck fallbackSelection={routeWorkspaceSelection} />;
+}
+
+function areWorkspaceSelectionsEqual(
+  left: ActiveWorkspaceSelection | null,
+  right: ActiveWorkspaceSelection | null,
+): boolean {
+  return left?.serverId === right?.serverId && left?.workspaceId === right?.workspaceId;
+}
+
+function WorkspaceDeck({
+  fallbackSelection,
+}: {
+  fallbackSelection: ActiveWorkspaceSelection | null;
+}) {
+  const activeSelection = useNavigationActiveWorkspaceSelection() ?? fallbackSelection;
+  const [mountedSelections, setMountedSelections] = useState<ActiveWorkspaceSelection[]>(() =>
+    activeSelection ? [activeSelection] : [],
+  );
+
+  useEffect(() => {
+    if (!activeSelection) {
+      return;
+    }
+    setMountedSelections((current) => {
+      if (current.some((selection) => areWorkspaceSelectionsEqual(selection, activeSelection))) {
+        return current;
+      }
+      return [...current, activeSelection];
+    });
+  }, [activeSelection]);
+
+  if (!activeSelection) {
+    return null;
+  }
+
   return (
-    <WorkspaceScreen
-      key={`${serverId}:${workspaceId}`}
-      serverId={serverId}
-      workspaceId={workspaceId}
-    />
+    <View style={styles.deck}>
+      {mountedSelections.map((selection) => {
+        const isActive = areWorkspaceSelectionsEqual(selection, activeSelection);
+        return (
+          <View
+            key={`${selection.serverId}:${selection.workspaceId}`}
+            style={isActive ? styles.activeDeckEntry : styles.inactiveDeckEntry}
+            testID={`workspace-deck-entry-${selection.serverId}:${selection.workspaceId}`}
+          >
+            <WorkspaceScreen
+              serverId={selection.serverId}
+              workspaceId={selection.workspaceId}
+              isRouteFocused={isActive}
+            />
+          </View>
+        );
+      })}
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  deck: {
+    flex: 1,
+  },
+  activeDeckEntry: {
+    flex: 1,
+  },
+  inactiveDeckEntry: {
+    display: "none",
+    flex: 1,
+  },
+});

packages/app/src/hooks/use-workspace-navigation.ts

@@ -1,17 +1,27 @@
 import { useCallback } from "react";
 import { router } from "expo-router";
+import {
+  activateNavigationWorkspaceSelection,
+  getNavigationActiveWorkspaceSelection,
+} from "@/stores/navigation-active-workspace-store";
 import { buildHostWorkspaceRoute } from "@/utils/host-routes";
 
 /**
- * Navigate to a workspace screen. Uses router.navigate() which,
- * combined with getId on the workspace Stack.Screen, ensures:
- * - Only one instance of each workspace exists in the stack
- * - History is preserved (back button works)
- * - No duplicate workspace screens
+ * Open a workspace. Once the workspace shell is mounted, switching workspaces
+ * is app-level state so native-stack does not rebuild every retained screen.
  */
 export function navigateToWorkspace(serverId: string, workspaceId: string) {
+  const activeWorkspace = getNavigationActiveWorkspaceSelection();
+  if (activeWorkspace) {
+    activateNavigationWorkspaceSelection(
+      { serverId, workspaceId },
+      { updateBrowserHistory: true, historyMode: "push" },
+    );
+    return;
+  }
+
   const href = buildHostWorkspaceRoute(serverId, workspaceId);
-  router.navigate(href);
+  router.navigate(href as any);
 }
 
 export function useWorkspaceNavigation() {

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

@@ -133,6 +133,7 @@ const EMPTY_SET = new Set<string>();
 type WorkspaceScreenProps = {
   serverId: string;
   workspaceId: string;
+  isRouteFocused?: boolean;
 };
 
 type WorkspaceScreenContentProps = WorkspaceScreenProps & {
@@ -571,15 +572,16 @@ function useStableTabDescriptorMap(tabDescriptors: WorkspaceTabDescriptor[]) {
   return tabDescriptorMap;
 }
 
-export function WorkspaceScreen({ serverId, workspaceId }: WorkspaceScreenProps) {
-  const isFocused = useIsFocused();
+export function WorkspaceScreen({ serverId, workspaceId, isRouteFocused }: WorkspaceScreenProps) {
+  const navigationFocused = useIsFocused();
+  const effectiveRouteFocused = isRouteFocused ?? navigationFocused;
 
   return (
     <ExplorerSidebarAnimationProvider>
       <WorkspaceScreenContent
         serverId={serverId}
         workspaceId={workspaceId}
-        isRouteFocused={isFocused}
+        isRouteFocused={effectiveRouteFocused}
       />
     </ExplorerSidebarAnimationProvider>
   );

packages/app/src/stores/navigation-active-workspace-store.ts

@@ -1,14 +1,21 @@
 import { useSyncExternalStore } from "react";
 import {
+  buildHostWorkspaceRoute,
   decodeWorkspaceIdFromPathSegment,
   parseHostWorkspaceRouteFromPathname,
 } from "@/utils/host-routes";
+import { isWeb } from "@/constants/platform";
 
-interface ActiveWorkspaceSelection {
+export interface ActiveWorkspaceSelection {
   serverId: string;
   workspaceId: string;
 }
 
+interface ActivateWorkspaceSelectionOptions {
+  updateBrowserHistory?: boolean;
+  historyMode?: "push" | "replace";
+}
+
 type NavigationRouteLike = {
   name?: unknown;
   params?: unknown;
@@ -45,6 +52,36 @@ function emitIfChanged(next: ActiveWorkspaceSelection | null) {
   }
 }
 
+function getBrowserLocationWorkspace(): ActiveWorkspaceSelection | null {
+  if (!isWeb || typeof window === "undefined") {
+    return null;
+  }
+  return parseHostWorkspaceRouteFromPathname(window.location.pathname);
+}
+
+function writeBrowserWorkspaceUrl(
+  next: ActiveWorkspaceSelection,
+  options: ActivateWorkspaceSelectionOptions,
+) {
+  if (!options.updateBrowserHistory || !isWeb || typeof window === "undefined") {
+    return;
+  }
+
+  const nextPath = buildHostWorkspaceRoute(next.serverId, next.workspaceId);
+  const currentUrl = new URL(window.location.href);
+  if (currentUrl.pathname === nextPath && !currentUrl.search && !currentUrl.hash) {
+    return;
+  }
+
+  const nextUrl = new URL(nextPath, window.location.origin);
+  const mode = options.historyMode ?? "push";
+  if (mode === "replace") {
+    window.history.replaceState(null, "", nextUrl.toString());
+    return;
+  }
+  window.history.pushState(null, "", nextUrl.toString());
+}
+
 function extractActiveWorkspaceFromRoute(
   route: NavigationRouteLike | undefined,
 ): ActiveWorkspaceSelection | null {
@@ -91,6 +128,36 @@ export function syncNavigationActiveWorkspace(navigationRef: NavigationObserverR
   );
 }
 
+export function activateNavigationWorkspaceSelection(
+  next: ActiveWorkspaceSelection,
+  options: ActivateWorkspaceSelectionOptions = {},
+) {
+  emitIfChanged(next);
+  writeBrowserWorkspaceUrl(next, options);
+}
+
+export function getNavigationActiveWorkspaceSelection(): ActiveWorkspaceSelection | null {
+  return getSnapshot();
+}
+
+export function syncBrowserActiveWorkspaceFromLocation() {
+  emitIfChanged(getBrowserLocationWorkspace());
+}
+
+export function addBrowserActiveWorkspaceLocationListener(): () => void {
+  if (!isWeb || typeof window === "undefined") {
+    return () => {};
+  }
+
+  const handlePopState = () => {
+    syncBrowserActiveWorkspaceFromLocation();
+  };
+  window.addEventListener("popstate", handlePopState);
+  return () => {
+    window.removeEventListener("popstate", handlePopState);
+  };
+}
+
 export function useNavigationActiveWorkspaceSelection(): ActiveWorkspaceSelection | null {
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }