improvement(workflow): refine live execution feedback

Author: andresdjasso

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import {
+  advanceActionSweep,
+  INITIAL_ACTION_SWEEP_STATE,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep'
+
+describe('advanceActionSweep', () => {
+  it('fills action slots cumulatively from left to right', () => {
+    const first = advanceActionSweep(INITIAL_ACTION_SWEEP_STATE, 3)
+    const second = advanceActionSweep(first, 3)
+    const third = advanceActionSweep(second, 3)
+
+    expect([first.filledCount, second.filledCount, third.filledCount]).toEqual([1, 2, 3])
+    expect(third.direction).toBe(-1)
+  })
+
+  it('empties action slots from right to left before restarting', () => {
+    const second = advanceActionSweep({ filledCount: 3, direction: -1 }, 3)
+    const first = advanceActionSweep(second, 3)
+    const empty = advanceActionSweep(first, 3)
+
+    expect([second.filledCount, first.filledCount, empty.filledCount]).toEqual([2, 1, 0])
+    expect(empty.direction).toBe(1)
+  })
+
+  it('stays empty when there are no action slots', () => {
+    expect(advanceActionSweep({ filledCount: 2, direction: -1 }, 0)).toEqual(
+      INITIAL_ACTION_SWEEP_STATE
+    )
+  })
+})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.test.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react'
+
+const ACTION_SWEEP_INTERVAL_MS = 160
+
+interface ActionSweepState {
+  filledCount: number
+  direction: 1 | -1
+}
+
+export const INITIAL_ACTION_SWEEP_STATE: ActionSweepState = {
+  filledCount: 0,
+  direction: 1,
+}
+
+/** Advances the cumulative action-slot sweep by one frame. */
+export function advanceActionSweep(state: ActionSweepState, slotCount: number): ActionSweepState {
+  if (slotCount <= 0) return INITIAL_ACTION_SWEEP_STATE
+
+  const nextCount = state.filledCount + state.direction
+  if (nextCount >= slotCount) {
+    return { filledCount: slotCount, direction: -1 }
+  }
+  if (nextCount <= 0) {
+    return INITIAL_ACTION_SWEEP_STATE
+  }
+  return { filledCount: nextCount, direction: state.direction }
+}
+
+/** Runs a cumulative left-to-right, right-to-left sweep while a block executes. */
+export function useRunningActionSweep(isRunning: boolean, slotCount: number): number {
+  const [state, setState] = useState<ActionSweepState>(INITIAL_ACTION_SWEEP_STATE)
+
+  useEffect(() => {
+    setState(INITIAL_ACTION_SWEEP_STATE)
+    if (!isRunning || slotCount <= 0) return
+
+    const intervalId = window.setInterval(() => {
+      setState((current) => advanceActionSweep(current, slotCount))
+    }, ACTION_SWEEP_INTERVAL_MS)
+
+    return () => window.clearInterval(intervalId)
+  }, [isRunning, slotCount])
+
+  return isRunning ? state.filledCount : 0
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/use-running-action-sweep.ts

@@ -17,6 +17,7 @@ import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hoo
 import { useBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
 import { isBlockProtected } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
+import { useIsCurrentWorkflowExecuting } from '@/stores/execution'
 import { usePanelEditorStore } from '@/stores/panel'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
@@ -87,6 +88,7 @@ export const NoteBlock = memo(function NoteBlock({
   const noteColor = isNoteColor(rawColor) ? rawColor : DEFAULT_NOTE_COLOR
 
   const userPermissions = useUserPermissionsContext()
+  const isWorkflowRunning = useIsCurrentWorkflowExecuting()
   const canEditWorkflow = userPermissions.canEdit && !data.isWorkflowLocked
   const isProtected = useWorkflowStore(
     useCallback((state) => isBlockProtected(id, state.blocks), [id])
@@ -198,6 +200,7 @@ export const NoteBlock = memo(function NoteBlock({
           blockType={type}
           disabled={!canEditWorkflow}
           variant='swell'
+          isWorkflowRunning={isWorkflowRunning}
           noteColor={noteColor}
           onNoteColorChange={handleColorChange}
           onNoteColorMenuOpen={handleNoteSelect}

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

@@ -4,8 +4,11 @@ import { type NodeProps, useReactFlow } from 'reactflow'
 import { hasDiffStatus } from '@/lib/workflows/diff/types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
-import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
-import { useIsCurrentWorkflowExecuting } from '@/stores/execution'
+import {
+  useCurrentWorkflow,
+  useIsBlockInActiveExecutionHandoff,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { useIsBlockActive, useIsCurrentWorkflowExecuting } from '@/stores/execution'
 import { usePanelEditorStore } from '@/stores/panel'
 
 /**
@@ -35,6 +38,8 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
   const isFocused = currentBlockId === id
 
   const isWorkflowRunning = useIsCurrentWorkflowExecuting()
+  const isRunning = useIsBlockActive(id)
+  const isExecutionHighlighted = useIsBlockInActiveExecutionHandoff(id)
 
   /**
    * Nesting depth, walking the parent chain so the view can apply nested
@@ -62,7 +67,9 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
       isEnabled={isEnabled}
       isLocked={isLocked}
       isFocused={isFocused}
-      isRunning={isWorkflowRunning}
+      isRunning={isRunning}
+      isWorkflowRunning={isWorkflowRunning}
+      isExecutionHighlighted={isExecutionHighlighted}
       diffStatus={diffStatus}
       nestingLevel={nestingLevel}
       canEditWorkflow={canEditWorkflow}
@@ -73,7 +80,8 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
           blockType={data.kind}
           disabled={!canEditWorkflow}
           variant='swell'
-          isRunning={isWorkflowRunning}
+          isRunning={isRunning}
+          isWorkflowRunning={isWorkflowRunning}
         />
       }
     />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx

@@ -68,7 +68,10 @@ import {
   getProviderName,
   shouldSkipBlockRender,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
-import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import {
+  useBlockVisual,
+  useIsBlockInActiveExecutionHandoff,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
 import { useCustomBlockOverlayVersion } from '@/blocks/custom/client-overlay'
 import { getBlock } from '@/blocks/registry'
@@ -781,6 +784,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     currentWorkflow,
     activeWorkflowId,
     isEnabled,
+    isExecuting,
     isLocked,
     handleClick,
     hasRing,
@@ -789,6 +793,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
   } = useBlockVisual({ blockId: id, data, isPending, isSelected: selected })
 
   const isWorkflowRunning = useIsCurrentWorkflowExecuting()
+  const isExecutionHighlighted = useIsBlockInActiveExecutionHandoff(id)
   const currentWorkflowId = (params.workflowId as string) || activeWorkflowId || ''
 
   const currentBlock = currentWorkflow.getBlockById(id)
@@ -1402,7 +1407,9 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       hasRing={hasRing}
       ringStyles={ringStyles}
       runPathStatus={runPathStatus}
-      isRunning={isWorkflowRunning}
+      isRunning={isExecuting}
+      isWorkflowRunning={isWorkflowRunning}
+      isExecutionHighlighted={isExecutionHighlighted}
       Icon={config.icon}
       iconBgColor={config.bgColor}
       isIntegration={config.category === 'tools'}
@@ -1457,7 +1464,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
             blockType={type}
             disabled={!canEditWorkflow}
             variant='swell'
-            isRunning={isWorkflowRunning}
+            isRunning={isExecuting}
+            isWorkflowRunning={isWorkflowRunning}
           />
         ) : undefined
       }

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

@@ -2,7 +2,11 @@ import { memo, useCallback, useMemo } from 'react'
 import { type EdgeDiffStatus, WorkflowEdgeView } from '@sim/workflow-renderer'
 import { type EdgeProps, useStore } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
-import { useIsCurrentWorkflowExecuting, useLastRunEdges } from '@/stores/execution'
+import {
+  useIsBlockActive,
+  useIsCurrentWorkflowExecuting,
+  useLastRunEdges,
+} from '@/stores/execution'
 import { usePanelEditorStore, usePanelStore } from '@/stores/panel'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 
@@ -30,6 +34,7 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
   )
   const lastRunEdges = useLastRunEdges()
   const isWorkflowRunning = useIsCurrentWorkflowExecuting()
+  const isTargetActive = useIsBlockActive(target)
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
   const activeTab = usePanelStore((state) => state.activeTab)
 
@@ -94,6 +99,7 @@ const WorkflowEdgeComponent = (props: WorkflowEdgeProps) => {
       runStatus={runStatus}
       isPreviewRun={Boolean(previewExecutionStatus)}
       isWorkflowRunning={isWorkflowRunning}
+      isTargetActive={isTargetActive}
       isConnectedToSelection={shouldHighlightEdge}
     />
   )

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

@@ -7,6 +7,10 @@ export { useBlockVisual } from './use-block-visual'
 export { useCanvasContextMenu } from './use-canvas-context-menu'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
 export { useDynamicHandleRefresh } from './use-dynamic-handle-refresh'
+export {
+  isBlockInActiveExecutionHandoff,
+  useIsBlockInActiveExecutionHandoff,
+} from './use-execution-handoff'
 export { useNodeUtilities } from './use-node-utilities'
 export { usePreventZoom } from './use-prevent-zoom'
 export { useScrollManagement } from './use-scroll-management'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest'
+import { isBlockInActiveExecutionHandoff } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-execution-handoff'
+
+const edges = [
+  { id: 'source-to-target', source: 'source', target: 'target' },
+  { id: 'stale-to-target', source: 'stale-source', target: 'target' },
+  { id: 'source-to-idle', source: 'source', target: 'idle-target' },
+]
+
+describe('isBlockInActiveExecutionHandoff', () => {
+  it('highlights the active destination and the source that just delivered it', () => {
+    const options = {
+      isExecuting: true,
+      activeBlockIds: new Set(['target']),
+      lastRunEdges: new Map([['source-to-target', 'success']]),
+      edges,
+    }
+
+    expect(isBlockInActiveExecutionHandoff({ ...options, blockId: 'target' })).toBe(true)
+    expect(isBlockInActiveExecutionHandoff({ ...options, blockId: 'source' })).toBe(true)
+  })
+
+  it('does not highlight unrelated sources or previously traversed inactive paths', () => {
+    const options = {
+      isExecuting: true,
+      activeBlockIds: new Set(['target']),
+      lastRunEdges: new Map([
+        ['source-to-target', 'success'],
+        ['source-to-idle', 'success'],
+      ]),
+      edges,
+    }
+
+    expect(isBlockInActiveExecutionHandoff({ ...options, blockId: 'stale-source' })).toBe(false)
+    expect(isBlockInActiveExecutionHandoff({ ...options, blockId: 'idle-target' })).toBe(false)
+  })
+
+  it('clears every handoff highlight when execution stops', () => {
+    expect(
+      isBlockInActiveExecutionHandoff({
+        blockId: 'target',
+        isExecuting: false,
+        activeBlockIds: new Set(['target']),
+        lastRunEdges: new Map([['source-to-target', 'success']]),
+        edges,
+      })
+    ).toBe(false)
+  })
+
+  it('recomputes the handoff when the execution snapshot changes', () => {
+    expect(
+      isBlockInActiveExecutionHandoff({
+        blockId: 'source',
+        isExecuting: true,
+        activeBlockIds: new Set(['target']),
+        lastRunEdges: new Map([['source-to-target', 'success']]),
+        edges,
+      })
+    ).toBe(true)
+
+    expect(
+      isBlockInActiveExecutionHandoff({
+        blockId: 'source',
+        isExecuting: true,
+        activeBlockIds: new Set(['idle-target']),
+        lastRunEdges: new Map(),
+        edges,
+      })
+    ).toBe(false)
+  })
+})