🟠 Implement useReconnectSync hook

[up-guillaume]

Objectif

Créer un hook React qui synchronise automatiquement le frontend avec les exécutions terminées après reconnexion WebSocket.

Implémentation

Fichier: frontend/src/hooks/useReconnectSync.ts

import { useEffect, useRef } from 'react';
import { api } from '../utils/api';

interface UseReconnectSyncOptions {
  sessionId: string;
  connected: boolean;
  appendMessage: (msg: any) => void;
  setStreaming: (streaming: boolean) => void;
}

export function useReconnectSync({
  sessionId,
  connected,
  appendMessage,
  setStreaming,
}: UseReconnectSyncOptions) {
  const lastSyncRef = useRef<number>(0);
  const isSyncingRef = useRef(false);

  useEffect(() => {
    if (connected && !isSyncingRef.current) {
      syncExecutions();
    }
  }, [connected]);

  const syncExecutions = async () => {
    isSyncingRef.current = true;
    
    try {
      // 1. Fetch running executions
      const { executions } = await api.get(
        `/executions/session/${sessionId}/running`
      );
      
      for (const exec of executions) {
        if (exec.status === 'completed' && exec.completed_at) {
          // 2a. Fetch final result
          const result = await api.get(`/executions/${exec.execution_id}/status`);
          
          if (result.final_response) {
            appendMessage({
              role: 'assistant',
              content: result.final_response,
              timestamp: exec.completed_at,
            });
          }
        } else if (exec.status === 'running') {
          // 2b. Replay events (optional for V10.13)
          // TODO: V10.14 — Replay complet des événements intermédiaires
          setStreaming(true);
        }
      }
      
      lastSyncRef.current = Date.now();
    } catch (error) {
      console.error('[ReconnectSync] Failed:', error);
    } finally {
      isSyncingRef.current = false;
    }
  };

  return { syncExecutions };
}

Intégration dans Chat.tsx

import { useReconnectSync } from '../hooks/useReconnectSync';

const { syncExecutions } = useReconnectSync({
  sessionId: wsSessionId,
  connected,
  appendMessage: (msg) => setMessages(prev => [...prev, msg]),
  setStreaming,
});

Critères de Succès

• ✅ Hook détecte les exécutions terminées
• ✅ Messages ajoutés automatiquement au reconnect
• ✅ Latence sync < 2s
• ✅ Pas de race conditions (isSyncingRef)
• ✅ Gestion d'erreurs robuste

Priorité

P1 — High pour V10.13

Phase

Phase 2: Frontend Reconnect Handler

✅ Implémenté

• Hook useReconnectSync créé dans frontend/src/hooks/useReconnectSync.ts
• Intégré dans Chat.tsx (ligne 307)
• Utilise fetch direct avec token (consistent avec les autres hooks)
• Commit: 4aff32e9
• Frontend rebuildé et déployé

Statut: ✅ Phase 2 terminée (sans UI indicator, à ajouter plus tard)

[up-guillaume]

✅ Implémenté

• Hook useReconnectSync créé dans frontend/src/hooks/useReconnectSync.ts
• Intégré dans Chat.tsx (ligne 307)
• Utilise fetch direct avec token (consistent avec les autres hooks)
• Commit: 4aff32e9
• Frontend rebuildé et déployé

Statut: ✅ Phase 2 terminée (sans UI indicator, à ajouter plus tard)