DEV Community

Yurukusa
Yurukusa

Posted on

I Built Spotify Wrapped for Claude Code. Here's What 3,400 Sessions Look Like.

I've been running Claude Code autonomously for 50 days. 3,400+ sessions. 109 hours.

I wanted to see those numbers in a way that felt something. Not a terminal dump. Not a JSON blob. Something I'd actually want to share.

So I built CC Wrapped - Spotify Wrapped, but for your AI usage.

How It Works

Open CC Wrapped in your browser and either:

  • Browser mode (no install): Click "Browse My Claude Folder" ? select your ~/.claude directory ? done. Stats computed locally in the browser, zero npm required.
  • CLI mode: Run npx cc-session-stats --json, copy the output, paste it in.

You get 7 animated slides that reveal your AI usage story:

  1. The big number - total hours, sessions, days
  2. Your rhythm - hours by day of week, animated bars
  3. Your AI personality - 1 of 8 types based on your usage pattern
  4. Where you spent time - top projects ranked
  5. Your records - streak, longest session, weekly intensity
  6. Fun facts - movie equivalents, coffee counts
  7. Your card - shareable PNG, Twitter share, clipboard copy

The 8 Personality Types

This was the fun part to design. Based on your actual usage patterns:

Type What triggers it
?? Night Owl Peak activity on Fri/Sat
?? Early Bird Peak on Mon/Tue
?? Weekend Warrior >45% hours on weekends
?? Marathon Runner Longest session >4h
? Daily Grinder High streak, short sessions
?? Hyperfocused Top project >80% of time
?? Polymath 4+ significant projects
?? All In >80h total or >3h/day average

My type: ?? All In. 109 hours across 50 days. The algorithm says "This isn't a tool - it's a way of life." It's not wrong.

My Actual Numbers

Here's what CC Wrapped showed me:

  • 109 hours with AI
  • 3,446 sessions (73 per active day on average)
  • 35-day streak without a day off
  • 8.5h longest session (cc-loop project, autonomous overnight run)
  • Friday is my busiest day (20.5h)
  • That's 54 movies worth of AI time
  • Or 145 cups of coffee at one every 45 minutes

The day-of-week chart was revealing. I had no idea Friday and Sunday were nearly equal. The AI works weekends. I don't always.

Why This Exists

I built cc-session-stats to answer "how much am I using this?" - but the terminal output felt clinical. Numbers in a grid.

CC Wrapped makes the same data fun. You see it, you want to share it, and suddenly other Claude Code users want to check theirs too.

That's the whole point. Every share drives awareness of the cc-toolkit:

Tool What it does
cc-health-check 20-check setup diagnostic
cc-session-stats Usage analytics from session data
cc-audit-log Human-readable audit trail
cc-cost-check Cost per commit calculator
cc-wrapped Your AI year in review
claude-code-hooks 10 hooks + 5 templates for autonomous operation

Technical Notes

  • Single HTML file, zero dependencies
  • Browser-native stats: uses the File System Access API (webkitdirectory) to read your JSONL session files directly - same algorithm as the CLI, all in JavaScript
  • All processing happens in your browser - no data sent anywhere
  • Canvas API for PNG card generation
  • CSS transitions for the slide animations
  • Personality detection uses day-of-week distribution, session length patterns, and project concentration

Try It

  1. Open CC Wrapped
  2. Click "Browse My Claude Folder" ? select ~/.claude (no npm needed)
  3. Or paste npx cc-session-stats --json output if you prefer CLI
  4. Share your type

What personality did you get?


Free Tools for Claude Code Operators

Tool What it does
cc-health-check 20-check setup diagnostic (CLI + web)
cc-session-stats Usage analytics from session data
cc-audit-log Human-readable audit trail
cc-cost-check Cost per commit calculator
cc-wrapped Your AI year in review

Interactive: Claude Code Bingo - 50 "it happened to me" moments. How many have you checked?


More tools: Dev Toolkit - 56 free browser-based tools for developers. JSON, regex, colors, CSS, SQL, and more. All single HTML files, no signup.

Top comments (0)