Build visual pipeline editor frontend (React + drag-and-drop)

[rafafrdz]

Context

The long-term vision is a visual frontend where users can build ETL pipelines by dragging and connecting configurable boxes, generating YAML that Teckel executes.

Proposed Stack

• React + TypeScript
• React Flow (or similar) for DAG visualization
• Monaco Editor for YAML preview/editing
• REST API backend (see docs/architecture/rest-api.md)

MVP Features

1. Canvas: Drag-and-drop nodes for Input, Transformation, Output
2. Node Config: Click a node to configure its properties (format, columns, conditions, etc.)
3. Connection: Draw edges between nodes to define data flow
4. YAML Preview: Live preview of generated YAML
5. Export: Download generated YAML file
6. Import: Load existing YAML to visualize as a DAG

Acceptance Criteria

• React app scaffolded with routing
• DAG canvas with Input/Transformation/Output node types
• Configuration panels for at least 5 transformation types
• Bidirectional YAML ↔ visual sync
• Export/import YAML