Flow Studio
Observer Panel Overview
The Observer Panel is a dockable, floating side panel that displays real-time execution data. It is the primary tool for watching a workflow run, reading node logs, and inspecting node inputs and outputs. It appears automatically when you switch to Execution Mode.
What the Observer Panel Shows
Execution Status
Node List
Logs
Node Inspector
Log Detail
Execution Status tab selected — shows overall status, duration, progress bar, and error summary.
Docked vs Floating
The panel can be positioned in two ways:
- Docked (default): Attached to the right edge of the designer, pushing the canvas left. The panel width is resizable by dragging its left border.
- Floating: Detached window that can be moved anywhere on screen. Useful for multi-monitor setups where the panel is dragged to a second monitor while the canvas occupies the main screen.
Toggle between modes using the button in the panel's title bar.
When It Appears
- Automatically opens when the user clicks Run in Execution Mode
- Remains open until the user explicitly closes it or exits Execution Mode
- Persists its open/closed and dock state across browser sessions via
localStorage
Package Architecture
The Observer Panel is a standalone, embeddable package — not tightly coupled to the Flow Studio designer:
| Package | Role |
|---|---|
flow-observer-panel | React component layer — FlowObserverPanel, TabBar, tab content components |
flow-observer-core | Engine, store, types, hooks — no React dependency; can be used headlessly |
This split allows the Observer Panel to be embedded in other apps (e.g., a standalone execution monitoring dashboard) without pulling in the full designer.
Built-In Tabs at a Glance
| Tab | Purpose | Guide |
|---|---|---|
| Execution Status | Overall run status, timing, progress, errors | Guide 8 |
| Node List | Per-node status, duration, retry count, jump-to | Guide 9 |
| Logs | Real-time log stream, filter by level/node, search | Guide 10 |
| Node Inspector | Input/output data JSON for a selected node | Guide 11 |
| Log Detail | Expanded single log entry with structured data and stack trace | Guide 10 |