Restyle four UI surfaces onto one visual system

[TsekaLuk]

Why

Four surfaces had each drifted into their own dialect: four competing row containers in Settings alone, two nav rails sharing no tokens, two different loading skeletons for the same card grid, and radii, type steps and muted fills invented file by file. This lands one contract — spacing rhythm, radii, type scale, button hierarchy — and moves Settings, the release-notes dialog, project home and the project directory onto it.

Layout and visuals only. No data flow, hook, state shape or handler changed.

Two bugs found by rendering, not by reading

• The project-directory header was broken at ≥1100px. order-last w-full max-w-xl does not wrap: per Flexbox §9.3 the flex base size is clamped by max-width, so it fitted on line one and the description rendered beside the title — running under the brandmark and squeezing the primary action between them. Fixed by moving the measure cap to an inner span so basis-full can actually break the line. Verified by measuring element positions at 1440px and 1024px.
• A duplicate nested landmark. Adding a section header to Updates wrapped a region named "Updates" inside one named "Updates and support" — landmark noise for screen readers, and an ambiguous getByRole('region', {name:'Updates'}). The wrapper is a plain div now; its two children were already the landmarks.

A first-run picker was built and then deleted

An "areas of work" onboarding modal was built in this branch and removed again in c46416c. Writing down the trade killed it: the six areas it asks about are the six composer presets, which already sit as an always-visible chip row above the home composer. The only honest use for a stored selection is reordering those six chips — and the modal blocks first launch to collect it, before the user has the context to answer.

The pattern works where it was copied from because those areas route to genuinely different agent workflows. Ours are six prompt prefixes on one composer. The layout transfers; the interaction does not. The full implementation, tests included, is recoverable from 10e55aa.

Security

js/xss-through-dom on the attachment thumbnail is fixed rather than dismissed (e3c265d). The alert is pre-existing — the same one is open against main, and the security-relevant code was byte-identical; CodeQL attributed it here because a neighbouring className changed. startsWith("image/") also matches image/svg+xml, and an SVG behind an object URL is a document that can carry external references. Not a live hole (<img> does not run scripts in SVG), but the preview never needed anything wider than raster, so it now takes an allowlist. This clears the standing alert on main too.

Verification

pnpm lint · tsc --noEmit -p tsconfig.app.json · 463 vitest suites · 136 Playwright visual tests · pnpm build — all pass. Behaviour parity with main was checked mechanically, not by eye: declarations, hook-call histogram, every onClick/onChange/onSelect/onSubmit/onKeyDown, and the values of all 21 aria-labels. Visual baselines regenerated only for widths that intentionally changed.

Deliberately left alone

ModelSlot / ProviderForm / ProviderDirectory still carry pre-existing contract violations and need their own pass. Error states have no shared pattern across surfaces. The amber warning literals have no achromatic token to move to.

🤖 Generated with Claude Code