agent-regression-lab 0.3.0 → 0.5.0

package/docs/superpowers/plans/2026-04-16-regression-atlas-ui-redesign.md

@@ -0,0 +1,1010 @@
+# Regression Atlas UI Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the current generic run-inspection UI with the approved Regression Atlas experience: scenario-graph-led home, industrial-lab shell, cinematic case surfaces, compare chamber, and archive fallback.
+
+**Architecture:** Keep the existing server routes and API payloads, but refactor the UI into explicit view-model and presentation layers. Build the new product shell around the existing `App.tsx` entry, derive atlas data from `/api/runs`, and reuse existing detail/compare payloads for the case and compare surfaces before considering backend changes.
+
+**Tech Stack:** React 19, TypeScript, esbuild, CSS, node:test, react-dom/server
+
+---
+
+## File Structure
+
+### Existing files to modify
+
+- `src/ui/App.tsx` - replace the current page assembly with the atlas shell and route-specific screens
+- `src/ui/styles.css` - replace the current parchment-like dashboard theme with the industrial-lab visual system
+- `tests/launch/ui-smoke.test.ts` - update smoke coverage for the new shell, atlas, case surface, and compare chamber
+
+### Files to create
+
+- `src/ui/types.ts` - shared UI data types moved out of `App.tsx`
+- `src/ui/viewModels.ts` - atlas grouping, scenario summaries, compare staging helpers, formatting helpers
+- `src/ui/components.tsx` - reusable presentation components such as verdict totems, evidence drawer sections, archive rows, and compare staging chips
+
+### Responsibility boundaries
+
+- `App.tsx` should own route resolution, fetch lifecycle, and page composition only
+- `types.ts` should define all UI-facing payload types in one place
+- `viewModels.ts` should transform API payloads into atlas, archive, and evidence structures without React dependencies
+- `components.tsx` should hold presentation primitives reused across atlas, cases, compare, and archive surfaces
+- `styles.css` should define the entire material system, shell layout, motion, and responsive rules
+
+---
+
+### Task 1: Extract Shared UI Types And Atlas View Models
+
+**Files:**
+- Create: `src/ui/types.ts`
+- Create: `src/ui/viewModels.ts`
+- Modify: `src/ui/App.tsx`
+- Modify: `tests/launch/ui-smoke.test.ts`
+
+- [ ] **Step 1: Write the failing tests for atlas derivation and shared exports**
+
+Add these tests to `tests/launch/ui-smoke.test.ts`:
+
+```ts
+import { buildAtlasGroups, createCompareStage, summarizeRuns } from "../../src/ui/viewModels.js";
+
+test("atlas groups scenarios by suite and keeps latest run first", () => {
+  const atlas = buildAtlasGroups([
+    {
+      id: "run_new",
+      scenarioId: "support.refund-correct-order",
+      suite: "support",
+      agentVersionId: "agent_1",
+      provider: "mock",
+      status: "fail",
+      score: 0,
+      durationMs: 22,
+      totalSteps: 4,
+      startedAt: "2026-04-10T00:01:00.000Z",
+    },
+    {
+      id: "run_old",
+      scenarioId: "support.refund-correct-order",
+      suite: "support",
+      agentVersionId: "agent_1",
+      provider: "mock",
+      status: "pass",
+      score: 100,
+      durationMs: 11,
+      totalSteps: 3,
+      startedAt: "2026-04-10T00:00:00.000Z",
+    },
+    {
+      id: "run_ops",
+      scenarioId: "ops.payments-api-alert",
+      suite: "ops",
+      agentVersionId: "agent_2",
+      provider: "http",
+      status: "error",
+      score: 0,
+      durationMs: 15,
+      totalSteps: 2,
+      startedAt: "2026-04-10T00:02:00.000Z",
+    },
+  ]);
+
+  assert.equal(atlas.length, 2);
+  assert.equal(atlas[0]?.suite, "ops");
+  assert.equal(atlas[1]?.scenarios[0]?.latestRun.id, "run_new");
+  assert.equal(atlas[1]?.scenarios[0]?.statusCounts.fail, 1);
+  assert.equal(atlas[1]?.scenarios[0]?.statusCounts.pass, 1);
+});
+
+test("compare staging keeps only compatible atlas picks", () => {
+  const stage = createCompareStage();
+  const staged = stage.pinRun("support.refund-correct-order", "run_a").pinRun("support.refund-correct-order", "run_b");
+
+  assert.deepEqual(staged.runPair, { baseline: "run_a", candidate: "run_b" });
+  assert.equal(staged.isRunCompareReady, true);
+});
+```
+
+- [ ] **Step 2: Run the targeted test to verify it fails**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: FAIL with a module export error for `../../src/ui/viewModels.js` or missing exports.
+
+- [ ] **Step 3: Create the shared type file**
+
+Create `src/ui/types.ts`:
+
+```ts
+export type RunListItem = {
+  id: string;
+  scenarioId: string;
+  suite: string;
+  suiteBatchId?: string;
+  variantSetName?: string;
+  variantLabel?: string;
+  agentVersionId: string;
+  agentLabel?: string;
+  provider?: string;
+  modelId?: string;
+  status: "pass" | "fail" | "error";
+  score: number;
+  durationMs: number;
+  totalSteps: number;
+  startedAt: string;
+};
+
+export type RunDetail = {
+  run: {
+    id: string;
+    scenarioId: string;
+    status: string;
+    score: number;
+    durationMs: number;
+    totalSteps: number;
+    terminationReason: string;
+    finalOutput: string;
+    startedAt: string;
+    variantSetName?: string;
+    variantLabel?: string;
+    promptVersion?: string;
+    modelVersion?: string;
+    toolSchemaVersion?: string;
+    configLabel?: string;
+    configHash?: string;
+    runtimeProfileName?: string;
+    suiteDefinitionName?: string;
+  };
+  agentVersion?: {
+    provider?: string;
+    modelId?: string;
+    label: string;
+    command?: string;
+    args?: string[];
+    variantSetName?: string;
+    variantLabel?: string;
+    promptVersion?: string;
+    modelVersion?: string;
+    toolSchemaVersion?: string;
+    configLabel?: string;
+    configHash?: string;
+    runtimeProfileName?: string;
+    suiteDefinitionName?: string;
+  };
+  evaluatorResults: Array<{ evaluatorId: string; status: string; message: string }>;
+  toolCalls: Array<{ id: string; toolName: string; input: unknown; output?: unknown; status: string }>;
+  traceEvents: Array<{ eventId: string; stepIndex: number; source: string; type: string; payload: Record<string, unknown> }>;
+  errorDetail?: string;
+};
+```
+
+- [ ] **Step 4: Implement atlas and compare-staging view models**
+
+Create `src/ui/viewModels.ts`:
+
+```ts
+import type { RunListItem } from "./types.js";
+
+export type AtlasScenario = {
+  scenarioId: string;
+  suite: string;
+  latestRun: RunListItem;
+  runs: RunListItem[];
+  statusCounts: { pass: number; fail: number; error: number };
+};
+
+export type AtlasGroup = {
+  suite: string;
+  scenarios: AtlasScenario[];
+  latestStartedAt: string;
+};
+
+export function buildAtlasGroups(runs: RunListItem[]): AtlasGroup[] {
+  const byScenario = new Map<string, RunListItem[]>();
+  for (const run of runs) {
+    const key = `${run.suite}::${run.scenarioId}`;
+    byScenario.set(key, [...(byScenario.get(key) ?? []), run].sort((a, b) => b.startedAt.localeCompare(a.startedAt)));
+  }
+
+  const scenarios = [...byScenario.values()].map((scenarioRuns) => {
+    const latestRun = scenarioRuns[0]!;
+    return {
+      scenarioId: latestRun.scenarioId,
+      suite: latestRun.suite,
+      latestRun,
+      runs: scenarioRuns,
+      statusCounts: scenarioRuns.reduce(
+        (counts, run) => ({ ...counts, [run.status]: counts[run.status] + 1 }),
+        { pass: 0, fail: 0, error: 0 },
+      ),
+    };
+  });
+
+  const bySuite = new Map<string, AtlasScenario[]>();
+  for (const scenario of scenarios) {
+    bySuite.set(scenario.suite, [...(bySuite.get(scenario.suite) ?? []), scenario]);
+  }
+
+  return [...bySuite.entries()]
+    .map(([suite, suiteScenarios]) => ({
+      suite,
+      scenarios: suiteScenarios.sort((a, b) => b.latestRun.startedAt.localeCompare(a.latestRun.startedAt)),
+      latestStartedAt: suiteScenarios[0]!.latestRun.startedAt,
+    }))
+    .sort((a, b) => b.latestStartedAt.localeCompare(a.latestStartedAt));
+}
+
+export function createCompareStage() {
+  const createStage = (baseline = "", candidate = "") => ({
+    runPair: { baseline, candidate },
+    isRunCompareReady: Boolean(baseline && candidate),
+    pinRun(_scenarioId: string, runId: string) {
+      if (!baseline) {
+        return createStage(runId, candidate);
+      }
+      return createStage(baseline, runId);
+    },
+  });
+
+  return createStage();
+}
+
+export function summarizeRuns(runs: RunListItem[]) {
+  return runs.reduce(
+    (summary, run, index) => ({
+      total: summary.total + 1,
+      pass: summary.pass + (run.status === "pass" ? 1 : 0),
+      fail: summary.fail + (run.status === "fail" ? 1 : 0),
+      error: summary.error + (run.status === "error" ? 1 : 0),
+      latestSuite: index === 0 ? run.suite : summary.latestSuite,
+      latestProvider: index === 0 ? run.provider ?? "-" : summary.latestProvider,
+    }),
+    { total: 0, pass: 0, fail: 0, error: 0, latestSuite: "-", latestProvider: "-" },
+  );
+}
+```
+
+- [ ] **Step 5: Update `src/ui/App.tsx` to import shared types and helpers**
+
+Replace the inline type declarations at the top of `src/ui/App.tsx` with:
+
+```ts
+import React, { useEffect, useState } from "react";
+
+import type { RunDetail, RunListItem } from "./types.js";
+import { buildAtlasGroups, createCompareStage, summarizeRuns } from "./viewModels.js";
+```
+
+Keep the existing `summarizeRuns` function temporarily only if needed to unblock the refactor, then move its implementation into `viewModels.ts`.
+
+- [ ] **Step 6: Run the targeted test to verify it passes**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: PASS for the new atlas and compare staging tests.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/ui/types.ts src/ui/viewModels.ts src/ui/App.tsx tests/launch/ui-smoke.test.ts
+git commit -m "refactor: extract ui view models for regression atlas"
+```
+
+### Task 2: Build The Regression Atlas Shell And Archive Fallback
+
+**Files:**
+- Create: `src/ui/components.tsx`
+- Modify: `src/ui/App.tsx`
+- Modify: `src/ui/styles.css`
+- Modify: `tests/launch/ui-smoke.test.ts`
+
+- [ ] **Step 1: Write the failing shell and atlas smoke tests**
+
+Add these tests to `tests/launch/ui-smoke.test.ts`:
+
+```ts
+import { AtlasHome, LabShell } from "../../src/ui/App.js";
+
+test("atlas home renders suite chambers and scenario nodes", () => {
+  const markup = renderToStaticMarkup(
+    React.createElement(AtlasHome, {
+      runs: [
+        {
+          id: "run_1",
+          scenarioId: "support.refund-correct-order",
+          suite: "support",
+          agentVersionId: "agent_1",
+          provider: "mock",
+          status: "fail",
+          score: 0,
+          durationMs: 12,
+          totalSteps: 3,
+          startedAt: "2026-04-09T00:00:00.000Z",
+        },
+      ],
+    }),
+  );
+
+  assert.match(markup, /Regression Atlas/);
+  assert.match(markup, /suite chamber/);
+  assert.match(markup, /support\.refund-correct-order/);
+});
+
+test("lab shell renders atlas cases compare and archive mode labels", () => {
+  const markup = renderToStaticMarkup(
+    React.createElement(LabShell, {
+      mode: "Atlas",
+      staging: { runPair: { baseline: "run_a", candidate: "run_b" }, isRunCompareReady: true },
+      children: React.createElement("div", null, "body"),
+      evidence: null,
+    }),
+  );
+
+  assert.match(markup, /Atlas/);
+  assert.match(markup, /Cases/);
+  assert.match(markup, /Compare/);
+  assert.match(markup, /Archive/);
+  assert.match(markup, /Compare ready/);
+});
+```
+
+- [ ] **Step 2: Run the targeted test to verify it fails**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: FAIL with missing exports for `AtlasHome` and `LabShell`.
+
+- [ ] **Step 3: Create the reusable UI primitives**
+
+Create `src/ui/components.tsx`:
+
+```tsx
+import React from "react";
+
+export function VerdictTotem(props: { status: "pass" | "fail" | "error" | "neutral"; label: string }): React.JSX.Element {
+  return (
+    <div className={`verdict-totem ${props.status}`}>
+      <span className="verdict-glyph" aria-hidden="true" />
+      <span>{props.label}</span>
+    </div>
+  );
+}
+
+export function SectionFrame(props: { eyebrow: string; title: string; children: React.ReactNode }): React.JSX.Element {
+  return (
+    <section className="section-frame">
+      <p className="eyebrow">{props.eyebrow}</p>
+      <h2>{props.title}</h2>
+      {props.children}
+    </section>
+  );
+}
+
+export function CompareStageChip(props: { label: string; value: string }): React.JSX.Element {
+  return (
+    <div className="compare-stage-chip">
+      <span className="compare-stage-label">{props.label}</span>
+      <strong>{props.value}</strong>
+    </div>
+  );
+}
+```
+
+- [ ] **Step 4: Implement the shell and atlas home in `src/ui/App.tsx`**
+
+Add these exported components:
+
+```tsx
+export function LabShell(props: {
+  mode: "Atlas" | "Cases" | "Compare" | "Archive";
+  staging: { runPair: { baseline: string; candidate: string }; isRunCompareReady: boolean };
+  evidence: React.ReactNode;
+  children: React.ReactNode;
+}): React.JSX.Element {
+  return (
+    <div className="lab-shell">
+      <aside className="lab-rail">
+        <a className="lab-brand" href="/">Agent Regression Lab</a>
+        <nav className="mode-nav" aria-label="Primary">
+          <a href="/" className={props.mode === "Atlas" ? "active" : ""}>Atlas</a>
+          <a href="/" className={props.mode === "Cases" ? "active" : ""}>Cases</a>
+          <a href="/compare" className={props.mode === "Compare" ? "active" : ""}>Compare</a>
+          <a href="/" className={props.mode === "Archive" ? "active" : ""}>Archive</a>
+        </nav>
+      </aside>
+      <main className="lab-stage">{props.children}</main>
+      <aside className="evidence-drawer">{props.evidence}</aside>
+      <div className="compare-stage">
+        <CompareStageChip label="Baseline" value={props.staging.runPair.baseline || "pin a run"} />
+        <CompareStageChip label="Candidate" value={props.staging.runPair.candidate || "pin a run"} />
+        <span className="compare-stage-state">{props.staging.isRunCompareReady ? "Compare ready" : "Awaiting pair"}</span>
+      </div>
+    </div>
+  );
+}
+
+export function AtlasHome(props: { runs: RunListItem[] }): React.JSX.Element {
+  const groups = buildAtlasGroups(props.runs);
+  return (
+    <section className="atlas-home">
+      <header className="atlas-hero">
+        <p className="eyebrow">Regression Atlas</p>
+        <h1>Scenario graph as the product surface</h1>
+      </header>
+      <div className="atlas-grid">
+        {groups.map((group) => (
+          <section key={group.suite} className="suite-chamber">
+            <p className="suite-label">suite chamber</p>
+            <h2>{group.suite}</h2>
+            <ul className="scenario-node-list">
+              {group.scenarios.map((scenario) => (
+                <li key={scenario.scenarioId} className="scenario-node">
+                  <a href={`/runs/${scenario.latestRun.id}`}>{scenario.scenarioId}</a>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))}
+      </div>
+    </section>
+  );
+}
+```
+
+Then wire the list route through `LabShell` and render `AtlasHome` instead of the old table-first page. Keep the archive table beneath the atlas as the fallback section on the same route.
+
+- [ ] **Step 5: Replace the CSS foundation with the industrial-lab shell**
+
+Update `src/ui/styles.css` with these foundation blocks:
+
+```css
+:root {
+  color-scheme: light;
+  --bg: #d8dde2;
+  --bg-deep: #a9b4bf;
+  --panel: rgba(245, 247, 249, 0.88);
+  --panel-strong: rgba(233, 238, 242, 0.96);
+  --ink: #11161b;
+  --muted: #47525c;
+  --line: rgba(17, 22, 27, 0.16);
+  --accent: #c54f24;
+  --signal: #d1a33a;
+  --pass: #467f5b;
+  --fail: #9b321f;
+  --error: #6a3f1d;
+  --shadow: 0 30px 80px rgba(16, 22, 28, 0.12);
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  font-family: "IBM Plex Sans", "Aptos", sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(255,255,255,0.75), transparent 32%),
+    linear-gradient(135deg, #e5eaee 0%, var(--bg) 48%, var(--bg-deep) 100%);
+}
+
+.lab-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 220px minmax(0, 1fr) 320px;
+  grid-template-rows: minmax(0, 1fr) 88px;
+}
+
+.suite-chamber,
+.section-frame,
+.archive-panel,
+.evidence-drawer,
+.compare-stage {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(14px);
+}
+```
+
+Add matching classes for `.lab-rail`, `.lab-stage`, `.atlas-grid`, `.scenario-node`, `.compare-stage`, and a mobile fallback under `@media (max-width: 980px)`.
+
+- [ ] **Step 6: Run the targeted test to verify it passes**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: PASS for the shell and atlas rendering tests.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/ui/components.tsx src/ui/App.tsx src/ui/styles.css tests/launch/ui-smoke.test.ts
+git commit -m "feat: add regression atlas shell and archive view"
+```
+
+### Task 3: Redesign Run Detail Into The Case Surface
+
+**Files:**
+- Modify: `src/ui/App.tsx`
+- Modify: `src/ui/components.tsx`
+- Modify: `src/ui/styles.css`
+- Modify: `tests/launch/ui-smoke.test.ts`
+
+- [ ] **Step 1: Write the failing case-surface smoke test**
+
+Add this test to `tests/launch/ui-smoke.test.ts`:
+
+```ts
+test("run detail renders as a case surface with trace fracture and evidence rail", () => {
+  const markup = renderToStaticMarkup(
+    React.createElement(RunDetailPage, {
+      runId: "run_1",
+      initialDetail: {
+        run: {
+          id: "run_1",
+          scenarioId: "support.refund-correct-order",
+          status: "fail",
+          score: 0,
+          durationMs: 12,
+          totalSteps: 3,
+          terminationReason: "evaluator_failed",
+          finalOutput: "I refunded the wrong order.",
+          startedAt: "2026-04-09T00:00:00.000Z",
+        },
+        agentVersion: { label: "mock-default", provider: "mock" },
+        evaluatorResults: [{ evaluatorId: "refund-created", status: "fail", message: "Expected refund." }],
+        toolCalls: [{ id: "tool_1", toolName: "orders.refund", input: { orderId: "ord_1" }, output: null, status: "error" }],
+        traceEvents: [{ eventId: "evt_1", stepIndex: 1, source: "agent", type: "tool_call", payload: { tool: "orders.refund" } }],
+        errorDetail: "Refund API rejected the request.",
+      },
+    }),
+  );
+
+  assert.match(markup, /Case Surface/);
+  assert.match(markup, /Trace fracture/);
+  assert.match(markup, /Evidence rail/);
+  assert.match(markup, /Refund API rejected the request\./);
+});
+```
+
+- [ ] **Step 2: Run the targeted test to verify it fails**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: FAIL because `RunDetailPage` does not accept `initialDetail` and does not render the case-surface language.
+
+- [ ] **Step 3: Add reusable evidence and fracture components**
+
+Append to `src/ui/components.tsx`:
+
+```tsx
+export function EvidenceRail(props: { children: React.ReactNode }): React.JSX.Element {
+  return (
+    <section className="section-frame evidence-rail">
+      <p className="eyebrow">Evidence rail</p>
+      <h2>Run evidence</h2>
+      {props.children}
+    </section>
+  );
+}
+
+export function TraceFracture(props: { events: Array<{ eventId: string; stepIndex: number; type: string; payload: Record<string, unknown> }> }): React.JSX.Element {
+  return (
+    <section className="section-frame trace-fracture">
+      <p className="eyebrow">Trace fracture</p>
+      <h2>Step sequence</h2>
+      <ol className="fracture-line">
+        {props.events.map((event) => (
+          <li key={event.eventId} className="fracture-event">
+            <strong>Step {event.stepIndex}</strong>
+            <pre>{JSON.stringify(event.payload, null, 2)}</pre>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+```
+
+- [ ] **Step 4: Implement the case surface in `src/ui/App.tsx`**
+
+Refactor `RunDetailPage` to accept `initialDetail?: RunDetail` for smoke tests and render this shape:
+
+```tsx
+export function RunDetailPage(props: { runId: string; initialDetail?: RunDetail }): React.JSX.Element {
+  const [detail, setDetail] = useState<RunDetail | null>(props.initialDetail ?? null);
+
+  useEffect(() => {
+    if (props.initialDetail) return;
+    void fetch(`/api/runs/${props.runId}`)
+      .then((response) => response.json())
+      .then((data) => setDetail(data as RunDetail));
+  }, [props.initialDetail, props.runId]);
+
+  if (!detail) {
+    return <EmptyState title="Loading case surface" description="Fetching run evidence from the local lab." />;
+  }
+
+  return (
+    <section className="case-surface">
+      <header className="case-hero">
+        <p className="eyebrow">Case Surface</p>
+        <h1>{detail.run.scenarioId}</h1>
+        <VerdictTotem status={detail.run.status as "pass" | "fail" | "error"} label={detail.run.status} />
+      </header>
+      <FailureSummaryPanel detail={detail} />
+      <div className="case-grid">
+        <TraceFracture events={detail.traceEvents} />
+        <EvidenceRail>
+          <p><strong>Provider:</strong> {detail.agentVersion?.provider ?? "-"}</p>
+          <p><strong>Termination:</strong> {detail.run.terminationReason}</p>
+          {detail.errorDetail ? <p><strong>Error:</strong> {detail.errorDetail}</p> : null}
+        </EvidenceRail>
+      </div>
+    </section>
+  );
+}
+```
+
+Keep `RunIdentitySummary` and evaluator/tool sections, but place them within the new case grid instead of stacked generic panels.
+
+- [ ] **Step 5: Add case-surface CSS**
+
+Add these rules to `src/ui/styles.css`:
+
+```css
+.case-surface,
+.case-grid {
+  display: grid;
+  gap: 1.25rem;
+}
+
+.case-grid {
+  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
+}
+
+.trace-fracture .fracture-line {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 1rem;
+}
+
+.fracture-event {
+  position: relative;
+  padding: 1rem 1rem 1rem 1.4rem;
+  border-left: 2px solid var(--accent);
+  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(220,226,232,0.78));
+}
+```
+
+- [ ] **Step 6: Run the targeted test to verify it passes**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: PASS for the case-surface rendering test.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add src/ui/App.tsx src/ui/components.tsx src/ui/styles.css tests/launch/ui-smoke.test.ts
+git commit -m "feat: redesign run detail as case surface"
+```
+
+### Task 4: Build The Compare Chamber And Suite Movement Surfaces
+
+**Files:**
+- Modify: `src/ui/App.tsx`
+- Modify: `src/ui/components.tsx`
+- Modify: `src/ui/styles.css`
+- Modify: `tests/launch/ui-smoke.test.ts`
+
+- [ ] **Step 1: Write the failing compare-chamber smoke tests**
+
+Add these tests to `tests/launch/ui-smoke.test.ts`:
+
+```ts
+test("compare page renders the compare chamber framing", () => {
+  const markup = renderToStaticMarkup(
+    React.createElement(ComparisonHero, {
+      comparison: {
+        classification: "regressed",
+        verdictDelta: "pass -> fail",
+        outputChanged: true,
+        deltas: { score: -100, runtimeMs: 25, steps: 2, runtimePct: 50 },
+        notes: ["Candidate used a new tool path."],
+        evaluatorDiffs: [],
+        toolDiffs: [],
+        baseline: { run: { id: "run_a", scenarioId: "support.refund-correct-order", status: "pass", score: 100, durationMs: 10, totalSteps: 3, terminationReason: "completed", finalOutput: "ok", startedAt: "2026-04-09T00:00:00.000Z" }, evaluatorResults: [], toolCalls: [], traceEvents: [] },
+        candidate: { run: { id: "run_b", scenarioId: "support.refund-correct-order", status: "fail", score: 0, durationMs: 35, totalSteps: 5, terminationReason: "evaluator_failed", finalOutput: "bad", startedAt: "2026-04-09T00:01:00.000Z" }, evaluatorResults: [], toolCalls: [], traceEvents: [] },
+      },
+    }),
+  );
+
+  assert.match(markup, /Compare Chamber/);
+  assert.match(markup, /Verdict delta/);
+  assert.match(markup, /pass -&gt; fail/);
+});
+
+test("suite comparison hero renders suite movement framing", () => {
+  const markup = renderToStaticMarkup(
+    React.createElement(SuiteComparisonHero, {
+      data: {
+        suite: "support",
+        baselineBatchId: "suite_a",
+        candidateBatchId: "suite_b",
+        classification: "regressed",
+        notes: [],
+        deltas: { pass: -1, fail: 1, error: 0, averageScore: -20, averageRuntimeMs: 15, averageSteps: 1 },
+        regressions: [{ scenarioId: "support.refund-correct-order", comparison: {} as any }],
+        improvements: [{ scenarioId: "support.cancel-subscription", comparison: {} as any }],
+        unchanged: [],
+        missingFromCandidate: [],
+        missingFromBaseline: [],
+      },
+    }),
+  );
+
+  assert.match(markup, /Suite movement/);
+  assert.match(markup, /Regression count/);
+});
+```
+
+- [ ] **Step 2: Run the targeted test to verify it fails**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: FAIL because the compare hero still renders the old generic hero text.
+
+- [ ] **Step 3: Refactor compare presentation in `src/ui/App.tsx`**
+
+Update `ComparisonHero` and `SuiteComparisonHero` to render the new framing:
+
+```tsx
+export function ComparisonHero(props: { comparison: ComparePayload }): React.JSX.Element {
+  return (
+    <section className={`section-frame compare-chamber ${props.comparison.classification}`}>
+      <p className="eyebrow">Compare Chamber</p>
+      <div className="compare-chamber-head">
+        <h2>{props.comparison.baseline.run.scenarioId}</h2>
+        <VerdictTotem status={mapClassificationToStatus(props.comparison.classification)} label={props.comparison.classification} />
+      </div>
+      <p><strong>Verdict delta:</strong> {props.comparison.verdictDelta}</p>
+      <p><strong>Output changed:</strong> {props.comparison.outputChanged ? "yes" : "no"}</p>
+    </section>
+  );
+}
+
+export function SuiteComparisonHero(props: { data: SuiteComparisonPayload }): React.JSX.Element {
+  return (
+    <section className={`section-frame compare-chamber ${props.data.classification}`}>
+      <p className="eyebrow">Suite movement</p>
+      <h2>{props.data.suite}</h2>
+      <p><strong>Regression count:</strong> {props.data.regressions.length}</p>
+      <p><strong>Improvement count:</strong> {props.data.improvements.length}</p>
+    </section>
+  );
+}
+```
+
+Then update `ComparePage` and `SuiteComparePage` to wrap the comparison body in mirrored baseline/candidate columns and keep the centerline delta stats.
+
+- [ ] **Step 4: Add compare-chamber CSS**
+
+Add these rules to `src/ui/styles.css`:
+
+```css
+.compare-chamber {
+  position: relative;
+  overflow: hidden;
+}
+
+.compare-chamber::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 32%;
+  width: 1px;
+  background: linear-gradient(180deg, transparent, rgba(17,22,27,0.18), transparent);
+}
+
+.compare-columns {
+  display: grid;
+  grid-template-columns: 1fr 120px 1fr;
+  gap: 1rem;
+}
+
+.compare-centerline {
+  display: grid;
+  align-content: start;
+  gap: 0.75rem;
+  text-align: center;
+}
+```
+
+- [ ] **Step 5: Run the targeted test to verify it passes**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: PASS for the compare chamber and suite movement tests.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/ui/App.tsx src/ui/components.tsx src/ui/styles.css tests/launch/ui-smoke.test.ts
+git commit -m "feat: redesign compare flows as chamber surfaces"
+```
+
+### Task 5: Finish Responsive Polish, Archive Integration, And Full Verification
+
+**Files:**
+- Modify: `src/ui/App.tsx`
+- Modify: `src/ui/styles.css`
+- Modify: `tests/launch/ui-smoke.test.ts`
+
+- [ ] **Step 1: Write the failing archive and responsive smoke tests**
+
+Add these tests to `tests/launch/ui-smoke.test.ts`:
+
+```ts
+test("atlas route keeps archive fallback visible for operational scanning", () => {
+  const markup = renderToStaticMarkup(
+    React.createElement(AtlasHome, {
+      runs: [
+        {
+          id: "run_1",
+          scenarioId: "support.refund-correct-order",
+          suite: "support",
+          agentVersionId: "agent_1",
+          provider: "mock",
+          status: "pass",
+          score: 100,
+          durationMs: 12,
+          totalSteps: 3,
+          startedAt: "2026-04-09T00:00:00.000Z",
+        },
+      ],
+    }),
+  );
+
+  assert.match(markup, /Archive fallback/);
+  assert.match(markup, /support\.refund-correct-order/);
+});
+```
+
+- [ ] **Step 2: Run the targeted test to verify it fails**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: FAIL because the atlas page does not yet render the archive fallback heading.
+
+- [ ] **Step 3: Finish archive integration in `src/ui/App.tsx`**
+
+Under the atlas canvas, render a secondary archival panel:
+
+```tsx
+<section className="archive-panel">
+  <div className="archive-head">
+    <p className="eyebrow">Archive fallback</p>
+    <h2>Operational scan table</h2>
+  </div>
+  <table className="archive-table">
+    <thead>
+      <tr>
+        <th>Scenario</th>
+        <th>Latest run</th>
+        <th>Status</th>
+        <th>Runtime</th>
+        <th>Started</th>
+      </tr>
+    </thead>
+    <tbody>
+      {runs.map((run) => (
+        <tr key={run.id}>
+          <td>{run.scenarioId}</td>
+          <td><a href={`/runs/${run.id}`}>{run.id}</a></td>
+          <td><VerdictTotem status={run.status} label={run.status} /></td>
+          <td>{run.durationMs}ms</td>
+          <td>{new Date(run.startedAt).toLocaleString()}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+</section>
+```
+
+- [ ] **Step 4: Finish responsive CSS and motion**
+
+Append these rules to `src/ui/styles.css`:
+
+```css
+@media (max-width: 980px) {
+  .lab-shell {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto auto;
+  }
+
+  .lab-rail,
+  .evidence-drawer,
+  .compare-stage {
+    position: static;
+  }
+
+  .case-grid,
+  .compare-columns,
+  .atlas-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .suite-chamber,
+  .section-frame,
+  .scenario-node {
+    animation: field-rise 420ms ease-out both;
+  }
+
+  @keyframes field-rise {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+```
+
+- [ ] **Step 5: Run the focused tests**
+
+Run: `npx tsx --test tests/launch/ui-smoke.test.ts`
+
+Expected: PASS for the archive fallback test and previously added UI smoke coverage.
+
+- [ ] **Step 6: Run the project verification suite**
+
+Run: `npm test`
+
+Expected: PASS with all existing tests and updated UI smoke coverage green.
+
+- [ ] **Step 7: Run build verification**
+
+Run: `npm run build`
+
+Expected: PASS with `dist/ui-assets/client.js` and `dist/ui-assets/client.css` emitted successfully.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add src/ui/App.tsx src/ui/styles.css tests/launch/ui-smoke.test.ts
+git commit -m "feat: finish regression atlas responsive polish"
+```
+
+---
+
+## Self-Review
+
+### Spec coverage
+
+- Atlas home: covered in Task 2
+- Case surface: covered in Task 3
+- Compare chamber and suite movement: covered in Task 4
+- Archive fallback: covered in Task 5
+- Industrial-lab visual system and cinematic density: covered in Tasks 2, 3, 4, and 5
+- Responsive behavior and motion: covered in Task 5
+
+### Placeholder scan
+
+No `TBD`, `TODO`, or implied "implement later" language remains in the tasks. Each task names concrete files, tests, commands, and code blocks.
+
+### Type consistency
+
+The plan standardizes UI payload types in `src/ui/types.ts`, moves `summarizeRuns` into `src/ui/viewModels.ts`, uses `RunListItem` for atlas/archive work, uses `RunDetail` for case surfaces, and leaves existing compare payload types in `App.tsx` unless extracted during implementation. If compare payload types are moved, they should also live in `src/ui/types.ts`.
+
+---
+
+Plan complete and saved to `docs/superpowers/plans/2026-04-16-regression-atlas-ui-redesign.md`. Two execution options:
+
+1. Subagent-Driven (recommended) - I dispatch a fresh subagent per task, review between tasks, fast iteration
+
+2. Inline Execution - Execute tasks in this session using executing-plans, batch execution with checkpoints
+
+Which approach?