Claude Code Usage

🌐 多語言文檔 | Multi-language Documentation | 多语言文档 | 多言語ドキュメント | 다국어 문서

• English
• 繁體中文
• 简体中文
• 日本語
• 한국어

A comprehensive VSCode extension that monitors Claude Code usage and costs with detailed analytics and interactive visualizations.

🖼️ Screenshot

Status Bar

Dashboard

✨ Features

📊 Real-time Monitoring

• Status Bar Display: Shows today's usage costs in the VSCode status bar
• Live Updates: Automatic data refresh with configurable intervals (minimum 30 seconds)
• Zero Dependencies: Built with native Node.js modules for maximum compatibility

📈 Interactive Analytics Dashboard

• Multiple Time Views: Today, This Month, and All Time perspectives
• Interactive Charts: Switchable bar charts with 6 different metrics:
  • Cost breakdown
  • Input/Output tokens
  • Cache creation/read tokens
  • Message counts
• Detailed Tables: Comprehensive daily/monthly usage breakdowns
• Model Analysis: Per-model cost and token consumption tracking

🌐 Multi-language Support

• 5 Languages: English, 繁體中文, 简体中文, 日本語, 한국어
• Auto-detection: Automatically detects system language
• Manual Override: Choose your preferred language in settings

🎨 Visual Features

• Bottom-up Charts: Industry-standard chart orientation
• Monthly Trends: All-time view shows monthly aggregated data for long-term analysis
• VSCode Theme Integration: Seamless light/dark theme support
• Responsive Design: Optimized for different screen sizes

Installation

1. Install the extension from the VSCode marketplace
2. The extension will automatically detect your Claude Code data directory
3. Start using Claude Code and see your usage appear in the status bar

Configuration

Access settings via File > Preferences > Settings and search for "Claude Code Usage":

• Refresh Interval: How often to update usage data (minimum 30 seconds)
• Data Directory: Custom Claude data directory path (leave empty for auto-detection)
• Language: Display language preference
• Decimal Places: Number of decimal places for cost display

🚀 Usage

Status Bar

• Shows today's usage cost with a pulse icon
• Click to open the detailed analytics dashboard

Analytics Dashboard

1. Time Tabs: Switch between Today, This Month, and All Time views
2. Chart Metrics: Click tabs above charts to switch between:
   • Cost breakdown
   • Input/Output tokens
   • Cache creation/read tokens
   • Message counts
3. Interactive Tables: Detailed daily/monthly breakdowns below charts
4. Model Analysis: Per-model usage statistics in each tab

📋 Requirements

• Claude Code: Must be installed and running
• VSCode: Version 1.74.0 or later
• Node.js: Built-in modules only (no external dependencies)

🛠️ Troubleshooting

"No Claude Code Data" Error

1. Ensure Claude Code is installed and has been used
2. Check the data directory setting in extension preferences
3. Verify Claude Code is generating usage logs in ~/.claude/projects or ~/.config/claude/projects

Charts Not Updating

1. Switch to a different tab and back to refresh the chart
2. Check if the time period has actual usage data
3. Verify cache tokens are available in your Claude usage

Performance Issues

• Increase refresh interval if experiencing slowdowns
• Extension uses 1-minute caching to minimize file I/O

License

MIT

Contributing

Issues and pull requests are welcome on the GitHub repository.