test: full test-suite refactor sweep (#61)

* chore(test): start test-suite refactor sweep

* test(ltl): pin exact multi-obligation residual AST

* test(ltl): table-test finalize Kleene connective combinations

* test(ltl): pin reduce over pending inner for bound, Or, Not

* test(ltl): marshal bounded Always steps/duration/deadline

* test(verifier): cover LTL combinator verdict transitions and within unit panic

* test(verifier): table-test DecodeAction kinds and lastAction field exposure

* test(verifier): assert WithPlatform(ios) reaches the picker host and key pool

* test(verifier): widen weighted-selection assertion to a 5x skew margin

* test(verifier): un-skip ax-find round trip with a committed tree fixture

* test(runner): pin isWDADrop to sidecar reconnect-failed message origin

* test(runner): assert PressKey/Wait trace encoding records kind-specific fields

* test(runner): cover RenderSummary unsupported-verbs surfacing branch

* test(trace): set Hierarchy in round-trip and lock lossy Tree contract

Also add a -race concurrent WriteStep test that asserts N well-formed JSONL lines, catching torn lines if the writer mutex is dropped.

* test(trace): round-trip witnesses/changes/metrics/exceptions, pin step-0 witness

* test(trace): document ViolationsAreGreppable grep contract and lock-free WriteScreenshot

* test(hierarchy): cover invalid-JSON and malformed-bounds parser paths

* test(trace): guard writer mutex via WriteStep/Close race on w.file

* test(replay): drop unfailable assets and devproxy assertions

* test(replay): cache reuses on equal mtime, reparses after append

* test(replay): violation marker falls back to detection step when attributed missing

* test(replay): corrupt meta/trace dirs return 500 with error body

* test(replay): SSE client receives runs.changed after a broadcast

* test(replay): Run coalesces creates, ignores write/chmod, closes subs on cancel

* fix(sidecar): synchronize health fixture writes and exercise healthError

* test(sidecar): cover swipe/longpress/doubletap/erase/presskey/metrics/logs translations

* test(sidecar): cover DoubleTapSelector composition and mid-gesture cancel

* test(sidecar): assert gRPC error status surfaces from action RPC

* fix(chrome): route action methods through runCtx so caller cancellation aborts CDP

* fix(chrome): route hierarchy/screenshot/waitidle/metrics through runCtx

* refactor(ios): extract pure simctl JSON parsers

* refactor(ios): add command-runner seams for EnsureSimulator

* test(ios): table-test simctl parsers and EnsureSimulator seams

* test(sidecarassets): cover placeholder build path

* test(sidecarassets): assert reuse via sentinel bytes not mtime

* test(bundler): cover properties-only spec registration

* refactor(testrun): extract prepareBundleInputs from Execute

* test(testrun): cover prepareBundleInputs aliases and missing-runtime error

* test(testrun): table-test resolveRuntimeSibling search edges

* test(testrun): exact-output tests for progressHandler line format

* fix(cmd): point bundle-check aliases at pkg/spec/src

* test(cmd): smoke-test bundle-check resolves spec aliases

* test(cmd): table-test hier-check parse and FindAll on fixture

* test(cmd): unit-test buildBrowseURL deep-link vs root

* test(cmd): drop flaky TestRun_Doctor that launched real Chromium

* test(cmd): pin pipeline error to bundle resolution on web platform

* test(replay-ui): add bun test script

* ci(replay-ui): run bun test via make web-test target

* ci(replay-ui): point bun cache key at replay-ui/bun.lock

* test(replay-ui): exercise real URL encoding and non-ok throw in getJson

* refactor(replay-ui): extract snapshot flatten/getAtPath into lib module

* test(replay-ui): pin snapshot flatten/getAtPath path round-trip

* refactor(replay-ui): extract action selector/format into lib module

* test(replay-ui): pin action selector parse and row formatting

* refactor(replay-ui): share one statusFor between panels

* refactor(replay-ui): extract run-history derivation into lib module

* test(replay-ui): pin shared statusFor precedence and ordering

* test(replay-ui): pin run-history derivation alignment

* refactor(replay-ui): export clampIndex for testing

* refactor(replay-ui): extract keyboard-nav dispatch into pure module

* refactor(replay-ui): extract metrics formatters into lib module

* test(replay-ui): pin clampIndex step boundaries

* test(replay-ui): pin keyboard-nav ownership and key routing

* test(replay-ui): pin metrics formatters and path gap handling

* refactor(sidecar): expose device-output parsers as internal for testing

* test(sidecar): table-test device-output parsers against malformed input

* test(sidecar): cover logcat parsing year inference and line skipping

* test(sidecar): pin pressKey keycode mapping and unknown-key rejection

* test(sidecar): metrics bundleId falls back to launched app and honors override

* test(sidecar): loosen deadline upper bound to tolerate slow CI scheduling

* test(web-runtime): export selector builders for unit tests

* test(web-runtime): guard sanitize cycle, function, and depth limits

* test(web-runtime): table-test selector builder quoting and escaping

* test(sidecar): collapse scalar-forwarding RPC tests into a table

* test(replay-ui): dedup step/summary fixtures into shared module

* test(ios): collapse pickSimulator point-tests into a table

replay-ui/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "bun test"
   },
   "dependencies": {
     "react": "^18.3.1",

replay-ui/src/__tests__/action-format.test.ts

@@ -0,0 +1,74 @@
+import { describe, it, expect } from "bun:test";
+import {
+  formatActionRow,
+  formatElapsed,
+  parseSelector,
+  tagFromSelector,
+} from "../lib/action-format";
+import { summary } from "./fixtures";
+
+// Bug class: selector parsing mislabels every action row — splitting on the
+// wrong colon, treating a value-with-colon as the kind, or dropping the prefix
+// ellipsis would render the wrong target tag for every step.
+describe("parseSelector", () => {
+  const cases: { input: string; out: ReturnType<typeof parseSelector> }[] = [
+    { input: "id:login", out: { kind: "id", value: "login" } },
+    { input: "text:Sign In", out: { kind: "text", value: "Sign In" } },
+    { input: "textPrefix:Hello", out: { kind: "textPrefix", value: "Hello" } },
+    { input: "id:com.app:id/btn", out: { kind: "id", value: "com.app:id/btn" } },
+    { input: "bogus:x", out: null },
+    { input: ":leading", out: null },
+    { input: "no-colon", out: null },
+  ];
+  for (const { input, out } of cases) {
+    it(`parses ${input}`, () => {
+      expect(parseSelector(input)).toEqual(out);
+    });
+  }
+});
+
+describe("tagFromSelector", () => {
+  it("appends ellipsis only for prefix selectors", () => {
+    expect(tagFromSelector("textPrefix:Hel")).toBe("Hel...");
+    expect(tagFromSelector("text:Hello")).toBe("Hello");
+    expect(tagFromSelector("plain")).toBe("plain");
+  });
+});
+
+describe("formatActionRow", () => {
+  it("observes when no action kind, with and without screen", () => {
+    expect(formatActionRow(summary({}))).toEqual({
+      verb: "Observe",
+      target: "",
+      targetIsTag: false,
+    });
+    expect(formatActionRow(summary({ screen: "Home" }))).toEqual({
+      verb: "Observe",
+      target: "@ Home",
+      targetIsTag: false,
+    });
+  });
+
+  it("treats a selector label as a tag and a coordinate label as literal", () => {
+    expect(
+      formatActionRow(summary({ action_kind: "Tap", action_label: "id:btn" })),
+    ).toEqual({ verb: "Click", target: "btn", targetIsTag: true });
+    expect(
+      formatActionRow(summary({ action_kind: "Tap", action_label: "(10, 20)" })),
+    ).toEqual({ verb: "Click", target: "(10, 20)", targetIsTag: false });
+  });
+
+  it("maps known verbs and falls back to the raw kind", () => {
+    expect(formatActionRow(summary({ action_kind: "InputText", action_label: "hi" })).verb).toBe("Type");
+    expect(formatActionRow(summary({ action_kind: "Swipe" })).verb).toBe("Swipe");
+    expect(formatActionRow(summary({ action_kind: "Custom" })).verb).toBe("Custom");
+  });
+});
+
+describe("formatElapsed", () => {
+  it("formats mm:ss.mmm and clamps negatives to zero", () => {
+    expect(formatElapsed(0)).toBe("00:00.000");
+    expect(formatElapsed(65_432)).toBe("01:05.432");
+    expect(formatElapsed(-50)).toBe("00:00.000");
+  });
+});

replay-ui/src/__tests__/api.test.ts

@@ -1,10 +1,37 @@
 import { describe, it, expect } from "bun:test";
-import { screenshotUrl } from "../api";
+import { getJson, screenshotUrl } from "../api";
 
 describe("screenshotUrl", () => {
-  it("encodes runId and name", () => {
-    expect(screenshotUrl("run-1", "step-00001.png")).toBe(
-      "/api/runs/run-1/screenshots/step-00001.png",
+  it("percent-encodes runId and name with reserved characters", () => {
+    expect(screenshotUrl("run #1/a", "step 00001.png")).toBe(
+      "/api/runs/run%20%231%2Fa/screenshots/step%2000001.png",
     );
   });
 });
+
+describe("getJson", () => {
+  it("returns the decoded body on a 200 response", async () => {
+    const server = Bun.serve({
+      port: 0,
+      fetch: () => Response.json({ ok: true }),
+    });
+    try {
+      const body = await getJson<{ ok: boolean }>(server.url.href);
+      expect(body).toEqual({ ok: true });
+    } finally {
+      server.stop(true);
+    }
+  });
+
+  it("throws on a non-ok response instead of returning the error body", async () => {
+    const server = Bun.serve({
+      port: 0,
+      fetch: () => new Response("boom", { status: 500 }),
+    });
+    try {
+      await expect(getJson(server.url.href)).rejects.toThrow("500");
+    } finally {
+      server.stop(true);
+    }
+  });
+});

replay-ui/src/__tests__/fixtures.ts

@@ -0,0 +1,15 @@
+import type { Step, StepSummary } from "../types";
+
+export function step(over: Partial<Step>): Step {
+  return { step: 0, timestamp: "1970-01-01T00:00:00.000Z", ...over };
+}
+
+export function summary(over: Partial<StepSummary>): StepSummary {
+  return {
+    index: 0,
+    timestamp: "1970-01-01T00:00:00.000Z",
+    has_violations: false,
+    has_exceptions: false,
+    ...over,
+  };
+}

replay-ui/src/__tests__/keyboard-nav.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect } from "bun:test";
+import {
+  dispatchKey,
+  targetOwnsArrowKeys,
+  type KeyboardNavOptions,
+} from "../lib/keyboard-nav";
+
+function el(
+  over: Partial<{
+    tagName: string;
+    isContentEditable: boolean;
+    role: string | null;
+    parent: HTMLElement | null;
+  }> = {},
+): HTMLElement {
+  const role = over.role ?? null;
+  return {
+    tagName: over.tagName ?? "DIV",
+    isContentEditable: over.isContentEditable ?? false,
+    getAttribute: (name: string) => (name === "role" ? role : null),
+    parentElement: over.parent ?? null,
+  } as unknown as HTMLElement;
+}
+
+function spyOptions() {
+  const calls: string[] = [];
+  const make = (name: keyof KeyboardNavOptions) => () => {
+    calls.push(name);
+  };
+  const options: KeyboardNavOptions = {
+    onPrev: make("onPrev"),
+    onNext: make("onNext"),
+    onJumpStart: make("onJumpStart"),
+    onJumpEnd: make("onJumpEnd"),
+    onJumpPrev10: make("onJumpPrev10"),
+    onJumpNext10: make("onJumpNext10"),
+    onJumpNextViolation: make("onJumpNextViolation"),
+  };
+  return { calls, options };
+}
+
+describe("targetOwnsArrowKeys", () => {
+  it("walks ancestors and matches arrow-owning roles", () => {
+    expect(targetOwnsArrowKeys(el({ role: "option" }))).toBe(true);
+    const child = el({ role: null, parent: el({ role: "listbox" }) });
+    expect(targetOwnsArrowKeys(child)).toBe(true);
+    expect(targetOwnsArrowKeys(el({ role: "banner" }))).toBe(false);
+    expect(targetOwnsArrowKeys(null)).toBe(false);
+  });
+});
+
+// Bug class: navigation keys firing while the user types in a form field would
+// scrub the timeline out from under them; and arrow keys must yield to a
+// listbox/tab that owns them so its own roving focus still works.
+describe("dispatchKey ownership", () => {
+  it("ignores keys originating in editable targets", () => {
+    const { calls, options } = spyOptions();
+    expect(dispatchKey({ key: "j", target: el({ tagName: "INPUT" }) }, options)).toBe(false);
+    expect(dispatchKey({ key: "g", target: el({ isContentEditable: true }) }, options)).toBe(false);
+    expect(calls).toEqual([]);
+  });
+
+  it("yields arrow keys to an owning ancestor but still handles letters", () => {
+    const { calls, options } = spyOptions();
+    const inListbox = el({ parent: el({ role: "listbox" }) });
+    expect(dispatchKey({ key: "ArrowRight", target: inListbox }, options)).toBe(false);
+    expect(dispatchKey({ key: "j", target: inListbox }, options)).toBe(true);
+    expect(calls).toEqual(["onNext"]);
+  });
+
+  it("ignores keys combined with a modifier", () => {
+    const { calls, options } = spyOptions();
+    expect(dispatchKey({ key: "j", metaKey: true }, options)).toBe(false);
+    expect(dispatchKey({ key: "j", ctrlKey: true }, options)).toBe(false);
+    expect(calls).toEqual([]);
+  });
+});
+
+describe("dispatchKey routing", () => {
+  const cases: [string, boolean, keyof KeyboardNavOptions][] = [
+    ["ArrowLeft", false, "onPrev"],
+    ["k", false, "onPrev"],
+    ["ArrowLeft", true, "onJumpPrev10"],
+    ["ArrowRight", false, "onNext"],
+    ["j", true, "onJumpNext10"],
+    ["g", false, "onJumpStart"],
+    ["G", false, "onJumpEnd"],
+    [".", false, "onJumpNextViolation"],
+  ];
+  for (const [key, shiftKey, expected] of cases) {
+    it(`${shiftKey ? "shift+" : ""}${key} -> ${expected}`, () => {
+      const { calls, options } = spyOptions();
+      expect(dispatchKey({ key, shiftKey }, options)).toBe(true);
+      expect(calls).toEqual([expected]);
+    });
+  }
+
+  it("leaves unmapped keys untouched", () => {
+    const { calls, options } = spyOptions();
+    expect(dispatchKey({ key: "x" }, options)).toBe(false);
+    expect(calls).toEqual([]);
+  });
+});

replay-ui/src/__tests__/metrics-format.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from "bun:test";
+import {
+  buildPath,
+  formatHeap,
+  formatTime,
+  fractionFor,
+} from "../lib/metrics-format";
+
+describe("formatHeap", () => {
+  const cases: [number, string][] = [
+    [0, "0B"],
+    [-1, "0B"],
+    [2048, "2K"],
+    [1024 * 1024, "1M"],
+    [5 * 1024 * 1024, "5M"],
+    [2 * 1024 * 1024 * 1024, "2.0G"],
+  ];
+  for (const [bytes, expected] of cases) {
+    it(`${bytes} -> ${expected}`, () => {
+      expect(formatHeap(bytes)).toBe(expected);
+    });
+  }
+});
+
+describe("formatTime", () => {
+  it("formats mm:ss and clamps negatives", () => {
+    expect(formatTime(0)).toBe("00:00");
+    expect(formatTime(65_000)).toBe("01:05");
+    expect(formatTime(-10)).toBe("00:00");
+  });
+});
+
+describe("fractionFor", () => {
+  it("centers a lone point and spreads the rest across 0..1", () => {
+    expect(fractionFor(0, 1)).toBe(0.5);
+    expect(fractionFor(0, 5)).toBe(0);
+    expect(fractionFor(4, 5)).toBe(1);
+    expect(fractionFor(2, 5)).toBe(0.5);
+  });
+});
+
+// Bug class: a missing sample must lift the pen (M) so the chart does not draw
+// a straight line bridging the gap, which would imply data that was never
+// measured.
+describe("buildPath gap handling", () => {
+  it("starts a new subpath after each undefined value", () => {
+    const samples = [{ v: 0 }, { v: 100 }, { v: undefined }, { v: 50 }];
+    const path = buildPath(samples, (s) => s.v, 100);
+    const commands = path.match(/[ML]/g);
+    expect(commands).toEqual(["M", "L", "M"]);
+    expect(path.startsWith("M0.0000,1.0000")).toBe(true);
+  });
+
+  it("emits empty string when every sample is missing", () => {
+    const samples = [{ v: undefined }, { v: undefined }];
+    expect(buildPath(samples, (s) => s.v, 100)).toBe("");
+  });
+
+  it("clamps values above the ceiling to the top of the lane", () => {
+    const path = buildPath([{ v: 200 }], (s) => s.v, 100);
+    expect(path).toBe("M0.5000,0.0000");
+  });
+});

replay-ui/src/__tests__/property-status.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "bun:test";
+import {
+  STATUS_ORDER,
+  statusFor,
+  statusForStep,
+} from "../lib/property-status";
+import { step } from "./fixtures";
+
+// Bug class: RunDetail and ViolationsPanel once carried two copies of this
+// status logic; if they drift, the same property shows a different verdict in
+// the timeline vs the violations list. Both panels now share statusFor, so its
+// precedence and the violated-first ordering must stay pinned.
+describe("statusFor", () => {
+  it("ranks violated over holds and defaults missing residuals to pending", () => {
+    const violations = new Set(["v"]);
+    expect(statusFor("v", violations, { v: { op: "true" } })).toBe("violated");
+    expect(statusFor("h", violations, { h: { op: "true" } })).toBe("holds");
+    expect(statusFor("p", violations, { p: { op: "false" } })).toBe("pending");
+    expect(statusFor("x", violations, undefined)).toBe("pending");
+  });
+});
+
+describe("statusForStep", () => {
+  it("matches statusFor for the same step and is pending for a null step", () => {
+    const s = step({
+      violations: ["v"],
+      residuals: { v: { op: "true" }, h: { op: "true" } },
+    });
+    expect(statusForStep("v", s)).toBe("violated");
+    expect(statusForStep("h", s)).toBe("holds");
+    expect(statusForStep("v", null)).toBe("pending");
+  });
+});
+
+describe("STATUS_ORDER", () => {
+  it("sorts violated before pending before holds", () => {
+    const sorted = ["holds", "violated", "pending"].sort(
+      (a, b) => STATUS_ORDER[a as never] - STATUS_ORDER[b as never],
+    );
+    expect(sorted).toEqual(["violated", "pending", "holds"]);
+  });
+});

replay-ui/src/__tests__/run-history.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from "bun:test";
+import {
+  buildRunHistory,
+  collectPropertyNames,
+  sortLanes,
+  statusForProperty,
+} from "../lib/run-history";
+import type { PropertyLane } from "../panels/Timeline";
+import type { Run } from "../types";
+import { step, summary } from "./fixtures";
+
+function lane(name: string, statuses: PropertyLane["statuses"]): PropertyLane {
+  return { name, statuses };
+}
+
+describe("collectPropertyNames", () => {
+  it("dedups and sorts names across steps, skipping null and residual-less steps", () => {
+    const names = collectPropertyNames([
+      null,
+      step({ residuals: { b: { op: "true" }, a: { op: "false" } } }),
+      step({}),
+      step({ residuals: { a: { op: "true" }, c: { op: "true" } } }),
+    ]);
+    expect(names).toEqual(["a", "b", "c"]);
+  });
+});
+
+// Bug class: getting status precedence wrong (e.g. checking residual before
+// the violation set, or not defaulting null/absent to pending) would paint a
+// violated property lane green.
+describe("statusForProperty", () => {
+  it("ranks violated over a holding residual and defaults to pending", () => {
+    const s = step({ violations: ["p"], residuals: { p: { op: "true" } } });
+    expect(statusForProperty("p", s)).toBe("violated");
+    expect(statusForProperty("q", step({ residuals: { q: { op: "true" } } }))).toBe("holds");
+    expect(statusForProperty("q", step({ residuals: { q: { op: "false" } } }))).toBe("pending");
+    expect(statusForProperty("p", null)).toBe("pending");
+  });
+});
+
+// Bug class: a lane that ever violated must sort first; trailing-pending lanes
+// rank ahead of fully-holding ones, else the timeline buries active failures.
+describe("sortLanes", () => {
+  it("orders violated, then trailing-pending, then holds, ties by name", () => {
+    const ordered = sortLanes([
+      lane("holds-b", ["holds", "holds"]),
+      lane("pending-a", ["holds", "pending"]),
+      lane("violated-z", ["holds", "violated", "holds"]),
+      lane("holds-a", ["holds", "holds"]),
+    ]).map((l) => l.name);
+    expect(ordered).toEqual(["violated-z", "pending-a", "holds-a", "holds-b"]);
+  });
+});
+
+describe("buildRunHistory", () => {
+  it("aligns lane statuses, metrics samples, and first-violation index by position", () => {
+    const run = {
+      id: "run-1",
+      steps: [
+        summary({ index: 0 }),
+        summary({ index: 1, has_violations: true }),
+        summary({ index: 2, has_exceptions: true }),
+      ],
+    } as unknown as Run;
+    const responses = [
+      step({ step: 0, residuals: { p: { op: "true" } } }),
+      step({ step: 1, violations: ["p"], residuals: { p: { op: "true" } } }),
+      null,
+    ];
+
+    const history = buildRunHistory(run, responses);
+
+    expect(history.names).toEqual(["p"]);
+    expect(history.lanes[0].statuses).toEqual(["holds", "violated", "pending"]);
+    expect(history.firstViolationStep).toBe(1);
+    expect(history.firstExceptionStep).toBe(2);
+    expect(history.violationStepIndices).toEqual([1]);
+    expect(history.exceptionStepIndices).toEqual([2]);
+    expect(history.metricsSamples.map((m) => m.stepIndex)).toEqual([0, 1, 2]);
+  });
+});

replay-ui/src/__tests__/snapshot-diff.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "bun:test";
+import {
+  canonicalize,
+  flatten,
+  getAtPath,
+  stableStringify,
+} from "../lib/snapshot-diff";
+
+// Bug class: a path off-by-one in the getAtPath regex parse resolves the wrong
+// node, so every diff between two snapshots is mis-reported. flatten emits the
+// paths the diff later feeds back through getAtPath, so every emitted path must
+// resolve to the same value flatten recorded.
+describe("flatten/getAtPath round-trip", () => {
+  const cases: { name: string; input: Record<string, unknown> }[] = [
+    { name: "nested objects", input: { a: { b: { c: 1 } } } },
+    {
+      name: "array longer than inline limit indexes each element",
+      input: { items: [10, 20, 30, 40] },
+    },
+    {
+      name: "objects inside an expanded array",
+      input: { rows: [{ id: 1 }, { id: 2 }, { id: 3 }] },
+    },
+    {
+      name: "keys with dots are matched verbatim before regex split",
+      input: { "a.b": 7 },
+    },
+    {
+      name: "mixed nesting",
+      input: { ui: { tabs: ["x", "y", "z", "w"], open: true }, n: 0 },
+    },
+  ];
+
+  for (const { name, input } of cases) {
+    it(name, () => {
+      for (const row of flatten(input)) {
+        expect(stableStringify(getAtPath(input, row.path))).toBe(
+          stableStringify(row.value),
+        );
+      }
+    });
+  }
+
+  it("indexes array elements by their real position, not off by one", () => {
+    const input = { items: ["a", "b", "c", "d"] };
+    const rows = flatten(input);
+    expect(getAtPath(input, "items[0]")).toBe("a");
+    expect(getAtPath(input, "items[3]")).toBe("d");
+    expect(rows.map((r) => r.path)).toEqual([
+      "items[0]",
+      "items[1]",
+      "items[2]",
+      "items[3]",
+    ]);
+  });
+});
+
+describe("canonicalize", () => {
+  it("orders object keys so reordered snapshots compare equal", () => {
+    expect(stableStringify({ b: 1, a: 2 })).toBe(stableStringify({ a: 2, b: 1 }));
+    expect(canonicalize({ b: 1, a: 2 })).toEqual({ a: 2, b: 1 });
+  });
+
+  it("preserves array order", () => {
+    expect(stableStringify([3, 1, 2])).not.toBe(stableStringify([1, 2, 3]));
+  });
+});

replay-ui/src/__tests__/useStep.test.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from "bun:test";
+import { clampIndex } from "../hooks/useStep";
+
+// Bug class: a wrong boundary lets the URL address step 0 or a step past the
+// end, so the viewer requests a non-existent step and renders nothing. Steps
+// are 1-based and capped at maxIndex.
+describe("clampIndex", () => {
+  const cases: [number, number | undefined, number][] = [
+    [0, 5, 1],
+    [-3, 5, 1],
+    [1, 5, 1],
+    [3, 5, 3],
+    [5, 5, 5],
+    [6, 5, 5],
+    [100, 5, 5],
+    [3, undefined, 3],
+    [0, undefined, 1],
+  ];
+  for (const [index, max, expected] of cases) {
+    it(`clamps (${index}, ${max}) -> ${expected}`, () => {
+      expect(clampIndex(index, max)).toBe(expected);
+    });
+  }
+});

replay-ui/src/api.ts

@@ -1,6 +1,6 @@
 import type { Run, RunSummary, Step } from "./types";
 
-async function getJson<T>(path: string): Promise<T> {
+export async function getJson<T>(path: string): Promise<T> {
   const response = await fetch(path, { headers: { Accept: "application/json" } });
   if (!response.ok) {
     throw new Error(`request failed: ${response.status} ${response.statusText} (${path})`);

replay-ui/src/hooks/useKeyboardNav.ts

@@ -1,73 +1,24 @@
 import { useEffect } from "react";
+import { dispatchKey, type KeyboardNavOptions } from "../lib/keyboard-nav";
 
-export interface UseKeyboardNavOptions {
-  onPrev: () => void;
-  onNext: () => void;
-  onJumpStart: () => void;
-  onJumpEnd: () => void;
-  onJumpPrev10: () => void;
-  onJumpNext10: () => void;
-  onJumpNextViolation: () => void;
-}
-
-const NAVIGATION_TAGS = new Set(["INPUT", "TEXTAREA", "SELECT"]);
-const ARROW_OWNING_ROLES = new Set(["tab", "tablist", "option", "listbox", "menuitem", "menu"]);
-
-function targetOwnsArrowKeys(target: HTMLElement | null): boolean {
-  let node: HTMLElement | null = target;
-  while (node) {
-    const role = node.getAttribute?.("role");
-    if (role && ARROW_OWNING_ROLES.has(role)) return true;
-    node = node.parentElement;
-  }
-  return false;
-}
+export type UseKeyboardNavOptions = KeyboardNavOptions;
 
 export function useKeyboardNav(options: UseKeyboardNavOptions) {
   useEffect(() => {
     const handler = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement | null;
-      if (target && (NAVIGATION_TAGS.has(target.tagName) || target.isContentEditable)) {
-        return;
-      }
-      const isArrow = event.key.startsWith("Arrow");
-      if (isArrow && targetOwnsArrowKeys(target)) {
-        return;
-      }
-      if (event.metaKey || event.ctrlKey || event.altKey) {
-        return;
-      }
-      switch (event.key) {
-        case "ArrowLeft":
-        case "k":
-          if (event.shiftKey) {
-            options.onJumpPrev10();
-          } else {
-            options.onPrev();
-          }
-          event.preventDefault();
-          return;
-        case "ArrowRight":
-        case "j":
-          if (event.shiftKey) {
-            options.onJumpNext10();
-          } else {
-            options.onNext();
-          }
-          event.preventDefault();
-          return;
-        case "g":
-          options.onJumpStart();
-          event.preventDefault();
-          return;
-        case "G":
-          options.onJumpEnd();
-          event.preventDefault();
-          return;
-        case ".":
-          options.onJumpNextViolation();
-          event.preventDefault();
-          return;
+      const handled = dispatchKey(
+        {
+          key: event.key,
+          shiftKey: event.shiftKey,
+          metaKey: event.metaKey,
+          ctrlKey: event.ctrlKey,
+          altKey: event.altKey,
+          target: event.target as HTMLElement | null,
+        },
+        options,
+      );
+      if (handled) {
+        event.preventDefault();
       }
     };
     window.addEventListener("keydown", handler);

replay-ui/src/hooks/useStep.ts

@@ -32,7 +32,7 @@ export function useStep(maxIndex: number | undefined): UseStepResult {
   return { runId, stepIndex: clamped, goTo };
 }
 
-function clampIndex(index: number, maxIndex: number | undefined): number {
+export function clampIndex(index: number, maxIndex: number | undefined): number {
   if (index < 1) {
     return 1;
   }

replay-ui/src/lib/action-format.ts

@@ -0,0 +1,92 @@
+import type { StepSummary } from "../types";
+
+export interface FormattedRow {
+  verb: string;
+  target: string;
+  targetIsTag: boolean;
+}
+
+const SELECTOR_PREFIXES = [
+  "id",
+  "text",
+  "textPrefix",
+  "desc",
+  "descPrefix",
+  "class",
+  "classPrefix",
+  "package",
+];
+
+export function parseSelector(
+  selector: string,
+): { kind: string; value: string } | null {
+  const colonIndex = selector.indexOf(":");
+  if (colonIndex <= 0) {
+    return null;
+  }
+  const kind = selector.slice(0, colonIndex);
+  const value = selector.slice(colonIndex + 1);
+  if (!SELECTOR_PREFIXES.includes(kind)) {
+    return null;
+  }
+  return { kind, value };
+}
+
+export function tagFromSelector(selector: string): string {
+  const parsed = parseSelector(selector);
+  if (!parsed) {
+    return selector;
+  }
+  if (parsed.kind.endsWith("Prefix")) {
+    return `${parsed.value}...`;
+  }
+  return parsed.value;
+}
+
+export function formatActionRow(step: StepSummary): FormattedRow {
+  const kind = step.action_kind;
+  const label = step.action_label ?? "";
+
+  if (!kind) {
+    if (step.screen) {
+      return { verb: "Observe", target: `@ ${step.screen}`, targetIsTag: false };
+    }
+    return { verb: "Observe", target: "", targetIsTag: false };
+  }
+
+  switch (kind) {
+    case "Tap": {
+      if (!label) {
+        return { verb: "Click", target: "", targetIsTag: false };
+      }
+      if (label.startsWith("(") && label.endsWith(")")) {
+        return { verb: "Click", target: label, targetIsTag: false };
+      }
+      if (parseSelector(label)) {
+        return { verb: "Click", target: tagFromSelector(label), targetIsTag: true };
+      }
+      return { verb: "Click", target: label, targetIsTag: false };
+    }
+    case "InputText":
+      return { verb: "Type", target: label, targetIsTag: false };
+    case "Swipe":
+      return { verb: "Swipe", target: label, targetIsTag: true };
+    case "PressKey":
+      return { verb: "Press", target: label, targetIsTag: true };
+    case "Wait":
+      return { verb: "Wait", target: label, targetIsTag: true };
+    default:
+      return { verb: kind, target: label, targetIsTag: false };
+  }
+}
+
+export function formatElapsed(millis: number): string {
+  const safe = Math.max(0, Math.floor(millis));
+  const totalSeconds = Math.floor(safe / 1000);
+  const mm = Math.floor(totalSeconds / 60);
+  const ss = totalSeconds % 60;
+  const ms = safe % 1000;
+  const pad2 = (n: number) => String(n).padStart(2, "0");
+  const pad3 = (n: number) => String(n).padStart(3, "0");
+  return `${pad2(mm)}:${pad2(ss)}.${pad3(ms)}`;
+}

replay-ui/src/lib/keyboard-nav.ts

@@ -0,0 +1,76 @@
+export interface KeyboardNavOptions {
+  onPrev: () => void;
+  onNext: () => void;
+  onJumpStart: () => void;
+  onJumpEnd: () => void;
+  onJumpPrev10: () => void;
+  onJumpNext10: () => void;
+  onJumpNextViolation: () => void;
+}
+
+export interface KeyEvent {
+  key: string;
+  shiftKey?: boolean;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  target?: HTMLElement | null;
+}
+
+const NAVIGATION_TAGS = new Set(["INPUT", "TEXTAREA", "SELECT"]);
+const ARROW_OWNING_ROLES = new Set([
+  "tab",
+  "tablist",
+  "option",
+  "listbox",
+  "menuitem",
+  "menu",
+]);
+
+export function targetOwnsArrowKeys(target: HTMLElement | null): boolean {
+  let node: HTMLElement | null = target;
+  while (node) {
+    const role = node.getAttribute?.("role");
+    if (role && ARROW_OWNING_ROLES.has(role)) return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+
+// Returns true when the key was consumed (caller should preventDefault).
+export function dispatchKey(
+  event: KeyEvent,
+  options: KeyboardNavOptions,
+): boolean {
+  const target = event.target ?? null;
+  if (target && (NAVIGATION_TAGS.has(target.tagName) || target.isContentEditable)) {
+    return false;
+  }
+  if (event.key.startsWith("Arrow") && targetOwnsArrowKeys(target)) {
+    return false;
+  }
+  if (event.metaKey || event.ctrlKey || event.altKey) {
+    return false;
+  }
+  switch (event.key) {
+    case "ArrowLeft":
+    case "k":
+      (event.shiftKey ? options.onJumpPrev10 : options.onPrev)();
+      return true;
+    case "ArrowRight":
+    case "j":
+      (event.shiftKey ? options.onJumpNext10 : options.onNext)();
+      return true;
+    case "g":
+      options.onJumpStart();
+      return true;
+    case "G":
+      options.onJumpEnd();
+      return true;
+    case ".":
+      options.onJumpNextViolation();
+      return true;
+    default:
+      return false;
+  }
+}

replay-ui/src/lib/metrics-format.ts

@@ -0,0 +1,43 @@
+const MB = 1024 * 1024;
+
+export function formatHeap(bytes: number): string {
+  if (bytes <= 0) return "0B";
+  if (bytes < MB) return `${Math.round(bytes / 1024)}K`;
+  if (bytes < 1024 * MB) return `${Math.round(bytes / MB)}M`;
+  return `${(bytes / (1024 * MB)).toFixed(1)}G`;
+}
+
+export function formatTime(millis: number): string {
+  const safe = Math.max(0, Math.floor(millis));
+  const seconds = Math.floor(safe / 1000);
+  const mm = String(Math.floor(seconds / 60)).padStart(2, "0");
+  const ss = String(seconds % 60).padStart(2, "0");
+  return `${mm}:${ss}`;
+}
+
+export function fractionFor(index: number, count: number): number {
+  if (count <= 1) return 0.5;
+  return index / (count - 1);
+}
+
+export function buildPath<T>(
+  samples: T[],
+  getValue: (sample: T) => number | undefined,
+  ceiling: number,
+): string {
+  const segments: string[] = [];
+  let pendingCommand = "M";
+  samples.forEach((sample, index) => {
+    const value = getValue(sample);
+    if (value === undefined) {
+      pendingCommand = "M";
+      return;
+    }
+    const x = fractionFor(index, samples.length);
+    const ratio = ceiling === 0 ? 0 : Math.min(value / ceiling, 1);
+    const y = 1 - ratio;
+    segments.push(`${pendingCommand}${x.toFixed(4)},${y.toFixed(4)}`);
+    pendingCommand = "L";
+  });
+  return segments.join(" ");
+}

replay-ui/src/lib/property-status.ts

@@ -0,0 +1,29 @@
+import type { ResidualNode, Step } from "../types";
+
+export type Status = "violated" | "pending" | "holds";
+
+export const STATUS_ORDER: Record<Status, number> = {
+  violated: 0,
+  pending: 1,
+  holds: 2,
+};
+
+export function statusFor(
+  name: string,
+  violations: Set<string>,
+  residuals?: Record<string, ResidualNode>,
+): Status {
+  if (violations.has(name)) {
+    return "violated";
+  }
+  const residual = residuals?.[name];
+  if (residual && residual.op === "true") {
+    return "holds";
+  }
+  return "pending";
+}
+
+export function statusForStep(name: string, step: Step | null): Status {
+  if (!step) return "pending";
+  return statusFor(name, new Set(step.violations ?? []), step.residuals);
+}

replay-ui/src/lib/run-history.ts

@@ -0,0 +1,78 @@
+import type { Run, Step } from "../types";
+import type { LaneStatus, PropertyLane } from "../panels/Timeline";
+import type { MetricsSample } from "../panels/MetricsChart";
+import { statusForStep } from "./property-status";
+
+export interface RunHistory {
+  names: string[];
+  lanes: PropertyLane[];
+  firstViolationStep?: number;
+  firstExceptionStep?: number;
+  exceptionStepIndices: number[];
+  violationStepIndices: number[];
+  metricsSamples: MetricsSample[];
+  steps: (Step | null)[];
+}
+
+export function collectPropertyNames(steps: (Step | null)[]): string[] {
+  const names = new Set<string>();
+  for (const step of steps) {
+    if (!step?.residuals) continue;
+    for (const name of Object.keys(step.residuals)) {
+      names.add(name);
+    }
+  }
+  return [...names].sort();
+}
+
+export function statusForProperty(name: string, step: Step | null): LaneStatus {
+  return statusForStep(name, step);
+}
+
+export function sortLanes(lanes: PropertyLane[]): PropertyLane[] {
+  const rank = (lane: PropertyLane): number => {
+    const last = lane.statuses[lane.statuses.length - 1];
+    if (lane.statuses.includes("violated")) return 0;
+    if (last === "pending") return 1;
+    return 2;
+  };
+  return [...lanes].sort((a, b) => {
+    const delta = rank(a) - rank(b);
+    if (delta !== 0) return delta;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export function buildRunHistory(
+  run: Run,
+  responses: (Step | null)[],
+): RunHistory {
+  const propertyNames = collectPropertyNames(responses);
+  const lanes: PropertyLane[] = propertyNames.map((name) => ({
+    name,
+    statuses: responses.map((step) => statusForProperty(name, step)),
+  }));
+  const firstViolationStep = run.steps.find((entry) => entry.has_violations)?.index;
+  const firstExceptionStep = run.steps.find((entry) => entry.has_exceptions)?.index;
+  const exceptionStepIndices = run.steps
+    .filter((entry) => entry.has_exceptions)
+    .map((entry) => entry.index);
+  const violationStepIndices = run.steps
+    .filter((entry) => entry.has_violations)
+    .map((entry) => entry.index);
+  const metricsSamples: MetricsSample[] = run.steps.map((entry, position) => ({
+    stepIndex: entry.index,
+    timestamp: entry.timestamp,
+    metrics: responses[position]?.metrics,
+  }));
+  return {
+    names: propertyNames,
+    lanes: sortLanes(lanes),
+    firstViolationStep,
+    firstExceptionStep,
+    exceptionStepIndices,
+    violationStepIndices,
+    metricsSamples,
+    steps: responses,
+  };
+}

replay-ui/src/lib/snapshot-diff.ts

@@ -0,0 +1,101 @@
+export interface Row {
+  path: string;
+  value: unknown;
+}
+
+export const INLINE_ARRAY_LIMIT = 2;
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    !Array.isArray(value) &&
+    Object.getPrototypeOf(value) === Object.prototype
+  );
+}
+
+export function flatten(input: Record<string, unknown>): Row[] {
+  const rows: Row[] = [];
+  const walk = (value: unknown, path: string) => {
+    if (isPlainObject(value)) {
+      const keys = Object.keys(value).sort();
+      if (keys.length === 0) {
+        rows.push({ path, value: {} });
+        return;
+      }
+      for (const key of keys) {
+        const nextPath = path === "" ? key : `${path}.${key}`;
+        walk(value[key], nextPath);
+      }
+      return;
+    }
+    if (Array.isArray(value)) {
+      if (value.length <= INLINE_ARRAY_LIMIT) {
+        rows.push({ path, value });
+        return;
+      }
+      for (let i = 0; i < value.length; i++) {
+        walk(value[i], `${path}[${i}]`);
+      }
+      return;
+    }
+    rows.push({ path, value });
+  };
+  for (const key of Object.keys(input).sort()) {
+    walk(input[key], key);
+  }
+  return rows.sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0));
+}
+
+export function getAtPath(
+  source: Record<string, unknown> | undefined,
+  path: string,
+): unknown {
+  if (!source) {
+    return undefined;
+  }
+  if (Object.prototype.hasOwnProperty.call(source, path)) {
+    return source[path];
+  }
+  const segments = path
+    .split(/\.|\[(\d+)\]/)
+    .filter((segment) => segment !== undefined && segment !== "");
+  let current: unknown = source;
+  for (const segment of segments) {
+    if (current === null || current === undefined) {
+      return undefined;
+    }
+    if (Array.isArray(current)) {
+      const index = Number(segment);
+      if (Number.isNaN(index)) {
+        return undefined;
+      }
+      current = current[index];
+      continue;
+    }
+    if (typeof current === "object") {
+      current = (current as Record<string, unknown>)[segment];
+      continue;
+    }
+    return undefined;
+  }
+  return current;
+}
+
+export function canonicalize(value: unknown): unknown {
+  if (Array.isArray(value)) {
+    return value.map(canonicalize);
+  }
+  if (isPlainObject(value)) {
+    const out: Record<string, unknown> = {};
+    for (const key of Object.keys(value).sort()) {
+      out[key] = canonicalize(value[key]);
+    }
+    return out;
+  }
+  return value;
+}
+
+export function stableStringify(value: unknown): string {
+  return JSON.stringify(canonicalize(value));
+}

replay-ui/src/panels/ActionList.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react";
 import type { KeyboardEvent } from "react";
 import type { Step, StepSummary } from "../types";
+import { formatActionRow, formatElapsed } from "../lib/action-format";
 import "./ActionList.css";
 
 export interface ActionListProps {
@@ -11,95 +12,6 @@ export interface ActionListProps {
   selectedStep?: Step;
 }
 
-interface FormattedRow {
-  verb: string;
-  target: string;
-  targetIsTag: boolean;
-}
-
-const SELECTOR_PREFIXES = [
-  "id",
-  "text",
-  "textPrefix",
-  "desc",
-  "descPrefix",
-  "class",
-  "classPrefix",
-  "package",
-];
-
-function parseSelector(selector: string): { kind: string; value: string } | null {
-  const colonIndex = selector.indexOf(":");
-  if (colonIndex <= 0) {
-    return null;
-  }
-  const kind = selector.slice(0, colonIndex);
-  const value = selector.slice(colonIndex + 1);
-  if (!SELECTOR_PREFIXES.includes(kind)) {
-    return null;
-  }
-  return { kind, value };
-}
-
-function tagFromSelector(selector: string): string {
-  const parsed = parseSelector(selector);
-  if (!parsed) {
-    return selector;
-  }
-  if (parsed.kind.endsWith("Prefix")) {
-    return `${parsed.value}...`;
-  }
-  return parsed.value;
-}
-
-export function formatActionRow(step: StepSummary): FormattedRow {
-  const kind = step.action_kind;
-  const label = step.action_label ?? "";
-
-  if (!kind) {
-    if (step.screen) {
-      return { verb: "Observe", target: `@ ${step.screen}`, targetIsTag: false };
-    }
-    return { verb: "Observe", target: "", targetIsTag: false };
-  }
-
-  switch (kind) {
-    case "Tap": {
-      if (!label) {
-        return { verb: "Click", target: "", targetIsTag: false };
-      }
-      if (label.startsWith("(") && label.endsWith(")")) {
-        return { verb: "Click", target: label, targetIsTag: false };
-      }
-      if (parseSelector(label)) {
-        return { verb: "Click", target: tagFromSelector(label), targetIsTag: true };
-      }
-      return { verb: "Click", target: label, targetIsTag: false };
-    }
-    case "InputText":
-      return { verb: "Type", target: label, targetIsTag: false };
-    case "Swipe":
-      return { verb: "Swipe", target: label, targetIsTag: true };
-    case "PressKey":
-      return { verb: "Press", target: label, targetIsTag: true };
-    case "Wait":
-      return { verb: "Wait", target: label, targetIsTag: true };
-    default:
-      return { verb: kind, target: label, targetIsTag: false };
-  }
-}
-
-export function formatElapsed(millis: number): string {
-  const safe = Math.max(0, Math.floor(millis));
-  const totalSeconds = Math.floor(safe / 1000);
-  const mm = Math.floor(totalSeconds / 60);
-  const ss = totalSeconds % 60;
-  const ms = safe % 1000;
-  const pad2 = (n: number) => String(n).padStart(2, "0");
-  const pad3 = (n: number) => String(n).padStart(3, "0");
-  return `${pad2(mm)}:${pad2(ss)}.${pad3(ms)}`;
-}
-
 function renderTarget(target: string, isTag: boolean) {
   if (!target) {
     return null;

replay-ui/src/panels/MetricsChart.tsx

@@ -1,5 +1,11 @@
 import { useState } from "react";
 import type { Metrics } from "../types";
+import {
+  buildPath,
+  formatHeap,
+  formatTime,
+  fractionFor,
+} from "../lib/metrics-format";
 import "./MetricsChart.css";
 
 export interface MetricsSample {
@@ -15,50 +21,6 @@ export interface MetricsChartProps {
   runStartMillis?: number;
 }
 
-const MB = 1024 * 1024;
-
-function formatHeap(bytes: number): string {
-  if (bytes <= 0) return "0B";
-  if (bytes < MB) return `${Math.round(bytes / 1024)}K`;
-  if (bytes < 1024 * MB) return `${Math.round(bytes / MB)}M`;
-  return `${(bytes / (1024 * MB)).toFixed(1)}G`;
-}
-
-function formatTime(millis: number): string {
-  const safe = Math.max(0, Math.floor(millis));
-  const seconds = Math.floor(safe / 1000);
-  const mm = String(Math.floor(seconds / 60)).padStart(2, "0");
-  const ss = String(seconds % 60).padStart(2, "0");
-  return `${mm}:${ss}`;
-}
-
-function fractionFor(index: number, count: number): number {
-  if (count <= 1) return 0.5;
-  return index / (count - 1);
-}
-
-function buildPath(
-  samples: MetricsSample[],
-  getValue: (sample: MetricsSample) => number | undefined,
-  ceiling: number,
-): string {
-  const segments: string[] = [];
-  let pendingCommand = "M";
-  samples.forEach((sample, index) => {
-    const value = getValue(sample);
-    if (value === undefined) {
-      pendingCommand = "M";
-      return;
-    }
-    const x = fractionFor(index, samples.length);
-    const ratio = ceiling === 0 ? 0 : Math.min(value / ceiling, 1);
-    const y = 1 - ratio;
-    segments.push(`${pendingCommand}${x.toFixed(4)},${y.toFixed(4)}`);
-    pendingCommand = "L";
-  });
-  return segments.join(" ");
-}
-
 interface LaneDot {
   key: number | string;
   x: number;

replay-ui/src/panels/SnapshotTable.tsx

@@ -1,3 +1,4 @@
+import { flatten, getAtPath, stableStringify } from "../lib/snapshot-diff";
 import "./SnapshotTable.css";
 
 export interface SnapshotTableProps {
@@ -5,103 +6,6 @@ export interface SnapshotTableProps {
   previousSnapshots?: Record<string, unknown>;
 }
 
-interface Row {
-  path: string;
-  value: unknown;
-}
-
-const INLINE_ARRAY_LIMIT = 2;
-
-function isPlainObject(value: unknown): value is Record<string, unknown> {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    !Array.isArray(value) &&
-    Object.getPrototypeOf(value) === Object.prototype
-  );
-}
-
-function flatten(input: Record<string, unknown>): Row[] {
-  const rows: Row[] = [];
-  const walk = (value: unknown, path: string) => {
-    if (isPlainObject(value)) {
-      const keys = Object.keys(value).sort();
-      if (keys.length === 0) {
-        rows.push({ path, value: {} });
-        return;
-      }
-      for (const key of keys) {
-        const nextPath = path === "" ? key : `${path}.${key}`;
-        walk(value[key], nextPath);
-      }
-      return;
-    }
-    if (Array.isArray(value)) {
-      if (value.length <= INLINE_ARRAY_LIMIT) {
-        rows.push({ path, value });
-        return;
-      }
-      for (let i = 0; i < value.length; i++) {
-        walk(value[i], `${path}[${i}]`);
-      }
-      return;
-    }
-    rows.push({ path, value });
-  };
-  for (const key of Object.keys(input).sort()) {
-    walk(input[key], key);
-  }
-  return rows.sort((a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0));
-}
-
-function getAtPath(source: Record<string, unknown> | undefined, path: string): unknown {
-  if (!source) {
-    return undefined;
-  }
-  if (Object.prototype.hasOwnProperty.call(source, path)) {
-    return source[path];
-  }
-  const segments = path.split(/\.|\[(\d+)\]/).filter((segment) => segment !== undefined && segment !== "");
-  let current: unknown = source;
-  for (const segment of segments) {
-    if (current === null || current === undefined) {
-      return undefined;
-    }
-    if (Array.isArray(current)) {
-      const index = Number(segment);
-      if (Number.isNaN(index)) {
-        return undefined;
-      }
-      current = current[index];
-      continue;
-    }
-    if (typeof current === "object") {
-      current = (current as Record<string, unknown>)[segment];
-      continue;
-    }
-    return undefined;
-  }
-  return current;
-}
-
-function canonicalize(value: unknown): unknown {
-  if (Array.isArray(value)) {
-    return value.map(canonicalize);
-  }
-  if (isPlainObject(value)) {
-    const out: Record<string, unknown> = {};
-    for (const key of Object.keys(value).sort()) {
-      out[key] = canonicalize(value[key]);
-    }
-    return out;
-  }
-  return value;
-}
-
-function stableStringify(value: unknown): string {
-  return JSON.stringify(canonicalize(value));
-}
-
 function formatValue(value: unknown): string {
   if (value === null) {
     return "null";

replay-ui/src/panels/ViolationsPanel.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import type { ResidualNode, Witness } from "../types";
+import { STATUS_ORDER, statusFor } from "../lib/property-status";
 import ResidualNodeView from "../components/ResidualNode";
 import "./ViolationsPanel.css";
 
@@ -15,29 +16,6 @@ export interface ViolationsPanelProps {
   violationsOnly?: boolean;
 }
 
-type Status = "violated" | "pending" | "holds";
-
-const STATUS_ORDER: Record<Status, number> = {
-  violated: 0,
-  pending: 1,
-  holds: 2,
-};
-
-function statusFor(
-  name: string,
-  violations: Set<string>,
-  residuals?: Record<string, ResidualNode>,
-): Status {
-  if (violations.has(name)) {
-    return "violated";
-  }
-  const residual = residuals?.[name];
-  if (residual && residual.op === "true") {
-    return "holds";
-  }
-  return "pending";
-}
-
 function formatValue(value: unknown): string {
   const encoded = JSON.stringify(value);
   return encoded === undefined ? String(value) : encoded;

replay-ui/src/routes/RunDetail.tsx

@@ -1,36 +1,26 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { getRun, getStep, screenshotUrl } from "../api";
-import type { Run, Step } from "../types";
+import type { Run } from "../types";
 import ActionList from "../panels/ActionList";
 import HierarchyPanel from "../panels/HierarchyPanel";
 import Screenshot from "../panels/Screenshot";
 import SnapshotTable from "../panels/SnapshotTable";
 import ViolationsPanel from "../panels/ViolationsPanel";
 import ExceptionsPanel from "../panels/ExceptionsPanel";
-import type { LaneStatus, PropertyLane } from "../panels/Timeline";
-import MetricsChart, { type MetricsSample } from "../panels/MetricsChart";
+import MetricsChart from "../panels/MetricsChart";
 import Tabs, { type TabDefinition } from "../components/Tabs";
 import { useStep } from "../hooks/useStep";
 import { useKeyboardNav } from "../hooks/useKeyboardNav";
 import { useTheme } from "../hooks/useTheme";
 import { deviceSpaceOf } from "../lib/device-space";
+import { buildRunHistory, type RunHistory } from "../lib/run-history";
 
 function basename(specPath: string): string {
   const index = specPath.lastIndexOf("/");
   return index >= 0 ? specPath.slice(index + 1) : specPath;
 }
 
-interface RunHistory {
-  names: string[];
-  lanes: PropertyLane[];
-  firstViolationStep?: number;
-  firstExceptionStep?: number;
-  exceptionStepIndices: number[];
-  violationStepIndices: number[];
-  metricsSamples: MetricsSample[];
-  steps: (Step | null)[];
-}
 
 export default function RunDetail() {
   const [run, setRun] = useState<Run | null>(null);
@@ -371,65 +361,5 @@ async function loadHistory(run: Run): Promise<RunHistory> {
   const responses = await Promise.all(
     run.steps.map((entry) => getStep(run.id, entry.index).catch(() => null)),
   );
-  const propertyNames = collectPropertyNames(responses);
-  const lanes: PropertyLane[] = propertyNames.map((name) => ({
-    name,
-    statuses: responses.map((step) => statusForProperty(name, step)),
-  }));
-  const firstViolationStep = run.steps.find((entry) => entry.has_violations)?.index;
-  const firstExceptionStep = run.steps.find((entry) => entry.has_exceptions)?.index;
-  const exceptionStepIndices = run.steps
-    .filter((entry) => entry.has_exceptions)
-    .map((entry) => entry.index);
-  const violationStepIndices = run.steps
-    .filter((entry) => entry.has_violations)
-    .map((entry) => entry.index);
-  const metricsSamples: MetricsSample[] = run.steps.map((entry, position) => ({
-    stepIndex: entry.index,
-    timestamp: entry.timestamp,
-    metrics: responses[position]?.metrics,
-  }));
-  return {
-    names: propertyNames,
-    lanes: sortLanes(lanes),
-    firstViolationStep,
-    firstExceptionStep,
-    exceptionStepIndices,
-    violationStepIndices,
-    metricsSamples,
-    steps: responses,
-  };
-}
-
-function collectPropertyNames(steps: (Step | null)[]): string[] {
-  const names = new Set<string>();
-  for (const step of steps) {
-    if (!step?.residuals) continue;
-    for (const name of Object.keys(step.residuals)) {
-      names.add(name);
-    }
-  }
-  return [...names].sort();
-}
-
-function statusForProperty(name: string, step: Step | null): LaneStatus {
-  if (!step) return "pending";
-  if (step.violations?.includes(name)) return "violated";
-  const residual = step.residuals?.[name];
-  if (residual && residual.op === "true") return "holds";
-  return "pending";
-}
-
-function sortLanes(lanes: PropertyLane[]): PropertyLane[] {
-  const rank = (lane: PropertyLane): number => {
-    const last = lane.statuses[lane.statuses.length - 1];
-    if (lane.statuses.includes("violated")) return 0;
-    if (last === "pending") return 1;
-    return 2;
-  };
-  return [...lanes].sort((a, b) => {
-    const delta = rank(a) - rank(b);
-    if (delta !== 0) return delta;
-    return a.name.localeCompare(b.name);
-  });
+  return buildRunHistory(run, responses);
 }