diff --git a/.gitignore b/.gitignore
index 4b39a6d..494128a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,9 +5,11 @@ notes/burnlists/
 dist/
 dashboard/dist/
 node_modules/
+.oven-test-*/
 .playwright-cli/
 output/
 build/
 *.zip
 *.tgz
 *.log
+ovens/**/*.ir.json
diff --git a/bin/burnlist.mjs b/bin/burnlist.mjs
index 7ed20be..5389018 100755
--- a/bin/burnlist.mjs
+++ b/bin/burnlist.mjs
@@ -44,12 +44,12 @@ if (args[0] === "install" || args[0] === "uninstall") {
 }
 
 if (args[0] === "differential-testing" && args[1] === "schema") {
-  console.log(resolve(packageRoot, "ovens", "differential-testing", "schema", "differential-testing-data.schema.json"));
+  console.log(resolve(packageRoot, "ovens", "differential-testing", "engine", "data.schema.json"));
   return;
 }
 
 if (args[0] === "differential-testing" && args[1] === "sdk") {
-  console.log(resolve(packageRoot, "ovens", "differential-testing", "engine", "differential-testing-adapter-sdk.mjs"));
+  console.log(resolve(packageRoot, "ovens", "differential-testing", "engine", "adapter-sdk.mjs"));
   return;
 }
 
@@ -62,11 +62,11 @@ if (args[0] === "differential-testing" && ["validate", "validate-bundle"].includ
     const path = resolve(process.cwd(), args[2]);
     const document = JSON.parse(readFileSync(path, "utf8"));
     if (document?.schema === "burnlist-differential-testing-bundle@1") {
-      const { assertDifferentialTestingBundle } = await import("../ovens/differential-testing/engine/differential-testing-transport.mjs");
+      const { assertDifferentialTestingBundle } = await import("../ovens/differential-testing/engine/transport.mjs");
       const bundle = assertDifferentialTestingBundle(path);
       console.log(`Valid Differential Testing bundle: ${bundle.scenarios.length} scenarios; selected ${bundle.selectedScenarioId ?? "none"}.`);
     } else {
-      const { assertDifferentialTestingData } = await import("../ovens/differential-testing/engine/differential-testing-data-contract.mjs");
+      const { assertDifferentialTestingData } = await import("../ovens/differential-testing/engine/data-contract.mjs");
       assertDifferentialTestingData(document);
       const sampleCount = document.fields.reduce((total, field) => total + field.sampleCount, 0);
       console.log(`Valid Differential Testing data: ${document.fields.length} fields, ${sampleCount} samples, ${document.summary.frames.uniqueTicks} aligned ticks.`);
diff --git a/dashboard/oven-ir-compile.mjs b/dashboard/oven-ir-compile.mjs
new file mode 100644
index 0000000..f2a05dc
--- /dev/null
+++ b/dashboard/oven-ir-compile.mjs
@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+import { relative, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import { compileOven } from "../src/ovens/dsl/oven-compile.mjs";
+
+const dashboardDir = fileURLToPath(new URL(".", import.meta.url));
+const repoRoot = resolve(dashboardDir, "..");
+
+export function compileOvenIrForJsonPath(irJsonAbsPath) {
+  if (!irJsonAbsPath.endsWith(".ir.json")) {
+    throw new Error(`Expected an .ir.json path, got ${irJsonAbsPath}`);
+  }
+
+  const ovenPath = `${irJsonAbsPath.slice(0, -".ir.json".length)}.oven`;
+  const file = relative(repoRoot, ovenPath).split(sep).join("/");
+  const compiled = compileOven(readFileSync(ovenPath, "utf8"), { file });
+  if (!compiled.ok) {
+    throw new Error(`Failed to compile ${file}: ${JSON.stringify(compiled.diagnostics)}`);
+  }
+  return compiled.ir;
+}
diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index 2513e60..488a6a7 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { Clock3, ListChecks } from "lucide-react";
-import { AppHeader, ChecklistDashboard, DashboardError, DifferentialTestingPage, EmptyState, FILTERS, Filters, NewOvenPage, ProjectGroup, RunBurnPage, StreamingDiff, VisualParityPage } from "@components";
+import { AppHeader, ChecklistOvenView, CustomOvenView, DashboardError, DifferentialTestingOvenPage, EmptyState, FILTERS, Filters, NewOvenPage, PerformanceTracingOvenPage, ProjectGroup, RunBurnPage, StreamingDiff, VisualParityPage } from "@components";
 import { useDashboardData } from "@hooks";
 import { currentSection, filterFromUrl, selectedBurnlist } from "@lib";
 import type { Filter } from "@lib";
@@ -24,10 +24,10 @@ export function App() {
   return (
     <div className="dashboard-app">
       <AppHeader detail={progress} section={section} />
-      <main className="dashboard-main" data-layout={section === "differential-testing" || section === "performance-tracing" || section === "streaming-diff" || section === "visual-parity" || selected ? "full" : "index"} data-section={section}>
-        {section === "differential-testing" ? <DifferentialTestingPage /> : section === "performance-tracing" ? <DifferentialTestingPage ovenId="performance-tracing" /> : section === "streaming-diff" ? <StreamingDiff projects={projects} projectsLoading={loading} /> : section === "visual-parity" ? <VisualParityPage /> : section === "new-oven" ? <NewOvenPage /> : section === "run-burn" ? <RunBurnPage /> : selected ? (
+      <main className="dashboard-main" data-layout={section === "differential-testing" || section === "performance-tracing" || section === "streaming-diff" || section === "visual-parity" || section === "custom-oven" || selected ? "full" : "index"} data-section={section}>
+        {section === "differential-testing" ? <DifferentialTestingOvenPage /> : section === "performance-tracing" ? <PerformanceTracingOvenPage /> : section === "streaming-diff" ? <StreamingDiff projects={projects} projectsLoading={loading} /> : section === "visual-parity" ? <VisualParityPage /> : section === "custom-oven" ? <CustomOvenView /> : section === "new-oven" ? <NewOvenPage /> : section === "run-burn" ? <RunBurnPage /> : selected ? (
           error ? <DashboardError message={error} /> : loading && !progress ? <EmptyState title="Loading progress" detail="Reading the selected Burnlist." /> : progress ? (
-            <ChecklistDashboard data={progress} />
+            <ChecklistOvenView data={progress} />
           ) : <EmptyState title="Choose a Burnlist" detail="Select an item from the list to inspect its progress." icon={ListChecks} />
         ) : (
           <section className="dashboard-index">
diff --git a/dashboard/src/components/BurnOvens/BurnOvens.tsx b/dashboard/src/components/BurnOvens/BurnOvens.tsx
index 4b100b6..bbb5d1b 100644
--- a/dashboard/src/components/BurnOvens/BurnOvens.tsx
+++ b/dashboard/src/components/BurnOvens/BurnOvens.tsx
@@ -1,28 +1,12 @@
 import {
   type FormEvent,
-  type PointerEvent as ReactPointerEvent,
   useEffect,
-  useMemo,
-  useRef,
   useState,
 } from "react";
 import {
-  Activity,
   ArrowLeft,
-  ChartBar,
-  ChartLine,
-  ChartPie,
-  Eye,
-  Gauge,
-  GitCompareArrows,
-  LayoutGrid,
-  Pencil,
   Play,
-  Plus,
   Save,
-  Table2,
-  Trash2,
-  X,
 } from "lucide-react";
 import { Button } from "@layout";
 import { ovenActionUrl, ovenCatalogKey, ovenTargetRepoRoot } from "@lib/oven-identity.mjs";
@@ -35,54 +19,7 @@ import {
   CardTitle,
 } from "@layout";
 
-type DetailSection = {
-  id: string;
-  title: string;
-  description: string;
-  widget: DetailType;
-  source: string;
-  format: "plain";
-  column: number;
-  row: number;
-  columnSpan: number;
-  rowSpan: number;
-};
-
-type OvenDetail = {
-  version: 1;
-  columns: number;
-  rows: number;
-  rowHeight: number;
-  cells: DetailSection[];
-};
-
-type GridPoint = { row: number; column: number };
-type GridRect = {
-  row: number;
-  column: number;
-  rowSpan: number;
-  columnSpan: number;
-};
-type DraftArea = GridRect & {
-  description: string;
-  widget: DetailType;
-};
-
-const DETAIL_TYPES = [
-  { value: "metric", label: "Metric", Icon: Gauge },
-  { value: "progress", label: "Progress", Icon: Activity },
-  { value: "line-chart", label: "Line chart", Icon: ChartLine },
-  { value: "bar-chart", label: "Bar chart", Icon: ChartBar },
-  { value: "pie-chart", label: "Pie chart", Icon: ChartPie },
-  { value: "table", label: "Table", Icon: Table2 },
-  { value: "comparison", label: "Comparison", Icon: GitCompareArrows },
-] as const;
-
-type DetailType = (typeof DETAIL_TYPES)[number]["value"];
-const NEW_OVEN_ROW_HEIGHT = 50;
-
 const fieldClass = "form-control";
-const compactFieldClass = "form-control form-control-compact";
 
 function slug(value: string) {
   return value
@@ -93,77 +30,6 @@ function slug(value: string) {
     .slice(0, 48);
 }
 
-function bounds(start: GridPoint, end: GridPoint): GridRect {
-  return {
-    column: Math.min(start.column, end.column),
-    row: Math.min(start.row, end.row),
-    columnSpan: Math.abs(start.column - end.column) + 1,
-    rowSpan: Math.abs(start.row - end.row) + 1,
-  };
-}
-
-function overlaps(left: GridRect, right: GridRect) {
-  return (
-    left.column < right.column + right.columnSpan
-    && left.column + left.columnSpan > right.column
-    && left.row < right.row + right.rowSpan
-    && left.row + left.rowSpan > right.row
-  );
-}
-
-function gridAreaStyle(rect: GridRect) {
-  return {
-    gridColumn: String(rect.column) + " / span " + String(rect.columnSpan),
-    gridRow: String(rect.row) + " / span " + String(rect.rowSpan),
-  };
-}
-
-function detailTypeDefinition(value: DetailType) {
-  return DETAIL_TYPES.find((detailType) => detailType.value === value)
-    || DETAIL_TYPES[0];
-}
-
-function deriveSectionTitle(description: string, widget: DetailType) {
-  const firstLine = description
-    .split(/\r?\n/u)
-    .map((line) => line.trim())
-    .find(Boolean);
-  return (firstLine || detailTypeDefinition(widget).label).slice(0, 80);
-}
-
-function DetailTypePicker({
-  value,
-  onChange,
-}: {
-  value: DetailType;
-  onChange: (value: DetailType) => void;
-}) {
-  return (
-    <div
-      aria-label="Metric chart type"
-      className="detail-type-picker"
-      role="group"
-    >
-      {DETAIL_TYPES.map(({ value: option, label, Icon }) => {
-        const selected = option === value;
-        return (
-          <button
-            aria-label={label}
-            aria-pressed={selected}
-            className={`detail-type-button${selected ? " is-selected" : ""}`}
-            key={option}
-            onClick={() => onChange(option)}
-            title={label}
-            type="button"
-          >
-            <Icon aria-hidden="true" />
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
 function PageHeader({
   title,
   description,
@@ -189,365 +55,6 @@ function PageHeader({
   );
 }
 
-function DetailSkeletonBuilder({
-  detail,
-  onChange,
-  onError,
-}: {
-  detail: OvenDetail;
-  onChange: (detail: OvenDetail) => void;
-  onError: (message: string) => void;
-}) {
-  const gridRef = useRef<HTMLDivElement>(null);
-  const descriptionRef = useRef<HTMLTextAreaElement>(null);
-  const gestureRef = useRef<{
-    pointerId: number;
-    start: GridPoint;
-    end: GridPoint;
-  } | null>(null);
-  const nextCell = useRef(1);
-  const [dragArea, setDragArea] = useState<GridRect | null>(null);
-  const [draft, setDraft] = useState<DraftArea | null>(null);
-  const [editingId, setEditingId] = useState<string | null>(null);
-
-  const trackCells = useMemo(
-    () => Array.from(
-      { length: detail.rows * detail.columns },
-      (_, index) => ({
-        row: Math.floor(index / detail.columns) + 1,
-        column: (index % detail.columns) + 1,
-      }),
-    ),
-    [detail.columns, detail.rows],
-  );
-  useEffect(() => {
-    if (draft) descriptionRef.current?.focus();
-  }, [draft]);
-
-  const pointFromPointer = (clientX: number, clientY: number): GridPoint | null => {
-    const grid = gridRef.current;
-    if (!grid) return null;
-    const rect = grid.getBoundingClientRect();
-    const width = Math.max(1, grid.clientWidth);
-    const height = detail.rows * detail.rowHeight;
-    const localX = Math.max(0, Math.min(width - 0.001, clientX - rect.left));
-    const localY = Math.max(0, Math.min(height - 0.001, clientY - rect.top));
-    return {
-      column: Math.floor(localX / (width / detail.columns)) + 1,
-      row: Math.floor(localY / detail.rowHeight) + 1,
-    };
-  };
-
-  const releasePointer = (pointerId: number) => {
-    const grid = gridRef.current;
-    if (grid?.hasPointerCapture(pointerId)) {
-      grid.releasePointerCapture(pointerId);
-    }
-  };
-
-  const clearGesture = () => {
-    const gesture = gestureRef.current;
-    if (gesture) releasePointer(gesture.pointerId);
-    gestureRef.current = null;
-    setDragArea(null);
-  };
-
-  const startDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
-    if (event.button !== 0) return;
-    const target = event.target as HTMLElement;
-    if (!target.closest("[data-oven-grid-cell]")) return;
-    const point = pointFromPointer(event.clientX, event.clientY);
-    if (!point) return;
-    if (detail.cells.some((cell) => overlaps(cell, {
-      ...point,
-      columnSpan: 1,
-      rowSpan: 1,
-    }))) return;
-
-    event.preventDefault();
-    event.currentTarget.setPointerCapture(event.pointerId);
-    gestureRef.current = {
-      pointerId: event.pointerId,
-      start: point,
-      end: point,
-    };
-    setDraft(null);
-    setEditingId(null);
-    setDragArea(bounds(point, point));
-    onError("");
-  };
-
-  const moveDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
-    const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
-    const point = pointFromPointer(event.clientX, event.clientY);
-    if (!point) return;
-    event.preventDefault();
-    gesture.end = point;
-    setDragArea(bounds(gesture.start, point));
-  };
-
-  const finishDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
-    const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
-    const point = pointFromPointer(event.clientX, event.clientY) || gesture.end;
-    const selected = bounds(gesture.start, point);
-    clearGesture();
-
-    if (selected.columnSpan === 1 && selected.rowSpan === 1) {
-      onError("Drag across at least two cells to add a detail section.");
-      return;
-    }
-    if (detail.cells.some((cell) => overlaps(cell, selected))) {
-      onError("That section overlaps an existing detail section.");
-      return;
-    }
-
-    setDraft({
-      ...selected,
-      description: "",
-      widget: "metric",
-    });
-    onError("");
-  };
-
-  const cancelDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
-    const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
-    clearGesture();
-  };
-
-  const addDraft = () => {
-    if (!draft) return;
-    const description = draft.description.trim();
-    if (!description) {
-      onError("Describe the metric before adding the detail section.");
-      descriptionRef.current?.focus();
-      return;
-    }
-
-    const usedIds = new Set(detail.cells.map((cell) => cell.id));
-    let id = "panel-" + String(nextCell.current++);
-    while (usedIds.has(id)) id = "panel-" + String(nextCell.current++);
-    const cell: DetailSection = {
-      id,
-      title: deriveSectionTitle(description, draft.widget),
-      description,
-      widget: draft.widget,
-      source: "",
-      format: "plain",
-      column: draft.column,
-      row: draft.row,
-      columnSpan: draft.columnSpan,
-      rowSpan: draft.rowSpan,
-    };
-    onChange({ ...detail, cells: [...detail.cells, cell] });
-    setDraft(null);
-    setEditingId(id);
-    onError("");
-  };
-
-  const updateCell = (id: string, patch: Partial<DetailSection>) => {
-    onChange({
-      ...detail,
-      cells: detail.cells.map((cell) => (
-        cell.id === id ? { ...cell, ...patch } : cell
-      )),
-    });
-  };
-
-  const deleteCell = (id: string) => {
-    onChange({
-      ...detail,
-      cells: detail.cells.filter((cell) => cell.id !== id),
-    });
-    if (editingId === id) setEditingId(null);
-    onError("");
-  };
-
-  return (
-    <Card className="detail-builder-card">
-      <CardHeader className="detail-builder-header">
-        <CardTitle className="detail-builder-title">
-          <LayoutGrid />
-          Detail skeleton
-        </CardTitle>
-        <CardDescription>
-          Build the Oven's detail page template by placing sections directly on the skeleton.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="detail-builder-content">
-          <div
-            aria-label="Oven detail page skeleton"
-            className="detail-skeleton"
-            onPointerCancel={cancelDrag}
-            onPointerDown={startDrag}
-            onPointerMove={moveDrag}
-            onPointerUp={finishDrag}
-            ref={gridRef}
-            style={{
-              gridTemplateColumns: "repeat("
-                + String(detail.columns)
-                + ", minmax(0, 1fr))",
-              gridTemplateRows: "repeat("
-                + String(detail.rows)
-                + ", "
-                + String(detail.rowHeight)
-                + "px)",
-            }}
-          >
-            {trackCells.map((point) => (
-              <span
-                aria-hidden="true"
-                className="detail-grid-cell"
-                data-oven-grid-cell=""
-                key={String(point.row) + ":" + String(point.column)}
-              />
-            ))}
-
-            {dragArea && (
-              <div
-                aria-hidden="true"
-                className="detail-drag-area"
-                style={gridAreaStyle(dragArea)}
-              />
-            )}
-
-            {draft && (
-              <section
-                aria-label="New detail section"
-                className="detail-draft"
-                style={gridAreaStyle(draft)}
-              >
-                <div className="detail-editor">
-                  <DetailTypePicker
-                    onChange={(widget) => setDraft({ ...draft, widget })}
-                    value={draft.widget}
-                  />
-                  <label>
-                    <span className="visually-hidden">Describe the metric</span>
-                    <textarea
-                      aria-label="Describe the metric"
-                      className={`${compactFieldClass} detail-description-input`}
-                      maxLength={2000}
-                      onChange={(event) => setDraft({
-                        ...draft,
-                        description: event.target.value,
-                      })}
-                      onKeyDown={(event) => {
-                        if (event.key === "Escape") setDraft(null);
-                        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-                          event.preventDefault();
-                          addDraft();
-                        }
-                      }}
-                      placeholder="Describe the metric"
-                      ref={descriptionRef}
-                      value={draft.description}
-                    />
-                  </label>
-                  <div className="form-actions form-actions-compact">
-                    <Button
-                      onClick={() => setDraft(null)}
-                      size="sm"
-                      type="button"
-                      variant="ghost"
-                    >
-                      <X />
-                      Cancel
-                    </Button>
-                    <Button onClick={addDraft} size="sm" type="button">
-                      <Plus />
-                      Add
-                    </Button>
-                  </div>
-                </div>
-              </section>
-            )}
-
-            {detail.cells.map((cell) => {
-              const editing = editingId === cell.id;
-              const selectedType = detailTypeDefinition(cell.widget);
-              const SelectedIcon = selectedType.Icon;
-              return (
-                <section
-                  aria-label={cell.title + " detail section"}
-                  className="detail-cell"
-                  key={cell.id}
-                  style={gridAreaStyle(cell)}
-                >
-                  <div
-                    className="detail-cell-actions"
-                  >
-                    <button
-                      aria-label={editing ? "Preview " + cell.title : "Edit " + cell.title}
-                      className="detail-cell-action"
-                      onClick={() => setEditingId(editing ? null : cell.id)}
-                      type="button"
-                    >
-                      {editing ? <Eye /> : <Pencil />}
-                    </button>
-                    <button
-                      aria-label={"Delete " + cell.title}
-                      className="detail-cell-action is-destructive"
-                      onClick={() => deleteCell(cell.id)}
-                      type="button"
-                    >
-                      <Trash2 />
-                    </button>
-                  </div>
-
-                  {editing ? (
-                    <div className="detail-editor is-cell">
-                      <DetailTypePicker
-                        onChange={(widget) => updateCell(cell.id, {
-                          widget,
-                          title: deriveSectionTitle(cell.description, widget),
-                        })}
-                        value={cell.widget}
-                      />
-                      <label>
-                        <span className="visually-hidden">Describe the metric</span>
-                        <textarea
-                          aria-label="Describe the metric"
-                          className={`${compactFieldClass} detail-description-input`}
-                          maxLength={2000}
-                          onChange={(event) => {
-                            const description = event.target.value;
-                            updateCell(cell.id, {
-                              description,
-                              title: deriveSectionTitle(description, cell.widget),
-                            });
-                          }}
-                          placeholder="Describe the metric"
-                          value={cell.description}
-                        />
-                      </label>
-                    </div>
-                  ) : (
-                    <button
-                      className="detail-preview"
-                      onDoubleClick={() => setEditingId(cell.id)}
-                      type="button"
-                    >
-                      <SelectedIcon
-                        aria-hidden="true"
-                        className="detail-preview-icon"
-                      />
-                      <span className="detail-preview-copy">
-                        {cell.description}
-                      </span>
-                    </button>
-                  )}
-                </section>
-              );
-            })}
-          </div>
-      </CardContent>
-    </Card>
-  );
-}
-
 export function NewOvenPage() {
   const [name, setName] = useState("");
   const [id, setId] = useState("");
@@ -558,62 +65,20 @@ export function NewOvenPage() {
       + "\n\n## Run Inputs\n\nDescribe the inputs a Burn needs."
       + "\n\n## Evidence\n\nDescribe what proves the outcome.",
   );
-  const [detail, setDetail] = useState<OvenDetail>({
-    version: 1,
-    columns: 12,
-    rows: 16,
-    rowHeight: NEW_OVEN_ROW_HEIGHT,
-    cells: [],
-  });
   const [writeToken, setWriteToken] = useState("");
-  const [repos, setRepos] = useState<RepoSummary[]>([]);
-  const [repoKey, setRepoKey] = useState("");
   const [status, setStatus] = useState("");
   const [error, setError] = useState("");
   const [saving, setSaving] = useState(false);
 
   useEffect(() => {
-    Promise.all([fetch("/api/ovens").then((response) => response.json()), fetch("/api/repos").then((response) => response.json())])
-      .then(([ovensPayload, reposPayload]) => {
-        setWriteToken(ovensPayload.writeToken || "");
-        setRepos(reposPayload.repos || []);
-        setRepoKey(reposPayload.repos?.[0]?.repoKey || "");
-      })
+    fetch("/api/ovens")
+      .then((response) => response.json())
+      .then((payload) => setWriteToken(payload.writeToken || ""))
       .catch(() => setError("Could not initialize Oven saving."));
   }, []);
 
-  const changeDetailDimensions = (
-    key: "columns" | "rows",
-    rawValue: string,
-  ) => {
-    const ranges = {
-      columns: [2, 24],
-      rows: [2, 32],
-    } as const;
-    const [minimum, maximum] = ranges[key];
-    const parsed = Number(rawValue);
-    const value = Math.max(
-      minimum,
-      Math.min(maximum, Number.isFinite(parsed) ? parsed : detail[key]),
-    );
-    const next = { ...detail, [key]: value };
-    if (next.cells.some((cell) => (
-      cell.column + cell.columnSpan - 1 > next.columns
-      || cell.row + cell.rowSpan - 1 > next.rows
-    ))) {
-      setError("Delete areas outside the new bounds before shrinking the grid.");
-      return;
-    }
-    setDetail(next);
-    setError("");
-  };
-
   const saveOven = async (event: FormEvent) => {
     event.preventDefault();
-    if (!detail.cells.length) {
-      setError("Add at least one detail section.");
-      return;
-    }
     setSaving(true);
     setError("");
     setStatus("Saving Oven...");
@@ -624,7 +89,7 @@ export function NewOvenPage() {
           "content-type": "application/json",
           "x-burnlist-token": writeToken,
         },
-        body: JSON.stringify({ id, name, instructions, detail, ...(repoKey ? { repoKey } : {}) }),
+        body: JSON.stringify({ id, name, instructions }),
       });
       const payload = await response.json();
       if (!response.ok) {
@@ -642,102 +107,58 @@ export function NewOvenPage() {
   return (
     <form className="oven-form" onSubmit={saveOven}>
       <PageHeader
-        description="A declarative Burn recipe: Markdown instructions plus a non-executable detail skeleton."
+        description="A declarative Burn recipe defined by Markdown instructions."
         title="New Oven"
       />
-      <div className="oven-form-stack">
-        <Card className="oven-form-card">
-          <CardHeader>
-            <CardTitle className="card-title-compact">Oven instructions</CardTitle>
-            <CardDescription>
-              Define the outcome, canonical state, run inputs, and evidence rules in Markdown.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="oven-form-content">
-            <div className="oven-fields-row">
-              <label className="form-field">
-                Repository
-                <select className={fieldClass} onChange={(event) => setRepoKey(event.target.value)} required value={repoKey}>
-                  {repos.map((repo) => <option key={repo.repoKey} value={repo.repoKey}>{repo.name}</option>)}
-                </select>
-              </label>
-              <label className="form-field">
-                Oven name
-                <input
-                  className={fieldClass}
-                  maxLength={80}
-                  onChange={(event) => {
-                    setName(event.target.value);
-                    if (!idEdited) setId(slug(event.target.value));
-                  }}
-                  placeholder="Release Readiness"
-                  required
-                  value={name}
-                />
-              </label>
-              <label className="form-field">
-                Oven id
-                <input
-                  className={fieldClass}
-                  maxLength={48}
-                  onChange={(event) => {
-                    setIdEdited(true);
-                    setId(slug(event.target.value));
-                  }}
-                  pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
-                  placeholder="release-readiness"
-                  required
-                  value={id}
-                />
-              </label>
-              <label className="form-field">
-                Columns
-                <input
-                  className={fieldClass}
-                  max={24}
-                  min={2}
-                  onChange={(event) => changeDetailDimensions(
-                    "columns",
-                    event.target.value,
-                  )}
-                  type="number"
-                  value={detail.columns}
-                />
-              </label>
-              <label className="form-field">
-                Rows
-                <input
-                  className={fieldClass}
-                  max={32}
-                  min={2}
-                  onChange={(event) => changeDetailDimensions(
-                    "rows",
-                    event.target.value,
-                  )}
-                  type="number"
-                  value={detail.rows}
-                />
-              </label>
-            </div>
-            <label className="form-field">
-              Markdown instructions
-              <textarea
-                className={`${fieldClass} form-control-tall form-control-mono`}
-                maxLength={65536}
-                onChange={(event) => setInstructions(event.target.value)}
-                required
-                value={instructions}
-              />
-            </label>
-          </CardContent>
-        </Card>
-        <DetailSkeletonBuilder
-          detail={detail}
-          key={String(detail.columns) + ":" + String(detail.rows)}
-          onChange={setDetail}
-          onError={setError}
-        />
-      </div>
+      <Card className="oven-form-card">
+        <CardHeader>
+          <CardTitle className="card-title-compact">Oven instructions</CardTitle>
+          <CardDescription>
+            Define the outcome, canonical state, run inputs, and evidence rules in Markdown.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="oven-form-content">
+          <label className="form-field">
+            Oven name
+            <input
+              className={fieldClass}
+              maxLength={80}
+              onChange={(event) => {
+                setName(event.target.value);
+                if (!idEdited) setId(slug(event.target.value));
+              }}
+              placeholder="Release Readiness"
+              required
+              value={name}
+            />
+          </label>
+          <label className="form-field">
+            Oven id
+            <input
+              className={fieldClass}
+              maxLength={48}
+              onChange={(event) => {
+                setIdEdited(true);
+                setId(slug(event.target.value));
+              }}
+              pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
+              placeholder="release-readiness"
+              required
+              value={id}
+            />
+          </label>
+          <label className="form-field">
+            Markdown instructions
+            <textarea
+              className={`${fieldClass} form-control-tall form-control-mono`}
+              maxLength={65536}
+              onChange={(event) => setInstructions(event.target.value)}
+              required
+              value={instructions}
+            />
+          </label>
+        </CardContent>
+      </Card>
       {(error || status) && (
         <p
           aria-live="polite"
@@ -837,8 +258,7 @@ export function RunBurnPage() {
         <CardHeader>
           <CardTitle className="card-title-compact">Run request</CardTitle>
           <CardDescription>
-            The selected Oven instructions and detail skeleton are snapshotted into
-            ignored local state.
+            The selected Oven instructions are snapshotted into ignored local state.
           </CardDescription>
         </CardHeader>
         <CardContent className="run-form-content">
diff --git a/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.fixture.mjs b/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.fixture.mjs
new file mode 100644
index 0000000..572d2f0
--- /dev/null
+++ b/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.fixture.mjs
@@ -0,0 +1,12 @@
+export const checklistFixture = {
+  generatedAt: "2026-07-15T12:00:00Z", repoKey: "fixture", repo: "fixture", planLabel: "active.md", title: "Fixture Burnlist",
+  total: 2, done: 2, remaining: 0, percent: 100, warnings: [], active: [],
+  completed: [
+    { id: "B1", title: "First event", completedAt: "2026-07-15T11:40:00Z", detail: "First proof." },
+    { id: "B2", title: "Second event", completedAt: "2026-07-15T11:50:00Z", detail: "Completed: 2026-07-15T11:50:00Z\nChanged:\n- src/second.mjs\nProof:\n- node --test second.test.mjs\nOutcome:\n- Second proof.\nFollow-up:\n- None." },
+  ],
+  history: [
+    { time: "2026-07-15T11:40:00Z", done: 1, remaining: 1, total: 2, percent: 50 },
+    { time: "2026-07-15T11:50:00Z", done: 2, remaining: 0, total: 2, percent: 100 },
+  ],
+};
diff --git a/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.test.mjs b/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.test.mjs
index ecfebb8..f8fd28d 100644
--- a/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.test.mjs
+++ b/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.test.mjs
@@ -5,9 +5,11 @@ import test from "node:test";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { build } from "esbuild";
+import { checklistFixture as data } from "./ChecklistDashboard.fixture.mjs";
 
 const componentPath = new URL("./ChecklistDashboard.tsx", import.meta.url).pathname;
 const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("../../oven", import.meta.url).pathname;
 
 test("checklist detail renders the split progress surface and event card list", async () => {
   const outputDir = await mkdtemp(join(process.cwd(), ".checklist-dashboard-test-"));
@@ -15,24 +17,19 @@ test("checklist detail renders the split progress surface and event card list",
     const outputPath = join(outputDir, "ChecklistDashboard.mjs");
     await build({
       entryPoints: [componentPath], bundle: true, format: "esm", outfile: outputPath, platform: "node",
-      alias: { "@lib": libPath }, jsx: "automatic", packages: "external", target: "node18",
+      alias: { "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18",
     });
     const { ChecklistDashboard, checklistEventDetailFields } = await import(`${new URL(`file://${outputPath}`).href}?test=${Date.now()}`);
-    const data = {
-      generatedAt: "2026-07-15T12:00:00Z", repoKey: "fixture", repo: "fixture", planLabel: "active.md", title: "Fixture Burnlist",
-      total: 2, done: 2, remaining: 0, percent: 100, warnings: [], active: [],
-      completed: [
-        { id: "B1", title: "First event", completedAt: "2026-07-15T11:40:00Z", detail: "First proof." },
-        { id: "B2", title: "Second event", completedAt: "2026-07-15T11:50:00Z", detail: "Completed: 2026-07-15T11:50:00Z\nChanged:\n- src/second.mjs\nProof:\n- node --test second.test.mjs\nOutcome:\n- Second proof.\nFollow-up:\n- None." },
-      ],
-      history: [
-        { time: "2026-07-15T11:40:00Z", done: 1, remaining: 1, total: 2, percent: 50 },
-        { time: "2026-07-15T11:50:00Z", done: 2, remaining: 0, total: 2, percent: 100 },
-      ],
-    };
     const markup = renderToStaticMarkup(createElement(ChecklistDashboard, { data }));
 
     assert.match(markup, /aria-label="Burnlist progress KPIs"/u);
+    assert.match(markup, /class="driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current"/u);
+    assert.match(markup, /<div class="driving-parity-kpi-heading">Current<\/div><div class="driving-parity-kpi-ratio">Complete<\/div>/u);
+    assert.match(markup, /class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress"/u);
+    assert.match(markup, /<div class="driving-parity-kpi-ratio"><span class="pass">2<\/span><span class="separator">·<\/span><span class="total">2<\/span> <span class="pass">\(100%\)<\/span><\/div>/u);
+    assert.match(markup, /<div class="driving-parity-kpi-heading">Elapsed<\/div>/u);
+    assert.match(markup, /<div class="driving-parity-kpi-heading">Avg pace<\/div>/u);
+    assert.match(markup, /<div class="driving-parity-kpi-heading">Time left<\/div>/u);
     assert.match(markup, /class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58"/u);
     assert.match(markup, /class="driving-parity-kpi-progress-donut-segment"[^>]+stroke-dasharray="100\.000 0\.000"/u);
     assert.match(markup, /aria-label="Remaining items over time"/u);
diff --git a/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.tsx b/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.tsx
index 68d3f7b..b8eba0f 100644
--- a/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.tsx
+++ b/dashboard/src/components/ChecklistDashboard/ChecklistDashboard.tsx
@@ -1,50 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { ClipboardList, Clock3, Gauge, TimerReset } from "lucide-react";
-import type { ChecklistProgressData, CompletedItem, HistoryPoint } from "@lib";
+import type { ChecklistProgressData, HistoryPoint } from "@lib";
+import { checklistEventDetailFields, compactAge, eventRows, formatDuration, progressHistory, timing } from "@lib/checklist-adapter";
+export { checklistEventDetailFields } from "@lib/checklist-adapter";
 import "./ChecklistDashboard.css";
-// @ts-expect-error The chart model is plain ESM so the dashboard and Node tests share it.
-import { buildChecklistProgressChart } from "../../lib/checklist-progress-chart.js";
-
-function formatDuration(milliseconds: number) {
-  if (!Number.isFinite(milliseconds) || milliseconds < 0) return "--";
-  const minutes = Math.max(0, Math.round(milliseconds / 60_000));
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.floor(minutes / 60);
-  const remainder = minutes % 60;
-  if (hours < 24) return remainder ? `${hours}h ${remainder}m` : `${hours}h`;
-  const days = Math.floor(hours / 24);
-  return `${days}d ${hours % 24}h`;
-}
-
-function compactAge(value: string, now: string) {
-  const delta = Math.max(0, Date.parse(now) - Date.parse(value));
-  const minutes = Math.floor(delta / 60_000);
-  if (minutes < 1) return "now";
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h`;
-  return `${Math.floor(hours / 24)}d`;
-}
-
-function timing(data: ChecklistProgressData) {
-  const points = data.history.filter((point) => Number.isFinite(Date.parse(point.time)));
-  const completedTimes = data.completed.map((item) => Date.parse(item.completedAt)).filter(Number.isFinite).sort((a, b) => a - b);
-  const start = points.length ? Date.parse(points[0].time) : completedTimes[0] ?? Date.parse(data.generatedAt);
-  const lastCompletion = completedTimes.at(-1) ?? start;
-  const end = data.remaining === 0 && completedTimes.length ? lastCompletion : Date.parse(data.generatedAt);
-  const intervals = completedTimes.map((time, index) => time - (index ? completedTimes[index - 1] : start)).filter((value) => value >= 0);
-  if (data.remaining > 0) intervals.push(Math.max(0, end - lastCompletion));
-  const pace = intervals.length ? intervals.reduce((sum, value) => sum + value, 0) / intervals.length : 0;
-  const currentAge = Math.max(0, end - lastCompletion);
-  const timeLeft = data.remaining ? Math.max(pace, currentAge) + Math.max(0, data.remaining - 1) * pace : 0;
-  return { elapsed: end - start, pace, timeLeft };
-}
-
-function ProgressDonut({ percent }: { percent: number }) {
-  const donePercent = Math.max(0, Math.min(100, percent));
-  const remainingPercent = Math.max(0, 100 - donePercent);
-  return <svg aria-hidden="true" className="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58"><circle className="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21" /><circle className="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" strokeDasharray={`${donePercent.toFixed(3)} ${remainingPercent.toFixed(3)}`} transform="rotate(-90 29 29)" /></svg>;
-}
+import { buildChecklistProgressChart, KpiItem, KpiStrip, LogTable, ProgressDonut, SectionHeader } from "@oven";
 
 function ChecklistKpis({ data }: { data: ChecklistProgressData }) {
   const durations = timing(data);
@@ -54,11 +14,11 @@ function ChecklistKpis({ data }: { data: ChecklistProgressData }) {
     { icon: Gauge, heading: "Avg pace", value: formatDuration(durations.pace) },
     { icon: TimerReset, heading: "Time left", value: formatDuration(durations.timeLeft) },
   ];
-  return <div aria-label="Burnlist progress KPIs" className="driving-parity-kpi-strip has-burns checklist-kpi-strip">
-    <div className="driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current" title={current?.title ?? "No active task"}><ClipboardList aria-hidden="true" className="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" /><div className="driving-parity-kpi-text"><div className="driving-parity-kpi-heading">Current</div><div className="driving-parity-kpi-ratio">{current ? `${current.id} · Active` : "Complete"}</div></div></div>
-    <div className="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title={`${data.done} of ${data.total} tasks complete`}><ProgressDonut percent={data.percent} /><div className="driving-parity-kpi-text"><div className="driving-parity-kpi-heading">Progress</div><div className="driving-parity-kpi-ratio"><span className="pass">{data.done}</span><span className="separator">·</span><span className="total">{data.total}</span> <span className="pass">({data.percent}%)</span></div></div></div>
-    {metrics.map(({ icon: Icon, heading, value }) => <div className="driving-parity-kpi-item driving-parity-kpi-section" key={heading}><Icon aria-hidden="true" className="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" /><div className="driving-parity-kpi-text"><div className="driving-parity-kpi-heading">{heading}</div><div className="driving-parity-kpi-ratio">{value}</div></div></div>)}
-  </div>;
+  return <KpiStrip ariaLabel="Burnlist progress KPIs" className="driving-parity-kpi-strip has-burns checklist-kpi-strip">
+    <KpiItem className="driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current" title={current?.title ?? "No active task"} visual={<ClipboardList aria-hidden="true" className="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" />} heading="Current" value={current ? `${current.id} · Active` : "Complete"} />
+    <KpiItem className="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title={`${data.done} of ${data.total} tasks complete`} visual={<ProgressDonut percent={data.percent} />} heading="Progress" value={<><span className="pass">{data.done}</span><span className="separator">·</span><span className="total">{data.total}</span> <span className="pass">({data.percent}%)</span></>} />
+    {metrics.map(({ icon: Icon, heading, value }) => <KpiItem className="driving-parity-kpi-item driving-parity-kpi-section" heading={heading} key={heading} value={value} visual={<Icon aria-hidden="true" className="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" />} />)}
+  </KpiStrip>;
 }
 
 function useElementSize() {
@@ -75,7 +35,7 @@ function useElementSize() {
   return { ref, ...size };
 }
 
-function ProgressChart({ history }: { history: HistoryPoint[] }) {
+export function ProgressChart({ history }: { history: HistoryPoint[] }) {
   const { ref, width, height } = useElementSize();
   const chart = useMemo(() => buildChecklistProgressChart(history, "burn", { width, height }), [height, history, width]);
   const formatTick = (time: number) => new Date(time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
@@ -88,62 +48,27 @@ function ProgressChart({ history }: { history: HistoryPoint[] }) {
   </svg></div>;
 }
 
-function ProgressPanel({ data }: { data: ChecklistProgressData }) {
+export function ProgressPanel({ data }: { data: ChecklistProgressData }) {
   return <section className="panel progress-panel"><div className="panel-title-row"><span className="burn-chart-label">Burn</span></div><div className="score"><ProgressChart history={progressHistory(data)} /></div></section>;
 }
 
-type EventRow = CompletedItem & { ordinal: number; percent: number };
-type EventDetailField = { label: string; values: string[] };
-
-const EVENT_DETAIL_LABELS = new Set(["Completed", "Changed", "Proof", "Outcome", "Follow-up"]);
-
-export function checklistEventDetailFields(detail: string): EventDetailField[] {
-  const fields: EventDetailField[] = [];
-  let current: EventDetailField | null = null;
-  for (const rawLine of detail.split(/\r?\n/u)) {
-    const line = rawLine.trim();
-    if (!line) continue;
-    const heading = line.match(/^([^:]+):(?:\s*(.*))?$/u);
-    if (heading && EVENT_DETAIL_LABELS.has(heading[1])) {
-      current = { label: heading[1], values: [] };
-      fields.push(current);
-      if (heading[2]) current.values.push(heading[2]);
-      continue;
-    }
-    if (!current) {
-      current = { label: "Detail", values: [] };
-      fields.push(current);
-    }
-    current.values.push(line.replace(/^-\s+/u, ""));
-  }
-  return fields;
-}
-
-function eventRows(data: ChecklistProgressData): EventRow[] {
-  const total = Math.max(1, data.total);
-  return [...data.completed]
-    .sort((left, right) => Date.parse(left.completedAt) - Date.parse(right.completedAt))
-    .map((item, index) => ({ ...item, ordinal: index + 1, percent: Math.min(100, Math.round(((index + 1) / total) * 100)) }))
-    .reverse();
-}
-
-function progressHistory(data: ChecklistProgressData): HistoryPoint[] {
-  const provided = data.history
-    .filter((point) => Number.isFinite(Date.parse(point.time)))
-    .sort((left, right) => Date.parse(left.time) - Date.parse(right.time));
-  const monotonic = provided.every((point, index) => index === 0 || point.done >= provided[index - 1].done);
-  if (provided.length && monotonic && provided.at(-1)?.done === data.done) return provided;
-  const total = Math.max(1, data.total);
-  const rebuilt = [...data.completed]
-    .sort((left, right) => Date.parse(left.completedAt) - Date.parse(right.completedAt))
-    .map((item, index) => ({ time: item.completedAt, done: index + 1, remaining: Math.max(0, total - index - 1), total, percent: Math.min(100, Math.round(((index + 1) / total) * 100)) }));
-  if (data.remaining > 0 && (!rebuilt.length || Date.parse(data.generatedAt) > Date.parse(rebuilt.at(-1)!.time))) rebuilt.push({ time: data.generatedAt, done: data.done, remaining: data.remaining, total, percent: data.percent });
-  return rebuilt;
-}
-
-function ProgressLedger({ data }: { data: ChecklistProgressData }) {
+export function ProgressLedger({ data }: { data: ChecklistProgressData }) {
   const rows = eventRows(data).slice(0, 8);
-  return <section className="panel work-panel event-ledger-panel"><div className="work-panel-head"><div className="work-panel-title">Progress</div></div><div className="work-panel-body"><div className="checklist-log"><div className="checklist-log-list"><div className="checklist-log-table-header"><span>Age</span><span>Event</span><span>Result</span><span>Delta</span><span>Done</span></div>{rows.map((item) => <article className="log-row log-table-row" key={`${item.id}/${item.completedAt}`}><span className="log-table-cell age">{compactAge(item.completedAt, data.generatedAt)}</span><span className="log-table-cell event">{item.id}</span><span className="log-table-cell result improved">Done</span><span className="log-table-cell delta improved">+1</span><span className="log-table-cell done">{item.percent}%</span></article>)}{!rows.length && <div className="event-ledger-empty">No completed events</div>}</div></div></div></section>;
+  return <section className="panel work-panel event-ledger-panel"><div className="work-panel-head"><div className="work-panel-title">Progress</div></div><div className="work-panel-body"><div className="checklist-log"><LogTable
+    columns={["Age", "Event", "Result", "Delta", "Done"]}
+    rows={rows.map((item) => ({
+      key: `${item.id}/${item.completedAt}`,
+      className: "log-row log-table-row",
+      cells: [
+        { className: "log-table-cell age", content: compactAge(item.completedAt, data.generatedAt) },
+        { className: "log-table-cell event", content: item.id },
+        { className: "log-table-cell result improved", content: "Done" },
+        { className: "log-table-cell delta improved", content: "+1" },
+        { className: "log-table-cell done", content: <>{item.percent}%</> },
+      ],
+    }))}
+    emptyState={<div className="event-ledger-empty">No completed events</div>}
+  /></div></div></section>;
 }
 
 function EventDetail({ detail }: { detail: string }) {
@@ -155,10 +80,10 @@ function EventDetail({ detail }: { detail: string }) {
   })}</div>;
 }
 
-function EventCardList({ data }: { data: ChecklistProgressData }) {
+export function EventCardList({ data }: { data: ChecklistProgressData }) {
   const rows = eventRows(data);
   const [expandedKey, setExpandedKey] = useState<string | null>(null);
-  return <section className="checklist-events-section"><div className="checklist-events-head"><h2>Events <span className="field-list-count">({rows.length})</span></h2></div><div className="event-card-list">{rows.map((item) => {
+  return <section className="checklist-events-section"><div className="checklist-events-head"><SectionHeader title="Events" count={rows.length} /></div><div className="event-card-list">{rows.map((item) => {
     const key = `${item.id}/${item.completedAt}`;
     const fields = item.detail ? checklistEventDetailFields(item.detail) : [];
     const outcome = fields.find((field) => field.label === "Outcome") ?? fields.find((field) => field.label === "Detail");
diff --git a/dashboard/src/components/ChecklistDashboard/ChecklistOvenView.tsx b/dashboard/src/components/ChecklistDashboard/ChecklistOvenView.tsx
new file mode 100644
index 0000000..156ccb7
--- /dev/null
+++ b/dashboard/src/components/ChecklistDashboard/ChecklistOvenView.tsx
@@ -0,0 +1,15 @@
+import { useEffect, useMemo } from "react";
+import type { ChecklistProgressData } from "@lib";
+import { adaptChecklist } from "@lib/checklist-adapter";
+import { OvenRuntime } from "@/oven/runtime/OvenRuntime";
+import ovenIr from "../../../../ovens/checklist/checklist.ir.json";
+import "./ChecklistDashboard.css";
+
+export function ChecklistOvenView({ data }: { data: ChecklistProgressData }) {
+  const payload = useMemo(() => adaptChecklist(data), [data]);
+  useEffect(() => {
+    document.body.classList.add("driving-parity-view", "checklist-detail-view");
+    return () => document.body.classList.remove("driving-parity-view", "checklist-detail-view");
+  }, []);
+  return <OvenRuntime ir={ovenIr} payload={payload} />;
+}
diff --git a/dashboard/src/components/ChecklistDashboard/checklist-adapter.test.mjs b/dashboard/src/components/ChecklistDashboard/checklist-adapter.test.mjs
new file mode 100644
index 0000000..ce52338
--- /dev/null
+++ b/dashboard/src/components/ChecklistDashboard/checklist-adapter.test.mjs
@@ -0,0 +1,36 @@
+import assert from "node:assert/strict";
+import { mkdtemp, rm } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { build } from "esbuild";
+import { checklistFixture } from "./ChecklistDashboard.fixture.mjs";
+
+const adapterPath = new URL("../../lib/checklist-adapter.ts", import.meta.url).pathname;
+
+test("adaptChecklist precomputes the checklist oven payload", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".checklist-adapter-test-"));
+  try {
+    const outputPath = join(outputDir, "checklist-adapter.mjs");
+    await build({ entryPoints: [adapterPath], bundle: true, format: "esm", outfile: outputPath, platform: "node", target: "node18" });
+    const { adaptChecklist } = await import(`${new URL(`file://${outputPath}`).href}?test=${Date.now()}`);
+    assert.deepEqual(adaptChecklist(checklistFixture), {
+      raw: checklistFixture,
+      current: { value: "Complete", title: "No active task" },
+      progress: { done: 2, total: 2, percent: 100, title: "2 of 2 tasks complete" },
+      durations: { elapsed: "10m", pace: "5m", timeLeft: "0m" },
+      ledger: [
+        { key: "B2/2026-07-15T11:50:00Z", age: "10m", event: "B2", result: "Done", delta: "+1", donePercent: 100 },
+        { key: "B1/2026-07-15T11:40:00Z", age: "20m", event: "B1", result: "Done", delta: "+1", donePercent: 50 },
+      ],
+      history: checklistFixture.history,
+      events: [
+        { ...checklistFixture.completed[1], ordinal: 2, percent: 100, key: "B2/2026-07-15T11:50:00Z", age: "10m", fields: [
+          { label: "Completed", values: ["2026-07-15T11:50:00Z"] }, { label: "Changed", values: ["src/second.mjs"] }, { label: "Proof", values: ["node --test second.test.mjs"] }, { label: "Outcome", values: ["Second proof."] }, { label: "Follow-up", values: ["None."] },
+        ] },
+        { ...checklistFixture.completed[0], ordinal: 1, percent: 50, key: "B1/2026-07-15T11:40:00Z", age: "20m", fields: [{ label: "Detail", values: ["First proof."] }] },
+      ],
+    });
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/components/ChecklistDashboard/checklist-dom-golden.test.mjs b/dashboard/src/components/ChecklistDashboard/checklist-dom-golden.test.mjs
new file mode 100644
index 0000000..1e45dc9
--- /dev/null
+++ b/dashboard/src/components/ChecklistDashboard/checklist-dom-golden.test.mjs
@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { checklistFixture } from "./ChecklistDashboard.fixture.mjs";
+import { withDeterministicTime } from "../../oven/test-support/deterministic-time.mjs";
+
+const componentPath = new URL("./ChecklistDashboard.tsx", import.meta.url).pathname;
+const normalizerPath = new URL("../../oven/test-support/dom-normalize.ts", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("../../oven", import.meta.url).pathname;
+const goldenPath = new URL("./checklist-dom.golden.html", import.meta.url);
+
+test("checklist detail static DOM matches the frozen byte golden", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".checklist-dom-golden-test-"));
+  try {
+    const componentOutput = join(outputDir, "ChecklistDashboard.mjs");
+    const normalizerOutput = join(outputDir, "dom-normalize.mjs");
+    await Promise.all([
+      build({ entryPoints: [componentPath], bundle: true, format: "esm", outfile: componentOutput, platform: "node", alias: { "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [normalizerPath], bundle: true, format: "esm", outfile: normalizerOutput, platform: "node", target: "node18" }),
+    ]);
+    const [{ ChecklistDashboard }, { normalize, parseHtml, serializeCanonical }] = await Promise.all([
+      import(`${new URL(`file://${componentOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${normalizerOutput}`).href}?test=${Date.now()}`),
+    ]);
+    const markup = withDeterministicTime(() => renderToStaticMarkup(createElement(ChecklistDashboard, { data: checklistFixture })));
+    const actual = serializeCanonical(normalize(parseHtml(markup)));
+    const expected = (await readFile(goldenPath, "utf8")).replace(/\n$/u, "");
+    assert.equal(actual, expected);
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/components/ChecklistDashboard/checklist-dom.golden.html b/dashboard/src/components/ChecklistDashboard/checklist-dom.golden.html
new file mode 100644
index 0000000..4845e2a
--- /dev/null
+++ b/dashboard/src/components/ChecklistDashboard/checklist-dom.golden.html
@@ -0,0 +1 @@
+<div class="shell detail-view-shell driving-parity-view checklist-detail-shell"><main class="detail-view" id="burnlist-detail"><section class="differential-overview checklist-overview"><div aria-label="Burnlist progress KPIs" class="driving-parity-kpi-strip has-burns checklist-kpi-strip"><div class="driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current" title="No active task"><svg aria-hidden="true" class="lucide lucide-clipboard-list driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><rect height="4" rx="1" ry="1" width="8" x="8" y="2"></rect><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg><div class="driving-parity-kpi-text"><div class="driving-parity-kpi-heading">Current</div><div class="driving-parity-kpi-ratio">Complete</div></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="2 of 2 tasks complete"><svg aria-hidden="true" class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"></circle><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" pathLength="100" r="21" stroke-dasharray="100.000 0.000" transform="rotate(-90 29 29)"></circle></svg><div class="driving-parity-kpi-text"><div class="driving-parity-kpi-heading">Progress</div><div class="driving-parity-kpi-ratio"><span class="pass">2</span><span class="separator">·</span><span class="total">2</span><span class="pass">(100%)</span></div></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section"><svg aria-hidden="true" class="lucide lucide-clock3 driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16.5 12"></polyline></svg><div class="driving-parity-kpi-text"><div class="driving-parity-kpi-heading">Elapsed</div><div class="driving-parity-kpi-ratio">10m</div></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section"><svg aria-hidden="true" class="lucide lucide-gauge driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 14 4-4"></path><path d="M3.34 19a10 10 0 1 1 17.32 0"></path></svg><div class="driving-parity-kpi-text"><div class="driving-parity-kpi-heading">Avg pace</div><div class="driving-parity-kpi-ratio">5m</div></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section"><svg aria-hidden="true" class="lucide lucide-timer-reset driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M10 2h4"></path><path d="M12 14v-4"></path><path d="M4 13a8 8 0 0 1 8-7 8 8 0 1 1-5.3 14L4 17.6"></path><path d="M9 17H4v5"></path></svg><div class="driving-parity-kpi-text"><div class="driving-parity-kpi-heading">Time left</div><div class="driving-parity-kpi-ratio">0m</div></div></div></div></section><div class="detail-workspace checklist-progress-workspace" data-detail-tab="dashboard"><section class="panel work-panel event-ledger-panel"><div class="work-panel-head"><div class="work-panel-title">Progress</div></div><div class="work-panel-body"><div class="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Event</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row log-table-row"><span class="log-table-cell age">10m</span><span class="log-table-cell event">B2</span><span class="log-table-cell result improved">Done</span><span class="log-table-cell delta improved">+1</span><span class="log-table-cell done">100%</span></article><article class="log-row log-table-row"><span class="log-table-cell age">20m</span><span class="log-table-cell event">B1</span><span class="log-table-cell result improved">Done</span><span class="log-table-cell delta improved">+1</span><span class="log-table-cell done">50%</span></article></div></div></div></section><section class="panel progress-panel"><div class="panel-title-row"><span class="burn-chart-label">Burn</span></div><div class="score"><div class="chart-wrap"><svg aria-label="Remaining items over time" class="chart checklist-progress-chart" role="img" viewBox="0 0 640 260"><g><line class="grid-line" x1="0" x2="640" y1="236" y2="236"></line></g><g><line class="grid-line" x1="0" x2="640" y1="118" y2="118"></line><rect class="label-backdrop" height="16" width="44" x="596" y="110"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="118">1</text></g><g><line class="grid-line" x1="0" x2="640" y1="0" y2="0"></line><rect class="label-backdrop" height="16" width="44" x="596" y="0"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="8">2</text></g><g><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="236"></line><text class="axis-label x-axis-label" text-anchor="middle" x="128" y="254">11:42</text></g><g><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="236"></line><text class="axis-label x-axis-label" text-anchor="middle" x="256" y="254">11:44</text></g><g><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="236"></line><text class="axis-label x-axis-label" text-anchor="middle" x="384" y="254">11:46</text></g><g><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="236"></line><text class="axis-label x-axis-label" text-anchor="middle" x="512" y="254">11:48</text></g><path class="progress-area" d="M 0.0 0.0 L 0.0 0.0 L 0.0 118.0 L 640.0 118.0 L 640.0 236.0 L 640.0 236.0 L 0.0 236.0 Z"></path><path class="progress-line" d="M 0.0 0.0 L 0.0 0.0 L 0.0 118.0 L 640.0 118.0 L 640.0 236.0"></path><text class="completion-marker" x="8" y="109">▼<title>Completed 1 item</title></text><text class="completion-marker" x="632" y="227">▼<title>Completed 1 item</title></text><circle class="progress-dot" cx="640" cy="236" r="4"></circle></svg></div></div></section></div><section class="checklist-events-section"><div class="checklist-events-head"><h2>Events<span class="field-list-count">(2)</span></h2></div><div class="event-card-list"><article aria-expanded="false" class="event-card expandable" data-event-card="true" role="button" tabindex="0"><span class="event-card-cell event-card-identity"><span class="event-card-title">Second event</span><span class="event-card-footer"><span class="event-card-id">B2</span><span class="event-card-meta"><time dateTime="2026-07-15T11:50:00Z" title="7/15/2026, 11:50:00 AM">10m</time><span>100%</span></span></span></span><div class="event-card-content"><div class="event-card-outcome"><div class="event-card-field-label">Outcome</div><div class="event-card-field-value"><p>Second proof.</p></div></div><span aria-hidden="true" class="event-card-expand">+</span></div></article><article class="event-card" data-event-card="true"><span class="event-card-cell event-card-identity"><span class="event-card-title">First event</span><span class="event-card-footer"><span class="event-card-id">B1</span><span class="event-card-meta"><time dateTime="2026-07-15T11:40:00Z" title="7/15/2026, 11:40:00 AM">20m</time><span>50%</span></span></span></span><div class="event-card-content"><div class="event-card-outcome"><div class="event-card-field-label">Outcome</div><div class="event-card-field-value"><p>First proof.</p></div></div></div></article></div></section></main></div>
diff --git a/dashboard/src/components/ChecklistDashboard/index.ts b/dashboard/src/components/ChecklistDashboard/index.ts
index cbf97a1..a07efaf 100644
--- a/dashboard/src/components/ChecklistDashboard/index.ts
+++ b/dashboard/src/components/ChecklistDashboard/index.ts
@@ -1 +1,2 @@
 export { ChecklistDashboard } from "./ChecklistDashboard";
+export { ChecklistOvenView } from "./ChecklistOvenView";
diff --git a/dashboard/src/components/CustomOvenView/CustomOvenView.tsx b/dashboard/src/components/CustomOvenView/CustomOvenView.tsx
new file mode 100644
index 0000000..2b4e2a5
--- /dev/null
+++ b/dashboard/src/components/CustomOvenView/CustomOvenView.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useState, type ComponentProps } from "react";
+import { customOvenSelection } from "@lib";
+import { OvenRuntime } from "@/oven/runtime/OvenRuntime";
+import { DashboardError } from "../DashboardError";
+import { EmptyState } from "../EmptyState";
+
+type OvenIr = ComponentProps<typeof OvenRuntime>["ir"];
+type LoadedOven = { ir: OvenIr; payload: unknown };
+
+function unwrapPayload(raw: unknown) {
+  return raw && typeof raw === "object" && "payload" in raw ? (raw as { payload: unknown }).payload : raw;
+}
+
+export function CustomOvenView() {
+  const selection = customOvenSelection();
+  const [loaded, setLoaded] = useState<LoadedOven | null>(null);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!selection?.repoKey) {
+      setLoaded(null);
+      setError("This custom Oven requires a repository key.");
+      return;
+    }
+    const controller = new AbortController();
+    const query = `?repoKey=${encodeURIComponent(selection.repoKey)}`;
+    const load = async () => {
+      setLoaded(null);
+      setError("");
+      try {
+        const [ovenResponse, dataResponse] = await Promise.all([
+          fetch(`/api/ovens/${selection.id}${query}`, { cache: "no-store", signal: controller.signal }),
+          fetch(`/api/oven-data/${selection.id}${query}`, { cache: "no-store", signal: controller.signal }),
+        ]);
+        if (!ovenResponse.ok) throw new Error(`Could not load Oven (${ovenResponse.status}).`);
+        if (!dataResponse.ok) throw new Error(`Could not load Oven data (${dataResponse.status}).`);
+        const [ovenBody, dataBody] = await Promise.all([ovenResponse.json(), dataResponse.json()]);
+        if (controller.signal.aborted) return;
+        setLoaded({ ir: ovenBody.oven.ir, payload: dataBody.payload });
+      } catch (cause) {
+        if (controller.signal.aborted) return;
+        setError(cause instanceof Error ? cause.message : "Could not load the custom Oven.");
+      }
+    };
+    void load();
+    return () => controller.abort();
+  }, [selection?.id, selection?.repoKey]);
+
+  if (error) return <DashboardError message={error} />;
+  if (!loaded) return <EmptyState title="Loading Oven" detail="Reading the Oven view and its bound data." />;
+  return <OvenRuntime ir={loaded.ir} payload={loaded.payload} adapt={unwrapPayload} />;
+}
diff --git a/dashboard/src/components/CustomOvenView/custom-oven-render.test.mjs b/dashboard/src/components/CustomOvenView/custom-oven-render.test.mjs
new file mode 100644
index 0000000..4772656
--- /dev/null
+++ b/dashboard/src/components/CustomOvenView/custom-oven-render.test.mjs
@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { mkdtemp, rm } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+
+const runtimePath = new URL("../../oven/runtime/OvenRuntime.tsx", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("../../oven", import.meta.url).pathname;
+const ovenSource = `<oven id="widget-oven" version="1" contract="checklist-progress@1" theme="checklist">
+  <kpi-strip>
+    <kpi-item variant="current" heading="Widget" title="/widget/name" value="/widget/count"/>
+  </kpi-strip>
+</oven>`;
+
+test("a custom Oven runtime renders author-shaped data values", { timeout: 20_000 }, async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".custom-oven-render-test-"));
+  try {
+    const runtimeOutput = join(outputDir, "OvenRuntime.mjs");
+    await build({
+      entryPoints: [runtimePath],
+      bundle: true,
+      format: "esm",
+      outfile: runtimeOutput,
+      platform: "node",
+      alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath },
+      jsx: "automatic",
+      packages: "external",
+      target: "node18",
+    });
+    const { OvenRuntime } = await import(`${new URL(`file://${runtimeOutput}`).href}?test=${Date.now()}`);
+    const compiled = compileOven(ovenSource, { file: "widget-oven.oven" });
+    assert.equal(compiled.ok, true, compiled.ok ? "" : JSON.stringify(compiled.diagnostics));
+    if (!compiled.ok) return;
+
+    const markup = renderToStaticMarkup(createElement(OvenRuntime, {
+      ir: compiled.ir,
+      payload: { widget: { name: "Sprockets", count: 42 } },
+    }));
+    assert.match(markup, /Sprockets/u);
+    assert.match(markup, />42</u);
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/components/CustomOvenView/index.ts b/dashboard/src/components/CustomOvenView/index.ts
new file mode 100644
index 0000000..c0f7448
--- /dev/null
+++ b/dashboard/src/components/CustomOvenView/index.ts
@@ -0,0 +1 @@
+export { CustomOvenView } from "./CustomOvenView";
diff --git a/dashboard/src/components/DifferentialTesting/DifferentialTesting.tsx b/dashboard/src/components/DifferentialTesting/DifferentialTesting.tsx
deleted file mode 100644
index 3b8c517..0000000
--- a/dashboard/src/components/DifferentialTesting/DifferentialTesting.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useEffect, useRef } from "react";
-import { adaptPerformanceTracingReport, ovenRepoKey } from "@lib";
-// @ts-expect-error The canonical renderer is plain ESM so React and the direct Oven route share one implementation.
-import { startDifferentialTestingLiveUpdates } from "../../../../ovens/differential-testing/renderer/differential-testing-renderer.js";
-
-export function DifferentialTestingPage({ ovenId = "differential-testing" }: { ovenId?: "differential-testing" | "performance-tracing" }) {
-  const root = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    document.body.classList.add("driving-parity-view");
-    if (ovenId === "performance-tracing") document.body.classList.add("performance-tracing-oven");
-    return () => {
-      document.body.classList.remove("driving-parity-view");
-      document.body.classList.remove("performance-tracing-oven");
-    };
-  }, [ovenId]);
-
-  useEffect(() => {
-    if (!root.current) return;
-    const performanceTracing = ovenId === "performance-tracing";
-    const controller = startDifferentialTestingLiveUpdates(root.current, {
-      repoKey: ovenRepoKey(),
-      dataOvenId: ovenId,
-      ...(performanceTracing ? {
-        adaptPayload: adaptPerformanceTracingReport,
-        mountOptions: { initialChart: "current", initialProgressChart: "delta" },
-        onError: (error: unknown) => {
-          if (!root.current) return;
-          const message = document.createElement("div");
-          message.className = "empty";
-          message.textContent = error instanceof Error ? error.message : String(error);
-          root.current.replaceChildren(message);
-        },
-      } : {}),
-    });
-    return () => controller.stop();
-  }, [ovenId]);
-
-  return <div ref={root} className={`shell driving-parity-view${ovenId === "performance-tracing" ? " performance-tracing-oven" : ""}`} />;
-}
diff --git a/ovens/differential-testing/renderer/differential-testing.css b/dashboard/src/components/DifferentialTesting/differential-testing.css
similarity index 100%
rename from ovens/differential-testing/renderer/differential-testing.css
rename to dashboard/src/components/DifferentialTesting/differential-testing.css
diff --git a/dashboard/src/components/DifferentialTesting/index.ts b/dashboard/src/components/DifferentialTesting/index.ts
deleted file mode 100644
index 085c9cb..0000000
--- a/dashboard/src/components/DifferentialTesting/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DifferentialTestingPage } from "./DifferentialTesting";
diff --git a/dashboard/src/components/DifferentialTestingOven/DifferentialTestingOven.tsx b/dashboard/src/components/DifferentialTestingOven/DifferentialTestingOven.tsx
new file mode 100644
index 0000000..4b40035
--- /dev/null
+++ b/dashboard/src/components/DifferentialTestingOven/DifferentialTestingOven.tsx
@@ -0,0 +1,29 @@
+import { adaptPerformanceTracingReport } from "@lib";
+import { adaptDifferentialTesting, type DifferentialTestingData } from "../../lib/differential-testing-adapter";
+import { OvenRuntime } from "@/oven/runtime/OvenRuntime";
+import { withDifferentialTestingEnvelope } from "@/oven/runtime/oven-payload-metadata";
+import differentialTestingIr from "../../../../ovens/differential-testing/differential-testing.ir.json";
+import performanceTracingIr from "../../../../ovens/performance-tracing/performance-tracing.ir.json";
+
+type ResponseEnvelope = { payload: unknown; fieldPage?: unknown; frameDeltaMetrics?: unknown };
+
+function responseEnvelope(raw: unknown): ResponseEnvelope {
+  return raw as ResponseEnvelope;
+}
+
+function adaptEnvelope(raw: unknown, adaptPayload: (payload: unknown) => DifferentialTestingData) {
+  const envelope = responseEnvelope(raw);
+  const payload = adaptDifferentialTesting(adaptPayload(envelope.payload));
+  return withDifferentialTestingEnvelope(payload, envelope.fieldPage, envelope.frameDeltaMetrics, Object.hasOwn(envelope, "frameDeltaMetrics"));
+}
+
+export const dtAdapt = (raw: unknown) => adaptEnvelope(raw, (payload) => payload as DifferentialTestingData);
+export const ptAdapt = (raw: unknown) => adaptEnvelope(raw, (payload) => adaptPerformanceTracingReport(payload) as DifferentialTestingData);
+
+export function DifferentialTestingOvenPage() {
+  return <OvenRuntime ir={differentialTestingIr} adapt={dtAdapt} />;
+}
+
+export function PerformanceTracingOvenPage() {
+  return <OvenRuntime ir={performanceTracingIr} adapt={ptAdapt} />;
+}
diff --git a/dashboard/src/components/DifferentialTestingOven/index.ts b/dashboard/src/components/DifferentialTestingOven/index.ts
new file mode 100644
index 0000000..235e180
--- /dev/null
+++ b/dashboard/src/components/DifferentialTestingOven/index.ts
@@ -0,0 +1 @@
+export { DifferentialTestingOvenPage, PerformanceTracingOvenPage } from "./DifferentialTestingOven";
diff --git a/dashboard/src/components/StreamingDiff/StreamingDiff.fixture.mjs b/dashboard/src/components/StreamingDiff/StreamingDiff.fixture.mjs
new file mode 100644
index 0000000..0e7341d
--- /dev/null
+++ b/dashboard/src/components/StreamingDiff/StreamingDiff.fixture.mjs
@@ -0,0 +1,50 @@
+export const streamingDiffFixture = {
+  identity: {
+    logicalRepoKey: "fixture/repository",
+    worktreeKey: "feature-streaming-diff",
+    session: "session-20260718-102030",
+  },
+  updatedAt: "2026-07-18T10:24:00.000Z",
+  cards: [
+    {
+      revId: "r-0123456789abcdef",
+      toolUseId: "tool-captured-001",
+      ts: "2026-07-18T10:20:30.000Z",
+      status: "captured",
+      files: [
+        {
+          path: "src/streaming-diff.ts",
+          kind: "modified",
+          diff: "@@ -1 +1 @@\n-export const state = \"old\";\n+export const state = \"new\";",
+        },
+        {
+          path: "src/new-file.mjs",
+          kind: "added",
+          diff: "@@ -0,0 +1,2 @@\n+export const ready = true;\n+",
+        },
+        {
+          path: "notes/obsolete.txt",
+          kind: "deleted",
+          diff: "@@ -1 +0,0 @@\n-remove this note",
+        },
+      ],
+    },
+    {
+      revId: "r-fedcba9876543210",
+      toolUseId: "tool-partial-002",
+      ts: "2026-07-18T10:23:45.000Z",
+      status: "partial",
+      partialReason: "Binary output was captured as metadata only.",
+      files: [
+        {
+          path: "assets/preview.bin",
+          kind: "binary",
+          meta: {
+            bytes: 4096,
+            reason: "Binary content is not rendered.",
+          },
+        },
+      ],
+    },
+  ],
+};
diff --git a/dashboard/src/components/StreamingDiff/StreamingDiff.tsx b/dashboard/src/components/StreamingDiff/StreamingDiff.tsx
index 5fb7f5f..0d26feb 100644
--- a/dashboard/src/components/StreamingDiff/StreamingDiff.tsx
+++ b/dashboard/src/components/StreamingDiff/StreamingDiff.tsx
@@ -1,81 +1,15 @@
 import { useEffect, useMemo } from "react";
-import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@layout";
 import { useStreamingDiffCards, useStreamingDiffFeeds } from "@hooks";
-import { ovenRepoKey, streamingDiffAutoOpenHref, streamingDiffFeedKey, streamingDiffRepositories, streamingDiffSelection } from "@lib";
-import { fileKindChip, isTextFileKind } from "@lib";
-import type { Project, StreamingDiffCard, StreamingDiffFeed, StreamingDiffFile } from "@lib";
-import "../../../../ovens/streaming-diff/renderer/streaming-diff.css";
-
-function timestamp(value: string | null) {
-  const parsed = value ? Date.parse(value) : Number.NaN;
-  return Number.isFinite(parsed) ? new Date(parsed).toLocaleString() : value ?? "Unknown activity time";
-}
-
-function FeedList({ feeds, error, loading, showRepository }: { feeds: StreamingDiffFeed[]; error: string; loading: boolean; showRepository: boolean }) {
-  return (
-    <section className="streaming-diff-view">
-      <header className="streaming-diff-heading">
-        <h1>Streaming Diff</h1>
-        <p>Recent feeds are ordered by published activity time, not process liveness.</p>
-      </header>
-      {error ? <p className="streaming-diff-message is-error">{error}</p> : loading ? <p className="streaming-diff-message">Loading recent feeds.</p> : !feeds.length ? <p className="streaming-diff-message">No recent feeds.</p> : (
-        <div className="streaming-diff-feed-list">
-          {feeds.map((feed) => (
-            <a className="streaming-diff-feed" href={feed.href} key={streamingDiffFeedKey(feed)}>
-              <span className="streaming-diff-feed-session">{feed.identity.session}</span>
-              {showRepository && <span className="streaming-diff-feed-worktree">repository {feed.repoLabel}</span>}
-              <span className="streaming-diff-feed-worktree">worktree {feed.identity.worktreeKey}</span>
-              <time className="streaming-diff-feed-time" dateTime={feed.updatedAt ?? undefined}>{timestamp(feed.updatedAt)}</time>
-            </a>
-          ))}
-        </div>
-      )}
-    </section>
-  );
-}
-
-function FileDiff({ file }: { file: StreamingDiffFile }) {
-  const chip = fileKindChip(file.kind, file.meta);
-  if (chip) {
-    return <section className="streaming-diff-file">
-      <div className="streaming-diff-file-head"><code>{file.path}</code><Badge variant="outline">{chip}</Badge></div>
-      {(file.meta?.reason || file.meta?.bytes !== undefined) && <p className="streaming-diff-file-meta">{file.meta?.reason}{file.meta?.reason && file.meta?.bytes !== undefined ? " · " : ""}{file.meta?.bytes !== undefined ? `${file.meta.bytes} bytes` : ""}</p>}
-    </section>;
-  }
-  return <section className="streaming-diff-file">
-    <div className="streaming-diff-file-head"><code>{file.path}</code><Badge variant="secondary">{file.kind}</Badge></div>
-    {isTextFileKind(file.kind) && file.diff !== undefined ? <pre className="streaming-diff-unified">{file.diff}</pre> : <p className="streaming-diff-file-meta">Diff content is unavailable.</p>}
-  </section>;
-}
-
-function DiffCard({ card }: { card: StreamingDiffCard }) {
-  const partial = card.status === "partial";
-  return <Card className="streaming-diff-card">
-    <CardHeader className="streaming-diff-card-header">
-      <div>
-        <CardTitle>{card.toolUseId}</CardTitle>
-        <CardDescription><time dateTime={card.ts}>{timestamp(card.ts)}</time> · {card.revId}</CardDescription>
-      </div>
-      <Badge variant={partial ? "destructive" : "default"}>{card.status}</Badge>
-    </CardHeader>
-    <CardContent className="streaming-diff-card-content">
-      {partial && <p className="streaming-diff-partial">{card.partialReason ?? "This revision is partial."}</p>}
-      {card.files.length ? card.files.map((file) => <FileDiff file={file} key={file.path} />) : <p className="streaming-diff-file-meta">No file content was captured.</p>}
-    </CardContent>
-  </Card>;
-}
-
-function SelectedFeed({ cards, error, session }: { cards: StreamingDiffCard[]; error: string; session: string }) {
-  return <section className="streaming-diff-view">
-    <header className="streaming-diff-heading">
-      <a className="streaming-diff-back" href={`/ovens/streaming-diff/view?repoKey=${encodeURIComponent(ovenRepoKey() ?? "")}`}>Recent feeds</a>
-      <h1>Streaming Diff</h1>
-      <p>Session {session}</p>
-    </header>
-    {error && <p className="streaming-diff-message is-error">{error}</p>}
-    <div className="streaming-diff-cards">{cards.map((card) => <DiffCard card={card} key={card.revId} />)}</div>
-    {!cards.length && <p className="streaming-diff-message">Waiting for diff cards.</p>}
-  </section>;
+import { FeedList } from "@oven";
+import { ovenRepoKey, streamingDiffAutoOpenHref, streamingDiffRepositories, streamingDiffSelection } from "@lib";
+import type { Project, StreamingDiffCard } from "@lib";
+import { OvenRuntime } from "@/oven/runtime/OvenRuntime";
+import streamingDiffIr from "../../../../ovens/streaming-diff/streaming-diff.ir.json";
+import "./streaming-diff.css";
+
+export function SelectedFeed({ backHref, cards, error, session }: { backHref: string; cards: StreamingDiffCard[]; error: string; session: string }) {
+  const payload = { identity: { session }, backHref, cards };
+  return <>{error && <p className="streaming-diff-message is-error">{error}</p>}<OvenRuntime ir={streamingDiffIr} payload={payload} /></>;
 }
 
 export function StreamingDiff({ projects, projectsLoading }: { projects: Project[]; projectsLoading: boolean }) {
@@ -90,5 +24,5 @@ export function StreamingDiff({ projects, projectsLoading }: { projects: Project
     if (autoOpenHref) window.location.replace(autoOpenHref);
   }, [autoOpenHref]);
 
-  return selection ? <SelectedFeed cards={cards.cards} error={cards.error} session={selection.session} /> : <FeedList {...feeds} showRepository={!repoKey && repositories.length > 1} />;
+  return selection ? <SelectedFeed backHref={`/ovens/streaming-diff/view?repoKey=${encodeURIComponent(selection.repoKey)}`} cards={cards.cards} error={cards.error} session={selection.session} /> : <FeedList {...feeds} showRepository={!repoKey && repositories.length > 1} />;
 }
diff --git a/dashboard/src/components/StreamingDiff/streaming-diff-dom-golden.test.mjs b/dashboard/src/components/StreamingDiff/streaming-diff-dom-golden.test.mjs
new file mode 100644
index 0000000..ba27d14
--- /dev/null
+++ b/dashboard/src/components/StreamingDiff/streaming-diff-dom-golden.test.mjs
@@ -0,0 +1,75 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { streamingDiffFixture } from "./StreamingDiff.fixture.mjs";
+import { withDeterministicTime } from "../../oven/test-support/deterministic-time.mjs";
+
+const componentPath = new URL("./StreamingDiff.tsx", import.meta.url).pathname;
+const normalizerPath = new URL("../../oven/test-support/dom-normalize.ts", import.meta.url).pathname;
+const sourcePath = new URL("../../", import.meta.url).pathname;
+const goldenPath = new URL("./streaming-diff-dom.golden.html", import.meta.url);
+const ovenPath = new URL("../../../../ovens/streaming-diff/streaming-diff.oven", import.meta.url).pathname;
+
+const ovenIrPlugin = {
+  name: "oven-ir",
+  setup(build) {
+    build.onResolve({ filter: /streaming-diff\.ir\.json$/ }, () => ({ path: ovenPath, namespace: "oven-ir" }));
+    build.onLoad({ filter: /.*/, namespace: "oven-ir" }, () => {
+      const compiled = compileOven(readFileSync(ovenPath, "utf8"), { file: "ovens/streaming-diff/streaming-diff.oven" });
+      if (!compiled.ok) throw new Error(JSON.stringify(compiled.diagnostics));
+      return { contents: `export default ${JSON.stringify(compiled.ir)};`, loader: "js" };
+    });
+  },
+};
+
+test("selected streaming-diff static DOM matches the frozen byte golden", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".streaming-diff-dom-golden-test-"));
+  try {
+    const componentOutput = join(outputDir, "StreamingDiff.mjs");
+    const normalizerOutput = join(outputDir, "dom-normalize.mjs");
+    await Promise.all([
+      build({
+        entryPoints: [componentPath],
+        bundle: true,
+        format: "esm",
+        outfile: componentOutput,
+        platform: "node",
+        alias: {
+          "@": sourcePath,
+          "@components": new URL("../../components", import.meta.url).pathname,
+          "@hooks": new URL("../../hooks", import.meta.url).pathname,
+          "@layout": new URL("../../layout", import.meta.url).pathname,
+          "@lib": new URL("../../lib", import.meta.url).pathname,
+          "@oven": new URL("../../oven", import.meta.url).pathname,
+        },
+        jsx: "automatic",
+        packages: "external",
+        plugins: [ovenIrPlugin],
+        target: "node18",
+      }),
+      build({ entryPoints: [normalizerPath], bundle: true, format: "esm", outfile: normalizerOutput, platform: "node", target: "node18" }),
+    ]);
+    const [{ SelectedFeed }, { normalize, parseHtml, serializeCanonical }] = await Promise.all([
+      import(`${new URL(`file://${componentOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${normalizerOutput}`).href}?test=${Date.now()}`),
+    ]);
+    const backHref = `/ovens/streaming-diff/view?repoKey=${encodeURIComponent(streamingDiffFixture.identity.logicalRepoKey)}`;
+    const markup = withDeterministicTime(() => renderToStaticMarkup(createElement(SelectedFeed, {
+      backHref,
+      cards: streamingDiffFixture.cards,
+      error: "",
+      session: streamingDiffFixture.identity.session,
+    })));
+    const actual = serializeCanonical(normalize(parseHtml(markup)));
+    const expected = (await readFile(goldenPath, "utf8")).trimEnd();
+    assert.equal(actual, expected);
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/components/StreamingDiff/streaming-diff-dom.golden.html b/dashboard/src/components/StreamingDiff/streaming-diff-dom.golden.html
new file mode 100644
index 0000000..63f747f
--- /dev/null
+++ b/dashboard/src/components/StreamingDiff/streaming-diff-dom.golden.html
@@ -0,0 +1 @@
+<section class="streaming-diff-view"><header class="streaming-diff-heading"><a class="streaming-diff-back" href="/ovens/streaming-diff/view?repoKey=fixture%2Frepository">Recent feeds</a><h1>Streaming Diff</h1><p>Session session-20260718-102030</p></header><div class="streaming-diff-cards"><div class="ui-card streaming-diff-card" data-slot="card"><div class="ui-card-header streaming-diff-card-header" data-slot="card-header"><div><div class="ui-card-title" data-slot="card-title">tool-captured-001</div><div class="ui-card-description" data-slot="card-description"><time dateTime="2026-07-18T10:20:30.000Z">7/18/2026, 10:20:30 AM</time>· r-0123456789abcdef</div></div><span class="ui-badge ui-badge--default" data-slot="badge" data-variant="default">captured</span></div><div class="ui-card-content streaming-diff-card-content" data-slot="card-content"><section class="streaming-diff-file"><div class="streaming-diff-file-head"><code>src/streaming-diff.ts</code><span class="ui-badge ui-badge--secondary" data-slot="badge" data-variant="secondary">modified</span></div><pre class="streaming-diff-unified">@@ -1 +1 @@ -export const state = "old"; +export const state = "new";</pre></section><section class="streaming-diff-file"><div class="streaming-diff-file-head"><code>src/new-file.mjs</code><span class="ui-badge ui-badge--secondary" data-slot="badge" data-variant="secondary">added</span></div><pre class="streaming-diff-unified">@@ -0,0 +1,2 @@ +export const ready = true; +</pre></section><section class="streaming-diff-file"><div class="streaming-diff-file-head"><code>notes/obsolete.txt</code><span class="ui-badge ui-badge--secondary" data-slot="badge" data-variant="secondary">deleted</span></div><pre class="streaming-diff-unified">@@ -1 +0,0 @@ -remove this note</pre></section></div></div><div class="ui-card streaming-diff-card" data-slot="card"><div class="ui-card-header streaming-diff-card-header" data-slot="card-header"><div><div class="ui-card-title" data-slot="card-title">tool-partial-002</div><div class="ui-card-description" data-slot="card-description"><time dateTime="2026-07-18T10:23:45.000Z">7/18/2026, 10:23:45 AM</time>· r-fedcba9876543210</div></div><span class="ui-badge ui-badge--destructive" data-slot="badge" data-variant="destructive">partial</span></div><div class="ui-card-content streaming-diff-card-content" data-slot="card-content"><p class="streaming-diff-partial">Binary output was captured as metadata only.</p><section class="streaming-diff-file"><div class="streaming-diff-file-head"><code>assets/preview.bin</code><span class="ui-badge ui-badge--outline" data-slot="badge" data-variant="outline">binary</span></div><p class="streaming-diff-file-meta">Binary content is not rendered. · 4096 bytes</p></section></div></div></div></section>
diff --git a/ovens/streaming-diff/renderer/streaming-diff.css b/dashboard/src/components/StreamingDiff/streaming-diff.css
similarity index 100%
rename from ovens/streaming-diff/renderer/streaming-diff.css
rename to dashboard/src/components/StreamingDiff/streaming-diff.css
diff --git a/dashboard/src/components/VisualParity/VisualParity.fixture.mjs b/dashboard/src/components/VisualParity/VisualParity.fixture.mjs
new file mode 100644
index 0000000..56cbb5c
--- /dev/null
+++ b/dashboard/src/components/VisualParity/VisualParity.fixture.mjs
@@ -0,0 +1,67 @@
+import { buildPayload } from "../../../../ovens/differential-testing/example/adapter.mjs";
+
+const generatedAt = "2026-07-16T12:00:00.000Z";
+const differentialTesting = buildPayload({
+  captureId: "reference-fixture",
+  generatedAt,
+  fields: [{
+    id: "position",
+    label: "Position",
+    sourceOwner: "fixture/state",
+    meaning: "One retained position.",
+    unit: "units",
+    tolerance: 0,
+  }],
+  samples: [{ tick: 0, values: { position: 1 } }],
+}, {
+  captureId: "candidate-fixture",
+  generatedAt,
+  samples: [{ tick: 0, values: { position: 1 } }],
+});
+const image = (label) => ({ label, src: "data:image/png;base64,AA==", width: 1, height: 1 });
+const difference = { changedPixels: 1, totalPixels: 1, ratio: 1, meanAbsoluteDelta: 1, maximumAbsoluteDelta: 1 };
+
+export const visualParityFixture = {
+  schema: "burnlist-visual-parity-data@1",
+  differentialTesting,
+  domains: [
+    { id: "world", label: "World", isolation: "render-pass", qualification: "context" },
+    {
+      id: "cars",
+      label: "Cars",
+      isolation: "render-pass",
+      qualification: "target",
+      tolerance: {
+        schema: "fixture-visual-parity-tolerance@1",
+        channelDelta: 1,
+        meanAbsoluteDelta: 1,
+        changedPixelRatio: 1,
+        rationale: "Fixture-only deterministic raster allowance.",
+      },
+    },
+  ],
+  comparisons: [{
+    id: differentialTesting.scenarioCatalog.selectedScenarioId + "-frame-0",
+    label: "Fixture frame 0",
+    frame: 0,
+    status: "pass",
+    domains: {
+      world: {
+        label: "World",
+        status: "fail",
+        reference: image("Reference"),
+        candidate: image("Candidate"),
+        diff: image("Diff"),
+        difference: { ...difference },
+      },
+      cars: {
+        label: "Cars",
+        status: "pass",
+        reference: image("Reference"),
+        candidate: image("Candidate"),
+        diff: image("Diff"),
+        difference: { ...difference },
+      },
+    },
+  }],
+};
diff --git a/dashboard/src/components/VisualParity/VisualParity.tsx b/dashboard/src/components/VisualParity/VisualParity.tsx
index d3d0d43..1e15178 100644
--- a/dashboard/src/components/VisualParity/VisualParity.tsx
+++ b/dashboard/src/components/VisualParity/VisualParity.tsx
@@ -1,110 +1,16 @@
-import { useEffect, useMemo, useState } from "react";
-import { ArrowLeft } from "lucide-react";
+import { useMemo } from "react";
 import { useVisualParityData } from "@hooks";
-import { visualParityDomainSummary } from "@lib";
-
-function percent(value: number) {
-  return `${(value * 100).toFixed(value < 0.01 ? 3 : 2)}%`;
-}
-
-function delta(value: number) {
-  return value.toFixed(4).replace(/0+$/u, "").replace(/\.$/u, "");
-}
+import { adaptVisualParity } from "@lib/visual-parity-oven-adapter";
+import { OvenRuntime } from "@/oven/runtime/OvenRuntime";
+import ovenIr from "../../../../ovens/visual-parity/visual-parity.ir.json";
 
 export function VisualParityPage() {
   const { payload, error, loading } = useVisualParityData();
-  const initialDomain = payload?.domains.find((domain) => domain.qualification === "target")?.id
-    ?? payload?.domains[0]?.id ?? "";
-  const [selectedDomainId, setSelectedDomainId] = useState(initialDomain);
-
-  useEffect(() => {
-    if (!payload?.domains.length) return;
-    if (!payload.domains.some((domain) => domain.id === selectedDomainId)) {
-      setSelectedDomainId(payload.domains.find((domain) => domain.qualification === "target")?.id
-        ?? payload.domains[0].id);
-    }
-  }, [payload, selectedDomainId]);
-
-  const domain = payload?.domains.find((entry) => entry.id === selectedDomainId)
-    ?? payload?.domains.find((entry) => entry.qualification === "target")
-    ?? payload?.domains[0];
-  const summary = useMemo(() => payload && domain
-    ? visualParityDomainSummary(payload, domain.id) : null, [payload, domain]);
-  const targetPass = payload?.comparisons.every((comparison) => comparison.status === "pass") ?? false;
-  const visibleComparisons = payload && domain ? payload.comparisons.filter((comparison) => {
-    const entry = comparison.domains[domain.id];
-    return entry.reference.src && entry.candidate.src && entry.diff.src;
-  }) : [];
+  const ovenPayload = useMemo(() => payload ? adaptVisualParity(payload) : null, [payload]);
 
   if (loading && !payload) return <div className="visual-parity-state">Loading Visual Parity…</div>;
   if (error && !payload) return <div className="visual-parity-state is-error">{error}</div>;
-  if (!payload || !domain || !summary) return <div className="visual-parity-state">Visual Parity has no retained domains.</div>;
-
-  return (
-    <section className="visual-parity-page">
-      <header className="visual-parity-heading">
-        <a className="visual-parity-back" href="/"><ArrowLeft aria-hidden="true" />Burnlists</a>
-        <div>
-          <div className={`visual-parity-verdict ${targetPass ? "pass" : "fail"}`}>
-            {targetPass ? "Target qualified" : "Target open"}
-          </div>
-          <p>{payload.comparisons.length} settled frames · isolated render passes · live refresh</p>
-        </div>
-        {error && <span className="visual-parity-refresh-error">{error}</span>}
-      </header>
-
-      <nav aria-label="Visual parity domains" className="visual-parity-domains">
-        {payload.domains.map((entry) => {
-          const current = entry.id === domain.id;
-          const domainSummary = visualParityDomainSummary(payload, entry.id);
-          return (
-            <button
-              aria-pressed={current}
-              className={current ? "is-active" : ""}
-              key={entry.id}
-              onClick={() => setSelectedDomainId(entry.id)}
-              type="button"
-            >
-              <span>{entry.label}</span>
-              <small>{entry.qualification} · {domainSummary.failed ? `${domainSummary.failed} fail` : "pass"}</small>
-            </button>
-          );
-        })}
-      </nav>
-
-      <div className="visual-parity-metrics">
-        <article><span>Frames</span><strong>{summary.passed}/{payload.comparisons.length}</strong></article>
-        <article><span>Changed pixels</span><strong>{percent(summary.ratio)}</strong></article>
-        <article><span>Mean RGB delta</span><strong>{delta(summary.meanAbsoluteDelta)}</strong></article>
-        <article><span>Maximum delta</span><strong>{summary.maximumAbsoluteDelta}</strong></article>
-      </div>
-
-      <div className="visual-parity-domain-note">
-        <strong>{domain.qualification === "target" ? "Qualifying target" : "Diagnostic context"}</strong>
-        <span>{domain.tolerance?.rationale ?? "Exact zero tolerance."}</span>
-      </div>
+  if (!payload || !payload.domains.length) return <div className="visual-parity-state">Visual Parity has no retained domains.</div>;
 
-      <div className="visual-parity-frames">
-        {visibleComparisons.map((comparison) => {
-          const entry = comparison.domains[domain.id];
-          return (
-            <article className={`visual-parity-frame ${entry.status}`} key={comparison.id}>
-              <header>
-                <strong>Frame {comparison.frame}</strong>
-                <span>{entry.status} · {percent(entry.difference.ratio)} · mean {delta(entry.difference.meanAbsoluteDelta)} · max {entry.difference.maximumAbsoluteDelta}</span>
-              </header>
-              <div className="visual-parity-shots">
-                {[entry.reference, entry.candidate, entry.diff].map((image) => (
-                  <figure key={image.label}>
-                    <figcaption>{image.label}</figcaption>
-                    <img alt={`${entry.label} ${image.label.toLowerCase()} frame ${comparison.frame}`} height={image.height} src={image.src ?? undefined} width={image.width} />
-                  </figure>
-                ))}
-              </div>
-            </article>
-          );
-        })}
-      </div>
-    </section>
-  );
+  return <OvenRuntime ir={ovenIr} payload={ovenPayload!} />;
 }
diff --git a/dashboard/src/components/VisualParity/VisualParityView.tsx b/dashboard/src/components/VisualParity/VisualParityView.tsx
new file mode 100644
index 0000000..a5d225d
--- /dev/null
+++ b/dashboard/src/components/VisualParity/VisualParityView.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { visualParityDomainSummary, type VisualParityPayload } from "@lib";
+import { DomainNote, DomainTabs, FrameCard, MetricTiles, VerdictHeader } from "@oven";
+
+export function VisualParityView({ payload, selectedDomainId: initialDomainId, error }: { payload: VisualParityPayload; selectedDomainId: string; error: string }) {
+  const [selectedDomainId, setSelectedDomainId] = useState(initialDomainId);
+
+  useEffect(() => {
+    setSelectedDomainId(initialDomainId);
+  }, [initialDomainId]);
+
+  const domain = payload.domains.find((entry) => entry.id === selectedDomainId)
+    ?? payload.domains.find((entry) => entry.qualification === "target")
+    ?? payload.domains[0];
+  const summary = visualParityDomainSummary(payload, domain.id);
+  const targetPass = payload.comparisons.every((comparison) => comparison.status === "pass");
+  const visibleComparisons = payload.comparisons.filter((comparison) => {
+    const entry = comparison.domains[domain.id];
+    return entry.reference.src && entry.candidate.src && entry.diff.src;
+  });
+
+  return (
+    <section className="visual-parity-page">
+      <VerdictHeader targetPass={targetPass} framesCount={payload.comparisons.length} error={error} />
+      <DomainTabs tabs={payload.domains.map((entry) => ({ id: entry.id, label: entry.label, qualification: entry.qualification, failed: visualParityDomainSummary(payload, entry.id).failed }))} activeId={domain.id} onSelect={setSelectedDomainId} />
+      <MetricTiles passed={summary.passed} total={payload.comparisons.length} ratio={summary.ratio} meanAbsoluteDelta={summary.meanAbsoluteDelta} maximumAbsoluteDelta={summary.maximumAbsoluteDelta} />
+      <DomainNote isTarget={domain.qualification === "target"} rationale={domain.tolerance?.rationale ?? "Exact zero tolerance."} />
+
+      <div className="visual-parity-frames">
+        {visibleComparisons.map((comparison) => {
+          const entry = comparison.domains[domain.id];
+          return <FrameCard key={comparison.id} status={entry.status} frame={comparison.frame} difference={entry.difference} images={[entry.reference, entry.candidate, entry.diff]} label={entry.label} />;
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/dashboard/src/components/VisualParity/goldens/visual-parity-context.golden.html b/dashboard/src/components/VisualParity/goldens/visual-parity-context.golden.html
new file mode 100644
index 0000000..ce147d5
--- /dev/null
+++ b/dashboard/src/components/VisualParity/goldens/visual-parity-context.golden.html
@@ -0,0 +1 @@
+<section class="visual-parity-page"><header class="visual-parity-heading"><a class="visual-parity-back" href="/"><svg aria-hidden="true" class="lucide lucide-arrow-left" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>Burnlists</a><div><div class="visual-parity-verdict pass">Target qualified</div><p>1 settled frames · isolated render passes · live refresh</p></div></header><nav aria-label="Visual parity domains" class="visual-parity-domains"><button aria-pressed="true" class="is-active" type="button"><span>World</span><small>context · 1 fail</small></button><button aria-pressed="false" class="" type="button"><span>Cars</span><small>target · pass</small></button></nav><div class="visual-parity-metrics"><article><span>Frames</span><strong>0/1</strong></article><article><span>Changed pixels</span><strong>100.00%</strong></article><article><span>Mean RGB delta</span><strong>1</strong></article><article><span>Maximum delta</span><strong>1</strong></article></div><div class="visual-parity-domain-note"><strong>Diagnostic context</strong><span>Exact zero tolerance.</span></div><div class="visual-parity-frames"><article class="visual-parity-frame fail"><header><strong>Frame 0</strong><span>fail · 100.00% · mean 1 · max 1</span></header><div class="visual-parity-shots"><figure><figcaption>Reference</figcaption><img alt="World reference frame 0" height="1" src="data:image/png;base64,AA==" width="1"></img></figure><figure><figcaption>Candidate</figcaption><img alt="World candidate frame 0" height="1" src="data:image/png;base64,AA==" width="1"></img></figure><figure><figcaption>Diff</figcaption><img alt="World diff frame 0" height="1" src="data:image/png;base64,AA==" width="1"></img></figure></div></article></div></section>
diff --git a/dashboard/src/components/VisualParity/goldens/visual-parity-target.golden.html b/dashboard/src/components/VisualParity/goldens/visual-parity-target.golden.html
new file mode 100644
index 0000000..59c7517
--- /dev/null
+++ b/dashboard/src/components/VisualParity/goldens/visual-parity-target.golden.html
@@ -0,0 +1 @@
+<section class="visual-parity-page"><header class="visual-parity-heading"><a class="visual-parity-back" href="/"><svg aria-hidden="true" class="lucide lucide-arrow-left" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg>Burnlists</a><div><div class="visual-parity-verdict pass">Target qualified</div><p>1 settled frames · isolated render passes · live refresh</p></div></header><nav aria-label="Visual parity domains" class="visual-parity-domains"><button aria-pressed="false" class="" type="button"><span>World</span><small>context · 1 fail</small></button><button aria-pressed="true" class="is-active" type="button"><span>Cars</span><small>target · pass</small></button></nav><div class="visual-parity-metrics"><article><span>Frames</span><strong>1/1</strong></article><article><span>Changed pixels</span><strong>100.00%</strong></article><article><span>Mean RGB delta</span><strong>1</strong></article><article><span>Maximum delta</span><strong>1</strong></article></div><div class="visual-parity-domain-note"><strong>Qualifying target</strong><span>Fixture-only deterministic raster allowance.</span></div><div class="visual-parity-frames"><article class="visual-parity-frame pass"><header><strong>Frame 0</strong><span>pass · 100.00% · mean 1 · max 1</span></header><div class="visual-parity-shots"><figure><figcaption>Reference</figcaption><img alt="Cars reference frame 0" height="1" src="data:image/png;base64,AA==" width="1"></img></figure><figure><figcaption>Candidate</figcaption><img alt="Cars candidate frame 0" height="1" src="data:image/png;base64,AA==" width="1"></img></figure><figure><figcaption>Diff</figcaption><img alt="Cars diff frame 0" height="1" src="data:image/png;base64,AA==" width="1"></img></figure></div></article></div></section>
diff --git a/dashboard/src/components/VisualParity/index.ts b/dashboard/src/components/VisualParity/index.ts
index 0401ef2..7f094c6 100644
--- a/dashboard/src/components/VisualParity/index.ts
+++ b/dashboard/src/components/VisualParity/index.ts
@@ -1 +1,2 @@
 export { VisualParityPage } from "./VisualParity";
+export { VisualParityView } from "./VisualParityView";
diff --git a/dashboard/src/components/VisualParity/visual-parity-dom-golden.test.mjs b/dashboard/src/components/VisualParity/visual-parity-dom-golden.test.mjs
new file mode 100644
index 0000000..ce4fb5a
--- /dev/null
+++ b/dashboard/src/components/VisualParity/visual-parity-dom-golden.test.mjs
@@ -0,0 +1,58 @@
+import assert from "node:assert/strict";
+import { mkdir, mkdtemp, readFile, rename, rm, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { assertVisualParityData } from "../../../../ovens/visual-parity/contract.mjs";
+import { visualParityFixture } from "./VisualParity.fixture.mjs";
+
+const componentPath = new URL("./VisualParityView.tsx", import.meta.url).pathname;
+const normalizerPath = new URL("../../oven/test-support/dom-normalize.ts", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("../../oven", import.meta.url).pathname;
+const goldenDirectory = new URL("./goldens", import.meta.url).pathname;
+const states = [
+  { name: "visual-parity-target", selectedDomainId: "cars" },
+  { name: "visual-parity-context", selectedDomainId: "world" },
+];
+
+test("visual-parity view static DOM matches frozen goldens", async () => {
+  assert.doesNotThrow(() => assertVisualParityData(visualParityFixture));
+  const outputDir = await mkdtemp(join(process.cwd(), ".visual-parity-dom-golden-test-"));
+  try {
+    const componentOutput = join(outputDir, "VisualParityView.mjs");
+    const normalizerOutput = join(outputDir, "dom-normalize.mjs");
+    await Promise.all([
+      build({ entryPoints: [componentPath], bundle: true, format: "esm", outfile: componentOutput, platform: "node", alias: { "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [normalizerPath], bundle: true, format: "esm", outfile: normalizerOutput, platform: "node", target: "node18" }),
+    ]);
+    const [{ VisualParityView }, { normalize, parseHtml, serializeCanonical }] = await Promise.all([
+      import(`${new URL(`file://${componentOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${normalizerOutput}`).href}?test=${Date.now()}`),
+    ]);
+
+    for (const state of states) {
+      const markup = renderToStaticMarkup(createElement(VisualParityView, {
+        payload: visualParityFixture,
+        selectedDomainId: state.selectedDomainId,
+        error: "",
+      }));
+      const actual = serializeCanonical(normalize(parseHtml(markup)));
+      const goldenPath = join(goldenDirectory, `${state.name}.golden.html`);
+      try {
+        const expected = (await readFile(goldenPath, "utf8")).replace(/\n$/u, "");
+        assert.equal(actual, expected);
+      } catch (error) {
+        if (error?.code !== "ENOENT") throw error;
+        await mkdir(goldenDirectory, { recursive: true });
+        const temporaryPath = `${goldenPath}.${process.pid}.tmp`;
+        await writeFile(temporaryPath, `${actual}\n`);
+        await rename(temporaryPath, goldenPath);
+      }
+    }
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/ovens/visual-parity/renderer/visual-parity.css b/dashboard/src/components/VisualParity/visual-parity.css
similarity index 100%
rename from ovens/visual-parity/renderer/visual-parity.css
rename to dashboard/src/components/VisualParity/visual-parity.css
diff --git a/dashboard/src/components/index.ts b/dashboard/src/components/index.ts
index cdce3a9..6fcb5ec 100644
--- a/dashboard/src/components/index.ts
+++ b/dashboard/src/components/index.ts
@@ -1,8 +1,9 @@
 export { AppHeader } from "./AppHeader";
 export { NewOvenPage, RunBurnPage } from "./BurnOvens";
-export { ChecklistDashboard } from "./ChecklistDashboard";
+export { ChecklistDashboard, ChecklistOvenView } from "./ChecklistDashboard";
+export { CustomOvenView } from "./CustomOvenView";
 export { DashboardError } from "./DashboardError";
-export { DifferentialTestingPage } from "./DifferentialTesting";
+export { DifferentialTestingOvenPage, PerformanceTracingOvenPage } from "./DifferentialTestingOven";
 export { EmptyState } from "./EmptyState";
 export { FILTERS, Filters } from "./Filters";
 export { ProjectGroup } from "./ProjectGroup";
diff --git a/dashboard/src/hooks/streaming-diff-transport.mjs b/dashboard/src/hooks/streaming-diff-transport.mjs
new file mode 100644
index 0000000..ce6f03d
--- /dev/null
+++ b/dashboard/src/hooks/streaming-diff-transport.mjs
@@ -0,0 +1,7 @@
+import { applyStreamingDiffUpdate, parseStreamingDiffCard } from "../lib/streaming-diff.mjs";
+
+export function applyStreamingDiffCardMessage(cards, raw) {
+  const card = parseStreamingDiffCard(JSON.parse(raw));
+  if (!card) throw new Error("invalid card");
+  return applyStreamingDiffUpdate(cards, { type: "card", card });
+}
diff --git a/dashboard/src/hooks/useStreamingDiff.ts b/dashboard/src/hooks/useStreamingDiff.ts
index 6ab86ec..5686989 100644
--- a/dashboard/src/hooks/useStreamingDiff.ts
+++ b/dashboard/src/hooks/useStreamingDiff.ts
@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
-import { applyStreamingDiffUpdate, mapStreamingDiffLandingFeeds, parseStreamingDiffCard } from "@lib";
+import { applyStreamingDiffUpdate, mapStreamingDiffLandingFeeds } from "@lib";
 import type { StreamingDiffCard, StreamingDiffFeed } from "@lib";
+import { useOvenLiveData } from "@oven";
+import { applyStreamingDiffCardMessage } from "./streaming-diff-transport.mjs";
 
 type FeedState = { feeds: StreamingDiffFeed[]; error: string; loading: boolean };
 type CardState = { cards: StreamingDiffCard[]; error: string };
@@ -45,34 +47,16 @@ export function useStreamingDiffFeeds(repositories: Repository[], discoveryLoadi
 }
 
 export function useStreamingDiffCards(selection: Selection): CardState {
-  const [state, setState] = useState<CardState>({ cards: [], error: "" });
+  const { data, error } = useOvenLiveData<StreamingDiffCard[]>({
+    transport: "sse",
+    makeUrl: () => selection ? `/api/oven-data/streaming-diff?${new URLSearchParams(selection)}` : null,
+    initialData: [],
+    applyReset: (cards) => applyStreamingDiffUpdate(cards, { type: "reset" }),
+    applyMessage: applyStreamingDiffCardMessage,
+    invalidError: "Received an invalid Streaming Diff card.",
+    disconnectError: "The stream disconnected; reconnecting.",
+    deps: [selection?.repoKey, selection?.session, selection?.worktreeKey],
+  });
 
-  useEffect(() => {
-    if (!selection) {
-      setState({ cards: [], error: "" });
-      return;
-    }
-    const params = new URLSearchParams(selection);
-    const stream = new EventSource(`/api/oven-data/streaming-diff?${params}`);
-    setState({ cards: [], error: "" });
-    const reset = () => setState((current) => ({ ...current, cards: applyStreamingDiffUpdate(current.cards, { type: "reset" }) }));
-    stream.addEventListener("reset", reset);
-    stream.onopen = () => setState((current) => ({ ...current, error: "" }));
-    stream.onmessage = (event) => {
-      try {
-        const card = parseStreamingDiffCard(JSON.parse(event.data));
-        if (!card) throw new Error("invalid card");
-        setState((current) => ({ ...current, cards: applyStreamingDiffUpdate(current.cards, { type: "card", card }) }));
-      } catch {
-        setState((current) => ({ ...current, error: "Received an invalid Streaming Diff card." }));
-      }
-    };
-    stream.onerror = () => setState((current) => ({ ...current, error: "The stream disconnected; reconnecting." }));
-    return () => {
-      stream.removeEventListener("reset", reset);
-      stream.close();
-    };
-  }, [selection?.repoKey, selection?.session, selection?.worktreeKey]);
-
-  return state;
+  return { cards: data, error };
 }
diff --git a/dashboard/src/hooks/useVisualParityData.ts b/dashboard/src/hooks/useVisualParityData.ts
index 48a48f7..2c679c8 100644
--- a/dashboard/src/hooks/useVisualParityData.ts
+++ b/dashboard/src/hooks/useVisualParityData.ts
@@ -1,42 +1,21 @@
-import { useEffect, useRef, useState } from "react";
 import { ovenRepoKey, type VisualParityPayload } from "@lib";
+import { useOvenLiveData } from "@oven";
+import { receiveVisualParity } from "./visual-parity-transport.mjs";
 
 export function useVisualParityData() {
-  const [payload, setPayload] = useState<VisualParityPayload | null>(null);
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(true);
-  const inFlight = useRef(false);
+  const { data, error, loading } = useOvenLiveData<VisualParityPayload | null>({
+    transport: "poll",
+    makeUrl: () => {
+      const repoKey = ovenRepoKey();
+      const query = repoKey ? `?repoKey=${encodeURIComponent(repoKey)}` : "";
+      return `/api/oven-data/visual-parity${query}`;
+    },
+    intervalMs: 2_000,
+    receive: receiveVisualParity,
+    fallbackError: "Could not load Visual Parity.",
+    initialData: null,
+    deps: [],
+  });
 
-  useEffect(() => {
-    let cancelled = false;
-    const refresh = async () => {
-      if (inFlight.current) return;
-      inFlight.current = true;
-      try {
-        const repoKey = ovenRepoKey();
-        const query = repoKey ? `?repoKey=${encodeURIComponent(repoKey)}` : "";
-        const response = await fetch(`/api/oven-data/visual-parity${query}`, { cache: "no-store" });
-        const data = await response.json();
-        if (!response.ok) throw new Error(data.error ?? "Could not load Visual Parity.");
-        if (data.validated !== true) throw new Error("Visual Parity data was not validated by the Oven.");
-        if (!cancelled) {
-          setPayload(data.payload);
-          setError("");
-        }
-      } catch (cause) {
-        if (!cancelled) setError(cause instanceof Error ? cause.message : "Could not load Visual Parity.");
-      } finally {
-        inFlight.current = false;
-        if (!cancelled) setLoading(false);
-      }
-    };
-    void refresh();
-    const timer = window.setInterval(refresh, 2_000);
-    return () => {
-      cancelled = true;
-      window.clearInterval(timer);
-    };
-  }, []);
-
-  return { payload, error, loading };
+  return { payload: data, error, loading };
 }
diff --git a/dashboard/src/hooks/visual-parity-transport.mjs b/dashboard/src/hooks/visual-parity-transport.mjs
new file mode 100644
index 0000000..a8d4357
--- /dev/null
+++ b/dashboard/src/hooks/visual-parity-transport.mjs
@@ -0,0 +1,5 @@
+export function receiveVisualParity(response, json) {
+  if (!response.ok) throw new Error(json.error ?? "Could not load Visual Parity.");
+  if (json.validated !== true) throw new Error("Visual Parity data was not validated by the Oven.");
+  return json.payload;
+}
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
index fe30a45..50bfdec 100644
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -1,5 +1,5 @@
-@import "../../ovens/differential-testing/renderer/differential-testing.css";
-@import "../../ovens/visual-parity/renderer/visual-parity.css";
+@import "./components/DifferentialTesting/differential-testing.css";
+@import "./components/VisualParity/visual-parity.css";
 
 :root {
   color-scheme: dark;
@@ -316,11 +316,9 @@ h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 400; }
 .page-title { margin: 0; font: 400 24px/1.2 var(--dashboard-title-font); letter-spacing: -.01em; }
 .page-description { max-width: 768px; margin: 4px 0 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.5; }
 .oven-form { display: grid; gap: 20px; }
-.oven-form-stack { display: grid; gap: 20px; }
 .oven-form-card { border-color: rgba(232, 232, 232, .08); background: rgba(17, 17, 17, .8); }
 .card-title-compact { font-size: 16px; }
 .oven-form-content { display: grid; gap: 16px; }
-.oven-fields-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
 .form-field { display: grid; gap: 6px; color: var(--muted-foreground); font-size: 12px; }
 
 .form-control {
@@ -337,13 +335,10 @@ h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 400; }
 }
 
 .form-control:focus { border-color: rgba(90, 162, 255, .6); box-shadow: 0 0 0 2px rgba(90, 162, 255, .15); }
-.form-control-compact { padding: 6px 8px; border-color: rgba(232, 232, 232, .15); border-radius: 4px; background: rgba(0, 0, 0, .45); font-size: 12px; }
-.form-control-compact:focus { border-color: rgba(252, 211, 77, .7); box-shadow: 0 0 0 2px rgba(252, 211, 77, .15); }
 .form-control-tall { min-height: 176px; resize: vertical; }
 .form-control-mono { font-family: var(--dashboard-font); }
 .form-help { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.65; }
 .form-actions { display: flex; justify-content: flex-end; gap: 8px; }
-.form-actions-compact { gap: 4px; }
 
 .form-notice { padding: 12px 16px; border: 1px solid; border-radius: 6px; font-size: 14px; }
 .form-notice.is-error { border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .1); color: var(--destructive-foreground); }
@@ -352,36 +347,6 @@ h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 400; }
 .run-form-card { border-color: rgba(232, 232, 232, .08); background: rgba(17, 17, 17, .8); }
 .run-form-content { display: grid; gap: 16px; }
 
-.detail-builder-card { gap: 0; padding: 0; border: 0; background: transparent; }
-.detail-builder-header { padding: 0 0 16px; }
-.detail-builder-title { display: flex; align-items: center; gap: 8px; font-size: 16px; }
-.detail-builder-title svg { width: 16px; height: 16px; }
-.detail-builder-content { display: grid; gap: 16px; padding: 0; }
-.detail-skeleton { position: relative; display: grid; overflow: hidden; border-top: 1px solid rgba(232, 232, 232, .12); border-left: 1px solid rgba(232, 232, 232, .12); background: rgba(0, 0, 0, .25); touch-action: none; user-select: none; }
-.detail-grid-cell { min-width: 0; border-right: 1px solid rgba(232, 232, 232, .12); border-bottom: 1px solid rgba(232, 232, 232, .12); cursor: crosshair; }
-.detail-grid-cell:hover { background: rgba(252, 211, 77, .15); }
-.detail-drag-area { position: absolute; inset: 1px; z-index: 10; border: 1px solid rgba(252, 211, 77, .8); background: rgba(252, 211, 77, .25); pointer-events: none; }
-.detail-draft { position: absolute; inset: 1px; z-index: 30; padding: 8px; overflow: auto; border: 2px solid var(--amber); background: var(--card); box-shadow: 0 16px 30px rgba(0, 0, 0, .35); }
-.detail-editor { display: grid; align-content: center; min-height: 100%; gap: 8px; }
-.detail-editor.is-cell { padding: 36px 8px 8px; }
-.detail-description-input { width: 100%; min-height: 80px; resize: none; }
-.detail-type-picker { display: flex; flex-wrap: wrap; gap: 4px; }
-.detail-type-button { display: grid; width: 32px; height: 32px; border: 1px solid rgba(232, 232, 232, .15); border-radius: 4px; background: rgba(0, 0, 0, .35); color: var(--muted-foreground); cursor: pointer; place-items: center; transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease; }
-.detail-type-button svg { width: 16px; height: 16px; }
-.detail-type-button:hover { border-color: rgba(252, 211, 77, .6); color: var(--foreground); }
-.detail-type-button.is-selected { border-color: var(--amber); background: var(--amber); color: #000000; }
-.detail-cell { position: absolute; inset: 1px; z-index: 20; overflow: auto; border: 1px solid rgba(232, 232, 232, .18); background: rgba(17, 17, 17, .95); outline: 0 solid var(--amber); transition: outline-width 120ms ease; }
-.detail-cell:hover, .detail-cell:focus-within { z-index: 40; outline-width: 2px; }
-.detail-cell-actions { position: absolute; top: 0; right: 0; z-index: 10; display: flex; background: var(--amber); color: #000000; opacity: 0; transition: opacity 120ms ease; }
-.detail-cell:hover .detail-cell-actions, .detail-cell:focus-within .detail-cell-actions { opacity: 1; }
-.detail-cell-action { display: grid; width: 32px; height: 32px; cursor: pointer; place-items: center; }
-.detail-cell-action:hover { background: var(--amber-hover); }
-.detail-cell-action.is-destructive:hover { background: var(--destructive); color: var(--destructive-foreground); }
-.detail-cell-action svg { width: 16px; height: 16px; }
-.detail-preview { display: grid; width: 100%; min-height: 100%; padding: 12px; color: var(--foreground); cursor: pointer; gap: 12px; place-content: center; text-align: center; }
-.detail-preview-icon { width: 24px; height: 24px; margin: 0 auto; color: var(--amber); }
-.detail-preview-copy { color: var(--foreground); font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
-
 /* Shared checklist/differential detail hooks */
 
 .tile {
@@ -414,7 +379,6 @@ h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 400; }
   .dashboard-brand-name { display: none; }
   .dashboard-pagination { align-items: stretch; flex-direction: column; }
   .dashboard-pagination-controls { justify-content: space-between; }
-  .oven-fields-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .dashboard-project-summary { grid-template-columns: 12px minmax(0, 1fr) max-content; }
   .dashboard-project-root { grid-column: 2 / -1; grid-row: 2; }
 }
@@ -423,5 +387,4 @@ h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 400; }
   .dashboard-main[data-layout="index"] { padding-inline: 12px; }
   .dashboard-index-header { align-items: flex-start; flex-direction: column; }
   .burnlist-table-heading, .burnlist-table-cell { padding-inline: 8px; }
-  .oven-fields-row { grid-template-columns: 1fr; }
 }
diff --git a/dashboard/src/lib/checklist-adapter.ts b/dashboard/src/lib/checklist-adapter.ts
new file mode 100644
index 0000000..fe7bbac
--- /dev/null
+++ b/dashboard/src/lib/checklist-adapter.ts
@@ -0,0 +1,106 @@
+import type { ChecklistProgressData, CompletedItem, HistoryPoint } from "./types";
+
+export type EventRow = CompletedItem & { ordinal: number; percent: number };
+export type EventDetailField = { label: string; values: string[] };
+
+export type ChecklistOvenPayload = {
+  raw: ChecklistProgressData;
+  current: { value: string; title: string };
+  progress: { done: number; total: number; percent: number; title: string };
+  durations: { elapsed: string; pace: string; timeLeft: string };
+  ledger: Array<{ key: string; age: string; event: string; result: "Done"; delta: "+1"; donePercent: number }>;
+  history: HistoryPoint[];
+  events: Array<EventRow & { key: string; age: string; fields: EventDetailField[] }>;
+};
+
+const EVENT_DETAIL_LABELS = new Set(["Completed", "Changed", "Proof", "Outcome", "Follow-up"]);
+
+export function formatDuration(milliseconds: number) {
+  if (!Number.isFinite(milliseconds) || milliseconds < 0) return "--";
+  const minutes = Math.max(0, Math.round(milliseconds / 60_000));
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  const remainder = minutes % 60;
+  if (hours < 24) return remainder ? `${hours}h ${remainder}m` : `${hours}h`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ${hours % 24}h`;
+}
+
+export function compactAge(value: string, now: string) {
+  const delta = Math.max(0, Date.parse(now) - Date.parse(value));
+  const minutes = Math.floor(delta / 60_000);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  return `${Math.floor(hours / 24)}d`;
+}
+
+export function timing(data: ChecklistProgressData) {
+  const points = data.history.filter((point) => Number.isFinite(Date.parse(point.time)));
+  const completedTimes = data.completed.map((item) => Date.parse(item.completedAt)).filter(Number.isFinite).sort((a, b) => a - b);
+  const start = points.length ? Date.parse(points[0].time) : completedTimes[0] ?? Date.parse(data.generatedAt);
+  const lastCompletion = completedTimes.at(-1) ?? start;
+  const end = data.remaining === 0 && completedTimes.length ? lastCompletion : Date.parse(data.generatedAt);
+  const intervals = completedTimes.map((time, index) => time - (index ? completedTimes[index - 1] : start)).filter((value) => value >= 0);
+  if (data.remaining > 0) intervals.push(Math.max(0, end - lastCompletion));
+  const pace = intervals.length ? intervals.reduce((sum, value) => sum + value, 0) / intervals.length : 0;
+  const currentAge = Math.max(0, end - lastCompletion);
+  const timeLeft = data.remaining ? Math.max(pace, currentAge) + Math.max(0, data.remaining - 1) * pace : 0;
+  return { elapsed: end - start, pace, timeLeft };
+}
+
+export function checklistEventDetailFields(detail: string): EventDetailField[] {
+  const fields: EventDetailField[] = [];
+  let current: EventDetailField | null = null;
+  for (const rawLine of detail.split(/\r?\n/u)) {
+    const line = rawLine.trim();
+    if (!line) continue;
+    const heading = line.match(/^([^:]+):(?:\s*(.*))?$/u);
+    if (heading && EVENT_DETAIL_LABELS.has(heading[1])) {
+      current = { label: heading[1], values: [] };
+      fields.push(current);
+      if (heading[2]) current.values.push(heading[2]);
+      continue;
+    }
+    if (!current) {
+      current = { label: "Detail", values: [] };
+      fields.push(current);
+    }
+    current.values.push(line.replace(/^-\s+/u, ""));
+  }
+  return fields;
+}
+
+export function eventRows(data: ChecklistProgressData): EventRow[] {
+  const total = Math.max(1, data.total);
+  return [...data.completed]
+    .sort((left, right) => Date.parse(left.completedAt) - Date.parse(right.completedAt))
+    .map((item, index) => ({ ...item, ordinal: index + 1, percent: Math.min(100, Math.round(((index + 1) / total) * 100)) }))
+    .reverse();
+}
+
+export function progressHistory(data: ChecklistProgressData): HistoryPoint[] {
+  const provided = data.history.filter((point) => Number.isFinite(Date.parse(point.time))).sort((left, right) => Date.parse(left.time) - Date.parse(right.time));
+  const monotonic = provided.every((point, index) => index === 0 || point.done >= provided[index - 1].done);
+  if (provided.length && monotonic && provided.at(-1)?.done === data.done) return provided;
+  const total = Math.max(1, data.total);
+  const rebuilt = [...data.completed].sort((left, right) => Date.parse(left.completedAt) - Date.parse(right.completedAt)).map((item, index) => ({ time: item.completedAt, done: index + 1, remaining: Math.max(0, total - index - 1), total, percent: Math.min(100, Math.round(((index + 1) / total) * 100)) }));
+  if (data.remaining > 0 && (!rebuilt.length || Date.parse(data.generatedAt) > Date.parse(rebuilt.at(-1)!.time))) rebuilt.push({ time: data.generatedAt, done: data.done, remaining: data.remaining, total, percent: data.percent });
+  return rebuilt;
+}
+
+export function adaptChecklist(data: ChecklistProgressData): ChecklistOvenPayload {
+  const durations = timing(data);
+  const rows = eventRows(data);
+  const current = data.active[0];
+  return {
+    raw: data,
+    current: { value: current ? `${current.id} · Active` : "Complete", title: current?.title ?? "No active task" },
+    progress: { done: data.done, total: data.total, percent: data.percent, title: `${data.done} of ${data.total} tasks complete` },
+    durations: { elapsed: formatDuration(durations.elapsed), pace: formatDuration(durations.pace), timeLeft: formatDuration(durations.timeLeft) },
+    ledger: rows.slice(0, 8).map((item) => ({ key: `${item.id}/${item.completedAt}`, age: compactAge(item.completedAt, data.generatedAt), event: item.id, result: "Done", delta: "+1", donePercent: item.percent })),
+    history: progressHistory(data),
+    events: rows.map((item) => ({ ...item, key: `${item.id}/${item.completedAt}`, age: compactAge(item.completedAt, data.generatedAt), fields: item.detail ? checklistEventDetailFields(item.detail) : [] })),
+  };
+}
diff --git a/dashboard/src/lib/differential-testing-adapter.test.mjs b/dashboard/src/lib/differential-testing-adapter.test.mjs
new file mode 100644
index 0000000..6404d70
--- /dev/null
+++ b/dashboard/src/lib/differential-testing-adapter.test.mjs
@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { mkdtemp, rm } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { build } from "esbuild";
+import {
+  differentialTestingEmptyPayload,
+  differentialTestingPayload,
+} from "../oven/differential-testing-render/golden-harness.mjs";
+
+const adapterPath = new URL("./differential-testing-adapter.ts", import.meta.url).pathname;
+
+test("adapter exposes contract pointers and selects the detail page", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".differential-testing-adapter-test-"));
+  try {
+    const outputPath = join(outputDir, "differential-testing-adapter.mjs");
+    await build({ entryPoints: [adapterPath], bundle: true, format: "esm", outfile: outputPath, platform: "node", target: "node18" });
+    const { adaptDifferentialTesting } = await import(`${new URL(`file://${outputPath}`).href}?test=${Date.now()}`);
+    const data = differentialTestingPayload();
+    const payload = adaptDifferentialTesting(data);
+    assert.equal(payload.pageMode, "detail");
+    assert.equal(payload.scenarioCatalog, data.scenarioCatalog);
+    assert.equal(payload.progress, data.progress);
+    assert.equal(payload.log, data.log);
+    assert.equal(payload.summary.fields, data.summary.fields);
+    assert.equal(payload.summary.frames, data.summary.frames);
+    assert.equal(payload.fields, data.fields);
+    assert.equal(payload.telemetry, data.telemetry);
+    assert.equal(payload.refresh, data.refresh);
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
+
+test("adapter selects the empty page without mutating the contract", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".differential-testing-adapter-test-"));
+  try {
+    const outputPath = join(outputDir, "differential-testing-adapter.mjs");
+    await build({ entryPoints: [adapterPath], bundle: true, format: "esm", outfile: outputPath, platform: "node", target: "node18" });
+    const { adaptDifferentialTesting } = await import(`${new URL(`file://${outputPath}`).href}?test=${Date.now()}`);
+    const data = differentialTestingEmptyPayload();
+    const before = structuredClone(data);
+    const payload = adaptDifferentialTesting(data);
+    assert.equal(payload.pageMode, "empty");
+    assert.deepEqual(data, before);
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/lib/differential-testing-adapter.ts b/dashboard/src/lib/differential-testing-adapter.ts
new file mode 100644
index 0000000..68e3c5a
--- /dev/null
+++ b/dashboard/src/lib/differential-testing-adapter.ts
@@ -0,0 +1,19 @@
+export type DifferentialTestingData = {
+  scenarioCatalog: { selectedScenarioId: string | null; scenarios: unknown[] };
+  progress: unknown[];
+  log: unknown[];
+  summary: { fields: unknown; frames: unknown; [key: string]: unknown };
+  fields: unknown[];
+  telemetry?: unknown;
+  refresh: unknown;
+  [key: string]: unknown;
+};
+
+export type DifferentialTestingOvenPayload = DifferentialTestingData & {
+  pageMode: "empty" | "detail";
+};
+
+export function adaptDifferentialTesting(data: DifferentialTestingData): DifferentialTestingOvenPayload {
+  const empty = data.scenarioCatalog.selectedScenarioId === null;
+  return { ...data, pageMode: empty ? "empty" : "detail" };
+}
diff --git a/dashboard/src/lib/hrefs.ts b/dashboard/src/lib/hrefs.ts
index c9ef2e7..8615023 100644
--- a/dashboard/src/lib/hrefs.ts
+++ b/dashboard/src/lib/hrefs.ts
@@ -1,15 +1,31 @@
 import type { Burnlist, Filter, SelectedBurnlist } from "./types";
 
+const BUILT_IN_OVEN_IDS = new Set([
+  "checklist",
+  "differential-testing",
+  "performance-tracing",
+  "streaming-diff",
+  "visual-parity",
+]);
+
 export function currentSection() {
   if (window.location.pathname === "/ovens/new") return "new-oven";
   if (window.location.pathname === "/ovens/differential-testing/view") return "differential-testing";
   if (window.location.pathname === "/ovens/performance-tracing/view") return "performance-tracing";
   if (window.location.pathname === "/ovens/streaming-diff/view") return "streaming-diff";
   if (window.location.pathname === "/ovens/visual-parity/view") return "visual-parity";
+  const customOvenMatch = window.location.pathname.match(/^\/ovens\/([a-z0-9]+(?:-[a-z0-9]+)*)\/view$/u);
+  if (customOvenMatch && !BUILT_IN_OVEN_IDS.has(customOvenMatch[1])) return "custom-oven";
   if (window.location.pathname === "/runs/new") return "run-burn";
   return "burnlists";
 }
 
+export function customOvenSelection(): { id: string; repoKey: string | null } | null {
+  if (currentSection() !== "custom-oven") return null;
+  const match = window.location.pathname.match(/^\/ovens\/([a-z0-9]+(?:-[a-z0-9]+)*)\/view$/u);
+  return match ? { id: match[1], repoKey: new URLSearchParams(window.location.search).get("repoKey") } : null;
+}
+
 export function ovenRepoKey() {
   return ["differential-testing", "performance-tracing", "streaming-diff", "visual-parity"].includes(currentSection())
     ? new URLSearchParams(window.location.search).get("repoKey")
diff --git a/dashboard/src/lib/index.ts b/dashboard/src/lib/index.ts
index 797fe12..0b9b73d 100644
--- a/dashboard/src/lib/index.ts
+++ b/dashboard/src/lib/index.ts
@@ -1,5 +1,5 @@
 export { formatTime } from "./format";
-export { burnlistHref, currentSection, filterFromUrl, listHref, ovenRepoKey, selectedBurnlist, streamingDiffSelection } from "./hrefs";
+export { burnlistHref, currentSection, customOvenSelection, filterFromUrl, listHref, ovenRepoKey, selectedBurnlist, streamingDiffSelection } from "./hrefs";
 export { adaptPerformanceTracingReport } from "./performance-tracing.mjs";
 export { applyStreamingDiffUpdate, fileKindChip, groupStreamingDiffCard, isTextFileKind, mapStreamingDiffFeeds, mapStreamingDiffLandingFeeds, parseStreamingDiffCard, streamingDiffAutoOpenHref, streamingDiffFeedHref, streamingDiffFeedKey, streamingDiffRepositories } from "./streaming-diff.mjs";
 export { visualParityDomainSummary } from "./visual-parity";
diff --git a/dashboard/src/lib/streaming-diff-oven-adapter.ts b/dashboard/src/lib/streaming-diff-oven-adapter.ts
new file mode 100644
index 0000000..9324789
--- /dev/null
+++ b/dashboard/src/lib/streaming-diff-oven-adapter.ts
@@ -0,0 +1,26 @@
+import { parseStreamingDiffCard } from "./streaming-diff.mjs";
+import type { StreamingDiffCard, StreamingDiffIdentity } from "./types";
+
+export type StreamingDiffSnapshot = {
+  identity: StreamingDiffIdentity;
+  updatedAt: string;
+  cards: unknown[];
+};
+
+export type StreamingDiffOvenPayload = {
+  identity: StreamingDiffIdentity;
+  updatedAt: string;
+  cards: StreamingDiffCard[];
+  backHref: string;
+};
+
+/** Produces the pointer-addressable, read-only payload consumed by streaming-diff.oven. */
+export function adaptStreamingDiff(snapshot: StreamingDiffSnapshot): StreamingDiffOvenPayload {
+  const { identity, updatedAt } = snapshot;
+  return {
+    identity,
+    updatedAt,
+    cards: snapshot.cards.map(parseStreamingDiffCard).filter((card): card is StreamingDiffCard => card !== null),
+    backHref: `/ovens/streaming-diff/view?repoKey=${encodeURIComponent(identity.logicalRepoKey)}`,
+  };
+}
diff --git a/dashboard/src/lib/visual-parity-oven-adapter.ts b/dashboard/src/lib/visual-parity-oven-adapter.ts
new file mode 100644
index 0000000..c297522
--- /dev/null
+++ b/dashboard/src/lib/visual-parity-oven-adapter.ts
@@ -0,0 +1,42 @@
+import { visualParityDomainSummary, type VisualParityPayload } from "@lib";
+
+export function adaptVisualParity(payload: VisualParityPayload) {
+  const domains = payload.domains.map((domain) => ({
+    id: domain.id,
+    label: domain.label,
+    qualification: domain.qualification,
+    failed: visualParityDomainSummary(payload, domain.id).failed,
+  }));
+  const byDomain = Object.fromEntries(payload.domains.map((domain) => {
+    const summary = visualParityDomainSummary(payload, domain.id);
+    return [domain.id, {
+      summary: {
+        passed: summary.passed,
+        total: payload.comparisons.length,
+        ratio: summary.ratio,
+        meanAbsoluteDelta: summary.meanAbsoluteDelta,
+        maximumAbsoluteDelta: summary.maximumAbsoluteDelta,
+      },
+      note: {
+        isTarget: domain.qualification === "target",
+        rationale: domain.tolerance?.rationale ?? "Exact zero tolerance.",
+      },
+      frames: payload.comparisons.flatMap((comparison) => {
+        const entry = comparison.domains[domain.id];
+        return entry.reference.src && entry.candidate.src && entry.diff.src
+          ? [{ status: entry.status, frame: comparison.frame, difference: entry.difference, images: [entry.reference, entry.candidate, entry.diff], label: entry.label }]
+          : [];
+      }),
+    }];
+  }));
+  return {
+    verdict: {
+      targetPass: payload.comparisons.every((comparison) => comparison.status === "pass"),
+      framesCount: payload.comparisons.length,
+      error: "",
+    },
+    domains,
+    initialDomainId: domains.find((domain) => domain.qualification === "target")?.id ?? domains[0].id,
+    byDomain,
+  };
+}
diff --git a/dashboard/src/oven/Box/Box.tsx b/dashboard/src/oven/Box/Box.tsx
new file mode 100644
index 0000000..311f4cb
--- /dev/null
+++ b/dashboard/src/oven/Box/Box.tsx
@@ -0,0 +1,14 @@
+import { createElement, type ReactNode } from "react";
+
+type BoxProps = {
+  element: "div" | "section" | "main" | "span";
+  className?: string;
+  id?: string;
+  text?: string;
+  dataDetailTab?: string;
+  children?: ReactNode;
+};
+
+export function Box({ element, className, id, text, dataDetailTab, children }: BoxProps) {
+  return createElement(element, { className, id, "data-detail-tab": dataDetailTab }, text, children);
+}
diff --git a/dashboard/src/oven/BurnDonut/BurnDonut.test.ts b/dashboard/src/oven/BurnDonut/BurnDonut.test.ts
new file mode 100644
index 0000000..da3f349
--- /dev/null
+++ b/dashboard/src/oven/BurnDonut/BurnDonut.test.ts
@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { burnDonut } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent, extractFirstByClass } from "../test-support/dom-normalize";
+import { BurnDonut } from "./BurnDonut";
+
+test("BurnDonut matches the DT oracle geometry and segment order", () => {
+  const cases = [
+    [],
+    [{ result: "improved" }],
+    [{ result: "improved" }, { result: "worsened" }, { result: "unchanged" }, { result: "blocked" }, { result: "reverted" }],
+    Array.from({ length: 1_234 }, (_, index) => ({ result: index % 4 === 0 ? "pass" : index % 4 === 1 ? "worsened" : index % 4 === 2 ? "blocked" : "unchanged" })),
+  ];
+
+  for (const entries of cases) {
+    const actual = renderToStaticMarkup(createElement(BurnDonut, { entries }));
+    const expected = extractFirstByClass(burnDonut(entries), "driving-parity-kpi-burns-donut");
+    assertDomEquivalent(actual, expected, `burn donut mismatch for ${entries.length} entries`);
+  }
+});
+
+test("BurnDonut hides the track for non-empty runs and keeps it visible when empty", () => {
+  const empty = renderToStaticMarkup(createElement(BurnDonut, { entries: [] }));
+  const populated = renderToStaticMarkup(createElement(BurnDonut, { entries: [{ result: "pass" }] }));
+  assert.doesNotMatch(empty, /driving-parity-kpi-burns-donut-track[^>]*opacity=/u);
+  assert.match(populated, /driving-parity-kpi-burns-donut-track[^>]*opacity="0"/u);
+});
diff --git a/dashboard/src/oven/BurnDonut/BurnDonut.tsx b/dashboard/src/oven/BurnDonut/BurnDonut.tsx
new file mode 100644
index 0000000..612edd1
--- /dev/null
+++ b/dashboard/src/oven/BurnDonut/BurnDonut.tsx
@@ -0,0 +1,66 @@
+type BurnEntry = { result?: string };
+
+type BurnGroup = "improved" | "worsened" | "unchanged" | "reverted";
+
+type BurnDonutGroup = {
+  name: BurnGroup;
+  amount: number;
+  color: "improved" | "worsened" | "neutral" | "reverted";
+  dash: string;
+  offset: string;
+};
+
+export function burnDonutCounts(entries: BurnEntry[]): Record<BurnGroup, number> {
+  const groups: Record<BurnGroup, number> = { improved: 0, worsened: 0, unchanged: 0, reverted: 0 };
+  for (const entry of entries) {
+    if (entry.result === "improved" || entry.result === "pass") groups.improved += 1;
+    else if (entry.result === "worsened") groups.worsened += 1;
+    else if (entry.result === "blocked" || entry.result === "reverted") groups.reverted += 1;
+    else groups.unchanged += 1;
+  }
+  return groups;
+}
+
+export function burnDonutGroups(entries: BurnEntry[]): BurnDonutGroup[] {
+  const groups = burnDonutCounts(entries);
+
+  const active = (Object.entries(groups) as [BurnGroup, number][])
+    .filter(([, amount]) => amount > 0)
+    .sort((left, right) => right[1] - left[1]);
+  const total = active.reduce((sum, [, amount]) => sum + amount, 0);
+  const gap = active.length > 1 ? (58 / 40) / (2 * Math.PI * 21) * 100 : 0;
+  let offset = 0;
+
+  return active.map(([name, amount]) => {
+    const share = amount / Math.max(1, total) * 100;
+    const dash = Math.max(0, share - gap);
+    const result = {
+      name,
+      amount,
+      color: name === "unchanged" ? "neutral" : name,
+      dash: dash.toFixed(3),
+      offset: (-(offset + gap / 2)).toFixed(3),
+    } as BurnDonutGroup;
+    offset += share;
+    return result;
+  });
+}
+
+export function BurnDonut({ entries }: { entries: BurnEntry[] }) {
+  const groups = burnDonutGroups(entries);
+  const total = groups.reduce((sum, group) => sum + group.amount, 0);
+  return <svg aria-hidden="true" className="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58">
+    <circle className="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity={total ? "0" : undefined} />
+    {groups.map((group) => <circle
+      className={`driving-parity-kpi-burns-donut-segment ${group.color}`}
+      cx="29"
+      cy="29"
+      r="21"
+      pathLength="100"
+      transform="rotate(-90 29 29)"
+      strokeDasharray={`${group.dash} ${(100 - Number(group.dash)).toFixed(3)}`}
+      strokeDashoffset={group.offset}
+      key={group.name}
+    />)}
+  </svg>;
+}
diff --git a/dashboard/src/oven/BurnDonut/index.ts b/dashboard/src/oven/BurnDonut/index.ts
new file mode 100644
index 0000000..ccb3526
--- /dev/null
+++ b/dashboard/src/oven/BurnDonut/index.ts
@@ -0,0 +1 @@
+export { BurnDonut, burnDonutCounts, burnDonutGroups } from "./BurnDonut";
diff --git a/dashboard/src/oven/ChecklistBurnPanel/ChecklistBurnPanel.tsx b/dashboard/src/oven/ChecklistBurnPanel/ChecklistBurnPanel.tsx
new file mode 100644
index 0000000..8edc8ef
--- /dev/null
+++ b/dashboard/src/oven/ChecklistBurnPanel/ChecklistBurnPanel.tsx
@@ -0,0 +1,6 @@
+import type { ChecklistProgressData } from "@lib";
+import { ProgressPanel } from "@/components/ChecklistDashboard/ChecklistDashboard";
+
+export function ChecklistBurnPanel({ data }: { data: ChecklistProgressData }) {
+  return <ProgressPanel data={data} />;
+}
diff --git a/dashboard/src/oven/ChecklistEventCards/ChecklistEventCards.tsx b/dashboard/src/oven/ChecklistEventCards/ChecklistEventCards.tsx
new file mode 100644
index 0000000..025bd90
--- /dev/null
+++ b/dashboard/src/oven/ChecklistEventCards/ChecklistEventCards.tsx
@@ -0,0 +1,6 @@
+import type { ChecklistProgressData } from "@lib";
+import { EventCardList } from "@/components/ChecklistDashboard/ChecklistDashboard";
+
+export function ChecklistEventCards({ data }: { data: ChecklistProgressData }) {
+  return <EventCardList data={data} />;
+}
diff --git a/dashboard/src/oven/ChecklistLedger/ChecklistLedger.tsx b/dashboard/src/oven/ChecklistLedger/ChecklistLedger.tsx
new file mode 100644
index 0000000..89196ec
--- /dev/null
+++ b/dashboard/src/oven/ChecklistLedger/ChecklistLedger.tsx
@@ -0,0 +1,6 @@
+import type { ChecklistProgressData } from "@lib";
+import { ProgressLedger } from "@/components/ChecklistDashboard/ChecklistDashboard";
+
+export function ChecklistLedger({ data }: { data: ChecklistProgressData }) {
+  return <ProgressLedger data={data} />;
+}
diff --git a/dashboard/src/oven/ChecklistProgressValue/ChecklistProgressValue.tsx b/dashboard/src/oven/ChecklistProgressValue/ChecklistProgressValue.tsx
new file mode 100644
index 0000000..dab0036
--- /dev/null
+++ b/dashboard/src/oven/ChecklistProgressValue/ChecklistProgressValue.tsx
@@ -0,0 +1,5 @@
+type ChecklistProgressValueProps = { done: number; total: number; percent: number };
+
+export function ChecklistProgressValue({ done, total, percent }: ChecklistProgressValueProps) {
+  return <><span className="pass">{done}</span><span className="separator">·</span><span className="total">{total}</span> <span className="pass">({percent}%)</span></>;
+}
diff --git a/dashboard/src/oven/ChecklistWidgets/ChecklistWidgets.test.ts b/dashboard/src/oven/ChecklistWidgets/ChecklistWidgets.test.ts
new file mode 100644
index 0000000..e88cb8b
--- /dev/null
+++ b/dashboard/src/oven/ChecklistWidgets/ChecklistWidgets.test.ts
@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { EventCardList, ProgressLedger, ProgressPanel } from "@/components/ChecklistDashboard/ChecklistDashboard";
+import { checklistFixture } from "@/components/ChecklistDashboard/ChecklistDashboard.fixture.mjs";
+import { assertDomEquivalent } from "../test-support/dom-normalize";
+import { OvenNode } from "../runtime/OvenNode";
+import { initOvenState, type OvenIr } from "../runtime/oven-reducer";
+
+const ir: OvenIr = { contract: "checklist-progress@1", controls: [], collections: [], root: [] };
+
+function renderWidget(kind: string) {
+  const node = { kind, attributes: { source: "/raw" }, children: [] };
+  return renderToStaticMarkup(createElement(OvenNode, { node, ir, state: initOvenState(ir, { raw: checklistFixture }), dispatch: () => {} }));
+}
+
+test("checklist widget adapters preserve the exported dashboard subregions", () => {
+  assertDomEquivalent(renderWidget("checklist-burn-panel"), renderToStaticMarkup(createElement(ProgressPanel, { data: checklistFixture })));
+  assertDomEquivalent(renderWidget("checklist-ledger"), renderToStaticMarkup(createElement(ProgressLedger, { data: checklistFixture })));
+  assertDomEquivalent(renderWidget("checklist-event-cards"), renderToStaticMarkup(createElement(EventCardList, { data: checklistFixture })));
+});
+
+test("box lowering preserves element, class, id, text, and children", () => {
+  const result = compileOven('<oven id="box-test" version="1" contract="checklist-progress@1" theme="checklist"><box element="section" class="outer" id="box-id" text="Before"><box element="span" class="inner" text="After" /></box></oven>');
+  assert.equal(result.ok, true, result.ok ? "" : JSON.stringify(result.diagnostics));
+  const state = initOvenState(ir, {});
+  const html = renderToStaticMarkup(createElement(OvenNode, { node: result.ir.root[0], ir, state, dispatch: () => {} }));
+  assertDomEquivalent(html, '<section class="outer" id="box-id">Before<span class="inner">After</span></section>');
+});
+
+test("checklist declarative vocabulary and passthrough attributes compile", () => {
+  const source = '<oven id="fragment" version="1" contract="checklist-progress@1" theme="checklist"><box element="div" class="shell"><kpi-strip class="strip" title="summary"><kpi-item class="item" title="detail" heading="Progress"><progress-value done="/progress/done" total="/progress/total" percent="/progress/percent"/></kpi-item></kpi-strip><section-header class="head" title="Events" source="/events" /><log-table class="table" title="ledger" source="/ledger"><column label="Event" source="@item/event" /></log-table><checklist-burn-panel source="/raw" /><checklist-ledger source="/raw" /><checklist-event-cards source="/raw" /></box></oven>';
+  const result = compileOven(source);
+  assert.equal(result.ok, true, result.ok ? "" : JSON.stringify(result.diagnostics));
+});
diff --git a/dashboard/src/oven/DiffCard/DiffCard.test.ts b/dashboard/src/oven/DiffCard/DiffCard.test.ts
new file mode 100644
index 0000000..0adbb8f
--- /dev/null
+++ b/dashboard/src/oven/DiffCard/DiffCard.test.ts
@@ -0,0 +1,35 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { DiffCard } from "./DiffCard";
+
+test("DiffCard preserves a complete card with file content", () => {
+  const card = {
+    toolUseId: "tool-123", revId: "rev-456", ts: "2026-07-18T10:20:30.000Z", status: "captured",
+    files: [{ path: "src/app.ts", kind: "modified", diff: "@@ -1 +1 @@\n-old\n+new" }],
+  };
+  const timestamp = new Date(card.ts).toLocaleString();
+  const markup = renderToStaticMarkup(createElement(DiffCard, { card }));
+
+  assert.equal(markup, `<div data-slot="card" class="ui-card streaming-diff-card"><div data-slot="card-header" class="ui-card-header streaming-diff-card-header"><div><div data-slot="card-title" class="ui-card-title">tool-123</div><div data-slot="card-description" class="ui-card-description"><time dateTime="${card.ts}">${timestamp}</time> · rev-456</div></div><span data-slot="badge" data-variant="default" class="ui-badge ui-badge--default">captured</span></div><div data-slot="card-content" class="ui-card-content streaming-diff-card-content"><section class="streaming-diff-file"><div class="streaming-diff-file-head"><code>src/app.ts</code><span data-slot="badge" data-variant="secondary" class="ui-badge ui-badge--secondary">modified</span></div><pre class="streaming-diff-unified">@@ -1 +1 @@\n-old\n+new</pre></section></div></div>`);
+});
+
+test("DiffCard preserves the partial status paragraph", () => {
+  const card = { toolUseId: "tool-partial", revId: "rev-partial", ts: "2026-07-18T11:00:00.000Z", status: "partial", partialReason: "Capture stopped early.", files: [] };
+  const timestamp = new Date(card.ts).toLocaleString();
+  const markup = renderToStaticMarkup(createElement(DiffCard, { card }));
+
+  assert.equal(markup, `<div data-slot="card" class="ui-card streaming-diff-card"><div data-slot="card-header" class="ui-card-header streaming-diff-card-header"><div><div data-slot="card-title" class="ui-card-title">tool-partial</div><div data-slot="card-description" class="ui-card-description"><time dateTime="${card.ts}">${timestamp}</time> · rev-partial</div></div><span data-slot="badge" data-variant="destructive" class="ui-badge ui-badge--destructive">partial</span></div><div data-slot="card-content" class="ui-card-content streaming-diff-card-content"><p class="streaming-diff-partial">Capture stopped early.</p><p class="streaming-diff-file-meta">No file content was captured.</p></div></div>`);
+});
+
+test("DiffCard reports when no file content was captured", () => {
+  const card = { toolUseId: "tool-empty", revId: "rev-empty", ts: "2026-07-18T12:00:00.000Z", status: "captured", files: [] };
+  const markup = renderToStaticMarkup(createElement(DiffCard, { card }));
+
+  assert.match(markup, /No file content was captured\./u);
+  assert.match(markup, /data-variant="default"[^>]*>captured/u);
+  assert.match(markup, /tool-empty/u);
+  assert.match(markup, /rev-empty/u);
+  assert.match(markup, new RegExp(new Date(card.ts).toLocaleString().replace(/[.*+?^${}()|[\]\\]/gu, "\\$&"), "u"));
+});
diff --git a/dashboard/src/oven/DiffCard/DiffCard.tsx b/dashboard/src/oven/DiffCard/DiffCard.tsx
new file mode 100644
index 0000000..ec4df4b
--- /dev/null
+++ b/dashboard/src/oven/DiffCard/DiffCard.tsx
@@ -0,0 +1,21 @@
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@layout";
+import { FileDiff } from "../FileDiff";
+import type { StreamingDiffCard } from "@lib";
+import { timestamp } from "../utils/streaming-diff-time";
+
+export function DiffCard({ card }: { card: StreamingDiffCard }) {
+  const partial = card.status === "partial";
+  return <Card className="streaming-diff-card">
+    <CardHeader className="streaming-diff-card-header">
+      <div>
+        <CardTitle>{card.toolUseId}</CardTitle>
+        <CardDescription><time dateTime={card.ts}>{timestamp(card.ts)}</time> · {card.revId}</CardDescription>
+      </div>
+      <Badge variant={partial ? "destructive" : "default"}>{card.status}</Badge>
+    </CardHeader>
+    <CardContent className="streaming-diff-card-content">
+      {partial && <p className="streaming-diff-partial">{card.partialReason ?? "This revision is partial."}</p>}
+      {card.files.length ? card.files.map((file) => <FileDiff file={file} key={file.path} />) : <p className="streaming-diff-file-meta">No file content was captured.</p>}
+    </CardContent>
+  </Card>;
+}
diff --git a/dashboard/src/oven/DiffCard/index.ts b/dashboard/src/oven/DiffCard/index.ts
new file mode 100644
index 0000000..8a3e1e4
--- /dev/null
+++ b/dashboard/src/oven/DiffCard/index.ts
@@ -0,0 +1 @@
+export { DiffCard } from "./DiffCard";
diff --git a/dashboard/src/oven/DiffCardList/DiffCardList.test.ts b/dashboard/src/oven/DiffCardList/DiffCardList.test.ts
new file mode 100644
index 0000000..15cfe9b
--- /dev/null
+++ b/dashboard/src/oven/DiffCardList/DiffCardList.test.ts
@@ -0,0 +1,22 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { DiffCardList } from "./DiffCardList";
+
+test("DiffCardList preserves the card container and card markup", () => {
+  const card = {
+    toolUseId: "tool-123", revId: "rev-456", ts: "2026-07-18T10:20:30.000Z", status: "captured",
+    files: [],
+  };
+  const timestamp = new Date(card.ts).toLocaleString();
+  const markup = renderToStaticMarkup(createElement(DiffCardList, { cards: [card] }));
+
+  assert.equal(markup, `<div class="streaming-diff-cards"><div data-slot="card" class="ui-card streaming-diff-card"><div data-slot="card-header" class="ui-card-header streaming-diff-card-header"><div><div data-slot="card-title" class="ui-card-title">tool-123</div><div data-slot="card-description" class="ui-card-description"><time dateTime="${card.ts}">${timestamp}</time> · rev-456</div></div><span data-slot="badge" data-variant="default" class="ui-badge ui-badge--default">captured</span></div><div data-slot="card-content" class="ui-card-content streaming-diff-card-content"><p class="streaming-diff-file-meta">No file content was captured.</p></div></div></div>`);
+});
+
+test("DiffCardList preserves the empty fallback after the card container", () => {
+  const markup = renderToStaticMarkup(createElement(DiffCardList, { cards: [] }));
+
+  assert.equal(markup, "<div class=\"streaming-diff-cards\"></div><p class=\"streaming-diff-message\">Waiting for diff cards.</p>");
+});
diff --git a/dashboard/src/oven/DiffCardList/DiffCardList.tsx b/dashboard/src/oven/DiffCardList/DiffCardList.tsx
new file mode 100644
index 0000000..8ae44bf
--- /dev/null
+++ b/dashboard/src/oven/DiffCardList/DiffCardList.tsx
@@ -0,0 +1,9 @@
+import type { StreamingDiffCard } from "@lib";
+import { DiffCard } from "../DiffCard";
+
+export function DiffCardList({ cards }: { cards: StreamingDiffCard[] }) {
+  return <>
+    <div className="streaming-diff-cards">{cards.map((card) => <DiffCard card={card} key={card.revId} />)}</div>
+    {!cards.length && <p className="streaming-diff-message">Waiting for diff cards.</p>}
+  </>;
+}
diff --git a/dashboard/src/oven/DiffCardList/index.ts b/dashboard/src/oven/DiffCardList/index.ts
new file mode 100644
index 0000000..f241dbb
--- /dev/null
+++ b/dashboard/src/oven/DiffCardList/index.ts
@@ -0,0 +1 @@
+export { DiffCardList } from "./DiffCardList";
diff --git a/dashboard/src/oven/DifferentialEmptyState/DifferentialEmptyState.tsx b/dashboard/src/oven/DifferentialEmptyState/DifferentialEmptyState.tsx
new file mode 100644
index 0000000..48b5975
--- /dev/null
+++ b/dashboard/src/oven/DifferentialEmptyState/DifferentialEmptyState.tsx
@@ -0,0 +1,15 @@
+export function DifferentialEmptyState({ title = "Differential Testing" }: { title?: string }) {
+  return <main className="differential-testing-empty-state">
+    <div className="driving-parity-kpi-title-item">
+      <span className="driving-parity-kpi-title">{title}</span>
+      <span className="driving-parity-kpi-title-subtitle">
+        <span className="differential-scenario-control">
+          <select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled defaultValue="No scenarios">
+            <option>No scenarios</option>
+          </select>
+        </span>
+      </span>
+    </div>
+    <div className="differential-testing-empty-message">No Differential Testing scenarios</div>
+  </main>;
+}
diff --git a/dashboard/src/oven/DifferentialEmptyState/index.ts b/dashboard/src/oven/DifferentialEmptyState/index.ts
new file mode 100644
index 0000000..564a85d
--- /dev/null
+++ b/dashboard/src/oven/DifferentialEmptyState/index.ts
@@ -0,0 +1 @@
+export { DifferentialEmptyState } from "./DifferentialEmptyState";
diff --git a/dashboard/src/oven/DifferentialKpiItem/DifferentialKpiItem.tsx b/dashboard/src/oven/DifferentialKpiItem/DifferentialKpiItem.tsx
new file mode 100644
index 0000000..56e6152
--- /dev/null
+++ b/dashboard/src/oven/DifferentialKpiItem/DifferentialKpiItem.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+export type DifferentialKpiItemProps = {
+  className?: string;
+  title: string;
+  visual?: ReactNode;
+  heading: ReactNode;
+  headingClass?: string;
+  value: ReactNode;
+  valueClass?: string;
+};
+
+export function DifferentialKpiItem({
+  className,
+  title,
+  visual,
+  heading,
+  headingClass = "",
+  value,
+  valueClass = "",
+}: DifferentialKpiItemProps) {
+  const itemClass = `driving-parity-kpi-item${visual ? " driving-parity-kpi-section" : ""}${className ? ` ${className}` : ""}`;
+  const headingClassName = `driving-parity-kpi-heading${headingClass ? ` ${headingClass}` : ""}`;
+  const valueClassName = `${visual ? "driving-parity-kpi-ratio" : "driving-parity-kpi-title-subtitle"}${valueClass ? ` ${valueClass}` : ""}`;
+
+  return <div className={itemClass} title={title}>
+    {visual}
+    {visual
+      ? <div className="driving-parity-kpi-text"><span className={headingClassName}>{heading}</span><span className={valueClassName}>{value}</span></div>
+      : <><span className={headingClassName}>{heading}</span><span className={valueClassName}>{value}</span></>}
+  </div>;
+}
diff --git a/dashboard/src/oven/DifferentialKpiItem/index.ts b/dashboard/src/oven/DifferentialKpiItem/index.ts
new file mode 100644
index 0000000..79a8b2f
--- /dev/null
+++ b/dashboard/src/oven/DifferentialKpiItem/index.ts
@@ -0,0 +1,2 @@
+export { DifferentialKpiItem } from "./DifferentialKpiItem";
+export type { DifferentialKpiItemProps } from "./DifferentialKpiItem";
diff --git a/dashboard/src/oven/DifferentialKpiStrip/DifferentialKpiStrip.test.ts b/dashboard/src/oven/DifferentialKpiStrip/DifferentialKpiStrip.test.ts
new file mode 100644
index 0000000..5ee1422
--- /dev/null
+++ b/dashboard/src/oven/DifferentialKpiStrip/DifferentialKpiStrip.test.ts
@@ -0,0 +1,124 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { escapeHtml, kpiItem } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent, extractById, extractFirstByClass } from "../test-support/dom-normalize";
+import { buildDifferentialKpiData, DifferentialKpiStrip, type DifferentialPayload } from "./DifferentialKpiStrip";
+
+const goldenDir = resolve("dashboard/src/oven/differential-testing-render/goldens");
+const goldenHarnessPath = resolve("dashboard/src/oven/differential-testing-render/golden-harness.mjs");
+const FIXED_NOW = Date.parse("2026-01-01T12:30:00.000Z");
+const scenarioVisual = '<svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>';
+
+function withGoldenEnvironment<T>(callback: () => T): T {
+  const previousTz = process.env.TZ;
+  const previousDateNow = Date.now;
+  const OriginalDTF = Intl.DateTimeFormat;
+  const Shim = function DateTimeFormat(locales: string | string[] | undefined, options?: Intl.DateTimeFormatOptions) {
+    return new OriginalDTF(locales == null ? "en-US" : locales, { timeZone: "UTC", ...(options || {}) });
+  } as unknown as typeof Intl.DateTimeFormat;
+  Shim.prototype = OriginalDTF.prototype;
+  Object.setPrototypeOf(Shim, OriginalDTF);
+  process.env.TZ = "UTC";
+  Date.now = () => FIXED_NOW;
+  globalThis.Intl.DateTimeFormat = Shim;
+  try {
+    return callback();
+  } finally {
+    globalThis.Intl.DateTimeFormat = OriginalDTF;
+    Date.now = previousDateNow;
+    if (previousTz === undefined) delete process.env.TZ;
+    else process.env.TZ = previousTz;
+  }
+}
+
+function scenarioSelectorMarkup(scenarios: { id: string }[], selectedScenarioId: string | null | undefined): string {
+  const selected = selectedScenarioId || "";
+  const options = scenarios.map((scenario) => `<option value="${escapeHtml(scenario.id)}"${scenario.id === selected ? " selected" : ""}>${escapeHtml(scenario.id)}</option>`).join("");
+  return `<span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario"${scenarios.length < 2 ? " disabled" : ""}>${options}</select></span>`;
+}
+
+function scenarioControlMarkup(payload: DifferentialPayload): string {
+  return extractFirstByClass(renderToStaticMarkup(createElement(DifferentialKpiStrip, { payload })), "differential-scenario-control");
+}
+
+test("DifferentialKpiStrip matches every non-empty DT/PT KPI golden", async () => {
+  const harness = await import(goldenHarnessPath);
+  const states = [
+    ["dt-main", harness.differentialTestingPayload],
+    ["dt-server-paged", harness.differentialTestingPayload],
+    ["dt-sorted-filtered-paged", harness.differentialTestingPayload],
+    ["dt-telemetry-incomparable", harness.differentialTestingIncomparableTelemetryPayload],
+    ["dt-comparable-telemetry", harness.differentialTestingComparableTelemetryPayload],
+    ["dt-comparable-no-changed", harness.differentialTestingComparableNoChangedPayload],
+    ["dt-paginated", harness.differentialTestingPaginatedPayload],
+    ["dt-paginated-mid", harness.differentialTestingPaginatedMidPayload],
+    ["dt-no-match", harness.differentialTestingAllPassingPayload],
+    ["dt-chart-current-failed", harness.differentialTestingPayload],
+    ["dt-progress-mode", harness.differentialTestingPayload],
+    ["pt-main", harness.performanceTracingPayload],
+  ] as const;
+  withGoldenEnvironment(() => {
+    for (const [name, payloadBuilder] of states) {
+      const payload = payloadBuilder();
+      const actual = extractById(renderToStaticMarkup(createElement(DifferentialKpiStrip, { payload })), "driving-parity-kpi-strip");
+      const golden = readFileSync(resolve(goldenDir, `${name}.html`), "utf8");
+      assertDomEquivalent(actual, extractById(golden, "driving-parity-kpi-strip"), `${name} KPI strip differs`);
+    }
+  });
+});
+
+test("DifferentialKpiStrip forwards scenario changes and disables a singleton catalog", async () => {
+  const { differentialTestingPayload } = await import(goldenHarnessPath);
+  const payload = differentialTestingPayload();
+  let selected = "";
+  const markup = renderToStaticMarkup(createElement(DifferentialKpiStrip, { payload, onScenarioChange: (id) => { selected = id; } }));
+  assert.match(markup, /id="differential-scenario-selector"/u);
+  assert.match(markup, /disabled=""/u);
+  assert.equal(selected, "");
+});
+
+test("DifferentialKpiStrip matches the vanilla scenario selector for a selected multi-scenario catalog", () => {
+  const payload: DifferentialPayload = {
+    scenarioCatalog: { selectedScenarioId: "beta", scenarios: [{ id: "alpha" }, { id: "beta" }, { id: "gamma" }] },
+  };
+  assertDomEquivalent(scenarioControlMarkup(payload), scenarioSelectorMarkup(payload.scenarioCatalog?.scenarios ?? [], "beta"));
+});
+
+test("DifferentialKpiStrip leaves every option unselected when the catalog selection is missing", () => {
+  const payload: DifferentialPayload = {
+    scenarioCatalog: { selectedScenarioId: "missing", scenarios: [{ id: "alpha" }, { id: "beta" }] },
+  };
+  assertDomEquivalent(scenarioControlMarkup(payload), scenarioSelectorMarkup(payload.scenarioCatalog?.scenarios ?? [], "missing"));
+});
+
+test("DifferentialKpiStrip disables the selector for singleton and empty catalogs", () => {
+  for (const scenarioCatalog of [
+    { selectedScenarioId: "alpha", scenarios: [{ id: "alpha" }] },
+    { selectedScenarioId: null, scenarios: [] },
+  ]) {
+    const payload: DifferentialPayload = { scenarioCatalog };
+    assertDomEquivalent(scenarioControlMarkup(payload), scenarioSelectorMarkup(scenarioCatalog.scenarios, scenarioCatalog.selectedScenarioId));
+  }
+});
+
+test("DifferentialKpiStrip keeps an apostrophe-bearing scenario title equivalent to the vanilla KPI oracle", () => {
+  const payload: DifferentialPayload = {
+    subtitle: 'Owner\'s <b> & "run"',
+    scenarioCatalog: { selectedScenarioId: "alpha", scenarios: [{ id: "alpha" }, { id: "beta" }] },
+  };
+  const actual = extractFirstByClass(renderToStaticMarkup(createElement(DifferentialKpiStrip, { payload })), "driving-parity-kpi-scenario");
+  const data = buildDifferentialKpiData(payload);
+  const expected = kpiItem({
+    className: "driving-parity-kpi-scenario",
+    title: data.scenario.title,
+    visual: scenarioVisual,
+    heading: "Scenario",
+    headingClass: "differential-scenario-heading",
+    value: scenarioSelectorMarkup(payload.scenarioCatalog?.scenarios ?? [], payload.scenarioCatalog?.selectedScenarioId),
+  });
+  assertDomEquivalent(actual, expected);
+});
diff --git a/dashboard/src/oven/DifferentialKpiStrip/DifferentialKpiStrip.tsx b/dashboard/src/oven/DifferentialKpiStrip/DifferentialKpiStrip.tsx
new file mode 100644
index 0000000..9463651
--- /dev/null
+++ b/dashboard/src/oven/DifferentialKpiStrip/DifferentialKpiStrip.tsx
@@ -0,0 +1,135 @@
+import type { ReactNode } from "react";
+import { BurnDonut, burnDonutCounts } from "../BurnDonut/BurnDonut";
+import { DifferentialKpiItem } from "../DifferentialKpiItem/DifferentialKpiItem";
+import { KpiStrip } from "../KpiStrip/KpiStrip";
+import { ProgressDonut } from "../ProgressDonut/ProgressDonut";
+import { WaffleMetric } from "../WaffleMetric/WaffleMetric";
+import { blockers, count, dateTime, kpiTotal, percent, unique } from "../differential-testing-render/differential-testing-render.js";
+
+type Scenario = { id: string };
+type ProgressEntry = { frames?: number; frame?: number };
+type BurnEntry = { result?: string };
+type Metric = { total?: number; failed?: number; blocked?: number };
+
+export type DifferentialPayload = {
+  scenarioCatalog?: { selectedScenarioId?: string | null; scenarios?: Scenario[] };
+  progress?: ProgressEntry[];
+  log?: BurnEntry[];
+  summary?: { fields?: Metric; frames?: Metric };
+  subtitle?: string;
+  publishedAt?: string;
+  telemetry?: { status?: string; summary?: { failToPassCount?: number; passToFailCount?: number }; blockers?: unknown[] };
+  trust?: { status?: string; blockers?: unknown[] };
+  exactSession?: { status?: string; blockers?: unknown[] };
+};
+
+type DifferentialKpiData = {
+  scenario: {
+    title: string;
+    selectedScenarioId: string;
+    scenarios: Scenario[];
+  };
+  progress: { title: string; total: number; done: number; donePercent: number };
+  burns: { title: string; counts: ReturnType<typeof burnDonutCounts>; improvedPercent: number };
+  fields: { metric: Metric; failed: number; ratio: number; failedCells: number; empty: boolean };
+  frames: { metric: Metric; failed: number; ratio: number; failedCells: number; empty: boolean };
+};
+
+function trustBlockerSummaries(payload: DifferentialPayload): string[] {
+  const result: string[] = [];
+  const append = (label: string, status: string | undefined, entries: unknown[] | undefined) => {
+    if (status !== "blocked") return;
+    const reasons = blockers(entries);
+    result.push(`${label} blocked${reasons.length ? `: ${reasons.join("; ")}` : ""}`);
+  };
+  append("primary", payload.trust?.status, payload.trust?.blockers);
+  append("telemetry", payload.telemetry?.status, payload.telemetry?.blockers);
+  append("exact", payload.exactSession?.status, payload.exactSession?.blockers);
+  return unique(result);
+}
+
+function metricData(metric: Metric = {}) {
+  const failed = Number(metric.failed || 0) + Number(metric.blocked || 0);
+  const ratio = metric.total ? failed / metric.total : 0;
+  return {
+    metric,
+    failed,
+    ratio,
+    failedCells: Math.min(80, Math.round(ratio * 96)),
+    empty: metric.total ? false : true,
+  };
+}
+
+export function buildDifferentialKpiData(payload: DifferentialPayload): DifferentialKpiData {
+  const catalog = payload.scenarioCatalog ?? {};
+  const scenarios = Array.isArray(catalog.scenarios) ? catalog.scenarios : [];
+  const selectedScenarioId = catalog.selectedScenarioId || "";
+  const latest = payload.progress?.[payload.progress.length - 1];
+  const total = Math.max(0, Number(latest?.frames) || 0);
+  const done = Math.max(0, Math.min(total, Number(latest?.frame) || 0));
+  const donePercent = total ? done / total * 100 : 0;
+  const counts = burnDonutCounts(payload.log ?? []);
+  const burnTotal = Object.values(counts).reduce((sum, amount) => sum + amount, 0);
+  const subtitleParts = [payload.subtitle, dateTime(payload.publishedAt), payload.telemetry?.status === "comparable"
+    ? `${count(payload.telemetry.summary?.failToPassCount)} F→P · ${count(payload.telemetry.summary?.passToFailCount)} P→F · reconciled telemetry only`
+    : "", ...trustBlockerSummaries(payload)].filter(Boolean);
+
+  return {
+    scenario: {
+      title: subtitleParts.join(" · "),
+      selectedScenarioId,
+      scenarios,
+    },
+    progress: { title: `${count(done)} of ${count(total)} exact-prefix frames cleared`, total, done, donePercent },
+    burns: {
+      title: "Results across the current Differential Testing run",
+      counts,
+      improvedPercent: burnTotal ? counts.improved / burnTotal * 100 : 0,
+    },
+    fields: metricData(payload.summary?.fields),
+    frames: metricData(payload.summary?.frames),
+  };
+}
+
+function progressValue(data: DifferentialKpiData["progress"]): ReactNode {
+  return <><span className="fail">{count(data.total)}</span><span className="separator">·</span><span className="pass">{count(data.done)} ({percent(data.donePercent)})</span></>;
+}
+
+function burnsValue(data: DifferentialKpiData["burns"]): ReactNode {
+  const { counts } = data;
+  return <><span className="neutral">{count(counts.unchanged)}</span><span className="separator">·</span><span className="reverted">{count(counts.reverted)}</span><span className="separator">·</span><span className="worsened">{count(counts.worsened)}</span><span className="separator">·</span><span className="improved">{count(counts.improved)} ({percent(data.improvedPercent)})</span></>;
+}
+
+function waffleValue(data: DifferentialKpiData["fields"] | DifferentialKpiData["frames"]): ReactNode {
+  return <><span className="total">{kpiTotal(data.metric.total)}</span><span className="separator">·</span><span className="fail">{kpiTotal(data.failed)} ({percent(data.ratio * 100)})</span></>;
+}
+
+/**
+ * Assumes a strip-bearing payload. When scenarioCatalog.selectedScenarioId is null and scenarioCatalog.scenarios is empty,
+ * the vanilla renderer shows differential-testing-empty-state; region-8 assembly must branch to that empty state instead.
+ */
+export function DifferentialKpiStrip({ payload, onScenarioChange }: { payload: DifferentialPayload; onScenarioChange?: (id: string) => void }) {
+  const data = buildDifferentialKpiData(payload);
+  const scenarioVisual = <svg className="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+    <path d="M14 2v6h6" />
+    <path d="M16 13H8" />
+    <path d="M16 17H8" />
+    <path d="M10 9H8" />
+  </svg>;
+  const scenarioValue = <span className="differential-scenario-control"><select
+    id="differential-scenario-selector"
+    aria-label="Differential Testing scenario"
+    defaultValue={data.scenario.selectedScenarioId}
+    disabled={data.scenario.scenarios.length < 2}
+    onChange={(event) => onScenarioChange?.(event.target.value)}
+  >{data.scenario.scenarios.map((scenario) => <option value={scenario.id} key={scenario.id}>{scenario.id}</option>)}</select></span>;
+
+  return <KpiStrip id="driving-parity-kpi-strip" className="driving-parity-kpi-strip has-burns" ariaLabel="Differential Testing field KPIs">
+    <DifferentialKpiItem className="driving-parity-kpi-scenario" title={data.scenario.title} visual={scenarioVisual} heading="Scenario" headingClass="differential-scenario-heading" value={scenarioValue} />
+    <DifferentialKpiItem className="driving-parity-kpi-progress" title={data.progress.title} visual={<ProgressDonut percent={data.progress.donePercent} />} heading="Progress" value={progressValue(data.progress)} />
+    <DifferentialKpiItem className="driving-parity-kpi-burns" title={data.burns.title} visual={<BurnDonut entries={payload.log ?? []} />} heading="Results" valueClass="driving-parity-kpi-burns-summary" value={burnsValue(data.burns)} />
+    <DifferentialKpiItem className="driving-parity-kpi-fields" title={`${percent(data.fields.ratio * 100)} failed fields`} visual={<WaffleMetric metric={data.fields.metric} />} heading="Fields" value={waffleValue(data.fields)} />
+    <DifferentialKpiItem className="driving-parity-kpi-frames" title={`${percent(data.frames.ratio * 100)} failed frames`} visual={<WaffleMetric metric={data.frames.metric} />} heading="Frames" value={waffleValue(data.frames)} />
+  </KpiStrip>;
+}
diff --git a/dashboard/src/oven/DifferentialKpiStrip/index.ts b/dashboard/src/oven/DifferentialKpiStrip/index.ts
new file mode 100644
index 0000000..133cbdf
--- /dev/null
+++ b/dashboard/src/oven/DifferentialKpiStrip/index.ts
@@ -0,0 +1,2 @@
+export { DifferentialKpiStrip, buildDifferentialKpiData } from "./DifferentialKpiStrip";
+export type { DifferentialPayload } from "./DifferentialKpiStrip";
diff --git a/dashboard/src/oven/DifferentialLogTable/DifferentialLogTable.test.ts b/dashboard/src/oven/DifferentialLogTable/DifferentialLogTable.test.ts
new file mode 100644
index 0000000..968aeed
--- /dev/null
+++ b/dashboard/src/oven/DifferentialLogTable/DifferentialLogTable.test.ts
@@ -0,0 +1,117 @@
+import assert from "node:assert/strict";
+import { readFileSync, readdirSync } from "node:fs";
+import { resolve } from "node:path";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { log as vanillaLog } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent, extractFirstByClass } from "../test-support/dom-normalize";
+import { buildDifferentialLogRows, DifferentialLogTable, type DifferentialLogEntry } from "./DifferentialLogTable";
+
+const FIXED_NOW = Date.parse("2026-01-01T12:30:00.000Z");
+const goldenDir = resolve("dashboard/src/oven/differential-testing-render/goldens");
+const goldenHarnessPath = resolve("dashboard/src/oven/differential-testing-render/golden-harness.mjs");
+
+function withGoldenEnvironment<T>(callback: () => T): T {
+  const previousTz = process.env.TZ;
+  const previousDateNow = Date.now;
+  process.env.TZ = "UTC";
+  Date.now = () => FIXED_NOW;
+  try {
+    return callback();
+  } finally {
+    Date.now = previousDateNow;
+    if (previousTz === undefined) delete process.env.TZ;
+    else process.env.TZ = previousTz;
+  }
+}
+
+function logListOrNull(html: string): string | null {
+  try {
+    return extractFirstByClass(html, "checklist-log-list");
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("was not found")) return null;
+    throw error;
+  }
+}
+
+function render(entries: DifferentialLogEntry[], now = FIXED_NOW): string {
+  return renderToStaticMarkup(createElement(DifferentialLogTable, { entries, now }));
+}
+
+test("DifferentialLogTable uses fresh columns and LogTable's default class", () => {
+  const entries: DifferentialLogEntry[] = [];
+  const first = buildDifferentialLogRows(entries, FIXED_NOW);
+  const second = buildDifferentialLogRows(entries, FIXED_NOW);
+
+  assert.notStrictEqual(first.columns, second.columns);
+  assert.match(render(entries), /^<div class="checklist-log-list">/);
+});
+
+test("DifferentialLogTable matches the vanilla log oracle for edge-shaped entries", () => {
+  const entries: DifferentialLogEntry[] = [
+    { timestamp: "2026-01-01T12:29:00.000Z", frame: 1_234_567, frames: 2_000_000, frameDelta: 12_345 },
+    { timestamp: "2026-01-01T12:00:00.000Z", frame: "900", frames: 1_000, frameDelta: -250 },
+    { timestamp: "2026-01-01T11:30:00.000Z", frame: 42, frames: 100, frameDelta: 0 },
+    { timestamp: "2026-01-01T11:00:00.000Z", frame: 7, frames: 100, frameDelta: null },
+    { timestamp: "2026-01-01T10:30:00.000Z", frame: 8, frames: 100, frameDelta: "Infinity" },
+    { timestamp: "2026-01-01T10:00:00.000Z", frame: Number.MAX_SAFE_INTEGER + 1, frames: 100, frameDelta: 1 },
+    { timestamp: "2026-01-01T09:30:00.000Z", frame: 2, frames: 0, frameDelta: 1 },
+    { timestamp: "2026-01-01T09:00:00.000Z", frame: 3, frames: 10, frameDelta: 1 },
+  ];
+
+  assert.equal(buildDifferentialLogRows(entries, FIXED_NOW).placeholderCount, 0);
+  assertDomEquivalent(render(entries), vanillaLog(entries, FIXED_NOW), "edge-shaped log differs");
+});
+
+test("DifferentialLogTable matches truncation and placeholder padding", () => {
+  const entry = (index: number): DifferentialLogEntry => ({
+    timestamp: `2026-01-01T12:${String(index).padStart(2, "0")}:00.000Z`,
+    frame: index,
+    frames: 10,
+    frameDelta: index % 2 ? -1 : 1,
+  });
+  const fewer = [entry(1), entry(2), entry(3)];
+  const more = Array.from({ length: 10 }, (_, index) => entry(index));
+
+  assert.equal(buildDifferentialLogRows(fewer, FIXED_NOW).placeholderCount, 5);
+  assert.equal(buildDifferentialLogRows(more, FIXED_NOW).rows.length, 8);
+  assertDomEquivalent(render(fewer), vanillaLog(fewer, FIXED_NOW), "padded log differs");
+  assertDomEquivalent(render(more), vanillaLog(more, FIXED_NOW), "truncated log differs");
+});
+
+test("DifferentialLogTable matches every full-dashboard golden log slice", async () => {
+  const harness = await import(goldenHarnessPath);
+  const states = new Map<string, () => { log: DifferentialLogEntry[] }>([
+    ["dt-main", harness.differentialTestingPayload],
+    ["dt-scenario-multi", harness.differentialTestingMultiScenarioPayload],
+    ["dt-row-expanded", harness.differentialTestingPayload],
+    ["dt-server-paged", harness.differentialTestingPayload],
+    ["dt-sorted-filtered-paged", harness.differentialTestingPayload],
+    ["dt-telemetry-incomparable", harness.differentialTestingIncomparableTelemetryPayload],
+    ["dt-comparable-telemetry", harness.differentialTestingComparableTelemetryPayload],
+    ["dt-comparable-no-changed", harness.differentialTestingComparableNoChangedPayload],
+    ["dt-paginated", harness.differentialTestingPaginatedPayload],
+    ["dt-paginated-mid", harness.differentialTestingPaginatedMidPayload],
+    ["dt-no-match", harness.differentialTestingAllPassingPayload],
+    ["dt-chart-current-failed", harness.differentialTestingPayload],
+    ["dt-progress-mode", harness.differentialTestingPayload],
+    ["pt-main", harness.performanceTracingPayload],
+    ["pt-progress", harness.performanceTracingPayload],
+    ["pt-failed", harness.performanceTracingPayload],
+  ]);
+
+  withGoldenEnvironment(() => {
+    for (const fileName of readdirSync(goldenDir).filter((name) => name.endsWith(".html")).sort()) {
+      const name = fileName.slice(0, -5);
+      const goldenLog = logListOrNull(readFileSync(resolve(goldenDir, fileName), "utf8"));
+      if (!goldenLog) continue;
+      const payloadBuilder = states.get(name);
+      assert.ok(payloadBuilder, `missing harness mapping for ${name}`);
+      const entries = payloadBuilder().log;
+      const actual = render(entries, FIXED_NOW);
+      assertDomEquivalent(actual, vanillaLog(entries, FIXED_NOW), `${name} differs from vanilla log`);
+      assertDomEquivalent(actual, goldenLog, `${name} golden log differs`);
+    }
+  });
+});
diff --git a/dashboard/src/oven/DifferentialLogTable/DifferentialLogTable.tsx b/dashboard/src/oven/DifferentialLogTable/DifferentialLogTable.tsx
new file mode 100644
index 0000000..8b15d79
--- /dev/null
+++ b/dashboard/src/oven/DifferentialLogTable/DifferentialLogTable.tsx
@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+import { count, formatLogRelativeMinutes, percent } from "../differential-testing-render/differential-testing-render.js";
+import { LogTable } from "../LogTable";
+
+const LOG_COLUMNS = ["Age", "Frame", "Result", "Delta", "Done"];
+const LOG_ROW_LIMIT = 8;
+
+export type DifferentialLogEntry = {
+  timestamp: string;
+  frame?: number | string | null;
+  frames?: number | string | null;
+  frameDelta?: number | string | null;
+};
+
+type DifferentialLogCell = { className: string; content: ReactNode };
+
+export type DifferentialLogRows = {
+  columns: string[];
+  rows: { key: string; className: string; cells: DifferentialLogCell[] }[];
+  placeholderCount: number;
+};
+
+function deltaContent(marker: string, resultText: string): ReactNode {
+  return <span className="log-delta-content"><span className="log-delta-indicator">{marker}</span><span>{resultText}</span></span>;
+}
+
+export function buildDifferentialLogRows(entries: DifferentialLogEntry[], now = Date.now()): DifferentialLogRows {
+  const visibleEntries = entries.slice(0, LOG_ROW_LIMIT);
+  const rows = visibleEntries.map((entry, index) => {
+    const frameDelta = entry.frameDelta === null || !Number.isFinite(Number(entry.frameDelta)) ? null : Number(entry.frameDelta);
+    const stateClass = frameDelta > 0 ? "improved" : frameDelta < 0 ? "worsened" : "unchanged";
+    const deltaPercent = frameDelta === null || !Number(entry.frames) ? null : Math.abs(frameDelta) / Number(entry.frames) * 100;
+    const marker = stateClass === "improved" ? "▲" : stateClass === "worsened" ? "▼" : "⦁";
+    const deltaText = deltaPercent === null ? "—" : percent(deltaPercent);
+    const resultText = frameDelta === null ? "—" : count(Math.abs(frameDelta));
+    const result = marker !== "⦁" ? deltaContent(marker, resultText) : resultText;
+    const frame = !Number.isSafeInteger(Number(entry.frame)) ? "—" : count(entry.frame);
+    const done = !Number.isSafeInteger(Number(entry.frame)) || !Number(entry.frames)
+      ? "—"
+      : `${Math.round(Math.max(0, Math.min(1, Number(entry.frame) / Number(entry.frames))) * 100)}%`;
+
+    return {
+      key: `${entry.timestamp ?? "entry"}-${index}`,
+      className: `log-row ${stateClass} no-detail log-table-row`,
+      cells: [
+        { className: "log-table-cell age", content: formatLogRelativeMinutes(entry.timestamp, now) },
+        { className: `log-table-cell failed ${stateClass}`, content: frame },
+        { className: `log-table-cell result ${stateClass}`, content: result },
+        { className: `log-table-cell delta ${stateClass}`, content: deltaText },
+        { className: "log-table-cell done", content: done },
+      ],
+    };
+  });
+
+  return {
+    columns: [...LOG_COLUMNS],
+    rows,
+    placeholderCount: Math.max(0, LOG_ROW_LIMIT - visibleEntries.length),
+  };
+}
+
+export type DifferentialLogTableProps = {
+  entries: DifferentialLogEntry[];
+  now?: number;
+};
+
+export function DifferentialLogTable({ entries, now }: DifferentialLogTableProps) {
+  return <LogTable {...buildDifferentialLogRows(entries, now)} />;
+}
diff --git a/dashboard/src/oven/DifferentialLogTable/index.ts b/dashboard/src/oven/DifferentialLogTable/index.ts
new file mode 100644
index 0000000..540750e
--- /dev/null
+++ b/dashboard/src/oven/DifferentialLogTable/index.ts
@@ -0,0 +1,2 @@
+export { buildDifferentialLogRows, DifferentialLogTable } from "./DifferentialLogTable";
+export type { DifferentialLogEntry, DifferentialLogRows, DifferentialLogTableProps } from "./DifferentialLogTable";
diff --git a/dashboard/src/oven/DifferentialProgressChart/DifferentialFrameDeltaChart.tsx b/dashboard/src/oven/DifferentialProgressChart/DifferentialFrameDeltaChart.tsx
new file mode 100644
index 0000000..2a0cf84
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/DifferentialFrameDeltaChart.tsx
@@ -0,0 +1,40 @@
+import { buildFrameDeltaChart } from "./frame-delta-chart-geometry";
+import type { FrameDeltaLabel, FrameDeltaLine, FrameDeltaMetrics } from "./frame-delta-chart-geometry";
+
+export type DifferentialFrameDeltaChartProps = {
+  metrics: FrameDeltaMetrics;
+  hostOnly?: boolean;
+  hostClassName?: string;
+  hostRole?: "img";
+  hostAriaLabel?: string;
+};
+
+function ChartLine({ line }: { line: FrameDeltaLine }) {
+  return <line className={line.className} x1={line.x1} x2={line.x2} y1={line.y1} y2={line.y2} />;
+}
+
+function ChartLabel({ label }: { label: FrameDeltaLabel }) {
+  return <text className={label.className} x={label.x} y={label.y} textAnchor={label.textAnchor} dominantBaseline={label.dominantBaseline}>{label.text}</text>;
+}
+
+export function DifferentialFrameDeltaChart({ metrics, hostOnly = false, hostClassName, hostRole, hostAriaLabel }: DifferentialFrameDeltaChartProps) {
+  if (hostOnly) return <svg id="progress-chart" className={hostClassName} viewBox="0 0 640 200" role={hostRole} aria-label={hostAriaLabel ?? "Exact-prefix frame delta metrics unavailable"} />;
+  const geometry = buildFrameDeltaChart(metrics);
+  return <svg id={geometry.root.id} viewBox={geometry.root.viewBox} aria-label={geometry.root.ariaLabel} className={geometry.root.className}>
+    {!geometry.cleared && <>
+      {geometry.bands.map((band, index) => <rect key={`band-${index}`} className={band.className} x={band.x} y={band.y} width={band.width} height={band.height} />)}
+      {geometry.yLabels.flatMap((label, index) => [
+        ...(index === 1 ? [] : [<ChartLine key={`grid-${index}`} line={geometry.gridLines[index === 0 ? 0 : 1]} />]),
+        <ChartLabel key={`y-label-${index}`} label={label} />,
+      ])}
+      {geometry.xLabels.flatMap((label, index) => [
+        <ChartLine key={`x-grid-${index}`} line={geometry.xGridLines[index]} />,
+        <ChartLabel key={`x-label-${index}`} label={label} />,
+      ])}
+      {geometry.zeroLine && <ChartLine line={geometry.zeroLine} />}
+      {geometry.passPath && <path className={geometry.passPath.className} d={geometry.passPath.d} />}
+      {geometry.failPath && <path className={geometry.failPath.className} d={geometry.failPath.d} />}
+      {geometry.firstFailingLabels.map((label, index) => <ChartLabel key={`first-failing-${index}`} label={label} />)}
+    </>}
+  </svg>;
+}
diff --git a/dashboard/src/oven/DifferentialProgressChart/DifferentialProgressChart.oracle.test.ts b/dashboard/src/oven/DifferentialProgressChart/DifferentialProgressChart.oracle.test.ts
new file mode 100644
index 0000000..a7587ed
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/DifferentialProgressChart.oracle.test.ts
@@ -0,0 +1,47 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { assertDomEquivalent } from "../test-support/dom-normalize";
+import { captureVanillaChartSvg, FROZEN_CHART_NOW } from "../test-support/svg-dom-shim";
+import { DifferentialFrameDeltaChart } from "./DifferentialFrameDeltaChart";
+import { DifferentialProgressChart } from "./DifferentialProgressChart";
+import { progressChartGoldenCases } from "./progress-chart-battery";
+
+const goldenDir = resolve("dashboard/src/oven/DifferentialProgressChart/goldens");
+
+for (const chartCase of progressChartGoldenCases) {
+  test(`progress chart oracle remains stable: ${chartCase.filename}`, () => {
+    const actual = captureVanillaChartSvg(chartCase);
+    const expected = readFileSync(resolve(goldenDir, chartCase.filename), "utf8");
+    assertDomEquivalent(actual, expected, chartCase.filename);
+  });
+}
+
+for (const chartCase of progressChartGoldenCases.filter(({ filename }) => filename.startsWith("frame-delta-"))) {
+  test(`frame-delta React chart matches oracle: ${chartCase.filename}`, () => {
+    const [metrics] = chartCase.args;
+    const actual = renderToStaticMarkup(createElement(DifferentialFrameDeltaChart, { metrics }));
+    const expected = readFileSync(resolve(goldenDir, chartCase.filename), "utf8");
+    assertDomEquivalent(actual, expected, chartCase.filename);
+  });
+}
+
+for (const chartCase of progressChartGoldenCases.filter(({ filename }) => !filename.startsWith("frame-delta-"))) {
+  test(`progress React chart matches oracle: ${chartCase.filename}`, () => {
+    const [history, options] = chartCase.args;
+    const priorTimeZone = process.env.TZ;
+    const priorDateNow = Date.now;
+    try {
+      process.env.TZ = "UTC";
+      if (chartCase.filename === "progress-empty.svg") Date.now = () => FROZEN_CHART_NOW;
+      const actual = renderToStaticMarkup(createElement(DifferentialProgressChart, { history, ...options }));
+      const expected = readFileSync(resolve(goldenDir, chartCase.filename), "utf8");
+      assertDomEquivalent(actual, expected, chartCase.filename);
+    } finally {
+      Date.now = priorDateNow;
+      if (priorTimeZone === undefined) delete process.env.TZ; else process.env.TZ = priorTimeZone;
+    }
+  });
+}
diff --git a/dashboard/src/oven/DifferentialProgressChart/DifferentialProgressChart.tsx b/dashboard/src/oven/DifferentialProgressChart/DifferentialProgressChart.tsx
new file mode 100644
index 0000000..1d11350
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/DifferentialProgressChart.tsx
@@ -0,0 +1,25 @@
+import { buildDifferentialProgressChart } from "./progress-chart-geometry";
+import type { DifferentialProgressChartHistoryPoint, DifferentialProgressChartOptions, DifferentialProgressChartPrimitive } from "./progress-chart-geometry";
+
+export type DifferentialProgressChartProps = DifferentialProgressChartOptions & {
+  history: DifferentialProgressChartHistoryPoint[];
+  hostOnly?: boolean;
+  hostClassName?: string;
+  hostRole?: "img";
+  hostAriaLabel?: string;
+};
+
+function Primitive({ primitive }: { primitive: DifferentialProgressChartPrimitive }) {
+  const { tag: Tag, attrs, className, text, children } = primitive;
+  const props = Object.fromEntries(Object.entries(attrs ?? {}).map(([key, value]) => [key === "text-anchor" ? "textAnchor" : key === "dominant-baseline" ? "dominantBaseline" : key, value]));
+  if (Tag === "title") return <title {...props}>{text}</title>;
+  return <Tag className={className} {...props}>{text ?? null}{children?.map((child, index) => <Primitive key={index} primitive={child} />)}</Tag>;
+}
+
+export function DifferentialProgressChart({ history, mode = "failed", timeScale = "compact", hostOnly = false, hostClassName, hostRole, hostAriaLabel }: DifferentialProgressChartProps) {
+  if (hostOnly) return <svg id="progress-chart" className={hostClassName} viewBox="0 0 640 200" role={hostRole} aria-label={hostAriaLabel ?? "Completion percentage over time"} />;
+  const geometry = buildDifferentialProgressChart(history, { mode, timeScale });
+  return <svg id={geometry.root.id} viewBox={geometry.root.viewBox} aria-label={geometry.root.ariaLabel} className={geometry.root.className} {...Object.fromEntries(Object.entries(geometry.root.data).map(([key, value]) => [`data-${key}`, value]))}>
+    {geometry.primitives.map((primitive, index) => <Primitive key={index} primitive={primitive} />)}
+  </svg>;
+}
diff --git a/dashboard/src/oven/DifferentialProgressChart/frame-delta-chart-geometry.ts b/dashboard/src/oven/DifferentialProgressChart/frame-delta-chart-geometry.ts
new file mode 100644
index 0000000..2cd49a0
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/frame-delta-chart-geometry.ts
@@ -0,0 +1,215 @@
+import { rollingStandardDeviationScores } from "../differential-testing-render/differential-testing-progress-chart.js";
+
+export const FRAME_DELTA_CHART_WIDTH = 640;
+export const FRAME_DELTA_CHART_HEIGHT = 200;
+
+export type FrameDeltaMetrics = {
+  frameDeviationRatios?: number[];
+  firstFailingFrame?: number | string | null;
+};
+
+export type FrameDeltaBand = {
+  className: "frame-delta-pass-band" | "frame-delta-fail-band";
+  x: string;
+  y: "0";
+  width: string;
+  height: "200";
+};
+
+export type FrameDeltaLine = {
+  className: "grid-line" | "grid-line x-grid-line" | "delta-zero-line";
+  x1: string;
+  x2: string;
+  y1: string;
+  y2: string;
+};
+
+export type FrameDeltaLabel = {
+  className: string;
+  x: string;
+  y: string;
+  textAnchor: "end" | "middle" | "start";
+  dominantBaseline?: "central";
+  text: string;
+};
+
+export type FrameDeltaPath = {
+  className: "frame-delta-line-pass" | "frame-delta-line-fail";
+  d: string;
+};
+
+export type FrameDeltaChartGeometry = {
+  root: {
+    id: "progress-chart";
+    viewBox: "0 0 640 200";
+    ariaLabel: "Current-run overall frame deviation residual normalized by a 31-frame rolling standard deviation";
+    className: "delta-chart";
+  };
+  cleared: boolean;
+  bands: FrameDeltaBand[];
+  gridLines: FrameDeltaLine[];
+  yLabels: FrameDeltaLabel[];
+  xGridLines: FrameDeltaLine[];
+  xLabels: FrameDeltaLabel[];
+  zeroLine: FrameDeltaLine | null;
+  passPath: FrameDeltaPath | null;
+  failPath: FrameDeltaPath | null;
+  firstFailingLabels: FrameDeltaLabel[];
+};
+
+function formatRatio(value: number): string {
+  const digits = Math.abs(value) >= 1 ? 4 : 5;
+  return Number(value).toFixed(digits).replace(/\.0+$/, "").replace(/(\.\d*?)0+$/, "$1");
+}
+
+export function buildFrameDeltaChart(metrics: FrameDeltaMetrics): FrameDeltaChartGeometry {
+  const root = {
+    id: "progress-chart" as const,
+    viewBox: "0 0 640 200" as const,
+    ariaLabel: "Current-run overall frame deviation residual normalized by a 31-frame rolling standard deviation" as const,
+    className: "delta-chart" as const,
+  };
+  const ratios = Array.isArray(metrics?.frameDeviationRatios)
+    ? metrics.frameDeviationRatios.map((value) => Math.max(0, Number(value) || 0))
+    : [];
+  const empty = {
+    root,
+    cleared: true,
+    bands: [],
+    gridLines: [],
+    yLabels: [],
+    xGridLines: [],
+    xLabels: [],
+    zeroLine: null,
+    passPath: null,
+    failPath: null,
+    firstFailingLabels: [],
+  };
+  if (ratios.length < 2) return empty;
+
+  const frameCount = ratios.length;
+  const rollingMedianRadius = 15;
+  const activeStart = ratios.findIndex((value) => value > 0);
+  const hasMetricFirstFailingFrame = metrics?.firstFailingFrame !== null
+    && metrics?.firstFailingFrame !== undefined
+    && metrics?.firstFailingFrame !== "";
+  const metricFirstFailingFrame = Number(metrics?.firstFailingFrame);
+  const firstFailingFrame = hasMetricFirstFailingFrame && Number.isFinite(metricFirstFailingFrame)
+    ? Math.max(-1, Math.min(frameCount - 1, Math.round(metricFirstFailingFrame)))
+    : activeStart;
+  const centeredRatios = ratios.map((value, index) => {
+    if (!(value > 0)) return 0;
+    const warmingUp = activeStart >= 0 && index < activeStart + rollingMedianRadius;
+    const window = ratios
+      .slice(
+        warmingUp ? activeStart : Math.max(activeStart, index - rollingMedianRadius),
+        warmingUp ? index + 1 : Math.min(frameCount, index + rollingMedianRadius + 1),
+      )
+      .filter((candidate) => candidate > 0)
+      .sort((left, right) => left - right);
+    if (!window.length) return 0;
+    const middle = Math.floor(window.length / 2);
+    const rollingMedian = window.length % 2
+      ? window[middle]
+      : (window[middle - 1] + window[middle]) / 2;
+    return value - rollingMedian;
+  });
+  const standardizedRatios = rollingStandardDeviationScores(ratios, centeredRatios, activeStart, rollingMedianRadius);
+  const maxResidual = Math.max(0.00001, ...standardizedRatios.map((value) => Math.abs(value)));
+  const limit = maxResidual * 1.16;
+  const zeroY = FRAME_DELTA_CHART_HEIGHT / 2;
+  const x = (index: number) => index / Math.max(1, frameCount - 1) * FRAME_DELTA_CHART_WIDTH;
+  const y = (value: number) => zeroY - (value / limit) * (FRAME_DELTA_CHART_HEIGHT * 0.44);
+  const bands: FrameDeltaBand[] = [];
+  const appendBand = (start: number, end: number, failing: boolean) => {
+    const x1 = x(start);
+    const x2 = x(end);
+    bands.push({
+      className: failing ? "frame-delta-fail-band" : "frame-delta-pass-band",
+      x: Math.min(x1, x2).toFixed(1),
+      y: "0",
+      width: Math.max(1, Math.abs(x2 - x1)).toFixed(1),
+      height: "200",
+    });
+  };
+  if (firstFailingFrame < 0) appendBand(0, frameCount - 1, false);
+  else {
+    if (firstFailingFrame > 0) appendBand(0, firstFailingFrame, false);
+    appendBand(firstFailingFrame, frameCount - 1, true);
+  }
+
+  const gridLines: FrameDeltaLine[] = [];
+  const yLabels: FrameDeltaLabel[] = [];
+  for (const value of [-limit / 2, 0, limit / 2]) {
+    const tickY = y(value);
+    if (value !== 0) gridLines.push({ className: "grid-line", x1: "0", x2: String(FRAME_DELTA_CHART_WIDTH - 42), y1: tickY.toFixed(1), y2: tickY.toFixed(1) });
+    yLabels.push({
+      className: "axis-label y-axis-label",
+      x: String(FRAME_DELTA_CHART_WIDTH - 4),
+      y: tickY.toFixed(1),
+      textAnchor: "end",
+      dominantBaseline: "central",
+      text: formatRatio(value),
+    });
+  }
+
+  const rawStep = Math.max(1, frameCount / 10);
+  const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+  const step = [1, 2, 2.5, 5, 10]
+    .map((multiplier) => Math.max(1, Math.round(multiplier * magnitude)))
+    .find((candidate) => candidate >= rawStep) || Math.max(1, Math.round(10 * magnitude));
+  const xGridLines: FrameDeltaLine[] = [];
+  const xLabels: FrameDeltaLabel[] = [];
+  let labelOrdinal = 0;
+  for (let index = step; index < frameCount - 1; index += step) {
+    const showLabel = labelOrdinal % 2 === 0;
+    const tickX = x(index);
+    if (showLabel) {
+      xGridLines.push({ className: "grid-line x-grid-line", x1: tickX.toFixed(1), x2: tickX.toFixed(1), y1: "16", y2: "200" });
+      xLabels.push({ className: "axis-label", x: tickX.toFixed(1), y: "13", textAnchor: "middle", text: String(index) });
+    }
+    labelOrdinal += 1;
+  }
+
+  const firstFailingLabels: FrameDeltaLabel[] = [];
+  if (firstFailingFrame >= 0 && firstFailingFrame < frameCount) {
+    if (firstFailingFrame > 0) firstFailingLabels.push({
+      className: "axis-label first-failing-frame-percent-label",
+      x: Math.max(4, x(firstFailingFrame) - 4).toFixed(1),
+      y: Math.max(12, FRAME_DELTA_CHART_HEIGHT - 4).toFixed(1),
+      textAnchor: "end",
+      text: `${Math.round(firstFailingFrame / frameCount * 100)}%`,
+    });
+    firstFailingLabels.push({
+      className: "axis-label first-failing-frame-label",
+      x: Math.min(FRAME_DELTA_CHART_WIDTH - 4, x(firstFailingFrame) + 4).toFixed(1),
+      y: Math.max(12, FRAME_DELTA_CHART_HEIGHT - 4).toFixed(1),
+      textAnchor: "start",
+      text: String(firstFailingFrame),
+    });
+  }
+
+  const passSegments: string[] = [];
+  const failSegments: string[] = [];
+  for (let index = 0; index < frameCount - 1; index += 1) {
+    const startValue = standardizedRatios[index];
+    const endValue = standardizedRatios[index + 1];
+    const segment = `M${x(index).toFixed(1)},${y(startValue).toFixed(1)}L${x(index + 1).toFixed(1)},${y(endValue).toFixed(1)}`;
+    const exactMatch = firstFailingFrame < 0 || (index < firstFailingFrame && index + 1 < firstFailingFrame);
+    (exactMatch ? passSegments : failSegments).push(segment);
+  }
+
+  return {
+    root,
+    cleared: false,
+    bands,
+    gridLines,
+    yLabels,
+    xGridLines,
+    xLabels,
+    zeroLine: { className: "delta-zero-line", x1: "0", x2: String(Math.max(0, FRAME_DELTA_CHART_WIDTH - 14).toFixed(1)), y1: zeroY.toFixed(1), y2: zeroY.toFixed(1) },
+    passPath: passSegments.length ? { className: "frame-delta-line-pass", d: passSegments.join(" ") } : null,
+    failPath: failSegments.length ? { className: "frame-delta-line-fail", d: failSegments.join(" ") } : null,
+    firstFailingLabels,
+  };
+}
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/delta-real-compact.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/delta-real-compact.svg
new file mode 100644
index 0000000..5d0c705
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/delta-real-compact.svg
@@ -0,0 +1 @@
+<svg aria-label="Overall failed-sample deviation ratio over time" class="failed-chart delta-chart" data-domain-max="1767268800000" data-domain-min="1767268800000" data-plot-bottom="200" data-plot-left="0" data-plot-right="640" data-plot-top="0" data-time-scale="compact" id="progress-chart" viewBox="0 0 640 200"><line class="grid-line" x1="0" x2="604" y1="150" y2="150"></line><rect class="label-backdrop" height="16" width="44" x="0" y="142"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="150">-58</text><line class="grid-line" x1="0" x2="604" y1="100" y2="100"></line><rect class="label-backdrop" height="16" width="44" x="0" y="92"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="100">0</text><line class="grid-line" x1="0" x2="604" y1="50" y2="50"></line><rect class="label-backdrop" height="16" width="44" x="0" y="42"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="50">58</text><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="128" y="194">12:00</text><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="256" y="194">12:00</text><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="384" y="194">12:00</text><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="512" y="194">12:00</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/failed-backtracking-spike.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/failed-backtracking-spike.svg
new file mode 100644
index 0000000..8cc397d
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/failed-backtracking-spike.svg
@@ -0,0 +1 @@
+<svg aria-label="Failed state points over time" class="failed-chart" data-domain-max="1767269280000" data-domain-min="1767268800000" data-plot-bottom="200" data-plot-left="0" data-plot-right="640" data-plot-top="0" data-time-scale="compact" id="progress-chart" viewBox="0 0 640 200"><line class="grid-line" x1="0" x2="604" y1="160" y2="160"></line><rect class="label-backdrop" height="16" width="44" x="0" y="152"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="160">1</text><line class="grid-line" x1="0" x2="604" y1="120" y2="120"></line><rect class="label-backdrop" height="16" width="44" x="0" y="112"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="120">1</text><line class="grid-line" x1="0" x2="604" y1="80" y2="80"></line><rect class="label-backdrop" height="16" width="44" x="0" y="72"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="80">2</text><line class="grid-line" x1="0" x2="604" y1="40" y2="40"></line><rect class="label-backdrop" height="16" width="44" x="0" y="32"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="40">2</text><path class="failed-fields-pass-area" d="M 0.0 133.3 L 160.0 133.3 L 160.0 133.3 L 480.0 133.3 L 480.0 133.3 L 640.0 133.3 L 640.0 66.7 L 640.0 0.0 L 0.0 0.0 Z"></path><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="178"></line><path class="failed-fields-area" d="M 0.0 133.3 L 160.0 133.3 L 160.0 133.3 L 480.0 133.3 L 480.0 133.3 L 640.0 133.3 L 640.0 66.7 L 640.0 200.0 L 0.0 200.0 Z"></path><path class="failed-total-percent-line" d="M 0.0 199.8 L 160.0 199.8 L 160.0 199.8 L 480.0 199.8 L 480.0 199.8 L 640.0 199.8 L 640.0 199.6"><title>Failed total: 0.2%</title></path><g class="failed-run-marker-tick-layer"><line class="failed-run-tick muted" x1="160.0" x2="160.0" y1="133.3" y2="200.0"><title>12:02 · fixture run</title></line><line class="failed-run-tick muted" x1="480.0" x2="480.0" y1="133.3" y2="200.0"><title>12:06 · reverted fixture</title></line></g><path class="failed-fields-line" d="M 0.0 133.3 L 160.0 133.3 L 160.0 133.3 L 480.0 133.3 L 480.0 133.3 L 640.0 133.3 L 640.0 66.7"><title>Failed state points: 2 / 10 frames (0.2% of 1000 active points); failed fields: 1/100</title></path><text class="axis-label" text-anchor="middle" x="128" y="194">12:01</text><text class="axis-label" text-anchor="middle" x="256" y="194">12:03</text><text class="axis-label" text-anchor="middle" x="384" y="194">12:04</text><text class="axis-label" text-anchor="middle" x="512" y="194">12:06</text><g class="failed-run-marker-layer"><g class="failed-run-marker-plain-layer"><text class="failed-run-marker worsened" x="640.0" y="75.7">▲<title>12:08 · worsened fixture</title></text></g></g></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/failed-goal-reached.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/failed-goal-reached.svg
new file mode 100644
index 0000000..d701a95
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/failed-goal-reached.svg
@@ -0,0 +1 @@
+<svg aria-label="Failed state points over time" class="failed-chart goal-reached" data-domain-max="1767269160000" data-domain-min="1767268800000" data-plot-bottom="200" data-plot-left="0" data-plot-right="640" data-plot-top="0" data-time-scale="compact" id="progress-chart" viewBox="0 0 640 200"><line class="grid-line" x1="0" x2="604" y1="160" y2="160"></line><rect class="label-backdrop" height="16" width="44" x="0" y="152"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="160">4</text><line class="grid-line" x1="0" x2="604" y1="120" y2="120"></line><rect class="label-backdrop" height="16" width="44" x="0" y="112"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="120">8</text><line class="grid-line" x1="0" x2="604" y1="80" y2="80"></line><rect class="label-backdrop" height="16" width="44" x="0" y="72"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="80">13</text><line class="grid-line" x1="0" x2="604" y1="40" y2="40"></line><rect class="label-backdrop" height="16" width="44" x="0" y="32"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="40">17</text><path class="failed-fields-pass-area" d="M 0.0 9.5 L 320.0 9.5 L 320.0 152.4 L 640.0 152.4 L 640.0 200.0 L 640.0 0.0 L 0.0 0.0 Z"></path><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="178"></line><path class="failed-fields-area" d="M 0.0 9.5 L 320.0 9.5 L 320.0 152.4 L 640.0 152.4 L 640.0 200.0 L 640.0 200.0 L 0.0 200.0 Z"></path><path class="failed-total-percent-line" d="M 0.0 196.0 L 320.0 196.0 L 320.0 199.0 L 640.0 199.0 L 640.0 200.0"><title>Failed total: 0%</title></path><g class="failed-run-marker-tick-layer"><line class="failed-run-tick" x1="320.0" x2="320.0" y1="143.4" y2="200.0"><title>12:03 · improved fixture</title></line></g><path class="failed-fields-line" d="M 0.0 9.5 L 320.0 9.5 L 320.0 152.4 L 640.0 152.4 L 640.0 200.0"><title>Failed state points: 0 / 10 frames (0.0% of 1000 active points); failed fields: 0/100</title></path><text class="axis-label" text-anchor="middle" x="128" y="194">12:01</text><text class="axis-label" text-anchor="middle" x="256" y="194">12:02</text><text class="axis-label" text-anchor="middle" x="384" y="194">12:03</text><text class="axis-label" text-anchor="middle" x="512" y="194">12:04</text><g class="failed-run-marker-layer"><g class="failed-run-marker-improved-layer"><text class="failed-run-marker improved" x="320.0" y="143.4">▼<title>12:03 · improved fixture</title></text><text class="failed-run-marker improved" x="640.0" y="191.0">▼<title>12:06 · improved fixture</title></text></g></g></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/failed-real-all.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/failed-real-all.svg
new file mode 100644
index 0000000..88e7f63
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/failed-real-all.svg
@@ -0,0 +1 @@
+<svg aria-label="Failed state points over time" class="range-zoomable failed-chart" data-domain-max="1767268830000" data-domain-min="1767268800000" data-plot-bottom="200" data-plot-left="0" data-plot-right="640" data-plot-top="0" data-time-scale="all" id="progress-chart" viewBox="0 0 640 200"><line class="grid-line" x1="0" x2="604" y1="160" y2="160"></line><rect class="label-backdrop" height="16" width="44" x="0" y="152"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="160">21</text><line class="grid-line" x1="0" x2="604" y1="120" y2="120"></line><rect class="label-backdrop" height="16" width="44" x="0" y="112"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="120">42</text><line class="grid-line" x1="0" x2="604" y1="80" y2="80"></line><rect class="label-backdrop" height="16" width="44" x="0" y="72"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="80">63</text><line class="grid-line" x1="0" x2="604" y1="40" y2="40"></line><rect class="label-backdrop" height="16" width="44" x="0" y="32"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="40">84</text><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="128" y="194">12:00</text><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="256" y="194">12:00</text><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="384" y="194">12:00</text><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="512" y="194">12:00</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/failed-real-compact.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/failed-real-compact.svg
new file mode 100644
index 0000000..d03bcdb
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/failed-real-compact.svg
@@ -0,0 +1 @@
+<svg aria-label="Failed state points over time" class="failed-chart" data-domain-max="1767268800000" data-domain-min="1767268800000" data-plot-bottom="200" data-plot-left="0" data-plot-right="640" data-plot-top="0" data-time-scale="compact" id="progress-chart" viewBox="0 0 640 200"><line class="grid-line" x1="0" x2="604" y1="160" y2="160"></line><rect class="label-backdrop" height="16" width="44" x="0" y="152"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="160">21</text><line class="grid-line" x1="0" x2="604" y1="120" y2="120"></line><rect class="label-backdrop" height="16" width="44" x="0" y="112"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="120">42</text><line class="grid-line" x1="0" x2="604" y1="80" y2="80"></line><rect class="label-backdrop" height="16" width="44" x="0" y="72"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="80">63</text><line class="grid-line" x1="0" x2="604" y1="40" y2="40"></line><rect class="label-backdrop" height="16" width="44" x="0" y="32"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="40">84</text><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="128" y="194">12:00</text><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="256" y="194">12:00</text><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="384" y="194">12:00</text><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="178"></line><text class="axis-label" text-anchor="middle" x="512" y="194">12:00</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-first-failing.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-first-failing.svg
new file mode 100644
index 0000000..85fdbf6
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-first-failing.svg
@@ -0,0 +1 @@
+<svg aria-label="Current-run overall frame deviation residual normalized by a 31-frame rolling standard deviation" class="delta-chart" id="progress-chart" viewBox="0 0 640 200"><rect class="frame-delta-pass-band" height="200" width="274.3" x="0.0" y="0"></rect><rect class="frame-delta-fail-band" height="200" width="365.7" x="274.3" y="0"></rect><line class="grid-line" x1="0" x2="598" y1="144.0" y2="144.0"></line><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="144.0">-1.16</text><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="100.0">0</text><line class="grid-line" x1="0" x2="598" y1="56.0" y2="56.0"></line><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="56.0">1.16</text><line class="grid-line x-grid-line" x1="91.4" x2="91.4" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="91.4" y="13">1</text><line class="grid-line x-grid-line" x1="274.3" x2="274.3" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="274.3" y="13">3</text><line class="grid-line x-grid-line" x1="457.1" x2="457.1" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="457.1" y="13">5</text><line class="delta-zero-line" x1="0" x2="626.0" y1="100.0" y2="100.0"></line><path class="frame-delta-line-pass" d="M0.0,100.0L91.4,100.0 M91.4,100.0L182.9,100.0"></path><path class="frame-delta-line-fail" d="M182.9,100.0L274.3,24.1 M274.3,24.1L365.7,160.8 M365.7,160.8L457.1,83.3 M457.1,83.3L548.6,135.2 M548.6,135.2L640.0,100.0"></path><text class="axis-label first-failing-frame-percent-label" text-anchor="end" x="270.3" y="196.0">38%</text><text class="axis-label first-failing-frame-label" text-anchor="start" x="278.3" y="196.0">3</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-normal.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-normal.svg
new file mode 100644
index 0000000..22593f8
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-normal.svg
@@ -0,0 +1 @@
+<svg aria-label="Current-run overall frame deviation residual normalized by a 31-frame rolling standard deviation" class="delta-chart" id="progress-chart" viewBox="0 0 640 200"><rect class="frame-delta-pass-band" height="200" width="182.9" x="0.0" y="0"></rect><rect class="frame-delta-fail-band" height="200" width="457.1" x="182.9" y="0"></rect><line class="grid-line" x1="0" x2="598" y1="144.0" y2="144.0"></line><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="144.0">-1.16</text><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="100.0">0</text><line class="grid-line" x1="0" x2="598" y1="56.0" y2="56.0"></line><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="56.0">1.16</text><line class="grid-line x-grid-line" x1="91.4" x2="91.4" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="91.4" y="13">1</text><line class="grid-line x-grid-line" x1="274.3" x2="274.3" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="274.3" y="13">3</text><line class="grid-line x-grid-line" x1="457.1" x2="457.1" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="457.1" y="13">5</text><line class="delta-zero-line" x1="0" x2="626.0" y1="100.0" y2="100.0"></line><path class="frame-delta-line-pass" d="M0.0,100.0L91.4,100.0"></path><path class="frame-delta-line-fail" d="M91.4,100.0L182.9,100.0 M182.9,100.0L274.3,24.1 M274.3,24.1L365.7,160.8 M365.7,160.8L457.1,83.3 M457.1,83.3L548.6,135.2 M548.6,135.2L640.0,100.0"></path><text class="axis-label first-failing-frame-percent-label" text-anchor="end" x="178.9" y="196.0">25%</text><text class="axis-label first-failing-frame-label" text-anchor="start" x="186.9" y="196.0">2</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-outliers.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-outliers.svg
new file mode 100644
index 0000000..96f08b1
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-outliers.svg
@@ -0,0 +1 @@
+<svg aria-label="Current-run overall frame deviation residual normalized by a 31-frame rolling standard deviation" class="delta-chart" id="progress-chart" viewBox="0 0 640 200"><rect class="frame-delta-pass-band" height="200" width="67.4" x="0.0" y="0"></rect><rect class="frame-delta-fail-band" height="200" width="572.6" x="67.4" y="0"></rect><line class="grid-line" x1="0" x2="598" y1="144.0" y2="144.0"></line><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="144.0">-1.688</text><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="100.0">0</text><line class="grid-line" x1="0" x2="598" y1="56.0" y2="56.0"></line><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="end" x="636" y="56.0">1.688</text><line class="grid-line x-grid-line" x1="67.4" x2="67.4" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="67.4" y="13">2</text><line class="grid-line x-grid-line" x1="202.1" x2="202.1" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="202.1" y="13">6</text><line class="grid-line x-grid-line" x1="336.8" x2="336.8" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="336.8" y="13">10</text><line class="grid-line x-grid-line" x1="471.6" x2="471.6" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="471.6" y="13">14</text><line class="grid-line x-grid-line" x1="606.3" x2="606.3" y1="16" y2="200"></line><text class="axis-label" text-anchor="middle" x="606.3" y="13">18</text><line class="delta-zero-line" x1="0" x2="626.0" y1="100.0" y2="100.0"></line><path class="frame-delta-line-pass" d="M0.0,100.0L33.7,100.0"></path><path class="frame-delta-line-fail" d="M33.7,100.0L67.4,100.0 M67.4,100.0L101.1,47.9 M101.1,47.9L134.7,131.9 M134.7,131.9L168.4,39.8 M168.4,39.8L202.1,100.0 M202.1,100.0L235.8,100.1 M235.8,100.1L269.5,33.0 M269.5,33.0L303.2,100.0 M303.2,100.0L336.8,100.0 M336.8,100.0L370.5,100.1 M370.5,100.1L404.2,24.1 M404.2,24.1L437.9,100.0 M437.9,100.0L471.6,100.0 M471.6,100.0L505.3,100.1 M505.3,100.1L538.9,100.0 M538.9,100.0L572.6,100.0 M572.6,100.0L606.3,100.0 M606.3,100.0L640.0,100.0"></path><text class="axis-label first-failing-frame-percent-label" text-anchor="end" x="63.4" y="196.0">10%</text><text class="axis-label first-failing-frame-label" text-anchor="start" x="71.4" y="196.0">2</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-short.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-short.svg
new file mode 100644
index 0000000..87e5062
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/frame-delta-short.svg
@@ -0,0 +1 @@
+<svg aria-label="Current-run overall frame deviation residual normalized by a 31-frame rolling standard deviation" class="delta-chart" id="progress-chart" viewBox="0 0 640 200"></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/progress-empty.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/progress-empty.svg
new file mode 100644
index 0000000..58d7a71
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/progress-empty.svg
@@ -0,0 +1 @@
+<svg aria-label="Completion percentage over time" data-domain-max="1700000000000" data-domain-min="1700000000000" data-plot-bottom="200" data-plot-left="0" data-plot-right="640" data-plot-top="0" data-time-scale="compact" id="progress-chart" viewBox="0 0 640 200"><line class="grid-line" x1="0" x2="640" y1="200" y2="200"></line><line class="grid-line" x1="0" x2="640" y1="150" y2="150"></line><rect class="label-backdrop" height="16" width="44" x="0" y="142"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="150">25%</text><line class="grid-line" x1="0" x2="640" y1="100" y2="100"></line><rect class="label-backdrop" height="16" width="44" x="0" y="92"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="100">50%</text><line class="grid-line" x1="0" x2="640" y1="50" y2="50"></line><rect class="label-backdrop" height="16" width="44" x="0" y="42"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="50">75%</text><line class="grid-line" x1="0" x2="640" y1="0" y2="0"></line><rect class="label-backdrop" height="16" width="44" x="0" y="0"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="8">100%</text><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="178"></line><path class="progress-area" d="M 0.0 200.0 L 0.0 200.0 L 0.0 200.0 Z"></path><path class="progress-line" d="M 0.0 200.0"></path><circle class="progress-dot" cx="0" cy="200" r="4"></circle><text class="axis-label" text-anchor="middle" x="128" y="194">22:13</text><text class="axis-label" text-anchor="middle" x="256" y="194">22:13</text><text class="axis-label" text-anchor="middle" x="384" y="194">22:13</text><text class="axis-label" text-anchor="middle" x="512" y="194">22:13</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/progress-real-compact.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/progress-real-compact.svg
new file mode 100644
index 0000000..67beedf
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/progress-real-compact.svg
@@ -0,0 +1 @@
+<svg aria-label="Completion percentage over time" data-domain-max="1767268800000" data-domain-min="1767268800000" data-plot-bottom="200" data-plot-left="0" data-plot-right="640" data-plot-top="0" data-time-scale="compact" id="progress-chart" viewBox="0 0 640 200"><line class="grid-line" x1="0" x2="640" y1="200" y2="200"></line><line class="grid-line" x1="0" x2="640" y1="150" y2="150"></line><rect class="label-backdrop" height="16" width="44" x="0" y="142"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="150">25%</text><line class="grid-line" x1="0" x2="640" y1="100" y2="100"></line><rect class="label-backdrop" height="16" width="44" x="0" y="92"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="100">50%</text><line class="grid-line" x1="0" x2="640" y1="50" y2="50"></line><rect class="label-backdrop" height="16" width="44" x="0" y="42"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="50">75%</text><line class="grid-line" x1="0" x2="640" y1="0" y2="0"></line><rect class="label-backdrop" height="16" width="44" x="0" y="0"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="8">100%</text><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="178"></line><path class="progress-area" d="M 0.0 200.0 L 0.0 200.0 L 0.0 200.0 Z"></path><path class="progress-line" d="M 0.0 200.0"></path><circle class="progress-dot" cx="0" cy="200" r="4"></circle><text class="axis-label" text-anchor="middle" x="128" y="194">12:00</text><text class="axis-label" text-anchor="middle" x="256" y="194">12:00</text><text class="axis-label" text-anchor="middle" x="384" y="194">12:00</text><text class="axis-label" text-anchor="middle" x="512" y="194">12:00</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/goldens/progress-single-point.svg b/dashboard/src/oven/DifferentialProgressChart/goldens/progress-single-point.svg
new file mode 100644
index 0000000..2795a72
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/goldens/progress-single-point.svg
@@ -0,0 +1 @@
+<svg aria-label="Completion percentage over time" data-domain-max="1767268800000" data-domain-min="1767268800000" data-plot-bottom="200" data-plot-left="0" data-plot-right="640" data-plot-top="0" data-time-scale="compact" id="progress-chart" viewBox="0 0 640 200"><line class="grid-line" x1="0" x2="640" y1="200" y2="200"></line><line class="grid-line" x1="0" x2="640" y1="150" y2="150"></line><rect class="label-backdrop" height="16" width="44" x="0" y="142"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="150">25%</text><line class="grid-line" x1="0" x2="640" y1="100" y2="100"></line><rect class="label-backdrop" height="16" width="44" x="0" y="92"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="100">50%</text><line class="grid-line" x1="0" x2="640" y1="50" y2="50"></line><rect class="label-backdrop" height="16" width="44" x="0" y="42"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="50">75%</text><line class="grid-line" x1="0" x2="640" y1="0" y2="0"></line><rect class="label-backdrop" height="16" width="44" x="0" y="0"></rect><text class="axis-label y-axis-label" dominant-baseline="central" text-anchor="start" x="4" y="8">100%</text><line class="grid-line x-grid-line" x1="128" x2="128" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="256" x2="256" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="384" x2="384" y1="0" y2="178"></line><line class="grid-line x-grid-line" x1="512" x2="512" y1="0" y2="178"></line><path class="progress-area" d="M 0.0 5.0 L 0.0 200.0 L 0.0 200.0 Z"></path><path class="progress-line" d="M 0.0 5.0"></path><circle class="progress-dot" cx="0" cy="5" r="4"></circle><text class="axis-label" text-anchor="middle" x="128" y="194">12:00</text><text class="axis-label" text-anchor="middle" x="256" y="194">12:00</text><text class="axis-label" text-anchor="middle" x="384" y="194">12:00</text><text class="axis-label" text-anchor="middle" x="512" y="194">12:00</text></svg>
diff --git a/dashboard/src/oven/DifferentialProgressChart/index.ts b/dashboard/src/oven/DifferentialProgressChart/index.ts
new file mode 100644
index 0000000..12a2c9f
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/index.ts
@@ -0,0 +1,22 @@
+export { DifferentialFrameDeltaChart } from "./DifferentialFrameDeltaChart";
+export { DifferentialProgressChart } from "./DifferentialProgressChart";
+export { buildFrameDeltaChart, FRAME_DELTA_CHART_HEIGHT, FRAME_DELTA_CHART_WIDTH } from "./frame-delta-chart-geometry";
+export { buildDifferentialProgressChart, DIFFERENTIAL_PROGRESS_CHART_HEIGHT, DIFFERENTIAL_PROGRESS_CHART_WIDTH } from "./progress-chart-geometry";
+export type {
+  FrameDeltaBand,
+  FrameDeltaChartGeometry,
+  FrameDeltaLabel,
+  FrameDeltaLine,
+  FrameDeltaMetrics,
+  FrameDeltaPath,
+} from "./frame-delta-chart-geometry";
+export type { DifferentialFrameDeltaChartProps } from "./DifferentialFrameDeltaChart";
+export type { DifferentialProgressChartProps } from "./DifferentialProgressChart";
+export type {
+  DifferentialProgressChartGeometry,
+  DifferentialProgressChartHistoryPoint,
+  DifferentialProgressChartMode,
+  DifferentialProgressChartOptions,
+  DifferentialProgressChartPrimitive,
+  DifferentialProgressChartTimeScale,
+} from "./progress-chart-geometry";
diff --git a/dashboard/src/oven/DifferentialProgressChart/progress-chart-battery.ts b/dashboard/src/oven/DifferentialProgressChart/progress-chart-battery.ts
new file mode 100644
index 0000000..2951e45
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/progress-chart-battery.ts
@@ -0,0 +1,30 @@
+import { resolve } from "node:path";
+import { differentialProgressChartHistory } from "../differential-testing-render/differential-testing-renderer.js";
+import { renderDifferentialTestingFrameDeltaChart, renderDifferentialTestingProgressChart } from "../differential-testing-render/differential-testing-progress-chart.js";
+
+const { differentialTestingPayload } = await import(resolve(process.cwd(), "dashboard/src/oven/differential-testing-render/golden-harness.mjs"));
+const realHistory = differentialProgressChartHistory(differentialTestingPayload(), { mode: "value" });
+const baseTime = "2026-01-01T12:00:00.000Z";
+
+function point(offsetMinutes, failed, marker = "") {
+  const time = new Date(Date.parse(baseTime) + offsetMinutes * 60_000).toISOString();
+  return { time, drivingParityGeneratedAt: time, percent: Math.max(0, 100 - failed / 20), done: Math.max(0, 100 - failed), remaining: failed, total: 100, drivingParityStateFailures: failed, drivingParityFailedFields: Math.ceil(failed / 10), drivingParityAllFields: 100, drivingParityFrames: 10, drivingParityFailedStatePointPercent: failed / 10, drivingParityActiveComparablePoints: 1_000, drivingParityEventMarker: marker, drivingParityEventTitle: marker ? `${marker} fixture` : "fixture run" };
+}
+
+const spikeHistory = [point(0, 1, "baseline"), point(2, 1), point(4, 500, "worsened"), point(6, 1, "reverted"), point(8, 2, "worsened")];
+const goalHistory = [point(0, 20, "baseline"), point(3, 5, "improved"), point(6, 0, "improved")];
+
+export const progressChartGoldenCases = [
+  { filename: "progress-real-compact.svg", description: "Real payload in the UI progress/value compact mode.", render: renderDifferentialTestingProgressChart, args: [realHistory, { mode: "progress", timeScale: "compact" }], svgId: "progress-chart" },
+  { filename: "failed-real-compact.svg", description: "Real payload in failed compact mode.", render: renderDifferentialTestingProgressChart, args: [realHistory, { mode: "failed", timeScale: "compact" }], svgId: "progress-chart" },
+  { filename: "failed-real-all.svg", description: "Real payload in failed full-time mode.", render: renderDifferentialTestingProgressChart, args: [realHistory, { mode: "failed", timeScale: "all" }], svgId: "progress-chart" },
+  { filename: "delta-real-compact.svg", description: "Real payload in failed-ratio delta mode.", render: renderDifferentialTestingProgressChart, args: [realHistory, { mode: "delta", timeScale: "compact" }], svgId: "progress-chart" },
+  { filename: "progress-empty.svg", description: "Empty progress history with frozen Date.now fallback.", render: renderDifferentialTestingProgressChart, args: [[], { mode: "progress" }], svgId: "progress-chart" },
+  { filename: "progress-single-point.svg", description: "Single-point progress history.", render: renderDifferentialTestingProgressChart, args: [[point(0, 50)], { mode: "progress" }], svgId: "progress-chart" },
+  { filename: "failed-backtracking-spike.svg", description: "Failed history with a backtracking spike removed by chart filtering.", render: renderDifferentialTestingProgressChart, args: [spikeHistory, { mode: "failed" }], svgId: "progress-chart" },
+  { filename: "failed-goal-reached.svg", description: "Failed history reaching zero failures and goal-reached state.", render: renderDifferentialTestingProgressChart, args: [goalHistory, { mode: "failed" }], svgId: "progress-chart" },
+  { filename: "frame-delta-normal.svg", description: "Normal frame residuals without an explicit failing-frame split.", render: renderDifferentialTestingFrameDeltaChart, args: [{ frameDeviationRatios: [0, 0, 0.01, 0.012, 0.008, 0.011, 0.009, 0.01] }], svgId: "progress-chart" },
+  { filename: "frame-delta-first-failing.svg", description: "Frame residuals with explicit pass and fail bands.", render: renderDifferentialTestingFrameDeltaChart, args: [{ frameDeviationRatios: [0, 0, 0.01, 0.012, 0.008, 0.011, 0.009, 0.01], firstFailingFrame: 3 }], svgId: "progress-chart" },
+  { filename: "frame-delta-short.svg", description: "Short frame series that clears the chart after metadata setup.", render: renderDifferentialTestingFrameDeltaChart, args: [{ frameDeviationRatios: [0.01] }], svgId: "progress-chart" },
+  { filename: "frame-delta-outliers.svg", description: "Outlier-heavy residuals exercising rolling median and standard-deviation scoring.", render: renderDifferentialTestingFrameDeltaChart, args: [{ frameDeviationRatios: [0, 0, 0.01, 0.012, 0.009, 1.5, 0.011, 0.008, 2.2, 0.01, 0.012, 0.009, 3.1, 0.011, 0.01, 0.008, 0.012, 0.009, 0.01, 0.011], firstFailingFrame: 2 }], svgId: "progress-chart" },
+];
diff --git a/dashboard/src/oven/DifferentialProgressChart/progress-chart-geometry.ts b/dashboard/src/oven/DifferentialProgressChart/progress-chart-geometry.ts
new file mode 100644
index 0000000..a52726f
--- /dev/null
+++ b/dashboard/src/oven/DifferentialProgressChart/progress-chart-geometry.ts
@@ -0,0 +1,141 @@
+import { compactTimeScale } from "../utils/compact-time-scale";
+
+export const DIFFERENTIAL_PROGRESS_CHART_WIDTH = 640;
+export const DIFFERENTIAL_PROGRESS_CHART_HEIGHT = 200;
+
+export type DifferentialProgressChartMode = "progress" | "failed" | "delta";
+export type DifferentialProgressChartTimeScale = "compact" | "all";
+export type DifferentialProgressChartHistoryPoint = Record<string, unknown>;
+export type DifferentialProgressChartOptions = { mode?: DifferentialProgressChartMode; timeScale?: DifferentialProgressChartTimeScale };
+type Point = Record<string, number | string | null>;
+export type DifferentialProgressChartPrimitive = {
+  tag: "line" | "rect" | "path" | "circle" | "text" | "g" | "title";
+  className?: string;
+  attrs?: Record<string, string>;
+  text?: string;
+  children?: DifferentialProgressChartPrimitive[];
+};
+export type DifferentialProgressChartGeometry = {
+  root: { id: "progress-chart"; viewBox: "0 0 640 200"; ariaLabel: string; className?: string; data: Record<string, string> };
+  primitives: DifferentialProgressChartPrimitive[];
+};
+
+const width = DIFFERENTIAL_PROGRESS_CHART_WIDTH;
+const height = DIFFERENTIAL_PROGRESS_CHART_HEIGHT;
+const num = (value: unknown) => Number(value);
+const fixed = (value: number) => value.toFixed(1);
+const element = (tag: DifferentialProgressChartPrimitive["tag"], attrs: Record<string, string> = {}, className?: string, text?: string, children?: DifferentialProgressChartPrimitive[]) => ({ tag, attrs, className, text, children });
+const clock = (time: number) => new Date(time).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false });
+const axisNumber = (value: number) => {
+  const rounded = Math.round(value); const abs = Math.abs(rounded);
+  if (abs >= 1_000_000) return (rounded / 1_000_000).toFixed(abs >= 10_000_000 ? 0 : 1).replace(/\.0$/, "") + "m";
+  if (abs >= 100_000) return `${Math.round(rounded / 1_000)}k`;
+  if (abs >= 1_000) return (rounded / 1_000).toFixed(1).replace(/\.0$/, "") + "k";
+  return String(rounded);
+};
+const ratio = (value: number) => {
+  const text = value.toFixed(Math.abs(value) >= 1 ? 4 : 5).replace(/\.0+$/, "").replace(/(\.\d*?)0+$/, "$1");
+  return text === "-0" ? "0" : text;
+};
+
+function chartPoint(source: DifferentialProgressChartHistoryPoint): Point {
+  const generated = Date.parse(String(source.drivingParityGeneratedAt));
+  return {
+    time: Date.parse(String(source.time)), drivingParityTime: Number.isFinite(generated) ? generated : null,
+    percent: num(source.percent), done: num(source.done), remaining: num(source.remaining), total: num(source.total),
+    drivingParityFailedFieldPercent: num(source.drivingParityFailedFieldPercent), drivingParityFailedFields: num(source.drivingParityFailedFields),
+    drivingParityAllFields: num(source.drivingParityAllFields), drivingParityFrames: num(source.drivingParityFrames),
+    drivingParityFailedStatePointPercent: num(source.drivingParityFailedStatePointPercent), drivingParityStateFailures: num(source.drivingParityStateFailures),
+    drivingParityActiveComparablePoints: num(source.drivingParityActiveComparablePoints),
+    drivingParityEventMarker: String(source.drivingParityEventMarker || ""), drivingParityEventTitle: String(source.drivingParityEventTitle || ""),
+  };
+}
+
+export function buildDifferentialProgressChart(history: DifferentialProgressChartHistoryPoint[] = [], options: DifferentialProgressChartOptions = {}): DifferentialProgressChartGeometry {
+  const mode = options.mode ?? "failed"; const timeScale = options.timeScale ?? "compact";
+  const failed = mode === "failed" || mode === "delta"; const delta = mode === "delta"; const compact = timeScale === "compact";
+  const points = history.map(chartPoint).filter((point) => Number.isFinite(num(point.time)) && Number.isFinite(num(point.percent))).sort((a, b) => num(a.time) - num(b.time));
+  const now = Date.now(); const raw = points.length ? points : [{ time: now, percent: 0, done: 0, remaining: 0, total: 0 }];
+  let minTime = Math.min(...raw.map((point) => num(point.time))); let maxTime = Math.max(...raw.map((point) => num(point.time)));
+  const latestFrames = [...points].reverse().map((point) => num(point.drivingParityFrames)).find(Number.isFinite);
+  const sameBucket = (point: Point) => !failed || !Number.isFinite(latestFrames) || num(point.drivingParityFrames) === latestFrames;
+  const rawFailed = (point: Point) => Number.isFinite(num(point.drivingParityStateFailures)) ? Math.max(0, num(point.drivingParityStateFailures)) : Math.max(0, Math.min(100, num(point.drivingParityFailedFieldPercent)));
+  const overallRatio = (point: Point) => { const samples = num(point.drivingParityAllFields) * num(point.drivingParityFrames); return Number.isFinite(num(point.drivingParityStateFailures)) && Number.isFinite(samples) && samples > 0 ? num(point.drivingParityStateFailures) / samples : NaN; };
+  const failedValue = (point: Point) => delta && Number.isFinite(num(point.drivingParityDeltaValue)) ? num(point.drivingParityDeltaValue) : rawFailed(point);
+  const totalPercent = (point: Point) => {
+    if (Number.isFinite(num(point.drivingParityFailedStatePointPercent))) return Math.max(0, Math.min(100, num(point.drivingParityFailedStatePointPercent)));
+    const failures = num(point.drivingParityStateFailures); const total = num(point.drivingParityActiveComparablePoints);
+    return Number.isFinite(failures) && Number.isFinite(total) && total > 0 ? Math.max(0, Math.min(100, failures / total * 100)) : NaN;
+  };
+  const collapse = (source: Point[]) => source.map((point) => ({ ...point, time: Number.isFinite(num(point.drivingParityTime)) ? num(point.drivingParityTime) : num(point.time) })).sort((a, b) => num(a.time) - num(b.time)).filter((point, index, all) => !index || num(all[index - 1].time) !== num(point.time) || num(all[index - 1].drivingParityFrames) !== num(point.drivingParityFrames) || rawFailed(all[index - 1]) !== rawFailed(point));
+  let source = failed ? collapse(points.filter((point) => sameBucket(point) && Number.isFinite(num(point.drivingParityStateFailures)))) : [];
+  if (failed && !source.length) source = collapse(points.filter((point) => sameBucket(point) && Number.isFinite(num(point.drivingParityFailedFieldPercent))));
+  if (failed && source.length >= 3) {
+    const kept: Point[] = []; let index = 0;
+    while (index < source.length) { const point = source[index]; if (!kept.length) { kept.push(point); index++; continue; }
+      const baseline = rawFailed(kept.at(-1)!); const value = rawFailed(point);
+      if (!Number.isFinite(baseline) || !Number.isFinite(value) || value <= baseline + Math.max(200, baseline * .002)) { kept.push(point); index++; continue; }
+      let restored = -1; for (let cursor = index + 1; cursor < source.length; cursor++) if (rawFailed(source[cursor]) <= baseline + Math.max(50, baseline * .001)) { restored = cursor; break; }
+      if (restored < 0) { kept.push(point); index++; } else { kept.push(source[restored]); index = restored + 1; }
+    }
+    source = kept.filter((point, index, all) => !index || num(point.time) !== num(all[index - 1].time) || rawFailed(point) !== rawFailed(all[index - 1]));
+  }
+  if (failed && source.length) { const baseline = source.findIndex((point) => point.drivingParityEventMarker === "baseline"); const positive = source.findIndex((point) => rawFailed(point) > 0); const start = baseline >= 0 ? baseline : positive; if (start > 0) source = source.slice(start); }
+  if (delta) { let previous: number | null = null; source = source.map((point) => { const value = overallRatio(point); if (!Number.isFinite(value)) return null; const signed = Number.isFinite(previous) ? value - previous! : 0; previous = value; return { ...point, drivingParityDeltaValue: value, drivingParitySignedDelta: signed }; }).filter((point): point is Point => point !== null); }
+  if (failed && source.length) { minTime = num(source[0].time); maxTime = Math.max(minTime + 1, num(source.at(-1)!.time)); }
+  const dataMax = maxTime; if (failed && !compact) maxTime += Math.max(30_000, Math.min(600_000, (maxTime - minTime) * .015));
+  const timeSpan = Math.max(1, maxTime - minTime); const tickSpan = Math.max(1, dataMax - minTime);
+  const range = (items: Point[], fallback: Point[] = raw) => { if (!items.length) return fallback; const inside = items.filter((point) => num(point.time) > minTime && num(point.time) < maxTime); const beforeStart = items.filter((point) => num(point.time) <= minTime).at(-1) ?? items[0]; const beforeEnd = items.filter((point) => num(point.time) <= maxTime).at(-1) ?? beforeStart; const series = [{ ...beforeStart, time: minTime }, ...inside]; if (num(series.at(-1)!.time) < maxTime || num(beforeEnd.time) !== num(series.at(-1)!.time)) series.push({ ...beforeEnd, time: maxTime }); return series.filter((point, index, all) => !index || num(point.time) !== num(all[index - 1].time)); };
+  const fallback = range(points); const series = failed ? range(source, []) : [];
+  const timeline = compact ? compactTimeScale(failed && series.length ? series : fallback, minTime, maxTime) : null;
+  const displaySpan = timeline ? timeline.span : timeSpan; const displayTime = (time: number) => timeline ? timeline.project(time) : time - minTime;
+  const progress = (point: Point) => Math.max(0, Math.min(100, num(point.percent))); const value = failed ? failedValue : progress;
+  const visible = failed && series.length ? series.filter((point) => num(point.time) >= minTime && num(point.time) <= maxTime) : [];
+  const domain = failed && visible.length ? visible : raw; const values = domain.map(value).filter(Number.isFinite);
+  const rawMin = values.length ? Math.min(...values) : 0; const rawMax = values.length ? Math.max(...values) : 100;
+  let valueMin = 0; let valueMax = 100;
+  if (failed) { const spread = Math.max(1, rawMax - rawMin); if (delta) { const limit = Math.max(.00001, Math.abs(rawMin), Math.abs(rawMax)) * 1.16; valueMin = -limit; valueMax = limit; } else valueMax = rawMax + Math.max(1, spread * .04, rawMax * .05); if (valueMax <= valueMin) valueMax = valueMin + 1; }
+  const y = (number: number) => height - (Math.max(0, Math.min(valueMax, number)) / valueMax) * height;
+  const plotY = (number: number) => failed ? height - ((Math.max(valueMin, Math.min(valueMax, number)) - valueMin) / Math.max(Number.EPSILON, valueMax - valueMin)) * height : y(number);
+  const x = (time: number) => displayTime(time) / displaySpan * width;
+  const segments = (items: Point[]) => { const result: Point[][] = []; let current: Point[] = []; for (const point of items) { if (failed && point.drivingParityEventMarker === "baseline" && current.length) { result.push(current); current = []; } current.push(point); } if (current.length) result.push(current); return !failed || result.length < 2 ? result : result.filter((candidate, index) => index === result.length - 1 || candidate.some((point) => failedValue(point) > 0)); };
+  const path = (items: Point[], accessor: (point: Point) => number = value, yAccessor = plotY) => segments(items).map((segment) => { const [first, ...rest] = segment; const commands = [`M ${fixed(x(num(first.time)))} ${fixed(yAccessor(accessor(first)))}`]; let previous = first; for (const point of rest) { const px = fixed(x(num(point.time))); commands.push(`L ${px} ${fixed(yAccessor(accessor(previous)))}`, `L ${px} ${fixed(yAccessor(accessor(point)))}`); previous = point; } return commands.join(" "); }).join(" ");
+  const area = (items: Point[], ceiling = false) => segments(items).map((segment) => { const first = segment[0]; const last = segment.at(-1)!; return `${path(segment)} L ${fixed(x(num(last.time)))} ${ceiling ? "0.0" : fixed(plotY(valueMin))} L ${fixed(x(num(first.time)))} ${ceiling ? "0.0" : fixed(plotY(valueMin))} Z`; }).join(" ");
+  const ariaLabel = delta ? "Overall failed-sample deviation ratio over time" : failed ? "Failed state points over time" : "Completion percentage over time";
+  const className = [!compact ? "range-zoomable" : "", failed ? "failed-chart" : "", delta ? "delta-chart" : "", failed && !delta && series.length && failedValue(series.at(-1)!) <= 0 ? "goal-reached" : ""].filter(Boolean).join(" ") || undefined;
+  const primitives: DifferentialProgressChartPrimitive[] = []; const yTicks = delta ? [0, 1, 2, 3, 4].map((i) => valueMin + (valueMax - valueMin) * i / 4) : failed ? [0, 1, 2, 3, 4, 5].map((i) => valueMin + (valueMax - valueMin) * i / 5) : [0, 25, 50, 75, 100];
+  for (const [index, tick] of yTicks.entries()) { if (failed && (index === 0 || index === yTicks.length - 1)) continue; const tickY = plotY(tick); const labelY = Math.max(8, Math.min(height - 8, tickY)); primitives.push(element("line", { x1: "0", x2: String(width - (failed ? 36 : 0)), y1: String(tickY), y2: String(tickY) }, "grid-line")); if (!failed && tick === 0) continue; primitives.push(element("rect", { x: "0", y: String(labelY - 8), width: "44", height: "16" }, "label-backdrop")); primitives.push(element("text", { x: String(failed ? width - 4 : 4), y: String(labelY), "text-anchor": failed ? "end" : "start", "dominant-baseline": "central" }, "axis-label y-axis-label", delta ? ratio(tick) : failed ? axisNumber(tick) : `${Math.round(tick)}%`)); }
+  const xTicks = timeline ? timeline.ticks(6) : Array.from({ length: 6 }, (_, index) => minTime + tickSpan * index / 5);
+  const xGrid = (index: number) => element("line", { x1: String(width * index / 5), x2: String(width * index / 5), y1: "0", y2: "178" }, "grid-line x-grid-line");
+  const xLabel = (index: number, time: number) => element("text", { x: String(width * index / 5), y: "194", "text-anchor": "middle" }, "axis-label", clock(time));
+  const insertGridBeforeAreas = failed && series.length;
+  if (!failed) for (let index = 1; index < 5; index++) primitives.push(xGrid(index));
+  if (!failed) { primitives.push(element("path", { d: area(fallback) }, "progress-area"), element("path", { d: path(fallback, progress) }, "progress-line")); }
+  if (series.length) {
+    if (!delta) primitives.push(element("path", { d: area(series, true) }, "failed-fields-pass-area"));
+    if (insertGridBeforeAreas) for (let index = 1; index < 5; index++) primitives.push(xGrid(index));
+    if (!delta) primitives.push(element("path", { d: area(series) }, "failed-fields-area")); else primitives.push(element("line", { x1: "0", x2: String(width), y1: String(plotY(0)), y2: String(plotY(0)) }, "delta-zero-line"));
+    const percentages = delta ? [] : series.filter((point) => Number.isFinite(totalPercent(point)));
+    if (percentages.length) { const percentY = (number: number) => height - Math.max(0, Math.min(100, number)) / 100 * height; const latest = totalPercent(percentages.at(-1)!); primitives.push(element("path", { d: path(percentages, totalPercent, percentY) }, "failed-total-percent-line", undefined, [element("title", {}, undefined, `Failed total: ${latest.toFixed(1).replace(".0", "")}%`)])); }
+    const tickChildren: DifferentialProgressChartPrimitive[] = []; const plain: DifferentialProgressChartPrimitive[] = []; const improved: DifferentialProgressChartPrimitive[] = []; let previous: Point | null = null;
+    for (const [index, point] of source.filter((candidate) => num(candidate.time) >= minTime && num(candidate.time) <= dataMax && Number.isFinite(failedValue(candidate))).entries()) { const previousValue = previous ? failedValue(previous) : null; previous = point; const current = failedValue(point); const unchanged = delta ? num(point.drivingParitySignedDelta) === 0 : Number.isFinite(previousValue) && current === previousValue; const baseline = index === 0 || point.drivingParityEventMarker === "baseline"; const markerClass = ["improved", "worsened", "reverted"].includes(String(point.drivingParityEventMarker)) ? String(point.drivingParityEventMarker) : Number.isFinite(previousValue) && current < previousValue! ? "improved" : Number.isFinite(previousValue) && current > previousValue! ? "worsened" : ""; const hasMarker = !unchanged && !baseline && (markerClass === "improved" || markerClass === "worsened"); let center = plotY(current); if (hasMarker) { const worsening = markerClass === "worsened"; const available = worsening ? Math.max(0, 176 - center - 4) : Math.max(0, center - 6); const markerHeight = Math.min(10, Math.max(5, available)); const tip = worsening ? Math.min(176 - markerHeight, center + 4) : Math.max(2 + markerHeight, center - 4); center = (tip + (worsening ? tip + markerHeight : tip - markerHeight)) / 2; }
+      const title = `${clock(num(point.time))} · ${String(point.drivingParityEventTitle || "")}`;
+      if (index !== 0 && index !== source.filter((candidate) => num(candidate.time) >= minTime && num(candidate.time) <= dataMax && Number.isFinite(failedValue(candidate))).length - 1) tickChildren.push(element("line", { x1: fixed(x(num(point.time))), x2: fixed(x(num(point.time))), y1: fixed(center), y2: "200.0" }, `failed-run-tick${unchanged || point.drivingParityEventMarker === "reverted" ? " muted" : ""}`, undefined, [element("title", {}, undefined, title)]));
+      if (hasMarker) (markerClass === "improved" ? improved : plain).push(element("text", { x: fixed(x(num(point.time))), y: fixed(center) }, `failed-run-marker ${markerClass}`, markerClass === "worsened" ? "▲" : "▼", [element("title", {}, undefined, title)]));
+    }
+    if (tickChildren.length) primitives.push(element("g", {}, "failed-run-marker-tick-layer", undefined, tickChildren));
+    const latest = series.at(-1)!; const lineTitle = delta ? `Overall deviation: ${ratio(failedValue(latest))} (run change ${num(latest.drivingParitySignedDelta) > 0 ? "+" : ""}${ratio(num(latest.drivingParitySignedDelta || 0))})` : `Failed state points: ${Math.round(num(latest.drivingParityStateFailures || 0))}${Number.isFinite(num(latest.drivingParityFrames)) ? ` / ${Math.round(num(latest.drivingParityFrames))} frames` : ""} (${num(latest.drivingParityFailedStatePointPercent).toFixed(1)}% of ${Math.round(num(latest.drivingParityActiveComparablePoints || 0))} active points); failed fields: ${Math.round(num(latest.drivingParityFailedFields || 0))}/${Math.round(num(latest.drivingParityAllFields || 0))}`;
+    primitives.push(element("path", { d: path(series) }, "failed-fields-line", undefined, [element("title", {}, undefined, lineTitle)]));
+    for (let index = 1; index < 5; index++) primitives.push(xLabel(index, xTicks[index]));
+    if (plain.length || improved.length) primitives.push(element("g", {}, "failed-run-marker-layer", undefined, [...(plain.length ? [element("g", {}, "failed-run-marker-plain-layer", undefined, plain)] : []), ...(improved.length ? [element("g", {}, "failed-run-marker-improved-layer", undefined, improved)] : [])]));
+  } else if (failed) { for (let index = 1; index < 5; index++) { primitives.push(xGrid(index)); primitives.push(xLabel(index, xTicks[index])); } }
+  if (!failed) {
+    for (let index = 1; index < fallback.length; index++) {
+      const previous = fallback[index - 1]; const point = fallback[index]; const px = x(num(point.time)); const py = plotY(progress(point));
+      if (num(point.total) > num(previous.total)) { const markerHeight = Math.min(8, Math.max(5, Math.max(0, height - 2 - py - 8))); const tip = Math.min(height - 2 - markerHeight, py + 8); primitives.push(element("text", { x: fixed(px), y: fixed((tip + tip + markerHeight) / 2) }, "split-marker", "▲", [element("title", {}, undefined, `Split/add: ${num(point.total) - num(previous.total)} item${num(point.total) - num(previous.total) === 1 ? "" : "s"}`)])); }
+      if (num(point.done) > num(previous.done)) { const markerHeight = Math.min(10, Math.max(6, Math.max(0, py - 4 - 2))); const tip = Math.max(2 + markerHeight, py - 4); primitives.push(element("text", { x: fixed(px), y: fixed((tip + tip - markerHeight) / 2) }, "completion-marker", "▼")); }
+    }
+    const last = fallback.at(-1)!; primitives.push(element("circle", { cx: String(x(num(last.time))), cy: String(plotY(progress(last))), r: "4" }, "progress-dot")); for (let index = 1; index < 5; index++) primitives.push(xLabel(index, xTicks[index]));
+  }
+  return { root: { id: "progress-chart", viewBox: "0 0 640 200", ariaLabel, className, data: { "plot-left": "0", "plot-right": "640", "plot-top": "0", "plot-bottom": "200", "domain-min": String(minTime), "domain-max": String(maxTime), "time-scale": timeline ? "compact" : "all" } }, primitives };
+}
diff --git a/dashboard/src/oven/DomainNote/DomainNote.test.ts b/dashboard/src/oven/DomainNote/DomainNote.test.ts
new file mode 100644
index 0000000..0cbd83b
--- /dev/null
+++ b/dashboard/src/oven/DomainNote/DomainNote.test.ts
@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { DomainNote } from "./DomainNote";
+
+function FrozenDomainNote({ isTarget, rationale }) {
+  return createElement(
+    "div",
+    { className: "visual-parity-domain-note" },
+    createElement("strong", null, isTarget ? "Qualifying target" : "Diagnostic context"),
+    createElement("span", null, rationale),
+  );
+}
+
+test("DomainNote matches target and diagnostic labels", () => {
+  for (const props of [
+    { isTarget: true, rationale: "Exact zero tolerance." },
+    { isTarget: false, rationale: "Used for diagnosis." },
+  ]) {
+    assert.equal(renderToString(createElement(DomainNote, props)), renderToString(createElement(FrozenDomainNote, props)));
+  }
+});
diff --git a/dashboard/src/oven/DomainNote/DomainNote.tsx b/dashboard/src/oven/DomainNote/DomainNote.tsx
new file mode 100644
index 0000000..b78db9f
--- /dev/null
+++ b/dashboard/src/oven/DomainNote/DomainNote.tsx
@@ -0,0 +1,8 @@
+type DomainNoteProps = {
+  isTarget: boolean;
+  rationale: string;
+};
+
+export function DomainNote({ isTarget, rationale }: DomainNoteProps) {
+  return <div className="visual-parity-domain-note"><strong>{isTarget ? "Qualifying target" : "Diagnostic context"}</strong><span>{rationale}</span></div>;
+}
diff --git a/dashboard/src/oven/DomainNote/index.ts b/dashboard/src/oven/DomainNote/index.ts
new file mode 100644
index 0000000..013243f
--- /dev/null
+++ b/dashboard/src/oven/DomainNote/index.ts
@@ -0,0 +1 @@
+export { DomainNote } from "./DomainNote";
diff --git a/dashboard/src/oven/DomainTabs/DomainTabs.test.ts b/dashboard/src/oven/DomainTabs/DomainTabs.test.ts
new file mode 100644
index 0000000..dba645c
--- /dev/null
+++ b/dashboard/src/oven/DomainTabs/DomainTabs.test.ts
@@ -0,0 +1,33 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { DomainTabs } from "./DomainTabs";
+
+function FrozenDomainTabs({ tabs, activeId, onSelect }) {
+  return createElement(
+    "nav",
+    { "aria-label": "Visual parity domains", className: "visual-parity-domains" },
+    tabs.map((tab) => {
+      const current = tab.id === activeId;
+      return createElement(
+        "button",
+        { "aria-pressed": current, className: current ? "is-active" : "", key: tab.id, onClick: () => onSelect(tab.id), type: "button" },
+        createElement("span", null, tab.label),
+        createElement("small", null, tab.qualification, " · ", tab.failed ? `${tab.failed} fail` : "pass"),
+      );
+    }),
+  );
+}
+
+test("DomainTabs matches active and inactive domain buttons", () => {
+  const props = {
+    tabs: [
+      { id: "target", label: "Target", qualification: "target", failed: 0 },
+      { id: "context", label: "Context", qualification: "context", failed: 2 },
+    ],
+    activeId: "target",
+    onSelect: () => {},
+  };
+  assert.equal(renderToString(createElement(DomainTabs, props)), renderToString(createElement(FrozenDomainTabs, props)));
+});
diff --git a/dashboard/src/oven/DomainTabs/DomainTabs.tsx b/dashboard/src/oven/DomainTabs/DomainTabs.tsx
new file mode 100644
index 0000000..503019a
--- /dev/null
+++ b/dashboard/src/oven/DomainTabs/DomainTabs.tsx
@@ -0,0 +1,16 @@
+type DomainTab = {
+  id: string;
+  label: string;
+  qualification: string;
+  failed: number;
+};
+
+type DomainTabsProps = {
+  tabs: DomainTab[];
+  activeId: string;
+  onSelect: (id: string) => void;
+};
+
+export function DomainTabs({ tabs, activeId, onSelect }: DomainTabsProps) {
+  return <nav aria-label="Visual parity domains" className="visual-parity-domains">{tabs.map((tab) => { const current = tab.id === activeId; return <button aria-pressed={current} className={current ? "is-active" : ""} key={tab.id} onClick={() => onSelect(tab.id)} type="button"><span>{tab.label}</span><small>{tab.qualification} · {tab.failed ? `${tab.failed} fail` : "pass"}</small></button>; })}</nav>;
+}
diff --git a/dashboard/src/oven/DomainTabs/index.ts b/dashboard/src/oven/DomainTabs/index.ts
new file mode 100644
index 0000000..de7f694
--- /dev/null
+++ b/dashboard/src/oven/DomainTabs/index.ts
@@ -0,0 +1 @@
+export { DomainTabs } from "./DomainTabs";
diff --git a/dashboard/src/oven/FeedList/FeedList.test.ts b/dashboard/src/oven/FeedList/FeedList.test.ts
new file mode 100644
index 0000000..d09e81b
--- /dev/null
+++ b/dashboard/src/oven/FeedList/FeedList.test.ts
@@ -0,0 +1,41 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { FeedList } from "./FeedList";
+
+const heading = "<section class=\"streaming-diff-view\"><header class=\"streaming-diff-heading\"><h1>Streaming Diff</h1><p>Recent feeds are ordered by published activity time, not process liveness.</p></header>";
+
+test("FeedList preserves the loading state", () => {
+  assert.equal(renderToStaticMarkup(createElement(FeedList, { feeds: [], error: "", loading: true, showRepository: false })), `${heading}<p class="streaming-diff-message">Loading recent feeds.</p></section>`);
+});
+
+test("FeedList preserves the error state", () => {
+  assert.equal(renderToStaticMarkup(createElement(FeedList, { feeds: [], error: "Feed unavailable.", loading: false, showRepository: false })), `${heading}<p class="streaming-diff-message is-error">Feed unavailable.</p></section>`);
+});
+
+test("FeedList preserves the empty state", () => {
+  assert.equal(renderToStaticMarkup(createElement(FeedList, { feeds: [], error: "", loading: false, showRepository: false })), `${heading}<p class="streaming-diff-message">No recent feeds.</p></section>`);
+});
+
+test("FeedList preserves repository details when requested", () => {
+  const feed = {
+    identity: { logicalRepoKey: "repo-key", worktreeKey: "worktree-1", session: "session-1" },
+    updatedAt: "2026-07-18T13:14:15.000Z", href: "/ovens/streaming-diff/view?session=session-1", repoLabel: "Example repository",
+  };
+  const timestamp = new Date(feed.updatedAt).toLocaleString();
+  const markup = renderToStaticMarkup(createElement(FeedList, { feeds: [feed], error: "", loading: false, showRepository: true }));
+
+  assert.equal(markup, `${heading}<div class="streaming-diff-feed-list"><a class="streaming-diff-feed" href="${feed.href}"><span class="streaming-diff-feed-session">session-1</span><span class="streaming-diff-feed-worktree">repository Example repository</span><span class="streaming-diff-feed-worktree">worktree worktree-1</span><time class="streaming-diff-feed-time" dateTime="${feed.updatedAt}">${timestamp}</time></a></div></section>`);
+});
+
+test("FeedList omits repository details when not requested", () => {
+  const feed = {
+    identity: { logicalRepoKey: "repo-key", worktreeKey: "worktree-1", session: "session-1" },
+    updatedAt: "2026-07-18T13:14:15.000Z", href: "/ovens/streaming-diff/view?session=session-1", repoLabel: "Example repository",
+  };
+  const markup = renderToStaticMarkup(createElement(FeedList, { feeds: [feed], error: "", loading: false, showRepository: false }));
+
+  assert.equal(markup, `${heading}<div class="streaming-diff-feed-list"><a class="streaming-diff-feed" href="${feed.href}"><span class="streaming-diff-feed-session">session-1</span><span class="streaming-diff-feed-worktree">worktree worktree-1</span><time class="streaming-diff-feed-time" dateTime="${feed.updatedAt}">${new Date(feed.updatedAt).toLocaleString()}</time></a></div></section>`);
+  assert.doesNotMatch(markup, /repository Example repository/u);
+});
diff --git a/dashboard/src/oven/FeedList/FeedList.tsx b/dashboard/src/oven/FeedList/FeedList.tsx
new file mode 100644
index 0000000..a89db77
--- /dev/null
+++ b/dashboard/src/oven/FeedList/FeedList.tsx
@@ -0,0 +1,26 @@
+import { streamingDiffFeedKey } from "@lib";
+import type { StreamingDiffFeed } from "@lib";
+import { timestamp } from "../utils/streaming-diff-time";
+
+export function FeedList({ feeds, error, loading, showRepository }: { feeds: StreamingDiffFeed[]; error: string; loading: boolean; showRepository: boolean }) {
+  return (
+    <section className="streaming-diff-view">
+      <header className="streaming-diff-heading">
+        <h1>Streaming Diff</h1>
+        <p>Recent feeds are ordered by published activity time, not process liveness.</p>
+      </header>
+      {error ? <p className="streaming-diff-message is-error">{error}</p> : loading ? <p className="streaming-diff-message">Loading recent feeds.</p> : !feeds.length ? <p className="streaming-diff-message">No recent feeds.</p> : (
+        <div className="streaming-diff-feed-list">
+          {feeds.map((feed) => (
+            <a className="streaming-diff-feed" href={feed.href} key={streamingDiffFeedKey(feed)}>
+              <span className="streaming-diff-feed-session">{feed.identity.session}</span>
+              {showRepository && <span className="streaming-diff-feed-worktree">repository {feed.repoLabel}</span>}
+              <span className="streaming-diff-feed-worktree">worktree {feed.identity.worktreeKey}</span>
+              <time className="streaming-diff-feed-time" dateTime={feed.updatedAt ?? undefined}>{timestamp(feed.updatedAt)}</time>
+            </a>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
diff --git a/dashboard/src/oven/FeedList/index.ts b/dashboard/src/oven/FeedList/index.ts
new file mode 100644
index 0000000..e679b8d
--- /dev/null
+++ b/dashboard/src/oven/FeedList/index.ts
@@ -0,0 +1 @@
+export { FeedList } from "./FeedList";
diff --git a/dashboard/src/oven/FieldMiniChart/FieldMiniChart.test.ts b/dashboard/src/oven/FieldMiniChart/FieldMiniChart.test.ts
new file mode 100644
index 0000000..ff6e8fe
--- /dev/null
+++ b/dashboard/src/oven/FieldMiniChart/FieldMiniChart.test.ts
@@ -0,0 +1,87 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { chart } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent } from "../test-support/dom-normalize";
+import type { FieldMiniChartField, FieldMiniChartSample } from "./field-mini-chart-geometry";
+import { FieldMiniChart } from "./FieldMiniChart";
+
+const {
+  differentialTestingAllPassingPayload,
+  differentialTestingComparableNoChangedPayload,
+  differentialTestingComparableTelemetryPayload,
+  differentialTestingIncomparableTelemetryPayload,
+  differentialTestingPaginatedMidPayload,
+  differentialTestingPaginatedPayload,
+  differentialTestingPayload,
+  performanceTracingPayload,
+} = await import(pathToFileURL(resolve(process.cwd(), "dashboard/src/oven/differential-testing-render/golden-harness.mjs")).href);
+
+const payloadFactories = [
+  ["base", differentialTestingPayload],
+  ["comparable telemetry", differentialTestingComparableTelemetryPayload],
+  ["comparable no changed", differentialTestingComparableNoChangedPayload],
+  ["paginated", differentialTestingPaginatedPayload],
+  ["paginated mid", differentialTestingPaginatedMidPayload],
+  ["all passing", differentialTestingAllPassingPayload],
+  ["incomparable telemetry", differentialTestingIncomparableTelemetryPayload],
+  ["performance tracing", performanceTracingPayload],
+] as const;
+
+function syntheticField(samples: FieldMiniChartSample[], sampleLabels?: (string | number)[]): FieldMiniChartField {
+  return { samples, sampleLabels };
+}
+
+const syntheticCases: Array<[string, FieldMiniChartField]> = [
+  ["single sample", syntheticField([[7, 1, 2, 1]], ["first"])],
+  ["all-null values", syntheticField([[0, null, null, 2], [1, null, null, 2], [2, null, null, 2]])],
+  ["categorical strings", syntheticField([[0, "idle", "busy", 1], [1, "busy", "busy", 0], [2, "idle", "idle", 0], [3, "busy", "idle", 1]])],
+  ["boolean values", syntheticField([[0, false, false, 0], [1, true, false, 1], [2, true, true, 0], [3, false, true, 1]])],
+  ["all-match values", syntheticField([[0, 0, 0, 0], [1, 1.5, 1.5, 0], [2, 3, 3, 0], [3, 2, 2, 0]])],
+  ["all-fail values", syntheticField([[0, 0, 1, 1], [1, 1, 3, 1], [2, 2, 5, 1], [3, 3, 7, 1]])],
+  ["multiple separated reference-failing runs", syntheticField([[0, 0, 0, 1], [1, 10, 11, 0], [2, -3, -2, 0], [3, 8, 7, 0], [4, 1, 2, 1]])],
+  ["all-match reference fallback", syntheticField([[0, 1, null, 0], [1, 2, null, 0]])],
+  ["internal null path split", syntheticField([[0, 1, 1, 0], [1, null, null, 0], [2, 3, 3, 0]])],
+  ["alternating failure intervals", syntheticField([
+    [0, 0, 0, 0], [1, 1, 2, 1], [2, 2, 2, 0], [3, 3, 5, 1], [4, 4, 4, 0], [5, 5, 8, 1], [6, 6, 6, 0],
+  ], ["zero", 1, "two", 3, "four", 5, "six"])],
+];
+
+test("FieldMiniChart is DOM-equivalent to the DT chart oracle", () => {
+  let datapoints = 0;
+  for (const [payloadName, makePayload] of payloadFactories) {
+    const payload = makePayload();
+    for (const field of payload.fields) {
+      for (const showFrameLabels of [true, false]) {
+        for (const chartMode of ["value", "delta"]) {
+          const actual = renderToStaticMarkup(createElement(FieldMiniChart, { field, showFrameLabels, chartMode }));
+          const expected = chart(field, showFrameLabels, chartMode);
+          assertDomEquivalent(actual, expected, `${payloadName}/${field.id}/${chartMode}/${showFrameLabels}`);
+          datapoints += 1;
+        }
+      }
+    }
+  }
+
+  for (const [caseName, field] of syntheticCases) {
+    for (const showFrameLabels of [true, false]) {
+      for (const chartMode of ["value", "delta"]) {
+        const actual = renderToStaticMarkup(createElement(FieldMiniChart, { field, showFrameLabels, chartMode }));
+        const expected = chart(field, showFrameLabels, chartMode);
+        assertDomEquivalent(actual, expected, `${caseName}/${chartMode}/${showFrameLabels}`);
+        if (caseName === "multiple separated reference-failing runs" && chartMode === "value") {
+          const referenceFailingOffsets = [...expected.matchAll(/stroke="#61d394" stroke-width="1\.25" stroke-dasharray="5 4" stroke-dashoffset="([^"]+)"/g)]
+            .map((match) => match[1]);
+          assert.deepEqual(referenceFailingOffsets, ["0.00", "-2.18"], `${caseName}/${showFrameLabels} should have two dashed reference runs`);
+          assert.ok(referenceFailingOffsets.some((offset) => Number(offset) !== 0), `${caseName}/${showFrameLabels} should have a nonzero dash offset`);
+        }
+        datapoints += 1;
+      }
+    }
+  }
+
+  assert.equal(datapoints, 444, "oracle battery size");
+});
diff --git a/dashboard/src/oven/FieldMiniChart/FieldMiniChart.tsx b/dashboard/src/oven/FieldMiniChart/FieldMiniChart.tsx
new file mode 100644
index 0000000..9503f38
--- /dev/null
+++ b/dashboard/src/oven/FieldMiniChart/FieldMiniChart.tsx
@@ -0,0 +1,22 @@
+import { buildFieldMiniChart, FIELD_MINI_CHART_HEIGHT, FIELD_MINI_CHART_WIDTH } from "./field-mini-chart-geometry";
+import type { FieldMiniChartField } from "./field-mini-chart-geometry";
+
+export type FieldMiniChartProps = {
+  field: FieldMiniChartField;
+  showFrameLabels: boolean;
+  chartMode: string;
+};
+
+export function FieldMiniChart({ field, showFrameLabels, chartMode }: FieldMiniChartProps) {
+  const geometry = buildFieldMiniChart(field, showFrameLabels, chartMode);
+  if (geometry.empty) return <div className="plot" />;
+  return <div className="plot">
+    <svg viewBox={`0 0 ${FIELD_MINI_CHART_WIDTH} ${FIELD_MINI_CHART_HEIGHT}`} preserveAspectRatio="none">
+      {geometry.bands.map((band, index) => <rect key={`band-${index}`} x={band.x} y={band.y} width={band.width} height={band.height} fill={band.fill} opacity={band.opacity} />)}
+      {geometry.ticks.map((tick, index) => <line key={`tick-${index}`} className="frame-tick" x1={tick.x1} x2={tick.x2} y1={tick.y1} y2={tick.y2} stroke={tick.stroke} strokeWidth={tick.strokeWidth} vectorEffect={tick.vectorEffect} shapeRendering={tick.shapeRendering} />)}
+      {geometry.lines.map((line, index) => <line key={`line-${index}`} x1={line.x1} x2={line.x2} y1={line.y1} y2={line.y2} stroke={line.stroke} strokeWidth={line.strokeWidth} strokeDasharray={line.strokeDasharray} opacity={line.opacity} vectorEffect={line.vectorEffect} />)}
+      {geometry.paths.map((path, index) => <path key={`path-${index}`} d={path.d} fill={path.fill} stroke={path.stroke} strokeWidth={path.strokeWidth} strokeDasharray={path.strokeDasharray} strokeDashoffset={path.strokeDashoffset} opacity={path.opacity} vectorEffect={path.vectorEffect} />)}
+    </svg>
+    {geometry.tickLabels.map((label, index) => <span key={`label-${index}`} className="frame-tick-label" style={{ left: `${label.left}%` }}>{label.text}</span>)}
+  </div>;
+}
diff --git a/dashboard/src/oven/FieldMiniChart/field-mini-chart-geometry.ts b/dashboard/src/oven/FieldMiniChart/field-mini-chart-geometry.ts
new file mode 100644
index 0000000..536a3d0
--- /dev/null
+++ b/dashboard/src/oven/FieldMiniChart/field-mini-chart-geometry.ts
@@ -0,0 +1,273 @@
+export const FIELD_MINI_CHART_WIDTH = 900;
+export const FIELD_MINI_CHART_HEIGHT = 58;
+export const GREEN = "#61d394";
+export const RED = "#ef4444";
+
+export type FieldMiniChartSample = [number, unknown, unknown, number];
+
+export type FieldMiniChartField = {
+  samples: FieldMiniChartSample[];
+  sampleLabels?: (string | number)[];
+};
+
+export type FieldMiniChartBand = {
+  x: string;
+  y: "0";
+  width: string;
+  height: string;
+  fill: string;
+  opacity: string;
+};
+
+export type FieldMiniChartLine = {
+  x1: string;
+  x2: string;
+  y1: string;
+  y2: string;
+  stroke: string;
+  strokeWidth: string;
+  strokeDasharray?: string;
+  opacity?: string;
+  vectorEffect: "non-scaling-stroke";
+};
+
+export type FieldMiniChartPath = {
+  d: string;
+  fill: "none";
+  stroke: string;
+  strokeWidth: string;
+  opacity: string;
+  vectorEffect: "non-scaling-stroke";
+  strokeDasharray?: string;
+  strokeDashoffset?: string;
+};
+
+export type FieldMiniChartTick = {
+  x1: string;
+  x2: string;
+  y1: string;
+  y2: string;
+  stroke: "rgba(168, 168, 168, 0.075)";
+  strokeWidth: "1";
+  vectorEffect: "non-scaling-stroke";
+  shapeRendering: "crispEdges";
+};
+
+export type FieldMiniChartTickLabel = {
+  left: string;
+  text: string;
+};
+
+export type FieldMiniChartGeometry = {
+  mode: "value" | "delta";
+  empty: boolean;
+  bands: FieldMiniChartBand[];
+  lines: FieldMiniChartLine[];
+  paths: FieldMiniChartPath[];
+  ticks: FieldMiniChartTick[];
+  tickLabels: FieldMiniChartTickLabel[];
+};
+
+type PlotPoint = [number, number] | null;
+type Row = { tick: number; reference: number | null; candidate: number | null; state: number };
+
+function plotValue(raw: unknown, categories: Map<string, number>): number | null {
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw === "boolean") return raw ? 1 : 0;
+  if (typeof raw === "string") {
+    if (!categories.has(raw)) categories.set(raw, categories.size);
+    return categories.get(raw) ?? null;
+  }
+  return null;
+}
+
+function pathStrings(points: PlotPoint[]): string[] {
+  const result: string[] = [];
+  let current = "";
+  for (const point of points) {
+    if (!point) {
+      if (current) result.push(current);
+      current = "";
+      continue;
+    }
+    current += `${current ? "L" : "M"}${point[0].toFixed(2)},${point[1].toFixed(2)}`;
+  }
+  if (current) result.push(current);
+  return result;
+}
+
+function segment(start: [number, number], end: [number, number], trimStart = 0, trimEnd = 0) {
+  let [x1, y1] = start;
+  let [x2, y2] = end;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const length = Math.max(Math.hypot(dx, dy), 0.000001);
+  const first = Math.min(trimStart, length / 2);
+  const last = Math.min(trimEnd, length / 2);
+  x1 += dx / length * first;
+  y1 += dy / length * first;
+  x2 -= dx / length * last;
+  y2 -= dy / length * last;
+  return {
+    path: `M${x1.toFixed(1)},${y1.toFixed(1)}L${x2.toFixed(1)},${y2.toFixed(1)}`,
+    length: Math.hypot(x2 - x1, y2 - y1),
+    x2,
+    y2,
+  };
+}
+
+export function buildFieldMiniChart(field: FieldMiniChartField, showFrameLabels: boolean, chartMode: string): FieldMiniChartGeometry {
+  const mode = chartMode === "delta" ? "delta" : "value";
+  const categories = new Map<string, number>();
+  const rows: Row[] = field.samples.map(([tick, reference, candidate, state]) => ({
+    tick,
+    reference: plotValue(reference, categories),
+    candidate: plotValue(candidate, categories),
+    state,
+  }));
+  const x = (index: number) => rows.length <= 1 ? 0 : index / (rows.length - 1) * FIELD_MINI_CHART_WIDTH;
+  const exactFailure = (index: number) => rows[index] ? rows[index].state !== 0 : false;
+  const intervalFails = (index: number) => exactFailure(index) || exactFailure(index + 1);
+  const frameStep = (() => {
+    if (rows.length <= 1) return 0;
+    const raw = Math.max(1, rows.length / 10);
+    const magnitude = 10 ** Math.floor(Math.log10(raw));
+    for (const multiplier of [1, 2, 2.5, 5, 10]) {
+      const step = Math.max(1, Math.round(multiplier * magnitude));
+      if (step >= raw) return step;
+    }
+    return 1;
+  })();
+  const tickIndexes: number[] = [];
+  for (let index = frameStep; index < rows.length - 1; index += frameStep * 2) tickIndexes.push(index);
+  const ticks: FieldMiniChartTick[] = tickIndexes.map((index) => ({
+    x1: x(index).toFixed(1),
+    x2: x(index).toFixed(1),
+    y1: showFrameLabels ? "13" : "0",
+    y2: String(FIELD_MINI_CHART_HEIGHT),
+    stroke: "rgba(168, 168, 168, 0.075)",
+    strokeWidth: "1",
+    vectorEffect: "non-scaling-stroke",
+    shapeRendering: "crispEdges",
+  }));
+  const tickLabels: FieldMiniChartTickLabel[] = showFrameLabels
+    ? tickIndexes.map((index) => ({
+      left: (index / Math.max(1, rows.length - 1) * 100).toFixed(4),
+      text: String(field.sampleLabels?.[index] || Math.round(rows[index].tick)),
+    }))
+    : [];
+  const bands = (failed: boolean, points: PlotPoint[]) => {
+    const result: FieldMiniChartBand[] = [];
+    for (let index = 0; index < rows.length - 1; index += 1) {
+      if (intervalFails(index) !== failed || !points[index] || !points[index + 1]) continue;
+      const start = index;
+      while (index + 1 < rows.length - 1 && intervalFails(index + 1) === failed && points[index + 1] && points[index + 2]) index += 1;
+      result.push({
+        x: x(start).toFixed(1),
+        y: "0",
+        width: Math.max(1, x(index + 1) - x(start)).toFixed(1),
+        height: String(FIELD_MINI_CHART_HEIGHT),
+        fill: failed ? RED : GREEN,
+        opacity: failed ? ".14" : ".10",
+      });
+    }
+    return result;
+  };
+
+  if (mode === "delta") {
+    const values = rows.map((row) => row.reference === null || row.candidate === null ? null : row.candidate - row.reference);
+    const finite = values.filter((value): value is number => Number.isFinite(value));
+    if (!finite.length) return { mode, empty: true, bands: [], lines: [], paths: [], ticks: [], tickLabels: [] };
+    const maxAbs = Math.max(0.000001, ...finite.map((entry) => Math.abs(entry)));
+    const limit = maxAbs + Math.max(maxAbs * 0.16, 0.000001);
+    const y = (entry: number) => FIELD_MINI_CHART_HEIGHT - (entry + limit) / (limit * 2) * FIELD_MINI_CHART_HEIGHT;
+    const points = values.map((entry, index): PlotPoint => entry === null ? null : [x(index), y(entry)]);
+    const passed: string[] = [];
+    const failed: string[] = [];
+    for (let index = 0; index < rows.length - 1; index += 1) {
+      if (!points[index] || !points[index + 1]) continue;
+      const isFailed = intervalFails(index);
+      const line = segment(
+        points[index],
+        points[index + 1],
+        !isFailed && index > 0 && intervalFails(index - 1) ? 1.2 : 0,
+        !isFailed && index + 1 < rows.length - 1 && intervalFails(index + 1) ? 1.2 : 0,
+      ).path;
+      (isFailed ? failed : passed).push(line);
+    }
+    return {
+      mode,
+      empty: false,
+      bands: [...bands(false, points), ...bands(true, points)],
+      lines: [{ x1: "0", x2: String(FIELD_MINI_CHART_WIDTH), y1: String(y(0)), y2: String(y(0)), stroke: GREEN, strokeWidth: "1.05", strokeDasharray: "5 4", opacity: ".58", vectorEffect: "non-scaling-stroke" }],
+      paths: [
+        ...(passed.length ? [{ d: passed.join(" "), fill: "none" as const, stroke: GREEN, strokeWidth: "1.55", opacity: ".8", vectorEffect: "non-scaling-stroke" as const }] : []),
+        ...(failed.length ? [{ d: failed.join(" "), fill: "none" as const, stroke: RED, strokeWidth: "1.6", opacity: ".8", vectorEffect: "non-scaling-stroke" as const }] : []),
+      ],
+      ticks,
+      tickLabels,
+    };
+  }
+
+  const finite = rows.flatMap((row) => [row.reference, row.candidate]).filter((value): value is number => Number.isFinite(value));
+  const min = Math.min(...finite, 0);
+  const max = Math.max(...finite, 0);
+  const pad = Math.max((max - min) * 0.16, Math.abs(max || min || 1) * 0.03, 0.000001);
+  const low = min - pad;
+  const high = max + pad;
+  const span = Math.max(high - low, 0.000001);
+  const y = (entry: number) => FIELD_MINI_CHART_HEIGHT - (entry - low) / span * FIELD_MINI_CHART_HEIGHT;
+  const reference: PlotPoint[] = rows.map((row, index) => row.reference === null ? null : [x(index), y(row.reference)]);
+  const candidate: PlotPoint[] = rows.map((row, index) => row.candidate === null ? null : [x(index), y(row.candidate)]);
+  const allMatch = !rows.some((_, index) => exactFailure(index));
+  if (allMatch) {
+    const match = pathStrings(candidate).length ? pathStrings(candidate) : pathStrings(reference);
+    return {
+      mode,
+      empty: false,
+      bands: bands(false, candidate),
+      lines: [],
+      paths: match.map((d) => ({ d, fill: "none", stroke: GREEN, strokeWidth: "1.5", opacity: ".8", vectorEffect: "non-scaling-stroke" })),
+      ticks,
+      tickLabels,
+    };
+  }
+
+  const candidatePassing: string[] = [];
+  const candidateFailing: string[] = [];
+  const referenceFailing: { path: string; offset: number }[] = [];
+  let referenceLength = 0;
+  let previousReferenceFailingIndex = -2;
+  for (let index = 0; index < rows.length - 1; index += 1) {
+    const failed = intervalFails(index);
+    const trimStart = !failed && index > 0 && intervalFails(index - 1) ? 1.2 : 0;
+    const trimEnd = !failed && index + 1 < rows.length - 1 && intervalFails(index + 1) ? 1.2 : 0;
+    if (candidate[index] && candidate[index + 1]) (failed ? candidateFailing : candidatePassing).push(segment(candidate[index], candidate[index + 1], trimStart, trimEnd).path);
+    if (failed && reference[index] && reference[index + 1]) {
+      const line = segment(reference[index], reference[index + 1], trimStart, trimEnd);
+      if (previousReferenceFailingIndex === index - 1) {
+        const previous = referenceFailing.at(-1);
+        if (previous) previous.path += `L${line.x2.toFixed(1)},${line.y2.toFixed(1)}`;
+      } else {
+        referenceFailing.push({ path: line.path, offset: -(referenceLength % 9) });
+      }
+      referenceLength += line.length;
+      previousReferenceFailingIndex = index;
+    } else {
+      previousReferenceFailingIndex = -2;
+    }
+  }
+  return {
+    mode,
+    empty: false,
+    bands: [...bands(false, candidate), ...bands(true, candidate)],
+    lines: [],
+    paths: [
+      ...(candidatePassing.length ? [{ d: candidatePassing.join(" "), fill: "none" as const, stroke: GREEN, strokeWidth: "1.5", opacity: ".8", vectorEffect: "non-scaling-stroke" as const }] : []),
+      ...(candidateFailing.length ? [{ d: candidateFailing.join(" "), fill: "none" as const, stroke: RED, strokeWidth: "1.6", opacity: ".8", vectorEffect: "non-scaling-stroke" as const }] : []),
+      ...referenceFailing.map((line) => ({ d: line.path, fill: "none" as const, stroke: GREEN, strokeWidth: "1.25", strokeDasharray: "5 4", strokeDashoffset: line.offset.toFixed(2), opacity: ".8", vectorEffect: "non-scaling-stroke" as const })),
+    ],
+    ticks,
+    tickLabels,
+  };
+}
diff --git a/dashboard/src/oven/FieldMiniChart/index.ts b/dashboard/src/oven/FieldMiniChart/index.ts
new file mode 100644
index 0000000..a5fb254
--- /dev/null
+++ b/dashboard/src/oven/FieldMiniChart/index.ts
@@ -0,0 +1,13 @@
+export { FieldMiniChart } from "./FieldMiniChart";
+export { buildFieldMiniChart } from "./field-mini-chart-geometry";
+export type {
+  FieldMiniChartBand,
+  FieldMiniChartField,
+  FieldMiniChartGeometry,
+  FieldMiniChartLine,
+  FieldMiniChartPath,
+  FieldMiniChartSample,
+  FieldMiniChartTick,
+  FieldMiniChartTickLabel,
+} from "./field-mini-chart-geometry";
+export type { FieldMiniChartProps } from "./FieldMiniChart";
diff --git a/dashboard/src/oven/FieldToolbar/FieldToolbar.test.ts b/dashboard/src/oven/FieldToolbar/FieldToolbar.test.ts
new file mode 100644
index 0000000..2722651
--- /dev/null
+++ b/dashboard/src/oven/FieldToolbar/FieldToolbar.test.ts
@@ -0,0 +1,92 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { differentialTelemetryAvailability } from "../differential-testing-render/differential-testing-renderer.js";
+import { assertDomEquivalent, extractById } from "../test-support/dom-normalize";
+import { FieldToolbar, type FieldToolbarProps } from "./FieldToolbar";
+
+const goldenDir = resolve("dashboard/src/oven/differential-testing-render/goldens");
+const goldenHarnessPath = resolve("dashboard/src/oven/differential-testing-render/golden-harness.mjs");
+const CHANGED_REASON = "Changed is unavailable until comparable transition telemetry is published.";
+
+function render(props: FieldToolbarProps): string {
+  return renderToStaticMarkup(createElement(FieldToolbar, props));
+}
+
+function expectedToolbar({ chart, sortChanged, changedUnavailable, changedReason, filterFailing }: {
+  chart: "current" | "delta";
+  sortChanged: boolean;
+  changedUnavailable: boolean;
+  changedReason: string;
+  filterFailing: boolean;
+}): string {
+  return `<div id="driving-parity-controls" class="driving-parity-controls">
+    <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+    <span class="control-sep" aria-hidden="true">|</span>
+    <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+      <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="${String(chart === "current")}">Value</button>
+      <span class="sep" aria-hidden="true">·</span>
+      <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="${String(chart === "delta")}">Delta</button>
+    </div>
+    <span class="control-sep" aria-hidden="true">|</span>
+    <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+      <button type="button" data-driving-parity-sort="improved" aria-pressed="${String(sortChanged)}"${changedUnavailable ? ` disabled title="${changedReason}"` : ""}>Changed</button>
+    </div>
+    <span class="control-sep" aria-hidden="true">|</span>
+    <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+      <button type="button" data-driving-parity-filter="failing" aria-pressed="${String(filterFailing)}">Failed</button>
+    </div>
+  </div>`;
+}
+
+for (const chart of ["current", "delta"] as const) {
+  for (const sortChanged of [false, true]) {
+    for (const changedUnavailable of [false, true]) {
+      for (const filterFailing of [false, true]) {
+        test(`FieldToolbar renders chart=${chart}, sortChanged=${sortChanged}, changedUnavailable=${changedUnavailable}, filterFailing=${filterFailing}`, () => {
+          const props: FieldToolbarProps = {
+            chart,
+            sort: sortChanged ? "changed" : "default",
+            filter: filterFailing ? "failing" : "all",
+            changedUnavailable,
+            changedReason: CHANGED_REASON,
+            onSearchInput: () => {},
+            onSelectChart: () => {},
+            onToggleSort: () => {},
+            onToggleFilter: () => {},
+          };
+          const actual = render(props);
+          assertDomEquivalent(actual, expectedToolbar({ chart, sortChanged, changedUnavailable, changedReason: CHANGED_REASON, filterFailing }));
+          assert.doesNotMatch(actual, /\bvalue=/u, "the search input must not render a value attribute");
+        });
+      }
+    }
+  }
+}
+
+test("FieldToolbar matches documented DT state in selected frozen goldens", async () => {
+  const harness = await import(goldenHarnessPath);
+  const states = [
+    ["dt-main", harness.differentialTestingPayload, { chart: "delta", filter: "all", sort: "default" }],
+    ["dt-comparable-telemetry", harness.differentialTestingComparableTelemetryPayload, { chart: "delta", filter: "all", sort: "changed" }],
+    ["dt-no-match", harness.differentialTestingAllPassingPayload, { chart: "delta", filter: "failing", sort: "default" }],
+    ["dt-chart-current-failed", harness.differentialTestingPayload, { chart: "current", filter: "all", sort: "default" }],
+  ] as const;
+
+  for (const [name, payloadBuilder, state] of states) {
+    const payload = payloadBuilder();
+    const telemetryAvailability = differentialTelemetryAvailability(payload);
+    const props: FieldToolbarProps = {
+      chart: state.chart,
+      sort: state.sort,
+      filter: state.filter,
+      changedUnavailable: telemetryAvailability.status !== "comparable",
+      changedReason: telemetryAvailability.reason,
+    };
+    const golden = readFileSync(resolve(goldenDir, `${name}.html`), "utf8");
+    assertDomEquivalent(render(props), extractById(golden, "driving-parity-controls"), `${name} toolbar differs`);
+  }
+});
diff --git a/dashboard/src/oven/FieldToolbar/FieldToolbar.tsx b/dashboard/src/oven/FieldToolbar/FieldToolbar.tsx
new file mode 100644
index 0000000..0af986a
--- /dev/null
+++ b/dashboard/src/oven/FieldToolbar/FieldToolbar.tsx
@@ -0,0 +1,63 @@
+import type { FormEvent } from "react";
+import { ToggleGroup } from "../ToggleGroup/ToggleGroup";
+
+export type ChartMode = "current" | "delta";
+
+export type FieldToolbarProps = {
+  chart: ChartMode;
+  sort: string;
+  filter: string;
+  changedUnavailable: boolean;
+  changedReason: string;
+  onSearchInput?: (value: string) => void;
+  onSelectChart?: (mode: ChartMode) => void;
+  onToggleSort?: () => void;
+  onToggleFilter?: () => void;
+};
+
+function searchInputHandler(onSearchInput: FieldToolbarProps["onSearchInput"]) {
+  return onSearchInput ? (event: FormEvent<HTMLInputElement>) => onSearchInput(event.currentTarget.value) : undefined;
+}
+
+export function FieldToolbar({
+  chart,
+  sort,
+  filter,
+  changedUnavailable,
+  changedReason,
+  onSearchInput,
+  onSelectChart,
+  onToggleSort,
+  onToggleFilter,
+}: FieldToolbarProps) {
+  return <div id="driving-parity-controls" className="driving-parity-controls">
+    <input
+      id="driving-parity-field-search"
+      type="search"
+      placeholder="Search Fields..."
+      aria-label="Differential Testing search fields"
+      onInput={searchInputHandler(onSearchInput)}
+    />
+    <span className="control-sep" aria-hidden="true">|</span>
+    <ToggleGroup id="driving-parity-chart-toggle" className="chart-toggle differential-tabs" ariaLabel="Differential Testing chart mode">
+      <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed={chart === "current"} onClick={() => onSelectChart?.("current")}>Value</button>
+      <span className="sep" aria-hidden="true">·</span>
+      <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed={chart === "delta"} onClick={() => onSelectChart?.("delta")}>Delta</button>
+    </ToggleGroup>
+    <span className="control-sep" aria-hidden="true">|</span>
+    <ToggleGroup id="driving-parity-sort-toggle" className="chart-toggle sort-toggle differential-tabs" ariaLabel="Differential Testing sort">
+      <button
+        type="button"
+        data-driving-parity-sort="improved"
+        aria-pressed={sort === "changed"}
+        disabled={changedUnavailable || undefined}
+        title={changedUnavailable ? changedReason : undefined}
+        onClick={onToggleSort}
+      >Changed</button>
+    </ToggleGroup>
+    <span className="control-sep" aria-hidden="true">|</span>
+    <ToggleGroup id="driving-parity-filter-toggle" className="chart-toggle filter-toggle differential-tabs" ariaLabel="Differential Testing field filter">
+      <button type="button" data-driving-parity-filter="failing" aria-pressed={filter === "failing"} onClick={onToggleFilter}>Failed</button>
+    </ToggleGroup>
+  </div>;
+}
diff --git a/dashboard/src/oven/FieldToolbar/index.ts b/dashboard/src/oven/FieldToolbar/index.ts
new file mode 100644
index 0000000..222f15e
--- /dev/null
+++ b/dashboard/src/oven/FieldToolbar/index.ts
@@ -0,0 +1,2 @@
+export { FieldToolbar } from "./FieldToolbar";
+export type { ChartMode, FieldToolbarProps } from "./FieldToolbar";
diff --git a/dashboard/src/oven/FileDiff/FileDiff.test.ts b/dashboard/src/oven/FileDiff/FileDiff.test.ts
new file mode 100644
index 0000000..5026e3c
--- /dev/null
+++ b/dashboard/src/oven/FileDiff/FileDiff.test.ts
@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { FileDiff } from "./FileDiff";
+
+test("FileDiff preserves a chip-kind file and its metadata", () => {
+  const markup = renderToStaticMarkup(createElement(FileDiff, {
+    file: { path: "assets/logo.png", kind: "binary", meta: { reason: "Generated asset", bytes: 128 } },
+  }));
+
+  assert.equal(markup, "<section class=\"streaming-diff-file\"><div class=\"streaming-diff-file-head\"><code>assets/logo.png</code><span data-slot=\"badge\" data-variant=\"outline\" class=\"ui-badge ui-badge--outline\">binary</span></div><p class=\"streaming-diff-file-meta\">Generated asset · 128 bytes</p></section>");
+});
+
+test("FileDiff preserves unified text content", () => {
+  const markup = renderToStaticMarkup(createElement(FileDiff, {
+    file: { path: "src/app.ts", kind: "modified", diff: "@@ -1 +1 @@\n-old\n+new" },
+  }));
+
+  assert.equal(markup, "<section class=\"streaming-diff-file\"><div class=\"streaming-diff-file-head\"><code>src/app.ts</code><span data-slot=\"badge\" data-variant=\"secondary\" class=\"ui-badge ui-badge--secondary\">modified</span></div><pre class=\"streaming-diff-unified\">@@ -1 +1 @@\n-old\n+new</pre></section>");
+});
+
+test("FileDiff reports unavailable content for a text file without a diff", () => {
+  const markup = renderToStaticMarkup(createElement(FileDiff, {
+    file: { path: "src/app.ts", kind: "modified" },
+  }));
+
+  assert.equal(markup, "<section class=\"streaming-diff-file\"><div class=\"streaming-diff-file-head\"><code>src/app.ts</code><span data-slot=\"badge\" data-variant=\"secondary\" class=\"ui-badge ui-badge--secondary\">modified</span></div><p class=\"streaming-diff-file-meta\">Diff content is unavailable.</p></section>");
+});
diff --git a/dashboard/src/oven/FileDiff/FileDiff.tsx b/dashboard/src/oven/FileDiff/FileDiff.tsx
new file mode 100644
index 0000000..064cc83
--- /dev/null
+++ b/dashboard/src/oven/FileDiff/FileDiff.tsx
@@ -0,0 +1,17 @@
+import { Badge } from "@layout";
+import { fileKindChip, isTextFileKind } from "@lib";
+import type { StreamingDiffFile } from "@lib";
+
+export function FileDiff({ file }: { file: StreamingDiffFile }) {
+  const chip = fileKindChip(file.kind, file.meta);
+  if (chip) {
+    return <section className="streaming-diff-file">
+      <div className="streaming-diff-file-head"><code>{file.path}</code><Badge variant="outline">{chip}</Badge></div>
+      {(file.meta?.reason || file.meta?.bytes !== undefined) && <p className="streaming-diff-file-meta">{file.meta?.reason}{file.meta?.reason && file.meta?.bytes !== undefined ? " · " : ""}{file.meta?.bytes !== undefined ? `${file.meta.bytes} bytes` : ""}</p>}
+    </section>;
+  }
+  return <section className="streaming-diff-file">
+    <div className="streaming-diff-file-head"><code>{file.path}</code><Badge variant="secondary">{file.kind}</Badge></div>
+    {isTextFileKind(file.kind) && file.diff !== undefined ? <pre className="streaming-diff-unified">{file.diff}</pre> : <p className="streaming-diff-file-meta">Diff content is unavailable.</p>}
+  </section>;
+}
diff --git a/dashboard/src/oven/FileDiff/index.ts b/dashboard/src/oven/FileDiff/index.ts
new file mode 100644
index 0000000..7c0c530
--- /dev/null
+++ b/dashboard/src/oven/FileDiff/index.ts
@@ -0,0 +1 @@
+export { FileDiff } from "./FileDiff";
diff --git a/dashboard/src/oven/FrameCard/FrameCard.test.ts b/dashboard/src/oven/FrameCard/FrameCard.test.ts
new file mode 100644
index 0000000..81d0303
--- /dev/null
+++ b/dashboard/src/oven/FrameCard/FrameCard.test.ts
@@ -0,0 +1,51 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { FrameCard } from "./FrameCard";
+
+function referencePercent(value) {
+  return `${(value * 100).toFixed(value < 0.01 ? 3 : 2)}%`;
+}
+
+function referenceDelta(value) {
+  return value.toFixed(4).replace(/0+$/u, "").replace(/\.$/u, "");
+}
+
+function FrozenFrameCard({ status, frame, difference, images, label }) {
+  return createElement(
+    "article",
+    { className: `visual-parity-frame ${status}` },
+    createElement(
+      "header",
+      null,
+      createElement("strong", null, "Frame ", frame),
+      createElement("span", null, status, " · ", referencePercent(difference.ratio), " · mean ", referenceDelta(difference.meanAbsoluteDelta), " · max ", difference.maximumAbsoluteDelta),
+    ),
+    createElement(
+      "div",
+      { className: "visual-parity-shots" },
+      images.map((image) => createElement(
+        "figure",
+        { key: image.label },
+        createElement("figcaption", null, image.label),
+        createElement("img", { alt: `${label} ${image.label.toLowerCase()} frame ${frame}`, height: image.height, src: image.src ?? undefined, width: image.width }),
+      )),
+    ),
+  );
+}
+
+test("FrameCard matches a passing frame snapshot", () => {
+  const props = {
+    status: "pass",
+    frame: 8,
+    difference: { ratio: 0.0025, meanAbsoluteDelta: 0.0312, maximumAbsoluteDelta: 5 },
+    images: [
+      { label: "Reference", height: 90, src: "/reference.png", width: 160 },
+      { label: "Candidate", height: 90, src: "/candidate.png", width: 160 },
+      { label: "Diff", height: 90, src: "/diff.png", width: 160 },
+    ],
+    label: "Dashboard",
+  };
+  assert.equal(renderToString(createElement(FrameCard, props)), renderToString(createElement(FrozenFrameCard, props)));
+});
diff --git a/dashboard/src/oven/FrameCard/FrameCard.tsx b/dashboard/src/oven/FrameCard/FrameCard.tsx
new file mode 100644
index 0000000..ef86125
--- /dev/null
+++ b/dashboard/src/oven/FrameCard/FrameCard.tsx
@@ -0,0 +1,15 @@
+import type { VisualParityDifference, VisualParityImage } from "@lib";
+import { delta, percent } from "../utils/visual-parity-format";
+import { ImageTriptych } from "../ImageTriptych";
+
+type FrameCardProps = {
+  status: string;
+  frame: number;
+  difference: VisualParityDifference;
+  images: VisualParityImage[];
+  label: string;
+};
+
+export function FrameCard({ status, frame, difference, images, label }: FrameCardProps) {
+  return <article className={`visual-parity-frame ${status}`}><header><strong>Frame {frame}</strong><span>{status} · {percent(difference.ratio)} · mean {delta(difference.meanAbsoluteDelta)} · max {difference.maximumAbsoluteDelta}</span></header><ImageTriptych images={images} label={label} frame={frame} /></article>;
+}
diff --git a/dashboard/src/oven/FrameCard/index.ts b/dashboard/src/oven/FrameCard/index.ts
new file mode 100644
index 0000000..c8da399
--- /dev/null
+++ b/dashboard/src/oven/FrameCard/index.ts
@@ -0,0 +1 @@
+export { FrameCard } from "./FrameCard";
diff --git a/dashboard/src/oven/HybridField/HybridField.test.ts b/dashboard/src/oven/HybridField/HybridField.test.ts
new file mode 100644
index 0000000..5e2b46f
--- /dev/null
+++ b/dashboard/src/oven/HybridField/HybridField.test.ts
@@ -0,0 +1,66 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { hybridField } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent } from "../test-support/dom-normalize";
+import { HybridField, type HybridFieldData } from "./HybridField";
+
+const {
+  differentialTestingAllPassingPayload,
+  differentialTestingComparableNoChangedPayload,
+  differentialTestingComparableTelemetryPayload,
+  differentialTestingEmptyPayload,
+  differentialTestingIncomparableTelemetryPayload,
+  differentialTestingPaginatedMidPayload,
+  differentialTestingPaginatedPayload,
+  differentialTestingPayload,
+  performanceTracingPayload,
+} = await import(pathToFileURL(resolve(process.cwd(), "dashboard/src/oven/differential-testing-render/golden-harness.mjs")).href);
+
+const payloadFactories = [
+  ["base", differentialTestingPayload],
+  ["comparable telemetry", differentialTestingComparableTelemetryPayload],
+  ["comparable no changed", differentialTestingComparableNoChangedPayload],
+  ["paginated", differentialTestingPaginatedPayload],
+  ["paginated mid", differentialTestingPaginatedMidPayload],
+  ["all passing", differentialTestingAllPassingPayload],
+  ["incomparable telemetry", differentialTestingIncomparableTelemetryPayload],
+  ["empty", differentialTestingEmptyPayload],
+  ["performance tracing", performanceTracingPayload],
+] as const;
+
+const syntheticCases: Array<[string, HybridFieldData]> = [
+  ["single segment pass", { id: "pass", label: "status", samples: [], failedSampleCount: 0, missingSampleCount: 0, trustStatus: "pass", semantics: { meaning: "meaning" } }],
+  ["dotted fail", { id: "fail", label: "frame.p95", samples: [], failedSampleCount: 1, missingSampleCount: 0, trustStatus: "pass", driftReason: "drift" }],
+  ["deep blocked", { id: "blocked", label: "a.b.c", samples: [], failedSampleCount: 0, missingSampleCount: 1, trustStatus: "blocked", sourceOwner: "owner" }],
+  ["description fallback", { id: "fallback", label: "fallback", samples: [], failedSampleCount: 0, missingSampleCount: 0, sourceOwner: "source" }],
+  ["escaped text", { id: "escaped", label: "a<&.tail", samples: [], failedSampleCount: 1, missingSampleCount: 0, semantics: { meaning: "meaning & <" } }],
+];
+
+test("HybridField matches hybridField for every golden-harness field", () => {
+  let battery = 0;
+  for (const [payloadName, makePayload] of payloadFactories) {
+    for (const field of makePayload().fields) {
+      const actual = renderToStaticMarkup(createElement(HybridField, { field }));
+      assertDomEquivalent(actual, hybridField(field), `${payloadName}/${field.id}`);
+      battery += 1;
+    }
+  }
+  assert.equal(battery, 101, "all golden-harness fields are covered");
+});
+
+test("HybridField covers result, description, dotted opacity, and exact style serialization", () => {
+  for (const [name, field] of syntheticCases) {
+    const actual = renderToStaticMarkup(createElement(HybridField, { field }));
+    assertDomEquivalent(actual, hybridField(field), name);
+  }
+
+  const oneSegment = renderToStaticMarkup(createElement(HybridField, { field: syntheticCases[0][1] }));
+  const dotted = renderToStaticMarkup(createElement(HybridField, { field: syntheticCases[2][1] }));
+  assert.match(oneSegment, /style="opacity:1\.00"/u);
+  assert.match(dotted, /style="opacity:0\.45"/u);
+  assert.match(dotted, /style="opacity:1\.00"/u);
+});
diff --git a/dashboard/src/oven/HybridField/HybridField.tsx b/dashboard/src/oven/HybridField/HybridField.tsx
new file mode 100644
index 0000000..f57a875
--- /dev/null
+++ b/dashboard/src/oven/HybridField/HybridField.tsx
@@ -0,0 +1,33 @@
+import { fieldResult } from "../differential-testing-render/differential-testing-render.js";
+import type { FieldMiniChartField } from "../FieldMiniChart/field-mini-chart-geometry";
+
+export type HybridFieldData = FieldMiniChartField & {
+  id: string;
+  label: string;
+  semantics?: { meaning?: string | null };
+  driftReason?: string | null;
+  sourceOwner?: string | null;
+  trustStatus?: string | null;
+  failedSampleCount?: number | null;
+  missingSampleCount?: number | null;
+  maxDelta?: number | string | null;
+};
+
+export type HybridFieldProps = {
+  field: HybridFieldData;
+};
+
+export function HybridField({ field }: HybridFieldProps) {
+  const segments = String(field.label || "").split(".");
+  const description = field.semantics?.meaning || field.driftReason || field.sourceOwner || "";
+  return <span className="hybrid-cell hybrid-field" title={description}>
+    <span className="table-field-label">
+      {segments.map((segment, index) => {
+        const last = index === segments.length - 1;
+        const opacity = segments.length <= 1 ? 1 : 0.45 + 0.55 * Math.pow(index / (segments.length - 1), 1.8);
+        return <span key={`${segment}-${index}`} className={last ? "hybrid-field-tail" : "hybrid-field-segment"} style={{ opacity: opacity.toFixed(2) }}>{segment}{last ? "" : "."}</span>;
+      })}
+    </span>
+    <span className="hybrid-status">{fieldResult(field)}</span>
+  </span>;
+}
diff --git a/dashboard/src/oven/HybridField/index.ts b/dashboard/src/oven/HybridField/index.ts
new file mode 100644
index 0000000..2db780b
--- /dev/null
+++ b/dashboard/src/oven/HybridField/index.ts
@@ -0,0 +1,2 @@
+export { HybridField } from "./HybridField";
+export type { HybridFieldData, HybridFieldProps } from "./HybridField";
diff --git a/dashboard/src/oven/HybridFieldList/HybridFieldList.test.ts b/dashboard/src/oven/HybridFieldList/HybridFieldList.test.ts
new file mode 100644
index 0000000..145cdeb
--- /dev/null
+++ b/dashboard/src/oven/HybridFieldList/HybridFieldList.test.ts
@@ -0,0 +1,138 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { runInNewContext } from "node:vm";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { fieldRows } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent, extractById, normalize, parseHtml, serializeCanonical, type ElementNode } from "../test-support/dom-normalize";
+import { HybridFieldList, type HybridFieldData, type TelemetryAvailability } from "./HybridFieldList";
+import type { HybridTelemetry } from "../HybridMetric";
+
+const {
+  differentialTestingAllPassingPayload,
+  differentialTestingComparableNoChangedPayload,
+  differentialTestingComparableTelemetryPayload,
+  differentialTestingIncomparableTelemetryPayload,
+  differentialTestingPaginatedMidPayload,
+  differentialTestingPaginatedPayload,
+  differentialTestingPayload,
+} = await import(pathToFileURL(resolve(process.cwd(), "dashboard/src/oven/differential-testing-render/golden-harness.mjs")).href);
+
+const payloadFactories = [
+  ["base", differentialTestingPayload],
+  ["comparable telemetry", differentialTestingComparableTelemetryPayload],
+  ["comparable no changed", differentialTestingComparableNoChangedPayload],
+  ["paginated", differentialTestingPaginatedPayload],
+  ["paginated mid", differentialTestingPaginatedMidPayload],
+  ["all passing", differentialTestingAllPassingPayload],
+  ["incomparable telemetry", differentialTestingIncomparableTelemetryPayload],
+] as const;
+
+function telemetryMap(payload: { telemetry?: { fields?: Array<{ id: string }> } }) {
+  return new Map(payload.telemetry?.fields?.map((entry) => [entry.id, entry]) ?? []);
+}
+
+function availability(payload: { telemetry?: { status?: string } }): TelemetryAvailability {
+  return { status: payload.telemetry?.status === "comparable" ? "comparable" : "blocked", reason: "Transition telemetry unavailable." };
+}
+
+function rowsOracle(fields: HybridFieldData[], expanded: ReadonlySet<string>, telemetryByField: Map<string, object>, chartMode: string, sort = "default", telemetryAvailabilityValue = availability({})): string {
+  return fieldRows(fields, { state: { expanded, sort, telemetryAvailability: telemetryAvailabilityValue }, telemetryByField, chartMode });
+}
+
+function wrapperChild(html: string): string {
+  const [node] = normalize(parseHtml(html));
+  assert.equal(node?.type, "element");
+  return serializeCanonical((node as ElementNode).children);
+}
+
+test("HybridFieldList matches fieldRows for representative golden-harness lists and both chart modes", () => {
+  let battery = 0;
+  for (const [payloadName, makePayload] of payloadFactories) {
+    const payload = makePayload();
+    const telemetryByField = telemetryMap(payload);
+    for (const chartMode of ["value", "delta"]) {
+      const expanded = new Set(payload.fields.length ? [payload.fields[0].id] : []);
+      const props = { fields: payload.fields, expanded, telemetryByField, chartMode, sort: "default", telemetryAvailability: availability(payload) };
+      const actual = renderToStaticMarkup(createElement(HybridFieldList, props));
+      assertDomEquivalent(actual, rowsOracle(payload.fields, expanded, telemetryByField, chartMode, "default", availability(payload)), `${payloadName}/${chartMode}`);
+      battery += 1;
+    }
+  }
+  assert.equal(battery, 14, "all non-empty golden payloads cover both chart branches");
+});
+
+test("HybridFieldList renders all three empty-list messages", () => {
+  const noMatch = differentialTestingAllPassingPayload();
+  const comparable = differentialTestingComparableNoChangedPayload();
+  const cases = [
+    ["default", noMatch, "default", { status: "blocked", reason: "Transition telemetry unavailable." }, "No fields match the current view."],
+    ["comparable changed", comparable, "changed", { status: "comparable", reason: "ignored" }, "No changed fields in this telemetry."],
+    ["blocked changed", noMatch, "changed", { status: "blocked", reason: "Transition telemetry unavailable." }, "Transition telemetry unavailable."],
+  ] as const;
+
+  for (const [name, payload, sort, telemetryAvailabilityValue, message] of cases) {
+    const actual = renderToStaticMarkup(createElement(HybridFieldList, { fields: [], chartMode: "delta", sort, telemetryAvailability: telemetryAvailabilityValue }));
+    const expected = fieldRows([], { state: { expanded: new Set(), sort, telemetryAvailability: telemetryAvailabilityValue }, telemetryByField: new Map(), chartMode: "delta" });
+    assertDomEquivalent(actual, expected, name);
+    assert.match(actual, new RegExp(`<div class="empty">${message.replaceAll(".", "\\.")}</div>`, "u"));
+  }
+});
+
+test("HybridFieldList matches the child of the frozen server-page and paginated-mid goldens", () => {
+  const goldenDir = resolve(process.cwd(), "dashboard/src/oven/differential-testing-render/goldens");
+  const cases = [
+    ["dt-server-paged", differentialTestingPayload()],
+    ["dt-paginated-mid", differentialTestingPaginatedMidPayload()],
+  ] as const;
+
+  for (const [goldenName, payload] of cases) {
+    const golden = readFileSync(resolve(goldenDir, `${goldenName}.html`), "utf8");
+    const actual = renderToStaticMarkup(createElement(HybridFieldList, {
+      fields: payload.fields,
+      expanded: new Set(),
+      telemetryByField: telemetryMap(payload),
+      chartMode: "delta",
+      sort: "default",
+      telemetryAvailability: availability(payload),
+    }));
+    assertDomEquivalent(actual, wrapperChild(extractById(golden, "hybrid-rows")), goldenName);
+  }
+});
+
+test("HybridFieldList matches the empty-list children of the frozen empty goldens", () => {
+  const goldenDir = resolve(process.cwd(), "dashboard/src/oven/differential-testing-render/goldens");
+  const cases = [
+    ["dt-no-match", "default", { status: "blocked", reason: "Transition telemetry unavailable." }],
+    ["dt-comparable-no-changed", "changed", { status: "comparable", reason: "ignored" }],
+  ] as const;
+  for (const [goldenName, sort, telemetryAvailabilityValue] of cases) {
+    const golden = readFileSync(resolve(goldenDir, `${goldenName}.html`), "utf8");
+    const actual = renderToStaticMarkup(createElement(HybridFieldList, { fields: [], chartMode: "delta", sort, telemetryAvailability: telemetryAvailabilityValue }));
+    assertDomEquivalent(actual, wrapperChild(extractById(golden, "hybrid-rows")), goldenName);
+  }
+});
+
+test("HybridFieldList reads telemetry from a cross-realm Map", () => {
+  const payload = differentialTestingComparableTelemetryPayload();
+  const field = payload.fields[0];
+  const telemetry = payload.telemetry.fields[0] as HybridTelemetry;
+  const crossRealmTelemetryByField = runInNewContext("new Map([[fieldId, telemetry]])", {
+    fieldId: field.id,
+    telemetry,
+  }) as ReadonlyMap<string, HybridTelemetry>;
+  const actual = renderToStaticMarkup(createElement(HybridFieldList, {
+    fields: [field],
+    telemetryByField: crossRealmTelemetryByField,
+    chartMode: "delta",
+  }));
+  const expected = fieldRows([field], {
+    state: { expanded: new Set(), sort: "default", telemetryAvailability: availability(payload) },
+    telemetryByField: new Map([[field.id, telemetry]]),
+    chartMode: "delta",
+  });
+  assertDomEquivalent(actual, expected, "cross-realm Map");
+});
diff --git a/dashboard/src/oven/HybridFieldList/HybridFieldList.tsx b/dashboard/src/oven/HybridFieldList/HybridFieldList.tsx
new file mode 100644
index 0000000..c9484b3
--- /dev/null
+++ b/dashboard/src/oven/HybridFieldList/HybridFieldList.tsx
@@ -0,0 +1,72 @@
+import { nonPass } from "../differential-testing-render/differential-testing-render.js";
+import { FieldMiniChart } from "../FieldMiniChart";
+import type { HybridFieldData } from "../HybridField";
+import { HybridField } from "../HybridField";
+import type { HybridTelemetry } from "../HybridMetric";
+import { HybridMetric } from "../HybridMetric";
+
+export type TelemetryAvailability = {
+  status: string;
+  reason: string;
+};
+
+export type TelemetryByField = ReadonlyMap<string, HybridTelemetry> | Record<string, HybridTelemetry | undefined>;
+
+export type HybridFieldListProps = {
+  fields: HybridFieldData[];
+  expanded?: ReadonlySet<string>;
+  onToggle?: (id: string) => void;
+  telemetryByField?: TelemetryByField;
+  chartMode: string;
+  sort?: string;
+  telemetryAvailability?: TelemetryAvailability;
+};
+
+function telemetryForField(telemetryByField: TelemetryByField | undefined, id: string): HybridTelemetry | undefined {
+  if (!telemetryByField) return undefined;
+  return typeof telemetryByField.get === "function" ? telemetryByField.get(id) : telemetryByField[id];
+}
+
+export function HybridFieldList({
+  fields,
+  expanded = new Set<string>(),
+  onToggle,
+  telemetryByField,
+  chartMode,
+  sort = "default",
+  telemetryAvailability = { status: "absent", reason: "" },
+}: HybridFieldListProps) {
+  if (!fields.length) {
+    const message = sort === "changed"
+      ? telemetryAvailability.status === "comparable"
+        ? "No changed fields in this telemetry."
+        : telemetryAvailability.reason
+      : "No fields match the current view.";
+    return <div className="empty">{message}</div>;
+  }
+
+  return <div className="hybrid-list">
+    {fields.map((field, index) => {
+      const isExpanded = expanded.has(field.id);
+      return <section
+        key={field.id}
+        className={`hybrid-row ${nonPass(field) ? "fail" : "pass"}${isExpanded ? " expanded" : ""}`}
+        data-row-expand-key={field.id}
+        role="button"
+        tabIndex={0}
+        aria-expanded={String(isExpanded)}
+        title={field.label}
+        onClick={() => onToggle?.(field.id)}
+        onKeyDown={(event) => {
+          if (event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          onToggle?.(field.id);
+        }}
+      >
+        <HybridField field={field} />
+        <HybridMetric field={field} telemetry={telemetryForField(telemetryByField, field.id)} />
+        <div className="hybrid-chart"><FieldMiniChart field={field} showFrameLabels={index === 0} chartMode={chartMode} /></div>
+      </section>;
+    })}
+  </div>;
+}
diff --git a/dashboard/src/oven/HybridFieldList/index.ts b/dashboard/src/oven/HybridFieldList/index.ts
new file mode 100644
index 0000000..a4ace1c
--- /dev/null
+++ b/dashboard/src/oven/HybridFieldList/index.ts
@@ -0,0 +1,2 @@
+export { HybridFieldList } from "./HybridFieldList";
+export type { HybridFieldListProps, TelemetryAvailability, TelemetryByField } from "./HybridFieldList";
diff --git a/dashboard/src/oven/HybridMetric/HybridMetric.test.ts b/dashboard/src/oven/HybridMetric/HybridMetric.test.ts
new file mode 100644
index 0000000..c7e2af2
--- /dev/null
+++ b/dashboard/src/oven/HybridMetric/HybridMetric.test.ts
@@ -0,0 +1,112 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { hybridMetric } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent } from "../test-support/dom-normalize";
+import { HybridMetric, type HybridTelemetry } from "./HybridMetric";
+
+const {
+  differentialTestingAllPassingPayload,
+  differentialTestingComparableNoChangedPayload,
+  differentialTestingComparableTelemetryPayload,
+  differentialTestingIncomparableTelemetryPayload,
+  differentialTestingPaginatedMidPayload,
+  differentialTestingPaginatedPayload,
+  differentialTestingPayload,
+  performanceTracingPayload,
+} = await import(pathToFileURL(resolve(process.cwd(), "dashboard/src/oven/differential-testing-render/golden-harness.mjs")).href);
+
+const payloadFactories = [
+  ["base", differentialTestingPayload],
+  ["comparable telemetry", differentialTestingComparableTelemetryPayload],
+  ["comparable no changed", differentialTestingComparableNoChangedPayload],
+  ["paginated", differentialTestingPaginatedPayload],
+  ["paginated mid", differentialTestingPaginatedMidPayload],
+  ["all passing", differentialTestingAllPassingPayload],
+  ["incomparable telemetry", differentialTestingIncomparableTelemetryPayload],
+  ["performance tracing", performanceTracingPayload],
+] as const;
+
+function telemetryMap(payload: { telemetry?: { fields?: Array<{ id: string } & HybridTelemetry> } }) {
+  return new Map(payload.telemetry?.fields?.map((entry) => [entry.id, entry]) ?? []);
+}
+
+test("HybridMetric matches hybridMetric for every golden field and available telemetry", () => {
+  let battery = 0;
+  let availableTelemetryCases = 0;
+  for (const [payloadName, makePayload] of payloadFactories) {
+    const payload = makePayload();
+    const telemetryByField = telemetryMap(payload);
+    for (const field of payload.fields) {
+      const availableTelemetry = telemetryByField.get(field.id);
+      const absentActual = renderToStaticMarkup(createElement(HybridMetric, { field, telemetry: undefined }));
+      assertDomEquivalent(absentActual, hybridMetric(field, undefined), `${payloadName}/${field.id}/absent`);
+      battery += 1;
+      if (availableTelemetry) {
+        const presentActual = renderToStaticMarkup(createElement(HybridMetric, { field, telemetry: availableTelemetry }));
+        assertDomEquivalent(presentActual, hybridMetric(field, availableTelemetry), `${payloadName}/${field.id}/telemetry`);
+        availableTelemetryCases += 1;
+        battery += 1;
+      }
+    }
+  }
+  assert.equal(battery, 190, "101 absent cases plus 89 matching telemetry cases");
+  assert.equal(availableTelemetryCases, 89, "available telemetry cases come from matching golden telemetry fields");
+});
+
+test("HybridMetric uses comparable telemetry fields for explicit transition oracle cases", () => {
+  const payload = differentialTestingComparableTelemetryPayload();
+  const telemetryByField = telemetryMap(payload);
+  const positionTelemetry = telemetryByField.get("position");
+  const activeTelemetry = telemetryByField.get("active");
+  assert.ok(positionTelemetry, "comparable telemetry includes position");
+  assert.ok(activeTelemetry, "comparable telemetry includes active");
+
+  const cases: Array<[string, string, HybridTelemetry]> = [
+    ["up", "position", { ...positionTelemetry, failToPassCount: 3, passToFailCount: 1, stayedPassCount: 4, stayedFailCount: 5, residualCount: 6 }],
+    ["down", "active", { ...activeTelemetry, failToPassCount: 1, passToFailCount: 3, stayedPassCount: 4, stayedFailCount: 5, residualCount: 6 }],
+    ["zero", "position", { ...positionTelemetry, failToPassCount: 2, passToFailCount: 2, stayedPassCount: 4, stayedFailCount: 5, residualCount: 6 }],
+  ];
+
+  for (const [name, fieldId, telemetry] of cases) {
+    const field = payload.fields.find((candidate) => candidate.id === fieldId);
+    assert.ok(field, `comparable payload includes ${fieldId}`);
+    const actual = renderToStaticMarkup(createElement(HybridMetric, { field, telemetry }));
+    assertDomEquivalent(actual, hybridMetric(field, telemetry), name);
+    if (name === "up") {
+      assert.match(actual, /class="hybrid-delta up"/u);
+      assert.match(actual, /▼/u);
+    } else if (name === "down") {
+      assert.match(actual, /class="hybrid-delta down"/u);
+      assert.match(actual, /▲/u);
+    } else {
+      assert.match(actual, /class="hybrid-delta "/u);
+      assert.match(actual, /<span class="hybrid-delta-symbol"><\/span>/u);
+    }
+    assert.match(actual, /title="[0-9]+ fail-to-pass; [0-9]+ pass-to-fail; [0-9]+ stayed-pass; [0-9]+ stayed-fail; residual [0-9]+"/u);
+  }
+});
+
+test("HybridMetric covers null, zero, up, down, value, and non-finite branches", () => {
+  const field = { id: "metric", label: "metric", samples: [], failedSampleCount: 2, missingSampleCount: 0, maxDelta: 0.125 };
+  const cases: Array<[string, HybridTelemetry | undefined, number | string | null]> = [
+    ["absent", undefined, 0.125],
+    ["zero", { failToPassCount: 1, passToFailCount: 1, stayedPassCount: 2, stayedFailCount: 0, residualCount: 0 }, 0.125],
+    ["up", { failToPassCount: 2, passToFailCount: 0, stayedPassCount: 0, stayedFailCount: 1, residualCount: 0 }, 0.125],
+    ["down", { failToPassCount: 0, passToFailCount: 2000, stayedPassCount: 0, stayedFailCount: 1, residualCount: 0 }, 0.125],
+    ["null max", undefined, null],
+    ["infinite max", undefined, "Infinity"],
+  ];
+
+  for (const [name, telemetry, maxDelta] of cases) {
+    const actualField = { ...field, maxDelta };
+    const actual = renderToStaticMarkup(createElement(HybridMetric, { field: actualField, telemetry }));
+    assertDomEquivalent(actual, hybridMetric(actualField, telemetry), name);
+    if (name === "absent") assert.match(actual, /class="hybrid-delta "/u);
+    if (name === "up") assert.match(actual, /class="hybrid-delta up"/u);
+    if (name === "down") assert.match(actual, /class="hybrid-delta down"/u);
+  }
+});
diff --git a/dashboard/src/oven/HybridMetric/HybridMetric.tsx b/dashboard/src/oven/HybridMetric/HybridMetric.tsx
new file mode 100644
index 0000000..5d49585
--- /dev/null
+++ b/dashboard/src/oven/HybridMetric/HybridMetric.tsx
@@ -0,0 +1,35 @@
+import { compact, count, nonPass, value } from "../differential-testing-render/differential-testing-render.js";
+import type { HybridFieldData } from "../HybridField/HybridField";
+
+export type HybridTelemetry = {
+  failToPassCount?: number | null;
+  passToFailCount?: number | null;
+  stayedPassCount?: number | null;
+  stayedFailCount?: number | null;
+  residualCount?: number | null;
+};
+
+export type HybridMetricProps = {
+  field: HybridFieldData;
+  telemetry?: HybridTelemetry | null;
+};
+
+export function HybridMetric({ field, telemetry }: HybridMetricProps) {
+  const frameDelta = telemetry ? Number(telemetry.passToFailCount || 0) - Number(telemetry.failToPassCount || 0) : null;
+  const deltaClass = frameDelta === null || frameDelta === 0 ? "" : frameDelta < 0 ? "up" : "down";
+  const deltaSymbol = frameDelta === null || frameDelta === 0 ? "" : frameDelta < 0 ? "▼" : "▲";
+  const deltaValue = frameDelta === null ? "" : frameDelta === 0 ? "0" : compact(Math.abs(frameDelta));
+  const transitionTitle = telemetry
+    ? `${count(telemetry.failToPassCount)} fail-to-pass; ${count(telemetry.passToFailCount)} pass-to-fail; ${count(telemetry.stayedPassCount)} stayed-pass; ${count(telemetry.stayedFailCount)} stayed-fail; residual ${count(telemetry.residualCount)}`
+    : "";
+  const valueDelta = field.maxDelta === null || !Number.isFinite(Number(field.maxDelta)) ? "" : value(field.maxDelta);
+
+  return <span className="hybrid-cell hybrid-metric">
+    <span className="hybrid-count">{count(nonPass(field))}</span>
+    <span className={`hybrid-delta ${deltaClass}`} title={transitionTitle || undefined}>
+      <span className="hybrid-delta-symbol">{deltaSymbol}</span>
+      <span className="hybrid-delta-value">{deltaValue}</span>
+    </span>
+    <span className="hybrid-value-delta">{valueDelta}</span>
+  </span>;
+}
diff --git a/dashboard/src/oven/HybridMetric/index.ts b/dashboard/src/oven/HybridMetric/index.ts
new file mode 100644
index 0000000..8b58206
--- /dev/null
+++ b/dashboard/src/oven/HybridMetric/index.ts
@@ -0,0 +1,2 @@
+export { HybridMetric } from "./HybridMetric";
+export type { HybridMetricProps, HybridTelemetry } from "./HybridMetric";
diff --git a/dashboard/src/oven/ImageTriptych/ImageTriptych.test.ts b/dashboard/src/oven/ImageTriptych/ImageTriptych.test.ts
new file mode 100644
index 0000000..f8fbf75
--- /dev/null
+++ b/dashboard/src/oven/ImageTriptych/ImageTriptych.test.ts
@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ImageTriptych } from "./ImageTriptych";
+
+function FrozenImageTriptych({ images, label, frame }) {
+  return createElement(
+    "div",
+    { className: "visual-parity-shots" },
+    images.map((image) => createElement(
+      "figure",
+      { key: image.label },
+      createElement("figcaption", null, image.label),
+      createElement("img", { alt: `${label} ${image.label.toLowerCase()} frame ${frame}`, height: image.height, src: image.src ?? undefined, width: image.width }),
+    )),
+  );
+}
+
+test("ImageTriptych matches the three image snapshot", () => {
+  const props = {
+    images: [
+      { label: "Reference", height: 100, src: "/reference.png", width: 200 },
+      { label: "Candidate", height: 100, src: null, width: 200 },
+      { label: "Diff", height: 100, src: "/diff.png", width: 200 },
+    ],
+    label: "Dashboard",
+    frame: 4,
+  };
+  assert.equal(renderToString(createElement(ImageTriptych, props)), renderToString(createElement(FrozenImageTriptych, props)));
+});
diff --git a/dashboard/src/oven/ImageTriptych/ImageTriptych.tsx b/dashboard/src/oven/ImageTriptych/ImageTriptych.tsx
new file mode 100644
index 0000000..0037b1e
--- /dev/null
+++ b/dashboard/src/oven/ImageTriptych/ImageTriptych.tsx
@@ -0,0 +1,11 @@
+import type { VisualParityImage } from "@lib";
+
+type ImageTriptychProps = {
+  images: VisualParityImage[];
+  label: string;
+  frame: number;
+};
+
+export function ImageTriptych({ images, label, frame }: ImageTriptychProps) {
+  return <div className="visual-parity-shots">{images.map((image) => <figure key={image.label}><figcaption>{image.label}</figcaption><img alt={`${label} ${image.label.toLowerCase()} frame ${frame}`} height={image.height} src={image.src ?? undefined} width={image.width} /></figure>)}</div>;
+}
diff --git a/dashboard/src/oven/ImageTriptych/index.ts b/dashboard/src/oven/ImageTriptych/index.ts
new file mode 100644
index 0000000..82bd5b3
--- /dev/null
+++ b/dashboard/src/oven/ImageTriptych/index.ts
@@ -0,0 +1 @@
+export { ImageTriptych } from "./ImageTriptych";
diff --git a/dashboard/src/oven/KpiItem/KpiItem.test.ts b/dashboard/src/oven/KpiItem/KpiItem.test.ts
new file mode 100644
index 0000000..679b623
--- /dev/null
+++ b/dashboard/src/oven/KpiItem/KpiItem.test.ts
@@ -0,0 +1,60 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { Fragment, createElement } from "react";
+import { renderToStaticMarkup, renderToString } from "react-dom/server";
+import { KpiItem } from "./KpiItem";
+
+test("KpiItem preserves the exact Checklist item markup", () => {
+  const visual = createElement("svg", { "aria-hidden": "true", className: "driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" });
+  const item = createElement(KpiItem, {
+    className: "driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current",
+    title: "No active task",
+    visual,
+    heading: "Current",
+    value: "Complete",
+  });
+  const expected = "<div class=\"driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current\" title=\"No active task\"><svg aria-hidden=\"true\" class=\"driving-parity-kpi-gauge driving-parity-kpi-scenario-icon\"></svg><div class=\"driving-parity-kpi-text\"><div class=\"driving-parity-kpi-heading\">Current</div><div class=\"driving-parity-kpi-ratio\">Complete</div></div></div>";
+
+  assert.equal(renderToStaticMarkup(item), expected);
+  assert.equal(renderToString(item), expected);
+});
+
+test("KpiItem omits an undefined title attribute", () => {
+  const markup = renderToStaticMarkup(createElement(KpiItem, { heading: "Elapsed", value: "2m" }));
+
+  assert.doesNotMatch(markup, / title=/u);
+});
+
+test("KpiItem preserves the value fragment topology", () => {
+  const value = createElement(
+    Fragment,
+    null,
+    createElement("span", { className: "pass" }, 2),
+    createElement("span", { className: "separator" }, "·"),
+    createElement("span", { className: "total" }, 2),
+    " ",
+    createElement("span", { className: "pass" }, "(", 100, "%)"),
+  );
+  const kpiItemElement = createElement(KpiItem, {
+    className: "driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress",
+    visual: createElement("svg", { "aria-hidden": "true", className: "driving-parity-kpi-gauge driving-parity-kpi-progress-donut", viewBox: "0 0 58 58" }),
+    heading: "Progress",
+    value,
+  });
+  function FrozenProgressItem() {
+    return createElement("div", { className: "driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" },
+      createElement("svg", { "aria-hidden": "true", className: "driving-parity-kpi-gauge driving-parity-kpi-progress-donut", viewBox: "0 0 58 58" }),
+      createElement("div", { className: "driving-parity-kpi-text" },
+        createElement("div", { className: "driving-parity-kpi-heading" }, "Progress"),
+        createElement("div", { className: "driving-parity-kpi-ratio" },
+          createElement("span", { className: "pass" }, 2),
+          createElement("span", { className: "separator" }, "·"),
+          createElement("span", { className: "total" }, 2),
+          " ",
+          createElement("span", { className: "pass" }, "(", 100, "%)"))));
+  }
+
+  assert.equal(renderToString(kpiItemElement), renderToString(createElement(FrozenProgressItem)));
+  const item = createElement(KpiItem, { heading: "Progress", value });
+  assert.equal(renderToStaticMarkup(item), "<div><div class=\"driving-parity-kpi-text\"><div class=\"driving-parity-kpi-heading\">Progress</div><div class=\"driving-parity-kpi-ratio\"><span class=\"pass\">2</span><span class=\"separator\">·</span><span class=\"total\">2</span> <span class=\"pass\">(100%)</span></div></div></div>");
+});
diff --git a/dashboard/src/oven/KpiItem/KpiItem.tsx b/dashboard/src/oven/KpiItem/KpiItem.tsx
new file mode 100644
index 0000000..3f38adb
--- /dev/null
+++ b/dashboard/src/oven/KpiItem/KpiItem.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+type KpiItemProps = {
+  className?: string;
+  title?: string;
+  visual?: ReactNode;
+  heading: ReactNode;
+  value: ReactNode;
+};
+
+export const checklistKpiItemClassName = "driving-parity-kpi-item driving-parity-kpi-section";
+
+export function KpiItem({ className, title, visual, heading, value }: KpiItemProps) {
+  return <div className={className} title={title}>{visual}<div className="driving-parity-kpi-text"><div className="driving-parity-kpi-heading">{heading}</div><div className="driving-parity-kpi-ratio">{value}</div></div></div>;
+}
diff --git a/dashboard/src/oven/KpiItem/index.ts b/dashboard/src/oven/KpiItem/index.ts
new file mode 100644
index 0000000..0256dbe
--- /dev/null
+++ b/dashboard/src/oven/KpiItem/index.ts
@@ -0,0 +1 @@
+export { KpiItem } from "./KpiItem";
diff --git a/dashboard/src/oven/KpiStrip/KpiStrip.test.ts b/dashboard/src/oven/KpiStrip/KpiStrip.test.ts
new file mode 100644
index 0000000..e892abe
--- /dev/null
+++ b/dashboard/src/oven/KpiStrip/KpiStrip.test.ts
@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup, renderToString } from "react-dom/server";
+import { KpiStrip } from "./KpiStrip";
+
+test("KpiStrip preserves exact attributes and child output", () => {
+  const strip = createElement(KpiStrip, {
+    ariaLabel: "Burnlist progress KPIs",
+    className: "driving-parity-kpi-strip has-burns checklist-kpi-strip",
+    children: "CHILD",
+  });
+  const expected = "<div aria-label=\"Burnlist progress KPIs\" class=\"driving-parity-kpi-strip has-burns checklist-kpi-strip\">CHILD</div>";
+
+  assert.equal(renderToStaticMarkup(strip), expected);
+  assert.equal(renderToString(strip), expected);
+});
+
+test("KpiStrip omits an undefined aria-label attribute", () => {
+  const markup = renderToStaticMarkup(createElement(KpiStrip, { className: "checklist-kpi-strip" }));
+
+  assert.doesNotMatch(markup, / aria-label=/u);
+});
diff --git a/dashboard/src/oven/KpiStrip/KpiStrip.tsx b/dashboard/src/oven/KpiStrip/KpiStrip.tsx
new file mode 100644
index 0000000..e286978
--- /dev/null
+++ b/dashboard/src/oven/KpiStrip/KpiStrip.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+
+type KpiStripProps = {
+  className?: string;
+  ariaLabel?: string;
+  id?: string;
+  title?: string;
+  children?: ReactNode;
+};
+
+export const checklistKpiStripClassName = "driving-parity-kpi-strip has-burns checklist-kpi-strip";
+export const checklistKpiStripAriaLabel = "Burnlist progress KPIs";
+
+export function KpiStrip({ className, ariaLabel, id, title, children }: KpiStripProps) {
+  return <div aria-label={ariaLabel} className={className} id={id} title={title}>{children}</div>;
+}
diff --git a/dashboard/src/oven/KpiStrip/checklist-strip.test.ts b/dashboard/src/oven/KpiStrip/checklist-strip.test.ts
new file mode 100644
index 0000000..5328881
--- /dev/null
+++ b/dashboard/src/oven/KpiStrip/checklist-strip.test.ts
@@ -0,0 +1,91 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement, Fragment } from "react";
+import { renderToStaticMarkup, renderToString } from "react-dom/server";
+import { KpiItem } from "../KpiItem/KpiItem";
+import { KpiStrip } from "./KpiStrip";
+
+test("Checklist KPI strip preserves its complete static structure", () => {
+  const scenarioIcon = createElement("svg", { "aria-hidden": "true", className: "driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" });
+  const donut = createElement("svg", { "aria-hidden": "true", className: "driving-parity-kpi-gauge driving-parity-kpi-progress-donut", viewBox: "0 0 58 58" });
+  const progressValue = createElement(
+    Fragment,
+    null,
+    createElement("span", { className: "pass" }, 2),
+    createElement("span", { className: "separator" }, "·"),
+    createElement("span", { className: "total" }, 2),
+    " ",
+    createElement("span", { className: "pass" }, "(", 100, "%)"),
+  );
+  const strip = createElement(
+    KpiStrip,
+    { ariaLabel: "Burnlist progress KPIs", className: "driving-parity-kpi-strip has-burns checklist-kpi-strip" },
+    createElement(KpiItem, {
+      className: "driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current",
+      title: "No active task",
+      visual: scenarioIcon,
+      heading: "Current",
+      value: "Complete",
+    }),
+    createElement(KpiItem, {
+      className: "driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress",
+      title: "2 of 2 tasks complete",
+      visual: donut,
+      heading: "Progress",
+      value: progressValue,
+    }),
+    createElement(KpiItem, {
+      className: "driving-parity-kpi-item driving-parity-kpi-section",
+      heading: "Elapsed",
+      value: "20m",
+      visual: scenarioIcon,
+    }),
+    createElement(KpiItem, {
+      className: "driving-parity-kpi-item driving-parity-kpi-section",
+      heading: "Avg pace",
+      value: "10m",
+      visual: scenarioIcon,
+    }),
+    createElement(KpiItem, {
+      className: "driving-parity-kpi-item driving-parity-kpi-section",
+      heading: "Time left",
+      value: "--",
+      visual: scenarioIcon,
+    }),
+  );
+  const expected = "<div aria-label=\"Burnlist progress KPIs\" class=\"driving-parity-kpi-strip has-burns checklist-kpi-strip\"><div class=\"driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current\" title=\"No active task\"><svg aria-hidden=\"true\" class=\"driving-parity-kpi-gauge driving-parity-kpi-scenario-icon\"></svg><div class=\"driving-parity-kpi-text\"><div class=\"driving-parity-kpi-heading\">Current</div><div class=\"driving-parity-kpi-ratio\">Complete</div></div></div><div class=\"driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress\" title=\"2 of 2 tasks complete\"><svg aria-hidden=\"true\" class=\"driving-parity-kpi-gauge driving-parity-kpi-progress-donut\" viewBox=\"0 0 58 58\"></svg><div class=\"driving-parity-kpi-text\"><div class=\"driving-parity-kpi-heading\">Progress</div><div class=\"driving-parity-kpi-ratio\"><span class=\"pass\">2</span><span class=\"separator\">·</span><span class=\"total\">2</span> <span class=\"pass\">(100%)</span></div></div></div><div class=\"driving-parity-kpi-item driving-parity-kpi-section\"><svg aria-hidden=\"true\" class=\"driving-parity-kpi-gauge driving-parity-kpi-scenario-icon\"></svg><div class=\"driving-parity-kpi-text\"><div class=\"driving-parity-kpi-heading\">Elapsed</div><div class=\"driving-parity-kpi-ratio\">20m</div></div></div><div class=\"driving-parity-kpi-item driving-parity-kpi-section\"><svg aria-hidden=\"true\" class=\"driving-parity-kpi-gauge driving-parity-kpi-scenario-icon\"></svg><div class=\"driving-parity-kpi-text\"><div class=\"driving-parity-kpi-heading\">Avg pace</div><div class=\"driving-parity-kpi-ratio\">10m</div></div></div><div class=\"driving-parity-kpi-item driving-parity-kpi-section\"><svg aria-hidden=\"true\" class=\"driving-parity-kpi-gauge driving-parity-kpi-scenario-icon\"></svg><div class=\"driving-parity-kpi-text\"><div class=\"driving-parity-kpi-heading\">Time left</div><div class=\"driving-parity-kpi-ratio\">--</div></div></div></div>";
+  const frozenReferenceStrip = createElement("div", { "aria-label": "Burnlist progress KPIs", className: "driving-parity-kpi-strip has-burns checklist-kpi-strip" },
+    createElement("div", { className: "driving-parity-kpi-item driving-parity-kpi-section checklist-kpi-current", title: "No active task" },
+      scenarioIcon,
+      createElement("div", { className: "driving-parity-kpi-text" },
+        createElement("div", { className: "driving-parity-kpi-heading" }, "Current"),
+        createElement("div", { className: "driving-parity-kpi-ratio" }, "Complete"))),
+    createElement("div", { className: "driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress", title: "2 of 2 tasks complete" },
+      donut,
+      createElement("div", { className: "driving-parity-kpi-text" },
+        createElement("div", { className: "driving-parity-kpi-heading" }, "Progress"),
+        createElement("div", { className: "driving-parity-kpi-ratio" },
+          createElement("span", { className: "pass" }, 2),
+          createElement("span", { className: "separator" }, "·"),
+          createElement("span", { className: "total" }, 2),
+          " ",
+          createElement("span", { className: "pass" }, "(", 100, "%)")))),
+    createElement("div", { className: "driving-parity-kpi-item driving-parity-kpi-section" },
+      scenarioIcon,
+      createElement("div", { className: "driving-parity-kpi-text" },
+        createElement("div", { className: "driving-parity-kpi-heading" }, "Elapsed"),
+        createElement("div", { className: "driving-parity-kpi-ratio" }, "20m"))),
+    createElement("div", { className: "driving-parity-kpi-item driving-parity-kpi-section" },
+      scenarioIcon,
+      createElement("div", { className: "driving-parity-kpi-text" },
+        createElement("div", { className: "driving-parity-kpi-heading" }, "Avg pace"),
+        createElement("div", { className: "driving-parity-kpi-ratio" }, "10m"))),
+    createElement("div", { className: "driving-parity-kpi-item driving-parity-kpi-section" },
+      scenarioIcon,
+      createElement("div", { className: "driving-parity-kpi-text" },
+        createElement("div", { className: "driving-parity-kpi-heading" }, "Time left"),
+        createElement("div", { className: "driving-parity-kpi-ratio" }, "--"))));
+
+  assert.equal(renderToStaticMarkup(strip), expected);
+  assert.equal(renderToString(strip), renderToString(frozenReferenceStrip));
+});
diff --git a/dashboard/src/oven/KpiStrip/index.ts b/dashboard/src/oven/KpiStrip/index.ts
new file mode 100644
index 0000000..c38b305
--- /dev/null
+++ b/dashboard/src/oven/KpiStrip/index.ts
@@ -0,0 +1 @@
+export { KpiStrip } from "./KpiStrip";
diff --git a/dashboard/src/oven/LogTable/LogTable.test.ts b/dashboard/src/oven/LogTable/LogTable.test.ts
new file mode 100644
index 0000000..af508b5
--- /dev/null
+++ b/dashboard/src/oven/LogTable/LogTable.test.ts
@@ -0,0 +1,133 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { Fragment, createElement } from "react";
+import { renderToStaticMarkup, renderToString } from "react-dom/server";
+import { LogTable } from "./LogTable";
+
+function FrozenChecklistLog({ rows, emptyState }) {
+  return createElement(
+    "div",
+    { className: "checklist-log-list" },
+    createElement(
+      "div",
+      { className: "checklist-log-table-header" },
+      createElement("span", null, "Age"),
+      createElement("span", null, "Event"),
+      createElement("span", null, "Result"),
+      createElement("span", null, "Delta"),
+      createElement("span", null, "Done"),
+    ),
+    rows.map((item) => createElement(
+      "article",
+      { className: "log-row log-table-row", key: `${item.id}/${item.completedAt}` },
+      createElement("span", { className: "log-table-cell age" }, item.age),
+      createElement("span", { className: "log-table-cell event" }, item.id),
+      createElement("span", { className: "log-table-cell result improved" }, "Done"),
+      createElement("span", { className: "log-table-cell delta improved" }, "+1"),
+      createElement("span", { className: "log-table-cell done" }, item.percent, "%"),
+    )),
+    !rows.length && emptyState,
+  );
+}
+
+function checklistProps(rows, emptyState) {
+  return {
+    columns: ["Age", "Event", "Result", "Delta", "Done"],
+    rows: rows.map((item) => ({
+      className: "log-row log-table-row",
+      cells: [
+        { className: "log-table-cell age", content: item.age },
+        { className: "log-table-cell event", content: item.id },
+        { className: "log-table-cell result improved", content: "Done" },
+        { className: "log-table-cell delta improved", content: "+1" },
+        { className: "log-table-cell done", content: createElement(Fragment, null, item.percent, "%") },
+      ],
+    })),
+    emptyState,
+  };
+}
+
+test("LogTable preserves the populated Checklist snapshot", () => {
+  const rows = [
+    { id: "BL-2", completedAt: "2026-07-18T11:40:00Z", age: "20m", percent: 100 },
+    { id: "BL-1", completedAt: "2026-07-18T11:20:00Z", age: "40m", percent: 50 },
+  ];
+  const props = checklistProps(rows);
+  const componentOutput = renderToString(createElement(LogTable, props));
+  const frozenOutput = renderToString(createElement(FrozenChecklistLog, { rows }));
+  const expected = "<div class=\"checklist-log-list\"><div class=\"checklist-log-table-header\"><span>Age</span><span>Event</span><span>Result</span><span>Delta</span><span>Done</span></div><article class=\"log-row log-table-row\"><span class=\"log-table-cell age\">20m</span><span class=\"log-table-cell event\">BL-2</span><span class=\"log-table-cell result improved\">Done</span><span class=\"log-table-cell delta improved\">+1</span><span class=\"log-table-cell done\">100%</span></article><article class=\"log-row log-table-row\"><span class=\"log-table-cell age\">40m</span><span class=\"log-table-cell event\">BL-1</span><span class=\"log-table-cell result improved\">Done</span><span class=\"log-table-cell delta improved\">+1</span><span class=\"log-table-cell done\">50%</span></article></div>";
+
+  assert.equal(componentOutput, frozenOutput);
+  assert.equal(renderToStaticMarkup(createElement(LogTable, props)), expected);
+});
+
+test("LogTable preserves the empty Checklist snapshot", () => {
+  const emptyState = createElement("div", { className: "event-ledger-empty" }, "No completed events");
+  const rows = [];
+  const props = checklistProps(rows, emptyState);
+  const componentOutput = renderToString(createElement(LogTable, props));
+  const frozenOutput = renderToString(createElement(FrozenChecklistLog, { rows, emptyState }));
+  const expected = "<div class=\"checklist-log-list\"><div class=\"checklist-log-table-header\"><span>Age</span><span>Event</span><span>Result</span><span>Delta</span><span>Done</span></div><div class=\"event-ledger-empty\">No completed events</div></div>";
+
+  assert.equal(componentOutput, frozenOutput);
+  assert.equal(renderToStaticMarkup(createElement(LogTable, props)), expected);
+  assert.match(componentOutput, /<div class="checklist-log-table-header">[\s\S]*<div class="event-ledger-empty">No completed events<\/div>/u);
+});
+
+test("LogTable reproduces the Differential Testing log superset snapshot", () => {
+  const nestedResult = (indicator, value) => createElement(
+    "span",
+    { className: "log-delta-content" },
+    createElement("span", { className: "log-delta-indicator" }, indicator),
+    createElement("span", null, value),
+  );
+  const props = {
+    columns: ["Age", "Frame", "Result", "Delta", "Done"],
+    rows: [
+      {
+        className: "log-row improved no-detail log-table-row",
+        cells: [
+          { className: "log-table-cell age", content: "2m" },
+          { className: "log-table-cell failed improved", content: "5" },
+          { className: "log-table-cell result improved", content: nestedResult("▲", "2") },
+          { className: "log-table-cell delta improved", content: "20%" },
+          { className: "log-table-cell done", content: "50%" },
+        ],
+      },
+      {
+        className: "log-row worsened no-detail log-table-row",
+        cells: [
+          { className: "log-table-cell age", content: "65m" },
+          { className: "log-table-cell failed worsened", content: "9" },
+          { className: "log-table-cell result worsened", content: nestedResult("▼", "3") },
+          { className: "log-table-cell delta worsened", content: "25%" },
+          { className: "log-table-cell done", content: "75%" },
+        ],
+      },
+      {
+        className: "log-row unchanged no-detail log-table-row",
+        cells: [
+          { className: "log-table-cell age", content: "90m" },
+          { className: "log-table-cell failed unchanged", content: "—" },
+          { className: "log-table-cell result unchanged", content: "—" },
+          { className: "log-table-cell delta unchanged", content: "—" },
+          { className: "log-table-cell done", content: "—" },
+        ],
+      },
+      {
+        className: "log-row unchanged no-detail log-table-row",
+        cells: [
+          { className: "log-table-cell age", content: "120m" },
+          { className: "log-table-cell failed unchanged", content: "42" },
+          { className: "log-table-cell result unchanged", content: "0" },
+          { className: "log-table-cell delta unchanged", content: "0%" },
+          { className: "log-table-cell done", content: "50%" },
+        ],
+      },
+    ],
+    placeholderCount: 4,
+  };
+  const expected = "<div class=\"checklist-log-list\"><div class=\"checklist-log-table-header\"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class=\"log-row improved no-detail log-table-row\"><span class=\"log-table-cell age\">2m</span><span class=\"log-table-cell failed improved\">5</span><span class=\"log-table-cell result improved\"><span class=\"log-delta-content\"><span class=\"log-delta-indicator\">▲</span><span>2</span></span></span><span class=\"log-table-cell delta improved\">20%</span><span class=\"log-table-cell done\">50%</span></article><article class=\"log-row worsened no-detail log-table-row\"><span class=\"log-table-cell age\">65m</span><span class=\"log-table-cell failed worsened\">9</span><span class=\"log-table-cell result worsened\"><span class=\"log-delta-content\"><span class=\"log-delta-indicator\">▼</span><span>3</span></span></span><span class=\"log-table-cell delta worsened\">25%</span><span class=\"log-table-cell done\">75%</span></article><article class=\"log-row unchanged no-detail log-table-row\"><span class=\"log-table-cell age\">90m</span><span class=\"log-table-cell failed unchanged\">—</span><span class=\"log-table-cell result unchanged\">—</span><span class=\"log-table-cell delta unchanged\">—</span><span class=\"log-table-cell done\">—</span></article><article class=\"log-row unchanged no-detail log-table-row\"><span class=\"log-table-cell age\">120m</span><span class=\"log-table-cell failed unchanged\">42</span><span class=\"log-table-cell result unchanged\">0</span><span class=\"log-table-cell delta unchanged\">0%</span><span class=\"log-table-cell done\">50%</span></article><article class=\"log-row no-detail log-table-row log-placeholder-row\" aria-hidden=\"true\"><span class=\"log-table-cell age\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span></article><article class=\"log-row no-detail log-table-row log-placeholder-row\" aria-hidden=\"true\"><span class=\"log-table-cell age\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span></article><article class=\"log-row no-detail log-table-row log-placeholder-row\" aria-hidden=\"true\"><span class=\"log-table-cell age\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span></article><article class=\"log-row no-detail log-table-row log-placeholder-row\" aria-hidden=\"true\"><span class=\"log-table-cell age\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span><span class=\"log-table-cell\">.</span></article></div>";
+
+  assert.equal(renderToStaticMarkup(createElement(LogTable, props)), expected);
+});
diff --git a/dashboard/src/oven/LogTable/LogTable.tsx b/dashboard/src/oven/LogTable/LogTable.tsx
new file mode 100644
index 0000000..24c97e3
--- /dev/null
+++ b/dashboard/src/oven/LogTable/LogTable.tsx
@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+type LogTableProps = {
+  columns: string[];
+  rows: { key?: string; className: string; cells: { className: string; content: ReactNode }[] }[];
+  placeholderCount?: number;
+  emptyState?: ReactNode;
+  className?: string;
+  title?: string;
+};
+
+export function LogTable({ columns, rows, placeholderCount = 0, emptyState, className, title }: LogTableProps) {
+  return <div className={className ?? "checklist-log-list"} title={title}>
+    <div className="checklist-log-table-header">{columns.map((column, index) => <span key={index}>{column}</span>)}</div>
+    {rows.map((row, index) => <article className={row.className} key={row.key ?? index}>{row.cells.map((cell, cellIndex) => <span className={cell.className} key={cellIndex}>{cell.content}</span>)}</article>)}
+    {Array.from({ length: Math.max(0, placeholderCount ?? 0) }).map((_, index) => <article className="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true" key={`placeholder-${index}`}>{columns.map((_, columnIndex) => <span className={columnIndex === 0 ? "log-table-cell age" : "log-table-cell"} key={columnIndex}>.</span>)}</article>)}
+    {rows.length === 0 && emptyState}
+  </div>;
+}
diff --git a/dashboard/src/oven/LogTable/index.ts b/dashboard/src/oven/LogTable/index.ts
new file mode 100644
index 0000000..b0db52c
--- /dev/null
+++ b/dashboard/src/oven/LogTable/index.ts
@@ -0,0 +1 @@
+export { LogTable } from "./LogTable";
diff --git a/dashboard/src/oven/MetricTiles/MetricTiles.test.ts b/dashboard/src/oven/MetricTiles/MetricTiles.test.ts
new file mode 100644
index 0000000..c3501ef
--- /dev/null
+++ b/dashboard/src/oven/MetricTiles/MetricTiles.test.ts
@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { MetricTiles } from "./MetricTiles";
+
+function referencePercent(value) {
+  return `${(value * 100).toFixed(value < 0.01 ? 3 : 2)}%`;
+}
+
+function referenceDelta(value) {
+  return value.toFixed(4).replace(/0+$/u, "").replace(/\.$/u, "");
+}
+
+function FrozenMetricTiles({ passed, total, ratio, meanAbsoluteDelta, maximumAbsoluteDelta }) {
+  return createElement(
+    "div",
+    { className: "visual-parity-metrics" },
+    createElement("article", null, createElement("span", null, "Frames"), createElement("strong", null, passed, "/", total)),
+    createElement("article", null, createElement("span", null, "Changed pixels"), createElement("strong", null, referencePercent(ratio))),
+    createElement("article", null, createElement("span", null, "Mean RGB delta"), createElement("strong", null, referenceDelta(meanAbsoluteDelta))),
+    createElement("article", null, createElement("span", null, "Maximum delta"), createElement("strong", null, maximumAbsoluteDelta)),
+  );
+}
+
+test("MetricTiles matches its formatted metric snapshot", () => {
+  const props = { passed: 2, total: 3, ratio: 0.001234, meanAbsoluteDelta: 0.12, maximumAbsoluteDelta: 7 };
+  assert.equal(renderToString(createElement(MetricTiles, props)), renderToString(createElement(FrozenMetricTiles, props)));
+});
diff --git a/dashboard/src/oven/MetricTiles/MetricTiles.tsx b/dashboard/src/oven/MetricTiles/MetricTiles.tsx
new file mode 100644
index 0000000..00059c5
--- /dev/null
+++ b/dashboard/src/oven/MetricTiles/MetricTiles.tsx
@@ -0,0 +1,13 @@
+import { delta, percent } from "../utils/visual-parity-format";
+
+type MetricTilesProps = {
+  passed: number;
+  total: number;
+  ratio: number;
+  meanAbsoluteDelta: number;
+  maximumAbsoluteDelta: number;
+};
+
+export function MetricTiles({ passed, total, ratio, meanAbsoluteDelta, maximumAbsoluteDelta }: MetricTilesProps) {
+  return <div className="visual-parity-metrics"><article><span>Frames</span><strong>{passed}/{total}</strong></article><article><span>Changed pixels</span><strong>{percent(ratio)}</strong></article><article><span>Mean RGB delta</span><strong>{delta(meanAbsoluteDelta)}</strong></article><article><span>Maximum delta</span><strong>{maximumAbsoluteDelta}</strong></article></div>;
+}
diff --git a/dashboard/src/oven/MetricTiles/index.ts b/dashboard/src/oven/MetricTiles/index.ts
new file mode 100644
index 0000000..793c6ac
--- /dev/null
+++ b/dashboard/src/oven/MetricTiles/index.ts
@@ -0,0 +1 @@
+export { MetricTiles } from "./MetricTiles";
diff --git a/dashboard/src/oven/OvenView/OvenView.test.ts b/dashboard/src/oven/OvenView/OvenView.test.ts
new file mode 100644
index 0000000..88aca21
--- /dev/null
+++ b/dashboard/src/oven/OvenView/OvenView.test.ts
@@ -0,0 +1,133 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ClipboardList } from "lucide-react";
+import { DomainNote } from "../DomainNote/DomainNote";
+import { MetricTiles } from "../MetricTiles/MetricTiles";
+import { KpiItem } from "../KpiItem/KpiItem";
+import { ProgressDonut } from "../ProgressDonut/ProgressDonut";
+import { OvenView } from "./OvenView";
+
+function render(def, payload) {
+  return renderToString(createElement(OvenView, { def, payload }));
+}
+
+test("resolves declarative component props to the handwritten markup", () => {
+  const payload = {
+    total: 3,
+    summary: { passed: 2, ratio: 0.001234, meanAbsoluteDelta: 0.12, maximumAbsoluteDelta: 7, isTarget: true, rationale: "Target evidence" },
+  };
+  const def = {
+    sections: [{
+      key: "metrics",
+      element: "div",
+      className: "visual-parity-content",
+      cells: [
+        {
+          component: "MetricTiles",
+          key: "metrics",
+          bind: {
+            passed: { source: "/summary/passed" },
+            total: { source: "/total" },
+            ratio: { source: "/summary/ratio" },
+            meanAbsoluteDelta: { source: "/summary/meanAbsoluteDelta" },
+            maximumAbsoluteDelta: { source: "/summary/maximumAbsoluteDelta" },
+          },
+        },
+        {
+          component: "DomainNote",
+          key: "note",
+          bind: { isTarget: { source: "/summary/isTarget" }, rationale: { source: "/summary/rationale" } },
+        },
+      ],
+    }],
+  };
+  const props = { passed: 2, total: 3, ratio: 0.001234, meanAbsoluteDelta: 0.12, maximumAbsoluteDelta: 7 };
+  const expected = createElement(
+    "div",
+    { className: "visual-parity-content" },
+    createElement(MetricTiles, props),
+    createElement(DomainNote, { isTarget: true, rationale: "Target evidence" }),
+  );
+
+  assert.equal(render(def, payload), renderToString(expected));
+});
+
+test("renders nested component and text slots byte-equivalently", () => {
+  const def = {
+    sections: [{
+      key: "progress",
+      element: "div",
+      className: "kpi-content",
+      cells: [{
+        component: "KpiItem",
+        key: "progress",
+        props: { className: "kpi-item", heading: "Progress", title: "Current progress" },
+        slots: {
+          visual: { component: "ProgressDonut", bind: { percent: { source: "/percent" } } },
+          value: { text: "72%" },
+        },
+      }],
+    }],
+  };
+  const expected = createElement(
+    "div",
+    { className: "kpi-content" },
+    createElement(KpiItem, {
+      className: "kpi-item",
+      heading: "Progress",
+      title: "Current progress",
+      visual: createElement(ProgressDonut, { percent: 72 }),
+      value: "72%",
+    }),
+  );
+
+  assert.equal(render(def, { percent: 72 }), renderToString(expected));
+});
+
+test("resolves a named icon slot to the matching handwritten element", () => {
+  const iconProps = { "aria-hidden": "true", className: "driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" };
+  const def = {
+    sections: [{
+      key: "current-section",
+      element: "div",
+      cells: [{
+        component: "KpiItem",
+        key: "current",
+        props: { className: "kpi-item", heading: "Current" },
+        slots: { visual: { icon: "ClipboardList" }, value: { text: "Complete" } },
+      }],
+    }],
+  };
+  const expected = createElement("div", null, createElement(KpiItem, {
+    className: "kpi-item",
+    heading: "Current",
+    visual: createElement(ClipboardList, iconProps),
+    value: "Complete",
+  }));
+
+  assert.equal(render(def, {}), renderToString(expected));
+});
+
+test("applies named format transforms before passing bound props", () => {
+  const def = {
+    sections: [{
+      key: "formatted-note",
+      element: "div",
+      cells: [{ key: "formatted-note", component: "DomainNote", props: { isTarget: true }, bind: { rationale: { source: "/ratio", format: "percent" } } }],
+    }],
+  };
+  const expected = createElement("div", null, createElement(DomainNote, { isTarget: true, rationale: "12.35%" }));
+
+  assert.equal(render(def, { ratio: 0.12345 }), renderToString(expected));
+});
+
+test("rejects unknown registry keys", () => {
+  assert.throws(() => render({ sections: [{ cells: [{ component: "MissingComponent" }] }] }, {}), /Unknown oven component: MissingComponent/u);
+  assert.throws(() => render({ sections: [{ cells: [{ component: "DomainNote", bind: { rationale: { source: "/value", format: "missing" } } }] }] }, { value: "x" }), /Unknown oven format: missing/u);
+  assert.throws(() => render({ sections: [{ cells: [{ component: "KpiItem", slots: { visual: { icon: "MissingIcon" } } }] }] }, {}), /Unknown oven icon: MissingIcon/u);
+  assert.throws(() => render({ sections: [{ cells: [{ component: "toString" }] }] }, {}), /Unknown oven component: toString/u);
+  assert.throws(() => render({ sections: [{ cells: [{ component: "DomainNote", bind: { rationale: { source: "/value", format: "toString" } } }] }] }, { value: "x" }), /Unknown oven format: toString/u);
+  assert.throws(() => render({ sections: [{ cells: [{ component: "KpiItem", slots: { visual: { icon: "toString" } } }] }] }, {}), /Unknown oven icon: toString/u);
+});
diff --git a/dashboard/src/oven/OvenView/OvenView.tsx b/dashboard/src/oven/OvenView/OvenView.tsx
new file mode 100644
index 0000000..2913090
--- /dev/null
+++ b/dashboard/src/oven/OvenView/OvenView.tsx
@@ -0,0 +1,63 @@
+/*
+ * Tier-C limits: cells do not express event callbacks (DomainTabs.onSelect or
+ * expand toggles), component-local React state, live subscriptions such as
+ * useOvenLiveData, or arbitrary JSX fragments in rich multi-child value slots.
+ * Keep those bespoke, or model a value as nested cells.
+ */
+import { createElement, Fragment, type ReactElement } from "react";
+import { resolvePointer } from "../utils/json-pointer";
+import { componentRegistry, formatRegistry, iconRegistry } from "./registries";
+import type { CellDef, JsonValue, OvenViewDef, SlotDef } from "./types";
+
+export type OvenViewProps = {
+  def: OvenViewDef;
+  payload: JsonValue;
+};
+
+function resolveSlot(slotDef: SlotDef, payload: JsonValue): ReactElement | string | null {
+  if ("component" in slotDef) return resolveCell(slotDef, payload);
+  if ("icon" in slotDef) {
+    const icon = iconRegistry[slotDef.icon];
+    if (!icon) throw new Error(`Unknown oven icon: ${slotDef.icon}`);
+    return icon as ReactElement;
+  }
+  return slotDef.text;
+}
+
+function resolveCell(cell: CellDef, payload: JsonValue): ReactElement {
+  const Component = componentRegistry[cell.component];
+  if (!Component) throw new Error(`Unknown oven component: ${cell.component}`);
+
+  const props: Record<string, unknown> = { ...cell.props };
+  for (const [name, binding] of Object.entries(cell.bind ?? {})) {
+    const format = formatRegistry[binding.format ?? "identity"];
+    if (!format) throw new Error(`Unknown oven format: ${binding.format}`);
+    props[name] = format(resolvePointer(payload, binding.source));
+  }
+  for (const [name, slotDef] of Object.entries(cell.slots ?? {})) {
+    props[name] = resolveSlot(slotDef, payload);
+  }
+
+  const children = cell.children?.map((child) => resolveCell(child, payload)) ?? [];
+  return createElement(Component, { key: cell.key, ...props }, ...children);
+}
+
+function resolveSection(section: OvenViewDef["sections"][number], payload: JsonValue): ReactElement {
+  if (section.element === "fragment") return createElement(Fragment, { key: section.key }, section.text, ...section.cells.map((cell) => resolveCell(cell, payload)));
+  const element = section.element ?? "section";
+  const props: Record<string, unknown> = { className: section.className, ...section.props, key: section.key };
+  return createElement(element, props, section.text, ...section.cells.map((cell) => resolveCell(cell, payload)));
+}
+
+export function OvenView({ def, payload }: OvenViewProps) {
+  const sections = def.sections.map((section) => resolveSection(section, payload));
+  if (def.shellClassName === undefined && def.bodyClassName === undefined && def.bodyId === undefined) {
+    return createElement(Fragment, null, ...sections);
+  }
+
+  return createElement(
+    "div",
+    { className: def.shellClassName },
+    createElement("main", { className: def.bodyClassName, id: def.bodyId }, ...sections),
+  );
+}
diff --git a/dashboard/src/oven/OvenView/index.ts b/dashboard/src/oven/OvenView/index.ts
new file mode 100644
index 0000000..c72d22f
--- /dev/null
+++ b/dashboard/src/oven/OvenView/index.ts
@@ -0,0 +1,3 @@
+export { OvenView } from "./OvenView";
+export type { OvenViewProps } from "./OvenView";
+export type { Binding, CellDef, JsonPrimitive, JsonValue, OvenViewDef, SectionDef, SlotDef } from "./types";
diff --git a/dashboard/src/oven/OvenView/registries.ts b/dashboard/src/oven/OvenView/registries.ts
new file mode 100644
index 0000000..78457b1
--- /dev/null
+++ b/dashboard/src/oven/OvenView/registries.ts
@@ -0,0 +1,123 @@
+import { createElement, type ComponentType, type ReactNode } from "react";
+import { ArrowLeft, ClipboardList, Clock3, Gauge, TimerReset } from "lucide-react";
+import { DiffCard } from "../DiffCard";
+import { DiffCardList } from "../DiffCardList";
+import { DomainNote } from "../DomainNote";
+import { DomainTabs } from "../DomainTabs";
+import { FeedList } from "../FeedList";
+import { FileDiff } from "../FileDiff";
+import { StreamingDiffHeading } from "../StreamingDiffHeading";
+import { FrameCard } from "../FrameCard";
+import { ImageTriptych } from "../ImageTriptych";
+import { KpiItem } from "../KpiItem";
+import { KpiStrip } from "../KpiStrip";
+import { LogTable } from "../LogTable";
+import { MetricTiles } from "../MetricTiles";
+import { ProgressDonut } from "../ProgressDonut";
+import { SectionHeader } from "../SectionHeader";
+import { VerdictHeader } from "../VerdictHeader";
+import { Box } from "../Box/Box";
+import { ChecklistBurnPanel } from "../ChecklistBurnPanel/ChecklistBurnPanel";
+import { ChecklistEventCards } from "../ChecklistEventCards/ChecklistEventCards";
+import { ChecklistLedger } from "../ChecklistLedger/ChecklistLedger";
+import { ChecklistProgressValue } from "../ChecklistProgressValue/ChecklistProgressValue";
+import { BurnDonut } from "../BurnDonut/BurnDonut";
+import { DifferentialKpiStrip } from "../DifferentialKpiStrip/DifferentialKpiStrip";
+import { DifferentialLogTable } from "../DifferentialLogTable/DifferentialLogTable";
+import { DifferentialEmptyState } from "../DifferentialEmptyState/DifferentialEmptyState";
+import { DifferentialFrameDeltaChart, DifferentialProgressChart } from "../DifferentialProgressChart";
+import { WaffleMetric } from "../WaffleMetric/WaffleMetric";
+import { delta as formatDelta, percent as formatPercent } from "../utils/visual-parity-format";
+import { differentialFormatRegistry } from "../runtime/differential-testing-formats";
+
+function number(value: unknown): string {
+  if (value === null || value === undefined || value === "") return "";
+  const parsed = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(parsed) ? new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(parsed) : "";
+}
+
+function ratioToPercent(value: unknown): number | undefined {
+  if (value === null || value === undefined) return undefined;
+  const parsed = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(parsed) ? parsed * 100 : undefined;
+}
+
+function length(value: unknown): number | undefined {
+  return typeof value === "string" || Array.isArray(value) ? value.length : undefined;
+}
+
+function parseDate(value: unknown): Date | undefined {
+  if (value instanceof Date) return Number.isNaN(value.valueOf()) ? undefined : value;
+  if (typeof value !== "string" && typeof value !== "number") return undefined;
+  const date = new Date(value);
+  return Number.isNaN(date.valueOf()) ? undefined : date;
+}
+
+function timeOnly(value: unknown): string {
+  const date = parseDate(value);
+  return date ? date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false }) : "";
+}
+
+function relativeAge(value: unknown): string {
+  const date = parseDate(value);
+  if (!date) return "";
+  const seconds = Math.max(0, Math.floor((Date.now() - date.valueOf()) / 1000));
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3_600) return `${Math.floor(seconds / 60)}m`;
+  if (seconds < 86_400) return `${Math.floor(seconds / 3_600)}h`;
+  return `${Math.floor(seconds / 86_400)}d`;
+}
+
+export const componentRegistry: Record<string, ComponentType<any>> = Object.freeze(Object.assign(Object.create(null), {
+  KpiStrip,
+  KpiItem,
+  ProgressDonut,
+  SectionHeader,
+  LogTable,
+  MetricTiles,
+  VerdictHeader,
+  DomainTabs,
+  DomainNote,
+  FrameCard,
+  ImageTriptych,
+  FeedList,
+  DiffCard,
+  DiffCardList,
+  FileDiff,
+  StreamingDiffHeading,
+  Box,
+  ChecklistBurnPanel,
+  ChecklistEventCards,
+  ChecklistLedger,
+  ChecklistProgressValue,
+  BurnDonut,
+  DifferentialKpiStrip,
+  DifferentialLogTable,
+  DifferentialEmptyState,
+  DifferentialFrameDeltaChart,
+  DifferentialProgressChart,
+  WaffleMetric,
+}));
+
+export const formatRegistry: Record<string, (value: unknown) => unknown> = Object.freeze(Object.assign(Object.create(null), {
+  identity: (value) => value,
+  plain: (value) => value,
+  number,
+  percent: (value) => value === null || value === undefined ? "" : formatPercent(value as number),
+  delta: (value) => value === null || value === undefined ? "" : formatDelta(value as number),
+  "ratio-to-percent": ratioToPercent,
+  length,
+  "time-only": timeOnly,
+  "relative-age": relativeAge,
+  ...differentialFormatRegistry,
+}));
+
+const kpiIconProps = { "aria-hidden": "true", className: "driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" };
+
+export const iconRegistry: Record<string, ReactNode> = Object.freeze(Object.assign(Object.create(null), {
+  ClipboardList: createElement(ClipboardList, kpiIconProps),
+  Clock3: createElement(Clock3, kpiIconProps),
+  Gauge: createElement(Gauge, kpiIconProps),
+  TimerReset: createElement(TimerReset, kpiIconProps),
+  ArrowLeft: createElement(ArrowLeft, { "aria-hidden": "true" }),
+}));
diff --git a/dashboard/src/oven/OvenView/types.ts b/dashboard/src/oven/OvenView/types.ts
new file mode 100644
index 0000000..be55e20
--- /dev/null
+++ b/dashboard/src/oven/OvenView/types.ts
@@ -0,0 +1,36 @@
+export type JsonPrimitive = string | number | boolean | null;
+export type JsonValue = JsonPrimitive | JsonValue[] | { [key: string]: JsonValue };
+
+export type Binding = {
+  source: string;
+  format?: string;
+};
+
+export type SlotDef = CellDef | { icon: string } | { text: string };
+
+export type CellDef = {
+  component: string;
+  props?: Record<string, JsonValue>;
+  bind?: Record<string, Binding>;
+  slots?: Record<string, SlotDef>;
+  children?: CellDef[];
+  key?: string;
+};
+
+export type SectionDef = {
+  element?: "section" | "div" | "nav" | "main" | "span" | "fragment";
+  className?: string;
+  text?: string;
+  props?: Record<string, JsonValue>;
+  cells: CellDef[];
+  key?: string;
+};
+
+export type OvenViewDef = {
+  shellClassName?: string;
+  bodyId?: string;
+  bodyClassName?: string;
+  // Reserved metadata for a future body-class effect; OvenView must not touch document.body.
+  bodyClasses?: string[];
+  sections: SectionDef[];
+};
diff --git a/dashboard/src/oven/PaginationBar/PaginationBar.test.ts b/dashboard/src/oven/PaginationBar/PaginationBar.test.ts
new file mode 100644
index 0000000..d9081a5
--- /dev/null
+++ b/dashboard/src/oven/PaginationBar/PaginationBar.test.ts
@@ -0,0 +1,85 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { assertDomEquivalent, extractById } from "../test-support/dom-normalize";
+import { PaginationBar, type PaginationBarProps } from "./PaginationBar";
+
+const goldenDir = resolve("dashboard/src/oven/differential-testing-render/goldens");
+
+function render(props: PaginationBarProps): string {
+  return renderToStaticMarkup(createElement(PaginationBar, props));
+}
+
+function expectedPagination({
+  pageSize,
+  pageIndex,
+  pageCount,
+  start,
+  end,
+  total,
+}: PaginationBarProps): string {
+  return `<div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination"${total <= pageSize ? " hidden" : ""}>
+    <select id="driving-parity-page-size" aria-label="Differential Testing rows per page">
+      <option value="25"${pageSize === 25 ? " selected" : ""}>25</option>
+      <option value="50"${pageSize === 50 ? " selected" : ""}>50</option>
+      <option value="100"${pageSize === 100 ? " selected" : ""}>100</option>
+      <option value="200"${pageSize === 200 ? " selected" : ""}>200</option>
+    </select>
+    <button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page"${pageIndex === 0 ? " disabled" : ""}>Prev</button>
+    <span class="page-status" id="driving-parity-page-status">${start}-${end} / ${total}</span>
+    <button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page"${pageIndex >= pageCount - 1 ? " disabled" : ""}>Next</button>
+  </div>`;
+}
+
+function assertPagination(props: PaginationBarProps, message: string): void {
+  assertDomEquivalent(render(props), expectedPagination(props), message);
+}
+
+test("PaginationBar hides when the visible total fits on one page", () => {
+  assertPagination({ pageSize: 25, pageIndex: 0, pageCount: 1, start: 1, end: 25, total: 25 }, "hidden pagination differs");
+  assertPagination({ pageSize: 25, pageIndex: 0, pageCount: 1, start: 1, end: 2, total: 2 }, "hidden pagination differs");
+});
+
+test("PaginationBar enables the bar when more rows are visible", () => {
+  assertPagination({ pageSize: 25, pageIndex: 0, pageCount: 2, start: 1, end: 25, total: 26 }, "visible pagination differs");
+});
+
+test("PaginationBar disables the previous button only on the first page", () => {
+  assertPagination({ pageSize: 25, pageIndex: 0, pageCount: 3, start: 1, end: 25, total: 60 }, "first page differs");
+  assertPagination({ pageSize: 25, pageIndex: 1, pageCount: 3, start: 26, end: 50, total: 60 }, "middle page differs");
+});
+
+test("PaginationBar disables the next button on the last page", () => {
+  assertPagination({ pageSize: 25, pageIndex: 1, pageCount: 2, start: 26, end: 30, total: 30 }, "last page differs");
+});
+
+test("PaginationBar keeps both navigation buttons enabled on a middle page", () => {
+  assertPagination({ pageSize: 25, pageIndex: 1, pageCount: 3, start: 26, end: 50, total: 60 }, "middle page differs");
+});
+
+test("PaginationBar selects each fixed page size option", () => {
+  for (const pageSize of [25, 50, 100, 200]) {
+    assertPagination({ pageSize, pageIndex: 0, pageCount: 2, start: 1, end: pageSize, total: pageSize + 1 }, `page size ${pageSize} differs`);
+  }
+});
+
+test("PaginationBar disables next for a one-page count even when total exceeds page size", () => {
+  assertPagination({ pageSize: 25, pageIndex: 0, pageCount: 1, start: 1, end: 25, total: 60 }, "single-page edge differs");
+});
+
+test("PaginationBar matches the selected DT goldens", () => {
+  const states: Array<[string, PaginationBarProps]> = [
+    ["dt-main", { pageSize: 25, pageIndex: 0, pageCount: 1, start: 1, end: 2, total: 2 }],
+    ["dt-paginated", { pageSize: 25, pageIndex: 0, pageCount: 3, start: 1, end: 25, total: 60 }],
+    ["dt-paginated-mid", { pageSize: 25, pageIndex: 1, pageCount: 3, start: 26, end: 50, total: 60 }],
+    ["dt-server-paged", { pageSize: 25, pageIndex: 0, pageCount: 1, start: 1, end: 2, total: 2 }],
+  ];
+
+  for (const [name, props] of states) {
+    const golden = readFileSync(resolve(goldenDir, `${name}.html`), "utf8");
+    assertDomEquivalent(render(props), extractById(golden, "driving-parity-pagination"), `${name} pagination differs`);
+  }
+});
diff --git a/dashboard/src/oven/PaginationBar/PaginationBar.tsx b/dashboard/src/oven/PaginationBar/PaginationBar.tsx
new file mode 100644
index 0000000..4fc25d0
--- /dev/null
+++ b/dashboard/src/oven/PaginationBar/PaginationBar.tsx
@@ -0,0 +1,65 @@
+import type { ChangeEvent } from "react";
+
+export type PaginationBarProps = {
+  pageSize: number;
+  pageIndex: number;
+  pageCount: number;
+  start: number;
+  end: number;
+  total: number;
+  onPageSizeChange?: (size: number) => void;
+  onPrev?: () => void;
+  onNext?: () => void;
+};
+
+const PAGE_SIZE_OPTIONS = [25, 50, 100, 200] as const;
+
+export function PaginationBar({
+  pageSize,
+  pageIndex,
+  pageCount,
+  start,
+  end,
+  total,
+  onPageSizeChange,
+  onPrev,
+  onNext,
+}: PaginationBarProps) {
+  const hidden = total <= pageSize;
+  const prevDisabled = pageIndex === 0;
+  const nextDisabled = pageIndex >= pageCount - 1;
+
+  function handlePageSizeChange(event: ChangeEvent<HTMLSelectElement>) {
+    onPageSizeChange?.(Number(event.currentTarget.value));
+  }
+
+  return <div
+    id="driving-parity-pagination"
+    className="driving-parity-controls driving-parity-pagination"
+    hidden={hidden}
+  >
+    <select
+      id="driving-parity-page-size"
+      aria-label="Differential Testing rows per page"
+      defaultValue={String(pageSize)}
+      onChange={handlePageSizeChange}
+    >
+      {PAGE_SIZE_OPTIONS.map((size) => <option key={size} value={size}>{size}</option>)}
+    </select>
+    <button
+      type="button"
+      id="driving-parity-page-prev"
+      aria-label="Differential Testing previous page"
+      disabled={prevDisabled}
+      onClick={onPrev}
+    >Prev</button>
+    <span className="page-status" id="driving-parity-page-status">{`${start}-${end} / ${total}`}</span>
+    <button
+      type="button"
+      id="driving-parity-page-next"
+      aria-label="Differential Testing next page"
+      disabled={nextDisabled}
+      onClick={onNext}
+    >Next</button>
+  </div>;
+}
diff --git a/dashboard/src/oven/PaginationBar/index.ts b/dashboard/src/oven/PaginationBar/index.ts
new file mode 100644
index 0000000..0bdba5d
--- /dev/null
+++ b/dashboard/src/oven/PaginationBar/index.ts
@@ -0,0 +1,2 @@
+export { PaginationBar } from "./PaginationBar";
+export type { PaginationBarProps } from "./PaginationBar";
diff --git a/dashboard/src/oven/ProgressDonut/ProgressDonut.oracle.test.ts b/dashboard/src/oven/ProgressDonut/ProgressDonut.oracle.test.ts
new file mode 100644
index 0000000..802a5ed
--- /dev/null
+++ b/dashboard/src/oven/ProgressDonut/ProgressDonut.oracle.test.ts
@@ -0,0 +1,25 @@
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { progressDonut } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent, extractFirstByClass } from "../test-support/dom-normalize";
+import { ProgressDonut } from "./ProgressDonut";
+
+test("ProgressDonut matches the DT oracle dash formatting", () => {
+  const cases = [
+    [],
+    [{ frames: 0, frame: 0 }],
+    [{ frames: 3, frame: 1 }],
+    [{ frames: 1_000_000, frame: 999_999 }],
+    [{ frames: 10, frame: 15 }],
+  ];
+
+  for (const entries of cases) {
+    const latest = entries[entries.length - 1];
+    const total = Math.max(0, Number(latest?.frames) || 0);
+    const done = Math.max(0, Math.min(total, Number(latest?.frame) || 0));
+    const actual = renderToStaticMarkup(createElement(ProgressDonut, { percent: total ? done / total * 100 : 0 }));
+    const expected = extractFirstByClass(progressDonut(entries), "driving-parity-kpi-progress-donut");
+    assertDomEquivalent(actual, expected, `progress mismatch for ${entries.length} entries`);
+  }
+});
diff --git a/dashboard/src/oven/ProgressDonut/ProgressDonut.test.ts b/dashboard/src/oven/ProgressDonut/ProgressDonut.test.ts
new file mode 100644
index 0000000..c15ad38
--- /dev/null
+++ b/dashboard/src/oven/ProgressDonut/ProgressDonut.test.ts
@@ -0,0 +1,18 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ProgressDonut } from "./ProgressDonut";
+
+test("ProgressDonut keeps its static markup for representative values", async () => {
+    for (const percent of [0, 37.5, 50, 99.999, 100, -5, 150]) {
+      const donePercent = Math.max(0, Math.min(100, percent));
+      const remainingPercent = Math.max(0, 100 - donePercent);
+      const expected = `<svg aria-hidden="true" class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"></circle><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" stroke-dasharray="${donePercent.toFixed(3)} ${remainingPercent.toFixed(3)}" transform="rotate(-90 29 29)"></circle></svg>`;
+      assert.equal(renderToStaticMarkup(createElement(ProgressDonut, { percent })), expected);
+    }
+    assert.equal(
+      renderToStaticMarkup(createElement(ProgressDonut, { percent: 50, className: "custom-donut" })),
+      `<svg aria-hidden="true" class="custom-donut" viewBox="0 0 58 58"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"></circle><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" stroke-dasharray="50.000 50.000" transform="rotate(-90 29 29)"></circle></svg>`,
+    );
+});
diff --git a/dashboard/src/oven/ProgressDonut/ProgressDonut.tsx b/dashboard/src/oven/ProgressDonut/ProgressDonut.tsx
new file mode 100644
index 0000000..b9f6d72
--- /dev/null
+++ b/dashboard/src/oven/ProgressDonut/ProgressDonut.tsx
@@ -0,0 +1,13 @@
+type ProgressDonutProps = {
+  percent: number;
+  className?: string;
+};
+
+export function ProgressDonut({
+  percent,
+  className = "driving-parity-kpi-gauge driving-parity-kpi-progress-donut",
+}: ProgressDonutProps) {
+  const donePercent = Math.max(0, Math.min(100, percent));
+  const remainingPercent = Math.max(0, 100 - donePercent);
+  return <svg aria-hidden="true" className={className} viewBox="0 0 58 58"><circle className="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21" /><circle className="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" strokeDasharray={`${donePercent.toFixed(3)} ${remainingPercent.toFixed(3)}`} transform="rotate(-90 29 29)" /></svg>;
+}
diff --git a/dashboard/src/oven/ProgressDonut/index.ts b/dashboard/src/oven/ProgressDonut/index.ts
new file mode 100644
index 0000000..c4e1620
--- /dev/null
+++ b/dashboard/src/oven/ProgressDonut/index.ts
@@ -0,0 +1 @@
+export { ProgressDonut } from "./ProgressDonut";
diff --git a/dashboard/src/oven/RefreshStatusChip/RefreshStatusChip.test.ts b/dashboard/src/oven/RefreshStatusChip/RefreshStatusChip.test.ts
new file mode 100644
index 0000000..dfc4a21
--- /dev/null
+++ b/dashboard/src/oven/RefreshStatusChip/RefreshStatusChip.test.ts
@@ -0,0 +1,111 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { differentialRefreshStatusLabel as oracleLabel } from "../differential-testing-render/differential-testing-renderer.js";
+import { assertDomEquivalent, extractById } from "../test-support/dom-normalize";
+import { differentialRefreshStatusLabel, RefreshStatusChip, type RefreshStatusChipProps } from "./RefreshStatusChip";
+
+const goldenDir = resolve("dashboard/src/oven/differential-testing-render/goldens");
+
+function render(props: RefreshStatusChipProps): string {
+  return renderToStaticMarkup(createElement(RefreshStatusChip, props));
+}
+
+test("differentialRefreshStatusLabel matches the vanilla oracle", () => {
+  const clientStatuses: Array<string | null | undefined> = [null, "loading", "queued", "running", "failed", "complete", undefined];
+  const refreshes: Array<RefreshStatusChipProps["refresh"]> = [
+    { status: undefined },
+    { status: "queued" },
+    { status: "running" },
+    { status: "failed" },
+    { status: "complete" },
+    undefined,
+  ];
+
+  for (const clientStatus of clientStatuses) {
+    for (const refresh of refreshes) {
+      assert.equal(
+        differentialRefreshStatusLabel(refresh, clientStatus),
+        oracleLabel(refresh, clientStatus),
+        `label differs for client=${String(clientStatus)}, refresh=${String(refresh?.status)}`,
+      );
+    }
+  }
+});
+
+test("RefreshStatusChip matches the hand-written DOM contract", () => {
+  const cases: Array<[string, RefreshStatusChipProps, string]> = [
+    [
+      "complete empty label",
+      { refresh: { status: "complete" } },
+      '<span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span>',
+    ],
+    [
+      "missing refresh",
+      {},
+      '<span id="differential-refresh-status" class="differential-refresh-status " title="" hidden></span>',
+    ],
+    [
+      "queued",
+      { refresh: { status: "queued" } },
+      '<span id="differential-refresh-status" class="differential-refresh-status queued" title="Queued">Queued</span>',
+    ],
+    [
+      "running",
+      { refresh: { status: "running" } },
+      '<span id="differential-refresh-status" class="differential-refresh-status running" title="Updating">Updating</span>',
+    ],
+    [
+      "failed with error",
+      { refresh: { status: "failed", error: "Request failed" } },
+      '<span id="differential-refresh-status" class="differential-refresh-status failed" title="Request failed">Update failed</span>',
+    ],
+    [
+      "failed without error",
+      { refresh: { status: "failed" } },
+      '<span id="differential-refresh-status" class="differential-refresh-status failed" title="Update failed">Update failed</span>',
+    ],
+    [
+      "client status override",
+      { refresh: { status: "complete" }, clientStatus: "loading" },
+      '<span id="differential-refresh-status" class="differential-refresh-status loading" title="Loading">Loading</span>',
+    ],
+    [
+      "complete client status preserves queued refresh label",
+      { refresh: { status: "queued", error: "stale" }, clientStatus: "complete" },
+      '<span id="differential-refresh-status" class="differential-refresh-status complete" title="Queued">Queued</span>',
+    ],
+    [
+      "running status ignores stale error",
+      { refresh: { status: "running", error: "stale" } },
+      '<span id="differential-refresh-status" class="differential-refresh-status running" title="Updating">Updating</span>',
+    ],
+    [
+      "failed status with empty error falls back to label",
+      { refresh: { status: "failed", error: "" } },
+      '<span id="differential-refresh-status" class="differential-refresh-status failed" title="Update failed">Update failed</span>',
+    ],
+    [
+      "escaped failed error",
+      { refresh: { status: "failed", error: `Bad <&'" error` } },
+      '<span id="differential-refresh-status" class="differential-refresh-status failed" title="Bad &lt;&amp;\'&quot; error">Update failed</span>',
+    ],
+  ];
+
+  for (const [name, props, expected] of cases) assertDomEquivalent(render(props), expected, name);
+});
+
+test("RefreshStatusChip matches the DT refresh-status goldens", () => {
+  const cases: Array<[string, RefreshStatusChipProps]> = [
+    ["dt-main", { refresh: { status: "complete" } }],
+    ["pt-main", {}],
+  ];
+
+  for (const [name, props] of cases) {
+    const golden = readFileSync(resolve(goldenDir, `${name}.html`), "utf8");
+    assertDomEquivalent(render(props), extractById(golden, "differential-refresh-status"), `${name} refresh status differs`);
+  }
+});
diff --git a/dashboard/src/oven/RefreshStatusChip/RefreshStatusChip.tsx b/dashboard/src/oven/RefreshStatusChip/RefreshStatusChip.tsx
new file mode 100644
index 0000000..648d086
--- /dev/null
+++ b/dashboard/src/oven/RefreshStatusChip/RefreshStatusChip.tsx
@@ -0,0 +1,33 @@
+export type RefreshStatus = {
+  status?: string;
+  error?: string;
+};
+
+export type RefreshStatusChipProps = {
+  refresh?: RefreshStatus;
+  clientStatus?: string | null;
+};
+
+export function differentialRefreshStatusLabel(refresh?: RefreshStatus, clientStatus?: string | null): string {
+  if (clientStatus === "loading") return "Loading";
+  if (clientStatus === "queued") return "Queued";
+  if (clientStatus === "running") return "Updating";
+  if (clientStatus === "failed") return "Update failed";
+  if (refresh?.status === "queued") return "Queued";
+  if (refresh?.status === "running") return "Updating";
+  if (refresh?.status === "failed") return "Update failed";
+  return "";
+}
+
+export function RefreshStatusChip({ refresh, clientStatus = null }: RefreshStatusChipProps) {
+  const label = differentialRefreshStatusLabel(refresh, clientStatus);
+  const statusClass = clientStatus || refresh?.status || "";
+  const statusTitle = refresh?.status === "failed" ? refresh.error || label : label;
+
+  return <span
+    id="differential-refresh-status"
+    className={`differential-refresh-status ${statusClass}`}
+    title={statusTitle}
+    hidden={!label}
+  >{label}</span>;
+}
diff --git a/dashboard/src/oven/RefreshStatusChip/index.ts b/dashboard/src/oven/RefreshStatusChip/index.ts
new file mode 100644
index 0000000..8089567
--- /dev/null
+++ b/dashboard/src/oven/RefreshStatusChip/index.ts
@@ -0,0 +1,2 @@
+export { RefreshStatusChip, differentialRefreshStatusLabel } from "./RefreshStatusChip";
+export type { RefreshStatus, RefreshStatusChipProps } from "./RefreshStatusChip";
diff --git a/dashboard/src/oven/SectionHeader/SectionHeader.test.ts b/dashboard/src/oven/SectionHeader/SectionHeader.test.ts
new file mode 100644
index 0000000..576a552
--- /dev/null
+++ b/dashboard/src/oven/SectionHeader/SectionHeader.test.ts
@@ -0,0 +1,35 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup, renderToString } from "react-dom/server";
+import { SectionHeader } from "./SectionHeader";
+
+test("SectionHeader keeps count and child markup stable", async () => {
+    assert.equal(
+      renderToStaticMarkup(createElement(SectionHeader, { title: "Events", count: 3 })),
+      `<h2>Events <span class="field-list-count">(3)</span></h2>`,
+    );
+    assert.equal(
+      renderToStaticMarkup(createElement(SectionHeader, { title: "Fields List", count: 12 })),
+      `<h2>Fields List <span class="field-list-count">(12)</span></h2>`,
+    );
+    assert.equal(
+      renderToStaticMarkup(createElement(SectionHeader, {
+        title: "Events", count: 3, children: createElement("span", { className: "custom-count" }, "(custom)"),
+      })),
+      `<h2>Events <span class="custom-count">(custom)</span></h2>`,
+    );
+    assert.equal(
+      renderToStaticMarkup(createElement(SectionHeader, { title: "Events", count: 3, className: "events-heading" })),
+      `<h2 class="events-heading">Events <span class="field-list-count">(3)</span></h2>`,
+    );
+
+    function ReferenceSectionHeader({ title, count }) {
+      return createElement("h2", null, `${title} `, createElement("span", { className: "field-list-count" }, "(", count, ")"));
+    }
+
+    const sectionHeaderOutput = renderToString(createElement(SectionHeader, { title: "Events", count: 3 }));
+    const referenceOutput = renderToString(createElement(ReferenceSectionHeader, { title: "Events", count: 3 }));
+    assert.equal(sectionHeaderOutput, referenceOutput);
+    assert.match(sectionHeaderOutput, /^<h2>Events <span class="field-list-count">/u);
+});
diff --git a/dashboard/src/oven/SectionHeader/SectionHeader.tsx b/dashboard/src/oven/SectionHeader/SectionHeader.tsx
new file mode 100644
index 0000000..3e775e4
--- /dev/null
+++ b/dashboard/src/oven/SectionHeader/SectionHeader.tsx
@@ -0,0 +1,10 @@
+type SectionHeaderProps = {
+  title: string;
+  count?: number;
+  className?: string;
+  children?: import("react").ReactNode;
+};
+
+export function SectionHeader({ title, count, className, children }: SectionHeaderProps) {
+  return <h2 className={className}>{`${title} `}{children ?? <span className="field-list-count">({count})</span>}</h2>;
+}
diff --git a/dashboard/src/oven/SectionHeader/index.ts b/dashboard/src/oven/SectionHeader/index.ts
new file mode 100644
index 0000000..689e6f6
--- /dev/null
+++ b/dashboard/src/oven/SectionHeader/index.ts
@@ -0,0 +1 @@
+export { SectionHeader } from "./SectionHeader";
diff --git a/dashboard/src/oven/StreamingDiffHeading/StreamingDiffHeading.test.ts b/dashboard/src/oven/StreamingDiffHeading/StreamingDiffHeading.test.ts
new file mode 100644
index 0000000..34dc8ef
--- /dev/null
+++ b/dashboard/src/oven/StreamingDiffHeading/StreamingDiffHeading.test.ts
@@ -0,0 +1,12 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { StreamingDiffHeading } from "./StreamingDiffHeading";
+
+test("StreamingDiffHeading preserves the selected-feed heading markup", () => {
+  const backHref = "/ovens/streaming-diff/view?repoKey=example%2Frepo";
+  const markup = renderToStaticMarkup(createElement(StreamingDiffHeading, { backHref, session: "session-123" }));
+
+  assert.equal(markup, `<header class="streaming-diff-heading"><a class="streaming-diff-back" href="${backHref}">Recent feeds</a><h1>Streaming Diff</h1><p>Session session-123</p></header>`);
+});
diff --git a/dashboard/src/oven/StreamingDiffHeading/StreamingDiffHeading.tsx b/dashboard/src/oven/StreamingDiffHeading/StreamingDiffHeading.tsx
new file mode 100644
index 0000000..6b0892b
--- /dev/null
+++ b/dashboard/src/oven/StreamingDiffHeading/StreamingDiffHeading.tsx
@@ -0,0 +1,7 @@
+export function StreamingDiffHeading({ backHref, session }: { backHref: string; session: string }) {
+  return <header className="streaming-diff-heading">
+    <a className="streaming-diff-back" href={backHref}>Recent feeds</a>
+    <h1>Streaming Diff</h1>
+    <p>Session {session}</p>
+  </header>;
+}
diff --git a/dashboard/src/oven/StreamingDiffHeading/index.ts b/dashboard/src/oven/StreamingDiffHeading/index.ts
new file mode 100644
index 0000000..e0ca254
--- /dev/null
+++ b/dashboard/src/oven/StreamingDiffHeading/index.ts
@@ -0,0 +1 @@
+export { StreamingDiffHeading } from "./StreamingDiffHeading";
diff --git a/dashboard/src/oven/ToggleGroup/ToggleGroup.test.ts b/dashboard/src/oven/ToggleGroup/ToggleGroup.test.ts
new file mode 100644
index 0000000..39e8a30
--- /dev/null
+++ b/dashboard/src/oven/ToggleGroup/ToggleGroup.test.ts
@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { assertDomEquivalent } from "../test-support/dom-normalize";
+import { ToggleGroup } from "./ToggleGroup";
+
+test("ToggleGroup renders the generic group wrapper", () => {
+  const actual = renderToStaticMarkup(createElement(
+    ToggleGroup,
+    {
+      id: "example-toggle",
+      className: "chart-toggle differential-tabs",
+      ariaLabel: "Example chart mode",
+    },
+    createElement("button", { type: "button" }, "Current"),
+  ));
+
+  assertDomEquivalent(
+    actual,
+    '<div id="example-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Example chart mode"><button type="button">Current</button></div>',
+  );
+});
diff --git a/dashboard/src/oven/ToggleGroup/ToggleGroup.tsx b/dashboard/src/oven/ToggleGroup/ToggleGroup.tsx
new file mode 100644
index 0000000..e0e0a09
--- /dev/null
+++ b/dashboard/src/oven/ToggleGroup/ToggleGroup.tsx
@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+
+export type ToggleGroupProps = {
+  id: string;
+  className: string;
+  ariaLabel: string;
+  children?: ReactNode;
+};
+
+export function ToggleGroup({ id, className, ariaLabel, children }: ToggleGroupProps) {
+  return <div id={id} className={className} role="group" aria-label={ariaLabel}>{children}</div>;
+}
diff --git a/dashboard/src/oven/ToggleGroup/index.ts b/dashboard/src/oven/ToggleGroup/index.ts
new file mode 100644
index 0000000..5b3d52b
--- /dev/null
+++ b/dashboard/src/oven/ToggleGroup/index.ts
@@ -0,0 +1,2 @@
+export { ToggleGroup } from "./ToggleGroup";
+export type { ToggleGroupProps } from "./ToggleGroup";
diff --git a/dashboard/src/oven/VerdictHeader/VerdictHeader.test.ts b/dashboard/src/oven/VerdictHeader/VerdictHeader.test.ts
new file mode 100644
index 0000000..13756ce
--- /dev/null
+++ b/dashboard/src/oven/VerdictHeader/VerdictHeader.test.ts
@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ArrowLeft } from "lucide-react";
+import { VerdictHeader } from "./VerdictHeader";
+
+function FrozenVerdictHeader({ targetPass, framesCount, error }) {
+  return createElement(
+    "header",
+    { className: "visual-parity-heading" },
+    createElement("a", { className: "visual-parity-back", href: "/" }, createElement(ArrowLeft, { "aria-hidden": "true" }), "Burnlists"),
+    createElement(
+      "div",
+      null,
+      createElement("div", { className: `visual-parity-verdict ${targetPass ? "pass" : "fail"}` }, targetPass ? "Target qualified" : "Target open"),
+      createElement("p", null, framesCount, " settled frames · isolated render passes · live refresh"),
+    ),
+    error && createElement("span", { className: "visual-parity-refresh-error" }, error),
+  );
+}
+
+test("VerdictHeader matches the qualified state with a refresh error", () => {
+  const props = { targetPass: true, framesCount: 3, error: "Refresh delayed." };
+  assert.equal(renderToString(createElement(VerdictHeader, props)), renderToString(createElement(FrozenVerdictHeader, props)));
+});
+
+test("VerdictHeader matches the open state without a refresh error", () => {
+  const props = { targetPass: false, framesCount: 1, error: "" };
+  assert.equal(renderToString(createElement(VerdictHeader, props)), renderToString(createElement(FrozenVerdictHeader, props)));
+});
diff --git a/dashboard/src/oven/VerdictHeader/VerdictHeader.tsx b/dashboard/src/oven/VerdictHeader/VerdictHeader.tsx
new file mode 100644
index 0000000..7aef956
--- /dev/null
+++ b/dashboard/src/oven/VerdictHeader/VerdictHeader.tsx
@@ -0,0 +1,11 @@
+import { ArrowLeft } from "lucide-react";
+
+type VerdictHeaderProps = {
+  targetPass: boolean;
+  framesCount: number;
+  error: string;
+};
+
+export function VerdictHeader({ targetPass, framesCount, error }: VerdictHeaderProps) {
+  return <header className="visual-parity-heading"><a className="visual-parity-back" href="/"><ArrowLeft aria-hidden="true" />Burnlists</a><div><div className={`visual-parity-verdict ${targetPass ? "pass" : "fail"}`}>{targetPass ? "Target qualified" : "Target open"}</div><p>{framesCount} settled frames · isolated render passes · live refresh</p></div>{error && <span className="visual-parity-refresh-error">{error}</span>}</header>;
+}
diff --git a/dashboard/src/oven/VerdictHeader/index.ts b/dashboard/src/oven/VerdictHeader/index.ts
new file mode 100644
index 0000000..588dd0a
--- /dev/null
+++ b/dashboard/src/oven/VerdictHeader/index.ts
@@ -0,0 +1 @@
+export { VerdictHeader } from "./VerdictHeader";
diff --git a/dashboard/src/oven/WaffleCanvas/WaffleCanvas.test.ts b/dashboard/src/oven/WaffleCanvas/WaffleCanvas.test.ts
new file mode 100644
index 0000000..bad6387
--- /dev/null
+++ b/dashboard/src/oven/WaffleCanvas/WaffleCanvas.test.ts
@@ -0,0 +1,100 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { waffleMetric } from "../differential-testing-render/differential-testing-render.js";
+import { createRecordingCanvas } from "../test-support/canvas-recorder";
+import { assertDomEquivalent, extractFirstByClass } from "../test-support/dom-normalize";
+import { WaffleCanvas } from "./WaffleCanvas";
+import { paintWaffleCanvas, waffleCanvasSizing, waffleCellPlan, WAFFLE_EMPTY_COLOR, WAFFLE_FAIL_COLOR, WAFFLE_PASS_COLOR } from "./waffle-canvas-paint";
+
+const box = { x: 10.2, y: 5.1, width: 42.6, height: 33.2 };
+
+test("WaffleCanvas matches the DT oracle static canvas metadata", () => {
+  const metrics = [
+    { total: 0, failed: 0, blocked: 0 },
+    { total: 6, failed: 1, blocked: 5 },
+    { total: 1_000_000, failed: 999_999, blocked: 1 },
+    { total: 100, failed: 0, blocked: 0 },
+  ];
+  for (const metric of metrics) {
+    const actual = renderToStaticMarkup(createElement(WaffleCanvas, { metric }));
+    const expected = extractFirstByClass(waffleMetric(metric, "Fields"), "driving-parity-kpi-waffle");
+    assertDomEquivalent(actual, expected, `waffle mismatch for total ${metric.total}`);
+  }
+});
+
+// Rasterized pixel/DPR visual parity requires the coordinator's headless-canvas
+// pixel-diff; this suite verifies the paint command stream and DPR sizing arithmetic only.
+test("WaffleCanvas paints the exact waffle command stream across states and DPRs", () => {
+  const cases = [
+    { failedCells: "0", empty: "true", scale: 1 },
+    { failedCells: "0", empty: "false", scale: 2 },
+    { failedCells: "40", empty: "false", scale: 1.5 },
+    { failedCells: "80", empty: "false", scale: 1 },
+  ];
+
+  for (const item of cases) {
+    const recorder = createRecordingCanvas(box, { failedCells: item.failedCells, empty: item.empty });
+    const sizing = waffleCanvasSizing(box, item.scale);
+    paintWaffleCanvas(recorder.canvas, { scale: item.scale, box });
+
+    assert.equal(recorder.canvas.width, sizing.bitmapWidth);
+    assert.equal(recorder.canvas.height, sizing.bitmapHeight);
+    assert.equal(recorder.canvas.style.transform, sizing.transform);
+    assert.deepEqual(recorder.operations.slice(0, 2), [
+      ["setTransform", item.scale, 0, 0, item.scale, 0, 0],
+      ["clearRect", 0, 0, sizing.cssWidth, sizing.cssHeight],
+    ]);
+
+    const expectedCells = waffleCellPlan(
+      Number(item.failedCells),
+      item.empty === "true",
+      sizing.cssWidth,
+      sizing.cssHeight,
+      WAFFLE_PASS_COLOR,
+      WAFFLE_FAIL_COLOR,
+    );
+    const fills = recorder.operations.filter((operation) => operation[0] === "fillRect");
+    assert.equal(fills.length, 80);
+    assert.deepEqual(fills, expectedCells.map((cell) => ["fillRect", cell.x, cell.y, 3, 3]));
+
+    const cellOperations = recorder.operations.slice(2, 2 + 80 * 3);
+    assert.deepEqual(cellOperations, expectedCells.flatMap((cell) => [
+      ["globalAlpha", cell.globalAlpha],
+      ["fillStyle", cell.fillStyle],
+      ["fillRect", cell.x, cell.y, cell.width, cell.height],
+    ]));
+    assert.deepEqual(recorder.operations.slice(-2), [
+      ["globalAlpha", 1],
+      ["setTransform", 1, 0, 0, 1, 0, 0],
+    ]);
+  }
+});
+
+test("WaffleCanvas snaps DPR sizing and translates fractional canvas positions", () => {
+  assert.deepEqual(waffleCanvasSizing(box, 1), {
+    cssWidth: 43, cssHeight: 33, bitmapWidth: 43, bitmapHeight: 33,
+    dx: -0.1999999999999993, dy: -0.09999999999999964, transform: "translate(-0.200px, -0.100px)",
+  });
+  assert.deepEqual(waffleCanvasSizing(box, 2), {
+    cssWidth: 43, cssHeight: 33, bitmapWidth: 86, bitmapHeight: 66,
+    dx: -0.1999999999999993, dy: -0.09999999999999964, transform: "translate(-0.200px, -0.100px)",
+  });
+  assert.deepEqual(waffleCanvasSizing(box, 1.5), {
+    cssWidth: 43, cssHeight: 33, bitmapWidth: 65, bitmapHeight: 50,
+    dx: -0.1999999999999993, dy: 0.2333333333333334, transform: "translate(-0.200px, 0.233px)",
+  });
+});
+
+test("waffleCellPlan preserves the vanilla right-column failure order", () => {
+  const cells = waffleCellPlan(40, false, 43, 33, WAFFLE_PASS_COLOR, WAFFLE_FAIL_COLOR);
+  assert.deepEqual(cells[0], { x: 4, y: 1, width: 3, height: 3, globalAlpha: 0.34, fillStyle: WAFFLE_PASS_COLOR });
+  assert.deepEqual(cells[9], { x: 40, y: 1, width: 3, height: 3, globalAlpha: 1, fillStyle: WAFFLE_FAIL_COLOR });
+  assert.deepEqual(cells[70], { x: 4, y: 29, width: 3, height: 3, globalAlpha: 0.34, fillStyle: WAFFLE_PASS_COLOR });
+  assert.deepEqual(cells[79], { x: 40, y: 29, width: 3, height: 3, globalAlpha: 1, fillStyle: WAFFLE_FAIL_COLOR });
+
+  const empty = waffleCellPlan(80, true, 43, 33, WAFFLE_PASS_COLOR, WAFFLE_FAIL_COLOR);
+  assert.equal(empty[0].globalAlpha, 0.2);
+  assert.equal(empty[0].fillStyle, WAFFLE_EMPTY_COLOR);
+});
diff --git a/dashboard/src/oven/WaffleCanvas/WaffleCanvas.tsx b/dashboard/src/oven/WaffleCanvas/WaffleCanvas.tsx
new file mode 100644
index 0000000..c60d7ad
--- /dev/null
+++ b/dashboard/src/oven/WaffleCanvas/WaffleCanvas.tsx
@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+import { waffleMetricData, type WaffleMetricData } from "../WaffleMetric";
+import { paintWaffleCanvas, WAFFLE_FAIL_COLOR, WAFFLE_PASS_COLOR } from "./waffle-canvas-paint";
+
+export function WaffleCanvas({ metric }: { metric: WaffleMetricData }) {
+  const ref = useRef<HTMLCanvasElement>(null);
+  const data = waffleMetricData(metric);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !ref.current) return;
+    const styles = getComputedStyle(document.documentElement);
+    const passColor = styles.getPropertyValue("--driving-parity-kpi-green").trim() || WAFFLE_PASS_COLOR;
+    const failColor = styles.getPropertyValue("--driving-parity-kpi-red").trim() || WAFFLE_FAIL_COLOR;
+    paintWaffleCanvas(ref.current, {
+      scale: window.devicePixelRatio || 1,
+      box: ref.current.getBoundingClientRect(),
+      passColor,
+      failColor,
+    });
+  }, [data.empty, data.failedCells]);
+
+  return <canvas ref={ref} className="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells={data.failedCells} data-empty={String(data.empty)} />;
+}
diff --git a/dashboard/src/oven/WaffleCanvas/index.ts b/dashboard/src/oven/WaffleCanvas/index.ts
new file mode 100644
index 0000000..a46ed50
--- /dev/null
+++ b/dashboard/src/oven/WaffleCanvas/index.ts
@@ -0,0 +1,4 @@
+export { WaffleCanvas } from "./WaffleCanvas";
+export { paintWaffleCanvas, waffleCanvasSizing, waffleCellPlan, WAFFLE_CELLS, WAFFLE_COLUMNS, WAFFLE_EMPTY_COLOR, WAFFLE_FAIL_COLOR, WAFFLE_PASS_COLOR, WAFFLE_ROWS } from "./waffle-canvas-paint";
+export type { WaffleCanvasBox, WaffleCanvasCell, WaffleCanvasContext, WaffleCanvasLike } from "./waffle-canvas-paint";
+export type { WaffleMetricData } from "../WaffleMetric";
diff --git a/dashboard/src/oven/WaffleCanvas/waffle-canvas-paint.ts b/dashboard/src/oven/WaffleCanvas/waffle-canvas-paint.ts
new file mode 100644
index 0000000..806c53e
--- /dev/null
+++ b/dashboard/src/oven/WaffleCanvas/waffle-canvas-paint.ts
@@ -0,0 +1,105 @@
+export const WAFFLE_PASS_COLOR = "#61d394";
+export const WAFFLE_FAIL_COLOR = "#ef4444";
+export const WAFFLE_EMPTY_COLOR = "rgb(168,168,168)";
+export const WAFFLE_COLUMNS = 10;
+export const WAFFLE_ROWS = 8;
+export const WAFFLE_CELLS = WAFFLE_COLUMNS * WAFFLE_ROWS;
+
+export type WaffleCanvasBox = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type WaffleCanvasCell = {
+  x: number;
+  y: number;
+  width: 3;
+  height: 3;
+  fillStyle: string;
+  globalAlpha: number;
+};
+
+export type WaffleCanvasLike = {
+  dataset: { failedCells?: string; empty?: string };
+  style: { transform: string };
+  width: number;
+  height: number;
+  getContext: (contextId: "2d") => WaffleCanvasContext | null;
+};
+
+export type WaffleCanvasContext = {
+  globalAlpha: number;
+  fillStyle: string;
+  setTransform: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
+  clearRect: (x: number, y: number, width: number, height: number) => void;
+  fillRect: (x: number, y: number, width: number, height: number) => void;
+};
+
+export function waffleCanvasSizing(box: WaffleCanvasBox, scale: number) {
+  const dx = Math.round(box.x * scale) / scale - box.x;
+  const dy = Math.round(box.y * scale) / scale - box.y;
+  const cssWidth = Math.max(1, Math.round(box.width));
+  const cssHeight = Math.max(1, Math.round(box.height));
+  const bitmapWidth = Math.max(1, Math.round(cssWidth * scale));
+  const bitmapHeight = Math.max(1, Math.round(cssHeight * scale));
+  const transform = Math.abs(dx) > 0.001 || Math.abs(dy) > 0.001
+    ? `translate(${dx.toFixed(3)}px, ${dy.toFixed(3)}px)`
+    : "";
+  return { cssWidth, cssHeight, bitmapWidth, bitmapHeight, dx, dy, transform };
+}
+
+export function waffleCellPlan(
+  failedCells: number,
+  empty: boolean,
+  cssWidth: number,
+  cssHeight: number,
+  passColor: string,
+  failColor: string,
+): WaffleCanvasCell[] {
+  const cells: WaffleCanvasCell[] = [];
+  for (let index = 0; index < WAFFLE_CELLS; index += 1) {
+    const row = Math.floor(index / WAFFLE_COLUMNS);
+    const column = index % WAFFLE_COLUMNS;
+    const rightColumnRank = (WAFFLE_COLUMNS - 1 - column) * WAFFLE_ROWS + (WAFFLE_ROWS - 1 - row);
+    const failed = rightColumnRank < failedCells;
+    cells.push({
+      x: Math.max(0, cssWidth - 39) + column * 4,
+      y: Math.max(0, Math.floor((cssHeight - 31) / 2)) + row * 4,
+      width: 3,
+      height: 3,
+      globalAlpha: empty ? 0.2 : failed ? 1 : 0.34,
+      fillStyle: empty ? WAFFLE_EMPTY_COLOR : failed ? failColor : passColor,
+    });
+  }
+  return cells;
+}
+
+export function paintWaffleCanvas(
+  canvas: WaffleCanvasLike,
+  { scale, box, passColor = WAFFLE_PASS_COLOR, failColor = WAFFLE_FAIL_COLOR }: {
+    scale: number;
+    box: WaffleCanvasBox;
+    passColor?: string;
+    failColor?: string;
+  },
+) {
+  const sizing = waffleCanvasSizing(box, scale);
+  canvas.style.transform = sizing.transform;
+  if (canvas.width !== sizing.bitmapWidth) canvas.width = sizing.bitmapWidth;
+  if (canvas.height !== sizing.bitmapHeight) canvas.height = sizing.bitmapHeight;
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  context.setTransform(scale, 0, 0, scale, 0, 0);
+  context.clearRect(0, 0, sizing.cssWidth, sizing.cssHeight);
+  const failedCells = Math.max(0, Math.min(WAFFLE_CELLS, Number(canvas.dataset.failedCells) || 0));
+  const empty = canvas.dataset.empty === "true";
+  for (const cell of waffleCellPlan(failedCells, empty, sizing.cssWidth, sizing.cssHeight, passColor, failColor)) {
+    context.globalAlpha = cell.globalAlpha;
+    context.fillStyle = cell.fillStyle;
+    context.fillRect(cell.x, cell.y, cell.width, cell.height);
+  }
+  context.globalAlpha = 1;
+  context.setTransform(1, 0, 0, 1, 0, 0);
+}
diff --git a/dashboard/src/oven/WaffleMetric/WaffleMetric.test.ts b/dashboard/src/oven/WaffleMetric/WaffleMetric.test.ts
new file mode 100644
index 0000000..6dbd21e
--- /dev/null
+++ b/dashboard/src/oven/WaffleMetric/WaffleMetric.test.ts
@@ -0,0 +1,28 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { waffleMetric } from "../differential-testing-render/differential-testing-render.js";
+import { assertDomEquivalent, extractFirstByClass } from "../test-support/dom-normalize";
+import { WaffleMetric } from "./WaffleMetric";
+
+test("WaffleMetric matches the DT oracle static canvas metadata", () => {
+  const metrics = [
+    { total: 0, failed: 0, blocked: 0 },
+    { total: 6, failed: 1, blocked: 5 },
+    { total: 1_000_000, failed: 999_999, blocked: 1 },
+    { total: 100, failed: 0, blocked: 0 },
+  ];
+
+  for (const metric of metrics) {
+    const actual = renderToStaticMarkup(createElement(WaffleMetric, { metric }));
+    const expected = extractFirstByClass(waffleMetric(metric, "Fields"), "driving-parity-kpi-waffle");
+    assertDomEquivalent(actual, expected, `waffle mismatch for total ${metric.total}`);
+  }
+});
+
+test("WaffleMetric computes failed cells from failed plus blocked", () => {
+  const markup = renderToStaticMarkup(createElement(WaffleMetric, { metric: { total: 10, failed: 1, blocked: 1 } }));
+  assert.match(markup, /data-failed-cells="19"/u);
+  assert.match(markup, /data-empty="false"/u);
+});
diff --git a/dashboard/src/oven/WaffleMetric/WaffleMetric.tsx b/dashboard/src/oven/WaffleMetric/WaffleMetric.tsx
new file mode 100644
index 0000000..c22f8a3
--- /dev/null
+++ b/dashboard/src/oven/WaffleMetric/WaffleMetric.tsx
@@ -0,0 +1,20 @@
+export type WaffleMetricData = {
+  total?: number;
+  failed?: number;
+  blocked?: number;
+};
+
+export function waffleMetricData(metric: WaffleMetricData) {
+  const failed = Number(metric.failed || 0) + Number(metric.blocked || 0);
+  const ratio = metric.total ? failed / metric.total : 0;
+  return {
+    failed,
+    failedCells: Math.min(80, Math.round(ratio * 96)),
+    empty: metric.total ? false : true,
+  };
+}
+
+export function WaffleMetric({ metric }: { metric: WaffleMetricData }) {
+  const data = waffleMetricData(metric);
+  return <canvas className="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells={data.failedCells} data-empty={String(data.empty)} />;
+}
diff --git a/dashboard/src/oven/WaffleMetric/index.ts b/dashboard/src/oven/WaffleMetric/index.ts
new file mode 100644
index 0000000..7558184
--- /dev/null
+++ b/dashboard/src/oven/WaffleMetric/index.ts
@@ -0,0 +1,2 @@
+export { WaffleMetric, waffleMetricData } from "./WaffleMetric";
+export type { WaffleMetricData } from "./WaffleMetric";
diff --git a/dashboard/src/oven/differential-testing-render/differential-testing-goldens.test.mjs b/dashboard/src/oven/differential-testing-render/differential-testing-goldens.test.mjs
new file mode 100644
index 0000000..51bf163
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/differential-testing-goldens.test.mjs
@@ -0,0 +1,218 @@
+import assert from "node:assert/strict";
+import { mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+
+import {
+  captureDashboardLoadError,
+  captureDashboardRoot,
+  differentialTestingAllPassingPayload,
+  differentialTestingComparableNoChangedPayload,
+  differentialTestingComparableTelemetryPayload,
+  differentialTestingPayload,
+  differentialTestingEmptyPayload,
+  differentialTestingIncomparableTelemetryPayload,
+  differentialTestingMultiScenarioPayload,
+  differentialTestingPaginatedMidPayload,
+  differentialTestingPaginatedPayload,
+  ovenLayout,
+  performanceTracingPayload,
+} from "./golden-harness.mjs";
+import { assertDifferentialTestingData } from "../../../../ovens/differential-testing/engine/data-contract.mjs";
+import { differentialTelemetryAvailability } from "./differential-testing-renderer.js";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const goldens = resolve(here, "goldens");
+const dtOven = ovenLayout();
+const ptOven = {
+  id: "performance-tracing",
+  name: "Performance Tracing",
+};
+
+const base = differentialTestingPayload();
+const comparableTelemetry = differentialTestingComparableTelemetryPayload();
+const comparableNoChanged = differentialTestingComparableNoChangedPayload();
+const paginated = differentialTestingPaginatedPayload();
+const paginatedMid = differentialTestingPaginatedMidPayload();
+const allPassing = differentialTestingAllPassingPayload();
+const failingFields = base.fields.filter((field) => field.failedSampleCount > 0 || field.missingSampleCount > 0);
+const serverPage = {
+  search: "",
+  filter: "all",
+  sort: "changed",
+  page: 0,
+  pageSize: 25,
+  pageCount: Math.max(1, Math.ceil(base.fields.length / 25)),
+  total: base.fields.length,
+  fields: base.fields,
+  telemetryFields: base.telemetry?.fields ?? [],
+};
+const sortedFilteredPage = {
+  search: "",
+  filter: "failing",
+  sort: "default",
+  page: 0,
+  pageSize: 25,
+  pageCount: Math.max(1, Math.ceil(failingFields.length / 25)),
+  total: failingFields.length,
+  fields: failingFields,
+  telemetryFields: base.telemetry?.fields ?? [],
+};
+const paginatedMidPage = {
+  search: "",
+  filter: "all",
+  sort: "changed",
+  page: 1,
+  pageSize: 25,
+  pageCount: 3,
+  total: 60,
+  fields: paginatedMid.fields,
+  telemetryFields: paginatedMid.telemetry?.fields ?? [],
+};
+
+function dispatchFailedFilter(root) {
+  const click = root._handlers?.click;
+  assert.ok(click, "capture root must retain its click handler");
+  click({
+    target: {
+      closest(selector) {
+        return selector === "[data-driving-parity-filter]"
+          ? { dataset: { drivingParityFilter: "failing" } }
+          : null;
+      },
+    },
+  });
+}
+
+function dispatchRowExpand(root) {
+  const click = root._handlers?.click;
+  assert.ok(click, "capture root must retain its click handler");
+  click({
+    target: {
+      closest(selector) {
+        return selector === "[data-row-expand-key]"
+          ? { dataset: { rowExpandKey: "position" } }
+          : null;
+      },
+    },
+  });
+}
+
+const states = [
+  ["dt-main", dtOven, base, {}],
+  ["dt-scenario-multi", dtOven, differentialTestingMultiScenarioPayload(), {}],
+  ["dt-row-expanded", dtOven, base, {}, dispatchRowExpand],
+  ["dt-empty", dtOven, differentialTestingEmptyPayload(), {}],
+  ["dt-server-paged", dtOven, base, { fieldPage: serverPage }],
+  ["dt-sorted-filtered-paged", dtOven, base, { fieldPage: sortedFilteredPage }],
+  ["dt-telemetry-incomparable", dtOven, differentialTestingIncomparableTelemetryPayload(), {}],
+  ["dt-comparable-telemetry", dtOven, comparableTelemetry, {}],
+  ["dt-comparable-no-changed", dtOven, comparableNoChanged, {}],
+  ["dt-paginated", dtOven, paginated, {}],
+  ["dt-paginated-mid", dtOven, paginatedMid, { fieldPage: paginatedMidPage }],
+  ["dt-no-match", dtOven, allPassing, {}, dispatchFailedFilter],
+  ["dt-chart-current-failed", dtOven, base, { initialChart: "current", initialProgressChart: "failed" }],
+  ["dt-progress-mode", dtOven, base, { initialProgressChart: "progress" }],
+  ["pt-main", ptOven, performanceTracingPayload(), { initialChart: "current", initialProgressChart: "delta" }],
+  ["pt-progress", ptOven, performanceTracingPayload(), { initialChart: "current", initialProgressChart: "progress" }],
+  ["pt-failed", ptOven, performanceTracingPayload(), { initialChart: "current", initialProgressChart: "failed" }],
+  ["dt-load-error"],
+];
+
+async function liveState([name, oven, payload, options, afterCapture]) {
+  if (name === "dt-load-error") {
+    const root = await captureDashboardLoadError(new Error("network unreachable"));
+    return { name, html: root.innerHTML, className: root.className };
+  }
+  const root = captureDashboardRoot(oven, payload, options, afterCapture);
+  return { name, html: root.innerHTML, className: root.className };
+}
+
+async function capturedStates() {
+  const captured = [];
+  for (const state of states) captured.push(await liveState(state));
+  return captured;
+}
+
+test("DOM goldens remain exact for the captured dashboard states", async () => {
+  mkdirSync(goldens, { recursive: true });
+  for (const state of await capturedStates()) {
+    const path = resolve(goldens, `${state.name}.html`);
+    // WRITE_DT_GOLDENS must NEVER be set in CI/verify: it regenerates goldens instead of asserting them.
+    if (process.env.WRITE_DT_GOLDENS === "1") {
+      const temporaryPath = `${path}.tmp-${process.pid}`;
+      writeFileSync(temporaryPath, state.html);
+      renameSync(temporaryPath, path);
+    }
+    else assert.equal(state.html, readFileSync(path, "utf8"), `${state.name} golden differs`);
+  }
+});
+
+test("every DT golden payload satisfies the data contract", () => {
+  for (const [name, oven, payload] of states) {
+    if (name.startsWith("dt-") && payload) assert.doesNotThrow(() => assertDifferentialTestingData(payload), name);
+  }
+});
+
+test("DOM goldens contain the expected structural markers", async () => {
+  const captured = new Map((await capturedStates()).map((state) => [state.name, state]));
+  for (const [name, state] of captured) {
+    if (name !== "dt-load-error") assert.ok(state.html.length > 100, `${name} capture is unexpectedly small`);
+  }
+  assert.equal(captured.get("dt-load-error").html, '<div class="empty">network unreachable</div>');
+  const dtMain = captured.get("dt-main").html;
+  assert.equal(captured.get("dt-main").className, "shell driving-parity-view");
+  assert.equal(captured.get("dt-comparable-telemetry").className, "shell driving-parity-view");
+  assert.equal(captured.get("pt-main").className, "shell driving-parity-view");
+  assert.match(dtMain, /driving-parity-kpi-strip has-burns/u);
+  assert.match(dtMain, /<div class="rows-view" id="hybrid-rows">/u);
+  assert.match(dtMain, /checklist-log-list/u);
+  assert.match(dtMain, /driving-parity-pagination/u);
+  assert.match(dtMain, /data-row-expand-key="position"/u);
+  assert.match(dtMain, /<span class="total">[1-9][0-9]*<\/span>/u);
+  const realLogRows = dtMain.match(/<article class="log-row[^>]*>/gu)?.filter((row) => !row.includes("log-placeholder-row")) ?? [];
+  assert.ok(realLogRows.length > 0, "dt-main must contain a real log row");
+  const multiSelector = captured.get("dt-scenario-multi").html.match(/<select id="differential-scenario-selector"[^>]*>.*?<\/select>/u)?.[0] ?? "";
+  assert.doesNotMatch(multiSelector, / disabled/u);
+  assert.equal((multiSelector.match(/<option\b/gu) ?? []).length, 2);
+  assert.match(captured.get("dt-empty").html, /No Differential Testing scenarios/u);
+  const serverHtml = captured.get("dt-server-paged").html;
+  const serverStatus = serverHtml.match(/<span class="page-status" id="driving-parity-page-status">([^<]+)<\/span>/u)?.[1] ?? "";
+  assert.doesNotMatch(serverStatus, /1-0 \/|\/ 0/u);
+  assert.match(serverStatus, new RegExp(`1-${base.fields.length} \/ ${base.fields.length}`, "u"));
+  assert.match(captured.get("pt-main").html, /id="progress-chart"[^>]*Frame timing/u);
+
+  const comparableHtml = captured.get("dt-comparable-telemetry").html;
+  assert.match(comparableHtml, /[0-9]+ F→P · [0-9]+ P→F · reconciled telemetry only/u);
+  assert.match(comparableHtml, /<button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed<\/button>/u);
+  assert.doesNotMatch(comparableHtml, /data-driving-parity-sort="improved"[^>]* disabled/u);
+  assert.match(comparableHtml, /title="[0-9]+ fail-to-pass; [0-9]+ pass-to-fail; [0-9]+ stayed-pass; [0-9]+ stayed-fail; residual [0-9]+"/u);
+  assert.match(comparableHtml, /class="hybrid-delta up"/u);
+  assert.match(comparableHtml, /class="hybrid-delta down"/u);
+  assert.ok(
+    comparableHtml.indexOf('data-row-expand-key="active"') < comparableHtml.indexOf('data-row-expand-key="position"'),
+    "changed sort must order the improved field before the worsened field",
+  );
+  assert.equal(differentialTelemetryAvailability(comparableTelemetry).status, "comparable");
+
+  assert.match(captured.get("dt-comparable-no-changed").html, /No changed fields in this telemetry\./u);
+
+  const paginatedHtml = captured.get("dt-paginated").html;
+  assert.match(paginatedHtml, /<div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination">/u);
+  assert.match(paginatedHtml, /<button type="button" id="driving-parity-page-prev"[^>]* disabled[^>]*>Prev<\/button>/u);
+  assert.match(paginatedHtml, /<span class="page-status" id="driving-parity-page-status">1-25 \/ 60<\/span>/u);
+  assert.match(paginatedHtml, /<button type="button" id="driving-parity-page-next"[^>]*>Next<\/button>/u);
+  assert.doesNotMatch(paginatedHtml, /id="driving-parity-page-next"[^>]* disabled/u);
+
+  const paginatedMidHtml = captured.get("dt-paginated-mid").html;
+  assert.equal(paginated.fields.length, 60);
+  assert.equal(paginatedMid.fields.length, 25);
+  assert.match(paginatedMidHtml, /<span class="page-status" id="driving-parity-page-status">26-50 \/ 60<\/span>/u);
+  assert.match(paginatedMidHtml, /<button type="button" id="driving-parity-page-prev"[^>]*>Prev<\/button>/u);
+  assert.match(paginatedMidHtml, /<button type="button" id="driving-parity-page-next"[^>]*>Next<\/button>/u);
+  assert.doesNotMatch(paginatedMidHtml, /id="driving-parity-page-prev"[^>]* disabled/u);
+  assert.doesNotMatch(paginatedMidHtml, /id="driving-parity-page-next"[^>]* disabled/u);
+
+  assert.match(captured.get("dt-no-match").html, /No fields match the current view\./u);
+});
diff --git a/ovens/differential-testing/renderer/differential-testing-progress-chart.js b/dashboard/src/oven/differential-testing-render/differential-testing-progress-chart.js
similarity index 100%
rename from ovens/differential-testing/renderer/differential-testing-progress-chart.js
rename to dashboard/src/oven/differential-testing-render/differential-testing-progress-chart.js
diff --git a/dashboard/src/oven/differential-testing-render/differential-testing-render.js b/dashboard/src/oven/differential-testing-render/differential-testing-render.js
new file mode 100644
index 0000000..76c423e
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/differential-testing-render.js
@@ -0,0 +1,347 @@
+const WIDTH = 900;
+const HEIGHT = 58;
+export const GREEN = "#61d394";
+export const RED = "#ef4444";
+
+export function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+export function count(value) { return Number(value || 0).toLocaleString("en-US"); }
+export function kpiTotal(value) {
+  const number = Math.max(0, Number(value) || 0);
+  return number >= 1e6 ? `${count(Math.floor(number / 1e3))}k` : count(number);
+}
+export function percent(value) {
+  const number = Math.max(0, Number(value) || 0);
+  if (number > 0 && number < .01) return "<0.01%";
+  if (number > 0 && number < .1) return `${number.toFixed(2)}%`;
+  return `${number.toFixed(1).replace(/\.0$/, "")}%`;
+}
+export function value(value) {
+  if (value === null || !Number.isFinite(Number(value))) return "n/a";
+  const number = Number(value);
+  if (Number.isInteger(number)) return count(number);
+  return number.toFixed(Math.abs(number) < 0.1 ? 6 : 4);
+}
+export function compact(value) {
+  const number = Number(value) || 0;
+  if (Math.abs(number) >= 1e6) return `${(number / 1e6).toFixed(1)}m`;
+  if (Math.abs(number) >= 1e3) return `${Math.round(number / 1e3)}k`;
+  return String(Math.round(number));
+}
+export function blockers(source) {
+  return Array.isArray(source) ? source.map((entry) => String(entry || "").trim()).filter(Boolean) : [];
+}
+export function unique(values) {
+  return [...new Set(values.filter(Boolean))];
+}
+
+export function timeOnly(timestamp) {
+  const date = new Date(timestamp);
+  return Number.isNaN(date.getTime()) ? timestamp : new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false }).format(date);
+}
+export function dateTime(timestamp) {
+  const date = new Date(timestamp);
+  return Number.isNaN(date.getTime()) ? timestamp : new Intl.DateTimeFormat(undefined, {
+    year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit", second: "2-digit",
+  }).format(date);
+}
+export function overviewTime(timestamp) {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) return escapeHtml(timestamp);
+  const day = new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric" }).format(date);
+  const time = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit" }).format(date);
+  return `<span>${escapeHtml(day)}</span><span class="sep" aria-hidden="true">·</span><span>${escapeHtml(time)}</span>`;
+}
+export function formatLogRelativeMinutes(time, now = Date.now()) {
+  const timestamp = new Date(time).getTime();
+  const base = new Date(now).getTime();
+  if (!Number.isFinite(timestamp) || !Number.isFinite(base)) return "";
+  const minutes = Math.max(0, Math.floor((base - timestamp) / 60_000));
+  return minutes === 0 ? "now" : minutes + "m";
+}
+
+export function kpiItem({ className, title, visual = "", heading, headingClass = "", value, valueClass = "" }) {
+  const modifier = className ? ` ${className}` : "";
+  const section = visual ? " driving-parity-kpi-section" : "";
+  const labelClass = headingClass ? ` ${headingClass}` : "";
+  const valueModifier = valueClass ? ` ${valueClass}` : "";
+  const content = `<span class="driving-parity-kpi-heading${labelClass}">${escapeHtml(heading)}</span><span class="${visual ? "driving-parity-kpi-ratio" : "driving-parity-kpi-title-subtitle"}${valueModifier}">${value}</span>`;
+  return `<div class="driving-parity-kpi-item${section}${modifier}" title="${escapeHtml(title)}">${visual}${visual ? `<div class="driving-parity-kpi-text">${content}</div>` : content}</div>`;
+}
+export function burnDonut(entries) {
+  const groups = { improved: 0, worsened: 0, unchanged: 0, reverted: 0 };
+  for (const entry of entries) {
+    if (entry.result === "improved" || entry.result === "pass") groups.improved += 1;
+    else if (entry.result === "worsened") groups.worsened += 1;
+    else if (entry.result === "blocked" || entry.result === "reverted") groups.reverted += 1;
+    else groups.unchanged += 1;
+  }
+  const active = Object.entries(groups).filter(([, amount]) => amount > 0).sort((left, right) => right[1] - left[1]);
+  const total = active.reduce((sum, [, amount]) => sum + amount, 0);
+  const gap = active.length > 1 ? (58 / 40) / (2 * Math.PI * 21) * 100 : 0;
+  let offset = 0;
+  const circles = active.map(([name, amount]) => {
+    const share = amount / Math.max(1, total) * 100;
+    const dash = Math.max(0, share - gap);
+    const color = name === "unchanged" ? "neutral" : name;
+    const circle = `<circle class="driving-parity-kpi-burns-donut-segment ${color}" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="${dash.toFixed(3)} ${(100 - dash).toFixed(3)}" stroke-dashoffset="${(-(offset + gap / 2)).toFixed(3)}"/>`;
+    offset += share;
+    return circle;
+  }).join("");
+  const improvedPercent = total ? groups.improved / total * 100 : 0;
+  return kpiItem({
+    className: "driving-parity-kpi-burns",
+    title: "Results across the current Differential Testing run",
+    visual: `<svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21"${total ? ' opacity="0"' : ""}/>${circles}</svg>`,
+    heading: "Results",
+    valueClass: "driving-parity-kpi-burns-summary",
+    value: `<span class="neutral">${count(groups.unchanged)}</span><span class="separator">·</span><span class="reverted">${count(groups.reverted)}</span><span class="separator">·</span><span class="worsened">${count(groups.worsened)}</span><span class="separator">·</span><span class="improved">${count(groups.improved)} (${percent(improvedPercent)})</span>`,
+  });
+}
+export function progressDonut(entries) {
+  const latest = entries.at(-1);
+  const total = Math.max(0, Number(latest?.frames) || 0);
+  const done = Math.max(0, Math.min(total, Number(latest?.frame) || 0));
+  const donePercent = total ? done / total * 100 : 0;
+  const remainingPercent = Math.max(0, 100 - donePercent);
+  return kpiItem({
+    className: "driving-parity-kpi-progress",
+    title: `${count(done)} of ${count(total)} exact-prefix frames cleared`,
+    visual: `<svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="${donePercent.toFixed(3)} ${remainingPercent.toFixed(3)}"/></svg>`,
+    heading: "Progress",
+    value: `<span class="fail">${count(total)}</span><span class="separator">·</span><span class="pass">${count(done)} (${percent(donePercent)})</span>`,
+  });
+}
+export function waffleMetric(metric, label) {
+  const failed = Number(metric.failed || 0) + Number(metric.blocked || 0);
+  const ratio = metric.total ? failed / metric.total : 0;
+  const failedCells = Math.min(80, Math.round(ratio * 96));
+  return kpiItem({
+    className: `driving-parity-kpi-${label.toLowerCase()}`,
+    title: `${percent(ratio * 100)} failed ${label.toLowerCase()}`,
+    visual: `<canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="${failedCells}" data-empty="${metric.total ? "false" : "true"}"></canvas>`,
+    heading: label,
+    value: `<span class="total">${kpiTotal(metric.total)}</span><span class="separator">·</span><span class="fail">${kpiTotal(failed)} (${percent(ratio * 100)})</span>`,
+  });
+}
+
+export function log(entries, now = Date.now()) {
+  const visibleEntries = entries.slice(0, 8);
+  const rows = visibleEntries.map((entry) => {
+    const frameDelta = entry.frameDelta === null || !Number.isFinite(Number(entry.frameDelta)) ? null : Number(entry.frameDelta);
+    const stateClass = frameDelta > 0 ? "improved" : frameDelta < 0 ? "worsened" : "unchanged";
+    const deltaPercent = frameDelta === null || !Number(entry.frames) ? null : Math.abs(frameDelta) / Number(entry.frames) * 100;
+    const marker = stateClass === "improved" ? "▲" : stateClass === "worsened" ? "▼" : "⦁";
+    const deltaText = deltaPercent === null ? "—" : percent(deltaPercent);
+    const resultText = frameDelta === null ? "—" : count(Math.abs(frameDelta));
+    const result = marker !== "⦁"
+      ? `<span class="log-delta-content"><span class="log-delta-indicator">${marker}</span><span>${resultText}</span></span>`
+      : resultText;
+    const frame = !Number.isSafeInteger(Number(entry.frame)) ? "—" : count(entry.frame);
+    const done = !Number.isSafeInteger(Number(entry.frame)) || !Number(entry.frames) ? "—" : `${Math.round(Math.max(0, Math.min(1, Number(entry.frame) / Number(entry.frames))) * 100)}%`;
+    return `<article class="log-row ${escapeHtml(stateClass)} no-detail log-table-row"><span class="log-table-cell age">${escapeHtml(formatLogRelativeMinutes(entry.timestamp, now))}</span><span class="log-table-cell failed ${escapeHtml(stateClass)}">${frame}</span><span class="log-table-cell result ${escapeHtml(stateClass)}">${result}</span><span class="log-table-cell delta ${escapeHtml(stateClass)}">${deltaText}</span><span class="log-table-cell done">${done}</span></article>`;
+  }).join("");
+  const placeholders = Array.from(
+    { length: Math.max(0, 8 - visibleEntries.length) },
+    () => '<article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article>',
+  ).join("");
+  const columns = ["Age", "Frame", "Result", "Delta", "Done"];
+  return `<div class="checklist-log-list"><div class="checklist-log-table-header">${columns.map((column) => `<span>${column}</span>`).join("")}</div>${rows}${placeholders}</div>`;
+}
+export function plotValue(raw, categories) {
+  if (typeof raw === "number" && Number.isFinite(raw)) return raw;
+  if (typeof raw === "boolean") return raw ? 1 : 0;
+  if (typeof raw === "string") { if (!categories.has(raw)) categories.set(raw, categories.size); return categories.get(raw); }
+  return null;
+}
+export function paths(points) {
+  const result = [];
+  let current = "";
+  for (const point of points) {
+    if (!point) { if (current) result.push(current); current = ""; continue; }
+    current += `${current ? "L" : "M"}${point[0].toFixed(2)},${point[1].toFixed(2)}`;
+  }
+  if (current) result.push(current);
+  return result;
+}
+
+export function differentialSampleStateIsNonPass(sampleState) {
+  return sampleState !== 0;
+}
+
+export function nonPass(field) { return Number(field.failedSampleCount || 0) + Number(field.missingSampleCount || 0); }
+export function fieldResult(field) { return field.trustStatus === "blocked" || field.missingSampleCount > 0 ? "BLOCKED" : field.failedSampleCount > 0 ? "FAIL" : "PASS"; }
+
+export function telemetryChange(field, telemetry) {
+  return telemetry ? Number(telemetry.failToPassCount || 0) + Number(telemetry.passToFailCount || 0) : 0;
+}
+
+export function chart(field, showFrameLabels, chartMode) {
+  const categories = new Map();
+  const rows = field.samples.map(([tick, reference, candidate, sampleState]) => ({ tick, reference: plotValue(reference, categories), candidate: plotValue(candidate, categories), state: sampleState }));
+  const x = (index) => rows.length <= 1 ? 0 : index / (rows.length - 1) * WIDTH;
+  const exactFailure = (index) => {
+    const row = rows[index];
+    if (!row) return false;
+    return differentialSampleStateIsNonPass(row.state);
+  };
+  const intervalFails = (index) => exactFailure(index) || exactFailure(index + 1);
+  const frameStep = (() => {
+    if (rows.length <= 1) return 0;
+    const raw = Math.max(1, rows.length / 10);
+    const magnitude = 10 ** Math.floor(Math.log10(raw));
+    for (const multiplier of [1, 2, 2.5, 5, 10]) {
+      const step = Math.max(1, Math.round(multiplier * magnitude));
+      if (step >= raw) return step;
+    }
+    return 1;
+  })();
+  const tickIndexes = [];
+  for (let index = frameStep; index < rows.length - 1; index += frameStep * 2) tickIndexes.push(index);
+  const tickMarks = tickIndexes.map((index) => `<line class="frame-tick" x1="${x(index).toFixed(1)}" x2="${x(index).toFixed(1)}" y1="${showFrameLabels ? 13 : 0}" y2="${HEIGHT}" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/>`).join("");
+  const tickLabels = showFrameLabels
+    ? tickIndexes.map((index) => `<span class="frame-tick-label" style="left:${(index / Math.max(1, rows.length - 1) * 100).toFixed(4)}%">${escapeHtml(field.sampleLabels?.[index] || Math.round(rows[index].tick))}</span>`).join("")
+    : "";
+  const segment = (start, end, trimStart = 0, trimEnd = 0) => {
+    let [x1, y1] = start, [x2, y2] = end;
+    const dx = x2 - x1, dy = y2 - y1, length = Math.max(Math.hypot(dx, dy), .000001);
+    const first = Math.min(trimStart, length / 2), last = Math.min(trimEnd, length / 2);
+    x1 += dx / length * first; y1 += dy / length * first;
+    x2 -= dx / length * last; y2 -= dy / length * last;
+    return { path: `M${x1.toFixed(1)},${y1.toFixed(1)}L${x2.toFixed(1)},${y2.toFixed(1)}`, length: Math.hypot(x2 - x1, y2 - y1), x2, y2 };
+  };
+  const bands = (failed, points) => {
+    const result = [];
+    for (let index = 0; index < rows.length - 1; index += 1) {
+      if (intervalFails(index) !== failed || !points[index] || !points[index + 1]) continue;
+      const start = index;
+      while (index + 1 < rows.length - 1 && intervalFails(index + 1) === failed && points[index + 1] && points[index + 2]) index += 1;
+      result.push(`<rect x="${x(start).toFixed(1)}" y="0" width="${Math.max(1, x(index + 1) - x(start)).toFixed(1)}" height="${HEIGHT}" fill="${failed ? RED : GREEN}" opacity="${failed ? ".14" : ".10"}"/>`);
+    }
+    return result.join("");
+  };
+  if (chartMode === "delta") {
+    const values = rows.map((row) => row.reference === null || row.candidate === null ? null : row.candidate - row.reference);
+    const finite = values.filter(Number.isFinite);
+    if (!finite.length) return '<div class="plot"></div>';
+    const maxAbs = Math.max(.000001, ...finite.map((entry) => Math.abs(entry)));
+    const limit = maxAbs + Math.max(maxAbs * .16, .000001);
+    const y = (entry) => HEIGHT - (entry + limit) / (limit * 2) * HEIGHT;
+    const points = values.map((entry, index) => entry === null ? null : [x(index), y(entry)]);
+    const passed = [], failed = [];
+    for (let index = 0; index < rows.length - 1; index += 1) {
+      if (!points[index] || !points[index + 1]) continue;
+      const isFailed = intervalFails(index);
+      const line = segment(points[index], points[index + 1], !isFailed && index > 0 && intervalFails(index - 1) ? 1.2 : 0, !isFailed && index + 1 < rows.length - 1 && intervalFails(index + 1) ? 1.2 : 0).path;
+      (isFailed ? failed : passed).push(line);
+    }
+    return `<div class="plot"><svg viewBox="0 0 ${WIDTH} ${HEIGHT}" preserveAspectRatio="none">${bands(false, points)}${bands(true, points)}${tickMarks}<line x1="0" x2="${WIDTH}" y1="${y(0)}" y2="${y(0)}" stroke="${GREEN}" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/>${passed.length ? `<path d="${passed.join(" ")}" fill="none" stroke="${GREEN}" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/>` : ""}${failed.length ? `<path d="${failed.join(" ")}" fill="none" stroke="${RED}" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/>` : ""}</svg>${tickLabels}</div>`;
+  }
+  const finite = rows.flatMap((row) => [row.reference, row.candidate]).filter(Number.isFinite);
+  const min = Math.min(...finite, 0), max = Math.max(...finite, 0);
+  const pad = Math.max((max - min) * .16, Math.abs(max || min || 1) * .03, .000001);
+  const low = min - pad, high = max + pad, span = Math.max(high - low, .000001);
+  const y = (entry) => HEIGHT - (entry - low) / span * HEIGHT;
+  const reference = rows.map((row, index) => row.reference === null ? null : [x(index), y(row.reference)]);
+  const candidate = rows.map((row, index) => row.candidate === null ? null : [x(index), y(row.candidate)]);
+  const allMatch = !rows.some((_, index) => exactFailure(index));
+  if (allMatch) {
+    const match = paths(candidate).length ? paths(candidate) : paths(reference);
+    return `<div class="plot"><svg viewBox="0 0 ${WIDTH} ${HEIGHT}" preserveAspectRatio="none">${bands(false, candidate)}${tickMarks}${match.map((path) => `<path d="${path}" fill="none" stroke="${GREEN}" stroke-width="1.5" opacity=".8" vector-effect="non-scaling-stroke"/>`).join("")}</svg>${tickLabels}</div>`;
+  }
+  const candidatePassing = [], candidateFailing = [], referenceFailing = [];
+  let referenceLength = 0;
+  let previousReferenceFailingIndex = -2;
+  for (let index = 0; index < rows.length - 1; index += 1) {
+    const failed = intervalFails(index);
+    const trimStart = !failed && index > 0 && intervalFails(index - 1) ? 1.2 : 0;
+    const trimEnd = !failed && index + 1 < rows.length - 1 && intervalFails(index + 1) ? 1.2 : 0;
+    if (candidate[index] && candidate[index + 1]) (failed ? candidateFailing : candidatePassing).push(segment(candidate[index], candidate[index + 1], trimStart, trimEnd).path);
+    if (failed && reference[index] && reference[index + 1]) {
+      const line = segment(reference[index], reference[index + 1], trimStart, trimEnd);
+      if (previousReferenceFailingIndex === index - 1) {
+        referenceFailing.at(-1).path += `L${line.x2.toFixed(1)},${line.y2.toFixed(1)}`;
+      } else {
+        referenceFailing.push({ path: line.path, offset: -(referenceLength % 9) });
+      }
+      referenceLength += line.length;
+      previousReferenceFailingIndex = index;
+    } else {
+      previousReferenceFailingIndex = -2;
+    }
+  }
+  return `<div class="plot"><svg viewBox="0 0 ${WIDTH} ${HEIGHT}" preserveAspectRatio="none">${bands(false, candidate)}${bands(true, candidate)}${tickMarks}${candidatePassing.length ? `<path d="${candidatePassing.join(" ")}" fill="none" stroke="${GREEN}" stroke-width="1.5" opacity=".8" vector-effect="non-scaling-stroke"/>` : ""}${candidateFailing.length ? `<path d="${candidateFailing.join(" ")}" fill="none" stroke="${RED}" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/>` : ""}${referenceFailing.map((line) => `<path d="${line.path}" fill="none" stroke="${GREEN}" stroke-width="1.25" stroke-dasharray="5 4" stroke-dashoffset="${line.offset.toFixed(2)}" opacity=".8" vector-effect="non-scaling-stroke"/>`).join("")}</svg>${tickLabels}</div>`;
+}
+
+export function hybridField(field) {
+  const description = field.semantics?.meaning || field.driftReason || field.sourceOwner || "";
+  const result = fieldResult(field);
+  const segments = String(field.label || "").split(".");
+  const label = segments.map((segment, index) => {
+    const last = index === segments.length - 1;
+    const className = last ? "hybrid-field-tail" : "hybrid-field-segment";
+    const opacity = segments.length <= 1 ? 1 : .45 + .55 * Math.pow(index / (segments.length - 1), 1.8);
+    return `<span class="${className}" style="opacity:${opacity.toFixed(2)}">${escapeHtml(segment)}${last ? "" : "."}</span>`;
+  }).join("");
+  return `<span class="hybrid-cell hybrid-field" title="${escapeHtml(description)}"><span class="table-field-label">${label}</span><span class="hybrid-status">${result}</span></span>`;
+}
+
+export function hybridMetric(field, telemetry) {
+  const countValue = nonPass(field);
+  const frameDelta = telemetry ? Number(telemetry.passToFailCount || 0) - Number(telemetry.failToPassCount || 0) : null;
+  const deltaClass = frameDelta === null || frameDelta === 0 ? "" : frameDelta < 0 ? "up" : "down";
+  const deltaSymbol = frameDelta === null || frameDelta === 0 ? "" : frameDelta < 0 ? "▼" : "▲";
+  const deltaValue = frameDelta === null ? "" : frameDelta === 0 ? "0" : compact(Math.abs(frameDelta));
+  const transitionTitle = telemetry
+    ? `${count(telemetry.failToPassCount)} fail-to-pass; ${count(telemetry.passToFailCount)} pass-to-fail; ${count(telemetry.stayedPassCount)} stayed-pass; ${count(telemetry.stayedFailCount)} stayed-fail; residual ${count(telemetry.residualCount)}`
+    : "";
+  const valueDelta = field.maxDelta === null || !Number.isFinite(Number(field.maxDelta))
+    ? ""
+    : value(field.maxDelta);
+  return `<span class="hybrid-cell hybrid-metric"><span class="hybrid-count">${count(countValue)}</span><span class="hybrid-delta ${deltaClass}"${transitionTitle ? ` title="${escapeHtml(transitionTitle)}"` : ""}><span class="hybrid-delta-symbol">${deltaSymbol}</span><span class="hybrid-delta-value">${deltaValue}</span></span><span class="hybrid-value-delta">${escapeHtml(valueDelta)}</span></span>`;
+}
+
+export function visibleFields(state, telemetryByField, fieldOrder) {
+  if (state.fieldPage) return state.payload.fields;
+  if (state.sort === "changed" && state.telemetryAvailability.status !== "comparable") return [];
+  const query = state.search.trim().toLowerCase();
+  let filtered = state.payload.fields.filter((field) => {
+    if (state.filter === "failing" && nonPass(field) === 0) return false;
+    return !query || [field.label, field.sourceOwner, field.driftClass, field.semantics?.kind].some((entry) => String(entry || "").toLowerCase().includes(query));
+  });
+  if (state.sort === "changed") {
+    filtered = filtered.filter((field) => telemetryChange(field, telemetryByField.get(field.id)) > 0);
+  }
+  if (state.sort !== "changed") return filtered;
+  return filtered.sort((left, right) => {
+    const leftTelemetry = telemetryByField.get(left.id), rightTelemetry = telemetryByField.get(right.id);
+    const leftImprovement = Number(leftTelemetry?.failToPassCount || 0) - Number(leftTelemetry?.passToFailCount || 0);
+    const rightImprovement = Number(rightTelemetry?.failToPassCount || 0) - Number(rightTelemetry?.passToFailCount || 0);
+    return telemetryChange(right, rightTelemetry) - telemetryChange(left, leftTelemetry)
+      || rightImprovement - leftImprovement
+      || (fieldOrder.get(left) ?? Number.MAX_SAFE_INTEGER) - (fieldOrder.get(right) ?? Number.MAX_SAFE_INTEGER);
+  });
+}
+
+export function fieldRows(fields, { state, telemetryByField, chartMode }) {
+  if (!fields.length) {
+    const message = state.sort === "changed"
+        ? state.telemetryAvailability.status === "comparable"
+          ? "No changed fields in this telemetry."
+          : state.telemetryAvailability.reason
+        : "No fields match the current view.";
+    return `<div class="empty">${escapeHtml(message)}</div>`;
+  }
+  return `<div class="hybrid-list">${fields.map((field, index) => {
+    const expanded = state.expanded.has(field.id);
+    const telemetry = telemetryByField.get(field.id);
+    return `<section class="hybrid-row ${nonPass(field) ? "fail" : "pass"}${expanded ? " expanded" : ""}" data-row-expand-key="${escapeHtml(field.id)}" role="button" tabindex="0" aria-expanded="${expanded}" title="${escapeHtml(field.label)}">${hybridField(field)}${hybridMetric(field, telemetry)}<div class="hybrid-chart">${chart(field, index === 0, chartMode)}</div></section>`;
+  }).join("")}</div>`;
+}
diff --git a/dashboard/src/oven/differential-testing-render/differential-testing-renderer.js b/dashboard/src/oven/differential-testing-render/differential-testing-renderer.js
new file mode 100644
index 0000000..6756741
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/differential-testing-renderer.js
@@ -0,0 +1,704 @@
+import {
+  renderDifferentialTestingFrameDeltaChart,
+  renderDifferentialTestingProgressChart,
+} from "./differential-testing-progress-chart.js";
+import {
+  escapeHtml,
+  count,
+  kpiTotal,
+  percent,
+  value,
+  compact,
+  blockers,
+  unique,
+  timeOnly,
+  dateTime,
+  overviewTime,
+  formatLogRelativeMinutes,
+  kpiItem,
+  burnDonut,
+  progressDonut,
+  waffleMetric,
+  log,
+  chart,
+  fieldRows,
+  visibleFields,
+  GREEN,
+  RED,
+} from "./differential-testing-render.js";
+import { templateHtml } from "./differential-testing-template.js";
+// The canonical minute age display remains: return minutes === 0 ? "now" : minutes + "m";
+
+export { differentialSampleStateIsNonPass } from "./differential-testing-render.js";
+
+export function differentialTestingLoadingMarkup() {
+  const title = `<div class="driving-parity-kpi-item driving-parity-kpi-title-item">
+      <span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span>
+      <span class="driving-parity-kpi-title-subtitle"><span class="differential-scenario-control"><select aria-label="Differential Testing scenario" disabled><option selected>Loading scenario…</option></select></span></span>
+    </div>`;
+  const template = differentialTestingDashboardTemplateMarkup()
+    .replace('<main id="burnlist-detail" class="detail-view" hidden>', '<main id="burnlist-detail" class="detail-view">')
+    .replace('<section class="differential-overview" id="differential-overview" hidden>', '<section class="differential-overview" id="differential-overview">')
+    .replace('<div class="driving-parity-kpi-strip" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"></div>', `<div class="driving-parity-kpi-strip" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs">${title}</div>`)
+    .replace('<h2 id="progress-panel-title">Progress</h2>', '<h2 id="progress-panel-title">Parity Progress</h2>')
+    .replace('<button type="button" data-progress-chart-mode="failed">', '<button type="button" data-progress-chart-mode="failed" aria-pressed="false">')
+    .replace('<button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta">', '<button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">')
+    .replace('<main id="driving-parity-page" class="driving-parity-page" hidden>', '<main id="driving-parity-page" class="driving-parity-page">')
+    .replace('<h2 id="driving-parity-summary" class="driving-parity-summary" hidden></h2>', '<h2 id="driving-parity-summary" class="driving-parity-summary">Fields List</h2>')
+    .replace('<div id="driving-parity-controls" class="driving-parity-controls" hidden>', '<div id="driving-parity-controls" class="driving-parity-controls">');
+  return `<div class="differential-testing-loading" aria-busy="true">
+    <span class="differential-loading-sr" role="status">Loading Differential Testing</span>
+    <div class="differential-testing-loading-visual" aria-hidden="true" inert>${template}</div>
+  </div>`;
+}
+
+function differentialTestingDashboardTemplateMarkup() {
+  return mountDifferentialTestingDashboard(null, null, null, { templateOnly: true });
+}
+
+export function differentialPayloadRevision(payload) {
+  return JSON.stringify(payload ?? null);
+}
+
+export function differentialRefreshStatusLabel(refresh, clientStatus = null) {
+  if (clientStatus === "loading") return "Loading";
+  if (clientStatus === "queued") return "Queued";
+  if (clientStatus === "running") return "Updating";
+  if (clientStatus === "failed") return "Update failed";
+  if (refresh?.status === "queued") return "Queued";
+  if (refresh?.status === "running") return "Updating";
+  if (refresh?.status === "failed") return "Update failed";
+  return "";
+}
+
+export function differentialHistoryPoints(points) {
+  return Array.isArray(points) ? points.slice() : [];
+}
+
+export function differentialProgressChartHistory(payload, { mode = "value" } = {}) {
+  const points = differentialHistoryPoints(payload?.progress);
+  return points.map((point) => {
+    const total = Math.max(0, Number(point.frames) || 0);
+    const rawValue = mode === "delta" ? point.frameDelta : point.frame;
+    const value = rawValue === null || rawValue === undefined ? 0 : Math.max(0, Number(rawValue) || 0);
+    return {
+      time: point.timestamp,
+      percent: total ? value / total * 100 : 0,
+      done: value,
+      remaining: Math.max(0, total - value),
+      total,
+    };
+  });
+}
+
+export function differentialExactPrefixFrameDeltaMetrics(payload, metrics) {
+  const ratios = metrics?.frameDeviationRatios;
+  const latest = Array.isArray(payload?.progress) ? payload.progress.at(-1) : null;
+  const clearedFrame = Number(latest?.frame);
+  const frameCount = Number(latest?.frames);
+  if (!Array.isArray(ratios) || !Number.isSafeInteger(clearedFrame) || !Number.isSafeInteger(frameCount)
+    || frameCount !== ratios.length || clearedFrame < 0 || clearedFrame > frameCount
+    || ratios.some((value) => !Number.isFinite(Number(value)) || Number(value) < 0)) return null;
+  return {
+    ...metrics,
+    frameDeviationRatios: ratios.map((value, frame) => frame < clearedFrame ? 0 : Number(value)),
+    firstFailingFrame: clearedFrame < frameCount ? clearedFrame : -1,
+  };
+}
+
+export function differentialTelemetryFieldMap(payload) {
+  if (payload?.telemetry?.status !== "comparable" || !Array.isArray(payload.telemetry.fields)) return new Map();
+  return new Map(payload.telemetry.fields.map((field) => [field.id, field]));
+}
+
+export function differentialPagedPayload(payload, fieldPage) {
+  if (!fieldPage) return payload;
+  const fields = Array.isArray(fieldPage.fields) ? fieldPage.fields : [];
+  const next = { ...payload, fields };
+  if (payload?.telemetry?.status === "comparable") {
+    next.telemetry = {
+      ...payload.telemetry,
+      fields: Array.isArray(fieldPage.telemetryFields) ? fieldPage.telemetryFields : [],
+    };
+  }
+  return next;
+}
+
+export function differentialTelemetryAvailability(payload) {
+  const telemetry = payload?.telemetry;
+  if (telemetry?.status === "comparable" && Array.isArray(telemetry.fields)) {
+    return { status: "comparable", reason: "" };
+  }
+  if (telemetry?.status === "blocked") {
+    return {
+      status: "blocked",
+      reason: Array.isArray(telemetry.blockers) && telemetry.blockers.length
+        ? telemetry.blockers.join(" · ")
+        : "Changed is unavailable because transition telemetry is blocked.",
+    };
+  }
+  return {
+    status: "unavailable",
+    reason: "Changed is unavailable until comparable transition telemetry is published.",
+  };
+}
+
+export function differentialExactTarget(payload) {
+  const exact = payload?.exactSession;
+  if (!exact) return { mode: "aggregate", status: "absent", fieldId: null, label: null, reason: "" };
+  if (exact.strategy !== "exact-first") {
+    return { mode: "exact", status: "blocked", fieldId: null, label: null, reason: "The published exact session has an invalid strategy." };
+  }
+  if (exact.status !== "ready") {
+    return {
+      mode: "exact",
+      status: exact.status === "complete" ? "complete" : "blocked",
+      fieldId: null,
+      label: null,
+      reason: exact.status === "complete"
+        ? "Exact contract is complete; scenario PASS or FAIL is reported separately."
+        : exact.blockers?.[0] || "Exact target authority is blocked.",
+    };
+  }
+  const decision = exact.decision;
+  if (decision?.kind !== "runtime-change" || !decision?.targetFieldId) {
+    return { mode: "exact", status: "no-target", fieldId: null, label: null, reason: decision?.nextAction || "The checked exact session names no target." };
+  }
+  return { mode: "exact", status: "ready", fieldId: decision.targetFieldId, label: decision.targetLabel, reason: decision.nextAction };
+}
+
+export function mountDifferentialTestingDashboard(root, oven, payload, {
+  onScenarioChange = () => {},
+  onFieldViewChange = () => {},
+  fieldPage = null,
+  frameDeltaMetrics = null,
+  initialChart = "delta",
+  initialProgressChart = "delta",
+  templateOnly = false,
+} = {}) {
+  if (templateOnly) return templateHtml();
+  const telemetryAvailability = differentialTelemetryAvailability(payload);
+  const state = {
+    chart: initialChart === "current" ? "current" : "delta",
+    progressChart: initialProgressChart,
+    sort: fieldPage?.sort ?? (telemetryAvailability.status === "comparable" ? "changed" : "default"),
+    filter: fieldPage?.filter ?? "all",
+    search: fieldPage?.search ?? "",
+    pageIndex: fieldPage?.page ?? 0,
+    pageSize: fieldPage?.pageSize ?? 25,
+    expanded: new Set(),
+    telemetryByField: differentialTelemetryFieldMap(payload),
+    telemetryAvailability,
+    clientRefreshStatus: null,
+    pendingScenarioId: null,
+    oven,
+    payload,
+    fieldPage,
+    frameDeltaMetrics,
+  };
+  let inputRenderTimer = 0;
+  let fieldOrder = new Map(payload.fields.map((field, index) => [field, index]));
+
+  root.className = "shell driving-parity-view";
+
+  function trustBlockerSummaries(payload) {
+    const result = [];
+    const append = (label, status, entries) => {
+      if (status !== "blocked") return;
+      const reasons = blockers(entries);
+      result.push(`${label} blocked${reasons.length ? `: ${reasons.join("; ")}` : ""}`);
+    };
+    append("primary", payload?.trust?.status, payload?.trust?.blockers);
+    append("telemetry", payload?.telemetry?.status, payload?.telemetry?.blockers);
+    append("exact", payload?.exactSession?.status, payload?.exactSession?.blockers);
+    return unique(result);
+  }
+  function scenarioSelector() {
+    const catalog = state.payload.scenarioCatalog;
+    const scenarios = Array.isArray(catalog?.scenarios) ? catalog.scenarios : [];
+    const selected = state.pendingScenarioId || catalog?.selectedScenarioId || "";
+    const options = scenarios.map((scenario) => `<option value="${escapeHtml(scenario.id)}"${scenario.id === selected ? " selected" : ""}>${escapeHtml(scenario.id)}</option>`).join("");
+    return `<span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario"${scenarios.length < 2 ? " disabled" : ""}>${options}</select></span>`;
+  }
+  function refreshStatus() {
+    const status = differentialRefreshStatusLabel(state.payload.refresh, state.clientRefreshStatus);
+    const statusTitle = state.payload.refresh?.status === "failed" ? state.payload.refresh.error || status : status;
+    return `<span id="differential-refresh-status" class="differential-refresh-status ${escapeHtml(state.clientRefreshStatus || state.payload.refresh?.status || "")}" title="${escapeHtml(statusTitle)}"${status ? "" : " hidden"}>${escapeHtml(status)}</span>`;
+  }
+  function paintWaffles() {
+    const scale = window.devicePixelRatio || 1;
+    root.querySelectorAll("canvas.driving-parity-kpi-waffle").forEach((waffle) => {
+      waffle.style.transform = "";
+      const box = waffle.getBoundingClientRect();
+      const dx = Math.round(box.x * scale) / scale - box.x;
+      const dy = Math.round(box.y * scale) / scale - box.y;
+      if (Math.abs(dx) > .001 || Math.abs(dy) > .001) waffle.style.transform = `translate(${dx.toFixed(3)}px, ${dy.toFixed(3)}px)`;
+      const cssWidth = Math.max(1, Math.round(box.width));
+      const cssHeight = Math.max(1, Math.round(box.height));
+      const bitmapWidth = Math.max(1, Math.round(cssWidth * scale));
+      const bitmapHeight = Math.max(1, Math.round(cssHeight * scale));
+      if (waffle.width !== bitmapWidth) waffle.width = bitmapWidth;
+      if (waffle.height !== bitmapHeight) waffle.height = bitmapHeight;
+      const context = waffle.getContext("2d");
+      if (!context) return;
+      context.setTransform(scale, 0, 0, scale, 0, 0);
+      context.clearRect(0, 0, cssWidth, cssHeight);
+      const failedCells = Math.max(0, Math.min(80, Number(waffle.dataset.failedCells) || 0));
+      const styles = getComputedStyle(document.documentElement);
+      const passColor = styles.getPropertyValue("--driving-parity-kpi-green").trim() || GREEN;
+      const failColor = styles.getPropertyValue("--driving-parity-kpi-red").trim() || RED;
+      for (let index = 0; index < 80; index += 1) {
+        const row = Math.floor(index / 10);
+        const column = index % 10;
+        const rightColumnRank = (9 - column) * 8 + (7 - row);
+        const empty = waffle.dataset.empty === "true";
+        context.globalAlpha = empty ? .2 : rightColumnRank < failedCells ? 1 : .34;
+        context.fillStyle = empty ? "rgb(168,168,168)" : rightColumnRank < failedCells ? failColor : passColor;
+        context.fillRect(Math.max(0, cssWidth - 39) + column * 4, Math.max(0, Math.floor((cssHeight - 31) / 2)) + row * 4, 3, 3);
+      }
+      context.globalAlpha = 1;
+      context.setTransform(1, 0, 0, 1, 0, 0);
+    });
+  }
+  function progress() {
+    return `<svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>`;
+  }
+  function paginationState(total) {
+    const pageCount = Math.max(1, Math.ceil(total / state.pageSize));
+    state.pageIndex = Math.max(0, Math.min(state.pageIndex, pageCount - 1));
+    const start = total ? state.pageIndex * state.pageSize + 1 : 0;
+    const end = Math.min(total, (state.pageIndex + 1) * state.pageSize);
+    return { pageCount, start, end };
+  }
+  function renderProgressChart() {
+    const progressChart = root.querySelector("#progress-chart");
+    if (!progressChart) return;
+    if (state.payload.primaryChartField) return;
+    if (state.progressChart === "delta") {
+      const exactMetrics = differentialExactPrefixFrameDeltaMetrics(state.payload, state.frameDeltaMetrics);
+      if (!exactMetrics) {
+        progressChart.replaceChildren?.();
+        progressChart.setAttribute?.("aria-label", "Exact-prefix frame delta metrics unavailable");
+        return;
+      }
+      renderDifferentialTestingFrameDeltaChart(progressChart, exactMetrics);
+      return;
+    }
+    renderDifferentialTestingProgressChart(
+      progressChart,
+      differentialProgressChartHistory(state.payload, { mode: "value" }),
+      { mode: "progress", timeScale: "compact" },
+    );
+    progressChart.setAttribute?.("aria-label", "Cumulative cleared frames per report");
+  }
+  function buildDashboardHtml() {
+    const visible = visibleFields(state, state.telemetryByField, fieldOrder);
+    const serverPage = state.fieldPage;
+    if (!serverPage) {
+      state.pageIndex = Math.max(0, Math.min(state.pageIndex, Math.max(0, Math.ceil(visible.length / state.pageSize) - 1)));
+    }
+    const start = state.pageIndex * state.pageSize;
+    const page = serverPage ? visible : visible.slice(start, start + state.pageSize);
+    const telemetrySummary = state.payload.telemetry?.status === "comparable"
+      ? `${count(state.payload.telemetry.summary.failToPassCount)} F→P · ${count(state.payload.telemetry.summary.passToFailCount)} P→F · reconciled telemetry only`
+      : "";
+    const subtitleParts = [state.payload.subtitle, dateTime(state.payload.publishedAt), telemetrySummary, ...trustBlockerSummaries(state.payload)].filter(Boolean);
+    const changedUnavailable = state.telemetryAvailability.status !== "comparable";
+    const pageState = serverPage
+      ? {
+          pageCount: serverPage.pageCount,
+          start: serverPage.total ? serverPage.page * serverPage.pageSize + 1 : 0,
+          end: Math.min(serverPage.total, serverPage.page * serverPage.pageSize + visible.length),
+        }
+      : paginationState(visible.length);
+    const visibleTotal = serverPage?.total ?? visible.length;
+    const pageOptions = [25, 50, 100, 200].map((size) => `<option value="${size}"${state.pageSize === size ? " selected" : ""}>${size}</option>`).join("");
+    const paginationHtml = `<div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination"${visibleTotal <= state.pageSize ? " hidden" : ""}><select id="driving-parity-page-size" aria-label="Differential Testing rows per page">${pageOptions}</select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page"${state.pageIndex === 0 ? " disabled" : ""}>Prev</button><span class="page-status" id="driving-parity-page-status">${pageState.start}-${pageState.end} / ${visibleTotal}</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page"${state.pageIndex >= pageState.pageCount - 1 ? " disabled" : ""}>Next</button></div>`;
+    const scenarioKpi = kpiItem({
+      className: "driving-parity-kpi-scenario",
+      title: subtitleParts.join(" · "),
+      visual: '<svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>',
+      heading: "Scenario",
+      headingClass: "differential-scenario-heading",
+      value: scenarioSelector(),
+    });
+    const kpiHtml = `${scenarioKpi}${progressDonut(state.payload.progress)}${burnDonut(state.payload.log)}${waffleMetric(state.payload.summary.fields, "Fields")}${waffleMetric(state.payload.summary.frames, "Frames")}`;
+    const primaryChartField = state.payload.primaryChartField;
+    const primaryChartTitle = String(state.payload.primaryChartTitle || "Parity Progress");
+    const historyTitle = String(state.payload.historyTitle || "Parity Progress");
+    const primaryChartMarkup = primaryChartField
+      ? `<div class="chart hybrid-chart" id="progress-chart" role="img" aria-label="${escapeHtml(primaryChartTitle)} over time">${chart(primaryChartField, true, state.progressChart === "delta" ? "delta" : "value")}</div>`
+      : progress(state.payload.progress);
+    return templateHtml()
+      .replace('<main id="burnlist-detail" class="detail-view" hidden>', '<main id="burnlist-detail" class="detail-view">')
+      .replace('<section class="differential-overview" id="differential-overview" hidden>', '<section class="differential-overview" id="differential-overview">')
+      .replace('<span id="differential-refresh-status" class="differential-refresh-status" hidden></span>', refreshStatus())
+      .replace('<time id="differential-overview-time"></time>', `<time id="differential-overview-time" class="label-toggle differential-tabs" datetime="${escapeHtml(state.payload.publishedAt)}">${overviewTime(state.payload.publishedAt)}</time>`)
+      .replace('<div class="driving-parity-kpi-strip" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"></div>', `<div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs">${kpiHtml}</div>`)
+      .replace('<h2 id="progress-panel-title">Progress</h2>', `<h2 id="progress-panel-title">${escapeHtml(primaryChartTitle)}</h2>`)
+      .replace('<svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>', primaryChartMarkup)
+      .replace('<div class="work-panel-title">Parity Progress</div>', `<div class="work-panel-title">${escapeHtml(historyTitle)}</div>`)
+      .replace('<div class="checklist-log" id="checklist-log"></div>', `<div class="checklist-log" id="checklist-log">${log(state.payload.log)}</div>`)
+      .replace('<main id="driving-parity-page" class="driving-parity-page" hidden>', '<main id="driving-parity-page" class="driving-parity-page">')
+      .replace('<h2 id="driving-parity-summary" class="driving-parity-summary" hidden></h2>', `<h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(${count(state.payload.summary?.fields?.total ?? state.payload.fields.length)})</span></h2>`)
+      .replace('<div id="driving-parity-controls" class="driving-parity-controls" hidden>', '<div id="driving-parity-controls" class="driving-parity-controls">')
+      .replace('data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false"', `data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="${state.chart === "current"}"`)
+      .replace('data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true"', `data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="${state.chart === "delta"}"`)
+      .replace('<button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed</button>', `<button type="button" data-driving-parity-sort="improved" aria-pressed="${state.sort === "changed"}"${changedUnavailable ? ` disabled title="${escapeHtml(state.telemetryAvailability.reason)}"` : ""}>Changed</button>`)
+      .replace('<button type="button" data-driving-parity-filter="failing" aria-pressed="true">Failed</button>', `<button type="button" data-driving-parity-filter="failing" aria-pressed="${state.filter === "failing"}">Failed</button>`)
+      .replace('<button type="button" data-progress-chart-mode="failed">', `<button type="button" data-progress-chart-mode="failed" aria-pressed="${state.progressChart === "failed"}">`)
+      .replace('<button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta">', `<button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="${state.progressChart === "delta"}">`)
+      .replace('<div class="rows-view" id="hybrid-rows"></div>', `<div class="rows-view" id="hybrid-rows">${fieldRows(page, { state, telemetryByField: state.telemetryByField, chartMode: state.chart })}</div>`)
+      .replace(/<div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden>[\s\S]*?<\/div>\n  <\/main>/u, `${paginationHtml}\n  </main>`);
+  }
+  function render() {
+    const existingHeaderTimestamp = typeof document === "undefined" ? null : document.querySelector(".dashboard-primary-nav > #differential-overview-time");
+    const existingHeaderStatus = typeof document === "undefined" ? null : document.querySelector(".dashboard-primary-nav > #differential-refresh-status");
+    existingHeaderTimestamp?.remove();
+    existingHeaderStatus?.remove();
+    if (!state.oven || !state.payload) return;
+    const titleText = String(state.oven.name || "Differential Testing");
+    if (state.payload.scenarioCatalog?.selectedScenarioId === null && state.payload.scenarioCatalog?.scenarios?.length === 0) {
+      root.innerHTML = `<main class="differential-testing-empty-state"><div class="driving-parity-kpi-title-item"><span class="driving-parity-kpi-title">${escapeHtml(titleText)}</span><span class="driving-parity-kpi-title-subtitle"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option selected>No scenarios</option></select></span></span></div><div class="differential-testing-empty-message">No Differential Testing scenarios</div></main>`;
+      return;
+    }
+    const html = buildDashboardHtml();
+    root.innerHTML = html;
+    const overviewTimestamp = root.querySelector("#differential-overview-time");
+    const refreshStatusElement = root.querySelector("#differential-refresh-status");
+    const dashboardNav = typeof document === "undefined" ? null : document.querySelector(".dashboard-primary-nav");
+    if (dashboardNav) {
+      if (refreshStatusElement) dashboardNav.append(refreshStatusElement);
+      if (overviewTimestamp) dashboardNav.append(overviewTimestamp);
+    }
+    paintWaffles();
+    renderProgressChart();
+    const search = root.querySelector("#driving-parity-field-search"), pageSize = root.querySelector("#driving-parity-page-size");
+    search.value = state.search;
+    if (pageSize) pageSize.value = String(state.pageSize);
+  }
+  function requestFieldView({ refocusSearch = false } = {}) {
+    if (!state.fieldPage) {
+      render();
+      if (refocusSearch) {
+        const input = root.querySelector("#driving-parity-field-search");
+        input?.focus?.();
+        input?.setSelectionRange?.(state.search.length, state.search.length);
+      }
+      return;
+    }
+    state.clientRefreshStatus = "loading";
+    render();
+    if (refocusSearch) {
+      const input = root.querySelector("#driving-parity-field-search");
+      input?.focus?.();
+      input?.setSelectionRange?.(state.search.length, state.search.length);
+    }
+    void onFieldViewChange({
+      search: state.search,
+      filter: state.filter,
+      sort: state.sort,
+      page: state.pageIndex,
+      pageSize: state.pageSize,
+    });
+  }
+  root.addEventListener("click", (event) => {
+    const progressControl = event.target.closest("[data-progress-chart-mode]");
+    const chartControl = event.target.closest("[data-driving-parity-chart]");
+    const sortControl = event.target.closest("[data-driving-parity-sort]");
+    const filterControl = event.target.closest("[data-driving-parity-filter]");
+    const pageControl = event.target.closest("#driving-parity-page-prev, #driving-parity-page-next");
+    if (progressControl || chartControl || sortControl || filterControl || pageControl) {
+      if (progressControl) state.progressChart = progressControl.dataset.progressChartMode;
+      if (chartControl) state.chart = chartControl.dataset.drivingParityChart;
+      if (sortControl && state.telemetryAvailability.status === "comparable") state.sort = state.sort === "changed" ? "default" : "changed";
+      if (filterControl) state.filter = state.filter === "failing" ? "all" : "failing";
+      if (pageControl?.id === "driving-parity-page-prev") state.pageIndex = Math.max(0, state.pageIndex - 1);
+      if (pageControl?.id === "driving-parity-page-next") state.pageIndex += 1;
+      if (sortControl || filterControl) state.pageIndex = 0;
+      if (sortControl || filterControl || pageControl) requestFieldView();
+      else render();
+      return;
+    }
+    const row = event.target.closest("[data-row-expand-key]");
+    if (!row) return;
+    const key = row.dataset.rowExpandKey;
+    if (state.expanded.has(key)) state.expanded.delete(key);
+    else state.expanded.add(key);
+    render();
+  });
+  root.addEventListener("change", (event) => {
+    if (event.target.matches("#differential-scenario-selector")) {
+      const scenarioId = String(event.target.value || "");
+      if (scenarioId && scenarioId !== state.payload.scenarioCatalog?.selectedScenarioId) {
+        state.clientRefreshStatus = "loading";
+        state.pendingScenarioId = scenarioId;
+        render();
+        onScenarioChange(scenarioId);
+      }
+      return;
+    }
+    if (event.target.matches("#driving-parity-page-size")) {
+      state.pageSize = Number(event.target.value) || 25;
+      state.pageIndex = 0;
+      requestFieldView();
+      return;
+    }
+    render();
+  });
+  root.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    const row = event.target.closest("[data-row-expand-key]");
+    if (!row) return;
+    event.preventDefault();
+    row.click();
+  });
+  root.addEventListener("input", (event) => {
+    if (!event.target.matches("#driving-parity-field-search")) return;
+    state.search = event.target.value;
+    state.pageIndex = 0;
+    window.clearTimeout(inputRenderTimer);
+    inputRenderTimer = window.setTimeout(() => {
+      requestFieldView({ refocusSearch: true });
+    }, state.fieldPage ? 150 : 0);
+  });
+  render();
+  let chartResizeFrame = 0;
+  const scheduleProgressChartRender = () => {
+    if (typeof window.requestAnimationFrame !== "function") return;
+    if (chartResizeFrame && typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(chartResizeFrame);
+    chartResizeFrame = window.requestAnimationFrame(() => {
+      chartResizeFrame = 0;
+      renderProgressChart();
+    });
+  };
+  const chartResizeObserver = typeof window.ResizeObserver === "function" ? new window.ResizeObserver(scheduleProgressChartRender) : null;
+  chartResizeObserver?.observe(root);
+  window.addEventListener?.("resize", scheduleProgressChartRender);
+  return {
+    update(nextOven, nextPayload, { fieldPage: nextFieldPage = null, frameDeltaMetrics: nextFrameDeltaMetrics = null } = {}) {
+      state.oven = nextOven;
+      state.payload = nextPayload;
+      state.fieldPage = nextFieldPage;
+      state.frameDeltaMetrics = nextFrameDeltaMetrics;
+      if (nextFieldPage) {
+        state.search = nextFieldPage.search;
+        state.filter = nextFieldPage.filter;
+        state.sort = nextFieldPage.sort;
+        state.pageIndex = nextFieldPage.page;
+        state.pageSize = nextFieldPage.pageSize;
+      }
+      fieldOrder = new Map(nextPayload.fields.map((field, index) => [field, index]));
+      state.clientRefreshStatus = null;
+      state.pendingScenarioId = null;
+      state.telemetryByField = differentialTelemetryFieldMap(nextPayload);
+      state.telemetryAvailability = differentialTelemetryAvailability(nextPayload);
+      if (state.sort === "changed" && state.telemetryAvailability.status !== "comparable") state.sort = "default";
+      render();
+    },
+    setClientRefreshStatus(status) {
+      state.clientRefreshStatus = status;
+      if (status === null) state.pendingScenarioId = null;
+      render();
+    },
+    destroy() {
+      chartResizeObserver?.disconnect();
+      window.removeEventListener?.("resize", scheduleProgressChartRender);
+      if (chartResizeFrame && typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(chartResizeFrame);
+    },
+  };
+}
+
+export const DIFFERENTIAL_TESTING_REFRESH_MS = 2000;
+
+export function startDifferentialTestingLiveUpdates(root, {
+  fetchImpl = globalThis.fetch,
+  setIntervalImpl = globalThis.setInterval.bind(globalThis),
+  clearIntervalImpl = globalThis.clearInterval.bind(globalThis),
+  locationImpl = globalThis.location,
+  historyImpl = globalThis.history,
+  mount = mountDifferentialTestingDashboard,
+  repoKey = null,
+  dataOvenId = "differential-testing",
+  adaptOven = (value) => value,
+  adaptPayload = (value) => value,
+  mountOptions = {},
+  refreshMs = DIFFERENTIAL_TESTING_REFRESH_MS,
+  onError = (error, hasDashboard) => {
+    if (!hasDashboard) root.innerHTML = `<div class="empty">${escapeHtml(String(error?.message || error))}</div>`;
+    else console.error("Could not refresh Differential Testing data.", error);
+  },
+} = {}) {
+  root.innerHTML = differentialTestingLoadingMarkup();
+  let oven = null;
+  let dashboard = null;
+  let payloadRevision = "";
+  let refreshInFlight = false;
+  let refreshQueued = false;
+  let scenarioGeneration = 0;
+  let stopped = false;
+  let activePayloadUrl = "";
+  let renderedPayloadHasReport = false;
+  const payloadCache = new Map();
+  let fieldViewQuery = null;
+  let selectedScenarioId = (() => {
+    try { return new URLSearchParams(locationImpl?.search || "").get("scenario") || ""; }
+    catch { return ""; }
+  })();
+
+  const payloadUrl = (scenarioId) => {
+    const searchParams = new URLSearchParams();
+    if (scenarioId) searchParams.set("scenario", scenarioId);
+    if (repoKey) searchParams.set("repoKey", repoKey);
+    if (fieldViewQuery) {
+      searchParams.set("search", fieldViewQuery.search);
+      searchParams.set("filter", fieldViewQuery.filter);
+      searchParams.set("sort", fieldViewQuery.sort);
+      searchParams.set("page", String(fieldViewQuery.page));
+      searchParams.set("pageSize", String(fieldViewQuery.pageSize));
+    }
+    const query = searchParams.toString();
+    return `/api/oven-data/${encodeURIComponent(dataOvenId)}${query ? `?${query}` : ""}`;
+  };
+
+  const read = async (url, key, fallbackMessage) => {
+    const response = await fetchImpl(url, { cache: "no-store" });
+    const json = await response.json();
+    if (!response.ok) throw new Error(json.error || fallbackMessage);
+    return json[key];
+  };
+
+  const readPayload = async (url) => {
+    const cached = payloadCache.get(url);
+    const response = await fetchImpl(url, {
+      cache: "no-store",
+      ...(cached?.etag ? { headers: { "If-None-Match": cached.etag } } : {}),
+    });
+    if (response.status === 304) {
+      if (!cached) throw new Error("Differential Testing data returned 304 before an initial payload was loaded.");
+      return { ...cached, notModified: true };
+    }
+    const json = await response.json();
+    if (!response.ok) throw new Error(json.error || "Could not load Differential Testing data.");
+    const result = {
+      payload: differentialPagedPayload(adaptPayload(json.payload), json.fieldPage),
+      transport: json.transport ?? null,
+      fieldPage: json.fieldPage ?? null,
+      frameDeltaMetrics: json.frameDeltaMetrics ?? null,
+      etag: response.headers?.get?.("etag") || "",
+      notModified: false,
+    };
+    payloadCache.set(url, result);
+    return result;
+  };
+
+  const pendingRefreshStatus = (payload) => ["queued", "running"].includes(payload?.refresh?.status)
+    ? payload.refresh.status
+    : null;
+
+  const refresh = async () => {
+    if (stopped) return;
+    if (refreshInFlight) {
+      refreshQueued = true;
+      return;
+    }
+    refreshInFlight = true;
+    const requestGeneration = scenarioGeneration;
+    const requestScenarioId = selectedScenarioId;
+    const requestPayloadUrl = payloadUrl(requestScenarioId);
+    try {
+      const [nextOven, payloadResult] = await Promise.all([
+        oven ?? read(`/api/ovens/${encodeURIComponent(dataOvenId)}`, "oven", `Could not load ${dataOvenId} Oven.`),
+        readPayload(requestPayloadUrl),
+      ]);
+      if (stopped || requestGeneration !== scenarioGeneration) return;
+      const payload = payloadResult.payload;
+      if (payloadResult.notModified && dashboard && activePayloadUrl === requestPayloadUrl) {
+        dashboard.setClientRefreshStatus?.(renderedPayloadHasReport ? pendingRefreshStatus(payload) : null);
+        return;
+      }
+      const nextRevision = payloadResult.etag || differentialPayloadRevision(payload);
+      oven = adaptOven(nextOven);
+      if (!dashboard) {
+        dashboard = mount(root, oven, payload, {
+          ...mountOptions,
+          onScenarioChange: selectScenario,
+          onFieldViewChange: selectFieldView,
+          fieldPage: payloadResult.fieldPage,
+          frameDeltaMetrics: payloadResult.frameDeltaMetrics,
+        });
+        renderedPayloadHasReport = Boolean(payload?.refresh?.report);
+      } else if (renderedPayloadHasReport && activePayloadUrl === requestPayloadUrl && pendingRefreshStatus(payload)) {
+        dashboard.setClientRefreshStatus?.(pendingRefreshStatus(payload));
+      } else if (nextRevision !== payloadRevision || activePayloadUrl !== requestPayloadUrl) {
+        dashboard.update(oven, payload, {
+          fieldPage: payloadResult.fieldPage,
+          frameDeltaMetrics: payloadResult.frameDeltaMetrics,
+        });
+        renderedPayloadHasReport = Boolean(payload?.refresh?.report);
+      } else dashboard.setClientRefreshStatus?.(null);
+      payloadRevision = nextRevision;
+      activePayloadUrl = requestPayloadUrl;
+    } catch (error) {
+      if (!stopped) {
+        dashboard?.setClientRefreshStatus?.("failed");
+        onError(error, Boolean(dashboard));
+      }
+    } finally {
+      refreshInFlight = false;
+      if (refreshQueued && !stopped) {
+        refreshQueued = false;
+        void refresh();
+      }
+    }
+  };
+
+  const selectScenario = (scenarioId) => {
+    scenarioGeneration += 1;
+    selectedScenarioId = scenarioId;
+    fieldViewQuery = null;
+    payloadCache.clear();
+    try {
+      const nextUrl = new URL(locationImpl?.href || "/ovens/differential-testing/view", "http://localhost");
+      nextUrl.searchParams.set("scenario", scenarioId);
+      historyImpl?.replaceState?.(null, "", `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`);
+    } catch {}
+    return refresh();
+  };
+
+  const selectFieldView = (query) => {
+    scenarioGeneration += 1;
+    payloadCache.clear();
+    fieldViewQuery = {
+      search: String(query?.search ?? ""),
+      filter: query?.filter === "failing" ? "failing" : "all",
+      sort: query?.sort === "changed" ? "changed" : "default",
+      page: Math.max(0, Number.isSafeInteger(Number(query?.page)) ? Number(query.page) : 0),
+      pageSize: [25, 50, 100, 200].includes(Number(query?.pageSize)) ? Number(query.pageSize) : 25,
+    };
+    return refresh();
+  };
+
+  const ready = refresh();
+  const timer = setIntervalImpl(refresh, refreshMs);
+  return {
+    ready,
+    refresh,
+    selectScenario,
+    selectFieldView,
+    stop() {
+      stopped = true;
+      refreshQueued = false;
+      clearIntervalImpl(timer);
+      dashboard?.destroy?.();
+    },
+  };
+}
+
+const differentialRoot = typeof document === "undefined" || globalThis.location?.pathname !== "/ovens/differential-testing/view"
+  ? null
+  : document.querySelector(".shell.driving-parity-view");
+if (differentialRoot) {
+  document.body.classList.add("driving-parity-view");
+  startDifferentialTestingLiveUpdates(differentialRoot);
+}
diff --git a/dashboard/src/oven/differential-testing-render/differential-testing-template.js b/dashboard/src/oven/differential-testing-render/differential-testing-template.js
new file mode 100644
index 0000000..58e484c
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/differential-testing-template.js
@@ -0,0 +1,974 @@
+export function templateHtml() {
+    return `  <main id="burnlist-detail" class="detail-view" hidden>
+    <section class="differential-overview" id="differential-overview" hidden>
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status" hidden></span><time id="differential-overview-time"></time></div></div>
+      <div class="driving-parity-kpi-strip" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page" hidden>
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary" hidden></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls" hidden>
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="true">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden>
+      <select id="driving-parity-page-size" aria-label="Differential Testing rows per page">
+        <option value="25" selected>25</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+        <option value="200">200</option>
+      </select>
+      <button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page">Prev</button>
+      <span class="page-status" id="driving-parity-page-status">0-0 / 0</span>
+      <button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page">Next</button>
+    </div>
+  </main>`;
+  }
diff --git a/dashboard/src/oven/differential-testing-render/golden-harness.mjs b/dashboard/src/oven/differential-testing-render/golden-harness.mjs
new file mode 100644
index 0000000..cf1ef91
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/golden-harness.mjs
@@ -0,0 +1,483 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { adaptPerformanceTracingReport } from "../../lib/performance-tracing.mjs";
+import { buildPayload } from "../../../../ovens/differential-testing/example/adapter.mjs";
+import {
+  assertDifferentialTestingData,
+  buildDifferentialTelemetry,
+  DIFFERENTIAL_TESTING_TELEMETRY_AUTHORITY,
+  differentialStateVectorSha256,
+} from "../../../../ovens/differential-testing/engine/data-contract.mjs";
+import { assertPerformanceTracingData } from "../../../../ovens/performance-tracing/contract.mjs";
+import { mountDifferentialTestingDashboard, startDifferentialTestingLiveUpdates } from "./differential-testing-renderer.js";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const exampleDir = resolve(here, "../../../../ovens/differential-testing/example");
+const FIXED_NOW = Date.parse("2026-01-01T12:30:00.000Z");
+const PERFORMANCE_TIMESTAMP = "2026-07-15T12:00:00.000Z";
+
+export let lastCaptureRoot = null;
+
+function nsStub() {
+  return {
+    setAttribute() {},
+    append() {},
+    appendChild() {},
+    replaceChildren() {},
+  };
+}
+
+function controlStub() {
+  return {
+    value: "",
+    focus() {},
+    setSelectionRange() {},
+    remove() {},
+    append() {},
+  };
+}
+
+function stubFor(selector) {
+  if (selector === "#progress-chart") return null;
+  if ([
+    "#differential-overview-time",
+    "#differential-refresh-status",
+    "#driving-parity-field-search",
+    "#driving-parity-page-size",
+  ].includes(selector)) return controlStub();
+  return null;
+}
+
+function installGlobals() {
+  const installed = [];
+  if (typeof globalThis.document === "undefined") {
+    globalThis.document = {
+      querySelector: stubFor,
+      createElementNS: () => nsStub(),
+      documentElement: {},
+    };
+    installed.push("document");
+  }
+  if (typeof globalThis.window === "undefined") {
+    globalThis.window = {
+      devicePixelRatio: 1,
+      setTimeout,
+      clearTimeout,
+      addEventListener() {},
+      removeEventListener() {},
+    };
+    installed.push("window");
+  }
+  if (typeof globalThis.getComputedStyle === "undefined") {
+    globalThis.getComputedStyle = () => ({ getPropertyValue: () => "" });
+    installed.push("getComputedStyle");
+  }
+  return () => installed.reverse().forEach((name) => delete globalThis[name]);
+}
+
+function rootStubFor(selector) {
+  return stubFor(selector);
+}
+
+function fakeRoot() {
+  return {
+    className: "",
+    set innerHTML(value) { this._html = value; },
+    get innerHTML() { return this._html ?? ""; },
+    addEventListener(type, handler) {
+      (this._handlers ||= {})[type] = handler;
+    },
+    querySelector: rootStubFor,
+    querySelectorAll: () => [],
+    append() {},
+    remove() {},
+  };
+}
+
+export function captureDashboardRoot(oven, payload, mountOptions = {}, afterMount = null) {
+  const previousTz = process.env.TZ;
+  const previousDateNow = Date.now;
+  const OriginalDTF = Intl.DateTimeFormat;
+  const Shim = function DateTimeFormat(locales, options) {
+    return new OriginalDTF(locales == null ? "en-US" : locales, { timeZone: "UTC", ...(options || {}) });
+  };
+  Shim.prototype = OriginalDTF.prototype;
+  Object.setPrototypeOf(Shim, OriginalDTF);
+  const restoreGlobals = installGlobals();
+  const root = fakeRoot();
+  lastCaptureRoot = root;
+  process.env.TZ = "UTC";
+  Date.now = () => FIXED_NOW;
+  globalThis.Intl.DateTimeFormat = Shim;
+  try {
+    mountDifferentialTestingDashboard(root, oven, payload, mountOptions);
+    afterMount?.(root);
+    return root;
+  } finally {
+    globalThis.Intl.DateTimeFormat = OriginalDTF;
+    Date.now = previousDateNow;
+    if (previousTz === undefined) delete process.env.TZ;
+    else process.env.TZ = previousTz;
+    restoreGlobals();
+  }
+}
+
+export function captureDashboardHtml(oven, payload, mountOptions = {}) {
+  return captureDashboardRoot(oven, payload, mountOptions).innerHTML;
+}
+
+export async function captureDashboardLoadError(error) {
+  const restoreGlobals = installGlobals();
+  const root = fakeRoot();
+  try {
+    const liveUpdates = startDifferentialTestingLiveUpdates(root, {
+      fetchImpl: async () => { throw error; },
+      setIntervalImpl: () => 0,
+      clearIntervalImpl() {},
+    });
+    await liveUpdates.ready;
+    liveUpdates.stop();
+    return root;
+  } finally {
+    restoreGlobals();
+  }
+}
+
+export function ovenLayout() {
+  return { id: "differential-testing", name: "Differential Testing" };
+}
+
+function emptyCaptures() {
+  return ["reference.json", "candidate.json"].map((name) => JSON.parse(readFileSync(resolve(exampleDir, name), "utf8")));
+}
+
+function populatedCaptures() {
+  return [
+    {
+      captureId: "reference-fixture",
+      generatedAt: "2026-01-01T12:00:00.000Z",
+      fields: [
+        { id: "position", label: "Position", sourceOwner: "engine/state", meaning: "One-dimensional position after the update", unit: "units", tolerance: 0.01 },
+        { id: "active", label: "Active", sourceOwner: "engine/state", meaning: "Whether the object is active after the update", unit: null, tolerance: 0 },
+      ],
+      samples: [
+        { tick: 0, values: { position: 0, active: false } },
+        { tick: 1, values: { position: 1, active: true } },
+        { tick: 2, values: { position: 2, active: true } },
+      ],
+    },
+    {
+      captureId: "candidate-fixture",
+      generatedAt: "2026-01-01T12:00:00.000Z",
+      samples: [
+        { tick: 0, values: { position: 0, active: false } },
+        { tick: 1, values: { position: 1.005, active: true } },
+        { tick: 2, values: { position: 2.1, active: true } },
+      ],
+    },
+  ];
+}
+
+function populatedCapturesWithFields(fieldCount) {
+  const captures = populatedCaptures();
+  const [reference, candidate] = captures;
+  for (let index = reference.fields.length; index < fieldCount; index += 1) {
+    const id = `field-${String(index + 1).padStart(2, "0")}`;
+    reference.fields.push({
+      id,
+      label: `Field ${String(index + 1).padStart(2, "0")}`,
+      sourceOwner: "engine/state",
+      meaning: "Generated field after the update",
+      unit: "units",
+      tolerance: 0.01,
+    });
+    reference.samples.forEach((sample) => { sample.values[id] = sample.tick; });
+    candidate.samples.forEach((sample) => { sample.values[id] = sample.tick === 2 ? 2.1 : sample.tick; });
+  }
+  return captures;
+}
+
+function populatedCaptureFieldPage(fieldCount, start, end) {
+  const captures = populatedCapturesWithFields(fieldCount);
+  const [reference] = captures;
+  const ids = reference.fields.slice(start, end).map((field) => field.id);
+  reference.fields = reference.fields.slice(start, end);
+  for (const capture of captures) {
+    capture.samples = capture.samples.map((sample) => ({
+      ...sample,
+      values: Object.fromEntries(ids.map((id) => [id, sample.values[id]])),
+    }));
+  }
+  return captures;
+}
+
+const telemetryProvenance = Object.freeze({
+  comparison: {
+    referenceId: "reference-fixture",
+    referenceSha256: "f".repeat(64),
+    scenarioId: "fixture-scenario",
+    alignmentKey: "tick",
+  },
+  baseline: { id: "baseline-fixture", artifactSha256: "a".repeat(64), contractSha256: "c".repeat(64), check: { status: "pass", id: "baseline-check@1", sha256: "d".repeat(64), subjectSha256: "a".repeat(64) } },
+  candidate: { id: "candidate-fixture", artifactSha256: "b".repeat(64), contractSha256: "c".repeat(64), check: { status: "pass", id: "candidate-check@1", sha256: "e".repeat(64), subjectSha256: "b".repeat(64) } },
+});
+
+function telemetryPayloads({ baselineMode = "mixed", captures = populatedCaptures() } = {}) {
+  const [reference, candidateCapture] = captures;
+  const baselineCapture = structuredClone(candidateCapture);
+  baselineCapture.captureId = "baseline-fixture";
+  baselineCapture.generatedAt = "2026-01-01T11:59:00.000Z";
+  if (baselineMode === "passing") baselineCapture.samples = structuredClone(reference.samples);
+  else if (baselineMode === "directions") {
+    baselineCapture.samples = structuredClone(reference.samples);
+    baselineCapture.samples[1].values.active = false;
+  }
+  else if (baselineMode === "mixed") {
+    for (const field of reference.fields) {
+      const referenceValue = reference.samples[1].values[field.id];
+      baselineCapture.samples[1].values[field.id] = typeof referenceValue === "boolean" ? !referenceValue : 1.1;
+      baselineCapture.samples[2].values[field.id] = reference.samples[2].values[field.id];
+    }
+  }
+  const baseline = buildPayload(reference, baselineCapture);
+  const candidate = buildPayload(reference, candidateCapture);
+  const provenance = structuredClone(telemetryProvenance);
+  provenance.comparison.scenarioId = candidate.scenarioCatalog.selectedScenarioId;
+  provenance.baseline.contractSha256 = candidate.scenarioCatalog.scenarios[0].contractSha256;
+  provenance.candidate.contractSha256 = candidate.scenarioCatalog.scenarios[0].contractSha256;
+  for (const [label, payload] of [["baseline", baseline], ["candidate", candidate]]) {
+    const stateVectorSha256 = differentialStateVectorSha256(payload);
+    provenance[label].stateVectorSha256 = stateVectorSha256;
+    provenance[label].stateVectorCheck = {
+      status: "pass",
+      id: `${label}-state-vector-check@1`,
+      sha256: "8".repeat(64),
+      subjectSha256: stateVectorSha256,
+      artifactSha256: provenance[label].artifactSha256,
+    };
+  }
+  return { baseline, candidate, provenance };
+}
+
+export function differentialTestingPayload() {
+  const base = buildPayload(...populatedCaptures());
+  assertDifferentialTestingData(base);
+  return base;
+}
+
+export function differentialTestingMultiScenarioPayload() {
+  const payload = differentialTestingPayload();
+  const first = payload.scenarioCatalog.scenarios[0];
+  payload.scenarioCatalog.scenarios.push({ ...first, id: "0123456789abcdef", label: "second-fixture" });
+  assertDifferentialTestingData(payload);
+  return payload;
+}
+
+export function differentialTestingEmptyPayload() {
+  const payload = buildPayload(...emptyCaptures());
+  assertDifferentialTestingData(payload);
+  return payload;
+}
+
+export function differentialTestingIncomparableTelemetryPayload() {
+  const payload = buildPayload(...populatedCaptures());
+  payload.telemetry = {
+    status: "blocked",
+    authority: DIFFERENTIAL_TESTING_TELEMETRY_AUTHORITY,
+    blockers: ["Transition telemetry unavailable."],
+  };
+  assertDifferentialTestingData(payload);
+  return payload;
+}
+
+export function differentialTestingComparableTelemetryPayload() {
+  const { baseline, candidate, provenance } = telemetryPayloads({ baselineMode: "directions" });
+  candidate.telemetry = buildDifferentialTelemetry(baseline, candidate, provenance);
+  assertDifferentialTestingData(candidate);
+  return candidate;
+}
+
+export function differentialTestingComparableNoChangedPayload() {
+  const captures = populatedCaptures();
+  captures[1].samples = structuredClone(captures[0].samples);
+  const { baseline, candidate, provenance } = telemetryPayloads({ baselineMode: "passing", captures });
+  candidate.telemetry = buildDifferentialTelemetry(baseline, candidate, provenance);
+  assertDifferentialTestingData(candidate);
+  return candidate;
+}
+
+export function differentialTestingPaginatedPayload() {
+  const { baseline, candidate, provenance } = telemetryPayloads({ captures: populatedCapturesWithFields(60) });
+  candidate.telemetry = buildDifferentialTelemetry(baseline, candidate, provenance);
+  assertDifferentialTestingData(candidate);
+  return candidate;
+}
+
+export function differentialTestingPaginatedMidPayload() {
+  const { baseline, candidate, provenance } = telemetryPayloads({ captures: populatedCaptureFieldPage(60, 25, 50) });
+  candidate.telemetry = buildDifferentialTelemetry(baseline, candidate, provenance);
+  assertDifferentialTestingData(candidate);
+  return candidate;
+}
+
+export function differentialTestingAllPassingPayload() {
+  const captures = populatedCaptures();
+  captures[1].samples = structuredClone(captures[0].samples);
+  const payload = buildPayload(...captures);
+  assertDifferentialTestingData(payload);
+  return payload;
+}
+
+export function performanceTracingPayload() {
+  const report = performanceTracingFixture();
+  assertPerformanceTracingData(report);
+  return adaptPerformanceTracingReport(report);
+}
+
+function performanceTracingFixture() {
+  const value = {
+    schema: "performance-tracing-oven@1",
+    status: "fail",
+    runId: "fixture",
+    generatedAt: PERFORMANCE_TIMESTAMP,
+    trust: {
+      classification: "browser-output-performance-evidence",
+      preparedRoute: true,
+      nativeParityClaim: false,
+      visualParityClaim: false,
+    },
+    browser: { engine: "chromium", version: "1" },
+    scenario: { id: "prepared", route: "/" },
+    metrics: {
+      runCount: 1,
+      startupReadyMs: 1000,
+      p95FrameMs: 40,
+      p99FrameMs: 50,
+      maxFrameMs: 100,
+      over33msRatio: 0.1,
+      p95StepCallMs: 1,
+      pageErrorCount: 0,
+      nativeRequestCount: 0,
+      runtimeConstructionCount: 0,
+    },
+    verdict: {
+      status: "fail",
+      passCount: 0,
+      failCount: 1,
+      checks: [{ id: "p95FrameMs", actual: 40, limit: 25, operator: "<=", status: "fail" }],
+    },
+    artifacts: { report: "report.json" },
+    provenance: { files: { "source.mjs": { sha256: "a", bytes: 1 } } },
+    runs: [{
+      id: "run-01",
+      status: "passed",
+      frameTiming: { p95FrameMs: 40, series: [{ frame: 0, elapsedMs: 40, frameMs: 40 }] },
+      stepTiming: {
+        p95StepCallMs: 1,
+        slowestSteps: [],
+        series: [{ tick: 0, stepCallMs: 1 }],
+        phaseTiming: {
+          schema: "runtime-dispatch-phase-summary@1",
+          sampleCount: 1,
+          phases: { cameraResidency: phase() },
+        },
+        cameraPhaseTiming: {
+          schema: "camera-publication-phase-summary@1",
+          sampleCount: 1,
+          phases: { assetResidencyDiscovery: phase() },
+        },
+      },
+      trace: {
+        schema: "browser-performance-trace-summary@2",
+        attributionMode: "exclusive-classified-thread-time@1",
+        measurementWindow: { status: "bounded" },
+        groups: { scripting: { label: "JS / scripting", durationMs: 100, inclusiveDurationMs: 120, count: 10, maxMs: 4, timeline: { mode: "exclusive-classified-thread-time", bucketDurationMs: 50, values: [1] } } },
+      },
+      integrity: { pageErrorCount: 0, nativeRequestCount: 0, runtimeConstructionCount: 0 },
+    }],
+  };
+  value.history = [{
+    schema: "performance-history-point@1",
+    runId: value.runId,
+    generatedAt: PERFORMANCE_TIMESTAMP,
+    status: value.status,
+    comparisonKey: "fixture-context",
+    context: { browserTarget: "fixture", scenarioId: "prepared" },
+    metrics: {
+      startupReadyMs: 1000,
+      p95FrameMs: 40,
+      p99FrameMs: 50,
+      maxFrameMs: 100,
+      over33msRatio: 0.1,
+      p95StepCallMs: 1,
+      maxStepCallMs: 4,
+      residencyTransitionStepCount: 1,
+    },
+    budgets: { p95FrameMs: 25 },
+    traceGroups: { scripting: { label: "JS / scripting", durationMs: 100, count: 10, maxMs: 4 } },
+  }];
+  value.diagnostics = {
+    schema: "performance-diagnostics@1",
+    runId: value.runId,
+    generatedAt: PERFORMANCE_TIMESTAMP,
+    primaryTarget: action(),
+    budgetGaps: [{ id: "p95FrameMs", actual: 40, limit: 25, excess: 15, ratioToLimit: 1.6, percentOverLimit: 60 }],
+    comparison: { comparable: false, previousRunId: null, previousGeneratedAt: null, metricChanges: {} },
+    runs: [{
+      runId: "run-01",
+      frameSpikes: [{ frame: 0, elapsedMs: 40, frameMs: 40, overBudgetMs: 15 }],
+      stepSpikes: [],
+      phaseBottlenecks: [{ id: "cameraResidency", ...phase() }],
+      cameraPhaseBottlenecks: [{ id: "assetResidencyDiscovery", ...phase() }],
+      traceGroups: [],
+      hotWindows: [{ bucket: 0, startMs: 0, endMs: 50, classifiedThreadTimeMs: 1, contributors: [] }],
+      topEvents: [],
+      structure: { integrity: value.runs[0].integrity },
+    }],
+    phaseBottlenecks: [{ id: "cameraResidency", ...phase(), runId: "run-01" }],
+    cameraPhaseBottlenecks: [{ id: "assetResidencyDiscovery", ...phase(), runId: "run-01" }],
+    traceGroups: [],
+    residencySpikes: [],
+    actionItems: [action()],
+    rerun: {
+      command: "pnpm perf:trace -- --runs 1 --no-fail-on-budget",
+      comparisonKey: "fixture-context",
+      compareAgainstRunId: value.runId,
+      protocol: ["Change one producer."],
+      requiredIntegrity: { pageErrorCount: 0, nativeRequestCount: 0, runtimeConstructionCount: 0 },
+      successCriteria: [{ id: "p95FrameMs", operator: "<=", limit: 25 }],
+    },
+    caveats: ["inclusive", "instrumented", "browser output"],
+  };
+  return value;
+}
+
+function phase() {
+  return {
+    label: "camera / city residency",
+    producer: "src/runtime/scene.mjs",
+    nextProbe: "Separate camera and residency work.",
+    sampleCount: 1,
+    totalMs: 4,
+    averageMs: 4,
+    p50Ms: 4,
+    p95Ms: 4,
+    maxMs: 4,
+    attributedShare: 1,
+  };
+}
+
+function action() {
+  return {
+    id: "dispatch-phase-cameraResidency",
+    priority: 1,
+    target: "camera / city residency",
+    producer: "src/runtime/scene.mjs",
+    signal: "dispatch phase max 4 ms",
+    evidence: { maxMs: 4 },
+    nextAction: "Separate camera and residency work.",
+    verifyMetrics: ["p95StepCallMs"],
+  };
+}
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-chart-current-failed.html b/dashboard/src/oven/differential-testing-render/goldens/dt-chart-current-failed.html
new file mode 100644
index 0000000..1653f87
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-chart-current-failed.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="true"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="false">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="true">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="false">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><path d="M0.0,51.0L448.8,30.0" fill="none" stroke="#61d394" stroke-width="1.5" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.9L900.0,7.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,30.0L900.0,9.1" fill="none" stroke="#61d394" stroke-width="1.25" stroke-dasharray="5 4" stroke-dashoffset="0.00" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><path d="M0.00,50.97L450.00,7.03L900.00,7.03" fill="none" stroke="#61d394" stroke-width="1.5" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-2 / 2</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-comparable-no-changed.html b/dashboard/src/oven/differential-testing-render/goldens/dt-comparable-no-changed.html
new file mode 100644
index 0000000..2471144
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-comparable-no-changed.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM · 0 F→P · 0 P→F · reconciled telemetry only"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment improved" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">0</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">1 (100%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="0% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="0" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="0% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="0" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">0 (0%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="empty">No changed fields in this telemetry.</div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">0-0 / 0</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-comparable-telemetry.html b/dashboard/src/oven/differential-testing-render/goldens/dt-comparable-telemetry.html
new file mode 100644
index 0000000..a61ac92
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-comparable-telemetry.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM · 1 F→P · 1 P→F · reconciled telemetry only"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta up" title="1 fail-to-pass; 0 pass-to-fail; 2 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol">▼</span><span class="hybrid-delta-value">1</span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L450.0,29.0 M450.0,29.0L900.0,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta down" title="0 fail-to-pass; 1 pass-to-fail; 2 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol">▲</span><span class="hybrid-delta-value">1</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-2 / 2</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-empty.html b/dashboard/src/oven/differential-testing-render/goldens/dt-empty.html
new file mode 100644
index 0000000..aef2012
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-empty.html
@@ -0,0 +1 @@
+<main class="differential-testing-empty-state"><div class="driving-parity-kpi-title-item"><span class="driving-parity-kpi-title">Differential Testing</span><span class="driving-parity-kpi-title-subtitle"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option selected>No scenarios</option></select></span></span></div><div class="differential-testing-empty-message">No Differential Testing scenarios</div></main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-load-error.html b/dashboard/src/oven/differential-testing-render/goldens/dt-load-error.html
new file mode 100644
index 0000000..54dd93d
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-load-error.html
@@ -0,0 +1 @@
+<div class="empty">network unreachable</div>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-main.html b/dashboard/src/oven/differential-testing-render/goldens/dt-main.html
new file mode 100644
index 0000000..ea15e50
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-main.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L450.0,29.0 M450.0,29.0L900.0,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-2 / 2</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-no-match.html b/dashboard/src/oven/differential-testing-render/goldens/dt-no-match.html
new file mode 100644
index 0000000..193c127
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-no-match.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment improved" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">0</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">1 (100%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="0% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="0" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="0% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="0" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">0 (0%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="true">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="empty">No fields match the current view.</div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">0-0 / 0</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-paginated-mid.html b/dashboard/src/oven/differential-testing-render/goldens/dt-paginated-mid.html
new file mode 100644
index 0000000..3032c6c
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-paginated-mid.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM · 25 F→P · 25 P→F · reconciled telemetry only"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="100% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="80" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">25</span><span class="separator">·</span><span class="fail">25 (100%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="33.3% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="32" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">75</span><span class="separator">·</span><span class="fail">25 (33.3%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(25)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="field-26" role="button" tabindex="0" aria-expanded="false" title="Field 26"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 26</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-27" role="button" tabindex="0" aria-expanded="false" title="Field 27"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 27</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-28" role="button" tabindex="0" aria-expanded="false" title="Field 28"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 28</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-29" role="button" tabindex="0" aria-expanded="false" title="Field 29"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 29</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-30" role="button" tabindex="0" aria-expanded="false" title="Field 30"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 30</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-31" role="button" tabindex="0" aria-expanded="false" title="Field 31"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 31</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-32" role="button" tabindex="0" aria-expanded="false" title="Field 32"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 32</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-33" role="button" tabindex="0" aria-expanded="false" title="Field 33"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 33</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-34" role="button" tabindex="0" aria-expanded="false" title="Field 34"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 34</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-35" role="button" tabindex="0" aria-expanded="false" title="Field 35"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 35</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-36" role="button" tabindex="0" aria-expanded="false" title="Field 36"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 36</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-37" role="button" tabindex="0" aria-expanded="false" title="Field 37"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 37</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-38" role="button" tabindex="0" aria-expanded="false" title="Field 38"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 38</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-39" role="button" tabindex="0" aria-expanded="false" title="Field 39"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 39</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-40" role="button" tabindex="0" aria-expanded="false" title="Field 40"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 40</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-41" role="button" tabindex="0" aria-expanded="false" title="Field 41"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 41</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-42" role="button" tabindex="0" aria-expanded="false" title="Field 42"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 42</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-43" role="button" tabindex="0" aria-expanded="false" title="Field 43"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 43</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-44" role="button" tabindex="0" aria-expanded="false" title="Field 44"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 44</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-45" role="button" tabindex="0" aria-expanded="false" title="Field 45"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 45</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-46" role="button" tabindex="0" aria-expanded="false" title="Field 46"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 46</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-47" role="button" tabindex="0" aria-expanded="false" title="Field 47"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 47</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-48" role="button" tabindex="0" aria-expanded="false" title="Field 48"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 48</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-49" role="button" tabindex="0" aria-expanded="false" title="Field 49"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 49</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-50" role="button" tabindex="0" aria-expanded="false" title="Field 50"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 50</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination"><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page">Prev</button><span class="page-status" id="driving-parity-page-status">26-50 / 60</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page">Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-paginated.html b/dashboard/src/oven/differential-testing-render/goldens/dt-paginated.html
new file mode 100644
index 0000000..d4b0513
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-paginated.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM · 60 F→P · 59 P→F · reconciled telemetry only"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="98.3% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="80" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">60</span><span class="separator">·</span><span class="fail">59 (98.3%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="32.8% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="31" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">180</span><span class="separator">·</span><span class="fail">59 (32.8%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(60)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-03" role="button" tabindex="0" aria-expanded="false" title="Field 03"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 03</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-04" role="button" tabindex="0" aria-expanded="false" title="Field 04"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 04</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-05" role="button" tabindex="0" aria-expanded="false" title="Field 05"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 05</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-06" role="button" tabindex="0" aria-expanded="false" title="Field 06"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 06</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-07" role="button" tabindex="0" aria-expanded="false" title="Field 07"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 07</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-08" role="button" tabindex="0" aria-expanded="false" title="Field 08"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 08</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-09" role="button" tabindex="0" aria-expanded="false" title="Field 09"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 09</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-10" role="button" tabindex="0" aria-expanded="false" title="Field 10"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 10</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-11" role="button" tabindex="0" aria-expanded="false" title="Field 11"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 11</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-12" role="button" tabindex="0" aria-expanded="false" title="Field 12"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 12</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-13" role="button" tabindex="0" aria-expanded="false" title="Field 13"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 13</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-14" role="button" tabindex="0" aria-expanded="false" title="Field 14"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 14</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-15" role="button" tabindex="0" aria-expanded="false" title="Field 15"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 15</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-16" role="button" tabindex="0" aria-expanded="false" title="Field 16"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 16</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-17" role="button" tabindex="0" aria-expanded="false" title="Field 17"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 17</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-18" role="button" tabindex="0" aria-expanded="false" title="Field 18"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 18</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-19" role="button" tabindex="0" aria-expanded="false" title="Field 19"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 19</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-20" role="button" tabindex="0" aria-expanded="false" title="Field 20"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 20</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-21" role="button" tabindex="0" aria-expanded="false" title="Field 21"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 21</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-22" role="button" tabindex="0" aria-expanded="false" title="Field 22"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 22</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-23" role="button" tabindex="0" aria-expanded="false" title="Field 23"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 23</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-24" role="button" tabindex="0" aria-expanded="false" title="Field 24"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 24</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-25" role="button" tabindex="0" aria-expanded="false" title="Field 25"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 25</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="field-26" role="button" tabindex="0" aria-expanded="false" title="Field 26"><span class="hybrid-cell hybrid-field" title="Generated field after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Field 26</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta " title="1 fail-to-pass; 1 pass-to-fail; 1 stayed-pass; 0 stayed-fail; residual 0"><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value">0</span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,29.0L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination"><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-25 / 60</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page">Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-progress-mode.html b/dashboard/src/oven/differential-testing-render/goldens/dt-progress-mode.html
new file mode 100644
index 0000000..c36e766
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-progress-mode.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="false">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L450.0,29.0 M450.0,29.0L900.0,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-2 / 2</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-row-expanded.html b/dashboard/src/oven/differential-testing-render/goldens/dt-row-expanded.html
new file mode 100644
index 0000000..23ecd64
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-row-expanded.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail expanded" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="true" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L450.0,29.0 M450.0,29.0L900.0,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-2 / 2</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-scenario-multi.html b/dashboard/src/oven/differential-testing-render/goldens/dt-scenario-multi.html
new file mode 100644
index 0000000..df6dc07
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-scenario-multi.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario"><option value="135b757802521cd1" selected>135b757802521cd1</option><option value="0123456789abcdef">0123456789abcdef</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L450.0,29.0 M450.0,29.0L900.0,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-2 / 2</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-server-paged.html b/dashboard/src/oven/differential-testing-render/goldens/dt-server-paged.html
new file mode 100644
index 0000000..50baa39
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-server-paged.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="true" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L450.0,29.0 M450.0,29.0L900.0,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-2 / 2</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-sorted-filtered-paged.html b/dashboard/src/oven/differential-testing-render/goldens/dt-sorted-filtered-paged.html
new file mode 100644
index 0000000..ba42f0e
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-sorted-filtered-paged.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="true">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L450.0,29.0 M450.0,29.0L900.0,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-1 / 1</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/dt-telemetry-incomparable.html b/dashboard/src/oven/differential-testing-render/goldens/dt-telemetry-incomparable.html
new file mode 100644
index 0000000..79d7406
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/dt-telemetry-incomparable.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status complete" title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-01-01T12:00:00.000Z"><span>Jan 1, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="reference-fixture / candidate-fixture · Jan 1, 2026, 12:00:00 PM · telemetry blocked: Transition telemetry unavailable."><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="135b757802521cd1" selected>135b757802521cd1</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 3 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">3</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment neutral" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">1</span><span class="separator">·</span><span class="reverted">0</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="50% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="48" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">2</span><span class="separator">·</span><span class="fail">1 (50%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="16.7% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="16" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">1 (16.7%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Parity Progress</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">Parity Progress</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">30m</span><span class="log-table-cell failed unchanged">—</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">—</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(2)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Transition telemetry unavailable.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="position" role="button" tabindex="0" aria-expanded="false" title="Position"><span class="hybrid-cell hybrid-field" title="One-dimensional position after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Position</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0.1000</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="450.0" height="58" fill="#61d394" opacity=".10"/><rect x="450.0" y="0" width="450.0" height="58" fill="#ef4444" opacity=".14"/><line class="frame-tick" x1="450.0" x2="450.0" y1="13" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L448.8,27.8" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/><path d="M450.0,27.8L900.0,4.0" fill="none" stroke="#ef4444" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/></svg><span class="frame-tick-label" style="left:50.0000%">1</span></div></div></section><section class="hybrid-row pass" data-row-expand-key="active" role="button" tabindex="0" aria-expanded="false" title="Active"><span class="hybrid-cell hybrid-field" title="Whether the object is active after the update"><span class="table-field-label"><span class="hybrid-field-tail" style="opacity:1.00">Active</span></span><span class="hybrid-status">PASS</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">0</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">0</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><rect x="0.0" y="0" width="900.0" height="58" fill="#61d394" opacity=".10"/><line class="frame-tick" x1="450.0" x2="450.0" y1="0" y2="58" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/><line x1="0" x2="900" y1="29" y2="29" stroke="#61d394" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/><path d="M0.0,29.0L450.0,29.0 M450.0,29.0L900.0,29.0" fill="none" stroke="#61d394" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-2 / 2</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/pt-failed.html b/dashboard/src/oven/differential-testing-render/goldens/pt-failed.html
new file mode 100644
index 0000000..13e8fed
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/pt-failed.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status " title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-07-15T12:00:00.000Z"><span>Jul 15, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="fixture · Jul 15, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="prepared" selected>prepared</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 6 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">6</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment reverted" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">0</span><span class="separator">·</span><span class="reverted">1</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="100% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="80" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">6 (100%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="100% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="80" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">1</span><span class="separator">·</span><span class="fail">1 (100%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Frame timing</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="true"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="false">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <div class="chart hybrid-chart" id="progress-chart" role="img" aria-label="Frame timing over time"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><path d="M0.00,7.03" fill="none" stroke="#61d394" stroke-width="1.5" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">History log</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">now</span><span class="log-table-cell failed unchanged">0</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">0%</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(6)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="true">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="false">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="startup.ready" role="button" tabindex="0" aria-expanded="false" title="startup.ready"><span class="hybrid-cell hybrid-field" title="startupReadyMs measured against startupReadyMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">startup.</span><span class="hybrid-field-tail" style="opacity:1.00">ready</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.p95" role="button" tabindex="0" aria-expanded="false" title="frame.p95"><span class="hybrid-cell hybrid-field" title="p95FrameMs measured against p95FrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">p95</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">15</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.p99" role="button" tabindex="0" aria-expanded="false" title="frame.p99"><span class="hybrid-cell hybrid-field" title="p99FrameMs measured against p99FrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">p99</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.max" role="button" tabindex="0" aria-expanded="false" title="frame.max"><span class="hybrid-cell hybrid-field" title="maxFrameMs measured against maxFrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">max</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.over33" role="button" tabindex="0" aria-expanded="false" title="frame.over33"><span class="hybrid-cell hybrid-field" title="over33msRatio measured against over33msRatio"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">over33</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="step.p95" role="button" tabindex="0" aria-expanded="false" title="step.p95"><span class="hybrid-cell hybrid-field" title="p95StepCallMs measured against p95StepCallMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">step.</span><span class="hybrid-field-tail" style="opacity:1.00">p95</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-6 / 6</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/pt-main.html b/dashboard/src/oven/differential-testing-render/goldens/pt-main.html
new file mode 100644
index 0000000..e5658de
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/pt-main.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status " title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-07-15T12:00:00.000Z"><span>Jul 15, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="fixture · Jul 15, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="prepared" selected>prepared</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 6 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">6</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment reverted" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">0</span><span class="separator">·</span><span class="reverted">1</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="100% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="80" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">6 (100%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="100% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="80" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">1</span><span class="separator">·</span><span class="fail">1 (100%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Frame timing</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <div class="chart hybrid-chart" id="progress-chart" role="img" aria-label="Frame timing over time"><div class="plot"></div></div>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">History log</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">now</span><span class="log-table-cell failed unchanged">0</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">0%</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(6)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="true">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="false">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="startup.ready" role="button" tabindex="0" aria-expanded="false" title="startup.ready"><span class="hybrid-cell hybrid-field" title="startupReadyMs measured against startupReadyMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">startup.</span><span class="hybrid-field-tail" style="opacity:1.00">ready</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.p95" role="button" tabindex="0" aria-expanded="false" title="frame.p95"><span class="hybrid-cell hybrid-field" title="p95FrameMs measured against p95FrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">p95</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">15</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.p99" role="button" tabindex="0" aria-expanded="false" title="frame.p99"><span class="hybrid-cell hybrid-field" title="p99FrameMs measured against p99FrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">p99</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.max" role="button" tabindex="0" aria-expanded="false" title="frame.max"><span class="hybrid-cell hybrid-field" title="maxFrameMs measured against maxFrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">max</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.over33" role="button" tabindex="0" aria-expanded="false" title="frame.over33"><span class="hybrid-cell hybrid-field" title="over33msRatio measured against over33msRatio"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">over33</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="step.p95" role="button" tabindex="0" aria-expanded="false" title="step.p95"><span class="hybrid-cell hybrid-field" title="p95StepCallMs measured against p95StepCallMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">step.</span><span class="hybrid-field-tail" style="opacity:1.00">p95</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-6 / 6</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/differential-testing-render/goldens/pt-progress.html b/dashboard/src/oven/differential-testing-render/goldens/pt-progress.html
new file mode 100644
index 0000000..a02972f
--- /dev/null
+++ b/dashboard/src/oven/differential-testing-render/goldens/pt-progress.html
@@ -0,0 +1,962 @@
+  <main id="burnlist-detail" class="detail-view">
+    <section class="differential-overview" id="differential-overview">
+      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status " title="" hidden></span><time id="differential-overview-time" class="label-toggle differential-tabs" datetime="2026-07-15T12:00:00.000Z"><span>Jul 15, 2026</span><span class="sep" aria-hidden="true">·</span><span>12:00:00 PM</span></time></div></div>
+      <div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-scenario" title="fixture · Jul 15, 2026, 12:00:00 PM"><svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span><span class="driving-parity-kpi-ratio"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option value="prepared" selected>prepared</option></select></span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress" title="0 of 6 exact-prefix frames cleared"><svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="0.000 100.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Progress</span><span class="driving-parity-kpi-ratio"><span class="fail">6</span><span class="separator">·</span><span class="pass">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-burns" title="Results across the current Differential Testing run"><svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21" opacity="0"/><circle class="driving-parity-kpi-burns-donut-segment reverted" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="100.000 0.000" stroke-dashoffset="0.000"/></svg><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Results</span><span class="driving-parity-kpi-ratio driving-parity-kpi-burns-summary"><span class="neutral">0</span><span class="separator">·</span><span class="reverted">1</span><span class="separator">·</span><span class="worsened">0</span><span class="separator">·</span><span class="improved">0 (0%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-fields" title="100% failed fields"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="80" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Fields</span><span class="driving-parity-kpi-ratio"><span class="total">6</span><span class="separator">·</span><span class="fail">6 (100%)</span></span></div></div><div class="driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-frames" title="100% failed frames"><canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="80" data-empty="false"></canvas><div class="driving-parity-kpi-text"><span class="driving-parity-kpi-heading">Frames</span><span class="driving-parity-kpi-ratio"><span class="total">1</span><span class="separator">·</span><span class="fail">1 (100%)</span></span></div></div></div>
+    </section>
+    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+      <div class="detail-report-column">
+        <section class="top" id="detail-top-stack">
+          <div class="panel progress-panel">
+            <div class="panel-title-row">
+              <div class="progress-title-group">
+                <h2 id="progress-panel-title">Frame timing</h2>
+                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
+              </div>
+              <div class="chart-tools">
+                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                  <button type="button" data-progress-chart-mode="failed" aria-pressed="false"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
+                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="false">Delta</button>
+                </div>
+                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                  <span class="sep" aria-hidden="true">·</span>
+                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                </div>
+                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
+              </div>
+            </div>
+            <div class="score">
+              <div class="progress-topline">
+                <div class="stat">
+                  <div class="stat-label">Tasks</div>
+                  <div class="headline" id="progress-headline">0/0</div>
+                </div>
+                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                  <div class="stat-label">Elapsed</div>
+                  <div class="elapsed" id="elapsed-time">--</div>
+                </div>
+                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                  <div class="stat-label">Pace</div>
+                  <div class="pace" id="avg-pace">--</div>
+                </div>
+                <div class="stat right">
+                  <div class="stat-label">Done</div>
+                  <div class="percent" id="progress-percent">0%</div>
+                </div>
+              </div>
+              <div class="warnings" id="warnings" hidden></div>
+              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
+              <div class="chart-wrap">
+                <div class="chart hybrid-chart" id="progress-chart" role="img" aria-label="Frame timing over time"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"><path d="M0.00,7.03" fill="none" stroke="#61d394" stroke-width="1.5" opacity=".8" vector-effect="non-scaling-stroke"/></svg></div></div>
+                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
+              </div>
+            </div>
+          </div>
+          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
+            <div class="work-panel-head">
+              <div class="work-panel-title">History log</div>
+              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="target">Target</button>
+                <span class="sep" aria-hidden="true">|</span>
+                <button type="button" data-work-panel-tab="log">Log</button>
+              </div>
+              <div class="work-panel-tools">
+                <div class="work-tab-tools timeline-tab-tools">
+                  <div class="timeline-step" aria-label="Active item navigation">
+                    <button type="button" data-timeline-step="-1">Prev</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-step="1">Next</button>
+                  </div>
+                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                    <button type="button" data-timeline-mode="all">All</button>
+                    <span class="sep" aria-hidden="true">|</span>
+                    <button type="button" data-timeline-mode="active">Active</button>
+                  </div>
+                </div>
+                <div class="work-tab-tools target-tab-tools">
+                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
+                    <input type="checkbox" id="target-summaries-toggle" />
+                    <span>Summaries</span>
+                  </label>
+                </div>
+                <div class="work-tab-tools log-tab-tools">
+                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
+                    <input type="checkbox" id="log-file-changes-toggle" />
+                    <span>File changes</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="work-panel-body">
+              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
+                <div class="timeline" id="timeline"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
+                <div class="target-panel" id="active-context-target"></div>
+              </div>
+              <div class="work-tab-pane" data-work-tab-pane="log">
+                <div class="checklist-log" id="checklist-log"><div class="checklist-log-list"><div class="checklist-log-table-header"><span>Age</span><span>Frame</span><span>Result</span><span>Delta</span><span>Done</span></div><article class="log-row unchanged no-detail log-table-row"><span class="log-table-cell age">now</span><span class="log-table-cell failed unchanged">0</span><span class="log-table-cell result unchanged">—</span><span class="log-table-cell delta unchanged">—</span><span class="log-table-cell done">0%</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article><article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article></div></div>
+              </div>
+            </div>
+          </section>
+        </section>
+      </div>
+      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+        <div class="detail-repo-graph-head">
+          <h2>Repo Graph</h2>
+          <div class="detail-repo-graph-controls">
+            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
+          </div>
+          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+            <option value="1">1x</option>
+            <option value="1.25">1.25x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+          </select>
+          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
+            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
+            Labels
+          </label>
+          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
+        </div>
+        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
+      </aside>
+      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
+        <div class="focused-functions-head">
+          <h2>Changes</h2>
+          <div class="focused-functions-actions">
+            <select class="changes-show" id="changes-show" aria-label="Changes shown">
+              <option value="all">All</option>
+              <option value="10">Last 10</option>
+              <option value="30">Last 30</option>
+            </select>
+            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+            <div class="focused-functions-meta" id="focused-functions-meta"></div>
+          </div>
+        </div>
+        <div class="focused-functions-list" id="focused-functions-list"></div>
+      </section>
+    </div>
+  </main>
+  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+    <code id="detail-plan-label"></code>
+    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+  </footer>
+  <main id="driving-parity-page" class="driving-parity-page">
+    <div class="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(6)</span></h2>
+      <div id="driving-parity-controls" class="driving-parity-controls">
+	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
+	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="true">Value</button>
+	          <span class="sep" aria-hidden="true">·</span>
+	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="false">Delta</button>
+	        </div>
+	        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
+	          <button type="button" data-driving-parity-sort="improved" aria-pressed="false" disabled title="Changed is unavailable until comparable transition telemetry is published.">Changed</button>
+        </div>
+        <span class="control-sep" aria-hidden="true">|</span>
+	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
+	          <button type="button" data-driving-parity-filter="failing" aria-pressed="false">Failed</button>
+	        </div>
+      </div>
+    </div>
+    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
+<style>
+    :root {
+      color-scheme: dark;
+      --bg: #000000;
+      --panel: #111111;
+      --card: #111111;
+      --line: #262626;
+      --muted: #a8a8a8;
+      --text: var(--muted);
+      --blue: #60a5fa;
+      --yellow: #f6c95f;
+      --red: #ef4444;
+      --red-muted: rgba(239, 68, 68, 0.78);
+      --green: #61d394;
+      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: transparent;
+      color: var(--text);
+      font: 14px/1.45 var(--dashboard-font);
+    }
+    h1 {
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.2;
+      letter-spacing: 0;
+    }
+    h1,
+    strong {
+      font-weight: 400;
+    }
+    .sub {
+      color: var(--text);
+      margin-top: 0;
+      white-space: normal;
+    }
+    .sub .run-status {
+      color: var(--red-muted);
+    }
+    .sub .run-status.pass {
+      color: var(--text);
+    }
+    .sub .run-frames {
+      color: var(--text);
+    }
+    .sub .metric-red {
+      color: var(--red-muted);
+    }
+    .sub .metric-yellow {
+      color: var(--text);
+    }
+    .sub .metric-blue {
+      color: var(--text);
+    }
+    main {
+      padding: 0;
+    }
+    .legend {
+      display: none;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 8px;
+      color: var(--muted);
+      align-items: center;
+    }
+    .filters {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: end;
+      align-items: center;
+      gap: 4px;
+      margin-left: auto;
+    }
+    .filter-control {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--muted);
+    }
+    .accordion-actions {
+      display: flex;
+      gap: 6px;
+    }
+    .accordion-actions button {
+      color: var(--muted);
+    }
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--muted);
+    }
+    .pagination[hidden] {
+      display: none;
+    }
+    .pagination-status {
+      min-width: 78px;
+      text-align: center;
+      white-space: nowrap;
+    }
+    button {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+    button:disabled {
+      opacity: 0.45;
+      cursor: default;
+    }
+    button:not(:disabled):hover,
+    select:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    select,
+    input[type="search"] {
+      color: var(--text);
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      padding: 4px 22px 4px 7px;
+      font: inherit;
+      line-height: 1.2;
+    }
+    select {
+      color-scheme: dark;
+      cursor: pointer;
+    }
+    select option {
+      background: #111111;
+      color: #e8e8e8;
+    }
+    input[type="search"] {
+      width: 150px;
+      padding-right: 7px;
+    }
+    #view-mode { width: 112px; }
+    #sort-mode { width: 116px; }
+    #field-filter { width: 158px; }
+    #group-filter { width: 142px; }
+    #page-size { width: 68px; }
+    select:focus,
+    input[type="search"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    button[aria-pressed="true"] {
+      border-color: var(--blue);
+      background: #1c1c1c;
+    }
+    .rows {
+      display: grid;
+      gap: 0;
+      background: transparent;
+    }
+    .rows-view {
+      display: grid;
+      gap: 0;
+    }
+    .rows-view[hidden] {
+      display: none;
+    }
+    .row-group {
+      display: grid;
+      gap: 0;
+    }
+    .group-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 6px;
+      align-items: stretch;
+    }
+    .group-toggle {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 7px 10px;
+      text-align: left;
+      background: #171717;
+      border-color: var(--line);
+    }
+    .group-toggle:hover,
+    .group-toggle:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-action {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-action:hover,
+    .group-action:focus {
+      outline: none;
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .group-caret {
+      width: 14px;
+      color: var(--muted);
+    }
+    .group-caret::before {
+      content: "v";
+    }
+    .row-group.collapsed .group-caret::before {
+      content: ">";
+    }
+    .group-toggle strong {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--text);
+      white-space: nowrap;
+    }
+    .group-toggle span:last-child {
+      color: var(--muted);
+      white-space: nowrap;
+    }
+    .group-body {
+      display: grid;
+      gap: 0;
+    }
+    .row-group.collapsed .group-body {
+      display: none;
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+	    .field-table {
+	      width: 100%;
+	      border-collapse: collapse;
+	      table-layout: fixed;
+	      min-width: 760px;
+	    }
+	    .table-col-status { width: 74px; }
+	    .table-col-fail { width: 78px; }
+	    .table-col-delta { width: 74px; }
+	    .table-col-chart { width: 340px; }
+	    .field-table th,
+	    .field-table td {
+	      padding: 6px 10px;
+	      border-bottom: 1px solid var(--line);
+	      text-align: left;
+	      vertical-align: middle;
+	    }
+	    .field-table tbody tr {
+	      height: 36px;
+	    }
+	    .field-table tbody td {
+	      padding-top: 0;
+	      padding-bottom: 0;
+	    }
+	    .field-table th {
+	      color: var(--muted);
+	      font-weight: 400;
+		      background: #171717;
+	      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+    .field-table tbody tr:last-child td {
+      border-bottom: 0;
+    }
+	    .field-table tbody tr:hover {
+	      background: rgba(96, 165, 250, 0.055);
+	    }
+	    .table-status {
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .field-table tr.pass .table-status,
+	    .table-good {
+	      color: var(--green);
+    }
+    .field-table tr.fail .table-status,
+    .table-bad {
+      color: var(--red);
+    }
+	.hybrid-list {
+	  display: grid;
+	  gap: 0;
+	  min-width: 760px;
+	}
+	.hybrid-row {
+	  display: grid;
+	  grid-template-columns: 20% 10% minmax(0, 70%);
+	  align-items: stretch;
+	  height: 90px;
+	  content-visibility: auto;
+	  contain-intrinsic-size: 90px;
+	  margin-bottom: 6px;
+	  background: var(--card);
+	  border-radius: 8px;
+	  overflow: hidden;
+	  cursor: pointer;
+	}
+	.hybrid-row.expanded {
+	  height: 220px;
+	  contain-intrinsic-size: 220px;
+	}
+	.hybrid-row:focus-visible {
+	  outline: 1px solid var(--blue);
+	  outline-offset: -1px;
+	}
+	.hybrid-row:hover .hybrid-cell {
+	  background: #1c1c1c;
+	}
+	.hybrid-row:last-child {
+	  margin-bottom: 0;
+	}
+	.hybrid-cell {
+	  min-width: 0;
+	  display: flex;
+	  align-items: center;
+	  padding: 10px 12px;
+	  color: var(--muted);
+	  line-height: 1.25;
+	}
+	.hybrid-count,
+	.hybrid-delta,
+	.hybrid-value-delta {
+	  white-space: nowrap;
+	  font-variant-numeric: tabular-nums;
+	}
+	.hybrid-metric {
+	  flex-direction: column;
+	  align-items: flex-end;
+	  justify-content: flex-start;
+	  gap: 0;
+	  padding-right: 17px;
+	  color: rgba(210,216,224,.62);
+	  text-align: right;
+	}
+	.hybrid-field {
+	  display: grid;
+	  grid-template-rows: minmax(0, 1fr) auto;
+	  align-items: flex-start;
+	  gap: 4px;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  min-width: 0;
+	  overflow: hidden;
+	}
+	.hybrid-field .table-field-label {
+	  display: block;
+	  width: 100%;
+	  line-height: 1.25;
+	  overflow-wrap: normal;
+	  text-overflow: clip;
+	  text-wrap: pretty;
+	  word-break: normal;
+	  white-space: normal;
+	}
+	.hybrid-field-segment,
+	.hybrid-field-tail {
+	  display: block;
+	  width: 100%;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  white-space: nowrap;
+	}
+	.hybrid-status {
+	  flex: 0 0 auto;
+	  font-size: 12px;
+	  line-height: 1.25;
+	}
+	.hybrid-row.pass .hybrid-status { color: var(--green); }
+	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
+	.hybrid-count {
+	  width: 100%;
+	  text-align: right;
+	}
+	.hybrid-delta {
+	  display: inline-flex;
+	  align-items: center;
+	  justify-content: flex-end;
+	  gap: 6px;
+	  width: 100%;
+	}
+	.hybrid-delta-symbol {
+	  flex: 0 0 auto;
+	  font-size: 13px;
+	  line-height: 1;
+	  transform: translateY(-1px);
+	}
+	.hybrid-value-delta {
+	  width: 100%;
+	  color: inherit;
+	  text-align: right;
+	}
+	.hybrid-delta.up { color: var(--green); }
+	.hybrid-delta.down { color: var(--red-muted); }
+	.hybrid-chart {
+	  min-width: 0;
+	  height: 100%;
+	  overflow: hidden;
+	}
+	.hybrid-chart > .plot,
+	.hybrid-chart > svg {
+	  width: 100%;
+	  height: 100%;
+	}
+	@media (max-width: 520px) {
+	  .hybrid-list {
+	    min-width: 0;
+	  }
+	  .hybrid-row {
+	    height: 180px;
+	    contain-intrinsic-size: 180px;
+	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
+	    grid-template-rows: 90px 90px;
+	  }
+	  .hybrid-row.expanded {
+	    height: 260px;
+	    contain-intrinsic-size: 260px;
+	    grid-template-rows: 90px 170px;
+	  }
+	  .hybrid-cell {
+	    padding: 8px 10px;
+	  }
+	  .hybrid-metric {
+	    padding-right: 15px;
+	  }
+	  .hybrid-chart {
+	    grid-column: 1 / -1;
+	    grid-row: 2;
+	  }
+	}
+	    .table-field {
+	      color: var(--muted);
+	      min-width: 0;
+	    }
+	    .table-field-inner {
+	      display: flex;
+	      align-items: baseline;
+	      gap: 8px;
+	      min-width: 0;
+	    }
+	    .table-group-tag {
+	      flex: 0 0 auto;
+	      max-width: 13ch;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-field-label {
+	      flex: 1 1 auto;
+	      min-width: 0;
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	      white-space: nowrap;
+	      color: var(--muted);
+	    }
+	    .table-muted {
+	      color: var(--muted);
+	      white-space: nowrap;
+	    }
+	    .table-count,
+	    .table-delta {
+	      color: var(--muted);
+	      text-align: right;
+	      white-space: nowrap;
+	      font-variant-numeric: tabular-nums;
+	    }
+	    .table-chart {
+	      padding: 0;
+	    }
+	    .table-spark {
+	      display: block;
+	      width: 100%;
+	      height: 36px;
+	      min-height: 36px;
+	      background: transparent;
+	    }
+	    .table-delta.up {
+	      color: var(--green);
+	    }
+	    .table-delta.down {
+	      color: var(--red);
+	    }
+    .coverage {
+      display: grid;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding: 9px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+    }
+    .coverage:empty {
+      display: none;
+    }
+    .coverage strong {
+      color: var(--text);
+    }
+    .coverage-groups {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+      gap: 6px;
+    }
+    .coverage-group {
+      appearance: none;
+      text-align: left;
+      padding: 7px 8px;
+      background: #171717;
+      border: 1px solid var(--line);
+      border-radius: 1px;
+      color: var(--muted);
+      cursor: pointer;
+    }
+    .coverage-group strong {
+      display: block;
+      margin-bottom: 3px;
+    }
+    .coverage-group span {
+      color: var(--muted);
+    }
+    .coverage-group[aria-pressed="true"] {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .coverage-group:hover {
+      border-color: #333333;
+      background: #1c1c1c;
+    }
+    .coverage-group[aria-pressed="true"]:hover {
+      border-color: var(--red);
+      background: #25131a;
+    }
+    .row {
+      --field-red: var(--red-muted);
+      --field-green: rgba(97, 211, 148, 0.75);
+      display: grid;
+      grid-template-columns: 196px minmax(260px, 1fr);
+      height: 98px;
+      content-visibility: auto;
+      contain-intrinsic-size: 98px;
+      border: 0;
+      background: #0f0f0f;
+      border-radius: 0;
+      overflow: hidden;
+      cursor: pointer;
+    }
+    .row + .row {
+      border-top: 0;
+    }
+    .row > .label {
+      border-top: 1px solid rgba(168, 168, 168, 0.12);
+    }
+    .row > .plot {
+      border-top: 1px solid rgba(232, 232, 232, 0.15);
+    }
+    .row.expanded {
+      height: 220px;
+      contain-intrinsic-size: 220px;
+      cursor: pointer;
+    }
+    .row[data-row-expand-key]:hover {
+      border-color: #333333;
+    }
+    .row[data-row-expand-key]:hover .label {
+      background: #1c1c1c;
+    }
+    .row:focus-visible {
+      outline: 1px solid var(--blue);
+      outline-offset: 2px;
+    }
+    .label {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      grid-template-rows: auto auto auto;
+      align-items: start;
+      align-content: start;
+      gap: 4px;
+      min-width: 0;
+      min-height: 0;
+      padding: 9px 10px 7px 0;
+      border-right: 0;
+      background: var(--card);
+      overflow: hidden;
+    }
+    .label strong {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      min-height: 0;
+      max-height: 1.25em;
+      font-size: 14px;
+      color: var(--text);
+      margin: 0;
+      line-height: 1.25;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .row.expanded .label strong {
+      display: block;
+    }
+    .label span {
+      display: block;
+      color: var(--muted);
+      line-height: 1.35;
+      white-space: nowrap;
+    }
+    .label strong + span {
+      margin-top: 1px;
+    }
+	    .label .improvement {
+	      margin-top: 0;
+	      color: var(--muted);
+	      overflow: hidden;
+	      text-overflow: ellipsis;
+	    }
+	    .label .improvement span {
+	      display: inline;
+	    }
+	    .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+	    .label .improvement .frame-delta.zero,
+	    .label .improvement .delta-sep,
+	    .label .improvement .value-delta {
+	      color: var(--muted);
+	    }
+	    .row.pass .label > span {
+	      color: var(--field-green);
+	    }
+	    .row.fail .label > span {
+	      color: var(--field-red);
+	    }
+	    .row.pass .label .improvement .frame-delta.up,
+	    .row.fail .label .improvement .frame-delta.up {
+	      color: var(--field-green);
+	    }
+	    .row.pass .label .improvement .frame-delta.down,
+	    .row.fail .label .improvement .frame-delta.down {
+	      color: var(--field-red);
+	    }
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      background: transparent;
+    }
+    .plot {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: 58px;
+      overflow: hidden;
+      background: #0f0f0f;
+    }
+    .row .plot > svg {
+      background: #0f0f0f;
+    }
+    .frame-tick-label {
+      position: absolute;
+      top: 5px;
+      color: rgba(168, 168, 168, 0.5);
+      font-size: 12px;
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      pointer-events: none;
+      transform: translateX(-50%);
+      user-select: none;
+      white-space: nowrap;
+    }
+    .row.pass .plot {
+      background: transparent;
+    }
+    .row.fail .plot {
+      background: transparent;
+    }
+    .plot-marker {
+      position: absolute;
+      border-radius: 1px;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+    .row:not(.expanded) .plot-marker {
+      display: none;
+    }
+    .plot-marker.browser {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--blue);
+    }
+    .plot-marker.native {
+      width: 5.2px;
+      height: 5.2px;
+      background: var(--green);
+    }
+    .plot-marker.match {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--green);
+    }
+    .plot-marker.fail {
+      width: 5.4px;
+      height: 5.4px;
+      background: var(--red);
+    }
+    .empty {
+      padding: 18px;
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 1px;
+      color: var(--muted);
+    }
+  </style>
+  <main>
+    <div class="legend">
+      <div class="filters">
+        <label class="filter-control">
+          <select id="sort-mode" aria-label="sort cards">
+            <option value="default">Default</option>
+            <option value="improved" selected>Changed</option>
+            <option value="target">Target</option>
+            <option value="failing">Failing</option>
+            <option value="frames">Frames</option>
+            <option value="group">Group</option>
+            <option value="name">Name</option>
+            <option value="type">Type</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="field-filter" aria-label="field filter">
+            <option value="all">All</option>
+            <option value="tested">Tested</option>
+            <option value="failing">Failing</option>
+            <option value="missing">Uncovered</option>
+            <option value="nulls">Nulls</option>
+            <option value="inactive">Inactive</option>
+            <option value="materialized">Materialized</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
+        </label>
+        <label class="filter-control">
+          <select id="group-filter" aria-label="signal group filter">
+            <option value="all">All groups</option>
+          </select>
+        </label>
+        <label class="filter-control">
+          <select id="page-size" aria-label="rows per page">
+            <option value="25" selected>25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+            <option value="200">200</option>
+          </select>
+        </label>
+        <div class="pagination" id="pagination" hidden>
+          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+          <span class="pagination-status" id="page-status">0-0 / 0</span>
+          <button type="button" id="page-next" aria-label="next page">Next</button>
+        </div>
+        <div class="accordion-actions">
+          <button type="button" id="collapse-groups">Collapse all</button>
+          <button type="button" id="expand-groups">Expand all</button>
+        </div>
+      </div>
+    </div>
+    <section class="coverage" id="coverage"></section>
+    <div class="rows" id="rows">
+      <div class="rows-view" id="hybrid-rows"><div class="hybrid-list"><section class="hybrid-row fail" data-row-expand-key="startup.ready" role="button" tabindex="0" aria-expanded="false" title="startup.ready"><span class="hybrid-cell hybrid-field" title="startupReadyMs measured against startupReadyMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">startup.</span><span class="hybrid-field-tail" style="opacity:1.00">ready</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.p95" role="button" tabindex="0" aria-expanded="false" title="frame.p95"><span class="hybrid-cell hybrid-field" title="p95FrameMs measured against p95FrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">p95</span></span><span class="hybrid-status">FAIL</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta">15</span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.p99" role="button" tabindex="0" aria-expanded="false" title="frame.p99"><span class="hybrid-cell hybrid-field" title="p99FrameMs measured against p99FrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">p99</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.max" role="button" tabindex="0" aria-expanded="false" title="frame.max"><span class="hybrid-cell hybrid-field" title="maxFrameMs measured against maxFrameMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">max</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="frame.over33" role="button" tabindex="0" aria-expanded="false" title="frame.over33"><span class="hybrid-cell hybrid-field" title="over33msRatio measured against over33msRatio"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">frame.</span><span class="hybrid-field-tail" style="opacity:1.00">over33</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section><section class="hybrid-row fail" data-row-expand-key="step.p95" role="button" tabindex="0" aria-expanded="false" title="step.p95"><span class="hybrid-cell hybrid-field" title="p95StepCallMs measured against p95StepCallMs"><span class="table-field-label"><span class="hybrid-field-segment" style="opacity:0.45">step.</span><span class="hybrid-field-tail" style="opacity:1.00">p95</span></span><span class="hybrid-status">BLOCKED</span></span><span class="hybrid-cell hybrid-metric"><span class="hybrid-count">1</span><span class="hybrid-delta "><span class="hybrid-delta-symbol"></span><span class="hybrid-delta-value"></span></span><span class="hybrid-value-delta"></span></span><div class="hybrid-chart"><div class="plot"><svg viewBox="0 0 900 58" preserveAspectRatio="none"></svg></div></div></section></div></div>
+    </div>
+  </main>
+    </section>
+    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden><select id="driving-parity-page-size" aria-label="Differential Testing rows per page"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option></select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page" disabled>Prev</button><span class="page-status" id="driving-parity-page-status">1-6 / 6</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page" disabled>Next</button></div>
+  </main>
\ No newline at end of file
diff --git a/dashboard/src/oven/dom-normalize/dom-normalize.test.ts b/dashboard/src/oven/dom-normalize/dom-normalize.test.ts
new file mode 100644
index 0000000..2675fe0
--- /dev/null
+++ b/dashboard/src/oven/dom-normalize/dom-normalize.test.ts
@@ -0,0 +1,63 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "node:test";
+import {
+  assertDomEquivalent,
+  domEquivalent,
+  extractById,
+  extractFirstByClass,
+} from "../test-support/dom-normalize";
+
+test("ignores indentation and collapses text whitespace", () => {
+  assertDomEquivalent("<div>\n  <span>a\n   b</span>\n</div>", "<div><span>a b</span></div>");
+});
+
+test("ignores attribute order and normalizes empty-element syntax", () => {
+  assertDomEquivalent(
+    '<svg class="a" viewBox="0 0 58 58" aria-hidden="true"/>',
+    '<svg aria-hidden="true" class="a" viewBox="0 0 58 58"></svg>',
+  );
+});
+
+test("detects changed attributes, structure, and text", () => {
+  assert.equal(domEquivalent('<div class="a"></div>', '<div class="b"></div>').equal, false);
+  assert.equal(domEquivalent("<div><span>x</span></div>", "<div></div>").equal, false);
+  assert.equal(domEquivalent("<div>a</div>", "<div>b</div>").equal, false);
+});
+
+test("decodes equivalent entities in text and attributes", () => {
+  assertDomEquivalent('<div title="&#39;">&#39;</div>', '<div title="&#x27;">&#x27;</div>');
+  assertDomEquivalent('<div title="&#39;">&#39;</div>', "<div title=\"'\">'</div>");
+  assertDomEquivalent(
+    '<div title="&amp; &lt; &gt; &quot;">&amp; &lt; &gt; &quot;</div>',
+    '<div title="&#38; &#60; &#62; &#34;">&#38; &#60; &#62; &#34;</div>',
+  );
+});
+
+test("does not make genuinely different characters equivalent", () => {
+  assert.equal(domEquivalent("<div>a</div>", "<div>b</div>").equal, false);
+  assert.equal(domEquivalent('<div title="&#39;">&#39;</div>', '<div title="&quot;">&quot;</div>').equal, false);
+});
+
+test("drops comments", () => {
+  assertDomEquivalent("<div><!-- x -->a</div>", "<div>a</div>");
+});
+
+test("treats void and self-closing elements equivalently", () => {
+  assertDomEquivalent('<img src="x">', '<img src="x"/>');
+  assertDomEquivalent('<circle cx="1"/>', '<circle cx="1"></circle>');
+});
+
+test("extracts an element by id and class token", () => {
+  const html = '<main><div class="outer"><div id="k"><span>x</span></div></div></main>';
+  assertDomEquivalent(extractById(html, "k"), '<div id="k"><span>x</span></div>');
+  assertDomEquivalent(extractFirstByClass(html, "outer"), '<div class="outer"><div id="k"><span>x</span></div></div>');
+});
+
+test("extracts a region from the renderer golden", () => {
+  const golden = readFileSync("dashboard/src/oven/differential-testing-render/goldens/dt-main.html", "utf8");
+  const slice = extractById(golden, "driving-parity-kpi-strip");
+  assert.ok(slice.length > 0);
+  assert.match(slice, /driving-parity-kpi-item/u);
+  assert.equal(domEquivalent(golden, golden).equal, true);
+});
diff --git a/dashboard/src/oven/index.ts b/dashboard/src/oven/index.ts
new file mode 100644
index 0000000..1b8c76d
--- /dev/null
+++ b/dashboard/src/oven/index.ts
@@ -0,0 +1,42 @@
+export { ProgressDonut } from "./ProgressDonut";
+export { BurnDonut } from "./BurnDonut";
+export { DifferentialKpiItem } from "./DifferentialKpiItem";
+export { DifferentialKpiStrip } from "./DifferentialKpiStrip";
+export { WaffleMetric } from "./WaffleMetric";
+export { SectionHeader } from "./SectionHeader";
+export { LogTable } from "./LogTable";
+export { buildDifferentialLogRows, DifferentialLogTable } from "./DifferentialLogTable";
+export type { DifferentialLogEntry, DifferentialLogRows, DifferentialLogTableProps } from "./DifferentialLogTable";
+export { KpiItem } from "./KpiItem";
+export { KpiStrip } from "./KpiStrip";
+export { FeedList } from "./FeedList";
+export { DiffCard } from "./DiffCard";
+export { DiffCardList } from "./DiffCardList";
+export { FileDiff } from "./FileDiff";
+export { StreamingDiffHeading } from "./StreamingDiffHeading";
+export { useOvenLiveData } from "./utils/useOvenLiveData";
+export { VerdictHeader } from "./VerdictHeader";
+export { DomainTabs } from "./DomainTabs";
+export { MetricTiles } from "./MetricTiles";
+export { DomainNote } from "./DomainNote";
+export { ImageTriptych } from "./ImageTriptych";
+export { FrameCard } from "./FrameCard";
+export { OvenView } from "./OvenView";
+export type { Binding, CellDef, JsonPrimitive, JsonValue, OvenViewDef, OvenViewProps, SectionDef, SlotDef } from "./OvenView";
+export { buildChecklistProgressChart } from "./utils/checklist-progress-chart";
+export { ToggleGroup } from "./ToggleGroup";
+export type { ToggleGroupProps } from "./ToggleGroup";
+export { FieldToolbar } from "./FieldToolbar";
+export type { ChartMode, FieldToolbarProps } from "./FieldToolbar";
+export { FieldMiniChart, buildFieldMiniChart } from "./FieldMiniChart";
+export type { FieldMiniChartProps, FieldMiniChartField, FieldMiniChartGeometry } from "./FieldMiniChart";
+export { HybridField } from "./HybridField";
+export type { HybridFieldData, HybridFieldProps } from "./HybridField";
+export { HybridMetric } from "./HybridMetric";
+export type { HybridMetricProps, HybridTelemetry } from "./HybridMetric";
+export { HybridFieldList } from "./HybridFieldList";
+export type { HybridFieldListProps, TelemetryAvailability, TelemetryByField } from "./HybridFieldList";
+export { PaginationBar } from "./PaginationBar";
+export type { PaginationBarProps } from "./PaginationBar";
+export { RefreshStatusChip, differentialRefreshStatusLabel } from "./RefreshStatusChip";
+export type { RefreshStatus, RefreshStatusChipProps } from "./RefreshStatusChip";
diff --git a/dashboard/src/oven/runtime/OvenNode.test.ts b/dashboard/src/oven/runtime/OvenNode.test.ts
new file mode 100644
index 0000000..358607d
--- /dev/null
+++ b/dashboard/src/oven/runtime/OvenNode.test.ts
@@ -0,0 +1,38 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { OvenNode } from "./OvenNode";
+import { ModeToggleAdapter } from "./control-adapters";
+import { initOvenState, ovenReducer, type OvenAction, type OvenIr } from "./oven-reducer";
+
+const base: OvenIr = { contract: "test", controls: [{ id: "mode", kind: "mode-toggle", initial: "one" }, { id: "query", kind: "search", matchFields: "/name" }], collections: [{ id: "items", kind: "collection", source: "/items", searchFrom: "query", pageSize: 1 }], root: [] };
+const item = (source: string) => ({ kind: "kpi-item", attributes: { heading: "item", source }, bindings: {}, children: [] });
+function render(node: any, state = initOvenState(base, { items: [{ name: "first" }, { name: "second" }] })) { return renderToStaticMarkup(createElement(OvenNode, { node, ir: base, state, dispatch: () => {} })); }
+
+test("OvenNode switch renders only its selected case", () => {
+  const node: any = { kind: "switch", attributes: { modeFrom: "mode" }, children: [{ kind: "case", attributes: { value: "one" }, children: [item("/items/0/name")] }, { kind: "case", attributes: { value: "two" }, children: [item("/items/1/name")] }] };
+  let state = initOvenState(base, { items: [{ name: "first" }, { name: "second" }] });
+  assert.match(render(node, state), /first/); assert.doesNotMatch(render(node, state), /second/);
+  state = ovenReducer(state, { type: "modeSelected", id: "mode", value: "two" }, base);
+  assert.match(render(node, state), /second/); assert.doesNotMatch(render(node, state), /first/);
+});
+
+test("OvenNode collection each scopes @item and follows paging and search", () => {
+  const node: any = { kind: "collection", attributes: { id: "items" }, children: [{ kind: "each", attributes: {}, children: [item("@item/name")] }] };
+  let state = initOvenState(base, { items: [{ name: "first" }, { name: "second" }] });
+  assert.match(render(node, state), /first/);
+  state = ovenReducer(state, { type: "pageNext", collectionId: "items" }, base);
+  assert.match(render(node, state), /second/);
+  state = ovenReducer(state, { type: "queryChanged", id: "query", query: "second" }, base);
+  assert.match(render(node, state), /second/); assert.doesNotMatch(render(node, state), /first/);
+});
+
+test("OvenNode sends mode-toggle callbacks through the closed dispatch", () => {
+  const actions: OvenAction[] = [];
+  const node: any = { kind: "mode-toggle", attributes: { id: "mode", ariaLabel: "Mode" }, children: [{ kind: "option", attributes: { value: "one", label: "One" } }, { kind: "option", attributes: { value: "two", label: "Two" } }] };
+  const element: any = ModeToggleAdapter({ node, ir: base, state: initOvenState(base, {}), dispatch: (action) => actions.push(action) });
+  const children = element.props.children;
+  children[1].props.onClick();
+  assert.deepEqual(actions, [{ type: "modeSelected", id: "mode", value: "two" }]);
+});
diff --git a/dashboard/src/oven/runtime/OvenNode.tsx b/dashboard/src/oven/runtime/OvenNode.tsx
new file mode 100644
index 0000000..69091f3
--- /dev/null
+++ b/dashboard/src/oven/runtime/OvenNode.tsx
@@ -0,0 +1,66 @@
+import { createElement, Fragment } from "react";
+import { OvenView } from "../OvenView/OvenView";
+import type { JsonValue } from "../OvenView/types";
+import { resolvePointer } from "../utils/json-pointer";
+import { lowerOvenIr } from "./lower-oven-ir";
+import type { OvenAction, OvenIr, OvenState } from "./oven-reducer";
+import { selectCollection, selectMode } from "./oven-selectors";
+import { ControlAdapter } from "./control-adapters";
+import { ChecklistWidgetAdapter, WidgetAdapter } from "./widget-adapters";
+import { Box } from "../Box/Box";
+import { LogTable } from "../LogTable";
+import { formatRegistry } from "../OvenView/registries";
+import { buildLogTableProps } from "./log-table-adapter";
+
+export type OvenNodeDef = { kind: string; attributes?: Record<string, unknown>; bindings?: Record<string, unknown>; children?: OvenNodeDef[] };
+export type OvenNodeProps = { node: OvenNodeDef; ir: OvenIr; state: OvenState; dispatch: (action: OvenAction) => void; item?: unknown; path?: string };
+const staticKinds = new Set(["box", "grid", "panel", "stack", "kpi-strip", "kpi-item", "progress-donut", "burn-donut", "waffle-metric", "section-header", "progress-value", "differential-kpi-strip", "differential-log-table", "progress-chart", "frame-delta-chart", "differential-empty-state", "icon", "text", "bind"]);
+const documentStaticKinds = new Set([...staticKinds, "checklist-burn-panel", "checklist-ledger", "checklist-event-cards", "streaming-diff-heading", "diff-card", "feed-list", "file-diff"]);
+const attrs = (node: OvenNodeDef) => node.attributes ?? {};
+
+export function isStaticOvenNode(node: OvenNodeDef): boolean { return staticKinds.has(node.kind) && (node.children ?? []).every(isStaticOvenNode); }
+export function isStaticOvenDocument(node: OvenNodeDef): boolean { return documentStaticKinds.has(node.kind) && (node.children ?? []).every(isStaticOvenDocument); }
+function scopedNode(node: OvenNodeDef): OvenNodeDef {
+  const pointer = (source: unknown) => typeof source !== "string" ? source : source === "@item" ? "/__ovenItem" : source.startsWith("@item/") ? `/__ovenItem${source.slice(5)}` : source.startsWith("/") || source === "" ? `/__ovenRoot${source || "/"}` : source;
+  return { ...node, attributes: Object.fromEntries(Object.entries(attrs(node)).map(([key, value]) => [key, key === "source" ? pointer(value) : value])), bindings: Object.fromEntries(Object.entries(node.bindings ?? {}).map(([key, value]) => [key, value && typeof value === "object" ? { ...(value as object), source: pointer((value as { source?: unknown }).source) } : value])), children: (node.children ?? []).map(scopedNode) };
+}
+function staticView(node: OvenNodeDef, ir: OvenIr, root: unknown, item?: unknown) {
+  const lowered = lowerOvenIr({ id: "runtime", theme: ir.theme, root: [item === undefined ? node : scopedNode(node)] });
+  const payload = item === undefined ? root : { __ovenRoot: root, __ovenItem: item };
+  return <OvenView def={lowered} payload={payload as JsonValue} />;
+}
+function layoutStyle(node: OvenNodeDef): Record<string, string> {
+  const a = attrs(node);
+  if (node.kind === "stack") return { display: "flex", flexDirection: a.direction === "row" ? "row" : "column" };
+  if (node.kind === "grid") return { display: "grid", ...(typeof a.columns === "number" ? { gridTemplateColumns: `repeat(${a.columns}, minmax(0, 1fr))` } : {}) };
+  if (node.kind === "panel") return { ...(typeof a.column === "number" ? { gridColumn: `${a.column}${typeof a.columnSpan === "number" ? ` / span ${a.columnSpan}` : ""}` } : {}), ...(typeof a.row === "number" ? { gridRow: `${a.row}${typeof a.rowSpan === "number" ? ` / span ${a.rowSpan}` : ""}` } : {}) };
+  return {};
+}
+
+/** Trusted dispatcher: static IR is lowered, while the closed interactive vocabulary uses adapters. */
+export function OvenNode({ node, ir, state, dispatch, item, path = "root" }: OvenNodeProps) {
+  if (isStaticOvenNode(node)) return <Fragment key={path}>{staticView(node, ir, state.payload, item)}</Fragment>;
+  if (node.kind === "switch") {
+    const source = attrs(node).source;
+    const selected = typeof source === "string"
+      ? resolvePointer(state.payload, source)
+      : selectMode(state, String(attrs(node).modeFrom ?? ""));
+    const branch = (node.children ?? []).find((child) => child.kind === "case" && attrs(child).value === selected) ?? (node.children ?? []).find((child) => child.kind === "case" && attrs(child).default === true);
+    return <>{(branch?.children ?? []).map((child, index) => <OvenNode key={`${path}-${index}`} node={child} ir={ir} state={state} dispatch={dispatch} item={item} path={`${path}-${index}`} />)}</>;
+  }
+  if (node.kind === "collection") {
+    const selection = selectCollection(state, ir, String(attrs(node).id ?? ""), resolvePointer);
+    return <>{(node.children ?? []).flatMap((child, index) => {
+      if (child.kind === "each") return selection.pageItems.map((pageItem, itemIndex) => <OvenNode key={`${path}-${index}-${itemIndex}`} node={child} ir={ir} state={state} dispatch={dispatch} item={pageItem} path={`${path}-${index}-${itemIndex}`} />);
+      return <OvenNode key={`${path}-${index}`} node={child} ir={ir} state={state} dispatch={dispatch} item={item} path={`${path}-${index}`} />;
+    })}</>;
+  }
+  if (node.kind === "each") return <>{(node.children ?? []).map((child, index) => <OvenNode key={`${path}-${index}`} node={child} ir={ir} state={state} dispatch={dispatch} item={item} path={`${path}-${index}`} />)}</>;
+  if (node.kind === "log-table") return <LogTable {...buildLogTableProps(node, state.payload, { resolvePointer, formatRegistry })} />;
+  if (["checklist-burn-panel", "checklist-ledger", "checklist-event-cards"].includes(node.kind)) return <ChecklistWidgetAdapter node={node} payload={state.payload} />;
+  if (["mode-toggle", "domain-tabs", "field-toolbar", "pagination"].includes(node.kind)) return <ControlAdapter node={node} ir={ir} state={state} dispatch={dispatch} />;
+  if (["field-list", "refresh-status", "verdict-header", "metric-tiles", "domain-note", "frame-card"].includes(node.kind)) return <WidgetAdapter node={node} ir={ir} state={state} dispatch={dispatch} />;
+  if (node.kind === "box") return <Box element={String(attrs(node).element) as "div" | "section" | "main" | "span"} className={typeof attrs(node).class === "string" ? attrs(node).class : undefined} dataDetailTab={typeof attrs(node).dataDetailTab === "string" ? attrs(node).dataDetailTab : undefined} id={typeof attrs(node).id === "string" ? attrs(node).id : undefined} text={typeof attrs(node).text === "string" ? attrs(node).text : undefined}>{(node.children ?? []).map((child, index) => <OvenNode key={`${path}-${index}`} node={child} ir={ir} state={state} dispatch={dispatch} item={item} path={`${path}-${index}`} />)}</Box>;
+  if (["grid", "panel", "stack"]) return createElement(node.kind === "panel" ? "section" : "div", { className: `oven-${node.kind}`, style: layoutStyle(node) }, (node.children ?? []).map((child, index) => <OvenNode key={`${path}-${index}`} node={child} ir={ir} state={state} dispatch={dispatch} item={item} path={`${path}-${index}`} />));
+  return null;
+}
diff --git a/dashboard/src/oven/runtime/OvenRuntime.tsx b/dashboard/src/oven/runtime/OvenRuntime.tsx
new file mode 100644
index 0000000..5c2ac64
--- /dev/null
+++ b/dashboard/src/oven/runtime/OvenRuntime.tsx
@@ -0,0 +1,47 @@
+import { createContext, createElement, Fragment, useEffect, useMemo, useReducer, type ReactNode } from "react";
+import { OvenNode, isStaticOvenDocument } from "./OvenNode";
+import { OvenView } from "../OvenView/OvenView";
+import { lowerOvenIr } from "./lower-oven-ir";
+import { ovenPollSearch, useOvenLiveData, type OvenPayloadAdapter } from "./oven-live-data";
+import { initOvenState, ovenReducer, type OvenAction, type OvenControlSeed, type OvenIr, type OvenPageSeed, type OvenState } from "./oven-reducer";
+import { getOvenTheme } from "./theme-registry";
+import { DifferentialTestingThemeView } from "./differential-testing-theme-view";
+
+export const OvenRuntimeContext = createContext<{ state: OvenState; dispatch: (action: OvenAction) => void } | null>(null);
+type RootNode = NonNullable<OvenIr["root"]>[number];
+
+export function themedRegions(root: RootNode[], theme: ReturnType<typeof getOvenTheme>, renderNode: (node: RootNode, index: number) => ReactNode): ReactNode | undefined {
+  if (!theme) return undefined;
+  const expected = theme.regions.flatMap((region) => region.kinds);
+  if (root.length !== expected.length || root.some((node, index) => node.kind !== expected[index])) return undefined;
+  let cursor = 0;
+  return theme.regions.map((region, regionIndex) => {
+    const children = root.slice(cursor, cursor + region.kinds.length).map((node, index) => renderNode(node, cursor + index));
+    cursor += region.kinds.length;
+    return createElement(region.element === "fragment" ? Fragment : region.element, {
+      key: `theme-${regionIndex}`,
+      ...(region.className ? { className: region.className } : {}),
+      ...region.props,
+    }, children);
+  });
+}
+
+export function OvenRuntime({ ir, initialPayload, payload, controls, pages, initialAction, adapt }: { ir: OvenIr & { id?: string; refreshSeconds?: number }; initialPayload?: unknown; payload?: unknown; controls?: OvenControlSeed; pages?: OvenPageSeed; initialAction?: OvenAction; adapt?: OvenPayloadAdapter }) {
+  const inputPayload = payload === undefined ? initialPayload : payload;
+  const [state, dispatch] = useReducer((current: OvenState, action: OvenAction) => ovenReducer(current, action, ir), inputPayload, (nextPayload) => {
+    const initialState = initOvenState(ir, nextPayload, controls, pages);
+    return initialAction ? ovenReducer(initialState, initialAction, ir) : initialState;
+  });
+  const pollSearch = useMemo(() => ovenPollSearch({ ir, state, scenario: state.scenario }), [ir, state, state.scenario]);
+  useOvenLiveData(ir.id, ir.refreshSeconds, dispatch, pollSearch, adapt);
+  useEffect(() => {
+    if (payload !== undefined) dispatch({ type: "payloadAccepted", payload });
+  }, [payload]);
+  const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
+  const root = ir.root ?? [];
+  const theme = getOvenTheme(ir.theme);
+  const themedView = theme?.runtimeLayout === "differential-testing" ? <DifferentialTestingThemeView ir={ir} state={state} dispatch={dispatch} /> : null;
+  const staticView = !themedView && root.every(isStaticOvenDocument) ? <OvenView def={lowerOvenIr(ir)} payload={state.payload as any} /> : null;
+  const genericView = themedRegions(root, theme, (node, index) => <OvenNode key={index} node={node} ir={ir} state={state} dispatch={dispatch} />) ?? <>{root.map((node, index) => <OvenNode key={index} node={node} ir={ir} state={state} dispatch={dispatch} />)}</>;
+  return <OvenRuntimeContext.Provider value={value}>{themedView ?? staticView ?? genericView}</OvenRuntimeContext.Provider>;
+}
diff --git a/dashboard/src/oven/runtime/checklist-oven-golden.test.mjs b/dashboard/src/oven/runtime/checklist-oven-golden.test.mjs
new file mode 100644
index 0000000..6058996
--- /dev/null
+++ b/dashboard/src/oven/runtime/checklist-oven-golden.test.mjs
@@ -0,0 +1,47 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { checklistFixture } from "../../components/ChecklistDashboard/ChecklistDashboard.fixture.mjs";
+import { withDeterministicTime } from "../test-support/deterministic-time.mjs";
+
+const runtimePath = new URL("./OvenRuntime.tsx", import.meta.url).pathname;
+const adapterPath = new URL("../../lib/checklist-adapter.ts", import.meta.url).pathname;
+const normalizerPath = new URL("../test-support/dom-normalize.ts", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("..", import.meta.url).pathname;
+
+test("checklist oven equals the frozen DOM golden", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".checklist-oven-golden-test-"));
+  try {
+    const runtimeOutput = join(outputDir, "OvenRuntime.mjs");
+    const adapterOutput = join(outputDir, "checklist-adapter.mjs");
+    const normalizerOutput = join(outputDir, "dom-normalize.mjs");
+    await Promise.all([
+      build({ entryPoints: [runtimePath], bundle: true, format: "esm", outfile: runtimeOutput, platform: "node", alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [adapterPath], bundle: true, format: "esm", outfile: adapterOutput, platform: "node", target: "node18" }),
+      build({ entryPoints: [normalizerPath], bundle: true, format: "esm", outfile: normalizerOutput, platform: "node", target: "node18" }),
+    ]);
+    const [{ OvenRuntime }, { adaptChecklist }, { normalize, parseHtml, serializeCanonical }] = await Promise.all([
+      import(`${new URL(`file://${runtimeOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${adapterOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${normalizerOutput}`).href}?test=${Date.now()}`),
+    ]);
+    const source = await readFile("ovens/checklist/checklist.oven", "utf8");
+    const compiled = compileOven(source, { file: "ovens/checklist/checklist.oven" });
+    assert.equal(compiled.ok, true, compiled.ok ? "" : JSON.stringify(compiled.diagnostics));
+    if (!compiled.ok) return;
+
+    const markup = withDeterministicTime(() => renderToStaticMarkup(createElement(OvenRuntime, { ir: compiled.ir, payload: adaptChecklist(checklistFixture) })));
+    const actual = serializeCanonical(normalize(parseHtml(markup)));
+    const expected = (await readFile("dashboard/src/components/ChecklistDashboard/checklist-dom.golden.html", "utf8")).trimEnd();
+    assert.equal(actual, expected);
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/collection-pipeline.test.ts b/dashboard/src/oven/runtime/collection-pipeline.test.ts
new file mode 100644
index 0000000..1053e25
--- /dev/null
+++ b/dashboard/src/oven/runtime/collection-pipeline.test.ts
@@ -0,0 +1,40 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { attachTransitionTelemetry, runCollection } from "./collection-pipeline";
+import { resolvePointer } from "../utils/json-pointer";
+
+const contract = "burnlist-differential-testing-data@1";
+const rows = [
+  { id: "first", label: "Alpha", sourceOwner: "z", failedSampleCount: 0, missingSampleCount: 0, telemetry: { failToPassCount: 2, passToFailCount: 0 } },
+  { id: "second", label: "beta", sourceOwner: "match", failedSampleCount: 1, missingSampleCount: 0, telemetry: { failToPassCount: 1, passToFailCount: 1 } },
+  { id: "third", label: "alphabet", sourceOwner: "none", failedSampleCount: 0, missingSampleCount: 2, telemetry: { failToPassCount: 0, passToFailCount: 0 } },
+];
+
+test("collection pipeline searches before filters and stable changed sort", () => {
+  const result = runCollection(rows, { contract, query: "a", matchFields: "/label", filter: { key: "non-pass" }, sort: { key: "changed" } }, resolvePointer);
+  assert.deepEqual(result.map((item) => (item as { id: string }).id), ["second"]);
+});
+
+test("collection pipeline handles empty, missing, no-match, and multi-field search", () => {
+  assert.deepEqual(runCollection(rows, { contract, query: "  ", matchFields: "/label" }, resolvePointer), rows);
+  assert.equal(runCollection(rows, { contract, query: "x", matchFields: "/missing" }, resolvePointer).length, 0);
+  assert.equal(runCollection(rows, { contract, query: "nope", matchFields: "/label /sourceOwner" }, resolvePointer).length, 0);
+  assert.deepEqual(runCollection(rows, { contract, query: "match", matchFields: "/label /sourceOwner" }, resolvePointer).map((item) => (item as { id: string }).id), ["second"]);
+});
+
+test("changed sort excludes unchanged rows and uses source index after equal DT scores", () => {
+  const tied = [...rows, { id: "fourth", label: "delta", failedSampleCount: 0, missingSampleCount: 0, telemetry: { failToPassCount: 1, passToFailCount: 1 } }];
+  const result = runCollection(tied, { contract, sort: { key: "changed" } }, resolvePointer);
+  assert.deepEqual(result.map((item) => (item as { id: string }).id), ["first", "second", "fourth"]);
+});
+
+test("sidecar telemetry is attached by id before a collection sort", () => {
+  const result = attachTransitionTelemetry(rows, [
+    { id: "first", failToPassCount: 0, passToFailCount: 0 },
+    { id: "second", failToPassCount: 3, passToFailCount: 0 },
+  ]);
+  assert.deepEqual(
+    runCollection(result, { contract, sort: { key: "changed" } }, resolvePointer).map((item) => (item as { id: string }).id),
+    ["second"],
+  );
+});
diff --git a/dashboard/src/oven/runtime/collection-pipeline.ts b/dashboard/src/oven/runtime/collection-pipeline.ts
new file mode 100644
index 0000000..c8de91e
--- /dev/null
+++ b/dashboard/src/oven/runtime/collection-pipeline.ts
@@ -0,0 +1,65 @@
+import { getComparator, getPredicate, type Comparator, type Predicate } from "./predicate-sort-registry";
+
+type Pointer = (payload: unknown, pointer: string) => unknown;
+type ActiveControl = boolean | string | { key?: string; active?: boolean } | undefined;
+export type CollectionPipelineOptions = {
+  query?: string;
+  matchFields?: string | string[];
+  filter?: ActiveControl;
+  sort?: ActiveControl;
+  contract: string;
+};
+
+function activeKey(value: ActiveControl): string | undefined {
+  if (typeof value === "string") return value;
+  if (value && typeof value === "object" && value.active !== false && typeof value.key === "string") return value.key;
+  return undefined;
+}
+
+function fields(value: string | string[] | undefined): string[] {
+  return Array.isArray(value) ? value : typeof value === "string" ? value.split(/\s+/u).filter(Boolean) : [];
+}
+
+function search(items: unknown[], query: string, matchFields: string[], resolvePointer: Pointer): unknown[] {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return items;
+  return items.filter((item) => matchFields.some((field) => String(resolvePointer(item, field) ?? "").toLowerCase().includes(needle)));
+}
+
+function predicate(contract: string, control: ActiveControl): Predicate | undefined {
+  const key = activeKey(control);
+  return key ? getPredicate(contract, key) : undefined;
+}
+
+function comparator(contract: string, control: ActiveControl): Comparator | undefined {
+  const key = activeKey(control);
+  return key ? getComparator(contract, key) : undefined;
+}
+
+export function attachTransitionTelemetry(items: unknown[], telemetry: unknown): unknown[] {
+  if (!Array.isArray(telemetry)) return items;
+  const byId = new Map(telemetry.flatMap((item) => item && typeof item === "object" && typeof (item as Record<string, unknown>).id === "string"
+    ? [[String((item as Record<string, unknown>).id), item] as const]
+    : []));
+  if (byId.size === 0) return items;
+  return items.map((item) => {
+    if (!item || typeof item !== "object") return item;
+    const value = item as Record<string, unknown>;
+    const detail = typeof value.id === "string" ? byId.get(value.id) : undefined;
+    return detail === undefined ? item : { ...value, transitionTelemetry: detail };
+  });
+}
+
+/** Runs source -> search -> registered filter -> stable registered sort. Paging is selector-owned. */
+export function runCollection(items: unknown[], options: CollectionPipelineOptions, resolvePointer: Pointer): unknown[] {
+  let result = search(items.slice(), options.query ?? "", fields(options.matchFields), resolvePointer);
+  const filter = predicate(options.contract, options.filter);
+  if (filter) result = result.filter((item) => !!item && typeof item === "object" && filter(item as Record<string, unknown>));
+  const sort = comparator(options.contract, options.sort);
+  if (!sort) return result;
+  if (sort.include) result = result.filter((item) => !!item && typeof item === "object" && sort.include!(item as Record<string, unknown>));
+  return result.map((item, index) => ({ item, index })).sort((left, right) => {
+    if (!left.item || typeof left.item !== "object" || !right.item || typeof right.item !== "object") return left.index - right.index;
+    return sort(left.item as Record<string, unknown>, right.item as Record<string, unknown>) || left.index - right.index;
+  }).map(({ item }) => item);
+}
diff --git a/dashboard/src/oven/runtime/control-adapters.tsx b/dashboard/src/oven/runtime/control-adapters.tsx
new file mode 100644
index 0000000..9ea21db
--- /dev/null
+++ b/dashboard/src/oven/runtime/control-adapters.tsx
@@ -0,0 +1,78 @@
+import { FieldToolbar } from "../FieldToolbar/FieldToolbar";
+import { DomainTabs } from "../DomainTabs";
+import { formatRegistry } from "../OvenView/registries";
+import { PaginationBar } from "../PaginationBar/PaginationBar";
+import { ToggleGroup } from "../ToggleGroup/ToggleGroup";
+import { resolvePointer } from "../utils/json-pointer";
+import type { OvenAction, OvenIr, OvenState } from "./oven-reducer";
+import { selectCollection, selectDomain, selectMode } from "./oven-selectors";
+
+type Node = { kind: string; attributes?: Record<string, unknown>; children?: Node[] };
+type Props = { node: Node; ir: OvenIr; state: OvenState; dispatch: (action: OvenAction) => void };
+const attrs = (node: Node) => node.attributes ?? {};
+const id = (node: Node) => String(attrs(node).id ?? "");
+const controls = (node: Node) => (node.children ?? []);
+
+function byKind(node: Node, kind: string): Node | undefined { return controls(node).find((child) => child.kind === kind); }
+function control(ir: OvenIr, controlId: string): Record<string, unknown> { return ir.controls.find((item) => item.id === controlId) ?? {}; }
+function available(node: Node, state: OvenState): boolean {
+  const source = attrs(node).requiresSource, expected = attrs(node).requiresValue;
+  return typeof source !== "string" || resolvePointer(state.payload, source) === expected;
+}
+function unavailableText(node: Node, state: OvenState): string {
+  const telemetry = formatRegistry["telemetry-availability"](resolvePointer(state.payload, "/telemetry"));
+  return telemetry && typeof telemetry === "object" && typeof (telemetry as { reason?: unknown }).reason === "string"
+    ? (telemetry as { reason: string }).reason
+    : String(attrs(node).unavailableText ?? "");
+}
+
+export function ModeToggleAdapter({ node, state, dispatch }: Props) {
+  const controlId = id(node), selected = selectMode(state, controlId);
+  return <ToggleGroup id={controlId} className="chart-toggle differential-tabs" ariaLabel={String(attrs(node).ariaLabel ?? controlId)}>
+    {controls(node).filter((child) => child.kind === "option").map((option) => {
+      const value = String(attrs(option).value), label = String(attrs(option).label ?? value);
+      return <button key={value} type="button" aria-pressed={selected === value} onClick={() => dispatch({ type: "modeSelected", id: controlId, value })}>{label}</button>;
+    })}
+  </ToggleGroup>;
+}
+
+export function DomainTabsAdapter({ node, state, dispatch }: Props) {
+  const controlId = id(node);
+  return <DomainTabs tabs={resolvePointer(state.payload, String(attrs(node).source ?? "/")) as any[]} activeId={selectDomain(state, controlId) ?? ""} onSelect={(selectedId) => dispatch({ type: "domainSelected", id: controlId, selectedId })} />;
+}
+
+export function FieldToolbarAdapter({ node, ir, state, dispatch }: Props) {
+  const search = byKind(node, "search"), mode = byKind(node, "mode-toggle"), sort = byKind(node, "sort-toggle"), filter = byKind(node, "filter-toggle");
+  const sortId = sort ? id(sort) : "", filterId = filter ? id(filter) : "";
+  const isAvailable = !sort || available(sort, state);
+  return <FieldToolbar
+    chart={(mode && selectMode(state, id(mode)) === "current") ? "current" : "delta"}
+    sort={state.controls[sortId] === true ? String(attrs(sort!).key ?? "changed") : ""}
+    filter={state.controls[filterId] === true ? "failing" : ""}
+    changedUnavailable={!isAvailable}
+    changedReason={sort ? unavailableText(sort, state) : ""}
+    onSearchInput={search ? (query) => dispatch({ type: "queryChanged", id: id(search), query }) : undefined}
+    onSelectChart={mode ? (value) => dispatch({ type: "modeSelected", id: id(mode), value }) : undefined}
+    onToggleSort={sort && isAvailable ? () => dispatch({ type: "toggleChanged", id: sortId, active: state.controls[sortId] !== true }) : undefined}
+    onToggleFilter={filter ? () => dispatch({ type: "toggleChanged", id: filterId, active: state.controls[filterId] !== true }) : undefined}
+  />;
+}
+
+export function PaginationAdapter({ node, ir, state, dispatch }: Props) {
+  const collectionId = String(attrs(node).collectionFrom ?? "");
+  const page = selectCollection(state, ir, collectionId, resolvePointer);
+  const start = page.totalCount === 0 ? 0 : page.pageIndex * page.pageSize + 1;
+  const end = page.totalCount === 0 ? 0 : Math.min(page.totalCount, start + page.pageItems.length - 1);
+  return <PaginationBar pageSize={page.pageSize} pageIndex={page.pageIndex} pageCount={page.pageCount} start={start} end={end} total={page.totalCount}
+    onPrev={() => dispatch({ type: "pagePrevious", collectionId })} onNext={() => dispatch({ type: "pageNext", collectionId })}
+    onPageSizeChange={(pageSize) => dispatch({ type: "pageSizeChanged", collectionId, pageSize })} />;
+}
+
+/** Generic direct control entry point, including controls not hosted by FieldToolbar. */
+export function ControlAdapter(props: Props) {
+  if (props.node.kind === "mode-toggle") return <ModeToggleAdapter {...props} />;
+  if (props.node.kind === "domain-tabs") return <DomainTabsAdapter {...props} />;
+  if (props.node.kind === "field-toolbar") return <FieldToolbarAdapter {...props} />;
+  if (props.node.kind === "pagination") return <PaginationAdapter {...props} />;
+  return null;
+}
diff --git a/dashboard/src/oven/runtime/differential-testing-detail.tsx b/dashboard/src/oven/runtime/differential-testing-detail.tsx
new file mode 100644
index 0000000..aa08534
--- /dev/null
+++ b/dashboard/src/oven/runtime/differential-testing-detail.tsx
@@ -0,0 +1,140 @@
+import type { ReactNode } from "react";
+
+type DetailProps = {
+  payload: Record<string, unknown>;
+  progressMode: string;
+  refresh: ReactNode;
+  kpis: ReactNode;
+  chart: ReactNode;
+  log: ReactNode;
+};
+
+function OverviewTime({ value }: { value: unknown }) {
+  const date = new Date(String(value ?? ""));
+  if (Number.isNaN(date.getTime())) return <time id="differential-overview-time">{String(value ?? "")}</time>;
+  const day = new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric" }).format(date);
+  const time = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit" }).format(date);
+  return <time id="differential-overview-time" className="label-toggle differential-tabs" {...{ datetime: String(value) }}>
+    <span>{day}</span><span className="sep" aria-hidden="true">·</span><span>{time}</span>
+  </time>;
+}
+
+export function DifferentialTestingDetail({ payload, progressMode, refresh, kpis, chart, log }: DetailProps) {
+  const chartTitle = String(payload.primaryChartTitle || "Parity Progress");
+  const historyTitle = String(payload.historyTitle || "Parity Progress");
+  return <>
+    <main id="burnlist-detail" className="detail-view">
+      <section className="differential-overview" id="differential-overview">
+        <div className="work-panel-head differential-overview-head">
+          <div className="differential-overview-meta">{refresh}<OverviewTime value={payload.publishedAt} /></div>
+        </div>
+        {kpis}
+      </section>
+      <div className="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
+        <div className="detail-report-column">
+          <section className="top" id="detail-top-stack">
+            <div className="panel progress-panel">
+              <div className="panel-title-row">
+                <div className="progress-title-group">
+                  <h2 id="progress-panel-title">{chartTitle}</h2>
+                  <span id="driving-parity-progress-summary" className="driving-parity-summary driving-parity-progress-summary" hidden />
+                </div>
+                <div className="chart-tools">
+                  <div className="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
+                    <button type="button" className="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
+                    <span className="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
+                    <button type="button" data-progress-chart-mode="failed" aria-pressed={progressMode === "failed"}>
+                      <span className="standard-failed-label">Failed</span><span className="driving-parity-progress-label">Value</span>
+                    </button>
+                    <span className="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
+                    <button type="button" className="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed={progressMode === "delta"}>Delta</button>
+                  </div>
+                  <div className="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
+                    <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
+                    <span className="sep" aria-hidden="true">·</span>
+                    <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
+                  </div>
+                  <button type="button" className="chart-reset" id="chart-reset" hidden>Reset</button>
+                </div>
+              </div>
+              <div className="score">
+                <div className="progress-topline">
+                  <div className="stat"><div className="stat-label">Tasks</div><div className="headline" id="progress-headline">0/0</div></div>
+                  <div className="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
+                    <div className="stat-label">Elapsed</div><div className="elapsed" id="elapsed-time">--</div>
+                  </div>
+                  <div className="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
+                    <div className="stat-label">Pace</div><div className="pace" id="avg-pace">--</div>
+                  </div>
+                  <div className="stat right"><div className="stat-label">Done</div><div className="percent" id="progress-percent">0%</div></div>
+                </div>
+                <div className="warnings" id="warnings" hidden />
+                <div className="bar" id="bar" aria-label="Burnlist completion segments" />
+                <div className="chart-wrap">{chart}<div className="completion-confetti" id="completion-confetti" aria-hidden="true" /></div>
+              </div>
+            </div>
+            <section className="panel work-panel" id="detail-work-panel" data-work-tab="log">
+              <div className="work-panel-head">
+                <div className="work-panel-title">{historyTitle}</div>
+                <div className="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
+                  <button type="button" data-work-panel-tab="timeline">Timeline</button>
+                  <span className="sep timeline-tab-sep" aria-hidden="true">|</span>
+                  <button type="button" data-work-panel-tab="target">Target</button>
+                  <span className="sep" aria-hidden="true">|</span>
+                  <button type="button" data-work-panel-tab="log">Log</button>
+                </div>
+                <div className="work-panel-tools">
+                  <div className="work-tab-tools timeline-tab-tools">
+                    <div className="timeline-step" aria-label="Active item navigation">
+                      <button type="button" data-timeline-step="-1">Prev</button><span className="sep" aria-hidden="true">|</span><button type="button" data-timeline-step="1">Next</button>
+                    </div>
+                    <div className="label-toggle timeline-controls" aria-label="Burnlist timeline view">
+                      <button type="button" data-timeline-mode="all">All</button><span className="sep" aria-hidden="true">|</span><button type="button" data-timeline-mode="active">Active</button>
+                    </div>
+                  </div>
+                  <div className="work-tab-tools target-tab-tools">
+                    <label className="log-file-toggle" title="Run delayed code-change summaries and show them in Target."><input type="checkbox" id="target-summaries-toggle" /><span>Summaries</span></label>
+                  </div>
+                  <div className="work-tab-tools log-tab-tools">
+                    <label className="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows."><input type="checkbox" id="log-file-changes-toggle" /><span>File changes</span></label>
+                  </div>
+                </div>
+              </div>
+              <div className="work-panel-body">
+                <div className="work-tab-pane" data-work-tab-pane="timeline" hidden><div className="timeline" id="timeline" /></div>
+                <div className="work-tab-pane" data-work-tab-pane="target" hidden><div className="target-panel" id="active-context-target" /></div>
+                <div className="work-tab-pane" data-work-tab-pane="log"><div className="checklist-log" id="checklist-log">{log}</div></div>
+              </div>
+            </section>
+          </section>
+        </div>
+        <aside className="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
+          <div className="detail-repo-graph-head">
+            <h2>Repo Graph</h2>
+            <div className="detail-repo-graph-controls"><select className="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus" /></div>
+            <select className="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
+              <option value="1">1x</option><option value="1.25">1.25x</option><option value="1.5">1.5x</option><option value="2">2x</option>
+            </select>
+            <label className="repo-map-label-toggle" title="Show file-name labels for file bubbles"><input type="checkbox" className="repo-map-label-checkbox" id="detail-repo-map-labels" /> Labels</label>
+            <div className="repo-map-meta" id="detail-repo-map-meta" />
+          </div>
+          <svg className="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src" />
+        </aside>
+        <section className="panel focused-functions-panel" id="focused-functions-panel" hidden>
+          <div className="focused-functions-head">
+            <h2>Changes</h2>
+            <div className="focused-functions-actions">
+              <select className="changes-show" id="changes-show" aria-label="Changes shown"><option value="all">All</option><option value="10">Last 10</option><option value="30">Last 30</option></select>
+              <button className="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
+              <div className="focused-functions-meta" id="focused-functions-meta" />
+            </div>
+          </div>
+          <div className="focused-functions-list" id="focused-functions-list" />
+        </section>
+      </div>
+    </main>
+    <footer className="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
+      <code id="detail-plan-label" /><span className="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
+    </footer>
+  </>;
+}
diff --git a/dashboard/src/oven/runtime/differential-testing-fields.tsx b/dashboard/src/oven/runtime/differential-testing-fields.tsx
new file mode 100644
index 0000000..0cd6768
--- /dev/null
+++ b/dashboard/src/oven/runtime/differential-testing-fields.tsx
@@ -0,0 +1,73 @@
+import type { ReactNode } from "react";
+import { count } from "../differential-testing-render/differential-testing-render.js";
+import { templateHtml } from "../differential-testing-render/differential-testing-template.js";
+
+type FieldsProps = {
+  total: unknown;
+  toolbar: ReactNode;
+  fields: ReactNode;
+  pagination: ReactNode;
+};
+
+const inlineStyles = [...templateHtml().matchAll(/<style>([\s\S]*?)<\/style>/gu)].map((match) => match[1]);
+
+export function DifferentialTestingFields({ total, toolbar, fields, pagination }: FieldsProps) {
+  return <main id="driving-parity-page" className="driving-parity-page">
+    <div className="driving-parity-toolbar meta-row plan-meta-row">
+      <h2 id="driving-parity-summary" className="driving-parity-summary">Fields List<span className="field-list-count">({count(total)})</span></h2>
+      {toolbar}
+    </div>
+    <section className="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
+      <style>{inlineStyles[0]}</style>
+      <style>{inlineStyles[1]}</style>
+      <main>
+        <div className="legend">
+          <div className="filters">
+            <label className="filter-control">
+              <select id="sort-mode" aria-label="sort cards" defaultValue="improved">
+                <option value="default">Default</option>
+                <option value="improved">Changed</option>
+                <option value="target">Target</option>
+                <option value="failing">Failing</option>
+                <option value="frames">Frames</option>
+                <option value="group">Group</option>
+                <option value="name">Name</option>
+                <option value="type">Type</option>
+              </select>
+            </label>
+            <label className="filter-control">
+              <select id="field-filter" aria-label="field filter">
+                <option value="all">All</option>
+                <option value="tested">Tested</option>
+                <option value="failing">Failing</option>
+                <option value="missing">Uncovered</option>
+                <option value="nulls">Nulls</option>
+                <option value="inactive">Inactive</option>
+                <option value="materialized">Materialized</option>
+              </select>
+            </label>
+            <label className="filter-control"><input type="search" id="field-search" aria-label="search fields" placeholder="Search fields" /></label>
+            <label className="filter-control"><select id="group-filter" aria-label="signal group filter"><option value="all">All groups</option></select></label>
+            <label className="filter-control">
+              <select id="page-size" aria-label="rows per page" defaultValue="25">
+                <option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="200">200</option>
+              </select>
+            </label>
+            <div className="pagination" id="pagination" hidden>
+              <button type="button" id="page-prev" aria-label="previous page">Prev</button>
+              <span className="pagination-status" id="page-status">0-0 / 0</span>
+              <button type="button" id="page-next" aria-label="next page">Next</button>
+            </div>
+            <div className="accordion-actions">
+              <button type="button" id="collapse-groups">Collapse all</button>
+              <button type="button" id="expand-groups">Expand all</button>
+            </div>
+          </div>
+        </div>
+        <section className="coverage" id="coverage" />
+        <div className="rows" id="rows"><div className="rows-view" id="hybrid-rows">{fields}</div></div>
+      </main>
+    </section>
+    {pagination}
+  </main>;
+}
diff --git a/dashboard/src/oven/runtime/differential-testing-formats.ts b/dashboard/src/oven/runtime/differential-testing-formats.ts
new file mode 100644
index 0000000..ef3aac3
--- /dev/null
+++ b/dashboard/src/oven/runtime/differential-testing-formats.ts
@@ -0,0 +1,74 @@
+import { count, percent } from "../differential-testing-render/differential-testing-render.js";
+import { differentialTelemetryAvailability } from "../differential-testing-render/differential-testing-renderer.js";
+
+type ResultRow = {
+  frame?: number | null;
+  frames?: number | null;
+  failedFieldCount?: number | null;
+  fieldCount?: number | null;
+  frameDelta?: number | null;
+};
+
+function last(value: unknown): ResultRow | undefined {
+  return Array.isArray(value) ? value.at(-1) as ResultRow | undefined : undefined;
+}
+
+function ratio(part: unknown, total: unknown): number {
+  const denominator = Math.max(0, Number(total) || 0);
+  return denominator ? Math.max(0, Number(part) || 0) / denominator * 100 : 0;
+}
+
+export function progressHeadline(value: unknown): string {
+  const row = last(value);
+  return `${count(row?.frame)}/${count(row?.frames)}`;
+}
+
+export function lastProgressPercent(value: unknown): number {
+  const row = last(value);
+  return ratio(row?.frame, row?.frames);
+}
+
+export function lastFailedCount(value: unknown): string {
+  return count(last(value)?.failedFieldCount);
+}
+
+export function lastFailedPercent(value: unknown): number {
+  const row = last(value);
+  return ratio(row?.failedFieldCount, row?.fieldCount);
+}
+
+export function lastFrameDelta(value: unknown): string {
+  const delta = last(value)?.frameDelta;
+  return delta === null || delta === undefined || !Number.isFinite(Number(delta)) ? "—" : count(Math.abs(Number(delta)));
+}
+
+export function lastDeltaPercent(value: unknown): number {
+  const row = last(value);
+  return ratio(Math.abs(Number(row?.frameDelta) || 0), row?.frames);
+}
+
+export function indexById(value: unknown): Record<string, unknown> {
+  if (!Array.isArray(value)) return Object.create(null);
+  return Object.assign(Object.create(null), Object.fromEntries(value.flatMap((entry) => {
+    if (!entry || typeof entry !== "object" || typeof (entry as { id?: unknown }).id !== "string") return [];
+    return [[(entry as { id: string }).id, entry]];
+  })));
+}
+
+export function telemetryAvailability(value: unknown) {
+  const payload = value && typeof value === "object" && "telemetry" in value
+    ? value
+    : { telemetry: value };
+  return differentialTelemetryAvailability(payload);
+}
+
+export const differentialFormatRegistry = Object.freeze({
+  "progress-headline": progressHeadline,
+  "last-progress-percent": lastProgressPercent,
+  "last-failed-count": lastFailedCount,
+  "last-failed-percent": lastFailedPercent,
+  "last-frame-delta": lastFrameDelta,
+  "last-delta-percent": lastDeltaPercent,
+  "index-by-id": indexById,
+  "telemetry-availability": telemetryAvailability,
+});
diff --git a/dashboard/src/oven/runtime/differential-testing-live-compact.test.mjs b/dashboard/src/oven/runtime/differential-testing-live-compact.test.mjs
new file mode 100644
index 0000000..0f3eb62
--- /dev/null
+++ b/dashboard/src/oven/runtime/differential-testing-live-compact.test.mjs
@@ -0,0 +1,97 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { differentialTestingPaginatedPayload } from "../differential-testing-render/golden-harness.mjs";
+import { withDeterministicTime } from "../test-support/deterministic-time.mjs";
+
+const runtimePath = new URL("./OvenRuntime.tsx", import.meta.url).pathname;
+const ovenComponentPath = new URL("../../components/DifferentialTestingOven/DifferentialTestingOven.tsx", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("..", import.meta.url).pathname;
+const generatedIrPlugin = {
+  name: "generated-oven-ir",
+  setup(esbuild) {
+    esbuild.onResolve({ filter: /\.ir\.json$/ }, (args) => ({ path: args.path, namespace: "generated-oven-ir" }));
+    esbuild.onLoad({ filter: /.*/, namespace: "generated-oven-ir" }, () => ({ contents: "export default {};", loader: "js" }));
+  },
+};
+
+test("DT live compact envelope preserves field rows and server paging", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".dt-live-compact-test-"));
+  try {
+    const runtimeOutput = join(outputDir, "OvenRuntime.mjs");
+    const ovenComponentOutput = join(outputDir, "DifferentialTestingOven.mjs");
+    await Promise.all([
+      build({ entryPoints: [runtimePath], bundle: true, format: "esm", outfile: runtimeOutput, platform: "node", alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [ovenComponentPath], bundle: true, format: "esm", outfile: ovenComponentOutput, platform: "node", alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", plugins: [generatedIrPlugin], target: "node18" }),
+    ]);
+    const cacheKey = `?test=${Date.now()}`;
+    const [{ OvenRuntime }, { dtAdapt }] = await Promise.all([
+      import(`${pathToFileURL(runtimeOutput).href}${cacheKey}`),
+      import(`${pathToFileURL(ovenComponentOutput).href}${cacheKey}`),
+    ]);
+
+    const fixture = differentialTestingPaginatedPayload();
+    const compactPayload = structuredClone(fixture);
+    delete compactPayload.fields;
+    if (compactPayload.telemetry?.fields) delete compactPayload.telemetry.fields;
+    compactPayload.summary.fields = {
+      label: compactPayload.summary.fields.label,
+      total: 0,
+      passed: 0,
+      failed: 0,
+      blocked: 0,
+    };
+    const firstTwentyFive = fixture.fields.slice(0, 25);
+    const fieldPage = {
+      search: "",
+      filter: "all",
+      sort: "changed",
+      page: 0,
+      pageSize: 25,
+      pageCount: 3,
+      total: 60,
+      fields: firstTwentyFive,
+      telemetryFields: fixture.telemetry?.fields ?? [],
+    };
+    const envelope = {
+      ovenId: "differential-testing",
+      path: "/api/oven-data/differential-testing",
+      scenarioId: "fixture",
+      transport: {
+        schema: "burnlist-differential-testing-page@1",
+        bundleSha256: "a".repeat(64),
+        scenarioSha256: "b".repeat(64),
+      },
+      fieldPage,
+      frameDeltaMetrics: {
+        frameDeviationRatios: [0, 0.5],
+        firstFailingFrame: 1,
+      },
+      payload: compactPayload,
+    };
+
+    const source = await readFile("ovens/differential-testing/differential-testing.oven", "utf8");
+    const compiled = compileOven(source, { file: "ovens/differential-testing/differential-testing.oven" });
+    assert.equal(compiled.ok, true, compiled.ok ? "" : JSON.stringify(compiled.diagnostics));
+    if (!compiled.ok) return;
+
+    const markup = withDeterministicTime(() => renderToStaticMarkup(createElement(OvenRuntime, {
+      ir: compiled.ir,
+      initialAction: { type: "payloadAccepted", payload: dtAdapt(envelope) },
+    })));
+    const fieldRows = markup.match(/<section class="hybrid-row\b/gu) ?? [];
+    assert.equal(fieldRows.length, 25, "live compact envelopes must render all 25 fields from fieldPage");
+    assert.doesNotMatch(markup, /No fields/u);
+    assert.match(markup, /1-25 \/ 60/u, "live compact envelopes must preserve the server page total");
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/differential-testing-live-controls.test.mjs b/dashboard/src/oven/runtime/differential-testing-live-controls.test.mjs
new file mode 100644
index 0000000..0211e6d
--- /dev/null
+++ b/dashboard/src/oven/runtime/differential-testing-live-controls.test.mjs
@@ -0,0 +1,241 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rename, rm, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { differentialTestingPaginatedPayload } from "../differential-testing-render/golden-harness.mjs";
+import { withDeterministicTime } from "../test-support/deterministic-time.mjs";
+
+const runtimePath = new URL("./OvenRuntime.tsx", import.meta.url).pathname;
+const reducerPath = new URL("./oven-reducer.ts", import.meta.url).pathname;
+const selectorsPath = new URL("./oven-selectors.ts", import.meta.url).pathname;
+const liveDataPath = new URL("./oven-live-data.ts", import.meta.url).pathname;
+const pointerPath = new URL("../utils/json-pointer.ts", import.meta.url).pathname;
+const ovenComponentPath = new URL("../../components/DifferentialTestingOven/DifferentialTestingOven.tsx", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("..", import.meta.url).pathname;
+const settle = () => new Promise((resolve) => setImmediate(resolve));
+const generatedIrPlugin = {
+  name: "generated-oven-ir",
+  setup(esbuild) {
+    esbuild.onResolve({ filter: /\.ir\.json$/ }, (args) => ({ path: args.path, namespace: "generated-oven-ir" }));
+    esbuild.onLoad({ filter: /.*/, namespace: "generated-oven-ir" }, () => ({ contents: "export default {};", loader: "js" }));
+  },
+};
+
+function markupFor(OvenRuntime, ir, dtAdapt, envelope) {
+  return withDeterministicTime(() => renderToStaticMarkup(createElement(OvenRuntime, {
+    ir,
+    initialAction: { type: "payloadAccepted", payload: dtAdapt(envelope) },
+  })));
+}
+
+function assertRenderedPage(markup, rows, status) {
+  assert.equal(markup.match(/<section class="hybrid-row\b/gu)?.length ?? 0, rows);
+  assert.match(markup, new RegExp(status.replace("/", "\\/"), "u"));
+}
+
+test("DT compact live controls derive server queries and replace field pages", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".dt-live-controls-test-"));
+  try {
+    const seamEntry = join(outputDir, "runtime-seam.ts");
+    const seamEntryTemp = `${seamEntry}.tmp`;
+    await writeFile(seamEntryTemp, [
+      `export { initOvenState, ovenReducer } from ${JSON.stringify(reducerPath)};`,
+      `export { selectCollection } from ${JSON.stringify(selectorsPath)};`,
+      `export { createOvenPoller } from ${JSON.stringify(liveDataPath)};`,
+      `export * from ${JSON.stringify(liveDataPath)};`,
+      `export { resolvePointer } from ${JSON.stringify(pointerPath)};`,
+    ].join("\n"));
+    await rename(seamEntryTemp, seamEntry);
+
+    const runtimeOutput = join(outputDir, "OvenRuntime.mjs");
+    const ovenComponentOutput = join(outputDir, "DifferentialTestingOven.mjs");
+    const seamOutput = join(outputDir, "runtime-seam.mjs");
+    const aliases = { "@": sourceDir, "@lib": libPath, "@oven": ovenPath };
+    await Promise.all([
+      build({ entryPoints: [runtimePath], bundle: true, format: "esm", outfile: runtimeOutput, platform: "node", alias: aliases, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [ovenComponentPath], bundle: true, format: "esm", outfile: ovenComponentOutput, platform: "node", alias: aliases, jsx: "automatic", packages: "external", plugins: [generatedIrPlugin], target: "node18" }),
+      build({ entryPoints: [seamEntry], bundle: true, format: "esm", outfile: seamOutput, platform: "node", alias: aliases, packages: "external", target: "node18" }),
+    ]);
+    const cacheKey = `?test=${Date.now()}`;
+    const [{ OvenRuntime }, { dtAdapt }, seam] = await Promise.all([
+      import(`${pathToFileURL(runtimeOutput).href}${cacheKey}`),
+      import(`${pathToFileURL(ovenComponentOutput).href}${cacheKey}`),
+      import(`${pathToFileURL(seamOutput).href}${cacheKey}`),
+    ]);
+    const { createOvenPoller, initOvenState, ovenPollSearch, ovenReducer, resolvePointer, selectCollection } = seam;
+
+    const source = await readFile("ovens/differential-testing/differential-testing.oven", "utf8");
+    const compiled = compileOven(source, { file: "ovens/differential-testing/differential-testing.oven" });
+    assert.equal(compiled.ok, true, compiled.ok ? "" : JSON.stringify(compiled.diagnostics));
+    if (!compiled.ok) return;
+    const ir = compiled.ir;
+
+    const fixture = differentialTestingPaginatedPayload();
+    const compactPayload = structuredClone(fixture);
+    delete compactPayload.fields;
+    if (compactPayload.telemetry?.fields) delete compactPayload.telemetry.fields;
+    compactPayload.summary.fields = {
+      label: compactPayload.summary.fields.label,
+      total: 0,
+      passed: 0,
+      failed: 0,
+      blocked: 0,
+    };
+    const telemetryById = new Map((fixture.telemetry?.fields ?? []).map((entry) => [entry.id, entry]));
+    const ordinalById = new Map(fixture.fields.map((field, index) => [field.id, index]));
+    const nonPass = (field) => Number(field.failedSampleCount ?? 0) + Number(field.missingSampleCount ?? 0) > 0;
+    const change = (field) => {
+      const telemetry = telemetryById.get(field.id);
+      return Number(telemetry?.failToPassCount ?? 0) + Number(telemetry?.passToFailCount ?? 0);
+    };
+    const improvement = (field) => {
+      const telemetry = telemetryById.get(field.id);
+      return Number(telemetry?.failToPassCount ?? 0) - Number(telemetry?.passToFailCount ?? 0);
+    };
+    const requests = [];
+    const serverQueries = [];
+
+    function server(query) {
+      serverQueries.push({ ...query });
+      const { search, filter, sort, page, pageSize } = query;
+      const needle = search.trim().toLowerCase();
+      let fields = fixture.fields.filter((field) => {
+        if (filter === "failing" && !nonPass(field)) return false;
+        return !needle || [field.label, field.sourceOwner, field.driftClass, field.semantics?.kind]
+          .some((value) => String(value ?? "").toLowerCase().includes(needle));
+      });
+      if (sort === "changed") {
+        fields = fields.slice().sort((left, right) => improvement(right) - improvement(left)
+          || change(right) - change(left)
+          || ordinalById.get(left.id) - ordinalById.get(right.id));
+      }
+      const total = fields.length;
+      const pageCount = Math.max(1, Math.ceil(total / pageSize));
+      const normalizedPage = Math.min(page, pageCount - 1);
+      const selected = fields.slice(normalizedPage * pageSize, normalizedPage * pageSize + pageSize);
+      return {
+        payload: compactPayload,
+        transport: {
+          schema: "burnlist-differential-testing-page@1",
+          bundleSha256: "a".repeat(64),
+          scenarioSha256: "b".repeat(64),
+        },
+        fieldPage: {
+          search,
+          filter,
+          sort,
+          page: normalizedPage,
+          pageSize,
+          pageCount,
+          total,
+          fields: selected,
+          telemetryFields: selected.map((field) => telemetryById.get(field.id)).filter(Boolean),
+        },
+        frameDeltaMetrics: { frameDeviationRatios: [0, 0.5], firstFailingFrame: 1 },
+      };
+    }
+
+    const initialEnvelope = server({ search: "", filter: "all", sort: "changed", page: 0, pageSize: 25 });
+    const initialPayload = dtAdapt(initialEnvelope);
+    let initialState = initOvenState(ir, undefined);
+    initialState = ovenReducer(initialState, { type: "payloadAccepted", payload: initialPayload }, ir);
+    const initialMarkup = markupFor(OvenRuntime, ir, dtAdapt, initialEnvelope);
+    assertRenderedPage(initialMarkup, 25, "1-25 / 60");
+    const initialPage = selectCollection(initialState, ir, "field-view", resolvePointer);
+    assert.equal(initialPage.pageItems[0].id, "active");
+
+    const initialSearch = ovenPollSearch({ ir, state: initialState, scenario: undefined });
+    const initialParams = new URLSearchParams(initialSearch);
+    assert.deepEqual(Object.fromEntries(initialParams), {
+      search: "",
+      filter: "all",
+      sort: "changed",
+      page: "0",
+      pageSize: "25",
+    });
+
+    async function drive(action, fromState = initialState, generationRef = { current: fromState.refresh.generation }) {
+      let state = ovenReducer(fromState, action, ir);
+      let responseEnvelope;
+      const search = ovenPollSearch({ ir, state, scenario: undefined });
+      const poller = createOvenPoller({
+        id: "differential-testing",
+        search,
+        adapt: dtAdapt,
+        generationRef,
+        dispatch(nextAction) { state = ovenReducer(state, nextAction, ir); },
+        async fetchImpl(input) {
+          requests.push(input);
+          const params = new URL(input, "http://localhost").searchParams;
+          responseEnvelope = server({
+            search: params.get("search") ?? "",
+            filter: params.get("filter") ?? "all",
+            sort: params.get("sort") ?? "default",
+            page: Number(params.get("page") ?? 0),
+            pageSize: Number(params.get("pageSize") ?? 25),
+          });
+          return { ok: true, status: 200, headers: { get: () => 'W/"x"' }, json: async () => responseEnvelope };
+        },
+      });
+      poller.refresh();
+      await settle();
+      poller.stop();
+      assert.ok(responseEnvelope);
+      return { state, envelope: responseEnvelope, url: requests.at(-1) };
+    }
+
+    function assertParam(url, name, value) {
+      assert.equal(new URL(url, "http://localhost").searchParams.get(name), String(value), `${name} must reach the poll URL`);
+      assert.equal(serverQueries.at(-1)[name], value, `${name} must reach the fake server`);
+    }
+
+    const next = await drive({ type: "pageNext", collectionId: "field-view" });
+    assertParam(next.url, "page", 1);
+    assertRenderedPage(markupFor(OvenRuntime, ir, dtAdapt, next.envelope), 25, "26-50 / 60");
+    assert.equal(selectCollection(next.state, ir, "field-view", resolvePointer).pageIndex, 1);
+
+    const chainedNext = await drive({ type: "pageNext", collectionId: "field-view" }, next.state);
+    assertParam(chainedNext.url, "page", 2);
+    assertRenderedPage(markupFor(OvenRuntime, ir, dtAdapt, chainedNext.envelope), 10, "51-60 / 60");
+    assert.equal(chainedNext.state.refresh.phase, 'idle');
+    const chainedPage = selectCollection(chainedNext.state, ir, 'field-view', resolvePointer);
+    assert.equal(chainedPage.pageIndex, 2);
+    assert.equal(chainedPage.pageItems.length, 10);
+    assert.equal(chainedPage.totalCount, 60);
+
+    const resized = await drive({ type: "pageSizeChanged", collectionId: "field-view", pageSize: 50 });
+    assertParam(resized.url, "pageSize", 50);
+    assertRenderedPage(markupFor(OvenRuntime, ir, dtAdapt, resized.envelope), 50, "1-50 / 60");
+    assert.equal(selectCollection(resized.state, ir, "field-view", resolvePointer).pageSize, 50);
+
+    const searched = await drive({ type: "queryChanged", id: "field-search", query: "Field 30" });
+    assertParam(searched.url, "search", "Field 30");
+    assertRenderedPage(markupFor(OvenRuntime, ir, dtAdapt, searched.envelope), 1, "1-1 / 1");
+    const searchPage = selectCollection(searched.state, ir, "field-view", resolvePointer);
+    assert.equal(searchPage.pageItems[0].id, "field-30");
+    assert.notEqual(searchPage.pageItems[0].id, initialPage.pageItems[0].id);
+
+    const filtered = await drive({ type: "toggleChanged", id: "failed-filter", active: true });
+    assertParam(filtered.url, "filter", "failing");
+    assertRenderedPage(markupFor(OvenRuntime, ir, dtAdapt, filtered.envelope), 25, "1-25 / 59");
+    const filterPage = selectCollection(filtered.state, ir, "field-view", resolvePointer);
+    assert.equal(filterPage.pageItems[0].id, "position");
+    assert.notEqual(filterPage.pageItems[0].id, initialPage.pageItems[0].id);
+
+    const sorted = await drive({ type: "toggleChanged", id: "changed-sort", active: false });
+    assertParam(sorted.url, "sort", "default");
+    assertRenderedPage(markupFor(OvenRuntime, ir, dtAdapt, sorted.envelope), 25, "1-25 / 60");
+    const sortPage = selectCollection(sorted.state, ir, "field-view", resolvePointer);
+    assert.equal(sortPage.pageItems[0].id, "position");
+    assert.notEqual(sortPage.pageItems[0].id, initialPage.pageItems[0].id);
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/differential-testing-oven-dom-golden.test.mjs b/dashboard/src/oven/runtime/differential-testing-oven-dom-golden.test.mjs
new file mode 100644
index 0000000..2ae83ac
--- /dev/null
+++ b/dashboard/src/oven/runtime/differential-testing-oven-dom-golden.test.mjs
@@ -0,0 +1,125 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import {
+  differentialTestingAllPassingPayload,
+  differentialTestingComparableNoChangedPayload,
+  differentialTestingComparableTelemetryPayload,
+  differentialTestingEmptyPayload,
+  differentialTestingIncomparableTelemetryPayload,
+  differentialTestingMultiScenarioPayload,
+  differentialTestingPaginatedMidPayload,
+  differentialTestingPaginatedPayload,
+  differentialTestingPayload,
+} from "../differential-testing-render/golden-harness.mjs";
+import { differentialPagedPayload } from "../differential-testing-render/differential-testing-renderer.js";
+import { withDeterministicTime } from "../test-support/deterministic-time.mjs";
+
+const runtimePath = new URL("./OvenRuntime.tsx", import.meta.url).pathname;
+const adapterPath = new URL("../../lib/differential-testing-adapter.ts", import.meta.url).pathname;
+const normalizerPath = new URL("../test-support/dom-normalize.ts", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("..", import.meta.url).pathname;
+
+const base = differentialTestingPayload();
+const failingFields = base.fields.filter((field) => field.failedSampleCount > 0 || field.missingSampleCount > 0);
+const paginatedMid = differentialTestingPaginatedMidPayload();
+const serverPage = {
+  search: "", filter: "all", sort: "changed", page: 0, pageSize: 25,
+  pageCount: Math.max(1, Math.ceil(base.fields.length / 25)), total: base.fields.length,
+  fields: base.fields, telemetryFields: base.telemetry?.fields ?? [],
+};
+const sortedFilteredPage = {
+  search: "", filter: "failing", sort: "default", page: 0, pageSize: 25,
+  pageCount: Math.max(1, Math.ceil(failingFields.length / 25)), total: failingFields.length,
+  fields: failingFields, telemetryFields: base.telemetry?.fields ?? [],
+};
+const paginatedMidPage = {
+  search: "", filter: "all", sort: "changed", page: 1, pageSize: 25, pageCount: 3, total: 60,
+  fields: paginatedMid.fields, telemetryFields: paginatedMid.telemetry?.fields ?? [],
+};
+const pageSeed = (page) => ({ "field-view": {
+  page: page.page, pageSize: page.pageSize, pageCount: page.pageCount, total: page.total,
+} });
+const loadError = new Error("network unreachable");
+
+const states = [
+  { name: "dt-load-error", initialAction: { type: "payloadRejected", error: loadError, generation: 0 } },
+  { name: "dt-empty", payload: differentialTestingEmptyPayload },
+  { name: "dt-main", payload: differentialTestingPayload },
+  { name: "dt-scenario-multi", payload: differentialTestingMultiScenarioPayload },
+  { name: "dt-row-expanded", payload: differentialTestingPayload, initialAction: { type: "toggleExpanded", key: "position" } },
+  { name: "dt-progress-mode", payload: differentialTestingPayload, controls: { "progress-mode": "progress" } },
+  { name: "dt-chart-current-failed", payload: differentialTestingPayload, controls: { "value-mode": "current", "progress-mode": "failed" } },
+  { name: "dt-no-match", payload: differentialTestingAllPassingPayload, controls: { "failed-filter": true } },
+  { name: "dt-paginated", payload: differentialTestingPaginatedPayload },
+  { name: "dt-telemetry-incomparable", payload: differentialTestingIncomparableTelemetryPayload },
+  { name: "dt-comparable-telemetry", payload: differentialTestingComparableTelemetryPayload },
+  { name: "dt-comparable-no-changed", payload: differentialTestingComparableNoChangedPayload },
+  {
+    name: "dt-server-paged",
+    payload: () => differentialPagedPayload(base, serverPage),
+    controls: { "failed-filter": false, "changed-sort": true },
+    pages: pageSeed(serverPage),
+  },
+  {
+    name: "dt-sorted-filtered-paged",
+    payload: () => differentialPagedPayload(base, { ...sortedFilteredPage, fields: base.fields }),
+    controls: { "failed-filter": true, "changed-sort": false },
+    pages: pageSeed(sortedFilteredPage),
+  },
+  {
+    name: "dt-paginated-mid",
+    payload: () => differentialPagedPayload(paginatedMid, paginatedMidPage),
+    controls: { "failed-filter": false, "changed-sort": true },
+    pages: pageSeed(paginatedMidPage),
+  },
+];
+
+test("DT oven equals the frozen normalized DOM states", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".dt-oven-dom-golden-test-"));
+  try {
+    const runtimeOutput = join(outputDir, "OvenRuntime.mjs");
+    const adapterOutput = join(outputDir, "differential-testing-adapter.mjs");
+    const normalizerOutput = join(outputDir, "dom-normalize.mjs");
+    await Promise.all([
+      build({ entryPoints: [runtimePath], bundle: true, format: "esm", outfile: runtimeOutput, platform: "node", alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [adapterPath], bundle: true, format: "esm", outfile: adapterOutput, platform: "node", target: "node18" }),
+      build({ entryPoints: [normalizerPath], bundle: true, format: "esm", outfile: normalizerOutput, platform: "node", target: "node18" }),
+    ]);
+    const cacheKey = `?test=${Date.now()}`;
+    const [{ OvenRuntime }, { adaptDifferentialTesting }, { domEquivalent, normalize, parseHtml, serializeCanonical }] = await Promise.all([
+      import(`${pathToFileURL(runtimeOutput).href}${cacheKey}`),
+      import(`${pathToFileURL(adapterOutput).href}${cacheKey}`),
+      import(`${pathToFileURL(normalizerOutput).href}${cacheKey}`),
+    ]);
+    const source = await readFile("ovens/differential-testing/differential-testing.oven", "utf8");
+    const compiled = compileOven(source, { file: "ovens/differential-testing/differential-testing.oven" });
+    assert.equal(compiled.ok, true, compiled.ok ? "" : JSON.stringify(compiled.diagnostics));
+    if (!compiled.ok) return;
+    for (const state of states) {
+      const markup = withDeterministicTime(() => renderToStaticMarkup(createElement(OvenRuntime, {
+        ir: compiled.ir,
+        payload: state.payload ? adaptDifferentialTesting(state.payload()) : undefined,
+        controls: state.controls,
+        pages: state.pages,
+        initialAction: state.initialAction,
+      })));
+      const actual = serializeCanonical(normalize(parseHtml(markup)));
+      const golden = await readFile(`dashboard/src/oven/differential-testing-render/goldens/${state.name}.html`, "utf8");
+      const expected = serializeCanonical(normalize(parseHtml(golden)));
+      const comparison = domEquivalent(markup, golden);
+      assert.equal(comparison.equal, true, `${state.name}: ${comparison.message}`);
+      assert.equal(actual, expected, `${state.name} differs`);
+    }
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/differential-testing-theme-view.tsx b/dashboard/src/oven/runtime/differential-testing-theme-view.tsx
new file mode 100644
index 0000000..373a576
--- /dev/null
+++ b/dashboard/src/oven/runtime/differential-testing-theme-view.tsx
@@ -0,0 +1,130 @@
+import { DifferentialEmptyState } from "../DifferentialEmptyState/DifferentialEmptyState";
+import { FieldMiniChart } from "../FieldMiniChart";
+import type { FieldMiniChartField } from "../FieldMiniChart";
+import { DifferentialKpiStrip } from "../DifferentialKpiStrip/DifferentialKpiStrip";
+import { DifferentialLogTable } from "../DifferentialLogTable/DifferentialLogTable";
+import { DifferentialFrameDeltaChart, DifferentialProgressChart } from "../DifferentialProgressChart";
+import { RefreshStatusChip } from "../RefreshStatusChip/RefreshStatusChip";
+import { resolvePointer } from "../utils/json-pointer";
+import { ControlAdapter } from "./control-adapters";
+import { DifferentialTestingDetail } from "./differential-testing-detail";
+import { DifferentialTestingFields } from "./differential-testing-fields";
+import type { OvenAction, OvenIr, OvenState } from "./oven-reducer";
+import { differentialExactPrefixFrameDeltaMetrics, runtimeFrameDeltaMetrics } from "./oven-payload-metadata";
+import { selectMode, selectRefreshStatus } from "./oven-selectors";
+import { getOvenTheme } from "./theme-registry";
+import { WidgetAdapter } from "./widget-adapters";
+
+type Node = {
+  kind: string;
+  attributes?: Record<string, unknown>;
+  bindings?: Record<string, unknown>;
+  children?: Node[];
+};
+
+type Props = {
+  ir: OvenIr;
+  state: OvenState;
+  dispatch: (action: OvenAction) => void;
+};
+
+const attrs = (node: Node) => node.attributes ?? {};
+
+function selectedChildren(node: Node, state: OvenState): Node[] {
+  const source = attrs(node).source;
+  const selected = typeof source === "string"
+    ? resolvePointer(state.payload, source)
+    : selectMode(state, String(attrs(node).modeFrom ?? ""));
+  const branch = (node.children ?? []).find((child) => child.kind === "case" && attrs(child).value === selected)
+    ?? (node.children ?? []).find((child) => child.kind === "case" && attrs(child).default === true);
+  return branch?.children ?? [];
+}
+
+function activeNodes(nodes: Node[], state: OvenState): Node[] {
+  return nodes.flatMap((node) => node.kind === "switch" ? activeNodes(selectedChildren(node, state), state) : [node]);
+}
+
+function required(nodes: Node[], kind: string): Node {
+  const node = nodes.find((candidate) => candidate.kind === kind);
+  if (!node) throw new Error(`Differential Testing theme requires <${kind}>`);
+  return node;
+}
+
+function source(node: Node, payload: unknown): unknown {
+  const pointer = attrs(node).source;
+  return resolvePointer(payload, typeof pointer === "string" ? pointer : "/");
+}
+
+function componentDefaults(ir: OvenIr, kind: string): Record<string, unknown> {
+  return { ...(getOvenTheme(ir.theme)?.components[kind] ?? {}) };
+}
+
+export function DifferentialTestingThemeView({ ir, state, dispatch }: Props) {
+  if (state.refresh.phase === "failed" && state.payloadRevision === 0) {
+    const error = state.refresh.error;
+    const message = String(error && typeof error === "object" && "message" in error ? error.message : error);
+    return <div className="empty">{message}</div>;
+  }
+  if (state.payload === undefined) return <div className="empty">Loading…</div>;
+
+  const root = activeNodes(ir.root as Node[] ?? [], state);
+  const empty = root.find((node) => node.kind === "differential-empty-state");
+  if (empty) {
+    const title = attrs(empty).title;
+    const value = typeof title === "string" && title.startsWith("/") ? resolvePointer(state.payload, title) : title;
+    return <DifferentialEmptyState title={String(value || "Differential Testing")} />;
+  }
+
+  const refreshNode = required(root, "refresh-status");
+  const kpiNode = required(root, "differential-kpi-strip");
+  const logNode = required(root, "differential-log-table");
+  const toolbarNode = required(root, "field-toolbar");
+  const collectionNode = required(root, "collection");
+  const fieldNode = required(collectionNode.children ?? [], "field-list");
+  const paginationNode = required(collectionNode.children ?? [], "pagination");
+  const progressNode = root.find((node) => node.kind === "progress-chart" || node.kind === "frame-delta-chart");
+  if (!progressNode) throw new Error("Differential Testing theme requires a chart node");
+
+  const payload = state.payload as Record<string, unknown>;
+  const progressMode = selectMode(state, "progress-mode") ?? "delta";
+  const primaryChartTitle = typeof payload.primaryChartTitle === "string" ? payload.primaryChartTitle : "";
+  const primaryChartField = payload.primaryChartField as FieldMiniChartField | undefined;
+  const deliveredFrameDeltaMetrics = runtimeFrameDeltaMetrics(state.payload);
+  const exactFrameDeltaMetrics = deliveredFrameDeltaMetrics.present
+    ? differentialExactPrefixFrameDeltaMetrics(state.payload, deliveredFrameDeltaMetrics.value)
+    : undefined;
+  const frameDeltaDefaults = componentDefaults(ir, progressNode.kind);
+  const chart = primaryChartField
+    ? <div id="progress-chart" className="chart hybrid-chart" role="img" aria-label={`${primaryChartTitle} over time`}>
+      <FieldMiniChart field={primaryChartField} showFrameLabels chartMode={progressMode === "delta" ? "delta" : "value"} />
+    </div>
+    : progressNode.kind === "frame-delta-chart"
+      ? <DifferentialFrameDeltaChart
+        metrics={(deliveredFrameDeltaMetrics.present ? exactFrameDeltaMetrics : source(progressNode, state.payload)) as any}
+        {...frameDeltaDefaults as any}
+        {...(deliveredFrameDeltaMetrics.present && exactFrameDeltaMetrics ? { hostOnly: false } : {})}
+        {...(deliveredFrameDeltaMetrics.present && !exactFrameDeltaMetrics ? { hostAriaLabel: "Exact-prefix frame delta metrics unavailable" } : {})}
+      />
+      : <DifferentialProgressChart history={source(progressNode, state.payload) as any[]} {...componentDefaults(ir, progressNode.kind) as any} />;
+  const fieldsMetric = payload.summary && typeof payload.summary === "object"
+    ? (payload.summary as { fields?: { total?: unknown } }).fields
+    : undefined;
+  const refreshPhase = selectRefreshStatus(state).phase;
+
+  return <>
+    <DifferentialTestingDetail
+      payload={payload}
+      progressMode={progressMode}
+      refresh={<RefreshStatusChip refresh={source(refreshNode, state.payload) as any} clientStatus={refreshPhase === "idle" ? null : refreshPhase} />}
+      kpis={<DifferentialKpiStrip payload={source(kpiNode, state.payload) as any} onScenarioChange={(scenarioId) => dispatch({ type: "scenarioSelected", scenarioId })} />}
+      chart={chart}
+      log={<DifferentialLogTable entries={source(logNode, state.payload) as any[]} />}
+    />
+    <DifferentialTestingFields
+      total={fieldsMetric?.total}
+      toolbar={<ControlAdapter node={toolbarNode} ir={ir} state={state} dispatch={dispatch} />}
+      fields={<WidgetAdapter node={fieldNode} ir={ir} state={state} dispatch={dispatch} />}
+      pagination={<ControlAdapter node={paginationNode} ir={ir} state={state} dispatch={dispatch} />}
+    />
+  </>;
+}
diff --git a/dashboard/src/oven/runtime/format-registry.test.ts b/dashboard/src/oven/runtime/format-registry.test.ts
new file mode 100644
index 0000000..5ff4f50
--- /dev/null
+++ b/dashboard/src/oven/runtime/format-registry.test.ts
@@ -0,0 +1,53 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { formatRegistry } from "../OvenView/registries";
+
+test("static lowering formats preserve DSL semantics and handle absent values", () => {
+  assert.equal(formatRegistry.plain("x"), "x");
+  assert.equal(formatRegistry.number(12_345.6), "12,346");
+  assert.equal(formatRegistry.number(undefined), "");
+  assert.equal(formatRegistry["ratio-to-percent"](0.123), 12.3);
+  assert.equal(formatRegistry["ratio-to-percent"](null), undefined);
+  assert.equal(formatRegistry.length([1, 2]), 2);
+  assert.equal(formatRegistry.length("ab"), 2);
+  assert.equal(formatRegistry.length(undefined), undefined);
+  assert.equal(formatRegistry.percent(0.123), "12.30%");
+  assert.equal(formatRegistry.percent(undefined), "");
+});
+
+test("time formats are local and compact", () => {
+  assert.match(String(formatRegistry["time-only"]("2020-01-02T03:04:00Z")), /^\d{2}:\d{2}$/u);
+  const originalNow = Date.now;
+  Date.now = () => Date.parse("2020-01-02T05:04:00Z");
+  try {
+    assert.equal(formatRegistry["relative-age"]("2020-01-02T03:04:00Z"), "2h");
+    assert.equal(formatRegistry["relative-age"](undefined), "");
+  } finally {
+    Date.now = originalNow;
+  }
+});
+
+test("DT formats use the newest report and preserve renderer formatting", () => {
+  const rows = [
+    { frame: 2, frames: 8, failedFieldCount: 3, fieldCount: 12, frameDelta: -2 },
+    { frame: 5, frames: 10, failedFieldCount: 2, fieldCount: 8, frameDelta: -1 },
+  ];
+  assert.equal(formatRegistry["progress-headline"](rows), "5/10");
+  assert.equal(formatRegistry["last-progress-percent"](rows), 50);
+  assert.equal(formatRegistry["last-failed-count"](rows), "2");
+  assert.equal(formatRegistry["last-failed-percent"](rows), 25);
+  assert.equal(formatRegistry["last-frame-delta"](rows), "1");
+  assert.equal(formatRegistry["last-delta-percent"](rows), 10);
+});
+
+test("DT telemetry formats index fields and explain availability", () => {
+  const first = { id: "position", failToPassCount: 1 };
+  const second = { id: "active", passToFailCount: 1 };
+  const indexed = formatRegistry["index-by-id"]([first, second]) as Record<string, unknown>;
+  assert.equal(indexed.position, first);
+  assert.equal(indexed.active, second);
+  assert.deepEqual(
+    formatRegistry["telemetry-availability"]({ status: "comparable", fields: [] }),
+    { status: "comparable", reason: "" },
+  );
+});
diff --git a/dashboard/src/oven/runtime/log-table-adapter.test.ts b/dashboard/src/oven/runtime/log-table-adapter.test.ts
new file mode 100644
index 0000000..e91fe7b
--- /dev/null
+++ b/dashboard/src/oven/runtime/log-table-adapter.test.ts
@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { LogTable } from "../LogTable";
+import { formatRegistry } from "../OvenView/registries";
+import { assertDomEquivalent } from "../test-support/dom-normalize";
+import { resolvePointer } from "../utils/json-pointer";
+import { buildLogTableProps } from "./log-table-adapter";
+import { OvenNode } from "./OvenNode";
+import { initOvenState, type OvenIr } from "./oven-reducer";
+
+const source = `<oven id="log-table-test" version="1" contract="checklist-progress@1" theme="checklist"><grid id="log-grid" columns="1"><log-table source="/events" empty-text="Nothing here."><column label="Time" source="@item/time" format="time-only"/><column label="Name" source="@item/name"/><column label="Note" source="@item/note" optional="true" fallback="—"/></log-table></grid></oven>`;
+const compiled = compileOven(source);
+if (!compiled.ok) throw new Error(compiled.diagnostics.map((item: { message: string }) => item.message).join("\n"));
+const table = compiled.ir.root[0].children[0];
+const ir = { ...compiled.ir, controls: [], collections: [] } as OvenIr;
+const payload = { events: [{ time: "2025-01-01T09:07:00Z", name: "first" }, { time: "2025-01-01T10:08:00Z", name: "second", note: "ready" }] };
+
+function renderRuntime(value: unknown) {
+  return renderToStaticMarkup(createElement(OvenNode, { node: table, ir, state: initOvenState(ir, value), dispatch: () => {} }));
+}
+
+test("log-table runtime renders compiled @item columns like LogTable", () => {
+  const props = buildLogTableProps(table, payload, { resolvePointer, formatRegistry });
+  const expected = renderToStaticMarkup(createElement(LogTable, { ...props }));
+  assertDomEquivalent(renderRuntime(payload), expected);
+  assert.equal(props.rows[0].cells[0].content, formatRegistry["time-only"](payload.events[0].time));
+  assert.equal(props.rows[0].cells[2].content, "—");
+  assert.equal(props.rows[1].cells[1].content, "second");
+});
+
+test("log-table runtime renders empty-text for a missing or empty source", () => {
+  assert.match(renderRuntime({ events: [] }), /Nothing here\./);
+  assert.match(renderRuntime({}), /Nothing here\./);
+});
diff --git a/dashboard/src/oven/runtime/log-table-adapter.ts b/dashboard/src/oven/runtime/log-table-adapter.ts
new file mode 100644
index 0000000..fd4943c
--- /dev/null
+++ b/dashboard/src/oven/runtime/log-table-adapter.ts
@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+
+type ColumnNode = { kind: string; attributes?: Record<string, unknown> };
+type LogTableNode = { attributes?: Record<string, unknown>; children?: ColumnNode[] };
+type ResolvePointer = (payload: unknown, pointer: string) => unknown;
+type FormatRegistry = Record<string, (value: unknown) => unknown>;
+
+export type LogTableProps = {
+  columns: string[];
+  rows: { key?: string; className: string; cells: { className: string; content: ReactNode }[] }[];
+  emptyState?: ReactNode;
+  className?: string;
+  title?: string;
+};
+
+function attributes(node: { attributes?: Record<string, unknown> }): Record<string, unknown> {
+  return node.attributes ?? {};
+}
+
+function columnClass(column: ColumnNode): string {
+  const attrs = attributes(column);
+  const label = String(attrs.label ?? "").trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+  const tone = typeof attrs.tone === "string" ? attrs.tone : "";
+  return ["log-table-cell", label, tone].filter(Boolean).join(" ");
+}
+
+function itemValue(item: unknown, source: unknown, resolvePointer: ResolvePointer): unknown {
+  if (source === "@item") return item;
+  if (typeof source === "string" && source.startsWith("@item/")) return resolvePointer(item, source.slice(5));
+  return undefined;
+}
+
+function rowKey(item: unknown, index: number, itemKey: unknown, resolvePointer: ResolvePointer): string {
+  const value = typeof itemKey === "string" ? resolvePointer(item, itemKey) : undefined;
+  return typeof value === "string" || typeof value === "number" ? String(value) : String(index);
+}
+
+/** Builds the closed LogTable component contract from declarative runtime IR. */
+export function buildLogTableProps(node: LogTableNode, payload: unknown, { resolvePointer, formatRegistry }: { resolvePointer: ResolvePointer; formatRegistry: FormatRegistry }): LogTableProps {
+  const attrs = attributes(node);
+  const columns = (node.children ?? []).filter((child) => child.kind === "column");
+  const entries = typeof attrs.source === "string" ? resolvePointer(payload, attrs.source) : undefined;
+  const source = Array.isArray(entries) ? entries : [];
+  const emptyText = attrs.emptyText ?? attrs["empty-text"];
+
+  return {
+    ...(typeof attrs.class === "string" ? { className: attrs.class } : {}),
+    ...(typeof attrs.title === "string" ? { title: attrs.title } : {}),
+    columns: columns.map((column) => String(attributes(column).label ?? "")),
+    rows: source.map((item, index) => ({
+      key: rowKey(item, index, attrs.itemKey ?? attrs["item-key"], resolvePointer),
+      className: "log-row no-detail log-table-row",
+      cells: columns.map((column) => {
+        const columnAttrs = attributes(column);
+        const value = itemValue(item, columnAttrs.source, resolvePointer);
+        const optional = columnAttrs.optional === true || columnAttrs.optional === "true";
+        if (value === undefined && !optional) throw new Error(`Missing required log-table column source: ${String(columnAttrs.source)}`);
+        const content = value === undefined ? (columnAttrs.fallback ?? "") : (formatRegistry[String(columnAttrs.format ?? "identity")] ?? formatRegistry.identity)(value);
+        return { className: columnClass(column), content };
+      }),
+    })),
+    emptyState: source.length === 0 && emptyText !== undefined ? String(emptyText) : undefined,
+  };
+}
diff --git a/dashboard/src/oven/runtime/lower-oven-ir.test.ts b/dashboard/src/oven/runtime/lower-oven-ir.test.ts
new file mode 100644
index 0000000..7f2a285
--- /dev/null
+++ b/dashboard/src/oven/runtime/lower-oven-ir.test.ts
@@ -0,0 +1,67 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { ClipboardList } from "lucide-react";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { KpiItem } from "../KpiItem/KpiItem";
+import { KpiStrip } from "../KpiStrip/KpiStrip";
+import { OvenView } from "../OvenView/OvenView";
+import { ProgressDonut } from "../ProgressDonut/ProgressDonut";
+import { SectionHeader } from "../SectionHeader/SectionHeader";
+import { assertDomEquivalent, extractFirstByClass } from "../test-support/dom-normalize";
+import { lowerOvenIr } from "./lower-oven-ir";
+
+const payload = { value: 7, ratio: 0.123, items: ["a", "b"] };
+const open = '<oven id="test" version="1" contract="checklist-progress@1" theme="checklist">';
+
+function lower(fragment: string) {
+  const result = compileOven(`${open}${fragment}</oven>`);
+  assert.equal(result.ok, true, result.ok ? "" : JSON.stringify(result.diagnostics));
+  return lowerOvenIr(result.ir);
+}
+
+function render(def: ReturnType<typeof lower>) {
+  return renderToStaticMarkup(createElement(OvenView, { def, payload }));
+}
+
+function handwritten(component: ReturnType<typeof createElement>) {
+  return renderToStaticMarkup(createElement("div", null, component));
+}
+
+test("lowers kpi-strip and kpi-item icon bindings to handwritten markup", () => {
+  const def = lower('<kpi-strip aria-label="Summary"><kpi-item heading="Done" source="/value"><icon slot="visual" name="ClipboardList" /></kpi-item></kpi-strip>');
+  assertDomEquivalent(render(def), handwritten(createElement(KpiStrip, { ariaLabel: "Summary", className: "driving-parity-kpi-strip has-burns checklist-kpi-strip" }, createElement(KpiItem, {
+    className: "driving-parity-kpi-item driving-parity-kpi-section",
+    heading: "Done", value: 7, visual: createElement(ClipboardList, { "aria-hidden": "true", className: "driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" }),
+  }))));
+});
+
+test("lowers kpi-item progress visual and bound text value", () => {
+  const def = lower('<stack><kpi-item heading="Progress"><progress-donut slot="visual" source="/ratio" format="ratio-to-percent" /><text slot="value" source="/ratio" format="percent" /></kpi-item></stack>');
+  const expected = createElement("div", { className: "oven-stack", style: { display: "flex", flexDirection: "column" } }, createElement(KpiItem, {
+    className: "driving-parity-kpi-item driving-parity-kpi-section driving-parity-kpi-progress",
+    heading: "Progress", visual: createElement(ProgressDonut, { percent: 12.3 }), value: "12.30%",
+  }));
+  assertDomEquivalent(render(def), renderToStaticMarkup(expected));
+});
+
+test("lowers progress-donut and section-header primary source shorthands", () => {
+  const donut = lower('<stack><kpi-item heading="Progress" source="/ratio"><progress-donut slot="visual" source="/ratio" format="ratio-to-percent" /></kpi-item></stack>');
+  assertDomEquivalent(extractFirstByClass(render(donut), "driving-parity-kpi-progress-donut"), renderToStaticMarkup(createElement(ProgressDonut, { percent: 12.3 })));
+  const header = lower('<section-header title="Items" source="/items" format="length" />');
+  assertDomEquivalent(render(header), handwritten(createElement(SectionHeader, { title: "Items", count: 2 })));
+});
+
+test("lowers trusted grid and panel geometry into style objects", () => {
+  const def = lower('<grid columns="12" rows="4" row-height="48"><panel id="summary" column="2" row="3" column-span="4" row-span="2"><kpi-item heading="Done" source="/value" /></panel></grid>');
+  assert.deepEqual(def.sections[0].props?.style, {
+    display: "grid", gridTemplateColumns: "repeat(12, minmax(0, 1fr))", gridTemplateRows: "repeat(4, 48px)",
+  });
+  assert.equal(def.sections[1].className, "oven-panel");
+  assert.deepEqual(def.sections[1].props?.style, { gridColumn: "2 / span 4", gridRow: "3 / span 2" });
+});
+
+test("rejects interactive and iterating IR nodes in static lowering", () => {
+  assert.throws(() => lowerOvenIr({ id: "x", root: [{ kind: "collection", attributes: {}, bindings: {}, children: [] }] }), /Unsupported in static lowering: collection/);
+});
diff --git a/dashboard/src/oven/runtime/lower-oven-ir.ts b/dashboard/src/oven/runtime/lower-oven-ir.ts
new file mode 100644
index 0000000..887f336
--- /dev/null
+++ b/dashboard/src/oven/runtime/lower-oven-ir.ts
@@ -0,0 +1,231 @@
+import type { Binding, CellDef, JsonValue, OvenViewDef, SectionDef, SlotDef } from "../OvenView/types";
+import { getOvenTheme, type OvenTheme } from "./theme-registry";
+
+type IrBinding = Binding & { optional?: boolean; fallback?: string };
+type IrNode = {
+  kind: string;
+  attributes: Record<string, unknown>;
+  bindings: Record<string, IrBinding>;
+  children: IrNode[];
+};
+type OvenIr = { id: string; theme?: string; root: IrNode[] };
+
+const components: Record<string, string> = Object.freeze({
+  box: "Box",
+  "kpi-strip": "KpiStrip",
+  "kpi-item": "KpiItem",
+  "progress-donut": "ProgressDonut",
+  "section-header": "SectionHeader",
+  "progress-value": "ChecklistProgressValue",
+  "checklist-burn-panel": "ChecklistBurnPanel",
+  "checklist-ledger": "ChecklistLedger",
+  "checklist-event-cards": "ChecklistEventCards",
+  "diff-card": "DiffCardList",
+  "streaming-diff-heading": "StreamingDiffHeading",
+  "feed-list": "FeedList",
+  "file-diff": "FileDiff",
+  "burn-donut": "BurnDonut",
+  "waffle-metric": "WaffleMetric",
+  "differential-kpi-strip": "DifferentialKpiStrip",
+  "differential-log-table": "DifferentialLogTable",
+  "progress-chart": "DifferentialProgressChart",
+  "frame-delta-chart": "DifferentialFrameDeltaChart",
+  "differential-empty-state": "DifferentialEmptyState",
+});
+
+const unsupported = new Set([
+  "log-table", "collection", "each", "switch", "case", "field-toolbar", "mode-toggle", "option",
+  "search", "sort-toggle", "filter-toggle", "pagination", "field-list", "refresh-status", "domain-tabs", "column",
+]);
+
+function fail(node: IrNode): never { throw new Error(`Unsupported in static lowering: ${node.kind}`); }
+function key(node: IrNode, path: string): string { return typeof node.attributes.id === "string" ? node.attributes.id : `${path}-${node.kind}`; }
+function jsonProps(values: Record<string, unknown>): Record<string, JsonValue> { return values as Record<string, JsonValue>; }
+function binding(source: unknown, format: unknown): Binding | undefined { return typeof source === "string" ? { source, ...(typeof format === "string" ? { format } : {}) } : undefined; }
+function pointerBinding(value: unknown): Binding | undefined { return typeof value === "string" && value.startsWith("/") ? { source: value } : undefined; }
+
+function gridStyle(attributes: Record<string, unknown>): Record<string, string | number> {
+  const style: Record<string, string | number> = { display: "grid" };
+  if (typeof attributes.columns === "number") style.gridTemplateColumns = `repeat(${attributes.columns}, minmax(0, 1fr))`;
+  if (typeof attributes.rows === "number") style.gridTemplateRows = `repeat(${attributes.rows}, ${typeof attributes.rowHeight === "number" ? `${attributes.rowHeight}px` : "auto"})`;
+  return style;
+}
+
+function panelStyle(attributes: Record<string, unknown>): Record<string, string> {
+  const style: Record<string, string> = {};
+  if (typeof attributes.column === "number") style.gridColumn = `${attributes.column}${typeof attributes.columnSpan === "number" ? ` / span ${attributes.columnSpan}` : ""}`;
+  if (typeof attributes.row === "number") style.gridRow = `${attributes.row}${typeof attributes.rowSpan === "number" ? ` / span ${attributes.rowSpan}` : ""}`;
+  return style;
+}
+
+function assignLiteralOrPointer(props: Record<string, unknown>, bind: Record<string, Binding>, name: string, value: unknown) {
+  const pointer = pointerBinding(value);
+  if (pointer) bind[name] = pointer;
+  else if (value !== undefined) props[name] = value;
+}
+
+function lowerSlot(node: IrNode, path: string, theme?: OvenTheme): SlotDef {
+  if (node.kind === "icon") return { icon: String(node.attributes.name) };
+  if (node.kind === "text") {
+    if (typeof node.attributes.text === "string") return { text: node.attributes.text };
+    throw new Error("A source text slot must be lowered as its parent binding");
+  }
+  return lowerCell(node, path, theme);
+}
+
+function lowerCell(node: IrNode, path: string, theme?: OvenTheme): CellDef {
+  if (unsupported.has(node.kind)) return fail(node);
+  const component = components[node.kind];
+  if (!component) return fail(node);
+  const attrs = node.attributes;
+  const props: Record<string, unknown> = { ...(theme?.components[node.kind] ?? {}) };
+  const bind: Record<string, Binding> = { ...node.bindings };
+  if (typeof attrs.id === "string") props.id = attrs.id;
+  if (typeof attrs.class === "string") props.className = attrs.class;
+  if (node.kind === "box") {
+    props.element = attrs.element;
+    if (typeof attrs.dataDetailTab === "string") props.dataDetailTab = attrs.dataDetailTab;
+    if (typeof attrs.text === "string") props.text = attrs.text;
+  }
+  if (node.kind === "kpi-strip") {
+    assignLiteralOrPointer(props, bind, "ariaLabel", attrs.ariaLabel);
+    assignLiteralOrPointer(props, bind, "title", attrs.title);
+  }
+  if (node.kind === "kpi-item") {
+    assignLiteralOrPointer(props, bind, "heading", attrs.heading);
+    assignLiteralOrPointer(props, bind, "title", attrs.title);
+    assignLiteralOrPointer(props, bind, "value", attrs.value);
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.value = source;
+  }
+  if (node.kind === "progress-donut") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.percent = source;
+  }
+  if (node.kind === "burn-donut") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.entries = source;
+  }
+  if (node.kind === "waffle-metric") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.metric = source;
+  }
+  if (node.kind === "differential-kpi-strip") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.payload = source;
+  }
+  if (node.kind === "differential-log-table") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.entries = source;
+  }
+  if (node.kind === "differential-empty-state") {
+    assignLiteralOrPointer(props, bind, "title", attrs.title);
+  }
+  if (node.kind === "progress-chart") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.history = source;
+  }
+  if (node.kind === "frame-delta-chart") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.metrics = source;
+  }
+  if (node.kind === "progress-value") {
+    for (const name of ["done", "total", "percent"]) assignLiteralOrPointer(props, bind, name, attrs[name]);
+  }
+  if (["checklist-burn-panel", "checklist-ledger", "checklist-event-cards"].includes(node.kind)) {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.data = source;
+  }
+  if (node.kind === "diff-card") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.cards = source;
+  }
+  if (node.kind === "streaming-diff-heading") {
+    assignLiteralOrPointer(props, bind, "session", attrs.session);
+    assignLiteralOrPointer(props, bind, "backHref", attrs.backHref);
+  }
+  if (node.kind === "feed-list") {
+    for (const name of ["feeds", "error", "loading", "showRepository"]) {
+      const value = node.bindings[name];
+      if (value) bind[name] = value;
+    }
+  }
+  if (node.kind === "file-diff") {
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.file = source;
+  }
+  if (node.kind === "section-header") {
+    if (typeof attrs.title === "string") props.title = attrs.title;
+    const source = binding(attrs.source, attrs.format);
+    if (source) bind.count = source;
+  }
+  const slots: Record<string, SlotDef> = {};
+  const children: CellDef[] = [];
+  for (let index = 0; index < node.children.length; index += 1) {
+    const child = node.children[index];
+    if (child.kind === "bind") continue;
+    const slot = child.attributes.slot;
+    if (child.kind === "text" && typeof slot === "string" && typeof child.attributes.source === "string") {
+      bind[slot] = { source: child.attributes.source, ...(typeof child.attributes.format === "string" ? { format: child.attributes.format } : {}) };
+    } else if (typeof slot === "string") slots[slot] = lowerSlot(child, `${path}-${index}`, theme);
+    else if (node.kind === "kpi-item" && child.kind === "icon") slots.visual = lowerSlot(child, `${path}-${index}`, theme);
+    else if (node.kind === "kpi-item" && child.kind === "progress-donut") slots.visual = lowerSlot(child, `${path}-${index}`, theme);
+    else if (node.kind === "kpi-item" && child.kind === "progress-value") slots.value = lowerSlot(child, `${path}-${index}`, theme);
+    else children.push(lowerCell(child, `${path}-${index}`, theme));
+  }
+  if (node.kind === "kpi-item") {
+    const modifiers = [
+      typeof attrs.variant === "string" ? theme?.kpiItemVariants[attrs.variant] : undefined,
+      node.children.some((child) => child.kind === "progress-donut") ? theme?.progressKpiClassName : undefined,
+    ].filter((value): value is string => Boolean(value));
+    if (modifiers.length) props.className = [props.className, ...modifiers].filter(Boolean).join(" ");
+    if (typeof attrs.icon === "string") slots.visual = { icon: attrs.icon };
+  }
+  return { component, key: key(node, path), ...(Object.keys(props).length ? { props: jsonProps(props) } : {}), ...(Object.keys(bind).length ? { bind } : {}), ...(Object.keys(slots).length ? { slots } : {}), ...(children.length ? { children } : {}) };
+}
+
+function lowerSection(node: IrNode, path: string, theme?: OvenTheme, inherited?: SectionDef): SectionDef[] {
+  if (unsupported.has(node.kind)) return fail(node);
+  if (node.kind === "grid") {
+    const grid: SectionDef = { element: "div", className: "oven-grid", props: jsonProps({ style: gridStyle(node.attributes) }), cells: [], key: key(node, path) };
+    const panels: SectionDef[] = [];
+    for (let index = 0; index < node.children.length; index += 1) {
+      const child = node.children[index];
+      if (child.kind === "panel") panels.push(lowerSection(child, `${path}-${index}`, theme)[0]);
+      else grid.cells.push(lowerCell(child, `${path}-${index}`, theme));
+    }
+    return [grid, ...panels];
+  }
+  if (node.kind === "stack" || node.kind === "panel") {
+    const style = node.kind === "panel" ? panelStyle(node.attributes) : { display: "flex", flexDirection: node.attributes.direction === "row" ? "row" : "column" };
+    const section: SectionDef = { element: node.kind === "panel" ? "section" : "div", className: `oven-${node.kind}`, props: jsonProps({ style }), cells: [], key: key(node, path), ...inherited };
+    for (let index = 0; index < node.children.length; index += 1) section.cells.push(lowerCell(node.children[index], `${path}-${index}`, theme));
+    return [section];
+  }
+  if (node.kind === "box") {
+    const element = node.attributes.element;
+    const section: SectionDef = { element: element === "section" || element === "main" || element === "span" ? element : "div", ...(typeof node.attributes.class === "string" ? { className: node.attributes.class } : {}), ...(typeof node.attributes.id === "string" ? { props: jsonProps({ id: node.attributes.id }) } : {}), ...(typeof node.attributes.text === "string" ? { text: node.attributes.text } : {}), cells: [], key: key(node, path), ...inherited };
+    for (let index = 0; index < node.children.length; index += 1) section.cells.push(lowerCell(node.children[index], `${path}-${index}`, theme));
+    return [section];
+  }
+  return [{ element: "div", cells: [lowerCell(node, path, theme)], key: key(node, path) }];
+}
+
+function lowerThemedRoot(root: IrNode[], theme: OvenTheme): SectionDef[] | undefined {
+  const expected = theme.regions.flatMap((region) => region.kinds);
+  if (root.length !== expected.length || root.some((node, index) => node.kind !== expected[index])) return undefined;
+  let cursor = 0;
+  return theme.regions.map((region, regionIndex) => {
+    const nodes = root.slice(cursor, cursor + region.kinds.length);
+    cursor += region.kinds.length;
+    return { element: region.element, ...(region.className ? { className: region.className } : {}), ...(region.props ? { props: region.props as Record<string, JsonValue> } : {}), cells: nodes.map((node, index) => lowerCell(node, `root-${cursor - nodes.length + index}`, theme)), key: `theme-${regionIndex}` };
+  });
+}
+
+/** Lowers the non-interactive, root-pointer-only IR subset into OvenView's static shape. */
+export function lowerOvenIr(ir: OvenIr): OvenViewDef {
+  if (!ir || !Array.isArray(ir.root)) throw new TypeError("Invalid oven IR");
+  const theme = getOvenTheme(ir.theme);
+  const sections = theme ? lowerThemedRoot(ir.root, theme) : undefined;
+  return { ...(sections && theme ? theme.view : {}), sections: sections ?? ir.root.flatMap((node, index) => lowerSection(node, `root-${index}`, theme)) };
+}
diff --git a/dashboard/src/oven/runtime/oven-live-data-304.test.mjs b/dashboard/src/oven/runtime/oven-live-data-304.test.mjs
new file mode 100644
index 0000000..4e7138f
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-live-data-304.test.mjs
@@ -0,0 +1,66 @@
+import assert from "node:assert/strict";
+import { mkdtemp, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import test from "node:test";
+import { build } from "esbuild";
+
+const runtimePath = new URL("./oven-live-data.ts", import.meta.url).pathname;
+const settle = () => new Promise((resolve) => setImmediate(resolve));
+const response = (payload, etag = "v1") => ({
+  ok: true,
+  status: 200,
+  headers: { get: (name) => name === "etag" ? etag : null },
+  json: async () => payload,
+});
+const notModified = {
+  ok: false,
+  status: 304,
+  headers: { get: (name) => name === "etag" ? "v1" : null },
+  json: async () => { throw new Error("no body on 304"); },
+};
+
+test("oven poller treats an unchanged ETag response as a successful no-op", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".oven-live-data-304-test-"));
+  try {
+    const runtimeOutput = join(outputDir, "oven-live-data.mjs");
+    await build({
+      entryPoints: [runtimePath],
+      bundle: true,
+      format: "esm",
+      outfile: runtimeOutput,
+      packages: "external",
+      platform: "node",
+      target: "node18",
+    });
+    const { createOvenPoller } = await import(`${pathToFileURL(runtimeOutput).href}?test=${Date.now()}`);
+    const actions = [], calls = [];
+    let request = 0;
+    const poller = createOvenPoller({
+      id: "sample",
+      dispatch: (action) => actions.push(action),
+      fetchImpl: async (_url, init) => {
+        calls.push(init);
+        request += 1;
+        if (request === 1) return response({ version: 1 });
+        if (request === 2) return notModified;
+        return response({ version: 2 }, "v2");
+      },
+    });
+
+    poller.refresh();
+    await settle();
+    assert.equal(actions.filter((action) => action.type === "payloadAccepted").length, 1);
+
+    poller.refresh();
+    await settle();
+    assert.deepEqual(calls[1].headers, { "If-None-Match": "v1" });
+    assert.equal(actions.some((action) => action.type === "payloadRejected"), false);
+
+    poller.refresh();
+    await settle();
+    assert.deepEqual(calls[2].headers, { "If-None-Match": "v1" });
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/oven-live-data.test.ts b/dashboard/src/oven/runtime/oven-live-data.test.ts
new file mode 100644
index 0000000..fc7e119
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-live-data.test.ts
@@ -0,0 +1,98 @@
+import assert from "node:assert/strict";
+import { resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { test } from "node:test";
+import { dtAdapt, ptAdapt } from "../../components/DifferentialTestingOven/DifferentialTestingOven";
+import { adaptDifferentialTesting } from "../../lib/differential-testing-adapter";
+import { adaptPerformanceTracingReport } from "../../lib/performance-tracing.mjs";
+import { createOvenPoller, ovenDataUrl, scenarioSearch } from "./oven-live-data";
+import { initOvenState, ovenReducer, type OvenAction } from "./oven-reducer";
+
+function deferred<T>() { let resolve!: (value: T) => void; let reject!: (error: unknown) => void; const promise = new Promise<T>((yes, no) => { resolve = yes; reject = no; }); return { promise, resolve, reject }; }
+const response = (payload: unknown, etag = "v1") => ({ ok: true, status: 200, headers: { get: (name: string) => name === "etag" ? etag : null }, json: async () => payload });
+
+test("oven poller keeps one request active, queues one retry, and retains ETags", async () => {
+  const first = deferred<any>(), second = deferred<any>(), calls: RequestInit[] = [], actions: OvenAction[] = [];
+  const poller = createOvenPoller({ id: "sample", dispatch: (action) => actions.push(action), fetchImpl: async (_url, init) => { calls.push(init); return calls.length === 1 ? first.promise : second.promise; }, search: "?repoKey=abc&ignored=x" });
+  poller.refresh(); poller.refresh(); poller.refresh();
+  assert.equal(calls.length, 1);
+  first.resolve(response({ version: 1 })); await new Promise<void>((resolve) => setImmediate(resolve));
+  assert.equal(calls.length, 2);
+  second.resolve(response({ version: 2 }, "v2")); await new Promise<void>((resolve) => setImmediate(resolve));
+  assert.deepEqual(calls[1].headers, { "If-None-Match": "v1" });
+  assert.equal(actions.filter((action) => action.type === "payloadAccepted").length, 2);
+  assert.equal(ovenDataUrl("sample", "?repoKey=abc&bad=no"), "/api/oven-data/sample?repoKey=abc");
+});
+
+test("oven poller reports failures without inventing an accepted replacement", async () => {
+  const actions: OvenAction[] = [];
+  const poller = createOvenPoller({ id: "sample", dispatch: (action) => actions.push(action), fetchImpl: async () => { throw new Error("offline"); }, search: "" });
+  poller.refresh(); await Promise.resolve(); await Promise.resolve();
+  assert.equal(actions.some((action) => action.type === "payloadAccepted"), false);
+  assert.equal(actions.some((action) => action.type === "payloadRejected"), true);
+});
+
+test("scenario selection rekeys poller requests while retaining the repository key", async () => {
+  const urls: string[] = [], actions: OvenAction[] = [];
+  const fetchImpl = async (url: string) => { urls.push(url); return response({}); };
+  for (const scenario of ["A", "B"]) {
+    const poller = createOvenPoller({
+      id: "differential-testing",
+      dispatch: (action) => actions.push(action),
+      fetchImpl,
+      search: scenarioSearch("?repoKey=repo-1&scenario=old&ignored=x", scenario),
+    });
+    poller.refresh();
+    await new Promise<void>((resolve) => setImmediate(resolve));
+  }
+  assert.deepEqual(urls, [
+    "/api/oven-data/differential-testing?repoKey=repo-1&scenario=A",
+    "/api/oven-data/differential-testing?repoKey=repo-1&scenario=B",
+  ]);
+  assert.equal(ovenDataUrl("differential-testing", scenarioSearch("", "X")), "/api/oven-data/differential-testing?scenario=X");
+});
+
+test("oven poller adapts DT and PT envelopes while unadapted polls retain raw bodies", async () => {
+  const fixture = await import(pathToFileURL(resolve(process.cwd(), "dashboard/src/oven/differential-testing-render/golden-harness.mjs")).href);
+  const dtReport = fixture.differentialTestingPayload();
+  const ptReport = {
+    runId: "trace-fixture", generatedAt: "2026-07-15T12:00:00.000Z", status: "pass",
+    scenario: { id: "prepared" }, metrics: { p95FrameMs: 20 }, budgets: { p95FrameMs: 25 },
+    runs: [{ frameTiming: { series: [{ frame: 0, frameMs: 20 }] } }],
+  };
+  const envelopes = [
+    { ovenId: "differential-testing", path: "/api/oven-data/differential-testing", scenarioId: "fixture", payload: dtReport },
+    { ovenId: "performance-tracing", path: "/api/oven-data/performance-tracing", payload: ptReport, validated: true },
+  ];
+  const expected = [adaptDifferentialTesting(dtReport), adaptDifferentialTesting(adaptPerformanceTracingReport(ptReport))];
+
+  for (const [index, adapt] of [dtAdapt, ptAdapt].entries()) {
+    const actions: OvenAction[] = [];
+    const poller = createOvenPoller({ id: String(envelopes[index].ovenId), dispatch: (action) => actions.push(action), fetchImpl: async () => response(envelopes[index]), adapt });
+    poller.refresh();
+    await new Promise<void>((resolve) => setImmediate(resolve));
+    assert.deepEqual(actions.find((action) => action.type === "payloadAccepted"), { type: "payloadAccepted", payload: expected[index], generation: 1 });
+  }
+
+  const rawActions: OvenAction[] = [];
+  const rawPoller = createOvenPoller({ id: "sample", dispatch: (action) => rawActions.push(action), fetchImpl: async () => response(envelopes[0]) });
+  rawPoller.refresh();
+  await new Promise<void>((resolve) => setImmediate(resolve));
+  assert.deepEqual(rawActions.find((action) => action.type === "payloadAccepted"), { type: "payloadAccepted", payload: envelopes[0], generation: 1 });
+});
+
+test("oven poller coalesces in-flight retries into one reducer request and resolves to idle", async () => {
+  const ir = { contract: "checklist", controls: [], collections: [], root: [] };
+  let state = initOvenState(ir as any);
+  const generationRef = { current: 0 }, first = deferred<any>(), second = deferred<any>(), calls: RequestInit[] = [], actions: OvenAction[] = [];
+  const dispatch = (action: OvenAction) => { actions.push(action); state = ovenReducer(state, action, ir as any); };
+  const poller = createOvenPoller({ id: "sample", dispatch, fetchImpl: async (_url, init) => { calls.push(init); return calls.length === 1 ? first.promise : second.promise; }, search: "", generationRef });
+  poller.refresh(); poller.refresh(); poller.refresh();
+  assert.equal(actions.filter((action) => action.type === "payloadRequested").length, 2);
+  assert.equal(state.refresh.generation, generationRef.current);
+  first.resolve(response({ version: 1 })); await new Promise<void>((resolve) => setImmediate(resolve));
+  second.resolve(response({ version: 2 }, "v2")); await new Promise<void>((resolve) => setImmediate(resolve));
+  assert.equal(state.refresh.phase, "idle");
+  assert.equal(state.payloadRevision, 2);
+  assert.equal(calls.length, 2);
+});
diff --git a/dashboard/src/oven/runtime/oven-live-data.ts b/dashboard/src/oven/runtime/oven-live-data.ts
new file mode 100644
index 0000000..8492989
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-live-data.ts
@@ -0,0 +1,92 @@
+import { useEffect, useRef } from "react";
+import type { OvenAction, OvenIr, OvenState } from "./oven-reducer";
+
+type FetchLike = (input: string, init: RequestInit) => Promise<{ ok: boolean; status: number; headers: { get(name: string): string | null }; json(): Promise<unknown> }>;
+export type OvenPoller = { refresh(): void; stop(): void };
+export type OvenPayloadAdapter = (raw: unknown) => unknown;
+
+export function scenarioSearch(currentSearch = typeof window === "undefined" ? "" : window.location.search, scenario?: string): string {
+  const source = new URLSearchParams(currentSearch), target = new URLSearchParams();
+  if (source.has("repoKey")) target.set("repoKey", source.get("repoKey")!);
+  const selected = scenario ?? (source.has("scenario") ? source.get("scenario")! : undefined);
+  if (selected !== undefined) target.set("scenario", selected);
+  const query = target.toString();
+  return query ? `?${query}` : "";
+}
+
+type IrNode = { attributes?: Record<string, unknown>; children?: IrNode[] };
+
+function nodes(items: IrNode[] = []): IrNode[] { return items.flatMap((node) => [node, ...nodes(node.children)]); }
+function attributes(ir: OvenIr, id: string): Record<string, unknown> {
+  return nodes(ir.root).find((node) => node.attributes?.id === id)?.attributes ?? {};
+}
+
+export function ovenPollSearch({ ir, state, scenario }: { ir: OvenIr; state: OvenState; scenario?: string }): string {
+  const base = scenarioSearch(undefined, scenario);
+  for (const item of ir.collections) {
+    const collection = { ...attributes(ir, item.id), ...item };
+    const current = state.collections[item.id];
+    if (!current?.serverPage || (collection.paging !== "auto" && collection.paging !== "server")) continue;
+    const searchId = typeof collection.searchFrom === "string" ? collection.searchFrom : undefined;
+    const filterId = typeof collection.filterFrom === "string" ? collection.filterFrom : undefined;
+    const sortId = typeof collection.sortFrom === "string" ? collection.sortFrom : undefined;
+    const query = new URLSearchParams(base);
+    query.set("search", String(searchId ? state.controls[searchId] ?? "" : ""));
+    query.set("filter", filterId && state.controls[filterId] === true ? "failing" : "all");
+    query.set("sort", sortId && state.controls[sortId] === true ? "changed" : "default");
+    query.set("page", String(current.pageIndex));
+    query.set("pageSize", String(current.pageSize));
+    return `?${query.toString()}`;
+  }
+  return base;
+}
+
+export function ovenDataUrl(id: string, search = typeof window === "undefined" ? "" : window.location.search): string {
+  return `/api/oven-data/${encodeURIComponent(id)}${scenarioSearch(search)}`;
+}
+
+/** Poll coordinator kept outside React so request ordering is independently testable. */
+export function createOvenPoller({ id, dispatch, fetchImpl = fetch as FetchLike, search, adapt, generationRef }: { id: string; dispatch: (action: OvenAction) => void; fetchImpl?: FetchLike; search?: string; adapt?: OvenPayloadAdapter; generationRef?: { current: number } }): OvenPoller {
+  let stopped = false, inFlight = false, queued = false, etag: string | undefined;
+  const generation = generationRef ?? { current: 0 };
+  const refresh = () => {
+    if (stopped) return;
+    if (inFlight) { if (!queued) { queued = true; dispatch({ type: "payloadRequested" }); } return; }
+    inFlight = true;
+    generation.current += 1;
+    dispatch({ type: "payloadRequested" });
+    const requestGeneration = generation.current;
+    const url = search === undefined ? ovenDataUrl(id) : `/api/oven-data/${encodeURIComponent(id)}${search}`;
+    void fetchImpl(url, { cache: "no-store", headers: etag ? { "If-None-Match": etag } : undefined }).then(async (response) => {
+      if (response.status === 304) {
+        const nextEtag = response.headers.get("etag");
+        if (nextEtag) etag = nextEtag;
+        if (!stopped && requestGeneration === generation.current) dispatch({ type: "payloadUnchanged", generation: requestGeneration });
+        return;
+      }
+      if (!response.ok) throw new Error(`Oven data request failed (${response.status})`);
+      const raw = await response.json();
+      const nextEtag = response.headers.get("etag");
+      if (nextEtag) etag = nextEtag;
+      if (!stopped && requestGeneration === generation.current) dispatch({ type: "payloadAccepted", payload: adapt ? adapt(raw) : raw, generation: requestGeneration });
+    }).catch((error: unknown) => { if (!stopped && requestGeneration === generation.current) dispatch({ type: "payloadRejected", error, generation: requestGeneration }); }).finally(() => {
+      inFlight = false;
+      if (!stopped && queued) { queued = false; refresh(); }
+    });
+  };
+  return { refresh, stop: () => { stopped = true; } };
+}
+
+export function useOvenLiveData(id: string | undefined, refreshSeconds: unknown, dispatch: (action: OvenAction) => void, search: string, adapt: OvenPayloadAdapter | undefined = undefined) {
+  const dispatchRef = useRef(dispatch);
+  const generationRef = useRef(0);
+  dispatchRef.current = dispatch;
+  useEffect(() => {
+    const seconds = Number(refreshSeconds);
+    if (!id || !Number.isFinite(seconds) || seconds <= 0) return undefined;
+    const poller = createOvenPoller({ id, dispatch: (action) => dispatchRef.current(action), search, adapt, generationRef });
+    poller.refresh();
+    const timer = setInterval(() => poller.refresh(), seconds * 1000);
+    return () => { clearInterval(timer); poller.stop(); };
+  }, [id, refreshSeconds, search, adapt]);
+}
diff --git a/dashboard/src/oven/runtime/oven-node-default-case.test.mjs b/dashboard/src/oven/runtime/oven-node-default-case.test.mjs
new file mode 100644
index 0000000..794c322
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-node-default-case.test.mjs
@@ -0,0 +1,84 @@
+import assert from "node:assert/strict";
+import { mkdtemp, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+
+const ovenNodePath = new URL("./OvenNode.tsx", import.meta.url).pathname;
+const reducerPath = new URL("./oven-reducer.ts", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("..", import.meta.url).pathname;
+
+const ir = {
+  contract: "test",
+  controls: [{ id: "mode", kind: "mode-toggle", initial: "one" }],
+  collections: [],
+  root: [],
+};
+
+const payload = { nonMatch: "NON_MATCH", def: "DEFAULT_BRANCH" };
+const item = (source) => ({
+  kind: "kpi-item",
+  attributes: { heading: "item", source },
+  bindings: {},
+  children: [],
+});
+
+const node = {
+  kind: "switch",
+  attributes: { modeFrom: "mode" },
+  children: [
+    {
+      kind: "case",
+      attributes: { value: "two" },
+      children: [item("/nonMatch")],
+    },
+    {
+      kind: "case",
+      attributes: { default: true },
+      children: [item("/def")],
+    },
+  ],
+};
+
+test("OvenNode switch renders a default case when no mode value matches", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".oven-node-default-case-test-"));
+  try {
+    const ovenNodeOutput = join(outputDir, "OvenNode.mjs");
+    const reducerOutput = join(outputDir, "oven-reducer.mjs");
+    const config = {
+      bundle: true,
+      format: "esm",
+      platform: "node",
+      alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath },
+      jsx: "automatic",
+      packages: "external",
+      target: "node18",
+    };
+    await Promise.all([
+      build({ ...config, entryPoints: [ovenNodePath], outfile: ovenNodeOutput }),
+      build({ ...config, entryPoints: [reducerPath], outfile: reducerOutput }),
+    ]);
+    const cacheKey = `?test=${Date.now()}`;
+    const [{ OvenNode }, { initOvenState }] = await Promise.all([
+      import(`${pathToFileURL(ovenNodeOutput).href}${cacheKey}`),
+      import(`${pathToFileURL(reducerOutput).href}${cacheKey}`),
+    ]);
+    const state = initOvenState(ir, payload);
+    const markup = renderToStaticMarkup(createElement(OvenNode, {
+      node,
+      ir,
+      state,
+      dispatch: () => {},
+    }));
+
+    assert.ok(markup.includes("DEFAULT_BRANCH"));
+    assert.ok(!markup.includes("NON_MATCH"));
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/oven-payload-metadata.ts b/dashboard/src/oven/runtime/oven-payload-metadata.ts
new file mode 100644
index 0000000..6740342
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-payload-metadata.ts
@@ -0,0 +1,69 @@
+const RUNTIME_METADATA_KEY = "__burnlistOvenRuntime";
+
+type RuntimeMetadata = {
+  collectionPages?: Record<string, unknown>;
+  frameDeltaMetrics?: unknown;
+};
+
+function record(value: unknown): Record<string, unknown> | undefined {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : undefined;
+}
+
+function metadata(payload: unknown): RuntimeMetadata | undefined {
+  const value = record(payload)?.[RUNTIME_METADATA_KEY];
+  return record(value) as RuntimeMetadata | undefined;
+}
+
+export function withDifferentialTestingEnvelope(payload: Record<string, unknown>, fieldPage: unknown, frameDeltaMetrics: unknown, hasFrameDeltaMetrics: boolean): Record<string, unknown> {
+  const page = record(fieldPage);
+  let next = payload;
+  if (page) {
+    next = { ...payload, fields: Array.isArray(page.fields) ? page.fields : [] };
+    const telemetry = record(payload.telemetry);
+    if (telemetry?.status === "comparable") {
+      next.telemetry = { ...telemetry, fields: Array.isArray(page.telemetryFields) ? page.telemetryFields : [] };
+    }
+  }
+  if (!page && !hasFrameDeltaMetrics) return next;
+  const prior = metadata(next);
+  return {
+    ...next,
+    [RUNTIME_METADATA_KEY]: {
+      ...prior,
+      ...(page ? { collectionPages: { ...prior?.collectionPages, "/fields": page } } : {}),
+      ...(hasFrameDeltaMetrics ? { frameDeltaMetrics } : {}),
+    },
+  };
+}
+
+export function runtimeCollectionPage(payload: unknown, source: unknown): Record<string, unknown> | undefined {
+  if (typeof source !== "string") return undefined;
+  return record(metadata(payload)?.collectionPages?.[source]);
+}
+
+export function runtimeFrameDeltaMetrics(payload: unknown): { present: boolean; value?: unknown } {
+  const value = metadata(payload);
+  return value && Object.hasOwn(value, "frameDeltaMetrics")
+    ? { present: true, value: value.frameDeltaMetrics }
+    : { present: false };
+}
+
+export function differentialExactPrefixFrameDeltaMetrics(payload: unknown, metrics: unknown): Record<string, unknown> | null {
+  const data = record(payload);
+  const metricData = record(metrics);
+  const ratios = metricData?.frameDeviationRatios;
+  const progress = data?.progress;
+  const latest = Array.isArray(progress) ? record(progress.at(-1)) : undefined;
+  const clearedFrame = Number(latest?.frame);
+  const frameCount = Number(latest?.frames);
+  if (!Array.isArray(ratios) || !Number.isSafeInteger(clearedFrame) || !Number.isSafeInteger(frameCount)
+    || frameCount !== ratios.length || clearedFrame < 0 || clearedFrame > frameCount
+    || ratios.some((value) => !Number.isFinite(Number(value)) || Number(value) < 0)) return null;
+  return {
+    ...metricData,
+    frameDeviationRatios: ratios.map((value, frame) => frame < clearedFrame ? 0 : Number(value)),
+    firstFailingFrame: clearedFrame < frameCount ? clearedFrame : -1,
+  };
+}
diff --git a/dashboard/src/oven/runtime/oven-reducer.test.ts b/dashboard/src/oven/runtime/oven-reducer.test.ts
new file mode 100644
index 0000000..db2a086
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-reducer.test.ts
@@ -0,0 +1,139 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { initOvenState, ovenReducer, type OvenIr } from "./oven-reducer";
+
+const ir: OvenIr = {
+  contract: "burnlist-differential-testing-data@1",
+  controls: [
+    { id: "mode", kind: "mode-toggle", initial: "a" }, { id: "search", kind: "search" },
+    { id: "sort", kind: "sort-toggle", key: "changed", initial: "on", requiresSource: "/available", requiresValue: true },
+    { id: "filter", kind: "filter-toggle", key: "non-pass", initial: "off" }, { id: "domain", kind: "domain-tabs", source: "/domains", initialSource: "/initial" },
+  ], collections: [{ id: "view", source: "/items", pageSize: 2, searchFrom: "search", sortFrom: "sort", filterFrom: "filter" }],
+  root: [{ kind: "mode-toggle", attributes: { id: "mode", initial: "a" }, children: [{ kind: "option", attributes: { value: "a" } }, { kind: "option", attributes: { value: "b" } }] }, { kind: "collection", attributes: { id: "view", source: "/items", pageSize: 2, searchFrom: "search", sortFrom: "sort", filterFrom: "filter" } }],
+};
+const payload = { available: true, domains: [{ id: "one" }, { id: "two" }], initial: "two", items: [1, 2, 3, 4, 5] };
+
+test("reducer initializes descriptors and resets only consuming collection controls", () => {
+  let state = initOvenState(ir, payload);
+  assert.deepEqual(state.controls, { mode: "a", search: "", sort: true, filter: false, domain: "two" });
+  state = ovenReducer(state, { type: "pageNext", collectionId: "view" }, ir);
+  state = ovenReducer(state, { type: "queryChanged", id: "search", query: "x" }, ir);
+  assert.equal(state.collections.view.pageIndex, 0);
+  state = ovenReducer(state, { type: "modeSelected", id: "mode", value: "b" }, ir);
+  state = ovenReducer(state, { type: "pageNext", collectionId: "view" }, ir);
+  assert.equal(state.collections.view.pageIndex, 1);
+  state = ovenReducer(state, { type: "toggleChanged", id: "filter", active: true }, ir);
+  assert.equal(state.collections.view.pageIndex, 0);
+  state = ovenReducer(state, { type: "pageSizeChanged", collectionId: "view", pageSize: 3 }, ir);
+  assert.deepEqual(state.collections.view, { pageIndex: 0, pageSize: 3 });
+});
+
+test("initial control seeds override valid defaults and ignore invalid values", () => {
+  const state = initOvenState(ir, payload, { mode: "b", filter: true, sort: false, domain: "one", unknown: true, search: true });
+  assert.deepEqual(state.controls, { mode: "b", search: "", sort: false, filter: true, domain: "one" });
+  const unavailable = initOvenState(ir, { ...payload, available: false }, { sort: true });
+  assert.equal(unavailable.controls.sort, false);
+});
+
+test("initial page seeds attach metadata only to matching collections", () => {
+  const page = { page: 1, pageSize: 25, pageCount: 3, total: 60 };
+  const pagedIr: OvenIr = { ...ir, collections: [{ ...ir.collections[0], paging: "auto" }] };
+  const state = initOvenState(pagedIr, { ...payload, available: false }, { sort: true }, { view: page, unknown: { page: 9, pageSize: 1, pageCount: 10, total: 10 } });
+  assert.deepEqual(state.collections.view, { pageIndex: 0, pageSize: 2, serverPage: page });
+  assert.notEqual(state.collections.view.serverPage, page);
+  assert.equal(state.collections.unknown, undefined);
+  assert.equal(state.controls.sort, true);
+  const accepted = ovenReducer(state, { type: "payloadAccepted", payload: { ...payload, available: false } }, pagedIr);
+  assert.equal(accepted.controls.sort, true);
+});
+
+test("payload acceptance clamps pages and retains valid controls while dropping unavailable values", () => {
+  let state = initOvenState(ir, payload);
+  state = ovenReducer(state, { type: "modeSelected", id: "mode", value: "b" }, ir);
+  state = ovenReducer(state, { type: "domainSelected", id: "domain", selectedId: "one" }, ir);
+  state = ovenReducer(state, { type: "pageNext", collectionId: "view" }, ir);
+  state = ovenReducer(state, { type: "payloadRequested" }, ir);
+  state = ovenReducer(state, { type: "payloadAccepted", generation: 1, payload: { available: false, domains: [{ id: "two" }], initial: "two", items: [1] } }, ir);
+  assert.equal(state.payloadRevision, 1);
+  assert.equal(state.controls.mode, "b");
+  assert.equal(state.controls.sort, false);
+  assert.equal(state.controls.domain, "two");
+  assert.equal(state.collections.view.pageIndex, 0);
+});
+
+test("direct payload acceptance updates a supplied runtime payload", () => {
+  const nextPayload = { available: false, domains: [{ id: "one" }], initial: "one", items: [1] };
+  const state = ovenReducer(initOvenState(ir, payload), { type: "payloadAccepted", payload: nextPayload }, ir);
+  assert.equal(state.payload, nextPayload);
+  assert.equal(state.payloadRevision, 1);
+});
+
+test("scenario selection is retained across every non-selection reducer action", () => {
+  const initial = initOvenState(ir, payload);
+  assert.equal(initial.scenario, undefined);
+  let state = ovenReducer(initial, { type: "scenarioSelected", scenarioId: "selected" }, ir);
+  assert.equal(state.scenario, "selected");
+  const actions = [
+    { type: "payloadRequested" } as const,
+    { type: "payloadAccepted", payload } as const,
+    { type: "payloadRejected", error: "offline", generation: 1 } as const,
+    { type: "modeSelected", id: "mode", value: "b" } as const,
+    { type: "queryChanged", id: "search", query: "x" } as const,
+    { type: "toggleChanged", id: "filter", active: true } as const,
+    { type: "domainSelected", id: "domain", selectedId: "one" } as const,
+    { type: "pagePrevious", collectionId: "view" } as const,
+    { type: "pageNext", collectionId: "view" } as const,
+    { type: "pageSizeChanged", collectionId: "view", pageSize: 3 } as const,
+    { type: "toggleExpanded", key: "position" } as const,
+  ];
+  for (const action of actions) {
+    state = ovenReducer(state, action, ir);
+    assert.equal(state.scenario, "selected", action.type);
+  }
+});
+
+test("reducer toggles independently expanded field keys with immutable sets", () => {
+  const initial = initOvenState(ir, payload);
+  const position = ovenReducer(initial, { type: "toggleExpanded", key: "position" }, ir);
+  assert.deepEqual([...position.expanded], ["position"]);
+  assert.notEqual(position.expanded, initial.expanded);
+  const multiple = ovenReducer(position, { type: "toggleExpanded", key: "active" }, ir);
+  assert.deepEqual([...multiple.expanded].sort(), ["active", "position"]);
+  const collapsed = ovenReducer(multiple, { type: "toggleExpanded", key: "position" }, ir);
+  assert.deepEqual([...collapsed.expanded], ["active"]);
+  assert.notEqual(collapsed.expanded, multiple.expanded);
+});
+
+test("non-expansion actions retain expanded fields", () => {
+  const expanded = new Set(["position"]);
+  const state = { ...initOvenState(ir, payload), expanded };
+  const actions = [
+    { type: "payloadRequested" } as const,
+    { type: "payloadAccepted", payload } as const,
+    { type: "payloadRejected", error: "offline", generation: 0 } as const,
+    { type: "modeSelected", id: "mode", value: "b" } as const,
+    { type: "queryChanged", id: "search", query: "x" } as const,
+    { type: "toggleChanged", id: "filter", active: true } as const,
+    { type: "domainSelected", id: "domain", selectedId: "one" } as const,
+    { type: "pagePrevious", collectionId: "view" } as const,
+    { type: "pageNext", collectionId: "view" } as const,
+    { type: "pageSizeChanged", collectionId: "view", pageSize: 3 } as const,
+  ];
+  for (const action of actions) assert.equal(ovenReducer(state, action, ir).expanded, expanded, action.type);
+});
+
+test("refresh permits one queued request, rejects stale responses, and keeps last good payload on failure", () => {
+  let state = initOvenState(ir, payload);
+  state = ovenReducer(state, { type: "payloadRequested" }, ir);
+  state = ovenReducer(state, { type: "payloadRequested" }, ir);
+  assert.equal(state.refresh.phase, "queued");
+  state = ovenReducer(state, { type: "payloadAccepted", generation: 0, payload: { bad: true } }, ir);
+  assert.equal(state.payload, payload);
+  state = ovenReducer(state, { type: "payloadAccepted", generation: 1, payload }, ir);
+  assert.equal(state.refresh.phase, "queued");
+  state = ovenReducer(state, { type: "payloadRequested" }, ir);
+  assert.deepEqual(state.refresh, { phase: "running", error: undefined, generation: 2 });
+  state = ovenReducer(state, { type: "payloadRejected", generation: 2, error: "offline" }, ir);
+  assert.equal(state.refresh.phase, "failed");
+  assert.equal(state.payload, payload);
+});
diff --git a/dashboard/src/oven/runtime/oven-reducer.ts b/dashboard/src/oven/runtime/oven-reducer.ts
new file mode 100644
index 0000000..e3dff35
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-reducer.ts
@@ -0,0 +1,197 @@
+import { resolvePointer } from "../utils/json-pointer";
+import { attachTransitionTelemetry, runCollection } from "./collection-pipeline";
+import { runtimeCollectionPage } from "./oven-payload-metadata";
+
+type Control = Record<string, unknown> & { id: string; kind: string };
+type Collection = Record<string, unknown> & { id: string; pageSize: number };
+type IrNode = { kind: string; attributes?: Record<string, unknown>; children?: IrNode[] };
+export type OvenIr = { contract: string; theme?: string; controls: Control[]; collections: Collection[]; root?: IrNode[] };
+export type RefreshPhase = "idle" | "loading" | "queued" | "running" | "failed";
+export type OvenServerPage = { page: number; pageSize: number; pageCount: number; total: number };
+export type OvenState = {
+  payload: unknown;
+  payloadRevision: number;
+  scenario?: string; // User request key; accepted payloads remain the selector display authority.
+  refresh: { phase: RefreshPhase; error: unknown; generation: number };
+  controls: Record<string, string | boolean>;
+  collections: Record<string, { pageIndex: number; pageSize: number; serverPage?: OvenServerPage }>;
+  expanded: ReadonlySet<string>;
+};
+export type OvenControlSeed = Record<string, string | boolean>;
+export type OvenPageSeed = Record<string, OvenServerPage>;
+export type OvenAction =
+  | { type: "payloadRequested" }
+  | { type: "payloadAccepted"; payload: unknown; generation?: number }
+  | { type: "payloadUnchanged"; generation: number }
+  | { type: "payloadRejected"; error: unknown; generation: number }
+  | { type: "scenarioSelected"; scenarioId: string }
+  | { type: "modeSelected"; id: string; value: string }
+  | { type: "queryChanged"; id: string; query: string }
+  | { type: "toggleChanged"; id: string; active: boolean }
+  | { type: "domainSelected"; id: string; selectedId: string }
+  | { type: "pagePrevious"; collectionId: string }
+  | { type: "pageNext"; collectionId: string }
+  | { type: "pageSizeChanged"; collectionId: string; pageSize: number }
+  | { type: "toggleExpanded"; key: string };
+
+function nodes(items: IrNode[] = []): IrNode[] {
+  return items.flatMap((node) => [node, ...nodes(node.children)]);
+}
+function attributes(ir: OvenIr, id: string): Record<string, unknown> {
+  return nodes(ir.root).find((node) => node.attributes?.id === id)?.attributes ?? {};
+}
+function descriptor(ir: OvenIr, control: Control | Collection): Record<string, unknown> {
+  return { ...attributes(ir, control.id), ...control };
+}
+function pageCount(length: unknown, size: number): number {
+  return Math.max(1, Math.ceil((Array.isArray(length) ? length.length : 0) / Math.max(1, size)));
+}
+function collectionItems(payload: unknown, collection: Record<string, unknown>): unknown[] {
+  const value = resolvePointer(payload, typeof collection.source === "string" ? collection.source : "/");
+  return Array.isArray(value) ? value : [];
+}
+function pipelineItems(ir: OvenIr, payload: unknown, controls: OvenState["controls"], collection: Record<string, unknown>): unknown[] {
+  const source = attachTransitionTelemetry(collectionItems(payload, collection), resolvePointer(payload, "/telemetry/fields"));
+  const search = typeof collection.searchFrom === "string" ? ir.controls.find((item) => item.id === collection.searchFrom) : undefined;
+  const filter = typeof collection.filterFrom === "string" ? ir.controls.find((item) => item.id === collection.filterFrom) : undefined;
+  const sort = typeof collection.sortFrom === "string" ? ir.controls.find((item) => item.id === collection.sortFrom) : undefined;
+  return runCollection(source, {
+    contract: ir.contract, query: search ? String(controls[search.id] ?? "") : "", matchFields: search?.matchFields as string | undefined,
+    filter: filter && controls[filter.id] === true ? { key: String(filter.key), active: true } : undefined,
+    sort: sort && controls[sort.id] === true ? { key: String(sort.key), active: true } : undefined,
+  }, resolvePointer);
+}
+function clamp(index: number, count: number): number { return Math.max(0, Math.min(index, count - 1)); }
+function active(value: unknown): boolean { return value === true || value === "on"; }
+function payloadServerPage(payload: unknown, collection: Record<string, unknown>): OvenServerPage | undefined {
+  const page = runtimeCollectionPage(payload, collection.source);
+  if (!page) return undefined;
+  const serverPage = {
+    page: Number(page.page),
+    pageSize: Number(page.pageSize),
+    pageCount: Number(page.pageCount),
+    total: Number(page.total),
+  };
+  return Number.isSafeInteger(serverPage.page) && serverPage.page >= 0
+    && Number.isSafeInteger(serverPage.pageSize) && serverPage.pageSize > 0
+    && Number.isSafeInteger(serverPage.pageCount) && serverPage.pageCount > 0
+    && Number.isSafeInteger(serverPage.total) && serverPage.total >= 0
+    ? serverPage
+    : undefined;
+}
+
+function domainValues(control: Record<string, unknown>, payload: unknown): string[] {
+  const source = typeof control.source === "string" ? resolvePointer(payload, control.source) : [];
+  if (!Array.isArray(source)) return [];
+  return source.map((value) => typeof value === "string" ? value : value && typeof value === "object" && typeof (value as Record<string, unknown>).id === "string" ? String((value as Record<string, unknown>).id) : undefined).filter((value): value is string => !!value);
+}
+function domainInitial(control: Record<string, unknown>, payload: unknown, values: string[]): string | undefined {
+  const candidate = typeof control.initialSource === "string" ? resolvePointer(payload, control.initialSource) : undefined;
+  const id = typeof candidate === "string" ? candidate : candidate && typeof candidate === "object" && typeof (candidate as Record<string, unknown>).id === "string" ? String((candidate as Record<string, unknown>).id) : undefined;
+  return id && values.includes(id) ? id : values[0];
+}
+function serverControlIds(ir: OvenIr, collections: OvenState["collections"]): Set<string> {
+  const ids = new Set<string>();
+  for (const item of ir.collections) {
+    const collection = descriptor(ir, item);
+    if (!collections[item.id]?.serverPage || (collection.paging !== "auto" && collection.paging !== "server")) continue;
+    for (const id of [collection.searchFrom, collection.sortFrom, collection.filterFrom]) {
+      if (typeof id === "string") ids.add(id);
+    }
+  }
+  return ids;
+}
+function normalizedControls(ir: OvenIr, payload: unknown, prior: OvenState["controls"] = {}, serverControls = new Set<string>()): OvenState["controls"] {
+  const next: OvenState["controls"] = {};
+  for (const item of ir.controls) {
+    const control = descriptor(ir, item);
+    if (control.kind === "search") next[item.id] = typeof prior[item.id] === "string" ? prior[item.id] : "";
+    else if (control.kind === "mode-toggle") {
+      const options = nodes(ir.root).filter((node) => node.kind === "mode-toggle" && node.attributes?.id === item.id).flatMap((node) => node.children ?? []).filter((node) => node.kind === "option").map((node) => String(node.attributes?.value));
+      if (options.length === 0 && Array.isArray(control.options)) options.push(...control.options.map((option) => typeof option === "string" ? option : String((option as Record<string, unknown>).value)));
+      const initial = typeof control.initial === "string" ? control.initial : options[0] ?? "";
+      next[item.id] = typeof prior[item.id] === "string" && (options.length === 0 || options.includes(String(prior[item.id]))) ? String(prior[item.id]) : initial;
+    } else if (control.kind === "domain-tabs") {
+      const values = domainValues(control, payload), previous = prior[item.id];
+      next[item.id] = typeof previous === "string" && values.includes(previous) ? previous : domainInitial(control, payload, values) ?? "";
+    } else {
+      const available = payload === undefined || typeof control.requiresSource !== "string" || resolvePointer(payload, control.requiresSource) === control.requiresValue;
+      const serverSeeded = serverControls.has(item.id) && typeof prior[item.id] === "boolean";
+      next[item.id] = serverSeeded ? prior[item.id] : available && typeof prior[item.id] === "boolean" ? prior[item.id] : available && active(control.initial);
+    }
+  }
+  return next;
+}
+function resetConsumers(state: OvenState, ir: OvenIr, controlId: string): OvenState["collections"] {
+  const next = { ...state.collections };
+  for (const item of ir.collections) {
+    const collection = descriptor(ir, item);
+    if ([collection.searchFrom, collection.sortFrom, collection.filterFrom].includes(controlId)) next[item.id] = { ...next[item.id], pageIndex: 0 };
+  }
+  return next;
+}
+
+export function initOvenState(ir: OvenIr, payload: unknown = undefined, controls: OvenControlSeed = {}, pages: OvenPageSeed = {}): OvenState {
+  const collections = Object.fromEntries(ir.collections.map((item) => {
+    const collection = descriptor(ir, item);
+    const page = pages[item.id] ?? payloadServerPage(payload, collection);
+    return [item.id, {
+      pageIndex: 0,
+      pageSize: Math.max(1, Number(collection.pageSize) || 1),
+      ...(page ? { serverPage: { ...page } } : {}),
+    }];
+  }));
+  return {
+    payload, payloadRevision: 0, scenario: undefined, refresh: { phase: "idle", error: undefined, generation: 0 },
+    controls: normalizedControls(ir, payload, controls, serverControlIds(ir, collections)),
+    collections,
+    expanded: new Set(),
+  };
+}
+
+/** Closed, pure oven interaction reducer. */
+export function ovenReducer(state: OvenState, action: OvenAction, ir: OvenIr): OvenState {
+  switch (action.type) {
+    case "payloadRequested":
+      if (state.refresh.phase === "loading" || state.refresh.phase === "running") return { ...state, refresh: { ...state.refresh, phase: "queued" } };
+      return { ...state, refresh: { phase: state.refresh.phase === "queued" ? "running" : "loading", error: undefined, generation: state.refresh.generation + 1 } };
+    case "payloadAccepted": {
+      if (action.generation !== undefined && action.generation !== state.refresh.generation) return state;
+      const controls = normalizedControls(ir, action.payload, state.controls, serverControlIds(ir, state.collections));
+      const collections = Object.fromEntries(ir.collections.map((item) => {
+        const collection = descriptor(ir, item), current = state.collections[item.id];
+        const serverPage = payloadServerPage(action.payload, collection);
+        const serverPaged = !!serverPage && (collection.paging === "auto" || collection.paging === "server");
+        return [item.id, {
+          ...current,
+          pageIndex: serverPaged ? serverPage.page : clamp(current.pageIndex, pageCount(pipelineItems(ir, action.payload, controls, collection), current.pageSize)),
+          pageSize: serverPaged ? serverPage.pageSize : current.pageSize,
+          ...(serverPage ? { serverPage } : {}),
+        }];
+      }));
+      return { ...state, payload: action.payload, payloadRevision: state.payloadRevision + 1, controls, collections, refresh: { ...state.refresh, phase: state.refresh.phase === "queued" ? "queued" : "idle", error: undefined } };
+    }
+    case "payloadUnchanged":
+      return action.generation !== state.refresh.generation ? state : { ...state, refresh: { ...state.refresh, phase: state.refresh.phase === "queued" ? "queued" : "idle", error: undefined } };
+    case "payloadRejected":
+      return action.generation !== state.refresh.generation ? state : { ...state, refresh: { ...state.refresh, phase: state.refresh.phase === "queued" ? "queued" : "failed", error: action.error } };
+    case "scenarioSelected": return { ...state, scenario: action.scenarioId };
+    case "modeSelected": return { ...state, controls: { ...state.controls, [action.id]: action.value } };
+    case "queryChanged": return { ...state, controls: { ...state.controls, [action.id]: action.query }, collections: resetConsumers(state, ir, action.id) };
+    case "toggleChanged": return { ...state, controls: { ...state.controls, [action.id]: action.active }, collections: resetConsumers(state, ir, action.id) };
+    case "domainSelected": return { ...state, controls: { ...state.controls, [action.id]: action.selectedId } };
+    case "pagePrevious": return { ...state, collections: { ...state.collections, [action.collectionId]: { ...state.collections[action.collectionId], pageIndex: Math.max(0, state.collections[action.collectionId].pageIndex - 1) } } };
+    case "pageNext": return { ...state, collections: { ...state.collections, [action.collectionId]: { ...state.collections[action.collectionId], pageIndex: state.collections[action.collectionId].pageIndex + 1 } } };
+    case "pageSizeChanged": return { ...state, collections: { ...state.collections, [action.collectionId]: { ...state.collections[action.collectionId], pageIndex: 0, pageSize: Math.max(1, action.pageSize) } } };
+    case "toggleExpanded": {
+      const expanded = new Set(state.expanded);
+      if (expanded.has(action.key)) expanded.delete(action.key);
+      else expanded.add(action.key);
+      return { ...state, expanded };
+    }
+    default: {
+      const exhaustive: never = action;
+      return exhaustive;
+    }
+  }
+}
diff --git a/dashboard/src/oven/runtime/oven-selectors.test.ts b/dashboard/src/oven/runtime/oven-selectors.test.ts
new file mode 100644
index 0000000..730c4e2
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-selectors.test.ts
@@ -0,0 +1,83 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { resolvePointer } from "../utils/json-pointer";
+import { initOvenState, type OvenIr } from "./oven-reducer";
+import { selectCollection, selectDomain, selectMode, selectRefreshStatus } from "./oven-selectors";
+
+const ir: OvenIr = { contract: "burnlist-differential-testing-data@1", controls: [{ id: "mode", kind: "mode-toggle", initial: "a" }, { id: "domain", kind: "domain-tabs", source: "/domains", initialSource: "/initial" }], collections: [{ id: "items", source: "/items", pageSize: 2 }], root: [] };
+const payload = { domains: ["north", "south"], initial: "south", items: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }] };
+
+test("selectors expose control and refresh state", () => {
+  const state = initOvenState(ir, payload);
+  assert.equal(selectMode(state, "mode"), "a");
+  assert.equal(selectDomain(state, "domain"), "south");
+  assert.deepEqual(selectRefreshStatus(state), { phase: "idle", error: undefined, generation: 0 });
+});
+
+test("collection selector supplies first, middle, and clamped last pages", () => {
+  const state = initOvenState(ir, payload);
+  assert.deepEqual(selectCollection(state, ir, "items", resolvePointer), { pageItems: [{ id: 1 }, { id: 2 }], pageIndex: 0, pageCount: 3, pageSize: 2, totalCount: 5 });
+  state.collections.items.pageIndex = 1;
+  assert.deepEqual(selectCollection(state, ir, "items", resolvePointer).pageItems, [{ id: 3 }, { id: 4 }]);
+  state.collections.items.pageIndex = 9;
+  state.payload = { ...payload, items: [{ id: 1 }, { id: 2 }, { id: 3 }] };
+  const result = selectCollection(state, ir, "items", resolvePointer);
+  assert.equal(result.pageIndex, 1);
+  assert.deepEqual(result.pageItems, [{ id: 3 }]);
+});
+
+test("auto and server paging return the supplied slice and metadata without a client pipeline", () => {
+  const pagedIr: OvenIr = {
+    contract: "burnlist-differential-testing-data@1",
+    controls: [{ id: "search", kind: "search" }],
+    collections: [
+      { id: "auto", source: "/items", pageSize: 2, paging: "auto", searchFrom: "search" },
+      { id: "server", source: "/items", pageSize: 2, paging: "server", searchFrom: "search" },
+    ],
+    root: [],
+  };
+  const pagedPayload = {
+    items: [{ id: "second", label: "Beta" }, { id: "first", label: "Alpha" }],
+    telemetry: { fields: [{ id: "first", failToPassCount: 1 }] },
+  };
+  const pages = {
+    auto: { page: 1, pageSize: 25, pageCount: 3, total: 60 },
+    server: { page: 2, pageSize: 10, pageCount: 4, total: 32 },
+  };
+  const state = initOvenState(pagedIr, pagedPayload, { search: "no match" }, pages);
+  assert.deepEqual(selectCollection(state, pagedIr, "auto", resolvePointer), {
+    pageItems: [
+      { id: "second", label: "Beta" },
+      { id: "first", label: "Alpha", transitionTelemetry: { id: "first", failToPassCount: 1 } },
+    ],
+    pageIndex: 1,
+    pageCount: 3,
+    pageSize: 25,
+    totalCount: 60,
+  });
+  assert.deepEqual(selectCollection(state, pagedIr, "server", resolvePointer), {
+    pageItems: [
+      { id: "second", label: "Beta" },
+      { id: "first", label: "Alpha", transitionTelemetry: { id: "first", failToPassCount: 1 } },
+    ],
+    pageIndex: 2,
+    pageCount: 4,
+    pageSize: 10,
+    totalCount: 32,
+  });
+});
+
+test("client paging ignores supplied server metadata", () => {
+  const clientIr: OvenIr = {
+    ...ir,
+    collections: [{ id: "items", source: "/items", pageSize: 2, paging: "client" }],
+  };
+  const state = initOvenState(clientIr, payload, {}, { items: { page: 1, pageSize: 25, pageCount: 1, total: 2 } });
+  assert.deepEqual(selectCollection(state, clientIr, "items", resolvePointer), {
+    pageItems: [{ id: 1 }, { id: 2 }],
+    pageIndex: 0,
+    pageCount: 3,
+    pageSize: 2,
+    totalCount: 5,
+  });
+});
diff --git a/dashboard/src/oven/runtime/oven-selectors.ts b/dashboard/src/oven/runtime/oven-selectors.ts
new file mode 100644
index 0000000..7f2b429
--- /dev/null
+++ b/dashboard/src/oven/runtime/oven-selectors.ts
@@ -0,0 +1,60 @@
+import { attachTransitionTelemetry, runCollection } from "./collection-pipeline";
+import type { OvenIr, OvenState } from "./oven-reducer";
+
+type Pointer = (payload: unknown, pointer: string) => unknown;
+type IrNode = { kind: string; attributes?: Record<string, unknown>; children?: IrNode[] };
+type Descriptor = Record<string, unknown> & { id: string };
+
+function nodes(items: IrNode[] = []): IrNode[] { return items.flatMap((node) => [node, ...nodes(node.children)]); }
+function attributes(ir: OvenIr, id: string): Record<string, unknown> {
+  return nodes(ir.root as IrNode[]).find((node) => node.attributes?.id === id)?.attributes ?? {};
+}
+function descriptor(ir: OvenIr, item: Descriptor): Descriptor { return { ...attributes(ir, item.id), ...item }; }
+function control(ir: OvenIr, id: unknown): Descriptor | undefined {
+  return typeof id === "string" ? ir.controls.find((item) => item.id === id) as Descriptor | undefined : undefined;
+}
+function pageCount(total: number, pageSize: number): number { return Math.max(1, Math.ceil(total / Math.max(1, pageSize))); }
+function activeControl(ir: OvenIr, state: OvenState, id: unknown): { key: string; active: boolean } | undefined {
+  const item = control(ir, id);
+  return item && typeof item.key === "string" ? { key: item.key, active: state.controls[item.id] === true } : undefined;
+}
+
+export function selectMode(state: OvenState, id: string): string | undefined {
+  const value = state.controls[id];
+  return typeof value === "string" ? value : undefined;
+}
+
+export function selectDomain(state: OvenState, id: string): string | undefined { return selectMode(state, id); }
+
+export function selectRefreshStatus(state: OvenState): OvenState["refresh"] { return state.refresh; }
+
+export function selectCollection(state: OvenState, ir: OvenIr, collectionId: string, resolvePointer: Pointer) {
+  const base = ir.collections.find((item) => item.id === collectionId);
+  if (!base) throw new Error(`Unknown collection: ${collectionId}`);
+  const collection = descriptor(ir, base as Descriptor);
+  const source = resolvePointer(state.payload, typeof collection.source === "string" ? collection.source : "/");
+  const items = attachTransitionTelemetry(Array.isArray(source) ? source : [], resolvePointer(state.payload, "/telemetry/fields"));
+  const current = state.collections[collectionId];
+  if (!current) throw new Error(`Missing collection state: ${collectionId}`);
+  const serverPage = current.serverPage;
+  if (serverPage && (collection.paging === "auto" || collection.paging === "server")) {
+    return {
+      pageItems: items,
+      pageIndex: serverPage.page,
+      pageCount: serverPage.pageCount,
+      pageSize: serverPage.pageSize,
+      totalCount: serverPage.total,
+    };
+  }
+  const search = control(ir, collection.searchFrom);
+  const query = search ? String(state.controls[search.id] ?? "") : "";
+  const visible = runCollection(items, {
+    query, matchFields: search?.matchFields as string | undefined,
+    filter: activeControl(ir, state, collection.filterFrom),
+    sort: activeControl(ir, state, collection.sortFrom), contract: ir.contract,
+  }, resolvePointer);
+  const count = pageCount(visible.length, current.pageSize);
+  const pageIndex = Math.max(0, Math.min(current.pageIndex, count - 1));
+  const start = pageIndex * current.pageSize;
+  return { pageItems: visible.slice(start, start + current.pageSize), pageIndex, pageCount: count, pageSize: current.pageSize, totalCount: visible.length };
+}
diff --git a/dashboard/src/oven/runtime/performance-tracing-oven-dom-golden.test.mjs b/dashboard/src/oven/runtime/performance-tracing-oven-dom-golden.test.mjs
new file mode 100644
index 0000000..c3413fa
--- /dev/null
+++ b/dashboard/src/oven/runtime/performance-tracing-oven-dom-golden.test.mjs
@@ -0,0 +1,62 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { pathToFileURL } from "node:url";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { performanceTracingPayload } from "../differential-testing-render/golden-harness.mjs";
+import { withDeterministicTime } from "../test-support/deterministic-time.mjs";
+
+const runtimePath = new URL("./OvenRuntime.tsx", import.meta.url).pathname;
+const adapterPath = new URL("../../lib/differential-testing-adapter.ts", import.meta.url).pathname;
+const normalizerPath = new URL("../test-support/dom-normalize.ts", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("..", import.meta.url).pathname;
+const states = [
+  { name: "pt-main" },
+  { name: "pt-progress", controls: { "value-mode": "current", "progress-mode": "progress" } },
+  { name: "pt-failed", controls: { "value-mode": "current", "progress-mode": "failed" } },
+];
+
+test("PT oven equals the frozen normalized DOM state", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".pt-oven-dom-golden-test-"));
+  try {
+    const runtimeOutput = join(outputDir, "OvenRuntime.mjs");
+    const adapterOutput = join(outputDir, "differential-testing-adapter.mjs");
+    const normalizerOutput = join(outputDir, "dom-normalize.mjs");
+    await Promise.all([
+      build({ entryPoints: [runtimePath], bundle: true, format: "esm", outfile: runtimeOutput, platform: "node", alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [adapterPath], bundle: true, format: "esm", outfile: adapterOutput, platform: "node", target: "node18" }),
+      build({ entryPoints: [normalizerPath], bundle: true, format: "esm", outfile: normalizerOutput, platform: "node", target: "node18" }),
+    ]);
+    const cacheKey = `?test=${Date.now()}`;
+    const [{ OvenRuntime }, { adaptDifferentialTesting }, { domEquivalent, normalize, parseHtml, serializeCanonical }] = await Promise.all([
+      import(`${pathToFileURL(runtimeOutput).href}${cacheKey}`),
+      import(`${pathToFileURL(adapterOutput).href}${cacheKey}`),
+      import(`${pathToFileURL(normalizerOutput).href}${cacheKey}`),
+    ]);
+    const source = await readFile("ovens/performance-tracing/performance-tracing.oven", "utf8");
+    const compiled = compileOven(source, { file: "ovens/performance-tracing/performance-tracing.oven" });
+    assert.equal(compiled.ok, true, compiled.ok ? "" : JSON.stringify(compiled.diagnostics));
+    if (!compiled.ok) return;
+    for (const state of states) {
+      const markup = withDeterministicTime(() => renderToStaticMarkup(createElement(OvenRuntime, {
+        ir: compiled.ir,
+        payload: adaptDifferentialTesting(performanceTracingPayload()),
+        controls: state.controls,
+      })));
+      const golden = await readFile(`dashboard/src/oven/differential-testing-render/goldens/${state.name}.html`, "utf8");
+      const actual = serializeCanonical(normalize(parseHtml(markup)));
+      const expected = serializeCanonical(normalize(parseHtml(golden)));
+      const comparison = domEquivalent(markup, golden);
+      assert.equal(comparison.equal, true, `${state.name}: ${comparison.message}`);
+      assert.equal(actual, expected, `${state.name} differs`);
+    }
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/predicate-sort-registry.ts b/dashboard/src/oven/runtime/predicate-sort-registry.ts
new file mode 100644
index 0000000..5d195a7
--- /dev/null
+++ b/dashboard/src/oven/runtime/predicate-sort-registry.ts
@@ -0,0 +1,64 @@
+type Item = Record<string, unknown>;
+export type Predicate = (item: Item) => boolean;
+export type Comparator = ((left: Item, right: Item) => number) & { include?: Predicate };
+
+type Registry<T> = Record<string, Record<string, T>>;
+
+function registry<T>(entries: Array<[string, string, T]>): Registry<T> {
+  const contracts: Record<string, Record<string, T>> = Object.create(null);
+  for (const [contract, key, value] of entries) {
+    const keys = contracts[contract] ?? (contracts[contract] = Object.create(null));
+    keys[key] = value;
+  }
+  for (const keys of Object.values(contracts)) Object.freeze(keys);
+  return Object.freeze(contracts);
+}
+
+function number(value: unknown): number {
+  const result = Number(value ?? 0);
+  return Number.isFinite(result) ? result : 0;
+}
+
+function telemetry(item: Item): Item | undefined {
+  const value = item.transitionTelemetry ?? item.telemetry;
+  return value && typeof value === "object" ? value as Item : undefined;
+}
+
+/** DT's renderer treats either failed or missing samples as non-passing. */
+const nonPass: Predicate = (item) => number(item.failedSampleCount) + number(item.missingSampleCount) > 0;
+
+/** DT's changed view orders transition volume, then net improvement, then source order. */
+const changed = ((left: Item, right: Item) => {
+  const leftTelemetry = telemetry(left), rightTelemetry = telemetry(right);
+  const leftChanged = number(leftTelemetry?.failToPassCount) + number(leftTelemetry?.passToFailCount);
+  const rightChanged = number(rightTelemetry?.failToPassCount) + number(rightTelemetry?.passToFailCount);
+  const leftImprovement = number(leftTelemetry?.failToPassCount) - number(leftTelemetry?.passToFailCount);
+  const rightImprovement = number(rightTelemetry?.failToPassCount) - number(rightTelemetry?.passToFailCount);
+  return rightChanged - leftChanged || rightImprovement - leftImprovement;
+}) as Comparator;
+changed.include = (item) => {
+  const value = telemetry(item);
+  return number(value?.failToPassCount) + number(value?.passToFailCount) > 0;
+};
+
+export const predicateRegistry = registry<Predicate>([
+  ["burnlist-differential-testing-data@1", "non-pass", nonPass],
+]);
+
+export const sortRegistry = registry<Comparator>([
+  ["burnlist-differential-testing-data@1", "changed", changed],
+]);
+
+function lookup<T>(source: Registry<T>, contract: string, key: string, kind: string): T {
+  const value = source[contract]?.[key];
+  if (!value) throw new Error(`Unknown ${kind}: (${contract}, ${key})`);
+  return value;
+}
+
+export function getPredicate(contract: string, key: string): Predicate {
+  return lookup(predicateRegistry, contract, key, "predicate");
+}
+
+export function getComparator(contract: string, key: string): Comparator {
+  return lookup(sortRegistry, contract, key, "sort");
+}
diff --git a/dashboard/src/oven/runtime/streaming-diff-oven-dom-golden.test.mjs b/dashboard/src/oven/runtime/streaming-diff-oven-dom-golden.test.mjs
new file mode 100644
index 0000000..2445b46
--- /dev/null
+++ b/dashboard/src/oven/runtime/streaming-diff-oven-dom-golden.test.mjs
@@ -0,0 +1,47 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { streamingDiffFixture } from "../../components/StreamingDiff/StreamingDiff.fixture.mjs";
+import { withDeterministicTime } from "../test-support/deterministic-time.mjs";
+
+const runtimePath = new URL("./OvenRuntime.tsx", import.meta.url).pathname;
+const adapterPath = new URL("../../lib/streaming-diff-oven-adapter.ts", import.meta.url).pathname;
+const normalizerPath = new URL("../test-support/dom-normalize.ts", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("..", import.meta.url).pathname;
+
+test("streaming-diff oven equals the frozen DOM golden", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".streaming-diff-oven-dom-golden-test-"));
+  try {
+    const runtimeOutput = join(outputDir, "OvenRuntime.mjs");
+    const adapterOutput = join(outputDir, "streaming-diff-oven-adapter.mjs");
+    const normalizerOutput = join(outputDir, "dom-normalize.mjs");
+    await Promise.all([
+      build({ entryPoints: [runtimePath], bundle: true, format: "esm", outfile: runtimeOutput, platform: "node", alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [adapterPath], bundle: true, format: "esm", outfile: adapterOutput, platform: "node", target: "node18" }),
+      build({ entryPoints: [normalizerPath], bundle: true, format: "esm", outfile: normalizerOutput, platform: "node", target: "node18" }),
+    ]);
+    const [{ OvenRuntime }, { adaptStreamingDiff }, { normalize, parseHtml, serializeCanonical }] = await Promise.all([
+      import(`${new URL(`file://${runtimeOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${adapterOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${normalizerOutput}`).href}?test=${Date.now()}`),
+    ]);
+    const source = await readFile("ovens/streaming-diff/streaming-diff.oven", "utf8");
+    const compiled = compileOven(source, { file: "ovens/streaming-diff/streaming-diff.oven" });
+    assert.equal(compiled.ok, true, compiled.ok ? "" : JSON.stringify(compiled.diagnostics));
+    if (!compiled.ok) return;
+
+    const markup = withDeterministicTime(() => renderToStaticMarkup(createElement(OvenRuntime, { ir: compiled.ir, payload: adaptStreamingDiff(streamingDiffFixture) })));
+    const actual = serializeCanonical(normalize(parseHtml(markup)));
+    const expected = (await readFile("dashboard/src/components/StreamingDiff/streaming-diff-dom.golden.html", "utf8")).trimEnd();
+    assert.equal(actual, expected);
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/theme-registry.ts b/dashboard/src/oven/runtime/theme-registry.ts
new file mode 100644
index 0000000..04f622a
--- /dev/null
+++ b/dashboard/src/oven/runtime/theme-registry.ts
@@ -0,0 +1,117 @@
+import type { JsonValue, OvenViewDef } from "../OvenView/types";
+import { checklistKpiItemClassName } from "../KpiItem/KpiItem";
+import { checklistKpiStripAriaLabel, checklistKpiStripClassName } from "../KpiStrip/KpiStrip";
+
+type ThemeComponentDefaults = Readonly<Record<string, Readonly<Record<string, JsonValue>>>>;
+type ThemeRegion = Readonly<{
+  kinds: readonly string[];
+  element: "section" | "div" | "fragment";
+  className?: string;
+  props?: Readonly<Record<string, JsonValue>>;
+}>;
+
+export type OvenTheme = Readonly<{
+  view: Pick<OvenViewDef, "shellClassName" | "bodyClassName" | "bodyId">;
+  components: ThemeComponentDefaults;
+  regions: readonly ThemeRegion[];
+  kpiItemVariants: Readonly<Record<string, string>>;
+  progressKpiClassName: string;
+  runtimeLayout?: "differential-testing";
+}>;
+
+const checklist: OvenTheme = Object.freeze({
+  view: Object.freeze({
+    shellClassName: "shell detail-view-shell driving-parity-view checklist-detail-shell",
+    bodyClassName: "detail-view",
+    bodyId: "burnlist-detail",
+  }),
+  components: Object.freeze({
+    "kpi-strip": Object.freeze({
+      ariaLabel: checklistKpiStripAriaLabel,
+      className: checklistKpiStripClassName,
+    }),
+    "kpi-item": Object.freeze({ className: checklistKpiItemClassName }),
+  }),
+  regions: Object.freeze([
+    Object.freeze({ kinds: Object.freeze(["kpi-strip"]), element: "section", className: "differential-overview checklist-overview" }),
+    Object.freeze({ kinds: Object.freeze(["checklist-ledger", "checklist-burn-panel"]), element: "div", className: "detail-workspace checklist-progress-workspace", props: Object.freeze({ "data-detail-tab": "dashboard" }) }),
+    Object.freeze({ kinds: Object.freeze(["checklist-event-cards"]), element: "fragment" }),
+  ]),
+  kpiItemVariants: Object.freeze({ current: "checklist-kpi-current" }),
+  progressKpiClassName: "driving-parity-kpi-progress",
+});
+
+const streamingDiff: OvenTheme = Object.freeze({
+  view: Object.freeze({}),
+  components: Object.freeze({}),
+  regions: Object.freeze([
+    Object.freeze({ kinds: Object.freeze(["streaming-diff-heading", "diff-card"]), element: "section", className: "streaming-diff-view" }),
+  ]),
+  kpiItemVariants: Object.freeze({}),
+  progressKpiClassName: "",
+});
+
+const visualParity: OvenTheme = Object.freeze({
+  view: Object.freeze({}),
+  components: Object.freeze({}),
+  regions: Object.freeze([
+    Object.freeze({ kinds: Object.freeze(["verdict-header", "domain-tabs", "metric-tiles", "domain-note", "frame-card"]), element: "section", className: "visual-parity-page" }),
+  ]),
+  kpiItemVariants: Object.freeze({}),
+  progressKpiClassName: "",
+});
+
+const differentialTesting: OvenTheme = Object.freeze({
+  view: Object.freeze({
+    shellClassName: "shell driving-parity-view",
+  }),
+  components: Object.freeze({
+    "kpi-strip": Object.freeze({
+      id: "driving-parity-kpi-strip",
+      ariaLabel: "Differential Testing field KPIs",
+      className: "driving-parity-kpi-strip has-burns",
+    }),
+    "kpi-item": Object.freeze({
+      className: "driving-parity-kpi-item driving-parity-kpi-section",
+    }),
+    "progress-donut": Object.freeze({
+      className: "driving-parity-kpi-gauge driving-parity-kpi-progress-donut",
+    }),
+    "progress-chart": Object.freeze({
+      hostOnly: true,
+      hostClassName: "chart",
+      hostRole: "img",
+      hostAriaLabel: "Completion percentage over time",
+    }),
+    "frame-delta-chart": Object.freeze({
+      hostOnly: true,
+      hostClassName: "chart",
+      hostRole: "img",
+      hostAriaLabel: "Completion percentage over time",
+    }),
+  }),
+  regions: Object.freeze([
+    Object.freeze({ kinds: Object.freeze(["refresh-status", "differential-kpi-strip"]), element: "section", className: "differential-overview", props: Object.freeze({ id: "differential-overview" }) }),
+    Object.freeze({ kinds: Object.freeze(["mode-toggle", "switch", "differential-log-table"]), element: "div", className: "detail-workspace", props: Object.freeze({ id: "detail-workspace", "data-detail-tab": "dashboard" }) }),
+    Object.freeze({ kinds: Object.freeze(["field-toolbar", "collection"]), element: "main", className: "driving-parity-page", props: Object.freeze({ id: "driving-parity-page" }) }),
+  ]),
+  kpiItemVariants: Object.freeze({
+    scenario: "driving-parity-kpi-scenario",
+    burns: "driving-parity-kpi-burns",
+    fields: "driving-parity-kpi-fields",
+    frames: "driving-parity-kpi-frames",
+  }),
+  progressKpiClassName: "driving-parity-kpi-progress",
+  runtimeLayout: "differential-testing",
+});
+
+const themes: Readonly<Record<string, OvenTheme>> = Object.freeze(Object.assign(Object.create(null), {
+  checklist,
+  "streaming-diff": streamingDiff,
+  "visual-parity": visualParity,
+  "differential-testing": differentialTesting,
+}));
+
+export function getOvenTheme(theme: unknown): OvenTheme | undefined {
+  return typeof theme === "string" ? themes[theme] : undefined;
+}
diff --git a/dashboard/src/oven/runtime/visual-parity-oven-dom-golden.test.mjs b/dashboard/src/oven/runtime/visual-parity-oven-dom-golden.test.mjs
new file mode 100644
index 0000000..352caaf
--- /dev/null
+++ b/dashboard/src/oven/runtime/visual-parity-oven-dom-golden.test.mjs
@@ -0,0 +1,57 @@
+import assert from "node:assert/strict";
+import { mkdtemp, readFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import test from "node:test";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { build } from "esbuild";
+import { compileOven } from "../../../../src/ovens/dsl/oven-compile.mjs";
+import { visualParityFixture } from "../../components/VisualParity/VisualParity.fixture.mjs";
+
+const runtimePath = new URL("./OvenRuntime.tsx", import.meta.url).pathname;
+const adapterPath = new URL("../../lib/visual-parity-oven-adapter.ts", import.meta.url).pathname;
+const normalizerPath = new URL("../test-support/dom-normalize.ts", import.meta.url).pathname;
+const sourceDir = new URL("../../", import.meta.url).pathname;
+const libPath = new URL("../../lib", import.meta.url).pathname;
+const ovenPath = new URL("..", import.meta.url).pathname;
+
+const states = [
+  { name: "target", id: "cars", golden: "dashboard/src/components/VisualParity/goldens/visual-parity-target.golden.html" },
+  { name: "context", id: "world", golden: "dashboard/src/components/VisualParity/goldens/visual-parity-context.golden.html" },
+];
+
+test("visual-parity oven equals the frozen DOM golden states", async () => {
+  const outputDir = await mkdtemp(join(process.cwd(), ".visual-parity-oven-dom-golden-test-"));
+  try {
+    const runtimeOutput = join(outputDir, "OvenRuntime.mjs");
+    const adapterOutput = join(outputDir, "visual-parity-oven-adapter.mjs");
+    const normalizerOutput = join(outputDir, "dom-normalize.mjs");
+    await Promise.all([
+      build({ entryPoints: [runtimePath], bundle: true, format: "esm", outfile: runtimeOutput, platform: "node", alias: { "@": sourceDir, "@lib": libPath, "@oven": ovenPath }, jsx: "automatic", packages: "external", target: "node18" }),
+      build({ entryPoints: [adapterPath], bundle: true, format: "esm", outfile: adapterOutput, platform: "node", alias: { "@lib": libPath }, target: "node18" }),
+      build({ entryPoints: [normalizerPath], bundle: true, format: "esm", outfile: normalizerOutput, platform: "node", target: "node18" }),
+    ]);
+    const [{ OvenRuntime }, { adaptVisualParity }, { normalize, parseHtml, serializeCanonical }] = await Promise.all([
+      import(`${new URL(`file://${runtimeOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${adapterOutput}`).href}?test=${Date.now()}`),
+      import(`${new URL(`file://${normalizerOutput}`).href}?test=${Date.now()}`),
+    ]);
+    const source = await readFile("ovens/visual-parity/visual-parity.oven", "utf8");
+    const compiled = compileOven(source, { file: "ovens/visual-parity/visual-parity.oven" });
+    assert.equal(compiled.ok, true, compiled.ok ? "" : JSON.stringify(compiled.diagnostics));
+    if (!compiled.ok) return;
+
+    for (const state of states) {
+      const markup = renderToStaticMarkup(createElement(OvenRuntime, {
+        ir: compiled.ir,
+        payload: adaptVisualParity(visualParityFixture),
+        controls: { "domain-select": state.id },
+      }));
+      const actual = serializeCanonical(normalize(parseHtml(markup)));
+      const expected = serializeCanonical(normalize(parseHtml((await readFile(state.golden, "utf8")).trimEnd())));
+      assert.equal(actual, expected, `${state.name} differs`);
+    }
+  } finally {
+    await rm(outputDir, { force: true, recursive: true });
+  }
+});
diff --git a/dashboard/src/oven/runtime/widget-adapters.tsx b/dashboard/src/oven/runtime/widget-adapters.tsx
new file mode 100644
index 0000000..577ceda
--- /dev/null
+++ b/dashboard/src/oven/runtime/widget-adapters.tsx
@@ -0,0 +1,64 @@
+import { HybridFieldList } from "../HybridFieldList/HybridFieldList";
+import { RefreshStatusChip } from "../RefreshStatusChip/RefreshStatusChip";
+import { ChecklistBurnPanel } from "../ChecklistBurnPanel/ChecklistBurnPanel";
+import { ChecklistEventCards } from "../ChecklistEventCards/ChecklistEventCards";
+import { ChecklistLedger } from "../ChecklistLedger/ChecklistLedger";
+import { DomainNote } from "../DomainNote";
+import { FrameCard } from "../FrameCard";
+import { MetricTiles } from "../MetricTiles";
+import { VerdictHeader } from "../VerdictHeader";
+import { formatRegistry } from "../OvenView/registries";
+import { resolvePointer } from "../utils/json-pointer";
+import type { OvenAction, OvenIr, OvenState } from "./oven-reducer";
+import { selectCollection, selectDomain, selectMode, selectRefreshStatus } from "./oven-selectors";
+
+type Node = { kind: string; attributes?: Record<string, unknown>; children?: Node[] };
+const attrs = (node: Node) => node.attributes ?? {};
+
+function nodes(items: Node[] = []): Node[] { return items.flatMap((item) => [item, ...nodes(item.children)]); }
+
+function collectionControlId(ir: OvenIr, collectionId: string, name: string): string {
+  const collection = nodes(ir.root as Node[] ?? []).find((item) => item.kind === "collection" && attrs(item).id === collectionId);
+  const value = collection ? attrs(collection)[name] : ir.collections.find((item) => item.id === collectionId)?.[name];
+  return typeof value === "string" ? value : "";
+}
+
+function bind(node: Node, prop: string, payload: unknown): unknown {
+  const child = (node.children ?? []).find((item) => item.kind === "bind" && item.attributes?.prop === prop);
+  if (!child || typeof child.attributes?.source !== "string") return undefined;
+  const format = formatRegistry[String(child.attributes.format ?? "identity")];
+  return format?.(resolvePointer(payload, child.attributes.source));
+}
+
+export function WidgetAdapter({ node, ir, state, dispatch }: { node: Node; ir: OvenIr; state: OvenState; dispatch: (action: OvenAction) => void }) {
+  if (node.kind === "refresh-status") return <RefreshStatusChip refresh={resolvePointer(state.payload, String(attrs(node).source ?? "/")) as { status?: string; error?: string }} clientStatus={selectRefreshStatus(state).phase} />;
+  if (node.kind === "field-list") {
+    const collectionId = String(attrs(node).collectionFrom ?? "");
+    const collection = selectCollection(state, ir, collectionId, resolvePointer);
+    const mode = selectMode(state, String(attrs(node).modeFrom ?? "")) ?? "current";
+    return <HybridFieldList fields={collection.pageItems as any[]} chartMode={mode} sort={state.controls[collectionControlId(ir, collectionId, "sortFrom")] === true ? "changed" : "default"}
+      expanded={state.expanded} onToggle={(id) => dispatch({ type: "toggleExpanded", key: id })}
+      telemetryByField={bind(node, "telemetryByField", state.payload) as any} telemetryAvailability={bind(node, "telemetryAvailability", state.payload) as any} />;
+  }
+  if (node.kind === "verdict-header") return <VerdictHeader targetPass={bind(node, "targetPass", state.payload) as boolean} framesCount={bind(node, "framesCount", state.payload) as number} error={bind(node, "error", state.payload) as string} />;
+  const selectionFrom = attrs(node).selectionFrom;
+  const selected = typeof selectionFrom === "string" ? selectDomain(state, selectionFrom) : undefined;
+  const source = attrs(node).source;
+  const bySelection = typeof source === "string" ? resolvePointer(state.payload, source) as Record<string, unknown> | undefined : undefined;
+  const scope = selected && bySelection ? bySelection[selected] : undefined;
+  if (node.kind === "metric-tiles") return <MetricTiles passed={bind(node, "passed", scope) as number} total={bind(node, "total", scope) as number} ratio={bind(node, "ratio", scope) as number} meanAbsoluteDelta={bind(node, "meanAbsoluteDelta", scope) as number} maximumAbsoluteDelta={bind(node, "maximumAbsoluteDelta", scope) as number} />;
+  if (node.kind === "domain-note") return <DomainNote isTarget={bind(node, "isTarget", scope) as boolean} rationale={bind(node, "rationale", scope) as string} />;
+  if (node.kind === "frame-card") {
+    const frames = scope && typeof scope === "object" && Array.isArray((scope as { frames?: unknown }).frames) ? (scope as { frames: Array<any> }).frames : [];
+    return <div className="visual-parity-frames">{frames.map((frame, index) => <FrameCard key={frame.frame ?? index} status={frame.status} frame={frame.frame} difference={frame.difference} images={frame.images} label={frame.label} />)}</div>;
+  }
+  return null;
+}
+
+export function ChecklistWidgetAdapter({ node, payload }: { node: Node; payload: unknown }) {
+  const data = resolvePointer(payload, String(attrs(node).source ?? "/")) as any;
+  if (node.kind === "checklist-burn-panel") return <ChecklistBurnPanel data={data} />;
+  if (node.kind === "checklist-ledger") return <ChecklistLedger data={data} />;
+  if (node.kind === "checklist-event-cards") return <ChecklistEventCards data={data} />;
+  return null;
+}
diff --git a/dashboard/src/oven/test-support/canvas-recorder.ts b/dashboard/src/oven/test-support/canvas-recorder.ts
new file mode 100644
index 0000000..9596c60
--- /dev/null
+++ b/dashboard/src/oven/test-support/canvas-recorder.ts
@@ -0,0 +1,34 @@
+import type { WaffleCanvasBox, WaffleCanvasContext, WaffleCanvasLike } from "../WaffleCanvas/waffle-canvas-paint";
+
+export type CanvasOperation =
+  | ["setTransform", number, number, number, number, number, number]
+  | ["clearRect", number, number, number, number]
+  | ["globalAlpha", number]
+  | ["fillStyle", string]
+  | ["fillRect", number, number, number, number];
+
+export function createRecordingCanvas(
+  box: WaffleCanvasBox,
+  dataset: { failedCells?: string; empty?: string },
+) {
+  const operations: CanvasOperation[] = [];
+  let globalAlpha = 1;
+  let fillStyle = "";
+  const context: WaffleCanvasContext = {
+    get globalAlpha() { return globalAlpha; },
+    set globalAlpha(value) { globalAlpha = value; operations.push(["globalAlpha", value]); },
+    get fillStyle() { return fillStyle; },
+    set fillStyle(value) { fillStyle = value; operations.push(["fillStyle", value]); },
+    setTransform(a, b, c, d, e, f) { operations.push(["setTransform", a, b, c, d, e, f]); },
+    clearRect(x, y, width, height) { operations.push(["clearRect", x, y, width, height]); },
+    fillRect(x, y, width, height) { operations.push(["fillRect", x, y, width, height]); },
+  };
+  const canvas: WaffleCanvasLike = {
+    dataset,
+    style: { transform: "" },
+    width: 0,
+    height: 0,
+    getContext: () => context,
+  };
+  return { box, canvas, context, operations };
+}
diff --git a/dashboard/src/oven/test-support/deterministic-time.mjs b/dashboard/src/oven/test-support/deterministic-time.mjs
new file mode 100644
index 0000000..d49f415
--- /dev/null
+++ b/dashboard/src/oven/test-support/deterministic-time.mjs
@@ -0,0 +1,36 @@
+const FIXED_NOW = Date.parse("2026-01-01T12:30:00.000Z");
+
+export function withDeterministicTime(fn) {
+  const previousTz = process.env.TZ;
+  const previousDateNow = Date.now;
+  const OriginalDTF = globalThis.Intl.DateTimeFormat;
+  const originalToLocaleString = Date.prototype.toLocaleString;
+  const originalToLocaleTimeString = Date.prototype.toLocaleTimeString;
+  const originalToLocaleDateString = Date.prototype.toLocaleDateString;
+  const Shim = function DateTimeFormat(locales, options) {
+    return new OriginalDTF(locales == null ? "en-US" : locales, { timeZone: "UTC", ...(options || {}) });
+  };
+  const withUtc = (original) => function toLocaleDate(locales, options) {
+    return original.call(this, locales == null ? "en-US" : locales, { timeZone: "UTC", ...(options || {}) });
+  };
+
+  Shim.prototype = OriginalDTF.prototype;
+  Object.setPrototypeOf(Shim, OriginalDTF);
+  process.env.TZ = "UTC";
+  Date.now = () => FIXED_NOW;
+  globalThis.Intl.DateTimeFormat = Shim;
+  Date.prototype.toLocaleString = withUtc(originalToLocaleString);
+  Date.prototype.toLocaleTimeString = withUtc(originalToLocaleTimeString);
+  Date.prototype.toLocaleDateString = withUtc(originalToLocaleDateString);
+  try {
+    return fn();
+  } finally {
+    globalThis.Intl.DateTimeFormat = OriginalDTF;
+    Date.prototype.toLocaleString = originalToLocaleString;
+    Date.prototype.toLocaleTimeString = originalToLocaleTimeString;
+    Date.prototype.toLocaleDateString = originalToLocaleDateString;
+    Date.now = previousDateNow;
+    if (previousTz === undefined) delete process.env.TZ;
+    else process.env.TZ = previousTz;
+  }
+}
diff --git a/dashboard/src/oven/test-support/dom-normalize.ts b/dashboard/src/oven/test-support/dom-normalize.ts
new file mode 100644
index 0000000..582acc2
--- /dev/null
+++ b/dashboard/src/oven/test-support/dom-normalize.ts
@@ -0,0 +1,298 @@
+export type ElementNode = {
+  type: "element";
+  tag: string;
+  attrs: Record<string, string>;
+  children: Node[];
+};
+
+export type TextNode = {
+  type: "text";
+  value: string;
+};
+
+export type Node = ElementNode | TextNode;
+
+const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]);
+
+function isWhitespace(value: string): boolean {
+  return /\s/u.test(value);
+}
+
+export function decodeEntities(value: string): string {
+  return value.replace(/&(?:amp|lt|gt|quot|#39|apos);|&#(?:x[0-9a-fA-F]+|X[0-9a-fA-F]+|\d+);/gu, (entity) => {
+    switch (entity) {
+      case "&amp;": return "&";
+      case "&lt;": return "<";
+      case "&gt;": return ">";
+      case "&quot;": return '"';
+      case "&#39;":
+      case "&apos;": return "'";
+      default: {
+        const digits = entity.startsWith("&#x") || entity.startsWith("&#X") ? entity.slice(3, -1) : entity.slice(2, -1);
+        const codePoint = Number.parseInt(digits, entity[2].toLowerCase() === "x" ? 16 : 10);
+        return codePoint <= 0x10FFFF ? String.fromCodePoint(codePoint) : entity;
+      }
+    }
+  });
+}
+
+function findTagEnd(html: string, start: number): number {
+  let quote = "";
+  for (let index = start; index < html.length; index += 1) {
+    const character = html[index];
+    if (quote) {
+      if (character === quote) quote = "";
+    } else if (character === "\"" || character === "'") {
+      quote = character;
+    } else if (character === ">") {
+      return index;
+    }
+  }
+  return -1;
+}
+
+function parseOpenTag(source: string): { tag: string; attrs: Record<string, string>; selfClosing: boolean } | null {
+  let cursor = 0;
+  while (cursor < source.length && isWhitespace(source[cursor])) cursor += 1;
+  const tagStart = cursor;
+  while (cursor < source.length && !isWhitespace(source[cursor]) && source[cursor] !== "/") cursor += 1;
+  const tag = source.slice(tagStart, cursor);
+  if (!tag) return null;
+
+  const attrs: Record<string, string> = {};
+  let selfClosing = false;
+  while (cursor < source.length) {
+    while (cursor < source.length && isWhitespace(source[cursor])) cursor += 1;
+    if (cursor >= source.length) break;
+    if (source[cursor] === "/") {
+      selfClosing = true;
+      cursor += 1;
+      continue;
+    }
+
+    const nameStart = cursor;
+    while (cursor < source.length && !isWhitespace(source[cursor]) && !"=/>".includes(source[cursor])) cursor += 1;
+    const name = source.slice(nameStart, cursor);
+    if (!name) {
+      cursor += 1;
+      continue;
+    }
+    while (cursor < source.length && isWhitespace(source[cursor])) cursor += 1;
+
+    let value = "";
+    if (source[cursor] === "=") {
+      cursor += 1;
+      while (cursor < source.length && isWhitespace(source[cursor])) cursor += 1;
+      const quote = source[cursor];
+      if (quote === "\"" || quote === "'") {
+        cursor += 1;
+        const valueStart = cursor;
+        while (cursor < source.length && source[cursor] !== quote) cursor += 1;
+        value = source.slice(valueStart, cursor);
+        if (cursor < source.length) cursor += 1;
+      } else {
+        const valueStart = cursor;
+        while (cursor < source.length && !isWhitespace(source[cursor]) && source[cursor] !== ">") {
+          if (source[cursor] === "/" && source[cursor + 1] === undefined) break;
+          cursor += 1;
+        }
+        value = source.slice(valueStart, cursor);
+      }
+    }
+    if (!(name in attrs)) attrs[name] = value;
+  }
+
+  return { tag, attrs, selfClosing };
+}
+
+function appendNode(roots: Node[], stack: ElementNode[], node: Node): void {
+  const parent = stack[stack.length - 1];
+  if (parent) parent.children.push(node);
+  else roots.push(node);
+}
+
+export function parseHtml(html: string): Node[] {
+  const roots: Node[] = [];
+  const stack: ElementNode[] = [];
+  let cursor = 0;
+
+  while (cursor < html.length) {
+    const open = html.indexOf("<", cursor);
+    if (open < 0) {
+      if (cursor < html.length) appendNode(roots, stack, { type: "text", value: html.slice(cursor) });
+      break;
+    }
+    if (open > cursor) appendNode(roots, stack, { type: "text", value: html.slice(cursor, open) });
+
+    if (html.startsWith("<!--", open)) {
+      const commentEnd = html.indexOf("-->", open + 4);
+      cursor = commentEnd < 0 ? html.length : commentEnd + 3;
+      continue;
+    }
+
+    const tagEnd = findTagEnd(html, open + 1);
+    if (tagEnd < 0) {
+      appendNode(roots, stack, { type: "text", value: html.slice(open) });
+      break;
+    }
+    const source = html.slice(open + 1, tagEnd);
+    if (source.trimStart().startsWith("!")) {
+      cursor = tagEnd + 1;
+      continue;
+    }
+    if (source.trimStart().startsWith("/")) {
+      const closingTag = source.trim().slice(1).trim().split(/\s/u)[0];
+      if (closingTag) {
+        for (let index = stack.length - 1; index >= 0; index -= 1) {
+          if (stack[index].tag.toLowerCase() === closingTag.toLowerCase()) {
+            stack.length = index;
+            break;
+          }
+        }
+      }
+      cursor = tagEnd + 1;
+      continue;
+    }
+
+    const parsed = parseOpenTag(source);
+    if (!parsed) {
+      appendNode(roots, stack, { type: "text", value: html.slice(open, tagEnd + 1) });
+      cursor = tagEnd + 1;
+      continue;
+    }
+    const node: ElementNode = { type: "element", tag: parsed.tag, attrs: parsed.attrs, children: [] };
+    appendNode(roots, stack, node);
+    if (!parsed.selfClosing && !VOID_ELEMENTS.has(parsed.tag.toLowerCase())) stack.push(node);
+    cursor = tagEnd + 1;
+  }
+
+  return roots;
+}
+
+export function normalize(nodes: Node[]): Node[] {
+  const normalized: Node[] = [];
+  for (const node of nodes) {
+    if (node.type === "text") {
+      const value = decodeEntities(node.value).replace(/\s+/gu, " ").trim();
+      if (value) normalized.push({ type: "text", value });
+      continue;
+    }
+    normalized.push({
+      type: "element",
+      tag: node.tag,
+      attrs: Object.fromEntries(Object.entries(node.attrs).map(([name, value]) => [name, decodeEntities(value)])),
+      children: normalize(node.children),
+    });
+  }
+  return normalized;
+}
+
+function serializeNode(node: Node): string {
+  if (node.type === "text") return node.value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+  const attrs = Object.keys(node.attrs)
+    .sort()
+    .map((name) => `${name}="${node.attrs[name].replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;")}"`)
+    .join(" ");
+  const opening = attrs ? `<${node.tag} ${attrs}>` : `<${node.tag}>`;
+  return `${opening}${serializeCanonical(node.children)}</${node.tag}>`;
+}
+
+export function serializeCanonical(nodes: Node[]): string {
+  return nodes.map(serializeNode).join("");
+}
+
+function truncated(value: string): string {
+  const limit = 280;
+  return value.length <= limit ? value : `${value.slice(0, limit)}…`;
+}
+
+function nodeSource(node: Node | undefined): string {
+  return node ? truncated(serializeCanonical([node])) : "<missing>";
+}
+
+function mismatch(path: string, actual: Node | undefined, expected: Node | undefined): { equal: false; message: string } {
+  return {
+    equal: false,
+    message: `DOM differs at ${path}: actual ${nodeSource(actual)}; expected ${nodeSource(expected)}`,
+  };
+}
+
+function compareNodes(actual: Node | undefined, expected: Node | undefined, path: string): { equal: true } | { equal: false; message: string } {
+  if (!actual || !expected) return mismatch(path, actual, expected);
+  if (actual.type !== expected.type) return mismatch(path, actual, expected);
+  if (actual.type === "text" && expected.type === "text") {
+    return actual.value === expected.value ? { equal: true } : mismatch(path, actual, expected);
+  }
+  if (actual.tag !== expected.tag) return mismatch(path, actual, expected);
+
+  const actualAttrs = Object.keys(actual.attrs).sort();
+  const expectedAttrs = Object.keys(expected.attrs).sort();
+  if (actualAttrs.length !== expectedAttrs.length || actualAttrs.some((name, index) => name !== expectedAttrs[index] || actual.attrs[name] !== expected.attrs[name])) {
+    return mismatch(path, actual, expected);
+  }
+  if (actual.children.length !== expected.children.length) {
+    const childIndex = Math.min(actual.children.length, expected.children.length);
+    return mismatch(`${path}/children[${childIndex}]`, actual.children[childIndex], expected.children[childIndex]);
+  }
+  for (let index = 0; index < actual.children.length; index += 1) {
+    const result = compareNodes(actual.children[index], expected.children[index], `${path}/children[${index}]`);
+    if (!result.equal) return result;
+  }
+  return { equal: true };
+}
+
+export function domEquivalent(a: string, b: string): { equal: boolean; message?: string } {
+  const actual = normalize(parseHtml(a));
+  const expected = normalize(parseHtml(b));
+  if (actual.length !== expected.length) {
+    const index = Math.min(actual.length, expected.length);
+    return mismatch(`root[${index}]`, actual[index], expected[index]);
+  }
+  for (let index = 0; index < actual.length; index += 1) {
+    const result = compareNodes(actual[index], expected[index], `root[${index}]`);
+    if (!result.equal) return result;
+  }
+  return { equal: true };
+}
+
+export function assertDomEquivalent(actualHtml: string, expectedHtml: string, message?: string): void {
+  const result = domEquivalent(actualHtml, expectedHtml);
+  if (!result.equal) throw new Error(`${message ? `${message}: ` : ""}${result.message ?? "DOM is not equivalent"}`);
+}
+
+function findElement(nodes: Node[], predicate: (node: ElementNode) => boolean): ElementNode | undefined {
+  for (const node of nodes) {
+    if (node.type !== "element") continue;
+    if (predicate(node)) return node;
+    const descendant = findElement(node.children, predicate);
+    if (descendant) return descendant;
+  }
+  return undefined;
+}
+
+export function extractById(html: string, id: string): string {
+  const node = findElement(normalize(parseHtml(html)), (candidate) => candidate.attrs.id === id);
+  if (!node) throw new Error(`Element with id "${id}" was not found`);
+  return serializeCanonical([node]);
+}
+
+export function extractFirstByClass(html: string, className: string): string {
+  const node = findElement(normalize(parseHtml(html)), (candidate) => (candidate.attrs.class ?? "").split(/\s+/u).includes(className));
+  if (!node) throw new Error(`Element with class "${className}" was not found`);
+  return serializeCanonical([node]);
+}
diff --git a/dashboard/src/oven/test-support/generate-progress-chart-goldens.mjs b/dashboard/src/oven/test-support/generate-progress-chart-goldens.mjs
new file mode 100644
index 0000000..1fc2286
--- /dev/null
+++ b/dashboard/src/oven/test-support/generate-progress-chart-goldens.mjs
@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { mkdirSync, mkdtempSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath, pathToFileURL } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(here, "../../../..");
+const outputDir = resolve(here, "../DifferentialProgressChart/goldens");
+const bundleDir = mkdtempSync(resolve(tmpdir(), "burnlist-progress-chart-"));
+const shimPath = resolve(here, "svg-dom-shim.ts");
+const batteryPath = resolve(here, "../DifferentialProgressChart/progress-chart-battery.ts");
+
+function runtimeModule(sourcePath, outputName) {
+  const source = readFileSync(sourcePath, "utf8").replaceAll(
+    'from "../../../../ovens/',
+    `from "${pathToFileURL(resolve(repoRoot, "ovens")).href}/`,
+  );
+  const outputPath = resolve(bundleDir, outputName);
+  writeFileSync(outputPath, source, "utf8");
+  return `${pathToFileURL(outputPath).href}?${Date.now()}`;
+}
+
+try {
+  mkdirSync(outputDir, { recursive: true });
+  const { captureVanillaChartSvg } = await import(runtimeModule(shimPath, "svg-dom-shim.mjs"));
+  const { progressChartGoldenCases } = await import(runtimeModule(batteryPath, "progress-chart-battery.mjs"));
+  for (const chartCase of progressChartGoldenCases) {
+    const target = resolve(outputDir, chartCase.filename);
+    const temporary = `${target}.tmp-${process.pid}`;
+    writeFileSync(temporary, `${captureVanillaChartSvg(chartCase)}\n`, "utf8");
+    renameSync(temporary, target);
+  }
+} finally {
+  rmSync(bundleDir, { force: true, recursive: true });
+}
diff --git a/dashboard/src/oven/test-support/run-oven-tests.mjs b/dashboard/src/oven/test-support/run-oven-tests.mjs
new file mode 100644
index 0000000..407cb85
--- /dev/null
+++ b/dashboard/src/oven/test-support/run-oven-tests.mjs
@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+import { spawnSync } from "node:child_process";
+import { mkdtempSync, readdirSync, rmSync } from "node:fs";
+import { dirname, isAbsolute, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { build } from "esbuild";
+import { compileOvenIrForJsonPath } from "../../../oven-ir-compile.mjs";
+
+const testSupportDir = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(testSupportDir, "../../../..");
+const sourceDir = resolve(testSupportDir, "../..");
+const ovenDir = resolve(sourceDir, "oven");
+
+const alias = {
+  "@": sourceDir,
+  "@layout": resolve(sourceDir, "layout"),
+  "@components": resolve(sourceDir, "components"),
+  "@hooks": resolve(sourceDir, "hooks"),
+  "@lib": resolve(sourceDir, "lib"),
+  "@oven": ovenDir,
+};
+
+const ovenIrPlugin = {
+  name: "oven-ir",
+  setup(buildContext) {
+    buildContext.onResolve({ filter: /\.ir\.json$/ }, (args) => ({
+      path: isAbsolute(args.path) ? args.path : resolve(args.resolveDir, args.path),
+      namespace: "oven-ir",
+    }));
+    buildContext.onLoad({ filter: /.*/, namespace: "oven-ir" }, (args) => ({
+      contents: JSON.stringify(compileOvenIrForJsonPath(args.path)),
+      loader: "json",
+    }));
+  },
+};
+
+function discoverTests(directory) {
+  const files = [];
+  const entries = readdirSync(directory, { withFileTypes: true }).sort((left, right) => left.name.localeCompare(right.name));
+  for (const entry of entries) {
+    const filePath = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      if (filePath !== testSupportDir) files.push(...discoverTests(filePath));
+    } else if (entry.isFile() && entry.name.endsWith(".test.ts")) {
+      files.push(filePath);
+    }
+  }
+  return files;
+}
+
+function discoverBundledTests(directory) {
+  const files = [];
+  for (const entry of readdirSync(directory, { withFileTypes: true })) {
+    const filePath = join(directory, entry.name);
+    if (entry.isDirectory()) files.push(...discoverBundledTests(filePath));
+    else if (entry.isFile() && entry.name.endsWith(".test.mjs")) files.push(filePath);
+  }
+  return files.sort();
+}
+
+const testEntries = discoverTests(ovenDir);
+console.log(`=== Oven TypeScript tests (${testEntries.length}) ===`);
+
+if (testEntries.length === 0) process.exit(0);
+
+const outputDir = mkdtempSync(join(repoRoot, ".oven-test-"));
+let status = 0;
+try {
+  await build({
+    entryPoints: testEntries,
+    bundle: true,
+    format: "esm",
+    platform: "node",
+    target: "node18",
+    jsx: "automatic",
+    packages: "external",
+    sourcemap: "inline",
+    outdir: outputDir,
+    outbase: ovenDir,
+    entryNames: "[dir]/[name]",
+    outExtension: { ".js": ".mjs" },
+    alias,
+    plugins: [ovenIrPlugin],
+  });
+
+  const bundledTests = discoverBundledTests(outputDir);
+  const result = spawnSync(process.execPath, ["--test", ...bundledTests], { stdio: "inherit" });
+  status = result.status ?? 1;
+} catch (error) {
+  console.error("Oven TypeScript test harness failed.");
+  console.error(error);
+  status = 1;
+} finally {
+  rmSync(outputDir, { force: true, recursive: true });
+}
+
+process.exit(status);
diff --git a/dashboard/src/oven/test-support/svg-dom-shim.ts b/dashboard/src/oven/test-support/svg-dom-shim.ts
new file mode 100644
index 0000000..86cb0c4
--- /dev/null
+++ b/dashboard/src/oven/test-support/svg-dom-shim.ts
@@ -0,0 +1,143 @@
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+export const FROZEN_CHART_NOW = 1_700_000_000_000;
+
+class SvgText {
+  constructor(value) { this.value = value; this.nodeName = "#text"; this.parentElement = null; }
+}
+
+function datasetAttribute(key) { return `data-${key.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`)}`; }
+function escapeText(value) { return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;"); }
+function escapeAttribute(value) { return escapeText(value).replaceAll('"', "&quot;"); }
+
+/** A deliberately tiny DOM surface for the imperative vanilla SVG renderers. */
+export class SvgElement {
+  constructor(namespaceURI, tagName) {
+    this.namespaceURI = namespaceURI;
+    this.tagName = tagName;
+    this.nodeName = tagName;
+    this.children = [];
+    this.childNodes = [];
+    this.parentElement = null;
+    this.attributes = new Map();
+    this.dataset = new Proxy({}, {
+      get: (_target, key) => typeof key === "string" ? this.getAttribute(datasetAttribute(key)) : undefined,
+      set: (_target, key, value) => {
+        if (typeof key === "string") this.setAttribute(datasetAttribute(key), String(value));
+        return true;
+      },
+      deleteProperty: (_target, key) => {
+        if (typeof key === "string") this.removeAttribute(datasetAttribute(key));
+        return true;
+      },
+    });
+    this.style = new Proxy({}, {
+      get: (_target, key) => typeof key === "string" ? this.styleValue(key) : undefined,
+      set: (_target, key, value) => {
+        if (typeof key === "string") this.setStyle(key, String(value));
+        return true;
+      },
+    });
+    this.classList = {
+      add: (...names) => this.setClasses(new Set([...this.classNames(), ...names])),
+      remove: (...names) => this.setClasses(new Set([...this.classNames()].filter((name) => !names.includes(name)))),
+      toggle: (name, force) => {
+        const names = this.classNames();
+        const enabled = force === undefined ? !names.has(name) : force;
+        if (enabled) names.add(name); else names.delete(name);
+        this.setClasses(names);
+        return enabled;
+      },
+      contains: (name) => this.classNames().has(name),
+    };
+  }
+
+  get id() { return this.getAttribute("id") ?? ""; }
+  set id(value) { this.setAttribute("id", value); }
+  get clientWidth() { return 0; }
+  get clientHeight() { return 0; }
+  get childElementCount() { return this.children.length; }
+  get textContent() { return this.childNodes.map((child) => child instanceof SvgText ? child.value : child.textContent).join(""); }
+  set textContent(value) { this.replaceChildren(String(value)); }
+  setAttribute(name, value) { this.attributes.set(name, String(value)); }
+  getAttribute(name) { return this.attributes.get(name) ?? null; }
+  removeAttribute(name) { this.attributes.delete(name); }
+  getBoundingClientRect() { return { width: 0, height: 0, top: 0, left: 0, right: 0, bottom: 0 }; }
+  append(...nodes) { nodes.forEach((node) => this.appendChild(node)); }
+  appendChild(node) {
+    const child = typeof node === "string" ? new SvgText(node) : node;
+    child.parentElement = this;
+    this.childNodes.push(child);
+    if (child instanceof SvgElement) this.children.push(child);
+    return child;
+  }
+  insertBefore(node, reference) {
+    if (!reference) return this.appendChild(node);
+    const child = typeof node === "string" ? new SvgText(node) : node;
+    const nodeIndex = this.childNodes.indexOf(reference);
+    if (nodeIndex < 0) return this.appendChild(child);
+    child.parentElement = this;
+    this.childNodes.splice(nodeIndex, 0, child);
+    if (child instanceof SvgElement) {
+      const elementIndex = this.children.indexOf(reference);
+      this.children.splice(elementIndex < 0 ? this.children.length : elementIndex, 0, child);
+    }
+    return child;
+  }
+  replaceChildren(...nodes) { this.childNodes.length = 0; this.children.length = 0; this.append(...nodes); }
+  querySelector(selector) {
+    const classes = selector.split(",").map((part) => part.trim()).filter((part) => part.startsWith(".")).map((part) => part.slice(1));
+    const visit = (element) => {
+      for (const child of element.children) {
+        if (classes.some((name) => child.classList.contains(name))) return child;
+        const descendant = visit(child);
+        if (descendant) return descendant;
+      }
+      return null;
+    };
+    return visit(this);
+  }
+  serializedAttributes() { return [...this.attributes.entries()].sort(([left], [right]) => left.localeCompare(right)); }
+  classNames() { return new Set((this.getAttribute("class") ?? "").split(/\s+/u).filter(Boolean)); }
+  setClasses(names) {
+    const value = [...names].join(" ");
+    if (value) this.setAttribute("class", value); else this.removeAttribute("class");
+  }
+  styleValue(key) { return (this.getAttribute("style") ?? "").split(";").map((part) => part.trim()).find((part) => part.startsWith(`${key}:`))?.slice(key.length + 1); }
+  setStyle(key, value) {
+    const declarations = (this.getAttribute("style") ?? "").split(";").map((part) => part.trim()).filter(Boolean).filter((part) => !part.startsWith(`${key}:`));
+    declarations.push(`${key}:${value}`);
+    this.setAttribute("style", declarations.join(";"));
+  }
+}
+
+export function createSvgDocument() { return { createElementNS: (namespaceURI, tagName) => new SvgElement(namespaceURI, tagName) }; }
+export function serializeSvgNode(node) {
+  if (node instanceof SvgText) return escapeText(node.value);
+  const attributes = node.serializedAttributes().map(([name, value]) => ` ${name}="${escapeAttribute(value)}"`).join("");
+  return `<${node.tagName}${attributes}>${node.childNodes.map(serializeSvgNode).join("")}</${node.tagName}>`;
+}
+
+/** Captures one render while restoring every global the renderer touches. */
+export function captureVanillaChartSvg({ render, args, svgId }) {
+  const root = new SvgElement(SVG_NAMESPACE, "svg");
+  root.id = svgId;
+  const priorDocument = globalThis.document;
+  const priorGetComputedStyle = globalThis.getComputedStyle;
+  const priorDateNow = Date.now;
+  const priorTimeZone = process.env.TZ;
+  const hadDocument = Object.prototype.hasOwnProperty.call(globalThis, "document");
+  const hadGetComputedStyle = Object.prototype.hasOwnProperty.call(globalThis, "getComputedStyle");
+  try {
+    globalThis.document = createSvgDocument();
+    globalThis.getComputedStyle = () => ({ height: "" });
+    Date.now = () => FROZEN_CHART_NOW;
+    process.env.TZ = "UTC";
+    render(root, ...args);
+    return serializeSvgNode(root);
+  } finally {
+    Date.now = priorDateNow;
+    if (priorTimeZone === undefined) delete process.env.TZ; else process.env.TZ = priorTimeZone;
+    if (hadDocument) globalThis.document = priorDocument; else delete globalThis.document;
+    if (hadGetComputedStyle) globalThis.getComputedStyle = priorGetComputedStyle; else delete globalThis.getComputedStyle;
+  }
+}
diff --git a/dashboard/src/oven/utils/adapters.test.ts b/dashboard/src/oven/utils/adapters.test.ts
new file mode 100644
index 0000000..57bc0bd
--- /dev/null
+++ b/dashboard/src/oven/utils/adapters.test.ts
@@ -0,0 +1,45 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { applyStreamingDiffCardMessage } from "../../hooks/streaming-diff-transport.mjs";
+import { receiveVisualParity } from "../../hooks/visual-parity-transport.mjs";
+
+test("Visual Parity receive returns validated payloads", () => {
+  const payload = { score: 0.98 };
+  assert.deepEqual(receiveVisualParity({ ok: true }, { validated: true, payload }), payload);
+});
+
+test("Visual Parity receive enforces the validated gate", () => {
+  for (const json of [{}, { validated: false }]) {
+    assert.throws(
+      () => receiveVisualParity({ ok: true }, json),
+      { message: "Visual Parity data was not validated by the Oven." },
+    );
+  }
+});
+
+test("Visual Parity receive reports response errors exactly", () => {
+  assert.throws(() => receiveVisualParity({ ok: false }, { error: "x" }), { message: "x" });
+  assert.throws(
+    () => receiveVisualParity({ ok: false }, {}),
+    { message: "Could not load Visual Parity." },
+  );
+});
+
+test("Streaming Diff card messages use the real card adapter", () => {
+  const card = {
+    revId: "revision-1",
+    toolUseId: "tool-1",
+    ts: "2026-07-15T09:00:00.000Z",
+    status: "captured",
+    files: [{ path: "src/example.mjs", kind: "modified", diff: "+after" }],
+  };
+
+  const cards = applyStreamingDiffCardMessage([], JSON.stringify(card));
+  assert.equal(cards.length, 1);
+  assert.deepEqual(cards[0], card);
+});
+
+test("Streaming Diff card messages reject invalid and unparseable input", () => {
+  assert.throws(() => applyStreamingDiffCardMessage([], "{}"), { message: "invalid card" });
+  assert.throws(() => applyStreamingDiffCardMessage([], "not-json"));
+});
diff --git a/dashboard/src/lib/checklist-progress-chart.test.mjs b/dashboard/src/oven/utils/checklist-progress-chart.test.ts
similarity index 99%
rename from dashboard/src/lib/checklist-progress-chart.test.mjs
rename to dashboard/src/oven/utils/checklist-progress-chart.test.ts
index c10be17..0e52e24 100644
--- a/dashboard/src/lib/checklist-progress-chart.test.mjs
+++ b/dashboard/src/oven/utils/checklist-progress-chart.test.ts
@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { buildChecklistProgressChart } from "./checklist-progress-chart.js";
+import { buildChecklistProgressChart } from "./checklist-progress-chart";
 
 const history = [
   { time: "2026-07-13T21:00:00Z", done: 3, remaining: 2, total: 5, percent: 60 },
diff --git a/dashboard/src/lib/checklist-progress-chart.js b/dashboard/src/oven/utils/checklist-progress-chart.ts
similarity index 64%
rename from dashboard/src/lib/checklist-progress-chart.js
rename to dashboard/src/oven/utils/checklist-progress-chart.ts
index 8e20981..a681cc8 100644
--- a/dashboard/src/lib/checklist-progress-chart.js
+++ b/dashboard/src/oven/utils/checklist-progress-chart.ts
@@ -1,3 +1,5 @@
+import { compactTimeScale, niceCeiling, stepPath } from "./compact-time-scale";
+
 function finiteNumber(value, fallback = 0) {
   const number = Number(value);
   return Number.isFinite(number) ? number : fallback;
@@ -7,14 +9,6 @@ function clamp(value, minimum, maximum) {
   return Math.max(minimum, Math.min(maximum, value));
 }
 
-function niceCeiling(value) {
-  if (!(value > 0)) return 1;
-  const magnitude = 10 ** Math.floor(Math.log10(value));
-  const scaled = value / magnitude;
-  const factor = scaled <= 1 ? 1 : scaled <= 2 ? 2 : scaled <= 5 ? 5 : 10;
-  return factor * magnitude;
-}
-
 function burnAxis(rawMaximum) {
   const maximum = Math.max(1, Math.ceil(rawMaximum));
   if (maximum <= 5) return { maximum, ticks: Array.from({ length: maximum + 1 }, (_, index) => index) };
@@ -43,49 +37,6 @@ function normalizedHistory(history) {
   return collapsed;
 }
 
-function compactTimeScale(points, minimumTime, maximumTime) {
-  const idleThreshold = 30 * 60_000;
-  const compactIdleGap = 8 * 60_000;
-  const anchors = [...new Set([minimumTime, ...points.map((point) => point.time).filter((time) => time > minimumTime && time < maximumTime), maximumTime])].sort((left, right) => left - right);
-  const segments = [];
-  let displayEnd = 0;
-  for (let index = 1; index < anchors.length; index += 1) {
-    const start = anchors[index - 1];
-    const end = anchors[index];
-    const elapsed = Math.max(0, end - start);
-    const displayElapsed = elapsed > idleThreshold ? compactIdleGap : elapsed;
-    segments.push({ start, end, displayStart: displayEnd, displayEnd: displayEnd + displayElapsed });
-    displayEnd += displayElapsed;
-  }
-  const project = (time) => {
-    const clamped = clamp(Number(time), minimumTime, maximumTime);
-    const segment = segments.find((candidate) => clamped <= candidate.end) ?? segments.at(-1);
-    if (!segment || segment.end <= segment.start) return 0;
-    const ratio = (clamped - segment.start) / (segment.end - segment.start);
-    return segment.displayStart + (segment.displayEnd - segment.displayStart) * ratio;
-  };
-  const unproject = (displayTime) => {
-    const clamped = clamp(Number(displayTime), 0, displayEnd);
-    const segment = segments.find((candidate) => clamped <= candidate.displayEnd) ?? segments.at(-1);
-    if (!segment || segment.displayEnd <= segment.displayStart) return minimumTime;
-    const ratio = (clamped - segment.displayStart) / (segment.displayEnd - segment.displayStart);
-    return segment.start + (segment.end - segment.start) * ratio;
-  };
-  return { span: Math.max(1, displayEnd), project, unproject };
-}
-
-function stepPath(points, x, y, valueForPoint) {
-  if (!points.length) return "";
-  const commands = [`M ${x(points[0]).toFixed(1)} ${y(valueForPoint(points[0])).toFixed(1)}`];
-  for (let index = 1; index < points.length; index += 1) {
-    const point = points[index];
-    const previous = points[index - 1];
-    commands.push(`L ${x(point).toFixed(1)} ${y(valueForPoint(previous)).toFixed(1)}`);
-    commands.push(`L ${x(point).toFixed(1)} ${y(valueForPoint(point)).toFixed(1)}`);
-  }
-  return commands.join(" ");
-}
-
 export function buildChecklistProgressChart(history, mode = "done", { width = 640, height = 180 } = {}) {
   const safeWidth = Math.max(360, Math.round(width));
   const safeHeight = Math.max(160, Math.round(height));
diff --git a/dashboard/src/oven/utils/compact-time-scale.test.ts b/dashboard/src/oven/utils/compact-time-scale.test.ts
new file mode 100644
index 0000000..4edd116
--- /dev/null
+++ b/dashboard/src/oven/utils/compact-time-scale.test.ts
@@ -0,0 +1,273 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { compactTimeScale, niceCeiling, stepPath } from "./compact-time-scale";
+
+// FROZEN SNAPSHOT — original Checklist compactTimeScale (pre-extraction)
+const originalChecklistCompactTimeScale = (() => {
+  function clamp(value, minimum, maximum) {
+    return Math.max(minimum, Math.min(maximum, value));
+  }
+
+  function compactTimeScale(points, minimumTime, maximumTime) {
+    const idleThreshold = 30 * 60_000;
+    const compactIdleGap = 8 * 60_000;
+    const anchors = [...new Set([minimumTime, ...points.map((point) => point.time).filter((time) => time > minimumTime && time < maximumTime), maximumTime])].sort((left, right) => left - right);
+    const segments = [];
+    let displayEnd = 0;
+    for (let index = 1; index < anchors.length; index += 1) {
+      const start = anchors[index - 1];
+      const end = anchors[index];
+      const elapsed = Math.max(0, end - start);
+      const displayElapsed = elapsed > idleThreshold ? compactIdleGap : elapsed;
+      segments.push({ start, end, displayStart: displayEnd, displayEnd: displayEnd + displayElapsed });
+      displayEnd += displayElapsed;
+    }
+    const project = (time) => {
+      const clamped = clamp(Number(time), minimumTime, maximumTime);
+      const segment = segments.find((candidate) => clamped <= candidate.end) ?? segments.at(-1);
+      if (!segment || segment.end <= segment.start) return 0;
+      const ratio = (clamped - segment.start) / (segment.end - segment.start);
+      return segment.displayStart + (segment.displayEnd - segment.displayStart) * ratio;
+    };
+    const unproject = (displayTime) => {
+      const clamped = clamp(Number(displayTime), 0, displayEnd);
+      const segment = segments.find((candidate) => clamped <= candidate.displayEnd) ?? segments.at(-1);
+      if (!segment || segment.displayEnd <= segment.displayStart) return minimumTime;
+      const ratio = (clamped - segment.displayStart) / (segment.displayEnd - segment.displayStart);
+      return segment.start + (segment.end - segment.start) * ratio;
+    };
+    return { span: Math.max(1, displayEnd), project, unproject };
+  }
+
+  return compactTimeScale;
+})();
+
+// FROZEN SNAPSHOT — DT createCompactTimeScale (reference)
+function createCompactTimeScale(points, minTime, maxTime) {
+  const idleThresholdMs = 30 * 60_000;
+  const compactIdleGapMs = 8 * 60_000;
+  const anchors = [...new Set([
+    minTime,
+    ...points.map((point) => Number(point.time)).filter((time) => Number.isFinite(time) && time > minTime && time < maxTime),
+    maxTime,
+  ])].sort((left, right) => left - right);
+  const segments = [];
+  let displayEnd = 0;
+  for (let index = 1; index < anchors.length; index += 1) {
+    const start = anchors[index - 1];
+    const end = anchors[index];
+    const elapsed = Math.max(0, end - start);
+    const displayElapsed = elapsed > idleThresholdMs ? compactIdleGapMs : elapsed;
+    segments.push({ start, end, displayStart: displayEnd, displayEnd: displayEnd + displayElapsed });
+    displayEnd += displayElapsed;
+  }
+  const project = (time) => {
+    const clamped = Math.max(minTime, Math.min(maxTime, Number(time)));
+    const segment = segments.find((candidate) => clamped <= candidate.end) ?? segments.at(-1);
+    if (!segment || segment.end <= segment.start) return 0;
+    const ratio = (clamped - segment.start) / (segment.end - segment.start);
+    return segment.displayStart + (segment.displayEnd - segment.displayStart) * ratio;
+  };
+  const unproject = (displayTime) => {
+    const clamped = Math.max(0, Math.min(displayEnd, Number(displayTime)));
+    const segment = segments.find((candidate) => clamped <= candidate.displayEnd) ?? segments.at(-1);
+    if (!segment || segment.displayEnd <= segment.displayStart) return minTime;
+    const ratio = (clamped - segment.displayStart) / (segment.displayEnd - segment.displayStart);
+    return segment.start + (segment.end - segment.start) * ratio;
+  };
+  const ticks = (count) => {
+    if (count <= 1) return [minTime];
+    return Array.from(
+      { length: count },
+      (_, index) => unproject((displayEnd * index) / (count - 1)),
+    );
+  };
+  return { span: Math.max(1, displayEnd), project, ticks, unproject };
+}
+
+// FROZEN SNAPSHOT — original Checklist niceCeiling (pre-extraction)
+function originalChecklistNiceCeiling(value) {
+  if (!(value > 0)) return 1;
+  const magnitude = 10 ** Math.floor(Math.log10(value));
+  const scaled = value / magnitude;
+  const factor = scaled <= 1 ? 1 : scaled <= 2 ? 2 : scaled <= 5 ? 5 : 10;
+  return factor * magnitude;
+}
+
+// FROZEN SNAPSHOT — original Checklist stepPath (pre-extraction)
+function originalChecklistStepPath(points, x, y, valueForPoint) {
+  if (!points.length) return "";
+  const commands = [`M ${x(points[0]).toFixed(1)} ${y(valueForPoint(points[0])).toFixed(1)}`];
+  for (let index = 1; index < points.length; index += 1) {
+    const point = points[index];
+    const previous = points[index - 1];
+    commands.push(`L ${x(point).toFixed(1)} ${y(valueForPoint(previous)).toFixed(1)}`);
+    commands.push(`L ${x(point).toFixed(1)} ${y(valueForPoint(point)).toFixed(1)}`);
+  }
+  return commands.join(" ");
+}
+
+function mulberry32(seed) {
+  return () => {
+    let value = seed += 0x6D2B79F5;
+    value = Math.imul(value ^ value >>> 15, value | 1);
+    value ^= value + Math.imul(value ^ value >>> 7, value | 61);
+    return ((value ^ value >>> 14) >>> 0) / 4_294_967_296;
+  };
+}
+
+function randomCase(random, index) {
+  const minimumTime = 1_700_000_000_000 + Math.floor(random() * 1_000_000_000);
+  const pointCount = 2 + Math.floor(random() * 7);
+  const points = [{ time: minimumTime }];
+  let currentTime = minimumTime;
+  for (let pointIndex = 1; pointIndex < pointCount; pointIndex += 1) {
+    const isIdleGap = (index + pointIndex) % 2 === 0;
+    const gap = isIdleGap
+      ? 30 * 60_000 + 1 + Math.floor(random() * 20 * 60_000)
+      : 1_000 + Math.floor(random() * 20 * 60_000);
+    currentTime += gap;
+    points.push({ time: currentTime });
+  }
+  return { points, minimumTime, maximumTime: currentTime };
+}
+
+function assertScaleMatchesSnapshots(points, minimumTime, maximumTime, label) {
+  const shared = compactTimeScale(points, minimumTime, maximumTime);
+  const differentialTesting = createCompactTimeScale(points, minimumTime, maximumTime);
+  const checklist = originalChecklistCompactTimeScale(points, minimumTime, maximumTime);
+
+  assert.equal(shared.span, differentialTesting.span, `span DT ${label}`);
+  assert.equal(shared.span, checklist.span, `span Checklist ${label}`);
+  const times = [
+    minimumTime,
+    maximumTime,
+    ...points.map((point) => point.time),
+    (minimumTime + maximumTime) / 2,
+  ];
+  for (const time of times) {
+    assert.equal(shared.project(time), differentialTesting.project(time), `project DT ${label}, time ${time}`);
+    assert.equal(shared.project(time), checklist.project(time), `project Checklist ${label}, time ${time}`);
+  }
+  for (const displayTime of [0, shared.span / 2, shared.span]) {
+    assert.equal(shared.unproject(displayTime), differentialTesting.unproject(displayTime), `unproject DT ${label}, display ${displayTime}`);
+    assert.equal(shared.unproject(displayTime), checklist.unproject(displayTime), `unproject Checklist ${label}, display ${displayTime}`);
+  }
+  for (const count of [0, 1, 2, 3, 7]) {
+    assert.deepEqual(shared.ticks(count), differentialTesting.ticks(count), `ticks DT ${label}, count ${count}`);
+  }
+}
+
+test("shared compact time scale is exactly equivalent to Checklist and DT snapshots", () => {
+  const random = mulberry32(0xC0FFEE);
+  for (let caseIndex = 0; caseIndex < 240; caseIndex += 1) {
+    const { points, minimumTime, maximumTime } = randomCase(random, caseIndex);
+    const shared = compactTimeScale(points, minimumTime, maximumTime);
+    const checklist = originalChecklistCompactTimeScale(points, minimumTime, maximumTime);
+    const differentialTesting = createCompactTimeScale(points, minimumTime, maximumTime);
+    assert.equal(shared.span, checklist.span, `span Checklist case ${caseIndex}`);
+    assert.equal(shared.span, differentialTesting.span, `span DT case ${caseIndex}`);
+    for (let index = 0; index <= 20; index += 1) {
+      const time = minimumTime + (maximumTime - minimumTime) * index / 20;
+      assert.equal(shared.project(time), checklist.project(time), `project Checklist case ${caseIndex}, sample ${index}`);
+      assert.equal(shared.project(time), differentialTesting.project(time), `project DT case ${caseIndex}, sample ${index}`);
+    }
+    for (let index = 0; index <= 20; index += 1) {
+      const displayTime = shared.span * index / 20;
+      assert.equal(shared.unproject(displayTime), checklist.unproject(displayTime), `unproject Checklist case ${caseIndex}, sample ${index}`);
+      assert.equal(shared.unproject(displayTime), differentialTesting.unproject(displayTime), `unproject DT case ${caseIndex}, sample ${index}`);
+    }
+    for (const count of [0, 1, 2, 4, 7, 11]) {
+      assert.deepEqual(shared.ticks(count), differentialTesting.ticks(count), `ticks case ${caseIndex}, count ${count}`);
+    }
+  }
+});
+
+test("shared compact time scale preserves DT coercion and edge-case equivalence", () => {
+  const minimumTime = 1_700_000_000_000;
+  const numericStringTime = minimumTime + 30 * 60_000;
+  const maximumTime = minimumTime + 2 * 30 * 60_000;
+  assertScaleMatchesSnapshots(
+    [
+      { time: minimumTime },
+      { time: String(numericStringTime) },
+      { time: numericStringTime },
+      { time: maximumTime },
+    ],
+    minimumTime,
+    maximumTime,
+    "numeric-string anchor",
+  );
+
+  const exactIdleGap = compactTimeScale(
+    [{ time: 0 }, { time: 30 * 60_000 }],
+    0,
+    30 * 60_000,
+  );
+  assert.equal(exactIdleGap.span, 30 * 60_000, "exact threshold is not compacted");
+  assertScaleMatchesSnapshots([{ time: 0 }, { time: 30 * 60_000 }], 0, 30 * 60_000, "exact idle threshold");
+
+  const justOverIdleGap = compactTimeScale(
+    [{ time: 0 }, { time: 30 * 60_000 + 1 }],
+    0,
+    30 * 60_000 + 1,
+  );
+  assert.equal(justOverIdleGap.span, 8 * 60_000, "threshold plus one compacts to eight minutes");
+  assertScaleMatchesSnapshots([{ time: 0 }, { time: 30 * 60_000 + 1 }], 0, 30 * 60_000 + 1, "just over idle threshold");
+
+  const unsortedMinimumTime = 1_700_000_000_000;
+  const unsortedMaximumTime = unsortedMinimumTime + 2 * 30 * 60_000 + 1_000;
+  assertScaleMatchesSnapshots(
+    [
+      { time: unsortedMaximumTime + 1 },
+      { time: unsortedMinimumTime + 30 * 60_000 + 1 },
+      { time: unsortedMinimumTime + 30 * 60_000 + 1 },
+      { time: unsortedMinimumTime - 1 },
+      { time: unsortedMaximumTime },
+      { time: unsortedMinimumTime },
+      { time: unsortedMinimumTime + 1 },
+    ],
+    unsortedMinimumTime,
+    unsortedMaximumTime,
+    "duplicate unsorted out-of-range anchors",
+  );
+
+  assertScaleMatchesSnapshots(
+    [{ time: 5 }, { time: 5 }, { time: 4 }, { time: 6 }],
+    5,
+    5,
+    "degenerate range",
+  );
+});
+
+test("shared compact time scale has explicit hand-computed outputs", () => {
+  const scale = compactTimeScale([{ time: 1_000 }, { time: 3_000 }, { time: 5_000 }], 1_000, 5_000);
+  assert.equal(scale.span, 4_000);
+  assert.equal(scale.project(2_000), 1_000);
+  assert.equal(scale.unproject(2_000), 3_000);
+  assert.deepEqual(scale.ticks(3), [1_000, 3_000, 5_000]);
+});
+
+test("shared niceCeiling and stepPath preserve Checklist behavior", () => {
+  for (const value of [-100, -1, 0, 0.0001, 0.2, 1, 1.1, 2, 2.1, 5, 5.1, 9.99, 10, 100, 999.9, Number.NaN, Number.POSITIVE_INFINITY]) {
+    assert.equal(niceCeiling(value), originalChecklistNiceCeiling(value), `niceCeiling(${value})`);
+  }
+
+  const points = [
+    { time: 0, value: 1 },
+    { time: 1.234, value: 2.5 },
+    { time: 4.5, value: 1 },
+  ];
+  const x = (point) => point.time * 12.3 + 0.04;
+  const y = (value) => 100 - value * 7.1;
+  const valueForPoint = (point) => point.value;
+  assert.equal(stepPath([], x, y, valueForPoint), "");
+  assert.equal(
+    stepPath([{ time: 2, value: 3 }], (point) => point.time, (value) => value, valueForPoint),
+    "M 2.0 3.0",
+  );
+  assert.equal(
+    stepPath(points, x, y, valueForPoint),
+    originalChecklistStepPath(points, x, y, valueForPoint),
+  );
+});
diff --git a/dashboard/src/oven/utils/compact-time-scale.ts b/dashboard/src/oven/utils/compact-time-scale.ts
new file mode 100644
index 0000000..d744bd9
--- /dev/null
+++ b/dashboard/src/oven/utils/compact-time-scale.ts
@@ -0,0 +1,61 @@
+function clamp(value, minimum, maximum) {
+  return Math.max(minimum, Math.min(maximum, value));
+}
+
+export function niceCeiling(value) {
+  if (!(value > 0)) return 1;
+  const magnitude = 10 ** Math.floor(Math.log10(value));
+  const scaled = value / magnitude;
+  const factor = scaled <= 1 ? 1 : scaled <= 2 ? 2 : scaled <= 5 ? 5 : 10;
+  return factor * magnitude;
+}
+
+export function compactTimeScale(points, minimumTime, maximumTime) {
+  const idleThreshold = 30 * 60_000;
+  const compactIdleGap = 8 * 60_000;
+  const anchors = [...new Set([minimumTime, ...points.map((point) => Number(point.time)).filter((time) => Number.isFinite(time) && time > minimumTime && time < maximumTime), maximumTime])].sort((left, right) => left - right);
+  const segments = [];
+  let displayEnd = 0;
+  for (let index = 1; index < anchors.length; index += 1) {
+    const start = anchors[index - 1];
+    const end = anchors[index];
+    const elapsed = Math.max(0, end - start);
+    const displayElapsed = elapsed > idleThreshold ? compactIdleGap : elapsed;
+    segments.push({ start, end, displayStart: displayEnd, displayEnd: displayEnd + displayElapsed });
+    displayEnd += displayElapsed;
+  }
+  const project = (time) => {
+    const clamped = clamp(Number(time), minimumTime, maximumTime);
+    const segment = segments.find((candidate) => clamped <= candidate.end) ?? segments.at(-1);
+    if (!segment || segment.end <= segment.start) return 0;
+    const ratio = (clamped - segment.start) / (segment.end - segment.start);
+    return segment.displayStart + (segment.displayEnd - segment.displayStart) * ratio;
+  };
+  const unproject = (displayTime) => {
+    const clamped = clamp(Number(displayTime), 0, displayEnd);
+    const segment = segments.find((candidate) => clamped <= candidate.displayEnd) ?? segments.at(-1);
+    if (!segment || segment.displayEnd <= segment.displayStart) return minimumTime;
+    const ratio = (clamped - segment.displayStart) / (segment.displayEnd - segment.displayStart);
+    return segment.start + (segment.end - segment.start) * ratio;
+  };
+  const ticks = (count) => {
+    if (count <= 1) return [minimumTime];
+    return Array.from(
+      { length: count },
+      (_, index) => unproject((displayEnd * index) / (count - 1)),
+    );
+  };
+  return { span: Math.max(1, displayEnd), project, ticks, unproject };
+}
+
+export function stepPath(points, x, y, valueForPoint) {
+  if (!points.length) return "";
+  const commands = [`M ${x(points[0]).toFixed(1)} ${y(valueForPoint(points[0])).toFixed(1)}`];
+  for (let index = 1; index < points.length; index += 1) {
+    const point = points[index];
+    const previous = points[index - 1];
+    commands.push(`L ${x(point).toFixed(1)} ${y(valueForPoint(previous)).toFixed(1)}`);
+    commands.push(`L ${x(point).toFixed(1)} ${y(valueForPoint(point)).toFixed(1)}`);
+  }
+  return commands.join(" ");
+}
diff --git a/dashboard/src/oven/utils/json-pointer.test.ts b/dashboard/src/oven/utils/json-pointer.test.ts
new file mode 100644
index 0000000..3f4ff00
--- /dev/null
+++ b/dashboard/src/oven/utils/json-pointer.test.ts
@@ -0,0 +1,29 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { resolvePointer } from "./json-pointer";
+
+const payload = {
+  summary: { passed: 2, label: "nested" },
+  rows: [{ id: "first" }, { id: "second" }],
+  "a/b": { "c~d": "escaped" },
+};
+
+test("resolves nested object and array segments", () => {
+  assert.equal(resolvePointer(payload, "/summary/passed"), 2);
+  assert.equal(resolvePointer(payload, "/rows/1/id"), "second");
+});
+
+test("returns undefined for missing paths", () => {
+  assert.equal(resolvePointer(payload, "/summary/missing"), undefined);
+  assert.equal(resolvePointer(payload, "/rows/4"), undefined);
+  assert.equal(resolvePointer(payload, "summary/passed"), undefined);
+});
+
+test("returns the payload for empty and root pointers", () => {
+  assert.equal(resolvePointer(payload, ""), payload);
+  assert.equal(resolvePointer(payload, "/"), payload);
+});
+
+test("decodes RFC6901 escaped path segments", () => {
+  assert.equal(resolvePointer(payload, "/a~1b/c~0d"), "escaped");
+});
diff --git a/dashboard/src/oven/utils/json-pointer.ts b/dashboard/src/oven/utils/json-pointer.ts
new file mode 100644
index 0000000..88f08bd
--- /dev/null
+++ b/dashboard/src/oven/utils/json-pointer.ts
@@ -0,0 +1,13 @@
+export function resolvePointer(payload, pointer) {
+  if (pointer === "" || pointer === "/") return payload;
+  if (typeof pointer !== "string" || !pointer.startsWith("/")) return undefined;
+
+  const segments = pointer.slice(1).split("/").map((segment) => segment.replaceAll("~1", "/").replaceAll("~0", "~"));
+  let value = payload;
+  for (const segment of segments) {
+    if (value === null || value === undefined || (typeof value !== "object" && typeof value !== "function")) return undefined;
+    if (!Object.prototype.hasOwnProperty.call(value, segment)) return undefined;
+    value = value[segment];
+  }
+  return value;
+}
diff --git a/dashboard/src/oven/utils/streaming-diff-time.ts b/dashboard/src/oven/utils/streaming-diff-time.ts
new file mode 100644
index 0000000..e14136a
--- /dev/null
+++ b/dashboard/src/oven/utils/streaming-diff-time.ts
@@ -0,0 +1,4 @@
+export function timestamp(value: string | null) {
+  const parsed = value ? Date.parse(value) : Number.NaN;
+  return Number.isFinite(parsed) ? new Date(parsed).toLocaleString() : value ?? "Unknown activity time";
+}
diff --git a/dashboard/src/oven/utils/transports.test.ts b/dashboard/src/oven/utils/transports.test.ts
new file mode 100644
index 0000000..cca904b
--- /dev/null
+++ b/dashboard/src/oven/utils/transports.test.ts
@@ -0,0 +1,255 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { applyStreamingDiffUpdate, parseStreamingDiffCard } from "../../lib/streaming-diff.mjs";
+import { createPollTransport, createSseTransport } from "./transports";
+
+const waitForAsyncWork = () => new Promise((resolve) => setImmediate(resolve));
+
+function visualParityReceive(response, json) {
+  if (!response.ok) throw new Error(json.error ?? "Could not load Visual Parity.");
+  if (json.validated !== true) throw new Error("Visual Parity data was not validated by the Oven.");
+  return json.payload;
+}
+
+function startPoll({ fetchImpl, receive = visualParityReceive, events = [], setIntervalImpl, clearIntervalImpl } = {}) {
+  let intervalCallback;
+  const transport = createPollTransport({
+    makeUrl: () => "/api/oven-data/visual-parity",
+    intervalMs: 2_000,
+    receive,
+    fallbackError: "Could not load Visual Parity.",
+    fetchImpl,
+    setIntervalImpl: setIntervalImpl ?? ((callback) => {
+      intervalCallback = callback;
+      return "timer";
+    }),
+    clearIntervalImpl: clearIntervalImpl ?? (() => {}),
+  });
+  const stop = transport.start({
+    onData: (data) => events.push(["data", data]),
+    onError: (error) => events.push(["error", error]),
+    onSettled: () => events.push(["settled"]),
+  });
+  return { stop, get intervalCallback() { return intervalCallback; } };
+}
+
+test("poll uses the configured URL, cache mode, and interval", async () => {
+  const fetchCalls = [];
+  let intervalArgs;
+  const { stop } = startPoll({
+    fetchImpl: async (...args) => {
+      fetchCalls.push(args);
+      return { ok: true, json: () => ({ validated: true, payload: {} }) };
+    },
+    setIntervalImpl: (...args) => {
+      intervalArgs = args;
+      return "timer";
+    },
+  });
+
+  await waitForAsyncWork();
+  assert.equal(typeof intervalArgs[0], "function");
+  assert.equal(intervalArgs[1], 2_000);
+  assert.deepEqual(fetchCalls, [["/api/oven-data/visual-parity", { cache: "no-store" }]]);
+  stop();
+});
+
+test("poll success delivers data before settled", async () => {
+  const events = [];
+  const { stop } = startPoll({
+    events,
+    fetchImpl: async () => ({ ok: true, json: () => ({ validated: true, payload: { x: 1 } }) }),
+  });
+
+  await waitForAsyncWork();
+  stop();
+  assert.deepEqual(events, [["data", { x: 1 }], ["settled"]]);
+});
+
+test("poll skips an interval refresh while the first request is in flight", async () => {
+  let resolveFetch;
+  let fetchCalls = 0;
+  const { stop, intervalCallback } = startPoll({
+    fetchImpl: () => {
+      fetchCalls += 1;
+      return new Promise((resolve) => { resolveFetch = resolve; });
+    },
+  });
+
+  await Promise.resolve();
+  assert.equal(fetchCalls, 1);
+  await intervalCallback();
+  assert.equal(fetchCalls, 1);
+  resolveFetch({ ok: true, json: () => ({ validated: true, payload: {} }) });
+  await waitForAsyncWork();
+  stop();
+});
+
+test("poll replay shares the in-flight guard", async () => {
+  let resolveFetch;
+  let fetchCalls = 0;
+  const inFlightRef = { current: false };
+  const fetchImpl = () => {
+    fetchCalls += 1;
+    return new Promise((resolve) => { resolveFetch = resolve; });
+  };
+  const config = {
+    makeUrl: () => "/api/oven-data/visual-parity",
+    intervalMs: 2_000,
+    receive: visualParityReceive,
+    fallbackError: "Could not load Visual Parity.",
+    inFlightRef,
+    fetchImpl,
+    setIntervalImpl: () => "timer",
+    clearIntervalImpl: () => {},
+  };
+  const events = [];
+  const events2 = [];
+  const stop = createPollTransport(config).start({
+    onData: (data) => events.push(["data", data]),
+    onError: (error) => events.push(["error", error]),
+    onSettled: () => events.push(["settled"]),
+  });
+  const stop2 = createPollTransport(config).start({
+    onData: (data) => events2.push(["data", data]),
+    onError: (error) => events2.push(["error", error]),
+    onSettled: () => events2.push(["settled"]),
+  });
+
+  assert.equal(fetchCalls, 1);
+  resolveFetch({ ok: true, json: () => ({ validated: true, payload: { replay: "done" } }) });
+  await waitForAsyncWork();
+  assert.deepEqual(events, [["data", { replay: "done" }], ["settled"]]);
+  assert.deepEqual(events2, []);
+  stop2();
+  stop();
+});
+
+test("poll validated gate reports its exact error", async () => {
+  const events = [];
+  const { stop } = startPoll({
+    events,
+    fetchImpl: async () => ({ ok: true, json: () => ({ validated: false, payload: {} }) }),
+  });
+
+  await waitForAsyncWork();
+  stop();
+  assert.deepEqual(events, [["error", "Visual Parity data was not validated by the Oven."], ["settled"]]);
+});
+
+test("poll not-ok response reports the server error", async () => {
+  const events = [];
+  const { stop } = startPoll({
+    events,
+    fetchImpl: async () => ({ ok: false, json: () => ({ error: "boom" }) }),
+  });
+
+  await waitForAsyncWork();
+  stop();
+  assert.deepEqual(events, [["error", "boom"], ["settled"]]);
+});
+
+test("poll not-ok response uses the fallback when no error is supplied", async () => {
+  const events = [];
+  const { stop } = startPoll({
+    events,
+    fetchImpl: async () => ({ ok: false, json: () => ({}) }),
+  });
+
+  await waitForAsyncWork();
+  stop();
+  assert.deepEqual(events, [["error", "Could not load Visual Parity."], ["settled"]]);
+});
+
+test("poll stop suppresses late state writes and clears the timer", async () => {
+  let resolveFetch;
+  let clearedTimer;
+  const events = [];
+  const { stop } = startPoll({
+    events,
+    fetchImpl: () => new Promise((resolve) => { resolveFetch = resolve; }),
+    clearIntervalImpl: (timer) => { clearedTimer = timer; },
+  });
+
+  stop();
+  resolveFetch({ ok: true, json: () => ({ validated: true, payload: { late: true } }) });
+  await waitForAsyncWork();
+  assert.equal(clearedTimer, "timer");
+  assert.deepEqual(events, []);
+});
+
+test("stream card message validation rejects invalid data and applies valid data", () => {
+  const applyMessage = (cards, raw) => {
+    const card = parseStreamingDiffCard(JSON.parse(raw));
+    if (!card) throw new Error("invalid card");
+    return applyStreamingDiffUpdate(cards, { type: "card", card });
+  };
+  const card = {
+    revId: "revision-1",
+    toolUseId: "tool-1",
+    ts: "2026-07-15T09:00:00.000Z",
+    status: "captured",
+    files: [{ path: "src/example.mjs", kind: "modified", diff: "+after" }],
+  };
+
+  assert.throws(() => applyMessage([], "{}"), /invalid card/u);
+  assert.deepEqual(applyMessage([], JSON.stringify(card)), [card]);
+});
+
+class FakeEventSource {
+  static instances = [];
+
+  constructor(url) {
+    this.url = url;
+    this.listeners = new Map();
+    this.closed = false;
+    FakeEventSource.instances.push(this);
+  }
+
+  addEventListener(type, listener) {
+    this.listeners.set(type, listener);
+  }
+
+  removeEventListener(type, listener) {
+    this.removed = [type, listener];
+    this.listeners.delete(type);
+  }
+
+  close() {
+    this.closed = true;
+  }
+
+  dispatch(type) {
+    this.listeners.get(type)?.();
+  }
+
+  dispatchMessage(data) {
+    this.onmessage?.({ data });
+  }
+}
+
+test("sse forwards events and cleanup removes reset listener and closes stream", () => {
+  const calls = [];
+  const stop = createSseTransport({
+    makeUrl: () => "/stream",
+    EventSourceImpl: FakeEventSource,
+  }).start({
+    onReset: () => calls.push("reset"),
+    onOpen: () => calls.push("open"),
+    onMessage: (raw) => calls.push(["message", raw]),
+    onError: () => calls.push("error"),
+  });
+  const stream = FakeEventSource.instances.at(-1);
+
+  stream.onopen();
+  stream.dispatch("reset");
+  stream.dispatchMessage('{"id":"card-1"}');
+  stream.onerror();
+  stop();
+
+  assert.equal(stream.url, "/stream");
+  assert.deepEqual(calls, ["open", "reset", ["message", '{"id":"card-1"}'], "error"]);
+  assert.equal(stream.removed[0], "reset");
+  assert.equal(typeof stream.removed[1], "function");
+  assert.equal(stream.closed, true);
+});
diff --git a/dashboard/src/oven/utils/transports.ts b/dashboard/src/oven/utils/transports.ts
new file mode 100644
index 0000000..657d830
--- /dev/null
+++ b/dashboard/src/oven/utils/transports.ts
@@ -0,0 +1,57 @@
+export function createPollTransport({
+  makeUrl,
+  intervalMs,
+  receive,
+  fallbackError,
+  inFlightRef = { current: false },
+  fetchImpl = fetch,
+  setIntervalImpl = setInterval,
+  clearIntervalImpl = clearInterval,
+}) {
+  return {
+    start({ onData, onError, onSettled }) {
+      let cancelled = false;
+
+      const refresh = async () => {
+        if (inFlightRef.current) return;
+        inFlightRef.current = true;
+        try {
+          const response = await fetchImpl(makeUrl(), { cache: "no-store" });
+          const json = await response.json();
+          const data = receive(response, json);
+          if (!cancelled) onData(data);
+        } catch (cause) {
+          if (!cancelled) onError(cause instanceof Error ? cause.message : fallbackError);
+        } finally {
+          inFlightRef.current = false;
+          if (!cancelled) onSettled();
+        }
+      };
+
+      void refresh();
+      const timer = setIntervalImpl(refresh, intervalMs);
+      return () => {
+        cancelled = true;
+        clearIntervalImpl(timer);
+      };
+    },
+  };
+}
+
+export function createSseTransport({ makeUrl, EventSourceImpl = EventSource }) {
+  return {
+    start({ onReset, onOpen, onMessage, onError }) {
+      const url = makeUrl();
+      const stream = new EventSourceImpl(url);
+      const reset = () => onReset();
+      stream.addEventListener("reset", reset);
+      stream.onopen = () => onOpen();
+      stream.onmessage = (event) => onMessage(event.data);
+      stream.onerror = () => onError();
+      return () => {
+        stream.removeEventListener("reset", reset);
+        stream.close();
+      };
+    },
+  };
+}
diff --git a/dashboard/src/oven/utils/useOvenLiveData.ts b/dashboard/src/oven/utils/useOvenLiveData.ts
new file mode 100644
index 0000000..0e86de5
--- /dev/null
+++ b/dashboard/src/oven/utils/useOvenLiveData.ts
@@ -0,0 +1,92 @@
+import { useEffect, useRef, useState, type DependencyList } from "react";
+import { createPollTransport, createSseTransport } from "./transports";
+
+type PropsConfig<T> = { transport: "props"; data: T };
+
+type PollConfig<T> = {
+  transport: "poll";
+  makeUrl: () => string;
+  intervalMs: number;
+  receive: (response: Response, json: unknown) => T;
+  fallbackError: string;
+  initialData?: T | null;
+  deps?: DependencyList;
+};
+
+type SseConfig<T> = {
+  transport: "sse";
+  makeUrl: () => string | null;
+  initialData: T;
+  applyReset: (data: T) => T;
+  applyMessage: (data: T, raw: string) => T;
+  invalidError: string;
+  disconnectError: string;
+  deps?: DependencyList;
+};
+
+export type OvenLiveDataConfig<T> = PropsConfig<T> | PollConfig<T> | SseConfig<T>;
+
+type PropsResult<T> = { data: T; error: ""; loading: false };
+type PollResult<T> = { data: T | null; error: string; loading: boolean };
+type SseResult<T> = { data: T; error: string };
+
+export function useOvenLiveData<T>(config: PropsConfig<T>): PropsResult<T>;
+export function useOvenLiveData<T>(config: PollConfig<T>): PollResult<T>;
+export function useOvenLiveData<T>(config: SseConfig<T>): SseResult<T>;
+export function useOvenLiveData<T>(config: OvenLiveDataConfig<T>) {
+  if (config.transport === "props") {
+    return { data: config.data, error: "", loading: false };
+  }
+
+  if (config.transport === "poll") {
+    const [state, setState] = useState<PollResult<T>>({
+      data: config.initialData ?? null,
+      error: "",
+      loading: true,
+    });
+    const inFlightRef = useRef(false);
+
+    useEffect(() => {
+      const stop = createPollTransport({
+        makeUrl: config.makeUrl,
+        intervalMs: config.intervalMs,
+        receive: config.receive,
+        fallbackError: config.fallbackError,
+        inFlightRef,
+      }).start({
+        onData: (data) => setState((current) => ({ ...current, data, error: "" })),
+        onError: (error) => setState((current) => ({ ...current, error })),
+        onSettled: () => setState((current) => ({ ...current, loading: false })),
+      });
+      return stop;
+    }, config.deps ?? []);
+
+    return state;
+  }
+
+  const [state, setState] = useState<SseResult<T>>({ data: config.initialData, error: "" });
+
+  useEffect(() => {
+    const url = config.makeUrl();
+    if (url == null) {
+      setState({ data: config.initialData, error: "" });
+      return undefined;
+    }
+    setState({ data: config.initialData, error: "" });
+    const stop = createSseTransport({ makeUrl: () => url }).start({
+      onReset: () => setState((current) => ({ ...current, data: config.applyReset(current.data) })),
+      onOpen: () => setState((current) => ({ ...current, error: "" })),
+      onMessage: (raw) => setState((current) => {
+        try {
+          return { ...current, data: config.applyMessage(current.data, raw) };
+        } catch {
+          return { ...current, error: config.invalidError };
+        }
+      }),
+      onError: () => setState((current) => ({ ...current, error: config.disconnectError })),
+    });
+    return stop;
+  }, config.deps ?? []);
+
+  return state;
+}
diff --git a/dashboard/src/oven/utils/visual-parity-format.ts b/dashboard/src/oven/utils/visual-parity-format.ts
new file mode 100644
index 0000000..0ce9d23
--- /dev/null
+++ b/dashboard/src/oven/utils/visual-parity-format.ts
@@ -0,0 +1,7 @@
+export function percent(value: number) {
+  return `${(value * 100).toFixed(value < 0.01 ? 3 : 2)}%`;
+}
+
+export function delta(value: number) {
+  return value.toFixed(4).replace(/0+$/u, "").replace(/\.$/u, "");
+}
diff --git a/dashboard/vite-plugin-oven-ir.mjs b/dashboard/vite-plugin-oven-ir.mjs
new file mode 100644
index 0000000..18ef5ca
--- /dev/null
+++ b/dashboard/vite-plugin-oven-ir.mjs
@@ -0,0 +1,61 @@
+import { dirname, isAbsolute, relative, resolve, sep } from "node:path";
+import { fileURLToPath } from "node:url";
+import { compileOvenIrForJsonPath } from "./oven-ir-compile.mjs";
+
+const dashboardDir = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(dashboardDir, "..");
+const ovensDir = resolve(repoRoot, "ovens");
+const virtualPrefix = "\0oven-ir:";
+
+function withoutQuery(id) {
+  return id.split(/[?#]/, 1)[0];
+}
+
+function isOvenIrPath(path) {
+  const ovenRelativePath = relative(ovensDir, path);
+  if (ovenRelativePath.startsWith(`..${sep}`) || isAbsolute(ovenRelativePath)) return false;
+  const parts = ovenRelativePath.split(sep);
+  if (parts.length !== 2) return false;
+  const [ovenId, irName] = parts;
+  return irName === `${ovenId}.ir.json`;
+}
+
+function ovenIrPath(source, importer) {
+  const cleanSource = withoutQuery(source);
+  const cleanImporter = importer && withoutQuery(importer);
+  const candidate = isAbsolute(cleanSource)
+    ? cleanSource
+    : cleanImporter
+      ? resolve(dirname(cleanImporter), cleanSource)
+      : resolve(repoRoot, cleanSource);
+  return isOvenIrPath(candidate) ? candidate : null;
+}
+
+function virtualId(irPath) {
+  return `${virtualPrefix}${irPath}.mjs`;
+}
+
+function irPathFromId(id) {
+  const cleanId = withoutQuery(id);
+  if (!cleanId.startsWith(virtualPrefix) || !cleanId.endsWith(".mjs")) return null;
+  const irPath = cleanId.slice(virtualPrefix.length, -".mjs".length);
+  return isOvenIrPath(irPath) ? irPath : null;
+}
+
+export function ovenIrPlugin() {
+  return {
+    name: "oven-ir",
+    resolveId(source, importer) {
+      const path = ovenIrPath(source, importer);
+      return path && { id: virtualId(path) };
+    },
+    load(id) {
+      const irPath = irPathFromId(id);
+      if (!irPath) return null;
+
+      const ovenPath = `${irPath.slice(0, -".ir.json".length)}.oven`;
+      this.addWatchFile(ovenPath);
+      return `export default ${JSON.stringify(compileOvenIrForJsonPath(irPath))};`;
+    },
+  };
+}
diff --git a/dashboard/vite.config.mjs b/dashboard/vite.config.mjs
index 6834916..5eb28df 100644
--- a/dashboard/vite.config.mjs
+++ b/dashboard/vite.config.mjs
@@ -1,6 +1,7 @@
 import { fileURLToPath, URL } from "node:url";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import { ovenIrPlugin } from "./vite-plugin-oven-ir.mjs";
 
 const dashboardDir = fileURLToPath(new URL(".", import.meta.url));
 const sourceDir = fileURLToPath(new URL("./src", import.meta.url));
@@ -8,7 +9,7 @@ const sourceDir = fileURLToPath(new URL("./src", import.meta.url));
 export default defineConfig({
   root: dashboardDir,
   publicDir: fileURLToPath(new URL("./public", import.meta.url)),
-  plugins: [react()],
+  plugins: [ovenIrPlugin(), react()],
   resolve: {
     alias: {
       "@": sourceDir,
@@ -16,6 +17,7 @@ export default defineConfig({
       "@components": fileURLToPath(new URL("./src/components", import.meta.url)),
       "@hooks": fileURLToPath(new URL("./src/hooks", import.meta.url)),
       "@lib": fileURLToPath(new URL("./src/lib", import.meta.url)),
+      "@oven": fileURLToPath(new URL("./src/oven", import.meta.url)),
     },
   },
   build: {
diff --git a/ovens/checklist/checklist.oven b/ovens/checklist/checklist.oven
new file mode 100644
index 0000000..8737732
--- /dev/null
+++ b/ovens/checklist/checklist.oven
@@ -0,0 +1,15 @@
+<oven id="checklist" version="1" contract="checklist-progress@1" theme="checklist">
+  <kpi-strip>
+    <kpi-item variant="current" heading="Current" icon="ClipboardList" title="/current/title" value="/current/value"/>
+    <kpi-item heading="Progress" title="/progress/title">
+      <progress-donut source="/progress/percent"/>
+      <progress-value done="/progress/done" total="/progress/total" percent="/progress/percent"/>
+    </kpi-item>
+    <kpi-item heading="Elapsed" icon="Clock3" value="/durations/elapsed"/>
+    <kpi-item heading="Avg pace" icon="Gauge" value="/durations/pace"/>
+    <kpi-item heading="Time left" icon="TimerReset" value="/durations/timeLeft"/>
+  </kpi-strip>
+  <checklist-ledger source="/raw"/>
+  <checklist-burn-panel source="/raw"/>
+  <checklist-event-cards source="/raw"/>
+</oven>
diff --git a/ovens/checklist/detail.json b/ovens/checklist/detail.json
deleted file mode 100644
index 00e1e30..0000000
--- a/ovens/checklist/detail.json
+++ /dev/null
@@ -1,74 +0,0 @@
-{
-  "version": 1,
-  "columns": 12,
-  "rows": 10,
-  "rowHeight": 48,
-  "cells": [
-    {
-      "id": "completed",
-      "title": "Completed",
-      "widget": "metric",
-      "source": "/summary/completed",
-      "format": "number",
-      "column": 1,
-      "row": 1,
-      "columnSpan": 3,
-      "rowSpan": 2
-    },
-    {
-      "id": "progress",
-      "title": "Progress",
-      "widget": "progress",
-      "source": "/summary/percent",
-      "format": "percent",
-      "column": 4,
-      "row": 1,
-      "columnSpan": 5,
-      "rowSpan": 2
-    },
-    {
-      "id": "status",
-      "title": "Status",
-      "widget": "status",
-      "source": "/summary/status",
-      "format": "plain",
-      "column": 9,
-      "row": 1,
-      "columnSpan": 4,
-      "rowSpan": 2
-    },
-    {
-      "id": "active",
-      "title": "Active checklist",
-      "widget": "list",
-      "source": "/active",
-      "format": "plain",
-      "column": 1,
-      "row": 3,
-      "columnSpan": 6,
-      "rowSpan": 4
-    },
-    {
-      "id": "timeline",
-      "title": "Timeline",
-      "widget": "timeline",
-      "source": "/timeline",
-      "format": "plain",
-      "column": 7,
-      "row": 3,
-      "columnSpan": 6,
-      "rowSpan": 4
-    },
-    {
-      "id": "log",
-      "title": "Burnlist log",
-      "widget": "log",
-      "source": "/log",
-      "format": "plain",
-      "column": 1,
-      "row": 7,
-      "columnSpan": 12,
-      "rowSpan": 4
-    }
-  ]
-}
diff --git a/ovens/checklist/instructions.md b/ovens/checklist/instructions.md
index d8d2758..9cac1d1 100644
--- a/ovens/checklist/instructions.md
+++ b/ovens/checklist/instructions.md
@@ -1,23 +1,19 @@
 # Checklist
 
-Checklist is the default queue-completion Oven. It preserves the current Burnlist Progress behavior, observes a shrinking Markdown checklist, and answers: how much of the work queue has been burned down?
+`checklist.oven` is the declarative, read-only detail view for a Burnlist checklist. It renders the current task, progress KPIs, completion ledger, burn chart, and completed-event cards without changing canonical Burnlist state.
 
-## State Contract
+## Payload contract
 
-The canonical run state is `burnlist.md` with an ordered `## Active Checklist` and a terse `## Completed` ledger. The dashboard is an observer; it does not replace or silently mutate that state.
+The view binds `checklist-progress@1` data after `adaptChecklist(data)` in `dashboard/src/lib/checklist-adapter.ts`. The payload contains:
 
-## Direction
+- `raw`: the original checklist progress data consumed by the ledger, burn panel, and event cards.
+- `current`: `{ title, value }` for the active-task KPI.
+- `progress`: `{ done, total, percent, title }` for the progress KPI.
+- `durations`: formatted `{ elapsed, pace, timeLeft }` KPI strings.
+- `ledger`, `history`, and `events`: precomputed read models available to future declarative widgets.
 
-Progress normally moves from `0%` toward `100%`. Completed count comes from the completed ledger, remaining count comes from the active checklist, and total is completed plus remaining.
+The engine receives this payload from the dashboard on each data refresh. The oven has no write controls and never mutates the checklist, lifecycle folders, or registry.
 
-## Run Inputs
+## Active Checklist
 
-A Run needs a repository, a concise title, and an objective. Planning and execution remain governed by the Burnlist protocol.
-
-## Evidence
-
-Completion is proven by canonical checklist state and the checks required by each item. Dashboard percentages, charts, and logs are reader views, not implementation proof.
-
-## Detail Page Data
-
-The normalized detail payload may expose `summary`, `active`, `completed`, `timeline`, and `log` fields. Detail-block bindings use JSON-pointer-like source paths and never execute code from these instructions.
+The canonical `burnlist.md` Active Checklist remains the ordered source of pending work. Its completed ledger supplies the burned items shown by this read-only view; the dashboard never replaces or silently mutates either source of truth.
diff --git a/ovens/differential-testing/detail.json b/ovens/differential-testing/detail.json
deleted file mode 100644
index e22872a..0000000
--- a/ovens/differential-testing/detail.json
+++ /dev/null
@@ -1,85 +0,0 @@
-{
-  "version": 1,
-  "columns": 12,
-  "rows": 14,
-  "rowHeight": 64,
-  "cells": [
-    {
-      "id": "title",
-      "title": "Differential Testing",
-      "widget": "status",
-      "source": "/",
-      "format": "plain",
-      "column": 1,
-      "row": 1,
-      "columnSpan": 4,
-      "rowSpan": 1
-    },
-    {
-      "id": "burns",
-      "title": "Results",
-      "widget": "pie-chart",
-      "source": "/log",
-      "format": "plain",
-      "column": 5,
-      "row": 1,
-      "columnSpan": 2,
-      "rowSpan": 1
-    },
-    {
-      "id": "fields",
-      "title": "Fields",
-      "widget": "metric",
-      "source": "/summary/fields",
-      "format": "plain",
-      "column": 7,
-      "row": 1,
-      "columnSpan": 3,
-      "rowSpan": 1
-    },
-    {
-      "id": "frames",
-      "title": "Frames",
-      "widget": "metric",
-      "source": "/summary/frames",
-      "format": "plain",
-      "column": 10,
-      "row": 1,
-      "columnSpan": 3,
-      "rowSpan": 1
-    },
-    {
-      "id": "progress",
-      "title": "Parity Progress",
-      "widget": "line-chart",
-      "source": "/progress",
-      "format": "number",
-      "column": 5,
-      "row": 2,
-      "columnSpan": 8,
-      "rowSpan": 5
-    },
-    {
-      "id": "log",
-      "title": "Parity Progress",
-      "widget": "log",
-      "source": "/log",
-      "format": "plain",
-      "column": 1,
-      "row": 2,
-      "columnSpan": 4,
-      "rowSpan": 5
-    },
-    {
-      "id": "field-details",
-      "title": "Field Details",
-      "widget": "comparison",
-      "source": "/fields",
-      "format": "plain",
-      "column": 1,
-      "row": 7,
-      "columnSpan": 12,
-      "rowSpan": 7
-    }
-  ]
-}
diff --git a/ovens/differential-testing/differential-testing.oven b/ovens/differential-testing/differential-testing.oven
new file mode 100644
index 0000000..e6803ee
--- /dev/null
+++ b/ovens/differential-testing/differential-testing.oven
@@ -0,0 +1,84 @@
+<oven id="differential-testing"
+      version="1"
+      contract="burnlist-differential-testing-data@1"
+      refresh-seconds="2"
+      theme="differential-testing">
+  <switch source="/pageMode">
+    <case value="empty">
+      <differential-empty-state title="Differential Testing"/>
+    </case>
+    <case value="detail">
+      <refresh-status source="/refresh"/>
+      <differential-kpi-strip source="/"/>
+
+      <mode-toggle id="progress-mode"
+                   initial="delta"
+                   aria-label="Differential Testing progress view">
+        <option value="progress" label="Progress"/>
+        <option value="failed" label="Failed"/>
+        <option value="delta" label="Delta"/>
+      </mode-toggle>
+      <switch mode-from="progress-mode">
+        <case value="progress">
+          <progress-chart source="/progress"/>
+        </case>
+        <case value="failed">
+          <progress-chart source="/progress"/>
+        </case>
+        <case value="delta">
+          <frame-delta-chart source="/progress"/>
+        </case>
+      </switch>
+
+      <differential-log-table source="/log"/>
+
+      <field-toolbar id="field-controls">
+        <search id="field-search"
+                placeholder="Search Fields..."
+                aria-label="Differential Testing search fields"
+                match-fields="/label /sourceOwner /driftClass /semantics/kind"
+                debounce-ms="150"/>
+        <mode-toggle id="value-mode"
+                     initial="delta"
+                     aria-label="Differential Testing chart mode">
+          <option value="current" label="Value"/>
+          <option value="delta" label="Delta"/>
+        </mode-toggle>
+        <sort-toggle id="changed-sort"
+                     key="changed"
+                     label="Changed"
+                     initial="on"
+                     requires-source="/telemetry/status"
+                     requires-value="comparable"
+                     unavailable-text="Changed is unavailable until comparable transition telemetry is published."/>
+        <filter-toggle id="failed-filter"
+                       key="non-pass"
+                       label="Failed"
+                       initial="off"/>
+      </field-toolbar>
+
+      <collection id="field-view"
+                  source="/fields"
+                  item-key="/id"
+                  search-from="field-search"
+                  sort-from="changed-sort"
+                  filter-from="failed-filter"
+                  paging="auto"
+                  page-size="25">
+        <field-list collection-from="field-view"
+                    mode-from="value-mode">
+          <bind prop="telemetryByField"
+                source="/telemetry/fields"
+                format="index-by-id"
+                optional="true"/>
+          <bind prop="telemetryAvailability"
+                source="/telemetry"
+                format="telemetry-availability"
+                optional="true"/>
+        </field-list>
+        <pagination collection-from="field-view"
+                    page-sizes="25 50 100 200"/>
+      </collection>
+    </case>
+  </switch>
+</oven>
diff --git a/ovens/differential-testing/engine/differential-testing-adapter-sdk.mjs b/ovens/differential-testing/engine/adapter-sdk.mjs
similarity index 81%
rename from ovens/differential-testing/engine/differential-testing-adapter-sdk.mjs
rename to ovens/differential-testing/engine/adapter-sdk.mjs
index 75ee096..f06d2cb 100644
--- a/ovens/differential-testing/engine/differential-testing-adapter-sdk.mjs
+++ b/ovens/differential-testing/engine/adapter-sdk.mjs
@@ -3,6 +3,6 @@ export {
   assertDifferentialTestingWorkerState,
   createDifferentialTestingWorker,
   readDifferentialTestingWorkerState,
-} from "./differential-testing-worker-runtime.mjs";
+} from "./worker-runtime.mjs";
 
 export const DIFFERENTIAL_TESTING_ADAPTER_SDK_VERSION = 3;
diff --git a/ovens/differential-testing/engine/differential-testing-adapter-sdk.test.mjs b/ovens/differential-testing/engine/adapter-sdk.test.mjs
similarity index 99%
rename from ovens/differential-testing/engine/differential-testing-adapter-sdk.test.mjs
rename to ovens/differential-testing/engine/adapter-sdk.test.mjs
index fc82ecd..56cd826 100644
--- a/ovens/differential-testing/engine/differential-testing-adapter-sdk.test.mjs
+++ b/ovens/differential-testing/engine/adapter-sdk.test.mjs
@@ -8,7 +8,7 @@ import {
   DIFFERENTIAL_TESTING_ADAPTER_SDK_VERSION,
   DIFFERENTIAL_TESTING_WORKER_STATE_SCHEMA,
   createDifferentialTestingWorker,
-} from "./differential-testing-adapter-sdk.mjs";
+} from "./adapter-sdk.mjs";
 
 test("SDK v3 persists one state before inbox deletion and handles projection-only events", async () => {
   assert.equal(DIFFERENTIAL_TESTING_ADAPTER_SDK_VERSION, 3);
diff --git a/ovens/differential-testing/engine/differential-testing-contract.mjs b/ovens/differential-testing/engine/contract.mjs
similarity index 88%
rename from ovens/differential-testing/engine/differential-testing-contract.mjs
rename to ovens/differential-testing/engine/contract.mjs
index 09216e2..5e0f770 100644
--- a/ovens/differential-testing/engine/differential-testing-contract.mjs
+++ b/ovens/differential-testing/engine/contract.mjs
@@ -9,4 +9,4 @@ export {
   buildDifferentialTelemetry,
   differentialStateVectorSha256,
   validateDifferentialTestingData,
-} from "./differential-testing-data-contract.mjs";
+} from "./data-contract.mjs";
diff --git a/ovens/differential-testing/engine/differential-testing-contract.test.mjs b/ovens/differential-testing/engine/contract.test.mjs
similarity index 100%
rename from ovens/differential-testing/engine/differential-testing-contract.test.mjs
rename to ovens/differential-testing/engine/contract.test.mjs
diff --git a/ovens/differential-testing/engine/differential-testing-data-contract.mjs b/ovens/differential-testing/engine/data-contract.mjs
similarity index 100%
rename from ovens/differential-testing/engine/differential-testing-data-contract.mjs
rename to ovens/differential-testing/engine/data-contract.mjs
diff --git a/ovens/differential-testing/engine/differential-testing-data-contract.test.mjs b/ovens/differential-testing/engine/data-contract.test.mjs
similarity index 98%
rename from ovens/differential-testing/engine/differential-testing-data-contract.test.mjs
rename to ovens/differential-testing/engine/data-contract.test.mjs
index 1c8ea80..2cbd917 100644
--- a/ovens/differential-testing/engine/differential-testing-data-contract.test.mjs
+++ b/ovens/differential-testing/engine/data-contract.test.mjs
@@ -20,8 +20,8 @@ import {
   differentialTestingLoadingMarkup,
   mountDifferentialTestingDashboard,
   startDifferentialTestingLiveUpdates,
-} from "../renderer/differential-testing-renderer.js";
-import { rollingStandardDeviationScores } from "../renderer/differential-testing-progress-chart.js";
+} from "../../../dashboard/src/oven/differential-testing-render/differential-testing-renderer.js";
+import { rollingStandardDeviationScores } from "../../../dashboard/src/oven/differential-testing-render/differential-testing-progress-chart.js";
 import {
   assertDifferentialTestingData,
   buildDifferentialTelemetry,
@@ -29,7 +29,7 @@ import {
   DIFFERENTIAL_TESTING_EXACT_AUTHORITY,
   DIFFERENTIAL_TESTING_TELEMETRY_AUTHORITY,
   validateDifferentialTestingData,
-} from "./differential-testing-data-contract.mjs";
+} from "./data-contract.mjs";
 
 const exampleDir = resolve(dirname(fileURLToPath(import.meta.url)), "../example");
 
@@ -417,7 +417,7 @@ test("empty scenario state rejects fake selection and retained data", async (t)
 
 test("renderer shows the clean no-scenarios state without a fake id", () => {
   const payload = buildPayload(...emptyCaptures());
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
   const root = { innerHTML: "", addEventListener() {}, querySelector: () => null, querySelectorAll: () => [] };
   const previousWindow = globalThis.window;
   globalThis.window = { addEventListener() {}, removeEventListener() {}, devicePixelRatio: 1, clearTimeout() {}, setTimeout() {} };
@@ -1067,7 +1067,7 @@ test("result and status consistency is strict", async (t) => {
 });
 
 test("removed ceremony keys are rejected with no compatibility path", async (t) => {
-  const schemaText = readFileSync(resolve(exampleDir, "../schema/differential-testing-data.schema.json"), "utf8");
+  const schemaText = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), "data.schema.json"), "utf8");
   for (const removedDefinition of ["exactCycles", "exactComparison", "exactBinding", "exactLifecycle", "telemetryGate", "cadenceFrames", "nextBoundary", "gateId"]) {
     assert.doesNotMatch(schemaText, new RegExp(`"${removedDefinition}"`, "u"));
   }
@@ -1198,7 +1198,7 @@ test("Changed renders telemetry transitions while primary field status stays fai
   candidate.telemetry = buildDifferentialTelemetry(baseline, candidate, provenance);
   assert.equal(differentialTelemetryFieldMap(candidate).size, candidate.fields.length);
 
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
   const controls = { value: "", focus() {}, setSelectionRange() {} };
   const root = {
     innerHTML: "",
@@ -1224,7 +1224,7 @@ test("Changed renders telemetry transitions while primary field status stays fai
 
 test("exact authority stays in the data contract without adding a non-template panel", () => {
   const payload = attachReadyExactSession(buildPayload(...populatedCaptures()));
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
   const controls = { value: "", focus() {}, setSelectionRange() {} };
   const root = {
     innerHTML: "",
@@ -1274,7 +1274,7 @@ test("dashboard Delta chart stays source-backed while the log reports frame adva
     validateDifferentialTestingData(payload).issues.filter((issue) => issue.path.endsWith(".frameDelta")),
     [],
   );
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
   const controls = { value: "", focus() {}, setSelectionRange() {} };
   const root = { innerHTML: "", addEventListener() {}, querySelector: () => controls, querySelectorAll: () => [] };
   const previousWindow = globalThis.window;
@@ -1344,7 +1344,7 @@ test("KPI failed totals use the same million compaction as total samples", () =>
     blocked: 463_605,
     uniqueTicks: 1_000,
   };
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
   const controls = { value: "", focus() {}, setSelectionRange() {} };
   const root = { innerHTML: "", addEventListener() {}, querySelector: () => controls, querySelectorAll: () => [] };
   const previousWindow = globalThis.window;
@@ -1360,7 +1360,7 @@ test("KPI failed totals use the same million compaction as total samples", () =>
 test("project payloads cannot rename the generic Differential Testing Oven", () => {
   const payload = buildPayload(...populatedCaptures());
   payload.title = "Project Alpha Differential Testing";
-  const oven = { name: "Differential Testing", detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = { name: "Differential Testing" };
   const controls = { value: "", focus() {}, setSelectionRange() {} };
   const root = { innerHTML: "", addEventListener() {}, querySelector: () => controls, querySelectorAll: () => [] };
   const previousWindow = globalThis.window;
@@ -1383,7 +1383,7 @@ test("Value charts merge contiguous failing reference intervals into bounded SVG
     field.samples = states.map((state, tick) => [tick, tick, tick + 1, state]);
     field.failedSampleCount = states.filter((state) => state !== 0).length;
     payload.fields = [field];
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
     const controls = { value: "", focus() {}, setSelectionRange() {} };
     const listeners = new Map();
     const root = { innerHTML: "", addEventListener(type, listener) { listeners.set(type, listener); }, querySelector: () => controls, querySelectorAll: () => [] };
@@ -1411,7 +1411,7 @@ test("Value charts merge contiguous failing reference intervals into bounded SVG
 test("default field ordering does not rescan the payload inside a sort comparator", () => {
   const payload = buildPayload(...populatedCaptures());
   payload.fields.indexOf = () => { throw new Error("quadratic field-order lookup"); };
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
   const controls = { value: "", focus() {}, setSelectionRange() {} };
   const root = { innerHTML: "", addEventListener() {}, querySelector: () => controls, querySelectorAll: () => [] };
   const previousWindow = globalThis.window;
@@ -1427,7 +1427,7 @@ test("scenario selector requests another published scenario and shows Loading",
   const payload = buildPayload(...populatedCaptures());
   const secondScenario = { ...payload.scenarioCatalog.scenarios[0], id: "fedcba9876543210", label: "Second scenario" };
   payload.scenarioCatalog.scenarios.push(secondScenario);
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
   const controls = { value: "", focus() {}, setSelectionRange() {} };
   const listeners = new Map();
   const root = { innerHTML: "", addEventListener(type, listener) { listeners.set(type, listener); }, querySelector: () => controls, querySelectorAll: () => [] };
@@ -1452,7 +1452,7 @@ test("first-row tick cadence and label clearance match the shared hybrid referen
   reference.samples = Array.from({ length: 21 }, (_, tick) => ({ tick, values: { position: tick, active: tick > 0 } }));
   candidate.samples = structuredClone(reference.samples);
   const payload = buildPayload(reference, candidate);
-  const oven = { detail: JSON.parse(readFileSync(resolve(exampleDir, "../detail.json"), "utf8")) };
+  const oven = {};
   const controls = { value: "", focus() {}, setSelectionRange() {} };
   const root = { innerHTML: "", addEventListener() {}, querySelector: () => controls, querySelectorAll: () => [] };
   const previousWindow = globalThis.window;
diff --git a/ovens/differential-testing/schema/differential-testing-data.schema.json b/ovens/differential-testing/engine/data.schema.json
similarity index 100%
rename from ovens/differential-testing/schema/differential-testing-data.schema.json
rename to ovens/differential-testing/engine/data.schema.json
diff --git a/ovens/differential-testing/engine/differential-testing-handler.mjs b/ovens/differential-testing/engine/handler.mjs
similarity index 98%
rename from ovens/differential-testing/engine/differential-testing-handler.mjs
rename to ovens/differential-testing/engine/handler.mjs
index 8773e38..dcd0fa8 100644
--- a/ovens/differential-testing/engine/differential-testing-handler.mjs
+++ b/ovens/differential-testing/engine/handler.mjs
@@ -3,14 +3,14 @@ import { realpathSync } from "node:fs";
 import { basename, dirname, relative, resolve } from "node:path";
 import { registerOvenHandler } from "../../../src/ovens/oven-registry.mjs";
 import { readTextFileWithLimit, safeStat } from "../../../src/server/fs-safe.mjs";
-import { assertDifferentialTestingData } from "./differential-testing-data-contract.mjs";
+import { assertDifferentialTestingData } from "./data-contract.mjs";
 import {
   DIFFERENTIAL_TESTING_PAGE_SCHEMA,
   isDifferentialTestingBundle,
   queryDifferentialTestingFieldPage,
   readDifferentialTestingBundleManifest,
   readDifferentialTestingBundleScenario,
-} from "./differential-testing-transport.mjs";
+} from "./transport.mjs";
 
 function differentialTestingIndexCache(ctx, path) {
   const readPath = resolve(realpathSync(dirname(path)), basename(path));
diff --git a/ovens/differential-testing/engine/transport-poll.test.mjs b/ovens/differential-testing/engine/transport-poll.test.mjs
new file mode 100644
index 0000000..e7b92f1
--- /dev/null
+++ b/ovens/differential-testing/engine/transport-poll.test.mjs
@@ -0,0 +1,316 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { startDifferentialTestingLiveUpdates } from "../../../dashboard/src/oven/differential-testing-render/differential-testing-renderer.js";
+
+const ovenUrl = "/api/ovens/differential-testing";
+const payloadUrl = "/api/oven-data/differential-testing";
+
+function compactPayload({ publishedAt = "2026-01-01T12:00:00.000Z", status = "complete", report = {} } = {}) {
+  return {
+    publishedAt,
+    refresh: { status, report },
+    telemetry: {
+      status: "comparable",
+      authority: "telemetry-only",
+      blockers: [],
+      summary: {},
+    },
+  };
+}
+
+function response(body, { status = 200, etag = 'W/"fixture"', ok = status >= 200 && status < 300 } = {}) {
+  return {
+    status,
+    ok,
+    headers: {
+      get(name) {
+        return name.toLowerCase() === "etag" ? etag : null;
+      },
+    },
+    async json() {
+      return body;
+    },
+  };
+}
+
+function deferred() {
+  let resolve;
+  const promise = new Promise((resolvePromise) => {
+    resolve = resolvePromise;
+  });
+  return { promise, resolve };
+}
+
+function tick() {
+  return new Promise((resolve) => setImmediate(resolve));
+}
+
+function createHarness({ respond, locationSearch = "", locationHref = "http://localhost/ovens/differential-testing/view", onError } = {}) {
+  const requests = [];
+  const updates = [];
+  const statuses = [];
+  const mountCalls = [];
+  const historyCalls = [];
+  const controller = startDifferentialTestingLiveUpdates({ innerHTML: "" }, {
+    locationImpl: { search: locationSearch, href: locationHref },
+    historyImpl: { replaceState(...args) { historyCalls.push(args); } },
+    fetchImpl(url, options) {
+      requests.push({ url, options });
+      return respond(url, options, requests);
+    },
+    setIntervalImpl: () => 0,
+    clearIntervalImpl() {},
+    mount(...args) {
+      mountCalls.push(args);
+      return {
+        update(...updateArgs) {
+          updates.push(updateArgs);
+        },
+        setClientRefreshStatus(status) {
+          statuses.push(status);
+        },
+        destroy() {},
+      };
+    },
+    onError,
+  });
+  return { controller, requests, updates, statuses, mountCalls, historyCalls };
+}
+
+function defaultRespond(url) {
+  return url === ovenUrl
+    ? response({ oven: { detail: { cells: [] } } })
+    : response({ payload: compactPayload() });
+}
+
+function payloadRequests(requests) {
+  return requests.filter(({ url }) => url.startsWith(payloadUrl));
+}
+
+test("stores an ETag and sends it only on the next request for that URL", async () => {
+  const harness = createHarness({ respond: defaultRespond });
+
+  await harness.controller.ready;
+  await harness.controller.refresh();
+
+  const requests = payloadRequests(harness.requests);
+  assert.equal(requests.length, 2);
+  assert.equal(requests[0].options.headers, undefined);
+  assert.deepEqual(requests[1].options.headers, { "If-None-Match": 'W/"fixture"' });
+  harness.controller.stop();
+});
+
+test("handles cached 304 responses and rejects a 304 before the first payload", async () => {
+  for (const [status, expectedStatus] of [["queued", "queued"], ["complete", null]]) {
+    let payloadCount = 0;
+    const harness = createHarness({
+      respond(url) {
+        if (url === ovenUrl) return response({ oven: { detail: { cells: [] } } });
+        payloadCount += 1;
+        return payloadCount === 1
+          ? response({ payload: compactPayload({ status }) })
+          : response(null, { status: 304, ok: false });
+      },
+    });
+
+    await harness.controller.ready;
+    await harness.controller.refresh();
+    assert.equal(harness.mountCalls.length, 1);
+    assert.equal(harness.updates.length, 0);
+    assert.deepEqual(harness.statuses, [expectedStatus]);
+    harness.controller.stop();
+  }
+
+  const errors = [];
+  const harness = createHarness({
+    respond(url) {
+      return url === ovenUrl
+        ? response({ oven: { detail: { cells: [] } } })
+        : response(null, { status: 304, ok: false });
+    },
+    onError(...args) {
+      errors.push(args);
+    },
+  });
+  await harness.controller.ready;
+  assert.equal(harness.mountCalls.length, 0);
+  assert.equal(errors.length, 1);
+  assert.match(errors[0][0].message, /304 before an initial payload/u);
+  assert.equal(errors[0][1], false);
+  harness.controller.stop();
+});
+
+test("drops a response from an older generation after scenario selection", async () => {
+  const stalePayload = deferred();
+  const freshPayload = deferred();
+  let payloadCount = 0;
+  const harness = createHarness({
+    respond(url) {
+      if (url === ovenUrl) return response({ oven: { detail: { cells: [] } } });
+      payloadCount += 1;
+      if (payloadCount === 1) return response({ payload: compactPayload() });
+      if (payloadCount === 2) return stalePayload.promise.then(() => response({ payload: compactPayload({ publishedAt: "stale" }) }));
+      return freshPayload.promise.then(() => response({ payload: compactPayload({ publishedAt: "fresh" }) }));
+    },
+  });
+
+  await harness.controller.ready;
+  const staleRefresh = harness.controller.refresh();
+  await tick();
+  assert.equal(payloadRequests(harness.requests).length, 2);
+  harness.controller.selectScenario("newid");
+  stalePayload.resolve();
+  await tick();
+  await tick();
+
+  assert.equal(harness.mountCalls.length, 1);
+  assert.equal(harness.updates.length, 0);
+  assert.equal(payloadRequests(harness.requests).at(-1).url, `${payloadUrl}?scenario=newid`);
+  freshPayload.resolve();
+  await tick();
+  await tick();
+  assert.equal(harness.updates.length, 1);
+  void staleRefresh;
+  harness.controller.stop();
+});
+
+test("coalesces refresh calls made while a refresh is in flight", async () => {
+  const firstPayload = deferred();
+  let payloadCount = 0;
+  const harness = createHarness({
+    respond(url) {
+      if (url === ovenUrl) return response({ oven: { detail: { cells: [] } } });
+      payloadCount += 1;
+      return payloadCount === 1
+        ? firstPayload.promise.then(() => response({ payload: compactPayload() }))
+        : response({ payload: compactPayload({ publishedAt: "second" }) });
+    },
+  });
+
+  const initial = harness.controller.ready;
+  await tick();
+  assert.equal(payloadRequests(harness.requests).length, 1);
+  harness.controller.refresh();
+  harness.controller.refresh();
+  firstPayload.resolve();
+  await initial;
+  await tick();
+  await tick();
+
+  assert.equal(payloadRequests(harness.requests).length, 2);
+  harness.controller.stop();
+});
+
+test("selectScenario updates history, clears its URL cache, and refetches the selected scenario", async () => {
+  let payloadCount = 0;
+  const harness = createHarness({
+    locationSearch: "?scenario=oldid",
+    locationHref: "http://localhost/ovens/differential-testing/view?scenario=oldid",
+    respond(url) {
+      if (url === ovenUrl) return response({ oven: { detail: { cells: [] } } });
+      payloadCount += 1;
+      return response({ payload: compactPayload({ publishedAt: String(payloadCount) }) }, { etag: `W/"${payloadCount}"` });
+    },
+  });
+
+  await harness.controller.ready;
+  await harness.controller.selectScenario("newid");
+  await harness.controller.refresh();
+  await harness.controller.selectScenario("newid");
+
+  const requests = payloadRequests(harness.requests);
+  assert.equal(requests[0].url, `${payloadUrl}?scenario=oldid`);
+  assert.equal(requests[1].url, `${payloadUrl}?scenario=newid`);
+  assert.equal(requests[1].options.headers, undefined);
+  assert.deepEqual(requests[2].options.headers, { "If-None-Match": 'W/"2"' });
+  assert.equal(requests[3].options.headers, undefined);
+  assert.ok(harness.historyCalls.length >= 1);
+  assert.ok(harness.historyCalls.some(([, , path]) => path.includes("scenario=newid")));
+  harness.controller.stop();
+});
+
+test("selectFieldView advances the view generation and sends every view parameter", async () => {
+  let payloadCount = 0;
+  const harness = createHarness({
+    respond(url) {
+      if (url === ovenUrl) return response({ oven: { detail: { cells: [] } } });
+      payloadCount += 1;
+      return response({ payload: compactPayload({ publishedAt: String(payloadCount) }) }, { etag: `W/"${payloadCount}"` });
+    },
+  });
+  const query = { search: "wheel force", filter: "failing", sort: "changed", page: 2, pageSize: 50 };
+
+  await harness.controller.ready;
+  await harness.controller.selectFieldView(query);
+  await harness.controller.refresh();
+  await harness.controller.selectFieldView(query);
+
+  const requests = payloadRequests(harness.requests);
+  const viewUrl = `${payloadUrl}?search=wheel+force&filter=failing&sort=changed&page=2&pageSize=50`;
+  assert.equal(requests[1].url, viewUrl);
+  assert.equal(requests[1].options.headers, undefined);
+  assert.deepEqual(requests[2].options.headers, { "If-None-Match": 'W/"2"' });
+  assert.equal(requests[3].options.headers, undefined);
+  harness.controller.stop();
+});
+
+test("reports refresh failures with and without an existing dashboard", async () => {
+  const dashboardErrors = [];
+  let payloadCount = 0;
+  const dashboardHarness = createHarness({
+    respond(url) {
+      if (url === ovenUrl) return response({ oven: { detail: { cells: [] } } });
+      payloadCount += 1;
+      if (payloadCount === 2) return Promise.reject(new Error("network offline"));
+      return response({ payload: compactPayload() });
+    },
+    onError(...args) {
+      dashboardErrors.push(args);
+    },
+  });
+  await dashboardHarness.controller.ready;
+  await dashboardHarness.controller.refresh();
+  assert.deepEqual(dashboardHarness.statuses, ["failed"]);
+  assert.equal(dashboardErrors.length, 1);
+  assert.equal(dashboardErrors[0][0].message, "network offline");
+  assert.equal(dashboardErrors[0][1], true);
+  dashboardHarness.controller.stop();
+
+  const firstLoadErrors = [];
+  const firstLoadHarness = createHarness({
+    respond(url) {
+      return url === ovenUrl
+        ? response({ error: "oven unavailable" }, { status: 503, ok: false })
+        : response({ payload: compactPayload() });
+    },
+    onError(...args) {
+      firstLoadErrors.push(args);
+    },
+  });
+  await firstLoadHarness.controller.ready;
+  assert.equal(firstLoadErrors.length, 1);
+  assert.equal(firstLoadErrors[0][0].message, "oven unavailable");
+  assert.equal(firstLoadErrors[0][1], false);
+  firstLoadHarness.controller.stop();
+});
+
+test("passes a pending refresh status without rerendering the same report", async () => {
+  let payloadCount = 0;
+  const harness = createHarness({
+    respond(url) {
+      if (url === ovenUrl) return response({ oven: { detail: { cells: [] } } });
+      payloadCount += 1;
+      return payloadCount === 1
+        ? response({ payload: compactPayload() }, { etag: 'W/"one"' })
+        : response({ payload: compactPayload({ publishedAt: "next", status: "running" }) }, { etag: 'W/"two"' });
+    },
+  });
+
+  await harness.controller.ready;
+  await harness.controller.refresh();
+  assert.equal(harness.mountCalls.length, 1);
+  assert.equal(harness.updates.length, 0);
+  assert.deepEqual(harness.statuses, ["running"]);
+  harness.controller.stop();
+});
diff --git a/ovens/differential-testing/engine/differential-testing-transport-renderer.test.mjs b/ovens/differential-testing/engine/transport-renderer.test.mjs
similarity index 97%
rename from ovens/differential-testing/engine/differential-testing-transport-renderer.test.mjs
rename to ovens/differential-testing/engine/transport-renderer.test.mjs
index 9738a58..380f581 100644
--- a/ovens/differential-testing/engine/differential-testing-transport-renderer.test.mjs
+++ b/ovens/differential-testing/engine/transport-renderer.test.mjs
@@ -13,7 +13,7 @@ import {
 import {
   differentialPagedPayload,
   startDifferentialTestingLiveUpdates,
-} from "../renderer/differential-testing-renderer.js";
+} from "../../../dashboard/src/oven/differential-testing-render/differential-testing-renderer.js";
 
 test("the package transport subpath exposes the stable bundle API", () => {
   assert.equal(DIFFERENTIAL_TESTING_BUNDLE_SCHEMA, "burnlist-differential-testing-bundle@1");
diff --git a/ovens/differential-testing/engine/differential-testing-transport-server.test.mjs b/ovens/differential-testing/engine/transport-server.test.mjs
similarity index 99%
rename from ovens/differential-testing/engine/differential-testing-transport-server.test.mjs
rename to ovens/differential-testing/engine/transport-server.test.mjs
index 921cff8..10f169e 100644
--- a/ovens/differential-testing/engine/differential-testing-transport-server.test.mjs
+++ b/ovens/differential-testing/engine/transport-server.test.mjs
@@ -14,7 +14,7 @@ import {
   DIFFERENTIAL_TESTING_FIELD_RECORD_SCHEMA,
   DIFFERENTIAL_TESTING_PAGE_SCHEMA,
   DIFFERENTIAL_TESTING_SCENARIO_SCHEMA,
-} from "./differential-testing-transport.mjs";
+} from "./transport.mjs";
 
 const scriptDirectory = dirname(fileURLToPath(import.meta.url));
 const serverPath = resolve(scriptDirectory, "../../../src/server/burnlist-dashboard-server.mjs");
diff --git a/ovens/differential-testing/engine/differential-testing-transport.mjs b/ovens/differential-testing/engine/transport.mjs
similarity index 99%
rename from ovens/differential-testing/engine/differential-testing-transport.mjs
rename to ovens/differential-testing/engine/transport.mjs
index b3c668b..cf793a0 100644
--- a/ovens/differential-testing/engine/differential-testing-transport.mjs
+++ b/ovens/differential-testing/engine/transport.mjs
@@ -13,7 +13,7 @@ import { dirname, isAbsolute, relative, resolve, sep } from "node:path";
 import {
   DIFFERENTIAL_TESTING_DATA_SCHEMA,
   assertDifferentialTestingData,
-} from "./differential-testing-data-contract.mjs";
+} from "./data-contract.mjs";
 
 export const DIFFERENTIAL_TESTING_BUNDLE_SCHEMA = "burnlist-differential-testing-bundle@1";
 export const DIFFERENTIAL_TESTING_SCENARIO_SCHEMA = "burnlist-differential-testing-scenario@1";
diff --git a/ovens/differential-testing/engine/differential-testing-worker-runtime.mjs b/ovens/differential-testing/engine/worker-runtime.mjs
similarity index 100%
rename from ovens/differential-testing/engine/differential-testing-worker-runtime.mjs
rename to ovens/differential-testing/engine/worker-runtime.mjs
diff --git a/ovens/differential-testing/example/adapter.mjs b/ovens/differential-testing/example/adapter.mjs
index ecc6a79..91cc4cd 100644
--- a/ovens/differential-testing/example/adapter.mjs
+++ b/ovens/differential-testing/example/adapter.mjs
@@ -4,7 +4,7 @@ import { mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
 import { dirname, resolve } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 
-import { assertDifferentialTestingData, DIFFERENTIAL_TESTING_DATA_SCHEMA } from "../engine/differential-testing-data-contract.mjs";
+import { assertDifferentialTestingData, DIFFERENTIAL_TESTING_DATA_SCHEMA } from "../engine/data-contract.mjs";
 
 const here = dirname(fileURLToPath(import.meta.url));
 
diff --git a/ovens/differential-testing/instructions.md b/ovens/differential-testing/instructions.md
index dba26f8..329d4a0 100644
--- a/ovens/differential-testing/instructions.md
+++ b/ovens/differential-testing/instructions.md
@@ -149,3 +149,35 @@ The shared renderer owns one project-neutral layout:
 - no separate exact-authority panel, alternate Cards/Table mode, or project-specific visual control
 
 There is no project-specific route, schema, title, path, command, or stylesheet in this recipe.
+
+## Oven Rendering
+
+The clean semantic template is `ovens/differential-testing/differential-testing.oven`.
+It declares contract `burnlist-differential-testing-data@1` and theme
+`differential-testing`, in the class-free, box-free style of
+`ovens/checklist/checklist.oven`: it has no `class=` attributes and no `<box>`
+wrappers. Shell and region chrome, default classes, and default ARIA come from
+the `differential-testing` theme entry in
+`dashboard/src/oven/runtime/theme-registry.ts` and the DT React components under
+`dashboard/src/oven/`, never from the `.oven`.
+
+The dashboard maps contract data to a pointer-addressable payload with
+`adaptDifferentialTesting` in `dashboard/src/lib/differential-testing-adapter.ts`.
+It renders `OvenRuntime({ ir, payload })` using the compiled IR at
+`ovens/differential-testing/differential-testing.ir.json`.
+
+The top-level data-driven `<switch source="/pageMode">` selects the empty shell
+or full detail. The adapter sets `pageMode` to `empty` when
+`scenarioCatalog.selectedScenarioId` is `null`, and to `detail` otherwise.
+
+Interactivity is pure semantic data wired by id: the `progress-mode` switch,
+the field collection's `search-from`, `sort-from`, and `filter-from` controls,
+the `value-mode` toggle, and pagination. These bindings describe state; the
+runtime and themed components implement the behavior.
+
+The DOM-golden gate is
+`dashboard/src/oven/runtime/differential-testing-oven-dom-golden.test.mjs`.
+It checks that the `OvenRuntime` render is DOM-normalized-equal to the 12
+byte-frozen goldens in `dashboard/src/oven/differential-testing-render/goldens/dt-*.html`,
+covering empty, main, paged, sorted-filtered, telemetry, chart-mode, and
+progress-mode states.
diff --git a/ovens/differential-testing/renderer/differential-testing-renderer.js b/ovens/differential-testing/renderer/differential-testing-renderer.js
deleted file mode 100644
index 03cc733..0000000
--- a/ovens/differential-testing/renderer/differential-testing-renderer.js
+++ /dev/null
@@ -1,1988 +0,0 @@
-import {
-  renderDifferentialTestingFrameDeltaChart,
-  renderDifferentialTestingProgressChart,
-} from "./differential-testing-progress-chart.js";
-
-function escapeHtml(value) {
-  return String(value ?? "")
-    .replaceAll("&", "&amp;")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;");
-}
-
-export function differentialTestingLoadingMarkup() {
-  const title = `<div class="driving-parity-kpi-item driving-parity-kpi-title-item">
-      <span class="driving-parity-kpi-heading differential-scenario-heading">Scenario</span>
-      <span class="driving-parity-kpi-title-subtitle"><span class="differential-scenario-control"><select aria-label="Differential Testing scenario" disabled><option selected>Loading scenario…</option></select></span></span>
-    </div>`;
-  const template = differentialTestingDashboardTemplateMarkup()
-    .replace('<main id="burnlist-detail" class="detail-view" hidden>', '<main id="burnlist-detail" class="detail-view">')
-    .replace('<section class="differential-overview" id="differential-overview" hidden>', '<section class="differential-overview" id="differential-overview">')
-    .replace('<div class="driving-parity-kpi-strip" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"></div>', `<div class="driving-parity-kpi-strip" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs">${title}</div>`)
-    .replace('<h2 id="progress-panel-title">Progress</h2>', '<h2 id="progress-panel-title">Parity Progress</h2>')
-    .replace('<button type="button" data-progress-chart-mode="failed">', '<button type="button" data-progress-chart-mode="failed" aria-pressed="false">')
-    .replace('<button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta">', '<button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="true">')
-    .replace('<main id="driving-parity-page" class="driving-parity-page" hidden>', '<main id="driving-parity-page" class="driving-parity-page">')
-    .replace('<h2 id="driving-parity-summary" class="driving-parity-summary" hidden></h2>', '<h2 id="driving-parity-summary" class="driving-parity-summary">Fields List</h2>')
-    .replace('<div id="driving-parity-controls" class="driving-parity-controls" hidden>', '<div id="driving-parity-controls" class="driving-parity-controls">');
-  return `<div class="differential-testing-loading" aria-busy="true">
-    <span class="differential-loading-sr" role="status">Loading Differential Testing</span>
-    <div class="differential-testing-loading-visual" aria-hidden="true" inert>${template}</div>
-  </div>`;
-}
-
-function differentialTestingDashboardTemplateMarkup() {
-  return mountDifferentialTestingDashboard(null, null, null, { templateOnly: true });
-}
-
-export function differentialSampleStateIsNonPass(sampleState) {
-  return sampleState !== 0;
-}
-
-export function differentialPayloadRevision(payload) {
-  return JSON.stringify(payload ?? null);
-}
-
-export function differentialRefreshStatusLabel(refresh, clientStatus = null) {
-  if (clientStatus === "loading") return "Loading";
-  if (clientStatus === "queued") return "Queued";
-  if (clientStatus === "running") return "Updating";
-  if (clientStatus === "failed") return "Update failed";
-  if (refresh?.status === "queued") return "Queued";
-  if (refresh?.status === "running") return "Updating";
-  if (refresh?.status === "failed") return "Update failed";
-  return "";
-}
-
-export function differentialHistoryPoints(points) {
-  return Array.isArray(points) ? points.slice() : [];
-}
-
-export function differentialProgressChartHistory(payload, { mode = "value" } = {}) {
-  const points = differentialHistoryPoints(payload?.progress);
-  return points.map((point) => {
-    const total = Math.max(0, Number(point.frames) || 0);
-    const rawValue = mode === "delta" ? point.frameDelta : point.frame;
-    const value = rawValue === null || rawValue === undefined ? 0 : Math.max(0, Number(rawValue) || 0);
-    return {
-      time: point.timestamp,
-      percent: total ? value / total * 100 : 0,
-      done: value,
-      remaining: Math.max(0, total - value),
-      total,
-    };
-  });
-}
-
-export function differentialExactPrefixFrameDeltaMetrics(payload, metrics) {
-  const ratios = metrics?.frameDeviationRatios;
-  const latest = Array.isArray(payload?.progress) ? payload.progress.at(-1) : null;
-  const clearedFrame = Number(latest?.frame);
-  const frameCount = Number(latest?.frames);
-  if (!Array.isArray(ratios) || !Number.isSafeInteger(clearedFrame) || !Number.isSafeInteger(frameCount)
-    || frameCount !== ratios.length || clearedFrame < 0 || clearedFrame > frameCount
-    || ratios.some((value) => !Number.isFinite(Number(value)) || Number(value) < 0)) return null;
-  return {
-    ...metrics,
-    frameDeviationRatios: ratios.map((value, frame) => frame < clearedFrame ? 0 : Number(value)),
-    firstFailingFrame: clearedFrame < frameCount ? clearedFrame : -1,
-  };
-}
-
-export function differentialTelemetryFieldMap(payload) {
-  if (payload?.telemetry?.status !== "comparable" || !Array.isArray(payload.telemetry.fields)) return new Map();
-  return new Map(payload.telemetry.fields.map((field) => [field.id, field]));
-}
-
-export function differentialPagedPayload(payload, fieldPage) {
-  if (!fieldPage) return payload;
-  const fields = Array.isArray(fieldPage.fields) ? fieldPage.fields : [];
-  const next = { ...payload, fields };
-  if (payload?.telemetry?.status === "comparable") {
-    next.telemetry = {
-      ...payload.telemetry,
-      fields: Array.isArray(fieldPage.telemetryFields) ? fieldPage.telemetryFields : [],
-    };
-  }
-  return next;
-}
-
-export function differentialTelemetryAvailability(payload) {
-  const telemetry = payload?.telemetry;
-  if (telemetry?.status === "comparable" && Array.isArray(telemetry.fields)) {
-    return { status: "comparable", reason: "" };
-  }
-  if (telemetry?.status === "blocked") {
-    return {
-      status: "blocked",
-      reason: Array.isArray(telemetry.blockers) && telemetry.blockers.length
-        ? telemetry.blockers.join(" · ")
-        : "Changed is unavailable because transition telemetry is blocked.",
-    };
-  }
-  return {
-    status: "unavailable",
-    reason: "Changed is unavailable until comparable transition telemetry is published.",
-  };
-}
-
-export function differentialExactTarget(payload) {
-  const exact = payload?.exactSession;
-  if (!exact) return { mode: "aggregate", status: "absent", fieldId: null, label: null, reason: "" };
-  if (exact.strategy !== "exact-first") {
-    return { mode: "exact", status: "blocked", fieldId: null, label: null, reason: "The published exact session has an invalid strategy." };
-  }
-  if (exact.status !== "ready") {
-    return {
-      mode: "exact",
-      status: exact.status === "complete" ? "complete" : "blocked",
-      fieldId: null,
-      label: null,
-      reason: exact.status === "complete"
-        ? "Exact contract is complete; scenario PASS or FAIL is reported separately."
-        : exact.blockers?.[0] || "Exact target authority is blocked.",
-    };
-  }
-  const decision = exact.decision;
-  if (decision?.kind !== "runtime-change" || !decision?.targetFieldId) {
-    return { mode: "exact", status: "no-target", fieldId: null, label: null, reason: decision?.nextAction || "The checked exact session names no target." };
-  }
-  return { mode: "exact", status: "ready", fieldId: decision.targetFieldId, label: decision.targetLabel, reason: decision.nextAction };
-}
-
-export function mountDifferentialTestingDashboard(root, oven, payload, {
-  onScenarioChange = () => {},
-  onFieldViewChange = () => {},
-  fieldPage = null,
-  frameDeltaMetrics = null,
-  initialChart = "delta",
-  initialProgressChart = "delta",
-  templateOnly = false,
-} = {}) {
-  if (templateOnly) return templateHtml();
-  const WIDTH = 900;
-  const HEIGHT = 58;
-  const GREEN = "#61d394";
-  const RED = "#ef4444";
-  const telemetryAvailability = differentialTelemetryAvailability(payload);
-  const state = {
-    chart: initialChart === "current" ? "current" : "delta",
-    progressChart: initialProgressChart,
-    sort: fieldPage?.sort ?? (telemetryAvailability.status === "comparable" ? "changed" : "default"),
-    filter: fieldPage?.filter ?? "all",
-    search: fieldPage?.search ?? "",
-    pageIndex: fieldPage?.page ?? 0,
-    pageSize: fieldPage?.pageSize ?? 25,
-    expanded: new Set(),
-    telemetryByField: differentialTelemetryFieldMap(payload),
-    telemetryAvailability,
-    clientRefreshStatus: null,
-    pendingScenarioId: null,
-    oven,
-    payload,
-    fieldPage,
-    frameDeltaMetrics,
-  };
-  let inputRenderTimer = 0;
-  let fieldOrder = new Map(payload.fields.map((field, index) => [field, index]));
-
-  root.className = "shell driving-parity-view";
-
-  function count(value) { return Number(value || 0).toLocaleString("en-US"); }
-  function kpiTotal(value) {
-    const number = Math.max(0, Number(value) || 0);
-    return number >= 1e6 ? `${count(Math.floor(number / 1e3))}k` : count(number);
-  }
-  function percent(value) {
-    const number = Math.max(0, Number(value) || 0);
-    if (number > 0 && number < .01) return "<0.01%";
-    if (number > 0 && number < .1) return `${number.toFixed(2)}%`;
-    return `${number.toFixed(1).replace(/\.0$/, "")}%`;
-  }
-  function value(value) {
-    if (value === null || !Number.isFinite(Number(value))) return "n/a";
-    const number = Number(value);
-    if (Number.isInteger(number)) return count(number);
-    return number.toFixed(Math.abs(number) < 0.1 ? 6 : 4);
-  }
-  function blockers(source) {
-    return Array.isArray(source) ? source.map((entry) => String(entry || "").trim()).filter(Boolean) : [];
-  }
-  function unique(values) {
-    return [...new Set(values.filter(Boolean))];
-  }
-  function trustBlockerSummaries(payload) {
-    const result = [];
-    const append = (label, status, entries) => {
-      if (status !== "blocked") return;
-      const reasons = blockers(entries);
-      result.push(`${label} blocked${reasons.length ? `: ${reasons.join("; ")}` : ""}`);
-    };
-    append("primary", payload?.trust?.status, payload?.trust?.blockers);
-    append("telemetry", payload?.telemetry?.status, payload?.telemetry?.blockers);
-    append("exact", payload?.exactSession?.status, payload?.exactSession?.blockers);
-    return unique(result);
-  }
-  function scenarioSelector() {
-    const catalog = state.payload.scenarioCatalog;
-    const scenarios = Array.isArray(catalog?.scenarios) ? catalog.scenarios : [];
-    const selected = state.pendingScenarioId || catalog?.selectedScenarioId || "";
-    const options = scenarios.map((scenario) => `<option value="${escapeHtml(scenario.id)}"${scenario.id === selected ? " selected" : ""}>${escapeHtml(scenario.id)}</option>`).join("");
-    return `<span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario"${scenarios.length < 2 ? " disabled" : ""}>${options}</select></span>`;
-  }
-  function refreshStatus() {
-    const status = differentialRefreshStatusLabel(state.payload.refresh, state.clientRefreshStatus);
-    const statusTitle = state.payload.refresh?.status === "failed" ? state.payload.refresh.error || status : status;
-    return `<span id="differential-refresh-status" class="differential-refresh-status ${escapeHtml(state.clientRefreshStatus || state.payload.refresh?.status || "")}" title="${escapeHtml(statusTitle)}"${status ? "" : " hidden"}>${escapeHtml(status)}</span>`;
-  }
-  function nonPass(field) { return Number(field.failedSampleCount || 0) + Number(field.missingSampleCount || 0); }
-  function fieldResult(field) { return field.trustStatus === "blocked" || field.missingSampleCount > 0 ? "BLOCKED" : field.failedSampleCount > 0 ? "FAIL" : "PASS"; }
-  function telemetryFor(field) { return state.telemetryByField.get(field.id) ?? null; }
-  function telemetryChange(field) {
-    const telemetry = telemetryFor(field);
-    return telemetry ? Number(telemetry.failToPassCount || 0) + Number(telemetry.passToFailCount || 0) : 0;
-  }
-  function timeOnly(timestamp) {
-    const date = new Date(timestamp);
-    return Number.isNaN(date.getTime()) ? timestamp : new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false }).format(date);
-  }
-  function dateTime(timestamp) {
-    const date = new Date(timestamp);
-    return Number.isNaN(date.getTime()) ? timestamp : new Intl.DateTimeFormat(undefined, {
-      year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit", second: "2-digit",
-    }).format(date);
-  }
-  function overviewTime(timestamp) {
-    const date = new Date(timestamp);
-    if (Number.isNaN(date.getTime())) return escapeHtml(timestamp);
-    const day = new Intl.DateTimeFormat(undefined, { year: "numeric", month: "short", day: "numeric" }).format(date);
-    const time = new Intl.DateTimeFormat(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit" }).format(date);
-    return `<span>${escapeHtml(day)}</span><span class="sep" aria-hidden="true">·</span><span>${escapeHtml(time)}</span>`;
-  }
-  function formatLogRelativeMinutes(time, now = Date.now()) {
-    const timestamp = new Date(time).getTime();
-    const base = new Date(now).getTime();
-    if (!Number.isFinite(timestamp) || !Number.isFinite(base)) return "";
-    const minutes = Math.max(0, Math.floor((base - timestamp) / 60_000));
-    return minutes === 0 ? "now" : minutes + "m";
-  }
-  function kpiItem({ className, title, visual = "", heading, headingClass = "", value, valueClass = "" }) {
-    const modifier = className ? ` ${className}` : "";
-    const section = visual ? " driving-parity-kpi-section" : "";
-    const labelClass = headingClass ? ` ${headingClass}` : "";
-    const valueModifier = valueClass ? ` ${valueClass}` : "";
-    const content = `<span class="driving-parity-kpi-heading${labelClass}">${escapeHtml(heading)}</span><span class="${visual ? "driving-parity-kpi-ratio" : "driving-parity-kpi-title-subtitle"}${valueModifier}">${value}</span>`;
-    return `<div class="driving-parity-kpi-item${section}${modifier}" title="${escapeHtml(title)}">${visual}${visual ? `<div class="driving-parity-kpi-text">${content}</div>` : content}</div>`;
-  }
-  function burnDonut(entries) {
-    const groups = { improved: 0, worsened: 0, unchanged: 0, reverted: 0 };
-    for (const entry of entries) {
-      if (entry.result === "improved" || entry.result === "pass") groups.improved += 1;
-      else if (entry.result === "worsened") groups.worsened += 1;
-      else if (entry.result === "blocked" || entry.result === "reverted") groups.reverted += 1;
-      else groups.unchanged += 1;
-    }
-    const active = Object.entries(groups).filter(([, amount]) => amount > 0).sort((left, right) => right[1] - left[1]);
-    const total = active.reduce((sum, [, amount]) => sum + amount, 0);
-    const gap = active.length > 1 ? (58 / 40) / (2 * Math.PI * 21) * 100 : 0;
-    let offset = 0;
-    const circles = active.map(([name, amount]) => {
-      const share = amount / Math.max(1, total) * 100;
-      const dash = Math.max(0, share - gap);
-      const color = name === "unchanged" ? "neutral" : name;
-      const circle = `<circle class="driving-parity-kpi-burns-donut-segment ${color}" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="${dash.toFixed(3)} ${(100 - dash).toFixed(3)}" stroke-dashoffset="${(-(offset + gap / 2)).toFixed(3)}"/>`;
-      offset += share;
-      return circle;
-    }).join("");
-    const improvedPercent = total ? groups.improved / total * 100 : 0;
-    return kpiItem({
-      className: "driving-parity-kpi-burns",
-      title: "Results across the current Differential Testing run",
-      visual: `<svg class="driving-parity-kpi-gauge driving-parity-kpi-burns-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-burns-donut-track" cx="29" cy="29" r="21"${total ? ' opacity="0"' : ""}/>${circles}</svg>`,
-      heading: "Results",
-      valueClass: "driving-parity-kpi-burns-summary",
-      value: `<span class="neutral">${count(groups.unchanged)}</span><span class="separator">·</span><span class="reverted">${count(groups.reverted)}</span><span class="separator">·</span><span class="worsened">${count(groups.worsened)}</span><span class="separator">·</span><span class="improved">${count(groups.improved)} (${percent(improvedPercent)})</span>`,
-    });
-  }
-  function progressDonut(entries) {
-    const latest = entries.at(-1);
-    const total = Math.max(0, Number(latest?.frames) || 0);
-    const done = Math.max(0, Math.min(total, Number(latest?.frame) || 0));
-    const donePercent = total ? done / total * 100 : 0;
-    const remainingPercent = Math.max(0, 100 - donePercent);
-    return kpiItem({
-      className: "driving-parity-kpi-progress",
-      title: `${count(done)} of ${count(total)} exact-prefix frames cleared`,
-      visual: `<svg class="driving-parity-kpi-gauge driving-parity-kpi-progress-donut" viewBox="0 0 58 58" aria-hidden="true"><circle class="driving-parity-kpi-progress-donut-track" cx="29" cy="29" r="21"/><circle class="driving-parity-kpi-progress-donut-segment" cx="29" cy="29" r="21" pathLength="100" transform="rotate(-90 29 29)" stroke-dasharray="${donePercent.toFixed(3)} ${remainingPercent.toFixed(3)}"/></svg>`,
-      heading: "Progress",
-      value: `<span class="fail">${count(total)}</span><span class="separator">·</span><span class="pass">${count(done)} (${percent(donePercent)})</span>`,
-    });
-  }
-  function waffleMetric(metric, label) {
-    const failed = Number(metric.failed || 0) + Number(metric.blocked || 0);
-    const ratio = metric.total ? failed / metric.total : 0;
-    const failedCells = Math.min(80, Math.round(ratio * 96));
-    return kpiItem({
-      className: `driving-parity-kpi-${label.toLowerCase()}`,
-      title: `${percent(ratio * 100)} failed ${label.toLowerCase()}`,
-      visual: `<canvas class="driving-parity-kpi-waffle" aria-hidden="true" data-failed-cells="${failedCells}" data-empty="${metric.total ? "false" : "true"}"></canvas>`,
-      heading: label,
-      value: `<span class="total">${kpiTotal(metric.total)}</span><span class="separator">·</span><span class="fail">${kpiTotal(failed)} (${percent(ratio * 100)})</span>`,
-    });
-  }
-  function paintWaffles() {
-    const scale = window.devicePixelRatio || 1;
-    root.querySelectorAll("canvas.driving-parity-kpi-waffle").forEach((waffle) => {
-      waffle.style.transform = "";
-      const box = waffle.getBoundingClientRect();
-      const dx = Math.round(box.x * scale) / scale - box.x;
-      const dy = Math.round(box.y * scale) / scale - box.y;
-      if (Math.abs(dx) > .001 || Math.abs(dy) > .001) waffle.style.transform = `translate(${dx.toFixed(3)}px, ${dy.toFixed(3)}px)`;
-      const cssWidth = Math.max(1, Math.round(box.width));
-      const cssHeight = Math.max(1, Math.round(box.height));
-      const bitmapWidth = Math.max(1, Math.round(cssWidth * scale));
-      const bitmapHeight = Math.max(1, Math.round(cssHeight * scale));
-      if (waffle.width !== bitmapWidth) waffle.width = bitmapWidth;
-      if (waffle.height !== bitmapHeight) waffle.height = bitmapHeight;
-      const context = waffle.getContext("2d");
-      if (!context) return;
-      context.setTransform(scale, 0, 0, scale, 0, 0);
-      context.clearRect(0, 0, cssWidth, cssHeight);
-      const failedCells = Math.max(0, Math.min(80, Number(waffle.dataset.failedCells) || 0));
-      const styles = getComputedStyle(document.documentElement);
-      const passColor = styles.getPropertyValue("--driving-parity-kpi-green").trim() || GREEN;
-      const failColor = styles.getPropertyValue("--driving-parity-kpi-red").trim() || RED;
-      for (let index = 0; index < 80; index += 1) {
-        const row = Math.floor(index / 10);
-        const column = index % 10;
-        const rightColumnRank = (9 - column) * 8 + (7 - row);
-        const empty = waffle.dataset.empty === "true";
-        context.globalAlpha = empty ? .2 : rightColumnRank < failedCells ? 1 : .34;
-        context.fillStyle = empty ? "rgb(168,168,168)" : rightColumnRank < failedCells ? failColor : passColor;
-        context.fillRect(Math.max(0, cssWidth - 39) + column * 4, Math.max(0, Math.floor((cssHeight - 31) / 2)) + row * 4, 3, 3);
-      }
-      context.globalAlpha = 1;
-      context.setTransform(1, 0, 0, 1, 0, 0);
-    });
-  }
-  function progress() {
-    return `<svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>`;
-  }
-  function compact(value) {
-    const number = Number(value) || 0;
-    if (Math.abs(number) >= 1e6) return `${(number / 1e6).toFixed(1)}m`;
-    if (Math.abs(number) >= 1e3) return `${Math.round(number / 1e3)}k`;
-    return String(Math.round(number));
-  }
-  function log(entries, now = Date.now()) {
-    const visibleEntries = entries.slice(0, 8);
-    const rows = visibleEntries.map((entry) => {
-      const frameDelta = entry.frameDelta === null || !Number.isFinite(Number(entry.frameDelta)) ? null : Number(entry.frameDelta);
-      const stateClass = frameDelta > 0 ? "improved" : frameDelta < 0 ? "worsened" : "unchanged";
-      const deltaPercent = frameDelta === null || !Number(entry.frames) ? null : Math.abs(frameDelta) / Number(entry.frames) * 100;
-      const marker = stateClass === "improved" ? "▲" : stateClass === "worsened" ? "▼" : "⦁";
-      const deltaText = deltaPercent === null ? "—" : percent(deltaPercent);
-      const resultText = frameDelta === null ? "—" : count(Math.abs(frameDelta));
-      const result = marker !== "⦁"
-        ? `<span class="log-delta-content"><span class="log-delta-indicator">${marker}</span><span>${resultText}</span></span>`
-        : resultText;
-      const frame = !Number.isSafeInteger(Number(entry.frame)) ? "—" : count(entry.frame);
-      const done = !Number.isSafeInteger(Number(entry.frame)) || !Number(entry.frames) ? "—" : `${Math.round(Math.max(0, Math.min(1, Number(entry.frame) / Number(entry.frames))) * 100)}%`;
-      return `<article class="log-row ${escapeHtml(stateClass)} no-detail log-table-row"><span class="log-table-cell age">${escapeHtml(formatLogRelativeMinutes(entry.timestamp, now))}</span><span class="log-table-cell failed ${escapeHtml(stateClass)}">${frame}</span><span class="log-table-cell result ${escapeHtml(stateClass)}">${result}</span><span class="log-table-cell delta ${escapeHtml(stateClass)}">${deltaText}</span><span class="log-table-cell done">${done}</span></article>`;
-    }).join("");
-    const placeholders = Array.from(
-      { length: Math.max(0, 8 - visibleEntries.length) },
-      () => '<article class="log-row no-detail log-table-row log-placeholder-row" aria-hidden="true"><span class="log-table-cell age">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span><span class="log-table-cell">.</span></article>',
-    ).join("");
-    const columns = ["Age", "Frame", "Result", "Delta", "Done"];
-    return `<div class="checklist-log-list"><div class="checklist-log-table-header">${columns.map((column) => `<span>${column}</span>`).join("")}</div>${rows}${placeholders}</div>`;
-  }
-  function plotValue(raw, categories) {
-    if (typeof raw === "number" && Number.isFinite(raw)) return raw;
-    if (typeof raw === "boolean") return raw ? 1 : 0;
-    if (typeof raw === "string") { if (!categories.has(raw)) categories.set(raw, categories.size); return categories.get(raw); }
-    return null;
-  }
-  function paths(points) {
-    const result = [];
-    let current = "";
-    for (const point of points) {
-      if (!point) { if (current) result.push(current); current = ""; continue; }
-      current += `${current ? "L" : "M"}${point[0].toFixed(2)},${point[1].toFixed(2)}`;
-    }
-    if (current) result.push(current);
-    return result;
-  }
-  function chart(field, showFrameLabels = false, chartMode = state.chart) {
-    const categories = new Map();
-    const rows = field.samples.map(([tick, reference, candidate, sampleState]) => ({ tick, reference: plotValue(reference, categories), candidate: plotValue(candidate, categories), state: sampleState }));
-    const x = (index) => rows.length <= 1 ? 0 : index / (rows.length - 1) * WIDTH;
-    const exactFailure = (index) => {
-      const row = rows[index];
-      if (!row) return false;
-      return differentialSampleStateIsNonPass(row.state);
-    };
-    const intervalFails = (index) => exactFailure(index) || exactFailure(index + 1);
-    const frameStep = (() => {
-      if (rows.length <= 1) return 0;
-      const raw = Math.max(1, rows.length / 10);
-      const magnitude = 10 ** Math.floor(Math.log10(raw));
-      for (const multiplier of [1, 2, 2.5, 5, 10]) {
-        const step = Math.max(1, Math.round(multiplier * magnitude));
-        if (step >= raw) return step;
-      }
-      return 1;
-    })();
-    const tickIndexes = [];
-    for (let index = frameStep; index < rows.length - 1; index += frameStep * 2) tickIndexes.push(index);
-    const tickMarks = tickIndexes.map((index) => `<line class="frame-tick" x1="${x(index).toFixed(1)}" x2="${x(index).toFixed(1)}" y1="${showFrameLabels ? 13 : 0}" y2="${HEIGHT}" stroke="rgba(168, 168, 168, 0.075)" stroke-width="1" vector-effect="non-scaling-stroke" shape-rendering="crispEdges"/>`).join("");
-    const tickLabels = showFrameLabels
-      ? tickIndexes.map((index) => `<span class="frame-tick-label" style="left:${(index / Math.max(1, rows.length - 1) * 100).toFixed(4)}%">${escapeHtml(field.sampleLabels?.[index] || Math.round(rows[index].tick))}</span>`).join("")
-      : "";
-    const segment = (start, end, trimStart = 0, trimEnd = 0) => {
-      let [x1, y1] = start, [x2, y2] = end;
-      const dx = x2 - x1, dy = y2 - y1, length = Math.max(Math.hypot(dx, dy), .000001);
-      const first = Math.min(trimStart, length / 2), last = Math.min(trimEnd, length / 2);
-      x1 += dx / length * first; y1 += dy / length * first;
-      x2 -= dx / length * last; y2 -= dy / length * last;
-      return { path: `M${x1.toFixed(1)},${y1.toFixed(1)}L${x2.toFixed(1)},${y2.toFixed(1)}`, length: Math.hypot(x2 - x1, y2 - y1), x2, y2 };
-    };
-    const bands = (failed, points) => {
-      const result = [];
-      for (let index = 0; index < rows.length - 1; index += 1) {
-        if (intervalFails(index) !== failed || !points[index] || !points[index + 1]) continue;
-        const start = index;
-        while (index + 1 < rows.length - 1 && intervalFails(index + 1) === failed && points[index + 1] && points[index + 2]) index += 1;
-        result.push(`<rect x="${x(start).toFixed(1)}" y="0" width="${Math.max(1, x(index + 1) - x(start)).toFixed(1)}" height="${HEIGHT}" fill="${failed ? RED : GREEN}" opacity="${failed ? ".14" : ".10"}"/>`);
-      }
-      return result.join("");
-    };
-    if (chartMode === "delta") {
-      const values = rows.map((row) => row.reference === null || row.candidate === null ? null : row.candidate - row.reference);
-      const finite = values.filter(Number.isFinite);
-      if (!finite.length) return '<div class="plot"></div>';
-      const maxAbs = Math.max(.000001, ...finite.map((entry) => Math.abs(entry)));
-      const limit = maxAbs + Math.max(maxAbs * .16, .000001);
-      const y = (entry) => HEIGHT - (entry + limit) / (limit * 2) * HEIGHT;
-      const points = values.map((entry, index) => entry === null ? null : [x(index), y(entry)]);
-      const passed = [], failed = [];
-      for (let index = 0; index < rows.length - 1; index += 1) {
-        if (!points[index] || !points[index + 1]) continue;
-        const isFailed = intervalFails(index);
-        const line = segment(points[index], points[index + 1], !isFailed && index > 0 && intervalFails(index - 1) ? 1.2 : 0, !isFailed && index + 1 < rows.length - 1 && intervalFails(index + 1) ? 1.2 : 0).path;
-        (isFailed ? failed : passed).push(line);
-      }
-      return `<div class="plot"><svg viewBox="0 0 ${WIDTH} ${HEIGHT}" preserveAspectRatio="none">${bands(false, points)}${bands(true, points)}${tickMarks}<line x1="0" x2="${WIDTH}" y1="${y(0)}" y2="${y(0)}" stroke="${GREEN}" stroke-width="1.05" stroke-dasharray="5 4" opacity=".58" vector-effect="non-scaling-stroke"/>${passed.length ? `<path d="${passed.join(" ")}" fill="none" stroke="${GREEN}" stroke-width="1.55" opacity=".8" vector-effect="non-scaling-stroke"/>` : ""}${failed.length ? `<path d="${failed.join(" ")}" fill="none" stroke="${RED}" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/>` : ""}</svg>${tickLabels}</div>`;
-    }
-    const finite = rows.flatMap((row) => [row.reference, row.candidate]).filter(Number.isFinite);
-    const min = Math.min(...finite, 0), max = Math.max(...finite, 0);
-    const pad = Math.max((max - min) * .16, Math.abs(max || min || 1) * .03, .000001);
-    const low = min - pad, high = max + pad, span = Math.max(high - low, .000001);
-    const y = (entry) => HEIGHT - (entry - low) / span * HEIGHT;
-    const reference = rows.map((row, index) => row.reference === null ? null : [x(index), y(row.reference)]);
-    const candidate = rows.map((row, index) => row.candidate === null ? null : [x(index), y(row.candidate)]);
-    const allMatch = !rows.some((_, index) => exactFailure(index));
-    if (allMatch) {
-      const match = paths(candidate).length ? paths(candidate) : paths(reference);
-      return `<div class="plot"><svg viewBox="0 0 ${WIDTH} ${HEIGHT}" preserveAspectRatio="none">${bands(false, candidate)}${tickMarks}${match.map((path) => `<path d="${path}" fill="none" stroke="${GREEN}" stroke-width="1.5" opacity=".8" vector-effect="non-scaling-stroke"/>`).join("")}</svg>${tickLabels}</div>`;
-    }
-    const candidatePassing = [], candidateFailing = [], referenceFailing = [];
-    let referenceLength = 0;
-    let previousReferenceFailingIndex = -2;
-    for (let index = 0; index < rows.length - 1; index += 1) {
-      const failed = intervalFails(index);
-      const trimStart = !failed && index > 0 && intervalFails(index - 1) ? 1.2 : 0;
-      const trimEnd = !failed && index + 1 < rows.length - 1 && intervalFails(index + 1) ? 1.2 : 0;
-      if (candidate[index] && candidate[index + 1]) (failed ? candidateFailing : candidatePassing).push(segment(candidate[index], candidate[index + 1], trimStart, trimEnd).path);
-      if (failed && reference[index] && reference[index + 1]) {
-        const line = segment(reference[index], reference[index + 1], trimStart, trimEnd);
-        if (previousReferenceFailingIndex === index - 1) {
-          referenceFailing.at(-1).path += `L${line.x2.toFixed(1)},${line.y2.toFixed(1)}`;
-        } else {
-          referenceFailing.push({ path: line.path, offset: -(referenceLength % 9) });
-        }
-        referenceLength += line.length;
-        previousReferenceFailingIndex = index;
-      } else {
-        previousReferenceFailingIndex = -2;
-      }
-    }
-    return `<div class="plot"><svg viewBox="0 0 ${WIDTH} ${HEIGHT}" preserveAspectRatio="none">${bands(false, candidate)}${bands(true, candidate)}${tickMarks}${candidatePassing.length ? `<path d="${candidatePassing.join(" ")}" fill="none" stroke="${GREEN}" stroke-width="1.5" opacity=".8" vector-effect="non-scaling-stroke"/>` : ""}${candidateFailing.length ? `<path d="${candidateFailing.join(" ")}" fill="none" stroke="${RED}" stroke-width="1.6" opacity=".8" vector-effect="non-scaling-stroke"/>` : ""}${referenceFailing.map((line) => `<path d="${line.path}" fill="none" stroke="${GREEN}" stroke-width="1.25" stroke-dasharray="5 4" stroke-dashoffset="${line.offset.toFixed(2)}" opacity=".8" vector-effect="non-scaling-stroke"/>`).join("")}</svg>${tickLabels}</div>`;
-  }
-  function hybridField(field) {
-    const description = field.semantics?.meaning || field.driftReason || field.sourceOwner || "";
-    const result = fieldResult(field);
-    const segments = String(field.label || "").split(".");
-    const label = segments.map((segment, index) => {
-      const last = index === segments.length - 1;
-      const className = last ? "hybrid-field-tail" : "hybrid-field-segment";
-      const opacity = segments.length <= 1 ? 1 : .45 + .55 * Math.pow(index / (segments.length - 1), 1.8);
-      return `<span class="${className}" style="opacity:${opacity.toFixed(2)}">${escapeHtml(segment)}${last ? "" : "."}</span>`;
-    }).join("");
-    return `<span class="hybrid-cell hybrid-field" title="${escapeHtml(description)}"><span class="table-field-label">${label}</span><span class="hybrid-status">${result}</span></span>`;
-  }
-  function hybridMetric(field) {
-    const countValue = nonPass(field);
-    const telemetry = telemetryFor(field);
-    const frameDelta = telemetry ? Number(telemetry.passToFailCount || 0) - Number(telemetry.failToPassCount || 0) : null;
-    const deltaClass = frameDelta === null || frameDelta === 0 ? "" : frameDelta < 0 ? "up" : "down";
-    const deltaSymbol = frameDelta === null || frameDelta === 0 ? "" : frameDelta < 0 ? "▼" : "▲";
-    const deltaValue = frameDelta === null ? "" : frameDelta === 0 ? "0" : compact(Math.abs(frameDelta));
-    const transitionTitle = telemetry
-      ? `${count(telemetry.failToPassCount)} fail-to-pass; ${count(telemetry.passToFailCount)} pass-to-fail; ${count(telemetry.stayedPassCount)} stayed-pass; ${count(telemetry.stayedFailCount)} stayed-fail; residual ${count(telemetry.residualCount)}`
-      : "";
-    const valueDelta = field.maxDelta === null || !Number.isFinite(Number(field.maxDelta))
-      ? ""
-      : value(field.maxDelta);
-    return `<span class="hybrid-cell hybrid-metric"><span class="hybrid-count">${count(countValue)}</span><span class="hybrid-delta ${deltaClass}"${transitionTitle ? ` title="${escapeHtml(transitionTitle)}"` : ""}><span class="hybrid-delta-symbol">${deltaSymbol}</span><span class="hybrid-delta-value">${deltaValue}</span></span><span class="hybrid-value-delta">${escapeHtml(valueDelta)}</span></span>`;
-  }
-  function visibleFields() {
-    if (state.fieldPage) return state.payload.fields;
-    if (state.sort === "changed" && state.telemetryAvailability.status !== "comparable") return [];
-    const query = state.search.trim().toLowerCase();
-    let filtered = state.payload.fields.filter((field) => {
-      if (state.filter === "failing" && nonPass(field) === 0) return false;
-      return !query || [field.label, field.sourceOwner, field.driftClass, field.semantics?.kind].some((entry) => String(entry || "").toLowerCase().includes(query));
-    });
-    if (state.sort === "changed") {
-      filtered = filtered.filter((field) => telemetryChange(field) > 0);
-    }
-    if (state.sort !== "changed") return filtered;
-    return filtered.sort((left, right) => {
-      const leftTelemetry = telemetryFor(left), rightTelemetry = telemetryFor(right);
-      const leftImprovement = Number(leftTelemetry?.failToPassCount || 0) - Number(leftTelemetry?.passToFailCount || 0);
-      const rightImprovement = Number(rightTelemetry?.failToPassCount || 0) - Number(rightTelemetry?.passToFailCount || 0);
-      return telemetryChange(right) - telemetryChange(left)
-        || rightImprovement - leftImprovement
-        || (fieldOrder.get(left) ?? Number.MAX_SAFE_INTEGER) - (fieldOrder.get(right) ?? Number.MAX_SAFE_INTEGER);
-    });
-  }
-  function fieldRows(fields) {
-    if (!fields.length) {
-      const message = state.sort === "changed"
-          ? state.telemetryAvailability.status === "comparable"
-            ? "No changed fields in this telemetry."
-            : state.telemetryAvailability.reason
-          : "No fields match the current view.";
-      return `<div class="empty">${escapeHtml(message)}</div>`;
-    }
-    return `<div class="hybrid-list">${fields.map((field, index) => {
-      const expanded = state.expanded.has(field.id);
-      return `<section class="hybrid-row ${nonPass(field) ? "fail" : "pass"}${expanded ? " expanded" : ""}" data-row-expand-key="${escapeHtml(field.id)}" role="button" tabindex="0" aria-expanded="${expanded}" title="${escapeHtml(field.label)}">${hybridField(field)}${hybridMetric(field)}<div class="hybrid-chart">${chart(field, index === 0)}</div></section>`;
-    }).join("")}</div>`;
-  }
-  function paginationState(total) {
-    const pageCount = Math.max(1, Math.ceil(total / state.pageSize));
-    state.pageIndex = Math.max(0, Math.min(state.pageIndex, pageCount - 1));
-    const start = total ? state.pageIndex * state.pageSize + 1 : 0;
-    const end = Math.min(total, (state.pageIndex + 1) * state.pageSize);
-    return { pageCount, start, end };
-  }
-  function renderProgressChart() {
-    const progressChart = root.querySelector("#progress-chart");
-    if (!progressChart) return;
-    if (state.payload.primaryChartField) return;
-    if (state.progressChart === "delta") {
-      const exactMetrics = differentialExactPrefixFrameDeltaMetrics(state.payload, state.frameDeltaMetrics);
-      if (!exactMetrics) {
-        progressChart.replaceChildren?.();
-        progressChart.setAttribute?.("aria-label", "Exact-prefix frame delta metrics unavailable");
-        return;
-      }
-      renderDifferentialTestingFrameDeltaChart(progressChart, exactMetrics);
-      return;
-    }
-    renderDifferentialTestingProgressChart(
-      progressChart,
-      differentialProgressChartHistory(state.payload, { mode: "value" }),
-      { mode: "progress", timeScale: "compact" },
-    );
-    progressChart.setAttribute?.("aria-label", "Cumulative cleared frames per report");
-  }
-  function templateHtml() {
-    return `  <main id="burnlist-detail" class="detail-view" hidden>
-    <section class="differential-overview" id="differential-overview" hidden>
-      <div class="work-panel-head differential-overview-head"><div class="differential-overview-meta"><span id="differential-refresh-status" class="differential-refresh-status" hidden></span><time id="differential-overview-time"></time></div></div>
-      <div class="driving-parity-kpi-strip" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"></div>
-    </section>
-    <div class="detail-workspace" id="detail-workspace" data-detail-tab="dashboard">
-      <div class="detail-report-column">
-        <section class="top" id="detail-top-stack">
-          <div class="panel progress-panel">
-            <div class="panel-title-row">
-              <div class="progress-title-group">
-                <h2 id="progress-panel-title">Progress</h2>
-                <span id="driving-parity-progress-summary" class="driving-parity-summary driving-parity-progress-summary" hidden></span>
-              </div>
-              <div class="chart-tools">
-                <div class="label-toggle progress-chart-toggle differential-tabs" aria-label="Burnlist progress chart view">
-                  <button type="button" class="standard-progress-mode" data-progress-chart-mode="progress">Progress</button>
-                  <span class="sep progress-chart-mode-sep standard-progress-sep" aria-hidden="true">|</span>
-                  <button type="button" data-progress-chart-mode="failed"><span class="standard-failed-label">Failed</span><span class="driving-parity-progress-label">Value</span></button>
-                  <span class="sep progress-chart-mode-sep driving-parity-progress-only" aria-hidden="true">·</span>
-                  <button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta">Delta</button>
-                </div>
-                <div class="label-toggle progress-time-scale-toggle" aria-label="Burn progress time scale">
-                  <button type="button" data-progress-time-scale="all" title="Show elapsed time">All</button>
-                  <span class="sep" aria-hidden="true">·</span>
-                  <button type="button" data-progress-time-scale="compact" title="Compress inactive time">Compact</button>
-                </div>
-                <button type="button" class="chart-reset" id="chart-reset" hidden>Reset</button>
-              </div>
-            </div>
-            <div class="score">
-              <div class="progress-topline">
-                <div class="stat">
-                  <div class="stat-label">Tasks</div>
-                  <div class="headline" id="progress-headline">0/0</div>
-                </div>
-                <div class="stat center" title="Elapsed wall-clock time since the first available tracker snapshot.">
-                  <div class="stat-label">Elapsed</div>
-                  <div class="elapsed" id="elapsed-time">--</div>
-                </div>
-                <div class="stat center" title="Average item pace from completed ledger intervals plus the current active item age as an in-progress sample. Uses B0 as the start anchor when present.">
-                  <div class="stat-label">Pace</div>
-                  <div class="pace" id="avg-pace">--</div>
-                </div>
-                <div class="stat right">
-                  <div class="stat-label">Done</div>
-                  <div class="percent" id="progress-percent">0%</div>
-                </div>
-              </div>
-              <div class="warnings" id="warnings" hidden></div>
-              <div class="bar" id="bar" aria-label="Burnlist completion segments"></div>
-              <div class="chart-wrap">
-                <svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>
-                <div class="completion-confetti" id="completion-confetti" aria-hidden="true"></div>
-              </div>
-            </div>
-          </div>
-          <section class="panel work-panel" id="detail-work-panel" data-work-tab="log">
-            <div class="work-panel-head">
-              <div class="work-panel-title">Parity Progress</div>
-              <div class="label-toggle work-panel-tabs" aria-label="Burnlist work panel">
-                <button type="button" data-work-panel-tab="timeline">Timeline</button>
-                <span class="sep timeline-tab-sep" aria-hidden="true">|</span>
-                <button type="button" data-work-panel-tab="target">Target</button>
-                <span class="sep" aria-hidden="true">|</span>
-                <button type="button" data-work-panel-tab="log">Log</button>
-              </div>
-              <div class="work-panel-tools">
-                <div class="work-tab-tools timeline-tab-tools">
-                  <div class="timeline-step" aria-label="Active item navigation">
-                    <button type="button" data-timeline-step="-1">Prev</button>
-                    <span class="sep" aria-hidden="true">|</span>
-                    <button type="button" data-timeline-step="1">Next</button>
-                  </div>
-                  <div class="label-toggle timeline-controls" aria-label="Burnlist timeline view">
-                    <button type="button" data-timeline-mode="all">All</button>
-                    <span class="sep" aria-hidden="true">|</span>
-                    <button type="button" data-timeline-mode="active">Active</button>
-                  </div>
-                </div>
-                <div class="work-tab-tools target-tab-tools">
-                  <label class="log-file-toggle" title="Run delayed code-change summaries and show them in Target.">
-                    <input type="checkbox" id="target-summaries-toggle" />
-                    <span>Summaries</span>
-                  </label>
-                </div>
-                <div class="work-tab-tools log-tab-tools">
-                  <label class="log-file-toggle" title="Show file-created, file-changed, and file-deleted log rows.">
-                    <input type="checkbox" id="log-file-changes-toggle" />
-                    <span>File changes</span>
-                  </label>
-                </div>
-              </div>
-            </div>
-            <div class="work-panel-body">
-              <div class="work-tab-pane" data-work-tab-pane="timeline" hidden>
-                <div class="timeline" id="timeline"></div>
-              </div>
-              <div class="work-tab-pane" data-work-tab-pane="target" hidden>
-                <div class="target-panel" id="active-context-target"></div>
-              </div>
-              <div class="work-tab-pane" data-work-tab-pane="log">
-                <div class="checklist-log" id="checklist-log"></div>
-              </div>
-            </div>
-          </section>
-        </section>
-      </div>
-      <aside class="panel detail-repo-graph-panel" id="detail-repo-graph-panel" hidden>
-        <div class="detail-repo-graph-head">
-          <h2>Repo Graph</h2>
-          <div class="detail-repo-graph-controls">
-            <select class="repo-map-scope" id="detail-repo-map-scope" aria-label="Detail repo graph folder focus"></select>
-          </div>
-          <select class="repo-map-zoom" id="detail-repo-map-zoom" aria-label="Detail repo graph zoom">
-            <option value="1">1x</option>
-            <option value="1.25">1.25x</option>
-            <option value="1.5">1.5x</option>
-            <option value="2">2x</option>
-          </select>
-          <label class="repo-map-label-toggle" title="Show file-name labels for file bubbles">
-            <input type="checkbox" class="repo-map-label-checkbox" id="detail-repo-map-labels">
-            Labels
-          </label>
-          <div class="repo-map-meta" id="detail-repo-map-meta"></div>
-        </div>
-        <svg class="repo-map detail-repo-map" id="detail-repo-map" viewBox="0 0 1000 520" role="img" aria-label="Repository file graph focused on src"></svg>
-      </aside>
-      <section class="panel focused-functions-panel" id="focused-functions-panel" hidden>
-        <div class="focused-functions-head">
-          <h2>Changes</h2>
-          <div class="focused-functions-actions">
-            <select class="changes-show" id="changes-show" aria-label="Changes shown">
-              <option value="all">All</option>
-              <option value="10">Last 10</option>
-              <option value="30">Last 30</option>
-            </select>
-            <button class="changes-collapse-all" id="changes-collapse-all" type="button">Collapse all</button>
-            <div class="focused-functions-meta" id="focused-functions-meta"></div>
-          </div>
-        </div>
-        <div class="focused-functions-list" id="focused-functions-list"></div>
-      </section>
-    </div>
-  </main>
-  <footer class="detail-meta-footer meta-row plan-meta-row" id="detail-meta-footer">
-    <code id="detail-plan-label"></code>
-    <span class="last-read-inline">Last read: <span id="detail-last-read">...</span></span>
-  </footer>
-  <main id="driving-parity-page" class="driving-parity-page" hidden>
-    <div class="driving-parity-toolbar meta-row plan-meta-row">
-      <h2 id="driving-parity-summary" class="driving-parity-summary" hidden></h2>
-      <div id="driving-parity-controls" class="driving-parity-controls" hidden>
-	        <input id="driving-parity-field-search" type="search" placeholder="Search Fields..." aria-label="Differential Testing search fields">
-	        <span class="control-sep" aria-hidden="true">|</span>
-	        <div id="driving-parity-chart-toggle" class="chart-toggle differential-tabs" role="group" aria-label="Differential Testing chart mode">
-	          <button type="button" data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false">Value</button>
-	          <span class="sep" aria-hidden="true">·</span>
-	          <button type="button" data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true">Delta</button>
-	        </div>
-	        <span class="control-sep" aria-hidden="true">|</span>
-	        <div id="driving-parity-sort-toggle" class="chart-toggle sort-toggle differential-tabs" role="group" aria-label="Differential Testing sort">
-	          <button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed</button>
-        </div>
-        <span class="control-sep" aria-hidden="true">|</span>
-	        <div id="driving-parity-filter-toggle" class="chart-toggle filter-toggle differential-tabs" role="group" aria-label="Differential Testing field filter">
-	          <button type="button" data-driving-parity-filter="failing" aria-pressed="true">Failed</button>
-	        </div>
-      </div>
-    </div>
-    <section class="driving-parity-inline-renderer" id="driving-parity-inline-renderer">
-<style>.driving-parity-inline-renderer { min-width: 0; } .driving-parity-inline-renderer > main { min-width: 0; }</style>
-<style>
-    :root {
-      color-scheme: dark;
-      --bg: #000000;
-      --panel: #111111;
-      --card: #111111;
-      --line: #262626;
-      --muted: #a8a8a8;
-      --text: var(--muted);
-      --blue: #60a5fa;
-      --yellow: #f6c95f;
-      --red: #ef4444;
-      --red-muted: rgba(239, 68, 68, 0.78);
-      --green: #61d394;
-      --dashboard-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      background: transparent;
-      color: var(--text);
-      font: 14px/1.45 var(--dashboard-font);
-    }
-    h1 {
-      margin: 0;
-      font-size: 18px;
-      line-height: 1.2;
-      letter-spacing: 0;
-    }
-    h1,
-    strong {
-      font-weight: 400;
-    }
-    .sub {
-      color: var(--text);
-      margin-top: 0;
-      white-space: normal;
-    }
-    .sub .run-status {
-      color: var(--red-muted);
-    }
-    .sub .run-status.pass {
-      color: var(--text);
-    }
-    .sub .run-frames {
-      color: var(--text);
-    }
-    .sub .metric-red {
-      color: var(--red-muted);
-    }
-    .sub .metric-yellow {
-      color: var(--text);
-    }
-    .sub .metric-blue {
-      color: var(--text);
-    }
-    main {
-      padding: 0;
-    }
-    .legend {
-      display: none;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-bottom: 8px;
-      color: var(--muted);
-      align-items: center;
-    }
-    .filters {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: end;
-      align-items: center;
-      gap: 4px;
-      margin-left: auto;
-    }
-    .filter-control {
-      display: flex;
-      align-items: center;
-      gap: 7px;
-      color: var(--muted);
-    }
-    .accordion-actions {
-      display: flex;
-      gap: 6px;
-    }
-    .accordion-actions button {
-      color: var(--muted);
-    }
-    .pagination {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      color: var(--muted);
-    }
-    .pagination[hidden] {
-      display: none;
-    }
-    .pagination-status {
-      min-width: 78px;
-      text-align: center;
-      white-space: nowrap;
-    }
-    button {
-      color: var(--text);
-      background: #171717;
-      border: 1px solid var(--line);
-      border-radius: 1px;
-      padding: 4px 7px;
-      font: inherit;
-      line-height: 1.2;
-      cursor: pointer;
-    }
-    button:disabled {
-      opacity: 0.45;
-      cursor: default;
-    }
-    button:not(:disabled):hover,
-    select:hover {
-      border-color: #333333;
-      background: #1c1c1c;
-    }
-    select,
-    input[type="search"] {
-      color: var(--text);
-      background: #171717;
-      border: 1px solid var(--line);
-      border-radius: 1px;
-      padding: 4px 22px 4px 7px;
-      font: inherit;
-      line-height: 1.2;
-    }
-    select {
-      color-scheme: dark;
-      cursor: pointer;
-    }
-    select option {
-      background: #111111;
-      color: #e8e8e8;
-    }
-    input[type="search"] {
-      width: 150px;
-      padding-right: 7px;
-    }
-    #view-mode { width: 112px; }
-    #sort-mode { width: 116px; }
-    #field-filter { width: 158px; }
-    #group-filter { width: 142px; }
-    #page-size { width: 68px; }
-    select:focus,
-    input[type="search"]:focus {
-      outline: none;
-      border-color: var(--blue);
-      background: #1c1c1c;
-    }
-    button[aria-pressed="true"] {
-      border-color: var(--blue);
-      background: #1c1c1c;
-    }
-    .rows {
-      display: grid;
-      gap: 0;
-      background: transparent;
-    }
-    .rows-view {
-      display: grid;
-      gap: 0;
-    }
-    .rows-view[hidden] {
-      display: none;
-    }
-    .row-group {
-      display: grid;
-      gap: 0;
-    }
-    .group-header {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 6px;
-      align-items: stretch;
-    }
-    .group-toggle {
-      display: grid;
-      grid-template-columns: auto minmax(0, 1fr) auto;
-      align-items: center;
-      gap: 8px;
-      width: 100%;
-      padding: 7px 10px;
-      text-align: left;
-      background: #171717;
-      border-color: var(--line);
-    }
-    .group-toggle:hover,
-    .group-toggle:focus {
-      outline: none;
-      border-color: #333333;
-      background: #1c1c1c;
-    }
-    .group-action {
-      color: var(--muted);
-      white-space: nowrap;
-    }
-    .group-action:hover,
-    .group-action:focus {
-      outline: none;
-      border-color: #333333;
-      background: #1c1c1c;
-    }
-    .group-caret {
-      width: 14px;
-      color: var(--muted);
-    }
-    .group-caret::before {
-      content: "v";
-    }
-    .row-group.collapsed .group-caret::before {
-      content: ">";
-    }
-    .group-toggle strong {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: var(--text);
-      white-space: nowrap;
-    }
-    .group-toggle span:last-child {
-      color: var(--muted);
-      white-space: nowrap;
-    }
-    .group-body {
-      display: grid;
-      gap: 0;
-    }
-    .row-group.collapsed .group-body {
-      display: none;
-    }
-    .table-wrap {
-      overflow-x: auto;
-      border: 1px solid var(--line);
-      background: var(--panel);
-      border-radius: 1px;
-    }
-	    .field-table {
-	      width: 100%;
-	      border-collapse: collapse;
-	      table-layout: fixed;
-	      min-width: 760px;
-	    }
-	    .table-col-status { width: 74px; }
-	    .table-col-fail { width: 78px; }
-	    .table-col-delta { width: 74px; }
-	    .table-col-chart { width: 340px; }
-	    .field-table th,
-	    .field-table td {
-	      padding: 6px 10px;
-	      border-bottom: 1px solid var(--line);
-	      text-align: left;
-	      vertical-align: middle;
-	    }
-	    .field-table tbody tr {
-	      height: 36px;
-	    }
-	    .field-table tbody td {
-	      padding-top: 0;
-	      padding-bottom: 0;
-	    }
-	    .field-table th {
-	      color: var(--muted);
-	      font-weight: 400;
-		      background: #171717;
-	      position: sticky;
-      top: 0;
-      z-index: 1;
-    }
-    .field-table tbody tr:last-child td {
-      border-bottom: 0;
-    }
-	    .field-table tbody tr:hover {
-	      background: rgba(96, 165, 250, 0.055);
-	    }
-	    .table-status {
-	      white-space: nowrap;
-	      color: var(--muted);
-	    }
-	    .field-table tr.pass .table-status,
-	    .table-good {
-	      color: var(--green);
-    }
-    .field-table tr.fail .table-status,
-    .table-bad {
-      color: var(--red);
-    }
-	.hybrid-list {
-	  display: grid;
-	  gap: 0;
-	  min-width: 760px;
-	}
-	.hybrid-row {
-	  display: grid;
-	  grid-template-columns: 20% 10% minmax(0, 70%);
-	  align-items: stretch;
-	  height: 90px;
-	  content-visibility: auto;
-	  contain-intrinsic-size: 90px;
-	  margin-bottom: 6px;
-	  background: var(--card);
-	  border-radius: 8px;
-	  overflow: hidden;
-	  cursor: pointer;
-	}
-	.hybrid-row.expanded {
-	  height: 220px;
-	  contain-intrinsic-size: 220px;
-	}
-	.hybrid-row:focus-visible {
-	  outline: 1px solid var(--blue);
-	  outline-offset: -1px;
-	}
-	.hybrid-row:hover .hybrid-cell {
-	  background: #1c1c1c;
-	}
-	.hybrid-row:last-child {
-	  margin-bottom: 0;
-	}
-	.hybrid-cell {
-	  min-width: 0;
-	  display: flex;
-	  align-items: center;
-	  padding: 10px 12px;
-	  color: var(--muted);
-	  line-height: 1.25;
-	}
-	.hybrid-count,
-	.hybrid-delta,
-	.hybrid-value-delta {
-	  white-space: nowrap;
-	  font-variant-numeric: tabular-nums;
-	}
-	.hybrid-metric {
-	  flex-direction: column;
-	  align-items: flex-end;
-	  justify-content: flex-start;
-	  gap: 0;
-	  padding-right: 17px;
-	  color: rgba(210,216,224,.62);
-	  text-align: right;
-	}
-	.hybrid-field {
-	  display: grid;
-	  grid-template-rows: minmax(0, 1fr) auto;
-	  align-items: flex-start;
-	  gap: 4px;
-	  overflow: hidden;
-	}
-	.hybrid-field .table-field-label {
-	  min-width: 0;
-	  overflow: hidden;
-	}
-	.hybrid-field .table-field-label {
-	  display: block;
-	  width: 100%;
-	  line-height: 1.25;
-	  overflow-wrap: normal;
-	  text-overflow: clip;
-	  text-wrap: pretty;
-	  word-break: normal;
-	  white-space: normal;
-	}
-	.hybrid-field-segment,
-	.hybrid-field-tail {
-	  display: block;
-	  width: 100%;
-	  overflow: hidden;
-	  text-overflow: ellipsis;
-	  white-space: nowrap;
-	}
-	.hybrid-status {
-	  flex: 0 0 auto;
-	  font-size: 12px;
-	  line-height: 1.25;
-	}
-	.hybrid-row.pass .hybrid-status { color: var(--green); }
-	.hybrid-row.fail .hybrid-status { color: var(--red-muted); }
-	.hybrid-count {
-	  width: 100%;
-	  text-align: right;
-	}
-	.hybrid-delta {
-	  display: inline-flex;
-	  align-items: center;
-	  justify-content: flex-end;
-	  gap: 6px;
-	  width: 100%;
-	}
-	.hybrid-delta-symbol {
-	  flex: 0 0 auto;
-	  font-size: 13px;
-	  line-height: 1;
-	  transform: translateY(-1px);
-	}
-	.hybrid-value-delta {
-	  width: 100%;
-	  color: inherit;
-	  text-align: right;
-	}
-	.hybrid-delta.up { color: var(--green); }
-	.hybrid-delta.down { color: var(--red-muted); }
-	.hybrid-chart {
-	  min-width: 0;
-	  height: 100%;
-	  overflow: hidden;
-	}
-	.hybrid-chart > .plot,
-	.hybrid-chart > svg {
-	  width: 100%;
-	  height: 100%;
-	}
-	@media (max-width: 520px) {
-	  .hybrid-list {
-	    min-width: 0;
-	  }
-	  .hybrid-row {
-	    height: 180px;
-	    contain-intrinsic-size: 180px;
-	    grid-template-columns: minmax(0, 62%) minmax(88px, 38%);
-	    grid-template-rows: 90px 90px;
-	  }
-	  .hybrid-row.expanded {
-	    height: 260px;
-	    contain-intrinsic-size: 260px;
-	    grid-template-rows: 90px 170px;
-	  }
-	  .hybrid-cell {
-	    padding: 8px 10px;
-	  }
-	  .hybrid-metric {
-	    padding-right: 15px;
-	  }
-	  .hybrid-chart {
-	    grid-column: 1 / -1;
-	    grid-row: 2;
-	  }
-	}
-	    .table-field {
-	      color: var(--muted);
-	      min-width: 0;
-	    }
-	    .table-field-inner {
-	      display: flex;
-	      align-items: baseline;
-	      gap: 8px;
-	      min-width: 0;
-	    }
-	    .table-group-tag {
-	      flex: 0 0 auto;
-	      max-width: 13ch;
-	      overflow: hidden;
-	      text-overflow: ellipsis;
-	      white-space: nowrap;
-	      color: var(--muted);
-	    }
-	    .table-field-label {
-	      flex: 1 1 auto;
-	      min-width: 0;
-	      overflow: hidden;
-	      text-overflow: ellipsis;
-	      white-space: nowrap;
-	      color: var(--muted);
-	    }
-	    .table-muted {
-	      color: var(--muted);
-	      white-space: nowrap;
-	    }
-	    .table-count,
-	    .table-delta {
-	      color: var(--muted);
-	      text-align: right;
-	      white-space: nowrap;
-	      font-variant-numeric: tabular-nums;
-	    }
-	    .table-chart {
-	      padding: 0;
-	    }
-	    .table-spark {
-	      display: block;
-	      width: 100%;
-	      height: 36px;
-	      min-height: 36px;
-	      background: transparent;
-	    }
-	    .table-delta.up {
-	      color: var(--green);
-	    }
-	    .table-delta.down {
-	      color: var(--red);
-	    }
-    .coverage {
-      display: grid;
-      gap: 8px;
-      margin-bottom: 12px;
-      padding: 9px;
-      border: 1px solid var(--line);
-      background: var(--panel);
-      border-radius: 1px;
-    }
-    .coverage:empty {
-      display: none;
-    }
-    .coverage strong {
-      color: var(--text);
-    }
-    .coverage-groups {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
-      gap: 6px;
-    }
-    .coverage-group {
-      appearance: none;
-      text-align: left;
-      padding: 7px 8px;
-      background: #171717;
-      border: 1px solid var(--line);
-      border-radius: 1px;
-      color: var(--muted);
-      cursor: pointer;
-    }
-    .coverage-group strong {
-      display: block;
-      margin-bottom: 3px;
-    }
-    .coverage-group span {
-      color: var(--muted);
-    }
-    .coverage-group[aria-pressed="true"] {
-      border-color: var(--red);
-      background: #25131a;
-    }
-    .coverage-group:hover {
-      border-color: #333333;
-      background: #1c1c1c;
-    }
-    .coverage-group[aria-pressed="true"]:hover {
-      border-color: var(--red);
-      background: #25131a;
-    }
-    .row {
-      --field-red: var(--red-muted);
-      --field-green: rgba(97, 211, 148, 0.75);
-      display: grid;
-      grid-template-columns: 196px minmax(260px, 1fr);
-      height: 98px;
-      content-visibility: auto;
-      contain-intrinsic-size: 98px;
-      border: 0;
-      background: #0f0f0f;
-      border-radius: 0;
-      overflow: hidden;
-      cursor: pointer;
-    }
-    .row + .row {
-      border-top: 0;
-    }
-    .row > .label {
-      border-top: 1px solid rgba(168, 168, 168, 0.12);
-    }
-    .row > .plot {
-      border-top: 1px solid rgba(232, 232, 232, 0.15);
-    }
-    .row.expanded {
-      height: 220px;
-      contain-intrinsic-size: 220px;
-      cursor: pointer;
-    }
-    .row[data-row-expand-key]:hover {
-      border-color: #333333;
-    }
-    .row[data-row-expand-key]:hover .label {
-      background: #1c1c1c;
-    }
-    .row:focus-visible {
-      outline: 1px solid var(--blue);
-      outline-offset: 2px;
-    }
-    .label {
-      position: relative;
-      z-index: 1;
-      display: grid;
-      grid-template-rows: auto auto auto;
-      align-items: start;
-      align-content: start;
-      gap: 4px;
-      min-width: 0;
-      min-height: 0;
-      padding: 9px 10px 7px 0;
-      border-right: 0;
-      background: var(--card);
-      overflow: hidden;
-    }
-    .label strong {
-      display: block;
-      width: 100%;
-      max-width: 100%;
-      min-height: 0;
-      max-height: 1.25em;
-      font-size: 14px;
-      color: var(--text);
-      margin: 0;
-      line-height: 1.25;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    .row.expanded .label strong {
-      display: block;
-    }
-    .label span {
-      display: block;
-      color: var(--muted);
-      line-height: 1.35;
-      white-space: nowrap;
-    }
-    .label strong + span {
-      margin-top: 1px;
-    }
-	    .label .improvement {
-	      margin-top: 0;
-	      color: var(--muted);
-	      overflow: hidden;
-	      text-overflow: ellipsis;
-	    }
-	    .label .improvement span {
-	      display: inline;
-	    }
-	    .label .improvement .frame-delta.up {
-	      color: var(--field-green);
-	    }
-	    .label .improvement .frame-delta.down {
-	      color: var(--field-red);
-	    }
-	    .label .improvement .frame-delta.zero,
-	    .label .improvement .delta-sep,
-	    .label .improvement .value-delta {
-	      color: var(--muted);
-	    }
-	    .row.pass .label > span {
-	      color: var(--field-green);
-	    }
-	    .row.fail .label > span {
-	      color: var(--field-red);
-	    }
-	    .row.pass .label .improvement .frame-delta.up,
-	    .row.fail .label .improvement .frame-delta.up {
-	      color: var(--field-green);
-	    }
-	    .row.pass .label .improvement .frame-delta.down,
-	    .row.fail .label .improvement .frame-delta.down {
-	      color: var(--field-red);
-	    }
-    svg {
-      display: block;
-      width: 100%;
-      height: 100%;
-      min-height: 58px;
-      background: transparent;
-    }
-    .plot {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      min-height: 58px;
-      overflow: hidden;
-      background: #0f0f0f;
-    }
-    .row .plot > svg {
-      background: #0f0f0f;
-    }
-    .frame-tick-label {
-      position: absolute;
-      top: 5px;
-      color: rgba(168, 168, 168, 0.5);
-      font-size: 12px;
-      line-height: 1;
-      font-variant-numeric: tabular-nums;
-      pointer-events: none;
-      transform: translateX(-50%);
-      user-select: none;
-      white-space: nowrap;
-    }
-    .row.pass .plot {
-      background: transparent;
-    }
-    .row.fail .plot {
-      background: transparent;
-    }
-    .plot-marker {
-      position: absolute;
-      border-radius: 1px;
-      transform: translate(-50%, -50%);
-      pointer-events: none;
-    }
-    .row:not(.expanded) .plot-marker {
-      display: none;
-    }
-    .plot-marker.browser {
-      width: 5.4px;
-      height: 5.4px;
-      background: var(--blue);
-    }
-    .plot-marker.native {
-      width: 5.2px;
-      height: 5.2px;
-      background: var(--green);
-    }
-    .plot-marker.match {
-      width: 5.4px;
-      height: 5.4px;
-      background: var(--green);
-    }
-    .plot-marker.fail {
-      width: 5.4px;
-      height: 5.4px;
-      background: var(--red);
-    }
-    .empty {
-      padding: 18px;
-      border: 1px solid var(--line);
-      background: var(--panel);
-      border-radius: 1px;
-      color: var(--muted);
-    }
-  </style>
-  <main>
-    <div class="legend">
-      <div class="filters">
-        <label class="filter-control">
-          <select id="sort-mode" aria-label="sort cards">
-            <option value="default">Default</option>
-            <option value="improved" selected>Changed</option>
-            <option value="target">Target</option>
-            <option value="failing">Failing</option>
-            <option value="frames">Frames</option>
-            <option value="group">Group</option>
-            <option value="name">Name</option>
-            <option value="type">Type</option>
-          </select>
-        </label>
-        <label class="filter-control">
-          <select id="field-filter" aria-label="field filter">
-            <option value="all">All</option>
-            <option value="tested">Tested</option>
-            <option value="failing">Failing</option>
-            <option value="missing">Uncovered</option>
-            <option value="nulls">Nulls</option>
-            <option value="inactive">Inactive</option>
-            <option value="materialized">Materialized</option>
-          </select>
-        </label>
-        <label class="filter-control">
-          <input type="search" id="field-search" aria-label="search fields" placeholder="Search fields">
-        </label>
-        <label class="filter-control">
-          <select id="group-filter" aria-label="signal group filter">
-            <option value="all">All groups</option>
-          </select>
-        </label>
-        <label class="filter-control">
-          <select id="page-size" aria-label="rows per page">
-            <option value="25" selected>25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-            <option value="200">200</option>
-          </select>
-        </label>
-        <div class="pagination" id="pagination" hidden>
-          <button type="button" id="page-prev" aria-label="previous page">Prev</button>
-          <span class="pagination-status" id="page-status">0-0 / 0</span>
-          <button type="button" id="page-next" aria-label="next page">Next</button>
-        </div>
-        <div class="accordion-actions">
-          <button type="button" id="collapse-groups">Collapse all</button>
-          <button type="button" id="expand-groups">Expand all</button>
-        </div>
-      </div>
-    </div>
-    <section class="coverage" id="coverage"></section>
-    <div class="rows" id="rows">
-      <div class="rows-view" id="hybrid-rows"></div>
-    </div>
-  </main>
-    </section>
-    <div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden>
-      <select id="driving-parity-page-size" aria-label="Differential Testing rows per page">
-        <option value="25" selected>25</option>
-        <option value="50">50</option>
-        <option value="100">100</option>
-        <option value="200">200</option>
-      </select>
-      <button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page">Prev</button>
-      <span class="page-status" id="driving-parity-page-status">0-0 / 0</span>
-      <button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page">Next</button>
-    </div>
-  </main>`;
-  }
-  function render() {
-    const existingHeaderTimestamp = typeof document === "undefined" ? null : document.querySelector(".dashboard-primary-nav > #differential-overview-time");
-    const existingHeaderStatus = typeof document === "undefined" ? null : document.querySelector(".dashboard-primary-nav > #differential-refresh-status");
-    existingHeaderTimestamp?.remove();
-    existingHeaderStatus?.remove();
-    if (!state.oven || !state.payload) return;
-    const cells = new Map(state.oven.detail.cells.map((cell) => [cell.id, cell]));
-    const title = cells.get("title"), burns = cells.get("burns"), fields = cells.get("fields"), frames = cells.get("frames"), progressCell = cells.get("progress"), logCell = cells.get("log"), details = cells.get("field-details");
-    if (![title, burns, fields, frames, progressCell, logCell, details].every(Boolean)) { root.innerHTML = '<div class="empty">Differential Testing Oven layout is incomplete.</div>'; return; }
-    const titleText = String(title.title || state.oven.name || "Differential Testing");
-    if (state.payload.scenarioCatalog?.selectedScenarioId === null && state.payload.scenarioCatalog?.scenarios?.length === 0) {
-      root.innerHTML = `<main class="differential-testing-empty-state"><div class="driving-parity-kpi-title-item"><span class="driving-parity-kpi-title">${escapeHtml(titleText)}</span><span class="driving-parity-kpi-title-subtitle"><span class="differential-scenario-control"><select id="differential-scenario-selector" aria-label="Differential Testing scenario" disabled><option selected>No scenarios</option></select></span></span></div><div class="differential-testing-empty-message">No Differential Testing scenarios</div></main>`;
-      return;
-    }
-    const visible = visibleFields();
-    const serverPage = state.fieldPage;
-    if (!serverPage) {
-      state.pageIndex = Math.max(0, Math.min(state.pageIndex, Math.max(0, Math.ceil(visible.length / state.pageSize) - 1)));
-    }
-    const start = state.pageIndex * state.pageSize;
-    const page = serverPage ? visible : visible.slice(start, start + state.pageSize);
-    const telemetrySummary = state.payload.telemetry?.status === "comparable"
-      ? `${count(state.payload.telemetry.summary.failToPassCount)} F→P · ${count(state.payload.telemetry.summary.passToFailCount)} P→F · reconciled telemetry only`
-      : "";
-    const subtitleParts = [state.payload.subtitle, dateTime(state.payload.publishedAt), telemetrySummary, ...trustBlockerSummaries(state.payload)].filter(Boolean);
-    const changedUnavailable = state.telemetryAvailability.status !== "comparable";
-    const pageState = serverPage
-      ? {
-          pageCount: serverPage.pageCount,
-          start: serverPage.total ? serverPage.page * serverPage.pageSize + 1 : 0,
-          end: Math.min(serverPage.total, serverPage.page * serverPage.pageSize + visible.length),
-        }
-      : paginationState(visible.length);
-    const visibleTotal = serverPage?.total ?? visible.length;
-    const pageOptions = [25, 50, 100, 200].map((size) => `<option value="${size}"${state.pageSize === size ? " selected" : ""}>${size}</option>`).join("");
-    const paginationHtml = `<div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination"${visibleTotal <= state.pageSize ? " hidden" : ""}><select id="driving-parity-page-size" aria-label="Differential Testing rows per page">${pageOptions}</select><button type="button" id="driving-parity-page-prev" aria-label="Differential Testing previous page"${state.pageIndex === 0 ? " disabled" : ""}>Prev</button><span class="page-status" id="driving-parity-page-status">${pageState.start}-${pageState.end} / ${visibleTotal}</span><button type="button" id="driving-parity-page-next" aria-label="Differential Testing next page"${state.pageIndex >= pageState.pageCount - 1 ? " disabled" : ""}>Next</button></div>`;
-    const scenarioKpi = kpiItem({
-      className: "driving-parity-kpi-scenario",
-      title: subtitleParts.join(" · "),
-      visual: '<svg class="driving-parity-kpi-gauge driving-parity-kpi-scenario-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/></svg>',
-      heading: "Scenario",
-      headingClass: "differential-scenario-heading",
-      value: scenarioSelector(),
-    });
-    const kpiHtml = `${scenarioKpi}${progressDonut(state.payload.progress)}${burnDonut(state.payload.log)}${waffleMetric(state.payload.summary.fields, "Fields")}${waffleMetric(state.payload.summary.frames, "Frames")}`;
-    const primaryChartField = state.payload.primaryChartField;
-    const primaryChartTitle = String(state.payload.primaryChartTitle || "Parity Progress");
-    const historyTitle = String(state.payload.historyTitle || "Parity Progress");
-    const primaryChartMarkup = primaryChartField
-      ? `<div class="chart hybrid-chart" id="progress-chart" role="img" aria-label="${escapeHtml(primaryChartTitle)} over time">${chart(primaryChartField, true, state.progressChart === "delta" ? "delta" : "value")}</div>`
-      : progress(state.payload.progress);
-    let html = templateHtml()
-      .replace('<main id="burnlist-detail" class="detail-view" hidden>', '<main id="burnlist-detail" class="detail-view">')
-      .replace('<section class="differential-overview" id="differential-overview" hidden>', '<section class="differential-overview" id="differential-overview">')
-      .replace('<span id="differential-refresh-status" class="differential-refresh-status" hidden></span>', refreshStatus())
-      .replace('<time id="differential-overview-time"></time>', `<time id="differential-overview-time" class="label-toggle differential-tabs" datetime="${escapeHtml(state.payload.publishedAt)}">${overviewTime(state.payload.publishedAt)}</time>`)
-      .replace('<div class="driving-parity-kpi-strip" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs"></div>', `<div class="driving-parity-kpi-strip has-burns" id="driving-parity-kpi-strip" aria-label="Differential Testing field KPIs">${kpiHtml}</div>`)
-      .replace('<h2 id="progress-panel-title">Progress</h2>', `<h2 id="progress-panel-title">${escapeHtml(primaryChartTitle)}</h2>`)
-      .replace('<svg class="chart" id="progress-chart" viewBox="0 0 640 200" role="img" aria-label="Completion percentage over time"></svg>', primaryChartMarkup)
-      .replace('<div class="work-panel-title">Parity Progress</div>', `<div class="work-panel-title">${escapeHtml(historyTitle)}</div>`)
-      .replace('<div class="checklist-log" id="checklist-log"></div>', `<div class="checklist-log" id="checklist-log">${log(state.payload.log)}</div>`)
-      .replace('<main id="driving-parity-page" class="driving-parity-page" hidden>', '<main id="driving-parity-page" class="driving-parity-page">')
-      .replace('<h2 id="driving-parity-summary" class="driving-parity-summary" hidden></h2>', `<h2 id="driving-parity-summary" class="driving-parity-summary">Fields List<span class="field-list-count">(${count(state.payload.summary?.fields?.total ?? state.payload.fields.length)})</span></h2>`)
-      .replace('<div id="driving-parity-controls" class="driving-parity-controls" hidden>', '<div id="driving-parity-controls" class="driving-parity-controls">')
-      .replace('data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="false"', `data-driving-parity-chart="current" aria-label="Value chart view" title="Value chart view" aria-pressed="${state.chart === "current"}"`)
-      .replace('data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="true"', `data-driving-parity-chart="delta" aria-label="Delta chart view" title="Delta chart view" aria-pressed="${state.chart === "delta"}"`)
-      .replace('<button type="button" data-driving-parity-sort="improved" aria-pressed="true">Changed</button>', `<button type="button" data-driving-parity-sort="improved" aria-pressed="${state.sort === "changed"}"${changedUnavailable ? ` disabled title="${escapeHtml(state.telemetryAvailability.reason)}"` : ""}>Changed</button>`)
-      .replace('<button type="button" data-driving-parity-filter="failing" aria-pressed="true">Failed</button>', `<button type="button" data-driving-parity-filter="failing" aria-pressed="${state.filter === "failing"}">Failed</button>`)
-      .replace('<button type="button" data-progress-chart-mode="failed">', `<button type="button" data-progress-chart-mode="failed" aria-pressed="${state.progressChart === "failed"}">`)
-      .replace('<button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta">', `<button type="button" class="driving-parity-progress-only" data-progress-chart-mode="delta" aria-pressed="${state.progressChart === "delta"}">`)
-      .replace('<div class="rows-view" id="hybrid-rows"></div>', `<div class="rows-view" id="hybrid-rows">${fieldRows(page)}</div>`)
-      .replace(/<div id="driving-parity-pagination" class="driving-parity-controls driving-parity-pagination" hidden>[\s\S]*?<\/div>\n  <\/main>/u, `${paginationHtml}\n  </main>`);
-    root.innerHTML = html;
-    const overviewTimestamp = root.querySelector("#differential-overview-time");
-    const refreshStatusElement = root.querySelector("#differential-refresh-status");
-    const dashboardNav = typeof document === "undefined" ? null : document.querySelector(".dashboard-primary-nav");
-    if (dashboardNav) {
-      if (refreshStatusElement) dashboardNav.append(refreshStatusElement);
-      if (overviewTimestamp) dashboardNav.append(overviewTimestamp);
-    }
-    paintWaffles();
-    renderProgressChart();
-    const search = root.querySelector("#driving-parity-field-search"), pageSize = root.querySelector("#driving-parity-page-size");
-    search.value = state.search;
-    if (pageSize) pageSize.value = String(state.pageSize);
-  }
-  function requestFieldView({ refocusSearch = false } = {}) {
-    if (!state.fieldPage) {
-      render();
-      if (refocusSearch) {
-        const input = root.querySelector("#driving-parity-field-search");
-        input?.focus?.();
-        input?.setSelectionRange?.(state.search.length, state.search.length);
-      }
-      return;
-    }
-    state.clientRefreshStatus = "loading";
-    render();
-    if (refocusSearch) {
-      const input = root.querySelector("#driving-parity-field-search");
-      input?.focus?.();
-      input?.setSelectionRange?.(state.search.length, state.search.length);
-    }
-    void onFieldViewChange({
-      search: state.search,
-      filter: state.filter,
-      sort: state.sort,
-      page: state.pageIndex,
-      pageSize: state.pageSize,
-    });
-  }
-  root.addEventListener("click", (event) => {
-    const progressControl = event.target.closest("[data-progress-chart-mode]");
-    const chartControl = event.target.closest("[data-driving-parity-chart]");
-    const sortControl = event.target.closest("[data-driving-parity-sort]");
-    const filterControl = event.target.closest("[data-driving-parity-filter]");
-    const pageControl = event.target.closest("#driving-parity-page-prev, #driving-parity-page-next");
-    if (progressControl || chartControl || sortControl || filterControl || pageControl) {
-      if (progressControl) state.progressChart = progressControl.dataset.progressChartMode;
-      if (chartControl) state.chart = chartControl.dataset.drivingParityChart;
-      if (sortControl && state.telemetryAvailability.status === "comparable") state.sort = state.sort === "changed" ? "default" : "changed";
-      if (filterControl) state.filter = state.filter === "failing" ? "all" : "failing";
-      if (pageControl?.id === "driving-parity-page-prev") state.pageIndex = Math.max(0, state.pageIndex - 1);
-      if (pageControl?.id === "driving-parity-page-next") state.pageIndex += 1;
-      if (sortControl || filterControl) state.pageIndex = 0;
-      if (sortControl || filterControl || pageControl) requestFieldView();
-      else render();
-      return;
-    }
-    const row = event.target.closest("[data-row-expand-key]");
-    if (!row) return;
-    const key = row.dataset.rowExpandKey;
-    if (state.expanded.has(key)) state.expanded.delete(key);
-    else state.expanded.add(key);
-    render();
-  });
-  root.addEventListener("change", (event) => {
-    if (event.target.matches("#differential-scenario-selector")) {
-      const scenarioId = String(event.target.value || "");
-      if (scenarioId && scenarioId !== state.payload.scenarioCatalog?.selectedScenarioId) {
-        state.clientRefreshStatus = "loading";
-        state.pendingScenarioId = scenarioId;
-        render();
-        onScenarioChange(scenarioId);
-      }
-      return;
-    }
-    if (event.target.matches("#driving-parity-page-size")) {
-      state.pageSize = Number(event.target.value) || 25;
-      state.pageIndex = 0;
-      requestFieldView();
-      return;
-    }
-    render();
-  });
-  root.addEventListener("keydown", (event) => {
-    if (event.key !== "Enter" && event.key !== " ") return;
-    const row = event.target.closest("[data-row-expand-key]");
-    if (!row) return;
-    event.preventDefault();
-    row.click();
-  });
-  root.addEventListener("input", (event) => {
-    if (!event.target.matches("#driving-parity-field-search")) return;
-    state.search = event.target.value;
-    state.pageIndex = 0;
-    window.clearTimeout(inputRenderTimer);
-    inputRenderTimer = window.setTimeout(() => {
-      requestFieldView({ refocusSearch: true });
-    }, state.fieldPage ? 150 : 0);
-  });
-  render();
-  let chartResizeFrame = 0;
-  const scheduleProgressChartRender = () => {
-    if (typeof window.requestAnimationFrame !== "function") return;
-    if (chartResizeFrame && typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(chartResizeFrame);
-    chartResizeFrame = window.requestAnimationFrame(() => {
-      chartResizeFrame = 0;
-      renderProgressChart();
-    });
-  };
-  const chartResizeObserver = typeof window.ResizeObserver === "function" ? new window.ResizeObserver(scheduleProgressChartRender) : null;
-  chartResizeObserver?.observe(root);
-  window.addEventListener?.("resize", scheduleProgressChartRender);
-  return {
-    update(nextOven, nextPayload, { fieldPage: nextFieldPage = null, frameDeltaMetrics: nextFrameDeltaMetrics = null } = {}) {
-      state.oven = nextOven;
-      state.payload = nextPayload;
-      state.fieldPage = nextFieldPage;
-      state.frameDeltaMetrics = nextFrameDeltaMetrics;
-      if (nextFieldPage) {
-        state.search = nextFieldPage.search;
-        state.filter = nextFieldPage.filter;
-        state.sort = nextFieldPage.sort;
-        state.pageIndex = nextFieldPage.page;
-        state.pageSize = nextFieldPage.pageSize;
-      }
-      fieldOrder = new Map(nextPayload.fields.map((field, index) => [field, index]));
-      state.clientRefreshStatus = null;
-      state.pendingScenarioId = null;
-      state.telemetryByField = differentialTelemetryFieldMap(nextPayload);
-      state.telemetryAvailability = differentialTelemetryAvailability(nextPayload);
-      if (state.sort === "changed" && state.telemetryAvailability.status !== "comparable") state.sort = "default";
-      render();
-    },
-    setClientRefreshStatus(status) {
-      state.clientRefreshStatus = status;
-      if (status === null) state.pendingScenarioId = null;
-      render();
-    },
-    destroy() {
-      chartResizeObserver?.disconnect();
-      window.removeEventListener?.("resize", scheduleProgressChartRender);
-      if (chartResizeFrame && typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(chartResizeFrame);
-    },
-  };
-}
-
-export const DIFFERENTIAL_TESTING_REFRESH_MS = 2000;
-
-export function startDifferentialTestingLiveUpdates(root, {
-  fetchImpl = globalThis.fetch,
-  setIntervalImpl = globalThis.setInterval.bind(globalThis),
-  clearIntervalImpl = globalThis.clearInterval.bind(globalThis),
-  locationImpl = globalThis.location,
-  historyImpl = globalThis.history,
-  mount = mountDifferentialTestingDashboard,
-  repoKey = null,
-  dataOvenId = "differential-testing",
-  adaptOven = (value) => value,
-  adaptPayload = (value) => value,
-  mountOptions = {},
-  refreshMs = DIFFERENTIAL_TESTING_REFRESH_MS,
-  onError = (error, hasDashboard) => {
-    if (!hasDashboard) root.innerHTML = `<div class="empty">${escapeHtml(String(error?.message || error))}</div>`;
-    else console.error("Could not refresh Differential Testing data.", error);
-  },
-} = {}) {
-  root.innerHTML = differentialTestingLoadingMarkup();
-  let oven = null;
-  let dashboard = null;
-  let payloadRevision = "";
-  let refreshInFlight = false;
-  let refreshQueued = false;
-  let scenarioGeneration = 0;
-  let stopped = false;
-  let activePayloadUrl = "";
-  let renderedPayloadHasReport = false;
-  const payloadCache = new Map();
-  let fieldViewQuery = null;
-  let selectedScenarioId = (() => {
-    try { return new URLSearchParams(locationImpl?.search || "").get("scenario") || ""; }
-    catch { return ""; }
-  })();
-
-  const payloadUrl = (scenarioId) => {
-    const searchParams = new URLSearchParams();
-    if (scenarioId) searchParams.set("scenario", scenarioId);
-    if (repoKey) searchParams.set("repoKey", repoKey);
-    if (fieldViewQuery) {
-      searchParams.set("search", fieldViewQuery.search);
-      searchParams.set("filter", fieldViewQuery.filter);
-      searchParams.set("sort", fieldViewQuery.sort);
-      searchParams.set("page", String(fieldViewQuery.page));
-      searchParams.set("pageSize", String(fieldViewQuery.pageSize));
-    }
-    const query = searchParams.toString();
-    return `/api/oven-data/${encodeURIComponent(dataOvenId)}${query ? `?${query}` : ""}`;
-  };
-
-  const read = async (url, key, fallbackMessage) => {
-    const response = await fetchImpl(url, { cache: "no-store" });
-    const json = await response.json();
-    if (!response.ok) throw new Error(json.error || fallbackMessage);
-    return json[key];
-  };
-
-  const readPayload = async (url) => {
-    const cached = payloadCache.get(url);
-    const response = await fetchImpl(url, {
-      cache: "no-store",
-      ...(cached?.etag ? { headers: { "If-None-Match": cached.etag } } : {}),
-    });
-    if (response.status === 304) {
-      if (!cached) throw new Error("Differential Testing data returned 304 before an initial payload was loaded.");
-      return { ...cached, notModified: true };
-    }
-    const json = await response.json();
-    if (!response.ok) throw new Error(json.error || "Could not load Differential Testing data.");
-    const result = {
-      payload: differentialPagedPayload(adaptPayload(json.payload), json.fieldPage),
-      transport: json.transport ?? null,
-      fieldPage: json.fieldPage ?? null,
-      frameDeltaMetrics: json.frameDeltaMetrics ?? null,
-      etag: response.headers?.get?.("etag") || "",
-      notModified: false,
-    };
-    payloadCache.set(url, result);
-    return result;
-  };
-
-  const pendingRefreshStatus = (payload) => ["queued", "running"].includes(payload?.refresh?.status)
-    ? payload.refresh.status
-    : null;
-
-  const refresh = async () => {
-    if (stopped) return;
-    if (refreshInFlight) {
-      refreshQueued = true;
-      return;
-    }
-    refreshInFlight = true;
-    const requestGeneration = scenarioGeneration;
-    const requestScenarioId = selectedScenarioId;
-    const requestPayloadUrl = payloadUrl(requestScenarioId);
-    try {
-      const [nextOven, payloadResult] = await Promise.all([
-        oven ?? read(`/api/ovens/${encodeURIComponent(dataOvenId)}`, "oven", `Could not load ${dataOvenId} Oven.`),
-        readPayload(requestPayloadUrl),
-      ]);
-      if (stopped || requestGeneration !== scenarioGeneration) return;
-      const payload = payloadResult.payload;
-      if (payloadResult.notModified && dashboard && activePayloadUrl === requestPayloadUrl) {
-        dashboard.setClientRefreshStatus?.(renderedPayloadHasReport ? pendingRefreshStatus(payload) : null);
-        return;
-      }
-      const nextRevision = payloadResult.etag || differentialPayloadRevision(payload);
-      oven = adaptOven(nextOven);
-      if (!dashboard) {
-        dashboard = mount(root, oven, payload, {
-          ...mountOptions,
-          onScenarioChange: selectScenario,
-          onFieldViewChange: selectFieldView,
-          fieldPage: payloadResult.fieldPage,
-          frameDeltaMetrics: payloadResult.frameDeltaMetrics,
-        });
-        renderedPayloadHasReport = Boolean(payload?.refresh?.report);
-      } else if (renderedPayloadHasReport && activePayloadUrl === requestPayloadUrl && pendingRefreshStatus(payload)) {
-        dashboard.setClientRefreshStatus?.(pendingRefreshStatus(payload));
-      } else if (nextRevision !== payloadRevision || activePayloadUrl !== requestPayloadUrl) {
-        dashboard.update(oven, payload, {
-          fieldPage: payloadResult.fieldPage,
-          frameDeltaMetrics: payloadResult.frameDeltaMetrics,
-        });
-        renderedPayloadHasReport = Boolean(payload?.refresh?.report);
-      } else dashboard.setClientRefreshStatus?.(null);
-      payloadRevision = nextRevision;
-      activePayloadUrl = requestPayloadUrl;
-    } catch (error) {
-      if (!stopped) {
-        dashboard?.setClientRefreshStatus?.("failed");
-        onError(error, Boolean(dashboard));
-      }
-    } finally {
-      refreshInFlight = false;
-      if (refreshQueued && !stopped) {
-        refreshQueued = false;
-        void refresh();
-      }
-    }
-  };
-
-  const selectScenario = (scenarioId) => {
-    scenarioGeneration += 1;
-    selectedScenarioId = scenarioId;
-    fieldViewQuery = null;
-    payloadCache.clear();
-    try {
-      const nextUrl = new URL(locationImpl?.href || "/ovens/differential-testing/view", "http://localhost");
-      nextUrl.searchParams.set("scenario", scenarioId);
-      historyImpl?.replaceState?.(null, "", `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`);
-    } catch {}
-    return refresh();
-  };
-
-  const selectFieldView = (query) => {
-    scenarioGeneration += 1;
-    payloadCache.clear();
-    fieldViewQuery = {
-      search: String(query?.search ?? ""),
-      filter: query?.filter === "failing" ? "failing" : "all",
-      sort: query?.sort === "changed" ? "changed" : "default",
-      page: Math.max(0, Number.isSafeInteger(Number(query?.page)) ? Number(query.page) : 0),
-      pageSize: [25, 50, 100, 200].includes(Number(query?.pageSize)) ? Number(query.pageSize) : 25,
-    };
-    return refresh();
-  };
-
-  const ready = refresh();
-  const timer = setIntervalImpl(refresh, refreshMs);
-  return {
-    ready,
-    refresh,
-    selectScenario,
-    selectFieldView,
-    stop() {
-      stopped = true;
-      refreshQueued = false;
-      clearIntervalImpl(timer);
-      dashboard?.destroy?.();
-    },
-  };
-}
-
-const differentialRoot = typeof document === "undefined" || globalThis.location?.pathname !== "/ovens/differential-testing/view"
-  ? null
-  : document.querySelector(".shell.driving-parity-view");
-if (differentialRoot) {
-  document.body.classList.add("driving-parity-view");
-  startDifferentialTestingLiveUpdates(differentialRoot);
-}
diff --git a/ovens/performance-tracing/engine/performance-tracing-contract.mjs b/ovens/performance-tracing/contract.mjs
similarity index 100%
rename from ovens/performance-tracing/engine/performance-tracing-contract.mjs
rename to ovens/performance-tracing/contract.mjs
diff --git a/ovens/performance-tracing/engine/performance-tracing-contract.test.mjs b/ovens/performance-tracing/contract.test.mjs
similarity index 95%
rename from ovens/performance-tracing/engine/performance-tracing-contract.test.mjs
rename to ovens/performance-tracing/contract.test.mjs
index 3b4cbc9..e26ef1e 100644
--- a/ovens/performance-tracing/engine/performance-tracing-contract.test.mjs
+++ b/ovens/performance-tracing/contract.test.mjs
@@ -3,10 +3,10 @@ import { mkdtempSync, mkdirSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
 import test from "node:test";
-import { adaptPerformanceTracingReport } from "../../../dashboard/src/lib/performance-tracing.mjs";
-import { startDifferentialTestingLiveUpdates } from "../../differential-testing/renderer/differential-testing-renderer.js";
-import { assertPerformanceTracingData } from "./performance-tracing-contract.mjs";
-import { assertPerformanceTracingProvenanceCurrent } from "./performance-tracing-handler.mjs";
+import { adaptPerformanceTracingReport } from "../../dashboard/src/lib/performance-tracing.mjs";
+import { startDifferentialTestingLiveUpdates } from "../../dashboard/src/oven/differential-testing-render/differential-testing-renderer.js";
+import { assertPerformanceTracingData } from "./contract.mjs";
+import { assertPerformanceTracingProvenanceCurrent } from "./handler.mjs";
 import { createHash } from "node:crypto";
 
 test("Performance Tracing validates reconciled browser-output reports", () => {
diff --git a/ovens/performance-tracing/detail.json b/ovens/performance-tracing/detail.json
deleted file mode 100644
index 6d1040a..0000000
--- a/ovens/performance-tracing/detail.json
+++ /dev/null
@@ -1,85 +0,0 @@
-{
-  "version": 1,
-  "columns": 12,
-  "rows": 14,
-  "rowHeight": 64,
-  "cells": [
-    {
-      "id": "title",
-      "title": "Performance Tracing",
-      "widget": "status",
-      "source": "/",
-      "format": "plain",
-      "column": 1,
-      "row": 1,
-      "columnSpan": 4,
-      "rowSpan": 1
-    },
-    {
-      "id": "burns",
-      "title": "Results",
-      "widget": "pie-chart",
-      "source": "/log",
-      "format": "plain",
-      "column": 5,
-      "row": 1,
-      "columnSpan": 2,
-      "rowSpan": 1
-    },
-    {
-      "id": "fields",
-      "title": "Fields",
-      "widget": "metric",
-      "source": "/summary/fields",
-      "format": "plain",
-      "column": 7,
-      "row": 1,
-      "columnSpan": 3,
-      "rowSpan": 1
-    },
-    {
-      "id": "frames",
-      "title": "Frames",
-      "widget": "metric",
-      "source": "/summary/frames",
-      "format": "plain",
-      "column": 10,
-      "row": 1,
-      "columnSpan": 3,
-      "rowSpan": 1
-    },
-    {
-      "id": "progress",
-      "title": "Trace Progress",
-      "widget": "line-chart",
-      "source": "/progress",
-      "format": "number",
-      "column": 5,
-      "row": 2,
-      "columnSpan": 8,
-      "rowSpan": 5
-    },
-    {
-      "id": "log",
-      "title": "Run History",
-      "widget": "log",
-      "source": "/log",
-      "format": "plain",
-      "column": 1,
-      "row": 2,
-      "columnSpan": 4,
-      "rowSpan": 5
-    },
-    {
-      "id": "field-details",
-      "title": "Budget Details",
-      "widget": "comparison",
-      "source": "/fields",
-      "format": "plain",
-      "column": 1,
-      "row": 7,
-      "columnSpan": 12,
-      "rowSpan": 7
-    }
-  ]
-}
diff --git a/ovens/performance-tracing/engine/performance-tracing-handler.mjs b/ovens/performance-tracing/handler.mjs
similarity index 92%
rename from ovens/performance-tracing/engine/performance-tracing-handler.mjs
rename to ovens/performance-tracing/handler.mjs
index fc0c341..ee8bbfb 100644
--- a/ovens/performance-tracing/engine/performance-tracing-handler.mjs
+++ b/ovens/performance-tracing/handler.mjs
@@ -1,9 +1,9 @@
 import { createHash } from "node:crypto";
 import { readFileSync } from "node:fs";
 import { dirname, isAbsolute, relative, resolve } from "node:path";
-import { registerOvenHandler } from "../../../src/ovens/oven-registry.mjs";
-import { readTextFileWithLimit, safeStat } from "../../../src/server/fs-safe.mjs";
-import { assertPerformanceTracingData } from "./performance-tracing-contract.mjs";
+import { registerOvenHandler } from "../../src/ovens/oven-registry.mjs";
+import { readTextFileWithLimit, safeStat } from "../../src/server/fs-safe.mjs";
+import { assertPerformanceTracingData } from "./contract.mjs";
 
 export const performanceTracingHandler = Object.freeze({
   id: "performance-tracing",
diff --git a/ovens/performance-tracing/instructions.md b/ovens/performance-tracing/instructions.md
index 5edef77..d2494f4 100644
--- a/ovens/performance-tracing/instructions.md
+++ b/ovens/performance-tracing/instructions.md
@@ -24,3 +24,13 @@ Missing, malformed, partially written, contradictory, or unactionable evidence i
 ## Execution Boundary
 
 The Oven is read-only. Project tooling runs traces and atomically publishes the report. Burnlist only validates and displays it.
+
+## Rendering
+
+Performance Tracing is authored as the clean semantic
+`ovens/performance-tracing/performance-tracing.oven`. It renders through the
+React OvenRuntime engine while reusing the differential-testing theme,
+components, formats, and adapter. The DOM-golden gate at
+`dashboard/src/oven/runtime/performance-tracing-oven-dom-golden.test.mjs`
+verifies the rendered PT main state is byte-for-byte identical to the frozen
+`pt-main` golden.
diff --git a/ovens/performance-tracing/performance-tracing.oven b/ovens/performance-tracing/performance-tracing.oven
new file mode 100644
index 0000000..42f0f7a
--- /dev/null
+++ b/ovens/performance-tracing/performance-tracing.oven
@@ -0,0 +1,84 @@
+<oven id="performance-tracing"
+      version="1"
+      contract="burnlist-differential-testing-data@1"
+      refresh-seconds="2"
+      theme="differential-testing">
+  <switch source="/pageMode">
+    <case value="empty">
+      <differential-empty-state title="Differential Testing"/>
+    </case>
+    <case value="detail">
+      <refresh-status source="/refresh"/>
+      <differential-kpi-strip source="/"/>
+
+      <mode-toggle id="progress-mode"
+                   initial="delta"
+                   aria-label="Differential Testing progress view">
+        <option value="progress" label="Progress"/>
+        <option value="failed" label="Failed"/>
+        <option value="delta" label="Delta"/>
+      </mode-toggle>
+      <switch mode-from="progress-mode">
+        <case value="progress">
+          <progress-chart source="/progress"/>
+        </case>
+        <case value="failed">
+          <progress-chart source="/progress"/>
+        </case>
+        <case value="delta">
+          <frame-delta-chart source="/progress"/>
+        </case>
+      </switch>
+
+      <differential-log-table source="/log"/>
+
+      <field-toolbar id="field-controls">
+        <search id="field-search"
+                placeholder="Search Fields..."
+                aria-label="Differential Testing search fields"
+                match-fields="/label /sourceOwner /driftClass /semantics/kind"
+                debounce-ms="150"/>
+        <mode-toggle id="value-mode"
+                     initial="current"
+                     aria-label="Differential Testing chart mode">
+          <option value="current" label="Value"/>
+          <option value="delta" label="Delta"/>
+        </mode-toggle>
+        <sort-toggle id="changed-sort"
+                     key="changed"
+                     label="Changed"
+                     initial="on"
+                     requires-source="/telemetry/status"
+                     requires-value="comparable"
+                     unavailable-text="Changed is unavailable until comparable transition telemetry is published."/>
+        <filter-toggle id="failed-filter"
+                       key="non-pass"
+                       label="Failed"
+                       initial="off"/>
+      </field-toolbar>
+
+      <collection id="field-view"
+                  source="/fields"
+                  item-key="/id"
+                  search-from="field-search"
+                  sort-from="changed-sort"
+                  filter-from="failed-filter"
+                  paging="auto"
+                  page-size="25">
+        <field-list collection-from="field-view"
+                    mode-from="value-mode">
+          <bind prop="telemetryByField"
+                source="/telemetry/fields"
+                format="index-by-id"
+                optional="true"/>
+          <bind prop="telemetryAvailability"
+                source="/telemetry"
+                format="telemetry-availability"
+                optional="true"/>
+        </field-list>
+        <pagination collection-from="field-view"
+                    page-sizes="25 50 100 200"/>
+      </collection>
+    </case>
+  </switch>
+</oven>
diff --git a/ovens/streaming-diff/detail.json b/ovens/streaming-diff/detail.json
deleted file mode 100644
index f9b2a2a..0000000
--- a/ovens/streaming-diff/detail.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "version": 1,
-  "columns": 2,
-  "rows": 3,
-  "rowHeight": 56,
-  "cells": [
-    {
-      "id": "recent-feeds",
-      "title": "Recent feeds",
-      "description": "Recent session feeds by published activity time.",
-      "widget": "list",
-      "source": "/api/oven-data/streaming-diff?list&repoKey={repoKey}",
-      "format": "plain",
-      "column": 1,
-      "row": 1,
-      "columnSpan": 2,
-      "rowSpan": 1
-    },
-    {
-      "id": "stream-cards",
-      "title": "Stream cards",
-      "description": "A selected feed publishes immutable pre-to-post diff cards.",
-      "widget": "timeline",
-      "source": "/api/oven-data/streaming-diff",
-      "format": "plain",
-      "column": 1,
-      "row": 2,
-      "columnSpan": 2,
-      "rowSpan": 2
-    }
-  ]
-}
diff --git a/ovens/streaming-diff/instructions.md b/ovens/streaming-diff/instructions.md
index f7414fa..9750b42 100644
--- a/ovens/streaming-diff/instructions.md
+++ b/ovens/streaming-diff/instructions.md
@@ -1,12 +1,17 @@
 # Streaming Diff
 
-Streaming Diff is a declarative, read-only Oven for recently published,
-session-scoped pre-to-post diff cards. Producers write immutable cards to the
-local feed; the dashboard observes them through the Oven data endpoint.
+`streaming-diff.oven` is the declarative, read-only selected-feed view for
+recently published, session-scoped pre-to-post diff cards. It renders the
+heading and diff cards through the `.oven` engine, byte-for-byte identical to
+the selected-feed component view.
 
-Select a feed with its logical repository key, worktree key, and session. A
-feed's activity time indicates recent publication only; it does not indicate
-that an agent or process is live.
+## Payload contract
 
-This package contains no executable renderer, hook, or producer code. The
-server-side adapter validates and reads the local feed without mutating it.
+The view binds `burnlist-streaming-diff-data@2` after `adaptStreamingDiff(snapshot)`.
+The adapter provides the feed identity, update time, normalized cards, and the
+back link used by the heading. `StreamingDiffHeading` and `DiffCardList` reuse
+the existing `DiffCard` and `FileDiff` rendering components.
+
+The dashboard is a read-only observer: it never mutates canonical Burnlist
+state, lifecycle folders, the registry, or the feed. The feed is snapshot
+pollable; the `.oven` engine does not require SSE.
diff --git a/ovens/streaming-diff/streaming-diff.oven b/ovens/streaming-diff/streaming-diff.oven
new file mode 100644
index 0000000..751eaf6
--- /dev/null
+++ b/ovens/streaming-diff/streaming-diff.oven
@@ -0,0 +1,4 @@
+<oven id="streaming-diff" version="1" contract="burnlist-streaming-diff-data@2" theme="streaming-diff">
+  <streaming-diff-heading session="/identity/session" back-href="/backHref"/>
+  <diff-card source="/cards"/>
+</oven>
diff --git a/ovens/visual-parity/engine/visual-parity-contract.mjs b/ovens/visual-parity/contract.mjs
similarity index 98%
rename from ovens/visual-parity/engine/visual-parity-contract.mjs
rename to ovens/visual-parity/contract.mjs
index 38cadd1..7d4d86a 100644
--- a/ovens/visual-parity/engine/visual-parity-contract.mjs
+++ b/ovens/visual-parity/contract.mjs
@@ -1,4 +1,4 @@
-import { assertDifferentialTestingData } from "../../differential-testing/engine/differential-testing-data-contract.mjs";
+import { assertDifferentialTestingData } from "../differential-testing/engine/data-contract.mjs";
 
 export const VISUAL_PARITY_SCHEMA = "burnlist-visual-parity-data@1";
 
diff --git a/ovens/visual-parity/engine/visual-parity-contract.test.mjs b/ovens/visual-parity/contract.test.mjs
similarity index 95%
rename from ovens/visual-parity/engine/visual-parity-contract.test.mjs
rename to ovens/visual-parity/contract.test.mjs
index ce1587c..ce01371 100644
--- a/ovens/visual-parity/engine/visual-parity-contract.test.mjs
+++ b/ovens/visual-parity/contract.test.mjs
@@ -1,7 +1,7 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { buildPayload } from "../../differential-testing/example/adapter.mjs";
-import { assertVisualParityData } from "./visual-parity-contract.mjs";
+import { buildPayload } from "../differential-testing/example/adapter.mjs";
+import { assertVisualParityData } from "./contract.mjs";
 
 test("Visual Parity qualifies target domains without hiding failing context", () => {
   const payload = fixture();
diff --git a/ovens/visual-parity/detail.json b/ovens/visual-parity/detail.json
deleted file mode 100644
index 7407021..0000000
--- a/ovens/visual-parity/detail.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "version": 1,
-  "columns": 12,
-  "rows": 12,
-  "rowHeight": 64,
-  "cells": [
-    {
-      "id": "verdict",
-      "title": "Target verdict",
-      "widget": "status",
-      "source": "/comparisons",
-      "format": "plain",
-      "column": 1,
-      "row": 1,
-      "columnSpan": 3,
-      "rowSpan": 2
-    },
-    {
-      "id": "domains",
-      "title": "Render domains",
-      "widget": "table",
-      "source": "/domains",
-      "format": "plain",
-      "column": 4,
-      "row": 1,
-      "columnSpan": 9,
-      "rowSpan": 2
-    },
-    {
-      "id": "frames",
-      "title": "Frame comparisons",
-      "widget": "comparison",
-      "source": "/comparisons",
-      "format": "plain",
-      "column": 1,
-      "row": 3,
-      "columnSpan": 12,
-      "rowSpan": 10
-    }
-  ]
-}
diff --git a/ovens/visual-parity/engine/visual-parity-handler.mjs b/ovens/visual-parity/handler.mjs
similarity index 94%
rename from ovens/visual-parity/engine/visual-parity-handler.mjs
rename to ovens/visual-parity/handler.mjs
index 0c1f20d..d0b1c20 100644
--- a/ovens/visual-parity/engine/visual-parity-handler.mjs
+++ b/ovens/visual-parity/handler.mjs
@@ -1,7 +1,7 @@
 import { basename } from "node:path";
-import { registerOvenHandler } from "../../../src/ovens/oven-registry.mjs";
-import { readTextFileWithLimit, safeStat } from "../../../src/server/fs-safe.mjs";
-import { assertVisualParityData } from "./visual-parity-contract.mjs";
+import { registerOvenHandler } from "../../src/ovens/oven-registry.mjs";
+import { readTextFileWithLimit, safeStat } from "../../src/server/fs-safe.mjs";
+import { assertVisualParityData } from "./contract.mjs";
 
 function readVisualParityData(bindingPath, maxOvenDataBytes) {
   const stat = safeStat(bindingPath);
diff --git a/ovens/visual-parity/instructions.md b/ovens/visual-parity/instructions.md
index e6876e4..81bcb2d 100644
--- a/ovens/visual-parity/instructions.md
+++ b/ovens/visual-parity/instructions.md
@@ -5,3 +5,11 @@ Visual Parity compares trusted reference and candidate frames as isolated render
 The project adapter publishes `burnlist-visual-parity-data@1`. A passing domain must satisfy its explicit calibrated channel, mean-delta, and changed-pixel bounds. Context domains remain visible and retain their own pass/fail state, but do not decide the target scenario verdict.
 
 Do not widen a tolerance to make a regression green. Calibrate only a deterministic renderer-boundary residual with a written rationale, preserve the zero-tolerance default, and keep gameplay/state authority in the linked Differential Testing payload.
+
+The visual-parity detail view renders through the `.oven` engine
+(`ovens/visual-parity/visual-parity.oven`), byte-for-byte identical to the React
+`VerdictHeader` / `DomainTabs` / `MetricTiles` / `DomainNote` / `FrameCard` /
+`ImageTriptych` components, as verified by dom-golden coverage. Domain-tab
+selection is wired declaratively by id with a `domain-tabs` control and
+`selection-from`; the engine is a read-only observer and never mutates canonical
+state.
diff --git a/ovens/visual-parity/visual-parity.oven b/ovens/visual-parity/visual-parity.oven
new file mode 100644
index 0000000..8e1540e
--- /dev/null
+++ b/ovens/visual-parity/visual-parity.oven
@@ -0,0 +1,20 @@
+<oven id="visual-parity" version="1" contract="burnlist-visual-parity-data@1" theme="visual-parity">
+  <verdict-header>
+    <bind prop="targetPass" source="/verdict/targetPass"/>
+    <bind prop="framesCount" source="/verdict/framesCount"/>
+    <bind prop="error" source="/verdict/error"/>
+  </verdict-header>
+  <domain-tabs id="domain-select" source="/domains" initial-source="/initialDomainId"/>
+  <metric-tiles selection-from="domain-select" source="/byDomain">
+    <bind prop="passed" source="/summary/passed"/>
+    <bind prop="total" source="/summary/total"/>
+    <bind prop="ratio" source="/summary/ratio"/>
+    <bind prop="meanAbsoluteDelta" source="/summary/meanAbsoluteDelta"/>
+    <bind prop="maximumAbsoluteDelta" source="/summary/maximumAbsoluteDelta"/>
+  </metric-tiles>
+  <domain-note selection-from="domain-select" source="/byDomain">
+    <bind prop="isTarget" source="/note/isTarget"/>
+    <bind prop="rationale" source="/note/rationale"/>
+  </domain-note>
+  <frame-card selection-from="domain-select" source="/byDomain"/>
+</oven>
diff --git a/package-lock.json b/package-lock.json
index 05bed15..00e6717 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-tabs": "^1.1.13",
         "@vitejs/plugin-react": "^4.3.4",
+        "esbuild": "^0.25.12",
         "lucide-react": "^0.468.0",
         "radix-ui": "^1.6.2",
         "react": "^19.0.0",
diff --git a/package.json b/package.json
index 229ff8e..6e5bf96 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,9 @@
     "burnlist": "bin/burnlist.mjs"
   },
   "exports": {
-    "./differential-testing": "./ovens/differential-testing/engine/differential-testing-adapter-sdk.mjs",
-    "./differential-testing/contract": "./ovens/differential-testing/engine/differential-testing-contract.mjs",
-    "./differential-testing/transport": "./ovens/differential-testing/engine/differential-testing-transport.mjs"
+    "./differential-testing": "./ovens/differential-testing/engine/adapter-sdk.mjs",
+    "./differential-testing/contract": "./ovens/differential-testing/engine/contract.mjs",
+    "./differential-testing/transport": "./ovens/differential-testing/engine/transport.mjs"
   },
   "files": [
     "bin/",
@@ -28,9 +28,9 @@
   ],
   "scripts": {
     "build:dashboard": "vite build --config dashboard/vite.config.mjs",
-    "test:differential-testing": "node --test ovens/differential-testing/engine/differential-testing-adapter-sdk.test.mjs ovens/differential-testing/engine/differential-testing-contract.test.mjs ovens/differential-testing/engine/differential-testing-data-contract.test.mjs ovens/differential-testing/engine/differential-testing-transport-renderer.test.mjs ovens/differential-testing/engine/differential-testing-transport-server.test.mjs",
-    "test:performance-tracing": "node --test ovens/performance-tracing/engine/performance-tracing-contract.test.mjs",
-    "test:visual-parity": "node --test ovens/visual-parity/engine/visual-parity-contract.test.mjs",
+    "test:differential-testing": "node --test ovens/differential-testing/engine/adapter-sdk.test.mjs ovens/differential-testing/engine/contract.test.mjs ovens/differential-testing/engine/data-contract.test.mjs ovens/differential-testing/engine/transport-renderer.test.mjs ovens/differential-testing/engine/transport-server.test.mjs",
+    "test:performance-tracing": "node --test ovens/performance-tracing/contract.test.mjs",
+    "test:visual-parity": "node --test ovens/visual-parity/contract.test.mjs",
     "verify": "node scripts/verify.mjs",
     "verify:clean": "node scripts/verify-clean.mjs",
     "verify:package": "node scripts/verify-package.mjs",
@@ -45,6 +45,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@vitejs/plugin-react": "^4.3.4",
+    "esbuild": "^0.25.12",
     "lucide-react": "^0.468.0",
     "radix-ui": "^1.6.2",
     "react": "^19.0.0",
diff --git a/scripts/smoke-global-install.mjs b/scripts/smoke-global-install.mjs
index f9885c9..e2bb4ca 100755
--- a/scripts/smoke-global-install.mjs
+++ b/scripts/smoke-global-install.mjs
@@ -86,7 +86,7 @@ try {
   run(cli, ["--stamp"], { capture: true });
   run(cli, ["oven", "list"], { capture: true });
   const sdkPath = run(cli, ["differential-testing", "sdk"], { capture: true });
-  const expectedSdkPath = resolve(packageRoot, "ovens", "differential-testing", "engine", "differential-testing-adapter-sdk.mjs");
+  const expectedSdkPath = resolve(packageRoot, "ovens", "differential-testing", "engine", "adapter-sdk.mjs");
   if (realpathSync(sdkPath) !== realpathSync(expectedSdkPath)) throw new Error(`installed CLI reported unexpected SDK path: ${sdkPath}`);
   run(process.execPath, ["--input-type=module", "--eval", `
     const sdk = await import(${JSON.stringify(pathToFileURL(sdkPath).href)});
diff --git a/scripts/verify-oven-assertions.mjs b/scripts/verify-oven-assertions.mjs
index 0012014..5addf41 100644
--- a/scripts/verify-oven-assertions.mjs
+++ b/scripts/verify-oven-assertions.mjs
@@ -6,7 +6,9 @@ export function assertBuiltInOvenSet(repoRoot, expected) {
   const ovensRoot = resolve(repoRoot, "ovens");
   const actual = readdirSync(ovensRoot, { withFileTypes: true })
     .filter((entry) => entry.isDirectory())
-    .filter((entry) => ["instructions.md", "detail.json"].every((name) => existsSync(join(ovensRoot, entry.name, name))))
+    .filter((entry) => existsSync(join(ovensRoot, entry.name, "instructions.md")))
+    .filter((entry) => readdirSync(join(ovensRoot, entry.name))
+      .some((name) => name.endsWith(".oven") && name === `${entry.name}.oven`))
     .map((entry) => entry.name)
     .sort();
   const wanted = [...expected].sort();
@@ -35,7 +37,7 @@ export function assertBuiltInOven(repoRoot, id, expectedName) {
     const ovenPackage = normalizeOvenPackage({
       id,
       instructions: readFileSync(resolve(root, "instructions.md"), "utf8"),
-      detail: JSON.parse(readFileSync(resolve(root, "detail.json"), "utf8")),
+      oven: readFileSync(resolve(root, `${id}.oven`), "utf8"),
     });
     const heading = ovenPackage.instructions
       .split(/\r?\n/u)
diff --git a/scripts/verify-package.mjs b/scripts/verify-package.mjs
index 8054e2d..7cb65c0 100755
--- a/scripts/verify-package.mjs
+++ b/scripts/verify-package.mjs
@@ -42,29 +42,25 @@ const required = [
   "skills/burnlist/references/burnlist-creation.md",
   "ovens/checklist/instructions.md",
   "ovens/differential-testing/instructions.md",
-  "ovens/differential-testing/detail.json",
-  "ovens/differential-testing/schema/differential-testing-data.schema.json",
+  "ovens/differential-testing/differential-testing.oven",
+  "ovens/differential-testing/engine/data.schema.json",
   "skills/burnlist/references/differential-testing-data.md",
   "skills/burnlist/references/differential-testing-adapter-sdk.md",
-  "ovens/differential-testing/engine/differential-testing-adapter-sdk.mjs",
-  "ovens/differential-testing/engine/differential-testing-contract.mjs",
-  "ovens/differential-testing/engine/differential-testing-data-contract.mjs",
-  "ovens/differential-testing/engine/differential-testing-transport.mjs",
+  "ovens/differential-testing/engine/adapter-sdk.mjs",
+  "ovens/differential-testing/engine/contract.mjs",
+  "ovens/differential-testing/engine/data-contract.mjs",
+  "ovens/differential-testing/engine/transport.mjs",
   "ovens/differential-testing/example/adapter.mjs",
   "ovens/differential-testing/example/reference.json",
   "ovens/differential-testing/example/candidate.json",
-  "ovens/differential-testing/renderer/differential-testing.css",
-  "ovens/differential-testing/renderer/differential-testing-progress-chart.js",
-  "ovens/differential-testing/renderer/differential-testing-renderer.js",
   "ovens/performance-tracing/instructions.md",
-  "ovens/performance-tracing/detail.json",
-  "ovens/performance-tracing/engine/performance-tracing-contract.mjs",
-  "ovens/performance-tracing/engine/performance-tracing-handler.mjs",
+  "ovens/performance-tracing/performance-tracing.oven",
+  "ovens/performance-tracing/contract.mjs",
+  "ovens/performance-tracing/handler.mjs",
   "ovens/visual-parity/instructions.md",
-  "ovens/visual-parity/detail.json",
-  "ovens/visual-parity/engine/visual-parity-contract.mjs",
-  "ovens/visual-parity/engine/visual-parity-handler.mjs",
-  "ovens/visual-parity/renderer/visual-parity.css",
+  "ovens/visual-parity/visual-parity.oven",
+  "ovens/visual-parity/contract.mjs",
+  "ovens/visual-parity/handler.mjs",
   "dashboard/dist/index.html",
 ];
 
diff --git a/scripts/verify-test-files.mjs b/scripts/verify-test-files.mjs
index e46f6c0..2342602 100644
--- a/scripts/verify-test-files.mjs
+++ b/scripts/verify-test-files.mjs
@@ -1,19 +1,26 @@
 export const verificationTestFiles = [
   "src/server/dashboard-routes.test.mjs",
+  "src/server/custom-oven-view-routes.test.mjs",
+  "src/server/custom-oven-index.test.mjs",
   "src/server/oven-routes.test.mjs",
   "src/server/run-routes.test.mjs",
   "src/server/dashboard-entry-isolation.test.mjs",
   "src/server/burnlist-discovery.test.mjs",
   "src/ovens/oven-contract.test.mjs",
   "src/ovens/oven-registry.test.mjs",
+  "src/ovens/dsl/xml-scan.test.mjs",
+  "src/ovens/dsl/oven-validate.test.mjs",
+  "src/ovens/dsl/oven-compile.test.mjs",
   "src/server/projects.test.mjs",
   "src/server/projects-api.test.mjs",
-  "ovens/differential-testing/engine/differential-testing-adapter-sdk.test.mjs",
-  "ovens/differential-testing/engine/differential-testing-contract.test.mjs",
-  "ovens/differential-testing/engine/differential-testing-data-contract.test.mjs",
-  "ovens/differential-testing/engine/differential-testing-transport-server.test.mjs",
-  "ovens/performance-tracing/engine/performance-tracing-contract.test.mjs",
-  "ovens/visual-parity/engine/visual-parity-contract.test.mjs",
+  "ovens/differential-testing/engine/adapter-sdk.test.mjs",
+  "ovens/differential-testing/engine/contract.test.mjs",
+  "ovens/differential-testing/engine/data-contract.test.mjs",
+  "ovens/differential-testing/engine/transport-poll.test.mjs",
+  "ovens/differential-testing/engine/transport-server.test.mjs",
+  "dashboard/src/oven/differential-testing-render/differential-testing-goldens.test.mjs",
+  "ovens/performance-tracing/contract.test.mjs",
+  "ovens/visual-parity/contract.test.mjs",
   "ovens/streaming-diff/engine/streaming-diff-data-contract.test.mjs",
   "ovens/streaming-diff/engine/streaming-diff-capture.test.mjs",
   "ovens/streaming-diff/engine/streaming-diff-capture-git.test.mjs",
@@ -41,6 +48,7 @@ export const verificationTestFiles = [
   "src/cli/skills-install-cli-purge.test.mjs",
   "src/cli/commands-help.test.mjs",
   "src/cli/oven-cli.test.mjs",
+  "src/cli/oven-fork-id.test.mjs",
   "src/cli/oven-cli-stdout.test.mjs",
   "src/cli/oven-storage.test.mjs",
   "src/cli/umbrella.test.mjs",
@@ -54,8 +62,20 @@ export const verificationTestFiles = [
   "src/server/repo-map.test.mjs",
   "src/server/repo-state.test.mjs",
   "dashboard/src/components/ProjectGroup/BurnlistRow.test.mjs",
+  "dashboard/src/components/CustomOvenView/custom-oven-render.test.mjs",
   "dashboard/src/components/ChecklistDashboard/ChecklistDashboard.test.mjs",
-  "dashboard/src/lib/checklist-progress-chart.test.mjs",
+  "dashboard/src/components/ChecklistDashboard/checklist-dom-golden.test.mjs",
+  "dashboard/src/components/ChecklistDashboard/checklist-adapter.test.mjs",
+  "dashboard/src/lib/differential-testing-adapter.test.mjs",
+  "dashboard/src/oven/runtime/checklist-oven-golden.test.mjs",
+  "dashboard/src/components/StreamingDiff/streaming-diff-dom-golden.test.mjs",
+  "dashboard/src/oven/runtime/streaming-diff-oven-dom-golden.test.mjs",
+  "dashboard/src/oven/runtime/differential-testing-oven-dom-golden.test.mjs",
+  "dashboard/src/oven/runtime/oven-node-default-case.test.mjs",
+  "dashboard/src/oven/runtime/differential-testing-live-compact.test.mjs",
+  "dashboard/src/oven/runtime/differential-testing-live-controls.test.mjs",
+  "dashboard/src/oven/runtime/oven-live-data-304.test.mjs",
+  "dashboard/src/oven/runtime/performance-tracing-oven-dom-golden.test.mjs",
   "dashboard/src/lib/streaming-diff.test.mjs",
   "dashboard/src/lib/project-open.test.mjs",
   "dashboard/src/lib/oven-identity.test.mjs",
diff --git a/scripts/verify.mjs b/scripts/verify.mjs
index caba978..e877385 100755
--- a/scripts/verify.mjs
+++ b/scripts/verify.mjs
@@ -82,6 +82,7 @@ const leakPatterns = [
 
 const sourceScanExcludes = [
   ".git/",
+  ".claude/",
   ".local/",
   "build/",
   "dist/",
@@ -89,6 +90,7 @@ const sourceScanExcludes = [
   ".playwright-cli/",
   "notes/burnlists/",
   "output/",
+  "research/",
   "website/node_modules/",
   "website/dist/",
   "website/.astro/",
@@ -135,7 +137,7 @@ function assertSourceExcludes(path, needle, message) {
 
 
 function assertDifferentialTestingContractAssets() {
-  const schemaPath = resolve(repoRoot, "ovens/differential-testing/schema/differential-testing-data.schema.json");
+  const schemaPath = resolve(repoRoot, "ovens/differential-testing/engine/data.schema.json");
   const schema = JSON.parse(readFileSync(schemaPath, "utf8"));
   if (schema.$id !== "urn:burnlist:differential-testing-data:1" || schema.properties?.schema?.const !== "burnlist-differential-testing-data@1") {
     console.error("Differential Testing JSON Schema id and payload version must describe burnlist-differential-testing-data@1.");
@@ -213,9 +215,9 @@ function assertPublishablePackage() {
     console.error("package.json does not expose the Burnlist CLI.");
     process.exit(1);
   }
-  if (packageJson.exports?.["./differential-testing"] !== "./ovens/differential-testing/engine/differential-testing-adapter-sdk.mjs"
-    || packageJson.exports?.["./differential-testing/contract"] !== "./ovens/differential-testing/engine/differential-testing-contract.mjs"
-    || packageJson.exports?.["./differential-testing/transport"] !== "./ovens/differential-testing/engine/differential-testing-transport.mjs") {
+  if (packageJson.exports?.["./differential-testing"] !== "./ovens/differential-testing/engine/adapter-sdk.mjs"
+    || packageJson.exports?.["./differential-testing/contract"] !== "./ovens/differential-testing/engine/contract.mjs"
+    || packageJson.exports?.["./differential-testing/transport"] !== "./ovens/differential-testing/engine/transport.mjs") {
     console.error("package.json does not expose the stable Differential Testing worker, contract, and transport subpaths.");
     process.exit(1);
   }
@@ -237,16 +239,16 @@ const jsFiles = [...new Set([
   ...walkFiles(resolve(repoRoot, "bin"), (path) => path.endsWith(".mjs")),
   ...walkFiles(resolve(repoRoot, "scripts"), (path) => path.endsWith(".mjs")),
   ...walkFiles(resolve(repoRoot, "src"), (path) => path.endsWith(".mjs")),
-  ...walkFiles(resolve(repoRoot, "ovens/differential-testing/engine"), (path) => path.endsWith(".mjs")),
-  ...walkFiles(resolve(repoRoot, "ovens/performance-tracing/engine"), (path) => path.endsWith(".mjs")),
+  ...walkFiles(resolve(repoRoot, "ovens/differential-testing"), (path) => path.endsWith(".mjs")),
+  ...walkFiles(resolve(repoRoot, "ovens/performance-tracing"), (path) => path.endsWith(".mjs")),
   ...walkFiles(resolve(repoRoot, "ovens/streaming-diff/engine"), (path) => path.endsWith(".mjs")),
-  ...walkFiles(resolve(repoRoot, "ovens/visual-parity/engine"), (path) => path.endsWith(".mjs")),
+  ...walkFiles(resolve(repoRoot, "ovens/visual-parity"), (path) => path.endsWith(".mjs")),
   resolve(repoRoot, "src/ovens/oven-registry.mjs"),
   resolve(repoRoot, "src/ovens/built-in-handlers.mjs"),
   resolve(repoRoot, "src/ovens/handlers/generic-json-handler.mjs"),
-  resolve(repoRoot, "ovens/differential-testing/engine/differential-testing-handler.mjs"),
-  resolve(repoRoot, "ovens/differential-testing/renderer/differential-testing-progress-chart.js"),
-  resolve(repoRoot, "ovens/differential-testing/renderer/differential-testing-renderer.js"),
+  resolve(repoRoot, "ovens/differential-testing/engine/handler.mjs"),
+  resolve(repoRoot, "dashboard/src/oven/differential-testing-render/differential-testing-progress-chart.js"),
+  resolve(repoRoot, "dashboard/src/oven/differential-testing-render/differential-testing-renderer.js"),
 ])].sort();
 
 for (const file of jsFiles) {
@@ -254,7 +256,7 @@ for (const file of jsFiles) {
 }
 
 assertSourceIncludes("dashboard/src/App.tsx", ">Ovens</h1>", "Dashboard page is missing.");
-assertSourceIncludes("dashboard/src/App.tsx", "<ChecklistDashboard", "Checklist Oven is not using the canonical React dashboard.");
+assertSourceIncludes("dashboard/src/App.tsx", "<ChecklistOvenView", "Checklist Oven is not rendered through its declarative engine view.");
 for (const surface of ["ChecklistKpis", "ProgressPanel", "ProgressLedger", "EventCardList"]) {
   assertSourceIncludes("dashboard/src/components/ChecklistDashboard/ChecklistDashboard.tsx", `function ${surface}`, `Checklist dashboard is missing ${surface}.`);
 }
@@ -265,23 +267,22 @@ assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", 'url.pathname =
 assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", "/api\\/oven-data", "Read-only Oven data API is missing.");
 assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", 'url.pathname === "/api/repo-map"', "Read-only repository map API is missing.");
 assertSourceIncludes("src/server/repo-map.mjs", 'REPO_MAP_SCHEMA = "burnlist-repo-map@1"', "Repository map API does not expose its strict v1 schema.");
-assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", 'assertKnownKeys(value, new Set(["id", "name", "instructions", "detail"]), "Oven")', "Oven creation does not reject fields outside the strict Oven contract.");
+assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", 'assertKnownKeys(value, new Set(["id", "name", "instructions"]), "Oven")', "Oven creation does not reject fields outside the strict Oven contract.");
 assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", 'assertKnownKeys(value, new Set(["ovenId", "ovenRepoKey", "repoRoot", "title", "objective"]), "Burn run")', "Burn run creation does not reject fields outside the strict Oven contract.");
 assertSourceIncludes(".github/workflows/publish.yml", "git fetch origin main", "Publish reruns must refresh origin/main before release-state checks.");
 assertSourceIncludes(".github/workflows/publish.yml", '"refs/tags/${VERSION}^{}"', "Publish tag verification must request annotated-tag peeled refs.");
 assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", "ovenId(record.ovenId);", "Burn run reads do not require the canonical ovenId.");
-assertSourceIncludes("ovens/differential-testing/engine/differential-testing-handler.mjs", "assertDifferentialTestingData(payload)", "Differential Testing data is not validated at the server boundary.");
-assertSourceIncludes("ovens/performance-tracing/engine/performance-tracing-handler.mjs", "assertPerformanceTracingData(payload)", "Performance Tracing data is not validated at the server boundary.");
-assertSourceIncludes("ovens/visual-parity/engine/visual-parity-handler.mjs", "assertVisualParityData(payload)", "Visual Parity data is not validated at the server boundary.");
-assertSourceIncludes("ovens/differential-testing/engine/differential-testing-handler.mjs", 'ovenName: "Differential Testing"', "Differential Testing scenarios are missing from the shared dashboard table.");
-assertSourceIncludes("ovens/differential-testing/engine/differential-testing-handler.mjs", "queryDifferentialTestingFieldPage", "Differential Testing server is missing bounded field-page transport.");
+assertSourceIncludes("ovens/differential-testing/engine/handler.mjs", "assertDifferentialTestingData(payload)", "Differential Testing data is not validated at the server boundary.");
+assertSourceIncludes("ovens/performance-tracing/handler.mjs", "assertPerformanceTracingData(payload)", "Performance Tracing data is not validated at the server boundary.");
+assertSourceIncludes("ovens/visual-parity/handler.mjs", "assertVisualParityData(payload)", "Visual Parity data is not validated at the server boundary.");
+assertSourceIncludes("ovens/differential-testing/engine/handler.mjs", 'ovenName: "Differential Testing"', "Differential Testing scenarios are missing from the shared dashboard table.");
+assertSourceIncludes("ovens/differential-testing/engine/handler.mjs", "queryDifferentialTestingFieldPage", "Differential Testing server is missing bounded field-page transport.");
 assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", 'id === "differential-testing"', "Dashboard server still hardcodes the Differential Testing Oven.");
 assertSourceIncludes("dashboard/src/lib/hrefs.ts", '? value! : "active"', "Dashboard table is not filtered to Active by default.");
 assertSourceIncludes("dashboard/src/components/ProjectGroup/BurnlistTable.tsx", '<th className="burnlist-table-heading">Oven</th>', "Shared dashboard table does not identify each row's Oven.");
 assertSourceIncludes("bin/burnlist.mjs", "--oven-data <id=path>", "Burnlist CLI is missing read-only Oven data binding help.");
 assertSourceIncludes("bin/burnlist.mjs", "differential-testing validate <differential-testing.json>", "Burnlist CLI is missing Differential Testing data validation help.");
 assertSourceIncludes("bin/burnlist.mjs", "differential-testing validate-bundle <bundle/current.json>", "Burnlist CLI is missing Differential Testing bundle validation help.");
-assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "Oven detail page skeleton", "Oven detail skeleton is missing.");
 assertSourceIncludes("dashboard/src/components/AppHeader/AppHeader.tsx", 'className="dashboard-header"', "Dashboard header is missing its semantic style hook.");
 assertSourceIncludes("dashboard/src/index.css", "height: 50px;", "Dashboard header is not fixed at 50px.");
 assertSourceIncludes("dashboard/src/components/AppHeader/AppHeader.tsx", 'aria-label="Burnlist home"', "Dashboard header logo does not link home.");
@@ -300,13 +301,6 @@ assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", '"typeId"', "Bu
 assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", 'record.typeId', "Burn run reads still accept retired typeId records.");
 assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", "/assets/fallback-burn-types.js", "Burnlist still exposes the retired type asset alias.");
 assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", '["api", "ovens", "types", "runs"]', "Burnlist still reserves the retired types route.");
-assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "setPointerCapture", "Oven detail skeleton pointer capture is missing.");
-assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", 'aria-label="New detail section"', "Oven inline detail-section editor is missing.");
-assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "DetailTypePicker", "Oven chart-type icon picker is missing.");
-assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "Describe the metric", "Oven metric-description textarea is missing.");
-assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "const NEW_OVEN_ROW_HEIGHT = 50", "New Oven row height is not defined as a fixed implementation constant.");
-assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", 'className="oven-fields-row"', "React New Oven metadata fields are missing their semantic layout hook.");
-assertSourceIncludes("dashboard/src/index.css", "grid-template-columns: repeat(4, minmax(0, 1fr));", "React New Oven metadata fields are not arranged in columns.");
 assertSourceExcludes("dashboard/src/index.css", "tailwindcss", "Dashboard stylesheet still imports Tailwind.");
 assertSourceExcludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "grid-area-title", "Oven detail sections still expose a separate title field.");
 assertSourceExcludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "grid-area-source", "Oven detail sections still expose a source-path field.");
@@ -318,7 +312,7 @@ assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", "builder-hint",
 assertSourceExcludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "Drag to place a detail section", "React New Oven still renders the removed skeleton helper text.");
 assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", "grid-ruler", "Oven detail skeleton still renders grid ruler numbers.");
 assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", 'class="form-card oven-builder"', "Oven detail skeleton is still wrapped in a card container.");
-assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", "schemaVersion: 4", "Burn runs do not write manifest schema version 4.");
+assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", "schemaVersion: 5", "Burn runs do not write manifest schema version 5.");
 assertSourceIncludes("src/server/burnlist-dashboard-server.mjs", "ovenRevision: oven.ovenRevision", "Burn runs do not pin the Oven revision.");
 assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", 'useState("checklist")', "React Run Burn does not default to Checklist.");
 assertSourceIncludes("ovens/checklist/instructions.md", "## Active Checklist", "Checklist no longer preserves the Burnlist active queue contract.");
@@ -332,56 +326,56 @@ assertSourceIncludes("ovens/differential-testing/instructions.md", "Every newly
 assertSourceIncludes("ovens/differential-testing/instructions.md", "No per-candidate ledger", "Differential Testing still requires per-candidate history ceremony.");
 assertSourceIncludes("ovens/differential-testing/instructions.md", "queued`, `running`, `complete`, or `failed`", "Differential Testing is missing refresh-state discipline.");
 assertSourceExcludes("ovens/differential-testing/instructions.md", "exactCycles", "Differential Testing instructions still expose exactCycles ceremony.");
-assertSourceIncludes("ovens/differential-testing/engine/differential-testing-data-contract.mjs", "buildDifferentialTelemetry", "Differential Testing is missing deterministic telemetry construction.");
-assertSourceIncludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", 'value: "comparison"', "React New Oven is missing the controlled Comparison widget.");
-assertSourceIncludes("dashboard/src/components/DifferentialTesting/DifferentialTesting.tsx", "startDifferentialTestingLiveUpdates", "Differential Testing React view is not using the shared live updater.");
-assertSourceExcludes("dashboard/src/components/DifferentialTesting/DifferentialTesting.tsx", "fetch(", "Differential Testing React view duplicates the shared live updater.");
-assertSourceExcludes("dashboard/src/components/DifferentialTesting/DifferentialTesting.tsx", "setInterval", "Differential Testing React view duplicates the shared polling timer.");
-assertSourceExcludes("dashboard/src/components/DifferentialTesting/DifferentialTesting.tsx", "differentialPayloadRevision", "Differential Testing React view duplicates shared revision tracking.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'searchParams.set("scenario", scenarioId)', "Differential Testing is not bound to read-only scenario selection.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'searchParams.set("pageSize"', "Differential Testing is not bound to server-side field paging.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "startDifferentialTestingLiveUpdates", "Differential Testing does not refresh live data.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "differentialTelemetryFieldMap", "Differential Testing Changed view is not bound to telemetry transitions.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "differentialExactTarget", "Differential Testing exact decisions are not bound to exact-session authority.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "exactSession?.exactComparison", "Differential Testing renderer still reads the removed exact-comparison surface.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "reconciled telemetry only", "Differential Testing does not visibly distinguish aggregate telemetry from exact authority.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "field.samples", "Differential Testing is missing paired sample charts.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'role="button" tabindex="0" aria-expanded=', "Differential Testing rows do not preserve the expand interaction contract.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'placeholder="Search Fields..."', "Differential Testing does not preserve the canonical search control.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'data-driving-parity-chart="delta"', "Differential Testing does not preserve the canonical Value and Delta controls.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'data-driving-parity-sort="improved"', "Differential Testing does not preserve the canonical Changed control.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'data-driving-parity-filter="failing"', "Differential Testing does not preserve the canonical Failed control.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'class="hybrid-cell hybrid-field"', "Differential Testing does not preserve the canonical hybrid field cell.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'class="hybrid-cell hybrid-metric"', "Differential Testing does not preserve the canonical hybrid metric cell.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'class="hybrid-chart"', "Differential Testing does not preserve the canonical hybrid chart cell.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", '`Δ ${value(field.maxDelta)}`', "Differential Testing still invents a Greek delta prefix that the canonical hybrid row never renders.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'value(field.maxDelta)', "Differential Testing drops the canonical plain numeric value line.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-progress-chart.js", "maxTime = Math.max(minTime + 1", "Differential Testing history does not handle one-run data without a floating label.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "spikeThreshold", "Differential Testing history still erases losing telemetry runs that later restore baseline.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-progress-chart.js", "withoutBacktrackedFailedSpikes", "Differential Testing is not using the canonical progress-chart history projection.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "Cards view", "Differential Testing still carries the removed legacy cards view.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "Table view", "Differential Testing still carries the removed legacy table view.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "grid-template-columns: 20% 10% minmax(0, 70%)", "Differential Testing rows do not use the canonical hybrid geometry.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "height: 90px", "Differential Testing collapsed rows do not use the canonical height.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "height: 220px", "Differential Testing expanded rows do not use the canonical height.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", ".differential-overview:not([hidden]) + .detail-workspace {\n  height: auto;", "Differential Testing Overview and top panels do not preserve intrinsic height.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'class="work-panel-title">Overview</div>', "Differential Testing still renders the removed Overview section title.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", "grid-template-columns: 30% minmax(0, 70%)", "Differential Testing top panels do not preserve the canonical 30/70 layout.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", "inset: 28px 0 0", "Differential Testing top panels do not preserve the shared-card template.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", ".driving-parity-view .differential-tabs", "Differential Testing tab groups do not share one component style.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", '--dashboard-title-font: "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;', "Differential Testing does not preserve the canonical title font stack.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", ".driving-parity-view .driving-parity-controls button,\n.driving-parity-view .driving-parity-controls select,\n.driving-parity-view .driving-parity-controls input,\n.driving-parity-view .driving-parity-overall-toggle {\n  font: 14px/1.2 var(--dashboard-title-font);\n}", "Differential Testing controls do not preserve the canonical sans-serif typography.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", '.driving-parity-view .driving-parity-controls input[type="search"],\n.driving-parity-view .driving-parity-controls input[type="search"]:focus {\n  background: transparent;\n}', "Differential Testing search input does not preserve its transparent background.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", "h2 { margin: 0 0 12px; font-size: 16px; font-weight: 400; letter-spacing: 0; }", "Differential Testing panel headings do not preserve the canonical type scale.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'return minutes === 0 ? "now" : minutes + "m";', "Differential Testing Age values do not preserve the canonical minute display.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", '`${hours}h`', "Differential Testing Age values still collapse minutes into hours.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", '<h2 id="progress-panel-title">Parity Progress</h2>', "Differential Testing does not render the canonical progress title.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing-renderer.js", 'id="driving-parity-inline-renderer"', "Differential Testing does not preserve the canonical inline renderer boundary.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "isolateDrivingParityFrame", "Differential Testing still moves the canonical inline renderer into a non-reference frame.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "frame.srcdoc", "Differential Testing still publishes the canonical inline renderer through srcdoc.");
-assertSourceIncludes("ovens/differential-testing/renderer/differential-testing.css", "flex: 0 0 auto;", "Differential Testing log rows can stretch to fill the panel.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "differential-exact-session", "Differential Testing adds a non-template exact-authority panel.");
-assertSourceExcludes("ovens/differential-testing/renderer/differential-testing-renderer.js", "Targeted Burn", "Differential Testing renderer still hardcodes a project workflow title.");
+assertSourceIncludes("ovens/differential-testing/engine/data-contract.mjs", "buildDifferentialTelemetry", "Differential Testing is missing deterministic telemetry construction.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", 'searchParams.set("scenario", scenarioId)', "Differential Testing is not bound to read-only scenario selection.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", 'searchParams.set("pageSize"', "Differential Testing is not bound to server-side field paging.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "startDifferentialTestingLiveUpdates", "Differential Testing does not refresh live data.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "differentialTelemetryFieldMap", "Differential Testing Changed view is not bound to telemetry transitions.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "differentialExactTarget", "Differential Testing exact decisions are not bound to exact-session authority.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "exactSession?.exactComparison", "Differential Testing renderer still reads the removed exact-comparison surface.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "reconciled telemetry only", "Differential Testing does not visibly distinguish aggregate telemetry from exact authority.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-render.js", "field.samples", "Differential Testing is missing paired sample charts.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-render.js", 'role="button" tabindex="0" aria-expanded=', "Differential Testing rows do not preserve the expand interaction contract.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", 'placeholder="Search Fields..."', "Differential Testing does not preserve the canonical search control.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", 'data-driving-parity-chart="delta"', "Differential Testing does not preserve the canonical Value and Delta controls.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", 'data-driving-parity-sort="improved"', "Differential Testing does not preserve the canonical Changed control.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", 'data-driving-parity-filter="failing"', "Differential Testing does not preserve the canonical Failed control.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-render.js", 'class="hybrid-cell hybrid-field"', "Differential Testing does not preserve the canonical hybrid field cell.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-render.js", 'class="hybrid-cell hybrid-metric"', "Differential Testing does not preserve the canonical hybrid metric cell.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-render.js", 'class="hybrid-chart"', "Differential Testing does not preserve the canonical hybrid chart cell.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", '`Δ ${value(field.maxDelta)}`', "Differential Testing still invents a Greek delta prefix that the canonical hybrid row never renders.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-render.js", 'value(field.maxDelta)', "Differential Testing drops the canonical plain numeric value line.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-progress-chart.js", "maxTime = Math.max(minTime + 1", "Differential Testing history does not handle one-run data without a floating label.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "spikeThreshold", "Differential Testing history still erases losing telemetry runs that later restore baseline.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-progress-chart.js", "withoutBacktrackedFailedSpikes", "Differential Testing is not using the canonical progress-chart history projection.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "Cards view", "Differential Testing still carries the removed legacy cards view.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", "Cards view", "Differential Testing still carries the removed legacy cards view.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "Table view", "Differential Testing still carries the removed legacy table view.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", "Table view", "Differential Testing still carries the removed legacy table view.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", "grid-template-columns: 20% 10% minmax(0, 70%)", "Differential Testing rows do not use the canonical hybrid geometry.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", "height: 90px", "Differential Testing collapsed rows do not use the canonical height.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", "height: 220px", "Differential Testing expanded rows do not use the canonical height.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", ".differential-overview:not([hidden]) + .detail-workspace {\n  height: auto;", "Differential Testing Overview and top panels do not preserve intrinsic height.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", 'class="work-panel-title">Overview</div>', "Differential Testing still renders the removed Overview section title.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", 'class="work-panel-title">Overview</div>', "Differential Testing still renders the removed Overview section title.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", "grid-template-columns: 30% minmax(0, 70%)", "Differential Testing top panels do not preserve the canonical 30/70 layout.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", "inset: 28px 0 0", "Differential Testing top panels do not preserve the shared-card template.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", ".driving-parity-view .differential-tabs", "Differential Testing tab groups do not share one component style.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", '--dashboard-title-font: "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;', "Differential Testing does not preserve the canonical title font stack.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", ".driving-parity-view .driving-parity-controls button,\n.driving-parity-view .driving-parity-controls select,\n.driving-parity-view .driving-parity-controls input,\n.driving-parity-view .driving-parity-overall-toggle {\n  font: 14px/1.2 var(--dashboard-title-font);\n}", "Differential Testing controls do not preserve the canonical sans-serif typography.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", '.driving-parity-view .driving-parity-controls input[type="search"],\n.driving-parity-view .driving-parity-controls input[type="search"]:focus {\n  background: transparent;\n}', "Differential Testing search input does not preserve its transparent background.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", "h2 { margin: 0 0 12px; font-size: 16px; font-weight: 400; letter-spacing: 0; }", "Differential Testing panel headings do not preserve the canonical type scale.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", 'return minutes === 0 ? "now" : minutes + "m";', "Differential Testing Age values do not preserve the canonical minute display.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", '`${hours}h`', "Differential Testing Age values still collapse minutes into hours.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", '<h2 id="progress-panel-title">Parity Progress</h2>', "Differential Testing does not render the canonical progress title.");
+assertSourceIncludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", 'id="driving-parity-inline-renderer"', "Differential Testing does not preserve the canonical inline renderer boundary.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "isolateDrivingParityFrame", "Differential Testing still moves the canonical inline renderer into a non-reference frame.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "frame.srcdoc", "Differential Testing still publishes the canonical inline renderer through srcdoc.");
+assertSourceIncludes("dashboard/src/components/DifferentialTesting/differential-testing.css", "flex: 0 0 auto;", "Differential Testing log rows can stretch to fill the panel.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "differential-exact-session", "Differential Testing adds a non-template exact-authority panel.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", "differential-exact-session", "Differential Testing adds a non-template exact-authority panel.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-renderer.js", "Targeted Burn", "Differential Testing renderer still hardcodes a project workflow title.");
+assertSourceExcludes("dashboard/src/oven/differential-testing-render/differential-testing-template.js", "Targeted Burn", "Differential Testing renderer still hardcodes a project workflow title.");
 assertSourceExcludes("src/server/burnlist-dashboard-server.mjs", "exact comparator when used", "Fallback Run Burn still requests the superseded manual comparator workflow.");
 assertSourceExcludes("dashboard/src/components/BurnOvens/BurnOvens.tsx", "exact comparator when used", "React Run Burn still requests the superseded manual comparator workflow.");
 assertSourceIncludes("skills/burnlist/SKILL.md", "references/burnlist-creation.md", "The Burnlist skill does not route creation work.");
@@ -404,6 +398,7 @@ assertDifferentialTestingContractAssets();
 assertPublishablePackage();
 
 run(process.execPath, ["--test", ...verificationTestFiles]);
+run(process.execPath, ["dashboard/src/oven/test-support/run-oven-tests.mjs"]);
 
 const {
   BURNLIST_CLAUDE_SKILLS_DIR: ignoredClaudeSkillsDir,
diff --git a/skills/burnlist/SKILL.md b/skills/burnlist/SKILL.md
index b03e6a5..7a00545 100644
--- a/skills/burnlist/SKILL.md
+++ b/skills/burnlist/SKILL.md
@@ -8,6 +8,8 @@ description: >-
 
 Use one skill for the full Burnlist lifecycle. Burnlist is task state, not implementation strategy; let the repo or domain skill own code, tests, browser or oracle evidence, performance rules, deploy rules, and PR packaging.
 
+> **Start here:** Read `references/getting-started.md` first if Burnlist is new to you. It explains what Burnlist is, the three concepts, and installation and setup.
+
 ## Choose A Mode
 
 - **Creation mode:** when creating, hardening, restructuring, or readying a Burnlist, read `references/burnlist-creation.md` completely before editing Burnlist files. Creation owns `draft -> ready` and does not implement the planned work unless the user also asks to continue into execution.
@@ -18,13 +20,16 @@ Use one skill for the full Burnlist lifecycle. Burnlist is task state, not imple
 
 Read references only when their trigger applies:
 
+- `references/getting-started.md`: new-agent onboarding: what Burnlist is, the three concepts, and installation and setup.
 - `references/burnlist-creation.md`: mandatory for creation, hardening, draft repair, and `draft -> ready` work.
 - `references/burnlist-protocol.md`: lifecycle moves, required file shapes, `goal.md`, `completed.md`, scratch, legacy migration, closeout, local artifacts.
 - `references/burnlist-splitting-lanes.md`: split/reorder decisions, recursive gates, parent/lane Burnlists, parallel lane handoff.
 - `references/burnlist-visible-output.md`: detailed silence rules, forbidden narration examples, checkpoint policy.
 - `references/burnlist-dashboard.md`: dashboard/chart/log/timeline/repo-graph behavior or dashboard repair only.
 - `references/installation.md`: installing or removing the agent skill or Streaming Diff edit-capture hooks.
+- `references/designing-ovens.md`: choosing what an Oven should measure through proxy-resistant evidence, before touching the DSL.
 - `references/oven-authoring.md`: authoring or inspecting Ovens from the `burnlist oven` CLI, the widget/format vocabulary, and source-binding conventions.
+- `references/creating-ovens.md`: authoring a new .oven declarative source (grammar, elements, binding, themes, compile-to-IR walkthrough).
 
 Do not load cold references for a normal single-item implementation unless needed. If a task touches a cold-rule area, read the matching reference before editing Burnlist state in that area.
 
diff --git a/skills/burnlist/references/burnlist-creation.md b/skills/burnlist/references/burnlist-creation.md
index 3d17cd2..0ce0a35 100644
--- a/skills/burnlist/references/burnlist-creation.md
+++ b/skills/burnlist/references/burnlist-creation.md
@@ -111,6 +111,12 @@ Good hardening questions target:
 
 If a reasonable default is clear from repo evidence, do not block on a question. Record durable assumptions in `goal.md` or item-specific assumptions in the relevant item body.
 
+## Proof Authority: cite an Oven number
+
+An item's proof authority may be an objective Oven signal rather than a self-report. When a Burnlist tracks work an Oven measures, write the done/delete condition to cite that number, for example: "Done/delete when Oven `migration-status` shows `validatedFraction = 100%` and `schemaFailures = 0`."
+
+This is **advisory evidence a human or agent reads. Burnlist does not execute the Oven or auto-verify the number**—`burnlist burn` and `burnlist --check` validate the Burnlist protocol and record the burn; they never read Oven data or the adapter's bound JSON. The honesty is that the proof points at an adapter-computed signal the worker cannot type by hand. Record which Oven and which pointer are authoritative in `goal.md` under `## Proof Authority`. See [Designing Ovens](designing-ovens.md) for the adapter that computes the number and [Oven Authoring](oven-authoring.md) for binding it.
+
 ## Checklist Quality Gate
 
 The checklist is the product. Before finalizing:
diff --git a/skills/burnlist/references/burnlist-dashboard.md b/skills/burnlist/references/burnlist-dashboard.md
index 0772e14..22b69de 100644
--- a/skills/burnlist/references/burnlist-dashboard.md
+++ b/skills/burnlist/references/burnlist-dashboard.md
@@ -43,7 +43,7 @@ Agents should not start, stop, or announce this server during ordinary Burnlist
 
 Paginate the main Burnlist table after lifecycle filtering, with `20` rows per page. Store pages in `?page=<number>`, reset to page one when the lifecycle filter changes, clamp invalid or oversized pages, and preserve the current filter and page through detail and back links.
 
-Place `New Oven` at the top right of the main table. Keep `Run Burn` off the primary dashboard controls; its direct `/runs/new` route remains available. The normative definition and ownership boundary are in `oven-contract.md`; this UI must preserve them. Checklist and Differential Testing are the only immutable default Ovens. Each positioned detail section chooses a controlled chart type by icon and stores one plain-language metric description; it may remain unbound until a project adapter supplies normalized data. Keep Columns and Rows with the upper Oven definition fields, and use a fixed `50px` row-height constant for newly built skeletons instead of exposing row-height configuration. Persist custom Ovens under ignored `.local/burnlist/ovens/` state and immutable Run snapshots under `.local/burnlist/runs/`. The grid builder should faithfully reuse aiterator's rectangle-drag interaction pattern, but not its raw HTML generation path.
+Place `New Oven` at the top right of the main table. Keep `Run Burn` off the primary dashboard controls; its direct `/runs/new` route remains available. The normative definition and ownership boundary are in `oven-contract.md`; this UI must preserve them. Checklist and Differential Testing are the only immutable default Ovens. New Oven creation is now `{id, name, instructions}` and the server scaffolds a starter `<id>.oven`; the drag-to-place grid detail-builder was removed. Persist custom Ovens under ignored `.local/burnlist/ovens/` state and immutable Run snapshots under `.local/burnlist/runs/`.
 
 ## Local Observer State
 
diff --git a/skills/burnlist/references/creating-ovens.md b/skills/burnlist/references/creating-ovens.md
new file mode 100644
index 0000000..e076eb4
--- /dev/null
+++ b/skills/burnlist/references/creating-ovens.md
@@ -0,0 +1,284 @@
+# Creating `.oven` Sources
+
+Practical guide to the declarative `.oven` source path. `.oven` is the sole
+canonical Oven structure; `detail.json` is retired and survives only in a
+read-only legacy path for old run snapshots. Read
+`references/oven-authoring.md` and `references/oven-contract.md` for the
+current package contract and CLI guidance.
+
+## What an Oven Is
+
+An Oven is declarative, non-executable data. It ships no JavaScript, CSS,
+`eval`, or component imports. A project adapter supplies one read-only payload;
+the Oven only declares how the shared runtime presents that payload.
+
+```text
+human .oven source
+  -> compileOven: scanXml -> validateOven -> buildIR
+  -> frozen burnlist-oven-ir@1 JSON (build-generated)
+  -> browser imports IR; OvenRuntime renders it through the shared engine + theme
+```
+
+`compileOven(source)` returns diagnostics or a frozen IR. Use
+`compileOvenFile(path)` when compiling a file. The IR preserves the source
+tree, derives `controls`, `collections`, and `requirements`, camel-cases
+attributes such as `back-href` to `backHref` and `column-span` to
+`columnSpan`, and converts these attributes to numbers:
+
+```text
+version, refresh-seconds, columns, rows, row-height, column, row,
+column-span, row-span, page-size, debounce-ms
+```
+
+`optional` and `default` become booleans. `plain` is stored in IR as the
+`identity` format alias.
+
+## Closed contract and theme allowlist
+
+**A custom Oven cannot define a new contract, theme, or icon.** It must reuse a
+built-in pair. For a generic KPI-and-table Oven over arbitrary project JSON,
+use `contract="checklist-progress@1"` and `theme="checklist"`. The remaining
+contracts, themes, and the specialized widgets belong to their matching
+normalized-data contracts.
+
+Unknown values are rejected when creating the Oven:
+
+```text
+burnlist oven: Oven <id> .oven source is invalid: Unknown theme <x>
+burnlist oven: Oven <id> .oven source is invalid: Unknown contract <x>
+```
+
+Every source has exactly one root:
+
+```xml
+<oven id="streaming-diff"
+      version="1"
+      contract="burnlist-streaming-diff-data@2"
+      refresh-seconds="2"
+      theme="streaming-diff">
+  <!-- allowed children -->
+</oven>
+```
+
+`id`, `version`, `contract`, and `theme` are required. `refresh-seconds` is
+optional. Version is currently `1`; `refresh-seconds` is a positive integer no
+greater than 3600. The complete closed registries are:
+
+| Registry | Exact allowed values |
+| --- | --- |
+| contracts | `checklist-progress@1`, `burnlist-differential-testing-data@1`, `burnlist-streaming-diff-data@2`, `burnlist-visual-parity-data@1` |
+| themes | `checklist`, `differential-testing`, `streaming-diff`, `visual-parity` |
+| icons | `ClipboardList`, `Clock3`, `Gauge`, `TimerReset` |
+
+## Vocabulary
+
+The compiler rejects unknown elements, attributes, and parent/child
+combinations. The following is the complete author-facing vocabulary, grouped
+by purpose; attributes shown are the grammar's allowed attributes.
+
+### Layout
+
+| Element | Allowed attributes | Direct children |
+| --- | --- | --- |
+| `box` | `id`, `element`, `class`, `text`, `data-detail-tab` | layout, display, interaction, and `refresh-status` where permitted by the grammar |
+| `grid` | `id`, `columns`, `rows`, `row-height` | `box`, `panel`, `stack`, KPI, checklist, table, collection, toolbar, and switch elements |
+| `stack` | `id`, `direction`, `gap` | `box`, `grid`, `panel`, `stack`, KPI, checklist, table, collection, toolbar, switch, `refresh-status` |
+| `panel` | `id`, `title`, `column`, `row`, `column-span`, `row-span` | layout, KPI, checklist, table, collection, toolbar, switch, `mode-toggle` |
+
+`box` requires `element`, whose value is one of `div`, `section`, `main`, or
+`span`. `grid` requires `columns`; grid panels cannot overlap or exceed its
+declared bounds. `panel` requires `id`.
+
+### Display widgets
+
+| Widgets | Allowed attributes and children |
+| --- | --- |
+| `kpi-strip` / `kpi-item` | The strip accepts `id`, `aria-label`, `class`, `title` and contains `kpi-item`. An item accepts `id`, `class`, `heading`, `title`, `value`, `icon`, `variant`, `source`, `format`, `optional`, `fallback`, `slot`; it may contain `bind`, `text`, `icon`, `progress-donut`, `burn-donut`, `waffle-metric`, `progress-value`. |
+| `section-header` / `log-table` / `column` | Header: `id`, `class`, `title`, `source`, `format`, `optional`, `fallback`, `slot`, with `bind`, `text`, `icon`. Table: `id`, `class`, `title`, `source`, `empty-text`, with `column`. Column: `label`, `source`, `format`, `optional`, `fallback`, `tone`. |
+| `verdict-header`, `metric-tiles`, `domain-tabs`, `domain-note`, `frame-card` | `verdict-header` takes `id` and `bind`; `metric-tiles` takes `id`, `source`, `selection-from`, and `bind`; `domain-tabs` takes `id`, `source`, `initial-source`, `format`; `domain-note` takes `id`, `source`, `selection-from`, and `bind`; `frame-card` takes `id`, `source`, `format`, `optional`, `fallback`, `slot`, `selection-from`, and may contain `bind`, `text`, `icon`. |
+| `image-triptych`, `feed-list`, `diff-card`, `file-diff` | `image-triptych` and `feed-list` take `id` and `bind`. `diff-card` and `file-diff` take `id`, `source`, `format`, `optional`, `fallback`, `slot`, and may contain `bind`, `text`, `icon`. |
+| `refresh-status` / `streaming-diff-heading` | `refresh-status` takes `id`, `source`, `format`, `optional`, `fallback`, `slot`. `streaming-diff-heading` takes `id`, `session`, `back-href`. |
+| Checklist widgets | `checklist-burn-panel`, `checklist-ledger`, and `checklist-event-cards` each take `id`, `source`, `format`, `optional`, `fallback`, `slot`. |
+| Differential widgets | `differential-kpi-strip`, `differential-log-table`, `progress-chart`, and `frame-delta-chart` each take `id`, `source`, `format`, `optional`, `fallback`, `slot`. `differential-empty-state` takes `id`, `title`. |
+
+Only registered icons may be used by `<icon name="...">` or `kpi-item`
+`icon`. Registered `kpi-item` variants are `current`, `scenario`, `burns`,
+`fields`, and `frames`.
+
+### Interactivity and collections
+
+| Element | Allowed attributes and structure |
+| --- | --- |
+| `switch` / `case` | A switch takes `id`, `source`, `mode-from` and contains `case`; it requires exactly one of `source` or `mode-from`. A case takes `value`, `default`, and requires either `value` or `default="true"`. |
+| `collection` | Requires `id`, `source`, `item-key`, `paging`, `page-size`; it may also use `search-from`, `filter-from`, `sort-from`, and contains `each`, `field-list`, and/or `pagination`. `paging` is `client`, `server`, or `auto`. |
+| `each` / `field-list` / `pagination` | `each` has no attributes and contains a grid, stack, panel, KPI item, section header, table, or switch. `field-list` takes `id`, `collection-from`, `mode-from` and contains `bind`. `pagination` requires `collection-from`, `page-sizes`, and must be inside a collection. |
+| `field-toolbar` | Requires `id` and contains `search`, `mode-toggle`, `sort-toggle`, and/or `filter-toggle`. |
+| Toolbar controls | `search`: `id`, `placeholder`, `aria-label`, `match-fields`, `debounce-ms`; `mode-toggle`: `id`, `initial`, `aria-label`, with at least two `option` children; `option`: `value`, `label`; `sort-toggle`: `id`, `key`, `label`, `initial`, `requires-source`, `requires-value`, `unavailable-text`; `filter-toggle`: `id`, `key`, `label`, `initial`. |
+
+The registered sort key is `changed`; the registered filter key is `non-pass`.
+Controls are not allowed inside `each`.
+
+## Binding and Control Wiring
+
+`source="/json/pointer"` reads the adapter document using an RFC 6901 pointer.
+For a component with named input properties, use a child binding:
+
+```xml
+<bind prop="heading" source="/summary/title" format="plain"/>
+```
+
+`bind` requires `prop` and `source`; it may also have `format`, `optional`, and
+`fallback`. `text` similarly accepts `slot`, `text`, `source`, `format`,
+`optional`, and `fallback`, but requires exactly one of `text` or `source`.
+`icon` requires both `slot` and `name`.
+Every `format` must be one of:
+
+```text
+identity, plain, number, percent, delta, ratio-to-percent, length, time-only,
+relative-age, progress-headline, last-progress-percent, last-failed-count,
+last-failed-percent, last-frame-delta, last-delta-percent, index-by-id,
+telemetry-availability
+```
+
+Inside an `each` or a `column` scope, `@item/...` reads the current collection
+item. This self-contained collection and table example shows both forms:
+
+```xml
+<collection id="active-items" source="/active" item-key="/id" paging="client" page-size="25">
+<each>
+  <kpi-item>
+    <bind prop="heading" source="@item/title" format="plain"/>
+    <bind prop="value" source="@item/id" format="plain"/>
+  </kpi-item>
+</each>
+</collection>
+
+<log-table source="/timeline" empty-text="No timeline events yet.">
+  <column label="Time" source="@item/time" format="time-only"/>
+  <column label="Event" source="@item/title" format="plain"/>
+</log-table>
+```
+
+`tone` on a `<column>` is appended verbatim as an extra CSS class on the
+rendered cell, alongside `log-table-cell` and the column-label slug. It has no
+fixed enum and is visible only when the active theme stylesheet defines that
+class. In a generic checklist-theme Oven, leave `tone` unset unless the chosen
+theme styles the token.
+
+### Format semantics
+
+Formats transform a `source` or `bind` value before display. The generic formats
+are appropriate for generic custom Ovens:
+
+| Format | Input shape → output |
+| --- | --- |
+| `identity` / `plain` | Any value → unchanged. `plain` is the identity alias stored in IR as `identity`; use it for verbatim strings and ids. |
+| `number` | Numeric value or numeric string → integer-grouped string with no decimals; `1234.7` → `"1,235"`. Empty or non-finite → `""`. |
+| `percent` | Fraction from 0 through 1 → percentage string with two decimals, or three below `0.01`; `0.96` → `"96.00%"`, `0.005` → `"0.500%"`. Null or undefined → `""`. |
+| `delta` | Number → up to four decimals with trailing zeroes trimmed; `0.5` → `"0.5"`, `1.25` → `"1.25"`. Null or undefined → `""`. |
+| `ratio-to-percent` | Fraction number from 0 through 1 → numeric value ×100, not a string; `0.96` → `96`. Null or non-finite → undefined. |
+| `length` | String or array → numeric `.length`; any other type → undefined. |
+| `time-only` | ISO timestamp, date string, or epoch → local 24-hour `"HH:MM"`; `"2026-07-20T09:05:00Z"` → `"09:05"`. Unparseable → `""`. |
+| `relative-age` | Timestamp → compact age from now: under 60 seconds `"Ns"`, under 60 minutes `"Nm"`, under 24 hours `"Nh"`, otherwise `"Nd"`; about three hours ago → `"3h"`. Unparseable → `""`. |
+
+The following eight formats are **Differential-Testing-only**. They read the
+last row of a Differential-Testing result-row array unless noted otherwise.
+Generic Oven authors should not use them.
+
+| Format | Input shape → output |
+| --- | --- |
+| `progress-headline` | Last row → `"frame/frames"` string. |
+| `last-progress-percent` | Last row's `frame/frames` ratio → number ×100. |
+| `last-failed-count` | Last row's failed-field count → string. |
+| `last-failed-percent` | Last row's `failed/total` field ratio → number ×100. |
+| `last-frame-delta` | Last row's absolute frame delta → string, or `"—"` when absent. |
+| `last-delta-percent` | Last row's absolute frame delta divided by frames → number ×100. |
+| `index-by-id` | Array of `{id, …}` objects → object keyed by each `id`. |
+| `telemetry-availability` | Telemetry payload → its availability descriptor. |
+
+Declare controls with an `id`, then name that id from consumers:
+`search-from` targets `search`, `sort-from` targets `sort-toggle`,
+`filter-from` targets `filter-toggle`, `mode-from` targets `mode-toggle`,
+`selection-from` targets `domain-tabs`, and `collection-from` targets
+`collection`. `domain-tabs initial-source` is instead a JSON pointer for the
+initial selection. A `switch` can read a pointer through `source` or a
+`mode-toggle` id through `mode-from`.
+
+These components require exactly one `bind` for every named property:
+
+| Component | Required bound properties |
+| --- | --- |
+| `metric-tiles` | `passed`, `total`, `ratio`, `meanAbsoluteDelta`, `maximumAbsoluteDelta` |
+| `verdict-header` | `targetPass`, `framesCount`, `error` |
+| `image-triptych` | `images`, `label`, `frame` |
+| `feed-list` | `feeds`, `error`, `loading`, `showRepository` |
+| `domain-note` | `isTarget`, `rationale` |
+
+## Keep Sources Clean
+
+Normal Ovens use neither `class=` nor `<box>`. The five shipped sources
+(`streaming-diff`, `checklist`, `visual-parity`, `performance-tracing`, and
+`differential-testing`) follow that rule: theme entries and shared components
+supply chrome and default classes.
+
+`class=` is an optional escape hatch only on `box`, `kpi-strip`, `kpi-item`,
+`section-header`, and `log-table`. `<box element="..." class="...">` is the
+corresponding super-custom escape hatch. Keep both out of ordinary sources.
+
+## Author a New Oven
+
+First run `burnlist init` from the repository; then author an `instructions.md`
+with a level-one heading and a `.oven` file. Create the package with
+`burnlist oven create <id> --instructions <file> --oven <file>`, then bind the
+JSON payload with `burnlist oven bind <id> <path>`. The CLI and dashboard details
+are in `references/oven-authoring.md`.
+
+Here is a complete generic KPI-and-table source, `kpi.oven`:
+
+```xml
+<oven id="deploy-status" version="1" contract="checklist-progress@1" theme="checklist">
+  <section-header title="Deploy status"/>
+  <kpi-strip>
+    <kpi-item heading="Service" source="/service"/>
+    <kpi-item heading="Healthy" source="/healthyPct" format="percent"/>
+    <kpi-item heading="Last deploy" source="/deployedAt" format="relative-age"/>
+  </kpi-strip>
+  <log-table source="/events"><column label="Event" source="@item"/></log-table>
+</oven>
+```
+
+Bind it to `deploy-data.json`:
+
+```json
+{
+  "service": "checkout-api",
+  "healthyPct": 0.96,
+  "deployedAt": "2026-07-20T09:00:00Z",
+  "events": ["09:00 deploy started", "09:02 healthy", "09:05 traffic shifted"]
+}
+```
+
+`healthyPct` renders as `"96.00%"`; `deployedAt` renders a compact age such as
+`"3h"`. The source remains declarative; an adapter, if needed, only produces
+the read-only JSON document. Record pointer meanings and payload shape in the
+Oven instructions so the agreement is discoverable.
+
+For a collection with id-wired controls, use this compact pattern:
+
+```xml
+<field-toolbar id="field-controls">
+  <search id="field-search" placeholder="Search Fields..."
+          aria-label="Differential Testing search fields"
+          match-fields="/label /sourceOwner /driftClass /semantics/kind"/>
+  <filter-toggle id="failed-filter" key="non-pass" label="Failed" initial="off"/>
+</field-toolbar>
+<collection id="field-view" source="/fields" item-key="/id"
+            search-from="field-search" filter-from="failed-filter"
+            paging="auto" page-size="25">
+  <field-list collection-from="field-view"/>
+  <pagination collection-from="field-view" page-sizes="25 50 100 200"/>
+</collection>
+```
+
+Use the earlier collection example for iteration and `@item`. `box` and `class`
+remain optional escape hatches; ordinary sources should not need either.
diff --git a/skills/burnlist/references/designing-ovens.md b/skills/burnlist/references/designing-ovens.md
new file mode 100644
index 0000000..3514434
--- /dev/null
+++ b/skills/burnlist/references/designing-ovens.md
@@ -0,0 +1,125 @@
+# Designing Your Oven: Measure What You Can't Fake
+
+## Why an Oven exists
+
+An Oven makes progress objective so an agent cannot fool itself. It is the antidote to “I think it’s done”: a read-only view over evidence you compute, never a self-report.
+
+## The design question
+
+For your problem, ask: “What signal proves this is working, that I cannot fake or hand-wave?” Design the Oven around that signal.
+
+## Measure proxy-resistant evidence
+
+| Bad: self-reported and gameable | Good: objective and verifiable |
+| --- | --- |
+| “~80% done” | “142/200 tests pass” |
+| “Looks good” | “3 byte-diffs remain” or “0 pixel drift” |
+| “Should work” | “1,240/1,500 rows migrated and validated” |
+
+The built-ins follow this rule. Differential Testing measures byte-identical goldens. Visual Parity measures pixel diffs. Streaming Diff captures the real pre-to-post diffs. Performance Tracing measures real timings against a budget. None accepts self-assessment. Your Oven should apply the same standard to your domain.
+
+## What could you measure? (cheat-sheet)
+
+| Problem type | Honest signal |
+| --- | --- |
+| Refactor | Test pass count, byte-diff against a frozen golden, and 0 type errors |
+| Migration | Rows migrated and validated, schema conformance, and the legacy read still green |
+| Feature | Acceptance checks passing |
+| Bug fix | The failing reproduction now passes, with 0 regressions |
+| Performance | Real measured timings against a baseline—never “feels faster” |
+
+## From signal to Oven
+
+Map each signal onto the built-in view vocabulary:
+
+- Headline numbers → `kpi-strip`
+- The event stream—what happened and when → `log-table`
+- Burn-down → `progress-donut`
+
+The real values come from a data adapter: a small, project-owned step that computes the honest numbers and writes them as one read-only JSON document. The Oven binds to those values by JSON pointer. Keep the Oven declarative: it says how to present the numbers and never computes them.
+
+## The adapter: compute honest numbers, don't type them
+
+The Oven is only the view. Between reality and the view sits the **adapter**: a small, project-owned script that reads a source of truth, computes the numbers, and writes the single read-only JSON document the Oven binds to. Skip it—hand-edit the JSON—and you have defeated the whole point: a number you typed proves nothing.
+
+This complete adapter for a generic `checklist-progress@1` Oven counts validated rows from a real directory and writes the bound document. Node built-ins only:
+
+```js
+#!/usr/bin/env node
+// migration-adapter.mjs — computes honest numbers from reality and writes the
+// oven's bound JSON. Node built-ins only. The project runs this, not Burnlist.
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+
+const rows = new URL('./migrated-rows/', import.meta.url);
+const files = (await readdir(rows)).filter((n) => n.endsWith('.json'));
+
+let validated = 0, schemaFailures = 0;
+for (const name of files) {
+  try {
+    const row = JSON.parse(await readFile(new URL(name, rows), 'utf8'));
+    if (row && typeof row.id === 'string') validated += 1; else schemaFailures += 1;
+  } catch { schemaFailures += 1; }
+}
+
+const out = new URL('./.local/burnlist/', import.meta.url);
+await mkdir(out, { recursive: true });
+await writeFile(new URL('migration-status-data.json', out), JSON.stringify({
+  validatedFraction: files.length ? validated / files.length : 0,
+  schemaFailures,
+  legacyReadGreen: null,   // unwired: no adapter reads the legacy path yet — never fabricate it
+  events: files.map((n) => `validated ${n}`),
+}, null, 2) + '\n');
+```
+
+The Oven that binds to that document reads each pointer by name:
+
+```xml
+<oven id="migration-status" version="1" contract="checklist-progress@1" theme="checklist">
+  <section-header title="Migration status"/>
+  <kpi-strip>
+    <kpi-item heading="Rows validated" source="/validatedFraction" format="percent"/>
+    <kpi-item heading="Schema failures" source="/schemaFailures" format="number"/>
+    <kpi-item heading="Legacy read" source="/legacyReadGreen" fallback="not wired"/>
+  </kpi-strip>
+  <log-table source="/events"><column label="Event" source="@item"/></log-table>
+</oven>
+```
+
+Run the adapter, then wire and view the Oven:
+
+```sh
+node migration-adapter.mjs                                              # writes .local/burnlist/migration-status-data.json
+burnlist oven create migration-status --instructions instr.md --oven migration-status.oven
+burnlist oven bind migration-status .local/burnlist/migration-status-data.json
+burnlist --scan-root .                                                  # dashboard renders the bound numbers
+```
+
+### An unwired number is worse than no number
+
+Notice `legacyReadGreen: null`. The adapter does **not** yet read the legacy path, so it reports `null`—never a plausible-looking `true`. State the principle plainly:
+
+> An Oven is only as honest as its adapter. An unwired number is worse than no number: a real gap that reads as a fabricated pass makes the agent trust a lie.
+
+When a signal is not yet wired to reality, report `null` (or `"wired": false`)—never a fabricated number—and make wiring that signal the **next Burnlist item**. The Oven's `fallback="not wired"` renders the gap honestly instead of hiding it.
+
+### Who runs the adapter, and when
+
+The **project owns and runs the adapter—Burnlist never does.** Nothing in Burnlist executes it: `burnlist oven bind` only records where the JSON lives, and the dashboard only reads it. Re-run the adapter after each batch of work, on a schedule, or in CI, so the Oven reflects current reality. A stale adapter is a stale Oven.
+
+## Point a Burnlist item at an Oven number
+
+An Oven signal is only evidence if a Burnlist item's done/delete condition cites it instead of a self-report:
+
+```markdown
+- [ ] B4 | Cut over reads to the migrated schema
+  Files/search: `src/db/`, `migrated-rows/`
+  Action: point the read path at the migrated schema and validate every row.
+  Done/delete when: Oven `migration-status` shows `validatedFraction = 100%` and `schemaFailures = 0`.
+  Validate: re-run the adapter, then read the Oven in the dashboard.
+```
+
+This link is **advisory evidence a human or agent reads—Burnlist does not execute the Oven or auto-verify the number.** `burnlist burn` and `burnlist --check` validate the Burnlist protocol and record the burn; they never open the Oven or read its bound JSON. The honesty is structural: the item's proof points at an objective, adapter-computed signal, so closing the item means opening the Oven (or its JSON) and confirming the number—not asserting "done." See [Proof Authority in Burnlist Creation](burnlist-creation.md) and [Oven Authoring](oven-authoring.md).
+
+For the `.oven` grammar and a full worked example, see [Creating Ovens](creating-ovens.md). For creating and binding an Oven from the CLI—`burnlist oven create`, `burnlist oven bind`, and `burnlist oven view`—see [Oven Authoring](oven-authoring.md).
+
+If a number can be typed by hand without doing the work, it is not evidence—measure the thing the work would have to produce.
diff --git a/skills/burnlist/references/differential-testing-data.md b/skills/burnlist/references/differential-testing-data.md
index 8139345..b7add2e 100644
--- a/skills/burnlist/references/differential-testing-data.md
+++ b/skills/burnlist/references/differential-testing-data.md
@@ -8,7 +8,7 @@ burnlist differential-testing validate-bundle /absolute/path/to/bundle/current.j
 burnlist --oven-data differential-testing=/absolute/path/to/current.json
 ```
 
-The structural schema is `ovens/differential-testing/schema/differential-testing-data.schema.json`. The packaged validator is authoritative because it also recomputes relationships that JSON Schema cannot express.
+The structural schema is `ovens/differential-testing/engine/data.schema.json`. The packaged validator is authoritative because it also recomputes relationships that JSON Schema cannot express.
 
 ## Primary Sample Tuple
 
diff --git a/skills/burnlist/references/getting-started.md b/skills/burnlist/references/getting-started.md
new file mode 100644
index 0000000..c8406bb
--- /dev/null
+++ b/skills/burnlist/references/getting-started.md
@@ -0,0 +1,65 @@
+# Start Here: Burnlist in Five Minutes
+
+## What Burnlist is
+
+Burnlist is a repo-local, evidence-driven task tracker for AI agents. It has zero runtime dependencies—only Node built-ins on Node >= 18—and provides a `burnlist` CLI plus a read-only observer dashboard. Burnlist owns task state, not implementation: the agent does the work and reports progress back into the Burnlist. Work lives in a shrinking Markdown checklist at `notes/burnlists/<state>/<id>/burnlist.md` and burns down to zero.
+
+## The three concepts
+
+### Burnlist
+
+A Burnlist is your list of work. Each item completes atomically on evidence: burn it once, only when it is really done, then delete it from the active list. The list burns down to zero. It answers: “What do I do next, and is it really done?”
+
+**When to reach for it:** Use a Burnlist when a goal needs explicit steps, proof of completion, and durable task state across agent sessions.
+
+### Oven
+
+An Oven is a read-only dashboard view that renders honest signals over your own data—progress, metrics, and diffs—so you see truth instead of vibes. It answers: “How are we actually doing?”
+
+**When to reach for it:** Use an Oven when success depends on measurable evidence that a checklist alone cannot show. See [Designing Your Oven](designing-ovens.md) for how to choose that evidence.
+
+### Lane
+
+A lane splits one large Burnlist into parallel sub-lists. Independent work streams can then burn down side by side.
+
+**When to reach for it:** Use lanes when one plan has genuinely independent tracks that can proceed in parallel. See [Burnlist Splitting and Lanes](burnlist-splitting-lanes.md) for the mechanics.
+
+## Set up in three steps
+
+1. Install the CLI:
+
+   ```sh
+   npm i -g burnlist
+   ```
+
+   The npm postinstall automatically registers the Burnlist skill for both agents: Claude Code under `~/.claude/skills` and Codex under `~/.agents/skills`. The skill is available immediately. Alternatively, point any agent at the hosted skill at <https://burnlist.dev/skill.md>. It is a complete, self-contained document and needs no installation.
+
+2. Initialize the repository:
+
+   ```sh
+   burnlist init
+   ```
+
+   This scaffolds `notes/burnlists/{draft,ready,inprogress,completed}/`, keeps that state locally ignored by Git, and registers the repository so the dashboard can observe it.
+
+3. Create your first Burnlist:
+
+   ```sh
+   burnlist new
+   ```
+
+   The command prints a new draft id, such as `<YYMMDD-NNN>`, under `notes/burnlists/draft/`. Move it through the lifecycle with:
+
+   ```sh
+   burnlist ready <YYMMDD-NNN>
+   burnlist start <YYMMDD-NNN>
+   burnlist burn <YYMMDD-NNN> <item>
+   burnlist close <YYMMDD-NNN>
+   ```
+
+   In practice, ask the agent—which now has the skill—to create and harden a Burnlist for a goal. The CLI provides the dashboard and protocol helpers.
+
+## Next
+
+- [Designing Your Oven](designing-ovens.md): choose objective evidence for an honest Oven.
+- [Burnlist Creation](burnlist-creation.md): author a rigorous Burnlist.
diff --git a/skills/burnlist/references/oven-authoring.md b/skills/burnlist/references/oven-authoring.md
index c359192..2208a3e 100644
--- a/skills/burnlist/references/oven-authoring.md
+++ b/skills/burnlist/references/oven-authoring.md
@@ -3,109 +3,197 @@
 Practical companion to `references/oven-contract.md`. The contract is normative
 for the package shape and validation; this reference documents the controlled
 vocabulary and the `burnlist oven` CLI so an Oven can be authored without
-hand-writing JSON. Read it when creating, updating, or inspecting an Oven.
+hand-writing JSON. Read it when creating, updating, binding, or inspecting an
+Oven.
+
+## Closed contract and theme allowlist
+
+**A custom Oven cannot define a new contract, theme, or icon.** It must reuse a
+built-in contract and theme pair. For a generic KPI-and-table Oven that reads
+arbitrary project JSON, use `contract="checklist-progress@1"` and
+`theme="checklist"`. The choice governs the chrome and normalized-data contract
+the built-in renderer validates.
+
+The complete closed registries are:
+
+| Registry | Exact allowed values |
+| --- | --- |
+| contracts | `checklist-progress@1`, `burnlist-differential-testing-data@1`, `burnlist-streaming-diff-data@2`, `burnlist-visual-parity-data@1` |
+| themes | `checklist`, `differential-testing`, `streaming-diff`, `visual-parity` |
+| icons | `ClipboardList`, `Clock3`, `Gauge`, `TimerReset` |
+
+Creation rejects unknown entries before writing, for example:
+
+```text
+burnlist oven: Oven <id> .oven source is invalid: Unknown theme <x>
+burnlist oven: Oven <id> .oven source is invalid: Unknown contract <x>
+```
+
+The differential-testing, streaming-diff, and visual-parity widgets and the
+eight Differential-Testing-only formats are for their matching contracts. A
+generic Oven should use `kpi-strip`/`kpi-item`, `section-header`,
+`log-table`/`column`, and the plain formats described in
+`references/creating-ovens.md`.
 
 An Oven never executes anything. Authoring writes only custom Ovens under
 ignored `.local/burnlist/ovens/` state, and changes affect only future Runs.
 
+## Start with `burnlist init`
+
+Run `burnlist init` once from the repository before `oven create`. In a Git
+repository, create refuses to write until `.local/` is ignored:
+
+```text
+burnlist oven: refusing to write .local/burnlist/ovens: not git-ignored; run `burnlist init` or add it to .gitignore
+```
+
+`burnlist init` fixes that local prerequisite and registers the repository as a
+dashboard scan root:
+
+```text
+Initialized 4 lifecycle folders in <repo>.
+Ignored /notes/burnlists/ and /.local/ locally.
+Registered <repo>.
+```
+
+It adds `/.local/` and `/notes/burnlists/` to `.git/info/exclude`. In a non-Git
+directory that ignore step is skipped; creation works because the gate applies
+only inside a Git repository that does not ignore the path.
+
 ## CLI
 
 ```sh
 burnlist oven list [--json]
-burnlist oven view   <id> [--json] [--cell-width <n>] [--cell-height <n>]
-burnlist oven create <id> --dir <dir>            # dir holds instructions.md + detail.json
-burnlist oven create <id> --package <file|->     # JSON: {name?, instructions, detail}
-burnlist oven create <id> --instructions <f|-> --detail <f|-> [--name <text>]
+burnlist oven view <id> [--json]
+burnlist oven bind <id> <path> [--repo <path>]
+burnlist oven unbind <id> [--repo <path>]
+burnlist oven bindings [--repo <path>]
+burnlist oven create <id> --instructions <file|-> [--oven <file|->] [--name <text>]
+burnlist oven create <id> --dir <dir>
+burnlist oven create <id> --package <file|->
 burnlist oven update <id> [same inputs as create]
+burnlist oven fork <id> <newId>
 ```
 
-- `view` prints the detail skeleton as a box-drawing grid plus a section table
-  (widget, format, source, cell, span). Use it to see the layout before and
-  after authoring.
-- Any file input accepts `-` to read stdin.
-- `--name` owns the level-one heading; without it the instructions must already
-  contain one.
-- `create` refuses an existing id (use `update`, or `--force` to replace).
-- `update` targets an existing custom Oven only. Built-in Ovens are read-only;
-  fork one with `create <new-id> --dir <built-in path>`.
-- Validation is identical to the dashboard: it reuses `oven-contract.mjs`. A
-  bad grid (overlap, out-of-bounds span, unknown widget/format, missing H1) is
-  rejected before anything is written.
-
-## Grid Rules
-
-From the contract, enforced at creation time:
-
-- `columns` 2–24, `rows` 2–32, `rowHeight` 32–120, `version` 1.
-- 1–32 sections. Each section id is a lowercase slug, unique within the Oven.
-- `column`/`row` are 1-based; `column + columnSpan - 1 <= columns` and likewise
-  for rows. Sections may not overlap.
-- `source` is empty (unbound) or a JSON-pointer-like string starting with `/`.
-
-## Widget Vocabulary
-
-Fourteen controlled widgets. The recommended source-value shape is a
-convention between the Oven author and the adapter that serves the data; it is
-**not** validated at creation time, and the renderer is the final authority.
-
-| widget | intent | recommended value at `source` |
-| --- | --- | --- |
-| `metric` | one headline number or short value | scalar (`number` or short `string`) |
-| `progress` | completion toward a whole | number in `0..1` (or `0..100` with `percent`) |
-| `comparison` | paired reference-vs-candidate series (Differential Testing) | array of field records, each with `samples: [[tick, ref, cand, state]]` |
-| `status` | one short state label | short `string` / enum |
-| `timestamp` | a single moment | ISO-8601 `string` |
-| `line-chart` | trend over an ordered axis | array of `{ x, y }` points (or named series) |
-| `bar-chart` | compare discrete categories | array of `{ label, value }` |
-| `pie-chart` | parts of a whole | array of `{ label, value }` |
-| `chart` | generic series; renderer picks | array of points/series |
-| `table` | rows and columns | `{ columns: string[], rows: any[][] }` or array of objects |
-| `list` | ordered/unordered items | array of `string` or `{ label, ... }` |
-| `timeline` | events in time order | array of `{ timestamp, label }` |
-| `log` | append-only lines | array of `string` or `{ timestamp, message }` |
-| `markdown` | prose / rich text | `string` of Markdown |
-
-## Format Vocabulary
-
-Five controlled formats applied to a widget's value: `plain`, `number`,
-`percent`, `duration`, `timestamp`. `plain` is the default.
-
-## Binding Contract
-
-A bound section's `source` is a JSON-pointer into a single read-only data
-document that a project-specific adapter produces at view time. The adapter is
-not part of the Oven, and the contract deliberately leaves the value shape
-uncanonicalized. So the author and the adapter must agree on the document
-shape out of band. Record the expected document in the Oven's `instructions.md`
-(e.g. a `## State Contract` section) so the agreement is discoverable.
-
-An unbound section (empty `source`) is a layout placeholder that renders no
-data.
-
-For a **rich built-in Oven** the shape is *not* left open: the renderer defines a
-**versioned normalized-data contract** validated in code — e.g. Differential
-Testing uses `burnlist-differential-testing-data@1`
-(`differential-testing-data-contract.mjs`), bound via `--oven-data`. Producing a
-conforming payload has a packaged **adapter SDK**
-(`burnlist differential-testing sdk` → `differential-testing-adapter-sdk.mjs`)
-that owns the mechanical refresh/lock/atomic-publish plumbing while the project
-keeps evidence authority. See `references/differential-testing-adapter-sdk.md`.
+- `list` lists custom and built-in Ovens; `--json` emits JSON.
+- `view` prints compiled structure only; it never prints bound data values.
+- `bind` records an Oven-to-data-file binding.
+- `unbind` removes an Oven-to-data-file binding.
+- `bindings` lists all recorded bindings.
+- `create` adds a custom Oven; `update` changes an existing custom Oven only.
+- `fork` copies a built-in or custom Oven into a new custom id and records its
+  `forkedFrom` provenance. Built-in Ovens are read-only and cannot be updated.
+
+For `create`, `--dir` reads `instructions.md` and `<id>.oven`; `--package`
+reads JSON `{name?, instructions, oven}`. Any file input accepts `-` for stdin.
+`--name` owns the level-one heading; without it, instructions must already
+contain one. Creation scaffolds a starter `.oven` when omitted, rejects an
+existing id unless `--force` is given, and validates before writing. `--repo`
+selects the repository whose binding storage is used.
+
+## Binding & viewing
+
+`burnlist oven bind <id> <path>` stores the path exactly as supplied. The record
+lives at `.local/burnlist/bindings.json` with this schema:
+
+```json
+{
+  "schemaVersion": 1,
+  "bindings": {
+    "<id>": {
+      "path": "<path>",
+      "boundAt": "<iso>"
+    }
+  }
+}
+```
+
+A relative path resolves from the repository root when read. Successful binding
+prints `Bound Oven <id> to <path>` and `Store: <repo>/.local/burnlist/bindings.json`.
+`bindings` prints `<id>  <path>  <boundAt>` per line. `unbind` reports either
+`Unbound…` or `No binding exists…`.
+
+The bound file is arbitrary JSON. Its shape must match the Oven's `source=` and
+`<bind source=>` RFC 6901 pointers. Generic checklist-theme Ovens do not
+validate that payload at creation: pointers resolve when viewed, and missing
+pointers render as empty or fallback values.
+
+`burnlist oven view <id>` prints the compiled node tree plus a `node / prop /
+source` pointer table. It is for inspecting structure, never rendered data.
+To render with data, start the dashboard:
+
+```sh
+burnlist --scan-root <repo>
+```
+
+The server is loopback-only and normally opens at `http://127.0.0.1:4510/`; add
+`--auto-port` to select a free port. A bound custom Oven appears in the index as
+a **Custom Oven** with status **Oven**. Clicking it opens
+`/ovens/<id>/view?repoKey=<key>` and renders it through the shared engine using
+the bound JSON. An unbound custom Oven is authored but does not appear there.
+
+For a one-dashboard-session alternative that does not write `bindings.json`,
+launch with:
+
+```sh
+burnlist --scan-root <repo> --oven-data <id>=<path>
+```
+
+This read-only payload binding also makes the custom Oven appear and render.
+
+## End-to-end generic Oven
+
+This complete sequence creates and views the `deploy-status` example in
+`references/creating-ovens.md`:
+
+```sh
+cd <repo>                                   # a git repo
+burnlist init                               # ignore .local/, register root
+# author kpi.oven (generic checklist-theme Oven) and instr.md, then:
+burnlist oven create deploy-status --instructions instr.md --oven kpi.oven
+burnlist oven bind deploy-status deploy-data.json
+burnlist oven bindings                       # confirm the binding
+burnlist oven view deploy-status             # structure only
+burnlist --scan-root <repo>                  # dashboard; open the "Custom Oven" row
+```
+
+## DSL structure and binding contract
+
+The DSL reference in `references/creating-ovens.md` defines allowed elements,
+attributes, and bindings. A `.oven` source or binding is a JSON-pointer into one
+read-only data document an adapter produces at view time. The adapter is not
+part of the Oven, so author and adapter must agree on the document shape. Record
+that expected shape in `instructions.md`, for example in a `## State Contract`
+section. For choosing what an Oven should measure and a runnable adapter that
+computes it, see [Designing Ovens](designing-ovens.md); to cite an Oven number
+as a Burnlist item's proof, see the Proof Authority guidance in
+[Burnlist Creation](burnlist-creation.md).
+
+Rich built-in Ovens instead use a renderer-defined, versioned normalized-data
+contract. Differential Testing uses `burnlist-differential-testing-data@1` and
+has a packaged adapter SDK for refresh, locking, and atomic publishing; projects
+retain evidence authority. See `references/differential-testing-adapter-sdk.md`.
 
 ## Worked Example: `loop-status`
 
 An Oven that observes the role-separated execution loop for one Burnlist item.
-Its sections bind to a `/loop/*` document the orchestrator adapter serves:
-
-| section | widget | source |
-| --- | --- | --- |
-| `profile` | `status` | `/loop/profile` |
-| `role` | `status` | `/loop/role` |
-| `backend` | `metric` | `/loop/backend` |
-| `lanes` | `list` | `/loop/lanes` |
-| `defects` | `log` | `/loop/defects` |
-| `rounds` | `metric` (`number`) | `/loop/rounds` |
+Its `.oven` source reads the `/loop/*` document the orchestrator adapter serves:
+
+```xml
+<oven id="loop-status" version="1" contract="checklist-progress@1" theme="checklist">
+  <section-header title="Loop status"/>
+  <kpi-strip>
+    <kpi-item heading="Profile" source="/loop/profile"/>
+    <kpi-item heading="Role" source="/loop/role"/>
+    <kpi-item heading="Backend" source="/loop/backend"/>
+    <kpi-item heading="Rounds" source="/loop/rounds" format="number"/>
+  </kpi-strip>
+  <log-table source="/loop/lanes"><column label="Lane" source="@item"/></log-table>
+  <log-table source="/loop/defects"><column label="Defect" source="@item"/></log-table>
+</oven>
+```
 
-The adapter contract — the document those pointers read:
+The adapter document those pointers read:
 
 ```json
 {
@@ -114,23 +202,13 @@ The adapter contract — the document those pointers read:
     "role": "Luna",
     "backend": "claude",
     "rounds": 2,
-    "lanes": [
-      "contract/compatibility — pass",
-      "resilience/security — pass",
-      "performance/resources — running",
-      "visual/interaction — pass",
-      "integration/regression — fail"
-    ],
-    "defects": [
-      "2026-07-10T01:12:03+02:00 integration/regression: session rotation drops CSRF token"
-    ]
+    "lanes": ["contract/compatibility — pass", "resilience/security — pass", "performance/resources — running", "visual/interaction — pass", "integration/regression — fail"],
+    "defects": ["2026-07-10T01:12:03+02:00 integration/regression: session rotation drops CSRF token"]
   }
 }
 ```
 
-The Oven only reads this. Loop policy — required Terra lanes must all pass
-before an item is accepted, separate direction-Sol and final-Sol contexts,
-escalation on a repeated defect — lives in the orchestrator, not the Oven.
+The Oven only reads this. Loop policy lives in the orchestrator, not the Oven.
 
 ## Boundaries
 
diff --git a/skills/burnlist/references/oven-contract.md b/skills/burnlist/references/oven-contract.md
index 8fc152c..0193fa8 100644
--- a/skills/burnlist/references/oven-contract.md
+++ b/skills/burnlist/references/oven-contract.md
@@ -2,7 +2,7 @@
 
 This is the normative definition of an Oven.
 
-An Oven is a named, declarative recipe for a Burn. It consists of bounded Markdown instructions in `instructions.md` and a non-executable detail-page skeleton in `detail.json`. The instructions define the outcome, canonical state, required run inputs, and evidence rules. The detail skeleton defines how normalized data may be presented with controlled widgets.
+An Oven is a named, declarative recipe for a Burn. It consists of bounded Markdown instructions in `instructions.md` and a declarative, non-executable `<id>.oven` DSL source. The instructions define the outcome, canonical state, required run inputs, and evidence rules. The source defines how normalized data may be presented.
 
 An Oven does not:
 
@@ -13,7 +13,7 @@ An Oven does not:
 - import arbitrary UI components
 - start Codex
 
-A project-specific adapter may produce normalized data for the detail skeleton, but that adapter is not part of the Oven. An unbound detail section has an empty `source`; a bound section uses a JSON-pointer-like source beginning with `/`. Source-value shape is outside creation-time validation; the consuming adapter or renderer owns that check when data is available.
+A project-specific adapter may produce normalized data, but that adapter is not part of the Oven. A `.oven` binding uses a JSON-pointer-like source beginning with `/`. Source-value shape is outside creation-time validation; the consuming adapter or renderer owns that check when data is available.
 
 ## Package
 
@@ -22,18 +22,20 @@ An Oven directory is identified by a lowercase slug and contains these two canon
 ```text
 <oven-id>/
   instructions.md
-  detail.json
+  <id>.oven
 ```
 
 `instructions.md` must be non-empty and contain a level-one heading. The heading is the Oven name. The remaining Markdown stays flexible; section headings are guidance, not a machine-enforced language.
 
-`detail.json` is a bounded, versioned data document. Its grid dimensions, section count, section ids, controlled widget and format names, optional sources, bounds, and overlap rules are validated. It cannot define or execute HTML, JavaScript, CSS, shell commands, or component imports.
+`<id>.oven` is a declarative, versioned, non-executable DSL source validated by the Oven grammar through `compileOven`. It cannot define or execute HTML, JavaScript, CSS, shell commands, or component imports. Its IR is build-generated and never committed.
 
-Default Ovens ship with the skill. Custom Ovens are created once under ignored `.local/burnlist/ovens/` state. The dashboard has no update endpoint, but the `burnlist oven` CLI can create, update, view, and list custom Ovens under the same validation; built-in Ovens stay read-only there. Manual changes affect only future Runs. A built-in renderer may define and validate a versioned normalized-data contract; Differential Testing uses `burnlist-differential-testing-data@1`. For the controlled widget/format vocabulary and source-binding conventions, see `oven-authoring.md`.
+An Oven's identity revision is `o1-sha256` over canonical JSON `{format:"burnlist-oven-content@2", id, instructions, oven}`. `detail.json` is retired from the data model and survives only in a read-only legacy path for old detail-based run snapshots.
+
+Default Ovens ship with the skill. Custom Ovens are created under ignored `.local/burnlist/ovens/` state. The dashboard has no update endpoint, but the `burnlist oven` CLI can create, update, fork, list, view, bind, unbind, and show bindings under the same validation; built-in Ovens stay read-only there. Manual changes affect only future Runs. A built-in renderer may define and validate a versioned normalized-data contract; Differential Testing uses `burnlist-differential-testing-data@1`. For the controlled DSL vocabulary and source-binding conventions, see `creating-ovens.md`.
 
 ## Run Boundary
 
-`Run Burn` records a repository, title, and objective, then copies the selected `instructions.md` and `detail.json` into a new ignored `.local/burnlist/runs/` directory. That snapshot is immutable run provenance; the app does not execute it or start Codex.
+`Run Burn` records a repository, title, and objective, then copies the selected `instructions.md` and `<id>.oven` into a new ignored `.local/burnlist/runs/` directory. That snapshot is immutable run provenance; the app does not execute it or start Codex.
 
 Oven-specific inputs belong in the objective unless the generic Run contract is deliberately expanded for every Oven. For Differential Testing, the objective names the reference and candidate artifacts, project adapter or report, active scenario and alignment contract, exact comparator when used, and comparable rerun procedure.
 
diff --git a/src/cli/oven-cli-render.mjs b/src/cli/oven-cli-render.mjs
index 75524ef..7734198 100644
--- a/src/cli/oven-cli-render.mjs
+++ b/src/cli/oven-cli-render.mjs
@@ -1,95 +1,43 @@
-// Box-drawing render helpers for the `burnlist oven` CLI.
-// Draws an Oven's detail skeleton as a character canvas so an agent can see the
-// layout it is describing. Section borders are accumulated as a per-cell direction
-// bitmask, so shared edges between adjacent sections render as clean
-// ├ ┤ ┬ ┴ ┼ junctions rather than doubled lines.
-const DIR = { UP: 1, DOWN: 2, LEFT: 4, RIGHT: 8 };
-const BOX_CHAR = {
-  0: " ",
-  1: "│",
-  2: "│",
-  3: "│",
-  4: "─",
-  5: "┘",
-  6: "┐",
-  7: "┤",
-  8: "─",
-  9: "└",
-  10: "┌",
-  11: "├",
-  12: "─",
-  13: "┴",
-  14: "┬",
-  15: "┼",
-};
+// Compact IR render helpers for the `burnlist oven` CLI.
 
-function truncate(text, width) {
-  if (width <= 0) return "";
-  return text.length <= width ? text : `${text.slice(0, Math.max(0, width - 1))}…`;
+function table(header, rows) {
+  const widths = header.map((label, index) => Math.max(label.length, ...rows.map((row) => row[index].length)));
+  const line = (columns) => columns.map((value, index) => value.padEnd(widths[index])).join("  ").trimEnd();
+  return [line(header), line(widths.map((width) => "─".repeat(width))), ...rows.map(line)].join("\n");
 }
 
-export function renderGrid(detail, cellWidth, cellHeight) {
-  const { columns, rows, cells } = detail;
-  const width = columns * cellWidth + 1;
-  const height = rows * cellHeight + 1;
-  const mask = new Map();
-  const text = Array.from({ length: height }, () => Array(width).fill(" "));
-  const addBit = (x, y, bit) => {
-    const key = y * width + x;
-    mask.set(key, (mask.get(key) ?? 0) | bit);
-  };
-  const horizontal = (x0, x1, y) => {
-    for (let x = x0; x <= x1; x += 1) addBit(x, y, (x > x0 ? DIR.LEFT : 0) | (x < x1 ? DIR.RIGHT : 0));
-  };
-  const vertical = (y0, y1, x) => {
-    for (let y = y0; y <= y1; y += 1) addBit(x, y, (y > y0 ? DIR.UP : 0) | (y < y1 ? DIR.DOWN : 0));
-  };
-  const writeText = (x, y, value) => {
-    for (let index = 0; index < value.length && x + index < width; index += 1) text[y][x + index] = value[index];
-  };
+function nodeName(node) {
+  const attributes = ["id", "source", "prop", "value", "modeFrom", "collectionFrom", "selectionFrom"]
+    .filter((key) => node.attributes[key] !== undefined)
+    .map((key) => `${key}=${node.attributes[key]}`);
+  return attributes.length ? `${node.kind} (${attributes.join(", ")})` : node.kind;
+}
 
-  for (const cell of cells) {
-    const x0 = (cell.column - 1) * cellWidth;
-    const y0 = (cell.row - 1) * cellHeight;
-    const x1 = (cell.column - 1 + cell.columnSpan) * cellWidth;
-    const y1 = (cell.row - 1 + cell.rowSpan) * cellHeight;
-    horizontal(x0, x1, y0);
-    horizontal(x0, x1, y1);
-    vertical(y0, y1, x0);
-    vertical(y0, y1, x1);
-    const innerWidth = x1 - x0 - 3;
-    const badge = cell.format && cell.format !== "plain" ? `${cell.widget}·${cell.format}` : cell.widget;
-    const label = [cell.id, badge, cell.source || "·unbound"];
-    for (let line = 0; line < label.length; line += 1) {
-      const y = y0 + 1 + line;
-      if (y >= y1) break;
-      writeText(x0 + 2, y, truncate(label[line], innerWidth));
-    }
+function walk(nodes, visit) {
+  for (const node of nodes) {
+    visit(node);
+    walk(node.children, visit);
   }
+}
 
+export function renderOvenTree(ir) {
   const lines = [];
-  for (let y = 0; y < height; y += 1) {
-    let row = "";
-    for (let x = 0; x < width; x += 1) {
-      const bits = mask.get(y * width + x);
-      row += bits ? BOX_CHAR[bits] : text[y][x];
-    }
-    lines.push(row.replace(/\s+$/u, ""));
-  }
-  return lines.join("\n");
+  const render = (node, depth) => {
+    lines.push(`${"  ".repeat(depth)}${nodeName(node)}`);
+    for (const child of node.children) render(child, depth + 1);
+  };
+  for (const node of ir.root) render(node, 0);
+  return lines.join("\n") || "(empty oven)";
 }
 
-export function sectionTable(detail) {
-  const header = ["section", "widget", "format", "source", "cell", "span"];
-  const rows = detail.cells.map((cell) => [
-    cell.id,
-    cell.widget,
-    cell.format,
-    cell.source || "(unbound)",
-    `r${cell.row}c${cell.column}`,
-    `${cell.rowSpan}×${cell.columnSpan}`,
-  ]);
-  const widths = header.map((label, index) => Math.max(label.length, ...rows.map((row) => row[index].length)));
-  const line = (cols) => cols.map((value, index) => value.padEnd(widths[index])).join("  ").trimEnd();
-  return [line(header), line(widths.map((width) => "─".repeat(width))), ...rows.map(line)].join("\n");
+export function sourceTable(ir) {
+  const rows = [];
+  walk(ir.root, (node) => {
+    const name = node.attributes.id ? `${node.kind}#${node.attributes.id}` : node.kind;
+    for (const [prop, source] of Object.entries(node.attributes)) {
+      if (node.kind !== "bind" && (prop === "source" || prop.endsWith("Source"))) rows.push([name, prop, String(source)]);
+    }
+    for (const [prop, binding] of Object.entries(node.bindings)) rows.push([name, prop, binding.source]);
+  });
+  return table(["node", "prop", "source"], rows);
 }
diff --git a/src/cli/oven-cli-stdout.test.mjs b/src/cli/oven-cli-stdout.test.mjs
index f3ecf28..0aea282 100644
--- a/src/cli/oven-cli-stdout.test.mjs
+++ b/src/cli/oven-cli-stdout.test.mjs
@@ -8,25 +8,12 @@ import test from "node:test";
 const repoRoot = resolve(new URL("../..", import.meta.url).pathname);
 const binPath = join(repoRoot, "bin", "burnlist.mjs");
 
-function largeDetail() {
-  return {
-    version: 1,
-    columns: 2,
-    rows: 5,
-    rowHeight: 48,
-    cells: Array.from({ length: 10 }, (_, index) => ({
-      id: `cell-${index + 1}`,
-      title: `Cell ${index + 1}`,
-      description: "x".repeat(2_000),
-      widget: "metric",
-      source: `/cell-${index + 1}`,
-      format: "plain",
-      column: (index % 2) + 1,
-      row: Math.floor(index / 2) + 1,
-      columnSpan: 1,
-      rowSpan: 1,
-    })),
-  };
+function largeOvenSource() {
+  return `<oven id="large-oven" version="1" contract="checklist-progress@1" theme="checklist">
+  <!--${"x".repeat(17_000)}-->
+  <section-header title="Large Oven"/>
+</oven>
+`;
 }
 
 test("oven list --json drains complete large stdout captured through a pipe", () => {
@@ -36,7 +23,9 @@ test("oven list --json drains complete large stdout captured through a pipe", ()
   try {
     mkdirSync(join(ovensDir, "large-oven"), { recursive: true });
     writeFileSync(join(ovensDir, "large-oven", "instructions.md"), "# Large Oven\n\nPipe flush regression fixture.\n");
-    writeFileSync(join(ovensDir, "large-oven", "detail.json"), JSON.stringify(largeDetail()));
+    const source = largeOvenSource();
+    assert.ok(Buffer.byteLength(source) > 16 * 1024, "fixture source must exceed the pipe buffer");
+    writeFileSync(join(ovensDir, "large-oven", "large-oven.oven"), source);
 
     const stdout = execFileSync(process.execPath, [binPath, "oven", "list", "--json", "--ovens-dir", ovensDir], {
       cwd: repo,
@@ -45,8 +34,8 @@ test("oven list --json drains complete large stdout captured through a pipe", ()
     assert.ok(Buffer.byteLength(stdout) > 16 * 1024, "fixture output must exceed the pipe buffer");
     const ovens = JSON.parse(stdout);
     const largeOven = ovens.find((oven) => oven.id === "large-oven");
-    assert.equal(largeOven.detail.cells.length, 10);
-    assert.equal(largeOven.detail.cells[9].description.length, 2_000);
+    assert.equal(largeOven.oven, source);
+    assert.equal(Object.hasOwn(largeOven, "detail"), false);
   } finally {
     rmSync(root, { recursive: true, force: true });
   }
diff --git a/src/cli/oven-cli.mjs b/src/cli/oven-cli.mjs
index 31a55a7..906cdd5 100644
--- a/src/cli/oven-cli.mjs
+++ b/src/cli/oven-cli.mjs
@@ -10,9 +10,10 @@
 import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 import { normalizeOvenPackage, ovenId, ovenRevision } from "../ovens/oven-contract.mjs";
+import { scanXml } from "../ovens/dsl/xml-scan.mjs";
 import { bindingStorePath, readBindingStore, removeBinding, writeBinding } from "../server/oven-bindings.mjs";
 import { resolveCustomOvensDir } from "../server/oven-storage.mjs";
-import { renderGrid, sectionTable } from "./oven-cli-render.mjs";
+import { renderOvenTree, sourceTable } from "./oven-cli-render.mjs";
 import { createOvenCatalog, persistOven, resolvePackageInput } from "./oven-storage.mjs";
 import { resolveUmbrella } from "./umbrella.mjs";
 
@@ -75,20 +76,24 @@ const { readOvenDir, discoverOvens, findOven } = createOvenCatalog({
 });
 
 function printOven(oven) {
-  const cellWidth = Number(flags.get("cell-width") ?? 8);
-  const cellHeight = Number(flags.get("cell-height") ?? 2);
-  if (!Number.isInteger(cellWidth) || cellWidth < 4 || cellWidth > 24) fail("--cell-width must be an integer from 4 to 24.");
-  if (!Number.isInteger(cellHeight) || cellHeight < 2 || cellHeight > 6) fail("--cell-height must be an integer from 2 to 6.");
+  let nodeCount = 0;
+  const countNodes = (nodes) => {
+    for (const node of nodes) {
+      nodeCount += 1;
+      countNodes(node.children);
+    }
+  };
+  countNodes(oven.ir.root);
   const kind = oven.builtIn ? "built-in" : "custom";
   console.log(`${oven.name}  (${oven.id} · ${kind})`);
   if (oven.description) console.log(oven.description);
-  console.log(`grid: ${oven.detail.columns} cols × ${oven.detail.rows} rows · ${oven.detail.cells.length} sections`);
+  console.log(`nodes: ${nodeCount} · contract: ${oven.ir.contract} · theme: ${oven.ir.theme}`);
   console.log(`revision: ${oven.ovenRevision}`);
   console.log(`path: ${oven.path}`);
   console.log("");
-  console.log(renderGrid(oven.detail, cellWidth, cellHeight));
+  console.log(renderOvenTree(oven.ir));
   console.log("");
-  console.log(sectionTable(oven.detail));
+  console.log(sourceTable(oven.ir));
 }
 
 function assertCustomTarget(id, verb) {
@@ -99,26 +104,38 @@ function assertCustomTarget(id, verb) {
   if (verb === "update" && !existing) throw new Error(`Oven ${id} does not exist. Use \`oven create\` instead.`);
 }
 
+function rewriteRootOvenId(source, id) {
+  const parsed = scanXml(source);
+  const byteOffset = parsed.ast?.name === "oven" ? parsed.ast.attrSpans.id?.offset : undefined;
+  if (!parsed.ok || byteOffset === undefined) throw new Error("Oven source must have a valid root id to fork.");
+  const attrStart = Buffer.from(source).subarray(0, byteOffset).toString("utf8").length;
+  const attribute = /^id\s*=\s*(["'])/u.exec(source.slice(attrStart));
+  if (!attribute) throw new Error("Oven source must have a valid root id to fork.");
+  const valueStart = attrStart + attribute[0].length;
+  const valueEnd = source.indexOf(attribute[1], valueStart);
+  return `${source.slice(0, valueStart)}${id}${source.slice(valueEnd)}`;
+}
+
 // ── subcommands ───────────────────────────────────────────────────────────────
 const HELP = `burnlist oven — author and inspect Ovens
 
 Usage:
   burnlist oven list [--json]
-  burnlist oven view <id> [--json] [--cell-width <n>] [--cell-height <n>]
+  burnlist oven view <id> [--json]
   burnlist oven bind <id> <path> [--repo <path>]
   burnlist oven unbind <id> [--repo <path>]
   burnlist oven bindings [--repo <path>]
-  burnlist oven create <id> --instructions <file|-> --detail <file|-> [--name <text>]
-  burnlist oven create <id> --dir <dir>            (reads instructions.md + detail.json)
-  burnlist oven create <id> --package <file|->     (JSON: {name?, instructions, detail})
+  burnlist oven create <id> --instructions <file|-> [--oven <file|->] [--name <text>]
+  burnlist oven create <id> --dir <dir>            (reads instructions.md + <id>.oven)
+  burnlist oven create <id> --package <file|->     (JSON: {name?, instructions, oven})
   burnlist oven update <id> [same inputs as create]
   burnlist oven fork <id> <newId>
 
 Options:
   --name <text>        Set the Oven name (owns the level-one heading).
   --instructions <p>   Markdown instructions file, or - for stdin.
-  --detail <p>         detail.json file, or - for stdin.
-  --dir <p>            Directory containing instructions.md and detail.json.
+  --oven <p>           Oven DSL source file, or - for stdin.
+  --dir <p>            Directory containing instructions.md and <id>.oven.
   --package <p>        JSON package file, or - for stdin.
   --repo <p>           Repository whose local Oven bindings to use.
   --ovens-dir <p>      Custom Oven storage (default .local/burnlist/ovens).
@@ -127,6 +144,7 @@ Options:
   --json               Machine-readable output for list/view.
 
 Custom Ovens live under ignored local state and only affect future Runs.
+Create scaffolds a minimal .oven source when --oven, --dir, and --package omit one.
 Built-in Ovens are read-only; this command never executes Oven instructions.`;
 
 function main() {
@@ -139,22 +157,23 @@ try {
   if (subcommand === "list") {
     const ovens = discoverOvens();
     if (flags.has("json")) {
-      console.log(JSON.stringify(ovens.map(({ instructions, ...rest }) => rest), null, 2));
+      console.log(JSON.stringify(ovens.map(({ instructions, ir, ...rest }) => rest), null, 2));
       return;
     }
     if (ovens.length === 0) {
       console.log("No Ovens found.");
       return;
     }
+    const nodeCount = (nodes) => nodes.reduce((count, node) => count + 1 + nodeCount(node.children), 0);
     const rows = ovens.map((oven) => [
       oven.id,
       oven.name,
       oven.builtIn ? "built-in" : "custom",
-      `${oven.detail.columns}×${oven.detail.rows}`,
-      String(oven.detail.cells.length),
+      oven.ir.contract,
+      String(nodeCount(oven.ir.root)),
       oven.ovenRevision,
     ]);
-    const header = ["id", "name", "kind", "grid", "sections", "revision"];
+    const header = ["id", "name", "kind", "contract", "nodes", "revision"];
     const widths = header.map((label, index) => Math.max(label.length, ...rows.map((row) => row[index].length)));
     const line = (cols) => cols.map((value, index) => value.padEnd(widths[index])).join("  ").trimEnd();
     console.log(line(header));
@@ -174,7 +193,7 @@ try {
         name: oven.name,
         builtIn: oven.builtIn,
         instructions: oven.instructions,
-        detail: oven.detail,
+        oven: oven.oven,
         ovenRevision: oven.ovenRevision,
         ...(oven.forkedFrom ? { forkedFrom: oven.forkedFrom } : {}),
       }, null, 2));
@@ -215,7 +234,7 @@ try {
   }
 
   if (subcommand === "create" || subcommand === "update") {
-    const pkg = resolvePackageInput({ flags, positionals });
+    const pkg = resolvePackageInput({ flags, positionals, scaffold: subcommand === "create" });
     assertCustomTarget(pkg.id, subcommand);
     const allowReplace = subcommand === "update" || flags.has("force");
     const path = persistOven({ customRepoRoot, customOvensDir, unsafeOvensDir }, pkg, { allowReplace });
@@ -230,7 +249,8 @@ try {
     if (!sourceId || !newId) fail("Usage: burnlist oven fork <id> <newId>");
     const source = findOven(sourceId);
     if (!source) fail(`Unknown Oven "${sourceId}". Run \`burnlist oven list\`.`);
-    const pkg = normalizeOvenPackage({ id: ovenId(newId), instructions: source.instructions, detail: source.detail });
+    const id = ovenId(newId);
+    const pkg = normalizeOvenPackage({ id, instructions: source.instructions, oven: rewriteRootOvenId(source.oven, id) });
     const sourceRevision = ovenRevision(source);
     if (findOven(pkg.id)) throw new Error(`Oven ${pkg.id} already exists.`);
     const path = persistOven({ customRepoRoot, customOvensDir, unsafeOvensDir }, pkg, {
diff --git a/src/cli/oven-cli.test.mjs b/src/cli/oven-cli.test.mjs
index e19f5c9..98bfb95 100644
--- a/src/cli/oven-cli.test.mjs
+++ b/src/cli/oven-cli.test.mjs
@@ -5,6 +5,7 @@ import { tmpdir } from "node:os";
 import { dirname, join, resolve } from "node:path";
 import test from "node:test";
 import { ovenRevision } from "../ovens/oven-contract.mjs";
+import { starterOvenSource } from "../ovens/oven-starter.mjs";
 import { resolveOvenPackageDir } from "../server/fs-safe.mjs";
 import { assertCustomOvenPath } from "../server/oven-storage.mjs";
 const repoRoot = resolve(new URL("../..", import.meta.url).pathname);
@@ -23,32 +24,15 @@ function run(context, ...args) {
 function runFrom(cwd, ...args) {
   return execFileSync(process.execPath, [binPath, ...args], { cwd, encoding: "utf8" });
 }
-function detailFixture() {
-  return {
-    version: 1,
-    columns: 2,
-    rows: 2,
-    rowHeight: 48,
-    cells: [{
-      id: "summary",
-      title: "Summary",
-      description: "Current status.",
-      widget: "metric",
-      source: "/summary",
-      format: "plain",
-      column: 1,
-      row: 1,
-      columnSpan: 2,
-      rowSpan: 1,
-    }],
-  };
+function ovenFixture(id = "fixture-oven") {
+  return starterOvenSource(id, "Fixture Oven");
 }
 
 function writeOven(root, id, ovenJson) {
   const ovenRoot = join(root, id);
   mkdirSync(ovenRoot, { recursive: true });
   writeFileSync(join(ovenRoot, "instructions.md"), "# Forked Oven\n\nFollow the checklist.\n");
-  writeFileSync(join(ovenRoot, "detail.json"), `${JSON.stringify(detailFixture())}\n`);
+  writeFileSync(join(ovenRoot, `${id}.oven`), ovenFixture(id));
   if (ovenJson !== undefined) writeFileSync(join(ovenRoot, "oven.json"), ovenJson);
 }
 
@@ -140,25 +124,59 @@ test("oven list warns and omits a malformed package while view stays fail-closed
   } finally { context.cleanup(); }
 });
 
+test("oven view and list render IR structure and source packages", () => {
+  const context = fixture();
+  const ovensDir = join(context.repo, ".local", "burnlist", "ovens");
+  try {
+    writeOven(ovensDir, "rendered-oven");
+    const view = run(context, "oven", "view", "rendered-oven", "--ovens-dir", ovensDir);
+    assert.match(view, /nodes: 1 · contract: checklist-progress@1 · theme: checklist/u);
+    assert.match(view, /section-header\n\nnode  prop  source\n/u);
+    const list = run(context, "oven", "list", "--ovens-dir", ovensDir);
+    assert.match(list, /^id\s+name\s+kind\s+contract\s+nodes\s+revision$/mu);
+    assert.match(list, /^rendered-oven\s+Forked Oven\s+custom\s+checklist-progress@1\s+1\s+/mu);
+    const json = JSON.parse(run(context, "oven", "list", "--json", "--ovens-dir", ovensDir));
+    const oven = json.find((item) => item.id === "rendered-oven");
+    assert.equal(oven.oven, ovenFixture("rendered-oven"));
+    assert.equal(Object.hasOwn(oven, "ir"), false);
+  } finally { context.cleanup(); }
+});
+
+test("oven create scaffolds source while update requires an explicit source", () => {
+  const context = fixture();
+  const ovensDir = join(context.repo, ".local", "burnlist", "ovens");
+  const instructionsPath = join(context.repo, "instructions.md");
+  try {
+    writeFileSync(instructionsPath, "# Scaffolded Oven\n\nReady to edit.\n");
+    run(context, "oven", "create", "scaffolded-oven", "--instructions", instructionsPath, "--ovens-dir", ovensDir);
+    const saved = JSON.parse(run(context, "oven", "view", "scaffolded-oven", "--json", "--ovens-dir", ovensDir));
+    assert.equal(saved.oven, starterOvenSource("scaffolded-oven", "Scaffolded Oven"));
+    assert.throws(
+      () => run(context, "oven", "update", "scaffolded-oven", "--instructions", instructionsPath, "--ovens-dir", ovensDir),
+      (error) => String(error.stderr).includes("Provide Oven source"),
+    );
+  } finally { context.cleanup(); }
+});
+
 test("oven create and update swap the package while preserving sibling files", () => {
   const context = fixture();
   const ovensDir = join(context.repo, ".local", "burnlist", "ovens");
   try {
     const packagePath = join(context.repo, "replacement.json");
     writeFileSync(packagePath, JSON.stringify({
-      instructions: "# Initial Oven\n\nInitial checklist.", detail: detailFixture(),
+      instructions: "# Initial Oven\n\nInitial checklist.", oven: ovenFixture("sample-oven"),
     }));
     run(context, "oven", "create", "sample-oven", "--package", packagePath, "--ovens-dir", ovensDir);
     writeFileSync(join(resolveOvenPackageDir(join(ovensDir, "sample-oven")), "oven.json"), JSON.stringify({
       forkedFrom: { ovenId: "source-oven", revision: `o1-sha256:${"a".repeat(64)}` },
     }));
     writeFileSync(packagePath, JSON.stringify({
-      instructions: "# Updated Oven\n\nUpdated checklist.", detail: detailFixture(),
+      instructions: "# Updated Oven\n\nUpdated checklist.", oven: ovenFixture("sample-oven"),
     }));
     run(context, "oven", "update", "sample-oven", "--package", packagePath, "--ovens-dir", ovensDir);
     const current = resolveOvenPackageDir(join(ovensDir, "sample-oven"));
     assert.match(readFileSync(join(current, "instructions.md"), "utf8"), /Updated checklist/u);
-    assert.deepEqual(JSON.parse(readFileSync(join(current, "detail.json"), "utf8")), detailFixture());
+    assert.equal(readFileSync(join(current, "sample-oven.oven"), "utf8"), ovenFixture("sample-oven"));
     assert.equal(JSON.parse(readFileSync(join(current, "oven.json"), "utf8")).forkedFrom.ovenId, "source-oven");
     assert.equal(readdirSync(join(ovensDir, "sample-oven")).filter((name) => name.startsWith("rev-")).length, 2);
   } finally { context.cleanup(); }
@@ -172,7 +190,7 @@ test("oven update migrates a legacy plain directory to a pointer package", () =>
       forkedFrom: { ovenId: "source-oven", revision: `o1-sha256:${"a".repeat(64)}` },
     }));
     const packagePath = join(context.repo, "replacement.json");
-    writeFileSync(packagePath, JSON.stringify({ instructions: "# Updated Oven\n\nMigrated safely.", detail: detailFixture() }));
+    writeFileSync(packagePath, JSON.stringify({ instructions: "# Updated Oven\n\nMigrated safely.", oven: ovenFixture("legacy-oven") }));
     run(context, "oven", "update", "legacy-oven", "--package", packagePath, "--ovens-dir", ovensDir);
     assert.match(readFileSync(join(ovensDir, "legacy-oven", "current"), "utf8"), /^rev-[a-f0-9]+\n$/u);
     assert.equal(existsSync(join(ovensDir, "legacy-oven", "instructions.md")), false);
@@ -190,7 +208,7 @@ test("oven storage follows the umbrella root when launched from a subdirectory",
     mkdirSync(subdirectory, { recursive: true });
     const packagePath = join(context.repo, "package.json");
     writeFileSync(packagePath, JSON.stringify({
-      instructions: "# Umbrella Oven\n\nStored with the umbrella.", detail: detailFixture(),
+      instructions: "# Umbrella Oven\n\nStored with the umbrella.", oven: ovenFixture("umbrella-oven"),
     }));
     runFrom(subdirectory, "oven", "create", "umbrella-oven", "--package", packagePath);
     const ovenPath = join(context.repo, ".local", "burnlist", "ovens", "umbrella-oven");
@@ -202,27 +220,27 @@ test("oven storage follows the umbrella root when launched from a subdirectory",
 
 test("oven publication rejects oversized stored bytes without replacing a readable package", () => {
   const context = fixture();
-  const detailPath = join(context.repo, "detail.json");
+  const ovenSourcePath = join(context.repo, "sized-oven.oven");
   const instructionsPath = join(context.repo, "instructions.md");
   const ovenPath = join(context.repo, ".local", "burnlist", "ovens", "sized-oven");
   try {
-    writeFileSync(detailPath, JSON.stringify(detailFixture()));
+    writeFileSync(ovenSourcePath, ovenFixture("sized-oven"));
     writeFileSync(instructionsPath, `# ${"x".repeat(65_534)}`);
     assert.throws(
-      () => run(context, "oven", "create", "sized-oven", "--instructions", instructionsPath, "--detail", detailPath),
+      () => run(context, "oven", "create", "sized-oven", "--instructions", instructionsPath, "--oven", ovenSourcePath),
       (error) => String(error.stderr).includes("instructions.md") && String(error.stderr).includes("65536 byte limit"),
     );
     assert.equal(existsSync(ovenPath), false);
 
     writeFileSync(instructionsPath, `# ${"x".repeat(65_533)}`);
-    run(context, "oven", "create", "sized-oven", "--instructions", instructionsPath, "--detail", detailPath);
+    run(context, "oven", "create", "sized-oven", "--instructions", instructionsPath, "--oven", ovenSourcePath);
     const priorPointer = readFileSync(join(ovenPath, "current"), "utf8");
     const priorInstructions = readFileSync(join(resolveOvenPackageDir(ovenPath), "instructions.md"), "utf8");
     assert.equal(Buffer.byteLength(priorInstructions), 65_536);
 
     writeFileSync(instructionsPath, `# ${"\u0800".repeat(21_844)}xy`);
     assert.throws(
-      () => run(context, "oven", "update", "sized-oven", "--instructions", instructionsPath, "--detail", detailPath),
+      () => run(context, "oven", "update", "sized-oven", "--instructions", instructionsPath, "--oven", ovenSourcePath),
       (error) => String(error.stderr).includes("instructions.md") && String(error.stderr).includes("65536 byte limit"),
     );
     assert.equal(readFileSync(join(ovenPath, "current"), "utf8"), priorPointer);
@@ -235,7 +253,7 @@ test("oven storage rejects escaped overrides and catches a later local-state sym
   const packagePath = join(context.repo, "package.json");
   const outside = join(dirname(context.repo), "outside");
   try {
-    writeFileSync(packagePath, JSON.stringify({ instructions: "# Contained Oven\n\nStay in the repo.", detail: detailFixture() }));
+    writeFileSync(packagePath, JSON.stringify({ instructions: "# Contained Oven\n\nStay in the repo.", oven: ovenFixture("escaped-oven") }));
     mkdirSync(outside);
     assert.throws(
       () => run(context, "oven", "create", "escaped-oven", "--package", packagePath, "--ovens-dir", outside),
@@ -245,6 +263,7 @@ test("oven storage rejects escaped overrides and catches a later local-state sym
       () => execFileSync(process.execPath, [serverPath, "--stamp", "--ovens-dir", outside], { cwd: context.repo, encoding: "utf8" }),
       (error) => String(error.stderr).includes("escapes repo state"),
     );
+    writeFileSync(packagePath, JSON.stringify({ instructions: "# Contained Oven\n\nStay in the repo.", oven: ovenFixture("allowed-oven") }));
     run(context, "oven", "create", "allowed-oven", "--package", packagePath, "--ovens-dir", outside, "--unsafe-ovens-dir");
     assert.match(
       execFileSync(process.execPath, [serverPath, "--stamp", "--ovens-dir", outside, "--unsafe-ovens-dir"], { cwd: context.repo, encoding: "utf8" }),
@@ -252,6 +271,7 @@ test("oven storage rejects escaped overrides and catches a later local-state sym
     );
     assert.equal(existsSync(join(outside, "allowed-oven", "current")), true);
 
+    writeFileSync(packagePath, JSON.stringify({ instructions: "# Contained Oven\n\nStay in the repo.", oven: ovenFixture("local-oven") }));
     run(context, "oven", "create", "local-oven", "--package", packagePath);
     const defaultOvens = join(context.repo, ".local", "burnlist", "ovens");
     assertCustomOvenPath(context.repo, defaultOvens, "local-oven");
@@ -270,7 +290,7 @@ test("oven storage rejects symlink escapes for its state directory and individua
   const packagePath = join(context.repo, "package.json");
   const outside = join(dirname(context.repo), "outside");
   try {
-    writeFileSync(packagePath, JSON.stringify({ instructions: "# Contained Oven\n\nStay in the repo.", detail: detailFixture() }));
+    writeFileSync(packagePath, JSON.stringify({ instructions: "# Contained Oven\n\nStay in the repo.", oven: ovenFixture("unsafe-oven") }));
     mkdirSync(outside);
     symlinkSync(outside, join(context.repo, ".local"), "dir");
     assert.throws(
@@ -288,7 +308,7 @@ test("oven storage rejects symlink escapes for its state directory and individua
     mkdirSync(ovensDir, { recursive: true });
     mkdirSync(idOutside);
     symlinkSync(idOutside, join(ovensDir, "escaped-oven"), "dir");
-    writeFileSync(packagePath, JSON.stringify({ instructions: "# Escaped Oven\n\nNope.", detail: detailFixture() }));
+    writeFileSync(packagePath, JSON.stringify({ instructions: "# Escaped Oven\n\nNope.", oven: ovenFixture("escaped-oven") }));
     assert.throws(
       () => run(second, "oven", "view", "escaped-oven", "--json"),
       (error) => String(error.stderr).includes("escapes"),
@@ -306,11 +326,11 @@ test("oven view and list read complete packages on both sides of a publish barri
   try {
     const packagePath = join(context.repo, "replacement.json");
     writeFileSync(packagePath, JSON.stringify({
-      instructions: "# Initial Oven\n\nInitial checklist.", detail: detailFixture(),
+      instructions: "# Initial Oven\n\nInitial checklist.", oven: ovenFixture("sample-oven"),
     }));
     run(context, "oven", "create", "sample-oven", "--package", packagePath, "--ovens-dir", ovensDir);
     writeFileSync(packagePath, JSON.stringify({
-      instructions: "# Updated Oven\n\nUpdated checklist.", detail: detailFixture(),
+      instructions: "# Updated Oven\n\nUpdated checklist.", oven: ovenFixture("sample-oven"),
     }));
     const writer = pausedUpdate(context, ovensDir, packagePath);
     try {
@@ -336,9 +356,9 @@ test("a killed writer leaves the prior pointer package readable", async () => {
   const ovensDir = join(context.repo, ".local", "burnlist", "ovens");
   try {
     const packagePath = join(context.repo, "replacement.json");
-    writeFileSync(packagePath, JSON.stringify({ instructions: "# Initial Oven\n\nInitial checklist.", detail: detailFixture() }));
+    writeFileSync(packagePath, JSON.stringify({ instructions: "# Initial Oven\n\nInitial checklist.", oven: ovenFixture("sample-oven") }));
     run(context, "oven", "create", "sample-oven", "--package", packagePath, "--ovens-dir", ovensDir);
-    writeFileSync(packagePath, JSON.stringify({ instructions: "# Interrupted Oven\n\nNever published.", detail: detailFixture() }));
+    writeFileSync(packagePath, JSON.stringify({ instructions: "# Interrupted Oven\n\nNever published.", oven: ovenFixture("sample-oven") }));
     const writer = pausedUpdate(context, ovensDir, packagePath);
     try {
       await waitForBarrier(writer);
@@ -350,7 +370,7 @@ test("a killed writer leaves the prior pointer package readable", async () => {
       assert.match(oldView.instructions, /Initial checklist/u);
       assert.equal(oldList.name, "Initial Oven");
       assert.equal(readFileSync(join(ovensDir, "sample-oven", "current"), "utf8"), priorCurrent);
-      writeFileSync(packagePath, JSON.stringify({ instructions: "# Recovered Oven\n\nPublished after recovery.", detail: detailFixture() }));
+      writeFileSync(packagePath, JSON.stringify({ instructions: "# Recovered Oven\n\nPublished after recovery.", oven: ovenFixture("sample-oven") }));
       run(context, "oven", "update", "sample-oven", "--package", packagePath, "--ovens-dir", ovensDir);
       assert.match(JSON.parse(run(context, "oven", "view", "sample-oven", "--json", "--ovens-dir", ovensDir)).instructions, /Published after recovery/u);
       assert.notEqual(readFileSync(join(ovensDir, "sample-oven", "current"), "utf8"), priorCurrent);
@@ -364,7 +384,7 @@ test("oven fork writes source revision lineage and discovery exposes it", () =>
   try {
     writeOven(ovensDir, "source-oven");
     const source = JSON.parse(run(context, "oven", "view", "source-oven", "--json", "--ovens-dir", ovensDir));
-    const expectedRevision = ovenRevision({ instructions: source.instructions, detail: source.detail });
+    const expectedRevision = ovenRevision({ id: source.id, instructions: source.instructions, oven: source.oven });
     const output = run(context, "oven", "fork", "source-oven", "forked-oven", "--ovens-dir", ovensDir);
     assert.match(output, new RegExp(`Forked from source-oven@${expectedRevision}`));
     assert.deepEqual(JSON.parse(readFileSync(join(resolveOvenPackageDir(join(ovensDir, "forked-oven")), "oven.json"), "utf8")), {
@@ -383,7 +403,7 @@ test("oven ignores legacy files and accepts only the two-file package layout", (
   try {
     mkdirSync(legacyDir, { recursive: true });
     writeFileSync(join(legacyDir, "definition.md"), "# Legacy Oven\n");
-    writeFileSync(join(legacyDir, "dashboard.json"), JSON.stringify(detailFixture()));
+    writeFileSync(join(legacyDir, "dashboard.json"), JSON.stringify({ legacy: true }));
     writeOven(ovensDir, "two-file-oven");
     const ovens = JSON.parse(run(context, "oven", "list", "--json", "--ovens-dir", ovensDir));
     assert.equal(ovens.some((oven) => oven.id === "legacy-only"), false);
diff --git a/src/cli/oven-fork-id.test.mjs b/src/cli/oven-fork-id.test.mjs
new file mode 100644
index 0000000..a9c4750
--- /dev/null
+++ b/src/cli/oven-fork-id.test.mjs
@@ -0,0 +1,46 @@
+import assert from "node:assert/strict";
+import { execFileSync } from "node:child_process";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join, resolve } from "node:path";
+import test from "node:test";
+import { compileOven } from "../ovens/dsl/oven-compile.mjs";
+import { starterOvenSource } from "../ovens/oven-starter.mjs";
+
+const repoRoot = resolve(new URL("../..", import.meta.url).pathname);
+const binPath = join(repoRoot, "bin", "burnlist.mjs");
+
+function fixture() {
+  const root = mkdtempSync(join(tmpdir(), "burnlist-oven-fork-id-"));
+  const repo = join(root, "repo");
+  mkdirSync(repo);
+  return { repo, cleanup: () => rmSync(root, { recursive: true, force: true }) };
+}
+
+function run(context, ...args) {
+  return execFileSync(process.execPath, [binPath, ...args], { cwd: context.repo, encoding: "utf8" });
+}
+
+function writeOven(root, id) {
+  const ovenRoot = join(root, id);
+  mkdirSync(ovenRoot, { recursive: true });
+  writeFileSync(join(ovenRoot, "instructions.md"), "# Source Oven\n\nFollow the checklist.\n");
+  writeFileSync(join(ovenRoot, `${id}.oven`), starterOvenSource(id, "Source Oven"));
+}
+
+test("oven fork rewrites the DSL root id to the fork id", () => {
+  const context = fixture();
+  const ovensDir = join(context.repo, ".local", "burnlist", "ovens");
+  try {
+    writeOven(ovensDir, "source-oven");
+    const catalog = JSON.parse(run(context, "oven", "list", "--json", "--ovens-dir", ovensDir));
+    assert.equal(catalog.some((oven) => oven.id === "source-oven"), true);
+
+    run(context, "oven", "fork", "source-oven", "forked-oven", "--ovens-dir", ovensDir);
+
+    const forked = JSON.parse(run(context, "oven", "view", "forked-oven", "--json", "--ovens-dir", ovensDir));
+    const compiled = compileOven(forked.oven);
+    assert.equal(compiled.ok, true);
+    assert.equal(compiled.ir.id, "forked-oven");
+  } finally { context.cleanup(); }
+});
diff --git a/src/cli/oven-storage.mjs b/src/cli/oven-storage.mjs
index 5e4d1b3..7ad7fe4 100644
--- a/src/cli/oven-storage.mjs
+++ b/src/cli/oven-storage.mjs
@@ -1,11 +1,13 @@
 import { readFileSync, readSync, readdirSync, realpathSync, statSync } from "node:fs";
 import { join, resolve } from "node:path";
-import { normalizeOvenDetail, normalizeOvenForkedFrom, normalizeOvenPackage, ovenId, ovenRevision } from "../ovens/oven-contract.mjs";
+import { normalizeOvenForkedFrom, normalizeOvenPackage, ovenId, ovenRevision } from "../ovens/oven-contract.mjs";
+import { compileOven } from "../ovens/dsl/oven-compile.mjs";
+import { starterOvenSource } from "../ovens/oven-starter.mjs";
 import { atomicOvenPackage, resolveOvenPackageDir, withOvenPackageLock } from "../server/fs-safe.mjs";
 import {
   assertCustomOvensDir,
   assertCustomOvenPath,
-  OVEN_DETAIL_MAX_BYTES,
+  OVEN_SOURCE_MAX_BYTES,
   OVEN_INSTRUCTIONS_MAX_BYTES,
   OVEN_LINEAGE_MAX_BYTES,
   serializeOvenPackage,
@@ -55,12 +57,12 @@ export function createOvenCatalog({ builtInOvensDir, customOvensDir, customRepoR
     }
     try {
       const instructionsPath = join(ovenRoot, "instructions.md");
-      const detailPath = join(ovenRoot, "detail.json");
-      if (!safeStat(instructionsPath)?.isFile() || !safeStat(detailPath)?.isFile()) return null;
+      const ovenPath = join(ovenRoot, `${safeId}.oven`);
+      if (!safeStat(instructionsPath)?.isFile() || !safeStat(ovenPath)?.isFile()) return null;
       const ovenPackage = normalizeOvenPackage({
         id: safeId,
         instructions: readTextFileWithLimit(instructionsPath, OVEN_INSTRUCTIONS_MAX_BYTES, "Oven instructions"),
-        detail: JSON.parse(readTextFileWithLimit(detailPath, OVEN_DETAIL_MAX_BYTES, "Oven detail template")),
+        oven: readTextFileWithLimit(ovenPath, OVEN_SOURCE_MAX_BYTES, "Oven source"),
       });
       const lineagePath = join(ovenRoot, "oven.json");
       let forkedFrom;
@@ -80,7 +82,8 @@ export function createOvenCatalog({ builtInOvensDir, customOvensDir, customRepoR
         builtIn,
         path: ovenRoot,
         instructions: ovenPackage.instructions,
-        detail: ovenPackage.detail,
+        oven: ovenPackage.oven,
+        ir: compileOven(ovenPackage.oven).ir,
         ovenRevision: ovenRevision(ovenPackage),
         ...(forkedFrom ? { forkedFrom } : {}),
       };
@@ -147,21 +150,20 @@ function readInput(spec, maxBytes, label) {
   return readTextFileWithLimit(resolve(spec), maxBytes, label);
 }
 
-export function resolvePackageInput({ flags, positionals }) {
+export function resolvePackageInput({ flags, positionals, scaffold = false }) {
   const pkg = {};
   if (flags.has("package")) Object.assign(pkg, JSON.parse(readInput(flags.get("package"), OVEN_PACKAGE_MAX_BYTES, "Oven package")));
+  const id = ovenId(positionals[0] ?? pkg.id ?? flags.get("id") ?? "");
   if (flags.has("dir")) {
     const dir = resolve(flags.get("dir"));
     pkg.instructions = readTextFileWithLimit(join(dir, "instructions.md"), OVEN_INSTRUCTIONS_MAX_BYTES, "Oven instructions");
-    pkg.detail = JSON.parse(readTextFileWithLimit(join(dir, "detail.json"), OVEN_DETAIL_MAX_BYTES, "Oven detail template"));
+    pkg.oven = readTextFileWithLimit(join(dir, `${id}.oven`), OVEN_SOURCE_MAX_BYTES, "Oven source");
   }
   if (flags.has("instructions")) pkg.instructions = readInput(flags.get("instructions"), OVEN_INSTRUCTIONS_MAX_BYTES, "Oven instructions");
-  if (flags.has("detail")) pkg.detail = JSON.parse(readInput(flags.get("detail"), OVEN_DETAIL_MAX_BYTES, "Oven detail template"));
+  if (flags.has("oven")) pkg.oven = readInput(flags.get("oven"), OVEN_SOURCE_MAX_BYTES, "Oven source");
 
-  const id = ovenId(positionals[0] ?? pkg.id ?? flags.get("id") ?? "");
   const name = flags.has("name") ? String(flags.get("name")).trim() : String(pkg.name ?? "").trim();
   if (pkg.instructions === undefined) throw new Error("Provide instructions via --instructions, --package, or --dir.");
-  if (pkg.detail === undefined) throw new Error("Provide a detail skeleton via --detail, --package, or --dir.");
 
   let instructions = String(pkg.instructions);
   if (name) {
@@ -171,9 +173,13 @@ export function resolvePackageInput({ flags, positionals }) {
     else lines[headingIndex] = `# ${name}`;
     instructions = lines.join("\n");
   }
-  const normalized = normalizeOvenPackage({ id, instructions, detail: normalizeOvenDetail(pkg.detail) });
+  if (pkg.oven === undefined) {
+    if (!scaffold) throw new Error("Provide Oven source via --oven, --package, or --dir.");
+    pkg.oven = starterOvenSource(id, name || instructionsName(instructions, id));
+  }
+  const normalized = normalizeOvenPackage({ id, instructions, oven: pkg.oven });
   // Serialize here as well as at persist time so every input shape receives
-  // the same independent instructions.md and detail.json byte checks.
+  // the same independent instructions.md and .oven byte checks.
   serializeOvenPackage(normalized);
   return normalized;
 }
diff --git a/src/cli/oven-storage.test.mjs b/src/cli/oven-storage.test.mjs
index e3354c3..4845993 100644
--- a/src/cli/oven-storage.test.mjs
+++ b/src/cli/oven-storage.test.mjs
@@ -20,78 +20,58 @@ function run(context, args, input) {
   return execFileSync(process.execPath, [binPath, ...args], { cwd: context.repo, encoding: "utf8", input });
 }
 
-function detailWithStoredBytes(targetBytes, fill = "d") {
-  const detail = {
-    version: 1,
-    columns: 2,
-    rows: 32,
-    rowHeight: 48,
-    cells: Array.from({ length: 32 }, (_, index) => ({
-      id: `cell-${index + 1}`,
-      title: "Title",
-      description: "",
-      widget: "metric",
-      source: "/metric",
-      format: "plain",
-      column: 1,
-      row: index + 1,
-      columnSpan: 1,
-      rowSpan: 1,
-    })),
-  };
-  let remaining = targetBytes - Buffer.byteLength(`${JSON.stringify(detail, null, 2)}\n`);
-  for (const cell of detail.cells) {
-    const amount = Math.min(2_000, Math.ceil(remaining / Buffer.byteLength(fill)));
-    cell.description = fill.repeat(amount);
-    remaining -= Buffer.byteLength(cell.description);
-  }
-  assert.equal(remaining, 0, "test fixture cannot reach its requested detail size");
-  return detail;
+function ovenWithStoredBytes(targetBytes, id) {
+  const prefix = `<oven id="${id}" version="1" contract="checklist-progress@1" theme="checklist">\n  <!--`;
+  const suffix = '-->\n  <section-header title="Stored source"/>\n</oven>\n';
+  const fillBytes = targetBytes - Buffer.byteLength(prefix) - Buffer.byteLength(suffix);
+  assert.ok(fillBytes >= 0, "test fixture must leave room for a valid Oven");
+  return `${prefix}${"x".repeat(fillBytes)}${suffix}`;
 }
 
 test("--package accepts a 133KB envelope when each stored component fits", () => {
   const context = fixture();
   try {
     const instructions = `# ${"x".repeat(65_533)}`;
-    const detail = detailWithStoredBytes(69 * 1024);
-    const packageInput = JSON.stringify({ instructions, detail });
+    const oven = ovenWithStoredBytes(69 * 1024, "from-package");
+    const fileOven = ovenWithStoredBytes(69 * 1024, "from-files");
+    const packageInput = JSON.stringify({ instructions, oven });
     const instructionsPath = join(context.repo, "instructions.md");
-    const detailPath = join(context.repo, "detail.json");
+    const ovenPath = join(context.repo, "from-files.oven");
     writeFileSync(instructionsPath, instructions);
-    writeFileSync(detailPath, JSON.stringify(detail));
+    writeFileSync(ovenPath, fileOven);
 
     run(context, ["oven", "create", "from-package", "--package", "-"], packageInput);
-    run(context, ["oven", "create", "from-files", "--instructions", instructionsPath, "--detail", detailPath]);
+    run(context, ["oven", "create", "from-files", "--instructions", instructionsPath, "--oven", ovenPath]);
 
     const packageDir = resolveOvenPackageDir(join(context.repo, ".local", "burnlist", "ovens", "from-package"));
     const filesDir = resolveOvenPackageDir(join(context.repo, ".local", "burnlist", "ovens", "from-files"));
     const packageInstructions = readFileSync(join(packageDir, "instructions.md"), "utf8");
-    const packageDetail = readFileSync(join(packageDir, "detail.json"), "utf8");
+    const packageOven = readFileSync(join(packageDir, "from-package.oven"), "utf8");
     assert.equal(Buffer.byteLength(packageInstructions), 64 * 1024);
-    assert.equal(Buffer.byteLength(packageDetail), 69 * 1024);
+    assert.equal(Buffer.byteLength(packageOven), 69 * 1024);
     assert.ok(Buffer.byteLength(packageInput) > 128 * 1024);
     assert.equal(packageInstructions, readFileSync(join(filesDir, "instructions.md"), "utf8"));
-    assert.equal(packageDetail, readFileSync(join(filesDir, "detail.json"), "utf8"));
+    assert.equal(packageOven, oven);
+    assert.equal(readFileSync(join(filesDir, "from-files.oven"), "utf8"), fileOven);
   } finally { context.cleanup(); }
 });
 
-test("--package rejects oversized stored instructions and detail independently", () => {
+test("--package rejects oversized stored instructions and Oven source independently", () => {
   const context = fixture();
   try {
-    const detail = detailWithStoredBytes(69 * 1024);
+    const oven = ovenWithStoredBytes(69 * 1024, "large-instructions");
     assert.throws(
       () => run(context, ["oven", "create", "large-instructions", "--package", "-"], JSON.stringify({
-        instructions: `# ${"\u0800".repeat(21_845)}`, detail,
+        instructions: `# ${"\u0800".repeat(21_845)}`, oven,
       })),
       (error) => String(error.stderr).includes("instructions.md") && String(error.stderr).includes("65536 byte limit"),
     );
-    const oversizedDetail = detailWithStoredBytes(69 * 1024);
-    for (const cell of oversizedDetail.cells) cell.description = "\u0800".repeat(2_000);
+    const oversizedOven = ovenWithStoredBytes(131_073, "large-oven");
     assert.throws(
-      () => run(context, ["oven", "create", "large-detail", "--package", "-"], JSON.stringify({
-        instructions: "# Valid", detail: oversizedDetail,
+      () => run(context, ["oven", "create", "large-oven", "--package", "-"], JSON.stringify({
+        instructions: "# Valid", oven: oversizedOven,
       })),
-      (error) => String(error.stderr).includes("detail.json") && String(error.stderr).includes("131072 byte limit"),
+      (error) => String(error.stderr).includes(".oven") && String(error.stderr).includes("131072 byte limit"),
     );
   } finally { context.cleanup(); }
 });
diff --git a/src/cli/registry-cli.test.mjs b/src/cli/registry-cli.test.mjs
index b5d47b8..d67e478 100644
--- a/src/cli/registry-cli.test.mjs
+++ b/src/cli/registry-cli.test.mjs
@@ -1,5 +1,5 @@
 import assert from "node:assert/strict";
-import { execFileSync } from "node:child_process";
+import { execFileSync, spawnSync } from "node:child_process";
 import { existsSync, mkdirSync, mkdtempSync, readFileSync, realpathSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join, resolve } from "node:path";
@@ -100,6 +100,22 @@ test("init creates lifecycle folders, ignores them, and registers the repo", ()
   }
 });
 
+test("init exits 0 on success", () => {
+  const { home, cleanup } = fixture();
+  const repo = gitRepo(home, "init-exit-repo");
+  try {
+    const result = spawnSync(process.execPath, ["bin/burnlist.mjs", "init", repo], {
+      cwd: repoRoot,
+      encoding: "utf8",
+      env: { ...process.env, HOME: home },
+    });
+    assert.equal(result.status, 0);
+    assert.match(result.stdout, /Initialized \d+ lifecycle folders?/u);
+  } finally {
+    cleanup();
+  }
+});
+
 test("init --track writes gitkeep files, tracks burnlists, and keeps local Oven storage ignored", () => {
   const { home, cleanup } = fixture();
   const repo = gitRepo(home, "tracked-repo");
diff --git a/src/ovens/built-in-handlers.mjs b/src/ovens/built-in-handlers.mjs
index 106b071..d39309f 100644
--- a/src/ovens/built-in-handlers.mjs
+++ b/src/ovens/built-in-handlers.mjs
@@ -1,5 +1,5 @@
 import "./handlers/checklist.mjs";
-import "../../ovens/differential-testing/engine/differential-testing-handler.mjs";
-import "../../ovens/performance-tracing/engine/performance-tracing-handler.mjs";
+import "../../ovens/differential-testing/engine/handler.mjs";
+import "../../ovens/performance-tracing/handler.mjs";
 import "../../ovens/streaming-diff/engine/streaming-diff-handler.mjs";
-import "../../ovens/visual-parity/engine/visual-parity-handler.mjs";
+import "../../ovens/visual-parity/handler.mjs";
diff --git a/src/ovens/dsl/__fixtures__/checklist.oven b/src/ovens/dsl/__fixtures__/checklist.oven
new file mode 100644
index 0000000..6e7e413
--- /dev/null
+++ b/src/ovens/dsl/__fixtures__/checklist.oven
@@ -0,0 +1,80 @@
+<!-- Demonstrates the smallest useful oven: the existing 12-column Checklist detail grid.
+     Its six regions bind only adapter payload data and use established oven components. -->
+<oven id="checklist"
+      version="1"
+      contract="checklist-progress@1"
+      theme="checklist">
+  <grid id="checklist-grid" columns="12" rows="10" row-height="48">
+    <panel id="completed" title="Completed"
+           column="1" row="1" column-span="3" row-span="2">
+      <kpi-item heading="Completed"
+                source="/summary/completed"
+                format="number">
+        <icon slot="visual" name="ClipboardList"/>
+      </kpi-item>
+    </panel>
+
+    <panel id="progress" title="Progress"
+           column="4" row="1" column-span="5" row-span="2">
+      <kpi-item heading="Progress">
+        <progress-donut slot="visual"
+                        source="/summary/percent"
+                        format="ratio-to-percent"/>
+        <text slot="value"
+              source="/summary/percent"
+              format="percent"/>
+      </kpi-item>
+    </panel>
+
+    <panel id="status" title="Status"
+           column="9" row="1" column-span="4" row-span="2">
+      <kpi-item heading="Status"
+                source="/summary/status"
+                format="plain">
+        <icon slot="visual" name="Gauge"/>
+      </kpi-item>
+    </panel>
+
+    <panel id="active" title="Active checklist"
+           column="1" row="3" column-span="6" row-span="4">
+      <section-header title="Active checklist"
+                      source="/active"
+                      format="length"/>
+      <collection id="active-items"
+                  source="/active"
+                  item-key="/id"
+                  paging="client"
+                  page-size="25">
+        <each>
+          <kpi-item>
+            <bind prop="heading" source="@item/title" format="plain"/>
+            <bind prop="value" source="@item/id" format="plain"/>
+            <icon slot="visual" name="ClipboardList"/>
+          </kpi-item>
+        </each>
+      </collection>
+    </panel>
+
+    <panel id="timeline" title="Timeline"
+           column="7" row="3" column-span="6" row-span="4">
+      <log-table source="/timeline"
+                 empty-text="No timeline events yet.">
+        <column label="Time" source="@item/time" format="time-only"/>
+        <column label="Event" source="@item/title" format="plain"/>
+        <column label="Status" source="@item/status" format="plain"/>
+      </log-table>
+    </panel>
+
+    <panel id="log" title="Burnlist log"
+           column="1" row="7" column-span="12" row-span="4">
+      <log-table source="/log"
+                 empty-text="No burnlist events yet.">
+        <column label="Age" source="@item/time" format="relative-age"/>
+        <column label="Event" source="@item/id" format="plain"/>
+        <column label="Result" source="@item/result" format="plain"/>
+        <column label="Delta" source="@item/delta" format="plain" optional="true"/>
+        <column label="Done" source="@item/percent" format="percent"/>
+      </log-table>
+    </panel>
+  </grid>
+</oven>
diff --git a/src/ovens/dsl/__fixtures__/differential-testing.oven b/src/ovens/dsl/__fixtures__/differential-testing.oven
new file mode 100644
index 0000000..32fe368
--- /dev/null
+++ b/src/ovens/dsl/__fixtures__/differential-testing.oven
@@ -0,0 +1,160 @@
+<!-- Demonstrates the hardest oven: live DT KPIs, mode branches, log rows, and a searchable,
+     sortable, filterable, pageable field collection. Every interaction is id-wired data. -->
+<oven id="differential-testing"
+      version="1"
+      contract="burnlist-differential-testing-data@1"
+      refresh-seconds="2"
+      theme="differential-testing">
+  <stack id="dt-page" direction="column" gap="md">
+    <grid id="dt-grid" columns="12" rows="14" row-height="64">
+      <panel id="overview" title="Differential Testing"
+             column="1" row="1" column-span="12" row-span="1">
+        <stack direction="row" gap="sm">
+          <refresh-status source="/refresh" optional="true"/>
+          <kpi-strip aria-label="Differential Testing field KPIs">
+            <kpi-item heading="Scenario"
+                      source="/scenarioCatalog/selectedScenarioId"
+                      format="plain">
+              <bind prop="title" source="/subtitle" format="plain"/>
+              <icon slot="visual" name="ClipboardList"/>
+            </kpi-item>
+
+            <kpi-item heading="Progress"
+                      source="/progress"
+                      format="progress-headline">
+              <progress-donut slot="visual"
+                              source="/progress"
+                              format="last-progress-percent"/>
+            </kpi-item>
+
+            <kpi-item heading="Results"
+                      source="/summary/runs/total"
+                      format="number">
+              <burn-donut slot="visual" source="/log"/>
+            </kpi-item>
+
+            <kpi-item heading="Fields"
+                      source="/summary/fields/total"
+                      format="number">
+              <waffle-metric slot="visual" source="/summary/fields"/>
+            </kpi-item>
+
+            <kpi-item heading="Frames"
+                      source="/summary/frames/total"
+                      format="number">
+              <waffle-metric slot="visual" source="/summary/frames"/>
+            </kpi-item>
+          </kpi-strip>
+        </stack>
+      </panel>
+
+      <panel id="run-history" title="Parity Progress"
+             column="1" row="2" column-span="4" row-span="5">
+        <log-table source="/log"
+                   empty-text="No Differential Testing runs.">
+          <column label="Time" source="@item/timestamp" format="time-only"/>
+          <column label="Result" source="@item/result" format="plain"/>
+          <column label="Value" source="@item/value" format="number"/>
+          <column label="Delta" source="@item/delta" format="delta" optional="true"/>
+          <column label="Field" source="@item/firstFailingLabel" format="plain" optional="true"/>
+        </log-table>
+      </panel>
+
+      <panel id="progress-view" title="Parity Progress"
+             column="5" row="2" column-span="8" row-span="5">
+        <mode-toggle id="progress-mode"
+                     initial="delta"
+                     aria-label="Differential Testing progress view">
+          <option value="progress" label="Progress"/>
+          <option value="failed" label="Failed"/>
+          <option value="delta" label="Delta"/>
+        </mode-toggle>
+
+        <switch id="progress-branch" mode-from="progress-mode">
+          <case value="progress">
+            <kpi-item heading="Cleared frames"
+                      source="/progress"
+                      format="progress-headline">
+              <progress-donut slot="visual"
+                              source="/progress"
+                              format="last-progress-percent"/>
+            </kpi-item>
+          </case>
+          <case value="failed">
+            <kpi-item heading="Failed frames"
+                      source="/progress"
+                      format="last-failed-count">
+              <progress-donut slot="visual"
+                              source="/progress"
+                              format="last-failed-percent"/>
+            </kpi-item>
+          </case>
+          <case value="delta">
+            <kpi-item heading="Frame delta"
+                      source="/progress"
+                      format="last-frame-delta">
+              <progress-donut slot="visual"
+                              source="/progress"
+                              format="last-delta-percent"/>
+            </kpi-item>
+          </case>
+        </switch>
+      </panel>
+
+      <panel id="field-details" title="Field Details"
+             column="1" row="7" column-span="12" row-span="8">
+        <section-header title="Fields List"
+                        source="/summary/fields/total"
+                        format="number"/>
+
+        <field-toolbar id="field-controls">
+          <search id="field-search"
+                  placeholder="Search Fields..."
+                  aria-label="Differential Testing search fields"
+                  match-fields="/label /sourceOwner /driftClass /semantics/kind"
+                  debounce-ms="150"/>
+          <mode-toggle id="value-mode"
+                       initial="delta"
+                       aria-label="Differential Testing chart mode">
+            <option value="current" label="Value"/>
+            <option value="delta" label="Delta"/>
+          </mode-toggle>
+          <sort-toggle id="changed-sort"
+                       key="changed"
+                       label="Changed"
+                       initial="on"
+                       requires-source="/telemetry/status"
+                       requires-value="comparable"
+                       unavailable-text="Changed is unavailable until comparable transition telemetry is published."/>
+          <filter-toggle id="failed-filter"
+                         key="non-pass"
+                         label="Failed"
+                         initial="off"/>
+        </field-toolbar>
+
+        <collection id="field-view"
+                    source="/fields"
+                    item-key="/id"
+                    search-from="field-search"
+                    sort-from="changed-sort"
+                    filter-from="failed-filter"
+                    paging="auto"
+                    page-size="25">
+          <field-list collection-from="field-view"
+                      mode-from="value-mode">
+            <bind prop="telemetryByField"
+                  source="/telemetry/fields"
+                  format="index-by-id"
+                  optional="true"/>
+            <bind prop="telemetryAvailability"
+                  source="/telemetry"
+                  format="telemetry-availability"
+                  optional="true"/>
+          </field-list>
+          <pagination collection-from="field-view"
+                      page-sizes="25 50 100 200"/>
+        </collection>
+      </panel>
+    </grid>
+  </stack>
+</oven>
diff --git a/src/ovens/dsl/oven-compile.mjs b/src/ovens/dsl/oven-compile.mjs
new file mode 100644
index 0000000..d2dc6a9
--- /dev/null
+++ b/src/ovens/dsl/oven-compile.mjs
@@ -0,0 +1,17 @@
+import { readFile } from "node:fs/promises";
+import { scanXml } from "./xml-scan.mjs";
+import { validateOven } from "./oven-validate.mjs";
+import { buildIR } from "./oven-ir.mjs";
+
+export function compileOven(source, { file = "<oven>" } = {}) {
+  const parsed = scanXml(source, { file });
+  if (!parsed.ok) return { ok: false, diagnostics: parsed.diagnostics };
+  const checked = validateOven(parsed.ast, { file });
+  if (!checked.ok) return { ok: false, diagnostics: checked.diagnostics };
+  return { ok: true, ir: buildIR(parsed.ast) };
+}
+
+export async function compileOvenFile(path) {
+  try { return compileOven(await readFile(path), { file: path }); }
+  catch (error) { return { ok: false, diagnostics: [{ code: "FILE_READ", message: error.message, file: path, line: 1, column: 1, path: "" }] }; }
+}
diff --git a/src/ovens/dsl/oven-compile.test.mjs b/src/ovens/dsl/oven-compile.test.mjs
new file mode 100644
index 0000000..ea30764
--- /dev/null
+++ b/src/ovens/dsl/oven-compile.test.mjs
@@ -0,0 +1,14 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { compileOvenFile } from "./oven-compile.mjs";
+
+function frozen(value) { if (!value || typeof value !== "object") return true; return Object.isFrozen(value) && Object.values(value).every(frozen); }
+for (const [name, expected] of Object.entries({ checklist: { components: ["kpi-item", "log-table", "progress-donut", "section-header"], icons: ["ClipboardList", "Gauge"] }, "differential-testing": { components: ["burn-donut", "field-list", "kpi-strip", "waffle-metric"], selectors: ["changed", "non-pass"] } })) test(`${name} golden compiles to frozen JSON-safe IR`, async () => {
+  const result = await compileOvenFile(path.join(path.dirname(fileURLToPath(import.meta.url)), "__fixtures__", `${name}.oven`));
+  assert.equal(result.ok, true, JSON.stringify(result.diagnostics));
+  assert.equal(frozen(result.ir), true);
+  assert.deepEqual(JSON.parse(JSON.stringify(result.ir)), result.ir);
+  for (const [key, values] of Object.entries(expected)) for (const value of values) assert.ok(result.ir.requirements[key].includes(value));
+});
diff --git a/src/ovens/dsl/oven-diagnostics.mjs b/src/ovens/dsl/oven-diagnostics.mjs
new file mode 100644
index 0000000..4920c25
--- /dev/null
+++ b/src/ovens/dsl/oven-diagnostics.mjs
@@ -0,0 +1,19 @@
+export const MAX_DIAGNOSTICS = 100;
+
+export function diagnostics(file = "<oven>") {
+  const list = [];
+  return {
+    list,
+    add(code, message, node = {}) {
+      if (list.length >= MAX_DIAGNOSTICS) return;
+      const span = node.span ?? node;
+      list.push({ code, message, file, line: span.line ?? 1, column: span.column ?? 1, path: node.path ?? "" });
+    },
+  };
+}
+
+export function nodePath(node) {
+  const names = [];
+  for (let current = node; current; current = current.parent) names.unshift(current.name);
+  return `/${names.join("/")}`;
+}
diff --git a/src/ovens/dsl/oven-grammar.mjs b/src/ovens/dsl/oven-grammar.mjs
new file mode 100644
index 0000000..8ad112e
--- /dev/null
+++ b/src/ovens/dsl/oven-grammar.mjs
@@ -0,0 +1,20 @@
+const common = ["id"];
+const sourceBinding = ["source", "format", "optional", "fallback", "slot"];
+export const ELEMENTS = Object.freeze({
+  oven: { parents: [], attrs: ["id", "version", "contract", "refresh-seconds", "theme"], children: ["box", "grid", "stack", "panel", "kpi-strip", "section-header", "log-table", "checklist-burn-panel", "checklist-ledger", "checklist-event-cards", "collection", "field-toolbar", "switch", "metric-tiles", "verdict-header", "domain-tabs", "domain-note", "frame-card", "image-triptych", "feed-list", "diff-card", "file-diff", "streaming-diff-heading", "refresh-status", "differential-kpi-strip", "differential-log-table", "progress-chart", "frame-delta-chart", "differential-empty-state"] },
+  box: { attrs: [...common, "element", "class", "text", "data-detail-tab"], children: ["box", "grid", "stack", "panel", "kpi-strip", "kpi-item", "section-header", "log-table", "checklist-burn-panel", "checklist-ledger", "checklist-event-cards", "collection", "field-toolbar", "switch", "metric-tiles", "verdict-header", "domain-tabs", "domain-note", "frame-card", "image-triptych", "feed-list", "diff-card", "file-diff", "refresh-status"] },
+  grid: { attrs: [...common, "columns", "rows", "row-height"], children: ["box", "panel", "stack", "kpi-strip", "section-header", "log-table", "checklist-burn-panel", "checklist-ledger", "checklist-event-cards", "collection", "field-toolbar", "switch"] },
+  stack: { attrs: [...common, "direction", "gap"], children: ["box", "grid", "panel", "stack", "kpi-strip", "kpi-item", "section-header", "log-table", "checklist-burn-panel", "checklist-ledger", "checklist-event-cards", "collection", "field-toolbar", "switch", "refresh-status"] },
+  panel: { attrs: ["id", "title", "column", "row", "column-span", "row-span"], children: ["box", "grid", "stack", "kpi-strip", "kpi-item", "section-header", "log-table", "checklist-burn-panel", "checklist-ledger", "checklist-event-cards", "collection", "field-toolbar", "switch", "mode-toggle"] },
+  switch: { attrs: [...common, "mode-from", "source"], children: ["case"] }, case: { attrs: ["value", "default"], children: ["grid", "stack", "panel", "kpi-strip", "kpi-item", "section-header", "log-table", "collection", "field-toolbar", "mode-toggle", "switch", "refresh-status", "differential-kpi-strip", "differential-log-table", "progress-chart", "frame-delta-chart", "differential-empty-state"] },
+  collection: { attrs: ["id", "source", "item-key", "search-from", "filter-from", "sort-from", "paging", "page-size"], children: ["each", "field-list", "pagination"] }, each: { attrs: [], children: ["grid", "stack", "panel", "kpi-item", "section-header", "log-table", "switch"] },
+  bind: { attrs: ["prop", "source", "format", "optional", "fallback"], children: [] }, text: { attrs: ["slot", "text", "source", "format", "optional", "fallback"], children: [] }, icon: { attrs: ["slot", "name"], children: [] }, column: { attrs: ["label", "source", "format", "optional", "fallback", "tone"], children: [] },
+  "kpi-strip": { attrs: [...common, "aria-label", "class", "title"], children: ["kpi-item"] }, "kpi-item": { attrs: [...common, "class", "heading", "title", "value", "icon", "variant", ...sourceBinding], children: ["bind", "text", "icon", "progress-donut", "burn-donut", "waffle-metric", "progress-value"] },
+  "progress-donut": { attrs: sourceBinding, children: [] }, "burn-donut": { attrs: sourceBinding, children: [] }, "waffle-metric": { attrs: sourceBinding, children: [] }, "progress-value": { attrs: ["done", "total", "percent"], children: [] }, "checklist-burn-panel": { attrs: sourceBinding, children: [] }, "checklist-ledger": { attrs: sourceBinding, children: [] }, "checklist-event-cards": { attrs: sourceBinding, children: [] }, "log-table": { attrs: [...common, "class", "title", "source", "empty-text"], children: ["column"] }, "section-header": { attrs: [...common, "class", "title", ...sourceBinding], children: ["bind", "text", "icon"] }, "streaming-diff-heading": { attrs: [...common, "session", "back-href"], children: [] },
+  "field-list": { attrs: [...common, "collection-from", "mode-from"], children: ["bind"] }, "metric-tiles": { attrs: [...common, "source", "selection-from"], children: ["bind"] }, "verdict-header": { attrs: common, children: ["bind"] }, "domain-tabs": { attrs: ["id", "source", "initial-source", "format"], children: [] }, "domain-note": { attrs: [...common, "source", "selection-from"], children: ["bind"] }, "frame-card": { attrs: [...common, ...sourceBinding, "selection-from"], children: ["bind", "text", "icon"] }, "image-triptych": { attrs: common, children: ["bind"] }, "feed-list": { attrs: common, children: ["bind"] }, "diff-card": { attrs: [...common, ...sourceBinding], children: ["bind", "text", "icon"] }, "file-diff": { attrs: [...common, ...sourceBinding], children: ["bind", "text", "icon"] }, "refresh-status": { attrs: [...common, ...sourceBinding], children: [] },
+  "differential-kpi-strip": { attrs: [...common, ...sourceBinding], children: [] }, "differential-log-table": { attrs: [...common, ...sourceBinding], children: [] }, "progress-chart": { attrs: [...common, ...sourceBinding], children: [] }, "frame-delta-chart": { attrs: [...common, ...sourceBinding], children: [] }, "differential-empty-state": { attrs: [...common, "title"], children: [] },
+  "field-toolbar": { attrs: ["id"], children: ["search", "mode-toggle", "sort-toggle", "filter-toggle"] }, "mode-toggle": { attrs: ["id", "initial", "aria-label"], children: ["option"] }, option: { attrs: ["value", "label"], children: [] }, search: { attrs: ["id", "placeholder", "aria-label", "match-fields", "debounce-ms"], children: [] }, "sort-toggle": { attrs: ["id", "key", "label", "initial", "requires-source", "requires-value", "unavailable-text"], children: [] }, "filter-toggle": { attrs: ["id", "key", "label", "initial"], children: [] }, pagination: { attrs: ["collection-from", "page-sizes"], children: [] },
+});
+export const COMPONENTS = new Set(Object.keys(ELEMENTS).filter((k) => !["oven","grid","stack","panel","switch","case","collection","each","bind","text","icon","column","field-toolbar","mode-toggle","option","search","sort-toggle","filter-toggle","pagination"].includes(k)));
+export const REGISTRY = Object.freeze({ themes: new Set(["checklist", "differential-testing", "streaming-diff", "visual-parity"]), contracts: new Set(["checklist-progress@1", "burnlist-differential-testing-data@1", "burnlist-streaming-diff-data@2", "burnlist-visual-parity-data@1"]), icons: new Set(["ClipboardList", "Clock3", "Gauge", "TimerReset"]), formats: new Set(["identity", "plain", "number", "percent", "delta", "ratio-to-percent", "length", "time-only", "relative-age", "progress-headline", "last-progress-percent", "last-failed-count", "last-failed-percent", "last-frame-delta", "last-delta-percent", "index-by-id", "telemetry-availability"]), filters: new Set(["non-pass"]), sorts: new Set(["changed"]) });
+export const REQUIRED_PROPS = Object.freeze({ "metric-tiles": ["passed", "total", "ratio", "meanAbsoluteDelta", "maximumAbsoluteDelta"], "verdict-header": ["targetPass", "framesCount", "error"], "image-triptych": ["images", "label", "frame"], "feed-list": ["feeds", "error", "loading", "showRepository"], "domain-note": ["isTarget", "rationale"] });
diff --git a/src/ovens/dsl/oven-ir.mjs b/src/ovens/dsl/oven-ir.mjs
new file mode 100644
index 0000000..dbc2d5c
--- /dev/null
+++ b/src/ovens/dsl/oven-ir.mjs
@@ -0,0 +1,19 @@
+const aliases = Object.freeze({ plain: "identity" });
+export function deepFreeze(value, seen = new Set()) { if (!value || typeof value !== "object" || seen.has(value)) return value; seen.add(value); for (const key of Reflect.ownKeys(value)) deepFreeze(value[key], seen); return Object.freeze(value); }
+export function nullMap(values) { return Object.assign(Object.create(null), values); }
+export function assertIR(ir) {
+  if (!ir || ir.schema !== "burnlist-oven-ir@1" || !Array.isArray(ir.root) || !Array.isArray(ir.controls) || !Array.isArray(ir.collections)) throw new TypeError("Invalid burnlist oven IR");
+  const check = (value) => { if (value === null || ["string", "number", "boolean"].includes(typeof value)) return; if (Array.isArray(value)) return value.forEach(check); const proto = value && Object.getPrototypeOf(value); if (typeof value !== "object" || (proto !== Object.prototype && proto !== null)) throw new TypeError("IR must contain JSON data only"); for (const item of Object.values(value)) check(item); };
+  check(ir); return ir;
+}
+function typed(attrs) { const out = {}; for (const [key, value] of Object.entries(attrs)) out[toCamel(key)] = ["version", "refresh-seconds", "columns", "rows", "row-height", "column", "row", "column-span", "row-span", "page-size", "debounce-ms"].includes(key) ? Number(value) : (["optional", "default"].includes(key) ? value === "true" : value); return out; }
+const toCamel = (key) => key.replace(/-([a-z])/g, (_, x) => x.toUpperCase());
+export function buildIR(ast) {
+  const requirements = { components: new Set(), formats: new Set(), icons: new Set(), selectors: new Set() };
+  const convert = (node) => { const attrs = typed(node.attrs); if (attrs.format) { attrs.format = aliases[attrs.format] ?? attrs.format; requirements.formats.add(attrs.format); } if (node.name === "icon" || (node.name === "kpi-item" && attrs.icon)) requirements.icons.add(node.name === "icon" ? attrs.name : attrs.icon); if (["sort-toggle", "filter-toggle"].includes(node.name)) requirements.selectors.add(attrs.key); if (!new Set(["oven","grid","stack","panel","switch","case","collection","each","bind","text","icon","column","field-toolbar","mode-toggle","option","search","sort-toggle","filter-toggle","pagination"]).has(node.name)) requirements.components.add(node.name); return { kind: node.name, attributes: attrs, bindings: bindingMap(node), children: node.children.map(convert), source: { offset: node.span.offset, line: node.span.line, column: node.span.column } }; };
+  const root = ast.children.map(convert), nodes = []; const visit = (n) => { nodes.push(n); n.children.forEach(visit); }; root.forEach(visit);
+  const controls = nodes.filter((n) => ["mode-toggle","search","sort-toggle","filter-toggle","domain-tabs"].includes(n.kind)).map((n) => ({ kind: n.kind, id: n.attributes.id, ...n.attributes }));
+  const collections = nodes.filter((n) => n.kind === "collection").map((n) => ({ id: n.attributes.id, source: n.attributes.source, itemKey: n.attributes.itemKey, paging: n.attributes.paging, pageSize: n.attributes.pageSize }));
+  return deepFreeze(assertIR({ schema: "burnlist-oven-ir@1", id: ast.attrs.id, version: Number(ast.attrs.version), contract: ast.attrs.contract, theme: ast.attrs.theme, ...(ast.attrs["refresh-seconds"] ? { refreshSeconds: Number(ast.attrs["refresh-seconds"]) } : {}), root, controls, collections, requirements: Object.fromEntries(Object.entries(requirements).map(([k, v]) => [k, [...v].sort()])) }));
+}
+function bindingMap(node) { const out = {}; for (const child of node.children) if (child.name === "bind") out[child.attrs.prop] = { source: child.attrs.source, ...(child.attrs.format ? { format: aliases[child.attrs.format] ?? child.attrs.format } : {}), ...(child.attrs.optional ? { optional: child.attrs.optional === "true" } : {}), ...(child.attrs.fallback !== undefined ? { fallback: child.attrs.fallback } : {}) }; return out; }
diff --git a/src/ovens/dsl/oven-validate.mjs b/src/ovens/dsl/oven-validate.mjs
new file mode 100644
index 0000000..b7f7b5a
--- /dev/null
+++ b/src/ovens/dsl/oven-validate.mjs
@@ -0,0 +1,59 @@
+import { diagnostics } from "./oven-diagnostics.mjs";
+import { ELEMENTS, REGISTRY, REQUIRED_PROPS } from "./oven-grammar.mjs";
+
+const idRE = /^[a-z][a-z0-9-]{0,63}$/;
+const pointer = (value, itemOk) => value === "" || value === "/" || /^\/(?:[^~/]|~[01])*(?:\/(?:[^~/]|~[01])*)*$/.test(value) || (itemOk && /^@item(?:\/(?:[^~/]|~[01])*(?:\/(?:[^~/]|~[01])*)*)?$/.test(value));
+const controls = new Set(["mode-toggle", "search", "sort-toggle", "filter-toggle", "domain-tabs"]);
+const ints = new Set(["version", "refresh-seconds", "columns", "rows", "row-height", "column", "row", "column-span", "row-span", "page-size", "debounce-ms"]);
+
+function walk(node, fn, parent = null, itemScope = false, ancestors = []) { fn(node, parent, itemScope, ancestors); for (const child of node.children) walk(child, fn, node, itemScope || node.name === "each" || node.name === "column", [...ancestors, node]); }
+function add(d, code, msg, node, attr) { d.add(code, msg, { ...(attr ? node.attrSpans[attr] : node.span), path: node.path }); }
+
+export function validateOven(ast, { file = "<oven>" } = {}) {
+  const d = diagnostics(file), ids = new Map(), refs = [], collections = new Map();
+  if (!ast || ast.name !== "oven") add(d, "GRAMMAR_ROOT", "Root element must be <oven>", ast ?? {});
+  walk(ast, (node, parent, itemScope, ancestors) => {
+    const rule = ELEMENTS[node.name];
+    if (!rule) { add(d, "GRAMMAR_ELEMENT", `Unknown element <${node.name}>`, node); return; }
+    if (parent && !(ELEMENTS[parent.name]?.children ?? []).includes(node.name)) add(d, "GRAMMAR_CHILD", `<${node.name}> is not allowed inside <${parent.name}>`, node);
+    for (const key of Object.keys(node.attrs)) if (!rule.attrs.includes(key)) add(d, "GRAMMAR_ATTRIBUTE", `Attribute ${key} is not allowed on <${node.name}>`, node, key);
+    for (const required of requiredAttrs(node.name)) if (!(required in node.attrs)) add(d, "GRAMMAR_REQUIRED", `<${node.name}> requires ${required}`, node);
+    const a = node.attrs;
+    if (a.id !== undefined) { if (!idRE.test(a.id)) add(d, "SCALAR_ID", `Invalid id ${a.id}`, node, "id"); else if (ids.has(a.id)) add(d, "REFERENCE_ID", `Duplicate id ${a.id}`, node, "id"); else ids.set(a.id, node); }
+    for (const [key, value] of Object.entries(a)) {
+      if (ints.has(key) && (!/^\d+$/.test(value) || Number(value) < 1 || (key === "refresh-seconds" && Number(value) > 3600) || (key === "columns" && Number(value) > 24))) add(d, "SCALAR_INTEGER", `${key} must be a valid positive integer`, node, key);
+      if (["optional", "default"].includes(key) && !["true", "false"].includes(value)) add(d, "SCALAR_BOOLEAN", `${key} must be true or false`, node, key);
+      if (["source", "item-key", "requires-source", "initial-source"].includes(key) && !pointer(value, itemScope || node.name === "column")) add(d, "SCALAR_POINTER", `${key} must be an RFC 6901 pointer${itemScope || node.name === "column" ? " or @item pointer" : ""}`, node, key);
+      if (["title", "value", "done", "total", "percent"].includes(key) && value.startsWith("/") && !pointer(value, false)) add(d, "SCALAR_POINTER", `${key} must be an RFC 6901 pointer when it starts with /`, node, key);
+    }
+    if (a.source?.startsWith("@item") && !itemScope && node.name !== "column") add(d, "SCALAR_ITEM_SCOPE", "@item may only be used in an item scope", node, "source");
+    if (a.format && !REGISTRY.formats.has(a.format)) add(d, "REGISTRY_FORMAT", `Unknown format ${a.format}`, node, "format");
+    if (node.name === "icon" && !REGISTRY.icons.has(a.name)) add(d, "REGISTRY_ICON", `Unknown icon ${a.name}`, node, "name");
+    if (node.name === "kpi-item" && a.icon && !REGISTRY.icons.has(a.icon)) add(d, "REGISTRY_ICON", `Unknown icon ${a.icon}`, node, "icon");
+    if (node.name === "kpi-item" && a.variant && !["current", "scenario", "burns", "fields", "frames"].includes(a.variant)) add(d, "SCALAR_VARIANT", "kpi-item variant is not registered", node, "variant");
+    if (node.name === "oven") { if (!REGISTRY.themes.has(a.theme)) add(d, "REGISTRY_THEME", `Unknown theme ${a.theme}`, node, "theme"); if (!REGISTRY.contracts.has(a.contract)) add(d, "REGISTRY_CONTRACT", `Unknown contract ${a.contract}`, node, "contract"); if (a.version !== "1") add(d, "SCALAR_VERSION", "Only oven version 1 is supported", node, "version"); }
+    if (node.name === "box" && !["div", "section", "main", "span"].includes(a.element)) add(d, "SCALAR_ELEMENT", "box element must be div, section, main, or span", node, "element");
+    if (node.name === "sort-toggle" && !REGISTRY.sorts.has(a.key)) add(d, "REGISTRY_SORT", `Unknown sort ${a.key}`, node, "key");
+    if (node.name === "filter-toggle" && !REGISTRY.filters.has(a.key)) add(d, "REGISTRY_FILTER", `Unknown filter ${a.key}`, node, "key");
+    if (node.name === "collection") collections.set(a.id, node);
+    for (const key of ["mode-from", "search-from", "filter-from", "sort-from", "collection-from", "selection-from"]) if (a[key]) refs.push([node, key, a[key]]);
+    if (node.name === "text" && ((a.text === undefined) === (a.source === undefined))) add(d, "GRAMMAR_TEXT", "<text> requires exactly one of text or source", node);
+    if (node.name === "case" && ((a.value !== undefined) === (a.default === "true"))) add(d, "GRAMMAR_CASE", "<case> requires value or default=true", node);
+    if (node.name === "switch" && ((a.source !== undefined) === (a["mode-from"] !== undefined))) add(d, "GRAMMAR_SWITCH_SOURCE", "<switch> requires exactly one of source or mode-from", node);
+    if (node.name === "mode-toggle" && node.children.filter((x) => x.name === "option").length < 2) add(d, "STRUCTURE_OPTIONS", "<mode-toggle> requires at least two options", node);
+    if (controls.has(node.name) && ancestors.some((x) => x.name === "each")) add(d, "INTERACTION_EACH", "Controls are not allowed inside <each>", node);
+    if (node.name === "pagination" && !ancestors.some((x) => x.name === "collection")) add(d, "INTERACTION_PAGINATION", "<pagination> must be inside a collection", node);
+  });
+  for (const [node, key, value] of refs) {
+    const target = ids.get(value);
+    const kinds = { "mode-from": ["mode-toggle"], "search-from": ["search"], "filter-from": ["filter-toggle"], "sort-from": ["sort-toggle"], "collection-from": ["collection"], "selection-from": ["domain-tabs"] }[key];
+    if (!target || !kinds.includes(target.name)) add(d, "REFERENCE_TARGET", `${key} must name a ${kinds.join(" or ")}`, node, key);
+  }
+  gridChecks(ast, d); switchChecks(ast, d); propChecks(ast, d); interactionChecks(ast, d);
+  return { ok: d.list.length === 0, diagnostics: d.list, ids, collections };
+}
+function requiredAttrs(name) { return ({ oven: ["id", "version", "contract", "theme"], box: ["element"], grid: ["columns"], panel: ["id"], collection: ["id", "source", "item-key", "paging", "page-size"], bind: ["prop", "source"], icon: ["slot", "name"], column: ["label", "source"], "log-table": ["source"], "mode-toggle": ["id", "initial", "aria-label"], option: ["value", "label"], search: ["id", "placeholder", "aria-label", "match-fields"], "sort-toggle": ["id", "key", "label", "initial"], "filter-toggle": ["id", "key", "label", "initial"], pagination: ["collection-from", "page-sizes"], "field-toolbar": ["id"] })[name] ?? []; }
+function gridChecks(ast, d) { walk(ast, (grid) => { if (grid.name !== "grid") return; const cols = +grid.attrs.columns, rows = +(grid.attrs.rows ?? 0), boxes = []; for (const panel of grid.children.filter((x) => x.name === "panel" && x.attrs.column)) { const x = +panel.attrs.column, y = +panel.attrs.row, w = +(panel.attrs["column-span"] ?? 1), h = +(panel.attrs["row-span"] ?? 1); if (x + w - 1 > cols || (rows && y + h - 1 > rows)) add(d, "STRUCTURE_GRID_BOUNDS", "Panel is outside grid bounds", panel); for (const b of boxes) if (x <= b.x + b.w - 1 && b.x <= x + w - 1 && y <= b.y + b.h - 1 && b.y <= y + h - 1) add(d, "STRUCTURE_GRID_OVERLAP", "Panels overlap", panel); boxes.push({ x, y, w, h }); } }); }
+function switchChecks(ast, d) { walk(ast, (node) => { if (node.name !== "switch") return; const cases = node.children.filter((x) => x.name === "case"), values = new Set(), defaults = cases.filter((x) => x.attrs.default === "true"); if (!cases.length) add(d, "STRUCTURE_SWITCH", "Switch requires a case", node); if (defaults.length > 1) add(d, "STRUCTURE_SWITCH", "Switch may have only one default", node); for (const c of cases) { if (c.attrs.value && values.has(c.attrs.value)) add(d, "STRUCTURE_SWITCH", "Switch case values must be unique", c); values.add(c.attrs.value); } }); }
+function propChecks(ast, d) { walk(ast, (node) => { const required = REQUIRED_PROPS[node.name]; if (!required) return; const bound = node.children.filter((x) => x.name === "bind").map((x) => x.attrs.prop); for (const prop of required) if (bound.filter((x) => x === prop).length !== 1) add(d, "PROPS_REQUIRED", `<${node.name}> requires exactly one bind for ${prop}`, node); }); }
+function interactionChecks(ast, d) { walk(ast, (node) => { if (node.name === "collection" && !["client", "server", "auto"].includes(node.attrs.paging)) add(d, "INTERACTION_PAGING", "paging must be client, server, or auto", node, "paging"); if (node.name === "pagination" && (typeof node.attrs["page-sizes"] !== "string" || !node.attrs["page-sizes"].split(" ").every((x) => /^\d+$/.test(x) && +x > 0))) add(d, "INTERACTION_PAGE_SIZES", "page-sizes must be positive integers", node, "page-sizes"); }); }
diff --git a/src/ovens/dsl/oven-validate.test.mjs b/src/ovens/dsl/oven-validate.test.mjs
new file mode 100644
index 0000000..7077991
--- /dev/null
+++ b/src/ovens/dsl/oven-validate.test.mjs
@@ -0,0 +1,41 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { compileOven } from "./oven-compile.mjs";
+
+const invalid = (xml, code) => { const r = compileOven(xml); assert.equal(r.ok, false); assert.ok(r.diagnostics.some((x) => x.code === code), JSON.stringify(r.diagnostics)); };
+const root = (body, attrs = "") => `<oven id="test" version="1" contract="checklist-progress@1" theme="checklist" ${attrs}>${body}</oven>`;
+test("vocabulary, scalar, registry and references are closed", () => {
+  invalid(root("<unknown/>"), "GRAMMAR_ELEMENT");
+  invalid(root("<grid columns='2' nope='x'/>"), "GRAMMAR_ATTRIBUTE");
+  invalid(root("<grid id='Bad' columns='2'/>"), "SCALAR_ID");
+  invalid(root("<log-table source='bad'><column label='x' source='/'/></log-table>"), "SCALAR_POINTER");
+  invalid(root("<switch mode-from='missing'><case value='x'/></switch>"), "REFERENCE_TARGET");
+  invalid(root("<kpi-item source='/' format='nope'/>"), "REGISTRY_FORMAT");
+  invalid(root("<kpi-item><icon slot='visual' name='Nope'/></kpi-item>"), "REGISTRY_ICON");
+  invalid(root("<field-toolbar id='tools'><filter-toggle id='f' key='nope' label='x' initial='on'/></field-toolbar>"), "REGISTRY_FILTER");
+  invalid(root("<field-toolbar id='tools'><sort-toggle id='s' key='nope' label='x' initial='on'/></field-toolbar>"), "REGISTRY_SORT");
+  invalid('<oven id="test" version="1" contract="checklist-progress@1" theme="wrong"/>', "REGISTRY_THEME");
+});
+test("structure and interaction validation", () => {
+  invalid(root("<grid columns='2' rows='2'><panel id='a' column='1' row='1' column-span='2' row-span='2'/><panel id='b' column='2' row='1'/></grid>"), "STRUCTURE_GRID_OVERLAP");
+  invalid(root("<grid columns='2' rows='2'><panel id='a' column='2' row='2' column-span='2'/></grid>"), "STRUCTURE_GRID_BOUNDS");
+  invalid(root("<switch mode-from='m'/><mode-toggle id='m' initial='a' aria-label='m'><option value='a' label='a'/><option value='b' label='b'/></mode-toggle>"), "STRUCTURE_SWITCH");
+  invalid(root("<mode-toggle id='m' initial='a' aria-label='m'><option value='a' label='a'/><option value='b' label='b'/></mode-toggle><switch mode-from='m'><case default='true'/><case default='true'/></switch>"), "STRUCTURE_SWITCH");
+  invalid(root("<collection id='rows' source='/' item-key='/id' paging='client' page-size='1'><each><mode-toggle id='m' initial='a' aria-label='m'><option value='a' label='a'/><option value='b' label='b'/></mode-toggle></each></collection>"), "INTERACTION_EACH");
+  invalid(root("<switch><case value='a'/></switch>"), "GRAMMAR_SWITCH_SOURCE");
+  invalid(root("<mode-toggle id='m' initial='a' aria-label='m'><option value='a' label='a'/><option value='b' label='b'/></mode-toggle><switch source='/' mode-from='m'><case value='a'/></switch>"), "GRAMMAR_SWITCH_SOURCE");
+});
+
+test("switch accepts a payload pointer without a control reference", () => {
+  const result = compileOven(root("<switch source='/pageMode'><case value='detail'><section-header title='Fields'/></case></switch>"));
+  assert.equal(result.ok, true, JSON.stringify(result.diagnostics));
+  assert.equal(result.ir.root[0].attributes.source, "/pageMode");
+});
+
+test("pagination without page-sizes returns a required-attribute diagnostic", () => {
+  const xml = root("<collection id='rows' source='/' item-key='/id' paging='client' page-size='1'><pagination collection-from='rows'/></collection>");
+  let result;
+  assert.doesNotThrow(() => { result = compileOven(xml); });
+  assert.equal(result.ok, false);
+  assert.ok(result.diagnostics.some((x) => x.code === "GRAMMAR_REQUIRED"), JSON.stringify(result.diagnostics));
+});
diff --git a/src/ovens/dsl/xml-scan.mjs b/src/ovens/dsl/xml-scan.mjs
new file mode 100644
index 0000000..9fab7f0
--- /dev/null
+++ b/src/ovens/dsl/xml-scan.mjs
@@ -0,0 +1,84 @@
+import { diagnostics, nodePath } from "./oven-diagnostics.mjs";
+
+export const XML_LIMITS = Object.freeze({ bytes: 256 * 1024, depth: 64, nodes: 2000, attrs: 64, scalar: 8192 });
+const entity = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'" };
+
+function point(s, i) { return { offset: Buffer.byteLength(s.slice(0, i)), line: s.slice(0, i).split("\n").length, column: i - s.lastIndexOf("\n", i - 1) }; }
+function decode(raw, fail, pos) {
+  return raw.replace(/&([^;]*);/g, (whole, name) => {
+    if (Object.hasOwn(entity, name)) return entity[name];
+    fail("XML_ENTITY", `Only predefined XML entities are allowed (${whole})`, pos);
+    return "";
+  });
+}
+function nameOk(name) { return /^[A-Za-z_][A-Za-z0-9_.:-]*$/.test(name); }
+
+/** Strict, deliberately small XML scanner. It accepts only element trees plus comments. */
+export function scanXml(input, { file = "<oven>", limits = XML_LIMITS } = {}) {
+  const d = diagnostics(file);
+  const warnings = [];
+  let source;
+  if (Buffer.isBuffer(input) || input instanceof Uint8Array) {
+    const decoder = new TextDecoder("utf-8", { fatal: true });
+    try { source = decoder.decode(input); } catch { d.add("XML_UTF8", "Input is not valid UTF-8"); return { ok: false, diagnostics: d.list }; }
+  } else source = String(input);
+  const bytes = Buffer.byteLength(source);
+  if (bytes > limits.bytes) d.add("XML_LIMIT", `File exceeds ${limits.bytes} byte limit`);
+  if (source.includes("\0")) d.add("XML_NUL", "NUL is not allowed");
+  let i = 0, root = null, count = 0, fatal = false;
+  const stack = [], extensionPrefixes = new Set();
+  const fail = (code, message, at = i) => { d.add(code, message, { ...point(source, at), path: stack.length ? nodePath(stack.at(-1)) : "" }); fatal = true; };
+  const ws = () => { while (/\s/.test(source[i] ?? "")) i++; };
+  const readName = () => { const start = i; while (/[A-Za-z0-9_.:-]/.test(source[i] ?? "")) i++; return source.slice(start, i); };
+  while (i < source.length) {
+    if (/\s/.test(source[i])) { i++; continue; }
+    if (source.startsWith("<!--", i)) { const end = source.indexOf("-->", i + 4); if (end < 0) { fail("XML_COMMENT", "Unterminated comment"); break; } i = end + 3; continue; }
+    if (source[i] !== "<") { fail("XML_TEXT", "Mixed or free text is not allowed"); while (i < source.length && source[i] !== "<") i++; continue; }
+    if (/^<(?:!DOCTYPE|!ENTITY|\? |\?|!\[CDATA\[)/i.test(source.slice(i))) { fail("XML_FORBIDDEN", "DOCTYPE, entities, processing instructions, and CDATA are not allowed"); const end = source.indexOf(">", i + 1); i = end < 0 ? source.length : end + 1; continue; }
+    const start = i++;
+    if (source[i] === "/") {
+      i++; const name = readName(); ws();
+      if (source[i++] !== ">") fail("XML_END_TAG", "Malformed end tag", start);
+      const open = stack.pop();
+      if (!open || open.name !== name) fail("XML_MISMATCH", `End tag </${name}> does not match`, start);
+      continue;
+    }
+    const name = readName();
+    if (!name || !nameOk(name)) { fail("XML_NAME", "Invalid element name", start); i++; continue; }
+    const attrs = Object.create(null), attrSpans = Object.create(null); let selfClosing = false, attrCount = 0;
+    while (i < source.length) {
+      ws(); if (source.startsWith("/>", i)) { i += 2; selfClosing = true; break; }
+      if (source[i] === ">") { i++; break; }
+      const at = i, key = readName();
+      if (!key || !nameOk(key)) { fail("XML_ATTRIBUTE", "Invalid attribute name", at); i++; continue; }
+      if (Object.hasOwn(attrs, key)) fail("XML_DUPLICATE_ATTRIBUTE", `Duplicate attribute ${key}`, at);
+      ws(); if (source[i++] !== "=") { fail("XML_ATTRIBUTE", `Expected = after ${key}`, at); continue; } ws();
+      const quote = source[i++]; if (quote !== '"' && quote !== "'") { fail("XML_ATTRIBUTE", "Attributes must be quoted", at); continue; }
+      const valueStart = i; while (i < source.length && source[i] !== quote) { if (source[i] === "<") fail("XML_ATTRIBUTE", "< is not allowed in attribute values", i); i++; }
+      if (i >= source.length) { fail("XML_ATTRIBUTE", "Unterminated attribute value", at); break; }
+      const raw = source.slice(valueStart, i++); if (raw.length > limits.scalar) fail("XML_LIMIT", "Attribute value exceeds scalar limit", at);
+      const value = decode(raw, fail, at);
+      if (key.startsWith("xmlns:")) {
+        if (!value.startsWith("urn:burnlist:oven:extension:")) fail("XML_NAMESPACE", "Only oven extension namespaces are allowed", at);
+        else extensionPrefixes.add(key.slice(6));
+      } else if (key.includes(":")) fail("XML_NAMESPACE", "Namespaced attributes are not allowed", at);
+      else { attrs[key] = value; attrSpans[key] = point(source, at); }
+      if (++attrCount > limits.attrs) fail("XML_LIMIT", "Too many attributes", at);
+    }
+    if (++count > limits.nodes) fail("XML_LIMIT", "Too many nodes", start);
+    const prefix = name.includes(":") ? name.split(":", 1)[0] : "";
+    const extension = prefix && extensionPrefixes.has(prefix);
+    if (prefix && !extension) fail("XML_NAMESPACE", "Namespaces are not allowed except optional extension subtrees", start);
+    if (extension && attrs.optional !== "true") fail("XML_EXTENSION", "Extension subtrees must be optional=true", start);
+    const node = { name, attrs, attrSpans, children: [], span: point(source, start), parent: stack.at(-1), ignored: extension || stack.at(-1)?.ignored };
+    node.path = nodePath(node);
+    if (!node.ignored) { if (stack.length) stack.at(-1).children.push(node); else if (root) fail("XML_TRAILING", "Only one root element is allowed", start); else root = node; }
+    if (extension) warnings.push({ code: "XML_EXTENSION_IGNORED", message: `Ignored optional extension subtree <${name}>`, file, line: node.span.line, column: node.span.column, path: node.path });
+    if (!selfClosing) { stack.push(node); if (stack.length > limits.depth) fail("XML_LIMIT", "Maximum nesting depth exceeded", start); }
+  }
+  if (stack.length) fail("XML_UNCLOSED", `Unclosed element <${stack.at(-1).name}>`, source.length);
+  if (!root) fail("XML_ROOT", "Document requires a root element");
+  const strip = (node) => { if (!node) return; delete node.parent; delete node.ignored; for (const child of node.children) strip(child); };
+  strip(root);
+  return d.list.length || fatal ? { ok: false, diagnostics: d.list, ast: root, warnings } : { ok: true, ast: root, diagnostics: [], warnings };
+}
diff --git a/src/ovens/dsl/xml-scan.test.mjs b/src/ovens/dsl/xml-scan.test.mjs
new file mode 100644
index 0000000..3bead49
--- /dev/null
+++ b/src/ovens/dsl/xml-scan.test.mjs
@@ -0,0 +1,29 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { scanXml } from "./xml-scan.mjs";
+
+const bad = (text, options) => { const result = scanXml(text, options); assert.equal(result.ok, false, text); assert.ok(result.diagnostics.length); };
+test("parser security matrix rejects hostile and malformed XML", () => {
+  for (const text of ["<oven>", "<!DOCTYPE oven><oven/>", "<!ENTITY x 'y'><oven/>", "<!DOCTYPE x [<!ENTITY % p SYSTEM 'x'>]><oven/>", "<![CDATA[x]]><oven/>", "<?xml version='1.0'?><oven/>", "<oven a='1' a='2'/>", "<oven>text</oven>", "<oven><x></oven>", "<oven/> trailing", "<x:y/>", "<oven xmlns:x='urn:x'/>"]) bad(text);
+});
+test("scanner enforces limits and never throws", () => {
+  bad(`<oven a="${"x".repeat(20)}"/>`, { limits: { bytes: 1000, depth: 4, nodes: 5, attrs: 5, scalar: 5 } });
+  bad("<a><b><c/></b></a>", { limits: { bytes: 1000, depth: 1, nodes: 10, attrs: 5, scalar: 10 } });
+  bad("<a><b/><c/><d/></a>", { limits: { bytes: 1000, depth: 5, nodes: 2, attrs: 5, scalar: 10 } });
+  bad("<a x='1' y='2'/>", { limits: { bytes: 1000, depth: 5, nodes: 5, attrs: 1, scalar: 10 } });
+  bad(Buffer.from([0xc3, 0x28]));
+  bad("<oven>\0</oven>");
+});
+test("scanner decodes only predefined entities and returns source spans", () => {
+  const result = scanXml("<oven title='a &amp; b &quot;c&quot;'/>");
+  assert.equal(result.ok, true);
+  assert.equal(result.ast.attrs.title, 'a & b "c"');
+  assert.deepEqual(result.ast.span, { offset: 0, line: 1, column: 1 });
+  bad("<oven title='&copy;' />");
+});
+test("optional extension namespaces are ignored with a warning", () => {
+  const result = scanXml("<oven xmlns:x='urn:burnlist:oven:extension:test'><x:meta optional='true'><bad/></x:meta></oven>");
+  assert.equal(result.ok, true);
+  assert.equal(result.ast.children.length, 0);
+  assert.equal(result.warnings[0].code, "XML_EXTENSION_IGNORED");
+});
diff --git a/src/ovens/oven-contract.mjs b/src/ovens/oven-contract.mjs
index 9174476..353f33c 100644
--- a/src/ovens/oven-contract.mjs
+++ b/src/ovens/oven-contract.mjs
@@ -1,4 +1,5 @@
 import { createHash } from "node:crypto";
+import { compileOven } from "./dsl/oven-compile.mjs";
 
 const ovenWidgets = new Set([
   "metric",
@@ -107,17 +108,21 @@ export function normalizeOvenDetail(value) {
 }
 
 export function normalizeOvenPackage(value) {
-  assertKnownKeys(value, new Set(["id", "instructions", "detail"]), "Oven package");
+  assertKnownKeys(value, new Set(["id", "instructions", "oven"]), "Oven package");
   const id = ovenId(value.id);
   const instructions = boundedText(value.instructions, `Oven ${id} instructions`, 65536);
   if (!/^#\s+\S/mu.test(instructions)) {
     throw new Error(`Oven ${id} instructions must contain a level-one heading.`);
   }
-  return {
-    id,
-    instructions,
-    detail: normalizeOvenDetail(value.detail),
-  };
+  const oven = String(value.oven);
+  const compiled = compileOven(oven);
+  if (!compiled.ok) {
+    throw new Error(`Oven ${id} .oven source is invalid: ${compiled.diagnostics[0].message}`);
+  }
+  if (compiled.ir.id !== id) {
+    throw new Error(`Oven ${id} .oven root id "${compiled.ir.id}" must match the package id.`);
+  }
+  return { id, instructions, oven };
 }
 
 function canonicalJson(value) {
@@ -128,9 +133,21 @@ function canonicalJson(value) {
   return JSON.stringify(value);
 }
 
-// Callers pass an Oven package whose instructions and detail have already been
+// Callers pass an Oven package whose instructions and source have already been
 // normalized by normalizeOvenPackage. Only its portable content defines this id.
 export function ovenRevision(pkg) {
+  const instructions = String(pkg.instructions ?? "").replace(/\r\n?/gu, "\n");
+  const oven = String(pkg.oven ?? "").replace(/\r\n?/gu, "\n");
+  const contents = canonicalJson({
+    format: "burnlist-oven-content@2",
+    id: pkg.id,
+    instructions,
+    oven,
+  });
+  return `o1-sha256:${createHash("sha256").update(contents).digest("hex")}`;
+}
+
+export function legacyOvenRevision(pkg) {
   const instructions = String(pkg.instructions ?? "").replace(/\r\n?/gu, "\n");
   const contents = canonicalJson({
     format: "burnlist-oven-content@1",
diff --git a/src/ovens/oven-contract.test.mjs b/src/ovens/oven-contract.test.mjs
index a6c5435..a811c3c 100644
--- a/src/ovens/oven-contract.test.mjs
+++ b/src/ovens/oven-contract.test.mjs
@@ -1,29 +1,38 @@
 import assert from "node:assert/strict";
 import test from "node:test";
-import { normalizeOvenPackage, ovenRevision } from "./oven-contract.mjs";
+import {
+  legacyOvenRevision,
+  normalizeOvenDetail,
+  normalizeOvenPackage,
+  ovenRevision,
+} from "./oven-contract.mjs";
 
 function packageFixture(id = "sample-oven") {
   return {
     id,
     instructions: "# Sample Oven\n\nFollow the checklist.\n",
-    detail: {
-      version: 1,
-      columns: 2,
-      rows: 2,
-      rowHeight: 48,
-      cells: [{
-        id: "summary",
-        title: "Summary",
-        description: "Current status.",
-        widget: "metric",
-        source: "/summary",
-        format: "plain",
-        column: 1,
-        row: 1,
-        columnSpan: 2,
-        rowSpan: 1,
-      }],
-    },
+    oven: `<oven id="${id}" version="1" contract="checklist-progress@1" theme="checklist">\n  <section-header title="Sample Oven"/>\n</oven>\n`,
+  };
+}
+
+function detailFixture() {
+  return {
+    version: 1,
+    columns: 2,
+    rows: 2,
+    rowHeight: 48,
+    cells: [{
+      id: "summary",
+      title: "Summary",
+      description: "Current status.",
+      widget: "metric",
+      source: "/summary",
+      format: "plain",
+      column: 1,
+      row: 1,
+      columnSpan: 2,
+      rowSpan: 1,
+    }],
   };
 }
 
@@ -31,36 +40,46 @@ function normalizedFixture(id) {
   return normalizeOvenPackage(packageFixture(id));
 }
 
-test("unmodified-fork-shares-revision", () => {
-  assert.equal(ovenRevision(normalizedFixture("original-oven")), ovenRevision(normalizedFixture("forked-oven")));
+test("normalizeOvenDetail retains legacy detail validation", () => {
+  assert.deepEqual(normalizeOvenDetail(detailFixture()), detailFixture());
+});
+
+test("id-is-part-of-revision", () => {
+  assert.notEqual(ovenRevision(normalizedFixture("original-oven")), ovenRevision(normalizedFixture("forked-oven")));
+});
+
+test("normalizeOvenPackage rejects a root id that differs from the package id", () => {
+  assert.throws(
+    () => normalizeOvenPackage({ ...packageFixture("other-oven"), oven: packageFixture("sample-oven").oven }),
+    /Oven other-oven .oven root id "sample-oven" must match the package id\./u,
+  );
 });
 
 test("content-change-changes-revision", () => {
   const original = normalizedFixture("sample-oven");
   const changedInstructions = { ...original, instructions: "# Sample Oven\n\nUse the revised checklist." };
-  const changedTitle = {
+  const changedOven = {
     ...original,
-    detail: { ...original.detail, cells: [{ ...original.detail.cells[0], title: "Revised summary" }] },
+    oven: original.oven.replace("Sample Oven", "Revised Oven"),
   };
-  const changedVersion = { ...original, detail: { ...original.detail, version: 2 } };
   const revision = ovenRevision(original);
   assert.notEqual(ovenRevision(changedInstructions), revision);
-  assert.notEqual(ovenRevision(changedTitle), revision);
-  assert.notEqual(ovenRevision(changedVersion), revision);
+  assert.notEqual(ovenRevision(changedOven), revision);
 });
 
 test("key-order-invariant", () => {
   const original = normalizedFixture("sample-oven");
   const reordered = {
-    id: "other-oven",
+    oven: original.oven.replaceAll("\n", "\r\n"),
     instructions: original.instructions.replaceAll("\n", "\r\n"),
-    detail: {
-      cells: original.detail.cells.map((cell) => ({ rowSpan: cell.rowSpan, title: cell.title, id: cell.id, ...cell })),
-      rowHeight: original.detail.rowHeight,
-      rows: original.detail.rows,
-      columns: original.detail.columns,
-      version: original.detail.version,
-    },
+    id: original.id,
   };
   assert.equal(ovenRevision(original), ovenRevision(reordered));
 });
+
+test("legacyOvenRevision reproduces the old detail-based revision", () => {
+  assert.equal(
+    legacyOvenRevision({ instructions: packageFixture().instructions, detail: detailFixture() }),
+    "o1-sha256:c2c96959e1dd7b5ae37893db09adef9f778a2f09fb4ea85af92bdc51964d0067",
+  );
+});
diff --git a/src/ovens/oven-starter.mjs b/src/ovens/oven-starter.mjs
new file mode 100644
index 0000000..49823bc
--- /dev/null
+++ b/src/ovens/oven-starter.mjs
@@ -0,0 +1,14 @@
+function escapeXmlAttribute(value) {
+  return String(value)
+    .replace(/&/gu, "&amp;")
+    .replace(/"/gu, "&quot;")
+    .replace(/</gu, "&lt;")
+    .replace(/>/gu, "&gt;");
+}
+
+export function starterOvenSource(id, name) {
+  return `<oven id="${escapeXmlAttribute(id)}" version="1" contract="checklist-progress@1" theme="checklist">
+  <section-header title="${escapeXmlAttribute(name)}"/>
+</oven>
+`;
+}
diff --git a/src/server/burnlist-dashboard-server.mjs b/src/server/burnlist-dashboard-server.mjs
index 93fd77a..887cac1 100644
--- a/src/server/burnlist-dashboard-server.mjs
+++ b/src/server/burnlist-dashboard-server.mjs
@@ -24,12 +24,15 @@ import { assertGitIgnored } from "../cli/git-ignore.mjs";
 import {
   assertKnownKeys,
   boundedText,
+  legacyOvenRevision,
   normalizeOvenDetail,
   normalizeOvenForkedFrom,
   normalizeOvenPackage,
   ovenId,
   ovenRevision,
 } from "../ovens/oven-contract.mjs";
+import { compileOven } from "../ovens/dsl/oven-compile.mjs";
+import { starterOvenSource } from "../ovens/oven-starter.mjs";
 import "../ovens/built-in-handlers.mjs";
 import { getOvenHandler, listOvenHandlers } from "../ovens/oven-registry.mjs";
 import { genericJsonHandler } from "../ovens/handlers/generic-json-handler.mjs";
@@ -40,9 +43,9 @@ import { atomicDirectory, atomicOvenPackage, readTextFileWithLimit, resolveOvenP
 import {
   assertCustomOvensDir,
   assertCustomOvenPath,
-  OVEN_DETAIL_MAX_BYTES,
   OVEN_INSTRUCTIONS_MAX_BYTES,
   OVEN_LINEAGE_MAX_BYTES,
+  OVEN_SOURCE_MAX_BYTES,
   resolveCustomOvensDir,
   serializeOvenPackage,
 } from "./oven-storage.mjs";
@@ -140,7 +143,8 @@ const repoMapCache = new Map();
 const ovenHandlerCaches = new Map();
 const REPO_MAP_CACHE_MS = 2_000;
 const RUN_SNAPSHOT_INSTRUCTIONS_MAX_BYTES = 262144;
-const RUN_SNAPSHOT_DETAIL_MAX_BYTES = 393216;
+const RUN_SNAPSHOT_SOURCE_MAX_BYTES = 393216;
+const RUN_SNAPSHOT_DETAIL_MAX_BYTES = RUN_SNAPSHOT_SOURCE_MAX_BYTES;
 
 function cachedRepoMap(repo) {
   const key = repo.root;
@@ -299,13 +303,53 @@ function discoverBurnlists() {
 
 function dashboardEntries(ovenDataBindings) {
   return isolatedDashboardEntries({
-    handlers: listOvenHandlers(),
+    handlers: [...listOvenHandlers(), { id: "custom-oven", dashboardEntries: customOvenDashboardEntries }],
     contextForHandler: (handler) => ovenHandlerContext({ id: handler.id, oven: { id: handler.id }, ovenDataBindings }),
     repoKeyForRoot: (root) => repoKey(realpathSync(root)),
     blockedEntry: blockedDashboardEntry,
   });
 }
 
+function customOvenDashboardEntries(ctx) {
+  const repos = ovenScopeRepos();
+  const entries = [];
+  for (const oven of discoverOvens().filter((candidate) => !candidate.builtIn)) {
+    try {
+      const bindings = ctx.ovenDataBindings.get(oven.id) ?? [];
+      const binding = bindings.find((candidate) => candidate.repoKey === oven.repoKey)
+        ?? bindings.find((candidate) => candidate.repoKey === null);
+      if (!binding) continue;
+      const repo = repos.find((candidate) => candidate.repoKey === oven.repoKey);
+      entries.push({
+        id: oven.id,
+        repo: repo?.name ?? oven.id,
+        repoKey: oven.repoKey,
+        repoRoot: oven.repoRoot,
+        planPath: null,
+        planLabel: null,
+        title: oven.name,
+        status: "active",
+        statusLabel: "Oven",
+        total: 0,
+        done: null,
+        remaining: null,
+        percent: null,
+        errors: 0,
+        warnings: 0,
+        lastCompletedAt: null,
+        updatedAt: null,
+        ovenId: oven.id,
+        ovenName: oven.name,
+        href: `/ovens/${encodeURIComponent(oven.id)}/view?repoKey=${encodeURIComponent(oven.repoKey)}`,
+        progressLabel: "Custom Oven",
+      });
+    } catch {
+      // A malformed custom Oven must not hide the rest of the dashboard index.
+    }
+  }
+  return entries;
+}
+
 function blockedDashboardEntry(handler, error) {
   const blockers = String(error?.message ?? error ?? "Oven dashboard data is unavailable.").slice(0, 200);
   return {
@@ -411,12 +455,12 @@ function readOven(root, id, builtIn, customRepoRoot = umbrellaRoot) {
   }
   try {
     const instructionsPath = join(ovenRoot, "instructions.md");
-    const detailPath = join(ovenRoot, "detail.json");
-    if (!safeStat(instructionsPath)?.isFile() || !safeStat(detailPath)?.isFile()) return null;
+    const ovenPath = join(ovenRoot, `${safeId}.oven`);
+    if (!safeStat(instructionsPath)?.isFile() || !safeStat(ovenPath)?.isFile()) return null;
     const ovenPackage = normalizeOvenPackage({
       id: safeId,
       instructions: readTextFileWithLimit(instructionsPath, OVEN_INSTRUCTIONS_MAX_BYTES, "Oven instructions"),
-      detail: JSON.parse(readTextFileWithLimit(detailPath, OVEN_DETAIL_MAX_BYTES, "Oven detail template")),
+      oven: readTextFileWithLimit(ovenPath, OVEN_SOURCE_MAX_BYTES, "Oven source"),
     });
     const lineagePath = join(ovenRoot, "oven.json");
     let forkedFrom;
@@ -435,7 +479,8 @@ function readOven(root, id, builtIn, customRepoRoot = umbrellaRoot) {
       description: instructionsDescription(ovenPackage.instructions),
       builtIn,
       instructions: ovenPackage.instructions,
-      detail: ovenPackage.detail,
+      oven: ovenPackage.oven,
+      ir: compileOven(ovenPackage.oven).ir,
       ovenRevision: ovenRevision(ovenPackage),
       ...(forkedFrom ? { forkedFrom } : {}),
     };
@@ -511,16 +556,11 @@ function ovenSummary(oven) {
     repoKey: oven.repoKey,
     ovenRevision: oven.ovenRevision,
     ...(oven.forkedFrom ? { forkedFrom: oven.forkedFrom } : {}),
-    detail: {
-      columns: oven.detail.columns,
-      rows: oven.detail.rows,
-      sections: oven.detail.cells.length,
-    },
   };
 }
 
 function assertOvenInput(value) {
-  assertKnownKeys(value, new Set(["id", "name", "instructions", "detail"]), "Oven");
+  assertKnownKeys(value, new Set(["id", "name", "instructions"]), "Oven");
 }
 
 function createOven(value) {
@@ -547,8 +587,8 @@ function createOven(value) {
   if (titleLine === -1) instructionLines.unshift(`# ${name}`, "");
   else instructionLines[titleLine] = `# ${name}`;
   instructions = instructionLines.join("\n");
-  const detail = normalizeOvenDetail(ovenValue.detail);
-  const ovenPackage = normalizeOvenPackage({ id, instructions, detail });
+  const oven = starterOvenSource(id, name);
+  const ovenPackage = normalizeOvenPackage({ id, instructions, oven });
   const files = serializeOvenPackage(ovenPackage);
   assertCustomOvenPath(repo.root, customOvensDir, id, { unsafe: unsafeOvensDir });
   assertGitIgnored(repo.root, customOvensDir);
@@ -630,7 +670,7 @@ function createBurnRun(value) {
   const id = runId();
   const createdAt = new Date().toISOString();
   const record = {
-    schemaVersion: 4,
+    schemaVersion: 5,
     id,
     ovenId: selectedOvenId,
     ovenRepoKey: selectedOvenRepoKey,
@@ -646,13 +686,13 @@ function createBurnRun(value) {
     sections: [],
   };
   const instructionsSnapshot = `${oven.instructions.trim()}\n`;
-  const detailSnapshot = `${JSON.stringify(oven.detail, null, 2)}\n`;
+  const sourceSnapshot = oven.oven;
   assertSnapshotSize(instructionsSnapshot, RUN_SNAPSHOT_INSTRUCTIONS_MAX_BYTES, "Run Oven instructions");
-  assertSnapshotSize(detailSnapshot, RUN_SNAPSHOT_DETAIL_MAX_BYTES, "Run Oven detail template");
+  assertSnapshotSize(sourceSnapshot, RUN_SNAPSHOT_SOURCE_MAX_BYTES, "Run Oven source");
   const files = {
     "run.json": `${JSON.stringify(record, null, 2)}\n`,
     "instructions.md": instructionsSnapshot,
-    "detail.json": detailSnapshot,
+    [`${oven.id}.oven`]: sourceSnapshot,
   };
   const path = withRepoStateLock(repo.root, () => {
     if (legacyRunsDir) return atomicDirectory(legacyRunsDir, id, files);
@@ -689,20 +729,47 @@ function readBurnRun(id) {
       "sections",
     ]), "Burn run");
     ovenId(record.ovenId);
-    if (![3, 4].includes(record.schemaVersion)) {
-      throw new Error("Burn run schemaVersion must be 3 or 4.");
+    if (![3, 4, 5].includes(record.schemaVersion)) {
+      throw new Error("Burn run schemaVersion must be 3, 4, or 5.");
     }
     const runRoot = dirname(path);
-    const ovenPackage = normalizeOvenPackage({
-      id: record.ovenId,
-      instructions: readTextFileWithLimit(join(runRoot, "instructions.md"), RUN_SNAPSHOT_INSTRUCTIONS_MAX_BYTES, "Run Oven instructions"),
-      detail: JSON.parse(readTextFileWithLimit(join(runRoot, "detail.json"), RUN_SNAPSHOT_DETAIL_MAX_BYTES, "Run Oven detail template")),
-    });
-    const snapshotRevision = ovenRevision(ovenPackage);
-    if (record.schemaVersion === 4) {
+    const instructions = readTextFileWithLimit(
+      join(runRoot, "instructions.md"),
+      RUN_SNAPSHOT_INSTRUCTIONS_MAX_BYTES,
+      "Run Oven instructions",
+    );
+    if (record.schemaVersion >= 4) {
       if (Object.hasOwn(record, "ovenRepoKey") && record.ovenRepoKey !== null && typeof record.ovenRepoKey !== "string") {
         throw new Error("Burn run ovenRepoKey must be null or a repository key.");
       }
+    }
+    if (record.schemaVersion === 5) {
+      const ovenPackage = normalizeOvenPackage({
+        id: record.ovenId,
+        instructions,
+        oven: readTextFileWithLimit(
+          join(runRoot, `${record.ovenId}.oven`),
+          RUN_SNAPSHOT_SOURCE_MAX_BYTES,
+          "Run Oven source",
+        ),
+      });
+      const snapshotRevision = ovenRevision(ovenPackage);
+      const ovenRevisionValue = boundedText(record.ovenRevision, "Burn run ovenRevision", 74);
+      if (!/^o1-sha256:[a-f0-9]{64}$/u.test(ovenRevisionValue)) {
+        throw new Error("Burn run ovenRevision must be an o1-sha256 digest.");
+      }
+      if (ovenRevisionValue !== snapshotRevision) {
+        throw new Error(`Burn run ${safeId} revision does not match its snapshot.`);
+      }
+      return record;
+    }
+    const detail = normalizeOvenDetail(JSON.parse(readTextFileWithLimit(
+      join(runRoot, "detail.json"),
+      RUN_SNAPSHOT_DETAIL_MAX_BYTES,
+      "Run Oven detail template",
+    )));
+    const snapshotRevision = legacyOvenRevision({ instructions, detail });
+    if (record.schemaVersion === 4) {
       const ovenRevisionValue = boundedText(record.ovenRevision, "Burn run ovenRevision", 74);
       if (!/^o1-sha256:[a-f0-9]{64}$/u.test(ovenRevisionValue)) {
         throw new Error("Burn run ovenRevision must be an o1-sha256 digest.");
@@ -1085,7 +1152,7 @@ const server = createServer(async (req, res) => {
       if (method === "POST") {
         assertWriteRequest(req);
         const oven = createOven(await readJsonRequest(req));
-        json(res, 201, { oven: { ...ovenSummary(oven), instructions: oven.instructions, detail: oven.detail, path: oven.path } });
+        json(res, 201, { oven: { ...ovenSummary(oven), instructions: oven.instructions, oven: oven.oven, path: oven.path } });
         return;
       }
       return json(res, 405, { error: "method not allowed" });
diff --git a/src/server/custom-oven-index.test.mjs b/src/server/custom-oven-index.test.mjs
new file mode 100644
index 0000000..6dba932
--- /dev/null
+++ b/src/server/custom-oven-index.test.mjs
@@ -0,0 +1,31 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { httpGet, withServer } from "./dashboard-routes-fixtures.mjs";
+
+const ovenSource = `<oven id="widget-oven" version="1" contract="checklist-progress@1" theme="checklist">
+  <kpi-strip>
+    <kpi-item variant="current" heading="Widget" title="/widget/name" value="/widget/count"/>
+  </kpi-strip>
+</oven>`;
+
+test("a bound custom Oven appears in the dashboard index with a working data selection", { timeout: 20_000 }, async () => {
+  await withServer({
+    ovens: [{ id: "widget-oven", oven: ovenSource }],
+    ovenData: [{ id: "widget-oven", payload: { widget: { name: "Sprockets", count: 42 } } }],
+  }, async ({ baseUrl }) => {
+    const burnlists = JSON.parse((await httpGet(baseUrl, "/api/burnlists")).body).burnlists;
+    const entry = burnlists.find((candidate) => candidate.ovenId === "widget-oven");
+    assert.ok(entry);
+    assert.match(entry.href, /^\/ovens\/widget-oven\/view\?repoKey=/u);
+
+    const catalog = JSON.parse((await httpGet(baseUrl, "/api/ovens")).body);
+    const oven = catalog.ovens.find((candidate) => candidate.id === "widget-oven");
+    assert.ok(oven?.repoKey);
+    assert.notEqual(entry.repoKey, null);
+    assert.equal(entry.repoKey, oven.repoKey);
+
+    const repoKey = new URL(entry.href, baseUrl).searchParams.get("repoKey");
+    assert.equal(repoKey, oven.repoKey);
+    assert.equal((await httpGet(baseUrl, `/api/oven-data/widget-oven?repoKey=${encodeURIComponent(repoKey)}`)).status, 200);
+  });
+});
diff --git a/src/server/custom-oven-view-routes.test.mjs b/src/server/custom-oven-view-routes.test.mjs
new file mode 100644
index 0000000..d6fca73
--- /dev/null
+++ b/src/server/custom-oven-view-routes.test.mjs
@@ -0,0 +1,35 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { httpGet, withServer } from "./dashboard-routes-fixtures.mjs";
+
+const ovenSource = `<oven id="widget-oven" version="1" contract="checklist-progress@1" theme="checklist">
+  <kpi-strip>
+    <kpi-item variant="current" heading="Widget" title="/widget/name" value="/widget/count"/>
+  </kpi-strip>
+</oven>`;
+
+test("a custom Oven view serves compiled IR and author-shaped bound data", { timeout: 20_000 }, async () => {
+  const payload = { widget: { name: "Sprockets", count: 42 } };
+  await withServer({
+    ovens: [{ id: "widget-oven", oven: ovenSource }],
+    ovenData: [{ id: "widget-oven", payload }],
+  }, async ({ baseUrl }) => {
+    const catalog = JSON.parse((await httpGet(baseUrl, "/api/ovens")).body);
+    const repoKey = catalog.ovens.find((oven) => oven.id === "widget-oven")?.repoKey;
+    assert.ok(repoKey);
+    const query = `?repoKey=${encodeURIComponent(repoKey)}`;
+
+    const ovenResponse = await httpGet(baseUrl, `/api/ovens/widget-oven${query}`);
+    assert.equal(ovenResponse.status, 200);
+    assert.equal(JSON.parse(ovenResponse.body).oven.ir.id, "widget-oven");
+
+    const dataResponse = await httpGet(baseUrl, `/api/oven-data/widget-oven${query}`);
+    assert.equal(dataResponse.status, 200);
+    assert.deepEqual(JSON.parse(dataResponse.body).payload, payload);
+    assert.equal(JSON.parse(dataResponse.body).validated, false);
+
+    const viewResponse = await httpGet(baseUrl, `/ovens/widget-oven/view${query}`);
+    assert.equal(viewResponse.status, 200);
+    assert.ok(viewResponse.body.length > 0);
+  });
+});
diff --git a/src/server/dashboard-routes-fixtures.mjs b/src/server/dashboard-routes-fixtures.mjs
index 2626130..5eb7c34 100644
--- a/src/server/dashboard-routes-fixtures.mjs
+++ b/src/server/dashboard-routes-fixtures.mjs
@@ -5,6 +5,7 @@ import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { dirname, join, relative, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
+import { starterOvenSource } from "../ovens/oven-starter.mjs";
 
 const scriptDirectory = dirname(fileURLToPath(import.meta.url));
 const serverPath = resolve(scriptDirectory, "burnlist-dashboard-server.mjs");
@@ -133,10 +134,14 @@ function detailFixture() {
 
 async function writeOvenFixture(root, fixture) {
   const ovenRoot = join(root, ".local", "burnlist", "ovens", fixture.id);
+  const instructions = fixture.instructions ?? "# Fixture Oven\n\nFollow the checklist.\n";
+  const heading = instructions.split(/\r?\n/u).find((line) => /^#\s+\S/u.test(line.trim()));
+  const name = heading ? heading.trim().replace(/^#\s+/u, "").trim() : fixture.id;
+  const oven = fixture.oven ?? starterOvenSource(fixture.id, name);
   await mkdir(ovenRoot, { recursive: true });
   await Promise.all([
-    writeFile(join(ovenRoot, "instructions.md"), fixture.instructions ?? "# Fixture Oven\n\nFollow the checklist.\n"),
-    writeFile(join(ovenRoot, "detail.json"), JSON.stringify(fixture.detail ?? detailFixture())),
+    writeFile(join(ovenRoot, "instructions.md"), instructions),
+    writeFile(join(ovenRoot, `${fixture.id}.oven`), oven),
     ...(fixture.ovenJson === undefined
       ? []
       : [writeFile(join(ovenRoot, "oven.json"), typeof fixture.ovenJson === "string" ? fixture.ovenJson : JSON.stringify(fixture.ovenJson))]),
diff --git a/src/server/fs-safe.mjs b/src/server/fs-safe.mjs
index d6aa03a..ec0cdb0 100644
--- a/src/server/fs-safe.mjs
+++ b/src/server/fs-safe.mjs
@@ -236,12 +236,24 @@ function currentRevision(pkgRoot, id) {
   return revisionDir;
 }
 
+function ovenFiles(pkgRoot) {
+  try {
+    return readdirSync(pkgRoot, { withFileTypes: true })
+      .filter((entry) => entry.isFile() && entry.name.endsWith(".oven"))
+      .map((entry) => entry.name);
+  } catch (error) {
+    if (missing(error)) return [];
+    throw error;
+  }
+}
+
 function legacyPackage(pkgRoot) {
-  return ["instructions.md", "detail.json"].every((name) => entryAt(join(pkgRoot, name))?.isFile());
+  return entryAt(join(pkgRoot, "instructions.md"))?.isFile()
+    && (ovenFiles(pkgRoot).length > 0 || entryAt(join(pkgRoot, "detail.json"))?.isFile());
 }
 
 function copyPackageFiles(from, to) {
-  for (const name of ["instructions.md", "detail.json", "oven.json"]) {
+  for (const name of ["instructions.md", ...ovenFiles(from), "oven.json", "detail.json"]) {
     if (entryAt(join(from, name))?.isFile()) cpSync(join(from, name), join(to, name));
   }
 }
@@ -262,7 +274,7 @@ function publishCurrent(pkgRoot, id, revision) {
 }
 
 function removeLegacyFiles(pkgRoot) {
-  for (const name of ["instructions.md", "detail.json", "oven.json"]) {
+  for (const name of ["instructions.md", ...ovenFiles(pkgRoot), "oven.json", "detail.json"]) {
     try {
       rmSync(join(pkgRoot, name), { force: true });
     } catch (error) {
@@ -301,7 +313,7 @@ function gcOldRevisions(pkgRoot, current) {
 // a stable path until grace-period GC makes it eligible for deletion. A reader
 // suspended beyond that grace period mid-read is out of scope for this localhost tool.
 export function atomicOvenPackage(parent, id, files, { replace = false, assertPath } = {}) {
-  assertOvenPackageFileLimits(files);
+  assertOvenPackageFileLimits(files, id);
   assertPath?.();
   mkdirSync(parent, { recursive: true });
   const pkgRoot = join(parent, id);
diff --git a/src/server/fs-safe.test.mjs b/src/server/fs-safe.test.mjs
index 83982cc..92936c2 100644
--- a/src/server/fs-safe.test.mjs
+++ b/src/server/fs-safe.test.mjs
@@ -83,7 +83,7 @@ test("Oven package cleanup failures do not undo a published revision, while pre-
     'import { syncBuiltinESMExports } from "node:module";',
     'const [root, moduleUrl] = process.argv.slice(1);',
     'const { atomicOvenPackage, resolveOvenPackageDir } = await import(moduleUrl);',
-    'const files = (name) => ({ "instructions.md": "# " + name + "\\n", "detail.json": "{}\\n" });',
+    'const files = (name) => ({ "instructions.md": "# " + name + "\\n", "oven.oven": "<oven />\\n" });',
     'atomicOvenPackage(root, "oven", files("first"));',
     'const nativeReaddir = fs.readdirSync;',
     'fs.readdirSync = (path, ...rest) => path === root + "/oven" ? (() => { throw new Error("gc blocked"); })() : nativeReaddir(path, ...rest);',
@@ -100,7 +100,7 @@ test("Oven package cleanup failures do not undo a published revision, while pre-
     'const nativeWrite = fs.writeFileSync;',
     'fs.writeFileSync = (path, ...rest) => { if (String(path).includes("instructions.md")) throw new Error("stage blocked"); return nativeWrite(path, ...rest); };',
     'syncBuiltinESMExports();',
-    'try { atomicOvenPackage(root, "pre-swap", { "instructions.md": "# blocked\\n", "detail.json": "{}\\n" }); } catch (error) { process.stdout.write(error.message); }',
+    'try { atomicOvenPackage(root, "pre-swap", { "instructions.md": "# blocked\\n", "pre-swap.oven": "<oven />\\n" }); } catch (error) { process.stdout.write(error.message); }',
   ].join("\n");
   try {
     const published = spawnSync(process.execPath, ["--input-type=module", "--eval", script, context.root, new URL("./fs-safe.mjs", import.meta.url).href], { encoding: "utf8" });
@@ -118,10 +118,10 @@ test("Oven package cleanup failures do not undo a published revision, while pre-
   }
 });
 
-function ovenFiles(version) {
+function ovenFiles(version, id = "oven") {
   return {
     "instructions.md": `# Oven ${version}\n`,
-    "detail.json": `{ "version": "${version}" }\n`,
+    [`${id}.oven`]: `<oven version="${version}" />\n`,
     "oven.json": `{ "source": "${version}" }\n`,
   };
 }
@@ -235,7 +235,10 @@ test("legacy migration stays readable on either side of current and recovery tru
   const crashed = join(context.root, "crashed");
   const orphanRoot = join(context.root, "orphan");
   try {
-    atomicDirectory(context.root, "legacy", ovenFiles("legacy"));
+    atomicDirectory(context.root, "legacy", {
+      ...ovenFiles("legacy", "legacy"),
+      "detail.json": `{ "version": "legacy" }\n`,
+    });
     assert.equal(resolveOvenPackageDir(target), target);
     assert.equal(readFileSync(join(resolveOvenPackageDir(target), "instructions.md"), "utf8"), "# Oven legacy\n");
     withOvenPackageLock(context.root, "legacy", () => (
@@ -243,6 +246,9 @@ test("legacy migration stays readable on either side of current and recovery tru
     ));
     assert.equal(readFileSync(join(resolveOvenPackageDir(target), "instructions.md"), "utf8"), "# Oven updated\n");
     assert.equal(existsSync(join(target, "instructions.md")), false);
+    assert.equal(existsSync(join(target, "legacy.oven")), false);
+    assert.equal(existsSync(join(target, "detail.json")), false);
+    assert.equal(readFileSync(join(resolveOvenPackageDir(target), "detail.json"), "utf8"), `{ "version": "legacy" }\n`);
 
     atomicDirectory(context.root, "crashed", ovenFiles("old"));
     const publishedBeforeCleanup = join(crashed, "rev-cafebabe");
diff --git a/src/server/oven-routes.test.mjs b/src/server/oven-routes.test.mjs
index e88f0ea..79043ac 100644
--- a/src/server/oven-routes.test.mjs
+++ b/src/server/oven-routes.test.mjs
@@ -5,8 +5,9 @@ import { mkdir, readFile, symlink, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { buildPayload } from "../../ovens/differential-testing/example/adapter.mjs";
 import test from "node:test";
+import { starterOvenSource } from "../ovens/oven-starter.mjs";
 import { repoKey } from "./registry.mjs";
-import { detailFixture, httpGet, httpRequest, withServer } from "./dashboard-routes-fixtures.mjs";
+import { httpGet, httpRequest, withServer } from "./dashboard-routes-fixtures.mjs";
 
 test("POST /api/ovens refuses an unignored Git repository without writing an Oven", { timeout: 20_000 }, async () => {
   await withServer({
@@ -20,7 +21,7 @@ test("POST /api/ovens refuses an unignored Git repository without writing an Ove
       method: "POST",
       headers: { "content-type": "application/json", "x-burnlist-token": catalog.writeToken },
       body: JSON.stringify({
-        id: "unignored-oven", name: "Unignored Oven", instructions: "# Unignored Oven\n\nStay local.", detail: detailFixture(),
+        id: "unignored-oven", name: "Unignored Oven", instructions: "# Unignored Oven\n\nStay local.",
       }),
     });
     assert.equal(response.status, 400);
@@ -175,6 +176,10 @@ test("custom Ovens are identified by repository while built-ins remain global",
     const shared = catalog.ovens.filter((oven) => oven.id === "shared");
     assert.equal(shared.length, 2);
     assert.equal(new Set(shared.map((oven) => oven.repoKey)).size, 2);
+    assert.deepEqual(
+      Object.keys(shared[0]).sort(),
+      ["builtIn", "description", "id", "name", "ovenRevision", "repoKey"],
+    );
     assert.equal(catalog.ovens.find((oven) => oven.id === "checklist").repoKey, null);
     assert.equal(catalog.ovens.find((oven) => oven.id === "differential-testing").repoKey, null);
 
@@ -183,7 +188,12 @@ test("custom Ovens are identified by repository while built-ins remain global",
     const secondOven = await httpGet(baseUrl, `/api/ovens/shared?repoKey=${second.repoKey}`);
     assert.equal(firstOven.status, 200);
     assert.equal(secondOven.status, 200);
-    assert.notEqual(JSON.parse(firstOven.body).oven.instructions, JSON.parse(secondOven.body).oven.instructions);
+    const firstOvenPackage = JSON.parse(firstOven.body).oven;
+    const secondOvenPackage = JSON.parse(secondOven.body).oven;
+    assert.notEqual(firstOvenPackage.instructions, secondOvenPackage.instructions);
+    assert.equal(firstOvenPackage.oven, starterOvenSource("shared", "Oven A"));
+    assert.equal(typeof firstOvenPackage.ir, "object");
+    assert.equal(Object.hasOwn(firstOvenPackage, "detail"), false);
     // Custom ovens never resolve without their own repository identity.
     const bare = await httpGet(baseUrl, "/api/ovens/shared");
     assert.equal(bare.status, 404);
@@ -202,11 +212,20 @@ test("custom Ovens are identified by repository while built-ins remain global",
       method: "POST",
       headers: { "content-type": "application/json", "x-burnlist-token": catalog.writeToken },
       body: JSON.stringify({
-        id: "b-authored", name: "B Authored", instructions: "# B Authored\n\nB only.\n", detail: detailFixture(), repoKey: b.repoKey,
+        id: "b-authored", name: "B Authored", instructions: "# B Authored\n\nB only.\n", repoKey: b.repoKey,
       }),
     });
     assert.equal(authored.status, 201);
-    assert.equal(JSON.parse(authored.body).oven.repoKey, b.repoKey);
+    const authoredOven = JSON.parse(authored.body).oven;
+    assert.equal(authoredOven.repoKey, b.repoKey);
+    assert.match(authoredOven.oven, /<oven id="b-authored"/u);
+    assert.equal(Object.hasOwn(authoredOven, "detail"), false);
+    const authoredRevision = (await readFile(join(authoredOven.path, "current"), "utf8")).trim();
+    assert.equal(
+      await readFile(join(authoredOven.path, authoredRevision, "b-authored.oven"), "utf8"),
+      authoredOven.oven,
+    );
+    assert.equal(existsSync(join(authoredOven.path, "detail.json")), false);
     assert.equal((await httpGet(baseUrl, `/api/ovens/b-authored?repoKey=${b.repoKey}`)).status, 200);
     const created = await httpRequest(baseUrl, "/api/runs", {
       method: "POST",
@@ -427,7 +446,7 @@ test("--ovens-dir applies only to the launch repository custom Ovens", { timeout
       await mkdir(ovenRoot, { recursive: true });
       await Promise.all([
         writeFile(join(ovenRoot, "instructions.md"), "# A Override\n\nLaunch only.\n"),
-        writeFile(join(ovenRoot, "detail.json"), JSON.stringify(detailFixture())),
+        writeFile(join(ovenRoot, "a-override.oven"), starterOvenSource("a-override", "A Override")),
       ]);
     },
   }, async ({ baseUrl }) => {
diff --git a/src/server/oven-storage.mjs b/src/server/oven-storage.mjs
index b54760f..e40aa3a 100644
--- a/src/server/oven-storage.mjs
+++ b/src/server/oven-storage.mjs
@@ -3,8 +3,10 @@ import { basename, dirname, isAbsolute, join, relative, resolve, sep } from "nod
 import { repoStateDir } from "./repo-state.mjs";
 
 export const OVEN_INSTRUCTIONS_MAX_BYTES = 65_536;
-export const OVEN_DETAIL_MAX_BYTES = 131_072;
-export const OVEN_LINEAGE_MAX_BYTES = OVEN_DETAIL_MAX_BYTES;
+export const OVEN_SOURCE_MAX_BYTES = 131_072;
+// Retained during the staged migration for legacy readers outside this module.
+export const OVEN_DETAIL_MAX_BYTES = OVEN_SOURCE_MAX_BYTES;
+export const OVEN_LINEAGE_MAX_BYTES = OVEN_SOURCE_MAX_BYTES;
 
 function isWithin(parent, child) {
   const pathFromParent = relative(parent, child);
@@ -80,20 +82,20 @@ export function assertCustomOvenPath(repoRoot, ovensDir, id, { unsafe = false }
   return path;
 }
 
-export function serializeOvenPackage({ instructions, detail, sidecar } = {}) {
+export function serializeOvenPackage({ id, instructions, oven, sidecar } = {}) {
   const files = {
     "instructions.md": `${instructions}\n`,
-    "detail.json": `${JSON.stringify(detail, null, 2)}\n`,
+    [`${id}.oven`]: `${String(oven).replace(/[\r\n]+$/u, "")}\n`,
     ...(sidecar ? { "oven.json": `${JSON.stringify(sidecar, null, 2)}\n` } : {}),
   };
-  assertOvenPackageFileLimits(files);
+  assertOvenPackageFileLimits(files, id);
   return files;
 }
 
-export function assertOvenPackageFileLimits(files) {
+export function assertOvenPackageFileLimits(files, id) {
   const limits = {
     "instructions.md": OVEN_INSTRUCTIONS_MAX_BYTES,
-    "detail.json": OVEN_DETAIL_MAX_BYTES,
+    [`${id}.oven`]: OVEN_SOURCE_MAX_BYTES,
     "oven.json": OVEN_LINEAGE_MAX_BYTES,
   };
   for (const [name, maxBytes] of Object.entries(limits)) {
diff --git a/src/server/run-routes.test.mjs b/src/server/run-routes.test.mjs
index 8ba2e6e..f71e05c 100644
--- a/src/server/run-routes.test.mjs
+++ b/src/server/run-routes.test.mjs
@@ -1,15 +1,21 @@
 import assert from "node:assert/strict";
-import { normalizeOvenPackage, ovenRevision } from "../ovens/oven-contract.mjs";
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import {
+  legacyOvenRevision,
+  normalizeOvenDetail,
+  normalizeOvenPackage,
+  ovenRevision,
+} from "../ovens/oven-contract.mjs";
 import test from "node:test";
 import { detailFixture, httpGet, httpRequest, withServer } from "./dashboard-routes-fixtures.mjs";
-test("Burn runs read legacy v3 revisions and write/read v4 revisions", { timeout: 20_000 }, async () => {
+test("Burn runs read legacy v3/v4 revisions and write/read v5 revisions", { timeout: 20_000 }, async () => {
   const legacyInstructions = "# Legacy Oven\n\nFollow the checklist.\n";
   const legacyDetail = detailFixture();
-  const expectedLegacyRevision = ovenRevision(normalizeOvenPackage({
-    id: "legacy-oven",
+  const expectedLegacyRevision = legacyOvenRevision({
     instructions: legacyInstructions,
-    detail: legacyDetail,
-  }));
+    detail: normalizeOvenDetail(legacyDetail),
+  });
   const legacyRunId = "20260714-120000-a1b2c3";
   const unsupportedRunId = "20260714-120001-a1b2c4";
   const matchingV4RunId = "20260714-120002-a1b2c5";
@@ -33,7 +39,7 @@ test("Burn runs read legacy v3 revisions and write/read v4 revisions", { timeout
     assert.match(JSON.parse(mismatchedV4.body).error, /revision does not match its snapshot/u);
     const unsupported = await httpGet(baseUrl, `/api/runs/${unsupportedRunId}`);
     assert.equal(unsupported.status, 400);
-    assert.match(JSON.parse(unsupported.body).error, /schemaVersion must be 3 or 4/u);
+    assert.match(JSON.parse(unsupported.body).error, /schemaVersion must be 3, 4, or 5/u);
 
     const ovens = JSON.parse((await httpGet(baseUrl, "/api/ovens")).body);
     const created = await httpRequest(baseUrl, "/api/runs", {
@@ -46,9 +52,17 @@ test("Burn runs read legacy v3 revisions and write/read v4 revisions", { timeout
     });
     assert.equal(created.status, 201);
     const current = JSON.parse(created.body).run;
-    assert.equal(current.schemaVersion, 4);
+    assert.equal(current.schemaVersion, 5);
     assert.equal(current.ovenRepoKey, null);
     assert.match(current.ovenRevision, /^o1-sha256:[a-f0-9]{64}$/u);
+    const instructionsSnapshot = await readFile(`${current.path}/instructions.md`, "utf8");
+    const sourceSnapshot = await readFile(`${current.path}/checklist.oven`, "utf8");
+    assert.equal(existsSync(`${current.path}/detail.json`), false);
+    assert.equal(current.ovenRevision, ovenRevision(normalizeOvenPackage({
+      id: "checklist",
+      instructions: instructionsSnapshot,
+      oven: sourceSnapshot,
+    })));
     const reread = JSON.parse((await httpGet(baseUrl, `/api/runs/${current.id}`)).body).run;
     assert.equal(reread.ovenRevision, current.ovenRevision);
   });
@@ -66,9 +80,9 @@ test("Burn runs read max-size normalized v4 Oven snapshots", { timeout: 20_000 }
       column: (index % 24) + 1, row: Math.floor(index / 24) + 1, columnSpan: 1, rowSpan: 1,
     })),
   };
-  const oven = normalizeOvenPackage({ id: "max-size-oven", instructions, detail });
-  const instructionsSnapshot = `${oven.instructions}\n`;
-  const detailSnapshot = `${JSON.stringify(oven.detail, null, 2)}\n`;
+  const normalizedDetail = normalizeOvenDetail(detail);
+  const instructionsSnapshot = `${instructions}\n`;
+  const detailSnapshot = `${JSON.stringify(normalizedDetail, null, 2)}\n`;
   assert.ok(Buffer.byteLength(instructionsSnapshot) > 65536);
   assert.ok(Buffer.byteLength(detailSnapshot) > 131072);
   assert.ok(Buffer.byteLength(instructionsSnapshot) <= 262144);
@@ -76,12 +90,16 @@ test("Burn runs read max-size normalized v4 Oven snapshots", { timeout: 20_000 }
   const id = "20260714-120004-a1b2c7";
   await withServer({
     runs: [{
-      id, schemaVersion: 4, ovenId: oven.id, instructions: oven.instructions, detail: oven.detail,
-      ovenRevision: ovenRevision(oven), instructionsSnapshot, detailSnapshot,
+      id, schemaVersion: 4, ovenId: "max-size-oven", instructions, detail: normalizedDetail,
+      ovenRevision: legacyOvenRevision({ instructions: instructionsSnapshot, detail: normalizedDetail }),
+      instructionsSnapshot, detailSnapshot,
     }],
   }, async ({ baseUrl }) => {
     const response = await httpGet(baseUrl, `/api/runs/${id}`);
     assert.equal(response.status, 200);
-    assert.equal(JSON.parse(response.body).run.ovenRevision, ovenRevision(oven));
+    assert.equal(
+      JSON.parse(response.body).run.ovenRevision,
+      legacyOvenRevision({ instructions: instructionsSnapshot, detail: normalizedDetail }),
+    );
   });
 });
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index da791d4..a9290bd 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -51,6 +51,10 @@ export default defineConfig({
           label: 'Ovens',
           items: [
             { slug: 'ovens', label: 'Overview' },
+            { slug: 'ovens/designing-ovens', label: 'Designing Ovens' },
+            { slug: 'ovens/oven-system' },
+            { slug: 'ovens/dsl-reference' },
+            { slug: 'ovens/authoring' },
             { slug: 'ovens/checklist' },
             { slug: 'ovens/differential-testing' },
             { slug: 'ovens/streaming-diff' },
diff --git a/website/scripts/skill-content.mjs b/website/scripts/skill-content.mjs
index 204856b..3cf9b58 100644
--- a/website/scripts/skill-content.mjs
+++ b/website/scripts/skill-content.mjs
@@ -67,6 +67,12 @@ Burnlist is a real-time, non-invasive tracker for agents. A Burnlist stores work
 
 Burnlist owns task state — not implementation, testing, or delivery. **It does not execute your work or drive your agents.** It is built for planning and observing an agent's work; the agent (or a domain-specific skill) does the actual work, and reports progress back into the Burnlist.
 
+## The three concepts
+
+- **Burnlist** — your list of work. Items complete atomically on evidence and leave the active list only once truly done; the list burns down to zero. It answers "what do I do next, and is it really done?"
+- **Oven** — a read-only dashboard view that renders honest signals over your own data (progress, metrics, diffs) so you see truth, not vibes. It answers "how are we actually doing?"
+- **Lane** — a split of one large Burnlist into parallel sub-lists so independent tracks burn down side by side. Reach for it when a plan has genuinely independent work streams.
+
 ## Install
 
 Install and hooks are independent steps — installing one does not install the other.
@@ -105,6 +111,59 @@ burnlist uninstall [--global] [--agent codex,claude] [--dry-run] [--purge]
 
 \`--purge\` (global only) also removes the global npm package.
 
+## Designing an Oven: measure what you can't fake
+
+An Oven makes progress objective so an agent cannot fool itself — the antidote to "I think it's done." For your problem, ask: **what signal proves this is working, that I cannot fake or hand-wave?** Then measure proxy-resistant evidence, not self-report.
+
+| Self-reported and gameable | Objective and verifiable |
+| --- | --- |
+| "~80% done" | "142/200 tests pass" |
+| "looks good" | "3 byte-diffs remain" or "0 pixel drift" |
+| "should work" | "1,240/1,500 rows migrated and validated" |
+
+The built-in ovens embody this: Differential Testing measures byte-identical goldens, Visual Parity measures pixel diffs, Streaming Diff captures real pre-to-post diffs, and Performance Tracing measures real timings against a budget — never self-assessment. Map your signals onto the view vocabulary — headline numbers to a kpi-strip, the event stream to a log-table, the burn-down to a progress-donut — and compute the real values in a project-owned data adapter that emits one read-only JSON document the Oven binds to. If a number can be typed by hand without doing the work, it is not evidence.
+
+### The adapter: compute honest numbers
+
+The adapter is a project-owned script that reads reality, computes the numbers, and writes the bound JSON. Hand-editing that JSON defeats the point: a number you typed proves nothing.
+
+\`\`\`js
+#!/usr/bin/env node
+// migration-adapter.mjs — computes honest numbers from reality and writes the
+// oven's bound JSON. Node built-ins only. The project runs this, not Burnlist.
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+
+const rows = new URL('./migrated-rows/', import.meta.url);
+const files = (await readdir(rows)).filter((n) => n.endsWith('.json'));
+
+let validated = 0, schemaFailures = 0;
+for (const name of files) {
+  try {
+    const row = JSON.parse(await readFile(new URL(name, rows), 'utf8'));
+    if (row && typeof row.id === 'string') validated += 1; else schemaFailures += 1;
+  } catch { schemaFailures += 1; }
+}
+
+const out = new URL('./.local/burnlist/', import.meta.url);
+await mkdir(out, { recursive: true });
+await writeFile(new URL('migration-status-data.json', out), JSON.stringify({
+  validatedFraction: files.length ? validated / files.length : 0,
+  schemaFailures,
+  legacyReadGreen: null,   // unwired: no adapter reads the legacy path yet — never fabricate it
+  events: files.map((n) => \`validated \${n}\`),
+}, null, 2) + '\\n');
+\`\`\`
+
+An Oven is only as honest as its adapter; an unwired number is worse than no number. When a signal is not wired to reality, the adapter reports \`null\` or \`"wired": false\`, never a fabricated number, and that unwired signal becomes the next Burnlist item.
+
+The project owns and runs the adapter after each batch, on a schedule, or in CI—Burnlist never runs it, and \`burnlist oven bind\` only records the path.
+
+### Point a Burnlist item at an Oven number
+
+Write the done/delete condition against the signal: "Done/delete when Oven \`migration-status\` shows \`validatedFraction = 100%\` and \`schemaFailures = 0\`."
+
+This is advisory evidence a human or agent reads—Burnlist does not execute the Oven or auto-verify the number; \`burnlist burn\` and \`burnlist --check\` never read Oven data. The honesty is that the proof points at an adapter-computed signal instead of a self-report.
+
 ## CLI surface
 
 Authoritative output of \`burnlist --help\`:
diff --git a/website/src/content/docs/getting-started.mdx b/website/src/content/docs/getting-started.mdx
index 06c5424..45a02c7 100644
--- a/website/src/content/docs/getting-started.mdx
+++ b/website/src/content/docs/getting-started.mdx
@@ -7,11 +7,21 @@ Burnlist is a repo-local burndown tracker with a read-only observer dashboard an
 
 Burnlist has zero runtime dependencies: it uses pure Node built-ins and ES modules, and runs on Node.js 18 or newer.
 
+## The three concepts
+
+- **Burnlist** — your list of work. Items complete atomically on evidence and leave the active list only once truly done; the list burns down to zero. It answers "what do I do next, and is it really done?"
+- **Oven** — a read-only dashboard view that renders honest signals over your own data (progress, metrics, diffs) so you see truth, not vibes. It answers "how are we actually doing?"
+- **Lane** — a split of one large Burnlist into parallel sub-lists so independent tracks burn down side by side. Reach for it when a plan has genuinely independent work streams.
+
+To design an Oven that measures honest evidence, see [Designing Ovens](/ovens/designing-ovens).
+
 ## Explore the CLI
 
-Use the built-in help to see every available command, then create a burnlist in your repository.
+Install the CLI, initialize the repository, then create a burnlist. Use the built-in help to see every available command.
 
 ```sh
+npm install --global burnlist
+burnlist init
 burnlist --help
 burnlist new
 ```
diff --git a/website/src/content/docs/ovens.mdx b/website/src/content/docs/ovens.mdx
index b0b5f15..0205192 100644
--- a/website/src/content/docs/ovens.mdx
+++ b/website/src/content/docs/ovens.mdx
@@ -10,10 +10,10 @@ An Oven is a named, declarative recipe for a Burn. It has two canonical files in
 ```text
 <oven-id>/
   instructions.md
-  detail.json
+  <id>.oven
 ```
 
-`instructions.md` defines the outcome, canonical state, required run inputs, and evidence rules. It must be non-empty and contain a level-one heading, which is the Oven name. `detail.json` is a bounded, versioned, non-executable detail-page skeleton: its grid, controlled widgets and formats, and optional bindings.
+`instructions.md` defines the outcome, canonical state, required run inputs, and evidence rules. It must be non-empty and contain a level-one heading, which is the Oven name. `<id>.oven` is a declarative, versioned, non-executable detail-page source.
 
 ## What an Oven cannot do
 
@@ -35,10 +35,10 @@ Custom Ovens use the same two-file package and live in ignored `.local/burnlist/
 
 ```sh
 burnlist oven list [--json]
-burnlist oven view <id> [--json] [--cell-width <n>] [--cell-height <n>]
-burnlist oven create <id> --dir <dir>          # dir holds instructions.md + detail.json
-burnlist oven create <id> --package <file|->   # JSON: {name?, instructions, detail}
-burnlist oven create <id> --instructions <f|-> --detail <f|-> [--name <text>]
+burnlist oven view <id> [--json]
+burnlist oven create <id> --dir <dir>          # reads instructions.md + <id>.oven
+burnlist oven create <id> --package <file|->   # JSON: {name?, instructions, oven}
+burnlist oven create <id> --instructions <f|-> [--oven <f|->] [--name <text>]
 burnlist oven update <id> [same inputs as create]
 burnlist oven fork <id> <newId>
 burnlist oven bind <id> <path> [--repo <path>]  # bind an Oven to a normalized data payload
@@ -46,43 +46,18 @@ burnlist oven unbind <id> [--repo <path>]
 burnlist oven bindings [--repo <path>]          # list this repo's Oven data bindings
 ```
 
-`view` prints the detail skeleton as a box-drawing grid and a section table with widget, format, source, cell, and span. Any file input accepts `-` for standard input. `--name` owns the level-one heading. `create` refuses an existing id; use `update`, or `--force`. Built-in Ovens are read-only, so fork one to customize it.
+`view` derives structure from the compiled IR. Any file input accepts `-` for standard input. `--name` owns the level-one heading. `create` scaffolds a starter `.oven` when one is omitted, and refuses an existing id; use `update`, or `--force`. Built-in Ovens are read-only, so fork one to customize it.
 
-Validation reuses the same `oven-contract` used by the dashboard. A bad grid — overlap, an out-of-bounds span, an unknown widget or format, or a missing H1 — is rejected before anything is written. This CLI never executes Oven instructions.
+Validation reuses the same `oven-contract` used by the dashboard. Invalid source or a missing H1 is rejected before anything is written. This CLI never executes Oven instructions.
 
-## Grid rules
-
-The grid has 2–24 columns, 2–32 rows, a `rowHeight` of 32–120, and version `1`. It contains 1–32 sections. Each section id is a unique lowercase slug. `column` and `row` are 1-based; `column + columnSpan - 1 <= columns`, and the same rule applies to rows. Sections may not overlap. A `source` is empty (unbound) or a JSON-pointer-like string beginning with `/`.
-
-## Widget vocabulary
-
-| Widget | Intent |
-| --- | --- |
-| `metric` | One headline value. |
-| `progress` | Completion toward a whole — a number in `0..1` (or `0..100` with the `percent` format). |
-| `comparison` | Paired reference-versus-candidate series. |
-| `status` | A short state label. |
-| `timestamp` | A single moment. |
-| `line-chart` | A trend over an ordered axis. |
-| `bar-chart` | Categories compared with bars. |
-| `pie-chart` | Parts of a whole. |
-| `chart` | A generic series. |
-| `table` | Rows and columns. |
-| `list` | Items. |
-| `timeline` | Events in time order. |
-| `log` | Append-only lines. |
-| `markdown` | Prose. |
-
-## Formats
-
-The controlled formats applied to a widget value are `plain` (the default), `number`, `percent`, `duration`, and `timestamp`.
+Structure, widgets, and formats are the `.oven` DSL vocabulary. See the [.oven DSL reference](/ovens/dsl-reference) and [The .oven system](/ovens/oven-system).
 
 ## Binding
 
-A bound section's `source` is a JSON-pointer into a single read-only data document produced by a project-specific adapter at view time. The adapter is not part of the Oven, and source-value shape is not validated at creation time: the renderer and adapter are the final authority. Record the expected document shape in `instructions.md`, for example in a `## State Contract` section.
+A `.oven` source binding is a JSON-pointer into a single read-only data document produced by a project-specific adapter at view time. The adapter is not part of the Oven, and source-value shape is not validated at creation time: the renderer and adapter are the final authority. Record the expected document shape in `instructions.md`, for example in a `## State Contract` section.
 
-An unbound section is a layout placeholder that renders no data. Rich built-in Ovens instead define a versioned normalized-data contract validated in code. For example, Differential Testing uses `burnlist-differential-testing-data@1`, bound with `burnlist --oven-data differential-testing=<path>`.
+Rich built-in Ovens define a versioned normalized-data contract validated in code. For example, Differential Testing uses `burnlist-differential-testing-data@1`, bound with `burnlist --oven-data differential-testing=<path>`.
 
 ## Runs
 
-Run Burn records a repository, title, and objective, then copies the selected `instructions.md` and `detail.json` into a new ignored `.local/burnlist/runs/` directory as immutable run provenance. The app does not execute it.
+Run Burn records a repository, title, and objective, then copies the selected `instructions.md` and `<id>.oven` into a new ignored `.local/burnlist/runs/` directory as immutable run provenance. The app does not execute it.
diff --git a/website/src/content/docs/ovens/authoring.mdx b/website/src/content/docs/ovens/authoring.mdx
new file mode 100644
index 0000000..467b680
--- /dev/null
+++ b/website/src/content/docs/ovens/authoring.mdx
@@ -0,0 +1,201 @@
+---
+title: Create your own oven
+description: Author, bind, and view a declarative custom Oven.
+---
+
+An Oven author supplies declarative rendering data; the project continues to own
+the read-only data producer and its evidence.
+
+## Closed contract, theme, and icon allowlist
+
+**A custom Oven cannot define a new contract, theme, or icon.** It must reuse a
+built-in contract-and-theme pair. For a generic KPI-and-table Oven over arbitrary
+project JSON, use `contract="checklist-progress@1"` and `theme="checklist"`.
+Unknown values are rejected when creating the Oven:
+
+```text
+burnlist oven: Oven <id> .oven source is invalid: Unknown theme <x>
+burnlist oven: Oven <id> .oven source is invalid: Unknown contract <x>
+```
+
+| Registry | Exact allowed values |
+| --- | --- |
+| Contracts | `checklist-progress@1`, `burnlist-differential-testing-data@1`, `burnlist-streaming-diff-data@2`, `burnlist-visual-parity-data@1` |
+| Themes | `checklist`, `differential-testing`, `streaming-diff`, `visual-parity` |
+| Icons | `ClipboardList`, `Clock3`, `Gauge`, `TimerReset` |
+
+The matching specialized widgets and formats belong to their specialized
+contracts. Generic Ovens should use `kpi-strip`/`kpi-item`, `section-header`,
+`log-table`/`column`, and the generic formats in the [.oven DSL reference](/ovens/dsl-reference).
+
+## 1. Initialize the repository
+
+Run `burnlist init` before creating an Oven. In a Git repository, creation
+refuses to write until `.local/` is ignored:
+
+```text
+burnlist oven: refusing to write .local/burnlist/ovens: not git-ignored; run `burnlist init` or add it to .gitignore
+```
+
+`burnlist init` fixes that prerequisite and registers the repository as a
+dashboard scan root:
+
+```text
+Initialized 4 lifecycle folders in <repo>.
+Ignored /notes/burnlists/ and /.local/ locally.
+Registered <repo>.
+```
+
+It locally ignores `/.local/` and `/notes/burnlists/`. In a non-Git directory,
+the ignore step is skipped and creation works because the gate applies only in a
+Git repository that does not ignore the path.
+
+## 2. Author the Oven and its data document
+
+Create an instructions file with a level-one heading, then author a `.oven`
+file named for its id. The root needs `id`, `version`, `contract`, and `theme`;
+`refresh-seconds` is optional. The Oven declares pointers into one read-only
+JSON document; it cannot execute code or transform project data.
+
+Here is a complete generic `deploy-status` Oven, `kpi.oven`:
+
+```xml
+<oven id="deploy-status" version="1" contract="checklist-progress@1" theme="checklist">
+  <section-header title="Deploy status"/>
+  <kpi-strip>
+    <kpi-item heading="Service" source="/service"/>
+    <kpi-item heading="Healthy" source="/healthyPct" format="percent"/>
+    <kpi-item heading="Last deploy" source="/deployedAt" format="relative-age"/>
+  </kpi-strip>
+  <log-table source="/events"><column label="Event" source="@item"/></log-table>
+</oven>
+```
+
+Its bound data file, `deploy-data.json`, can be arbitrary JSON as long as it
+matches the Oven's `source=` and `<bind source=>` [RFC 6901 JSON pointers](https://www.rfc-editor.org/rfc/rfc6901):
+
+```json
+{
+  "service": "checkout-api",
+  "healthyPct": 0.96,
+  "deployedAt": "2026-07-20T09:00:00Z",
+  "events": ["09:00 deploy started", "09:02 healthy", "09:05 traffic shifted"]
+}
+```
+
+Here, `healthyPct` renders as `"96.00%"`; `deployedAt` renders as a compact age
+such as `"3h"`. Generic checklist-theme Ovens do not validate payload shape at
+creation. Pointers resolve when viewed, and missing pointers render as empty or
+fallback values.
+
+The small Streaming Diff illustration uses its matching built-in pair:
+
+```xml
+<oven id="streaming-diff" version="1"
+      contract="burnlist-streaming-diff-data@2" theme="streaming-diff">
+  <streaming-diff-heading session="/identity/session" back-href="/backHref"/>
+  <diff-card source="/cards"/>
+</oven>
+```
+
+## 3. Create the custom Oven
+
+Create from separate instructions and Oven files:
+
+```sh
+burnlist oven create <id> --instructions <file|-> [--oven <file|->] [--name <text>]
+```
+
+Other inputs are available:
+
+```sh
+burnlist oven create <id> --dir <dir>
+burnlist oven create <id> --package <file|->
+burnlist oven update <id> [same inputs as create]
+```
+
+`--dir` reads `instructions.md` and `<id>.oven`; `--package` reads JSON with
+`{name?, instructions, oven}`. `-` accepts stdin. Use `--force` to replace an
+existing custom Oven, and `--repo <path>` to select the repository's storage or
+bindings.
+
+## Binding & viewing
+
+Bind an Oven to its JSON payload, inspect bindings, remove one, or copy an Oven:
+
+```sh
+burnlist oven bind <id> <path> [--repo <path>]
+burnlist oven bindings [--repo <path>]
+burnlist oven unbind <id> [--repo <path>]
+burnlist oven fork <id> <newId>
+```
+
+`bind` stores the path as supplied in `.local/burnlist/bindings.json`; a relative
+path resolves from the repository root when read. The file has this schema:
+
+```json
+{
+  "schemaVersion": 1,
+  "bindings": {
+    "<id>": {
+      "path": "<path>",
+      "boundAt": "<iso>"
+    }
+  }
+}
+```
+
+Successful binding prints `Bound Oven <id> to <path>` and
+`Store: <repo>/.local/burnlist/bindings.json`. `bindings` prints
+`<id>  <path>  <boundAt>` per line; `unbind` reports `Unbound…` or
+`No binding exists…`. `fork` copies a built-in or custom Oven to a new custom
+id and records its `forkedFrom` provenance; built-in Ovens cannot be updated.
+
+Use the CLI to inspect structure only:
+
+```sh
+burnlist oven view <id> [--json]
+```
+
+It prints the compiled node tree and a `node / prop / source` pointer table. It
+never shows data values, even when an Oven is bound.
+
+To render with data, run the dashboard:
+
+```sh
+burnlist --scan-root <repo>
+```
+
+It is loopback-only at `http://127.0.0.1:4510/` by default; add `--auto-port`
+to select a free port. A bound custom Oven appears on the index as a **Custom
+Oven** with status **Oven**. Selecting it opens
+`/ovens/<id>/view?repoKey=<key>` and renders the bound payload. An unbound
+custom Oven is authored but does not appear there.
+
+For a read-only binding for one dashboard session, without writing
+`bindings.json`, launch:
+
+```sh
+burnlist --scan-root <repo> --oven-data <id>=<path>
+```
+
+This also makes the custom Oven appear and render.
+
+## End-to-end generic Oven
+
+With `kpi.oven`, `deploy-data.json`, and an instructions file already authored,
+this sequence creates and displays the example:
+
+```sh
+cd <repo>                                   # a git repo
+burnlist init                               # ignore .local/, register root
+burnlist oven create deploy-status --instructions instr.md --oven kpi.oven
+burnlist oven bind deploy-status deploy-data.json
+burnlist oven bindings                       # confirm the binding
+burnlist oven view deploy-status             # structure only
+burnlist --scan-root <repo>                  # dashboard; open the "Custom Oven" row
+```
+
+See [The .oven system](/ovens/oven-system) for the rendering boundary and the
+[.oven DSL reference](/ovens/dsl-reference) for every allowed element and
+binding.
diff --git a/website/src/content/docs/ovens/checklist.mdx b/website/src/content/docs/ovens/checklist.mdx
index c67ccc4..d6bd25b 100644
--- a/website/src/content/docs/ovens/checklist.mdx
+++ b/website/src/content/docs/ovens/checklist.mdx
@@ -25,4 +25,8 @@ Completion is proven by canonical checklist state and the checks each item requi
 
 The normalized detail payload may expose `summary`, `active`, `completed`, `timeline`, and `log` fields. Detail-block bindings use JSON-pointer-like source paths and never execute code.
 
+## Rendering
+
+The detail page renders through the `.oven` engine: `checklist.oven` compiles to `checklist.ir.json`. See [The .oven system](/ovens/oven-system) and the [.oven DSL reference](/ovens/dsl-reference).
+
 See [Ovens](/ovens) and the [dashboard](/dashboard).
diff --git a/website/src/content/docs/ovens/designing-ovens.mdx b/website/src/content/docs/ovens/designing-ovens.mdx
new file mode 100644
index 0000000..702998f
--- /dev/null
+++ b/website/src/content/docs/ovens/designing-ovens.mdx
@@ -0,0 +1,84 @@
+---
+title: Designing Ovens
+description: Choose what an Oven measures — proxy-resistant evidence over self-report.
+---
+
+## Why an Oven exists
+
+An Oven makes progress objective so an agent cannot fool itself. It is the antidote to “I think it’s done”: a read-only view over evidence you compute, never a self-report.
+
+## The design question
+
+For your problem, ask: “What signal proves this is working, that I cannot fake or hand-wave?” Design the Oven around that signal.
+
+## Measure proxy-resistant evidence
+
+| Bad: self-reported and gameable | Good: objective and verifiable |
+| --- | --- |
+| “~80% done” | “142/200 tests pass” |
+| “Looks good” | “3 byte-diffs remain” or “0 pixel drift” |
+| “Should work” | “1,240/1,500 rows migrated and validated” |
+
+The built-in ovens follow this rule. Differential Testing measures byte-identical goldens. Visual Parity measures pixel diffs. Streaming Diff captures real pre-to-post diffs. Performance Tracing measures real timings against a budget. None accepts self-assessment. Your Oven should apply the same standard to your domain.
+
+## What could you measure?
+
+| Problem type | Honest signal |
+| --- | --- |
+| Refactor | Test pass count, byte-diff against a frozen golden, and 0 type errors |
+| Migration | Rows migrated and validated, schema conformance, and the legacy read still green |
+| Feature | Acceptance checks passing |
+| Bug fix | The failing reproduction now passes, with 0 regressions |
+| Performance | Real measured timings against a baseline—never “feels faster” |
+
+## From signal to Oven
+
+Map each signal onto the built-in view vocabulary:
+
+- Headline numbers → `kpi-strip`
+- The event stream—what happened and when → `log-table`
+- Burn-down → `progress-donut`
+
+The real values come from a data adapter: a small, project-owned step that computes the honest numbers and writes them as one read-only JSON document. The Oven binds to those values by JSON pointer. Keep the Oven declarative: it says how to present the numbers and never computes them.
+
+For the [.oven DSL reference](/ovens/dsl-reference), see the full grammar and examples. For creating and binding an Oven from the CLI—`burnlist oven create`, `burnlist oven bind`, and `burnlist oven view`—see [authoring](/ovens/authoring).
+
+## The adapter: compute honest numbers, don't type them
+
+The Oven is only the view. Between reality and the view sits the **adapter**: a small, project-owned script that reads a source of truth, computes the numbers, and writes the single read-only JSON document the Oven binds to. Hand-edit that JSON and you defeat the whole point—a number you typed proves nothing.
+
+A minimal adapter for a generic `checklist-progress@1` Oven (Node built-ins only) counts validated rows and writes the bound document:
+
+```js
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
+
+const rows = new URL('./migrated-rows/', import.meta.url);
+const files = (await readdir(rows)).filter((n) => n.endsWith('.json'));
+
+let validated = 0, schemaFailures = 0;
+for (const name of files) {
+  const row = JSON.parse(await readFile(new URL(name, rows), 'utf8'));
+  if (row && typeof row.id === 'string') validated += 1; else schemaFailures += 1;
+}
+
+const out = new URL('./.local/burnlist/', import.meta.url);
+await mkdir(out, { recursive: true });
+await writeFile(new URL('migration-status-data.json', out), JSON.stringify({
+  validatedFraction: files.length ? validated / files.length : 0,
+  schemaFailures,
+  legacyReadGreen: null, // unwired: never fabricate it — make wiring it the next item
+  events: files.map((n) => `validated ${n}`),
+}, null, 2) + '\n');
+```
+
+Bind it with `burnlist oven bind migration-status .local/burnlist/migration-status-data.json`; the CLI is in [authoring](/ovens/authoring).
+
+**An unwired number is worse than no number.** `legacyReadGreen` is `null` because no adapter reads the legacy path yet: an Oven is only as honest as its adapter, and a real gap that reads as a fabricated pass makes the agent trust a lie. Report `null` (or `"wired": false`), never a guess, and make wiring that signal the next Burnlist item.
+
+**The project owns and runs the adapter—Burnlist never does.** `burnlist oven bind` only records where the JSON lives; the dashboard only reads it. Re-run the adapter after each batch, on a schedule, or in CI—a stale adapter is a stale Oven.
+
+## Point a Burnlist item at an Oven number
+
+An Oven signal is only evidence if a Burnlist item cites it. Write the done/delete condition to point at the number: "Done/delete when Oven `migration-status` shows `validatedFraction = 100%` and `schemaFailures = 0`." This is advisory evidence a human or agent reads—Burnlist does not execute the Oven or auto-verify the number; `burnlist burn` and `--check` never read Oven data. The honesty is structural: the proof points at an adapter-computed signal the worker cannot type by hand.
+
+If a number can be typed by hand without doing the work, it is not evidence.
diff --git a/website/src/content/docs/ovens/differential-testing.mdx b/website/src/content/docs/ovens/differential-testing.mdx
index 06a24f9..48bf8d7 100644
--- a/website/src/content/docs/ovens/differential-testing.mdx
+++ b/website/src/content/docs/ovens/differential-testing.mdx
@@ -74,4 +74,8 @@ burnlist --oven-data differential-testing=<path>
 
 Small comparisons may bind the data document directly. Large comparisons use the `burnlist-differential-testing-bundle@1` transport so Burnlist validates field records sequentially and range-reads only the visible page. `burnlist differential-testing sdk` prints the packaged worker module path.
 
+## Rendering
+
+The detail page renders through the `.oven` engine: `differential-testing.oven` compiles to `differential-testing.ir.json`. See [The .oven system](/ovens/oven-system) and the [.oven DSL reference](/ovens/dsl-reference).
+
 See [Ovens](/ovens) and the [CLI reference](/cli).
diff --git a/website/src/content/docs/ovens/dsl-reference.mdx b/website/src/content/docs/ovens/dsl-reference.mdx
new file mode 100644
index 0000000..7675e15
--- /dev/null
+++ b/website/src/content/docs/ovens/dsl-reference.mdx
@@ -0,0 +1,202 @@
+---
+title: .oven DSL reference
+description: The declarative vocabulary, bindings, controls, and registries for .oven files.
+---
+
+`.oven` is a closed, XML-like DSL. The root is `<oven id="…" version="1" contract="…" theme="…">`; `refresh-seconds` is an optional positive integer refresh interval. Only registered elements, attributes, and registry values compile.
+
+## Layout
+
+| Element | Purpose |
+| --- | --- |
+| `<box>` | Optional custom semantic wrapper (`div`, `section`, `main`, or `span`). |
+| `<grid>` | Column-based layout; panels can declare grid positions and spans. |
+| `<stack>` | Row or column flow with a gap. |
+| `<panel>` | Titled layout region, optionally positioned in a grid. |
+
+## Display widgets
+
+| Widget | Purpose |
+| --- | --- |
+| `<kpi-strip>` / `<kpi-item>` | Headline metrics. A KPI item can contain `<progress-donut>`, `<burn-donut>`, `<waffle-metric>`, or `<progress-value>`. |
+| `<section-header>` | Section title and optional bound content. |
+| `<log-table>` / `<column>` | Table data and its columns. |
+| `<metric-tiles>` | Selected-domain visual-parity metrics. |
+| `<verdict-header>` | Visual-parity verdict summary. |
+| `<diff-card>` / `<file-diff>` | Diff summaries and file-level diffs. |
+| `<frame-card>` / `<image-triptych>` | Frame evidence and three-image comparison. |
+| `<feed-list>` | Feed state and entries. |
+| `<refresh-status>` | Refresh state. |
+| `<streaming-diff-heading>` | Streaming Diff heading and return link. |
+| `<checklist-burn-panel>` / `<checklist-ledger>` / `<checklist-event-cards>` | Checklist-specific detail views. |
+| `<domain-tabs>` / `<domain-note>` | Domain selection and its visual-parity explanation. |
+| `<differential-kpi-strip>` / `<differential-log-table>` | Differential Testing headline and log views. |
+| `<progress-chart>` / `<frame-delta-chart>` | Differential Testing charts. |
+| `<differential-empty-state>` | Differential Testing empty state. |
+
+`<icon>` uses a registered icon and `<text>` supplies literal or bound text. `<bind>` supplies a named component property; it is described with bindings below.
+
+## Interactivity
+
+| Element | Purpose |
+| --- | --- |
+| `<switch>` / `<case>` | Selects one branch from a bound source or a mode control. |
+| `<collection>` / `<each>` | Iterates a collection, optionally with search, sort, filter, and paging. |
+| `<field-toolbar>` | Groups `<search>`, `<mode-toggle>` with `<option>`, `<sort-toggle>`, and `<filter-toggle>`. |
+| `<field-list>` | Renders a collection referenced by `collection-from`, with an optional `mode-from`. |
+| `<pagination>` | Paginates its containing collection. |
+
+Controls are wired by `id`, not by executable callbacks. In the committed Differential Testing Oven, `progress-mode` selects a chart branch, while the field collection points to its toolbar controls:
+
+```xml
+<mode-toggle id="progress-mode"
+             initial="delta"
+             aria-label="Differential Testing progress view">
+  <option value="progress" label="Progress"/>
+  <option value="failed" label="Failed"/>
+  <option value="delta" label="Delta"/>
+</mode-toggle>
+<switch mode-from="progress-mode">
+  <case value="progress">
+    <progress-chart source="/progress"/>
+  </case>
+  <case value="failed">
+    <progress-chart source="/progress"/>
+  </case>
+  <case value="delta">
+    <frame-delta-chart source="/progress"/>
+  </case>
+</switch>
+
+<field-toolbar id="field-controls">
+  <search id="field-search"
+          placeholder="Search Fields..."
+          aria-label="Differential Testing search fields"
+          match-fields="/label /sourceOwner /driftClass /semantics/kind"
+          debounce-ms="150"/>
+  <mode-toggle id="value-mode"
+               initial="delta"
+               aria-label="Differential Testing chart mode">
+    <option value="current" label="Value"/>
+    <option value="delta" label="Delta"/>
+  </mode-toggle>
+  <sort-toggle id="changed-sort"
+               key="changed"
+               label="Changed"
+               initial="on"
+               requires-source="/telemetry/status"
+               requires-value="comparable"
+               unavailable-text="Changed is unavailable until comparable transition telemetry is published."/>
+  <filter-toggle id="failed-filter"
+                 key="non-pass"
+                 label="Failed"
+                 initial="off"/>
+</field-toolbar>
+
+<collection id="field-view"
+            source="/fields"
+            item-key="/id"
+            search-from="field-search"
+            sort-from="changed-sort"
+            filter-from="failed-filter"
+            paging="auto"
+            page-size="25">
+  <field-list collection-from="field-view"
+              mode-from="value-mode">
+    <bind prop="telemetryByField"
+          source="/telemetry/fields"
+          format="index-by-id"
+          optional="true"/>
+    <bind prop="telemetryAvailability"
+          source="/telemetry"
+          format="telemetry-availability"
+          optional="true"/>
+  </field-list>
+  <pagination collection-from="field-view"
+              page-sizes="25 50 100 200"/>
+</collection>
+```
+
+## Binding
+
+`source` is an [RFC 6901 JSON Pointer](https://www.rfc-editor.org/rfc/rfc6901) beginning with `/`, or an empty unbound value. `/` addresses the data document root. `@item` is the item-scoped pointer, usable only inside a `<collection>`/`<each>` item scope and in `<column>`.
+
+```xml
+<collection id="active-items"
+            source="/active"
+            item-key="/id"
+            paging="client"
+            page-size="25">
+  <each>
+    <kpi-item>
+      <bind prop="heading" source="@item/title" format="plain"/>
+      <bind prop="value" source="@item/id" format="plain"/>
+    </kpi-item>
+  </each>
+</collection>
+
+<log-table source="/timeline"
+           empty-text="No timeline events yet.">
+  <column label="Time" source="@item/time" format="time-only"/>
+  <column label="Event" source="@item/title" format="plain"/>
+</log-table>
+```
+
+`<bind prop="…" source="…" format="…" optional="true" fallback="…"/>` maps a source into a named widget property. `<text>` has exactly one of `text` or `source` and may also use `slot`, `format`, `optional`, and `fallback`.
+
+### Format semantics
+
+Formats transform a value at a `source` or `bind` pointer before display. These
+generic formats are appropriate for generic custom Ovens:
+
+| Format | Input → output |
+| --- | --- |
+| `identity` / `plain` | Any value → unchanged. `plain` is the identity alias stored in IR as `identity`; use it for verbatim strings and ids. |
+| `number` | Numeric value or numeric string → integer-grouped string with no decimals; `1234.7` → `"1,235"`. Empty or non-finite → `""`. |
+| `percent` | Fraction from 0 through 1 → percentage string with two decimals, or three below `0.01`; `0.96` → `"96.00%"`, `0.005` → `"0.500%"`. Null or undefined → `""`. |
+| `delta` | Number → up to four decimals with trailing zeroes trimmed; `0.5` → `"0.5"`, `1.25` → `"1.25"`. Null or undefined → `""`. |
+| `ratio-to-percent` | Fraction number from 0 through 1 → numeric value ×100, not a string; `0.96` → `96`. Null or non-finite → undefined. |
+| `length` | String or array → numeric `.length`; any other type → undefined. |
+| `time-only` | ISO timestamp, date string, or epoch → local 24-hour `"HH:MM"`; `"2026-07-20T09:05:00Z"` → `"09:05"`. Unparseable → `""`. |
+| `relative-age` | Timestamp → compact age from now: under 60 seconds `"Ns"`, under 60 minutes `"Nm"`, under 24 hours `"Nh"`, otherwise `"Nd"`; about three hours ago → `"3h"`. Unparseable → `""`. |
+
+The following eight formats are **Differential-Testing-only**. They read the
+last row of a Differential-Testing result-row array unless noted otherwise.
+Generic Oven authors should not use them.
+
+| Format | Input → output |
+| --- | --- |
+| `progress-headline` | Last row → `"frame/frames"` string. |
+| `last-progress-percent` | Last row's `frame/frames` ratio → number ×100. |
+| `last-failed-count` | Last row's failed-field count → string. |
+| `last-failed-percent` | Last row's `failed/total` field ratio → number ×100. |
+| `last-frame-delta` | Last row's absolute frame delta → string, or `"—"` when absent. |
+| `last-delta-percent` | Last row's absolute frame delta divided by frames → number ×100. |
+| `index-by-id` | Array of `{id, …}` objects → object keyed by each `id`. |
+| `telemetry-availability` | Telemetry payload → its availability descriptor. |
+
+Every `format` must be one of exactly these 17 values.
+
+`tone` on a `<column>` is appended verbatim as an extra CSS class on the
+rendered cell, alongside `log-table-cell` and the column-label slug. There is
+no fixed enum; it has a visible effect only if the active theme stylesheet
+defines that class. For a generic checklist-theme Oven, leave `tone` unset
+unless the chosen theme styles the token.
+
+## Registry
+
+| Registry | Allowed values |
+| --- | --- |
+| Themes | `checklist`, `differential-testing`, `streaming-diff`, `visual-parity` |
+| Contracts | `checklist-progress@1`, `burnlist-differential-testing-data@1`, `burnlist-streaming-diff-data@2`, `burnlist-visual-parity-data@1` |
+| Icons | `ClipboardList`, `Clock3`, `Gauge`, `TimerReset` |
+
+These registries are a closed allowlist: a custom Oven must reuse one of the
+built-in contract-and-theme pairs and a registered icon. It cannot define new
+registry values.
+
+`<metric-tiles>` requires exactly one `<bind>` for `passed`, `total`, `ratio`, `meanAbsoluteDelta`, and `maximumAbsoluteDelta`. `<verdict-header>` requires `targetPass`, `framesCount`, and `error`; `<image-triptych>` requires `images`, `label`, and `frame`; `<feed-list>` requires `feeds`, `error`, `loading`, and `showRepository`; and `<domain-note>` requires `isTarget` and `rationale`.
+
+## Clean authoring
+
+The theme and component defaults supply normal chrome and classes. All five committed Ovens — Checklist, Differential Testing, Streaming Diff, Performance Tracing, and visual-parity — contain no `class=` attribute and no `<box>` wrapper. Use `<box>` and `class=` only as optional custom escape hatches, not as routine page structure.
diff --git a/website/src/content/docs/ovens/oven-system.mdx b/website/src/content/docs/ovens/oven-system.mdx
new file mode 100644
index 0000000..8d02789
--- /dev/null
+++ b/website/src/content/docs/ovens/oven-system.mdx
@@ -0,0 +1,57 @@
+---
+title: The .oven system
+description: How declarative Oven source becomes a rendered detail page.
+---
+
+A `.oven` file is declarative, non-executable detail-page data. Its XML-like `<oven id version contract theme refresh-seconds>` root names the Oven, its data contract, its theme, and an optional refresh interval:
+
+```xml
+<oven id="streaming-diff"
+      version="1"
+      contract="burnlist-streaming-diff-data@2"
+      theme="streaming-diff">
+  <streaming-diff-heading session="/identity/session" back-href="/backHref"/>
+  <diff-card source="/cards"/>
+</oven>
+```
+
+This is the complete committed `streaming-diff.oven`. It describes what to render; it cannot run commands, evaluate code, import UI, or inject a renderer.
+
+## Rendering pipeline
+
+```text
+<id>.oven (human source)
+  -> compileOven
+  -> build-generated IR
+  -> OvenRuntime with the selected theme
+  -> rendered detail page
+```
+
+The build's oven-ir Vite plugin compiles `<id>.oven` at build or import time. `compileOven(source)` validates the source against the DSL grammar and emits JSON-only IR; the shared `OvenRuntime` renders it with the selected theme from the theme registry. The IR is never a committed file. The result is composable detail-page UI without executable Oven content.
+
+## Minimal footprint
+
+Every Oven directory contains its two canonical files. It has a flat data layer
+only when it needs a custom data source:
+
+```text
+<oven-id>/
+  instructions.md     # outcome, state, inputs, and evidence rules
+  <id>.oven           # declarative detail-page source
+  contract.mjs / handler.mjs / adapter / data.schema.json  # optional, flat data layer
+```
+
+The oven-ir Vite plugin generates IR from `<id>.oven`; authors never create or commit `.ir.json`. Checklist has no data layer. Performance Tracing and `visual-parity` have flat `contract.mjs` and `handler.mjs` files; Differential Testing has a flat data layer of `contract.mjs`, `handler.mjs`, `data-contract.mjs`, `adapter-sdk.mjs`, `transport.mjs`, `worker-runtime.mjs`, and `data.schema.json`. Streaming Diff is the one Oven that keeps a large `engine/` directory and `e2e/`.
+
+## Creating an oven
+
+`New Oven` takes `{id, name, instructions}` and the server scaffolds a starter
+`.oven`. The former drag-grid builder was removed.
+
+## Why use a DSL
+
+- **Composable:** the grammar combines registered layout, display, binding, and control elements.
+- **Safe:** Ovens ship data, not code. The compiler accepts a closed vocabulary and the runtime owns rendering.
+- **Consumer-authorable:** a project can author a declarative view over its normalized data without importing project UI into the dashboard.
+
+See the [.oven DSL reference](/ovens/dsl-reference) for the complete vocabulary, or [create your own Oven](/ovens/authoring) for the authoring path.
diff --git a/website/src/content/docs/ovens/performance-tracing.mdx b/website/src/content/docs/ovens/performance-tracing.mdx
index 1e271d9..ec41e2d 100644
--- a/website/src/content/docs/ovens/performance-tracing.mdx
+++ b/website/src/content/docs/ovens/performance-tracing.mdx
@@ -29,3 +29,7 @@ Missing, malformed, partially written, contradictory, or unactionable evidence i
 ## Execution boundary
 
 The Oven is read-only. Project tooling runs traces and atomically publishes the report; Burnlist only validates and displays it. See [Ovens](/ovens) and the [dashboard](/dashboard).
+
+## Rendering
+
+The detail page renders through the `.oven` engine: `performance-tracing.oven` compiles to `performance-tracing.ir.json`. See [The .oven system](/ovens/oven-system) and the [.oven DSL reference](/ovens/dsl-reference).
diff --git a/website/src/content/docs/ovens/streaming-diff.mdx b/website/src/content/docs/ovens/streaming-diff.mdx
index 7a8629b..b2fd1e1 100644
--- a/website/src/content/docs/ovens/streaming-diff.mdx
+++ b/website/src/content/docs/ovens/streaming-diff.mdx
@@ -13,6 +13,10 @@ A feed is selected by its logical repository key, worktree key, and session. A f
 
 This package contains no executable renderer, hook, or producer code. The server-side adapter validates and reads the local feed without mutating it.
 
+## Rendering
+
+The detail page renders through the `.oven` engine: `streaming-diff.oven` compiles to `streaming-diff.ir.json`. See [The .oven system](/ovens/oven-system) and the [.oven DSL reference](/ovens/dsl-reference).
+
 ## Producing cards
 
 Producers are wired through Streaming Diff hooks and CLI. `burnlist hooks install --agent codex,claude` merges the Streaming Diff commands into `.codex/hooks.json` and `.claude/settings.json`, preserving existing entries. The low-level surface is `burnlist streaming-diff <ensure-feed|capture|url|hook> ...`.
diff --git a/website/src/content/docs/ovens/visual-parity.mdx b/website/src/content/docs/ovens/visual-parity.mdx
index 6a277fc..6ec54b4 100644
--- a/website/src/content/docs/ovens/visual-parity.mdx
+++ b/website/src/content/docs/ovens/visual-parity.mdx
@@ -20,3 +20,7 @@ Do not widen a tolerance to make a regression green. Calibrate only a determinis
 ## State contract
 
 Canonical state stays in the project's own captures and render output. A project adapter maps that into `burnlist-visual-parity-data@1`; Burnlist validates and renders only that normalized document, and the adapter remains the final authority on pixel evidence. Record the expected document shape in the Oven's `instructions.md`.
+
+## Rendering
+
+The detail page renders through the `.oven` engine: `visual-parity.oven` compiles to `visual-parity.ir.json`. See [The .oven system](/ovens/oven-system) and the [.oven DSL reference](/ovens/dsl-reference).
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index e5fb10f..94a59b8 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -217,7 +217,7 @@ const skillUrl = new URL('/skill.md', Astro.site).toString();
         <div class="grid">
           <article class="card"><h3>CLI</h3><p>One command, <code>burnlist</code>, launches the loopback dashboard. Lifecycle verbs (<code>new</code>, <code>ready</code>, <code>start</code>, <code>burn</code>, <code>close</code>) plus protocol helpers (<code>--check</code>, <code>--digest</code>, <code>--stamp</code>) drive the burndown. Run <code>burnlist --help</code> for the full surface.</p></article>
           <article class="card"><h3>Dashboard</h3><p>A read-only web observer. It scans the <code>notes/burnlists/</code> lifecycle folders across your registered repos and refreshes automatically. It never mutates canonical task state.</p></article>
-          <article class="card"><h3>Ovens</h3><p>Declarative, non-executable recipes for a Burn: two files — <code>instructions.md</code> (outcome + evidence rules) and <code>detail.json</code> (grid, widgets, bindings). Five built-in Ovens ship: Checklist, Differential Testing, Streaming Diff, Performance Tracing, and Visual Parity.</p></article>
+          <article class="card"><h3>Ovens</h3><p>Declarative, non-executable recipes for a Burn: two files — <code>instructions.md</code> (outcome + evidence rules) and <code>&lt;id&gt;.oven</code> (declarative detail-page source). Five built-in Ovens ship: Checklist, Differential Testing, Streaming Diff, Performance Tracing, and Visual Parity.</p></article>
           <article class="card"><h3>Skills</h3><p>A single agent skill owns the full Burnlist lifecycle — creation, hardening, execution, and maintenance — installable for both Claude and Codex, per-repo or global.</p></article>
           <article class="card"><h3>Hooks</h3><p><code>burnlist hooks install --agent codex,claude</code> merges Streaming Diff commands into <code>.codex/hooks.json</code> and <code>.claude/settings.json</code>, preserving your existing hook entries.</p></article>
         </div>