design(388): mirror full ChicoryTV design system to prod + design-sync reminder hook #394

Merged

timothy merged 1 commits from feat/388-design-mirror into main 2026-07-17 03:27:13 +02:00

Conversation 1 Commits 1 Files Changed 49

+9031 -919

timothy commented 2026-07-17 01:16:39 +02:00

Owner

Copy Link

Copy Source

Fixes #388.

Full single-session mirror sweep — the Claude Design project (ChicoryTV Design System, eb3b6122 / local design-system/) now reflects the shipped SPA for every screen. These are mockups (faithful visual/layout parity, no logic), as the epic scoped.

What landed

• 40 prototype mockups authored via a fan-out workflow (one agent per screen, model-tiered haiku/sonnet by complexity). 8 stale prototypes rebuilt (Dashboard, ChannelBuilder, Guide, Schedules, Playouts, Settings, …); 32 net-new (media / sources / system / auth). Retired Epg/ScheduleEditor/ScheduleLibrary.
• screens.js — single source of truth for the inventory; Shell.jsx nav + app.html screen-map both build from it (nav groups mirror web/src/app/routes.tsx). app.html is now hash-routed (#<id>).
• Verified: all 42 views render headlessly across the 3 themes — 126/126, 0 real render errors (spot-checked Settings, Guide EPG grid, Login for fidelity).
• Pushed to Claude Design: 46 files written, 3 deleted (via DesignSync, this session).
• design-sync-reminder.sh hook (+ .claude/settings.json) — mechanical, fail-open, once-per-session nudge keyed on the web/src/**.{tsx,css} fileset: PreToolUse (first UI edit → pull-first) + Stop (UI file actually changed → mirror/push-back). Keeps the mirror from drifting going forward. Pipe-tested both phases.
• docs/design-sync.md updated (bulk-sweep structure + the reminder hook).

Review

Per the skip rubric this is a pure design-system / SPA-mockup / docs leaf with no server-state effect (no C#, no API, no migrations). The only executable risk surface is the fail-open bash hook + the app.html/Shell.jsx/screens.js wiring — cold-reviewed + headless-render-verified. Independent-review exemption stated here.

🤖 Generated with Claude Code

Fixes #388. Full single-session **mirror sweep** — the Claude Design project (`ChicoryTV Design System`, eb3b6122 / local `design-system/`) now reflects the shipped SPA for **every** screen. These are **mockups** (faithful visual/layout parity, no logic), as the epic scoped. ## What landed - **40 prototype mockups authored** via a fan-out workflow (one agent per screen, model-tiered haiku/sonnet by complexity). 8 stale prototypes rebuilt (Dashboard, ChannelBuilder, Guide, Schedules, Playouts, Settings, …); 32 net-new (media / sources / system / auth). Retired `Epg`/`ScheduleEditor`/`ScheduleLibrary`. - **`screens.js`** — single source of truth for the inventory; `Shell.jsx` nav + `app.html` screen-map both build from it (nav groups mirror `web/src/app/routes.tsx`). `app.html` is now hash-routed (`#<id>`). - **Verified**: all 42 views render headlessly across the 3 themes — **126/126, 0 real render errors** (spot-checked Settings, Guide EPG grid, Login for fidelity). - **Pushed to Claude Design**: 46 files written, 3 deleted (via `DesignSync`, this session). - **`design-sync-reminder.sh` hook** (+ `.claude/settings.json`) — mechanical, fail-open, once-per-session nudge keyed on the `web/src/**.{tsx,css}` fileset: PreToolUse (first UI edit → *pull-first*) + Stop (UI file actually changed → *mirror/push-back*). Keeps the mirror from drifting going forward. Pipe-tested both phases. - **`docs/design-sync.md`** updated (bulk-sweep structure + the reminder hook). ## Review Per the skip rubric this is a **pure design-system / SPA-mockup / docs leaf with no server-state effect** (no C#, no API, no migrations). The only executable risk surface is the fail-open bash hook + the `app.html`/`Shell.jsx`/`screens.js` wiring — cold-reviewed + headless-render-verified. Independent-review exemption stated here. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

timothy added the enhancementfrontend labels 2026-07-17 01:16:39 +02:00

timothy added 1 commit 2026-07-17 01:16:40 +02:00

design(388): mirror full ChicoryTV design system to prod + design-sync reminder hook ... f76f8a939c

Bulk mirror sweep (#388): author/rebuild a prototype mockup for every shipped SPA screen so
the Claude Design project (eb3b6122 / local design-system/) faithfully reflects prod.

- 40 screens authored (mockups: visual/layout parity, no logic) via a fan-out workflow;
  8 stale prototypes rebuilt (Dashboard, ChannelBuilder, Guide, Schedules, Playouts, Settings, …),
  32 net-new (media/sources/system/auth). Retired Epg/ScheduleEditor/ScheduleLibrary.
- New screens.js = single source of truth for the inventory; Shell.jsx nav + app.html screen map
  both build from it (nav groups mirror web/src/app/routes.tsx). app.html is now hash-routed.
- All 42 views verified rendering headlessly across the 3 themes (126/126, 0 real errors).
- design-sync-reminder.sh hook (+ settings.json): mechanical, fail-open, once/session nudge to
  pull-first (PreToolUse Write|Edit on web/src/**.{tsx,css}) and mirror/push-back (Stop) — keeps
  the design system from drifting from prod going forward.
- docs/design-sync.md: document the bulk-sweep structure + the reminder hook.

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

timothy referenced this pull request 2026-07-17 01:17:37 +02:00

Mirror the ChicoryTV design system to prod (Claude Design ↔ shipped SPA) #388

timothy commented 2026-07-17 01:20:13 +02:00

Author

Owner

Copy Link

Copy Source

Cold independent review (Sonnet, review-only) of the executable risk surface — the design-sync-reminder.sh hook + the app.html/Shell.jsx/screens.js wiring. The 40 static mockups are out of scope (verified-rendering design artifacts: 126/126 headless render checks across 3 themes, 0 real errors).

No blockers. Empirically verified (not just read):

• Hook is genuinely fail-open — malformed stdin → exit 0, start only ever emits additionalContext (never a permissionDecision, so it cannot block a Write/Edit), test files skipped before the UI match.
• Stop one-shot cannot infinite-loop — marker-written-before-emit confirmed live (2nd fire is silent).
• set -euo pipefail + { git…; git…; } | grep || true degrades gracefully on a non-repo cwd (no silent diff truncation); no shell/JSON injection via file_path/cwd (jq --arg, quoted git -C).
• Wiring cross-checked programmatically: inventory ↔ <script> tags ↔ window.CTV* globals are 1:1 in order; no references to the deleted Epg/ScheduleEditor/ScheduleLibrary; Shell defaults guard against undefined inventory; hashchange listener cleaned up; mount guard waits for all globals.
• .claude/settings.json is valid + purely additive (existing hooks untouched).

Low/non-blocking: mount-guard retry has no cap (pre-existing pattern, cosmetic for a mockup); TEST_RE won't catch __tests__/ or .spec. naming (harmless — the hook only nudges, never blocks).

Review-verdict: MERGEABLE @ f76f8a939c

Cold independent review (Sonnet, review-only) of the executable risk surface — the `design-sync-reminder.sh` hook + the `app.html`/`Shell.jsx`/`screens.js` wiring. The 40 static mockups are out of scope (verified-rendering design artifacts: 126/126 headless render checks across 3 themes, 0 real errors). **No blockers.** Empirically verified (not just read): - Hook is genuinely fail-open — malformed stdin → exit 0, `start` only ever emits `additionalContext` (never a `permissionDecision`, so it cannot block a Write/Edit), test files skipped before the UI match. - Stop one-shot cannot infinite-loop — marker-written-before-emit confirmed live (2nd fire is silent). - `set -euo pipefail` + `{ git…; git…; } | grep || true` degrades gracefully on a non-repo cwd (no silent diff truncation); no shell/JSON injection via `file_path`/`cwd` (jq `--arg`, quoted `git -C`). - Wiring cross-checked programmatically: inventory ↔ `<script>` tags ↔ `window.CTV*` globals are 1:1 in order; no references to the deleted `Epg`/`ScheduleEditor`/`ScheduleLibrary`; Shell defaults guard against undefined inventory; hashchange listener cleaned up; mount guard waits for all globals. - `.claude/settings.json` is valid + purely additive (existing hooks untouched). Low/non-blocking: mount-guard retry has no cap (pre-existing pattern, cosmetic for a mockup); `TEST_RE` won't catch `__tests__/` or `.spec.` naming (harmless — the hook only nudges, never blocks). Review-verdict: MERGEABLE @ f76f8a939cc61710a5f11de578f6ae2d5971dc90

timothy merged commit e1d77ebeb9 into main 2026-07-17 03:27:13 +02:00

timothy deleted branch feat/388-design-mirror 2026-07-17 03:27:14 +02:00

timothy referenced this pull request 2026-07-17 03:27:52 +02:00

Mirror the ChicoryTV design system to prod (Claude Design ↔ shipped SPA) #388

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

ad-hoc

One-off / ad-hoc work not tracked by a dedicated issue

api

REST API / HTTP endpoints

bug

Something isn't working

ci-cd

Build, test, deploy pipeline

content

Channel content / schedules / playlists

dependencies

Dependency updates (Renovate)

enhancement

New feature or improvement

frontend

ChicoryTV React SPA frontend

in-progress

Claimed by an active session — do not pick up

jellyfin

Jellyfin tuner / IPTV integration

parked

Excluded from automatic queue pickup; work only when explicitly selected

priority: high

priority: low

priority: medium

review

Adversarial review finding

security

Security / vulnerability fix

No labels enhancement frontend

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

renovate timothy (Timothy)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: timothy/ersatztv#394