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

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

@@ -0,0 +1,146 @@
+/**
+ * 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';
+import { setupClientEventListeners } from '../graphrunner/actions.js';
+
+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
+  // This will create the graphRunnerClientStore and decorate it on the system
+  await system.registerPlugin(graphRunnerClientPlugin, {
+    client,
+    skipAutoConnect: false
+  });
+
+  // Setup persistent event listeners for trace, logs, and run completion
+  // Access the store from the system after it's been registered by the plugin
+  const graphRunnerStore = system.runner.store;
+  if (graphRunnerStore) {
+    setupClientEventListeners(client, system, graphRunnerStore);
+  }
+
+  // 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,89 @@
+/**
+ * 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 })
+    }));

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

@@ -0,0 +1,17 @@
+/**
+ * Type definitions for Web Worker Graph Runner
+ */
+
+import type { StoreApi } from 'zustand';
+import type { WebWorkerGraphRunnerStore } from './store.js';
+
+declare module '@/system/system' {
+  interface System {
+    /**
+     * Web Worker Graph Runner store
+     */
+    webWorkerGraphRunnerStore: StoreApi<WebWorkerGraphRunnerStore>;
+  }
+}
+
+export type { 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;
+    }
+  }
+}