donobu 5.1.0 → 5.2.0

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

@@ -0,0 +1,1278 @@
+#!/usr/bin/env node
+"use strict";
+/**
+ * @fileoverview Playwright JSON Report to HTML Report Converter
+ *
+ * Converts Playwright JSON test reports (optionally enriched with Donobu triage
+ * data) into a polished, self-contained HTML report for test writers, maintainers,
+ * and debuggers.
+ *
+ * @usage
+ * ```bash
+ * npm exec playwright-json-to-html report.json -o report.html
+ * npm exec playwright-json-to-html report.json --triage-dir ./donobu-triage/run-id/ -o report.html
+ * cat merged-report.json | npx playwright-json-to-html --triage-dir ./triage/ -o report.html
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = require("fs");
+const path_1 = require("path");
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function stripAnsi(str) {
+    return str.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
+}
+function esc(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+function fmtDuration(ms) {
+    if (ms < 1000) {
+        return `${ms}ms`;
+    }
+    const s = Math.floor(ms / 1000);
+    if (s < 60) {
+        return `${s}s`;
+    }
+    return `${Math.floor(s / 60)}m ${s % 60}s`;
+}
+function fmtPercent(n) {
+    return `${Math.round(n * 100)}%`;
+}
+function uid() {
+    return Math.random().toString(36).slice(2, 10);
+}
+/** Normalize a file path to just the basename for matching purposes. */
+function normalizeTestFile(filePath) {
+    if (!filePath) {
+        return '';
+    }
+    // Strip to just the relative-style path: "tests/foo.test.ts"
+    // Handle both absolute and relative paths
+    const match = filePath.match(/(?:^|[/\\])(tests[/\\].+)$/);
+    return match ? match[1].replace(/\\/g, '/') : (0, path_1.basename)(filePath);
+}
+// ---------------------------------------------------------------------------
+// CLI argument parsing
+// ---------------------------------------------------------------------------
+function parseArgs() {
+    const args = process.argv.slice(2);
+    let outputFile = null;
+    let triageDir = null;
+    let inputFile = null;
+    for (let i = 0; i < args.length; i++) {
+        if ((args[i] === '-o' || args[i] === '--output') && i + 1 < args.length) {
+            outputFile = args[i + 1];
+            i++;
+        }
+        else if (args[i] === '--triage-dir' && i + 1 < args.length) {
+            triageDir = args[i + 1];
+            i++;
+        }
+        else if (!args[i].startsWith('-')) {
+            inputFile = args[i];
+        }
+    }
+    const jsonData = inputFile
+        ? JSON.parse((0, fs_1.readFileSync)(inputFile, 'utf8'))
+        : JSON.parse((0, fs_1.readFileSync)(0, 'utf8'));
+    // Default output to a sibling of the input JSON so asset relative paths work
+    if (!outputFile && inputFile) {
+        outputFile = (0, path_1.join)((0, path_1.dirname)((0, path_1.resolve)(inputFile)), 'donobu-report.html');
+    }
+    return {
+        jsonData,
+        outputFile,
+        triageDir: triageDir ? (0, path_1.resolve)(triageDir) : null,
+    };
+}
+function loadTriageData(triageDir) {
+    const plans = [];
+    const evidence = [];
+    if (!(0, fs_1.existsSync)(triageDir)) {
+        return { plans, evidence };
+    }
+    try {
+        const files = (0, fs_1.readdirSync)(triageDir);
+        for (const f of files) {
+            const full = (0, path_1.resolve)(triageDir, f);
+            try {
+                const raw = JSON.parse((0, fs_1.readFileSync)(full, 'utf8'));
+                if (f.startsWith('treatment-plan-') && f.endsWith('.json')) {
+                    plans.push(raw);
+                }
+                else if (f.startsWith('failure-evidence-') && f.endsWith('.json')) {
+                    evidence.push(raw);
+                }
+            }
+            catch {
+                // Skip unparseable files
+            }
+        }
+    }
+    catch {
+        // Directory unreadable
+    }
+    return { plans, evidence };
+}
+/**
+ * Build a lookup key from test metadata for matching triage files to tests.
+ * Normalizes file paths to handle absolute vs relative mismatches.
+ */
+function triageKey(file, projectName, title) {
+    return [normalizeTestFile(file), projectName ?? '', title]
+        .join('::')
+        .toLowerCase();
+}
+function buildTriageLookups(triage) {
+    const plansByKey = new Map();
+    const evidenceByKey = new Map();
+    for (const plan of triage.plans) {
+        const tc = plan.failure?.testCase;
+        if (tc) {
+            plansByKey.set(triageKey(tc.file, tc.projectName, tc.title), plan);
+        }
+    }
+    for (const ev of triage.evidence) {
+        const tc = ev.failureContext?.testCase;
+        if (tc) {
+            evidenceByKey.set(triageKey(tc.file, tc.projectName, tc.title), ev);
+        }
+    }
+    return { plansByKey, evidenceByKey };
+}
+function parseStderrSteps(stderrEntries) {
+    const steps = [];
+    for (const entry of stderrEntries) {
+        const raw = entry.text?.trim();
+        if (!raw) {
+            continue;
+        }
+        // Parse timestamp: "HH:MM:SS.mmm [uuid] LEVEL  message"
+        const m = raw.match(/^(\d{2}:\d{2}:\d{2}\.\d{3})\s+\[[^\]]+\]\s+\w+\s+(.+)$/);
+        if (!m) {
+            continue;
+        }
+        const time = m[1];
+        const msg = m[2];
+        // Categorize the log line
+        if (msg.startsWith('Taking action:')) {
+            steps.push({
+                time,
+                text: msg.replace('Taking action: ', ''),
+                type: 'action',
+            });
+        }
+        else if (msg.startsWith('The ') && msg.includes(' tool completed in ')) {
+            // "The assertPage tool completed in 5054ms with outcome {...}"
+            const toolMatch = msg.match(/^The (\S+) tool completed in (\d+)ms with outcome (.+)$/);
+            if (toolMatch) {
+                const outcome = toolMatch[3];
+                let success = false;
+                let summary = '';
+                try {
+                    const parsed = JSON.parse(outcome);
+                    success = parsed.isSuccessful === true;
+                    summary = parsed.forLlm ?? '';
+                }
+                catch {
+                    summary = outcome;
+                }
+                steps.push({
+                    time,
+                    text: `${toolMatch[1]} (${toolMatch[2]}ms) ${success ? '&#10003;' : '&#10007;'} ${esc(summary)}`,
+                    type: 'result',
+                });
+            }
+        }
+        else if (msg.startsWith('Transitioned flow state from ')) {
+            const stateMatch = msg.match(/Transitioned flow state from (\S+) to (\S+)/);
+            if (stateMatch) {
+                steps.push({
+                    time,
+                    text: `${stateMatch[1]} &rarr; ${stateMatch[2]}`,
+                    type: 'state',
+                });
+            }
+        }
+        else if (msg.startsWith('Completed flow with state:')) {
+            steps.push({ time, text: msg, type: 'state' });
+        }
+        else if (msg.includes('Persisted Donobu triage') ||
+            msg.includes('Set up DONOBU client')) {
+            steps.push({ time, text: msg, type: 'info' });
+        }
+        // Skip noisy plugin loading lines, etc.
+    }
+    return steps;
+}
+function extractTests(jsonData) {
+    const tests = [];
+    for (const suite of jsonData.suites ?? []) {
+        for (const spec of suite.specs ?? []) {
+            for (const test of spec.tests ?? []) {
+                const annotations = test.annotations ?? [];
+                const hasHealAnnotation = annotations.some((a) => a.type === 'self-healed');
+                const isSelfHealed = hasHealAnnotation || test.donobuStatus === 'healed';
+                let status;
+                const lastResult = test.results?.at(-1);
+                if (test.status === 'skipped' ||
+                    (!lastResult && test.status === undefined)) {
+                    status = 'skipped';
+                }
+                else if (isSelfHealed) {
+                    status = 'healed';
+                }
+                else {
+                    status = lastResult?.status ?? 'unknown';
+                }
+                const objectiveAnnotation = annotations.find((a) => a.type === 'objective');
+                const results = (test.results ?? []).map((r, i) => {
+                    const attachments = r.attachments ?? [];
+                    // Parse step screenshot data from donobu-step-summary attachment
+                    let stepScreenshots = [];
+                    const summaryAtt = attachments.find((a) => a.name === 'donobu-step-summary');
+                    if (summaryAtt?.body) {
+                        try {
+                            const raw = summaryAtt.body;
+                            const decoded = Buffer.from(raw, 'base64').toString('utf8');
+                            const parsed = JSON.parse(decoded);
+                            stepScreenshots = parsed.map((s) => {
+                                // Find the corresponding screenshot attachment
+                                const imgAtt = attachments.find((a) => a.name === `donobu-step-${s.index}-${s.toolName}`);
+                                return {
+                                    index: s.index,
+                                    toolName: s.toolName,
+                                    page: s.page,
+                                    startedAt: s.startedAt,
+                                    completedAt: s.completedAt,
+                                    success: s.success,
+                                    summary: s.summary,
+                                    imagePath: imgAtt?.path ?? null,
+                                    imageBody: imgAtt?.body ?? null,
+                                    imageContentType: imgAtt?.contentType ?? null,
+                                };
+                            });
+                        }
+                        catch {
+                            // Ignore parse failures
+                        }
+                    }
+                    return {
+                        index: i,
+                        status: r.status,
+                        duration: r.duration ?? 0,
+                        retry: r.retry ?? 0,
+                        startTime: r.startTime ?? null,
+                        errors: (r.errors ?? (r.error ? [r.error] : [])).map((e) => ({
+                            message: e.message,
+                            stack: e.stack,
+                            snippet: e.snippet ? stripAnsi(e.snippet) : undefined,
+                            actual: e.actual,
+                            expected: e.expected,
+                        })),
+                        attachments,
+                        steps: parseStderrSteps(r.stderr ?? []),
+                        stepScreenshots,
+                    };
+                });
+                tests.push({
+                    file: suite.file,
+                    specTitle: spec.title,
+                    status,
+                    isSelfHealed,
+                    objective: objectiveAnnotation?.description ?? null,
+                    annotations,
+                    results,
+                    projectName: test.projectName ?? '',
+                    plan: null,
+                    evidence: null,
+                });
+            }
+        }
+    }
+    return tests;
+}
+// ---------------------------------------------------------------------------
+// HTML generation
+// ---------------------------------------------------------------------------
+const STATUS_CFG = {
+    passed: {
+        label: 'Passed',
+        color: '#10b981',
+        bg: 'rgba(16,185,129,0.08)',
+        icon: '&#10003;',
+    },
+    failed: {
+        label: 'Failed',
+        color: '#ef4444',
+        bg: 'rgba(239,68,68,0.08)',
+        icon: '&#10007;',
+    },
+    healed: {
+        label: 'Healed',
+        color: '#8b5cf6',
+        bg: 'rgba(139,92,246,0.08)',
+        icon: '&#9829;',
+    },
+    timedOut: {
+        label: 'Timed Out',
+        color: '#f59e0b',
+        bg: 'rgba(245,158,11,0.08)',
+        icon: '&#9202;',
+    },
+    skipped: {
+        label: 'Skipped',
+        color: '#6b7280',
+        bg: 'rgba(107,114,128,0.08)',
+        icon: '&#9654;',
+    },
+    interrupted: {
+        label: 'Interrupted',
+        color: '#f97316',
+        bg: 'rgba(249,115,22,0.08)',
+        icon: '&#9889;',
+    },
+    unknown: {
+        label: 'Unknown',
+        color: '#6b7280',
+        bg: 'rgba(107,114,128,0.08)',
+        icon: '?',
+    },
+};
+function cfg(status) {
+    return STATUS_CFG[status] ?? STATUS_CFG['unknown'];
+}
+const REASON_LABELS = {
+    SELECTOR_REGRESSION: { label: 'Selector Regression', color: '#f97316' },
+    TIMING_OR_SYNCHRONISATION: { label: 'Timing Issue', color: '#f59e0b' },
+    ASSERTION_DRIFT: { label: 'Assertion Drift', color: '#eab308' },
+    APPLICATION_DEFECT: { label: 'App Defect', color: '#ef4444' },
+    AUTOMATION_SCRIPT_ISSUE: { label: 'Script Issue', color: '#f97316' },
+    AUTHENTICATION_FAILURE: { label: 'Auth Failure', color: '#ec4899' },
+    ENVIRONMENT_CONFIGURATION: { label: 'Env Config', color: '#6366f1' },
+    TEST_DATA_UNAVAILABLE: { label: 'Test Data', color: '#8b5cf6' },
+    NETWORK_OR_DEPENDENCY: { label: 'Network/Deps', color: '#06b6d4' },
+    UNKNOWN: { label: 'Unknown', color: '#6b7280' },
+};
+function reasonCfg(reason) {
+    return REASON_LABELS[reason] ?? REASON_LABELS['UNKNOWN'];
+}
+function renderAttachments(attachments, outputDir) {
+    const rendered = [];
+    for (const att of attachments) {
+        if (!att.path && !att.body) {
+            continue;
+        }
+        if (att.contentType === 'application/json') {
+            continue;
+        }
+        // Step screenshots are rendered in the filmstrip, not here
+        if (att.name.startsWith('donobu-step-')) {
+            continue;
+        }
+        const isImage = att.contentType?.startsWith('image/');
+        const isVideo = att.contentType?.startsWith('video/');
+        if (att.path) {
+            // Check if file actually exists before rendering
+            const absPath = (0, path_1.resolve)(att.path);
+            const fileExists = (0, fs_1.existsSync)(absPath);
+            if (!fileExists) {
+                rendered.push(`<span class="attachment-missing">${esc(att.name)} (file not available)</span>`);
+                continue;
+            }
+            const assetHref = outputDir ? (0, path_1.relative)(outputDir, att.path) : att.path;
+            if (isImage) {
+                const imgLabel = att.name === 'screenshot'
+                    ? 'Screenshot at test completion'
+                    : att.name;
+                rendered.push(`<div class="img-wrapper"><a href="${esc(assetHref)}" target="_blank" class="attachment-link img-link" title="${esc(imgLabel)}"><img src="${esc(assetHref)}" alt="${esc(imgLabel)}" loading="lazy" class="screenshot" /></a><span class="img-label">${esc(imgLabel)}</span></div>`);
+            }
+            else if (isVideo) {
+                rendered.push(`<a href="${esc(assetHref)}" target="_blank" class="attachment-link video-link" title="${esc(att.name)}">&#9654; ${esc(att.name)}</a>`);
+            }
+            else if (att.contentType === 'text/markdown') {
+                // Read and render markdown content inline (e.g., error-context.md page snapshots)
+                try {
+                    const mdContent = (0, fs_1.readFileSync)(absPath, 'utf8');
+                    rendered.push(`<details class="page-snapshot"><summary>${esc(att.name)}</summary><pre class="snapshot-block">${esc(mdContent)}</pre></details>`);
+                }
+                catch {
+                    rendered.push(`<a href="${esc(assetHref)}" target="_blank" class="attachment-link" title="${esc(att.name)}">${esc(att.name)}</a>`);
+                }
+            }
+            else {
+                rendered.push(`<a href="${esc(assetHref)}" target="_blank" class="attachment-link" title="${esc(att.name)}">${esc(att.name)}</a>`);
+            }
+        }
+        else if (att.body && isImage) {
+            rendered.push(`<img src="data:${att.contentType};base64,${att.body}" alt="${esc(att.name)}" loading="lazy" class="screenshot" />`);
+        }
+    }
+    if (!rendered.length) {
+        return '';
+    }
+    // Separate images from other attachments for better layout
+    const images = [];
+    const others = [];
+    for (const r of rendered) {
+        if (r.includes('class="screenshot"')) {
+            images.push(r);
+        }
+        else {
+            others.push(r);
+        }
+    }
+    let html = '<div class="attachments-group">';
+    if (images.length) {
+        html += `<div class="attachments-images">${images.join('')}</div>`;
+    }
+    if (others.length) {
+        html += `<div class="attachments-meta">${others.join('')}</div>`;
+    }
+    html += '</div>';
+    return html;
+}
+function renderErrors(errors) {
+    if (!errors.length) {
+        return '';
+    }
+    let html = '';
+    for (const err of errors) {
+        if (err.message) {
+            html += `<pre class="error-block">${esc(stripAnsi(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>`;
+        }
+        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>`;
+        }
+    }
+    return html;
+}
+function renderSteps(steps, stepScreenshots, outputDir) {
+    const hasSteps = steps.filter((s) => s.type === 'action' || s.type === 'result').length > 0;
+    const hasScreenshots = stepScreenshots.length > 0;
+    if (!hasSteps && !hasScreenshots) {
+        return '';
+    }
+    const meaningful = steps.filter((s) => s.type === 'action' || s.type === 'result');
+    const totalItems = meaningful.length + stepScreenshots.length;
+    let html = '<details class="steps-section"><summary>Steps (' +
+        totalItems +
+        ')</summary>';
+    // Render AI agent tool call steps with optional screenshots
+    if (hasScreenshots) {
+        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>';
+            const stepId = `step-img-${uid()}`;
+            const hasImg = !!(ss.imagePath || ss.imageBody);
+            html += `<div class="filmstrip-step">`;
+            html += `<div class="filmstrip-header">`;
+            html += `${statusIcon}`;
+            html += `<span class="filmstrip-tool">${esc(ss.toolName)}</span>`;
+            html += `<span class="filmstrip-duration">${durationStr}</span>`;
+            if (hasImg) {
+                html += `<button class="filmstrip-toggle" onclick="event.stopPropagation();var el=document.getElementById('${stepId}');el.classList.toggle('open');this.textContent=el.classList.contains('open')?'Hide':'Screenshot'">Screenshot</button>`;
+            }
+            html += `</div>`;
+            // Summary line
+            if (ss.summary) {
+                const shortSummary = ss.summary.length > 120
+                    ? ss.summary.slice(0, 120) + '...'
+                    : ss.summary;
+                html += `<div class="filmstrip-summary">${esc(shortSummary)}</div>`;
+            }
+            // Expandable screenshot (hidden by default)
+            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}`;
+            }
+            if (imgSrc) {
+                html += `<div class="filmstrip-img" id="${stepId}">`;
+                html += `<img src="${esc(imgSrc)}" alt="Step ${ss.index}: ${esc(ss.toolName)}" loading="lazy" class="step-screenshot" />`;
+                html += `</div>`;
+            }
+            html += `</div>`;
+        }
+        html += '</div>';
+    }
+    // Render log-based steps (stderr parsing)
+    if (meaningful.length > 0) {
+        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;
+}
+function renderFailureSummary(plan) {
+    const p = plan.plan;
+    const rc = reasonCfg(p.failureReason);
+    return `
+    <div class="failure-summary-banner">
+      <div class="failure-summary-header">
+        <span class="failure-reason-badge" style="background:${rc.color}">${esc(rc.label)}</span>
+        <span class="failure-confidence">${fmtPercent(p.confidence)} confidence</span>
+        <span class="source-hint">(AI analysis)</span>
+      </div>
+      <div class="failure-summary-text">${esc(p.failureSummary)}</div>
+    </div>`;
+}
+function renderTriageCard(plan) {
+    const p = plan.plan;
+    let flags = '';
+    if (p.shouldRetryAutomation) {
+        flags += '<span class="triage-flag retry">Retryable</span>';
+    }
+    if (p.requiresCodeChange) {
+        flags += '<span class="triage-flag code">Needs Code Change</span>';
+    }
+    if (p.requiresProductFix) {
+        flags += '<span class="triage-flag product">Needs Product Fix</span>';
+    }
+    let indicators = '';
+    if (p.observedIndicators?.length) {
+        indicators =
+            '<div class="triage-indicators">' +
+                p.observedIndicators
+                    .map((i) => `<span class="indicator-tag">${esc(i)}</span>`)
+                    .join('') +
+                '</div>';
+    }
+    let steps = '';
+    if (p.remediationSteps?.length) {
+        steps =
+            '<div class="remediation-steps"><div class="detail-label">Remediation Steps</div><ol>';
+        for (const step of p.remediationSteps) {
+            steps += `<li><span class="step-category">${esc(step.category)}</span> <strong>${esc(step.summary)}</strong><br/><span class="step-details">${esc(step.details)}</span></li>`;
+        }
+        steps += '</ol></div>';
+    }
+    let notes = '';
+    if (p.notes) {
+        notes = `<div class="triage-notes"><div class="detail-label">Notes</div><p>${esc(p.notes)}</p></div>`;
+    }
+    return `
+    <details class="triage-card">
+      <summary>Triage Details ${flags}</summary>
+      <div class="triage-card-body">
+        ${indicators}
+        ${steps}
+        ${notes}
+      </div>
+    </details>`;
+}
+function renderQuickActions(test) {
+    const cmds = [];
+    const title = test.specTitle;
+    const project = test.projectName;
+    const file = test.file;
+    // Re-run this specific test
+    const grepArg = title.includes("'") ? `"${title}"` : `'${title}'`;
+    const projectArg = project ? ` --project=${project}` : '';
+    cmds.push({
+        label: 'Re-run this test',
+        cmd: `npx donobu test -g ${grepArg}${projectArg}`,
+    });
+    // Only show treatment-plan actions for tests that are still failing
+    // (not for healed tests where the plan was already applied successfully)
+    if (test.plan && !test.isSelfHealed) {
+        const plan = test.plan.plan;
+        const directives = plan.automationDirectives;
+        if (directives?.clearPageAiCache) {
+            cmds.push({
+                label: 'Re-run with fresh cache',
+                cmd: `npx donobu test --clear-ai-cache -g ${grepArg}${projectArg}`,
+            });
+        }
+        // Only offer "apply treatment plan" if the plan says retry is viable
+        if (plan.shouldRetryAutomation) {
+            const planPath = test.plan.failure.runDirectory && test.plan.failure.evidencePath
+                ? test.plan.failure.evidencePath.replace(/failure-evidence-/, 'treatment-plan-')
+                : null;
+            if (planPath) {
+                cmds.push({
+                    label: 'Apply treatment plan',
+                    cmd: `npx donobu heal --plan ${planPath}`,
+                });
+            }
+        }
+    }
+    // Source file link
+    const sourceHtml = file
+        ? `<div class="qa-source"><span class="qa-source-label">Source:</span> <code>${esc(file)}</code></div>`
+        : '';
+    let html = '<div class="quick-actions">';
+    html += '<div class="qa-header">Quick Actions</div>';
+    for (const { label, cmd } of cmds) {
+        const cmdId = `cmd-${uid()}`;
+        html += `<div class="qa-row">`;
+        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 += `</div></div>`;
+    }
+    html += sourceHtml;
+    html += '</div>';
+    return html;
+}
+function renderEvidenceDeepDive(evidence) {
+    const ctx = evidence.failureContext;
+    const h = ctx.heuristics;
+    const id = uid();
+    let content = '';
+    if (h) {
+        const staleCacheEntries = Object.entries(h.staleCacheIndicators ?? {});
+        const activeIndicators = staleCacheEntries.filter(([, v]) => v);
+        content += '<div class="evidence-section">';
+        content +=
+            '<div class="detail-label">Heuristic Assessment <span class="source-hint">(fast, rule-based — may differ from AI analysis above)</span></div>';
+        content += '<div class="heuristic-grid">';
+        content += `<div class="h-item"><span class="h-label">Reason</span><span class="h-value">${esc(h.failureReason)}</span></div>`;
+        content += `<div class="h-item"><span class="h-label">Confidence</span><span class="h-value">${fmtPercent(h.confidence)}</span></div>`;
+        content += `<div class="h-item"><span class="h-label">During page.ai</span><span class="h-value">${h.occurredDuringPageAi ? 'Yes' : 'No'}</span></div>`;
+        if (activeIndicators.length > 0) {
+            content += `<div class="h-item full-width"><span class="h-label">Stale Cache Indicators</span><span class="h-value">${activeIndicators.map(([k]) => `<span class="indicator-tag warn">${esc(k)}</span>`).join('')}</span></div>`;
+        }
+        content += '</div>';
+        if (h.evidence?.length) {
+            content += '<div class="h-evidence">';
+            for (const e of h.evidence) {
+                content += `<div class="h-evidence-item">${esc(e)}</div>`;
+            }
+            content += '</div>';
+        }
+        content += '</div>';
+    }
+    const toolCalls = ctx.donobuFlow?.recentToolCalls;
+    if (toolCalls?.length) {
+        content += '<div class="evidence-section">';
+        content += '<div class="detail-label">Recent Donobu Tool Calls</div>';
+        content += '<div class="tool-calls">';
+        for (const tc of toolCalls) {
+            const name = tc.toolName ?? tc.name ?? 'unknown';
+            const dur = tc.durationMs !== null && tc.durationMs !== undefined
+                ? ` (${fmtDuration(tc.durationMs)})`
+                : '';
+            const success = tc.outcome?.isSuccessful;
+            const statusIcon = success === true
+                ? '<span class="tc-ok">&#10003;</span>'
+                : success === false
+                    ? '<span class="tc-fail">&#10007;</span>'
+                    : '';
+            content += `<div class="tool-call">${statusIcon}<span class="tc-name">${esc(name)}</span>${dur}</div>`;
+        }
+        content += '</div></div>';
+    }
+    if (ctx.testSnippet) {
+        content += '<div class="evidence-section">';
+        content += '<div class="detail-label">Test Source</div>';
+        content += `<pre class="snippet-block">${esc(ctx.testSnippet)}</pre>`;
+        content += '</div>';
+    }
+    if (!content) {
+        return '';
+    }
+    return `
+    <details class="evidence-deep-dive" id="ev-${id}">
+      <summary>Evidence Deep-Dive</summary>
+      ${content}
+    </details>`;
+}
+function renderResultTimeline(results, outputDir) {
+    if (results.length === 0) {
+        return '';
+    }
+    let html = '<div class="result-timeline">';
+    for (let i = 0; i < results.length; i++) {
+        const r = results[i];
+        const sc = cfg(r.status);
+        const label = i === 0 && results.length > 1
+            ? 'Initial Run'
+            : i === results.length - 1 && results.length > 1
+                ? 'Heal Run'
+                : `Run ${i + 1}`;
+        const isLast = i === results.length - 1;
+        html += `<div class="timeline-entry ${isLast ? 'last' : ''}">`;
+        html += `<div class="timeline-marker" style="background:${sc.color}"></div>`;
+        html += '<div class="timeline-content">';
+        html += '<div class="timeline-header">';
+        html += `<span class="timeline-label">${label}</span>`;
+        html += `<span class="timeline-status" style="color:${sc.color}">${sc.label}</span>`;
+        html += `<span class="timeline-duration">${fmtDuration(r.duration)}</span>`;
+        html += '</div>';
+        if (r.errors.length) {
+            html += `<div class="timeline-errors">${renderErrors(r.errors)}</div>`;
+        }
+        html += renderAttachments(r.attachments, outputDir);
+        html += renderSteps(r.steps, r.stepScreenshots, outputDir);
+        html += '</div></div>';
+    }
+    html += '</div>';
+    return html;
+}
+function generateHtml(jsonData, triage, outputDir) {
+    const tests = extractTests(jsonData);
+    const isMergedReport = !!jsonData.metadata?.donobuMergedReport;
+    const healedTestNames = jsonData.metadata?.donobuHealedTests ?? [];
+    // Match triage data to tests
+    const { plansByKey, evidenceByKey } = buildTriageLookups(triage);
+    for (const test of tests) {
+        const key = triageKey(test.file, test.projectName, test.specTitle);
+        test.plan = plansByKey.get(key) ?? null;
+        test.evidence = evidenceByKey.get(key) ?? null;
+    }
+    // Counts
+    const counts = {
+        passed: 0,
+        failed: 0,
+        healed: 0,
+        timedOut: 0,
+        skipped: 0,
+        interrupted: 0,
+    };
+    for (const t of tests) {
+        counts[t.status] = (counts[t.status] ?? 0) + 1;
+    }
+    const total = tests.length;
+    const totalDuration = tests.reduce((s, t) => s + t.results.reduce((rs, r) => rs + r.duration, 0), 0);
+    const allPassed = !counts['failed'] && !counts['timedOut'] && !counts['interrupted'];
+    // Group by file
+    const fileGroups = new Map();
+    for (const test of tests) {
+        const group = fileGroups.get(test.file) ?? [];
+        group.push(test);
+        fileGroups.set(test.file, group);
+    }
+    // Aggregate triage root causes
+    const reasonCounts = new Map();
+    for (const t of tests) {
+        if (t.plan) {
+            const r = t.plan.plan.failureReason;
+            reasonCounts.set(r, (reasonCounts.get(r) ?? 0) + 1);
+        }
+    }
+    // --- Build HTML sections ---
+    const statCardEntries = [
+        { key: 'passed', label: 'Passed' },
+        { key: 'healed', label: 'Healed' },
+        { key: 'failed', label: 'Failed' },
+        { key: 'timedOut', label: 'Timed Out' },
+        { key: 'skipped', label: 'Skipped' },
+        { key: 'interrupted', label: 'Interrupted' },
+    ];
+    let statCardsHtml = '';
+    for (const card of statCardEntries) {
+        const count = counts[card.key] ?? 0;
+        if (count === 0 && card.key !== 'passed' && card.key !== 'failed') {
+            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>`;
+    }
+    // Triage summary bar
+    let triageSummaryHtml = '';
+    if (reasonCounts.size > 0) {
+        let badges = '';
+        reasonCounts.forEach((count, reason) => {
+            const rc = reasonCfg(reason);
+            badges += `<span class="reason-summary-badge" style="background:${rc.color}">${count} ${esc(rc.label)}</span>`;
+        });
+        triageSummaryHtml = `<div class="triage-summary-bar"><span class="triage-summary-title">Root Causes</span>${badges}</div>`;
+    }
+    // File groups + test cards
+    let testSectionsHtml = '';
+    fileGroups.forEach((fileTests, file) => {
+        const fileCounts = {};
+        for (const t of fileTests) {
+            fileCounts[t.status] = (fileCounts[t.status] ?? 0) + 1;
+        }
+        const fileDuration = fileTests.reduce((s, t) => s + t.results.reduce((rs, r) => rs + r.duration, 0), 0);
+        const fileHasFailure = (fileCounts['failed'] ?? 0) > 0 ||
+            (fileCounts['timedOut'] ?? 0) > 0 ||
+            (fileCounts['interrupted'] ?? 0) > 0;
+        let fileBadgesHtml = '';
+        for (const key of Object.keys(STATUS_CFG)) {
+            const c = fileCounts[key] ?? 0;
+            if (c > 0) {
+                fileBadgesHtml += `<span class="file-badge" style="background:${cfg(key).color}">${c}</span>`;
+            }
+        }
+        let testsHtml = '';
+        for (const test of fileTests) {
+            const sc = cfg(test.status);
+            const testId = `t-${uid()}`;
+            const hasMultipleResults = test.results.length > 1;
+            const lastResult = test.results.at(-1);
+            let detailsHtml = '';
+            // 1. AI analysis — why it failed (the headline)
+            if (test.plan) {
+                detailsHtml += renderFailureSummary(test.plan);
+            }
+            // 2. Quick actions — what to do about it
+            if (test.status === 'failed' || test.status === 'healed') {
+                detailsHtml += renderQuickActions(test);
+            }
+            // 3. Errors + screenshots — raw evidence
+            if (hasMultipleResults) {
+                detailsHtml += renderResultTimeline(test.results, outputDir);
+            }
+            else if (lastResult) {
+                if (lastResult.errors.length) {
+                    detailsHtml += `<div class="detail-section">${renderErrors(lastResult.errors)}</div>`;
+                }
+                detailsHtml += renderAttachments(lastResult.attachments, outputDir);
+            }
+            // 4. Self-healed banner
+            if (test.isSelfHealed) {
+                detailsHtml += `<div class="healed-banner"><span class="healed-icon">&#9829;</span> This test was automatically healed by re-running with Donobu treatment plan directives.</div>`;
+            }
+            // 5. Objective — what the test was trying to do
+            if (test.objective) {
+                detailsHtml += `<div class="detail-section"><div class="detail-label">Objective</div><div class="detail-objective">${esc(test.objective)}</div></div>`;
+            }
+            // 6. Steps — detailed forensics
+            if (!hasMultipleResults && lastResult) {
+                detailsHtml += renderSteps(lastResult.steps, lastResult.stepScreenshots, outputDir);
+            }
+            // 7. Triage details — remediation steps (expandable)
+            if (test.plan) {
+                detailsHtml += renderTriageCard(test.plan);
+            }
+            // 8. Evidence deep-dive — heuristics, tool calls (expandable)
+            if (test.evidence) {
+                detailsHtml += renderEvidenceDeepDive(test.evidence);
+            }
+            const hasDetails = detailsHtml.length > 0;
+            const expandableClass = hasDetails ? 'expandable' : '';
+            const chevron = hasDetails
+                ? '<span class="chevron">&#9656;</span>'
+                : '<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-summary">
+            ${chevron}
+            <span class="status-dot" style="background:${sc.color}" title="${sc.label}"></span>
+            <span class="test-name">${esc(test.specTitle)}</span>
+            ${test.plan ? `<span class="inline-reason" style="color:${reasonCfg(test.plan.plan.failureReason).color}" title="${esc(test.plan.plan.failureReason)}">${esc(reasonCfg(test.plan.plan.failureReason).label)}</span>` : ''}
+            <span class="test-duration">${fmtDuration(totalTestDuration)}</span>
+          </div>
+          ${hasDetails ? `<div class="test-detail" id="${testId}">${detailsHtml}</div>` : ''}
+        </div>`;
+        }
+        testSectionsHtml += `
+      <div class="file-group ${fileHasFailure ? 'has-failure' : ''}" data-file="${esc(file)}">
+        <div class="file-header" onclick="toggleFileGroup(this)">
+          <span class="file-chevron">&#9662;</span>
+          <span class="file-name">${esc(file)}</span>
+          <div class="file-badges">${fileBadgesHtml}</div>
+          <span class="file-duration">${fmtDuration(fileDuration)}</span>
+        </div>
+        <div class="file-tests">${testsHtml}</div>
+      </div>`;
+    });
+    // Healed tests list
+    let healedListHtml = '';
+    if (healedTestNames.length > 0) {
+        let items = '';
+        for (const name of healedTestNames) {
+            items += `<li>${esc(name)}</li>`;
+        }
+        healedListHtml = `<div class="healed-summary-section"><h3>Auto-Healed Tests</h3><ul class="healed-list">${items}</ul></div>`;
+    }
+    const overallClass = allPassed ? 'overall-pass' : 'overall-fail';
+    const overallText = allPassed ? 'All Tests Passed' : 'Some Tests Failed';
+    const mergedBanner = isMergedReport
+        ? '<div class="merged-banner">Auto-heal summary generated by Donobu (merged initial and retry runs).</div>'
+        : '';
+    // -----------------------------------------------------------------------
+    // Full HTML document
+    // -----------------------------------------------------------------------
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Donobu Test Report</title>
+<style>
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+:root{
+  --bg:#0f1117;--surface:#161922;--surface-raised:#1e2130;
+  --border:#2a2d3a;--border-subtle:#222536;
+  --text:#e4e5ea;--text-muted:#8b8d98;--text-dim:#5f6170;
+  --green:#10b981;--red:#ef4444;--purple:#8b5cf6;
+  --amber:#f59e0b;--orange:#f97316;--gray:#6b7280;
+  --radius:8px;--radius-lg:12px;
+  --mono:'SF Mono','Fira Code','Fira Mono',Menlo,Consolas,monospace;
+}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;padding:0}
+.container{max-width:1100px;margin:0 auto;padding:32px 24px}
+
+/* Header */
+.report-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
+.report-title{font-size:22px;font-weight:700;display:flex;align-items:center;gap:10px}
+.logo{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--purple),#6d28d9);display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;flex-shrink:0}
+.report-meta{font-size:13px;color:var(--text-muted)}
+.merged-banner{background:var(--surface-raised);border-left:3px solid var(--purple);padding:10px 14px;margin:16px 0;border-radius:0 var(--radius) var(--radius) 0;font-size:13px;color:var(--text-muted)}
+
+/* Overall status */
+.overall-status{text-align:center;padding:24px;border-radius:var(--radius-lg);margin:20px 0 24px;font-size:18px;font-weight:600}
+.overall-pass{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.04));border:1px solid rgba(16,185,129,.25);color:var(--green)}
+.overall-fail{background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(239,68,68,.04));border:1px solid rgba(239,68,68,.25);color:var(--red)}
+.overall-status .overall-sub{font-size:13px;font-weight:400;color:var(--text-muted);margin-top:4px}
+
+/* Stat cards */
+.stat-cards{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
+.stat-card{flex:1;min-width:90px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;font-family:inherit;color:inherit}
+.stat-card:hover{border-color:var(--border);background:var(--surface-raised)}
+.stat-card.active-filter{border-color:var(--purple);background:rgba(139,92,246,.08)}
+.stat-count{font-size:28px;font-weight:700;line-height:1.1}
+.stat-label{font-size:12px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:500}
+
+/* Triage summary bar */
+.triage-summary-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:16px}
+.triage-summary-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-right:4px}
+.reason-summary-badge{font-size:12px;font-weight:600;color:#fff;padding:2px 10px;border-radius:10px}
+
+/* Filter bar */
+.filter-bar{display:none;align-items:center;gap:8px;margin-bottom:16px;padding:8px 12px;background:var(--surface);border-radius:var(--radius);font-size:13px;color:var(--text-muted)}
+.filter-bar.visible{display:flex}
+.clear-filter{margin-left:auto;background:none;border:1px solid var(--border);color:var(--text-muted);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:12px;font-family:inherit}
+.clear-filter:hover{color:var(--text);border-color:var(--text-muted)}
+
+/* File groups */
+.file-group{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:10px;overflow:hidden}
+.file-group.has-failure{border-color:rgba(239,68,68,.2)}
+.file-group.hidden{display:none}
+.file-header{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none;transition:background .1s}
+.file-header:hover{background:var(--surface-raised)}
+.file-chevron{font-size:12px;color:var(--text-dim);transition:transform .15s;flex-shrink:0;width:14px;text-align:center}
+.file-group.collapsed .file-chevron{transform:rotate(-90deg)}
+.file-group.collapsed .file-tests{display:none}
+.file-name{font-size:14px;font-weight:600;font-family:var(--mono)}
+.file-badges{display:flex;gap:4px;margin-left:auto}
+.file-badge{font-size:11px;font-weight:600;color:#fff;padding:1px 7px;border-radius:10px;min-width:22px;text-align:center}
+.file-duration{font-size:12px;color:var(--text-dim);flex-shrink:0;min-width:50px;text-align:right}
+
+/* Test rows */
+.file-tests{border-top:1px solid var(--border-subtle)}
+.test-row{border-bottom:1px solid var(--border-subtle)}
+.test-row:last-child{border-bottom:none}
+.test-row.hidden-by-filter{display:none}
+.test-summary{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 20px;transition:background .1s}
+.test-row.expandable .test-summary{cursor:pointer}
+.test-row.expandable .test-summary:hover{background:rgba(255,255,255,.02)}
+.chevron{font-size:11px;color:var(--text-dim);transition:transform .15s;flex-shrink:0;width:12px}
+.chevron-spacer{width:12px;flex-shrink:0}
+.test-row.expanded .chevron{transform:rotate(90deg)}
+.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.test-name{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.inline-reason{font-size:11px;font-weight:500;flex-shrink:0;padding:1px 8px;border-radius:4px;background:rgba(255,255,255,.04)}
+.test-duration{font-size:12px;color:var(--text-dim);flex-shrink:0;font-family:var(--mono)}
+
+/* Test detail */
+.test-detail{padding:0 16px 14px 50px;display:none;flex-direction:column;gap:10px}
+.test-row.expanded .test-detail{display:flex}
+.detail-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px}
+.detail-objective{font-size:13px;padding:10px 14px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border-subtle);white-space:pre-wrap;word-break:break-word}
+
+/* Failure summary banner — the prominent "why did this fail?" block */
+.failure-summary-banner{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18);border-radius:var(--radius-lg);padding:14px 16px}
+.failure-summary-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
+.failure-reason-badge{font-size:12px;font-weight:700;color:#fff;padding:3px 10px;border-radius:6px}
+.failure-confidence{font-size:12px;color:var(--text-muted)}
+.source-hint{font-size:11px;color:var(--text-muted);font-weight:400;font-style:italic}
+.failure-summary-text{font-size:14px;color:var(--text);line-height:1.6}
+
+/* Healed banner */
+.healed-banner{display:flex;align-items:center;gap:8px;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);border-radius:var(--radius);padding:10px 14px;font-size:13px;color:var(--purple)}
+.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{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);color:#fca5a5}
+.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}
+.stack-details,.page-snapshot{margin-top:6px}
+.stack-details summary,.page-snapshot summary{font-size:12px;color:var(--text-dim);cursor:pointer;user-select:none;padding:6px 0}
+.stack-details summary:hover,.page-snapshot summary:hover{color:var(--text-muted)}
+.expect-actual{font-size:13px;padding:8px 12px;background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius);margin-top:6px}
+.expect-actual code{font-family:var(--mono);font-size:12px;color:var(--text)}
+.expect-label{color:var(--text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
+
+/* Steps */
+.steps-section{margin:8px 0;border:1px solid var(--border-subtle);border-radius:var(--radius);overflow:hidden}
+.steps-section summary{font-size:12px;font-weight:600;color:var(--text-muted);padding:8px 12px;cursor:pointer;user-select:none;background:var(--surface-raised)}
+.steps-section summary:hover{background:var(--surface)}
+.steps-section[open] summary{border-bottom:1px solid var(--border-subtle)}
+.steps-list{padding:4px 0}
+.step-entry{display:flex;gap:8px;padding:4px 12px;font-size:12px;align-items:baseline}
+.step-time{color:var(--text-dim);font-family:var(--mono);font-size:11px;flex-shrink:0;width:85px}
+.step-text{color:var(--text-muted);min-width:0}
+.step-action .step-text{color:var(--text);font-weight:500}
+.step-result .step-text{color:var(--text-muted)}
+
+/* Step filmstrip — AI agent tool call screenshots */
+.step-filmstrip{display:flex;flex-direction:column}
+.filmstrip-step{border-bottom:1px solid var(--border-subtle);padding:6px 12px}
+.filmstrip-step:last-child{border-bottom:none}
+.filmstrip-header{display:flex;align-items:center;gap:8px;user-select:none}
+.filmstrip-tool{font-size:12px;font-weight:600;color:var(--text);font-family:var(--mono)}
+.filmstrip-duration{font-size:11px;color:var(--text-dim);font-family:var(--mono)}
+.filmstrip-toggle{margin-left:auto;font-size:11px;padding:2px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--accent);cursor:pointer;transition:all .15s;font-family:var(--mono)}
+.filmstrip-toggle:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
+.filmstrip-summary{font-size:11px;color:var(--text-dim);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:22px}
+.step-status-ok{color:var(--green);font-size:12px;font-weight:bold}
+.step-status-fail{color:var(--red);font-size:12px;font-weight:bold}
+.filmstrip-img{display:none;padding:8px 0 4px 22px}
+.filmstrip-img.open{display:block}
+.step-screenshot{max-width:100%;max-height:250px;border-radius:var(--radius);border:1px solid var(--border);cursor:pointer}
+
+/* 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)}
+.timeline-entry.last{border-left-color:transparent}
+.timeline-marker{position:absolute;left:-6px;top:4px;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface)}
+.timeline-content{min-width:0}
+.timeline-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
+.timeline-label{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
+.timeline-status{font-size:13px;font-weight:600}
+.timeline-duration{font-size:12px;color:var(--text-dim);font-family:var(--mono)}
+.timeline-errors{margin-bottom:8px}
+
+/* Attachments */
+.attachments-group{display:flex;flex-direction:column;gap:8px}
+.attachments-images{display:flex;gap:8px;flex-wrap:wrap}
+.attachments-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
+.img-wrapper{display:inline-flex;flex-direction:column;gap:4px}
+.img-label{font-size:11px;color:var(--text-dim);font-style:italic}
+.screenshot{max-width:100%;max-height:300px;border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;transition:opacity .15s}
+.screenshot:hover{opacity:.9}
+.page-snapshot{width:100%}
+.img-link{display:block}
+.attachment-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--purple);text-decoration:none;padding:4px 10px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius)}
+.attachment-link:hover{border-color:var(--purple);background:rgba(139,92,246,.06)}
+.video-link{color:var(--amber)}
+.video-link:hover{border-color:var(--amber)}
+.attachment-missing{font-size:12px;color:var(--text-dim);font-style:italic;padding:4px 10px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--radius)}
+
+/* Triage card (expandable) */
+.triage-card{margin:8px 0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
+.triage-card summary{font-size:12px;font-weight:600;color:var(--text-muted);padding:10px 14px;cursor:pointer;user-select:none;background:var(--bg);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.triage-card summary:hover{background:var(--surface-raised)}
+.triage-card[open] summary{border-bottom:1px solid var(--border-subtle)}
+.triage-card-body{padding:12px 16px}
+.triage-flags{display:flex;gap:4px}
+.triage-flag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}
+.triage-flag.retry{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.2)}
+.triage-flag.code{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.2)}
+.triage-flag.product{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2)}
+.triage-indicators{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
+.indicator-tag{font-size:11px;padding:2px 8px;border-radius:4px;background:var(--surface-raised);color:var(--text-muted);border:1px solid var(--border-subtle)}
+.indicator-tag.warn{background:rgba(245,158,11,.08);color:var(--amber);border-color:rgba(245,158,11,.2)}
+.remediation-steps{margin-top:8px}
+.remediation-steps ol{padding-left:18px;font-size:13px;color:var(--text)}
+.remediation-steps li{margin-bottom:8px;line-height:1.5}
+.step-category{font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;background:var(--surface-raised);color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;vertical-align:middle}
+.step-details{font-size:12px;color:var(--text-muted);display:block;margin-top:2px}
+.triage-notes{margin-top:8px}
+.triage-notes p{font-size:13px;color:var(--text-muted)}
+
+/* Evidence deep-dive */
+.evidence-deep-dive{margin:8px 0;border:1px solid var(--border-subtle);border-radius:var(--radius);overflow:hidden}
+.evidence-deep-dive summary{font-size:12px;font-weight:600;color:var(--text-muted);padding:10px 14px;cursor:pointer;user-select:none;background:var(--surface-raised);transition:background .1s}
+.evidence-deep-dive summary:hover{background:var(--surface)}
+.evidence-deep-dive[open] summary{border-bottom:1px solid var(--border-subtle)}
+.evidence-section{padding:12px 14px}
+.evidence-section+.evidence-section{border-top:1px solid var(--border-subtle)}
+.heuristic-grid{display:flex;flex-wrap:wrap;gap:8px}
+.h-item{padding:8px 10px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border-subtle);min-width:120px}
+.h-item.full-width{width:100%}
+.h-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);display:block;margin-bottom:2px}
+.h-value{font-size:13px;color:var(--text)}
+.h-evidence{margin-top:8px}
+.h-evidence-item{font-size:12px;color:var(--text-muted);padding:3px 0;padding-left:12px;position:relative}
+.h-evidence-item::before{content:'\\2022';position:absolute;left:0;color:var(--text-dim)}
+.tool-calls{display:flex;flex-direction:column;gap:3px}
+.tool-call{font-size:12px;font-family:var(--mono);color:var(--text-muted);padding:4px 8px;background:var(--bg);border-radius:4px;display:flex;align-items:center;gap:6px}
+.tc-name{color:var(--text)}
+.tc-ok{color:var(--green);font-weight:bold}
+.tc-fail{color:var(--red);font-weight:bold}
+
+/* Healed summary */
+.healed-summary-section{background:var(--surface);border:1px solid rgba(139,92,246,.2);border-radius:var(--radius-lg);padding:18px 20px;margin-top:24px}
+.healed-summary-section h3{font-size:14px;font-weight:600;color:var(--purple);margin-bottom:10px}
+.healed-list{list-style:none}
+.healed-list li{font-size:13px;padding:4px 0 4px 18px;position:relative}
+.healed-list li::before{content:'\\2764';position:absolute;left:0;color:var(--purple);font-size:11px}
+
+/* Quick Actions */
+.quick-actions{padding:12px;background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius)}
+.qa-header{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);margin-bottom:8px}
+.qa-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
+.qa-label{font-size:12px;color:var(--text-muted);white-space:nowrap;min-width:140px}
+.qa-cmd-wrapper{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
+.qa-cmd{font-size:12px;font-family:var(--mono);background:var(--bg-card);padding:5px 10px;border-radius:4px;border:1px solid var(--border-subtle);color:var(--text);white-space:nowrap;overflow-x:auto;flex:1;min-width:0}
+.qa-copy{font-size:11px;padding:3px 8px;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-muted);cursor:pointer;white-space:nowrap;transition:all .15s}
+.qa-copy:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
+.qa-source{font-size:12px;color:var(--text-dim);margin-top:6px;padding-top:6px;border-top:1px solid var(--border-subtle)}
+.qa-source-label{font-weight:600}
+
+/* Footer */
+.report-footer{text-align:center;font-size:12px;color:var(--text-dim);margin-top:32px;padding-top:16px;border-top:1px solid var(--border-subtle)}
+
+/* Lightbox */
+.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;align-items:center;justify-content:center;cursor:zoom-out}
+.lightbox.open{display:flex}
+.lightbox img{max-width:95vw;max-height:95vh;border-radius:var(--radius)}
+
+/* Print */
+@media print{
+  body{background:#fff;color:#111}
+  .stat-card,.file-group{border:1px solid #ddd}
+  .test-detail{display:block!important}
+  .screenshot{max-height:200px}
+  .lightbox{display:none!important}
+}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="report-header">
+    <div class="report-title"><div class="logo">D</div>Donobu Test Report</div>
+    <div class="report-meta">${total} test${total !== 1 ? 's' : ''} &middot; ${fmtDuration(totalDuration)}</div>
+  </div>
+
+  ${mergedBanner}
+
+  <div class="overall-status ${overallClass}">
+    ${overallText}
+    <div class="overall-sub">${total} test${total !== 1 ? 's' : ''} across ${fileGroups.size} file${fileGroups.size !== 1 ? 's' : ''}</div>
+  </div>
+
+  <div class="stat-cards">${statCardsHtml}</div>
+
+  ${triageSummaryHtml}
+
+  <div class="filter-bar" id="filterBar">
+    <span>Showing: <strong id="filterLabel"></strong></span>
+    <button class="clear-filter" onclick="clearFilter()">Clear filter</button>
+  </div>
+
+  ${testSectionsHtml}
+  ${healedListHtml}
+
+  <div class="report-footer">Report generated by Donobu</div>
+</div>
+
+<div class="lightbox" id="lightbox" onclick="closeLightbox()">
+  <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')}
+
+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')});
+}
+
+// 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()}});
+
+// 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>`;
+}
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+try {
+    const { jsonData, outputFile, triageDir } = parseArgs();
+    // Auto-discover triage dir from merged report metadata if not explicitly given
+    let resolvedTriageDir = triageDir;
+    if (!resolvedTriageDir && jsonData.metadata?.sources?.initial) {
+        const initialPath = jsonData.metadata.sources.initial;
+        const candidate = (0, path_1.dirname)(initialPath);
+        if ((0, fs_1.existsSync)(candidate) && (0, path_1.basename)(candidate) !== '.') {
+            resolvedTriageDir = candidate;
+        }
+    }
+    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);
+}
+//# sourceMappingURL=playwright-json-to-html.js.map