mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-03 05:19:21 +00:00
docs(ui): add phase 2 visual preview with before/after screenshots
Self-contained HTML report at ui/docs/design-system-phase2-preview.html with embedded base64 before/after screenshots so reviewers can scrub the cliproxy / home / health migrations side-by-side without leaving GitHub. Captured via Playwright with Privacy mode on; data anonymized.
This commit is contained in:
1 parent
9a2c09357a
commit
339fcd81e6
7 files changed
+91
No files matched your search
@@ -0,0 +1,91 @@
|
||||
<!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>
|
||||
<style>
|
||||
:root{--bg:#0b0d12;--panel:#11151c;--line:#222a37;--ink:#e6edf6;--muted:#8a95a8;--dim:#5a6478;--accent:#7cc3ff;--good:#5ee2a0;--warn:#f5c46b;--bad:#ff7676}
|
||||
*{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}
|
||||
h2{font-size:18px;margin:36px 0 12px;border-bottom:1px solid var(--line);padding-bottom:6px}
|
||||
h3{font-size:14px;margin:18px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
|
||||
p{color:#c8d2e0}
|
||||
.lede{color:var(--muted);max-width:80ch}
|
||||
.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}
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
<span class="pill accent">Phase 2 / 4</span>
|
||||
<span class="pill good">Privacy mode ON</span>
|
||||
<span class="pill">Before / After</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,iVBORw0KGgoAAAANSUhEUgAABQAAAALQCAIAAABAH0oBAAAQAElEQVR4nOydBUAUSxjHB47ulC4VkVCwaQO7u7u7u7uwu7u7O5ESE5RQRLq74Y54397geY+SVOL7vX3r7OzMbHB3u//5TwilJMcRBKmVuDo+NbfuQBAEQRAEQRAEqR0IEgRBEARBEARBEASpBaAARhAEQRAEQRAEQWoFKIARBEEQBEEQBEGQWgEKYARBEARBEARBEKRWgAIYQRAEQRAEQRAEqRWgAEYQBEEQBEEQBEFqBSiAEQRBEARBEARBkFqBEEEQpJLJzc0lSC1AQECAIAiCIAiCIFUYFMAIUinkciG/1C9q4BoPVb+8NYphBEEQBEGQKggKYASpYHJ/wU5OSA8PyogNZyfF52SkE6RGIygmLiIjL6aoJq6mLSItJ/ALUnHUhmoUrDhAEOSvgXXTVRl8HCCVBwpgBKlIcnJy4IGamZyY9P1TWog/QWoNUMeRAUtUWIL3BwlNPZkGTUSlZeH5LShYrqEWalVTAnTREQT5C/yqpmaCBGVw1ePXjz/zLz4LkMqg5gvgXBAkOVnw6ybIEoqNjQ98ft609wQhMQmCIBVNDpfkwO/x7s40RlReSUrHgBtQJEiNJjM+lp0YA4Fk/29Q9wGLvKmltE4DiCmbBuY1JchNYrNCUgWi0wUSMgUysknNJVeMlSsnSpTFszUlBWREKsNFRxCklkPrqVNTU6IjQ5MS4zKxfVaVRFRMXEZWQVlFQ1JSqvxVyQiSjxorgOHXLSMlMSPgc0bod3Z8ZDaHw5KQDU/LSXQ4H6SgoGs3WJAlTBCk4qDqN/G7R6LPR/JL+qLurT3A35r+uaV1DZIDvoEMhnqQnMwM2QaNSek1MH1Fy0lkC3nHCQamkNoByHuBiDQSkSb4JTZHRyrLUEFQVgRffRAEqRBojWJ2dnZosH98bJSKmqaahraEhBRBqh5paSkJcTF+377IK9bR0NIj2CwIqVBqpgDOzsqK83ZlO5zIjvTLTk3KYmdmcdicrBwWYUmxMyMe7Fds0FRW15ggSAVB1W9SwDeqfqX1DEAFEaS2Qv/6oIHh8yAgIirD3Sy5iqMfJ4GfSSIfogltmqcollNXFv4VUBAlNZfcuEzB+Awm9CMRZL9IUEpWM+WcujKkrC46giAID6p+I8KDs3OymrSwJkgVBiomYFHX1PX74RXg56NbryGLxUIBjFQUrKVLF5GaBTszI9rtHuvlHuHEMOFsjjCYBywh+F9YIFeIcIRYOSQjOcH/i7JFH0EhNIFrNSFBPzW165FykzfkVUpijOtTguoX4SIqp0QECDshNiMyRFxDjyUiVsLaa6p+Bb3ihT7HMtsgfU0UST1ZAXEhWEiNhrlABTFmqS/L3CrQw2FpUO2foyRGcEAUBEHKAfyuUu83K4tdr74RQaoJCgrKCQmxKclJUtxhNfBBgFQINa1OPTMzM+bdPenP5yRZOWKiEtlS6ol6bRLMBiWYDYnQscuSVJYQF5cUE2UJS3DSU0mZyOJw/H/+zMrKKiZNVGRkbExMMQkiwsNDg0NKPu5CSkpKcFAQqWjS0tIe3X+wYNacccNHnjlxEu7enGnT25hbnjt1miAlhmmqCvbv988E1S/CB3wSROWVIACfDdqk+Y9ZqPolfomsr3HMdn3Z3OZ1arbrWxS59WTh8iHA3Aq/xLw7gyAIUnpoPTX8DMfHRqH6rXbAnwz+cPDKyhu7DEHKSY3yE+BbAdautO8DcRYREJWIUqyf1WKQqoauoDDz+hjg7y90Z7VYsgCR11Put1xMtnSdM6HwKxcvPXnw8OnjxzSmQ6dOvfr17dmnNy8NHOL08ZMvnz376ecHmw0MDKxb206bNVO5Th2aAFTxisVLXj1/AYKWxrRu13b1+vX19OsXetDU1NRjBw85vHr17q0bbCopK7du22b0+PGmTcxIRbB+1Wqe1lXTUH/n+vb6lasQ3rhm7fDRowhSAujPcUZSPB3zGdUvwo+UjkFmfAx8NiTrNZKQU4SPSjG117whr0Q+cqvPQP3WkyW1GLh85mb9SBT+GMNWFs+VFS3+BiIIghQKracOCfJVUdMkSDUE/nAxUSESEg3QBEYqhBolgDPSUrN9nSSzU3NyBFIUDMTaThEkubGO11I9XXIEhEMEVYxFhHMUdASsxsjpGJb2+7N80eKzJ0/xx4AShiU+Pm7U2LGw+d3nW+8uXXnKlon59g2WZ0+e3H/6RFZOLiw0rE/XbuFhYfyFvH7xsq2l1ZXbt8wtLfIdMT09fWDP3l88PHgxMdHRIFBhufP4kVnTJqR8QPlU/Wrr6gwcMsSkUSPdunp0l5GJSaFZoqOiDu7dFxYa2rVHD37lX5uhj9WMcMafB/v3zxlEuG4e79OXyw3z1hSBX7vywc4kSLWCOzKWEmhg+ISIycgX/+SmnyUh73jmT1/r1S+F0cDxmSQ2A25LVss6+OqDIEgZANeQaaiVGK+moUOQaoicglKkVwjTP0iQRRCk3NSoJtApsRGsyG8xYeG+fsHJulapqcnZLmekPp4XCXRJ/elNkmOyJOQdBY0O3njt4vK2VCU7vnbgqd+2dnZTZkyvWy+v7+iKRUuiIiPhzXXJ/PlU/UpJSY2fPKl7r140QVBAIIhGCDx5+JCqXzV19YlTp4wYMxoCsGnTpnWTZk0LHvTgnr089Tto6NCRY8dAyXRz2YKFpNyAnKYBA4OGM+fOadehvaaWluN7t4vXr52/dqXQLOCBHzt0+MHdez9//CDIL+AXOTMuslRZGIWTW5juFeDTxvieXyOg82DBJ6T4Frx5LfQSMuiYz6h+edDRv+C2wM3B9m8IgpQW7o8G0/45MyMdx3yupsAfDv588EekT0uCIOWjRjnAUSGBIn7u8cF+wqr68tqNOd6P1ETjM9R0hIUkw4NzxOpofhSRPXr1Lpud++NHIIeT3a6dTQlLvnf7Dg2Aat2wdQsEFq9YPrhPP9/v3+csmC8vrxAWEkpbKQNP3zhoaGrQxIN69+ncrWu/gQNh882r1zTBlp3b27RrxxSyfNmBvfumz54lKlpIH7/LFy7SwP6jR3r0ZuT03EULrZu10NLRnr90Md3FZrNPHj3m8OoVFN6iVUvbNm1GjhsrLy8Pu967uW1etwECQ0cMT0hIuHzhQnBgUBs7u432W+Xk5e7eun3kwEFaiIuTU/8evfgP3djMdOW6tRDIysoCxfvy2fMv7u5U3ispK/fu17d5y5YE4ULfyDlJTI9NEVklUlpy+QIChYWRGgF8QooXb9T+ZYWlMRv1Uf3+hukCrSgGJjDcnBw5MTSBEQQJCvCPjmTqnZVVVLR19UqSBQcRqAHUgD+ii5OzhZVlaXeVk9wsNsf3sYhhD1Jl+OLuwRJiGRn/sxl5ao4Ahm9FZJC/ZIgfyckSraOTnJqmlhYLkiRXVe+7Th9xWyU1bR3ncxdJrqCwkGByUvKxY2f09LT19ErUGAbkHw30HdCfBuANbO/hg1LS0hISErD5zceHxoOdS9UvAJ/j129d9OrWpZuy8nI08OThIzCQtbS1pWVkFi1bWugRExMSeI2lO3TuRAMKCgoPXz6HjHRGELjk+TNn37p+ne4FBQ4LiOFzV6+Ii4uDL+3m6grxCfHx3799o2nu3b4tJCS059AB2Ov+6RONBGVLU/IQFcsT5LOnTr9z8yb/LvCNVVRVrVvbEiSvXpk7ZSu3cXKJZv0VKKxts0ARm/ySGKme0E8FfELok7uYXqyQQDgaW7kXApjAgrEZgtGZHKgjYGH7NwSpvbx+9vTO5Suxv5qwAYrKyj0HDWzdvkMxudAzrDGU7U8J2nKnvT0NW1hZwRrsq3zxdBeNryTgcGCMMUdfuKDALidXJ+fLt25WhgbmfH+cfGmURMfV4tYzSdXg5LFjsN6xdw/5R9SoJtAcTlZuTi5IBQFmrPvs5LjotKgwgUyOmYpYU1VhVVbq2JFDho8YLC8P7kpubEzsixcOkOXPxbI5tCmylJSUWdPfbZXrqKhQ9Qt4eXrSQIfOnfnz8tQv0NLcnAbOnTpt3bylTh3ViaPH3Lx6DVzcggflSVYwkMXExHjxOrq6vPkwr166TNUvyOmlK1eAA0y4Mnj3tu35ipo4dcqgoUPpJmRJT083a9pk3KRJNEZNXX3eooWwQDL+jCCMqfo1bdLEwc318euXYP/C5okjRwnyi1I3ycyfWICwM0hYQE5kaG7oz1y/r7kx4YRbokAWRyDQhyTHk9oN3Izk5N9d6728vC9fuur3w4+UlXv3HkIJ2dmlq0gODAg6evREaEgoKStwIcU7wIw2TmQEcI68GCkxgitd6CJwxZfGQCBfzB9OLJmdm/nnX8J/DtwcbAKN1BLexHzlLSXPlZnDgYVUN57HfD4U8OCPydLT0g/Y25/ct7+ltXWbTnnGAARg8+T+/bALEpCqhLeX14mjx2jY0eGN42uHolImJSbt2bET1gSpBHiy89em086t9jvtt8HCHw9APCQmlQyoX+YEmGM55Z3MVntSmYgY9QD1m/Zkdbrjb8HJ8XeEhfwtEhITb12/UdRe2BUTG0v+IjXHAQZTRVxWPltQVISkZ8cGy4kKBbFU1XLjOJE+rOQYUVllIimtrKjfq0fn+PiEJ49ectjsTx/c+/TprqAgX3zJQUGBNCAmLl6U+fDj+3cakJYqsnvJgMGDPri9u3zhAi/m0f0HsNy7fefA8aP5WkHz3u/BJS6qQJ5tu23PruYtW/YbNLCZcSPYdHrzvw/06PHjlq9ZDQEP98/enl4QiIyIaNaiBRi5xw8fhk2TRo1mzZ9H43ntooHQkBAasLKx1tVjmhiZmpk9f/oUrGkQ7SIiIgQpG7xRrzgc8sMj+4trSmCgoFETMYHsnJCfAjJyQtbdiJwyy+WBQNhPoqaXa9uLiEmQ2kdmZuaqVeufPHkGdTF6erLine 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>
|
||||
<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>
|
||||
<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.
|
||||
</div>
|
||||
|
||||
<h2>6 · Quality gates</h2>
|
||||
<table>
|
||||
<thead><tr><th>Gate</th><th>Result</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>
|
||||
</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>
|
||||
</p>
|
||||
</div></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Reference in new issue
Block a user