Claude Code Token Lens — Data skill for Claude Code

Claude Code Token Lens

[🇨🇳 中文版 (Chinese Version)](./README_zh.md)


**Claude Code Token Lens** is a beautiful, local-first token usage tracker and analytics dashboard for AI coding agents.

Initially built to parse local logs for **Claude Code**, the architecture is designed to be platform-agnostic, allowing future support for other AI agents (Cursor, Aider, GitHub Copilot CLI, etc.). It aggregates token usage, calculates exact costs, and visualizes daily trends with rich, interactive drill-down capabilities (Project > Session > Conversation > Turns).

✨ Features

• 🔒 Local-First & Secure: Runs entirely on your local machine. It reads your agent's local JSON logs without sending your private codebase or prompt history to any external server. Your data stays yours.
• 📊 Detailed Dashboards: View your total cost, token consumption, and active days at a glance through a modern, glassmorphism-inspired UI.
• 📈 Daily Trends & Aggregation: Beautiful bar charts and line graphs showing input/output/cache tokens and costs per day.
• 🔍 Deep Drill-Down UI: Seamlessly filter and navigate from Projects -> Sessions -> Conversations -> Individual Turns.
• 🏷️ Smart Filtering: Inline filter bubbles make it easy to see exactly what context you are viewing, with one-click clearing.
• 💵 Cost Tracking: Uses the latest pricing models (e.g., Claude 3.5 Sonnet) to accurately compute your API costs based on real usage.

🚀 Getting Started

Prerequisites

• Node.js 18 or higher
• Local AI Agent logs (currently supports ~/.claude/projects/*.jsonl generated by Claude Code)

Installation

1. Clone the repository:

   git clone https://github.com/AIKnightPanda/claude-code-token-lens.git
   cd claude-code-token-lens

2. Install the dependencies:

   npm install
   # or yarn install / pnpm install

Usage

1. Run the d