@loadmill/droid-cua 2.44.0 → 2.45.0

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

@@ -2,8 +2,8 @@
 // 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, networkCardData, isNetworkCaptureStarted, formatDuration, hasNearbyAssertionCard, isAssistantAssertionSummary, isDuplicateAssertionLine, isHiddenExecutionLogEvent, runSummaryData, stepCompletionData, stepCompletionReasonTooltip, } from "./run-log-model.js";
-import { buildRunReportSections, capitalizeReportLine, cloudProviderId, cloudProviderLabel, cloudStatus, } from "./run-report-sections.js";
+import { assertionData, isRepeatedRunError, stepFailureData, isRepeatedStepFailureMessage, networkCardData, isNetworkCaptureNotice, runNotice, hasNearbyAssertionCard, isAssistantAssertionSummary, isDuplicateAssertionLine, isHiddenExecutionLogEvent, runSummaryData, runSummaryCounts, stepCompletionData, stepCompletionReasonTooltip, } from "./run-log-model.js";
+import { buildRunReportSections, instructionActivities, capitalizeReportLine, cloudProviderId, cloudProviderLabel, cloudStatus, } from "./run-report-sections.js";
 import { LOADMILL_MARK_PATHS } from "../../brand/loadmill-mark.js";
 // ---------- text / value formatting (mirrors the Desktop App) ----------
 function escapeHtml(value) {
@@ -36,14 +36,14 @@ function formatRunTimestamp(iso) {
     const parsed = Date.parse(iso);
     if (!Number.isFinite(parsed))
         return "—";
-    return new Date(parsed).toLocaleString("en-US");
+    return new Date(parsed).toLocaleString("en-US", { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit" });
 }
 function formatRunDuration(durationSeconds) {
     if (durationSeconds === null || durationSeconds === undefined || !Number.isFinite(durationSeconds)) {
         return "—";
     }
     if (durationSeconds < 60)
-        return `${durationSeconds.toFixed(1)}s`;
+        return `${Math.round(durationSeconds)}s`;
     const wholeSeconds = Math.floor(durationSeconds);
     const minutes = Math.floor(wholeSeconds / 60);
     const seconds = wholeSeconds % 60;
@@ -56,9 +56,9 @@ function formatRunDuration(durationSeconds) {
 function runStatusLabel(status) {
     switch (status) {
         case "pass":
-            return "Pass";
+            return "Passed";
         case "fail":
-            return "Fail";
+            return "Failed";
         case "error":
             return "Error";
         case "stopped":
@@ -80,11 +80,20 @@ function runStatusLabel(status) {
 // 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 hasSummary = base.some((event) => runSummaryData(event));
     const filtered = base.filter((event, idx, items) => {
+        if (hasSummary && event.eventType !== "run_finished" && ["system", "info", "success"].includes(event.kind) && /^(Test completed|Duration:|Steps:|Assertions:|Retries:)/.test(event.text.trimStart()))
+            return false;
+        if (["system", "info"].includes(event.kind) && /^(Loading test:|Loaded \d+ instructions|Connecting to )/.test(event.text.trimStart()))
+            return false;
         if (isHiddenExecutionLogEvent(event))
             return false;
+        if (event.kind !== "user" && event.eventType !== "instruction_started" && event.text.startsWith("Running Loadmill flow: "))
+            return false;
         if (isAssistantAssertionSummary(event) && hasNearbyAssertionCard(items, idx))
             return false;
+        if (isRepeatedStepFailureMessage(items, idx))
+            return false;
         if (event.eventType === "input_request")
             return false;
         return true;
@@ -108,7 +117,7 @@ function screenshotImg(event, shots) {
         return "";
     const index = shots.length + 1;
     shots.push({ index, url, event });
-    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>`;
+    return `<a class="dc-shot-link"${url.startsWith("data:") ? "" : ' data-remote-image'} href="#dc-shot-${index}" aria-label="Open screenshot ${index}"><img class="dc-shot" src="${escapeHtml(url)}" alt="Screenshot ${index}" /></a>`;
 }
 function icon(name, shapes) {
     return `<svg class="dc-icon" data-icon="${name}" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${shapes}</svg>`;
@@ -118,6 +127,18 @@ function loadmillIcon() {
     return `<svg class="dc-icon" data-icon="loadmill-mark" aria-hidden="true" viewBox="0 0 1035 1035">${paths}</svg>`;
 }
 const ICONS = {
+    assertion: icon("shield-check", `<path d="M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11Z"/><path d="m9 12 2 2 4-4"/>`),
+    triangleAlert: icon("triangle-alert", `<path d="m10.3 3.9-8.1 14a2 2 0 0 0 1.7 3h16.2a2 2 0 0 0 1.7-3l-8.1-14a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4m0 4h.01"/>`),
+    check: icon("check", `<path d="m5 12 4 4L19 6"/>`),
+    alert: icon("alert", `<circle cx="12" cy="12" r="9"/><path d="M12 8v4m0 4h.01"/>`),
+    clipboard: icon("clipboard", `<rect x="5" y="4" width="14" height="18" rx="2"/><rect x="9" y="2" width="6" height="4" rx="1"/><path d="m9 13 2 2 4-4"/>`),
+    calendar: icon("calendar", `<rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 11h18"/>`),
+    clock: icon("clock", `<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>`),
+    folder: icon("folder", `<path d="M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>`),
+    device: icon("device", `<rect x="2" y="3" width="15" height="12" rx="2"/><path d="M7 19h5m-3-4v4"/><rect x="17" y="11" width="5" height="10" rx="1"/>`),
+    chevron: icon("chevron", `<path d="m9 6 6 6-6 6"/>`),
+    info: icon("info", `<circle cx="12" cy="12" r="9"/><path d="M12 11v6m0-10h.01"/>`),
+    expand: icon("expand", `<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>`),
     network: icon("network", `<rect x="9" y="2" width="6" height="6" rx="1"/><path d="M12 8v4M5 16v-4h14v4"/><rect x="2" y="16" width="6" height="6" rx="1"/><rect x="16" y="16" width="6" height="6" rx="1"/>`),
     arrowUpDown: icon("arrow-up-down", `<path d="m21 16-4 4-4-4"/><path d="M17 20V4"/><path d="m3 8 4-4 4 4"/><path d="M7 4v16"/>`),
     bookOpen: icon("book-open", `<path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>`),
@@ -167,33 +188,19 @@ function textIcon(value) {
     return `<span class="dc-icon" aria-hidden="true">${value}</span>`;
 }
 // ---------- per-event timeline rendering (mirrors ExecutionLogItem.tsx) ----------
-function renderEvent(event, shots) {
+function renderEvent(event, shots, events) {
     if (isHiddenExecutionLogEvent(event))
         return "";
+    if (event.eventType === "tool_call" && event.text.startsWith("Validating assertion: "))
+        return "";
+    const notice = runNotice(event);
+    if (notice)
+        return `<div role="status" class="dc-notice${notice.warning ? " dc-notice-warning" : ""}">${notice.warning ? ICONS.triangleAlert : ICONS.network}<div><p>${escapeHtml(notice.message)}</p>${notice.details ? `<details><summary>Error details</summary><pre>${escapeHtml(notice.details)}</pre></details>` : ""}</div></div>`;
+    if (isNetworkCaptureNotice(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">${textIcon(summary.status === "passed" ? "✓" : "!")}${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">${renderLinkedText(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>`;
+        return summary.status !== "stopped" && summary.error && !isRepeatedRunError(summary.error, events) ? `<div class="dc-line dc-error">${renderLinkedText(summary.error)}</div>` : "";
     }
     const isAssistant = event.eventType === "assistant_message" || event.kind === "assistant";
     if (isAssistant) {
@@ -210,13 +217,14 @@ function renderEvent(event, shots) {
     if (event.eventType === "reasoning" || event.kind === "reasoning") {
         return renderAgentText(event.text);
     }
-    const assertion = assertionData(event);
+    const stepFailure = stepFailureData(event);
+    const assertion = assertionData(event) || stepFailure;
     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">${textIcon(assertion.passed ? "✓" : "!")}${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>` : ""}
+        return `<div${stepFailure ? ' role="alert"' : ""} class="dc-card dc-${cls}">
+  <div class="dc-card-head"><span class="dc-card-title">${assertion.passed ? ICONS.check : ICONS.triangleAlert}${stepFailure?.title || (assertion.passed ? "Assertion Passed" : "Assertion Failed")}${img}</span></div>
+  <div class="dc-assertion-fields"><p><span class="dc-expected-label">Expected:</span> ${escapeHtml(assertion.assertion)}</p>${assertion.details ? renderAgentText(assertion.details) : ""}</div>
 </div>`;
     }
     if (event.eventType === "retry") {
@@ -225,9 +233,6 @@ function renderEvent(event, shots) {
     if (event.kind === "action") {
         return `<div class="dc-line dc-action">${actionIcon(event)}<span>${escapeHtml(event.text)}</span>${screenshotImg(event, shots)}</div>`;
     }
-    if (isNetworkCaptureStarted(event)) {
-        return `<div class="dc-line">${ICONS.network}<span>Network capture started</span></div>`;
-    }
     if (event.eventType === "screenshot_captured") {
         return `<div class="dc-line">${ICONS.camera}<span>${escapeHtml(event.text)}</span>${screenshotImg(event, shots)}</div>`;
     }
@@ -245,14 +250,14 @@ function renderAppContextCard(event) {
   <pre>${escapeHtml(text)}</pre>
 </details>`;
 }
-function renderCloudCard(events) {
+function renderCloudCard(events, nested = false) {
     const label = cloudProviderLabel(events.map(cloudProviderId).find(Boolean));
     const status = cloudStatus(events);
     const lines = events
         .filter((event) => event.payload?.event !== "cloud.app.check" && event.payload?.event !== "cloud.app.reupload_needed")
         .map((event) => capitalizeReportLine(event.text))
         .filter((text, index, all) => text !== all[index - 1]);
-    return `<details class="dc-special dc-cloud"${status === "issue" || status === "starting" ? " open" : ""}>
+    return `<details class="dc-special dc-cloud"${nested || status === "issue" || status === "starting" ? " open" : ""}>
   <summary><span class="dc-special-title">${ICONS.cloud}${escapeHtml(label)}</span><span class="dc-pill dc-pill-${status}">${status}</span></summary>
   <div class="dc-special-body">${lines.map((line) => `<div>${renderLinkedText(line)}</div>`).join("")}</div>
 </details>`;
@@ -286,17 +291,17 @@ function renderLoadmillCard(events) {
     const failed = events.some((event) => /\[Loadmill\]\s*FAILED|^Error:/i.test(event.text));
     const passed = !failed && events.some((event) => /\bpassed\b/i.test(event.text));
     const status = failed ? "failed" : passed ? "passed" : "running";
-    return `<details class="dc-special dc-loadmill"${passed ? "" : " open"}>
-  <summary><span class="dc-special-title">${ICONS.loadmill}Loadmill Flow</span><span class="dc-pill dc-pill-${status}">${status}</span></summary>
+    return `<details class="dc-special dc-loadmill dc-loadmill-${status}" open>
+  <summary aria-label="Loadmill Flow: ${status}"><span class="dc-special-title">${ICONS.loadmill}Loadmill Flow</span></summary>
   <div class="dc-special-body">${renderedLines.join("")}</div>
 </details>`;
 }
-function renderNetworkCard(lines) {
+function renderNetworkCard(lines, nested = false) {
     const { outcome, question, filters, answer } = networkCardData(lines);
     const resultHtml = answer.structured
         ? `<details class="dc-network-data"><summary>Response data</summary><pre>${escapeHtml(answer.text)}</pre></details>`
         : `<div class="dc-network-answer">${renderLinkedText(answer.text)}</div>`;
-    return `<details class="dc-special dc-network">
+    return `<details class="dc-special dc-network"${nested ? " open" : ""}>
   <summary><span class="dc-special-title">${ICONS.network}Network query</span><span>${escapeHtml(outcome)}</span></summary>
   <div class="dc-special-body">
     <dl class="dc-network-filters">${filters.map(({ label, value }) => `<dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd>`).join("")}</dl>
@@ -306,20 +311,55 @@ function renderNetworkCard(lines) {
 </details>`;
 }
 function renderTimeline(events, shots, warnings = []) {
-    const html = buildRunReportSections(buildVisibleEvents(events))
-        .map((item) => {
+    const stopped = events.some((event) => runSummaryData(event)?.status === "stopped");
+    const visible = buildVisibleEvents(events).filter((event) => !stopped || event.eventType === "run_finished" || !/^(Stopping test execution|Stopped by user)/.test(event.text.trim()));
+    const renderItems = (items, nested) => buildRunReportSections(items).map((item) => {
         if (item.kind === "app-context")
             return renderAppContextCard(item.line);
         if (item.kind === "cloud")
-            return renderCloudCard(item.lines);
+            return renderCloudCard(item.lines, nested);
         if (item.kind === "network")
-            return renderNetworkCard(item.lines);
+            return renderNetworkCard(item.lines, nested);
         if (item.kind === "loadmill")
             return renderLoadmillCard(item.lines);
-        return renderEvent(item.line, shots);
-    })
-        .filter(Boolean)
-        .join("\n");
+        return renderEvent(item.line, shots, visible);
+    }).filter(Boolean).join("\n");
+    const groups = [];
+    let current = [];
+    let instruction = null;
+    const flush = () => { if (instruction || current.length)
+        groups.push({ instruction, items: current }); current = []; };
+    for (const event of visible) {
+        if (event.eventType === "instruction_started" || event.kind === "user" || event.eventType === "run_finished") {
+            flush();
+            instruction = event.eventType === "run_finished" ? null : event;
+            if (instruction)
+                continue;
+        }
+        current.push(event);
+    }
+    flush();
+    const result = visible.map(runSummaryData).find(Boolean);
+    const outcome = result?.status;
+    const passed = outcome === "passed";
+    const instructions = groups.map((group) => group.instruction).filter(Boolean);
+    const lastInstruction = instructions.at(-1);
+    const html = groups.map(({ instruction, items }) => {
+        const content = renderItems(items, Boolean(instruction));
+        if (!instruction)
+            return content;
+        const failed = items.some((event) => event.kind === "error" || assertionData(event)?.passed === false) || (instruction === lastInstruction && (outcome === "failed" || outcome === "errored"));
+        const confirmedByCount = (instruction.instructionIndex ?? instructions.indexOf(instruction)) < (result?.instructionsCompleted ?? 0);
+        const complete = !failed && (instruction !== lastInstruction || confirmedByCount || passed || items.some((event) => stepCompletionData(event)));
+        const interrupted = stopped && !complete && !failed && instruction === lastInstruction;
+        const status = failed ? "Needs attention" : complete ? "Completed" : interrupted ? "Stopped" : "Not confirmed";
+        const end = items.find((event) => stepCompletionData(event)) ?? instructions[instructions.indexOf(instruction) + 1] ?? visible.find((event) => event.eventType === "run_finished") ?? items[items.length - 1];
+        const seconds = (Date.parse(end?.ts) - Date.parse(instruction.ts)) / 1000;
+        const duration = Number.isFinite(seconds) && seconds >= 0 ? formatRunDuration(seconds) : "";
+        const activities = instructionActivities(items);
+        const activityIcons = activities.length ? `<span class="dc-instruction-activities">${activities.map(({ type, label }) => `<span class="dc-activity dc-activity-${type}" title="${label}" aria-label="${label}">${ICONS[type]}</span>`).join("")}</span>` : "";
+        return `<details class="dc-instruction"${(failed && !passed) || interrupted ? " open" : ""}><summary><span class="dc-instruction-status ${failed ? "dc-error" : complete ? "dc-complete" : interrupted ? "dc-stopped" : ""}" aria-label="${status}">${failed || interrupted ? ICONS.alert : complete ? ICONS.check : "○"}</span><span class="dc-instruction-label">${escapeHtml(instruction.text)}<span class="dc-instruction-duration">${interrupted ? "Stopped after " : complete ? "Completed in " : "Elapsed "}${escapeHtml(duration)}${activityIcons}<span class="dc-instruction-chevron">${ICONS.chevron}</span></span></span><time class="dc-instruction-time">${escapeHtml(Number.isFinite(Date.parse(instruction.ts)) ? new Date(instruction.ts).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }) : "")}</time></summary><div class="dc-instruction-actions">${content || '<div class="dc-empty">No recorded actions</div>'}</div></details>`;
+    }).join("\n");
     if (html)
         return html;
     const message = warnings.find((warning) => warning.toLowerCase().includes("event log not available")) ?? "No event timeline available for this report.";
@@ -339,7 +379,7 @@ function renderLightboxes(shots) {
         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}">
+        return `<div class="dc-lightbox" id="dc-shot-${shot.index}"${shot.url.startsWith("data:") ? "" : ' data-remote-image'}>
   <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}" />
@@ -349,21 +389,102 @@ function renderLightboxes(shots) {
     })
         .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 "";
+// Enhance native details and screenshot links for downloads. Hosted reports omit
+// this script and retain inline details and CSS lightboxes without JavaScript.
+function renderInteractionScript(count) {
     return `<script>
 (function () {
+  document.querySelectorAll('.dc-run-details, .dc-context').forEach(function(details, index) {
+    var isContext = details.classList.contains('dc-context');
+    var title = isContext ? 'App context' : 'Run details';
+    var trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'dc-dialog-trigger';
+    trigger.innerHTML = details.querySelector('summary').innerHTML;
+    trigger.setAttribute('aria-haspopup', 'dialog');
+    var dialog = document.createElement('dialog');
+    dialog.className = 'dc-dialog';
+    dialog.setAttribute('aria-labelledby', 'dc-dialog-title-' + index);
+    var header = document.createElement('div');
+    header.className = 'dc-dialog-header';
+    var heading = document.createElement('h2');
+    heading.id = 'dc-dialog-title-' + index;
+    heading.textContent = title;
+    var close = document.createElement('button');
+    close.type = 'button';
+    close.textContent = '×';
+    close.setAttribute('aria-label', 'Close ' + title.toLowerCase());
+    header.append(heading, close);
+    dialog.append(header);
+    Array.from(details.children).forEach(function(child) {
+      if (child.tagName !== 'SUMMARY') dialog.append(child);
+    });
+    var childReport = details.closest('.dc-child-block');
+    if (isContext) {
+      var destination = childReport ? childReport.querySelector('.dc-child-head') : document.querySelector('.dc-summary');
+      if (childReport) destination.append(trigger);
+      else {
+        trigger.style.marginLeft = 'auto';
+        var runDetails = destination.querySelector('.dc-run-details');
+        if (runDetails) runDetails.style.marginLeft = '0';
+        destination.insertBefore(trigger, runDetails);
+      }
+      details.remove();
+    } else {
+      trigger.classList.add('dc-run-details');
+      details.replaceWith(trigger);
+    }
+    document.body.append(dialog);
+    trigger.addEventListener('click', function() { dialog.showModal(); });
+    close.addEventListener('click', function() { dialog.close(); });
+    dialog.addEventListener('click', function(event) {
+      var rect = dialog.getBoundingClientRect();
+      if (event.target === dialog && (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom)) dialog.close();
+    });
+  });
   var count = ${count};
+  var panelIndex = count;
+  var panel = document.getElementById('dc-panel-image');
+  function select(index) {
+    panelIndex = Math.max(1, Math.min(count, index));
+    var source = document.querySelector('#dc-shot-' + panelIndex + ' img');
+    panel.src = source.src;
+    document.getElementById('dc-panel-open').href = '#dc-shot-' + panelIndex;
+    document.getElementById('dc-panel-expand').href = '#dc-shot-' + panelIndex;
+    document.getElementById('dc-panel-position').value = panelIndex;
+    document.getElementById('dc-panel-count').textContent = panelIndex + ' / ' + count;
+    document.querySelectorAll('[data-shot]').forEach(function(button) {
+      button.disabled = ['first', 'previous'].includes(button.dataset.shot) ? panelIndex === 1 : panelIndex === count;
+    });
+    var thumb = document.querySelector('.dc-shot-link[href="#dc-shot-' + panelIndex + '"]');
+    var group = thumb && thumb.closest('.dc-instruction');
+    document.getElementById('dc-panel-caption').textContent = group ? group.querySelector('summary > span:nth-child(2)').textContent : 'Screenshot ' + panelIndex;
+  }
+  if (panel) {
+    document.querySelectorAll('.dc-shot-link').forEach(function(thumb) {
+      thumb.addEventListener('click', function(event) {
+        event.preventDefault();
+        select(Number(thumb.getAttribute('href').replace('#dc-shot-', '')));
+      });
+    });
+    select(count);
+    document.getElementById('dc-panel-position').addEventListener('input', function(event) { select(Number(event.target.value)); });
+    document.querySelectorAll('[data-shot]').forEach(function(button) {
+      button.addEventListener('click', function() { select(button.dataset.shot === 'first' ? 1 : button.dataset.shot === 'last' ? count : panelIndex + (button.dataset.shot === 'next' ? 1 : -1)); });
+    });
+  }
   function current() {
     var match = /^#dc-shot-(\\d+)$/.exec(location.hash);
     return match ? parseInt(match[1], 10) : 0;
   }
   document.addEventListener('keydown', function (event) {
+    if (document.querySelector('dialog[open]')) return;
     var n = current();
-    if (!n) return;
+    if (event.target.closest('input, textarea, select, [contenteditable="true"]')) return;
+    if (!n) {
+      if (panel && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) { event.preventDefault(); select(panelIndex + (event.key === 'ArrowRight' ? 1 : -1)); }
+      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); }
@@ -371,24 +492,36 @@ function renderLightboxScript(count) {
 })();
 </script>`;
 }
+function renderScreenshotPanel(shots) {
+    if (!shots.length)
+        return '<aside class="dc-screenshots"><div class="dc-empty">No screenshots in this report</div></aside>';
+    return `<aside class="dc-screenshots" aria-label="Device screenshots"><div class="dc-panel-toolbar"><a id="dc-panel-expand" href="#dc-shot-${shots.length}" aria-label="Expand screenshot">${ICONS.expand}</a></div><a id="dc-panel-open" href="#dc-shot-${shots.length}"><img id="dc-panel-image" alt="Device screenshot" /></a><p id="dc-panel-caption"></p><input id="dc-panel-position" type="range" min="1" max="${shots.length}" value="${shots.length}" aria-label="Screenshot position" /><nav><button data-shot="first" aria-label="First screenshot">${ICONS.chevron}${ICONS.chevron}</button><button data-shot="previous" aria-label="Previous screenshot">${ICONS.chevron}</button><span id="dc-panel-count"></span><button data-shot="next" aria-label="Next screenshot">${ICONS.chevron}</button><button data-shot="last" aria-label="Last screenshot">${ICONS.chevron}${ICONS.chevron}</button></nav><noscript><a href="#dc-shot-1">Browse screenshots</a></noscript></aside>`;
+}
 // ---------- 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>`;
+function renderSummaryCard(model, showRunDetails) {
+    const recorded = (key) => (model.events ?? []).map((event) => event.payload?.[key]).find((value) => ["string", "number", "boolean"].includes(typeof value));
+    const result = runSummaryCounts(model.childTests?.length ? model.childTests.flatMap((child) => child.events ?? []) : model.events ?? []);
+    const device = recorded("deviceName") ?? "Device not recorded";
     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)}%`)}
+  <span title="Launched On">${ICONS.calendar}${escapeHtml(formatRunTimestamp(model.timestamp))}</span>
+  <span title="Duration">${ICONS.clock}${escapeHtml(formatRunDuration(model.durationSeconds))}</span>
+  <span title="Project">${ICONS.folder}${escapeHtml(model.suiteName ?? "—")}</span>
+  <span title="Recorded device">${ICONS.device}${escapeHtml(device)}</span>
+  ${(model.events ?? []).some(isNetworkCaptureNotice) ? `<span title="Network capture enabled for this run">${ICONS.network}Network capture</span>` : ""}
+  ${showRunDetails ? `<details class="dc-run-details"><summary>${ICONS.info}Run details</summary><div class="dc-run-settings">
+    ${summaryRow("Model", escapeHtml(recorded("model") ?? recorded("cuaModel") ?? "Not recorded"))}
+    ${summaryRow("Platform", escapeHtml(recorded("platform") ?? "Not recorded"))}
+    ${result ? summaryRow("Steps", `${result.instructionsCompleted ?? 0}/${result.instructionsTotal ?? 0}`) + summaryRow("Assertions", `${result.assertionsPassed ?? 0}/${(result.assertionsPassed ?? 0) + (result.assertionsFailed ?? 0)} passed`) + summaryRow("Retries", String(result.retries ?? 0)) : ""}
+    ${model.childTests?.length || model.testCases > 1 ? summaryRow("Tests passed", `${Math.round(model.successRate * model.testCases / 100)}/${model.testCases}`) : ""}
+  </div></details>` : ""}
 </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>`)
+        .map((child, index) => `<a href="#dc-test-${index}" 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></a>`)
         .join("\n");
     return `<div class="dc-tests"><div class="dc-tests-title">Tests</div>${rows}</div>`;
 }
@@ -397,23 +530,32 @@ 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-wrap { width: 100%; margin: 0 auto; background: #fff; min-height: 100vh; }
+.dc-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; background: #f7f8ff; }
+.dc-title { font-size: 16px; font-weight: 500; color: #334155; }
+.dc-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; color: #94a3b8; font-size: 12px; padding: 8px 20px 14px; background: #f7f8ff; border-bottom: 1px solid #d8e2f4; }
+.dc-notice { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; border-radius: 8px; padding: 8px 12px; font-size: 12px; line-height: 20px; background: #f8fafc; color: #64748b; }
+.dc-notice-warning { background: #fffbeb; color: #92400e; }
+.dc-notice > svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; }
+.dc-notice > div { min-width: 0; }
+.dc-notice p { margin: 0; }
+.dc-notice details { margin-top: 4px; font-size: 11px; }
+.dc-notice summary { cursor: pointer; width: fit-content; }
+.dc-notice pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; font-size: 11px; }
+.dc-run-details { margin-left: auto; }
+.dc-run-details > summary { cursor: pointer; list-style: none; color: #64748b; }
+.dc-run-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
 .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-row { text-decoration: none; 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: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
+.dc-timeline { background: #fff; padding: 24px 20px; display: flex; flex-direction: column; gap: 6px; }
 .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-line { display: flex; align-items: center; gap: 8px; color: #475569; }
 .dc-agent-line { align-items: flex-start; }
 .dc-agent-line .dc-icon { margin-top: 4px; }
@@ -425,7 +567,7 @@ body { margin: 0; background: #f1f5f9; color: #0f172a; font-family: -apple-syste
 .dc-error { color: #b91c1c; }
 .dc-warning { color: #b45309; }
 .dc-shot-link { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 34px; min-height: 36px; margin-left: 8px; vertical-align: middle; }
-.dc-shot-link::before, .dc-lightbox:target::before { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid #cbd5e1; border-top-color: #475569; border-radius: 50%; animation: dc-spin .7s linear infinite; }
+.dc-shot-link[data-remote-image]::before, .dc-lightbox[data-remote-image]:target::before { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid #cbd5e1; border-top-color: #475569; border-radius: 50%; animation: dc-spin .7s linear infinite; }
 .dc-shot { position: relative; z-index: 1; 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); }
@@ -440,20 +582,26 @@ body { margin: 0; background: #f1f5f9; color: #0f172a; font-family: -apple-syste
 .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; gap: 6px; }
+.dc-card-title > .dc-icon { color: inherit; width: 16px; height: 16px; }
 .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-card-error { margin-top: 6px; font-size: 13px; }
+.dc-assertion-fields { margin-top: 8px; font-size: 13px; line-height: 20px; }
+.dc-assertion-fields p { margin: 0; }
+.dc-assertion-fields .dc-agent-line { margin-top: 6px; }
+.dc-expected-label { font-weight: 600; }
+.dc-fail .dc-assertion-fields .dc-agent-line { color: #be123c; }
+.dc-pass .dc-assertion-fields .dc-agent-line { color: #047857; }
 .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 { display: inline-flex; width: fit-content; border: 1px solid; border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
+.dc-pill-pass, .dc-pill-passed { border-color: #6ee7b7; background: #ecfdf5; color: #047857; }
+.dc-pill-fail, .dc-pill-failed { border-color: #fda4af; background: #fff1f2; 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; }
-.dc-pill-ready, .dc-pill-passed { border-color: #6ee7b7; background: #d1fae5; color: #047857; }
-.dc-pill-issue, .dc-pill-failed { border-color: #fda4af; background: #ffe4e6; color: #be123c; }
+.dc-pill-ready, .dc-pill-passed { border-color: #6ee7b7; background: #ecfdf5; color: #047857; }
+.dc-pill-issue, .dc-pill-failed { border-color: #fda4af; background: #fff1f2; color: #be123c; }
 .dc-pill-ended { border-color: #cbd5e1; background: #f1f5f9; color: #334155; }
 .dc-pill-starting { border-color: #a5b4fc; background: #e0e7ff; color: #4338ca; }
 .dc-pill-running { border-color: #7dd3fc; background: #e0f2fe; color: #0369a1; }
@@ -464,7 +612,7 @@ body { margin: 0; background: #f1f5f9; color: #0f172a; font-family: -apple-syste
 .dc-special[open] > summary::before { transform: rotate(90deg); }
 .dc-special-title { display: inline-flex; flex: 1; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
 .dc-special-body { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; color: #334155; }
-.dc-context { border-color: #ddd6fe; background: #f5f3ff; color: #4c1d95; }
+.dc-context { border-color: #ddd6fe; background: #f5f3ff; color: #4c1d95; margin-bottom: 12px; }
 .dc-context pre { margin: 10px 0 0; border: 1px solid #ede9fe; border-radius: 8px; background: rgba(255,255,255,.75); padding: 8px 10px; color: #334155; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
 .dc-cloud { border-color: #c7d2fe; background: #eef2ff; color: #312e81; }
 .dc-network { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@@ -478,7 +626,64 @@ body { margin: 0; background: #f1f5f9; color: #0f172a; font-family: -apple-syste
 .dc-network-data > summary { display: list-item; list-style-position: inside; cursor: pointer; }
 .dc-network-data pre { max-height: 288px; overflow: auto; white-space: pre-wrap; font-size: 12px; }
 .dc-network, .dc-loadmill { border-color: #bae6fd; background: #f0f9ff; color: #075985; }
+.dc-loadmill .dc-special-title { color: #075985; }
+.dc-loadmill-passed { border-color: #a7f3d0; background: #ecfdf5; color: #064e3b; }
+.dc-loadmill-failed { border-color: #fecdd3; background: #fff1f2; color: #881337; }
 .dc-empty { color: #64748b; }
+.dc-report-layout { display: flex; align-items: stretch; }
+.dc-report-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.dc-screenshots { position: sticky; top: 0; width: 32%; min-width: 210px; max-width: none; height: calc(100vh - 100px); display: flex; flex-direction: column; align-items: stretch; padding: 16px 20px; background: #fafbff; border-left: 1px solid #e2e8f0; }
+#dc-panel-open { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 0 12px; }
+#dc-panel-image { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 8px; border: 1px solid #cbd5e1; box-shadow: 0 1px 2px #0f172a15; }
+.dc-screenshots nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #64748b; font-size: 12px; }
+.dc-screenshots button { border: 0; background: transparent; font-size: 24px; cursor: pointer; color: #475569; }
+.dc-screenshots button:disabled { opacity: .3; cursor: default; }
+#dc-panel-caption { font-size: 12px; color: #475569; margin: 20px 0 12px; }
+.dc-instruction { position: relative; padding: 0 0 10px 32px; }
+.dc-instruction:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 1px; background: #e2e8f0; }
+.dc-instruction > summary { display: flex; align-items: flex-start; gap: 10px; min-height: 24px; cursor: pointer; list-style: none; font-weight: 500; font-size: 14px; }
+.dc-instruction > summary::-webkit-details-marker { display: none; }
+.dc-instruction-status { position: absolute; left: 0; top: 1px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #f1f5f9; color: #94a3b8; }
+.dc-instruction-status .dc-icon { width: 13px; height: 13px; color: inherit; }
+.dc-instruction-status.dc-complete { color: #10b981; background: #ecfdf5; }
+.dc-instruction-status.dc-error { color: #f43f5e; background: #fff1f2; }
+.dc-instruction-status.dc-stopped { color: #f97316; background: #fff7ed; }
+.dc-instruction-duration, .dc-instruction-time { color: #94a3b8; font-size: 12px; font-weight: 400; white-space: nowrap; }
+.dc-instruction-label { min-width: 0; }
+.dc-instruction-duration { display: flex; align-items: center; gap: 6px; line-height: 20px; }
+.dc-instruction-time { margin-left: auto; line-height: 24px; }
+.dc-instruction-activities { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding-left: 8px; border-left: 1px solid #e2e8f0; }
+.dc-activity { display: inline-flex; }
+.dc-activity .dc-icon { width: 12px; height: 12px; color: inherit; overflow: visible; }
+.dc-activity-loadmill path { fill: none; stroke: currentColor; stroke-width: 86; stroke-linejoin: round; }
+.dc-instruction-chevron { display: inline-flex; }
+.dc-instruction[open] > summary .dc-instruction-chevron { transform: rotate(90deg); }
+.dc-instruction-actions { display: flex; flex-direction: column; gap: 12px; padding: 18px 0 8px; }
+.dc-header > .dc-icon { width: 18px; height: 18px; }
+.dc-summary > span, .dc-run-details > summary { display: inline-flex; align-items: center; gap: 7px; }
+.dc-summary .dc-icon { width: 15px; height: 15px; }
+.dc-run-details > summary::-webkit-details-marker { display: none; }
+.dc-panel-toolbar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
+.dc-panel-toolbar a { display: inline-flex; padding: 4px; color: #64748b; }
+#dc-panel-position { width: 100%; margin: 0 0 14px; accent-color: #64748b; height: 4px; cursor: pointer; }
+.dc-screenshots nav button { display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
+.dc-screenshots nav button .dc-icon { color: inherit; width: 14px; height: 14px; }
+.dc-screenshots nav button[data-shot="first"], .dc-screenshots nav button[data-shot="previous"] { transform: rotate(180deg); }
+.dc-screenshots nav button .dc-icon + .dc-icon { margin-left: -8px; }
+#dc-panel-count { flex: 1; text-align: center; }
+.dc-dialog-trigger { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 4px 8px; font: inherit; color: #64748b; cursor: pointer; border-radius: 4px; }
+.dc-dialog-trigger:hover { background: #f1f5f9; }
+.dc-dialog-trigger .dc-special-title { font-size: inherit; font-weight: 400; }
+.dc-child-head { display: flex; align-items: center; justify-content: space-between; }
+.dc-dialog { width: min(640px, calc(100vw - 40px)); max-height: 80vh; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; color: #334155; box-shadow: 0 24px 80px #0f172a30; }
+.dc-dialog::backdrop { background: #0f172a66; }
+.dc-dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+.dc-dialog-header h2 { margin: 0; font-size: 16px; font-weight: 600; }
+.dc-dialog-header button { border: 0; background: transparent; color: #64748b; font-size: 24px; cursor: pointer; }
+.dc-dialog .dc-run-settings { border: 0; padding: 0; gap: 20px; }
+.dc-dialog pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
+@media (max-width: 650px) { .dc-report-layout { flex-direction: column; } .dc-screenshots { position: static; width: 100%; max-width: none; height: 420px; } .dc-timeline { padding: 12px; } .dc-instruction > summary { flex-wrap: wrap; } .dc-instruction-time { display: none; } }
+@media print { .dc-screenshots { display: none; } .dc-instruction::details-content { display: block; } }
 @keyframes dc-spin { to { transform: rotate(360deg); } }
 `.trim();
 // Keep the machine-readable evidence separate from the presentation. Image references
@@ -509,31 +714,30 @@ function renderAgentReport(model, shots) {
     return `<pre hidden id="agent-report" data-schema-version="1">${escapeHtml(json)}</pre>`;
 }
 // ---------- entry point ----------
-export function renderHtmlReport(model, { title, includeScripts = true } = {}) {
+export function renderHtmlReport(model, { title, includeScripts = true, showRunDetails = true } = {}) {
     const docTitle = title ?? `Run Report: ${model.testName ?? model.suiteName ?? "Test run"}`;
-    const heading = model.testName ?? model.suiteName ?? "Test run";
+    const heading = (model.testName ?? model.suiteName ?? "Test run").replace(/\.dcua$/i, "").split(/[\\/]/).pop();
     // 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, child.warnings)}</div>`)
+            .map((child, index) => `<div id="dc-test-${index}" class="dc-child-block"><div class="dc-child-head">${escapeHtml(child.testName.replace(/\.dcua$/i, ""))}</div>${renderTimeline(child.events, shots, child.warnings)}</div>`)
             .join("\n");
-        body = `${renderSummaryCard(model)}
-${renderTestsList(model.childTests)}
+        body = `${renderTestsList(model.childTests)}
 <div class="dc-timeline">
 ${children}
 </div>`;
     }
     else {
-        body = `${renderSummaryCard(model)}
-<div class="dc-timeline">
+        body = `<div class="dc-timeline">
 ${renderTimeline(model.events, shots, model.warnings)}
 </div>`;
     }
+    body = `<div class="dc-report-main">${body}</div>${includeScripts ? renderScreenshotPanel(shots) : ""}`;
     const lightboxes = renderLightboxes(shots);
-    const script = includeScripts ? renderLightboxScript(shots.length) : "";
+    const script = includeScripts ? renderInteractionScript(shots.length) : "";
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -548,8 +752,9 @@ ${STYLES}
 <!--email_off-->
 ${renderAgentReport(model, shots)}
 <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 class="dc-header">${ICONS.clipboard}<div class="dc-title">${escapeHtml(heading)}</div><span class="dc-pill dc-pill-${escapeHtml(model.status)}">${escapeHtml(runStatusLabel(model.status))}</span></div>
+${renderSummaryCard(model, showRunDetails)}
+<div class="dc-report-layout">${body}</div>
 </div>${lightboxes ? `\n${lightboxes}` : ""}${script ? `\n${script}` : ""}
 <!--/email_off-->
 </body>