@goplasmatic/dataflow-ui 2.0.5 → 2.0.7

package/README.md

@@ -91,11 +91,11 @@ interface WorkflowVisualizerProps {
 Enable step-by-step execution visualization:
 
 ```tsx
-import { WorkflowVisualizer, DebuggerProvider, DebuggerControls } from '@goplasmatic/dataflow-ui';
+import { WorkflowVisualizer, DebuggerProvider, DebuggerControls, defaultEngineFactory } from '@goplasmatic/dataflow-ui';
 
 function DebugView() {
   return (
-    <DebuggerProvider>
+    <DebuggerProvider engineFactory={defaultEngineFactory}>
       <WorkflowVisualizer workflows={workflows} debugMode={true} />
       <DebuggerControls />
     </DebuggerProvider>
@@ -103,6 +103,41 @@ function DebugView() {
 }
 ```
 
+### Custom WASM Engine
+
+Use a custom WASM engine with plugins or custom functions:
+
+```tsx
+import { WorkflowVisualizer, DebuggerProvider, DataflowEngine } from '@goplasmatic/dataflow-ui';
+import { MyCustomWasmEngine } from './my-custom-wasm';
+
+// Implement the DataflowEngine interface
+class MyEngineAdapter implements DataflowEngine {
+  private engine: MyCustomWasmEngine;
+
+  constructor(workflows: Workflow[]) {
+    this.engine = new MyCustomWasmEngine(JSON.stringify(workflows));
+  }
+
+  async processWithTrace(payload: Record<string, unknown>) {
+    const result = await this.engine.process_with_trace(JSON.stringify(payload));
+    return JSON.parse(result);
+  }
+
+  dispose() {
+    this.engine.free();
+  }
+}
+
+function CustomDebugView() {
+  return (
+    <DebuggerProvider engineFactory={(workflows) => new MyEngineAdapter(workflows)}>
+      <WorkflowVisualizer workflows={workflows} debugMode={true} />
+    </DebuggerProvider>
+  );
+}
+```
+
 ## Exports
 
 ### Components
@@ -116,6 +151,12 @@ function DebugView() {
 - `useDebugger` - Access debugger state and controls
 - `useTaskDebugState` - Get debug state for a specific task
 
+### Engine
+- `WasmEngineAdapter` - Default WASM engine adapter
+- `defaultEngineFactory` - Factory function for default engine
+- `DataflowEngine` - Interface for custom engines
+- `EngineFactory` - Type for engine factory functions
+
 ### Types
 All TypeScript types are exported for workflow definitions, tasks, messages, and execution traces.
 

package/dist/index.cjs

@@ -1,4 +1,7 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const require$$0 = require("react");
@@ -643,7 +646,8 @@ const DebuggerContext = require$$0.createContext(null);
 function DebuggerProvider({
   children: children2,
   initialPayload,
-  autoActivate = false
+  autoActivate = false,
+  engineFactory
 }) {
   const [state, dispatch2] = require$$0.useReducer(debuggerReducer, {
     ...initialState,
@@ -651,6 +655,9 @@ function DebuggerProvider({
     isActive: autoActivate
   });
   const playbackTimerRef = require$$0.useRef(null);
+  const engineRef = require$$0.useRef(null);
+  const lastWorkflowsJsonRef = require$$0.useRef(null);
+  const isEngineReady = Boolean(engineFactory);
   const activate = require$$0.useCallback(() => dispatch2({ type: "ACTIVATE" }), []);
   const deactivate = require$$0.useCallback(() => dispatch2({ type: "DEACTIVATE" }), []);
   const setInputPayload = require$$0.useCallback(
@@ -674,6 +681,38 @@ function DebuggerProvider({
   const stepBackward = require$$0.useCallback(() => dispatch2({ type: "STEP_BACKWARD" }), []);
   const goToStep = require$$0.useCallback((index2) => dispatch2({ type: "GO_TO_STEP", index: index2 }), []);
   const setSpeed = require$$0.useCallback((speed) => dispatch2({ type: "SET_SPEED", speed }), []);
+  const runExecution = require$$0.useCallback(
+    async (workflows, payload) => {
+      var _a;
+      if (workflows.length === 0 || !engineFactory) {
+        return null;
+      }
+      try {
+        const workflowsJson = JSON.stringify(workflows);
+        if (lastWorkflowsJsonRef.current !== workflowsJson || !engineRef.current) {
+          if ((_a = engineRef.current) == null ? void 0 : _a.dispose) {
+            engineRef.current.dispose();
+          }
+          engineRef.current = engineFactory(workflows);
+          lastWorkflowsJsonRef.current = workflowsJson;
+        }
+        return await engineRef.current.processWithTrace(payload);
+      } catch (error) {
+        console.error("Execution error:", error);
+        throw error;
+      }
+    },
+    [engineFactory]
+  );
+  require$$0.useEffect(() => {
+    return () => {
+      var _a;
+      if ((_a = engineRef.current) == null ? void 0 : _a.dispose) {
+        engineRef.current.dispose();
+        engineRef.current = null;
+      }
+    };
+  }, []);
   require$$0.useEffect(() => {
     if (state.playbackState === "playing") {
       playbackTimerRef.current = window.setInterval(() => {
@@ -716,6 +755,7 @@ function DebuggerProvider({
     stepBackward,
     goToStep,
     setSpeed,
+    runExecution,
     currentStep,
     currentMessage,
     currentChanges,
@@ -723,7 +763,8 @@ function DebuggerProvider({
     isAtEnd,
     hasTrace,
     progress,
-    totalSteps
+    totalSteps,
+    isEngineReady
   };
   return /* @__PURE__ */ jsxRuntime.jsx(DebuggerContext.Provider, { value, children: children2 });
 }
@@ -9624,9 +9665,9 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
   }, children: children2 });
 }
 require$$0.memo(ResizeControl);
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
 let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNodes;
 (async () => {
   const BRANCH_COLORS = {
@@ -13360,23 +13401,23 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
     var EDGE_KEY_DELIM = "
";
     class Graph {
       constructor(opts) {
-        __publicField(this, "_isDirected", true);
-        __publicField(this, "_isMultigraph", false);
-        __publicField(this, "_isCompound", false);
-        __publicField(this, "_label");
-        __publicField(this, "_defaultNodeLabelFn", () => void 0);
-        __publicField(this, "_defaultEdgeLabelFn", () => void 0);
-        __publicField(this, "_nodes", {});
-        __publicField(this, "_in", {});
-        __publicField(this, "_preds", {});
-        __publicField(this, "_out", {});
-        __publicField(this, "_sucs", {});
-        __publicField(this, "_edgeObjs", {});
-        __publicField(this, "_edgeLabels", {});
-        __publicField(this, "_nodeCount", 0);
-        __publicField(this, "_edgeCount", 0);
-        __publicField(this, "_parent");
-        __publicField(this, "_children");
+        __publicField2(this, "_isDirected", true);
+        __publicField2(this, "_isMultigraph", false);
+        __publicField2(this, "_isCompound", false);
+        __publicField2(this, "_label");
+        __publicField2(this, "_defaultNodeLabelFn", () => void 0);
+        __publicField2(this, "_defaultEdgeLabelFn", () => void 0);
+        __publicField2(this, "_nodes", {});
+        __publicField2(this, "_in", {});
+        __publicField2(this, "_preds", {});
+        __publicField2(this, "_out", {});
+        __publicField2(this, "_sucs", {});
+        __publicField2(this, "_edgeObjs", {});
+        __publicField2(this, "_edgeLabels", {});
+        __publicField2(this, "_nodeCount", 0);
+        __publicField2(this, "_edgeCount", 0);
+        __publicField2(this, "_parent");
+        __publicField2(this, "_children");
         if (opts) {
           this._isDirected = Object.hasOwn(opts, "directed") ? opts.directed : true;
           this._isMultigraph = Object.hasOwn(opts, "multigraph") ? opts.multigraph : false;
@@ -13908,8 +13949,8 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
     hasRequiredPriorityQueue = 1;
     class PriorityQueue {
       constructor() {
-        __publicField(this, "_arr", []);
-        __publicField(this, "_keyIndices", {});
+        __publicField2(this, "_arr", []);
+        __publicField2(this, "_keyIndices", {});
       }
       size() {
         return this._arr.length;
@@ -17589,13 +17630,13 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
         try {
           setLoading(true);
           setError(null);
-          const wasm = await Promise.resolve().then(() => require("./datalogic_wasm-4utZNR2J-B5BvlAcC.cjs"));
-          await wasm.default();
+          const wasm2 = await Promise.resolve().then(() => require("./datalogic_wasm-4utZNR2J-B5BvlAcC.cjs"));
+          await wasm2.default();
           if (!cancelled) {
             moduleRef.current = {
-              evaluate: wasm.evaluate,
-              evaluate_with_trace: wasm.evaluate_with_trace,
-              CompiledRule: wasm.CompiledRule
+              evaluate: wasm2.evaluate,
+              evaluate_with_trace: wasm2.evaluate_with_trace,
+              CompiledRule: wasm2.CompiledRule
             };
             setReady(true);
             setLoading(false);
@@ -22233,6 +22274,223 @@ function DebugStateBadge({
     conditionResult !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `df-debug-badge-condition ${conditionResult ? "df-debug-badge-condition-pass" : "df-debug-badge-condition-fail"}`, children: conditionResult ? /* @__PURE__ */ jsxRuntime.jsx(Check, { size: iconSize }) : /* @__PURE__ */ jsxRuntime.jsx(X, { size: iconSize }) })
   ] });
 }
+class WasmEngine {
+  __destroy_into_raw() {
+    const ptr = this.__wbg_ptr;
+    this.__wbg_ptr = 0;
+    WasmEngineFinalization.unregister(this);
+    return ptr;
+  }
+  free() {
+    const ptr = this.__destroy_into_raw();
+    wasm.__wbg_wasmengine_free(ptr, 0);
+  }
+  /**
+   * Create a new WasmEngine from a JSON array of workflow definitions.
+   *
+   * # Arguments
+   * * `workflows_json` - JSON string containing an array of workflow definitions
+   *
+   * # Example
+   * ```javascript
+   * const workflows = JSON.stringify([{
+   *     id: "workflow1",
+   *     name: "My Workflow",
+   *     priority: 1,
+   *     tasks: [...]
+   * }]);
+   * const engine = new WasmEngine(workflows);
+   * ```
+   * @param {string} workflows_json
+   */
+  constructor(workflows_json) {
+    const ptr0 = passStringToWasm0(workflows_json, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.wasmengine_new(ptr0, len0);
+    if (ret[2]) {
+      throw takeFromExternrefTable0(ret[1]);
+    }
+    this.__wbg_ptr = ret[0] >>> 0;
+    WasmEngineFinalization.register(this, this.__wbg_ptr, this);
+    return this;
+  }
+  /**
+   * Process a payload through the engine's workflows.
+   *
+   * This is an async operation that returns a Promise.
+   *
+   * # Arguments
+   * * `payload_json` - JSON string of the payload to process
+   *
+   * # Returns
+   * A Promise that resolves to the processed message as a JSON string
+   *
+   * # Example
+   * ```javascript
+   * const payload = JSON.stringify({ name: "John", email: "john@example.com" });
+   * const result = await engine.process(payload);
+   * const processed = JSON.parse(result);
+   * console.log(processed.context.data);
+   * ```
+   * @param {string} payload_json
+   * @returns {Promise<any>}
+   */
+  process(payload_json) {
+    const ptr0 = passStringToWasm0(payload_json, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.wasmengine_process(this.__wbg_ptr, ptr0, len0);
+    return ret;
+  }
+  /**
+   * Process a payload with step-by-step execution tracing.
+   *
+   * This is an async operation that returns a Promise with the execution trace.
+   * The trace contains message snapshots after each step, including which
+   * workflows/tasks were executed or skipped.
+   *
+   * # Arguments
+   * * `payload_json` - JSON string of the payload to process
+   *
+   * # Returns
+   * A Promise that resolves to the execution trace as a JSON string
+   *
+   * # Example
+   * ```javascript
+   * const payload = JSON.stringify({ name: "John", email: "john@example.com" });
+   * const trace = await engine.process_with_trace(payload);
+   * const traceData = JSON.parse(trace);
+   * console.log(traceData.steps); // Array of execution steps
+   * ```
+   * @param {string} payload_json
+   * @returns {Promise<any>}
+   */
+  process_with_trace(payload_json) {
+    const ptr0 = passStringToWasm0(payload_json, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.wasmengine_process_with_trace(this.__wbg_ptr, ptr0, len0);
+    return ret;
+  }
+  /**
+   * Get the number of workflows registered in the engine.
+   * @returns {number}
+   */
+  workflow_count() {
+    const ret = wasm.wasmengine_workflow_count(this.__wbg_ptr);
+    return ret >>> 0;
+  }
+  /**
+   * Get the list of workflow IDs.
+   *
+   * # Returns
+   * JSON array of workflow IDs as a string
+   * @returns {string}
+   */
+  workflow_ids() {
+    let deferred1_0;
+    let deferred1_1;
+    try {
+      const ret = wasm.wasmengine_workflow_ids(this.__wbg_ptr);
+      deferred1_0 = ret[0];
+      deferred1_1 = ret[1];
+      return getStringFromWasm0(ret[0], ret[1]);
+    } finally {
+      wasm.__wbindgen_free(deferred1_0, deferred1_1, 1);
+    }
+  }
+}
+if (Symbol.dispose) WasmEngine.prototype[Symbol.dispose] = WasmEngine.prototype.free;
+const WasmEngineFinalization = typeof FinalizationRegistry === "undefined" ? { register: () => {
+}, unregister: () => {
+} } : new FinalizationRegistry((ptr) => wasm.__wbg_wasmengine_free(ptr >>> 0, 1));
+typeof FinalizationRegistry === "undefined" ? {} : new FinalizationRegistry((state) => state.dtor(state.a, state.b));
+function getStringFromWasm0(ptr, len) {
+  ptr = ptr >>> 0;
+  return decodeText(ptr, len);
+}
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+  if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+    cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+  }
+  return cachedUint8ArrayMemory0;
+}
+function passStringToWasm0(arg, malloc, realloc) {
+  if (realloc === void 0) {
+    const buf = cachedTextEncoder.encode(arg);
+    const ptr2 = malloc(buf.length, 1) >>> 0;
+    getUint8ArrayMemory0().subarray(ptr2, ptr2 + buf.length).set(buf);
+    WASM_VECTOR_LEN = buf.length;
+    return ptr2;
+  }
+  let len = arg.length;
+  let ptr = malloc(len, 1) >>> 0;
+  const mem = getUint8ArrayMemory0();
+  let offset = 0;
+  for (; offset < len; offset++) {
+    const code = arg.charCodeAt(offset);
+    if (code > 127) break;
+    mem[ptr + offset] = code;
+  }
+  if (offset !== len) {
+    if (offset !== 0) {
+      arg = arg.slice(offset);
+    }
+    ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+    const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+    const ret = cachedTextEncoder.encodeInto(arg, view);
+    offset += ret.written;
+    ptr = realloc(ptr, len, offset, 1) >>> 0;
+  }
+  WASM_VECTOR_LEN = offset;
+  return ptr;
+}
+function takeFromExternrefTable0(idx) {
+  const value = wasm.__wbindgen_externrefs.get(idx);
+  wasm.__externref_table_dealloc(idx);
+  return value;
+}
+let cachedTextDecoder = new TextDecoder("utf-8", { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+  numBytesDecoded += len;
+  if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+    cachedTextDecoder = new TextDecoder("utf-8", { ignoreBOM: true, fatal: true });
+    cachedTextDecoder.decode();
+    numBytesDecoded = len;
+  }
+  return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+const cachedTextEncoder = new TextEncoder();
+if (!("encodeInto" in cachedTextEncoder)) {
+  cachedTextEncoder.encodeInto = function(arg, view) {
+    const buf = cachedTextEncoder.encode(arg);
+    view.set(buf);
+    return {
+      read: arg.length,
+      written: buf.length
+    };
+  };
+}
+let WASM_VECTOR_LEN = 0;
+let wasm;
+class WasmEngineAdapter {
+  constructor(workflows) {
+    __publicField(this, "engine");
+    const workflowsJson = JSON.stringify(workflows);
+    this.engine = new WasmEngine(workflowsJson);
+  }
+  async processWithTrace(payload) {
+    const payloadJson = JSON.stringify(payload);
+    const traceJson = await this.engine.process_with_trace(payloadJson);
+    return JSON.parse(traceJson);
+  }
+  dispose() {
+    this.engine.free();
+  }
+}
+const defaultEngineFactory = (workflows) => new WasmEngineAdapter(workflows);
 exports.ConditionBadge = ConditionBadge;
 exports.DebugInfoBubble = DebugInfoBubble;
 exports.DebugStateBadge = DebugStateBadge;
@@ -22248,11 +22506,13 @@ exports.SearchInput = SearchInput;
 exports.TaskRow = TaskRow;
 exports.ThemeProvider = ThemeProvider;
 exports.TreeView = TreeView;
+exports.WasmEngineAdapter = WasmEngineAdapter;
 exports.WorkflowCard = WorkflowCard;
 exports.WorkflowFlowView = WorkflowFlowView;
 exports.WorkflowVisualizer = WorkflowVisualizer;
 exports.cloneMessage = cloneMessage;
 exports.createEmptyMessage = createEmptyMessage;
+exports.defaultEngineFactory = defaultEngineFactory;
 exports.getChangesAtStep = getChangesAtStep;
 exports.getFunctionDisplayInfo = getFunctionDisplayInfo;
 exports.getMessageAtStep = getMessageAtStep;

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 import { Component } from 'react';
+import { defaultEngineFactory } from './engines';
 import { ErrorInfo as ErrorInfo_2 } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { LucideIcon } from 'lucide-react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
+import { WasmEngineAdapter } from './engines';
 
 /**
  * Audit trail entry for tracking changes (matches Rust AuditTrail)
@@ -68,6 +70,25 @@ export declare interface ConditionResult {
  */
 export declare function createEmptyMessage(): Message;
 
+/**
+ * Interface for custom dataflow engines
+ *
+ * Implement this interface to provide a custom WASM engine for executing
+ * workflows with custom functions or plugins.
+ */
+export declare interface DataflowEngine {
+    /**
+     * Process a payload through the engine and return an execution trace
+     * for step-by-step debugging.
+     */
+    processWithTrace(payload: Record<string, unknown>): Promise<ExecutionTrace>;
+    /**
+     * Optional cleanup method called when the engine is no longer needed.
+     * Use this to free WASM memory.
+     */
+    dispose?(): void;
+}
+
 /**
  * Actions for the debugger reducer
  */
@@ -126,6 +147,7 @@ declare interface DebuggerContextValue {
     stepBackward: () => void;
     goToStep: (index: number) => void;
     setSpeed: (speed: number) => void;
+    runExecution: (workflows: Workflow[], payload: Record<string, unknown>) => Promise<ExecutionTrace | null>;
     currentStep: ExecutionStep | null;
     currentMessage: Message | null;
     currentChanges: Change[];
@@ -134,6 +156,7 @@ declare interface DebuggerContextValue {
     hasTrace: boolean;
     progress: number;
     totalSteps: number;
+    isEngineReady: boolean;
 }
 
 /**
@@ -151,7 +174,7 @@ declare interface DebuggerControlsProps {
 /**
  * Provider component for debugger state
  */
-export declare function DebuggerProvider({ children, initialPayload, autoActivate, }: DebuggerProviderProps): JSX_2.Element;
+export declare function DebuggerProvider({ children, initialPayload, autoActivate, engineFactory, }: DebuggerProviderProps): JSX_2.Element;
 
 declare interface DebuggerProviderProps {
     children: ReactNode;
@@ -159,6 +182,12 @@ declare interface DebuggerProviderProps {
     initialPayload?: Record<string, unknown>;
     /** Auto-start in debug mode */
     autoActivate?: boolean;
+    /**
+     * Factory function to create engine instances when workflows change.
+     * Called whenever workflows are updated to create a fresh engine.
+     * Use this for custom WASM engines with plugins.
+     */
+    engineFactory?: EngineFactory;
 }
 
 /**
@@ -215,6 +244,16 @@ declare interface DebugStateBadgeProps {
     size?: 'sm' | 'md';
 }
 
+export { defaultEngineFactory }
+
+/**
+ * Factory function type for creating engine instances.
+ *
+ * Called when workflows change to create a new engine instance
+ * configured with the current workflows.
+ */
+export declare type EngineFactory = (workflows: Workflow[]) => DataflowEngine;
+
 /**
  * Error boundary component to catch and display errors in child components
  */
@@ -658,6 +697,8 @@ export declare interface ValidationRule {
     message: string;
 }
 
+export { WasmEngineAdapter }
+
 /**
  * Workflow definition
  */

package/dist/index.js

@@ -1,3 +1,6 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import require$$0, { createContext, useState, useEffect, useContext, forwardRef, createElement, useReducer, useRef, useCallback, memo, useMemo, useLayoutEffect, Component } from "react";
 import { createPortal } from "react-dom";
@@ -641,7 +644,8 @@ const DebuggerContext = createContext(null);
 function DebuggerProvider({
   children: children2,
   initialPayload,
-  autoActivate = false
+  autoActivate = false,
+  engineFactory
 }) {
   const [state, dispatch2] = useReducer(debuggerReducer, {
     ...initialState,
@@ -649,6 +653,9 @@ function DebuggerProvider({
     isActive: autoActivate
   });
   const playbackTimerRef = useRef(null);
+  const engineRef = useRef(null);
+  const lastWorkflowsJsonRef = useRef(null);
+  const isEngineReady = Boolean(engineFactory);
   const activate = useCallback(() => dispatch2({ type: "ACTIVATE" }), []);
   const deactivate = useCallback(() => dispatch2({ type: "DEACTIVATE" }), []);
   const setInputPayload = useCallback(
@@ -672,6 +679,38 @@ function DebuggerProvider({
   const stepBackward = useCallback(() => dispatch2({ type: "STEP_BACKWARD" }), []);
   const goToStep = useCallback((index2) => dispatch2({ type: "GO_TO_STEP", index: index2 }), []);
   const setSpeed = useCallback((speed) => dispatch2({ type: "SET_SPEED", speed }), []);
+  const runExecution = useCallback(
+    async (workflows, payload) => {
+      var _a;
+      if (workflows.length === 0 || !engineFactory) {
+        return null;
+      }
+      try {
+        const workflowsJson = JSON.stringify(workflows);
+        if (lastWorkflowsJsonRef.current !== workflowsJson || !engineRef.current) {
+          if ((_a = engineRef.current) == null ? void 0 : _a.dispose) {
+            engineRef.current.dispose();
+          }
+          engineRef.current = engineFactory(workflows);
+          lastWorkflowsJsonRef.current = workflowsJson;
+        }
+        return await engineRef.current.processWithTrace(payload);
+      } catch (error) {
+        console.error("Execution error:", error);
+        throw error;
+      }
+    },
+    [engineFactory]
+  );
+  useEffect(() => {
+    return () => {
+      var _a;
+      if ((_a = engineRef.current) == null ? void 0 : _a.dispose) {
+        engineRef.current.dispose();
+        engineRef.current = null;
+      }
+    };
+  }, []);
   useEffect(() => {
     if (state.playbackState === "playing") {
       playbackTimerRef.current = window.setInterval(() => {
@@ -714,6 +753,7 @@ function DebuggerProvider({
     stepBackward,
     goToStep,
     setSpeed,
+    runExecution,
     currentStep,
     currentMessage,
     currentChanges,
@@ -721,7 +761,8 @@ function DebuggerProvider({
     isAtEnd,
     hasTrace,
     progress,
-    totalSteps
+    totalSteps,
+    isEngineReady
   };
   return /* @__PURE__ */ jsx(DebuggerContext.Provider, { value, children: children2 });
 }
@@ -9622,9 +9663,9 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
   }, children: children2 });
 }
 memo(ResizeControl);
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
 let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNodes;
 (async () => {
   const BRANCH_COLORS = {
@@ -13358,23 +13399,23 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
     var EDGE_KEY_DELIM = "
";
     class Graph {
       constructor(opts) {
-        __publicField(this, "_isDirected", true);
-        __publicField(this, "_isMultigraph", false);
-        __publicField(this, "_isCompound", false);
-        __publicField(this, "_label");
-        __publicField(this, "_defaultNodeLabelFn", () => void 0);
-        __publicField(this, "_defaultEdgeLabelFn", () => void 0);
-        __publicField(this, "_nodes", {});
-        __publicField(this, "_in", {});
-        __publicField(this, "_preds", {});
-        __publicField(this, "_out", {});
-        __publicField(this, "_sucs", {});
-        __publicField(this, "_edgeObjs", {});
-        __publicField(this, "_edgeLabels", {});
-        __publicField(this, "_nodeCount", 0);
-        __publicField(this, "_edgeCount", 0);
-        __publicField(this, "_parent");
-        __publicField(this, "_children");
+        __publicField2(this, "_isDirected", true);
+        __publicField2(this, "_isMultigraph", false);
+        __publicField2(this, "_isCompound", false);
+        __publicField2(this, "_label");
+        __publicField2(this, "_defaultNodeLabelFn", () => void 0);
+        __publicField2(this, "_defaultEdgeLabelFn", () => void 0);
+        __publicField2(this, "_nodes", {});
+        __publicField2(this, "_in", {});
+        __publicField2(this, "_preds", {});
+        __publicField2(this, "_out", {});
+        __publicField2(this, "_sucs", {});
+        __publicField2(this, "_edgeObjs", {});
+        __publicField2(this, "_edgeLabels", {});
+        __publicField2(this, "_nodeCount", 0);
+        __publicField2(this, "_edgeCount", 0);
+        __publicField2(this, "_parent");
+        __publicField2(this, "_children");
         if (opts) {
           this._isDirected = Object.hasOwn(opts, "directed") ? opts.directed : true;
           this._isMultigraph = Object.hasOwn(opts, "multigraph") ? opts.multigraph : false;
@@ -13906,8 +13947,8 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
     hasRequiredPriorityQueue = 1;
     class PriorityQueue {
       constructor() {
-        __publicField(this, "_arr", []);
-        __publicField(this, "_keyIndices", {});
+        __publicField2(this, "_arr", []);
+        __publicField2(this, "_keyIndices", {});
       }
       size() {
         return this._arr.length;
@@ -17587,13 +17628,13 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
         try {
           setLoading(true);
           setError(null);
-          const wasm = await import("./datalogic_wasm-4utZNR2J-DW6r1ZIK.js");
-          await wasm.default();
+          const wasm2 = await import("./datalogic_wasm-4utZNR2J-DW6r1ZIK.js");
+          await wasm2.default();
           if (!cancelled) {
             moduleRef.current = {
-              evaluate: wasm.evaluate,
-              evaluate_with_trace: wasm.evaluate_with_trace,
-              CompiledRule: wasm.CompiledRule
+              evaluate: wasm2.evaluate,
+              evaluate_with_trace: wasm2.evaluate_with_trace,
+              CompiledRule: wasm2.CompiledRule
             };
             setReady(true);
             setLoading(false);
@@ -22231,6 +22272,223 @@ function DebugStateBadge({
     conditionResult !== void 0 && /* @__PURE__ */ jsx("span", { className: `df-debug-badge-condition ${conditionResult ? "df-debug-badge-condition-pass" : "df-debug-badge-condition-fail"}`, children: conditionResult ? /* @__PURE__ */ jsx(Check, { size: iconSize }) : /* @__PURE__ */ jsx(X, { size: iconSize }) })
   ] });
 }
+class WasmEngine {
+  __destroy_into_raw() {
+    const ptr = this.__wbg_ptr;
+    this.__wbg_ptr = 0;
+    WasmEngineFinalization.unregister(this);
+    return ptr;
+  }
+  free() {
+    const ptr = this.__destroy_into_raw();
+    wasm.__wbg_wasmengine_free(ptr, 0);
+  }
+  /**
+   * Create a new WasmEngine from a JSON array of workflow definitions.
+   *
+   * # Arguments
+   * * `workflows_json` - JSON string containing an array of workflow definitions
+   *
+   * # Example
+   * ```javascript
+   * const workflows = JSON.stringify([{
+   *     id: "workflow1",
+   *     name: "My Workflow",
+   *     priority: 1,
+   *     tasks: [...]
+   * }]);
+   * const engine = new WasmEngine(workflows);
+   * ```
+   * @param {string} workflows_json
+   */
+  constructor(workflows_json) {
+    const ptr0 = passStringToWasm0(workflows_json, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.wasmengine_new(ptr0, len0);
+    if (ret[2]) {
+      throw takeFromExternrefTable0(ret[1]);
+    }
+    this.__wbg_ptr = ret[0] >>> 0;
+    WasmEngineFinalization.register(this, this.__wbg_ptr, this);
+    return this;
+  }
+  /**
+   * Process a payload through the engine's workflows.
+   *
+   * This is an async operation that returns a Promise.
+   *
+   * # Arguments
+   * * `payload_json` - JSON string of the payload to process
+   *
+   * # Returns
+   * A Promise that resolves to the processed message as a JSON string
+   *
+   * # Example
+   * ```javascript
+   * const payload = JSON.stringify({ name: "John", email: "john@example.com" });
+   * const result = await engine.process(payload);
+   * const processed = JSON.parse(result);
+   * console.log(processed.context.data);
+   * ```
+   * @param {string} payload_json
+   * @returns {Promise<any>}
+   */
+  process(payload_json) {
+    const ptr0 = passStringToWasm0(payload_json, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.wasmengine_process(this.__wbg_ptr, ptr0, len0);
+    return ret;
+  }
+  /**
+   * Process a payload with step-by-step execution tracing.
+   *
+   * This is an async operation that returns a Promise with the execution trace.
+   * The trace contains message snapshots after each step, including which
+   * workflows/tasks were executed or skipped.
+   *
+   * # Arguments
+   * * `payload_json` - JSON string of the payload to process
+   *
+   * # Returns
+   * A Promise that resolves to the execution trace as a JSON string
+   *
+   * # Example
+   * ```javascript
+   * const payload = JSON.stringify({ name: "John", email: "john@example.com" });
+   * const trace = await engine.process_with_trace(payload);
+   * const traceData = JSON.parse(trace);
+   * console.log(traceData.steps); // Array of execution steps
+   * ```
+   * @param {string} payload_json
+   * @returns {Promise<any>}
+   */
+  process_with_trace(payload_json) {
+    const ptr0 = passStringToWasm0(payload_json, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.wasmengine_process_with_trace(this.__wbg_ptr, ptr0, len0);
+    return ret;
+  }
+  /**
+   * Get the number of workflows registered in the engine.
+   * @returns {number}
+   */
+  workflow_count() {
+    const ret = wasm.wasmengine_workflow_count(this.__wbg_ptr);
+    return ret >>> 0;
+  }
+  /**
+   * Get the list of workflow IDs.
+   *
+   * # Returns
+   * JSON array of workflow IDs as a string
+   * @returns {string}
+   */
+  workflow_ids() {
+    let deferred1_0;
+    let deferred1_1;
+    try {
+      const ret = wasm.wasmengine_workflow_ids(this.__wbg_ptr);
+      deferred1_0 = ret[0];
+      deferred1_1 = ret[1];
+      return getStringFromWasm0(ret[0], ret[1]);
+    } finally {
+      wasm.__wbindgen_free(deferred1_0, deferred1_1, 1);
+    }
+  }
+}
+if (Symbol.dispose) WasmEngine.prototype[Symbol.dispose] = WasmEngine.prototype.free;
+const WasmEngineFinalization = typeof FinalizationRegistry === "undefined" ? { register: () => {
+}, unregister: () => {
+} } : new FinalizationRegistry((ptr) => wasm.__wbg_wasmengine_free(ptr >>> 0, 1));
+typeof FinalizationRegistry === "undefined" ? {} : new FinalizationRegistry((state) => state.dtor(state.a, state.b));
+function getStringFromWasm0(ptr, len) {
+  ptr = ptr >>> 0;
+  return decodeText(ptr, len);
+}
+let cachedUint8ArrayMemory0 = null;
+function getUint8ArrayMemory0() {
+  if (cachedUint8ArrayMemory0 === null || cachedUint8ArrayMemory0.byteLength === 0) {
+    cachedUint8ArrayMemory0 = new Uint8Array(wasm.memory.buffer);
+  }
+  return cachedUint8ArrayMemory0;
+}
+function passStringToWasm0(arg, malloc, realloc) {
+  if (realloc === void 0) {
+    const buf = cachedTextEncoder.encode(arg);
+    const ptr2 = malloc(buf.length, 1) >>> 0;
+    getUint8ArrayMemory0().subarray(ptr2, ptr2 + buf.length).set(buf);
+    WASM_VECTOR_LEN = buf.length;
+    return ptr2;
+  }
+  let len = arg.length;
+  let ptr = malloc(len, 1) >>> 0;
+  const mem = getUint8ArrayMemory0();
+  let offset = 0;
+  for (; offset < len; offset++) {
+    const code = arg.charCodeAt(offset);
+    if (code > 127) break;
+    mem[ptr + offset] = code;
+  }
+  if (offset !== len) {
+    if (offset !== 0) {
+      arg = arg.slice(offset);
+    }
+    ptr = realloc(ptr, len, len = offset + arg.length * 3, 1) >>> 0;
+    const view = getUint8ArrayMemory0().subarray(ptr + offset, ptr + len);
+    const ret = cachedTextEncoder.encodeInto(arg, view);
+    offset += ret.written;
+    ptr = realloc(ptr, len, offset, 1) >>> 0;
+  }
+  WASM_VECTOR_LEN = offset;
+  return ptr;
+}
+function takeFromExternrefTable0(idx) {
+  const value = wasm.__wbindgen_externrefs.get(idx);
+  wasm.__externref_table_dealloc(idx);
+  return value;
+}
+let cachedTextDecoder = new TextDecoder("utf-8", { ignoreBOM: true, fatal: true });
+cachedTextDecoder.decode();
+const MAX_SAFARI_DECODE_BYTES = 2146435072;
+let numBytesDecoded = 0;
+function decodeText(ptr, len) {
+  numBytesDecoded += len;
+  if (numBytesDecoded >= MAX_SAFARI_DECODE_BYTES) {
+    cachedTextDecoder = new TextDecoder("utf-8", { ignoreBOM: true, fatal: true });
+    cachedTextDecoder.decode();
+    numBytesDecoded = len;
+  }
+  return cachedTextDecoder.decode(getUint8ArrayMemory0().subarray(ptr, ptr + len));
+}
+const cachedTextEncoder = new TextEncoder();
+if (!("encodeInto" in cachedTextEncoder)) {
+  cachedTextEncoder.encodeInto = function(arg, view) {
+    const buf = cachedTextEncoder.encode(arg);
+    view.set(buf);
+    return {
+      read: arg.length,
+      written: buf.length
+    };
+  };
+}
+let WASM_VECTOR_LEN = 0;
+let wasm;
+class WasmEngineAdapter {
+  constructor(workflows) {
+    __publicField(this, "engine");
+    const workflowsJson = JSON.stringify(workflows);
+    this.engine = new WasmEngine(workflowsJson);
+  }
+  async processWithTrace(payload) {
+    const payloadJson = JSON.stringify(payload);
+    const traceJson = await this.engine.process_with_trace(payloadJson);
+    return JSON.parse(traceJson);
+  }
+  dispose() {
+    this.engine.free();
+  }
+}
+const defaultEngineFactory = (workflows) => new WasmEngineAdapter(workflows);
 export {
   ConditionBadge,
   DebugInfoBubble,
@@ -22247,11 +22505,13 @@ export {
   TaskRow,
   ThemeProvider,
   TreeView,
+  WasmEngineAdapter,
   WorkflowCard,
   WorkflowFlowView,
   WorkflowVisualizer,
   cloneMessage,
   createEmptyMessage,
+  defaultEngineFactory,
   getChangesAtStep,
   getFunctionDisplayInfo,
   getMessageAtStep,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goplasmatic/dataflow-ui",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "type": "module",
   "description": "React visualization library for dataflow-rs workflow engine",
   "author": "Plasmatic Engineering <shankar@goplasmatic.io>",
@@ -52,7 +52,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@goplasmatic/dataflow-wasm": "^2.0.4",
+    "@goplasmatic/dataflow-wasm": "^2.0.7",
     "@goplasmatic/datalogic-ui": "^4.0.11",
     "@monaco-editor/react": "^4.7.0",
     "@xyflow/react": "^12.0.0",