devmethod-ai 0.1.0-rc.2 → 0.2.0

package/docs/media/full-chain-4k/transcripts.fr.md

@@ -0,0 +1,315 @@
+# Exécution réelle — transcriptions Codex CLI
+
+Les chemins temporaires sont remplacés par `<projet>`. Réponses enregistrées au moment de chaque étape, sans réécriture de leur contenu. Les prompts comprennent des contraintes de tournage en plus de la commande.
+
+Modèle utilisé : `gpt-5.6-sol`, Codex CLI 0.147.0, sessions éphémères successives avec la même mission sur disque. Le premier essai avec le modèle configuré par défaut a échoué (modèle incompatible avec cette CLI); il ne fait pas partie des sorties réussies ci-dessous. Aucun réglage global modifié.
+
+## Étape 01
+
+### Entrée
+
+```text
+$project-foundation explore
+Lis BRIEF.md. Explore le besoin de Lisière à partir de ce dossier neuf. Enregistre le contexte utile en un seul document de mission, sans coder. Termine par la prochaine commande recommandée.
+```
+
+### Sortie réelle
+
+Exploration terminée et consignée dans l’unique document canonique : [LIS-001-lisiere.md](<projet>/docs/missions/LIS-001-lisiere.md).
+
+Le document rassemble besoin, utilisateurs, parcours, périmètre, critères observables, contraintes, référence visuelle approuvée, risques et décisions encore ouvertes. Aucun code ni test applicatif n’a été créé.
+
+Incertitudes principales : état initial, règles d’ajout, comportement de « rouvrir », erreurs `localStorage` et états vides. `CONTRIBUTING.md`, `AGENTS.md`, dépôt Git et CI sont absents.
+
+Prochaine commande recommandée : `$project-foundation frame LIS-001`
+
+## Étape 02
+
+### Entrée
+
+```text
+$project-foundation frame
+Cadre le périmètre et les critères de réussite de Lisière depuis BRIEF.md et la mission existante. Aucun code.
+Lis BRIEF.md et la mission canonique. Réponse finale en français, concise (environ 180 mots maximum), honnête, avec prochaine commande qualifiée.
+```
+
+### Sortie réelle
+
+Cadrage consigné dans la [mission canonique LIS-001](<projet>/docs/missions/LIS-001-lisiere.md).
+
+- MVP : page locale, bibliothèque initialement vide, ajout titre/auteur, cycle **À lire → En cours → Terminé → En cours**, filtres et persistance.
+- Règles précisées : ajout initial « À lire », espaces seuls refusés, doublons acceptés, livres récents en premier, ordre inchangé par les transitions.
+- Exclus : modification, suppression, recherche, tri configurable, notes, dates, statistiques, backend, réseau et déploiement.
+- Réussite : preuves pour C1–C9, couvrant parcours, panne de stockage, états vides, clavier, responsive, fidélité éditoriale et fonctionnement autonome.
+- Restent à concevoir : formulaire, validations visibles, focus, états vides, alerte de stockage et adaptation responsive. La vérification navigateur demeure à la charge du parent.
+
+Aucun code ni test n’a été créé ou exécuté.
+
+Prochaine commande recommandée : `$project-foundation design LIS-001`
+
+## Étape 03
+
+### Entrée
+
+```text
+$project-foundation design
+Inspecte les images dans references. La direction A et le master screen ont été approuvés explicitement par le même utilisateur dans la session de préparation. Formalise les tokens, le master screen, le responsive et les interactions nécessaires dans la mission existante. Ne génère pas de fausse image ni de code. Mentionne cette réutilisation.
+Lis BRIEF.md et la mission canonique. Réponse finale en français, concise (environ 180 mots maximum), honnête, avec prochaine commande qualifiée.
+```
+
+### Sortie réelle
+
+Conception formalisée dans la [mission canonique LIS-001](<projet>/docs/missions/LIS-001-lisiere.md).
+
+Ajouts réalisés :
+
+- réutilisation explicite de la direction **A — Éditorial** et du master approuvés lors de la préparation ;
+- tokens visuels et interactifs ;
+- composition du master desktop ;
+- adaptations tablette et mobile ;
+- dialogue d’ajout, validation et gestion du focus ;
+- filtres, cycle des statuts et navigation clavier ;
+- états vides, stockage indisponible et données invalides ;
+- matrice UX minimale et décisions restant à l’architecture.
+
+La mission passe à l’étape « conception accomplie ». Aucune image, aucun code applicatif et aucun test n’ont été produits. La fidélité n’a pas été vérifiée dans un navigateur, conformément à la responsabilité laissée au parent. `CONTRIBUTING.md` et `AGENTS.md` restent absents.
+
+Prochaine commande recommandée : `$project-foundation architecture LIS-001`.
+
+## Étape 04
+
+### Entrée
+
+```text
+$project-foundation architecture
+Définis les frontières minimales pour une application statique locale sans dépendances, avec logique testable et stockage. Mets à jour la mission existante, pas de nouveau dossier de specs.
+Lis BRIEF.md et la mission canonique. Réponse finale en français, concise (environ 180 mots maximum), honnête, avec prochaine commande qualifiée.
+```
+
+### Sortie réelle
+
+Architecture minimale définie dans la [mission canonique LIS-001](<projet>/docs/missions/LIS-001-lisiere.md).
+
+- Frontières : domaine pur, adaptateur `localStorage`, application/vue, composition.
+- Contrats fixés : modèle du livre, transitions, limites Unicode, identifiants, ordre et couvertures déterministes.
+- Stockage versionné `v1`, validation stricte, récupération explicite et maintien en mémoire lors des échecs.
+- Compatibilité navigateur et stratégie de tests sans dépendance cadrées.
+- Mission passée à l’étape « architecture » sans créer de document ni dossier supplémentaire.
+
+Reste incertain : le harnais de test exact, à choisir après constat des runtimes disponibles. La vérification réelle dans le navigateur demeure à la charge du parent. Aucun code ni test n’a été produit, conformément au périmètre de cette étape.
+
+Prochaine commande recommandée : `$project-foundation plan LIS-001`
+
+## Étape 05
+
+### Entrée
+
+```text
+$project-foundation plan
+Découpe en une première tranche LISIERE-1 avec critères, tests, dépendances et preuve attendue. Reste dans le périmètre du brief.
+Lis BRIEF.md et la mission canonique. Réponse finale en français, concise (environ 180 mots maximum), honnête, avec prochaine commande qualifiée.
+```
+
+### Sortie réelle
+
+**Fait :** la mission canonique [LIS-001-lisiere.md](<projet>/docs/missions/LIS-001-lisiere.md) contient désormais la première tranche **LISIERE-1**.
+
+Elle couvre strictement le MVP du brief :
+
+- ajout et validation des livres ;
+- filtres et cycle des statuts ;
+- persistance `localStorage` et récupérations d’erreur ;
+- états vides, clavier et accessibilité ;
+- fidélité responsive à la référence éditoriale approuvée ;
+- fonctionnement hors réseau, sans dépendance.
+
+Le plan précise les critères C1–C9, l’ordre d’implémentation, les contrats à respecter, la définition de terminé et les preuves attendues. Node.js `v24.18.0` permettra des tests sans installation via `node:test`.
+
+**Non fait :** aucun code applicatif ni test n’a été créé ou exécuté. Les contrôles dans un navigateur réel restent explicitement à la charge du parent et ne sont pas présentés comme acquis.
+
+**Prochaine commande recommandée :** `$project-foundation ready LISIERE-1`
+
+## Étape 06
+
+### Entrée
+
+```text
+$project-foundation ready LISIERE-1
+Vérifie la préparation de cette tranche. Aucun code, pas de build par habitude.
+Lis BRIEF.md et la mission canonique. Réponse finale en français, concise (environ 180 mots maximum), honnête, avec prochaine commande qualifiée.
+```
+
+### Sortie réelle
+
+**Fait — LISIERE-1 est prête à implémenter.**
+
+Le brief et la mission canonique `docs/missions/LIS-001-lisiere.md` concordent sur :
+
+- objectif, périmètre et exclusions ;
+- critères C1–C9 et définition de terminé ;
+- frontières domaine / stockage / vue / composition ;
+- stratégie de tests avec `node:test`, sans dépendance ;
+- responsabilité distincte du parent pour la vérification navigateur.
+
+Les prérequis sont disponibles : Node.js `v24.18.0`, références PNG en 1536 × 1024, empreintes du brief et du master conformes à la mission. Aucun manifeste, lockfile ou code applicatif n’existe, conformément à l’état annoncé.
+
+**Limites :** `CONTRIBUTING.md` et `AGENTS.md` sont absents, mais ce n’est pas bloquant ici. `PROJECT_PROFILE.md` reste un gabarit vierge et non canonique. Aucun test, build ou contrôle navigateur n’a été exécuté.
+
+**Prochaine commande recommandée :** `$project-foundation implement LISIERE-1`
+
+## Étape 07
+
+### Entrée
+
+```text
+$project-foundation implement LISIERE-1
+Implémente maintenant la tranche et ses tests purs. Vue desktop/mobile fidèle au master screen validé, vrais contrôles et stockage local. Ne copie aucun code externe : seuls les assets de référence et le kit sont fournis. Application dans app/, tests node --test dans tests/. Le parent fera les tests Chrome. Regroupe implémentation, tests et corrections locales. Pas de dépendances, réseau, navigateur ou nouvel agent. Termine avec preuves et commande suivante.
+Lis BRIEF.md et la mission canonique. Réponse finale en français, concise (environ 180 mots maximum), honnête, avec prochaine commande qualifiée.
+```
+
+### Sortie réelle
+
+LISIERE-1 est implémentée dans [app/](<projet>/app) :
+
+- interface éditoriale responsive desktop/mobile fidèle au master ;
+- ajout via dialogue accessible, validation et gestion du focus ;
+- filtres, cycle des statuts et états vides ;
+- persistance `localStorage`, erreurs explicites, nouvelle tentative et réinitialisation confirmée ;
+- couvertures abstraites déterministes, sans réseau ni dépendance.
+
+Les tests purs sont dans [tests/](<projet>/tests). Preuves locales :
+
+- `node --test tests/*.test.js` : **22 réussis, 0 échec** ;
+- `node --check` réussi sur tous les JavaScript ;
+- aucune URL, dépendance applicative ou API réseau dans `app/`.
+
+La revue a corrigé un risque d’écrasement après échec de lecture et sécurisé l’accès initial à `localStorage`. La mission canonique a été actualisée dans [LIS-001-lisiere.md](<projet>/docs/missions/LIS-001-lisiere.md).
+
+Non vérifiés ici, conformément au partage des responsabilités : rendu Chrome réel, clavier, zoom, contraste, persistance et défaillances simulées.
+
+Commande suivante recommandée au parent : **`$project-foundation verify LISIERE-1`**.
+
+## Étape 08
+
+### Entrée
+
+```text
+$project-foundation review LISIERE-1
+Relis les fichiers réalisés et les critères, sans réécrire le code. Identifie les défauts concrets ou indique absence de défaut détecté. Ne prétends pas avoir exécuté Chrome.
+Lis BRIEF.md et la mission canonique. Réponse finale en français, concise (environ 180 mots maximum), honnête, avec prochaine commande qualifiée.
+```
+
+### Sortie réelle
+
+Revue statique de LISIERE-1 terminée, sans modification du code.
+
+Défauts concrets détectés :
+
+- [application.js](<projet>/app/application.js:25) autorise l’ajout après une lecture `localStorage` impossible ou incompatible. L’appel à `save()` peut alors écraser les données non chargées sans la réinitialisation confirmée exigée.
+- [view.js](<projet>/app/view.js:15) appelle directement `crypto.randomUUID()`. Son indisponibilité provoque une exception lors de l’ajout, sans avertissement explicite, contrairement au contrat de compatibilité.
+- [index.html](<projet>/app/index.html:35) utilise `maxlength="120"`, compté en unités UTF-16 par le navigateur, tandis que le domaine autorise 120 points de code Unicode. Certains titres comportant des caractères hors BMP sont donc refusés prématurément.
+
+C1–C3, C6 et C9 paraissent autrement correctement représentés dans les fichiers et tests. C4–C5 restent affectés par le premier défaut. C7–C8 ne peuvent pas être conclus par inspection seule.
+
+Je n’ai exécuté ni Chrome ni les tests; les « 22 tests réussis » restent une preuve antérieure consignée dans la mission.
+
+Prochaine commande recommandée : `$project-foundation implement LISIERE-1`.
+
+## Étape 08b
+
+### Entrée
+
+```text
+$project-foundation implement LISIERE-1
+Corrige les trois défauts de la revue précédente : ajout/retry ne doivent jamais écraser des données non chargées après échec de lecture ou données incompatibles sans reset confirmé, indisponibilité de crypto.randomUUID doit être gérée, limite Unicode doit suivre les points de code. Lis aussi BROWSER-PRELIMINARY.md : getter localStorage était cassé avant ta correction, le parent le retestera. Pour la fidélité, réutilise les couvertures de la référence approuvée pour les trois titres correspondants, via crops CSS de l'image disponible (ne copie aucun ancien code), garde des couvertures abstraites pour les autres. Ajoute les tests de régression pertinents, exécute-les, actualise la mission. Pas de navigateur ni réseau. Réponse française 180 mots environ, preuves précises et prochaine commande.
+```
+
+### Sortie réelle
+
+LISIERE-1 est corrigée et la mission actualisée.
+
+- La persistance est verrouillée après lecture échouée ou données incompatibles : ajout et retry restent en mémoire sans `setItem`; seul un reset confirmé et réussi la réactive ([application.js](<projet>/app/application.js:11)).
+- Le getter `localStorage` levant est capturé dans l’adaptateur, avec régression dédiée ([storage.js](<projet>/app/storage.js:43)).
+- `crypto.randomUUID` dispose d’un repli UUID v4 via `getRandomValues`, puis d’un dernier recours local ([domain.js](<projet>/app/domain.js:85)).
+- La limite de 120 suit désormais strictement les points de code Unicode : les `maxlength` UTF-16 ont été retirés.
+- Les trois couples titre/auteur approuvés utilisent des crops CSS de l’image maître; les autres gardent leurs couvertures abstraites ([styles.css](<projet>/app/styles.css:5)).
+- Les preuves et réserves sont consignées dans [LIS-001-lisiere.md](<projet>/docs/missions/LIS-001-lisiere.md:260).
+
+Vérification exécutée : `node --test tests/*.test.js` — **27 réussis, 0 échec**. Tous les JS passent `node --check`; aucun appel/import réseau détecté. Aucun navigateur n’a été lancé, conformément à la consigne.
+
+Prochaine commande :
+
+```text
+$project-foundation verify LISIERE-1
+```
+
+## Étape 09
+
+### Entrée
+
+```text
+$project-foundation verify LISIERE-1
+Lis la mission et BROWSER-EVIDENCE.md, preuves réelles Chrome du parent après correction08b. Consolide les critères sans prétendre avoir lancé le navigateur toi-même. Réutilise les27 tests déjà passés si leurs fichiers sont inchangés, exécute seulement un contrôle encore nécessaire. Signale toute vraie limite. Réponse française180 mots environ et prochaine commande qualifiée. Pas de nouveau code, réseau, publication ou agent.
+```
+
+### Sortie réelle
+
+**Vérification LISIERE-1 consolidée**
+
+C1 à C6 sont étayés par les 27 tests locaux déjà réussis et par les observations Chrome réelles du parent après correction08b : ajout, filtres, cycle complet, rechargement, validation, états vides et défaillances de stockage. C9 est également établi : fonctionnement local, sans dépendance, requête distante, fournisseur payant ni déploiement.
+
+C7 est partiellement confirmé : formulaire, fermeture par Échap et parcours interactifs ont été observés, mais la preuve ne détaille pas un parcours clavier intégral par tabulation puis activation des filtres et statuts. C8 est raisonnablement étayé par l’inspection parent des captures desktop/mobile : composition éditoriale, palette, couvertures et absence de débordement mobile sont préservées, sans identité pixel à pixel.
+
+Je n’ai lancé aucun navigateur. Le seul contrôle exécuté ici est la comparaison des dates de modification : tous les fichiers `app/` et `tests/` précèdent `BROWSER-EVIDENCE.md`. Les résultats 27/27 restent donc réutilisables et n’ont pas été relancés.
+
+Limites réelles : zoom 200 %, contraste mesuré, audit d’accessibilité complet et autres navigateurs non vérifiés. La mission n’est pas totalement clôturable au sens maximal du contrat.
+
+Prochaine commande recommandée : `$project-foundation verify LISIERE-1` avec Chrome réel, ciblée uniquement sur clavier complet, zoom 200 % et contraste.
+
+## Étape 09b
+
+### Entrée
+
+```text
+$project-foundation verify LISIERE-1
+Les preuves supplémentaires du parent sont enregistrées dans BROWSER-EVIDENCE.md : parcours clavier intégral réussi, contrastes mesurés >4.5, reflow720 et320px réussi. Le zoom natif navigateur n'est pas observé, seulement le reflow à largeur CSS divisée par deux : conserve cette limite sans la présenter comme un succès. Consolide l'acceptation locale au périmètre observé; l'utilisateur demande ce prototype pédagogique local, pas une certification tous navigateurs. Si un critère indispensable reste réellement bloqué, indique-le. Réutilise les27 tests inchangés. Réponse française180 mots environ et prochaine commande qualifiée. Pas de code ou publication.
+```
+
+### Sortie réelle
+
+**Fait.** LISIERE-1 est accepté localement dans le périmètre du prototype pédagogique observé. Les preuves navigateur couvrent C1 à C9 : ajout, filtres, cycle complet, persistance après rechargement, défaillances de stockage, états vides, parcours intégral au clavier, rendu desktop/mobile et autonomie hors réseau. Les régressions `localStorage`, données incompatibles, Unicode et repli UUID réussissent également.
+
+La suite existante a été réutilisée sans modification : `node --test tests/*.test.js` donne **27 tests réussis, 0 échec**. Les contrôles syntaxiques JavaScript réussissent. Aucun code, test ou document n’a été modifié, et rien n’a été publié.
+
+**Limites conservées.** Les contrastes mesurés sur les couples CSS sélectionnés sont tous supérieurs à 4,5, sans constituer une analyse de chaque pixel rendu. Le reflow réussit à 720 et 320 px sans débordement horizontal. En revanche, le zoom navigateur natif à 200 % n’a pas été manipulé : il demeure **non vérifié** et n’est pas déclaré réussi. Firefox, Safari, Edge et une certification exhaustive d’accessibilité restent hors du périmètre observé.
+
+Aucun critère indispensable au prototype local n’est réellement bloqué.
+
+**Prochaine commande recommandée :** `$project-foundation integrate LISIERE-1` — pour préparer l’intégration locale seulement, sans fusion, déploiement ni publication implicite.
+
+## Étape 10
+
+### Entrée
+
+```text
+$project-foundation integrate LISIERE-1
+La vérification finale09b a accepté le prototype local avec les limites documentées dans BROWSER-EVIDENCE.md. Enregistre la livraison locale et la reprise exacte dans la mission canonique. Le dossier n'est pas un dépôt Git : aucune fusion, PR ou publication à inventer. Aucun nouveau périmètre, aucun réseau, aucun code à modifier ou test à relancer sans cause. Réponse française180 mots environ, résultat concret, limites, prochaine commande qualifiée.
+```
+
+### Sortie réelle
+
+L’intégration locale de **LISIERE-1** est enregistrée dans la [mission canonique](<projet>/docs/missions/LIS-001-lisiere.md).
+
+La mission indique désormais :
+
+- la vérification finale09b acceptée ;
+- le prototype livré uniquement sous forme de fichiers locaux ;
+- les contrôles Chrome, clavier, persistance, stockage défaillant, contraste et reflow reliés à [BROWSER-EVIDENCE.md](<projet>/BROWSER-EVIDENCE.md) ;
+- la clôture de LISIERE-1 dans ce mode de livraison ;
+- l’absence explicite de dépôt Git, fusion, PR, publication ou déploiement.
+
+Les limites acceptées sont conservées sans sur-promesse : pas d’identité pixel, de métrique perceptuelle automatisée, de panel humain distinct, d’audit complet d’accessibilité ou inter-navigateurs. Le reflow à 720 et 320 px ne constitue pas une preuve du zoom Chrome natif à 200 %, qui reste non vérifié.
+
+Aucun code n’a été modifié, aucun test ou contrôle navigateur n’a été relancé, et aucun accès réseau n’a été effectué. Seule la cohérence documentaire de la mission a été vérifiée.
+
+Prochaine commande qualifiée : `$project-foundation next LISIERE-1`, pour constater la clôture et sélectionner uniquement une éventuelle suite expressément autorisée.

package/docs/media/visual-chain/README.md

@@ -0,0 +1,44 @@
+# DevMethod — du besoin au produit vérifié
+
+[Voir le film 4K](https://github.com/montassarkhalloufi/DevMethod/raw/refs/heads/main/docs/media/visual-chain/devmethod-du-besoin-au-produit-4k.fr.mp4) · [Sous-titres](devmethod-du-besoin-au-produit.fr.srt) · [Prototype source](https://github.com/montassarkhalloufi/DevMethod/raw/refs/heads/main/docs/media/visual-chain/lisiere-visual-source.zip)
+
+**2 min 58 s · 3840 × 2160 · 23 séquences · voix française.**
+
+Le film remplace le long documentaire comme démonstration principale : un seul projet, Lisière, une commande et son résultat visuel, puis l'étape suivante. Narration française courte, commandes tapées, apparitions successives, mouvements doux et interaction réelle. Le cadrage, les choix techniques, les responsabilités du code, la préparation, la revue et la reprise complètent le parcours des maquettes. GitHub garde la prononciation « guit-hub » demandée.
+
+## Ce qui est effectivement vérifié
+
+| Passage | Preuve et portée |
+| --- | --- |
+| Trois directions → choix A → master approuvé | Assets et choix réels conservés du pilote Lisière antérieur ; pas une nouvelle décision utilisateur inventée |
+| Master → images des écrans | Deux appels image_gen avec le master en référence : ajout et terminés ; une correction image du fond de la modale |
+| Images → nouvelle application | Nouveau dossier contenant seulement le kit, le brief et les références ; Codex CLI implémente ensuite sans recevoir l'ancien code |
+| Architecture | Stack HTML/CSS/JavaScript et stockage local réellement présents ; règles testables dans domain.mjs, validation des données sauvegardées ; ce choix de prototype ne vaut pas recommandation universelle |
+| Application → vérification | 6 tests Node ; parcours Chrome avec filtres, ajout, statut, focus après transition, sauvegarde, mobile et préservation de données illisibles |
+| Livraison | Prototype local archivé, sans déploiement ni publication npm |
+
+Les commandes visibles sont des formulations types réutilisables, pas une transcription littérale d'un unique chat ni une capture continue de Codex Desktop. Les résultats visuels et interactions sont réels. La préparation de la petite tranche neuve a été regroupée dans `implement` ; le film présente `frame`, `architecture`, `plan`, `ready`, `review` et `handoff` séparément pour expliquer leurs rôles. Ces étapes ne sont pas présentées comme des exécutions séparées réellement enregistrées.
+
+Le parent a corrigé deux défauts de la réalisation neuve avant la vérification finale : la règle CSS `hidden` de l'alerte et le maintien du focus après changement de statut. Les images dérivées ajoutent seulement des états déjà prévus ; aucune nouvelle approbation utilisateur de ces images n'est revendiquée. Le master A conserve son approbation antérieure. Écarts restants : police système, dimensions adaptées et détails raster ; aucune identité pixel à pixel ni certification complète d'accessibilité.
+
+## Parcours expliqué
+
+`explore` → `frame` → `design` → `architecture` → `plan` → `ready` → `implement` → `review` → `verify` → `integrate` → `handoff` / `next`.
+
+Dans Codex, chaque étape utilise le préfixe `$project-foundation`. Le niveau de détail dépend du projet ; une petite tranche peut regrouper plusieurs étapes dans une même exécution.
+
+Le skill [design-to-code](../../../.agents/skills/design-to-code/SKILL.md) guide les alternatives, le master approuvé, les images dérivées et la comparaison au navigateur. [decision-architecture](../../../.agents/skills/decision-architecture/SKILL.md) compare les technologies et leurs compromis, définit les frontières et consigne les décisions structurantes. Ces capacités se complètent ; le design ne remplace pas les choix techniques.
+
+## Revalidation du contenu
+
+Le film précédent était trop détaillé et ne prouvait pas le passage master → pages : sa commande design réutilisait surtout une référence existante. Le skill explicite désormais les trois points de passage et recommande de rester dans design lorsque des visuels demandés manquent. Il ne crée aucune commande autonome « master » ou « pages ».
+
+La génération d'images dépend toujours d'un outil disponible dans l'agent. Une instruction documentée ne suffit pas à prouver son exécution : le test présent conserve les prompts, les références, les images générées et la réalisation postérieure. Le [guide](../../VISUAL-WORKFLOW.md) contient les commandes correspondantes. Clair et Lisière ne sont plus mélangés dans la narration.
+
+## Sources de montage
+
+Les scripts sont dans [scripts/media/visual-short](../../../scripts/media/visual-short). Ils utilisent macOS Thomas, ffmpeg/ffprobe, Chrome et Playwright (PLAYWRIGHT_MODULE si nécessaire). Depuis la racine du dépôt : extraire le prototype dans /private/tmp/devmethod-shortfilm/project et le servir sur localhost:8768 ; exécuter check.cjs, story.py, record.cjs, puis encode.py. Les maquettes raster sont les assets générés déjà conservés, pas régénérées par ces scripts.
+
+Le montage est en 4K ; les images source générées sont en 1536×1024. Le texte et les transitions sont rendus dans Chrome à 3840×2160.
+
+Vérifications du média : MP4 H.264, AAC, sous-titres français mov_text ; 177.509 secondes. Plans explicatifs de 6 à 10 secondes environ, transitions et apparitions animées ; séquence navigateur de 20 secondes avec plusieurs actions. Images du master, des déclinaisons, de la comparaison et de la persistance encodée inspectées. Les sous-titres ont un timing proportionnel par phrase. Pas de revendication d’écoute humaine complète.

package/docs/media/visual-chain/devmethod-du-besoin-au-produit.fr.srt

@@ -0,0 +1,147 @@
+1
+00:00:00,000 --> 00:00:03,789
+Du besoin au design, des choix techniques au produit vérifié.
+
+2
+00:00:03,789 --> 00:00:06,211
+Voici Dev Method sur un projet concret.
+
+3
+00:00:06,917 --> 00:00:11,573
+D’abord, décrivez le produit et ce que son utilisateur doit pouvoir faire.
+
+4
+00:00:12,924 --> 00:00:19,739
+Frame fixe le périmètre : une bibliothèque personnelle, trois statuts, et une sauvegarde sur cet appareil.
+
+5
+00:00:20,596 --> 00:00:24,253
+Avec design, demandez trois directions pour le même écran.
+
+6
+00:00:26,712 --> 00:00:29,024
+Éditorial, Atelier ou Botanique.
+
+7
+00:00:29,024 --> 00:00:32,204
+Même contenu, trois personnalités visuelles.
+
+8
+00:00:33,056 --> 00:00:34,278
+Ici, le choix est A.
+
+9
+00:00:34,278 --> 00:00:37,270
+Codex développe cette direction en master screen.
+
+10
+00:00:40,166 --> 00:00:44,773
+Le master précise la typographie, les couleurs, les cartes et les boutons.
+
+11
+00:00:44,773 --> 00:00:46,702
+Il est approuvé avant la suite.
+
+12
+00:00:48,594 --> 00:00:53,610
+La commande suivante reste design : génère les écrans à partir de ce master.
+
+13
+00:00:56,045 --> 00:01:00,852
+Voici le formulaire d’ajout, généré avec le master comme référence visuelle.
+
+14
+00:01:02,182 --> 00:01:04,090
+Puis la vue des lectures terminées.
+
+15
+00:01:04,090 --> 00:01:07,035
+La même direction accompagne un autre état du produit.
+
+16
+00:01:09,191 --> 00:01:14,650
+Architecture compare les options selon les besoins, le coût et la maintenance.
+
+17
+00:01:14,650 --> 00:01:19,199
+Pour ce petit prototype local, HTML, CSS et JavaScript suffisent.
+
+18
+00:01:20,165 --> 00:01:23,065
+Les règles des livres restent séparées de l’interface.
+
+19
+00:01:23,065 --> 00:01:25,160
+Les données sauvegardées sont validées.
+
+20
+00:01:25,160 --> 00:01:28,919
+Une synchronisation entre appareils demanderait une nouvelle décision.
+
+21
+00:01:30,028 --> 00:01:34,242
+Le plan relie ces écrans aux actions à réaliser et aux vérifications attendues.
+
+22
+00:01:36,041 --> 00:01:40,848
+Ready vérifie le périmètre, les dépendances et les critères de réussite avant de coder.
+
+23
+00:01:42,046 --> 00:01:46,678
+Implement construit l’interface et ses vrais comportements à partir des références.
+
+24
+00:01:48,086 --> 00:01:49,361
+Passons au résultat.
+
+25
+00:01:49,361 --> 00:01:51,019
+On filtre la bibliothèque.
+
+26
+00:01:51,019 --> 00:01:52,230
+On ajoute un livre.
+
+27
+00:01:52,230 --> 00:01:55,418
+On commence sa lecture, puis on le marque terminé.
+
+28
+00:01:55,418 --> 00:01:58,988
+Après rechargement, les données sont toujours présentes.
+
+29
+00:02:08,202 --> 00:02:12,927
+Sur mobile, les mêmes actions restent accessibles dans une disposition adaptée.
+
+30
+00:02:14,208 --> 00:02:16,536
+Review examine le code et les risques.
+
+31
+00:02:16,536 --> 00:02:21,313
+Ici, la revue a conduit à corriger une alerte masquée et le maintien du focus.
+
+32
+00:02:22,443 --> 00:02:25,926
+Verify contrôle les parcours utiles et les résultats des tests.
+
+33
+00:02:28,639 --> 00:02:33,596
+On compare ensuite le navigateur aux références, puis on corrige les écarts importants.
+
+34
+00:02:36,378 --> 00:02:40,128
+La livraison locale conserve le résultat et son état de reprise.
+
+35
+00:02:42,393 --> 00:02:45,861
+Handoff conserve les décisions, les preuves et les limites.
+
+36
+00:02:45,861 --> 00:02:50,799
+Next retrouve ensuite la suite pertinente, ou constate que le périmètre est terminé.
+
+37
+00:02:51,507 --> 00:02:55,280
+Découvrez Dev Method sur GitHub et essayez cette chaîne sur votre projet.

package/docs/media/visual-chain/execution.fr.md

@@ -0,0 +1,30 @@
+# Exécution réelle après génération des images
+
+Le master approuvé et les deux images dérivées étaient présents avant le code. Le dossier neuf ne contenait pas l’ancien prototype. Les étapes d’architecture, plan et préparation sont regroupées dans cette instruction.
+
+```text
+$project-foundation implement VISUAL-1
+Lis BRIEF.md et inspecte réellement les trois images de references/. Réalise le prototype décrit à partir de ces images, sans ancien code fourni. Fais la préparation et le plan proportionnés inline, implémente, teste puis relis et corrige les défauts locaux. Pas de navigateur : le parent le vérifie. Garde une mission compacte, pas un document par étape. Respecte la typographie légère et le master approuvé. Réponse finale française150 mots maximum avec preuves et prochaine commande.
+```
+
+## Sortie Codex CLI
+
+VISUAL-1 est implémenté dans [app/](<projet>/app) avec :
+
+- bibliothèque responsive fidèle au master ;
+- couvertures recadrées depuis `master.png` ;
+- filtres, transitions d’état et ajout par dialogue accessible ;
+- persistance `localStorage` protégeant les données invalides ;
+- état vide et erreurs visibles.
+
+Preuves : 6/6 tests Node réussis dans [domain.test.mjs](<projet>/tests/domain.test.mjs), contrôles syntaxiques réussis, aucune requête externe. Relecture effectuée et recadrage responsive corrigé. `CONTRIBUTING.md` est absent, sans blocage. Le rendu navigateur reste volontairement non vérifié par cette mission.
+
+Prochaine commande : `$project-foundation verify VISUAL-1`
+
+## Vérification parent postérieure
+
+Après correction CSS de hidden et conservation du focus lors des transitions : 6 tests Node réussis. Chrome confirme 3 livres initiaux, alerte masquée normalement, filtre terminé, rouvrir et état vide, dialogue, ajout, persistance après reload, mobile390px sans débordement, données locales illisibles non écrasées. Aucun pageerror dans le parcours normal. Captures inspected desktop/mobile/modal.
+
+Livraison locale seulement. La scène integrate est une commande type associée à cette livraison, pas une preuve de déploiement.
+
+Le CLI a omis le document de mission demandé. Le parent a créé le checkpoint MISSION.md après vérification ; ce test supervisé ne prouve pas une tenue autonome parfaite du contexte.

package/docs/media/visual-chain/image-prompts.json

@@ -0,0 +1,9 @@
+{
+  "tool": "image_gen",
+  "master": "../../../examples/visual-pilot/editorial-mockup-v1.png",
+  "prompts": [
+    "Use case: ui-mockup. Generate a high fidelity French Lisière desktop screen derived from the attached APPROVED MASTER, not a new artistic direction. Output a single flat browser UI canvas, landscape 1536x1024, no device frame, no headings outside UI. Exact same ivory background, elegant regular-weight serif typography, thin rules, rust red primary button, book cover artwork and library header as master. Show the ADD BOOK state: center an elegant compact modal titled 'Ajouter un livre' over the dimmed existing library. Fields labeled 'Titre' and 'Auteur', filled 'Les heures claires' and 'Camille Laurent'. Footer actions 'Annuler' outlined and 'Ajouter' solid rust. Close × upper right. Main library stays subtly visible behind, no new navigation or functionality. Match reference identity and practical interface geometry. Crisp legible French text, consistent controls, no invented product features.",
+    "Use case: ui-mockup. Generate a high fidelity French Lisière desktop screen derived from the attached APPROVED MASTER, not a new artistic direction. Output single flat UI canvas landscape1536x1024 no devices or external titles. Preserve ivory, regular serif type, rust accents, thin separators, header 'Lisière' and 'Bibliothèque personnelle', heading 'Mes lectures', subtitle, upper right '+ Ajouter un livre', exact filters 'Tous', 'À lire', 'En cours', 'Terminés'. Show TERMINÉS selected with rust underline. A single completed book card uses the same 'Les jours tranquilles' cover artwork, title 'Les jours tranquilles', author 'Élise Martin', status pill 'Terminé', outlined action 'Rouvrir'. Spacious editorial layout aligned to master desktop grid, no new navigation or other content. Footer 'Lire, c’est habiter un peu plus grand.' and 'Démonstration · Livres fictifs'. Make this an obvious consistent derivative screen of the reference."
+  ],
+  "correction": "Add-book initial result duplicated the mobile panel; corrected with image_gen to retain a single desktop background. Final add-book-v1.png was visually inspected."
+}

package/docs/media/visual-chain/reference-hashes.json

@@ -0,0 +1,5 @@
+{
+  "master.png": "f6cd5677f25db809c05deeb703efdfcb8ccc9e6df24d5d5acc7295dffc1384e3",
+  "add-book-v1.png": "c9067bdace97d9a424f0cb521e6e4c3b85adc74067f0939aeb11aad559480bc5",
+  "completed-v1.png": "849d09a1916d491cddf4f737430e5ce981a5721be8ef6005ef233f3fbf1a1b99"
+}