Pourquoi j’ai créé App Canvas

Pourquoi j’ai créé App Canvas

L’IA facilitait la création d’une nouvelle page, pas la compréhension d’une application grandissante. Je voulais voir les écrans implémentés et leurs échecs sans tout parcourir ni maintenir un second fichier de design.

App Canvas transforme cette revue en paysage navigable. L’agent intègre le dépôt ; l’outil partagé apporte canevas, aperçus du vrai code, navigation suivie par la caméra et lecture vérifiée.

StoolSense est l’exemple public synthétique. Aucune session de production, donnée de santé réelle ou requête IA. Les événements facultatifs d’utilisation sont séparés des données de l’app.

Voir, utiliser, rejouer

Du dépôt existant au canevas interactif

Confiez l’intégration à un agent capable de lire, modifier et exécuter des commandes. Aucun Storybook ni inventaire manuel préalable requis. Installer le paquet ne peuple pas le canevas.

À coller dans votre agent

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. Installer l’outil partagé

   Utilisez Node.js 22+ et le gestionnaire et lockfile du projet. Installez la version GitHub épinglée, puis le navigateur. Avec npm 12, ajoutez --allow-git=root seulement si cette dépendance Git directe est bloquée ; ne changez pas la politique globale.

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

2. Inventorier avant de choisir les cas

   Lancez discover sur toute la racine de l’application. L’agent examine chaque région et candidat, résout pending et énumère les états sémantiques indépendamment du catalog. Les blocages restent visibles.

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

3. Afficher la vraie UI avec des fixtures

   Créez config, catalog, fixtures synthétiques, preview entry et journeys dans ui-review. L’adapter importe pages, providers et styles d’origine. Remplacez données et dépendances, jamais l’UI ; refusez les requêtes inconnues.

   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 · Guide de l’agent

4. Vérifier états et interactions

   Couvrez normal, vide, chargement, erreur, accès refusé, dialogues et récupération. Vérifiez chaque cas et les vrais contrôles dans des parcours continus. Réconciliez inventory, assertions liées au code et routes ; passez --complete sur la même racine.

   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. Réviser et maintenir depuis le code

   Lancez ui:review, examinez le canevas et rejouez un parcours. Faites modifier le vrai code. Les aperçus existants se reconstruisent ; nouveaux états et routes exigent inventory, fixtures et journeys actualisés. Exigez le contrôle complet avant livraison.

   npm run ui:review

Ce qui reste dans votre application

Le paquet partagé possède viewer, CLI et skill. Votre dépôt conserve adapter, fixtures, inventory indépendant, catalog et tests d’interaction. Partez de l’exemple React/Vite exécutable ; les autres stacks ont leur adapter.

Skill facultative

Codex et Claude Code peuvent installer la skill fournie. Tout autre agent peut lire AGENT_GUIDE.md. Le runtime n’appelle aucun modèle et ne demande aucune clé API ; votre agent garde ses propres coûts et permissions.

npx app-canvas install --target both

Confidentialité et télémétrie

Événements minimaux facultatifs via Cloudflare vers PostHog. Aucun contenu, code, nom, chemin, e-mail ou IP n’est transmis à PostHog. Vous pouvez désactiver l’analyse.

Confidentialité et télémétrie ↗

Portée et limites

• Le Web utilise le vrai HTML/CSS et le JavaScript original pour les interactions. UIKit, SwiftUI et Android exigent des harnesses et preuves du runtime d’origine ; une capture n’est pas une app native interactive.
• La couverture relie du code examiné à des cas, sans découverte automatique de toutes les conditions métier. Les tests UI ne qualifient ni backends de production, ni précision clinique ou des modèles.
• Viewer : anglais par défaut, 11 langues. La démo publique est un frontend synthétique figé ; les intégrations locales suivent votre source. Les performances sur iPad physique ne sont pas mesurées.