Rebuild every desktop page on one visual system, 「素 Porcelain」: a quiet
light theme with a tool-call timeline, bubbled user messages and a floating
composer card.
- Tokens: rewrite the white theme on Porcelain values and give all six
themes one radius scale (4/6/8/12/16/20), one type scale
(11/12/13/14/15/18/22/26), Inter up to semibold, JetBrains Mono at 400,
and status colours by meaning (running = info, waiting = warning,
done = success, failed = error). Terracotta is kept for the mark, the
send key and selection.
- Icons: draw every icon from lucide and drop the Material Symbols font.
The generic sparkle glyph is gone: a working turn shows the running
ring, skills use the same box the @ and / menus use for SKILL.md.
- Chat: tool calls read as a timeline, user turns as bubbles, the composer
as a floating card; cards, menus, dialogs and permission prompts share
the same surfaces and shadows.
- Shell: session tabs and workspace tabs use one shared tab chip; the
sidebar, workspace and settings follow the same grounds.
- Settings: the page frame is fluid up to 1120px for every pane, so
explorer-style panes (memory, skills) are no longer squeezed into 700px.
- Guard: designSystem.test.ts fails on off-scale font sizes, weights above
semibold, italic text, Material Symbols, Tailwind radius names and
sparkle icon imports.
Native buttons across these directories: 42 -> ~30.
- `browser/` moves off hardcoded Chinese onto `useTranslation()`.
- `AgentManager`'s `MetaPill` becomes `Badge bordered` across 11 render
sites; its tool search becomes `SearchField`.
- `trace/` filter chips become `SegmentedControl`, which adds arrow-key
navigation and a `radiogroup` they never had.
- `PermissionModeSelector` had a hardcoded DOM id rendered in two places.
`useId()` alone was not enough — a nested duplicate `role="menu"`
wrapper still emitted it twice, so that came out too.
- `ReasoningEffortPopover` defaulted its `ariaLabel` to a Chinese
literal, announcing Chinese in every locale to any caller that omitted
it.
- `DoctorPanel`'s status label was bare `--color-warning` text, an AA
failure; `Badge tone="warning"` uses the on-container pair.
- `TeamStatusBar`'s progress bar becomes `Progress`, retiring the twin of
the one in `SessionTaskBar` — they matched down to the comment.
- `PetApp`'s error banner leaves the stock rose palette for error tokens.
`Progress` here uses an explicit tone rather than `tone="auto"`: this bar
turns green when nothing is *running*, which is not the same as 100% (one
done plus one errored is green at 50%).
`ModelSelector` and `PermissionModeSelector` get only the safe changes —
outside-click and icon buttons. Their selection logic is untouched; both
couple five to seven stores and sit on the highest-frequency path in the
app.
Left native: tree nodes, `role="menuitem"` rows, model option rows,
heatmap cells, and the pet sprite controls.
程序员阿江(Relakkes)