rpa_vision_v3/docs/STABILISATION_INTERFACE_VWB_COMPLETE_09JAN2026.md

Stabilisation Interface Visual Workflow Builder - Rapport Complet

Auteur : Dom, Alice, Kiro - 09 janvier 2026

Résumé

Correction complète des problèmes d'interface du Visual Workflow Builder Frontend V2 :

• Suppression des erreurs ResizeObserver
• Correction du drag-and-drop
• Stabilisation de la connexion API avec gestion du mode hors ligne
• Ajout d'un indicateur de connexion dans l'interface
• NOUVEAU (09/01/2026) : Correction de la boucle infinie de chargement

Problèmes Résolus

1. Erreurs ResizeObserver (Tremblements d'interface)

• Cause : Erreurs ResizeObserver loop limit exceeded provoquant des re-rendus constants
• Solution : Suppression multi-couche des erreurs dans index.html et suppressResizeObserverErrors.ts

2. Drag-and-Drop Non Fonctionnel

• Cause : Utilisation de la méthode project() inexistante dans ReactFlow v12
• Solution : Remplacement par getViewport() avec calcul manuel de position

3. Page qui "Saute" et Erreurs JSON

• Cause : Frontend contactant le backend non démarré, recevant du HTML au lieu de JSON
• Solution :
  • Configuration du proxy dans package.json
  • Amélioration de l'apiClient avec gestion gracieuse du mode hors ligne
  • Ajout de l'endpoint /api/health au backend

4. Indicateur de Connexion API

• Nouveau composant : ConnectionIndicator affichant l'état de connexion
• Hook dédié : useConnectionStatus pour une gestion stable de l'état

5. Boucle Infinie de Chargement (CRITIQUE - 09/01/2026)

• Symptôme : La page tournait en boucle infinie, les interactions étaient impossibles
• Cause :
  1. L'état initial du client API était 'checking' au lieu de 'offline'
  2. onConnectionStateChange() notifiait immédiatement l'état actuel au montage
  3. Cette notification déclenchait un re-render, qui re-montait le hook, créant une boucle
• Solution :
  • État initial 'offline' dans apiClient.ts (pas de vérification automatique)
  • Suppression de la notification immédiate dans onConnectionStateChange()
  • Notifications asynchrones avec setTimeout() pour éviter les boucles
  • Constante INITIAL_STATE stable dans useConnectionStatus.ts
  • Utilisation de useRef pour les callbacks (évite les dépendances dans useCallback)

6. Re-renders Excessifs dans WorkflowManager (09/01/2026)

• Symptôme : Le composant WorkflowManager se re-rendait en boucle
• Cause : Le useEffect qui chargeait les workflows dépendait de loadWorkflowList, qui était recréé à chaque render car il dépendait de workflowApi
• Solution :
  • Modification de la dépendance de loadWorkflowList pour ne dépendre que de isOffline
  • Ajout d'un useRef (hasLoadedRef) pour éviter les chargements multiples
  • Le chargement ne se fait qu'une seule fois au montage et quand on passe de offline à online

7. État Initial des Hooks de Connexion (09/01/2026)

• Symptôme : Les hooks useConnectionState et useConnectionStatus pouvaient retourner 'checking' au montage
• Solution :
  • État initial 'offline' pour les deux hooks (constante stable)
  • L'état est mis à jour via l'abonnement aux changements du client API
  • Évite les tentatives de connexion automatiques au montage
  • Utilisation de refs pour éviter les re-créations de callbacks

Fichiers Modifiés

Session initiale

• visual_workflow_builder/frontend/package.json - Ajout du proxy
• visual_workflow_builder/frontend/src/services/apiClient.ts - Gestion mode hors ligne
• visual_workflow_builder/frontend/src/hooks/useConnectionStatus.ts - Nouveau hook
• visual_workflow_builder/frontend/src/components/ConnectionIndicator/index.tsx - Nouveau composant
• visual_workflow_builder/frontend/src/components/Executor/index.tsx - Correction imports
• visual_workflow_builder/frontend/src/App.tsx - Intégration indicateur
• visual_workflow_builder/backend/app_lightweight.py - Ajout endpoint /api/health

Correction boucle infinie (09/01/2026)

• visual_workflow_builder/frontend/src/services/apiClient.ts - État initial 'offline', notifications asynchrones
• visual_workflow_builder/frontend/src/hooks/useApiClient.ts - État initial 'offline', suppression isInitialized
• visual_workflow_builder/frontend/src/hooks/useConnectionStatus.ts - INITIAL_STATE constant, refs pour callbacks

Tests de Validation

# Exécuter les tests de stabilité
python tests/integration/test_vwb_stability_simple.py

# Résultat attendu: 11 tests passés

Architecture de Gestion de Connexion

┌─────────────────────────────────────────────────────────────┐
│                      apiClient.ts                           │
│  - Singleton avec initialisation paresseuse                 │
│  - Gestion des abonnements aux changements d'état           │
│  - Vérifications de connexion périodiques (30s)             │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│              useConnectionState / useConnectionStatus       │
│  - État initial 'offline' (stable)                          │
│  - Abonnement aux changements via callback                  │
│  - Pas de polling actif au montage                          │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│              Composants (WorkflowManager, Executor, etc.)   │
│  - Utilisent les hooks pour l'état de connexion             │
│  - Gèrent gracieusement le mode hors ligne                  │
│  - Pas de re-renders excessifs                              │
└─────────────────────────────────────────────────────────────┘

État Actuel

• ✅ Frontend compile sans erreurs TypeScript
• ✅ Backend Flask démarré sur port 5002
• ✅ Proxy fonctionnel entre frontend (3000) et backend (5002)
• ✅ Indicateur de connexion API intégré
• ✅ Mode hors ligne géré gracieusement
• ✅ Plus de boucle infinie de chargement
• ✅ Interface stable et réactive

Commandes de Démarrage

# Backend VWB
source venv_v3/bin/activate && python visual_workflow_builder/backend/app_lightweight.py

# Frontend VWB
cd visual_workflow_builder/frontend && npm start

URLs

• Frontend : http://localhost:3000
• Backend : http://localhost:5002
• Health Check : http://localhost:5002/api/health