Release v0.21.0: UX-polish wave (#31 foundation + #24 + #25 + #32)

Token foundation + App.css sweep, header Philosophy rename, inbox
inline-SVG icon + light UX pass, session/transcript page collapse +
metadata header. Pure frontend; 332 backend tests green; build clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

CHANGELOG.md

@@ -23,6 +23,66 @@ skip versions are the composition of each intervening adjacent
 release's steps in order — no A-to-B path is pre-computed beyond
 that.
 
+## 0.21.0 — 2026-05-28
+
+UX-polish wave. Roadmap items #31 (comprehensive UX polish — foundation
+slice), #24 (header "About" → "Philosophy"), #25 (inbox icon + light UX),
+and #32 (session/transcript page polish). Pure frontend; no schema, no
+backend changes, no new secret. Shipped from one driver session (0019.0)
+via three parallel subagents working on disjoint surfaces.
+
+1. **Design-token foundation (#31).** New `frontend/src/styles/tokens.css`
+   establishes the app's first coherent design system — semantic color
+   palette, type scale, spacing scale, radius scale, elevation, and a
+   motion vocabulary (with `prefers-reduced-motion` honored) — as CSS
+   custom properties, imported first in `main.jsx`. Before this the app
+   carried ~98 distinct hardcoded hex colors, font sizes across 16
+   unscaled values, and radii across 13. `App.css` and `index.css` were
+   swept to the tokens (~630 color / 280 font-size / 128 radius
+   references), consolidating near-duplicate grays to the nearest ramp
+   step and rounding off-scale type to the nearest step. No CSS class was
+   renamed or removed; an additive `:focus-visible` ring and a subtle
+   hover/transition layer were added. 35 special-purpose hexes (true
+   blues/violets, status dots, deep diff-contrast shades) were
+   deliberately left as literals. This is the polish *foundation*; a
+   follow-up (#31b) covers the bespoke per-surface re-spacing that wants
+   operator review against screenshots.
+
+2. **Header: "About" → "Philosophy" (#24).** The persistent header link
+   now reads "Philosophy" (the route `/philosophy` and its page already
+   existed; only the label changed).
+
+3. **Inbox icon + light UX (#25).** The header inbox trigger's `📮`
+   emoji is replaced with a dependency-free inline-SVG envelope icon
+   (`aria-label="Inbox"`); no icon library was added. The inbox panel
+   got a light pass — clearer unread/read distinction, mark-all-read and
+   per-row affordances surfaced, better empty state, tokenized spacing in
+   a new component-scoped `Inbox.css`. Behavior, filters, deep-links, and
+   §15 notification data flow are unchanged. A full inbox redesign is
+   deferred to a #25 follow-up (the operator's reference screenshot did
+   not transmit).
+
+4. **Session/transcript page polish (#32).** `/docs/sessions/<NNNN>` no
+   longer dead-ends on a "select a transcript" placeholder: a
+   single-transcript session renders that transcript inline at the
+   session root; a multi-transcript session renders its `.0` driver
+   transcript inline and lists the siblings. Each rendered transcript now
+   carries a metadata header — session title, Started/Ended (parsed from
+   the filename's ISO segments), derived Duration, an optional one-line
+   TL;DR, and a "View source on git.wiggleverse.org" external link to the
+   canonical raw transcript. The TL;DR reads an optional `tldr` string on
+   the per-session `sessions.json` manifest entry and degrades gracefully
+   when absent.
+
+Upgrade steps:
+
+MAY: add a `tldr` string to any per-session entry in
+`wiggleverse/ohm-session-history`'s `sessions.json`
+(e.g. `"0019": { "title": "…", "tldr": "one-line summary" }`) to surface
+a summary in each transcript's metadata header. Absent `tldr` renders
+nothing — no deployment action is required. This is a data edit in the
+session-history repo, not a `flotilla` gesture.
+
 ## 0.20.0 — 2026-05-28
 
 Wave 9 follow-up to roadmap item #30. Three changes bundled into one minor: