DeepSeek Usage Monitor

A VS Code extension that brings DeepSeek's official usage dashboard right into your editor — monitor account balance, track token consumption, visualize daily usage trends, all without leaving your development workflow.

⚡ Quick Peek via QuickPick · 📊 Full Dashboard with Chart.js · 🔒 Credentials stored encrypted via SecretStorage

Features

Quick Start

1. Install the Extension

Search for "DeepSeek Usage Monitor" in the VS Code Extension Marketplace and install, or run:

code --install-extension geekmister.deepseek-usage-monitor

Note: The extension activates automatically on VS Code startup (onStartupFinished). No manual activation needed.

2. Configure API Key (for Balance)

# Open VS Code settings → search for "deepseek.apiKey"
# Or run the command palette (Ctrl+Shift+P) → "Preferences: Open Settings (UI)"
# Paste your API Key from https://platform.deepseek.com/api_keys

3. Configure Platform Token (for Usage Stats)

1. Log in to platform.deepseek.com
2. Open DevTools → Network tab → find any XHR request
3. Copy the Authorization: Bearer <token> header value
4. In VS Code, run Ctrl+Shift+P → "DeepSeek: Set Platform Token"
5. Paste the token (it will be stored encrypted)

4. Start Monitoring

Click the DeepSeek status bar item to open the QuickPick floating panel for a quick overview, or select "Open Full Dashboard" to see the complete analytics with charts.

Architecture

vscode-deepseek-usage/
├── src/
│   ├── extension.ts              ← Entry point: activation, commands, QuickPick, status bar
│   ├── api/
│   │   ├── client.ts             ← DeepSeekAPIClient (balance query, v1.0.0)
│   │   └── platform.ts           ← PlatformClient (usage/cost API, v1.0.1)
│   ├── monitor/
│   │   ├── balance.ts            ← BalanceMonitor (caching, rate-limit handling)
│   │   └── usage.ts              ← UsageMonitor (token management, cache, refresh)
│   ├── webview/
│   │   ├── panel.ts              ← UsageDashboardPanel (Webview lifecycle + settings)
│   │   ├── template.ts           ← HTML/CSS/JS template (dashboard + settings panel)
│   │   └── chart.ts              ← Chart.js configuration generator
│   ├── scheduler/
│   │   └── scheduler.ts          ← RefreshScheduler (configurable interval + backoff)
│   └── error/
│       └── handler.ts            ← APIErrorHandler (source-aware 401/403 handling)
├── docs/
│   └── v1.0.1-iteration.md       ← Full design document (Chinese)
├── package.json
└── tsconfig.json

Data Flow

User copies Bearer Token from browser DevTools
  → SecretStorage (encrypted, OS keychain)
    → PlatformClient fetches /api/v0/usage/amount + /api/v0/usage/cost
      → UsageMonitor._buildCache() transforms raw data
        → globalState persistent cache (30min TTL)
          → Click status bar → QuickPick floating panel (fast preview)
            → "Open Full Dashboard" → Webview Panel (Chart.js + daily details)

Core Technologies

Commands

Contributing

We welcome contributions! Please follow these guidelines:

🐛 Report Issues

• Search existing issues before creating a new one
• Clearly describe the problem, reproduction steps, and expected behavior
• Include VS Code version, extension version, and any relevant error messages

🚀 Submit Pull Requests

1. Fork the repository and create a feature branch from main
2. Follow Conventional Commits for commit messages
3. Ensure TypeScript compiles with zero errors: npx tsc --noEmit
4. Ensure the build passes: npm run build
5. Update documentation if changing features
6. Submit PR to the main branch

🎨 Code Style

• Use TypeScript with strict type checking
• Follow the existing module structure (separation of concerns)
• Keep async initialization patterns consistent (_initPromise pattern)
• Write meaningful variable and function names in English
• Use const over let where possible

📝 Commit Convention

Real-time Trend Dashboard

License

MIT