Merge sidebar workspaces across all connected hosts (#1538)

* Merge workspaces across all hosts in the sidebar Replace per-host sidebar sections with a single merged project list. Projects that exist on multiple hosts (matched by projectKey) are collapsed into one row. Host identity is surfaced via: - A status-only footer pill showing online/offline host counts - Hover cards with a mandatory host row on every workspace entry - Subtitles showing the host name when a project spans >1 host - A host filter in the grouping dropdown (not a sidebar switcher) Order and group-mode stores migrated from per-server to global keys with zustand persist migrations. New-workspace screen now shows a merged project list with a host selector combobox. Key files: - workspace-structure.ts: merge algorithm by projectKey - sidebar-view-store.ts / sidebar-order-store.ts: global state - sidebar-workspace-list.tsx: context-based subtitle injection - new-workspace-screen.tsx: host selector in footer row * Add host filtering to the merged sidebar The sidebar now merges workspaces from every connected host, so a single global "active host" no longer fits. Host selection becomes explicit per action via a host chooser, and agent history pages across all hosts at once. Removes the active-host / active-server-id model and the all-agents-list hook that fed it. * Fix rebase fallout: translate archive host error, update stale workspace-key test archiveWorkspacesOptimistically used a raw "Host is not connected" string that the i18n completeness test forbids; route it through i18n.t with the existing hostDisconnected key. The selectors memoization test asserted un-prefixed workspace keys, but merged-sidebar keys are serverId-prefixed. * Fix sidebar review fallout * Address sidebar review followups * Fix sidebar workspace identity migration * Address sidebar review followups * Handle partial host history failures * Fix merged sidebar project removal and E2E drift * Restore history routes and project removal shape * Remove sidebar host context plumbing * Tighten sidebar status and host filter state * Keep new workspace project selection host-compatible * Migrate sidebar view storage * Streamline host selection flows * Update all-host history on archive * Fix empty project sidebar action Code regression: the main merge dropped the empty-project New workspace child row while keeping the empty project persistence contract. Restore the row using the project host target so the sidebar stays aligned with the no-host-selection model. * Fix Japanese shortcut translation key Stale-base integration: main added the Japanese locale after this branch added cycleAgentMode to the English shortcut help map. Merging main exposed the missing ja key in CI typecheck and resources.test. * Fix Playwright speech teardown race
2026-06-26 12:16:49 +08:00
parent 1109e453bc
commit a49c658d1f
103 changed files with 6856 additions and 2857 deletions
@@ -4,7 +4,6 @@ import { useKeyboardShortcutsStore } from "./keyboard-shortcuts-store";
 beforeEach(() => {
  useKeyboardShortcutsStore.setState({
    commandCenterOpen: false,
-    projectPickerOpen: false,
    shortcutsDialogOpen: false,
    capturingShortcut: false,
    altDown: false,
@@ -5,7 +5,6 @@ const SHORTCUT_BADGE_DELAY_MS = 150;

 interface KeyboardShortcutsState {
  commandCenterOpen: boolean;
-  projectPickerOpen: boolean;
  shortcutsDialogOpen: boolean;
  capturingShortcut: boolean;
  altDown: boolean;
@@ -15,7 +14,6 @@ interface KeyboardShortcutsState {
  sidebarShortcutWorkspaceTargets: SidebarShortcutWorkspaceTarget[];

  setCommandCenterOpen: (open: boolean) => void;
-  setProjectPickerOpen: (open: boolean) => void;
  setShortcutsDialogOpen: (open: boolean) => void;
  setCapturingShortcut: (capturing: boolean) => void;
  setAltDown: (down: boolean) => void;
@@ -49,7 +47,6 @@ function updateBadgeTimer(

 export const useKeyboardShortcutsStore = create<KeyboardShortcutsState>((set, get) => ({
  commandCenterOpen: false,
-  projectPickerOpen: false,
  shortcutsDialogOpen: false,
  capturingShortcut: false,
  altDown: false,
@@ -58,7 +55,6 @@ export const useKeyboardShortcutsStore = create<KeyboardShortcutsState>((set, ge
  sidebarShortcutWorkspaceTargets: [],

  setCommandCenterOpen: (open) => set({ commandCenterOpen: open }),
-  setProjectPickerOpen: (open) => set({ projectPickerOpen: open }),
  setShortcutsDialogOpen: (open) => set({ shortcutsDialogOpen: open }),
  setCapturingShortcut: (capturing) => set({ capturingShortcut: capturing }),
  setAltDown: (down) => {
@@ -14,6 +14,7 @@ import {
 } from "./navigation";
 import { useSessionStore } from "@/stores/session-store";
 import { useWorkspaceLayoutStore } from "@/stores/workspace-layout-store";
+import { stripHostWorkspaceRouteEchoSearchFromBrowserUrlAfterCommit } from "@/utils/host-route-browser";

 export type { ActiveWorkspaceSelection } from "@/stores/last-workspace-selection";

@@ -41,7 +42,10 @@ function navigateDeps(): NavigateToWorkspaceDeps {
      useWorkspaceLayoutStore.getState().openTabFocused(workspaceKey, { kind: "agent", agentId });
    },
    rememberLastWorkspace: (selection) => lastWorkspaceSelectionStore.remember(selection),
-    navigateToRoute: (route) => router.dismissTo(route as Href),
+    navigateToRoute: (route) => {
+      router.dismissTo(route as Href);
+      stripHostWorkspaceRouteEchoSearchFromBrowserUrlAfterCommit();
+    },
  };
 }

@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+interface ProjectPickerRequest {
+  serverId: string;
+}
+
+interface ProjectPickerStoreState {
+  request: ProjectPickerRequest | null;
+  open: (serverId: string) => void;
+  close: () => void;
+}
+
+export const useProjectPickerStore = create<ProjectPickerStoreState>((set) => ({
+  request: null,
+  open: (serverId) => set({ request: { serverId } }),
+  close: () => set({ request: null }),
+}));
@@ -12,7 +12,7 @@ import {
  selectWorkspaceExists,
  selectWorkspaceFields,
  selectWorkspaceKeys,
-  selectWorkspaceOrderByScopeForServer,
+  selectWorkspaceOrderByScope,
  selectWorkspaceStatusesForBadges,
  selectWorkspaceStructureProjects,
  workspaceEqualityFns,
@@ -81,32 +81,31 @@ export function useWorkspaceDirectory(
  );
 }

-export function useWorkspaceStructure(serverId: string | null): WorkspaceStructure {
+export function useWorkspaceStructure(serverIds: string[]): WorkspaceStructure {
  const projects = useStoreWithEqualityFn(
    useSessionStore,
-    (state) => selectWorkspaceStructureProjects(state, serverId),
+    (state) => selectWorkspaceStructureProjects(state, serverIds),
    workspaceEqualityFns.deep,
  );
  const projectOrder = useStoreWithEqualityFn(
    useSidebarOrderStore,
-    (state) => selectProjectOrder(state, serverId),
+    (state) => selectProjectOrder(state),
    workspaceEqualityFns.deep,
  );
  const workspaceOrderByScope = useStoreWithEqualityFn(
    useSidebarOrderStore,
-    (state) => selectWorkspaceOrderByScopeForServer(state, serverId),
+    (state) => selectWorkspaceOrderByScope(state),
    workspaceEqualityFns.deep,
  );

  return useMemo(
    () =>
      composeWorkspaceStructure({
-        serverId,
        projects,
        projectOrder,
        workspaceOrderByScope,
      }),
-    [projectOrder, projects, serverId, workspaceOrderByScope],
+    [projectOrder, projects, workspaceOrderByScope],
  );
 }

@@ -10,7 +10,7 @@ import {
  selectWorkspaceDirectory,
  selectWorkspaceFields,
  selectWorkspaceKeys,
-  selectWorkspaceOrderByScopeForServer,
+  selectWorkspaceOrderByScope,
  selectWorkspaceStatusesForBadges,
  selectWorkspaceStructureProjects,
  workspaceEqualityFns,
@@ -86,15 +86,15 @@ function trackSelector<S, T>(

 function emptySidebarOrder(): SidebarOrderSnapshot {
  return {
-    projectOrderByServerId: {},
-    workspaceOrderByServerAndProject: {},
+    projectOrder: [],
+    workspaceOrderByProject: {},
  };
 }

 function selectWorkspaceStructureProjectKeys(
  state: Parameters<typeof selectWorkspaceStructureProjects>[0],
 ): string[] {
-  return selectWorkspaceStructureProjects(state, SERVER_ID).map((project) => project.projectKey);
+  return selectWorkspaceStructureProjects(state, [SERVER_ID]).map((project) => project.projectKey);
 }

 afterEach(() => {
@@ -211,10 +211,9 @@ describe("workspace structure composition", () => {
    sidebar: SidebarOrderSnapshot,
  ): ReturnType<typeof composeWorkspaceStructure> {
    return composeWorkspaceStructure({
-      serverId,
-      projects: selectWorkspaceStructureProjects(useSessionStore.getState(), serverId),
-      projectOrder: selectProjectOrder(sidebar, serverId),
-      workspaceOrderByScope: selectWorkspaceOrderByScopeForServer(sidebar, serverId),
+      projects: selectWorkspaceStructureProjects(useSessionStore.getState(), [serverId]),
+      projectOrder: selectProjectOrder(sidebar),
+      workspaceOrderByScope: selectWorkspaceOrderByScope(sidebar),
    });
  }

@@ -257,7 +256,7 @@ describe("workspace structure composition", () => {

    const tracked = trackSelector(
      useSessionStore,
-      (state) => selectWorkspaceStructureProjects(state, SERVER_ID),
+      (state) => selectWorkspaceStructureProjects(state, [SERVER_ID]),
      workspaceEqualityFns.deep,
    );
    const before = tracked.current;
@@ -265,7 +264,10 @@ describe("workspace structure composition", () => {
    useSessionStore.getState().mergeWorkspaces(SERVER_ID, [workspaceB]);
    const afterAdd = tracked.current;
    expect(afterAdd).not.toBe(before);
-    expect(afterAdd[0]?.workspaceKeys).toEqual(["workspace-a", "workspace-b"]);
+    expect(afterAdd[0]?.workspaceKeys).toEqual([
+      "test-server:workspace-a",
+      "test-server:workspace-b",
+    ]);

    useSessionStore.getState().mergeWorkspaces(SERVER_ID, [{ ...workspaceA, status: "running" }]);
    expect(tracked.current).toBe(afterAdd);
@@ -286,7 +288,7 @@ describe("workspace structure composition", () => {
      },
    ]);

-    const projects = selectWorkspaceStructureProjects(useSessionStore.getState(), SERVER_ID);
+    const projects = selectWorkspaceStructureProjects(useSessionStore.getState(), [SERVER_ID]);
    expect(projects).toEqual([
      expect.objectContaining({
        projectKey: "empty-project",
@@ -305,7 +307,7 @@ describe("workspace structure composition", () => {

    const tracked = trackSelector(
      useSessionStore,
-      (state) => selectWorkspaceStructureProjects(state, SERVER_ID),
+      (state) => selectWorkspaceStructureProjects(state, [SERVER_ID]),
      workspaceEqualityFns.deep,
    );
    const before = tracked.current;
@@ -334,7 +336,7 @@ describe("workspace structure composition", () => {
    const before = snapshotStructure(SERVER_ID, emptySidebarOrder());
    const after = snapshotStructure(SERVER_ID, {
      ...emptySidebarOrder(),
-      projectOrderByServerId: { [SERVER_ID]: ["project-b", "project-a"] },
+      projectOrder: ["project-b", "project-a"],
    });

    expect(after.projects.map((project) => project.projectKey)).toEqual(["project-b", "project-a"]);
@@ -23,8 +23,8 @@ export interface SessionsSnapshot {
 }

 export interface SidebarOrderSnapshot {
-  projectOrderByServerId: Record<string, string[]>;
-  workspaceOrderByServerAndProject: Record<string, string[]>;
+  projectOrder: string[];
+  workspaceOrderByProject: Record<string, string[]>;
 }

 const EMPTY_WORKSPACE_KEYS: string[] = [];
@@ -35,10 +35,6 @@ export const workspaceEqualityFns = {
  deep: equal as (a: unknown, b: unknown) => boolean,
 };

-function getWorkspaceOrderScopeKey(serverId: string, projectKey: string): string {
-  return `${serverId.trim()}::${projectKey.trim()}`;
-}
-
 function applyStoredOrdering<T>(input: {
  items: T[];
  storedOrder: readonly string[];
@@ -137,76 +133,63 @@ export function selectHasHydratedWorkspaces(

 export function selectWorkspaceStructureProjects(
  state: SessionsSnapshot,
-  serverId: string | null,
+  serverIds: readonly string[],
 ): WorkspaceStructureProject[] {
-  if (!serverId) {
-    return EMPTY_WORKSPACE_STRUCTURE.projects;
-  }
+  const sessions: Array<{
+    serverId: string;
+    workspaces: Iterable<WorkspaceDescriptor>;
+    emptyProjects: Iterable<EmptyProjectDescriptor>;
+  }> = [];

-  const session = state.sessions[serverId];
-  const workspaces = session?.workspaces;
-  const emptyProjects = session?.emptyProjects;
-  if ((!workspaces || workspaces.size === 0) && (!emptyProjects || emptyProjects.size === 0)) {
-    return EMPTY_WORKSPACE_STRUCTURE.projects;
-  }
-
-  return buildWorkspaceStructureProjects({
-    serverId,
-    workspaces: workspaces?.values() ?? [],
-    emptyProjects: emptyProjects?.values() ?? [],
-  });
-}
-
-export function selectProjectOrder(state: SidebarOrderSnapshot, serverId: string | null): string[] {
-  return serverId
-    ? (state.projectOrderByServerId[serverId] ?? EMPTY_WORKSPACE_KEYS)
-    : EMPTY_WORKSPACE_KEYS;
-}
-
-export function selectWorkspaceOrderByScopeForServer(
-  state: SidebarOrderSnapshot,
-  serverId: string | null,
-): Record<string, string[]> {
-  if (!serverId) {
-    return {};
-  }
-  const prefix = `${serverId.trim()}::`;
-  const relevantOrderByScope: Record<string, string[]> = {};
-  for (const [scopeKey, order] of Object.entries(state.workspaceOrderByServerAndProject)) {
-    if (scopeKey.startsWith(prefix)) {
-      relevantOrderByScope[scopeKey] = order;
+  for (const serverId of serverIds) {
+    const session = state.sessions[serverId];
+    const workspaces = session?.workspaces;
+    const emptyProjects = session?.emptyProjects;
+    if ((!workspaces || workspaces.size === 0) && (!emptyProjects || emptyProjects.size === 0)) {
+      continue;
    }
+    sessions.push({
+      serverId,
+      workspaces: workspaces?.values() ?? [],
+      emptyProjects: emptyProjects?.values() ?? [],
+    });
  }
-  return relevantOrderByScope;
+
+  if (sessions.length === 0) {
+    return EMPTY_WORKSPACE_STRUCTURE.projects;
+  }
+
+  return buildWorkspaceStructureProjects({ sessions });
+}
+
+export function selectProjectOrder(state: SidebarOrderSnapshot): string[] {
+  return state.projectOrder ?? EMPTY_WORKSPACE_KEYS;
+}
+
+export function selectWorkspaceOrderByScope(state: SidebarOrderSnapshot): Record<string, string[]> {
+  return state.workspaceOrderByProject ?? {};
 }

 export function composeWorkspaceStructure(input: {
-  serverId: string | null;
  projects: WorkspaceStructureProject[];
  projectOrder: readonly string[];
  workspaceOrderByScope: Record<string, readonly string[]>;
 }): WorkspaceStructure {
-  if (!input.serverId || input.projects.length === 0) {
+  if (input.projects.length === 0) {
    return EMPTY_WORKSPACE_STRUCTURE;
  }

  const orderedProjects = applyStoredOrdering({
    items: input.projects.map((project) => {
      const workspaceOrder =
-        input.workspaceOrderByScope[
-          getWorkspaceOrderScopeKey(input.serverId as string, project.projectKey)
-        ] ?? EMPTY_WORKSPACE_KEYS;
-      const workspaceItems = project.workspaceKeys.map((workspaceId) => ({
-        workspaceId,
-        workspaceKey: `${input.serverId as string}:${workspaceId}`,
-      }));
+        input.workspaceOrderByScope[project.projectKey] ?? EMPTY_WORKSPACE_KEYS;
      return {
        ...project,
        workspaceKeys: applyStoredOrdering({
-          items: workspaceItems,
+          items: project.workspaceKeys,
          storedOrder: workspaceOrder,
-          getKey: (workspace) => workspace.workspaceKey,
-        }).map((workspace) => workspace.workspaceId),
+          getKey: (workspaceKey) => workspaceKey,
+        }),
      };
    }),
    storedOrder: input.projectOrder,
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+import { migrateSidebarOrderState } from "./sidebar-order-store";
+
+describe("migrateSidebarOrderState", () => {
+  it("prefixes legacy per-server workspace order with the source server id", () => {
+    const migrated = migrateSidebarOrderState({
+      projectOrderByServerId: {
+        "host-a": ["project-a"],
+        "host-b": ["project-a"],
+      },
+      workspaceOrderByServerAndProject: {
+        "host-a::project-a": ["main", "feature"],
+        "host-b::project-a": ["main"],
+      },
+    });
+
+    expect(migrated).toEqual({
+      projectOrder: ["project-a"],
+      workspaceOrderByProject: {
+        "project-a": ["host-a:main", "host-a:feature", "host-b:main"],
+      },
+    });
+  });
+});
@@ -3,12 +3,24 @@ import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";

 interface SidebarOrderStoreState {
-  projectOrderByServerId: Record<string, string[]>;
-  workspaceOrderByServerAndProject: Record<string, string[]>;
-  getProjectOrder: (serverId: string) => string[];
-  setProjectOrder: (serverId: string, keys: string[]) => void;
-  getWorkspaceOrder: (serverId: string, projectKey: string) => string[];
-  setWorkspaceOrder: (serverId: string, projectKey: string, keys: string[]) => void;
+  projectOrder: string[];
+  workspaceOrderByProject: Record<string, string[]>;
+  getProjectOrder: () => string[];
+  setProjectOrder: (keys: string[]) => void;
+  getWorkspaceOrder: (projectKey: string) => string[];
+  setWorkspaceOrder: (projectKey: string, keys: string[]) => void;
+}
+
+interface SidebarOrderPersistedState {
+  projectOrder?: string[];
+  workspaceOrderByProject?: Record<string, string[]>;
+  projectOrderByServerId?: Record<string, string[]>;
+  workspaceOrderByServerAndProject?: Record<string, string[]>;
+}
+
+interface SidebarWorkspaceOrderScope {
+  serverId: string;
+  projectKey: string;
 }

 function normalizeKeys(keys: string[]): string[] {
@@ -27,56 +39,96 @@ function normalizeKeys(keys: string[]): string[] {
  return normalized;
 }

-function buildWorkspaceScopeKey(serverId: string, projectKey: string): string {
-  return `${serverId.trim()}::${projectKey.trim()}`;
+function normalizeWorkspaceOrderByProject(
+  workspaceOrderByProject: Record<string, string[]> | undefined,
+): Record<string, string[]> {
+  const normalized: Record<string, string[]> = {};
+  for (const [projectKey, order] of Object.entries(workspaceOrderByProject ?? {})) {
+    const scope = projectKey.trim();
+    if (!scope) continue;
+    normalized[scope] = normalizeKeys(order);
+  }
+  return normalized;
+}
+
+function extractWorkspaceOrderScope(scopeKey: string): SidebarWorkspaceOrderScope | null {
+  const separatorIndex = scopeKey.indexOf("::");
+  if (separatorIndex < 0) return null;
+  const serverId = scopeKey.slice(0, separatorIndex).trim();
+  const projectKey = scopeKey.slice(separatorIndex + 2).trim();
+  if (!serverId || !projectKey) return null;
+  return { serverId, projectKey };
+}
+
+function normalizeLegacyWorkspaceKey(serverId: string, rawWorkspaceKey: string): string | null {
+  const workspaceKey = rawWorkspaceKey.trim();
+  if (!workspaceKey) return null;
+  const serverPrefix = `${serverId}:`;
+  return workspaceKey.startsWith(serverPrefix) ? workspaceKey : `${serverPrefix}${workspaceKey}`;
+}
+
+export function migrateSidebarOrderState(persistedState: unknown): {
+  projectOrder: string[];
+  workspaceOrderByProject: Record<string, string[]>;
+} {
+  const state = persistedState as SidebarOrderPersistedState | undefined;
+
+  if (!state) {
+    return { projectOrder: [], workspaceOrderByProject: {} };
+  }
+
+  const projectOrder = normalizeKeys(state.projectOrder ?? []);
+  const seenProjects = new Set(projectOrder);
+  for (const keys of Object.values(state.projectOrderByServerId ?? {})) {
+    for (const key of normalizeKeys(keys)) {
+      if (seenProjects.has(key)) continue;
+      seenProjects.add(key);
+      projectOrder.push(key);
+    }
+  }
+
+  const workspaceOrderByProject = normalizeWorkspaceOrderByProject(state.workspaceOrderByProject);
+  for (const [scopeKey, order] of Object.entries(state.workspaceOrderByServerAndProject ?? {})) {
+    const scope = extractWorkspaceOrderScope(scopeKey);
+    if (!scope) continue;
+    const existing = workspaceOrderByProject[scope.projectKey] ?? [];
+    const merged = [...existing];
+    const seen = new Set(merged);
+    for (const key of order) {
+      const workspaceKey = normalizeLegacyWorkspaceKey(scope.serverId, key);
+      if (!workspaceKey || seen.has(workspaceKey)) continue;
+      seen.add(workspaceKey);
+      merged.push(workspaceKey);
+    }
+    workspaceOrderByProject[scope.projectKey] = merged;
+  }
+
+  return { projectOrder, workspaceOrderByProject };
 }

 export const useSidebarOrderStore = create<SidebarOrderStoreState>()(
  persist(
    (set, get) => ({
-      projectOrderByServerId: {},
-      workspaceOrderByServerAndProject: {},
-      getProjectOrder: (serverId) => {
-        const key = serverId.trim();
-        if (!key) {
-          return [];
-        }
-        return get().projectOrderByServerId[key] ?? [];
+      projectOrder: [],
+      workspaceOrderByProject: {},
+      getProjectOrder: () => get().projectOrder,
+      setProjectOrder: (keys) => {
+        const normalized = normalizeKeys(keys);
+        set({ projectOrder: normalized });
      },
-      setProjectOrder: (serverId, keys) => {
-        const key = serverId.trim();
-        if (!key) {
-          return;
-        }
+      getWorkspaceOrder: (projectKey) => {
+        const scope = projectKey.trim();
+        if (!scope) return [];
+        return get().workspaceOrderByProject[scope] ?? [];
+      },
+      setWorkspaceOrder: (projectKey, keys) => {
+        const scope = projectKey.trim();
+        if (!scope) return;
        const normalized = normalizeKeys(keys);
        set((state) => ({
-          projectOrderByServerId: {
-            ...state.projectOrderByServerId,
-            [key]: normalized,
-          },
-        }));
-      },
-      getWorkspaceOrder: (serverId, projectKey) => {
-        const serverKey = serverId.trim();
-        const projectScope = projectKey.trim();
-        if (!serverKey || !projectScope) {
-          return [];
-        }
-        const scopeKey = buildWorkspaceScopeKey(serverKey, projectScope);
-        return get().workspaceOrderByServerAndProject[scopeKey] ?? [];
-      },
-      setWorkspaceOrder: (serverId, projectKey, keys) => {
-        const serverKey = serverId.trim();
-        const projectScope = projectKey.trim();
-        if (!serverKey || !projectScope) {
-          return;
-        }
-        const scopeKey = buildWorkspaceScopeKey(serverKey, projectScope);
-        const normalized = normalizeKeys(keys);
-        set((state) => ({
-          workspaceOrderByServerAndProject: {
-            ...state.workspaceOrderByServerAndProject,
-            [scopeKey]: normalized,
+          workspaceOrderByProject: {
+            ...state.workspaceOrderByProject,
+            [scope]: normalized,
          },
        }));
      },
@@ -85,9 +137,11 @@ export const useSidebarOrderStore = create<SidebarOrderStoreState>()(
      name: "sidebar-project-workspace-order",
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({
-        projectOrderByServerId: state.projectOrderByServerId,
-        workspaceOrderByServerAndProject: state.workspaceOrderByServerAndProject,
+        projectOrder: state.projectOrder,
+        workspaceOrderByProject: state.workspaceOrderByProject,
      }),
+      version: 1,
+      migrate: migrateSidebarOrderState,
    },
  ),
 );
@@ -0,0 +1,130 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { StateStorage } from "zustand/middleware";
+import {
+  createSidebarViewStorage,
+  migrateSidebarViewState,
+  useSidebarViewStore,
+} from "./sidebar-view-store";
+
+vi.mock("@react-native-async-storage/async-storage", () => ({
+  default: {
+    getItem: vi.fn().mockResolvedValue(null),
+    setItem: vi.fn().mockResolvedValue(undefined),
+    removeItem: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+
+interface MemoryStorage extends StateStorage<Promise<void>> {
+  reads: string[];
+}
+
+function createMemoryStorage(entries: Record<string, string | null>): MemoryStorage {
+  const reads: string[] = [];
+  return {
+    reads,
+    getItem: async (name) => {
+      reads.push(name);
+      return entries[name] ?? null;
+    },
+    setItem: async (name, value) => {
+      entries[name] = value;
+    },
+    removeItem: async (name) => {
+      entries[name] = null;
+    },
+  };
+}
+
+describe("sidebar view store", () => {
+  beforeEach(() => {
+    useSidebarViewStore.setState({
+      groupMode: "project",
+      hostFilter: null,
+    });
+  });
+
+  it("keeps a host filter that still points at an available host", () => {
+    useSidebarViewStore.getState().setHostFilter("host-a");
+
+    useSidebarViewStore.getState().reconcileHostFilter(["host-a", "host-b"]);
+
+    expect(useSidebarViewStore.getState().hostFilter).toBe("host-a");
+  });
+
+  it("clears a host filter after that host is removed", () => {
+    useSidebarViewStore.getState().setHostFilter("removed-host");
+
+    useSidebarViewStore.getState().reconcileHostFilter(["host-a"]);
+
+    expect(useSidebarViewStore.getState().hostFilter).toBeNull();
+  });
+
+  it("migrates legacy per-host group modes to the new global mode", () => {
+    expect(
+      migrateSidebarViewState({
+        groupModeByServerId: {
+          "host-a": "project",
+          "host-b": "status",
+        },
+      }),
+    ).toEqual({
+      groupMode: "status",
+      hostFilter: null,
+    });
+  });
+
+  it("keeps current persisted sidebar view state during version migration", () => {
+    expect(
+      migrateSidebarViewState({
+        groupMode: "status",
+        hostFilter: "host-a",
+      }),
+    ).toEqual({
+      groupMode: "status",
+      hostFilter: "host-a",
+    });
+  });
+
+  it("falls back to the legacy storage key when the new key is empty", async () => {
+    const storage = createMemoryStorage({
+      "sidebar-view": null,
+      "sidebar-group-mode": JSON.stringify({
+        state: { groupModeByServerId: { "host-a": "status" } },
+        version: 0,
+      }),
+    });
+
+    const value = await createSidebarViewStorage(storage).getItem("sidebar-view");
+
+    expect(value).toBe(
+      JSON.stringify({
+        state: { groupModeByServerId: { "host-a": "status" } },
+        version: 0,
+      }),
+    );
+    expect(storage.reads).toEqual(["sidebar-view", "sidebar-group-mode"]);
+  });
+
+  it("uses the new storage key without reading the legacy key when current state exists", async () => {
+    const storage = createMemoryStorage({
+      "sidebar-view": JSON.stringify({
+        state: { groupMode: "project", hostFilter: "host-a" },
+        version: 1,
+      }),
+      "sidebar-group-mode": JSON.stringify({
+        state: { groupModeByServerId: { "host-b": "status" } },
+        version: 0,
+      }),
+    });
+
+    const value = await createSidebarViewStorage(storage).getItem("sidebar-view");
+
+    expect(value).toBe(
+      JSON.stringify({
+        state: { groupMode: "project", hostFilter: "host-a" },
+        version: 1,
+      }),
+    );
+    expect(storage.reads).toEqual(["sidebar-view"]);
+  });
+});
@@ -1,41 +1,101 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
+import { createJSONStorage, persist, type StateStorage } from "zustand/middleware";

 export type SidebarGroupMode = "project" | "status";

+const SIDEBAR_VIEW_STORAGE_KEY = "sidebar-view";
+const LEGACY_SIDEBAR_GROUP_MODE_STORAGE_KEY = "sidebar-group-mode";
+const SIDEBAR_VIEW_STORE_VERSION = 1;
+
 interface SidebarViewStoreState {
-  groupModeByServerId: Record<string, SidebarGroupMode>;
-  getGroupMode: (serverId: string) => SidebarGroupMode;
-  setGroupMode: (serverId: string, mode: SidebarGroupMode) => void;
+  groupMode: SidebarGroupMode;
+  hostFilter: string | null;
+  setGroupMode: (mode: SidebarGroupMode) => void;
+  setHostFilter: (serverId: string | null) => void;
+  reconcileHostFilter: (serverIds: readonly string[]) => void;
+}
+
+interface SidebarViewPersistedState {
+  groupMode: SidebarGroupMode;
+  hostFilter: string | null;
+}
+
+function isSidebarGroupMode(value: unknown): value is SidebarGroupMode {
+  return value === "project" || value === "status";
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function readLegacyGroupMode(persistedState: Record<string, unknown>): SidebarGroupMode | null {
+  const groupModeByServerId = persistedState.groupModeByServerId;
+  if (!isRecord(groupModeByServerId)) {
+    return null;
+  }
+
+  const modes = Object.values(groupModeByServerId).filter(isSidebarGroupMode);
+  if (modes.length === 0) return null;
+  return modes.includes("status") ? "status" : "project";
+}
+
+export function migrateSidebarViewState(persistedState: unknown): SidebarViewPersistedState {
+  if (!isRecord(persistedState)) {
+    return { groupMode: "project", hostFilter: null };
+  }
+
+  const legacyGroupMode = readLegacyGroupMode(persistedState);
+  if (legacyGroupMode) {
+    return { groupMode: legacyGroupMode, hostFilter: null };
+  }
+
+  return {
+    groupMode: isSidebarGroupMode(persistedState.groupMode) ? persistedState.groupMode : "project",
+    hostFilter: typeof persistedState.hostFilter === "string" ? persistedState.hostFilter : null,
+  };
+}
+
+export function createSidebarViewStorage(
+  backingStorage: StateStorage = AsyncStorage,
+): StateStorage {
+  return {
+    getItem: async (name) => {
+      const value = await backingStorage.getItem(name);
+      if (value !== null || name !== SIDEBAR_VIEW_STORAGE_KEY) {
+        return value;
+      }
+      return backingStorage.getItem(LEGACY_SIDEBAR_GROUP_MODE_STORAGE_KEY);
+    },
+    setItem: (name, value) => backingStorage.setItem(name, value),
+    removeItem: (name) => backingStorage.removeItem(name),
+  };
 }

 export const useSidebarViewStore = create<SidebarViewStoreState>()(
  persist(
-    (set, get) => ({
-      groupModeByServerId: {},
-      getGroupMode: (serverId) => {
-        const key = serverId.trim();
-        if (!key) return "project";
-        return get().groupModeByServerId[key] ?? "project";
-      },
-      setGroupMode: (serverId, mode) => {
-        const key = serverId.trim();
-        if (!key) return;
-        set((state) => ({
-          groupModeByServerId: {
-            ...state.groupModeByServerId,
-            [key]: mode,
-          },
-        }));
-      },
+    (set) => ({
+      groupMode: "project",
+      hostFilter: null,
+      setGroupMode: (mode) => set({ groupMode: mode }),
+      setHostFilter: (serverId) => set({ hostFilter: serverId }),
+      reconcileHostFilter: (serverIds) =>
+        set((state) => {
+          if (!state.hostFilter || serverIds.includes(state.hostFilter)) {
+            return state;
+          }
+          return { hostFilter: null };
+        }),
    }),
    {
-      name: "sidebar-group-mode",
-      storage: createJSONStorage(() => AsyncStorage),
+      name: SIDEBAR_VIEW_STORAGE_KEY,
+      version: SIDEBAR_VIEW_STORE_VERSION,
+      storage: createJSONStorage(createSidebarViewStorage),
      partialize: (state) => ({
-        groupModeByServerId: state.groupModeByServerId,
+        groupMode: state.groupMode,
+        hostFilter: state.hostFilter,
      }),
+      migrate: migrateSidebarViewState,
    },
  ),
 );