Navegador integrado: veja o que os agentes fizeram e aponte o que corrigir

O que é o navegador integrado do Tallos?

O navegador integrado do Tallos é um navegador baseado em Chromium que fica num painel dentro de cada workspace. Tem barra de endereço com histórico, voltar, avançar, recarregar e recarregar sem cache, busca na página, devtools e abas próprias.

As abas pertencem ao workspace. Cada workspace paralelo roda seu próprio servidor de dev na sua própria branch, então cada um tem suas abas. Trocou de workspace, o Tallos restaura as abas e a rolagem daquele workspace. Você não confunde a prévia da branch de um agente com a de outro.

Coloque o navegador ao lado do terminal do agente e de um diff e o ciclo inteiro cabe numa tela: o agente edita, a página recarrega, você confere.

Como envio um elemento da página para um agente?

Use as ferramentas de design do navegador. Em vez de descrever o bug em palavras ou colar um print da página inteira, você aponta o elemento exato e o Tallos empacota o contexto que o agente precisa.

1. 1

   Capturar elemento da página

   Ative o modo de captura e passe o mouse ou clique num elemento. Aperte C para copiar o contexto para o agente ou S para tirar um screenshot dele.

2. 2

   Anotar elemento da página

   Clique num elemento, marque como Alteração ou Pergunta e escreva o que o agente deve fazer. Repita em quantos elementos quiser e clique em Enviar feedback para um agente.

3. 3

   Desenhar no screenshot

   Capture a página e marque com caneta, seta, retângulo, elipse, marca-texto ou texto, depois copie a marcação para o prompt do agente.

Como corrijo um bug de interface com o navegador integrado?

1. 1

   Abra a página

   Abra o navegador do workspace na página com o bug, normalmente o seu servidor de dev local.

2. 2

   Aponte o elemento

   Anote o elemento quebrado e escreva a correção: "esse padding está apertado, deixe igual aos cards de cima".

3. 3

   Envie

   Mande o feedback para o agente daquele workspace. Ele recebe marcação, estilos e screenshot exatamente do que você apontou.

4. 4

   Confira o resultado

   O agente edita o código e o servidor de dev recarrega a página. Se ainda estiver errado, aponte de novo.

5. 5

   Revise e entregue

   Ficou certo? Leia a mudança na revisão de diff e faça o commit.

É por esse ciclo que o navegador precisa estar dentro do ambiente. É o jeito mais rápido de guiar um agente em front-end, e boa parte de como se faz vibe coding sem perder o controle do resultado.

Aponte, envie, entregue

Abra um workspace, suba seu servidor de dev e mande seu primeiro elemento para um agente.

Baixar o Tallos →

O que são perfis de navegador?

Um perfil de navegador é uma identidade separada com armazenamento próprio: cookies, local storage e cache. Um perfil nunca vaza para outro, então dá para testar como admin numa aba e como cliente comum em outra.

• Crie perfis em Configurações → Navegador, se quiser já com cookies e tamanho de viewport.
• Importe cookies do Chrome, do Edge ou de outros navegadores para você e seus agentes reaproveitarem logins. O Tallos só substitui os cookies dos domínios importados.
• Login do Google não é importado; entre na conta Google direto dentro do Tallos.
• Os agentes herdam o perfil. Os comandos de navegador que o agente roda usam o perfil ativo da aba.

Os agentes de IA conseguem usar o navegador integrado sozinhos?

Conseguem. Os agentes pilotam o mesmo navegador que você vê pela CLI `tallos`. O ciclo é snapshot, ação, snapshot de novo: tallos snapshot devolve a árvore de acessibilidade com referências de elementos, e o agente clica, preenche e aperta teclas pela referência.

tallos goto --url http://localhost:3000/login
tallos snapshot              # devolve refs como e1, e2, e3
tallos fill --element e1 --value "[email protected]"
tallos click --element e3
tallos set device --name "iPhone 12"
tallos screenshot --format png

O Tallos instala a skill tallos-cli nos agentes que encontra no seu computador, então eles já conhecem esses comandos. Para apps nativos fora do Tallos, os agentes usam a skill computer-use.

O que mais o navegador integrado faz?

• Emulação de viewport. Defina um viewport personalizado na aba para testar layouts responsivos; a página enxerga o tamanho emulado em window.innerWidth e nas media queries.
• Roteamento de links. Escolha se links do terminal, do Markdown e do editor abrem no Tallos ou no navegador do sistema. Segure Shift no clique com modificador para inverter só naquele link.
• Novas abas ficam dentro. Links com target=_blank e popups comuns abrem como novas abas do Tallos, no mesmo perfil.
• Barra de downloads. Downloads ativos e recentes aparecem abaixo da barra de ferramentas, com abrir, mostrar na pasta e cancelar.
• Workspaces remotos. Nos workspaces remotos, você escolhe se o tráfego do navegador passa pelo host SSH ou por este computador.