@prismatic-io/lux 0.0.2-preview.4 → 0.0.2-preview.5

package/viewer/detail.js

@@ -0,0 +1,1108 @@
+import { comparisonBars, compositionFigure, quantizedBar } from "./charts.js";
+import {
+  badge,
+  compactNumber,
+  detailEmpty,
+  duration,
+  escapeHtml,
+  finite,
+  fullDate,
+  metricName,
+  metricValue,
+  percentage,
+  signedDuration,
+  signedPercentage,
+  statusLabel,
+  toneForDelta,
+  totalTokens,
+} from "./format.js";
+
+const json = (value) => {
+  if (value === undefined) return "";
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const eventContent = (event) => {
+  if (event.type === "lifecycle") return [event.stage, "Run lifecycle"];
+  if (event.type === "ready") {
+    return [
+      `Agent ready · ${event.agentId}`,
+      event.model ? `Model ${event.model}` : "Driver ready",
+    ];
+  }
+  if (event.type === "interrupt") {
+    return [
+      `Human-in-the-loop · ${event.kind}`,
+      event.question ?? event.request ?? json(event.payload),
+    ];
+  }
+  if (event.type === "responded") {
+    let answer = event.text ?? null;
+    if (!answer && typeof event.approved === "boolean") {
+      answer = event.approved ? "Approved" : "Denied";
+    }
+    return [`Answerer · ${event.kind}`, answer ?? json(event.payload)];
+  }
+  if (event.type === "progress") {
+    const payload = event.payload ?? {};
+    if (event.kind === "action") {
+      return [
+        `Action · ${payload.name ?? "unknown"}`,
+        payload.category ? `Category: ${payload.category}` : json(payload),
+      ];
+    }
+    const name = event.kind === "tool-call" ? payload.name : event.kind;
+    return [`Progress · ${name ?? event.kind}`, json(payload)];
+  }
+  if (event.type === "error") return [`Error · ${event.exitReason}`, event.reason];
+  return ["Completed", event.summary ? json(event.summary) : "Driver finished"];
+};
+
+const eventTime = (event, startedAt) => {
+  if (typeof event.ts !== "number") return "setup";
+  if (event.ts > 1_000_000_000_000) return fullDate(event.ts);
+  const start = Date.parse(startedAt ?? "");
+  if (!Number.isFinite(start)) return duration(event.ts);
+  return `+${duration(Math.max(0, event.ts - start))}`;
+};
+
+const assertionMeta = (assertion) =>
+  [
+    assertion.type,
+    `threshold ${finite(assertion.threshold)}`,
+    `weight ${finite(assertion.weight)}`,
+    duration(assertion.durationMs),
+    assertion.usage ? `${compactNumber(totalTokens(assertion.usage))} judge tokens` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+const assertionDiagnostics = (assertion) => {
+  const rows = [
+    assertion.comment ? `<p class="assertion-comment">${escapeHtml(assertion.comment)}</p>` : "",
+    assertion.errorMessage
+      ? `<p class="diagnostic-error">${escapeHtml(assertion.errorMessage)}</p>`
+      : "",
+    assertion.detail !== undefined
+      ? `<details class="diagnostic"><summary>Structured detail</summary><pre>${escapeHtml(
+          json(assertion.detail),
+        )}</pre></details>`
+      : "",
+  ];
+  return rows.join("");
+};
+
+const inferredMetricUnit = (name, unit) => {
+  if (unit) return unit;
+  if (name.endsWith("Ms")) return "milliseconds";
+  if (name.endsWith(".bytes")) return "bytes";
+  if (name.endsWith(".usd")) return "usd";
+  if (name.endsWith("Rate")) return "ratio";
+  if (
+    name.includes("tokens") ||
+    /(?:^|\.)(?:input|output|total|cacheRead|cacheCreation)$/.test(name)
+  ) {
+    return "tokens";
+  }
+  return "number";
+};
+
+const driverMetricStats = (metrics) =>
+  Object.entries(metrics ?? {})
+    .map(
+      ([name, metric]) =>
+        `<div><dt>${escapeHtml(metricName(name, metric.label))}</dt><dd>${escapeHtml(
+          metricValue(metric.value, metric.unit),
+        )}</dd><small>${escapeHtml(name)}</small></div>`,
+    )
+    .join("");
+
+export const renderRunDetail = (item, detail) => {
+  const metadata = detail.metadata;
+  const grading = detail.grading;
+  const assertions = grading?.assertions ?? [];
+  const events = detail.events ?? [];
+  const artifacts = detail.artifacts ?? [];
+  const agentTokens = totalTokens(metadata?.usage?.agent);
+  const answererTokens = totalTokens(metadata?.usage?.answerer);
+  const gradingTokens = totalTokens(metadata?.usage?.grading);
+  const harnessTokens = answererTokens + gradingTokens;
+  const phase = metadata?.phaseDurationMs;
+  const actionTiming = metadata?.actionTiming;
+  const prompt = detail.case?.prompt;
+  const driverMetrics = driverMetricStats(metadata?.driverMetrics);
+  return `
+    <header class="detail-header">
+      <div class="detail-kicker">
+        ${badge(item.status)}
+        <span class="detail-path">${escapeHtml(item.path)}</span>
+      </div>
+      <div class="detail-title-row">
+        <div>
+          <h2>${escapeHtml(detail.case?.id ?? item.caseId)}</h2>
+          <p class="detail-subtitle">${escapeHtml(
+            [metadata?.driver?.name, metadata?.driver?.model, fullDate(metadata?.startedAt)]
+              .filter(Boolean)
+              .join(" · "),
+          )}</p>
+        </div>
+        <div class="score-block">
+          <strong>${escapeHtml(percentage(grading?.caseScore))}</strong>
+          <small>case score</small>
+        </div>
+      </div>
+    </header>
+    <div class="detail-body">
+      ${
+        grading?.incomplete
+          ? `<div class="attention-banner">Incomplete ${escapeHtml(
+              grading.incomplete.phase ?? "run",
+            )}: ${escapeHtml(grading.incomplete.exitReason)}</div>`
+          : ""
+      }
+      <dl class="detail-stats">
+        <div><dt>Duration</dt><dd>${escapeHtml(duration(item.durationMs))}</dd></div>
+        <div><dt>Agent tokens</dt><dd>${escapeHtml(compactNumber(agentTokens))}</dd></div>
+        <div><dt>Harness tokens</dt><dd>${escapeHtml(compactNumber(harnessTokens))}</dd></div>
+        <div><dt>Artifacts</dt><dd>${artifacts.length}</dd></div>
+        <div><dt>First action</dt><dd>${escapeHtml(duration(actionTiming?.timeToFirstActionMs))}</dd></div>
+        <div><dt>First mutation</dt><dd>${escapeHtml(duration(actionTiming?.timeToFirstMutationMs))}</dd></div>
+        <div><dt>First durable mutation</dt><dd>${escapeHtml(
+          duration(actionTiming?.timeToFirstDurableMutationMs),
+        )}</dd></div>
+      </dl>
+      ${
+        driverMetrics
+          ? `<section class="detail-section"><h3>Driver metrics <span>reported by ${escapeHtml(
+              metadata?.driver?.name ?? "driver",
+            )}</span></h3><dl class="detail-stats driver-metrics">${driverMetrics}</dl></section>`
+          : ""
+      }
+      <div class="evidence-visual-grid">
+        ${compositionFigure(
+          "Judgment outcome",
+          [
+            {
+              key: "passed",
+              label: "Passed",
+              value: assertions.filter((assertion) => assertion.passed).length,
+            },
+            {
+              key: "regressed",
+              label: "Failed",
+              value: assertions.filter((assertion) => !assertion.passed).length,
+            },
+          ],
+          `${assertions.filter((assertion) => assertion.passed).length} of ${
+            assertions.length
+          } assertions passed`,
+        )}
+        ${
+          agentTokens + answererTokens + gradingTokens > 0
+            ? compositionFigure(
+                "Token composition",
+                [
+                  { key: "agent", label: "Agent", value: agentTokens },
+                  { key: "answerer", label: "Answerer", value: answererTokens },
+                  { key: "grading", label: "Grading", value: gradingTokens },
+                ],
+                `${agentTokens} agent, ${answererTokens} answerer, ${gradingTokens} grading tokens`,
+              )
+            : ""
+        }
+        ${
+          phase
+            ? compositionFigure(
+                "Runtime composition",
+                [
+                  { key: "agent", label: "Agent", value: phase.agent },
+                  { key: "collect", label: "Collect", value: phase.collect },
+                  { key: "grading", label: "Grading", value: phase.grading },
+                ],
+                `${duration(phase.agent)} agent, ${duration(phase.collect)} collection, ${duration(
+                  phase.grading,
+                )} grading`,
+              )
+            : ""
+        }
+      </div>
+      ${
+        prompt
+          ? `<section class="detail-section"><h3>Case prompt</h3><div class="prompt-block">${escapeHtml(
+              prompt,
+            )}</div></section>`
+          : ""
+      }
+      <section class="detail-section">
+        <h3>Judgment <span>${assertions.filter((entry) => entry.passed).length}/${assertions.length} passed</span></h3>
+        <div class="assertion-list">
+          ${
+            assertions.length
+              ? assertions
+                  .map(
+                    (assertion) => `
+                    <article class="assertion${assertion.passed ? " passed" : ""}">
+                      <span class="assertion-mark">${assertion.passed ? "✓" : "×"}</span>
+                      <span class="assertion-content">
+                        <strong>${escapeHtml(assertion.name)}</strong>
+                        <small>${escapeHtml(assertionMeta(assertion))}</small>
+                        ${quantizedBar(
+                          assertion.score,
+                          assertion.passed ? "tone-positive" : "tone-negative",
+                          `${assertion.name} scored ${percentage(
+                            assertion.score,
+                          )}; threshold ${percentage(assertion.threshold)}`,
+                          assertion.threshold,
+                        )}
+                        ${assertionDiagnostics(assertion)}
+                      </span>
+                      <span class="assertion-score">${escapeHtml(
+                        percentage(assertion.score),
+                      )}</span>
+                    </article>`,
+                  )
+                  .join("")
+              : '<div class="artifact"><span>No grading assertions recorded</span><small>ungraded</small></div>'
+          }
+        </div>
+      </section>
+      <section class="detail-section">
+        <h3>Trace <span>${events.length} events</span></h3>
+        <div class="trace-list">
+          ${
+            events.length
+              ? events
+                  .map((event) => {
+                    const [title, content] = eventContent(event);
+                    return `<article class="trace-item">
+                      <time>${escapeHtml(eventTime(event, metadata?.startedAt))}</time>
+                      <div><strong>${escapeHtml(title)}</strong><p>${escapeHtml(content)}</p></div>
+                    </article>`;
+                  })
+                  .join("")
+              : '<div class="artifact"><span>No trace events recorded</span><small>empty</small></div>'
+          }
+        </div>
+      </section>
+      <section class="detail-section">
+        <h3>Artifacts <span>${artifacts.length} files</span></h3>
+        <div class="artifact-list">
+          ${
+            artifacts.length
+              ? artifacts
+                  .map(
+                    (artifact) => `<button class="artifact artifact-button" type="button"
+                      data-artifact="${escapeHtml(artifact)}">
+                      <span>${escapeHtml(artifact)}</span><small>preview →</small>
+                    </button>`,
+                  )
+                  .join("")
+              : '<div class="artifact"><span>No captured artifacts</span><small>empty</small></div>'
+          }
+        </div>
+      </section>
+    </div>`;
+};
+
+const suiteItemStatus = (item) => {
+  if (item.status !== "completed") return item.status;
+  if (item.exitReason !== "done" || item.casePassed === false) return "failed";
+  if (item.casePassed === true) return "passed";
+  return "ungraded";
+};
+
+const metricSummaryRows = (metrics) =>
+  Object.entries(metrics ?? {})
+    .map(
+      ([name, summary]) => `<tr>
+        <td>${escapeHtml(name)}</td>
+        <td>${escapeHtml(metricValue(summary.mean, inferredMetricUnit(name, summary.unit)))}</td>
+        <td>${escapeHtml(metricValue(summary.median, inferredMetricUnit(name, summary.unit)))}</td>
+        <td>${escapeHtml(metricValue(summary.p90, inferredMetricUnit(name, summary.unit)))}</td>
+        <td>${summary.n}</td>
+      </tr>`,
+    )
+    .join("");
+
+export const renderSuiteDetail = (item, payload) => {
+  const summary = payload?.summary;
+  const totals = summary?.totals;
+  const metrics = metricSummaryRows(summary?.metrics);
+  return `
+    <header class="detail-header">
+      <div class="detail-kicker">${badge(item.status)}<span class="detail-path">${escapeHtml(
+        item.path,
+      )}</span></div>
+      <div class="detail-title-row">
+        <div><h2>${escapeHtml(item.suiteId)}</h2><p class="detail-subtitle">${escapeHtml(
+          `${item.profileId ?? "default profile"} · ${fullDate(item.startedAt)}`,
+        )}</p></div>
+        <div class="score-block"><strong>${escapeHtml(
+          percentage(totals?.passRate),
+        )}</strong><small>${totals?.passed ?? 0}/${totals?.attempts ?? item.items.length} cases passed</small></div>
+      </div>
+    </header>
+    <div class="detail-body">
+      <dl class="detail-stats">
+        <div><dt>Attempts</dt><dd>${totals?.attempts ?? item.items.length}</dd></div>
+        <div><dt>Concurrency</dt><dd>${item.concurrency}</dd></div>
+        <div><dt>Failed</dt><dd>${totals?.failed ?? 0}</dd></div>
+        <div><dt>Pending</dt><dd>${totals?.pending ?? 0}</dd></div>
+      </dl>
+      ${compositionFigure(
+        "Suite outcomes",
+        [
+          { key: "passed", label: "Passed", value: totals?.passed ?? 0 },
+          { key: "regressed", label: "Failed", value: totals?.failed ?? 0 },
+          { key: "ungraded", label: "Ungraded", value: totals?.ungraded ?? 0 },
+          { key: "pending", label: "Pending", value: totals?.pending ?? 0 },
+        ],
+        `${totals?.passed ?? 0} passed, ${totals?.failed ?? 0} failed, ${
+          totals?.ungraded ?? 0
+        } ungraded, ${totals?.pending ?? 0} pending`,
+      )}
+      ${
+        metrics
+          ? `<section class="detail-section">
+              <h3>Aggregate metrics <span>mean / median / p90</span></h3>
+              <div class="matrix-wrap"><table class="matrix">
+                <thead><tr><th>Metric</th><th>Mean</th><th>Median</th><th>P90</th><th>N</th></tr></thead>
+                <tbody>${metrics}</tbody>
+              </table></div>
+            </section>`
+          : ""
+      }
+      <section class="detail-section">
+        <h3>Case attempts <span>${item.items.length} total</span></h3>
+        <div class="suite-list">
+          ${item.items
+            .map((entry) => {
+              const content = `<span>${escapeHtml(entry.caseId)}</span>
+                <small>${escapeHtml(statusLabel(suiteItemStatus(entry)))}</small>`;
+              return entry.runId
+                ? `<button class="suite-item suite-button" type="button" data-open-run="${escapeHtml(
+                    entry.runId,
+                  )}">${content}</button>`
+                : `<div class="suite-item">${content}</div>`;
+            })
+            .join("")}
+        </div>
+      </section>
+    </div>`;
+};
+
+const candidateById = (payload, id) => payload.candidates.find((candidate) => candidate.id === id);
+
+const baselineCandidate = (payload) =>
+  candidateById(payload, "baseline") ??
+  payload.candidates.find((candidate) => candidate.parentIds.length === 0) ??
+  payload.candidates[0] ??
+  null;
+
+const evaluationKey = (evaluation) => `${evaluation.profileId}/${evaluation.split}`;
+
+const caseDeltaRows = (baseline, target) => {
+  const cases = new Set([
+    ...Object.keys(baseline?.casePassRates ?? {}),
+    ...Object.keys(target?.casePassRates ?? {}),
+  ]);
+  return [...cases]
+    .sort()
+    .map((caseId) => {
+      const before = baseline?.casePassRates?.[caseId];
+      const after = target?.casePassRates?.[caseId];
+      const delta = typeof before === "number" && typeof after === "number" ? after - before : null;
+      return `<tr>
+        <td>${escapeHtml(caseId)}</td>
+        <td class="bar-table-cell">${quantizedBar(
+          before,
+          "tone-before",
+          `${caseId} baseline pass rate ${percentage(before)}`,
+        )}<small>${escapeHtml(percentage(before))}</small></td>
+        <td class="bar-table-cell">${quantizedBar(
+          after,
+          "tone-after",
+          `${caseId} candidate pass rate ${percentage(after)}`,
+        )}<small>${escapeHtml(percentage(after))}</small></td>
+        <td class="${toneForDelta(delta)}">${escapeHtml(signedPercentage(delta))}</td>
+      </tr>`;
+    })
+    .join("");
+};
+
+const evaluationMetricComparisons = (before, after) => {
+  const definitions = { ...(before?.metricDefinitions ?? {}), ...(after?.metricDefinitions ?? {}) };
+  return Object.keys(definitions)
+    .sort()
+    .map((name) => {
+      const definition = definitions[name];
+      const a = before?.metrics?.[name];
+      const b = after?.metrics?.[name];
+      const delta = typeof a === "number" && typeof b === "number" ? b - a : null;
+      const tone =
+        definition.better === "neutral"
+          ? "metric-neutral"
+          : toneForDelta(delta, definition.better === "lower");
+      return comparisonBars({
+        title: metricName(name, definition.label),
+        before: a,
+        after: b,
+        beforeText: metricValue(a, definition.unit),
+        afterText: metricValue(b, definition.unit),
+        deltaText: signedMetricValue(delta, definition.unit),
+        deltaTone: tone,
+      });
+    })
+    .join("");
+};
+
+const experimentScopes = (baselineEvaluations, targetEvaluations) => {
+  const baselineByKey = new Map(baselineEvaluations.map((entry) => [evaluationKey(entry), entry]));
+  const targetByKey = new Map(targetEvaluations.map((entry) => [evaluationKey(entry), entry]));
+  const keys = new Set([...baselineByKey.keys(), ...targetByKey.keys()]);
+  return [...keys]
+    .sort()
+    .map((key) => {
+      const before = baselineByKey.get(key);
+      const after = targetByKey.get(key);
+      const delta =
+        typeof before?.passRate === "number" && typeof after?.passRate === "number"
+          ? after.passRate - before.passRate
+          : null;
+      const metrics = evaluationMetricComparisons(before, after);
+      return `<article class="comparison-scope">
+        <header>
+          <strong>${escapeHtml(key)}</strong>
+          <span class="${toneForDelta(delta)}">${escapeHtml(signedPercentage(delta))}</span>
+        </header>
+        <div class="matrix-wrap"><table class="matrix">
+          <thead><tr><th>Case</th><th>Baseline</th><th>Candidate</th><th>Δ</th></tr></thead>
+          <tbody>${caseDeltaRows(before, after) || '<tr><td colspan="4">No per-case evidence.</td></tr>'}</tbody>
+        </table></div>
+        ${metrics ? `<div class="comparison-plot-grid experiment-metrics">${metrics}</div>` : ""}
+      </article>`;
+    })
+    .join("");
+};
+
+const candidateLandscape = (evaluations, baselineId, targetId) => {
+  const rows = evaluations
+    .slice()
+    .sort((left, right) =>
+      `${left.profileId}/${left.split}/${left.candidateId}`.localeCompare(
+        `${right.profileId}/${right.split}/${right.candidateId}`,
+      ),
+    )
+    .map((evaluation) => {
+      let role = "peer";
+      let tone = "tone-neutral";
+      if (evaluation.candidateId === baselineId) {
+        role = "baseline";
+        tone = "tone-before";
+      } else if (evaluation.candidateId === targetId) {
+        role = "target";
+        tone = "tone-after";
+      }
+      return `<div class="landscape-row ${role}">
+        <span><strong>${escapeHtml(evaluation.candidateId)}</strong><small>${escapeHtml(
+          `${evaluation.profileId} / ${evaluation.split}`,
+        )}</small></span>
+        ${quantizedBar(
+          evaluation.passRate,
+          tone,
+          `${evaluation.candidateId} ${evaluation.profileId} ${evaluation.split} pass rate ${percentage(
+            evaluation.passRate,
+          )}`,
+        )}
+        <b>${escapeHtml(percentage(evaluation.passRate))}</b>
+      </div>`;
+    })
+    .join("");
+  return `<figure class="candidate-landscape">
+    <figcaption><span>Candidate pass-rate landscape</span><small>shared 0–100% scale</small></figcaption>
+    <div class="landscape-axis"><span>0</span><span>50</span><span>100%</span></div>
+    ${rows || '<div class="artifact"><span>No completed candidate evaluations</span><small>empty</small></div>'}
+  </figure>`;
+};
+
+const budgetUtilization = (decision) => {
+  if (!decision) return "";
+  const entries = [
+    ["Candidates", decision.spend.candidates, decision.budget.maxCandidates, "count"],
+    ["Metric calls", decision.spend.metricCalls, decision.budget.maxMetricCalls, "count"],
+    ["Judge calls", decision.spend.judgeCalls, decision.budget.maxJudgeCalls, "count"],
+    ["Proposal calls", decision.spend.proposalCalls, decision.budget.maxProposalCalls, "count"],
+    ["Tokens", decision.spend.totalTokens, decision.budget.maxTokens, "compact"],
+    ["Cost", decision.spend.costUsd, decision.budget.maxCostUsd, "currency"],
+    ["Active time", decision.spend.activeTimeMs, decision.budget.maxWallTimeMs, "duration"],
+  ];
+  const formatValue = (value, kind) => {
+    if (kind === "compact") return compactNumber(value);
+    if (kind === "currency") return `$${finite(value)}`;
+    if (kind === "duration") return duration(value);
+    return finite(value, 0);
+  };
+  return `<figure class="budget-visual">
+    <figcaption><span>Budget utilization</span><small>observed / ceiling</small></figcaption>
+    ${entries
+      .map(([label, value, limit, kind]) => {
+        const ratio = limit > 0 ? value / limit : 0;
+        return `<div class="budget-row">
+          <span>${escapeHtml(label)}</span>
+          ${quantizedBar(
+            ratio,
+            ratio > 0.9 ? "tone-negative" : "tone-neutral",
+            `${label} ${formatValue(value, kind)} of ${formatValue(limit, kind)}`,
+          )}
+          <b>${escapeHtml(`${formatValue(value, kind)} / ${formatValue(limit, kind)}`)}</b>
+        </div>`;
+      })
+      .join("")}
+  </figure>`;
+};
+
+const failedEvidence = (evaluations) =>
+  evaluations
+    .flatMap((evaluation) =>
+      evaluation.failedCases.map((failure) => ({
+        ...failure,
+        scope: evaluationKey(evaluation),
+      })),
+    )
+    .map(
+      (failure) => `<article class="failure-card">
+        <header><strong>${escapeHtml(failure.caseId)}</strong><small>${escapeHtml(
+          failure.scope,
+        )} · ${escapeHtml(percentage(failure.score))}</small></header>
+        ${
+          failure.feedback.length
+            ? `<ul>${failure.feedback.map((entry) => `<li>${escapeHtml(entry)}</li>`).join("")}</ul>`
+            : "<p>No evaluator feedback recorded.</p>"
+        }
+      </article>`,
+    )
+    .join("");
+
+export const experimentTargetId = (payload, requested) => {
+  const baseline = baselineCandidate(payload);
+  const ids = new Set(payload.experiment.evaluations.map((entry) => entry.candidateId));
+  if (requested && ids.has(requested)) return requested;
+  const champion = payload.experiment.championCandidateId;
+  if (champion && ids.has(champion)) return champion;
+  return [...ids].find((id) => id !== baseline?.id) ?? [...ids][0] ?? null;
+};
+
+export const renderExperimentDetail = (item, payload, requestedTargetId) => {
+  const experiment = payload.experiment;
+  const decision = payload.decision;
+  const baseline = baselineCandidate(payload);
+  const targetId = experimentTargetId(payload, requestedTargetId);
+  const target = targetId ? candidateById(payload, targetId) : null;
+  const baselineEvaluations = experiment.evaluations.filter(
+    (evaluation) => evaluation.candidateId === baseline?.id,
+  );
+  const targetEvaluations = experiment.evaluations.filter(
+    (evaluation) => evaluation.candidateId === targetId,
+  );
+  const options = [...new Set(experiment.evaluations.map((entry) => entry.candidateId))]
+    .filter((id) => id !== baseline?.id || id === targetId)
+    .map(
+      (id) =>
+        `<option value="${escapeHtml(id)}"${id === targetId ? " selected" : ""}>${escapeHtml(
+          id,
+        )}</option>`,
+    )
+    .join("");
+  const gates = (decision?.gates ?? [])
+    .map(
+      (gate) => `<article class="gate ${gate.passed ? "passed" : "failed"}">
+        <span>${gate.passed ? "✓" : "×"}</span>
+        <div><strong>${escapeHtml(gate.metric)}</strong><small>${escapeHtml(
+          [gate.profile, gate.split, gate.interval, gate.note].filter(Boolean).join(" · "),
+        )}</small></div>
+        <b>${gate.values.map((value) => finite(value)).join(", ")}</b>
+      </article>`,
+    )
+    .join("");
+  const lineage = target
+    ? `<article class="lineage-card">
+        <span>${escapeHtml(target.id)}</span>
+        <small>from ${escapeHtml(target.parentIds.join(" + ") || "root")} · ${escapeHtml(
+          target.proposer,
+        )} · ${compactNumber(target.sourceBytes)} bytes</small>
+        ${target.rationale ? `<p>${escapeHtml(target.rationale)}</p>` : ""}
+        <div>${target.components
+          .map((component) => `<code>${escapeHtml(component)}</code>`)
+          .join("")}</div>
+      </article>`
+    : "";
+  return `
+    <header class="detail-header">
+      <div class="detail-kicker">${badge(item.status)}<span class="detail-path">${escapeHtml(
+        item.path,
+      )}</span></div>
+      <div class="detail-title-row">
+        <div><h2>${escapeHtml(item.campaignId)}</h2><p class="detail-subtitle">${escapeHtml(
+          `${item.mode} · ${fullDate(item.startedAt)} · ${item.experimentId}`,
+        )}</p></div>
+        <div class="score-block"><strong>${escapeHtml(
+          decision?.outcome ? statusLabel(decision.outcome) : item.candidateCount,
+        )}</strong><small>${decision?.outcome ? "verified decision" : "candidates"}</small></div>
+      </div>
+    </header>
+    <div class="detail-body">
+      ${
+        payload.integrity.verified
+          ? '<div class="integrity-banner">✓ Candidate ledger and accounting verified</div>'
+          : `<div class="attention-banner">Integrity unavailable: ${escapeHtml(
+              payload.integrity.errors.join(" · "),
+            )}</div>`
+      }
+      <dl class="detail-stats">
+        <div><dt>Champion</dt><dd>${escapeHtml(experiment.championCandidateId ?? "—")}</dd></div>
+        <div><dt>Active time</dt><dd>${escapeHtml(duration(experiment.activeTimeMs))}</dd></div>
+        <div><dt>Judge calls</dt><dd>${experiment.budgetUsage.judgeCalls}</dd></div>
+        <div><dt>Spend</dt><dd>$${experiment.budgetUsage.costUsd.toFixed(2)}</dd></div>
+      </dl>
+      <div class="experiment-visuals">
+        ${candidateLandscape(experiment.evaluations, baseline?.id, targetId)}
+        ${budgetUtilization(decision)}
+      </div>
+      ${
+        decision
+          ? `<section class="detail-section">
+              <h3>Promotion gates <span>${decision.gates.filter((gate) => gate.passed).length}/${decision.gates.length} passed</span></h3>
+              <div class="gate-list">${gates || '<div class="artifact"><span>No completed gates</span><small>incomplete</small></div>'}</div>
+              <div class="decision-meta">
+                <span>Ranking</span><strong>${escapeHtml(decision.ranking.join(" → ") || "—")}</strong>
+                <span>Eligible</span><strong>${escapeHtml(
+                  decision.eligibleCandidateIds.join(", ") || "none",
+                )}</strong>
+              </div>
+            </section>`
+          : ""
+      }
+      <section class="detail-section">
+        <div class="section-heading">
+          <h3>Candidate comparison <span>baseline → target</span></h3>
+          ${
+            options
+              ? `<label class="candidate-picker">Target <select data-candidate-target>${options}</select></label>`
+              : ""
+          }
+        </div>
+        ${lineage}
+        <div class="comparison-scopes">
+          ${experimentScopes(baselineEvaluations, targetEvaluations) || '<div class="artifact"><span>No comparable evaluations</span><small>empty</small></div>'}
+        </div>
+      </section>
+      ${
+        failedEvidence(targetEvaluations)
+          ? `<section class="detail-section"><h3>Failed evidence <span>judge feedback</span></h3><div class="failure-list">${failedEvidence(
+              targetEvaluations,
+            )}</div></section>`
+          : ""
+      }
+    </div>`;
+};
+
+const detailAssertionMap = (detail) =>
+  new Map(
+    (detail.grading?.assertions ?? []).map((assertion) => [
+      assertion.id ?? assertion.name,
+      assertion,
+    ]),
+  );
+
+const assertionDeltaRows = (payload) => {
+  const before = detailAssertionMap(payload.before);
+  const after = detailAssertionMap(payload.after);
+  return payload.comparison.grading.deltas
+    .map((delta) => {
+      const beforeAssertion = before.get(delta.id);
+      const afterAssertion = after.get(delta.id);
+      return `<tr>
+        <td><strong>${escapeHtml(delta.name)}</strong><small>${escapeHtml(delta.type)}</small></td>
+        <td>${escapeHtml(percentage(delta.before?.score))}</td>
+        <td>${escapeHtml(percentage(delta.after?.score))}</td>
+        <td><span class="delta-badge ${escapeHtml(delta.status)}">${escapeHtml(
+          delta.status,
+        )}</span></td>
+        <td class="rationale-cell">
+          <span>${escapeHtml(beforeAssertion?.comment ?? "—")}</span>
+          <b>→</b>
+          <span>${escapeHtml(afterAssertion?.comment ?? "—")}</span>
+        </td>
+      </tr>`;
+    })
+    .join("");
+};
+
+const artifactDelta = (payload) => {
+  const groups = [
+    ["changed", payload.comparison.artifactsDelta.changed],
+    ["added", payload.comparison.artifactsDelta.added],
+    ["removed", payload.comparison.artifactsDelta.removed],
+  ];
+  return groups
+    .flatMap(([status, paths]) =>
+      paths.map((path) => {
+        const clickable = status === "changed" || status === "added" || status === "removed";
+        const content = `<span>${escapeHtml(path)}</span><small>${escapeHtml(status)}${
+          clickable ? " →" : ""
+        }</small>`;
+        return clickable
+          ? `<button class="artifact artifact-button ${escapeHtml(
+              status,
+            )}" type="button" data-compare-artifact="${escapeHtml(path)}">${content}</button>`
+          : `<div class="artifact">${content}</div>`;
+      }),
+    )
+    .join("");
+};
+
+const signedMetricValue = (value, unit) => {
+  if (typeof value !== "number") return "—";
+  if (unit === "milliseconds") return signedDuration(value);
+  if (unit === "ratio" || unit === "score") return signedPercentage(value);
+  return `${value > 0 ? "+" : ""}${metricValue(value, unit)}`;
+};
+
+const driverMetricComparisons = (runDelta) => {
+  const before = runDelta?.driverMetrics?.a ?? {};
+  const after = runDelta?.driverMetrics?.b ?? {};
+  const names = [...new Set([...Object.keys(before), ...Object.keys(after)])].sort();
+  return names
+    .map((name) => {
+      const a = before[name];
+      const b = after[name];
+      const unit = a?.unit ?? b?.unit ?? "number";
+      const comparable = a && b && a.unit === b.unit;
+      const delta = comparable ? b.value - a.value : null;
+      const better = b?.better ?? a?.better ?? "neutral";
+      const tone =
+        better === "neutral" ? "metric-neutral" : toneForDelta(delta, better === "lower");
+      return comparisonBars({
+        title: metricName(name, b?.label ?? a?.label),
+        before: a?.value,
+        after: b?.value,
+        beforeText: metricValue(a?.value, unit),
+        afterText: metricValue(b?.value, unit),
+        deltaText: comparable ? signedMetricValue(delta, unit) : "not paired",
+        deltaTone: tone,
+      });
+    })
+    .join("");
+};
+
+export const renderRunComparison = (payload, labels) => {
+  const comparison = payload.comparison;
+  const runDelta = comparison.runDelta;
+  const durationDelta =
+    typeof runDelta?.durationMsA === "number" && typeof runDelta?.durationMsB === "number"
+      ? runDelta.durationMsB - runDelta.durationMsA
+      : null;
+  const mutationA = runDelta?.actionTiming?.a?.timeToFirstMutationMs;
+  const mutationB = runDelta?.actionTiming?.b?.timeToFirstMutationMs;
+  const mutationDelta =
+    typeof mutationA === "number" && typeof mutationB === "number" ? mutationB - mutationA : null;
+  const tokenA = totalTokens(runDelta?.usage?.a?.agent);
+  const tokenB = totalTokens(runDelta?.usage?.b?.agent);
+  const tokenDelta = tokenB - tokenA;
+  const scoreDelta =
+    typeof comparison.grading.caseScoreA === "number" &&
+    typeof comparison.grading.caseScoreB === "number"
+      ? comparison.grading.caseScoreB - comparison.grading.caseScoreA
+      : null;
+  const driverMetrics = driverMetricComparisons(runDelta);
+  return `
+    <header class="detail-header comparison-header">
+      <div class="detail-kicker">${badge(
+        comparison.grading.regressions ? "failed" : "passed",
+      )}<span>run comparison</span></div>
+      <div class="detail-title-row">
+        <div><h2>${escapeHtml(labels.before)} → ${escapeHtml(
+          labels.after,
+        )}</h2><p class="detail-subtitle">Baseline A compared with candidate B</p></div>
+        <button class="secondary-button" type="button" data-close-compare>Done</button>
+      </div>
+    </header>
+    <div class="detail-body">
+      ${
+        comparison.caseMismatch.length
+          ? `<div class="attention-banner">Evidence identity differs: ${escapeHtml(
+              comparison.caseMismatch.map((entry) => entry.field).join(", "),
+            )}. Treat deltas as potentially incomparable.</div>`
+          : '<div class="integrity-banner">✓ Case, evaluator, runtime, and driver identities are comparable</div>'
+      }
+      <dl class="comparison-stats">
+        <div><dt>Case score</dt><dd>${escapeHtml(
+          `${percentage(comparison.grading.caseScoreA)} → ${percentage(
+            comparison.grading.caseScoreB,
+          )}`,
+        )}</dd><small class="${toneForDelta(scoreDelta)}">${escapeHtml(
+          signedPercentage(scoreDelta),
+        )}</small></div>
+        <div><dt>Duration</dt><dd>${escapeHtml(
+          `${duration(runDelta?.durationMsA)} → ${duration(runDelta?.durationMsB)}`,
+        )}</dd><small class="${toneForDelta(durationDelta, true)}">${escapeHtml(
+          signedDuration(durationDelta),
+        )}</small></div>
+        <div><dt>First mutation</dt><dd>${escapeHtml(
+          `${duration(mutationA)} → ${duration(mutationB)}`,
+        )}</dd><small class="${toneForDelta(mutationDelta, true)}">${escapeHtml(
+          signedDuration(mutationDelta),
+        )}</small></div>
+        <div><dt>Agent tokens</dt><dd>${escapeHtml(
+          `${compactNumber(tokenA)} → ${compactNumber(tokenB)}`,
+        )}</dd><small class="${toneForDelta(tokenDelta, true)}">${tokenDelta > 0 ? "+" : ""}${escapeHtml(
+          compactNumber(tokenDelta),
+        )}</small></div>
+        <div><dt>Assertions</dt><dd>${comparison.grading.improvements} ↑ / ${comparison.grading.regressions} ↓</dd><small>${comparison.grading.deltas.length} compared</small></div>
+      </dl>
+      <section class="detail-section">
+        <h3>Comparison profile <span>shared scales within each measure</span></h3>
+        <div class="comparison-plot-grid">
+          ${comparisonBars({
+            title: "Case score",
+            before: comparison.grading.caseScoreA,
+            after: comparison.grading.caseScoreB,
+            maximum: 1,
+            beforeText: percentage(comparison.grading.caseScoreA),
+            afterText: percentage(comparison.grading.caseScoreB),
+            deltaText: signedPercentage(scoreDelta),
+            deltaTone: toneForDelta(scoreDelta),
+          })}
+          ${comparisonBars({
+            title: "Duration",
+            before: runDelta?.durationMsA,
+            after: runDelta?.durationMsB,
+            beforeText: duration(runDelta?.durationMsA),
+            afterText: duration(runDelta?.durationMsB),
+            deltaText: signedDuration(durationDelta),
+            deltaTone: toneForDelta(durationDelta, true),
+          })}
+          ${comparisonBars({
+            title: "Time to first mutation",
+            before: mutationA,
+            after: mutationB,
+            beforeText: duration(mutationA),
+            afterText: duration(mutationB),
+            deltaText: signedDuration(mutationDelta),
+            deltaTone: toneForDelta(mutationDelta, true),
+          })}
+          ${comparisonBars({
+            title: "Agent tokens",
+            before: tokenA,
+            after: tokenB,
+            beforeText: compactNumber(tokenA),
+            afterText: compactNumber(tokenB),
+            deltaText: `${tokenDelta > 0 ? "+" : ""}${compactNumber(tokenDelta)}`,
+            deltaTone: toneForDelta(tokenDelta, true),
+          })}
+        </div>
+        <div class="comparison-distributions">
+          ${compositionFigure(
+            "Assertion movement",
+            [
+              { key: "improved", label: "Improved", value: comparison.grading.improvements },
+              { key: "regressed", label: "Regressed", value: comparison.grading.regressions },
+              {
+                key: "added",
+                label: "Added",
+                value: comparison.grading.deltas.filter((delta) => delta.status === "added").length,
+              },
+              {
+                key: "removed",
+                label: "Removed",
+                value: comparison.grading.deltas.filter((delta) => delta.status === "removed")
+                  .length,
+              },
+              {
+                key: "unchanged",
+                label: "Unchanged",
+                value: comparison.grading.deltas.filter((delta) => delta.status === "unchanged")
+                  .length,
+              },
+            ],
+            "Distribution of assertion changes",
+          )}
+          ${compositionFigure(
+            "Artifact movement",
+            [
+              {
+                key: "improved",
+                label: "Added",
+                value: comparison.artifactsDelta.added.length,
+              },
+              {
+                key: "regressed",
+                label: "Removed",
+                value: comparison.artifactsDelta.removed.length,
+              },
+              {
+                key: "changed",
+                label: "Changed",
+                value: comparison.artifactsDelta.changed.length,
+              },
+              {
+                key: "unchanged",
+                label: "Unchanged",
+                value: comparison.artifactsDelta.unchanged.length,
+              },
+            ],
+            "Distribution of artifact changes",
+          )}
+        </div>
+      </section>
+      ${
+        driverMetrics
+          ? `<section class="detail-section"><h3>Driver metric comparison <span>shared scale per metric</span></h3><div class="comparison-plot-grid">${driverMetrics}</div></section>`
+          : ""
+      }
+      <section class="detail-section">
+        <h3>Judgment delta <span>rationale side by side</span></h3>
+        <div class="matrix-wrap"><table class="matrix comparison-matrix">
+          <thead><tr><th>Assertion</th><th>A</th><th>B</th><th>Change</th><th>Judge rationale A → B</th></tr></thead>
+          <tbody>${assertionDeltaRows(payload) || '<tr><td colspan="5">No assertions.</td></tr>'}</tbody>
+        </table></div>
+      </section>
+      <section class="detail-section">
+        <h3>Artifacts <span>${comparison.artifactsDelta.changed.length} changed · ${comparison.artifactsDelta.added.length} added · ${comparison.artifactsDelta.removed.length} removed</span></h3>
+        <div class="artifact-list">${artifactDelta(payload) || '<div class="artifact"><span>No artifact changes</span><small>unchanged</small></div>'}</div>
+      </section>
+    </div>`;
+};
+
+const metricDeltaSummary = (metrics) =>
+  Object.entries(metrics)
+    .map(
+      ([name, summary]) =>
+        `<span><b>${escapeHtml(name)}</b> ${escapeHtml(
+          metricValue(summary.mean, inferredMetricUnit(name, summary.unit)),
+        )}</span>`,
+    )
+    .join("");
+
+export const renderSuiteComparison = (payload, labels) => {
+  const comparison = payload.comparison;
+  const movement = { improved: 0, regressed: 0, unchanged: 0, missing: 0 };
+  for (const entry of comparison.cases) {
+    if (!entry.before || !entry.after) movement.missing++;
+    else if (entry.regressed) movement.regressed++;
+    else if ((entry.passRateDelta ?? 0) > 0) movement.improved++;
+    else movement.unchanged++;
+  }
+  return `
+    <header class="detail-header comparison-header">
+      <div class="detail-kicker">${badge(
+        comparison.regressions || comparison.identityMismatches.length ? "failed" : "passed",
+      )}<span>suite comparison</span></div>
+      <div class="detail-title-row">
+        <div><h2>${escapeHtml(labels.before)} → ${escapeHtml(
+          labels.after,
+        )}</h2><p class="detail-subtitle">Repeated evidence with paired case metrics</p></div>
+        <button class="secondary-button" type="button" data-close-compare>Done</button>
+      </div>
+    </header>
+    <div class="detail-body">
+      ${
+        comparison.identityMismatches.length
+          ? `<div class="attention-banner">${comparison.identityMismatches.length} repetition identities differ; those pairs are not directly comparable.</div>`
+          : '<div class="integrity-banner">✓ All paired repetition identities match</div>'
+      }
+      <dl class="comparison-stats">
+        <div><dt>Pass rate</dt><dd>${escapeHtml(
+          `${percentage(comparison.before.passRate)} → ${percentage(comparison.after.passRate)}`,
+        )}</dd><small class="${toneForDelta(comparison.passRateDelta)}">${escapeHtml(
+          signedPercentage(comparison.passRateDelta),
+        )}</small></div>
+        <div><dt>Attempts</dt><dd>${comparison.before.attempts} → ${comparison.after.attempts}</dd><small>paired populations</small></div>
+        <div><dt>Regressions</dt><dd>${comparison.regressions}</dd><small>case-level</small></div>
+        <div><dt>Identity drift</dt><dd>${comparison.identityMismatches.length}</dd><small>repetitions</small></div>
+      </dl>
+      <section class="detail-section">
+        <h3>Outcome movement <span>shared 0–100% scale</span></h3>
+        <div class="suite-outcome-visual">
+          ${comparisonBars({
+            title: "Suite pass rate",
+            before: comparison.before.passRate,
+            after: comparison.after.passRate,
+            maximum: 1,
+            beforeText: percentage(comparison.before.passRate),
+            afterText: percentage(comparison.after.passRate),
+            deltaText: signedPercentage(comparison.passRateDelta),
+            deltaTone: toneForDelta(comparison.passRateDelta),
+          })}
+          ${compositionFigure(
+            "Case movement",
+            [
+              {
+                key: "improved",
+                label: "Improved",
+                value: movement.improved,
+              },
+              {
+                key: "regressed",
+                label: "Regressed",
+                value: movement.regressed,
+              },
+              {
+                key: "unchanged",
+                label: "Unchanged",
+                value: movement.unchanged,
+              },
+              {
+                key: "pending",
+                label: "Missing side",
+                value: movement.missing,
+              },
+            ],
+            "Distribution of per-case suite movement",
+          )}
+        </div>
+      </section>
+      <section class="detail-section">
+        <h3>Per-case delta <span>after − before</span></h3>
+        <div class="matrix-wrap"><table class="matrix comparison-matrix">
+          <thead><tr><th>Case</th><th>Before</th><th>After</th><th>Δ</th><th>Paired metric means</th></tr></thead>
+          <tbody>${comparison.cases
+            .map(
+              (entry) => `<tr class="${entry.regressed ? "row-regressed" : ""}">
+                <td>${escapeHtml(entry.canonicalCaseId)}</td>
+                <td class="bar-table-cell">${quantizedBar(
+                  entry.before?.passRate,
+                  "tone-before",
+                  `${entry.canonicalCaseId} baseline pass rate ${percentage(
+                    entry.before?.passRate,
+                  )}`,
+                )}<small>${escapeHtml(percentage(entry.before?.passRate))} · n=${
+                  entry.before?.attempts ?? 0
+                }</small></td>
+                <td class="bar-table-cell">${quantizedBar(
+                  entry.after?.passRate,
+                  "tone-after",
+                  `${entry.canonicalCaseId} candidate pass rate ${percentage(
+                    entry.after?.passRate,
+                  )}`,
+                )}<small>${escapeHtml(percentage(entry.after?.passRate))} · n=${
+                  entry.after?.attempts ?? 0
+                }</small></td>
+                <td class="${toneForDelta(entry.passRateDelta)}">${escapeHtml(
+                  signedPercentage(entry.passRateDelta),
+                )}</td>
+                <td class="metric-deltas">${metricDeltaSummary(entry.pairedMetricDeltas)}</td>
+              </tr>`,
+            )
+            .join("")}</tbody>
+        </table></div>
+      </section>
+    </div>`;
+};
+
+export { renderArtifactComparison, renderArtifactPreview } from "./artifact-view.js";
+export { detailEmpty };