Porque criei Agent Canvas

De um repositório existente a uma tela interativa

Peça a integração a um agente capaz de ler, editar e executar comandos. Não exige Storybook nem uma lista manual de páginas. Instalar o pacote não preenche a tela por si só.

Cole no seu agente

Read https://github.com/tombelieber/app-canvas/blob/v0.16.0/AGENT_GUIDE.md and add a completely populated Agent Canvas to this repository. Discover all screens, components, variants, states and navigation from the whole application source. Use original UI code. Create the missing synthetic fixtures and render harnesses. Reconcile an independent source inventory with rendered cases and source-linked runtime checks. Add checked happy, failure and recovery journeys. Group by actual page and feature, connect checked flows, deduplicate repeated captures and resume checkpoints. Run --ui-complete against the original source root; keep the stricter --complete source audit separate and unchanged. Continue until the full landscape is populated and verified; report genuine blockers as incomplete. Keep production sessions, credentials and real user data out of previews.

1. Instale a ferramenta partilhada

   Use Node.js 22+ e o gestor e lockfile do projeto. Instale a versão GitHub fixa e o navegador. No npm 12, adicione --allow-git=root apenas se bloquear esta dependência Git direta; não altere a política global.

   npm install --save-dev github:tombelieber/app-canvas#v0.16.0
   npx agent-canvas browsers

2. Faça o inventário antes dos casos

   Execute plan em todo o repositório original. Reveja cada ficheiro, âncora UI, dependência que afete a UI e navegação real. Enumere ecrãs e estados independentemente do catálogo; mantenha visíveis as UI por resolver.

   npx agent-canvas plan --source-root . --out ui-review/ui-inventory.json
   npx agent-canvas status --inventory ui-review/ui-inventory.json

3. Renderize a UI original com fixtures

   Crie config, catalog, fixtures sintéticos, preview entry e journeys em ui-review. O adapter importa páginas, providers e estilos reais. Substitua dados e dependências, nunca a UI; rejeite pedidos de rede desconhecidos.

   ui-review/
     canvas.config.mjs
     catalog.json
     frame.jsx
     fixtures.js
     README.md
   .artifacts/app-canvas/inventory.json

   // package.json → scripts
   "ui:review": "agent-canvas --config ui-review/canvas.config.mjs"

   React/Vite · Guia do agente

4. Verifique estados e interações

   Inclua normal, vazio, carregamento, erro, acesso negado, diálogos e recuperação. Verifique cada caso e controlos reais em fluxos contínuos. Concilie inventory, assertions ligadas ao código e rotas; passe --ui-complete na mesma raiz. --complete continua a ser uma auditoria rigorosa e separada de todo o código fonte. As pendências não contam ecrãs em falta.

   npx agent-canvas populate --config ui-review/canvas.config.mjs --source-root . --verify

5. Reveja e mantenha a partir do código

   Execute ui:review, veja a tela e o grafo e reproduza um fluxo. Peça alterações ao código real. Os previews existentes são reconstruídos; novas rotas e estados exigem atualizar inventory, fixtures e journeys. Exija a verificação completa antes da entrega.

   npm run ui:review

O que fica na sua aplicação

O pacote partilhado mantém viewer, CLI e skill. O repositório mantém adapter, fixtures, inventory independente, catalog e testes de interação. Comece pelo exemplo React/Vite executável; outras stacks precisam do seu adapter.

Skill opcional

Codex e Claude Code podem instalar a skill incluída. Outros agentes seguem AGENT_GUIDE.md diretamente. O runtime não chama modelos nem exige chave API; o agente escolhido tem os seus custos e permissões.

npx agent-canvas install --target both