Observer Stores Overview

Two Stores, Separation of Concerns

Why Two Stores?

Panel UI state and execution data change at different rates and for different reasons:

• flowObserverPanelStore changes when the user switches tabs, resizes the panel, or docks/undocks. This is infrequent.
• executionStore changes on every SignalR event — potentially many times per second during a live run. Merging them would cause tab-switching to trigger re-renders in every log subscriber.

Package Boundary

// Tab components import from flow-observer-core ONLY
// They do NOT import from flow-studio-services directly

// Correct:
import { useFlowObserverPanelStore } from '@flow-observer-core/stores/flowObserverPanelStore';
import { useExecutionStore }          from '@flow-observer-core/stores/executionStore';

// Incorrect — breaks the package boundary:
import { useWorkflowStore } from '@flow-studio-services/stores/workflowStore';

Data Flow

[Backend SignalR Hub]
       │
       │ NodeStatusChanged, NodeLogEmitted, ExecutionCompleted
       ▼
[useExecutionSignalR hook]
       │ writes to both stores:
       ├──► executionStore.setNodeStatus(...)
       ├──► executionStore.appendLog(...)
       └──► designerModeStore.setNodeStatus(...)   ← canvas overlay sync