3.3 KiB
date, pr, feature, impact
| date | pr | feature | impact |
|---|---|---|---|
| 2026-10-19 | pending | Three-colour semantic system split out of the single cyan accent | The chat chain's approval card, tool-change cards, assistant bubbles and context meter were re-coloured so that each colour carries exactly one meaning. `--warning` moves from yellow (hue 85) to amber (hue 68) and `--success` from a muted green to a fluorescent lime (hue 128), so the whole app changes hue together rather than only the chat view. Rendering-layer only — no store logic, no `/chat-run` payload, no markup or event wiring changed. |
Three-colour semantics
The app had one accent, so every emphasis in the chat chain was a shade of the same cyan: an approval waiting on the user, a tool that had already run, a streaming response, and an outright error all looked equally urgent. Hue was carrying no information.
The colours are now split by meaning instead of by shade. Each one does exactly
one job and the rule is stated at the top of variables.scss:
| colour | means | used for |
|---|---|---|
cyan --accent-primary |
the system itself | brand, primary buttons, current selection, user bubbles |
amber --warning |
needs you | approval cards, their confirm buttons, context about to fill |
lime --success |
the machine is working | tool execution, assistant output, streaming caret, healthy connection |
red --error |
something failed | errors only — deliberately not a fourth member of the palette |
Red staying out of the palette is the point: when failure reuses the accent family the urgency signal disappears.
Token changes
--warning moved from oklch(0.810 0.145 85) (yellow) to oklch(0.780 0.155 68)
(amber), and --success from oklch(0.760 0.140 165) to oklch(0.860 0.190 128)
(fluorescent lime). Six companion values were added for translucent fills and
borders: --success-soft, --success-line, --warning-soft, --warning-line,
--error-soft, --error-line. The matching Arco bridge values in global.scss
(--green-*, --orange-*) were updated in the same pass so solid controls —
button fills, switch tracks, progress bars — pick up the new hues rather than
staying on the old ones.
Because the hues are global, every page using --success or --warning changes
with them. That is intentional; the alternative is a chat view that disagrees with
the rest of the app.
Chat chain surface
- Approval card (
MessageList.vue) — was cyan, now amber: amber border, a translucent amber wash over the card, an amber outer glow, and a slow pulse on the icon. The pulse is the only moving part in the chain; it marks the one thing that is genuinely waiting. - Tool-change cards (
MessageItem.vue) — gained a 2px lime left edge meaning "this already ran". - Assistant bubbles (
MessageItem.vue) — same 2px lime left edge. - User bubbles (
MessageItem.vue) — 2px cyan right edge, so the two sides read differently without needing labels. - Context meter (
ChatInput.vue) — green under 60%, amber to 80%, red above. The thresholds already existed; only the colours were wrong.
Verification
npm run test, npm run build and npm run harness:check pass. Styles were
checked in a browser against the six states that exercise the palette: idle,
streaming, approval, context warning, tool call, and system error.