diff --git a/visual_workflow_builder/frontend/src/App.tsx b/visual_workflow_builder/frontend/src/App.tsx
new file mode 100644
index 000000000..7d6cae8cc
--- /dev/null
+++ b/visual_workflow_builder/frontend/src/App.tsx
@@ -0,0 +1,630 @@
+/**
+ * Application principale Visual Workflow Builder V2
+ * Auteur : Dom, Alice, Kiro - 09 janvier 2026
+ *
+ * Interface moderne pour la création de workflows d'automatisation RPA
+ * avec sélection visuelle basée sur la vision et terminologie française.
+ */
+
+import { useState, useCallback, useMemo, useEffect, Component, ErrorInfo, ReactNode } from 'react';
+import {
+ Box,
+ CssBaseline,
+ ThemeProvider,
+ createTheme,
+ AppBar,
+ Toolbar,
+ Typography,
+ Tabs,
+ Tab,
+ Drawer,
+ Alert,
+ AlertTitle,
+ Button,
+} from '@mui/material';
+import { Provider } from 'react-redux';
+import { ReactFlowProvider } from '@xyflow/react';
+import { store } from './store';
+
+// Composants principaux
+import Canvas from './components/Canvas';
+import Palette from './components/Palette';
+import PropertiesPanel from './components/PropertiesPanel';
+import VariableManager from './components/VariableManager';
+import DocumentationTab from './components/DocumentationTab';
+import Validator from './components/Validator';
+import Executor from './components/Executor';
+import WorkflowManager from './components/WorkflowManager';
+import ContextualHelp from './components/ContextualHelp';
+import KeyboardShortcuts from './components/KeyboardShortcuts';
+import AccessibilityProvider from './components/AccessibilityProvider';
+import ConnectionIndicator from './components/ConnectionIndicator';
+import TestCatalogLoader from './components/TestCatalogLoader';
+import VWBIntegrationTest from './components/VWBIntegrationTest';
+
+// Hooks personnalisés
+import { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
+import { useResponsiveLayout } from './hooks/useResponsiveLayout';
+
+// Import des types partagés
+import {
+ Step,
+ Variable,
+ StepTemplate,
+ StepCategory,
+ Position,
+ Workflow,
+ WorkflowConnection,
+ StepExecutionState,
+} from './types';
+
+// Error Boundary pour gérer les erreurs de l'application
+interface ErrorBoundaryState {
+ hasError: boolean;
+ error?: Error;
+ errorInfo?: ErrorInfo;
+}
+
+class AppErrorBoundary extends Component<
+ { children: ReactNode },
+ ErrorBoundaryState
+> {
+ constructor(props: { children: ReactNode }) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+ // Met à jour l'état pour afficher l'interface d'erreur
+ return { hasError: true, error };
+ }
+
+ componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+ // Log l'erreur pour le debugging
+ console.error('Erreur capturée par Error Boundary:', error, errorInfo);
+ this.setState({
+ error,
+ errorInfo,
+ });
+ }
+
+ render() {
+ if (this.state.hasError) {
+ return (
+
+
+ Une erreur inattendue s'est produite
+
+ L'application a rencontré une erreur et ne peut pas continuer.
+
+ {this.state.error && (
+
+ {this.state.error.message}
+
+ )}
+
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+// Thème Material-UI personnalisé avec couleurs françaises - mémorisé pour éviter les re-créations
+const theme = createTheme({
+ palette: {
+ primary: {
+ main: '#1976d2', // Bleu français
+ },
+ secondary: {
+ main: '#dc004e', // Rouge français
+ },
+ background: {
+ default: '#fafafa',
+ paper: '#ffffff',
+ },
+ },
+ typography: {
+ fontFamily: '"Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif',
+ },
+ components: {
+ MuiAppBar: {
+ styleOverrides: {
+ root: {
+ backgroundColor: '#ffffff',
+ color: '#1976d2',
+ boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
+ },
+ },
+ },
+ },
+});
+
+/**
+ * Composant principal de l'application
+ */
+function App() {
+ // États principaux
+ const [selectedStep, setSelectedStep] = useState(null);
+ const [variables, setVariables] = useState([]);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [activeDocTab, setActiveDocTab] = useState(0);
+ const [isDocDrawerOpen, setIsDocDrawerOpen] = useState(false);
+ const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState(false);
+
+ // Hooks d'accessibilité et responsivité
+ const responsiveLayout = useResponsiveLayout();
+
+ // État du workflow
+ const [workflow, setWorkflow] = useState({
+ id: 'workflow_1',
+ name: 'Nouveau Workflow',
+ description: 'Workflow créé avec le Visual Workflow Builder V2',
+ steps: [],
+ connections: [],
+ variables: [],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ });
+
+ // Configuration de la navigation au clavier
+ const keyboardNavigation = useKeyboardNavigation({
+ onStepSelect: (stepId: string) => {
+ const step = workflow.steps.find(s => s.id === stepId);
+ if (step) handleStepSelect(step);
+ },
+ onStepMove: (stepId: string, direction: 'up' | 'down' | 'left' | 'right') => {
+ const step = workflow.steps.find(s => s.id === stepId);
+ if (step) {
+ const moveDistance = 20;
+ const newPosition = { ...step.position };
+
+ switch (direction) {
+ case 'up': newPosition.y -= moveDistance; break;
+ case 'down': newPosition.y += moveDistance; break;
+ case 'left': newPosition.x -= moveDistance; break;
+ case 'right': newPosition.x += moveDistance; break;
+ }
+
+ handleStepMove(stepId, newPosition);
+ }
+ },
+ onStepDelete: (stepId: string) => handleStepDelete(stepId),
+ onSave: () => console.log('Sauvegarde via clavier'),
+ onHelp: () => setShowKeyboardShortcuts(true),
+ selectedStepId: selectedStep?.id,
+ availableStepIds: workflow.steps.map(s => s.id),
+ isEnabled: true,
+ });
+
+ // Gestionnaires d'événements optimisés avec useCallback
+ const handleStepSelect = useCallback((step: Step | null) => {
+ setSelectedStep(step);
+ }, []);
+
+ // Synchroniser selectedStep avec le workflow quand celui-ci change
+ // Ceci corrige le bug où les paramètres (visual_anchor) ne sont pas persistés dans l'UI
+ useEffect(() => {
+ if (selectedStep) {
+ const updatedStep = workflow.steps.find(s => s.id === selectedStep.id);
+ if (updatedStep) {
+ // Vérifier si les données ont changé avant de mettre à jour
+ const currentDataStr = JSON.stringify(selectedStep.data);
+ const updatedDataStr = JSON.stringify(updatedStep.data);
+ if (currentDataStr !== updatedDataStr) {
+ setSelectedStep(updatedStep);
+ }
+ }
+ }
+ }, [workflow.steps, selectedStep?.id]);
+
+ const handleStepMove = useCallback((stepId: string, position: Position) => {
+ console.log('Déplacement étape:', stepId, position);
+ setWorkflow(prev => ({
+ ...prev,
+ steps: prev.steps.map(step =>
+ step.id === stepId ? { ...step, position } : step
+ ),
+ updatedAt: new Date(),
+ }));
+ }, []);
+
+ const handleConnection = (source: string, target: string) => {
+ console.log('Connexion:', source, '->', target);
+ const newConnection: WorkflowConnection = {
+ id: `conn_${Date.now()}`,
+ source,
+ target,
+ };
+ setWorkflow(prev => ({
+ ...prev,
+ connections: [...prev.connections, newConnection],
+ updatedAt: new Date(),
+ }));
+ };
+
+ const handleStepAdd = (stepData: Omit) => {
+ console.log('Ajout étape:', stepData);
+ const newStep: Step = {
+ ...stepData,
+ id: `step_${Date.now()}`,
+ executionState: StepExecutionState.IDLE,
+ validationErrors: [],
+ };
+
+ setWorkflow(prev => ({
+ ...prev,
+ steps: [...prev.steps, newStep],
+ updatedAt: new Date(),
+ }));
+ };
+
+ const handleStepDelete = (stepId: string) => {
+ console.log('Suppression étape:', stepId);
+ setWorkflow(prev => ({
+ ...prev,
+ steps: prev.steps.filter(step => step.id !== stepId),
+ connections: prev.connections.filter(conn =>
+ conn.source !== stepId && conn.target !== stepId
+ ),
+ updatedAt: new Date(),
+ }));
+
+ // Désélectionner l'étape si elle était sélectionnée
+ if (selectedStep?.id === stepId) {
+ setSelectedStep(null);
+ }
+ };
+
+ const handleConnectionDelete = (connectionId: string) => {
+ console.log('Suppression connexion:', connectionId);
+ setWorkflow(prev => ({
+ ...prev,
+ connections: prev.connections.filter(conn => conn.id !== connectionId),
+ updatedAt: new Date(),
+ }));
+ };
+
+ const handleParameterChange = (stepId: string, param: string, value: any) => {
+ console.log('Changement paramètre:', stepId, param, value);
+ setWorkflow(prev => ({
+ ...prev,
+ steps: prev.steps.map(step =>
+ step.id === stepId
+ ? {
+ ...step,
+ data: {
+ ...step.data,
+ parameters: {
+ ...step.data.parameters,
+ [param]: value
+ }
+ }
+ }
+ : step
+ ),
+ updatedAt: new Date(),
+ }));
+ };
+
+ const handleVisualSelection = (stepId: string) => {
+ console.log('Sélection visuelle pour étape:', stepId);
+ // La sélection visuelle est maintenant gérée par le VisualSelector dans PropertiesPanel
+ };
+
+ const handleStepHighlight = (stepId: string, highlight: boolean) => {
+ // Mise en évidence des étapes pour la validation
+ console.log('Mise en évidence étape:', stepId, highlight ? 'activée' : 'désactivée');
+ };
+
+ const handleStepStateChange = (stepId: string, state: StepExecutionState) => {
+ setWorkflow(prev => ({
+ ...prev,
+ steps: prev.steps.map(step =>
+ step.id === stepId ? { ...step, executionState: state } : step
+ ),
+ updatedAt: new Date(),
+ }));
+ };
+
+ const handleExecutionComplete = (success: boolean, summary: any) => {
+ console.log('Exécution terminée:', success ? 'Succès' : 'Échec', summary);
+ };
+
+ const handleWorkflowLoad = (loadedWorkflow: Workflow) => {
+ console.log('📥 [App] Chargement workflow:', {
+ name: loadedWorkflow.name,
+ stepsCount: loadedWorkflow.steps?.length || 0,
+ connectionsCount: loadedWorkflow.connections?.length || 0,
+ steps: loadedWorkflow.steps,
+ });
+
+ // S'assurer que les étapes ont des positions valides
+ const workflowWithPositions: Workflow = {
+ ...loadedWorkflow,
+ steps: (loadedWorkflow.steps || []).map((step, index) => ({
+ ...step,
+ position: step.position || { x: 100 + (index % 3) * 200, y: 100 + Math.floor(index / 3) * 150 },
+ })),
+ };
+
+ setWorkflow(workflowWithPositions);
+ // Charger les variables du workflow
+ setVariables(workflowWithPositions.variables || []);
+ setSelectedStep(null);
+ console.log('✅ [App] Workflow appliqué avec', workflowWithPositions.steps.length, 'étapes et', (workflowWithPositions.variables || []).length, 'variables');
+ };
+
+ const handleWorkflowSave = (savedWorkflow: Workflow) => {
+ setWorkflow(savedWorkflow);
+ console.log('Workflow sauvegardé:', savedWorkflow.name);
+ };
+
+ const handleStepDrag = (stepTemplate: StepTemplate) => {
+ console.log('Début drag étape:', stepTemplate);
+ // Cette fonction est appelée quand le drag commence depuis la palette
+ // La logique de drop est gérée dans le Canvas
+ };
+
+ // Gestion des variables
+ const handleVariableCreate = (variable: Omit) => {
+ const newVariable: Variable = {
+ ...variable,
+ id: `var_${Date.now()}`,
+ };
+ const updatedVariables = [...variables, newVariable];
+ setVariables(updatedVariables);
+ // Synchroniser avec le workflow pour la sauvegarde
+ setWorkflow(prev => ({ ...prev, variables: updatedVariables, updatedAt: new Date() }));
+ };
+
+ const handleVariableUpdate = (id: string, updates: Partial) => {
+ const updatedVariables = variables.map(v => v.id === id ? { ...v, ...updates } : v);
+ setVariables(updatedVariables);
+ // Synchroniser avec le workflow pour la sauvegarde
+ setWorkflow(prev => ({ ...prev, variables: updatedVariables, updatedAt: new Date() }));
+ };
+
+ const handleVariableDelete = (id: string) => {
+ const updatedVariables = variables.filter(v => v.id !== id);
+ setVariables(updatedVariables);
+ // Synchroniser avec le workflow pour la sauvegarde
+ setWorkflow(prev => ({ ...prev, variables: updatedVariables, updatedAt: new Date() }));
+ };
+
+ // Onglets de documentation
+ const docTabs = [
+ { id: 'canvas', label: 'Canvas', toolName: 'canvas' },
+ { id: 'palette', label: 'Palette', toolName: 'palette' },
+ { id: 'properties', label: 'Propriétés', toolName: 'properties' },
+ { id: 'test', label: 'Test Catalogue', toolName: 'test' },
+ { id: 'vwb-test', label: 'Test VWB', toolName: 'vwb-test' },
+ ];
+
+ // Mode 100% Visuel - Pas de catégories par défaut
+ // Seules les actions VisionOnly du catalogue sont utilisées
+ const defaultCategories: StepCategory[] = [];
+
+ return (
+
+
+
+
+
+
+
+ {/* Barre d'application */}
+
+
+
+ Visual Workflow Builder V2
+
+
+ {/* Gestionnaire de workflows */}
+
+
+
+
+ {/* Indicateur de connexion API */}
+
+
+
+
+ {
+ setActiveDocTab(newValue);
+ setIsDocDrawerOpen(true);
+ }}
+ textColor="inherit"
+ indicatorColor="secondary"
+ >
+
+
+
+
+
+
+
+
+
+ {/* Interface principale */}
+
+ {/* Palette d'étapes - Responsive */}
+
+
+
+
+ {/* Canvas principal */}
+
+ {/* Validateur et Exécuteur en haut */}
+
+ {/* Validateur */}
+
+
+
+
+ {/* Exécuteur */}
+
+ 0}
+ onStepStateChange={handleStepStateChange}
+ onExecutionComplete={handleExecutionComplete}
+ />
+
+
+
+
+
+ {/* Gestionnaire de variables - Responsive */}
+
+
+
+
+
+ {/* Panneau de propriétés - Responsive */}
+
+
+
+
+
+ {/* Tiroir de documentation */}
+ setIsDocDrawerOpen(false)}
+ sx={{
+ '& .MuiDrawer-paper': {
+ width: responsiveLayout.isMobile ? '100%' : 400,
+ boxSizing: 'border-box',
+ },
+ }}
+ >
+ {activeDocTab === 3 ? (
+
+ ) : activeDocTab === 4 ? (
+
+ ) : (
+ setIsDocDrawerOpen(true)}
+ />
+ )}
+
+
+ {/* Aide contextuelle */}
+
+
+ {/* Dialogue des raccourcis clavier */}
+ setShowKeyboardShortcuts(false)}
+ shortcuts={keyboardNavigation.shortcuts}
+ />
+
+
+
+
+
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/visual_workflow_builder/frontend/src/components/Executor/index.tsx b/visual_workflow_builder/frontend/src/components/Executor/index.tsx
new file mode 100644
index 000000000..eab79ca42
--- /dev/null
+++ b/visual_workflow_builder/frontend/src/components/Executor/index.tsx
@@ -0,0 +1,1015 @@
+/**
+ * Composant Exécuteur - Exécution et feedback temps réel des workflows
+ * Auteur : Dom, Alice, Kiro - 10 janvier 2026
+ *
+ * Ce composant gère l'exécution des workflows avec feedback visuel en temps réel,
+ * affichage des états d'exécution, résumé des performances et gestion robuste des erreurs.
+ *
+ * EXTENSION VWB : Support complet des actions VisionOnly avec Evidence et validation.
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+ Box,
+ Button,
+ Typography,
+ LinearProgress,
+ Alert,
+ AlertTitle,
+ List,
+ ListItem,
+ ListItemIcon,
+ ListItemText,
+ Chip,
+ Dialog,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ IconButton,
+ Collapse,
+ Snackbar,
+ CircularProgress,
+ Tabs,
+ Tab,
+ Badge,
+} from '@mui/material';
+import {
+ PlayArrow as PlayIcon,
+ Stop as StopIcon,
+ Pause as PauseIcon,
+ CheckCircle as SuccessIcon,
+ Error as ErrorIcon,
+ Schedule as PendingIcon,
+ Close as CloseIcon,
+ ExpandMore as ExpandMoreIcon,
+ ExpandLess as ExpandLessIcon,
+ Refresh as RefreshIcon,
+ CloudOff as OfflineIcon,
+ Visibility as VWBIcon,
+ Speed as StandardIcon,
+} from '@mui/icons-material';
+
+// Import des types partagés et du nouveau client API
+import {
+ Workflow,
+ Step,
+ StepExecutionState,
+ ExecutionState,
+ ExecutionError,
+ Variable,
+ Evidence,
+} from '../../types';
+import { useWorkflowExecution } from '../../hooks/useApiClient';
+import { useConnectionStatus } from '../../hooks/useConnectionStatus';
+import { ApiError } from '../../services/apiClient';
+
+// Import des composants et services VWB
+import VWBExecutorExtension from './VWBExecutorExtension';
+import { useVWBExecutionService } from '../../services/vwbExecutionService';
+import { VWBExecutionSummary } from '../../hooks/useVWBExecution';
+
+interface ExecutorProps {
+ workflow: Workflow;
+ variables?: Variable[];
+ canExecute: boolean;
+ onStepStateChange?: (stepId: string, state: StepExecutionState) => void;
+ onExecutionComplete?: (success: boolean, summary: ExecutionSummary | VWBExecutionSummary) => void;
+ onEvidenceGenerated?: (stepId: string, evidence: Evidence[]) => void;
+ enableVWBMode?: boolean;
+ debugMode?: boolean;
+}
+
+interface ExecutionSummary {
+ totalSteps: number;
+ successfulSteps: number;
+ failedSteps: number;
+ skippedSteps: number;
+ duration: number;
+ successRate: number;
+ errors: ExecutionError[];
+}
+
+interface StepExecutionResult {
+ stepId: string;
+ success: boolean;
+ duration: number;
+ error?: string;
+ output?: any;
+}
+
+/**
+ * Composant Exécuteur avec Support VWB
+ */
+const Executor: React.FC = ({
+ workflow,
+ variables = [],
+ canExecute,
+ onStepStateChange,
+ onExecutionComplete,
+ onEvidenceGenerated,
+ enableVWBMode = true,
+ debugMode = false,
+}) => {
+ // État pour le mode d'exécution
+ const [executionMode, setExecutionMode] = useState<'standard' | 'vwb'>('standard');
+
+ // Service VWB pour détecter les actions VWB
+ const { isVWBStep } = useVWBExecutionService();
+
+ // Détecter automatiquement si le workflow contient des actions VWB
+ const hasVWBSteps = React.useMemo(() => {
+ return workflow.steps.some(step => isVWBStep(step));
+ }, [workflow.steps, isVWBStep]);
+
+ // Définir le mode d'exécution par défaut
+ React.useEffect(() => {
+ if (enableVWBMode && hasVWBSteps) {
+ setExecutionMode('vwb');
+ } else {
+ setExecutionMode('standard');
+ }
+ }, [enableVWBMode, hasVWBSteps]);
+
+ // Si le mode VWB est activé et qu'il y a des actions VWB, utiliser l'extension VWB
+ if (executionMode === 'vwb' && enableVWBMode) {
+ return (
+
+ {/* Sélecteur de mode d'exécution */}
+ {hasVWBSteps && (
+
+ setExecutionMode(newValue)}
+ aria-label="Mode d'exécution"
+ >
+
+
+ Standard
+
+ }
+ />
+
+
+ VWB
+ isVWBStep(step)).length} color="primary" />
+
+ }
+ />
+
+
+ )}
+
+ {/* Extension VWB */}
+
+
+ );
+ }
+
+ // Mode d'exécution standard (code existant)
+ return (
+
+ );
+};
+
+/**
+ * Composant Exécuteur Standard (code existant refactorisé)
+ */
+interface StandardExecutorProps {
+ workflow: Workflow;
+ variables: Variable[];
+ canExecute: boolean;
+ onStepStateChange?: (stepId: string, state: StepExecutionState) => void;
+ onExecutionComplete?: (success: boolean, summary: ExecutionSummary | VWBExecutionSummary) => void;
+ executionMode: 'standard' | 'vwb';
+ setExecutionMode: (mode: 'standard' | 'vwb') => void;
+ hasVWBSteps: boolean;
+ enableVWBMode: boolean;
+}
+
+const StandardExecutor: React.FC = ({
+ workflow,
+ variables,
+ canExecute,
+ onStepStateChange,
+ onExecutionComplete,
+ executionMode,
+ setExecutionMode,
+ hasVWBSteps,
+ enableVWBMode,
+}) => {
+ // Utilisation du nouveau client API pour l'exécution
+ const executionApi = useWorkflowExecution({
+ onError: (error: ApiError) => {
+ console.error('Erreur API Exécution:', error);
+ setSnackbarMessage(`Erreur d'exécution: ${error.message}`);
+ setSnackbarOpen(true);
+ handleExecutionError(error.message);
+ },
+ onSuccess: (data) => {
+ console.log('Succès API Exécution:', data);
+ },
+ silentOffline: true, // Ne pas afficher d'erreur en mode hors ligne
+ });
+
+ // Surveillance de l'état de connexion (sans polling pour éviter les re-renders)
+ const { isOffline } = useConnectionStatus();
+
+ const [executionState, setExecutionState] = useState({
+ status: 'idle',
+ });
+ // Ref pour suivre l'état d'exécution dans les closures
+ const executionRef = React.useRef<{
+ isRunning: boolean;
+ isPaused: boolean;
+ shouldStop: boolean;
+ }>({
+ isRunning: false,
+ isPaused: false,
+ shouldStop: false,
+ });
+ const [currentStepIndex, setCurrentStepIndex] = useState(0);
+ const [stepResults, setStepResults] = useState([]);
+ const [showSummaryDialog, setShowSummaryDialog] = useState(false);
+ const [executionSummary, setExecutionSummary] = useState(null);
+ const [expandedErrors, setExpandedErrors] = useState(false);
+ const [snackbarOpen, setSnackbarOpen] = useState(false);
+ const [snackbarMessage, setSnackbarMessage] = useState('');
+ const [retryAttempts, setRetryAttempts] = useState>(new Map());
+
+ // Gestionnaire d'événements clavier pour l'exécuteur
+ const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+ switch (event.key) {
+ case 'Enter':
+ case ' ':
+ // Activer le bouton focalisé
+ if (event.target instanceof HTMLButtonElement) {
+ event.preventDefault();
+ event.target.click();
+ }
+ break;
+ case 'p':
+ // Raccourci pour play/pause (Ctrl+P)
+ if (event.ctrlKey || event.metaKey) {
+ event.preventDefault();
+ if (executionState.status === 'idle' && canExecute) {
+ handleStartExecution();
+ } else if (executionState.status === 'running') {
+ handlePauseExecution();
+ } else if (executionState.status === 'paused') {
+ handleResumeExecution();
+ }
+ }
+ break;
+ case 's':
+ // Raccourci pour stop (Ctrl+S)
+ if (event.ctrlKey || event.metaKey) {
+ event.preventDefault();
+ if (executionState.status === 'running' || executionState.status === 'paused') {
+ handleStopExecution();
+ }
+ }
+ break;
+ case 'Escape':
+ // Fermer les dialogues
+ event.preventDefault();
+ setShowSummaryDialog(false);
+ break;
+ }
+ }, [executionState.status, canExecute]);
+
+ // Réinitialiser l'état lors du changement de workflow
+ useEffect(() => {
+ if (executionState.status === 'idle') {
+ setCurrentStepIndex(0);
+ setStepResults([]);
+ setExecutionSummary(null);
+ }
+ }, [workflow.id, executionState.status]);
+
+ // Démarrer l'exécution du workflow avec gestion d'erreurs améliorée
+ const handleStartExecution = useCallback(async () => {
+ if (!canExecute || workflow.steps.length === 0) return;
+
+ // Notification si mode hors ligne
+ if (isOffline) {
+ setSnackbarMessage('Mode simulation (API hors ligne)');
+ setSnackbarOpen(true);
+ }
+
+ // Initialiser la ref d'exécution
+ executionRef.current = {
+ isRunning: true,
+ isPaused: false,
+ shouldStop: false,
+ };
+
+ setExecutionState({
+ status: 'running',
+ startTime: new Date(),
+ currentStep: workflow.steps[0].id,
+ });
+ setCurrentStepIndex(0);
+ setStepResults([]);
+ setRetryAttempts(new Map());
+
+ try {
+ await executeWorkflow();
+ } catch (error) {
+ console.error('Erreur lors de l\'exécution du workflow:', error);
+ handleExecutionError(error instanceof Error ? error.message : 'Erreur inconnue');
+ }
+ }, [canExecute, workflow, isOffline]);
+
+ // Arrêter l'exécution
+ const handleStopExecution = useCallback(() => {
+ executionRef.current.shouldStop = true;
+ executionRef.current.isRunning = false;
+ setExecutionState(prev => ({
+ ...prev,
+ status: 'completed',
+ endTime: new Date(),
+ }));
+ }, []);
+
+ // Mettre en pause l'exécution
+ const handlePauseExecution = useCallback(() => {
+ executionRef.current.isPaused = true;
+ setExecutionState(prev => ({
+ ...prev,
+ status: 'paused',
+ }));
+ }, []);
+
+ // Reprendre l'exécution
+ const handleResumeExecution = useCallback(() => {
+ executionRef.current.isPaused = false;
+ setExecutionState(prev => ({
+ ...prev,
+ status: 'running',
+ }));
+ }, []);
+
+ // Exécuter le workflow étape par étape
+ const executeWorkflow = async (): Promise => {
+ const results: StepExecutionResult[] = [];
+ const errors: ExecutionError[] = [];
+
+ for (let i = 0; i < workflow.steps.length; i++) {
+ const step = workflow.steps[i];
+
+ // Vérifier si l'exécution doit s'arrêter
+ if (executionRef.current.shouldStop) {
+ break;
+ }
+
+ // Attendre si en pause
+ while (executionRef.current.isPaused && !executionRef.current.shouldStop) {
+ await new Promise(resolve => setTimeout(resolve, 100));
+ }
+
+ // Revérifier après la pause
+ if (executionRef.current.shouldStop) {
+ break;
+ }
+
+ setCurrentStepIndex(i);
+ setExecutionState(prev => ({
+ ...prev,
+ currentStep: step.id,
+ }));
+
+ // Notifier le changement d'état de l'étape
+ if (onStepStateChange) {
+ onStepStateChange(step.id, StepExecutionState.RUNNING);
+ }
+
+ try {
+ const result = await executeStep(step);
+ results.push(result);
+ setStepResults([...results]);
+
+ // Notifier le succès ou l'échec
+ if (onStepStateChange) {
+ onStepStateChange(step.id, result.success ? StepExecutionState.SUCCESS : StepExecutionState.ERROR);
+ }
+
+ if (!result.success && result.error) {
+ errors.push({
+ stepId: step.id,
+ message: result.error,
+ timestamp: new Date(),
+ });
+ }
+
+ // Attendre un peu pour l'effet visuel
+ await new Promise(resolve => setTimeout(resolve, 500));
+
+ } catch (error) {
+ const errorMessage = error instanceof Error ? error.message : 'Erreur inconnue';
+
+ results.push({
+ stepId: step.id,
+ success: false,
+ duration: 0,
+ error: errorMessage,
+ });
+
+ errors.push({
+ stepId: step.id,
+ message: errorMessage,
+ timestamp: new Date(),
+ });
+
+ if (onStepStateChange) {
+ onStepStateChange(step.id, StepExecutionState.ERROR);
+ }
+ }
+ }
+
+ // Finaliser l'exécution
+ executionRef.current.isRunning = false;
+
+ const endTime = new Date();
+ const duration = executionState.startTime
+ ? endTime.getTime() - executionState.startTime.getTime()
+ : 0;
+
+ const summary: ExecutionSummary = {
+ totalSteps: workflow.steps.length,
+ successfulSteps: results.filter(r => r.success).length,
+ failedSteps: results.filter(r => !r.success).length,
+ skippedSteps: workflow.steps.length - results.length,
+ duration,
+ successRate: results.length > 0 ? (results.filter(r => r.success).length / results.length) * 100 : 0,
+ errors,
+ };
+
+ setExecutionState(prev => ({
+ ...prev,
+ status: 'completed',
+ endTime,
+ errors,
+ }));
+
+ setExecutionSummary(summary);
+ setShowSummaryDialog(true);
+
+ if (onExecutionComplete) {
+ onExecutionComplete(summary.failedSteps === 0, summary);
+ }
+ };
+
+ // Exécuter une étape individuelle avec le nouveau client API ou en simulation locale
+ const executeStep = useCallback(async (step: Step): Promise => {
+ const startTime = Date.now();
+ const stepId = step.id;
+ const currentRetries = retryAttempts.get(stepId) || 0;
+
+ // Mode simulation locale si API hors ligne
+ if (isOffline) {
+ // Simuler un délai d'exécution réaliste
+ await new Promise(resolve => setTimeout(resolve, 300 + Math.random() * 500));
+ const duration = Date.now() - startTime;
+
+ // Simulation : succès pour la plupart des étapes
+ const simulatedSuccess = Math.random() > 0.1; // 90% de succès en simulation
+
+ return {
+ stepId: step.id,
+ success: simulatedSuccess,
+ duration,
+ output: simulatedSuccess ? { simulated: true, stepType: step.type } : undefined,
+ error: simulatedSuccess ? undefined : 'Erreur simulée pour démonstration',
+ };
+ }
+
+ try {
+ // Utiliser le nouveau client API pour l'exécution
+ const result = await executionApi.executeStep({
+ stepId: step.id,
+ stepType: step.type,
+ parameters: step.data.parameters,
+ workflowId: workflow.id,
+ });
+
+ const duration = Date.now() - startTime;
+
+ if (result && result.success) {
+ // Réinitialiser les tentatives en cas de succès
+ setRetryAttempts(prev => {
+ const newMap = new Map(prev);
+ newMap.delete(stepId);
+ return newMap;
+ });
+
+ return {
+ stepId: step.id,
+ success: true,
+ duration,
+ output: result.output,
+ };
+ } else {
+ return {
+ stepId: step.id,
+ success: false,
+ duration,
+ error: result?.error || 'Échec de l\'exécution de l\'étape',
+ };
+ }
+
+ } catch (error) {
+ const duration = Date.now() - startTime;
+ const apiError = error as ApiError;
+
+ // Gestion du retry automatique pour certaines erreurs
+ if (shouldRetryStep(apiError) && currentRetries < 3) {
+ setRetryAttempts(prev => {
+ const newMap = new Map(prev);
+ newMap.set(stepId, currentRetries + 1);
+ return newMap;
+ });
+
+ setSnackbarMessage(`Retry étape ${step.name} (tentative ${currentRetries + 1}/3)`);
+ setSnackbarOpen(true);
+
+ // Attendre avant de retry avec backoff exponentiel
+ await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, currentRetries)));
+
+ return executeStep(step);
+ }
+
+ return {
+ stepId: step.id,
+ success: false,
+ duration,
+ error: apiError.message || 'Erreur inconnue',
+ };
+ }
+ }, [executionApi, workflow.id, retryAttempts, isOffline]);
+
+ // Déterminer si une étape doit être retentée
+ const shouldRetryStep = useCallback((error: ApiError): boolean => {
+ // Retry pour les erreurs réseau et serveur temporaires
+ return (
+ error.code === 'NETWORK_ERROR' ||
+ error.code === 'REQUEST_ABORTED' ||
+ (error.status !== undefined && error.status >= 500) ||
+ error.status === 408 || // Request Timeout
+ error.status === 429 // Too Many Requests
+ );
+ }, []);
+
+ // Gérer les erreurs d'exécution
+ const handleExecutionError = (error: string) => {
+ setExecutionState(prev => ({
+ ...prev,
+ status: 'error',
+ endTime: new Date(),
+ errors: [
+ ...(prev.errors || []),
+ {
+ stepId: 'system',
+ message: error,
+ timestamp: new Date(),
+ },
+ ],
+ }));
+ };
+
+ // Calculer le progrès
+ const getProgress = (): number => {
+ if (workflow.steps.length === 0) return 0;
+ return (currentStepIndex / workflow.steps.length) * 100;
+ };
+
+ // Obtenir l'icône d'état pour une étape
+ const getStepStateIcon = (stepId: string) => {
+ const result = stepResults.find(r => r.stepId === stepId);
+
+ if (!result) {
+ if (executionState.currentStep === stepId && executionState.status === 'running') {
+ return ;
+ }
+ return null;
+ }
+
+ return result.success ? (
+
+ ) : (
+
+ );
+ };
+
+ // Formater la durée
+ const formatDuration = (ms: number): string => {
+ if (ms < 1000) return `${ms}ms`;
+ const seconds = Math.floor(ms / 1000);
+ const minutes = Math.floor(seconds / 60);
+
+ if (minutes > 0) {
+ return `${minutes}m ${seconds % 60}s`;
+ }
+ return `${seconds}s`;
+ };
+
+ return (
+
+ {/* Sélecteur de mode d'exécution - permet de revenir à VWB */}
+ {hasVWBSteps && enableVWBMode && (
+
+ setExecutionMode(newValue)}
+ aria-label="Mode d'exécution"
+ >
+
+
+ Standard
+
+ }
+ />
+
+
+ VWB
+
+ }
+ />
+
+
+ )}
+
+ {/* Contrôles d'exécution avec indicateurs d'état API */}
+
+ {executionState.status === 'idle' && (
+ }
+ onClick={handleStartExecution}
+ disabled={!canExecute || workflow.steps.length === 0}
+ color="success"
+ aria-label="Démarrer l'exécution du workflow"
+ >
+ {isOffline ? 'Simuler le workflow' : 'Exécuter le workflow'}
+
+ )}
+
+ {executionState.status === 'running' && (
+ <>
+ }
+ onClick={handlePauseExecution}
+ aria-label="Mettre en pause l'exécution"
+ >
+ Pause
+
+ }
+ onClick={handleStopExecution}
+ color="error"
+ >
+ Arrêter
+
+
+ )}
+
+ {executionState.status === 'paused' && (
+ <>
+ }
+ onClick={handleResumeExecution}
+ color="success"
+ >
+ Reprendre
+
+ }
+ onClick={handleStopExecution}
+ color="error"
+ >
+ Arrêter
+
+
+ )}
+
+ {(executionState.status === 'completed' || executionState.status === 'error') && (
+ }
+ onClick={handleStartExecution}
+ disabled={!canExecute}
+ color="success"
+ >
+ {isOffline ? 'Re-simuler' : 'Relancer'}
+
+ )}
+
+ {/* Indicateurs d'état */}
+ {executionApi.loading && }
+ {executionApi.isRetrying && (
+ }
+ label={`Retry ${executionApi.retryCount}/3`}
+ size="small"
+ color="warning"
+ />
+ )}
+
+ {/* Indicateur de santé API */}
+ {isOffline && (
+ }
+ label="API Hors ligne"
+ size="small"
+ color="error"
+ />
+ )}
+
+
+ {/* Affichage des erreurs API */}
+ {executionApi.error && (
+ executionApi.reset()}>
+
+ Erreur d'exécution:
+
+
+ {executionApi.error.message}
+ {executionApi.error.code && ` (Code: ${executionApi.error.code})`}
+
+
+ )}
+
+ {/* Barre de progression */}
+ {executionState.status === 'running' && (
+
+
+ Exécution en cours... ({currentStepIndex + 1}/{workflow.steps.length})
+
+
+
+ )}
+
+ {/* État actuel */}
+ {executionState.status !== 'idle' && (
+
+
+ {executionState.status === 'running' && 'Exécution en cours'}
+ {executionState.status === 'paused' && 'Exécution en pause'}
+ {executionState.status === 'completed' && 'Exécution terminée'}
+ {executionState.status === 'error' && 'Erreur d\'exécution'}
+
+
+ {executionState.currentStep && (
+
+ Étape actuelle: {workflow.steps.find(s => s.id === executionState.currentStep)?.name}
+
+ )}
+
+ {executionState.startTime && (
+
+ Démarrée à: {executionState.startTime.toLocaleTimeString()}
+
+ )}
+
+ )}
+
+ {/* Liste des étapes avec états */}
+ {stepResults.length > 0 && (
+
+
+ Résultats d'exécution
+
+
+ {workflow.steps.map((step) => {
+ const result = stepResults.find(r => r.stepId === step.id);
+ const isCurrentStep = executionState.currentStep === step.id;
+
+ return (
+
+
+ {getStepStateIcon(step.id)}
+
+
+ {step.name}
+ {result && (
+
+ )}
+
+ }
+ secondary={
+
+
+ Type: {step.type}
+
+ {result && (
+
+ Durée: {formatDuration(result.duration)}
+
+ )}
+ {result && result.error && (
+
+ Erreur: {result.error}
+
+ )}
+
+ }
+ />
+
+ );
+ })}
+
+
+ )}
+
+ {/* Dialogue de résumé d'exécution */}
+
+
+ {/* Snackbar pour les notifications */}
+ setSnackbarOpen(false)}
+ message={snackbarMessage}
+ action={
+ setSnackbarOpen(false)}
+ >
+
+
+ }
+ />
+
+ );
+};
+
+export default Executor;
\ No newline at end of file