Capture list
The captures view shows one row per HTTP flow, streamed live from the engine via gRPC.
Columns
| Column | Source field | Notes |
|---|---|---|
| (kind badge) | Flow.kind | h1, h2, ws, grpc, or … while pending |
| Method | Flow.method | GET, POST, etc. |
| Host | Flow.host | Includes :port if non-default |
| Path | Flow.path | Includes query string |
| Status | Flow.status_code | Color-coded: 2xx green, 3xx blue, 4xx amber, 5xx red |
| Size | Flow.response_size | Bytes / KB / MB |
| Time | Flow.timing.response_done_nanos | µs / ms / s |
The list virtualizes via @tanstack/react-virtual — 10k rows scroll at
60fps.
Kind badges
- h1 — HTTP/1.1 over TLS or cleartext.
- h2 — HTTP/2 over TLS (ALPN-negotiated).
- ws — WebSocket (h1 Upgrade handshake + bidirectional frames).
- grpc — gRPC over h2 (content-type starts with
application/grpc). - … — flow started but kind not yet determined (rare).
Filtering
The filter box above the list does case-insensitive substring matching against:
- Host
- Path
- Method
Rich filter UI (status class, method checkboxes, host sidebar) ships in P02.5.
Detail pane
Clicking a row opens a 3-tab detail (4-tab for gRPC):
- Overview — method, full URL, status, kind, sizes, duration, error if any.
- Request — headers + decompressed body.
- Response — headers + decompressed body.
- gRPC (when applicable) — envelopes + heuristic protobuf field tree.
Bodies up to 64KiB ship inline. Larger bodies require an explicit
GetBody IPC call — currently not wired into the UI; you’ll see a
“large body, X bytes” placeholder. P02.5 wires the fetch.
Live updates
The renderer batches capture events at 30fps. Under sustained load you’ll see groups of rows flick in together rather than one-by-one — that’s the batching working as designed.
Body decoding
Content-Encoding: gzip→ engine decompresses before storage.Content-Encoding: br/zstd→ passes through unchanged (decoding in P02.5).- gRPC
grpc-encoding: gzip→ renderer decompresses viaDecompressionStreamper message.
Clear
The Clear button drops the local renderer state. The engine’s ring buffer keeps the events; restarting the subscription replays them.