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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user