Come Trasformare i Task di Claude Code in una Bacheca Kanban Visiva

Quando ho eseguito Claude Code per rifattorizzare un monolite, il terminale si è rapidamente trasformato in una cascata infinita di log. Il modello ha allegramente scomposto il task in una dozzina di passaggi, ha eseguito test, corretto codice e periodicamente si è bloccato sulle dipendenze. Capire da quel caos di output quale sottoattività era in esecuzione e cosa la stava bloccando è diventato un'impresa a sé.

Tracciare tutto questo nel terminale è scomodo. Il repository claude-task-viewer risolve esattamente questo problema avviando una dashboard web locale nei formati bacheca Kanban e timeline.

Di cosa tratta questo progetto

claude-task-viewer è un'interfaccia locale leggera per osservare i task di Claude Code. L'idea fondamentale dell'autore è semplice: osservazione invece di controllo. L'utility non cerca di impostare task o modificare stati dei ticket al posto della rete neurale. Si limita a leggere lo stato della sessione e visualizzare il grafo dei sottotask generato dall'agente.

Lo strumento è adatto agli sviluppatori che eseguono attivamente Claude Code in background su task lunghi e non vogliono passare costantemente alla finestra del terminale per controllare l'avanzamento.

Funzionalità principali nella pratica

L'interfaccia appare minimalista ma copre tutti gli scenari base di tracciamento del lavoro.

Stato chiaro dei task e dipendenze

La dashboard mostra colonne con stati: pending, in progress e completed. Se un task ne blocca un altro, la card visualizza le relazioni blockedBy e blocks. Questo aiuta a vedere immediatamente il percorso critico e capire perché l'agente si è bloccato a un determinato passaggio. La card mostra anche il campo activeForm, dove è possibile vedere l'azione esatta corrente del modello in quel preciso istante.

Kanban e Timeline come diagramma di Gantt

Nell'header è possibile passare dalla vista board alla timeline. I task sono disposti come barre orizzontali dal momento della creazione all'ultimo aggiornamento. L'asse temporale scala automaticamente: secondi, minuti o ore a seconda della durata della sessione. Passando il cursore si mostra il timestamp esatto e il tempo totale di esecuzione.

Avvisi sonori e notifiche desktop

Quando Claude completa un task lungo, il browser riproduce un suono bitonale e invia una notifica di sistema. Cliccando sulla notifica si accede direttamente alla card della sessione. È comodo quando l'agente esegue una build o una suite di test per 15-20 minuti mentre scrivi documentazione in un'altra scheda.

Archiviazione automatica e ricerca rapida

Le sessioni senza task attivi che non sono cambiate per più di una settimana passano automaticamente a una sezione archivio compressa. La bacheca non si intasa di vecchi esperimenti. Allo stesso tempo, la ricerca fuzzy integrata cerca tra nomi delle sessioni, descrizioni dei task e percorsi dei progetti anche dentro l'archivio.

Come funziona lo scambio dati

Sotto il cofano non ci sono database pesanti. Claude Code memorizza i task localmente nella directory ~/.claude/tasks/, dove ogni sessione ha la propria cartella con file JSON:

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

Una struttura tipica di un file task si presenta così:

{
  "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": []
}

Il backend Node.js monitora il filesystem e trasmette le modifiche al browser tramite Server-Sent Events (SSE). Nessun polling costante o refresh manuale della pagina: non appena Claude Code crea o modifica un file JSON, la card sulla bacheca si sposta istantaneamente.

È fornita una semplice API REST per interagire con l'interfaccia. Attraverso di essa è possibile richiedere un elenco di sessioni, visualizzare i dati grezzi o eliminare un task bloccato:

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

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

Come avviare

Puoi eseguire l'utility senza installazione preventiva tramite npx:

npx claude-task-viewer

Dopo l'avvio, il server si aprirà all'indirizzo http://localhost:3456.

Se la porta predefinita è occupata o hai più profili Claude, i parametri vengono passati tramite flag ambientali:

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

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

Per compilare dal codice sorgente, basta clonare il repository:

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

Puoi controllare la bacheca con la tastiera: il tasto ? mostra la guida, D elimina la card selezionata con controllo delle dipendenze e Esc chiude le finestre modali.

In sintesi

claude-task-viewer fa esattamente una cosa: porta trasparenza ai processi di Claude Code senza complessità non necessaria. Non ci sono impostazioni sovraccaricate né tentativi di imporre un proprio flusso di gestione dei progetti.

Se assegni regolarmente task complessi all'agente e sei stanco di strizzare gli occhi guardando log grezzi nella console, vale la pena tenere questa utility aperta in una seconda scheda del browser. Risparmia attenzione e mostra immediatamente con cosa è occupato il modello.