@matware/e2e-runner 1.1.1 → 1.3.0

package/templates/dashboard.html

@@ -7,6 +7,8 @@
 <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>
+/* ── base.css ── */
+/* ── Reset & Variables ── */
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 :root{
   --bg:#090a10;--surface:#11131b;--surface2:#181b26;--surface3:#1f2333;
@@ -51,6 +53,24 @@ a{color:var(--accent);text-decoration:none}
 .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}
+.pool-list{margin-top:6px;display:flex;flex-direction:column;gap:3px}
+.pool-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text2);font-family:var(--mono);padding:2px 0}
+.pool-item .pool-dot{width:6px;height:6px;margin-right:0}
+.pool-item strong{color:var(--text);font-weight:500}
+.pool-item .pool-sessions{margin-left:auto;color:var(--text3);font-size:9px}
+
+/* ── Sync Status ── */
+.sync-status{padding:12px 16px;border-top:1px solid var(--border)}
+.sync-status .sync-header{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text2)}
+.sync-status .sync-mode{font-size:9px;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:600}
+.sync-status .sync-mode.hub{background:var(--purple-dim);color:var(--purple)}
+.sync-status .sync-mode.agent{background:var(--accent-dim);color:var(--accent)}
+.sync-status .sync-mode.standalone{background:var(--surface3);color:var(--text3)}
+.sync-status .sync-details{margin-top:6px;font-size:10px;color:var(--text3)}
+.sync-status .sync-instances{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
+.sync-status .sync-inst{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:10px;font-size:9px;background:var(--surface3);border:1px solid var(--border)}
+.sync-status .sync-inst.online{border-color:var(--green);color:var(--green)}
+.sync-status .sync-inst.offline{color:var(--text3)}
 
 /* ── Main ── */
 .main{margin-left:232px;flex:1;min-height:100vh;display:flex;flex-direction:column}
@@ -61,6 +81,18 @@ a{color:var(--accent);text-decoration:none}
 .view.active{display:block}
 #view-live.active{display:flex;flex-direction:column;flex:1;min-height:calc(100vh - 0px);padding:16px}
 
+/* ── Responsive ── */
+@media(max-width:768px){
+  .sidebar{width:60px}.sidebar-logo h1,.sidebar-section-label,.nav-item span:not(.icon):not(.badge),.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,.module-grid{grid-template-columns:1fr}
+  .lr-test-grid{grid-template-columns:1fr}
+  .toast-container{right:12px;bottom:12px}
+}
+
+
+/* ── components.css ── */
 /* ── 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)}
@@ -92,12 +124,243 @@ 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)}
+
+/* ── Badges ── */
 .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)}
 
+/* ── 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}
+
+/* ── Toast Notifications ── */
+.toast-container{position:fixed;bottom:24px;right:24px;z-index:300;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
+.toast{padding:10px 16px;border-radius:var(--r);font-family:var(--mono);font-size:11px;font-weight:500;color:#fff;pointer-events:auto;animation:toastIn .3s ease;min-width:200px;max-width:380px;box-shadow:0 8px 24px rgba(0,0,0,.4);display:flex;align-items:center;gap:8px}
+.toast.success{background:var(--green);border:1px solid rgba(255,255,255,.15)}
+.toast.error{background:var(--red);border:1px solid rgba(255,255,255,.15)}
+.toast.info{background:var(--accent);border:1px solid rgba(255,255,255,.15)}
+.toast.fade-out{animation:toastOut .3s ease forwards}
+@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
+@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(24px)}}
+.toast.clickable{cursor:pointer}
+.toast.clickable:hover{filter:brightness(1.1)}
+
+/* ── Copy Button ── */
+.copy-btn{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:4px;font-size:9px;font-family:var(--mono);font-weight:500;color:var(--text3);background:transparent;border:1px solid transparent;cursor:pointer;transition:all .15s;user-select:none;white-space:nowrap;flex-shrink:0}
+.copy-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-dim)}
+.copy-btn.copied{color:var(--green);border-color:var(--green);background:var(--green-dim)}
+
+/* ── 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}
+
+/* ── Filter Bar ── */
+.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
+.filter-btn{padding:5px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text2);font-family:var(--mono);font-size:11px;cursor:pointer;transition:all .15s}
+.filter-btn:hover{background:var(--surface3);border-color:var(--border-hi)}
+.filter-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
+.filter-bar input{padding:5px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:11px;max-width:200px}
+.filter-bar input:focus{outline:none;border-color:var(--accent)}
+.filter-bar input::placeholder{color:var(--text3)}
+
+/* ── Inner Tabs ── */
+.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px}
+.tab-btn{padding:8px 16px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--text3);cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;transition:all .15s}
+.tab-btn:hover{color:var(--text2);background:var(--surface2)}
+.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
+.tab-pane{display:none}
+.tab-pane.active{display:block}
+
+/* ── Keyboard Shortcuts Modal ── */
+.kb-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:250;display:none;align-items:center;justify-content:center;padding:24px}
+.kb-modal.open{display:flex}
+.kb-modal-content{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:24px;max-width:420px;width:100%;max-height:80vh;overflow-y:auto}
+.kb-modal-content h2{font-family:var(--sans);font-size:16px;font-weight:700;margin-bottom:16px;color:var(--text)}
+.kb-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}
+.kb-row:last-child{border-bottom:none}
+.kb-key{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 8px;border-radius:4px;background:var(--surface3);border:1px solid var(--border);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--accent)}
+.kb-desc{font-size:12px;color:var(--text2)}
+
+/* ── Serial / Pool Badges ── */
+.serial-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:600;background:var(--amber-dim);color:var(--amber);vertical-align:middle;margin-left:4px}
+.pool-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:600;background:rgba(99,102,241,.15);color:#818cf8;vertical-align:middle;margin-left:4px;font-family:var(--mono);letter-spacing:-.3px}
+.pool-badge::before{content:'\1F517';font-size:8px}
+
+
+/* ── view-watch.css ── */
+/* ── Watch View: Project Cards ── */
+.watch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:24px}
+.watch-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;transition:border-color .2s,box-shadow .2s}
+.watch-card:hover{border-color:var(--border-hi);box-shadow:0 2px 12px rgba(0,0,0,.25)}
+.watch-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
+.watch-card-name{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
+.watch-card-icons{display:flex;gap:6px;flex-shrink:0;margin-left:8px}
+.watch-card-icons .btn{padding:3px 8px;font-size:10px}
+
+/* ── Sparkline ── */
+.watch-sparkline{height:40px;margin-bottom:10px}
+.watch-sparkline svg{width:100%;height:100%;display:block}
+
+/* ── Card Footer ── */
+.watch-card-footer{display:flex;align-items:center;justify-content:space-between;font-size:11px}
+.watch-card-status{display:flex;align-items:center;gap:6px}
+.watch-card-status .status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
+.watch-card-status .status-dot.green{background:var(--green);box-shadow:0 0 6px var(--green)}
+.watch-card-status .status-dot.red{background:var(--red);box-shadow:0 0 6px var(--red)}
+.watch-card-status .status-dot.amber{background:var(--amber);box-shadow:0 0 6px var(--amber)}
+.watch-card-status .status-dot.dim{background:var(--text3)}
+.watch-card-rate{font-weight:600}
+.watch-card-rate.green{color:var(--green)}
+.watch-card-rate.amber{color:var(--amber)}
+.watch-card-rate.red{color:var(--red)}
+
+.watch-card-meta{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:10px;color:var(--text3)}
+.watch-card-meta span{display:flex;align-items:center;gap:6px}
+.watch-card-countdown{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums}
+.watch-card-commit{font-family:var(--mono);color:var(--text3)}
+
+/* ── Event Log ── */
+.watch-event-log{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
+.watch-event-log-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface2)}
+.watch-event-log-header .title{font-family:var(--sans);font-size:13px;font-weight:600}
+.watch-event-log-body{max-height:400px;overflow-y:auto}
+.watch-event-row{display:grid;grid-template-columns:120px 130px minmax(80px,1fr) 46px 74px 40px 52px 60px;align-items:center;gap:0;padding:7px 16px;border-bottom:1px solid var(--border);font-size:11px;transition:background .1s}
+.watch-event-row:last-child{border-bottom:none}
+.watch-event-row:hover{background:var(--surface2)}
+.watch-event-row.we-header{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;padding:6px 16px;background:var(--surface2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
+.watch-event-row.we-header:hover{background:var(--surface2)}
+.watch-event-time{color:var(--text3);font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.watch-event-project{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
+.watch-event-suite{color:var(--accent);font-family:var(--mono);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px}
+.watch-event-result{justify-self:center}
+.watch-event-counts{font-family:var(--mono);font-size:10px;color:var(--text2);white-space:nowrap;text-align:center}
+.watch-event-counts .we-counts-ok{color:var(--green)}
+.watch-event-rate{font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums;text-align:right}
+.watch-event-duration{color:var(--text3);font-family:var(--mono);font-size:10px;text-align:right}
+.we-trigger{color:var(--text3);font-size:9px;padding:1px 6px;border-radius:8px;background:var(--surface3);white-space:nowrap;text-align:center;justify-self:end}
+
+/* ── Watch Table (legacy) ── */
+.watch-jobs-table{width:100%;border-collapse:collapse;font-size:11px}
+
+
+/* ── view-tests.css ── */
+/* ── Suite Cards ── */
+.suite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;padding:16px}
+.suite-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s}
+.suite-card:hover{border-color:var(--border-hi);box-shadow:0 2px 12px rgba(0,0,0,.25)}
+.suite-card-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface2)}
+.suite-card-icon{width:32px;height:32px;border-radius:6px;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--accent);flex-shrink:0}
+.suite-card-info{flex:1;min-width:0}
+.suite-card-name{font-family:var(--sans);font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.suite-card-file{font-size:10px;color:var(--text3);margin-top:1px;font-family:var(--mono)}
+.suite-card-count{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:40px;height:40px;border-radius:var(--r);background:var(--surface3);border:1px solid var(--border)}
+.suite-card-count-num{font-size:16px;font-weight:700;color:var(--text);line-height:1}
+.suite-card-count-lbl{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;line-height:1;margin-top:2px}
+.suite-card-body{padding:0}
+.suite-card-tests{list-style:none;max-height:180px;overflow-y:auto}
+.suite-card-tests::-webkit-scrollbar{width:4px}
+.suite-card-tests::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
+.suite-card-tests li{font-size:11px;color:var(--text2);padding:6px 16px 6px 30px;position:relative;cursor:pointer;transition:all .15s;border-bottom:1px solid rgba(35,39,56,.5)}
+.suite-card-tests li:last-child{border-bottom:none}
+.suite-card-tests li:hover{color:var(--text);background:var(--surface2)}
+.suite-card-tests li::before{content:"\25B8";position:absolute;left:14px;color:var(--text3);font-size:9px;top:7px;transition:transform .15s}
+.suite-card-tests li.expanded{color:var(--accent);background:var(--accent-dim)}
+.suite-card-tests li.expanded::before{content:"\25BE";color:var(--accent)}
+.suite-test-steps{padding:8px 0 8px 14px;border-left:2px solid var(--accent-dim);margin:6px 0 4px 6px}
+.suite-card-footer{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;background:var(--surface)}
+
+/* ── Suite Detail Modal ── */
+.suite-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:32px 24px;overflow-y:auto;backdrop-filter:blur(4px)}
+.suite-modal-overlay.open{display:flex}
+.suite-modal{width:100%;max-width:960px;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;animation:suiteModalIn .2s ease}
+@keyframes suiteModalIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
+.suite-modal-header{display:flex;align-items:center;gap:14px;padding:18px 24px;background:var(--surface2);border-bottom:1px solid var(--border)}
+.suite-modal-header .suite-card-icon{width:36px;height:36px;font-size:16px}
+.suite-modal-title{flex:1;min-width:0}
+.suite-modal-title h2{font-family:var(--sans);font-size:16px;font-weight:700;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.suite-modal-title span{font-size:10px;color:var(--text3);font-family:var(--mono)}
+.suite-modal-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
+.suite-modal-close{width:32px;height:32px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface3);color:var(--text2);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
+.suite-modal-close:hover{background:var(--red-dim);border-color:rgba(239,68,68,.3);color:var(--red)}
+.suite-modal-body{padding:0}
+.suite-modal-loading{padding:32px;text-align:center;color:var(--text3);font-size:12px}
+.suite-modal-test{border-bottom:1px solid var(--border)}
+.suite-modal-test:last-child{border-bottom:none}
+.suite-modal-test-header{display:flex;align-items:center;gap:10px;padding:12px 24px;cursor:pointer;transition:background .15s;user-select:none}
+.suite-modal-test-header:hover{background:var(--surface2)}
+.suite-modal-test.open>.suite-modal-test-header{background:var(--surface2)}
+.suite-modal-test-chevron{font-size:9px;color:var(--text3);transition:transform .15s;width:14px;text-align:center;flex-shrink:0}
+.suite-modal-test.open>.suite-modal-test-header .suite-modal-test-chevron{transform:rotate(90deg);color:var(--accent)}
+.suite-modal-test-name{font-size:12px;font-weight:500;color:var(--text);flex:1}
+.suite-modal-test-badge{font-size:9px;padding:2px 7px;border-radius:8px;background:var(--surface3);color:var(--text3);flex-shrink:0}
+.suite-modal-test-actions{display:none;padding:0 24px 16px 48px}
+.suite-modal-test.open>.suite-modal-test-actions{display:block}
+.suite-modal-step{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:11px;font-family:var(--mono);border-bottom:1px solid rgba(35,39,56,.3)}
+.suite-modal-step:last-child{border-bottom:none}
+.suite-modal-step-num{width:22px;text-align:right;color:var(--text3);flex-shrink:0;font-size:10px;padding-top:1px}
+.suite-modal-step-type{color:var(--purple);font-weight:600;flex-shrink:0;min-width:120px}
+.suite-modal-step-detail{color:var(--text2);flex:1;min-width:0;word-break:break-word}
+.suite-modal-step-detail .step-sel{color:var(--accent)}
+.suite-modal-step-detail .step-arrow{color:var(--text3);margin:0 4px}
+.suite-modal-step-detail .step-val{color:var(--text)}
+.suite-modal-expect{padding:10px 24px 10px 48px;background:var(--green-dim);border-bottom:1px solid var(--border);font-size:11px;color:var(--green);display:flex;align-items:flex-start;gap:8px}
+.suite-modal-expect-label{font-weight:600;flex-shrink:0}
+
+/* ── Project Accordion ── */
+.project-accordion{margin-bottom:2px}
+.project-accordion-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .15s;user-select:none}
+.project-accordion-header:hover{background:var(--surface2);border-color:var(--border-hi)}
+.project-accordion.open>.project-accordion-header{border-radius:var(--r) var(--r) 0 0;border-bottom-color:transparent;background:var(--surface2)}
+.project-accordion-chevron{font-size:10px;color:var(--text3);transition:transform .2s ease;flex-shrink:0;width:16px;text-align:center}
+.project-accordion.open>.project-accordion-header .project-accordion-chevron{transform:rotate(90deg);color:var(--accent)}
+.project-accordion-name{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.project-accordion-meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
+.project-accordion-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--surface3);color:var(--text2)}
+.project-accordion-body{overflow:hidden;max-height:0;transition:max-height .3s ease;border:1px solid var(--border);border-top:none;border-radius:0 0 var(--r) var(--r);background:var(--bg)}
+.project-accordion.open>.project-accordion-body{max-height:5000px}
+
+/* ── Module Cards ── */
+.module-section-title{font-family:var(--sans);font-size:14px;font-weight:600;margin:24px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border);color:var(--text2);display:flex;align-items:center;gap:8px}
+.module-section-title .mod-icon{color:var(--purple)}
+.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
+.module-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;border-left:3px solid var(--purple);transition:border-color .15s}
+.module-card:hover{border-color:var(--border-hi);border-left-color:var(--purple)}
+.module-card-name{font-weight:600;font-size:13px;color:var(--purple);margin-bottom:4px}
+.module-card-desc{font-size:11px;color:var(--text2);margin-bottom:8px}
+.module-card-meta{font-size:10px;color:var(--text3);display:flex;gap:12px}
+.module-card-params{list-style:none;font-size:10px;color:var(--text2);margin-top:6px}
+.module-card-params li{padding:2px 0}
+.module-card-params li::before{content:'$';color:var(--purple);margin-right:4px}
+
+/* ── Variables ── */
+.var-table{width:100%;border-collapse:collapse;font-size:12px}
+.var-table th{text-align:left;font-size:9px;font-weight:600;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--border)}
+.var-table td{padding:8px 12px;border-bottom:1px solid var(--border)}
+.var-table td code{background:var(--surface3);padding:1px 5px;border-radius:3px;font-size:11px}
+.var-add-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:16px}
+.var-add-form input,.var-add-form select{padding:6px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:12px}
+.var-add-form input:focus,.var-add-form select:focus{outline:none;border-color:var(--accent)}
+
+
+/* ── view-runs.css ── */
 /* ── 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}
@@ -105,17 +368,209 @@ tbody tr.selected td{background:var(--accent-dim)}
 .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)}
+/* ── Inline Run Detail ── */
+.run-detail-row td{padding:0!important;border-bottom:2px solid var(--purple)}
+.run-detail-row:hover td{background:transparent!important}
+.rd-wrap{overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1);max-height:0}
+.rd-wrap.open{max-height:10000px}
+.rd-inner{padding:20px 24px;background:var(--bg);position:relative}
+.rd-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--purple),var(--accent),transparent 80%)}
+.rd-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--border);border-radius:8px;overflow:hidden;margin-bottom:20px}
+.rd-summary>div{background:var(--surface);padding:14px 16px;text-align:center;transition:background .15s}
+.rd-summary>div:hover{background:var(--surface2)}
+.rd-s-label{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}
+.rd-s-val{font-weight:700;font-size:18px;margin-top:4px}
+.rd-test{margin-bottom:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .2s}
+.rd-test:hover{border-color:var(--border-hi)}
+.rd-test:last-child{margin-bottom:0}
+.rd-test-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface2);border-bottom:1px solid var(--border);position:relative;padding-left:20px}
+.rd-test-head::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
+.rd-test.pass .rd-test-head::before{background:var(--green)}
+.rd-test.fail .rd-test-head::before{background:var(--red)}
+.rd-test.flaky .rd-test-head::before{background:var(--amber)}
+.rd-test-name{font-family:var(--sans);font-weight:600;font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rd-test-dur{font-size:11px;color:var(--text2);flex-shrink:0;font-variant-numeric:tabular-nums}
+.rd-test-body{padding:16px}
+.rd-retries{font-size:11px;color:var(--amber);margin-bottom:10px;display:flex;align-items:center;gap:6px}
+.rd-error-msg{font-size:12px;color:var(--red);padding:10px 14px;background:var(--red-dim);border-radius:var(--r);margin-bottom:12px;word-break:break-all;border-left:3px solid var(--red);line-height:1.5;position:relative;padding-right:60px}
+.rd-error-msg .copy-btn{position:absolute;top:8px;right:8px;opacity:0}
+.rd-error-msg:hover .copy-btn{opacity:1}
+.rd-shots{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
+.rd-shot{width:140px;border-radius:6px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:all .2s;background:var(--surface2)}
+.rd-shot:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.35)}
+.rd-shot img{width:100%;height:84px;object-fit:cover;display:block}
+.rd-shot .rd-shot-cap{font-size:9px;color:var(--text3);padding:5px 8px;background:var(--surface)}
+.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-bottom:12px}
+.rd-log-label{font-size:9px;font-weight:600;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:8px}
+.rd-log-item{font-size:11px;padding:4px 10px;border-left:2px solid var(--border);margin-bottom:2px;color:var(--text2);word-break:break-all;line-height:1.5}
+.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)}
+
+/* ── Network Panel ── */
+.rd-net-panel{margin-top:4px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
+.rd-net-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);cursor:pointer;user-select:none;transition:background .15s}
+.rd-net-head:hover{background:var(--surface3)}
+.rd-net-head .net-arrow{font-size:9px;color:var(--text3);transition:transform .2s}
+.rd-net-head.open .net-arrow{transform:rotate(90deg)}
+.rd-net-head .net-title{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--text)}
+.rd-net-head .net-stats{margin-left:auto;display:flex;gap:12px;font-size:10px}
+.rd-net-head .net-stat{color:var(--text3)}
+.rd-net-head .net-stat strong{color:var(--text2)}
+.rd-net-head .net-stat.has-err strong{color:var(--red)}
+.rd-net-body{display:none;max-height:600px;overflow-y:auto}
+.rd-net-head.open~.rd-net-body{display:block}
+.rd-net-cols{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:9px;font-weight:600;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:1}
+.rd-net-cols .col-e{width:16px;flex-shrink:0}
+.rd-net-cols .col-m{width:50px;flex-shrink:0}
+.rd-net-cols .col-s{width:60px;flex-shrink:0}
+.rd-net-cols .col-u{flex:1;min-width:0}
+.rd-net-cols .col-d{width:60px;flex-shrink:0;text-align:right}
+.rd-net-row{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:11px;font-family:var(--mono);border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
+.rd-net-row:hover{background:var(--surface2)}
+.rd-net-row.has-error{background:rgba(239,68,68,.03)}
+.rd-net-row.has-error:hover{background:rgba(239,68,68,.06)}
+.rd-net-expand{width:16px;flex-shrink:0;font-size:8px;color:var(--text3);transition:transform .2s;text-align:center}
+.rd-net-row.open .rd-net-expand{transform:rotate(90deg);color:var(--accent)}
+.rd-net-method{width:50px;flex-shrink:0;display:inline-flex;justify-content:center;padding:2px 6px;border-radius:3px;font-size:9px;font-weight:700}
+.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{width:60px;flex-shrink:0;font-size:10px;font-weight:600}
+.rd-net-status.s2xx{color:var(--green)}
+.rd-net-status.s3xx{color:var(--amber)}
+.rd-net-status.s4xx,.rd-net-status.s5xx{color:var(--red)}
+.rd-net-op{flex-shrink:0;padding:1px 7px;border-radius:3px;font-size:9px;font-weight:600;background:var(--purple-dim,rgba(168,85,247,.12));color:var(--purple,#a855f7);font-family:var(--sans);letter-spacing:.01em;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rd-net-url{flex:1;min-width:0;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rd-net-dur{width:60px;flex-shrink:0;text-align:right;color:var(--text3);font-variant-numeric:tabular-nums}
+.rd-net-detail{display:none;border-bottom:1px solid var(--border);background:var(--bg);overflow:hidden}
+.rd-net-row.open+.rd-net-detail{display:block}
+.rd-net-row .copy-btn{opacity:0;padding:1px 6px}
+.rd-net-row:hover .copy-btn{opacity:1}
+.rd-net-body .rd-log-item{padding:6px 14px;margin-bottom:0;border-left:3px solid var(--border);border-bottom:1px solid var(--border);font-size:11px}
+.rd-net-body .rd-log-item:last-child{border-bottom:none}
+.rd-net-body .rd-log-item.error{border-left-color:var(--red)}
+.rd-net-body .rd-log-item.warn,.rd-net-body .rd-log-item.warning{border-left-color:var(--amber)}
+
+/* ── Network Detail Sections ── */
+.rd-nd-section{border-bottom:1px solid var(--border)}
+.rd-nd-section:last-child{border-bottom:none}
+.rd-nd-toggle{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer;user-select:none;transition:background .15s;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
+.rd-nd-toggle:hover{background:var(--surface2);color:var(--text2)}
+.rd-nd-toggle .nd-arrow{font-size:8px;transition:transform .2s}
+.rd-nd-toggle.open .nd-arrow{transform:rotate(90deg)}
+.rd-nd-toggle .nd-count{margin-left:auto;font-size:9px;font-weight:400;letter-spacing:0;text-transform:none}
+.rd-nd-content{display:none;padding:0 16px 10px;max-height:300px;overflow-y:auto}
+.rd-nd-toggle.open+.rd-nd-content{display:block}
+.rd-nd-content pre{white-space:pre-wrap;word-break:break-all;color:var(--text2);font-size:11px;line-height:1.6;margin:0;font-family:var(--mono)}
+.rd-hdr-table{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0;font-size:11px}
+.rd-hdr-row{display:contents}
+.rd-hdr-row:hover .rd-hdr-key,.rd-hdr-row:hover .rd-hdr-val{background:var(--surface2)}
+.rd-hdr-key{padding:3px 12px 3px 0;color:var(--accent);font-weight:500;border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rd-hdr-val{padding:3px 0;color:var(--text2);border-bottom:1px solid var(--border);word-break:break-all}
+.rd-nd-empty{color:var(--text3);font-size:11px;padding:4px 0;font-style:italic}
+
+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)}
+
+/* ── Actions Panel in Run Detail ── */
+.rd-actions-panel{margin-top:4px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
+.rd-actions-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);cursor:pointer;user-select:none;transition:background .15s}
+.rd-actions-head:hover{background:var(--surface3)}
+.rd-actions-head .act-arrow{font-size:9px;color:var(--text3);transition:transform .2s}
+.rd-actions-head.open .act-arrow{transform:rotate(90deg)}
+.rd-actions-body{display:none;max-height:500px;overflow-y:auto;padding:8px 14px}
+.rd-actions-head.open~.rd-actions-body{display:block}
+
+/* ── Run Detail Insights ── */
+.rd-insights{margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
+.rd-insights:empty{display:none}
+.rd-ins-health{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-size:12px}
+.rd-ins-rate{font-size:18px;font-weight:700}
+.rd-ins-rate.green{color:var(--green)}
+.rd-ins-rate.amber{color:var(--amber)}
+.rd-ins-rate.red{color:var(--red)}
+.rd-ins-trend{font-size:11px;color:var(--text2)}
+.rd-ins-trend.green{color:var(--green)}
+.rd-ins-trend.red{color:var(--red)}
+.rd-ins-tag{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600}
+.rd-ins-tag.amber{background:var(--amber-dim);color:var(--amber)}
+.rd-ins-tag.red{background:var(--red-dim);color:var(--red)}
+.rd-ins-item{display:flex;align-items:flex-start;gap:8px;padding:6px 12px;border-radius:var(--r);font-size:11px;color:var(--text2);border-left:3px solid var(--border)}
+.rd-ins-item.red{border-left-color:var(--red);background:var(--red-dim)}
+.rd-ins-item.green{border-left-color:var(--green);background:var(--green-dim)}
+.rd-ins-item.amber{border-left-color:var(--amber);background:var(--amber-dim)}
+.rd-ins-icon{font-size:12px;flex-shrink:0;width:14px;text-align:center}
+
+/* ── Health Banner ── */
+.health-banner{display:flex;align-items:center;gap:1px;background:var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:20px}
+.health-banner:empty{display:none}
+.hb-item{flex:1;background:var(--surface);padding:12px 16px;text-align:center;min-width:0;transition:background .15s}
+.hb-item:hover{background:var(--surface2)}
+.hb-val{font-size:20px;font-weight:700;margin-bottom:2px}
+.hb-val.green{color:var(--green)}
+.hb-val.amber{color:var(--amber)}
+.hb-val.red{color:var(--red)}
+.hb-val.accent{color:var(--accent)}
+.hb-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}
+.hb-trend{font-size:10px;margin-top:2px}
+.hb-trend.green{color:var(--green)}
+.hb-trend.red{color:var(--red)}
+.hb-trend.dim{color:var(--text3)}
+.hb-link{background:var(--surface);padding:12px 16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;min-width:100px}
+.hb-link:hover{background:var(--accent-dim)}
+.hb-link span{font-size:11px;color:var(--accent);font-weight:600}
+
+/* ── 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}
 
+/* ── Learnings ── */
+.learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px}
+.learn-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;text-align:center}
+.learn-stat-val{font-size:24px;font-weight:700;margin-bottom:2px}
+.learn-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em}
+.learn-section{margin-bottom:20px}
+.learn-section-title{font-family:var(--sans);font-size:13px;font-weight:600;margin-bottom:10px;color:var(--text)}
+.learn-table{width:100%;border-collapse:collapse;font-size:11px}
+.learn-table th{text-align:left;font-size:9px;font-weight:600;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
+.learn-table th:hover{color:var(--text2)}
+.learn-table th.sorted::after{content:' \25B2';font-size:8px}
+.learn-table th.sorted.desc::after{content:' \25BC'}
+.learn-table td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text2)}
+.learn-table td code{background:var(--surface3);padding:1px 5px;border-radius:3px;font-size:10px;color:var(--text)}
+.learn-table tbody tr:hover td{background:var(--surface2);color:var(--text)}
+.learn-trend-chart{width:100%;height:100px;margin-bottom:20px}
+.learn-trend-chart svg{width:100%;height:100%}
+
+/* ── Pool Distribution ── */
+.pool-dist{display:flex;align-items:stretch;gap:0;border-radius:6px;overflow:hidden;height:22px;margin:8px 0;font-size:10px;font-weight:600;font-family:var(--mono)}
+.pool-dist-seg{display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;color:#fff;white-space:nowrap;min-width:40px;transition:flex .3s}
+.pool-dist-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:4px 0 8px;font-size:10px;font-family:var(--mono);color:var(--text2)}
+.pool-dist-legend span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:middle}
+
+
+/* ── view-live.css ── */
 /* ── 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}
@@ -145,15 +600,18 @@ tbody tr.selected td{background:var(--accent-dim)}
 .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-actions{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-detail{color:var(--text2);flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}
 .lt-step .step-dur{color:var(--text3);flex-shrink:0;margin-left:auto}
+.lt-step.pool-log{background:rgba(99,102,241,.06);border-left:2px solid rgba(99,102,241,.3);padding-left:8px}
+.lt-step.pool-log .step-icon{color:#818cf8}
+.lt-step.pool-log .step-type{color:#818cf8;font-weight:600}
 .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)}
@@ -165,13 +623,15 @@ tbody tr.selected td{background:var(--accent-dim)}
 .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}
+
+/* ── Live Run Sections ── */
 .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}
+.lr-test-grid{display:grid;grid-template-columns:repeat(auto-fit,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}
@@ -186,119 +646,6 @@ tbody tr.selected td{background:var(--accent-dim)}
 .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>
@@ -319,17 +666,20 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
   <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 class="nav-item active" data-view="watch">
+    <i class="icon">&#9202;</i><span>Watch</span>
   </div>
-  <div class="nav-item active" data-view="suites">
-    <i class="icon">&#9655;</i><span>Suites</span>
+  <div class="nav-item" data-view="tests">
+    <i class="icon">&#9655;</i><span>Tests</span><span class="badge" id="badgeSuites">-</span>
   </div>
   <div class="nav-item" data-view="runs">
-    <i class="icon">&#9776;</i><span>Runs</span>
+    <i class="icon">&#9776;</i><span>Runs</span><span class="badge" id="badgeRuns">-</span>
   </div>
-  <div class="nav-item" data-view="screenshots">
-    <i class="icon">&#9635;</i><span>Screenshots</span>
+  <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" data-view="instances" id="navInstances" style="display:none">
+    <i class="icon">&#9673;</i><span>Instances</span><span class="badge" id="badgeInstances">-</span>
   </div>
 
   <div class="pool-status" id="poolStatus">
@@ -338,16 +688,214 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
       <strong>Pool</strong> <span id="poolLabel">--</span>
     </div>
     <div class="pool-info">Sessions: <strong id="poolSessions">-/-</strong></div>
+    <div class="pool-list" id="poolList" style="display:none"></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>
+  
+  <!-- Sync Status -->
+  <div class="sync-status" id="syncStatus" style="display:none">
+    <div class="sync-header">
+      <span class="pool-dot" id="syncDot"></span>
+      <strong>Sync</strong>
+      <span class="sync-mode" id="syncMode">--</span>
+    </div>
+    <div class="sync-details" id="syncDetails"></div>
+    <div class="sync-instances" id="syncInstances"></div>
+  </div>
 </aside>
 
 <div class="main">
 
-  <!-- Live View -->
+  <!-- ════════════════ Watch View (default) ════════════════ -->
+  <div class="view active" id="view-watch">
+    <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">Watch</div>
+    </div>
+    <div class="watch-grid" id="watchCards"></div>
+    <div class="watch-event-log">
+      <div class="watch-event-log-header">
+        <span class="title">Recent Runs</span>
+      </div>
+      <div class="watch-event-log-body" id="watchEventLog"></div>
+    </div>
+    <div class="empty" id="watchEmpty" style="display:none">
+      <div class="empty-icon">&#9202;</div>
+      <p>No projects registered yet. Run some tests to see project cards here.</p>
+    </div>
+  </div>
+
+  <!-- ════════════════ Tests View (inner tabs: Suites / Modules / Variables) ════════════════ -->
+  <div class="view" id="view-tests">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+      <div style="font-family:var(--sans);font-size:16px;font-weight:600">Tests</div>
+      <div style="display:flex;gap:8px">
+        <button class="btn sm primary" id="btnRunAll">&#9655; Run All</button>
+      </div>
+    </div>
+    <div class="tab-bar">
+      <button class="tab-btn active" data-tab="testsTabSuites">Suites</button>
+      <button class="tab-btn" data-tab="testsTabModules">Modules</button>
+      <button class="tab-btn" data-tab="testsTabVariables">Variables</button>
+    </div>
+    <!-- Suites tab -->
+    <div class="tab-pane active" id="testsTabSuites">
+      <div id="suiteAccordionContainer"></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>
+    <!-- Modules tab -->
+    <div class="tab-pane" id="testsTabModules">
+      <div id="moduleSection"></div>
+    </div>
+    <!-- Variables tab -->
+    <div class="tab-pane" id="testsTabVariables">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+        <div style="font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text2)">Variables</div>
+        <button class="btn sm primary" id="btnAddVar">+ Add Variable</button>
+      </div>
+      <div id="varAddForm" style="display:none"></div>
+      <div id="variablesContainer"></div>
+      <div class="empty" id="variablesEmpty" style="display:none">
+        <div class="empty-icon">&#9881;</div>
+        <p>No variables set. Add variables to use <code>{{var.KEY}}</code> in your tests.</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- ════════════════ Runs View (inner tabs: History / Screenshots / Learnings) ════════════════ -->
+  <div class="view" id="view-runs">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+      <div style="font-family:var(--sans);font-size:16px;font-weight:600">Runs</div>
+    </div>
+    <div class="tab-bar">
+      <button class="tab-btn active" data-tab="runsTabHistory">History</button>
+      <button class="tab-btn" data-tab="runsTabScreenshots">Screenshots<span class="badge" id="badgeScreenshots" style="margin-left:6px">-</span></button>
+      <button class="tab-btn" data-tab="runsTabLearnings" id="runsTabLearnings">Learnings<span class="badge" id="badgeLearnings" style="margin-left:6px">-</span></button>
+    </div>
+    <!-- History tab -->
+    <div class="tab-pane active" id="runsTabHistory">
+      <div class="health-banner" id="runsHealthBanner"></div>
+      <div class="card">
+        <div class="card-label">Pass Rate Trend</div>
+        <div class="chart" id="trendChart"></div>
+      </div>
+      <div class="filter-bar" id="filterBar">
+        <button class="filter-btn active" data-filter="all">All</button>
+        <button class="filter-btn" data-filter="pass">Pass</button>
+        <button class="filter-btn" data-filter="fail">Fail</button>
+        <button class="filter-btn" data-filter="mixed">Mixed</button>
+        <input type="text" id="runSearchInput" placeholder="Search suite..." spellcheck="false">
+      </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 tab -->
+    <div class="tab-pane" id="runsTabScreenshots">
+      <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>
+    <!-- Learnings tab -->
+    <div class="tab-pane" id="runsTabLearnings">
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
+        <div style="font-family:var(--sans);font-size:14px;font-weight:600;color:var(--text2)">Learnings</div>
+        <div style="display:flex;gap:8px;align-items:center">
+          <select id="learningsDays" style="padding:5px 8px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:11px">
+            <option value="7">7 days</option>
+            <option value="14">14 days</option>
+            <option value="30" selected>30 days</option>
+            <option value="90">90 days</option>
+          </select>
+          <button class="btn sm" id="btnExportLearnings">Export MD</button>
+          <button class="btn sm" id="btnRefreshLearnings">Refresh</button>
+        </div>
+      </div>
+      <div id="learningsOverview"></div>
+      <div id="learningsTrend"></div>
+      <div id="learningsFlaky"></div>
+      <div id="learningsSelectors"></div>
+      <div id="learningsPages"></div>
+      <div id="learningsApis"></div>
+      <div id="learningsErrors"></div>
+      <div class="empty" id="learningsEmpty" style="display:none">
+        <div class="empty-icon">&#9733;</div>
+        <p>No learnings data yet. Run some tests to start building knowledge.</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- ════════════════ Instances View (Hub Mode) ════════════════ -->
+  <div class="view" id="view-instances">
+    <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">Connected Instances</div>
+      <div style="display:flex;gap:8px">
+        <select id="instanceFilter" style="padding:6px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--mono);font-size:11px">
+          <option value="all">All Status</option>
+          <option value="active">Active</option>
+          <option value="pending">Pending</option>
+          <option value="suspended">Suspended</option>
+        </select>
+        <button class="btn sm" id="refreshInstances">Refresh</button>
+      </div>
+    </div>
+    
+    <div class="stats" id="instanceStats">
+      <div class="stat-block"><div class="stat-val accent" id="statInstancesTotal">-</div><div class="stat-lbl">Total</div></div>
+      <div class="stat-block"><div class="stat-val green" id="statInstancesOnline">-</div><div class="stat-lbl">Online</div></div>
+      <div class="stat-block"><div class="stat-val purple" id="statInstancesActive">-</div><div class="stat-lbl">Active</div></div>
+      <div class="stat-block"><div class="stat-val" id="statInstancesPending" style="color:var(--amber)">-</div><div class="stat-lbl">Pending</div></div>
+    </div>
+    
+    <div class="card" style="padding:0">
+      <div class="tbl-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>Status</th>
+              <th>Instance ID</th>
+              <th>Display Name</th>
+              <th>Role</th>
+              <th>Environment</th>
+              <th>Last Seen</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody id="instancesBody"></tbody>
+        </table>
+      </div>
+    </div>
+    
+    <div class="empty" id="instancesEmpty" style="display:none">
+      <div class="empty-icon">&#9673;</div>
+      <p>No instances registered yet.</p>
+      <p style="margin-top:8px;font-size:11px;color:var(--text3)">Use <code>npx e2e-runner sync add-instance</code> to register agents.</p>
+    </div>
+  </div>
+
+  <!-- ════════════════ Live View ════════════════ -->
   <div class="view" id="view-live">
     <div class="live-panel active" id="livePanel">
       <div class="live-header">
@@ -370,67 +918,53 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
     </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>No tests running. Start a test from the Tests 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>
+</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 class="suite-modal-overlay" id="suiteModalOverlay">
+  <div class="suite-modal" id="suiteModal">
+    <div class="suite-modal-header">
+      <div class="suite-card-icon">&#9655;</div>
+      <div class="suite-modal-title">
+        <h2 id="suiteModalName"></h2>
+        <span id="suiteModalFile"></span>
+      </div>
+      <div class="suite-modal-actions">
+        <button class="btn sm primary" id="suiteModalRun">&#9655; Run</button>
+        <button class="suite-modal-close" id="suiteModalClose">&times;</button>
       </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 class="suite-modal-body" id="suiteModalBody">
+      <div class="suite-modal-loading">Loading...</div>
     </div>
   </div>
-
 </div>
-
 <div class="modal" id="modal"><img id="modalImg" src="" alt=""></div>
+<div class="toast-container" id="toastContainer"></div>
+<div class="kb-modal" id="kbModal">
+  <div class="kb-modal-content">
+    <h2>Keyboard Shortcuts</h2>
+    <div class="kb-row"><span class="kb-key">1</span><span class="kb-desc">Watch view</span></div>
+    <div class="kb-row"><span class="kb-key">2</span><span class="kb-desc">Tests view</span></div>
+    <div class="kb-row"><span class="kb-key">3</span><span class="kb-desc">Runs view</span></div>
+    <div class="kb-row"><span class="kb-key">4</span><span class="kb-desc">Live view</span></div>
+    <div class="kb-row"><span class="kb-key">j / k</span><span class="kb-desc">Navigate runs (next / previous)</span></div>
+    <div class="kb-row"><span class="kb-key">Enter</span><span class="kb-desc">Expand / collapse selected run</span></div>
+    <div class="kb-row"><span class="kb-key">Esc</span><span class="kb-desc">Close modal / collapse run</span></div>
+    <div class="kb-row"><span class="kb-key">r</span><span class="kb-desc">Refresh current view</span></div>
+    <div class="kb-row"><span class="kb-key">?</span><span class="kb-desc">Show this help</span></div>
+  </div>
+</div>
 
 <script>
 (function(){
 'use strict';
+/* ── utils.js ── */
+/* ── DOM Helpers ── */
 var $=function(s){return document.querySelector(s)};
 var $$=function(s){return document.querySelectorAll(s)};
 
@@ -450,53 +984,106 @@ 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 buildHeaderKV(h){
+  if(!h||typeof h!=='object') return el('div',{className:'rd-nd-empty'},'No data');
+  var table=el('div',{className:'rd-hdr-table'});
+  Object.keys(h).forEach(function(k){
+    var row=el('div',{className:'rd-hdr-row'});
+    row.appendChild(el('span',{className:'rd-hdr-key'},k));
+    row.appendChild(el('span',{className:'rd-hdr-val'},String(h[k])));
+    table.appendChild(row);
+  });
+  return table;
+}
+
+function makeCopyBtn(getTextFn){
+  var btn=el('span',{className:'copy-btn',onclick:function(e){
+    e.stopPropagation();
+    var text=typeof getTextFn==='function'?getTextFn():String(getTextFn);
+    navigator.clipboard.writeText(text).then(function(){
+      btn.textContent='\u2713 Copied';
+      btn.classList.add('copied');
+      setTimeout(function(){btn.textContent='\u2398 Copy';btn.classList.remove('copied')},1200);
+    });
+  }},'\u2398 Copy');
+  return btn;
+}
+
+function buildNdSection(title,contentEl,count,copyText){
+  var toggle=el('div',{className:'rd-nd-toggle'},[
+    el('span',{className:'nd-arrow'},'\u25B6'),
+    el('span',null,title),
+    count?el('span',{className:'nd-count'},count+' entries'):null,
+    makeCopyBtn(copyText||function(){return contentWrap.textContent})
+  ]);
+  var contentWrap=el('div',{className:'rd-nd-content'});
+  contentWrap.appendChild(contentEl);
+  toggle.addEventListener('click',function(e){
+    e.stopPropagation();
+    toggle.classList.toggle('open');
+  });
+  return el('div',{className:'rd-nd-section'},[toggle,contentWrap]);
+}
+
+function gqlOp(n){
+  if(n.requestBody){
+    try{
+      var b=JSON.parse(n.requestBody);
+      if(b.operationName)return b.operationName;
+      if(b.query){var m=b.query.match(/^(?:query|mutation|subscription)\s+([A-Za-z_]\w*)/);if(m)return m[1]}
+    }catch(e){}
+  }
+  if(n.url){
+    try{var u=new URL(n.url,location.href);var op=u.searchParams.get('operationName');if(op)return op}catch(e){}
+  }
+  return null;
+}
+
 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 mCls='rd-net-method '+(n.method||'GET').toLowerCase();
+  var sCode=n.status||0;
+  var sCls='rd-net-status '+(sCode<300?'s2xx':sCode<400?'s3xx':sCode<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 rowCls='rd-net-row'+(sCode>=400?' has-error':'');
+  var opName=gqlOp(n);
+  var children=[
+    el('span',{className:'rd-net-expand'},hasDetail?'\u25B6':''),
+    el('span',{className:mCls},n.method||'GET'),
+    el('span',{className:sCls},String(sCode))
+  ];
+  if(opName)children.push(el('span',{className:'rd-net-op'},opName));
+  children.push(el('span',{className:'rd-net-url'},n.url||''));
+  children.push(makeCopyBtn(n.url||''));
+  children.push(el('span',{className:'rd-net-dur'},dur(n.duration)));
+  var row=el('div',{className:rowCls},children);
   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);
+      var hCount=Object.keys(n.requestHeaders).length;
+      sections.push(buildNdSection('Request Headers',buildHeaderKV(n.requestHeaders),hCount,fmtHeaders(n.requestHeaders)));
     }
     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);
+      var rbText=prettyJson(n.requestBody);
+      sections.push(buildNdSection('Request Body',el('pre',null,rbText),null,rbText));
     }
     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);
+      var rhCount=Object.keys(n.responseHeaders).length;
+      sections.push(buildNdSection('Response Headers',buildHeaderKV(n.responseHeaders),rhCount,fmtHeaders(n.responseHeaders)));
     }
     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);
+      var respText=prettyJson(n.responseBody);
+      sections.push(buildNdSection('Response Body',el('pre',null,respText),null,respText));
     }
     detail=el('div',{className:'rd-net-detail'},sections);
     row.addEventListener('click',function(e){e.stopPropagation();row.classList.toggle('open')});
@@ -530,7 +1117,6 @@ function createHashBadge(hash){
   return badge;
 }
 
-/* ── Trigger source badge helper ── */
 function createTriggerBadge(source){
   var s=source||'unknown';
   var labels={dashboard:'Dashboard',mcp:'MCP',cli:'CLI',unknown:'--'};
@@ -542,35 +1128,367 @@ function createTriggerBadge(source){
   return badge;
 }
 
-/* ── State ── */
+/* ── Pool Distribution Summary ── */
+var POOL_COLORS=['#6366f1','#22d3ee','#f59e0b','#10b981','#ef4444','#8b5cf6','#ec4899','#14b8a6'];
+function buildPoolDistribution(tests){
+  var pools={};var total=0;
+  Object.keys(tests).forEach(function(n){
+    if(n==='__error')return;var t=tests[n];
+    if(!t.poolUrl)return;
+    var label=t.poolUrl.replace('ws://','').replace('wss://','');
+    if(!pools[label])pools[label]={count:0,passed:0,failed:0};
+    pools[label].count++;total++;
+    if(t.status==='passed'||t.success)pools[label].passed++;
+    if(t.status==='failed'||t.success===false)pools[label].failed++;
+  });
+  var keys=Object.keys(pools);
+  if(keys.length<2)return null;
+  var bar=el('div',{className:'pool-dist'});
+  var legend=el('div',{className:'pool-dist-legend'});
+  keys.forEach(function(k,i){
+    var pct=Math.round(pools[k].count/total*100);
+    var color=POOL_COLORS[i%POOL_COLORS.length];
+    var seg=el('div',{className:'pool-dist-seg'});
+    seg.style.flex=pools[k].count;seg.style.background=color;
+    seg.textContent=k+' ('+pools[k].count+')';
+    bar.appendChild(seg);
+    var lg=el('span',{},k+': '+pools[k].count+' tests ('+pct+'%)');
+    lg.style.cssText='display:inline-flex;align-items:center;gap:4px';
+    var dot=el('span',{});dot.style.cssText='width:8px;height:8px;border-radius:2px;background:'+color+';flex-shrink:0';
+    lg.insertBefore(dot,lg.firstChild);
+    legend.appendChild(lg);
+  });
+  return el('div',{style:'padding:4px 12px'},[bar,legend]);
+}
+
+
+/* ── state.js ── */
+/* ── Global State ── */
 var S={
-  ws:null,project:null,view:'suites',selectedRun:null,
-  liveRuns:{},liveExpanded:new Set(),liveSSOpen:new Set()
+  ws:null,project:null,view:'watch',selectedRun:null,
+  liveRuns:{},liveCollapsed:new Set(),liveSSOpen:new Set(),
+  runFilter:{status:'all',search:''},
+  lastLearningsData:null,
+  highlightedRunIdx:-1
 };
 
 /* ── 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');
+    showView(n.dataset.view);
   });
 });
 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');
+  var viewEl=$('#view-'+v);
+  if(viewEl)viewEl.classList.add('active');
+  if(v==='watch'&&typeof startWatchPolling==='function')startWatchPolling();
+  else if(typeof stopWatchPolling==='function')stopWatchPolling();
+  if(v==='instances'&&typeof refreshInstances==='function')refreshInstances();
 }
 
+/* ── Inner Tabs ── */
+function initTabs(){
+  $$('.tab-bar').forEach(function(bar){
+    var container=bar.parentElement;
+    bar.querySelectorAll('.tab-btn').forEach(function(btn){
+      btn.addEventListener('click',function(){
+        bar.querySelectorAll('.tab-btn').forEach(function(b){b.classList.remove('active')});
+        btn.classList.add('active');
+        container.querySelectorAll('.tab-pane').forEach(function(p){p.classList.remove('active')});
+        var pane=container.querySelector('#'+btn.dataset.tab);
+        if(pane)pane.classList.add('active');
+      });
+    });
+  });
+}
+
+
+/* ── toast.js ── */
+/* ── Toast Notifications ── */
+function showToast(message,type,timeout){
+  type=type||'info';
+  timeout=timeout||5000;
+  var container=$('#toastContainer');
+  var icons={success:'\u2714',error:'\u2718',info:'\u2139'};
+  var t=el('div',{className:'toast '+type},[
+    el('span',null,icons[type]||''),
+    el('span',null,message)
+  ]);
+  container.appendChild(t);
+  setTimeout(function(){
+    t.classList.add('fade-out');
+    setTimeout(function(){if(t.parentNode)t.parentNode.removeChild(t)},300);
+  },timeout);
+}
+
+function showEnrichedToast(message,type){
+  var container=$('#toastContainer');
+  var icons={success:'\u2714',error:'\u2718',info:'\u2139'};
+  var t=el('div',{className:'toast clickable '+type,onclick:function(){showView('runs');var lb=$('#runsTabLearnings');if(lb)lb.click()}},[
+    el('span',null,icons[type]||''),
+    el('span',null,message)
+  ]);
+  container.appendChild(t);
+  setTimeout(function(){
+    t.classList.add('fade-out');
+    setTimeout(function(){if(t.parentNode)t.parentNode.removeChild(t)},300);
+  },7000);
+}
+
+/* ── Download helper ── */
+function downloadFile(filename,content,mimeType){
+  var blob=new Blob([content],{type:mimeType||'text/plain'});
+  var url=URL.createObjectURL(blob);
+  var a=document.createElement('a');
+  a.href=url;a.download=filename;
+  document.body.appendChild(a);a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+
+/* ── api.js ── */
+/* ── API & Pool ── */
+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)});
+}
+
+function renderPool(d){
+  if(!d)return;
+  var poolList=$('#poolList');
+  if(d.pools&&d.pools.length>1){
+    var anyAvail=d.availableCount>0;
+    $('#poolDot').className='pool-dot '+(anyAvail?'on':'off');
+    $('#poolLabel').textContent=anyAvail?d.availableCount+'/'+d.totalPools+' ready':'all busy';
+    $('#poolSessions').textContent=(d.totalRunning||0)+'/'+(d.totalMaxConcurrent||0);
+    poolList.textContent='';poolList.style.display='';
+    d.pools.forEach(function(p){
+      var label=(p.url||'').replace('ws://','').replace('wss://','');
+      var ok=!p.error&&p.available;
+      var dot=el('span',{className:'pool-dot '+(ok?'on':'off')});
+      var name=el('strong',{},label);
+      var status=el('span',{},p.error?'offline':p.available?'ready':'busy');
+      var sess=el('span',{className:'pool-sessions'},(p.running||0)+'/'+(p.maxConcurrent||0));
+      poolList.appendChild(el('div',{className:'pool-item'},[dot,name,status,sess]));
+    });
+  }else if(d.pools&&d.pools.length===1){
+    var p=d.pools[0];
+    $('#poolDot').className='pool-dot '+(p.error||!p.available?'off':'on');
+    $('#poolLabel').textContent=p.error?'offline':p.available?'ready':'busy';
+    $('#poolSessions').textContent=(p.running||0)+'/'+(p.maxConcurrent||0);
+    poolList.style.display='none';
+  }else{
+    $('#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);
+    poolList.style.display='none';
+  }
+}
+function refreshStatus(){
+  api('/api/status').then(function(d){
+    renderPool(d.pool);
+    // Check if sync is enabled and update UI
+    if(d.config && d.config.sync){
+      renderSyncStatus(d.config.sync);
+    }
+  }).catch(function(){});
+}
+
+/* ── Sync ── */
+var syncMode = null;
+
+function renderSyncStatus(sync){
+  var status=$('#syncStatus');
+  var dot=$('#syncDot');
+  var mode=$('#syncMode');
+  var details=$('#syncDetails');
+  var instances=$('#syncInstances');
+  
+  if(!sync || sync.mode === 'standalone'){
+    status.style.display='none';
+    $('#navInstances').style.display='none';
+    syncMode = null;
+    return;
+  }
+  
+  status.style.display='block';
+  syncMode = sync.mode;
+  
+  mode.textContent = sync.mode;
+  mode.className = 'sync-mode ' + sync.mode;
+  
+  if(sync.mode === 'hub'){
+    dot.className = 'pool-dot on';
+    dot.style.background = 'var(--purple)';
+    details.textContent = 'Accepting agent connections';
+    $('#navInstances').style.display = 'flex';
+    refreshInstances();
+  } else if(sync.mode === 'agent'){
+    var hubUrl = sync.agent && sync.agent.hubUrl;
+    if(hubUrl){
+      dot.className = 'pool-dot on';
+      dot.style.background = 'var(--accent)';
+      details.innerHTML = 'Hub: <strong>' + hubUrl + '</strong>';
+    } else {
+      dot.className = 'pool-dot off';
+      details.textContent = 'Not connected';
+    }
+    $('#navInstances').style.display = 'none';
+  }
+}
+
+function refreshInstances(){
+  if(syncMode !== 'hub') return;
+  
+  api('/api/sync/instances').then(function(d){
+    var instances = d.instances || [];
+    var online = 0;
+    var active = 0;
+    var pending = 0;
+    var now = Date.now();
+    
+    instances.forEach(function(inst){
+      if(inst.status === 'active') active++;
+      if(inst.status === 'pending') pending++;
+      if(inst.lastSeen){
+        var lastSeen = new Date(inst.lastSeen + 'Z').getTime();
+        if(now - lastSeen < 5 * 60 * 1000) online++;
+      }
+    });
+    
+    $('#statInstancesTotal').textContent = instances.length;
+    $('#statInstancesOnline').textContent = online;
+    $('#statInstancesActive').textContent = active;
+    $('#statInstancesPending').textContent = pending;
+    $('#badgeInstances').textContent = online + '/' + instances.length;
+    
+    var tbody = $('#instancesBody');
+    tbody.innerHTML = '';
+    
+    if(instances.length === 0){
+      $('#instancesEmpty').style.display = 'block';
+      return;
+    }
+    $('#instancesEmpty').style.display = 'none';
+    
+    instances.forEach(function(inst){
+      var isOnline = inst.lastSeen && (now - new Date(inst.lastSeen + 'Z').getTime() < 5 * 60 * 1000);
+      var statusClass = inst.status === 'active' ? 'pass' : inst.status === 'pending' ? 'flaky' : 'fail';
+      
+      var tr = el('tr', null, [
+        el('td', null, [
+          el('span', {className: 'pool-dot ' + (isOnline ? 'on' : 'off'), style: 'margin-right:6px'}),
+          el('span', {className: 'badge ' + statusClass}, inst.status)
+        ]),
+        el('td', {style: 'font-family:var(--mono)'}, inst.instanceId),
+        el('td', null, inst.displayName),
+        el('td', null, inst.role),
+        el('td', null, inst.environment || '-'),
+        el('td', {style: 'color:var(--text3);font-size:11px'}, inst.lastSeen ? fdate(inst.lastSeen) : 'never'),
+        el('td', null, [
+          inst.status === 'pending' ? el('button', {className: 'btn sm', onclick: function(e){
+            e.stopPropagation();
+            approveInstance(inst.instanceId);
+          }}, 'Approve') : null,
+          inst.status === 'active' ? el('button', {className: 'btn sm danger', onclick: function(e){
+            e.stopPropagation();
+            revokeInstance(inst.instanceId);
+          }}, 'Suspend') : null
+        ])
+      ]);
+      tbody.appendChild(tr);
+    });
+    
+    // Update sync status sidebar with online instances
+    var syncInst = $('#syncInstances');
+    syncInst.innerHTML = '';
+    instances.slice(0, 5).forEach(function(inst){
+      var isOnline = inst.lastSeen && (now - new Date(inst.lastSeen + 'Z').getTime() < 5 * 60 * 1000);
+      var span = el('span', {className: 'sync-inst ' + (isOnline ? 'online' : 'offline')}, [
+        el('span', {className: 'pool-dot ' + (isOnline ? 'on' : 'off'), style: 'width:5px;height:5px'}),
+        document.createTextNode(inst.instanceId.slice(0, 12))
+      ]);
+      syncInst.appendChild(span);
+    });
+    if(instances.length > 5){
+      syncInst.appendChild(el('span', {style: 'font-size:9px;color:var(--text3)'}, '+' + (instances.length - 5) + ' more'));
+    }
+    
+  }).catch(function(err){
+    console.error('Failed to load instances:', err);
+  });
+}
+
+function approveInstance(instanceId){
+  api('/api/sync/instances/' + instanceId, {
+    method: 'PATCH',
+    body: JSON.stringify({status: 'active'})
+  }).then(function(){
+    showToast('Instance approved', 'success');
+    refreshInstances();
+  }).catch(function(err){
+    showToast('Failed to approve: ' + err.message, 'error');
+  });
+}
+
+function revokeInstance(instanceId){
+  api('/api/sync/instances/' + instanceId, {
+    method: 'PATCH',
+    body: JSON.stringify({status: 'suspended'})
+  }).then(function(){
+    showToast('Instance suspended', 'success');
+    refreshInstances();
+  }).catch(function(err){
+    showToast('Failed to suspend: ' + err.message, 'error');
+  });
+}
+
+$('#refreshInstances').addEventListener('click', refreshInstances);
+$('#instanceFilter').addEventListener('change', function(){
+  // For now just refresh - could add client-side filtering
+  refreshInstances();
+});
+
+/* ── 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();refreshLearnings();refreshWatch();
+});
+
+
+/* ── websocket.js ── */
 /* ── 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.onopen=function(){
+    $('#wsDot').style.background='var(--green)';$('#wsLabel').textContent='ws: connected';$('#wsLabel').style.color='var(--green)';
+    showToast('WebSocket connected','info');
+  };
+  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){}};
 }
@@ -583,22 +1501,16 @@ function getLiveRun(m){
 }
 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}
   }
@@ -609,148 +1521,704 @@ 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();
+      S.liveCollapsed=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:[]};
+      var r2=getLiveRun(m);if(!r2)break;
+      r2.active=m.activeCount;
+      r2.tests[m.name]={status:'running',actions:0,totalActions:0,error:null,actionLog:[],screenshots:[],serial:m.serial||false};
+      renderLive();break;
+    case 'test:pool':
+      var rp=getLiveRun(m);if(!rp||!rp.tests[m.name])break;
+      rp.tests[m.name].poolUrl=m.poolUrl||null;
+      rp.tests[m.name].actionLog.unshift({type:'pool',narrative:'\uD83D\uDD17 '+m.name+' \u2192 '+(m.poolUrl||'').replace('ws://','').replace('wss://',''),success:true,duration:null,isPoolLog:true});
       renderLive();break;
     case 'test:action':
-      var r=getLiveRun(m);if(!r||!r.tests[m.name])break;
-      var t=r.tests[m.name];
+      var r3=getLiveRun(m);if(!r3||!r3.tests[m.name])break;
+      var t=r3.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});
+      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,narrative:m.narrative||null,actionRetries:m.action.retries||0});
       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;
+      var r4=getLiveRun(m);if(!r4||!r4.tests[m.name])break;
+      r4.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;
+      var r5=getLiveRun(m);if(!r5)break;
+      r5.completed++;
+      if(m.success){r5.passed++;if(r5.tests[m.name])r5.tests[m.name].status='passed'}
+      else{r5.failed++;if(r5.tests[m.name]){r5.tests[m.name].status='failed';r5.tests[m.name].error=m.error}}
+      if(r5.tests[m.name]){
+        r5.tests[m.name].duration=m.duration;
+        if(m.screenshots&&m.screenshots.length)r5.tests[m.name].screenshots=m.screenshots;
+        if(m.errorScreenshot)r5.tests[m.name].errorScreenshot=m.errorScreenshot;
+        if(m.networkLogs&&m.networkLogs.length)r5.tests[m.name].networkLogs=m.networkLogs;
+        if(m.poolUrl)r5.tests[m.name].poolUrl=m.poolUrl;
       }
-      r.active=Math.max(0,r.active-1);
+      r5.active=Math.max(0,r5.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;
+      var r6=getLiveRun(m);if(r6){r6.on=false;r6.done=true;r6.active=0}
+      var summary=m.summary||{};
+      var baseMsg='Run complete: '+(summary.failed>0?summary.failed+' failed':'all '+(summary.total||0)+' passed');
+      var baseType=summary.failed>0?'error':'success';
+      var healthUrl=S.project?'/api/db/projects/'+S.project+'/health':'/api/db/health';
+      fetch(healthUrl).then(function(r){return r.json()}).then(function(h){
+        if(h&&h.passRate!==undefined){
+          var extra='. Pass rate: '+h.passRate+'%';
+          if(h.passRateTrend==='declining')extra+=' (declining, '+h.trendDelta+'%)';
+          else if(h.passRateTrend==='improving')extra+=' (improving, +'+h.trendDelta+'%)';
+          if(h.flakyCount>0)extra+='. '+h.flakyCount+' flaky test(s)';
+          showEnrichedToast(baseMsg+extra,baseType);
+        } else {
+          showToast(baseMsg,baseType);
+        }
+      }).catch(function(){showToast(baseMsg,baseType)});
+      renderLive();refreshRuns();refreshProjects();refreshWatch();break;
     case 'run:error':
-      var r=getLiveRun(m);if(r){r.on=false;r.done=true;r.tests.__error={status:'failed',error:m.error}}
+      var r7=getLiveRun(m);if(r7){r7.on=false;r7.done=true;r7.tests.__error={status:'failed',error:m.error}}
+      showToast('Run error: '+m.error,'error');
       renderLive();break;
     case 'db:updated':
-      refreshRuns();refreshProjects();refreshScreenshots();break;
+      refreshRuns();refreshProjects();refreshScreenshots();refreshLearnings();refreshWatch();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)});
+
+/* ── view-watch.js ── */
+/* ══════════════════════════════════════════════════════════════════
+   Watch View — Project Cards + Sparklines + Event Log
+   ══════════════════════════════════════════════════════════════════ */
+var _watchInterval=null;
+var _countdownInterval=null;
+var _watchData=null;
+
+function refreshWatch(){
+  // Fetch projects overview (sparklines)
+  api('/api/db/projects/overview').then(function(projects){
+    if(!Array.isArray(projects)||!projects.length){
+      $('#watchCards').textContent='';
+      $('#watchEmpty').style.display='block';
+      return;
+    }
+    $('#watchEmpty').style.display='none';
+    _watchData=projects;
+    renderWatchCards(projects);
+  }).catch(function(){
+    // Fallback: use regular projects list
+    api('/api/db/projects').then(function(projects){
+      if(!Array.isArray(projects)||!projects.length){$('#watchEmpty').style.display='block';return}
+      $('#watchEmpty').style.display='none';
+      _watchData=projects.map(function(p){return Object.assign({},p,{sparkline:[]})});
+      renderWatchCards(_watchData);
+    }).catch(function(){});
+  });
+
+  // Fetch event log (recent runs)
+  var runsUrl=S.project?'/api/db/projects/'+S.project+'/runs':'/api/db/runs';
+  api(runsUrl).then(function(runs){
+    renderEventLog(runs);
+  }).catch(function(){});
+
+  // Fetch watch jobs status for countdown
+  fetch('/api/watch/status').then(function(r){
+    if(!r.ok)throw new Error('not running');
+    return r.json();
+  }).then(function(jobs){
+    applyWatchJobData(jobs);
+  }).catch(function(){
+    // Watch engine not running — that's fine, cards still show
+  });
 }
 
-/* ── 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 renderWatchCards(projects){
+  var container=$('#watchCards');
+  container.textContent='';
+
+  projects.forEach(function(p){
+    var sparkline=p.sparkline||[];
+    var lastRate=sparkline.length?sparkline[sparkline.length-1]:null;
+    var rateColor=lastRate===null?'dim':lastRate>=90?'green':lastRate>=70?'amber':'red';
+    var dotColor=rateColor;
+
+    var sparkEl=el('div',{className:'watch-sparkline'});
+    if(sparkline.length>=2){
+      sparkEl.appendChild(buildSparkline(sparkline));
+    } else {
+      sparkEl.style.cssText='height:40px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:10px';
+      sparkEl.textContent=sparkline.length?'1 run':'No runs yet';
+    }
+
+    var triggerBtn=el('button',{className:'btn sm',onclick:function(e){e.stopPropagation();triggerRun(null,p.id)}},'\u25B6');
+    var detailBtn=el('button',{className:'btn sm',onclick:function(e){
+      e.stopPropagation();
+      S.project=p.id;$('#projectSelect').value=p.id;
+      showView('runs');
+      refreshRuns();refreshSuites();
+    }},'\uD83D\uDD0D');
+
+    var card=el('div',{className:'watch-card',id:'watch-card-'+p.id},[
+      el('div',{className:'watch-card-header'},[
+        el('div',{className:'watch-card-name'},p.name),
+        el('div',{className:'watch-card-icons'},[triggerBtn,detailBtn])
+      ]),
+      sparkEl,
+      el('div',{className:'watch-card-footer'},[
+        el('div',{className:'watch-card-status'},[
+          el('span',{className:'status-dot '+dotColor}),
+          el('span',{className:'watch-card-rate '+rateColor},lastRate!==null?lastRate+'%':'—')
+        ]),
+        el('span',{style:'color:var(--text3);font-size:10px'},p.runCount?p.runCount+' runs':'')
+      ]),
+      el('div',{className:'watch-card-meta'},[
+        el('span',{className:'watch-card-countdown',id:'watch-countdown-'+p.id},''),
+        p.lastCommit?el('span',{className:'watch-card-commit'},'\u{1F4CB} '+p.lastCommit.slice(0,8)):null
+      ])
+    ]);
+
+    container.appendChild(card);
+  });
 }
-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(){});
+function buildSparkline(data){
+  var ns='http://www.w3.org/2000/svg';
+  var svg=document.createElementNS(ns,'svg');
+  svg.setAttribute('viewBox','0 0 200 40');
+  svg.setAttribute('preserveAspectRatio','none');
+
+  var n=data.length;
+  var w=200/(n-1||1);
+  var pts=data.map(function(v,i){return (i*w)+','+(40-v*0.4)}).join(' ');
+
+  // Gradient fill
+  var poly=document.createElementNS(ns,'polygon');
+  poly.setAttribute('points','0,40 '+pts+' '+((n-1)*w)+',40');
+  poly.setAttribute('fill','var(--accent-dim)');
+  svg.appendChild(poly);
+
+  // Line
+  var pl=document.createElementNS(ns,'polyline');
+  pl.setAttribute('points',pts);
+  pl.setAttribute('fill','none');
+  pl.setAttribute('stroke','var(--accent)');
+  pl.setAttribute('stroke-width','1.5');
+  svg.appendChild(pl);
+
+  // End dot
+  if(n>0){
+    var lastVal=data[n-1];
+    var dotColor=lastVal>=90?'var(--green)':lastVal>=70?'var(--amber)':'var(--red)';
+    var circle=document.createElementNS(ns,'circle');
+    circle.setAttribute('cx',''+(n-1)*w);
+    circle.setAttribute('cy',''+(40-lastVal*0.4));
+    circle.setAttribute('r','3');
+    circle.setAttribute('fill',dotColor);
+    svg.appendChild(circle);
+  }
+
+  return svg;
 }
-$('#projectSelect').addEventListener('change',function(){
-  S.project=this.value?parseInt(this.value,10):null;
-  S.selectedRun=null;
-  refreshRuns();refreshSuites();refreshScreenshots();
-});
 
-/* ── Suites ── */
+function applyWatchJobData(jobs){
+  if(!jobs||!jobs.length)return;
+  jobs.forEach(function(j){
+    // Find matching card by project name
+    if(!_watchData)return;
+    var match=_watchData.find(function(p){return p.name===j.name||p.cwd===j.cwd});
+    if(!match)return;
+    var cdEl=$('#watch-countdown-'+match.id);
+    if(cdEl&&j.nextRunAt){
+      cdEl.dataset.nextRunAt=j.nextRunAt;
+      updateCountdown(cdEl);
+    }
+  });
+  startCountdownTimer();
+}
+
+function startCountdownTimer(){
+  if(_countdownInterval)return;
+  _countdownInterval=setInterval(function(){
+    $$('.watch-card-countdown[data-next-run-at]').forEach(updateCountdown);
+  },1000);
+}
+
+function updateCountdown(cdEl){
+  var next=cdEl.dataset.nextRunAt;
+  if(!next){cdEl.textContent='';return}
+  var diff=new Date(next)-Date.now();
+  if(diff<=0){cdEl.textContent='\u23F1 Running...';return}
+  var m=Math.floor(diff/60000);
+  var s=Math.floor((diff%60000)/1000);
+  cdEl.textContent='\u23F1 Next: '+m+'m '+String(s).padStart(2,'0')+'s';
+}
+
+function renderEventLog(runs){
+  var container=$('#watchEventLog');
+  if(!container)return;
+  container.textContent='';
+
+  if(!Array.isArray(runs)||!runs.length){
+    container.appendChild(el('div',{style:'padding:16px;text-align:center;color:var(--text3);font-size:11px'},'No runs recorded yet.'));
+    return;
+  }
+
+  // Column header row
+  container.appendChild(el('div',{className:'watch-event-row we-header'},[
+    el('span',null,'Time'),
+    el('span',null,'Project'),
+    el('span',null,'Suite'),
+    el('span',{style:'justify-self:center'},'Status'),
+    el('span',{style:'text-align:center'},'Tests'),
+    el('span',{style:'text-align:right'},'Rate'),
+    el('span',{style:'text-align:right'},'Duration'),
+    el('span',{style:'text-align:right'},'Source')
+  ]));
+
+  var recent=runs.slice(0,30);
+  recent.forEach(function(r){
+    var rate=parseFloat(r.pass_rate)||0;
+    var badgeCls=r.failed>0?'fail':'pass';
+    var badgeText=r.failed>0?'FAIL':'PASS';
+
+    // Test counts: "5/5" or "3/5 (2 fail)"
+    var countsText=r.passed+'/'+r.total;
+    var countsParts=[el('span',{className:'we-counts-ok'},String(r.passed))];
+    countsParts.push(document.createTextNode('/'+r.total));
+    if(r.failed>0){
+      countsParts.push(document.createTextNode(' ('));
+      countsParts.push(el('span',{style:'color:var(--red)'},r.failed+' fail'));
+      countsParts.push(document.createTextNode(')'));
+    }
+
+    // Trigger badge
+    var triggerIcon={'cli':'\u2318','dashboard':'\uD83D\uDCBB','mcp':'\u2699','watch':'\u23F1','api':'\u26A1'};
+    var trigSrc=r.triggered_by||'cli';
+    var trigEl=el('span',{className:'we-trigger',title:'Triggered by: '+trigSrc},(triggerIcon[trigSrc]||'\u2318')+' '+trigSrc);
+
+    var row=el('div',{className:'watch-event-row',style:'cursor:pointer'},[
+      el('span',{className:'watch-event-time'},fdate(r.generated_at)),
+      el('span',{className:'watch-event-project'},r.project_name||'—'),
+      el('span',{className:'watch-event-suite'},r.suite_name||'all'),
+      el('span',{className:'watch-event-result'},[el('span',{className:'badge '+badgeCls},badgeText)]),
+      el('span',{className:'watch-event-counts'},countsParts),
+      el('span',{className:'watch-event-rate'},rate>0?rate.toFixed(0)+'%':'—'),
+      el('span',{className:'watch-event-duration'},r.duration?dur(r.duration):'—'),
+      trigEl
+    ]);
+
+    // Click to navigate to run detail
+    (function(run){
+      row.addEventListener('click',function(){
+        S.project=run.project_id;$('#projectSelect').value=run.project_id;
+        showView('runs');
+        refreshRuns();
+      });
+    })(r);
+
+    container.appendChild(row);
+  });
+}
+
+function startWatchPolling(){
+  if(_watchInterval)return;
+  refreshWatch();
+  _watchInterval=setInterval(refreshWatch,10000);
+}
+function stopWatchPolling(){
+  if(_watchInterval){clearInterval(_watchInterval);_watchInterval=null}
+  if(_countdownInterval){clearInterval(_countdownInterval);_countdownInterval=null}
+}
+
+
+/* ── view-tests.js ── */
+/* ══════════════════════════════════════════════════════════════════
+   Tests View — Suites + Modules + Variables (inner tabs)
+   ══════════════════════════════════════════════════════════════════ */
 function refreshSuites(){
-  var grid=$('#suiteGrid'),empty=$('#suitesEmpty');
+  var grid=$('#suiteGrid'),empty=$('#suitesEmpty'),accordion=$('#suiteAccordionContainer');
   grid.textContent='';
+  var moduleSection=$('#moduleSection');
+  moduleSection.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';
+      $('#badgeSuites').textContent=suites.length;
       renderSuiteCards(grid,suites,S.project);
     }).catch(function(){});
+    api('/api/db/projects/'+S.project+'/modules').then(function(modules){
+      renderModules(moduleSection,modules);
+    }).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;
+      var loaded=0,hasAny=false,totalSuites=0;
       projects.forEach(function(p){
         api('/api/db/projects/'+p.id+'/suites').then(function(suites){
           loaded++;
           if(Array.isArray(suites)&&suites.length>0){
-            hasAny=true;
+            hasAny=true;totalSuites+=suites.length;
             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.'}
+          if(loaded===projects.length){
+            $('#badgeSuites').textContent=totalSuites;
+            if(!hasAny){empty.style.display='block';empty.querySelector('p').textContent='No test suites found.'}
+          }
         }).catch(function(){loaded++;});
       });
     }).catch(function(){});
   }
 }
+
+function renderProjectAccordion(container,project,suites){
+  var totalTests=suites.reduce(function(sum,s){return sum+(s.testCount||0)},0);
+  var body=el('div',{className:'project-accordion-body'});
+  var innerGrid=el('div',{className:'suite-grid'});
+  renderSuiteCards(innerGrid,suites,project.id);
+  body.appendChild(innerGrid);
+
+  var header=el('div',{className:'project-accordion-header'},[
+    el('span',{className:'project-accordion-chevron'},'\u25B6'),
+    el('span',{className:'project-accordion-name'},project.name),
+    el('div',{className:'project-accordion-meta'},[
+      el('span',{className:'project-accordion-badge'},suites.length+(suites.length===1?' suite':' suites')),
+      el('span',{className:'project-accordion-badge'},totalTests+(totalTests===1?' test':' tests'))
+    ])
+  ]);
+
+  var wrapper=el('div',{className:'project-accordion'},[header,body]);
+  header.addEventListener('click',function(){wrapper.classList.toggle('open')});
+  container.appendChild(wrapper);
+}
+
+/* ── Suite Modal ── */
+var _suiteCache={};
+
+function openSuiteModal(suiteName,projectId){
+  var overlay=$('#suiteModalOverlay');
+  var body=$('#suiteModalBody');
+  $('#suiteModalName').textContent=suiteName;
+  $('#suiteModalFile').textContent=suiteName+'.json';
+  body.textContent='';
+  body.appendChild(el('div',{className:'suite-modal-loading'},'Loading\u2026'));
+  overlay.classList.add('open');
+
+  $('#suiteModalRun').onclick=function(){triggerRun(suiteName,projectId)};
+  $('#suiteModalClose').onclick=function(){overlay.classList.remove('open')};
+  overlay.addEventListener('click',function(e){if(e.target===overlay)overlay.classList.remove('open')});
+
+  var cacheKey=projectId+'::'+suiteName;
+  var p=_suiteCache[cacheKey]||api('/api/db/projects/'+projectId+'/suites/'+encodeURIComponent(suiteName));
+  _suiteCache[cacheKey]=p;
+  p.then(function(data){
+    body.textContent='';
+    if(!data||!data.tests||!data.tests.length){
+      body.appendChild(el('div',{className:'suite-modal-loading'},'No tests found'));
+      return;
+    }
+    data.tests.forEach(function(test){
+      var actionsDiv=el('div',{className:'suite-modal-test-actions'});
+      (test.actions||[]).forEach(function(a,i){
+        var detailContent;
+        if(a.selector&&(a.value||a.text)){
+          detailContent=[el('span',{className:'step-sel'},a.selector),el('span',{className:'step-arrow'},'\u2192'),el('span',{className:'step-val'},a.text||a.value)];
+        } else {
+          detailContent=a.selector||a.value||a.text||'';
+        }
+        actionsDiv.appendChild(el('div',{className:'suite-modal-step'},[
+          el('span',{className:'suite-modal-step-num'},String(i+1)),
+          el('span',{className:'suite-modal-step-type'},a.type),
+          el('span',{className:'suite-modal-step-detail'},detailContent)
+        ]));
+      });
+
+      var header=el('div',{className:'suite-modal-test-header'},[
+        el('span',{className:'suite-modal-test-chevron'},'\u25B6'),
+        el('span',{className:'suite-modal-test-name'},test.name),
+        el('span',{className:'suite-modal-test-badge'},(test.actions||[]).length+' actions')
+      ]);
+
+      var testEl=el('div',{className:'suite-modal-test'},[header,actionsDiv]);
+      if(test.expect){
+        var expectText=Array.isArray(test.expect)?test.expect.join(', '):test.expect;
+        var expectEl=el('div',{className:'suite-modal-expect'},[
+          el('span',{className:'suite-modal-expect-label'},'Expect:'),
+          document.createTextNode(expectText)
+        ]);
+        testEl.insertBefore(expectEl,actionsDiv);
+      }
+      header.addEventListener('click',function(){testEl.classList.toggle('open')});
+      body.appendChild(testEl);
+    });
+  }).catch(function(){
+    body.textContent='';
+    body.appendChild(el('div',{className:'suite-modal-loading',style:'color:var(--red)'},'Failed to load suite'));
+  });
+}
+
 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'},[
+    (s.tests||[]).forEach(function(t){
+      var li=el('li',null,t);
+      li.addEventListener('click',function(e){
+        e.stopPropagation();
+        var existing=li.querySelector('.suite-test-steps');
+        if(existing){existing.remove();li.classList.remove('expanded');return}
+        tests.querySelectorAll('.suite-test-steps').forEach(function(d){d.remove()});
+        tests.querySelectorAll('li.expanded').forEach(function(l){l.classList.remove('expanded')});
+        var stepsDiv=el('div',{className:'suite-test-steps'});
+        stepsDiv.appendChild(el('div',{style:'color:var(--text3);font-size:10px'},'Loading...'));
+        li.appendChild(stepsDiv);
+        li.classList.add('expanded');
+        var cacheKey=pid+'::'+s.name;
+        var p=_suiteCache[cacheKey]||api('/api/db/projects/'+pid+'/suites/'+encodeURIComponent(s.name));
+        _suiteCache[cacheKey]=p;
+        p.then(function(data){
+          stepsDiv.textContent='';
+          var test=(data.tests||[]).find(function(x){return x.name===t});
+          if(!test||!test.actions||!test.actions.length){
+            stepsDiv.appendChild(el('div',{style:'color:var(--text3);font-size:10px'},'No actions'));
+            return;
+          }
+          if(test.serial){
+            var sb=el('span',{className:'serial-badge'},'Serial');
+            li.insertBefore(sb,li.querySelector('.suite-test-steps'));
+          }
+          test.actions.forEach(function(a,i){
+            var detail=a.selector||a.value||a.text||'';
+            if(a.selector&&(a.value||a.text))detail=a.selector+' \u2192 '+(a.text||a.value);
+            stepsDiv.appendChild(el('div',{className:'lt-step'},[
+              el('span',{className:'step-icon',style:'color:var(--text3)'},String(i+1)),
+              el('span',{className:'step-type'},a.type),
+              el('span',{className:'step-detail'},detail)
+            ]));
+          });
+        }).catch(function(){
+          stepsDiv.textContent='';
+          stepsDiv.appendChild(el('div',{style:'color:var(--red);font-size:10px'},'Failed to load'));
+        });
+      });
+      tests.appendChild(li);
+    });
+
+    var cardHead=el('div',{className:'suite-card-head',style:'cursor:pointer'},[
+      el('div',{className:'suite-card-icon'},'\u25B6'),
+      el('div',{className:'suite-card-info'},[
         el('div',{className:'suite-card-name'},s.name),
-        el('span',{className:'suite-card-count'},s.testCount+' tests')
+        el('div',{className:'suite-card-file'},s.file||s.name+'.json')
       ]),
-      tests,
-      el('button',{className:'btn sm primary',onclick:function(){triggerRun(s.name,pid)}},'Run Suite')
+      el('div',{className:'suite-card-count'},[
+        el('div',{className:'suite-card-count-num'},String(s.testCount||0)),
+        el('div',{className:'suite-card-count-lbl'},'tests')
+      ])
+    ]);
+    (function(name,projId){
+      cardHead.addEventListener('click',function(){openSuiteModal(name,projId)});
+    })(s.name,pid);
+
+    var card=el('div',{className:'suite-card'},[
+      cardHead,
+      el('div',{className:'suite-card-body'},[tests]),
+      el('div',{className:'suite-card-footer'},[
+        el('button',{className:'btn sm primary',onclick:function(){triggerRun(s.name,pid)}},'Run Suite')
+      ])
     ]);
     container.appendChild(card);
   });
 }
 
-/* ── Runs ── */
+function renderModules(container,modules){
+  if(!Array.isArray(modules)||modules.length===0)return;
+  var title=el('div',{className:'module-section-title'},[
+    el('span',{className:'mod-icon'},'\u{1F9E9}'),
+    document.createTextNode(' Reusable Modules ('+modules.length+')')
+  ]);
+  container.appendChild(title);
+  var grid=el('div',{className:'module-grid'});
+  modules.forEach(function(m){
+    var paramsEl=null;
+    if(m.params&&m.params.length){
+      var items=m.params.map(function(p){return el('li',null,typeof p==='string'?p:(p.name||String(p)))});
+      paramsEl=el('ul',{className:'module-card-params'},items);
+    }
+    var card=el('div',{className:'module-card'},[
+      el('div',{className:'module-card-name'},m.name),
+      m.description?el('div',{className:'module-card-desc'},m.description):null,
+      el('div',{className:'module-card-meta'},[
+        el('span',null,m.actionCount+' actions'),
+        m.params&&m.params.length?el('span',null,m.params.length+' params'):null
+      ]),
+      paramsEl
+    ]);
+    grid.appendChild(card);
+  });
+  container.appendChild(grid);
+}
+
+/* ── Variables ── */
+function refreshVariables(){
+  var container=$('#variablesContainer'),empty=$('#variablesEmpty');
+  container.textContent='';
+  if(!S.project){empty.style.display='block';empty.querySelector('p').textContent='Select a project to manage variables.';return}
+  api('/api/db/projects/'+S.project+'/variables').then(function(vars){
+    if(!Array.isArray(vars)||!vars.length){empty.style.display='block';empty.querySelector('p').textContent='No variables set. Add variables to use {{var.KEY}} in your tests.';return}
+    empty.style.display='none';
+    renderVariables(vars);
+  }).catch(function(){empty.style.display='block'});
+}
+
+function renderVariables(vars){
+  var container=$('#variablesContainer');
+  var tbl=el('table',{className:'var-table'});
+  var thead=document.createElement('thead');
+  var hr=document.createElement('tr');
+  ['Key','Value','Scope','Actions'].forEach(function(h){hr.appendChild(el('th',null,h))});
+  thead.appendChild(hr);tbl.appendChild(thead);
+  var tbody=document.createElement('tbody');
+  vars.forEach(function(v){
+    var tr=document.createElement('tr');
+    tr.appendChild(el('td',null,[el('code',null,v.key)]));
+    tr.appendChild(el('td',{style:'max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'},v.is_secret?'\u2022\u2022\u2022\u2022\u2022\u2022':v.value));
+    tr.appendChild(el('td',{style:'color:var(--text3)'},v.scope||'project'));
+    var delBtn=el('button',{className:'btn sm danger',onclick:function(){
+      if(!confirm('Delete variable "'+v.key+'"?'))return;
+      fetch('/api/db/projects/'+S.project+'/variables/'+encodeURIComponent(v.key),{method:'DELETE'}).then(function(){refreshVariables();showToast('Variable deleted','success')}).catch(function(){showToast('Delete failed','error')});
+    }},'\u2715');
+    tr.appendChild(el('td',null,[delBtn]));
+    tbody.appendChild(tr);
+  });
+  tbl.appendChild(tbody);
+  container.appendChild(tbl);
+}
+
+/* ── Variable Add Form ── */
+$('#btnAddVar').addEventListener('click',function(){
+  var form=$('#varAddForm');
+  if(form.style.display==='none'){
+    form.style.display='';
+    form.textContent='';
+    var keyInput=el('input',{type:'text',placeholder:'KEY',style:'margin-right:8px;width:120px'});
+    var valInput=el('input',{type:'text',placeholder:'Value',style:'margin-right:8px;width:200px'});
+    var secretCheck=el('input',{type:'checkbox',style:'margin-right:4px'});
+    var saveBtn=el('button',{className:'btn sm primary',onclick:function(){
+      var k=keyInput.value.trim(),v=valInput.value;
+      if(!k){showToast('Key is required','error');return}
+      if(!S.project){showToast('Select a project first','error');return}
+      fetch('/api/db/projects/'+S.project+'/variables',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({key:k,value:v,is_secret:secretCheck.checked})}).then(function(r){return r.json()}).then(function(){
+        form.style.display='none';refreshVariables();showToast('Variable saved','success');
+      }).catch(function(){showToast('Save failed','error')});
+    }},'Save');
+    var cancelBtn=el('button',{className:'btn sm',onclick:function(){form.style.display='none'}},'Cancel');
+    form.appendChild(el('div',{className:'var-add-form',style:'display:flex;align-items:center;gap:8px;flex-wrap:wrap'},[
+      keyInput,valInput,
+      el('label',{style:'font-size:11px;color:var(--text2);display:flex;align-items:center;gap:4px'},[secretCheck,document.createTextNode('Secret')]),
+      saveBtn,cancelBtn
+    ]));
+  } else {
+    form.style.display='none';
+  }
+});
+
+$('#btnRunAll').addEventListener('click',function(){triggerRun()});
+
+
+/* ── view-runs.js ── */
+/* ══════════════════════════════════════════════════════════════════
+   Runs View — History + Screenshots + Learnings (inner tabs)
+   ══════════════════════════════════════════════════════════════════ */
+
+/* ── Filters ── */
+$$('.filter-btn').forEach(function(btn){
+  btn.addEventListener('click',function(){
+    $$('.filter-btn').forEach(function(b){b.classList.remove('active')});
+    btn.classList.add('active');
+    S.runFilter.status=btn.dataset.filter;
+    applyRunFilters();
+  });
+});
+$('#runSearchInput').addEventListener('input',function(){
+  S.runFilter.search=this.value.trim().toLowerCase();
+  applyRunFilters();
+});
+
+var _allRunRows=[];
+function applyRunFilters(){
+  _allRunRows.forEach(function(item){
+    var show=true;
+    var r=item.data;
+    if(S.runFilter.status!=='all'){
+      var total=r.total||0;var passed=r.passed||0;var failed=r.failed||0;
+      if(S.runFilter.status==='pass'&&(failed>0||total===0))show=false;
+      if(S.runFilter.status==='fail'&&failed===0)show=false;
+      if(S.runFilter.status==='mixed'&&(failed===0||passed===0))show=false;
+    }
+    if(show&&S.runFilter.search){
+      var suite=(r.suite_name||'all').toLowerCase();
+      var proj=(r.project_name||'').toLowerCase();
+      if(suite.indexOf(S.runFilter.search)===-1&&proj.indexOf(S.runFilter.search)===-1)show=false;
+    }
+    item.tr.style.display=show?'':'none';
+    if(item.detailTr)item.detailTr.style.display=show?'':'none';
+  });
+}
+
+function renderRunsHealthBanner(){
+  var banner=$('#runsHealthBanner');
+  banner.textContent='';
+  var url=S.project?'/api/db/projects/'+S.project+'/health':'/api/db/health';
+  fetch(url).then(function(r){return r.json()}).then(function(h){
+    if(!h||!h.passRate)return;
+    var rateColor=h.passRate>=90?'green':h.passRate>=70?'amber':'red';
+    var trendIcon=h.passRateTrend==='improving'?'\u25B2':h.passRateTrend==='declining'?'\u25BC':'=';
+    var trendCls=h.passRateTrend==='improving'?'green':h.passRateTrend==='declining'?'red':'dim';
+    var deltaStr=h.trendDelta!==0?(h.trendDelta>0?'+':'')+h.trendDelta+'%':'';
+
+    banner.appendChild(el('div',{className:'hb-item'},[
+      el('div',{className:'hb-val '+rateColor},h.passRate+'%'),
+      el('div',{className:'hb-lbl'},'Pass Rate'),
+      el('div',{className:'hb-trend '+trendCls},trendIcon+' '+h.passRateTrend+(deltaStr?' ('+deltaStr+')':''))
+    ]));
+    if(h.flakyCount>0){
+      banner.appendChild(el('div',{className:'hb-item'},[
+        el('div',{className:'hb-val amber'},String(h.flakyCount)),
+        el('div',{className:'hb-lbl'},'Flaky Tests')
+      ]));
+    }
+    if(h.topErrorPattern){
+      var cat=h.topErrorPattern.category||h.topErrorPattern.pattern||'unknown';
+      var pat=cat.replace(/-/g,' ').replace(/\b\w/g,function(c){return c.toUpperCase()});
+      banner.appendChild(el('div',{className:'hb-item'},[
+        el('div',{className:'hb-val red',style:'font-size:13px'},pat),
+        el('div',{className:'hb-lbl'},'Top Error ('+h.topErrorPattern.count+'x)')
+      ]));
+    }
+    banner.appendChild(el('div',{className:'hb-link',onclick:function(){var lb=$('#runsTabLearnings');if(lb)lb.click()}},[
+      el('span',null,'\u2192 View Learnings')
+    ]));
+  }).catch(function(){});
+}
+
 function refreshRuns(){
+  renderRunsHealthBanner();
   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}
+    _allRunRows=[];
+    S.highlightedRunIdx=-1;
+    if(!Array.isArray(rows)||rows.length===0){empty.style.display='block';head.parentNode.parentNode.style.display='none';$('#badgeRuns').textContent='0';return}
     empty.style.display='none';head.parentNode.parentNode.style.display='';
+    $('#badgeRuns').textContent=rows.length;
 
-    // Thead
     var htr=document.createElement('tr');
     var cols=[];
     if(!S.project)cols.push('Project');
@@ -759,7 +2227,6 @@ function refreshRuns(){
     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)';
@@ -768,7 +2235,6 @@ function refreshRuns(){
       chart.appendChild(bar);
     });
 
-    // Rows
     rows.forEach(function(r){
       var tr=document.createElement('tr');
       tr.dataset.runId=r.id;
@@ -786,12 +2252,14 @@ function refreshRuns(){
       tr.addEventListener('click',function(){toggleDetail(r.id,tr,colSpan)});
       body.appendChild(tr);
 
-      // If this run was already expanded, re-expand it
+      var item={tr:tr,data:r,detailTr:null};
       if(r.id===S.selectedRun){
         var detailTr=createDetailRow(colSpan);
         body.appendChild(detailTr);
         loadDetailInline(r.id,detailTr);
+        item.detailTr=detailTr;
       }
+      _allRunRows.push(item);
     });
   }).catch(function(){});
 }
@@ -802,8 +2270,12 @@ function createDetailRow(colSpan){
   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>';
+  var inner=el('div',{className:'rd-inner'},[
+    el('div',{style:'color:var(--text3);font-size:11px'},[
+      el('span',{className:'spinner-small'}),
+      document.createTextNode(' Loading...')
+    ])
+  ]);
   wrap.appendChild(inner);
   td.appendChild(wrap);
   detailTr.appendChild(td);
@@ -811,7 +2283,6 @@ function createDetailRow(colSpan){
 }
 
 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')){
@@ -824,7 +2295,6 @@ function toggleDetail(id,clickedTr,colSpan){
     return;
   }
 
-  // Collapse any other open detail
   var prevTr=document.querySelector('#runsBody tr.expanded');
   if(prevTr){
     prevTr.classList.remove('expanded');
@@ -836,83 +2306,142 @@ function toggleDetail(id,clickedTr,colSpan){
     }
   }
 
-  // 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);
 }
 
+/* ── Run Detail ── */
 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 exportBtn=el('div',null,[
+      el('div',{className:'rd-s-label'},'Export'),
+      el('div',{style:'margin-top:4px'},[
+        el('button',{className:'btn sm',onclick:function(e){
+          e.stopPropagation();
+          downloadFile('run-'+id+'.json',JSON.stringify(d,null,2),'application/json');
+        }},'JSON')
+      ])
+    ]);
     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')]),
+      el('div',null,[el('div',{className:'rd-s-label'},'Suite'),el('div',{className:'rd-s-val',style:'font-size:14px;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||'-')])
+      el('div',null,[el('div',{className:'rd-s-label'},'Failed'),el('div',{className:'rd-s-val',style:'color:'+(d.summary.failed>0?'var(--red)':'var(--text3)')},String(d.summary.failed))]),
+      el('div',null,[el('div',{className:'rd-s-label'},'Duration'),el('div',{className:'rd-s-val',style:'font-size:14px;color:var(--text2)'},d.summary.duration||'-')]),
+      exportBtn
     ]);
     inner.appendChild(summ);
 
-    // Test result cards
+    // Insights
+    var insightsContainer=el('div',{className:'rd-insights'});
+    inner.appendChild(insightsContainer);
+    fetch('/api/db/runs/'+id+'/insights').then(function(r){return r.json()}).then(function(ins){
+      if(!ins||ins.error)return;
+      var items=[];
+      var h=ins.health;
+      if(h){
+        var rateColor=h.passRate>=90?'green':h.passRate>=70?'amber':'red';
+        var trendIcon=h.passRateTrend==='improving'?'\u25B2':h.passRateTrend==='declining'?'\u25BC':'=';
+        var trendCls=h.passRateTrend==='improving'?'green':h.passRateTrend==='declining'?'red':'';
+        items.push(el('div',{className:'rd-ins-health'},[
+          el('span',{className:'rd-ins-rate '+rateColor},h.passRate+'%'),
+          el('span',{className:'rd-ins-trend '+trendCls},trendIcon+' '+h.passRateTrend),
+          h.flakyCount>0?el('span',{className:'rd-ins-tag amber'},h.flakyCount+' flaky'):null,
+          h.unstableSelectorCount>0?el('span',{className:'rd-ins-tag red'},h.unstableSelectorCount+' unstable sel.'):null
+        ]));
+      }
+      var insights=ins.insights||[];
+      insights.forEach(function(i){
+        var icon=i.type==='new-failure'?'\u2718':i.type==='recovered'?'\u2714':i.type==='flaky'?'\u223C':'!';
+        var cls=i.type==='new-failure'?'red':i.type==='recovered'?'green':i.type==='flaky'?'amber':'';
+        items.push(el('div',{className:'rd-ins-item '+cls},[
+          el('span',{className:'rd-ins-icon'},icon),
+          el('span',null,i.message)
+        ]));
+      });
+      if(items.length>0){items.forEach(function(it){insightsContainer.appendChild(it)})}
+      else{insightsContainer.style.display='none'}
+    }).catch(function(){insightsContainer.style.display='none'});
+
+    // Pool distribution bar
+    var histPoolTests={};
+    results.forEach(function(r){if(!r.poolUrl)return;histPoolTests[r.name]={poolUrl:r.poolUrl,success:r.success}});
+    var histPoolDist=buildPoolDistribution(histPoolTests);
+    if(histPoolDist)inner.appendChild(histPoolDist);
+
     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;
+      var state=flaky?'flaky':(r.success?'pass':'fail');
 
-      // 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 poolEl=r.poolUrl?el('span',{className:'pool-badge'},r.poolUrl.replace('ws://','').replace('wss://',''))  :null;
+      var head=el('div',{className:'rd-test-head'},[badges,el('div',{className:'rd-test-name'},[document.createTextNode(r.name),poolEl]),el('div',{className:'rd-test-dur'},d2)]);
       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));
+      if(r.maxAttempts>1){body.appendChild(el('div',{className:'rd-retries'},'Attempt '+r.attempt+' of '+r.maxAttempts))}
+      if(r.error){
+        var errDiv=el('div',{className:'rd-error-msg'});
+        errDiv.appendChild(document.createTextNode(r.error));
+        errDiv.appendChild(makeCopyBtn(r.error));
+        body.appendChild(errDiv);
       }
 
-      // Error message
-      if(r.error){
-        body.appendChild(el('div',{className:'rd-error-msg'},r.error));
+      // Actions panel
+      if(r.actions&&r.actions.length){
+        var passCount=r.actions.filter(function(a){return a.success}).length;
+        var failCount=r.actions.length-passCount;
+        var actHead=el('div',{className:'rd-net-head'},[
+          el('span',{className:'net-arrow'},'\u25B6'),
+          el('span',{className:'net-title'},'Actions'),
+          el('div',{className:'net-stats'},[
+            el('span',{className:'net-stat'},[document.createTextNode('Steps: '),el('strong',null,String(r.actions.length))]),
+            failCount?el('span',{className:'net-stat has-err'},[document.createTextNode('Failed: '),el('strong',null,String(failCount))]):null
+          ])
+        ]);
+        var actBody=el('div',{className:'rd-net-body',style:'padding:8px 14px'});
+        r.actions.forEach(function(a){
+          var label=a.narrative||a.type;
+          var durText=a.duration!=null?dur(a.duration):'';
+          var retryBadge=null;
+          if(a.actionRetries&&a.actionRetries>0){
+            retryBadge=el('span',{className:'badge flaky',style:'font-size:9px;padding:1px 5px'},'\u21BB x'+a.actionRetries);
+          }
+          actBody.appendChild(el('div',{className:'lt-step'},[
+            el('span',{className:'step-icon '+(a.success?'ok':'fail')},a.success?'\u2714':'\u2718'),
+            el('span',{className:'step-detail',style:'flex:1'},label),
+            retryBadge,
+            el('span',{className:'step-dur'},durText)
+          ]));
+        });
+        actHead.addEventListener('click',function(){actHead.classList.toggle('open')});
+        body.appendChild(el('div',{className:'rd-net-panel'},[actHead,actBody]));
       }
 
-      // Screenshots per test
+      // Screenshots
       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});
-      }
+      (r.screenshots||[]).forEach(function(p){shots.push({path:p,label:p.split('/').pop(),type:'screenshot',hash:hashes[p]||null})});
+      if(r.errorScreenshot){shots.push({path:r.errorScreenshot,label:r.errorScreenshot.split('/').pop(),type:'error',hash:hashes[r.errorScreenshot]||null})}
       if(shots.length){
         var shotsWrap=el('div',{className:'rd-shots'});
         shots.forEach(function(s){
@@ -921,66 +2450,69 @@ function loadDetailInline(id,detailTr){
           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);
+          shotsWrap.appendChild(el('div',{className:'rd-shot'+(s.type==='error'?' err-shot':''),onclick:function(e){e.stopPropagation();openModal(src)}},[img,capEl]));
         });
         body.appendChild(shotsWrap);
       }
 
-      // Console logs (errors and warnings only)
+      // Console logs
       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);
+        var cErrors=cIssues.filter(function(l){return l.type==='error'}).length;
+        var cWarns=cIssues.length-cErrors;
+        var conHead=el('div',{className:'rd-net-head'},[
+          el('span',{className:'net-arrow'},'\u25B6'),
+          el('span',{className:'net-title'},'Console'),
+          el('div',{className:'net-stats'},[
+            cErrors?el('span',{className:'net-stat has-err'},[document.createTextNode('Errors: '),el('strong',null,String(cErrors))]):null,
+            cWarns?el('span',{className:'net-stat'},[document.createTextNode('Warnings: '),el('strong',null,String(cWarns))]):null
+          ]),
+          makeCopyBtn(function(){return cIssues.map(function(l){return '['+l.type+'] '+l.text}).join('\n')})
+        ]);
+        var conBody=el('div',{className:'rd-net-body'});
+        cIssues.forEach(function(l){conBody.appendChild(el('div',{className:'rd-log-item '+l.type},'['+l.type+'] '+l.text))});
+        conHead.addEventListener('click',function(){conHead.classList.toggle('open')});
+        body.appendChild(el('div',{className:'rd-net-panel'},[conHead,conBody]));
       }
 
       // 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);
+        var neHead=el('div',{className:'rd-net-head'},[
+          el('span',{className:'net-arrow'},'\u25B6'),
+          el('span',{className:'net-title'},'Network Errors'),
+          el('div',{className:'net-stats'},[el('span',{className:'net-stat has-err'},[document.createTextNode('Errors: '),el('strong',null,String(r.networkErrors.length))])]),
+          makeCopyBtn(function(){return r.networkErrors.map(function(ne){return '['+ne.error+'] '+ne.url}).join('\n')})
+        ]);
+        var neBody=el('div',{className:'rd-net-body'});
+        r.networkErrors.forEach(function(ne){neBody.appendChild(el('div',{className:'rd-log-item error'},'['+ne.error+'] '+ne.url))});
+        neHead.addEventListener('click',function(){neHead.classList.toggle('open')});
+        body.appendChild(el('div',{className:'rd-net-panel'},[neHead,neBody]));
       }
 
-      // Network API logs (collapsible, clickable rows)
+      // Network panel
       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'},[
+        var netHead=el('div',{className:'rd-net-head'},[
           el('span',{className:'net-arrow'},'\u25B6'),
-          el('span',{},netLabel)
+          el('span',{className:'net-title'},'Network Requests'),
+          el('div',{className:'net-stats'},[
+            el('span',{className:'net-stat'},[document.createTextNode('Total: '),el('strong',null,String(r.networkLogs.length))]),
+            errCount?el('span',{className:'net-stat has-err'},[document.createTextNode('Errors: '),el('strong',null,String(errCount))]):null
+          ])
         ]);
-        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 netCols=el('div',{className:'rd-net-cols'},[el('span',{className:'col-e'},''),el('span',{className:'col-m'},'Method'),el('span',{className:'col-s'},'Status'),el('span',{className:'col-u'},'URL'),el('span',{className:'col-d'},'Time')]);
+        var netBody=el('div',{className:'rd-net-body'},[netCols]);
+        r.networkLogs.forEach(function(n){var built=buildNetRow(n);netBody.appendChild(built.row);if(built.detail)netBody.appendChild(built.detail)});
+        netHead.addEventListener('click',function(){netHead.classList.toggle('open')});
+        body.appendChild(el('div',{className:'rd-net-panel'},[netHead,netBody]));
       }
 
-      var testCard=el('div',{className:'rd-test'},[head,body]);
-      inner.appendChild(testCard);
+      inner.appendChild(el('div',{className:'rd-test '+state},[head,body]));
     });
 
-    // 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){
+    if(w&&!w.classList.contains('open')){requestAnimationFrame(function(){w.classList.add('open')})}
+  }).catch(function(){
     var inner=detailTr.querySelector('.rd-inner');
     if(inner)inner.textContent='Failed to load run detail';
   });
@@ -990,25 +2522,21 @@ function loadDetailInline(id,detailTr){
 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}
+  if(!S.project){empty.style.display='block';empty.querySelector('p').textContent='Select a project to view screenshots.';$('#badgeScreenshots').textContent='-';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}
+    if(!Array.isArray(files)||!files.length){empty.style.display='block';empty.querySelector('p').textContent='No screenshots for this project.';$('#badgeScreenshots').textContent='0';return}
     empty.style.display='none';
+    $('#badgeScreenshots').textContent=files.length;
     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);
+      (function(c,fp){ssHash(fp).then(function(h){c.appendChild(createHashBadge(h))})})(capEl,f.path);
+      gal.appendChild(el('div',{className:'gallery-item',onclick:function(){openModal(src)}},[img,capEl]));
     });
   }).catch(function(){});
 }
 
-/* ── Screenshot Hash Search ── */
 function searchByHash(){
   var container=$('#ssSearchResult');
   container.textContent='';
@@ -1020,67 +2548,182 @@ function searchByHash(){
     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;
-    }
+    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;
+    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.'));
-  });
+  }).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();
+/* ── Learnings ── */
+function refreshLearnings(){
+  var days=$('#learningsDays').value||30;
+  var url=S.project?'/api/db/projects/'+S.project+'/learnings?days='+days:'/api/db/learnings?days='+days;
+  fetch(url).then(function(r){return r.json()}).then(function(data){
+    if(!data||data.totalRuns===0){
+      $('#learningsEmpty').style.display='block';
+      $('#learningsOverview').textContent='';$('#learningsTrend').textContent='';
+      $('#learningsFlaky').textContent='';$('#learningsSelectors').textContent='';
+      $('#learningsPages').textContent='';$('#learningsApis').textContent='';
+      $('#learningsErrors').textContent='';
+      $('#badgeLearnings').textContent='-';
+      return;
+    }
+    $('#learningsEmpty').style.display='none';
+    S.lastLearningsData=data;
+    var flakyCount=data.flakyTests?data.flakyTests.length:0;
+    var passRate=data.overallPassRate||0;
+    var declining=data.recentTrend&&Array.isArray(data.recentTrend.data||data.recentTrend)&&(function(){
+      var td=data.recentTrend.data||data.recentTrend;
+      if(td.length<2)return false;
+      var last=td[td.length-1].pass_rate;
+      var prior=td.slice(0,-1).reduce(function(s,t){return s+t.pass_rate},0)/(td.length-1);
+      return last-prior<-2;
+    })();
+    if(passRate<70){
+      $('#badgeLearnings').textContent='\u26A0';
+      $('#badgeLearnings').style.background='var(--red-dim)';$('#badgeLearnings').style.color='var(--red)';
+    } else if(flakyCount>0||declining){
+      $('#badgeLearnings').textContent=flakyCount>0?flakyCount:(declining?'\u25BC':'\u2714');
+      $('#badgeLearnings').style.background='var(--amber-dim)';$('#badgeLearnings').style.color='var(--amber)';
+    } else {
+      $('#badgeLearnings').textContent='\u2714';
+      $('#badgeLearnings').style.background='var(--green-dim)';$('#badgeLearnings').style.color='var(--green)';
+    }
+    renderLearnOverview(data);
+    renderLearnTrend(data.recentTrend||[]);
+    renderLearnFlaky(data.flakyTests||[]);
+    renderLearnSelectors(data.unstableSelectors||[]);
+    renderLearnPages(data.failingPages||[]);
+    renderLearnApis(data.apiIssues||[]);
+    renderLearnErrors(data.topErrors||[]);
+  }).catch(function(){$('#learningsEmpty').style.display='block'});
+}
+
+function renderLearnOverview(d){
+  var container=$('#learningsOverview');container.textContent='';
+  var grid=document.createElement('div');grid.className='learn-grid';
+  [{val:d.totalRuns,lbl:'Runs',cls:'accent'},{val:d.totalTests,lbl:'Tests',cls:'accent'},
+   {val:d.overallPassRate+'%',lbl:'Pass Rate',cls:d.overallPassRate>=90?'green':d.overallPassRate>=70?'':'red'},
+   {val:d.avgDurationMs<1000?d.avgDurationMs+'ms':(d.avgDurationMs/1000).toFixed(1)+'s',lbl:'Avg Duration',cls:'purple'},
+   {val:(d.flakyTests?d.flakyTests.length:0),lbl:'Flaky Tests',cls:d.flakyTests&&d.flakyTests.length>0?'red':'green'},
+   {val:(d.unstableSelectors?d.unstableSelectors.length:0),lbl:'Unstable Selectors',cls:d.unstableSelectors&&d.unstableSelectors.length>0?'red':'green'}
+  ].forEach(function(item){
+    var stat=document.createElement('div');stat.className='learn-stat';
+    var valEl=document.createElement('div');valEl.className='learn-stat-val '+item.cls;valEl.textContent=item.val;
+    var lblEl=document.createElement('div');lblEl.className='learn-stat-lbl';lblEl.textContent=item.lbl;
+    stat.appendChild(valEl);stat.appendChild(lblEl);grid.appendChild(stat);
+  });
+  container.appendChild(grid);
 }
-function dismissLiveRun(rid){
-  delete S.liveRuns[rid];
-  renderLive();
+
+function renderLearnTrend(trend){
+  var container=$('#learningsTrend');container.textContent='';
+  if(!trend.length)return;
+  var card=document.createElement('div');card.className='card';
+  var label=document.createElement('div');label.className='card-label';label.textContent='Pass Rate Trend (7 days)';card.appendChild(label);
+  var chartDiv=document.createElement('div');chartDiv.className='learn-trend-chart';
+  var w=100/trend.length;var ns='http://www.w3.org/2000/svg';
+  var svg=document.createElementNS(ns,'svg');svg.setAttribute('viewBox','0 0 100 100');svg.setAttribute('preserveAspectRatio','none');
+  var bg=document.createElementNS(ns,'rect');bg.setAttribute('x','0');bg.setAttribute('y','0');bg.setAttribute('width','100');bg.setAttribute('height','100');bg.setAttribute('fill','var(--surface2)');bg.setAttribute('rx','2');svg.appendChild(bg);
+  var gridLine=document.createElementNS(ns,'line');gridLine.setAttribute('x1','0');gridLine.setAttribute('y1','50');gridLine.setAttribute('x2','100');gridLine.setAttribute('y2','50');gridLine.setAttribute('stroke','var(--border)');gridLine.setAttribute('stroke-width','0.3');gridLine.setAttribute('stroke-dasharray','2,2');svg.appendChild(gridLine);
+  var pts=trend.map(function(t,i){return(i*w+w/2)+','+(100-t.pass_rate)}).join(' ');
+  var poly=document.createElementNS(ns,'polygon');poly.setAttribute('points',(0*w+w/2)+',100 '+pts+' '+((trend.length-1)*w+w/2)+',100');poly.setAttribute('fill','var(--accent-dim)');svg.appendChild(poly);
+  var pl=document.createElementNS(ns,'polyline');pl.setAttribute('points',pts);pl.setAttribute('fill','none');pl.setAttribute('stroke','var(--accent)');pl.setAttribute('stroke-width','1.5');svg.appendChild(pl);
+  trend.forEach(function(t,i){
+    var circle=document.createElementNS(ns,'circle');circle.setAttribute('cx',''+(i*w+w/2));circle.setAttribute('cy',''+(100-t.pass_rate));circle.setAttribute('r','2');circle.setAttribute('fill','var(--accent)');
+    var title=document.createElementNS(ns,'title');title.textContent=t.date+': '+t.pass_rate+'% ('+t.total_tests+' tests)';circle.appendChild(title);svg.appendChild(circle);
+  });
+  chartDiv.appendChild(svg);card.appendChild(chartDiv);
+  var dates=document.createElement('div');dates.style.cssText='display:flex;justify-content:space-between;font-size:10px;color:var(--text3);margin-top:4px';
+  dates.appendChild(el('span',null,trend[0].date));dates.appendChild(el('span',null,trend[trend.length-1].date));
+  card.appendChild(dates);container.appendChild(card);
+}
+
+function buildLearnTable(title,headers,rows){
+  var card=document.createElement('div');card.className='card learn-section';
+  var h=document.createElement('div');h.className='learn-section-title';h.textContent=title;card.appendChild(h);
+  var wrap=document.createElement('div');wrap.className='tbl-wrap';
+  var tbl=document.createElement('table');tbl.className='learn-table';
+  var thead=document.createElement('thead');var hr=document.createElement('tr');
+  headers.forEach(function(hdr){var th=document.createElement('th');th.textContent=hdr;hr.appendChild(th)});
+  thead.appendChild(hr);tbl.appendChild(thead);
+  var tbody=document.createElement('tbody');
+  rows.forEach(function(cells){
+    var tr=document.createElement('tr');
+    cells.forEach(function(cell){
+      var td=document.createElement('td');
+      if(cell.code){var code=document.createElement('code');code.textContent=cell.code;td.appendChild(code)}
+      else if(cell.badge){var span=document.createElement('span');span.className='badge '+cell.cls;span.textContent=cell.badge;td.appendChild(span)}
+      else{td.textContent=cell.text!==undefined&&cell.text!==null?cell.text:(typeof cell==='object'?'-':cell)}
+      tr.appendChild(td);
+    });
+    tbody.appendChild(tr);
+  });
+  tbl.appendChild(tbody);wrap.appendChild(tbl);card.appendChild(wrap);return card;
 }
+
+function renderLearnFlaky(flaky){var c=$('#learningsFlaky');c.textContent='';if(!flaky.length)return;c.appendChild(buildLearnTable('Flaky Tests',['Test','Flaky Rate','Occurrences','Total Runs','Last Flaky','Avg Attempts'],flaky.map(function(f){return[{code:f.test_name},{badge:f.flaky_rate+'%',cls:f.flaky_rate>30?'fail':'flaky'},{text:f.flaky_count},{text:f.total_runs},{text:(f.last_flaky||'-').split('T')[0]},{text:f.avg_attempts}]})))}
+function renderLearnSelectors(sels){var c=$('#learningsSelectors');c.textContent='';if(!sels.length)return;c.appendChild(buildLearnTable('Unstable Selectors',['Selector','Action','Fail Rate','Uses','Tests','Page'],sels.map(function(s){var sel=s.selector.length>45?s.selector.slice(0,42)+'...':s.selector;return[{code:sel},{text:s.action_type},{badge:s.fail_rate+'%',cls:s.fail_rate>30?'fail':'flaky'},{text:s.total_uses},{text:s.used_by_tests},{text:s.page_url||'-'}]})))}
+function renderLearnPages(pages){var c=$('#learningsPages');c.textContent='';if(!pages.length)return;c.appendChild(buildLearnTable('Failing Pages',['Page','Fail Rate','Visits','Console Errors','Network Errors'],pages.map(function(p){return[{code:p.url_path},{badge:p.fail_rate+'%',cls:p.fail_rate>30?'fail':'flaky'},{text:p.total_visits},{text:p.console_errors},{text:p.network_errors}]})))}
+function renderLearnApis(apis){var c=$('#learningsApis');c.textContent='';if(!apis.length)return;c.appendChild(buildLearnTable('API Issues',['Endpoint','Error Rate','Calls','Avg Duration','Status Codes'],apis.map(function(a){var ep=a.endpoint.length>45?a.endpoint.slice(0,42)+'...':a.endpoint;var d=a.avg_duration_ms<1000?Math.round(a.avg_duration_ms)+'ms':(a.avg_duration_ms/1000).toFixed(1)+'s';return[{code:ep},{badge:a.error_rate+'%',cls:a.error_rate>20?'fail':'flaky'},{text:a.total_calls},{text:d},{text:a.status_codes||'-'}]})))}
+function renderLearnErrors(errors){var c=$('#learningsErrors');c.textContent='';if(!errors.length)return;c.appendChild(buildLearnTable('Error Patterns',['Pattern','Category','Count','First Seen','Last Seen','Example Test'],errors.map(function(e){var pat=e.pattern.length>50?e.pattern.slice(0,47)+'...':e.pattern;return[{text:pat},{badge:e.category,cls:'run'},{text:e.occurrence_count},{text:(e.first_seen||'-').split('T')[0]},{text:(e.last_seen||'-').split('T')[0]},{code:e.example_test||'-'}]})))}
+
+$('#btnRefreshLearnings').addEventListener('click',refreshLearnings);
+$('#learningsDays').addEventListener('change',refreshLearnings);
+
+$('#btnExportLearnings').addEventListener('click',function(){
+  var data=S.lastLearningsData;
+  if(!data){showToast('No learnings data to export','error');return}
+  var md='# E2E Learnings Report\n\n';
+  md+='| Metric | Value |\n|--------|-------|\n';
+  md+='| Total Runs | '+data.totalRuns+' |\n';
+  md+='| Total Tests | '+data.totalTests+' |\n';
+  md+='| Pass Rate | '+data.overallPassRate+'% |\n';
+  md+='| Avg Duration | '+dur(data.avgDurationMs)+' |\n\n';
+  if(data.flakyTests&&data.flakyTests.length){
+    md+='## Flaky Tests\n\n| Test | Flaky Rate | Occurrences |\n|------|-----------|-------------|\n';
+    data.flakyTests.forEach(function(f){md+='| '+f.test_name+' | '+f.flaky_rate+'% | '+f.flaky_count+' |\n'});md+='\n';
+  }
+  if(data.unstableSelectors&&data.unstableSelectors.length){
+    md+='## Unstable Selectors\n\n| Selector | Action | Fail Rate |\n|----------|--------|-----------|\n';
+    data.unstableSelectors.forEach(function(s){md+='| `'+s.selector+'` | '+s.action_type+' | '+s.fail_rate+'% |\n'});md+='\n';
+  }
+  downloadFile('learnings-report.md',md,'text/markdown');
+  showToast('Learnings exported','success');
+});
+
+/* ── Modal ── */
+function openModal(src){$('#modalImg').src=src;$('#modal').classList.add('open')}
+$('#modal').addEventListener('click',function(){$('#modal').classList.remove('open')});
+
+
+/* ── view-live.js ── */
+/* ══════════════════════════════════════════════════════════════════
+   Live Execution View
+   ══════════════════════════════════════════════════════════════════ */
+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;
-  }
+  var runs=S.liveRuns;var runIds=Object.keys(runs);
 
-  navLive.style.display='';
-  liveEmpty.style.display='none';
-  panel.classList.add('active');
+  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;
-  });
+  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++})});
@@ -1088,21 +2731,13 @@ function renderLive(){
   $('#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)
+  $('#liveTotal').textContent=gTotal;$('#livePass').textContent=gPassed;$('#liveFail').textContent=gFailed;$('#liveActive').textContent=gActive;
+  $('#liveProgressFill').style.width=(gTotal>0?gCompleted/gTotal*100:0)+'%';
   $('#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){
@@ -1111,148 +2746,104 @@ function renderLive(){
     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)';
+    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
-      ]),
+    if(L.done||!L.on){dismissBtn=el('button',{className:'lr-dismiss',onclick:function(e){e.stopPropagation();dismissLiveRun(rid)}},'\u2715')}
+    grid.appendChild(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 poolDist=buildPoolDistribution(L.tests);
+    if(poolDist)grid.appendChild(poolDist);
 
     var testGrid=el('div',{className:'lr-test-grid'});
-    var names=Object.keys(L.tests);
-    names.forEach(function(name){
+    Object.keys(L.tests).forEach(function(name){
       if(name==='__error')return;
-      var t=L.tests[name];
-      var testKey=rid+'::'+name;
+      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'}
+      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 detail=a.narrative||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)
+          var retryBadge=null;
+          if(a.actionRetries&&a.actionRetries>0){retryBadge=el('span',{className:'badge flaky',style:'font-size:9px;padding:1px 5px;margin-left:4px'},'\u21BB x'+a.actionRetries)}
+          var stepCls='lt-step'+(a.isPoolLog?' pool-log':'');
+          stepsEl.appendChild(el('div',{className:stepCls},[
+            el('span',{className:'step-icon '+(a.isPoolLog?'':a.success?'ok':'fail')},a.isPoolLog?'\uD83D\uDD17':a.success?'\u2714':'\u2718'),
+            el('span',{className:'step-type'},a.isPoolLog?'pool':a.type),
+            el('span',{className:'step-detail'},a.isPoolLog?a.narrative:detail),
+            retryBadge,
+            a.isPoolLog?null: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...')]));
-        }
+        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 isCollapsed=isFinished&&S.liveCollapsed.has(testKey);
+      var summaryEl=el('div',{className:'lt-summary'},[el('span',{className:'lt-dur'},t.duration||''),el('span',{className:'lt-expand'},isCollapsed?'\u25BC':'\u25B2')]);
+
       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 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 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';
+          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);
+          (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';
-        });
+        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 serialBadge=t.serial?el('span',{className:'serial-badge'},'Serial'):null;
+      var poolBadge=t.poolUrl?el('span',{className:'pool-badge'},t.poolUrl.replace('ws://','').replace('wss://','')):null;
       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
+          document.createTextNode(' '+name),serialBadge,poolBadge,summaryEl
         ]),
-        el('div',{className:'lt-meta'},meta),
-        stepsEl
+        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();
-        });
+        var liveNetHead=el('div',{className:'rd-net-head'},[el('span',{className:'net-arrow'},'\u25B6'),el('span',{className:'net-title'},'Network Requests'),el('div',{className:'net-stats'},[el('span',{className:'net-stat'},[document.createTextNode('Total: '),el('strong',null,String(t.networkLogs.length))]),liveErrCount?el('span',{className:'net-stat has-err'},[document.createTextNode('Errors: '),el('strong',null,String(liveErrCount))]):null])]);
+        var liveNetCols=el('div',{className:'rd-net-cols'},[el('span',{className:'col-e'},''),el('span',{className:'col-m'},'Method'),el('span',{className:'col-s'},'Status'),el('span',{className:'col-u'},'URL'),el('span',{className:'col-d'},'Time')]);
+        var liveNetBody=el('div',{className:'rd-net-body'},[liveNetCols]);
+        t.networkLogs.forEach(function(n){var built=buildNetRow(n);liveNetBody.appendChild(built.row);if(built.detail)liveNetBody.appendChild(built.detail)});
+        liveNetHead.addEventListener('click',function(e){e.stopPropagation();liveNetHead.classList.toggle('open')});
+        card.appendChild(el('div',{className:'rd-net-panel',style:'margin-top:6px'},[liveNetHead,liveNetBody]));
       }
+      if(isFinished){card.addEventListener('click',function(e){if(window.getSelection().toString())return;if(S.liveCollapsed.has(testKey))S.liveCollapsed.delete(testKey);else S.liveCollapsed.add(testKey);renderLive()})}
       testGrid.appendChild(card);
       if(!isCollapsed)stepsEl.scrollTop=stepsEl.scrollHeight;
     });
@@ -1260,21 +2851,71 @@ function renderLive(){
   });
 }
 
-/* ── 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')});
+/* ── keyboard.js ── */
+/* ══════════════════════════════════════════════════════════════════
+   Keyboard Shortcuts (Updated: 1=Watch, 2=Tests, 3=Runs, 4=Live)
+   ══════════════════════════════════════════════════════════════════ */
+document.addEventListener('keydown',function(e){
+  var tag=document.activeElement.tagName;
+  if(tag==='INPUT'||tag==='SELECT'||tag==='TEXTAREA')return;
+  if(e.key==='Escape'){
+    if($('#kbModal').classList.contains('open')){$('#kbModal').classList.remove('open');return}
+    if($('#modal').classList.contains('open')){$('#modal').classList.remove('open');return}
+    if($('#suiteModalOverlay').classList.contains('open')){$('#suiteModalOverlay').classList.remove('open');return}
+    if(S.selectedRun!==null){
+      var expanded=document.querySelector('#runsBody tr.expanded');
+      if(expanded){
+        var next=expanded.nextElementSibling;
+        if(next&&next.classList.contains('run-detail-row')){var w=next.querySelector('.rd-wrap');if(w)w.classList.remove('open');expanded.classList.remove('expanded');setTimeout(function(){if(next.parentNode)next.parentNode.removeChild(next)},350)}
+        S.selectedRun=null;
+      }
+      return;
+    }
+    return;
+  }
+  if(e.key==='?'){$('#kbModal').classList.toggle('open');return}
+  var viewMap={'1':'watch','2':'tests','3':'runs','4':'live','5':'instances'};
+  if(viewMap[e.key]){showView(viewMap[e.key]);return}
+  if(e.key==='r'){
+    if(S.view==='watch')refreshWatch();
+    else if(S.view==='tests'){refreshSuites();refreshVariables()}
+    else if(S.view==='runs'){refreshRuns();refreshScreenshots();refreshLearnings()}
+    else if(S.view==='live')renderLive();
+    return;
+  }
+  if(S.view==='runs'&&(e.key==='j'||e.key==='k')){
+    var visible=_allRunRows.filter(function(item){return item.tr.style.display!=='none'});
+    if(!visible.length)return;
+    if(e.key==='j')S.highlightedRunIdx=Math.min(S.highlightedRunIdx+1,visible.length-1);
+    if(e.key==='k')S.highlightedRunIdx=Math.max(S.highlightedRunIdx-1,0);
+    visible.forEach(function(item,i){if(i===S.highlightedRunIdx){item.tr.classList.add('selected');item.tr.scrollIntoView({block:'nearest'})}else item.tr.classList.remove('selected')});
+    return;
+  }
+  if(S.view==='runs'&&e.key==='Enter'){
+    var visible2=_allRunRows.filter(function(item){return item.tr.style.display!=='none'});
+    if(S.highlightedRunIdx>=0&&S.highlightedRunIdx<visible2.length){visible2[S.highlightedRunIdx].tr.click()}
+    return;
+  }
+});
+$('#kbModal').addEventListener('click',function(e){if(e.target===$('#kbModal'))$('#kbModal').classList.remove('open')});
 
-/* ── Init ── */
+
+/* ── init.js ── */
+/* ══════════════════════════════════════════════════════════════════
+   Init — startup sequence
+   ══════════════════════════════════════════════════════════════════ */
+initTabs();
 connectWS();
 refreshStatus();
 refreshProjects();
 refreshSuites();
 refreshRuns();
 refreshScreenshots();
+refreshLearnings();
+refreshVariables();
+startWatchPolling();
+
 })();
 </script>
 </body>