@goplasmatic/dataflow-ui 2.0.8 → 2.0.10

package/README.md

@@ -82,33 +82,52 @@ interface WorkflowVisualizerProps {
   theme?: 'light' | 'dark' | 'system';
   className?: string;
   executionResult?: Message | null;
-  debugMode?: boolean;
+  debugConfig?: DebugConfig;
+  debugPayload?: Record<string, unknown>;
+}
+
+interface DebugConfig {
+  enabled: boolean;
+  engineFactory?: EngineFactory;
+  initialPayload?: Record<string, unknown>;
+  autoExecute?: boolean;
+  onExecutionComplete?: (trace: ExecutionTrace) => void;
+  onExecutionError?: (error: string) => void;
 }
 ```
 
 ### Debug Mode
 
-Enable step-by-step execution visualization:
+Enable step-by-step execution visualization with integrated debug controls:
 
 ```tsx
-import { WorkflowVisualizer, DebuggerProvider, DebuggerControls, defaultEngineFactory } from '@goplasmatic/dataflow-ui';
+import { WorkflowVisualizer, defaultEngineFactory } from '@goplasmatic/dataflow-ui';
 
 function DebugView() {
+  const payload = { data: { input: 'hello' } };
+
   return (
-    <DebuggerProvider engineFactory={defaultEngineFactory}>
-      <WorkflowVisualizer workflows={workflows} debugMode={true} />
-      <DebuggerControls />
-    </DebuggerProvider>
+    <WorkflowVisualizer
+      workflows={workflows}
+      debugConfig={{
+        enabled: true,
+        engineFactory: defaultEngineFactory,
+        autoExecute: true,
+      }}
+      debugPayload={payload}
+    />
   );
 }
 ```
 
+The debug controls (play, pause, step forward/backward) are automatically displayed in the visualizer header when `debugConfig.enabled` is true.
+
 ### Custom WASM Engine
 
 Use a custom WASM engine with plugins or custom functions:
 
 ```tsx
-import { WorkflowVisualizer, DebuggerProvider, DataflowEngine } from '@goplasmatic/dataflow-ui';
+import { WorkflowVisualizer, DataflowEngine, EngineFactory } from '@goplasmatic/dataflow-ui';
 import { MyCustomWasmEngine } from './my-custom-wasm';
 
 // Implement the DataflowEngine interface
@@ -129,11 +148,19 @@ class MyEngineAdapter implements DataflowEngine {
   }
 }
 
+const customEngineFactory: EngineFactory = (workflows) => new MyEngineAdapter(workflows);
+
 function CustomDebugView() {
   return (
-    <DebuggerProvider engineFactory={(workflows) => new MyEngineAdapter(workflows)}>
-      <WorkflowVisualizer workflows={workflows} debugMode={true} />
-    </DebuggerProvider>
+    <WorkflowVisualizer
+      workflows={workflows}
+      debugConfig={{
+        enabled: true,
+        engineFactory: customEngineFactory,
+        autoExecute: true,
+      }}
+      debugPayload={{ data: { input: 'test' } }}
+    />
   );
 }
 ```
@@ -141,10 +168,9 @@ function CustomDebugView() {
 ## Exports
 
 ### Components
-- `WorkflowVisualizer` - Main visualization component
+- `WorkflowVisualizer` - Main visualization component with integrated debug controls
 - `TreeView` - Standalone tree view
-- `DebuggerControls` - Debug playback controls
-- `DebuggerProvider` - Debug state context provider
+- `DebuggerProvider` - Debug state context provider (for advanced use cases)
 
 ### Hooks
 - `useTheme` - Access theme state
@@ -158,7 +184,9 @@ function CustomDebugView() {
 - `EngineFactory` - Type for engine factory functions
 
 ### Types
-All TypeScript types are exported for workflow definitions, tasks, messages, and execution traces.
+- `Workflow`, `Task`, `Message` - Core workflow types
+- `ExecutionTrace`, `ExecutionStep` - Execution trace types
+- `DebugConfig` - Debug mode configuration
 
 ## Peer Dependencies
 

package/dist/dataflow-ui.css

@@ -4322,6 +4322,16 @@ svg.react-flow__connectionline {
   color: var(--df-text-secondary);
 }
 
+.df-visualizer-result-changes {
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--df-success);
+  background: color-mix(in srgb, var(--df-success) 15%, transparent);
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-left: auto;
+}
+
 .df-visualizer-result-content {
   flex: 1;
   overflow: auto;
@@ -4546,6 +4556,38 @@ svg.react-flow__connectionline {
    DEBUGGER STYLES
    ============================================ */
 
+/* Visualizer container with title bar */
+
+.df-visualizer-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.df-visualizer-title-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--df-border-color);
+  background: var(--df-bg-secondary);
+  flex-shrink: 0;
+}
+
+.df-visualizer-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--df-text-primary);
+}
+
+/* Make horizontal layout fill remaining space */
+
+.df-visualizer-container .df-visualizer-horizontal {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Debug mode layout */
 
 .df-debug-mode {

package/dist/index.cjs

@@ -177,6 +177,15 @@ const Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "
 const ChevronDown = createLucideIcon("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
 ]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ChevronLeft = createLucideIcon("ChevronLeft", [
+  ["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
@@ -186,6 +195,26 @@ const ChevronDown = createLucideIcon("ChevronDown", [
 const ChevronRight = createLucideIcon("ChevronRight", [
   ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
 ]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ChevronsLeft = createLucideIcon("ChevronsLeft", [
+  ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
+  ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ChevronsRight = createLucideIcon("ChevronsRight", [
+  ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
+  ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
@@ -11028,7 +11057,7 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
       }
     ]
   ];
-  const ChevronLeft = createLucideIcon2("chevron-left", __iconNode$o);
+  const ChevronLeft2 = createLucideIcon2("chevron-left", __iconNode$o);
   const __iconNode$n = [
     [
       "path",
@@ -18888,7 +18917,7 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
                 onClick: stepBackward,
                 disabled: isAtStart,
                 title: "Step backward (Left Arrow)",
-                children: jsxRuntime.jsx(ChevronLeft, {
+                children: jsxRuntime.jsx(ChevronLeft2, {
                   size: 18
                 })
               }),
@@ -20304,7 +20333,7 @@ function getParentFolderIds(path) {
   return ids;
 }
 function TreeView({ workflows, selection: selection2, onSelect, debugMode = false }) {
-  const debuggerContext = useDebugger();
+  const debuggerContext = useDebuggerOptional();
   const effectiveDebugContext = debugMode ? debuggerContext : null;
   const folderTree = require$$0.useMemo(() => buildFolderTree(workflows), [workflows]);
   const sortedRootFolders = require$$0.useMemo(() => {
@@ -21063,6 +21092,7 @@ function IntegratedDebugToolbar({
     reset,
     stepForward,
     stepBackward,
+    goToStep,
     startExecution,
     executeTrace,
     setExecutionError,
@@ -21112,6 +21142,16 @@ function IntegratedDebugToolbar({
     reset();
     lastExecutionRef.current = null;
   }, [reset]);
+  const goToFirst = require$$0.useCallback(() => {
+    if (hasTrace) {
+      stop();
+    }
+  }, [hasTrace, stop]);
+  const goToLast = require$$0.useCallback(() => {
+    if (hasTrace && totalSteps > 0) {
+      goToStep(totalSteps - 1);
+    }
+  }, [hasTrace, totalSteps, goToStep]);
   require$$0.useEffect(() => {
     if (!autoExecute || !isEngineReady || workflows.length === 0) return;
     const timeoutId = setTimeout(() => {
@@ -21129,7 +21169,7 @@ function IntegratedDebugToolbar({
           e.preventDefault();
           if (playbackState === "playing") {
             pause();
-          } else if (hasTrace) {
+          } else if (hasTrace && !isAtEnd) {
             play();
           }
           break;
@@ -21145,9 +21185,17 @@ function IntegratedDebugToolbar({
             stepBackward();
           }
           break;
-        case "Escape":
+        case "Home":
           e.preventDefault();
-          stop();
+          if (hasTrace) {
+            goToFirst();
+          }
+          break;
+        case "End":
+          e.preventDefault();
+          if (hasTrace) {
+            goToLast();
+          }
           break;
         case "r":
           if (e.metaKey || e.ctrlKey) {
@@ -21157,7 +21205,7 @@ function IntegratedDebugToolbar({
           break;
       }
     },
-    [playbackState, hasTrace, isAtEnd, isAtStart, play, pause, stop, stepForward, stepBackward, handleReset]
+    [playbackState, hasTrace, isAtEnd, isAtStart, play, pause, stepForward, stepBackward, goToFirst, goToLast, handleReset]
   );
   require$$0.useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
@@ -21199,6 +21247,16 @@ function IntegratedDebugToolbar({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-debug-toolbar-step-text", children: getStepText() })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-debug-toolbar-controls", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "df-debug-toolbar-btn",
+          onClick: goToFirst,
+          disabled: !hasTrace || isAtStart || isExecuting,
+          title: "First step (Home)",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronsLeft, { size: 14 })
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -21206,7 +21264,7 @@ function IntegratedDebugToolbar({
           onClick: stepBackward,
           disabled: !hasTrace || isAtStart || isExecuting,
           title: "Previous step (Left Arrow)",
-          children: /* @__PURE__ */ jsxRuntime.jsx(SkipBack, { size: 14 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, { size: 14 })
         }
       ),
       playbackState === "playing" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -21235,17 +21293,17 @@ function IntegratedDebugToolbar({
           onClick: stepForward,
           disabled: !hasTrace || isAtEnd || isExecuting,
           title: "Next step (Right Arrow)",
-          children: /* @__PURE__ */ jsxRuntime.jsx(SkipForward, { size: 14 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { size: 14 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           className: "df-debug-toolbar-btn",
-          onClick: stop,
-          disabled: !hasTrace || isExecuting,
-          title: "Stop (Escape)",
-          children: /* @__PURE__ */ jsxRuntime.jsx(Square, { size: 14 })
+          onClick: goToLast,
+          disabled: !hasTrace || isAtEnd || isExecuting,
+          title: "Last step (End)",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronsRight, { size: 14 })
         }
       )
     ] }),
@@ -22339,13 +22397,13 @@ function VisualizerInner({
   onTaskSelect,
   onWorkflowSelect,
   executionResult,
-  debugMode = false,
-  showDebugToolbar = false,
   debugConfig,
   debugPayload
 }) {
   const { resolvedTheme } = useTheme();
-  const debuggerContext = debugMode ? useDebugger() : null;
+  const debugMode = (debugConfig == null ? void 0 : debugConfig.enabled) ?? false;
+  const debuggerContext = useDebuggerOptional();
+  const effectiveDebugContext = debugMode ? debuggerContext : null;
   const [selection2, setSelection] = require$$0.useState({ type: "none" });
   const [leftPanelWidth, setLeftPanelWidth] = require$$0.useState(280);
   const [isDragging, setIsDragging] = require$$0.useState(false);
@@ -22409,114 +22467,117 @@ function VisualizerInner({
     };
   }, [isVerticalDragging]);
   const selectionInfo = getSelectionInfo(selection2);
-  const hasDebugTrace = debugMode && (debuggerContext == null ? void 0 : debuggerContext.hasTrace);
-  const displayMessage = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.currentMessage : executionResult;
-  const currentChanges = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.currentChanges : [];
-  const currentStepIndex = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.state.currentStepIndex : -1;
+  const hasDebugTrace = debugMode && (effectiveDebugContext == null ? void 0 : effectiveDebugContext.hasTrace);
+  const displayMessage = hasDebugTrace ? effectiveDebugContext == null ? void 0 : effectiveDebugContext.currentMessage : executionResult;
+  const currentChanges = hasDebugTrace ? effectiveDebugContext == null ? void 0 : effectiveDebugContext.currentChanges : [];
+  const currentStepIndex = hasDebugTrace ? effectiveDebugContext == null ? void 0 : effectiveDebugContext.state.currentStepIndex : -1;
   const highlightedPaths = require$$0.useMemo(() => {
     if (!currentChanges || currentChanges.length === 0) return void 0;
     return currentChanges.map((change) => change.path);
   }, [currentChanges]);
   const isDraggingAny = isDragging || isVerticalDragging;
-  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: `df-visualizer-horizontal df-theme-${resolvedTheme} ${isDraggingAny ? "df-dragging" : ""}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            ref: leftPanelRef,
-            className: "df-visualizer-left",
-            style: { width: leftPanelWidth },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: `df-visualizer-left-tree ${displayMessage ? "df-with-result" : ""}`,
-                  style: displayMessage ? { height: `${treePanelHeight}%` } : void 0,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `df-visualizer-left-header ${showDebugToolbar ? "df-header-with-debug" : ""}`, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-visualizer-left-title", children: "Explorer" }),
-                      showDebugToolbar && debugConfig && /* @__PURE__ */ jsxRuntime.jsx(
-                        IntegratedDebugToolbar,
+  return /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `df-visualizer-container df-theme-${resolvedTheme}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-visualizer-title-bar", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-visualizer-title", children: "Workflows" }),
+      debugMode && debugConfig && /* @__PURE__ */ jsxRuntime.jsx(
+        IntegratedDebugToolbar,
+        {
+          workflows,
+          payload: debugPayload ?? debugConfig.initialPayload,
+          autoExecute: debugConfig.autoExecute,
+          onExecutionComplete: debugConfig.onExecutionComplete,
+          onExecutionError: debugConfig.onExecutionError
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: `df-visualizer-horizontal ${isDraggingAny ? "df-dragging" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: leftPanelRef,
+              className: "df-visualizer-left",
+              style: { width: leftPanelWidth },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: `df-visualizer-left-tree ${displayMessage ? "df-with-result" : ""}`,
+                    style: displayMessage ? { height: `${treePanelHeight}%` } : void 0,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-visualizer-left-header", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-visualizer-left-title", children: "Explorer" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-visualizer-left-content", children: workflows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-empty-state", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No workflows to display" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                        TreeView,
                         {
                           workflows,
-                          payload: debugPayload ?? debugConfig.initialPayload,
-                          autoExecute: debugConfig.autoExecute,
-                          onExecutionComplete: debugConfig.onExecutionComplete,
-                          onExecutionError: debugConfig.onExecutionError
+                          selection: selection2,
+                          onSelect: handleSelection,
+                          debugMode
                         }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-visualizer-left-content", children: workflows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-empty-state", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No workflows to display" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
-                      TreeView,
-                      {
-                        workflows,
-                        selection: selection2,
-                        onSelect: handleSelection,
-                        debugMode
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              displayMessage && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: `df-visualizer-divider-horizontal ${isVerticalDragging ? "df-divider-active" : ""}`,
-                  onMouseDown: handleVerticalMouseDown
-                }
-              ),
-              displayMessage && /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "df-visualizer-result-panel",
-                  style: { height: `${100 - treePanelHeight}%` },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-visualizer-result-header", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-visualizer-result-title", children: hasDebugTrace ? currentStepIndex !== void 0 && currentStepIndex >= 0 ? `Step ${currentStepIndex + 1}` : "Ready" : "Result" }),
-                      hasDebugTrace && currentChanges && currentChanges.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "df-visualizer-result-changes", children: [
-                        currentChanges.length,
-                        " change",
-                        currentChanges.length !== 1 ? "s" : ""
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-visualizer-result-content", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      JsonEditor,
-                      {
-                        value: JSON.stringify(displayMessage, null, 2),
-                        onChange: () => {
-                        },
-                        readOnly: true,
-                        theme: resolvedTheme === "dark" ? "dark" : "light",
-                        highlightedPaths
-                      }
-                    ) })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `df-visualizer-divider ${isDragging ? "df-divider-active" : ""}`,
-            onMouseDown: handleMouseDown
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-visualizer-right", children: [
-          selectionInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-details-header", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-details-header-info", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-details-header-title", children: selectionInfo.title }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-details-header-subtitle", children: selectionInfo.subtitle })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(DetailsPanel, { selection: selection2 })
-        ] })
-      ]
-    }
-  ) });
+                      ) })
+                    ]
+                  }
+                ),
+                displayMessage && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: `df-visualizer-divider-horizontal ${isVerticalDragging ? "df-divider-active" : ""}`,
+                    onMouseDown: handleVerticalMouseDown
+                  }
+                ),
+                displayMessage && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "df-visualizer-result-panel",
+                    style: { height: `${100 - treePanelHeight}%` },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-visualizer-result-header", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-visualizer-result-title", children: hasDebugTrace ? currentStepIndex !== void 0 && currentStepIndex >= 0 ? `Step ${currentStepIndex + 1}` : "Ready" : "Result" }),
+                        hasDebugTrace && currentChanges && currentChanges.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "df-visualizer-result-changes", children: [
+                          currentChanges.length,
+                          " change",
+                          currentChanges.length !== 1 ? "s" : ""
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-visualizer-result-content", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        JsonEditor,
+                        {
+                          value: JSON.stringify(displayMessage, null, 2),
+                          onChange: () => {
+                          },
+                          readOnly: true,
+                          theme: resolvedTheme === "dark" ? "dark" : "light",
+                          highlightedPaths
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `df-visualizer-divider ${isDragging ? "df-divider-active" : ""}`,
+              onMouseDown: handleMouseDown
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-visualizer-right", children: [
+            selectionInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "df-details-header", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-details-header-info", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-details-header-title", children: selectionInfo.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "df-details-header-subtitle", children: selectionInfo.subtitle })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(DetailsPanel, { selection: selection2 })
+          ] })
+        ]
+      }
+    )
+  ] }) });
 }
 function WorkflowVisualizer({
   workflows,
@@ -22525,12 +22586,10 @@ function WorkflowVisualizer({
   theme = "system",
   className = "",
   executionResult,
-  debugMode = false,
   debugConfig,
   debugPayload
 }) {
   if (debugConfig == null ? void 0 : debugConfig.enabled) {
-    const showControls = debugConfig.showControls !== false;
     return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultTheme: theme, children: /* @__PURE__ */ jsxRuntime.jsx(
       DebuggerProvider,
       {
@@ -22544,8 +22603,6 @@ function WorkflowVisualizer({
             onTaskSelect,
             onWorkflowSelect,
             executionResult,
-            debugMode: true,
-            showDebugToolbar: showControls,
             debugConfig,
             debugPayload
           }
@@ -22559,8 +22616,7 @@ function WorkflowVisualizer({
       workflows,
       onTaskSelect,
       onWorkflowSelect,
-      executionResult,
-      debugMode
+      executionResult
     }
   ) }) });
 }

package/dist/index.d.ts

@@ -116,18 +116,6 @@ export declare interface DebugConfig {
      * @default false
      */
     autoExecute?: boolean;
-    /**
-     * Show playback controls in the header.
-     * @default true
-     */
-    showControls?: boolean;
-    /**
-     * Position of the debug controls.
-     * - 'header': Show controls in the explorer header (default)
-     * - 'bottom': Show controls in a bottom toolbar
-     * @default 'header'
-     */
-    controlsPosition?: 'header' | 'bottom';
     /**
      * Callback fired when execution completes successfully.
      */
@@ -457,52 +445,6 @@ declare interface JsonViewerProps {
     className?: string;
 }
 
-/**
- * Legacy execution step type (for backwards compatibility)
- * @deprecated Use ExecutionStep instead
- */
-export declare interface LegacyExecutionStep {
-    /** Unique ID for this step */
-    id: string;
-    /** Type of step */
-    type: 'workflow-condition' | 'workflow-start' | 'workflow-end' | 'task-condition' | 'task-start' | 'task-end';
-    /** Associated workflow */
-    workflow: Workflow;
-    /** Associated task (if applicable) */
-    task?: Task;
-    /** Result of condition evaluation (if applicable) */
-    conditionResult?: ConditionResult;
-    /** Message state before this step */
-    messageBefore: Message;
-    /** Message state after this step */
-    messageAfter: Message;
-    /** State of this node */
-    state: DebugNodeState;
-    /** Timestamp when this step occurred */
-    timestamp: number;
-    /** Duration of this step in ms (for task-end) */
-    duration?: number;
-    /** Error if this step failed */
-    error?: ErrorInfo;
-}
-
-/**
- * Legacy trace type (for backwards compatibility)
- * @deprecated Use ExecutionTrace instead
- */
-export declare interface LegacyWorkflowExecutionTrace {
-    /** All execution steps */
-    steps: LegacyExecutionStep[];
-    /** Initial message before any processing */
-    initialMessage: Message;
-    /** Final message after all processing */
-    finalMessage: Message;
-    /** Total execution duration in ms */
-    totalDuration: number;
-    /** Whether execution completed successfully */
-    success: boolean;
-}
-
 /**
  * Map function input configuration
  */
@@ -597,8 +539,6 @@ declare interface SearchInputProps {
     className?: string;
 }
 
-export declare type SelectionType = TreeSelectionType;
-
 /**
  * Result of a step (executed or skipped)
  */
@@ -809,11 +749,11 @@ declare interface WorkflowFlowViewProps {
     onWorkflowSelect?: (workflow: Workflow) => void;
     onWorkflowConditionClick?: (workflow: Workflow) => void;
     onTaskConditionClick?: (task: Task, workflow: Workflow) => void;
-    selection?: SelectionType;
+    selection?: TreeSelectionType;
     highlightedTaskIds?: Set<string>;
 }
 
-export declare function WorkflowVisualizer({ workflows, onWorkflowSelect, onTaskSelect, theme, className, executionResult, debugMode, debugConfig, debugPayload, }: WorkflowVisualizerProps): JSX_2.Element;
+export declare function WorkflowVisualizer({ workflows, onWorkflowSelect, onTaskSelect, theme, className, executionResult, debugConfig, debugPayload, }: WorkflowVisualizerProps): JSX_2.Element;
 
 export declare interface WorkflowVisualizerProps {
     /** Array of workflow definitions to display */
@@ -828,11 +768,6 @@ export declare interface WorkflowVisualizerProps {
     className?: string;
     /** Execution result to display in the result panel */
     executionResult?: Message | null;
-    /**
-     * Enable debug mode with step-by-step visualization.
-     * Use this when wrapping with your own DebuggerProvider.
-     */
-    debugMode?: boolean;
     /**
      * Debug configuration for integrated debug mode.
      * When enabled, automatically wraps with DebuggerProvider and shows controls.

package/dist/index.js

@@ -175,6 +175,15 @@ const Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "
 const ChevronDown = createLucideIcon("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
 ]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ChevronLeft = createLucideIcon("ChevronLeft", [
+  ["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
@@ -184,6 +193,26 @@ const ChevronDown = createLucideIcon("ChevronDown", [
 const ChevronRight = createLucideIcon("ChevronRight", [
   ["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]
 ]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ChevronsLeft = createLucideIcon("ChevronsLeft", [
+  ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
+  ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
+]);
+/**
+ * @license lucide-react v0.462.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ChevronsRight = createLucideIcon("ChevronsRight", [
+  ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
+  ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
+]);
 /**
  * @license lucide-react v0.462.0 - ISC
  *
@@ -11026,7 +11055,7 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
       }
     ]
   ];
-  const ChevronLeft = createLucideIcon2("chevron-left", __iconNode$o);
+  const ChevronLeft2 = createLucideIcon2("chevron-left", __iconNode$o);
   const __iconNode$n = [
     [
       "path",
@@ -18886,7 +18915,7 @@ let CATEGORY_COLORS, DataLogicEditor, OPERATORS, applyTreeLayout, jsonLogicToNod
                 onClick: stepBackward,
                 disabled: isAtStart,
                 title: "Step backward (Left Arrow)",
-                children: jsx(ChevronLeft, {
+                children: jsx(ChevronLeft2, {
                   size: 18
                 })
               }),
@@ -20302,7 +20331,7 @@ function getParentFolderIds(path) {
   return ids;
 }
 function TreeView({ workflows, selection: selection2, onSelect, debugMode = false }) {
-  const debuggerContext = useDebugger();
+  const debuggerContext = useDebuggerOptional();
   const effectiveDebugContext = debugMode ? debuggerContext : null;
   const folderTree = useMemo(() => buildFolderTree(workflows), [workflows]);
   const sortedRootFolders = useMemo(() => {
@@ -21061,6 +21090,7 @@ function IntegratedDebugToolbar({
     reset,
     stepForward,
     stepBackward,
+    goToStep,
     startExecution,
     executeTrace,
     setExecutionError,
@@ -21110,6 +21140,16 @@ function IntegratedDebugToolbar({
     reset();
     lastExecutionRef.current = null;
   }, [reset]);
+  const goToFirst = useCallback(() => {
+    if (hasTrace) {
+      stop();
+    }
+  }, [hasTrace, stop]);
+  const goToLast = useCallback(() => {
+    if (hasTrace && totalSteps > 0) {
+      goToStep(totalSteps - 1);
+    }
+  }, [hasTrace, totalSteps, goToStep]);
   useEffect(() => {
     if (!autoExecute || !isEngineReady || workflows.length === 0) return;
     const timeoutId = setTimeout(() => {
@@ -21127,7 +21167,7 @@ function IntegratedDebugToolbar({
           e.preventDefault();
           if (playbackState === "playing") {
             pause();
-          } else if (hasTrace) {
+          } else if (hasTrace && !isAtEnd) {
             play();
           }
           break;
@@ -21143,9 +21183,17 @@ function IntegratedDebugToolbar({
             stepBackward();
           }
           break;
-        case "Escape":
+        case "Home":
           e.preventDefault();
-          stop();
+          if (hasTrace) {
+            goToFirst();
+          }
+          break;
+        case "End":
+          e.preventDefault();
+          if (hasTrace) {
+            goToLast();
+          }
           break;
         case "r":
           if (e.metaKey || e.ctrlKey) {
@@ -21155,7 +21203,7 @@ function IntegratedDebugToolbar({
           break;
       }
     },
-    [playbackState, hasTrace, isAtEnd, isAtStart, play, pause, stop, stepForward, stepBackward, handleReset]
+    [playbackState, hasTrace, isAtEnd, isAtStart, play, pause, stepForward, stepBackward, goToFirst, goToLast, handleReset]
   );
   useEffect(() => {
     window.addEventListener("keydown", handleKeyDown);
@@ -21197,6 +21245,16 @@ function IntegratedDebugToolbar({
       /* @__PURE__ */ jsx("span", { className: "df-debug-toolbar-step-text", children: getStepText() })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "df-debug-toolbar-controls", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "df-debug-toolbar-btn",
+          onClick: goToFirst,
+          disabled: !hasTrace || isAtStart || isExecuting,
+          title: "First step (Home)",
+          children: /* @__PURE__ */ jsx(ChevronsLeft, { size: 14 })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -21204,7 +21262,7 @@ function IntegratedDebugToolbar({
           onClick: stepBackward,
           disabled: !hasTrace || isAtStart || isExecuting,
           title: "Previous step (Left Arrow)",
-          children: /* @__PURE__ */ jsx(SkipBack, { size: 14 })
+          children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
         }
       ),
       playbackState === "playing" ? /* @__PURE__ */ jsx(
@@ -21233,17 +21291,17 @@ function IntegratedDebugToolbar({
           onClick: stepForward,
           disabled: !hasTrace || isAtEnd || isExecuting,
           title: "Next step (Right Arrow)",
-          children: /* @__PURE__ */ jsx(SkipForward, { size: 14 })
+          children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
         }
       ),
       /* @__PURE__ */ jsx(
         "button",
         {
           className: "df-debug-toolbar-btn",
-          onClick: stop,
-          disabled: !hasTrace || isExecuting,
-          title: "Stop (Escape)",
-          children: /* @__PURE__ */ jsx(Square, { size: 14 })
+          onClick: goToLast,
+          disabled: !hasTrace || isAtEnd || isExecuting,
+          title: "Last step (End)",
+          children: /* @__PURE__ */ jsx(ChevronsRight, { size: 14 })
         }
       )
     ] }),
@@ -22337,13 +22395,13 @@ function VisualizerInner({
   onTaskSelect,
   onWorkflowSelect,
   executionResult,
-  debugMode = false,
-  showDebugToolbar = false,
   debugConfig,
   debugPayload
 }) {
   const { resolvedTheme } = useTheme();
-  const debuggerContext = debugMode ? useDebugger() : null;
+  const debugMode = (debugConfig == null ? void 0 : debugConfig.enabled) ?? false;
+  const debuggerContext = useDebuggerOptional();
+  const effectiveDebugContext = debugMode ? debuggerContext : null;
   const [selection2, setSelection] = useState({ type: "none" });
   const [leftPanelWidth, setLeftPanelWidth] = useState(280);
   const [isDragging, setIsDragging] = useState(false);
@@ -22407,114 +22465,117 @@ function VisualizerInner({
     };
   }, [isVerticalDragging]);
   const selectionInfo = getSelectionInfo(selection2);
-  const hasDebugTrace = debugMode && (debuggerContext == null ? void 0 : debuggerContext.hasTrace);
-  const displayMessage = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.currentMessage : executionResult;
-  const currentChanges = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.currentChanges : [];
-  const currentStepIndex = hasDebugTrace ? debuggerContext == null ? void 0 : debuggerContext.state.currentStepIndex : -1;
+  const hasDebugTrace = debugMode && (effectiveDebugContext == null ? void 0 : effectiveDebugContext.hasTrace);
+  const displayMessage = hasDebugTrace ? effectiveDebugContext == null ? void 0 : effectiveDebugContext.currentMessage : executionResult;
+  const currentChanges = hasDebugTrace ? effectiveDebugContext == null ? void 0 : effectiveDebugContext.currentChanges : [];
+  const currentStepIndex = hasDebugTrace ? effectiveDebugContext == null ? void 0 : effectiveDebugContext.state.currentStepIndex : -1;
   const highlightedPaths = useMemo(() => {
     if (!currentChanges || currentChanges.length === 0) return void 0;
     return currentChanges.map((change) => change.path);
   }, [currentChanges]);
   const isDraggingAny = isDragging || isVerticalDragging;
-  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: `df-visualizer-horizontal df-theme-${resolvedTheme} ${isDraggingAny ? "df-dragging" : ""}`,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: leftPanelRef,
-            className: "df-visualizer-left",
-            style: { width: leftPanelWidth },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: `df-visualizer-left-tree ${displayMessage ? "df-with-result" : ""}`,
-                  style: displayMessage ? { height: `${treePanelHeight}%` } : void 0,
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: `df-visualizer-left-header ${showDebugToolbar ? "df-header-with-debug" : ""}`, children: [
-                      /* @__PURE__ */ jsx("span", { className: "df-visualizer-left-title", children: "Explorer" }),
-                      showDebugToolbar && debugConfig && /* @__PURE__ */ jsx(
-                        IntegratedDebugToolbar,
+  return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs("div", { className: `df-visualizer-container df-theme-${resolvedTheme}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "df-visualizer-title-bar", children: [
+      /* @__PURE__ */ jsx("span", { className: "df-visualizer-title", children: "Workflows" }),
+      debugMode && debugConfig && /* @__PURE__ */ jsx(
+        IntegratedDebugToolbar,
+        {
+          workflows,
+          payload: debugPayload ?? debugConfig.initialPayload,
+          autoExecute: debugConfig.autoExecute,
+          onExecutionComplete: debugConfig.onExecutionComplete,
+          onExecutionError: debugConfig.onExecutionError
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: `df-visualizer-horizontal ${isDraggingAny ? "df-dragging" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: leftPanelRef,
+              className: "df-visualizer-left",
+              style: { width: leftPanelWidth },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `df-visualizer-left-tree ${displayMessage ? "df-with-result" : ""}`,
+                    style: displayMessage ? { height: `${treePanelHeight}%` } : void 0,
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "df-visualizer-left-header", children: /* @__PURE__ */ jsx("span", { className: "df-visualizer-left-title", children: "Explorer" }) }),
+                      /* @__PURE__ */ jsx("div", { className: "df-visualizer-left-content", children: workflows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "df-empty-state", children: /* @__PURE__ */ jsx("p", { children: "No workflows to display" }) }) : /* @__PURE__ */ jsx(
+                        TreeView,
                         {
                           workflows,
-                          payload: debugPayload ?? debugConfig.initialPayload,
-                          autoExecute: debugConfig.autoExecute,
-                          onExecutionComplete: debugConfig.onExecutionComplete,
-                          onExecutionError: debugConfig.onExecutionError
+                          selection: selection2,
+                          onSelect: handleSelection,
+                          debugMode
                         }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { className: "df-visualizer-left-content", children: workflows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "df-empty-state", children: /* @__PURE__ */ jsx("p", { children: "No workflows to display" }) }) : /* @__PURE__ */ jsx(
-                      TreeView,
-                      {
-                        workflows,
-                        selection: selection2,
-                        onSelect: handleSelection,
-                        debugMode
-                      }
-                    ) })
-                  ]
-                }
-              ),
-              displayMessage && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `df-visualizer-divider-horizontal ${isVerticalDragging ? "df-divider-active" : ""}`,
-                  onMouseDown: handleVerticalMouseDown
-                }
-              ),
-              displayMessage && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "df-visualizer-result-panel",
-                  style: { height: `${100 - treePanelHeight}%` },
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "df-visualizer-result-header", children: [
-                      /* @__PURE__ */ jsx("span", { className: "df-visualizer-result-title", children: hasDebugTrace ? currentStepIndex !== void 0 && currentStepIndex >= 0 ? `Step ${currentStepIndex + 1}` : "Ready" : "Result" }),
-                      hasDebugTrace && currentChanges && currentChanges.length > 0 && /* @__PURE__ */ jsxs("span", { className: "df-visualizer-result-changes", children: [
-                        currentChanges.length,
-                        " change",
-                        currentChanges.length !== 1 ? "s" : ""
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { className: "df-visualizer-result-content", children: /* @__PURE__ */ jsx(
-                      JsonEditor,
-                      {
-                        value: JSON.stringify(displayMessage, null, 2),
-                        onChange: () => {
-                        },
-                        readOnly: true,
-                        theme: resolvedTheme === "dark" ? "dark" : "light",
-                        highlightedPaths
-                      }
-                    ) })
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `df-visualizer-divider ${isDragging ? "df-divider-active" : ""}`,
-            onMouseDown: handleMouseDown
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "df-visualizer-right", children: [
-          selectionInfo && /* @__PURE__ */ jsx("div", { className: "df-details-header", children: /* @__PURE__ */ jsxs("div", { className: "df-details-header-info", children: [
-            /* @__PURE__ */ jsx("span", { className: "df-details-header-title", children: selectionInfo.title }),
-            /* @__PURE__ */ jsx("span", { className: "df-details-header-subtitle", children: selectionInfo.subtitle })
-          ] }) }),
-          /* @__PURE__ */ jsx(DetailsPanel, { selection: selection2 })
-        ] })
-      ]
-    }
-  ) });
+                      ) })
+                    ]
+                  }
+                ),
+                displayMessage && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `df-visualizer-divider-horizontal ${isVerticalDragging ? "df-divider-active" : ""}`,
+                    onMouseDown: handleVerticalMouseDown
+                  }
+                ),
+                displayMessage && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "df-visualizer-result-panel",
+                    style: { height: `${100 - treePanelHeight}%` },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "df-visualizer-result-header", children: [
+                        /* @__PURE__ */ jsx("span", { className: "df-visualizer-result-title", children: hasDebugTrace ? currentStepIndex !== void 0 && currentStepIndex >= 0 ? `Step ${currentStepIndex + 1}` : "Ready" : "Result" }),
+                        hasDebugTrace && currentChanges && currentChanges.length > 0 && /* @__PURE__ */ jsxs("span", { className: "df-visualizer-result-changes", children: [
+                          currentChanges.length,
+                          " change",
+                          currentChanges.length !== 1 ? "s" : ""
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: "df-visualizer-result-content", children: /* @__PURE__ */ jsx(
+                        JsonEditor,
+                        {
+                          value: JSON.stringify(displayMessage, null, 2),
+                          onChange: () => {
+                          },
+                          readOnly: true,
+                          theme: resolvedTheme === "dark" ? "dark" : "light",
+                          highlightedPaths
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `df-visualizer-divider ${isDragging ? "df-divider-active" : ""}`,
+              onMouseDown: handleMouseDown
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "df-visualizer-right", children: [
+            selectionInfo && /* @__PURE__ */ jsx("div", { className: "df-details-header", children: /* @__PURE__ */ jsxs("div", { className: "df-details-header-info", children: [
+              /* @__PURE__ */ jsx("span", { className: "df-details-header-title", children: selectionInfo.title }),
+              /* @__PURE__ */ jsx("span", { className: "df-details-header-subtitle", children: selectionInfo.subtitle })
+            ] }) }),
+            /* @__PURE__ */ jsx(DetailsPanel, { selection: selection2 })
+          ] })
+        ]
+      }
+    )
+  ] }) });
 }
 function WorkflowVisualizer({
   workflows,
@@ -22523,12 +22584,10 @@ function WorkflowVisualizer({
   theme = "system",
   className = "",
   executionResult,
-  debugMode = false,
   debugConfig,
   debugPayload
 }) {
   if (debugConfig == null ? void 0 : debugConfig.enabled) {
-    const showControls = debugConfig.showControls !== false;
     return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme: theme, children: /* @__PURE__ */ jsx(
       DebuggerProvider,
       {
@@ -22542,8 +22601,6 @@ function WorkflowVisualizer({
             onTaskSelect,
             onWorkflowSelect,
             executionResult,
-            debugMode: true,
-            showDebugToolbar: showControls,
             debugConfig,
             debugPayload
           }
@@ -22557,8 +22614,7 @@ function WorkflowVisualizer({
       workflows,
       onTaskSelect,
       onWorkflowSelect,
-      executionResult,
-      debugMode
+      executionResult
     }
   ) }) });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goplasmatic/dataflow-ui",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "type": "module",
   "description": "React visualization library for dataflow-rs workflow engine",
   "author": "Plasmatic Engineering <shankar@goplasmatic.io>",