agentic-usage

A visual analytics dashboard that combines:

• ccusage cost/token data (daily, monthly, per-model pricing)
• /stats-style metrics (heatmap, streaks, favorite model, session stats)
• Codex session activity from local Codex session files

Just open it and see. No JSON exports, no drag-and-drop.

Quick Start

npm install
npm run dev
# Opens http://localhost:5174 — loads automatically

That's it. The app:

1. Starts a tiny Express server that reads ~/.claude/projects/ and ~/.codex/sessions/ JSONL files
2. Fetches the LiteLLM price table (cached for 1h) to compute per-day costs
3. Launches Vite for the frontend
4. Auto-loads everything when you open the page

After the first load, hit ↻ to refresh.

Use the Claude / Codex toggle in the header to switch data sources. Claude mode reads ~/.claude/projects/. Codex mode reads ~/.codex/sessions/ and shows activity, sessions, models, hours, and token totals.

Both providers compute costs locally from a price table fetched from LiteLLM. Per-day prices are observed once and frozen — past days don't silently re-price when current rates change. Codex costs are labeled "API-equivalent" because Codex sessions don't record whether they were billed via API (per-token) or a ChatGPT subscription (flat). The cache lives at ~/.config/agentic-usage/cache.json; remove that file to reset.

What You Get

Overview Tab

• GitHub-style activity heatmap (last 52 weeks)
• Sessions, active days, current streak, longest streak
• Favorite model, longest session, most active day
• Daily cost chart
• Model distribution with progress bars
• Token composition donut (input/output/cache)
• Hourly activity distribution

Tokens Tab

• Input / Output / Cache Create / Cache Read totals
• Stacked bar chart showing all 4 token types per day
• Full daily table matching ccusage's output format

Cost Tab

• Total spend, daily average, peak day, 7-day projection
• Cost over time area chart
• Cumulative cost curve
• Monthly table (if data available)

Architecture

npm run dev
  → starts Express on :5175 (API + JSONL parser + pricing engine)
  → starts Vite on :5174 (React frontend, proxies /api to Express)

The Express server:

• Parses all .jsonl session files for stats (streaks, heatmap, models)
• Aggregates per-(date, model) tokens and computes costs from the LiteLLM price table
• Serves everything via /api/all?provider=claude|codex in one call

Requirements

• Node.js 18+
• ~/.claude/projects/ with Claude Code session files
• ~/.codex/sessions/ with Codex session files for Codex mode