Porque criei App Canvas

Porque criei App Canvas

A IA facilitou criar outra página, mas não compreender uma aplicação em crescimento. Queria ver páginas implementadas e falhas sem percorrer tudo nem manter um segundo ficheiro de design.

App Canvas transforma a revisão numa paisagem navegável. O agente integra o repositório; a ferramenta partilhada oferece tela, previews de código real, navegação com câmara e reprodução verificada.

StoolSense é o exemplo público sintético. Não contém sessões de produção, dados de saúde reais ou pedidos de IA. Eventos de utilização opcionais são separados dos dados da app.

Explore, interaja e reproduza

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.12.0/AGENT_GUIDE.md and add a completely populated App 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. Run --complete against the original source root. 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.12.0
   npx app-canvas browsers

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

   Execute discover em toda a raiz da aplicação. O agente revê cada região e candidato, resolve pending e enumera estados semânticos independentemente do catalog. Os bloqueios continuam visíveis.

   npx app-canvas discover --source-root . --out .artifacts/app-canvas/inventory.json
   npx app-canvas pending --inventory .artifacts/app-canvas/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": "app-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 --complete na mesma raiz.

   npx app-canvas --config ui-review/canvas.config.mjs --check
   npx app-canvas --config ui-review/canvas.config.mjs --verify
   npx app-canvas --config ui-review/canvas.config.mjs --complete --source-root .

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 app-canvas install --target both

Privacidade e telemetria

Eventos mínimos opcionais via Cloudflare para PostHog. Não são enviados conteúdos, código, nomes, caminhos, email ou IP ao PostHog. Pode desativar.

Privacidade e telemetria ↗

Âmbito e limites

• Web usa HTML/CSS reais e JavaScript original nas interações. UIKit, SwiftUI e Android exigem harnesses e evidência do runtime original; uma captura não é uma aplicação nativa interativa.
• A cobertura liga código revisto a casos; não descobre automaticamente todas as condições de negócio. Os testes UI não qualificam backends de produção nem precisão clínica ou de modelos.
• Viewer: inglês por defeito, com 11 idiomas. A demo pública é um frontend sintético fixo; as integrações locais seguem o código. Não foi medido o desempenho num iPad físico.