3 projetos open source para ver o Claude Code trabalhando ao vivo

Quando o Claude Code trabalha, quase tudo acontece dentro do terminal. Você vê o resultado final, mas não vê o caminho: quais arquivos ele leu, quais comandos rodou e quando chamou subagentes. Alguns desenvolvedores criaram painéis visuais para mostrar isso ao vivo.

Um post do desenvolvedor André Vale (@andrevale.dev) mostra uma tela que junta dois projetos open source: um escritório com os agentes e um grafo ao vivo das ações de cada um. O post não diz quais são os dois projetos, então não dá para afirmar com certeza qual é a combinação dele. Por isso, esta é uma seleção própria de três projetos abertos que fazem coisas parecidas e que foram conferidos nos repositórios oficiais.

O primeiro é o Pixel Agents, de Pablo de Lucca, com licença MIT. Cada sessão do Claude Code vira um personagem em pixel art num escritório pequeno. O personagem senta na mesa, digita quando o agente edita arquivos, lê quando ele pesquisa e mostra um balão quando espera uma resposta sua. Subagentes aparecem como personagens separados, e você pode editar o layout do escritório.

O segundo é o Claude Office Visualizer, de Paul Robello, também com licença MIT. O agente principal vira o chefe e os subagentes viram funcionários numa simulação de escritório em pixel art. Há quadro branco com vários modos, painel de status do git e uma visão de prédio com vários andares. Ele roda com um servidor local em Python e uma interface web.

O terceiro é o Agent Flow, de Simon Patole, com licença Apache 2.0. Em vez de escritório, ele mostra um grafo interativo: o agente principal, os subagentes e cada chamada de ferramenta aparecem como nós, com linha do tempo, transcrição e mapa dos arquivos mais acessados. É a opção mais próxima do grafo ao vivo citado no post.

Para instalar o Pixel Agents, você precisa do Claude Code instalado e do Node.js 20 ou mais novo. Dentro da pasta do seu projeto, rode npx pixel-agents. O comando escolhe uma porta local livre e mostra o endereço para abrir no navegador. Também existe a versão como extensão do VS Code, que você instala pelo Marketplace.

Para o Agent Flow, o caminho mais curto é rodar npx agent-flow-app e abrir o navegador. Depois inicie o Claude Code em outro terminal e os eventos aparecem sozinhos. Há também a extensão para VS Code e a instalação a partir do código-fonte com pnpm. Para o Claude Office, o README manda clonar o repositório, rodar make install-all e depois make dev-tmux, e abrir localhost:3000. Ele exige Python 3.13 ou mais novo, Node.js 20 ou mais novo e uv.

Os três recebem os eventos pelos hooks do Claude Code. Hooks são ações que o Claude Code dispara em momentos do seu ciclo, como início de sessão, uso de ferramenta e início e fim de subagente. A documentação oficial do Claude Code diz que eles ficam em arquivos de configuração como ~/.claude/settings.json e podem ser comandos de shell ou chamadas HTTP. As ferramentas instalam esses hooks para você.

Cuidados. Instalar os hooks altera o seu settings.json do Claude Code, então vale conferir o que foi adicionado e saber como remover. No Claude Office há make hooks-uninstall. No Pixel Agents, o liga e desliga fica nas configurações. Os eventos carregam informações das suas ferramentas e arquivos, então mantenha tudo no endereço local e não exponha a porta na rede. O Agent Flow, na versão do npx, envia telemetria anônima por padrão, que você desliga com a variável AGENT_FLOW_TELEMETRY=false. No Claude Office, o resumo com nomes de agentes é opcional e usa o Claude.

Resumo da escolha: quer o clima de escritório com personagens, vá de Pixel Agents ou Claude Office. Quer ver o encadeamento exato das ações, vá de Agent Flow. Os projetos mudam rápido, então confira sempre o README do repositório antes de instalar.