# Stabilisation API Hors Ligne - Visual Workflow Builder
**Auteur : Dom, Alice, Kiro - 09 janvier 2026**

## Résumé

Correction des problèmes de "saut de page" et de gestion du mode hors ligne dans le Visual Workflow Builder Frontend V2.

## Problèmes Identifiés

1. **Sauts de page (page "saute")** : Causés par des re-renders excessifs lors des vérifications de santé API avec polling
2. **Erreur JSON parse** : `Unexpected token '<', '<!DOCTYPE'...` - Le frontend recevait du HTML au lieu de JSON quand le backend n'était pas démarré
3. **Warning "API hors ligne"** : Affichage constant d'erreurs même quand le mode hors ligne était attendu

## Solutions Implémentées

### 1. Amélioration de `apiClient.ts`

- Ajout de la détection automatique du mode hors ligne
- Vérification du content-type des réponses pour détecter les réponses HTML
- Système d'abonnement aux changements d'état de connexion (`onConnectionStateChange`)
- Cache des vérifications de santé pour éviter les requêtes excessives
- Retour gracieux de données vides en mode hors ligne au lieu d'erreurs

### 2. Nouveau hook `useConnectionState`

```typescript
export function useConnectionState() {
  const [connectionState, setConnectionState] = useState<ConnectionState>(() => 
    apiClient.getConnectionState()
  );

  useEffect(() => {
    const unsubscribe = apiClient.onConnectionStateChange((state) => {
      setConnectionState(state);
    });
    return unsubscribe;
  }, []);

  return {
    isOnline: connectionState === 'online',
    isOffline: connectionState === 'offline',
    isChecking: connectionState === 'checking',
    connectionState,
    forceCheck,
  };
}
```

### 3. Mise à jour des composants

- **WorkflowManager** : Remplacé `useApiHealth` avec polling par `useConnectionState`
- **Executor** : Remplacé `useApiHealth` avec polling par `useConnectionState`
- Ajout de l'option `silentOffline: true` pour éviter les erreurs en mode hors ligne

## Fichiers Modifiés

1. `visual_workflow_builder/frontend/src/services/apiClient.ts`
2. `visual_workflow_builder/frontend/src/hooks/useApiClient.ts`
3. `visual_workflow_builder/frontend/src/components/WorkflowManager/index.tsx`
4. `visual_workflow_builder/frontend/src/components/Executor/index.tsx`

## Comportement Attendu

### Mode En Ligne (Backend démarré)
- Toutes les fonctionnalités disponibles
- Sauvegarde et chargement des workflows fonctionnels
- Exécution des workflows possible

### Mode Hors Ligne (Backend non démarré)
- Interface stable sans sauts de page
- Indicateur "API Hors ligne" affiché discrètement
- Boutons de sauvegarde/chargement/exécution désactivés
- Pas d'erreurs dans la console du navigateur
- Possibilité de créer des workflows localement

## Tests de Validation

1. ✅ Pas d'erreurs TypeScript dans les fichiers modifiés
2. ✅ Interface stable sans re-renders excessifs
3. ✅ Gestion gracieuse du mode hors ligne
4. ✅ Indicateur d'état de connexion fonctionnel

## Démarrage du Backend VWB

Pour activer toutes les fonctionnalités, démarrer le backend :

```bash
cd visual_workflow_builder/backend
python app_lightweight.py
```

Le backend sera accessible sur le port 5002.

## Conformité

- ✅ Commentaires en français
- ✅ Attribution "Auteur : Dom, Alice, Kiro"
- ✅ Date mise à jour (09 janvier 2026)
- ✅ Documentation dans `docs/`
- ✅ Respect de l'architecture existante