@goplasmatic/dataflow-ui 2.0.12 → 2.0.13

package/dist/index.cjs

@@ -584,6 +584,15 @@ const initialState = {
   executionError: null,
   skipFailedConditions: false
 };
+function getFilteredStepIndices(trace, skipFailedConditions) {
+  if (!trace || trace.steps.length === 0) {
+    return [];
+  }
+  if (!skipFailedConditions) {
+    return trace.steps.map((_2, i) => i);
+  }
+  return trace.steps.map((step, i) => ({ step, index: i })).filter(({ step }) => step.result !== "skipped").map(({ index: index2 }) => index2);
+}
 function debuggerReducer(state, action) {
   switch (action.type) {
     case "ACTIVATE":
@@ -656,34 +665,54 @@ function debuggerReducer(state, action) {
       if (!state.trace || state.trace.steps.length === 0) {
         return state;
       }
-      let nextIndex = state.currentStepIndex + 1;
-      if (state.skipFailedConditions) {
-        while (nextIndex < state.trace.steps.length && state.trace.steps[nextIndex].result === "skipped") {
-          nextIndex++;
-        }
+      const filteredIndices = getFilteredStepIndices(state.trace, state.skipFailedConditions);
+      if (filteredIndices.length === 0) {
+        return state;
       }
-      if (nextIndex >= state.trace.steps.length) {
+      const currentFilteredPos = filteredIndices.findIndex((i) => i === state.currentStepIndex);
+      let nextIndex;
+      if (state.currentStepIndex === -1) {
+        nextIndex = filteredIndices[0];
+      } else if (currentFilteredPos === -1) {
+        nextIndex = filteredIndices[0];
+      } else if (currentFilteredPos >= filteredIndices.length - 1) {
         return {
           ...state,
-          currentStepIndex: state.trace.steps.length - 1,
-          // Go to last step
           playbackState: "paused"
-          // Auto-pause at end
         };
+      } else {
+        nextIndex = filteredIndices[currentFilteredPos + 1];
       }
       return {
         ...state,
         currentStepIndex: nextIndex
       };
     }
-    case "STEP_BACKWARD":
-      if (state.currentStepIndex <= -1) return state;
+    case "STEP_BACKWARD": {
+      if (!state.trace || state.currentStepIndex <= -1) {
+        return state;
+      }
+      const filteredIndices = getFilteredStepIndices(state.trace, state.skipFailedConditions);
+      if (filteredIndices.length === 0) {
+        return {
+          ...state,
+          currentStepIndex: -1,
+          playbackState: "paused"
+        };
+      }
+      const currentFilteredPos = filteredIndices.findIndex((i) => i === state.currentStepIndex);
+      let prevIndex;
+      if (currentFilteredPos <= 0) {
+        prevIndex = -1;
+      } else {
+        prevIndex = filteredIndices[currentFilteredPos - 1];
+      }
       return {
         ...state,
-        currentStepIndex: state.currentStepIndex - 1,
+        currentStepIndex: prevIndex,
         playbackState: "paused"
-        // Pause on manual step
       };
+    }
     case "GO_TO_STEP":
       if (!state.trace || action.index < 0 || action.index >= state.trace.steps.length) return state;
       return {
@@ -697,11 +726,25 @@ function debuggerReducer(state, action) {
         ...state,
         playbackSpeed: Math.max(100, Math.min(2e3, action.speed))
       };
-    case "SET_SKIP_FAILED_CONDITIONS":
+    case "SET_SKIP_FAILED_CONDITIONS": {
+      if (action.skip && state.trace && state.currentStepIndex >= 0) {
+        const currentStep = state.trace.steps[state.currentStepIndex];
+        if (currentStep && currentStep.result === "skipped") {
+          const filteredIndices = getFilteredStepIndices(state.trace, true);
+          const nextValidIndex = filteredIndices.find((i) => i > state.currentStepIndex);
+          const prevValidIndex = [...filteredIndices].reverse().find((i) => i < state.currentStepIndex);
+          return {
+            ...state,
+            skipFailedConditions: action.skip,
+            currentStepIndex: nextValidIndex ?? prevValidIndex ?? -1
+          };
+        }
+      }
       return {
         ...state,
         skipFailedConditions: action.skip
       };
+    }
     default:
       return state;
   }
@@ -801,11 +844,13 @@ function DebuggerProvider({
   const currentStep = state.trace && state.currentStepIndex >= 0 ? state.trace.steps[state.currentStepIndex] : null;
   const currentMessage = state.trace && state.currentStepIndex >= 0 ? getMessageAtStep(state.trace, state.currentStepIndex) : null;
   const currentChanges = state.trace && state.currentStepIndex >= 0 ? getChangesAtStep(state.trace, state.currentStepIndex) : [];
-  const totalSteps = state.trace ? state.trace.steps.length : 0;
+  const filteredStepIndices = getFilteredStepIndices(state.trace, state.skipFailedConditions);
+  const totalSteps = filteredStepIndices.length;
+  const currentFilteredPos = state.currentStepIndex >= 0 ? filteredStepIndices.findIndex((i) => i === state.currentStepIndex) : -1;
   const isAtStart = state.currentStepIndex <= -1;
-  const isAtEnd = state.currentStepIndex >= totalSteps - 1 && state.currentStepIndex >= 0;
+  const isAtEnd = currentFilteredPos >= totalSteps - 1 && currentFilteredPos >= 0;
   const hasTrace = state.trace !== null && totalSteps > 0;
-  const progress = totalSteps > 0 && state.currentStepIndex >= 0 ? (state.currentStepIndex + 1) / totalSteps : 0;
+  const progress = totalSteps > 0 && currentFilteredPos >= 0 ? (currentFilteredPos + 1) / totalSteps : 0;
   const value = {
     state,
     dispatch: dispatch2,
@@ -833,6 +878,8 @@ function DebuggerProvider({
     hasTrace,
     progress,
     totalSteps,
+    currentFilteredPosition: currentFilteredPos,
+    filteredStepIndices,
     isEngineReady,
     skipFailedConditions: state.skipFailedConditions
   };
@@ -21122,11 +21169,13 @@ function IntegratedDebugToolbar({
     isAtEnd,
     hasTrace,
     totalSteps,
+    currentFilteredPosition,
+    filteredStepIndices,
     isEngineReady,
     skipFailedConditions,
     setSkipFailedConditions
   } = useDebugger();
-  const { playbackState, currentStepIndex, isExecuting, executionError, trace } = state;
+  const { playbackState, isExecuting, executionError, trace } = state;
   const lastExecutionRef = require$$0.useRef(null);
   const handleExecute = require$$0.useCallback(async () => {
     var _a, _b;
@@ -21171,10 +21220,10 @@ function IntegratedDebugToolbar({
     }
   }, [hasTrace, stop]);
   const goToLast = require$$0.useCallback(() => {
-    if (hasTrace && totalSteps > 0) {
-      goToStep(totalSteps - 1);
+    if (hasTrace && filteredStepIndices.length > 0) {
+      goToStep(filteredStepIndices[filteredStepIndices.length - 1]);
     }
-  }, [hasTrace, totalSteps, goToStep]);
+  }, [hasTrace, filteredStepIndices, goToStep]);
   require$$0.useEffect(() => {
     if (!autoExecute || !isEngineReady || workflows.length === 0) return;
     const timeoutId = setTimeout(() => {
@@ -21259,10 +21308,10 @@ function IntegratedDebugToolbar({
     if (!hasTrace) {
       return "Ready";
     }
-    if (currentStepIndex < 0) {
+    if (currentFilteredPosition < 0) {
       return "Ready";
     }
-    return `Step ${currentStepIndex + 1} / ${totalSteps}`;
+    return `Step ${currentFilteredPosition + 1} / ${totalSteps}`;
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `df-debug-toolbar-integrated ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "df-debug-toolbar-status", children: [

package/dist/index.d.ts

@@ -197,6 +197,10 @@ declare interface DebuggerContextValue {
     hasTrace: boolean;
     progress: number;
     totalSteps: number;
+    /** Current position within filtered steps (0-indexed), -1 if at ready state */
+    currentFilteredPosition: number;
+    /** Array of actual step indices that are shown (for navigation) */
+    filteredStepIndices: number[];
     isEngineReady: boolean;
     skipFailedConditions: boolean;
 }

package/dist/index.js

@@ -582,6 +582,15 @@ const initialState = {
   executionError: null,
   skipFailedConditions: false
 };
+function getFilteredStepIndices(trace, skipFailedConditions) {
+  if (!trace || trace.steps.length === 0) {
+    return [];
+  }
+  if (!skipFailedConditions) {
+    return trace.steps.map((_2, i) => i);
+  }
+  return trace.steps.map((step, i) => ({ step, index: i })).filter(({ step }) => step.result !== "skipped").map(({ index: index2 }) => index2);
+}
 function debuggerReducer(state, action) {
   switch (action.type) {
     case "ACTIVATE":
@@ -654,34 +663,54 @@ function debuggerReducer(state, action) {
       if (!state.trace || state.trace.steps.length === 0) {
         return state;
       }
-      let nextIndex = state.currentStepIndex + 1;
-      if (state.skipFailedConditions) {
-        while (nextIndex < state.trace.steps.length && state.trace.steps[nextIndex].result === "skipped") {
-          nextIndex++;
-        }
+      const filteredIndices = getFilteredStepIndices(state.trace, state.skipFailedConditions);
+      if (filteredIndices.length === 0) {
+        return state;
       }
-      if (nextIndex >= state.trace.steps.length) {
+      const currentFilteredPos = filteredIndices.findIndex((i) => i === state.currentStepIndex);
+      let nextIndex;
+      if (state.currentStepIndex === -1) {
+        nextIndex = filteredIndices[0];
+      } else if (currentFilteredPos === -1) {
+        nextIndex = filteredIndices[0];
+      } else if (currentFilteredPos >= filteredIndices.length - 1) {
         return {
           ...state,
-          currentStepIndex: state.trace.steps.length - 1,
-          // Go to last step
           playbackState: "paused"
-          // Auto-pause at end
         };
+      } else {
+        nextIndex = filteredIndices[currentFilteredPos + 1];
       }
       return {
         ...state,
         currentStepIndex: nextIndex
       };
     }
-    case "STEP_BACKWARD":
-      if (state.currentStepIndex <= -1) return state;
+    case "STEP_BACKWARD": {
+      if (!state.trace || state.currentStepIndex <= -1) {
+        return state;
+      }
+      const filteredIndices = getFilteredStepIndices(state.trace, state.skipFailedConditions);
+      if (filteredIndices.length === 0) {
+        return {
+          ...state,
+          currentStepIndex: -1,
+          playbackState: "paused"
+        };
+      }
+      const currentFilteredPos = filteredIndices.findIndex((i) => i === state.currentStepIndex);
+      let prevIndex;
+      if (currentFilteredPos <= 0) {
+        prevIndex = -1;
+      } else {
+        prevIndex = filteredIndices[currentFilteredPos - 1];
+      }
       return {
         ...state,
-        currentStepIndex: state.currentStepIndex - 1,
+        currentStepIndex: prevIndex,
         playbackState: "paused"
-        // Pause on manual step
       };
+    }
     case "GO_TO_STEP":
       if (!state.trace || action.index < 0 || action.index >= state.trace.steps.length) return state;
       return {
@@ -695,11 +724,25 @@ function debuggerReducer(state, action) {
         ...state,
         playbackSpeed: Math.max(100, Math.min(2e3, action.speed))
       };
-    case "SET_SKIP_FAILED_CONDITIONS":
+    case "SET_SKIP_FAILED_CONDITIONS": {
+      if (action.skip && state.trace && state.currentStepIndex >= 0) {
+        const currentStep = state.trace.steps[state.currentStepIndex];
+        if (currentStep && currentStep.result === "skipped") {
+          const filteredIndices = getFilteredStepIndices(state.trace, true);
+          const nextValidIndex = filteredIndices.find((i) => i > state.currentStepIndex);
+          const prevValidIndex = [...filteredIndices].reverse().find((i) => i < state.currentStepIndex);
+          return {
+            ...state,
+            skipFailedConditions: action.skip,
+            currentStepIndex: nextValidIndex ?? prevValidIndex ?? -1
+          };
+        }
+      }
       return {
         ...state,
         skipFailedConditions: action.skip
       };
+    }
     default:
       return state;
   }
@@ -799,11 +842,13 @@ function DebuggerProvider({
   const currentStep = state.trace && state.currentStepIndex >= 0 ? state.trace.steps[state.currentStepIndex] : null;
   const currentMessage = state.trace && state.currentStepIndex >= 0 ? getMessageAtStep(state.trace, state.currentStepIndex) : null;
   const currentChanges = state.trace && state.currentStepIndex >= 0 ? getChangesAtStep(state.trace, state.currentStepIndex) : [];
-  const totalSteps = state.trace ? state.trace.steps.length : 0;
+  const filteredStepIndices = getFilteredStepIndices(state.trace, state.skipFailedConditions);
+  const totalSteps = filteredStepIndices.length;
+  const currentFilteredPos = state.currentStepIndex >= 0 ? filteredStepIndices.findIndex((i) => i === state.currentStepIndex) : -1;
   const isAtStart = state.currentStepIndex <= -1;
-  const isAtEnd = state.currentStepIndex >= totalSteps - 1 && state.currentStepIndex >= 0;
+  const isAtEnd = currentFilteredPos >= totalSteps - 1 && currentFilteredPos >= 0;
   const hasTrace = state.trace !== null && totalSteps > 0;
-  const progress = totalSteps > 0 && state.currentStepIndex >= 0 ? (state.currentStepIndex + 1) / totalSteps : 0;
+  const progress = totalSteps > 0 && currentFilteredPos >= 0 ? (currentFilteredPos + 1) / totalSteps : 0;
   const value = {
     state,
     dispatch: dispatch2,
@@ -831,6 +876,8 @@ function DebuggerProvider({
     hasTrace,
     progress,
     totalSteps,
+    currentFilteredPosition: currentFilteredPos,
+    filteredStepIndices,
     isEngineReady,
     skipFailedConditions: state.skipFailedConditions
   };
@@ -21120,11 +21167,13 @@ function IntegratedDebugToolbar({
     isAtEnd,
     hasTrace,
     totalSteps,
+    currentFilteredPosition,
+    filteredStepIndices,
     isEngineReady,
     skipFailedConditions,
     setSkipFailedConditions
   } = useDebugger();
-  const { playbackState, currentStepIndex, isExecuting, executionError, trace } = state;
+  const { playbackState, isExecuting, executionError, trace } = state;
   const lastExecutionRef = useRef(null);
   const handleExecute = useCallback(async () => {
     var _a, _b;
@@ -21169,10 +21218,10 @@ function IntegratedDebugToolbar({
     }
   }, [hasTrace, stop]);
   const goToLast = useCallback(() => {
-    if (hasTrace && totalSteps > 0) {
-      goToStep(totalSteps - 1);
+    if (hasTrace && filteredStepIndices.length > 0) {
+      goToStep(filteredStepIndices[filteredStepIndices.length - 1]);
     }
-  }, [hasTrace, totalSteps, goToStep]);
+  }, [hasTrace, filteredStepIndices, goToStep]);
   useEffect(() => {
     if (!autoExecute || !isEngineReady || workflows.length === 0) return;
     const timeoutId = setTimeout(() => {
@@ -21257,10 +21306,10 @@ function IntegratedDebugToolbar({
     if (!hasTrace) {
       return "Ready";
     }
-    if (currentStepIndex < 0) {
+    if (currentFilteredPosition < 0) {
       return "Ready";
     }
-    return `Step ${currentStepIndex + 1} / ${totalSteps}`;
+    return `Step ${currentFilteredPosition + 1} / ${totalSteps}`;
   };
   return /* @__PURE__ */ jsxs("div", { className: `df-debug-toolbar-integrated ${className}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "df-debug-toolbar-status", children: [

package/package.json

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