Dom/rpa_vision_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replay E2E fonctionnel — 25/25 actions, 0 retries, SomEngine via serveur

Browse Source 
Validé sur PC Windows (DESKTOP-58D5CAC, 2560x1600) :
- 8 clics résolus visuellement (1 anchor_template, 1 som_text_match, 6 som_vlm)
- Score moyen 0.75, temps moyen 1.6s
- Texte tapé correctement (bonjour, test word, date, email)
- 0 retries, 2 actions non vérifiées (OK)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dom
2026-03-31 14:04:41 +02:00
parent 5e0b53cfd1
commit a7de6a488b
79542 changed files with 6091757 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1337
.kiro/specs/visual-workflow-builder/design.md Normal file
View File

File diff suppressed because it is too large Load Diff

262
.kiro/specs/visual-workflow-builder/requirements.md Normal file
View File

@@ -0,0 +1,262 @@
# Document d'Exigences: Visual Workflow Builder
## Introduction
Le Visual Workflow Builder est une interface graphique qui permet aux utilisateurs de créer, modifier et gérer des workflows RPA par glisser-déposer sans écrire de code. Cette fonctionnalité démocratise l'automatisation RPA en la rendant accessible aux utilisateurs non-techniques tout en conservant la puissance et la flexibilité nécessaires aux développeurs.
Le builder fournit un canvas intuitif où les utilisateurs peuvent construire visuellement des workflows en connectant des nodes d'action, configurer les paramètres via des panneaux de propriétés, tester les workflows en temps réel, et les déployer en production en un clic.
## Glossaire
- **Canvas**: L'espace de travail visuel principal où les nodes de workflow sont placés et connectés
- **Node**: Une représentation visuelle d'une action de workflow unique (clic, saisie, attente, etc.)
- **Edge**: Une connexion visuelle entre deux nodes représentant le flux d'exécution
- **Palette**: La barre latérale contenant les types de nodes déplaçables
- **Panneau de Propriétés**: L'interface de configuration pour les nodes sélectionnés
- **Workflow Graph**: La structure de données sous-jacente représentant le workflow visuel
- **Visual Builder**: L'interface graphique complète pour la création de workflows
- **Sélecteur de Cible**: L'outil interactif pour sélectionner des éléments UI à l'écran
- **Template**: Un modèle de workflow pré-construit qui peut être réutilisé
- **Sérialisation**: Le processus de conversion des workflows visuels vers/depuis le format JSON
## Exigences
### Exigence 1: Gestion du Canvas et des Nodes
**User Story:** En tant que créateur de workflow, je veux organiser visuellement les actions de workflow sur un canvas, afin de voir et comprendre le flux d'exécution d'un coup d'œil.
#### Critères d'Acceptation
1. QUAND le Visual Builder se charge, LE Visual Builder DOIT afficher un canvas vide avec un fond en grille
2. QUAND un utilisateur glisse un type de node depuis la palette, LE Visual Builder DOIT créer une nouvelle instance de node sur le canvas à la position de dépôt
3. QUAND un utilisateur sélectionne un node sur le canvas, LE Visual Builder DOIT mettre en surbrillance le node sélectionné et afficher ses propriétés dans le panneau de propriétés
4. QUAND un utilisateur déplace un node sur le canvas, LE Visual Builder DOIT mettre à jour la position du node en temps réel
5. QUAND un utilisateur supprime un node sélectionné, LE Visual Builder DOIT retirer le node et tous les edges connectés du canvas
### Exigence 2: Connexion des Nodes et Flux
**User Story:** En tant que créateur de workflow, je veux connecter les nodes pour définir l'ordre d'exécution, afin de spécifier la séquence d'actions dans mon workflow.
#### Critères d'Acceptation
1. QUAND un utilisateur glisse depuis le port de sortie d'un node vers le port d'entrée d'un autre node, LE Visual Builder DOIT créer un edge connectant les deux nodes
2. QUAND un edge est créé, LE Visual Builder DOIT valider que la connexion est valide selon les règles du workflow
3. QUAND un utilisateur clique sur un edge, LE Visual Builder DOIT mettre en surbrillance l'edge et permettre la suppression
4. QUAND un node est supprimé, LE Visual Builder DOIT automatiquement retirer tous les edges connectés à ce node
5. QUAND plusieurs edges existent depuis un node, LE Visual Builder DOIT les afficher avec des indicateurs visuels distincts pour différentes conditions
### Requirement 3: Node Configuration
**User Story:** As a workflow creator, I want to configure node parameters through a properties panel, so that I can customize each action's behavior without writing code.
#### Acceptance Criteria
1. WHEN a node is selected, THE Visual Builder SHALL display all configurable parameters for that node type in the properties panel
2. WHEN a user modifies a parameter value, THE Visual Builder SHALL validate the input and update the node configuration immediately
3. WHEN a node requires a target element, THE Visual Builder SHALL provide a target selector button that launches the interactive selection tool
4. WHEN a user saves node configuration, THE Visual Builder SHALL persist the changes to the workflow definition
5. WHERE a parameter has a default value, THE Visual Builder SHALL pre-populate the field with that default
### Requirement 4: Target Selection
**User Story:** As a workflow creator, I want to interactively select UI elements on screen, so that I can easily specify targets for actions without manually entering selectors.
#### Acceptance Criteria
1. WHEN a user clicks the target selector button, THE Visual Builder SHALL capture the current screen and enter selection mode
2. WHEN the user hovers over UI elements in selection mode, THE Visual Builder SHALL highlight the element boundaries
3. WHEN the user clicks on an element, THE Visual Builder SHALL extract the element properties and automatically configure the node target
4. WHEN target selection completes, THE Visual Builder SHALL return to normal editing mode with the target configured
5. WHEN the Visual Builder extracts element properties, THE Visual Builder SHALL include text content, position, size, and visual embedding
### Requirement 5: Workflow Serialization
**User Story:** As a workflow creator, I want my visual workflows to be saved and loaded reliably, so that I can continue working on them across sessions.
#### Acceptance Criteria
1. WHEN a user saves a workflow, THE Visual Builder SHALL serialize the canvas state to JSON format including all nodes, edges, and configurations
2. WHEN a user loads a workflow, THE Visual Builder SHALL deserialize the JSON and reconstruct the exact canvas state
3. WHEN serialization occurs, THE Visual Builder SHALL validate that all required fields are present and correctly formatted
4. WHEN a workflow is saved, THE Visual Builder SHALL generate a unique workflow identifier if one does not exist
5. WHEN deserialization fails, THE Visual Builder SHALL display an error message and prevent loading of corrupted data
### Requirement 6: Workflow Execution
**User Story:** As a workflow creator, I want to execute my visual workflows directly from the builder, so that I can test and validate my automation immediately.
#### Acceptance Criteria
1. WHEN a user clicks the run button, THE Visual Builder SHALL convert the visual workflow to a WorkflowGraph and execute it via ExecutionLoop
2. WHEN execution starts, THE Visual Builder SHALL display real-time progress by highlighting the currently executing node
3. WHEN a step completes, THE Visual Builder SHALL update the node visual state to indicate success or failure
4. WHEN execution completes, THE Visual Builder SHALL display a summary of results including duration and success rate
5. IF execution fails at any step, THEN THE Visual Builder SHALL highlight the failed node and display the error message
### Requirement 7: Node Types and Palette
**User Story:** As a workflow creator, I want access to all common RPA actions through a visual palette, so that I can build complete workflows without coding.
#### Acceptance Criteria
1. WHEN the Visual Builder loads, THE Visual Builder SHALL display a palette containing all available node types organized by category
2. WHEN a user searches the palette, THE Visual Builder SHALL filter node types based on the search query
3. WHEN a user hovers over a node type in the palette, THE Visual Builder SHALL display a tooltip with the node description and parameters
4. THE Visual Builder SHALL support at minimum these node types: Click, Type, Wait, Navigate, Extract, Condition, Loop, Variable
5. WHERE new node types are added to the system, THE Visual Builder SHALL automatically include them in the palette
### Requirement 8: Conditional Branching
**User Story:** As a workflow creator, I want to add conditional logic to my workflows, so that I can handle different scenarios based on runtime conditions.
#### Acceptance Criteria
1. WHEN a user adds a Condition node, THE Visual Builder SHALL provide configuration for the condition expression and true/false branches
2. WHEN a Condition node is connected, THE Visual Builder SHALL allow separate edges for true and false outcomes
3. WHEN a condition is evaluated during execution, THE Visual Builder SHALL follow the appropriate branch based on the result
4. WHEN displaying a Condition node, THE Visual Builder SHALL visually distinguish the true and false output ports
5. WHEN a user configures a condition, THE Visual Builder SHALL validate that the expression syntax is correct
### Requirement 9: Loop Constructs
**User Story:** As a workflow creator, I want to create loops in my workflows, so that I can repeat actions over collections or until conditions are met.
#### Acceptance Criteria
1. WHEN a user adds a Loop node, THE Visual Builder SHALL provide configuration for loop type (for-each, while, repeat) and iteration parameters
2. WHEN a Loop node is connected, THE Visual Builder SHALL allow edges for loop body and loop exit
3. WHEN a loop executes, THE Visual Builder SHALL repeat the loop body according to the configured parameters
4. WHEN displaying a Loop node, THE Visual Builder SHALL visually indicate the loop body region
5. WHEN a loop completes, THE Visual Builder SHALL continue execution from the loop exit edge
### Requirement 10: Variable Management
**User Story:** As a workflow creator, I want to define and use variables in my workflows, so that I can store and pass data between steps.
#### Acceptance Criteria
1. WHEN a user opens variable management, THE Visual Builder SHALL display all defined variables with their names, types, and default values
2. WHEN a user creates a new variable, THE Visual Builder SHALL validate that the variable name is unique and follows naming conventions
3. WHEN a user references a variable in a node parameter, THE Visual Builder SHALL use the syntax ${variable_name} and validate that the variable exists
4. WHEN a workflow executes, THE Visual Builder SHALL substitute variable references with their runtime values
5. WHEN a node produces output, THE Visual Builder SHALL allow storing the result in a variable for later use
### Requirement 11: Workflow Templates
**User Story:** As a workflow creator, I want to use pre-built workflow templates, so that I can quickly create common automation patterns without starting from scratch.
#### Acceptance Criteria
1. WHEN a user creates a new workflow, THE Visual Builder SHALL offer a selection of templates organized by use case
2. WHEN a user selects a template, THE Visual Builder SHALL load the template structure onto the canvas with all nodes and connections
3. WHEN a template is loaded, THE Visual Builder SHALL allow the user to customize all parameters before saving
4. THE Visual Builder SHALL include templates for at minimum: Login, Form Filling, Data Extraction, Navigation
5. WHERE users create workflows, THE Visual Builder SHALL allow saving them as custom templates for reuse
### Requirement 12: Validation and Error Checking
**User Story:** As a workflow creator, I want real-time validation of my workflow, so that I can identify and fix errors before execution.
#### Acceptance Criteria
1. WHEN a workflow is modified, THE Visual Builder SHALL validate the workflow structure and highlight any errors
2. WHEN a node is missing required configuration, THE Visual Builder SHALL display a warning indicator on the node
3. WHEN a workflow has disconnected nodes, THE Visual Builder SHALL display a warning message
4. WHEN a workflow has circular dependencies, THE Visual Builder SHALL detect and prevent the invalid structure
5. WHEN validation errors exist, THE Visual Builder SHALL prevent workflow execution until errors are resolved
### Requirement 13: Undo/Redo
**User Story:** As a workflow creator, I want to undo and redo my actions, so that I can experiment freely and recover from mistakes.
#### Acceptance Criteria
1. WHEN a user performs an action, THE Visual Builder SHALL add the action to the undo stack
2. WHEN a user triggers undo, THE Visual Builder SHALL revert the last action and update the canvas state
3. WHEN a user triggers redo, THE Visual Builder SHALL reapply the last undone action
4. THE Visual Builder SHALL support at minimum 50 levels of undo history
5. WHEN a new action is performed after undo, THE Visual Builder SHALL clear the redo stack
### Requirement 14: Zoom and Pan
**User Story:** As a workflow creator, I want to zoom and pan the canvas, so that I can work with large workflows comfortably.
#### Acceptance Criteria
1. WHEN a user scrolls with the mouse wheel, THE Visual Builder SHALL zoom the canvas in or out centered on the cursor position
2. WHEN a user drags on empty canvas space, THE Visual Builder SHALL pan the viewport
3. WHEN a user clicks fit-to-screen, THE Visual Builder SHALL adjust zoom and position to show the entire workflow
4. THE Visual Builder SHALL support zoom levels from 25% to 200%
5. WHEN zooming or panning, THE Visual Builder SHALL maintain smooth 60fps performance
### Requirement 15: Export and Import
**User Story:** As a workflow creator, I want to export and import workflows, so that I can share them with others and back them up.
#### Acceptance Criteria
1. WHEN a user exports a workflow, THE Visual Builder SHALL generate a JSON file containing the complete workflow definition
2. WHEN a user imports a workflow file, THE Visual Builder SHALL validate the file format and load the workflow onto the canvas
3. WHEN exporting, THE Visual Builder SHALL include all nodes, edges, variables, and metadata
4. WHEN importing, THE Visual Builder SHALL detect version incompatibilities and offer migration if needed
5. THE Visual Builder SHALL support exporting workflows in both JSON and YAML formats
### Requirement 16: Real-time Collaboration (Future)
**User Story:** As a workflow creator, I want to collaborate with team members in real-time, so that we can build workflows together efficiently.
#### Acceptance Criteria
1. WHEN multiple users open the same workflow, THE Visual Builder SHALL display presence indicators for each user
2. WHEN a user modifies the workflow, THE Visual Builder SHALL broadcast changes to all connected users in real-time
3. WHEN conflicts occur, THE Visual Builder SHALL use last-write-wins strategy with conflict notifications
4. WHEN a user's cursor moves, THE Visual Builder SHALL display the cursor position to other users
5. WHEN a user selects a node, THE Visual Builder SHALL show the selection to other users with the user's color
### Requirement 17: Keyboard Shortcuts
**User Story:** As a workflow creator, I want keyboard shortcuts for common actions, so that I can work more efficiently.
#### Acceptance Criteria
1. THE Visual Builder SHALL support Ctrl+Z for undo and Ctrl+Y for redo
2. THE Visual Builder SHALL support Delete key to remove selected nodes
3. THE Visual Builder SHALL support Ctrl+C, Ctrl+V for copy and paste of nodes
4. THE Visual Builder SHALL support Ctrl+S to save the workflow
5. THE Visual Builder SHALL support Ctrl+F to focus the palette search
### Requirement 18: Accessibility
**User Story:** As a workflow creator with accessibility needs, I want the Visual Builder to be keyboard-navigable and screen-reader friendly, so that I can create workflows independently.
#### Acceptance Criteria
1. WHEN a user navigates with Tab key, THE Visual Builder SHALL move focus between interactive elements in logical order
2. WHEN a screen reader is active, THE Visual Builder SHALL provide descriptive labels for all nodes and controls
3. WHEN a user uses keyboard navigation, THE Visual Builder SHALL provide visual focus indicators
4. THE Visual Builder SHALL support high contrast mode for users with visual impairments
5. THE Visual Builder SHALL allow all drag-and-drop operations to be performed via keyboard alternatives
### Requirement 19: Performance
**User Story:** As a workflow creator, I want the Visual Builder to remain responsive with large workflows, so that I can build complex automations without performance degradation.
#### Acceptance Criteria
1. WHEN a workflow contains up to 100 nodes, THE Visual Builder SHALL maintain 60fps rendering performance
2. WHEN a user performs an action, THE Visual Builder SHALL respond within 100ms
3. WHEN loading a workflow, THE Visual Builder SHALL display the canvas within 2 seconds
4. WHEN saving a workflow, THE Visual Builder SHALL complete the operation within 1 second
5. THE Visual Builder SHALL use virtualization for large workflows to render only visible nodes
### Requirement 20: Integration with Existing System
**User Story:** As a system administrator, I want the Visual Builder to integrate seamlessly with existing RPA Vision components, so that visual workflows have access to all system capabilities.
#### Acceptance Criteria
1. WHEN a visual workflow is executed, THE Visual Builder SHALL convert it to a WorkflowGraph compatible with ExecutionLoop
2. WHEN a workflow uses self-healing, THE Visual Builder SHALL configure nodes to enable recovery strategies
3. WHEN a workflow is executed, THE Visual Builder SHALL integrate with the Analytics system for metrics collection
4. WHEN a workflow is saved, THE Visual Builder SHALL store it in the same format as programmatically created workflows
5. WHEN existing workflows are loaded, THE Visual Builder SHALL be able to visualize and edit them if they follow the standard format

236
.kiro/specs/visual-workflow-builder/requirements_fr.md Normal file
View File

@@ -0,0 +1,236 @@
# Document d'Exigences: Visual Workflow Builder
## Introduction
Le Visual Workflow Builder est une interface graphique permettant de créer, modifier et gérer des workflows RPA par glisser-déposer sans écrire de code. Cette fonctionnalité rend l'automatisation RPA accessible aux non-développeurs tout en conservant la puissance nécessaire aux experts.
Le builder offre un canvas intuitif où construire visuellement des workflows en connectant des nodes d'action, configurer les paramètres, tester en temps réel, et déployer en production.
## Glossaire
- **Canvas**: Espace de travail visuel principal
- **Node**: Représentation visuelle d'une action (clic, saisie, attente, etc.)
- **Edge**: Connexion visuelle entre deux nodes
- **Palette**: Barre latérale avec les types de nodes disponibles
- **Panneau de Propriétés**: Interface de configuration des nodes
- **Workflow Graph**: Structure de données sous-jacente
- **Sélecteur de Cible**: Outil pour sélectionner des éléments UI
- **Template**: Modèle de workflow pré-construit
## Exigences
### Exigence 1: Gestion du Canvas et des Nodes
**User Story:** En tant que créateur de workflow, je veux organiser visuellement les actions sur un canvas, afin de voir le flux d'exécution d'un coup d'œil.
#### Critères d'Acceptation
1. QUAND le Visual Builder se charge, LE Visual Builder DOIT afficher un canvas vide avec fond en grille
2. QUAND un utilisateur glisse un node depuis la palette, LE Visual Builder DOIT créer le node à la position de dépôt
3. QUAND un utilisateur sélectionne un node, LE Visual Builder DOIT le mettre en surbrillance et afficher ses propriétés
4. QUAND un utilisateur déplace un node, LE Visual Builder DOIT mettre à jour sa position en temps réel
5. QUAND un utilisateur supprime un node, LE Visual Builder DOIT retirer le node et ses edges
### Exigence 2: Connexion des Nodes
**User Story:** En tant que créateur de workflow, je veux connecter les nodes pour définir l'ordre d'exécution.
#### Critères d'Acceptation
1. QUAND un utilisateur glisse d'un port de sortie vers un port d'entrée, LE Visual Builder DOIT créer un edge
2. QUAND un edge est créé, LE Visual Builder DOIT valider la connexion selon les règles
3. QUAND un utilisateur clique sur un edge, LE Visual Builder DOIT permettre sa suppression
4. QUAND un node est supprimé, LE Visual Builder DOIT retirer automatiquement ses edges
5. QUAND plusieurs edges existent, LE Visual Builder DOIT les distinguer visuellement
### Exigence 3: Configuration des Nodes
**User Story:** En tant que créateur de workflow, je veux configurer les paramètres des nodes via un panneau, sans écrire de code.
#### Critères d'Acceptation
1. QUAND un node est sélectionné, LE Visual Builder DOIT afficher tous ses paramètres configurables
2. QUAND un utilisateur modifie un paramètre, LE Visual Builder DOIT valider et mettre à jour immédiatement
3. QUAND un node nécessite une cible, LE Visual Builder DOIT fournir un bouton de sélection interactive
4. QUAND un utilisateur sauvegarde, LE Visual Builder DOIT persister les changements
5. OÙ un paramètre a une valeur par défaut, LE Visual Builder DOIT pré-remplir le champ
### Exigence 4: Sélection Interactive de Cibles
**User Story:** En tant que créateur de workflow, je veux sélectionner interactivement des éléments UI, pour spécifier facilement les cibles d'actions.
#### Critères d'Acceptation
1. QUAND un utilisateur clique sur le sélecteur de cible, LE Visual Builder DOIT capturer l'écran et entrer en mode sélection
2. QUAND l'utilisateur survole des éléments, LE Visual Builder DOIT mettre en surbrillance les contours
3. QUAND l'utilisateur clique sur un élément, LE Visual Builder DOIT extraire ses propriétés et configurer la cible
4. QUAND la sélection se termine, LE Visual Builder DOIT retourner en mode édition normal
5. QUAND les propriétés sont extraites, LE Visual Builder DOIT inclure texte, position, taille et embedding visuel
### Exigence 5: Sérialisation des Workflows
**User Story:** En tant que créateur de workflow, je veux sauvegarder et charger mes workflows de manière fiable.
#### Critères d'Acceptation
1. QUAND un utilisateur sauvegarde, LE Visual Builder DOIT sérialiser en JSON tous les nodes, edges et configurations
2. QUAND un utilisateur charge, LE Visual Builder DOIT désérialiser et reconstruire l'état exact du canvas
3. QUAND la sérialisation se produit, LE Visual Builder DOIT valider que tous les champs requis sont présents
4. QUAND un workflow est sauvegardé, LE Visual Builder DOIT générer un identifiant unique si absent
5. QUAND la désérialisation échoue, LE Visual Builder DOIT afficher une erreur et empêcher le chargement
### Exigence 6: Exécution des Workflows
**User Story:** En tant que créateur de workflow, je veux exécuter mes workflows directement depuis le builder, pour tester immédiatement.
#### Critères d'Acceptation
1. QUAND un utilisateur clique sur exécuter, LE Visual Builder DOIT convertir en WorkflowGraph et exécuter via ExecutionLoop
2. QUAND l'exécution démarre, LE Visual Builder DOIT afficher la progression en temps réel
3. QUAND une étape se termine, LE Visual Builder DOIT mettre à jour l'état visuel (succès/échec)
4. QUAND l'exécution se termine, LE Visual Builder DOIT afficher un résumé (durée, taux de succès)
5. SI l'exécution échoue, ALORS LE Visual Builder DOIT mettre en surbrillance le node en échec et afficher l'erreur
### Exigence 7: Types de Nodes et Palette
**User Story:** En tant que créateur de workflow, je veux accéder à toutes les actions RPA courantes via une palette visuelle.
#### Critères d'Acceptation
1. QUAND le Visual Builder se charge, LE Visual Builder DOIT afficher une palette avec tous les types de nodes par catégorie
2. QUAND un utilisateur recherche dans la palette, LE Visual Builder DOIT filtrer les types selon la requête
3. QUAND un utilisateur survole un type, LE Visual Builder DOIT afficher une infobulle avec description et paramètres
4. LE Visual Builder DOIT supporter au minimum: Click, Type, Wait, Navigate, Extract, Condition, Loop, Variable
5. OÙ de nouveaux types sont ajoutés, LE Visual Builder DOIT les inclure automatiquement dans la palette
### Exigence 8: Branchements Conditionnels
**User Story:** En tant que créateur de workflow, je veux ajouter de la logique conditionnelle, pour gérer différents scénarios.
#### Critères d'Acceptation
1. QUAND un utilisateur ajoute un node Condition, LE Visual Builder DOIT fournir la configuration pour l'expression et les branches vrai/faux
2. QUAND un node Condition est connecté, LE Visual Builder DOIT permettre des edges séparés pour vrai et faux
3. QUAND une condition est évaluée, LE Visual Builder DOIT suivre la branche appropriée
4. QUAND un node Condition est affiché, LE Visual Builder DOIT distinguer visuellement les ports de sortie vrai/faux
5. QUAND un utilisateur configure une condition, LE Visual Builder DOIT valider la syntaxe de l'expression
### Exigence 9: Boucles
**User Story:** En tant que créateur de workflow, je veux créer des boucles, pour répéter des actions sur des collections.
#### Critères d'Acceptation
1. QUAND un utilisateur ajoute un node Loop, LE Visual Builder DOIT fournir la configuration pour le type (for-each, while, repeat)
2. QUAND un node Loop est connecté, LE Visual Builder DOIT permettre des edges pour le corps et la sortie de boucle
3. QUAND une boucle s'exécute, LE Visual Builder DOIT répéter le corps selon les paramètres
4. QUAND un node Loop est affiché, LE Visual Builder DOIT indiquer visuellement la région du corps de boucle
5. QUAND une boucle se termine, LE Visual Builder DOIT continuer depuis l'edge de sortie
### Exigence 10: Gestion des Variables
**User Story:** En tant que créateur de workflow, je veux définir et utiliser des variables, pour stocker et passer des données entre étapes.
#### Critères d'Acceptation
1. QUAND un utilisateur ouvre la gestion des variables, LE Visual Builder DOIT afficher toutes les variables avec noms, types et valeurs par défaut
2. QUAND un utilisateur crée une variable, LE Visual Builder DOIT valider que le nom est unique et suit les conventions
3. QUAND un utilisateur référence une variable, LE Visual Builder DOIT utiliser la syntaxe ${nom_variable} et valider l'existence
4. QUAND un workflow s'exécute, LE Visual Builder DOIT substituer les références par les valeurs runtime
5. QUAND un node produit une sortie, LE Visual Builder DOIT permettre de stocker le résultat dans une variable
### Exigence 11: Templates de Workflows
**User Story:** En tant que créateur de workflow, je veux utiliser des templates pré-construits, pour créer rapidement des patterns courants.
#### Critères d'Acceptation
1. QUAND un utilisateur crée un workflow, LE Visual Builder DOIT offrir une sélection de templates par cas d'usage
2. QUAND un utilisateur sélectionne un template, LE Visual Builder DOIT charger la structure avec tous les nodes et connexions
3. QUAND un template est chargé, LE Visual Builder DOIT permettre la personnalisation de tous les paramètres
4. LE Visual Builder DOIT inclure au minimum les templates: Login, Remplissage de Formulaire, Extraction de Données, Navigation
5. OÙ les utilisateurs créent des workflows, LE Visual Builder DOIT permettre de les sauvegarder comme templates personnalisés
### Exigence 12: Validation et Vérification d'Erreurs
**User Story:** En tant que créateur de workflow, je veux une validation en temps réel, pour identifier et corriger les erreurs avant l'exécution.
#### Critères d'Acceptation
1. QUAND un workflow est modifié, LE Visual Builder DOIT valider la structure et mettre en surbrillance les erreurs
2. QUAND un node manque de configuration requise, LE Visual Builder DOIT afficher un indicateur d'avertissement
3. QUAND un workflow a des nodes déconnectés, LE Visual Builder DOIT afficher un message d'avertissement
4. QUAND un workflow a des dépendances circulaires, LE Visual Builder DOIT détecter et empêcher la structure invalide
5. QUAND des erreurs de validation existent, LE Visual Builder DOIT empêcher l'exécution jusqu'à résolution
### Exigence 13: Annuler/Refaire
**User Story:** En tant que créateur de workflow, je veux annuler et refaire mes actions, pour expérimenter librement.
#### Critères d'Acceptation
1. QUAND un utilisateur effectue une action, LE Visual Builder DOIT l'ajouter à la pile d'annulation
2. QUAND un utilisateur déclenche annuler, LE Visual Builder DOIT inverser la dernière action
3. QUAND un utilisateur déclenche refaire, LE Visual Builder DOIT réappliquer la dernière action annulée
4. LE Visual Builder DOIT supporter au minimum 50 niveaux d'historique d'annulation
5. QUAND une nouvelle action est effectuée après annulation, LE Visual Builder DOIT vider la pile de refaire
### Exigence 14: Zoom et Panoramique
**User Story:** En tant que créateur de workflow, je veux zoomer et déplacer le canvas, pour travailler confortablement avec de grands workflows.
#### Critères d'Acceptation
1. QUAND un utilisateur scroll avec la molette, LE Visual Builder DOIT zoomer le canvas centré sur le curseur
2. QUAND un utilisateur glisse sur l'espace vide, LE Visual Builder DOIT déplacer la vue
3. QUAND un utilisateur clique sur ajuster à l'écran, LE Visual Builder DOIT ajuster zoom et position pour montrer tout le workflow
4. LE Visual Builder DOIT supporter des niveaux de zoom de 25% à 200%
5. QUAND zoom ou panoramique, LE Visual Builder DOIT maintenir une performance fluide à 60fps
### Exigence 15: Export et Import
**User Story:** En tant que créateur de workflow, je veux exporter et importer des workflows, pour les partager et les sauvegarder.
#### Critères d'Acceptation
1. QUAND un utilisateur exporte, LE Visual Builder DOIT générer un fichier JSON avec la définition complète
2. QUAND un utilisateur importe, LE Visual Builder DOIT valider le format et charger le workflow
3. QUAND export, LE Visual Builder DOIT inclure tous les nodes, edges, variables et métadonnées
4. QUAND import, LE Visual Builder DOIT détecter les incompatibilités de version et offrir la migration
5. LE Visual Builder DOIT supporter l'export en formats JSON et YAML
### Exigence 16: Raccourcis Clavier
**User Story:** En tant que créateur de workflow, je veux des raccourcis clavier, pour travailler plus efficacement.
#### Critères d'Acceptation
1. LE Visual Builder DOIT supporter Ctrl+Z pour annuler et Ctrl+Y pour refaire
2. LE Visual Builder DOIT supporter Suppr pour retirer les nodes sélectionnés
3. LE Visual Builder DOIT supporter Ctrl+C, Ctrl+V pour copier et coller des nodes
4. LE Visual Builder DOIT supporter Ctrl+S pour sauvegarder le workflow
5. LE Visual Builder DOIT supporter Ctrl+F pour focus sur la recherche de palette
### Exigence 17: Performance
**User Story:** En tant que créateur de workflow, je veux que le Visual Builder reste réactif avec de grands workflows.
#### Critères d'Acceptation
1. QUAND un workflow contient jusqu'à 100 nodes, LE Visual Builder DOIT maintenir un rendu à 60fps
2. QUAND un utilisateur effectue une action, LE Visual Builder DOIT répondre en moins de 100ms
3. QUAND chargement d'un workflow, LE Visual Builder DOIT afficher le canvas en moins de 2 secondes
4. QUAND sauvegarde d'un workflow, LE Visual Builder DOIT compléter en moins de 1 seconde
5. LE Visual Builder DOIT utiliser la virtualisation pour ne rendre que les nodes visibles
### Exigence 18: Intégration avec le Système Existant
**User Story:** En tant qu'administrateur système, je veux que le Visual Builder s'intègre parfaitement avec les composants RPA Vision existants.
#### Critères d'Acceptation
1. QUAND un workflow visuel est exécuté, LE Visual Builder DOIT le convertir en WorkflowGraph compatible avec ExecutionLoop
2. QUAND un workflow utilise self-healing, LE Visual Builder DOIT configurer les nodes pour activer les stratégies de récupération
3. QUAND un workflow est exécuté, LE Visual Builder DOIT s'intégrer avec le système Analytics pour la collecte de métriques
4. QUAND un workflow est sauvegardé, LE Visual Builder DOIT le stocker dans le même format que les workflows créés programmatiquement
5. QUAND des workflows existants sont chargés, LE Visual Builder DOIT pouvoir les visualiser et les éditer s'ils suivent le format standard

731
.kiro/specs/visual-workflow-builder/tasks.md Normal file
View File

@@ -0,0 +1,731 @@
# Plan d'Implémentation: Visual Workflow Builder
## Vue d'Ensemble
Ce plan décompose l'implémentation du Visual Workflow Builder en tâches concrètes et incrémentales. Chaque tâche construit sur les précédentes pour aboutir à un système complet et fonctionnel.
---
## Phase 1: Fondations et Structure de Base
- [x] 1. Configurer la structure du projet
- Créer la structure de dossiers pour frontend (React/TypeScript) et backend (Flask)
- Configurer les outils de build (Webpack, TypeScript, ESLint)
- Configurer Flask avec Flask-SocketIO et Flask-CORS
- Créer les fichiers de configuration (package.json, requirements.txt, tsconfig.json)
- _Exigences: 18.1_
- [x] 2. Implémenter les modèles de données de base
- Créer les classes Python pour VisualWorkflow, VisualNode, VisualEdge
- Créer les interfaces TypeScript correspondantes
- Implémenter les méthodes de validation de base
- Ajouter les enums (NodeCategory, NodeStatus, ParameterType)
- _Exigences: 5.1, 5.3_
- [ ]* 2.1 Écrire les tests property-based pour les modèles
- **Property 5: Round-trip de Sérialisation**
- **Valide: Exigences 5.1, 5.2**
- [ ]* 2.2 Écrire les tests unitaires pour la validation
- Test de validation des champs requis
- Test de validation des types de paramètres
- _Exigences: 5.3_
- [x] 3. Créer l'API REST de base
- Implémenter les endpoints CRUD pour workflows (GET, POST, PUT, DELETE)
- Ajouter la sérialisation/désérialisation JSON
- Implémenter la validation des requêtes avec JSON Schema
- Ajouter la gestion d'erreurs et codes d'erreur
- _Exigences: 5.1, 5.2, 5.5_
- [ ]* 3.1 Écrire les tests d'API
- Test de création de workflow
- Test de récupération de workflow
- Test de mise à jour de workflow
- Test de suppression de workflow
- _Exigences: 5.1, 5.2_
- [x] 4. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 2: Interface Canvas de Base
- [x] 5. Implémenter le composant Canvas
- Intégrer react-flow-renderer pour le rendu du graphe
- Créer le composant Canvas avec props de base (nodes, edges, callbacks)
- Implémenter la sélection de nodes (clic simple)
- Implémenter le déplacement de nodes (drag)
- Ajouter la grille d'alignement en arrière-plan
- _Exigences: 1.1, 1.2, 1.3, 1.4_
- [ ] 5.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 5.2 Écrire les tests unitaires du Canvas
- Test de rendu des nodes
- Test de sélection de node
- Test de déplacement de node
- _Exigences: 1.2, 1.3, 1.4_
- [ ]* 5.3 Écrire les tests property-based pour le Canvas
- **Property 1: Suppression de Node Cascade**
- **Valide: Exigences 1.5, 2.4**
- [x] 6. Implémenter la gestion des edges
- Ajouter la création d'edges par drag entre ports
- Implémenter la validation des connexions (compatibilité des ports)
- Ajouter la sélection et suppression d'edges
- Implémenter la suppression automatique des edges lors de la suppression d'un node
- _Exigences: 2.1, 2.2, 2.3, 2.4_
- [x]* 6.1 Écrire les tests property-based pour les edges
- **Property 2: Validation de Connexion**
- **Valide: Exigences 2.2**
- [x] 7. Créer la palette de nodes
- Créer le composant Palette avec liste des types de nodes
- Organiser les nodes par catégorie (Action, Logic, Data, Flow)
- Implémenter le drag depuis la palette vers le canvas
- Ajouter les icônes et descriptions pour chaque type
- Implémenter la recherche/filtrage dans la palette
- _Exigences: 7.1, 7.2, 7.3, 7.4_
- [ ] 7.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 7.2 Écrire les tests property-based pour la palette
- **Property 30: Filtrage de Palette**
- **Valide: Exigences 7.2**
- [ ]* 7.3 Écrire les tests unitaires de la palette
- Test d'affichage des catégories
- Test de recherche et filtrage
- Test de drag depuis la palette
- _Exigences: 7.1, 7.2_
- [x] 8. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 3: Configuration et Propriétés
- [x] 9. Implémenter le panneau de propriétés
- Créer le composant PropertiesPanel
- Implémenter les éditeurs de paramètres (TextEditor, NumberEditor, BooleanEditor, SelectEditor)
- Ajouter la validation en temps réel des paramètres
- Afficher les indicateurs d'avertissement pour paramètres requis manquants
- Implémenter le pré-remplissage des valeurs par défaut
- _Exigences: 3.1, 3.2, 3.4, 3.5_
- [ ] 9.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 9.2 Écrire les tests property-based pour les propriétés
- **Property 8: Validation de Paramètres Requis**
- **Valide: Exigences 12.2**
- [ ]* 9.3 Écrire les tests property-based pour les valeurs par défaut
- **Property 9: Valeurs par Défaut**
- **Valide: Exigences 3.5**
- [ ]* 9.4 Écrire les tests unitaires du panneau de propriétés
- Test d'affichage des paramètres
- Test de validation en temps réel
- Test des avertissements pour champs requis
- _Exigences: 3.1, 3.2_
- [x] 10. Implémenter le sélecteur de cible interactif
- Créer le composant TargetSelector
- Implémenter la capture d'écran via l'API existante (ScreenCapturer)
- Créer le mode de sélection avec overlay interactif
- Implémenter la détection et surbrillance des éléments au survol
- Extraire les propriétés de l'élément sélectionné (texte, position, taille, embedding)
- Configurer automatiquement le paramètre target du node
- _Exigences: 4.1, 4.2, 4.3, 4.4, 4.5_
- [ ] 10.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 10.2 Écrire les tests property-based pour l'extraction de propriétés
- **Property 20: Extraction de Propriétés de Cible**
- **Valide: Exigences 4.5**
- [ ]* 10.3 Écrire les tests unitaires du sélecteur de cible
- Test de capture d'écran
- Test d'extraction de propriétés
- Test de configuration automatique
- _Exigences: 4.3, 4.5_
- [x] 11. Implémenter la gestion des variables
- Créer le composant VariableManager
- Implémenter l'ajout/suppression/modification de variables
- Ajouter la validation d'unicité des noms de variables
- Implémenter le VariableEditor pour les paramètres
- Ajouter la validation des références ${variable}
- _Exigences: 10.1, 10.2, 10.3_
- [ ] 11.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 11.2 Écrire les tests property-based pour les variables
- **Property 10: Validation de Variables**
- **Valide: Exigences 10.3**
- [ ]* 11.3 Écrire les tests property-based pour l'unicité des noms
- **Property 11: Unicité des Noms de Variables**
- **Valide: Exigences 10.2**
- [ ] 12. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 4: Validation et Vérification
- [x] 13. Implémenter le système de validation
- Créer le WorkflowValidator avec règles de validation
- Implémenter la détection de nodes déconnectés
- Implémenter la détection de cycles (dépendances circulaires)
- Ajouter la validation des paramètres requis
- Ajouter la validation des références de variables
- Afficher les erreurs visuellement sur le canvas (indicateurs rouges)
- Empêcher l'exécution si des erreurs critiques existent
- _Exigences: 12.1, 12.2, 12.3, 12.4, 12.5_
- [ ] 13.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 13.2 Écrire les tests property-based pour la validation
- **Property 3: Détection de Cycles**
- **Valide: Exigences 12.4**
- [ ]* 13.3 Écrire les tests property-based pour les nodes déconnectés
- **Property 4: Nodes Déconnectés**
- **Valide: Exigences 12.3**
- [ ]* 13.4 Écrire les tests unitaires de validation
- Test de détection de nodes déconnectés
- Test de détection de cycles
- Test de validation des paramètres requis
- Test de blocage d'exécution avec erreurs
- _Exigences: 12.1, 12.2, 12.3, 12.4, 12.5_
- [x] 14. Implémenter la sérialisation complète
- Ajouter la génération d'ID unique pour nouveaux workflows
- Implémenter la sérialisation complète (nodes, edges, variables, métadonnées)
- Implémenter la désérialisation avec validation
- Ajouter la gestion d'erreurs de désérialisation
- Implémenter la persistance dans la base de données
- _Exigences: 5.1, 5.2, 5.3, 5.4, 5.5_
- [ ]* 14.1 Écrire les tests property-based pour la sérialisation
- **Property 6: Génération d'ID Unique**
- **Valide: Exigences 5.4**
- [ ]* 14.2 Écrire les tests property-based pour les champs requis
- **Property 7: Validation de Champs Requis**
- **Valide: Exigences 5.3**
- [ ] 15. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 5: Conversion et Exécution
- [x] 16. Implémenter le convertisseur Visual → WorkflowGraph
- Créer la classe VisualToGraphConverter
- Implémenter la conversion des nodes de base (Click, Type, Wait, Navigate)
- Implémenter la conversion des edges avec conditions
- Ajouter la validation de la structure avant conversion
- Gérer les erreurs de conversion avec messages clairs
- _Exigences: 6.1, 18.1_
- [ ] 16.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 16.2 Écrire les tests property-based pour la conversion
- **Property 12: Conversion Valide**
- **Valide: Exigences 6.1, 18.1**
- [ ]* 16.3 Écrire les tests d'intégration pour la conversion
- Test de conversion d'un workflow simple
- Test de conversion avec conditions
- Test de conversion avec boucles
- Test de gestion d'erreurs de conversion
- _Exigences: 6.1, 18.1_
- [x] 17. Implémenter les nodes de logique (Condition et Loop)
- Créer les définitions de nodes pour Condition et Loop
- Implémenter la conversion de nodes Condition avec branches true/false
- Implémenter la conversion de nodes Loop (for-each, while, repeat)
- Ajouter la validation des expressions de condition
- Ajouter la configuration des paramètres de boucle
- _Exigences: 8.1, 8.2, 8.3, 8.5, 9.1, 9.2, 9.3, 9.5_
- [ ]* 17.1 Écrire les tests property-based pour les conditions
- **Property 15: Exécution de Conditions**
- **Valide: Exigences 8.3**
- [ ]* 17.2 Écrire les tests property-based pour les boucles
- **Property 16: Exécution de Boucles**
- **Valide: Exigences 9.3**
- [x] 18. Intégrer avec ExecutionLoop
- Créer l'endpoint d'exécution (/api/workflows/:id/execute)
- Implémenter la conversion et l'exécution via ExecutionLoop
- Ajouter la substitution des variables lors de l'exécution
- Implémenter la collecte des résultats d'exécution
- Ajouter la gestion d'erreurs d'exécution
- _Exigences: 6.1, 6.5, 10.4_
- [ ]* 18.1 Écrire les tests property-based pour la substitution de variables
- **Property 14: Substitution de Variables**
- **Valide: Exigences 10.4**
- [ ]* 18.2 Écrire les tests end-to-end d'exécution
- Test de création et exécution d'un workflow simple
- Test d'exécution avec variables
- Test d'exécution avec conditions
- Test d'exécution avec boucles
- _Exigences: 6.1, 6.5, 10.4_
- [x] 19. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 6: Feedback Temps Réel
- [x] 20. Implémenter WebSocket pour temps réel
- Configurer Flask-SocketIO sur le backend
- Créer les événements WebSocket (execution_status, node_status, execution_complete)
- Implémenter le client Socket.IO sur le frontend
- Ajouter la souscription aux mises à jour d'exécution
- _Exigences: 6.2, 6.3, 6.4_
- [ ] 20.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 20.2 Écrire les tests d'intégration WebSocket
- Test de connexion WebSocket
- Test de réception des événements
- Test de souscription/désouscription
- _Exigences: 6.2, 6.3_
- [x] 21. Implémenter la synchronisation d'état visuel
- Mettre à jour l'état des nodes pendant l'exécution (idle → running → success/failed)
- Ajouter l'animation des edges pendant l'exécution
- Afficher le node en cours d'exécution avec surbrillance
- Afficher les erreurs sur les nodes en échec
- Générer et afficher le résumé d'exécution (durée, taux de succès)
- _Exigences: 6.2, 6.3, 6.4, 6.5_
- [ ]* 21.1 Écrire les tests property-based pour la synchronisation
- **Property 13: Synchronisation d'État**
- **Valide: Exigences 6.3**
- [ ]* 21.2 Écrire les tests unitaires de synchronisation
- Test de mise à jour d'état des nodes
- Test d'affichage des erreurs
- Test de génération du résumé
- _Exigences: 6.3, 6.4, 6.5_
- [x] 22. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 7: Templates et Réutilisabilité
- [x] 23. Implémenter le système de templates
- Créer le modèle WorkflowTemplate avec paramètres configurables
- Créer les endpoints API pour templates (GET, POST, instantiate)
- Créer les templates de base (Login, Form Fill, Data Extraction, Navigation)
- Implémenter le chargement de template avec substitution de paramètres
- Ajouter l'UI de sélection de template lors de la création
- _Exigences: 11.1, 11.2, 11.3, 11.4_
- [ ] 23.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 23.2 Écrire les tests property-based pour les templates
- **Property 21: Chargement de Template**
- **Valide: Exigences 11.2, 11.3**
- [ ]* 23.3 Écrire les tests unitaires des templates
- Test de chargement de template
- Test de substitution de paramètres
- Test de personnalisation après chargement
- _Exigences: 11.2, 11.3_
- [x] 24. Implémenter la sauvegarde comme template
- Ajouter l'option "Sauvegarder comme template" dans l'UI
- Implémenter l'extraction des paramètres configurables
- Créer l'UI de configuration des paramètres du template
- Sauvegarder le template dans la base de données
- _Exigences: 11.5_
- [ ]* 24.1 Écrire les tests property-based pour la sauvegarde de template
- **Property 22: Sauvegarde comme Template**
- **Valide: Exigences 11.5**
- [x] 25. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 8: Fonctionnalités Avancées
- [x] 26. Implémenter Undo/Redo
- Créer la classe UndoManager avec piles undo/redo
- Implémenter les actions (AddNodeAction, DeleteNodeAction, MoveNodeAction, etc.)
- Ajouter l'enregistrement automatique des actions dans la pile
- Implémenter les méthodes undo() et redo()
- Supporter au moins 50 niveaux d'historique
- Vider la pile de redo lors d'une nouvelle action après undo
- _Exigences: 13.1, 13.2, 13.3, 13.4, 13.5_
- [ ] 26.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 26.2 Écrire les tests property-based pour Undo/Redo
- **Property 17: Annuler/Refaire Cohérence**
- **Valide: Exigences 13.2, 13.3**
- [ ]* 26.3 Écrire les tests property-based pour la pile
- **Property 18: Pile d'Annulation**
- **Valide: Exigences 13.1, 13.4**
- [ ]* 26.4 Écrire les tests property-based pour l'invalidation
- **Property 19: Invalidation de Refaire**
- **Valide: Exigences 13.5**
- [x] 27. Implémenter Zoom et Panoramique
- Ajouter le zoom avec la molette de souris (centré sur le curseur)
- Implémenter le panoramique par drag sur l'espace vide
- Ajouter les limites de zoom (25% à 200%)
- Implémenter la fonction "Fit to Screen"
- Optimiser les performances pour maintenir 60fps
- _Exigences: 14.1, 14.2, 14.3, 14.4_
- [ ]* 27.1 Écrire les tests property-based pour le zoom
- **Property 32: Zoom Centré**
- **Valide: Exigences 14.1**
- [ ]* 27.2 Écrire les tests property-based pour Fit-to-Screen
- **Property 33: Fit-to-Screen**
- **Valide: Exigences 14.3**
- [ ]* 27.3 Écrire les tests unitaires de zoom/pan
- Test de zoom avec molette
- Test de panoramique
- Test de limites de zoom
- Test de fit-to-screen
- _Exigences: 14.1, 14.2, 14.3, 14.4_
- [x] 28. Implémenter Export/Import
- Créer l'endpoint d'export (/api/workflows/:id/export)
- Implémenter l'export en JSON et YAML
- Créer l'endpoint d'import (/api/workflows/import)
- Implémenter la validation du format lors de l'import
- Ajouter la détection et migration de versions
- Créer l'UI d'export/import
- _Exigences: 15.1, 15.2, 15.3, 15.4, 15.5_
- [ ]* 28.1 Écrire les tests property-based pour l'export
- **Property 23: Complétude d'Export**
- **Valide: Exigences 15.1, 15.3**
- [ ]* 28.2 Écrire les tests property-based pour l'import
- **Property 24: Validation d'Import**
- **Valide: Exigences 15.2**
- [ ]* 28.3 Écrire les tests property-based pour la migration
- **Property 25: Migration de Version**
- **Valide: Exigences 15.4**
- [ ] 29. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 9: Raccourcis et UX
- [ ] 30. Implémenter les raccourcis clavier
- Ajouter Ctrl+Z pour annuler et Ctrl+Y pour refaire
- Ajouter Suppr pour supprimer les nodes sélectionnés
- Ajouter Ctrl+C et Ctrl+V pour copier/coller des nodes
- Ajouter Ctrl+S pour sauvegarder le workflow
- Ajouter Ctrl+F pour focus sur la recherche de palette
- Créer un système de gestion des raccourcis clavier
- _Exigences: 16.1, 16.2, 16.3, 16.4, 16.5_
- [ ] 30.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 30.2 Écrire les tests unitaires des raccourcis
- Test de tous les raccourcis clavier
- Test de prévention des conflits
- _Exigences: 16.1, 16.2, 16.3, 16.4, 16.5_
- [x] 31. Optimiser les performances
- Implémenter la virtualisation pour ne rendre que les nodes visibles
- Optimiser le rendu pour maintenir 60fps avec 100+ nodes
- Ajouter le debouncing pour les opérations coûteuses
- Optimiser la sérialisation/désérialisation
- Profiler et optimiser les points chauds
- _Exigences: 17.1, 17.2, 17.3, 17.4, 17.5_
- [x]* 31.1 Écrire les tests de performance
- Test de rendu avec 100 nodes
- Test de sérialisation de gros workflows
- Test de validation de workflows complexes
- _Exigences: 17.1, 17.3, 17.4_
- [x] 32. Améliorer l'accessibilité
- Ajouter les attributs ARIA pour tous les composants
- Implémenter la navigation au clavier complète
- Ajouter le support des screen readers
- Implémenter le mode high contrast
- Tester avec les outils d'accessibilité (axe, WAVE)
- _Exigences: Accessibilité générale_
- [x] 33. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 10: Intégration avec l'Écosystème
- [x] 34. Intégrer avec Self-Healing
- Ajouter les options de configuration Self-Healing dans les propriétés des nodes
- Configurer les stratégies de récupération lors de la conversion
- Intégrer les notifications de récupération dans l'UI
- Afficher les tentatives de récupération dans le résumé d'exécution
- _Exigences: 18.2_
- [ ]* 34.1 Écrire les tests property-based pour Self-Healing
- **Property 27: Intégration Self-Healing**
- **Valide: Exigences 18.2**
- [ ]* 34.2 Écrire les tests d'intégration Self-Healing
- Test de configuration des stratégies
- Test d'exécution avec récupération automatique
- _Exigences: 18.2_
- [x] 35. Intégrer avec Analytics
- Ajouter les hooks de collecte de métriques lors de l'exécution
- Envoyer les événements au système Analytics
- Afficher les métriques dans l'UI (taux de succès, durée moyenne)
- Créer un dashboard de métriques pour les workflows
- _Exigences: 18.3_
- [ ]* 35.1 Écrire les tests property-based pour Analytics
- **Property 28: Intégration Analytics**
- **Valide: Exigences 18.3**
- [ ]* 35.2 Écrire les tests d'intégration Analytics
- Test de collecte de métriques
- Test d'envoi des événements
- _Exigences: 18.3_
- [x] 36. Assurer la compatibilité de format
- Vérifier que les workflows visuels utilisent le même format que les workflows programmatiques
- Implémenter la conversion bidirectionnelle (visuel ↔ programmatique)
- Tester le chargement de workflows existants dans le Visual Builder
- Tester l'édition de workflows existants
- _Exigences: 18.4, 18.5_
- [ ]* 36.1 Écrire les tests property-based pour la compatibilité
- **Property 26: Compatibilité de Format**
- **Valide: Exigences 18.4**
- [ ]* 36.2 Écrire les tests property-based pour la rétrocompatibilité
- **Property 29: Rétrocompatibilité**
- **Valide: Exigences 18.5**
- [ ]* 36.3 Écrire les tests d'intégration de compatibilité
- Test de chargement de workflows programmatiques
- Test d'édition de workflows existants
- Test de sauvegarde et rechargement
- _Exigences: 18.4, 18.5_
- [ ] 37. Checkpoint - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Phase 11: Extensibilité et Documentation
- [x] 38. Franciser l'interface et ajouter l'aide contextuelle
- Traduire tous les termes techniques en français (Node → Étape, Edge → Connexion, Canvas → Espace de travail, etc.)
- Créer un fichier de traduction (i18n) avec tous les termes de l'interface
- Ajouter des infobulles explicatives sur tous les éléments interactifs
- Créer un système d'aide contextuelle avec icônes "?" cliquables
- Ajouter des descriptions simples pour chaque type d'étape (ex: "Cliquer" au lieu de "Click Node")
- Créer un guide de démarrage rapide intégré (tutoriel interactif)
- Ajouter des exemples visuels dans les infobulles (captures d'écran, animations)
- Implémenter un glossaire accessible depuis l'interface
- Ajouter des messages d'erreur en français clair et compréhensible
- Créer des vidéos tutorielles courtes (30s-1min) pour chaque fonctionnalité
- _Exigences: Accessibilité pour non-informaticiens_
- [ ] 38.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 38.2 Créer la documentation utilisateur en français
- Guide de démarrage rapide
- Tutoriels pas-à-pas avec captures d'écran
- FAQ en français
- Glossaire des termes
- _Exigences: Documentation utilisateur_
- [ ] 39. Implémenter le système d'aide intégré
- Créer un composant HelpTooltip réutilisable
- Ajouter un panneau d'aide contextuelle qui s'ouvre sur demande
- Implémenter la recherche dans l'aide
- Ajouter des liens vers la documentation détaillée
- Créer un mode "Découverte" qui met en surbrillance les fonctionnalités
- Ajouter des suggestions intelligentes basées sur le contexte
- _Exigences: Aide contextuelle_
- [ ] 39.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ]* 39.2 Tester l'accessibilité avec des utilisateurs non-techniques
- Tests utilisateurs avec des profils non-informaticiens
- Recueillir les retours sur la compréhension
- Ajuster la terminologie selon les retours
- _Exigences: Validation utilisateur_
- [ ] 40. Créer des templates avec noms français explicites
- Renommer les templates avec des noms clairs (ex: "Connexion à un site web" au lieu de "Login")
- Ajouter des descriptions détaillées en français pour chaque template
- Créer des catégories en français (Automatisation Web, Traitement de Données, etc.)
- Ajouter des captures d'écran de résultat attendu pour chaque template
- _Exigences: 11.1, 11.4_
- [ ] 40.1 Validation TypeScript automatique
- Exécuter `python3 scripts/validation_typescript_automatique_vwb_12jan2026.py`
- Vérifier: ✅ Vérification TypeScript réussie - aucune erreur
- Vérifier: ✅ Compilation de build réussie
- _Exigences: Stabilité TypeScript_
- [ ] 41. Checkpoint Final - Vérifier que les tests passent
- Assurer que tous les tests passent, demander à l'utilisateur si des questions se posent.
---
## Exemples de Traductions Proposées
### Termes Techniques → Français Accessible
| Terme Technique | Traduction Française | Infobulle Explicative |
|----------------|---------------------|----------------------|
| Canvas | Espace de travail | "Zone où vous construisez votre automatisation en glissant-déposant des étapes" |
| Node | Étape | "Une action à effectuer (cliquer, taper du texte, attendre, etc.)" |
| Edge | Connexion / Flèche | "Relie deux étapes pour définir l'ordre d'exécution" |
| Palette | Boîte à outils | "Liste de toutes les actions disponibles que vous pouvez ajouter" |
| Properties Panel | Panneau de configuration | "Permet de configurer les détails de l'étape sélectionnée" |
| Target Selector | Sélecteur d'élément | "Cliquez pour sélectionner un bouton ou un champ sur votre écran" |
| Workflow | Scénario d'automatisation | "Ensemble d'étapes qui s'exécutent automatiquement" |
| Execute | Lancer / Démarrer | "Démarre l'exécution automatique de votre scénario" |
| Variable | Donnée mémorisée | "Permet de stocker une information pour la réutiliser plus tard" |
| Condition | Choix / Branchement | "Permet de faire différentes actions selon une condition (si... alors... sinon...)" |
| Loop | Répétition / Boucle | "Répète une série d'actions plusieurs fois" |
| Template | Modèle pré-fait | "Scénario déjà construit que vous pouvez personnaliser" |
| Validation | Vérification | "Vérifie que votre scénario est complet et correct avant de le lancer" |
| Undo/Redo | Annuler/Refaire | "Annule la dernière action (Ctrl+Z) ou la refait (Ctrl+Y)" |
### Catégories de la Palette en Français
| Catégorie Technique | Catégorie Française | Description |
|--------------------|-------------------|-------------|
| ACTION | Actions Web | "Interagir avec des sites web (cliquer, taper, naviguer)" |
| LOGIC | Logique | "Ajouter des choix et des répétitions" |
| DATA | Données | "Stocker et transformer des informations" |
| FLOW | Contrôle | "Démarrer, terminer, ou organiser votre scénario" |
| INTEGRATION | Intégrations | "Se connecter à des services externes (API, bases de données)" |
### Messages d'Erreur en Français Clair
| Erreur Technique | Message Français Accessible |
|-----------------|---------------------------|
| "Missing required parameter: target" | "⚠️ Il manque une information : vous devez sélectionner un élément à cliquer" |
| "Circular dependency detected" | "⚠️ Votre scénario forme une boucle infinie. Vérifiez que les étapes ne se renvoient pas les unes aux autres" |
| "Disconnected node found" | "⚠️ Cette étape n'est pas connectée au reste du scénario. Reliez-la avec une flèche" |
| "Invalid variable reference: ${username}" | "⚠️ La donnée '${username}' n'existe pas. Créez-la d'abord dans la gestion des données" |
| "Execution failed at node 'click-1'" | "❌ L'étape 'Cliquer sur le bouton' a échoué. L'élément n'a peut-être pas été trouvé" |
---
## Notes d'Implémentation
### Principes de Design pour Non-Informaticiens
1. **Langage Simple**: Éviter le jargon technique, utiliser des mots du quotidien
2. **Feedback Visuel**: Utiliser des couleurs, icônes et animations pour guider
3. **Aide Proactive**: Suggérer des actions, détecter les erreurs courantes
4. **Exemples Concrets**: Montrer des cas d'usage réels plutôt que des concepts abstraits
5. **Progression Guidée**: Tutoriel interactif pour les premiers pas
6. **Tolérance aux Erreurs**: Permettre l'expérimentation sans conséquences graves
### Infobulles Contextuelles
Chaque élément de l'interface doit avoir une infobulle qui apparaît au survol, contenant:
- **Titre court** en gras (ex: "Sélecteur d'élément")
- **Description simple** (1-2 phrases)
- **Exemple concret** si pertinent
- **Lien "En savoir plus"** vers la documentation détaillée
### Mode Découverte
Un mode spécial pour les nouveaux utilisateurs qui:
- Met en surbrillance les zones importantes
- Affiche des bulles d'aide automatiquement
- Propose un parcours guidé étape par étape
- Peut être désactivé une fois l'utilisateur à l'aise