Dashboard de consumo de tokens para Claude Code
Proyecto personal
Problema
No tenía visibilidad de cuántos tokens consumía en Claude Code, ni de cómo se distribuían entre proyectos y a lo largo del tiempo.
Impacto
Visibilidad clara del consumo, parseando los archivos JSONL locales sin depender de ningún servicio externo.
- Next.js
- React
- TypeScript
- Recharts
- Tailwind CSS
El problema
Claude Code deja sus registros de uso en archivos JSONL locales, pero sin una vista que los resuma. Quería entender cuántos tokens consumo, en qué proyectos y cómo evoluciona en el tiempo — sin subir nada a un servicio externo.
La arquitectura
- Next.js (App Router) con Server Components por defecto.
- Parser de JSONL que recorre los logs locales (
~/.claude/projects/**/*.jsonl) y los agrega por proyecto, día y sesión. - Visualización con Recharts: series temporales y desgloses por proyecto.
- Tailwind CSS para una UI limpia y rápida.
Decisiones clave
- Parser en TypeScript puro, sin Python: el entorno no tenía Python instalado, así que el parseo se resolvió 100% en TS. Una dependencia menos.
- Server Components para parsear: el trabajo pesado de lectura ocurre en el servidor; al cliente llega solo lo necesario para los gráficos.
Impacto
Una herramienta propia que convierte logs crudos en información accionable sobre mi consumo — y un buen ejemplo de resolver un problema real con el stack que domino, end to end.