From 4e22cee05685f2f196b3b1eb855ddfe667a1c297 Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Mon, 10 Aug 2026 20:09:52 -0700 Subject: [PATCH] perf(ui): format sidebar timestamps on demand (#121819) Amp-Thread-ID: https://ampcode.com/threads/T-019fe957-0e49-707f-859f-9600ef536125 Co-authored-by: Amp --- .../app-sidebar-session-narration.test.ts | 2 +- .../app-sidebar-session-navigation-logic.ts | 2 -- .../components/app-sidebar-session-row-render.ts | 14 +++++--------- ui/src/components/app-sidebar-session-types.ts | 1 - ui/src/components/app-sidebar.ts | 8 ++------ ui/src/components/sidebar-menus-render.ts | 3 ++- 6 files changed, 10 insertions(+), 20 deletions(-) diff --git a/ui/src/components/app-sidebar-session-narration.test.ts b/ui/src/components/app-sidebar-session-narration.test.ts index 6ce4c3680dbe..19c9458ad0e0 100644 --- a/ui/src/components/app-sidebar-session-narration.test.ts +++ b/ui/src/components/app-sidebar-session-narration.test.ts @@ -14,7 +14,7 @@ function runningRow(key: string): SidebarRecentSession { return { key, label: "Run", - meta: "now", + updatedAt: Date.now(), href: "#", active: false, visuallyActive: false, diff --git a/ui/src/components/app-sidebar-session-navigation-logic.ts b/ui/src/components/app-sidebar-session-navigation-logic.ts index 973949ff1b08..7117a51e1dfd 100644 --- a/ui/src/components/app-sidebar-session-navigation-logic.ts +++ b/ui/src/components/app-sidebar-session-navigation-logic.ts @@ -36,7 +36,6 @@ import { } from "../lib/sessions/session-key.ts"; import { reconcileSidebarZone } from "../lib/sidebar-zone.ts"; import { normalizeOptionalString } from "../lib/string-coerce.ts"; -import { formatSidebarTimestamp } from "./app-sidebar-session-catalogs.ts"; import { limitSidebarSessionRows, SIDEBAR_SESSION_NO_ATTENTION, @@ -161,7 +160,6 @@ export function buildSidebarSessionNavigationState(input: { // The sidebar's zone structure already says what forked from what; // a "Subagent:" prefix on named threads is noise (other surfaces keep it). label: resolveSessionDisplayName(row.key, row, { includeSubagentPrefix: false }), - meta: formatSidebarTimestamp(row.updatedAt), subtitle: resolveSessionWorkSubtitle(row), href: sessionNavigationTarget({ face: resolveSessionPreferredFace(row), diff --git a/ui/src/components/app-sidebar-session-row-render.ts b/ui/src/components/app-sidebar-session-row-render.ts index 0f0d3aeb38f9..2c0c123bf483 100644 --- a/ui/src/components/app-sidebar-session-row-render.ts +++ b/ui/src/components/app-sidebar-session-row-render.ts @@ -18,6 +18,7 @@ import type { CatalogBackingSessionDisplay, CatalogSessionMenuRequest, } from "./app-sidebar-session-catalogs.ts"; +import { formatSidebarTimestamp } from "./app-sidebar-session-catalogs.ts"; import { rowDemandsVisibility, sidebarSessionMetaId, @@ -106,11 +107,7 @@ export interface SessionListHost { handleSessionRowClick(event: MouseEvent, session: SidebarRecentSession): void; toggleSessionChildren(session: SidebarRecentSession): void; toggleSessionPin(session: SidebarRecentSession): void; - toggleSessionMenu( - session: SidebarRecentSession, - menuSession: SidebarRecentSession, - trigger: HTMLElement, - ): void; + toggleSessionMenu(session: SidebarRecentSession, trigger: HTMLElement): void; showMoreChildren(sessionKey: string): void; sectionDragOver(event: DragEvent, sectionId: string, group?: string): void; sectionDragLeave(event: DragEvent, sectionId: string, group?: string): void; @@ -192,19 +189,18 @@ export function renderRecentSession(params: { const trailingDescription = session.isChild ? "" : describeSessionTrailingState(session, pullRequestState); - const meta = display?.meta ?? session.meta; + const meta = display?.meta ?? formatSidebarTimestamp(session.updatedAt); const rowMeta = session.pinned ? "" : meta; const hasTrail = session.isChild && (session.runtimeMs != null || session.startedAt != null); const metaId = hasTrail ? sidebarSessionMetaId(session.key) : undefined; const stateId = trailingIndicator === nothing ? undefined : sidebarSessionStateId(session.key); - const menuSession = display ? { ...session, meta } : session; const openMenuFromEvent = session.isChild ? undefined : (event: MouseEvent | KeyboardEvent) => handleContextMenuEvent( event, (event.currentTarget as HTMLElement).querySelector("[data-session-menu]"), - (trigger, x, y) => host.sidebarMenus.openSessionMenu(menuSession, x, y, trigger), + (trigger, x, y) => host.sidebarMenus.openSessionMenu(session, x, y, trigger), ); const title = [ display?.title ?? [label, narration, rowMeta].filter(Boolean).join(" ยท "), @@ -405,7 +401,7 @@ export function renderRecentSession(params: { @click=${(event: MouseEvent) => { event.stopPropagation(); const trigger = event.currentTarget as HTMLElement; - host.toggleSessionMenu(session, menuSession, trigger); + host.toggleSessionMenu(session, trigger); }} > ${icons.moreHorizontal} diff --git a/ui/src/components/app-sidebar-session-types.ts b/ui/src/components/app-sidebar-session-types.ts index 43a50ea1cd26..310fcd117df8 100644 --- a/ui/src/components/app-sidebar-session-types.ts +++ b/ui/src/components/app-sidebar-session-types.ts @@ -59,7 +59,6 @@ export type SidebarRecentSession = { createdActor?: SessionCreatedActor; archivedBy?: SessionCreatedActor; label: string; - meta: string; /** Compact repo/branch/node line for work sessions. */ subtitle?: string; href: string; diff --git a/ui/src/components/app-sidebar.ts b/ui/src/components/app-sidebar.ts index 6b4e2dd468fe..9be72be28caf 100644 --- a/ui/src/components/app-sidebar.ts +++ b/ui/src/components/app-sidebar.ts @@ -300,17 +300,13 @@ class AppSidebar extends AppSidebarSessionNavigationElement implements SessionLi void this.sessionOrganizer.patchSession(session, { pinned: !session.pinned }); } - toggleSessionMenu( - session: SidebarRecentSession, - menuSession: SidebarRecentSession, - trigger: HTMLElement, - ): void { + toggleSessionMenu(session: SidebarRecentSession, trigger: HTMLElement): void { if (this.sidebarMenus.sessionMenu?.session.key === session.key) { this.sidebarMenus.closeSessionMenu(); return; } const rect = trigger.getBoundingClientRect(); - this.sidebarMenus.openSessionMenu(menuSession, rect.right, rect.bottom + 4, trigger); + this.sidebarMenus.openSessionMenu(session, rect.right, rect.bottom + 4, trigger); } startSidebarSectionDrag(sectionId: string): void { diff --git a/ui/src/components/sidebar-menus-render.ts b/ui/src/components/sidebar-menus-render.ts index f5779031f67f..a20afa4201d9 100644 --- a/ui/src/components/sidebar-menus-render.ts +++ b/ui/src/components/sidebar-menus-render.ts @@ -15,6 +15,7 @@ import { } from "../lib/sessions/session-key.ts"; import { renderSidebarAgentMenu, renderSidebarIdentityMenu } from "./app-sidebar-agent-menu.ts"; import { renderSidebarCustomizeMenu, renderSidebarMoreMenu } from "./app-sidebar-nav-menus.ts"; +import { formatSidebarTimestamp } from "./app-sidebar-session-catalogs.ts"; import { renderSidebarCatalogViewMenu, renderSidebarSessionGroupMenu, @@ -180,7 +181,7 @@ export function renderSidebarSessionMenuForController(controller: SidebarMenusCo category: batchRows ? sharedCategory : (session.category ?? null), }} .selectionCount=${rows.length} - .lastActive=${batchRows ? "" : session.meta} + .lastActive=${batchRows ? "" : formatSidebarTimestamp(session.updatedAt)} .anchor=${menu} .trigger=${controller.sessionMenuTrigger} .disabled=${!host.connected}