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 <noreply@anthropic.com>
2026-04-29 01:46:00 +02:00
parent e80b226ba2
commit bf40b40f96
3 changed files with 259 additions and 0 deletions
--- 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
--- a/aep-communaute-build/INDEX.md
+++ 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`
--- a/aep-communaute-build/PROMPT-BROWSERMCP-E2E.md
+++ 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`).