npm - @matware/e2e-runner - Versions diffs - 1.0.3 → 1.1.1 - Mend

@matware/e2e-runner 1.0.3 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/README.md +150 -8
package/bin/cli.js +242 -2
package/package.json +6 -3
package/src/actions.js +28 -4
package/src/ai-generate.js +216 -0
package/src/config.js +44 -0
package/src/dashboard.js +559 -0
package/src/db.js +387 -0
package/src/index.js +5 -1
package/src/issues.js +152 -0
package/src/mcp-server.js +8 -337
package/src/mcp-tools.js +656 -0
package/src/reporter.js +85 -2
package/src/runner.js +119 -9
package/src/verify.js +65 -0
package/src/websocket.js +177 -0
package/templates/dashboard.html +1281 -0
package/templates/e2e.config.js +3 -0

package/templates/dashboard.html ADDED Viewed

@@ -0,0 +1,1281 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>E2E Runner</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#090a10;--surface:#11131b;--surface2:#181b26;--surface3:#1f2333;
+  --border:#232738;--border-hi:#2d3248;
+  --text:#dfe1e8;--text2:#7c8198;--text3:#464b62;
+  --accent:#3b82f6;--accent-dim:rgba(59,130,246,.12);
+  --green:#10b981;--green-dim:rgba(16,185,129,.10);
+  --red:#ef4444;--red-dim:rgba(239,68,68,.10);
+  --amber:#f59e0b;--amber-dim:rgba(245,158,11,.10);
+  --purple:#8b5cf6;--purple-dim:rgba(139,92,246,.12);
+  --mono:'JetBrains Mono','SF Mono','Fira Code',monospace;
+  --sans:'Outfit','Inter',-apple-system,sans-serif;
+  --r:6px;
+}
+html{font-size:13px}
+body{font-family:var(--mono);background:var(--bg);color:var(--text);min-height:100vh;display:flex}
+a{color:var(--accent);text-decoration:none}
+::selection{background:var(--accent);color:#fff}
+/* ── Sidebar ── */
+.sidebar{width:232px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:50;overflow-y:auto}
+.sidebar-logo{padding:20px 16px 16px;border-bottom:1px solid var(--border)}
+.sidebar-logo h1{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:-.02em}
+.sidebar-logo h1 span{color:var(--accent)}
+.sidebar-logo .ver{font-size:10px;color:var(--text3);margin-top:2px}
+.sidebar-section{padding:12px 16px 8px}
+.sidebar-section-label{font-size:9px;font-weight:600;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
+.sidebar select{width:100%;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:12px;appearance:auto;cursor:pointer}
+.sidebar select:focus{outline:none;border-color:var(--accent)}
+.nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:12px;color:var(--text2);cursor:pointer;border-left:2px solid transparent;transition:all .15s}
+.nav-item:hover{color:var(--text);background:var(--surface2)}
+.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--accent-dim)}
+.nav-item .icon{width:16px;text-align:center;font-style:normal}
+.nav-item .badge{margin-left:auto;background:var(--surface3);color:var(--text2);font-size:10px;padding:1px 6px;border-radius:10px}
+.pool-status{margin-top:auto;padding:16px;border-top:1px solid var(--border)}
+.pool-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}
+.pool-dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}
+.pool-dot.off{background:var(--red);box-shadow:0 0 8px var(--red)}
+.pool-info{font-size:11px;color:var(--text2);line-height:1.7}
+.pool-info strong{color:var(--text)}
+.ws-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px}
+/* ── Main ── */
+.main{margin-left:232px;flex:1;min-height:100vh;display:flex;flex-direction:column}
+.main-header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:var(--surface);position:sticky;top:0;z-index:40}
+.main-header .title{font-family:var(--sans);font-size:16px;font-weight:600}
+.main-header .actions{margin-left:auto;display:flex;gap:8px}
+.view{display:none;padding:24px}
+.view.active{display:block}
+#view-live.active{display:flex;flex-direction:column;flex:1;min-height:calc(100vh - 0px);padding:16px}
+/* ── Buttons ── */
+.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r);font-family:var(--mono);font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text);transition:all .15s;white-space:nowrap}
+.btn:hover{background:var(--surface3);border-color:var(--border-hi)}
+.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
+.btn.primary:hover{background:#2563eb}
+.btn.danger{background:var(--red-dim);border-color:rgba(239,68,68,.3);color:var(--red)}
+.btn:disabled{opacity:.4;cursor:not-allowed}
+.btn.sm{padding:4px 10px;font-size:10px}
+/* ── Cards ── */
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:16px}
+.card-label{font-size:9px;font-weight:600;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
+/* ── Stats Row ── */
+.stats{display:flex;gap:24px;margin-bottom:20px}
+.stat-block{text-align:center;min-width:80px}
+.stat-val{font-size:26px;font-weight:700}
+.stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
+.stat-val.green{color:var(--green)}
+.stat-val.red{color:var(--red)}
+.stat-val.accent{color:var(--accent)}
+.stat-val.purple{color:var(--purple)}
+/* ── Tables ── */
+.tbl-wrap{overflow-x:auto}
+table{width:100%;border-collapse:collapse;font-size:12px}
+th{text-align:left;font-size:9px;font-weight:600;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--border)}
+td{padding:8px 12px;border-bottom:1px solid var(--border)}
+tbody tr{cursor:pointer;transition:background .1s}
+tbody tr:hover td{background:var(--surface2)}
+tbody tr.selected td{background:var(--accent-dim)}
+.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600}
+.badge.pass{background:var(--green-dim);color:var(--green)}
+.badge.fail{background:var(--red-dim);color:var(--red)}
+.badge.flaky{background:var(--amber-dim);color:var(--amber)}
+.badge.run{background:var(--purple-dim);color:var(--purple)}
+/* ── Trend Chart ── */
+.chart{display:flex;align-items:flex-end;gap:3px;height:60px}
+.chart-bar{flex:1;min-width:3px;max-width:16px;border-radius:2px 2px 0 0;cursor:pointer;position:relative;transition:opacity .15s}
+.chart-bar:hover{opacity:.75}
+.chart-bar .tip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:var(--surface3);border:1px solid var(--border);padding:4px 8px;border-radius:4px;font-size:10px;white-space:nowrap;z-index:10;pointer-events:none}
+.chart-bar:hover .tip{display:block}
+/* ── Suite Cards ── */
+.suite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
+.suite-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;transition:border-color .15s}
+.suite-card:hover{border-color:var(--border-hi)}
+.suite-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
+.suite-card-name{font-weight:600;font-size:13px}
+.suite-card-count{font-size:10px;color:var(--text3)}
+.suite-card-tests{list-style:none;margin-bottom:12px}
+.suite-card-tests li{font-size:11px;color:var(--text2);padding:2px 0;padding-left:14px;position:relative}
+.suite-card-tests li::before{content:">";position:absolute;left:0;color:var(--text3)}
+/* ── Live Execution ── */
+.live-panel{display:none;background:var(--surface);border:1px solid var(--purple);border-radius:var(--r);overflow:hidden;animation:fadeSlide .3s ease;flex-direction:column}
+.live-panel.active{display:flex;flex:1;min-height:0}
+@keyframes fadeSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
+.live-header{padding:14px 16px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border);background:var(--purple-dim)}
+.live-header .label{font-weight:600;color:var(--purple);font-size:12px;display:flex;align-items:center;gap:8px}
+.live-header .label .dot{width:8px;height:8px;border-radius:50%;background:var(--purple);animation:pulse 1.5s infinite}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
+.live-project{display:flex;align-items:center;padding:2px 10px;background:rgba(255,255,255,.05);border-radius:4px;border:1px solid var(--border)}
+.live-stats{display:flex;gap:16px;font-size:11px;color:var(--text2);margin-left:auto}
+.live-stats span strong{color:var(--text)}
+.live-progress{height:3px;background:var(--surface3)}
+.live-progress-fill{height:100%;background:var(--purple);transition:width .4s;border-radius:0 2px 2px 0}
+.live-tests{padding:12px 16px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;min-height:0}
+.live-test{padding:10px 12px;border-radius:var(--r);border-left:3px solid var(--text3);background:var(--surface2);font-size:11px;transition:border-color .2s,padding .25s,max-height .35s cubic-bezier(.4,0,.2,1)}
+.live-test.running{border-left-color:var(--purple)}
+.live-test.passed{border-left-color:var(--green)}
+.live-test.failed{border-left-color:var(--red)}
+.live-test.collapsed{cursor:pointer;padding:6px 12px}
+.live-test.collapsed:hover{background:var(--surface3)}
+.live-test.collapsed .lt-meta,.live-test.collapsed .lt-actions,.live-test.collapsed .lt-screenshots{display:none}
+.live-test.collapsed .lt-name{margin-bottom:0}
+.live-test.collapsed .lt-summary{display:flex}
+.live-test .lt-name{font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
+.live-test .lt-summary{display:none;align-items:center;gap:8px;margin-left:auto;font-size:10px;color:var(--text3);font-family:var(--mono)}
+.live-test .lt-summary .lt-dur{color:var(--text2)}
+.live-test .lt-summary .lt-expand{color:var(--purple);font-size:9px;opacity:.6}
+.live-test .lt-meta{color:var(--text2);font-size:10px;margin-bottom:6px}
+.live-test .lt-icon{font-size:12px}
+.lt-actions{max-height:180px;overflow-y:auto;border-top:1px solid var(--border);padding-top:6px;margin-top:4px}
+.lt-step{display:flex;align-items:flex-start;gap:6px;padding:2px 0;font-size:10px;font-family:var(--mono);line-height:1.4}
+.lt-step .step-icon{flex-shrink:0;width:14px;text-align:center}
+.lt-step .step-icon.ok{color:var(--green)}
+.lt-step .step-icon.fail{color:var(--red)}
+.lt-step .step-icon.run{color:var(--purple)}
+.lt-step .step-type{color:var(--purple);font-weight:600;flex-shrink:0}
+.lt-step .step-detail{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
+.lt-step .step-dur{color:var(--text3);flex-shrink:0;margin-left:auto}
+.lt-screenshots{border-top:1px solid var(--border);margin-top:6px;padding-top:6px}
+.lt-screenshots-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:10px;color:var(--text3);font-family:var(--mono);padding:2px 0;user-select:none}
+.lt-screenshots-toggle:hover{color:var(--text)}
+.lt-screenshots-toggle .ss-arrow{transition:transform .2s;font-size:8px}
+.lt-screenshots-toggle.open .ss-arrow{transform:rotate(90deg)}
+.lt-screenshots-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:6px;padding-top:6px}
+.lt-screenshots-toggle.open+.lt-screenshots-grid{display:grid}
+.lt-ss-thumb{position:relative;border-radius:4px;overflow:hidden;border:1px solid var(--border);cursor:pointer;aspect-ratio:16/10;background:var(--surface2)}
+.lt-ss-thumb img{width:100%;height:100%;object-fit:cover;display:block}
+.lt-ss-thumb:hover{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple)}
+.lt-ss-label{font-size:8px;color:var(--text3);font-family:var(--mono);text-align:center;padding:2px 2px 0;display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap}
+.lr-section-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;margin:6px 0 2px;border-radius:6px;font-family:var(--mono);font-size:12px;font-weight:700;border-left:3px solid var(--purple)}
+.lr-section-header.running{border-color:var(--purple);background:rgba(139,92,246,.08);color:var(--purple)}
+.lr-section-header.pass{border-color:var(--green);background:rgba(52,211,153,.08);color:var(--green)}
+.lr-section-header.fail{border-color:var(--red);background:rgba(248,113,113,.08);color:var(--red)}
+.lr-section-stats{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text2);font-weight:400}
+.lr-project-name{letter-spacing:.5px}
+.lr-test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;padding:4px 0 8px}
+.live-done{background:var(--green-dim);color:var(--green);text-align:center;padding:10px;font-weight:600;font-size:12px}
+.live-done.has-failures{background:var(--red-dim);color:var(--red)}
+.live-close{padding:4px 10px;font-size:10px;background:transparent;border:1px solid var(--border);border-radius:var(--r);color:var(--text2);cursor:pointer}
+.live-close:hover{color:var(--text);border-color:var(--border-hi)}
+.live-clear-btn{padding:5px 12px;font-size:10px;font-family:var(--mono);font-weight:500;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);color:var(--text2);cursor:pointer;display:none;transition:all .15s}
+.live-clear-btn:hover{color:var(--text);border-color:var(--border-hi);background:var(--surface3)}
+.lr-dismiss{padding:2px 6px;font-size:9px;font-family:var(--mono);background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text3);cursor:pointer;transition:all .15s;margin-left:auto}
+.lr-dismiss:hover{color:var(--red);border-color:rgba(239,68,68,.3);background:var(--red-dim)}
+.live-nav-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--purple);animation:pulse 1.5s infinite}
+.spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}
+.spinner-small{display:inline-block;width:8px;height:8px;border:1.5px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle}
+@keyframes spin{to{transform:rotate(360deg)}}
+/* ── Screenshots ── */
+.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
+.gallery-item{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:border-color .15s}
+.gallery-item:hover{border-color:var(--accent)}
+.gallery-item img{width:100%;height:150px;object-fit:cover;display:block}
+.gallery-item .cap{padding:6px 10px;font-size:10px;color:var(--text2);display:flex;align-items:center;gap:4px}
+.gallery-item .cap .cap-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
+.gallery-item .cap .ss-hash{flex-shrink:0}
+.ss-search{display:flex;gap:8px;margin-bottom:16px;align-items:center}
+.ss-search input{flex:1;max-width:320px;padding:8px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:12px}
+.ss-search input:focus{outline:none;border-color:var(--accent)}
+.ss-search input::placeholder{color:var(--text3)}
+.ss-search button{padding:8px 16px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:12px;cursor:pointer;transition:background .15s,border-color .15s}
+.ss-search button:hover{background:var(--surface3);border-color:var(--accent)}
+.ss-search-result{margin-bottom:20px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
+.ss-search-result img{max-width:100%;max-height:500px;border-radius:var(--r);cursor:pointer;display:block;margin-top:8px}
+.ss-search-result .ss-result-label{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px}
+.ss-search-error{font-size:11px;color:var(--red);margin-bottom:12px}
+/* ── Inline Run Detail ── */
+.run-detail-row td{padding:0!important;border-bottom:2px solid var(--border-hi)}
+.run-detail-row:hover td{background:transparent!important}
+.rd-wrap{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);max-height:0}
+.rd-wrap.open{max-height:2000px}
+.rd-inner{padding:16px 20px;background:var(--bg);border-left:3px solid var(--purple);margin:0 8px 8px}
+.rd-test{margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
+.rd-test:last-child{margin-bottom:0}
+.rd-test-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface2)}
+.rd-test-name{font-weight:600;font-size:12px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rd-test-dur{font-size:11px;color:var(--text2);flex-shrink:0}
+.rd-test-body{padding:10px 14px}
+.rd-error-msg{font-size:11px;color:var(--red);padding:8px 12px;background:var(--red-dim);border-radius:var(--r);margin-bottom:10px;word-break:break-all;border-left:3px solid var(--red)}
+.rd-shots{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
+.rd-shot{width:120px;border-radius:4px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:border-color .15s,transform .15s}
+.rd-shot:hover{border-color:var(--accent);transform:scale(1.03)}
+.rd-shot img{width:100%;height:72px;object-fit:cover;display:block}
+.rd-shot .rd-shot-cap{font-size:9px;color:var(--text3);padding:4px 6px;background:var(--surface2)}
+.rd-shot .rd-shot-cap .cap-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rd-shot .rd-shot-cap .ss-hash{margin-top:3px}
+.rd-shot.err-shot{border-color:rgba(239,68,68,.4)}
+.rd-shot.err-shot .rd-shot-cap{color:var(--red)}
+.rd-logs{margin-top:10px}
+.rd-log-label{font-size:9px;font-weight:600;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
+.rd-log-item{font-size:10px;padding:3px 8px;border-left:2px solid var(--border);margin-bottom:2px;color:var(--text2);word-break:break-all}
+.rd-log-item.error{border-left-color:var(--red);color:var(--red)}
+.rd-log-item.warning,.rd-log-item.warn{border-left-color:var(--amber);color:var(--amber)}
+.rd-net-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:10px;color:var(--text3);font-family:var(--mono);padding:2px 0;user-select:none;margin-top:10px}
+.rd-net-toggle:hover{color:var(--text)}
+.rd-net-toggle .net-arrow{transition:transform .2s;font-size:8px}
+.rd-net-toggle.open .net-arrow{transform:rotate(90deg)}
+.rd-net-list{display:none;margin-top:6px}
+.rd-net-toggle.open+.rd-net-list{display:block}
+.rd-net-row{display:flex;align-items:center;gap:8px;padding:3px 8px;font-size:10px;font-family:var(--mono);border-left:2px solid var(--border);margin-bottom:0;cursor:pointer;transition:background .15s}
+.rd-net-row:hover{background:var(--surface2)}
+.rd-net-row.has-error{border-left-color:var(--red)}
+.rd-net-method{display:inline-block;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;min-width:36px;text-align:center}
+.rd-net-method.get{background:var(--accent-dim);color:var(--accent)}
+.rd-net-method.post{background:var(--green-dim);color:var(--green)}
+.rd-net-method.put,.rd-net-method.patch{background:var(--amber-dim);color:var(--amber)}
+.rd-net-method.delete{background:var(--red-dim);color:var(--red)}
+.rd-net-status{display:inline-block;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:600;min-width:28px;text-align:center}
+.rd-net-status.s2xx{background:var(--green-dim);color:var(--green)}
+.rd-net-status.s3xx{background:var(--amber-dim);color:var(--amber)}
+.rd-net-status.s4xx,.rd-net-status.s5xx{background:var(--red-dim);color:var(--red)}
+.rd-net-url{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
+.rd-net-dur{color:var(--text3);flex-shrink:0}
+.rd-net-expand{font-size:8px;color:var(--text3);transition:transform .2s;flex-shrink:0}
+.rd-net-row.open .rd-net-expand{transform:rotate(90deg)}
+.rd-net-detail{display:none;margin:0 0 4px 0;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:10px;font-family:var(--mono);overflow:hidden}
+.rd-net-row.open+.rd-net-detail{display:block}
+.rd-net-detail-section{margin-bottom:8px}
+.rd-net-detail-section:last-child{margin-bottom:0}
+.rd-net-detail-title{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
+.rd-net-detail-body{white-space:pre-wrap;word-break:break-all;color:var(--text2);max-height:300px;overflow-y:auto;line-height:1.5}
+.rd-retries{font-size:10px;color:var(--amber);margin-bottom:6px}
+.rd-summary{display:flex;gap:16px;margin-bottom:14px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:11px;align-items:center}
+.rd-summary .rd-s-label{color:var(--text3);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
+.rd-summary .rd-s-val{font-weight:700;font-size:16px;margin-top:2px}
+tr.expanded td{background:var(--surface2)!important}
+tr.expanded td:first-child{position:relative}
+tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--purple)}
+/* ── Empty ── */
+.empty{text-align:center;padding:48px 24px;color:var(--text3)}
+.empty-icon{font-size:36px;margin-bottom:8px;opacity:.5}
+/* ── Modal ── */
+.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:none;align-items:center;justify-content:center;padding:24px;cursor:pointer}
+.modal.open{display:flex}
+.modal img{max-width:100%;max-height:90vh;border-radius:var(--r);cursor:default}
+/* ── Screenshot Hash Badge ── */
+.ss-hash{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:10px;font-family:var(--mono);font-size:9px;font-weight:500;background:var(--surface3);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s;user-select:none;white-space:nowrap;vertical-align:middle}
+.ss-hash:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
+.ss-hash.copied{border-color:var(--green);color:var(--green);background:var(--green-dim)}
+.ss-hash .ss-icon{font-size:10px;line-height:1}
+/* ── Trigger Source Badges ── */
+.trigger-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;font-family:var(--mono);white-space:nowrap}
+.trigger-badge.src-dashboard{background:rgba(127,140,162,.10);color:var(--text2)}
+.trigger-badge.src-mcp{background:var(--purple-dim);color:var(--purple)}
+.trigger-badge.src-cli{background:var(--accent-dim);color:var(--accent)}
+.trigger-badge.src-unknown{background:rgba(70,75,98,.15);color:var(--text3)}
+.trigger-badge .trig-icon{font-size:11px;line-height:1}
+/* ── Responsive ── */
+@media(max-width:768px){
+  .sidebar{width:60px}.sidebar-logo h1,.sidebar-section-label,.nav-item span:not(.icon),.pool-info,.sidebar select,.sidebar-logo .ver{display:none}
+  .nav-item{justify-content:center;padding:12px}.nav-item .icon{width:auto}
+  .main{margin-left:60px}
+  .suite-grid,.gallery{grid-template-columns:1fr}
+  .lr-test-grid{grid-template-columns:1fr}
+}
+</style>
+</head>
+<body>
+<aside class="sidebar">
+  <div class="sidebar-logo">
+    <h1><span>E2E</span> Runner</h1>
+    <div class="ver">Dashboard</div>
+  </div>
+  <div class="sidebar-section">
+    <div class="sidebar-section-label">Project</div>
+    <select id="projectSelect">
+      <option value="">All Projects</option>
+    </select>
+  </div>
+  <div class="sidebar-section">
+    <div class="sidebar-section-label">Navigation</div>
+  </div>
+  <div class="nav-item" data-view="live" id="navLive" style="display:none">
+    <i class="icon"><span class="live-nav-dot"></span></i><span>Live</span><span class="badge" id="liveBadge" style="background:var(--purple-dim);color:var(--purple)">0</span>
+  </div>
+  <div class="nav-item active" data-view="suites">
+    <i class="icon">&#9655;</i><span>Suites</span>
+  </div>
+  <div class="nav-item" data-view="runs">
+    <i class="icon">&#9776;</i><span>Runs</span>
+  </div>
+  <div class="nav-item" data-view="screenshots">
+    <i class="icon">&#9635;</i><span>Screenshots</span>
+  </div>
+  <div class="pool-status" id="poolStatus">
+    <div class="pool-info">
+      <span class="pool-dot off" id="poolDot"></span>
+      <strong>Pool</strong> <span id="poolLabel">--</span>
+    </div>
+    <div class="pool-info">Sessions: <strong id="poolSessions">-/-</strong></div>
+    <div class="pool-info" style="margin-top:6px">
+      <span class="ws-dot" id="wsDot" style="background:var(--red)"></span>
+      <span id="wsLabel" style="font-size:10px;color:var(--text3)">ws: connecting</span>
+    </div>
+  </div>
+</aside>
+<div class="main">
+  <!-- Live View -->
+  <div class="view" id="view-live">
+    <div class="live-panel active" id="livePanel">
+      <div class="live-header">
+        <div class="label"><span class="dot"></span> RUNNING</div>
+        <div class="live-project" id="liveProject" style="display:none">
+          <span style="color:var(--text3);font-size:11px">Project:</span>
+          <strong id="liveProjectName" style="font-size:12px;color:var(--text);margin-left:4px"></strong>
+          <span id="liveProjectCwd" style="font-size:10px;color:var(--text3);margin-left:8px;font-family:var(--mono);opacity:.7"></span>
+        </div>
+        <div class="live-stats">
+          <span>Total: <strong id="liveTotal">0</strong></span>
+          <span style="color:var(--green)">Pass: <strong id="livePass">0</strong></span>
+          <span style="color:var(--red)">Fail: <strong id="liveFail">0</strong></span>
+          <span style="color:var(--purple)">Active: <strong id="liveActive">0</strong></span>
+        </div>
+        <button class="live-clear-btn" id="liveClearBtn">Clear All</button>
+      </div>
+      <div class="live-progress"><div class="live-progress-fill" id="liveProgressFill" style="width:0"></div></div>
+      <div class="live-tests" id="liveTests"></div>
+    </div>
+    <div class="empty" id="liveEmpty">
+      <div class="empty-icon" style="font-size:48px;opacity:.3">&#9679;</div>
+      <p>No tests running. Start a test from the Suites view or another console.</p>
+      <p style="margin-top:8px;font-size:11px;color:var(--text3)">This view activates automatically when tests are detected.</p>
+    </div>
+  </div>
+  <!-- Suites View -->
+  <div class="view active" id="view-suites">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px">
+      <div style="font-family:var(--sans);font-size:16px;font-weight:600">Test Suites</div>
+      <button class="btn primary" id="btnRunAll">Run All Tests</button>
+    </div>
+    <div class="suite-grid" id="suiteGrid"></div>
+    <div class="empty" id="suitesEmpty" style="display:none">
+      <div class="empty-icon">&#9655;</div>
+      <p>No test suites found.</p>
+    </div>
+  </div>
+  <!-- Runs View -->
+  <div class="view" id="view-runs">
+    <div style="font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:20px">Run History</div>
+    <div class="card">
+      <div class="card-label">Pass Rate Trend</div>
+      <div class="chart" id="trendChart"></div>
+    </div>
+    <div class="card" style="padding:0">
+      <div class="tbl-wrap">
+        <table>
+          <thead id="runsHead"><tr></tr></thead>
+          <tbody id="runsBody"></tbody>
+        </table>
+      </div>
+    </div>
+    <div class="empty" id="runsEmpty" style="display:none">
+      <div class="empty-icon">&#9776;</div>
+      <p>No runs recorded yet.</p>
+    </div>
+  </div>
+  <!-- Screenshots View -->
+  <div class="view" id="view-screenshots">
+    <div style="font-family:var(--sans);font-size:16px;font-weight:600;margin-bottom:20px">Screenshots</div>
+    <div class="ss-search">
+      <input type="text" id="ssHashInput" placeholder="Search by hash (e.g. ss:a3f2b1c9)" spellcheck="false">
+      <button id="ssHashBtn">Search</button>
+    </div>
+    <div id="ssSearchResult"></div>
+    <div class="gallery" id="screenshotGallery"></div>
+    <div class="empty" id="screenshotsEmpty" style="display:none">
+      <div class="empty-icon">&#9635;</div>
+      <p>Select a project to view screenshots.</p>
+    </div>
+  </div>
+</div>
+<div class="modal" id="modal"><img id="modalImg" src="" alt=""></div>
+<script>
+(function(){
+'use strict';
+var $=function(s){return document.querySelector(s)};
+var $$=function(s){return document.querySelectorAll(s)};
+function el(tag,a,ch){
+  var e=document.createElement(tag);
+  if(a)Object.keys(a).forEach(function(k){
+    if(k==='className')e.className=a[k];
+    else if(k==='style')e.style.cssText=a[k];
+    else if(k.indexOf('on')===0)e.addEventListener(k.slice(2),a[k]);
+    else e.setAttribute(k,a[k]);
+  });
+  if(typeof ch==='string')e.textContent=ch;
+  else if(Array.isArray(ch))ch.forEach(function(c){if(c)e.appendChild(c)});
+  return e;
+}
+function css(n){return n.replace(/[^a-zA-Z0-9\-_]/g,'_')}
+function dur(ms){return ms>=1000?(ms/1000).toFixed(1)+'s':ms+'ms'}
+function fdate(iso){return iso?new Date(iso).toLocaleString():'--'}
+/** Pretty-print a string if it's JSON, otherwise return as-is */
+function prettyJson(str){
+  if(!str)return '';
+  try{return JSON.stringify(JSON.parse(str),null,2)}catch(e){return str}
+}
+/** Format headers object as readable string */
+function fmtHeaders(h){
+  if(!h||typeof h!=='object')return '';
+  return Object.keys(h).map(function(k){return k+': '+h[k]}).join('\n');
+}
+/** Build a clickable network row + expandable detail panel */
+function buildNetRow(n){
+  var mCls='rd-net-method '+n.method.toLowerCase();
+  var sCls='rd-net-status '+(n.status<300?'s2xx':n.status<400?'s3xx':n.status<500?'s4xx':'s5xx');
+  var hasDetail=n.requestBody||n.responseBody||n.requestHeaders||n.responseHeaders;
+  var rowCls='rd-net-row'+(n.status>=400?' has-error':'');
+  var row=el('div',{className:rowCls},[
+    hasDetail?el('span',{className:'rd-net-expand'},'\u25B6'):null,
+    el('span',{className:mCls},n.method),
+    el('span',{className:sCls},String(n.status)+(n.statusText?' '+n.statusText:'')),
+    el('span',{className:'rd-net-url'},n.url),
+    el('span',{className:'rd-net-dur'},dur(n.duration))
+  ]);
+  var detail=null;
+  if(hasDetail){
+    var sections=[];
+    if(n.requestHeaders){
+      var s=el('div',{className:'rd-net-detail-section'},[el('div',{className:'rd-net-detail-title'},'Request Headers')]);
+      s.appendChild(el('div',{className:'rd-net-detail-body'},fmtHeaders(n.requestHeaders)));
+      sections.push(s);
+    }
+    if(n.requestBody){
+      var s2=el('div',{className:'rd-net-detail-section'},[el('div',{className:'rd-net-detail-title'},'Request Body')]);
+      s2.appendChild(el('div',{className:'rd-net-detail-body'},prettyJson(n.requestBody)));
+      sections.push(s2);
+    }
+    if(n.responseHeaders){
+      var s3=el('div',{className:'rd-net-detail-section'},[el('div',{className:'rd-net-detail-title'},'Response Headers')]);
+      s3.appendChild(el('div',{className:'rd-net-detail-body'},fmtHeaders(n.responseHeaders)));
+      sections.push(s3);
+    }
+    if(n.responseBody){
+      var s4=el('div',{className:'rd-net-detail-section'},[el('div',{className:'rd-net-detail-title'},'Response Body')]);
+      s4.appendChild(el('div',{className:'rd-net-detail-body'},prettyJson(n.responseBody)));
+      sections.push(s4);
+    }
+    detail=el('div',{className:'rd-net-detail'},sections);
+    row.addEventListener('click',function(e){e.stopPropagation();row.classList.toggle('open')});
+  }
+  return {row:row,detail:detail};
+}
+/* ── Screenshot hash helpers ── */
+var ssHashCache={};
+async function ssHash(filePath){
+  if(ssHashCache[filePath])return ssHashCache[filePath];
+  var data=new TextEncoder().encode(filePath);
+  var buf=await crypto.subtle.digest('SHA-256',data);
+  var hex=Array.from(new Uint8Array(buf)).map(function(b){return b.toString(16).padStart(2,'0')}).join('');
+  var h=hex.slice(0,8);
+  ssHashCache[filePath]=h;
+  return h;
+}
+function ssHashSync(filePath){return ssHashCache[filePath]||null}
+function copyHash(hash,badge){
+  navigator.clipboard.writeText('ss:'+hash).then(function(){
+    badge.classList.add('copied');
+    setTimeout(function(){badge.classList.remove('copied')},1200);
+  });
+}
+function createHashBadge(hash){
+  var badge=el('span',{className:'ss-hash',onclick:function(e){e.stopPropagation();copyHash(hash,badge)}},[
+    el('span',{className:'ss-icon'},'\u2318'),
+    document.createTextNode('ss:'+hash)
+  ]);
+  return badge;
+}
+/* ── Trigger source badge helper ── */
+function createTriggerBadge(source){
+  var s=source||'unknown';
+  var labels={dashboard:'Dashboard',mcp:'MCP',cli:'CLI',unknown:'--'};
+  var icons={dashboard:'\u{1F464}',mcp:'\u{1F916}',cli:'>_',unknown:'\u2022'};
+  var badge=el('span',{className:'trigger-badge src-'+s},[
+    el('span',{className:'trig-icon'},icons[s]||icons.unknown),
+    document.createTextNode(labels[s]||s)
+  ]);
+  return badge;
+}
+/* ── State ── */
+var S={
+  ws:null,project:null,view:'suites',selectedRun:null,
+  liveRuns:{},liveExpanded:new Set(),liveSSOpen:new Set()
+};
+/* ── Navigation ── */
+$$('.nav-item').forEach(function(n){
+  n.addEventListener('click',function(){
+    $$('.nav-item').forEach(function(x){x.classList.remove('active')});
+    n.classList.add('active');
+    S.view=n.dataset.view;
+    $$('.view').forEach(function(v){v.classList.remove('active')});
+    $('#view-'+S.view).classList.add('active');
+  });
+});
+function showView(v){
+  S.view=v;
+  $$('.nav-item').forEach(function(n){n.classList.toggle('active',n.dataset.view===v)});
+  $$('.view').forEach(function(x){x.classList.remove('active')});
+  $('#view-'+v).classList.add('active');
+}
+/* ── WebSocket ── */
+function connectWS(){
+  var proto=location.protocol==='https:'?'wss:':'ws:';
+  S.ws=new WebSocket(proto+'//'+location.host);
+  S.ws.onopen=function(){$('#wsDot').style.background='var(--green)';$('#wsLabel').textContent='ws: connected';$('#wsLabel').style.color='var(--green)'};
+  S.ws.onclose=function(){$('#wsDot').style.background='var(--red)';$('#wsLabel').textContent='ws: disconnected';$('#wsLabel').style.color='var(--text3)';setTimeout(connectWS,3000)};
+  S.ws.onerror=function(){};
+  S.ws.onmessage=function(e){try{handleWS(JSON.parse(e.data))}catch(x){}};
+}
+function getLiveRun(m){
+  var rid=m.runId;if(!rid)return null;
+  if(!S.liveRuns[rid])S.liveRuns[rid]={on:true,done:false,total:0,completed:0,passed:0,failed:0,active:0,tests:{},project:m.project||null,cwd:m.cwd||null,triggeredBy:m.triggeredBy||null,runId:rid,_lastEvent:Date.now()};
+  S.liveRuns[rid]._lastEvent=Date.now();
+  return S.liveRuns[rid];
+}
+function anyLiveRunning(){for(var k in S.liveRuns)if(S.liveRuns[k].on)return true;return false}
+/* Staleness guard: auto-finish stuck runs, garbage-collect old finished runs */
+setInterval(function(){
+  var changed=false;
+  for(var k in S.liveRuns){
+    var r=S.liveRuns[k];
+    var age=Date.now()-r._lastEvent;
+    /* Mark stuck runs as done */
+    if(r.on&&!r.done){
+      /* 0/0 runs (never received any tests) — mark stale after 10s */
+      if(r.total===0&&age>10000){r.on=false;r.done=true;r.stale=true;r.active=0;changed=true}
+      /* All tests completed but run:complete never arrived */
+      else if(r.completed>=r.total&&r.total>0&&age>15000){r.on=false;r.done=true;r.active=0;changed=true}
+      /* General staleness — no events for 30s */
+      else if(age>30000){r.on=false;r.done=true;r.stale=true;r.active=0;changed=true}
+    }
+    /* Auto-remove stale 0/0 runs after 15s, finished runs after 120s */
+    if(r.done&&r.stale&&r.total===0&&age>15000){delete S.liveRuns[k];changed=true}
+    else if(r.done&&age>120000){delete S.liveRuns[k];changed=true}
+  }
+  if(changed)renderLive();
+},5000);
+function handleWS(m){
+  switch(m.event){
+    case 'pool:status':renderPool(m.data);break;
+    case 'run:start':
+      /* Clear all finished/stale runs when a new one starts */
+      for(var dk in S.liveRuns){if(S.liveRuns[dk].done)delete S.liveRuns[dk]}
+      var r=getLiveRun(m);
+      r.total=m.total;r.on=true;r.done=false;
+      S.liveExpanded=new Set();S.liveSSOpen=new Set();
+      showView('live');renderLive();break;
+    case 'test:start':
+      var r=getLiveRun(m);if(!r)break;
+      r.active=m.activeCount;
+      r.tests[m.name]={status:'running',actions:0,totalActions:0,error:null,actionLog:[],screenshots:[]};
+      renderLive();break;
+    case 'test:action':
+      var r=getLiveRun(m);if(!r||!r.tests[m.name])break;
+      var t=r.tests[m.name];
+      t.actions=m.actionIndex+1;t.totalActions=m.totalActions;t.actionType=m.action.type;
+      t.actionLog.push({type:m.action.type,selector:m.action.selector||null,value:m.action.value||null,text:m.action.text||null,success:m.success,duration:m.duration,error:m.error||null});
+      if(m.screenshotPath)t.screenshots.push(m.screenshotPath);
+      renderLive();break;
+    case 'test:retry':
+      var r=getLiveRun(m);if(!r||!r.tests[m.name])break;
+      r.tests[m.name].retry=m.attempt+'/'+m.maxAttempts;
+      renderLive();break;
+    case 'test:complete':
+      var r=getLiveRun(m);if(!r)break;
+      r.completed++;
+      if(m.success){r.passed++;if(r.tests[m.name])r.tests[m.name].status='passed'}
+      else{r.failed++;if(r.tests[m.name]){r.tests[m.name].status='failed';r.tests[m.name].error=m.error}}
+      if(r.tests[m.name]){
+        r.tests[m.name].duration=m.duration;
+        if(m.screenshots&&m.screenshots.length)r.tests[m.name].screenshots=m.screenshots;
+        if(m.errorScreenshot)r.tests[m.name].errorScreenshot=m.errorScreenshot;
+        if(m.networkLogs&&m.networkLogs.length)r.tests[m.name].networkLogs=m.networkLogs;
+      }
+      r.active=Math.max(0,r.active-1);
+      renderLive();break;
+    case 'run:complete':
+      var r=getLiveRun(m);if(r){r.on=false;r.done=true;r.active=0}
+      renderLive();refreshRuns();refreshProjects();break;
+    case 'run:error':
+      var r=getLiveRun(m);if(r){r.on=false;r.done=true;r.tests.__error={status:'failed',error:m.error}}
+      renderLive();break;
+    case 'db:updated':
+      refreshRuns();refreshProjects();refreshScreenshots();break;
+  }
+}
+/* ── API ── */
+function api(p){return fetch(p).then(function(r){return r.json()})}
+function triggerRun(suite,projectId){
+  if(anyLiveRunning())return;
+  var body={};
+  if(suite)body.suite=suite;
+  if(projectId)body.projectId=projectId;
+  else if(S.project)body.projectId=S.project;
+  fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+}
+/* ── Pool ── */
+function renderPool(d){
+  if(!d)return;
+  $('#poolDot').className='pool-dot '+(d.error||!d.available?'off':'on');
+  $('#poolLabel').textContent=d.error?'offline':d.available?'ready':'busy';
+  $('#poolSessions').textContent=(d.running||0)+'/'+(d.maxConcurrent||0);
+}
+function refreshStatus(){api('/api/status').then(function(d){renderPool(d.pool)}).catch(function(){})}
+/* ── Projects ── */
+function refreshProjects(){
+  api('/api/db/projects').then(function(projects){
+    var sel=$('#projectSelect'),prev=sel.value;
+    while(sel.options.length>1)sel.remove(1);
+    if(Array.isArray(projects))projects.forEach(function(p){
+      var o=document.createElement('option');o.value=p.id;o.textContent=p.name;sel.appendChild(o);
+    });
+    sel.value=prev||'';
+  }).catch(function(){});
+}
+$('#projectSelect').addEventListener('change',function(){
+  S.project=this.value?parseInt(this.value,10):null;
+  S.selectedRun=null;
+  refreshRuns();refreshSuites();refreshScreenshots();
+});
+/* ── Suites ── */
+function refreshSuites(){
+  var grid=$('#suiteGrid'),empty=$('#suitesEmpty');
+  grid.textContent='';
+  if(S.project){
+    // Single project — fetch its suites
+    api('/api/db/projects/'+S.project+'/suites').then(function(suites){
+      if(!Array.isArray(suites)||suites.length===0){empty.style.display='block';empty.querySelector('p').textContent='No test suites found for this project.';return}
+      empty.style.display='none';
+      renderSuiteCards(grid,suites,S.project);
+    }).catch(function(){});
+  } else {
+    // All projects — fetch each project's suites
+    api('/api/db/projects').then(function(projects){
+      if(!Array.isArray(projects)||projects.length===0){empty.style.display='block';empty.querySelector('p').textContent='No projects registered yet.';return}
+      var loaded=0,hasAny=false;
+      projects.forEach(function(p){
+        api('/api/db/projects/'+p.id+'/suites').then(function(suites){
+          loaded++;
+          if(Array.isArray(suites)&&suites.length>0){
+            hasAny=true;
+            var label=el('div',{style:'grid-column:1/-1;font-family:var(--sans);font-size:13px;font-weight:600;margin-top:'+(grid.children.length?'16':'0')+'px;padding-bottom:6px;border-bottom:1px solid var(--border);color:var(--text2)'},p.name);
+            grid.appendChild(label);
+            renderSuiteCards(grid,suites,p.id);
+          }
+          if(loaded===projects.length&&!hasAny){empty.style.display='block';empty.querySelector('p').textContent='No test suites found.'}
+        }).catch(function(){loaded++;});
+      });
+    }).catch(function(){});
+  }
+}
+function renderSuiteCards(container,suites,projectId){
+  suites.forEach(function(s){
+    var tests=el('ul',{className:'suite-card-tests'});
+    (s.tests||[]).forEach(function(t){tests.appendChild(el('li',null,t))});
+    var pid=projectId;
+    var card=el('div',{className:'suite-card'},[
+      el('div',{className:'suite-card-head'},[
+        el('div',{className:'suite-card-name'},s.name),
+        el('span',{className:'suite-card-count'},s.testCount+' tests')
+      ]),
+      tests,
+      el('button',{className:'btn sm primary',onclick:function(){triggerRun(s.name,pid)}},'Run Suite')
+    ]);
+    container.appendChild(card);
+  });
+}
+/* ── Runs ── */
+function refreshRuns(){
+  var url=S.project?'/api/db/projects/'+S.project+'/runs':'/api/db/runs';
+  api(url).then(function(rows){
+    var chart=$('#trendChart'),body=$('#runsBody'),empty=$('#runsEmpty'),head=$('#runsHead');
+    chart.textContent='';body.textContent='';
+    if(!Array.isArray(rows)||rows.length===0){empty.style.display='block';head.parentNode.parentNode.style.display='none';return}
+    empty.style.display='none';head.parentNode.parentNode.style.display='';
+    // Thead
+    var htr=document.createElement('tr');
+    var cols=[];
+    if(!S.project)cols.push('Project');
+    cols=cols.concat(['Suite','Source','Date','Total','Pass','Fail','Rate','Time']);
+    cols.forEach(function(c){htr.appendChild(el('th',null,c))});
+    head.textContent='';head.appendChild(htr);
+    var colSpan=cols.length;
+    // Chart
+    rows.slice(0,40).slice().reverse().forEach(function(r){
+      var rate=parseFloat(r.pass_rate)||0;
+      var color=rate>=90?'var(--green)':rate>=70?'var(--amber)':'var(--red)';
+      var bar=el('div',{className:'chart-bar',style:'height:'+Math.max(rate,4)+'%;background:'+color});
+      bar.appendChild(el('div',{className:'tip'},(r.project_name||'')+(r.suite_name?' / '+r.suite_name:'')+': '+r.pass_rate));
+      chart.appendChild(bar);
+    });
+    // Rows
+    rows.forEach(function(r){
+      var tr=document.createElement('tr');
+      tr.dataset.runId=r.id;
+      if(r.id===S.selectedRun)tr.classList.add('expanded');
+      if(!S.project)tr.appendChild(el('td',{style:'font-weight:600'},r.project_name||'-'));
+      tr.appendChild(el('td',{style:'color:var(--accent)'},r.suite_name||'all'));
+      var srcTd=document.createElement('td');srcTd.appendChild(createTriggerBadge(r.triggered_by));tr.appendChild(srcTd);
+      tr.appendChild(el('td',null,fdate(r.generated_at)));
+      tr.appendChild(el('td',null,String(r.total||0)));
+      tr.appendChild(el('td',{style:'color:var(--green)'},String(r.passed||0)));
+      tr.appendChild(el('td',{style:'color:var(--red)'},String(r.failed||0)));
+      var rv=parseFloat(r.pass_rate)||0;
+      tr.appendChild(el('td',{style:'font-weight:600;color:'+(rv>=90?'var(--green)':rv>=70?'var(--amber)':'var(--red)')},r.pass_rate||'-'));
+      tr.appendChild(el('td',{style:'color:var(--text2)'},r.duration||'-'));
+      tr.addEventListener('click',function(){toggleDetail(r.id,tr,colSpan)});
+      body.appendChild(tr);
+      // If this run was already expanded, re-expand it
+      if(r.id===S.selectedRun){
+        var detailTr=createDetailRow(colSpan);
+        body.appendChild(detailTr);
+        loadDetailInline(r.id,detailTr);
+      }
+    });
+  }).catch(function(){});
+}
+function createDetailRow(colSpan){
+  var detailTr=document.createElement('tr');
+  detailTr.className='run-detail-row';
+  var td=document.createElement('td');
+  td.setAttribute('colspan',colSpan);
+  var wrap=el('div',{className:'rd-wrap'});
+  var inner=el('div',{className:'rd-inner'});
+  inner.innerHTML='<div style="color:var(--text3);font-size:11px"><span class="spinner-small"></span> Loading...</div>';
+  wrap.appendChild(inner);
+  td.appendChild(wrap);
+  detailTr.appendChild(td);
+  return detailTr;
+}
+function toggleDetail(id,clickedTr,colSpan){
+  // If already expanded, collapse
+  if(S.selectedRun===id){
+    var existing=clickedTr.nextElementSibling;
+    if(existing&&existing.classList.contains('run-detail-row')){
+      var w=existing.querySelector('.rd-wrap');
+      if(w)w.classList.remove('open');
+      clickedTr.classList.remove('expanded');
+      setTimeout(function(){if(existing.parentNode)existing.parentNode.removeChild(existing)},350);
+    }
+    S.selectedRun=null;
+    return;
+  }
+  // Collapse any other open detail
+  var prevTr=document.querySelector('#runsBody tr.expanded');
+  if(prevTr){
+    prevTr.classList.remove('expanded');
+    var prevDetail=prevTr.nextElementSibling;
+    if(prevDetail&&prevDetail.classList.contains('run-detail-row')){
+      var pw=prevDetail.querySelector('.rd-wrap');
+      if(pw)pw.classList.remove('open');
+      setTimeout(function(){if(prevDetail.parentNode)prevDetail.parentNode.removeChild(prevDetail)},350);
+    }
+  }
+  // Expand new
+  S.selectedRun=id;
+  clickedTr.classList.add('expanded');
+  var detailTr=createDetailRow(colSpan);
+  clickedTr.parentNode.insertBefore(detailTr,clickedTr.nextSibling);
+  // Animate open
+  requestAnimationFrame(function(){
+    requestAnimationFrame(function(){
+      var w2=detailTr.querySelector('.rd-wrap');
+      if(w2)w2.classList.add('open');
+    });
+  });
+  loadDetailInline(id,detailTr);
+}
+function loadDetailInline(id,detailTr){
+  api('/api/db/runs/'+id).then(function(d){
+    if(d.error)return;
+    var inner=detailTr.querySelector('.rd-inner');
+    inner.textContent='';
+    var results=d.results||[];
+    // Summary bar
+    var srcBlock=el('div',null,[el('div',{className:'rd-s-label'},'Source'),el('div',{style:'margin-top:4px'},[createTriggerBadge(d.triggeredBy)])]);
+    var summ=el('div',{className:'rd-summary'},[
+      el('div',null,[el('div',{className:'rd-s-label'},'Suite'),el('div',{className:'rd-s-val',style:'font-size:13px;color:var(--accent)'},d.suiteName||'all')]),
+      srcBlock,
+      el('div',null,[el('div',{className:'rd-s-label'},'Total'),el('div',{className:'rd-s-val'},String(d.summary.total))]),
+      el('div',null,[el('div',{className:'rd-s-label'},'Passed'),el('div',{className:'rd-s-val',style:'color:var(--green)'},String(d.summary.passed))]),
+      el('div',null,[el('div',{className:'rd-s-label'},'Failed'),el('div',{className:'rd-s-val',style:'color:var(--red)'},String(d.summary.failed))]),
+      el('div',null,[el('div',{className:'rd-s-label'},'Duration'),el('div',{className:'rd-s-val',style:'font-size:13px;color:var(--text2)'},d.summary.duration||'-')])
+    ]);
+    inner.appendChild(summ);
+    // Test result cards
+    results.forEach(function(r){
+      var d2=r.durationMs?dur(r.durationMs):r.endTime&&r.startTime?dur(new Date(r.endTime)-new Date(r.startTime)):'-';
+      var flaky=r.success&&r.attempt>1;
+      // Header: badge + name + duration
+      var badges=el('div',{style:'display:flex;gap:6px;align-items:center;flex-shrink:0'});
+      badges.appendChild(el('span',{className:'badge '+(r.success?'pass':'fail')},r.success?'PASS':'FAIL'));
+      if(flaky)badges.appendChild(el('span',{className:'badge flaky'},'FLAKY'));
+      var head=el('div',{className:'rd-test-head'},[
+        badges,
+        el('div',{className:'rd-test-name'},r.name),
+        el('div',{className:'rd-test-dur'},d2)
+      ]);
+      // Body content
+      var body=el('div',{className:'rd-test-body'});
+      // Retries info
+      if(r.maxAttempts>1){
+        body.appendChild(el('div',{className:'rd-retries'},'Attempt '+r.attempt+' of '+r.maxAttempts));
+      }
+      // Error message
+      if(r.error){
+        body.appendChild(el('div',{className:'rd-error-msg'},r.error));
+      }
+      // Screenshots per test
+      var shots=[];
+      var hashes=r.screenshotHashes||{};
+      (r.screenshots||[]).forEach(function(p){
+        var fname=p.split('/').pop();
+        shots.push({path:p,label:fname,type:'screenshot',hash:hashes[p]||null});
+      });
+      if(r.errorScreenshot){
+        var ename=r.errorScreenshot.split('/').pop();
+        shots.push({path:r.errorScreenshot,label:ename,type:'error',hash:hashes[r.errorScreenshot]||null});
+      }
+      if(shots.length){
+        var shotsWrap=el('div',{className:'rd-shots'});
+        shots.forEach(function(s){
+          var src='/api/image?path='+encodeURIComponent(s.path);
+          var img=document.createElement('img');img.src=src;img.alt=s.label;img.loading='lazy';
+          var capEl=el('div',{className:'rd-shot-cap'},[el('span',{className:'cap-name'},s.label)]);
+          if(s.hash){capEl.appendChild(createHashBadge(s.hash))}
+          else{(function(c,fp){ssHash(fp).then(function(h){c.appendChild(createHashBadge(h))})})(capEl,s.path)}
+          var shotEl=el('div',{className:'rd-shot'+(s.type==='error'?' err-shot':''),onclick:function(e){e.stopPropagation();openModal(src)}},[
+            img,capEl
+          ]);
+          shotsWrap.appendChild(shotEl);
+        });
+        body.appendChild(shotsWrap);
+      }
+      // Console logs (errors and warnings only)
+      var cIssues=(r.consoleLogs||[]).filter(function(l){return l.type==='error'||l.type==='warn'||l.type==='warning'});
+      if(cIssues.length){
+        var logSec=el('div',{className:'rd-logs'});
+        logSec.appendChild(el('div',{className:'rd-log-label'},'Console'));
+        cIssues.forEach(function(l){
+          logSec.appendChild(el('div',{className:'rd-log-item '+l.type},'['+l.type+'] '+l.text));
+        });
+        body.appendChild(logSec);
+      }
+      // Network errors
+      if(r.networkErrors&&r.networkErrors.length){
+        var netSec=el('div',{className:'rd-logs'});
+        netSec.appendChild(el('div',{className:'rd-log-label'},'Network Errors'));
+        r.networkErrors.forEach(function(ne){
+          netSec.appendChild(el('div',{className:'rd-log-item error'},'['+ne.error+'] '+ne.url));
+        });
+        body.appendChild(netSec);
+      }
+      // Network API logs (collapsible, clickable rows)
+      if(r.networkLogs&&r.networkLogs.length){
+        var errCount=r.networkLogs.filter(function(n){return n.status>=400}).length;
+        var netLabel='Network ('+r.networkLogs.length+' request'+(r.networkLogs.length!==1?'s':'')+(errCount?', '+errCount+' error'+(errCount!==1?'s':''):'')+')';
+        var netToggle=el('div',{className:'rd-net-toggle'},[
+          el('span',{className:'net-arrow'},'\u25B6'),
+          el('span',{},netLabel)
+        ]);
+        var netList=el('div',{className:'rd-net-list'});
+        r.networkLogs.forEach(function(n){
+          var built=buildNetRow(n);
+          netList.appendChild(built.row);
+          if(built.detail)netList.appendChild(built.detail);
+        });
+        netToggle.addEventListener('click',function(){
+          netToggle.classList.toggle('open');
+        });
+        body.appendChild(netToggle);
+        body.appendChild(netList);
+      }
+      var testCard=el('div',{className:'rd-test'},[head,body]);
+      inner.appendChild(testCard);
+    });
+    // Re-trigger open animation if not yet open
+    var w=detailTr.querySelector('.rd-wrap');
+    if(w&&!w.classList.contains('open')){
+      requestAnimationFrame(function(){w.classList.add('open')});
+    }
+  }).catch(function(err){
+    var inner=detailTr.querySelector('.rd-inner');
+    if(inner)inner.textContent='Failed to load run detail';
+  });
+}
+/* ── Screenshots ── */
+function refreshScreenshots(){
+  var gal=$('#screenshotGallery'),empty=$('#screenshotsEmpty');
+  gal.textContent='';
+  if(!S.project){empty.style.display='block';empty.querySelector('p').textContent='Select a project to view screenshots.';return}
+  api('/api/db/projects/'+S.project+'/screenshots').then(function(files){
+    if(!Array.isArray(files)||!files.length){empty.style.display='block';empty.querySelector('p').textContent='No screenshots for this project.';return}
+    empty.style.display='none';
+    files.forEach(function(f){
+      var src='/api/image?path='+encodeURIComponent(f.path);
+      var img=document.createElement('img');img.src=src;img.alt=f.name;img.loading='lazy';
+      var capEl=el('div',{className:'cap'},[el('span',{className:'cap-name'},f.name)]);
+      (function(c,fp){
+        ssHash(fp).then(function(h){c.appendChild(createHashBadge(h))});
+      })(capEl,f.path);
+      var item=el('div',{className:'gallery-item',onclick:function(){openModal(src)}},[
+        img,capEl
+      ]);gal.appendChild(item);
+    });
+  }).catch(function(){});
+}
+/* ── Screenshot Hash Search ── */
+function searchByHash(){
+  var container=$('#ssSearchResult');
+  container.textContent='';
+  var raw=$('#ssHashInput').value.trim();
+  if(!raw)return;
+  var hash=raw.replace(/^ss:/,'');
+  if(!/^[a-f0-9]{1,8}$/i.test(hash)){
+    container.appendChild(el('div',{className:'ss-search-error'},'Invalid hash format. Expected 8 hex characters (e.g. ss:a3f2b1c9).'));
+    return;
+  }
+  fetch('/api/screenshot-hash/'+hash).then(function(res){
+    if(!res.ok){
+      container.appendChild(el('div',{className:'ss-search-error'},'Screenshot not found for hash: ss:'+hash));
+      return;
+    }
+    return res.blob();
+  }).then(function(blob){
+    if(!blob)return;
+    var url=URL.createObjectURL(blob);
+    var wrap=el('div',{className:'ss-search-result'},[
+      el('div',{className:'ss-result-label'},[
+        createHashBadge(hash),
+        el('span',{},'Found')
+      ])
+    ]);
+    var img=document.createElement('img');
+    img.src=url;
+    img.alt='ss:'+hash;
+    img.addEventListener('click',function(){openModal(url)});
+    wrap.appendChild(img);
+    container.appendChild(wrap);
+  }).catch(function(){
+    container.appendChild(el('div',{className:'ss-search-error'},'Error searching for screenshot.'));
+  });
+}
+$('#ssHashBtn').addEventListener('click',searchByHash);
+$('#ssHashInput').addEventListener('keydown',function(e){if(e.key==='Enter')searchByHash()});
+/* ── Live Execution ── */
+function clearFinishedLiveRuns(){
+  for(var k in S.liveRuns){if(S.liveRuns[k].done||!S.liveRuns[k].on)delete S.liveRuns[k]}
+  renderLive();
+}
+function dismissLiveRun(rid){
+  delete S.liveRuns[rid];
+  renderLive();
+}
+$('#liveClearBtn').addEventListener('click',clearFinishedLiveRuns);
+function renderLive(){
+  var panel=$('#livePanel'),grid=$('#liveTests'),navLive=$('#navLive'),liveEmpty=$('#liveEmpty');
+  var runs=S.liveRuns;
+  var runIds=Object.keys(runs);
+  if(runIds.length===0){
+    panel.classList.remove('active');
+    navLive.style.display='none';
+    liveEmpty.style.display='block';
+    $('#liveClearBtn').style.display='none';
+    return;
+  }
+  navLive.style.display='';
+  liveEmpty.style.display='none';
+  panel.classList.add('active');
+  // Aggregate stats across all runs
+  var gTotal=0,gCompleted=0,gPassed=0,gFailed=0,gActive=0,gRunning=false,gDone=true;
+  runIds.forEach(function(rid){
+    var r=runs[rid];gTotal+=r.total;gCompleted+=r.completed;gPassed+=r.passed;gFailed+=r.failed;gActive+=r.active;
+    if(r.on)gRunning=true;if(!r.done)gDone=false;
+  });
+  var badgeActive=0;
+  runIds.forEach(function(rid){var r=runs[rid];Object.keys(r.tests).forEach(function(n){if(n!=='__error'&&r.tests[n].status==='running')badgeActive++})});
+  $('#liveBadge').textContent=gRunning?badgeActive:gCompleted;
+  $('#liveBadge').style.background=gRunning?'var(--purple-dim)':gFailed>0?'var(--red-dim)':'var(--green-dim)';
+  $('#liveBadge').style.color=gRunning?'var(--purple)':gFailed>0?'var(--red)':'var(--green)';
+  $('#liveTotal').textContent=gTotal;
+  $('#livePass').textContent=gPassed;
+  $('#liveFail').textContent=gFailed;
+  $('#liveActive').textContent=gActive;
+  var pct=gTotal>0?gCompleted/gTotal*100:0;
+  $('#liveProgressFill').style.width=pct+'%';
+  // Hide single-project info (now shown per-section)
+  $('#liveProject').style.display='none';
+  // Show "Clear All" when there are finished/stale runs
+  var hasFinished=runIds.some(function(rid){return runs[rid].done||!runs[rid].on});
+  $('#liveClearBtn').style.display=hasFinished?'inline-block':'none';
+  // Header state
+  var lbl=panel.querySelector('.live-header .label');
+  var anyStale=runIds.some(function(rid){return runs[rid].stale});
+  if(!gRunning&&gDone){
+    lbl.textContent=anyStale?'COMPLETED (connection lost)':gFailed>0?'COMPLETED WITH FAILURES':'ALL TESTS PASSED';
+    lbl.style.color=anyStale?'var(--yellow)':gFailed>0?'var(--red)':'var(--green)';
+    var dot=lbl.querySelector('.dot');if(dot)dot.remove();
+    $('#liveProgressFill').style.background=anyStale?'var(--yellow)':gFailed>0?'var(--red)':'var(--green)';
+  } else {
+    if(!lbl.querySelector('.dot')){
+      lbl.textContent='';
+      var d=el('span',{className:'dot'});lbl.appendChild(d);lbl.appendChild(document.createTextNode(' RUNNING'));
+    }
+    lbl.style.color='var(--purple)';
+    $('#liveProgressFill').style.background='var(--purple)';
+  }
+  // Render per-run sections
+  grid.textContent='';
+  runIds.forEach(function(rid){
+    var L=runs[rid];
+    // Project section header
+    var projLabel=L.project||(L.cwd?L.cwd.split('/').pop():'Run');
+    var runStatus=L.done?(L.failed>0?'fail':'pass'):'running';
+    var dismissBtn=null;
+    if(L.done||!L.on){
+      dismissBtn=el('button',{className:'lr-dismiss',onclick:function(e){e.stopPropagation();dismissLiveRun(rid)}},'\u2715');
+    }
+    var sectionHeader=el('div',{className:'lr-section-header '+runStatus},[
+      el('span',{className:'lr-project-name'},projLabel),
+      createTriggerBadge(L.triggeredBy),
+      el('span',{className:'lr-section-stats'},[
+        el('span',{},L.completed+'/'+L.total),
+        L.failed>0?el('span',{style:'color:var(--red);margin-left:6px'},L.failed+' failed'):null,
+        L.on?el('span',{className:'spinner-small',style:'margin-left:6px'}):null
+      ]),
+      dismissBtn
+    ]);
+    grid.appendChild(sectionHeader);
+    var testGrid=el('div',{className:'lr-test-grid'});
+    var names=Object.keys(L.tests);
+    names.forEach(function(name){
+      if(name==='__error')return;
+      var t=L.tests[name];
+      var testKey=rid+'::'+name;
+      var iconText=t.status==='passed'?'\u2714':t.status==='failed'?'\u2718':'\u25CF';
+      var iconColor=t.status==='passed'?'color:var(--green)':t.status==='failed'?'color:var(--red)':'color:var(--purple)';
+      var meta='';
+      if(t.status==='running'){
+        meta=t.actionType?('Step '+(t.actions||0)+'/'+(t.totalActions||'?')):'starting...';
+        if(t.retry)meta='Retry '+t.retry;
+      } else if(t.status==='passed'){meta=t.duration||'done'}
+      else if(t.status==='failed'){meta=t.error||'failed'}
+      // Action log
+      var stepsEl=el('div',{className:'lt-actions'});
+      if(t.actionLog&&t.actionLog.length>0){
+        t.actionLog.forEach(function(a){
+          var detail=a.selector||a.value||a.text||'';
+          var durText=a.duration!=null?(a.duration<1000?a.duration+'ms':(a.duration/1000).toFixed(1)+'s'):'';
+          stepsEl.appendChild(el('div',{className:'lt-step'},[
+            el('span',{className:'step-icon '+(a.success?'ok':'fail')},a.success?'\u2714':'\u2718'),
+            el('span',{className:'step-type'},a.type),
+            el('span',{className:'step-detail'},detail),
+            el('span',{className:'step-dur'},durText)
+          ]));
+        });
+        if(t.status==='running'&&t.actions<t.totalActions){
+          stepsEl.appendChild(el('div',{className:'lt-step'},[el('span',{className:'step-icon run spinner-small'}),el('span',{className:'step-type',style:'opacity:.6'},'waiting...')]));
+        }
+      } else if(t.status==='running'){
+        stepsEl.appendChild(el('div',{className:'lt-step'},[el('span',{className:'step-icon run spinner-small'}),el('span',{className:'step-type',style:'opacity:.6'},'connecting...')]));
+      }
+      var isFinished=t.status==='passed'||t.status==='failed';
+      var isCollapsed=isFinished&&!S.liveExpanded.has(testKey);
+      var summaryEl=el('div',{className:'lt-summary'},[
+        el('span',{className:'lt-dur'},t.duration||''),
+        el('span',{className:'lt-expand'},isCollapsed?'\u25BC':'\u25B2')
+      ]);
+      // Screenshots section
+      var ssEl=null;
+      var allSS=(t.screenshots||[]).slice();
+      if(t.errorScreenshot)allSS.push(t.errorScreenshot);
+      if(allSS.length>0){
+        var ssOpen=S.liveSSOpen&&S.liveSSOpen.has(testKey);
+        var toggle=el('div',{className:'lt-screenshots-toggle'+(ssOpen?' open':'')},[
+          el('span',{className:'ss-arrow'},'\u25B6'),
+          el('span',{},'Screenshots ('+allSS.length+')')
+        ]);
+        var ssGridEl=el('div',{className:'lt-screenshots-grid'});
+        allSS.forEach(function(ssPath){
+          var fname=ssPath.split('/').pop();
+          var isErr=t.errorScreenshot&&ssPath===t.errorScreenshot;
+          var thumb=el('div',{className:'lt-ss-thumb'});
+          var img=document.createElement('img');
+          img.src='/api/image?path='+encodeURIComponent(ssPath);
+          img.alt=fname;img.loading='lazy';
+          if(isErr)thumb.style.borderColor='var(--red)';
+          thumb.appendChild(img);
+          thumb.addEventListener('click',function(e){e.stopPropagation();openModal('/api/image?path='+encodeURIComponent(ssPath),fname)});
+          var labelEl=el('div',{className:'lt-ss-label'},[el('span',{style:'overflow:hidden;text-overflow:ellipsis;white-space:nowrap'},fname)]);
+          // Compute hash async and append badge
+          (function(lbl,sp){
+            ssHash(sp).then(function(h){lbl.appendChild(createHashBadge(h))});
+          })(labelEl,ssPath);
+          ssGridEl.appendChild(el('div',{},[thumb,labelEl]));
+        });
+        toggle.addEventListener('click',function(e){
+          e.stopPropagation();
+          if(S.liveSSOpen.has(testKey))S.liveSSOpen.delete(testKey);else S.liveSSOpen.add(testKey);
+          toggle.classList.toggle('open');
+          ssGridEl.style.display=ssGridEl.style.display==='grid'?'none':'grid';
+        });
+        if(ssOpen)ssGridEl.style.display='grid';
+        ssEl=el('div',{className:'lt-screenshots'},[toggle,ssGridEl]);
+      }
+      var card=el('div',{className:'live-test '+t.status+(isCollapsed?' collapsed':'')},[
+        el('div',{className:'lt-name'},[
+          t.status==='running'?el('span',{className:'spinner'}):el('span',{className:'lt-icon',style:iconColor},iconText),
+          document.createTextNode(' '+name),
+          summaryEl
+        ]),
+        el('div',{className:'lt-meta'},meta),
+        stepsEl
+      ]);
+      if(ssEl)card.appendChild(ssEl);
+      // Network API logs in live view (clickable rows)
+      if(t.networkLogs&&t.networkLogs.length&&!isCollapsed){
+        var liveErrCount=t.networkLogs.filter(function(n){return n.status>=400}).length;
+        var liveNetLabel='Network ('+t.networkLogs.length+(liveErrCount?', '+liveErrCount+' error'+(liveErrCount!==1?'s':'')+')':')');
+        var liveNetToggle=el('div',{className:'rd-net-toggle',style:'margin:6px 0 0;padding-left:0'},[
+          el('span',{className:'net-arrow'},'\u25B6'),
+          el('span',{},liveNetLabel)
+        ]);
+        var liveNetList=el('div',{className:'rd-net-list'});
+        t.networkLogs.forEach(function(n){
+          var built=buildNetRow(n);
+          liveNetList.appendChild(built.row);
+          if(built.detail)liveNetList.appendChild(built.detail);
+        });
+        liveNetToggle.addEventListener('click',function(e){e.stopPropagation();liveNetToggle.classList.toggle('open')});
+        card.appendChild(liveNetToggle);
+        card.appendChild(liveNetList);
+      }
+      if(isFinished){
+        card.addEventListener('click',function(){
+          if(S.liveExpanded.has(testKey))S.liveExpanded.delete(testKey);
+          else S.liveExpanded.add(testKey);
+          renderLive();
+        });
+      }
+      testGrid.appendChild(card);
+      if(!isCollapsed)stepsEl.scrollTop=stepsEl.scrollHeight;
+    });
+    grid.appendChild(testGrid);
+  });
+}
+/* ── Actions ── */
+$('#btnRunAll').addEventListener('click',function(){triggerRun()});
+/* ── Modal ── */
+function openModal(src){$('#modalImg').src=src;$('#modal').classList.add('open')}
+$('#modal').addEventListener('click',function(){$('#modal').classList.remove('open')});
+document.addEventListener('keydown',function(e){if(e.key==='Escape')$('#modal').classList.remove('open')});
+/* ── Init ── */
+connectWS();
+refreshStatus();
+refreshProjects();
+refreshSuites();
+refreshRuns();
+refreshScreenshots();
+})();
+</script>
+</body>
+</html>