Repolode
Enviar
paulrobello

paulrobello/claude-office

Escritório em pixel art que anima sessões do Claude Code em tempo real, mostrando o agente principal como chefe e os subagentes como funcionários.

Ver no GitHub
Estrelas
602
Forks
138
Issues abertas
2
Último commit
anteontem

O que é?

O Claude Office Visualizer transforma a atividade do Claude Code em um escritório animado em pixel art. O Claude principal aparece como um personagem "chefe" que delega tarefas, e cada subagente aparece como um "funcionário" que circula pelo escritório enquanto executa tarefas. Hooks instalados no Claude Code enviam eventos do ciclo de vida para um backend FastAPI, que envia o estado por WebSocket para um frontend em Next.js e PixiJS.

Além da visualização principal do escritório, o projeto oferece um Command Center que reúne os chefes de todas as sessões ativas em uma única visão geral, além de uma visualização do prédio com vários andares e escritórios em cada um. Um quadro branco com vários modos exibe listas de tarefas, uso de ferramentas, tarefas em segundo plano e um quadro kanban. O projeto também inclui um plugin do OpenCode que envia eventos do OpenCode para o mesmo backend e pode ser executado em um container Docker.

Recursos principais

  • 01Escritório animado em que o agente principal e os subagentes aparecem como personagens chefe e funcionário
  • 02Visão geral do Command Center com todas as sessões ativas do Claude Code organizadas em colunas de status
  • 03Visualização do prédio com vários andares, escritórios em cada um e alternância entre sessões
  • 04Quadro branco com 12 modos, incluindo lista de tarefas, gráfico de uso de ferramentas e kanban
  • 05Acompanhamento da janela de contexto, representada como uma lata de lixo que enche conforme o contexto aumenta
  • 06Suporte a plugin do OpenCode e implantação com Docker

Casos de uso

  • Manter uma visão rápida de vários terminais do Claude Code que precisam de atenção ou ainda estão trabalhando
  • Acompanhar como um agente principal delega tarefas a subagentes durante uma tarefa de programação complexa
  • Demonstrar ou ensinar fluxos de trabalho com agentes usando uma interface visual e animada
  • Executar o visualizador como um serviço Docker compartilhado, alimentado por hooks de ferramentas locais

Início rápido

  1. 1

    Clone o repositório

    git clone https://github.com/paulrobello/claude-office.git
  2. 2

    Entre no diretório do projeto

    cd claude-office
  3. 3

    Instale todos os componentes (backend, frontend e hooks)

    make install-all
  4. 4

    Inicie os servidores de desenvolvimento no tmux e, em seguida, abra http://localhost:3000

    make dev-tmux

Antes de usar

  • Requer Python 3.13 ou superior, Node.js 20 ou superior, uv e uma configuração do Claude Code CLI ou do OpenCode.
  • Os resumos de nomes e tarefas com IA precisam de um token OAuth do Claude Code; sem ele, os IDs brutos dos agentes são exibidos.

Em coleções

Ferramentas, skills e plugins para Claude CodeFrameworks e apps de agentes de IA open sourceDiagramas, gráficos e visualizações animadas

Tópicos

#claude-code#ai-agents#visualization#pixi-js#nextjs#fastapi#websocket#developer-tools

Perguntas frequentes

O que é claude-office?
Escritório em pixel art que anima sessões do Claude Code em tempo real, mostrando o agente principal como chefe e os subagentes como funcionários. O Claude Office Visualizer transforma a atividade do Claude Code em um escritório animado em pixel art. O Claude principal aparece como um personagem "chefe" que delega tarefas, e cada subagente aparece como um "funcionário" que circula pelo escritório enquanto executa tarefas. Hooks instalados no Claude Code enviam eventos do ciclo de vida para um backend FastAPI, que envia o estado por WebSocket para um frontend em Next.js e PixiJS.
claude-office é gratuito? Qual é a licença?
claude-office é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
claude-office ainda é mantido?
Manutenção ativa. O último commit de claude-office foi em 5 de nov. de 2026.
Para que posso usar claude-office?
Manter uma visão rápida de vários terminais do Claude Code que precisam de atenção ou ainda estão trabalhando Acompanhar como um agente principal delega tarefas a subagentes durante uma tarefa de programação complexa Demonstrar ou ensinar fluxos de trabalho com agentes usando uma interface visual e animada Executar o visualizador como um serviço Docker compartilhado, alimentado por hooks de ferramentas locais
Como instalar claude-office?
Clone o repositório: git clone https://github.com/paulrobello/claude-office.git Entre no diretório do projeto: cd claude-office Instale todos os componentes (backend, frontend e hooks): make install-all Inicie os servidores de desenvolvimento no tmux e, em seguida, abra http://localhost:3000: make dev-tmux
Onde consigo claude-office?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/paulrobello/claude-office

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados