docs: Add custom WASM engine documentation

- Update ui/README.md with custom engine usage examples
- Update docs/src/ui/overview.md with custom engine section
- Add engine exports documentation to both files

Author: shankar-gpio

docs/src/ui/overview.md

@@ -105,12 +105,13 @@ import {
   WorkflowVisualizer,
   DebuggerProvider,
   DebuggerControls,
+  defaultEngineFactory,
   useDebugger
 } from '@goplasmatic/dataflow-ui';
 
 function DebugView() {
   return (
-    <DebuggerProvider>
+    <DebuggerProvider engineFactory={defaultEngineFactory}>
       <WorkflowVisualizer
         workflows={workflows}
         debugMode={true}
@@ -121,6 +122,47 @@ function DebugView() {
 }
 ```
 
+## Custom WASM Engine
+
+Use a custom WASM engine with plugins or custom functions for debugging. Implement the `DataflowEngine` interface:
+
+```tsx
+import {
+  WorkflowVisualizer,
+  DebuggerProvider,
+  DataflowEngine,
+  Workflow
+} from '@goplasmatic/dataflow-ui';
+import { MyCustomWasmEngine } from './my-custom-wasm';
+
+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>
+  );
+}
+```
+
+The `engineFactory` is called whenever workflows change, ensuring the engine always has the latest workflow definitions.
+
 ### Debugger Controls
 
 ```tsx
@@ -201,6 +243,13 @@ function MyComponent() {
 - `useTaskDebugState` - Debug state for a specific task
 - `useWorkflowDebugState` - Debug state for a workflow
 
+### 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.

ui/README.md

@@ -91,18 +91,53 @@ 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>
   );
 }
 ```
 
+### 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.