feat(web): ui kit and task conversation refresh

CHANGELOG.md

@@ -7,15 +7,31 @@ Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Versioning: [S
 
 ### Added
 
-- **The pilot grid is now the default workspace shell**, with the previous interface reachable behind a toggle and a mobile layout below 760px.
+- **One visual system for the whole web UI, ported from the Codesema UI Kit** (`packages/web/design/ui-kit.html`): 13 colour tokens, a single self-hosted monospace font (Cascadia Mono, 42 KB subset), 14px/1.6 text on a `1ch` × line grid, 1px borders with no radius and no shadow, and shared component classes (`packages/web/src/styles/{tokens,base,kit}.css`).
+- **Nine switchable palettes and an AAA contrast variant** (Tokyo Night by default, plus Nord, Gruvbox Dark, Catppuccin Mocha, Bauhaus, Aamis, Aetheria, Arc Blueberry, Artzen), chosen from the repo settings page and remembered per browser, applied before the first paint.
+- **The theme picker lives at the bottom of the navigation rail**, above the repo settings entry.
 - **Decision D17: a turn's visual proof of its own effect is now part of the review.** A `microvm` task can declare and capture a screenshot or a Playwright journey each turn (`proof` in `.codesema/config.json`, a `PROOF: <none|screenshot|journey>` line in the agent's reply); the reviewer checks the declaration against the diff and raises a finding only on an unproven visible change or an unexplained failed proof.
 - **`codesema runbook validate`** validates a hand-edited `.codesema/runbook.json` as-is, without asking an agent for a new proposal.
 - **The runbook can declare background services**, started in the verification VM ahead of its healthchecks and tests.
 - **A task now carries its own activity**: the phase a turn is currently in is broadcast live and shown on its card and in the evidence block.
 - **A turn now emits its recap the moment it ends, and a finished task without one gets it computed on read**, with the microvm verification surfaced alongside it.
 
+### Removed
+
+- **The pilot grid shell** (tiled agent cards, lanes, lens overlays, mobile list): the workspace is the navigation rail, one flat list of conversations, and one conversation. Tiling and multi-column layouts are deferred.
+
 ### Changed
 
+- **The standalone review mode now shares the dark workspace theme**: the light "Semaphore" palette, the `--codesema-*`/`--cs-*` token families, Instrument Sans and JetBrains Mono are gone, along with the Tailwind token bridge.
+- **The conversations rail is one flat list**: a conversation is its title and time between two hairlines, ordered attention first, no grouping by project; a conversation may carry no project.
+- **Task, event and finding states are rendered through semantic tones** (`data-tone`, `data-s`, `data-v`, `data-r`) read by CSS, instead of colour tables in TypeScript.
+- **The conversation reads as one thread**: the header carries the agent-named title and the description, timestamps sit inline at 12px, the user's message is left-aligned with a `you` gutter, the preparation steps fold into one line, checks summarise per turn, inline code is marked, and the ship action is a single primary button in the header.
+- **The rail is icons-only when collapsed and 30ch wide when open**; the three rail lists (conversations, repositories, code review) share the same borderless search line under the same header band.
+- **Turns and reviews in flight are blue** (the machine works); amber is reserved for a human being waited on.
+- **The conversation is near-monochrome**: the user's prompt is the only filled block, events separate by whitespace instead of hairlines and left rails, identity chips (project, branch, isolation, durations) are one muted meta line with the asked sentence folded behind it, badges keep a box only on a real state (open MR, non-ok verdict), and the composer is a plain frame with a prompt glyph whose send button appears once there is text.
+- **Markdown renders everywhere a message shows**: the agent's streaming bubbles are rendered like settled messages, and the renderer now handles blockquotes, pipe tables and horizontal rules, with one shared `.md` style in the kit.
+- **`TaskConversation.vue` and `DiffView.vue` are split** into `task-conversation/*` and `diff/*` components with a thin orchestrator each.
+- **Emojis and glyphs missing from the shipped font are replaced** by the `G` glyph set (`packages/web/src/glyphs.ts`), so no line ever falls back to a second font.
 - **A task card stacks its four blocks in one column** (evidence, recap, checks, criteria) instead of a two-by-two grid.
 - **Every font size in the web UI is now one of seven `--fs-*` tokens declared once in `style.css`**, in rem, replacing 500 hard-coded px values; the dense sizes moved up (nothing below 11px, read text at 14px), and the tests refuse any new px font size in a component.
 - **Every screenshot and video in the evidence block opens a full-screen viewer** with wheel, button and keyboard zoom, click-to-zoom and drag-to-pan, closed by Escape.

packages/cli/src/serve.ts

@@ -2011,6 +2011,14 @@ export function devIndexHtml(viteOrigin: string): string {
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>codesema</title>
+    <script>
+      try {
+        var root = document.documentElement
+        var palette = localStorage.getItem('codesema-palette')
+        if (palette && palette !== 'tokyonight') root.dataset.palette = palette
+        if (localStorage.getItem('codesema-contrast') === 'aaa') root.dataset.contrast = 'aaa'
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="app"></div>