v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution

- Frontend v4 accessible sur réseau local (192.168.1.40)
- Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard)
- Ollama GPU fonctionnel
- Self-healing interactif
- Dashboard confiance

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

visual_workflow_builder/DRAG_DROP_FIX.md

@@ -0,0 +1,162 @@
+# 🔧 Corrections Drag-and-Drop
+
+## Problèmes identifiés et corrigés
+
+### 1. ⚠️ Warning React Flow - nodeTypes/edgeTypes
+
+**Problème** : 
+```
+[React Flow]: It looks like you have created a new nodeTypes or edgeTypes object.
+```
+
+Les objets `nodeTypes` et `edgeTypes` étaient définis à l'intérieur du composant Canvas, donc recréés à chaque render, causant des re-renders inutiles.
+
+**Solution** :
+Déplacé les définitions en dehors du composant :
+
+```typescript
+// AVANT (dans le composant)
+const Canvas: React.FC<CanvasProps> = ({...}) => {
+  const nodeTypes: NodeTypes = {
+    custom: CustomNode,
+  };
+  // ...
+}
+
+// APRÈS (en dehors du composant)
+const nodeTypes: NodeTypes = {
+  custom: CustomNode,
+};
+
+const edgeTypes = {
+  custom: CustomEdge,
+};
+
+const Canvas: React.FC<CanvasProps> = ({...}) => {
+  // ...
+}
+```
+
+### 2. 🖱️ Clic non fonctionnel dans la Palette
+
+**Problème** :
+Le `ListItem` à l'intérieur du `Paper` interceptait les événements de clic, empêchant le handler `onClick` du `Paper` de se déclencher.
+
+**Solution** :
+- Ajout de `e.stopPropagation()` dans le handler onClick
+- Ajout de `disableGutters` sur le ListItem pour éviter les conflits
+
+```typescript
+// AVANT
+<Paper onClick={() => handleNodeClick(node.id)}>
+  <ListItem>
+    {/* contenu */}
+  </ListItem>
+</Paper>
+
+// APRÈS
+<Paper onClick={(e) => {
+  e.stopPropagation();
+  handleNodeClick(node.id);
+}}>
+  <ListItem disableGutters>
+    {/* contenu */}
+  </ListItem>
+</Paper>
+```
+
+### 3. 🐛 Logs de débogage ajoutés
+
+Pour faciliter le diagnostic, des logs ont été ajoutés dans :
+
+**Palette** (`handleNodeClick`) :
+```typescript
+console.log('Palette: Node clicked:', nodeType);
+```
+
+**App** (`handleNodeAdd`) :
+```typescript
+console.log('App: Adding node of type:', type);
+console.log('App: New node created:', newNode);
+console.log('App: Updated nodes:', updated);
+```
+
+**Canvas** (`handleDrop`) :
+```typescript
+console.log('Canvas: Drop event triggered');
+console.log('Canvas: Node type from drag:', nodeType);
+console.log('Canvas: Calling onNodeAdd with type:', nodeType);
+```
+
+## Test après corrections
+
+### Redémarrer l'application
+
+```bash
+cd visual_workflow_builder
+./stop.sh
+./start.sh
+```
+
+### Ouvrir et tester
+
+1. Ouvre http://localhost:3000
+2. Ouvre la console (F12)
+3. **Test clic** : Clique sur "Cliquer" dans la palette
+   - Tu devrais voir les logs dans la console
+   - Le node devrait apparaître sur le canvas
+4. **Test drag-and-drop** : Glisse "Saisir du texte" vers le canvas
+   - Tu devrais voir les logs de drop
+   - Le node devrait apparaître où tu l'as relâché
+
+### Vérifier les logs
+
+Si tout fonctionne, tu verras dans la console :
+
+**Pour un clic** :
+```
+Palette: Node clicked: click
+App: Adding node of type: click
+App: New node created: {id: "node-1733...", type: "click", ...}
+App: Updated nodes: [{...}]
+```
+
+**Pour un drag-and-drop** :
+```
+Canvas: Drop event triggered
+Canvas: Node type from drag: click
+Canvas: Calling onNodeAdd with type: click
+App: Adding node of type: click
+App: New node created: {id: "node-1733...", type: "click", ...}
+App: Updated nodes: [{...}]
+```
+
+## Fichiers modifiés
+
+1. `frontend/src/components/Canvas/index.tsx`
+   - Déplacé nodeTypes/edgeTypes en dehors du composant
+   - Ajouté logs de débogage dans handleDrop
+
+2. `frontend/src/components/Palette/index.tsx`
+   - Ajouté e.stopPropagation() dans onClick
+   - Ajouté disableGutters sur ListItem
+   - Ajouté logs de débogage dans handleNodeClick
+
+3. `frontend/src/App.tsx`
+   - Ajouté logs de débogage dans handleNodeAdd
+
+## Prochaines étapes
+
+Une fois que tu confirmes que tout fonctionne :
+
+1. ✅ Le warning React Flow devrait avoir disparu
+2. ✅ Le clic devrait fonctionner
+3. ✅ Le drag-and-drop devrait fonctionner
+4. 🧹 On pourra retirer les console.log si tu veux un code plus propre
+
+## Besoin d'aide ?
+
+Si ça ne fonctionne toujours pas :
+1. Partage les logs de la console
+2. Indique quelle méthode ne fonctionne pas (clic ou drag-and-drop)
+3. Je pourrai identifier le problème exact