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(