donobu 5.8.4 → 5.9.0

package/dist/cli/playwright-json-to-html.js

@@ -15,6 +15,8 @@
  * ```
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTriageData = loadTriageData;
+exports.generateHtml = generateHtml;
 const fs_1 = require("fs");
 const path_1 = require("path");
 // ---------------------------------------------------------------------------
@@ -23,6 +25,76 @@ const path_1 = require("path");
 function stripAnsi(str) {
     return str.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
 }
+/**
+ * Convert ANSI SGR color codes to HTML spans. Handles the subset Playwright's
+ * expect formatter emits: red (31), green (32), dim (2), and resets (0/22/39).
+ * Text segments are HTML-escaped before wrapping.
+ */
+function ansiToHtml(str) {
+    const colorMap = {
+        '31': 'var(--red)',
+        '32': 'var(--green)',
+        '2': 'var(--text-dim)',
+    };
+    const resetCodes = new Set(['0', '22', '39', '49', '']);
+    let html = '';
+    let openSpans = 0;
+    // Split on ESC [ ... m sequences; odd indices are the captured code group
+    const parts = str.split(/\x1b\[([0-9;]*)m/);
+    for (let i = 0; i < parts.length; i++) {
+        if (i % 2 === 0) {
+            html += esc(parts[i]);
+        }
+        else {
+            const code = parts[i];
+            if (resetCodes.has(code)) {
+                if (openSpans > 0) {
+                    html += '</span>'.repeat(openSpans);
+                    openSpans = 0;
+                }
+            }
+            else {
+                const color = colorMap[code];
+                if (color) {
+                    html += `<span style="color:${color}">`;
+                    openSpans++;
+                }
+            }
+        }
+    }
+    if (openSpans > 0) {
+        html += '</span>'.repeat(openSpans);
+    }
+    return html;
+}
+/**
+ * Read a few lines of source around `targetLine` (1-based) and return an HTML
+ * snippet block, or null if the file is unreadable.
+ */
+function readSourceSnippet(file, targetLine) {
+    try {
+        const source = (0, fs_1.readFileSync)(file, 'utf8');
+        const lines = source.split('\n');
+        const context = 2;
+        const start = Math.max(0, targetLine - 1 - context);
+        const end = Math.min(lines.length - 1, targetLine - 1 + context);
+        let html = '<div class="native-step-snippet">';
+        for (let i = start; i <= end; i++) {
+            const lineNum = i + 1;
+            const isTarget = lineNum === targetLine;
+            const marker = isTarget ? '&gt;' : '&nbsp;';
+            html += `<div class="snippet-line${isTarget ? ' snippet-line--target' : ''}">`;
+            html += `<span class="snippet-linenum">${marker} ${String(lineNum).padStart(3)}</span>`;
+            html += `<span class="snippet-code"> ${esc(lines[i] ?? '')}</span>`;
+            html += '</div>';
+        }
+        html += '</div>';
+        return html;
+    }
+    catch {
+        return null;
+    }
+}
 function esc(str) {
     return str
         .replace(/&/g, '&amp;')
@@ -277,6 +349,18 @@ function extractTests(jsonData) {
                             // Ignore parse failures
                         }
                     }
+                    // Parse native Playwright steps from donobu-native-steps attachment
+                    let nativeSteps = [];
+                    const nativeAtt = attachments.find((a) => a.name === 'donobu-native-steps');
+                    if (nativeAtt?.body) {
+                        try {
+                            const decoded = Buffer.from(nativeAtt.body, 'base64').toString('utf8');
+                            nativeSteps = JSON.parse(decoded);
+                        }
+                        catch {
+                            // Ignore parse failures
+                        }
+                    }
                     return {
                         index: i,
                         status: r.status,
@@ -286,13 +370,21 @@ function extractTests(jsonData) {
                         errors: (r.errors ?? (r.error ? [r.error] : [])).map((e) => ({
                             message: e.message,
                             stack: e.stack,
-                            snippet: e.snippet ? stripAnsi(e.snippet) : undefined,
+                            snippet: e.snippet ?? undefined,
                             actual: e.actual,
                             expected: e.expected,
+                            location: e.location
+                                ? {
+                                    file: e.location.file ?? '',
+                                    line: e.location.line ?? 0,
+                                    column: e.location.column ?? 0,
+                                }
+                                : undefined,
                         })),
                         attachments,
                         steps: parseStderrSteps(r.stderr ?? []),
                         stepScreenshots,
+                        nativeSteps,
                     };
                 });
                 tests.push({
@@ -491,16 +583,14 @@ function renderErrors(errors) {
     let html = '';
     for (const err of errors) {
         if (err.message) {
-            html += `<pre class="error-block">${esc(stripAnsi(err.message))}</pre>`;
+            // Use a neutral container so ANSI-derived colors (green Expected, red
+            // Received, dim call log) render correctly without a red tint fighting them.
+            html += `<pre class="error-block-ansi">${ansiToHtml(err.message)}</pre>`;
         }
         if (err.snippet) {
-            html += `<div class="detail-label">Code Snippet</div><pre class="snippet-block">${esc(err.snippet)}</pre>`;
-        }
-        if (err.actual !== null &&
-            err.actual !== undefined &&
-            err.expected !== null &&
-            err.expected !== undefined) {
-            html += `<div class="expect-actual"><span class="expect-label">Expected:</span> <code>${esc(err.expected)}</code><br/><span class="expect-label">Actual:</span> <code>${esc(err.actual)}</code></div>`;
+            // Playwright's pre-formatted snippet (pipe/arrow markers) — convert ANSI
+            // highlight codes to HTML spans so the failing line shows in color.
+            html += `<pre class="snippet-block">${ansiToHtml(err.snippet)}</pre>`;
         }
         if (err.stack && err.stack !== err.message) {
             html += `<details class="stack-details"><summary>Stack trace</summary><pre class="stack-block">${esc(stripAnsi(err.stack))}</pre></details>`;
@@ -508,93 +598,142 @@ function renderErrors(errors) {
     }
     return html;
 }
-function renderSteps(steps, stepScreenshots, outputDir) {
+function renderNativeStep(ns) {
+    const statusIcon = ns.passed
+        ? '<span class="step-status-ok">&#10003;</span>'
+        : '<span class="step-status-fail">&#10007;</span>';
+    const categoryBadge = `<span class="native-step-badge native-step-badge--${ns.category}">${esc(ns.category)}</span>`;
+    const locationStr = ns.location?.file
+        ? esc(`${ns.location.file.replace(/.*[/\\]/, '')}:${ns.location.line}`)
+        : '';
+    let html = `<div class="filmstrip-step native-step">`;
+    html += `<div class="filmstrip-header">`;
+    html += statusIcon;
+    html += `<span class="native-step-title">${esc(ns.title)}</span>`;
+    html += categoryBadge;
+    if (locationStr) {
+        html += `<span class="native-step-location">${locationStr}</span>`;
+    }
+    html += `</div>`;
+    if (!ns.passed && ns.error?.message) {
+        html += `<pre class="native-step-error">${ansiToHtml(ns.error.message)}</pre>`;
+    }
+    if (!ns.passed && ns.location?.file) {
+        const snippet = readSourceSnippet(ns.location.file, ns.location.line);
+        if (snippet) {
+            html += snippet;
+        }
+    }
+    html += `</div>`;
+    return html;
+}
+function renderFilmstripStep(ss, outputDir) {
+    const duration = ss.completedAt - ss.startedAt;
+    const durationStr = duration >= 1000 ? `${(duration / 1000).toFixed(1)}s` : `${duration}ms`;
+    const statusIcon = ss.success
+        ? '<span class="step-status-ok">&#10003;</span>'
+        : '<span class="step-status-fail">&#10007;</span>';
+    let imgSrc = null;
+    if (ss.imagePath && (0, fs_1.existsSync)(ss.imagePath)) {
+        imgSrc = outputDir ? (0, path_1.relative)(outputDir, ss.imagePath) : ss.imagePath;
+    }
+    else if (ss.imageBody && ss.imageContentType) {
+        imgSrc = `data:${ss.imageContentType};base64,${ss.imageBody}`;
+    }
+    const hasDetail = !!(ss.parameters || ss.outcome);
+    let jsonBlock = '';
+    if (hasDetail) {
+        const jsonObj = {
+            toolName: ss.toolName,
+            page: ss.page,
+        };
+        if (ss.parameters) {
+            jsonObj.parameters = ss.parameters;
+        }
+        if (ss.outcome) {
+            jsonObj.outcome = ss.outcome;
+        }
+        jsonBlock = `<pre class="step-json">${esc(JSON.stringify(jsonObj, null, 2))}</pre>`;
+    }
+    const hasExpandable = !!(imgSrc || hasDetail);
+    const expandId = `step-expand-${uid()}`;
+    let html = `<div class="filmstrip-step${hasExpandable ? ' expandable' : ''}">`;
+    html += `<div class="filmstrip-header">`;
+    html += statusIcon;
+    html += `<span class="filmstrip-tool">${esc(ss.toolName)}</span>`;
+    html += `<span class="filmstrip-duration">${durationStr}</span>`;
+    if (hasExpandable) {
+        html += `<span class="filmstrip-chevron">&#9656;</span>`;
+    }
+    html += `</div>`;
+    if (ss.summary) {
+        html += `<div class="filmstrip-summary">${esc(ss.summary)}</div>`;
+    }
+    if (hasExpandable) {
+        html += `<div class="filmstrip-detail" id="${expandId}">`;
+        if (imgSrc) {
+            html += `<a href="${esc(imgSrc)}" target="_blank"><img src="${esc(imgSrc)}" alt="Step ${ss.index}: ${esc(ss.toolName)}" loading="lazy" class="step-screenshot" /></a>`;
+        }
+        if (jsonBlock) {
+            html += jsonBlock;
+        }
+        html += `</div>`;
+    }
+    html += `</div>`;
+    return html;
+}
+function renderSteps(steps, stepScreenshots, nativeSteps, outputDir) {
     const meaningful = steps.filter((s) => s.type === 'action' || s.type === 'result');
     const hasScreenshots = stepScreenshots.length > 0;
-    if (!meaningful.length && !hasScreenshots) {
+    const hasNative = nativeSteps.length > 0;
+    if (!meaningful.length && !hasScreenshots && !hasNative) {
         return '';
     }
-    // When we have filmstrip data (tool calls from persistence with screenshots),
-    // it supersedes the log-based steps which are the same events parsed from
-    // stderr. Use filmstrip as the single timeline and skip duplicates.
-    const stepCount = hasScreenshots ? stepScreenshots.length : meaningful.length;
-    let html = '<details class="steps-section"><summary>Steps (' +
-        stepCount +
-        ')</summary>';
-    if (hasScreenshots) {
+    if (hasScreenshots || hasNative) {
+        const timeline = [
+            ...stepScreenshots.map((ss) => ({
+                t: ss.completedAt,
+                kind: 'donobu',
+                ss,
+            })),
+            ...nativeSteps.map((ns) => ({
+                t: ns.endWallTime,
+                kind: 'native',
+                ns,
+            })),
+        ];
+        timeline.sort((a, b) => a.t - b.t);
+        const stepCount = timeline.length;
+        let html = '<details class="steps-section"><summary>Steps (' +
+            stepCount +
+            ')</summary>';
         html += '<div class="step-filmstrip">';
-        for (const ss of stepScreenshots) {
-            const duration = ss.completedAt - ss.startedAt;
-            const durationStr = duration >= 1000 ? `${(duration / 1000).toFixed(1)}s` : `${duration}ms`;
-            const statusIcon = ss.success
-                ? '<span class="step-status-ok">&#10003;</span>'
-                : '<span class="step-status-fail">&#10007;</span>';
-            // Resolve screenshot src
-            let imgSrc = null;
-            if (ss.imagePath && (0, fs_1.existsSync)(ss.imagePath)) {
-                imgSrc = outputDir ? (0, path_1.relative)(outputDir, ss.imagePath) : ss.imagePath;
-            }
-            else if (ss.imageBody && ss.imageContentType) {
-                imgSrc = `data:${ss.imageContentType};base64,${ss.imageBody}`;
-            }
-            // Build JSON object if available
-            const hasDetail = !!(ss.parameters || ss.outcome);
-            let jsonBlock = '';
-            if (hasDetail) {
-                const jsonObj = {
-                    toolName: ss.toolName,
-                    page: ss.page,
-                };
-                if (ss.parameters) {
-                    jsonObj.parameters = ss.parameters;
-                }
-                if (ss.outcome) {
-                    jsonObj.outcome = ss.outcome;
-                }
-                jsonBlock = `<pre class="step-json">${esc(JSON.stringify(jsonObj, null, 2))}</pre>`;
+        for (const entry of timeline) {
+            if (entry.kind === 'donobu') {
+                html += renderFilmstripStep(entry.ss, outputDir);
             }
-            const hasExpandable = !!(imgSrc || hasDetail);
-            const expandId = `step-expand-${uid()}`;
-            html += `<div class="filmstrip-step${hasExpandable ? ' expandable' : ''}"${hasExpandable ? ` onclick="this.classList.toggle('open')"` : ''}>`;
-            html += `<div class="filmstrip-header">`;
-            html += `${statusIcon}`;
-            html += `<span class="filmstrip-tool">${esc(ss.toolName)}</span>`;
-            html += `<span class="filmstrip-duration">${durationStr}</span>`;
-            if (hasExpandable) {
-                html += `<span class="filmstrip-chevron">&#9656;</span>`;
-            }
-            html += `</div>`;
-            // Summary line
-            if (ss.summary) {
-                html += `<div class="filmstrip-summary">${esc(ss.summary)}</div>`;
-            }
-            // Expandable detail area (screenshot + JSON together)
-            if (hasExpandable) {
-                html += `<div class="filmstrip-detail" id="${expandId}">`;
-                if (imgSrc) {
-                    html += `<a href="${esc(imgSrc)}" target="_blank" onclick="event.stopPropagation()"><img src="${esc(imgSrc)}" alt="Step ${ss.index}: ${esc(ss.toolName)}" loading="lazy" class="step-screenshot" /></a>`;
-                }
-                if (jsonBlock) {
-                    html += jsonBlock;
-                }
-                html += `</div>`;
+            else {
+                html += renderNativeStep(entry.ns);
             }
-            html += `</div>`;
         }
         html += '</div>';
+        html += '</details>';
+        return html;
     }
-    else {
-        // Fallback: no filmstrip data, render log-based steps
-        html += '<div class="steps-list">';
-        for (const step of meaningful) {
-            const typeClass = step.type === 'action' ? 'step-action' : 'step-result';
-            html += `<div class="step-entry ${typeClass}">`;
-            html += `<span class="step-time">${esc(step.time)}</span>`;
-            html += `<span class="step-text">${step.text}</span>`;
-            html += '</div>';
-        }
+    // Fallback: no filmstrip or native step data — render log-based steps
+    const stepCount = meaningful.length;
+    let html = '<details class="steps-section"><summary>Steps (' +
+        stepCount +
+        ')</summary>';
+    html += '<div class="steps-list">';
+    for (const step of meaningful) {
+        const typeClass = step.type === 'action' ? 'step-action' : 'step-result';
+        html += `<div class="step-entry ${typeClass}">`;
+        html += `<span class="step-time">${esc(step.time)}</span>`;
+        html += `<span class="step-text">${step.text}</span>`;
         html += '</div>';
     }
+    html += '</div>';
     html += '</details>';
     return html;
 }
@@ -703,7 +842,7 @@ function renderQuickActions(test) {
         html += `<span class="qa-label">${esc(label)}</span>`;
         html += `<div class="qa-cmd-wrapper">`;
         html += `<code class="qa-cmd" id="${cmdId}">${esc(cmd)}</code>`;
-        html += `<button class="qa-copy" onclick="navigator.clipboard.writeText(document.getElementById('${cmdId}').textContent);this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',1500)" title="Copy to clipboard">Copy</button>`;
+        html += `<button class="qa-copy" data-copy="${cmdId}" title="Copy to clipboard">Copy</button>`;
         html += `</div></div>`;
     }
     html += sourceHtml;
@@ -813,7 +952,7 @@ function renderEvidenceDeepDive(evidence, outputDir) {
             const baseSrc = outputDir
                 ? (0, path_1.relative)(outputDir, (0, path_1.resolve)(baseScreenshot))
                 : baseScreenshot;
-            content += `<a href="${esc(baseSrc)}" target="_blank" onclick="event.stopPropagation()"><img src="${esc(baseSrc)}" alt="Baseline screenshot" loading="lazy" class="screenshot triage-screenshot" /></a>`;
+            content += `<a href="${esc(baseSrc)}" target="_blank"><img src="${esc(baseSrc)}" alt="Baseline screenshot" loading="lazy" class="screenshot triage-screenshot" /></a>`;
         }
         else {
             content +=
@@ -828,7 +967,7 @@ function renderEvidenceDeepDive(evidence, outputDir) {
             const failSrc = outputDir
                 ? (0, path_1.relative)(outputDir, (0, path_1.resolve)(failScreenshot))
                 : failScreenshot;
-            content += `<a href="${esc(failSrc)}" target="_blank" onclick="event.stopPropagation()"><img src="${esc(failSrc)}" alt="Failure screenshot" loading="lazy" class="screenshot triage-screenshot" /></a>`;
+            content += `<a href="${esc(failSrc)}" target="_blank"><img src="${esc(failSrc)}" alt="Failure screenshot" loading="lazy" class="screenshot triage-screenshot" /></a>`;
         }
         else {
             content +=
@@ -878,7 +1017,7 @@ function renderResultTimeline(results, outputDir) {
             html += `<div class="timeline-errors">${renderErrors(r.errors)}</div>`;
         }
         html += renderAttachments(r.attachments, outputDir, r.stepScreenshots);
-        html += renderSteps(r.steps, r.stepScreenshots, outputDir);
+        html += renderSteps(r.steps, r.stepScreenshots, r.nativeSteps, outputDir);
         html += '</div></div>';
     }
     html += '</div>';
@@ -954,7 +1093,7 @@ function generateHtml(jsonData, triage, outputDir) {
             continue;
         }
         const sc = cfg(card.key);
-        statCardsHtml += `<button class="stat-card" data-filter="${card.key}" onclick="filterByStatus('${card.key}')" title="Click to filter"><div class="stat-count" style="color:${sc.color}">${count}</div><div class="stat-label">${card.label}</div></button>`;
+        statCardsHtml += `<button class="stat-card" data-filter="${card.key}" title="Click to filter"><div class="stat-count" style="color:${sc.color}">${count}</div><div class="stat-label">${card.label}</div></button>`;
     }
     // File groups + test cards
     let testSectionsHtml = '';
@@ -1009,7 +1148,7 @@ function generateHtml(jsonData, triage, outputDir) {
             }
             // 6. Steps — detailed forensics
             if (!hasMultipleResults && lastResult) {
-                detailsHtml += renderSteps(lastResult.steps, lastResult.stepScreenshots, outputDir);
+                detailsHtml += renderSteps(lastResult.steps, lastResult.stepScreenshots, lastResult.nativeSteps, outputDir);
             }
             // 7. Triage details — remediation steps (expandable)
             if (test.plan) {
@@ -1026,7 +1165,7 @@ function generateHtml(jsonData, triage, outputDir) {
                 : '<span class="chevron-spacer"></span>';
             const totalTestDuration = test.results.reduce((s, r) => s + r.duration, 0);
             testsHtml += `
-        <div class="test-row ${sc.label.toLowerCase().replace(/ /g, '')} ${expandableClass}" data-status="${test.status}" ${hasDetails ? `onclick="toggleDetail('${testId}',event)"` : ''}>
+        <div class="test-row ${sc.label.toLowerCase().replace(/ /g, '')} ${expandableClass}" data-status="${test.status}" ${hasDetails ? `data-detail="${testId}"` : ''}>
           <div class="test-summary">
             ${chevron}
             <span class="status-dot" style="background:${sc.color}" title="${sc.label}"></span>
@@ -1039,7 +1178,7 @@ function generateHtml(jsonData, triage, outputDir) {
         }
         testSectionsHtml += `
       <div class="file-group ${fileHasFailure ? 'has-failure' : ''}" data-file="${esc(file)}">
-        <div class="file-header" onclick="toggleFileGroup(this)">
+        <div class="file-header" data-toggle-file-group>
           <span class="file-chevron">&#9662;</span>
           <span class="file-name">${esc(file)}</span>
           <div class="file-badges">${fileBadgesHtml}</div>
@@ -1162,8 +1301,9 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
 .healed-icon{font-size:16px}
 
 /* Error / snippet blocks */
-.error-block,.snippet-block,.stack-block,.snapshot-block{font-size:12px;font-family:var(--mono);padding:12px 14px;border-radius:var(--radius);overflow-x:auto;white-space:pre-wrap;word-break:break-word;line-height:1.6;max-height:400px;overflow-y:auto}
+.error-block,.error-block-ansi,.snippet-block,.stack-block,.snapshot-block{font-size:12px;font-family:var(--mono);padding:12px 14px;border-radius:var(--radius);overflow-x:auto;white-space:pre-wrap;word-break:break-word;line-height:1.6;max-height:400px;overflow-y:auto}
 .error-block{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);color:#fca5a5}
+.error-block-ansi{background:var(--bg);border:1px solid var(--border-subtle);color:var(--text-muted)}
 .snippet-block{background:var(--bg);border:1px solid var(--border-subtle);color:var(--text)}
 .stack-block{background:var(--bg);border:1px solid var(--border-subtle);color:var(--text-muted);font-size:11px}
 .snapshot-block{background:var(--bg);border:1px solid var(--border-subtle);color:var(--text-muted);font-size:11px;max-height:300px}
@@ -1205,6 +1345,21 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
 .step-json{font-size:11px;font-family:var(--mono);background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:8px 12px;margin:0;color:var(--text-muted);overflow-x:auto;max-height:300px;overflow-y:auto}
 .step-screenshot{max-width:100%;max-height:250px;width:auto;height:auto;object-fit:contain;border-radius:var(--radius);border:1px solid var(--border);cursor:pointer}
 
+/* Native Playwright steps (expect / test.step) inside the filmstrip */
+.native-step{background:var(--bg)}
+.native-step-title{font-size:12px;font-weight:500;color:var(--text);font-family:var(--mono);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.native-step-badge{font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;white-space:nowrap;flex-shrink:0}
+.native-step-badge--expect{background:rgba(99,102,241,.12);color:#818cf8}
+.native-step-badge--test\.step{background:rgba(16,185,129,.10);color:#34d399}
+.native-step-location{font-size:10px;color:var(--text-dim);font-family:var(--mono);margin-left:auto;flex-shrink:0;white-space:nowrap}
+.native-step-error{font-size:11px;font-family:var(--mono);padding:4px 0 2px 22px;margin:0;white-space:pre-wrap;word-break:break-word;color:var(--text-muted)}
+.native-step-snippet{font-size:11px;font-family:var(--mono);margin:4px 0 2px 22px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-subtle)}
+.snippet-line{display:flex;padding:1px 8px;white-space:pre}
+.snippet-line--target{background:rgba(239,68,68,.10)}
+.snippet-linenum{color:var(--text-dim);min-width:40px;user-select:none}
+.snippet-line--target .snippet-linenum{color:var(--red)}
+.snippet-code{color:var(--text)}
+
 /* Result timeline */
 .result-timeline{position:relative;padding-left:20px}
 .timeline-entry{position:relative;padding-bottom:16px;padding-left:16px;border-left:2px solid var(--border)}
@@ -1349,7 +1504,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
 
   <div class="filter-bar" id="filterBar">
     <span>Showing: <strong id="filterLabel"></strong></span>
-    <button class="clear-filter" onclick="clearFilter()">Clear filter</button>
+    <button class="clear-filter" data-clear-filter>Clear filter</button>
   </div>
 
   ${testSectionsHtml}
@@ -1358,51 +1513,75 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica N
   <div class="report-footer">Report generated by Donobu</div>
 </div>
 
-<div class="lightbox" id="lightbox" onclick="closeLightbox()">
+<div class="lightbox" id="lightbox" data-lightbox>
   <img id="lightboxImg" src="" alt="Screenshot" />
 </div>
 
 <script>
-function toggleDetail(id,e){if(e&&e.target.closest('.test-detail'))return;var el=document.getElementById(id);if(el){var row=el.closest('.test-row');if(row)row.classList.toggle('expanded')}}
-function toggleFileGroup(h){h.closest('.file-group').classList.toggle('collapsed')}
+(function(){
+  var activeFilter=null;
+  function filterByStatus(s){
+    if(activeFilter===s){clearFilter();return}
+    activeFilter=s;
+    document.querySelectorAll('.stat-card').forEach(function(c){c.classList.toggle('active-filter',c.getAttribute('data-filter')===s)});
+    document.getElementById('filterBar').classList.add('visible');
+    document.getElementById('filterLabel').textContent=s.charAt(0).toUpperCase()+s.slice(1);
+    document.querySelectorAll('.test-row').forEach(function(r){r.classList.toggle('hidden-by-filter',r.getAttribute('data-status')!==s)});
+    document.querySelectorAll('.file-group').forEach(function(g){
+      var vis=g.querySelectorAll('.test-row:not(.hidden-by-filter)');
+      g.classList.toggle('hidden',vis.length===0);
+      g.classList.remove('collapsed');
+    });
+  }
+  function clearFilter(){
+    activeFilter=null;
+    document.querySelectorAll('.stat-card').forEach(function(c){c.classList.remove('active-filter')});
+    document.getElementById('filterBar').classList.remove('visible');
+    document.querySelectorAll('.test-row').forEach(function(r){r.classList.remove('hidden-by-filter')});
+    document.querySelectorAll('.file-group').forEach(function(g){g.classList.remove('hidden')});
+  }
+  function closeLightbox(){document.getElementById('lightbox').classList.remove('open')}
 
-var activeFilter=null;
-function filterByStatus(s){
-  if(activeFilter===s){clearFilter();return}
-  activeFilter=s;
-  document.querySelectorAll('.stat-card').forEach(function(c){c.classList.toggle('active-filter',c.getAttribute('data-filter')===s)});
-  document.getElementById('filterBar').classList.add('visible');
-  document.getElementById('filterLabel').textContent=s.charAt(0).toUpperCase()+s.slice(1);
-  document.querySelectorAll('.test-row').forEach(function(r){r.classList.toggle('hidden-by-filter',r.getAttribute('data-status')!==s)});
-  document.querySelectorAll('.file-group').forEach(function(g){
-    var vis=g.querySelectorAll('.test-row:not(.hidden-by-filter)');
-    g.classList.toggle('hidden',vis.length===0);
-    g.classList.remove('collapsed');
+  document.addEventListener('click',function(e){
+    // Close lightbox when clicking its backdrop
+    if(e.target.closest('[data-lightbox]')&&!e.target.closest('#lightboxImg')){closeLightbox();return}
+    // Open lightbox for screenshot images
+    var img=e.target.closest('.screenshot');
+    if(img){
+      e.preventDefault();e.stopPropagation();
+      var src=img.closest('a')?img.closest('a').href:img.src;
+      document.getElementById('lightboxImg').src=src;
+      document.getElementById('lightbox').classList.add('open');
+      return;
+    }
+    // Copy button
+    var copyBtn=e.target.closest('[data-copy]');
+    if(copyBtn){
+      var el=document.getElementById(copyBtn.getAttribute('data-copy'));
+      if(el){navigator.clipboard.writeText(el.textContent);copyBtn.textContent='Copied!';setTimeout(function(){copyBtn.textContent='Copy'},1500)}
+      return;
+    }
+    // Stat card filter
+    var card=e.target.closest('.stat-card[data-filter]');
+    if(card){filterByStatus(card.getAttribute('data-filter'));return}
+    // Clear filter
+    if(e.target.closest('[data-clear-filter]')){clearFilter();return}
+    // Filmstrip step expand (skip if clicking a link inside)
+    var step=e.target.closest('.filmstrip-step.expandable');
+    if(step&&!e.target.closest('a')){step.classList.toggle('open');return}
+    // File group collapse/expand
+    var fileHeader=e.target.closest('[data-toggle-file-group]');
+    if(fileHeader){fileHeader.closest('.file-group').classList.toggle('collapsed');return}
+    // Test row expand
+    var row=e.target.closest('.test-row[data-detail]');
+    if(row&&!e.target.closest('.test-detail')){row.classList.toggle('expanded');return}
   });
-}
-function clearFilter(){
-  activeFilter=null;
-  document.querySelectorAll('.stat-card').forEach(function(c){c.classList.remove('active-filter')});
-  document.getElementById('filterBar').classList.remove('visible');
-  document.querySelectorAll('.test-row').forEach(function(r){r.classList.remove('hidden-by-filter')});
-  document.querySelectorAll('.file-group').forEach(function(g){g.classList.remove('hidden')});
-}
 
-// Screenshot lightbox
-document.addEventListener('click',function(e){
-  var img=e.target.closest('.screenshot');
-  if(img){
-    e.preventDefault();e.stopPropagation();
-    var src=img.closest('a')?img.closest('a').href:img.src;
-    document.getElementById('lightboxImg').src=src;
-    document.getElementById('lightbox').classList.add('open');
-  }
-});
-function closeLightbox(){document.getElementById('lightbox').classList.remove('open')}
-document.addEventListener('keydown',function(e){if(e.key==='Escape'){closeLightbox();clearFilter()}});
+  document.addEventListener('keydown',function(e){if(e.key==='Escape'){closeLightbox();clearFilter()}});
 
-// Auto-expand failed/timedout/interrupted/healed tests
-document.querySelectorAll('.test-row.failed,.test-row.timedout,.test-row.interrupted,.test-row.healed').forEach(function(r){r.classList.add('expanded')});
+  // Auto-expand failed/timedout/interrupted/healed tests
+  document.querySelectorAll('.test-row.failed,.test-row.timedout,.test-row.interrupted,.test-row.healed').forEach(function(r){r.classList.add('expanded')});
+})();
 </script>
 </body>
 </html>`;
@@ -1410,69 +1589,73 @@ document.querySelectorAll('.test-row.failed,.test-row.timedout,.test-row.interru
 // ---------------------------------------------------------------------------
 // Main
 // ---------------------------------------------------------------------------
-try {
-    const { jsonData, outputFile, triageDir, inputFile } = parseArgs();
-    // Auto-discover triage dir from merged report metadata if not explicitly given
-    let resolvedTriageDir = triageDir;
-    // Prefer the explicit triageRunDir recorded during the merge.
-    if (!resolvedTriageDir && jsonData.metadata?.triageRunDir) {
-        const candidate = jsonData.metadata.triageRunDir;
-        if ((0, fs_1.existsSync)(candidate)) {
-            resolvedTriageDir = candidate;
-        }
-    }
-    // Legacy fallback: derive triage dir from the initial report path (older
-    // merged reports stored the initial-playwright-report.json copy inside the
-    // triage run directory).
-    if (!resolvedTriageDir && jsonData.metadata?.sources?.initial) {
-        const initialPath = jsonData.metadata.sources.initial;
-        // Try the absolute path first (works when running in the same env as CI)
-        const candidate = (0, path_1.dirname)(initialPath);
-        if ((0, fs_1.existsSync)(candidate) && (0, path_1.basename)(candidate) !== '.') {
-            resolvedTriageDir = candidate;
+// Only run CLI logic when this file is executed directly (not imported as a module).
+if (require.main === module) {
+    try {
+        const { jsonData, outputFile, triageDir, inputFile } = parseArgs();
+        // Auto-discover triage dir from merged report metadata if not explicitly given
+        let resolvedTriageDir = triageDir;
+        // Prefer the explicit triageRunDir recorded during the merge.
+        if (!resolvedTriageDir && jsonData.metadata?.triageRunDir) {
+            const candidate = jsonData.metadata.triageRunDir;
+            if ((0, fs_1.existsSync)(candidate)) {
+                resolvedTriageDir = candidate;
+            }
         }
-        else {
-            // Fallback: extract the donobu-triage/... suffix and resolve relative
-            // to the input file. This handles downloaded CI artifacts where the
-            // absolute CI path no longer exists.
-            const triageMatch = initialPath.match(/donobu-triage[/\\][^/\\]+[/\\]?.*$/);
-            if (triageMatch && inputFile) {
-                const localCandidate = (0, path_1.resolve)((0, path_1.dirname)((0, path_1.resolve)(inputFile)), (0, path_1.dirname)(triageMatch[0]));
-                if ((0, fs_1.existsSync)(localCandidate)) {
-                    resolvedTriageDir = localCandidate;
+        // Legacy fallback: derive triage dir from the initial report path (older
+        // merged reports stored the initial-playwright-report.json copy inside the
+        // triage run directory).
+        if (!resolvedTriageDir && jsonData.metadata?.sources?.initial) {
+            const initialPath = jsonData.metadata.sources.initial;
+            // Try the absolute path first (works when running in the same env as CI)
+            const candidate = (0, path_1.dirname)(initialPath);
+            if ((0, fs_1.existsSync)(candidate) && (0, path_1.basename)(candidate) !== '.') {
+                resolvedTriageDir = candidate;
+            }
+            else {
+                // Fallback: extract the donobu-triage/... suffix and resolve relative
+                // to the input file. This handles downloaded CI artifacts where the
+                // absolute CI path no longer exists.
+                const triageMatch = initialPath.match(/donobu-triage[/\\][^/\\]+[/\\]?.*$/);
+                if (triageMatch && inputFile) {
+                    const localCandidate = (0, path_1.resolve)((0, path_1.dirname)((0, path_1.resolve)(inputFile)), (0, path_1.dirname)(triageMatch[0]));
+                    if ((0, fs_1.existsSync)(localCandidate)) {
+                        resolvedTriageDir = localCandidate;
+                    }
                 }
             }
         }
-    }
-    // Last resort: scan for donobu-triage dirs next to the input file
-    if (!resolvedTriageDir && inputFile) {
-        const triageRoot = (0, path_1.resolve)((0, path_1.dirname)((0, path_1.resolve)(inputFile)), 'donobu-triage');
-        if ((0, fs_1.existsSync)(triageRoot)) {
-            // Use the most recent triage run directory
-            const subdirs = (0, fs_1.readdirSync)(triageRoot)
-                .filter((d) => (0, fs_1.existsSync)((0, path_1.resolve)(triageRoot, d, '.')))
-                .sort()
-                .reverse();
-            if (subdirs.length > 0) {
-                resolvedTriageDir = (0, path_1.resolve)(triageRoot, subdirs[0]);
+        // Last resort: scan for donobu-triage dirs next to the input file
+        if (!resolvedTriageDir && inputFile) {
+            const triageRoot = (0, path_1.resolve)((0, path_1.dirname)((0, path_1.resolve)(inputFile)), 'donobu-triage');
+            if ((0, fs_1.existsSync)(triageRoot)) {
+                // Use the most recent triage run directory
+                const subdirs = (0, fs_1.readdirSync)(triageRoot)
+                    .filter((d) => (0, fs_1.existsSync)((0, path_1.resolve)(triageRoot, d, '.')))
+                    .sort()
+                    .reverse();
+                if (subdirs.length > 0) {
+                    resolvedTriageDir = (0, path_1.resolve)(triageRoot, subdirs[0]);
+                }
             }
         }
+        const triage = resolvedTriageDir
+            ? loadTriageData(resolvedTriageDir)
+            : { plans: [], evidence: [] };
+        const outputDir = outputFile ? (0, path_1.dirname)((0, path_1.resolve)(outputFile)) : null;
+        const html = generateHtml(jsonData, triage, outputDir);
+        if (outputFile) {
+            (0, fs_1.writeFileSync)(outputFile, html, 'utf8');
+            console.error(`Report written to ${outputFile}`);
+        }
+        else {
+            console.log(html);
+        }
     }
-    const triage = resolvedTriageDir
-        ? loadTriageData(resolvedTriageDir)
-        : { plans: [], evidence: [] };
-    const outputDir = outputFile ? (0, path_1.dirname)((0, path_1.resolve)(outputFile)) : null;
-    const html = generateHtml(jsonData, triage, outputDir);
-    if (outputFile) {
-        (0, fs_1.writeFileSync)(outputFile, html, 'utf8');
-        console.error(`Report written to ${outputFile}`);
-    }
-    else {
-        console.log(html);
+    catch (error) {
+        console.error('Error processing JSON:', error.message);
+        process.exit(1);
     }
 }
-catch (error) {
-    console.error('Error processing JSON:', error.message);
-    process.exit(1);
-}
+// end of CLI guard
 //# sourceMappingURL=playwright-json-to-html.js.map