feat: add token usage visualization frontend

Merged
JU
1y ago
+12704-0

Summary

Add a complete frontend application for visualizing LLM API token usage with GitHub-style contribution graphs.

CLI Enhancements

  • Add graph command to export contribution data as JSON
  • Support timestamp extraction for Claude Code and Gemini messages
  • Generate daily contribution data with cost/token breakdowns

Frontend Features

  • 2D Contribution Graph: Canvas-based GitHub-style heatmap
  • 3D Isometric Graph: Interactive 3D view using obelisk.js
  • Multiple Color Themes: 9 palettes (green, halloween, teal, blue, pink, purple, orange, monochrome, YlGnBu)
  • System Theme Support: UI automatically follows system dark/light mode preference
  • Detailed Breakdowns: Click any day to see per-source, per-model token usage
  • Statistics Panel: Total cost, tokens, active days, streaks, and more
  • Source Filtering: Filter by source (OpenCode, Claude, Gemini, Codex)
  • Year Selection: Navigate between years of data

Technical Details

  • Next.js 16 with App Router
  • TypeScript with strict type definitions
  • CSS variables using GitHub Primer design system
  • Responsive design with Tailwind CSS

Screenshots

image