feat: uatu inspect UI (web trace explorer) (#23)

* feat(trace): extend Step/Action/Meta schema for inspect UI

Add Step.Hierarchy, Step.Residuals, Action.Selector/ResolvedBounds/TapPoint,
Meta.EndedAt and JSON tags on hierarchy.Element/Bounds/Tree so trace.jsonl
can drive the upcoming uatu inspect web UI.

* test(trace): cover EndedAt + new step fields round-trip

* feat(ltl): MarshalJSON for Formula AST + Evaluator.Residual()

Each Formula concrete type now serializes to a closed-set residual node
(true/false/not/and/or/implies/always/now/next/eventually/predicate/error)
that mirrors the TS spec API surface. Evaluator.Residual() folds pending
obligations into a single Formula so the runner can stamp one residual
per property per step into trace.jsonl.

* feat(runner): stamp residuals, hierarchy, selector targets, ended_at

Each Step now carries the captured hierarchy, per-property residual ASTs,
and (for Tap/InputText) the selector + resolved bounds + tap point. The
test_run command writes meta.ended_at on graceful shutdown so the inspect
UI can distinguish completed runs from in-progress ones.

* feat(inspect): scaffold embed dist for SPA assets

Stage 2 stub for the inspect server. Real web bundle gets wired in
Stage 4 (Makefile copies web/dist into internal/inspect/dist).

* chore(web): ignore web/ build output in root .gitignore

* chore(web): add bun + vite + vitest scaffold config

* feat(web): monochrome design tokens, typography, app shell CSS

* chore(web): placeholder for self-hosted JetBrains Mono fonts

* feat(web): index.html entry with style links and root mount

* feat(web): typescript types mirroring run/step trace schema

* feat(web): typed fetchers for runs/steps/screenshots

* feat(web): App shell with router and run/step routes

* feat(inspect): runs scan, lazy step parse, mtime-aware cache

* feat(web): RunList route with table, loading, and error states

* feat(web): RunDetail route shell with three placeholder panels

* feat(inspect): fsnotify-backed runs watcher with debounce

* fix(web): use jest-dom/vitest entry so matchers register

* test(web): cover listRuns happy path and error response

* test(web): render RunList with mocked fetch and assert row

* chore(web): commit bun lockfile

* feat(inspect): http handlers for runs/steps/screenshots/SSE

* test(inspect): cover handlers, screenshot whitelist, SSE, dev proxy

* feat(cmd): add 'uatu inspect' subcommand

* fix(web): align TS types with snake_case wire format

Go inspect server serializes RunSummary, StepSummary, Step, Meta with
snake_case JSON tags (matching the on-disk trace.jsonl/meta.json). Update
the TS types and consumers to match so API responses parse without
runtime undefined fields. Action keeps resolvedBounds/tapPoint as camelCase
because those keys were defined that way in the trace schema.

* feat(web): add ActionList panel for run-detail step navigation

* feat(web): add SnapshotTable panel with diff highlighting

Renders snapshots dictionary as a flat sorted dotted-path tree.
Changed leaves get data-changed plus a hover title with the previous value.

* test(web): cover SnapshotTable rendering and diff behavior

Eight cases: empty state, sort order, dotted-path expansion,
changed/unchanged/missing-previous flagging, and inline-vs-expanded arrays.

* feat(web): add Screenshot panel with bounds and tap overlays

Center column of run-detail page. Renders the device screenshot
scaled to fit, with an SVG overlay drawing resolvedBounds as a
violation-colored rect, tapPoint as a contrast ring, and swipes
as an arrow. Falls back to a placeholder when src is missing or
the image fails to load.

* fix(web): guard scrollIntoView call for jsdom compatibility

* test(web): cover Screenshot panel rendering and overlays

* test(web): cover ActionList rendering, selection, keyboard, and markers

* feat(web): add ExceptionsPanel component

* test(web): add ExceptionsPanel tests

* feat(web): add Timeline panel with property swimlanes

Renders SVG swimlanes per property with violated/pending/holds cells,
action-marker dots, click-to-seek, and a selected-step highlight bar.

* test(web): cover Timeline empty state, cells, status, click, highlight

* feat(web): add ResidualNode recursive AST renderer

* test(web): cover ResidualNode operators, predicate, and error chip

* feat(web): add ViolationsPanel with status badges and jump button

* test(web): cover ViolationsPanel rows, status grouping, and jump button

* test(web): register testing-library cleanup globally

All six panel test files added local afterEach(cleanup); centralize it in
the shared setup so future tests inherit DOM isolation by default.

* feat(web): hooks for url/keyboard/theme/sse

* feat(web): wire all panels into run-detail with phone-dominant grid

ActionList left, Screenshot center, Snapshots/Properties/Exceptions
stacked right, Timeline bottom. URL-synced step index (useStep), keyboard
shortcuts (j/k/arrows/g/G/.), light+dark theme toggle stored in
localStorage, SSE auto-refresh on the run index.

* test(web): add three reference run fixtures (clean, violation, exception)

* build: web targets in Makefile + bun in CI; docs(inspect)

- Makefile: web-build/web-dev/inspect-dev/test-web targets; uatu and
  install now depend on web-build so the binary embeds the latest SPA.
- ci.yml: setup-bun + cache; existing make test now runs web typecheck +
  vitest as part of the full suite.
- docs/manual/inspect.md: panel reference, keyboard shortcuts, URLs.
- docs/manual/cli.md: document uatu inspect.
- README: link to inspect docs.

* feat(runner): capture a screenshot per step

The driver already exposes Screenshot(ctx), but the runner never called
it. Each step now writes <run>/screenshots/step-NNNNN.png right after
the trace line, using the same failure-is-a-warning posture as other
best-effort observability hooks. Makes the inspect UI's center panel
actually useful.

* feat(inspect): include action_label in StepSummary

Tap/InputText/Swipe/PressKey/Wait each get a short human-readable
label (selector, quoted text, swipe direction, key name, duration) so
the action list panel can render readable rows instead of just 'Tap'
with no target.

* test(inspect): accept either #app or #root in SPA shell fallback

* feat(web): render action_label and screen in ActionList rows

Step rows now show 'Tap id:save', 'InputText "alice"', 'Swipe up',
'PressKey back', etc. Steps with no action fall back to
'observe @ <screen>' so the list reads as a flow instead of a wall
of '--' placeholders.

* feat(sidecar): implement screencap for android driver backend

Was stubbed to return an empty byte array, which made the runner's
per-step screenshot capture a no-op. Shell out to 'adb exec-out
screencap -p' and stream the PNG bytes back. Width/height stay zero
because the PNG header carries them; the Go side can parse if needed.

* feat(proto): add Metrics RPC for per-step CPU and memory capture

* feat(driver): Metrics(bundleID) returns cpu_percent + heap/total bytes

* feat(sidecar): implement Metrics RPC via adb top + /proc/<pid>/status

* feat(runner): capture metrics + before/after screenshots per step

Each step now writes step-NNNNN.png (before applyAction) and
step-NNNNN-after.png (after the action + wait-for-idle). The runner
samples Driver.Metrics(bundleID) before writing the trace line and
stamps Step.Metrics with cpu_percent, heap_bytes, total_memory_bytes
so the inspect UI can chart CPU and heap over the run.

* fix(runner,sidecar): measure CPU across step via /proc stat delta

'top -d 0.3 -n 2' measures CPU in a 300ms window that coincides with
the SDK-paused app, always reporting 0%. Switch to reading
/proc/<pid>/stat utime+stime and computing the delta between successive
calls; the natural step cadence gives a 2-5s measurement window that
captures the action response and render cycle. Also moved the sample
to before snapshotStep so the delta starts before the SDK pause.

* feat(web): add Metrics type for per-step cpu and memory

* refactor(web): replace --accent-change with --accent-positive token

* refactor(web): recolor chip-progress as neutral outlined chip

* refactor(web): use neutral border for changed snapshot rows

* feat(web): add MetricsChart panel with HEAP and CPU lanes

SVG-based time-series chart rendering heap bytes and CPU percent per
step across two stacked lanes, with a shared step axis below. Lines are
monochrome; a vertical highlight marks the selected step; per-step hit
rects make any click seek to that step.

* feat(web): revamp ActionList with tag targets, elapsed time, and expandable rows

Render selector-based Tap actions as <tag/> markup, show zero-padded MM:SS.mmm
elapsed time per row, and expand the active row with Position/Content sub-rows
when a full Step is available. Adds formatActionRow/formatElapsed helpers and
covers both with unit tests.

* fix(runner): stop copying Tap selector into action.text

The 'Content' inspect row should show the user-supplied text for
InputText actions and stay empty for Taps. Previously the runner copied
action.On into traceAction.Text for both, so the inspect UI showed the
selector as the tap's 'Content'.

* fix(web): use text-muted for swipe arrow after accent-change removal

* fix(web): snapshot values truncate with ellipsis + title tooltip

Long JSON values were breaking one character per line due to
overflow-wrap:anywhere in a narrow column. Switch to single-line ellipsis
with the full value exposed via the title attribute on hover.

* feat(web): state-before/after columns + metrics chart at bottom

RunDetail now renders a four-column grid:
  actions | state-before | state-after | side (exceptions + timeline)
with MetricsChart spanning the bottom row. Each state column shows its
own screenshot (step-NNNNN.png vs step-NNNNN-after.png), snapshot table,
and violations panel. ActionList now receives runStartMillis and the
selected Step so the active row can expand Position/Content sub-rows.

* fix(web): skip zero-value ticks + add exception markers to metrics

HEAP '0B' and CPU '100%' labels overlapped at the lane boundary. Drop
the bottom-of-range tick on both lanes (baseline is implied) and widen
LANE_GAP so the remaining labels have breathing room. Accept an
exceptionStepIndices prop and draw a dashed red vertical line at each
to surface exception spikes directly on the CPU/heap chart.

* fix(web): let action body column shrink below its content

Required minmax(0, 1fr) so the row grid honours the column's min-size of
0 instead of the implicit 'auto', preventing the action-list from
overflowing its parent when the target string is long.

* feat(web): bigger state screenshots + single properties row

Collapse snapshots into a summary chip ('SNAPSHOTS · N violations') so
the screenshot fills its state card. Deduplicate ViolationsPanel —
show it once in a new full-width 'properties' row between the state
cards and the timeline. Drop the right sidebar; exceptions now surface
as dashed markers on the metrics chart with the ExceptionsPanel only
rendering when there are actual exceptions to report.

* feat(web): add minimal Tabs component

Monochrome tab strip with underline-on-active. Used by state-before
and state-after cards to swap between Screenshot, Snapshots, Properties.
Pane scrolls internally so the outer grid stays fixed-height.

* feat(web): fold timeline into MetricsChart as STEPS lane

Adds a thin per-step status row above HEAP showing violated (red),
pending (dim gray) or holds (green-tinted). Extends highlight +
exception markers to span the status lane. Frees a whole row in the
detail grid so the page can fit in 100vh.

* refactor(web): tabbed state cards, drop standalone Timeline panel

State-before/after now use Tabs (Screenshot / Snapshots / Properties,
default Screenshot). Removes the dedicated timeline row; status lane
lives on the metrics chart. Banner is gone from the shell.

* feat(web): lock app shell to 100vh with no page scroll

html/body/#root fill the viewport, body gets overflow:hidden, and the
detail grid uses minmax(0, 1fr) rows so inner panels own their scroll.
Tightens toolbar + panel padding for a denser feel.

* feat(web): arrow-key nav + badges on Tabs (WAI-ARIA tablist)

Roving tabindex, ArrowLeft/Right/Up/Down/Home/End navigation, explicit
aria-selected/aria-controls/id wiring, and support for an optional
badge inside each tab (used for violation counts).

* feat(web): ViolationsPanel supports violationsOnly filter

* feat(web): ActionList arrow-key nav + listbox semantics + smaller font

Promote the list to role=listbox with role=option rows; roving tabindex
lets ArrowUp/Down (and Home/End) seek between steps with focus. Font
size dropped to 11px and padding tightened so long selector-tag labels
fit in the 340px actions column.

* fix(web): useKeyboardNav yields arrow keys to tablist/listbox targets

Previously pressing ArrowRight on a focused tab switched tabs AND
advanced the step. Skip arrow handling when the event target is inside
an element with an arrow-owning ARIA role.

* feat(web): fourth 'Violations' tab + wider actions + shorter metrics

Adds a Violations tab to each state card showing only violated properties
(with count badge on the tab label when > 0). Actions column widened
from 280px to 340px, bottom metrics strip trimmed from 220px to 140px
with tighter lane heights, so the whole page still fits in 100vh with
no scrollbar.

* feat(web): compact RunDetail layout using 1px borders instead of panel padding

* refactor(inspect): simplify MetricsChart to HEAP+CPU with time axis

Drop the STEPS status lane and per-sample circle markers, switch the
x-axis from step indices to mm:ss clock time, trim y-axis ticks to
min/max with compact units, rotate lane labels into the left gutter,
and replace the thin playhead line with a wider dotted red band.
Traces stay grayscale; red appears only on the playhead pattern.

* fix(web): RunList rows no longer stretch to fill viewport height

Tables inherited flex: 1 1 auto from .app-main > * and distributed extra
vertical space across rows. Override with flex: 0 0 auto + align-self.

* misc changes

* fix(web): hoist useState above early return in MetricsChart

Calling useState after an unconditional early return violates React's
Rules of Hooks: the empty-samples branch renders 0 hooks while the
populated branch calls 1. On the initial null->loaded transition of
history the hook count changes and React throws.

* fix(web): subscribe to named SSE event instead of 'message'

Server emits 'event: runs.changed' frames; the WHATWG EventSource spec
dispatches those as events of type 'runs.changed', not 'message'. The
listener registered on 'message' was never fired, so RunList never
auto-refreshed on run create/finish/delete.

* fix(inspect): unsubscribe SSE clients on disconnect

Watcher.Subscribe appended to a slice with no matching removal path,
so every closed EventSource connection leaked its channel. Over a
long-running server the slice grew unbounded and every fs event paid
O(N) iterating dead channels. Add Unsubscribe + defer it in
handleEvents.

Unsubscribe does not close the channel: broadcast snapshots the
slice without holding the mutex, so a concurrent close would race
with its non-blocking send.

* fix(trace): rename resolvedBounds/tapPoint to snake_case

Every other json tag in the trace schema (from_x, duration_millis,
bundle_sha256, etc.) uses snake_case. The two new Action fields
introduced with the inspect UI broke that pattern. Rename them
before the format ships to external consumers.

* chore(web): drop vitest and remove UI tests from CI

No UI tests wanted in web. Removes vitest, jsdom, testing-library
devDeps and the vitest.setup.ts + vite.config.ts test block.
Makefile test-web becomes web-typecheck (typecheck only).

Fixes CI failure where `vitest run` exits 1 with no test files.

* chore(make): dedupe sidecar embed and drop recursive make

Make $(SIDECAR_JAR) the real recipe and $(SIDECAR_EMBED) a file
target, so uatu/install/inspect-dev share one copy step and
sidecar/release-cli just depend on the jar instead of re-invoking make.

web/bun.lock

@@ -0,0 +1,256 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "@uatu/inspect-web",
+      "dependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.2",
+      },
+      "devDependencies": {
+        "@types/react": "^18.3.5",
+        "@types/react-dom": "^18.3.0",
+        "@vitejs/plugin-react": "^4.3.1",
+        "typescript": "^5.5.4",
+        "vite": "^5.4.6",
+      },
+    },
+  },
+  "packages": {
+    "@babel/code-frame": ["@babel/[email protected]", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/compat-data": ["@babel/[email protected]", "", {}, "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg=="],
+
+    "@babel/core": ["@babel/[email protected]", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-module-transforms": "^7.28.6", "@babel/helpers": "^7.28.6", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/traverse": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA=="],
+
+    "@babel/generator": ["@babel/[email protected]", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/helper-compilation-targets": ["@babel/[email protected]", "", { "dependencies": { "@babel/compat-data": "^7.28.6", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA=="],
+
+    "@babel/helper-globals": ["@babel/[email protected]", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="],
+
+    "@babel/helper-module-imports": ["@babel/[email protected]", "", { "dependencies": { "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw=="],
+
+    "@babel/helper-module-transforms": ["@babel/[email protected]", "", { "dependencies": { "@babel/helper-module-imports": "^7.28.6", "@babel/helper-validator-identifier": "^7.28.5", "@babel/traverse": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA=="],
+
+    "@babel/helper-plugin-utils": ["@babel/[email protected]", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/helper-string-parser": ["@babel/[email protected]", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/[email protected]", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-validator-option": ["@babel/[email protected]", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
+
+    "@babel/helpers": ["@babel/[email protected]", "", { "dependencies": { "@babel/template": "^7.28.6", "@babel/types": "^7.29.0" } }, "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw=="],
+
+    "@babel/parser": ["@babel/[email protected]", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/plugin-transform-react-jsx-self": ["@babel/[email protected]", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw=="],
+
+    "@babel/plugin-transform-react-jsx-source": ["@babel/[email protected]", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw=="],
+
+    "@babel/template": ["@babel/[email protected]", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/traverse": ["@babel/[email protected]", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/types": ["@babel/[email protected]", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@esbuild/aix-ppc64": ["@esbuild/[email protected]", "", { "os": "aix", "cpu": "ppc64" }, "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ=="],
+
+    "@esbuild/android-arm": ["@esbuild/[email protected]", "", { "os": "android", "cpu": "arm" }, "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg=="],
+
+    "@esbuild/android-arm64": ["@esbuild/[email protected]", "", { "os": "android", "cpu": "arm64" }, "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A=="],
+
+    "@esbuild/android-x64": ["@esbuild/[email protected]", "", { "os": "android", "cpu": "x64" }, "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/[email protected]", "", { "os": "darwin", "cpu": "arm64" }, "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/[email protected]", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/[email protected]", "", { "os": "freebsd", "cpu": "x64" }, "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ=="],
+
+    "@esbuild/linux-arm": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "arm" }, "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "arm64" }, "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "ia32" }, "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "none" }, "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "none" }, "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "ppc64" }, "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "none" }, "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "s390x" }, "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A=="],
+
+    "@esbuild/linux-x64": ["@esbuild/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/[email protected]", "", { "os": "none", "cpu": "x64" }, "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/[email protected]", "", { "os": "openbsd", "cpu": "x64" }, "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/[email protected]", "", { "os": "sunos", "cpu": "x64" }, "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/[email protected]", "", { "os": "win32", "cpu": "arm64" }, "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/[email protected]", "", { "os": "win32", "cpu": "ia32" }, "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA=="],
+
+    "@esbuild/win32-x64": ["@esbuild/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/[email protected]", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/[email protected]", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/[email protected]", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/[email protected]", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/[email protected]", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@remix-run/router": ["@remix-run/[email protected]", "", {}, "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w=="],
+
+    "@rolldown/pluginutils": ["@rolldown/[email protected]", "", {}, "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA=="],
+
+    "@rollup/rollup-android-arm-eabi": ["@rollup/[email protected]", "", { "os": "android", "cpu": "arm" }, "sha512-dnlp69efPPg6Uaw2dVqzWRfAWRnYVb1XJ8CyyhIbZeaq4CA5/mLeZ1IEt9QqQxmbdvagjLIm2ZL8BxXv5lH4Yw=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/[email protected]", "", { "os": "android", "cpu": "arm64" }, "sha512-OqZTwDRDchGRHHm/hwLOL7uVPB9aUvI0am/eQuWMNyFHf5PSEQmyEeYYheA0EPPKUO/l0uigCp+iaTjoLjVoHg=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/[email protected]", "", { "os": "darwin", "cpu": "arm64" }, "sha512-UwRE7CGpvSVEQS8gUMBe1uADWjNnVgP3Iusyda1nSRwNDCsRjnGc7w6El6WLQsXmZTbLZx9cecegumcitNfpmA=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/[email protected]", "", { "os": "darwin", "cpu": "x64" }, "sha512-gjEtURKLCC5VXm1I+2i1u9OhxFsKAQJKTVB8WvDAHF+oZlq0GTVFOlTlO1q3AlCTE/DF32c16ESvfgqR7343/g=="],
+
+    "@rollup/rollup-freebsd-arm64": ["@rollup/[email protected]", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-Bcl6CYDeAgE70cqZaMojOi/eK63h5Me97ZqAQoh77VPjMysA/4ORQBRGo3rRy45x4MzVlU9uZxs8Uwy7ZaKnBw=="],
+
+    "@rollup/rollup-freebsd-x64": ["@rollup/[email protected]", "", { "os": "freebsd", "cpu": "x64" }, "sha512-LU+TPda3mAE2QB0/Hp5VyeKJivpC6+tlOXd1VMoXV/YFMvk/MNk5iXeBfB4MQGRWyOYVJ01625vjkr0Az98OJQ=="],
+
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "arm" }, "sha512-2QxQrM+KQ7DAW4o22j+XZ6RKdxjLD7BOWTP0Bv0tmjdyhXSsr2Ul1oJDQqh9Zf5qOwTuTc7Ek83mOFaKnodPjg=="],
+
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "arm" }, "sha512-TbziEu2DVsTEOPif2mKWkMeDMLoYjx95oESa9fkQQK7r/Orta0gnkcDpzwufEcAO2BLBsD7mZkXGFqEdMRRwfw=="],
+
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "arm64" }, "sha512-bO/rVDiDUuM2YfuCUwZ1t1cP+/yqjqz+Xf2VtkdppefuOFS2OSeAfgafaHNkFn0t02hEyXngZkxtGqXcXwO8Rg=="],
+
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "arm64" }, "sha512-hr26p7e93Rl0Za+JwW7EAnwAvKkehh12BU1Llm9Ykiibg4uIr2rbpxG9WCf56GuvidlTG9KiiQT/TXT1yAWxTA=="],
+
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "none" }, "sha512-pOjB/uSIyDt+ow3k/RcLvUAOGpysT2phDn7TTUB3n75SlIgZzM6NKAqlErPhoFU+npgY3/n+2HYIQVbF70P9/A=="],
+
+    "@rollup/rollup-linux-loong64-musl": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "none" }, "sha512-2/w+q8jszv9Ww1c+6uJT3OwqhdmGP2/4T17cu8WuwyUuuaCDDJ2ojdyYwZzCxx0GcsZBhzi3HmH+J5pZNXnd+Q=="],
+
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "ppc64" }, "sha512-11+aL5vKheYgczxtPVVRhdptAM2H7fcDR5Gw4/bTcteuZBlH4oP9f5s9zYO9aGZvoGeBpqXI/9TZZihZ609wKw=="],
+
+    "@rollup/rollup-linux-ppc64-musl": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "ppc64" }, "sha512-i16fokAGK46IVZuV8LIIwMdtqhin9hfYkCh8pf8iC3QU3LpwL+1FSFGej+O7l3E/AoknL6Dclh2oTdnRMpTzFQ=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "none" }, "sha512-49FkKS6RGQoriDSK/6E2GkAsAuU5kETFCh7pG4yD/ylj9rKhTmO3elsnmBvRD4PgJPds5W2PkhC82aVwmUcJ7A=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "none" }, "sha512-mjYNkHPfGpUR00DuM1ZZIgs64Hpf4bWcz9Z41+4Q+pgDx73UwWdAYyf6EG/lRFldmdHHzgrYyge5akFUW0D3mQ=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "s390x" }, "sha512-ALyvJz965BQk8E9Al/JDKKDLH2kfKFLTGMlgkAbbYtZuJt9LU8DW3ZoDMCtQpXAltZxwBHevXz5u+gf0yA0YoA=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-UQjrkIdWrKI626Du8lCQ6MJp/6V1LAo2bOK9OTu4mSn8GGXIkPXk/Vsp4bLHCd9Z9Iz2OTEaokUE90VweJgIYQ=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/[email protected]", "", { "os": "linux", "cpu": "x64" }, "sha512-bTsRGj6VlSdn/XD4CGyzMnzaBs9bsRxy79eTqTCBsA8TMIEky7qg48aPkvJvFe1HyzQ5oMZdg7AnVlWQSKLTnw=="],
+
+    "@rollup/rollup-openbsd-x64": ["@rollup/[email protected]", "", { "os": "openbsd", "cpu": "x64" }, "sha512-6d4Z3534xitaA1FcMWP7mQPq5zGwBmGbhphh2DwaA1aNIXUu3KTOfwrWpbwI4/Gr0uANo7NTtaykFyO2hPuFLg=="],
+
+    "@rollup/rollup-openharmony-arm64": ["@rollup/[email protected]", "", { "os": "none", "cpu": "arm64" }, "sha512-NetAg5iO2uN7eB8zE5qrZ3CSil+7IJt4WDFLcC75Ymywq1VZVD6qJ6EvNLjZ3rEm6gB7XW5JdT60c6MN35Z85Q=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/[email protected]", "", { "os": "win32", "cpu": "arm64" }, "sha512-NCYhOotpgWZ5kdxCZsv6Iudx0wX8980Q/oW4pNFNihpBKsDbEA1zpkfxJGC0yugsUuyDZ7gL37dbzwhR0VI7pQ=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/[email protected]", "", { "os": "win32", "cpu": "ia32" }, "sha512-RXsaOqXxfoUBQoOgvmmijVxJnW2IGB0eoMO7F8FAjaj0UTywUO/luSqimWBJn04WNgUkeNhh7fs7pESXajWmkg=="],
+
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-qdAzEULD+/hzObedtmV6iBpdL5TIbKVztGiK7O3/KYSf+HIzU257+MX1EXJcyIiDbMAqmbwaufcYPvyRryeZtA=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/[email protected]", "", { "os": "win32", "cpu": "x64" }, "sha512-Nd/SgG27WoA9e+/TdK74KnHz852TLa94ovOYySo/yMPuTmpckK/jIF2jSwS3g7ELSKXK13/cVdmg1Z/DaCWKxA=="],
+
+    "@types/babel__core": ["@types/[email protected]", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
+
+    "@types/babel__generator": ["@types/[email protected]", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
+
+    "@types/babel__template": ["@types/[email protected]", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
+
+    "@types/babel__traverse": ["@types/[email protected]", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
+
+    "@types/estree": ["@types/[email protected]", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
+
+    "@types/prop-types": ["@types/[email protected]", "", {}, "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="],
+
+    "@types/react": ["@types/[email protected]", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" } }, "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw=="],
+
+    "@types/react-dom": ["@types/[email protected]", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
+
+    "@vitejs/plugin-react": ["@vitejs/[email protected]", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="],
+
+    "baseline-browser-mapping": ["[email protected]", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-1AaXxEPfXT+GvTBJFuy4yXVHWJBXa4OdbIebGN/wX5DlsIkU0+wzGnd2lOzokSk51d5LUmqjgBLRLlypLUqInQ=="],
+
+    "browserslist": ["[email protected]", "", { "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", "electron-to-chromium": "^1.5.328", "node-releases": "^2.0.36", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg=="],
+
+    "caniuse-lite": ["[email protected]", "", {}, "sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ=="],
+
+    "convert-source-map": ["[email protected]", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
+    "csstype": ["[email protected]", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "debug": ["[email protected]", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "electron-to-chromium": ["[email protected]", "", {}, "sha512-908qahOGocRMinT2nM3ajCEM99H4iPdv84eagPP3FfZy/1ZGeOy2CZYzjhms81ckOPCXPlW7LkY4XpxD8r1DrA=="],
+
+    "esbuild": ["[email protected]", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.21.5", "@esbuild/android-arm": "0.21.5", "@esbuild/android-arm64": "0.21.5", "@esbuild/android-x64": "0.21.5", "@esbuild/darwin-arm64": "0.21.5", "@esbuild/darwin-x64": "0.21.5", "@esbuild/freebsd-arm64": "0.21.5", "@esbuild/freebsd-x64": "0.21.5", "@esbuild/linux-arm": "0.21.5", "@esbuild/linux-arm64": "0.21.5", "@esbuild/linux-ia32": "0.21.5", "@esbuild/linux-loong64": "0.21.5", "@esbuild/linux-mips64el": "0.21.5", "@esbuild/linux-ppc64": "0.21.5", "@esbuild/linux-riscv64": "0.21.5", "@esbuild/linux-s390x": "0.21.5", "@esbuild/linux-x64": "0.21.5", "@esbuild/netbsd-x64": "0.21.5", "@esbuild/openbsd-x64": "0.21.5", "@esbuild/sunos-x64": "0.21.5", "@esbuild/win32-arm64": "0.21.5", "@esbuild/win32-ia32": "0.21.5", "@esbuild/win32-x64": "0.21.5" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw=="],
+
+    "escalade": ["[email protected]", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "fsevents": ["[email protected]", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "gensync": ["[email protected]", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
+
+    "js-tokens": ["[email protected]", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
+
+    "jsesc": ["[email protected]", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
+
+    "json5": ["[email protected]", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
+
+    "loose-envify": ["[email protected]", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
+
+    "lru-cache": ["[email protected]", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+
+    "ms": ["[email protected]", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
+    "nanoid": ["[email protected]", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "node-releases": ["[email protected]", "", {}, "sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg=="],
+
+    "picocolors": ["[email protected]", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "postcss": ["[email protected]", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ=="],
+
+    "react": ["[email protected]", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
+
+    "react-dom": ["[email protected]", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw=="],
+
+    "react-refresh": ["[email protected]", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
+
+    "react-router": ["[email protected]", "", { "dependencies": { "@remix-run/router": "1.23.2" }, "peerDependencies": { "react": ">=16.8" } }, "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw=="],
+
+    "react-router-dom": ["[email protected]", "", { "dependencies": { "@remix-run/router": "1.23.2", "react-router": "6.30.3" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag=="],
+
+    "rollup": ["[email protected]", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.2", "@rollup/rollup-android-arm64": "4.60.2", "@rollup/rollup-darwin-arm64": "4.60.2", "@rollup/rollup-darwin-x64": "4.60.2", "@rollup/rollup-freebsd-arm64": "4.60.2", "@rollup/rollup-freebsd-x64": "4.60.2", "@rollup/rollup-linux-arm-gnueabihf": "4.60.2", "@rollup/rollup-linux-arm-musleabihf": "4.60.2", "@rollup/rollup-linux-arm64-gnu": "4.60.2", "@rollup/rollup-linux-arm64-musl": "4.60.2", "@rollup/rollup-linux-loong64-gnu": "4.60.2", "@rollup/rollup-linux-loong64-musl": "4.60.2", "@rollup/rollup-linux-ppc64-gnu": "4.60.2", "@rollup/rollup-linux-ppc64-musl": "4.60.2", "@rollup/rollup-linux-riscv64-gnu": "4.60.2", "@rollup/rollup-linux-riscv64-musl": "4.60.2", "@rollup/rollup-linux-s390x-gnu": "4.60.2", "@rollup/rollup-linux-x64-gnu": "4.60.2", "@rollup/rollup-linux-x64-musl": "4.60.2", "@rollup/rollup-openbsd-x64": "4.60.2", "@rollup/rollup-openharmony-arm64": "4.60.2", "@rollup/rollup-win32-arm64-msvc": "4.60.2", "@rollup/rollup-win32-ia32-msvc": "4.60.2", "@rollup/rollup-win32-x64-gnu": "4.60.2", "@rollup/rollup-win32-x64-msvc": "4.60.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-J9qZyW++QK/09NyN/zeO0dG/1GdGfyp9lV8ajHnRVLfo/uFsbji5mHnDgn/qYdUHyCkM2N+8VyspgZclfAh0eQ=="],
+
+    "scheduler": ["[email protected]", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+
+    "semver": ["[email protected]", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "source-map-js": ["[email protected]", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "typescript": ["[email protected]", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "update-browserslist-db": ["[email protected]", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
+
+    "vite": ["[email protected]", "", { "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", "rollup": "^4.20.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw=="],
+
+    "yallist": ["[email protected]", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
+  }
+}

web/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>uatu inspect</title>
+    <link rel="stylesheet" href="/src/styles/typography.css" />
+    <link rel="stylesheet" href="/src/styles/tokens.css" />
+    <link rel="stylesheet" href="/src/styles/app.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@uatu/inspect-web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.6"
+  }
+}

web/src/App.tsx

@@ -0,0 +1,32 @@
+import { BrowserRouter, Navigate, Route, Routes, useParams } from "react-router-dom";
+import RunList from "./routes/RunList";
+import RunDetail from "./routes/RunDetail";
+
+function RunIndexRedirect() {
+  const { id } = useParams<{ id: string }>();
+  if (!id) {
+    return <NotFound />;
+  }
+  return <Navigate to={`/runs/${id}/steps/1`} replace />;
+}
+
+function NotFound() {
+  return <div className="status-block">not found</div>;
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <div className="app-shell">
+        <main className="app-main">
+          <Routes>
+            <Route path="/" element={<RunList />} />
+            <Route path="/runs/:id" element={<RunIndexRedirect />} />
+            <Route path="/runs/:id/steps/:step" element={<RunDetail />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </main>
+      </div>
+    </BrowserRouter>
+  );
+}

web/src/api.ts

@@ -0,0 +1,25 @@
+import type { Run, RunSummary, Step } from "./types";
+
+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})`);
+  }
+  return (await response.json()) as T;
+}
+
+export function listRuns(): Promise<RunSummary[]> {
+  return getJson<RunSummary[]>("/api/runs");
+}
+
+export function getRun(runId: string): Promise<Run> {
+  return getJson<Run>(`/api/runs/${encodeURIComponent(runId)}`);
+}
+
+export function getStep(runId: string, index: number): Promise<Step> {
+  return getJson<Step>(`/api/runs/${encodeURIComponent(runId)}/steps/${index}`);
+}
+
+export function screenshotUrl(runId: string, name: string): string {
+  return `/api/runs/${encodeURIComponent(runId)}/screenshots/${encodeURIComponent(name)}`;
+}

web/src/components/ResidualNode.css

@@ -0,0 +1,59 @@
+.residual {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.residual-leaf,
+.residual-unary,
+.residual-binary,
+.residual-group {
+  display: inline;
+}
+
+.residual-unary,
+.residual-binary {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.op-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  padding: 1px 4px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  background: var(--surface);
+}
+
+.residual-bound {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.residual-error {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 6px;
+  border: 1px solid var(--accent-violation);
+  border-radius: 3px;
+  color: var(--accent-violation);
+}
+
+.residual-error .op-label {
+  color: var(--accent-violation);
+  border-color: var(--accent-violation);
+  background: transparent;
+}
+
+.residual-error-message {
+  font-size: 12px;
+}

web/src/components/ResidualNode.tsx

@@ -0,0 +1,88 @@
+import type { ResidualNode } from "../types";
+import "./ResidualNode.css";
+
+export interface ResidualNodeProps {
+  node: ResidualNode;
+}
+
+function OperatorLabel({ children }: { children: string }) {
+  return <span className="op-label">{children}</span>;
+}
+
+function Wrapped({ node }: { node: ResidualNode }) {
+  return (
+    <span className="residual-group">
+      (<ResidualNodeView node={node} />)
+    </span>
+  );
+}
+
+function ResidualNodeView({ node }: ResidualNodeProps) {
+  switch (node.op) {
+    case "true":
+      return <span className="residual-leaf">true</span>;
+    case "false":
+      return <span className="residual-leaf">false</span>;
+    case "predicate":
+      return (
+        <span className="residual-leaf">
+          <OperatorLabel>pred</OperatorLabel>
+          {node.name ? <>({node.name})</> : null}
+        </span>
+      );
+    case "error":
+      return (
+        <span className="residual-error" role="status">
+          <OperatorLabel>error</OperatorLabel>
+          <span className="residual-error-message">{node.message}</span>
+        </span>
+      );
+    case "always":
+    case "now":
+    case "next":
+    case "not":
+      return (
+        <span className="residual-unary">
+          <OperatorLabel>{node.op}</OperatorLabel>
+          <Wrapped node={node.arg} />
+        </span>
+      );
+    case "eventually":
+      return (
+        <span className="residual-unary">
+          <OperatorLabel>eventually</OperatorLabel>
+          {node.within ? (
+            <span className="residual-bound">
+              within {node.within.amount} {node.within.unit}
+            </span>
+          ) : null}
+          <Wrapped node={node.arg} />
+        </span>
+      );
+    case "and":
+    case "or":
+      return (
+        <span className="residual-binary">
+          <Wrapped node={node.left} />
+          <OperatorLabel>{node.op}</OperatorLabel>
+          <Wrapped node={node.right} />
+        </span>
+      );
+    case "implies":
+      return (
+        <span className="residual-binary">
+          <Wrapped node={node.left} />
+          <OperatorLabel>{"=>"}</OperatorLabel>
+          <Wrapped node={node.right} />
+        </span>
+      );
+  }
+}
+
+export default function ResidualNodeRoot({ node }: ResidualNodeProps) {
+  return (
+    <span className="residual">
+      <ResidualNodeView node={node} />
+    </span>
+  );
+}

web/src/components/Tabs.css

@@ -0,0 +1,77 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  flex: 1 1 auto;
+  font-family: var(--font-mono);
+}
+
+.tabs-header {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+  padding: 0 4px;
+}
+
+.tabs-tab {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 4px 10px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  margin-bottom: -1px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  outline: none;
+}
+
+.tabs-tab:focus-visible {
+  outline: 1px solid var(--text-primary);
+  outline-offset: -1px;
+}
+
+.tabs-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  padding: 0 4px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  font-size: 9px;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.tabs-tab[data-active="true"] .tabs-badge {
+  border-color: var(--text-primary);
+}
+
+.tabs-badge[data-kind="violation"] {
+  border-color: var(--accent-violation);
+  color: var(--accent-violation);
+}
+
+.tabs-tab:hover {
+  color: var(--text-primary);
+}
+
+.tabs-tab[data-active="true"] {
+  color: var(--text-primary);
+  border-bottom-color: var(--text-primary);
+}
+
+.tabs-panel {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}

web/src/components/Tabs.tsx

@@ -0,0 +1,110 @@
+import { useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import "./Tabs.css";
+
+export interface TabDefinition {
+  id: string;
+  label: string;
+  content: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface TabsProps {
+  tabs: TabDefinition[];
+  defaultTabId?: string;
+  ariaLabel?: string;
+}
+
+export default function Tabs({ tabs, defaultTabId, ariaLabel }: TabsProps) {
+  const initial = defaultTabId && tabs.some((t) => t.id === defaultTabId) ? defaultTabId : tabs[0]?.id;
+  const [activeId, setActiveId] = useState<string | undefined>(initial);
+  const buttonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+
+  if (tabs.length === 0) return null;
+  const active = tabs.find((t) => t.id === activeId) ?? tabs[0];
+
+  const focusTab = (id: string) => {
+    setActiveId(id);
+    const node = buttonRefs.current.get(id);
+    if (node) node.focus();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const currentIndex = tabs.findIndex((t) => t.id === active.id);
+    if (currentIndex < 0) return;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = tabs[(currentIndex + 1) % tabs.length];
+        focusTab(next.id);
+        return;
+      }
+      case "ArrowLeft":
+      case "ArrowUp": {
+        event.preventDefault();
+        const prev = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+        focusTab(prev.id);
+        return;
+      }
+      case "Home": {
+        event.preventDefault();
+        focusTab(tabs[0].id);
+        return;
+      }
+      case "End": {
+        event.preventDefault();
+        focusTab(tabs[tabs.length - 1].id);
+        return;
+      }
+    }
+  };
+
+  const panelId = `${ariaLabel ?? "tabs"}-panel`.replace(/\s+/g, "-");
+
+  return (
+    <div className="tabs">
+      <div
+        className="tabs-header"
+        role="tablist"
+        aria-label={ariaLabel}
+        onKeyDown={handleKeyDown}
+      >
+        {tabs.map((tab) => {
+          const isActive = tab.id === active.id;
+          return (
+            <button
+              key={tab.id}
+              ref={(node) => {
+                if (node) {
+                  buttonRefs.current.set(tab.id, node);
+                } else {
+                  buttonRefs.current.delete(tab.id);
+                }
+              }}
+              type="button"
+              role="tab"
+              id={`${panelId}-tab-${tab.id}`}
+              className="tabs-tab"
+              data-active={isActive ? "true" : "false"}
+              aria-selected={isActive}
+              aria-controls={panelId}
+              tabIndex={isActive ? 0 : -1}
+              onClick={() => setActiveId(tab.id)}
+            >
+              <span>{tab.label}</span>
+              {tab.badge !== undefined ? <span className="tabs-badge">{tab.badge}</span> : null}
+            </button>
+          );
+        })}
+      </div>
+      <div
+        className="tabs-panel"
+        role="tabpanel"
+        id={panelId}
+        aria-labelledby={`${panelId}-tab-${active.id}`}
+      >
+        {active.content}
+      </div>
+    </div>
+  );
+}

web/src/hooks/useKeyboardNav.ts

@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+
+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 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;
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [options]);
+}

web/src/hooks/useSse.ts

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+export function useSse(eventName: string, onEvent: () => void) {
+  useEffect(() => {
+    if (typeof EventSource === "undefined") {
+      return;
+    }
+    const source = new EventSource("/api/events");
+    const messageHandler = () => {
+      onEvent();
+    };
+    source.addEventListener(eventName, messageHandler);
+    return () => {
+      source.removeEventListener(eventName, messageHandler);
+      source.close();
+    };
+  }, [eventName, onEvent]);
+}

web/src/hooks/useStep.ts

@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+export interface UseStepResult {
+  runId: string;
+  stepIndex: number;
+  goTo: (index: number) => void;
+}
+
+export function useStep(maxIndex: number | undefined): UseStepResult {
+  const navigate = useNavigate();
+  const { id, step } = useParams<{ id: string; step: string }>();
+  const runId = id ?? "";
+  const parsed = Number(step ?? "1");
+  const stepIndex = Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
+
+  const clamped = clampIndex(stepIndex, maxIndex);
+
+  useEffect(() => {
+    if (clamped !== stepIndex && runId !== "") {
+      navigate(`/runs/${runId}/steps/${clamped}`, { replace: true });
+    }
+  }, [clamped, stepIndex, runId, navigate]);
+
+  const goTo = (index: number) => {
+    const target = clampIndex(index, maxIndex);
+    if (target !== stepIndex && runId !== "") {
+      navigate(`/runs/${runId}/steps/${target}`);
+    }
+  };
+
+  return { runId, stepIndex: clamped, goTo };
+}
+
+function clampIndex(index: number, maxIndex: number | undefined): number {
+  if (index < 1) {
+    return 1;
+  }
+  if (maxIndex !== undefined && index > maxIndex) {
+    return maxIndex;
+  }
+  return index;
+}

web/src/hooks/useTheme.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+
+export type ThemeMode = "light" | "dark";
+const STORAGE_KEY = "uatu-inspect-theme";
+
+function detectInitial(): ThemeMode {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+}
+
+export function useTheme(): { theme: ThemeMode; toggle: () => void } {
+  const [theme, setTheme] = useState<ThemeMode>(() => detectInitial());
+
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    document.documentElement.dataset.theme = theme;
+    try {
+      window.localStorage.setItem(STORAGE_KEY, theme);
+    } catch {
+      // private mode or storage disabled — theme still applies for the session.
+    }
+  }, [theme]);
+
+  return {
+    theme,
+    toggle: () => setTheme((current) => (current === "dark" ? "light" : "dark")),
+  };
+}

web/src/main.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const container = document.getElementById("root");
+if (!container) {
+  throw new Error("missing #root element");
+}
+createRoot(container).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

web/src/panels/ActionList.css

@@ -0,0 +1,132 @@
+.action-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.action-list-item {
+  display: block;
+  padding: 3px 6px;
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  color: var(--text-primary);
+  outline: none;
+}
+
+.action-list-item:focus-visible {
+  outline: 1px solid var(--text-primary);
+  outline-offset: -1px;
+}
+
+.action-list-row {
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr) auto auto;
+  align-items: baseline;
+  column-gap: 4px;
+}
+
+.action-list-index {
+  text-align: left;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.action-list-body {
+  display: inline-flex;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action-list-verb {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.action-list-target {
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action-list-target-tag {
+  color: var(--text-primary);
+}
+
+.action-list-markers {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.action-list-elapsed {
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  padding-left: 8px;
+}
+
+.action-list-item:hover {
+  background: color-mix(in srgb, currentColor 6%, transparent);
+}
+
+.action-list-item:focus-visible {
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+
+.action-list-item[data-active="true"] {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  border-left-color: currentColor;
+}
+
+.action-list-item[data-active="true"][data-violations="true"] {
+  border-left-color: var(--accent-violation);
+}
+
+.action-list-marker-violation {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent-violation);
+}
+
+.action-list-marker-exception {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1px solid var(--text-muted);
+  background: transparent;
+}
+
+.action-list-details {
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  column-gap: 4px;
+  padding: 2px 0;
+  font-size: 10px;
+}
+
+.action-list-detail-row {
+  grid-column: 2;
+  display: grid;
+  grid-template-columns: 70px 1fr;
+  gap: 6px;
+  color: var(--text-muted);
+}
+
+.action-list-detail-label {
+  color: var(--text-muted);
+}
+
+.action-list-detail-value {
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

web/src/panels/ActionList.tsx

@@ -0,0 +1,299 @@
+import { useEffect, useRef } from "react";
+import type { KeyboardEvent } from "react";
+import type { Step, StepSummary } from "../types";
+import "./ActionList.css";
+
+export interface ActionListProps {
+  steps: StepSummary[];
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+  runStartMillis?: number;
+  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;
+  }
+  if (isTag) {
+    return <span className="action-list-target action-list-target-tag">{`<${target}/>`}</span>;
+  }
+  return <span className="action-list-target">{target}</span>;
+}
+
+function contentTextForStep(step: Step): string {
+  const action = step.action;
+  if (!action) {
+    return "";
+  }
+  if (typeof action.text === "string") {
+    return action.text;
+  }
+  return "";
+}
+
+function positionTextForStep(step: Step): string | null {
+  const action = step.action;
+  if (!action) {
+    return null;
+  }
+  if (action.tap_point) {
+    return `${action.tap_point.x.toFixed(1)}, ${action.tap_point.y.toFixed(1)}`;
+  }
+  if (typeof action.x === "number" && typeof action.y === "number") {
+    return `${action.x.toFixed(1)}, ${action.y.toFixed(1)}`;
+  }
+  if (
+    typeof action.from_x === "number" &&
+    typeof action.from_y === "number"
+  ) {
+    return `${action.from_x.toFixed(1)}, ${action.from_y.toFixed(1)}`;
+  }
+  return null;
+}
+
+export default function ActionList({
+  steps,
+  selectedIndex,
+  onSelect,
+  runStartMillis,
+  selectedStep,
+}: ActionListProps) {
+  const itemRefs = useRef<Map<number, HTMLLIElement>>(new Map());
+  const baseMillis =
+    runStartMillis ?? (steps[0] ? new Date(steps[0].timestamp).getTime() : 0);
+
+  useEffect(() => {
+    const node = itemRefs.current.get(selectedIndex);
+    if (node && typeof node.scrollIntoView === "function") {
+      node.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+
+  const focusIndex = (index: number) => {
+    const node = itemRefs.current.get(index);
+    if (node && typeof node.focus === "function") {
+      node.focus();
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLLIElement>, index: number) => {
+    const position = steps.findIndex((entry) => entry.index === index);
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        onSelect(index);
+        return;
+      case "ArrowDown": {
+        if (position < 0 || position >= steps.length - 1) return;
+        event.preventDefault();
+        const next = steps[position + 1].index;
+        onSelect(next);
+        focusIndex(next);
+        return;
+      }
+      case "ArrowUp": {
+        if (position <= 0) return;
+        event.preventDefault();
+        const prev = steps[position - 1].index;
+        onSelect(prev);
+        focusIndex(prev);
+        return;
+      }
+      case "Home": {
+        event.preventDefault();
+        const first = steps[0]?.index;
+        if (first !== undefined) {
+          onSelect(first);
+          focusIndex(first);
+        }
+        return;
+      }
+      case "End": {
+        event.preventDefault();
+        const last = steps[steps.length - 1]?.index;
+        if (last !== undefined) {
+          onSelect(last);
+          focusIndex(last);
+        }
+        return;
+      }
+    }
+  };
+
+  return (
+    <ol className="action-list" role="listbox" aria-label="Steps">
+      {steps.map((step) => {
+        const isActive = step.index === selectedIndex;
+        const { verb, target, targetIsTag } = formatActionRow(step);
+        const elapsedMillis = new Date(step.timestamp).getTime() - baseMillis;
+        const elapsed = formatElapsed(elapsedMillis);
+        const spokenTarget = target
+          ? targetIsTag
+            ? `<${target}/>`
+            : target
+          : "";
+        const ariaLabel = spokenTarget
+          ? `Step ${step.index} ${verb} ${spokenTarget}`
+          : `Step ${step.index} ${verb}`;
+        const showDetails = isActive && selectedStep && selectedStep.step === step.index;
+        const positionText = showDetails ? positionTextForStep(selectedStep) : null;
+        const contentText = showDetails ? contentTextForStep(selectedStep) : "";
+        return (
+          <li
+            key={step.index}
+            ref={(node) => {
+              if (node) {
+                itemRefs.current.set(step.index, node);
+              } else {
+                itemRefs.current.delete(step.index);
+              }
+            }}
+            className="action-list-item"
+            role="option"
+            tabIndex={isActive ? 0 : -1}
+            aria-selected={isActive}
+            aria-label={ariaLabel}
+            data-active={isActive ? "true" : "false"}
+            data-violations={step.has_violations ? "true" : "false"}
+            data-exceptions={step.has_exceptions ? "true" : "false"}
+            onClick={() => onSelect(step.index)}
+            onKeyDown={(event) => handleKeyDown(event, step.index)}
+            title={target || undefined}
+          >
+            <div className="action-list-row">
+              <span className="action-list-index">{step.index}.</span>
+              <span className="action-list-body">
+                <span className="action-list-verb">{verb}</span>
+                {renderTarget(target, targetIsTag)}
+              </span>
+              <span className="action-list-markers">
+                {step.has_exceptions ? (
+                  <span
+                    className="action-list-marker-exception"
+                    aria-label="exceptions"
+                    role="img"
+                  />
+                ) : null}
+                {step.has_violations ? (
+                  <span
+                    className="action-list-marker-violation"
+                    aria-label="violations"
+                    role="img"
+                  />
+                ) : null}
+              </span>
+              <span className="action-list-elapsed">{elapsed}</span>
+            </div>
+            {showDetails ? (
+              <div className="action-list-details">
+                <div className="action-list-detail-row">
+                  <span className="action-list-detail-label">Position</span>
+                  <span className="action-list-detail-value">
+                    {positionText ?? ""}
+                  </span>
+                </div>
+                <div className="action-list-detail-row">
+                  <span className="action-list-detail-label">Content</span>
+                  <span className="action-list-detail-value">
+                    {contentText ? contentText : `""`}
+                  </span>
+                </div>
+              </div>
+            ) : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

web/src/panels/ExceptionsPanel.css

@@ -0,0 +1,98 @@
+.exceptions-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.exceptions-panel-toolbar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.exceptions-panel-jump {
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.exceptions-panel-jump:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.exceptions-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.exceptions-row details {
+  border: 1px dashed var(--border-strong);
+  background: var(--surface);
+  padding: 6px 8px;
+}
+
+.exceptions-row details[open] {
+  border-color: var(--text-primary);
+}
+
+.exceptions-summary {
+  display: grid;
+  grid-template-columns: 8px auto auto minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 6px;
+  cursor: pointer;
+  list-style: none;
+  outline: none;
+}
+
+.exceptions-summary::-webkit-details-marker {
+  display: none;
+}
+
+.exceptions-marker {
+  width: 8px;
+  height: 8px;
+  border: 1px dashed var(--text-primary);
+  background: transparent;
+  align-self: center;
+}
+
+.exceptions-class {
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.exceptions-colon {
+  color: var(--text-muted);
+}
+
+.exceptions-message {
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.exceptions-time {
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+  margin-left: auto;
+}
+
+.exceptions-stack {
+  margin: 8px 0 0;
+  padding: 8px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  background: var(--background);
+  border: 1px solid var(--border);
+  max-height: 220px;
+  overflow-y: auto;
+  white-space: pre;
+}

web/src/panels/ExceptionsPanel.tsx

@@ -0,0 +1,68 @@
+import type { Exception } from "../types";
+import "./ExceptionsPanel.css";
+
+export interface ExceptionsPanelProps {
+  exceptions?: Exception[];
+  onJumpToFirstException: () => void;
+  hasFirstException: boolean;
+}
+
+function formatTimestamp(unixMillis: number): string {
+  const date = new Date(unixMillis);
+  const hh = String(date.getHours()).padStart(2, "0");
+  const mm = String(date.getMinutes()).padStart(2, "0");
+  const ss = String(date.getSeconds()).padStart(2, "0");
+  const ms = String(date.getMilliseconds()).padStart(3, "0");
+  return `${hh}:${mm}:${ss}.${ms}`;
+}
+
+export default function ExceptionsPanel({
+  exceptions,
+  onJumpToFirstException,
+  hasFirstException,
+}: ExceptionsPanelProps) {
+  return (
+    <div className="exceptions-panel">
+      <div className="exceptions-panel-toolbar">
+        <button
+          type="button"
+          className="exceptions-panel-jump"
+          onClick={onJumpToFirstException}
+          disabled={!hasFirstException}
+        >
+          jump to first exception
+        </button>
+      </div>
+      {!exceptions || exceptions.length === 0 ? (
+        <div className="status-block">no exceptions</div>
+      ) : (
+        <ol className="exceptions-list">
+          {exceptions.map((exception, index) => (
+            <li key={index} className="exceptions-row">
+              <details open={index === 0}>
+                <summary className="exceptions-summary">
+                  <span className="exceptions-marker" aria-hidden="true" />
+                  <span className="exceptions-class">{exception.class}</span>
+                  {exception.message ? (
+                    <>
+                      <span className="exceptions-colon">:</span>
+                      <span className="exceptions-message">{exception.message}</span>
+                    </>
+                  ) : null}
+                  {exception.unix_millis !== undefined ? (
+                    <span className="exceptions-time">
+                      {formatTimestamp(exception.unix_millis)}
+                    </span>
+                  ) : null}
+                </summary>
+                {exception.stack_trace ? (
+                  <pre className="exceptions-stack">{exception.stack_trace}</pre>
+                ) : null}
+              </details>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  );
+}

web/src/panels/MetricsChart.css

@@ -0,0 +1,166 @@
+.metrics-chart {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  font-family: var(--font-mono);
+  font-size: 9px;
+  color: var(--text-muted);
+}
+
+.metrics-lanes {
+  flex: 1 1 auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.metrics-lane {
+  flex: 1 1 0;
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 32px;
+  align-items: stretch;
+  min-height: 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.metrics-lane:last-of-type {
+  border-bottom: none;
+}
+
+.metrics-lane-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 8px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  border-right: 1px solid var(--border);
+}
+
+.metrics-lane-plot {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+
+.metrics-lane-canvas {
+  position: absolute;
+  inset: 4px 0;
+}
+
+.metrics-lane-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.metrics-lane-path {
+  fill: none;
+  stroke: var(--text-primary);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.metrics-lane-dot {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--text-primary);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.metrics-lane-dot[data-active="true"] {
+  width: 7px;
+  height: 7px;
+}
+
+.metrics-lane-tooltip {
+  position: absolute;
+  padding: 2px 6px;
+  border: 1px solid var(--border-strong);
+  background: var(--surface);
+  color: var(--text-primary);
+  font-variant-numeric: tabular-nums;
+  font-size: 10px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.metrics-lane-tooltip[data-placement="above"] {
+  transform: translate(-50%, calc(-100% - 6px));
+}
+
+.metrics-lane-tooltip[data-placement="below"] {
+  transform: translate(-50%, 6px);
+}
+
+.metrics-lane-highlight {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--text-primary);
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.metrics-lane-ticks {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 2px 6px;
+  border-left: 1px solid var(--border);
+  font-variant-numeric: tabular-nums;
+  font-size: 9px;
+}
+
+.metrics-hits {
+  position: absolute;
+  inset: 0 32px 0 18px;
+  display: block;
+  pointer-events: none;
+}
+
+.metrics-hit {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.metrics-hit:hover {
+  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
+}
+
+.metrics-axis {
+  flex: 0 0 auto;
+  position: relative;
+  height: 20px;
+  margin: 0 32px 0 18px;
+  border-top: 1px solid var(--border);
+}
+
+.metrics-axis-label {
+  position: absolute;
+  top: 2px;
+  transform: translateX(-50%);
+  font-variant-numeric: tabular-nums;
+  font-size: 9px;
+  white-space: nowrap;
+}

web/src/panels/MetricsChart.tsx

@@ -0,0 +1,293 @@
+import { useState } from "react";
+import type { Metrics } from "../types";
+import "./MetricsChart.css";
+
+export interface MetricsSample {
+  stepIndex: number;
+  timestamp: string;
+  metrics?: Metrics;
+}
+
+export interface MetricsChartProps {
+  samples: MetricsSample[];
+  selectedIndex: number;
+  onSelect: (stepIndex: number) => void;
+  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;
+  y: number;
+}
+
+interface LaneHover {
+  fraction: number;
+  y: number;
+  label: string;
+}
+
+interface LaneProps {
+  label: string;
+  path: string;
+  dots: LaneDot[];
+  topTickLabel: string;
+  bottomTickLabel: string;
+  selectedFraction: number | null;
+  hover: LaneHover | null;
+}
+
+function Lane({
+  label,
+  path,
+  dots,
+  topTickLabel,
+  bottomTickLabel,
+  selectedFraction,
+  hover,
+}: LaneProps) {
+  return (
+    <div className="metrics-lane">
+      <div className="metrics-lane-label">{label}</div>
+      <div className="metrics-lane-plot">
+        {selectedFraction !== null ? (
+          <div
+            className="metrics-lane-highlight"
+            style={{ left: `${selectedFraction * 100}%` }}
+          />
+        ) : null}
+        <div className="metrics-lane-canvas">
+          <svg
+            className="metrics-lane-svg"
+            viewBox="0 0 1 1"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+          >
+            {path ? <path d={path} className="metrics-lane-path" /> : null}
+          </svg>
+          {dots.map((dot) => (
+            <div
+              key={dot.key}
+              className="metrics-lane-dot"
+              style={{ left: `${dot.x * 100}%`, top: `${dot.y * 100}%` }}
+              data-active={hover !== null && Math.abs(hover.fraction - dot.x) < 1e-6 ? "true" : undefined}
+            />
+          ))}
+          {hover ? (
+            <div
+              className="metrics-lane-tooltip"
+              data-placement={hover.y < 0.35 ? "below" : "above"}
+              style={{ left: `${hover.fraction * 100}%`, top: `${hover.y * 100}%` }}
+            >
+              {hover.label}
+            </div>
+          ) : null}
+        </div>
+      </div>
+      <div className="metrics-lane-ticks">
+        <span>{topTickLabel}</span>
+        <span>{bottomTickLabel}</span>
+      </div>
+    </div>
+  );
+}
+
+function buildDots(
+  samples: MetricsSample[],
+  getValue: (sample: MetricsSample) => number | undefined,
+  ceiling: number,
+): LaneDot[] {
+  const dots: LaneDot[] = [];
+  samples.forEach((sample, index) => {
+    const value = getValue(sample);
+    if (value === undefined) return;
+    const ratio = ceiling === 0 ? 0 : Math.min(value / ceiling, 1);
+    dots.push({
+      key: sample.stepIndex,
+      x: fractionFor(index, samples.length),
+      y: 1 - ratio,
+    });
+  });
+  return dots;
+}
+
+export default function MetricsChart({
+  samples,
+  selectedIndex,
+  onSelect,
+  runStartMillis,
+}: MetricsChartProps) {
+  const [hoveredColumn, setHoveredColumn] = useState<number | null>(null);
+
+  if (samples.length === 0 || !samples.some((sample) => sample.metrics !== undefined)) {
+    return <div className="status-block">no metrics</div>;
+  }
+
+  const heapTop = samples.reduce(
+    (max, sample) => Math.max(max, sample.metrics?.heap_bytes ?? 0),
+    0,
+  );
+  const cpuObservedMax = samples.reduce(
+    (max, sample) => Math.max(max, sample.metrics?.cpu_percent ?? 0),
+    0,
+  );
+  const cpuTop = Math.max(100, cpuObservedMax);
+
+  const heapPath = buildPath(samples, (sample) => sample.metrics?.heap_bytes, heapTop);
+  const cpuPath = buildPath(samples, (sample) => sample.metrics?.cpu_percent, cpuTop);
+  const heapDots = buildDots(samples, (sample) => sample.metrics?.heap_bytes, heapTop);
+  const cpuDots = buildDots(samples, (sample) => sample.metrics?.cpu_percent, cpuTop);
+
+  const baseMillis = runStartMillis ?? new Date(samples[0].timestamp).getTime();
+
+  const axisCount = Math.min(5, samples.length);
+  const axisTicks = Array.from({ length: axisCount }, (_, i) => {
+    const idx =
+      axisCount === 1
+        ? 0
+        : Math.round((i / (axisCount - 1)) * (samples.length - 1));
+    const sample = samples[idx];
+    const sampleMillis = new Date(sample.timestamp).getTime();
+    const elapsed =
+      Number.isFinite(sampleMillis) && Number.isFinite(baseMillis)
+        ? sampleMillis - baseMillis
+        : NaN;
+    return {
+      key: sample.stepIndex,
+      fraction: fractionFor(idx, samples.length),
+      label: Number.isFinite(elapsed) ? formatTime(elapsed) : String(sample.stepIndex),
+    };
+  });
+
+  const selectedColumn = samples.findIndex((sample) => sample.stepIndex === selectedIndex);
+  const selectedFraction =
+    selectedColumn >= 0 ? fractionFor(selectedColumn, samples.length) : null;
+
+  const hoveredSample =
+    hoveredColumn !== null && hoveredColumn >= 0 && hoveredColumn < samples.length
+      ? samples[hoveredColumn]
+      : null;
+  const hoverFraction =
+    hoveredColumn !== null ? fractionFor(hoveredColumn, samples.length) : null;
+
+  const heapHover: LaneHover | null =
+    hoveredSample && hoverFraction !== null && hoveredSample.metrics?.heap_bytes !== undefined
+      ? {
+          fraction: hoverFraction,
+          y: 1 - (heapTop === 0 ? 0 : Math.min(hoveredSample.metrics.heap_bytes / heapTop, 1)),
+          label: formatHeap(hoveredSample.metrics.heap_bytes),
+        }
+      : null;
+  const cpuHover: LaneHover | null =
+    hoveredSample && hoverFraction !== null && hoveredSample.metrics?.cpu_percent !== undefined
+      ? {
+          fraction: hoverFraction,
+          y: 1 - (cpuTop === 0 ? 0 : Math.min(hoveredSample.metrics.cpu_percent / cpuTop, 1)),
+          label: `${hoveredSample.metrics.cpu_percent.toFixed(1)}%`,
+        }
+      : null;
+
+  return (
+    <div className="metrics-chart">
+      <div className="metrics-lanes">
+        <Lane
+          label="HEAP"
+          path={heapPath}
+          dots={heapDots}
+          topTickLabel={formatHeap(heapTop)}
+          bottomTickLabel="0B"
+          selectedFraction={selectedFraction}
+          hover={heapHover}
+        />
+        <Lane
+          label="CPU"
+          path={cpuPath}
+          dots={cpuDots}
+          topTickLabel={`${Math.round(cpuTop)}%`}
+          bottomTickLabel="0%"
+          selectedFraction={selectedFraction}
+          hover={cpuHover}
+        />
+        <div className="metrics-hits" role="presentation">
+          {samples.map((sample, index) => {
+            const left = (() => {
+              if (samples.length === 1) return 0;
+              const half = 0.5 / (samples.length - 1);
+              return Math.max(0, fractionFor(index, samples.length) - half);
+            })();
+            const width = samples.length === 1 ? 1 : 1 / (samples.length - 1);
+            return (
+              <button
+                key={sample.stepIndex}
+                type="button"
+                className="metrics-hit"
+                style={{ left: `${left * 100}%`, width: `${width * 100}%` }}
+                onClick={() => onSelect(sample.stepIndex)}
+                onPointerEnter={() => setHoveredColumn(index)}
+                onPointerLeave={() =>
+                  setHoveredColumn((current) => (current === index ? null : current))
+                }
+                aria-label={`select step ${sample.stepIndex}`}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <div className="metrics-axis">
+        {axisTicks.map((tick) => (
+          <span
+            key={tick.key}
+            className="metrics-axis-label"
+            style={{ left: `${tick.fraction * 100}%` }}
+          >
+            {tick.label}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

web/src/panels/Screenshot.css

@@ -0,0 +1,40 @@
+.screenshot-frame {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0 auto;
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.screenshot-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.screenshot-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.screenshot-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+  background: var(--surface);
+  border: 1px dashed var(--border-strong);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}

web/src/panels/Screenshot.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useId, useRef, useState } from "react";
+import type { Action } from "../types";
+import "./Screenshot.css";
+
+export interface ScreenshotProps {
+  src?: string;
+  action?: Action;
+  deviceWidth?: number;
+  deviceHeight?: number;
+}
+
+const DEFAULT_WIDTH = 1080;
+const DEFAULT_HEIGHT = 1920;
+
+export default function Screenshot({ src, action, deviceWidth, deviceHeight }: ScreenshotProps) {
+  const [naturalSize, setNaturalSize] = useState<{ width: number; height: number } | null>(null);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const previousSrc = useRef<string | undefined>(src);
+  const reactId = useId();
+  const maskId = `screenshot-spotlight-${reactId.replace(/:/g, "")}`;
+
+  useEffect(() => {
+    if (previousSrc.current !== src) {
+      previousSrc.current = src;
+      setLoadFailed(false);
+      setNaturalSize(null);
+    }
+  }, [src]);
+
+  if (!src || loadFailed) {
+    return (
+      <div className="screenshot-placeholder" data-testid="screenshot-placeholder">
+        no screenshot
+      </div>
+    );
+  }
+
+  const width = deviceWidth ?? naturalSize?.width ?? DEFAULT_WIDTH;
+  const height = deviceHeight ?? naturalSize?.height ?? DEFAULT_HEIGHT;
+  const stroke = Math.max(2, width / 200);
+  const tapRadius = Math.max(12, width / 60);
+  const arrowHeadSize = Math.max(18, width / 40);
+  const spotlightRadius = tapRadius * 3;
+
+  const bounds = action?.resolved_bounds;
+  const tap = action?.tap_point;
+  const isSwipe =
+    action?.kind === "Swipe" &&
+    action.from_x !== undefined &&
+    action.from_y !== undefined &&
+    action.to_x !== undefined &&
+    action.to_y !== undefined;
+
+  return (
+    <div
+      className="screenshot-frame"
+      style={{ aspectRatio: `${width} / ${height}` }}
+    >
+      <img
+        className="screenshot-image"
+        src={src}
+        alt="device screenshot"
+        onLoad={(event) => {
+          const img = event.currentTarget;
+          if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+            setNaturalSize({ width: img.naturalWidth, height: img.naturalHeight });
+          }
+        }}
+        onError={() => setLoadFailed(true)}
+      />
+      <svg
+        className="screenshot-overlay"
+        viewBox={`0 0 ${width} ${height}`}
+        preserveAspectRatio="xMidYMid meet"
+        aria-hidden="true"
+      >
+        {tap && (
+          <>
+            <defs>
+              <radialGradient
+                id={`${maskId}-gradient`}
+                cx={tap.x}
+                cy={tap.y}
+                r={spotlightRadius}
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0%" stopColor="black" />
+                <stop offset="55%" stopColor="black" />
+                <stop offset="100%" stopColor="white" />
+              </radialGradient>
+              <mask id={maskId} maskUnits="userSpaceOnUse" x="0" y="0" width={width} height={height}>
+                <rect x="0" y="0" width={width} height={height} fill={`url(#${maskId}-gradient)`} />
+              </mask>
+            </defs>
+            <rect
+              data-testid="screenshot-spotlight"
+              x="0"
+              y="0"
+              width={width}
+              height={height}
+              fill="black"
+              opacity="0.5"
+              mask={`url(#${maskId})`}
+            />
+          </>
+        )}
+        {bounds && (
+          <rect
+            x={bounds.x}
+            y={bounds.y}
+            width={bounds.width}
+            height={bounds.height}
+            fill="none"
+            stroke="var(--accent-violation)"
+            strokeWidth={stroke}
+          />
+        )}
+        {isSwipe && (
+          <SwipeArrow
+            fromX={action!.from_x!}
+            fromY={action!.from_y!}
+            toX={action!.to_x!}
+            toY={action!.to_y!}
+            stroke={stroke}
+            headSize={arrowHeadSize}
+          />
+        )}
+      </svg>
+    </div>
+  );
+}
+
+interface SwipeArrowProps {
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+  stroke: number;
+  headSize: number;
+}
+
+function SwipeArrow({ fromX, fromY, toX, toY, stroke, headSize }: SwipeArrowProps) {
+  const angle = (Math.atan2(toY - fromY, toX - fromX) * 180) / Math.PI;
+  const half = headSize / 2;
+  const points = `${toX},${toY} ${toX - headSize},${toY - half} ${toX - headSize},${toY + half}`;
+  return (
+    <g>
+      <line
+        x1={fromX}
+        y1={fromY}
+        x2={toX}
+        y2={toY}
+        stroke="var(--text-muted)"
+        strokeWidth={stroke}
+        strokeLinecap="round"
+      />
+      <polygon
+        points={points}
+        fill="var(--text-muted)"
+        transform={`rotate(${angle} ${toX} ${toY})`}
+      />
+    </g>
+  );
+}

web/src/panels/SnapshotTable.css

@@ -0,0 +1,44 @@
+.snapshot-table {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.snapshot-row {
+  display: grid;
+  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
+  gap: 12px;
+  align-items: baseline;
+  padding: 4px 8px;
+  border-left: 2px solid transparent;
+}
+
+.snapshot-row[data-changed="true"] {
+  border-left-color: var(--border-strong);
+}
+
+.snapshot-path {
+  margin: 0;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.snapshot-value {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.snapshot-row[data-long-value="true"] .snapshot-value {
+  white-space: pre-wrap;
+  max-height: 6em;
+  overflow-y: auto;
+  text-align: left;
+}

web/src/panels/SnapshotTable.tsx

@@ -0,0 +1,164 @@
+import "./SnapshotTable.css";
+
+export interface SnapshotTableProps {
+  snapshots?: Record<string, unknown>;
+  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";
+  }
+  if (value === undefined) {
+    return "undefined";
+  }
+  if (typeof value === "string") {
+    return JSON.stringify(value);
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  return stableStringify(value);
+}
+
+export default function SnapshotTable({ snapshots, previousSnapshots }: SnapshotTableProps) {
+  if (!snapshots || Object.keys(snapshots).length === 0) {
+    return <div className="status-block">no snapshots</div>;
+  }
+
+  const rows = flatten(snapshots);
+  const hasPrevious = previousSnapshots !== undefined;
+  const previousRows = hasPrevious ? flatten(previousSnapshots) : [];
+  const previousByPath = new Map(previousRows.map((row) => [row.path, row.value]));
+
+  return (
+    <dl className="snapshot-table">
+      {rows.map((row) => {
+        const formatted = formatValue(row.value);
+        let changed = false;
+        let previousFormatted: string | undefined;
+        if (hasPrevious) {
+          const prevValue = previousByPath.has(row.path)
+            ? previousByPath.get(row.path)
+            : getAtPath(previousSnapshots, row.path);
+          if (stableStringify(prevValue) !== stableStringify(row.value)) {
+            changed = true;
+            previousFormatted = formatValue(prevValue);
+          }
+        }
+        const rowProps: Record<string, string> = {};
+        if (changed) {
+          rowProps["data-changed"] = "true";
+          rowProps.title = `was: ${previousFormatted}`;
+        }
+        return (
+          <div key={row.path} className="snapshot-row" {...rowProps}>
+            <dt className="snapshot-path" title={row.path}>
+              {row.path}
+            </dt>
+            <dd className="snapshot-value" title={formatted}>
+              {formatted}
+            </dd>
+          </div>
+        );
+      })}
+    </dl>
+  );
+}

web/src/panels/Timeline.css

@@ -0,0 +1,40 @@
+.timeline {
+  display: block;
+  width: 100%;
+  height: auto;
+  font-family: var(--font-mono);
+}
+
+.timeline-label {
+  font-size: 11px;
+  fill: var(--text-muted);
+}
+
+.timeline-cell {
+  cursor: pointer;
+  outline: none;
+}
+
+.timeline-cell:hover {
+  stroke: var(--text-primary);
+  stroke-width: 1;
+}
+
+.timeline-cell:focus-visible {
+  stroke: var(--text-primary);
+  stroke-width: 1;
+}
+
+.timeline-action {
+  cursor: pointer;
+  outline: none;
+}
+
+.timeline-action:hover,
+.timeline-action:focus-visible {
+  fill: var(--text-primary);
+}
+
+.timeline-highlight {
+  pointer-events: none;
+}

web/src/panels/Timeline.tsx

@@ -0,0 +1,142 @@
+import type { KeyboardEvent } from "react";
+import type { StepSummary } from "../types";
+import "./Timeline.css";
+
+export type LaneStatus = "violated" | "pending" | "holds";
+
+export interface PropertyLane {
+  name: string;
+  statuses: LaneStatus[];
+}
+
+export interface TimelineProps {
+  steps: StepSummary[];
+  lanes: PropertyLane[];
+  selectedIndex: number;
+  onSelect: (index: number) => void;
+}
+
+const LANE_HEIGHT = 22;
+const LABEL_WIDTH = 140;
+const CELL_GAP = 2;
+const CHART_WIDTH = 1000;
+
+const STATUS_FILL: Record<LaneStatus, string> = {
+  violated: "var(--accent-violation)",
+  pending: "color-mix(in srgb, var(--text-primary) 30%, transparent)",
+  holds: "color-mix(in srgb, var(--text-primary) 10%, transparent)",
+};
+
+export default function Timeline({ steps, lanes, selectedIndex, onSelect }: TimelineProps) {
+  if (steps.length === 0 || lanes.length === 0) {
+    return <div className="status-block">no timeline data</div>;
+  }
+
+  const cellAreaWidth = CHART_WIDTH - LABEL_WIDTH;
+  const cellWidth = cellAreaWidth / steps.length;
+  const totalRows = lanes.length + 1;
+  const height = totalRows * LANE_HEIGHT;
+
+  const handleKeyDown = (event: KeyboardEvent<SVGRectElement>, stepIndex: number) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect(stepIndex);
+    }
+  };
+
+  const selectedColumn = steps.findIndex((step) => step.index === selectedIndex);
+  const highlightX =
+    selectedColumn >= 0 ? LABEL_WIDTH + selectedColumn * cellWidth + cellWidth / 2 : null;
+
+  return (
+    <svg
+      className="timeline"
+      viewBox={`0 0 ${CHART_WIDTH} ${height}`}
+      preserveAspectRatio="none"
+      role="img"
+      aria-label="property timeline"
+    >
+      {lanes.map((lane, laneIndex) => {
+        const rowY = laneIndex * LANE_HEIGHT;
+        return (
+          <g key={lane.name} className="timeline-lane" data-lane={lane.name}>
+            <text
+              className="timeline-label"
+              x={LABEL_WIDTH - 8}
+              y={rowY + LANE_HEIGHT / 2}
+              dominantBaseline="middle"
+              textAnchor="end"
+            >
+              {lane.name}
+            </text>
+            {steps.map((step, stepCol) => {
+              const status = lane.statuses[stepCol] ?? "pending";
+              const x = LABEL_WIDTH + stepCol * cellWidth + CELL_GAP / 2;
+              const w = Math.max(cellWidth - CELL_GAP, 1);
+              const y = rowY + 3;
+              const h = LANE_HEIGHT - 6;
+              return (
+                <rect
+                  key={step.index}
+                  className="timeline-cell"
+                  data-status={status}
+                  data-step={step.index}
+                  x={x}
+                  y={y}
+                  width={w}
+                  height={h}
+                  fill={STATUS_FILL[status]}
+                  tabIndex={0}
+                  onClick={() => onSelect(step.index)}
+                  onKeyDown={(event) => handleKeyDown(event, step.index)}
+                >
+                  <title>{`step ${step.index}: ${status}`}</title>
+                </rect>
+              );
+            })}
+          </g>
+        );
+      })}
+      <g className="timeline-actions" data-row="actions">
+        {steps.map((step, stepCol) => {
+          const cx = LABEL_WIDTH + stepCol * cellWidth + cellWidth / 2;
+          const cy = lanes.length * LANE_HEIGHT + LANE_HEIGHT / 2;
+          return (
+            <circle
+              key={step.index}
+              className="timeline-action"
+              data-step={step.index}
+              cx={cx}
+              cy={cy}
+              r={3}
+              fill="var(--text-muted)"
+              tabIndex={0}
+              onClick={() => onSelect(step.index)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  onSelect(step.index);
+                }
+              }}
+            >
+              <title>{`step ${step.index}`}</title>
+            </circle>
+          );
+        })}
+      </g>
+      {highlightX !== null ? (
+        <line
+          className="timeline-highlight"
+          data-selected="true"
+          x1={highlightX}
+          x2={highlightX}
+          y1={0}
+          y2={height}
+          stroke="var(--text-primary)"
+          strokeWidth={2}
+          pointerEvents="none"
+        />
+      ) : null}
+    </svg>
+  );
+}

web/src/panels/ViolationsPanel.css

@@ -0,0 +1,117 @@
+.violations-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+}
+
+.violations-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.violations-panel-title {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.violations-panel-jump {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: lowercase;
+  padding: 4px 8px;
+  background: var(--surface);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.violations-panel-jump:hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+
+.violations-panel-jump:disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.violations-panel-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.violations-panel-row {
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 8px;
+  background: var(--surface-elevated);
+}
+
+.violations-panel-row[data-status="violated"] {
+  border-color: var(--accent-violation);
+}
+
+.violations-panel-row-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.violations-panel-badge {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 6px;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-muted);
+}
+
+.violations-panel-badge[data-status="violated"] {
+  color: var(--accent-violation);
+  border-color: var(--accent-violation);
+  background: transparent;
+}
+
+.violations-panel-badge[data-status="holds"] {
+  color: var(--text-muted);
+  opacity: 0.7;
+}
+
+.violations-panel-name {
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.violations-panel-residual {
+  margin-top: 6px;
+  font-size: 12px;
+}
+
+.violations-panel-residual summary {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 0;
+  user-select: none;
+}
+
+.violations-panel-residual[open] summary {
+  margin-bottom: 6px;
+}

web/src/panels/ViolationsPanel.tsx

@@ -0,0 +1,111 @@
+import { useMemo } from "react";
+import type { ResidualNode } from "../types";
+import ResidualNodeView from "../components/ResidualNode";
+import "./ViolationsPanel.css";
+
+export interface ViolationsPanelProps {
+  propertyNames: string[];
+  violations: string[];
+  residuals?: Record<string, ResidualNode>;
+  onJumpToFirstViolation: () => void;
+  hasFirstViolation: boolean;
+  /** When true, only render violated rows and hide the header button row. */
+  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";
+}
+
+export default function ViolationsPanel({
+  propertyNames,
+  violations,
+  residuals,
+  onJumpToFirstViolation,
+  hasFirstViolation,
+  violationsOnly = false,
+}: ViolationsPanelProps) {
+  const violationSet = useMemo(() => new Set(violations), [violations]);
+
+  const rows = useMemo(() => {
+    const sorted = [...propertyNames].sort((a, b) => a.localeCompare(b));
+    const all = sorted.map((name) => ({
+      name,
+      status: statusFor(name, violationSet, residuals),
+    }));
+    const filtered = violationsOnly ? all.filter((row) => row.status === "violated") : all;
+    return filtered.sort((a, b) => {
+      const groupDelta = STATUS_ORDER[a.status] - STATUS_ORDER[b.status];
+      if (groupDelta !== 0) {
+        return groupDelta;
+      }
+      return a.name.localeCompare(b.name);
+    });
+  }, [propertyNames, violationSet, residuals, violationsOnly]);
+
+  if (violationsOnly && rows.length === 0) {
+    return <div className="status-block">no violations</div>;
+  }
+
+  return (
+    <section className="violations-panel">
+      {violationsOnly ? null : (
+        <header className="violations-panel-header">
+          <h2 className="violations-panel-title">properties</h2>
+          <button
+            type="button"
+            className="violations-panel-jump"
+            onClick={onJumpToFirstViolation}
+            disabled={!hasFirstViolation}
+          >
+            jump to first violation
+          </button>
+        </header>
+      )}
+      <ul className="violations-panel-list">
+        {rows.map(({ name, status }) => {
+          const residual = residuals?.[name];
+          return (
+            <li key={name} className="violations-panel-row" data-status={status}>
+              <div className="violations-panel-row-head">
+                <span
+                  className="violations-panel-badge"
+                  data-status={status}
+                  aria-label={`status ${status}`}
+                >
+                  {status}
+                </span>
+                <span className="violations-panel-name">{name}</span>
+              </div>
+              {residual ? (
+                <details className="violations-panel-residual">
+                  <summary>residual</summary>
+                  <ResidualNodeView node={residual} />
+                </details>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

web/src/routes/RunDetail.tsx

@@ -0,0 +1,389 @@
+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 ActionList from "../panels/ActionList";
+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 Tabs, { type TabDefinition } from "../components/Tabs";
+import { useStep } from "../hooks/useStep";
+import { useKeyboardNav } from "../hooks/useKeyboardNav";
+import { useTheme } from "../hooks/useTheme";
+
+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);
+  const [history, setHistory] = useState<RunHistory | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { theme, toggle } = useTheme();
+
+  const stepCount = run?.steps.length;
+  const { runId, stepIndex, goTo } = useStep(stepCount);
+
+  useEffect(() => {
+    if (!runId) return;
+    let cancelled = false;
+    setRun(null);
+    setHistory(null);
+    setError(null);
+    getRun(runId)
+      .then(async (loaded) => {
+        if (cancelled) return;
+        setRun(loaded);
+        const computed = await loadHistory(loaded);
+        if (!cancelled) {
+          setHistory(computed);
+        }
+      })
+      .catch((failure: unknown) => {
+        if (!cancelled) {
+          setError(failure instanceof Error ? failure.message : String(failure));
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [runId]);
+
+  const currentStep = history?.steps[stepIndex - 1] ?? null;
+  const previousStep = stepIndex > 1 ? history?.steps[stepIndex - 2] ?? null : null;
+  const nextStep = history && stepIndex < history.steps.length ? history.steps[stepIndex] ?? null : null;
+
+  const jumpToFirstViolation = useCallback(() => {
+    if (history?.firstViolationStep) {
+      goTo(history.firstViolationStep);
+    }
+  }, [history, goTo]);
+
+  const jumpToFirstException = useCallback(() => {
+    if (history?.firstExceptionStep) {
+      goTo(history.firstExceptionStep);
+    }
+  }, [history, goTo]);
+
+  const jumpToNextViolation = useCallback(() => {
+    if (!run) return;
+    const next = run.steps.find((entry) => entry.index > stepIndex && entry.has_violations);
+    if (next) goTo(next.index);
+  }, [run, stepIndex, goTo]);
+
+  useKeyboardNav({
+    onPrev: () => goTo(stepIndex - 1),
+    onNext: () => goTo(stepIndex + 1),
+    onJumpStart: () => goTo(1),
+    onJumpEnd: () => stepCount && goTo(stepCount),
+    onJumpPrev10: () => goTo(stepIndex - 10),
+    onJumpNext10: () => goTo(stepIndex + 10),
+    onJumpNextViolation: jumpToNextViolation,
+  });
+
+  const beforeScreenshot = useMemo(() => {
+    if (!runId || !currentStep) return undefined;
+    return screenshotUrl(runId, `step-${String(currentStep.step).padStart(5, "0")}.png`);
+  }, [runId, currentStep]);
+
+  const afterScreenshot = useMemo(() => {
+    if (!runId || !currentStep) return undefined;
+    return screenshotUrl(runId, `step-${String(currentStep.step).padStart(5, "0")}-after.png`);
+  }, [runId, currentStep]);
+
+  const runStartMillis = useMemo(() => {
+    if (!run?.steps.length) return 0;
+    return new Date(run.steps[0].timestamp).getTime();
+  }, [run]);
+
+  if (error) {
+    return <div className="status-block status-error">failed: {error}</div>;
+  }
+  if (!run) {
+    return <div className="status-block">loading run...</div>;
+  }
+
+  const violationsBefore = currentStep?.violations ?? [];
+  const violationsAfter = nextStep?.violations ?? violationsBefore;
+  const residualsBefore = currentStep?.residuals;
+  const residualsAfter = nextStep?.residuals ?? residualsBefore;
+  const exceptionsForStep = currentStep?.exceptions;
+
+  const beforeTabs: TabDefinition[] = [
+    {
+      id: "screenshot",
+      label: "Screenshot",
+      content: <Screenshot src={beforeScreenshot} action={currentStep?.action} />,
+    },
+    {
+      id: "snapshots",
+      label: "Snapshots",
+      content: (
+        <SnapshotTable
+          snapshots={currentStep?.snapshots}
+          previousSnapshots={previousStep?.snapshots ?? undefined}
+        />
+      ),
+    },
+    {
+      id: "properties",
+      label: "Properties",
+      content: (
+        <ViolationsPanel
+          propertyNames={history?.names ?? []}
+          violations={violationsBefore}
+          residuals={residualsBefore}
+          onJumpToFirstViolation={jumpToFirstViolation}
+          hasFirstViolation={history?.firstViolationStep !== undefined}
+        />
+      ),
+    },
+    {
+      id: "violations",
+      label: "Violations",
+      badge:
+        violationsBefore.length > 0 ? (
+          <span className="tabs-badge" data-kind="violation">
+            {violationsBefore.length}
+          </span>
+        ) : undefined,
+      content: (
+        <ViolationsPanel
+          propertyNames={history?.names ?? []}
+          violations={violationsBefore}
+          residuals={residualsBefore}
+          onJumpToFirstViolation={jumpToFirstViolation}
+          hasFirstViolation={history?.firstViolationStep !== undefined}
+          violationsOnly
+        />
+      ),
+    },
+  ];
+
+  const afterTabs: TabDefinition[] = [
+    {
+      id: "screenshot",
+      label: "Screenshot",
+      content: <Screenshot src={afterScreenshot} action={undefined} />,
+    },
+    {
+      id: "snapshots",
+      label: "Snapshots",
+      content: (
+        <SnapshotTable
+          snapshots={nextStep?.snapshots ?? currentStep?.snapshots}
+          previousSnapshots={currentStep?.snapshots ?? undefined}
+        />
+      ),
+    },
+    {
+      id: "properties",
+      label: "Properties",
+      content: (
+        <ViolationsPanel
+          propertyNames={history?.names ?? []}
+          violations={violationsAfter}
+          residuals={residualsAfter}
+          onJumpToFirstViolation={jumpToFirstViolation}
+          hasFirstViolation={history?.firstViolationStep !== undefined}
+        />
+      ),
+    },
+    {
+      id: "violations",
+      label: "Violations",
+      badge:
+        violationsAfter.length > 0 ? (
+          <span className="tabs-badge" data-kind="violation">
+            {violationsAfter.length}
+          </span>
+        ) : undefined,
+      content: (
+        <ViolationsPanel
+          propertyNames={history?.names ?? []}
+          violations={violationsAfter}
+          residuals={residualsAfter}
+          onJumpToFirstViolation={jumpToFirstViolation}
+          hasFirstViolation={history?.firstViolationStep !== undefined}
+          violationsOnly
+        />
+      ),
+    },
+  ];
+
+  return (
+    <div className="detail-root">
+      <div className="detail-toolbar">
+        <div className="detail-toolbar-meta">
+          <Link to="/">runs</Link>
+          <span>{run.id}</span>
+          <span>
+            <strong>{run.spec_path}</strong> seed={run.seed}
+          </span>
+          <span>
+            step {stepIndex} / {stepCount ?? 0}
+          </span>
+        </div>
+        <button
+          type="button"
+          className="theme-toggle"
+          onClick={toggle}
+          aria-label={theme === "dark" ? "switch to light theme" : "switch to dark theme"}
+          title={theme === "dark" ? "switch to light theme" : "switch to dark theme"}
+        >
+          {theme === "dark" ? (
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+              <circle cx="8" cy="8" r="3" fill="none" stroke="currentColor" strokeWidth="1.25" />
+              <g stroke="currentColor" strokeWidth="1.25" strokeLinecap="round">
+                <line x1="8" y1="1.5" x2="8" y2="3.5" />
+                <line x1="8" y1="12.5" x2="8" y2="14.5" />
+                <line x1="1.5" y1="8" x2="3.5" y2="8" />
+                <line x1="12.5" y1="8" x2="14.5" y2="8" />
+                <line x1="3.4" y1="3.4" x2="4.8" y2="4.8" />
+                <line x1="11.2" y1="11.2" x2="12.6" y2="12.6" />
+                <line x1="3.4" y1="12.6" x2="4.8" y2="11.2" />
+                <line x1="11.2" y1="4.8" x2="12.6" y2="3.4" />
+              </g>
+            </svg>
+          ) : (
+            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+              <path
+                d="M13.2 9.8A5.2 5.2 0 0 1 6.2 2.8a5.2 5.2 0 1 0 7 7Z"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.25"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        </button>
+      </div>
+      <div className="detail-grid">
+        <aside className="detail-actions detail-panel">
+          <h2>actions</h2>
+          <div className="detail-panel-body">
+            <ActionList
+              steps={run.steps}
+              selectedIndex={stepIndex}
+              onSelect={goTo}
+              runStartMillis={runStartMillis}
+              selectedStep={currentStep ?? undefined}
+            />
+          </div>
+        </aside>
+
+        <section className="detail-state-before detail-panel">
+          <h2>state before</h2>
+          <div className="detail-panel-body">
+            <Tabs tabs={beforeTabs} defaultTabId="screenshot" ariaLabel="state before" />
+          </div>
+        </section>
+
+        <section className="detail-state-after detail-panel">
+          <h2>state after</h2>
+          <div className="detail-panel-body">
+            <Tabs tabs={afterTabs} defaultTabId="screenshot" ariaLabel="state after" />
+          </div>
+        </section>
+
+        <section className="detail-metrics detail-panel">
+          <div className="detail-panel-body">
+            <MetricsChart
+              samples={history?.metricsSamples ?? []}
+              selectedIndex={stepIndex}
+              onSelect={goTo}
+              runStartMillis={runStartMillis}
+            />
+            {(exceptionsForStep && exceptionsForStep.length > 0) ||
+            history?.firstExceptionStep !== undefined ? (
+              <div className="detail-metrics-exceptions">
+                <ExceptionsPanel
+                  exceptions={exceptionsForStep}
+                  onJumpToFirstException={jumpToFirstException}
+                  hasFirstException={history?.firstExceptionStep !== undefined}
+                />
+              </div>
+            ) : null}
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+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);
+  });
+}

web/src/routes/RunList.tsx

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { listRuns } from "../api";
+import type { RunSummary } from "../types";
+import { useSse } from "../hooks/useSse";
+
+function formatDuration(milliseconds?: number): string {
+  if (!milliseconds) {
+    return "-";
+  }
+  if (milliseconds < 1000) {
+    return `${milliseconds}ms`;
+  }
+  const seconds = milliseconds / 1000;
+  if (seconds < 60) {
+    return `${seconds.toFixed(1)}s`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.round(seconds - minutes * 60);
+  return `${minutes}m${remainingSeconds}s`;
+}
+
+function formatStartedAt(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  return date.toLocaleString();
+}
+
+export default function RunList() {
+  const [runs, setRuns] = useState<RunSummary[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(() => {
+    listRuns()
+      .then(setRuns)
+      .catch((failure: unknown) => {
+        setError(failure instanceof Error ? failure.message : String(failure));
+      });
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  useSse("runs.changed", refresh);
+
+  if (error) {
+    return <div className="status-block status-error">failed to load runs: {error}</div>;
+  }
+  if (!runs) {
+    return <div className="status-block">loading runs...</div>;
+  }
+  if (runs.length === 0) {
+    return <div className="status-block">no runs yet. run `uatu pbt` to produce some.</div>;
+  }
+
+  return (
+    <table className="run-table">
+      <thead>
+        <tr>
+          <th>started</th>
+          <th>spec</th>
+          <th>seed</th>
+          <th>platform</th>
+          <th>duration</th>
+          <th>steps</th>
+          <th>violations</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {runs.map((run) => (
+          <tr key={run.id}>
+            <td>
+              <Link to={`/runs/${run.id}`}>{formatStartedAt(run.started_at)}</Link>
+            </td>
+            <td>{run.spec_path}</td>
+            <td>{run.seed}</td>
+            <td>{run.platform}</td>
+            <td>{formatDuration(run.duration_millis)}</td>
+            <td>{run.step_count}</td>
+            <td>
+              {run.violation_count > 0 ? (
+                <span className="chip chip-violation">{run.violation_count}</span>
+              ) : (
+                "0"
+              )}
+            </td>
+            <td>{run.in_progress ? <span className="chip chip-progress">in progress</span> : null}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

web/src/styles/app.css

@@ -0,0 +1,272 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  overflow: hidden;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  padding: 4px 10px;
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: var(--border-strong);
+}
+
+.app-shell {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.app-main {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-main > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.run-table {
+  width: 100%;
+  border-collapse: collapse;
+  align-self: flex-start;
+  flex: 0 0 auto;
+}
+
+.run-table th,
+.run-table td {
+  text-align: left;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.run-table th {
+  color: var(--text-muted);
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.run-table tr:hover td {
+  background: var(--surface);
+}
+
+.chip {
+  display: inline-block;
+  padding: 2px 8px;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  font-size: 11px;
+}
+
+.chip-violation {
+  border-color: var(--accent-violation);
+  color: var(--accent-violation);
+}
+
+.chip-progress {
+  border-color: var(--border-strong);
+  color: var(--text-muted);
+}
+
+.detail-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.detail-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+
+.detail-toolbar-meta {
+  display: flex;
+  gap: 16px;
+  align-items: baseline;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.detail-toolbar-meta strong {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 24px;
+  padding: 0;
+  color: var(--text-muted);
+}
+
+.theme-toggle:hover {
+  color: var(--text-primary);
+}
+
+.theme-toggle svg {
+  display: block;
+}
+
+.detail-grid {
+  flex: 1 1 auto;
+  display: grid;
+  grid-template-columns: 340px minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) minmax(0, 130px);
+  grid-template-areas:
+    "actions before after"
+    "metrics metrics metrics";
+  gap: 0;
+  padding: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.detail-grid > .detail-actions {
+  grid-area: actions;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.detail-grid > .detail-state-before,
+.detail-grid > .detail-state-after {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.detail-grid > .detail-state-before {
+  grid-area: before;
+}
+
+.detail-grid > .detail-state-after {
+  grid-area: after;
+}
+
+.detail-grid > .detail-actions,
+.detail-grid > .detail-state-before {
+  border-right: 1px solid var(--border);
+}
+
+.detail-grid > .detail-state-before .screenshot-frame,
+.detail-grid > .detail-state-after .screenshot-frame,
+.detail-grid > .detail-state-before .screenshot-placeholder,
+.detail-grid > .detail-state-after .screenshot-placeholder {
+  flex: 1 1 auto;
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  min-height: 0;
+}
+
+.detail-grid > .detail-metrics {
+  grid-area: metrics;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-top: 1px solid var(--border);
+}
+
+.detail-grid > .detail-metrics .metrics-chart {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 100%;
+}
+
+.detail-metrics .detail-panel-body {
+  overflow: hidden;
+}
+
+.detail-metrics-exceptions {
+  padding: 4px 8px;
+  border-top: 1px solid var(--border);
+  overflow: auto;
+  max-height: 80px;
+}
+
+.detail-panel {
+  border: none;
+  background: transparent;
+  padding: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-panel h2 {
+  margin: 0;
+  padding: 4px 8px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+
+.detail-panel-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-actions .detail-panel-body {
+  padding: 0;
+}
+
+.status-block {
+  padding: 12px;
+  color: var(--text-muted);
+}
+
+.status-error {
+  color: var(--accent-violation);
+}

web/src/styles/tokens.css

@@ -0,0 +1,46 @@
+:root {
+  --background: #ffffff;
+  --surface: #f7f7f7;
+  --surface-elevated: #ffffff;
+  --border: #e4e4e4;
+  --border-strong: #c8c8c8;
+  --text-primary: #111111;
+  --text-muted: #6b6b6b;
+  --accent-violation: #d32f2f;
+  --accent-positive: #2e7d32;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+:root[data-theme="dark"],
+:root[data-theme="dark"] body {
+  --background: #0e0e0e;
+  --surface: #161616;
+  --surface-elevated: #1d1d1d;
+  --border: #2a2a2a;
+  --border-strong: #3a3a3a;
+  --text-primary: #f0f0f0;
+  --text-muted: #9a9a9a;
+  --accent-violation: #f06b6b;
+  --accent-positive: #7cc47c;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --background: #0e0e0e;
+    --surface: #161616;
+    --surface-elevated: #1d1d1d;
+    --border: #2a2a2a;
+    --border-strong: #3a3a3a;
+    --text-primary: #f0f0f0;
+    --text-muted: #9a9a9a;
+    --accent-violation: #f06b6b;
+    --accent-positive: #7cc47c;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--text-primary);
+  margin: 0;
+  font-family: var(--font-mono);
+}

web/src/styles/typography.css

@@ -0,0 +1,32 @@
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
+}
+
+body {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  background: var(--background);
+  margin: 0;
+}

web/src/types.ts

@@ -0,0 +1,127 @@
+export interface Meta {
+  seed: number;
+  spec_path: string;
+  bundle_sha256: string;
+  platform: string;
+  bundle_id: string;
+  started_at: string;
+  ended_at?: string;
+  uatu_version: string;
+}
+
+export interface RunSummary {
+  id: string;
+  started_at: string;
+  ended_at?: string;
+  spec_path: string;
+  seed: number;
+  platform: string;
+  bundle_id: string;
+  duration_millis: number;
+  step_count: number;
+  violation_count: number;
+  in_progress: boolean;
+}
+
+export interface StepSummary {
+  index: number;
+  timestamp: string;
+  screen?: string;
+  action_kind?: string;
+  action_label?: string;
+  has_violations: boolean;
+  has_exceptions: boolean;
+}
+
+export interface Run extends RunSummary {
+  meta: Meta;
+  steps: StepSummary[];
+}
+
+export interface BoundsRect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+export interface HierarchyElement {
+  resourceId?: string;
+  text?: string;
+  description?: string;
+  class?: string;
+  package?: string;
+  clickable?: boolean;
+  enabled?: boolean;
+  checked?: boolean;
+  focused?: boolean;
+  selected?: boolean;
+  bounds: BoundsRect;
+}
+
+export interface Hierarchy {
+  elements: HierarchyElement[];
+}
+
+export interface BoundsRecord {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface PointRecord {
+  x: number;
+  y: number;
+}
+
+export interface Action {
+  kind: string;
+  x?: number;
+  y?: number;
+  from_x?: number;
+  from_y?: number;
+  to_x?: number;
+  to_y?: number;
+  key?: string;
+  text?: string;
+  duration_millis?: number;
+  selector?: string;
+  resolved_bounds?: BoundsRecord;
+  tap_point?: PointRecord;
+}
+
+export interface Exception {
+  class: string;
+  message?: string;
+  stack_trace?: string;
+  unix_millis?: number;
+}
+
+export type ResidualNode =
+  | { op: "true" }
+  | { op: "false" }
+  | { op: "always" | "now" | "next" | "not"; arg: ResidualNode }
+  | { op: "eventually"; arg: ResidualNode; within?: { amount: number; unit: string } }
+  | { op: "and" | "or" | "implies"; left: ResidualNode; right: ResidualNode }
+  | { op: "predicate"; name?: string }
+  | { op: "error"; message: string };
+
+export interface Metrics {
+  cpu_percent?: number;
+  heap_bytes?: number;
+  total_memory_bytes?: number;
+}
+
+export interface Step {
+  step: number;
+  timestamp: string;
+  screen?: string;
+  snapshots?: Record<string, unknown>;
+  action?: Action;
+  exceptions?: Exception[];
+  violations?: string[];
+  hierarchy?: Hierarchy;
+  residuals?: Record<string, ResidualNode>;
+  metrics?: Metrics;
+}

web/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

web/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:8765",
+        changeOrigin: false,
+      },
+    },
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+});