# 🗺️ P17 — Carte d'OLYMPUS visuelle

> **Statut** : 🟡 à coder
> **Priorité Vivien** : haute (« index visuel », « carte branche numérisée »)

---

## ⚡ Idée centrale

> **Une vue graphe interactive de tout OLYMPUS : projets, fichiers, tuiles, doctrines comme des points reliés. Tu zoomes, tu cliques, tu navigues comme dans une carte mentale.**

Pour toi (Vivien) :
> *Au lieu d'une page de cards et de listes, une vraie carte. Chaque chose est un point. Les choses liées sont reliées par des traits. Tu vois d'un coup d'œil l'ensemble + les liens. Tu cliques pour zoomer.*

---

## 🎯 Inspiration

- **Obsidian Graph View** : référence du genre — boules + traits, beau et navigable
- **Roam Research** : networked thought
- **Neo4j Browser** : graph database visualization
- **C4 Model** (Simon Brown) : zoom-in / zoom-out hiérarchique

---

## 🛠️ Tech stack proposée

- **Cytoscape.js** (déjà dans la stack JARVIS via `D3` et `Cytoscape.js` mentionnés dans P11)
- Ou **D3.js** force layout
- Ou **vis.js** pour simplicité
- HTML/JS pur, intégrable dans ZEUS comme un nouvel onglet

---

## 📐 Structure du graphe

**Nœuds** :
- Projets (P10, P11, P12... P20+)
- Documents canoniques (CODEX, doctrines, vocabulaire)
- Tuiles (mosaic, atelier, widget cohérence)
- Endpoints REST (groupés par tranche)
- Chats actifs (live presence)
- Briques du prompt (par catégorie)

**Arêtes (liens)** :
- Projet ↔ projet (dépendances)
- Projet ↔ tuile (concrétisation)
- Doctrine ↔ tuile (encadrement)
- Endpoint ↔ tuile (consommation)
- Chat ↔ projet (ownership)

**Couleurs** :
- Projets actifs (vert)
- Projets en chantier (orange)
- Doctrines (rouge)
- Tuiles incubateur (jaune)
- Tuiles prod (bleu)

---

## 🚦 Phases

### Phase 1 — Endpoint qui sert les données (1 session)
- `GET /api/carte/graph` retourne `{ nodes: [...], edges: [...] }` au format Cytoscape
- Scan automatique du filesystem :
  - 06_PROJETS/OLYMPUS/*.md → projets
  - 01_LOIS/*.md → doctrines
  - apps/*.html → tuiles
  - api_tranche*.py → endpoints

### Phase 2 — Page HTML statique (1 session)
- `01_SERVEUR/NEXUS/Cockpit/statique/_sandbox/atelier/carte_olympus.html`
- Cytoscape.js intégré (CDN ou local)
- Chargement initial via `/api/carte/graph`
- Zoom, pan, sélection

### Phase 3 — Interactivité (1-2 sessions)
- Clic nœud → panneau latéral avec détails (description, liens, actions)
- Filtres : types de nœuds (projets / doctrines / tuiles / etc.)
- Recherche dans les nœuds
- Layout au choix (force / cose / circle / grid)

### Phase 4 — Auto-régénération (1 session)
- Endpoint POST `/api/carte/regenerate` qui rescanne
- Compatible avec drift_audit
- Refresh auto toutes les 30s ou sur action

### Phase 5 — C4 imbriqué (long terme)
- Niveau 1 : vue globale (dépendances projets)
- Niveau 2 : zoom dans un projet (ses fichiers)
- Niveau 3 : zoom dans un fichier (ses fonctions)
- Pattern PLAN_ARCHITECTURE_v10.2 § Axe 4

---

## ⚖️ Limites

- Cytoscape.js peut ramer avec >500 nœuds → filtrage / clustering
- Maintenir les arêtes auto = scan filesystem régulier
- Layout esthétique demande tuning

---

## 🔗 Liens

- Référence : PLAN_ARCHITECTURE_v10.2 § Axe 4 (Diagrammes imbriqués)
- Stack JARVIS P11 : Cytoscape.js, D3.js déjà disponibles
- ZEUS section sec-monde : carte du monde dynamique existante (`/api/nexus/world`)

---

**Statut** : 🟡 À coder. Tech stack identifiée. Ne dépend pas d'autre chose.