Static visual mockups. Nothing here is wired to real data — for direction only.
Option A — Enhanced Tree Views
Same tree architecture, but with colored icons, a text budget bar, grouped sections, richer descriptions, and hover tooltips.
▾ Usage Summary
⏻⟳
◔
62% budget
🔢Tokens128.4K today · 2.9M month
↧Input96.1K
↥Output32.3K
⇄Requests42 today · 918 month
💳AI Credits11.8 today · 1,178 month
＄Cost$0.42 today · $11.78 month
🔥Largest Context48.2K tokens
▾ Request History
📅Today42 · 128K · 11.8cr
✦2m ago · claude-sonnet3.1K→0.9K · 18% cache
🤖14m ago · gpt-4o2.2K→0.6K
🔥1h ago · gemini48K→1.2K · large
📅Yesterday61 · 190K · 17.2cr
▾ Usage Statistics
📆Daily
•Today128K · 42 req · $0.42
•Yesterday190K · 61 req · $0.63
📈Weekly1.1M · $3.72
🖥Model Breakdown
▾ Per-Project Breakdown
📁TokenGuard1.4M · 720cr · $7.20
📁webapp890K · 410cr · $4.10
📁scripts120K · 48cr · $0.48
Option B — Webview Sidebar (cards + charts)
A rich webview view hosted in the sidebar (reusing your Dashboard). Real progress bars, a 30-day chart, stat cards, and project bars.
▾ TokenGuard
128.4K
Tokens Today
2.9M
Tokens This Month
96K/32K
Input / Output
1,178
Credits (Month)
Budget: 1,178 / 1,900 credits (62%)
Last 30 Days
Jul 2Jul 16Aug 1
Per-Project
Project
Tokens
Cost
TokenGuard
1.4M
$7.20
webapp
890K
$4.10
scripts
120K
$0.48
Color legend:green healthy / cache hits ·
amber approaching budget ·
red over budget / large context ·
blue neutral accent.
Emojis stand in for VS Code ThemeIcons (codicons) in the real UI.