ptywright 0.6.3 → 0.6.5

package/dist/{runner-RhWYhus1.mjs → runner-CB8OirHU.mjs}

@@ -843,6 +843,186 @@ function createAgentTemplateSpec(flavor) {
 	};
 }
 //#endregion
+//#region src/agent/report_theme_css.ts
+const TOKENS_LIGHT = `
+    --canvas: #f5f7fa;
+    --panel: #ffffff;
+    --raised: #fbfcfe;
+    --line: #e4e8ee;
+    --line-strong: #ccd3dd;
+    --ink: #131822;
+    --muted: #5a6473;
+    --faint: #8b95a3;
+    --accent: #0a7fd4;
+    --accent-ink: #ffffff;
+    --accent-soft: rgba(10, 127, 212, 0.12);
+    --pass: #18794e;
+    --pass-soft: rgba(24, 121, 78, 0.12);
+    --fail: #d12d4f;
+    --fail-soft: rgba(209, 45, 79, 0.1);
+    --changed: #ad6800;
+    --changed-soft: rgba(173, 104, 0, 0.12);
+    --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px -16px rgba(15, 23, 42, 0.24);`;
+const TOKENS_DARK = `
+    --canvas: #0a0e16;
+    --panel: #111824;
+    --raised: #18212f;
+    --line: rgba(148, 163, 184, 0.16);
+    --line-strong: rgba(148, 163, 184, 0.3);
+    --ink: #e7edf6;
+    --muted: #9aa7b8;
+    --faint: #687486;
+    --accent: #58b6ff;
+    --accent-ink: #04101d;
+    --accent-soft: rgba(88, 182, 255, 0.16);
+    --pass: #46cd7c;
+    --pass-soft: rgba(70, 205, 124, 0.16);
+    --fail: #ff6b81;
+    --fail-soft: rgba(255, 107, 129, 0.16);
+    --changed: #f5b440;
+    --changed-soft: rgba(245, 180, 64, 0.16);
+    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 48px -22px rgba(0, 0, 0, 0.7);`;
+/** Design tokens only (no component rules); reusable when a page needs just the palette. */
+function renderReportThemeTokens() {
+	return `    :root {
+    color-scheme: light dark;${TOKENS_LIGHT}
+    --radius: 14px;
+    --radius-sm: 9px;
+    --radius-xs: 6px;
+    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    }
+    @media (prefers-color-scheme: dark) {
+    :root {${TOKENS_DARK}
+    }
+    }
+    :root[data-theme="light"] {${TOKENS_LIGHT}
+    }
+    :root[data-theme="dark"] {${TOKENS_DARK}
+    }`;
+}
+/** Full shared sheet: tokens + reset + primitive components. */
+function renderReportThemeCss() {
+	return `${renderReportThemeTokens()}
+
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: var(--canvas);
+      color: var(--ink);
+      font-family: var(--font-sans);
+      font-size: 14px;
+      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+    }
+
+    /* Top status rail — a thin build-status bar coloured by the overall result. */
+    .rail {
+      position: sticky;
+      top: 0;
+      z-index: 30;
+      height: 3px;
+      background: var(--line-strong);
+    }
+    .rail.pass { background: linear-gradient(90deg, var(--pass), color-mix(in oklab, var(--pass) 55%, var(--accent))); }
+    .rail.fail { background: linear-gradient(90deg, var(--fail), color-mix(in oklab, var(--fail) 60%, var(--changed))); }
+
+    .shell {
+      width: min(1140px, 100% - 40px);
+      margin-inline: auto;
+      padding: 30px 0 64px;
+    }
+    @media (max-width: 640px) {
+      .shell { width: min(100% - 24px, 1140px); padding-top: 18px; }
+    }
+
+    h1 { margin: 0; font-size: 25px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 680; }
+    h2 { margin: 0; font-size: 14px; font-weight: 640; letter-spacing: 0.01em; color: var(--ink); }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    code, pre, .mono { font-family: var(--font-mono); }
+
+    /* Status line: a coloured dot + bold label (replaces fat pills). */
+    .statusline { display: inline-flex; align-items: center; gap: 8px; font-weight: 660; font-size: 13px; letter-spacing: 0.04em; }
+    .statusline .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px color-mix(in oklab, var(--muted) 22%, transparent); }
+    .statusline.pass { color: var(--pass); }
+    .statusline.pass .dot { background: var(--pass); box-shadow: 0 0 0 4px var(--pass-soft); }
+    .statusline.fail { color: var(--fail); }
+    .statusline.fail .dot { background: var(--fail); box-shadow: 0 0 0 4px var(--fail-soft); }
+
+    /* Tiny inline status dot for dense rows. */
+    .dot-sm { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
+    .dot-sm.pass { background: var(--pass); }
+    .dot-sm.fail { background: var(--fail); }
+
+    /* Chips: low-key metadata tags. */
+    .chip {
+      display: inline-flex; align-items: center; gap: 6px; min-height: 26px;
+      padding: 0 10px; border: 1px solid var(--line); border-radius: 999px;
+      background: var(--panel); color: var(--muted); font-size: 12px; white-space: nowrap;
+    }
+    .chip.mono { font-family: var(--font-mono); }
+    .chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+
+    /* Stat strip: compact metrics with tabular numerals + hairline dividers. */
+    .statstrip {
+      display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
+      border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--panel);
+    }
+    .statstrip .stat { padding: 12px 16px; border-left: 1px solid var(--line); }
+    .statstrip .stat:first-child { border-left: 0; }
+    .stat .num { display: block; font-size: 21px; font-weight: 680; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
+    .stat .lbl { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
+    .stat.pass .num { color: var(--pass); }
+    .stat.fail .num { color: var(--fail); }
+    @media (max-width: 560px) {
+      .statstrip { grid-auto-flow: row; grid-auto-columns: auto; }
+      .statstrip .stat { border-left: 0; border-top: 1px solid var(--line); }
+      .statstrip .stat:first-child { border-top: 0; }
+    }
+
+    /* Pass-rate meter: a segmented progress bar. */
+    .meter { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
+    .meter > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pass), color-mix(in oklab, var(--pass) 60%, var(--accent))); }
+    .meter.has-fail > i { background: linear-gradient(90deg, var(--fail), var(--changed)); }
+
+    /* Panel: the standard surface card. */
+    .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 18px; box-shadow: var(--shadow); }
+    .panel + .panel { margin-top: 16px; }
+    .panel > h2 { margin-bottom: 14px; }
+
+    /* Path display: muted parent dir (middle-ellipsis) + bright basename. */
+    .path { display: inline-flex; max-width: 100%; min-width: 0; align-items: baseline; font-family: var(--font-mono); font-size: 12.5px; }
+    .path .dir { min-width: 0; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; }
+    .path .base { color: var(--muted); font-weight: 600; flex: none; }
+
+    /* Code block with one-click copy. */
+    .codeblock { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--canvas) 55%, var(--panel)); }
+    .codeblock > .lbl { display: block; padding: 8px 12px 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 640; }
+    .codeblock > pre { margin: 0; padding: 8px 44px 12px 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
+    .copybtn {
+      position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
+      display: inline-flex; align-items: center; justify-content: center;
+      border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--panel);
+      color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; transition: all 0.12s ease;
+    }
+    .copybtn:hover { color: var(--ink); border-color: var(--line-strong); }
+    .copybtn.copied { color: var(--pass); border-color: color-mix(in oklab, var(--pass) 45%, var(--line)); }
+
+    /* Action links / buttons. */
+    .btn {
+      display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 11px;
+      border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--panel);
+      color: var(--ink); font-size: 12.5px; font-weight: 560; cursor: pointer; transition: all 0.12s ease;
+    }
+    .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
+    .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
+    .btn.primary:hover { color: var(--accent-ink); filter: brightness(1.05); }
+
+    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }`;
+}
+//#endregion
 //#region src/agent/browser.ts
 async function launchAgentBrowser(args) {
 	let lastError;
@@ -1236,20 +1416,15 @@ function renderRawArtifactViewerCss() {
         width: max-content;
         min-height: 100%;
         margin: 0;
-        background:
-          linear-gradient(180deg, color-mix(in srgb, #162033 92%, black), #0c111d);
-        color: #e6edf7;
-        font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+        background: var(--panel);
+        color: var(--ink);
+        font-family: var(--font-mono);
         font-size: 13px;
         line-height: 1.45;
         overflow: visible;
         padding: 12px;
         white-space: pre;
       }
-      .viewer-page[data-theme="light"] .raw-artifact-text {
-        background: #ffffff;
-        color: #4c4f69;
-      }
 ${renderReportViewportPanCss()}`;
 }
 function renderRawArtifactViewerScript() {
@@ -1290,32 +1465,15 @@ function renderArtifactViewerFragment(args) {
 //#endregion
 //#region src/agent/report_artifact_viewer_shell_css.ts
 function renderArtifactViewerShellCss() {
-	return `      :root {
-        color-scheme: dark;
-        --bg: #080d16;
-        --panel: #0c111d;
-        --line: rgba(148, 163, 184, 0.26);
-        --ink: #e6edf7;
-        --muted: #91a0b8;
-        --focus: #79c0ff;
-        font-family:
-          ui-sans-serif,
-          system-ui,
-          -apple-system,
-          BlinkMacSystemFont,
-          "Segoe UI",
-          sans-serif;
-      }
-      * {
-        box-sizing: border-box;
-      }
+	return `${renderReportThemeCss()}
+
       html,
       body {
         width: 100%;
         height: 100%;
         margin: 0;
         overflow: hidden;
-        background: var(--bg);
+        background: var(--canvas);
         color: var(--ink);
       }
       .viewer-page {
@@ -1333,7 +1491,7 @@ function renderArtifactViewerShellCss() {
         align-items: center;
         min-width: 0;
         border-bottom: 1px solid var(--line);
-        background: color-mix(in srgb, var(--panel) 88%, black);
+        background: var(--raised);
         padding: 10px 12px;
       }
       .viewer-title {
@@ -1341,7 +1499,8 @@ function renderArtifactViewerShellCss() {
         margin-right: auto;
         overflow-wrap: anywhere;
         font-size: 14px;
-        font-weight: 700;
+        font-weight: 640;
+        color: var(--ink);
       }
       .viewer-link,
       .viewer-pill {
@@ -1354,10 +1513,15 @@ function renderArtifactViewerShellCss() {
         color: var(--muted);
         font-size: 12px;
         text-decoration: none;
+        transition: all 0.12s ease;
       }
       .viewer-link {
-        color: var(--focus);
-        font-weight: 700;
+        color: var(--accent);
+        font-weight: 640;
+      }
+      .viewer-link:hover {
+        border-color: var(--accent);
+        background: var(--accent-soft);
       }
       .viewer-stage {
         display: grid;
@@ -1368,9 +1532,7 @@ function renderArtifactViewerShellCss() {
         justify-items: center;
         align-content: start;
         overflow: hidden;
-        background:
-          radial-gradient(circle at top left, rgba(121, 192, 255, 0.1), transparent 32%),
-          #060a13;
+        background: var(--canvas);
         padding: 14px;
       }
       .viewer-viewport {
@@ -1381,10 +1543,10 @@ function renderArtifactViewerShellCss() {
         overflow: auto;
         overscroll-behavior: contain;
         border: 0;
-        border-radius: 8px;
-        background: #0c111d;
+        border-radius: var(--radius-sm);
+        background: var(--panel);
         outline: 1px solid var(--line);
-        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
+        box-shadow: var(--shadow);
       }
       .viewer-viewport[data-mobile="true"] {
         width: min(var(--config-viewport-width), 100%);
@@ -1397,22 +1559,7 @@ function renderArtifactViewerShellCss() {
         width: 100%;
         height: 100%;
         border: 0;
-        background: #0c111d;
-      }
-      .viewer-page[data-theme="light"] {
-        --bg: #f8fafc;
-        --panel: #ffffff;
-        --line: rgba(15, 23, 42, 0.14);
-        --ink: #0f172a;
-        --muted: #64748b;
-        --focus: #1e66f5;
-      }
-      .viewer-page[data-theme="light"] .viewer-stage {
-        background: #f8fafc;
-      }
-      .viewer-page[data-theme="light"] .viewer-viewport,
-      .viewer-page[data-theme="light"] .dom-viewer-frame {
-        background: #ffffff;
+        background: var(--panel);
       }
       @media (max-width: 720px) {
         .viewer-toolbar {
@@ -2171,36 +2318,114 @@ function readArtifactText(path) {
 //#endregion
 //#region src/agent/report_index_artifacts.ts
 function renderAgentReportArtifacts(args) {
-	return args.artifacts.map((artifact) => renderArtifactRow({
-		artifact,
+	if (args.artifacts.length === 0) return "<p>No artifacts were captured.</p>";
+	const byViewport = /* @__PURE__ */ new Map();
+	for (const artifact of args.artifacts) {
+		const list = byViewport.get(artifact.viewport) ?? [];
+		list.push(artifact);
+		byViewport.set(artifact.viewport, list);
+	}
+	return Array.from(byViewport.entries()).map(([viewport, artifacts]) => renderViewportGroup({
+		viewport,
+		artifacts,
 		artifactsDir: args.artifactsDir,
 		reportPath: args.reportPath
-	})).join("\n") || "<p>No artifacts were captured.</p>";
+	})).join("\n");
+}
+function renderViewportGroup(args) {
+	const { viewport, artifacts, artifactsDir, reportPath } = args;
+	const byName = /* @__PURE__ */ new Map();
+	for (const artifact of artifacts) {
+		const list = byName.get(artifact.name) ?? [];
+		list.push(artifact);
+		byName.set(artifact.name, list);
+	}
+	const artifactRows = Array.from(byName.entries()).map(([name, artifacts]) => renderArtifactGroup({
+		name,
+		artifacts,
+		artifactsDir,
+		reportPath
+	})).join("\n");
+	return `<div class="viewport-group">
+    <h3 class="viewport-title">${escapeHtml(viewport)}</h3>
+    <div class="viewport-artifacts">
+      ${artifactRows}
+    </div>
+  </div>`;
 }
-function renderArtifactRow(args) {
+function renderArtifactGroup(args) {
+	const { name, artifacts, artifactsDir, reportPath } = args;
+	const chips = artifacts.map((artifact) => {
+		const state = artifact.ok ? "pass" : "fail";
+		const viewerPath = artifactViewerPath(artifact);
+		return `<a href="${escapeAttribute(viewerPath ? relativeHref(reportPath, viewerPath, artifactsDir) : relativeHref(reportPath, artifact.path, artifactsDir))}" class="artifact-chip ${state}" title="${escapeHtml(artifact.kind)}">
+        ${escapeHtml(artifact.kind)}
+      </a>`;
+	}).join("");
+	const failedArtifact = artifacts.find((a) => !a.ok);
+	const detailView = failedArtifact ? renderFailedArtifactDetail({
+		artifact: failedArtifact,
+		artifactsDir,
+		reportPath
+	}) : "";
+	return `<div class="artifact-group">
+    <div class="artifact-group-header">
+      <span class="artifact-name">${escapeHtml(name)}</span>
+      <div class="artifact-chips">
+        ${chips}
+      </div>
+    </div>
+    ${detailView}
+  </div>`;
+}
+function renderFailedArtifactDetail(args) {
 	const { artifact, artifactsDir, reportPath } = args;
-	const state = artifact.ok ? "pass" : "fail";
-	const href = relativeHref(reportPath, artifact.path, artifactsDir);
+	const currentHref = relativeHref(reportPath, artifact.path, artifactsDir);
 	const baselineHref = artifact.baselinePath ? relativeHref(reportPath, artifact.baselinePath, artifactsDir) : "";
 	const diffHref = artifact.diffPath ? relativeHref(reportPath, artifact.diffPath, artifactsDir) : "";
-	const viewerPath = artifactViewerPath(artifact);
-	const viewerHref = viewerPath ? relativeHref(reportPath, viewerPath, artifactsDir) : "";
-	return `<article class="artifact">
-    <div class="artifact-summary">
-      <span class="badge ${state}">${state}</span>
-      <div class="artifact-meta">
-        <div class="artifact-links">
-          <a href="${escapeAttribute(viewerHref || href)}">${escapeHtml(artifact.kind)}</a>
-          ${viewerHref ? `<a href="${escapeAttribute(href)}">raw</a>` : ""}
-          ${baselineHref ? `<a href="${escapeAttribute(baselineHref)}">baseline</a>` : ""}
-          ${diffHref ? `<a href="${escapeAttribute(diffHref)}">diff</a>` : ""}
+	const isDom = artifact.kind === "dom";
+	const isScreenshot = artifact.kind === "screenshot";
+	if (isDom || isScreenshot) return `<div class="artifact-detail">
+      <div class="artifact-comparison">
+        ${baselineHref ? `<div class="artifact-preview">
+          <div class="artifact-preview-label">Baseline</div>
+          <div class="device-frame">
+            <iframe src="${escapeAttribute(baselineHref)}" loading="lazy" sandbox="allow-same-origin"></iframe>
+          </div>
+        </div>` : ""}
+        <div class="artifact-preview">
+          <div class="artifact-preview-label">Current</div>
+          <div class="device-frame ${artifact.ok ? "" : "failed"}">
+            <iframe src="${escapeAttribute(currentHref)}" loading="lazy" sandbox="allow-same-origin"></iframe>
+          </div>
         </div>
-      <div><code>${escapeHtml(artifact.viewport)} / ${escapeHtml(artifact.name)}</code></div>
-      ${artifact.error ? `<div><code>${escapeHtml(artifact.error)}</code></div>` : ""}
+        ${diffHref ? `<div class="artifact-preview">
+          <div class="artifact-preview-label">Diff</div>
+          <div class="device-frame diff">
+            <iframe src="${escapeAttribute(diffHref)}" loading="lazy" sandbox="allow-same-origin"></iframe>
+          </div>
+        </div>` : ""}
+      </div>
+      ${artifact.error ? `<div class="artifact-error">
+        <strong>Error:</strong> ${escapeHtml(artifact.error)}
+      </div>` : ""}
+      <div class="artifact-meta-row">
+        <code class="artifact-hash">${escapeHtml(artifact.hash ?? "")}</code>
       </div>
+    </div>`;
+	return `<div class="artifact-detail">
+    <div class="artifact-links">
+      <a href="${escapeAttribute(currentHref)}" class="btn">View Current</a>
+      ${baselineHref ? `<a href="${escapeAttribute(baselineHref)}" class="btn">View Baseline</a>` : ""}
+      ${diffHref ? `<a href="${escapeAttribute(diffHref)}" class="btn">View Diff</a>` : ""}
+    </div>
+    ${artifact.error ? `<div class="artifact-error">
+      <strong>Error:</strong> ${escapeHtml(artifact.error)}
+    </div>` : ""}
+    <div class="artifact-meta-row">
       <code class="artifact-hash">${escapeHtml(artifact.hash ?? "")}</code>
     </div>
-  </article>`;
+  </div>`;
 }
 //#endregion
 //#region src/agent/report_index_commands.ts
@@ -2213,107 +2438,223 @@ function renderAgentReportCommandBlock(label, argv) {
 //#endregion
 //#region src/agent/report_index_artifacts_css.ts
 function renderAgentReportArtifactsCss() {
-	return `      .artifacts {
-        display: grid;
-        gap: 14px;
+	return `      /* Viewport grouping */
+      .viewport-group {
+        margin-bottom: 32px;
+        min-width: 0;
       }
-      .artifact {
+      .viewport-group:last-child {
+        margin-bottom: 0;
+      }
+      .viewport-title {
+        margin: 0 0 16px;
+        font-size: 18px;
+        font-weight: 660;
+        color: var(--ink);
+        padding-bottom: 10px;
+        border-bottom: 2px solid var(--line);
+        overflow-wrap: break-word;
+        word-break: break-word;
+      }
+      .viewport-artifacts {
         display: grid;
-        gap: 12px;
+        gap: 16px;
+        min-width: 0;
+      }
+
+      /* Artifact group (by name: status, ready, etc.) */
+      .artifact-group {
         border: 1px solid var(--line);
-        border-radius: 8px;
-        padding: 12px;
+        border-radius: var(--radius);
         background: var(--panel);
+        overflow: hidden;
+        box-shadow: var(--shadow);
+        min-width: 0;
       }
-      .artifact-summary {
-        display: grid;
-        grid-template-columns: auto minmax(0, 1fr) minmax(96px, auto);
-        gap: 14px;
-        align-items: start;
+      .artifact-group-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 14px 16px;
+        background: var(--raised);
+        border-bottom: 1px solid var(--line);
+        min-width: 0;
       }
-      .artifact-meta {
-        display: grid;
-        gap: 4px;
+      .artifact-name {
+        font-weight: 640;
+        font-size: 14px;
+        color: var(--ink);
+        font-family: var(--font-mono);
+        overflow-wrap: break-word;
+        word-break: break-word;
         min-width: 0;
       }
-      .artifact-links {
+      .artifact-chips {
         display: flex;
         flex-wrap: wrap;
-        gap: 8px 12px;
+        gap: 6px;
+        flex-shrink: 0;
       }
-      .artifact a {
-        color: var(--focus);
-        font-weight: 700;
+      .artifact-chip {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 10px;
+        border-radius: var(--radius-xs);
+        font-size: 11px;
+        font-weight: 640;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
         text-decoration: none;
-      }
-      .artifact code {
+        transition: all 0.12s ease;
+        border: 1px solid var(--line);
+        background: var(--panel);
         color: var(--muted);
-        overflow-wrap: anywhere;
+        white-space: nowrap;
       }
-      .artifact-hash {
-        justify-self: end;
-        text-align: right;
+      .artifact-chip.pass {
+        border-color: var(--pass);
+        background: var(--pass-soft);
+        color: var(--pass);
       }
-      .badge {
-        justify-self: start;
-        border-radius: 999px;
-        padding: 5px 9px;
-        background: color-mix(in oklch, var(--line) 52%, transparent);
-        color: var(--muted);
+      .artifact-chip.fail {
+        border-color: var(--fail);
+        background: var(--fail-soft);
+        color: var(--fail);
+      }
+      .artifact-chip:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Artifact detail (for failed artifacts) */
+      .artifact-detail {
+        padding: 16px;
+        min-width: 0;
+      }
+      .artifact-comparison {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+        gap: 20px;
+        margin-bottom: 16px;
+        min-width: 0;
+      }
+      .artifact-preview {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        min-width: 0;
+      }
+      .artifact-preview-label {
         font-size: 12px;
-        font-weight: 700;
+        font-weight: 640;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        overflow-wrap: break-word;
+      }
+
+      /* Device frame for DOM/screenshot previews */
+      .device-frame {
+        position: relative;
+        border: 1px solid var(--line);
+        border-radius: var(--radius-sm);
+        background: var(--canvas);
+        overflow: hidden;
+        box-shadow: var(--shadow);
+        aspect-ratio: 3 / 4;
+        max-height: 600px;
+        min-width: 0;
       }
-      .badge.fail {
-        background: color-mix(in oklch, var(--bad) 12%, var(--panel));
-        color: var(--bad);
+      .device-frame.failed {
+        border-color: var(--fail);
+        box-shadow: 0 0 0 2px var(--fail-soft);
       }
-      .badge.pass {
-        background: color-mix(in oklch, var(--good) 12%, var(--panel));
-        color: var(--good);
+      .device-frame.diff {
+        border-color: var(--changed);
+        box-shadow: 0 0 0 2px var(--changed-soft);
+      }
+      .device-frame iframe {
+        width: 100%;
+        height: 100%;
+        border: 0;
+        display: block;
+      }
+
+      /* Artifact error message */
+      .artifact-error {
+        padding: 12px;
+        background: var(--fail-soft);
+        border: 1px solid color-mix(in oklab, var(--fail) 25%, var(--line));
+        border-radius: var(--radius-xs);
+        color: var(--fail);
+        font-size: 13px;
+        margin-bottom: 12px;
+        overflow-wrap: break-word;
+        word-break: break-word;
+        min-width: 0;
+      }
+      .artifact-error strong {
+        font-weight: 660;
+      }
+
+      /* Artifact metadata row */
+      .artifact-meta-row {
+        display: flex;
+        justify-content: flex-end;
+        padding-top: 12px;
+        border-top: 1px solid var(--line);
+        min-width: 0;
+      }
+      .artifact-hash {
+        font-family: var(--font-mono);
+        font-size: 11px;
+        color: var(--faint);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      /* Artifact links (for non-visual artifacts) */
+      .artifact-links {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 12px;
+        min-width: 0;
       }
+
+      /* Responsive adjustments */
       @media (max-width: 720px) {
-        .artifact-summary {
+        .artifact-comparison {
           grid-template-columns: 1fr;
         }
-        .artifact-hash {
-          justify-self: start;
-          text-align: left;
+        .artifact-group-header {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+        .device-frame {
+          max-height: 500px;
         }
       }`;
 }
 //#endregion
 //#region src/agent/report_index_base_css.ts
 function renderAgentReportBaseCss() {
-	return `      :root {
-        color-scheme: light;
-        --bg: oklch(97.5% 0.008 210);
-        --ink: oklch(19% 0.018 230);
-        --muted: oklch(48% 0.02 230);
-        --line: oklch(86% 0.018 230);
-        --panel: oklch(99% 0.006 210);
-        --good: oklch(55% 0.15 155);
-        --bad: oklch(58% 0.19 25);
-        --focus: oklch(55% 0.14 235);
-        font-family:
-          ui-sans-serif,
-          system-ui,
-          -apple-system,
-          BlinkMacSystemFont,
-          "Segoe UI",
-          sans-serif;
-      }
-      * { box-sizing: border-box; }
-      body {
-        margin: 0;
-        background: var(--bg);
-        color: var(--ink);
-      }
+	return `${renderReportThemeCss()}
+
       main {
         display: grid;
         gap: 24px;
         width: min(1180px, calc(100vw - 32px));
         margin: 0 auto;
         padding: 32px 0 48px;
+        min-width: 0;
+      }
+      main > * {
+        min-width: 0;
       }
       header {
         display: grid;
@@ -2322,27 +2663,43 @@ function renderAgentReportBaseCss() {
         align-items: start;
         border-bottom: 1px solid var(--line);
         padding-bottom: 24px;
+        min-width: 0;
+      }
+      header > * {
+        min-width: 0;
       }
       h1 {
         margin: 0;
         font-size: 28px;
         line-height: 1.15;
         letter-spacing: 0;
+        max-width: 100%;
+        overflow-wrap: anywhere;
       }
       h2 {
         margin: 0;
         font-size: 18px;
         line-height: 1.25;
+        overflow-wrap: anywhere;
+      }
+      h3 {
+        margin: 0;
+        font-size: 16px;
+        line-height: 1.3;
+        overflow-wrap: anywhere;
       }
       .meta {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         margin-top: 12px;
+        min-width: 0;
       }
       .pill,
       .status {
         display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
         min-height: 32px;
         align-items: center;
         border: 1px solid var(--line);
@@ -2350,25 +2707,44 @@ function renderAgentReportBaseCss() {
         padding: 0 12px;
         color: var(--muted);
         font-size: 13px;
+        overflow-wrap: anywhere;
       }
       .status {
         font-weight: 700;
       }
       .status.pass {
-        border-color: color-mix(in oklch, var(--good) 42%, var(--line));
-        color: var(--good);
+        border-color: var(--pass);
+        background: var(--pass-soft);
+        color: var(--pass);
       }
       .status.fail {
-        border-color: color-mix(in oklch, var(--bad) 44%, var(--line));
-        color: var(--bad);
+        border-color: var(--fail);
+        background: var(--fail-soft);
+        color: var(--fail);
       }
       .panel {
         display: grid;
         gap: 16px;
         border: 1px solid var(--line);
-        border-radius: 8px;
+        border-radius: var(--radius);
         background: var(--panel);
         padding: 18px;
+        min-width: 0;
+        box-shadow: var(--shadow);
+      }
+      .panel > * {
+        min-width: 0;
+      }
+      .panel p {
+        margin: 0;
+        max-width: 100%;
+        overflow-wrap: break-word;
+        word-break: break-word;
+      }
+      code {
+        font-family: var(--font-mono);
+        overflow-wrap: break-word;
+        word-break: break-all;
       }
       @media (max-width: 720px) {
         main {
@@ -2389,28 +2765,38 @@ function renderAgentReportCommandsCss() {
 	return `      .commands {
         display: grid;
         gap: 10px;
+        min-width: 0;
       }
       .command {
         display: grid;
         gap: 5px;
+        min-width: 0;
       }
       .command span {
         color: var(--muted);
         font-size: 13px;
         font-weight: 700;
+        overflow-wrap: anywhere;
       }
       .artifact code,
       pre {
         font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
       }
       pre {
-        overflow: auto;
+        overflow-x: auto;
+        overflow-y: hidden;
+        max-width: 100%;
+        min-width: 0;
+        width: 100%;
         margin: 0;
         border-radius: 8px;
         background: oklch(20% 0.015 230);
         color: oklch(92% 0.012 230);
         padding: 14px;
         line-height: 1.5;
+        white-space: pre;
+        word-wrap: normal;
+        word-break: normal;
       }`;
 }
 //#endregion
@@ -2418,25 +2804,29 @@ function renderAgentReportCommandsCss() {
 function renderAgentReportSummaryCss() {
 	return `      .summary {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
         gap: 12px;
+        min-width: 0;
       }
       .metric {
         border: 1px solid var(--line);
         border-radius: 8px;
         padding: 14px;
         background: color-mix(in oklch, var(--panel) 82%, var(--bg));
+        min-width: 0;
       }
       .metric strong {
         display: block;
         font-size: 24px;
         line-height: 1.1;
+        overflow-wrap: anywhere;
       }
       .metric span {
         display: block;
         margin-top: 4px;
         color: var(--muted);
         font-size: 13px;
+        overflow-wrap: anywhere;
       }`;
 }
 //#endregion
@@ -3409,4 +3799,4 @@ function defaultSpecNameForPath(path) {
 	return sanitizeArtifactName(basename(path, extname(path)));
 }
 //#endregion
-export { writeAgentManifestPath as C, escapeHtml as D, escapeAttribute as E, normalizeAgentFlowSpec as O, validateAgentManifestFiles as S, readAgentCassettePath as T, formatArgv as _, formatAgentLaunchPlan as a, isAgentManifestLike as b, launchAgentBrowser as c, AGENT_RUN_RECORD_SCHEMA_URL as d, agentRunModeSchema as f, writeAgentRunRecordPath as g, readAgentRunRecordPath as h, runAgentSpecPath as i, sanitizeArtifactName as k, createAgentTemplateSpec as l, isAgentRunRecordLike as m, replayAgentRecordPath as n, resolveAgentLaunchTarget as o, formatAgentArgv as p, runAgentSpec as r, normalizeAgentFlowSpecWithConfig as s, defaultSpecNameForPath as t, loadAgentSpec as u, AGENT_MANIFEST_FILE_NAME as v, isAgentCassetteLike as w, readAgentManifestPath as x, agentManifestPath as y };
+export { sanitizeArtifactName as A, validateAgentManifestFiles as C, escapeAttribute as D, readAgentCassettePath as E, escapeHtml as O, readAgentManifestPath as S, isAgentCassetteLike as T, writeAgentRunRecordPath as _, formatAgentLaunchPlan as a, agentManifestPath as b, launchAgentBrowser as c, loadAgentSpec as d, AGENT_RUN_RECORD_SCHEMA_URL as f, readAgentRunRecordPath as g, isAgentRunRecordLike as h, runAgentSpecPath as i, normalizeAgentFlowSpec as k, renderReportThemeCss as l, formatAgentArgv as m, replayAgentRecordPath as n, resolveAgentLaunchTarget as o, agentRunModeSchema as p, runAgentSpec as r, normalizeAgentFlowSpecWithConfig as s, defaultSpecNameForPath as t, createAgentTemplateSpec as u, formatArgv as v, writeAgentManifestPath as w, isAgentManifestLike as x, AGENT_MANIFEST_FILE_NAME as y };