feat: Add Usage Panel with Token Tracking and Cost Analytics

[olivermontes]

Summary

Create a new Usage page/panel to track and visualize token consumption and costs across all AI model interactions. This feature will help users understand their API usage patterns and manage costs effectively.

Requirements

1. Database Schema (SQLite)

Add new tables for tracking usage:

-- Token usage per request
CREATE TABLE usage_logs (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  session_id TEXT NOT NULL,
  message_id TEXT,
  provider TEXT NOT NULL,           -- 'openrouter', 'openai', 'anthropic', etc.
  model_id TEXT NOT NULL,
  prompt_tokens INTEGER NOT NULL,
  completion_tokens INTEGER NOT NULL,
  total_tokens INTEGER NOT NULL,
  cost_usd REAL,                    -- Calculated cost in USD
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (session_id) REFERENCES chat_sessions(id)
);

-- Model pricing configuration
CREATE TABLE model_pricing (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  provider TEXT NOT NULL,
  model_id TEXT NOT NULL,
  input_cost_per_million REAL NOT NULL,   -- Cost per 1M input tokens
  output_cost_per_million REAL NOT NULL,  -- Cost per 1M output tokens
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  UNIQUE(provider, model_id)
);

2. Usage Page UI

Location: New route /usage accessible from sidebar

Components:

• Summary Cards: Total tokens, total cost, requests count (today/week/month)
• Charts: Token usage over time, cost breakdown by provider/model
• Data Grid: Detailed log of all API calls with columns:
  • Timestamp
  • Provider
  • Model
  • Prompt Tokens
  • Completion Tokens
  • Total Tokens
  • Cost (USD)
  • Session Link

3. Basic Metrics Dashboard

• Total tokens used (input/output breakdown)
• Total estimated cost
• Most used models (by requests and tokens)
• Usage trends (daily/weekly/monthly)
• Cost per provider pie chart

4. Integration Points

• Hook into AI SDK streaming responses to capture token counts
• Auto-fetch pricing from OpenRouter API when available
• Allow manual pricing configuration for custom/local models

Suggestions

Phase 1 (MVP)

• Database migrations for usage_logs and model_pricing tables
• UsageService in main process to log and query usage data
• Basic Usage page with summary cards and data grid
• Capture token usage from streaming responses

Phase 2 (Enhanced)

• Interactive charts using recharts or similar
• Export usage data to CSV/JSON
• Date range filters and search
• Cost alerts/budget warnings

Phase 3 (Advanced)

• Auto-sync pricing from provider APIs
• Cost projections and forecasting
• Per-session cost breakdown
• Usage comparison between models

Technical Considerations

• Use existing SQLite infrastructure and migration system
• Follow hexagonal architecture pattern (Service → Repository → Database)
• Zustand store for usage state management in renderer
• Reuse shadcn/ui components (DataTable, Card, Charts)
• Consider pagination for large usage histories

UI/UX Suggestions

• Add usage indicator in chat interface (tokens used in current session)
• Quick stats in sidebar or status bar
• Color-coded cost tiers (green/yellow/red based on spending)
• Dark mode compatible charts

Related

• Similar to OpenRouter's activity dashboard
• Reference: Anthropic Console usage page

---

Labels: enhancement, feature, database