2.5 KiB
| id | title | status | assignee | created_date | labels | dependencies | references | priority | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| TASK-104 | n8n-style automation canvas for rSchedule | Done | 2026-03-10 18:43 |
|
|
medium |
Description
Visual workflow builder at /:space/rschedule/reminders that lets users wire together triggers, conditions, and actions from any rApp — enabling automations like "if my location approaches home, notify family" or "when document sign-off completes, schedule posts and notify comms director."
Built with SVG canvas (pan/zoom/Bezier wiring), 15 node types across 3 categories, REST-persisted CRUD, topological execution engine, cron tick loop integration, and webhook trigger endpoint.
Acceptance Criteria
- #1 Canvas loads at /:space/rschedule/reminders with node palette
- #2 Drag nodes from palette, wire ports, configure — auto-saves via REST
- #3 Run All on manual-trigger workflow — nodes animate, execution log shows results
- #4 Cron workflows execute on tick loop
- #5 POST to /api/workflows/webhook/:hookId triggers webhook workflows
- #6 Demo workflows render correctly on fresh space seed
Final Summary
Implemented n8n-style automation canvas for rSchedule with 5 files (2490 lines added):
schemas.ts — 15 automation node types (5 triggers, 4 conditions, 6 actions), NODE_CATALOG with typed ports and config schemas, Workflow/WorkflowNode/WorkflowEdge types, extended ScheduleDoc.
folk-automation-canvas.ts — SVG canvas with pan/zoom, left sidebar node palette (drag-to-add), Bezier edge wiring between typed ports, right sidebar config panel driven by NODE_CATALOG, execution visualization, REST persistence with 1.5s debounced auto-save.
automation-canvas.css — Full dark-theme styling, responsive mobile layout.
mod.ts — Page route (GET /reminders), CRUD API (GET/POST/PUT/DELETE /api/workflows/*), topological execution engine with condition branching, tick loop integration for cron workflows, webhook trigger endpoint, 2 demo workflows (proximity notification + document sign-off pipeline).
vite.config.ts — Build step for component + CSS copy.