From 006d38bb11ce0bd3dbf2e21a2ef36ec3b27f3759 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul.dambra@gmail.com>
Date: Tue, 7 Jul 2026 09:42:50 +0100
Subject: [PATCH 1/5] feat(autoresearch): export run report as HTML or PNG

Adds an Export dropdown to the autoresearch run header that downloads the
report as a self-contained HTML file or a PNG image. The report is generated
from run data (header, stats, inline SVG metric chart, iterations table,
brief) with inline styles and no external resources; the PNG path rasterizes
the same markup via SVG foreignObject onto a canvas. Dependency-free.

Generated-By: PostHog Code
Task-Id: c0f4e30c-8329-433a-a2cb-0565df4ecb8b
---
 .../autoresearch/AutoresearchPanel.tsx        |  42 +-
 .../autoresearch/reportExport.test.ts         | 126 ++++++
 .../src/features/autoresearch/reportExport.ts | 408 ++++++++++++++++++
 3 files changed, 574 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/src/features/autoresearch/reportExport.test.ts
 create mode 100644 packages/ui/src/features/autoresearch/reportExport.ts

diff --git a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
index 8cd14534bd..ea560bd3f9 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
@@ -1,4 +1,11 @@
-import { ChartLineUp, Pause, Play, Plus, Stop } from "@phosphor-icons/react";
+import {
+  ChartLineUp,
+  Export,
+  Pause,
+  Play,
+  Plus,
+  Stop,
+} from "@phosphor-icons/react";
 import type { AutoresearchService } from "@posthog/core/autoresearch/autoresearch";
 import { AUTORESEARCH_SERVICE } from "@posthog/core/autoresearch/identifiers";
 import type {
@@ -14,7 +21,16 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "@posthog/quill";
-import { Badge, Button, Callout, Flex, Select, Text } from "@radix-ui/themes";
+import { toast } from "@posthog/ui/primitives/toast";
+import {
+  Badge,
+  Button,
+  Callout,
+  DropdownMenu,
+  Flex,
+  Select,
+  Text,
+} from "@radix-ui/themes";
 import { type ReactNode, useEffect, useMemo, useState } from "react";
 import {
   getConfigOptionByCategory,
@@ -25,6 +41,7 @@ import { AutoresearchConfigDialog } from "./AutoresearchConfigDialog";
 import { IterationsTable } from "./IterationsTable";
 import { MetricChart } from "./MetricChart";
 import { withMetricUnit } from "./metricFormat";
+import { exportRunAsHtml, exportRunAsPng } from "./reportExport";
 import {
   type AutoresearchModelOption,
   stageValueLabel,
@@ -258,6 +275,27 @@ function RunHeader({
           </Badge>
         </Flex>
         <Flex align="center" gap="2" className="shrink-0">
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <Button size="1" variant="soft" color="gray">
+                <Export size={12} /> Export
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content size="1">
+              <DropdownMenu.Item onSelect={() => exportRunAsHtml(run)}>
+                HTML file
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                onSelect={() => {
+                  void exportRunAsPng(run).catch(() =>
+                    toast.error("Couldn't render the report image"),
+                  );
+                }}
+              >
+                PNG image
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
           {runs.length > 1 && (
             <Select.Root value={run.id} onValueChange={onSelectRun} size="1">
               <Select.Trigger variant="soft" />
diff --git a/packages/ui/src/features/autoresearch/reportExport.test.ts b/packages/ui/src/features/autoresearch/reportExport.test.ts
new file mode 100644
index 0000000000..b20f79ae74
--- /dev/null
+++ b/packages/ui/src/features/autoresearch/reportExport.test.ts
@@ -0,0 +1,126 @@
+import type {
+  AutoresearchIteration,
+  AutoresearchRun,
+} from "@posthog/core/autoresearch/schemas";
+import { describe, expect, it } from "vitest";
+import {
+  buildReportBody,
+  buildReportHtml,
+  reportFileName,
+} from "./reportExport";
+
+const EXPORTED_AT = new Date("2026-07-07T12:00:00Z");
+
+function makeIteration(
+  overrides: Partial<AutoresearchIteration> = {},
+): AutoresearchIteration {
+  return {
+    index: 1,
+    value: 100,
+    bestValue: 100,
+    delta: null,
+    summary: "Baseline",
+    at: Date.UTC(2026, 6, 7, 10, 0),
+    ...overrides,
+  };
+}
+
+function makeRun(overrides: Partial<AutoresearchRun> = {}): AutoresearchRun {
+  return {
+    id: "run-1",
+    config: {
+      taskId: "task-1",
+      direction: "minimize",
+      targetValue: 80,
+      maxIterations: 10,
+      implementModel: null,
+      measureModel: null,
+      implementEffort: null,
+      measureEffort: null,
+      instructions: "Shrink the bundle without breaking tests.",
+    },
+    status: "completed",
+    metricName: "bundle size",
+    metricUnit: "kB",
+    phase: null,
+    originalModel: null,
+    originalEffort: null,
+    iterations: [
+      makeIteration(),
+      makeIteration({ index: 2, value: 90, bestValue: 90, delta: -10 }),
+    ],
+    startedAt: Date.UTC(2026, 6, 7, 9, 0),
+    endedAt: Date.UTC(2026, 6, 7, 11, 0),
+    endReason: "target-reached",
+    interruptedReason: null,
+    lastError: null,
+    ...overrides,
+  };
+}
+
+describe("buildReportBody", () => {
+  it("includes the header, stats, chart, iterations, and brief", () => {
+    const body = buildReportBody(makeRun(), EXPORTED_AT);
+    expect(body).toContain("bundle size");
+    expect(body).toContain("minimize");
+    expect(body).toContain("Completed");
+    expect(body).toContain("2 / 10");
+    expect(body).toContain("<svg");
+    expect(body).toContain("target 80 kB");
+    expect(body).toContain("Baseline");
+    expect(body).toContain("Shrink the bundle without breaking tests.");
+  });
+
+  it("marks the best iteration and colors deltas by direction", () => {
+    const body = buildReportBody(makeRun(), EXPORTED_AT);
+    expect(body).toContain(">best</span>");
+    // -10 on a minimize run is an improvement.
+    expect(body).toContain("-10 kB");
+  });
+
+  it("escapes agent-provided text", () => {
+    const run = makeRun({
+      metricName: `<img src=x onerror="x">`,
+      iterations: [makeIteration({ summary: "<script>alert(1)</script>" })],
+    });
+    const body = buildReportBody(run, EXPORTED_AT);
+    expect(body).not.toContain("<script>");
+    expect(body).not.toContain("<img");
+    expect(body).toContain("&lt;script&gt;");
+  });
+
+  it("renders without iterations or target", () => {
+    const run = makeRun({
+      iterations: [],
+      config: { ...makeRun().config, targetValue: null },
+      metricName: null,
+      metricUnit: null,
+    });
+    const body = buildReportBody(run, EXPORTED_AT);
+    expect(body).toContain("Autoresearch");
+    expect(body).toContain("No iterations recorded.");
+    expect(body).not.toContain("<svg");
+  });
+});
+
+describe("buildReportHtml", () => {
+  it("produces a self-contained document with no external references", () => {
+    const html = buildReportHtml(makeRun(), EXPORTED_AT);
+    expect(html).toMatch(/^<!doctype html>/);
+    expect(html).toContain("<style>");
+    // Nothing fetched at open time: no scripts, stylesheets, or images.
+    expect(html).not.toMatch(/<(script|link|img)\b/);
+    expect(html).not.toMatch(/\b(src|href)=/);
+    expect(html).toContain("<title>bundle size — autoresearch report</title>");
+  });
+});
+
+describe("reportFileName", () => {
+  it.each([
+    ["bundle size (kB)", "autoresearch-bundle-size-kb.html"],
+    [null, "autoresearch-report.html"],
+    ["///", "autoresearch-report.html"],
+  ])("slugs %j", (metricName, expected) => {
+    expect(reportFileName(makeRun({ metricName }), "html")).toBe(expected);
+  });
+});
diff --git a/packages/ui/src/features/autoresearch/reportExport.ts b/packages/ui/src/features/autoresearch/reportExport.ts
new file mode 100644
index 0000000000..f21ff1d037
--- /dev/null
+++ b/packages/ui/src/features/autoresearch/reportExport.ts
@@ -0,0 +1,408 @@
+/**
+ * Dependency-free export of an autoresearch run as a standalone HTML report
+ * or a PNG image. The report is generated from run data (not screenshotted
+ * from the live DOM), with all styles inline and no external resources, so
+ * the HTML file opens anywhere and the PNG rasterization — SVG
+ * `foreignObject` drawn onto a canvas — never taints the canvas.
+ */
+import type {
+  AutoresearchIteration,
+  AutoresearchRun,
+  AutoresearchRunStatus,
+} from "@posthog/core/autoresearch/schemas";
+import {
+  computeBest,
+  isImprovement,
+  summarizeRun,
+} from "@posthog/core/autoresearch/stats";
+import { withMetricUnit } from "./metricFormat";
+
+export const REPORT_WIDTH = 760;
+
+const CHART_WIDTH = 696;
+const CHART_HEIGHT = 220;
+const CHART_PADDING = { top: 12, right: 16, bottom: 24, left: 52 };
+
+// Fixed light-theme palette so the export looks the same regardless of the
+// app theme and needs no external stylesheets.
+const COLOR = {
+  text: "#1c2024",
+  muted: "#60646c",
+  faint: "#8b8d98",
+  border: "#e0e1e6",
+  surface: "#f9f9fb",
+  axis: "#d9d9e0",
+  accent: "#3e63dd",
+  best: "#8b8d98",
+  target: "#30a46c",
+  targetText: "#218358",
+  good: "#218358",
+  bad: "#ce2c31",
+};
+
+const STATUS_LABEL: Record<AutoresearchRunStatus, string> = {
+  running: "Running",
+  paused: "Paused",
+  interrupted: "Interrupted",
+  completed: "Completed",
+  stopped: "Stopped",
+  failed: "Failed",
+};
+
+const numberFormat = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 4,
+});
+const wholeNumberFormat = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 0,
+});
+const fractionalNumberFormat = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 2,
+});
+const dateTimeFormat = new Intl.DateTimeFormat("en-US", {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+});
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function formatAxisValue(value: number): string {
+  return (
+    Math.abs(value) >= 1000 ? wholeNumberFormat : fractionalNumberFormat
+  ).format(value);
+}
+
+/** Same layout math as `MetricChart`, emitted as a standalone SVG string. */
+function buildChartSvg(run: AutoresearchRun): string {
+  const { iterations } = run;
+  if (iterations.length === 0) return "";
+  const unit = run.metricUnit;
+  const targetValue = run.config.targetValue;
+
+  const all = iterations.flatMap((iteration) => [
+    iteration.value,
+    iteration.bestValue,
+  ]);
+  if (targetValue !== null) all.push(targetValue);
+
+  let min = Math.min(...all);
+  let max = Math.max(...all);
+  if (min === max) {
+    min -= 1;
+    max += 1;
+  }
+  const span = max - min;
+  min -= span * 0.05;
+  max += span * 0.05;
+
+  const innerWidth = CHART_WIDTH - CHART_PADDING.left - CHART_PADDING.right;
+  const innerHeight = CHART_HEIGHT - CHART_PADDING.top - CHART_PADDING.bottom;
+  const x = (index: number) =>
+    CHART_PADDING.left +
+    (iterations.length === 1
+      ? innerWidth / 2
+      : (index / (iterations.length - 1)) * innerWidth);
+  const y = (value: number) =>
+    CHART_PADDING.top + ((max - value) / (max - min)) * innerHeight;
+
+  const valuePath = iterations
+    .map((iteration, i) => `${x(i)},${y(iteration.value)}`)
+    .join(" ");
+  const bestPath = iterations
+    .map((iteration, i) => `${x(i)},${y(iteration.bestValue)}`)
+    .join(" ");
+
+  const dots = iterations
+    .map(
+      (iteration, i) =>
+        `<circle cx="${x(i)}" cy="${y(iteration.value)}" r="3" fill="${COLOR.accent}"/>`,
+    )
+    .join("");
+
+  const target =
+    targetValue === null
+      ? ""
+      : `<line x1="${CHART_PADDING.left}" y1="${y(targetValue)}" x2="${CHART_WIDTH - CHART_PADDING.right}" y2="${y(targetValue)}" stroke="${COLOR.target}" stroke-dasharray="2 4"/>` +
+        `<text x="${CHART_WIDTH - CHART_PADDING.right}" y="${y(targetValue) - 4}" text-anchor="end" fill="${COLOR.targetText}" font-size="10">target ${escapeHtml(withMetricUnit(formatAxisValue(targetValue), unit))}</text>`;
+
+  const lastIndex =
+    iterations.length > 1
+      ? `<text x="${x(iterations.length - 1)}" y="${CHART_HEIGHT - CHART_PADDING.bottom + 14}" text-anchor="middle" fill="${COLOR.faint}" font-size="10">${iterations[iterations.length - 1].index}</text>`
+      : "";
+
+  return (
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${CHART_WIDTH} ${CHART_HEIGHT}" width="${CHART_WIDTH}" height="${CHART_HEIGHT}" role="img">` +
+    `<rect x="0.5" y="0.5" width="${CHART_WIDTH - 1}" height="${CHART_HEIGHT - 1}" rx="6" fill="${COLOR.surface}" stroke="${COLOR.border}"/>` +
+    `<text x="${CHART_PADDING.left - 6}" y="${y(max) + 10}" text-anchor="end" fill="${COLOR.faint}" font-size="10">${escapeHtml(withMetricUnit(formatAxisValue(max), unit))}</text>` +
+    `<text x="${CHART_PADDING.left - 6}" y="${y(min)}" text-anchor="end" fill="${COLOR.faint}" font-size="10">${escapeHtml(withMetricUnit(formatAxisValue(min), unit))}</text>` +
+    `<line x1="${CHART_PADDING.left}" y1="${CHART_PADDING.top}" x2="${CHART_PADDING.left}" y2="${CHART_HEIGHT - CHART_PADDING.bottom}" stroke="${COLOR.axis}"/>` +
+    `<line x1="${CHART_PADDING.left}" y1="${CHART_HEIGHT - CHART_PADDING.bottom}" x2="${CHART_WIDTH - CHART_PADDING.right}" y2="${CHART_HEIGHT - CHART_PADDING.bottom}" stroke="${COLOR.axis}"/>` +
+    target +
+    `<polyline points="${bestPath}" fill="none" stroke="${COLOR.best}" stroke-width="1.5" stroke-dasharray="4 4"/>` +
+    `<polyline points="${valuePath}" fill="none" stroke="${COLOR.accent}" stroke-width="2"/>` +
+    dots +
+    `<text x="${x(0)}" y="${CHART_HEIGHT - CHART_PADDING.bottom + 14}" text-anchor="middle" fill="${COLOR.faint}" font-size="10">1</text>` +
+    lastIndex +
+    "</svg>"
+  );
+}
+
+function formatDelta(
+  iteration: AutoresearchIteration,
+  unit: string | null,
+): string {
+  if (iteration.delta === null) return "—";
+  return withMetricUnit(
+    `${iteration.delta > 0 ? "+" : ""}${numberFormat.format(iteration.delta)}`,
+    unit,
+  );
+}
+
+function deltaColor(delta: number | null, run: AutoresearchRun): string {
+  if (delta === null || delta === 0) return COLOR.muted;
+  return isImprovement(delta, 0, run.config.direction) ? COLOR.good : COLOR.bad;
+}
+
+function buildIterationsTable(run: AutoresearchRun): string {
+  if (run.iterations.length === 0) {
+    return `<p class="muted">No iterations recorded.</p>`;
+  }
+  const unit = run.metricUnit;
+  const best = computeBest(run.iterations, run.config.direction);
+  const rows = [...run.iterations]
+    .reverse()
+    .map((iteration) => {
+      const bestTag =
+        best?.index === iteration.index ? `<span class="tag">best</span>` : "";
+      return (
+        "<tr>" +
+        `<td>${iteration.index}</td>` +
+        `<td class="num">${escapeHtml(withMetricUnit(numberFormat.format(iteration.value), unit))}${bestTag}</td>` +
+        `<td class="num" style="color:${deltaColor(iteration.delta, run)}">${escapeHtml(formatDelta(iteration, unit))}</td>` +
+        `<td>${iteration.summary ? escapeHtml(iteration.summary) : "—"}</td>` +
+        `<td class="muted">${escapeHtml(dateTimeFormat.format(iteration.at))}</td>` +
+        "</tr>"
+      );
+    })
+    .join("");
+  return (
+    "<table>" +
+    "<thead><tr><th>#</th><th>Value</th><th>Δ</th><th>Change</th><th>Time</th></tr></thead>" +
+    `<tbody>${rows}</tbody>` +
+    "</table>"
+  );
+}
+
+function statCard(label: string, value: string): string {
+  return `<div class="stat"><div class="stat-label">${escapeHtml(label)}</div><div class="stat-value">${escapeHtml(value)}</div></div>`;
+}
+
+const REPORT_STYLES = `
+.autoresearch-report { box-sizing: border-box; width: ${REPORT_WIDTH}px; padding: 32px; background: #ffffff; color: ${COLOR.text}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; }
+.autoresearch-report * { box-sizing: border-box; }
+.autoresearch-report header { display: flex; align-items: center; gap: 8px; }
+.autoresearch-report h1 { margin: 0; font-size: 18px; font-weight: 700; }
+.autoresearch-report .badge { border-radius: 4px; padding: 1px 6px; font-size: 11px; background: ${COLOR.surface}; border: 1px solid ${COLOR.border}; color: ${COLOR.muted}; }
+.autoresearch-report .meta { margin: 4px 0 16px; color: ${COLOR.muted}; font-size: 12px; }
+.autoresearch-report .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
+.autoresearch-report .stat { border: 1px solid ${COLOR.border}; background: ${COLOR.surface}; border-radius: 6px; padding: 8px 12px; }
+.autoresearch-report .stat-label { color: ${COLOR.muted}; font-size: 11px; }
+.autoresearch-report .stat-value { font-weight: 500; font-variant-numeric: tabular-nums; }
+.autoresearch-report figure { margin: 0 0 16px; }
+.autoresearch-report figcaption { margin-top: 4px; color: ${COLOR.faint}; font-size: 11px; }
+.autoresearch-report table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.autoresearch-report th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid ${COLOR.border}; }
+.autoresearch-report td { padding: 6px 8px; border-bottom: 1px solid ${COLOR.surface}; vertical-align: top; }
+.autoresearch-report .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.autoresearch-report .tag { margin-left: 6px; border-radius: 4px; padding: 0 4px; font-size: 10px; background: #fefbe9; border: 1px solid #f3d673; color: #ab6400; }
+.autoresearch-report .muted { color: ${COLOR.muted}; }
+.autoresearch-report .brief { margin-top: 16px; }
+.autoresearch-report h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
+.autoresearch-report .brief p { margin: 0; white-space: pre-wrap; color: ${COLOR.muted}; }
+.autoresearch-report footer { margin-top: 24px; color: ${COLOR.faint}; font-size: 11px; }
+`;
+
+/** The report's inner markup: everything inside (and including) the root div. */
+export function buildReportBody(
+  run: AutoresearchRun,
+  exportedAt: Date,
+): string {
+  const unit = run.metricUnit;
+  const summary = summarizeRun(run);
+  const title = run.metricName ?? "Autoresearch";
+
+  const metaParts = [
+    `Started ${dateTimeFormat.format(run.startedAt)}`,
+    run.endedAt ? `Ended ${dateTimeFormat.format(run.endedAt)}` : null,
+    `Exported ${dateTimeFormat.format(exportedAt)}`,
+  ].filter((part): part is string => part !== null);
+
+  const stats = [
+    statCard(
+      "Best",
+      summary.best
+        ? `${withMetricUnit(numberFormat.format(summary.best.value), unit)} (iter ${summary.best.index})`
+        : "—",
+    ),
+    statCard(
+      "Last",
+      summary.last
+        ? withMetricUnit(numberFormat.format(summary.last.value), unit)
+        : "—",
+    ),
+    statCard(
+      "Iterations",
+      `${summary.iterationCount} / ${run.config.maxIterations}`,
+    ),
+    statCard(
+      "Target",
+      run.config.targetValue === null
+        ? "—"
+        : withMetricUnit(numberFormat.format(run.config.targetValue), unit),
+    ),
+  ].join("");
+
+  const chart = buildChartSvg(run);
+  const chartBlock = chart
+    ? `<figure>${chart}<figcaption>solid: value per iteration · dashed: best so far</figcaption></figure>`
+    : "";
+
+  return (
+    `<div class="autoresearch-report">` +
+    `<header><h1>${escapeHtml(title)}</h1><span class="badge">${escapeHtml(run.config.direction)}</span><span class="badge">${escapeHtml(STATUS_LABEL[run.status])}</span></header>` +
+    `<p class="meta">${escapeHtml(metaParts.join(" · "))}</p>` +
+    `<div class="stats">${stats}</div>` +
+    chartBlock +
+    buildIterationsTable(run) +
+    `<section class="brief"><h2>Brief</h2><p>${escapeHtml(run.config.instructions)}</p></section>` +
+    `<footer>Autoresearch report · exported from PostHog Code</footer>` +
+    "</div>"
+  );
+}
+
+/** A complete, self-contained HTML document for the run. */
+export function buildReportHtml(
+  run: AutoresearchRun,
+  exportedAt: Date,
+): string {
+  const title = run.metricName ?? "Autoresearch";
+  return (
+    "<!doctype html>" +
+    `<html lang="en"><head><meta charset="utf-8"/>` +
+    `<meta name="viewport" content="width=device-width, initial-scale=1"/>` +
+    `<title>${escapeHtml(title)} — autoresearch report</title>` +
+    `<style>body { margin: 0; display: flex; justify-content: center; background: ${COLOR.surface}; }${REPORT_STYLES}</style>` +
+    `</head><body>${buildReportBody(run, exportedAt)}</body></html>`
+  );
+}
+
+export function reportFileName(
+  run: AutoresearchRun,
+  extension: string,
+): string {
+  const slug = (run.metricName ?? "report")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  return `autoresearch-${slug || "report"}.${extension}`;
+}
+
+function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  // Deferred so the download grabs the blob before the URL dies.
+  setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}
+
+function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () =>
+      reject(new Error("Failed to rasterize the report SVG"));
+    image.src = url;
+  });
+}
+
+/**
+ * Render the report markup to a PNG: mount it offscreen to measure its
+ * height, serialize it into an SVG `foreignObject`, and draw that onto a
+ * canvas at 2x. Self-contained markup keeps the canvas untainted.
+ */
+async function renderReportPng(run: AutoresearchRun): Promise<Blob> {
+  const host = document.createElement("div");
+  host.style.position = "fixed";
+  host.style.left = "-100000px";
+  host.style.top = "0";
+  host.style.width = `${REPORT_WIDTH}px`;
+  // The extra wrapper is what gets serialized, so the host's offscreen
+  // positioning never leaks into the image.
+  host.innerHTML = `<div><style>${REPORT_STYLES}</style>${buildReportBody(run, new Date())}</div>`;
+  document.body.appendChild(host);
+
+  let width: number;
+  let height: number;
+  let serialized: string;
+  try {
+    width = REPORT_WIDTH;
+    height = Math.ceil(host.getBoundingClientRect().height);
+    const wrapper = host.firstElementChild;
+    if (!wrapper) throw new Error("Report markup failed to parse");
+    // XMLSerializer emits well-formed XHTML (with the xhtml namespace on the
+    // root), which foreignObject requires.
+    serialized = new XMLSerializer().serializeToString(wrapper);
+  } finally {
+    host.remove();
+  }
+
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">` +
+    `<foreignObject width="100%" height="100%">${serialized}</foreignObject>` +
+    "</svg>";
+  const url = URL.createObjectURL(
+    new Blob([svg], { type: "image/svg+xml;charset=utf-8" }),
+  );
+  try {
+    const image = await loadImage(url);
+    const scale = 2;
+    const canvas = document.createElement("canvas");
+    canvas.width = width * scale;
+    canvas.height = height * scale;
+    const context = canvas.getContext("2d");
+    if (!context) throw new Error("Canvas 2D context unavailable");
+    context.scale(scale, scale);
+    context.drawImage(image, 0, 0);
+    const blob = await new Promise<Blob | null>((resolve) =>
+      canvas.toBlob(resolve, "image/png"),
+    );
+    if (!blob) throw new Error("PNG encoding failed");
+    return blob;
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+export function exportRunAsHtml(run: AutoresearchRun): void {
+  const html = buildReportHtml(run, new Date());
+  downloadBlob(
+    new Blob([html], { type: "text/html;charset=utf-8" }),
+    reportFileName(run, "html"),
+  );
+}
+
+export async function exportRunAsPng(run: AutoresearchRun): Promise<void> {
+  const blob = await renderReportPng(run);
+  downloadBlob(blob, reportFileName(run, "png"));
+}

From 2bbb38dde88636e4dc862c3803d523eb8abb58ed Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul.dambra@gmail.com>
Date: Tue, 7 Jul 2026 10:00:37 +0100
Subject: [PATCH 2/5] fix: address qa-swarm review findings

- Narrow deltaColor signature to accept direction primitive instead of whole run (fixes feature envy)
- Thread exportedAt through renderReportPng/exportRunAsPng so HTML and PNG exports use same timestamp
- Add data-attr attributes to Export trigger and menu items for autocapture measurement

Generated-By: PostHog Code
Task-Id: c0f4e30c-8329-433a-a2cb-0565df4ecb8b
---
 .../autoresearch/AutoresearchPanel.tsx        | 13 +++++++++++--
 .../src/features/autoresearch/reportExport.ts | 19 +++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
index ea560bd3f9..677784091d 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
@@ -277,15 +277,24 @@ function RunHeader({
         <Flex align="center" gap="2" className="shrink-0">
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
-              <Button size="1" variant="soft" color="gray">
+              <Button
+                size="1"
+                variant="soft"
+                color="gray"
+                data-attr="autoresearch-export-trigger"
+              >
                 <Export size={12} /> Export
               </Button>
             </DropdownMenu.Trigger>
             <DropdownMenu.Content size="1">
-              <DropdownMenu.Item onSelect={() => exportRunAsHtml(run)}>
+              <DropdownMenu.Item
+                data-attr="autoresearch-export-html"
+                onSelect={() => exportRunAsHtml(run)}
+              >
                 HTML file
               </DropdownMenu.Item>
               <DropdownMenu.Item
+                data-attr="autoresearch-export-png"
                 onSelect={() => {
                   void exportRunAsPng(run).catch(() =>
                     toast.error("Couldn't render the report image"),
diff --git a/packages/ui/src/features/autoresearch/reportExport.ts b/packages/ui/src/features/autoresearch/reportExport.ts
index f21ff1d037..a1fb7555cc 100644
--- a/packages/ui/src/features/autoresearch/reportExport.ts
+++ b/packages/ui/src/features/autoresearch/reportExport.ts
@@ -167,9 +167,12 @@ function formatDelta(
   );
 }
 
-function deltaColor(delta: number | null, run: AutoresearchRun): string {
+function deltaColor(
+  delta: number | null,
+  direction: AutoresearchRun["config"]["direction"],
+): string {
   if (delta === null || delta === 0) return COLOR.muted;
-  return isImprovement(delta, 0, run.config.direction) ? COLOR.good : COLOR.bad;
+  return isImprovement(delta, 0, direction) ? COLOR.good : COLOR.bad;
 }
 
 function buildIterationsTable(run: AutoresearchRun): string {
@@ -187,7 +190,7 @@ function buildIterationsTable(run: AutoresearchRun): string {
         "<tr>" +
         `<td>${iteration.index}</td>` +
         `<td class="num">${escapeHtml(withMetricUnit(numberFormat.format(iteration.value), unit))}${bestTag}</td>` +
-        `<td class="num" style="color:${deltaColor(iteration.delta, run)}">${escapeHtml(formatDelta(iteration, unit))}</td>` +
+        `<td class="num" style="color:${deltaColor(iteration.delta, run.config.direction)}">${escapeHtml(formatDelta(iteration, unit))}</td>` +
         `<td>${iteration.summary ? escapeHtml(iteration.summary) : "—"}</td>` +
         `<td class="muted">${escapeHtml(dateTimeFormat.format(iteration.at))}</td>` +
         "</tr>"
@@ -341,7 +344,10 @@ function loadImage(url: string): Promise<HTMLImageElement> {
  * height, serialize it into an SVG `foreignObject`, and draw that onto a
  * canvas at 2x. Self-contained markup keeps the canvas untainted.
  */
-async function renderReportPng(run: AutoresearchRun): Promise<Blob> {
+async function renderReportPng(
+  run: AutoresearchRun,
+  exportedAt: Date,
+): Promise<Blob> {
   const host = document.createElement("div");
   host.style.position = "fixed";
   host.style.left = "-100000px";
@@ -349,7 +355,7 @@ async function renderReportPng(run: AutoresearchRun): Promise<Blob> {
   host.style.width = `${REPORT_WIDTH}px`;
   // The extra wrapper is what gets serialized, so the host's offscreen
   // positioning never leaks into the image.
-  host.innerHTML = `<div><style>${REPORT_STYLES}</style>${buildReportBody(run, new Date())}</div>`;
+  host.innerHTML = `<div><style>${REPORT_STYLES}</style>${buildReportBody(run, exportedAt)}</div>`;
   document.body.appendChild(host);
 
   let width: number;
@@ -403,6 +409,7 @@ export function exportRunAsHtml(run: AutoresearchRun): void {
 }
 
 export async function exportRunAsPng(run: AutoresearchRun): Promise<void> {
-  const blob = await renderReportPng(run);
+  const exportedAt = new Date();
+  const blob = await renderReportPng(run, exportedAt);
   downloadBlob(blob, reportFileName(run, "png"));
 }

From 419b093e892afe85d9166a3230923b3843670fe3 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul.dambra@gmail.com>
Date: Tue, 7 Jul 2026 10:04:27 +0100
Subject: [PATCH 3/5] refactor: apply simplify pass

Extract reportTitle helper for the duplicated title fallback and tighten a
let to const in renderReportPng.

Generated-By: PostHog Code
Task-Id: c0f4e30c-8329-433a-a2cb-0565df4ecb8b
---
 packages/ui/src/features/autoresearch/reportExport.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/features/autoresearch/reportExport.ts b/packages/ui/src/features/autoresearch/reportExport.ts
index a1fb7555cc..b928bc428e 100644
--- a/packages/ui/src/features/autoresearch/reportExport.ts
+++ b/packages/ui/src/features/autoresearch/reportExport.ts
@@ -241,7 +241,7 @@ export function buildReportBody(
 ): string {
   const unit = run.metricUnit;
   const summary = summarizeRun(run);
-  const title = run.metricName ?? "Autoresearch";
+  const title = reportTitle(run);
 
   const metaParts = [
     `Started ${dateTimeFormat.format(run.startedAt)}`,
@@ -297,7 +297,7 @@ export function buildReportHtml(
   run: AutoresearchRun,
   exportedAt: Date,
 ): string {
-  const title = run.metricName ?? "Autoresearch";
+  const title = reportTitle(run);
   return (
     "<!doctype html>" +
     `<html lang="en"><head><meta charset="utf-8"/>` +
@@ -308,6 +308,10 @@ export function buildReportHtml(
   );
 }
 
+function reportTitle(run: AutoresearchRun): string {
+  return run.metricName ?? "Autoresearch";
+}
+
 export function reportFileName(
   run: AutoresearchRun,
   extension: string,
@@ -358,11 +362,10 @@ async function renderReportPng(
   host.innerHTML = `<div><style>${REPORT_STYLES}</style>${buildReportBody(run, exportedAt)}</div>`;
   document.body.appendChild(host);
 
-  let width: number;
+  const width = REPORT_WIDTH;
   let height: number;
   let serialized: string;
   try {
-    width = REPORT_WIDTH;
     height = Math.ceil(host.getBoundingClientRect().height);
     const wrapper = host.firstElementChild;
     if (!wrapper) throw new Error("Report markup failed to parse");

From 817fe3179e3e2b3e97bee04c125539911902abd8 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul.dambra@gmail.com>
Date: Tue, 7 Jul 2026 10:27:25 +0100
Subject: [PATCH 4/5] refactor: share chart layout and metric formatting
 between live UI and report export

Addresses the two open review threads about duplication:

- New chartLayout.ts owns the chart geometry (scale, paths, target line);
  MetricChart and the report export's SVG builder both call it, so the
  exported chart can no longer silently drift from the on-screen one.
- metricFormat.ts now owns the shared metric number formatter, the compact
  chart-axis formatter, the signed delta formatter, and a deltaTone decision
  that renderers map to their own color space (Radix tokens on screen, fixed
  hex in the export). IterationsTable, MetricChart, AutoresearchPanel, and
  reportExport all use them instead of local copies.
- Adds metricFormat.test.ts covering deltaTone, formatMetricDelta,
  formatChartValue, and computeChartLayout.

Generated-By: PostHog Code
Task-Id: c0f4e30c-8329-433a-a2cb-0565df4ecb8b
---
 .../autoresearch/AutoresearchPanel.tsx        |  21 +--
 .../features/autoresearch/IterationsTable.tsx |  40 +++---
 .../src/features/autoresearch/MetricChart.tsx |  78 +++--------
 .../src/features/autoresearch/chartLayout.ts  |  70 ++++++++++
 .../autoresearch/metricFormat.test.ts         |  95 ++++++++++++++
 .../src/features/autoresearch/metricFormat.ts |  49 +++++++
 .../src/features/autoresearch/reportExport.ts | 124 ++++++------------
 7 files changed, 300 insertions(+), 177 deletions(-)
 create mode 100644 packages/ui/src/features/autoresearch/chartLayout.ts
 create mode 100644 packages/ui/src/features/autoresearch/metricFormat.test.ts

diff --git a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
index 677784091d..0f091a57ce 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
@@ -40,7 +40,7 @@ import { usePendingPermissionsForTask } from "../sessions/useSession";
 import { AutoresearchConfigDialog } from "./AutoresearchConfigDialog";
 import { IterationsTable } from "./IterationsTable";
 import { MetricChart } from "./MetricChart";
-import { withMetricUnit } from "./metricFormat";
+import { metricNumberFormat, withMetricUnit } from "./metricFormat";
 import { exportRunAsHtml, exportRunAsPng } from "./reportExport";
 import {
   type AutoresearchModelOption,
@@ -79,10 +79,6 @@ const INTERRUPTION_LABEL: Record<string, string> = {
   "app-restart": "App restarted mid-run",
 };
 
-const numberFormat = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 4,
-});
-
 interface AutoresearchPanelProps {
   taskId: string;
 }
@@ -436,7 +432,10 @@ function RunStats({ run }: { run: AutoresearchRun }) {
         value={
           summary.best ? (
             <>
-              {withMetricUnit(numberFormat.format(summary.best.value), unit)}
+              {withMetricUnit(
+                metricNumberFormat.format(summary.best.value),
+                unit,
+              )}
               <Text size="1" color="gray">
                 {" "}
                 (iter {summary.best.index})
@@ -451,7 +450,10 @@ function RunStats({ run }: { run: AutoresearchRun }) {
         label="Last"
         value={
           summary.last
-            ? withMetricUnit(numberFormat.format(summary.last.value), unit)
+            ? withMetricUnit(
+                metricNumberFormat.format(summary.last.value),
+                unit,
+              )
             : "—"
         }
       />
@@ -464,7 +466,10 @@ function RunStats({ run }: { run: AutoresearchRun }) {
         value={
           run.config.targetValue === null
             ? "—"
-            : withMetricUnit(numberFormat.format(run.config.targetValue), unit)
+            : withMetricUnit(
+                metricNumberFormat.format(run.config.targetValue),
+                unit,
+              )
         }
       />
     </div>
diff --git a/packages/ui/src/features/autoresearch/IterationsTable.tsx b/packages/ui/src/features/autoresearch/IterationsTable.tsx
index 0b5427af17..e964a4dd75 100644
--- a/packages/ui/src/features/autoresearch/IterationsTable.tsx
+++ b/packages/ui/src/features/autoresearch/IterationsTable.tsx
@@ -2,10 +2,16 @@ import type {
   AutoresearchDirection,
   AutoresearchIteration,
 } from "@posthog/core/autoresearch/schemas";
-import { computeBest, isImprovement } from "@posthog/core/autoresearch/stats";
+import { computeBest } from "@posthog/core/autoresearch/stats";
 import { Badge, Table, Text } from "@radix-ui/themes";
 import { useMemo } from "react";
-import { withMetricUnit } from "./metricFormat";
+import {
+  type DeltaTone,
+  deltaTone,
+  formatMetricDelta,
+  metricNumberFormat,
+  withMetricUnit,
+} from "./metricFormat";
 
 interface IterationsTableProps {
   iterations: AutoresearchIteration[];
@@ -13,22 +19,16 @@ interface IterationsTableProps {
   unit: string | null;
 }
 
-const numberFormat = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 4,
-});
-
 const timeFormat = new Intl.DateTimeFormat("en-US", {
   hour: "2-digit",
   minute: "2-digit",
 });
 
-function deltaColor(
-  delta: number | null,
-  direction: AutoresearchDirection,
-): "green" | "red" | "gray" {
-  if (delta === null || delta === 0) return "gray";
-  return isImprovement(delta, 0, direction) ? "green" : "red";
-}
+const TONE_COLOR: Record<DeltaTone, "green" | "red" | "gray"> = {
+  improved: "green",
+  worsened: "red",
+  neutral: "gray",
+};
 
 export function IterationsTable({
   iterations,
@@ -66,7 +66,10 @@ export function IterationsTable({
             <Table.Cell>{iteration.index}</Table.Cell>
             <Table.Cell>
               <span className="flex items-center gap-1 tabular-nums">
-                {withMetricUnit(numberFormat.format(iteration.value), unit)}
+                {withMetricUnit(
+                  metricNumberFormat.format(iteration.value),
+                  unit,
+                )}
                 {best?.index === iteration.index && (
                   <Badge color="amber" size="1">
                     best
@@ -77,15 +80,10 @@ export function IterationsTable({
             <Table.Cell>
               <Text
                 size="1"
-                color={deltaColor(iteration.delta, direction)}
+                color={TONE_COLOR[deltaTone(iteration.delta, direction)]}
                 className="tabular-nums"
               >
-                {iteration.delta === null
-                  ? "—"
-                  : withMetricUnit(
-                      `${iteration.delta > 0 ? "+" : ""}${numberFormat.format(iteration.delta)}`,
-                      unit,
-                    )}
+                {formatMetricDelta(iteration.delta, unit)}
               </Text>
             </Table.Cell>
             <Table.Cell className="max-w-[320px]">
diff --git a/packages/ui/src/features/autoresearch/MetricChart.tsx b/packages/ui/src/features/autoresearch/MetricChart.tsx
index 879fb878f5..0e6002e572 100644
--- a/packages/ui/src/features/autoresearch/MetricChart.tsx
+++ b/packages/ui/src/features/autoresearch/MetricChart.tsx
@@ -4,7 +4,8 @@ import type {
 } from "@posthog/core/autoresearch/schemas";
 import { Text } from "@radix-ui/themes";
 import { useMemo } from "react";
-import { withMetricUnit } from "./metricFormat";
+import { computeChartLayout } from "./chartLayout";
+import { formatChartValue, withMetricUnit } from "./metricFormat";
 
 const WIDTH = 640;
 const HEIGHT = 220;
@@ -18,19 +19,6 @@ interface MetricChartProps {
   unit: string | null;
 }
 
-const wholeNumberFormat = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 0,
-});
-const fractionalNumberFormat = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 2,
-});
-
-function formatValue(value: number): string {
-  return (
-    Math.abs(value) >= 1000 ? wholeNumberFormat : fractionalNumberFormat
-  ).format(value);
-}
-
 /**
  * Metric value per iteration (solid, with dots) plus the best-so-far
  * frontier (dashed) and the optional target line.
@@ -42,51 +30,15 @@ export function MetricChart({
   metricName,
   unit,
 }: MetricChartProps) {
-  const chart = useMemo(() => {
-    if (iterations.length === 0) return null;
-
-    const values = iterations.map((iteration) => iteration.value);
-    const bests = iterations.map((iteration) => iteration.bestValue);
-    const all = [...values, ...bests];
-    if (targetValue !== null) all.push(targetValue);
-
-    let min = Math.min(...all);
-    let max = Math.max(...all);
-    if (min === max) {
-      min -= 1;
-      max += 1;
-    }
-    const span = max - min;
-    min -= span * 0.05;
-    max += span * 0.05;
-
-    const innerWidth = WIDTH - PADDING.left - PADDING.right;
-    const innerHeight = HEIGHT - PADDING.top - PADDING.bottom;
-    const x = (index: number) =>
-      PADDING.left +
-      (iterations.length === 1
-        ? innerWidth / 2
-        : (index / (iterations.length - 1)) * innerWidth);
-    const y = (value: number) =>
-      PADDING.top + ((max - value) / (max - min)) * innerHeight;
-
-    const valuePoints = iterations.map(
-      (iteration, i) => `${x(i)},${y(iteration.value)}`,
-    );
-    const bestPoints = iterations.map(
-      (iteration, i) => `${x(i)},${y(iteration.bestValue)}`,
-    );
-
-    return {
-      x,
-      y,
-      min,
-      max,
-      valuePath: valuePoints.join(" "),
-      bestPath: bestPoints.join(" "),
-      targetY: targetValue === null ? null : y(targetValue),
-    };
-  }, [iterations, targetValue]);
+  const chart = useMemo(
+    () =>
+      computeChartLayout(iterations, targetValue, {
+        width: WIDTH,
+        height: HEIGHT,
+        padding: PADDING,
+      }),
+    [iterations, targetValue],
+  );
 
   if (!chart) {
     return (
@@ -113,7 +65,7 @@ export function MetricChart({
           textAnchor="end"
           className="fill-(--gray-10) text-[10px]"
         >
-          {withMetricUnit(formatValue(chart.max), unit)}
+          {withMetricUnit(formatChartValue(chart.max), unit)}
         </text>
         <text
           x={PADDING.left - 6}
@@ -121,7 +73,7 @@ export function MetricChart({
           textAnchor="end"
           className="fill-(--gray-10) text-[10px]"
         >
-          {withMetricUnit(formatValue(chart.min), unit)}
+          {withMetricUnit(formatChartValue(chart.min), unit)}
         </text>
         <line
           x1={PADDING.left}
@@ -154,7 +106,7 @@ export function MetricChart({
               textAnchor="end"
               className="fill-(--green-11) text-[10px]"
             >
-              target {withMetricUnit(formatValue(targetValue ?? 0), unit)}
+              target {withMetricUnit(formatChartValue(targetValue ?? 0), unit)}
             </text>
           </g>
         )}
@@ -181,7 +133,7 @@ export function MetricChart({
             className="fill-(--accent-9)"
           >
             <title>
-              {`Iteration ${iteration.index}: ${withMetricUnit(formatValue(iteration.value), unit)}${iteration.summary ? ` — ${iteration.summary}` : ""}`}
+              {`Iteration ${iteration.index}: ${withMetricUnit(formatChartValue(iteration.value), unit)}${iteration.summary ? ` — ${iteration.summary}` : ""}`}
             </title>
           </circle>
         ))}
diff --git a/packages/ui/src/features/autoresearch/chartLayout.ts b/packages/ui/src/features/autoresearch/chartLayout.ts
new file mode 100644
index 0000000000..962e44ef53
--- /dev/null
+++ b/packages/ui/src/features/autoresearch/chartLayout.ts
@@ -0,0 +1,70 @@
+import type { AutoresearchIteration } from "@posthog/core/autoresearch/schemas";
+
+export interface ChartLayoutOptions {
+  width: number;
+  height: number;
+  padding: { top: number; right: number; bottom: number; left: number };
+}
+
+export interface ChartLayout {
+  x: (index: number) => number;
+  y: (value: number) => number;
+  min: number;
+  max: number;
+  valuePath: string;
+  bestPath: string;
+  targetY: number | null;
+}
+
+/**
+ * Shared geometry for the iteration metric chart. The live `MetricChart` and
+ * the report export render the same layout at different sizes, so the scale
+ * and path math lives once here — if it changed in only one of them, the
+ * exported chart would silently disagree with the on-screen one.
+ */
+export function computeChartLayout(
+  iterations: AutoresearchIteration[],
+  targetValue: number | null,
+  { width, height, padding }: ChartLayoutOptions,
+): ChartLayout | null {
+  if (iterations.length === 0) return null;
+
+  const values = iterations.map((iteration) => iteration.value);
+  const bests = iterations.map((iteration) => iteration.bestValue);
+  const all = [...values, ...bests];
+  if (targetValue !== null) all.push(targetValue);
+
+  let min = Math.min(...all);
+  let max = Math.max(...all);
+  if (min === max) {
+    min -= 1;
+    max += 1;
+  }
+  const span = max - min;
+  min -= span * 0.05;
+  max += span * 0.05;
+
+  const innerWidth = width - padding.left - padding.right;
+  const innerHeight = height - padding.top - padding.bottom;
+  const x = (index: number) =>
+    padding.left +
+    (iterations.length === 1
+      ? innerWidth / 2
+      : (index / (iterations.length - 1)) * innerWidth);
+  const y = (value: number) =>
+    padding.top + ((max - value) / (max - min)) * innerHeight;
+
+  return {
+    x,
+    y,
+    min,
+    max,
+    valuePath: iterations
+      .map((iteration, i) => `${x(i)},${y(iteration.value)}`)
+      .join(" "),
+    bestPath: iterations
+      .map((iteration, i) => `${x(i)},${y(iteration.bestValue)}`)
+      .join(" "),
+    targetY: targetValue === null ? null : y(targetValue),
+  };
+}
diff --git a/packages/ui/src/features/autoresearch/metricFormat.test.ts b/packages/ui/src/features/autoresearch/metricFormat.test.ts
new file mode 100644
index 0000000000..8eedeb6be2
--- /dev/null
+++ b/packages/ui/src/features/autoresearch/metricFormat.test.ts
@@ -0,0 +1,95 @@
+import type { AutoresearchIteration } from "@posthog/core/autoresearch/schemas";
+import { describe, expect, it } from "vitest";
+import { computeChartLayout } from "./chartLayout";
+import { deltaTone, formatChartValue, formatMetricDelta } from "./metricFormat";
+
+describe("deltaTone", () => {
+  it.each([
+    [null, "minimize", "neutral"],
+    [0, "minimize", "neutral"],
+    [-10, "minimize", "improved"],
+    [10, "minimize", "worsened"],
+    [10, "maximize", "improved"],
+    [-10, "maximize", "worsened"],
+  ] as const)("delta %s under %s is %s", (delta, direction, expected) => {
+    expect(deltaTone(delta, direction)).toBe(expected);
+  });
+});
+
+describe("formatMetricDelta", () => {
+  it.each([
+    [null, "kB", "—"],
+    [10.5, "kB", "+10.5 kB"],
+    [-3, null, "-3"],
+    [2, "%", "+2%"],
+  ])("formats %s with unit %s as %s", (delta, unit, expected) => {
+    expect(formatMetricDelta(delta, unit)).toBe(expected);
+  });
+});
+
+describe("formatChartValue", () => {
+  it.each([
+    [1234.56, "1,235"],
+    [999.456, "999.46"],
+    [-1500.4, "-1,500"],
+  ])("formats %s as %s", (value, expected) => {
+    expect(formatChartValue(value)).toBe(expected);
+  });
+});
+
+describe("computeChartLayout", () => {
+  const options = {
+    width: 100,
+    height: 100,
+    padding: { top: 10, right: 10, bottom: 10, left: 10 },
+  };
+
+  function iteration(
+    overrides: Partial<AutoresearchIteration>,
+  ): AutoresearchIteration {
+    return {
+      index: 1,
+      value: 0,
+      bestValue: 0,
+      delta: null,
+      summary: null,
+      at: 0,
+      ...overrides,
+    };
+  }
+
+  it("returns null without iterations", () => {
+    expect(computeChartLayout([], null, options)).toBeNull();
+  });
+
+  it("centers a single iteration and spans the value range", () => {
+    const layout = computeChartLayout(
+      [iteration({ value: 5, bestValue: 5 })],
+      null,
+      options,
+    );
+    expect(layout).not.toBeNull();
+    // Lone point sits mid-chart; equal min/max pad out to a 2-unit span
+    // plus the 5% fudge on each side.
+    expect(layout?.x(0)).toBe(50);
+    expect(layout?.min).toBeCloseTo(3.9);
+    expect(layout?.max).toBeCloseTo(6.1);
+    expect(layout?.targetY).toBeNull();
+  });
+
+  it("includes the target in the scale and reports its y", () => {
+    const layout = computeChartLayout(
+      [
+        iteration({ index: 1, value: 10, bestValue: 10 }),
+        iteration({ index: 2, value: 20, bestValue: 10 }),
+      ],
+      40,
+      options,
+    );
+    expect(layout).not.toBeNull();
+    if (!layout) return;
+    expect(layout.max).toBeGreaterThan(40);
+    expect(layout.targetY).toBeCloseTo(layout.y(40));
+    expect(layout.valuePath.split(" ")).toHaveLength(2);
+  });
+});
diff --git a/packages/ui/src/features/autoresearch/metricFormat.ts b/packages/ui/src/features/autoresearch/metricFormat.ts
index 2dc18cf5ff..c60c18db6a 100644
--- a/packages/ui/src/features/autoresearch/metricFormat.ts
+++ b/packages/ui/src/features/autoresearch/metricFormat.ts
@@ -1,3 +1,6 @@
+import type { AutoresearchDirection } from "@posthog/core/autoresearch/schemas";
+import { isImprovement } from "@posthog/core/autoresearch/stats";
+
 /**
  * Attach the run's metric unit to an already-formatted value. Percent hugs
  * the number ("42%"); every other unit gets a space ("412 kB"). A null unit
@@ -7,3 +10,49 @@ export function withMetricUnit(formatted: string, unit: string | null): string {
   if (!unit) return formatted;
   return unit.startsWith("%") ? `${formatted}${unit}` : `${formatted} ${unit}`;
 }
+
+/** Full-precision metric value, as shown in stats and iteration tables. */
+export const metricNumberFormat = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 4,
+});
+
+const wholeNumberFormat = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 0,
+});
+const fractionalNumberFormat = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 2,
+});
+
+/** Compact metric value for chart axis labels: no fraction past 1000. */
+export function formatChartValue(value: number): string {
+  return (
+    Math.abs(value) >= 1000 ? wholeNumberFormat : fractionalNumberFormat
+  ).format(value);
+}
+
+/**
+ * Whether an iteration's delta moved the metric the right way. Renderers map
+ * a tone to their own color space (Radix tokens on screen, fixed hex in the
+ * exported report).
+ */
+export type DeltaTone = "improved" | "worsened" | "neutral";
+
+export function deltaTone(
+  delta: number | null,
+  direction: AutoresearchDirection,
+): DeltaTone {
+  if (delta === null || delta === 0) return "neutral";
+  return isImprovement(delta, 0, direction) ? "improved" : "worsened";
+}
+
+/** Signed delta with unit ("+1.5 kB"); "—" for the baseline iteration. */
+export function formatMetricDelta(
+  delta: number | null,
+  unit: string | null,
+): string {
+  if (delta === null) return "—";
+  return withMetricUnit(
+    `${delta > 0 ? "+" : ""}${metricNumberFormat.format(delta)}`,
+    unit,
+  );
+}
diff --git a/packages/ui/src/features/autoresearch/reportExport.ts b/packages/ui/src/features/autoresearch/reportExport.ts
index b928bc428e..2d9ca5471d 100644
--- a/packages/ui/src/features/autoresearch/reportExport.ts
+++ b/packages/ui/src/features/autoresearch/reportExport.ts
@@ -6,16 +6,19 @@
  * `foreignObject` drawn onto a canvas — never taints the canvas.
  */
 import type {
-  AutoresearchIteration,
   AutoresearchRun,
   AutoresearchRunStatus,
 } from "@posthog/core/autoresearch/schemas";
+import { computeBest, summarizeRun } from "@posthog/core/autoresearch/stats";
+import { computeChartLayout } from "./chartLayout";
 import {
-  computeBest,
-  isImprovement,
-  summarizeRun,
-} from "@posthog/core/autoresearch/stats";
-import { withMetricUnit } from "./metricFormat";
+  type DeltaTone,
+  deltaTone,
+  formatChartValue,
+  formatMetricDelta,
+  metricNumberFormat,
+  withMetricUnit,
+} from "./metricFormat";
 
 export const REPORT_WIDTH = 760;
 
@@ -49,15 +52,6 @@ const STATUS_LABEL: Record<AutoresearchRunStatus, string> = {
   failed: "Failed",
 };
 
-const numberFormat = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 4,
-});
-const wholeNumberFormat = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 0,
-});
-const fractionalNumberFormat = new Intl.NumberFormat("en-US", {
-  maximumFractionDigits: 2,
-});
 const dateTimeFormat = new Intl.DateTimeFormat("en-US", {
   year: "numeric",
   month: "short",
@@ -75,51 +69,21 @@ function escapeHtml(value: string): string {
     .replace(/'/g, "&#39;");
 }
 
-function formatAxisValue(value: number): string {
-  return (
-    Math.abs(value) >= 1000 ? wholeNumberFormat : fractionalNumberFormat
-  ).format(value);
-}
-
-/** Same layout math as `MetricChart`, emitted as a standalone SVG string. */
+/**
+ * The metric chart as a standalone SVG string, sharing `computeChartLayout`
+ * with the live `MetricChart` so the two can't drift apart.
+ */
 function buildChartSvg(run: AutoresearchRun): string {
   const { iterations } = run;
-  if (iterations.length === 0) return "";
-  const unit = run.metricUnit;
   const targetValue = run.config.targetValue;
-
-  const all = iterations.flatMap((iteration) => [
-    iteration.value,
-    iteration.bestValue,
-  ]);
-  if (targetValue !== null) all.push(targetValue);
-
-  let min = Math.min(...all);
-  let max = Math.max(...all);
-  if (min === max) {
-    min -= 1;
-    max += 1;
-  }
-  const span = max - min;
-  min -= span * 0.05;
-  max += span * 0.05;
-
-  const innerWidth = CHART_WIDTH - CHART_PADDING.left - CHART_PADDING.right;
-  const innerHeight = CHART_HEIGHT - CHART_PADDING.top - CHART_PADDING.bottom;
-  const x = (index: number) =>
-    CHART_PADDING.left +
-    (iterations.length === 1
-      ? innerWidth / 2
-      : (index / (iterations.length - 1)) * innerWidth);
-  const y = (value: number) =>
-    CHART_PADDING.top + ((max - value) / (max - min)) * innerHeight;
-
-  const valuePath = iterations
-    .map((iteration, i) => `${x(i)},${y(iteration.value)}`)
-    .join(" ");
-  const bestPath = iterations
-    .map((iteration, i) => `${x(i)},${y(iteration.bestValue)}`)
-    .join(" ");
+  const layout = computeChartLayout(iterations, targetValue, {
+    width: CHART_WIDTH,
+    height: CHART_HEIGHT,
+    padding: CHART_PADDING,
+  });
+  if (!layout) return "";
+  const unit = run.metricUnit;
+  const { x, y, min, max, valuePath, bestPath, targetY } = layout;
 
   const dots = iterations
     .map(
@@ -129,10 +93,10 @@ function buildChartSvg(run: AutoresearchRun): string {
     .join("");
 
   const target =
-    targetValue === null
+    targetY === null
       ? ""
-      : `<line x1="${CHART_PADDING.left}" y1="${y(targetValue)}" x2="${CHART_WIDTH - CHART_PADDING.right}" y2="${y(targetValue)}" stroke="${COLOR.target}" stroke-dasharray="2 4"/>` +
-        `<text x="${CHART_WIDTH - CHART_PADDING.right}" y="${y(targetValue) - 4}" text-anchor="end" fill="${COLOR.targetText}" font-size="10">target ${escapeHtml(withMetricUnit(formatAxisValue(targetValue), unit))}</text>`;
+      : `<line x1="${CHART_PADDING.left}" y1="${targetY}" x2="${CHART_WIDTH - CHART_PADDING.right}" y2="${targetY}" stroke="${COLOR.target}" stroke-dasharray="2 4"/>` +
+        `<text x="${CHART_WIDTH - CHART_PADDING.right}" y="${targetY - 4}" text-anchor="end" fill="${COLOR.targetText}" font-size="10">target ${escapeHtml(withMetricUnit(formatChartValue(targetValue ?? 0), unit))}</text>`;
 
   const lastIndex =
     iterations.length > 1
@@ -142,8 +106,8 @@ function buildChartSvg(run: AutoresearchRun): string {
   return (
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${CHART_WIDTH} ${CHART_HEIGHT}" width="${CHART_WIDTH}" height="${CHART_HEIGHT}" role="img">` +
     `<rect x="0.5" y="0.5" width="${CHART_WIDTH - 1}" height="${CHART_HEIGHT - 1}" rx="6" fill="${COLOR.surface}" stroke="${COLOR.border}"/>` +
-    `<text x="${CHART_PADDING.left - 6}" y="${y(max) + 10}" text-anchor="end" fill="${COLOR.faint}" font-size="10">${escapeHtml(withMetricUnit(formatAxisValue(max), unit))}</text>` +
-    `<text x="${CHART_PADDING.left - 6}" y="${y(min)}" text-anchor="end" fill="${COLOR.faint}" font-size="10">${escapeHtml(withMetricUnit(formatAxisValue(min), unit))}</text>` +
+    `<text x="${CHART_PADDING.left - 6}" y="${y(max) + 10}" text-anchor="end" fill="${COLOR.faint}" font-size="10">${escapeHtml(withMetricUnit(formatChartValue(max), unit))}</text>` +
+    `<text x="${CHART_PADDING.left - 6}" y="${y(min)}" text-anchor="end" fill="${COLOR.faint}" font-size="10">${escapeHtml(withMetricUnit(formatChartValue(min), unit))}</text>` +
     `<line x1="${CHART_PADDING.left}" y1="${CHART_PADDING.top}" x2="${CHART_PADDING.left}" y2="${CHART_HEIGHT - CHART_PADDING.bottom}" stroke="${COLOR.axis}"/>` +
     `<line x1="${CHART_PADDING.left}" y1="${CHART_HEIGHT - CHART_PADDING.bottom}" x2="${CHART_WIDTH - CHART_PADDING.right}" y2="${CHART_HEIGHT - CHART_PADDING.bottom}" stroke="${COLOR.axis}"/>` +
     target +
@@ -156,24 +120,11 @@ function buildChartSvg(run: AutoresearchRun): string {
   );
 }
 
-function formatDelta(
-  iteration: AutoresearchIteration,
-  unit: string | null,
-): string {
-  if (iteration.delta === null) return "—";
-  return withMetricUnit(
-    `${iteration.delta > 0 ? "+" : ""}${numberFormat.format(iteration.delta)}`,
-    unit,
-  );
-}
-
-function deltaColor(
-  delta: number | null,
-  direction: AutoresearchRun["config"]["direction"],
-): string {
-  if (delta === null || delta === 0) return COLOR.muted;
-  return isImprovement(delta, 0, direction) ? COLOR.good : COLOR.bad;
-}
+const DELTA_TONE_COLOR: Record<DeltaTone, string> = {
+  improved: COLOR.good,
+  worsened: COLOR.bad,
+  neutral: COLOR.muted,
+};
 
 function buildIterationsTable(run: AutoresearchRun): string {
   if (run.iterations.length === 0) {
@@ -189,8 +140,8 @@ function buildIterationsTable(run: AutoresearchRun): string {
       return (
         "<tr>" +
         `<td>${iteration.index}</td>` +
-        `<td class="num">${escapeHtml(withMetricUnit(numberFormat.format(iteration.value), unit))}${bestTag}</td>` +
-        `<td class="num" style="color:${deltaColor(iteration.delta, run.config.direction)}">${escapeHtml(formatDelta(iteration, unit))}</td>` +
+        `<td class="num">${escapeHtml(withMetricUnit(metricNumberFormat.format(iteration.value), unit))}${bestTag}</td>` +
+        `<td class="num" style="color:${DELTA_TONE_COLOR[deltaTone(iteration.delta, run.config.direction)]}">${escapeHtml(formatMetricDelta(iteration.delta, unit))}</td>` +
         `<td>${iteration.summary ? escapeHtml(iteration.summary) : "—"}</td>` +
         `<td class="muted">${escapeHtml(dateTimeFormat.format(iteration.at))}</td>` +
         "</tr>"
@@ -253,13 +204,13 @@ export function buildReportBody(
     statCard(
       "Best",
       summary.best
-        ? `${withMetricUnit(numberFormat.format(summary.best.value), unit)} (iter ${summary.best.index})`
+        ? `${withMetricUnit(metricNumberFormat.format(summary.best.value), unit)} (iter ${summary.best.index})`
         : "—",
     ),
     statCard(
       "Last",
       summary.last
-        ? withMetricUnit(numberFormat.format(summary.last.value), unit)
+        ? withMetricUnit(metricNumberFormat.format(summary.last.value), unit)
         : "—",
     ),
     statCard(
@@ -270,7 +221,10 @@ export function buildReportBody(
       "Target",
       run.config.targetValue === null
         ? "—"
-        : withMetricUnit(numberFormat.format(run.config.targetValue), unit),
+        : withMetricUnit(
+            metricNumberFormat.format(run.config.targetValue),
+            unit,
+          ),
     ),
   ].join("");
 

From 3f51ab9aabee1ffa09b0dcef377607417873a9cf Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul.dambra@gmail.com>
Date: Tue, 7 Jul 2026 13:03:28 +0100
Subject: [PATCH 5/5] feat(autoresearch): render run dashboard with
 quill-charts, drop report export
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Direction change after review discussion: the quill migration wins over the
export feature.

- MetricChart is now a quill-charts LineChart: value series with point dots,
  dashed best-so-far frontier, goal ReferenceLine for the target (kept
  on-plot via valueDomain include), crosshair + tooltips, theme-aware.
- RunStats cards are quill-charts MetricCards; Best and Last carry
  sparklines of the frontier and raw values.
- The HTML/PNG report export is removed: reportExport, chartLayout, the
  Export button, and their tests. The shared metricFormat helpers stay.
- Canvas series colors use the resolved theme palette — canvas strokeStyle
  ignores var(--…) strings, so explicit CSS-variable colors never painted.
- Adds an Autoresearch/RunDashboard storybook story (in-progress minimize
  run, completed maximize run, empty state) for visual review.

Generated-By: PostHog Code
Task-Id: c0f4e30c-8329-433a-a2cb-0565df4ecb8b
---
 .../AutoresearchPanel.stories.tsx             | 164 ++++++++
 .../autoresearch/AutoresearchPanel.tsx        | 155 +++-----
 .../src/features/autoresearch/MetricChart.tsx | 197 ++++------
 .../src/features/autoresearch/chartLayout.ts  |  70 ----
 .../autoresearch/metricFormat.test.ts         |  59 ---
 .../autoresearch/reportExport.test.ts         | 126 ------
 .../src/features/autoresearch/reportExport.ts | 372 ------------------
 7 files changed, 292 insertions(+), 851 deletions(-)
 create mode 100644 packages/ui/src/features/autoresearch/AutoresearchPanel.stories.tsx
 delete mode 100644 packages/ui/src/features/autoresearch/chartLayout.ts
 delete mode 100644 packages/ui/src/features/autoresearch/reportExport.test.ts
 delete mode 100644 packages/ui/src/features/autoresearch/reportExport.ts

diff --git a/packages/ui/src/features/autoresearch/AutoresearchPanel.stories.tsx b/packages/ui/src/features/autoresearch/AutoresearchPanel.stories.tsx
new file mode 100644
index 0000000000..cc20962a30
--- /dev/null
+++ b/packages/ui/src/features/autoresearch/AutoresearchPanel.stories.tsx
@@ -0,0 +1,164 @@
+import type {
+  AutoresearchIteration,
+  AutoresearchRun,
+} from "@posthog/core/autoresearch/schemas";
+import { Flex } from "@radix-ui/themes";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RunStats } from "./AutoresearchPanel";
+import { IterationsTable } from "./IterationsTable";
+import { MetricChart } from "./MetricChart";
+
+/**
+ * The run dashboard's presentational stack — stat cards, metric chart, and
+ * iterations table — as `AutoresearchPanel` composes them, minus the header
+ * controls and dialogs (which need a live service).
+ */
+function RunDashboard({ run }: { run: AutoresearchRun }) {
+  return (
+    <Flex direction="column" gap="4">
+      <RunStats run={run} />
+      <MetricChart
+        iterations={run.iterations}
+        direction={run.config.direction}
+        targetValue={run.config.targetValue}
+        metricName={run.metricName ?? "the metric"}
+        unit={run.metricUnit}
+      />
+      <IterationsTable
+        iterations={run.iterations}
+        direction={run.config.direction}
+        unit={run.metricUnit}
+      />
+    </Flex>
+  );
+}
+
+const BASE_AT = Date.parse("2026-07-07T09:00:00Z");
+
+const iterationsFrom = (
+  values: number[],
+  direction: AutoresearchRun["config"]["direction"],
+  summaries: (string | null)[] = [],
+): AutoresearchIteration[] => {
+  let best: number | null = null;
+  return values.map((value, i) => {
+    best =
+      best === null || (direction === "minimize" ? value < best : value > best)
+        ? value
+        : best;
+    return {
+      index: i + 1,
+      value,
+      bestValue: best,
+      delta: i === 0 ? null : value - values[i - 1],
+      summary: summaries[i] ?? null,
+      at: BASE_AT + i * 8 * 60_000,
+    };
+  });
+};
+
+const run = (overrides: Partial<AutoresearchRun> = {}): AutoresearchRun => ({
+  id: "run-1",
+  config: {
+    taskId: "task-1",
+    direction: "minimize",
+    targetValue: 380,
+    maxIterations: 12,
+    implementModel: null,
+    measureModel: null,
+    implementEffort: null,
+    measureEffort: null,
+    instructions: "Shrink the renderer bundle without breaking tests.",
+  },
+  status: "running",
+  metricName: "bundle size",
+  metricUnit: "kB",
+  phase: null,
+  originalModel: null,
+  originalEffort: null,
+  iterations: [],
+  startedAt: BASE_AT,
+  endedAt: null,
+  endReason: null,
+  interruptedReason: null,
+  lastError: null,
+  ...overrides,
+});
+
+const meta: Meta<typeof RunDashboard> = {
+  title: "Autoresearch/RunDashboard",
+  component: RunDashboard,
+  // Match the panel's column width so cards, chart, and table size realistically.
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 760, margin: "2rem auto", padding: "0 1rem" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof RunDashboard>;
+
+/** A minimize run mid-flight: noisy progress, best-so-far frontier, target line. */
+export const MinimizeInProgress: Story = {
+  args: {
+    run: run({
+      iterations: iterationsFrom(
+        [512, 498, 505, 461, 442, 449, 407, 398],
+        "minimize",
+        [
+          "Baseline",
+          "Tree-shake icon imports",
+          "Revert: broke lazy routes",
+          "Split vendor chunk",
+          "Drop moment locales",
+          "Inline critical CSS (regression)",
+          "Lazy-load diff worker",
+          "Dedupe zod versions",
+        ],
+      ),
+    }),
+  },
+};
+
+/** A completed maximize run with no target — the loop spent its budget. */
+export const MaximizeCompleted: Story = {
+  args: {
+    run: run({
+      status: "completed",
+      endedAt: BASE_AT + 10 * 8 * 60_000,
+      endReason: "max-iterations",
+      metricName: "cache hit rate",
+      metricUnit: "%",
+      config: {
+        ...run().config,
+        direction: "maximize",
+        targetValue: null,
+        maxIterations: 10,
+      },
+      iterations: iterationsFrom(
+        [62, 71, 68, 74, 79, 77, 83, 82, 86, 85],
+        "maximize",
+        [
+          "Baseline",
+          "Warm cache on boot",
+          null,
+          "Bigger LRU",
+          null,
+          null,
+          "Precompute keys",
+          null,
+          "Batch invalidations",
+          null,
+        ],
+      ),
+    }),
+  },
+};
+
+/** Before the first metric report arrives: empty cards, chart, and table. */
+export const NoIterationsYet: Story = {
+  args: { run: run() },
+};
diff --git a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
index 0f091a57ce..756b8508ec 100644
--- a/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
+++ b/packages/ui/src/features/autoresearch/AutoresearchPanel.tsx
@@ -1,11 +1,4 @@
-import {
-  ChartLineUp,
-  Export,
-  Pause,
-  Play,
-  Plus,
-  Stop,
-} from "@phosphor-icons/react";
+import { ChartLineUp, Pause, Play, Plus, Stop } from "@phosphor-icons/react";
 import type { AutoresearchService } from "@posthog/core/autoresearch/autoresearch";
 import { AUTORESEARCH_SERVICE } from "@posthog/core/autoresearch/identifiers";
 import type {
@@ -21,17 +14,9 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "@posthog/quill";
-import { toast } from "@posthog/ui/primitives/toast";
-import {
-  Badge,
-  Button,
-  Callout,
-  DropdownMenu,
-  Flex,
-  Select,
-  Text,
-} from "@radix-ui/themes";
-import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { MetricCard, useChartTheme } from "@posthog/quill-charts";
+import { Badge, Button, Callout, Flex, Select, Text } from "@radix-ui/themes";
+import { useEffect, useMemo, useState } from "react";
 import {
   getConfigOptionByCategory,
   useSessionStore,
@@ -41,7 +26,6 @@ import { AutoresearchConfigDialog } from "./AutoresearchConfigDialog";
 import { IterationsTable } from "./IterationsTable";
 import { MetricChart } from "./MetricChart";
 import { metricNumberFormat, withMetricUnit } from "./metricFormat";
-import { exportRunAsHtml, exportRunAsPng } from "./reportExport";
 import {
   type AutoresearchModelOption,
   stageValueLabel,
@@ -271,36 +255,6 @@ function RunHeader({
           </Badge>
         </Flex>
         <Flex align="center" gap="2" className="shrink-0">
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <Button
-                size="1"
-                variant="soft"
-                color="gray"
-                data-attr="autoresearch-export-trigger"
-              >
-                <Export size={12} /> Export
-              </Button>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content size="1">
-              <DropdownMenu.Item
-                data-attr="autoresearch-export-html"
-                onSelect={() => exportRunAsHtml(run)}
-              >
-                HTML file
-              </DropdownMenu.Item>
-              <DropdownMenu.Item
-                data-attr="autoresearch-export-png"
-                onSelect={() => {
-                  void exportRunAsPng(run).catch(() =>
-                    toast.error("Couldn't render the report image"),
-                  );
-                }}
-              >
-                PNG image
-              </DropdownMenu.Item>
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
           {runs.length > 1 && (
             <Select.Root value={run.id} onValueChange={onSelectRun} size="1">
               <Select.Trigger variant="soft" />
@@ -421,74 +375,69 @@ function PendingPermissionNotice({
   );
 }
 
-function RunStats({ run }: { run: AutoresearchRun }) {
+export function RunStats({ run }: { run: AutoresearchRun }) {
   const summary = useMemo(() => summarizeRun(run), [run]);
+  const theme = useChartTheme();
   const unit = run.metricUnit;
+  const iterations = run.iterations;
+  const labels = useMemo(
+    () => iterations.map((iteration) => `iter ${iteration.index}`),
+    [iterations],
+  );
+  const formatMetricValue = (value: number) =>
+    Number.isNaN(value)
+      ? "—"
+      : withMetricUnit(metricNumberFormat.format(value), unit);
 
   return (
     <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-      <StatCard
-        label="Best"
-        value={
-          summary.best ? (
-            <>
-              {withMetricUnit(
-                metricNumberFormat.format(summary.best.value),
-                unit,
-              )}
-              <Text size="1" color="gray">
-                {" "}
-                (iter {summary.best.index})
-              </Text>
-            </>
-          ) : (
-            "—"
-          )
+      <MetricCard
+        title="Best"
+        value={summary.best?.value ?? Number.NaN}
+        data={
+          iterations.length > 0
+            ? iterations.map((iteration) => iteration.bestValue)
+            : undefined
         }
+        labels={labels}
+        theme={theme}
+        formatValue={formatMetricValue}
+        change={null}
+        subtitle={summary.best ? `iter ${summary.best.index}` : undefined}
+        dataAttr="autoresearch-stat-best"
       />
-      <StatCard
-        label="Last"
-        value={
-          summary.last
-            ? withMetricUnit(
-                metricNumberFormat.format(summary.last.value),
-                unit,
-              )
-            : "—"
+      <MetricCard
+        title="Last"
+        value={summary.last?.value ?? Number.NaN}
+        data={
+          iterations.length > 0
+            ? iterations.map((iteration) => iteration.value)
+            : undefined
         }
+        labels={labels}
+        theme={theme}
+        formatValue={formatMetricValue}
+        change={null}
+        dataAttr="autoresearch-stat-last"
       />
-      <StatCard
-        label="Iterations"
-        value={`${summary.iterationCount} / ${run.config.maxIterations}`}
+      <MetricCard
+        title="Iterations"
+        value={summary.iterationCount}
+        formatValue={(value) => `${value} / ${run.config.maxIterations}`}
+        change={null}
+        dataAttr="autoresearch-stat-iterations"
       />
-      <StatCard
-        label="Target"
-        value={
-          run.config.targetValue === null
-            ? "—"
-            : withMetricUnit(
-                metricNumberFormat.format(run.config.targetValue),
-                unit,
-              )
-        }
+      <MetricCard
+        title="Target"
+        value={run.config.targetValue ?? Number.NaN}
+        formatValue={formatMetricValue}
+        change={null}
+        dataAttr="autoresearch-stat-target"
       />
     </div>
   );
 }
 
-function StatCard({ label, value }: { label: string; value: ReactNode }) {
-  return (
-    <div className="rounded-md border border-(--gray-5) bg-(--gray-2) px-3 py-2">
-      <Text as="div" size="1" color="gray">
-        {label}
-      </Text>
-      <Text as="div" size="2" weight="medium" className="tabular-nums">
-        {value}
-      </Text>
-    </div>
-  );
-}
-
 function stageText(
   model: string | null,
   effort: string | null,
diff --git a/packages/ui/src/features/autoresearch/MetricChart.tsx b/packages/ui/src/features/autoresearch/MetricChart.tsx
index 0e6002e572..d20bc3a7b6 100644
--- a/packages/ui/src/features/autoresearch/MetricChart.tsx
+++ b/packages/ui/src/features/autoresearch/MetricChart.tsx
@@ -2,15 +2,16 @@ import type {
   AutoresearchDirection,
   AutoresearchIteration,
 } from "@posthog/core/autoresearch/schemas";
+import {
+  LineChart,
+  ReferenceLine,
+  type Series,
+  useChartTheme,
+} from "@posthog/quill-charts";
 import { Text } from "@radix-ui/themes";
 import { useMemo } from "react";
-import { computeChartLayout } from "./chartLayout";
 import { formatChartValue, withMetricUnit } from "./metricFormat";
 
-const WIDTH = 640;
-const HEIGHT = 220;
-const PADDING = { top: 12, right: 16, bottom: 24, left: 52 };
-
 interface MetricChartProps {
   iterations: AutoresearchIteration[];
   direction: AutoresearchDirection;
@@ -30,17 +31,37 @@ export function MetricChart({
   metricName,
   unit,
 }: MetricChartProps) {
-  const chart = useMemo(
-    () =>
-      computeChartLayout(iterations, targetValue, {
-        width: WIDTH,
-        height: HEIGHT,
-        padding: PADDING,
-      }),
-    [iterations, targetValue],
+  const theme = useChartTheme();
+  // Canvas colors must be concrete — `var(--…)` strings don't paint. The
+  // theme's palette is already resolved from CSS variables.
+  const valueColor = theme.colors[0] ?? "#1d4aff";
+  const bestColor = theme.axisColor ?? "#8b8d98";
+
+  const series: Series[] = useMemo(
+    () => [
+      {
+        key: "value",
+        label: "value",
+        data: iterations.map((iteration) => iteration.value),
+        color: valueColor,
+        points: { radius: 3 },
+      },
+      {
+        key: "best",
+        label: "best so far",
+        data: iterations.map((iteration) => iteration.bestValue),
+        color: bestColor,
+        stroke: { pattern: [4, 4] },
+      },
+    ],
+    [iterations, valueColor, bestColor],
+  );
+  const labels = useMemo(
+    () => iterations.map((iteration) => String(iteration.index)),
+    [iterations],
   );
 
-  if (!chart) {
+  if (iterations.length === 0) {
     return (
       <div className="flex h-[220px] items-center justify-center rounded-md border border-(--gray-5) bg-(--gray-2)">
         <Text size="1" color="gray">
@@ -51,119 +72,53 @@ export function MetricChart({
   }
 
   return (
-    <figure className="m-0">
-      <svg
-        viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
-        className="h-auto w-full rounded-md border border-(--gray-5) bg-(--gray-2)"
-        role="img"
-        aria-label={`${metricName} per iteration (${direction})`}
-      >
-        {/* y-axis extremes */}
-        <text
-          x={PADDING.left - 6}
-          y={chart.y(chart.max) + 10}
-          textAnchor="end"
-          className="fill-(--gray-10) text-[10px]"
+    <figure
+      className="m-0"
+      role="img"
+      aria-label={`${metricName} per iteration (${direction})`}
+    >
+      {/* flex-col + fixed height: the quill chart sizes its canvas by filling
+          a flex-column parent; a plain block collapses it to 0. */}
+      <div className="flex h-[240px] w-full flex-col rounded-md border border-(--gray-5) bg-(--gray-2) p-2">
+        <LineChart
+          series={series}
+          labels={labels}
+          config={{
+            floatBaseline: true,
+            showAxisLines: true,
+            showCrosshair: true,
+            yTickFormatter: (value) =>
+              withMetricUnit(formatChartValue(value), unit),
+            // Keep an off-scale target visible instead of clipping it.
+            valueDomain:
+              targetValue === null ? undefined : { include: [targetValue] },
+          }}
+          theme={theme}
+          dataAttr="autoresearch-metric-chart"
         >
-          {withMetricUnit(formatChartValue(chart.max), unit)}
-        </text>
-        <text
-          x={PADDING.left - 6}
-          y={chart.y(chart.min)}
-          textAnchor="end"
-          className="fill-(--gray-10) text-[10px]"
-        >
-          {withMetricUnit(formatChartValue(chart.min), unit)}
-        </text>
-        <line
-          x1={PADDING.left}
-          y1={PADDING.top}
-          x2={PADDING.left}
-          y2={HEIGHT - PADDING.bottom}
-          className="stroke-(--gray-6)"
-        />
-        <line
-          x1={PADDING.left}
-          y1={HEIGHT - PADDING.bottom}
-          x2={WIDTH - PADDING.right}
-          y2={HEIGHT - PADDING.bottom}
-          className="stroke-(--gray-6)"
-        />
-
-        {chart.targetY !== null && (
-          <g>
-            <line
-              x1={PADDING.left}
-              y1={chart.targetY}
-              x2={WIDTH - PADDING.right}
-              y2={chart.targetY}
-              strokeDasharray="2 4"
-              className="stroke-(--green-9)"
+          {targetValue !== null && (
+            <ReferenceLine
+              value={targetValue}
+              variant="goal"
+              label={`target ${withMetricUnit(formatChartValue(targetValue), unit)}`}
+              style={{ color: "var(--green-9)" }}
             />
-            <text
-              x={WIDTH - PADDING.right}
-              y={chart.targetY - 4}
-              textAnchor="end"
-              className="fill-(--green-11) text-[10px]"
-            >
-              target {withMetricUnit(formatChartValue(targetValue ?? 0), unit)}
-            </text>
-          </g>
-        )}
-
-        <polyline
-          points={chart.bestPath}
-          fill="none"
-          strokeDasharray="4 4"
-          strokeWidth={1.5}
-          className="stroke-(--gray-9)"
-        />
-        <polyline
-          points={chart.valuePath}
-          fill="none"
-          strokeWidth={2}
-          className="stroke-(--accent-9)"
-        />
-        {iterations.map((iteration, i) => (
-          <circle
-            key={iteration.index}
-            cx={chart.x(i)}
-            cy={chart.y(iteration.value)}
-            r={3}
-            className="fill-(--accent-9)"
-          >
-            <title>
-              {`Iteration ${iteration.index}: ${withMetricUnit(formatChartValue(iteration.value), unit)}${iteration.summary ? ` — ${iteration.summary}` : ""}`}
-            </title>
-          </circle>
-        ))}
-
-        {/* x-axis extremes */}
-        <text
-          x={chart.x(0)}
-          y={HEIGHT - PADDING.bottom + 14}
-          textAnchor="middle"
-          className="fill-(--gray-10) text-[10px]"
-        >
-          1
-        </text>
-        {iterations.length > 1 && (
-          <text
-            x={chart.x(iterations.length - 1)}
-            y={HEIGHT - PADDING.bottom + 14}
-            textAnchor="middle"
-            className="fill-(--gray-10) text-[10px]"
-          >
-            {iterations[iterations.length - 1].index}
-          </text>
-        )}
-      </svg>
+          )}
+        </LineChart>
+      </div>
       <figcaption className="mt-1 flex items-center gap-3 text-(--gray-10) text-[11px]">
         <span className="flex items-center gap-1">
-          <span className="inline-block h-[2px] w-4 bg-(--accent-9)" /> value
+          <span
+            className="inline-block h-[2px] w-4"
+            style={{ background: valueColor }}
+          />{" "}
+          value
         </span>
         <span className="flex items-center gap-1">
-          <span className="inline-block h-[2px] w-4 border-(--gray-9) border-t border-dashed" />{" "}
+          <span
+            className="inline-block h-[2px] w-4 border-t border-dashed"
+            style={{ borderColor: bestColor }}
+          />{" "}
           best so far
         </span>
       </figcaption>
diff --git a/packages/ui/src/features/autoresearch/chartLayout.ts b/packages/ui/src/features/autoresearch/chartLayout.ts
deleted file mode 100644
index 962e44ef53..0000000000
--- a/packages/ui/src/features/autoresearch/chartLayout.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { AutoresearchIteration } from "@posthog/core/autoresearch/schemas";
-
-export interface ChartLayoutOptions {
-  width: number;
-  height: number;
-  padding: { top: number; right: number; bottom: number; left: number };
-}
-
-export interface ChartLayout {
-  x: (index: number) => number;
-  y: (value: number) => number;
-  min: number;
-  max: number;
-  valuePath: string;
-  bestPath: string;
-  targetY: number | null;
-}
-
-/**
- * Shared geometry for the iteration metric chart. The live `MetricChart` and
- * the report export render the same layout at different sizes, so the scale
- * and path math lives once here — if it changed in only one of them, the
- * exported chart would silently disagree with the on-screen one.
- */
-export function computeChartLayout(
-  iterations: AutoresearchIteration[],
-  targetValue: number | null,
-  { width, height, padding }: ChartLayoutOptions,
-): ChartLayout | null {
-  if (iterations.length === 0) return null;
-
-  const values = iterations.map((iteration) => iteration.value);
-  const bests = iterations.map((iteration) => iteration.bestValue);
-  const all = [...values, ...bests];
-  if (targetValue !== null) all.push(targetValue);
-
-  let min = Math.min(...all);
-  let max = Math.max(...all);
-  if (min === max) {
-    min -= 1;
-    max += 1;
-  }
-  const span = max - min;
-  min -= span * 0.05;
-  max += span * 0.05;
-
-  const innerWidth = width - padding.left - padding.right;
-  const innerHeight = height - padding.top - padding.bottom;
-  const x = (index: number) =>
-    padding.left +
-    (iterations.length === 1
-      ? innerWidth / 2
-      : (index / (iterations.length - 1)) * innerWidth);
-  const y = (value: number) =>
-    padding.top + ((max - value) / (max - min)) * innerHeight;
-
-  return {
-    x,
-    y,
-    min,
-    max,
-    valuePath: iterations
-      .map((iteration, i) => `${x(i)},${y(iteration.value)}`)
-      .join(" "),
-    bestPath: iterations
-      .map((iteration, i) => `${x(i)},${y(iteration.bestValue)}`)
-      .join(" "),
-    targetY: targetValue === null ? null : y(targetValue),
-  };
-}
diff --git a/packages/ui/src/features/autoresearch/metricFormat.test.ts b/packages/ui/src/features/autoresearch/metricFormat.test.ts
index 8eedeb6be2..d8b919efb7 100644
--- a/packages/ui/src/features/autoresearch/metricFormat.test.ts
+++ b/packages/ui/src/features/autoresearch/metricFormat.test.ts
@@ -1,6 +1,4 @@
-import type { AutoresearchIteration } from "@posthog/core/autoresearch/schemas";
 import { describe, expect, it } from "vitest";
-import { computeChartLayout } from "./chartLayout";
 import { deltaTone, formatChartValue, formatMetricDelta } from "./metricFormat";
 
 describe("deltaTone", () => {
@@ -36,60 +34,3 @@ describe("formatChartValue", () => {
     expect(formatChartValue(value)).toBe(expected);
   });
 });
-
-describe("computeChartLayout", () => {
-  const options = {
-    width: 100,
-    height: 100,
-    padding: { top: 10, right: 10, bottom: 10, left: 10 },
-  };
-
-  function iteration(
-    overrides: Partial<AutoresearchIteration>,
-  ): AutoresearchIteration {
-    return {
-      index: 1,
-      value: 0,
-      bestValue: 0,
-      delta: null,
-      summary: null,
-      at: 0,
-      ...overrides,
-    };
-  }
-
-  it("returns null without iterations", () => {
-    expect(computeChartLayout([], null, options)).toBeNull();
-  });
-
-  it("centers a single iteration and spans the value range", () => {
-    const layout = computeChartLayout(
-      [iteration({ value: 5, bestValue: 5 })],
-      null,
-      options,
-    );
-    expect(layout).not.toBeNull();
-    // Lone point sits mid-chart; equal min/max pad out to a 2-unit span
-    // plus the 5% fudge on each side.
-    expect(layout?.x(0)).toBe(50);
-    expect(layout?.min).toBeCloseTo(3.9);
-    expect(layout?.max).toBeCloseTo(6.1);
-    expect(layout?.targetY).toBeNull();
-  });
-
-  it("includes the target in the scale and reports its y", () => {
-    const layout = computeChartLayout(
-      [
-        iteration({ index: 1, value: 10, bestValue: 10 }),
-        iteration({ index: 2, value: 20, bestValue: 10 }),
-      ],
-      40,
-      options,
-    );
-    expect(layout).not.toBeNull();
-    if (!layout) return;
-    expect(layout.max).toBeGreaterThan(40);
-    expect(layout.targetY).toBeCloseTo(layout.y(40));
-    expect(layout.valuePath.split(" ")).toHaveLength(2);
-  });
-});
diff --git a/packages/ui/src/features/autoresearch/reportExport.test.ts b/packages/ui/src/features/autoresearch/reportExport.test.ts
deleted file mode 100644
index b20f79ae74..0000000000
--- a/packages/ui/src/features/autoresearch/reportExport.test.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import type {
-  AutoresearchIteration,
-  AutoresearchRun,
-} from "@posthog/core/autoresearch/schemas";
-import { describe, expect, it } from "vitest";
-import {
-  buildReportBody,
-  buildReportHtml,
-  reportFileName,
-} from "./reportExport";
-
-const EXPORTED_AT = new Date("2026-07-07T12:00:00Z");
-
-function makeIteration(
-  overrides: Partial<AutoresearchIteration> = {},
-): AutoresearchIteration {
-  return {
-    index: 1,
-    value: 100,
-    bestValue: 100,
-    delta: null,
-    summary: "Baseline",
-    at: Date.UTC(2026, 6, 7, 10, 0),
-    ...overrides,
-  };
-}
-
-function makeRun(overrides: Partial<AutoresearchRun> = {}): AutoresearchRun {
-  return {
-    id: "run-1",
-    config: {
-      taskId: "task-1",
-      direction: "minimize",
-      targetValue: 80,
-      maxIterations: 10,
-      implementModel: null,
-      measureModel: null,
-      implementEffort: null,
-      measureEffort: null,
-      instructions: "Shrink the bundle without breaking tests.",
-    },
-    status: "completed",
-    metricName: "bundle size",
-    metricUnit: "kB",
-    phase: null,
-    originalModel: null,
-    originalEffort: null,
-    iterations: [
-      makeIteration(),
-      makeIteration({ index: 2, value: 90, bestValue: 90, delta: -10 }),
-    ],
-    startedAt: Date.UTC(2026, 6, 7, 9, 0),
-    endedAt: Date.UTC(2026, 6, 7, 11, 0),
-    endReason: "target-reached",
-    interruptedReason: null,
-    lastError: null,
-    ...overrides,
-  };
-}
-
-describe("buildReportBody", () => {
-  it("includes the header, stats, chart, iterations, and brief", () => {
-    const body = buildReportBody(makeRun(), EXPORTED_AT);
-    expect(body).toContain("bundle size");
-    expect(body).toContain("minimize");
-    expect(body).toContain("Completed");
-    expect(body).toContain("2 / 10");
-    expect(body).toContain("<svg");
-    expect(body).toContain("target 80 kB");
-    expect(body).toContain("Baseline");
-    expect(body).toContain("Shrink the bundle without breaking tests.");
-  });
-
-  it("marks the best iteration and colors deltas by direction", () => {
-    const body = buildReportBody(makeRun(), EXPORTED_AT);
-    expect(body).toContain(">best</span>");
-    // -10 on a minimize run is an improvement.
-    expect(body).toContain("-10 kB");
-  });
-
-  it("escapes agent-provided text", () => {
-    const run = makeRun({
-      metricName: `<img src=x onerror="x">`,
-      iterations: [makeIteration({ summary: "<script>alert(1)</script>" })],
-    });
-    const body = buildReportBody(run, EXPORTED_AT);
-    expect(body).not.toContain("<script>");
-    expect(body).not.toContain("<img");
-    expect(body).toContain("&lt;script&gt;");
-  });
-
-  it("renders without iterations or target", () => {
-    const run = makeRun({
-      iterations: [],
-      config: { ...makeRun().config, targetValue: null },
-      metricName: null,
-      metricUnit: null,
-    });
-    const body = buildReportBody(run, EXPORTED_AT);
-    expect(body).toContain("Autoresearch");
-    expect(body).toContain("No iterations recorded.");
-    expect(body).not.toContain("<svg");
-  });
-});
-
-describe("buildReportHtml", () => {
-  it("produces a self-contained document with no external references", () => {
-    const html = buildReportHtml(makeRun(), EXPORTED_AT);
-    expect(html).toMatch(/^<!doctype html>/);
-    expect(html).toContain("<style>");
-    // Nothing fetched at open time: no scripts, stylesheets, or images.
-    expect(html).not.toMatch(/<(script|link|img)\b/);
-    expect(html).not.toMatch(/\b(src|href)=/);
-    expect(html).toContain("<title>bundle size — autoresearch report</title>");
-  });
-});
-
-describe("reportFileName", () => {
-  it.each([
-    ["bundle size (kB)", "autoresearch-bundle-size-kb.html"],
-    [null, "autoresearch-report.html"],
-    ["///", "autoresearch-report.html"],
-  ])("slugs %j", (metricName, expected) => {
-    expect(reportFileName(makeRun({ metricName }), "html")).toBe(expected);
-  });
-});
diff --git a/packages/ui/src/features/autoresearch/reportExport.ts b/packages/ui/src/features/autoresearch/reportExport.ts
deleted file mode 100644
index 2d9ca5471d..0000000000
--- a/packages/ui/src/features/autoresearch/reportExport.ts
+++ /dev/null
@@ -1,372 +0,0 @@
-/**
- * Dependency-free export of an autoresearch run as a standalone HTML report
- * or a PNG image. The report is generated from run data (not screenshotted
- * from the live DOM), with all styles inline and no external resources, so
- * the HTML file opens anywhere and the PNG rasterization — SVG
- * `foreignObject` drawn onto a canvas — never taints the canvas.
- */
-import type {
-  AutoresearchRun,
-  AutoresearchRunStatus,
-} from "@posthog/core/autoresearch/schemas";
-import { computeBest, summarizeRun } from "@posthog/core/autoresearch/stats";
-import { computeChartLayout } from "./chartLayout";
-import {
-  type DeltaTone,
-  deltaTone,
-  formatChartValue,
-  formatMetricDelta,
-  metricNumberFormat,
-  withMetricUnit,
-} from "./metricFormat";
-
-export const REPORT_WIDTH = 760;
-
-const CHART_WIDTH = 696;
-const CHART_HEIGHT = 220;
-const CHART_PADDING = { top: 12, right: 16, bottom: 24, left: 52 };
-
-// Fixed light-theme palette so the export looks the same regardless of the
-// app theme and needs no external stylesheets.
-const COLOR = {
-  text: "#1c2024",
-  muted: "#60646c",
-  faint: "#8b8d98",
-  border: "#e0e1e6",
-  surface: "#f9f9fb",
-  axis: "#d9d9e0",
-  accent: "#3e63dd",
-  best: "#8b8d98",
-  target: "#30a46c",
-  targetText: "#218358",
-  good: "#218358",
-  bad: "#ce2c31",
-};
-
-const STATUS_LABEL: Record<AutoresearchRunStatus, string> = {
-  running: "Running",
-  paused: "Paused",
-  interrupted: "Interrupted",
-  completed: "Completed",
-  stopped: "Stopped",
-  failed: "Failed",
-};
-
-const dateTimeFormat = new Intl.DateTimeFormat("en-US", {
-  year: "numeric",
-  month: "short",
-  day: "numeric",
-  hour: "2-digit",
-  minute: "2-digit",
-});
-
-function escapeHtml(value: string): string {
-  return value
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#39;");
-}
-
-/**
- * The metric chart as a standalone SVG string, sharing `computeChartLayout`
- * with the live `MetricChart` so the two can't drift apart.
- */
-function buildChartSvg(run: AutoresearchRun): string {
-  const { iterations } = run;
-  const targetValue = run.config.targetValue;
-  const layout = computeChartLayout(iterations, targetValue, {
-    width: CHART_WIDTH,
-    height: CHART_HEIGHT,
-    padding: CHART_PADDING,
-  });
-  if (!layout) return "";
-  const unit = run.metricUnit;
-  const { x, y, min, max, valuePath, bestPath, targetY } = layout;
-
-  const dots = iterations
-    .map(
-      (iteration, i) =>
-        `<circle cx="${x(i)}" cy="${y(iteration.value)}" r="3" fill="${COLOR.accent}"/>`,
-    )
-    .join("");
-
-  const target =
-    targetY === null
-      ? ""
-      : `<line x1="${CHART_PADDING.left}" y1="${targetY}" x2="${CHART_WIDTH - CHART_PADDING.right}" y2="${targetY}" stroke="${COLOR.target}" stroke-dasharray="2 4"/>` +
-        `<text x="${CHART_WIDTH - CHART_PADDING.right}" y="${targetY - 4}" text-anchor="end" fill="${COLOR.targetText}" font-size="10">target ${escapeHtml(withMetricUnit(formatChartValue(targetValue ?? 0), unit))}</text>`;
-
-  const lastIndex =
-    iterations.length > 1
-      ? `<text x="${x(iterations.length - 1)}" y="${CHART_HEIGHT - CHART_PADDING.bottom + 14}" text-anchor="middle" fill="${COLOR.faint}" font-size="10">${iterations[iterations.length - 1].index}</text>`
-      : "";
-
-  return (
-    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${CHART_WIDTH} ${CHART_HEIGHT}" width="${CHART_WIDTH}" height="${CHART_HEIGHT}" role="img">` +
-    `<rect x="0.5" y="0.5" width="${CHART_WIDTH - 1}" height="${CHART_HEIGHT - 1}" rx="6" fill="${COLOR.surface}" stroke="${COLOR.border}"/>` +
-    `<text x="${CHART_PADDING.left - 6}" y="${y(max) + 10}" text-anchor="end" fill="${COLOR.faint}" font-size="10">${escapeHtml(withMetricUnit(formatChartValue(max), unit))}</text>` +
-    `<text x="${CHART_PADDING.left - 6}" y="${y(min)}" text-anchor="end" fill="${COLOR.faint}" font-size="10">${escapeHtml(withMetricUnit(formatChartValue(min), unit))}</text>` +
-    `<line x1="${CHART_PADDING.left}" y1="${CHART_PADDING.top}" x2="${CHART_PADDING.left}" y2="${CHART_HEIGHT - CHART_PADDING.bottom}" stroke="${COLOR.axis}"/>` +
-    `<line x1="${CHART_PADDING.left}" y1="${CHART_HEIGHT - CHART_PADDING.bottom}" x2="${CHART_WIDTH - CHART_PADDING.right}" y2="${CHART_HEIGHT - CHART_PADDING.bottom}" stroke="${COLOR.axis}"/>` +
-    target +
-    `<polyline points="${bestPath}" fill="none" stroke="${COLOR.best}" stroke-width="1.5" stroke-dasharray="4 4"/>` +
-    `<polyline points="${valuePath}" fill="none" stroke="${COLOR.accent}" stroke-width="2"/>` +
-    dots +
-    `<text x="${x(0)}" y="${CHART_HEIGHT - CHART_PADDING.bottom + 14}" text-anchor="middle" fill="${COLOR.faint}" font-size="10">1</text>` +
-    lastIndex +
-    "</svg>"
-  );
-}
-
-const DELTA_TONE_COLOR: Record<DeltaTone, string> = {
-  improved: COLOR.good,
-  worsened: COLOR.bad,
-  neutral: COLOR.muted,
-};
-
-function buildIterationsTable(run: AutoresearchRun): string {
-  if (run.iterations.length === 0) {
-    return `<p class="muted">No iterations recorded.</p>`;
-  }
-  const unit = run.metricUnit;
-  const best = computeBest(run.iterations, run.config.direction);
-  const rows = [...run.iterations]
-    .reverse()
-    .map((iteration) => {
-      const bestTag =
-        best?.index === iteration.index ? `<span class="tag">best</span>` : "";
-      return (
-        "<tr>" +
-        `<td>${iteration.index}</td>` +
-        `<td class="num">${escapeHtml(withMetricUnit(metricNumberFormat.format(iteration.value), unit))}${bestTag}</td>` +
-        `<td class="num" style="color:${DELTA_TONE_COLOR[deltaTone(iteration.delta, run.config.direction)]}">${escapeHtml(formatMetricDelta(iteration.delta, unit))}</td>` +
-        `<td>${iteration.summary ? escapeHtml(iteration.summary) : "—"}</td>` +
-        `<td class="muted">${escapeHtml(dateTimeFormat.format(iteration.at))}</td>` +
-        "</tr>"
-      );
-    })
-    .join("");
-  return (
-    "<table>" +
-    "<thead><tr><th>#</th><th>Value</th><th>Δ</th><th>Change</th><th>Time</th></tr></thead>" +
-    `<tbody>${rows}</tbody>` +
-    "</table>"
-  );
-}
-
-function statCard(label: string, value: string): string {
-  return `<div class="stat"><div class="stat-label">${escapeHtml(label)}</div><div class="stat-value">${escapeHtml(value)}</div></div>`;
-}
-
-const REPORT_STYLES = `
-.autoresearch-report { box-sizing: border-box; width: ${REPORT_WIDTH}px; padding: 32px; background: #ffffff; color: ${COLOR.text}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; }
-.autoresearch-report * { box-sizing: border-box; }
-.autoresearch-report header { display: flex; align-items: center; gap: 8px; }
-.autoresearch-report h1 { margin: 0; font-size: 18px; font-weight: 700; }
-.autoresearch-report .badge { border-radius: 4px; padding: 1px 6px; font-size: 11px; background: ${COLOR.surface}; border: 1px solid ${COLOR.border}; color: ${COLOR.muted}; }
-.autoresearch-report .meta { margin: 4px 0 16px; color: ${COLOR.muted}; font-size: 12px; }
-.autoresearch-report .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
-.autoresearch-report .stat { border: 1px solid ${COLOR.border}; background: ${COLOR.surface}; border-radius: 6px; padding: 8px 12px; }
-.autoresearch-report .stat-label { color: ${COLOR.muted}; font-size: 11px; }
-.autoresearch-report .stat-value { font-weight: 500; font-variant-numeric: tabular-nums; }
-.autoresearch-report figure { margin: 0 0 16px; }
-.autoresearch-report figcaption { margin-top: 4px; color: ${COLOR.faint}; font-size: 11px; }
-.autoresearch-report table { width: 100%; border-collapse: collapse; font-size: 12px; }
-.autoresearch-report th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid ${COLOR.border}; }
-.autoresearch-report td { padding: 6px 8px; border-bottom: 1px solid ${COLOR.surface}; vertical-align: top; }
-.autoresearch-report .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
-.autoresearch-report .tag { margin-left: 6px; border-radius: 4px; padding: 0 4px; font-size: 10px; background: #fefbe9; border: 1px solid #f3d673; color: #ab6400; }
-.autoresearch-report .muted { color: ${COLOR.muted}; }
-.autoresearch-report .brief { margin-top: 16px; }
-.autoresearch-report h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
-.autoresearch-report .brief p { margin: 0; white-space: pre-wrap; color: ${COLOR.muted}; }
-.autoresearch-report footer { margin-top: 24px; color: ${COLOR.faint}; font-size: 11px; }
-`;
-
-/** The report's inner markup: everything inside (and including) the root div. */
-export function buildReportBody(
-  run: AutoresearchRun,
-  exportedAt: Date,
-): string {
-  const unit = run.metricUnit;
-  const summary = summarizeRun(run);
-  const title = reportTitle(run);
-
-  const metaParts = [
-    `Started ${dateTimeFormat.format(run.startedAt)}`,
-    run.endedAt ? `Ended ${dateTimeFormat.format(run.endedAt)}` : null,
-    `Exported ${dateTimeFormat.format(exportedAt)}`,
-  ].filter((part): part is string => part !== null);
-
-  const stats = [
-    statCard(
-      "Best",
-      summary.best
-        ? `${withMetricUnit(metricNumberFormat.format(summary.best.value), unit)} (iter ${summary.best.index})`
-        : "—",
-    ),
-    statCard(
-      "Last",
-      summary.last
-        ? withMetricUnit(metricNumberFormat.format(summary.last.value), unit)
-        : "—",
-    ),
-    statCard(
-      "Iterations",
-      `${summary.iterationCount} / ${run.config.maxIterations}`,
-    ),
-    statCard(
-      "Target",
-      run.config.targetValue === null
-        ? "—"
-        : withMetricUnit(
-            metricNumberFormat.format(run.config.targetValue),
-            unit,
-          ),
-    ),
-  ].join("");
-
-  const chart = buildChartSvg(run);
-  const chartBlock = chart
-    ? `<figure>${chart}<figcaption>solid: value per iteration · dashed: best so far</figcaption></figure>`
-    : "";
-
-  return (
-    `<div class="autoresearch-report">` +
-    `<header><h1>${escapeHtml(title)}</h1><span class="badge">${escapeHtml(run.config.direction)}</span><span class="badge">${escapeHtml(STATUS_LABEL[run.status])}</span></header>` +
-    `<p class="meta">${escapeHtml(metaParts.join(" · "))}</p>` +
-    `<div class="stats">${stats}</div>` +
-    chartBlock +
-    buildIterationsTable(run) +
-    `<section class="brief"><h2>Brief</h2><p>${escapeHtml(run.config.instructions)}</p></section>` +
-    `<footer>Autoresearch report · exported from PostHog Code</footer>` +
-    "</div>"
-  );
-}
-
-/** A complete, self-contained HTML document for the run. */
-export function buildReportHtml(
-  run: AutoresearchRun,
-  exportedAt: Date,
-): string {
-  const title = reportTitle(run);
-  return (
-    "<!doctype html>" +
-    `<html lang="en"><head><meta charset="utf-8"/>` +
-    `<meta name="viewport" content="width=device-width, initial-scale=1"/>` +
-    `<title>${escapeHtml(title)} — autoresearch report</title>` +
-    `<style>body { margin: 0; display: flex; justify-content: center; background: ${COLOR.surface}; }${REPORT_STYLES}</style>` +
-    `</head><body>${buildReportBody(run, exportedAt)}</body></html>`
-  );
-}
-
-function reportTitle(run: AutoresearchRun): string {
-  return run.metricName ?? "Autoresearch";
-}
-
-export function reportFileName(
-  run: AutoresearchRun,
-  extension: string,
-): string {
-  const slug = (run.metricName ?? "report")
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "");
-  return `autoresearch-${slug || "report"}.${extension}`;
-}
-
-function downloadBlob(blob: Blob, filename: string): void {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = filename;
-  anchor.click();
-  // Deferred so the download grabs the blob before the URL dies.
-  setTimeout(() => URL.revokeObjectURL(url), 10_000);
-}
-
-function loadImage(url: string): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => resolve(image);
-    image.onerror = () =>
-      reject(new Error("Failed to rasterize the report SVG"));
-    image.src = url;
-  });
-}
-
-/**
- * Render the report markup to a PNG: mount it offscreen to measure its
- * height, serialize it into an SVG `foreignObject`, and draw that onto a
- * canvas at 2x. Self-contained markup keeps the canvas untainted.
- */
-async function renderReportPng(
-  run: AutoresearchRun,
-  exportedAt: Date,
-): Promise<Blob> {
-  const host = document.createElement("div");
-  host.style.position = "fixed";
-  host.style.left = "-100000px";
-  host.style.top = "0";
-  host.style.width = `${REPORT_WIDTH}px`;
-  // The extra wrapper is what gets serialized, so the host's offscreen
-  // positioning never leaks into the image.
-  host.innerHTML = `<div><style>${REPORT_STYLES}</style>${buildReportBody(run, exportedAt)}</div>`;
-  document.body.appendChild(host);
-
-  const width = REPORT_WIDTH;
-  let height: number;
-  let serialized: string;
-  try {
-    height = Math.ceil(host.getBoundingClientRect().height);
-    const wrapper = host.firstElementChild;
-    if (!wrapper) throw new Error("Report markup failed to parse");
-    // XMLSerializer emits well-formed XHTML (with the xhtml namespace on the
-    // root), which foreignObject requires.
-    serialized = new XMLSerializer().serializeToString(wrapper);
-  } finally {
-    host.remove();
-  }
-
-  const svg =
-    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">` +
-    `<foreignObject width="100%" height="100%">${serialized}</foreignObject>` +
-    "</svg>";
-  const url = URL.createObjectURL(
-    new Blob([svg], { type: "image/svg+xml;charset=utf-8" }),
-  );
-  try {
-    const image = await loadImage(url);
-    const scale = 2;
-    const canvas = document.createElement("canvas");
-    canvas.width = width * scale;
-    canvas.height = height * scale;
-    const context = canvas.getContext("2d");
-    if (!context) throw new Error("Canvas 2D context unavailable");
-    context.scale(scale, scale);
-    context.drawImage(image, 0, 0);
-    const blob = await new Promise<Blob | null>((resolve) =>
-      canvas.toBlob(resolve, "image/png"),
-    );
-    if (!blob) throw new Error("PNG encoding failed");
-    return blob;
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
-
-export function exportRunAsHtml(run: AutoresearchRun): void {
-  const html = buildReportHtml(run, new Date());
-  downloadBlob(
-    new Blob([html], { type: "text/html;charset=utf-8" }),
-    reportFileName(run, "html"),
-  );
-}
-
-export async function exportRunAsPng(run: AutoresearchRun): Promise<void> {
-  const exportedAt = new Date();
-  const blob = await renderReportPng(run, exportedAt);
-  downloadBlob(blob, reportFileName(run, "png"));
-}