Du dépôt existant au canevas interactif

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.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. 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.16.0
   npx agent-canvas browsers

2. Inventorier avant de choisir les cas

   Exécutez plan sur tout le dépôt original. Examinez chaque fichier, ancrage UI, dépendance influençant l’UI et navigation réelle. Recensez les écrans et états indépendamment du catalogue ; gardez les UI non résolues visibles.

   npx agent-canvas plan --source-root . --out ui-review/ui-inventory.json
   npx agent-canvas status --inventory ui-review/ui-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": "agent-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 --ui-complete sur la même racine. --complete reste un audit strict et distinct de tout le code source. Ses éléments ouverts ne comptent pas les écrans manquants.

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

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