Proposition: Redesign du log d'exécution des routines

Status : IMPLEMENTEE

Problème actuel

Pendant l'exécution (streaming) :

┌─────────────────────────────────────────────────────────┐
│ Progression                          Node 3/5          │
│ ████████████████████░░░░░░░░░░░░░░░                    │
│                                                         │
│ ┌─ bg-success/10 ─────────────────────────────────────┐│
│ │ ✓  Parametres recherche   trigger      0ms          ││
│ │    [Voir output]                                    ││
│ └─────────────────────────────────────────────────────┘│
│ ┌─ bg-success/10 ─────────────────────────────────────┐│
│ │ ✓  Recherche Gmail        action       456ms        ││
│ │    [Voir output]                                    ││
│ └─────────────────────────────────────────────────────┘│
│ ┌─ bg-warning/10 ─────────────────────────────────────┐│
│ │ ◌  Details emails         loop         ...          ││
│ └─────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘

Dans l'historique :

┌─ Card history ──────────────────────┐
│ [success] manual  5 calls           │
│ 03/02/2026 14:30         3449ms     │
│                                     │
│ ▶ 3 nodes executes   ← CACHÉ !      │
│   (details fermé, design pauvre)    │
└─────────────────────────────────────┘

Proposition

1. Unifier le composant de rendu des nodes

Créer un composant NodeResultCard réutilisable :

// components/routines/NodeResultCard.tsx
interface NodeResultCardProps {
  node_label: string;
  node_type: string;
  status: 'running' | 'success' | 'error' | 'skipped';
  duration_ms?: number;
  output?: any;
  error?: string;
  iterations?: any[][];  // Pour les loops
  compact?: boolean;     // Mode compact pour history
}

2. Redesign de la card historique

Option A : Afficher les nodes directement (pas de details)

┌─ Execution 03/02 14:30 ─────────────────────────────────┐
│ ✓ SUCCESS   manual   5 calls   3449ms                   │
├─────────────────────────────────────────────────────────┤
│ ✓ Parametres recherche    trigger     0ms               │
│ ✓ Recherche Gmail         action      456ms    [output] │
│ ✓ Details emails          loop        2993ms   [10 iter]│
│   └─ [0] ✓ Fetch ✓ Transform                            │
│   └─ [1] ✓ Fetch ✓ Transform                            │
│   └─ ...                                                │
└─────────────────────────────────────────────────────────┘

Option B : Replier mais avec preview

┌─ Execution ─────────────────────────────────────────────┐
│ ✓ SUCCESS   manual   5 calls   3449ms                   │
│                                                         │
│ ✓ Parametres → ✓ Recherche Gmail → ✓ Details emails     │
│ [Voir détails]                                          │
└─────────────────────────────────────────────────────────┘

3. Résultat final visible

Ajouter une section "Résultat" claire après l'exécution :

┌─ Résultat ──────────────────────────────────────────────┐
│ Output final:                                           │
│ ┌─ pre bg-base-300 ───────────────────────────────────┐│
│ │ [                                                   ││
│ │   { "id": "msg1", "subject": "Hello" },             ││
│ │   { "id": "msg2", "subject": "Test" }               ││
│ │ ]                                                   ││
│ └─────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────┘

4. Structure du fichier modifié

src/routes/routines/[id]/index.tsx
├── Execution panel
│   ├── Params textarea
│   ├── Execute button
│   ├── Streaming progress (pendant exec)
│   │   └── NodeResultCard[] (streaming)
│   └── Final result panel (après exec)
│       ├── Status badge + stats
│       ├── NodeResultCard[] (depuis lastExecution.node_results)
│       └── Final output
│
└── History panel (sidebar)
    └── ExecutionCard[] (compact)
        ├── Header: status, date, duration
        ├── Node flow preview (inline)
        └── Expand pour détails

Changements concrets

Fichiers à créer

• src/components/routines/NodeResultCard.tsx

Fichiers à modifier

• src/routes/routines/[id]/index.tsx
  • Extraire le rendu des nodes streaming vers NodeResultCard
  • Refaire la section "Final result" pour afficher les nodes comme le streaming
  • Afficher le résultat final (output du dernier node ou variables)
  • Simplifier l'historique (preview + expand)

Questions

1. Historique : Afficher tous les nodes directement ou garder un mode replié ?
2. Résultat final : Prendre le output du dernier node output ou les variables finales ?
3. Iterations : Afficher toutes les iterations ou juste un résumé ?

Estimation : Composant + refacto = ~200 lignes de changements