Observer SignalR Hook

Why a Separate Hook?

The designer's useExecutionSignalR hook manages the canvas-level connection — updating node border colours, triggering re-renders on the React Flow canvas. The Observer Panel has different needs:

• It may be mounted separately from the designer (e.g., in a monitoring dashboard)
• It manages its own log buffer, node status list, and tab state
• It can operate independently when the designer is not open

In practice, when both are mounted together (the normal case), both hooks connect to the same SignalR hub and the same execution group. The server broadcasts to all group members, so both receive every event.

useFlowObserverSignalR

// flow-observer-core/src/hooks/useFlowObserverSignalR.ts
export function useFlowObserverSignalR(executionId: string) {
  const engine = useFlowObserverPanelEngine();
  const store = useFlowObserverPanelStore();

  useEffect(() => {
    const connection = new HubConnectionBuilder()
      .withUrl('/hubs/execution', {
        accessTokenFactory: () => getAuthToken()
      })
      .withAutomaticReconnect([1000, 2000, 5000, 10000])
      .build();

    connection.on('ExecutionEvent', (event: ExecutionEvent) => {
      // Route all events through the engine
      engine.pushExecutionEvent(event);

      // Also update store directly for status/progress
      if (event.type === 'WorkflowExecutionCompleted') {
        store.setStatus(event.status);
      }
      if (event.type === 'NodeExecutionCompleted') {
        store.incrementCompletedCount();
      }
    });

    connection.start()
      .then(() => connection.invoke('JoinExecutionGroup', executionId));

    return () => { connection.stop(); };
  }, [executionId]);
}

Connection Relationship Diagram