Source: docs/manual/premium-flow-editor.md

This page is generated by site/scripts/sync-manual-docs.mjs.

Premium Flow Editor

The premium flow editor extends the Visual Flow Builder with smart edge routing, auto-layout, a CodeMirror expression editor, execution visualization, workflow templates, version diff, and collaborative editing.

Source: cmd/ui/frontend/src/components/flow-v2/, cmd/ui/frontend/src/hooks/, cmd/ui/frontend/src/lib/

Smart Edges and Auto-Layout

Smart edge routing uses A* pathfinding to route edges around nodes instead of through them. Edges follow orthogonal paths with rounded corners, producing clean visual output even on dense graphs.

Auto-layout uses ELK.js running in a Web Worker. The layout engine supports multiple algorithms (layered, stress, mrtree, radial) and handles nested structures like Subgraph and Parallel nodes correctly. The "Tidy up" toolbar button triggers a full re-layout with animated 300ms transitions.

Command Palette

Press Cmd+K (or Ctrl+K) to open the command palette. It provides fuzzy-search access to all editor actions: add nodes, toggle settings, trigger layout, open templates, and navigate between workflows. The palette is built on the cmdk library.

Keyboard Shortcuts

Comprehensive keyboard shortcuts cover common operations:

Shortcut	Action
Cmd+Z / Cmd+Shift+Z	Undo / Redo
Cmd+C / Cmd+V	Copy / Paste nodes
Cmd+D	Duplicate selected
Cmd+A	Select all
Delete / Backspace	Delete selected
Cmd+G / Cmd+Shift+G	Group / Ungroup
Cmd+K	Command palette
Cmd+F	Canvas search
F2	Rename selected node
L	Auto-layout
Escape	Deselect / drill out / close search

Undo/redo is powered by zundo (Zustand temporal middleware) with a configurable stack depth.

Expression Editor

Node configuration fields that accept expressions use a CodeMirror 6 editor with a custom Lezer grammar. The grammar recognizes {{ expression }} template syntax with JavaScript delegation for the expression body.

Features:

• Context-aware autocomplete from upstream node outputs ($input, $node['name'])
• Inline evaluation preview showing the expression result
• Syntax highlighting for template delimiters, variables, and JS operators
• Drag-to-map: drag a field from the upstream data panel into the expression editor to insert a reference

Sticky Notes and Grouping

Sticky notes are canvas annotations with TipTap rich-text editing. They support bold, italic, headings, lists, and code blocks. Four color presets are available (yellow, blue, green, pink). Sticky notes render behind workflow nodes.

Node groups organize related nodes into labeled containers with a dashed border. Groups are created by selecting multiple nodes and pressing Cmd+G. Groups can be collapsed to hide their contents, and double-clicking a collapsed group drills into it.

Node comments attach markdown notes to individual nodes via a comment icon that appears on hover.

Canvas Search

Press Cmd+F to open canvas search. It performs fuzzy matching against node labels, descriptions, types, and tool names. Non-matching nodes dim to 30% opacity (spotlight mode). Use Enter / Shift+Enter to cycle through matches with auto-pan.

Execution Visualization

During workflow execution, the editor shows real-time status:

• Node status overlays: pulsing borders (running), green flash (success), red shake (error), amber pulse (retrying), dimmed (skipped)
• Timing badges: elapsed time per node, updating in real-time via requestAnimationFrame
• Animated edge particles: 6 SVG dots flow along active edges using the Web Animations API
• Execution timeline: horizontal Gantt-style bar at canvas bottom showing node durations, with parallel branches on separate rows

Execution state streams from the server via SSE with auto-reconnect and exponential backoff.

Subflow Navigation

Double-click a Subgraph node or collapsed group to drill into its contents. A breadcrumb bar above the canvas shows the navigation path (e.g., Root > Parallel Branch A > Data Pipeline). Each breadcrumb segment is clickable for direct navigation. Press Escape to drill out one level.

Viewport state (pan position and zoom) is preserved per navigation level for seamless back-navigation. Transitions use 300ms animated zoom.

Workflow Templates

The template gallery (Templates toolbar button) provides pre-built workflow patterns:

Template	Category	Difficulty
Simple Agent Loop	Agent Loops	Beginner
RAG Pipeline	Data Pipelines	Beginner
Approval Workflow	Integrations	Intermediate
Parallel Data Processing	Data Pipelines	Intermediate
Supervisor Delegation	Multi-Agent	Advanced
Saga Pattern	Multi-Agent	Advanced
Debate Pattern	Multi-Agent	Advanced
MCP Integration Pipeline	Integrations	Intermediate

Templates can replace the current canvas or be inserted into it at the viewport center. Templates are served from the filesystem via a Go API endpoint.

Version Diff

The version diff overlay compares the current canvas state against a previous version. Nodes are color-coded:

• Added: green border and background
• Removed: red dashed border
• Modified: amber border with field-level change details
• Unchanged: dimmed to 30% opacity

A detail panel shows all changes grouped by type. Click a modified node to see per-field from/to values.

Collaborative Editing

When enabled, multiple users can edit the same workflow simultaneously. Collaborative editing uses Yjs CRDTs for conflict-free synchronization over WebSocket.

Features:

• Real-time node/edge sync across all connected users
• Remote cursor indicators (colored avatars at each user's viewport position)
• Selection highlighting showing which nodes other users are editing
• Presence bar with connected user avatars
• Follow mode: click a user's avatar to sync your viewport to theirs
• Per-user undo/redo via Y.UndoManager

Collaborative editing is gated behind the CRUVERO_FLOW_COLLAB_ENABLED feature flag. When disabled, no Yjs code is loaded.

Configuration

Variable	Default	Description
CRUVERO_FLOW_ELK_ALGORITHM	layered	ELK layout algorithm (layered, stress, mrtree, radial)
CRUVERO_FLOW_ELK_DIRECTION	DOWN	Layout direction (DOWN, RIGHT, LEFT, UP)
CRUVERO_FLOW_ELK_SPACING	80	Node spacing in pixels
CRUVERO_FLOW_SMART_EDGES	true	Enable A* smart edge routing
CRUVERO_FLOW_SNAP_GRID	20	Grid snap size in pixels (0 = disabled)
CRUVERO_FLOW_UNDO_DEPTH	50	Max undo/redo stack depth
CRUVERO_FLOW_COLLAB_ENABLED	false	Enable collaborative editing
CRUVERO_FLOW_COLLAB_WS_URL	ws://localhost:1234	Yjs WebSocket server URL
CRUVERO_FLOW_TEMPLATES_DIR	templates/workflows	Directory for workflow templates

Related Docs

• Visual Flow Builder — Phase 23 base implementation
• Graph DSL — Underlying workflow graph model
• Configuration and Environment — All environment variables
• React Web UI — UI architecture overview