From 3c5f89449e0edb6959008c17376edf9ec02236fc Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Sun, 9 Aug 2026 22:25:26 -0700 Subject: [PATCH] fix(ui): restore sidebar and Appearance accessibility (#121360) * fix(ui): restore sidebar accessibility Amp-Thread-ID: https://ampcode.com/threads/T-019fe94c-c697-71e9-982f-c164bb98bb6c * refactor(ui): own sidebar list semantics at hierarchy boundaries Amp-Thread-ID: https://ampcode.com/threads/T-019fe94c-c697-71e9-982f-c164bb98bb6c * test(ui): keep sidebar cases within lint limits Amp-Thread-ID: https://ampcode.com/threads/T-019fe94c-c697-71e9-982f-c164bb98bb6c * test(ui): assert session tree list ownership Amp-Thread-ID: https://ampcode.com/threads/T-019fe94c-c697-71e9-982f-c164bb98bb6c * chore: refresh control UI CI Amp-Thread-ID: https://ampcode.com/threads/T-019fe94c-c697-71e9-982f-c164bb98bb6c --------- Co-authored-by: Amp --- .../app-sidebar-session-catalog-render.ts | 61 ++++++++++++------- .../app-sidebar-session-list-render.ts | 5 +- .../app-sidebar-session-row-render.ts | 40 ++++++++---- ui/src/components/app-sidebar.ts | 3 +- ...t-flow.navigation-presentation.e2e.test.ts | 6 +- ui/src/e2e/codex-sessions.e2e.test.ts | 33 ++++++++++ .../config/view-appearance-preferences.ts | 1 + ui/src/pages/config/view.browser.test.ts | 8 +++ ui/src/styles/layout.css | 32 ++++------ ui/src/styles/theme-contrast.test.ts | 31 +++++++++- .../catalog-project-activity.ts | 30 ++++++++- .../app-sidebar-cases/child-sessions.ts | 41 +++---------- .../session-list-sections.ts | 50 ++++++++++++++- .../app-sidebar-cases/sessions.ts | 24 ++++---- .../app-sidebar-cases/sidebar-zone.ts | 5 ++ 15 files changed, 264 insertions(+), 106 deletions(-) diff --git a/ui/src/components/app-sidebar-session-catalog-render.ts b/ui/src/components/app-sidebar-session-catalog-render.ts index a5e8183da95e..5fe671599ab1 100644 --- a/ui/src/components/app-sidebar-session-catalog-render.ts +++ b/ui/src/components/app-sidebar-session-catalog-render.ts @@ -328,27 +328,42 @@ function renderCatalogHostGroup( const sectionId = `catalog-project:${catalog.id}:${host.hostId}:${group.key}`; const collapsed = params.collapsedSections.has(sectionId); return html` - - ${collapsed - ? nothing - : group.sessions.map((session) => - renderCatalogSessionRow(catalog, host, session, liveRowsByKey, params, true), - )} + + ${group.label} + + + ${collapsed + ? nothing + : html`
+ ${group.sessions.map((session) => + renderCatalogSessionRow( + catalog, + host, + session, + liveRowsByKey, + params, + true, + ), + )} +
`} + `; })} ${projectGroups.ungrouped.map((session) => @@ -464,7 +479,11 @@ function renderCatalogSessionRow( ${running - ? html`${renderSessionRunSpinner(false)}` : nothing} diff --git a/ui/src/components/app-sidebar-session-list-render.ts b/ui/src/components/app-sidebar-session-list-render.ts index fd96c5962b4a..9d3cb02d48c5 100644 --- a/ui/src/components/app-sidebar-session-list-render.ts +++ b/ui/src/components/app-sidebar-session-list-render.ts @@ -1,7 +1,6 @@ import { html, nothing } from "lit"; import type { SessionCatalog } from "../../../packages/gateway-protocol/src/index.ts"; import type { GatewaySessionRow } from "../api/types.ts"; -import { titleForRoute } from "../app-navigation.ts"; import type { CatalogOpenTarget } from "../app/settings.ts"; import { t } from "../i18n/index.ts"; import type { CatalogProjectGrouping } from "../lib/sessions/catalog-project-grouping.ts"; @@ -248,7 +247,7 @@ function renderSessionSection(params: { function renderDraftSessionRow() { return html` -
+
@@ -484,7 +483,7 @@ export function renderSessionList(params: {
` : nothing} -
+
${renderSessionListBody({ host, sections: params.sections, diff --git a/ui/src/components/app-sidebar-session-row-render.ts b/ui/src/components/app-sidebar-session-row-render.ts index 9b9f0df29fe0..e1ff3babf4dd 100644 --- a/ui/src/components/app-sidebar-session-row-render.ts +++ b/ui/src/components/app-sidebar-session-row-render.ts @@ -1,4 +1,5 @@ import { html, nothing, type TemplateResult } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; import { keyed } from "lit/directives/keyed.js"; import type { SessionObserverDigest } from "../../../packages/gateway-protocol/src/schema/sessions.js"; import type { NavigationRouteId } from "../app-navigation.ts"; @@ -156,8 +157,9 @@ export function renderRecentSession(params: { host: SessionListHost; session: SidebarRecentSession; display?: CatalogBackingSessionDisplay; + listItem?: boolean; }) { - const { host, session, display } = params; + const { host, session, display, listItem = true } = params; const pinAccess = host.readSessionMutationAccess({ method: "sessions.patch", params: { key: session.key, pinned: !session.pinned }, @@ -239,7 +241,7 @@ export function renderRecentSession(params: {
${trailingIndicator === nothing ? nothing - : html`${trailingIndicator}`} ${hasTrail @@ -415,22 +421,34 @@ export function renderRecentSession(params: { export function renderSessionTree(params: { host: SessionListHost; session: SidebarRecentSession; + listItem?: boolean; }): TemplateResult { - const { host, session } = params; + const { host, session, listItem = true } = params; const expanded = host.isSessionChildrenExpanded(session); const visibleChildren = visibleSessionChildren({ session, fullyShownChildSessionKeys: host.fullyShownChildSessionKeys, }); const hiddenChildCount = session.children.length - visibleChildren.length; - return html`
- ${renderRecentSession({ host, session })} + return html`
+ ${renderRecentSession({ host, session, listItem: false })} ${expanded - ? html`
- ${visibleChildren.map((child) => renderSessionTree({ host, session: child }))} + ? html`
+ ${visibleChildren.length > 0 + ? html`
+ ${visibleChildren.map((child) => + renderSessionTree({ host, session: child, listItem }), + )} +
` + : nothing} ${hiddenChildCount > 0 ? html`