diff --git a/ui/docs/design-system-phase2-preview.html b/ui/docs/design-system-phase2-preview.html new file mode 100644 index 00000000..d728a858 --- /dev/null +++ b/ui/docs/design-system-phase2-preview.html @@ -0,0 +1,91 @@ + + +CCS Dashboard Design System — Phase 2 Reference Migrations + +
+
+
+

CCS Dashboard Design System — Phase 2

+

Three reference pages migrated to the new shell — cliproxy (Config + ListPane), home (Monitor), health (Monitor + visual improvements). Pure layout migrations with no behavior changes for cliproxy/home; health gets cleaner hierarchy and KPI prominence.

+
+
+ Phase 2 / 4 + Privacy mode ON + Before / After +
+
+ +

1 · home — Monitor archetype

+

Hero stat tiles → KpiRow. AuthMonitor + ErrorLogsMonitor wrapped as MonitorCards. Logs callout preserved.

+
+
+
+
+ +

2 · cliproxy — Config archetype (multi-entity, ListPane)

+

Master-detail layout wrapped in PageShell + PageHeader + ConfigLayout. 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).

+
+
+
+
+ +

3 · health — Monitor archetype + visual improvements

+

HealthGauge becomes the hero inside a MonitorCard variant="terminal". HealthStatsBar replaced by KpiRow (Checks · Passed · Warnings · Errors) — clear severity hierarchy. Each health group becomes its own MonitorCard. Terminal aesthetic preserved per the locked decision (#4).

+
+
+
+
+ +

4 · LOC delta

+ + + + + + +
PageBeforeAfterΔNotes
home.tsx208173-17%InlineStat helper retired in favor of KpiCard
cliproxy.tsx600~605+1%Refactor extracts sidebar/detail to local consts; nearly net-neutral. ProviderEditor unchanged.
health.tsx263~245-7%Hero markup simplified; KpiRow replaces ad-hoc stats bar. Visuals upgraded.
+ +

5 · Behavior preservation

+
+cliproxy — every existing flow still works: provider selection persists to localStorage and URL deep-link, Quick Setup wizard mounts via dialog, Add Account dialog from URL action=auth, account safety warning, sync, restart, bulk pause/resume, variant delete with confirm.

+home — overview/shared queries unchanged, navigation links to /providers /cliproxy /accounts /health /logs preserved, configuration warning Alert preserved, AuthMonitor and ErrorLogsMonitor mounted as MonitorCard children with no prop changes.

+health — useHealth hook unchanged, copy doctor + refresh actions preserved (now in PageHeader), HealthGauge + HealthGroupSection components reused as-is. +
+ +

6 · Quality gates

+ + + + + + + +
GateResult
bun run validate (typecheck + lint + format)green
bun run buildgreen
Privacy mode in screenshotsverified — eye-off icon top-right
Anonymized data onlyverified
+ +

+Source: plans/260425-1132-ccs-dashboard-design-system/ · Phase 1 PR: #1088 +

+
\ No newline at end of file diff --git a/ui/docs/screenshots-phase2/after-01-home.png b/ui/docs/screenshots-phase2/after-01-home.png new file mode 100644 index 00000000..e1f42a01 Binary files /dev/null and b/ui/docs/screenshots-phase2/after-01-home.png differ diff --git a/ui/docs/screenshots-phase2/after-02-cliproxy.png b/ui/docs/screenshots-phase2/after-02-cliproxy.png new file mode 100644 index 00000000..be9198e5 Binary files /dev/null and b/ui/docs/screenshots-phase2/after-02-cliproxy.png differ diff --git a/ui/docs/screenshots-phase2/after-03-health.png b/ui/docs/screenshots-phase2/after-03-health.png new file mode 100644 index 00000000..52ae20ed Binary files /dev/null and b/ui/docs/screenshots-phase2/after-03-health.png differ diff --git a/ui/docs/screenshots-phase2/before-01-home.png b/ui/docs/screenshots-phase2/before-01-home.png new file mode 100644 index 00000000..501cafbf Binary files /dev/null and b/ui/docs/screenshots-phase2/before-01-home.png differ diff --git a/ui/docs/screenshots-phase2/before-02-cliproxy.png b/ui/docs/screenshots-phase2/before-02-cliproxy.png new file mode 100644 index 00000000..4ca438e1 Binary files /dev/null and b/ui/docs/screenshots-phase2/before-02-cliproxy.png differ diff --git a/ui/docs/screenshots-phase2/before-03-health.png b/ui/docs/screenshots-phase2/before-03-health.png new file mode 100644 index 00000000..4e36b4f7 Binary files /dev/null and b/ui/docs/screenshots-phase2/before-03-health.png differ