Skip to content

feat(workflow): visual workflow automation builder with @xyflow/react#18

Draft
Copilot wants to merge 2 commits into
copilot/explore-codebase-implementation-planfrom
copilot/build-workflow-automation
Draft

feat(workflow): visual workflow automation builder with @xyflow/react#18
Copilot wants to merge 2 commits into
copilot/explore-codebase-implementation-planfrom
copilot/build-workflow-automation

Conversation

Copy link
Copy Markdown

Copilot AI commented Apr 26, 2026

Adds a full visual workflow automation editor to the Vite React app, allowing users to create, connect, and configure agent-based automation flows on an interactive canvas.

Frontend

  • Routes/workflows (list page with create/browse cards) and /workflows/:workflowId (canvas editor)
  • Canvas (WorkflowCanvas.tsx) — @xyflow/react powered editor with drag-and-drop from node palette, resizable 3-panel layout (react-resizable-panels), dark theme with dot-grid background, edge right-click context menu
  • Node types — five custom nodes sharing a BaseNode card shell with idle/running/success/error status overlay:
    • TriggerNode — source-only (manual / webhook / schedule)
    • ActionNode — HTTP / script / transform
    • AgentNode — AI agent invocation with model badge
    • ConditionNode — if/else branch with two source handles (true/false)
    • OutputNode — terminal (email / file / webhook / log), target-only
  • NodePanel — left sidebar, nodes are drag sources via dataTransfer
  • InspectorPanel — right sidebar, edits any selected node's data fields
  • WorkflowToolbar — name editing, save, undo/redo, zoom controls, minimap toggle
  • EdgeContextMenu — right-click on any edge to delete it or insert a ConditionNode at the midpoint
  • useWorkflow hook — owns all graph state (useNodesState/useEdgesState), undo/redo snapshot stack, addNode factory, and loadWorkflow/saveWorkflow API calls
  • Navigation — landing page buttons updated to route to /workflows and /login via TanStack Router <Link>; hero CTA changed to "Build a Workflow"

Backend

New packages/cli/src/server/routes/v1/workflows/route.ts — standard CRUD (GET, POST, GET /:id, PUT /:id, DELETE /:id) auto-discovered by @fastify/autoload. Persists workflow graphs as JSON blobs to ~/.agentflow/workflows.json (respects AGENTFLOW_DATA_DIR).

GET  /api/v1/workflows          → sorted list by updatedAt
POST /api/v1/workflows          → create, returns 201 + record
GET  /api/v1/workflows/:id      → single record or 404
PUT  /api/v1/workflows/:id      → partial update (name, description, graph)
DELETE /api/v1/workflows/:id    → 204 or 404

Copilot AI and others added 2 commits April 26, 2026 09:35
…nvas editor

Agent-Logs-Url: https://github.com/mdirshadengineer/agentflow/sessions/05f6263c-4f3a-4e09-95ef-e70b4978d542

Co-authored-by: mdirshadengineer <191547746+mdirshadengineer@users.noreply.github.com>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 26, 2026

⚠️ No Changeset found

Latest commit: 1870f39

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@socket-security
Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​xyflow/​react@​12.6.49710010091100

View full report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants