CodeWrapped

Spotify Wrapped for developers — inside your editor.

CodeWrapped turns your local coding activity into a beautiful developer analytics experience with coding time, streaks, XP, achievements, language breakdowns, productivity heatmaps, and an animated yearly Wrapped dashboard.

Built for VS Code, Windsurf, Cursor, Antigravity, and VS Code-compatible editors.

Why CodeWrapped?

Most productivity tools feel like spreadsheets. CodeWrapped feels like a premium developer product.

It gives you a polished, visual recap of how you code:

• Your top languages
• Your most productive hours
• Your coding streaks
• Your focus sessions
• Your XP and level progression
• Your yearly Code Wrapped
• Funny generated insights about your habits

All data stays local. No account. No cloud sync. No surveillance.

Features

Developer analytics

• Total coding time: Track your overall time spent in the editor.
• Active coding time: Pause active time when you go idle.
• Language stats: See which languages dominate your workflow.
• Files edited: Track file-level edit activity.
• Lines added and deleted: Understand your code churn.
• Coding streaks: Build momentum with current and longest streaks.
• Productive hours: Discover when you enter flow state.
• Projects worked on: See how many workspaces you touched.
• Typing speed estimate: Estimate coding keystrokes per minute.
• Session durations: Track normal and focus-mode sessions.

Wrapped mode

CodeWrapped includes a dedicated yearly recap inspired by Spotify Wrapped:

• Top language
• Coding personality type
• Total hours coded
• Peak coding time
• Coding timeline
• Achievements unlocked
• Generated funny insights
• Yearly coding evolution

Example insights:

• You spent 42% of your time debugging.
• JavaScript was your toxic relationship this month.
• Most productive at 1:00 AM.
• You wrote enough code to scroll for 3 km.

Gamification

• XP system
• Levels
• Achievement badges
• Streak counters
• Milestone notifications
• Focus session mode

Premium dashboard

The dashboard uses a modern webview UI with:

• Dark futuristic design
• Gradient glass cards
• Animated Wrapped hero section
• Interactive charts
• Language breakdowns
• Productivity graphs
• GitHub-style contribution heatmap
• Achievement badge gallery

Commands

Open the command palette and run:

• CodeWrapped: Open Dashboard
• CodeWrapped: Show Yearly Wrapped
• CodeWrapped: Start Focus Session
• CodeWrapped: End Focus Session
• CodeWrapped: Show Daily Recap
• CodeWrapped: Export Local Analytics Data
• CodeWrapped: Import Local Analytics Data
• CodeWrapped: Load Demo Data

Privacy

CodeWrapped is local-first by default.

• No account required
• No cloud sync by default
• No telemetry server
• No external analytics upload
• Export/import your own data anytime

Analytics are stored locally through VS Code extension storage.

Installation

Install CodeWrapped directly from the Visual Studio Code Marketplace:

ext install BenedictX2005.codewrapped

Or install it from the editor:

1. Open Extensions.
2. Search for CodeWrapped.
3. Click Install.
4. Open the CodeWrapped activity bar icon or run CodeWrapped: Open Dashboard.

Marketplace page:

https://marketplace.visualstudio.com/items?itemName=BenedictX2005.codewrapped

Getting Started

After installing from the Marketplace:

1. Open a project in VS Code or a compatible editor.
2. Start coding normally.
3. Open the CodeWrapped sidebar dashboard.
4. Run CodeWrapped: Start Focus Session when you want focused tracking.
5. Run CodeWrapped: Show Yearly Wrapped to view your Wrapped-style recap.

For a quick preview, run:

CodeWrapped: Load Demo Data

Development

This section is only for contributors who clone the GitHub repository.

Install dependencies:

npm install

Build the extension and dashboard:

npm run compile

Package as a VSIX:

vsce package

Run in an Extension Development Host:

1. Open this folder in VS Code.
2. Press F5.
3. Run CodeWrapped: Load Demo Data.
4. Open the CodeWrapped activity bar view.

Architecture

src/
  analytics/   Tracking, insights, mock data, shared analytics types
  commands/    Command palette registration
  storage/     Local JSON persistence, export, import
  webview/     VS Code Webview provider

dashboard/
  src/         React dashboard UI

resources/     Extension icon assets

Tech Stack

• TypeScript
• VS Code Extension API
• VS Code Webview API
• React
• Vite
• Recharts
• Lucide React
• Local JSON storage

Compatibility

CodeWrapped is designed for VS Code-compatible extension hosts, including:

• Visual Studio Code
• Windsurf
• Cursor
• Antigravity
• Other VS Code-compatible editors

Roadmap

• Git commit tracking through the VS Code Git API
• More Wrapped story slides
• Custom insight generation rules
• Theme customization
• Optional encrypted backup/export
• More achievement packs

License

MIT