docs(CLAUDE): desktop-specific rules — routing, singleton, drag, UX split

Codifies the lessons from the recent desktop refactor series
(#1237, #1238, #1239) so future work doesn't re-derive them from
bugs. Covers:

- **Route categories** (session / transition / error) — explains why
  `/workspaces/new` and `/invite/:id` are overlay state, not routes,
  on desktop; stale slugs auto-heal instead of rendering error pages.
- **`setCurrentWorkspace` singleton hygiene** — unmount doesn't
  clear it; any code leaving workspace context must call
  `setCurrentWorkspace(null, null)` explicitly.
- **Workspace destructive operations ordering** — navigate first,
  mutate after, to avoid the three-way refetch race that surfaces
  as CancelledError + full-page reload.
- **Tab isolation** — tabs are grouped per workspace; cross-workspace
  push is intercepted by the navigation adapter and translated into
  switchWorkspace.
- **Drag region pattern** — flex child at top, not absolute overlay;
  `-webkit-app-region` hit-testing is unreliable with z-index stacking.
- **UX vs platform chrome split** — UX affordances (Back, Log out,
  welcome copy) in packages/views/; platform chrome (drag, immersive
  mode, tab system) in desktop-only code.

Also patches the Cross-Platform Development Rules' rule #2 which
previously said "add a route in both apps" unconditionally — added
the exception for pre-workspace transition flows pointing at the
new Desktop-specific Rules section.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

CLAUDE.md

@@ -162,7 +162,7 @@ When the two apps need different behavior for the same concept (e.g., different
 When adding a new page or feature:
 
 1. **New page component** → add to `packages/views/<domain>/`. Never import from `next/*` or `react-router-dom`.
-2. **Wire it in both apps** → add a route in `apps/web/app/` (Next.js page file) AND in the desktop router.
+2. **Wire it in both apps** → add a route in `apps/web/app/` (Next.js page file) AND in the desktop router. **Exception**: pre-workspace transition flows (create workspace, accept invite) are NOT routes on desktop — they're `WindowOverlay` state. See *Desktop-specific Rules → Route categories*.
 3. **Navigation** → use `useNavigation().push()` or `<AppLink>`. Never use framework-specific link/router APIs in shared code.
 4. **Shared guards/providers** → use `DashboardGuard` from `packages/views/layout/`. Don't create separate guard logic per app.
 5. **Platform-specific UI** → if a feature is web-only or desktop-only, keep it in the respective app. Use props slots (`extra`, `topSlot`) on shared layout components to inject platform-specific UI.
@@ -176,6 +176,70 @@ Both apps share the same CSS foundation from `packages/ui/styles/`.
 - **Shared styles** → `packages/ui/styles/`. Never duplicate scrollbar styling, keyframes, or base layer rules in app CSS.
 - **`@source` directives** → both apps scan shared packages so Tailwind sees all class names.
 
+## Desktop-specific Rules
+
+These rules apply to `apps/desktop/` only. Web has different constraints (URL bar, SSR, no tabs) and doesn't share these concerns. Every rule in this section was added after a concrete bug — treat them as enforced, not suggestions.
+
+### Route categories
+
+Every path in the desktop app falls into exactly one category. Choosing the wrong one reproduces bugs we've already fixed.
+
+- **Session routes** — workspace-scoped pages (`/:slug/issues`, `/:slug/settings`). Rendered by the per-tab memory router under `WorkspaceRouteLayout`. These are legitimate tab destinations.
+- **Transition flows** — pre-workspace / one-shot actions (create workspace, accept invite). **NOT routes.** They live as `WindowOverlay` state, dispatched when the navigation adapter sees `push('/workspaces/new')` or `push('/invite/<id>')`. The shared view (`NewWorkspacePage`, `InvitePage`) is the content; the overlay wrapper supplies platform chrome.
+- **Error / stale states** — "workspace not available", tabs pointing at a revoked workspace. **NOT pages.** `WorkspaceRouteLayout` auto-heals by dropping the stale tab group from the store; the user never lands on an explicit error screen. Web keeps `NoAccessPage` (shareable URL makes the error state meaningful); desktop has no URL bar so stale = heal silently.
+
+**Adding a new pre-workspace flow on desktop**: register a new `WindowOverlay` type in `stores/window-overlay-store.ts`. Do NOT add it to `routes.tsx`. If a shared view needs the flow on both platforms, add the route on web (`apps/web/app/(auth)/...`) AND the overlay type on desktop — the shared view component is identical.
+
+### Workspace identity singleton
+
+`setCurrentWorkspace(slug, uuid)` in `@multica/core/platform` is the single source of truth for "which workspace is active right now". Three consumers depend on it:
+
+1. API client's `X-Workspace-Slug` header.
+2. Zustand per-workspace storage namespace.
+3. Chrome gating (`{slug && <AppSidebar />}` on desktop, similar on web).
+
+Normally set by `WorkspaceRouteLayout` when its route mounts. Critically: **unmount does NOT clear it.** Any code that leaves workspace context (leave workspace, delete workspace, force navigation to overlay) must call `setCurrentWorkspace(null, null)` explicitly — otherwise the realtime `workspace:deleted` handler races the mutation, chrome gating stays truthy while the workspace is gone from cache, and `useWorkspaceId` throws.
+
+### Workspace destructive operations
+
+Leave / Delete workspace flows must follow this order:
+
+1. Read destination from cached workspace list (no extra fetch).
+2. `setCurrentWorkspace(null, null)`.
+3. `navigation.push(destination)` — switch to next workspace or open new-workspace overlay.
+4. THEN `await mutation.mutateAsync(workspaceId)`.
+
+Reversing step 4 with steps 1–3 (mutate first, navigate after) causes a three-way race between the mutation's `onSettled` invalidate, the explicit `navigateAway`, and the realtime handler's `relocateAfterWorkspaceLoss` — all refetching the same `workspaces` query concurrently. One gets cancelled, bubbles as `CancelledError`, and triggers `window.location.assign` → full renderer reload / white screen.
+
+### Tab isolation
+
+Tabs are grouped per workspace in `stores/tab-store.ts`. The TabBar shows only the active workspace's tabs; cross-workspace tab leakage is impossible by construction (no flat global tabs array).
+
+Cross-workspace `push(path)` is detected by the navigation adapter (`platform/navigation.tsx`) and translated into `switchWorkspace(slug, targetPath)` — NOT a navigation within the current tab's router. Don't bypass the adapter; always go through `useNavigation()` from shared code.
+
+### Drag region (macOS window-move)
+
+Every full-window desktop view (login, overlay, any page that covers the native title bar) needs a top drag strip so users can move the window. On macOS the traffic lights are hidden via `useImmersiveMode` in overlay-style contexts, so the drag strip also gives back that corner for pointer-drag.
+
+**Pattern**: flex child at top, not absolute overlay.
+
+```tsx
+<div className="fixed inset-0 z-50 flex flex-col bg-background">
+  <div className="h-12 shrink-0" style={{ WebkitAppRegion: "drag" }} />
+  <div className="flex-1 overflow-auto" style={{ WebkitAppRegion: "no-drag" }}>
+    {/* page content — interactive elements need their own "no-drag" */}
+  </div>
+</div>
+```
+
+Why flex, not absolute: the absolute-strip + `z-index` approach relies on stacking-context hit-testing, which isn't reliable for `-webkit-app-region`. A real flex row with no siblings at that pixel is unambiguous. Height matches `MainTopBar` (48px / `h-12`) for consistency.
+
+Canonical examples: `components/window-overlay.tsx`, `pages/login.tsx`.
+
+### UX vs platform chrome
+
+UX affordances (Back button, Log out button, welcome copy, invite card) belong in `packages/views/` so web and desktop render identical content. Platform chrome (drag strip, `useImmersiveMode`, tab system interaction, traffic-light accommodation) lives in desktop-only code. Violating this split always produces platform divergence — if a button exists on desktop but not on web for the same flow, it's a signal the UX escaped into platform code.
+
 ## UI/UX Rules
 
 - Prefer shadcn components over custom implementations. Install via `pnpm ui:add <component>` from project root — adds to `packages/ui/components/ui/`. All components use Base UI primitives (`@base-ui/react`), not Radix.

apps/desktop/src/renderer/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { CoreProvider } from "@multica/core/platform";
 import { useAuthStore } from "@multica/core/auth";
@@ -13,6 +13,7 @@ import { UpdateNotification } from "./components/update-notification";
 import { useTabStore } from "./stores/tab-store";
 import { useWindowOverlayStore } from "./stores/window-overlay-store";
 
+
 function AppContent() {
   const user = useAuthStore((s) => s.user);
   const isLoading = useAuthStore((s) => s.isLoading);
@@ -95,22 +96,40 @@ function AppContent() {
   });
   const wsCount = workspaces?.length ?? 0;
 
-  // Validate persisted tab paths against the current user's workspace list.
-  // Tabs survive across app restarts and account switches (persisted to
-  // localStorage `multica_tabs`), so a tab path like `/naiyuan/issues` may
-  // reference a workspace the current user can't access — showing
-  // NoAccessPage every time they open the app.
-  //
-  // Run synchronously in render phase rather than in useEffect so the first
-  // render already sees validated tabs. useEffect runs AFTER commit, which
-  // means the initial render would briefly show NoAccessPage before the
-  // effect resets the tab. Zustand supports render-phase setState; the
-  // validator is idempotent (exits early if nothing changed) so this
-  // doesn't loop.
-  if (workspaces) {
+  // Validate persisted tab state against the current user's workspace list,
+  // and pick an active workspace if none is set. Runs in useLayoutEffect
+  // (synchronously after render, before paint) rather than the render
+  // phase — the original render-phase pattern triggered React's
+  // "Cannot update a component while rendering a different component"
+  // warning because `switchWorkspace` is a Zustand setState that the
+  // TabBar is subscribed to. useLayoutEffect flushes both renders before
+  // the user sees anything, so there's no visible flicker.
+  useLayoutEffect(() => {
+    if (!workspaces) return;
     const validSlugs = new Set(workspaces.map((w) => w.slug));
-    useTabStore.getState().validateWorkspaceSlugs(validSlugs);
-  }
+    const tabStore = useTabStore.getState();
+    tabStore.validateWorkspaceSlugs(validSlugs);
+    if (!tabStore.activeWorkspaceSlug && workspaces.length > 0) {
+      tabStore.switchWorkspace(workspaces[0].slug);
+    }
+  }, [workspaces]);
+
+  // Bidirectional new-workspace overlay: visible when there are no
+  // workspaces to enter, hidden as soon as one exists. Gated on
+  // `workspaceListFetched` so the initial render doesn't flash the
+  // overlay before the list arrives. The overlay's own `invite` type is
+  // not touched here — that's an in-flight task owned by the user.
+  useEffect(() => {
+    if (!user) return;
+    if (!workspaceListFetched) return;
+    const { overlay, open, close } = useWindowOverlayStore.getState();
+    const isEmpty = wsCount === 0;
+    if (isEmpty) {
+      if (!overlay) open({ type: "new-workspace" });
+    } else if (overlay?.type === "new-workspace") {
+      close();
+    }
+  }, [user, workspaceListFetched, wsCount]);
   // null = undecided (pre-login or list hasn't settled yet)
   // true  = session started with zero workspaces; next transition to >=1 triggers restart
   // false = session started with >=1 workspace, OR we've already restarted; skip

apps/desktop/src/renderer/src/components/tab-bar.tsx

@@ -29,8 +29,8 @@ import {
 } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@multica/ui/lib/utils";
-import { useTabStore, resolveRouteIcon, type Tab } from "@/stores/tab-store";
-import { isGlobalPath, paths } from "@multica/core/paths";
+import { useTabStore, useActiveGroup, resolveRouteIcon, type Tab } from "@/stores/tab-store";
+import { paths } from "@multica/core/paths";
 
 const TAB_ICONS: Record<string, LucideIcon> = {
   Inbox,
@@ -67,16 +67,13 @@ function SortableTabItem({ tab, isActive, isOnly }: { tab: Tab; isActive: boolea
   const handleClick = () => {
     if (isActive) return;
     setActiveTab(tab.id);
-    // No navigate() — Activity handles visibility
   };
 
   const handleClose = (e: React.MouseEvent) => {
     e.stopPropagation();
     closeTab(tab.id);
-    // No navigate() — store handles activeTabId switch
   };
 
-  // Stop pointer down on close so it doesn't start a drag on the parent button.
   const stopDragOnClose = (e: React.PointerEvent) => {
     e.stopPropagation();
   };
@@ -125,22 +122,13 @@ function NewTabButton() {
   const setActiveTab = useTabStore((s) => s.setActiveTab);
 
   const handleClick = () => {
-    // Inherit the active tab's workspace. Terminal/IDE convention: new tab
-    // opens in the same context as the active one. Read the slug from the
-    // active tab's path directly rather than from getCurrentSlug(), because
-    // that singleton is "last tab to render" (non-deterministic with N tabs
-    // mounted under <Activity>), while activeTabId is the unambiguous truth.
-    // Falls back to "/" (→ IndexRedirect → first workspace) when the active
-    // tab is on a global route (e.g. /workspaces/new, /login).
-    const { tabs, activeTabId } = useTabStore.getState();
-    const activePath = tabs.find((t) => t.id === activeTabId)?.path ?? "/";
-    let slug: string | null = null;
-    if (activePath !== "/" && !isGlobalPath(activePath)) {
-      slug = activePath.split("/").filter(Boolean)[0] ?? null;
-    }
-    const path = slug ? paths.workspace(slug).issues() : "/";
+    // New tab opens in the currently active workspace — tabs are scoped
+    // per workspace, so there is no cross-workspace ambiguity to resolve.
+    const activeSlug = useTabStore.getState().activeWorkspaceSlug;
+    if (!activeSlug) return;
+    const path = paths.workspace(activeSlug).issues();
     const tabId = addTab(path, "Issues", resolveRouteIcon(path));
-    setActiveTab(tabId);
+    if (tabId) setActiveTab(tabId);
   };
 
   return (
@@ -155,17 +143,17 @@ function NewTabButton() {
 }
 
 export function TabBar() {
-  const tabs = useTabStore((s) => s.tabs);
-  const activeTabId = useTabStore((s) => s.activeTabId);
+  const group = useActiveGroup();
   const moveTab = useTabStore((s) => s.moveTab);
 
-  // distance: 5 — pointer must move 5px to start a drag, otherwise it's a click.
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: { distance: 5 },
     }),
   );
 
+  const tabs = group?.tabs ?? [];
+  const activeTabId = group?.activeTabId ?? "";
   const tabIds = tabs.map((t) => t.id);
 
   const handleDragEnd = (event: DragEndEvent) => {
@@ -195,7 +183,7 @@ export function TabBar() {
           ))}
         </SortableContext>
       </DndContext>
-      <NewTabButton />
+      {group && <NewTabButton />}
     </div>
   );
 }

apps/desktop/src/renderer/src/components/tab-content.tsx

@@ -1,40 +1,52 @@
 import { Activity, useEffect } from "react";
 import { RouterProvider } from "react-router-dom";
-import { useTabStore } from "@/stores/tab-store";
+import { useActiveGroup } from "@/stores/tab-store";
 import { TabNavigationProvider } from "@/platform/navigation";
 import { useTabRouterSync } from "@/hooks/use-tab-router-sync";
+import type { Tab } from "@/stores/tab-store";
 
-/** Inner wrapper rendered inside each tab's RouterProvider. */
-function TabRouterInner({ tabId }: { tabId: string }) {
-  const tab = useTabStore((s) => s.tabs.find((t) => t.id === tabId));
-  useTabRouterSync(tabId, tab!.router);
+/**
+ * Inner wrapper rendered inside each tab's RouterProvider. The router
+ * reference is stable for a tab's lifetime, so passing it in directly
+ * (instead of re-deriving from the store) avoids needless re-renders.
+ */
+function TabRouterInner({ tab }: { tab: Tab }) {
+  useTabRouterSync(tab.id, tab.router);
   return null;
 }
 
 /**
- * Renders all tabs using Activity for state preservation.
+ * Renders the active workspace's tabs using Activity for state preservation.
  * Only the active tab is visible; hidden tabs keep their DOM and React state.
+ *
+ * When switching workspaces, the previous workspace's tabs unmount entirely
+ * and the new workspace's tabs mount fresh — cross-workspace state
+ * preservation is an explicit non-goal (keeping all workspaces' tabs warm
+ * simultaneously would bloat memory and make workspace switching feel
+ * anything but "switching").
  */
 export function TabContent() {
-  const tabs = useTabStore((s) => s.tabs);
-  const activeTabId = useTabStore((s) => s.activeTabId);
+  const group = useActiveGroup();
 
-  // Sync document.title when switching tabs
+  // Sync document.title when switching tabs within the active workspace.
   useEffect(() => {
-    const tab = tabs.find((t) => t.id === activeTabId);
+    if (!group) return;
+    const tab = group.tabs.find((t) => t.id === group.activeTabId);
     if (tab) document.title = tab.title;
-  }, [activeTabId, tabs]);
+  }, [group?.activeTabId, group?.tabs]);
+
+  if (!group) return null;
 
   return (
     <>
-      {tabs.map((tab) => (
+      {group.tabs.map((tab) => (
         <Activity
           key={tab.id}
-          mode={tab.id === activeTabId ? "visible" : "hidden"}
+          mode={tab.id === group.activeTabId ? "visible" : "hidden"}
         >
           <TabNavigationProvider router={tab.router}>
             <RouterProvider router={tab.router} />
-            <TabRouterInner tabId={tab.id} />
+            <TabRouterInner tab={tab} />
           </TabNavigationProvider>
         </Activity>
       ))}

apps/desktop/src/renderer/src/components/window-overlay.tsx

@@ -45,12 +45,21 @@ function WindowOverlayInner() {
 
   return (
     <div className="fixed inset-0 z-50 flex flex-col bg-background">
-      {/* Window-drag strip — OS-level. Transparent; covers the area
-          traffic lights would normally sit (they're hidden by
-          useImmersiveMode on macOS). */}
+      {/* Window-drag strip. Rendered as a flex *child* (not absolute
+          overlay) so it owns its own 48px of real layout space — the
+          prior absolute-positioned approach relied on z-index stacking
+          to beat the content wrapper's no-drag, which in practice didn't
+          hit-test reliably for `-webkit-app-region` on the welcome
+          screen. A real flex row with nothing else in it has no such
+          ambiguity: any pixel at top-48 is drag, full stop.
+
+          Height matches `MainTopBar` (48px) so the drag-to-grab area
+          feels consistent with the rest of the app. The strip is
+          invisible; macOS traffic lights would normally sit here but
+          `useImmersiveMode` has hidden them for the overlay's lifetime. */}
       <div
         aria-hidden
-        className="absolute inset-x-0 top-0 h-10 z-10"
+        className="h-12 shrink-0"
         style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
       />
 

apps/desktop/src/renderer/src/components/workspace-route-layout.tsx

@@ -2,10 +2,14 @@ import { useEffect } from "react";
 import { Outlet, useNavigate, useParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { WorkspaceSlugProvider, paths } from "@multica/core/paths";
-import { workspaceBySlugOptions } from "@multica/core/workspace";
+import {
+  workspaceBySlugOptions,
+  workspaceListOptions,
+} from "@multica/core/workspace";
 import { setCurrentWorkspace } from "@multica/core/platform";
 import { useAuthStore } from "@multica/core/auth";
 import { useWorkspaceSeen } from "@multica/views/workspace/use-workspace-seen";
+import { useTabStore } from "@/stores/tab-store";
 
 /**
  * Desktop equivalent of apps/web/app/[workspaceSlug]/layout.tsx.
@@ -18,11 +22,11 @@ import { useWorkspaceSeen } from "@multica/views/workspace/use-workspace-seen";
  *
  * Unlike web, desktop never renders a "workspace not available" page: the
  * app has no URL bar and no clickable links from outside the session, so
- * landing on an inaccessible slug can only mean stale state (persisted tab
- * from a previous account) or active eviction (admin removal, realtime
- * delete). Both cases resolve by bouncing to `/`, where IndexRedirect
- * picks a valid destination — the next workspace, or the new-workspace
- * overlay if the user has none.
+ * landing on an inaccessible slug can only mean stale state (a persisted
+ * tab group for a workspace the current user no longer has access to, or
+ * active eviction). Both cases resolve by dropping the stale tab group
+ * from the tab store — the TabBar then renders a different workspace or
+ * the WindowOverlay takes over (zero valid workspaces).
  */
 export function WorkspaceRouteLayout() {
   const { workspaceSlug } = useParams<{ workspaceSlug: string }>();
@@ -30,10 +34,7 @@ export function WorkspaceRouteLayout() {
   const user = useAuthStore((s) => s.user);
   const isAuthLoading = useAuthStore((s) => s.isLoading);
 
-  // Workspace routes require auth. If user is unauthenticated (token
-  // expired, logged out from another tab, etc.), bounce to /login.
-  // Without this, the layout renders null and the user sees a blank page
-  // stuck on /{slug}/...
+  // Workspace routes require auth. If user is unauthenticated, bounce to /login.
   useEffect(() => {
     if (!isAuthLoading && !user) navigate(paths.login(), { replace: true });
   }, [isAuthLoading, user, navigate]);
@@ -43,39 +44,41 @@ export function WorkspaceRouteLayout() {
     enabled: !!user && !!workspaceSlug,
   });
 
+  const { data: wsList } = useQuery({
+    ...workspaceListOptions(),
+    enabled: !!user,
+  });
+
   // Feed the URL slug into the platform singleton so the API client's
   // X-Workspace-Slug header and persist namespace follow the active tab.
-  // setCurrentWorkspace self-dedupes on slug equality — safe to call on
-  // every render (matters on desktop, where N tabs each mount their own
-  // layout). Rehydrate is the singleton's internal side effect.
+  // setCurrentWorkspace self-dedupes on slug equality.
   if (workspace && workspaceSlug) {
     setCurrentWorkspace(workspaceSlug, workspace.id);
   }
 
-  // Remember whether this slug has resolved before. `useWorkspaceSeen`
-  // gates the auto-heal below so the mid-flight frame of an active-removal
-  // navigation doesn't double-bounce.
   const hasBeenSeen = useWorkspaceSeen(workspaceSlug, !!workspace);
 
-  // Stale slug (tab persisted from a previous account, or revoked access
-  // that hasn't yet been cleaned up by validateWorkspaceSlugs): auto-heal
-  // to `/`. IndexRedirect takes it from there.
+  // Stale-slug auto-heal: when this tab's slug fails to resolve, drop the
+  // whole workspace group from the tab store. Per-workspace tab grouping
+  // means the cleanup is a single validator call — the TabContent will
+  // unmount this tab (and all siblings in the stale group) once the store
+  // updates. We don't navigate this tab's router because the tab's path
+  // is scoped to the stale slug; navigating to "/" would create an
+  // inconsistent "tab in group X with path /" state.
   useEffect(() => {
     if (!user) return;
     if (!listFetched) return;
     if (workspace) return;
     if (hasBeenSeen) return; // active eviction in flight — let the other path win
-    navigate("/", { replace: true });
-  }, [user, listFetched, workspace, hasBeenSeen, navigate]);
+    if (!wsList) return;
+    const validSlugs = new Set(wsList.map((w) => w.slug));
+    useTabStore.getState().validateWorkspaceSlugs(validSlugs);
+  }, [user, listFetched, workspace, hasBeenSeen, wsList]);
 
   if (isAuthLoading) return null;
   if (!workspaceSlug) return null;
-  // Don't render children until workspace is resolved. useWorkspaceId()
-  // throws when the workspace list hasn't populated or the slug is
-  // unknown — gating here is the single point where that invariant is
-  // enforced, so every descendant can call useWorkspaceId() safely.
   if (!listFetched) return null;
-  if (!workspace) return null; // auto-heal effect above handles the navigation
+  if (!workspace) return null; // auto-heal effect above handles the cleanup
 
   return (
     <WorkspaceSlugProvider slug={workspaceSlug}>

apps/desktop/src/renderer/src/hooks/use-tab-history.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import type { DataRouter } from "react-router-dom";
-import { useTabStore } from "@/stores/tab-store";
+import { useActiveTabRouter, useActiveTabHistory } from "@/stores/tab-store";
 
 /**
  * Shared hint map so useTabRouterSync can distinguish back vs forward POP.
@@ -9,32 +9,32 @@ import { useTabStore } from "@/stores/tab-store";
 export const popDirectionHints = new Map<DataRouter, "back" | "forward">();
 
 /**
- * Per-tab back/forward navigation derived from the active tab's history state.
- * Replaces the old global useNavigationHistory() hook.
+ * Per-tab back/forward navigation derived from the active workspace's
+ * active tab.
+ *
+ * Subscribed via primitive selectors so this hook only re-renders when
+ * the numeric history state actually changes — path ticks on the active
+ * tab (which don't shift historyIndex) don't churn the back/forward
+ * buttons.
  */
 export function useTabHistory() {
-  // Return the actual tab object from the store — stable reference.
-  // Do NOT create a new object in the selector (causes infinite re-renders).
-  const activeTab = useTabStore((s) =>
-    s.tabs.find((t) => t.id === s.activeTabId),
-  );
+  const router = useActiveTabRouter();
+  const { historyIndex, historyLength } = useActiveTabHistory();
 
-  const canGoBack = (activeTab?.historyIndex ?? 0) > 0;
-  const canGoForward =
-    (activeTab?.historyIndex ?? 0) < (activeTab?.historyLength ?? 1) - 1;
+  const canGoBack = historyIndex > 0;
+  const canGoForward = historyIndex < historyLength - 1;
 
   const goBack = useCallback(() => {
-    if (!activeTab || activeTab.historyIndex <= 0) return;
-    popDirectionHints.set(activeTab.router, "back");
-    activeTab.router.navigate(-1);
-  }, [activeTab]);
+    if (!router || historyIndex <= 0) return;
+    popDirectionHints.set(router, "back");
+    router.navigate(-1);
+  }, [router, historyIndex]);
 
   const goForward = useCallback(() => {
-    if (!activeTab || activeTab.historyIndex >= activeTab.historyLength - 1)
-      return;
-    popDirectionHints.set(activeTab.router, "forward");
-    activeTab.router.navigate(1);
-  }, [activeTab]);
+    if (!router || historyIndex >= historyLength - 1) return;
+    popDirectionHints.set(router, "forward");
+    router.navigate(1);
+  }, [router, historyIndex, historyLength]);
 
   return { canGoBack, canGoForward, goBack, goForward };
 }

apps/desktop/src/renderer/src/hooks/use-tab-sync.ts

@@ -2,20 +2,23 @@ import { useEffect } from "react";
 import { useTabStore } from "@/stores/tab-store";
 
 /**
- * Watches document.title via MutationObserver and updates the active tab's title.
- *
- * Pages set document.title via TitleSync (route handle.title) or useDocumentTitle().
- * This observer picks up the change and syncs it to the tab store.
+ * Watches document.title via MutationObserver and updates the active tab's
+ * title. Pages set document.title via TitleSync (route handle.title) or
+ * useDocumentTitle(). This observer picks up the change and syncs it to
+ * the tab store.
  */
 export function useActiveTitleSync() {
   useEffect(() => {
     const observer = new MutationObserver(() => {
       const title = document.title;
       if (!title) return;
-      const { tabs, activeTabId } = useTabStore.getState();
-      const activeTab = tabs.find((t) => t.id === activeTabId);
+      const state = useTabStore.getState();
+      if (!state.activeWorkspaceSlug) return;
+      const group = state.byWorkspace[state.activeWorkspaceSlug];
+      if (!group) return;
+      const activeTab = group.tabs.find((t) => t.id === group.activeTabId);
       if (activeTab && activeTab.title !== title) {
-        useTabStore.getState().updateTab(activeTabId, { title });
+        state.updateTab(activeTab.id, { title });
       }
     });
 

apps/desktop/src/renderer/src/platform/navigation.tsx

@@ -5,42 +5,51 @@ import {
   type NavigationAdapter,
 } from "@multica/views/navigation";
 import { useAuthStore } from "@multica/core/auth";
-import { useTabStore, resolveRouteIcon } from "@/stores/tab-store";
+import { isReservedSlug } from "@multica/core/paths";
+import {
+  useTabStore,
+  resolveRouteIcon,
+  useActiveTabIdentity,
+  useActiveTabRouter,
+  getActiveTab,
+} from "@/stores/tab-store";
 import { useWindowOverlayStore } from "@/stores/window-overlay-store";
 
-const ROOT_PATH = "/";
-
 // Public web app URL — injected at build time via .env.production. Falls
 // back to the production host for dev builds so "Copy link" yields a URL
 // that actually points somewhere a teammate can open.
 const APP_URL = import.meta.env.VITE_APP_URL || "https://multica.ai";
 
+/**
+ * Extract the leading workspace slug from a path, or null if the path isn't
+ * workspace-scoped (root, login, any reserved prefix).
+ */
+function extractWorkspaceSlug(path: string): string | null {
+  const first = path.split("/").filter(Boolean)[0] ?? "";
+  if (!first) return null;
+  if (isReservedSlug(first)) return null;
+  return first;
+}
+
 /**
  * Intercept navigation to "transition" paths — pre-workspace flows that on
  * desktop are rendered as a window-level overlay instead of a tab route.
- * Returns `true` if the navigation was handled (caller should NOT proceed
- * with its own router navigation).
+ * Returns `true` if the navigation was handled (caller should NOT proceed).
  *
  * Side effect: when opening the new-workspace overlay, the tab router is
  * ALSO reset to "/". Rationale — the only way a push lands on
  * /workspaces/new is that the workspace context is gone (fresh install,
  * delete-last, leave-last). Leaving the tab parked on a workspace-scoped
- * path like /acme/settings keeps those components mounted under the
- * overlay; the next render after the list cache updates would then throw
- * (useWorkspaceId, useCurrentWorkspace, etc) because the slug no longer
- * resolves. Resetting to "/" unmounts them synchronously. For invite
- * overlay we intentionally do NOT reset — invite is orthogonal and the
- * user's workspace context may still be valid.
- *
- * Navigations to any other path implicitly close an open overlay, so the
- * overlay's lifetime is tied to the user staying in a transition state.
+ * path would keep those components mounted under the overlay; the next
+ * render after the list cache updates would then throw (useWorkspaceId
+ * etc) because the slug no longer resolves.
  */
 function tryRouteToOverlay(path: string, router?: DataRouter): boolean {
   const overlay = useWindowOverlayStore.getState();
   if (path === "/workspaces/new") {
     overlay.open({ type: "new-workspace" });
-    if (router && router.state.location.pathname !== ROOT_PATH) {
-      router.navigate(ROOT_PATH, { replace: true });
+    if (router && router.state.location.pathname !== "/") {
+      router.navigate("/", { replace: true });
     }
     return true;
   }
@@ -49,9 +58,6 @@ function tryRouteToOverlay(path: string, router?: DataRouter): boolean {
     try {
       id = decodeURIComponent(path.slice("/invite/".length));
     } catch {
-      // Malformed percent-encoding — treat as no-op so the caller's push
-      // doesn't attempt to navigate into the (now-removed) invite route
-      // and leave the tab stuck on a 404-shaped path.
       return true;
     }
     if (id) {
@@ -65,8 +71,27 @@ function tryRouteToOverlay(path: string, router?: DataRouter): boolean {
 }
 
 /**
- * Root-level navigation provider for components outside the per-tab RouterProviders
- * (sidebar, search dialog, modals, WindowOverlay contents, etc.).
+ * Intercept pushes that change workspace. Returns `true` if the navigation
+ * was delegated to the tab store (caller should NOT proceed).
+ *
+ * This is the entry point that makes shared code platform-agnostic:
+ * sidebar dropdown, cmd+k "switch workspace", post-delete redirects,
+ * invite-accept flow — they all call `useNavigation().push(path)` with a
+ * full workspace URL, and on desktop we translate "target slug differs
+ * from active" into "switch the tab-group that's visible in the TabBar".
+ */
+function tryRouteToOtherWorkspace(path: string): boolean {
+  const targetSlug = extractWorkspaceSlug(path);
+  if (!targetSlug) return false;
+  const { activeWorkspaceSlug, switchWorkspace } = useTabStore.getState();
+  if (targetSlug === activeWorkspaceSlug) return false;
+  switchWorkspace(targetSlug, path);
+  return true;
+}
+
+/**
+ * Root-level navigation provider for components outside the per-tab
+ * RouterProviders (sidebar, search dialog, modals, WindowOverlay contents).
  *
  * Reads from the active tab's memory router via router.subscribe().
  * Does NOT use any react-router hooks — it's above all RouterProviders.
@@ -76,52 +101,61 @@ export function DesktopNavigationProvider({
 }: {
   children: React.ReactNode;
 }) {
-  const activeTab = useTabStore((s) => s.tabs.find((t) => t.id === s.activeTabId));
-  const [pathname, setPathname] = useState(activeTab?.path ?? "/");
+  // Primitive-only subscriptions so this component doesn't re-render on
+  // unrelated store updates (e.g. an inactive tab's router tick). We
+  // resolve the active router here only to subscribe once per tab switch.
+  const { tabId: activeTabId } = useActiveTabIdentity();
+  const router = useActiveTabRouter();
+  const [pathname, setPathname] = useState(
+    router?.state.location.pathname ?? "/",
+  );
 
-  // Subscribe to the active tab's router for pathname updates
   useEffect(() => {
-    if (!activeTab) return;
-    setPathname(activeTab.router.state.location.pathname);
-    return activeTab.router.subscribe((state) => {
+    if (!router) {
+      setPathname("/");
+      return;
+    }
+    setPathname(router.state.location.pathname);
+    return router.subscribe((state) => {
       setPathname(state.location.pathname);
     });
-  }, [activeTab?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [activeTabId, router]);
 
   const adapter: NavigationAdapter = useMemo(
     () => ({
       push: (path: string) => {
         if (path === "/login") {
-          // DashboardGuard token expired — force back to login screen
           useAuthStore.getState().logout();
           return;
         }
-        const tab = useTabStore.getState().tabs.find(
-          (t) => t.id === useTabStore.getState().activeTabId,
-        );
-        if (tryRouteToOverlay(path, tab?.router)) return;
-        tab?.router.navigate(path);
+        const active = currentActiveTab();
+        if (tryRouteToOverlay(path, active?.router)) return;
+        if (tryRouteToOtherWorkspace(path)) return;
+        active?.router.navigate(path);
       },
       replace: (path: string) => {
-        const tab = useTabStore.getState().tabs.find(
-          (t) => t.id === useTabStore.getState().activeTabId,
-        );
-        if (tryRouteToOverlay(path, tab?.router)) return;
-        tab?.router.navigate(path, { replace: true });
+        const active = currentActiveTab();
+        if (tryRouteToOverlay(path, active?.router)) return;
+        if (tryRouteToOtherWorkspace(path)) return;
+        active?.router.navigate(path, { replace: true });
       },
       back: () => {
-        const tab = useTabStore.getState().tabs.find(
-          (t) => t.id === useTabStore.getState().activeTabId,
-        );
-        tab?.router.navigate(-1);
+        currentActiveTab()?.router.navigate(-1);
       },
       pathname,
       searchParams: new URLSearchParams(),
       openInNewTab: (path: string, title?: string) => {
-        const icon = resolveRouteIcon(path);
+        // Cross-workspace "open in new tab" switches workspace and opens
+        // the path there; same-workspace just adds a tab in the current group.
+        const slug = extractWorkspaceSlug(path);
         const store = useTabStore.getState();
+        if (slug && slug !== store.activeWorkspaceSlug) {
+          store.switchWorkspace(slug, path);
+          return;
+        }
+        const icon = resolveRouteIcon(path);
         const tabId = store.openTab(path, title ?? path, icon);
-        store.setActiveTab(tabId);
+        if (tabId) store.setActiveTab(tabId);
       },
       getShareableUrl: (path: string) => `${APP_URL}${path}`,
     }),
@@ -131,6 +165,10 @@ export function DesktopNavigationProvider({
   return <NavigationProvider value={adapter}>{children}</NavigationProvider>;
 }
 
+function currentActiveTab() {
+  return getActiveTab(useTabStore.getState());
+}
+
 /**
  * Per-tab navigation provider rendered inside each tab's Activity wrapper.
  * Subscribes to the tab's own router for up-to-date pathname.
@@ -157,20 +195,27 @@ export function TabNavigationProvider({
     () => ({
       push: (path: string) => {
         if (tryRouteToOverlay(path, router)) return;
+        if (tryRouteToOtherWorkspace(path)) return;
         router.navigate(path);
       },
       replace: (path: string) => {
         if (tryRouteToOverlay(path, router)) return;
+        if (tryRouteToOtherWorkspace(path)) return;
         router.navigate(path, { replace: true });
       },
       back: () => router.navigate(-1),
       pathname: location.pathname,
       searchParams: new URLSearchParams(location.search),
       openInNewTab: (path: string, title?: string) => {
-        const icon = resolveRouteIcon(path);
+        const slug = extractWorkspaceSlug(path);
         const store = useTabStore.getState();
-        const newTabId = store.openTab(path, title ?? path, icon);
-        store.setActiveTab(newTabId);
+        if (slug && slug !== store.activeWorkspaceSlug) {
+          store.switchWorkspace(slug, path);
+          return;
+        }
+        const icon = resolveRouteIcon(path);
+        const tabId = store.openTab(path, title ?? path, icon);
+        if (tabId) store.setActiveTab(tabId);
       },
       getShareableUrl: (path: string) => `${APP_URL}${path}`,
     }),

apps/desktop/src/renderer/src/routes.tsx

@@ -6,7 +6,6 @@ import {
   useMatches,
 } from "react-router-dom";
 import type { RouteObject } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
 import { IssueDetailPage } from "./pages/issue-detail-page";
 import { ProjectDetailPage } from "./pages/project-detail-page";
 import { AutopilotDetailPage } from "./pages/autopilot-detail-page";
@@ -20,12 +19,9 @@ import { DaemonRuntimeCard } from "./components/daemon-runtime-card";
 import { AgentsPage } from "@multica/views/agents";
 import { InboxPage } from "@multica/views/inbox";
 import { SettingsPage } from "@multica/views/settings";
-import { paths } from "@multica/core/paths";
-import { workspaceListOptions } from "@multica/core/workspace/queries";
 import { Server } from "lucide-react";
 import { DaemonSettingsTab } from "./components/daemon-settings-tab";
 import { WorkspaceRouteLayout } from "./components/workspace-route-layout";
-import { useWindowOverlayStore } from "./stores/window-overlay-store";
 
 /**
  * Sets document.title from the deepest matched route's handle.title.
@@ -57,73 +53,28 @@ function PageShell() {
   );
 }
 
-/**
- * Root index route: resolves the URL-less `/` path to a concrete destination.
- *
- * Runs both on first login (App.tsx seeded the cache) and on app reopen
- * (AuthInitializer seeded the cache). Reading from React Query avoids
- * duplicate fetches across tabs — each tab's memory router hits this
- * component independently but the query is deduped.
- *
- * Sends users with workspaces to the first workspace's issues page.
- * Users with zero workspaces get the window-level new-workspace overlay —
- * desktop treats pre-workspace flows as application state, not tab routes,
- * so there's no URL to navigate to.
- */
-function IndexRedirect() {
-  const { data: wsList, isFetched } = useQuery(workspaceListOptions());
-
-  // Bidirectional overlay lifecycle: open the new-workspace overlay when
-  // the user has zero workspaces AND no other overlay is already showing,
-  // and close it when the list becomes non-empty (e.g. a realtime workspace
-  // event arrived while the overlay was open on a different code path).
-  // Only touches the new-workspace type — an active invite overlay is the
-  // user's in-flight task and must not be interrupted.
-  useEffect(() => {
-    if (!isFetched) return;
-    const { overlay, open, close } = useWindowOverlayStore.getState();
-    const isEmpty = !wsList || wsList.length === 0;
-    if (isEmpty) {
-      if (!overlay) open({ type: "new-workspace" });
-    } else if (overlay?.type === "new-workspace") {
-      close();
-    }
-  }, [isFetched, wsList]);
-
-  // Wait for the query to settle so we don't flash the empty-state overlay
-  // on the initial render before the seeded/fetched data arrives.
-  if (!isFetched) return null;
-
-  const firstWorkspace = wsList?.[0];
-  if (firstWorkspace) {
-    return <Navigate to={paths.workspace(firstWorkspace.slug).issues()} replace />;
-  }
-
-  // Zero workspaces — overlay is opened via the effect above. Tab stays on
-  // `/`; the overlay covers the window. When the user creates a workspace,
-  // onSuccess navigates to the new workspace path, closing the overlay.
-  return null;
-}
-
 /**
  * Route definitions shared by all tabs.
  *
- * Only workspace-scoped ("session") routes live here. Pre-workspace
- * transitions (create workspace, accept invite) are NOT routes on desktop —
- * they render as a window-level overlay via WindowOverlay, dispatched by
- * the navigation adapter's transition-path interception. See
- * `platform/navigation.tsx` and `stores/window-overlay-store.ts`.
+ * Every tab path is workspace-scoped: `/{slug}/{route}/...`. Pre-workspace
+ * flows (create workspace, accept invite) are NOT routes — they render as a
+ * window-level overlay via `WindowOverlay`, dispatched by the navigation
+ * adapter's transition-path interception. The `activeWorkspaceSlug` in the
+ * tab store decides which workspace's tabs are visible in the TabBar;
+ * workspace-less state (zero-workspace user) shows the overlay instead.
+ *
+ * The root index route stays as a harmless safety net. With per-workspace
+ * tabs, nothing should construct a tab at `/` — but if one ever slips
+ * through (malformed persisted state that dodges the migration, direct
+ * router.navigate from unforeseen code), the index falls back to null
+ * rather than 404; App.tsx's bootstrap repoints activeWorkspaceSlug on the
+ * next render pass.
  */
 export const appRoutes: RouteObject[] = [
   {
     element: <PageShell />,
     children: [
-      // Top-level index: no slug yet. `IndexRedirect` reads the workspace
-      // list from React Query cache (seeded by AuthInitializer on reopen
-      // or App.tsx on deep-link login) and bounces to the first
-      // workspace's issues page — or opens the new-workspace overlay if
-      // the user has none.
-      { index: true, element: <IndexRedirect /> },
+      { index: true, element: null },
       {
         path: ":workspaceSlug",
         element: <WorkspaceRouteLayout />,

apps/desktop/src/renderer/src/stores/tab-store.test.ts

@@ -1,24 +1,40 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi, beforeEach } from "vitest";
 
 // createTabRouter transitively pulls in route modules that expect a browser
-// router context. For pure-function tests we stub it out.
+// router context. For pure store tests we stub it to a minimal disposable.
+const createTabRouterMock = vi.hoisted(() =>
+  vi.fn(() => ({
+    dispose: vi.fn(),
+    state: { location: { pathname: "/" } },
+    navigate: vi.fn(),
+    subscribe: vi.fn(() => () => {}),
+  })),
+);
 vi.mock("../routes", () => ({
-  createTabRouter: vi.fn(() => ({ dispose: vi.fn() })),
+  createTabRouter: createTabRouterMock,
 }));
 
-import { sanitizeTabPath } from "./tab-store";
+import {
+  sanitizeTabPath,
+  migrateV1ToV2,
+  useTabStore,
+} from "./tab-store";
+
+beforeEach(() => {
+  createTabRouterMock.mockClear();
+  useTabStore.getState().reset();
+});
 
 describe("sanitizeTabPath", () => {
-  it("passes through root sentinel", () => {
-    expect(sanitizeTabPath("/")).toBe("/");
+  it("rejects the root sentinel — tabs must be workspace-scoped", () => {
+    expect(sanitizeTabPath("/")).toBeNull();
+    expect(sanitizeTabPath("")).toBeNull();
   });
 
-  it("rejects transition paths — these are overlay state, not tabs", () => {
-    // Silently rewritten (no warn) since they're legitimate inputs that
-    // the navigation adapter has already redirected to the overlay.
+  it("silently rejects transition paths (no warn — navigation adapter intercepts them)", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-    expect(sanitizeTabPath("/workspaces/new")).toBe("/");
-    expect(sanitizeTabPath("/invite/abc")).toBe("/");
+    expect(sanitizeTabPath("/workspaces/new")).toBeNull();
+    expect(sanitizeTabPath("/invite/abc")).toBeNull();
     expect(warn).not.toHaveBeenCalled();
     warn.mockRestore();
   });
@@ -29,20 +45,180 @@ describe("sanitizeTabPath", () => {
   });
 
   it("rejects paths whose first segment is a reserved slug (missing workspace prefix)", () => {
-    // A stray "/issues" (pre-refactor leftover, missing workspace prefix)
-    // would be interpreted as workspaceSlug="issues" → NoAccessPage.
     const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
-    expect(sanitizeTabPath("/issues")).toBe("/");
-    expect(sanitizeTabPath("/issues/abc-123")).toBe("/");
-    expect(sanitizeTabPath("/settings")).toBe("/");
+    expect(sanitizeTabPath("/issues")).toBeNull();
+    expect(sanitizeTabPath("/settings")).toBeNull();
     expect(warn).toHaveBeenCalled();
     warn.mockRestore();
   });
 
   it("passes through user slugs that happen to look path-like but aren't reserved", () => {
-    // A workspace owner could legitimately pick "acme-issues" or
-    // "project-x" as their slug — sanitize must not touch these.
     expect(sanitizeTabPath("/acme-issues/issues")).toBe("/acme-issues/issues");
     expect(sanitizeTabPath("/project-x/inbox")).toBe("/project-x/inbox");
   });
 });
+
+describe("migrateV1ToV2", () => {
+  it("groups v1 flat tabs by workspace slug", () => {
+    const v1 = {
+      tabs: [
+        { id: "t1", path: "/acme/issues", title: "Issues", icon: "ListTodo" },
+        { id: "t2", path: "/acme/projects", title: "Projects", icon: "FolderKanban" },
+        { id: "t3", path: "/butter/issues", title: "Issues", icon: "ListTodo" },
+      ],
+      activeTabId: "t2",
+    };
+    const v2 = migrateV1ToV2(v1);
+    expect(Object.keys(v2.byWorkspace).sort()).toEqual(["acme", "butter"]);
+    expect(v2.byWorkspace.acme.tabs).toHaveLength(2);
+    expect(v2.byWorkspace.butter.tabs).toHaveLength(1);
+    expect(v2.byWorkspace.acme.activeTabId).toBe("t2");
+    expect(v2.byWorkspace.butter.activeTabId).toBe("t3"); // first tab in group
+    expect(v2.activeWorkspaceSlug).toBe("acme"); // contained v1.activeTabId
+  });
+
+  it("drops tabs at root / transition / reserved-slug paths", () => {
+    const v1 = {
+      tabs: [
+        { id: "t1", path: "/", title: "Issues", icon: "ListTodo" },
+        { id: "t2", path: "/workspaces/new", title: "New", icon: "Plus" },
+        { id: "t3", path: "/invite/abc", title: "Invite", icon: "Mail" },
+        { id: "t4", path: "/acme/issues", title: "Issues", icon: "ListTodo" },
+      ],
+      activeTabId: "t1",
+    };
+    const v2 = migrateV1ToV2(v1);
+    expect(Object.keys(v2.byWorkspace)).toEqual(["acme"]);
+    expect(v2.byWorkspace.acme.tabs).toHaveLength(1);
+    // v1.activeTabId was dropped; active falls back to first group's first tab.
+    expect(v2.activeWorkspaceSlug).toBe("acme");
+    expect(v2.byWorkspace.acme.activeTabId).toBe("t4");
+  });
+
+  it("handles empty v1 state gracefully", () => {
+    const v2 = migrateV1ToV2({ tabs: [], activeTabId: "" });
+    expect(v2.byWorkspace).toEqual({});
+    expect(v2.activeWorkspaceSlug).toBeNull();
+  });
+
+  it("handles v1 with no tabs field (corrupted state)", () => {
+    const v2 = migrateV1ToV2({});
+    expect(v2.byWorkspace).toEqual({});
+    expect(v2.activeWorkspaceSlug).toBeNull();
+  });
+});
+
+describe("useTabStore actions", () => {
+  it("switchWorkspace creates a new group with a default tab on first entry", () => {
+    useTabStore.getState().switchWorkspace("acme");
+    const s = useTabStore.getState();
+    expect(s.activeWorkspaceSlug).toBe("acme");
+    expect(s.byWorkspace.acme.tabs).toHaveLength(1);
+    expect(s.byWorkspace.acme.tabs[0].path).toBe("/acme/issues");
+  });
+
+  it("switchWorkspace without openPath restores the group's last active tab", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.addTab("/acme/projects", "Projects", "FolderKanban");
+    const acmeProjectsId = useTabStore.getState().byWorkspace.acme.tabs[1].id;
+    store.setActiveTab(acmeProjectsId);
+
+    // Enter a different workspace then come back
+    store.switchWorkspace("butter");
+    expect(useTabStore.getState().activeWorkspaceSlug).toBe("butter");
+
+    store.switchWorkspace("acme");
+    const s = useTabStore.getState();
+    expect(s.activeWorkspaceSlug).toBe("acme");
+    expect(s.byWorkspace.acme.activeTabId).toBe(acmeProjectsId);
+  });
+
+  it("switchWorkspace with openPath dedupes into an existing tab with same path", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme"); // creates default /acme/issues
+    store.addTab("/acme/projects", "Projects", "FolderKanban");
+
+    store.switchWorkspace("acme", "/acme/issues");
+    const s = useTabStore.getState();
+    expect(s.byWorkspace.acme.tabs).toHaveLength(2); // no duplicate created
+    const activeTab = s.byWorkspace.acme.tabs.find(
+      (t) => t.id === s.byWorkspace.acme.activeTabId,
+    );
+    expect(activeTab?.path).toBe("/acme/issues");
+  });
+
+  it("switchWorkspace with openPath not matching any tab adds a new tab", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.switchWorkspace("acme", "/acme/issues/bug-42");
+    const s = useTabStore.getState();
+    expect(s.byWorkspace.acme.tabs).toHaveLength(2);
+    const activeTab = s.byWorkspace.acme.tabs.find(
+      (t) => t.id === s.byWorkspace.acme.activeTabId,
+    );
+    expect(activeTab?.path).toBe("/acme/issues/bug-42");
+  });
+
+  it("openTab dedupes by path within the active workspace", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    const id1 = store.openTab("/acme/projects", "Projects", "FolderKanban");
+    const id2 = store.openTab("/acme/projects", "Projects", "FolderKanban");
+    expect(id1).toBe(id2);
+    expect(useTabStore.getState().byWorkspace.acme.tabs).toHaveLength(2); // default + projects
+  });
+
+  it("closeTab on the last tab in a workspace reseeds the default tab", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    const onlyTabId = useTabStore.getState().byWorkspace.acme.tabs[0].id;
+    store.closeTab(onlyTabId);
+    const s = useTabStore.getState();
+    expect(s.byWorkspace.acme.tabs).toHaveLength(1);
+    expect(s.byWorkspace.acme.tabs[0].path).toBe("/acme/issues");
+    expect(s.byWorkspace.acme.tabs[0].id).not.toBe(onlyTabId); // fresh tab
+  });
+
+  it("validateWorkspaceSlugs drops groups for slugs not in the valid set and repoints active", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.switchWorkspace("butter");
+    store.switchWorkspace("acme");
+    expect(useTabStore.getState().activeWorkspaceSlug).toBe("acme");
+
+    // Admin removed the user from acme
+    store.validateWorkspaceSlugs(new Set(["butter"]));
+    const s = useTabStore.getState();
+    expect(Object.keys(s.byWorkspace)).toEqual(["butter"]);
+    expect(s.activeWorkspaceSlug).toBe("butter");
+  });
+
+  it("validateWorkspaceSlugs sets activeWorkspaceSlug to null when all groups are dropped", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.validateWorkspaceSlugs(new Set());
+    const s = useTabStore.getState();
+    expect(s.byWorkspace).toEqual({});
+    expect(s.activeWorkspaceSlug).toBeNull();
+  });
+
+  it("reset wipes the whole store", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.switchWorkspace("butter");
+    store.reset();
+    const s = useTabStore.getState();
+    expect(s.activeWorkspaceSlug).toBeNull();
+    expect(s.byWorkspace).toEqual({});
+  });
+
+  it("setActiveTab across workspaces also flips the active workspace", () => {
+    const store = useTabStore.getState();
+    store.switchWorkspace("acme");
+    store.switchWorkspace("butter");
+    const acmeTabId = useTabStore.getState().byWorkspace.acme.tabs[0].id;
+    store.setActiveTab(acmeTabId);
+    expect(useTabStore.getState().activeWorkspaceSlug).toBe("acme");
+  });
+});

apps/desktop/src/renderer/src/stores/tab-store.ts

@@ -13,6 +13,7 @@ import { createTabRouter } from "../routes";
 
 export interface Tab {
   id: string;
+  /** Every tab path is workspace-scoped: `/{workspaceSlug}/{route}/...`. */
   path: string;
   title: string;
   icon: string;
@@ -21,38 +22,75 @@ export interface Tab {
   historyLength: number;
 }
 
-interface TabStore {
+export interface WorkspaceTabGroup {
   tabs: Tab[];
+  /** Must be a valid tab.id in `tabs`; the empty-tabs state is transient only. */
   activeTabId: string;
+}
 
-  /** Open a background tab. Deduplicates by path. Returns the tab id. */
+interface TabStore {
+  /**
+   * The workspace currently visible in the TabBar / TabContent. Null in three
+   * cases:
+   *   - Fresh install, before any workspace exists or is selected.
+   *   - Logged-out state (reset() wipes it).
+   *   - Every workspace the user had access to got deleted / revoked.
+   * When null, TabContent renders nothing and the WindowOverlay takes over.
+   */
+  activeWorkspaceSlug: string | null;
+
+  /**
+   * Tab groups keyed by workspace slug. Each slug maps to an independent
+   * (tabs, activeTabId) pair; switching workspaces swaps the visible set
+   * without affecting any other group. Cross-workspace tab leakage — the
+   * bug that drove this refactor — is impossible by construction because
+   * there is no global tab array anymore.
+   */
+  byWorkspace: Record<string, WorkspaceTabGroup>;
+
+  /**
+   * Switch to a workspace.
+   *   - If the group doesn't exist yet, create it with a single default tab.
+   *   - If `openPath` is given, find a tab with that exact path and activate
+   *     it; otherwise add a new tab and activate it.
+   *   - If `openPath` is omitted, restore the group's last active tab
+   *     (VSCode / Slack behavior — workspaces resume where you left off).
+   */
+  switchWorkspace: (slug: string, openPath?: string) => void;
+  /** Open-or-activate (dedupes by path) a tab in the active workspace. */
   openTab: (path: string, title: string, icon: string) => string;
-  /** Always create a new tab (no dedup). Returns the tab id. */
+  /** Always creates a new tab (no dedupe) in the active workspace. */
   addTab: (path: string, title: string, icon: string) => string;
-  /** Close a tab. Disposes router. */
+  /**
+   * Close a tab. Finds it across all workspaces (callers like the X button
+   * only know the tab id, not the owning workspace). If this is the last
+   * tab in its workspace, reseed a default tab so the invariant
+   * "every live workspace has at least one tab" holds.
+   */
   closeTab: (tabId: string) => void;
-  /** Switch to a tab by id. */
+  /**
+   * Activate a tab. Finds it across all workspaces. Sets both the owning
+   * workspace as active and that group's activeTabId; needed for any code
+   * path that "jumps" to a tab belonging to a non-active workspace.
+   */
   setActiveTab: (tabId: string) => void;
-  /** Update a tab's metadata (path, title, icon — partial). */
+  /** Patch metadata of a tab (router-sync, title-sync). Finds across groups. */
   updateTab: (tabId: string, patch: Partial<Pick<Tab, "path" | "title" | "icon">>) => void;
-  /** Update a tab's history tracking. */
+  /** Patch history tracking of a tab. Finds across groups. */
   updateTabHistory: (tabId: string, historyIndex: number, historyLength: number) => void;
-  /** Reorder tabs by moving one from fromIndex to toIndex. Preserves router/history. */
+  /** Reorder within the active workspace's group only. */
   moveTab: (fromIndex: number, toIndex: number) => void;
   /**
-   * Reset any tab whose first path segment references a workspace slug the
-   * current user doesn't have access to. Called after login + workspace list
-   * is populated (and on every subsequent list change, e.g. realtime
-   * workspace:deleted). Stale tabs get reset to `/` so IndexRedirect picks
-   * a valid workspace (or opens the new-workspace overlay if the user now
-   * has none).
+   * After the workspace list arrives/changes (login, realtime delete), drop
+   * any tab group whose slug is no longer in `validSlugs`, and repoint
+   * `activeWorkspaceSlug` if it pointed at one of the dropped groups.
    */
   validateWorkspaceSlugs: (validSlugs: Set<string>) => void;
   /**
-   * Wipe all in-memory tabs and reseed with a single default tab at `/`.
-   * Called on logout so the next user doesn't inherit the previous user's
-   * tab layout — Zustand persist only writes to localStorage; clearing
-   * localStorage alone leaves the live store untouched until app restart.
+   * Wipe everything. Called from logout so the next user doesn't inherit
+   * the prior user's tabs. Zustand persist only writes to localStorage;
+   * clearing the storage key alone would leave this live store intact
+   * until app restart.
    */
   reset: () => void;
 }
@@ -76,9 +114,9 @@ const ROUTE_ICONS: Record<string, string> = {
 /**
  * Resolve a route icon from a pathname.
  *
- * Tab paths are always workspace-scoped on desktop: `/{slug}/{route}/...`,
- * so the route segment lives at index 1. Pre-workspace flows (create,
- * invite) are rendered by the window overlay, never as tabs.
+ * Tab paths are always workspace-scoped: `/{slug}/{route}/...`, so the route
+ * segment lives at index 1. Pre-workspace flows (create, invite) are rendered
+ * by the window overlay, never as tabs.
  *
  * Title is NOT determined here — it comes from document.title.
  */
@@ -87,229 +125,581 @@ export function resolveRouteIcon(pathname: string): string {
   return ROUTE_ICONS[segments[1] ?? ""] ?? "ListTodo";
 }
 
-// ---------------------------------------------------------------------------
-// Store
-// ---------------------------------------------------------------------------
-
-/**
- * Sentinel path for new tabs with no explicit destination. The tab store is
- * workspace-implicit — it doesn't know which workspace is active, so it can't
- * build a `/:slug/issues` path itself. Instead we hand off to the router: `/`
- * matches the top-level index route, which redirects to the workspace default
- * (slug-aware redirect lives in routes.tsx / App.tsx).
- *
- * `title` and `icon` on the placeholder tab get overwritten by
- * useTabRouterSync + useActiveTitleSync once the redirect resolves.
- */
-const DEFAULT_PATH = "/";
-
-function createId(): string {
-  return createSafeId();
+/** Extract the leading workspace slug from a path, or null if the path
+ *  isn't workspace-scoped (global path, root, or empty). */
+function extractWorkspaceSlug(path: string): string | null {
+  const first = path.split("/").filter(Boolean)[0] ?? "";
+  if (!first) return null;
+  if (isReservedSlug(first)) return null;
+  return first;
 }
 
+// ---------------------------------------------------------------------------
+// Path sanitization (defensive)
+// ---------------------------------------------------------------------------
+
 /**
  * Defensive: catch paths that don't belong in the tab store.
  *
  * Two kinds of rejects:
  *  1. **Transition paths** (`/workspaces/new`, `/invite/...`). These are
  *     pre-workspace flows rendered by the window overlay on desktop, not
- *     tab routes. They must never persist as tab state — otherwise the user
- *     reopens the app into a stale form/invite. Navigation to these paths
- *     is intercepted by the navigation adapter, so they shouldn't reach
- *     tab-store in normal flow; this guard catches older persisted state.
+ *     tab routes. The navigation adapter normally intercepts these before
+ *     they reach the store; this guard catches older persisted state.
  *  2. **Malformed workspace-scoped paths** like a stray `/issues/abc` that
- *     was constructed without the workspace prefix. Router would interpret
- *     `issues` as a workspace slug → NoAccessPage.
+ *     was constructed without the workspace prefix. The router would
+ *     interpret `issues` as a workspace slug → NoAccessPage.
  *
- * Both rewrite to `/` so `IndexRedirect` picks a valid destination (or
- * opens the new-workspace overlay if the user has none).
+ * Returns null for rejects (caller decides how to recover — usually by
+ * dropping the tab or substituting a default). Unlike the prior design,
+ * there is no root "/" sentinel — tabs are always scoped.
  */
-export function sanitizeTabPath(path: string): string {
-  if (path === DEFAULT_PATH) return path;
+export function sanitizeTabPath(path: string): string | null {
   const firstSegment = path.split("/").filter(Boolean)[0] ?? "";
+  if (!firstSegment) return null;
   if (isReservedSlug(firstSegment)) {
     // Don't log for known transition paths — these are legitimate inputs
     // at the interception boundary (older persisted state or stale callers).
-    // Log only for truly buggy cases where a view forgot the workspace prefix.
     const isTransition = path === "/workspaces/new" || path.startsWith("/invite/");
     if (!isTransition) {
       // eslint-disable-next-line no-console
       console.warn(
         `[tab-store] tab path "${path}" starts with reserved slug "${firstSegment}" — ` +
-          `caller likely forgot the workspace prefix. Falling back to "/".`,
+          `caller likely forgot the workspace prefix. Dropping.`,
       );
     }
-    return DEFAULT_PATH;
+    return null;
   }
   return path;
 }
 
+// ---------------------------------------------------------------------------
+// Tab factory
+// ---------------------------------------------------------------------------
+
+function createId(): string {
+  return createSafeId();
+}
+
 function makeTab(path: string, title: string, icon: string): Tab {
-  const safePath = sanitizeTabPath(path);
   return {
     id: createId(),
-    path: safePath,
+    path,
     title,
     icon,
-    router: createTabRouter(safePath),
+    router: createTabRouter(path),
     historyIndex: 0,
     historyLength: 1,
   };
 }
 
-const initialTab = makeTab(DEFAULT_PATH, "Issues", resolveRouteIcon(DEFAULT_PATH));
+/** Default entry point for a workspace — its issues list. */
+function defaultPathFor(slug: string): string {
+  return `/${slug}/issues`;
+}
+
+function defaultTabFor(slug: string): Tab {
+  const path = defaultPathFor(slug);
+  return makeTab(path, "Issues", resolveRouteIcon(path));
+}
+
+// ---------------------------------------------------------------------------
+// Group helpers
+// ---------------------------------------------------------------------------
+
+function findTabLocation(
+  byWorkspace: Record<string, WorkspaceTabGroup>,
+  tabId: string,
+): { slug: string; group: WorkspaceTabGroup; index: number } | null {
+  for (const slug of Object.keys(byWorkspace)) {
+    const group = byWorkspace[slug];
+    const index = group.tabs.findIndex((t) => t.id === tabId);
+    if (index >= 0) return { slug, group, index };
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
 
 export const useTabStore = create<TabStore>()(
   persist(
     (set, get) => ({
-  tabs: [initialTab],
-  activeTabId: initialTab.id,
+      activeWorkspaceSlug: null,
+      byWorkspace: {},
 
-  openTab(path, title, icon) {
-    const { tabs } = get();
-    const existing = tabs.find((t) => t.path === path);
-    if (existing) return existing.id;
+      switchWorkspace(slug, openPath) {
+        // Defensive no-op if slug is empty/invalid — callers like the
+        // NavigationAdapter's path-parser should already have filtered
+        // these, but belt-and-braces keeps garbage out of the store.
+        if (!slug) return;
+        const { byWorkspace } = get();
+        const existing = byWorkspace[slug];
 
-    const tab = makeTab(path, title, icon);
-    set({ tabs: [...tabs, tab] });
-    return tab.id;
-  },
+        // Decide the desired active path for this workspace.
+        const desiredPath = openPath ?? (existing ? null : defaultPathFor(slug));
 
-  addTab(path, title, icon) {
-    const tab = makeTab(path, title, icon);
-    set((s) => ({ tabs: [...s.tabs, tab] }));
-    return tab.id;
-  },
+        if (!existing) {
+          // First time entering this workspace — create the group.
+          const seedPath =
+            desiredPath && sanitizeTabPath(desiredPath) === desiredPath
+              ? desiredPath
+              : defaultPathFor(slug);
+          const tab = makeTab(seedPath, "Issues", resolveRouteIcon(seedPath));
+          set({
+            activeWorkspaceSlug: slug,
+            byWorkspace: {
+              ...byWorkspace,
+              [slug]: { tabs: [tab], activeTabId: tab.id },
+            },
+          });
+          return;
+        }
 
-  closeTab(tabId) {
-    const { tabs, activeTabId } = get();
+        // Workspace already has tabs. Either dedupe into an existing tab or
+        // add a new one (when openPath was supplied and no tab matches it).
+        if (desiredPath) {
+          const clean = sanitizeTabPath(desiredPath);
+          if (clean) {
+            const match = existing.tabs.find((t) => t.path === clean);
+            if (match) {
+              set({
+                activeWorkspaceSlug: slug,
+                byWorkspace: {
+                  ...byWorkspace,
+                  [slug]: { ...existing, activeTabId: match.id },
+                },
+              });
+              return;
+            }
+            const tab = makeTab(clean, "Issues", resolveRouteIcon(clean));
+            set({
+              activeWorkspaceSlug: slug,
+              byWorkspace: {
+                ...byWorkspace,
+                [slug]: {
+                  tabs: [...existing.tabs, tab],
+                  activeTabId: tab.id,
+                },
+              },
+            });
+            return;
+          }
+        }
 
-    const closingTab = tabs.find((t) => t.id === tabId);
+        // No openPath (or openPath was rejected) — just restore the group.
+        set({ activeWorkspaceSlug: slug });
+      },
 
-    // Never close the last tab — replace with default
-    if (tabs.length === 1) {
-      closingTab?.router.dispose();
-      const fresh = makeTab(DEFAULT_PATH, "Issues", resolveRouteIcon(DEFAULT_PATH));
-      set({ tabs: [fresh], activeTabId: fresh.id });
-      return;
-    }
+      openTab(path, title, icon) {
+        const { activeWorkspaceSlug, byWorkspace } = get();
+        const clean = sanitizeTabPath(path);
+        if (!activeWorkspaceSlug || !clean) return "";
+        const group = byWorkspace[activeWorkspaceSlug];
+        if (!group) return "";
 
-    const idx = tabs.findIndex((t) => t.id === tabId);
-    if (idx === -1) return;
+        const existing = group.tabs.find((t) => t.path === clean);
+        if (existing) {
+          set({
+            byWorkspace: {
+              ...byWorkspace,
+              [activeWorkspaceSlug]: { ...group, activeTabId: existing.id },
+            },
+          });
+          return existing.id;
+        }
 
-    closingTab?.router.dispose();
-    const next = tabs.filter((t) => t.id !== tabId);
+        const tab = makeTab(clean, title, icon);
+        set({
+          byWorkspace: {
+            ...byWorkspace,
+            [activeWorkspaceSlug]: {
+              tabs: [...group.tabs, tab],
+              activeTabId: group.activeTabId,
+            },
+          },
+        });
+        return tab.id;
+      },
 
-    if (tabId === activeTabId) {
-      const newActive = next[Math.min(idx, next.length - 1)];
-      set({ tabs: next, activeTabId: newActive.id });
-    } else {
-      set({ tabs: next });
-    }
-  },
+      addTab(path, title, icon) {
+        const { activeWorkspaceSlug, byWorkspace } = get();
+        const clean = sanitizeTabPath(path);
+        if (!activeWorkspaceSlug || !clean) return "";
+        const group = byWorkspace[activeWorkspaceSlug];
+        if (!group) return "";
 
-  setActiveTab(tabId) {
-    set({ activeTabId: tabId });
-  },
+        const tab = makeTab(clean, title, icon);
+        set({
+          byWorkspace: {
+            ...byWorkspace,
+            [activeWorkspaceSlug]: {
+              tabs: [...group.tabs, tab],
+              activeTabId: group.activeTabId,
+            },
+          },
+        });
+        return tab.id;
+      },
 
-  updateTab(tabId, patch) {
-    set((s) => ({
-      tabs: s.tabs.map((t) =>
-        t.id === tabId ? { ...t, ...patch } : t,
-      ),
-    }));
-  },
+      closeTab(tabId) {
+        const { byWorkspace } = get();
+        const hit = findTabLocation(byWorkspace, tabId);
+        if (!hit) return;
+        const { slug, group, index } = hit;
 
-  updateTabHistory(tabId, historyIndex, historyLength) {
-    set((s) => ({
-      tabs: s.tabs.map((t) =>
-        t.id === tabId ? { ...t, historyIndex, historyLength } : t,
-      ),
-    }));
-  },
+        const closing = group.tabs[index];
+        closing.router.dispose();
 
-  moveTab(fromIndex, toIndex) {
-    if (fromIndex === toIndex) return;
-    set((s) => ({ tabs: arrayMove(s.tabs, fromIndex, toIndex) }));
-  },
+        if (group.tabs.length === 1) {
+          // Last tab in this workspace — reseed a default so the workspace
+          // always has at least one tab. Closing a workspace as an explicit
+          // action is a separate concern (Leave/Delete in Settings).
+          const fresh = defaultTabFor(slug);
+          set({
+            byWorkspace: {
+              ...byWorkspace,
+              [slug]: { tabs: [fresh], activeTabId: fresh.id },
+            },
+          });
+          return;
+        }
 
-  validateWorkspaceSlugs(validSlugs) {
-    const { tabs } = get();
-    let changed = false;
-    const nextTabs = tabs.map((t) => {
-      // Root sentinel doesn't carry a slug — nothing to validate.
-      if (t.path === "/") return t;
+        const nextTabs = group.tabs.filter((t) => t.id !== tabId);
+        const nextActiveTabId =
+          group.activeTabId === tabId
+            ? nextTabs[Math.min(index, nextTabs.length - 1)].id
+            : group.activeTabId;
 
-      const firstSegment = t.path.split("/").filter(Boolean)[0] ?? "";
-      if (validSlugs.has(firstSegment)) return t;
+        set({
+          byWorkspace: {
+            ...byWorkspace,
+            [slug]: { tabs: nextTabs, activeTabId: nextActiveTabId },
+          },
+        });
+      },
 
-      // Stale slug: dispose the old router and replace with a fresh one
-      // pointing at `/`. IndexRedirect will send the tab to a valid
-      // workspace, or open the new-workspace overlay if none remain.
-      changed = true;
-      t.router.dispose();
-      return {
-        ...t,
-        path: DEFAULT_PATH,
-        title: "Issues",
-        icon: resolveRouteIcon(DEFAULT_PATH),
-        router: createTabRouter(DEFAULT_PATH),
-        historyIndex: 0,
-        historyLength: 1,
-      };
-    });
+      setActiveTab(tabId) {
+        const { byWorkspace, activeWorkspaceSlug } = get();
+        const hit = findTabLocation(byWorkspace, tabId);
+        if (!hit) return;
+        const { slug, group } = hit;
+        if (slug === activeWorkspaceSlug && group.activeTabId === tabId) return;
+        set({
+          activeWorkspaceSlug: slug,
+          byWorkspace: {
+            ...byWorkspace,
+            [slug]: { ...group, activeTabId: tabId },
+          },
+        });
+      },
 
-    if (!changed) return;
-    set({ tabs: nextTabs });
-  },
+      updateTab(tabId, patch) {
+        const { byWorkspace } = get();
+        const hit = findTabLocation(byWorkspace, tabId);
+        if (!hit) return;
+        const { slug, group, index } = hit;
+        const current = group.tabs[index];
+        const next: Tab = { ...current, ...patch };
+        const nextTabs = [...group.tabs];
+        nextTabs[index] = next;
+        set({
+          byWorkspace: {
+            ...byWorkspace,
+            [slug]: { ...group, tabs: nextTabs },
+          },
+        });
+      },
 
-  reset() {
-    const { tabs } = get();
-    for (const t of tabs) t.router.dispose();
-    const fresh = makeTab(DEFAULT_PATH, "Issues", resolveRouteIcon(DEFAULT_PATH));
-    set({ tabs: [fresh], activeTabId: fresh.id });
-  },
+      updateTabHistory(tabId, historyIndex, historyLength) {
+        const { byWorkspace } = get();
+        const hit = findTabLocation(byWorkspace, tabId);
+        if (!hit) return;
+        const { slug, group, index } = hit;
+        const current = group.tabs[index];
+        const next: Tab = { ...current, historyIndex, historyLength };
+        const nextTabs = [...group.tabs];
+        nextTabs[index] = next;
+        set({
+          byWorkspace: {
+            ...byWorkspace,
+            [slug]: { ...group, tabs: nextTabs },
+          },
+        });
+      },
+
+      moveTab(fromIndex, toIndex) {
+        if (fromIndex === toIndex) return;
+        const { activeWorkspaceSlug, byWorkspace } = get();
+        if (!activeWorkspaceSlug) return;
+        const group = byWorkspace[activeWorkspaceSlug];
+        if (!group) return;
+        set({
+          byWorkspace: {
+            ...byWorkspace,
+            [activeWorkspaceSlug]: {
+              ...group,
+              tabs: arrayMove(group.tabs, fromIndex, toIndex),
+            },
+          },
+        });
+      },
+
+      validateWorkspaceSlugs(validSlugs) {
+        const { activeWorkspaceSlug, byWorkspace } = get();
+        let changed = false;
+        const nextByWorkspace: Record<string, WorkspaceTabGroup> = {};
+        for (const slug of Object.keys(byWorkspace)) {
+          if (validSlugs.has(slug)) {
+            nextByWorkspace[slug] = byWorkspace[slug];
+          } else {
+            changed = true;
+            for (const t of byWorkspace[slug].tabs) t.router.dispose();
+          }
+        }
+
+        let nextActive = activeWorkspaceSlug;
+        if (nextActive && !validSlugs.has(nextActive)) {
+          nextActive = Object.keys(nextByWorkspace)[0] ?? null;
+          changed = true;
+        }
+
+        if (!changed) return;
+        set({ byWorkspace: nextByWorkspace, activeWorkspaceSlug: nextActive });
+      },
+
+      reset() {
+        const { byWorkspace } = get();
+        for (const slug of Object.keys(byWorkspace)) {
+          for (const t of byWorkspace[slug].tabs) t.router.dispose();
+        }
+        set({ activeWorkspaceSlug: null, byWorkspace: {} });
+      },
     }),
     {
       name: "multica_tabs",
-      version: 1,
+      version: 2,
       storage: createJSONStorage(() => createPersistStorage(defaultStorage)),
+      migrate: (persistedState, version) => {
+        // v1 → v2: flat `tabs` array → per-workspace grouping.
+        // Tabs whose path isn't workspace-scoped (root `/`, login, etc.)
+        // are dropped — they have no workspace to belong to, and the new
+        // model's invariant is "every tab lives in a workspace group".
+        if (version < 2 && persistedState && typeof persistedState === "object") {
+          return migrateV1ToV2(persistedState as Partial<V1Persisted>);
+        }
+        return persistedState as V2Persisted;
+      },
       partialize: (state) => ({
-        tabs: state.tabs.map(
-          ({ router, historyIndex, historyLength, ...rest }) => rest,
+        activeWorkspaceSlug: state.activeWorkspaceSlug,
+        byWorkspace: Object.fromEntries(
+          Object.entries(state.byWorkspace).map(([slug, group]) => [
+            slug,
+            {
+              activeTabId: group.activeTabId,
+              tabs: group.tabs.map(
+                ({ router: _router, historyIndex: _hi, historyLength: _hl, ...rest }) =>
+                  rest,
+              ),
+            },
+          ]),
         ),
-        activeTabId: state.activeTabId,
       }),
       merge: (persistedState, currentState) => {
-        const persisted = persistedState as
-          | Pick<TabStore, "tabs" | "activeTabId">
-          | undefined;
-        if (!persisted?.tabs?.length) return currentState;
+        const persisted = persistedState as Partial<V2Persisted> | undefined;
+        if (!persisted?.byWorkspace) return currentState;
 
-        const tabs: Tab[] = persisted.tabs.map((tab) => {
-          // Sanitize persisted paths against reserved-slug rules. Catches
-          // both pre-refactor paths like "/issues/abc" (missing workspace
-          // slug) and any other malformed paths that slipped past the
-          // write-time guard. The defense across makeTab + merge + runtime
-          // validate ensures stale or malformed paths never reach the
-          // router.
-          const path = sanitizeTabPath(tab.path);
-          return {
-            ...tab,
-            path,
-            router: createTabRouter(path),
-            historyIndex: 0,
-            historyLength: 1,
-          };
-        });
+        const byWorkspace: Record<string, WorkspaceTabGroup> = {};
+        for (const [slug, pGroup] of Object.entries(persisted.byWorkspace)) {
+          const tabs: Tab[] = [];
+          for (const pTab of pGroup.tabs) {
+            const clean = sanitizeTabPath(pTab.path);
+            // Persisted path may have come from a stale version or a
+            // manual edit. Drop rather than rewrite so we never silently
+            // put users on a path that doesn't match the group's slug.
+            if (!clean || extractWorkspaceSlug(clean) !== slug) {
+              // eslint-disable-next-line no-console
+              console.warn(
+                `[tab-store] dropping persisted tab "${pTab.path}" from ` +
+                  `group "${slug}" — path/slug mismatch`,
+              );
+              continue;
+            }
+            tabs.push({
+              id: pTab.id,
+              path: clean,
+              title: pTab.title,
+              icon: pTab.icon,
+              router: createTabRouter(clean),
+              historyIndex: 0,
+              historyLength: 1,
+            });
+          }
+          if (tabs.length === 0) continue;
+          const activeTabId = tabs.some((t) => t.id === pGroup.activeTabId)
+            ? pGroup.activeTabId
+            : tabs[0].id;
+          byWorkspace[slug] = { tabs, activeTabId };
+        }
 
-        // Validate activeTabId — fall back to first tab if stale
-        const activeTabId = tabs.some((t) => t.id === persisted.activeTabId)
-          ? persisted.activeTabId
-          : tabs[0].id;
+        const activeWorkspaceSlug =
+          persisted.activeWorkspaceSlug && byWorkspace[persisted.activeWorkspaceSlug]
+            ? persisted.activeWorkspaceSlug
+            : (Object.keys(byWorkspace)[0] ?? null);
 
-        return { ...currentState, tabs, activeTabId };
+        return { ...currentState, byWorkspace, activeWorkspaceSlug };
       },
     },
   ),
 );
+
+// ---------------------------------------------------------------------------
+// Persisted shapes (for migration)
+// ---------------------------------------------------------------------------
+
+interface V1Tab {
+  id: string;
+  path: string;
+  title: string;
+  icon: string;
+}
+
+interface V1Persisted {
+  tabs: V1Tab[];
+  activeTabId: string;
+}
+
+interface V2PersistedTab {
+  id: string;
+  path: string;
+  title: string;
+  icon: string;
+}
+
+interface V2PersistedGroup {
+  tabs: V2PersistedTab[];
+  activeTabId: string;
+}
+
+interface V2Persisted {
+  activeWorkspaceSlug: string | null;
+  byWorkspace: Record<string, V2PersistedGroup>;
+}
+
+export function migrateV1ToV2(v1: Partial<V1Persisted>): V2Persisted {
+  const byWorkspace: Record<string, V2PersistedGroup> = {};
+  const oldTabs = v1.tabs ?? [];
+  for (const tab of oldTabs) {
+    const slug = extractWorkspaceSlug(tab.path);
+    if (!slug) continue; // drop root / global-path tabs
+    if (!byWorkspace[slug]) byWorkspace[slug] = { tabs: [], activeTabId: "" };
+    byWorkspace[slug].tabs.push({
+      id: tab.id,
+      path: tab.path,
+      title: tab.title,
+      icon: tab.icon,
+    });
+  }
+
+  // Each group needs a valid activeTabId. Prefer the one from v1 if it
+  // landed in this group; otherwise fall back to the first tab.
+  for (const slug of Object.keys(byWorkspace)) {
+    const group = byWorkspace[slug];
+    const hasOldActive = group.tabs.some((t) => t.id === v1.activeTabId);
+    group.activeTabId = hasOldActive
+      ? (v1.activeTabId as string)
+      : group.tabs[0].id;
+  }
+
+  // Active workspace: whichever group inherited the v1 activeTab, falling
+  // back to the first group we created (arbitrary but deterministic given
+  // Object.keys iteration order on string keys).
+  let activeWorkspaceSlug: string | null = null;
+  for (const slug of Object.keys(byWorkspace)) {
+    if (byWorkspace[slug].activeTabId === v1.activeTabId) {
+      activeWorkspaceSlug = slug;
+      break;
+    }
+  }
+  if (!activeWorkspaceSlug) {
+    activeWorkspaceSlug = Object.keys(byWorkspace)[0] ?? null;
+  }
+
+  return { activeWorkspaceSlug, byWorkspace };
+}
+
+// ---------------------------------------------------------------------------
+// Selectors (convenience hooks)
+// ---------------------------------------------------------------------------
+
+/**
+ * Pure non-hook helper — useful from event handlers / effects that already
+ * need `.getState()`. For React subscriptions prefer the stable selectors
+ * below.
+ */
+export function getActiveTab(s: TabStore): Tab | null {
+  if (!s.activeWorkspaceSlug) return null;
+  const group = s.byWorkspace[s.activeWorkspaceSlug];
+  if (!group) return null;
+  return group.tabs.find((t) => t.id === group.activeTabId) ?? null;
+}
+
+/**
+ * The active workspace's tab group, or null when no workspace is active.
+ *
+ * Zustand compares selector returns with `Object.is`. Because `updateTab`
+ * /  `updateTabHistory` replace the group object on every router tick
+ * (immutable update), this selector returns a new reference on every
+ * router event — that's fine for TabBar which needs to observe tab-list
+ * changes, but don't use this selector from components that only care
+ * about one primitive (use `useActiveTabHistory` / `useActiveTabRouter`
+ * instead).
+ */
+export function useActiveGroup(): WorkspaceTabGroup | null {
+  return useTabStore((s) =>
+    s.activeWorkspaceSlug ? (s.byWorkspace[s.activeWorkspaceSlug] ?? null) : null,
+  );
+}
+
+/**
+ * Active tab id + active workspace slug as a compact pair. Both primitives
+ * are stable across unrelated store updates — e.g. an inactive tab's
+ * router tick doesn't churn these, so consumers don't re-render.
+ *
+ * Useful anywhere you'd previously have reached for `useActiveTab()` and
+ * only needed the identity (for memoization, effect deps, ipc).
+ */
+export function useActiveTabIdentity(): { slug: string | null; tabId: string | null } {
+  const slug = useTabStore((s) => s.activeWorkspaceSlug);
+  const tabId = useTabStore((s) =>
+    s.activeWorkspaceSlug
+      ? (s.byWorkspace[s.activeWorkspaceSlug]?.activeTabId ?? null)
+      : null,
+  );
+  return { slug, tabId };
+}
+
+/**
+ * Active tab's router — a stable reference across tab updates, because
+ * routers are created once per tab and never replaced by `updateTab`.
+ * Subscribers only re-render when the active tab *changes*, not on
+ * router events within the current tab.
+ */
+export function useActiveTabRouter(): DataRouter | null {
+  return useTabStore((s) => getActiveTab(s)?.router ?? null);
+}
+
+/**
+ * History tracking for the active tab as primitives. Subscribers re-render
+ * only when the numeric index / length change (i.e. on actual navigations),
+ * not on unrelated store updates.
+ */
+export function useActiveTabHistory(): {
+  historyIndex: number;
+  historyLength: number;
+} {
+  const historyIndex = useTabStore((s) => getActiveTab(s)?.historyIndex ?? 0);
+  const historyLength = useTabStore((s) => getActiveTab(s)?.historyLength ?? 1);
+  return { historyIndex, historyLength };
+}

packages/views/settings/components/workspace-tab.tsx

@@ -30,6 +30,7 @@ import {
 } from "@multica/core/workspace/queries";
 import { api } from "@multica/core/api";
 import { paths } from "@multica/core/paths";
+import { setCurrentWorkspace } from "@multica/core/platform";
 import type { Workspace } from "@multica/core/types";
 import { useNavigation } from "../../navigation";
 import { DeleteWorkspaceDialog } from "./delete-workspace-dialog";
@@ -45,19 +46,47 @@ export function WorkspaceTab() {
   const navigation = useNavigation();
 
   /**
-   * After leaving/deleting the current workspace, send the user to a safe URL:
-   * another workspace they still have access to, or /workspaces/new if none
-   * remain. The list is freshly fetched (staleTime: 0) because the cache still
-   * contains the just-removed workspace until the background invalidation
-   * resolves.
+   * Send the user to a safe URL BEFORE the leave/delete mutation fires.
+   * The destination is computed from the current cached workspace list,
+   * minus the workspace that's about to go away.
+   *
+   * Why navigate first, not after:
+   *   1. The backend broadcasts `workspace:deleted` / `member:removed` the
+   *      moment the mutation lands. If the user is still on the soon-to-
+   *      be-deleted workspace's URL when that event arrives, the realtime
+   *      handler in `use-realtime-sync.ts` also triggers a relocation —
+   *      and both code paths race with the mutation's own
+   *      `invalidateQueries` refetch. The loser's in-flight fetch gets
+   *      cancelled, surfacing as an unhandled `CancelledError`.
+   *   2. Navigating first means by the time the WS event fires, the
+   *      active workspace is already something else; the realtime
+   *      handler's "current === deleted" check fails and its relocate
+   *      branch no-ops.
+   *   3. UX: the destructive flow feels instant (dialog closes → new
+   *      workspace appears) even though the API hasn't responded yet.
    */
-  const navigateAwayFromCurrentWorkspace = async () => {
-    const wsList = await qc.fetchQuery({
-      ...workspaceListOptions(),
-      staleTime: 0,
-    });
-    const remaining = wsList.filter((w) => w.id !== workspace?.id);
+  const navigateAwayFromCurrentWorkspace = () => {
+    const cachedList =
+      qc.getQueryData<Workspace[]>(workspaceListOptions().queryKey) ?? [];
+    const remaining = cachedList.filter((w) => w.id !== workspace?.id);
     const next = remaining[0];
+    // Clear the workspace-context singleton BEFORE navigating and BEFORE
+    // the mutation fires. Three downstream consumers read it:
+    //  1. Realtime `workspace:deleted` handler's "current === deleted"
+    //     check — if the singleton still points at the deleting workspace
+    //     when the WS event arrives, it fires a parallel relocate that
+    //     races the mutation's invalidate and the settings page's own
+    //     navigate, surfacing a CancelledError and a full-page reload.
+    //  2. Chrome gating (`{slug && <AppSidebar />}` on desktop) — if the
+    //     singleton lingers, the sidebar stays mounted while the deleted
+    //     workspace is no longer in the list, and `useWorkspaceId` throws.
+    //  3. API client's `X-Workspace-Slug` header — stale header post-
+    //     delete is at best a 404, at worst leaks into the next query.
+    // WorkspaceRouteLayout re-sets the singleton when a new workspace's
+    // route mounts; clearing here is safe — either the next workspace
+    // takes over immediately, or the new-workspace overlay takes over
+    // (which has no workspace context, so null is correct).
+    setCurrentWorkspace(null, null);
     navigation.push(
       next ? paths.workspace(next.slug).issues() : paths.newWorkspace(),
     );
@@ -121,9 +150,11 @@ export function WorkspaceTab() {
       variant: "destructive",
       onConfirm: async () => {
         setActionId("leave");
+        // Navigate away FIRST so the realtime handler's
+        // "current-workspace-deleted" branch doesn't race the mutation.
+        navigateAwayFromCurrentWorkspace();
         try {
           await leaveWorkspace.mutateAsync(workspace.id);
-          await navigateAwayFromCurrentWorkspace();
         } catch (e) {
           toast.error(e instanceof Error ? e.message : "Failed to leave workspace");
         } finally {
@@ -136,10 +167,14 @@ export function WorkspaceTab() {
   const handleConfirmDelete = async () => {
     if (!workspace) return;
     setActionId("delete-workspace");
+    // Close the dialog and navigate away FIRST. See navigateAwayFromCurrentWorkspace
+    // comment for why: keeps the realtime `workspace:deleted` handler out
+    // of the race so we don't end up with concurrent refetches cancelling
+    // each other and surfacing CancelledError.
+    setDeleteDialogOpen(false);
+    navigateAwayFromCurrentWorkspace();
     try {
       await deleteWorkspace.mutateAsync(workspace.id);
-      setDeleteDialogOpen(false);
-      await navigateAwayFromCurrentWorkspace();
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Failed to delete workspace");
     } finally {