@loadmill/droid-cua 2.17.0 → 2.18.0

package/build/src/core/report/parse-run-report.js

@@ -0,0 +1,222 @@
+// Parses a JUnit-style run-result XML (the format stored under a project's
+// results/ directory) into a normalized RunReportModel. This is the XML-acquisition
+// adapter: it does the regex/attr/NDJSON parsing, then delegates ALL model assembly
+// (event normalization, status, success rate, failure shape, final shape) to the shared
+// run-report-model.js so the desktop live view, the Share report, and the CLI report all
+// derive identically.
+import { normalizeEvent, deriveRunStatus, computeSuccessRate, makeFailureOrError, assembleRunReportModel, } from "./run-report-model.js";
+function parseAttributes(raw) {
+    const attrs = {};
+    const attrPattern = /([^\s=]+)\s*=\s*("([^"]*)"|'([^']*)')/g;
+    let match = null;
+    while ((match = attrPattern.exec(raw)) !== null) {
+        attrs[match[1]] = match[3] ?? match[4] ?? "";
+    }
+    return attrs;
+}
+function findOpenTag(xml, tagName) {
+    const pattern = new RegExp(`<${tagName}\\b([^>]*)>`, "i");
+    const match = xml.match(pattern);
+    if (!match)
+        return null;
+    return parseAttributes(match[1] ?? "");
+}
+function findFirstTagWithBody(xml, tagName) {
+    const pattern = new RegExp(`<${tagName}\\b([^>]*)>([\\s\\S]*?)<\\/${tagName}>`, "i");
+    const match = xml.match(pattern);
+    if (!match)
+        return null;
+    return { attrs: parseAttributes(match[1] ?? ""), body: match[2] ?? "" };
+}
+function findFirstTestcase(xml) {
+    const withBody = findFirstTagWithBody(xml, "testcase");
+    if (withBody)
+        return withBody;
+    const selfClosing = xml.match(/<testcase\b([^>]*)\/>/i);
+    if (!selfClosing)
+        return null;
+    return { attrs: parseAttributes(selfClosing[1] ?? ""), body: "" };
+}
+function findTestcases(xml) {
+    const testcases = [];
+    const withBodyPattern = /<testcase\b([^>]*)>([\s\S]*?)<\/testcase>/gi;
+    let match = null;
+    while ((match = withBodyPattern.exec(xml)) !== null) {
+        testcases.push({ attrs: parseAttributes(match[1] ?? ""), body: match[2] ?? "" });
+    }
+    if (testcases.length > 0)
+        return testcases;
+    const selfClosingPattern = /<testcase\b([^>]*)\/>/gi;
+    while ((match = selfClosingPattern.exec(xml)) !== null) {
+        testcases.push({ attrs: parseAttributes(match[1] ?? ""), body: "" });
+    }
+    return testcases;
+}
+function parseCount(raw) {
+    if (!raw)
+        return null;
+    const parsed = Number.parseInt(raw, 10);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function parseDuration(raw) {
+    if (!raw)
+        return null;
+    const parsed = Number.parseFloat(raw);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function countTestcases(xml) {
+    return xml.match(/<testcase\b/gi)?.length ?? 0;
+}
+function readFailureOrError(testcaseBody) {
+    const failure = findFirstTagWithBody(testcaseBody, "failure");
+    if (failure) {
+        return makeFailureOrError({
+            kind: "failure",
+            type: failure.attrs.type,
+            message: failure.attrs.message,
+            body: failure.body.trim() || undefined,
+        });
+    }
+    const error = findFirstTagWithBody(testcaseBody, "error");
+    if (error) {
+        return makeFailureOrError({
+            kind: "error",
+            type: error.attrs.type,
+            message: error.attrs.message,
+            body: error.body.trim() || undefined,
+        });
+    }
+    return undefined;
+}
+function hasStoppedMarker(value) {
+    return /stopped by user/i.test(value);
+}
+// Maps one parsed NDJSON line (producer field names `event`/`action`) to the canonical
+// event shape and runs it through the shared normalizer.
+function normalizeNdjsonEvent(value, fallbackTs, warnings) {
+    return normalizeEvent({
+        ts: value.ts,
+        kind: value.kind,
+        text: value.text,
+        eventType: value.event,
+        actionType: value.action,
+        payload: value.payload,
+    }, { fallbackTs, warnings });
+}
+function parseSystemOutEvents(systemOutBody, fallbackTs, warnings) {
+    const normalizedSystemOut = systemOutBody
+        ?.trim()
+        .replace(/^<!\[CDATA\[/, "")
+        .replace(/\]\]>$/, "");
+    if (!normalizedSystemOut || !normalizedSystemOut.trim()) {
+        warnings.push("Event log not available (older report format).");
+        return [];
+    }
+    const lines = normalizedSystemOut
+        .split("\n")
+        .map((line) => line.trim())
+        .filter((line) => line.length > 0);
+    if (lines.length === 0) {
+        warnings.push("Event log not available (older report format).");
+        return [];
+    }
+    const events = [];
+    let invalidJsonCount = 0;
+    for (const line of lines) {
+        try {
+            const parsed = JSON.parse(line);
+            if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+                invalidJsonCount += 1;
+                continue;
+            }
+            const event = normalizeNdjsonEvent(parsed, fallbackTs, warnings);
+            if (event)
+                events.push(event);
+        }
+        catch {
+            invalidJsonCount += 1;
+        }
+    }
+    if (invalidJsonCount > 0) {
+        warnings.push(`Skipped ${invalidJsonCount} malformed event line${invalidJsonCount === 1 ? "" : "s"}.`);
+    }
+    return events;
+}
+export function parseRunReport(xml, { fallbackTimestamp = new Date(0).toISOString() } = {}) {
+    const warnings = [];
+    const suitesAttrs = findOpenTag(xml, "testsuites");
+    const suite = findFirstTagWithBody(xml, "testsuite");
+    if (!suite) {
+        throw new Error("Missing <testsuite> element.");
+    }
+    const testcases = findTestcases(suite.body);
+    const testcase = testcases[0] ?? findFirstTestcase(suite.body);
+    if (!testcase) {
+        warnings.push("Missing <testcase> element; using suite-level data only.");
+    }
+    const tests = (parseCount(suite.attrs.tests ?? suitesAttrs?.tests) ?? countTestcases(suite.body)) || 1;
+    const failures = parseCount(suite.attrs.failures ?? suitesAttrs?.failures) ?? 0;
+    const errors = parseCount(suite.attrs.errors ?? suitesAttrs?.errors) ?? 0;
+    const skipped = parseCount(suite.attrs.skipped ?? suitesAttrs?.skipped) ?? 0;
+    const failureOrError = testcases.map((entry) => readFailureOrError(entry.body)).find(Boolean) ??
+        (testcase ? readFailureOrError(testcase.body) : undefined);
+    const hasSkippedNode = testcase ? /<skipped\b/i.test(testcase.body) : false;
+    const stopped = testcases.some((entry) => hasStoppedMarker(entry.body)) ||
+        (testcase ? hasStoppedMarker(testcase.body) : false);
+    const status = deriveRunStatus({
+        tests,
+        failures,
+        errors,
+        skipped,
+        stopped,
+        hasSkippedNode,
+        failureKind: failureOrError?.kind,
+    });
+    const successRate = computeSuccessRate({ tests, failures, errors, skipped, status });
+    const timestamp = suite.attrs.timestamp ?? suitesAttrs?.timestamp ?? null;
+    const detailDuration = testcases.length > 1
+        ? parseDuration(suite.attrs.time ?? suitesAttrs?.time)
+        : parseDuration(testcase?.attrs.time) ?? parseDuration(suite.attrs.time ?? suitesAttrs?.time);
+    const systemOut = findFirstTagWithBody(testcase?.body ?? suite.body, "system-out");
+    const events = parseSystemOutEvents(systemOut?.body ?? null, timestamp ?? fallbackTimestamp, warnings);
+    const childTests = testcases.length > 1
+        ? testcases.map((child, index) => {
+            const childWarnings = [];
+            const childFailureOrError = readFailureOrError(child.body);
+            const childHasSkippedNode = /<skipped\b/i.test(child.body);
+            const childStopped = hasStoppedMarker(child.body);
+            // childTests is XML-only (the CLI never produces it); successRate stays a binary
+            // pass/non-pass here by design — only the status ladder is shared.
+            const childStatus = deriveRunStatus({
+                tests: 1,
+                stopped: childStopped,
+                hasSkippedNode: childHasSkippedNode,
+                failureKind: childFailureOrError?.kind,
+            });
+            const childSystemOut = findFirstTagWithBody(child.body, "system-out");
+            const childEvents = parseSystemOutEvents(childSystemOut?.body ?? null, timestamp ?? fallbackTimestamp, childWarnings);
+            return {
+                testName: child.attrs.name ?? `Test ${index + 1}`,
+                durationSeconds: parseDuration(child.attrs.time),
+                status: childStatus,
+                successRate: childStatus === "pass" ? 100 : 0,
+                failureOrError: childFailureOrError,
+                events: childEvents,
+                warnings: childWarnings,
+            };
+        })
+        : undefined;
+    return assembleRunReportModel({
+        suiteName: suite.attrs.name ?? null,
+        testName: childTests ? suite.attrs.name ?? suitesAttrs?.name ?? null : testcase?.attrs.name ?? null,
+        timestamp,
+        durationSeconds: detailDuration,
+        status,
+        testCases: tests,
+        successRate,
+        failureOrError,
+        events,
+        childTests,
+        warnings,
+    });
+}

package/build/src/core/report/render-html-report.js

@@ -0,0 +1,317 @@
+// Renders a RunReportModel (from parse-run-report.js) into a single, self-contained
+// HTML document that reproduces the Desktop App's run-details view. Pure: no I/O and
+// no external references — screenshots must already be inlined as data URLs in
+// `event.payload.screenshotDataUrl`. Use generate-html-report.js to inline them.
+import { assertionData, formatDuration, hasNearbyAssertionCard, isAssistantAssertionSummary, isDuplicateAssertionLine, isHiddenExecutionLogEvent, runSummaryData, } from "./run-log-model.js";
+// ---------- text / value formatting (mirrors the Desktop App) ----------
+function escapeHtml(value) {
+    return String(value ?? "")
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+function formatRunTimestamp(iso) {
+    if (!iso)
+        return "—";
+    const parsed = Date.parse(iso);
+    if (!Number.isFinite(parsed))
+        return "—";
+    return new Date(parsed).toLocaleString();
+}
+function formatRunDuration(durationSeconds) {
+    if (durationSeconds === null || durationSeconds === undefined || !Number.isFinite(durationSeconds)) {
+        return "—";
+    }
+    if (durationSeconds < 60)
+        return `${durationSeconds.toFixed(1)}s`;
+    const wholeSeconds = Math.floor(durationSeconds);
+    const minutes = Math.floor(wholeSeconds / 60);
+    const seconds = wholeSeconds % 60;
+    if (minutes < 60)
+        return `${minutes}m ${seconds.toString().padStart(2, "0")}s`;
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    return `${hours}h ${remainingMinutes.toString().padStart(2, "0")}m`;
+}
+function runStatusLabel(status) {
+    switch (status) {
+        case "pass":
+            return "Pass";
+        case "fail":
+            return "Fail";
+        case "error":
+            return "Error";
+        case "stopped":
+            return "Stopped";
+        case "skipped":
+            return "Skipped";
+        case "running":
+            return "In progress";
+        case "pending":
+            return "Pending";
+        default:
+            return "Warning";
+    }
+}
+// ---------- event filtering (visible-events composition for the report) ----------
+// Reduces raw events to the ones the Desktop App actually shows: drops empty-text,
+// hidden-debug media, interactive input prompts, and assistant "ASSERTION RESULT"
+// summaries that sit next to an assertion card, then collapses consecutive duplicate
+// assertion lines (the same assertion is logged several times).
+function buildVisibleEvents(events) {
+    const base = (events ?? []).filter((event) => typeof event.text === "string" && event.text.trim().length > 0);
+    const filtered = base.filter((event, idx, items) => {
+        if (isHiddenExecutionLogEvent(event))
+            return false;
+        if (isAssistantAssertionSummary(event) && hasNearbyAssertionCard(items, idx))
+            return false;
+        if (event.eventType === "input_request")
+            return false;
+        return true;
+    });
+    const visible = [];
+    for (const event of filtered) {
+        if (isDuplicateAssertionLine(event, visible[visible.length - 1]))
+            continue;
+        visible.push(event);
+    }
+    return visible;
+}
+// Emits a clickable thumbnail and registers the screenshot in `shots` so a matching
+// full-size lightbox overlay can be rendered. The href links to the CSS `:target`
+// overlay, so click-to-enlarge works even with JavaScript disabled.
+function screenshotImg(event, shots) {
+    const url = event.payload?.screenshotDataUrl;
+    if (typeof url !== "string" || !url.startsWith("data:"))
+        return "";
+    const index = shots.length + 1;
+    shots.push({ index, url });
+    return `<a class="dc-shot-link" href="#dc-shot-${index}" aria-label="Open screenshot ${index}"><img class="dc-shot" src="${escapeHtml(url)}" alt="Screenshot ${index}" /></a>`;
+}
+// ---------- per-event timeline rendering (mirrors ExecutionLogItem.tsx) ----------
+function renderEvent(event, shots) {
+    if (isHiddenExecutionLogEvent(event))
+        return "";
+    const summary = runSummaryData(event);
+    if (summary) {
+        const cls = summary.status === "passed" ? "pass" : summary.status === "failed" ? "fail" : "amber";
+        const label = summary.status === "passed"
+            ? "Test Passed"
+            : summary.status === "stopped"
+                ? "Test Stopped"
+                : summary.status === "errored"
+                    ? "Error"
+                    : "Test Failed";
+        const badge = summary.status === "passed" ? "PASS" : summary.status === "stopped" ? "STOPPED" : summary.status === "errored" ? "ERROR" : "FAIL";
+        return `<div class="dc-card dc-${cls}">
+  <div class="dc-card-head"><span class="dc-card-title">${escapeHtml(label)}</span><span class="dc-pill dc-pill-${cls}">${escapeHtml(badge)}</span></div>
+  <div class="dc-card-body">
+    <div>Duration: ${escapeHtml(formatDuration(summary.durationMs))}</div>
+    <div>Steps: ${summary.instructionsCompleted ?? 0}/${summary.instructionsTotal ?? 0}</div>
+    <div>Assertions: ${summary.assertionsPassed ?? 0}/${(summary.assertionsPassed ?? 0) + (summary.assertionsFailed ?? 0)}</div>
+    <div>Retries: ${summary.retries ?? 0}</div>
+  </div>${summary.error ? `\n  <div class="dc-card-error">${escapeHtml(summary.error)}</div>` : ""}
+</div>`;
+    }
+    const isInstruction = event.eventType === "instruction_started" || event.kind === "user";
+    if (isInstruction) {
+        return `<div class="dc-row dc-row-right"><div class="dc-bubble">${escapeHtml(event.text)}</div></div>`;
+    }
+    const isAssistant = event.eventType === "assistant_message" || event.kind === "assistant";
+    if (isAssistant) {
+        return `<div class="dc-assistant">${escapeHtml(event.text)}</div>`;
+    }
+    const assertion = assertionData(event);
+    if (assertion) {
+        const cls = assertion.passed ? "pass" : "fail";
+        const img = screenshotImg(event, shots);
+        return `<div class="dc-card dc-${cls}">
+  <div class="dc-card-head"><span class="dc-card-title">${assertion.passed ? "Assertion Passed" : "Assertion Failed"}${img}</span><span class="dc-pill dc-pill-${cls}">${assertion.passed ? "PASS" : "FAIL"}</span></div>
+  <div class="dc-assertion">${escapeHtml(assertion.assertion)}</div>${assertion.details ? `\n  <div class="dc-assertion-details">${escapeHtml(assertion.details)}</div>` : ""}
+</div>`;
+    }
+    if (event.eventType === "retry") {
+        return `<div class="dc-line dc-retry">${escapeHtml(event.text)}</div>`;
+    }
+    if (event.kind === "action") {
+        return `<div class="dc-line">${escapeHtml(event.text)}${screenshotImg(event, shots)}</div>`;
+    }
+    if (event.eventType === "screenshot_captured") {
+        return `<div class="dc-line">${escapeHtml(event.text)}${screenshotImg(event, shots)}</div>`;
+    }
+    return `<div class="dc-line dc-${escapeHtml(event.kind)}">${escapeHtml(event.text)}</div>`;
+}
+function renderTimeline(events, shots) {
+    return buildVisibleEvents(events)
+        .map((event) => renderEvent(event, shots))
+        .filter(Boolean)
+        .join("\n");
+}
+// Full-size overlays, one per screenshot. Shown via the CSS `:target` rule, so
+// click-to-enlarge and prev/next/close work with JavaScript disabled.
+function renderLightboxes(shots) {
+    if (shots.length === 0)
+        return "";
+    const count = shots.length;
+    return shots
+        .map((shot) => {
+        const prev = shot.index > 1
+            ? `<a class="dc-lightbox-nav dc-lightbox-prev" href="#dc-shot-${shot.index - 1}" aria-label="Previous screenshot">&#8249;</a>`
+            : "";
+        const next = shot.index < count
+            ? `<a class="dc-lightbox-nav dc-lightbox-next" href="#dc-shot-${shot.index + 1}" aria-label="Next screenshot">&#8250;</a>`
+            : "";
+        return `<div class="dc-lightbox" id="dc-shot-${shot.index}">
+  <a class="dc-lightbox-backdrop" href="#dc-top" aria-label="Close"></a>
+  ${prev}
+  <img class="dc-lightbox-img" src="${escapeHtml(shot.url)}" alt="Screenshot ${shot.index}" />
+  ${next}
+  <a class="dc-lightbox-close" href="#dc-top" aria-label="Close">&times;</a>
+</div>`;
+    })
+        .join("\n");
+}
+// Progressive enhancement: map arrow keys / Escape to the same hash navigation the
+// CSS overlays already use. Inline only — keeps the report a single self-contained file.
+function renderLightboxScript(count) {
+    if (count === 0)
+        return "";
+    return `<script>
+(function () {
+  var count = ${count};
+  function current() {
+    var match = /^#dc-shot-(\\d+)$/.exec(location.hash);
+    return match ? parseInt(match[1], 10) : 0;
+  }
+  document.addEventListener('keydown', function (event) {
+    var n = current();
+    if (!n) return;
+    if (event.key === 'Escape') { event.preventDefault(); location.hash = 'dc-top'; }
+    else if ((event.key === 'ArrowRight' || event.key === 'ArrowDown') && n < count) { event.preventDefault(); location.hash = 'dc-shot-' + (n + 1); }
+    else if ((event.key === 'ArrowLeft' || event.key === 'ArrowUp') && n > 1) { event.preventDefault(); location.hash = 'dc-shot-' + (n - 1); }
+  });
+})();
+</script>`;
+}
+// ---------- summary card ----------
+function summaryRow(label, value) {
+    return `<div class="dc-sum-cell"><div class="dc-sum-label">${escapeHtml(label)}</div><div class="dc-sum-value">${value}</div></div>`;
+}
+function renderSummaryCard(model) {
+    const outcome = `<span class="dc-pill dc-pill-${escapeHtml(model.status)}">${escapeHtml(runStatusLabel(model.status))}</span>`;
+    return `<div class="dc-summary">
+  ${summaryRow("Suite", escapeHtml(model.suiteName ?? "—"))}
+  ${summaryRow("Launched On", escapeHtml(formatRunTimestamp(model.timestamp)))}
+  ${summaryRow("Duration", escapeHtml(formatRunDuration(model.durationSeconds)))}
+  ${summaryRow("Outcome", outcome)}
+  ${summaryRow("# Test Cases", String(model.testCases))}
+  ${summaryRow("% Success Rate", `${Math.round(model.successRate)}%`)}
+</div>`;
+}
+function renderTestsList(childTests) {
+    const rows = childTests
+        .map((child) => `<div class="dc-test-row"><span class="dc-test-name">${escapeHtml(child.testName.replace(/\.dcua$/i, ""))}</span><span class="dc-test-dur">${escapeHtml(formatRunDuration(child.durationSeconds))}</span><span class="dc-pill dc-pill-${escapeHtml(child.status)}">${escapeHtml(runStatusLabel(child.status))}</span></div>`)
+        .join("\n");
+    return `<div class="dc-tests"><div class="dc-tests-title">Tests</div>${rows}</div>`;
+}
+// ---------- styles ----------
+const STYLES = `
+:root { color-scheme: light; }
+* { box-sizing: border-box; }
+body { margin: 0; background: #f1f5f9; color: #0f172a; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; }
+.dc-wrap { max-width: 880px; margin: 0 auto; padding: 24px 20px 64px; }
+.dc-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
+.dc-title { font-size: 18px; font-weight: 700; }
+.dc-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
+.dc-sum-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1e293b; }
+.dc-sum-value { font-size: 13px; font-weight: 500; color: #334155; margin-top: 2px; }
+.dc-tests { background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
+.dc-tests-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1e293b; margin-bottom: 8px; }
+.dc-test-row { display: grid; grid-template-columns: 1fr 90px 90px; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 6px; }
+.dc-test-name { font-weight: 500; color: #334155; }
+.dc-test-dur { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #64748b; font-size: 12px; }
+.dc-timeline { background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
+.dc-child-block { margin-top: 12px; }
+.dc-child-head { font-size: 13px; font-weight: 600; color: #334155; margin: 8px 0; }
+.dc-row { display: flex; }
+.dc-row-right { justify-content: flex-end; }
+.dc-bubble { display: inline-block; max-width: 70%; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 16px; border-bottom-right-radius: 6px; padding: 8px 14px; color: #0f172a; }
+.dc-assistant { max-width: 82%; color: #334155; }
+.dc-line { display: flex; align-items: center; gap: 8px; color: #475569; font-size: 13px; }
+.dc-retry { color: #b45309; }
+.dc-error { color: #b91c1c; }
+.dc-warning { color: #b45309; }
+.dc-shot-link { display: inline-flex; margin-left: 8px; vertical-align: middle; }
+.dc-shot { height: 34px; width: auto; border: 1px solid #e2e8f0; border-radius: 4px; cursor: zoom-in; transition: border-color .12s; }
+.dc-shot-link:hover .dc-shot, .dc-shot-link:focus-visible .dc-shot { border-color: #94a3b8; }
+.dc-lightbox { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 32px; background: rgba(15, 23, 42, .82); }
+.dc-lightbox:target { display: flex; }
+.dc-lightbox-backdrop { position: absolute; inset: 0; z-index: 1; cursor: zoom-out; }
+.dc-lightbox-img { position: relative; z-index: 2; max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
+.dc-lightbox-close { position: absolute; top: 14px; right: 20px; z-index: 3; color: #fff; font-size: 30px; line-height: 1; text-decoration: none; opacity: .85; }
+.dc-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; color: #fff; font-size: 44px; line-height: 1; text-decoration: none; padding: 8px 16px; opacity: .85; user-select: none; }
+.dc-lightbox-nav:hover, .dc-lightbox-close:hover { opacity: 1; }
+.dc-lightbox-prev { left: 10px; }
+.dc-lightbox-next { right: 10px; }
+.dc-card { border: 1px solid; border-radius: 12px; padding: 12px 14px; }
+.dc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
+.dc-card-title { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; }
+.dc-card-body > div { margin: 1px 0; }
+.dc-card-error, .dc-assertion-details { margin-top: 6px; font-size: 13px; }
+.dc-assertion { font-size: 14px; }
+.dc-pass { border-color: #a7f3d0; background: #ecfdf5; color: #064e3b; }
+.dc-fail { border-color: #fecdd3; background: #fff1f2; color: #881337; }
+.dc-amber, .dc-error.dc-card { border-color: #fde68a; background: #fffbeb; color: #78350f; }
+.dc-pill { display: inline-flex; width: fit-content; border: 1px solid; border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
+.dc-pill-pass, .dc-pill-passed { border-color: #6ee7b7; background: #d1fae5; color: #047857; }
+.dc-pill-fail, .dc-pill-failed { border-color: #fda4af; background: #ffe4e6; color: #be123c; }
+.dc-pill-error, .dc-pill-errored, .dc-pill-amber { border-color: #fcd34d; background: #fef3c7; color: #b45309; }
+.dc-pill-stopped { border-color: #fdba74; background: #ffedd5; color: #c2410c; }
+.dc-pill-skipped { border-color: #cbd5e1; background: #f1f5f9; color: #334155; }
+`.trim();
+// ---------- entry point ----------
+export function renderHtmlReport(model, { title } = {}) {
+    const docTitle = title ?? `Run Report: ${model.testName ?? model.suiteName ?? "Test run"}`;
+    const heading = model.testName ?? model.suiteName ?? "Test run";
+    // Screenshots are collected across the whole document (top-level + child timelines)
+    // so the lightbox shares one continuous prev/next sequence.
+    const shots = [];
+    let body;
+    if (model.childTests && model.childTests.length > 0) {
+        const children = model.childTests
+            .map((child) => `<div class="dc-child-block"><div class="dc-child-head">${escapeHtml(child.testName.replace(/\.dcua$/i, ""))}</div>${renderTimeline(child.events, shots)}</div>`)
+            .join("\n");
+        body = `${renderSummaryCard(model)}
+${renderTestsList(model.childTests)}
+<div class="dc-timeline">
+${children}
+</div>`;
+    }
+    else {
+        body = `${renderSummaryCard(model)}
+<div class="dc-timeline">
+${renderTimeline(model.events, shots)}
+</div>`;
+    }
+    const lightboxes = renderLightboxes(shots);
+    const script = renderLightboxScript(shots.length);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${escapeHtml(docTitle)}</title>
+<style>
+${STYLES}
+</style>
+</head>
+<body>
+<div class="dc-wrap" id="dc-top">
+<div class="dc-header"><div class="dc-title">Run Details: ${escapeHtml(heading)}</div><span class="dc-pill dc-pill-${escapeHtml(model.status)}">${escapeHtml(runStatusLabel(model.status))}</span></div>
+${body}
+</div>${lightboxes ? `\n${lightboxes}` : ""}${script ? `\n${script}` : ""}
+</body>
+</html>`;
+}

package/build/src/core/report/report-file-name.js

@@ -0,0 +1,31 @@
+// Shared, human-readable filename for downloaded HTML run reports. Used by both the
+// CLI (`--report`) and the Desktop App ("Share" → "Download HTML report") so the two
+// produce identical, conventionally-named files: <test-name>--<date>--<time>.html
+// e.g. `a--2026-06-03--16-09-20.html`.
+function sanitizeStem(value) {
+    return (String(value || "report")
+        .replace(/\.dcua$/i, "")
+        .trim()
+        .replace(/[^a-zA-Z0-9._-]+/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^[-_.]+|[-_.]+$/g, "") || "report");
+}
+// Returns { datePart: "YYYY-MM-DD", timePart: "HH-MM-SS" } in local time. Falls back to
+// "now" when the timestamp is missing or unparseable.
+function formatStamp(iso) {
+    const parsed = iso ? new Date(iso) : null;
+    const valid = parsed && Number.isFinite(parsed.getTime()) ? parsed : new Date();
+    const pad = (n) => String(n).padStart(2, "0");
+    return {
+        datePart: `${valid.getFullYear()}-${pad(valid.getMonth() + 1)}-${pad(valid.getDate())}`,
+        timePart: `${pad(valid.getHours())}-${pad(valid.getMinutes())}-${pad(valid.getSeconds())}`,
+    };
+}
+// Builds the report filename from a run's name + timestamp. `testName` wins; `suiteName`
+// is the fallback (mirrors the report heading), then a generic "report". The name uses
+// single dashes; `--` separates name↔date↔time so the segments stay visually distinct.
+export function buildReportFileName({ testName, suiteName, timestamp } = {}) {
+    const name = sanitizeStem(testName ?? suiteName);
+    const { datePart, timePart } = formatStamp(timestamp);
+    return `${name}--${datePart}--${timePart}.html`;
+}