Visual Workflow Builder

The visual builder provides a drag-and-drop interface for designing workflow DAGs.

Layout

The builder has three panels:

Left — Step Palette

• Agent Step — drag to add an agent-assigned step
• Human Review — drag to add a human review step
• Recent Runs — toggle to see recent execution history

Center — Canvas

The main workspace where you design your workflow:

• Nodes — rounded rectangles showing step name, agent, and type icon
• Edges — curved arrows showing dependencies between steps
• Grid background — helps with alignment

Right — Config Panel

Appears when you select a step. Edit all step properties:

• Name, Step ID, Agent, Action Prompt
• Dependencies, Timeout, Requires Approval
• Delete step

Interactions

Moving Steps

Click and drag any step node to reposition it on the canvas.

Connecting Steps

Drag from the bottom handle of one step to another step to create a dependency.

Selecting Steps

Click a step to select it and open the config panel.

Removing Connections

Click on any edge line to remove the connection.

Deleting Steps

Select a step, then click "Delete Step" in the config panel. Dependencies referencing the deleted step are automatically cleaned up.

Validation

The builder performs real-time validation and shows warnings at the bottom:

• Circular dependency — steps cannot depend on each other in a cycle
• Unknown dependency — a step references a non-existent step ID
• No root step — at least one step must have no dependencies
• Duplicate step IDs — each step must have a unique ID

You must fix all validation errors before saving.

Top Bar

• Back arrow — return to workflow list
• Workflow name — click to edit inline
• Trigger badge — shows current trigger type
• Unsaved indicator — appears when changes haven't been saved
• Runs — toggle recent execution list
• Save — persist all changes
• Run — start a new execution (must save first)