Showcase: opencode-interceptor-viewer — local web UI for browsing captured LLM traffic

[ColaHikari]

Hi, thanks for building opencode-interceptor! It makes debugging LLM agent traffic really straightforward.

I built a companion tool that reads the session dumps from /tmp/opencode-interceptor/ and turns them into an interactive web UI, so you don't have to dig through raw JSON files.

What it does

• Timeline view — all calls in a session ordered by index, with status codes, duration, model, and error badges
• Cross-call message diffing — consecutive requests are compared; repeated messages auto-fold into groups, modified messages show a line-level diff, new messages are highlighted
• Markdown + syntax highlighting — assistant responses and messages rendered with GFM (tables, task lists, code highlighting via highlight.js)
• Collapsible content — long system prompts and tool results fold by default; outline panel for quick heading navigation in long responses
• Tool call display — parsed function name + arguments in human-readable format, grouped with matching tool results
• Search & filters — full-text search across messages, model, URL, response body; filter by status code, provider, model
• Dark / light mode — persistent theme toggle
• JSON viewer — collapsible tree for raw request/response inspection

How it works

The viewer reads the same ses_* directories that opencode-interceptor writes under /tmp/opencode-interceptor/. Each call's three files (*.meta.json, *.request.json, *.response.json) are merged into a single normalized call record via Next.js API routes.

No uploads, no external services — everything runs locally.

Quick try

# npx one-command launch (port 3000, auto-fallback if taken)
npx opencode-viewer

# custom port
npx opencode-viewer --port 8080

Open http://localhost:3000 and you'll see your latest session dumps.

Links

• GitHub: https://github.com/ColaHikari/opencode-interceptor-viewer
• npm: https://www.npmjs.com/package/opencode-viewer

Feedback and contributions welcome!