A macOS menu bar app for tracking Claude Code usage and costs in real-time.
- Today's cost always visible
- Live session indicator with duration, tokens, and cost
- Color-coded cost warnings (green → orange → red)
- Day-by-day breakdown of your usage
- Hourly cost charts for each day
- Yearly heatmap (GitHub-style)
- Predictions and usage trends
- macOS 15.0+
Download the latest DMG, open it, and drag ClaudeCodeUsage to Applications.
The app reads usage data from ~/.claude/projects/ (Claude Code's local storage).
Open ClaudeCodeUsage.xcodeproj in Xcode, then build and run (⌘R).
- Open
ClaudeCodeUsage.xcodeprojin Xcode - Show Canvas: Editor → Canvas (or ⌥⌘↩)
- Select a SwiftUI view file to see its preview
Give Claude Code a prompt like this:
Make the menu bar chart use a gradient from blue to purple.
After making changes, run:
swift run --package-path Packages/ClaudeUsage ScreenshotCaptureThen read the screenshot from
/tmp/ClaudeUsage/to verify. If it doesn't look right, keep iterating until it matches expectations.
You can also provide a reference image:
Update the Analytics view to match the style in this image: @reference-design.png
Use ScreenshotCapture to verify your changes match the reference.
Claude Code will edit → capture → verify → repeat until the result looks correct.
The best part: you can see the visual effects of changes immediately in Xcode previews. All views have previews with real data for rapid iteration without running the full app.
See ARCHITECTURE.md for detailed design documentation.
MIT