Como Transformar Tarefas do Claude Code em um Quadro Kanban Visual

Quando executei o Claude Code pela primeira vez para refatorar um monolito, o terminal rapidamente se transformou em uma waterfall infinita de logs. O modelo alegremente decompunha a tarefa em uma dúzia de etapas, executava testes, corrigia código e periodicamente ficava preso em dependências. Descobrir, naquele caos de output, qual subtarefa estava sendo executada no momento e o que a estava bloqueando tornou-se uma missão própria.

Acompanhar isso no terminal é inconveniente. O repositório claude-task-viewer resolve exatamente esse problema ao criar um dashboard web local nos formatos de quadro Kanban e linha do tempo.

Sobre o Que É Este Projeto

claude-task-viewer é uma interface local leve para observar tarefas do Claude Code. A ideia central do autor é simples: observação em vez de controle. O utilitário não tenta definir tarefas ou alterar status de tickets em nome da rede neural. Ele apenas lê o estado da sessão e visualiza o grafo de subtarefas que o agente gera.

A ferramenta é adequada para desenvolvedores que executam ativamente o Claude Code em segundo plano em tarefas longas e não querem ficar alternando constantemente para a janela do terminal para verificar o progresso.

Principais Funcionalidades na Prática

A interface parece minimalista, mas cobre todos os cenários básicos de acompanhamento de trabalho.

Status Claro das Tarefas e Dependências

O dashboard mostra colunas com status: pendente, em progresso e concluído. Se uma tarefa bloqueia outra, o card exibe os relacionamentos blockedBy e blocks. Isso ajuda a ver imediatamente o caminho crítico e entender por que o agente ficou preso em uma etapa específica. O card também mostra o campo activeForm, onde você pode ver a ação exata atual do modelo naquele exato momento.

Kanban e Linha do Tempo como Diagrama de Gantt

No cabeçalho, você pode alternar a visualização do quadro para uma linha do tempo. As tarefas são organizadas como barras horizontais desde o momento da criação até a última atualização. O eixo temporal escala automaticamente: segundos, minutos ou horas dependendo da duração da sessão. Passar o cursor mostra o timestamp exato e o tempo total de execução.

Alertas Sonoros e Notificações na Área de Trabalho

Quando o Claude conclui uma tarefa longa, o navegador reproduz um som de dois tons e envia uma notificação do sistema. Clicar na notificação leva você diretamente ao card da sessão. Isso é conveniente quando o agente executa um build ou suite de testes por 15-20 minutos enquanto você está escrevendo documentação em outra aba.

Arquivamento Automático e Busca Rápida

Sessões sem tarefas ativas que não foram alteradas por mais de uma semana são automaticamente movidas para uma seção de arquivo colapsada. O quadro não fica poluído com experimentos antigos. Ao mesmo tempo, a busca fuzzy integrada pesquisa nomes de sessões, descrições de tarefas e caminhos de projetos até mesmo dentro do arquivo.

Como Funciona a Troca de Dados

Por baixo do capô, não há bancos de dados pesados. O Claude Code armazena tarefas localmente no diretório ~/.claude/tasks/, onde cada sessão tem sua própria pasta com arquivos JSON:

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

A estrutura típica de um arquivo de tarefa fica assim:

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

O backend em Node.js monitora o sistema de arquivos e transmite as alterações para o navegador via Server-Sent Events (SSE). Sem polling constante ou atualização manual da página: assim que o Claude Code cria ou edita um arquivo JSON, o card no quadro se move instantaneamente.

Uma API REST simples é fornecida para interagir com a interface. Através dela, você pode solicitar uma lista de sessões, visualizar dados brutos ou excluir uma tarefa travada:

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

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

Como Iniciar

Você pode executar o utilitário sem instalação prévia via npx:

npx claude-task-viewer

Após o início, o servidor será aberto em http://localhost:3456.

Se a porta padrão estiver ocupada ou você tiver vários perfis do Claude, os parâmetros são passados via flags de ambiente:

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

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

Para compilar a partir do código-fonte, basta clonar o repositório:

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

Você pode controlar o quadro com o teclado: a tecla ? traz a ajuda, D exclui o card selecionado com verificação de dependências, e Esc fecha as janelas modais.

Em Resumo

claude-task-viewer faz exatamente uma coisa: traz transparência aos processos do Claude Code sem complexidade desnecessária. Não há configurações sobrecarregadas ou tentativas de impor seu próprio fluxo de gerenciamento de projeto.

Se você regularmente atribui tarefas complexas ao agente e está cansado de squintar nos logs brutos no console, vale a pena manter este utilitário aberto em uma segunda aba do navegador. Ele economiza atenção e mostra imediatamente com o que o modelo está ocupado.