# 👁️ P18 — OBSERVATIONS_CHATS visuel

> **Statut** : 🟡 à coder (Vivien dit « génial à rendre plus visuel »)
> **Priorité Vivien** : moyenne (post sidebar et carte)

---

## ⚡ Idée centrale

> **Le fichier `02_ETAT/OBSERVATIONS_CHATS.md` regroupe les incohérences notées par les chats sans les résoudre. Le rendre VISUEL au lieu de juste texte plat.**

Pour toi (Vivien) :
> *Au lieu d'une longue liste texte, une vue avec catégories visuelles, statuts (résolu / en cours / abandonné), filtres, recherche. Tu vois d'un coup d'œil ce qui pose problème.*

---

## 🎯 Inspiration

- **Trello / Kanban** : colonnes par statut
- **Linear / Jira** : cards avec priorités et tags
- **GitHub Issues** : filtres + recherche
- **Toggl / Notion DB views** : data view multiformat

---

## 📐 Structure proposée

```
┌────────────────────────────────────────────────────┐
│ 👁️ OBSERVATIONS DES CHATS  [+ Ajouter]  [Filtres ▼]│
├────────────────────────────────────────────────────┤
│  À TRIER          EN COURS        RÉSOLU          │
│  ─────────        ──────────      ──────          │
│  [Card 1]         [Card 4]        [Card 7]        │
│  [Card 2]         [Card 5]        [Card 8]        │
│  [Card 3]         [Card 6]                        │
│                                                    │
└────────────────────────────────────────────────────┘
```

Chaque card :
- Auteur (chat origine)
- Date
- Catégorie (drift / UX / bug / amélioration)
- Texte de l'observation
- Statut (à trier / en cours / résolu / abandonné)
- Tags (#vocabulaire, #widget, #endpoint, etc.)

---

## 🛠️ Tech stack

- HTML/JS/CSS pur (style Trello)
- Lecture du `OBSERVATIONS_CHATS.md` actuel + parsing
- Pour ajout/édition : endpoint `POST /api/observations/add`
- Stockage parallèle JSON `OBSERVATIONS_CHATS.json` (machine-readable)
- Markdown reste la source de vérité pour Mona Lisa

---

## 🚦 Phases

### Phase 1 — Parser le markdown (30 min)
- Lire `OBSERVATIONS_CHATS.md`
- Détecter les patterns (titre, auteur, date, contenu, statut)
- Convertir en JSON

### Phase 2 — UI Kanban (1 session)
- Page `_sandbox/atelier/observations_kanban.html`
- 3-4 colonnes par statut
- Cards draggables (HTML5 drag-and-drop)
- Filtres par tag / auteur / date

### Phase 3 — Ajout / édition (1 session)
- Bouton « + Nouvelle observation »
- Modal avec form
- Endpoint REST pour persister
- Synchro markdown ↔ JSON automatique

### Phase 4 — Intégration ZEUS (30 min)
- Onglet « Observations » ou raccourci dans atelier
- Live count dans la sidebar future

---

## ⚖️ Limites

- Markdown ↔ JSON : risque de désync
- Solution : régénérer le markdown depuis JSON après chaque modif
- Drag-and-drop = JS pur ou library (Sortable.js)

---

## 🔗 Liens

- Source actuelle : `MNEMOSYNE/02_ETAT/OBSERVATIONS_CHATS.md`
- Pattern : Kanban (Toyota / Trello)
- Adresse future : `/statique/_sandbox/atelier/observations_kanban.html`

---

**Statut** : 🟡 À coder, dépendance faible (juste lecture du .md existant).