Updates

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -587,6 +587,7 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
   const activeBlockIds = useExecutionStore((s) => s.activeBlockIds)
   const panelFocusedBlockId = useExecutionStore((s) => s.panelFocusedBlockId)
   const setPanelFocusedBlockId = useExecutionStore((s) => s.setPanelFocusedBlockId)
+  const executingBlockIds = useExecutionStore((s) => s.executingBlockIds)
   const setActiveBlocks = useExecutionStore((s) => s.setActiveBlocks)
   const setActiveTab = usePanelStore((s) => s.setActiveTab)
 
@@ -599,7 +600,9 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
     setPanelFocusedBlockId(id)
   }
 
-  // In debug mode, pending blocks are "Current" (what will execute on next Step)
+  // In debug mode, use executingBlockIds to detect actual executing blocks (not selection);
+  // outside debug, fall back to activeBlockIds driven by the executor
+  const isExecutingNow = isDebugModeEnabled ? executingBlockIds.has(id) : activeBlockIds.has(id)
   const isCurrentBlock = isDebugModeEnabled && isPending
   const isPanelFocused = isDebugModeEnabled && panelFocusedBlockId === id
 
@@ -614,8 +617,10 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
           !isEnabled && 'shadow-sm',
           // Panel-focused block highlight
           isPanelFocused && 'bg-amber-50 dark:bg-amber-900/10',
-          // Pending blocks show as "Current" with green border
-          isCurrentBlock && 'ring-2 ring-green-500',
+          // Executing blocks match staging: pulsing blue ring
+          isExecutingNow && 'animate-pulse-ring ring-2 ring-blue-500',
+          // Pending blocks show green border when not executing
+          !isExecutingNow && isCurrentBlock && 'ring-2 ring-green-500',
           // Diff highlighting
           diffStatus === 'new' && 'bg-green-50/50 ring-2 ring-green-500 dark:bg-green-900/10',
           diffStatus === 'edited' && 'bg-orange-50/50 ring-2 ring-orange-500 dark:bg-orange-900/10',
@@ -625,8 +630,8 @@ export function WorkflowBlock({ id, data }: NodeProps<WorkflowBlockProps>) {
         )}
         onClick={handleDebugOpen}
       >
-        {/* Show debug indicator for current blocks (pending execution) */}
-        {isCurrentBlock && (
+        {/* Show debug indicator for current blocks in debug mode (pending or executing) */}
+        {isDebugModeEnabled && (isPending || executingBlockIds.has(id)) && (
           <div className='-top-6 -translate-x-1/2 absolute left-1/2 z-10 transform rounded-t-md bg-green-500 px-2 py-0.5 text-white text-xs'>
             Current
           </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

@@ -62,6 +62,7 @@ export function useWorkflowExecution() {
     setExecutor,
     setDebugContext,
     setActiveBlocks,
+    setExecutingBlockIds,
   } = useExecutionStore()
   const [executionResult, setExecutionResult] = useState<ExecutionResult | null>(null)
 
@@ -93,6 +94,7 @@ export function useWorkflowExecution() {
     setExecutor(null)
     setPendingBlocks([])
     setActiveBlocks(new Set())
+    setExecutingBlockIds(new Set())
 
     // Reset debug mode setting if it was enabled
     if (isDebugModeEnabled) {
@@ -105,6 +107,7 @@ export function useWorkflowExecution() {
     setExecutor,
     setPendingBlocks,
     setActiveBlocks,
+    setExecutingBlockIds,
     isDebugModeEnabled,
   ])
 
@@ -133,10 +136,11 @@ export function useWorkflowExecution() {
       // Keep debug mode open for inspection: stop executing, clear pending
       setIsExecuting(false)
       setPendingBlocks([])
+      setExecutingBlockIds(new Set())
       // Keep debugContext and executor so the panel can inspect state
       // Do not reset isDebugging
     },
-    [activeWorkflowId, setIsExecuting, setPendingBlocks]
+    [activeWorkflowId, setIsExecuting, setPendingBlocks, setExecutingBlockIds]
   )
 
   /**
@@ -182,9 +186,10 @@ export function useWorkflowExecution() {
       // Keep debug session open for inspection
       setIsExecuting(false)
       setPendingBlocks([])
+      setExecutingBlockIds(new Set())
       // Keep isDebugging, debugContext, and executor intact
     },
-    [debugContext, activeWorkflowId, setIsExecuting, setPendingBlocks]
+    [debugContext, activeWorkflowId, setIsExecuting, setPendingBlocks, setExecutingBlockIds]
   )
 
   const persistLogs = async (
@@ -757,8 +762,12 @@ export function useWorkflowExecution() {
 
     try {
       logger.info('Executing debug step with blocks:', pendingBlocks)
+      // Mark current pending blocks as executing for UI pulse
+      setExecutingBlockIds(new Set(pendingBlocks))
       const result = await executor!.continueExecution(pendingBlocks, debugContext!)
       logger.info('Debug step execution result:', result)
+      // Clear executing state after step returns
+      setExecutingBlockIds(new Set())
 
       if (isDebugSessionComplete(result)) {
         await handleDebugSessionComplete(result)
@@ -766,6 +775,7 @@ export function useWorkflowExecution() {
         handleDebugSessionContinuation(result)
       }
     } catch (error: any) {
+      setExecutingBlockIds(new Set())
       await handleDebugExecutionError(error, 'step')
     }
   }, [
@@ -775,6 +785,7 @@ export function useWorkflowExecution() {
     activeWorkflowId,
     validateDebugState,
     setIsExecuting,
+    setExecutingBlockIds,
     isDebugSessionComplete,
     handleDebugSessionComplete,
     handleDebugSessionContinuation,
@@ -823,7 +834,9 @@ export function useWorkflowExecution() {
           `Resume iteration ${iterationCount + 1}, executing ${currentPendingBlocks.length} blocks`
         )
 
+        setExecutingBlockIds(new Set(currentPendingBlocks))
         currentResult = await executor!.continueExecution(currentPendingBlocks, currentContext)
+        setExecutingBlockIds(new Set())
 
         logger.info('Resume iteration result:', {
           success: currentResult.success,
@@ -868,6 +881,7 @@ export function useWorkflowExecution() {
       // Handle completion
       await handleDebugSessionComplete(currentResult)
     } catch (error: any) {
+      setExecutingBlockIds(new Set())
       await handleDebugExecutionError(error, 'resume')
     }
   }, [
@@ -877,6 +891,7 @@ export function useWorkflowExecution() {
     activeWorkflowId,
     validateDebugState,
     setIsExecuting,
+    setExecutingBlockIds,
     handleDebugSessionComplete,
     handleDebugExecutionError,
   ])

apps/sim/stores/execution/store.ts

@@ -62,5 +62,6 @@ export const useExecutionStore = create<ExecutionState & ExecutionActions>()((se
   setDebugContext: (debugContext) => set({ debugContext }),
   setAutoPanDisabled: (disabled) => set({ autoPanDisabled: disabled }),
   setPanelFocusedBlockId: (id) => set({ panelFocusedBlockId: id }),
+  setExecutingBlockIds: (ids) => set({ executingBlockIds: new Set(ids) }),
   reset: () => set(initialState),
 }))

apps/sim/stores/execution/types.ts

@@ -10,6 +10,7 @@ export interface ExecutionState {
   debugContext: ExecutionContext | null
   autoPanDisabled: boolean
   panelFocusedBlockId?: string | null
+  executingBlockIds: Set<string>
 }
 
 export interface ExecutionActions {
@@ -21,6 +22,7 @@ export interface ExecutionActions {
   setDebugContext: (context: ExecutionContext | null) => void
   setAutoPanDisabled: (disabled: boolean) => void
   setPanelFocusedBlockId: (id: string | null) => void
+  setExecutingBlockIds: (ids: Set<string>) => void
   reset: () => void
 }
 
@@ -33,6 +35,7 @@ export const initialState: ExecutionState = {
   debugContext: null,
   autoPanDisabled: false,
   panelFocusedBlockId: null,
+  executingBlockIds: new Set(),
 }
 
 // Types for panning functionality