Dashboard Guide Navigating the real-time traffic inspector
The dashboard at http://localhost:9081 is where you view and interact with captured traffic. It updates in real time via WebSocket — no polling, no refresh needed.
Layout Overview
┌──────────────────────────────────────────────────────────────┐
│ Topbar │
│ ProxyServer [Intercept: OFF] [Rules] [Save] [Load] [HAR] [Clear] │
├──────────────────────────────────────────────────────────────┤
│ Filter Bar │
│ [All Methods ▼] [All Status ▼] [Filter URL... ] [All Types ▼] │
├──────────────────────────┬───────────────────────────────────┤
│ Traffic List (40%) │ Detail Panel (60%) │
│ │ │
│ # Method Status Host... │ [Request] [Response] │
│ ─────────────────────── │ ┌─────────────────────────────┐ │
│ 1 GET 200 api.ex.. │ │ General │ │
│ 2 POST 201 api.ex.. │ │ Method: GET │ │
│ 3 GET 304 cdn.ex.. │ │ URL: https://... │ │
│ 4 PUT 200 api.ex.. │ ├─────────────────────────────┤ │
│ 5 GET 404 api.ex.. │ │ Headers ▼ │ │
│ │ │ content-type: app/json │ │
│ │ ├─────────────────────────────┤ │
│ │ │ Body │ │
│ │ │ { "user": "admin", ... } │ │
│ │ └─────────────────────────────┘ │
├──────────────────────────┴───────────────────────────────────┤
│ Status Bar │
│ Connected 47 requests Intercept queue: 0 │
└──────────────────────────────────────────────────────────────┘
┌─────────────────┐
│ AI Chat (overlay)│
│ │
└─────────────────┘
Topbar Controls
| Button | Action |
|---|---|
| Intercept: OFF/ON | Toggle request/response interception globally. When ON and a rule matches, requests pause for your review. |
| Rules | Open the rules modal to manage intercept rules (add, enable/disable, delete). |
| Save | Save all current traffic to a JSON file in sessions/. |
| Load | Load a previously saved session, replacing current traffic. |
| Export HAR | Download traffic as a HAR 1.2 file, importable by Chrome DevTools and other tools. |
| Clear | Delete all captured traffic (irreversible). |
Traffic List
The left panel shows a scrolling list of all captured requests. Each row displays:
| Column | Description |
|---|---|
| # | Sequence number — monotonically increasing, never reused |
| Method | HTTP method (GET, POST, PUT, DELETE, etc.) |
| Status | Response status code, color-coded: 2xx 3xx 4xx 5xx |
| Host | Target hostname |
| Path | URL path + query string |
| Type | Short content-type: JSON, HTML, JS, CSS, IMG, XML |
| Size | Response body size (B, K, M) |
| Time | Total request duration in milliseconds |
An h2 badge appears next to the status code when the upstream server responded via HTTP/2.
Row States
- Normal — Default appearance
- Selected — Highlighted with accent color, detail panel shows its data
- Intercepted — Yellow-tinted background, waiting for your Forward/Drop decision
- Error — Red text, upstream connection failed
Filtering
The filter bar lets you narrow down the traffic list. Filters combine with AND logic:
| Filter | Type | Description |
|---|---|---|
| Method | Dropdown | Show only a specific HTTP method |
| Status | Dropdown | Filter by status code range (2xx, 3xx, 4xx, 5xx) |
| URL | Text input | Substring search on the full URL (case-insensitive) |
| Content-Type | Dropdown | Filter by response content type |
Tip: Press
f to focus the URL filter input. Filtering happens in real time with a 150ms debounce.
Detail Panel
Click any row to see its full details in the right panel. The panel has two tabs:
Request Tab
- General — Method, full URL, HTTP version, client address, target server
- Headers — All request headers (collapsible). Click "copy" to copy a header value.
- Body — Request body, rendered based on content type
Response Tab
- General — Status code + message, protocol version, content type, duration, TTFB
- Headers — All response headers (collapsible)
- Body — Response body, rendered based on content type
Body Rendering
| Content-Type | Rendering |
|---|---|
application/json | Pretty-printed with syntax highlighting and collapsible tree nodes |
text/html | Syntax highlighted (tags, attributes, strings) |
application/javascript | Syntax highlighted (keywords, strings, comments, numbers) |
text/css | Syntax highlighted (properties, colors, comments) |
image/* | Inline image preview |
| Other text types | Plain preformatted text |
| Binary / unknown | Hex dump with ASCII sidebar (16 bytes per row, max 2KB shown) |
Compressed bodies are auto-decompressed. Gzip, deflate, and brotli responses are decompressed before display, so you always see the readable content.
Keyboard Shortcuts
| Key | Action |
|---|---|
j | Select next request in the list |
k | Select previous request in the list |
f | Focus the URL filter input |
i | Toggle intercept on/off |
Esc | Close any open modal |
Sessions & Export
Saving Sessions
Click Save to write all current traffic to a JSON file in the sessions/ directory. The filename includes a timestamp: session-2026-03-31T14-30-00.json.
Loading Sessions
Click Load to see a list of saved sessions. Pick one to replace the current traffic list with the saved data. This clears existing traffic.
HAR Export
Click Export HAR to download a HAR 1.2 file. This format is understood by Chrome DevTools (Network tab > Import), Google HAR Analyzer, and many other tools.
Status Bar
| Indicator | Meaning |
|---|---|
| Connected / Disconnected | WebSocket connection to server. Auto-reconnects every 2 seconds. |
| N requests | Total number of traffic entries in the store |
| Intercept queue: N | Number of requests currently held, waiting for Forward/Drop |