2026Web App

Control Tower

Un dashboard personal de uso de Claude Code integrado en mariansan.io. Muestra el consumo de tokens por proyecto — input, output, lecturas y escrituras de caché, coste estimado, sesiones y turnos. API de ingesta respaldada por Supabase, auth por cookie HMAC-SHA256, desglose diario con Recharts y selector de rango, y dos scripts de sincronización: uno para cuentas de organización vía Admin API de Anthropic, otro que lee el SQLite local directamente.

Qué hace

  • Dashboard protegido por contraseña en `/control-tower` con el consumo de tokens de Claude Code por proyecto
  • Desglose por proyecto: tokens de entrada, salida, lecturas de caché, escrituras de caché, coste estimado, sesiones y turnos
  • Gráfico de áreas apiladas con Recharts mostrando el desglose diario por tipo de token y selector de rango — 7 días, 30 días, 90 días o desde siempre
  • Se actualiza automáticamente cada 30 segundos sin recargar la página completa
  • API de ingesta en `/api/control-tower/ingest` que acepta payloads de uso asegurados por Bearer token
  • Dos scripts de sincronización: uno obtiene datos de la Admin API de Anthropic (para cuentas de organización), otro lee directamente de la base de datos SQLite local de Claude Code (`~/.claude/usage.db`) — sin necesidad de cuenta de organización

Por qué importa

  • ~20 minutos/semana ahorrados vs. estimar los costos de Claude Code manualmente desde dashboards de facturación y recibos de API
  • La atribución por proyecto y por modelo reemplazó estimaciones mensuales aproximadas — visibilidad de costos exacta que el dashboard de Anthropic no expone a nivel de proyecto
  • Datos propios: los conteos de tokens viven en Supabase bajo mi control, no en un dashboard de terceros que requiere acceso a claves API

Arquitectura

  • Página de Next.js App Router con autenticación por cookie firmada HMAC-SHA256 — compatible con Edge, sin dependencia de JWT
  • Supabase PostgreSQL almacena todos los registros de uso ingestados; filas indexadas por proyecto, fecha y modelo
  • El endpoint `/api/control-tower/ingest` valida el Bearer token, hace upsert del registro y devuelve la fila almacenada
  • `AreaChart` de Recharts con estado de rango controlado; los datos se obtienen en el servidor y se pasan como props
  • `scripts/sync-claude-usage.py` lee `~/.claude/usage.db` (SQLite) y hace POST a la API de ingesta — funciona en cualquier máquina sin cuenta de organización de Anthropic
  • El script de organización llama a la Admin API de Anthropic y mapea la respuesta al mismo formato de ingesta
  • El diseño sigue el sistema de tokens de mariansan.io: paleta ink/ivory/gold, fondos con gradiente ember, wordmark dorado mono

Filosofía

  • El ciclo de retroalimentación del uso de IA debería ser tan inmediato como el propio uso
  • Dos rutas de sincronización porque la mayoría de desarrolladores no tiene acceso a la API a nivel de organización — el script SQLite lo hace accesible para todos
  • Datos propios: los conteos de tokens viven en una base de datos que controlo yo, no en un dashboard de terceros con acceso a mis claves API

Stack

  • Next.js
  • Supabase
  • Recharts
  • Anthropic API
  • SQLite