Agent Wrapped

See how you really code with AI.

Upload your coding agent traces and get a cinematic, shareable breakdown of your prompts, patterns, personality — and a roast.

100% client-side. Your data never leaves your browser.

Get Started · Features · How It Works · Contributing

---

Community Maintainer: sanjitverma@tesslate.com

Privacy First All processing happens in your browser. No accounts. No tracking. No data retention. Your traces are analyzed locally and never sent to any server.

---

Features

Cinematic Wrapped Story

A scroll-triggered, animated experience with confetti, score reveals, and shareable summary cards.

Data-Dense Dashboard

Bento-grid analytics dashboard with 12+ tiles covering every aspect of your AI coding workflow.

10 Analyzer Modules

Analyzer	What It Computes
Raw Stats	Sessions, messages, tokens, tool calls, coding time patterns, active days
Vibe Scores	10 heuristic 0-100 scores: Chaos Energy, Debuginator, Ship It Factor, and more
Prompt Personality	Word frequency, prompt length style, question/command ratios
AI Treatment	Politeness tier (32 phrases), patience, gratitude (42 phrases), frustration (ratio-based: profanity via better-profane-words, caps, demanding phrases, terse corrections), assassination list risk
Session Details	Per-session aggregates, timeline, full message trace viewer
Code Impact	Languages detected, files touched, task type breakdown, error rate
Cost Estimate	Token cost with model-specific pricing for 20+ Claude model variants
Productivity	Cost/session, success rate, prompt-to-fix ratio, tool efficiency
Engagement	Session streaks, peak day, self-sufficiency trend, multi-tasking score
Achievements	Hours saved, usage percentile, 10 unlockable badges

Session Trace Viewer

Click any session to open a full trace log with:

• Color-coded messages (user, assistant, tool, error)
• Tool call/result inspection
• Filtering by role, errors, or search text
• Pagination for large sessions

Achievement Badges

Unlock 10 badges based on your usage: 1K Club, Night Owl, Polyglot, Streak Master, Marathon Runner, Tool Wielder, Bug Squasher, Speed Demon, and more.

Shareable Summary Card

Download your wrapped as a PNG image. Share on X, LinkedIn, Reddit, or copy to clipboard.

---

How It Works

Upload → Parse → Analyze → Dashboard + Wrapped Story

1. Upload your .claude/ folder or individual .jsonl trace files
2. Parse — the Claude Code JSONL parser normalizes raw traces into a common schema
3. Analyze — 10 analyzer modules compute 100+ metrics from your trace data
4. View — land on the bento-grid dashboard, or play the cinematic wrapped story

Everything runs in your browser. No server round-trips.

---

Quick Start

# Clone the repo
git clone https://github.com/TesslateAI/agent-wrapped.git
cd agent-wrapped

# Install dependencies
npm install

# Start dev server
npm run dev

Open http://localhost:3000 and upload your traces.

Finding Your Trace Files

Claude Code stores traces in a hidden ~/.claude/ directory:

macOS: Run open ~/.claude/projects in Terminal

Windows: Press Win + R, type %USERPROFILE%\.claude

Linux: Run xdg-open ~/.claude or press Ctrl + H in your file manager

Drag the projects folder (or any .jsonl files) into the upload dropzone.

---

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
Styling	Tailwind CSS v4
Animations	Framer Motion
UI Components	shadcn/ui + Magic UI
Fonts	DM Sans + IBM Plex Mono (Google Fonts CDN)
Image Export	html-to-image
Testing	Jest + ts-jest
State	React Context

No Backend Required

• No API routes for trace processing
• No database
• No authentication
• No external services
• No environment variables needed to run

---

Project Structure

src/
  app/
    page.tsx                    # Landing page
    upload/page.tsx             # Upload + file processing
    wrapped/
      page.tsx                  # Dashboard (bento grid + sessions)
      story/page.tsx            # Animated wrapped story
      summary/page.tsx          # Shareable summary card
  lib/
    types/                      # TypeScript interfaces
    parsers/                    # Trace file parsers
    analyzers/                  # 11 analysis modules
    store/                      # React Context state
    export/                     # Image capture + share
  components/
    dashboard/                  # 15 bento grid tiles
    wrapped/                    # Story scroll components
    upload/                     # File dropzone
    ui/                         # shadcn + Magic UI
docs/
  scoring-methodology.md        # How every metric is calculated
  changelog.md                  # All notable changes
  project_status.md             # Current phase + roadmap

---

Supported Agents

Agent	Status
Claude Code	Supported
Cursor	Coming soon
Aider	Coming soon
Continue	Coming soon
Codex	Coming soon
OpenClaw	Coming soon

---

Scripts

npm run dev          # Start dev server at localhost:3000
npm run build        # Production build
npm run lint         # Run ESLint
npm run test         # Run 187 tests
npm run test:watch   # Run tests in watch mode

---

Contributing

We welcome contributions! Here's how:

1. Fork the repo
2. Create a branch: git checkout -b feat/your-feature
3. Make changes and add tests
4. Run checks: npm run build && npm run test && npm run lint
5. Commit: git commit -m "feat: add your feature"
6. Push and open a Pull Request

Branch Naming

• feat/ — new features
• fix/ — bug fixes
• chore/ — maintenance
• docs/ — documentation
• refactor/ — code restructuring

Good First Issues

Look for issues labeled good first issue.

---

Documentation

Document	Description
docs/scoring-methodology.md	How every metric is calculated — formulas, thresholds, keyword lists
docs/changelog.md	All notable changes (Keep a Changelog format)
docs/project_status.md	Current phase, roadmap, decisions log
project_spec.md	Full feature spec and phased roadmap
CLAUDE.md	AI-assisted development guidance

---

Roadmap

Shipped:

• Claude Code trace parser
• 10 analyzer modules (raw stats, vibe scores, personality, treatment, sessions, code impact, cost, productivity, engagement, achievements)
• Bento-grid dashboard with 12+ tiles
• Animated wrapped story (9 sections)
• Session trace viewer with filtering and pagination
• Achievement badges system
• Summary card export (PNG)
• Share to X, LinkedIn, Reddit

Coming Soon:

• Cursor, Aider, Continue trace parsers
• Multi-tool comparison view
• Optional LLM-powered insights (user-provided API key)
• Community gallery of shared wraps
• Historical comparison (wrap vs. wrap over time)
• Browser extension to auto-export traces

---

FAQ

Is my data sent to a server?

No. All processing happens in your browser using JavaScript. Your trace files are never uploaded, transmitted, or stored anywhere. When you close the tab, the data is gone.

Do I need an API key?

No. Agent Wrapped works fully offline with no API keys. Future phases may add optional LLM-powered insights using a user-provided key.

Which agents are supported?

Currently Claude Code (.jsonl traces from ~/.claude/). Support for Cursor, Aider, Continue, and Codex is planned.

How are the vibe scores calculated?

Each of the 10 vibe scores uses keyword-based heuristics on your prompt text. See docs/scoring-methodology.md for the exact formulas and thresholds.

How accurate is the cost estimate?

Cost is estimated using hardcoded public API pricing for 20+ Claude model variants. Pricing data is sourced from Anthropic's official pricing page as of March 18, 2026. If your traces use an unknown model, a conservative fallback rate is applied and marked as "(approximate)". If rates have changed since March 2026, please open a GitHub issue.

Can I use this commercially?

Yes. Apache 2.0 license allows commercial use, modification, and distribution.

---

License

Agent Wrapped is licensed under the Apache License 2.0. See LICENSE.

What this means:

• Commercial use allowed
• Modification and distribution allowed
• Patent grant included
• Provided "as is"

---

Built by Tesslate

If you find this useful, give it a star!

Star this repo · Fork it · Share it