Flow Studio
Node Status Indicators
During execution, every node on the canvas shows its current execution state through a combination of border colour, icon overlay, and animation. Reading these indicators lets you understand exactly where the workflow is at a glance.
Status Visual Reference
Pending
Running
Completed
Failed
Skipped
Suspended
Status Definitions
| Status | Border | Icon | Meaning |
|---|---|---|---|
| Pending | Grey, solid | Empty circle | Node has not been reached yet in this execution |
| Running | Blue, pulsing | Spinning loader | Node is actively executing on the backend right now |
| Completed | Green, solid | Checkmark | Node finished successfully and output is available |
| Failed | Red, solid | X mark | Node threw an error. Check Node Inspector for details. |
| Skipped | Grey, dashed | Dash | Node was bypassed — its incoming edge condition was false |
| Suspended | Amber, solid | Pause icon | Node waiting for human input (HIL suspend) |
How Status Updates Work
Status updates flow through this pipeline:
- Backend Process Engine changes node status in database
- Backend emits
NodeExecutionStarted/NodeExecutionCompleted/NodeExecutionFailedSignalR event useNodeExecutionSynchook receives the event- Calls
designerModeStore.setNodeStatus(nodeId, status) - React re-renders the node component with the new status class
Status Duration Tooltip
Hovering over a completed, failed, or skipped node shows a tooltip with:
- Duration — how long the node took (e.g., "342ms")
- Start time — when the node began executing
- Retry count — how many retries were used (if any)
Click the node to open the full Node Inspector with input/output data.