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.

PR #1088 Privacy mode ON /_styleguide · DEV ONLY

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

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