@kiberon-labs/behave-graph-flow 2.0.0 → 3.0.0

package/src/plugin/graphrunner/runner.ts

@@ -2,8 +2,8 @@ import type { System } from '../../system/system';
 import type { StoreApi } from 'zustand';
 import type { GraphRunnerClientStore } from './store';
 import { GraphRunnerClient } from './client';
-import { buildUIGraphJSON } from '../../transformers/Uigraph';
 import { setupClientEventListeners } from './actions';
+import type { GraphRunController } from './runController';
 
 declare module '@/system/system' {
   interface System {
@@ -11,15 +11,32 @@ declare module '@/system/system' {
   }
 }
 
+/**
+ * Shared connection to the graph runner server. Owns the client, connection
+ * lifecycle and server metadata; per-graph run state and run lifecycle live on
+ * {@link GraphRunController}. Incoming server messages are dispatched back to the
+ * owning controller via {@link GraphRunner.runIndex}, keyed by run id, so
+ * multiple graphs can run concurrently and independently.
+ */
 export class GraphRunner {
   private system: System;
   public readonly store: StoreApi<GraphRunnerClientStore>;
+  /** runId -> the controller that started it. */
+  public readonly runIndex = new Map<string, GraphRunController>();
 
   constructor(system: System, store: StoreApi<GraphRunnerClientStore>) {
     this.system = system;
     this.store = store;
   }
 
+  registerRun(runId: string, controller: GraphRunController): void {
+    this.runIndex.set(runId, controller);
+  }
+
+  unregisterRun(runId: string): void {
+    this.runIndex.delete(runId);
+  }
+
   /**
    * Connect to the graph runner server
    */
@@ -54,8 +71,9 @@ export class GraphRunner {
 
       await theClient.connect();
 
-      // Setup persistent event listeners for trace, logs, and run completion
-      setupClientEventListeners(theClient, this.system, this.store);
+      // Setup persistent event listeners for trace, logs, and run completion.
+      // Messages are routed to the originating session by run id.
+      setupClientEventListeners(theClient, this);
 
       setConnectionState('connected');
       setConnectionInfo({
@@ -166,193 +184,4 @@ export class GraphRunner {
       setError(error instanceof Error ? error.message : String(error));
     }
   }
-
-  /**
-   * Run a graph remotely
-   */
-  async runRemotely(
-    graphId: string,
-    options?: { graph?: unknown; inputs?: unknown }
-  ): Promise<void> {
-    const {
-      client,
-      setCurrentRunId,
-      setCurrentGraphId,
-      setIsExecuting,
-      setIsPaused,
-      isExecuting,
-      enableTracing
-    } = this.store.getState();
-
-    if (!client) {
-      this.system.notifications.error('No graph runner connection');
-      throw new Error('No graph runner connection');
-    }
-    //already running
-    if (isExecuting) {
-      return;
-    }
-
-    try {
-      const runId = await client.runGraph(graphId, {
-        ...options,
-        trace: enableTracing
-      });
-
-      setCurrentRunId(runId);
-      setCurrentGraphId(graphId);
-      setIsExecuting(true);
-      setIsPaused(false);
-
-      this.system.notifications.info(`Graph execution started: ${graphId}`);
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      setIsPaused(false);
-      this.system.notifications.error(`Failed to run graph: ${errorMessage}`);
-      setIsExecuting(false);
-      setCurrentRunId(null);
-      setCurrentGraphId(null);
-      throw error;
-    }
-  }
-
-  /**
-   * Stop the current graph execution
-   */
-  async stop(): Promise<void> {
-    const {
-      client,
-      currentRunId,
-      setIsExecuting,
-      setCurrentRunId,
-      setCurrentGraphId,
-      setIsPaused
-    } = this.store.getState();
-
-    if (!client || !currentRunId) {
-      return;
-    }
-
-    try {
-      await client.stopGraph(currentRunId);
-      this.system.notifications.info('Stopping graph execution');
-      setIsExecuting(false);
-      setCurrentRunId(null);
-      setCurrentGraphId(null);
-      setIsPaused(false);
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      this.system.notifications.error(`Failed to stop graph: ${errorMessage}`);
-    }
-  }
-
-  /**
-   * Play the current graph
-   */
-  async play(): Promise<void> {
-    const { clearLogsOnRun, clearTracesOnRun } = this.store.getState();
-
-    // Clear logs if enabled
-    if (clearLogsOnRun) {
-      this.system.logsStore.getState().clear();
-    }
-
-    // Clear traces if enabled
-    if (clearTracesOnRun) {
-      this.system.traceStore.getState().clear();
-    }
-
-    const graphId = 'current';
-    const uiGraphData = buildUIGraphJSON(this.system);
-    const graphData = uiGraphData.flow;
-
-    try {
-      await this.runRemotely(graphId, { graph: graphData });
-    } catch {
-      // Error already handled in runRemotely
-    }
-  }
-
-  /**
-   * Pause the current graph execution
-   */
-  async pause(): Promise<void> {
-    const { client, currentRunId, setIsPaused } = this.store.getState();
-
-    if (!client || !currentRunId) {
-      return;
-    }
-
-    try {
-      // Check if the client's transport is LocalTransport with pause support
-      const transport = (client as any).transport;
-      if (transport && typeof transport.pauseExecution === 'function') {
-        transport.pauseExecution(currentRunId);
-        setIsPaused(true);
-        this.system.notifications.info('Execution paused');
-      } else {
-        // Fallback to stop for remote transports
-        await this.stop();
-      }
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      this.system.notifications.error(`Failed to pause graph: ${errorMessage}`);
-    }
-  }
-
-  /**
-   * Resume paused execution
-   */
-  async resume(): Promise<void> {
-    const { client, currentRunId, setIsPaused } = this.store.getState();
-
-    if (!client || !currentRunId) {
-      return;
-    }
-
-    try {
-      const transport = (client as any).transport;
-      if (transport && typeof transport.resumeExecution === 'function') {
-        setIsPaused(false);
-        this.system.notifications.info('Resuming execution');
-        await transport.resumeExecution(currentRunId);
-      }
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      this.system.notifications.error(
-        `Failed to resume graph: ${errorMessage}`
-      );
-    }
-  }
-
-  /**
-   * Execute one step forward
-   */
-  async step(): Promise<void> {
-    const { client, currentRunId, setIsPaused } = this.store.getState();
-
-    if (!client || !currentRunId) {
-      return;
-    }
-
-    try {
-      const transport = (client as any).transport;
-      if (transport && typeof transport.stepExecution === 'function') {
-        setIsPaused(true); // Ensure we stay paused after stepping
-        await transport.stepExecution(currentRunId);
-      } else {
-        this.system.notifications.info(
-          'Step execution not supported for this transport'
-        );
-      }
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      this.system.notifications.error(`Failed to step graph: ${errorMessage}`);
-    }
-  }
 }

package/src/plugin/graphrunner/store.ts

@@ -55,13 +55,7 @@ export interface GraphRunnerClientStore {
   messageActivity: MessageActivity[];
   maxActivityMessages: number;
 
-  // Execution state
-  currentRunId: string | null;
-  currentGraphId: string | null;
-  isExecuting: boolean;
-  isPaused: boolean;
-
-  // Execution preferences
+  // Execution preferences (global defaults applied to every run)
   clearLogsOnRun: boolean;
   clearTracesOnRun: boolean;
   enableTracing: boolean;
@@ -83,10 +77,6 @@ export interface GraphRunnerClientStore {
     message: GraphRunnerMessage
   ) => void;
   clearMessageActivity: () => void;
-  setCurrentRunId: (runId: string | null) => void;
-  setCurrentGraphId: (graphId: string | null) => void;
-  setIsExecuting: (isExecuting: boolean) => void;
-  setIsPaused: (isPaused: boolean) => void;
   setClearLogsOnRun: (clear: boolean) => void;
   setClearTracesOnRun: (clear: boolean) => void;
   setEnableTracing: (enable: boolean) => void;
@@ -117,13 +107,12 @@ export const graphRunnerClientStoreFactory = (
     nodeTypes: [],
     messageActivity: [],
     maxActivityMessages: 50,
-    currentRunId: null,
-    currentGraphId: null,
-    isExecuting: false,
-    isPaused: false,
     clearLogsOnRun: true,
     clearTracesOnRun: true,
-    enableTracing: true,
+    // Off by default: tracing costs two events per node execution and is the
+    // single biggest per-frame overhead for display-rate graphs. Opt in via the
+    // "Enable execution tracing" checkbox in the graph runner panel.
+    enableTracing: false,
 
     // Actions
     setConnectionConfig: (config) =>
@@ -174,6 +163,15 @@ export const graphRunnerClientStoreFactory = (
 
     addMessageActivity: (direction, message) =>
       set((state) => {
+        // Trace traffic is high-frequency (per node execution / per frame) and
+        // has its own dedicated panel; recording it here allocated a new
+        // activity array per event and instantly evicted every other message
+        // from the 50-entry ring. Received server messages are cast into this
+        // union by the callers, so compare the raw type string.
+        const type = (message as { type: string }).type;
+        if (type === 'trace' || type === 'traceBatch') {
+          return state;
+        }
         const activity: MessageActivity = {
           id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
           timestamp: Date.now(),
@@ -189,14 +187,6 @@ export const graphRunnerClientStoreFactory = (
 
     clearMessageActivity: () => set({ messageActivity: [] }),
 
-    setCurrentRunId: (currentRunId) => set({ currentRunId }),
-
-    setCurrentGraphId: (currentGraphId) => set({ currentGraphId }),
-
-    setIsExecuting: (isExecuting) => set({ isExecuting }),
-
-    setIsPaused: (isPaused) => set({ isPaused }),
-
     setClearLogsOnRun: (clearLogsOnRun) => set({ clearLogsOnRun }),
 
     setClearTracesOnRun: (clearTracesOnRun) => set({ clearTracesOnRun }),

package/src/plugin/graphrunner/styles.module.css

@@ -44,18 +44,18 @@
 
 .errorBox {
     padding: 0.75rem;
-    background-color: var(--vscode-inputValidation-errorBackground);
-    border: 1px solid var(--vscode-inputValidation-errorBorder);
+    background-color: var(--ds-error-bg);
+    border: 1px solid var(--ds-error-border);
     border-radius: 4px;
     font-size: 0.875rem;
-    color: var(--vscode-inputValidation-errorForeground);
+    color: var(--ds-error-fg);
     word-break: break-word;
 }
 
 .infoBox {
     padding: 0.75rem;
-    background-color: var(--vscode-inputValidation-infoBackground);
-    border: 1px solid var(--vscode-inputValidation-infoBorder);
+    background-color: var(--ds-info-bg);
+    border: 1px solid var(--ds-info-border);
     border-radius: 4px;
     font-size: 0.875rem;
     display: flex;
@@ -67,24 +67,6 @@
     word-break: break-word;
 }
 
-.tabs {
-    border-bottom: 1px solid var(--vscode-panel-border);
-    overflow-x: auto;
-    gap: 0.25rem;
-}
-
-
-.tabContent {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.tabPanel {
-    overflow: auto;
-}
-
 .tabPanelGap {
     overflow: auto;
     display: flex;
@@ -99,28 +81,19 @@
     gap: 0.75rem;
 }
 
-.connectionMessage {
-    font-size: 0.875rem;
-    padding: 0.5rem 0;
-}
-
-.connectionMessage p {
-    margin: 0;
-}
-
 .emptyMessage {
     font-size: 0.875rem;
-    color: var(--vscode-descriptionForeground);
+    color: var(--ds-fg-muted);
     margin: 0;
 }
 
 .codeBlock {
     font-size: 0.75rem;
-    font-family: var(--vscode-editor-font-family);
-    color: var(--vscode-editor-foreground);
+    font-family: var(--ds-font-mono);
+    color: var(--ds-editor-fg);
     margin: 0;
     padding: 0.5rem;
-    background-color: var(--vscode-textCodeBlock-background);
+    background-color: var(--ds-code-bg);
     border-radius: 2px;
     overflow: auto;
 }
@@ -133,22 +106,22 @@
     gap: 0.5rem;
     position: sticky;
     top: 0;
-    background-color: var(--vscode-editor-background);
+    background-color: var(--ds-editor-bg);
     padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--vscode-panel-border);
+    border-bottom: 1px solid var(--ds-panel-border);
     z-index: 1;
 }
 
 .messagesCount {
     font-size: 0.875rem;
-    color: var(--vscode-descriptionForeground);
+    color: var(--ds-fg-muted);
 }
 
 .messageCard {
     padding: 0.75rem;
-    border: 1px solid var(--vscode-panel-border);
+    border: 1px solid var(--ds-panel-border);
     border-radius: 4px;
-    background-color: var(--vscode-editor-background);
+    background-color: var(--ds-editor-bg);
     font-size: 0.875rem;
 }
 
@@ -176,7 +149,7 @@
 }
 
 .messageTime {
-    color: var(--vscode-descriptionForeground);
+    color: var(--ds-fg-muted);
     font-size: 0.75rem;
     white-space: nowrap;
 }
@@ -184,28 +157,15 @@
 .messageContent {
     margin: 0;
     padding: 0.5rem;
-    background-color: var(--vscode-textCodeBlock-background);
+    background-color: var(--ds-code-bg);
     border-radius: 2px;
     font-size: 0.75rem;
-    font-family: var(--vscode-editor-font-family);
+    font-family: var(--ds-font-mono);
     overflow: auto;
     max-height: 200px;
     word-break: break-all;
 }
 
-.treeItemContent {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    padding: 0.25rem 0;
-}
-
 .treeItemTitle {
     font-weight: 500;
-}
-
-.treeItemDescription {
-    font-size: 0.875rem;
-    color: var(--vscode-descriptionForeground);
-    margin-top: 0.25rem;
 }

package/src/plugin/graphrunner/transport.ts

@@ -61,6 +61,32 @@ export interface ITransport<
    */
   removeAllHandlers(): void;
 }
+
+/**
+ * Optional capability: a transport that can interactively control a run
+ * (pause / resume / step). Remote transports may not support it; the client
+ * detects support via {@link supportsExecutionControl} rather than reaching into
+ * transport internals.
+ */
+export interface IExecutionControl {
+  pauseExecution(runId: string): void;
+  resumeExecution(runId: string): Promise<void>;
+  stepExecution(runId: string): Promise<void>;
+  isPaused(runId: string): boolean;
+}
+
+/** Type guard: does this transport implement {@link IExecutionControl}? */
+export function supportsExecutionControl(
+  transport: unknown
+): transport is IExecutionControl {
+  return (
+    !!transport &&
+    typeof (transport as IExecutionControl).pauseExecution === 'function' &&
+    typeof (transport as IExecutionControl).resumeExecution === 'function' &&
+    typeof (transport as IExecutionControl).stepExecution === 'function'
+  );
+}
+
 /**
  * WebSocket transport implementation
  */

package/src/plugin/graphrunner/types.ts

@@ -184,6 +184,26 @@ export interface TraceMessage {
   timestamp: number;
 }
 
+/** A single node-execution event inside a {@link TraceBatchMessage}. */
+export interface TraceBatchEvent {
+  nodeId: string;
+  event: string;
+  data?: unknown;
+  timestamp: number;
+}
+
+/**
+ * Coalesced trace events for one run. Runners buffer per-node execution events
+ * and flush them roughly once per frame, so a tick that executes hundreds of
+ * nodes costs one message instead of hundreds.
+ */
+export interface TraceBatchMessage {
+  type: 'traceBatch';
+  runId: string;
+  graphId: string;
+  events: TraceBatchEvent[];
+}
+
 export interface LogMessage {
   type: 'log';
   runId: string;
@@ -289,6 +309,7 @@ export type ServerGraphRunnerMessage =
   | ValidationResultMessage
   // Events
   | TraceMessage
+  | TraceBatchMessage
   | LogMessage
   | VariableChangedMessage
   | CompletedMessage