OpenRouter Web Agent

Extensão web do VS Code: chat e agente de código com qualquer modelo do OpenRouter, rodando no vscode.dev (sem Node, dentro do navegador).

O que faz (fase 1)

• Painel de chat na barra lateral, com streaming.
• Escolha de modelo com lista ao vivo do OpenRouter (só modelos com suporte a ferramentas), mostrando contexto e preço por milhão de tokens.
• Inclui o arquivo ativo e a seleção do editor como contexto (opcional).
• Agente com ferramentas: list_files, read_file, search_text, edit_file (troca de trecho exato) e write_file.
• Toda edição pede confirmação, a menos que openrouterWeb.autoApproveWrites esteja ligado.
• API key guardada com context.secrets (armazenamento do editor neste navegador).

Não faz: executar comandos, instalar pacotes ou rodar testes. Não existe terminal no vscode.dev. Isso é a fase 2.

Estrutura

src/web/extension.ts   ativação, comandos, painel de chat (webview) e loop do agente
src/web/openrouter.ts  cliente da API com streaming SSE (só fetch)
src/web/tools.ts       ferramentas de arquivo via vscode.workspace.fs / WorkspaceEdit
esbuild.mjs            bundle para Web Worker (platform: browser)

Rodar localmente

npm install
npm run dev        # sobe um VS Code web em http://localhost:3000 com a extensão carregada

Abra o endereço no navegador, clique no ícone OpenRouter na barra lateral, em Chave cole sua sk-or-... e em Modelo escolha um.

Para desenvolver com rebuild automático, rode npm run watch em outro terminal e recarregue a janela.

Usar no vscode.dev de verdade

Opção A: instalar de uma URL (sem publicar)

O vscode.dev só carrega extensões servidas por HTTPS com CORS.

1. Gere um certificado local confiável (uma vez só):

   brew install mkcert   # ou o equivalente no seu sistema
   mkcert -install
   mkdir certs && mkcert -cert-file certs/localhost.pem -key-file certs/localhost-key.pem localhost
   

2. npm run serve (serve a pasta em https://localhost:5000).
3. No vscode.dev, abra a paleta de comandos e rode Developer: Install Extension from Location… com https://localhost:5000.

A extensão fica instalada enquanto esse servidor estiver acessível. Para não depender do seu PC, hospede a pasta em qualquer lugar com HTTPS e CORS liberado (Cloudflare Pages, Netlify etc.).

Opção B: publicar

npm run package gera um .vsix. Publique no Open VSX ou no Marketplace (vsce publish). Depois disso a extensão aparece na busca do vscode.dev normalmente.

Observações

• Repositório do GitHub no vscode.dev (vscode.dev/github/usuario/repo): as edições do agente ficam como alterações pendentes no Source Control até você fazer commit.
• Pasta local (Abrir Pasta no Chrome/Edge): as edições vão direto para o disco.
• Segurança: a chave fica no navegador. Use uma chave do OpenRouter com limite de gasto.
• Modelos sem ferramentas retornam erro 404 do OpenRouter. Escolha outro pela lista (ela já filtra).

Configurações

Fase 2: runtime de Node (planejamento)

Objetivo: dar ao agente uma ferramenta run_command usando WebContainer (Node no navegador).

Restrição que define a arquitetura: o WebContainer exige SharedArrayBuffer, que só existe em páginas com isolamento cross-origin (headers COOP + COEP). Dentro de um iframe, a página-pai também precisa estar isolada, e o vscode.dev não está sob nosso controle. Por isso o container não pode rodar dentro do painel da extensão.

Desenho proposto:

vscode.dev (extensão)  ⇄  ponte  ⇄  runtime.seudominio.com (aba própria, COOP/COEP, WebContainer)

• O runtime é uma página estática no seu domínio, aberta em aba separada.
• Ponte: com COOP same-origin, a aba aberta perde a referência ao window.opener, então postMessage direto não funciona. Opções a testar:
  1. Relay por WebSocket (um Worker pequeno no Cloudflare com Durable Object, pareado por um código de sessão).
  2. WebRTC DataChannel, usando o mesmo relay só para sinalização.
• Sincronização de arquivos: a extensão envia o snapshot do workspace ao container e, depois de cada comando, recebe os arquivos alterados (por exemplo, um package-lock.json gerado pelo npm install).

Spike antes de construir (meio dia):

1. Página com COOP/COEP no Cloudflare Pages rodando npm install && npm test num projeto pequeno.
2. Relay WebSocket mínimo trocando uma mensagem entre a extensão no vscode.dev e essa aba.
3. Medir o tempo de boot e de npm install no Chrome; testar Safari/iPad.

Licença: o WebContainer API é gratuito para uso pessoal e open source; uso comercial em produção exige licença do StackBlitz. Confirme os termos atuais antes de transformar isso em produto.