docs(ui): sync design system docs with bespoke health redesign

After the v1.1 restructure, health was further redesigned per a separate
brief and went bespoke -- new components (HealthStatusRibbon,
HealthPriorityCard, HealthPriorityList, HealthAuditSection), no
PageShell/PageHeader/MonitorLayout, custom severity-driven hierarchy.

Bring the docs in line:

- design-system.md: add §1d Bespoke as a fourth identity-strip pattern
  with health as canonical reference; remove health from PageHeader
  and Monitor canonical-reference slots (now TBD)
- design-decisions.md: v1.2 revision row capturing the redesign and
  the resulting doc cleanup
- screenshots-phase2/after-03-health.png: replace stale Monitor-archetype
  screenshot with the actual final redesigned page (Privacy mode ON)
- design-system-phase2-preview.html: regenerate; describe the four
  patterns, embed the new screenshot, update the file change list
This commit is contained in:
Tam Nhu Tran committed 2026-04-25 18:55:47 -04:00
1 parent 63198ab1ff
commit dd9854bfd7
4 files changed
+71 -31

No files matched your search

+18
View File
@@ -34,6 +34,24 @@ Phase 2's home + cliproxy migrations are reverted. Health stays migrated (Monito
---
## v1.2 revision (2026-04-25) — health redesign and bespoke pattern
After the v1.1 restructure, the `health` page received a separate, focused redesign per a dedicated handoff brief (`plans/reports/handoff-260425-1417-health-page-redesign.md`). The redesign went bespoke:
- New domain components: `HealthStatusRibbon`, `HealthPriorityCard`, `HealthPriorityList`, `HealthAuditSection`
- Severity-driven layout: priority surfaces (errors/warnings) at the top with prominent fix affordances, audit accordion below
- Dynamic colored background tied to overall status, glassmorphic accents
- No `PageShell`, no `PageHeader`, no `MonitorLayout` — full custom shell
**Resolution:** add a fourth identity-strip pattern — **§1d Bespoke** — for pages whose content shape doesn't fit the three primary patterns. The v1.1 row's claim that "health stays migrated (Monitor archetype + PageHeader works there)" no longer holds; corrected here.
**Side effects:**
- `PageHeader` lost its canonical reference (was health). New reference TBD when another page adopts it.
- `MonitorLayout` lost its canonical reference. Primitives remain available for future Monitor pages.
- `Bespoke` is explicitly an escape hatch — not a default. Code review enforces "you tried the three patterns first."
---
## 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.
+36 -28
View File
@@ -1,6 +1,6 @@
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>CCS Dashboard Design System — Phase 2 (revised)</title>
<title>CCS Dashboard Design System — Phase 2 (final)</title>
<style>
:root{--bg:#0b0d12;--panel:#11151c;--line:#222a37;--ink:#e6edf6;--muted:#8a95a8;--dim:#5a6478;--accent:#7cc3ff;--good:#5ee2a0}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@@ -27,52 +27,60 @@ th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;le
<div class="wrap">
<header class="head">
<div>
<h1>CCS Dashboard Design System — Phase 2 (revised scope)</h1>
<p class="lede">After user feedback caught a density regression, Phase 2 was scoped down: <b>health</b> stays migrated to Monitor archetype, <b>home</b> and <b>cliproxy</b> revert to their original designs. The design system docs are restructured to extract THREE identity-strip patterns from those canonical references.</p>
<h1>CCS Dashboard Design System — Phase 2 (final)</h1>
<p class="lede">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.</p>
</div>
<div>
<span class="pill accent">Phase 2 / 4</span>
<span class="pill good">Bot score 93</span>
<span class="pill good">Privacy mode ON</span>
</div>
</header>
<h2>1 · health — Monitor archetype migration</h2>
<p class="lede">HealthGauge becomes the hero inside <code>MonitorCard variant="terminal"</code>. KpiRow with severity tones replaces HealthStatsBar. Each HealthGroupSection becomes its own MonitorCard.</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,iVBORw0KGgoAAAANSUhEUgAABQAAAALQCAIAAABAH0oBAAAQAElEQVR4nOzdBUAbSRcH8A3uWqA4FKhAhTqFuru7u7d3dXd3d3d3d4NC3UsLxd3dEiDfS7bdy4cVawvN/3e5dHZWEpJJsm/f7KxcYkI0AyCV3JzvONRvwQAAAAAAgHSQYQAAAAAAAACkAAJgAAAAAAAAkAoIgAEAAAAAAEAqIAAGAAAAAAAAqYAAGAAAAAAAAKQCAmAAAAAAAACQCgiAAQAAAAAAQCrIMQDwiwmFQgakAI/HYwAAAACgBEMADPBLCMWYH9EvYuC/Hhv9cvcIhgEAAABKIATAAMVM+AM/ITYlxD81KoQfH5OZmsLAX01GSVlBQ1tJ11DZ0ExBXYv3A1N8pOEwCg4cAMBvg2PTJRl+DuDXQQAMUJwyMzPpBzUtIS7e401yoA8DUoOOcaTSLTw41v2ViomlRvnqiuqa9PstI1OkoRakqisBsugA8Bv8OEwtKjIIg0ueH1/+on/xWwC/wt8fAAspIMlMp283GVm5qKgYv3vHqnUeIaekwgAUt0yxBD+PmHdP2RpF7TJq5hXEBV0G/mppMVH8uEgqJPh8pWMfdNOu5qhuXp5qChcDc10JhPF82cAkXkQKLzaNl5rB/L2ESrJCLUVGTznDRJWnofArsugAIOXY49RJSYkRYUHxcdFp6J9VIikqKWto6ugZGKuqqhX9UDJAFn9tAEzfbqmJcam+b1ODPPgxYRkCgayKZkhyZtzjY/46OhbNesvIyjMAxYeNfuM83sd9ec38CH0R90oPeq/Zt1vdokKC71cKg+k4SGZaqmb5qkzBY2B2Fy0zji/nHi3jl8hIBwrveaHJTGiyzIeoTHO19Eo6MpoK2PUBgGLBHlHMyMgICvCJiQo3MDQxNDZTUVFjoORJTk6MjY70+vpBW1ff2NSSQbcgKFZ/ZwCckZ4e7e7Gf7w/I8wrIyk+nZ+WLuAL0jNlGVk1flro9W265WtoWtgxAMWEjX7jfb+y0a+6ZQWKghiQVuy7TzEwtQeegqKGeDL/URzbnHje8QqvIhi2a56uUmY5TfqXp6PI/L2E0WkyMami0rc4CvsV/BPTa+plltNgCptFBwDgsNFvaEhARmZ69dr1GSjB6MAE3YxMLLy+ffb1+mJhVVFWVhYBMBQX2dmzZzB/F35aasTzq7IPNsvHBctnCOQpeSArR//L84RyjEBONpNJTYj1+aBXr4uMHJLAUi3Q39vEzIopsu9DXiXGRbrdYRD9gpiiVhmGx/Bjo1LDApWNLWUVlPJ59JqNfmU+x8i9jRJNU+hbWZex0uQpy9GN+auJ/kAdJdHNWlP0UlE8HJxMh/0zyygxGBAFAIqAvlfZ3G96Ot/K2paBUkJHRy82NioxIV5NPKwGfgigWPxtx9TT0tIiX1xVf3tUVTZTSVElQ80ozrJxrH2vWPs+oebN0lX1VJSVVZUUZeVVBClJTKGkCwQ+3t7p6el5LBMeFhYVGZnHAqEhIUEBgfkfdyExMTHA358pbsnJyTevXZ/2z6Rh/Qce3n+AXr1J48Y3dnA8evAQA/km6qpK6V+PtwyiX5BALUFRuwwVqG2wXZp/ugob/TJecbIfo0XT1prCWvp/d9Y3N0IrTfrzqSB6Kbzivr8yAAAFxx6npq/hmKhwRL+lDr1l9MbRLis3dhlAEf1V+QT6VFBqV93zurIsw1NUCde1Tq/dq6yxhYy8aPfR18dH7vJCpQQeo22p122ukmbBTs6kjZ8+cfL29Rt3bt1ia1q0atWpW9eOXTpzy9BDHNp34MHdu95eXjRZvkKF+o0ajvtnop6+PrsARcXzZs56eO8+BbRsTaOmTRYuXWplY53jgyYlJe3dsfPxw4cvnj2nyTJ6eo2aNB48fHi16vZMcVi6YCEX6xoaG71we3bu9BkqL1+0uP/gQQzkA/t1nBofw475jOgXJKmZV0iLiaS2oWpVRUVLl5pKHkevuSGvFF6LD59R9GulyUgx+vNFL9a3OPnXkXw9ZaGmYt4vIABAjtjj1IH+ngaGJgyUQvTGRYYHqqiURxIYisVfFQCnJidleLqoZiRlZvISdSooNRkjwwijnM8mfXLN5MkHyhjYKchn6pjznIZomVcq6Odn7oyZRw4clKyhSJhuMTHRg4YOpUmPL187t2nLRbaimq9f6Xb39u1rd25ramkFBwV3adsuJDhYciOP7j9o4uh0+tJFB8d6WR4xJSWlZ8fOH96/52oiIyIoQKXb5Vs37WtUZ4qGts9Gv2YW5j379KlcpYpFOUt2lm3lyjmuEhEevmPL1uCgoLYdOkhG/tKM/VlNDRHl5yn9+/MVFMTZPK71CcVl7p7F+zErC34aA6WKeGSsMhQDUwtR0tDO+5ebbUty7jGit17qo1+WKAaOSWOiUullSa+jj10fACgEyhqKOmrFxRgamzNQCmnplAn7HCg6P0hGlgEosr+qC3RiVKhs2NfI4BBPr4AEC6ekpIQM18Nqr48p+LkmebszCZHpKtrOMrY7zj9ydX1WoC07P3rMRb9NmjUbM2F8Oavv547OmzErPCyM9lxnTZ3KRr9qamrDR49q36kTu4C/rx8FjVS4feMGG/0aGhmNHDtmwJDBVKDJBo0bVa9ZI/uD7ti8hYt+e/XtO3DoENoyOzln2nSmyCicZgsVKlScOHlS0xbNTUxNnV8+P3Hu7LGzp3NchXLge3fuun7lqve3bwz8QN/IadFhBVpFFOEIc4p7eRKxMfbz/wrsdbCoheTdg/d7D73YVHbMZ0S/HHb0L3pZ6MVB/zcAKCjxl4ao/3NaagrGfC6l6I2jt4/eRPbXkgEomr8qAxwe6Kfg9S4mwEu+rI22WVWB+01DxZhUQ3N5OdWQgEwlfZPXCpp7zlzh84XfvvkJBBlNmzbI55avXrrMFihqXbZ6FRVmzpvbu0s3Tw+PSdOmamvrBAcGsb2UyZ0nj41NjNmFe3Xu0rpd2249e9Lkk4eP2AVWbVjXuGlT0Ubmztm+Zev4f/9RVMzhHL9Tx0+whW17dnfoLAqnJ8+YXr9mbVNzs6mzZ7Kz+Hz+gT17Hz98SBuvXbdOw8aNBw4bqq2tTbNePn++cskyKvQd0D82NvbU8eMBfv6NmzVbvma1lrbWlYuXdm/fwW7E1cWle4dOkg9d1b7a/CWLqZCenk4R74O79z68e8eG92X09Dp361qrTh0GxNg9ckG86IxNBc0yTEEJJQq8nMrwV6AWknfwxqZ/ZYOTRRPWiH7/IzoFWleJksD04mRqKSEJDAD+vj4RYaLjznoGBmYWlvlZBYMI/AX+gjfR1eVpPSfHgs4qImE6X+B5S6FSB6bE+PDuvaycrK3dH7siz98TANOnIszfRzXQi8lMV9Q3T0hKNkyOopBEWNbSw7yLcsMyhmbmT4+eYIQy8nIyCfEJe/cetrQ0s7TMV2cYCv/YQtce3dkC7YFt2bVDTV1dRUWFJr9++cLWUzqXjX4JteNHz1wty5VjJzW1tdjC7Rs3KYFsamamrqExY87sHB8xLjaW6yzdonUrtqCjo3PjwT1akb0iCP3JUyf+e/HcOXYuReB0o2D46JnTysrKlJd+7uZG9bExMR5fv7LLXL10SU5ObvPO7TT33Zs3bCVFtuySHEWl7wH5v2PHX75wQXIW5Y0Nypat36ghA9+PK4sv2SrunJyvq/7ycurbzMtlUjIkhtKJbRXUQthf7jzOYqUF5CPQyz0HlASWiUqViUgT0DECWfR/A5Bej+7euXzqdNSPLmxEV0+vY6+ejZq3yGMt5Az/GoV7Kym23LBmDVuu5+RE95S+ylLPzmLrfxF6OEqMiR59+rRss1zcXJ6eunjhV8TAAo9bCScHqbRcqFx/IlMyHNi7l+7Xb9nM/CF/VRdogSBdmCmkUIEnGus+IyE6Ijk8mJcmsDdQqlFWvqxs0tCBffoP6K2tTdkVYVRk1P37j2mVn2+WL2C7IqupqdnX+K+vsr6BARv9ks+fPrGFFq1bS67LRb+kjoMDWzh68FD9WnXM9cuOHDzkwpmzlMXN/qBcyEoJZCUlJa7e3MKCux7mmZOn2OiXwunZ8+dRBpgRh8Gb1q7LsqmRY8f06tuXnaRVUlJS7GtUHzZqFFtjaGQ0ZcZ0utFikitSYMxGv9WqV3/83O3WoweU/qXJ/bv3MPBDgbtkZl2Yx/BTmWDfzLAgYZC30OujMDKEEW+Rly7g+X1hEmIY6UYvRkLCf6fWf/7sfurkGa9vXkxhXb16g7aQkVGwA8l+vv579uwPCgxiCov+kLwzwKLYOE4UAGdqKzH5JjPflb3xTnuyNVTIUvOTJ5bAF6b9/Jvwj6MXB12gQUo8ifzI3fK/VlqmgG5MaXMv8u1O3+s/XSwlOWX7mjUHtm6rU79+41bfEwNUoMkD27bRLFqAKUncP3/ev2cvW3Z+/MT50ePcloyPi9+8fgPdM/ALcGHnj0mXDavXbFizlm6S9YTqaWHmF6PoV/QERI/l8v3JrF7D/EoKth0o+k2+vTDF+b+AU+DjTDfmd4mNi7t47nxuc2lWZFQU8xv9PRlgSqooa2pnyCgqMCkZUQFainL+smUNhdGCsC+yCZGKmnqMqrqerk2nDq1jYmJv33wg4PPfvHrXpUt7HR3tvLfs7+/HFpSUlXNLPnzz8GAL6mq5nl7So3evV89fnDp+nKu5ee063a5eurx9354svaC5/XvKEue2QS5tu3bzxlp16nTr1bOmXRWadHnyfw168PBhcxctpML7d2/dP32mQlhoaM3atSmRu2/XLpqsXKXKP1OnsPVcv2gSFBjIFpwa1LewFHUxqmZvf+/OHUpNU9CuoKDAQOFwo14JBMy39xkf3BL9/GRsqyvxMjIDvXkaWnL12zFaerKu13nB3oyhpbBhJ0ZJhZE+aWlpCxYsvX37Lh2LsbS0mDBhbPv2bVLine truncated
</div>
<h2>2 · home + cliproxy — reverted (no design change)</h2>
<div class="callout">
<b>home.tsx</b> and <b>cliproxy.tsx</b> reverted to their dev-branch state. Their existing designs are now codified as canonical references in <code>ui/docs/design-system.md</code>.<br><br>
<b>home</b> demonstrates the <b>HeroBar</b> pattern (1-row dense: logo + title + version + 4 inline stats).<br>
<b>cliproxy</b> demonstrates the <b>rail-anchored identity</b> pattern (no top chrome; brand inside the left rail of a Config 3-pane layout).
</div>
<h2>3 · Three identity-strip patterns (new in v1.1 docs)</h2>
<h2>1 · Final pages in this PR</h2>
<table>
<thead><tr><th>Pattern</th><th>Reference</th><th>When to use</th></tr></thead>
<thead><tr><th>Page</th><th>State</th><th>Pattern</th></tr></thead>
<tbody>
<tr><td><code>home.tsx</code></td><td>Reverted to original (matches dev)</td><td>HeroBar (canonical)</td></tr>
<tr><td><code>cliproxy.tsx</code></td><td>Reverted to original (matches dev)</td><td>Rail-anchored identity (canonical)</td></tr>
<tr><td><code>health.tsx</code></td><td>Bespoke redesign on top of the original migration</td><td>Bespoke (canonical for §1d)</td></tr>
</tbody></table>
<h2>2 · health redesign — before / after</h2>
<p class="lede">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.</p>
<div class="compare">
<div><label>Before (dev branch baseline)</label><img src="data:image/png;base64,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 truncated
<div><label>After (final redesign)</label><img src="data:image/png;base64,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 truncated
</div>
<h2>3 · Four identity-strip patterns (v1.2 docs)</h2>
<table>
<thead><tr><th>Pattern</th><th>Reference</th><th>When</th></tr></thead>
<tbody>
<tr><td><b>HeroBar</b> (1-row dense)</td><td><code>pages/home.tsx</code></td><td>Dashboard pages with ≤4 hero stats packed tight</td></tr>
<tr><td><b>Rail-anchored</b> (no top chrome)</td><td><code>pages/cliproxy.tsx</code></td><td>Multi-entity Config pages where the rail already carries identity</td></tr>
<tr><td><b>PageHeader</b> (title + desc + actions)</td><td><code>pages/health.tsx</code></td><td>Pages where description / status info is non-redundant context</td></tr>
<tr><td><b>Rail-anchored</b> (no top chrome)</td><td><code>pages/cliproxy.tsx</code></td><td>Multi-entity Config pages where rail carries identity</td></tr>
<tr><td><b>PageHeader</b> (title + desc + actions)</td><td>None yet</td><td>Pages where description / status info is non-redundant context</td></tr>
<tr><td><b>Bespoke</b> (full custom)</td><td><code>pages/health.tsx</code></td><td>Severity / priority-driven pages with custom hierarchy</td></tr>
</tbody></table>
<h2>4 · What's actually in this PR</h2>
<table>
<thead><tr><th>File</th><th>Change</th></tr></thead>
<tbody>
<tr><td>ui/src/pages/health.tsx</td><td>Migrated to PageShell + PageHeader + Monitor archetype</td></tr>
<tr><td>ui/src/pages/health.tsx</td><td>Bespoke redesign — replaces the Monitor migration with priority + audit hierarchy</td></tr>
<tr><td>ui/src/components/health/health-status-ribbon.tsx</td><td>NEW — top status strip (severity, KPIs, version, actions)</td></tr>
<tr><td>ui/src/components/health/health-priority-card.tsx</td><td>NEW — clickable card surfacing a single failed/warning check</td></tr>
<tr><td>ui/src/components/health/health-priority-list.tsx</td><td>NEW — grid of priority cards under HEALTH.ATTENTIONREQUIRED</td></tr>
<tr><td>ui/src/components/health/health-audit-section.tsx</td><td>NEW — collapsible section for the lower audit grid</td></tr>
<tr><td>ui/src/components/layout/layout.tsx</td><td>Drop backdrop-blur on global header (interferes with health backdrop)</td></tr>
<tr><td>ui/src/pages/home.tsx</td><td>Reverted to original (matches dev)</td></tr>
<tr><td>ui/src/pages/cliproxy.tsx</td><td>Reverted to original (matches dev)</td></tr>
<tr><td>ui/src/components/monitor-layout/kpi.tsx</td><td>KpiCard gains optional <code>onClick</code> prop</td></tr>
<tr><td>ui/docs/design-system.md</td><td>Restructured around three identity-strip patterns</td></tr>
<tr><td>ui/docs/design-decisions.md</td><td>v1.1 revision row capturing the rationale</td></tr>
<tr><td>ui/src/pages/_styleguide.tsx</td><td>Intro copy updated to mention three patterns</td></tr>
<tr><td>ui/src/components/monitor-layout/kpi.tsx</td><td>KpiCard gains optional onClick prop (still useful for future monitor pages)</td></tr>
<tr><td>ui/docs/design-system.md</td><td>v1.2 — four identity-strip patterns, Bespoke added as §1d</td></tr>
<tr><td>ui/docs/design-decisions.md</td><td>v1.2 revision row capturing the bespoke health redesign</td></tr>
<tr><td>ui/docs/health-redesign/</td><td>Verification report and screenshots from the redesign exercise</td></tr>
</tbody></table>
<p style="margin-top:32px;color:var(--dim);font-size:12px">
PR <a style="color:var(--accent)" href="https://github.com/kaitranntt/ccs/pull/1089">#1089</a> · plan <code>plans/260425-1132-ccs-dashboard-design-system/</code>
PR <a style="color:var(--accent)" href="https://github.com/kaitranntt/ccs/pull/1089">#1089</a> · plan <code>plans/260425-1132-ccs-dashboard-design-system/</code> · health brief <code>plans/reports/handoff-260425-1417-health-page-redesign.md</code>
</p>
</div></body></html>
+17 -3
View File
@@ -2,7 +2,7 @@
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.
Some pages legitimately need a bespoke design (the redesigned `health` page is the current example) — when content shape demands custom hierarchy, the system should step out of the way rather than force the page into a wrong-fit archetype.
> Live preview in dev: `bun run dev` then visit `/_styleguide`.
@@ -63,7 +63,7 @@ Page identity (brand + page-level CTA + status) lives **inside the left rail**.
### 1c. `PageHeader` — title-row chrome
**Canonical reference:** `pages/health.tsx`
**Canonical reference:** none yet (was `health.tsx` until its bespoke redesign — see §1d).
```
┌────────────────────────────────────────────────────────────────────┐
@@ -81,6 +81,19 @@ Traditional title row with description and trailing actions.
**API:** `<PageHeader title description status actions />` — title + description on left, status badges + action buttons on right.
### 1d. Bespoke — full custom design
**Canonical reference:** `pages/health.tsx`
When a page's content shape demands its own hierarchy (priority-driven sections, dynamic backgrounds tied to status, custom card primitives like `HealthStatusRibbon` / `HealthPriorityCard`), the design system gets out of the way. Bespoke pages still respect global concerns (privacy mode, theme, sidebar) but build their own layout from scratch.
**Use it when:**
- None of the three patterns above fits without distorting the content
- The page's information hierarchy is genuinely unique (e.g. severity-driven priority surfaces with secondary audit lists)
- A bespoke implementation will be clearly better than forcing a fit
**Cost:** higher LOC, no reuse, no consistency — only justified when content demands it.
### Decision table
| Page shape | Identity strip |
@@ -88,6 +101,7 @@ Traditional title row with description and trailing actions.
| 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 |
| Severity / priority-driven page with custom hierarchy | **Bespoke** (health pattern) |
| Wizard / login / dialog | None — bespoke shell |
---
@@ -124,7 +138,7 @@ Left rail = `ListPane` (multi-entity) or `SectionRail` (single-entity, with `Int
### 2b. Monitor — KPI row + 12-col grid
**Canonical reference:** `pages/health.tsx`
**Canonical reference:** none in this PR. Health used to be the reference but went bespoke (§1d). The primitives (`MonitorLayout`, `KpiRow`, `KpiCard`, `MonitorGrid`, `MonitorCard`) ship and remain available; first page to genuinely need them becomes the next reference.
```
┌────────────────────────────────────────┐
Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

After

Width:  |  Height:  |  Size: 134 KiB