Hoe u Claude Code-taken omzet in een visueel Kanban-bord

Toen ik Claude Code voor het eerst uitvoerde om een monolith te refactoren, veranderde de terminal snel in een eindeloze waterval van logs. Het model deelde het werk vrolijk op in een dozijn stappen, voerde tests uit, fixeerde code, en raakte periodiek vast op afhankelijkheden. Uit die chaos van output achterhalen welke subtaak er op dat moment draaide en wat deze blokkeerde, werd een zoektocht op zich.

Dit bijhouden in de terminal is onhandig. De claude-task-viewer repository lost dit probleem precies op door een lokaal webdashboard te starten in Kanban-bord en tijdlijn-formaat.

Waar dit project over gaat

claude-task-viewer is een lichtgewicht lokale interface voor het observeren van Claude Code-taken. De kerngedachte van de auteur is simpel: observatie in plaats van controle. Het hulpprogramma probeert niet om taken in te stellen of ticketstatussen te wijzigen namens het neurale netwerk. Het leest alleen de sessiestatus en visualiseert de subtaak-graaf die de agent genereert.

Het hulpmiddel is geschikt voor ontwikkelaars die actief Claude Code op de achtergrond draaien op langlopende taken en niet constant naar het terminalvenster willen schakelen om de voortgang te controleren.

Belangrijkste functies in de praktijk

De interface ziet er minimalistisch uit maar dekt alle basale werktracking-scenario's.

Duidelijke taakstatus en afhankelijkheden

Het dashboard toont kolommen met statussen: in afwachting, in uitvoering, en voltooid. Als één taak een andere blokkeert, toont de kaart blockedBy en blocks relaties. Dit helpt om direct het kritieke pad te zien en te begrijpen waarom de agent vastliep op een bepaalde stap. De kaart toont ook het activeForm veld, waar u de exacte huidige actie van het model op dat moment kunt zien.

Kanban en tijdlijn als Gantt-diagram

In de header kunt u schakelen tussen de bord- en tijdlijn-weergave. Taken worden gerangschikt als horizontale balken van het moment van aanmaken tot de laatste update. De tijdas schaalt automatisch: seconden, minuten, of uren afhankelijk van de sessieduur. Als u de cursor erboven beweegt, ziet u de exacte tijdstempel en totale uitvoeringstijd.

Geluidssignalen en desktopmeldingen

Wanneer Claude een langdurige taak voltooit, speelt de browser een tweetoonsgeluid af en stuurt een systeemnotificatie. Door op de notificatie te klikken gaat u direct naar de sessiekaart. Dit is handig wanneer de agent een build of testsuite 15-20 minuten draait terwijl u in een ander tabblad documentatie schrijft.

Automatisch archiveren en snel zoeken

Sessies zonder actieve taken die meer dan een week niet zijn gewijzigd, verplaatsen zich automatisch naar een samengevouwen archiefsectie. Het bord raakt niet vol met oude experimenten. Tegelijkertijd doorzoekt de ingebouwde fuzzy search sessienamen, taakbeschrijvingen en projectpaden, zelfs binnen het archief.

Hoe gegevensuitwisseling werkt

Onder de motorkap zijn er geen zware databases. Claude Code slaat taken lokaal op in de ~/.claude/tasks/ directory, waar elke sessie zijn eigen map heeft met JSON-bestanden:

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

Een typische taakbestandsstructuur ziet er zo uit:

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

De Node.js backend bewaakt het bestandssysteem en streamt wijzigingen naar de browser via Server-Sent Events (SSE). Geen constant pollen of handmatige paginaverversingen: zodra Claude Code een JSON-bestand aanmaakt of bewerkt, beweegt de kaart op het bord onmiddellijk.

Er wordt een eenvoudige REST API geleverd voor interactie met de interface. Hiermee kunt u een lijst van sessies opvragen, ruwe gegevens bekijken, of een vastgelopen taak verwijderen:

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

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

Hoe te starten

U kunt het hulpprogramma uitvoeren zonder voorafgaande installatie via npx:

npx claude-task-viewer

Na het opstarten wordt de server geopend op http://localhost:3456.

Als de standaardpoort bezet is of u meerdere Claude-profielen hebt, worden parameters doorgegeven via omgevingsvlaggen:

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

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

Om vanaf de bron te bouwen, kloont u gewoon de repository:

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

U kunt het bord met het toetsenbord bedienen: de ? toets roept de help op, D verwijdert de geselecteerde kaart met afhankelijkheidscontrole, en Esc sluit modaalvensters.

Conclusie

claude-task-viewer doet precies één ding: het brengt transparantie in Claude Code-processen zonder onnodige complexiteit. Er zijn geen overladen instellingen of pogingen om zijn eigen projectmanagementworkflow op te leggen.

Als u regelmatig complexe taken aan de agent toewijst en het beu bent om naar rauwe logs in de console te turen, is het de moeite waard om dit hulpprogramma open te houden in een tweede browsertab. Het bespaart aandacht en toont onmiddellijk waarmee het model bezig is.