replay ui fix (#56)

* refactor: rename inspect to replay across the codebase

Renames inspect-ui/ to replay-ui/, internal/inspect/ to internal/replay/,
the CLI subcommand from `sanderling inspect` to `sanderling replay`, and
updates all references in docs, Makefile, README, and Go comments.

* feat(replay-ui): show spec filename with full path on hover

RunList and RunDetail now render the basename of spec_path (e.g.
login.spec.ts) with the full path available as a title tooltip.
This commit is contained in:
pj authored and GitHub committed 2026-06-03 16:17:26 +05:30
1 parent a6f43e15b2
commit b44077afde
71 files changed
+104 -92

No files matched your search

File renamed without changes.
+1 -1
View File
@@ -36,7 +36,7 @@
<li><a href="__ROOT__manual/writing-specs/">Writing specs</a></li>
<li><a href="__ROOT__manual/spec-language/">Spec language reference</a></li>
<li><a href="__ROOT__manual/runs/">Runs</a></li>
<li><a href="__ROOT__manual/inspect/">Inspect</a></li>
<li><a href="__ROOT__manual/replay/">Replay</a></li>
<li><a href="__ROOT__manual/cli/">CLI reference</a></li>
</ul>
<h3>Development</h3>
+3 -3
View File
@@ -18,7 +18,7 @@ flowchart TB
DC["Device / Emulator"]
CH["Chrome (CDP)"]
RD[("runs/")]
IN["sanderling inspect\nHTTP + SSE"]
IN["sanderling replay\nHTTP + SSE"]
UI["Web UI (React)"]
D -->|gRPC| SC
@@ -45,9 +45,9 @@ flowchart TB
On native, the transport split exists because only real UI events need to cross process and OS-API boundaries. Introspection is cheap, frequent, and lives on a fast local socket directly to the app. On web, CDP handles both.
## Inspect UI
## Replay UI
`sanderling inspect` is a separate mode of the same Go binary. It serves an embedded React bundle and reads `runs/` from disk, streaming file-watcher events over SSE so the UI updates as new steps land. It has no connection to any driver; it only consumes the trace artifacts.
`sanderling replay` is a separate mode of the same Go binary. It serves an embedded React bundle and reads `runs/` from disk, streaming file-watcher events over SSE so the UI updates as new steps land. It has no connection to any driver; it only consumes the trace artifacts.
## Per-step cycle
+5 -5
View File
@@ -10,9 +10,9 @@ Architectural and organizational decisions worth recording. Each entry states th
## Directory and Package Organization
### `web/` renamed to `inspect-ui/`
### `web/` renamed to `replay-ui/`
The directory containing the React/TypeScript frontend is `inspect-ui/`, not `web/`. The name `web/` was ambiguous (the project also has a web/Chrome driver target). `inspect-ui/` makes the purpose explicit: this is the UI for the `sanderling inspect` command.
The directory containing the React/TypeScript frontend is `replay-ui/`, not `web/`. The name `web/` was ambiguous (the project also has a web/Chrome driver target). `replay-ui/` makes the purpose explicit: this is the UI for the `sanderling replay` command.
### Keep `internal/`
@@ -22,9 +22,9 @@ Go's `internal/` directory restriction prevents any code outside this module fro
The `driver.go` file defines the `DeviceDriver` interface. Concrete implementations live in subdirectories: `sidecar/` (gRPC to the native sidecar), `chrome/` (CDP), `mock/` (tests). This pattern keeps the runner and verifier decoupled from any specific platform.
### `internal/verifier/marshal.go` moves to `internal/inspect/`
### `internal/verifier/marshal.go` moves to `internal/replay/`
`marshal.go` serializes LTL formulas to JSON for the inspect UI. That is an inspect concern, not a verifier concern. Verifier should not know inspect exists.
`marshal.go` serializes LTL formulas to JSON for the replay UI. That is a replay concern, not a verifier concern. Verifier should not know replay exists.
### `internal/verifier/bindings.go` splits into `types.go` + `bindings.go`
@@ -44,7 +44,7 @@ Android device enumeration, AVD selection, and emulator boot logic moves to `int
Driver setup, agent connection, verifier init, trace setup, and runner orchestration extract to `internal/testrun/`. `cmd/sanderling/` wires CLI flags to `testrun` calls and nothing more.
### `internal/inspect/runs.go` splits into multiple files
### `internal/replay/runs.go` splits into multiple files
429 LOC with mixed concerns (cache, file I/O, JSON decoding, summary types) splits into at least `runs_cache.go` and `runs_decode.go` within the same package.
+1 -1
View File
@@ -12,7 +12,7 @@ Alpha: Scope of v0.1.0 is tracked in [issue #4](https://github.com/priyanshujain
- [Getting started](./manual/getting-started/)
- [Writing specs](./manual/writing-specs/)
- [Runs](./manual/runs/)
- [Inspect](./manual/inspect/)
- [Replay](./manual/replay/)
- [CLI reference](./manual/cli/)
---
+2 -2
View File
@@ -25,7 +25,7 @@ Run a spec against an app for a fixed duration.
| `--output` | `./runs` | Output directory for traces. |
| `--clear-data` | `false` | Clear app data before launching so the run starts from a fresh install. |
## `sanderling inspect [run-or-runs-dir]`
## `sanderling replay [run-or-runs-dir]`
Serve a local web UI for browsing traces. The positional argument is optional and may point at either a runs directory (the parent of many runs) or a single run directory (auto-detected by the presence of `meta.json`). Defaults to `./runs`.
@@ -35,7 +35,7 @@ Serve a local web UI for browsing traces. The positional argument is optional an
| `--no-open` | `false` | Skip opening the default browser on startup. |
| `--dev` | `false` | Reverse-proxy non-API requests to the Vite dev server on `127.0.0.1:5173`. |
See [the inspect UI page](./inspect/) for the panel reference and keyboard shortcuts.
See [the replay UI page](./replay/) for the panel reference and keyboard shortcuts.
## `sanderling doctor`
+1 -1
View File
@@ -92,6 +92,6 @@ runs/2026-04-18T12-34-56/
└── meta.json
```
Browse it with `sanderling inspect` (see [inspect](./inspect/)), or read `trace.jsonl` step by step.
Browse it with `sanderling replay` (see [replay](./replay/)), or read `trace.jsonl` step by step.
Next: [writing specs](./writing-specs/).
@@ -1,18 +1,18 @@
---
title: sanderling inspect
title: sanderling replay
---
# sanderling inspect
# sanderling replay
Local web UI for exploring runs produced by `sanderling test`. Reads `runs/<id>/meta.json` and `runs/<id>/trace.jsonl` from disk.
```
sanderling inspect [run-or-runs-dir] [--port N] [--no-open] [--dev]
sanderling replay [run-or-runs-dir] [--port N] [--no-open] [--dev]
```
The positional argument can be a runs directory or a single run directory (auto-detected by `meta.json`). Defaults to `./runs`.
![sanderling inspect](../../_assets/inspect-ui.png)
![sanderling replay](../../_assets/replay-ui.png)
## Panels
@@ -44,15 +44,15 @@ Arrow keys inside a tablist or listbox yield to those widgets. Use `j`/`k` when
`/runs/:id/steps/:n` links to a specific step. Use it in issues or PRs when pointing at a violation.
The run index auto-refreshes over SSE as new runs land, so `sanderling inspect` and `sanderling test` can run side by side.
The run index auto-refreshes over SSE as new runs land, so `sanderling replay` and `sanderling test` can run side by side.
## Development
Two-process loop while iterating on the UI:
```
make web-dev # bun + vite on http://127.0.0.1:5173
make inspect-dev # sanderling inspect --dev, proxies non-API to 5173
make web-dev # bun + vite on http://127.0.0.1:5173
make replay-dev # sanderling replay --dev, proxies non-API to 5173
```
Single binary with the bundle embedded: