CCS Dashboard Design System — Phase 2 (final)
Phase 2 evolved through three stages: (1) initial migration of home/cliproxy/health to one-size-fits-all chrome — regressed; (2) revert + restructure docs around three identity-strip patterns extracted from canonical references; (3) bespoke health redesign per a dedicated brief, adding a fourth pattern for pages whose content shape demands custom hierarchy.
1 · Final pages in this PR
| Page | State | Pattern |
|---|---|---|
home.tsx | Reverted to original (matches dev) | HeroBar (canonical) |
cliproxy.tsx | Reverted to original (matches dev) | Rail-anchored identity (canonical) |
health.tsx | Bespoke redesign on top of the original migration | Bespoke (canonical for §1d) |
2 · health redesign — before / after
The redesigned health page surfaces severity (HEALTH.ATTENTIONREQUIRED with priority cards) above the audit grid (HEALTH.ENVIRONMENTAUDIT). Status ribbon at top carries summary + version + ccs doctor + refresh. Dynamic background tints rose when issues exist, emerald when clean. New domain components: HealthStatusRibbon, HealthPriorityCard, HealthPriorityList, HealthAuditSection.
3 · Four identity-strip patterns (v1.2 docs)
| Pattern | Reference | When |
|---|---|---|
| HeroBar (1-row dense) | pages/home.tsx | Dashboard pages with ≤4 hero stats packed tight |
| Rail-anchored (no top chrome) | pages/cliproxy.tsx | Multi-entity Config pages where rail carries identity |
| PageHeader (title + desc + actions) | None yet | Pages where description / status info is non-redundant context |
| Bespoke (full custom) | pages/health.tsx | Severity / priority-driven pages with custom hierarchy |
4 · What's actually in this PR
| File | Change |
|---|---|
| ui/src/pages/health.tsx | Bespoke redesign — replaces the Monitor migration with priority + audit hierarchy |
| ui/src/components/health/health-status-ribbon.tsx | NEW — top status strip (severity, KPIs, version, actions) |
| ui/src/components/health/health-priority-card.tsx | NEW — clickable card surfacing a single failed/warning check |
| ui/src/components/health/health-priority-list.tsx | NEW — grid of priority cards under HEALTH.ATTENTIONREQUIRED |
| ui/src/components/health/health-audit-section.tsx | NEW — collapsible section for the lower audit grid |
| ui/src/components/layout/layout.tsx | Drop backdrop-blur on global header (interferes with health backdrop) |
| ui/src/pages/home.tsx | Reverted to original (matches dev) |
| ui/src/pages/cliproxy.tsx | Reverted to original (matches dev) |
| ui/src/components/monitor-layout/kpi.tsx | KpiCard gains optional onClick prop (still useful for future monitor pages) |
| ui/docs/design-system.md | v1.2 — four identity-strip patterns, Bespoke added as §1d |
| ui/docs/design-decisions.md | v1.2 revision row capturing the bespoke health redesign |
| ui/docs/health-redesign/ | Verification report and screenshots from the redesign exercise |
PR #1089 · plan plans/260425-1132-ccs-dashboard-design-system/ · health brief plans/reports/handoff-260425-1417-health-page-redesign.md