Claude Code Monitor

Un plugin para Visual Studio Code que monitorea y visualiza el uso de Claude Code en tiempo real.

Características

• Monitoreo en tiempo real del uso de Claude Code
• Estadísticas detalladas por día, mes y proyecto
• Panel lateral con información visual
• Notificaciones de uso configurable
• Exportación de estadísticas
• Reset de contadores

Instalación

Desarrollo Local

1. Clona el repositorio:

git clone <tu-repo>
cd claude-code-monitor

2. Instala las dependencias:

npm install

3. Compila el proyecto:

npm run compile

4. Presiona F5 en VS Code para abrir una nueva ventana con la extensión cargada.

Publicación en Marketplace

# Instalar vsce
npm install -g vsce

# Crear package
vsce package

# Publicar
vsce publish

Uso

Panel de Monitoreo

El plugin añade un panel lateral "Claude Code Usage" que muestra:

• Total de requests realizados
• Tokens utilizados (si está disponible)
• Última vez usado
• Uso diario (últimos 7 días)
• Uso mensual (últimos 6 meses)
• Uso por proyecto (top 10)

Comandos Disponibles

• Claude Code: Show Usage - Actualiza las estadísticas
• Claude Code: Reset Statistics - Reinicia todos los contadores
• Claude Code: Export Statistics - Exporta las estadísticas a JSON

Configuración

Accede a File > Preferences > Settings y busca "Claude Code Monitor":

{
    "claude-code-monitor.autoRefresh": true,
    "claude-code-monitor.refreshInterval": 30,
    "claude-code-monitor.showNotifications": true
}

Configuraciones

Arquitectura

Componentes Principales

1. ClaudeCodeUsageProvider: Proveedor principal de datos del árbol
2. UsageItem: Elementos individuales del árbol de estadísticas
3. Monitoreo de Terminal: Detecta comandos de Claude Code
4. Persistencia: Guarda estadísticas en .vscode/claude-code-usage.json

Flujo de Datos

Terminal Command → Monitor Detection → Update Stats → Save Data → Refresh UI

Personalización

Añadir Nuevas Métricas

Para añadir nuevas métricas, modifica la interfaz ClaudeCodeUsage:

interface ClaudeCodeUsage {
    totalRequests: number;
    tokensUsed: number;
    // Añade tu nueva métrica aquí
    newMetric: number;
    // ...
}

Modificar el UI

El árbol de estadísticas se puede personalizar en el método getChildren() del provider.

API de Claude Code

El plugin utiliza estos comandos para detectar el uso:

# Verificar instalación
claude-code --version

# Monitorear uso (implementar según API de Claude Code)
claude-code --usage
claude-code --stats

Desarrollo

Estructura del Proyecto

├── src/
│   └── extension.ts       # Código principal
├── package.json           # Configuración del plugin
├── tsconfig.json         # Configuración TypeScript
└── README.md            # Documentación

Scripts Disponibles

npm run compile        # Compilar TypeScript
npm run watch         # Compilar en modo watch
npm run vscode:prepublish  # Preparar para publicación

Testing

# Ejecutar tests
npm test

# Abrir ventana de desarrollo
code --extensionDevelopmentPath=. --extensionTestsPath=./out/test

Contribución

1. Fork del repositorio
2. Crear rama feature (git checkout -b feature/nueva-funcionalidad)
3. Commit cambios (git commit -am 'Añadir nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Crear Pull Request

Roadmap

• [ ] Integración con API oficial de Claude Code
• [ ] Gráficos visuales de uso
• [ ] Alertas de límites de uso
• [ ] Comparación entre proyectos
• [ ] Exportación a CSV/Excel
• [ ] Dashboard web

Licencia

MIT License

Soporte

• Reportar bugs en GitHub Issues
• Documentación adicional en Wiki
• Preguntas en Discussions