@testrelic/playwright-analytics 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/fixture.cjs +1 -464
  2. package/dist/fixture.cjs.map +1 -1
  3. package/dist/fixture.js +1 -438
  4. package/dist/fixture.js.map +1 -1
  5. package/dist/index.cjs +1118 -1469
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.js +1118 -1441
  8. package/dist/index.js.map +1 -1
  9. package/dist/merge.cjs +1 -116
  10. package/dist/merge.cjs.map +1 -1
  11. package/dist/merge.js +1 -91
  12. package/dist/merge.js.map +1 -1
  13. package/package.json +2 -7
package/dist/index.js CHANGED
@@ -1,996 +1,980 @@
1
- // src/reporter.ts
2
- import { randomUUID, createHash } from "crypto";
3
- import { mkdirSync as mkdirSync3, writeFileSync as writeFileSync2, renameSync as renameSync2 } from "fs";
4
- import { dirname as dirname2, relative } from "path";
5
-
6
- // src/config.ts
7
- import { isValidConfig, createError, ErrorCode } from "@testrelic/core";
8
- var DEFAULT_REDACTION_PATTERNS = [
9
- /AKIA[A-Z0-9]{16}/g,
10
- /Bearer\s+[A-Za-z0-9\-._~+/]+=*/g,
11
- /-----BEGIN\s+(RSA\s+)?PRIVATE\sKEY-----[\s\S]*?-----END/g,
12
- /\/\/[^:]+:[^@]+@/g
13
- ];
14
- function resolveConfig(options) {
15
- if (options !== void 0 && !isValidConfig(options)) {
16
- throw createError(ErrorCode.CONFIG_INVALID, "Invalid reporter configuration");
17
- }
18
- const target = /* @__PURE__ */ Object.create(null);
19
- target.outputPath = options?.outputPath ?? "./test-results/analytics-timeline.json";
20
- target.includeStackTrace = options?.includeStackTrace ?? false;
21
- target.includeCodeSnippets = options?.includeCodeSnippets ?? true;
22
- target.codeContextLines = options?.codeContextLines ?? 3;
23
- target.includeNetworkStats = options?.includeNetworkStats ?? true;
24
- target.navigationTypes = options?.navigationTypes ?? null;
25
- target.redactPatterns = [
26
- ...DEFAULT_REDACTION_PATTERNS,
27
- ...options?.redactPatterns ?? []
28
- ];
29
- target.testRunId = options?.testRunId ?? null;
30
- target.metadata = options?.metadata ?? null;
31
- const outputPath = target.outputPath;
32
- target.openReport = options?.openReport ?? true;
33
- target.htmlReportPath = options?.htmlReportPath ?? outputPath.replace(/\.json$/, ".html");
34
- target.includeArtifacts = options?.includeArtifacts ?? true;
35
- return Object.freeze(target);
1
+ import {randomUUID,createHash}from'crypto';import {mkdirSync,writeFileSync,renameSync,readFileSync,existsSync,copyFileSync}from'fs';import {relative,dirname,join,extname,resolve}from'path';import {isValidConfig,createError,ErrorCode}from'@testrelic/core';import {exec}from'child_process';var rt=[/AKIA[A-Z0-9]{16}/g,/Bearer\s+[A-Za-z0-9\-._~+/]+=*/g,/-----BEGIN\s+(RSA\s+)?PRIVATE\sKEY-----[\s\S]*?-----END/g,/\/\/[^:]+:[^@]+@/g];function A(e){if(e!==void 0&&!isValidConfig(e))throw createError(ErrorCode.CONFIG_INVALID,"Invalid reporter configuration");let t=Object.create(null);t.outputPath=e?.outputPath??"./test-results/analytics-timeline.json",t.includeStackTrace=e?.includeStackTrace??false,t.includeCodeSnippets=e?.includeCodeSnippets??true,t.codeContextLines=e?.codeContextLines??3,t.includeNetworkStats=e?.includeNetworkStats??true,t.navigationTypes=e?.navigationTypes??null,t.redactPatterns=[...rt,...e?.redactPatterns??[]],t.testRunId=e?.testRunId??null,t.metadata=e?.metadata??null;let a=t.outputPath;return t.openReport=e?.openReport??true,t.htmlReportPath=e?.htmlReportPath??a.replace(/\.json$/,".html"),t.includeArtifacts=e?.includeArtifacts??true,Object.freeze(t)}var x="1.2.0";function I(e,t,a){try{let s=readFileSync(e,"utf-8").split(`
2
+ `);if(t<1||t>s.length)return null;let i=Math.max(1,t-a),o=Math.min(s.length,t+a),d=[];for(let n=i;n<=o;n++){let c=n===t?">":" ",p=String(n).padStart(String(o).length," ");d.push(`${c} ${p} | ${s[n-1]}`);}return d.join(`
3
+ `)}catch{return null}}function M(e){return t=>{let a=t;for(let r of e)if(typeof r=="string"){let s=r.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");a=a.replace(new RegExp(s,"g"),"[REDACTED]");}else {let s=r.flags.includes("g")?r.flags:r.flags+"g",i=new RegExp(r.source,s);a=a.replace(i,"[REDACTED]");}return a}}function it(e){return e.GITHUB_ACTIONS!=="true"?null:{provider:"github-actions",buildId:e.GITHUB_RUN_ID??null,commitSha:e.GITHUB_SHA??null,branch:e.GITHUB_REF_NAME??null}}function nt(e){return e.GITLAB_CI!=="true"?null:{provider:"gitlab-ci",buildId:e.CI_PIPELINE_ID??null,commitSha:e.CI_COMMIT_SHA??null,branch:e.CI_COMMIT_BRANCH??e.CI_COMMIT_REF_NAME??null}}function ot(e){if(!e.JENKINS_URL)return null;let t=e.GIT_BRANCH??null;return t?.startsWith("origin/")&&(t=t.slice(7)),{provider:"jenkins",buildId:e.BUILD_ID??null,commitSha:e.GIT_COMMIT??null,branch:t}}function lt(e){return e.CIRCLECI!=="true"?null:{provider:"circleci",buildId:e.CIRCLE_BUILD_NUM??null,commitSha:e.CIRCLE_SHA1??null,branch:e.CIRCLE_BRANCH??null}}var dt=[it,nt,ot,lt];function F(e){let t=process.env;for(let a of dt){let r=a(t);if(r)return r}return null}var E=`
4
+ /* Theme Variables */
5
+ :root,[data-theme="dark"]{
6
+ --bg:#0f1117;--bg-1:#161b22;--bg-2:#1c2128;--bg-3:#21262d;--bg-code:#13111c;
7
+ --fg:#e6edf3;--fg-1:#8b949e;--fg-2:#484f58;--fg-code:#d4d4d4;--fg-err:#f8d7da;
8
+ --bd:rgba(255,255,255,0.06);--bd-s:rgba(255,255,255,0.04);--bd-m:rgba(255,255,255,0.08);--bd-l:rgba(255,255,255,0.1);--bd-xs:rgba(255,255,255,0.03);
9
+ --hvr:rgba(255,255,255,0.025);--hvr-s:rgba(255,255,255,0.02);
10
+ --overlay-bg:rgba(0,0,0,.55);--shadow-c:rgba(0,0,0,.35);
11
+ --lb-bg:rgba(0,0,0,.92);--lb-shadow:rgba(0,0,0,.6);--lb-btn:rgba(255,255,255,.1);--lb-btn-h:rgba(255,255,255,.2);
12
+ --scroll-thumb:#21262d;
36
13
  }
37
-
38
- // src/schema.ts
39
- var SCHEMA_VERSION = "1.2.0";
40
-
41
- // src/code-extractor.ts
42
- import { readFileSync } from "fs";
43
- function extractCodeSnippet(filePath, line, contextLines) {
44
- try {
45
- const content = readFileSync(filePath, "utf-8");
46
- const lines = content.split("\n");
47
- if (line < 1 || line > lines.length) return null;
48
- const startLine = Math.max(1, line - contextLines);
49
- const endLine = Math.min(lines.length, line + contextLines);
50
- const snippetLines = [];
51
- for (let i = startLine; i <= endLine; i++) {
52
- const marker = i === line ? ">" : " ";
53
- const lineNum = String(i).padStart(String(endLine).length, " ");
54
- snippetLines.push(`${marker} ${lineNum} | ${lines[i - 1]}`);
55
- }
56
- return snippetLines.join("\n");
57
- } catch {
58
- return null;
59
- }
14
+ [data-theme="light"]{
15
+ --bg:#ffffff;--bg-1:#f6f8fa;--bg-2:#eaeef2;--bg-3:#d0d7de;--bg-code:#f6f8fa;
16
+ --fg:#1f2328;--fg-1:#656d76;--fg-2:#8b949e;--fg-code:#24292e;--fg-err:#82071e;
17
+ --bd:rgba(0,0,0,0.08);--bd-s:rgba(0,0,0,0.04);--bd-m:rgba(0,0,0,0.12);--bd-l:rgba(0,0,0,0.15);--bd-xs:rgba(0,0,0,0.03);
18
+ --hvr:rgba(0,0,0,0.04);--hvr-s:rgba(0,0,0,0.03);
19
+ --overlay-bg:rgba(0,0,0,.3);--shadow-c:rgba(0,0,0,.1);
20
+ --lb-bg:rgba(0,0,0,.85);--lb-shadow:rgba(0,0,0,.3);--lb-btn:rgba(0,0,0,.12);--lb-btn-h:rgba(0,0,0,.2);
21
+ --scroll-thumb:#d0d7de;
60
22
  }
61
23
 
62
- // src/redaction.ts
63
- function createRedactor(patterns) {
64
- return (text) => {
65
- let result = text;
66
- for (const pattern of patterns) {
67
- if (typeof pattern === "string") {
68
- const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
69
- result = result.replace(new RegExp(escaped, "g"), "[REDACTED]");
70
- } else {
71
- const flags = pattern.flags.includes("g") ? pattern.flags : pattern.flags + "g";
72
- const cloned = new RegExp(pattern.source, flags);
73
- result = result.replace(cloned, "[REDACTED]");
74
- }
75
- }
76
- return result;
77
- };
24
+ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
25
+ body{
26
+ font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
27
+ background:var(--bg);color:var(--fg);line-height:1.5;
28
+ -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
78
29
  }
79
30
 
80
- // src/ci-detector.ts
81
- function detectGitHubActions(env) {
82
- if (env.GITHUB_ACTIONS !== "true") return null;
83
- return {
84
- provider: "github-actions",
85
- buildId: env.GITHUB_RUN_ID ?? null,
86
- commitSha: env.GITHUB_SHA ?? null,
87
- branch: env.GITHUB_REF_NAME ?? null
88
- };
31
+ /* \u2500\u2500 Centered Container \u2500\u2500 */
32
+ .wrap{max-width:960px;margin:0 auto;padding:32px 24px 64px}
33
+
34
+ /* \u2500\u2500 Header \u2500\u2500 */
35
+ .top-bar{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
36
+ .brand{display:flex;align-items:center;gap:10px}
37
+ .brand svg{flex-shrink:0}
38
+ .brand-text{display:flex;flex-direction:column}
39
+ .brand-title{font-size:17px;font-weight:700;color:var(--fg);line-height:1.2}
40
+ .brand-sub{font-size:10px;font-weight:600;color:#03b79c;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
41
+ .run-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;color:var(--fg-1);margin-left:auto}
42
+ .run-meta-item{display:flex;align-items:center;gap:4px}
43
+ .run-meta-label{font-weight:600}
44
+ .run-id-tag{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;background:var(--bg-2);padding:1px 6px;border-radius:4px;color:var(--fg-1)}
45
+ .ci-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(59,130,246,0.12);color:#60a5fa;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600}
46
+ .merged-tag{background:rgba(245,158,11,0.12);color:#fbbf24;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600}
47
+
48
+ /* \u2500\u2500 Theme Toggle \u2500\u2500 */
49
+ .theme-toggle{display:inline-flex;border:1px solid var(--bd-m);border-radius:8px;overflow:hidden;background:var(--bg);flex-shrink:0}
50
+ .theme-btn{padding:6px 10px;border:none;background:transparent;color:var(--fg-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:inherit}
51
+ .theme-btn:not(:last-child){border-right:1px solid var(--bd-m)}
52
+ .theme-btn.active{background:var(--bg-3);color:var(--fg)}
53
+ .theme-btn:hover:not(.active){color:var(--fg-1);background:var(--hvr)}
54
+ .theme-btn svg{width:14px;height:14px}
55
+
56
+ /* \u2500\u2500 CTA Button \u2500\u2500 */
57
+ .cta-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:#e6edf3;background:linear-gradient(135deg,rgba(3,183,156,0.15),rgba(14,165,233,0.15));border:1px solid rgba(3,183,156,0.3);padding:6px 14px;border-radius:8px;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:all .2s ease;letter-spacing:.01em}
58
+ .cta-btn:hover{background:linear-gradient(135deg,rgba(3,183,156,0.25),rgba(14,165,233,0.25));border-color:rgba(3,183,156,0.5);box-shadow:0 0 16px rgba(3,183,156,0.15);color:#fff}
59
+ .cta-btn strong{font-weight:700;color:#2dd4a8}
60
+ .cta-btn:hover strong{color:#5eead4}
61
+ .cta-icon{width:13px;height:13px;color:#2dd4a8;flex-shrink:0}
62
+ .cta-sep{color:var(--fg-2);margin:0 1px}
63
+ .cta-arrow{width:11px;height:11px;color:#2dd4a8;flex-shrink:0;transition:transform .2s}
64
+ .cta-btn:hover .cta-arrow{transform:translateX(2px)}
65
+ [data-theme="light"] .cta-btn{color:#1f2328;background:linear-gradient(135deg,rgba(3,183,156,0.08),rgba(14,165,233,0.08));border-color:rgba(3,183,156,0.25)}
66
+ [data-theme="light"] .cta-btn:hover{background:linear-gradient(135deg,rgba(3,183,156,0.15),rgba(14,165,233,0.15));border-color:rgba(3,183,156,0.4);color:#0f172a}
67
+ [data-theme="light"] .cta-btn strong{color:#059669}
68
+ [data-theme="light"] .cta-icon,[data-theme="light"] .cta-arrow{color:#059669}
69
+
70
+ /* \u2500\u2500 Summary Strip \u2500\u2500 */
71
+ .summary-strip{display:flex;gap:8px;margin-bottom:20px}
72
+ .summary-chip{flex:1;text-align:center;padding:14px 4px;border-radius:10px;cursor:default;border:1px solid var(--bd-s)}
73
+ .summary-chip .s-count{font-size:22px;font-weight:800;line-height:1}
74
+ .summary-chip .s-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:4px;color:var(--fg-2)}
75
+ .s-total{background:rgba(99,102,241,0.06)}.s-total .s-count{color:#818cf8}
76
+ .s-passed{background:rgba(34,197,94,0.06)}.s-passed .s-count{color:#22c55e}
77
+ .s-failed{background:rgba(239,68,68,0.06)}.s-failed .s-count{color:#ef4444}
78
+ .s-flaky{background:rgba(245,158,11,0.06)}.s-flaky .s-count{color:#f59e0b}
79
+ .s-skipped{background:rgba(107,114,128,0.06)}.s-skipped .s-count{color:#6b7280}
80
+ .s-timedout{background:rgba(249,115,22,0.06)}.s-timedout .s-count{color:#f97316}
81
+
82
+ /* \u2500\u2500 Filter Bar \u2500\u2500 */
83
+ .filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}
84
+ .filter-chips{display:flex;gap:5px;flex-wrap:wrap}
85
+ .filter-chip{
86
+ font-size:12px;font-weight:500;padding:5px 14px;border-radius:9999px;
87
+ border:1px solid var(--bd-m);background:transparent;color:var(--fg-1);
88
+ cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;
89
89
  }
90
- function detectGitLabCI(env) {
91
- if (env.GITLAB_CI !== "true") return null;
92
- return {
93
- provider: "gitlab-ci",
94
- buildId: env.CI_PIPELINE_ID ?? null,
95
- commitSha: env.CI_COMMIT_SHA ?? null,
96
- branch: env.CI_COMMIT_BRANCH ?? env.CI_COMMIT_REF_NAME ?? null
97
- };
90
+ .filter-chip:hover{border-color:#03b79c;color:var(--fg)}
91
+ .filter-chip.active{background:rgba(3,183,156,0.12);border-color:#03b79c;color:#2dd4a8}
92
+ .chip-count{font-weight:700;margin-left:3px}
93
+ .filter-chip--zero{opacity:.35;pointer-events:none}
94
+ .filter-section{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
95
+ .filter-section-label{font-size:10px;font-weight:600;color:var(--fg-2);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
96
+ .filter-chip--dimmed{opacity:.45}
97
+ .filter-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
98
+ .filter-clear{font-size:11px;font-weight:600;color:#03b79c;background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px;font-family:inherit;transition:background .15s}
99
+ .filter-clear:hover{background:rgba(3,183,156,0.1)}
100
+ .filter-indicator{font-size:11px;color:var(--fg-2)}
101
+ .search-box{position:relative;margin-left:auto;width:220px;flex-shrink:0}
102
+ .search-input{
103
+ width:100%;padding:6px 10px 6px 32px;
104
+ border:1px solid var(--bd-m);border-radius:8px;
105
+ background:var(--bg-1);color:var(--fg);font-size:12px;font-family:inherit;outline:none;transition:border-color .15s;
98
106
  }
99
- function detectJenkins(env) {
100
- if (!env.JENKINS_URL) return null;
101
- let branch = env.GIT_BRANCH ?? null;
102
- if (branch?.startsWith("origin/")) {
103
- branch = branch.slice("origin/".length);
104
- }
105
- return {
106
- provider: "jenkins",
107
- buildId: env.BUILD_ID ?? null,
108
- commitSha: env.GIT_COMMIT ?? null,
109
- branch
110
- };
107
+ .search-input::placeholder{color:var(--fg-2)}
108
+ .search-input:focus{border-color:#03b79c}
109
+ .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--fg-2);pointer-events:none}
110
+
111
+ /* \u2500\u2500 File Groups & Test Rows \u2500\u2500 */
112
+ .file-group{margin-bottom:16px}
113
+ .file-group-header{
114
+ font-size:11px;font-weight:600;
115
+ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
116
+ color:var(--fg-2);padding:0 4px 6px;
111
117
  }
112
- function detectCircleCI(env) {
113
- if (env.CIRCLECI !== "true") return null;
114
- return {
115
- provider: "circleci",
116
- buildId: env.CIRCLE_BUILD_NUM ?? null,
117
- commitSha: env.CIRCLE_SHA1 ?? null,
118
- branch: env.CIRCLE_BRANCH ?? null
119
- };
118
+ .file-group-card{
119
+ border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--bg-1);
120
120
  }
121
- var detectors = [
122
- detectGitHubActions,
123
- detectGitLabCI,
124
- detectJenkins,
125
- detectCircleCI
126
- ];
127
- function detectCI(env) {
128
- const envVars = env ?? process.env;
129
- for (const detect of detectors) {
130
- const result = detect(envVars);
131
- if (result) return result;
132
- }
133
- return null;
121
+ .test-row{
122
+ display:flex;align-items:center;gap:12px;padding:12px 18px;cursor:pointer;
123
+ transition:background .1s;border-bottom:1px solid var(--bd-s);
134
124
  }
125
+ .test-row:last-child{border-bottom:none}
126
+ .test-row:hover{background:var(--hvr)}
127
+ .test-row.active{background:rgba(3,183,156,0.07)}
135
128
 
136
- // src/html-report.ts
137
- import { writeFileSync, renameSync, mkdirSync } from "fs";
138
- import { dirname, resolve } from "path";
129
+ .status-indicator{
130
+ width:10px;height:10px;border-radius:50%;flex-shrink:0;
131
+ }
132
+ .si-passed{background:#22c55e}.si-failed{background:#ef4444}
133
+ .si-flaky{background:#f59e0b}.si-skipped{background:#6b7280}.si-timedout{background:#f97316}
139
134
 
140
- // src/html-logo.ts
141
- var LOGO_SVG = `<svg width="32" height="40" viewBox="0 0 196 247" fill="none" xmlns="http://www.w3.org/2000/svg">
142
- <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)"/>
143
- <defs><linearGradient id="paint0_linear_55_11" x1="98" y1="0.000244141" x2="98" y2="247" gradientUnits="userSpaceOnUse">
144
- <stop stop-color="#03B79C"/><stop offset="0.504808" stop-color="#4EDAA4"/><stop offset="0.865285" stop-color="#84F3AA"/>
145
- </linearGradient></defs></svg>`;
146
-
147
- // src/html-css.ts
148
- var CSS = `
149
- :root{
150
- --bg-primary:#ffffff;--bg-secondary:#fafafa;--bg-tertiary:#f3f4f6;--bg-card:#ffffff;
151
- --bg-code:#171717;--bg-code-text:#d4d4d4;--bg-code-highlight:rgba(239,68,68,.2);
152
- --text-primary:#171717;--text-secondary:#6b7280;--text-muted:#9ca3af;--text-strong:#374151;
153
- --border:#e5e7eb;--border-light:#f3f4f6;--border-hover:#d1d5db;
154
- --accent:#03b79c;--accent-hover:#028a75;--accent-ring:rgba(3,183,156,.2);
155
- --passed-bg:#d1fae5;--passed-text:#065f46;--passed-border:#bbf7d0;--passed-card-bg:#f0fdf4;--passed-count:#16a34a;
156
- --failed-bg:#fecaca;--failed-text:#991b1b;--failed-border:#fecaca;--failed-card-bg:#fef2f2;--failed-count:#dc2626;
157
- --flaky-bg:#fde68a;--flaky-text:#92400e;--flaky-border:#fde68a;--flaky-card-bg:#fffbeb;--flaky-count:#d97706;
158
- --skipped-bg:#f3f4f6;--skipped-text:#6b7280;--skipped-card-bg:#f9fafb;
159
- --timedout-bg:#ffedd5;--timedout-text:#9a3412;--timedout-card-bg:#fff7ed;--timedout-count:#ea580c;
160
- --total-border:#c7d2fe;--total-bg:#eef2ff;--total-count:#4f46e5;
161
- --ci-bg:#eff6ff;--ci-text:#1d4ed8;--merged-bg:#fef3c7;--merged-text:#92400e;
162
- --tag-bg:#eff6ff;--tag-text:#1d4ed8;--type-bg:#ede9fe;--type-text:#5b21b6;
163
- --net-2xx-bg:#d1fae5;--net-2xx-text:#065f46;--net-3xx-bg:#fef3c7;--net-3xx-text:#92400e;
164
- --net-4xx-bg:#fecaca;--net-4xx-text:#991b1b;--net-5xx-bg:#fecaca;--net-5xx-text:#7f1d1d;
165
- --net-0-bg:#f3f4f6;--net-0-text:#6b7280;
166
- --passed-left:#22c55e;--failed-left:#ef4444;
167
- --failure-msg-bg:#f8f8f8;
135
+ .test-row-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
136
+ .test-row-title{font-size:14px;font-weight:500;color:var(--fg);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
137
+ .test-row-badges{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
138
+ .trb{font-size:10px;font-weight:600;padding:1px 7px;border-radius:4px}
139
+ .trb-type{background:rgba(139,92,246,0.12);color:#a78bfa}
140
+ .trb-tag{background:rgba(59,130,246,0.12);color:#60a5fa}
141
+ .trb-retry{background:rgba(245,158,11,0.12);color:#fbbf24}
142
+ .trb-flaky{background:rgba(245,158,11,0.12);color:#fbbf24}
143
+ .test-row-dur{font-size:13px;font-weight:700;color:var(--fg-1);flex-shrink:0;white-space:nowrap}
144
+ .test-row-arrow{color:var(--fg-2);flex-shrink:0;transition:color .15s}
145
+ .test-row:hover .test-row-arrow{color:var(--fg-1)}
146
+
147
+ .no-tests{text-align:center;padding:48px 20px;color:var(--fg-2);font-size:14px}
148
+
149
+ /* \u2500\u2500 Drawer Overlay \u2500\u2500 */
150
+ .drawer-backdrop{
151
+ position:fixed;inset:0;background:var(--overlay-bg);z-index:100;
152
+ opacity:0;pointer-events:none;transition:opacity .25s ease;
153
+ }
154
+ .drawer-backdrop.open{opacity:1;pointer-events:auto}
155
+
156
+ /* \u2500\u2500 Drawer Panel \u2500\u2500 */
157
+ .drawer{
158
+ position:fixed;top:0;right:0;bottom:0;width:50vw;max-width:50vw;z-index:110;
159
+ background:var(--bg-1);border-left:1px solid var(--bd);
160
+ transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
161
+ display:flex;flex-direction:column;overflow:hidden;
162
+ box-shadow:-8px 0 40px var(--shadow-c);
168
163
  }
169
- [data-theme="dark"]{
170
- --bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-card:#1e293b;
171
- --bg-code:#0f172a;--bg-code-text:#e2e8f0;--bg-code-highlight:rgba(239,68,68,.25);
172
- --text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-strong:#cbd5e1;
173
- --border:#334155;--border-light:#1e293b;--border-hover:#475569;
174
- --accent:#2dd4bf;--accent-hover:#5eead4;--accent-ring:rgba(45,212,191,.25);
175
- --passed-bg:#065f46;--passed-text:#6ee7b7;--passed-border:#064e3b;--passed-card-bg:#022c22;--passed-count:#34d399;
176
- --failed-bg:#7f1d1d;--failed-text:#fca5a5;--failed-border:#991b1b;--failed-card-bg:#450a0a;--failed-count:#f87171;
177
- --flaky-bg:#78350f;--flaky-text:#fde68a;--flaky-border:#92400e;--flaky-card-bg:#451a03;--flaky-count:#fbbf24;
178
- --skipped-bg:#334155;--skipped-text:#94a3b8;--skipped-card-bg:#1e293b;
179
- --timedout-bg:#7c2d12;--timedout-text:#fed7aa;--timedout-card-bg:#431407;--timedout-count:#fb923c;
180
- --total-border:#4338ca;--total-bg:#1e1b4b;--total-count:#a5b4fc;
181
- --ci-bg:#1e3a5f;--ci-text:#93c5fd;--merged-bg:#78350f;--merged-text:#fde68a;
182
- --tag-bg:#1e3a5f;--tag-text:#93c5fd;--type-bg:#2e1065;--type-text:#c4b5fd;
183
- --net-2xx-bg:#065f46;--net-2xx-text:#6ee7b7;--net-3xx-bg:#78350f;--net-3xx-text:#fde68a;
184
- --net-4xx-bg:#7f1d1d;--net-4xx-text:#fca5a5;--net-5xx-bg:#7f1d1d;--net-5xx-text:#fca5a5;
185
- --net-0-bg:#334155;--net-0-text:#94a3b8;
186
- --passed-left:#22c55e;--failed-left:#ef4444;
187
- --failure-msg-bg:#e2e8f0;
164
+ .drawer.open{transform:translateX(0)}
165
+ .drawer-bar{
166
+ display:flex;align-items:center;justify-content:space-between;
167
+ padding:14px 20px;border-bottom:1px solid var(--bd);
168
+ background:linear-gradient(180deg,rgba(3,183,156,0.04) 0%,transparent 100%);flex-shrink:0;
188
169
  }
189
- *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
190
- body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
191
- color:var(--text-primary);background:var(--bg-primary);line-height:1.6;-webkit-font-smoothing:antialiased;
192
- transition:background-color .15s ease,color .15s ease}
193
- .container{max-width:1100px;margin:0 auto;padding:24px 20px}
194
- /* Header */
195
- .header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
196
- .header svg{flex-shrink:0}
197
- .header h1{font-size:22px;font-weight:700;color:var(--text-primary)}
198
- .meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--text-secondary);margin-bottom:20px}
199
- .meta-item{display:flex;align-items:center;gap:4px}
200
- .meta-label{font-weight:600;color:var(--text-strong)}
201
- .run-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
202
- background:var(--bg-tertiary);padding:2px 8px;border-radius:4px}
203
- .ci-badge{display:inline-flex;align-items:center;gap:4px;background:var(--ci-bg);
204
- color:var(--ci-text);padding:2px 8px;border-radius:4px;font-size:12px;font-weight:500}
205
- .merged-badge{background:var(--merged-bg);color:var(--merged-text);padding:2px 8px;border-radius:4px;
206
- font-size:12px;font-weight:500}
207
- /* Theme Toggle */
208
- .theme-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
209
- border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);
210
- color:var(--text-secondary);cursor:pointer;margin-left:auto;flex-shrink:0;
211
- transition:background .15s,border-color .15s,color .15s}
212
- .theme-toggle:hover{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border-hover)}
213
- .theme-toggle svg{width:16px;height:16px}
214
- /* Summary Cards */
215
- .summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:28px}
216
- .summary-card{border-radius:10px;padding:16px;text-align:center;border:1px solid var(--border)}
217
- .summary-card .count{font-size:32px;font-weight:800;line-height:1.1}
218
- .summary-card .label{font-size:13px;font-weight:500;color:var(--text-secondary);margin-top:2px}
219
- .card-passed{border-color:var(--passed-border);background:var(--passed-card-bg)}.card-passed .count{color:var(--passed-count)}
220
- .card-failed{border-color:var(--failed-border);background:var(--failed-card-bg)}.card-failed .count{color:var(--failed-count)}
221
- .card-flaky{border-color:var(--flaky-border);background:var(--flaky-card-bg)}.card-flaky .count{color:var(--flaky-count)}
222
- .card-skipped{border-color:var(--border);background:var(--skipped-card-bg)}.card-skipped .count{color:var(--skipped-text)}
223
- .card-total{border-color:var(--total-border);background:var(--total-bg)}.card-total .count{color:var(--total-count)}
224
- .card-timedout{border-color:var(--timedout-bg);background:var(--timedout-card-bg)}.card-timedout .count{color:var(--timedout-count)}
225
- /* Timeline */
226
- .timeline{display:flex;flex-direction:column;gap:8px}
227
- .timeline-entry{border:1px solid var(--border);border-radius:10px;overflow:hidden;
228
- border-left:4px solid var(--border);transition:border-color .15s}
229
- .timeline-entry:hover{border-color:var(--border-hover)}
230
- .timeline-entry--all-passed{border-left-color:var(--passed-left)}
231
- .timeline-entry--all-passed:hover{border-color:#86efac}
232
- .timeline-entry--has-failures{border-left-color:var(--failed-left)}
233
- .timeline-entry--has-failures:hover{border-color:#fca5a5}
234
- .timeline-header{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;
235
- user-select:none;background:var(--bg-secondary);transition:background .15s}
236
- .timeline-header:hover{background:var(--bg-tertiary)}
237
- .chevron{width:16px;height:16px;flex-shrink:0;transition:transform .2s;color:var(--text-muted)}
238
- .timeline-entry.expanded .chevron{transform:rotate(90deg)}
239
- .timeline-url{font-size:14px;font-weight:600;color:var(--text-primary);overflow:hidden;
240
- text-overflow:ellipsis;white-space:nowrap;max-width:500px;min-width:0}
241
- .nav-type-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:9999px;
242
- white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;flex-shrink:0}
243
- .badge-goto{background:#dbeafe;color:#1e40af}
244
- .badge-navigation{background:#e0e7ff;color:#3730a3}
245
- .badge-page_load{background:#c7d2fe;color:#312e81}
246
- .badge-back{background:#cffafe;color:#155e75}
247
- .badge-forward{background:#a5f3fc;color:#164e63}
248
- .badge-spa_route{background:#ede9fe;color:#5b21b6}
249
- .badge-spa_replace{background:#ddd6fe;color:#4c1d95}
250
- .badge-hash_change{background:#fae8ff;color:#86198f}
251
- .badge-popstate{background:#f5d0fe;color:#701a75}
252
- .badge-link_click{background:#fce7f3;color:#9d174d}
253
- .badge-form_submit{background:#fbcfe8;color:#831843}
254
- .badge-redirect{background:#ffedd5;color:#9a3412}
255
- .badge-refresh{background:#e0f2fe;color:#075985}
256
- .badge-dummy{background:var(--bg-tertiary);color:var(--text-secondary)}
257
- .badge-fallback{background:var(--border);color:var(--text-strong)}
258
- .badge-manual_record{background:#fef9c3;color:#854d0e}
259
- .timeline-info{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary);
260
- margin-left:auto;flex-shrink:0;white-space:nowrap}
261
- .spec-file{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
262
- color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 6px;border-radius:3px}
263
- .timeline-content{display:none;padding:0 16px 16px;border-top:1px solid var(--border-light)}
264
- .timeline-entry.expanded .timeline-content{display:block}
265
- /* Test Cards */
266
- .tests-section{margin-top:12px}
267
- .spec-summary{font-size:12px;color:var(--text-secondary);margin-bottom:8px;display:flex;gap:12px;flex-wrap:wrap}
268
- .spec-summary span{font-weight:600}
269
- .spec-passed{color:var(--passed-count)}.spec-failed{color:var(--failed-count)}.spec-flaky{color:var(--flaky-count)}
270
- .test-card{padding:8px 0;border-bottom:1px solid var(--border-light)}
271
- .test-card:last-child{border-bottom:none}
272
- .test-card-row{display:flex;align-items:flex-start;gap:8px}
273
- .status-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:9999px;
274
- flex-shrink:0;margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
275
- .status-passed{background:var(--passed-bg);color:var(--passed-text)}
276
- .status-failed{background:var(--failed-bg);color:var(--failed-text)}
277
- .status-flaky{background:var(--flaky-bg);color:var(--flaky-text)}
278
- .status-skipped{background:var(--skipped-bg);color:var(--skipped-text)}
279
- .status-timedout{background:var(--timedout-bg);color:var(--timedout-text)}
280
- .type-badge{background:var(--type-bg);color:var(--type-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
281
- .flaky-badge{background:var(--flaky-card-bg);color:var(--flaky-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
282
- .file-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--text-secondary)}
283
- .suite-name{font-size:11px;color:var(--text-muted)}
284
- .status-mismatch{font-size:10px;color:var(--failed-count);font-weight:600}
285
- .test-info{flex:1;min-width:0}
286
- .test-title{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
287
- .test-meta{display:flex;gap:8px;align-items:center;margin-top:2px;font-size:11px;color:var(--text-muted)}
288
- .retry-badge{background:var(--flaky-card-bg);color:var(--flaky-text);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
289
- .tag-badge{background:var(--tag-bg);color:var(--tag-text);padding:1px 5px;border-radius:3px;font-size:10px}
290
- .meta-prefix{font-size:10px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
291
- .test-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;
292
- color:var(--text-secondary);background:var(--bg-tertiary);padding:1px 6px;border-radius:3px}
293
- .network-panel--has-failures{border-color:var(--failed-border)}
294
- .network-panel--has-failures .network-header{background:var(--failed-card-bg);color:var(--failed-text)}
295
- .failed-requests-banner{display:flex;align-items:center;gap:6px;padding:8px 12px;
296
- background:var(--failed-card-bg);color:var(--failed-text);font-size:12px;font-weight:600;border-top:1px solid var(--failed-border)}
297
- .failed-urls-list{padding:6px 12px;background:var(--failed-card-bg);border-top:1px solid var(--failed-border);font-size:11px;
298
- font-family:ui-monospace,SFMono-Regular,Menlo,monospace;max-height:200px;overflow-y:auto}
299
- .failed-url-item{padding:2px 0;color:var(--failed-text);word-break:break-all}
300
- .failed-url-status{font-weight:700;margin-right:4px}
301
- .test-duration{font-size:12px;color:var(--text-muted);flex-shrink:0;margin-top:2px}
302
- /* Tab Bar */
303
- .tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);margin-top:8px}
304
- .tab-btn{padding:8px 16px;font-size:12px;font-weight:500;color:var(--text-secondary);background:none;
305
- border:none;border-bottom:2px solid transparent;cursor:pointer;font-family:inherit;
306
- transition:color .15s,border-color .15s}
307
- .tab-btn:hover{color:var(--text-strong)}
308
- .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
309
- .tab-panel{display:none;padding:12px 0}
310
- .tab-panel.active{display:block}
311
- .tab-empty-state{text-align:center;padding:24px 16px;color:var(--text-muted);font-size:13px;font-style:italic}
312
- /* Failure Details */
313
- .failure-toggle{font-size:12px;color:var(--accent);cursor:pointer;margin-top:4px;
314
- border:none;background:none;padding:0;text-decoration:underline;font-family:inherit}
315
- .failure-toggle:hover{color:var(--accent-hover)}
316
- .failure-details{display:none;margin-top:8px;border-radius:8px;overflow:hidden;
317
- border:1px solid var(--border)}
318
- .failure-details.show{display:block}
319
- .failure-message{padding:12px;background:var(--bg-code);color:var(--failure-msg-bg);font-size:12px;
320
- font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
321
- word-break:break-word;line-height:1.5;overflow-x:auto}
322
- .code-snippet{background:var(--bg-code);padding:0;font-size:12px;
323
- font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
324
- .code-line{display:flex;padding:0 12px;line-height:1.7}
325
- .code-line.highlight{background:var(--bg-code-highlight)}
326
- .line-num{color:var(--text-secondary);min-width:40px;text-align:right;padding-right:12px;
327
- user-select:none;flex-shrink:0}
328
- .line-code{color:var(--bg-code-text);white-space:pre;overflow-x:auto}
329
- .stack-toggle{font-size:11px;color:var(--text-secondary);cursor:pointer;padding:8px 12px;
330
- border:none;background:var(--bg-secondary);width:100%;text-align:left;font-family:inherit;
331
- border-top:1px solid var(--border)}
332
- .stack-toggle:hover{background:var(--bg-tertiary);color:var(--text-strong)}
333
- .stack-trace{display:none;padding:12px;background:var(--bg-secondary);font-size:11px;
334
- font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
335
- word-break:break-word;color:var(--text-secondary);border-top:1px solid var(--border);max-height:300px;overflow-y:auto}
170
+ .drawer-bar-title{font-size:12px;font-weight:600;color:var(--fg-1);text-transform:uppercase;letter-spacing:.06em}
171
+ .drawer-close{
172
+ width:32px;height:32px;border-radius:8px;border:1px solid var(--bd-m);
173
+ background:transparent;color:var(--fg-1);font-size:18px;cursor:pointer;
174
+ display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
175
+ }
176
+ .drawer-close:hover{background:var(--bd);color:var(--fg)}
177
+ .drawer-body{flex:1;overflow-y:auto;padding:24px 28px;scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
178
+ .drawer-body::-webkit-scrollbar{width:5px}
179
+ .drawer-body::-webkit-scrollbar-track{background:transparent}
180
+ .drawer-body::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:3px}
181
+
182
+ /* \u2500\u2500 Drawer Sections \u2500\u2500 */
183
+ .drawer-sections{display:flex;flex-direction:column;gap:24px}
184
+ .drawer-section{min-width:0}
185
+
186
+ /* \u2500\u2500 Segmented Control \u2500\u2500 */
187
+ .seg-ctrl{display:inline-flex;border:1px solid var(--bd-l);border-radius:8px;overflow:hidden;background:var(--bg);margin-bottom:12px}
188
+ .seg-btn{padding:7px 16px;font-size:11px;font-weight:600;color:var(--fg-2);background:transparent;border:none;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:5px}
189
+ .seg-btn:not(:last-child){border-right:1px solid var(--bd-l)}
190
+ .seg-btn.active{background:rgba(3,183,156,0.12);color:#2dd4a8}
191
+ .seg-btn:hover:not(.active){color:var(--fg-1);background:var(--bd-xs)}
192
+ .seg-pane{display:none}
193
+ .seg-pane.active{display:block;animation:trFadeIn .15s ease-out}
194
+
195
+ /* \u2500\u2500 Artifact Column \u2500\u2500 */
196
+ .artifact-col-img{max-width:100%;border-radius:8px;cursor:pointer;border:1px solid var(--bd);transition:border-color .15s,box-shadow .15s;object-fit:contain;display:block}
197
+ .artifact-col-img:hover{border-color:#03b79c;box-shadow:0 0 0 3px rgba(3,183,156,0.15)}
198
+ .artifact-col-caption{font-size:10px;color:var(--fg-2);margin-top:6px;display:flex;align-items:center;gap:4px}
199
+ .artifact-col-caption svg{opacity:.5}
200
+ .artifact-col-video{border-radius:8px;overflow:hidden;border:1px solid var(--bd);background:#000}
201
+ .artifact-col-video video{width:100%;display:block}
202
+ .artifact-empty{padding:24px 14px;text-align:center;font-size:12px;color:var(--fg-2);font-style:italic;border:1px dashed var(--bd-m);border-radius:10px}
203
+
204
+ /* \u2500\u2500 Network Overview \u2500\u2500 */
205
+ .net-overview{border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--bg-2)}
206
+ .net-section-hd{padding:8px 12px;font-size:10px;font-weight:600;color:var(--fg-2);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--bd-s);display:flex;align-items:center;gap:6px}
207
+ .net-section-hd svg{opacity:.5}
208
+
209
+ /* \u2500\u2500 Resource Bar Chart \u2500\u2500 */
210
+ .net-bar-wrap{padding:10px 12px 4px}
211
+ .net-bar{display:flex;height:20px;border-radius:5px;overflow:hidden;background:var(--bg-3)}
212
+ .net-bar-seg{min-width:2px;position:relative;transition:opacity .15s}
213
+ .net-bar-seg:hover{opacity:.8}
214
+ .net-bar--mini{height:6px;border-radius:3px;margin-bottom:4px}
215
+ .net-bar--mini .net-bar-seg{min-width:1px}
216
+ .net-bar-legend{display:flex;flex-wrap:wrap;gap:4px 12px;padding:4px 12px 8px;font-size:10px}
217
+ .net-legend-item{display:flex;align-items:center;gap:4px;color:var(--fg-1)}
218
+ .net-legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
219
+ .net-legend-count{font-weight:700;color:var(--fg)}
220
+
221
+ /* \u2500\u2500 Network Step Cards \u2500\u2500 */
222
+ .net-steps-list{border-top:1px solid var(--bd-s)}
223
+ .net-step-card{padding:10px 12px;border-bottom:1px solid var(--bd-xs)}
224
+ .net-step-card:last-child{border-bottom:none}
225
+ .net-step-card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
226
+ .net-step-num{width:20px;height:20px;border-radius:50%;background:var(--bg-3);color:var(--fg-1);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
227
+ .net-step-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-1);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px}
228
+ .net-step-stats{flex-shrink:0;color:var(--fg-2);font-size:10px;white-space:nowrap}
229
+ .net-step-timing{display:flex;gap:10px;font-size:9px;color:var(--fg-2);flex-wrap:wrap}
230
+ .net-step-timing span{display:flex;align-items:center;gap:3px}
231
+ .timing-label{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:8px}
232
+ .timing-val{font-weight:600;color:var(--fg-1)}
233
+
234
+ /* \u2500\u2500 Failed URL badges \u2500\u2500 */
235
+ .fail-url-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;margin-right:5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
236
+ .fail-url-badge--4xx{background:rgba(245,158,11,0.12);color:#f59e0b}
237
+ .fail-url-badge--5xx{background:rgba(239,68,68,0.12);color:#ef4444}
238
+ .fail-url-badge--other{background:rgba(107,114,128,0.1);color:#6b7280}
239
+
240
+ /* \u2500\u2500 Drawer Content \u2014 Test Detail \u2500\u2500 */
241
+ .test-detail{animation:trFadeIn .2s ease-out}
242
+ @keyframes trFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
243
+
244
+ .test-detail-header{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--bd)}
245
+ .test-detail-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
246
+ .detail-status-badge{
247
+ font-size:11px;font-weight:700;padding:4px 14px;border-radius:9999px;
248
+ text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;margin-top:2px;
249
+ }
250
+ .dbg-passed{background:rgba(34,197,94,0.1);color:#22c55e;border:1px solid rgba(34,197,94,0.2)}
251
+ .dbg-failed{background:rgba(239,68,68,0.1);color:#ef4444;border:1px solid rgba(239,68,68,0.2)}
252
+ .dbg-flaky{background:rgba(245,158,11,0.1);color:#f59e0b;border:1px solid rgba(245,158,11,0.2)}
253
+ .dbg-skipped{background:rgba(107,114,128,0.1);color:#6b7280;border:1px solid rgba(107,114,128,0.2)}
254
+ .dbg-timedout{background:rgba(249,115,22,0.1);color:#f97316;border:1px solid rgba(249,115,22,0.2)}
255
+
256
+ .detail-title-section{flex:1;min-width:0}
257
+ .detail-title{font-size:16px;font-weight:700;color:var(--fg);line-height:1.35;margin-bottom:6px}
258
+ .detail-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
259
+ .dm-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px}
260
+ .dm-type{background:rgba(139,92,246,0.12);color:#a78bfa}
261
+ .dm-tag{background:rgba(59,130,246,0.12);color:#60a5fa}
262
+ .dm-retry{background:rgba(245,158,11,0.12);color:#fbbf24}
263
+ .dm-flaky{background:rgba(245,158,11,0.12);color:#fbbf24}
264
+ .detail-sub-meta{display:flex;gap:14px;font-size:11px;color:var(--fg-1);flex-wrap:wrap;margin-top:6px}
265
+ .meta-k{font-weight:600;color:var(--fg-2);text-transform:uppercase;letter-spacing:.04em;font-size:10px;margin-right:3px}
266
+ .detail-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;color:var(--fg-1);background:var(--bg-2);padding:1px 6px;border-radius:4px}
267
+ .detail-file{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--fg-1)}
268
+ .detail-suite{font-size:11px;color:var(--fg-1)}
269
+ .detail-duration{font-size:24px;font-weight:800;color:var(--fg);flex-shrink:0;white-space:nowrap}
270
+
271
+ /* \u2500\u2500 Failure Panel \u2500\u2500 */
272
+ .failure-panel{margin-bottom:20px;border:1px solid rgba(239,68,68,0.2);border-radius:10px;overflow:hidden;background:var(--bg-2)}
273
+ .failure-panel-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(239,68,68,0.08);font-size:12px;font-weight:600;color:#ef4444}
274
+ .failure-message{padding:12px 14px;background:var(--bg-code);color:var(--fg-err);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;line-height:1.6;overflow-x:auto}
275
+ .code-snippet{background:var(--bg-code);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto;border-top:1px solid var(--bd-s)}
276
+ .code-line{display:flex;padding:0 14px;line-height:1.8}
277
+ .code-line.highlight{background:rgba(239,68,68,0.12)}
278
+ .line-num{color:var(--fg-2);min-width:36px;text-align:right;padding-right:14px;user-select:none;flex-shrink:0}
279
+ .line-code{color:var(--fg-code);white-space:pre;overflow-x:auto}
280
+ .line-marker{padding:4px 14px;font-size:10px;color:var(--fg-2);background:var(--bg-2);border-top:1px solid var(--bd-s)}
281
+ .stack-toggle-btn{font-size:11px;color:var(--fg-1);cursor:pointer;padding:8px 14px;border:none;background:var(--bg-3);width:100%;text-align:left;font-family:inherit;border-top:1px solid var(--bd-s);transition:background .15s}
282
+ .stack-toggle-btn:hover{background:var(--bg-2);color:var(--fg)}
283
+ .stack-trace{display:none;padding:12px 14px;background:var(--bg-2);font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;color:var(--fg-2);border-top:1px solid var(--bd-s);max-height:260px;overflow-y:auto}
336
284
  .stack-trace.show{display:block}
337
- /* Network Panel */
338
- .network-panel{margin-top:16px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
339
- .network-header{font-size:12px;font-weight:600;color:var(--text-strong);padding:10px 12px;
340
- background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
341
- .network-summary{display:flex;gap:16px;padding:10px 12px;font-size:12px;flex-wrap:wrap}
342
- .net-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
343
- .net-stat .val{font-weight:700;font-size:14px;color:var(--text-primary)}
344
- .net-stat .lbl{color:var(--text-muted);font-size:11px}
345
- .net-stat.has-failed .val{color:var(--failed-count)}
346
- .resource-breakdown{display:flex;gap:6px;padding:8px 12px;flex-wrap:wrap;border-top:1px solid var(--border-light)}
347
- .resource-type{display:flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;
348
- border-radius:4px;background:var(--bg-tertiary);color:var(--text-strong)}
349
- .resource-type .rt-count{font-weight:700}
350
- .resource-type--zero{opacity:.45}
351
- /* Empty State */
352
- .empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
353
- .empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.4}
354
- .empty-state p{font-size:15px;font-weight:500}
355
- /* No-network */
356
- .no-network{font-size:12px;color:var(--text-muted);padding:10px 12px;font-style:italic}
357
- /* Section title */
358
- .section-title{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:12px;
359
- display:flex;align-items:center;gap:8px}
360
- .section-title::before{content:'';width:4px;height:18px;background:var(--accent);border-radius:2px}
361
- /* Artifacts Panel */
362
- .artifacts-panel{margin-top:10px;padding:10px 12px;background:var(--bg-secondary);border:1px solid var(--border);
363
- border-radius:8px}
364
- .artifacts-panel-header{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
365
- color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
366
- .artifacts-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
367
- /* Screenshot */
368
- .artifact-screenshot-wrap{display:flex;flex-direction:column;gap:4px;margin:8px 0}
369
- .artifact-thumbnail{width:100%;max-width:100%;height:auto;border-radius:8px;cursor:pointer;
370
- border:1px solid var(--border);transition:border-color .15s,box-shadow .15s;display:block}
371
- .artifact-thumbnail:hover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-ring)}
372
- .artifact-label{font-size:10px;color:var(--text-muted);text-align:center}
373
- /* Video */
374
- .artifact-video-inline{margin:8px 0}
375
- .artifact-video-player{display:block;width:100%;max-width:100%;height:auto;border-radius:8px;
376
- border:1px solid var(--border);background:#000}
377
- /* Lightbox */
378
- .lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;
379
- display:flex;align-items:center;justify-content:center;cursor:zoom-out}
380
- .lightbox-overlay img{max-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.4)}
381
- .lightbox-close{position:fixed;top:16px;right:16px;z-index:1001;width:36px;height:36px;
382
- border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:20px;
383
- cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
384
- .lightbox-close:hover{background:rgba(255,255,255,.3)}
385
- /* Detailed Network Logs */
386
- .network-log{margin-top:4px}
387
- .network-log-summary{display:flex;gap:12px;align-items:center;font-size:12px;margin-bottom:8px}
388
- .net-log-count{font-weight:600;color:var(--text-strong)}
389
- .net-log-failed{font-weight:600;color:var(--failed-count)}
390
- .network-entry{border-bottom:1px solid var(--border-light)}
391
- .network-entry:last-child{border-bottom:none}
392
- .network-entry--failed{border-left:3px solid var(--failed-count)}
393
- .network-entry-row{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;
394
- font-size:12px;transition:background .1s}
395
- .network-entry-row:hover{background:var(--bg-secondary)}
396
- .network-entry-row.expanded .net-chevron{transform:rotate(90deg)}
397
- .net-status-badge{font-size:11px;font-weight:700;padding:1px 6px;border-radius:4px;
398
- min-width:36px;text-align:center;flex-shrink:0}
399
- .net-status-2xx{background:var(--net-2xx-bg);color:var(--net-2xx-text)}
400
- .net-status-3xx{background:var(--net-3xx-bg);color:var(--net-3xx-text)}
401
- .net-status-4xx{background:var(--net-4xx-bg);color:var(--net-4xx-text)}
402
- .net-status-5xx{background:var(--net-5xx-bg);color:var(--net-5xx-text);font-weight:800}
403
- .net-status-0{background:var(--net-0-bg);color:var(--net-0-text)}
404
- .net-method{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
405
- font-size:11px;color:var(--text-strong);flex-shrink:0;min-width:40px}
406
- .net-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
407
- color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
408
- .net-time{font-size:11px;color:var(--text-muted);flex-shrink:0;text-align:right;min-width:48px}
409
- .net-chevron{flex-shrink:0;color:var(--text-muted);transition:transform .2s}
410
- .network-entry-details{display:none;padding:8px 0 12px;border-top:1px solid var(--border-light)}
411
- .network-entry-details.show{display:block}
412
- .net-section-title{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;
413
- letter-spacing:.04em;margin:8px 0 4px;padding-top:4px}
414
- .net-section-title:first-child{margin-top:0}
415
- .net-headers-table{width:100%;font-size:11px;border-collapse:collapse}
416
- .net-headers-table td{padding:2px 8px;vertical-align:top;border-bottom:1px solid var(--border-light)}
417
- .net-header-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;
418
- color:var(--text-strong);white-space:nowrap;width:180px}
419
- .net-header-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-secondary);
420
- word-break:break-all}
421
- .net-truncated-note{font-size:10px;color:var(--flaky-count);font-style:italic;margin-top:2px}
422
- /* Code Editor */
423
- .code-editor{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:4px 0}
424
- .code-editor-toolbar{display:flex;align-items:center;justify-content:space-between;
425
- padding:4px 8px 4px 12px;background:var(--bg-tertiary);border-bottom:1px solid var(--border);min-height:28px}
426
- .code-editor-lang{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
427
- color:var(--text-muted);text-transform:lowercase}
428
- .code-editor-copy{font-size:11px;font-family:inherit;padding:2px 10px;border-radius:4px;
429
- border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);
430
- cursor:pointer;transition:background .15s,color .15s,border-color .15s}
431
- .code-editor-copy:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
432
- .code-editor-copy.copied{background:var(--passed-bg);color:var(--passed-text);border-color:var(--passed-border)}
433
- .code-editor-body{display:flex;background:var(--bg-code);max-height:300px;overflow:auto}
434
- .code-editor-lines{display:flex;flex-direction:column;padding:8px 0;
435
- border-right:1px solid var(--border);flex-shrink:0;user-select:none;position:sticky;left:0;
436
- background:var(--bg-code);z-index:1}
437
- .code-editor-line-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
438
- color:var(--text-muted);text-align:right;padding:0 10px 0 12px;line-height:1.6;min-width:40px}
439
- .code-editor-content{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
440
- color:var(--bg-code-text);padding:8px 12px;margin:0;white-space:pre;line-height:1.6;flex:1;
441
- overflow-x:visible;tab-size:2}
442
- .net-binary-note{font-size:11px;color:var(--text-muted);font-style:italic;padding:4px 0}
443
- .net-empty-note{font-size:11px;color:var(--text-muted);font-style:italic;padding:2px 0}
444
- .net-error-msg{font-size:12px;color:var(--failed-count);font-weight:600;padding:4px 0;margin-bottom:4px}
445
- /* Filter Bar */
446
- .filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px;
447
- padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px}
448
- .filter-section{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
449
- .filter-section-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;
450
- letter-spacing:.04em;margin-right:2px}
451
- .filter-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:9999px;
452
- font-size:12px;font-weight:500;border:1px solid var(--border);background:var(--bg-card);
453
- color:var(--text-secondary);cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s}
454
- .filter-chip:hover{border-color:var(--accent);color:var(--text-primary)}
455
- .filter-chip--active{background:var(--accent);color:#fff;border-color:var(--accent)}
456
- .filter-chip--active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
457
- .filter-chip--dimmed{opacity:.45}
458
- .filter-chip-count{font-size:11px;font-weight:600}
459
- .filter-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
460
- .filter-clear{padding:4px 12px;border-radius:9999px;font-size:12px;font-weight:500;
461
- border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
462
- cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
463
- .filter-clear:hover{background:var(--failed-bg);color:var(--failed-text);border-color:var(--failed-border)}
464
- .filter-indicator{font-size:12px;color:var(--text-secondary);font-weight:500}
465
- .filter-indicator span{font-weight:700;color:var(--text-primary)}
466
- .filter-hidden{display:none!important}
467
- .filter-empty-state{text-align:center;padding:40px 20px;color:var(--text-muted)}
468
- .filter-empty-state p{font-size:14px;margin-bottom:12px}
469
- .filter-empty-state button{padding:6px 16px;border-radius:9999px;font-size:13px;font-weight:500;
470
- border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;
471
- font-family:inherit;transition:background .15s,color .15s}
472
- .filter-empty-state button:hover{background:var(--accent);color:#fff}
473
- /* Reduced Motion */
474
- @media(prefers-reduced-motion:reduce){
475
- *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
285
+
286
+ /* \u2500\u2500 Section Label \u2500\u2500 */
287
+ .section-label{font-size:11px;font-weight:700;color:var(--fg-1);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:flex;align-items:center;gap:8px}
288
+ .section-label::before{content:'';width:3px;height:14px;background:#03b79c;border-radius:2px}
289
+
290
+ /* \u2500\u2500 Artifacts Panel \u2500\u2500 */
291
+ .artifacts-panel{margin-bottom:20px;border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--bg-2)}
292
+ .artifacts-toolbar{display:flex;align-items:center;gap:0;padding:0;background:var(--bg-3);border-bottom:1px solid var(--bd-s)}
293
+ .artifacts-label{display:flex;align-items:center;gap:6px;padding:9px 14px;font-size:11px;font-weight:600;color:var(--fg-1);text-transform:uppercase;letter-spacing:.04em;border-right:1px solid var(--bd-s);flex-shrink:0}
294
+ .artifact-tab{padding:9px 16px;font-size:12px;font-weight:500;color:var(--fg-2);cursor:pointer;border:none;background:transparent;font-family:inherit;transition:color .15s,background .15s;position:relative;display:flex;align-items:center;gap:6px}
295
+ .artifact-tab:hover{color:var(--fg-1);background:var(--hvr-s)}
296
+ .artifact-tab.active{color:var(--fg);background:var(--bd-xs)}
297
+ .artifact-tab.active::after{content:'';position:absolute;bottom:0;left:8px;right:8px;height:2px;background:#03b79c;border-radius:1px}
298
+ .artifact-tab svg{flex-shrink:0;opacity:.6}
299
+ .artifact-tab.active svg{opacity:1}
300
+ .artifact-pane{display:none;padding:14px}
301
+ .artifact-pane.active{display:block;animation:trFadeIn .15s ease-out}
302
+ .screenshot-pane{display:flex;flex-direction:column;align-items:center;gap:8px}
303
+ .artifact-thumb{max-height:260px;max-width:100%;width:auto;border-radius:8px;cursor:pointer;border:1px solid var(--bd);transition:border-color .15s,box-shadow .15s,transform .15s;object-fit:contain;display:block}
304
+ .artifact-thumb:hover{border-color:#03b79c;box-shadow:0 0 0 3px rgba(3,183,156,0.15);transform:scale(1.01)}
305
+ .artifact-caption{font-size:11px;color:var(--fg-2);display:flex;align-items:center;gap:4px}
306
+ .artifact-caption svg{opacity:.5}
307
+ .video-pane{display:flex;flex-direction:column;gap:0}
308
+ .video-player{border-radius:8px;overflow:hidden;border:1px solid var(--bd);background:#000}
309
+ .video-player video{width:100%;max-height:340px;display:block}
310
+
311
+ /* \u2500\u2500 Navigation Timeline \u2500\u2500 */
312
+ .nav-timeline{position:relative;margin-bottom:20px}
313
+ .nav-step{display:flex;gap:12px;position:relative}
314
+ .step-connector{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:28px}
315
+ .step-node{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;z-index:1;border:2px solid;transition:transform .15s}
316
+ .step-node:hover{transform:scale(1.1)}
317
+ .node-ok{background:rgba(3,183,156,0.1);border-color:rgba(3,183,156,0.35);color:#2dd4a8}
318
+ .node-warn{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.35);color:#f59e0b}
319
+ .step-line{width:2px;flex:1;min-height:10px;background:linear-gradient(to bottom,rgba(3,183,156,0.35),rgba(3,183,156,0.08))}
320
+ .nav-step:last-child .step-line{display:none}
321
+ .step-content{flex:1;min-width:0;padding-bottom:14px}
322
+ .nav-step:last-child .step-content{padding-bottom:0}
323
+ .step-header{display:flex;align-items:center;gap:7px;cursor:pointer;padding:4px 8px;border-radius:6px;margin:-4px -8px;transition:background .1s;flex-wrap:wrap}
324
+ .step-header:hover{background:var(--hvr-s)}
325
+ .step-url{font-size:12px;font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0}
326
+ .nav-badge{font-size:9px;font-weight:600;padding:2px 7px;border-radius:9999px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;white-space:nowrap}
327
+ .nb-goto{background:rgba(59,130,246,0.12);color:#60a5fa}
328
+ .nb-navigation{background:rgba(99,102,241,0.12);color:#818cf8}
329
+ .nb-page_load{background:rgba(129,140,248,0.12);color:#a5b4fc}
330
+ .nb-back{background:rgba(34,211,238,0.12);color:#22d3ee}
331
+ .nb-forward{background:rgba(34,211,238,0.12);color:#67e8f9}
332
+ .nb-spa_route{background:rgba(139,92,246,0.12);color:#a78bfa}
333
+ .nb-spa_replace{background:rgba(167,139,250,0.12);color:#c4b5fd}
334
+ .nb-hash_change{background:rgba(236,72,153,0.12);color:#f472b6}
335
+ .nb-popstate{background:rgba(244,114,182,0.12);color:#f9a8d4}
336
+ .nb-link_click{background:rgba(251,113,133,0.12);color:#fb7185}
337
+ .nb-form_submit{background:rgba(244,63,94,0.12);color:#fb7185}
338
+ .nb-redirect{background:rgba(249,115,22,0.12);color:#fb923c}
339
+ .nb-refresh{background:rgba(56,189,248,0.12);color:#38bdf8}
340
+ .nb-dummy{background:rgba(107,114,128,0.06);color:var(--fg-2)}
341
+ .nb-fallback{background:rgba(107,114,128,0.06);color:var(--fg-2)}
342
+ .nb-manual_record{background:rgba(234,179,8,0.12);color:#facc15}
343
+ .step-meta{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--fg-2);margin-left:auto;flex-shrink:0}
344
+
345
+ /* Step expandable detail */
346
+ .step-detail{display:none;margin-top:8px;border:1px solid var(--bd);border-radius:8px;overflow:hidden;background:var(--bg-2)}
347
+ .step-detail.show{display:block;animation:trSlideDown .2s ease-out}
348
+ @keyframes trSlideDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
349
+ .net-header{display:flex;align-items:center;gap:6px;padding:7px 12px;font-size:11px;font-weight:600;color:var(--fg-1);background:var(--bg-3);border-bottom:1px solid var(--bd-s)}
350
+ .net-header.has-fails{color:#ef4444;background:rgba(239,68,68,0.08)}
351
+ .net-stats-row{display:flex;gap:8px;padding:8px 12px;flex-wrap:wrap}
352
+ .net-stat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 10px;border-radius:6px;background:var(--bg-3);min-width:50px}
353
+ .net-stat .nv{font-weight:700;font-size:14px;color:var(--fg);line-height:1}
354
+ .net-stat .nl{color:var(--fg-2);font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
355
+ .net-stat.net-fail{background:rgba(239,68,68,0.08)}.net-stat.net-fail .nv{color:#ef4444}
356
+ .resource-row{display:flex;gap:4px;padding:7px 12px;flex-wrap:wrap;border-top:1px solid var(--bd-xs)}
357
+ .res-type{display:flex;align-items:center;gap:3px;font-size:10px;padding:2px 7px;border-radius:4px;background:var(--bg-3);color:var(--fg-1);font-weight:500}
358
+ .res-type .rc{font-weight:700}
359
+ .res-type--zero{opacity:.25}
360
+ .fail-urls{padding:7px 12px;border-top:1px solid rgba(239,68,68,0.12);background:rgba(239,68,68,0.06);max-height:160px;overflow-y:auto}
361
+ .fail-url{font-size:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#ef4444;padding:2px 0;word-break:break-all}
362
+ .fail-url-status{font-weight:700;margin-right:4px}
363
+
364
+ /* \u2500\u2500 Network DevTools Panel \u2500\u2500 */
365
+ .ndt{border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:var(--bg-1)}
366
+ .ndt-toolbar{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg-2);border-bottom:1px solid var(--bd);flex-wrap:wrap}
367
+ .ndt-filter{display:flex;gap:2px;flex-wrap:wrap}
368
+ .ndt-filter-btn{font-size:10px;padding:2px 8px;border-radius:4px;border:1px solid transparent;background:none;color:var(--fg-2);cursor:pointer;font-weight:500;transition:all .15s}
369
+ .ndt-filter-btn:hover{background:var(--hvr);color:var(--fg-1)}
370
+ .ndt-filter-btn.active{background:var(--bg-3);color:var(--fg);border-color:var(--bd-m);font-weight:600}
371
+ .ndt-search{flex:1;min-width:100px;max-width:220px;font-size:10px;padding:3px 8px;border-radius:4px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);outline:none;font-family:inherit}
372
+ .ndt-search:focus{border-color:rgba(3,183,156,0.4)}
373
+ .ndt-count{font-size:10px;color:var(--fg-2);margin-left:auto;white-space:nowrap}
374
+ .ndt-list{max-height:600px;overflow-y:auto}
375
+ .ndt-list::-webkit-scrollbar{width:5px}.ndt-list::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:4px}
376
+ .ndt-row{display:grid;grid-template-columns:42px 50px 1fr 52px 56px 56px;align-items:center;gap:4px;padding:5px 10px;border-bottom:1px solid var(--bd-xs);cursor:pointer;font-size:11px;transition:background .1s}
377
+ .ndt-row:hover{background:var(--hvr)}
378
+ .ndt-row.ndt-row--open{background:var(--bg-2)}
379
+ .ndt-row.ndt-row--fail{background:rgba(239,68,68,0.04)}
380
+ .ndt-row.ndt-row--fail:hover{background:rgba(239,68,68,0.08)}
381
+ .ndt-status{font-weight:700;font-size:10px;padding:1px 5px;border-radius:3px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
382
+ .ndt-status--2xx{background:rgba(34,197,94,0.12);color:#22c55e}
383
+ .ndt-status--3xx{background:rgba(59,130,246,0.12);color:#60a5fa}
384
+ .ndt-status--4xx{background:rgba(249,115,22,0.12);color:#fb923c}
385
+ .ndt-status--5xx{background:rgba(239,68,68,0.12);color:#ef4444}
386
+ .ndt-status--0{background:rgba(239,68,68,0.12);color:#ef4444}
387
+ .ndt-method{font-weight:600;font-size:10px;color:var(--fg-1);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase}
388
+ .ndt-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px}
389
+ .ndt-type{font-size:9px;padding:1px 5px;border-radius:3px;background:var(--bg-3);color:var(--fg-2);text-align:center;font-weight:500}
390
+ .ndt-size{font-size:10px;color:var(--fg-2);text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
391
+ .ndt-time{font-size:10px;color:var(--fg-2);text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
392
+ .ndt-detail{display:none;border-bottom:1px solid var(--bd);background:var(--bg);animation:trSlideDown .15s ease-out}
393
+ .ndt-detail.show{display:block}
394
+ .ndt-detail-tabs{display:flex;gap:0;border-bottom:1px solid var(--bd);background:var(--bg-2)}
395
+ .ndt-detail-tab{font-size:10px;padding:6px 14px;border:none;background:none;color:var(--fg-2);cursor:pointer;font-weight:500;border-bottom:2px solid transparent;transition:all .15s}
396
+ .ndt-detail-tab:hover{color:var(--fg-1);background:var(--hvr)}
397
+ .ndt-detail-tab.active{color:#03b79c;border-bottom-color:#03b79c;font-weight:600}
398
+ .ndt-detail-pane{display:none;padding:10px 14px;max-height:360px;overflow-y:auto}
399
+ .ndt-detail-pane::-webkit-scrollbar{width:5px}.ndt-detail-pane::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:4px}
400
+ .ndt-detail-pane.active{display:block}
401
+ .ndt-general{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:11px}
402
+ .ndt-general-k{color:var(--fg-2);font-weight:600;white-space:nowrap}
403
+ .ndt-general-v{color:var(--fg);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px}
404
+ .ndt-general-v.ndt-err{color:#ef4444}
405
+ .ndt-headers-tbl{width:100%;border-collapse:collapse;font-size:10px}
406
+ .ndt-headers-tbl th{text-align:left;padding:4px 8px;background:var(--bg-2);color:var(--fg-2);font-weight:600;border-bottom:1px solid var(--bd);font-size:9px;text-transform:uppercase;letter-spacing:.04em}
407
+ .ndt-headers-tbl td{padding:4px 8px;border-bottom:1px solid var(--bd-xs);vertical-align:top}
408
+ .ndt-headers-tbl td:first-child{color:var(--fg-1);font-weight:600;white-space:nowrap;width:180px}
409
+ .ndt-headers-tbl td:last-child{color:var(--fg);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
410
+ .ndt-body-wrap{position:relative}
411
+ .ndt-body-pre{margin:0;padding:10px;background:var(--bg-code);border-radius:6px;border:1px solid var(--bd);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--fg-code);white-space:pre-wrap;word-break:break-all;max-height:320px;overflow-y:auto;line-height:1.5;tab-size:2}
412
+ .ndt-body-pre::-webkit-scrollbar{width:5px}.ndt-body-pre::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:4px}
413
+ .ndt-body-empty{padding:16px;text-align:center;font-size:11px;color:var(--fg-2);font-style:italic}
414
+ .ndt-body-truncated{display:inline-block;margin-top:6px;font-size:9px;padding:2px 8px;border-radius:4px;background:rgba(249,115,22,0.1);color:#fb923c;font-weight:500}
415
+ .ndt-hdr-section{margin-bottom:10px}
416
+ .ndt-hdr-label{font-size:10px;font-weight:600;color:var(--fg-1);margin-bottom:4px;display:flex;align-items:center;gap:5px}
417
+ .ndt-hdr-label svg{opacity:.5}
418
+
419
+ /* \u2500\u2500 Lightbox \u2500\u2500 */
420
+ .lightbox-overlay{position:fixed;inset:0;background:var(--lb-bg);z-index:1000;display:flex;align-items:center;justify-content:center;cursor:zoom-out;animation:trFadeIn .15s}
421
+ .lightbox-overlay img{max-width:92vw;max-height:92vh;border-radius:8px;box-shadow:0 8px 40px var(--lb-shadow)}
422
+ .lightbox-close{position:fixed;top:16px;right:16px;z-index:1001;width:40px;height:40px;border-radius:50%;border:none;background:var(--lb-btn);color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;backdrop-filter:blur(8px)}
423
+ .lightbox-close:hover{background:var(--lb-btn-h)}
424
+
425
+ /* \u2500\u2500 Responsive \u2500\u2500 */
426
+ @media(max-width:1100px){
427
+ .drawer{width:60vw;max-width:60vw}
476
428
  }
477
- `;
478
-
479
- // src/html-js-render.ts
480
- var JS_RENDER = `
481
- function esc(s){if(!s)return '';return s.replace(/&/g,'&amp;').replace(/</g,'&lt;')
482
- .replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}
483
- function stripAnsi(s){return s?s.replace(/\\u001b\\[[0-9;]*m/g,'').replace(/\\x1b\\[[0-9;]*m/g,''):''}
484
- function fmtDur(ms){if(ms<1000)return Math.round(ms)+'ms';
485
- if(ms<60000)return (ms/1000).toFixed(1)+'s';
486
- var m=Math.floor(ms/60000),s=Math.round((ms%60000)/1000);
487
- return s>0?m+'m '+s+'s':m+'m'}
488
- function fmtBytes(b){if(b===0)return '0 B';if(b<1024)return b+' B';
489
- if(b<1048576)return (b/1024).toFixed(1)+' KB';return (b/1048576).toFixed(1)+' MB'}
490
- function fmtTime(iso){try{return new Date(iso).toLocaleString()}catch(e){return iso}}
491
-
492
- function renderCodeSnippet(code,failLine){
493
- var lines=code.split('\\n');
494
- var out='<div class="code-snippet">';
495
- for(var k=0;k<lines.length;k++){
496
- var raw=lines[k];
497
- var numMatch=raw.match(/^\\s*(>?\\s*)(\\d+)\\s*\\|/);
498
- var lineNum=numMatch?numMatch[2]:'';
499
- var isHighlight=raw.trimStart().startsWith('>');
500
- var codePart=raw.replace(/^\\s*>?\\s*\\d+\\s*\\|/,'');
501
- out+='<div class="code-line'+(isHighlight?' highlight':'')+'">';
502
- out+='<span class="line-num">'+esc(lineNum)+'</span>';
503
- out+='<span class="line-code">'+esc(codePart)+'</span>';
504
- out+='</div>';
429
+ @media(max-width:800px){
430
+ .drawer{width:85vw;max-width:85vw}
431
+ }
432
+ @media(max-width:640px){
433
+ .wrap{padding:16px 12px 48px}
434
+ .top-bar{flex-direction:column;align-items:flex-start;gap:8px}
435
+ .run-meta{margin-left:0}
436
+ .summary-strip{flex-wrap:wrap}
437
+ .summary-chip{min-width:70px}
438
+ .filter-bar{flex-direction:column;align-items:stretch}
439
+ .search-box{width:100%;margin-left:0}
440
+ .drawer{width:100%;max-width:100%}
441
+ .cta-btn{font-size:10px;padding:5px 10px;order:10}
442
+ .detail-title{font-size:14px}
443
+ .detail-duration{font-size:20px}
444
+ }
445
+
446
+ /* \u2500\u2500 Print \u2500\u2500 */
447
+ @media print{
448
+ body{background:#fff;color:#000}
449
+ .drawer-backdrop,.drawer{display:none}
450
+ .lightbox-overlay,.lightbox-close{display:none}
451
+ .test-row-arrow{display:none}
452
+ .summary-chip,.filter-chip,.status-indicator,.detail-status-badge,.dm-badge,.nav-badge,.trb,.step-node{
453
+ print-color-adjust:exact;-webkit-print-color-adjust:exact;
505
454
  }
506
- out+='</div>';
507
- return out;
508
455
  }
456
+ `;var _=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 247" fill="none">
457
+ <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)"/>
458
+ <defs><linearGradient id="paint0_linear_55_11" x1="98" y1="0.000244141" x2="98" y2="247" gradientUnits="userSpaceOnUse">
459
+ <stop stop-color="#03B79C"/><stop offset="0.504808" stop-color="#4EDAA4"/><stop offset="0.865285" stop-color="#84F3AA"/>
460
+ </linearGradient></defs></svg>`,N=`<svg width="32" height="40" viewBox="0 0 196 247" fill="none" xmlns="http://www.w3.org/2000/svg">
461
+ <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)"/>
462
+ <defs><linearGradient id="paint0_linear_55_11" x1="98" y1="0.000244141" x2="98" y2="247" gradientUnits="userSpaceOnUse">
463
+ <stop stop-color="#03B79C"/><stop offset="0.504808" stop-color="#4EDAA4"/><stop offset="0.865285" stop-color="#84F3AA"/>
464
+ </linearGradient></defs></svg>`;var q=`
465
+ /* \u2500\u2500 Utilities \u2500\u2500 */
466
+ function esc(s){if(!s)return '';return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}
467
+ function stripAnsi(s){return s?s.replace(/\\u001b\\[[0-9;]*m/g,'').replace(/\\x1b\\[[0-9;]*m/g,''):''}
468
+ 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'}
469
+ 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'}
470
+ function fmtDate(iso){try{return new Date(iso).toLocaleString()}catch(e){return iso}}
471
+ function shortTitle(t){var p=t.split(' > ');return p.length>1?p[p.length-1]:t}
509
472
 
510
- function renderNetwork(stats){
511
- if(!stats)return '<div class="no-network">No network data captured</div>';
512
- var hasFailedReqs=stats.failedRequests>0;
513
- var out='<div class="network-panel'+(hasFailedReqs?' network-panel--has-failures':'')+'">';
514
- 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>';
515
- out+='<div class="network-summary">';
516
- out+='<div class="net-stat"><span class="val">'+stats.totalRequests+'</span><span class="lbl">Requests</span></div>';
517
- out+='<div class="net-stat'+(hasFailedReqs?' has-failed':'')+'"><span class="val">'+stats.failedRequests+'</span><span class="lbl">Failed</span></div>';
518
- out+='<div class="net-stat"><span class="val">'+fmtBytes(stats.totalBytes)+'</span><span class="lbl">Transferred</span></div>';
519
- out+='</div>';
520
- 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>';
521
- 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>';}
473
+ /* \u2500\u2500 Data Transformation \u2500\u2500 */
474
+ var testMap={};
475
+ for(var i=0;i<data.timeline.length;i++){
476
+ var entry=data.timeline[i];
477
+ for(var j=0;j<entry.tests.length;j++){
478
+ var t=entry.tests[j];
479
+ if(!testMap[t.testId]){
480
+ testMap[t.testId]={
481
+ testId:t.testId,title:t.title,status:t.status,duration:t.duration,
482
+ startedAt:t.startedAt,completedAt:t.completedAt,retryCount:t.retryCount,
483
+ tags:t.tags,failure:t.failure,filePath:t.filePath,suiteName:t.suiteName,
484
+ testType:t.testType,isFlaky:t.isFlaky,retryStatus:t.retryStatus,
485
+ expectedStatus:t.expectedStatus,actualStatus:t.actualStatus,
486
+ artifacts:t.artifacts,networkRequests:t.networkRequests||[],steps:[]
487
+ };
488
+ }
489
+ testMap[t.testId].steps.push({
490
+ url:entry.url,navigationType:entry.navigationType,
491
+ visitedAt:entry.visitedAt,duration:entry.duration,specFile:entry.specFile,
492
+ domContentLoadedAt:entry.domContentLoadedAt,networkIdleAt:entry.networkIdleAt,
493
+ networkStats:entry.networkStats
494
+ });
495
+ }
522
496
  }
523
- if(stats.byType){
524
- var types=[['XHR','xhr'],['Document','document'],['Script','script'],['Stylesheet','stylesheet'],['Image','image'],['Font','font'],['Other','other']];
525
- out+='<div class="resource-breakdown">';
526
- for(var ti=0;ti<types.length;ti++){
527
- var cnt=stats.byType[types[ti][1]]||0;
528
- out+='<div class="resource-type'+(cnt===0?' resource-type--zero':'')+'"><span class="rt-count">'+cnt+'</span> '+types[ti][0]+'</div>';
497
+ var tests=[];
498
+ for(var id in testMap){if(testMap.hasOwnProperty(id))tests.push(testMap[id])}
499
+ tests.sort(function(a,b){
500
+ if(a.filePath!==b.filePath)return a.filePath<b.filePath?-1:1;
501
+ return a.startedAt<b.startedAt?-1:1;
502
+ });
503
+
504
+ /* \u2500\u2500 State \u2500\u2500 */
505
+ var searchQuery='';
506
+
507
+ /* \u2500\u2500 DOM Refs \u2500\u2500 */
508
+ var runMetaEl=document.getElementById('run-meta');
509
+ var summaryEl=document.getElementById('summary-strip');
510
+ var filterEl=document.getElementById('filter-bar');
511
+ var testGridEl=document.getElementById('test-grid');
512
+ var drawerEl=document.getElementById('drawer');
513
+ var drawerBodyEl=document.getElementById('drawer-body');
514
+ var drawerBackdropEl=document.getElementById('drawer-backdrop');
515
+
516
+ /* \u2500\u2500 Render: Run Meta \u2500\u2500 */
517
+ function renderRunMeta(){
518
+ var h='';
519
+ h+='<div class="run-meta-item"><span class="run-meta-label">Run</span><span class="run-id-tag">'+esc(data.testRunId.substring(0,8))+'</span></div>';
520
+ h+='<div class="run-meta-item"><span class="run-meta-label">Duration</span>'+fmtDur(data.totalDuration)+'</div>';
521
+ h+='<div class="run-meta-item">'+fmtDate(data.startedAt)+'</div>';
522
+ if(data.ci){
523
+ h+='<div class="run-meta-item"><span class="ci-tag">'+esc(data.ci.provider)+'</span></div>';
524
+ if(data.ci.branch)h+='<div class="run-meta-item"><span class="run-meta-label">Branch</span>'+esc(data.ci.branch)+'</div>';
525
+ if(data.ci.commitSha)h+='<div class="run-meta-item"><span class="run-meta-label">Commit</span><span class="run-id-tag">'+esc(data.ci.commitSha.substring(0,8))+'</span></div>';
529
526
  }
530
- out+='</div>';
527
+ if(data.shardRunIds&&data.shardRunIds.length>0){
528
+ h+='<div class="run-meta-item"><span class="merged-tag">Merged ('+data.shardRunIds.length+' shards)</span></div>';
529
+ }
530
+ runMetaEl.innerHTML=h;
531
531
  }
532
- out+='</div>';
533
- return out;
534
- }
535
532
 
536
- (function(){
537
- var data=JSON.parse(document.getElementById('report-data').textContent);
538
- var app=document.getElementById('app');
539
- var _testIdx=0;
540
-
541
- // Header
542
- var h='<div class="header">__LOGO_SVG__<h1>TestRelic Report</h1>';
543
- h+='<button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme" id="theme-toggle">';
544
- 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>';
545
- 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>';
546
- h+='</button></div>';
547
- h+='<div class="meta">';
548
- h+='<div class="meta-item"><span class="meta-label">Run ID</span><span class="run-id">'+esc(data.testRunId)+'</span></div>';
549
- h+='<div class="meta-item"><span class="meta-label">Started</span>'+fmtTime(data.startedAt)+'</div>';
550
- h+='<div class="meta-item"><span class="meta-label">Completed</span>'+fmtTime(data.completedAt)+'</div>';
551
- h+='<div class="meta-item"><span class="meta-label">Duration</span>'+fmtDur(data.totalDuration)+'</div>';
552
- if(data.ci){
553
- h+='<div class="meta-item"><span class="ci-badge">'+esc(data.ci.provider)+'</span></div>';
554
- if(data.ci.branch)h+='<div class="meta-item"><span class="meta-label">Branch</span>'+esc(data.ci.branch)+'</div>';
555
- if(data.ci.commitSha)h+='<div class="meta-item"><span class="meta-label">Commit</span><span class="run-id">'+esc(data.ci.commitSha.substring(0,8))+'</span></div>';
556
- if(data.ci.buildId)h+='<div class="meta-item"><span class="meta-label">Build</span>'+esc(data.ci.buildId)+'</div>';
533
+ /* \u2500\u2500 Render: Summary \u2500\u2500 */
534
+ function renderSummary(){
535
+ var s=data.summary;var h='';
536
+ h+='<div class="summary-chip s-total"><div class="s-count">'+s.total+'</div><div class="s-label">Total</div></div>';
537
+ h+='<div class="summary-chip s-passed"><div class="s-count">'+s.passed+'</div><div class="s-label">Passed</div></div>';
538
+ h+='<div class="summary-chip s-failed"><div class="s-count">'+s.failed+'</div><div class="s-label">Failed</div></div>';
539
+ h+='<div class="summary-chip s-flaky"><div class="s-count">'+s.flaky+'</div><div class="s-label">Flaky</div></div>';
540
+ h+='<div class="summary-chip s-skipped"><div class="s-count">'+s.skipped+'</div><div class="s-label">Skipped</div></div>';
541
+ if(s.timedout!==undefined)h+='<div class="summary-chip s-timedout"><div class="s-count">'+s.timedout+'</div><div class="s-label">Timeout</div></div>';
542
+ summaryEl.innerHTML=h;
557
543
  }
558
- if(data.shardRunIds&&data.shardRunIds.length>0){
559
- h+='<div class="meta-item"><span class="merged-badge">Merged Report ('+data.shardRunIds.length+' shards)</span></div>';
544
+
545
+ /* \u2500\u2500 Render: Test Grid \u2500\u2500 */
546
+ function renderTestGrid(){
547
+ var filtered=getFilteredTests();
548
+ if(filtered.length===0){testGridEl.innerHTML='<div class="no-tests">No tests match your filters</div>';return;}
549
+ var h='';var lastFile='';
550
+ for(var i=0;i<filtered.length;i++){
551
+ var t=filtered[i];
552
+ if(t.filePath!==lastFile){
553
+ if(lastFile)h+='</div></div>';
554
+ h+='<div class="file-group"><div class="file-group-header">'+esc(t.filePath)+'</div><div class="file-group-card">';
555
+ lastFile=t.filePath;
556
+ }
557
+ h+='<div class="test-row" data-testid="'+esc(t.testId)+'">';
558
+ h+='<div class="status-indicator si-'+t.status+'"></div>';
559
+ h+='<div class="test-row-info">';
560
+ h+='<div class="test-row-title" title="'+esc(t.title)+'">'+esc(shortTitle(t.title))+'</div>';
561
+ var hasBadges=(t.testType&&t.testType!=='unknown')||t.isFlaky||(t.tags&&t.tags.length>0);
562
+ if(hasBadges){
563
+ h+='<div class="test-row-badges">';
564
+ if(t.testType&&t.testType!=='unknown')h+='<span class="trb trb-type">'+esc(t.testType)+'</span>';
565
+ if(t.isFlaky)h+='<span class="trb trb-flaky">flaky</span>';
566
+ if(t.retryCount>0)h+='<span class="trb trb-retry">'+t.retryCount+' retries</span>';
567
+ if(t.tags){for(var ti=0;ti<t.tags.length;ti++){if(t.tags[ti])h+='<span class="trb trb-tag">'+esc(t.tags[ti])+'</span>';}}
568
+ h+='</div>';
569
+ }
570
+ h+='</div>';
571
+ h+='<span class="test-row-dur">'+fmtDur(t.duration)+'</span>';
572
+ h+='<svg class="test-row-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
573
+ h+='</div>';
574
+ }
575
+ if(lastFile)h+='</div></div>';
576
+ testGridEl.innerHTML=h;
560
577
  }
561
- h+='</div>';
562
578
 
563
- // Summary
564
- var s=data.summary;
565
- h+='<div class="summary">';
566
- h+='<div class="summary-card card-total"><div class="count">'+s.total+'</div><div class="label">Total</div></div>';
567
- h+='<div class="summary-card card-passed"><div class="count">'+s.passed+'</div><div class="label">Passed</div></div>';
568
- h+='<div class="summary-card card-failed"><div class="count">'+s.failed+'</div><div class="label">Failed</div></div>';
569
- h+='<div class="summary-card card-flaky"><div class="count">'+s.flaky+'</div><div class="label">Flaky</div></div>';
570
- h+='<div class="summary-card card-skipped"><div class="count">'+s.skipped+'</div><div class="label">Skipped</div></div>';
571
- if(s.timedout!==undefined){h+='<div class="summary-card card-timedout"><div class="count">'+s.timedout+'</div><div class="label">Timed Out</div></div>';}
572
- h+='</div>';
579
+ /* \u2500\u2500 Render helpers (code, artifacts) \u2500\u2500 */
573
580
 
574
- // Filter bar
575
- h+=renderFilterBar(data);
581
+ function renderCodeSnippet(code){
582
+ var lines=code.split('\\n');var out='<div class="code-snippet">';
583
+ 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':'')+'"><span class="line-num">'+esc(lineNum)+'</span><span class="line-code">'+esc(codePart)+'</span></div>';}
584
+ out+='</div>';return out;
585
+ }
576
586
 
577
- // Timeline
578
- h+='<div class="section-title">Navigation Timeline</div>';
579
- 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>';
580
- if(data.timeline.length===0){
581
- h+='<div class="empty-state">__LOGO_SVG__<p>No test data recorded</p></div>';
582
- }else{
583
- h+='<div class="timeline" id="timeline">';
584
- for(var i=0;i<data.timeline.length;i++){
585
- var e=data.timeline[i];
586
- var hasFail=e.tests.some(function(t){return t.status==='failed'});
587
- var allPassed=!hasFail&&e.tests.length>0&&e.tests.every(function(t){return t.status==='passed'||t.status==='flaky'});
588
- var cls='timeline-entry'+(hasFail?' timeline-entry--has-failures':'')+(allPassed?' timeline-entry--all-passed':'');
589
- 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});
590
- 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(','))+'">';
591
- h+='<div class="timeline-header" onclick="toggleEntry(this)">';
592
- h+='<svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>';
593
- h+='<span class="timeline-url" title="'+esc(e.url)+'">'+esc(e.url)+'</span>';
594
- h+='<span class="nav-type-badge badge-'+e.navigationType+'">'+esc(e.navigationType.replace(/_/g,' '))+'</span>';
595
- h+='<div class="timeline-info">';
596
- h+='<span class="spec-file">'+esc(e.specFile)+'</span>';
597
- h+='<span>'+fmtTime(e.visitedAt)+'</span>';
598
- h+='<span>'+fmtDur(e.duration)+'</span>';
599
- h+='</div></div>';
600
- h+='<div class="timeline-content">';
601
- h+=renderTests(e.tests,e.networkStats);
602
- h+=renderNetwork(e.networkStats);
603
- h+='</div></div>';
587
+ function renderArtifactColumn(artifacts){
588
+ if(!artifacts)return '<div class="artifact-empty">No artifacts captured</div>';
589
+ var hasS=!!artifacts.screenshot,hasV=!!artifacts.video;
590
+ if(!hasS&&!hasV)return '<div class="artifact-empty">No artifacts captured</div>';
591
+ var h='';
592
+ if(hasS&&hasV){
593
+ h+='<div class="seg-ctrl" data-seg-group="artifacts">';
594
+ h+='<button class="seg-btn active" data-seg="screenshot"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>Screenshot</button>';
595
+ h+='<button class="seg-btn" data-seg="video"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21"/></svg>Video</button>';
596
+ h+='</div>';
604
597
  }
605
- h+='</div>';
598
+ if(hasS){h+='<div class="seg-pane active" data-seg-pane="screenshot"><img class="artifact-col-img" src="'+esc(artifacts.screenshot)+'" loading="lazy" alt="Screenshot"><div class="artifact-col-caption"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>Click to enlarge</div></div>';}
599
+ if(hasV){h+='<div class="seg-pane'+(hasS?'':' active')+'" data-seg-pane="video"><div class="artifact-col-video"><video controls preload="metadata" src="'+esc(artifacts.video)+'"></video></div></div>';}
600
+ return h;
606
601
  }
607
602
 
608
- app.innerHTML=h;
609
- if(typeof initTheme==='function')initTheme();
610
- if(typeof initFilters==='function')initFilters(data);
611
-
612
- function renderTests(tests,networkStats){
613
- if(!tests||tests.length===0)return '';
614
- var out='<div class="tests-section">';
615
- var pc=0,fc=0,fkc=0,sc=0,toc=0;
616
- 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++});
617
- out+='<div class="spec-summary">';
618
- if(pc>0)out+='<span class="spec-passed">'+pc+' passed</span>';
619
- if(fc>0)out+='<span class="spec-failed">'+fc+' failed</span>';
620
- if(fkc>0)out+='<span class="spec-flaky">'+fkc+' flaky</span>';
621
- if(sc>0)out+='<span style="color:#6b7280;font-weight:600">'+sc+' skipped</span>';
622
- if(toc>0)out+='<span style="color:#ea580c;font-weight:600">'+toc+' timed out</span>';
623
- out+='</div>';
624
- for(var j=0;j<tests.length;j++){
625
- out+=renderTestCard(tests[j],_testIdx++,networkStats);
603
+ /* \u2500\u2500 Render: Drawer Content \u2500\u2500 */
604
+ function renderDrawer(testId){
605
+ var t=testMap[testId];
606
+ if(!t){drawerBodyEl.innerHTML='';return;}
607
+ var h='<div class="test-detail">';
608
+
609
+ /* \u2500\u2500 Top: Metadata \u2500\u2500 */
610
+ h+='<div class="test-detail-header"><div class="test-detail-top">';
611
+ h+='<span class="detail-status-badge dbg-'+t.status+'">'+t.status+'</span>';
612
+ h+='<div class="detail-title-section"><div class="detail-title">'+esc(t.title)+'</div><div class="detail-meta">';
613
+ if(t.testType&&t.testType!=='unknown')h+='<span class="dm-badge dm-type">'+esc(t.testType)+'</span>';
614
+ if(t.isFlaky)h+='<span class="dm-badge dm-flaky">Flaky</span>';
615
+ if(t.retryCount>0)h+='<span class="dm-badge dm-retry">'+t.retryCount+' retries</span>';
616
+ if(t.retryStatus)h+='<span class="dm-badge dm-retry">'+esc(t.retryStatus)+'</span>';
617
+ if(t.tags&&t.tags.length>0){for(var ti=0;ti<t.tags.length;ti++){if(t.tags[ti])h+='<span class="dm-badge dm-tag">'+esc(t.tags[ti])+'</span>';}}
618
+ if(t.expectedStatus&&t.actualStatus&&t.expectedStatus!==t.actualStatus)h+='<span class="dm-badge" style="background:rgba(239,68,68,0.12);color:#ef4444">expected: '+esc(t.expectedStatus)+' actual: '+esc(t.actualStatus)+'</span>';
619
+ h+='</div>';
620
+ if(t.testId||t.filePath||t.suiteName){h+='<div class="detail-sub-meta">';if(t.testId)h+='<span><span class="meta-k">ID</span><span class="detail-id" title="'+esc(t.testId)+'">'+esc(t.testId.substring(0,12))+'</span></span>';if(t.filePath)h+='<span><span class="meta-k">File</span><span class="detail-file">'+esc(t.filePath)+'</span></span>';if(t.suiteName)h+='<span><span class="meta-k">Suite</span><span class="detail-suite">'+esc(t.suiteName)+'</span></span>';h+='</div>';}
621
+ h+='</div><div class="detail-duration">'+fmtDur(t.duration)+'</div></div></div>';
622
+
623
+ /* \u2500\u2500 Failure panel (full width) \u2500\u2500 */
624
+ if((t.status==='failed'||t.status==='flaky')&&t.failure)h+=renderFailure(t.failure);
625
+ else if(t.status==='failed'&&!t.failure)h+='<div style="margin-bottom:20px;padding:14px;background:var(--bg-2);border:1px solid var(--bd);border-radius:10px;font-size:12px;color:var(--fg-2);font-style:italic">No diagnostic information available</div>';
626
+
627
+ /* \u2500\u2500 Stacked sections: 1) Artifacts 2) Timeline / Network \u2500\u2500 */
628
+ var hasArt=t.artifacts&&(t.artifacts.screenshot||t.artifacts.video);
629
+ var hasSteps=t.steps&&t.steps.length>0;
630
+ if(hasArt||hasSteps){
631
+ h+='<div class="drawer-sections">';
632
+ if(hasArt)h+='<div class="drawer-section">'+renderArtifactColumn(t.artifacts)+'</div>';
633
+ if(hasSteps)h+='<div class="drawer-section">'+renderTimelineColumn(t.steps,t.networkRequests)+'</div>';
634
+ h+='</div>';
626
635
  }
627
- out+='</div>';
628
- return out;
636
+
637
+ h+='</div>';
638
+ drawerBodyEl.innerHTML=h;
639
+ drawerBodyEl.scrollTop=0;
629
640
  }
630
641
 
631
- })();
632
- `;
633
-
634
- // src/html-js-tabs.ts
635
- var JS_TABS = `
636
- function renderTestCard(t,idx,networkStats){
637
- var id='test-'+idx;
638
- var out='<div class="test-card" id="'+id+'" data-status="'+t.status+'" data-type="'+(t.testType||'unknown')+'" data-spec="'+esc(t.filePath||'')+'">';
639
- out+='<div class="test-card-row">';
640
- out+='<span class="status-badge status-'+t.status+'">'+t.status+'</span>';
641
- out+='<div class="test-info">';
642
- out+='<div class="test-title" title="'+esc(t.title)+'">'+esc(t.title)+'</div>';
643
- out+='<div class="test-meta">';
644
- if(t.testType&&t.testType!=='unknown')out+='<span class="type-badge">'+esc(t.testType)+'</span>';
645
- if(t.isFlaky)out+='<span class="flaky-badge">flaky</span>';
646
- if(t.retryCount>0)out+='<span class="retry-badge">'+t.retryCount+' retries</span>';
647
- if(t.retryStatus)out+='<span class="retry-badge">'+esc(t.retryStatus)+'</span>';
648
- 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>'});}
649
- if(t.expectedStatus&&t.actualStatus&&t.expectedStatus!==t.actualStatus)out+='<span class="status-mismatch">expected: '+esc(t.expectedStatus)+' actual: '+esc(t.actualStatus)+'</span>';
650
- out+='</div>';
651
- if(t.testId||t.filePath||t.suiteName){out+='<div class="test-meta">';
652
- 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>';
653
- if(t.filePath)out+='<span class="meta-prefix">File:</span><span class="file-path">'+esc(t.filePath)+'</span>';
654
- if(t.suiteName)out+='<span class="meta-prefix">Suite:</span><span class="suite-name">'+esc(t.suiteName)+'</span>';
655
- out+='</div>';}
656
- out+='</div>';
657
- out+='<span class="test-duration">'+fmtDur(t.duration)+'</span>';
658
- out+='</div>';
659
-
660
- // Tab bar
661
- var hasScreenshot=t.artifacts&&t.artifacts.screenshot;
662
- var hasVideo=t.artifacts&&t.artifacts.video;
663
- var hasNetworkReqs=t.networkRequests&&t.networkRequests.length>0;
664
- var hasNetworkStats=!!networkStats;
665
-
666
- out+='<div class="tab-bar">';
667
- out+='<button class="tab-btn active" data-tab="details" onclick="switchTab(\\''+id+'\\',\\'details\\')">Test Details</button>';
668
- out+='<button class="tab-btn" data-tab="network" onclick="switchTab(\\''+id+'\\',\\'network\\')">Network Logs</button>';
669
- out+='<button class="tab-btn" data-tab="video" onclick="switchTab(\\''+id+'\\',\\'video\\')">Video</button>';
670
- out+='<button class="tab-btn" data-tab="screenshots" onclick="switchTab(\\''+id+'\\',\\'screenshots\\')">Screenshots</button>';
671
- out+='</div>';
672
-
673
- // Tab: Test Details
674
- out+='<div class="tab-panel active" id="'+id+'-details">';
675
- if((t.status==='failed'||t.status==='flaky')&&t.failure){
676
- out+='<div class="failure-details show">';
677
- out+='<div class="failure-message">'+esc(stripAnsi(t.failure.message))+'</div>';
678
- if(t.failure.code){
679
- out+=renderCodeSnippet(t.failure.code,t.failure.line);
680
- }
681
- if(t.failure.line!==null){
682
- out+='<div style="padding:4px 12px;font-size:11px;color:var(--text-muted);background:var(--bg-secondary)">Line '+t.failure.line+'</div>';
642
+ /* \u2500\u2500 Drawer open / close \u2500\u2500 */
643
+ function openDrawer(testId){
644
+ renderDrawer(testId);
645
+ drawerEl.classList.add('open');
646
+ drawerBackdropEl.classList.add('open');
647
+ document.body.style.overflow='hidden';
648
+ }
649
+ function closeDrawer(){
650
+ drawerEl.classList.remove('open');
651
+ drawerBackdropEl.classList.remove('open');
652
+ document.body.style.overflow='';
653
+ /* Pause any playing video */
654
+ var v=drawerBodyEl.querySelector('video');
655
+ if(v)v.pause();
656
+ }
657
+
658
+ /* \u2500\u2500 Search \u2500\u2500 */
659
+ function doSearch(q){searchQuery=q;applyFilters();}
660
+ `;var B=`
661
+ /* \u2500\u2500 Network Visualization Helpers \u2500\u2500 */
662
+ var RES_COLORS={xhr:'#60a5fa',document:'#818cf8',script:'#fbbf24',stylesheet:'#a78bfa',image:'#34d399',font:'#f472b6',other:'#6b7280'};
663
+ var RES_LABELS={xhr:'XHR',document:'Doc',script:'JS',stylesheet:'CSS',image:'Img',font:'Font',other:'Other'};
664
+ var RES_ORDER=['xhr','document','script','stylesheet','image','font','other'];
665
+
666
+ function renderResBar(byType,total,mini){
667
+ if(!byType||total===0)return '';
668
+ var h='<div class="net-bar'+(mini?' net-bar--mini':'')+'">';
669
+ for(var i=0;i<RES_ORDER.length;i++){var k=RES_ORDER[i];var cnt=byType[k]||0;if(cnt===0)continue;var pct=(cnt/total*100).toFixed(1);h+='<div class="net-bar-seg" style="width:'+pct+'%;background:'+RES_COLORS[k]+'" title="'+RES_LABELS[k]+': '+cnt+' ('+(cnt/total*100).toFixed(0)+'%)"></div>';}
670
+ h+='</div>';return h;
671
+ }
672
+
673
+ function renderResLegend(byType){
674
+ if(!byType)return '';
675
+ var h='<div class="net-bar-legend">';
676
+ for(var i=0;i<RES_ORDER.length;i++){var k=RES_ORDER[i];var cnt=byType[k]||0;if(cnt===0)continue;h+='<span class="net-legend-item"><span class="net-legend-dot" style="background:'+RES_COLORS[k]+'"></span>'+RES_LABELS[k]+' <span class="net-legend-count">'+cnt+'</span></span>';}
677
+ h+='</div>';return h;
678
+ }
679
+
680
+ function calcStepTiming(step){
681
+ var t={};
682
+ try{
683
+ if(step.visitedAt&&step.domContentLoadedAt){var dcl=new Date(step.domContentLoadedAt).getTime()-new Date(step.visitedAt).getTime();if(dcl>=0)t.dcl=dcl;}
684
+ if(step.visitedAt&&step.networkIdleAt){var idle=new Date(step.networkIdleAt).getTime()-new Date(step.visitedAt).getTime();if(idle>=0)t.idle=idle;}
685
+ }catch(e){}
686
+ return t;
687
+ }
688
+
689
+ function failStatusClass(code){var n=parseInt(code,10);if(n>=400&&n<500)return 'fail-url-badge--4xx';if(n>=500)return 'fail-url-badge--5xx';return 'fail-url-badge--other';}
690
+
691
+ function renderFailedUrls(failedUrls){
692
+ if(!failedUrls||failedUrls.length===0)return '';
693
+ var h='<div class="fail-urls">';
694
+ for(var fi=0;fi<failedUrls.length;fi++){
695
+ var furl=failedUrls[fi];var spIdx=furl.indexOf(' ');
696
+ var fStatus=spIdx>0?furl.substring(0,spIdx):'';var fPath=spIdx>0?furl.substring(spIdx+1):furl;
697
+ h+='<div class="fail-url"><span class="fail-url-badge '+failStatusClass(fStatus)+'">'+esc(fStatus)+'</span>'+esc(fPath)+'</div>';
683
698
  }
684
- if(t.failure.stack){
685
- var sid='stack-'+Math.random().toString(36).substr(2,9);
686
- out+='<button class="stack-toggle" onclick="toggleStack(\\''+sid+'\\')">Show stack trace</button>';
687
- out+='<div class="stack-trace" id="'+sid+'">'+esc(stripAnsi(t.failure.stack))+'</div>';
699
+ h+='</div>';return h;
700
+ }
701
+
702
+ function renderNetworkPanel(stats){
703
+ if(!stats)return '<div style="padding:7px 12px;font-size:11px;color:var(--fg-2);font-style:italic">No network data</div>';
704
+ var hasFail=stats.failedRequests>0;
705
+ var h='<div class="net-header'+(hasFail?' has-fails':'')+'"><svg width="12" height="12" 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>';
706
+ h+='<div class="net-stats-row"><div class="net-stat"><span class="nv">'+stats.totalRequests+'</span><span class="nl">Requests</span></div><div class="net-stat'+(hasFail?' net-fail':'')+'"><span class="nv">'+stats.failedRequests+'</span><span class="nl">Failed</span></div><div class="net-stat"><span class="nv">'+fmtBytes(stats.totalBytes)+'</span><span class="nl">Transfer</span></div></div>';
707
+ if(stats.byType&&stats.totalRequests>0){h+='<div class="net-bar-wrap">'+renderResBar(stats.byType,stats.totalRequests,false)+'</div>';h+=renderResLegend(stats.byType);}
708
+ if(hasFail&&stats.failedRequestUrls&&stats.failedRequestUrls.length>0)h+=renderFailedUrls(stats.failedRequestUrls);
709
+ return h;
710
+ }
711
+
712
+ function renderNavTimeline(steps){
713
+ if(!steps||steps.length===0)return '';
714
+ var h='<div class="nav-timeline">';
715
+ for(var i=0;i<steps.length;i++){
716
+ var s=steps[i];var hasNetFail=s.networkStats&&s.networkStats.failedRequests>0;
717
+ h+='<div class="nav-step"><div class="step-connector"><div class="step-node '+(hasNetFail?'node-warn':'node-ok')+'">'+(i+1)+'</div>';
718
+ if(i<steps.length-1)h+='<div class="step-line"></div>';
719
+ h+='</div><div class="step-content"><div class="step-header" data-step="'+i+'"><span class="step-url" title="'+esc(s.url)+'">'+esc(s.url)+'</span><span class="nav-badge nb-'+s.navigationType+'">'+esc(s.navigationType.replace(/_/g,' '))+'</span><span class="step-meta"><span>'+fmtDur(s.duration)+'</span>';
720
+ if(s.networkStats)h+=' <span style="color:var(--fg-2)">'+s.networkStats.totalRequests+' req</span>';
721
+ h+='</span></div><div class="step-detail" id="step-detail-'+i+'">'+renderNetworkPanel(s.networkStats)+'</div></div></div>';
688
722
  }
689
- out+='</div>';
690
- } else if(t.status==='failed'&&!t.failure){
691
- out+='<div style="margin-top:4px;font-size:12px;color:#9ca3af;font-style:italic">No diagnostic information available</div>';
692
- } else {
693
- out+='<div class="tab-empty-state">Test passed \u2014 no diagnostic details</div>';
723
+ h+='</div>';return h;
694
724
  }
695
- out+='</div>';
696
-
697
- // Tab: Network Logs
698
- out+='<div class="tab-panel" id="'+id+'-network">';
699
- out+=renderNetworkLogs(t,networkStats);
700
- out+='</div>';
701
-
702
- // Tab: Video
703
- out+='<div class="tab-panel" id="'+id+'-video">';
704
- if(hasVideo){
705
- out+='<div class="artifact-video-inline">';
706
- out+='<video class="artifact-video-player" controls preload="metadata" src="'+esc(t.artifacts.video)+'"></video>';
707
- out+='</div>';
708
- } else {
709
- out+='<div class="tab-empty-state">No video captured</div>';
725
+
726
+ /* \u2500\u2500 Network DevTools Panel \u2500\u2500 */
727
+ function ndtStatusClass(code){var n=parseInt(code,10);if(n===0)return 'ndt-status--0';if(n<300)return 'ndt-status--2xx';if(n<400)return 'ndt-status--3xx';if(n<500)return 'ndt-status--4xx';return 'ndt-status--5xx';}
728
+ function urlPath(u){try{var p=new URL(u);return p.pathname+p.search;}catch(e){return u;}}
729
+ function prettyBody(body,ct){
730
+ if(!body)return null;
731
+ if(ct&&(ct.indexOf('json')>=0||ct.indexOf('javascript')>=0)){try{return JSON.stringify(JSON.parse(body),null,2);}catch(e){}}
732
+ return body;
710
733
  }
711
- out+='</div>';
712
-
713
- // Tab: Screenshots
714
- out+='<div class="tab-panel" id="'+id+'-screenshots">';
715
- if(hasScreenshot){
716
- out+='<div class="artifact-screenshot-wrap">';
717
- out+='<img class="artifact-thumbnail" src="'+esc(t.artifacts.screenshot)+'" loading="lazy" alt="Screenshot" onclick="openLightbox(this.src)">';
718
- out+='<span class="artifact-label">Click to enlarge</span>';
719
- out+='</div>';
720
- } else {
721
- out+='<div class="tab-empty-state">No screenshot captured</div>';
734
+
735
+ function renderNdtHeaders(headers,label){
736
+ if(!headers)return '<div class="ndt-body-empty">No '+label+' headers captured</div>';
737
+ var keys=[];for(var k in headers){if(headers.hasOwnProperty(k))keys.push(k);}
738
+ if(keys.length===0)return '<div class="ndt-body-empty">No '+label+' headers captured</div>';
739
+ keys.sort();
740
+ var h='<table class="ndt-headers-tbl"><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody>';
741
+ for(var i=0;i<keys.length;i++){h+='<tr><td>'+esc(keys[i])+'</td><td>'+esc(headers[keys[i]])+'</td></tr>';}
742
+ h+='</tbody></table>';return h;
722
743
  }
723
- out+='</div>';
724
744
 
725
- out+='</div>';
726
- return out;
727
- }
728
- `;
729
-
730
- // src/html-js-network.ts
731
- var JS_NETWORK = `
732
- function fmtBodyForEditor(body,contentType){
733
- if(!body)return body;
734
- if(contentType&&(contentType.indexOf('json')>=0)){
735
- try{return JSON.stringify(JSON.parse(body),null,2)}catch(e){}
745
+ function renderNdtBody(body,truncated,isBinary,ct,emptyLabel){
746
+ if(isBinary)return '<div class="ndt-body-empty">Binary content \u2014 not displayed</div>';
747
+ if(!body)return '<div class="ndt-body-empty">'+emptyLabel+'</div>';
748
+ var pretty=prettyBody(body,ct);
749
+ var h='<div class="ndt-body-wrap"><pre class="ndt-body-pre">'+esc(pretty||body)+'</pre>';
750
+ if(truncated)h+='<span class="ndt-body-truncated">Response truncated (body exceeded capture limit)</span>';
751
+ h+='</div>';return h;
736
752
  }
737
- return body;
738
- }
739
- function renderCodeEditor(body,contentType,editorId){
740
- if(!body)return '';
741
- var formatted=fmtBodyForEditor(body,contentType);
742
- var lines=formatted.split('\\n');
743
- var out='<div class="code-editor" id="'+editorId+'">';
744
- out+='<div class="code-editor-toolbar">';
745
- out+='<span class="code-editor-lang">'+(contentType?esc(contentType.split(';')[0]):'text')+'</span>';
746
- out+='<button class="code-editor-copy" onclick="copyEditorContent(\\''+editorId+'\\')">Copy</button>';
747
- out+='</div>';
748
- out+='<div class="code-editor-body">';
749
- out+='<div class="code-editor-lines">';
750
- for(var i=0;i<lines.length;i++){
751
- out+='<div class="code-editor-line-num">'+(i+1)+'</div>';
753
+
754
+ function renderNdtDetail(req,idx){
755
+ var did='ndt-d-'+idx;
756
+ var h='<div class="ndt-detail" id="'+did+'">';
757
+ h+='<div class="ndt-detail-tabs">';
758
+ h+='<button class="ndt-detail-tab active" data-ndt-tab="general" data-ndt-target="'+did+'">General</button>';
759
+ h+='<button class="ndt-detail-tab" data-ndt-tab="req-headers" data-ndt-target="'+did+'">Request Headers</button>';
760
+ h+='<button class="ndt-detail-tab" data-ndt-tab="req-body" data-ndt-target="'+did+'">Payload</button>';
761
+ h+='<button class="ndt-detail-tab" data-ndt-tab="res-headers" data-ndt-target="'+did+'">Response Headers</button>';
762
+ h+='<button class="ndt-detail-tab" data-ndt-tab="res-body" data-ndt-target="'+did+'">Response</button>';
763
+ h+='</div>';
764
+
765
+ /* General tab */
766
+ h+='<div class="ndt-detail-pane active" data-ndt-pane="general">';
767
+ h+='<div class="ndt-general">';
768
+ h+='<span class="ndt-general-k">Request URL</span><span class="ndt-general-v">'+esc(req.url)+'</span>';
769
+ h+='<span class="ndt-general-k">Method</span><span class="ndt-general-v">'+esc(req.method)+'</span>';
770
+ h+='<span class="ndt-general-k">Status Code</span><span class="ndt-general-v'+(req.statusCode>=400||req.statusCode===0?' ndt-err':'')+'">'+req.statusCode+(req.error?' ('+esc(req.error)+')':'')+'</span>';
771
+ h+='<span class="ndt-general-k">Resource Type</span><span class="ndt-general-v">'+esc(req.resourceType)+'</span>';
772
+ if(req.contentType)h+='<span class="ndt-general-k">Content-Type</span><span class="ndt-general-v">'+esc(req.contentType)+'</span>';
773
+ h+='<span class="ndt-general-k">Response Size</span><span class="ndt-general-v">'+fmtBytes(req.responseSize||0)+'</span>';
774
+ h+='<span class="ndt-general-k">Response Time</span><span class="ndt-general-v">'+fmtDur(req.responseTimeMs)+'</span>';
775
+ if(req.startedAt)h+='<span class="ndt-general-k">Started At</span><span class="ndt-general-v">'+fmtDate(req.startedAt)+'</span>';
776
+ if(req.error)h+='<span class="ndt-general-k">Error</span><span class="ndt-general-v ndt-err">'+esc(req.error)+'</span>';
777
+ h+='</div></div>';
778
+
779
+ /* Request Headers tab */
780
+ h+='<div class="ndt-detail-pane" data-ndt-pane="req-headers">'+renderNdtHeaders(req.requestHeaders,'request')+'</div>';
781
+
782
+ /* Payload tab (request body) */
783
+ h+='<div class="ndt-detail-pane" data-ndt-pane="req-body">'+renderNdtBody(req.requestBody,req.requestBodyTruncated,false,req.contentType,'No request body')+'</div>';
784
+
785
+ /* Response Headers tab */
786
+ h+='<div class="ndt-detail-pane" data-ndt-pane="res-headers">'+renderNdtHeaders(req.responseHeaders,'response')+'</div>';
787
+
788
+ /* Response tab */
789
+ h+='<div class="ndt-detail-pane" data-ndt-pane="res-body">'+renderNdtBody(req.responseBody,req.responseBodyTruncated,req.isBinary,req.contentType,'No response body captured')+'</div>';
790
+
791
+ h+='</div>';return h;
752
792
  }
753
- out+='</div>';
754
- out+='<pre class="code-editor-content">'+esc(formatted)+'</pre>';
755
- out+='</div></div>';
756
- return out;
757
- }
758
- function renderNetworkLogs(t,networkStats){
759
- if(t.networkRequests&&t.networkRequests.length>0){
760
- var reqs=t.networkRequests;
761
- var failed=reqs.filter(function(r){return r.statusCode===0||r.statusCode>=400}).length;
762
- var out='<div class="network-log">';
763
- out+='<div class="network-log-summary">';
764
- out+='<span class="net-log-count">'+reqs.length+' request'+(reqs.length>1?'s':'')+'</span>';
765
- if(failed>0)out+='<span class="net-log-failed">'+failed+' failed</span>';
766
- out+='</div>';
793
+
794
+ function renderNetworkDevTools(reqs){
795
+ if(!reqs||reqs.length===0)return '<div class="artifact-empty">No network requests captured</div>';
796
+ var uid='ndt-'+Math.random().toString(36).substr(2,6);
797
+ var h='<div class="ndt" id="'+uid+'">';
798
+
799
+ /* Toolbar with type filters and search */
800
+ h+='<div class="ndt-toolbar">';
801
+ h+='<div class="ndt-filter">';
802
+ h+='<button class="ndt-filter-btn active" data-ndt-filter="all">All</button>';
803
+ var types=['xhr','document','script','stylesheet','image','font','other'];
804
+ var typeLabels={xhr:'XHR',document:'Doc',script:'JS',stylesheet:'CSS',image:'Img',font:'Font',other:'Other'};
805
+ for(var ti=0;ti<types.length;ti++){
806
+ var cnt=0;for(var ci=0;ci<reqs.length;ci++){if(reqs[ci].resourceType===types[ti])cnt++;}
807
+ if(cnt>0)h+='<button class="ndt-filter-btn" data-ndt-filter="'+types[ti]+'">'+typeLabels[types[ti]]+' <span style="opacity:.6">'+cnt+'</span></button>';
808
+ }
809
+ h+='</div>';
810
+ h+='<input class="ndt-search" placeholder="Filter URLs..." data-ndt-search="'+uid+'">';
811
+ h+='<span class="ndt-count" data-ndt-count="'+uid+'">'+reqs.length+' requests</span>';
812
+ h+='</div>';
813
+
814
+ /* Request list */
815
+ h+='<div class="ndt-list" data-ndt-list="'+uid+'">';
767
816
  for(var i=0;i<reqs.length;i++){
768
817
  var r=reqs[i];
769
- var nid='net-'+Math.random().toString(36).substr(2,9);
770
- var statusCls='net-status-'+Math.floor(r.statusCode/100)+'xx';
771
- if(r.statusCode===0)statusCls='net-status-0';
772
- var isFailed=r.statusCode===0||r.statusCode>=400;
773
- out+='<div class="network-entry'+(isFailed?' network-entry--failed':'')+'">';
774
- out+='<div class="network-entry-row" onclick="toggleNetworkEntry(\\''+nid+'\\')">';
775
- out+='<span class="net-status-badge '+statusCls+'">'+(r.statusCode||'ERR')+'</span>';
776
- out+='<span class="net-method">'+esc(r.method)+'</span>';
777
- out+='<span class="net-url" title="'+esc(r.url)+'">'+esc(r.url)+'</span>';
778
- out+='<span class="net-time">'+fmtDur(r.responseTimeMs)+'</span>';
779
- 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>';
780
- out+='</div>';
781
- out+='<div class="network-entry-details" id="'+nid+'">';
782
- if(r.error){
783
- out+='<div class="net-error-msg">'+esc(r.error)+'</div>';
784
- }
785
- // Request Headers
786
- if(r.requestHeaders){
787
- out+='<div class="net-section-title">Request Headers</div>';
788
- out+='<table class="net-headers-table">';
789
- var rkeys=Object.keys(r.requestHeaders);
790
- for(var j=0;j<rkeys.length;j++){
791
- out+='<tr><td class="net-header-key">'+esc(rkeys[j])+'</td><td class="net-header-val">'+esc(r.requestHeaders[rkeys[j]])+'</td></tr>';
792
- }
793
- out+='</table>';
794
- }
795
- // Request Body
796
- out+='<div class="net-section-title">Request Body</div>';
797
- if(r.requestBody){
798
- var reqEdId='req-body-'+nid;
799
- var reqCt='text/plain';
800
- if(r.requestHeaders){var rctKey=Object.keys(r.requestHeaders).filter(function(k){return k.toLowerCase()==='content-type'})[0];if(rctKey)reqCt=r.requestHeaders[rctKey]}
801
- out+=renderCodeEditor(r.requestBody,reqCt,reqEdId);
802
- if(r.requestBodyTruncated)out+='<div class="net-truncated-note">Truncated \u2014 body exceeds 10 KB</div>';
803
- } else {
804
- out+='<div class="net-empty-note">No request body</div>';
805
- }
806
- // Response Headers
807
- if(r.responseHeaders){
808
- out+='<div class="net-section-title">Response Headers</div>';
809
- out+='<table class="net-headers-table">';
810
- var hkeys=Object.keys(r.responseHeaders);
811
- for(var j=0;j<hkeys.length;j++){
812
- out+='<tr><td class="net-header-key">'+esc(hkeys[j])+'</td><td class="net-header-val">'+esc(r.responseHeaders[hkeys[j]])+'</td></tr>';
813
- }
814
- out+='</table>';
815
- }
816
- // Response Body
817
- out+='<div class="net-section-title">Response Body</div>';
818
- if(r.isBinary){
819
- out+='<div class="net-binary-note">[Binary data'+(r.responseSize?' \u2014 '+fmtBytes(r.responseSize):'')+']</div>';
820
- } else if(r.responseBody){
821
- var respEdId='resp-body-'+nid;
822
- out+=renderCodeEditor(r.responseBody,r.contentType,respEdId);
823
- if(r.responseBodyTruncated)out+='<div class="net-truncated-note">Truncated \u2014 body exceeds 10 KB</div>';
824
- } else {
825
- out+='<div class="net-empty-note">No response body</div>';
826
- }
827
- out+='</div></div>';
818
+ var isFail=r.statusCode>=400||r.statusCode===0;
819
+ h+='<div class="ndt-row'+(isFail?' ndt-row--fail':'')+'" data-ndt-idx="'+i+'" data-ndt-type="'+esc(r.resourceType)+'" data-ndt-url="'+esc(r.url.toLowerCase())+'">';
820
+ h+='<span class="ndt-status '+ndtStatusClass(r.statusCode)+'">'+r.statusCode+'</span>';
821
+ h+='<span class="ndt-method">'+esc(r.method)+'</span>';
822
+ h+='<span class="ndt-url" title="'+esc(r.url)+'">'+esc(urlPath(r.url))+'</span>';
823
+ h+='<span class="ndt-type">'+esc(RES_LABELS[r.resourceType]||r.resourceType)+'</span>';
824
+ h+='<span class="ndt-size">'+fmtBytes(r.responseSize||0)+'</span>';
825
+ h+='<span class="ndt-time">'+fmtDur(r.responseTimeMs)+'</span>';
826
+ h+='</div>';
827
+ h+=renderNdtDetail(r,i);
828
828
  }
829
- out+='</div>';
830
- return out;
829
+ h+='</div></div>';return h;
831
830
  }
832
- if(networkStats){
833
- return renderNetwork(networkStats);
831
+
832
+ function renderTimelineColumn(steps,networkRequests){
833
+ if(!steps||steps.length===0)return '<div class="artifact-empty">No navigation data</div>';
834
+ var hasReqs=networkRequests&&networkRequests.length>0;
835
+ var h='<div class="seg-ctrl" data-seg-group="right-panel">';
836
+ h+='<button class="seg-btn active" data-seg="timeline"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>Timeline ('+steps.length+')</button>';
837
+ h+='<button class="seg-btn" data-seg="network"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>Network'+(hasReqs?' ('+networkRequests.length+')':'')+'</button>';
838
+ h+='</div>';
839
+ h+='<div class="seg-pane active" data-seg-pane="timeline">'+renderNavTimeline(steps)+'</div>';
840
+ h+='<div class="seg-pane" data-seg-pane="network">'+renderNetworkDevTools(networkRequests)+'</div>';
841
+ return h;
834
842
  }
835
- return '<div class="tab-empty-state">No network logs captured</div>';
836
- }
837
- `;
838
-
839
- // src/html-js-interactions.ts
840
- var JS_INTERACTIONS = `
841
- function toggleEntry(el){el.closest('.timeline-entry').classList.toggle('expanded')}
842
- function toggleFail(id){document.getElementById(id).classList.toggle('show')}
843
- function toggleStack(id){document.getElementById(id).classList.toggle('show')}
844
- function openLightbox(src){var o=document.createElement('div');o.className='lightbox-overlay';
845
- o.onclick=function(){closeLightbox()};o.innerHTML='<img src="'+src.replace(/"/g,'&quot;')+'" alt="Screenshot">';
846
- var b=document.createElement('button');b.className='lightbox-close';b.innerHTML='&times;';
847
- b.onclick=function(e){e.stopPropagation();closeLightbox()};
848
- document.body.appendChild(o);document.body.appendChild(b);
849
- document.addEventListener('keydown',lightboxEsc)}
850
- function closeLightbox(){var o=document.querySelector('.lightbox-overlay');if(o)o.remove();
851
- var b=document.querySelector('.lightbox-close');if(b)b.remove();
852
- document.removeEventListener('keydown',lightboxEsc)}
853
- function lightboxEsc(e){if(e.key==='Escape')closeLightbox()}
854
- function toggleVideo(id){var el=document.getElementById(id);if(!el)return;
855
- var isShown=el.classList.toggle('show');
856
- var btn=el.previousElementSibling;
857
- if(btn)btn.textContent=isShown?'Hide video':'Show video';
858
- if(!isShown){var v=el.querySelector('video');if(v)v.pause()}}
859
- function switchTab(testId,tabName){var card=document.getElementById(testId);if(!card)return;
860
- var panels=card.querySelectorAll('.tab-panel');for(var i=0;i<panels.length;i++)panels[i].classList.remove('active');
861
- var btns=card.querySelectorAll('.tab-btn');for(var i=0;i<btns.length;i++)btns[i].classList.remove('active');
862
- var target=document.getElementById(testId+'-'+tabName);if(target)target.classList.add('active');
863
- var clicked=card.querySelector('.tab-btn[data-tab="'+tabName+'"]');if(clicked)clicked.classList.add('active')}
864
- function toggleNetworkEntry(id){var el=document.getElementById(id);if(!el)return;
865
- el.classList.toggle('show');
866
- var row=el.previousElementSibling;
867
- if(row)row.classList.toggle('expanded')}
868
- function copyEditorContent(editorId){var el=document.getElementById(editorId);if(!el)return;
869
- var pre=el.querySelector('.code-editor-content');if(!pre)return;
870
- var text=pre.textContent||'';
871
- navigator.clipboard.writeText(text).then(function(){
872
- var btn=el.querySelector('.code-editor-copy');if(!btn)return;
873
- btn.textContent='Copied!';btn.classList.add('copied');
874
- setTimeout(function(){btn.textContent='Copy';btn.classList.remove('copied')},1500)
875
- }).catch(function(){})}
876
- function initTheme(){
877
- var stored=localStorage.getItem('testrelic-theme');
878
- var theme=stored||(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light');
879
- document.documentElement.setAttribute('data-theme',theme);
880
- updateThemeIcon(theme)}
881
- function toggleTheme(){
882
- var current=document.documentElement.getAttribute('data-theme')||'light';
883
- var next=current==='dark'?'light':'dark';
884
- document.documentElement.setAttribute('data-theme',next);
885
- localStorage.setItem('testrelic-theme',next);
886
- updateThemeIcon(next)}
887
- function updateThemeIcon(theme){
888
- var light=document.querySelector('.theme-icon-light');
889
- var dark=document.querySelector('.theme-icon-dark');
890
- if(light)light.style.display=theme==='dark'?'none':'block';
891
- if(dark)dark.style.display=theme==='dark'?'block':'none'}
892
- `;
893
-
894
- // src/html-js-filters.ts
895
- var JS_FILTERS = `
843
+
844
+ function renderFailure(failure){
845
+ if(!failure)return '';
846
+ var sid='s-'+Math.random().toString(36).substr(2,8);
847
+ var h='<div class="failure-panel"><div class="failure-panel-header"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6M9 9l6 6"/></svg>Failure Details</div>';
848
+ h+='<div class="failure-message">'+esc(stripAnsi(failure.message))+'</div>';
849
+ if(failure.code)h+=renderCodeSnippet(failure.code);
850
+ if(failure.line!==null&&failure.line!==undefined)h+='<div class="line-marker">Line '+failure.line+'</div>';
851
+ if(failure.stack){h+='<button class="stack-toggle-btn" data-stack="'+sid+'">Show stack trace</button><div class="stack-trace" id="'+sid+'">'+esc(stripAnsi(failure.stack))+'</div>';}
852
+ h+='</div>';return h;
853
+ }
854
+
855
+ /* \u2500\u2500 Network DevTools Filter Logic \u2500\u2500 */
856
+ function ndtApplyFilters(ndt,filterType,searchVal){
857
+ var list=ndt.querySelector('.ndt-list');if(!list)return;
858
+ var searchInput=ndt.querySelector('.ndt-search');
859
+ var q=(searchVal!==null&&searchVal!==undefined)?searchVal:(searchInput?searchInput.value:'');
860
+ q=q.toLowerCase();
861
+ var rows=list.querySelectorAll('.ndt-row');
862
+ var visible=0;
863
+ for(var i=0;i<rows.length;i++){
864
+ var row=rows[i];
865
+ var type=row.getAttribute('data-ndt-type');
866
+ var url=row.getAttribute('data-ndt-url')||'';
867
+ var show=true;
868
+ if(filterType&&filterType!=='all'&&type!==filterType)show=false;
869
+ if(show&&q&&url.indexOf(q)<0)show=false;
870
+ row.style.display=show?'':'none';
871
+ /* Also hide detail if row is hidden */
872
+ var det=row.nextElementSibling;
873
+ if(det&&det.classList.contains('ndt-detail')){if(!show){det.classList.remove('show');row.classList.remove('ndt-row--open');}}
874
+ if(show)visible++;
875
+ }
876
+ var countEl=ndt.querySelector('.ndt-count');
877
+ if(countEl)countEl.textContent=visible+' / '+rows.length+' requests';
878
+ }
879
+ `;var D=`
896
880
  var _filterState={status:{},type:{},specFile:{}};
897
881
  var _totalTests=0;
898
882
  var _originalSummary=null;
899
883
 
900
- function renderFilterBar(data){
901
- var statusCounts={},typeCounts={},specCounts={};
902
- data.timeline.forEach(function(entry){
903
- entry.tests.forEach(function(t){
904
- statusCounts[t.status]=(statusCounts[t.status]||0)+1;
905
- var tp=t.testType||'unknown';
906
- typeCounts[tp]=(typeCounts[tp]||0)+1;
907
- var fp=t.filePath||entry.specFile||'';
908
- if(fp)specCounts[fp]=(specCounts[fp]||0)+1;
909
- });
910
- });
911
- var out='<div class="filter-bar" id="filter-bar">';
884
+ function renderFilterBar(){
885
+ var statusCounts={passed:0,failed:0,flaky:0,skipped:0,timedout:0};
886
+ var typeCounts={},specCounts={};
887
+ for(var i=0;i<tests.length;i++){
888
+ var t=tests[i];
889
+ if(statusCounts[t.status]!==undefined)statusCounts[t.status]++;
890
+ var tp=t.testType||'unknown';
891
+ typeCounts[tp]=(typeCounts[tp]||0)+1;
892
+ if(t.filePath)specCounts[t.filePath]=(specCounts[t.filePath]||0)+1;
893
+ }
894
+ var hasStatus=Object.keys(_filterState.status).length>0;
895
+ var hasType=Object.keys(_filterState.type).length>0;
896
+ var hasSpec=Object.keys(_filterState.specFile).length>0;
897
+ var hasAny=hasStatus||hasType||hasSpec;
898
+
899
+ var h='<div class="filter-chips">';
912
900
 
913
- // Status chips
914
- out+='<div class="filter-section">';
915
- out+='<span class="filter-section-label">Status</span>';
901
+ /* Status section */
902
+ h+='<div class="filter-section"><span class="filter-section-label">Status</span>';
916
903
  var statuses=['passed','failed','flaky','skipped','timedout'];
917
904
  var statusLabels={passed:'Passed',failed:'Failed',flaky:'Flaky',skipped:'Skipped',timedout:'Timed Out'};
918
905
  for(var i=0;i<statuses.length;i++){
919
906
  var s=statuses[i];var cnt=statusCounts[s]||0;
920
- out+='<button class="filter-chip filter-chip--status'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="status" data-value="'+s+'">';
921
- out+=statusLabels[s]+' <span class="filter-chip-count">('+cnt+')</span></button>';
907
+ var cls='filter-chip'+(!!_filterState.status[s]?' active':'')+(cnt===0?' filter-chip--dimmed':'');
908
+ h+='<button class="'+cls+'" data-dimension="status" data-value="'+s+'">'+statusLabels[s]+' <span class="chip-count">'+cnt+'</span></button>';
922
909
  }
923
- out+='</div>';
910
+ h+='</div>';
924
911
 
925
- // Type chips (only types present in data)
926
- var types=Object.keys(typeCounts);
912
+ /* Type section */
913
+ var types=Object.keys(typeCounts).sort();
927
914
  if(types.length>0){
928
- out+='<div class="filter-section">';
929
- out+='<span class="filter-section-label">Type</span>';
915
+ h+='<div class="filter-section"><span class="filter-section-label">Type</span>';
930
916
  for(var i=0;i<types.length;i++){
931
- var t=types[i];var cnt=typeCounts[t]||0;
932
- out+='<button class="filter-chip filter-chip--type'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="type" data-value="'+esc(t)+'">';
933
- out+=esc(t)+' <span class="filter-chip-count">('+cnt+')</span></button>';
917
+ var tp=types[i];var cnt=typeCounts[tp]||0;
918
+ var cls='filter-chip'+(!!_filterState.type[tp]?' active':'')+(cnt===0?' filter-chip--dimmed':'');
919
+ h+='<button class="'+cls+'" data-dimension="type" data-value="'+esc(tp)+'">'+esc(tp)+' <span class="chip-count">'+cnt+'</span></button>';
934
920
  }
935
- out+='</div>';
921
+ h+='</div>';
936
922
  }
937
923
 
938
- // Spec file chips (only if multiple files)
924
+ /* Spec file section (only if multiple files) */
939
925
  var specs=Object.keys(specCounts).sort();
940
926
  if(specs.length>1){
941
- out+='<div class="filter-section">';
942
- out+='<span class="filter-section-label">File</span>';
927
+ h+='<div class="filter-section"><span class="filter-section-label">File</span>';
943
928
  for(var i=0;i<specs.length;i++){
944
929
  var sp=specs[i];var cnt=specCounts[sp]||0;
945
930
  var short=sp.split('/').pop()||sp;
946
- out+='<button class="filter-chip filter-chip--file'+(cnt===0?' filter-chip--dimmed':'')+'" data-dimension="specFile" data-value="'+esc(sp)+'" title="'+esc(sp)+'">';
947
- out+=esc(short)+' <span class="filter-chip-count">('+cnt+')</span></button>';
931
+ var cls='filter-chip'+(!!_filterState.specFile[sp]?' active':'')+(cnt===0?' filter-chip--dimmed':'');
932
+ h+='<button class="'+cls+'" data-dimension="specFile" data-value="'+esc(sp)+'" title="'+esc(sp)+'">'+esc(short)+' <span class="chip-count">'+cnt+'</span></button>';
948
933
  }
949
- out+='</div>';
934
+ h+='</div>';
950
935
  }
936
+ h+='</div>';
951
937
 
952
- // Actions row
953
- out+='<div class="filter-actions">';
954
- out+='<button class="filter-clear" id="filter-clear" onclick="clearAllFilters()" style="display:none">Clear all</button>';
955
- out+='<span class="filter-indicator" id="filter-indicator" style="display:none">';
956
- out+='Showing <span id="filter-shown">0</span> of <span id="filter-total">0</span> tests</span>';
957
- out+='</div>';
958
- out+='</div>';
959
- return out;
938
+ /* Search box */
939
+ h+='<div class="search-box"><svg class="search-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg><input class="search-input" id="search-input" type="text" placeholder="Search tests..." value="'+esc(searchQuery)+'"></div>';
940
+
941
+ /* Actions row */
942
+ h+='<div class="filter-actions">';
943
+ h+='<button class="filter-clear" id="filter-clear" style="display:'+(hasAny?'inline-block':'none')+'">Clear all</button>';
944
+ h+='<span class="filter-indicator" id="filter-indicator" style="display:'+(hasAny?'inline':'none')+'">';
945
+ h+='Showing <span id="filter-shown">0</span> of <span id="filter-total">'+_totalTests+'</span> tests</span>';
946
+ h+='</div>';
947
+
948
+ filterEl.innerHTML=h;
960
949
  }
961
950
 
962
- function initFilters(data){
951
+ function initFilters(){
963
952
  _filterState={status:{},type:{},specFile:{}};
964
- // Count from actual test cards in DOM to match filter chip counts
965
- var cards=document.querySelectorAll('.test-card');
966
- var byStatus={passed:0,failed:0,flaky:0,skipped:0,timedout:0};
967
- for(var i=0;i<cards.length;i++){
968
- var st=cards[i].getAttribute('data-status')||'';
969
- if(byStatus[st]!==undefined)byStatus[st]++;
970
- }
971
- _totalTests=cards.length;
972
- _originalSummary={total:cards.length,passed:byStatus.passed,
973
- failed:byStatus.failed,flaky:byStatus.flaky,
974
- skipped:byStatus.skipped,timedout:byStatus.timedout};
975
- // Update summary cards to match actual test card counts
976
- _updateCard('card-total',_originalSummary.total);
977
- _updateCard('card-passed',_originalSummary.passed);
978
- _updateCard('card-failed',_originalSummary.failed);
979
- _updateCard('card-flaky',_originalSummary.flaky);
980
- _updateCard('card-skipped',_originalSummary.skipped);
981
- _updateCard('card-timedout',_originalSummary.timedout);
982
- var el=document.getElementById('filter-total');
983
- if(el)el.textContent=''+_totalTests;
984
- var chips=document.querySelectorAll('.filter-chip');
985
- for(var i=0;i<chips.length;i++){
986
- (function(chip){
987
- chip.addEventListener('click',function(){
988
- var dim=chip.getAttribute('data-dimension');
989
- var val=chip.getAttribute('data-value');
990
- toggleFilter(dim,val);
991
- });
992
- })(chips[i]);
953
+ _totalTests=tests.length;
954
+ _originalSummary={total:data.summary.total,passed:data.summary.passed,
955
+ failed:data.summary.failed,flaky:data.summary.flaky,
956
+ skipped:data.summary.skipped,timedout:data.summary.timedout||0};
957
+ }
958
+
959
+ function getFilteredTests(){
960
+ var hasStatus=Object.keys(_filterState.status).length>0;
961
+ var hasType=Object.keys(_filterState.type).length>0;
962
+ var hasSpec=Object.keys(_filterState.specFile).length>0;
963
+ var out=[];
964
+ for(var i=0;i<tests.length;i++){
965
+ var t=tests[i];
966
+ if(hasStatus&&!_filterState.status[t.status])continue;
967
+ if(hasType&&!_filterState.type[t.testType||'unknown'])continue;
968
+ if(hasSpec&&!_filterState.specFile[t.filePath])continue;
969
+ if(searchQuery){
970
+ var q=searchQuery.toLowerCase();
971
+ var match=t.title.toLowerCase().indexOf(q)>=0||t.filePath.toLowerCase().indexOf(q)>=0||(t.suiteName&&t.suiteName.toLowerCase().indexOf(q)>=0);
972
+ if(!match&&t.tags){for(var ti=0;ti<t.tags.length;ti++){if(t.tags[ti]&&t.tags[ti].toLowerCase().indexOf(q)>=0){match=true;break}}}
973
+ if(!match)continue;
974
+ }
975
+ out.push(t);
993
976
  }
977
+ return out;
994
978
  }
995
979
 
996
980
  function toggleFilter(dim,val){
@@ -1000,568 +984,261 @@ function toggleFilter(dim,val){
1000
984
  }else{
1001
985
  _filterState[dim][val]=true;
1002
986
  }
1003
- var chips=document.querySelectorAll('.filter-chip[data-dimension="'+dim+'"]');
1004
- for(var i=0;i<chips.length;i++){
1005
- var cv=chips[i].getAttribute('data-value');
1006
- if(cv===val)chips[i].classList.toggle('filter-chip--active');
1007
- }
1008
987
  applyFilters();
1009
988
  }
1010
989
 
1011
990
  function clearAllFilters(){
1012
991
  _filterState={status:{},type:{},specFile:{}};
1013
- var active=document.querySelectorAll('.filter-chip--active');
1014
- for(var i=0;i<active.length;i++)active[i].classList.remove('filter-chip--active');
992
+ searchQuery='';
1015
993
  applyFilters();
1016
994
  }
1017
995
 
1018
996
  function applyFilters(){
997
+ renderFilterBar();
998
+ renderTestGrid();
1019
999
  var hasStatus=Object.keys(_filterState.status).length>0;
1020
1000
  var hasType=Object.keys(_filterState.type).length>0;
1021
1001
  var hasSpec=Object.keys(_filterState.specFile).length>0;
1022
1002
  var hasAny=hasStatus||hasType||hasSpec;
1023
-
1024
- var cards=document.querySelectorAll('.test-card');
1025
- var visibleCount=0;
1026
- var byStatus={passed:0,failed:0,flaky:0,skipped:0,timedout:0};
1027
-
1028
- for(var i=0;i<cards.length;i++){
1029
- var card=cards[i];
1030
- var st=card.getAttribute('data-status')||'';
1031
- var tp=card.getAttribute('data-type')||'';
1032
- var sp=card.getAttribute('data-spec')||'';
1033
- var match=true;
1034
- if(hasStatus&&!_filterState.status[st])match=false;
1035
- if(hasType&&!_filterState.type[tp])match=false;
1036
- if(hasSpec&&!_filterState.specFile[sp])match=false;
1037
- if(match){
1038
- card.classList.remove('filter-hidden');
1039
- visibleCount++;
1003
+ if(hasAny){
1004
+ var filtered=getFilteredTests();
1005
+ var byStatus={passed:0,failed:0,flaky:0,skipped:0,timedout:0};
1006
+ for(var i=0;i<filtered.length;i++){
1007
+ var st=filtered[i].status;
1040
1008
  if(byStatus[st]!==undefined)byStatus[st]++;
1041
- }else{
1042
- card.classList.add('filter-hidden');
1043
1009
  }
1044
- }
1045
-
1046
- // Timeline entries: hide if no visible test cards inside
1047
- var entries=document.querySelectorAll('.timeline-entry');
1048
- for(var i=0;i<entries.length;i++){
1049
- var entry=entries[i];
1050
- var visCards=entry.querySelectorAll('.test-card:not(.filter-hidden)');
1051
- if(hasAny&&visCards.length===0){
1052
- entry.classList.add('filter-hidden');
1053
- }else{
1054
- entry.classList.remove('filter-hidden');
1055
- }
1056
- }
1057
-
1058
- // Clear all button
1059
- var clearBtn=document.getElementById('filter-clear');
1060
- if(clearBtn)clearBtn.style.display=hasAny?'':'none';
1061
-
1062
- // Indicator
1063
- var indicator=document.getElementById('filter-indicator');
1064
- if(indicator)indicator.style.display=hasAny?'':'none';
1065
- var shown=document.getElementById('filter-shown');
1066
- if(shown)shown.textContent=''+visibleCount;
1067
-
1068
- // Summary card updates
1069
- if(hasAny){
1070
- _updateCard('card-total',visibleCount);
1071
- _updateCard('card-passed',byStatus.passed);
1072
- _updateCard('card-failed',byStatus.failed);
1073
- _updateCard('card-flaky',byStatus.flaky);
1074
- _updateCard('card-skipped',byStatus.skipped);
1075
- _updateCard('card-timedout',byStatus.timedout);
1010
+ _updateCard('s-total',filtered.length);
1011
+ _updateCard('s-passed',byStatus.passed);
1012
+ _updateCard('s-failed',byStatus.failed);
1013
+ _updateCard('s-flaky',byStatus.flaky);
1014
+ _updateCard('s-skipped',byStatus.skipped);
1015
+ _updateCard('s-timedout',byStatus.timedout);
1016
+ var shown=document.getElementById('filter-shown');
1017
+ if(shown)shown.textContent=''+filtered.length;
1076
1018
  }else if(_originalSummary){
1077
- _updateCard('card-total',_originalSummary.total);
1078
- _updateCard('card-passed',_originalSummary.passed);
1079
- _updateCard('card-failed',_originalSummary.failed);
1080
- _updateCard('card-flaky',_originalSummary.flaky);
1081
- _updateCard('card-skipped',_originalSummary.skipped);
1082
- _updateCard('card-timedout',_originalSummary.timedout);
1083
- }
1084
-
1085
- // Empty state
1086
- var emptyEl=document.getElementById('filter-empty');
1087
- var timeline=document.getElementById('timeline');
1088
- if(hasAny&&visibleCount===0){
1089
- if(emptyEl)emptyEl.style.display='';
1090
- if(timeline)timeline.style.display='none';
1091
- }else{
1092
- if(emptyEl)emptyEl.style.display='none';
1093
- if(timeline)timeline.style.display='';
1019
+ _updateCard('s-total',_originalSummary.total);
1020
+ _updateCard('s-passed',_originalSummary.passed);
1021
+ _updateCard('s-failed',_originalSummary.failed);
1022
+ _updateCard('s-flaky',_originalSummary.flaky);
1023
+ _updateCard('s-skipped',_originalSummary.skipped);
1024
+ _updateCard('s-timedout',_originalSummary.timedout);
1094
1025
  }
1095
1026
  }
1096
1027
 
1097
1028
  function _updateCard(cls,val){
1098
- var el=document.querySelector('.'+cls+' .count');
1029
+ var el=document.querySelector('.'+cls+' .s-count');
1099
1030
  if(el)el.textContent=''+val;
1100
1031
  }
1101
- `;
1032
+ `;var z=`
1033
+ /* \u2500\u2500 Event Delegation \u2500\u2500 */
1034
+ document.addEventListener('click',function(e){
1035
+ var target=e.target;
1102
1036
 
1103
- // src/html-template.ts
1104
- function renderHtmlDocument(reportJson) {
1105
- const jsWithLogo = JS_RENDER.replace(/__LOGO_SVG__/g, LOGO_SVG.replace(/'/g, "\\'").replace(/\n/g, ""));
1106
- const safeJson = reportJson.replace(/<\//g, "<\\/");
1107
- return `<!-- TestRelic Report \u2014 self-contained, no external dependencies -->
1108
- <!DOCTYPE html>
1109
- <html lang="en" data-theme="">
1110
- <head>
1111
- <meta charset="UTF-8">
1112
- <meta name="viewport" content="width=device-width,initial-scale=1">
1113
- <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';">
1114
- <title>TestRelic Report</title>
1115
- <style>${CSS}</style>
1116
- </head>
1117
- <body>
1118
- <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>
1119
- <div class="container" id="app"></div>
1120
- <script id="report-data" type="application/json">${safeJson}</script>
1121
- <script>${jsWithLogo}
1122
- ${JS_TABS}
1123
- ${JS_NETWORK}
1124
- ${JS_FILTERS}
1125
- ${JS_INTERACTIONS}</script>
1126
- </body>
1127
- </html>`;
1128
- }
1037
+ /* Test row click \u2192 open drawer */
1038
+ var row=target.closest('.test-row');
1039
+ if(row){openDrawer(row.getAttribute('data-testid'));return;}
1129
1040
 
1130
- // src/browser-open.ts
1131
- import { exec } from "child_process";
1132
- function openInBrowser(filePath) {
1133
- try {
1134
- const platform = process.platform;
1135
- let command;
1136
- if (platform === "darwin") {
1137
- command = `open "${filePath}"`;
1138
- } else if (platform === "win32") {
1139
- command = `start "" "${filePath}"`;
1140
- } else {
1141
- command = `xdg-open "${filePath}"`;
1041
+ /* Filter chip (multi-dimensional) */
1042
+ var chip=target.closest('.filter-chip');
1043
+ if(chip){
1044
+ var dim=chip.getAttribute('data-dimension');
1045
+ var val=chip.getAttribute('data-value');
1046
+ if(dim&&val)toggleFilter(dim,val);
1047
+ return;
1142
1048
  }
1143
- exec(command, (err) => {
1144
- if (err) {
1145
- process.stderr.write(
1146
- `[testrelic] Failed to open browser: ${err.message}
1147
- `
1148
- );
1149
- }
1150
- });
1151
- } catch {
1152
- }
1153
- }
1154
1049
 
1155
- // src/html-report.ts
1156
- function generateHtmlReport(report) {
1157
- const reportJson = JSON.stringify(report);
1158
- return renderHtmlDocument(reportJson);
1159
- }
1160
- function writeHtmlReport(report, config) {
1161
- try {
1162
- const html = generateHtmlReport(report);
1163
- const outputPath = config.htmlReportPath;
1164
- const dir = dirname(outputPath);
1165
- mkdirSync(dir, { recursive: true });
1166
- const tmpPath = outputPath + ".tmp";
1167
- writeFileSync(tmpPath, html, "utf-8");
1168
- renameSync(tmpPath, outputPath);
1169
- if (config.openReport && report.ci === null) {
1170
- const absolutePath = resolve(outputPath);
1171
- openInBrowser(absolutePath);
1172
- }
1173
- } catch (err) {
1174
- process.stderr.write(
1175
- `[testrelic] Failed to write HTML report: ${err instanceof Error ? err.message : String(err)}
1176
- `
1177
- );
1178
- }
1179
- }
1050
+ /* Clear all filters */
1051
+ if(target.closest('.filter-clear')){clearAllFilters();return;}
1180
1052
 
1181
- // src/artifact-manager.ts
1182
- import { mkdirSync as mkdirSync2, copyFileSync, existsSync } from "fs";
1183
- import { join, extname } from "path";
1184
- function sanitizeFolderName(title) {
1185
- let name = title.replace(/[^a-zA-Z0-9\-_ ]/g, "-").replace(/\s+/g, "-").replace(/-{2,}/g, "-").replace(/^-+|-+$/g, "");
1186
- if (name.length > 100) {
1187
- name = name.substring(0, 100).replace(/-+$/, "");
1188
- }
1189
- return name || "unnamed-test";
1190
- }
1191
- function copyArtifacts(attachments, testTitle, retryCount, outputDir) {
1192
- const screenshot = attachments.find(
1193
- (a) => a.name === "screenshot" && a.path
1194
- );
1195
- const video = attachments.find(
1196
- (a) => a.name === "video" && a.path
1197
- );
1198
- if (!screenshot && !video) {
1199
- return null;
1200
- }
1201
- let folderName = sanitizeFolderName(testTitle);
1202
- if (retryCount > 0) {
1203
- folderName += `--retry-${retryCount}`;
1204
- }
1205
- const artifactDir = join(outputDir, "artifacts", folderName);
1206
- const result = {};
1207
- try {
1208
- mkdirSync2(artifactDir, { recursive: true });
1209
- } catch {
1210
- return null;
1211
- }
1212
- if (screenshot?.path) {
1213
- try {
1214
- if (existsSync(screenshot.path)) {
1215
- const ext = extname(screenshot.path) || ".png";
1216
- const destName = `screenshot${ext}`;
1217
- copyFileSync(screenshot.path, join(artifactDir, destName));
1218
- result.screenshot = `artifacts/${folderName}/${destName}`;
1053
+ /* Step header \u2192 expand/collapse */
1054
+ var stepH=target.closest('[data-step]');
1055
+ if(stepH){var sd=document.getElementById('step-detail-'+stepH.getAttribute('data-step'));if(sd)sd.classList.toggle('show');return;}
1056
+
1057
+ /* Screenshot \u2192 lightbox */
1058
+ if(target.classList.contains('artifact-thumb')||target.classList.contains('artifact-col-img')){openLightbox(target.src);return;}
1059
+
1060
+ /* Segmented control switch */
1061
+ var segBtn=target.closest('.seg-btn');
1062
+ if(segBtn){
1063
+ var group=segBtn.parentElement;
1064
+ if(group&&group.classList.contains('seg-ctrl')){
1065
+ var col=group.parentElement;
1066
+ var btns=group.querySelectorAll('.seg-btn');
1067
+ for(var bi=0;bi<btns.length;bi++)btns[bi].classList.remove('active');
1068
+ segBtn.classList.add('active');
1069
+ var panes=col.querySelectorAll('.seg-pane');
1070
+ for(var pi=0;pi<panes.length;pi++){panes[pi].classList.remove('active');var vid=panes[pi].querySelector('video');if(vid)vid.pause();}
1071
+ var tp=col.querySelector('[data-seg-pane="'+segBtn.getAttribute('data-seg')+'"]');
1072
+ if(tp)tp.classList.add('active');
1219
1073
  }
1220
- } catch {
1074
+ return;
1221
1075
  }
1222
- }
1223
- if (video?.path) {
1224
- try {
1225
- if (existsSync(video.path)) {
1226
- const ext = extname(video.path) || ".webm";
1227
- const destName = `video${ext}`;
1228
- copyFileSync(video.path, join(artifactDir, destName));
1229
- result.video = `artifacts/${folderName}/${destName}`;
1076
+
1077
+ /* Network DevTools: request row \u2192 expand/collapse detail */
1078
+ var ndtRow=target.closest('.ndt-row');
1079
+ if(ndtRow){
1080
+ var idx=ndtRow.getAttribute('data-ndt-idx');
1081
+ var det=document.getElementById('ndt-d-'+idx);
1082
+ if(det){
1083
+ var isOpen=det.classList.toggle('show');
1084
+ ndtRow.classList.toggle('ndt-row--open',isOpen);
1085
+ /* Close other open details */
1086
+ var list=ndtRow.parentElement;
1087
+ if(list){var others=list.querySelectorAll('.ndt-detail.show');for(var oi=0;oi<others.length;oi++){if(others[oi]!==det){others[oi].classList.remove('show');var pr=others[oi].previousElementSibling;if(pr)pr.classList.remove('ndt-row--open');}}}
1230
1088
  }
1231
- } catch {
1089
+ return;
1232
1090
  }
1233
- }
1234
- if (!result.screenshot && !result.video) {
1235
- return null;
1236
- }
1237
- return result;
1238
- }
1239
1091
 
1240
- // src/reporter.ts
1241
- function mapPlaywrightStatus(status) {
1242
- switch (status) {
1243
- case "passed":
1244
- return "passed";
1245
- case "failed":
1246
- return "failed";
1247
- case "timedOut":
1248
- return "timedout";
1249
- case "skipped":
1250
- return "skipped";
1251
- case "interrupted":
1252
- return "failed";
1253
- default:
1254
- return "failed";
1255
- }
1256
- }
1257
- function generateTestId(filePath, suiteName, title) {
1258
- const input = `${filePath}::${suiteName}::${title}`;
1259
- return createHash("sha256").update(input).digest("hex").substring(0, 16);
1260
- }
1261
- function getSuiteName(titlePath) {
1262
- if (titlePath.length <= 4) return "";
1263
- return titlePath[titlePath.length - 2];
1264
- }
1265
- function getRetryStatus(results) {
1266
- const passedIndex = results.findIndex((r) => r.status === "passed");
1267
- return passedIndex > 0 ? `passed on retry ${passedIndex}` : null;
1268
- }
1269
- function getTestType(tags, filePath) {
1270
- const typeOrder = ["e2e", "api", "unit"];
1271
- for (const type of typeOrder) {
1272
- if (tags.some((tag) => tag === `@${type}` || tag === type)) {
1273
- return type;
1274
- }
1275
- }
1276
- for (const type of typeOrder) {
1277
- if (filePath.includes(`/${type}/`)) {
1278
- return type;
1279
- }
1280
- }
1281
- return "unknown";
1282
- }
1283
- var TestRelicReporter = class {
1284
- constructor(options) {
1285
- this.rootDir = "";
1286
- this.startedAt = "";
1287
- this.testRunId = "";
1288
- this.collectedTests = [];
1289
- this.config = resolveConfig(options);
1290
- }
1291
- onBegin(config, _suite) {
1292
- try {
1293
- this.rootDir = config.rootDir;
1294
- this.startedAt = (/* @__PURE__ */ new Date()).toISOString();
1295
- this.testRunId = this.config.testRunId ?? randomUUID();
1296
- } catch {
1297
- }
1298
- }
1299
- onTestEnd(test, result) {
1300
- try {
1301
- const lastResult = result;
1302
- const outcome = test.outcome();
1303
- let status;
1304
- if (outcome === "flaky") {
1305
- status = "flaky";
1306
- } else if (outcome === "skipped") {
1307
- status = "skipped";
1308
- } else {
1309
- status = mapPlaywrightStatus(lastResult.status);
1310
- }
1311
- const startedAt = lastResult.startTime.toISOString();
1312
- const completedAt = new Date(lastResult.startTime.getTime() + lastResult.duration).toISOString();
1313
- const tags = test.tags ? [...test.tags] : test.annotations.filter((a) => a.type === "tag").map((a) => a.description ?? "");
1314
- const navigations = test.annotations.filter((a) => a.type === "lambdatest-navigation" && a.description).map((a) => {
1315
- try {
1316
- return JSON.parse(a.description);
1317
- } catch {
1318
- return null;
1319
- }
1320
- }).filter((n) => n !== null);
1321
- let networkRequests = null;
1322
- const networkReqAnnotation = test.annotations.find(
1323
- (a) => a.type === "__testrelic_network_requests" && a.description
1324
- );
1325
- if (networkReqAnnotation) {
1326
- try {
1327
- networkRequests = JSON.parse(networkReqAnnotation.description);
1328
- } catch {
1329
- }
1330
- }
1331
- let failure = null;
1332
- if (status === "failed" || status === "flaky") {
1333
- const errors = status === "flaky" ? test.results.find((r) => r.status !== "passed")?.errors ?? [] : lastResult.errors;
1334
- const firstError = errors[0];
1335
- if (firstError) {
1336
- const redact = createRedactor(this.config.redactPatterns);
1337
- const errorLine = firstError.location?.line ?? null;
1338
- let codeSnippet = null;
1339
- if (this.config.includeCodeSnippets && errorLine !== null && firstError.location?.file) {
1340
- codeSnippet = extractCodeSnippet(
1341
- firstError.location.file,
1342
- errorLine,
1343
- this.config.codeContextLines
1344
- );
1345
- if (codeSnippet) codeSnippet = redact(codeSnippet);
1346
- }
1347
- failure = {
1348
- message: redact(firstError.message ?? "Unknown error"),
1349
- line: errorLine,
1350
- code: codeSnippet,
1351
- stack: this.config.includeStackTrace ? firstError.stack ? redact(firstError.stack) : null : null
1352
- };
1353
- }
1354
- }
1355
- const titlePath = test.titlePath().filter(Boolean);
1356
- const specFile = relative(this.rootDir || ".", test.location.file);
1357
- const suiteName = getSuiteName(titlePath);
1358
- const title = titlePath.join(" > ");
1359
- const filePath = specFile;
1360
- const testId = generateTestId(filePath, suiteName, title);
1361
- const testType = getTestType(tags, filePath);
1362
- const isFlaky = outcome === "flaky";
1363
- const retryStatus = getRetryStatus(test.results);
1364
- const expectedStatus = mapPlaywrightStatus(test.expectedStatus);
1365
- const actualStatus = mapPlaywrightStatus(lastResult.status);
1366
- let artifacts = null;
1367
- if (this.config.includeArtifacts && status !== "skipped" && lastResult.attachments) {
1368
- const outputDir = dirname2(this.config.outputPath);
1369
- const lastTitle = titlePath[titlePath.length - 1] ?? test.title;
1370
- artifacts = copyArtifacts(lastResult.attachments, lastTitle, lastResult.retry, outputDir);
1092
+ /* Network DevTools: detail tab switch */
1093
+ var ndtTab=target.closest('.ndt-detail-tab');
1094
+ if(ndtTab){
1095
+ var tgt=ndtTab.getAttribute('data-ndt-target');
1096
+ var pane=ndtTab.getAttribute('data-ndt-tab');
1097
+ var det=document.getElementById(tgt);
1098
+ if(det){
1099
+ var tabs=det.querySelectorAll('.ndt-detail-tab');
1100
+ for(var ti=0;ti<tabs.length;ti++)tabs[ti].classList.remove('active');
1101
+ ndtTab.classList.add('active');
1102
+ var panes=det.querySelectorAll('.ndt-detail-pane');
1103
+ for(var pi=0;pi<panes.length;pi++)panes[pi].classList.remove('active');
1104
+ var tp=det.querySelector('[data-ndt-pane="'+pane+'"]');
1105
+ if(tp)tp.classList.add('active');
1371
1106
  }
1372
- this.collectedTests.push({
1373
- titlePath,
1374
- title,
1375
- status,
1376
- duration: lastResult.duration,
1377
- startedAt,
1378
- completedAt,
1379
- retryCount: test.results.length - 1,
1380
- tags,
1381
- failure,
1382
- specFile,
1383
- navigations,
1384
- testId,
1385
- filePath,
1386
- suiteName,
1387
- testType,
1388
- isFlaky,
1389
- retryStatus,
1390
- expectedStatus,
1391
- actualStatus,
1392
- artifacts,
1393
- networkRequests
1394
- });
1395
- } catch {
1396
- }
1397
- }
1398
- onEnd(_result) {
1399
- try {
1400
- const completedAt = (/* @__PURE__ */ new Date()).toISOString();
1401
- const startedAtTime = new Date(this.startedAt).getTime();
1402
- const completedAtTime = new Date(completedAt).getTime();
1403
- const totalDuration = completedAtTime - startedAtTime;
1404
- const timeline = this.buildTimeline();
1405
- const summary = this.buildSummary();
1406
- const report = {
1407
- schemaVersion: SCHEMA_VERSION,
1408
- testRunId: this.testRunId,
1409
- startedAt: this.startedAt,
1410
- completedAt,
1411
- totalDuration,
1412
- summary,
1413
- ci: detectCI(),
1414
- metadata: this.config.metadata,
1415
- timeline,
1416
- shardRunIds: null
1417
- };
1418
- this.writeReport(report);
1419
- writeHtmlReport(report, this.config);
1420
- } catch {
1107
+ return;
1421
1108
  }
1422
- }
1423
- printsToStdio() {
1424
- return false;
1425
- }
1426
- buildTimeline() {
1427
- const entries = [];
1428
- for (const test of this.collectedTests) {
1429
- if (test.navigations.length === 0) {
1430
- entries.push({
1431
- url: "about:blank",
1432
- navigationType: "dummy",
1433
- visitedAt: test.startedAt,
1434
- duration: test.duration,
1435
- specFile: test.specFile,
1436
- domContentLoadedAt: null,
1437
- networkIdleAt: null,
1438
- networkStats: null,
1439
- tests: [this.toTestResult(test)]
1440
- });
1441
- continue;
1442
- }
1443
- for (let i = 0; i < test.navigations.length; i++) {
1444
- const nav = test.navigations[i];
1445
- const nextNav = test.navigations[i + 1];
1446
- if (this.config.navigationTypes !== null && !this.config.navigationTypes.includes(nav.navigationType)) {
1447
- continue;
1448
- }
1449
- const navTime = new Date(nav.timestamp).getTime();
1450
- const nextTime = nextNav ? new Date(nextNav.timestamp).getTime() : new Date(test.completedAt).getTime();
1451
- const duration = nextTime - navTime;
1452
- entries.push({
1453
- url: nav.url,
1454
- navigationType: nav.navigationType,
1455
- visitedAt: nav.timestamp,
1456
- duration: Math.max(0, duration),
1457
- specFile: test.specFile,
1458
- domContentLoadedAt: nav.domContentLoadedAt ?? null,
1459
- networkIdleAt: nav.networkIdleAt ?? null,
1460
- networkStats: nav.networkStats ?? null,
1461
- tests: [this.toTestResult(test)]
1462
- });
1109
+
1110
+ /* Network DevTools: type filter */
1111
+ var ndtFilterBtn=target.closest('.ndt-filter-btn');
1112
+ if(ndtFilterBtn){
1113
+ var filterType=ndtFilterBtn.getAttribute('data-ndt-filter');
1114
+ var toolbar=ndtFilterBtn.closest('.ndt-toolbar');
1115
+ if(toolbar){
1116
+ var btns=toolbar.querySelectorAll('.ndt-filter-btn');
1117
+ for(var bi=0;bi<btns.length;bi++)btns[bi].classList.remove('active');
1118
+ ndtFilterBtn.classList.add('active');
1119
+ var ndt=toolbar.closest('.ndt');
1120
+ if(ndt){ndtApplyFilters(ndt,filterType,null);}
1463
1121
  }
1122
+ return;
1464
1123
  }
1465
- entries.sort((a, b) => new Date(a.visitedAt).getTime() - new Date(b.visitedAt).getTime());
1466
- return entries;
1467
- }
1468
- buildSummary() {
1469
- let passed = 0;
1470
- let failed = 0;
1471
- let flaky = 0;
1472
- let skipped = 0;
1473
- let timedout = 0;
1474
- for (const test of this.collectedTests) {
1475
- switch (test.status) {
1476
- case "passed":
1477
- passed++;
1478
- break;
1479
- case "failed":
1480
- failed++;
1481
- break;
1482
- case "flaky":
1483
- flaky++;
1484
- break;
1485
- case "skipped":
1486
- skipped++;
1487
- break;
1488
- case "timedout":
1489
- timedout++;
1490
- break;
1124
+
1125
+ /* Stack trace toggle */
1126
+ if(target.classList.contains('stack-toggle-btn')){var se=document.getElementById(target.getAttribute('data-stack'));if(se){var sv=se.classList.toggle('show');target.textContent=sv?'Hide stack trace':'Show stack trace';}return;}
1127
+
1128
+ /* Lightbox close */
1129
+ if(target.classList.contains('lightbox-overlay')||target.classList.contains('lightbox-close')){closeLightbox();return;}
1130
+
1131
+ /* Theme toggle */
1132
+ var themeBtn=target.closest('.theme-btn');
1133
+ if(themeBtn){setTheme(themeBtn.getAttribute('data-theme-val'));return;}
1134
+
1135
+ /* Drawer close */
1136
+ if(target.closest('#drawer-close')){closeDrawer();return;}
1137
+ if(target.closest('#drawer-backdrop')){closeDrawer();return;}
1138
+ });
1139
+
1140
+ /* Search input \u2014 main test search + network filter search */
1141
+ document.addEventListener('input',function(e){
1142
+ if(e.target.id==='search-input')doSearch(e.target.value);
1143
+ if(e.target.hasAttribute('data-ndt-search')){
1144
+ var ndt=e.target.closest('.ndt');
1145
+ if(ndt){
1146
+ var activeBtn=ndt.querySelector('.ndt-filter-btn.active');
1147
+ var filterType=activeBtn?activeBtn.getAttribute('data-ndt-filter'):'all';
1148
+ ndtApplyFilters(ndt,filterType,e.target.value);
1491
1149
  }
1492
1150
  }
1493
- return {
1494
- total: this.collectedTests.length,
1495
- passed,
1496
- failed,
1497
- flaky,
1498
- skipped,
1499
- timedout
1500
- };
1501
- }
1502
- toTestResult(test) {
1503
- return {
1504
- title: test.title,
1505
- status: test.status,
1506
- duration: test.duration,
1507
- startedAt: test.startedAt,
1508
- completedAt: test.completedAt,
1509
- retryCount: test.retryCount,
1510
- tags: test.tags,
1511
- failure: test.failure,
1512
- testId: test.testId,
1513
- filePath: test.filePath,
1514
- suiteName: test.suiteName,
1515
- testType: test.testType,
1516
- isFlaky: test.isFlaky,
1517
- retryStatus: test.retryStatus,
1518
- expectedStatus: test.expectedStatus,
1519
- actualStatus: test.actualStatus,
1520
- artifacts: test.artifacts,
1521
- networkRequests: test.networkRequests
1522
- };
1151
+ });
1152
+
1153
+ /* Keyboard */
1154
+ document.addEventListener('keydown',function(e){
1155
+ if(e.key==='Escape'){closeLightbox();closeDrawer();}
1156
+ });
1157
+
1158
+ /* \u2500\u2500 Theme Management \u2500\u2500 */
1159
+ function getThemePref(){return localStorage.getItem('tr-theme')||'system'}
1160
+ function resolveTheme(pref){return pref==='system'?(window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark'):pref}
1161
+ function applyTheme(){
1162
+ var pref=getThemePref();
1163
+ document.documentElement.setAttribute('data-theme',resolveTheme(pref));
1164
+ var btns=document.querySelectorAll('.theme-btn');
1165
+ for(var i=0;i<btns.length;i++){btns[i].classList.toggle('active',btns[i].getAttribute('data-theme-val')===pref);}
1523
1166
  }
1524
- writeReport(report) {
1525
- try {
1526
- const json = JSON.stringify(report, null, 2);
1527
- const outputPath = this.config.outputPath;
1528
- const dir = dirname2(outputPath);
1529
- mkdirSync3(dir, { recursive: true });
1530
- const tmpPath = outputPath + ".tmp";
1531
- writeFileSync2(tmpPath, json, "utf-8");
1532
- renameSync2(tmpPath, outputPath);
1533
- } catch (err) {
1534
- process.stderr.write(
1535
- `[testrelic] Failed to write report: ${err instanceof Error ? err.message : String(err)}
1536
- `
1537
- );
1538
- }
1167
+ function setTheme(pref){localStorage.setItem('tr-theme',pref);applyTheme();}
1168
+ try{window.matchMedia('(prefers-color-scheme:light)').addEventListener('change',function(){if(getThemePref()==='system')applyTheme();});}catch(e){}
1169
+
1170
+ /* \u2500\u2500 Lightbox \u2500\u2500 */
1171
+ function openLightbox(src){
1172
+ var o=document.createElement('div');o.className='lightbox-overlay';
1173
+ o.innerHTML='<img src="'+src.replace(/"/g,'&quot;')+'" alt="Screenshot">';
1174
+ var b=document.createElement('button');b.className='lightbox-close';b.innerHTML='&times;';
1175
+ document.body.appendChild(o);document.body.appendChild(b);
1539
1176
  }
1540
- };
1541
-
1542
- // src/index.ts
1543
- var warned = false;
1544
- function recordNavigation(testInfo, url, navigationType = "manual_record") {
1545
- if (!testInfo || !testInfo.annotations) {
1546
- if (!warned) {
1547
- warned = true;
1548
- process.stderr.write("[testrelic] recordNavigation: reporter not active, navigation not recorded\n");
1549
- }
1550
- return;
1177
+ function closeLightbox(){
1178
+ var o=document.querySelector('.lightbox-overlay');if(o)o.remove();
1179
+ var b=document.querySelector('.lightbox-close');if(b)b.remove();
1551
1180
  }
1552
- const annotation = {
1553
- url,
1554
- navigationType,
1555
- timestamp: (/* @__PURE__ */ new Date()).toISOString()
1556
- };
1557
- testInfo.annotations.push({
1558
- type: "lambdatest-navigation",
1559
- description: JSON.stringify(annotation)
1560
- });
1561
- }
1562
- export {
1563
- SCHEMA_VERSION,
1564
- TestRelicReporter as default,
1565
- recordNavigation
1566
- };
1181
+ `;var ct=`
1182
+ (function(){
1183
+ var data=JSON.parse(document.getElementById('report-data').textContent);
1184
+ ${q}
1185
+ ${B}
1186
+ ${D}
1187
+ ${z}
1188
+ applyTheme();
1189
+ renderRunMeta();
1190
+ renderSummary();
1191
+ initFilters();
1192
+ renderFilterBar();
1193
+ renderTestGrid();
1194
+ })();`;function H(e){let t=e.replace(/<\//g,"<\\/");return `<!-- TestRelic Analytics Report \u2014 self-contained, no external dependencies -->
1195
+ <!DOCTYPE html>
1196
+ <html lang="en" data-theme="">
1197
+ <head>
1198
+ <meta charset="UTF-8">
1199
+ <meta name="viewport" content="width=device-width,initial-scale=1">
1200
+ <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';">
1201
+ <title>TestRelic Analytics Report</title>
1202
+ <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,${Buffer.from(_).toString("base64")}">
1203
+ <style>${E}</style>
1204
+ <script>(function(){var p=localStorage.getItem('tr-theme')||'system';var t=p==='system'?(window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark'):p;document.documentElement.setAttribute('data-theme',t);})()</script>
1205
+ </head>
1206
+ <body>
1207
+ <div class="wrap">
1208
+ <div class="top-bar">
1209
+ <div class="brand">
1210
+ ${N}
1211
+ <div class="brand-text">
1212
+ <span class="brand-title">TestRelic</span>
1213
+ <span class="brand-sub">Analytics Report</span>
1214
+ </div>
1215
+ </div>
1216
+ <div class="run-meta" id="run-meta"></div>
1217
+ <div class="theme-toggle" id="theme-toggle">
1218
+ <button class="theme-btn" data-theme-val="system" title="System"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></button>
1219
+ <button class="theme-btn" data-theme-val="light" title="Light"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg></button>
1220
+ <button class="theme-btn" data-theme-val="dark" title="Dark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg></button>
1221
+ </div>
1222
+ <a class="cta-btn" href="https://testrelic.co" target="_blank" rel="noopener noreferrer"><svg class="cta-icon" viewBox="0 0 16 16" fill="none"><path d="M8 1l1.545 4.955L14.5 7.5l-4.955 1.545L8 14l-1.545-4.955L1.5 7.5l4.955-1.545L8 1z" fill="currentColor"/></svg>Advanced Insights with AI<span class="cta-sep">\u2013</span><strong>Get Started</strong><svg class="cta-arrow" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg></a>
1223
+ </div>
1224
+ <div id="summary-strip" class="summary-strip"></div>
1225
+ <div id="filter-bar" class="filter-bar"></div>
1226
+ <div id="test-grid"></div>
1227
+ </div>
1228
+ <div class="drawer-backdrop" id="drawer-backdrop"></div>
1229
+ <aside class="drawer" id="drawer">
1230
+ <div class="drawer-bar">
1231
+ <span class="drawer-bar-title">Test Details</span>
1232
+ <button class="drawer-close" id="drawer-close">&times;</button>
1233
+ </div>
1234
+ <div class="drawer-body" id="drawer-body"></div>
1235
+ </aside>
1236
+ <script id="report-data" type="application/json">${t}</script>
1237
+ <script>${ct}</script>
1238
+ </body>
1239
+ </html>`}function P(e){try{let t=process.platform,a;t==="darwin"?a=`open "${e}"`:t==="win32"?a=`start "" "${e}"`:a=`xdg-open "${e}"`,exec(a,r=>{r&&process.stderr.write(`[testrelic] Failed to open browser: ${r.message}
1240
+ `);});}catch{}}function vt(e){let t=JSON.stringify(e);return H(t)}function O(e,t){try{let a=vt(e),r=t.htmlReportPath,s=dirname(r);mkdirSync(s,{recursive:!0});let i=r+".tmp";if(writeFileSync(i,a,"utf-8"),renameSync(i,r),t.openReport&&e.ci===null){let o=resolve(r);P(o);}}catch(a){process.stderr.write(`[testrelic] Failed to write HTML report: ${a instanceof Error?a.message:String(a)}
1241
+ `);}}function xt(e){let t=e.replace(/[^a-zA-Z0-9\-_ ]/g,"-").replace(/\s+/g,"-").replace(/-{2,}/g,"-").replace(/^-+|-+$/g,"");return t.length>100&&(t=t.substring(0,100).replace(/-+$/,"")),t||"unnamed-test"}function G(e,t,a,r){let s=e.find(c=>c.name==="screenshot"&&c.path),i=e.find(c=>c.name==="video"&&c.path);if(!s&&!i)return null;let o=xt(t);a>0&&(o+=`--retry-${a}`);let d=join(r,"artifacts",o),n={};try{mkdirSync(d,{recursive:!0});}catch{return null}if(s?.path)try{if(existsSync(s.path)){let p=`screenshot${extname(s.path)||".png"}`;copyFileSync(s.path,join(d,p)),n.screenshot=`artifacts/${o}/${p}`;}}catch{}if(i?.path)try{if(existsSync(i.path)){let p=`video${extname(i.path)||".webm"}`;copyFileSync(i.path,join(d,p)),n.video=`artifacts/${o}/${p}`;}}catch{}return !n.screenshot&&!n.video?null:n}function w(e){switch(e){case "passed":return "passed";case "failed":return "failed";case "timedOut":return "timedout";case "skipped":return "skipped";case "interrupted":return "failed";default:return "failed"}}function Rt(e,t,a){let r=`${e}::${t}::${a}`;return createHash("sha256").update(r).digest("hex").substring(0,16)}function Lt(e){return e.length<=4?"":e[e.length-2]}function At(e){let t=e.findIndex(a=>a.status==="passed");return t>0?`passed on retry ${t}`:null}function It(e,t){let a=["e2e","api","unit"];for(let r of a)if(e.some(s=>s===`@${r}`||s===r))return r;for(let r of a)if(t.includes(`/${r}/`))return r;return "unknown"}var h=class{constructor(t){this.rootDir="";this.startedAt="";this.testRunId="";this.collectedTests=[];this.config=A(t);}onBegin(t,a){try{this.rootDir=t.rootDir,this.startedAt=new Date().toISOString(),this.testRunId=this.config.testRunId??randomUUID();}catch{}}onTestEnd(t,a){try{let r=a,s=t.outcome(),i;s==="flaky"?i="flaky":s==="skipped"?i="skipped":i=w(r.status);let o=r.startTime.toISOString(),d=new Date(r.startTime.getTime()+r.duration).toISOString(),n=t.tags?[...t.tags]:t.annotations.filter(l=>l.type==="tag").map(l=>l.description??""),c=t.annotations.filter(l=>l.type==="lambdatest-navigation"&&l.description).map(l=>{try{return JSON.parse(l.description)}catch{return null}}).filter(l=>l!==null),p=null,k=t.annotations.find(l=>l.type==="__testrelic_network_requests"&&l.description);if(k)try{p=JSON.parse(k.description);}catch{}let C=null;if(i==="failed"||i==="flaky"){let u=(i==="flaky"?t.results.find(f=>f.status!=="passed")?.errors??[]:r.errors)[0];if(u){let f=M(this.config.redactPatterns),m=u.location?.line??null,b=null;this.config.includeCodeSnippets&&m!==null&&u.location?.file&&(b=I(u.location.file,m,this.config.codeContextLines),b&&(b=f(b))),C={message:f(u.message??"Unknown error"),line:m,code:b,stack:this.config.includeStackTrace&&u.stack?f(u.stack):null};}}let g=t.titlePath().filter(Boolean),S=relative(this.rootDir||".",t.location.file),T=Lt(g),R=g.join(" > "),v=S,Z=Rt(v,T,R),K=It(n,v),Q=s==="flaky",W=At(t.results),X=w(t.expectedStatus),Y=w(r.status),L=null;if(this.config.includeArtifacts&&i!=="skipped"&&r.attachments){let l=dirname(this.config.outputPath),u=g[g.length-1]??t.title;L=G(r.attachments,u,r.retry,l);}this.collectedTests.push({titlePath:g,title:R,status:i,duration:r.duration,startedAt:o,completedAt:d,retryCount:t.results.length-1,tags:n,failure:C,specFile:S,navigations:c,testId:Z,filePath:v,suiteName:T,testType:K,isFlaky:Q,retryStatus:W,expectedStatus:X,actualStatus:Y,artifacts:L,networkRequests:p});}catch{}}onEnd(t){try{let a=new Date().toISOString(),r=new Date(this.startedAt).getTime(),i=new Date(a).getTime()-r,o=this.buildTimeline(),d=this.buildSummary(),n={schemaVersion:x,testRunId:this.testRunId,startedAt:this.startedAt,completedAt:a,totalDuration:i,summary:d,ci:F(),metadata:this.config.metadata,timeline:o,shardRunIds:null};this.writeReport(n),O(n,this.config);}catch{}}printsToStdio(){return false}buildTimeline(){let t=[];for(let a of this.collectedTests){if(a.navigations.length===0){t.push({url:"about:blank",navigationType:"dummy",visitedAt:a.startedAt,duration:a.duration,specFile:a.specFile,domContentLoadedAt:null,networkIdleAt:null,networkStats:null,tests:[this.toTestResult(a)]});continue}for(let r=0;r<a.navigations.length;r++){let s=a.navigations[r],i=a.navigations[r+1];if(this.config.navigationTypes!==null&&!this.config.navigationTypes.includes(s.navigationType))continue;let o=new Date(s.timestamp).getTime(),n=(i?new Date(i.timestamp).getTime():new Date(a.completedAt).getTime())-o;t.push({url:s.url,navigationType:s.navigationType,visitedAt:s.timestamp,duration:Math.max(0,n),specFile:a.specFile,domContentLoadedAt:s.domContentLoadedAt??null,networkIdleAt:s.networkIdleAt??null,networkStats:s.networkStats??null,tests:[this.toTestResult(a)]});}}return t.sort((a,r)=>new Date(a.visitedAt).getTime()-new Date(r.visitedAt).getTime()),t}buildSummary(){let t=0,a=0,r=0,s=0,i=0;for(let o of this.collectedTests)switch(o.status){case "passed":t++;break;case "failed":a++;break;case "flaky":r++;break;case "skipped":s++;break;case "timedout":i++;break}return {total:this.collectedTests.length,passed:t,failed:a,flaky:r,skipped:s,timedout:i}}toTestResult(t){return {title:t.title,status:t.status,duration:t.duration,startedAt:t.startedAt,completedAt:t.completedAt,retryCount:t.retryCount,tags:t.tags,failure:t.failure,testId:t.testId,filePath:t.filePath,suiteName:t.suiteName,testType:t.testType,isFlaky:t.isFlaky,retryStatus:t.retryStatus,expectedStatus:t.expectedStatus,actualStatus:t.actualStatus,artifacts:t.artifacts,networkRequests:t.networkRequests}}writeReport(t){try{let a=JSON.stringify(t,null,2),r=this.config.outputPath,s=dirname(r);mkdirSync(s,{recursive:!0});let i=r+".tmp";writeFileSync(i,a,"utf-8"),renameSync(i,r);}catch(a){process.stderr.write(`[testrelic] Failed to write report: ${a instanceof Error?a.message:String(a)}
1242
+ `);}}};var J=false;function ve(e,t,a="manual_record"){if(!e||!e.annotations){J||(J=true,process.stderr.write(`[testrelic] recordNavigation: reporter not active, navigation not recorded
1243
+ `));return}let r={url:t,navigationType:a,timestamp:new Date().toISOString()};e.annotations.push({type:"lambdatest-navigation",description:JSON.stringify(r)});}export{x as SCHEMA_VERSION,h as default,ve as recordNavigation};//# sourceMappingURL=index.js.map
1567
1244
  //# sourceMappingURL=index.js.map