# CCS Dashboard Design System — Phase 1 Preview

## 1 · Shared shell

PageShell ├─ PageHeader (title · description · status · actions) └─ PageBody ├─ ConfigLayout ListPane │ FormPane │ JsonPane ← config archetype └─ MonitorLayout KpiRow + MonitorGrid(MonitorCard…) ← monitor archetype

## 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

components/page-shell/ ├─ page-shell.tsx ├─ page-header.tsx ├─ empty-state.tsx └─ error-state.tsx

### Config (3-pane)

components/config-layout/ ├─ config-layout.tsx ├─ list-pane.tsx ├─ section-rail.tsx ├─ form-pane.tsx ├─ form-section.tsx └─ json-pane.tsx

### Monitor (grid)

components/monitor-layout/ ├─ monitor-layout.tsx ├─ kpi.tsx (KpiRow + KpiCard) └─ monitor-grid.tsx (MonitorGrid + MonitorCard)

### Out of scope

login · setup wizard · dialogs These keep their own minimal shells. Don't force them into an archetype.

## 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`