Flow Studio
Status Badge
The status badge is the most prominent element in the Execution Status tab. It displays the current state of the entire workflow execution with a colour-coded pill that updates in real time as SignalR events arrive.
Status Progression
pending → running → (paused) → completed
↘ failed
↘ cancelledStatus Reference
| Status | Colour | Meaning | Triggered By |
|---|---|---|---|
pending | Grey (#718096) | Execution created, not yet started | POST /execute response |
running | Blue (#60a5fa) | At least one node is executing | WorkflowExecutionStarted event |
paused | Amber (#fbbf24) | User paused the execution | WorkflowExecutionPaused event |
completed | Green (#34d399) | All nodes finished successfully | WorkflowExecutionCompleted (status=completed) |
failed | Red (#f87171) | An unhandled error stopped execution | WorkflowExecutionCompleted (status=failed) |
cancelled | Orange (#fb923c) | User cancelled the run | WorkflowExecutionCancelled event |
Animated Running State
While the status is running, the badge pulses with a CSS animation — a subtle opacity oscillation that distinguishes "actively running" from a momentarily stuck state. The animation stops immediately when the next terminal event arrives.
/* Pulse animation for running state */
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.status-badge[data-status="running"] {
animation: statusPulse 1.5s ease-in-out infinite;
}Where the Status Comes From
The badge reads flowObserverPanelStore.executionStatus. This value is set in three ways:
- Set to
pendingwhenengine.clear()is called at the start of a new execution - Set to
runningwhen the firstWorkflowExecutionStartedevent arrives - Set to the terminal state (
completed,failed,cancelled) whenWorkflowExecutionCompletedorWorkflowExecutionCancelledarrives