Token Tracker

VS Code extension that displays AI API provider token usage on the status bar with real-time balance monitoring, live reset countdowns, and an interactive dashboard.

Screenshots

Features

• Status bar display — Shows [provider] [remaining %] [reset countdown] directly in the VS Code status bar, updating every second
• Non-blocking refresh — During refresh, only the percentage shows a spinner while provider name and countdown remain visible (no blink)
• Encrypted API keys — Keys stored via VS Code SecretStorage (system keychain), never in plaintext settings
• 13 providers supported: OpenAI, Anthropic, Gemini, GitHub Copilot, Z.AI, OpenRouter, Mistral, DeepSeek, Kimi, Minimax, Xiaomi, OpenCode, Synthetic
• Interactive dashboard — Webview with balance cards, progress bars, live countdown ticks, auto-refresh, and a settings tab to configure providers
• Color-coded alerts — Green (>50%), orange (>20%), red (<=20%) for remaining percentage

Architecture

token-tracker-vscode/
├── src/
│   ├── extension.ts          # Extension entry, status bar, webview dashboard
│   ├── config/
│   │   └── store.ts          # SecretStorage for encrypted API keys, VS Code settings for enable state
│   ├── models/
│   │   └── provider.ts       # BalanceInfo model, percentage calc, countdown formatting
│   └── providers/
│       ├── base.ts            # Abstract BaseProvider
│       ├── registry.ts        # Provider registry (all 13 providers)
│       ├── endpoints.ts       # API endpoint URLs
│       ├── http.ts            # Node.js http/https request helpers
│       ├── openai.ts          # OpenAI (GPT, ChatGPT usage)
│       ├── anthropic.ts       # Anthropic (Claude)
│       ├── gemini.ts          # Google Gemini (OAuth)
│       ├── github.ts          # GitHub Copilot
│       ├── zai.ts             # Z.AI
│       ├── openrouter.ts      # OpenRouter
│       ├── mistral.ts         # Mistral AI
│       ├── deepseek.ts        # DeepSeek
│       ├── kimi.ts            # Kimi (Moonshot AI)
│       ├── minimax.ts         # Minimax
│       ├── xiaomi.ts          # Xiaomi AI
│       ├── opencode.ts        # OpenCode
│       └── synthetic.ts       # Synthetic
├── package.json
└── tsconfig.json

Data Flow

1. VS Code activates extension
       │
2. SecretStorage reads encrypted API keys from system keychain
   VS Code settings reads provider enable flags
       │
3. refreshAll() fires (on activate + interval timer)
       │
4. For each enabled provider:
   └─ Fetch API key from SecretStorage
   └─ Create provider instance
   └─ Call fetchBalance() → HTTP request to provider API
   └─ Store BalanceInfo in cache
       │
5. updateStatusBar() renders single status bar item:
   "OpenAI  85.2%  $(clock) 2h 15m 30s"
       │
6. tickTimer (1s interval) updates countdown in status bar text
       │
7. Hover → Markdown tooltip with progress bar + used/remaining/total table
       │
8. Click → Webview dashboard with:
   - Balance cards (percentage, progress bar, countdown, stats)
   - Settings tab (enable providers, enter API keys)
   - Auto-refresh from settings interval
   - Client-side countdown ticking every second

Commands

Command	Description
Token Tracker: Refresh All	Force refresh all provider balances
Token Tracker: Show Dashboard	Open the webview dashboard panel
Token Tracker: Open Settings	Open VS Code settings for Token Tracker

Configuration

Setting	Default	Description
tokenTracker.refreshIntervalSeconds	120	Auto-refresh interval in seconds (minimum 30)
tokenTracker.providers	{}	Provider enable state. API keys are stored in system keychain.

Setup

cd token-tracker-vscode
npm install
npm run compile

Install for development

Symlink to VS Code extensions directory:

ln -s $(pwd) ~/.vscode/extensions/token-tracker-0.1.0

Then reload VS Code (Cmd+Shift+P → "Developer: Reload Window").

Build VSIX

npm run build

Produces token-tracker-0.1.0.vsix. Install with:

code --install-extension token-tracker-0.1.0.vsix

Configure providers

1. Open dashboard (click status bar item or Cmd+Shift+P → "Token Tracker: Show Dashboard")
2. Go to Settings tab
3. Enable a provider, enter your API key, click Save

Keys are encrypted and stored in your OS keychain (macOS Keychain, Windows Credential Manager, or Linux secret-service).