fix snapshot for nested subflows

Author: icecrasher321

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

@@ -108,26 +108,24 @@ export function getLeftmostBlockId(workflowState: WorkflowState | null | undefin
 /** Execution status for edges/nodes in the preview */
 type ExecutionStatus = 'success' | 'error' | 'not-executed'
 
-/** Calculates absolute position, handling nested subflows. */
-function calculateAbsolutePosition(
+/** Calculates nesting depth, handling nested subflows. */
+function calculateNestingDepth(
   block: BlockState,
-  blocks: Record<string, BlockState>
-): { x: number; y: number } {
-  if (!block.data?.parentId) {
-    return block.position
-  }
-
-  const parentBlock = blocks[block.data.parentId]
+  blocks: Record<string, BlockState>,
+  visited: Set<string> = new Set()
+): number {
+  const parentId = block.data?.parentId
+  if (!parentId) return 0
+  if (visited.has(parentId)) return 0
+
+  const parentBlock = blocks[parentId]
   if (!parentBlock) {
-    logger.warn(`Parent block not found for child block`)
-    return block.position
+    logger.warn('Parent block not found for child block')
+    return 0
   }
 
-  const parentAbsolutePosition = calculateAbsolutePosition(parentBlock, blocks)
-  return {
-    x: parentAbsolutePosition.x + block.position.x,
-    y: parentAbsolutePosition.y + block.position.y,
-  }
+  visited.add(parentId)
+  return 1 + calculateNestingDepth(parentBlock, blocks, visited)
 }
 
 interface PreviewWorkflowProps {
@@ -329,7 +327,8 @@ export function PreviewWorkflow({
 
       if (childStatuses.length === 0) return undefined
       if (childStatuses.some((s) => s === 'error')) return 'error'
-      return 'success'
+      if (childStatuses.every((s) => s === 'success')) return 'success'
+      return undefined
     }
     return derive
   }, [subflowChildrenMap, blockExecutionMap, workflowState.blocks])
@@ -367,13 +366,20 @@ export function PreviewWorkflow({
 
     const nodeArray: Node[] = []
 
-    Object.entries(workflowState.blocks || {}).forEach(([blockId, block]) => {
+    const sortedBlocks = Object.entries(workflowState.blocks || {}).sort(
+      ([, left], [, right]) =>
+        calculateNestingDepth(left, workflowState.blocks) -
+        calculateNestingDepth(right, workflowState.blocks)
+    )
+
+    sortedBlocks.forEach(([blockId, block]) => {
       if (!block || !block.type) {
         logger.warn(`Skipping invalid block: ${blockId}`)
         return
       }
 
-      const absolutePosition = calculateAbsolutePosition(block, workflowState.blocks)
+      const parentId = block.data?.parentId
+      const nestingDepth = calculateNestingDepth(block, workflowState.blocks)
 
       if (block.type === 'loop' || block.type === 'parallel') {
         const isSelected = selectedBlockId === blockId
@@ -391,9 +397,14 @@ export function PreviewWorkflow({
         nodeArray.push({
           id: blockId,
           type: 'subflowNode',
-          position: absolutePosition,
+          position: block.position,
+          parentId,
+          extent: block.data?.extent || undefined,
           draggable: false,
+          zIndex: nestingDepth,
+          className: parentId ? 'nested-subflow-node' : undefined,
           data: {
+            ...block.data,
             name: block.name,
             width: dimensions.width,
             height: dimensions.height,
@@ -430,9 +441,11 @@ export function PreviewWorkflow({
       nodeArray.push({
         id: blockId,
         type: nodeType,
-        position: absolutePosition,
+        position: block.position,
+        parentId,
+        extent: block.data?.extent || undefined,
         draggable: false,
-        zIndex: block.data?.parentId ? 10 : undefined,
+        zIndex: parentId ? 1000 : undefined,
         data: {
           type: block.type,
           name: block.name,

apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx

@@ -34,6 +34,15 @@ interface BlockExecutionData {
   childWorkflowSnapshotId?: string
 }
 
+function isPauseOutput(output: unknown): boolean {
+  return (
+    output !== null &&
+    typeof output === 'object' &&
+    '_pauseMetadata' in output &&
+    (output as Record<string, unknown>)._pauseMetadata !== undefined
+  )
+}
+
 /** Represents a level in the workflow navigation stack */
 interface WorkflowStackEntry {
   workflowState: WorkflowState
@@ -91,7 +100,7 @@ export function buildBlockExecutions(spans: TraceSpan[]): Record<string, BlockEx
       blockExecutionMap[span.blockId] = {
         input: redactApiKeys(span.input || {}),
         output: redactApiKeys(span.output || {}),
-        status: span.status || 'unknown',
+        status: isPauseOutput(span.output) ? 'pending' : span.status || 'unknown',
         durationMs: span.duration || 0,
         children: span.children,
         childWorkflowSnapshotId: span.childWorkflowSnapshotId,

apps/sim/executor/execution/block-executor.test.ts

@@ -232,4 +232,151 @@ describe('BlockExecutor', () => {
     expect(state.getBlockOutput('function-block-1__obranch-0')).toBeUndefined()
     expect(state.getBlockOutput('function-block-1₍0₎')).toBeUndefined()
   })
+
+  it('does not let block completion callbacks overtake pending start callbacks', async () => {
+    const block = createBlock()
+    const workflow: SerializedWorkflow = {
+      version: '1',
+      blocks: [block],
+      connections: [],
+      loops: {},
+      parallels: {},
+    }
+    const state = new ExecutionState()
+    const resolver = new VariableResolver(workflow, {}, state)
+    const output = { result: 'done' }
+    const execute = vi.fn(async () => {
+      events.push('execute')
+      return output
+    })
+    const handler: BlockHandler = {
+      canHandle: () => true,
+      execute,
+    }
+
+    const events: string[] = []
+    let resolveStart!: () => void
+    const startGate = new Promise<void>((resolve) => {
+      resolveStart = resolve
+    })
+    const onBlockStart = vi.fn(async () => {
+      events.push('start-called')
+      await startGate
+      events.push('start-done')
+    })
+    const onBlockComplete = vi.fn(async () => {
+      events.push('complete')
+    })
+
+    const executor = new BlockExecutor(
+      [handler],
+      resolver,
+      {
+        workspaceId: 'workspace-1',
+        executionId: 'execution-1',
+        userId: 'user-1',
+        metadata: {
+          requestId: 'request-1',
+          executionId: 'execution-1',
+          workflowId: 'workflow-1',
+          workspaceId: 'workspace-1',
+          userId: 'user-1',
+          triggerType: 'manual',
+          useDraftState: false,
+          startTime: new Date().toISOString(),
+        },
+        onBlockStart,
+        onBlockComplete,
+      },
+      state
+    )
+
+    const execution = executor.execute(createContext(state), createNode(block), block)
+
+    expect(onBlockStart).toHaveBeenCalled()
+    expect(execute).not.toHaveBeenCalled()
+    expect(onBlockComplete).not.toHaveBeenCalled()
+
+    resolveStart()
+
+    await execution
+    await vi.waitFor(() => {
+      expect(onBlockComplete).toHaveBeenCalled()
+    })
+    expect(events).toEqual(['start-called', 'start-done', 'execute', 'complete'])
+  })
+
+  it('fires block completion callbacks for pausing blocks so clients receive pause output', async () => {
+    const block = {
+      ...createBlock(),
+      id: 'hitl-block-1',
+      metadata: { id: BlockType.HUMAN_IN_THE_LOOP, name: 'Human in the Loop' },
+      config: { tool: BlockType.HUMAN_IN_THE_LOOP, params: {} },
+    }
+    const workflow: SerializedWorkflow = {
+      version: '1',
+      blocks: [block],
+      connections: [],
+      loops: {},
+      parallels: {},
+    }
+    const state = new ExecutionState()
+    const resolver = new VariableResolver(workflow, {}, state)
+    const output = {
+      response: { status: 'paused' },
+      _pauseMetadata: {
+        contextId: 'pause-context-1',
+        blockId: block.id,
+        response: { status: 'paused' },
+        timestamp: new Date().toISOString(),
+        pauseKind: 'human' as const,
+      },
+    }
+    const handler: BlockHandler = {
+      canHandle: () => true,
+      execute: async () => output,
+    }
+    const onBlockStart = vi.fn(async () => {})
+    const onBlockComplete = vi.fn(async () => {})
+
+    const executor = new BlockExecutor(
+      [handler],
+      resolver,
+      {
+        workspaceId: 'workspace-1',
+        executionId: 'execution-1',
+        userId: 'user-1',
+        metadata: {
+          requestId: 'request-1',
+          executionId: 'execution-1',
+          workflowId: 'workflow-1',
+          workspaceId: 'workspace-1',
+          userId: 'user-1',
+          triggerType: 'manual',
+          useDraftState: false,
+          startTime: new Date().toISOString(),
+        },
+        onBlockStart,
+        onBlockComplete,
+      },
+      state
+    )
+
+    await executor.execute(createContext(state), createNode(block), block)
+
+    expect(onBlockStart).toHaveBeenCalled()
+    expect(onBlockComplete).toHaveBeenCalledWith(
+      block.id,
+      'Human in the Loop',
+      BlockType.HUMAN_IN_THE_LOOP,
+      expect.objectContaining({
+        output: expect.objectContaining({
+          response: { status: 'paused' },
+        }),
+      }),
+      undefined,
+      undefined
+    )
+    expect(state.getBlockOutput(block.id)).toEqual(output)
+  })
 })