mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-11 18:12:36 +00:00
docs(ui): drop redundant home/cliproxy screenshots from phase2 report
home and cliproxy were reverted to their original designs; before/after screenshots would show identical content. Keep only health migration screenshots and refocus the HTML report on the design-system docs restructure (three identity-strip patterns).
This commit is contained in:
1 parent
1a2fd848f0
commit
d9332907cc
5 files changed
+31
-44
No files matched your search
@@ -1,8 +1,8 @@
|
||||
<!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 Reference Migrations</title>
|
||||
<title>CCS Dashboard Design System — Phase 2 (revised)</title>
|
||||
<style>
|
||||
:root{--bg:#0b0d12;--panel:#11151c;--line:#222a37;--ink:#e6edf6;--muted:#8a95a8;--dim:#5a6478;--accent:#7cc3ff;--good:#5ee2a0;--warn:#f5c46b;--bad:#ff7676}
|
||||
: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}
|
||||
.wrap{max-width:1240px;margin:0 auto;padding:32px 24px 80px}
|
||||
h1{font-size:28px;margin:0 0 6px}
|
||||
@@ -13,79 +13,66 @@ p{color:#c8d2e0}
|
||||
.pill{display:inline-block;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:#1c2230;color:var(--muted);font-size:11px;margin-right:4px}
|
||||
.pill.good{color:var(--good);border-color:#274d3a}
|
||||
.pill.accent{color:var(--accent);border-color:#264866}
|
||||
.shot{display:block;width:100%;border:1px solid var(--line);border-radius:10px;background:#000;margin:8px 0}
|
||||
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
|
||||
.compare>div{display:flex;flex-direction:column;gap:6px}
|
||||
.compare label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
|
||||
.compare img{width:100%;border:1px solid var(--line);border-radius:8px}
|
||||
@media (max-width:980px){.compare{grid-template-columns:1fr}}
|
||||
.callout{border-left:3px solid var(--accent);background:#0e1620;padding:10px 14px;border-radius:0 6px 6px 0;margin:10px 0}
|
||||
table{width:100%;border-collapse:collapse;font-size:13px}
|
||||
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
|
||||
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
|
||||
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
|
||||
.callout{border-left:3px solid var(--accent);background:#0e1620;padding:10px 14px;border-radius:0 6px 6px 0;margin:10px 0}
|
||||
</style></head><body>
|
||||
<div class="wrap">
|
||||
<header class="head">
|
||||
<div>
|
||||
<h1>CCS Dashboard Design System — Phase 2</h1>
|
||||
<p class="lede">Three reference pages migrated to the new shell — <b>cliproxy</b> (Config + ListPane), <b>home</b> (Monitor), <b>health</b> (Monitor + visual improvements). Pure layout migrations with no behavior changes for cliproxy/home; health gets cleaner hierarchy and KPI prominence.</p>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<span class="pill accent">Phase 2 / 4</span>
|
||||
<span class="pill good">Privacy mode ON</span>
|
||||
<span class="pill">Before / After</span>
|
||||
<span class="pill good">Bot score 93</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h2>1 · home — Monitor archetype</h2>
|
||||
<p class="lede">Hero stat tiles → <code>KpiRow</code>. AuthMonitor + ErrorLogsMonitor wrapped as <code>MonitorCard</code>s. Logs callout preserved.</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,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 truncated
|
||||
</div>
|
||||
|
||||
<h2>2 · cliproxy — Config archetype (multi-entity, ListPane)</h2>
|
||||
<p class="lede">Master-detail layout wrapped in <code>PageShell</code> + <code>PageHeader</code> + <code>ConfigLayout</code>. 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).</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,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 truncated
|
||||
</div>
|
||||
|
||||
<h2>3 · health — Monitor archetype + visual improvements</h2>
|
||||
<p class="lede">HealthGauge becomes the hero inside a <code>MonitorCard variant="terminal"</code>. HealthStatsBar replaced by <code>KpiRow</code> (Checks · Passed · Warnings · Errors) — clear severity hierarchy. Each health group becomes its own <code>MonitorCard</code>. Terminal aesthetic preserved per the locked decision (#4).</p>
|
||||
<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,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 truncated
|
||||
</div>
|
||||
|
||||
<h2>4 · LOC delta</h2>
|
||||
<table>
|
||||
<thead><tr><th>Page</th><th>Before</th><th>After</th><th>Δ</th><th>Notes</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>home.tsx</td><td>208</td><td>173</td><td>-17%</td><td>InlineStat helper retired in favor of KpiCard</td></tr>
|
||||
<tr><td>cliproxy.tsx</td><td>600</td><td>~605</td><td>+1%</td><td>Refactor extracts sidebar/detail to local consts; nearly net-neutral. ProviderEditor unchanged.</td></tr>
|
||||
<tr><td>health.tsx</td><td>263</td><td>~245</td><td>-7%</td><td>Hero markup simplified; KpiRow replaces ad-hoc stats bar. Visuals upgraded.</td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h2>5 · Behavior preservation</h2>
|
||||
<h2>2 · home + cliproxy — reverted (no design change)</h2>
|
||||
<div class="callout">
|
||||
<b>cliproxy</b> — 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.<br><br>
|
||||
<b>home</b> — 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.<br><br>
|
||||
<b>health</b> — useHealth hook unchanged, copy doctor + refresh actions preserved (now in PageHeader), HealthGauge + HealthGroupSection components reused as-is.
|
||||
<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>6 · Quality gates</h2>
|
||||
<h2>3 · Three identity-strip patterns (new in v1.1 docs)</h2>
|
||||
<table>
|
||||
<thead><tr><th>Gate</th><th>Result</th></tr></thead>
|
||||
<thead><tr><th>Pattern</th><th>Reference</th><th>When to use</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>bun run validate (typecheck + lint + format)</td><td><span class="pill good">green</span></td></tr>
|
||||
<tr><td>bun run build</td><td><span class="pill good">green</span></td></tr>
|
||||
<tr><td>Privacy mode in screenshots</td><td><span class="pill good">verified — eye-off icon top-right</span></td></tr>
|
||||
<tr><td>Anonymized data only</td><td><span class="pill good">verified</span></td></tr>
|
||||
<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>
|
||||
</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/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>
|
||||
</tbody></table>
|
||||
|
||||
<p style="margin-top:32px;color:var(--dim);font-size:12px">
|
||||
Source: <code>plans/260425-1132-ccs-dashboard-design-system/</code> · Phase 1 PR: <a style="color:var(--accent)" href="https://github.com/kaitranntt/ccs/pull/1088">#1088</a>
|
||||
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>
|
||||
</p>
|
||||
</div></body></html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 187 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB |
Reference in new issue
Block a user