Turning Claude Code Sessions into HTML Replays

Claude Code sessions are great for development, but hard to share. Screen recordings are bulky, static, and you can't search or skip ahead. Copy-pasting raw transcripts is noisy — tool calls, thinking blocks, and responses all run together. The most interesting part of a session isn't just the final output — it's the reasoning : which tools the agent called, in what order, and why. I've been writing a series of posts about giving AI agents direct access to hardware through MCP, and every article includes demos of the agent interacting with real devices. I wanted to show the full sessions — not just cherry-picked screenshots — but there wasn't a good way to do that. The logs are already there Claude Code stores complete session transcripts as JSONL files in ~/.claude/projects/ . These logs already contain everything needed to reconstruct a session: User prompts Assistant responses (with markdown formatting) Tool calls and their results Thinking blocks Timestamps for every interaction Th