fix(workflows): canvas loading, multi-port nodes, edge connections, sample workflows
FIXES:
1. Canvas loading bug - nodes/edges now properly sync from server query
using useEffect that tracks data lifecycle (prevDataKeyRef pattern)
2. Edge connections - mouseDown/mouseUp port interaction model ensures
reliable edge creation between any port types
3. Multi-port nodes - orchestrator mode (agent with multiple outputs),
aggregator mode (output with multiple inputs), configurable extra
ports for any node kind
4. Distinct edge types - success (green), error (red dashed), loop
(amber dashed), condition-true/false with proper arrow markers
5. Port labels always visible with color-coded dots matching edge types
NEW FEATURES:
- WorkflowNodeBlock: dynamic body height based on side port count,
port type annotations (input/output), onPortMouseDown/onPortMouseUp
separate callbacks for clean edge drawing
- WorkflowNodeEditModal: port configuration panel with +/- controls
for extra inputs/outputs, aggregator toggle, orchestrator toggle
- WorkflowCanvas: edge drawing indicator, edge type legend in palette,
proper bezier curves for backwards/loop edges, cyan arrow marker
- Workflows page: loading states for canvas/dashboard views, renders
canvas immediately and syncs data asynchronously
SAMPLE WORKFLOWS (created via API):
- Gmail Registration (Browser Agent): 8 nodes, 9 edges - trigger,
generate data, open signup, fill form, CAPTCHA condition, solve,
submit, output with error handling edges
- Content Pipeline (Orchestrator): 6 nodes, 7 edges - webhook trigger,
orchestrator with 3 outputs, 3 parallel agents, aggregator merge
- Error Handling & Retry Demo: 6 nodes, 8 edges - condition routing,
retry loop-back, container export, error edges
c1e8774009