@testrelic/playwright-analytics 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/reporter.ts
-import { randomUUID } from "crypto";
-import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync2, renameSync as renameSync2 } from "fs";
+import { randomUUID, createHash } from "crypto";
+import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync2, renameSync as renameSync2 } from "fs";
 import { dirname as dirname2, relative } from "path";
 
 // src/config.ts
@@ -31,11 +31,12 @@ function resolveConfig(options) {
   const outputPath = target.outputPath;
   target.openReport = options?.openReport ?? true;
   target.htmlReportPath = options?.htmlReportPath ?? outputPath.replace(/\.json$/, ".html");
+  target.includeArtifacts = options?.includeArtifacts ?? true;
   return Object.freeze(target);
 }
 
 // src/schema.ts
-var SCHEMA_VERSION = "1.0.0";
+var SCHEMA_VERSION = "1.2.0";
 
 // src/code-extractor.ts
 import { readFileSync } from "fs";
@@ -136,157 +137,413 @@ function detectCI(env) {
 import { writeFileSync, renameSync, mkdirSync } from "fs";
 import { dirname, resolve } from "path";
 
-// src/html-template.ts
+// src/html-logo.ts
 var LOGO_SVG = `<svg width="32" height="40" viewBox="0 0 196 247" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 1.08009C2.034 2.66209 -0.130999 7.63009 0.610001 10.5821C0.969001 12.0121 3.021 15.2131 5.17 17.6971C14.375 28.3321 18 39.7791 18 58.2101V71.0001H12.434C1.16501 71.0001 0 73.4641 0 97.3051C0 106.858 0.298003 128.922 0.662003 146.337L1.323 178H33.606C65.786 178 65.897 178.007 68.544 180.284C72.228 183.453 72.244 189.21 68.579 192.877L65.957 195.5L33.479 195.801L1 196.103V204.551V213H24.577H48.154L51.077 215.923C55.007 219.853 55.007 224.147 51.077 228.077L48.154 231H26.469H4.783L5.41901 233.534C5.76901 234.927 7.143 238.527 8.472 241.534L10.89 247H40.945H71L71.006 241.75C71.017 230.748 76.027 221.606 84.697 216.767C97.854 209.424 114.086 213.895 121.323 226.857C123.659 231.041 124.418 233.833 124.789 239.607L125.263 247H155.187H185.11L187.528 241.534C188.857 238.527 190.231 234.927 190.581 233.534L191.217 231H169.531H147.846L144.923 228.077C142.928 226.082 142 224.152 142 222C142 219.848 142.928 217.918 144.923 215.923L147.846 213H171.423H195V204.551V196.103L162.521 195.801L130.043 195.5L127.421 192.877C123.991 189.445 123.835 183.869 127.074 180.421L129.349 178H162.013H194.677L195.338 146.337C195.702 128.922 196 106.858 196 97.3051C196 73.4641 194.835 71.0001 183.566 71.0001H178V58.2101C178 39.6501 181.397 28.7731 190.538 18.0651C195.631 12.0971 196.572 9.00809 194.511 5.02109C192.672 1.46509 190.197 9.12233e-05 186.028 9.12233e-05C179.761 9.12233e-05 168.713 14.8831 163.388 30.5001C160.975 37.5771 160.608 40.3751 160.213 54.7501L159.765 71.0001H150.732H141.7L142.286 53.2501C142.904 34.5511 144.727 24.3761 148.938 16.1211C151.823 10.4671 151.628 5.90109 148.364 2.63609C145 -0.726907 140.105 -0.887909 136.596 2.25009C133.481 5.03609 128.686 17.0811 126.507 27.5921C125.569 32.1191 124.617 43.0901 124.28 53.2501L123.69 71.0001H115.345H107V38.4231V5.84609L104.077 2.92309C102.082 0.928088 100.152 9.12233e-05 98 9.12233e-05C95.848 9.12233e-05 93.918 0.928088 91.923 2.92309L89 5.84609V38.4231V71.0001H80.655H72.31L71.72 53.2501C71.383 43.0901 70.431 32.1191 69.493 27.5921C67.314 17.0811 62.519 5.03609 59.404 2.25009C55.998 -0.795909 51.059 -0.710905 47.646 2.45209C44.221 5.62609 44.191 9.92109 47.539 17.4911C51.71 26.9241 53.007 34.4791 53.676 53.2501L54.31 71.0001H45.272H36.235L35.787 54.7501C35.392 40.3751 35.025 37.5771 32.612 30.5001C27.194 14.6091 16.228 -0.02891 9.787 0.03009C7.979 0.04709 5.712 0.519093 4.75 1.08009ZM42.687 108.974C33.431 112.591 20.036 125.024 18.408 131.512C17.476 135.223 20.677 140.453 28.253 147.599C37.495 156.319 44.191 159.471 53.5 159.485C59.317 159.494 61.645 158.953 67.274 156.289C77.634 151.385 88.987 139.161 88.996 132.9C89.004 127.304 76.787 114.707 66.745 109.956C59.16 106.368 50.285 106.006 42.687 108.974ZM129.255 109.904C119.151 114.768 106.996 127.33 107.004 132.9C107.013 139.108 118.562 151.475 128.939 156.389C134.338 158.945 136.744 159.496 142.521 159.498C152.526 159.501 160.369 155.502 169.771 145.605C180.444 134.368 180.278 130.975 168.486 119.388C160.043 111.094 152.727 107.595 143 107.201C136.364 106.933 134.78 107.244 129.255 109.904ZM48.5 125.922C46.3 126.969 43.152 128.945 41.505 130.314L38.511 132.802L40.504 135.005C41.601 136.216 44.434 138.342 46.8 139.728C52.577 143.114 57.36 142.466 64.009 137.395L68.978 133.606L66.756 131.24C60.944 125.054 54.357 123.135 48.5 125.922ZM138.386 125.063C136.674 125.571 133.375 127.677 131.057 129.743L126.841 133.5L131.901 137.343C138.65 142.468 143.407 143.124 149.2 139.728C151.566 138.342 154.351 136.269 155.389 135.122C157.684 132.587 156.742 131.097 150.58 127.511C145.438 124.519 142.329 123.895 138.386 125.063ZM91.923 162.923C89.043 165.804 89 166.008 89 176.973C89 184.805 89.435 188.941 90.47 190.941C92.356 194.589 96.918 196.273 101.03 194.84C105.82 193.17 107 189.638 107 176.973C107 166.008 106.957 165.804 104.077 162.923C102.082 160.928 100.152 160 98 160C95.848 160 93.918 160.928 91.923 162.923ZM94.5 232.155C91.026 234.055 90 236.229 90 241.691V247H98H106V242.082C106 235.732 105.37 234.242 101.928 232.463C98.591 230.737 97.197 230.679 94.5 232.155Z" fill="url(#paint0_linear_55_11)"/>
 <defs><linearGradient id="paint0_linear_55_11" x1="98" y1="0.000244141" x2="98" y2="247" gradientUnits="userSpaceOnUse">
 <stop stop-color="#03B79C"/><stop offset="0.504808" stop-color="#4EDAA4"/><stop offset="0.865285" stop-color="#84F3AA"/>
 </linearGradient></defs></svg>`;
+
+// src/html-css.ts
 var CSS = `
+:root{
+  --bg-primary:#ffffff;--bg-secondary:#fafafa;--bg-tertiary:#f3f4f6;--bg-card:#ffffff;
+  --bg-code:#171717;--bg-code-text:#d4d4d4;--bg-code-highlight:rgba(239,68,68,.2);
+  --text-primary:#171717;--text-secondary:#6b7280;--text-muted:#9ca3af;--text-strong:#374151;
+  --border:#e5e7eb;--border-light:#f3f4f6;--border-hover:#d1d5db;
+  --accent:#03b79c;--accent-hover:#028a75;--accent-ring:rgba(3,183,156,.2);
+  --passed-bg:#d1fae5;--passed-text:#065f46;--passed-border:#bbf7d0;--passed-card-bg:#f0fdf4;--passed-count:#16a34a;
+  --failed-bg:#fecaca;--failed-text:#991b1b;--failed-border:#fecaca;--failed-card-bg:#fef2f2;--failed-count:#dc2626;
+  --flaky-bg:#fde68a;--flaky-text:#92400e;--flaky-border:#fde68a;--flaky-card-bg:#fffbeb;--flaky-count:#d97706;
+  --skipped-bg:#f3f4f6;--skipped-text:#6b7280;--skipped-card-bg:#f9fafb;
+  --timedout-bg:#ffedd5;--timedout-text:#9a3412;--timedout-card-bg:#fff7ed;--timedout-count:#ea580c;
+  --total-border:#c7d2fe;--total-bg:#eef2ff;--total-count:#4f46e5;
+  --ci-bg:#eff6ff;--ci-text:#1d4ed8;--merged-bg:#fef3c7;--merged-text:#92400e;
+  --tag-bg:#eff6ff;--tag-text:#1d4ed8;--type-bg:#ede9fe;--type-text:#5b21b6;
+  --net-2xx-bg:#d1fae5;--net-2xx-text:#065f46;--net-3xx-bg:#fef3c7;--net-3xx-text:#92400e;
+  --net-4xx-bg:#fecaca;--net-4xx-text:#991b1b;--net-5xx-bg:#fecaca;--net-5xx-text:#7f1d1d;
+  --net-0-bg:#f3f4f6;--net-0-text:#6b7280;
+  --passed-left:#22c55e;--failed-left:#ef4444;
+  --failure-msg-bg:#f8f8f8;
+}
+[data-theme="dark"]{
+  --bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-card:#1e293b;
+  --bg-code:#0f172a;--bg-code-text:#e2e8f0;--bg-code-highlight:rgba(239,68,68,.25);
+  --text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-strong:#cbd5e1;
+  --border:#334155;--border-light:#1e293b;--border-hover:#475569;
+  --accent:#2dd4bf;--accent-hover:#5eead4;--accent-ring:rgba(45,212,191,.25);
+  --passed-bg:#065f46;--passed-text:#6ee7b7;--passed-border:#064e3b;--passed-card-bg:#022c22;--passed-count:#34d399;
+  --failed-bg:#7f1d1d;--failed-text:#fca5a5;--failed-border:#991b1b;--failed-card-bg:#450a0a;--failed-count:#f87171;
+  --flaky-bg:#78350f;--flaky-text:#fde68a;--flaky-border:#92400e;--flaky-card-bg:#451a03;--flaky-count:#fbbf24;
+  --skipped-bg:#334155;--skipped-text:#94a3b8;--skipped-card-bg:#1e293b;
+  --timedout-bg:#7c2d12;--timedout-text:#fed7aa;--timedout-card-bg:#431407;--timedout-count:#fb923c;
+  --total-border:#4338ca;--total-bg:#1e1b4b;--total-count:#a5b4fc;
+  --ci-bg:#1e3a5f;--ci-text:#93c5fd;--merged-bg:#78350f;--merged-text:#fde68a;
+  --tag-bg:#1e3a5f;--tag-text:#93c5fd;--type-bg:#2e1065;--type-text:#c4b5fd;
+  --net-2xx-bg:#065f46;--net-2xx-text:#6ee7b7;--net-3xx-bg:#78350f;--net-3xx-text:#fde68a;
+  --net-4xx-bg:#7f1d1d;--net-4xx-text:#fca5a5;--net-5xx-bg:#7f1d1d;--net-5xx-text:#fca5a5;
+  --net-0-bg:#334155;--net-0-text:#94a3b8;
+  --passed-left:#22c55e;--failed-left:#ef4444;
+  --failure-msg-bg:#e2e8f0;
+}
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
-  color:#171717;background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
+  color:var(--text-primary);background:var(--bg-primary);line-height:1.6;-webkit-font-smoothing:antialiased;
+  transition:background-color .15s ease,color .15s ease}
 .container{max-width:1100px;margin:0 auto;padding:24px 20px}
 /* Header */
 .header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
 .header svg{flex-shrink:0}
-.header h1{font-size:22px;font-weight:700;color:#171717}
-.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:#6b7280;margin-bottom:20px}
+.header h1{font-size:22px;font-weight:700;color:var(--text-primary)}
+.meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--text-secondary);margin-bottom:20px}
 .meta-item{display:flex;align-items:center;gap:4px}
-.meta-label{font-weight:600;color:#374151}
+.meta-label{font-weight:600;color:var(--text-strong)}
 .run-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
-  background:#f3f4f6;padding:2px 8px;border-radius:4px}
-.ci-badge{display:inline-flex;align-items:center;gap:4px;background:#eff6ff;
-  color:#1d4ed8;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}
-.merged-badge{background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:4px;
+  background:var(--bg-tertiary);padding:2px 8px;border-radius:4px}
+.ci-badge{display:inline-flex;align-items:center;gap:4px;background:var(--ci-bg);
+  color:var(--ci-text);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}
+.merged-badge{background:var(--merged-bg);color:var(--merged-text);padding:2px 8px;border-radius:4px;
   font-size:12px;font-weight:500}
+/* Theme Toggle */
+.theme-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
+  border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);
+  color:var(--text-secondary);cursor:pointer;margin-left:auto;flex-shrink:0;
+  transition:background .15s,border-color .15s,color .15s}
+.theme-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-hover)}
+.theme-toggle svg{width:16px;height:16px}
 /* Summary Cards */
 .summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:28px}
-.summary-card{border-radius:10px;padding:16px;text-align:center;border:1px solid #e5e7eb}
+.summary-card{border-radius:10px;padding:16px;text-align:center;border:1px solid var(--border)}
 .summary-card .count{font-size:32px;font-weight:800;line-height:1.1}
-.summary-card .label{font-size:13px;font-weight:500;color:#6b7280;margin-top:2px}
-.card-passed{border-color:#bbf7d0;background:#f0fdf4}.card-passed .count{color:#16a34a}
-.card-failed{border-color:#fecaca;background:#fef2f2}.card-failed .count{color:#dc2626}
-.card-flaky{border-color:#fde68a;background:#fffbeb}.card-flaky .count{color:#d97706}
-.card-skipped{border-color:#e5e7eb;background:#f9fafb}.card-skipped .count{color:#6b7280}
-.card-total{border-color:#c7d2fe;background:#eef2ff}.card-total .count{color:#4f46e5}
+.summary-card .label{font-size:13px;font-weight:500;color:var(--text-secondary);margin-top:2px}
+.card-passed{border-color:var(--passed-border);background:var(--passed-card-bg)}.card-passed .count{color:var(--passed-count)}
+.card-failed{border-color:var(--failed-border);background:var(--failed-card-bg)}.card-failed .count{color:var(--failed-count)}
+.card-flaky{border-color:var(--flaky-border);background:var(--flaky-card-bg)}.card-flaky .count{color:var(--flaky-count)}
+.card-skipped{border-color:var(--border);background:var(--skipped-card-bg)}.card-skipped .count{color:var(--skipped-text)}
+.card-total{border-color:var(--total-border);background:var(--total-bg)}.card-total .count{color:var(--total-count)}
+.card-timedout{border-color:var(--timedout-bg);background:var(--timedout-card-bg)}.card-timedout .count{color:var(--timedout-count)}
 /* Timeline */
 .timeline{display:flex;flex-direction:column;gap:8px}
-.timeline-entry{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;
-  border-left:4px solid #e5e7eb;transition:border-color .15s}
-.timeline-entry:hover{border-color:#d1d5db}
-.timeline-entry--has-failures{border-left-color:#ef4444}
+.timeline-entry{border:1px solid var(--border);border-radius:10px;overflow:hidden;
+  border-left:4px solid var(--border);transition:border-color .15s}
+.timeline-entry:hover{border-color:var(--border-hover)}
+.timeline-entry--all-passed{border-left-color:var(--passed-left)}
+.timeline-entry--all-passed:hover{border-color:#86efac}
+.timeline-entry--has-failures{border-left-color:var(--failed-left)}
 .timeline-entry--has-failures:hover{border-color:#fca5a5}
 .timeline-header{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;
-  user-select:none;background:#fafafa;transition:background .15s}
-.timeline-header:hover{background:#f3f4f6}
-.chevron{width:16px;height:16px;flex-shrink:0;transition:transform .2s;color:#9ca3af}
+  user-select:none;background:var(--bg-secondary);transition:background .15s}
+.timeline-header:hover{background:var(--bg-tertiary)}
+.chevron{width:16px;height:16px;flex-shrink:0;transition:transform .2s;color:var(--text-muted)}
 .timeline-entry.expanded .chevron{transform:rotate(90deg)}
-.timeline-url{font-size:14px;font-weight:600;color:#171717;overflow:hidden;
+.timeline-url{font-size:14px;font-weight:600;color:var(--text-primary);overflow:hidden;
   text-overflow:ellipsis;white-space:nowrap;max-width:500px;min-width:0}
 .nav-type-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:9999px;
   white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;flex-shrink:0}
-.badge-goto,.badge-navigation,.badge-page_load{background:#d1fae5;color:#065f46}
-.badge-back,.badge-forward{background:#dbeafe;color:#1e40af}
-.badge-spa_route,.badge-spa_replace,.badge-hash_change,.badge-popstate{background:#ede9fe;color:#5b21b6}
-.badge-link_click,.badge-form_submit{background:#fce7f3;color:#9d174d}
+.badge-goto{background:#dbeafe;color:#1e40af}
+.badge-navigation{background:#e0e7ff;color:#3730a3}
+.badge-page_load{background:#c7d2fe;color:#312e81}
+.badge-back{background:#cffafe;color:#155e75}
+.badge-forward{background:#a5f3fc;color:#164e63}
+.badge-spa_route{background:#ede9fe;color:#5b21b6}
+.badge-spa_replace{background:#ddd6fe;color:#4c1d95}
+.badge-hash_change{background:#fae8ff;color:#86198f}
+.badge-popstate{background:#f5d0fe;color:#701a75}
+.badge-link_click{background:#fce7f3;color:#9d174d}
+.badge-form_submit{background:#fbcfe8;color:#831843}
 .badge-redirect{background:#ffedd5;color:#9a3412}
 .badge-refresh{background:#e0f2fe;color:#075985}
-.badge-dummy,.badge-fallback,.badge-manual_record{background:#f3f4f6;color:#6b7280}
-.timeline-info{display:flex;align-items:center;gap:8px;font-size:12px;color:#6b7280;
+.badge-dummy{background:var(--bg-tertiary);color:var(--text-secondary)}
+.badge-fallback{background:var(--border);color:var(--text-strong)}
+.badge-manual_record{background:#fef9c3;color:#854d0e}
+.timeline-info{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);
   margin-left:auto;flex-shrink:0;white-space:nowrap}
 .spec-file{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
-  color:#6b7280;background:#f3f4f6;padding:1px 6px;border-radius:3px}
-.timeline-content{display:none;padding:0 16px 16px;border-top:1px solid #f3f4f6}
+  color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 6px;border-radius:3px}
+.timeline-content{display:none;padding:0 16px 16px;border-top:1px solid var(--border-light)}
 .timeline-entry.expanded .timeline-content{display:block}
 /* Test Cards */
 .tests-section{margin-top:12px}
-.spec-summary{font-size:12px;color:#6b7280;margin-bottom:8px;display:flex;gap:12px;flex-wrap:wrap}
+.spec-summary{font-size:12px;color:var(--text-secondary);margin-bottom:8px;display:flex;gap:12px;flex-wrap:wrap}
 .spec-summary span{font-weight:600}
-.spec-passed{color:#16a34a}.spec-failed{color:#dc2626}.spec-flaky{color:#d97706}
-.test-card{display:flex;align-items:flex-start;gap:8px;padding:8px 0;
-  border-bottom:1px solid #f3f4f6}
+.spec-passed{color:var(--passed-count)}.spec-failed{color:var(--failed-count)}.spec-flaky{color:var(--flaky-count)}
+.test-card{padding:8px 0;border-bottom:1px solid var(--border-light)}
 .test-card:last-child{border-bottom:none}
+.test-card-row{display:flex;align-items:flex-start;gap:8px}
 .status-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:9999px;
   flex-shrink:0;margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
-.status-passed{background:#d1fae5;color:#065f46}
-.status-failed{background:#fecaca;color:#991b1b}
-.status-flaky{background:#fde68a;color:#92400e}
+.status-passed{background:var(--passed-bg);color:var(--passed-text)}
+.status-failed{background:var(--failed-bg);color:var(--failed-text)}
+.status-flaky{background:var(--flaky-bg);color:var(--flaky-text)}
+.status-skipped{background:var(--skipped-bg);color:var(--skipped-text)}
+.status-timedout{background:var(--timedout-bg);color:var(--timedout-text)}
+.type-badge{background:var(--type-bg);color:var(--type-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
+.flaky-badge{background:var(--flaky-card-bg);color:var(--flaky-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
+.file-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--text-secondary)}
+.suite-name{font-size:11px;color:var(--text-muted)}
+.status-mismatch{font-size:10px;color:var(--failed-count);font-weight:600}
 .test-info{flex:1;min-width:0}
-.test-title{font-size:13px;color:#171717;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.test-meta{display:flex;gap:8px;align-items:center;margin-top:2px;font-size:11px;color:#9ca3af}
-.retry-badge{background:#fef3c7;color:#92400e;padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
-.tag-badge{background:#eff6ff;color:#1d4ed8;padding:1px 5px;border-radius:3px;font-size:10px}
-.test-duration{font-size:12px;color:#9ca3af;flex-shrink:0;margin-top:2px}
+.test-title{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.test-meta{display:flex;gap:8px;align-items:center;margin-top:2px;font-size:11px;color:var(--text-muted)}
+.retry-badge{background:var(--flaky-card-bg);color:var(--flaky-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
+.tag-badge{background:var(--tag-bg);color:var(--tag-text);padding:1px 5px;border-radius:3px;font-size:10px}
+.meta-prefix{font-size:10px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
+.test-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
+  color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 6px;border-radius:3px}
+.network-panel--has-failures{border-color:var(--failed-border)}
+.network-panel--has-failures .network-header{background:var(--failed-card-bg);color:var(--failed-text)}
+.failed-requests-banner{display:flex;align-items:center;gap:6px;padding:8px 12px;
+  background:var(--failed-card-bg);color:var(--failed-text);font-size:12px;font-weight:600;border-top:1px solid var(--failed-border)}
+.failed-urls-list{padding:6px 12px;background:var(--failed-card-bg);border-top:1px solid var(--failed-border);font-size:11px;
+  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;max-height:200px;overflow-y:auto}
+.failed-url-item{padding:2px 0;color:var(--failed-text);word-break:break-all}
+.failed-url-status{font-weight:700;margin-right:4px}
+.test-duration{font-size:12px;color:var(--text-muted);flex-shrink:0;margin-top:2px}
+/* Tab Bar */
+.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-top:8px}
+.tab-btn{padding:8px 16px;font-size:12px;font-weight:500;color:var(--text-secondary);background:none;
+  border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;
+  transition:color .15s,border-color .15s}
+.tab-btn:hover{color:var(--text-strong)}
+.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
+.tab-panel{display:none;padding:12px 0}
+.tab-panel.active{display:block}
+.tab-empty-state{text-align:center;padding:24px 16px;color:var(--text-muted);font-size:13px;font-style:italic}
 /* Failure Details */
-.failure-toggle{font-size:12px;color:#03b79c;cursor:pointer;margin-top:4px;
+.failure-toggle{font-size:12px;color:var(--accent);cursor:pointer;margin-top:4px;
   border:none;background:none;padding:0;text-decoration:underline;font-family:inherit}
-.failure-toggle:hover{color:#028a75}
+.failure-toggle:hover{color:var(--accent-hover)}
 .failure-details{display:none;margin-top:8px;border-radius:8px;overflow:hidden;
-  border:1px solid #e5e7eb}
+  border:1px solid var(--border)}
 .failure-details.show{display:block}
-.failure-message{padding:12px;background:#171717;color:#f8f8f8;font-size:12px;
+.failure-message{padding:12px;background:var(--bg-code);color:var(--failure-msg-bg);font-size:12px;
   font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
   word-break:break-word;line-height:1.5;overflow-x:auto}
-.code-snippet{background:#1e1e1e;padding:0;font-size:12px;
+.code-snippet{background:var(--bg-code);padding:0;font-size:12px;
   font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
 .code-line{display:flex;padding:0 12px;line-height:1.7}
-.code-line.highlight{background:rgba(239,68,68,.2)}
-.line-num{color:#6b7280;min-width:40px;text-align:right;padding-right:12px;
+.code-line.highlight{background:var(--bg-code-highlight)}
+.line-num{color:var(--text-secondary);min-width:40px;text-align:right;padding-right:12px;
   user-select:none;flex-shrink:0}
-.line-code{color:#d4d4d4;white-space:pre;overflow-x:auto}
-.stack-toggle{font-size:11px;color:#6b7280;cursor:pointer;padding:8px 12px;
-  border:none;background:#f9fafb;width:100%;text-align:left;font-family:inherit;
-  border-top:1px solid #e5e7eb}
-.stack-toggle:hover{background:#f3f4f6;color:#374151}
-.stack-trace{display:none;padding:12px;background:#fafafa;font-size:11px;
+.line-code{color:var(--bg-code-text);white-space:pre;overflow-x:auto}
+.stack-toggle{font-size:11px;color:var(--text-secondary);cursor:pointer;padding:8px 12px;
+  border:none;background:var(--bg-secondary);width:100%;text-align:left;font-family:inherit;
+  border-top:1px solid var(--border)}
+.stack-toggle:hover{background:var(--bg-tertiary);color:var(--text-strong)}
+.stack-trace{display:none;padding:12px;background:var(--bg-secondary);font-size:11px;
   font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
-  word-break:break-word;color:#6b7280;border-top:1px solid #e5e7eb;max-height:300px;overflow-y:auto}
+  word-break:break-word;color:var(--text-secondary);border-top:1px solid var(--border);max-height:300px;overflow-y:auto}
 .stack-trace.show{display:block}
 /* Network Panel */
-.network-panel{margin-top:16px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}
-.network-header{font-size:12px;font-weight:600;color:#374151;padding:10px 12px;
-  background:#f9fafb;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;gap:6px}
+.network-panel{margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
+.network-header{font-size:12px;font-weight:600;color:var(--text-strong);padding:10px 12px;
+  background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
 .network-summary{display:flex;gap:16px;padding:10px 12px;font-size:12px;flex-wrap:wrap}
 .net-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
-.net-stat .val{font-weight:700;font-size:14px;color:#171717}
-.net-stat .lbl{color:#9ca3af;font-size:11px}
-.net-stat.has-failed .val{color:#dc2626}
-.resource-breakdown{display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;border-top:1px solid #f3f4f6}
+.net-stat .val{font-weight:700;font-size:14px;color:var(--text-primary)}
+.net-stat .lbl{color:var(--text-muted);font-size:11px}
+.net-stat.has-failed .val{color:var(--failed-count)}
+.resource-breakdown{display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;border-top:1px solid var(--border-light)}
 .resource-type{display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;
-  border-radius:4px;background:#f3f4f6;color:#374151}
+  border-radius:4px;background:var(--bg-tertiary);color:var(--text-strong)}
 .resource-type .rt-count{font-weight:700}
 .resource-type--zero{opacity:.45}
 /* Empty State */
-.empty-state{text-align:center;padding:60px 20px;color:#9ca3af}
+.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
 .empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.4}
 .empty-state p{font-size:15px;font-weight:500}
 /* No-network */
-.no-network{font-size:12px;color:#9ca3af;padding:10px 12px;font-style:italic}
+.no-network{font-size:12px;color:var(--text-muted);padding:10px 12px;font-style:italic}
 /* Section title */
-.section-title{font-size:16px;font-weight:700;color:#171717;margin-bottom:12px;
+.section-title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:12px;
   display:flex;align-items:center;gap:8px}
-.section-title::before{content:'';width:4px;height:18px;background:#03b79c;border-radius:2px}
+.section-title::before{content:'';width:4px;height:18px;background:var(--accent);border-radius:2px}
+/* Artifacts Panel */
+.artifacts-panel{margin-top:10px;padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border);
+  border-radius:8px}
+.artifacts-panel-header{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
+  color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
+.artifacts-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
+/* Screenshot */
+.artifact-screenshot-wrap{display:flex;flex-direction:column;gap:4px;margin:8px 0}
+.artifact-thumbnail{width:100%;max-width:100%;height:auto;border-radius:8px;cursor:pointer;
+  border:1px solid var(--border);transition:border-color .15s,box-shadow .15s;display:block}
+.artifact-thumbnail:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-ring)}
+.artifact-label{font-size:10px;color:var(--text-muted);text-align:center}
+/* Video */
+.artifact-video-inline{margin:8px 0}
+.artifact-video-player{display:block;width:100%;max-width:100%;height:auto;border-radius:8px;
+  border:1px solid var(--border);background:#000}
+/* Lightbox */
+.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;
+  display:flex;align-items:center;justify-content:center;cursor:zoom-out}
+.lightbox-overlay img{max-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.4)}
+.lightbox-close{position:fixed;top:16px;right:16px;z-index:1001;width:36px;height:36px;
+  border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:20px;
+  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
+.lightbox-close:hover{background:rgba(255,255,255,.3)}
+/* Detailed Network Logs */
+.network-log{margin-top:4px}
+.network-log-summary{display:flex;gap:12px;align-items:center;font-size:12px;margin-bottom:8px}
+.net-log-count{font-weight:600;color:var(--text-strong)}
+.net-log-failed{font-weight:600;color:var(--failed-count)}
+.network-entry{border-bottom:1px solid var(--border-light)}
+.network-entry:last-child{border-bottom:none}
+.network-entry--failed{border-left:3px solid var(--failed-count)}
+.network-entry-row{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;
+  font-size:12px;transition:background .1s}
+.network-entry-row:hover{background:var(--bg-secondary)}
+.network-entry-row.expanded .net-chevron{transform:rotate(90deg)}
+.net-status-badge{font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;
+  min-width:36px;text-align:center;flex-shrink:0}
+.net-status-2xx{background:var(--net-2xx-bg);color:var(--net-2xx-text)}
+.net-status-3xx{background:var(--net-3xx-bg);color:var(--net-3xx-text)}
+.net-status-4xx{background:var(--net-4xx-bg);color:var(--net-4xx-text)}
+.net-status-5xx{background:var(--net-5xx-bg);color:var(--net-5xx-text);font-weight:800}
+.net-status-0{background:var(--net-0-bg);color:var(--net-0-text)}
+.net-method{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
+  font-size:11px;color:var(--text-strong);flex-shrink:0;min-width:40px}
+.net-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
+  color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
+.net-time{font-size:11px;color:var(--text-muted);flex-shrink:0;text-align:right;min-width:48px}
+.net-chevron{flex-shrink:0;color:var(--text-muted);transition:transform .2s}
+.network-entry-details{display:none;padding:8px 0 12px;border-top:1px solid var(--border-light)}
+.network-entry-details.show{display:block}
+.net-section-title{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;
+  letter-spacing:.04em;margin:8px 0 4px;padding-top:4px}
+.net-section-title:first-child{margin-top:0}
+.net-headers-table{width:100%;font-size:11px;border-collapse:collapse}
+.net-headers-table td{padding:2px 8px;vertical-align:top;border-bottom:1px solid var(--border-light)}
+.net-header-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;
+  color:var(--text-strong);white-space:nowrap;width:180px}
+.net-header-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary);
+  word-break:break-all}
+.net-truncated-note{font-size:10px;color:var(--flaky-count);font-style:italic;margin-top:2px}
+/* Code Editor */
+.code-editor{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:4px 0}
+.code-editor-toolbar{display:flex;align-items:center;justify-content:space-between;
+  padding:4px 8px 4px 12px;background:var(--bg-tertiary);border-bottom:1px solid var(--border);min-height:28px}
+.code-editor-lang{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
+  color:var(--text-muted);text-transform:lowercase}
+.code-editor-copy{font-size:11px;font-family:inherit;padding:2px 10px;border-radius:4px;
+  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);
+  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
+.code-editor-copy:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
+.code-editor-copy.copied{background:var(--passed-bg);color:var(--passed-text);border-color:var(--passed-border)}
+.code-editor-body{display:flex;background:var(--bg-code);max-height:300px;overflow:auto}
+.code-editor-lines{display:flex;flex-direction:column;padding:8px 0;
+  border-right:1px solid var(--border);flex-shrink:0;user-select:none;position:sticky;left:0;
+  background:var(--bg-code);z-index:1}
+.code-editor-line-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
+  color:var(--text-muted);text-align:right;padding:0 10px 0 12px;line-height:1.6;min-width:40px}
+.code-editor-content{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
+  color:var(--bg-code-text);padding:8px 12px;margin:0;white-space:pre;line-height:1.6;flex:1;
+  overflow-x:visible;tab-size:2}
+.net-binary-note{font-size:11px;color:var(--text-muted);font-style:italic;padding:4px 0}
+.net-empty-note{font-size:11px;color:var(--text-muted);font-style:italic;padding:2px 0}
+.net-error-msg{font-size:12px;color:var(--failed-count);font-weight:600;padding:4px 0;margin-bottom:4px}
+/* Filter Bar */
+.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px;
+  padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px}
+.filter-section{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
+.filter-section-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;
+  letter-spacing:.04em;margin-right:2px}
+.filter-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:9999px;
+  font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--bg-card);
+  color:var(--text-secondary);cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s}
+.filter-chip:hover{border-color:var(--accent);color:var(--text-primary)}
+.filter-chip--active{background:var(--accent);color:#fff;border-color:var(--accent)}
+.filter-chip--active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
+.filter-chip--dimmed{opacity:.45}
+.filter-chip-count{font-size:11px;font-weight:600}
+.filter-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
+.filter-clear{padding:4px 12px;border-radius:9999px;font-size:12px;font-weight:500;
+  border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
+  cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
+.filter-clear:hover{background:var(--failed-bg);color:var(--failed-text);border-color:var(--failed-border)}
+.filter-indicator{font-size:12px;color:var(--text-secondary);font-weight:500}
+.filter-indicator span{font-weight:700;color:var(--text-primary)}
+.filter-hidden{display:none!important}
+.filter-empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}
+.filter-empty-state p{font-size:14px;margin-bottom:12px}
+.filter-empty-state button{padding:6px 16px;border-radius:9999px;font-size:13px;font-weight:500;
+  border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;
+  font-family:inherit;transition:background .15s,color .15s}
+.filter-empty-state button:hover{background:var(--accent);color:#fff}
+/* Reduced Motion */
+@media(prefers-reduced-motion:reduce){
+  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
+}
 `;
-var JS = `
-(function(){
-  var data=JSON.parse(document.getElementById('report-data').textContent);
 
-  function esc(s){if(!s)return '';return s.replace(/&/g,'&amp;').replace(/</g,'&lt;')
-    .replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}
-  function stripAnsi(s){return s?s.replace(/\\u001b\\[[0-9;]*m/g,'').replace(/\\x1b\\[[0-9;]*m/g,''):''}
-  function fmtDur(ms){if(ms<1000)return Math.round(ms)+'ms';
-    if(ms<60000)return (ms/1000).toFixed(1)+'s';
-    var m=Math.floor(ms/60000),s=Math.round((ms%60000)/1000);
-    return s>0?m+'m '+s+'s':m+'m'}
-  function fmtBytes(b){if(b===0)return '0 B';if(b<1024)return b+' B';
-    if(b<1048576)return (b/1024).toFixed(1)+' KB';return (b/1048576).toFixed(1)+' MB'}
-  function fmtTime(iso){try{return new Date(iso).toLocaleString()}catch(e){return iso}}
+// src/html-js-render.ts
+var JS_RENDER = `
+function esc(s){if(!s)return '';return s.replace(/&/g,'&amp;').replace(/</g,'&lt;')
+  .replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}
+function stripAnsi(s){return s?s.replace(/\\u001b\\[[0-9;]*m/g,'').replace(/\\x1b\\[[0-9;]*m/g,''):''}
+function fmtDur(ms){if(ms<1000)return Math.round(ms)+'ms';
+  if(ms<60000)return (ms/1000).toFixed(1)+'s';
+  var m=Math.floor(ms/60000),s=Math.round((ms%60000)/1000);
+  return s>0?m+'m '+s+'s':m+'m'}
+function fmtBytes(b){if(b===0)return '0 B';if(b<1024)return b+' B';
+  if(b<1048576)return (b/1024).toFixed(1)+' KB';return (b/1048576).toFixed(1)+' MB'}
+function fmtTime(iso){try{return new Date(iso).toLocaleString()}catch(e){return iso}}
+
+function renderCodeSnippet(code,failLine){
+  var lines=code.split('\\n');
+  var out='<div class="code-snippet">';
+  for(var k=0;k<lines.length;k++){
+    var raw=lines[k];
+    var numMatch=raw.match(/^\\s*(>?\\s*)(\\d+)\\s*\\|/);
+    var lineNum=numMatch?numMatch[2]:'';
+    var isHighlight=raw.trimStart().startsWith('>');
+    var codePart=raw.replace(/^\\s*>?\\s*\\d+\\s*\\|/,'');
+    out+='<div class="code-line'+(isHighlight?' highlight':'')+'">';
+    out+='<span class="line-num">'+esc(lineNum)+'</span>';
+    out+='<span class="line-code">'+esc(codePart)+'</span>';
+    out+='</div>';
+  }
+  out+='</div>';
+  return out;
+}
+
+function renderNetwork(stats){
+  if(!stats)return '<div class="no-network">No network data captured</div>';
+  var hasFailedReqs=stats.failedRequests>0;
+  var out='<div class="network-panel'+(hasFailedReqs?' network-panel--has-failures':'')+'">';
+  out+='<div class="network-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Network</div>';
+  out+='<div class="network-summary">';
+  out+='<div class="net-stat"><span class="val">'+stats.totalRequests+'</span><span class="lbl">Requests</span></div>';
+  out+='<div class="net-stat'+(hasFailedReqs?' has-failed':'')+'"><span class="val">'+stats.failedRequests+'</span><span class="lbl">Failed</span></div>';
+  out+='<div class="net-stat"><span class="val">'+fmtBytes(stats.totalBytes)+'</span><span class="lbl">Transferred</span></div>';
+  out+='</div>';
+  if(hasFailedReqs){out+='<div class="failed-requests-banner"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v2m0 4h.01M10.29 3.86l-8.58 14.6A2 2 0 003.44 21h17.12a2 2 0 001.73-2.54l-8.58-14.6a2 2 0 00-3.42 0z"/></svg>'+stats.failedRequests+' network request'+(stats.failedRequests>1?'s':'')+' failed</div>';
+    if(stats.failedRequestUrls&&stats.failedRequestUrls.length>0){out+='<div class="failed-urls-list">';for(var fi=0;fi<stats.failedRequestUrls.length;fi++){var furl=stats.failedRequestUrls[fi];var spIdx=furl.indexOf(' ');var fStatus=spIdx>0?furl.substring(0,spIdx):'';var fPath=spIdx>0?furl.substring(spIdx+1):furl;out+='<div class="failed-url-item"><span class="failed-url-status">'+esc(fStatus)+'</span>'+esc(fPath)+'</div>';}out+='</div>';}
+  }
+  if(stats.byType){
+    var types=[['XHR','xhr'],['Document','document'],['Script','script'],['Stylesheet','stylesheet'],['Image','image'],['Font','font'],['Other','other']];
+    out+='<div class="resource-breakdown">';
+    for(var ti=0;ti<types.length;ti++){
+      var cnt=stats.byType[types[ti][1]]||0;
+      out+='<div class="resource-type'+(cnt===0?' resource-type--zero':'')+'"><span class="rt-count">'+cnt+'</span> '+types[ti][0]+'</div>';
+    }
+    out+='</div>';
+  }
+  out+='</div>';
+  return out;
+}
 
+(function(){
+  var data=JSON.parse(document.getElementById('report-data').textContent);
   var app=document.getElementById('app');
+  var _testIdx=0;
 
   // Header
-  var h='<div class="header">__LOGO_SVG__<h1>TestRelic Report</h1></div>';
+  var h='<div class="header">__LOGO_SVG__<h1>TestRelic Report</h1>';
+  h+='<button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme" id="theme-toggle">';
+  h+='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="theme-icon-light"><path d="M21 12.79A9 9 0 1111.21 3a7 7 0 009.79 9.79z"/></svg>';
+  h+='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="theme-icon-dark" style="display:none"><circle cx="12" cy="12" r="5"/><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>';
+  h+='</button></div>';
   h+='<div class="meta">';
   h+='<div class="meta-item"><span class="meta-label">Run ID</span><span class="run-id">'+esc(data.testRunId)+'</span></div>';
   h+='<div class="meta-item"><span class="meta-label">Started</span>'+fmtTime(data.startedAt)+'</div>';
@@ -311,10 +568,15 @@ var JS = `
   h+='<div class="summary-card card-failed"><div class="count">'+s.failed+'</div><div class="label">Failed</div></div>';
   h+='<div class="summary-card card-flaky"><div class="count">'+s.flaky+'</div><div class="label">Flaky</div></div>';
   h+='<div class="summary-card card-skipped"><div class="count">'+s.skipped+'</div><div class="label">Skipped</div></div>';
+  if(s.timedout!==undefined){h+='<div class="summary-card card-timedout"><div class="count">'+s.timedout+'</div><div class="label">Timed Out</div></div>';}
   h+='</div>';
 
+  // Filter bar
+  h+=renderFilterBar(data);
+
   // Timeline
   h+='<div class="section-title">Navigation Timeline</div>';
+  h+='<div class="filter-empty-state" id="filter-empty" style="display:none"><p>No tests match the current filters</p><button onclick="clearAllFilters()">Clear all filters</button></div>';
   if(data.timeline.length===0){
     h+='<div class="empty-state">__LOGO_SVG__<p>No test data recorded</p></div>';
   }else{
@@ -322,8 +584,10 @@ var JS = `
     for(var i=0;i<data.timeline.length;i++){
       var e=data.timeline[i];
       var hasFail=e.tests.some(function(t){return t.status==='failed'});
-      var cls='timeline-entry'+(hasFail?' timeline-entry--has-failures':'');
-      h+='<div class="'+cls+'" data-idx="'+i+'">';
+      var allPassed=!hasFail&&e.tests.length>0&&e.tests.every(function(t){return t.status==='passed'||t.status==='flaky'});
+      var cls='timeline-entry'+(hasFail?' timeline-entry--has-failures':'')+(allPassed?' timeline-entry--all-passed':'');
+      var _ss={},_ts={},_sp={};e.tests.forEach(function(t){_ss[t.status]=1;_ts[t.testType||'unknown']=1;if(t.filePath)_sp[t.filePath]=1;else if(e.specFile)_sp[e.specFile]=1});
+      h+='<div class="'+cls+'" data-idx="'+i+'" data-statuses="'+Object.keys(_ss).join(',')+'" data-types="'+Object.keys(_ts).join(',')+'" data-specs="'+esc(Object.keys(_sp).join(','))+'">';
       h+='<div class="timeline-header" onclick="toggleEntry(this)">';
       h+='<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
       h+='<span class="timeline-url" title="'+esc(e.url)+'">'+esc(e.url)+'</span>';
@@ -334,7 +598,7 @@ var JS = `
       h+='<span>'+fmtDur(e.duration)+'</span>';
       h+='</div></div>';
       h+='<div class="timeline-content">';
-      h+=renderTests(e.tests);
+      h+=renderTests(e.tests,e.networkStats);
       h+=renderNetwork(e.networkStats);
       h+='</div></div>';
     }
@@ -342,118 +606,523 @@ var JS = `
   }
 
   app.innerHTML=h;
+  if(typeof initTheme==='function')initTheme();
+  if(typeof initFilters==='function')initFilters(data);
 
-  function renderTests(tests){
+  function renderTests(tests,networkStats){
     if(!tests||tests.length===0)return '';
     var out='<div class="tests-section">';
-    // Spec summary
-    var pc=0,fc=0,fkc=0;
-    tests.forEach(function(t){if(t.status==='passed')pc++;else if(t.status==='failed')fc++;else if(t.status==='flaky')fkc++});
+    var pc=0,fc=0,fkc=0,sc=0,toc=0;
+    tests.forEach(function(t){if(t.status==='passed')pc++;else if(t.status==='failed')fc++;else if(t.status==='flaky')fkc++;else if(t.status==='skipped')sc++;else if(t.status==='timedout')toc++});
     out+='<div class="spec-summary">';
     if(pc>0)out+='<span class="spec-passed">'+pc+' passed</span>';
     if(fc>0)out+='<span class="spec-failed">'+fc+' failed</span>';
     if(fkc>0)out+='<span class="spec-flaky">'+fkc+' flaky</span>';
+    if(sc>0)out+='<span style="color:#6b7280;font-weight:600">'+sc+' skipped</span>';
+    if(toc>0)out+='<span style="color:#ea580c;font-weight:600">'+toc+' timed out</span>';
     out+='</div>';
     for(var j=0;j<tests.length;j++){
-      var t=tests[j];
-      out+='<div class="test-card">';
-      out+='<span class="status-badge status-'+t.status+'">'+t.status+'</span>';
-      out+='<div class="test-info">';
-      out+='<div class="test-title" title="'+esc(t.title)+'">'+esc(t.title)+'</div>';
-      out+='<div class="test-meta">';
-      if(t.retryCount>0)out+='<span class="retry-badge">'+t.retryCount+' retries</span>';
-      if(t.tags)t.tags.forEach(function(tag){if(tag)out+='<span class="tag-badge">'+esc(tag)+'</span>'});
-      out+='</div>';
-      if((t.status==='failed'||t.status==='flaky')&&t.failure){
-        var fid='fail-'+Math.random().toString(36).substr(2,9);
-        out+='<button class="failure-toggle" onclick="toggleFail(\\''+fid+'\\')">Show details</button>';
-        out+='<div class="failure-details" id="'+fid+'">';
-        out+='<div class="failure-message">'+esc(stripAnsi(t.failure.message))+'</div>';
-        if(t.failure.code){
-          out+=renderCodeSnippet(t.failure.code,t.failure.line);
-        }
-        if(t.failure.line!==null){
-          out+='<div style="padding:4px 12px;font-size:11px;color:#9ca3af;background:#f9fafb">Line '+t.failure.line+'</div>';
-        }
-        if(t.failure.stack){
-          var sid='stack-'+Math.random().toString(36).substr(2,9);
-          out+='<button class="stack-toggle" onclick="toggleStack(\\''+sid+'\\')">Show stack trace</button>';
-          out+='<div class="stack-trace" id="'+sid+'">'+esc(stripAnsi(t.failure.stack))+'</div>';
-        }
-        out+='</div>';
-      } else if(t.status==='failed'&&!t.failure){
-        out+='<div style="margin-top:4px;font-size:12px;color:#9ca3af;font-style:italic">No diagnostic information available</div>';
-      }
-      out+='</div>';
-      out+='<span class="test-duration">'+fmtDur(t.duration)+'</span>';
-      out+='</div>';
+      out+=renderTestCard(tests[j],_testIdx++,networkStats);
     }
     out+='</div>';
     return out;
   }
 
-  function renderCodeSnippet(code,failLine){
-    var lines=code.split('\\n');
-    var out='<div class="code-snippet">';
-    for(var k=0;k<lines.length;k++){
-      var raw=lines[k];
-      var numMatch=raw.match(/^\\s*(>?\\s*)(\\d+)\\s*\\|/);
-      var lineNum=numMatch?numMatch[2]:'';
-      var isHighlight=raw.trimStart().startsWith('>');
-      var codePart=raw.replace(/^\\s*>?\\s*\\d+\\s*\\|/,'');
-      out+='<div class="code-line'+(isHighlight?' highlight':'')+'">';
-      out+='<span class="line-num">'+esc(lineNum)+'</span>';
-      out+='<span class="line-code">'+esc(codePart)+'</span>';
-      out+='</div>';
+})();
+`;
+
+// src/html-js-tabs.ts
+var JS_TABS = `
+function renderTestCard(t,idx,networkStats){
+  var id='test-'+idx;
+  var out='<div class="test-card" id="'+id+'" data-status="'+t.status+'" data-type="'+(t.testType||'unknown')+'" data-spec="'+esc(t.filePath||'')+'">';
+  out+='<div class="test-card-row">';
+  out+='<span class="status-badge status-'+t.status+'">'+t.status+'</span>';
+  out+='<div class="test-info">';
+  out+='<div class="test-title" title="'+esc(t.title)+'">'+esc(t.title)+'</div>';
+  out+='<div class="test-meta">';
+  if(t.testType&&t.testType!=='unknown')out+='<span class="type-badge">'+esc(t.testType)+'</span>';
+  if(t.isFlaky)out+='<span class="flaky-badge">flaky</span>';
+  if(t.retryCount>0)out+='<span class="retry-badge">'+t.retryCount+' retries</span>';
+  if(t.retryStatus)out+='<span class="retry-badge">'+esc(t.retryStatus)+'</span>';
+  if(t.tags&&t.tags.length>0){out+='<span class="meta-prefix">Tags:</span>';t.tags.forEach(function(tag){if(tag)out+='<span class="tag-badge">'+esc(tag)+'</span>'});}
+  if(t.expectedStatus&&t.actualStatus&&t.expectedStatus!==t.actualStatus)out+='<span class="status-mismatch">expected: '+esc(t.expectedStatus)+' actual: '+esc(t.actualStatus)+'</span>';
+  out+='</div>';
+  if(t.testId||t.filePath||t.suiteName){out+='<div class="test-meta">';
+  if(t.testId)out+='<span class="meta-prefix">ID:</span><span class="test-id" title="Full ID: '+esc(t.testId)+'">'+esc(t.testId.substring(0,12))+'</span>';
+  if(t.filePath)out+='<span class="meta-prefix">File:</span><span class="file-path">'+esc(t.filePath)+'</span>';
+  if(t.suiteName)out+='<span class="meta-prefix">Suite:</span><span class="suite-name">'+esc(t.suiteName)+'</span>';
+  out+='</div>';}
+  out+='</div>';
+  out+='<span class="test-duration">'+fmtDur(t.duration)+'</span>';
+  out+='</div>';
+
+  // Tab bar
+  var hasScreenshot=t.artifacts&&t.artifacts.screenshot;
+  var hasVideo=t.artifacts&&t.artifacts.video;
+  var hasNetworkReqs=t.networkRequests&&t.networkRequests.length>0;
+  var hasNetworkStats=!!networkStats;
+
+  out+='<div class="tab-bar">';
+  out+='<button class="tab-btn active" data-tab="details" onclick="switchTab(\\''+id+'\\',\\'details\\')">Test Details</button>';
+  out+='<button class="tab-btn" data-tab="network" onclick="switchTab(\\''+id+'\\',\\'network\\')">Network Logs</button>';
+  out+='<button class="tab-btn" data-tab="video" onclick="switchTab(\\''+id+'\\',\\'video\\')">Video</button>';
+  out+='<button class="tab-btn" data-tab="screenshots" onclick="switchTab(\\''+id+'\\',\\'screenshots\\')">Screenshots</button>';
+  out+='</div>';
+
+  // Tab: Test Details
+  out+='<div class="tab-panel active" id="'+id+'-details">';
+  if((t.status==='failed'||t.status==='flaky')&&t.failure){
+    out+='<div class="failure-details show">';
+    out+='<div class="failure-message">'+esc(stripAnsi(t.failure.message))+'</div>';
+    if(t.failure.code){
+      out+=renderCodeSnippet(t.failure.code,t.failure.line);
+    }
+    if(t.failure.line!==null){
+      out+='<div style="padding:4px 12px;font-size:11px;color:var(--text-muted);background:var(--bg-secondary)">Line '+t.failure.line+'</div>';
+    }
+    if(t.failure.stack){
+      var sid='stack-'+Math.random().toString(36).substr(2,9);
+      out+='<button class="stack-toggle" onclick="toggleStack(\\''+sid+'\\')">Show stack trace</button>';
+      out+='<div class="stack-trace" id="'+sid+'">'+esc(stripAnsi(t.failure.stack))+'</div>';
     }
     out+='</div>';
-    return out;
+  } else if(t.status==='failed'&&!t.failure){
+    out+='<div style="margin-top:4px;font-size:12px;color:#9ca3af;font-style:italic">No diagnostic information available</div>';
+  } else {
+    out+='<div class="tab-empty-state">Test passed \u2014 no diagnostic details</div>';
   }
+  out+='</div>';
 
-  function renderNetwork(stats){
-    if(!stats)return '<div class="no-network">No network data captured</div>';
-    var out='<div class="network-panel">';
-    out+='<div class="network-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Network</div>';
-    out+='<div class="network-summary">';
-    out+='<div class="net-stat"><span class="val">'+stats.totalRequests+'</span><span class="lbl">Requests</span></div>';
-    out+='<div class="net-stat'+(stats.failedRequests>0?' has-failed':'')+'"><span class="val">'+stats.failedRequests+'</span><span class="lbl">Failed</span></div>';
-    out+='<div class="net-stat"><span class="val">'+fmtBytes(stats.totalBytes)+'</span><span class="lbl">Transferred</span></div>';
+  // Tab: Network Logs
+  out+='<div class="tab-panel" id="'+id+'-network">';
+  out+=renderNetworkLogs(t,networkStats);
+  out+='</div>';
+
+  // Tab: Video
+  out+='<div class="tab-panel" id="'+id+'-video">';
+  if(hasVideo){
+    out+='<div class="artifact-video-inline">';
+    out+='<video class="artifact-video-player" controls preload="metadata" src="'+esc(t.artifacts.video)+'"></video>';
     out+='</div>';
-    if(stats.byType){
-      var types=[['XHR','xhr'],['Document','document'],['Script','script'],['Stylesheet','stylesheet'],['Image','image'],['Font','font'],['Other','other']];
-      out+='<div class="resource-breakdown">';
-      for(var ti=0;ti<types.length;ti++){
-        var cnt=stats.byType[types[ti][1]]||0;
-        out+='<div class="resource-type'+(cnt===0?' resource-type--zero':'')+'"><span class="rt-count">'+cnt+'</span> '+types[ti][0]+'</div>';
-      }
+  } else {
+    out+='<div class="tab-empty-state">No video captured</div>';
+  }
+  out+='</div>';
+
+  // Tab: Screenshots
+  out+='<div class="tab-panel" id="'+id+'-screenshots">';
+  if(hasScreenshot){
+    out+='<div class="artifact-screenshot-wrap">';
+    out+='<img class="artifact-thumbnail" src="'+esc(t.artifacts.screenshot)+'" loading="lazy" alt="Screenshot" onclick="openLightbox(this.src)">';
+    out+='<span class="artifact-label">Click to enlarge</span>';
+    out+='</div>';
+  } else {
+    out+='<div class="tab-empty-state">No screenshot captured</div>';
+  }
+  out+='</div>';
+
+  out+='</div>';
+  return out;
+}
+`;
+
+// src/html-js-network.ts
+var JS_NETWORK = `
+function fmtBodyForEditor(body,contentType){
+  if(!body)return body;
+  if(contentType&&(contentType.indexOf('json')>=0)){
+    try{return JSON.stringify(JSON.parse(body),null,2)}catch(e){}
+  }
+  return body;
+}
+function renderCodeEditor(body,contentType,editorId){
+  if(!body)return '';
+  var formatted=fmtBodyForEditor(body,contentType);
+  var lines=formatted.split('\\n');
+  var out='<div class="code-editor" id="'+editorId+'">';
+  out+='<div class="code-editor-toolbar">';
+  out+='<span class="code-editor-lang">'+(contentType?esc(contentType.split(';')[0]):'text')+'</span>';
+  out+='<button class="code-editor-copy" onclick="copyEditorContent(\\''+editorId+'\\')">Copy</button>';
+  out+='</div>';
+  out+='<div class="code-editor-body">';
+  out+='<div class="code-editor-lines">';
+  for(var i=0;i<lines.length;i++){
+    out+='<div class="code-editor-line-num">'+(i+1)+'</div>';
+  }
+  out+='</div>';
+  out+='<pre class="code-editor-content">'+esc(formatted)+'</pre>';
+  out+='</div></div>';
+  return out;
+}
+function renderNetworkLogs(t,networkStats){
+  if(t.networkRequests&&t.networkRequests.length>0){
+    var reqs=t.networkRequests;
+    var failed=reqs.filter(function(r){return r.statusCode===0||r.statusCode>=400}).length;
+    var out='<div class="network-log">';
+    out+='<div class="network-log-summary">';
+    out+='<span class="net-log-count">'+reqs.length+' request'+(reqs.length>1?'s':'')+'</span>';
+    if(failed>0)out+='<span class="net-log-failed">'+failed+' failed</span>';
+    out+='</div>';
+    for(var i=0;i<reqs.length;i++){
+      var r=reqs[i];
+      var nid='net-'+Math.random().toString(36).substr(2,9);
+      var statusCls='net-status-'+Math.floor(r.statusCode/100)+'xx';
+      if(r.statusCode===0)statusCls='net-status-0';
+      var isFailed=r.statusCode===0||r.statusCode>=400;
+      out+='<div class="network-entry'+(isFailed?' network-entry--failed':'')+'">';
+      out+='<div class="network-entry-row" onclick="toggleNetworkEntry(\\''+nid+'\\')">';
+      out+='<span class="net-status-badge '+statusCls+'">'+(r.statusCode||'ERR')+'</span>';
+      out+='<span class="net-method">'+esc(r.method)+'</span>';
+      out+='<span class="net-url" title="'+esc(r.url)+'">'+esc(r.url)+'</span>';
+      out+='<span class="net-time">'+fmtDur(r.responseTimeMs)+'</span>';
+      out+='<svg class="net-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
       out+='</div>';
+      out+='<div class="network-entry-details" id="'+nid+'">';
+      if(r.error){
+        out+='<div class="net-error-msg">'+esc(r.error)+'</div>';
+      }
+      // Request Headers
+      if(r.requestHeaders){
+        out+='<div class="net-section-title">Request Headers</div>';
+        out+='<table class="net-headers-table">';
+        var rkeys=Object.keys(r.requestHeaders);
+        for(var j=0;j<rkeys.length;j++){
+          out+='<tr><td class="net-header-key">'+esc(rkeys[j])+'</td><td class="net-header-val">'+esc(r.requestHeaders[rkeys[j]])+'</td></tr>';
+        }
+        out+='</table>';
+      }
+      // Request Body
+      out+='<div class="net-section-title">Request Body</div>';
+      if(r.requestBody){
+        var reqEdId='req-body-'+nid;
+        var reqCt='text/plain';
+        if(r.requestHeaders){var rctKey=Object.keys(r.requestHeaders).filter(function(k){return k.toLowerCase()==='content-type'})[0];if(rctKey)reqCt=r.requestHeaders[rctKey]}
+        out+=renderCodeEditor(r.requestBody,reqCt,reqEdId);
+        if(r.requestBodyTruncated)out+='<div class="net-truncated-note">Truncated \u2014 body exceeds 10 KB</div>';
+      } else {
+        out+='<div class="net-empty-note">No request body</div>';
+      }
+      // Response Headers
+      if(r.responseHeaders){
+        out+='<div class="net-section-title">Response Headers</div>';
+        out+='<table class="net-headers-table">';
+        var hkeys=Object.keys(r.responseHeaders);
+        for(var j=0;j<hkeys.length;j++){
+          out+='<tr><td class="net-header-key">'+esc(hkeys[j])+'</td><td class="net-header-val">'+esc(r.responseHeaders[hkeys[j]])+'</td></tr>';
+        }
+        out+='</table>';
+      }
+      // Response Body
+      out+='<div class="net-section-title">Response Body</div>';
+      if(r.isBinary){
+        out+='<div class="net-binary-note">[Binary data'+(r.responseSize?' \u2014 '+fmtBytes(r.responseSize):'')+']</div>';
+      } else if(r.responseBody){
+        var respEdId='resp-body-'+nid;
+        out+=renderCodeEditor(r.responseBody,r.contentType,respEdId);
+        if(r.responseBodyTruncated)out+='<div class="net-truncated-note">Truncated \u2014 body exceeds 10 KB</div>';
+      } else {
+        out+='<div class="net-empty-note">No response body</div>';
+      }
+      out+='</div></div>';
     }
     out+='</div>';
     return out;
   }
+  if(networkStats){
+    return renderNetwork(networkStats);
+  }
+  return '<div class="tab-empty-state">No network logs captured</div>';
+}
+`;
 
-})();
-
+// src/html-js-interactions.ts
+var JS_INTERACTIONS = `
 function toggleEntry(el){el.closest('.timeline-entry').classList.toggle('expanded')}
 function toggleFail(id){document.getElementById(id).classList.toggle('show')}
 function toggleStack(id){document.getElementById(id).classList.toggle('show')}
+function openLightbox(src){var o=document.createElement('div');o.className='lightbox-overlay';
+  o.onclick=function(){closeLightbox()};o.innerHTML='<img src="'+src.replace(/"/g,'&quot;')+'" alt="Screenshot">';
+  var b=document.createElement('button');b.className='lightbox-close';b.innerHTML='&times;';
+  b.onclick=function(e){e.stopPropagation();closeLightbox()};
+  document.body.appendChild(o);document.body.appendChild(b);
+  document.addEventListener('keydown',lightboxEsc)}
+function closeLightbox(){var o=document.querySelector('.lightbox-overlay');if(o)o.remove();
+  var b=document.querySelector('.lightbox-close');if(b)b.remove();
+  document.removeEventListener('keydown',lightboxEsc)}
+function lightboxEsc(e){if(e.key==='Escape')closeLightbox()}
+function toggleVideo(id){var el=document.getElementById(id);if(!el)return;
+  var isShown=el.classList.toggle('show');
+  var btn=el.previousElementSibling;
+  if(btn)btn.textContent=isShown?'Hide video':'Show video';
+  if(!isShown){var v=el.querySelector('video');if(v)v.pause()}}
+function switchTab(testId,tabName){var card=document.getElementById(testId);if(!card)return;
+  var panels=card.querySelectorAll('.tab-panel');for(var i=0;i<panels.length;i++)panels[i].classList.remove('active');
+  var btns=card.querySelectorAll('.tab-btn');for(var i=0;i<btns.length;i++)btns[i].classList.remove('active');
+  var target=document.getElementById(testId+'-'+tabName);if(target)target.classList.add('active');
+  var clicked=card.querySelector('.tab-btn[data-tab="'+tabName+'"]');if(clicked)clicked.classList.add('active')}
+function toggleNetworkEntry(id){var el=document.getElementById(id);if(!el)return;
+  el.classList.toggle('show');
+  var row=el.previousElementSibling;
+  if(row)row.classList.toggle('expanded')}
+function copyEditorContent(editorId){var el=document.getElementById(editorId);if(!el)return;
+  var pre=el.querySelector('.code-editor-content');if(!pre)return;
+  var text=pre.textContent||'';
+  navigator.clipboard.writeText(text).then(function(){
+    var btn=el.querySelector('.code-editor-copy');if(!btn)return;
+    btn.textContent='Copied!';btn.classList.add('copied');
+    setTimeout(function(){btn.textContent='Copy';btn.classList.remove('copied')},1500)
+  }).catch(function(){})}
+function initTheme(){
+  var stored=localStorage.getItem('testrelic-theme');
+  var theme=stored||(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');
+  document.documentElement.setAttribute('data-theme',theme);
+  updateThemeIcon(theme)}
+function toggleTheme(){
+  var current=document.documentElement.getAttribute('data-theme')||'light';
+  var next=current==='dark'?'light':'dark';
+  document.documentElement.setAttribute('data-theme',next);
+  localStorage.setItem('testrelic-theme',next);
+  updateThemeIcon(next)}
+function updateThemeIcon(theme){
+  var light=document.querySelector('.theme-icon-light');
+  var dark=document.querySelector('.theme-icon-dark');
+  if(light)light.style.display=theme==='dark'?'none':'block';
+  if(dark)dark.style.display=theme==='dark'?'block':'none'}
+`;
+
+// src/html-js-filters.ts
+var JS_FILTERS = `
+var _filterState={status:{},type:{},specFile:{}};
+var _totalTests=0;
+var _originalSummary=null;
+
+function renderFilterBar(data){
+  var statusCounts={},typeCounts={},specCounts={};
+  data.timeline.forEach(function(entry){
+    entry.tests.forEach(function(t){
+      statusCounts[t.status]=(statusCounts[t.status]||0)+1;
+      var tp=t.testType||'unknown';
+      typeCounts[tp]=(typeCounts[tp]||0)+1;
+      var fp=t.filePath||entry.specFile||'';
+      if(fp)specCounts[fp]=(specCounts[fp]||0)+1;
+    });
+  });
+  var out='<div class="filter-bar" id="filter-bar">';
+
+  // Status chips
+  out+='<div class="filter-section">';
+  out+='<span class="filter-section-label">Status</span>';
+  var statuses=['passed','failed','flaky','skipped','timedout'];
+  var statusLabels={passed:'Passed',failed:'Failed',flaky:'Flaky',skipped:'Skipped',timedout:'Timed Out'};
+  for(var i=0;i<statuses.length;i++){
+    var s=statuses[i];var cnt=statusCounts[s]||0;
+    out+='<button class="filter-chip filter-chip--status'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="status" data-value="'+s+'">';
+    out+=statusLabels[s]+' <span class="filter-chip-count">('+cnt+')</span></button>';
+  }
+  out+='</div>';
+
+  // Type chips (only types present in data)
+  var types=Object.keys(typeCounts);
+  if(types.length>0){
+    out+='<div class="filter-section">';
+    out+='<span class="filter-section-label">Type</span>';
+    for(var i=0;i<types.length;i++){
+      var t=types[i];var cnt=typeCounts[t]||0;
+      out+='<button class="filter-chip filter-chip--type'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="type" data-value="'+esc(t)+'">';
+      out+=esc(t)+' <span class="filter-chip-count">('+cnt+')</span></button>';
+    }
+    out+='</div>';
+  }
+
+  // Spec file chips (only if multiple files)
+  var specs=Object.keys(specCounts).sort();
+  if(specs.length>1){
+    out+='<div class="filter-section">';
+    out+='<span class="filter-section-label">File</span>';
+    for(var i=0;i<specs.length;i++){
+      var sp=specs[i];var cnt=specCounts[sp]||0;
+      var short=sp.split('/').pop()||sp;
+      out+='<button class="filter-chip filter-chip--file'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="specFile" data-value="'+esc(sp)+'" title="'+esc(sp)+'">';
+      out+=esc(short)+' <span class="filter-chip-count">('+cnt+')</span></button>';
+    }
+    out+='</div>';
+  }
+
+  // Actions row
+  out+='<div class="filter-actions">';
+  out+='<button class="filter-clear" id="filter-clear" onclick="clearAllFilters()" style="display:none">Clear all</button>';
+  out+='<span class="filter-indicator" id="filter-indicator" style="display:none">';
+  out+='Showing <span id="filter-shown">0</span> of <span id="filter-total">0</span> tests</span>';
+  out+='</div>';
+  out+='</div>';
+  return out;
+}
+
+function initFilters(data){
+  _filterState={status:{},type:{},specFile:{}};
+  // Count from actual test cards in DOM to match filter chip counts
+  var cards=document.querySelectorAll('.test-card');
+  var byStatus={passed:0,failed:0,flaky:0,skipped:0,timedout:0};
+  for(var i=0;i<cards.length;i++){
+    var st=cards[i].getAttribute('data-status')||'';
+    if(byStatus[st]!==undefined)byStatus[st]++;
+  }
+  _totalTests=cards.length;
+  _originalSummary={total:cards.length,passed:byStatus.passed,
+    failed:byStatus.failed,flaky:byStatus.flaky,
+    skipped:byStatus.skipped,timedout:byStatus.timedout};
+  // Update summary cards to match actual test card counts
+  _updateCard('card-total',_originalSummary.total);
+  _updateCard('card-passed',_originalSummary.passed);
+  _updateCard('card-failed',_originalSummary.failed);
+  _updateCard('card-flaky',_originalSummary.flaky);
+  _updateCard('card-skipped',_originalSummary.skipped);
+  _updateCard('card-timedout',_originalSummary.timedout);
+  var el=document.getElementById('filter-total');
+  if(el)el.textContent=''+_totalTests;
+  var chips=document.querySelectorAll('.filter-chip');
+  for(var i=0;i<chips.length;i++){
+    (function(chip){
+      chip.addEventListener('click',function(){
+        var dim=chip.getAttribute('data-dimension');
+        var val=chip.getAttribute('data-value');
+        toggleFilter(dim,val);
+      });
+    })(chips[i]);
+  }
+}
+
+function toggleFilter(dim,val){
+  if(!_filterState[dim])_filterState[dim]={};
+  if(_filterState[dim][val]){
+    delete _filterState[dim][val];
+  }else{
+    _filterState[dim][val]=true;
+  }
+  var chips=document.querySelectorAll('.filter-chip[data-dimension="'+dim+'"]');
+  for(var i=0;i<chips.length;i++){
+    var cv=chips[i].getAttribute('data-value');
+    if(cv===val)chips[i].classList.toggle('filter-chip--active');
+  }
+  applyFilters();
+}
+
+function clearAllFilters(){
+  _filterState={status:{},type:{},specFile:{}};
+  var active=document.querySelectorAll('.filter-chip--active');
+  for(var i=0;i<active.length;i++)active[i].classList.remove('filter-chip--active');
+  applyFilters();
+}
+
+function applyFilters(){
+  var hasStatus=Object.keys(_filterState.status).length>0;
+  var hasType=Object.keys(_filterState.type).length>0;
+  var hasSpec=Object.keys(_filterState.specFile).length>0;
+  var hasAny=hasStatus||hasType||hasSpec;
+
+  var cards=document.querySelectorAll('.test-card');
+  var visibleCount=0;
+  var byStatus={passed:0,failed:0,flaky:0,skipped:0,timedout:0};
+
+  for(var i=0;i<cards.length;i++){
+    var card=cards[i];
+    var st=card.getAttribute('data-status')||'';
+    var tp=card.getAttribute('data-type')||'';
+    var sp=card.getAttribute('data-spec')||'';
+    var match=true;
+    if(hasStatus&&!_filterState.status[st])match=false;
+    if(hasType&&!_filterState.type[tp])match=false;
+    if(hasSpec&&!_filterState.specFile[sp])match=false;
+    if(match){
+      card.classList.remove('filter-hidden');
+      visibleCount++;
+      if(byStatus[st]!==undefined)byStatus[st]++;
+    }else{
+      card.classList.add('filter-hidden');
+    }
+  }
+
+  // Timeline entries: hide if no visible test cards inside
+  var entries=document.querySelectorAll('.timeline-entry');
+  for(var i=0;i<entries.length;i++){
+    var entry=entries[i];
+    var visCards=entry.querySelectorAll('.test-card:not(.filter-hidden)');
+    if(hasAny&&visCards.length===0){
+      entry.classList.add('filter-hidden');
+    }else{
+      entry.classList.remove('filter-hidden');
+    }
+  }
+
+  // Clear all button
+  var clearBtn=document.getElementById('filter-clear');
+  if(clearBtn)clearBtn.style.display=hasAny?'':'none';
+
+  // Indicator
+  var indicator=document.getElementById('filter-indicator');
+  if(indicator)indicator.style.display=hasAny?'':'none';
+  var shown=document.getElementById('filter-shown');
+  if(shown)shown.textContent=''+visibleCount;
+
+  // Summary card updates
+  if(hasAny){
+    _updateCard('card-total',visibleCount);
+    _updateCard('card-passed',byStatus.passed);
+    _updateCard('card-failed',byStatus.failed);
+    _updateCard('card-flaky',byStatus.flaky);
+    _updateCard('card-skipped',byStatus.skipped);
+    _updateCard('card-timedout',byStatus.timedout);
+  }else if(_originalSummary){
+    _updateCard('card-total',_originalSummary.total);
+    _updateCard('card-passed',_originalSummary.passed);
+    _updateCard('card-failed',_originalSummary.failed);
+    _updateCard('card-flaky',_originalSummary.flaky);
+    _updateCard('card-skipped',_originalSummary.skipped);
+    _updateCard('card-timedout',_originalSummary.timedout);
+  }
+
+  // Empty state
+  var emptyEl=document.getElementById('filter-empty');
+  var timeline=document.getElementById('timeline');
+  if(hasAny&&visibleCount===0){
+    if(emptyEl)emptyEl.style.display='';
+    if(timeline)timeline.style.display='none';
+  }else{
+    if(emptyEl)emptyEl.style.display='none';
+    if(timeline)timeline.style.display='';
+  }
+}
+
+function _updateCard(cls,val){
+  var el=document.querySelector('.'+cls+' .count');
+  if(el)el.textContent=''+val;
+}
 `;
+
+// src/html-template.ts
 function renderHtmlDocument(reportJson) {
-  const jsWithLogo = JS.replace(/__LOGO_SVG__/g, LOGO_SVG.replace(/'/g, "\\'").replace(/\n/g, ""));
+  const jsWithLogo = JS_RENDER.replace(/__LOGO_SVG__/g, LOGO_SVG.replace(/'/g, "\\'").replace(/\n/g, ""));
+  const safeJson = reportJson.replace(/<\//g, "<\\/");
   return `<!-- TestRelic Report \u2014 self-contained, no external dependencies -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data:;">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'; img-src data: blob: 'self'; media-src blob: 'self';">
 <title>TestRelic Report</title>
 <style>${CSS}</style>
 </head>
 <body>
+<script>!function(){var t=localStorage.getItem('testrelic-theme')||(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',t)}()</script>
 <div class="container" id="app"></div>
-<script id="report-data" type="application/json">${reportJson}</script>
-<script>${jsWithLogo}</script>
+<script id="report-data" type="application/json">${safeJson}</script>
+<script>${jsWithLogo}
+${JS_TABS}
+${JS_NETWORK}
+${JS_FILTERS}
+${JS_INTERACTIONS}</script>
 </body>
 </html>`;
 }
@@ -509,7 +1178,108 @@ function writeHtmlReport(report, config) {
   }
 }
 
+// src/artifact-manager.ts
+import { mkdirSync as mkdirSync2, copyFileSync, existsSync } from "fs";
+import { join, extname } from "path";
+function sanitizeFolderName(title) {
+  let name = title.replace(/[^a-zA-Z0-9\-_ ]/g, "-").replace(/\s+/g, "-").replace(/-{2,}/g, "-").replace(/^-+|-+$/g, "");
+  if (name.length > 100) {
+    name = name.substring(0, 100).replace(/-+$/, "");
+  }
+  return name || "unnamed-test";
+}
+function copyArtifacts(attachments, testTitle, retryCount, outputDir) {
+  const screenshot = attachments.find(
+    (a) => a.name === "screenshot" && a.path
+  );
+  const video = attachments.find(
+    (a) => a.name === "video" && a.path
+  );
+  if (!screenshot && !video) {
+    return null;
+  }
+  let folderName = sanitizeFolderName(testTitle);
+  if (retryCount > 0) {
+    folderName += `--retry-${retryCount}`;
+  }
+  const artifactDir = join(outputDir, "artifacts", folderName);
+  const result = {};
+  try {
+    mkdirSync2(artifactDir, { recursive: true });
+  } catch {
+    return null;
+  }
+  if (screenshot?.path) {
+    try {
+      if (existsSync(screenshot.path)) {
+        const ext = extname(screenshot.path) || ".png";
+        const destName = `screenshot${ext}`;
+        copyFileSync(screenshot.path, join(artifactDir, destName));
+        result.screenshot = `artifacts/${folderName}/${destName}`;
+      }
+    } catch {
+    }
+  }
+  if (video?.path) {
+    try {
+      if (existsSync(video.path)) {
+        const ext = extname(video.path) || ".webm";
+        const destName = `video${ext}`;
+        copyFileSync(video.path, join(artifactDir, destName));
+        result.video = `artifacts/${folderName}/${destName}`;
+      }
+    } catch {
+    }
+  }
+  if (!result.screenshot && !result.video) {
+    return null;
+  }
+  return result;
+}
+
 // src/reporter.ts
+function mapPlaywrightStatus(status) {
+  switch (status) {
+    case "passed":
+      return "passed";
+    case "failed":
+      return "failed";
+    case "timedOut":
+      return "timedout";
+    case "skipped":
+      return "skipped";
+    case "interrupted":
+      return "failed";
+    default:
+      return "failed";
+  }
+}
+function generateTestId(filePath, suiteName, title) {
+  const input = `${filePath}::${suiteName}::${title}`;
+  return createHash("sha256").update(input).digest("hex").substring(0, 16);
+}
+function getSuiteName(titlePath) {
+  if (titlePath.length <= 4) return "";
+  return titlePath[titlePath.length - 2];
+}
+function getRetryStatus(results) {
+  const passedIndex = results.findIndex((r) => r.status === "passed");
+  return passedIndex > 0 ? `passed on retry ${passedIndex}` : null;
+}
+function getTestType(tags, filePath) {
+  const typeOrder = ["e2e", "api", "unit"];
+  for (const type of typeOrder) {
+    if (tags.some((tag) => tag === `@${type}` || tag === type)) {
+      return type;
+    }
+  }
+  for (const type of typeOrder) {
+    if (filePath.includes(`/${type}/`)) {
+      return type;
+    }
+  }
+  return "unknown";
+}
 var TestRelicReporter = class {
   constructor(options) {
     this.rootDir = "";
@@ -533,12 +1303,11 @@ var TestRelicReporter = class {
       let status;
       if (outcome === "flaky") {
         status = "flaky";
-      } else if (lastResult.status === "passed") {
-        status = "passed";
+      } else if (outcome === "skipped") {
+        status = "skipped";
       } else {
-        status = "failed";
+        status = mapPlaywrightStatus(lastResult.status);
       }
-      if (outcome === "skipped") return;
       const startedAt = lastResult.startTime.toISOString();
       const completedAt = new Date(lastResult.startTime.getTime() + lastResult.duration).toISOString();
       const tags = test.tags ? [...test.tags] : test.annotations.filter((a) => a.type === "tag").map((a) => a.description ?? "");
@@ -549,6 +1318,16 @@ var TestRelicReporter = class {
           return null;
         }
       }).filter((n) => n !== null);
+      let networkRequests = null;
+      const networkReqAnnotation = test.annotations.find(
+        (a) => a.type === "__testrelic_network_requests" && a.description
+      );
+      if (networkReqAnnotation) {
+        try {
+          networkRequests = JSON.parse(networkReqAnnotation.description);
+        } catch {
+        }
+      }
       let failure = null;
       if (status === "failed" || status === "flaky") {
         const errors = status === "flaky" ? test.results.find((r) => r.status !== "passed")?.errors ?? [] : lastResult.errors;
@@ -575,9 +1354,24 @@ var TestRelicReporter = class {
       }
       const titlePath = test.titlePath().filter(Boolean);
       const specFile = relative(this.rootDir || ".", test.location.file);
+      const suiteName = getSuiteName(titlePath);
+      const title = titlePath.join(" > ");
+      const filePath = specFile;
+      const testId = generateTestId(filePath, suiteName, title);
+      const testType = getTestType(tags, filePath);
+      const isFlaky = outcome === "flaky";
+      const retryStatus = getRetryStatus(test.results);
+      const expectedStatus = mapPlaywrightStatus(test.expectedStatus);
+      const actualStatus = mapPlaywrightStatus(lastResult.status);
+      let artifacts = null;
+      if (this.config.includeArtifacts && status !== "skipped" && lastResult.attachments) {
+        const outputDir = dirname2(this.config.outputPath);
+        const lastTitle = titlePath[titlePath.length - 1] ?? test.title;
+        artifacts = copyArtifacts(lastResult.attachments, lastTitle, lastResult.retry, outputDir);
+      }
       this.collectedTests.push({
         titlePath,
-        title: titlePath.join(" > "),
+        title,
         status,
         duration: lastResult.duration,
         startedAt,
@@ -586,7 +1380,17 @@ var TestRelicReporter = class {
         tags,
         failure,
         specFile,
-        navigations
+        navigations,
+        testId,
+        filePath,
+        suiteName,
+        testType,
+        isFlaky,
+        retryStatus,
+        expectedStatus,
+        actualStatus,
+        artifacts,
+        networkRequests
       });
     } catch {
     }
@@ -666,6 +1470,7 @@ var TestRelicReporter = class {
     let failed = 0;
     let flaky = 0;
     let skipped = 0;
+    let timedout = 0;
     for (const test of this.collectedTests) {
       switch (test.status) {
         case "passed":
@@ -677,6 +1482,12 @@ var TestRelicReporter = class {
         case "flaky":
           flaky++;
           break;
+        case "skipped":
+          skipped++;
+          break;
+        case "timedout":
+          timedout++;
+          break;
       }
     }
     return {
@@ -684,7 +1495,8 @@ var TestRelicReporter = class {
       passed,
       failed,
       flaky,
-      skipped
+      skipped,
+      timedout
     };
   }
   toTestResult(test) {
@@ -696,7 +1508,17 @@ var TestRelicReporter = class {
       completedAt: test.completedAt,
       retryCount: test.retryCount,
       tags: test.tags,
-      failure: test.failure
+      failure: test.failure,
+      testId: test.testId,
+      filePath: test.filePath,
+      suiteName: test.suiteName,
+      testType: test.testType,
+      isFlaky: test.isFlaky,
+      retryStatus: test.retryStatus,
+      expectedStatus: test.expectedStatus,
+      actualStatus: test.actualStatus,
+      artifacts: test.artifacts,
+      networkRequests: test.networkRequests
     };
   }
   writeReport(report) {
@@ -704,7 +1526,7 @@ var TestRelicReporter = class {
       const json = JSON.stringify(report, null, 2);
       const outputPath = this.config.outputPath;
       const dir = dirname2(outputPath);
-      mkdirSync2(dir, { recursive: true });
+      mkdirSync3(dir, { recursive: true });
       const tmpPath = outputPath + ".tmp";
       writeFileSync2(tmpPath, json, "utf-8");
       renameSync2(tmpPath, outputPath);