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

package/src/plugin/graphrunner-webworker/index.tsx

@@ -0,0 +1,140 @@
+/**
+ * Web Worker graph runner plugin for browser-based graph execution in a worker thread
+ * Uses a Web Worker to execute graphs without blocking the UI
+ */
+
+import type { System } from '../../system/system.js';
+import { plugin } from '../../system/plugin.js';
+import { GraphRunnerClient } from '../graphrunner/client.js';
+import { WorkerTransport } from './worker-transport.js';
+import { graphRunnerClientPlugin } from '../graphrunner/index.js';
+import { webWorkerGraphRunnerStoreFactory } from './store.js';
+import { WebWorkerGraphRunnerPanel } from './panel.js';
+import { MenuItemElement } from '../../components/menubar/menuItem.js';
+import { ErrorBoundary } from 'react-error-boundary';
+
+export * from './worker-transport.js';
+export * from './store.js';
+export * from './panel.js';
+
+/**
+ * Options for the Web Worker graph runner plugin
+ */
+export interface WebWorkerGraphRunnerPluginOptions {
+  /**
+   * Pre-configured Web Worker instance.
+   * The worker should be set up with the necessary registry and message handlers.
+   * The registry MUST be defined inside the worker file itself.
+   *
+   * Example:
+   * ```ts
+   * const worker = new Worker(new URL('./my-graph-worker.ts', import.meta.url), { type: 'module' });
+   * ```
+   */
+  worker: Worker;
+
+  /**
+   * Whether to skip automatic connection.
+   * Default: false (will attempt to connect immediately)
+   */
+  skipAutoConnect?: boolean;
+
+  /**
+   * Whether to add the menu item to the Window menu.
+   * Default: true
+   */
+  addMenuItem?: boolean;
+}
+
+/**
+ * Plugin initialization function for Web Worker graph execution
+ * Registers a GraphRunnerClient with a worker transport that executes graphs in a Web Worker
+ */
+export async function webWorkerGraphRunnerPluginLoader(
+  system: System,
+  options: WebWorkerGraphRunnerPluginOptions
+): Promise<void> {
+  // Create web worker graph runner store
+  const webWorkerStore = webWorkerGraphRunnerStoreFactory();
+  system.decorate('webWorkerGraphRunnerStore', webWorkerStore);
+
+  // Create worker transport with the user-provided worker
+  const transport = new WorkerTransport(options.worker);
+
+  // Create client with the worker transport and message activity tracking
+  const client = new GraphRunnerClient({
+    transport,
+    protocolVersion: '1.0.0',
+    auth: { type: 'none' },
+    onMessageActivity: (direction, message) => {
+      // Access the store from the system after it's registered
+      const graphRunnerStore = system.runner.store;
+      if (graphRunnerStore) {
+        graphRunnerStore.getState().addMessageActivity(direction, message);
+      }
+    }
+  });
+
+  // Register the graph runner client plugin. With skipAutoConnect:false the
+  // plugin calls runner.connect(), which wires the persistent client event
+  // listeners (trace/logs/lifecycle) on this same client , so we must NOT wire
+  // them again here, or every trace span would be recorded twice.
+  await system.registerPlugin(graphRunnerClientPlugin, {
+    client,
+    skipAutoConnect: false
+  });
+
+  // Register the web worker graph runner panel
+  system.tabLoader.register('webWorkerGraphRunner', () => {
+    return {
+      id: 'webWorkerGraphRunner',
+      closable: true,
+      title: 'Web Worker Graph Runner',
+      group: 'default',
+      content: () => (
+        <ErrorBoundary
+          fallback={<div>Error loading Web Worker Graph Runner panel</div>}
+        >
+          <WebWorkerGraphRunnerPanel />
+        </ErrorBoundary>
+      )
+    };
+  });
+
+  // Add menu item to Window menu (unless disabled)
+  if (options.addMenuItem !== false) {
+    const menuStore = system.menubarStore;
+    const currentItems = menuStore.getState().items;
+    const windowMenu = currentItems.find((menu) => menu.name === 'window');
+
+    if (windowMenu) {
+      // Add the Web Worker Graph Runner menu item to the Window menu
+      const newMenuItem = {
+        name: 'webWorkerGraphRunner',
+        render: function WebWorkerGraphRunnerMenuItem() {
+          return (
+            <MenuItemElement
+              onClick={() =>
+                system.tabStore.getState().openTab('webWorkerGraphRunner')
+              }
+              key="webWorkerGraphRunner"
+            >
+              Web Worker Graph Runner
+            </MenuItemElement>
+          );
+        }
+      };
+
+      menuStore
+        .getState()
+        .setSubMenuItems('window', [...windowMenu.items, newMenuItem]);
+    }
+  }
+}
+
+export const webWorkerGraphRunnerPlugin = plugin(
+  webWorkerGraphRunnerPluginLoader,
+  {
+    name: 'graphrunner-webworker'
+  }
+);

package/src/plugin/graphrunner-webworker/panel.tsx

@@ -0,0 +1,173 @@
+/**
+ * Panel component for Web Worker Graph Runner
+ */
+
+import React from 'react';
+import { useSystem } from '@/system/provider';
+import { useStore } from 'zustand';
+import { BasePanel } from '@/components/panels/base';
+import { VscodeButton, VscodeTextfield } from '@vscode-elements/react-elements';
+
+import styles from '../graphrunner-local/styles.module.css';
+
+export function WebWorkerGraphRunnerPanel() {
+  const system = useSystem();
+  const store = system.webWorkerGraphRunnerStore;
+
+  const activeRuns = useStore(store, (s) => s.activeRuns);
+  const isExecuting = useStore(store, (s) => s.isExecuting);
+  const isPaused = useStore(store, (s) => s.isPaused);
+  const tickInterval = useStore(store, (s) => s.tickInterval);
+  const stepDelay = useStore(store, (s) => s.stepDelay);
+  const executionSpeed = useStore(store, (s) => s.executionSpeed);
+
+  const [tickInputValue, setTickInputValue] = React.useState(
+    String(tickInterval)
+  );
+  const [stepDelayValue, setStepDelayValue] = React.useState(String(stepDelay));
+  const [speedValue, setSpeedValue] = React.useState(String(executionSpeed));
+
+  const handleApplyTick = () => {
+    const value = parseInt(tickInputValue, 10);
+    if (!isNaN(value) && value > 0) {
+      store.getState().setTickInterval(value);
+    }
+  };
+
+  const handleApplyStepDelay = () => {
+    const value = parseInt(stepDelayValue, 10);
+    if (!isNaN(value) && value >= 0) {
+      store.getState().setStepDelay(value);
+    }
+  };
+
+  const handleApplySpeed = () => {
+    const value = parseFloat(speedValue);
+    if (!isNaN(value) && value > 0) {
+      store.getState().setExecutionSpeed(value);
+    }
+  };
+
+  return (
+    <BasePanel>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <h3>Web Worker Graph Runner</h3>
+          <p className={styles.description}>
+            Executes graphs in a separate Web Worker thread for non-blocking
+            performance
+          </p>
+        </div>
+
+        <div className={styles.section}>
+          <h4>Status</h4>
+          <div className={styles.statusGrid}>
+            <div>
+              <strong>Active Runs:</strong> {activeRuns}
+            </div>
+            <div>
+              <strong>Executing:</strong> {isExecuting ? 'Yes' : 'No'}
+            </div>
+            <div>
+              <strong>Paused:</strong> {isPaused ? 'Yes' : 'No'}
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.section}>
+          <h4>Execution Settings</h4>
+
+          <div className={styles.formGroup}>
+            <label>Tick Interval (ms)</label>
+            <p className={styles.helpText}>
+              Time between tick events. Lower = faster ticking.
+            </p>
+            <div className={styles.inputGroup}>
+              <VscodeTextfield
+                value={tickInputValue}
+                onInput={(e: any) => setTickInputValue(e.target.value)}
+                placeholder="50"
+              />
+              <VscodeButton onClick={handleApplyTick}>Apply</VscodeButton>
+            </div>
+            <div className={styles.presetButtons}>
+              <VscodeButton
+                onClick={() => {
+                  setTickInputValue('1000');
+                  store.getState().setTickInterval(1000);
+                }}
+              >
+                Very Slow (1000ms)
+              </VscodeButton>
+              <VscodeButton
+                onClick={() => {
+                  setTickInputValue('200');
+                  store.getState().setTickInterval(200);
+                }}
+              >
+                Slow (200ms)
+              </VscodeButton>
+              <VscodeButton
+                onClick={() => {
+                  setTickInputValue('50');
+                  store.getState().setTickInterval(50);
+                }}
+              >
+                Normal (50ms)
+              </VscodeButton>
+              <VscodeButton
+                onClick={() => {
+                  setTickInputValue('16');
+                  store.getState().setTickInterval(16);
+                }}
+              >
+                Fast (16ms)
+              </VscodeButton>
+            </div>
+          </div>
+
+          <div className={styles.formGroup}>
+            <label>Step Delay (ms)</label>
+            <p className={styles.helpText}>
+              Delay between execution steps. Use for debugging.
+            </p>
+            <div className={styles.inputGroup}>
+              <VscodeTextfield
+                value={stepDelayValue}
+                onInput={(e: any) => setStepDelayValue(e.target.value)}
+                placeholder="0"
+              />
+              <VscodeButton onClick={handleApplyStepDelay}>Apply</VscodeButton>
+            </div>
+          </div>
+
+          <div className={styles.formGroup}>
+            <label>Execution Speed</label>
+            <p className={styles.helpText}>
+              Speed multiplier. 1.0 = normal, 0.5 = half speed, 2.0 = double
+              speed.
+            </p>
+            <div className={styles.inputGroup}>
+              <VscodeTextfield
+                value={speedValue}
+                onInput={(e: any) => setSpeedValue(e.target.value)}
+                placeholder="1.0"
+              />
+              <VscodeButton onClick={handleApplySpeed}>Apply</VscodeButton>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.section}>
+          <h4>About Web Worker Execution</h4>
+          <p className={styles.helpText}>
+            Graphs execute in a separate Web Worker thread, keeping the UI
+            responsive even during intensive computations. All node execution,
+            lifecycle events, and graph state management happens off the main
+            thread.
+          </p>
+        </div>
+      </div>
+    </BasePanel>
+  );
+}

package/src/plugin/graphrunner-webworker/store.ts

@@ -0,0 +1,98 @@
+/**
+ * Store for Web Worker Graph Runner state
+ */
+
+import { create, type StoreApi } from 'zustand';
+
+export type WebWorkerGraphRunnerStore = {
+  /**
+   * Number of active graph runs in the worker
+   */
+  activeRuns: number;
+
+  /**
+   * Whether a graph is currently executing
+   */
+  isExecuting: boolean;
+
+  /**
+   * Whether execution is paused
+   */
+  isPaused: boolean;
+
+  /**
+   * Tick interval in milliseconds (for tick events)
+   * Default: 50ms
+   */
+  tickInterval: number;
+
+  /**
+   * Step delay in milliseconds (between execution steps)
+   * Default: 0ms (no delay)
+   */
+  stepDelay: number;
+
+  /**
+   * Execution speed multiplier
+   * 1.0 = normal speed, 0.5 = half speed, 2.0 = double speed
+   * Default: 1.0
+   */
+  executionSpeed: number;
+
+  /**
+   * Set the number of active runs
+   */
+  setActiveRuns: (count: number) => void;
+
+  /**
+   * Set execution state
+   */
+  setIsExecuting: (isExecuting: boolean) => void;
+
+  /**
+   * Set pause state
+   */
+  setIsPaused: (isPaused: boolean) => void;
+
+  /**
+   * Set tick interval
+   */
+  setTickInterval: (interval: number) => void;
+
+  /**
+   * Set step delay
+   */
+  setStepDelay: (delay: number) => void;
+
+  /**
+   * Set execution speed
+   */
+  setExecutionSpeed: (speed: number) => void;
+};
+
+export const webWorkerGraphRunnerStoreFactory =
+  (): StoreApi<WebWorkerGraphRunnerStore> =>
+    create<WebWorkerGraphRunnerStore>((set) => ({
+      activeRuns: 0,
+      isExecuting: false,
+      isPaused: false,
+      tickInterval: 50,
+      stepDelay: 0,
+      executionSpeed: 1.0,
+
+      setActiveRuns: (count) => set({ activeRuns: count }),
+      setIsExecuting: (isExecuting) => set({ isExecuting }),
+      setIsPaused: (isPaused) => set({ isPaused }),
+      setTickInterval: (interval) => set({ tickInterval: interval }),
+      setStepDelay: (delay) => set({ stepDelay: delay }),
+      setExecutionSpeed: (speed) => set({ executionSpeed: speed })
+    }));
+
+declare module '@/system/system' {
+  interface System {
+    /**
+     * Web Worker Graph Runner store
+     */
+    webWorkerGraphRunnerStore: StoreApi<WebWorkerGraphRunnerStore>;
+  }
+}

package/src/plugin/graphrunner-webworker/worker-transport.ts

@@ -0,0 +1,123 @@
+/**
+ * Web Worker transport implementation for graph execution
+ * Communicates with a Web Worker that executes graphs
+ */
+
+import type { GraphRunnerMessage } from '../graphrunner/types.js';
+import type { ITransport, TransportState } from '../graphrunner/transport.js';
+
+/**
+ * Messages sent from main thread to worker
+ */
+type MainToWorkerMessage = {
+  type: 'execute';
+  message: GraphRunnerMessage;
+};
+
+/**
+ * Messages sent from worker to main thread
+ */
+type WorkerToMainMessage =
+  | {
+      type: 'message';
+      data: GraphRunnerMessage;
+    }
+  | {
+      type: 'error';
+      error: string;
+    };
+
+/**
+ * Web Worker transport that delegates graph execution to a worker thread
+ */
+export class WorkerTransport implements ITransport {
+  private state: TransportState = 'disconnected';
+  private messageHandlers: Array<(message: GraphRunnerMessage) => void> = [];
+  private stateChangeHandlers: Array<(state: TransportState) => void> = [];
+  private errorHandlers: Array<(error: Error) => void> = [];
+  private worker: Worker;
+
+  constructor(worker: Worker) {
+    this.worker = worker;
+  }
+
+  getState(): TransportState {
+    console.log('Current transport state:', this.state);
+    return this.state;
+  }
+
+  async connect(): Promise<void> {
+    this.setState('connecting');
+    try {
+      // Set up message handler
+      this.worker.onmessage = (event: MessageEvent<WorkerToMainMessage>) => {
+        this.handleWorkerMessage(event.data);
+      };
+
+      // Set up error handler
+      this.worker.onerror = (error) => {
+        this.notifyError(new Error(`Worker error: ${error.message}`));
+      };
+
+      this.setState('connected');
+    } catch (error) {
+      this.setState('error');
+      throw error;
+    }
+  }
+
+  disconnect(): void {
+    this.worker.terminate();
+    this.setState('disconnected');
+  }
+
+  send(message: GraphRunnerMessage): void {
+    const workerMessage: MainToWorkerMessage = {
+      type: 'execute',
+      message
+    };
+    this.worker.postMessage(workerMessage);
+  }
+
+  onMessage(handler: (message: GraphRunnerMessage) => void): void {
+    this.messageHandlers.push(handler);
+  }
+
+  onStateChange(handler: (state: TransportState) => void): void {
+    this.stateChangeHandlers.push(handler);
+  }
+
+  onError(handler: (error: Error) => void): void {
+    this.errorHandlers.push(handler);
+  }
+
+  removeAllHandlers(): void {
+    this.messageHandlers = [];
+    this.stateChangeHandlers = [];
+    this.errorHandlers = [];
+  }
+
+  private setState(newState: TransportState): void {
+    this.state = newState;
+    this.stateChangeHandlers.forEach((handler) => handler(newState));
+  }
+
+  private notifyError(error: Error): void {
+    this.errorHandlers.forEach((handler) => handler(error));
+  }
+
+  private notifyMessage(message: GraphRunnerMessage): void {
+    this.messageHandlers.forEach((handler) => handler(message));
+  }
+
+  private handleWorkerMessage(data: WorkerToMainMessage): void {
+    switch (data.type) {
+      case 'message':
+        this.notifyMessage(data.data);
+        break;
+      case 'error':
+        this.notifyError(new Error(data.error));
+        break;
+    }
+  }
+}

package/src/plugin/kitchen-sink/index.ts

@@ -0,0 +1,38 @@
+import { plugin } from '@/system/plugin';
+import type { System } from '@/system/system';
+import { docsPlugin } from '@/plugin/docs';
+import { alignmentPlugin } from '@/plugin/alignment';
+import { layoutPlugin } from '@/plugin/layout';
+import { notesPlugin } from '@/plugin/notes';
+import { autosavePlugin } from '@/plugin/autosave';
+
+/**
+ * Batteries-included bundle of the standard editor plugins. Register this once
+ * instead of wiring each plugin by hand:
+ *
+ * ```ts
+ * const system = new System(registry);
+ * system.registerPlugin(kitchenSinkPlugin);
+ * ```
+ *
+ * It currently pulls in:
+ * - {@link docsPlugin} — the in-editor node documentation browser;
+ * - {@link alignmentPlugin} — node alignment + distribution;
+ * - {@link layoutPlugin} — Dagre/ELK auto-layout (heavy deps, opt-in);
+ * - {@link notesPlugin} — markdown note nodes (tiptap/prosemirror, opt-in);
+ * - {@link autosavePlugin} — client-side local backups of open graphs.
+ *
+ * It intentionally does **not** register a graph runner: runners
+ * ({@link localGraphRunnerPlugin}, the remote client, ...) need host-specific
+ * options (a node registry, transport, ...) so hosts wire those themselves.
+ */
+export const kitchenSinkPlugin = plugin(
+  async (system: System) => {
+    await system.registerPlugin(docsPlugin);
+    await system.registerPlugin(alignmentPlugin);
+    await system.registerPlugin(layoutPlugin);
+    await system.registerPlugin(notesPlugin);
+    await system.registerPlugin(autosavePlugin);
+  },
+  { name: 'kitchen-sink' }
+);

package/src/plugin/layout/dagre.ts

@@ -0,0 +1,131 @@
+import { Position } from 'reactflow';
+import type { Edge, Node } from 'reactflow';
+import type dagreNS from 'dagre';
+import type { System } from '@/system';
+import { pinned } from '@/annotations';
+
+// the layout direction (T = top, R = right, B = bottom, L = left, TB = top to bottom, ...)
+export type Direction = 'TB' | 'LR' | 'RL' | 'BT';
+
+export type Options = {
+  direction: Direction;
+};
+
+/**
+ * dagre is only needed when the user actually runs a Dagre layout, so load it
+ * lazily (a dynamic import the bundler code-splits into a separate chunk). This
+ * keeps it out of the initial load even for hosts that register the layout
+ * plugin. The module is fetched once and reused.
+ */
+let dagrePromise: Promise<typeof dagreNS> | undefined;
+const getDagre = () => {
+  dagrePromise ??= import('dagre').then((m) => m.default ?? m);
+  return dagrePromise;
+};
+
+const getDimensions = (node: Node) => {
+  return {
+    width: node.style?.width ?? node.width ?? 300,
+    height: node.style?.height ?? node.height ?? 200
+  };
+};
+
+const positionMap: Record<string, Position> = {
+  T: Position.Top,
+  L: Position.Left,
+  R: Position.Right,
+  B: Position.Bottom
+};
+
+export async function applyDagreLayout(
+  system: System,
+  options: Options | undefined = { direction: 'LR' }
+) {
+  const { direction } = options;
+  const { nodes, setNodes } = system.nodeStore.getState();
+  const { edges } = system.edgeStore.getState();
+
+  if (!nodes.length) {
+    return;
+  }
+
+  const dagre = await getDagre();
+  const dagreGraph = new dagre.graphlib!.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: direction });
+
+  // Add nodes to layout: exclude pinned nodes and child nodes inside groups
+  // Include both regular nodes and group nodes
+  const layoutNodes = nodes.filter((node) => {
+    if ('data' in node) {
+      const isPinned = node.data.annotations?.[pinned];
+      const isInGroup = !!node.parentId;
+      return !isPinned && !isInGroup;
+    }
+    return false;
+  });
+
+  layoutNodes.forEach((node: Node) => {
+    dagreGraph.setNode(node.id, getDimensions(node));
+  });
+
+  // Create a map for quick parent lookup
+  const nodeParentMap = new Map<string, string>();
+  nodes.forEach((node) => {
+    if (node.parentId) {
+      nodeParentMap.set(node.id, node.parentId);
+    }
+  });
+
+  // Function to get the top-level node or group for layout
+  const getLayoutNode = (nodeId: string): string => {
+    const parentId = nodeParentMap.get(nodeId);
+    return parentId ?? nodeId;
+  };
+
+  // Track unique edges at the layout level to avoid duplicates
+  const layoutEdges = new Set<string>();
+
+  edges.forEach((edge: Edge) => {
+    const layoutSource = getLayoutNode(edge.source);
+    const layoutTarget = getLayoutNode(edge.target);
+
+    // Skip self-loops (edges within the same group)
+    if (layoutSource === layoutTarget) {
+      return;
+    }
+
+    const edgeKey = `${layoutSource}->${layoutTarget}`;
+    if (!layoutEdges.has(edgeKey)) {
+      layoutEdges.add(edgeKey);
+      dagreGraph.setEdge(layoutSource, layoutTarget);
+    }
+  });
+
+  dagre.layout(dagreGraph);
+
+  setNodes((nodes) => {
+    const layoutedNodes = nodes.map((node) => {
+      // Skip pinned nodes - keep their current position
+      const isPinned = 'data' in node && node.data.annotations?.[pinned];
+      if (isPinned) {
+        return node;
+      }
+
+      // Skip nodes inside groups - they maintain relative positions
+      if (node.parentId) {
+        return node;
+      }
+
+      const { x, y } = dagreGraph.node(node.id);
+
+      return {
+        ...node,
+        sourcePosition: positionMap[direction[1]!],
+        targetPosition: positionMap[direction[0]!],
+        position: { x, y }
+      };
+    });
+    return layoutedNodes;
+  });
+}