Warum ich Agent Canvas gebaut habe

Vom vorhandenen Repository zur interaktiven Übersicht

Beauftrage einen Agenten, der Dateien lesen, ändern und Befehle ausführen kann. Vorhandenes Storybook oder manuelle Seitenlisten sind nicht nötig. Die Installation allein füllt die Übersicht nicht.

Diesen Auftrag an den Agenten geben

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. Gemeinsames Werkzeug installieren

   Nutze Node.js 22+ sowie Paketverwaltung und Lockfile des Projekts. Installiere das feste GitHub-Release und den Browser. Blockiert npm 12 diese direkte Git-Abhängigkeit, ergänze nur dann --allow-git=root; ändere keine globale Richtlinie.

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

2. Erst inventarisieren, dann Fälle wählen

   Führe plan im gesamten ursprünglichen App-Repository aus. Prüfe alle Dateien, UI-Anker, UI-relevanten Abhängigkeiten und die tatsächliche Navigation. Erfasse Screens und Zustände unabhängig vom Katalog; ungeklärte UI bleibt offen.

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

3. Original-UI mit Fixtures rendern

   Erstelle Config, Catalog, synthetische Fixtures, Preview-Einstieg und Journeys unter ui-review. Der Adapter importiert echte Seiten, Provider und Styles. Ersetze Daten und Abhängigkeiten, nicht die UI; lehne unbekannte Netzwerkanfragen ab.

   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 · Agent-Anleitung

4. Zustände und Interaktionen prüfen

   Erfasse Normal-, Leer-, Lade-, Fehler-, Zugriffs-, Dialog- und Wiederherstellungszustände. Prüfe jeden Fall und echte Bedienelemente in fortlaufenden Abläufen. Gleiche Inventory, quellbezogene Assertions und Routen ab; bestehe --ui-complete im selben Stamm. --complete bleibt ein separates strenges Audit des gesamten Quellcodes. Offene Audit-Punkte sind keine Anzahl fehlender Screens.

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

5. Aus dem Quellcode pflegen

   Starte ui:review, prüfe Übersicht und Zustandsgraph und spiele einen Ablauf ab. Lass den Agenten den echten App-Code ändern. Bestehende Vorschauen werden neu gebaut; neue Routen und Zustände brauchen Inventory-, Fixture- und Journey-Updates. Vor Übergabe gilt die vollständige Prüfung.

   npm run ui:review

Was in deiner App bleibt

Das gemeinsame Paket enthält Viewer, CLI und Skill. Dein Repository pflegt Adapter, Fixtures, unabhängiges Inventory, Catalog und Interaktionsprüfungen. Starte mit dem ausführbaren React/Vite-Beispiel; andere Stacks brauchen eigene Adapter.

Optionaler Agent-Skill

Codex und Claude Code können den enthaltenen Skill installieren. Andere Agenten lesen AGENT_GUIDE.md direkt. Die Laufzeit ruft keine Modelle auf und braucht keinen API-Schlüssel; dein Agent hat eigene Kosten und Berechtigungen.

npx agent-canvas install --target both