Navegador do Agente

Use agent-browser para validação de pré-visualização local do OpenDesign: inspecione o estado renderizado, clique/digite quando solicitado e capture uma captura de tela quando evidências visuais forem importantes. Mantenha o navegador local como prioridade, a menos que o usuário solicite explicitamente navegação externa.

Quando o prompt de execução contiver contexto de workspace selecionado, prefira o URL/título da aba browser selecionada como destino. Trate frases do usuário como "esta página", "o navegador atual", "aba do lado direito", "extrair o logo", "obter a paleta", "tirar uma captura de tela de um elemento" ou "verificar OG/a11y" como solicitações sobre essa aba selecionada, a menos que o usuário nomeie outro destino.

Requisitos

Verifique a CLI antes de qualquer trabalho no navegador:

command -v agent-browser

Se estiver faltando, pare e diga ao usuário para instalá-la:

npm i -g agent-browser
agent-browser install

Não substitua a CLI por scripts de navegador ad hoc.

Higiene de Contexto

Nunca imprima guias upstream completas no chat ou na saída da ferramenta. Salve-as em arquivos temporários e extraia apenas as linhas relevantes para a tarefa:

AGENT_BROWSER_CORE="${TMPDIR:-/tmp}/agent-browser-core.$$.md"
agent-browser skills get core > "$AGENT_BROWSER_CORE"
rg -n "cdp|connect|snapshot|screenshot|click|type|wait|get title|get url" "$AGENT_BROWSER_CORE"

Use agent-browser skills get core --full apenas quando necessário e redirecione-o para um arquivo temporário da mesma forma.

Extração de Contexto do Navegador

Para abas de navegador OpenDesign selecionadas e tarefas do tipo "uso de navegador"/"estilo de harness de navegador", colete primeiro as menores evidências úteis:

1. Confirme o destino com agent-browser get title e agent-browser get url.
2. Capture agent-browser snapshot antes de qualquer extração ou clique.
3. Para evidências visuais, salve uma captura de tela da página e, quando o guia principal expuser um comando de captura de tela de elemento, capture o elemento específico em vez de uma página inteira cortada.
4. Para logos, fontes, cores, imagens, código de movimento, metadados OG, estrutura da página e verificações de acessibilidade, prefira evidências DOM/CSS/acessibilidade do navegador anexado em vez de adivinhar apenas a partir da captura de tela renderizada.
5. Se o contexto OpenDesign selecionado forneceu apenas um URL/título e nenhuma ferramenta de automação de navegador estiver anexada, diga isso diretamente e não invente os internos da página.

Salve as evidências de design extraídas como notas compactas ou ativos no projeto quando o usuário estiver construindo a partir da referência. Não cole HTML de página inteira ou grandes dumps de ativos no chat; resuma os seletores, tokens, URLs e capturas de tela relevantes.

Contrato de Inicialização do CDP

agent-browser deve se conectar a um endpoint CDP existente. Nunca execute agent-browser open antes de agent-browser connect; fazer isso pode fazer com que a CLI inicie o Chrome automaticamente e reentre no caminho de falha.

Não execute o daemon CLI do OpenDesign como uma ferramenta de automação de navegador. Comandos como od browser snapshot, daemon-cli.mjs browser snapshot ou $OD_NODE_BIN $OD_BIN browser snapshot não são ferramentas de navegador válidas; eles podem ser mal interpretados como inicialização de daemon e abrir um serviço interno 127.0.0.1:<port> no navegador do sistema. Use a CLI externa agent-browser conectada ao CDP em vez disso.

Use esta sequência:

if ! curl -fsS http://127.0.0.1:9223/json/version | rg -q webSocketDebuggerUrl; then
  open -na "Google Chrome" --args \
    --remote-debugging-port=9223 \
    --user-data-dir=/tmp/od-agent-browser-chrome \
    --no-first-run \
    --no-default-browser-check

  for i in {1..20}; do
    if curl -fsS http://127.0.0.1:9223/json/version | rg -q webSocketDebuggerUrl; then
      break
    fi
    sleep 0.5
  done
fi

curl -fsS http://127.0.0.1:9223/json/version | rg webSocketDebuggerUrl
agent-browser connect http://127.0.0.1:9223

Se o CDP ainda estiver indisponível após a sondagem, pare e peça ao usuário para iniciar o Chrome manualmente pelo Terminal:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9223 \
  --user-data-dir=/tmp/od-agent-browser-chrome \
  --no-first-run \
  --no-default-browser-check

Se o Chrome sair antes que o CDP esteja pronto ou relatar DevToolsActivePort, informe: "Chrome travou antes que o CDP estivesse disponível; inicie o Chrome manualmente com --remote-debugging-port e tente anexar novamente."

Lightpanda é opcional. Não tente --engine lightpanda a menos que command -v lightpanda seja bem-sucedido.

Caminho de Smoke do OpenDesign

Use um home temporário e uma sessão estável:

export HOME=/tmp/agent-browser-home
export AGENT_BROWSER_SESSION=od-local-preview