web-ui: port the Beautiful UI primitives into the chat surface

[time-attack]

Summary

Ports the Beautiful UI component library (https://www.beautifului.dev/, "crafted primitives for AI-native interfaces") into the web UI, everything except the reference's sidebar. The sidebar keeps its structure and only picks up the shared tokens.

Foundation. shell.css now defines the Beautiful UI palette (page / canvas / surface / inset / ink / line / field, blue / green / orange / red with tint and ink variants, tooltip colours), the 6 / 8 / 10 / 14 px radius scale, the strong ease, and the shared keyframes (pixel-on, shimmer-text, fade-up, fade-in, pop-in, spin). The existing shadcn tokens (--background, --card, --border, --muted-foreground, --sidebar, …) are mapped onto it, so every surface recolours consistently in light and dark. Inter and JetBrains Mono (latin subsets, OFL notice alongside) are hashed through Vite from src/fonts. Net-new component CSS lives in src/styles/*.css, each imported from shell.css and scanned by the same css-vars guardrail (no undefined vars, no new shadows). Imported custom themes emit the same tokens so nothing bleeds through.

Primitives mapped onto existing surfaces.

Reference	Where it landed
01 Loading State	pixelLoader() (3×3 pixel grid) replaces the wave loader on the chat surface; shimmer label; live elapsed time on the working status
02 Thinking	workBlock / thinkingRow unified: sparkle + label + chevron, vertical guide line, grid-rows expansion
03 Streaming Text	word fade on the streaming tail; .message-meta becomes the 24 px action row
04 Approval Card	composer approval panel is the card with a ‹ 1/N › pager and ghost / primary pills; the transcript marker is the compact version
05 Tool Chips	tool rows render label + mono detail chip with status tints; payload cards on inset
06 Task Rows	settled work folds render as capsules with completed / stopped / failed / running glyph, tool count, status pill
07 Chat	user bubble, assistant typography, tab-strip session header with 28 px icon buttons and count badges, headline empty state
08 Prompt Bar	single-row composer: "+" attach, ghost pills for model / harness / effort / fast, circular send / stop; popover rows
09 Recommendation Card	connector widget and the runtime-upgrade notice become the card (title, body with entity chip, state pill, primary / ghost pills)
10 Context Cards	pasted-text attachments render as context cards ("N characters", 2-line snippet); files as typed source chips
12 Records Table	markdown tables render as the records grid: sticky header, row numbers, hairline dividers, alignment honoured
13 Filter Table	.resource-tabs are status chips with dots; every list page is a hairline table with tinted status pills
15 Search	⌘K palette restyled (rows, group headers, blue <mark>, kbd chips, shimmer loading)
18 Code Block	header with </> glyph + language + Copy, line-number gutter, diff fences tinted, exec output card
19 Fine-tune Card	settings page becomes inspector cards with segmented controls and the select row
20 Selection Actions	new: select text in a message → floating toolbar (Quote / Explain / Ask / Copy) that inserts into the composer, never auto-submits

Not ported, and why. 11 Diff Table (no tool result carries row-level add/remove semantics), 14 Sidebar Nav (excluded by request), 16 Flowchart (no workflow-builder surface), 17 Insight Cards (no usage or KPI data reaches the web UI), 21 Agent Screen (no screen stream). Loader variants (Dots / Orbit / Surfer), the Pill composer variant, the Task Rows "List" variant, dictation, inline source chips and follow-ups have no counterpart or data in QM.

Review. Three independent lens reviews (control flow and integration; CSS, accessibility and responsive; security and simplification) plus the eight-angle /code-review pipeline ran on the merged diff. Everything confirmed was fixed in the last six commits: no auto-submit from the selection toolbar (it also survives Escape and auto-scroll and resolves read-only from state), the approval pager resets per conversation, the elapsed counter is aria-hidden, expanded folds no longer clip on narrow widths, the chat column fits a phone, phone and reduced-motion overrides moved after the rules they override, fonts honour WEB_UI_BASE, --ink-3 and the status pills meet AA, segmentStatus distinguishes stopped from completed, the code gutter is bounded per frame and refreshes stale diff marks, the shared sanitizer forbids background / bgcolor, and the new jsdom tests share one harness.

Test expectations changed

• keychain-flow.test.ts: .kc-loading .spinner → asserts the pixel loader is rendered.
• work-duration-reconciliation.test.ts: import pin widened for elapsedLabel / workStartedAt.
• work-fold-source.test.ts: .work-divider → .work-rows { border-left … } (horizontal divider replaced by the vertical guide).
• pane-composer-source.test.ts: autosize floor pin updated; pane control size 34 → 28 px.
• paste-text.test.ts: pasteChipLabel test removed with the function.
• css-vars.test.ts now also scans src/styles/*.css.

New tests: pixel-loader, approval-pager, tool-chips, context-card-attachments, connector-widget, markdown-tables, session-topbar, search-palette-source, timeline (segment status), text-code (gutter / diff / streaming), settings-page (inspector cards), list-page (filter chips), selection-actions, shared test/dom-harness.ts.

Verification

• plugins/web-ui: typecheck, full suite (986 tests), build with the default and a custom WEB_UI_BASE; root lint, lint:ox, lint:knip, format:check.
• Live in a browser-only dev-instance with a seeded conversation covering a tool call, a markdown table, TypeScript and diff fences, a pending approval, the ⌘K palette, list pages and settings, in light and dark and at 390 px.

Screenshots

Before: the previous README hero (docs/screenshots/web-ui-hero.png on main).

After (rendered against the dev instance; full set on the demo/beautiful-ui-screenshots branch):

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}