diff --git a/ui/docs/design-system-phase2-preview.html b/ui/docs/design-system-phase2-preview.html index 92292b29..76107c7a 100644 --- a/ui/docs/design-system-phase2-preview.html +++ b/ui/docs/design-system-phase2-preview.html @@ -1,8 +1,8 @@ -CCS Dashboard Design System — Phase 2 Reference Migrations +CCS Dashboard Design System — Phase 2 (revised)
-

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.

+

CCS Dashboard Design System — Phase 2 (revised scope)

+

After user feedback caught a density regression, Phase 2 was scoped down: health stays migrated to Monitor archetype, home and cliproxy revert to their original designs. The design system docs are restructured to extract THREE identity-strip patterns from those canonical references.

Phase 2 / 4 - Privacy mode ON - Before / After + Bot score 93
-

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

+

1 · health — Monitor archetype migration

+

HealthGauge becomes the hero inside MonitorCard variant="terminal". KpiRow with severity tones replaces HealthStatsBar. Each HealthGroupSection becomes its own MonitorCard.

-

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

+

2 · home + cliproxy — reverted (no design change)

-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. +home.tsx and cliproxy.tsx reverted to their dev-branch state. Their existing designs are now codified as canonical references in ui/docs/design-system.md.

+home demonstrates the HeroBar pattern (1-row dense: logo + title + version + 4 inline stats).
+cliproxy demonstrates the rail-anchored identity pattern (no top chrome; brand inside the left rail of a Config 3-pane layout).
-

6 · Quality gates

+

3 · Three identity-strip patterns (new in v1.1 docs)

- + - - - - + + + +
GateResult
PatternReferenceWhen to use
bun run validate (typecheck + lint + format)green
bun run buildgreen
Privacy mode in screenshotsverified — eye-off icon top-right
Anonymized data onlyverified
HeroBar (1-row dense)pages/home.tsxDashboard pages with ≤4 hero stats packed tight
Rail-anchored (no top chrome)pages/cliproxy.tsxMulti-entity Config pages where the rail already carries identity
PageHeader (title + desc + actions)pages/health.tsxPages where description / status info is non-redundant context
+ +

4 · What's actually in this PR

+ + + + + + + + + +
FileChange
ui/src/pages/health.tsxMigrated to PageShell + PageHeader + Monitor archetype
ui/src/pages/home.tsxReverted to original (matches dev)
ui/src/pages/cliproxy.tsxReverted to original (matches dev)
ui/src/components/monitor-layout/kpi.tsxKpiCard gains optional onClick prop
ui/docs/design-system.mdRestructured around three identity-strip patterns
ui/docs/design-decisions.mdv1.1 revision row capturing the rationale
ui/src/pages/_styleguide.tsxIntro copy updated to mention three patterns

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

\ 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 deleted file mode 100644 index 060572c3..00000000 Binary files a/ui/docs/screenshots-phase2/after-01-home.png and /dev/null differ diff --git a/ui/docs/screenshots-phase2/after-02-cliproxy.png b/ui/docs/screenshots-phase2/after-02-cliproxy.png deleted file mode 100644 index fe5d077e..00000000 Binary files a/ui/docs/screenshots-phase2/after-02-cliproxy.png and /dev/null differ diff --git a/ui/docs/screenshots-phase2/before-01-home.png b/ui/docs/screenshots-phase2/before-01-home.png deleted file mode 100644 index 501cafbf..00000000 Binary files a/ui/docs/screenshots-phase2/before-01-home.png and /dev/null differ diff --git a/ui/docs/screenshots-phase2/before-02-cliproxy.png b/ui/docs/screenshots-phase2/before-02-cliproxy.png deleted file mode 100644 index 4ca438e1..00000000 Binary files a/ui/docs/screenshots-phase2/before-02-cliproxy.png and /dev/null differ