improvement(executor): support nested loops/parallels

apps/sim/app/_styles/globals.css

@@ -833,15 +833,7 @@ input[type="search"]::-ms-clear {
  animation: growShrink 1.5s infinite ease-in-out;
 }
 
-/* Subflow node z-index and drag-over styles */
-.workflow-container .react-flow__node-subflowNode {
- z-index: -1 !important;
-}
-
-.workflow-container .react-flow__node-subflowNode:has([data-subflow-selected="true"]) {
- z-index: 10 !important;
-}
-
+/* Subflow node drag-over styles */
 .loop-node-drag-over,
 .parallel-node-drag-over {
  box-shadow: 0 0 0 1.75px var(--brand-secondary) !important;

apps/sim/app/api/workflows/[id]/execute/route.ts

@@ -828,6 +828,9 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
  iterationTotal: iterationContext.iterationTotal,
  iterationType: iterationContext.iterationType,
  iterationContainerId: iterationContext.iterationContainerId,
+ ...(iterationContext.parentIterations?.length && {
+ parentIterations: iterationContext.parentIterations,
+ }),
  }),
  ...(childWorkflowContext && {
  childWorkflowBlockId: childWorkflowContext.parentBlockId,
@@ -884,6 +887,9 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
  iterationTotal: iterationContext.iterationTotal,
  iterationType: iterationContext.iterationType,
  iterationContainerId: iterationContext.iterationContainerId,
+ ...(iterationContext.parentIterations?.length && {
+ parentIterations: iterationContext.parentIterations,
+ }),
  }),
  ...childWorkflowData,
  ...instanceData,
@@ -915,6 +921,9 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
  iterationTotal: iterationContext.iterationTotal,
  iterationType: iterationContext.iterationType,
  iterationContainerId: iterationContext.iterationContainerId,
+ ...(iterationContext.parentIterations?.length && {
+ parentIterations: iterationContext.parentIterations,
+ }),
  }),
  ...childWorkflowData,
  ...instanceData,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx

@@ -1167,93 +1167,122 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
  {} as Record<string, { type: string; id: string }>
  )
 
- let loopBlockGroup: BlockTagGroup | null = null
+ const loopBlockGroups: BlockTagGroup[] = []
+ const ancestorLoopIds = new Set<string>()
+ const visitedContainerIds = new Set<string>()
+
+ const findAncestorContainers = (targetId: string) => {
+ if (visitedContainerIds.has(targetId)) return
+ visitedContainerIds.add(targetId)
+
+ // Check if targetId is directly inside any loop
+ for (const [loopId, loop] of Object.entries(loops)) {
+ if (loop.nodes.includes(targetId) && !ancestorLoopIds.has(loopId)) {
+ ancestorLoopIds.add(loopId)
+ const loopBlock = blocks[loopId]
+ if (loopBlock) {
+ const loopType = loop.loopType || 'for'
+ const loopBlockName = loopBlock.name || loopBlock.type
+ const normalizedLoopName = normalizeName(loopBlockName)
+ const contextualTags: string[] = [`${normalizedLoopName}.index`]
+ if (loopType === 'forEach') {
+ contextualTags.push(`${normalizedLoopName}.currentItem`)
+ contextualTags.push(`${normalizedLoopName}.items`)
+ }
+ loopBlockGroups.push({
+ blockName: loopBlockName,
+ blockId: loopId,
+ blockType: 'loop',
+ tags: contextualTags,
+ distance: 0,
+ isContextual: true,
+ })
+ }
+ findAncestorContainers(loopId)
+ }
+ }
+ // Also walk through containing parallels so we find loops that contain
+ // the parallel (e.g. block inside parallel inside loop)
+ for (const [parallelId, parallel] of Object.entries(parallels || {})) {
+ if (parallel.nodes.includes(targetId)) {
+ findAncestorContainers(parallelId)
+ }
+ }
+ }
 
  const isLoopBlock = blocks[blockId]?.type === 'loop'
- const currentLoop = isLoopBlock ? loops[blockId] : null
-
- const containingLoop = Object.entries(loops).find(([_, loop]) => loop.nodes.includes(blockId))
-
- let containingLoopBlockId: string | null = null
-
- if (currentLoop && isLoopBlock) {
- containingLoopBlockId = blockId
- const loopType = currentLoop.loopType || 'for'
-
+ if (isLoopBlock && loops[blockId]) {
+ const loop = loops[blockId]
+ ancestorLoopIds.add(blockId)
  const loopBlock = blocks[blockId]
  if (loopBlock) {
+ const loopType = loop.loopType || 'for'
  const loopBlockName = loopBlock.name || loopBlock.type
  const normalizedLoopName = normalizeName(loopBlockName)
  const contextualTags: string[] = [`${normalizedLoopName}.index`]
  if (loopType === 'forEach') {
  contextualTags.push(`${normalizedLoopName}.currentItem`)
  contextualTags.push(`${normalizedLoopName}.items`)
  }
-
- loopBlockGroup = {
+ loopBlockGroups.push({
  blockName: loopBlockName,
  blockId: blockId,
  blockType: 'loop',
  tags: contextualTags,
  distance: 0,
  isContextual: true,
- }
+ })
  }
- } else if (containingLoop) {
- const [loopId, loop] = containingLoop
- containingLoopBlockId = loopId
- const loopType = loop.loopType || 'for'
-
- const containingLoopBlock = blocks[loopId]
- if (containingLoopBlock) {
- const loopBlockName = containingLoopBlock.name || containingLoopBlock.type
- const normalizedLoopName = normalizeName(loopBlockName)
- const contextualTags: string[] = [`${normalizedLoopName}.index`]
- if (loopType === 'forEach') {
- contextualTags.push(`${normalizedLoopName}.currentItem`)
- contextualTags.push(`${normalizedLoopName}.items`)
- }
+ findAncestorContainers(blockId)
+ } else {
+ findAncestorContainers(blockId)
+ }
 
- loopBlockGroup = {
- blockName: loopBlockName,
- blockId: loopId,
- blockType: 'loop',
- tags: contextualTags,
- distance: 0,
- isContextual: true,
+ const parallelBlockGroups: BlockTagGroup[] = []
+ const ancestorParallelIds = new Set<string>()
+ const visitedParallelTargets = new Set<string>()
+
+ const findAncestorParallels = (targetId: string) => {
+ if (visitedParallelTargets.has(targetId)) return
+ visitedParallelTargets.add(targetId)
+
+ for (const [parallelId, parallel] of Object.entries(parallels || {})) {
+ if (parallel.nodes.includes(targetId) && !ancestorParallelIds.has(parallelId)) {
+ ancestorParallelIds.add(parallelId)
+ const parallelBlock = blocks[parallelId]
+ if (parallelBlock) {
+ const parallelType = parallel.parallelType || 'count'
+ const parallelBlockName = parallelBlock.name || parallelBlock.type
+ const normalizedParallelName = normalizeName(parallelBlockName)
+ const contextualTags: string[] = [`${normalizedParallelName}.index`]
+ if (parallelType === 'collection') {
+ contextualTags.push(`${normalizedParallelName}.currentItem`)
+ contextualTags.push(`${normalizedParallelName}.items`)
+ }
+ parallelBlockGroups.push({
+ blockName: parallelBlockName,
+ blockId: parallelId,
+ blockType: 'parallel',
+ tags: contextualTags,
+ distance: 0,
+ isContextual: true,
+ })
+ }
+ // Walk up through containing loops and parallels
+ for (const [loopId, loop] of Object.entries(loops)) {
+ if (loop.nodes.includes(parallelId)) {
+ findAncestorParallels(loopId)
+ }
+ }
+ findAncestorParallels(parallelId)
  }
  }
  }
 
- let parallelBlockGroup: BlockTagGroup | null = null
- const containingParallel = Object.entries(parallels || {}).find(([_, parallel]) =>
- parallel.nodes.includes(blockId)
- )
- let containingParallelBlockId: string | null = null
- if (containingParallel) {
- const [parallelId, parallel] = containingParallel
- containingParallelBlockId = parallelId
- const parallelType = parallel.parallelType || 'count'
-
- const containingParallelBlock = blocks[parallelId]
- if (containingParallelBlock) {
- const parallelBlockName = containingParallelBlock.name || containingParallelBlock.type
- const normalizedParallelName = normalizeName(parallelBlockName)
- const contextualTags: string[] = [`${normalizedParallelName}.index`]
- if (parallelType === 'collection') {
- contextualTags.push(`${normalizedParallelName}.currentItem`)
- contextualTags.push(`${normalizedParallelName}.items`)
- }
-
- parallelBlockGroup = {
- blockName: parallelBlockName,
- blockId: parallelId,
- blockType: 'parallel',
- tags: contextualTags,
- distance: 0,
- isContextual: true,
- }
- }
+ findAncestorParallels(blockId)
+ // Also check through ancestor loops (a block in a loop that's in a parallel)
+ for (const loopId of ancestorLoopIds) {
+ findAncestorParallels(loopId)
  }
 
  const blockTagGroups: BlockTagGroup[] = []
@@ -1275,8 +1304,8 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
  if (!blockConfig) {
  if (accessibleBlock.type === 'loop' || accessibleBlock.type === 'parallel') {
  if (
- accessibleBlockId === containingLoopBlockId ||
- accessibleBlockId === containingParallelBlockId
+ancestorLoopIds.has(accessibleBlockId) ||
+ancestorParallelIds.has(accessibleBlockId)
  ) {
  continue
  }
@@ -1366,12 +1395,8 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
  }
 
  const finalBlockTagGroups: BlockTagGroup[] = []
- if (loopBlockGroup) {
- finalBlockTagGroups.push(loopBlockGroup)
- }
- if (parallelBlockGroup) {
- finalBlockTagGroups.push(parallelBlockGroup)
- }
+ finalBlockTagGroups.push(...loopBlockGroups)
+ finalBlockTagGroups.push(...parallelBlockGroups)
 
  blockTagGroups.sort((a, b) => a.distance - b.distance)
  finalBlockTagGroups.push(...blockTagGroups)
@@ -1570,21 +1595,6 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
  if (variableObj) {
  processedTag = tag
  }
- } else if (
- blockGroup?.isContextual &&
- (blockGroup.blockType === 'loop' || blockGroup.blockType === 'parallel')
- ) {
- const tagParts = tag.split('.')
- if (tagParts.length === 1) {
- processedTag = blockGroup.blockType
- } else {
- const lastPart = tagParts[tagParts.length - 1]
- if (['index', 'currentItem', 'items'].includes(lastPart)) {
- processedTag = `${blockGroup.blockType}.${lastPart}`
- } else {
- processedTag = tag
- }
- }
  }
 
  let newValue: string

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx

@@ -67,9 +67,6 @@ const ToolbarItem = memo(function ToolbarItem({
 
  const handleDragStart = useCallback(
  (e: React.DragEvent<HTMLElement>) => {
- if (!isTrigger && (item.type === 'loop' || item.type === 'parallel')) {
- document.body.classList.add('sim-drag-subflow')
- }
  const iconElement = e.currentTarget.querySelector('.toolbar-item-icon')
  onDragStart(e, item.type, isTriggerCapable, {
  name: item.name,
@@ -80,12 +77,6 @@ const ToolbarItem = memo(function ToolbarItem({
  [item.type, item.name, item.bgColor, isTriggerCapable, onDragStart, isTrigger]
  )
 
- const handleDragEnd = useCallback(() => {
- if (!isTrigger) {
- document.body.classList.remove('sim-drag-subflow')
- }
- }, [isTrigger])
-
  const handleClick = useCallback(() => {
  onClick(item.type, isTriggerCapable)
  }, [item.type, isTriggerCapable, onClick])
@@ -114,7 +105,6 @@ const ToolbarItem = memo(function ToolbarItem({
  tabIndex={-1}
  draggable
  onDragStart={handleDragStart}
- onDragEnd={handleDragEnd}
  onClick={handleClick}
  onContextMenu={handleContextMenu}
  className={clsx(