# CCS Dashboard Design System — Phase 2 (final)

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

Before (dev branch baseline)
After (final redesign)

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