# 🔍 Problèmes Actuels et Solutions

## État de l'Application

✅ **Ce qui fonctionne** :
- Interface visuelle
- Drag & drop d'étapes
- Connexions entre étapes
- Suppression d'étapes (Delete/Backspace)
- Backend API opérationnel

❌ **Ce qui ne fonctionne pas** :
1. Sélection visuelle d'éléments (XPath/CSS requis)
2. Exécution de workflows
3. Sauvegarde de workflows

---

## Problème 1 : Sélecteur Visuel Manquant

### 🎯 Symptôme
Pour l'étape "Extract", il faut saisir manuellement un sélecteur CSS ou XPath, ce qui n'est **pas du tout pratique ni visuel**.

### 📋 Cause
La **Tâche 10** (Sélecteur de cible interactif) n'est pas encore implémentée.

### 🔧 Solution Prévue
Le composant `TargetSelector` existe mais n'est pas intégré au `PropertiesPanel`. Il devrait permettre de :

1. **Cliquer sur un bouton "Sélectionner un élément"**
2. **Capturer l'écran** via l'API existante
3. **Cliquer visuellement** sur l'élément désiré
4. **Extraire automatiquement** :
   - Le texte de l'élément
   - Sa position
   - Son embedding visuel
   - Un sélecteur CSS/XPath généré

### 📝 Implémentation Requise

#### Étape 1 : Intégrer TargetSelector dans PropertiesPanel

```typescript
// Dans PropertiesPanel/index.tsx
import TargetSelector from '../TargetSelector';

// Pour les paramètres de type "target"
{param.type === 'target' && (
  <TargetSelector
    onTargetSelected={(target) => {
      handleParameterChange(param.name, target);
    }}
  />
)}
```

#### Étape 2 : Adapter le format de données

Le `TargetSelector` doit retourner un objet compatible avec le système RPA Vision :

```typescript
interface Target {
  text?: string;
  position?: { x: number; y: number };
  size?: { width: number; height: number };
  embedding?: number[];
  selector?: string; // CSS ou XPath généré
}
```

### ⏱️ Temps Estimé
- Intégration : 30 minutes
- Tests : 15 minutes
- **Total : 45 minutes**

---

## Problème 2 : Exécution Ne Fonctionne Pas

### 🎯 Symptôme
Cliquer sur "Exécuter" ne fait rien ou génère une erreur.

### 📋 Causes Possibles

#### A. Workflow Non Sauvegardé
Le workflow doit être **sauvegardé** avant d'être exécuté, mais il n'y a **pas de bouton "Sauvegarder"** visible.

#### B. Bouton "Exécuter" Manquant
L'interface actuelle n'a peut-être pas de bouton "Exécuter" clairement visible.

### 🔧 Solutions

#### Solution A : Ajouter un Bouton "Sauvegarder"

```typescript
// Dans App.tsx
const handleSaveWorkflow = async () => {
  const workflow = {
    name: workflowName || 'Mon Workflow',
    description: 'Workflow créé visuellement',
    nodes,
    edges,
    variables
  };

  const response = await fetch('/api/workflows/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(workflow)
  });

  const data = await response.json();
  setCurrentWorkflowId(data.id);
  alert(`Workflow sauvegardé : ${data.id}`);
};

// Dans le JSX
<Button onClick={handleSaveWorkflow}>
  💾 Sauvegarder
</Button>
```

#### Solution B : Ajouter un Bouton "Exécuter"

```typescript
// Dans App.tsx
const handleExecuteWorkflow = async () => {
  if (!currentWorkflowId) {
    alert('Veuillez d\'abord sauvegarder le workflow');
    return;
  }

  const response = await fetch(`/api/workflows/${currentWorkflowId}/execute`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ variables: {} })
  });

  const data = await response.json();
  console.log('Exécution démarrée:', data);
};

// Dans le JSX
<Button onClick={handleExecuteWorkflow} disabled={!currentWorkflowId}>
  ▶️ Exécuter
</Button>
```

#### Solution C : Barre d'Outils Complète

Créer une `Toolbar` avec tous les boutons nécessaires :

```typescript
<Toolbar>
  <Button onClick={handleNewWorkflow}>🆕 Nouveau</Button>
  <Button onClick={handleSaveWorkflow}>💾 Sauvegarder</Button>
  <Button onClick={handleLoadWorkflow}>📂 Charger</Button>
  <Button onClick={handleExecuteWorkflow}>▶️ Exécuter</Button>
  <Button onClick={handleValidateWorkflow}>✓ Valider</Button>
</Toolbar>
```

### ⏱️ Temps Estimé
- Boutons Sauvegarder/Exécuter : 20 minutes
- Barre d'outils complète : 45 minutes
- Tests : 15 minutes
- **Total : 1 heure**

---

## Problème 3 : Workflow Non Persistant

### 🎯 Symptôme
Les workflows créés ne sont pas sauvegardés et disparaissent au rechargement.

### 📋 Cause
Pas d'intégration avec l'API de sauvegarde.

### 🔧 Solution
Implémenter la sauvegarde automatique ou manuelle (voir Solution A ci-dessus).

---

## Plan d'Action Recommandé

### 🚀 Phase 1 : Fonctionnalités Essentielles (1-2h)

1. **Ajouter la barre d'outils** (30 min)
   - Bouton Sauvegarder
   - Bouton Exécuter
   - Indicateur de statut

2. **Intégrer le TargetSelector** (45 min)
   - Dans PropertiesPanel
   - Pour les paramètres "target"
   - Avec capture d'écran

3. **Tests de bout en bout** (30 min)
   - Créer un workflow
   - Sauvegarder
   - Exécuter
   - Vérifier les résultats

### 🎨 Phase 2 : Améliorations UX (2-3h)

4. **Validation visuelle** (30 min)
   - Indicateurs d'erreur sur les nodes
   - Messages d'avertissement
   - Validation avant exécution

5. **Feedback d'exécution** (1h)
   - Panneau de logs
   - Progression en temps réel
   - Résultats d'exécution

6. **Sauvegarde automatique** (30 min)
   - Auto-save toutes les 30s
   - Indicateur "Non sauvegardé"
   - Récupération après crash

---

## Workaround Temporaire

En attendant l'implémentation complète, voici comment tester l'exécution :

### 1. Créer un Workflow via l'API

```bash
curl -X POST http://localhost:5001/api/workflows/ \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Test Workflow",
    "description": "Workflow de test",
    "nodes": [
      {
        "id": "node-1",
        "type": "click",
        "position": {"x": 100, "y": 100},
        "parameters": {
          "target": {"text": "Bouton Test"}
        }
      }
    ],
    "edges": [],
    "variables": {}
  }'
```

### 2. Noter l'ID Retourné

```json
{
  "id": "workflow-abc123",
  "name": "Test Workflow",
  ...
}
```

### 3. Exécuter via l'API

```bash
curl -X POST http://localhost:5001/api/workflows/workflow-abc123/execute \
  -H "Content-Type: application/json" \
  -d '{"variables": {}}'
```

### 4. Vérifier les Logs

```bash
tail -f visual_workflow_builder/backend/logs/app.log
```

---

## Conclusion

L'application est **fonctionnelle au niveau de l'interface**, mais il manque :

1. ✅ **Sélecteur visuel** (composant existe, juste à intégrer)
2. ✅ **Boutons Sauvegarder/Exécuter** (code simple à ajouter)
3. ✅ **Feedback d'exécution** (WebSocket déjà implémenté)

**Temps total estimé pour rendre l'app complètement utilisable : 2-3 heures**

Ces fonctionnalités sont toutes prévues dans le plan d'implémentation, elles n'ont juste pas encore été développées car on a priorisé la base (Canvas, Palette, Propriétés, Backend API).

---

*Document créé le : 3 décembre 2024*  
*Statut : En attente d'implémentation*