Follow-up from the design-system work in #270. The web app's visual conventions are now documented in docs/internals/design-system.md, whose "Known divergences and debt" section lists consolidations we deliberately deferred rather than fold into the Home build. This issue tracks them.
None of these block building new views from the <Section>/<Panel> primitives — they reduce drift and duplication. The zero-risk dedupes (unused fmtNum, duplicate @keyframes spin, identical .table-link/.eyebrow-link) are already done and are not included here.
Shared components (missing primitives)
Button / IconButton — ~10 near-duplicate neutral-bordered button classes plus 4 differently-sized icon-button classes. Highest-value consolidation.Input — the bordered-box input formula is copy-pasted across ~5 classes.ViewGate — the loading/error markup (center-state + "Reading transcripts…" / "Couldn't load data:") is duplicated in every route even though the viewGate logic is shared. A wrapper removes the duplication and gives Home's empty/first-run state a single home.Modal — the two centered backdrop dialogs (welcome, label-delete) duplicate the backdrop + card formula.- Two chip systems —
.chip and .label-chip are parallel families; reconcile.
Color and tokens
--success / --danger tokens — task-success green is a hard-coded #6cc08b/#3f8f5e, and a hard-coded #d9534f competes with the themed --racing-red as a second "danger" red. Introduce semantic tokens and route both through them.SERIES.accent === SERIES.output — orange means both "cost" and "output tokens" depending on the chart; single-series bars also borrow semantic SERIES colors as generic accents, giving color a false meaning. A dedicated neutral single-series color fixes both.- Missing scales (
--space-*, --shadow-*, --z-*, motion) — spacing, elevation, z-index, and motion are standardized by repetition but not tokenized (documented as ramps/bands in the design system doc). Shadows and modal backdrops are also fixed black, not theme-aware.
Other
prefers-reduced-motion — only the task-card transition is guarded; the spinners and toggle transitions are not. Add a broader guard.- Hoist chart-axis helpers —
fmtTick / dollarTick / rotated are re-declared in three routes; move them into lib/charts.ts.
SessionDetail onto the primitives
- Bring
routes/SessionDetail.tsx onto <Panel>/<Section> — it predates the design system and uses its own card token (.overview-card, radius 10, tighter padding), a heading-above-card layout, and a .section-title-row header pattern. Some divergence is justified (tabs, a resizable pane); the card token, radius, and heading placement are not.
See docs/internals/design-system.md for the full spec each item refers to.
Follow-up from the design-system work in #270. The web app's visual conventions are now documented in
docs/internals/design-system.md, whose "Known divergences and debt" section lists consolidations we deliberately deferred rather than fold into the Home build. This issue tracks them.None of these block building new views from the
<Section>/<Panel>primitives — they reduce drift and duplication. The zero-risk dedupes (unusedfmtNum, duplicate@keyframes spin, identical.table-link/.eyebrow-link) are already done and are not included here.Shared components (missing primitives)
Button/IconButton— ~10 near-duplicate neutral-bordered button classes plus 4 differently-sized icon-button classes. Highest-value consolidation.Input— the bordered-box input formula is copy-pasted across ~5 classes.ViewGate— the loading/error markup (center-state+ "Reading transcripts…" / "Couldn't load data:") is duplicated in every route even though theviewGatelogic is shared. A wrapper removes the duplication and gives Home's empty/first-run state a single home.Modal— the two centered backdrop dialogs (welcome, label-delete) duplicate the backdrop + card formula..chipand.label-chipare parallel families; reconcile.Color and tokens
--success/--dangertokens — task-success green is a hard-coded#6cc08b/#3f8f5e, and a hard-coded#d9534fcompetes with the themed--racing-redas a second "danger" red. Introduce semantic tokens and route both through them.SERIES.accent === SERIES.output— orange means both "cost" and "output tokens" depending on the chart; single-series bars also borrow semanticSERIEScolors as generic accents, giving color a false meaning. A dedicated neutral single-series color fixes both.--space-*,--shadow-*,--z-*, motion) — spacing, elevation, z-index, and motion are standardized by repetition but not tokenized (documented as ramps/bands in the design system doc). Shadows and modal backdrops are also fixed black, not theme-aware.Other
prefers-reduced-motion— only the task-card transition is guarded; the spinners and toggle transitions are not. Add a broader guard.fmtTick/dollarTick/rotatedare re-declared in three routes; move them intolib/charts.ts.SessionDetail onto the primitives
routes/SessionDetail.tsxonto<Panel>/<Section>— it predates the design system and uses its own card token (.overview-card, radius 10, tighter padding), a heading-above-card layout, and a.section-title-rowheader pattern. Some divergence is justified (tabs, a resizable pane); the card token, radius, and heading placement are not.See
docs/internals/design-system.mdfor the full spec each item refers to.