mirror of
https://github.com/tiennm99/ccs.git
synced 2026-10-03 05:19:21 +00:00
docs(ui): add design system visual preview + screenshots
Self-contained HTML report at ui/docs/design-system-preview.html with embedded base64 screenshots so the PR review and the report itself remain viewable without external hosting. Companion to the live /_styleguide route. Screenshots captured with Privacy mode ON via Playwright; all data anonymized (Provider A/B/C, fake metrics) -- no real account names, emails, or OAuth identifiers.
This commit is contained in:
1 parent
64e78f6e69
commit
e0d2ab0444
5 files changed
+122
No files matched your search
@@ -0,0 +1,122 @@
|
||||
<!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 1 Preview</title>
|
||||
<style>
|
||||
:root{--bg:#0b0d12;--panel:#11151c;--line:#222a37;--ink:#e6edf6;--muted:#8a95a8;--dim:#5a6478;--accent:#7cc3ff;--good:#5ee2a0;--warn:#f5c46b;--bad:#ff7676;--chip:#1c2230}
|
||||
*{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}
|
||||
code,pre,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
|
||||
.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:13px;margin:18px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
|
||||
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:var(--chip);color:var(--muted);font-size:11px;margin-right:4px}
|
||||
.pill.good{color:var(--good);border-color:#274d3a}
|
||||
.pill.warn{color:var(--warn);border-color:#4d3f22}
|
||||
.pill.accent{color:var(--accent);border-color:#264866}
|
||||
.row{display:flex;gap:16px;flex-wrap:wrap}
|
||||
.shot{display:block;width:100%;border:1px solid var(--line);border-radius:10px;background:#000;margin:8px 0}
|
||||
.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}
|
||||
.tree{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#cdd6e3;background:#0e1219;border:1px solid var(--line);border-radius:8px;padding:14px;white-space:pre}
|
||||
.tree b{color:var(--accent);font-weight:600}
|
||||
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
|
||||
@media (max-width:980px){.grid2{grid-template-columns:1fr}}
|
||||
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
|
||||
.kbd{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#10151d;border:1px solid var(--line);padding:1px 6px;border-radius:4px;color:#cdd6e3}
|
||||
</style></head><body>
|
||||
<div class="wrap">
|
||||
<header class="head">
|
||||
<div>
|
||||
<h1>CCS Dashboard Design System — Phase 1</h1>
|
||||
<p class="lede">Force-UI visual review of the foundations PR. Two locked archetypes (Config 3-pane and Monitor 12-col grid) wrapped by a shared <code>PageShell</code>. Every page going forward picks one.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="pill accent">PR #1088</span>
|
||||
<span class="pill good">Privacy mode ON</span>
|
||||
<span class="pill">/_styleguide · DEV ONLY</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h2>1 · Shared shell</h2>
|
||||
<div class="tree"><b>PageShell</b>
|
||||
├─ <b>PageHeader</b> (title · description · status · actions)
|
||||
└─ <b>PageBody</b>
|
||||
├─ <b>ConfigLayout</b> ListPane │ FormPane │ JsonPane ← config archetype
|
||||
└─ <b>MonitorLayout</b> KpiRow + MonitorGrid(MonitorCard…) ← monitor archetype</div>
|
||||
|
||||
<h2>2 · /_styleguide overview</h2>
|
||||
<p class="lede">Dev-only route gated by <code>import.meta.env.DEV</code>. Renders every primitive plus composed Config + Monitor demos. Privacy toggle on; all data anonymized as Provider A/B/C.</p>
|
||||
<img class="shot" src="data:image/png;base64,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 truncated
|
||||
|
||||
<h2>3 · Config archetype — multi-entity (ListPane)</h2>
|
||||
<p class="lede">Used by cliproxy, accounts, providers. Left rail = list of entities. Save lives only in FormPane footer.</p>
|
||||
<img class="shot" src="data:image/png;base64,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 truncated
|
||||
|
||||
<h2>4 · Config archetype — single-entity (SectionRail)</h2>
|
||||
<p class="lede">Used by codex, copilot, cursor, droid, claude-extension. Same 3-pane shell — left rail swaps to anchor nav with <code>IntersectionObserver</code> scroll-spy. Solves the long-scroll problem on big single-entity pages.</p>
|
||||
<img class="shot" src="data:image/png;base64,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 truncated
|
||||
|
||||
<h2>5 · Monitor archetype</h2>
|
||||
<p class="lede">Used by home, analytics, health, logs. KPI row + 12-col responsive grid. <code>MonitorCard variant="terminal"</code> preserves the <code>ccs health --watch</code> aesthetic as opt-in.</p>
|
||||
<img class="shot" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAOECAIAAADYLwGFAAAQAElEQVR4nOzdBUAU2x4G8IGlUxpBBQQM7AIUsTuxu712d3d3d1+7u1sJu1FBBEWkuxfYff/dA3P3UYKCCny/t2/vmbMzs8s6szPzzZkzCjHRYRxAkeT28IZ93aYcAAAAAAAAFHzyHAAAAAAAAABAAYeAAwAAAAAAAAAKPAQcAAAAAAAAAFDgIeAAAAAAAAAAgAIPAQcAAAAAAAAAFHgIOAAAAAAAAACgwEPAAQAAAAAAAAAFngIHAPlMLBZzUATIyclxAAAAAADwhyDgAMgXYikuLd1AxlHosXSDf0bYAQAAAADwmyHgAMhj4jTC6Ih4/68Jof7CqHBRQjwHhZq8iqqSlo6KXnHV4qWUNIvJpeHyTlGIyRAMAQBAnsC5pb8ZNveQfxBwAOQlkUhEG9TE6Mgojxdx37w5KDIow0qgR9D3iPfP1EpYaJWppqypTdtveflf6uqoSDUFQisYAAD4RWmnmSRFDjHH3ydt4y75L7b1kB8Kf8AhpgNOUTL9uskLFEJDw7/cOlTF6R8FFTUOIK+JpKK/eIS/cmE1yjr6GmZlpQU9Dgq1xPBQYWQIFaK9P1K2RQ+dKnU0zcpQzc9lHHxTIHGUUPAtVi44Xi4iUS4hhSu8xCoCcTFlzkA1pYS6nJZSfrSCAQCAQoydZ4qNjQkO9IuKDEtE+9m/krKKqpa2roGRqbq6xq+fCgJIp9AGHPTrlhATmeDzMsHPQxgemJKUJFDT9o8TRd4/9FVX17xxd3mBIgeQd1i6EenxOvLDcy4t2kCuUXTQvzX759Y0Lxvt85FiDsq5RIkJ2mUqc7nPONgumihSqPA+TP5LDFc0UHwjFxDHBcTJvwkVmWkkl9eV11bCrg8AAPwQOyOQkpLi5+sdHhpkVLxEcdNSamoaHPx94uJiIsJCvD6+0dEzNC1pwaHZJuSpwhlwpCQnh713E97fkxLolRIblSxMTE4SJiWLBJxAQ5gYcHmzXpnq2uYVOIA8wtKNKJ+PLN3QtChLR7kcFFXsX58yDloe5JSUtaSDOT9KZ4uT3OcopWfBHGtaq6ciKq1N/5XTVeYKL3FYonx4gqT0KZJiHaWvMck1DESltbifbQUDAABFBEs3Avx9U0TJ1WrV5eAvRsETPUxKmHt9cvfx+mBuWU4gECDggLwimDFjKle4CBMTgh9fFNzZoBj5XTElSZFO/gkU6P+KcmIFLklBIOISoiO83xjU7iCvgEYcRdq3r59LlLLkfllql6IxkSFuNzikGyClXEyfk+OEEaEJgd9UTS0ESio5PDvB0g1593CFl6GSYYo2Kupxltpyqgr04Ao1yR+oqyJ5WGlLvirKO77H0Wkdkb4Khw7JAAAgC7TdZG03kpOFllY2HBQQuroGERGhMdFRGtJuy7ChhzxR2M6JJSYmhjy5qPnyoLpApKKslqJhEmnRIKJqt4iqPQLMGierG6ipqqqrKAsU1ZLiY7mfkpyU5P35c3JycjbjBAUGhoaEZDNCgL+/n++3nPd7FBMT4/v1K5fX4uLirl66PHns+EG9+x7Ys5e+vfEjRzWwr3Nw334OckxyKYFIFOXxkkO6ATJoSVDW0acCLRvskpMfTsLSDc4rUvA2TDJspS2uaVi4W21kRWypTX8+FSRfhVdk6jcDAADw/9h5JtrMhocGId0ocOifjP7h6JCE7xsW4BcVqvOBtFZEeL/R9LysKuDklNWC9KySa3UzNjWXV5QcHvh4eyucn6cSLcfpWBh0mqWinbvOEWjmx48cvX75yo1r11hN0+bN23fq2K6DEz8OvcX+3Xvv3Lz52cuLBsuULVu3fr2RY8cYGBqyESj1mD1t+t1btymwYDX1GzWct2iRpbVVpm8aGxu7a+u2+3fvPnn0mAb1DQzqN2zQf/DgKtWqcnlh0dx5fJZR3NTkidujU8dPUHnJ/AW9+/fjIAfYz3FCVDi7ZwrSDZClYVY2MTyElg11y0pqxfRoUcnm7ATfpajSc2k8SumGpTZXhNGfL/myPkUqPg8RGqiKtZWz/wIBAKAIYueZvn31NCpegoMCiP7hQoK+qamVQSMOyBOFKuBIiItN8XRWT4kVieRidMuqNBwuz4lDH56MfecqklP8Jm9UQUlRpGsm5zCgmFn53K4/s6ZO+3fvPtkaSjroER4e1m/gQBr0+PDRqWUrPrmQ1Hz8SI+b169funFdu1ix737fO7Rq7f/9u+xM7t2+07COw/FzZ+3r1E73jvHx8V3bOb15/ZqvCQkOpgCCHuevXa1avRr3a2j+LN0oZW7WtUePipUqmZe2YC/ZVKyY6STBQUFbN2767ufXqm1b2WSnKGOb1QR/SfsaTYscpBtK0rPx/NInlpb5Z0Yu7aV0hIkcFCjSnkf1KeOgJURFSyf7LTdblhTeh0v+6Yt8usFIMo7wRC40gb6WZFtD7PoAAEA6dNZf0pA2Mry4qRkHBVAxXf1A92+S63PlBRzALytUl6jEhAYIAj+GfPf39PKNNneIjY1OcT2g8fyQ0hfX2M/vueiQZDWdh/I2W0/fc3V9lKs5P7x3n083GjZuPHz0qNKWqX03zJ46PSgwkI5Mpk+axNINDQ2NwcOGtmnfno3w1ecLhQJUuH7lCks3ipuYDBkxvM+A/lSgQccG9avVqJ7xTbdu2MinG9169uw7cADNmQ3OnDyF+2UUl7BC2bLlxkwY36hpkxIlSz58+vjIqZOHTh7PdJLjR47u2rb98oWLnz994iAN/SInhgXmahLJEaw4s1xDTib7wHFcocDuE0xLSPZXWKS2sI1IYPdMQbrBY72r0tdCXw7arwIAgCzpRkFyfUpiQjzumVJA0T8c/fPRPyLbG+IAfk2hasER9O2LktercF8vRWNrnVKVk95fLa4cnlDcTFFB3d9XpGJY4rmS9s4TF4RC8adPX5KSUho1cszhnC+eO88KlEosXrGcCtNmz+reoZOnh8f4yZN0dHS/f/NjV5GQGw/um5YwZSN3c+rQonWrTl270uCDu/fYCMvXrm7QqJFkJrNmbtm4adS4scrKmVxjf+zwEVbYvHNHWydJXDJh6pS6NWqVNCs1acY09pJQKNy7c9f9u3dp5rXsbOs1aNB30EAdHR166enjx8sWLqZCzz69IyIijh0+7Pvla4PGjZesXFFMp9iFs+d2bNnKZuLq7Ny5bXvZt65ctcqchQuokJycTInGnZu33rx6xeIbfQMDp04da9raciDFjriSoiQ9Jihp63O5JZYpyGVWhkKBlpDsD85Z8w3B9zjJgBXSjf9IuiDRU+FCE+jLERVTQSMOAIDC7auPd3Cg5LyRgZFRKXOLnEyCTpoKgULwj+jq7FLboU5uX/pF4mRhkuc1pfJtub/Gm1evBQoCmwp/7I6lhSfgoLUi8Ku3+jcvTpSsbGgWHRtXPC6UDjnFxhYeZh1U6+kXL2XmcvAIJ5ZXVJCPjoreteuAhUUpC4scNWajw3tW6NilMyvQHvbG7Vs1NDXV1NRo8OOHD6zesUF9lm4QWo7vPXK1KF2aDWrrFGOF61eulra0LFmqlKaW1tSZMzJ9x8iICP5ilqYtmrOCrq7ulTu3aEJ2x0T6kyeNGXf21Cn2KiUs9KCw4+CJ46qqqkGBgY/d3Kg+Ijzc4+NHNs7Fc+cUFBQ2bNtCr7568YJVUnLBxuQpq6QGLuNGjDp/5ozsSyHBwUbGxnXr1+Mg9byB5B9CLL14RFknBx27yGV27YlcFoOykQcUTGypoCWEbbmz6UWCRlAMxlVImRCV1pYPTZAPTkyiDEiA9qsAAIXTvZs3zh87HprWxJjoGRi069a1fpOm2UyFc/6Fxs/9U1J2sHblSlau7eBAz3T6OV09e4nV5xN6OzqxLXn3KZMzvOTs5uxy7OyZ/Mg4kjyuRR/tp9ZsnmrdMdzfYe+uXfS8ZuMG7g8pVJeoJCUli0ViOhSUk9wrKiU6LDgu6LtcYlJVI5XqxorGgtiBfXv07tNdR4fOjopDQ0Jv375Pk/x4tsIkdqmIhoZG1er/XUtiaGTE0g3i/u4dKzRt0UJ2Wj7dILb29qxwcN/+ujVtzQyNh/QfcObESaFQmPFN+UiiRetWKioqfL2ZuTlLN8iJo8dYukFxyYw5s2vZSVpVUMaxftXqdLMaMmJ4t5492SBNEh8fX7V6tUFDh7Ka4iYmE6dOoQeNJjshBR8s3ahSrdr9x27X7t3RNzCgwT07dnKQJtdN5tOPLMcJE7jvPqJAP7HfZ7HXW3GIPyedo1xyktyXD1x0OFe00ZcRHf1f1zbu7u+PHT3h9cmL+1kXL16hOaSk5O5EwRefrzt37vH75sf9LPpDsm/BIck+IiUBh0hHhcsx+Tmu7CF33JPVUCFdzQ8+WLRQnPjjX8I/jr4cXKICAIXAg5C3/CPnUyWKkujBFTS3Ql5u87n8w9Hi4+K3rFy5d9Nm27p1GzRPPbFHBRrcu3kzvUQjcH+T9+7ue3buYuWH9x88vHc/qzGjIqM2rFlLzxzkAz5WSBt0Xrti5dqVq+ghW0+onkbm8hmlG5IPIHkv59QPs2Ill5+UbNpSuhF3fV78w/8ChSTvh/TgfpeIyMizp05n9Sq9FBIayv1GhacFB50UVdXWSZFXVuLiU0J9iykrfBUYFxeHJQV+EESHKGsbcOqaBnrW7du2CA+PuH71TpJQ+OLZqw4d2ujq6mQ/569fv7CCiqpqVicPP3l4sIKmRpaX/3Xp3u3Z4yfHDh/ma65eukyPi+fOb9m9M91VKvzxm6aWVlYz5JtdrNqwrqatbaduXWtUqESDzg/+b4HuP3jQrPnzqPD61cv379ypEBgQUKNWLSNj493bt9NgxUqVxk6ayOr561aI37dvrODgWNfcQtJEsErVqrdu3PD//p1CGSUlJQ5+Dt+raFIS9+l1yhu3mC9f5G2qqciliL59ltLine truncated
|
||||
|
||||
<h2>6 · Primitive map</h2>
|
||||
<div class="grid2">
|
||||
<div><h3>Page shell</h3><div class="tree"><b>components/page-shell/</b>
|
||||
├─ page-shell.tsx
|
||||
├─ page-header.tsx
|
||||
├─ empty-state.tsx
|
||||
└─ error-state.tsx</div></div>
|
||||
<div><h3>Config (3-pane)</h3><div class="tree"><b>components/config-layout/</b>
|
||||
├─ config-layout.tsx
|
||||
├─ list-pane.tsx
|
||||
├─ section-rail.tsx
|
||||
├─ form-pane.tsx
|
||||
├─ form-section.tsx
|
||||
└─ json-pane.tsx</div></div>
|
||||
<div><h3>Monitor (grid)</h3><div class="tree"><b>components/monitor-layout/</b>
|
||||
├─ monitor-layout.tsx
|
||||
├─ kpi.tsx (KpiRow + KpiCard)
|
||||
└─ monitor-grid.tsx (MonitorGrid + MonitorCard)</div></div>
|
||||
<div><h3>Out of scope</h3><div class="tree">login · setup wizard · dialogs
|
||||
|
||||
These keep their own minimal
|
||||
shells. Don't force them into
|
||||
an archetype.</div></div>
|
||||
</div>
|
||||
|
||||
<h2>7 · Locked decisions</h2>
|
||||
<table>
|
||||
<thead><tr><th>#</th><th>Question</th><th>Decision</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Storybook vs in-app</td><td><b>In-app /_styleguide</b> — zero-config, lives in repo, dev-only</td></tr>
|
||||
<tr><td>2</td><td>Archetype B name</td><td><b>Monitor</b> (Dashboard is the whole product)</td></tr>
|
||||
<tr><td>3</td><td>JsonPane editability</td><td><b>Read-only by default</b>, opt-in <code>editable</code> prop</td></tr>
|
||||
<tr><td>4</td><td>Health terminal aesthetic</td><td><b>Keep</b> as <code>variant="terminal"</code></td></tr>
|
||||
<tr><td>5</td><td>i18n namespace</td><td><b>Per-page</b> (<code>pages.<name>.*</code>) + shared (<code>common.*</code>)</td></tr>
|
||||
<tr><td>6</td><td>SectionRail activation</td><td><b>Scroll-spy</b> via <code>IntersectionObserver</code></td></tr>
|
||||
</tbody></table>
|
||||
|
||||
<h2>8 · How to verify locally</h2>
|
||||
<div class="callout">
|
||||
<code class="kbd">cd ui && bun run dev</code> then visit <code class="kbd">http://localhost:5173/_styleguide</code><br>
|
||||
The route only exists when <code>import.meta.env.DEV === true</code>; production builds exclude it entirely.
|
||||
</div>
|
||||
|
||||
<h2>9 · What lands next</h2>
|
||||
<table>
|
||||
<thead><tr><th>Phase</th><th>Scope</th><th>PRs</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>2</td><td>Reference migrations: cliproxy, home, health</td><td>1 PR</td></tr>
|
||||
<tr><td>3</td><td>Opportunistic conversion: codex, copilot, accounts, api, shared, analytics, logs, updates</td><td>~8 PRs (smallest first)</td></tr>
|
||||
<tr><td>4</td><td>Outlier rewrites: droid (749) → claude-extension (1118) → cursor (1413) → cliproxy-ai-providers (~1700)</td><td>4 PRs</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> · Brainstorm: <code>brainstorm-260425-1115-ccs-dashboard-design-system.md</code>
|
||||
</p>
|
||||
</div></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Reference in new issue
Block a user