mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-03 05:19:21 +00:00
refactor(ui): revert home/cliproxy migrations and restructure design system
User feedback caught a Phase 2 mistake: forcing home and cliproxy into a one-size-fits-all PageShell + PageHeader chrome regressed density on both pages. - home: original 1-row hero (logo + title + version + 4 inline stats) was split into PageHeader + KpiRow, doubling vertical footprint - cliproxy: original rail-anchored brand was duplicated by a top PageHeader, stealing ~80px from the 3-pane body Resolution: revert both pages to dev-branch state, then restructure ui/docs/design-system.md to extract THREE identity-strip patterns from the canonical references rather than imposing one: 1. HeroBar (1-row dense) -> home pattern 2. Rail-anchored (no top chrome) -> cliproxy pattern 3. PageHeader (title + description) -> health pattern Health stays migrated -- the Monitor archetype + PageHeader is a real improvement there because the gauge + KPI row + group cards don't fit the HeroBar pattern. Future page migrations adapt to whichever identity-strip pattern fits the page's content shape, not the other way around. design-decisions.md gets a v1.1 revision row capturing the rationale.
This commit is contained in:
Tam Nhu Tran committed
1 parent
c59622fabd
commit
1a2fd848f0
9 files changed
+543
-492
No files matched your search
@@ -13,6 +13,27 @@ The 6 open questions from the brainstorm phase, resolved before implementation.
|
||||
|
||||
---
|
||||
|
||||
## v1.1 revision (2026-04-25) — identity-strip patterns
|
||||
|
||||
Phase 2 attempted to migrate `home` and `cliproxy` to a one-size-fits-all `PageShell + PageHeader` chrome. Both regressed on density:
|
||||
|
||||
- **home** had a single-row hero (logo + title + version + 4 inline stats) — splitting it into a stacked PageHeader + KpiRow doubled vertical footprint and lost scannability
|
||||
- **cliproxy** had identity in the left rail — adding a top PageHeader duplicated branding and stole ~80px from the 3-pane body
|
||||
|
||||
**Resolution:** the design system is restructured around three identity-strip patterns extracted from the existing canonical references:
|
||||
|
||||
| # | Pattern | Reference | When |
|
||||
|---|---------|-----------|------|
|
||||
| 7a | `HeroBar` (1-row dense) | `pages/home.tsx` | Dashboard pages with ≤4 hero stats |
|
||||
| 7b | Rail-anchored identity (no top chrome) | `pages/cliproxy.tsx` | Multi-entity Config pages where rail carries brand |
|
||||
| 7c | `PageHeader` (current) | `pages/health.tsx` | Pages where description / status info is non-redundant |
|
||||
|
||||
Phase 2's home + cliproxy migrations are reverted. Health stays migrated (Monitor archetype + PageHeader works there). Future page migrations adapt to whichever pattern fits, NOT the other way around.
|
||||
|
||||
**Why bottom-up:** the existing references already proved their patterns work in production. The job of the design system is to formalize what works, not impose what should.
|
||||
|
||||
---
|
||||
|
||||
## How to revisit
|
||||
|
||||
If a decision turns out wrong in practice, update this doc and bump the affected primitive — don't silently drift. Each row above should be appended with a "Revised: <date> · <reason>" line if changed.
|
||||
@@ -42,21 +42,21 @@ th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;le
|
||||
<p class="lede">Hero stat tiles → <code>KpiRow</code>. AuthMonitor + ErrorLogsMonitor wrapped as <code>MonitorCard</code>s. Logs callout preserved.</p>
|
||||
<div class="compare">
|
||||
<div><label>Before</label><img src="data:image/png;base64,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 truncated
|
||||
<div><label>After</label><img src="data:image/png;base64,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 truncated
|
||||
<div><label>After</label><img src="data:image/png;base64,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 truncated
|
||||
</div>
|
||||
|
||||
<h2>2 · cliproxy — Config archetype (multi-entity, ListPane)</h2>
|
||||
<p class="lede">Master-detail layout wrapped in <code>PageShell</code> + <code>PageHeader</code> + <code>ConfigLayout</code>. Brand strip moved into PageHeader; sidebar keeps the existing ProviderSidebarItem / VariantSidebarItem composition + ProxyStatusWidget. ProviderEditor unchanged. All sub-flows preserved (Quick Setup wizard, Add Account dialog, Account Safety warning).</p>
|
||||
<div class="compare">
|
||||
<div><label>Before</label><img src="data:image/png;base64,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 truncated
|
||||
<div><label>After</label><img src="data:image/png;base64,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 truncated
|
||||
<div><label>After</label><img src="data:image/png;base64,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 truncated
|
||||
</div>
|
||||
|
||||
<h2>3 · health — Monitor archetype + visual improvements</h2>
|
||||
<p class="lede">HealthGauge becomes the hero inside a <code>MonitorCard variant="terminal"</code>. HealthStatsBar replaced by <code>KpiRow</code> (Checks · Passed · Warnings · Errors) — clear severity hierarchy. Each health group becomes its own <code>MonitorCard</code>. Terminal aesthetic preserved per the locked decision (#4).</p>
|
||||
<div class="compare">
|
||||
<div><label>Before</label><img src="data:image/png;base64,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 truncated
|
||||
<div><label>After</label><img src="data:image/png;base64,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 truncated
|
||||
<div><label>After</label><img src="data:image/png;base64,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 truncated
|
||||
</div>
|
||||
|
||||
<h2>4 · LOC delta</h2>
|
||||
|
||||
+123
-124
@@ -1,36 +1,102 @@
|
||||
# CCS Dashboard Design System
|
||||
|
||||
The dashboard ships **two page archetypes**. Every page picks exactly one. All pages share the same outer chrome via `PageShell` + `PageHeader`.
|
||||
A page-level design system extracted from the **canonical reference pages** — `home` and `cliproxy` — that already prove the patterns work in production. New pages should adapt to these references, not the other way around.
|
||||
|
||||
Health is the second-tier reference for pages whose content shape (gauge + KPIs + group accordions) doesn't fit either canonical hero — it uses the `MonitorLayout` archetype.
|
||||
|
||||
> Live preview in dev: `bun run dev` then visit `/_styleguide`.
|
||||
|
||||
---
|
||||
|
||||
## 1. The shell — every page
|
||||
## 1. Identity-strip patterns (pick one per page)
|
||||
|
||||
Three patterns cover every page in the dashboard. The choice depends on what your page already has.
|
||||
|
||||
### 1a. `HeroBar` — single-row dense hero
|
||||
|
||||
**Canonical reference:** `pages/home.tsx`
|
||||
|
||||
```
|
||||
PageShell
|
||||
├─ PageHeader (title · description · status · actions)
|
||||
└─ <archetype body>
|
||||
┌────────────────────────────────────────────────────────────────────┐
|
||||
│ [logo] Title [version] ┃ [Stat] [Stat] [Stat] [Stat] │
|
||||
└────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
```tsx
|
||||
<PageShell>
|
||||
<PageHeader title="Cliproxy" status={…} actions={…} />
|
||||
<ConfigLayout … /> {/* OR <MonitorLayout> */}
|
||||
</PageShell>
|
||||
One row packs logo + title + version + ≤4 inline stats. Optional subtle dotted-pattern background. Stats are clickable when they double as navigation entry points.
|
||||
|
||||
**Use it when:**
|
||||
- The page is a dashboard / monitor with a clear product identity
|
||||
- ≤4 hero stats summarize the page in numbers
|
||||
- Vertical real estate matters (this is half the height of a stacked PageHeader + KpiRow)
|
||||
|
||||
**Building blocks:**
|
||||
- `<HeroSection version={…}/>` — logo + title + subtitle from `components/layout/hero-section.tsx`
|
||||
- `<InlineStat title value icon variant onClick/>` — clickable stat tile (extracted from `home.tsx`); promote to a shared primitive when a 2nd page adopts it
|
||||
|
||||
### 1b. Rail-anchored identity — no top chrome
|
||||
|
||||
**Canonical reference:** `pages/cliproxy.tsx`
|
||||
|
||||
```
|
||||
┌──────────┬─────────────────────────────────────────────────────────┐
|
||||
│ ⚡ Brand │ │
|
||||
│ subtitle │ │
|
||||
│ [QSetup] │ full-height 3-pane body │
|
||||
│ │ │
|
||||
│ • prov A │ (form + raw json fill the entire viewport) │
|
||||
│ • prov B │ │
|
||||
│ … │ │
|
||||
│ [status] │ │
|
||||
└──────────┴─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
Header rules:
|
||||
- `title` is mandatory; `description` optional 1-line subtitle.
|
||||
- `status` slot: small badges/chips (e.g. "Running · :8317").
|
||||
- `actions` slot: button group; **primary action belongs in FormPane footer**, not here, for Config pages.
|
||||
Page identity (brand + page-level CTA + status) lives **inside the left rail**. Zero top chrome — the body archetype gets the full vertical viewport.
|
||||
|
||||
**Use it when:**
|
||||
- The page is a multi-entity Config (3-pane: list / form / json)
|
||||
- The rail naturally carries the page name (you'd duplicate it in a top header)
|
||||
- Vertical real estate is at a premium because the body has dense form content
|
||||
|
||||
**Building blocks:**
|
||||
- The left rail's own header section (in-place markup, no extracted primitive yet — keep it bespoke until a 2nd page adopts the pattern)
|
||||
- Recommended order in the rail: brand strip → primary CTA → entity list → status widget → footer summary
|
||||
|
||||
### 1c. `PageHeader` — title-row chrome
|
||||
|
||||
**Canonical reference:** `pages/health.tsx`
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────────────────────────┐
|
||||
│ Title [v-badge] [action] [action] │
|
||||
│ Description / last-update / status info │
|
||||
└────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
Traditional title row with description and trailing actions.
|
||||
|
||||
**Use it when:**
|
||||
- The page does NOT fit either canonical hero
|
||||
- The description carries genuinely non-redundant context (last refresh, page hierarchy, filter state, version)
|
||||
- Body archetype below benefits from a clear identity strip
|
||||
|
||||
**API:** `<PageHeader title description status actions />` — title + description on left, status badges + action buttons on right.
|
||||
|
||||
### Decision table
|
||||
|
||||
| Page shape | Identity strip |
|
||||
|------------|---------------|
|
||||
| Dashboard / overview with ≤4 hero stats | **HeroBar** (home pattern) |
|
||||
| Multi-entity Config (3-pane: list/form/json) | **Rail-anchored** (cliproxy pattern, no top chrome) |
|
||||
| Single-entity Config OR Monitor with a real hero viz | **PageHeader** + body archetype |
|
||||
| Wizard / login / dialog | None — bespoke shell |
|
||||
|
||||
---
|
||||
|
||||
## 2. Config archetype — 3-pane
|
||||
## 2. Body archetypes
|
||||
|
||||
Used by every page that configures one or more entities (cliproxy, accounts, codex, copilot, cursor, droid, claude-extension, api, shared, profiles).
|
||||
### 2a. Config — 3-pane
|
||||
|
||||
**Canonical reference:** `pages/cliproxy.tsx`
|
||||
|
||||
```
|
||||
┌──────────┬──────────────────┬──────────┐
|
||||
@@ -39,141 +105,74 @@ Used by every page that configures one or more entities (cliproxy, accounts, cod
|
||||
└──────────┴──────────────────┴──────────┘
|
||||
```
|
||||
|
||||
One component, prop-controlled left rail:
|
||||
Left rail = `ListPane` (multi-entity) or `SectionRail` (single-entity, with `IntersectionObserver` scroll-spy). Form and JSON panes are middle and right respectively.
|
||||
|
||||
```tsx
|
||||
// Multi-entity (cliproxy, accounts, providers)
|
||||
<ConfigLayout
|
||||
left={<ListPane items={…} selectedId={id} onSelect={…} />}
|
||||
left={<ListPane …/>} // multi-entity
|
||||
// OR
|
||||
left={<SectionRail …/>} // single-entity
|
||||
form={<FormPane>…</FormPane>}
|
||||
json={<JsonPane data={…} />}
|
||||
/>
|
||||
|
||||
// Single-entity (codex, copilot, cursor, droid, claude-extension)
|
||||
<ConfigLayout
|
||||
left={<SectionRail sections={…} />}
|
||||
form={<FormPane>…</FormPane>}
|
||||
json={<JsonPane data={…} />}
|
||||
/>
|
||||
|
||||
// No rail (rare — only if page has neither entities to pick nor sections to navigate)
|
||||
<ConfigLayout form={<FormPane>…</FormPane>} json={<JsonPane data={…} />} />
|
||||
```
|
||||
|
||||
### Rules
|
||||
**Rules:**
|
||||
- Save action lives **only** in `FormPane` footer
|
||||
- `<1024px`: collapses to tabs (Browse | Configure | JSON)
|
||||
- `JsonPane` is read-only by default; opt-in `editable` for cliproxy-style inline editing
|
||||
|
||||
- **Layout**: left 260px / form flex / json 360px on `>=1024px`.
|
||||
- **<1024px**: collapses to tabs (`Browse | Configure | JSON`).
|
||||
- **Save action**: lives **only** in `FormPane footer`. Never duplicate in PageHeader.
|
||||
- **Per-entity actions** (delete, duplicate, sync): ListPane row trailing actions or FormPane header secondary actions — never both.
|
||||
- **JsonPane is read-only by default**. Pass `editable` prop only on pages that need inline editing (cliproxy is the canonical example).
|
||||
### 2b. Monitor — KPI row + 12-col grid
|
||||
|
||||
### SectionRail
|
||||
|
||||
For single-entity pages. Provides anchor nav with `IntersectionObserver` scroll-spy. Each item must match the `id` of a `<FormSection id="…">` in the FormPane.
|
||||
|
||||
```tsx
|
||||
<SectionRail
|
||||
sections={[
|
||||
{ id: 'general', label: 'General' },
|
||||
{ id: 'auth', label: 'Authentication' },
|
||||
{ id: 'routing', label: 'Routing' },
|
||||
]}
|
||||
/>
|
||||
|
||||
// FormPane:
|
||||
<FormSection id="general" title="General">…</FormSection>
|
||||
<FormSection id="auth" title="Authentication">…</FormSection>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Monitor archetype — KPI row + 12-col grid
|
||||
|
||||
Used by every page that shows live state (home, analytics, health, logs, future status pages).
|
||||
**Canonical reference:** `pages/health.tsx`
|
||||
|
||||
```
|
||||
┌────────────────────────────────────────────────┐
|
||||
│ KpiRow: [KPI] [KPI] [KPI] [KPI] │ (optional, ≤4 hero numbers)
|
||||
├────────────────────────────────────────────────┤
|
||||
│ MonitorGrid (12-col): │
|
||||
│ <MonitorCard span={8}> primary viz │
|
||||
│ <MonitorCard span={4}> side widget │
|
||||
│ <MonitorCard span={6}> ... │
|
||||
│ <MonitorCard span={6}> ... │
|
||||
└────────────────────────────────────────────────┘
|
||||
┌────────────────────────────────────────┐
|
||||
│ KpiRow (≤4 hero numbers) │
|
||||
├────────────────────────────────────────┤
|
||||
│ MonitorGrid (12-col): │
|
||||
│ <MonitorCard span={…}/> │
|
||||
└────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
```tsx
|
||||
<MonitorLayout
|
||||
kpis={
|
||||
<KpiRow>
|
||||
<KpiCard label="Active accounts" value="87" hint="▲ 3" tone="positive" />
|
||||
…
|
||||
</KpiRow>
|
||||
}
|
||||
>
|
||||
<MonitorLayout kpis={<KpiRow>…</KpiRow>}>
|
||||
<MonitorGrid>
|
||||
<MonitorCard span={8} title="Live monitor">…</MonitorCard>
|
||||
<MonitorCard span={4} title="Top providers">…</MonitorCard>
|
||||
<MonitorCard span={6} title="Requests" meta="last 24h">…</MonitorCard>
|
||||
<MonitorCard span={6} variant="terminal" title="$ ccs health --watch">…</MonitorCard>
|
||||
<MonitorCard span={6} variant="terminal" title=…>…</MonitorCard>
|
||||
</MonitorGrid>
|
||||
</MonitorLayout>
|
||||
```
|
||||
|
||||
### Rules
|
||||
**Rules:**
|
||||
- `KpiRow` only when ≤4 hero numbers; more → group inside the grid
|
||||
- One primary viz per page, span ≥8 cols
|
||||
- `variant="terminal"` for live-log / `health --watch` aesthetics
|
||||
|
||||
- **KpiRow** only when there are ≤4 hero numbers. More than 4 → use `MonitorCard`s inside the grid instead.
|
||||
- **One primary viz per page** — span ≥8 cols. Preserves the "punch" of home and analytics.
|
||||
- **`variant="terminal"`** = dark monospace card, for live-log / `health --watch` aesthetics. Opt-in only.
|
||||
- **Spans clamp at 6 cols on tablet**, single column on mobile.
|
||||
---
|
||||
|
||||
## 3. Composing a new page
|
||||
|
||||
```tsx
|
||||
// Example: a new dashboard-style page
|
||||
<PageShell>
|
||||
<HeroBar … /> {/* or PageHeader, or rail-anchored identity */}
|
||||
<MonitorLayout … /> {/* or ConfigLayout */}
|
||||
</PageShell>
|
||||
```
|
||||
|
||||
Target LOC for a new page: **~80** for typical config, **~120** for monitor with hero strip. Target LOC for an outlier rewrite: **<400**.
|
||||
|
||||
---
|
||||
|
||||
## 4. When NOT to use either archetype
|
||||
|
||||
These remain bespoke:
|
||||
- `/login` — minimal centered shell, no header/grid.
|
||||
- Setup wizard — modal overlay, not a page.
|
||||
- Dialogs — radix `Dialog`, not a layout.
|
||||
|
||||
If you find yourself fighting the shell, the answer is usually "this isn't a Config or Monitor page" — talk to the maintainers before inventing a third archetype.
|
||||
These remain bespoke and are out of scope:
|
||||
- `/login` — minimal centered shell
|
||||
- Setup wizard — modal overlay
|
||||
- Dialogs — Radix `Dialog`
|
||||
|
||||
---
|
||||
|
||||
## 5. Composing a new page
|
||||
## 5. Decisions
|
||||
|
||||
The recipe for any new page is:
|
||||
|
||||
```tsx
|
||||
import { PageShell, PageHeader } from '@/components/page-shell';
|
||||
import { ConfigLayout, /*…*/ } from '@/components/config-layout';
|
||||
|
||||
export function MyPage() {
|
||||
return (
|
||||
<PageShell>
|
||||
<PageHeader title="My Page" actions={<Actions/>} />
|
||||
<ConfigLayout
|
||||
left={…}
|
||||
form={<FormPane>…</FormPane>}
|
||||
json={<JsonPane data={…}/>}
|
||||
/>
|
||||
</PageShell>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Target LOC for a new page: **~80** for typical config, **~120** for monitor. If your page exceeds 400 LOC it should be split into `pages/<name>/` with section files.
|
||||
|
||||
---
|
||||
|
||||
## 6. Lint / enforcement
|
||||
|
||||
Phase 4 adds a lint rule: every file under `src/pages/*.tsx` (or `src/pages/*/index.tsx`) must import `PageShell`. Until then, code review enforces the contract.
|
||||
|
||||
---
|
||||
|
||||
## 7. Decisions
|
||||
|
||||
See [`design-decisions.md`](./design-decisions.md) for the resolutions of the 6 open questions from the brainstorm phase.
|
||||
See [`design-decisions.md`](./design-decisions.md) for the resolved open questions and the v1.1 revision rationale.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
Reference in new issue
Block a user