CCS Dashboard Design System — Phase 1
+Force-UI visual review of the foundations PR. Two locked archetypes (Config 3-pane and Monitor 12-col grid) wrapped by a shared PageShell. Every page going forward picks one.
1 · Shared shell
+2 · /_styleguide overview
+Dev-only route gated by import.meta.env.DEV. Renders every primitive plus composed Config + Monitor demos. Privacy toggle on; all data anonymized as Provider A/B/C.
+
+3 · Config archetype — multi-entity (ListPane)
+Used by cliproxy, accounts, providers. Left rail = list of entities. Save lives only in FormPane footer.
+
+
+4 · Config archetype — single-entity (SectionRail)
+Used by codex, copilot, cursor, droid, claude-extension. Same 3-pane shell — left rail swaps to anchor nav with IntersectionObserver scroll-spy. Solves the long-scroll problem on big single-entity pages.
+
+5 · Monitor archetype
+Used by home, analytics, health, logs. KPI row + 12-col responsive grid. MonitorCard variant="terminal" preserves the ccs health --watch aesthetic as opt-in.
+
+6 · Primitive map
+Page shell
Config (3-pane)
Monitor (grid)
Out of scope
7 · Locked decisions
+| # | Question | Decision |
|---|---|---|
| 1 | Storybook vs in-app | In-app /_styleguide — zero-config, lives in repo, dev-only |
| 2 | Archetype B name | Monitor (Dashboard is the whole product) |
| 3 | JsonPane editability | Read-only by default, opt-in editable prop |
| 4 | Health terminal aesthetic | Keep as variant="terminal" |
| 5 | i18n namespace | Per-page (pages.<name>.*) + shared (common.*) |
| 6 | SectionRail activation | Scroll-spy via IntersectionObserver |
8 · How to verify locally
+cd ui && bun run dev then visit http://localhost:5173/_styleguide+The route only exists when
import.meta.env.DEV === true; production builds exclude it entirely.
+9 · What lands next
+| Phase | Scope | PRs |
|---|---|---|
| 2 | Reference migrations: cliproxy, home, health | 1 PR |
| 3 | Opportunistic conversion: codex, copilot, accounts, api, shared, analytics, logs, updates | ~8 PRs (smallest first) |
| 4 | Outlier rewrites: droid (749) → claude-extension (1118) → cursor (1413) → cliproxy-ai-providers (~1700) | 4 PRs |
+Source: plans/260425-1132-ccs-dashboard-design-system/ · Brainstorm: brainstorm-260425-1115-ccs-dashboard-design-system.md
+