Skip to content

Commit d5fe0c5

Browse files
steipetesteipete
authored
feat(ui): multi-select sessions in the sidebar with batch menu actions (#104416)
* feat(ui): multi-select sessions in the sidebar with batch menu actions * chore(i18n): sync locale bundles for sidebar multi-select strings * docs(control-ui): document sidebar session multi-select and batch menu
1 parent 1d84acf commit d5fe0c5

68 files changed

Lines changed: 873 additions & 162 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/web/control-ui.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ local-path sources, updates, and advanced plugin configuration.
156156

157157
## Sidebar navigation
158158

159-
The sidebar pins navigation above a scrollable session list. In multi-agent setups every agent appears as a collapsible top-level section; expanding an agent browses its sessions without navigating away from the open chat, and collapsed agents show an unread indicator. Within an agent the list splits into **Pinned**, one built-in section per connected channel (Telegram, Slack, WhatsApp, ...), a built-in **Work** section for sessions bound to a managed worktree or exec node (rows show a `repo ⎇ branch` line plus the node host), custom groups (the session `category`), and **Chats** for the rest. Channel and Work sections classify rows automatically; assigning a session to a custom group always wins. Opening a session moves the selection highlight without reordering the rows. Sessions with new activity since they were last read show an unread dot, and opening one marks it read. Each session row has a context menu (kebab button or right-click) with Pin/Unpin, Mark as unread/read, Rename, Fork, Move to group (including New group and Remove from group), Archive, and Delete; touch layouts keep the direct pin and menu controls visible. Drag a session onto a custom group or **Chats** to move it. Custom group headers can be collapsed, expanded, or dragged to reorder them; group names and their order live in the gateway (`sessions.groups.*`), so they follow you across browsers, while the collapsed state stays in the browser profile. Group headers also have a menu (kebab button or right-click) with Rename group, New group, and Delete group; renaming or deleting a group updates every member session server-side, including archived ones, and deleting a group keeps its sessions and moves them back to Chats. The single **+** in the session-list header opens the New session page (see below). The sort control also has a Group by toggle: Grouped (default) or None for one flat list (Pinned stays separate); the choice is stored in the current browser profile. **Overview** is the only destination pinned by default; expand **More** to reach every other destination. Select **Edit pinned items** under More, or right-click the navigation area, to pin or unpin destinations and restore the defaults. The pinned set and More expansion state are stored in the current browser profile and survive reloads.
159+
The sidebar pins navigation above a scrollable session list. In multi-agent setups every agent appears as a collapsible top-level section; expanding an agent browses its sessions without navigating away from the open chat, and collapsed agents show an unread indicator. Within an agent the list splits into **Pinned**, one built-in section per connected channel (Telegram, Slack, WhatsApp, ...), a built-in **Work** section for sessions bound to a managed worktree or exec node (rows show a `repo ⎇ branch` line plus the node host), custom groups (the session `category`), and **Chats** for the rest. Channel and Work sections classify rows automatically; assigning a session to a custom group always wins. Opening a session moves the selection highlight without reordering the rows. Sessions with new activity since they were last read show an unread dot, and opening one marks it read. Each session row has a context menu (kebab button or right-click) with Pin/Unpin, Mark as unread/read, Rename, Fork, Move to group (including New group and Remove from group), Archive, and Delete; touch layouts keep the direct pin and menu controls visible. Cmd/Ctrl-click toggles rows into a multi-select and Shift-click extends it across the visible order; opening the menu on a selected row then offers batch actions (Mark N as unread/read, Move N to group, Archive N, Delete N) that apply to every selected session, with a single confirmation for batch delete. Drag a session onto a custom group or **Chats** to move it. Custom group headers can be collapsed, expanded, or dragged to reorder them; group names and their order live in the gateway (`sessions.groups.*`), so they follow you across browsers, while the collapsed state stays in the browser profile. Group headers also have a menu (kebab button or right-click) with Rename group, New group, and Delete group; renaming or deleting a group updates every member session server-side, including archived ones, and deleting a group keeps its sessions and moves them back to Chats. The single **+** in the session-list header opens the New session page (see below). The sort control also has a Group by toggle: Grouped (default) or None for one flat list (Pinned stays separate); the choice is stored in the current browser profile. **Overview** is the only destination pinned by default; expand **More** to reach every other destination. Select **Edit pinned items** under More, or right-click the navigation area, to pin or unpin destinations and restore the defaults. The pinned set and More expansion state are stored in the current browser profile and survive reloads.
160160

161161
## New session page
162162

@@ -301,7 +301,7 @@ The macOS app keeps its native link-browser sidebar for links clicked in the das
301301
- `chat.inject` appends an assistant note to the session transcript and broadcasts a `chat` event for UI-only updates (no agent run, no channel delivery).
302302
- The sidebar lists every loaded active session by agent section and pinned/channel/work/custom/Chats buckets with a single New Session action that opens the draft dialog. Opening a visible row moves only the highlight. Custom groups are collapsible and drag-reorderable, and sessions can be dropped onto a group or Chats; group names and order sync through the gateway while the collapsed state stays in the browser. A new dashboard session asynchronously gets a concise generated title from its first non-command message; explicit names are never replaced. Set `agents.defaults.utilityModel` (or `agents.list[].utilityModel`) to route this separate model call to a lower-cost model. Expanding another agent section browses that agent's sessions without leaving the open chat.
303303
- Session search lives in the command palette (⌘K, or the Search field at the top of the sidebar): typing a query follows a bounded number of matching pages across agents, filters internal child/cron rows, and lists visible matches next to navigation commands. The Sessions page keeps the exhaustive searchable list with filters.
304-
- Each sidebar row keeps direct pin access plus a full context menu for unread state, rename, fork, grouping, archive, and delete. An active run and an agent's main session cannot be archived. Archiving or deleting the currently selected session switches Chat back to that agent's main session.
304+
- Each sidebar row keeps direct pin access plus a full context menu for unread state, rename, fork, grouping, archive, and delete. Multi-selected rows (Cmd/Ctrl-click, Shift-click for ranges) get a batch menu covering unread state, grouping, archive, and delete; batch archive/delete stays disabled unless every selected session is archivable. An active run and an agent's main session cannot be archived. Archiving or deleting the currently selected session switches Chat back to that agent's main session.
305305
- In the macOS app, the OpenClaw mark uses the otherwise-empty native titlebar strip next to the window controls instead of consuming a sidebar row.
306306
- On desktop widths, chat controls stay on one compact row and collapse while scrolling down the transcript; scrolling up, returning to the top, or reaching the bottom restores the controls.
307307
- Consecutive duplicate text-only messages render as one bubble with a count badge. Messages that carry images, attachments, tool output, or canvas previews are left uncollapsed.

‎ui/src/components/app-sidebar.test.ts‎

Lines changed: 162 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ type LobsterPetElement = HTMLElement & {
5151

5252
type TestSessionMenu = HTMLElement & {
5353
forkDisabled: boolean;
54+
selectionCount: number;
5455
readonly updateComplete: Promise<boolean>;
5556
};
5657

@@ -70,6 +71,7 @@ function createGatewayHarness(client: GatewayBrowserClient) {
7071
get snapshot() {
7172
return snapshot;
7273
},
74+
setSessionKey: () => undefined,
7375
subscribe(listener: (next: ApplicationGatewaySnapshot) => void) {
7476
listeners.add(listener);
7577
return () => listeners.delete(listener);
@@ -118,6 +120,10 @@ function createSessionsHarness(agentId: string, keys: string[]) {
118120
let canonicalListRevision = 1;
119121
const listeners = new Set<(next: SessionState) => void>();
120122
const groupsPut = vi.fn(() => Promise.resolve());
123+
const patch = vi.fn(() => Promise.resolve(null));
124+
const deleteMany = vi.fn(() =>
125+
Promise.resolve({ deleted: [] as string[], errors: [], preservedWorktrees: [] }),
126+
);
121127
const sessions = {
122128
get state() {
123129
return state;
@@ -132,20 +138,24 @@ function createSessionsHarness(agentId: string, keys: string[]) {
132138
subscribeCreated: () => () => undefined,
133139
groupsLoad: () => Promise.resolve(),
134140
groupsPut,
141+
patch,
142+
deleteMany,
135143
} as unknown as SessionCapability;
136-
const publish = (patch: Partial<SessionState>) => {
137-
state = { ...state, ...patch };
144+
const publish = (statePatch: Partial<SessionState>) => {
145+
state = { ...state, ...statePatch };
138146
for (const listener of listeners) {
139147
listener(state);
140148
}
141149
};
142150
return {
143151
sessions,
144152
groupsPut,
153+
patch,
154+
deleteMany,
145155
publish,
146-
publishList(patch: Partial<SessionState>) {
156+
publishList(statePatch: Partial<SessionState>) {
147157
canonicalListRevision += 1;
148-
publish(patch);
158+
publish(statePatch);
149159
},
150160
};
151161
}
@@ -433,6 +443,154 @@ function dispatchDragEvent(
433443
target.dispatchEvent(event);
434444
}
435445

446+
describe("AppSidebar multi-select", () => {
447+
const KEYS = ["agent:main:main", "agent:main:a", "agent:main:b", "agent:main:c"];
448+
449+
function rowLink(sidebar: SidebarLifecycleState, key: string): HTMLAnchorElement {
450+
const link = sidebar.querySelector<HTMLAnchorElement>(
451+
`[data-session-key="${key}"] .sidebar-recent-session__link`,
452+
);
453+
if (!link) {
454+
throw new Error(`expected row link for ${key}`);
455+
}
456+
return link;
457+
}
458+
459+
function selectedRowKeys(sidebar: SidebarLifecycleState): string[] {
460+
return Array.from(sidebar.querySelectorAll(".sidebar-recent-session--selected")).map(
461+
(row) => row.getAttribute("data-session-key") ?? "",
462+
);
463+
}
464+
465+
function click(target: Element, init: MouseEventInit = {}) {
466+
target.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true, ...init }));
467+
}
468+
469+
function openContextMenu(sidebar: SidebarLifecycleState, key: string) {
470+
const row = sidebar.querySelector(`[data-session-key="${key}"]`);
471+
if (!row) {
472+
throw new Error(`expected row for ${key}`);
473+
}
474+
row.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true }));
475+
}
476+
477+
async function sessionMenu(sidebar: SidebarLifecycleState): Promise<TestSessionMenu> {
478+
const menu = sidebar.querySelector<TestSessionMenu>("openclaw-session-menu");
479+
if (!menu) {
480+
throw new Error("expected session menu");
481+
}
482+
await menu.updateComplete;
483+
return menu;
484+
}
485+
486+
async function mountMultiSelect() {
487+
const gateway = createGateway({} as GatewayBrowserClient);
488+
const harness = createSessionsHarness("main", KEYS);
489+
const { sidebar } = await mountSidebar(gateway, harness.sessions);
490+
sidebar.connected = true;
491+
await sidebar.updateComplete;
492+
return { sidebar, harness };
493+
}
494+
495+
it("cmd-click toggles rows into the selection and plain click clears it", async () => {
496+
const { sidebar } = await mountMultiSelect();
497+
498+
click(rowLink(sidebar, "agent:main:a"), { metaKey: true });
499+
click(rowLink(sidebar, "agent:main:b"), { metaKey: true });
500+
await sidebar.updateComplete;
501+
expect(selectedRowKeys(sidebar)).toEqual(["agent:main:a", "agent:main:b"]);
502+
503+
click(rowLink(sidebar, "agent:main:b"), { metaKey: true });
504+
await sidebar.updateComplete;
505+
expect(selectedRowKeys(sidebar)).toEqual(["agent:main:a"]);
506+
507+
click(rowLink(sidebar, "agent:main:c"));
508+
await sidebar.updateComplete;
509+
expect(selectedRowKeys(sidebar)).toEqual([]);
510+
});
511+
512+
it("shift-click extends the selection from the anchor across the visible order", async () => {
513+
const { sidebar } = await mountMultiSelect();
514+
515+
click(rowLink(sidebar, "agent:main:a"), { metaKey: true });
516+
click(rowLink(sidebar, "agent:main:c"), { shiftKey: true });
517+
await sidebar.updateComplete;
518+
519+
expect(selectedRowKeys(sidebar)).toEqual(["agent:main:a", "agent:main:b", "agent:main:c"]);
520+
});
521+
522+
it("archives every selected session from the batch menu", async () => {
523+
const { sidebar, harness } = await mountMultiSelect();
524+
525+
click(rowLink(sidebar, "agent:main:a"), { metaKey: true });
526+
click(rowLink(sidebar, "agent:main:b"), { metaKey: true });
527+
await sidebar.updateComplete;
528+
openContextMenu(sidebar, "agent:main:a");
529+
await sidebar.updateComplete;
530+
531+
const menu = await sessionMenu(sidebar);
532+
expect(menu.selectionCount).toBe(2);
533+
// Batch menus drop single-session actions like Rename.
534+
expect(menu.querySelector('[data-shortcut="r"]')).toBeNull();
535+
menu.querySelector<HTMLButtonElement>('[data-shortcut="a"]')?.click();
536+
537+
await vi.waitFor(() => expect(harness.patch).toHaveBeenCalledTimes(2));
538+
expect(harness.patch).toHaveBeenNthCalledWith(
539+
1,
540+
"agent:main:a",
541+
{ archived: true },
542+
{ agentId: "main" },
543+
);
544+
expect(harness.patch).toHaveBeenNthCalledWith(
545+
2,
546+
"agent:main:b",
547+
{ archived: true },
548+
{ agentId: "main" },
549+
);
550+
});
551+
552+
it("deletes the selection in one batch after a single confirm", async () => {
553+
const confirmSpy = vi.spyOn(window, "confirm").mockReturnValue(true);
554+
try {
555+
const { sidebar, harness } = await mountMultiSelect();
556+
557+
click(rowLink(sidebar, "agent:main:a"), { metaKey: true });
558+
click(rowLink(sidebar, "agent:main:b"), { metaKey: true });
559+
await sidebar.updateComplete;
560+
openContextMenu(sidebar, "agent:main:b");
561+
await sidebar.updateComplete;
562+
563+
const menu = await sessionMenu(sidebar);
564+
menu.querySelector<HTMLButtonElement>('[data-shortcut="d"]')?.click();
565+
566+
await vi.waitFor(() => expect(harness.deleteMany).toHaveBeenCalledOnce());
567+
expect(confirmSpy).toHaveBeenCalledOnce();
568+
expect(confirmSpy.mock.calls[0]?.[0]).toContain("2");
569+
expect(harness.deleteMany).toHaveBeenCalledWith([
570+
{ key: "agent:main:a", agentId: "main", deleteTranscript: true },
571+
{ key: "agent:main:b", agentId: "main", deleteTranscript: true },
572+
]);
573+
} finally {
574+
confirmSpy.mockRestore();
575+
}
576+
});
577+
578+
it("retargets the menu to an unselected row and drops the selection", async () => {
579+
const { sidebar } = await mountMultiSelect();
580+
581+
click(rowLink(sidebar, "agent:main:a"), { metaKey: true });
582+
click(rowLink(sidebar, "agent:main:b"), { metaKey: true });
583+
await sidebar.updateComplete;
584+
openContextMenu(sidebar, "agent:main:c");
585+
await sidebar.updateComplete;
586+
587+
expect(selectedRowKeys(sidebar)).toEqual([]);
588+
const menu = await sessionMenu(sidebar);
589+
expect(menu.selectionCount).toBe(1);
590+
expect(menu.querySelector('[data-shortcut="r"]')).not.toBeNull();
591+
});
592+
});
593+
436594
describe("AppSidebar custom group reordering", () => {
437595
async function mountWithGroups(groups: string[]) {
438596
const client = {} as GatewayBrowserClient;

0 commit comments

Comments
 (0)