UX review · P3 G1, Paper chrome on the shared lite-board components¶

Board review of autopilot/P3-G1, base 8bae292, 2026-10-30. The step is P2 §10.1 G1, with Thomas's answer (b) to inbox #72 (follow-up FU-P3-02): search, notifications and the avatar are shown as disabled placeholders. It changes LiteTopbar, LiteSidebar and MLiteTopbar in design/ui-canvas/; MLiteTabbar already was the Paper bottom tab bar and is unchanged.

Reviewers. Two passes:

a self-check against the ux-reviewer brief (.claude/agents/ux-reviewer.md), run by the worker session, which had no tool to start a sub-agent (findings UX-G1-01 to -05);
an independent ux-reviewer run started by the coordinator on 19547e7 (findings UX-G1-06 to -11).

Round	Head	Reviewer	Verdict
self	the restyle, before its fixes	worker, `ux-reviewer` brief	changes (0 blockers, 1 major, 1 minor), fixed in `19547e7`
1	`19547e7`	`ux-reviewer`, independent	changes (0 blockers, 2 majors, 4 minors)
2	`135f2d2`	`ux-reviewer`, independent	approve (0 blockers, 0 majors, 2 new minors); UX-G1-06, -07, -08, -10, -11 resolved; UX-G1-09 deferred

What was rendered and looked at. The 19 desktop Lite* boards that import the components at 1440 × 1180, the 11 MLite* boards at 390 × 844, LiteRunTasks at 1024 × 800 (narrow desktop), the four components alone, and a scratch board with LiteSidebar collapsed (deleted after the render). No overlap, clipping or shift of page bodies was seen.

Findings¶

UX-G1-01 · major · Removing the top bar's global link colour recoloured links on every board¶

Where: LiteTopbar.dc.html, <helmet> style a{color:#4D5065}.
Evidence: after the first restyle, LiteRunDetail showed "All tasks →" and "All logs…" in the browser's link purple; they were dark grey before. Helmet styles are global to the board, so the rule in the top bar styled the links of the page body.
Fix: the rule is back in the top bar's helmet. Moving it to the boards that rely on it belongs to G3a / G3b, which restyle the page bodies.
Status: applied in 19547e7, before round 1.

UX-G1-02 · minor · The search placeholder text was below 4.5:1¶

Where: LiteTopbar.dc.html, the disabled search button.
Evidence: #6E7287 on #F7F7FB is 4.45:1. WCAG exempts disabled controls, but #72 (b) asks for placeholders that stay readable.
Fix: the label text is #4D5065 (7.4:1); only the icons are dimmed.
Status: applied in 19547e7, before round 1.

UX-G1-03 · minor · On the phone, the disabled placeholders are icons with no visible "not in 0.0.1"¶

Where: MLiteTopbar.dc.html, search, notifications and account.
Evidence: their names say "(not in 0.0.1)", and they are dimmed and show a not-allowed cursor, but a sighted phone user sees no words. The desktop search shows "Search (not in 0.0.1)".
Proposal: keep for 0.0.1 (no room at 390 px); G4 may show a one-line note the first time the shell loads, or drop the phone placeholders if Thomas prefers.
Status: open.

Where: LiteSidebar.dc.html, prop collapsed.
Evidence: the fold control is a <button aria-expanded aria-controls="lite-nav-items">; folded, the rail is 88 px of icons at the self-check (92 px since UX-G1-08) and the labels stay in the accessibility tree (.sp-sr). Boards are static, so the button does not fold the rail on the canvas; G4 (test("sidebar folds with a button[aria-expanded]")) makes it work.
Status: open, for G4.

UX-G1-05 · minor · The theme toggle has no dark palette behind it¶

Where: LiteTopbar.dc.html, MLiteTopbar.dc.html: <button role="switch" aria-checked="false" aria-label="Dark theme">.
Evidence: the lite boards have light colours only. The control is right (a switch with a name, 40 px on desktop, 44 px on the phone), but nothing shows its "on" state.
Status: open, for G4 (theme.ts, light and dark).

UX-G1-06 · major · Breadcrumbs overlap between 768 and 1199 px¶

Where: LiteTopbar.dc.html, e.g. LiteTaskFilesStates at 800 and 900 px ("Runsrnaseq-202T").
Fix: the crumbs no longer shrink, except the last, which ellipsizes (display:block; min-width:0). Below 1000 px, the crumbs between Runs and the last one fold into "…" (.tb-mid, .tb-gap; the Runs link stays). The search box becomes a 40 px icon-only <button disabled aria-label="Search (not in 0.0.1)">.
Checked: LiteTaskFilesStates, LiteResults and LiteRuns at 768, 900 and 1024 px, and all 19 desktop boards again at 1440 px.
Status: applied (round 2).

UX-G1-07 · major · The phone top row overflows below about 377 px¶

Where: MLiteTopbar.dc.html. At 320 px the theme switch was half off-screen (WCAG 1.4.10).
Fix: below 390 px, the disabled Search and Notifications placeholders are hidden. At 390 px and wider they stay, 40 px wide, per #72 (b). The theme switch and the account keep 44 × 44 (ui-spec §4.11). The login1 chip can shrink, with an ellipsis.
Checked: the component alone at 320, 360 and 390 px, and all 11 phone boards at 390 px. The phone boards are fixed 390 px frames, so at 320 px the frame itself is cropped. That crop comes from the boards, not the top bar.
Status: applied (round 2).

UX-G1-08 · minor · The folded rail showed server status by colour only, at 88 px¶

Where: LiteSidebar.dc.html.
Fix: the status glyph is now a check mark in the open and folded states. Folded, the rail shows "✓ on", with the full status kept as visually hidden text. The rail is 92 px wide (ui-spec §2).
Status: applied (round 2).

UX-G1-09 · minor · ui-spec §2 lacks a dated 0.0.1 note on the lite shell¶

Where: ui-spec §2 (spec, not edited in a board step).
Proposal: add a dated note saying:
- search, notifications and the avatar are disabled placeholders in 0.0.1 (#72 b);
- on the phone, the theme switch sits in the top bar, because lite has no More sheet;
- the theme is light or dark only;
- the 2026-10-28 phone note (ui-spec §2, "On the phone the logo and the login node take a first row") also changes: the first row now holds the search, notifications and account placeholders and the theme switch too.
Status: deferred to the next /apply-findings.

UX-G1-10 · minor · The logo link carried `aria-label="Spectio home"`¶

Where: LiteTopbar.dc.html, MLiteTopbar.dc.html.
Evidence: the ui-spec note of 2026-10-28 names the link "Spectio": the emblem is decorative and the wordmark text gives the name.
Fix: aria-label removed. The link's name is the wordmark "Spectio".
Status: applied (round 2).

UX-G1-11 · minor · An unmapped crumb fell back to a Home link¶

Where: LiteTopbar.dc.html, renderVals.
Fix: a crumb that is not last and has no board is plain text. Aligning the boards' crumbs props (in-page tabs do not belong in crumbs) is left to G3a.
Status: applied (round 2).

UX-G1-12 · minor · Below 1000 px the folded crumbs cannot be reached¶

Where: LiteTopbar.dc.html: the middle crumbs get display:none; the "…" is an aria-hidden span, so the link back to the run is gone for every user and a screen reader hears "Home, Runs, Tasks".
Fix: under 1000 px fold "Runs" instead and keep the run-name link, or make "…" a <button aria-expanded> that opens the hidden links.
Status: handed to G3a, which aligns the boards' crumbs props (UX-G1-11).

UX-G1-13 · minor · Phone Search and Notifications placeholders are 40 px wide at 390 px¶

Where: MLiteTopbar.dc.html, .mk-narrow-hide{width:40px} overrides the 44 px of .mk (ui-spec §4.11, 44 × 44 hit areas in the shared top bar). Disabled today, so nothing is tapped.
Fix: 44 px back, row gap 4 → 2 px; re-render at 390 px.
Status: handed to G3a.

Checks against the keyboard rules (CLAUDE.md, ui-spec §4.11)¶

Every control is a native <a> or <button>: home link, breadcrumb links, theme switch, fold button, sidebar links, tab-bar links.
The three placeholders are <button disabled> with a name: never in the tab order, never acting, still read by a screen reader.
Breadcrumbs: <nav aria-label="Breadcrumb"><ol>, the current page aria-current="page", separators aria-hidden.
Nothing relies on title= or hover; the Runs link reads "Runs, 6 active runs" through a visually hidden label instead of aria-label on a <span>.
Focus rings: outline: 2px solid #7750D4 on every interactive class.