A beautiful web viewer for AI agent session files
Inspect, analyze, and debug your Claude Code & OpenClaw conversation sessions with ease.
Drop a .jsonl session file and explore β zero setup required.
Try it live β no install needed Β· Run locally Β· δΈζ
Working with AI coding agents like Claude Code produces rich conversation logs, but reviewing them in the terminal is painful. Agent ChatLens gives you a beautiful chat-style interface to browse, search, and analyze your sessions β with zero setup.
Just drag & drop a .jsonl file and start exploring.
- π¬ Turn-based layout β Messages grouped into user/assistant turns, just like a chat app
- π§ Thinking blocks β Collapsible reasoning/thinking display with signature info
- π Code copy β One-click copy buttons on code blocks
- β±οΈ Timestamps & durations β Tool execution time badges, total turn duration
- π οΈ Tool-specific rendering β Smart display for Bash, Edit, Write, Read, Grep, Glob, and more
- π Inline diff view β Visualize code changes in Edit tool calls
- π Timeline view β Gantt chart showing tool call execution timeline with duration bars
- π½ Collapse/expand tools β Toggle all tool calls collapsed, with per-item override
- β‘ Virtual scrolling β Handles large sessions (4000+ messages) without lag
- π Session statistics β Turns, tool calls, total tokens, session duration at a glance
- π Dark / light theme toggle
- π Drag & drop JSONL files for instant viewing
- π Auto-detects OpenClaw and Claude Code formats
- π» Pure frontend β No backend, no install, no signup. Just open and use.
Go to kangjinghang.github.io/agent-chatlens and drop a .jsonl file. That's it.
git clone https://github.com/kangjinghang/agent-chatlens.git
cd agent-chatlens
bun install
bun run devThen open http://localhost:3000 and drop a .jsonl file.
Files from ~/.openclaw/agents/*/sessions/*.jsonl
{"type":"session","version":3,"id":"abc-123",...}
{"type":"message","id":"m1","message":{"role":"user","content":[{"type":"text","text":"Hello"}]}}
{"type":"message","id":"m2","message":{"role":"assistant","content":[{"type":"thinking","thinking":"..."},{"type":"text","text":"Hi!"},{"type":"toolCall","id":"c1","name":"read","arguments":{...}}]}}
{"type":"message","id":"m3","message":{"role":"toolResult","toolCallId":"c1","toolName":"read","content":[...]}}Files from ~/.claude/projects/*/*.jsonl
{"type":"user","uuid":"u1","message":{"role":"user","content":"Hello"}}
{"type":"assistant","uuid":"a1","message":{"role":"assistant","content":[{"type":"text","text":"Hi!"}]}}
{"type":"assistant","uuid":"a2","message":{"role":"assistant","content":[{"type":"tool_use","id":"t1","name":"Bash","input":{"command":"ls"}}]}}
{"type":"user","uuid":"u2","message":{"role":"user","content":[{"type":"tool_result","tool_use_id":"t1","content":"file.txt"}]}}| Technology | Purpose |
|---|---|
| React 18 + TypeScript | UI framework |
| Vite | Fast builds & dev server |
| Tailwind CSS | Styling |
| @tanstack/react-virtual | Virtual scrolling for large sessions |
| react-markdown + remark-gfm | Markdown rendering |
| react-syntax-highlighter | Code highlighting |
| lucide-react | Icons |
bun run build # Production build
bun run preview # Preview production buildbun test # Run tests once
bun run test:watch # Watch modeContributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
MIT Β© kangjinghang
AI agent, session viewer, JSONL viewer, OpenClaw, Claude Code, agent debugging, conversation analysis, tool call visualization, virtual scrolling, React, TypeScript