From f57a8753da4cbf563a7dad7c6b0a9fcf0bca4983 Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Sat, 18 Jul 2026 11:56:16 +0100 Subject: [PATCH] fix(ui): cap sidebar child sessions with show-more, drop Subagent prefix in tree (#110604) * fix(ui): cap sidebar child sessions at four with show-more, drop Subagent prefix in tree * test(ui): split child-session cap cases under the max-lines budget --- ui/src/components/app-sidebar-session-list.ts | 33 +++- .../app-sidebar-session-navigation.ts | 12 +- ui/src/components/app-sidebar.test.ts | 1 + ui/src/i18n/locales/en.ts | 1 + ui/src/lib/session-display.test.ts | 28 ++++ ui/src/lib/session-display.ts | 13 +- ui/src/styles/layout.css | 16 ++ .../app-sidebar-cases/child-sessions-cap.ts | 141 ++++++++++++++++++ 8 files changed, 242 insertions(+), 3 deletions(-) create mode 100644 ui/src/test-helpers/app-sidebar-cases/child-sessions-cap.ts diff --git a/ui/src/components/app-sidebar-session-list.ts b/ui/src/components/app-sidebar-session-list.ts index 4ad1a52552a0..e3b2919c8a71 100644 --- a/ui/src/components/app-sidebar-session-list.ts +++ b/ui/src/components/app-sidebar-session-list.ts @@ -27,6 +27,8 @@ import { icons } from "./icons.ts"; import { renderSessionRowBadges } from "./session-row-badges.ts"; import "./elapsed-time.ts"; +const SIDEBAR_VISIBLE_CHILD_SESSION_LIMIT = 4; + /** Session-list presentation and catalog renderer wiring. */ export abstract class AppSidebarSessionListElement extends AppSidebarMenusElement { @state() protected catalogProjectGrouping = loadStoredSidebarCatalogGrouping(); @@ -242,6 +244,22 @@ export abstract class AppSidebarSessionListElement extends AppSidebarMenusElemen private renderSessionTree(session: SidebarRecentSession): TemplateResult { const expanded = this.isSessionChildrenExpanded(session); + const showAllChildren = this.fullyShownChildSessionKeys.has(session.key); + // The cap hides quiet children only: the active branch and any branch with + // live runs (runningChildCount is transitive) must stay visible, or an + // auto-expanded parent would omit its own selection or a running session. + const visibleChildren = showAllChildren + ? session.children + : session.children.filter( + (child, index) => + index < SIDEBAR_VISIBLE_CHILD_SESSION_LIMIT || + child.visuallyActive || + child.containsActiveDescendant || + child.hasActiveRun || + child.status === "running" || + child.runningChildCount > 0, + ); + const hiddenChildCount = session.children.length - visibleChildren.length; return html`
${this.renderRecentSession(session)} ${expanded @@ -249,7 +267,20 @@ export abstract class AppSidebarSessionListElement extends AppSidebarMenusElemen class="sidebar-session-tree__children" aria-label=${t("sessionsView.childSessions")} > - ${session.children.map((child) => this.renderSessionTree(child))} + ${visibleChildren.map((child) => this.renderSessionTree(child))} + ${hiddenChildCount > 0 + ? html`` + : nothing} ${session.loadingChildren && session.children.length === 0 ? html`${t("common.loading")}` : nothing} diff --git a/ui/src/components/app-sidebar-session-navigation.ts b/ui/src/components/app-sidebar-session-navigation.ts index 0374d02d2f43..abdae9f2dbba 100644 --- a/ui/src/components/app-sidebar-session-navigation.ts +++ b/ui/src/components/app-sidebar-session-navigation.ts @@ -53,6 +53,7 @@ export abstract class AppSidebarSessionNavigationElement extends AppSidebarSessi @state() protected selectedSessionKeys: ReadonlySet = new Set(); @state() protected expandedChildSessionKeys: ReadonlySet = new Set(); @state() protected collapsedActiveChildSessionKeys: ReadonlySet = new Set(); + @state() protected fullyShownChildSessionKeys: ReadonlySet = new Set(); @state() protected sessionSortMode: SidebarSessionSortMode = "created"; @state() protected sessionsGrouping: SidebarSessionsGrouping = loadStoredSidebarSessionsGrouping(); @@ -162,7 +163,9 @@ export abstract class AppSidebarSessionNavigationElement extends AppSidebarSessi } return { key: row.key, - label: resolveSessionDisplayName(row.key, row), + label: resolveSessionDisplayName(row.key, row, { + includeSubagentPrefix: !isChild, + }), meta: formatSidebarTimestamp(row.updatedAt), subtitle: resolveSessionWorkSubtitle(row), href: `${pathForRoute("chat", context?.basePath ?? "")}${searchForSession(row.key)}`, @@ -618,8 +621,10 @@ export abstract class AppSidebarSessionNavigationElement extends AppSidebarSessi protected toggleSessionChildren(session: SidebarRecentSession) { const next = new Set(this.expandedChildSessionKeys); const collapsedActive = new Set(this.collapsedActiveChildSessionKeys); + const fullyShown = new Set(this.fullyShownChildSessionKeys); if (this.isSessionChildrenExpanded(session)) { next.delete(session.key); + fullyShown.delete(session.key); if (session.containsActiveDescendant) { collapsedActive.add(session.key); } @@ -643,6 +648,11 @@ export abstract class AppSidebarSessionNavigationElement extends AppSidebarSessi } this.expandedChildSessionKeys = next; this.collapsedActiveChildSessionKeys = collapsedActive; + this.fullyShownChildSessionKeys = fullyShown; + } + + protected showAllSessionChildren(sessionKey: string) { + this.fullyShownChildSessionKeys = new Set(this.fullyShownChildSessionKeys).add(sessionKey); } private projectSessionTree( diff --git a/ui/src/components/app-sidebar.test.ts b/ui/src/components/app-sidebar.test.ts index 29291737c6bb..8583d3d859ec 100644 --- a/ui/src/components/app-sidebar.test.ts +++ b/ui/src/components/app-sidebar.test.ts @@ -8,6 +8,7 @@ import "../test-helpers/app-sidebar-cases/catalog-live-events.ts"; import "../test-helpers/app-sidebar-cases/catalog-live.ts"; import "../test-helpers/app-sidebar-cases/catalog-live-state.ts"; import "../test-helpers/app-sidebar-cases/catalog-pages.ts"; +import "../test-helpers/app-sidebar-cases/child-sessions-cap.ts"; import "../test-helpers/app-sidebar-cases/child-sessions.ts"; import "../test-helpers/app-sidebar-cases/group-mutations.ts"; import "../test-helpers/app-sidebar-cases/interactions.ts"; diff --git a/ui/src/i18n/locales/en.ts b/ui/src/i18n/locales/en.ts index 0c5f2ce47f10..6cc9715ca730 100644 --- a/ui/src/i18n/locales/en.ts +++ b/ui/src/i18n/locales/en.ts @@ -627,6 +627,7 @@ export const en: TranslationMap = { showChildSessions: "Show {count} child sessions for {session}", hideChildSessions: "Hide {count} child sessions for {session}", childSessions: "Child sessions", + showMoreChildren: "Show {count} more", archived: "Archived", pinned: "Pinned", unread: "Unread", diff --git a/ui/src/lib/session-display.test.ts b/ui/src/lib/session-display.test.ts index 34152566f22f..ab6efbda714f 100644 --- a/ui/src/lib/session-display.test.ts +++ b/ui/src/lib/session-display.test.ts @@ -77,6 +77,34 @@ describe("resolveSessionDisplayName", () => { "node-fleet-…8b2e", ); }); + + it("can omit only the subagent prefix while preserving its untitled fallback", () => { + const key = "agent:main:subagent:worker"; + expect(resolveSessionDisplayName(key, { label: "Research sources" })).toBe( + "Subagent: Research sources", + ); + expect( + resolveSessionDisplayName( + key, + { label: "Subagent: Research sources" }, + { + includeSubagentPrefix: false, + }, + ), + ).toBe("Research sources"); + expect(resolveSessionDisplayName(key, undefined, { includeSubagentPrefix: false })).toBe( + "Subagent:", + ); + expect( + resolveSessionDisplayName( + "agent:main:cron:daily", + { label: "Daily" }, + { + includeSubagentPrefix: false, + }, + ), + ).toBe("Cron: Daily"); + }); }); describe("resolveSessionWorkSubtitle", () => { diff --git a/ui/src/lib/session-display.ts b/ui/src/lib/session-display.ts index 4826b2d1b1d1..c58a4c91f879 100644 --- a/ui/src/lib/session-display.ts +++ b/ui/src/lib/session-display.ts @@ -92,6 +92,10 @@ type SessionDisplayRow = { derivedTitle?: string; } & SessionWorktreeDisplayRow; +type SessionDisplayOptions = { + includeSubagentPrefix?: boolean; +}; + function capitalize(s: string): string { return s.charAt(0).toUpperCase() + s.slice(1); } @@ -169,7 +173,11 @@ function parseSessionKey(key: string): SessionKeyInfo { return { prefix: "", fallbackName: key }; } -export function resolveSessionDisplayName(key: string, row?: SessionDisplayRow): string { +export function resolveSessionDisplayName( + key: string, + row?: SessionDisplayRow, + options: SessionDisplayOptions = {}, +): string { const label = normalizeOptionalString(row?.label) ?? ""; const displayName = normalizeOptionalString(row?.displayName) ?? ""; const derivedTitle = normalizeOptionalString(row?.derivedTitle) ?? ""; @@ -180,6 +188,9 @@ export function resolveSessionDisplayName(key: string, row?: SessionDisplayRow): return name; } const prefixPattern = new RegExp(`^${prefix.replace(/[.*+?^${}()|[\\]\\]/g, "\\$&")}\\s*`, "i"); + if (prefix === "Subagent:" && options.includeSubagentPrefix === false) { + return name.replace(prefixPattern, "").trim() || fallbackName; + } return prefixPattern.test(name) ? name : `${prefix} ${name}`; }; diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css index b976dc66f606..996e6cf42cc2 100644 --- a/ui/src/styles/layout.css +++ b/ui/src/styles/layout.css @@ -1505,6 +1505,22 @@ html.openclaw-native-macos font-size: 11px; } +.sidebar-session-tree__show-more { + min-height: 28px; + padding: 6px 8px; + border: 0; + background: transparent; + color: var(--muted); + font-size: 11px; + font-weight: 400; + text-align: left; +} + +.sidebar-session-tree__show-more:hover, +.sidebar-session-tree__show-more:focus-visible { + color: var(--text); +} + .sidebar-recent-sessions__group[data-session-section^="catalog:"] > .sidebar-recent-sessions__list { gap: 8px; } diff --git a/ui/src/test-helpers/app-sidebar-cases/child-sessions-cap.ts b/ui/src/test-helpers/app-sidebar-cases/child-sessions-cap.ts new file mode 100644 index 000000000000..362fb14093d9 --- /dev/null +++ b/ui/src/test-helpers/app-sidebar-cases/child-sessions-cap.ts @@ -0,0 +1,141 @@ +import { describe, expect, it } from "vitest"; +import type { GatewayBrowserClient } from "../../api/gateway.ts"; +import { createGateway, createSessionsHarness, mountSidebar } from "../app-sidebar.ts"; +import { waitForFast } from "../wait-for.ts"; +import "../../components/app-sidebar.ts"; + +describe("AppSidebar child session cap", () => { + it("caps visible children until requested and resets the cap after collapse", async () => { + const gateway = createGateway({} as GatewayBrowserClient); + const childKeys = Array.from( + { length: 6 }, + (_, index) => `agent:main:subagent:child-${index + 1}`, + ); + const harness = createSessionsHarness("main", ["agent:main:parent"]); + harness.list.mockResolvedValue({ + ts: 100_000, + path: "", + count: childKeys.length, + defaults: { modelProvider: null, model: null, contextTokens: null }, + sessions: childKeys.map((key, index) => ({ + key, + spawnedBy: "agent:main:parent", + kind: "direct" as const, + label: `Subagent: Child ${index + 1}`, + updatedAt: index + 1, + })), + }); + const { sidebar } = await mountSidebar(gateway, harness.sessions); + harness.publishList({ + result: { + ts: 2, + path: "", + count: 1, + defaults: { modelProvider: null, model: null, contextTokens: null }, + sessions: [ + { + key: "agent:main:parent", + kind: "direct", + label: "Parent task", + updatedAt: 1, + childSessions: childKeys, + }, + ], + }, + }); + await sidebar.updateComplete; + + const toggle = sidebar.querySelector("[data-child-session-toggle]"); + toggle?.click(); + await waitForFast(() => + expect(sidebar.querySelectorAll(".sidebar-recent-session--child")).toHaveLength(4), + ); + const showMore = sidebar.querySelector("[data-show-more-children]"); + expect(showMore?.textContent?.trim()).toBe("Show 2 more"); + expect(showMore?.getAttribute("aria-label")).toBe("Show 2 more"); + expect(sidebar.textContent).not.toContain("Subagent:"); + + showMore?.click(); + await waitForFast(() => + expect(sidebar.querySelectorAll(".sidebar-recent-session--child")).toHaveLength(6), + ); + expect(sidebar.querySelector("[data-show-more-children]")).toBeNull(); + + toggle?.click(); + await sidebar.updateComplete; + toggle?.click(); + await waitForFast(() => + expect(sidebar.querySelectorAll(".sidebar-recent-session--child")).toHaveLength(4), + ); + expect(sidebar.querySelector("[data-show-more-children]")?.textContent).toContain( + "Show 2 more", + ); + }); + + it("keeps live children visible past the cap", async () => { + const gateway = createGateway({} as GatewayBrowserClient); + const childKeys = Array.from( + { length: 6 }, + (_, index) => `agent:main:subagent:child-${index + 1}`, + ); + const harness = createSessionsHarness("main", ["agent:main:parent"]); + harness.list.mockResolvedValue({ + ts: 100_000, + path: "", + count: childKeys.length, + defaults: { modelProvider: null, model: null, contextTokens: null }, + sessions: [ + ...childKeys.map((key, index) => ({ + key, + spawnedBy: "agent:main:parent", + kind: "direct" as const, + label: `Subagent: Child ${index + 1}`, + updatedAt: index + 1, + })), + // Quiet child beyond the cap with a RUNNING grandchild: the branch + // must bypass the cap via the transitive runningChildCount. + { + key: "agent:main:subagent:grandchild", + spawnedBy: "agent:main:subagent:child-6", + kind: "direct" as const, + label: "Subagent: Grandchild run", + updatedAt: 10, + status: "running" as const, + hasActiveRun: true, + }, + ], + }); + const { sidebar } = await mountSidebar(gateway, harness.sessions); + harness.publishList({ + result: { + ts: 2, + path: "", + count: 1, + defaults: { modelProvider: null, model: null, contextTokens: null }, + sessions: [ + { + key: "agent:main:parent", + kind: "direct", + label: "Parent task", + updatedAt: 1, + childSessions: childKeys, + }, + ], + }, + }); + await sidebar.updateComplete; + + sidebar + .querySelector('[data-child-session-toggle="agent:main:parent"]') + ?.click(); + await waitForFast(() => + expect( + sidebar.querySelector('[data-session-key="agent:main:subagent:child-6"]'), + ).not.toBeNull(), + ); + expect(sidebar.querySelector('[data-session-key="agent:main:subagent:child-5"]')).toBeNull(); + expect(sidebar.querySelector("[data-show-more-children]")?.textContent?.trim()).toBe( + "Show 1 more", + ); + }); +});