penguin-harness-frontend

# Web App frontend conventions `packages/web` is React 19 + Vite + Tailwind CSS 4, with no `cn`/`clsx`, no `tailwind-merge`, and no variants library. Classes are composed with template literals, and a component's variants are a `Record<Key, string>` next to it (`button.tsx`'s `variantClass`, `input.tsx`'s `sizeClass`). Match that shape; do not introduce a styling dependency. This file records the decisions that already exist so they are not re-litigated per PR. Read `penguin-harness-dev` for the repo-wide contract (verification chain, changelog, two-repo layout). ## Status colour: pick a tone, never a palette class `src/lib/tone.ts` is the only place a status colour is spelled. Five tones, chosen by **meaning**: | tone | meaning | when | | --- | --- | --- | | `busy` | executing right now | spinners, live titles, running dots | | `attention` | unfinished — waiting on time, a queue, or the user | hourglass glyphs, pending-approval marks, near-limit rings, warning strips | | `success` | finished well, connected, healthy | completed badges, connected servers | | `danger` | failed, destructive, over a limit | errors, delete affordances | | `muted` | settled; the mark should recede | a done row's glyph | Four maps, by the shape of the thing being coloured: `toneInk` (a glyph or a line of status text), `toneSurface` (a tinted pill with its own text — badges), `toneDot` (the 6px state dots), `toneStrip` (a bordered notice that owns a row). Rules: - **Two states may share a to...