@matware/e2e-runner 1.1.1 → 1.2.1

package/templates/dashboard.html

@@ -84,6 +84,24 @@ a{color:var(--accent);text-decoration:none}
 .stat-val.accent{color:var(--accent)}
 .stat-val.purple{color:var(--purple)}
 
+/* ── 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%}
+
 /* ── Tables ── */
 .tbl-wrap{overflow-x:auto}
 table{width:100%;border-collapse:collapse;font-size:12px}
@@ -105,16 +123,80 @@ 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}
 
+/* ── 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}
+
 /* ── 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)}
+.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}
 
 /* ── 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}
@@ -145,14 +227,14 @@ 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-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}
@@ -171,7 +253,7 @@ tbody tr.selected td{background:var(--accent-dim)}
 .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}
@@ -206,77 +288,112 @@ tbody tr.selected td{background:var(--accent-dim)}
 .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 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 .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-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: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-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-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-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-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)}
-.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-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{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-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{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-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-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-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}
+.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}
+.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)}
+.rd-error-msg .copy-btn{position:absolute;top:8px;right:8px;opacity:0}
+.rd-error-msg:hover .copy-btn{opacity:1}
+.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)}
 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)}
@@ -291,14 +408,79 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
 .trigger-badge.src-unknown{background:rgba(70,75,98,.15);color:var(--text3)}
 .trigger-badge .trig-icon{font-size:11px;line-height:1}
 
+/* ── 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 (NEW) ── */
+.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)}}
+
+/* ── Filter Bar (NEW) ── */
+.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)}
+
+/* ── Module Cards (NEW) ── */
+.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}
+
+/* ── Keyboard Shortcuts Modal (NEW) ── */
+.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)}
+
+/* ── Actions Panel in Run Detail (NEW) ── */
+.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}
+
+/* ── Serial Badge (NEW) ── */
+.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}
+
 /* ── 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}
+  .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{grid-template-columns:1fr}
+  .suite-grid,.gallery,.module-grid{grid-template-columns:1fr}
   .lr-test-grid{grid-template-columns:1fr}
+  .toast-container{right:12px;bottom:12px}
 }
+
 </style>
 </head>
 <body>
@@ -323,13 +505,16 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
     <i class="icon"><span class="live-nav-dot"></span></i><span>Live</span><span class="badge" id="liveBadge" style="background:var(--purple-dim);color:var(--purple)">0</span>
   </div>
   <div class="nav-item active" data-view="suites">
-    <i class="icon">&#9655;</i><span>Suites</span>
+    <i class="icon">&#9655;</i><span>Suites</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>
+    <i class="icon">&#9635;</i><span>Screenshots</span><span class="badge" id="badgeScreenshots">-</span>
+  </div>
+  <div class="nav-item" data-view="learnings">
+    <i class="icon">&#9733;</i><span>Learnings</span><span class="badge" id="badgeLearnings">-</span>
   </div>
 
   <div class="pool-status" id="poolStatus">
@@ -379,9 +564,10 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
   <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 id="suiteAccordionContainer"></div>
     <div class="suite-grid" id="suiteGrid"></div>
+    <div id="moduleSection"></div>
     <div class="empty" id="suitesEmpty" style="display:none">
       <div class="empty-icon">&#9655;</div>
       <p>No test suites found.</p>
@@ -390,11 +576,20 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
 
   <!-- 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 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">Run History</div>
+    </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>
@@ -409,6 +604,34 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
     </div>
   </div>
 
+  <!-- Learnings View -->
+  <div class="view" id="view-learnings">
+    <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">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>
+
   <!-- 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>
@@ -427,6 +650,22 @@ tr.expanded td:first-child::before{content:'';position:absolute;left:0;top:0;bot
 </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">Suites view</span></div>
+    <div class="kb-row"><span class="kb-key">2</span><span class="kb-desc">Runs view</span></div>
+    <div class="kb-row"><span class="kb-key">3</span><span class="kb-desc">Screenshots view</span></div>
+    <div class="kb-row"><span class="kb-key">4</span><span class="kb-desc">Learnings view</span></div>
+    <div class="kb-row"><span class="kb-key">5</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(){
@@ -450,53 +689,89 @@ 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 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 rowCls='rd-net-row'+(sCode>=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-expand'},hasDetail?'\u25B6':''),
+    el('span',{className:mCls},n.method||'GET'),
+    el('span',{className:sCls},String(sCode)),
+    el('span',{className:'rd-net-url'},n.url||''),
+    makeCopyBtn(n.url||''),
     el('span',{className:'rd-net-dur'},dur(n.duration))
   ]);
   var detail=null;
   if(hasDetail){
     var sections=[];
     if(n.requestHeaders){
-      var s=el('div',{className:'rd-net-detail-section'},[el('div',{className:'rd-net-detail-title'},'Request Headers')]);
-      s.appendChild(el('div',{className:'rd-net-detail-body'},fmtHeaders(n.requestHeaders)));
-      sections.push(s);
+      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 +805,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,10 +816,44 @@ function createTriggerBadge(source){
   return badge;
 }
 
+/* ══════════════════════════════════════════════════════════════════
+   Toast Notifications (Improvement 4)
+   ══════════════════════════════════════════════════════════════════ */
+function showToast(message,type){
+  type=type||'info';
+  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);
+  },5000);
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   Download helper (Improvement 8)
+   ══════════════════════════════════════════════════════════════════ */
+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);
+}
+
 /* ── State ── */
 var S={
   ws:null,project:null,view:'suites',selectedRun:null,
-  liveRuns:{},liveExpanded:new Set(),liveSSOpen:new Set()
+  liveRuns:{},liveCollapsed:new Set(),liveSSOpen:new Set(),
+  runFilter:{status:'all',search:''},
+  lastLearningsData:null,
+  highlightedRunIdx:-1
 };
 
 /* ── Navigation ── */
@@ -565,12 +873,20 @@ function showView(v){
   $('#view-'+v).classList.add('active');
 }
 
-/* ── WebSocket ── */
+/* ══════════════════════════════════════════════════════════════════
+   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 +899,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,53 +919,58 @@ 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: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;
       }
-      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}
+      var r6=getLiveRun(m);if(r6){r6.on=false;r6.done=true;r6.active=0}
+      var summary=m.summary||{};
+      if(summary.failed>0){showToast('Run complete: '+summary.failed+' failed','error')}
+      else{showToast('Run complete: all '+(summary.total||0)+' passed','success')}
       renderLive();refreshRuns();refreshProjects();break;
     case 'run:error':
-      var r=getLiveRun(m);if(r){r.on=false;r.done=true;r.tests.__error={status:'failed',error:m.error}}
+      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();break;
   }
 }
 
-/* ── API ── */
+/* ══════════════════════════════════════════════════════════════════
+   API & Pool
+   ══════════════════════════════════════════════════════════════════ */
 function api(p){return fetch(p).then(function(r){return r.json()})}
 function triggerRun(suite,projectId){
   if(anyLiveRunning())return;
@@ -666,7 +981,6 @@ function triggerRun(suite,projectId){
   fetch('/api/run',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
 }
 
-/* ── Pool ── */
 function renderPool(d){
   if(!d)return;
   $('#poolDot').className='pool-dot '+(d.error||!d.available?'off':'on');
@@ -675,7 +989,9 @@ function renderPool(d){
 }
 function refreshStatus(){api('/api/status').then(function(d){renderPool(d.pool)}).catch(function(){})}
 
-/* ── Projects ── */
+/* ══════════════════════════════════════════════════════════════════
+   Projects
+   ══════════════════════════════════════════════════════════════════ */
 function refreshProjects(){
   api('/api/db/projects').then(function(projects){
     var sel=$('#projectSelect'),prev=sel.value;
@@ -689,68 +1005,226 @@ function refreshProjects(){
 $('#projectSelect').addEventListener('change',function(){
   S.project=this.value?parseInt(this.value,10):null;
   S.selectedRun=null;
-  refreshRuns();refreshSuites();refreshScreenshots();
+  refreshRuns();refreshSuites();refreshScreenshots();refreshLearnings();
 });
 
-/* ── Suites ── */
+/* ══════════════════════════════════════════════════════════════════
+   Suites (+ Serial badges, Modules)
+   ══════════════════════════════════════════════════════════════════ */
 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);
+}
+
+var _suiteCache={};
 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);
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   Runs (+ 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 refreshRuns(){
   var url=S.project?'/api/db/projects/'+S.project+'/runs':'/api/db/runs';
   api(url).then(function(rows){
     var chart=$('#trendChart'),body=$('#runsBody'),empty=$('#runsEmpty'),head=$('#runsHead');
     chart.textContent='';body.textContent='';
-    if(!Array.isArray(rows)||rows.length===0){empty.style.display='block';head.parentNode.parentNode.style.display='none';return}
+    _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 +1233,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 +1241,6 @@ function refreshRuns(){
       chart.appendChild(bar);
     });
 
-    // Rows
     rows.forEach(function(r){
       var tr=document.createElement('tr');
       tr.dataset.runId=r.id;
@@ -786,12 +1258,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 +1276,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 +1289,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 +1301,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 +1312,106 @@ 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 (+ Action Narratives, Retry badges, Export)
+   ══════════════════════════════════════════════════════════════════ */
 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
     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 head=el('div',{className:'rd-test-head'},[badges,el('div',{className:'rd-test-name'},r.name),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,94 +1420,95 @@ 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';
   });
 }
 
-/* ── Screenshots ── */
+/* ══════════════════════════════════════════════════════════════════
+   Screenshots
+   ══════════════════════════════════════════════════════════════════ */
 function refreshScreenshots(){
   var gal=$('#screenshotGallery'),empty=$('#screenshotsEmpty');
   gal.textContent='';
-  if(!S.project){empty.style.display='block';empty.querySelector('p').textContent='Select a project to view screenshots.';return}
+  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 +1520,38 @@ 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();
-}
-function dismissLiveRun(rid){
-  delete S.liveRuns[rid];
-  renderLive();
-}
+/* ══════════════════════════════════════════════════════════════════
+   Live Execution (+ Retry badges, Serial badges)
+   ══════════════════════════════════════════════════════════════════ */
+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);
+
+  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');
+  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 +1559,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 +1574,99 @@ 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 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'):'';
+          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)}
           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),
+            retryBadge,
             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 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,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,22 +1674,194 @@ 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')});
 
-/* ── Init ── */
+/* ══════════════════════════════════════════════════════════════════
+   Learnings (+ Cross-project, Export)
+   ══════════════════════════════════════════════════════════════════ */
+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;
+    $('#badgeLearnings').textContent=flakyCount>0?flakyCount:'\u2714';
+    if(flakyCount>0){$('#badgeLearnings').style.background='var(--amber-dim)';$('#badgeLearnings').style.color='var(--amber)'}
+    else{$('#badgeLearnings').style.background='';$('#badgeLearnings').style.color=''}
+    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 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: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');
+});
+
+/* ══════════════════════════════════════════════════════════════════
+   Keyboard Shortcuts
+   ══════════════════════════════════════════════════════════════════ */
+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(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':'suites','2':'runs','3':'screenshots','4':'learnings','5':'live'};
+  if(viewMap[e.key]){showView(viewMap[e.key]);return}
+  if(e.key==='r'){
+    if(S.view==='suites')refreshSuites();else if(S.view==='runs')refreshRuns();
+    else if(S.view==='screenshots')refreshScreenshots();else if(S.view==='learnings')refreshLearnings();
+    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
+   ══════════════════════════════════════════════════════════════════ */
 connectWS();
 refreshStatus();
 refreshProjects();
 refreshSuites();
 refreshRuns();
 refreshScreenshots();
+refreshLearnings();
 })();
+
 </script>
 </body>
 </html>