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

packages/app/src/utils/active-host.test.ts

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { HostProfile } from "@/types/host-connection";
-import { resolveActiveHost } from "./active-host";
-
-function host(serverId: string): HostProfile {
-  return {
-    serverId,
-    label: serverId,
-    lifecycle: {},
-    connections: [],
-    preferredConnectionId: null,
-    createdAt: "",
-    updatedAt: "",
-  };
-}
-
-describe("resolveActiveHost", () => {
-  it("uses the route host when it exists", () => {
-    expect(
-      resolveActiveHost({
-        hosts: [host("srv-1"), host("srv-2")],
-        pathname: "/h/srv-2/workspace/ws-main",
-      })?.serverId,
-    ).toBe("srv-2");
-  });
-
-  it("falls back to the first host when the route host is missing", () => {
-    expect(
-      resolveActiveHost({
-        hosts: [host("srv-1"), host("srv-2")],
-        pathname: "/h/missing/workspace/ws-main",
-      })?.serverId,
-    ).toBe("srv-1");
-  });
-
-  it("returns null when no hosts exist", () => {
-    expect(resolveActiveHost({ hosts: [], pathname: "/settings" })).toBeNull();
-  });
-});

packages/app/src/utils/active-host.ts

@@ -1,20 +0,0 @@
-import type { HostProfile } from "@/types/host-connection";
-import { parseServerIdFromPathname } from "@/utils/host-routes";
-
-export function resolveActiveHost({
-  hosts,
-  pathname,
-}: {
-  hosts: readonly HostProfile[];
-  pathname: string;
-}): HostProfile | null {
-  const serverIdFromPath = parseServerIdFromPathname(pathname);
-  if (serverIdFromPath) {
-    const routeMatch = hosts.find((host) => host.serverId === serverIdFromPath);
-    if (routeMatch) {
-      return routeMatch;
-    }
-  }
-
-  return hosts[0] ?? null;
-}

packages/app/src/utils/host-route-browser.ts

@@ -0,0 +1,35 @@
+import { isWeb } from "@/constants/platform";
+import { stripHostWorkspaceRouteEchoSearch } from "@/utils/host-routes";
+
+function getCurrentBrowserRoute(): string | null {
+  if (!isWeb || typeof window === "undefined") {
+    return null;
+  }
+  return `${window.location.pathname}${window.location.search}${window.location.hash}`;
+}
+
+export function replaceBrowserRouteWithCanonicalHostWorkspaceRoute(route: string): void {
+  if (!isWeb || typeof window === "undefined") {
+    return;
+  }
+  window.history.replaceState(null, "", stripHostWorkspaceRouteEchoSearch(route));
+}
+
+export function stripHostWorkspaceRouteEchoSearchFromBrowserUrl(): void {
+  const currentRoute = getCurrentBrowserRoute();
+  if (!currentRoute) {
+    return;
+  }
+  const canonicalRoute = stripHostWorkspaceRouteEchoSearch(currentRoute);
+  if (canonicalRoute === currentRoute) {
+    return;
+  }
+  window.history.replaceState(null, "", canonicalRoute);
+}
+
+export function stripHostWorkspaceRouteEchoSearchFromBrowserUrlAfterCommit(): void {
+  if (!isWeb || typeof window === "undefined") {
+    return;
+  }
+  window.setTimeout(stripHostWorkspaceRouteEchoSearchFromBrowserUrl, 0);
+}

packages/app/src/utils/host-routes.test.ts

@@ -5,6 +5,10 @@ import {
   buildHostRootRoute,
   buildHostWorkspaceOpenRoute,
   buildHostWorkspaceRoute,
+  buildOpenProjectRoute,
+  resolveKnownHostRoute,
+  buildSessionsRoute,
+  buildSettingsAddHostRoute,
   buildProjectSettingsRoute,
   buildProjectsSettingsRoute,
   decodeFilePathFromPathSegment,
@@ -16,6 +20,7 @@ import {
   parseHostWorkspaceOpenIntentFromPathname,
   parseHostWorkspaceRouteFromPathname,
   parseWorkspaceOpenIntent,
+  stripHostWorkspaceRouteEchoSearch,
 } from "./host-routes";
 
 describe("parseHostAgentRouteFromPathname", () => {
@@ -122,6 +127,28 @@ describe("workspace route parsing", () => {
     );
   });
 
+  it("strips route params repeated as workspace route search params", () => {
+    expect(
+      stripHostWorkspaceRouteEchoSearch(
+        "/h/local/workspace/164?serverId=local&workspaceId=164&open=agent%3Aagent-1#pane",
+      ),
+    ).toBe("/h/local/workspace/164?open=agent%3Aagent-1#pane");
+  });
+
+  it("keeps non-route workspace search params", () => {
+    expect(stripHostWorkspaceRouteEchoSearch("/h/local/workspace/164?workspaceId=other")).toBe(
+      "/h/local/workspace/164?workspaceId=other",
+    );
+  });
+
+  it("strips encoded workspace route echoes", () => {
+    expect(
+      stripHostWorkspaceRouteEchoSearch(
+        "/h/local/workspace/b64_L3RtcC9yZXBv?workspaceId=%2Ftmp%2Frepo",
+      ),
+    ).toBe("/h/local/workspace/b64_L3RtcC9yZXBv");
+  });
+
   it("builds a global new workspace route without a source directory", () => {
     expect(buildHostNewWorkspaceRoute("local")).toBe("/h/local/new");
   });
@@ -153,6 +180,14 @@ describe("workspace route parsing", () => {
 });
 
 describe("projects settings routes", () => {
+  it("buildSettingsAddHostRoute opens settings with the add-host flag", () => {
+    expect(buildSettingsAddHostRoute()).toBe("/settings/general?addHost=1");
+  });
+
+  it("buildSettingsAddHostRoute accepts a repeatable intent id", () => {
+    expect(buildSettingsAddHostRoute("retry 1")).toBe("/settings/general?addHost=retry%201");
+  });
+
   it("buildProjectsSettingsRoute returns /settings/projects", () => {
     expect(buildProjectsSettingsRoute()).toBe("/settings/projects");
   });
@@ -177,6 +212,12 @@ describe("projects settings routes", () => {
   });
 });
 
+describe("global routes", () => {
+  it("buildSessionsRoute returns the all-host Sessions route", () => {
+    expect(buildSessionsRoute()).toBe("/sessions");
+  });
+});
+
 describe("host settings section slugs", () => {
   it("keeps current host settings sections", () => {
     expect(normalizeHostSectionSlug("connections")).toBe("connections");
@@ -192,3 +233,32 @@ describe("host settings section slugs", () => {
     expect(normalizeHostSectionSlug("daemon")).toBe("host");
   });
 });
+
+describe("resolveKnownHostRoute", () => {
+  it("renders when the route host is still saved", () => {
+    expect(
+      resolveKnownHostRoute({
+        routeServerId: "srv-current",
+        hosts: [{ serverId: "srv-current" }, { serverId: "srv-next" }],
+      }),
+    ).toEqual({ kind: "render" });
+  });
+
+  it("sends removed host routes to the host-agnostic open project screen", () => {
+    expect(
+      resolveKnownHostRoute({
+        routeServerId: "srv-removed",
+        hosts: [{ serverId: "srv-next" }],
+      }),
+    ).toEqual({ kind: "redirect", href: buildOpenProjectRoute() });
+  });
+
+  it("sends host routes to welcome when no hosts are saved", () => {
+    expect(
+      resolveKnownHostRoute({
+        routeServerId: "srv-removed",
+        hosts: [],
+      }),
+    ).toEqual({ kind: "redirect", href: "/welcome" });
+  });
+});

packages/app/src/utils/host-routes.ts

@@ -23,6 +23,11 @@ function extractSearch(pathname: string): string {
     : pathname.slice(queryIndex + 1);
 }
 
+function extractHash(pathname: string): string {
+  const hashIndex = pathname.indexOf("#");
+  return hashIndex >= 0 ? pathname.slice(hashIndex) : "";
+}
+
 function trimNonEmpty(value: NullableString): string | null {
   if (typeof value !== "string") {
     return null;
@@ -298,6 +303,38 @@ export function parseHostWorkspaceRouteFromPathname(
   return { serverId, workspaceId };
 }
 
+export function stripHostWorkspaceRouteEchoSearch(route: string): string {
+  const pathname = stripSearchAndHash(route);
+  const selection = parseHostWorkspaceRouteFromPathname(pathname);
+  const search = extractSearch(route);
+  if (!selection || !search) {
+    return route;
+  }
+
+  const params = new URLSearchParams(search);
+  let didStrip = false;
+
+  const serverId = params.get("serverId");
+  if (serverId && trimNonEmpty(decodeSegment(serverId)) === selection.serverId) {
+    params.delete("serverId");
+    didStrip = true;
+  }
+
+  const workspaceId = params.get("workspaceId");
+  if (workspaceId && decodeWorkspaceIdFromPathSegment(workspaceId) === selection.workspaceId) {
+    params.delete("workspaceId");
+    didStrip = true;
+  }
+
+  if (!didStrip) {
+    return route;
+  }
+
+  const nextSearch = params.toString();
+  const nextQuery = nextSearch ? `?${nextSearch}` : "";
+  return `${pathname}${nextQuery}${extractHash(route)}`;
+}
+
 export function buildHostWorkspaceRoute(serverId: string, workspaceId: string) {
   const normalizedServerId = trimNonEmpty(serverId);
   const normalizedWorkspaceId = trimNonEmpty(workspaceId);
@@ -353,6 +390,14 @@ export function buildHostRootRoute(serverId: string) {
   return `/h/${encodeSegment(normalized)}` as const;
 }
 
+export function buildHostOpenProjectRoute(serverId: string) {
+  const base = buildHostRootRoute(serverId);
+  if (base === "/") {
+    return "/" as const;
+  }
+  return `${base}/open-project` as const;
+}
+
 export function buildHostSessionsRoute(serverId: string) {
   const base = buildHostRootRoute(serverId);
   if (base === "/") {
@@ -361,12 +406,32 @@ export function buildHostSessionsRoute(serverId: string) {
   return `${base}/sessions` as const;
 }
 
-export function buildHostOpenProjectRoute(serverId: string) {
-  const base = buildHostRootRoute(serverId);
-  if (base === "/") {
-    return "/" as const;
+export function buildSessionsRoute() {
+  return "/sessions" as const;
+}
+
+export function buildOpenProjectRoute() {
+  return "/open-project" as const;
+}
+
+export type KnownHostRouteResolution =
+  | { kind: "render" }
+  | { kind: "redirect"; href: ReturnType<typeof buildOpenProjectRoute> | "/welcome" };
+
+export function resolveKnownHostRoute(input: {
+  routeServerId: string | null | undefined;
+  hosts: readonly { serverId: string }[];
+}): KnownHostRouteResolution {
+  const routeServerId = trimNonEmpty(input.routeServerId);
+  if (routeServerId && input.hosts.some((host) => host.serverId === routeServerId)) {
+    return { kind: "render" };
   }
-  return `${base}/open-project` as const;
+
+  if (input.hosts.length > 0) {
+    return { kind: "redirect", href: buildOpenProjectRoute() };
+  }
+
+  return { kind: "redirect", href: "/welcome" };
 }
 
 export function buildHostNewWorkspaceRoute(
@@ -448,6 +513,10 @@ export function buildSettingsSectionRoute(section: SettingsSectionSlug) {
   return `/settings/${section}` as const;
 }
 
+export function buildSettingsAddHostRoute(intentId: string | number = "1") {
+  return `/settings/general?addHost=${encodeURIComponent(String(intentId))}` as const;
+}
+
 export function buildSettingsHostRoute(serverId: string) {
   const normalized = trimNonEmpty(serverId);
   if (!normalized) {
@@ -475,30 +544,3 @@ export function buildProjectSettingsRoute(projectKey: string) {
   }
   return `/settings/projects/${encodeSegment(normalized)}` as const;
 }
-
-export function mapPathnameToServer(pathname: string, nextServerId: string) {
-  const normalized = trimNonEmpty(nextServerId);
-  if (!normalized) {
-    return "/" as const;
-  }
-
-  const suffix = pathname.replace(/^\/h\/[^/]+\/?/, "");
-  const base = buildHostRootRoute(normalized);
-  if (suffix.startsWith("settings")) {
-    return buildSettingsHostRoute(normalized);
-  }
-  if (suffix.startsWith("sessions")) {
-    return `${base}/sessions` as const;
-  }
-  if (suffix.startsWith("open-project")) {
-    return `${base}/open-project` as const;
-  }
-  const workspaceRoute = parseHostWorkspaceRouteFromPathname(pathname);
-  if (workspaceRoute) {
-    return buildHostWorkspaceRoute(normalized, workspaceRoute.workspaceId);
-  }
-  if (suffix.startsWith("agent/")) {
-    return `${base}/${suffix}` as const;
-  }
-  return base;
-}

packages/app/src/utils/projects.ts

@@ -80,10 +80,8 @@ function findProjectCustomName(
 
 function buildHostProjectEntries(host: ProjectHost): HostProjectListItem[] {
   return buildHostProjectList({
-    serverId: host.serverId,
     projects: buildWorkspaceStructureProjects({
-      serverId: host.serverId,
-      workspaces: host.workspaces,
+      sessions: [{ serverId: host.serverId, workspaces: host.workspaces }],
     }),
   });
 }

packages/app/src/utils/sidebar-project-row-model.test.ts

@@ -1,9 +1,12 @@
 import { describe, expect, it } from "vitest";
-import { buildSidebarProjectRowModel } from "./sidebar-project-row-model";
 import type {
   SidebarProjectEntry,
   SidebarWorkspaceEntry,
 } from "@/hooks/use-sidebar-workspaces-list";
+import {
+  buildSidebarProjectRowModel,
+  resolveSidebarProjectIconTarget,
+} from "./sidebar-project-row-model";
 
 function workspace(overrides: Partial<SidebarWorkspaceEntry> = {}): SidebarWorkspaceEntry {
   return {
@@ -11,6 +14,7 @@ function workspace(overrides: Partial<SidebarWorkspaceEntry> = {}): SidebarWorks
     serverId: "srv",
     workspaceId: "ws-root",
     projectKey: "project-1",
+    projectName: "paseo",
     workspaceDirectory: "/repo",
     projectKind: "git",
     workspaceKind: "checkout",
@@ -37,7 +41,9 @@ function project(overrides: Partial<SidebarProjectEntry> = {}): SidebarProjectEn
     projectName: "paseo",
     projectKind,
     iconWorkingDir: "/repo",
-    canCreateWorktree: overrides.canCreateWorktree ?? projectKind === "git",
+    hosts: overrides.hosts ?? [
+      { serverId: "srv", iconWorkingDir: "/repo", canCreateWorktree: projectKind === "git" },
+    ],
     workspaces: [workspace()],
     ...overrides,
   };
@@ -56,7 +62,7 @@ describe("buildSidebarProjectRowModel", () => {
     expect(result).toEqual({
       kind: "project_section",
       chevron: "collapse",
-      trailingAction: "none",
+      trailingAction: { kind: "none" },
     });
   });
 
@@ -72,7 +78,29 @@ describe("buildSidebarProjectRowModel", () => {
     expect(result).toEqual({
       kind: "project_section",
       chevron: "expand",
-      trailingAction: "new_worktree",
+      trailingAction: {
+        kind: "new_worktree",
+        target: { serverId: "srv", iconWorkingDir: "/repo" },
+      },
+    });
+  });
+
+  it("targets the project host, not route state, for new worktree actions", () => {
+    const result = buildSidebarProjectRowModel({
+      project: project({
+        hosts: [
+          { serverId: "host-a", iconWorkingDir: "/repo/a", canCreateWorktree: false },
+          { serverId: "host-b", iconWorkingDir: "/repo/b", canCreateWorktree: true },
+        ],
+      }),
+      collapsed: false,
+    });
+
+    expect(result).toMatchObject({
+      trailingAction: {
+        kind: "new_worktree",
+        target: { serverId: "host-b", iconWorkingDir: "/repo/b" },
+      },
     });
   });
 
@@ -91,10 +119,26 @@ describe("buildSidebarProjectRowModel", () => {
     expect(result).toEqual({
       kind: "project_section",
       chevron: "expand",
-      trailingAction: "new_worktree",
+      trailingAction: {
+        kind: "new_worktree",
+        target: { serverId: "srv", iconWorkingDir: "/repo" },
+      },
     });
   });
 
+  it("resolves project icons from the project host, not the focused host", () => {
+    const iconTarget = resolveSidebarProjectIconTarget(
+      project({
+        hosts: [
+          { serverId: "host-b", iconWorkingDir: "/repo/b", canCreateWorktree: true },
+          { serverId: "host-a", iconWorkingDir: "/repo/a", canCreateWorktree: true },
+        ],
+      }),
+    );
+
+    expect(iconTarget).toEqual({ serverId: "host-b", iconWorkingDir: "/repo/b" });
+  });
+
   it("renders an empty project as an expandable section", () => {
     const result = buildSidebarProjectRowModel({
       project: project({ projectKind: "git", workspaces: [] }),
@@ -104,7 +148,10 @@ describe("buildSidebarProjectRowModel", () => {
     expect(result).toEqual({
       kind: "project_section",
       chevron: "collapse",
-      trailingAction: "new_worktree",
+      trailingAction: {
+        kind: "new_worktree",
+        target: { serverId: "srv", iconWorkingDir: "/repo" },
+      },
     });
   });
 });

packages/app/src/utils/sidebar-project-row-model.ts

@@ -1,13 +1,63 @@
 import type { SidebarProjectEntry } from "@/hooks/use-sidebar-workspaces-list";
 
+export interface SidebarProjectHostTarget {
+  serverId: string;
+  iconWorkingDir: string;
+}
+
+export type SidebarProjectTrailingAction =
+  | { kind: "new_worktree"; target: SidebarProjectHostTarget }
+  | { kind: "none" };
+
 export interface SidebarProjectSectionRowModel {
   kind: "project_section";
   chevron: "expand" | "collapse";
-  trailingAction: "new_worktree" | "none";
+  trailingAction: SidebarProjectTrailingAction;
 }
 
 export type SidebarProjectRowModel = SidebarProjectSectionRowModel;
 
+function hostTarget(input: {
+  serverId: string;
+  iconWorkingDir: string;
+}): SidebarProjectHostTarget | null {
+  const iconWorkingDir = input.iconWorkingDir.trim();
+  if (!input.serverId || !iconWorkingDir) {
+    return null;
+  }
+  return { serverId: input.serverId, iconWorkingDir };
+}
+
+export function resolveSidebarProjectIconTarget(
+  project: SidebarProjectEntry,
+): SidebarProjectHostTarget | null {
+  for (const host of project.hosts) {
+    const target = hostTarget(host);
+    if (target) {
+      return target;
+    }
+  }
+  return null;
+}
+
+function resolveNewWorktreeTarget(project: SidebarProjectEntry): SidebarProjectHostTarget | null {
+  for (const host of project.hosts) {
+    if (!host.canCreateWorktree) {
+      continue;
+    }
+    const target = hostTarget(host);
+    if (target) {
+      return target;
+    }
+  }
+  return null;
+}
+
+function projectTrailingAction(project: SidebarProjectEntry): SidebarProjectTrailingAction {
+  const target = resolveNewWorktreeTarget(project);
+  return target ? { kind: "new_worktree", target } : { kind: "none" };
+}
+
 export function buildSidebarProjectRowModel(input: {
   project: SidebarProjectEntry;
   collapsed: boolean;
@@ -15,6 +65,6 @@ export function buildSidebarProjectRowModel(input: {
   return {
     kind: "project_section",
     chevron: input.collapsed ? "expand" : "collapse",
-    trailingAction: input.project.canCreateWorktree ? "new_worktree" : "none",
+    trailingAction: projectTrailingAction(input.project),
   };
 }

packages/app/src/utils/sidebar-shortcuts.test.ts

@@ -24,6 +24,7 @@ function workspace(input: {
     serverId: input.serverId,
     workspaceId: input.workspaceId,
     projectKey: input.projectKey ?? "project-default",
+    projectName: input.projectKey ?? "Project",
     workspaceDirectory: input.workspaceDirectory,
     projectKind: "git",
     workspaceKind: "checkout",
@@ -48,7 +49,13 @@ function project(projectKey: string, workspaces: SidebarWorkspaceEntry[]): Sideb
     projectName: projectKey,
     projectKind: "git",
     iconWorkingDir: workspaces[0]?.workspaceDirectory ?? "",
-    canCreateWorktree: true,
+    hosts: [
+      {
+        serverId: workspaces[0]?.serverId ?? "s1",
+        iconWorkingDir: workspaces[0]?.workspaceDirectory ?? "",
+        canCreateWorktree: true,
+      },
+    ],
     workspaces,
   };
 }
@@ -139,7 +146,10 @@ describe("buildSidebarShortcutModel", () => {
       }),
     ]);
     directoryProject.projectKind = "directory";
-    directoryProject.canCreateWorktree = false;
+    directoryProject.hosts = directoryProject.hosts.map((host) => ({
+      ...host,
+      canCreateWorktree: false,
+    }));
 
     const model = buildSidebarShortcutModel({
       projects: [gitProject, directoryProject],

packages/app/src/utils/sidebar-shortcuts.ts

@@ -1,6 +1,7 @@
 import type {
   SidebarProjectEntry,
-  SidebarWorkspaceEntry,
+  SidebarStatusWorkspacePlacement,
+  SidebarWorkspacePlacement,
 } from "@/hooks/use-sidebar-workspaces-list";
 import { buildStatusGroups } from "@/hooks/sidebar-status-view-model";
 
@@ -14,7 +15,9 @@ export interface SidebarShortcutModel {
   shortcutIndexByWorkspaceKey: Map<string, number>;
 }
 
-function createShortcutTarget(workspace: SidebarWorkspaceEntry): SidebarShortcutWorkspaceTarget {
+function createShortcutTarget(
+  workspace: SidebarWorkspacePlacement,
+): SidebarShortcutWorkspaceTarget {
   return {
     serverId: workspace.serverId,
     workspaceId: workspace.workspaceId,
@@ -50,7 +53,7 @@ export function buildSidebarShortcutModel(input: {
 }
 
 export function buildStatusSidebarShortcutModel(input: {
-  workspaces: SidebarWorkspaceEntry[];
+  workspaces: SidebarStatusWorkspacePlacement[];
   projectNamesByKey: Map<string, string>;
   collapsedStatusGroupKeys?: ReadonlySet<string>;
   shortcutLimit?: number;