@goplasmatic/dataflow-ui 2.0.4 → 2.0.6

package/README.md

@@ -17,10 +17,12 @@ A React component library for visualizing and debugging [dataflow-rs](https://gi
 ## Features
 
 - **Workflow Visualization** - Interactive tree view of workflows, tasks, and conditions
-- **Execution Debugging** - Step-by-step execution trace visualization with change highlighting
+- **Execution Debugging** - Step-by-step execution trace visualization with message snapshots
 - **JSONLogic Viewer** - Visual representation of JSONLogic expressions via [@goplasmatic/datalogic-ui](https://www.npmjs.com/package/@goplasmatic/datalogic-ui)
 - **Theme Support** - Light, dark, and system theme modes
 - **TypeScript** - Full type definitions included
+- **Monaco Editor Integration** - JSON editing with syntax highlighting
+- **Change Highlighting** - Visual diff of message changes at each step
 
 ## Installation
 
@@ -89,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>
@@ -101,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
@@ -114,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.