Como usar o GPlanSiS Office
O GPlanSiS Office mostra seus agentes do Claude Code e do Codex trabalhando num prédio de escritórios em 3D. Cada projeto aberto vira uma sala, cada sessão vira uma pessoa, e você vê de relance quem está trabalhando e quem está esperando por você.
Visão geral
O prédio tem um térreo comum e andares de salas:
- No térreo ficam a recepção, o café, o lounge (TV, videogame e pingue-pongue), os banheiros e a área de jogos.
- Cada andar de cima tem quatro salas de vidro com seis mesas.
- Quando você abre uma sessão num projeto novo, uma sala é montada. Quando a última sessão termina, a sala vira área aberta de coworking e o prédio perde andares que ficaram vazios.
Primeiros passos
Só para conhecer: modo demonstração
A página publicada e o arquivo index.html aberto direto no navegador rodam em demonstração: projetos, pessoas e contas inventados, com o dia simulado desde as 8h. Nada do seu computador é lido. Na URL, ?speed=3 acelera o tempo e ?sessions=10 muda quantas sessões aparecem.
Com as suas sessões reais
Você precisa do Node.js 20 ou mais novo e do Claude Code (ou do Codex) instalado.
- Descompacte o pacote
gplansis-office.zipnuma pasta fixa e abra o Terminal nela. - Inicie o servidor:
npm start # abre em http://localhost:4848 - Abra
http://localhost:4848no navegador. Em seguida, abra oclaudeou ocodexem qualquer projeto: a pessoa entra pela porta do prédio, pega o elevador e senta à mesa. - Para aprovar pedidos, responder perguntas e mandar mensagens pelo escritório, instale os hooks:
npm run hooks:install # permissões + mensagens npm run hooks:install -- --uso # também mostra o uso de 5h e da semana
As sessões que já estavam abertas passam a usar os hooks quando forem reabertas.
127.0.0.1 e mascara tokens e senhas antes de mostrar qualquer texto.Instalar como app
Aberto pelo servidor local, o GPlanSiS Office é um PWA: pode ser instalado e abre numa janela própria, com ícone no Dock, na barra de tarefas ou na tela inicial. A página publicada de demonstração funciona como site comum e não oferece instalação.
No computador (Chrome ou Edge)
- Abra
http://localhost:4848. - Clique no botão de instalar da barra do escritório (seta para baixo) ou no ícone de instalar na barra de endereço.
- Confirme em Instalar.
No Mac com Safari
- Abra o endereço do escritório.
- Menu Arquivo › Adicionar ao Dock.
No Android (Chrome)
- Abra o endereço do escritório (veja Usar no celular).
- Toque em Mais › Instalar como app dentro do escritório, ou no menu ⋮ do Chrome em Instalar app.
No iPhone e no iPad (Safari)
- Abra o endereço do escritório no Safari.
- Toque em Compartilhar e depois em Adicionar à Tela de Início.
- Abra pelo novo ícone: o app ocupa a tela inteira, sem a barra do Safari.
Usar no celular
Por padrão, o servidor só aceita conexões do próprio computador. Para abrir no celular, ligue o acesso pelo celular. Ele abre uma segunda porta, com HTTPS e chave de acesso, e mantém a porta principal fechada para a rede.
Na mesma rede Wi-Fi
- No computador, rode:
npm run remote:setup # libera aprovar pedidos e mandar mensagens npm startO comando mostra o endereço (por exemplohttps://192.168.0.12:4849), a chave de acesso e um link direto já com a chave. - No celular, abra
https://<endereço>:4849/ca.crte instale o certificado:- iPhone: Ajustes › Perfil Baixado › Instalar. Depois, Ajustes › Geral › Sobre › Ajustes de Confiança de Certificados, e ligue o GPlanSiS Office.
- Android: Configurações › Segurança › Criptografia e credenciais › Instalar certificado › Certificado CA.
- Abra o endereço, digite a chave e instale o app (veja Instalar como app). A sessão no aparelho dura 30 dias.
localhost, nomes .local e IPs de rede privada. Mesmo que a chave dessa CA vazasse, ela não serviria para se passar por outros sites.O que dá para fazer pelo celular
Opção do remote:setup | O que libera |
|---|---|
--permitir=permissions | Aprovar e negar pedidos e responder perguntas |
--permitir=permissions,messages | Também mandar mensagens aos agentes (padrão) |
--permitir=permissions,messages,terminal | Também ler o terminal e o histórico das conversas |
Para trocar a chave e desconectar todos os aparelhos: npm run remote:setup -- --nova-chave. Para desligar: npm run remote:off. Depois de cada mudança, reinicie com npm start.
Fora de casa
Use o Tailscale no computador e no celular. Os IPs 100.x do Tailscale já são aceitos pelo certificado. Rode npm run remote:setup de novo com o Tailscale ligado e use o endereço 100.x.x.x:4849 que ele mostrar. Nunca exponha a porta 4848 na internet.
Publicar no seu domínio
Para abrir o escritório de qualquer lugar em office.gplansis.com, rode o servidor na mesma máquina em que os agentes trabalham, por exemplo uma VM em que você abre o claude no tmux. O Traefik cuida do HTTPS.
- Na VM, gere a chave de acesso. Ela aparece uma única vez:
npm run key
- Suba o serviço com a porta interna ligada:
docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d --build
- Copie
deploy/traefik/office.ymlpara a configuração dinâmica do Traefik e ajuste o resolver de certificado. - Abra os agentes como no terminal:
./scripts/agente.sh ~/projetos/app-mobile
| Endereço | Quem acessa |
|---|---|
/, /demo, /guia | Qualquer visitante: página principal, demonstração e este guia. |
/app | Só quem tem a chave: o escritório real. |
O passo a passo completo, com firewall, testes de aceite, backup e como voltar atrás, está no arquivo DEPLOY.md do pacote.
Conhecendo a tela
| Área | O que mostra |
|---|---|
| Barra de ferramentas | Contadores (salas, agentes, trabalhando, subagentes, shells e quem precisa de você), uso de 5h e da semana de cada conta, e os botões novo agente, histórico, timelapse, Meu dia, instalar, guia, aparência, configurações e ajuda. |
| Salas (à esquerda) | Busca, filtro por conta e a lista de salas com as pessoas de cada uma. A bolinha mostra o estado; o relógio mostra há quanto tempo alguém espera. O botão >_ abre o terminal. |
| Prédio (centro) | O gêmeo digital em 3D. À esquerda fica o seletor de andares; no canto, o zoom. |
| Inspetor (à direita) | Abre ao clicar numa pessoa ou sala. Mostra a atividade atual, o pedido pendente, as tarefas, os subagentes, o jeito de ser, a linha do tempo e os números da sessão. |
| Atividade (embaixo) | O que acabou de acontecer no prédio inteiro. Clique numa linha para ir até a pessoa. |
No celular, as mesmas áreas viram abas: Prédio, Salas, Atividade, Meu dia e Mais. Em Mais ficam o uso das contas, o histórico, o timelapse, a aparência, as configurações e este guia. O inspetor sobe de baixo; arraste a alça para baixo para fechar.
Navegar no prédio 3D
| Ação | Mouse ou trackpad | Toque |
|---|---|---|
| Girar em volta do prédio | Arrastar | Um dedo |
| Mover a câmera | Botão direito ou Shift + arrastar | Dois dedos |
| Zoom | Rolar | Pinça |
| Selecionar pessoa ou sala | Clique | Toque |
| Seguir uma pessoa de perto | Clique | Toque |
O seletor de andares escolhe o que você vê:
- Todos mostra o prédio inteiro.
- Um andar escolhido corta os de cima para você ver por dentro. Cada botão mostra quantas pessoas estão ali e um número laranja quando alguém precisa de você.
- O botão de separar andares afasta os andares, o que ajuda na visão do prédio inteiro.
Dia e noite seguem a hora local: o sol muda de lugar e, à noite, as salas acesas se destacam.
O que cada agente está fazendo
| Estado | O que você vê |
|---|---|
| Trabalhando | Sentado digitando, com o monitor aceso e um balão com a atividade: ler, editar, terminal, testes, pesquisa. |
| Precisa de você | Levanta a mão, com o monitor piscando em laranja, e aparece um aviso. Espera uma permissão ou a resposta a uma pergunta. |
| Esperando o shell | Terminou o turno com um comando rodando (testes, build, deploy). Come pipoca; depois de 3 minutos cruza os braços e gira na cadeira; aos 25 minutos cochila. No fim, confete ou nuvem de chuva. |
| Livre | Passeia: café, bebedouro, espelho, sofá. Com colegas livres, assiste à TV, joga videogame e pingue-pongue, conversa no café ou disputa jokenpô. Depois de 10 minutos parado, cochila. |
| Subagente | Tem uma marquinha azul no peito. Ao terminar, leva o resultado até quem o chamou e vai embora. |
| Eventos do GitHub | PR aberto ou mergeado e release publicada fazem festa com confete na sala. CI vermelho acende uma luz vermelha girando até um CI verde. |
Responder pedidos
Com os hooks instalados, quando um agente pede permissão para rodar um comando, editar um arquivo ou abrir uma página, aparece um aviso com Responder. O inspetor mostra o comando ou a diferença do arquivo.
- Aprovar: libera só este pedido.
- Aprovar e não perguntar de novo: aplica a regra que o próprio Claude Code sugeriu (por exemplo
Bash(npm test:*)). - Negar…: aceita um motivo, que vai para o agente, e pode interromper o agente.
- Responder no terminal: devolve o pedido para o terminal.
Perguntas do agente aparecem com as opções e uma resposta livre em Outra. O pedido continua aberto no terminal ao mesmo tempo, e vale a primeira resposta. A tecla P (ou o contador laranja) leva ao próximo pedido.
localhost:4848 também consegue responder, inclusive um agente rodando um comando. Em computador compartilhado, instale com npm run hooks:install -- --sem-permissoes --sem-mensagens.Mandar mensagens
No inspetor de uma pessoa (ou no rodapé do terminal), escreva e tecle Enter. Shift+Enter quebra a linha.
- A mensagem entra na sessão como uma nova instrução quando o agente termina o turno atual.
- O estado da mensagem aparece como na fila ou entregue.
- Uma sessão que já estava parada recebe a mensagem no próximo fim de turno.
Terminal e histórico
Abrir terminal (ou a tecla T) mostra a conversa da sessão como o Claude Code mostra: pedidos, respostas, cada ferramenta e seu resultado, ao vivo.
- Use as abas para ver as outras pessoas da mesma sala.
- Ctrl/⌘+F busca na conversa, ignorando acentos.
- O filtro mostra tudo, só os pedidos ou nada de ferramentas.
O histórico (ícone de relógio) lista as sessões dos últimos 7 dias, agrupadas por dia e com busca.
Timelapse e Meu dia
O timelapse (L) repassa o dia em alta velocidade (60×, 180× ou 600×), com o gráfico de presença e as marcas de pico. Arraste na linha do tempo para pular e use Voltar ao vivo para sair.
Meu dia (M) mostra onde o tempo foi:
- quanto os agentes trabalharam e, em destaque, quanto esperaram por você;
- a maior espera do dia, os pedidos, os tokens e o custo;
- gráficos por hora, por projeto e por conta. Cada gráfico também abre como tabela.
Personagens e salas
No inspetor de uma pessoa principal, o lápis abre o editor de personagem, com nome, pele, cabelo, barba, olhos, roupa, sapatos e acessório, e uma prévia em 3D. O personagem fica fixo para aquele projeto. No inspetor de uma sala, você pode renomear a sala. Deixar o nome em branco volta ao nome da pasta.
Configurações
| Opção | Para que serve |
|---|---|
| Aparência | Automática, clara ou escura. O botão de meia-lua na barra alterna rápido. |
| Separar os andares e Sombras | Visual do prédio. Desligue as sombras se o computador ou o celular ficar lento. |
| Dia e noite | Hora local, sempre dia ou sempre noite. |
| Decoração sazonal | Nenhuma, pelo calendário, Natal ou Halloween. |
| Nomes, balões e passeios | O que aparece sobre as pessoas e o quanto as livres circulam pelo prédio. |
| Sons e notificações | Sons discretos sintetizados e aviso do sistema quando alguém precisar de você com a aba escondida. |
| Demonstração | Mostra pessoas inventadas junto com as reais, com velocidade e número de sessões ajustáveis. |
Atalhos de teclado
| / | Buscar | P | Próximo pedido |
| F | Seguir a pessoa selecionada | T | Terminal |
| L | Timelapse | M | Meu dia |
| O ou Home | Prédio inteiro | PgUp PgDn | Subir e descer de andar |
| Q E | Girar a câmera | Setas ou WASD | Mover a câmera |
| + − | Zoom | [ ] | Esconder salas ou atividade |
| Esc | Fechar e limpar seleção | ? | Legenda e atalhos |
Privacidade e segurança
- Só leitura: o servidor nunca escreve nas pastas do Claude Code. Quem altera o
settings.jsoné o instalador de hooks, e sempre com backup antes. - Só local por padrão: a porta 4848 escuta em
127.0.0.1. Endereços estranhos (DNS rebinding) e pedidos vindos de outros sites (CSRF) são recusados. - Segredos mascarados:
Bearer,sk-…,ghp_…, chaves AWS, JWT e senhas em URL viram***antes de chegar à tela. - Acesso pelo celular:
- Fica numa porta separada, com HTTPS e chave. Só o hash da chave é guardado.
- A sessão é um cookie assinado, protegido contra leitura por scripts e contra uso por outros sites.
- Depois de 5 chaves erradas, cada nova tentativa espera de 1 segundo a 5 minutos.
- O hook de permissão e o editor de personagem nunca funcionam pela rede.
Problemas comuns
O prédio não aparece
O 3D precisa de WebGL. Ative a aceleração por hardware nas configurações do navegador ou use outro navegador. A lista de salas, o inspetor, o terminal e o Meu dia continuam funcionando.
Abri o Claude Code e ninguém chegou
Confira se o servidor está rodando (npm start) e se a página foi aberta por http://localhost:4848, e não pelo arquivo. Sem o registro de sessões do Claude Code, uma sessão só conta como aberta se o transcript foi escrito nos últimos 20 minutos (variável OFFICE_OPEN_MIN).
Os pedidos não aparecem no escritório
Rode npm run hooks:status. Os hooks só valem para sessões abertas depois da instalação. O pedido só é desviado quando há uma página do escritório aberta.
O uso de 5h e da semana mostra "—"
Instale com npm run hooks:install -- --uso. Se a sua versão do Claude Code não enviar esses números ao statusline, eles continuam vazios.
O celular diz que a conexão não é segura
Instale e confie no certificado (passo 2 de Usar no celular). Se o IP do computador mudou, rode npm run remote:setup de novo e reinicie: o certificado é refeito com a mesma CA, então não precisa reinstalar no celular.
No iPhone não aparece "Instalar"
No iPhone, a instalação é sempre pelo Safari, em Compartilhar › Adicionar à Tela de Início.
Ficou lento
Desligue as sombras em Configurações e use o seletor de andares para ver um andar por vez. No celular, as abas Salas e Atividade pausam o 3D para economizar bateria.
GPlanSiS Office 1.2.0. Inspirado no projeto Habblaud (MIT); interface, 3D e código próprios. Usa three.js r128 (MIT).