I made my Claude Code sessions watchable in 30 seconds

My Claude Code and Codex sessions often run 30 to 60 minutes, and there's no good way to show someone what actually happened in one. Screen recordings are mostly waiting. Screenshots lose the back and forth, which is the interesting part.

So I built vibereel.

What it does

Run this inside a project where you've used Claude Code or Codex:

npx github:TanbirRamim/vibereel

It finds your latest session, reads the log the agent already saved, and writes one HTML file that plays the session back as a short film. Here's a 47 minute (made-up demo) session adding dark mode to a todo app, shown in 30 seconds:

You see the prompt being typed, the plan, a file tree lighting up as files get read and edited, diffs sliding in, the terminal running tests, and a counter for time, tokens and rough cost. If a test run fails and a later one passes, you get a red to green badge.

Want a video for X, Slack or a PR?

npx github:TanbirRamim/vibereel --gif --mp4

Picking the moments

The hard part wasn't the animation, it was deciding what to keep. A real session has a lot of ls, rereads and tiny messages. vibereel scores events and keeps the ones that tell the story: the first prompt, the biggest edits, failing runs that get fixed, and the final message. Then it fits them to the length you ask for (30s by default).

Privacy

Session logs can contain secrets, so this got the most care. Everything runs locally and nothing is uploaded. By default it masks API keys, JWTs, bearer tokens, passwords in URLs, emails and every value in .env files, and swaps your home folder for ~. It's pattern matching though, so watch the reel once before posting it.

What's missing

No Cursor, Aider or Gemini CLI yet. The timeline format is shared, so each one is mostly a parser, and there are open issues for them if you want to help. Cost is an estimate from list prices. Subagent work is skipped for now. Video export takes about a minute because it renders frames in headless Chrome.

It's MIT and on GitHub: https://github.com/TanbirRamim/vibereel

If you make a reel of one of your sessions, I'd love to see it.

---

I built vibereel with a lot of help from Claude Code, and Claude helped draft this post.

Comments

[baumgaerben]

Đúng vấn đề thực tế này. Session 30-60 phút thì xem lại hoặc chia sẻ cho team review cực kỳ mệt — phải scroll qua hàng trăm dòng terminal, đoán context, lọc noise.

Một vài góc nhìn từ kinh nghiệm:

1. Timestamp + context tags quan trọng hơn full recording. Nên đánh dấu: "tại 12:34 — debug memory leak", "22:10 — refactor auth flow". Viewer nhảy tới chỗ cần xem ngay.

2. Diff-based replay hiệu quả hơn video thuần. Chỉ capture diff file + command chạy, không record toàn bộ terminal output. Kết hợp với git blame thì trace được lý do từng thay đổi.

3. Session summary auto-gen (commit message, todo list, test result) giúp viewer nắm gist trong 30s trước khi quyết định xem deep-dive.

4. Privacy filter bắt buộc — env vars, secrets, local paths phải auto-mask trước khi share.

Tooling hiện tại (asciinema, termtosvg, ttyrec) đều thiếu layer "semantic indexing" này. Nếu bạn giải quyết được phần indexing + searchable timeline thì giá trị thực sự nằm ở đó, không phải ở việc record per se.

Curious: approach của bạn handle như thế nào phần "tìm nhanh đoạn quan trọng" trong session dài? PS: the tool I meant is on labagent .tech