From bf40b40f965369d0ccf3deca44790650d0f2eec8 Mon Sep 17 00:00:00 2001 From: Jules Neny Date: Wed, 29 Apr 2026 01:46:00 +0200 Subject: [PATCH] docs(p5b): journal deploy + INDEX + prompt BrowserMCP E2E - JOURNAL-V2.md : entree 2026-04-29, chantier P1->P5b, smoke test prod - aep-communaute-build/INDEX.md : 10/11 cases cochees (manque E2E Jules) - aep-communaute-build/PROMPT-BROWSERMCP-E2E.md : prompt E2E 5 scenarios desktop+mobile Co-Authored-By: Claude Sonnet 4.6 --- JOURNAL-V2.md | 42 +++++ aep-communaute-build/INDEX.md | 45 +++++ aep-communaute-build/PROMPT-BROWSERMCP-E2E.md | 172 ++++++++++++++++++ 3 files changed, 259 insertions(+) create mode 100644 aep-communaute-build/INDEX.md create mode 100644 aep-communaute-build/PROMPT-BROWSERMCP-E2E.md diff --git a/JOURNAL-V2.md b/JOURNAL-V2.md index fba9bc3..f1025d1 100644 --- a/JOURNAL-V2.md +++ b/JOURNAL-V2.md @@ -11,6 +11,48 @@ Journal technique de la V2. Décisions, anomalies, points bloquants, TODOs. --- +## 2026-04-29 — Cascade Onglet 1 : Pratiques régénératives (P1 → P5b) + +**Commit deploy :** `e80b226` (feat/aep-pratiques-regeneratives, 10 commits depuis main) +**Exécutant :** Sonnet (agent autonome P1-P5b) + +### Chantier P1 → P5b (résumé) + +Création complète de l'onglet "Pratiques régénératives" sur `aep.trans-former.fr` : + +- **P1** : scaffold types + API statique `GET /api/pratiques` (52 fiches JSON `public/data/pratiques-regeneratives.json`) +- **P2** : page `/pratiques-regeneratives` — carte Leaflet Europe + accordéon DOM-TOM, sidebar filtres (type, pays, matériaux), composants `PratiqueCard.vue` + `PratiqueModal.vue` +- **P3** : ajout onglet "Pratiques régé" dans le header nav desktop + hamburger mobile +- **P4** : page `/proposer-pratique` — formulaire contribution avec Zod, endpoint `POST /api/submit-pratique` avec rate limit, `public/data/pratiques-pending.json` +- **P5a** : build local validé (3.04 MB, APIs 200, 500 SSR = bug Windows/Node 24 préexistant non-bloquant) +- **P5b** : deploy prod + smoke test (3/3 endpoints 200, SSR title OK, JSON 52 fiches) + +### Deploy + +- Méthode : `tar .output/ | ssh vps-hetzner "cd /opt/aep && tar -xzf -"` + `systemctl restart aep` +- Env diff local vs VPS : VPS a des vars supplémentaires (MISTRAL, NOCODB worker, RESEND) — additionnel non-conflictuel, pas d'impact +- Note `deploy.sh` : le script a un BOM UTF-8 (ligne 1 `\xEF\xBB\xBF#!/bin/bash`) qui cause un exit 1 sur le `read -p` quand stdin est un pipe. Contournement : exécution manuelle des étapes. A corriger en V3. + +### Smoke test prod (2026-04-29 01:38 UTC) + +| Endpoint | HTTP | Note | +|---|---|---| +| GET /pratiques-regeneratives | 200 | SSR OK, titre trouvé (2 occurrences) | +| GET /proposer-pratique | 200 | SSR OK | +| GET /api/pratiques | 200 | JSON valid, 52 fiches | + +### Ce qui reste à valider (Jules, E2E BrowserMCP) + +- Markers Leaflet visibles + cliquables (Europe + DOM-TOM) +- Sidebar filtres fonctionnels (type, pays, matériaux) +- Modal fiche + bouton retour preservant filtres +- Formulaire `/proposer-pratique` : submit + message succès +- Comportement mobile 375×667 (sheet bas, swipe filtres, fiche pleine page) + +Prompt E2E disponible : `aep-communaute-build/PROMPT-BROWSERMCP-E2E.md` + +--- + ## 2026-04-27 — Session V3 : Finition mobile + Blog Liberapay + 3 deploys **Commit :** `a02a555` — feat(mobile): accordéon outremer, hamburger nav, logo AEP, fiches cliquables, chatbot fullscreen diff --git a/aep-communaute-build/INDEX.md b/aep-communaute-build/INDEX.md new file mode 100644 index 0000000..ef2b578 --- /dev/null +++ b/aep-communaute-build/INDEX.md @@ -0,0 +1,45 @@ +# INDEX — Cascade Onglet 1 : Pratiques régénératives + +> Branche : `feat/aep-pratiques-regeneratives` +> Démarré : 2026-04-28 +> Dernière mise à jour : 2026-04-29 + +## Statut global + +``` +P1 Types + API statique [x] done — commit a70c9e0 +P2 Page /pratiques-regeneratives [x] done — commit a70c9e0 +P3 Onglet nav + hamburger [x] done — commit 5fabcde +P4 /proposer-pratique + POST API [x] done — commits 83d4bd1 d10586c f25a7d3 +P5a Build local + smoke test [x] done — commit e80b226 (recap P5a-RECAP.md) +P5b Deploy prod + smoke test prod [x] done — deploy 2026-04-29 01:38 UTC +JOURNAL-V2.md entrée 2026-04-29 [x] done +PROMPT-BROWSERMCP-E2E.md créé [x] done +Branche pushée sur Gitea [x] done — feat/aep-pratiques-regeneratives +Mise en ligne validée (E2E Jules) [ ] en attente — Jules sur autre PC +``` + +## Fichiers produits + +| Fichier | Description | +|---------|-------------| +| `aep-communaute-build/P4-RECAP.md` | Récap chantier P4 form + API | +| `aep-communaute-build/P5a-RECAP.md` | Récap build local Windows | +| `aep-communaute-build/PROMPT-BROWSERMCP-E2E.md` | Prompt E2E pour Jules (autre PC) | +| `aep-communaute-build/INDEX.md` | Ce fichier | + +## Smoke test prod (2026-04-29 01:38 UTC) + +| Endpoint | HTTP | Detail | +|----------|------|--------| +| GET /pratiques-regeneratives | 200 | SSR OK, titre trouve (2 occurrences) | +| GET /proposer-pratique | 200 | SSR OK | +| GET /api/pratiques | 200 | JSON valid, 52 fiches | + +## Action Jules + +1. Copier `PROMPT-BROWSERMCP-E2E.md` sur le PC avec BrowserMCP + Brave +2. Lancer une session Claude Code, coller le prompt +3. Reporter les resultats dans `aep-communaute-build/E2E-RESULTS.md` +4. Cocher "Mise en ligne validee (E2E Jules)" ci-dessus +5. Merger `feat/aep-pratiques-regeneratives` dans `main` diff --git a/aep-communaute-build/PROMPT-BROWSERMCP-E2E.md b/aep-communaute-build/PROMPT-BROWSERMCP-E2E.md new file mode 100644 index 0000000..9dd5129 --- /dev/null +++ b/aep-communaute-build/PROMPT-BROWSERMCP-E2E.md @@ -0,0 +1,172 @@ +# PROMPT BrowserMCP — E2E Onglet Pratiques régénératives +> Cascade onglet 1 — à coller dans une session Claude Code avec BrowserMCP attaché à Brave. +> Date de création : 2026-04-29 + +--- + +## Mission + +Tester en E2E les deux nouvelles pages de `aep.trans-former.fr` liées à l'onglet "Pratiques régénératives" : la carte principale `/pratiques-regeneratives` et le formulaire de contribution `/proposer-pratique`. Couvrir desktop ET mobile. Reporter tous les bugs trouvés (console JS, visuels, fonctionnels). + +**URL de base :** `https://aep.trans-former.fr` +**Navigateur :** Brave avec extension BrowserMCP +**Mode :** Full auto, rapport final structuré + +--- + +## Setup initial + +1. Ouvre BrowserMCP et navigue vers `https://aep.trans-former.fr/pratiques-regeneratives` +2. Attends que la page soit fully loaded (pas de spinner Leaflet) +3. Prends un screenshot de référence `desktop-initial.png` + +--- + +## Scenario 1 — Carte desktop (chargement + structure) + +**Objectif :** vérifier que la carte s'affiche correctement avec markers et sidebar. + +Étapes : +1. `navigate` vers `https://aep.trans-former.fr/pratiques-regeneratives` +2. Attendre 3s (Leaflet init) +3. `snapshot` — décrire ce qui est visible : carte Europe, sidebar gauche, onglet header actif +4. Vérifier dans le DOM : + - Présence d'au moins 1 marker Leaflet (chercher `.leaflet-marker-icon` ou `.leaflet-pane`) + - Sidebar visible avec des cartes de pratiques (chercher titres/noms) + - Bandeau DOM-TOM présent en bas (textes Guadeloupe/Martinique/Réunion...) +5. Ouvrir la console (`evaluate` `window.__AEP_DEBUG__ || 'no debug'`) — noter les erreurs JS si présentes +6. `evaluate` `fetch('/api/pratiques').then(r=>r.json()).then(d=>d.list.length)` — doit retourner 52 + +Bugs à surveiller : +- Carte blanche (Leaflet tiles non chargés) +- Markers manquants ou hors viewport +- CSS `--nav-primary-solid` non résolu (barre nav sans couleur) +- Erreurs console "leaflet", "vue warn", "hydration mismatch" + +--- + +## Scenario 2 — Filtres sidebar (criteres + pays + type) + +**Objectif :** vérifier que les filtres réduisent bien les résultats. + +Étapes : +1. Depuis `/pratiques-regeneratives` desktop, noter le nombre de fiches dans la sidebar (label "X résultats" ou count visible) +2. Cliquer sur le chip "Matériaux" dans les filtres critères +3. Attendre 500ms — `snapshot` — noter le nouveau count +4. Cliquer sur le chip "Pays" (ou sélectionner France dans le filtre pays si c'est un select) +5. `snapshot` — noter le count (doit être inférieur ou égal à l'étape 3) +6. Cliquer sur le type "Coopérative" si accessible +7. `snapshot` — noter le count +8. Cliquer "Réinitialiser" ou le bouton reset — vérifier que le count revient au total (52) + +Bugs à surveiller : +- Filtre appliqué mais count ne change pas +- Markers sur la carte non synchronisés avec la sidebar +- Reset qui ne fonctionne pas +- Chip actif sans indicateur visuel + +--- + +## Scenario 3 — Fiche pratique (clic marker ou card + retour) + +**Objectif :** vérifier que l'ouverture d'une fiche fonctionne et que le retour préserve les filtres. + +Étapes : +1. Appliquer un filtre (ex: "Matériaux") pour avoir < 52 résultats +2. Cliquer sur une card dans la sidebar OU un marker sur la carte +3. `snapshot` — décrire ce qui est affiché : modal ? Page fiche ? URL change ? +4. Vérifier que la fiche contient : nom, description, critères, type, pays, URL (si disponible) +5. Cliquer le bouton "Retour" ou `navigateBack` +6. `snapshot` — vérifier que le filtre "Matériaux" est toujours actif et le count identique à avant + +Bugs à surveiller : +- Clic sur card ne navigue pas +- Page fiche vide ou 404 +- Bouton retour recharge sans filtres +- Scroll position perdu + +--- + +## Scenario 4 — Formulaire de contribution + +**Objectif :** soumettre une proposition valide et vérifier le message de succès. + +Étapes : +1. `navigate` vers `https://aep.trans-former.fr/proposer-pratique` +2. `snapshot` — décrire le formulaire visible +3. Remplir les champs suivants : + - `#nom` : "Test BrowserMCP E2E" + - `#url` : "https://example.com/test-e2e" + - `#description_user` : "Pratique de test soumise automatiquement par BrowserMCP pour valider le pipeline de contribution de l'onglet Pratiques régénératives. Cette description fait plus de 100 caractères." + - Critères : cocher au moins 3 checkboxes (ex: "Matériaux", "Posture", "Vivant") + - Type d'entité : sélectionner "Collectif" + - Pays : sélectionner "France" dans le select +4. `snapshot` avant envoi — vérifier que les champs sont remplis +5. Cliquer le bouton `submit` du formulaire +6. Attendre 3s +7. `snapshot` — chercher le message de succès "Merci !" + "Ta proposition est en attente de modération." + +Bugs à surveiller : +- Validation côté client ne se déclenche pas +- Submit retourne une erreur réseau (verifier dans console : `fetch POST /api/submit-pratique`) +- Message succès ne s'affiche pas +- Rate limit 429 (normal si on a soumis plusieurs fois — attendre 1h ou ignorer si premier test) + +Note : si rate limit 429, c'est le comportement attendu. Réessayer en changeant légèrement le nom. + +--- + +## Scenario 5 — Mobile (viewport 375x667) + +**Objectif :** valider l'expérience mobile de base. + +Étapes : +1. Changer le viewport à 375x667 (iPhone SE) via `setViewport` ou équivalent BrowserMCP +2. `navigate` vers `https://aep.trans-former.fr/pratiques-regeneratives` +3. Attendre 3s +4. `snapshot` — décrire : sheet en bas ? Carte en fond plein écran ? Header avec hamburger ? +5. Tenter d'interagir avec la sheet du bas (si elle existe) : tapper sur le header de la sheet pour l'agrandir +6. `snapshot` — sheet en mode "half" ou "full" ? +7. Vérifier que les filtres sont accessibles (dans la sheet ou dans un drawer) +8. Cliquer une card si visible +9. `snapshot` — fiche pleine page ou modal plein écran ? +10. `navigate` vers `https://aep.trans-former.fr/proposer-pratique` +11. `snapshot` — formulaire lisible et accessible sur mobile ? + +Bugs à surveiller : +- Sheet absente ou non draggable +- Carte non visible derrière la sheet +- Hamburger nav manquant +- Formulaire /proposer-pratique avec overflow horizontal + +--- + +## Format de récap final attendu + +``` +Cascade onglet 1 — E2E [PASS / FAIL avec [N] bugs H] + +Scénarios : [N]/5 OK +Bugs : [N] High / [N] Medium / [N] Low +Erreurs console : [N] (liste si > 0) + +Détail par scénario : +S1 Carte desktop : [PASS/FAIL] — [note courte] +S2 Filtres : [PASS/FAIL] — [note courte] +S3 Fiche + retour: [PASS/FAIL] — [note courte] +S4 Form submit : [PASS/FAIL] — [note courte] +S5 Mobile : [PASS/FAIL] — [note courte] + +Bugs H : +- [description + étape] + +Bugs M : +- [description + étape] + +Bugs L : +- [description + étape] + +Screenshots : [N] pris +``` + +Envoyer ce récap à Jules (copier dans la session pilote ou dans `aep-communaute-build/E2E-RESULTS.md`).