Skip to content

Commit abf347e

Browse files
Add legacy styling and scenario regeneration scripts to package.json; update demo HTML for improved layout and styling consistency across scenarios.
1 parent f62ddbc commit abf347e

107 files changed

Lines changed: 8872 additions & 2123 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

demo/scenarios/README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ Benchmark tasks are meant to stress **reasoning**, not string-matching button la
6262
- `rawSelectors` are Playwright-verified structural selectors (see `npm run eval:verify`).
6363
- `decoyNodeIds` include `decoy-promo`, `decoy-nav`, and `decoy-extra` where injected.
6464

65-
**Legacy (5)** — unchanged hand-authored DOM; already hard (flight, banking, checkout, social, admin). Do not simplify.
65+
**Legacy (5)** — unchanged hand-authored DOM; already hard (flight, banking, checkout, social, admin). Do not simplify. Embedded layout CSS is injected via `npm run scenarios:legacy-styles` (also runs when preserving legacy files in `setup-benchmark-scenarios.mjs`).
6666

6767
## Annotation overlay model
6868

@@ -76,6 +76,12 @@ Primary `wciNodeId` in `meta.json` / `ground-truth.generated.json` must match th
7676

7777
Legacy scenarios keep their existing abstract annotated views from the original benchmark (semantic graph only). Generated scenarios use the overlay model above.
7878

79+
**Styling:** All 50 scenarios ship embedded CSS for readable demo previews. Generated pages use shared chrome in `scripts/lib/scenario-dom-noise.mjs`; legacy pages use `scripts/lib/legacy-scenario-styles.mjs`. Refresh everything with:
80+
81+
```bash
82+
npm run scenarios:restyle
83+
```
84+
7985
## Regenerating files
8086

8187
```bash

demo/scenarios/admin-dashboard/annotated.html

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,58 @@
1-
<!DOCTYPE html><html><head><title>QuantumCRM — Admin Dashboard</title></head><body>
1+
<!DOCTYPE html><html><head><style data-wci-legacy-styles="1">
2+
*,*::before,*::after{box-sizing:border-box}
3+
html{-webkit-text-size-adjust:100%}
4+
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.45}
5+
img{max-width:100%;height:auto}
6+
svg{display:inline-block;vertical-align:middle}
7+
button,input,select,textarea{font:inherit}
8+
a{text-decoration:none}
9+
ul,ol{margin:0;padding:0;list-style:none}
10+
h1,h2,h3,h4,p{margin:0}
11+
12+
.qc-app{background:#f4f6f9;color:#1e293b;min-height:100vh}
13+
.qc-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
14+
@media(max-width:900px){.qc-layout{grid-template-columns:1fr}}
15+
.qc-sidebar{background:#fff;border-right:1px solid #e2e8f0;padding:16px 12px}
16+
.qc-sidebar__brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:700}
17+
.qc-sidebar__logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
18+
.qc-sidebar__tenant-badge{font-size:11px;background:#eef2ff;color:#4f46e5;padding:2px 8px;border-radius:999px;margin-left:auto}
19+
.qc-sidebar__search-input{width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:12px}
20+
.qc-sidebar__group-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;padding:8px 10px}
21+
.qc-sidebar__item a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#475569;font-size:13px}
22+
.qc-sidebar__item--active a{background:#eef2ff;color:#4f46e5;font-weight:600}
23+
.qc-sidebar__item svg{width:18px;height:18px;stroke:currentColor;fill:none}
24+
.qc-main{padding:20px 24px 40px;overflow-x:auto}
25+
.qc-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
26+
.qc-topbar__title{font-size:22px;font-weight:700}
27+
.qc-topbar__period{color:#64748b;font-size:13px}
28+
.qc-topbar__right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
29+
.qc-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
30+
.qc-kpi-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;display:flex;gap:14px;align-items:flex-start}
31+
.qc-kpi-card__value{font-size:22px;font-weight:700;display:block}
32+
.qc-kpi-card__label{font-size:12px;color:#64748b}
33+
.qc-kpi-card__trend{font-size:12px;font-weight:600}
34+
.qc-kpi-card__trend--up{color:#16a34a}
35+
.qc-kpi-card__trend--down{color:#dc2626}
36+
.qc-recent-deals{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;overflow-x:auto}
37+
.qc-recent-deals__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
38+
.qc-table{width:100%;border-collapse:collapse;font-size:13px}
39+
.qc-table th,.qc-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #f1f5f9}
40+
.qc-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;background:#f8fafc}
41+
.qc-table tbody tr:hover{background:#f8fafc}
42+
.qc-select{padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;background:#fff}
43+
.qc-shortcuts-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
44+
.qc-shortcuts-overlay__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.4)}
45+
.qc-shortcuts-overlay__panel{position:relative;background:#fff;border-radius:12px;padding:24px;border:1px solid #e2e8f0}
46+
47+
.qc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid #cbd5e1;background:#f1f5f9;color:#0f172a;font-size:13px;font-weight:500;cursor:pointer}
48+
.qc-btn--primary{background:#6366f1;border-color:#6366f1;color:#fff}
49+
.qc-btn--ghost,.qc-btn--link{background:transparent;border-color:transparent;color:inherit}
50+
.qc-btn--outline{background:transparent;border-color:currentColor}
51+
.qc-btn--sm{padding:6px 10px;font-size:12px}
52+
.qc-btn--full{width:100%}
53+
.qc-btn:disabled{opacity:.45;cursor:not-allowed}
54+
55+
</style><title>QuantumCRM — Admin Dashboard</title></head><body>
256
<div class="qc-app" id="qc-root" data-role="admin" data-tenant="acme-corp" data-session-ttl="3600" data-agent-role="landmark" data-agent-id="crm-dashboard" data-agent-desc="QuantumCRM admin dashboard — KPIs, deals pipeline, contacts management. Tenant: Acme Corp.">
357
<!-- Keyboard shortcut overlay (hidden) -->
458
<div class="qc-shortcuts-overlay" style="display:none" role="dialog"><div class="qc-shortcuts-overlay__backdrop"></div><div class="qc-shortcuts-overlay__panel"><h2>Keyboard Shortcuts</h2><table class="qc-shortcuts-table"><tbody><tr><td><kbd>G</kbd> then <kbd>D</kbd></td><td>Go to Dashboard</td></tr><tr><td><kbd>G</kbd> then <kbd>C</kbd></td><td>Go to Contacts</td></tr><tr><td><kbd>N</kbd></td><td>New Contact</td></tr><tr><td><kbd>/</kbd></td><td>Focus Search</td></tr><tr><td><kbd>?</kbd></td><td>Show Shortcuts</td></tr></tbody></table><button class="qc-btn qc-btn--ghost">Close</button></div></div>

demo/scenarios/admin-dashboard/raw.html

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,58 @@
1-
<!DOCTYPE html><html><head><title>QuantumCRM — Admin Dashboard</title></head><body>
1+
<!DOCTYPE html><html><head><style data-wci-legacy-styles="1">
2+
*,*::before,*::after{box-sizing:border-box}
3+
html{-webkit-text-size-adjust:100%}
4+
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.45}
5+
img{max-width:100%;height:auto}
6+
svg{display:inline-block;vertical-align:middle}
7+
button,input,select,textarea{font:inherit}
8+
a{text-decoration:none}
9+
ul,ol{margin:0;padding:0;list-style:none}
10+
h1,h2,h3,h4,p{margin:0}
11+
12+
.qc-app{background:#f4f6f9;color:#1e293b;min-height:100vh}
13+
.qc-layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
14+
@media(max-width:900px){.qc-layout{grid-template-columns:1fr}}
15+
.qc-sidebar{background:#fff;border-right:1px solid #e2e8f0;padding:16px 12px}
16+
.qc-sidebar__brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:700}
17+
.qc-sidebar__logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
18+
.qc-sidebar__tenant-badge{font-size:11px;background:#eef2ff;color:#4f46e5;padding:2px 8px;border-radius:999px;margin-left:auto}
19+
.qc-sidebar__search-input{width:100%;padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:12px}
20+
.qc-sidebar__group-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;padding:8px 10px}
21+
.qc-sidebar__item a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#475569;font-size:13px}
22+
.qc-sidebar__item--active a{background:#eef2ff;color:#4f46e5;font-weight:600}
23+
.qc-sidebar__item svg{width:18px;height:18px;stroke:currentColor;fill:none}
24+
.qc-main{padding:20px 24px 40px;overflow-x:auto}
25+
.qc-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
26+
.qc-topbar__title{font-size:22px;font-weight:700}
27+
.qc-topbar__period{color:#64748b;font-size:13px}
28+
.qc-topbar__right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
29+
.qc-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
30+
.qc-kpi-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;display:flex;gap:14px;align-items:flex-start}
31+
.qc-kpi-card__value{font-size:22px;font-weight:700;display:block}
32+
.qc-kpi-card__label{font-size:12px;color:#64748b}
33+
.qc-kpi-card__trend{font-size:12px;font-weight:600}
34+
.qc-kpi-card__trend--up{color:#16a34a}
35+
.qc-kpi-card__trend--down{color:#dc2626}
36+
.qc-recent-deals{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;overflow-x:auto}
37+
.qc-recent-deals__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
38+
.qc-table{width:100%;border-collapse:collapse;font-size:13px}
39+
.qc-table th,.qc-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #f1f5f9}
40+
.qc-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;background:#f8fafc}
41+
.qc-table tbody tr:hover{background:#f8fafc}
42+
.qc-select{padding:6px 10px;border:1px solid #e2e8f0;border-radius:6px;background:#fff}
43+
.qc-shortcuts-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}
44+
.qc-shortcuts-overlay__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.4)}
45+
.qc-shortcuts-overlay__panel{position:relative;background:#fff;border-radius:12px;padding:24px;border:1px solid #e2e8f0}
46+
47+
.qc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid #cbd5e1;background:#f1f5f9;color:#0f172a;font-size:13px;font-weight:500;cursor:pointer}
48+
.qc-btn--primary{background:#6366f1;border-color:#6366f1;color:#fff}
49+
.qc-btn--ghost,.qc-btn--link{background:transparent;border-color:transparent;color:inherit}
50+
.qc-btn--outline{background:transparent;border-color:currentColor}
51+
.qc-btn--sm{padding:6px 10px;font-size:12px}
52+
.qc-btn--full{width:100%}
53+
.qc-btn:disabled{opacity:.45;cursor:not-allowed}
54+
55+
</style><title>QuantumCRM — Admin Dashboard</title></head><body>
256
<div class="qc-app" id="qc-root" data-role="admin" data-tenant="acme-corp" data-session-ttl="3600">
357
<!-- Keyboard shortcut overlay (hidden) -->
458
<div class="qc-shortcuts-overlay" style="display:none" role="dialog"><div class="qc-shortcuts-overlay__backdrop"></div><div class="qc-shortcuts-overlay__panel"><h2>Keyboard Shortcuts</h2><table class="qc-shortcuts-table"><tr><td><kbd>G</kbd> then <kbd>D</kbd></td><td>Go to Dashboard</td></tr><tr><td><kbd>G</kbd> then <kbd>C</kbd></td><td>Go to Contacts</td></tr><tr><td><kbd>N</kbd></td><td>New Contact</td></tr><tr><td><kbd>/</kbd></td><td>Focus Search</td></tr><tr><td><kbd>?</kbd></td><td>Show Shortcuts</td></tr></table><button class="qc-btn qc-btn--ghost">Close</button></div></div>

0 commit comments

Comments
 (0)