Cómo Convertir las Tareas de Claude Code en un Tablero Visual Kanban

Cuando ejecuté Claude Code por primera vez para refactorizar un monolito, la terminal rápidamente se convirtió en una cascada interminable de registros. El modelo alegremente descompuso la tarea en una docena de pasos, ejecutó pruebas, corrigió código y periódicamente se atascaba en dependencias. Descubrir de ese caos de salida qué subtarea se estaba ejecutando actualmente y qué la estaba bloqueando se convirtió en una búsqueda en sí misma.

Hacer seguimiento en la terminal es inconveniente. El repositorio claude-task-viewer resuelve exactamente este problema generando un panel web local en formatos de tablero Kanban y línea de tiempo.

De qué trata este proyecto

claude-task-viewer es una interfaz local ligera para observar las tareas de Claude Code. La idea central del autor es simple: observación en lugar de control. La utilidad no intenta establecer tareas ni cambiar el estado de los tickets en nombre de la red neuronal. Simplemente lee el estado de la sesión y visualiza el gráfico de subtareas que genera el agente.

La herramienta está diseñada para desarrolladores que ejecutan Claude Code activamente en segundo plano durante tareas prolongadas y no desean cambiar constantemente a la ventana de la terminal para verificar el progreso.

Características principales en la práctica

La interfaz luce minimalista pero cubre todos los escenarios básicos de seguimiento de trabajo.

Estado claro de las tareas y dependencias

El panel muestra columnas con estados: pendiente, en progreso y completado. Si una tarea bloquea otra, la tarjeta muestra las relaciones bloqueadoPor y bloquea. Esto ayuda a ver inmediatamente la ruta crítica y entender por qué el agente se atascó en un paso particular. La tarjeta también muestra el campo activeForm, donde puedes ver la acción exacta del modelo en ese momento.

Kanban y línea de tiempo como diagrama de Gantt

En el encabezado, puedes cambiar la vista del tablero a una línea de tiempo. Las tareas se muestran como barras horizontales desde el momento de creación hasta la última actualización. El eje temporal se escala automáticamente: segundos, minutos u horas según la duración de la sesión. Al pasar el cursor se muestra la marca de tiempo exacta y el tiempo total de ejecución.

Alertas sonoras y notificaciones de escritorio

Cuando Claude completa una tarea larga, el navegador reproduce un sonido de dos tonos y envía una notificación del sistema. Al hacer clic en la notificación, accedes directamente a la tarjeta de la sesión. Esto resulta útil cuando el agente ejecuta una compilación o suite de pruebas durante 15-20 minutos mientras escribes documentación en otra pestaña.

Archivado automático y búsqueda rápida

Las sesiones sin tareas activas que no han cambiado durante más de una semana se mueven automáticamente a una sección de archivo colapsada. El tablero no se satura con experimentos antiguos. Al mismo tiempo, la búsqueda difusa integrada busca en nombres de sesión, descripciones de tareas y rutas de proyecto incluso dentro del archivo.

Cómo funciona el intercambio de datos

No hay bases de datos pesadas detrás. Claude Code almacena las tareas localmente en el directorio ~/.claude/tasks/, donde cada sesión tiene su propia carpeta con archivos JSON:

~/.claude/tasks/
  └── {session-uuid}/
      ├── 1.json
      ├── 2.json
      └── ...

Una estructura típica de archivo de tarea se ve así:

{
  "id": "1",
  "subject": "Implement user authentication",
  "description": "Add JWT-based auth with refresh tokens",
  "activeForm": "Setting up auth middleware",
  "status": "in_progress",
  "blocks": ["2", "4"],
  "blockedBy": []
}

El backend de Node.js supervisa el sistema de archivos y transmite los cambios al navegador mediante Server-Sent Events (SSE). No hay sondeos constantes ni actualizaciones manuales de la página: en cuanto Claude Code crea o edita un archivo JSON, la tarjeta en el tablero se mueve instantáneamente.

Se proporciona una API REST simple para interactuar con la interfaz. A través de ella, puedes solicitar una lista de sesiones, ver datos sin procesar o eliminar una tarea atascada:

# Получить список сессий
curl http://localhost:3456/api/sessions

# Забрать все задачи конкретной сессии
curl http://localhost:3456/api/sessions/:id

Cómo ejecutar

Puedes ejecutar la utilidad sin instalación previa mediante npx:

npx claude-task-viewer

Después del inicio, el servidor se abrirá en http://localhost:3456.

Si el puerto predeterminado está ocupado o tienes múltiples perfiles de Claude, los parámetros se pasan mediante indicadores de entorno:

# Запуск на другом порту с автоматическим открытием вкладки в браузере
PORT=8080 npx claude-task-viewer --open

# Использование нестандартного каталога конфигурации
npx claude-task-viewer --dir=~/.claude-work

Para compilar desde el código fuente, simplemente clona el repositorio:

git clone https://github.com/L1AD/claude-task-viewer.git
cd claude-task-viewer
npm install
npm start

Puedes controlar el tablero con el teclado: la tecla ? muestra la ayuda, D elimina la tarjeta seleccionada con verificación de dependencias, y Esc cierra las ventanas modales.

En resumen

claude-task-viewer hace exactamente una cosa: aporta transparencia a los procesos de Claude Code sin complejidad innecesaria. No hay configuraciones sobrecargadas ni intentos de imponer su propio flujo de trabajo de gestión de proyectos.

Si regularmente asignas tareas complejas al agente y estás cansado de entrecerrar los ojos ante registros sin procesar en la consola, vale la pena mantener esta utilidad abierta en una segunda pestaña del navegador. Ahorra atención y muestra inmediatamente en qué está ocupado el modelo.