62 lines
3.3 KiB
Markdown
62 lines
3.3 KiB
Markdown
---
|
|
date: 2026-10-19
|
|
pr: pending
|
|
feature: Three-colour semantic system split out of the single cyan accent
|
|
impact: 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.
|