Workflow UI
Canvas & Node System
A React Flow-based graph editor for building, inspecting, and shipping AI workflows. Three panels. One accent. Zero decorative chrome.
Canvas preview
Toggle light / dark. Click the Publish button. Three panels: palette · canvas · inspector.
Nodes
Start
Node
LLM Reasoning
Qwen3-Max · 0.3
Node
Guardrail
Citation check
Node
Direct Reply
Webhook · 200 OK
Inspector
LLM Reasoning
Model
Qwen3-Max
Temperature
0.3
Streaming
On
Output
draft_answer
Three-panel layout
The grid is 248px · 1fr · 340px. Both sidebars collapse independently — palette to 56px icon-only, inspector to 64px.
Node Palette
248pxDrag-to-place node library. Dark bg — a tool, not a canvas element.
Canvas
minmax(0, 1fr)Warm canvas bg · 20px dot grid · bezier edges · zoom + pan.
Inspector
340pxContext-sensitive property panel. Shows selected node or edge config.
Node color groups
Color encodes group membership — not decoration. Each group has a consistent hue family. Never mix hues across groups.
Flow control
Teal · Blue · Cyan
Condition Branch
Iteration
Loop
AI capability
Rose · Pink · Violet
Agent
LLM
Guardrail
Data processing
Orange family
Transform
Classify
Search
Edge types
Edges are 1.5px bezier curves. Style encodes path semantics — never use color for decoration.
Active edge
Required connection. Always solid.
Conditional edge
Branch path. 4 3 dash pattern.
Selected edge
#2A6FDB. 2px wide.
Error edge
Invalid connection or failed node.
CSS token contract
All theme-sensitive values use CSS variables. Never hardcode light or dark colors inside components.
--workflow-page--workflow-surface--workflow-panel--workflow-text--workflow-muted--workflow-border--workflow-gridSpecifications
#fbfaf8 · dot-grid 20px200–240px10px1px rgba(10,11,13,0.10)1.5px #2A6FDB · ring rgba(42,111,219,0.12)10px · white 2px border · #c8cdd61.5px bezier248px (expanded) · 56px (collapsed)340px (expanded) · 64px (collapsed)44px · centered, floating20px160×100px · bottom-right cornerRules
- All theme colors come from CSS variables. No hardcoded light/dark hex inside node or panel components.
- The palette sidebar is always dark — it is a tool container, not a canvas surface.
- Dashed edges mark conditional or inactive paths. Solid edges are always-active connections.
- Blue (#2A6FDB) appears only on selected nodes, selected edges, and the primary action button.
- MiniMap always sits at the bottom-right of the canvas. It is never inside a panel.
- Both sidebars collapse to icon-only mode. Layout uses CSS grid columns, not JS-driven flex width.
- Do not add a third sidebar. If a feature needs more surface, use a drawer over the inspector.