Uma Interface Web Conveniente para o Agente de IA de Console pi

Trabalhar no terminal é ótimo enquanto o contexto cabe em uma tela. O agente de codificação de console pi é excelente para edições rápidas, mas uma sessão de depuração de uma hora se transforma em um caos de chamadas de função, código gerado e mensagens de erro. Boa sorte para encontrar o ponto nesse fluxo onde o modelo se desviou, ou lembrar qual arquivo ele estava editando vinte minutos atrás.

O desenvolvedor agegr resolveu esse problema de uma forma muito prática: escreveu um shell web local chamado pi-web. A ferramenta lê os arquivos de log do agente pi e inicia um painel visual conveniente no navegador.

O que é pi-web e como funciona

Em seu núcleo, pi-web é um wrapper em torno do agente de console pi. Em vez de reescrever o próprio agente, o autor criou um frontend que analisa arquivos .jsonl do diretório ~/.pi/agent/sessions.

A aplicação é executada completamente localmente. Você pode iniciá-la sem qualquer instalação prévia com um único comando:

npx @agegr/pi-web@latest

O servidor será iniciado na porta 30.141 e abrirá automaticamente uma aba no navegador. Se a porta estiver ocupada ou você precisar de acesso apenas local, os parâmetros são facilmente alterados via flags:

pi-web --port 8080 --hostname 127.0.0.1

O que muda no fluxo de trabalho

O principal problema dos diálogos de IA no console é a perda de estrutura. No terminal, tudo parece uma parede sólida de texto. A interface web divide a mesma sessão em blocos claros e visuais.

Ramificação visual de sessão

Quando o agente de IA começa a chegar a becos sem saída, no console você precisa redefinir o diálogo ou gerar um histórico longo de tentativas. Pi-web tem dois caminhos para experimentação segura:

• Fork cria um arquivo de sessão .jsonl separado. Você pode seguir um novo caminho enquanto preserva o resultado antigo.
• Editar a partir de uma mensagem selecionada cria um branch adicional dentro da mesma sessão.

Visualização de arquivos ao lado do chat

Enquanto o agente edita código ou escreve documentação, você pode acompanhar as alterações diretamente no painel adjacente. O explorador de projetos fica à esquerda, e a área de visualização à direita. O visualizador integrado mostra não apenas arquivos fonte e diffs. Ele manipula imagens, áudio, PDFs e documentos DOCX com facilidade.

Controle transparente de tokens e configurações

A barra superior exibe tokens gastos, custo da sessão e status de compressão de contexto. Sem mais adivinhações sobre quanto dos seus limites foi utilizado e qual prompt de sistema está ativo no momento.

O gerenciamento de modelos e chaves de API também foi movido de arquivos JSON do console para uma interface gráfica. Através dos painéis de configurações, você pode alterar o modelo padrão, testar conexões e ativar/desativar habilidades do agente.

Suporte a Git worktrees

Se você usa Git worktrees para trabalho paralelo em múltiplos branches, a barra lateral do pi-web pode trocar ambientes rapidamente. O explorador de arquivos e novas sessões se adaptam automaticamente ao checkout selecionado.

Como a arquitetura é projetada

O projeto é escrito em TypeScript usando o framework Next.js. A estrutura do repositório é simples e direta.

A pasta app/api contém endpoints para trabalhar com o agente:

• agent/ gerencia o lançamento de sessões e streaming de eventos via Server-Sent Events (SSE).
• files/ gerencia leitura de arquivos, diffs e rastreamento de alterações.
• models-config/ e skills/ gerenciam configurações do agente.

A segurança é tratada pelo módulo lib/file-access.ts. Ele restringe o gerenciador de arquivos ao projeto atual e aos diretórios envolvidos na sessão. Você não conseguirá ler um arquivo aleatório do sistema através da interface.

Quem achará este projeto útil

Se você usa ativamente o agente de codificação pi, definitivamente deveria experimentar o pi-web. O projeto resolve o principal problema das ferramentas CLI — a falta de clareza visual.

A interface se torna especialmente conveniente em dois casos:

• Quando está depurando tarefas complexas que exigem retornar frequentemente a passos anteriores e comparar variantes de soluções.
• Quando trabalha com arquivos de mídia e documentação, quando a capacidade de visualizar resultados rapidamente no navegador economiza tempo.

A ferramenta está em desenvolvimento ativo: já tem mais de 16.000 estrelas no GitHub e commits recentes. Você só precisa do Node.js e do agente pi instalado para executá-lo, então a configuração literalmente levará alguns minutos.