Frontend Flows — Handoff Prompt¶

Para usar: Pega este prompt en una nueva conversación cuando estés listo para el frontend. Contexto: La librería flows (UI core) ya estará en desarrollo.
PROMPT¶

Soy el lead developer del proyecto DKV Pet Flows. Necesito implementar el frontend del Flow Builder. 

### Contexto del proyecto

DKV Pet Flows es una plataforma de Customer Engagement para DKV Seguros. 
**Posicionamiento**: Pet Flows AÑADE la capa de engagement sobre los datos que ya fluyen por InterSystems Health Connect — NO compite con el ESB.

### Lo que ya existe (backend)

El backend está implementado en `dkv-pet-flows-api/`:
- Quarkus 3.32 + Java 25 + Dapr
- REST API: CRUD `/api/flows`, `/api/flows/{id}/validate`, `/api/flows/{id}/execute`
- PostgreSQL con JSONB para `flow_definition`, `flow_version`, `flow_execution`, `execution_step`
- Dapr Workflow Engine ejecutando flows
- Gorush para push notifications (APNs + FCM)
- LangChain4j para nodos IA (content generation, sentiment, best time)
- SSE endpoint para monitor de ejecución en tiempo real
- `GET /api/nodes/catalog` devuelve el catálogo de 40 nodos

### Lo que se está desarrollando (librería flows)

La librería `@jaraxasoftware/flows` se está desarrollando como paquete NPM en el monorepo. Contiene:
- React Flow (`@xyflow/react`) como canvas base
- Custom Node components para 5 categorías
- NodeCatalogPanel (sidebar con búsqueda y drag-and-drop)
- NodeConfigPanel (slide-out con formularios dinámicos)
- Zustand stores: `useFlowStore` + `useCanvasStore`

**IMPORTANTE**: Antes de implementar nada, verifica qué tiene ya la librería `@jaraxasoftware/flows` y trabaja SOBRE ella, no en paralelo.

### Frontend existente

El frontend vive en `dkv-pet-flows-admin/`:
- React 18 + Vite + TypeScript
- Zustand para estado
- Existe `docs/mockups/builder.html` como referencia visual con:
  - 40 nodos en catálogo lateral con 5 categorías colapsables y buscador
  - Canvas con nodos demo (Trigger → Wait → IA → Condición → Push/Email → Analytics)
  - 4 temas: light-vibrant, light-corporate, dark-vibrant, dark-corporate
  - Config panel con formularios para los 5 tipos de nodo

### Diseño y theming

El sistema de diseño usa CSS variables estrictas (NO hex hardcoded):
- 4 temas via `data-theme` attribute
- Colores de nodo por categoría: trigger (violet), logic (amber), action (emerald), ai (pink), data (blue)
- Set A (Vibrant) para impacto visual, Set B (Corporate) para uso diario
- WCAG 2.1 AA obligatorio
- `color-mix()` para transparencias

### Catálogo de 40 nodos

| Categoría | Color | Nodos |
|---|---|---|
| Triggers (10) | Violet | Evento API, Webhook, Cron, App Event, Consulta, Póliza, Cumpleaños, Vacuna, Geo, Segmento |
| Lógica (10) | Amber | If/Else, Router, Merge, Wait, Wait Event, Iterator, Aggregator, A/B Split, Rate Limiter, Error Handler |
| Acciones (10) | Emerald | Push, Email, SMS, In-App, Inbox, Tags, Perfil, Webhook Out, Tarea, Evento |
| Inteligencia (5) | Pink | Gen Content, Best Time, Sentiment, Classify, Recommend |
| Datos (5) | Blue | Query DB, Transform, Variable, Template, HTTP Request |

### Lo que necesito implementar

1. Integrar la librería `@jaraxasoftware/flows` en `dkv-pet-flows-admin`
2. Conectar frontend ↔ backend via TanStack Query (hooks: `useFlows`, `useFlowById`, etc.)
3. Auto-save flow cada 30s + save manual
4. Serialización React Flow ↔ API JSON
5. Execution Monitor UI: progreso nodo por nodo via SSE
6. Campaign Analytics dashboard

### Reglas de trabajo

- @[/ui_theming] para cualquier trabajo de colores/tema
- @[/react_native_expo] si tocamos algo móvil (no en este scope)
- El endpoint SSE es `GET /api/flows/{id}/executions/{execId}/stream`
- La API devuelve JSON con estructura: `{ nodes: [...], edges: [...], metadata: {...} }`
Nota: Este prompt asume que la librería flows y el backend estarán funcionales. Ajusta según el estado real al momento de usarlo.