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

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

View File

@@ -0,0 +1,597 @@
# Design Technique : Résolution du Problème de Palette Vide Cross-Machine
## Vue d'Ensemble Architecturale
Cette spécification définit l'architecture technique pour résoudre le problème de palette vide dans le Visual Workflow Builder lorsqu'utilisé sur une machine distante.
**Auteur :** Dom, Alice, Kiro - 10 janvier 2026
## Architecture Actuelle vs Cible
### Architecture Actuelle (Problématique)
```
Frontend (Machine A) → catalogService.ts → http://localhost:5004 (Machine A)
❌ ÉCHEC (Backend sur Machine B)
Palette Vide
```
### Architecture Cible (Solution)
```
Frontend (Machine A) → catalogService.ts → Détection Auto URL
┌─ http://current-origin/api/vwb/catalog (Machine A)
├─ http://localhost:5004 (Machine A)
├─ http://192.168.x.x:5004 (Machine B)
└─ Catalogue Statique (Fallback)
✅ Palette Complète
```
## Composants Modifiés
### 1. Service Catalogue Étendu
#### Interface de Configuration
```typescript
interface CatalogServiceConfig {
// URLs à tester dans l'ordre
candidateUrls: string[];
// Configuration de retry
timeout: number;
maxRetries: number;
retryDelay: number;
// Cache de configuration
cacheKey: string;
cacheDuration: number;
// Mode fallback
enableStaticFallback: boolean;
staticCatalogPath: string;
}
```
#### Méthode de Détection d'URL
```typescript
class CatalogService {
private async detectBackendUrl(): Promise<string | null> {
const candidates = [
// 1. URL courante (même origine)
`${window.location.origin}/api/vwb/catalog`,
// 2. Configuration explicite
process.env.REACT_APP_CATALOG_URL,
new URLSearchParams(window.location.search).get('catalogUrl'),
// 3. URLs par défaut
'http://localhost:5004/api/vwb/catalog',
// 4. IP locale détectée
await this.detectLocalIP() + ':5004/api/vwb/catalog'
].filter(Boolean);
for (const url of candidates) {
if (await this.testUrl(url)) {
this.cacheWorkingUrl(url);
return url;
}
}
return null; // Déclenche fallback statique
}
private async testUrl(url: string): Promise<boolean> {
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 2000);
const response = await fetch(`${url}/health`, {
signal: controller.signal,
method: 'GET',
headers: { 'Accept': 'application/json' }
});
clearTimeout(timeoutId);
return response.ok;
} catch {
return false;
}
}
}
```
### 2. Catalogue Statique de Secours
#### Structure du Catalogue Statique
```typescript
// visual_workflow_builder/frontend/src/data/staticCatalog.ts
export const STATIC_CATALOG_ACTIONS: VWBCatalogAction[] = [
{
id: 'click_anchor',
name: 'Cliquer sur Élément',
description: 'Cliquer sur un élément identifié visuellement',
category: 'vision_ui',
icon: '🖱️',
parameters: {
visual_anchor: {
type: 'VWBVisualAnchor',
required: true,
description: 'Élément à cliquer'
},
click_type: {
type: 'string',
required: false,
default: 'left',
options: ['left', 'right', 'double'],
description: 'Type de clic'
}
},
examples: [
{
name: 'Clic simple sur bouton',
description: 'Cliquer sur un bouton "Valider"',
parameters: {
visual_anchor: { /* anchor data */ },
click_type: 'left'
}
}
],
metadata: {
version: '1.0.0',
author: 'Dom, Alice, Kiro',
complexity: 'simple',
estimatedDuration: 1000
}
},
// ... autres actions
];
export const STATIC_CATALOG_CATEGORIES: VWBActionCategoryInfo[] = [
{
id: 'vision_ui',
name: 'Interface Utilisateur',
description: 'Actions d\'interaction visuelle',
icon: '🖱️',
color: '#2196f3',
actionCount: 5,
isEnabled: true
}
];
```
### 3. Hook useCatalogActions Étendu
#### Logique de Fallback
```typescript
export const useCatalogActions = (options: UseCatalogActionsOptions = {}) => {
const [mode, setMode] = useState<'dynamic' | 'static' | 'detecting'>('detecting');
const loadCatalogData = useCallback(async () => {
setState(prev => ({ ...prev, isLoading: true, error: null }));
try {
// Tentative de chargement dynamique
const dynamicData = await catalogService.getActions();
setState({
actions: dynamicData.actions,
categories: await catalogService.getCategories(),
isLoading: false,
isOnline: true,
error: null,
lastUpdate: new Date()
});
setMode('dynamic');
} catch (error) {
console.warn('Catalogue dynamique indisponible, basculement vers statique:', error);
// Fallback vers catalogue statique
setState({
actions: STATIC_CATALOG_ACTIONS,
categories: STATIC_CATALOG_CATEGORIES,
isLoading: false,
isOnline: false,
error: 'Service catalogue indisponible - Mode hors ligne',
lastUpdate: new Date()
});
setMode('static');
}
}, []);
// ... reste de l'implémentation
};
```
### 4. Interface Utilisateur Améliorée
#### Indicateurs de Statut dans la Palette
```typescript
// Composant StatusIndicator
const CatalogStatusIndicator: React.FC<{
mode: 'dynamic' | 'static' | 'detecting';
actionCount: number;
error?: string;
onRetry: () => void;
}> = ({ mode, actionCount, error, onRetry }) => {
const getStatusConfig = () => {
switch (mode) {
case 'dynamic':
return {
icon: <OnlineIcon color="success" />,
label: 'En ligne',
color: 'success',
tooltip: `Catalogue en ligne - ${actionCount} actions disponibles`
};
case 'static':
return {
icon: <OfflineIcon color="warning" />,
label: 'Hors ligne',
color: 'warning',
tooltip: `Mode hors ligne - ${actionCount} actions de base disponibles`
};
case 'detecting':
return {
icon: <CircularProgress size={16} />,
label: 'Détection...',
color: 'info',
tooltip: 'Détection du service catalogue en cours...'
};
}
};
const config = getStatusConfig();
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Tooltip title={config.tooltip} placement="left">
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
{config.icon}
<Typography variant="caption" color={config.color}>
{config.label}
</Typography>
<Badge badgeContent={actionCount} color="primary" max={99} />
</Box>
</Tooltip>
{error && (
<Tooltip title="Cliquer pour réessayer">
<IconButton size="small" onClick={onRetry}>
<RefreshIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
</Box>
);
};
```
## Flux de Données
### 1. Séquence de Démarrage
```mermaid
sequenceDiagram
participant U as Utilisateur
participant P as Palette
participant H as useCatalogActions
participant S as CatalogService
participant C as Cache
participant SC as StaticCatalog
U->>P: Ouvre VWB
P->>H: useEffect (autoLoad)
H->>S: loadCatalogData()
S->>C: getCachedUrl()
alt URL en cache valide
C-->>S: URL fonctionnelle
S->>S: testUrl(cachedUrl)
alt URL fonctionne
S-->>H: Actions dynamiques
H-->>P: État: dynamic, actions
else URL échoue
S->>S: detectBackendUrl()
S-->>H: Nouvelle URL ou null
end
else Pas de cache
S->>S: detectBackendUrl()
alt URL trouvée
S->>C: cacheWorkingUrl()
S-->>H: Actions dynamiques
H-->>P: État: dynamic, actions
else Aucune URL
H->>SC: STATIC_CATALOG_ACTIONS
H-->>P: État: static, actions statiques
end
end
```
### 2. Gestion des Erreurs Réseau
```mermaid
flowchart TD
A[Requête Catalogue] --> B{Succès?}
B -->|Oui| C[Mode Dynamique]
B -->|Non| D[Erreur Réseau]
D --> E{Type d'erreur}
E -->|Timeout| F[Retry avec délai]
E -->|404/500| G[Essayer URL suivante]
E -->|Network Error| H[Mode Statique]
F --> I{Retry réussi?}
I -->|Oui| C
I -->|Non| H
G --> J{Autres URLs?}
J -->|Oui| A
J -->|Non| H
H --> K[Catalogue Statique]
```
## Patterns de Design
### 1. Strategy Pattern pour Détection d'URL
```typescript
interface UrlDetectionStrategy {
detect(): Promise<string | null>;
priority: number;
}
class OriginUrlStrategy implements UrlDetectionStrategy {
priority = 1;
async detect(): Promise<string | null> {
const url = `${window.location.origin}/api/vwb/catalog`;
return await catalogService.testUrl(url) ? url : null;
}
}
class LocalhostStrategy implements UrlDetectionStrategy {
priority = 2;
async detect(): Promise<string | null> {
const url = 'http://localhost:5004/api/vwb/catalog';
return await catalogService.testUrl(url) ? url : null;
}
}
class LocalIPStrategy implements UrlDetectionStrategy {
priority = 3;
async detect(): Promise<string | null> {
const ip = await this.detectLocalIP();
const url = `http://${ip}:5004/api/vwb/catalog`;
return await catalogService.testUrl(url) ? url : null;
}
}
```
### 2. Observer Pattern pour Statut
```typescript
interface CatalogStatusObserver {
onStatusChange(status: CatalogStatus): void;
}
class CatalogService {
private observers: CatalogStatusObserver[] = [];
addObserver(observer: CatalogStatusObserver) {
this.observers.push(observer);
}
private notifyStatusChange(status: CatalogStatus) {
this.observers.forEach(observer => observer.onStatusChange(status));
}
}
```
### 3. Cache Pattern avec Expiration
```typescript
interface CacheEntry<T> {
data: T;
timestamp: number;
ttl: number;
}
class CatalogCache {
private cache = new Map<string, CacheEntry<any>>();
set<T>(key: string, data: T, ttl: number = 24 * 60 * 60 * 1000) {
this.cache.set(key, {
data,
timestamp: Date.now(),
ttl
});
}
get<T>(key: string): T | null {
const entry = this.cache.get(key);
if (!entry) return null;
if (Date.now() - entry.timestamp > entry.ttl) {
this.cache.delete(key);
return null;
}
return entry.data;
}
}
```
## Configuration et Déploiement
### Variables d'Environnement
```bash
# .env.example
REACT_APP_CATALOG_URL=http://localhost:5004/api/vwb/catalog
REACT_APP_CATALOG_TIMEOUT=5000
REACT_APP_CATALOG_RETRY_ATTEMPTS=3
REACT_APP_ENABLE_STATIC_FALLBACK=true
```
### Configuration Runtime
```typescript
// Configuration via URL parameters
const urlParams = new URLSearchParams(window.location.search);
const catalogConfig = {
url: urlParams.get('catalogUrl'),
timeout: parseInt(urlParams.get('catalogTimeout') || '5000'),
enableFallback: urlParams.get('enableFallback') !== 'false'
};
```
## Tests et Validation
### Tests Unitaires
```typescript
describe('CatalogService URL Detection', () => {
it('should try origin URL first', async () => {
const service = new CatalogService();
const spy = jest.spyOn(service, 'testUrl');
await service.detectBackendUrl();
expect(spy).toHaveBeenCalledWith(
`${window.location.origin}/api/vwb/catalog`
);
});
it('should fallback to static catalog when all URLs fail', async () => {
const service = new CatalogService();
jest.spyOn(service, 'testUrl').mockResolvedValue(false);
const result = await service.detectBackendUrl();
expect(result).toBeNull();
});
});
```
### Tests d'Intégration Cross-Machine
```python
# tests/integration/test_palette_cross_machine_resolution_10jan2026.py
def test_palette_cross_machine_detection():
"""Test détection automatique d'URL cross-machine"""
# Démarrer backend sur IP différente
backend_ip = get_local_ip()
start_backend_on_ip(backend_ip, 5004)
# Ouvrir frontend sur localhost
driver = webdriver.Chrome()
driver.get("http://localhost:3000")
# Vérifier que la palette se charge
palette = wait_for_element(driver, "[data-testid='palette']")
actions = palette.find_elements(By.CSS_SELECTOR, "[draggable='true']")
# Doit avoir plus que les actions web par défaut
assert len(actions) > 4, "Catalogue VisionOnly non chargé"
# Vérifier indicateur de statut
status = driver.find_element(By.CSS_SELECTOR, "[data-testid='catalog-status']")
assert "En ligne" in status.text
```
## Métriques et Monitoring
### Métriques de Performance
```typescript
interface CatalogMetrics {
detectionTime: number;
successRate: number;
fallbackRate: number;
cacheHitRate: number;
averageResponseTime: number;
}
class CatalogMetricsCollector {
private metrics: CatalogMetrics = {
detectionTime: 0,
successRate: 0,
fallbackRate: 0,
cacheHitRate: 0,
averageResponseTime: 0
};
recordDetection(startTime: number, success: boolean) {
const duration = Date.now() - startTime;
this.metrics.detectionTime = duration;
// ... mise à jour des métriques
}
}
```
### Logging Structuré
```typescript
interface CatalogLogEntry {
timestamp: string;
level: 'info' | 'warn' | 'error';
event: string;
data: Record<string, any>;
}
class CatalogLogger {
log(level: string, event: string, data: any = {}) {
const entry: CatalogLogEntry = {
timestamp: new Date().toISOString(),
level: level as any,
event,
data
};
console.log(`[Catalog] ${entry.timestamp} ${level.toUpperCase()}: ${event}`, data);
}
}
```
## Sécurité et Robustesse
### Validation des URLs
```typescript
function isValidCatalogUrl(url: string): boolean {
try {
const parsed = new URL(url);
// Protocoles autorisés
if (!['http:', 'https:'].includes(parsed.protocol)) {
return false;
}
// Ports autorisés (éviter ports système)
const port = parseInt(parsed.port) || (parsed.protocol === 'https:' ? 443 : 80);
if (port < 1024 && ![80, 443].includes(port)) {
return false;
}
return true;
} catch {
return false;
}
}
```
### Protection contre les Attaques
```typescript
class CatalogService {
private rateLimiter = new Map<string, number>();
private async makeRequest<T>(endpoint: string): Promise<T> {
// Rate limiting par URL
const now = Date.now();
const lastRequest = this.rateLimiter.get(endpoint) || 0;
if (now - lastRequest < 1000) { // Max 1 req/sec par endpoint
throw new Error('Rate limit exceeded');
}
this.rateLimiter.set(endpoint, now);
// ... reste de l'implémentation
}
}
```
## Conclusion
Cette architecture technique fournit une solution robuste et évolutive pour résoudre le problème de palette vide cross-machine. Elle combine détection automatique intelligente, fallback gracieux, et amélioration de l'expérience utilisateur tout en maintenant la compatibilité avec l'architecture existante du VWB.

View File

@@ -0,0 +1,181 @@
# Spécification : Résolution du Problème de Palette Vide Cross-Machine
## Introduction
Cette spécification définit la résolution du problème de palette vide dans le Visual Workflow Builder (VWB) lorsque l'application est utilisée sur une machine distante. Le problème identifié est que seules les actions web hardcodées apparaissent dans la palette, tandis que les actions du catalogue VisionOnly ne se chargent pas à cause d'une URL de service hardcodée.
**Auteur :** Dom, Alice, Kiro - 10 janvier 2026
## Contexte et Problème Identifié
### État Actuel
- **Fonctionnement local** : La palette affiche toutes les actions (web + catalogue VisionOnly)
- **Problème cross-machine** : Seules les actions web apparaissent, le catalogue VisionOnly est vide
- **Cause racine** : URL hardcodée `http://localhost:5004` dans `catalogService.ts`
### Analyse Technique
1. **Actions web** : Hardcodées dans `getDefaultCategories()` → Toujours disponibles
2. **Actions catalogue** : Chargées dynamiquement via `useCatalogActions` hook → Échouent cross-machine
3. **Service catalogue** : Utilise URL fixe `localhost:5004` → Inaccessible depuis machine distante
## Objectifs du Projet
### Objectif Principal
Résoudre le problème de palette vide cross-machine en rendant le service catalogue configurable et robuste, avec fallback gracieux vers des actions par défaut.
### Objectifs Spécifiques
1. **Configuration dynamique** : Rendre l'URL du service catalogue configurable
2. **Détection automatique** : Détecter automatiquement l'URL du backend VWB
3. **Fallback robuste** : Implémenter un catalogue statique de secours
4. **Gestion d'erreurs** : Améliorer la gestion des erreurs réseau
5. **Tests cross-machine** : Valider le fonctionnement sur machines distantes
## Exigences Fonctionnelles
### Exigence 1 : Configuration Dynamique du Service Catalogue
**User Story :** En tant qu'utilisateur du VWB sur une machine distante, je veux que la palette charge automatiquement les actions du catalogue, afin d'avoir accès à toutes les fonctionnalités.
#### Critères d'Acceptation
1. LE service catalogue DOIT détecter automatiquement l'URL du backend VWB
2. QUAND l'URL automatique échoue, LE système DOIT essayer des URLs alternatives configurables
3. LA configuration DOIT supporter les variables d'environnement et paramètres URL
4. LE service DOIT fonctionner avec `localhost`, IP locale, et noms d'hôte
5. LA détection DOIT être transparente pour l'utilisateur
### Exigence 2 : Catalogue Statique de Secours
**User Story :** En tant qu'utilisateur du VWB hors ligne ou avec service catalogue indisponible, je veux avoir accès aux actions de base, afin de pouvoir créer des workflows simples.
#### Critères d'Acceptation
1. LE système DOIT fournir un catalogue statique avec actions Vision UI de base
2. QUAND le service catalogue est indisponible, LA palette DOIT afficher les actions statiques
3. LES actions statiques DOIVENT inclure : ClickAnchor, TypeText, WaitForAnchor, ExtractText
4. CHAQUE action statique DOIT avoir les mêmes métadonnées que les actions dynamiques
5. LE passage au mode statique DOIT être transparent avec indicateur visuel
### Exigence 3 : Détection Automatique d'URL
**User Story :** En tant que système VWB, je veux détecter automatiquement l'URL du backend, afin de fonctionner sans configuration manuelle.
#### Critères d'Acceptation
1. LE système DOIT essayer l'URL courante du frontend (même origine)
2. QUAND l'origine échoue, LE système DOIT essayer `localhost:5004`
3. LE système DOIT essayer l'IP locale détectée avec port 5004
4. CHAQUE tentative DOIT avoir un timeout de 2 secondes maximum
5. LA première URL qui répond DOIT être mise en cache pour les requêtes suivantes
### Exigence 4 : Gestion d'Erreurs Améliorée
**User Story :** En tant qu'utilisateur du VWB, je veux comprendre pourquoi le catalogue ne se charge pas, afin de pouvoir résoudre le problème ou utiliser les alternatives.
#### Critères d'Acceptation
1. QUAND le catalogue échoue, LE système DOIT afficher un message explicatif en français
2. LE message DOIT indiquer si c'est un problème réseau, de service, ou de configuration
3. L'interface DOIT proposer un bouton "Réessayer" pour recharger le catalogue
4. LE système DOIT logger les tentatives de connexion pour diagnostic
5. UN indicateur visuel DOIT montrer l'état du catalogue (en ligne/hors ligne/erreur)
### Exigence 5 : Persistance de Configuration
**User Story :** En tant qu'utilisateur du VWB, je veux que le système se souvienne de la configuration qui fonctionne, afin d'éviter les délais de détection à chaque utilisation.
#### Critères d'Acceptation
1. QUAND une URL fonctionne, LE système DOIT la sauvegarder en localStorage
2. AU démarrage suivant, LE système DOIT essayer d'abord l'URL sauvegardée
3. SI l'URL sauvegardée échoue, LE système DOIT relancer la détection automatique
4. LA configuration DOIT expirer après 24 heures pour forcer une re-détection
5. L'utilisateur DOIT pouvoir forcer une re-détection via l'interface
## Exigences Techniques
### Exigence 6 : Architecture de Service Configurable
**User Story :** En tant que développeur VWB, je veux un service catalogue flexible, afin de supporter différents environnements de déploiement.
#### Critères d'Acceptation
1. LE service catalogue DOIT accepter une configuration d'URLs multiples
2. LA classe CatalogService DOIT implémenter un pattern de fallback automatique
3. CHAQUE méthode DOIT gérer gracieusement les erreurs réseau
4. LE service DOIT exposer des métriques de santé et connectivité
5. L'architecture DOIT permettre l'ajout facile de nouveaux modes de détection
### Exigence 7 : Catalogue Statique Intégré
**User Story :** En tant que système VWB, je veux un catalogue d'actions intégré, afin de garantir un fonctionnement minimal même hors ligne.
#### Critères d'Acceptation
1. UN fichier `staticCatalog.ts` DOIT définir les actions de base
2. LES actions statiques DOIVENT respecter l'interface `VWBCatalogAction`
3. LE catalogue statique DOIT être importé comme module ES6
4. LES actions statiques DOIVENT avoir des exemples et documentation
5. LE système DOIT pouvoir basculer dynamiquement entre catalogue dynamique et statique
### Exigence 8 : Tests Cross-Machine
**User Story :** En tant que développeur VWB, je veux valider le fonctionnement cross-machine, afin d'assurer la robustesse du système.
#### Critères d'Acceptation
1. LES tests DOIVENT simuler différents scénarios réseau (localhost, IP, hostname)
2. UN test DOIT valider le fallback vers le catalogue statique
3. LES tests DOIVENT vérifier la persistance de configuration
4. UN test d'intégration DOIT valider le fonctionnement sur machine distante réelle
5. TOUS les tests DOIVENT être dans le répertoire `tests/integration/`
## Plan d'Implémentation
### Phase 1 : Service Catalogue Configurable (Jour 1)
- Modification de `catalogService.ts` pour support URLs multiples
- Implémentation de la détection automatique d'URL
- Tests unitaires du nouveau service
### Phase 2 : Catalogue Statique de Secours (Jour 1-2)
- Création de `staticCatalog.ts` avec actions de base
- Intégration dans `useCatalogActions` hook
- Tests du mode fallback
### Phase 3 : Interface Utilisateur Améliorée (Jour 2)
- Amélioration des indicateurs de statut dans la palette
- Messages d'erreur explicatifs en français
- Bouton de rechargement manuel
### Phase 4 : Tests et Validation (Jour 2-3)
- Tests d'intégration cross-machine
- Validation sur environnements réels
- Documentation utilisateur
## Critères de Succès
1. **Fonctionnel** : Palette complète sur machines locales et distantes
2. **Robustesse** : Fallback automatique vers catalogue statique
3. **Performance** : Détection d'URL en moins de 5 secondes
4. **Utilisabilité** : Messages d'erreur clairs et actions correctives
5. **Tests** : Validation sur au moins 2 configurations réseau différentes
## Risques et Mitigation
### Risque 1 : Complexité de Détection Réseau
**Mitigation :** Implémentation progressive avec fallback simple vers catalogue statique
### Risque 2 : Performance de Détection
**Mitigation :** Timeouts courts et mise en cache de la configuration qui fonctionne
### Risque 3 : Compatibilité Cross-Browser
**Mitigation :** Tests sur Chrome, Firefox, Edge avec différentes configurations réseau
### Risque 4 : Maintenance du Catalogue Statique
**Mitigation :** Synchronisation automatique avec le catalogue dynamique lors des builds
## Conclusion
Cette spécification définit une solution complète pour résoudre le problème de palette vide cross-machine dans le VWB. L'approche combine détection automatique intelligente, fallback robuste, et amélioration de l'expérience utilisateur pour garantir un fonctionnement fiable dans tous les environnements.
L'implémentation sera rapide (2-3 jours) et permettra aux utilisateurs d'accéder à toutes les fonctionnalités du VWB indépendamment de leur configuration réseau.

View File

@@ -0,0 +1,330 @@
# Tâches : Résolution du Problème de Palette Vide Cross-Machine
## Vue d'Ensemble
Ce document détaille les tâches spécifiques pour résoudre le problème de palette vide dans le Visual Workflow Builder lorsqu'utilisé sur une machine distante.
**Auteur :** Dom, Alice, Kiro - 10 janvier 2026
## Phase 1 : Service Catalogue Configurable
### Tâche 1.1 : Modification du Service Catalogue
**Priorité :** Critique
**Estimation :** 4 heures
**Assigné :** Équipe Frontend
#### Description
Modifier `catalogService.ts` pour supporter la détection automatique d'URL et les fallbacks multiples.
#### Sous-tâches
- [ ] Ajouter interface `CatalogServiceConfig` avec URLs multiples
- [ ] Implémenter méthode `detectBackendUrl()` avec tentatives multiples
- [ ] Ajouter gestion de cache localStorage pour URL fonctionnelle
- [ ] Implémenter timeouts et retry logic
- [ ] Ajouter logging détaillé pour diagnostic
#### Critères d'Acceptation
- Service teste automatiquement : origine courante, localhost:5004, IP locale:5004
- URL fonctionnelle mise en cache pour 24h
- Timeouts de 2s par tentative maximum
- Logs détaillés des tentatives de connexion
#### Fichiers Modifiés
- `visual_workflow_builder/frontend/src/services/catalogService.ts`
### Tâche 1.2 : Configuration Environnement
**Priorité :** Haute
**Estimation :** 2 heures
**Assigné :** Équipe Frontend
#### Description
Ajouter support pour configuration via variables d'environnement et paramètres URL.
#### Sous-tâches
- [ ] Ajouter variables d'environnement `REACT_APP_CATALOG_URL`
- [ ] Support paramètre URL `?catalogUrl=...`
- [ ] Interface de configuration dans les paramètres utilisateur
- [ ] Validation des URLs de configuration
#### Critères d'Acceptation
- Variables d'environnement prises en compte au build
- Paramètres URL overrident la détection automatique
- URLs invalides rejetées avec message d'erreur
#### Fichiers Modifiés
- `visual_workflow_builder/frontend/src/services/catalogService.ts`
- `visual_workflow_builder/frontend/.env.example`
## Phase 2 : Catalogue Statique de Secours
### Tâche 2.1 : Création du Catalogue Statique
**Priorité :** Critique
**Estimation :** 6 heures
**Assigné :** Équipe Frontend
#### Description
Créer un catalogue statique avec les actions Vision UI de base pour mode hors ligne.
#### Sous-tâches
- [ ] Créer fichier `staticCatalog.ts` avec actions de base
- [ ] Définir actions : ClickAnchor, TypeText, WaitForAnchor, ExtractText, HotKey
- [ ] Ajouter métadonnées complètes (icônes, descriptions, exemples)
- [ ] Respecter interface `VWBCatalogAction` existante
- [ ] Ajouter catégories statiques avec compteurs
#### Critères d'Acceptation
- Au moins 5 actions Vision UI de base définies
- Chaque action a nom, description, icône, paramètres, exemples
- Compatible avec interface existante du catalogue
- Organisé en catégories cohérentes
#### Fichiers Créés
- `visual_workflow_builder/frontend/src/data/staticCatalog.ts`
### Tâche 2.2 : Intégration du Fallback
**Priorité :** Critique
**Estimation :** 4 heures
**Assigné :** Équipe Frontend
#### Description
Intégrer le catalogue statique dans le hook `useCatalogActions` comme fallback automatique.
#### Sous-tâches
- [ ] Modifier `useCatalogActions` pour détecter échec du service
- [ ] Basculer automatiquement vers catalogue statique
- [ ] Maintenir interface identique pour composants consommateurs
- [ ] Ajouter indicateur de mode (dynamique/statique)
- [ ] Permettre retry vers mode dynamique
#### Critères d'Acceptation
- Bascule transparente vers catalogue statique en cas d'échec
- Interface hook inchangée pour composants existants
- Indicateur visuel du mode actuel
- Possibilité de forcer retry vers mode dynamique
#### Fichiers Modifiés
- `visual_workflow_builder/frontend/src/hooks/useCatalogActions.ts`
## Phase 3 : Interface Utilisateur Améliorée
### Tâche 3.1 : Indicateurs de Statut Améliorés
**Priorité :** Moyenne
**Estimation :** 3 heures
**Assigné :** Équipe Frontend
#### Description
Améliorer les indicateurs de statut dans la palette pour informer l'utilisateur de l'état du catalogue.
#### Sous-tâches
- [ ] Ajouter icônes distinctes pour : en ligne, hors ligne, mode statique, erreur
- [ ] Tooltips explicatifs en français pour chaque état
- [ ] Badge avec nombre d'actions disponibles
- [ ] Indicateur de dernière mise à jour
- [ ] Animation de chargement pendant détection
#### Critères d'Acceptation
- Statut clairement visible en haut de la palette
- Messages en français explicatifs
- Différenciation visuelle entre modes dynamique/statique
- Information sur nombre d'actions disponibles
#### Fichiers Modifiés
- `visual_workflow_builder/frontend/src/components/Palette/index.tsx`
### Tâche 3.2 : Messages d'Erreur et Actions Correctives
**Priorité :** Moyenne
**Estimation :** 2 heures
**Assigné :** Équipe Frontend
#### Description
Ajouter messages d'erreur explicatifs et boutons d'action pour résoudre les problèmes.
#### Sous-tâches
- [ ] Messages d'erreur spécifiques : réseau, service, configuration
- [ ] Bouton "Réessayer" pour recharger le catalogue
- [ ] Bouton "Forcer re-détection" pour relancer la détection d'URL
- [ ] Lien vers documentation de dépannage
- [ ] Suggestions d'actions selon le type d'erreur
#### Critères d'Acceptation
- Messages d'erreur clairs et actionnables en français
- Boutons fonctionnels pour résoudre les problèmes
- Suggestions contextuelles selon l'erreur
- Liens vers aide et documentation
#### Fichiers Modifiés
- `visual_workflow_builder/frontend/src/components/Palette/index.tsx`
- `visual_workflow_builder/frontend/src/utils/errorMessages.ts`
## Phase 4 : Tests et Validation
### Tâche 4.1 : Tests Unitaires Service Catalogue
**Priorité :** Haute
**Estimation :** 4 heures
**Assigné :** Équipe Test
#### Description
Créer tests unitaires complets pour le service catalogue modifié.
#### Sous-tâches
- [ ] Tests de détection automatique d'URL
- [ ] Tests de fallback vers catalogue statique
- [ ] Tests de mise en cache de configuration
- [ ] Tests de gestion d'erreurs réseau
- [ ] Tests de timeouts et retry logic
#### Critères d'Acceptation
- Couverture de code > 90% pour catalogService
- Tests de tous les scénarios de fallback
- Validation des timeouts et retry
- Tests de persistance localStorage
#### Fichiers Créés
- `tests/unit/test_catalog_service_cross_machine_10jan2026.py`
### Tâche 4.2 : Tests d'Intégration Cross-Machine
**Priorité :** Critique
**Estimation :** 6 heures
**Assigné :** Équipe Test
#### Description
Créer tests d'intégration pour valider le fonctionnement sur machines distantes.
#### Sous-tâches
- [ ] Test avec backend sur localhost, frontend sur IP différente
- [ ] Test avec backend indisponible (mode statique)
- [ ] Test de basculement dynamique/statique
- [ ] Test de persistance de configuration entre sessions
- [ ] Test de performance de détection d'URL
#### Critères d'Acceptation
- Tests passent sur configuration cross-machine réelle
- Validation du mode fallback automatique
- Performance de détection < 5 secondes
- Persistance de configuration fonctionnelle
#### Fichiers Créés
- `tests/integration/test_palette_cross_machine_resolution_10jan2026.py`
### Tâche 4.3 : Tests End-to-End Palette
**Priorité :** Haute
**Estimation :** 4 heures
**Assigné :** Équipe Test
#### Description
Valider le fonctionnement complet de la palette dans différents scénarios réseau.
#### Sous-tâches
- [ ] Test palette complète avec catalogue dynamique
- [ ] Test palette avec catalogue statique uniquement
- [ ] Test basculement en temps réel
- [ ] Test interface utilisateur (boutons, messages)
- [ ] Test drag-and-drop des actions statiques
#### Critères d'Acceptation
- Palette fonctionnelle dans tous les modes
- Actions drag-and-drop correctement
- Interface utilisateur responsive et informative
- Pas de régression sur fonctionnalités existantes
#### Fichiers Créés
- `tests/integration/test_palette_complete_cross_machine_10jan2026.py`
## Phase 5 : Documentation et Déploiement
### Tâche 5.1 : Documentation Utilisateur
**Priorité :** Moyenne
**Estimation :** 2 heures
**Assigné :** Équipe Documentation
#### Description
Créer documentation pour les utilisateurs sur la résolution des problèmes de catalogue.
#### Sous-tâches
- [ ] Guide de dépannage pour palette vide
- [ ] Explication des modes dynamique/statique
- [ ] Instructions de configuration manuelle
- [ ] FAQ sur problèmes réseau courants
- [ ] Captures d'écran des indicateurs de statut
#### Critères d'Acceptation
- Documentation claire et illustrée
- Procédures de dépannage étape par étape
- FAQ couvrant les cas courants
- Intégration dans l'aide contextuelle
#### Fichiers Créés
- `docs/GUIDE_RESOLUTION_PALETTE_CROSS_MACHINE_10JAN2026.md`
### Tâche 5.2 : Tests de Validation Finale
**Priorité :** Critique
**Estimation :** 3 heures
**Assigné :** Équipe Test
#### Description
Validation finale sur environnements réels avec différentes configurations réseau.
#### Sous-tâches
- [ ] Test sur machine locale (localhost)
- [ ] Test sur réseau local (IP privée)
- [ ] Test avec VPN/proxy
- [ ] Test avec firewall restrictif
- [ ] Test de performance et stabilité
#### Critères d'Acceptation
- Fonctionnement validé sur au moins 3 configurations différentes
- Performance acceptable dans tous les cas
- Pas de régression sur fonctionnalités existantes
- Messages d'erreur appropriés pour chaque scénario
#### Fichiers Créés
- `tests/integration/test_validation_finale_cross_machine_10jan2026.py`
## Critères de Définition de Fini (DoD)
### Pour Chaque Tâche
- [ ] Code implémenté et testé
- [ ] Tests unitaires passent avec couverture > 80%
- [ ] Documentation technique mise à jour
- [ ] Revue de code effectuée
- [ ] Tests d'intégration passent
### Pour le Projet Complet
- [ ] Palette fonctionne sur machines locales et distantes
- [ ] Fallback automatique vers catalogue statique
- [ ] Messages d'erreur clairs en français
- [ ] Performance de détection < 5 secondes
- [ ] Tests passent sur au moins 2 configurations réseau
- [ ] Documentation utilisateur complète
- [ ] Aucune régression sur fonctionnalités existantes
## Métriques de Succès
1. **Taux de succès de chargement** : > 95% sur configurations testées
2. **Temps de détection d'URL** : < 5 secondes en moyenne
3. **Couverture de tests** : > 90% pour code modifié
4. **Satisfaction utilisateur** : Messages d'erreur compréhensibles
5. **Robustesse** : Fonctionnement même avec service catalogue indisponible
## Notes d'Implémentation
### Priorités
1. **Critique** : Service catalogue configurable et catalogue statique
2. **Haute** : Tests et validation cross-machine
3. **Moyenne** : Interface utilisateur améliorée et documentation
### Dépendances
- Tâche 2.2 dépend de 2.1 (catalogue statique)
- Tâches 4.x dépendent des phases 1-3
- Tâche 5.2 dépend de toutes les autres
### Risques Techniques
- Détection d'IP locale peut échouer selon configuration réseau
- localStorage peut être désactivé dans certains environnements
- Timeouts réseau variables selon infrastructure
### Points d'Attention
- Maintenir compatibilité avec interface existante
- Éviter les régressions sur fonctionnalités actuelles
- Assurer performance acceptable même en mode fallback
- Messages d'erreur toujours en français