feat(design-system): catalog synced to claude.ai/design + /cron & /shells redesigns (#84)

* docs: add Claude Karma design system spec

Design system that mirrors real code (extracted tokens.css single source)
and syncs an in-repo catalog to claude.ai/design via DesignSync. Approach B:
generated foundation cards + hand-authored previews for the 13 ui/ primitives
+ a mapping.json round-trip contract.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs: incorporate feature-dev review into design system spec

- exact token line ranges (12-211/264-403/406-539) + keep @theme & import order
- git strategy: commit authored sources, gitignore derived (tokens copy/foundations)
- generator: zero-dep state-machine parser; skip --plugin-*, alias --data-*; 8 spacing
- per-primitive notes: bits-ui DOM hardcoding, TierBadge hardcoded hex, KarmaIcon SVG
- build hygiene: .prettierignore catalog (marker on line 1), .gitignore, eslint
- known dark-block token inconsistencies tracked as future cleanup

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs: add design system implementation plan (8 tasks, TDD where applicable)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor(frontend): extract design tokens into single-source tokens.css

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(design-system): scaffold catalog shared assets + ignore rules

* feat(design-system): token parser + foundation card generator

* feat(design-system): build-catalog + drift-check + ds:build/ds:drift scripts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(design-system): remove unused imports in build/drift scripts

* feat(design-system): static primitive previews (badge, card, key-indicator, text-input, select, empty-state, tier-badge, theme-toggle)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(design-system): interactive primitive previews (segmented-control, switch, tabs, collapsible-group, modal)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(design-system): align collapsible focus token, modal xl ref width, drop text-input ring litter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(design-system): catalog README + round-trip usage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs(design-system): clarify drift trigger + ds:build pipeline in README

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(design-system): enforce mapping contract, group colors page, honest render-check, segmented-control + chrome fidelity

- build-catalog: load mapping.json and enforce bidirectional contract (card without key → exit 1; key without file → exit 1)
- build-catalog: compute honest thin counter (body < 200 non-WS chars); drop variantsIdentical (was always 0)
- generate-foundations: exclude --shadow* and --focus* from color grid (they have own cards); group remaining swatches into 10 labeled sections (Core/Semantic/Model/Event/Subagent/Provider/Ticket Status/Live Status/Nav/Scope + Other catch-all); Core RGB values shown as text notes not broken chips; subtitle count is now accurate (110)
- preview.css: add border-bottom on .ds-swatch__chip so near-invisible alpha tints show bounds; .ds-section-label and .ds-swatch__val raised from --text-faint/--text-muted to --text-secondary (AA contrast)
- segmented-control.html: active label color changed from #fff to var(--bg-base) matching real SegmentedControl.svelte
- README: update render-check description to match actual counters

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(frontend): darken light-mode semantic/model/event tokens for WCAG AA contrast

Seven light-mode foreground tokens failed WCAG AA on their -subtle tint backgrounds
(ratios ranged from 1.99:1 to 3.29:1). Darkened each to its Tailwind -700 shade:
  warning  #f59e0b → #b45309 (amber-700,   4.65:1)
  success  #10b981 → #047857 (emerald-700,  4.99:1)
  error    #ef4444 → #b91c1c (red-700,      5.66:1)
  info     #3b82f6 → #1d4ed8 (blue-700,     5.99:1)
  model-haiku  = success; model-sonnet = info (same hue pairs)
  event-command #14b8a6 → #0f766e (teal-700, 4.63:1)
Tint backgrounds and dark-mode blocks unchanged. Adds WCAG note to badge catalog card.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs(design-system): record synced claude.ai/design projectId

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(design-system): add Pages layer — /cron and /shells page cards

Two static HTML page cards in catalog/pages/ snapshot the current
/cron and /shells routes with spec sample data and real var(--…) tokens.
Adds mapping.json entries, a Pages-layer README section, and task report.
ds:build → "catalog OK — 23 cards validated"; ds:drift → no drift.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(design-system): README card count + shells session link

Updated README.md to reflect 23 cards validated (was 21), and made session slug clickable in shells.html with accent-colored link styling.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs(design-system): record Pages-layer sync to claude.ai/design

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(design-system): self-host Inter + JetBrains Mono so catalog cards show brand fonts

Catalog previews named the brand families via tokens but loaded no web font,
so claude.ai/design (and direct-opened HTML) fell back to system fonts. Vendor
the woff2 weights actually used (Inter 400/500/600/700, JetBrains Mono 400/500/600)
under shared/fonts/ and add @font-face to preview.css. Re-synced to claude.ai/design.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(frontend): self-host Inter + JetBrains Mono web fonts

The app named these brand families via tokens but loaded no web font,
silently falling back to system fonts on any machine without them installed.
Vendor the used weights (Inter 400/500/600/700, JetBrains Mono 400/500/600)
under static/fonts/ and add @font-face to app.css. Verified: build copies them
to build/client/fonts/ and the bundled CSS references /fonts/*.woff2.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(cron): redesign Claude-crons view as "The Ledger" (trust column + inline outcome)

Surface the two things hidden behind a click onto every row: a trust verdict
(Confirmed/Inferred/TTL expired/Deleted + fire subline) and the inline last
outcome. Group rows by status (Active / Expired & deleted) into bordered tables,
reframe the stat strip around trust, add a legend. Presentation only — all data
wiring, filters, URL state, expand, TTL, rescan, and the System tab preserved.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(ui): reserve 2-line label height in StatsCard so value rows align

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(shells): redesign as "The Process Monitor" (triage table, pinned running + inline kill + sparkline)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs(design-system): refresh cron + shells page cards to new designs (Ledger, Process Monitor)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: JayantDevkar

.superpowers/sdd/task-9-remediation-report.md

@@ -0,0 +1,70 @@
+# Task 9 Remediation Report
+
+## Findings addressed
+
+### 1. Enforce mapping.json contract in build-catalog.mjs (code-review Important)
+**File:** `frontend/design-system/scripts/build-catalog.mjs`
+
+Added bidirectional mapping.json enforcement:
+- Loads `mapping.json` after `generate()` runs.
+- Iterates all discovered `.html` files; any missing a mapping key is collected in `missingMappings`.
+- Iterates all mapping keys; any pointing to a non-existent card file is collected in `missingFiles`.
+- Both arrays cause `process.exit(1)` with offender lists printed.
+- Existing marker validation retained unchanged.
+- Current 21 cards all pass (8 foundation + 13 component keys all present).
+
+### 2. colors.html generator fixes (H2, H3, M3, M4-count)
+**File:** `frontend/design-system/scripts/generate-foundations.mjs`
+
+- **(M3) Exclude shadow/focus tokens:** `buildColorSections()` pre-filter now excludes `--shadow*` and `--focus*` in addition to the prior `--font*`/`--plugin*`/`--data*` exclusions. These tokens have their own foundation cards.
+- **(H2) Grouped sections:** Replaced the flat `auto-fill` grid with 10 labeled `ds-section` groups: Core, Semantic, Model, Event, Subagent, Provider, Ticket Status, Live Status, Nav, Scope. An "Other" section catches any future token not matching a family. Core's raw `*-rgb` values are rendered as a compact text note instead of chips (background: `124, 58, 237` is not a valid CSS color).
+- **(H3) Chip borders:** Added `border-bottom: 1px solid var(--border)` on `.ds-swatch__chip` in `preview.css` so near-invisible low-alpha tints show their bounds. (The outer `.ds-swatch` already has a full border; the chip border provides an internal separator.)
+- **(M4-count) Accurate subtitle:** Count is computed as `swatchCount` (actual chips rendered), currently 110. The stale hardcoded "115" is gone.
+
+### 3. Honest render-check counters (UI/UX M4)
+**File:** `frontend/design-system/scripts/build-catalog.mjs`
+
+- `thin`: computed as number of cards where `body` inner content (tags stripped, whitespace removed) < 200 chars. Currently 6 (focus, brand, motion, typography, shadow, radius — all legitimately brief by design).
+- `variantsIdentical`: removed entirely (was always `0`; not measured). README updated to match.
+- Current output: `{ "total": 21, "bad": 0, "thin": 6 }`.
+
+### 4. segmented-control.html fidelity fix (UI/UX M1)
+**File:** `frontend/design-system/catalog/components/segmented-control.html`
+
+Changed `.seg-btn[aria-checked="true"]` active label color from `#fff` to `var(--bg-base)`, matching the real `SegmentedControl.svelte` (`text-[var(--bg-base)]`). First-line `@dsCard` marker preserved.
+
+### 5. Catalog chrome contrast fix (UI/UX M5)
+**File:** `frontend/design-system/catalog/shared/preview.css`
+
+- `.ds-section-label`: changed `color: var(--text-faint)` → `color: var(--text-secondary)`.
+- `.ds-swatch__val`: changed `color: var(--text-muted)` → `color: var(--text-secondary)`.
+Both are catalog-internal chrome only; no app token values changed.
+
+## Verification output
+
+```
+$ cd frontend && npm run ds:build
+catalog OK — 21 cards validated
+
+$ cd frontend && node --test design-system/scripts/*.test.mjs
+✔ parseTokens extracts light tokens (0.991208ms)
+✔ parseTokens extracts dark overrides only from the data-theme block (0.102625ms)
+✔ accepts a valid first-line marker (0.79925ms)
+✔ rejects a marker not on the first line (0.12525ms)
+✔ rejects a missing marker (0.066209ms)
+ℹ tests 5, pass 5, fail 0
+
+$ cd frontend && npm run ds:drift
+no drift — all cards are current with their sources
+```
+
+## Scope confirmation
+
+`git diff --name-only HEAD` shows only:
+- `frontend/design-system/README.md`
+- `frontend/design-system/catalog/components/segmented-control.html`
+- `frontend/design-system/catalog/shared/preview.css`
+- `frontend/design-system/scripts/build-catalog.mjs`
+- `frontend/design-system/scripts/generate-foundations.mjs`
+
+No changes to `frontend/src/styles/tokens.css` or any `frontend/src/lib/**` file.