> ⚠️ **OBSOLÈTE PARTIEL — audit 2026-05-13** : ce doc référence des ports morts (~~:9011~~ → :10001, ~~:9010~~ → :10001, etc.). Le seul port valide pour la sphère/cockpit est **:10001** (NEXUS). Mis à jour par 114-GAMEDIVINE. Voir `MNEMOSYNE/01_LOIS/DOCTRINE_PORTS_OLYMPUS.md`.

# 🎨 P16 — Tuiles modifiables par prompt

> **Statut** : 🛠️ Q10 livrée (lecture/écriture), à étendre vers prompt-driven
> **Priorité Vivien** : très haute (idée explicite à plusieurs reprises)

---

## ⚡ Idée centrale

> **Chaque tuile du Cockpit a sa description en mots simples. Tu peux la modifier en TAPANT directement ce que tu veux changer ; Claude fait la modification.**

Pour toi (Vivien) en mots simples :
> *Tu cliques sur une tuile, tu vois son texte. Tu écris « rajoute un bouton vert qui fait X », l'IA modifie le code de la tuile. Pas besoin de coder.*

---

## 🎯 État actuel (Q10 livré le 28/04)

✅ **Q10 — Tuile auto-décrite** (lecture/écriture markdown) :
- URL : http://127.0.0.1~~:10001~~ → :10001/statique/_sandbox/atelier/tuile_auto_decrite.html
- 4 endpoints REST :
  - `GET /api/tuile/list`
  - `GET /api/tuile/{id}/description`
  - `POST /api/tuile/{id}/description` (snapshot Mona Lisa avant)
  - `POST /api/tuile/{id}/description/template` (génère un template)
- Stockage : `01_SERVEUR/NEXUS/Cockpit/descriptions/{id}.md`
- 4 tuiles par défaut créées : atelier_olympus, coherence_widget, carte_olympus, tuile_demo

→ Vivien peut DÉJÀ lire / écrire la description d'une tuile en markdown.

---

## 🚀 Extension P16 — pilotage par prompt naturel

**À ajouter** :
1. **Champ prompt** dans l'éditeur : « Décris ce que tu veux modifier »
2. **Bouton « Demander à Claude de modifier »** :
   - Envoie la description actuelle + le prompt à un endpoint
   - L'endpoint appelle Claude (via le chat ouvert) ou Ollama local
   - Récupère la nouvelle version
   - Affiche en preview
   - Vivien valide → sauvegarde
3. **Pour le CODE de la tuile** (pas juste sa description) :
   - Pareil, mais cible le HTML/JS/CSS de la tuile
   - Plus risqué → toujours en incubateur

---

## 📐 Workflow complet proposé

```
1. Vivien clique sur une tuile (ex: « météo du matin »)
2. Modal s'ouvre avec :
   - Aperçu de la tuile
   - Description (markdown)
   - Champ prompt : « Que veux-tu modifier ? »
3. Vivien tape : « Ajoute la température max prévue »
4. Bouton « Demander à Claude »
5. Claude reçoit : tuile actuelle + prompt
6. Claude renvoie : nouvelle version (description + code)
7. Modal montre le DIFF avant/après
8. Vivien valide ou critique
9. Si valide : snapshot Mona Lisa + écriture
10. Si critique : Vivien précise, on itère
```

---

## 🛠️ Composants à coder

### Frontend (extension `tuile_auto_decrite.html`)
- Section « Modifier par prompt »
- Diff viewer (avant / après)
- Bouton valider / itérer

### Backend (`api_tuiles.py`)
- Endpoint `POST /api/tuile/{id}/modify-by-prompt`
  - Input : `{ prompt: string, target: "description"|"code" }`
  - Output : `{ proposed_content, diff }`
- Logique : LLM appelé (Claude via chat OU Ollama local) avec contexte tuile

### Connecteur LLM
- Si Vivien refuse les API payantes, on utilise :
  - Le chat Claude Desktop (messages JSON-RPC ou similaire — complexe)
  - Ollama local (gratuit, mais pas Claude qualité)
- **Alternative simple** : Vivien copie/colle dans son chat Claude actuel, Claude renvoie, Vivien colle dans le modal

---

## ⚖️ Limites

- Sans API Claude, automation complète difficile (workaround : copier-coller)
- Modifier le CODE d'une tuile (HTML/JS) = risqué → toujours snapshot + incubateur
- Une tuile complexe peut nécessiter plusieurs itérations

---

## 🔗 Lien avec autres projets

- **P21** (Mosaic incubateur) : les tuiles brutes du mosaic deviennent éditables par P16
- **P19** (Atelier prompt) : si Vivien veut piloter aussi les briques du prompt système
- **R29** (Auto-Cohérence) : modification de tuile doit respecter le drift_audit

---

## 📝 Phases

### Phase 0 — Q10 (livré)
✅ Lecture / écriture markdown de la description.

### Phase 1 — Diff & preview (1 session)
- Ajouter un viewer diff dans la page éditeur
- Permettre de comparer 2 versions

### Phase 2 — Prompt-driven description (1-2 sessions)
- Ajouter champ prompt
- Endpoint qui prend prompt + description actuelle
- Appel Claude via méthode Vivien-friendly (à définir)

### Phase 3 — Prompt-driven code (2-3 sessions)
- Étendre au CODE HTML/JS/CSS de la tuile
- Sandbox obligatoire
- Tests automatisés

### Phase 4 — Pilotage groupé (1-2 sessions)
- Modifier plusieurs tuiles en une commande
- « Donne le même style à toutes mes tuiles météo »

---

**Statut** : 🛠️ Phase 0 livrée, Phase 1+ à coder.