Add context stats/metrics to UI

[Roasbeef]

Summary

Display token usage and compaction proximity in the chat UI. Users should be able to see how much context has been used and when compaction is approaching, similar to how Claude Code CLI shows context usage.

Motivation

This helps users understand:

• How much of the context window has been consumed
• When automatic compaction/summarization might occur
• Cost estimation based on token usage

Acceptance Criteria

• Display current token usage (input + output tokens)
• Show percentage of context window used
• Visual indicator when approaching compaction threshold (e.g., 80%+)
• Update metrics in real-time during streaming
• Metrics visible but unobtrusive in the UI

Technical Details

Data Source

The Agent SDK returns usage information in the result message:

• result.usage.inputTokens
• result.usage.outputTokens
• result.costUsd

The Conversation type already tracks metadata.totalTokens and metadata.totalCostUsd.

UI Location Options

1. Header bar - Compact display next to conversation title
2. Footer/status bar - Below the input area
3. Collapsible panel - Expandable stats section

Visual Design

• Progress bar showing context usage percentage
• Color coding: green (<50%), yellow (50-80%), red (>80%)
• Tooltip with detailed breakdown
• Optional: cost estimate display

Implementation Approach

1. Add token tracking to AgentController.ts (accumulate per-turn usage)
2. Add UI component ContextStats.ts or integrate into ChatView.ts
3. Add CSS for progress bar and status indicators
4. Subscribe to streaming events to update in real-time

Priority

P2 - Medium priority feature enhancement