Perché ho creato App Canvas

Perché ho creato App Canvas

L’IA rendeva semplice creare un’altra pagina, non capire un’app in crescita. Volevo vedere schermate implementate e stati di errore senza attraversare tutta l’app o mantenere un secondo file di design.

App Canvas trasforma la revisione in un panorama navigabile. L’agente integra il repository; lo strumento condiviso offre canvas, preview del codice reale, visuale che segue il flusso e riproduzione verificata.

StoolSense è l’esempio pubblico sintetico. Non contiene sessioni di produzione, dati sanitari reali o richieste IA. Gli eventi facoltativi di utilizzo sono separati dai dati dell’app.

Esplora, interagisci, riproduci

Da un repository esistente a una canvas interattiva

Affida l’integrazione a un agente che legge, modifica ed esegue comandi. Non servono Storybook o elenchi manuali di schermate. L’installazione da sola non popola la canvas.

Incolla nel tuo 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. Installa lo strumento condiviso

   Usa Node.js 22+ e package manager e lockfile del progetto. Installa la release GitHub fissata e il browser. Con npm 12 aggiungi --allow-git=root solo se blocca questa dipendenza Git diretta; non modificare le regole globali.

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

2. Inventaria prima di scegliere i casi

   Esegui discover sull’intera radice dell’app. L’agente esamina ogni regione e candidato, risolve pending ed elenca stati semantici indipendentemente dal catalog. I blocchi restano visibili.

   npx app-canvas discover --source-root . --out .artifacts/app-canvas/inventory.json
   npx app-canvas pending --inventory .artifacts/app-canvas/inventory.json

3. Renderizza la UI originale con fixture

   Crea config, catalog, fixture sintetiche, preview entry e journeys in ui-review. L’adapter importa pagine, provider e stili originali. Sostituisci dati e dipendenze, non la UI; rifiuta richieste di rete sconosciute.

   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 · Guida dell’agente

4. Verifica stati e interazioni

   Copri normale, vuoto, caricamento, errore, accesso negato, dialoghi e recupero. Verifica ogni caso e i controlli reali in flussi continui. Riconcilia inventory, assertion legate al codice e route; supera --complete sulla stessa radice.

   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. Rivedi e mantieni dal codice

   Avvia ui:review, esamina canvas e grafo e riproduci un flusso. Chiedi modifiche al vero codice dell’app. Le preview esistenti si ricostruiscono; nuovi stati e route richiedono inventory, fixture e journeys aggiornati. Pretendi la verifica completa prima della consegna.

   npm run ui:review

Cosa resta nell’applicazione

Il pacchetto condiviso mantiene viewer, CLI e skill. Il repository conserva adapter, fixture, inventory indipendente, catalog e test di interazione. Parti dall’esempio React/Vite eseguibile; altri stack richiedono adapter dedicati.

Skill opzionale

Codex e Claude Code possono installare la skill inclusa. Altri agenti leggono direttamente AGENT_GUIDE.md. Il runtime non chiama modelli né richiede chiavi API; il tuo agente ha costi e permessi propri.

npx app-canvas install --target both

Privacy e telemetria

Eventi minimi facoltativi tramite Cloudflare a PostHog. Non vengono inoltrati contenuti, codice, nomi, percorsi, email o IP a PostHog. Puoi disattivare l’analisi.

Privacy e telemetria ↗

Ambito e limiti

• Web usa HTML/CSS reali e JavaScript originale per interagire. UIKit, SwiftUI e Android richiedono harness e prove nel runtime originale; una cattura non è un’app nativa interattiva.
• La copertura collega codice revisionato e casi, senza scoprire automaticamente ogni condizione di business. I test UI non qualificano backend di produzione, accuratezza clinica o precisione dei modelli.
• Viewer: inglese predefinito, con 11 lingue. La demo pubblica è un frontend sintetico fisso; le integrazioni locali seguono il codice. Le prestazioni su iPad fisico non sono state misurate.