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
This commit is contained in:
Mohamed Boudra
2026-06-26 12:16:49 +08:00
committed by GitHub
parent 1109e453bc
commit a49c658d1f
103 changed files with 6856 additions and 2857 deletions
@@ -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,