fix(subflows): subflow-child selection issues, subflow error logs

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

@@ -168,7 +168,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
  <ActionBar blockId={id} blockType={data.kind} disabled={!userPermissions.canEdit} />
  )}
 
- {/* Header Section — only interactive area for dragging */}
+ {/* Header Section */}
  <div
  onClick={() => setCurrentBlockId(id)}
  className='workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
@@ -198,14 +198,15 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
  </div>
 
  {/*
- * Subflow body background. Uses pointer-events: none so that edges rendered
- * inside the subflow remain clickable. The subflow node wrapper also has
- * pointer-events: none (set in workflow.tsx), so body-area clicks pass
- * through to the pane. Subflow selection is done via the header above.
+ * Subflow body background. Captures clicks to select the subflow in the
+ * panel editor, matching the header click behavior. Child nodes and edges
+ * are rendered as sibling divs at the viewport level by ReactFlow (not as
+ * DOM children), so enabling pointer events here doesn't block them.
  */}
  <div
- className='absolute inset-0 top-[44px] rounded-b-[8px]'
- style={{ pointerEvents: 'none' }}
+ className='workflow-drag-handle absolute inset-0 top-[44px] cursor-grab rounded-b-[8px] [&:active]:cursor-grabbing'
+ style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
+ onClick={() => setCurrentBlockId(id)}
  />
 
  {!isPreview && (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/workflow-canvas-helpers.ts

@@ -221,3 +221,68 @@ export function resolveParentChildSelectionConflicts(
 
  return hasConflict ? resolved : nodes
 }
+
+export function getNodeSelectionContextId(
+ node: Pick<Node, 'id' | 'parentId'>,
+ blocks: Record<string, { data?: { parentId?: string } }>
+): string | null {
+ return node.parentId || blocks[node.id]?.data?.parentId || null
+}
+
+export function getEdgeSelectionContextId(
+ edge: Pick<Edge, 'source' | 'target'>,
+ nodes: Array<Pick<Node, 'id' | 'parentId'>>,
+ blocks: Record<string, { data?: { parentId?: string } }>
+): string | null {
+ const sourceNode = nodes.find((node) => node.id === edge.source)
+ const targetNode = nodes.find((node) => node.id === edge.target)
+ const sourceContextId = sourceNode ? getNodeSelectionContextId(sourceNode, blocks) : null
+ const targetContextId = targetNode ? getNodeSelectionContextId(targetNode, blocks) : null
+ if (sourceContextId) return sourceContextId
+ if (targetContextId) return targetContextId
+ return null
+}
+
+export function resolveSelectionContextConflicts(
+ nodes: Node[],
+ blocks: Record<string, { data?: { parentId?: string } }>,
+ preferredContextId?: string | null
+): Node[] {
+ const selectedNodes = nodes.filter((node) => node.selected)
+ if (selectedNodes.length <= 1) return nodes
+
+ const allowedContextId =
+ preferredContextId !== undefined
+ ? preferredContextId
+ : getNodeSelectionContextId(selectedNodes[0], blocks)
+ let hasConflict = false
+
+ const resolved = nodes.map((node) => {
+ if (!node.selected) return node
+ const contextId = getNodeSelectionContextId(node, blocks)
+ if (contextId !== allowedContextId) {
+ hasConflict = true
+ return { ...node, selected: false }
+ }
+ return node
+ })
+
+ return hasConflict ? resolved : nodes
+}
+
+export function resolveSelectionConflicts(
+ nodes: Node[],
+ blocks: Record<string, { data?: { parentId?: string } }>,
+ preferredNodeId?: string
+): Node[] {
+ const afterParentChild = resolveParentChildSelectionConflicts(nodes, blocks)
+
+ const preferredContextId =
+ preferredNodeId !== undefined
+ ? afterParentChild.find((n) => n.id === preferredNodeId && n.selected)
+ ? getNodeSelectionContextId(afterParentChild.find((n) => n.id === preferredNodeId)!, blocks)
+ : undefined
+ : undefined
+
+ return resolveSelectionContextConflicts(afterParentChild, blocks, preferredContextId)
+}

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

@@ -59,11 +59,13 @@ import {
  filterProtectedBlocks,
  getClampedPositionForNode,
  getDescendantBlockIds,
+ getEdgeSelectionContextId,
+ getNodeSelectionContextId,
  getWorkflowLockToggleIds,
  isBlockProtected,
  isEdgeProtected,
  isInEditableElement,
-resolveParentChildSelectionConflicts,
+resolveSelectionConflicts,
  validateTriggerPaste,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
@@ -168,16 +170,17 @@ function mapEdgesByNode(edges: Edge[], nodeIds: Set<string>): Map<string, Edge[]
 
 /**
  * Syncs the panel editor with the current selection state.
- * Shows block details when exactly one block is selected, clears otherwise.
+ * Shows the last selected block in the panel. Clears when nothing is selected.
  */
 function syncPanelWithSelection(selectedIds: string[]) {
  const { currentBlockId, clearCurrentBlock, setCurrentBlockId } = usePanelEditorStore.getState()
- if (selectedIds.length === 1 && selectedIds[0] !== currentBlockId) {
- setCurrentBlockId(selectedIds[0])
- } else if (selectedIds.length === 0 && currentBlockId) {
- clearCurrentBlock()
- } else if (selectedIds.length > 1 && currentBlockId) {
- clearCurrentBlock()
+ if (selectedIds.length === 0) {
+ if (currentBlockId) clearCurrentBlock()
+ } else {
+ const lastSelectedId = selectedIds[selectedIds.length - 1]
+ if (lastSelectedId !== currentBlockId) {
+ setCurrentBlockId(lastSelectedId)
+ }
  }
 }
 
@@ -246,7 +249,6 @@ const WorkflowContent = React.memo(
  const [selectedEdges, setSelectedEdges] = useState<SelectedEdgesMap>(new Map())
  const [isErrorConnectionDrag, setIsErrorConnectionDrag] = useState(false)
  const canvasContainerRef = useRef<HTMLDivElement>(null)
- const selectedIdsRef = useRef<string[] | null>(null)
  const embeddedFitFrameRef = useRef<number | null>(null)
  const hasCompletedInitialEmbeddedFitRef = useRef(false)
  const canvasMode = useCanvasModeStore((state) => state.mode)
@@ -2477,6 +2479,16 @@ const WorkflowContent = React.memo(
  // Local state for nodes - allows smooth drag without store updates on every frame
  const [displayNodes, setDisplayNodes] = useState<Node[]>([])
 
+ const selectedNodeIds = useMemo(
+ () => displayNodes.filter((node) => node.selected).map((node) => node.id),
+ [displayNodes]
+ )
+ const selectedNodeIdsKey = selectedNodeIds.join(',')
+
+ useEffect(() => {
+ syncPanelWithSelection(selectedNodeIds)
+ }, [selectedNodeIdsKey])
+
  useEffect(() => {
  // Check for pending selection (from paste/duplicate), otherwise preserve existing selection
  if (pendingSelection && pendingSelection.length > 0) {
@@ -2488,10 +2500,8 @@ const WorkflowContent = React.memo(
  ...node,
  selected: pendingSet.has(node.id),
  }))
- const resolved = resolveParentChildSelectionConflicts(withSelection, blocks)
+ const resolved = resolveSelectionConflicts(withSelection, blocks)
  setDisplayNodes(resolved)
- const selectedIds = resolved.filter((node) => node.selected).map((node) => node.id)
- syncPanelWithSelection(selectedIds)
  return
  }
 
@@ -2709,19 +2719,20 @@ const WorkflowContent = React.memo(
  /** Handles node changes - applies changes and resolves parent-child selection conflicts. */
  const onNodesChange = useCallback(
  (changes: NodeChange[]) => {
- selectedIdsRef.current = null
- setDisplayNodes((nds) => {
- const updated = applyNodeChanges(changes, nds)
- const hasSelectionChange = changes.some((c) => c.type === 'select')
+ const hasSelectionChange = changes.some((c) => c.type === 'select')
+ setDisplayNodes((currentNodes) => {
+ const updated = applyNodeChanges(changes, currentNodes)
  if (!hasSelectionChange) return updated
- const resolved = resolveParentChildSelectionConflicts(updated, blocks)
- selectedIdsRef.current = resolved.filter((node) => node.selected).map((node) => node.id)
- return resolved
+
+ const preferredNodeId = [...changes]
+ .reverse()
+ .find(
+ (change): change is NodeChange & { id: string; selected: boolean } =>
+ change.type === 'select' && 'selected' in change && change.selected === true
+ )?.id
+
+ return resolveSelectionConflicts(updated, blocks, preferredNodeId)
  })
- const selectedIds = selectedIdsRef.current as string[] | null
- if (selectedIds !== null) {
- syncPanelWithSelection(selectedIds)
- }
 
  // Handle position changes (e.g., from keyboard arrow key movement)
  // Update container dimensions when child nodes are moved and persist to backend
@@ -3160,7 +3171,10 @@ const WorkflowContent = React.memo(
  parentId: currentParentId,
  })
 
- // Capture all selected nodes' positions for multi-node undo/redo
+ // Capture all selected nodes' positions for multi-node undo/redo.
+ // Also include the dragged node itself — during shift+click+drag, ReactFlow
+ // may have toggled (deselected) the node before drag starts, so it might not
+ // appear in the selected set yet.
  const allNodes = getNodes()
  const selectedNodes = allNodes.filter((n) => n.selected)
  multiNodeDragStartRef.current.clear()
@@ -3174,6 +3188,33 @@ const WorkflowContent = React.memo(
  })
  }
  })
+ if (!multiNodeDragStartRef.current.has(node.id)) {
+ multiNodeDragStartRef.current.set(node.id, {
+ x: node.position.x,
+ y: node.position.y,
+ parentId: currentParentId ?? undefined,
+ })
+ }
+
+ // When shift+clicking an already-selected node, ReactFlow toggles (deselects)
+ // it via onNodesChange before drag starts. Re-select the dragged node so all
+ // previously selected nodes move together as a group — but only if the
+ // deselection wasn't from a parent-child conflict (e.g. dragging a child
+ // when its parent subflow is selected).
+ const draggedNodeInSelected = allNodes.find((n) => n.id === node.id)
+ if (draggedNodeInSelected && !draggedNodeInSelected.selected && selectedNodes.length > 0) {
+ const draggedParentId = blocks[node.id]?.data?.parentId
+ const parentIsSelected =
+ draggedParentId && selectedNodes.some((n) => n.id === draggedParentId)
+ const contextMismatch =
+ getNodeSelectionContextId(draggedNodeInSelected, blocks) !==
+ getNodeSelectionContextId(selectedNodes[0], blocks)
+ if (!parentIsSelected && !contextMismatch) {
+ setDisplayNodes((currentNodes) =>
+ currentNodes.map((n) => (n.id === node.id ? { ...n, selected: true } : n))
+ )
+ }
+ }
  },
  [blocks, setDragStartPosition, getNodes, setPotentialParentId]
  )
@@ -3453,7 +3494,7 @@ const WorkflowContent = React.memo(
  })
 
  // Apply visual deselection of children
- setDisplayNodes((allNodes) => resolveParentChildSelectionConflicts(allNodes, blocks))
+ setDisplayNodes((allNodes) => resolveSelectionConflicts(allNodes, blocks))
  },
  [blocks]
  )
@@ -3604,36 +3645,36 @@ const WorkflowContent = React.memo(
 
  /**
  * Handles node click to select the node in ReactFlow.
- * Parent-child conflict resolution happens automatically in onNodesChange.
+ * Uses the controlled display node state so parent-child conflicts are resolved
+ * consistently for click, shift-click, and marquee selection.
  */
  const handleNodeClick = useCallback(
  (event: React.MouseEvent, node: Node) => {
  const isMultiSelect = event.shiftKey || event.metaKey || event.ctrlKey
- setNodes((nodes) =>
- nodes.map((n) => ({
- ...n,
- selected: isMultiSelect ? (n.id === node.id ? true : n.selected) : n.id === node.id,
+ setDisplayNodes((currentNodes) => {
+ const updated = currentNodes.map((currentNode) => ({
+ ...currentNode,
+ selected: isMultiSelect
+ ? currentNode.id === node.id
+ ? true
+ : currentNode.selected
+ : currentNode.id === node.id,
  }))
- )
+ return resolveSelectionConflicts(updated, blocks, isMultiSelect ? node.id : undefined)
+ })
  },
- [setNodes]
+ [blocks]
  )
 
  /** Handles edge selection with container context tracking and Shift-click multi-selection. */
  const onEdgeClick = useCallback(
  (event: React.MouseEvent, edge: any) => {
  event.stopPropagation() // Prevent bubbling
 
- // Determine if edge is inside a loop by checking its source/target nodes
- const sourceNode = getNodes().find((n) => n.id === edge.source)
- const targetNode = getNodes().find((n) => n.id === edge.target)
-
- // An edge is inside a loop if either source or target has a parent
- // If source and target have different parents, prioritize source's parent
- const parentLoopId = sourceNode?.parentId || targetNode?.parentId
-
- // Create a unique identifier that combines edge ID and parent context
- const contextId = `${edge.id}${parentLoopId ? `-${parentLoopId}` : ''}`
+ const contextId = `${edge.id}${(() => {
+ const selectionContextId = getEdgeSelectionContextId(edge, getNodes(), blocks)
+ return selectionContextId ? `-${selectionContextId}` : ''
+ })()}`
 
  if (event.shiftKey) {
  // Shift-click: toggle edge in selection
@@ -3651,7 +3692,7 @@ const WorkflowContent = React.memo(
  setSelectedEdges(new Map([[contextId, edge.id]]))
  }
  },
- [getNodes]
+ [blocks, getNodes]
  )
 
  /** Stable delete handler to avoid creating new function references per edge. */

apps/sim/executor/dag/builder.test.ts

@@ -92,6 +92,57 @@ describe('DAGBuilder disabled subflow validation', () => {
  // Should not throw - loop is effectively disabled since all inner blocks are disabled
  expect(() => builder.build(workflow)).not.toThrow()
  })
+
+ it('does not mutate serialized loop config nodes during DAG build', () => {
+ const workflow: SerializedWorkflow = {
+ version: '1',
+ blocks: [
+ createBlock('start', BlockType.STARTER),
+ createBlock('loop-1', BlockType.LOOP),
+ { ...createBlock('inner-block', BlockType.FUNCTION), enabled: false },
+ ],
+ connections: [{ source: 'start', target: 'loop-1' }],
+ loops: {
+ 'loop-1': {
+ id: 'loop-1',
+ nodes: ['inner-block'],
+ iterations: 3,
+ },
+ },
+ parallels: {},
+ }
+
+ const builder = new DAGBuilder()
+ builder.build(workflow)
+
+ expect(workflow.loops?.['loop-1']?.nodes).toEqual(['inner-block'])
+ })
+
+ it('does not mutate serialized parallel config nodes during DAG build', () => {
+ const workflow: SerializedWorkflow = {
+ version: '1',
+ blocks: [
+ createBlock('start', BlockType.STARTER),
+ createBlock('parallel-1', BlockType.PARALLEL),
+ { ...createBlock('inner-block', BlockType.FUNCTION), enabled: false },
+ ],
+ connections: [{ source: 'start', target: 'parallel-1' }],
+ loops: {},
+ parallels: {
+ 'parallel-1': {
+ id: 'parallel-1',
+ nodes: ['inner-block'],
+ count: 2,
+ parallelType: 'count',
+ },
+ },
+ }
+
+ const builder = new DAGBuilder()
+ builder.build(workflow)
+
+ expect(workflow.parallels?.['parallel-1']?.nodes).toEqual(['inner-block'])
+ })
 })
 
 describe('DAGBuilder nested parallel support', () => {