Pipeline views

Monitor workflow execution with graph, kanban, and table views — and customize the kanban layout from your backend.

The pipeline viewer displays real-time execution state for a running workflow. It sits inside the playground and offers three view modes: Graph, Kanban, and Table.

Node execution statuses

Every node in a running pipeline is assigned one of these statuses by the backend:

Status	Meaning
idle	Job created; dependencies not yet met
pending	Ready to run; waiting in queue
running	Currently executing
paused	Execution paused (e.g. rate limit, wait step)
interrupted	Waiting for human input (human-in-the-loop)
completed	Finished successfully
skipped	Not executed — workflow completed/branched before this node ran
failed	Execution failed
cancelled	Explicitly cancelled

Kanban view

The kanban board groups nodes into columns by status. By default it uses a 4-column layout:

Column	Statuses	Logic
Pending	idle, pending	Not yet started
In Progress	running, paused, interrupted	Actively in flight
Done	completed, skipped	Terminal success
Failed	failed, cancelled	Terminal failure

When a column maps multiple statuses, each card displays a status pill showing the node’s exact status. This makes it easy to distinguish, for example, a paused node from a running one inside the same “In Progress” column.

Customising the kanban layout

Your backend can override the column layout per pipeline by returning a kanban_config object in the GET /pipelines/:id response. If this field is absent the frontend falls back to the 4-column default above.

Response shape

{
  "status": "running",
  "node_statuses": { ... },
  "job_status_summary": { ... },
  "kanban_config": {
    "columns": [
      {
        "key": "pending",
        "label": "Pending",
        "statuses": ["idle", "pending"],
        "icon": "mdi:clock-outline",
        "color": "var(--fd-muted-foreground)"
      },
      {
        "key": "in_progress",
        "label": "In Progress",
        "statuses": ["running", "paused", "interrupted"],
        "icon": "mdi:play-circle-outline",
        "color": "var(--fd-warning)"
      },
      {
        "key": "done",
        "label": "Done",
        "statuses": ["completed", "skipped"],
        "icon": "mdi:check-circle",
        "color": "var(--fd-success)"
      },
      {
        "key": "failed",
        "label": "Failed",
        "statuses": ["failed", "cancelled"],
        "icon": "mdi:alert-circle",
        "color": "var(--fd-error)"
      }
    ]
  }
}

Column fields

Field	Type	Required	Description
key	string	✓	Unique column identifier
label	string	✓	Column heading shown in the UI
statuses	string[]	✓	One or more node statuses that belong to this column
icon	string		Iconify icon name, e.g. mdi:check-circle
color	string		CSS color for the column accent — any valid CSS value, including var(--fd-success)

Status pill behaviour

The status pill on a card is shown automatically when a column’s statuses array has more than one entry. Single-status columns are assumed to be self-explanatory and show no pill.

Example: 3-column layout for a simple approval workflow

"kanban_config": {
  "columns": [
    {
      "key": "waiting",
      "label": "Waiting",
      "statuses": ["idle", "pending", "interrupted"],
      "icon": "mdi:clock-outline",
      "color": "var(--fd-muted-foreground)"
    },
    {
      "key": "active",
      "label": "Active",
      "statuses": ["running", "paused"],
      "icon": "mdi:play-circle-outline",
      "color": "var(--fd-warning)"
    },
    {
      "key": "terminal",
      "label": "Terminal",
      "statuses": ["completed", "skipped", "failed", "cancelled"],
      "icon": "mdi:flag-checkered",
      "color": "var(--fd-foreground)"
    }
  ]
}

Table view

The table view lists all nodes sorted by activity (running nodes first), with expandable rows showing execution details — last executed time, duration, and error message.

Custom views

Register additional views alongside the built-in three by passing a pipelineViews array. Each entry needs a unique key, a toggle button icon and label, and a Svelte component that receives PipelineViewProps.

Svelte component

<!-- MyTimelineView.svelte -->
<script lang="ts">
  import type { PipelineViewProps } from '@flowdrop/flowdrop/playground';

  let { pipelineId, workflow, endpointConfig, refreshTrigger }: PipelineViewProps = $props();
</script>

<div>Timeline for pipeline {pipelineId}</div>

Registering via mountPlaygroundStudio

import { mountPlaygroundStudio, createEndpointConfig } from '@flowdrop/flowdrop/playground';
import MyTimelineView from './MyTimelineView.svelte';

await mountPlaygroundStudio(container, {
  workflowId: 'wf-123',
  endpointConfig: createEndpointConfig('/api/flowdrop'),
  pipelineViews: [
    {
      key: 'timeline',
      label: 'Timeline',
      icon: 'mdi:chart-timeline-variant',
      component: MyTimelineView
    }
  ]
});

Registering via Svelte component

<script lang="ts">
  import { PlaygroundStudio } from '@flowdrop/flowdrop/playground';
  import MyTimelineView from './MyTimelineView.svelte';

  const extraViews = [
    { key: 'timeline', label: 'Timeline', icon: 'mdi:chart-timeline-variant', component: MyTimelineView }
  ];
</script>

<PlaygroundStudio workflowId="wf-123" extraPipelineViews={extraViews} />

PipelineViewDef fields

Field	Type	Description
key	string	Unique identifier — must not clash with graph, kanban, or table
label	string	Tooltip text on the toggle button
icon	string	Iconify icon name
component	Component<PipelineViewProps>	Svelte component that receives the view props

The selected view key persists in localStorage under fd-pipeline-view-mode, so switching to a custom view and reloading restores it automatically.

Graph view

The graph view renders the workflow canvas in read-only mode with colour-coded node overlays:

Overlay colour	Statuses
Blue (running)	running, paused, interrupted
Green (completed)	completed, skipped
Red (error)	failed, cancelled
Amber (pending)	pending, idle