✅ Handles Simplificados - Mucho Más Intuitivo!

🎯 Cambio Realizado

Antes: 6 handles por nodo (confuso)

Top: 1 input
Bottom: 1 output
Left: 2 handles (input + output)
Right: 2 handles (input + output)

Ahora: 4 handles por nodo (simple y claro)

Top: 1 input (AZUL) - Recibe desde arriba
Bottom: 1 output (VERDE) - Envía hacia abajo
Left: 1 input (AZUL) - Recibe desde la izquierda
Right: 1 output (VERDE) - Envía hacia la derecha

🎨 Layout Visual

Cada Nodo Ahora:

         🔵 TOP
          ▪ (input)
          │
🔵 ◀──────┼──────▶ 🟢
LEFT      │      RIGHT
(input)  NODE  (output)
          │
          ▪ (output)
        🟢 BOTTOM

Regla Simple:

🔵 AZUL = RECIBE datos (input/target)
🟢 VERDE = ENVÍA datos (output/source)

📐 Direcciones de Flujo

✅ Vertical (Top → Bottom):

   [Start]
      │ (bottom → top)
      ↓
    [LLM]
      │ (bottom → top)
      ↓
   [Output]

✅ Horizontal (Left → Right):

[Trigger] ──→ [API] ──→ [LLM] ──→ [Output]
         (right → left)

✅ Fan-Out (Uno a Muchos):

[Trigger] ─┬─→ [LLM1]
           │
           ├─→ [LLM2]
           │
           └─→ [LLM3]

✅ Grid Layout:

[A] ──→ [B]
 │       │
 ↓       ↓
[C] ──→ [D]

🚫 Limitaciones (Por Simplicidad)

❌ NO Puedes:

Conectar derecha a izquierda (backwards)
Conectar abajo hacia arriba (loops)
Usar left como output
Usar right como input

✅ SI Puedes:

Top → Bottom (vertical)
Left → Right (horizontal)
Combinar vertical + horizontal
Múltiples salidas desde un nodo
Múltiples entradas a un nodo

💡 Ventajas de la Simplificación

1. Más Claro

Solo 1 handle por lado
Fácil saber cuál usar
Menos confusión visual

2. Colores Intuitivos

Azul = Entrada (como agua que entra)
Verde = Salida (como señal de "go")

3. Flujo Natural

Left to Right (como leer)
Top to Bottom (como escribir)
Matches convenciones estándar

4. Menos Errores

No puedes conectar mal
Direcciones claras
Validación automática

🧪 Cómo Probar

1. Refresca el Navegador

Cmd + Shift + R  # Mac
Ctrl + Shift + R  # Windows

2. Crea Workflow Vertical

1. Drag Trigger
2. Drag LLM abajo
3. Connect: Trigger (bottom/verde) → LLM (top/azul)
4. ✅ Funciona!

3. Crea Workflow Horizontal

1. Drag Trigger
2. Drag API a la derecha
3. Connect: Trigger (right/verde) → API (left/azul)
4. ✅ Funciona!

4. Carga el Workflow de Ejemplo

python scripts/load_workflow.py workflows/multi_perspective_analysis.json

Verás el layout horizontal con los nuevos handles simplificados.

🎯 Reglas de Conexión

Conexiones Válidas:

From (Source)	To (Target)	Válido?
Bottom (🟢)	Top (🔵)	✅ Vertical down
Right (🟢)	Left (🔵)	✅ Horizontal right
Bottom (🟢)	Left (🔵)	✅ Diagonal
Right (🟢)	Top (🔵)	✅ Diagonal

Conexiones Inválidas:

From (Source)	To (Target)	Por qué?
Top (🔵)	Anything	❌ Top es INPUT
Left (🔵)	Anything	❌ Left es INPUT
Anything	Bottom (🟢)	❌ Bottom es OUTPUT
Anything	Right (🟢)	❌ Right es OUTPUT

📊 Ejemplos de Patrones

Pattern 1: Sequential Pipeline

[Load] ──→ [Clean] ──→ [Transform] ──→ [Save]

Handle usado: right → left (todos horizontales)

Pattern 2: Waterfall

[Stage 1]
    ↓
[Stage 2]
    ↓
[Stage 3]

Handle usado: bottom → top (todos verticales)

Pattern 3: Parallel Processing

[Input] ─┬─→ [Process A] ─┐
         │                 │
         ├─→ [Process B] ─┤
         │                 ├─→ [Combine]
         └─→ [Process C] ─┘

Handles usados: Mix de right → left y bottom → top

Pattern 4: Grid Analysis

[Data] ──→ [Tech Analysis]
   │           │
   ↓           ↓
[UX Analysis] [Business]
   │           │
   └─────→ [Report] ←─┘

Handles usados: Combinación de horizontal y vertical

🎨 Colores y Feedback Visual

Colores de Base:

Azul claro (blue-400): Inputs en estado normal
Verde claro (green-400): Outputs en estado normal

Al Hacer Hover:

Azul oscuro (blue-600): Input listo para conectar
Verde oscuro (green-600): Output listo para conectar

Durante Conexión:

ReactFlow muestra preview de línea
Target handle se ilumina cuando es válido
Cursor cambia cuando es válido

🔄 Migración Automática

Los workflows existentes se actualizan automáticamente:

Antes:

{
  "sourceHandle": "right-source",
  "targetHandle": "left-target"
}

Ahora:

{
  "sourceHandle": "right",
  "targetHandle": "left"
}

El workflow de ejemplo ya está actualizado! ✅

💡 Tips para Mejores Workflows

Tip 1: Usa Direcciones Consistentes

Elige UNA dirección principal:

Todo horizontal (left → right)
Todo vertical (top → bottom)
Mix organizado (ej: horizontal para etapas, vertical para detalles)

Tip 2: Organiza por Capas

Layer 1: [Input]  [Input]  [Input]
           ↓        ↓        ↓
Layer 2: [Process][Process][Process]
           ↓        ↓        ↓
Layer 3: [Output] [Output] [Output]

Tip 3: Evita Cruces

Usa los handles laterales para evitar líneas que se cruzan:

❌ Mal:

[A] ──┐
      X  (líneas se cruzan)
[B] ──┘

✅ Bien:

[A] ──→ [C]
        ↑
[B] ────┘  (sin cruces)

🎉 Resultado