feat(executor): support nested loop execution and canvas nesting

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

@@ -825,6 +825,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,
@@ -881,6 +884,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,
@@ -912,6 +918,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,62 +1167,63 @@ 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 findAncestorLoops = (targetId: string) => {
+      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,
+            })
+          }
+          findAncestorLoops(loopId)
+        }
+      }
+    }
 
     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`)
-        }
-
-        loopBlockGroup = {
-          blockName: loopBlockName,
-          blockId: loopId,
-          blockType: 'loop',
-          tags: contextualTags,
-          distance: 0,
-          isContextual: true,
-        }
+        })
       }
+      findAncestorLoops(blockId)
+    } else {
+      findAncestorLoops(blockId)
     }
 
     let parallelBlockGroup: BlockTagGroup | null = null
@@ -1275,7 +1276,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
       if (!blockConfig) {
         if (accessibleBlock.type === 'loop' || accessibleBlock.type === 'parallel') {
           if (
-            accessibleBlockId === containingLoopBlockId ||
+            ancestorLoopIds.has(accessibleBlockId) ||
             accessibleBlockId === containingParallelBlockId
           ) {
             continue
@@ -1366,9 +1367,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     }
 
     const finalBlockTagGroups: BlockTagGroup[] = []
-    if (loopBlockGroup) {
-      finalBlockTagGroups.push(loopBlockGroup)
-    }
+    finalBlockTagGroups.push(...loopBlockGroups)
     if (parallelBlockGroup) {
       finalBlockTagGroups.push(parallelBlockGroup)
     }
@@ -1570,21 +1569,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,11 +77,7 @@ 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 handleDragEnd = useCallback(() => {}, [])
 
   const handleClick = useCallback(() => {
     onClick(item.type, isTriggerCapable)

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

@@ -60,6 +60,7 @@ import { openCopilotWithMessage } from '@/stores/notifications/utils'
 import type { ConsoleEntry } from '@/stores/terminal'
 import { useTerminalConsoleStore, useTerminalStore } from '@/stores/terminal'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 /**
  * Terminal height configuration constants
@@ -279,12 +280,11 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
     children.some((c) => c.entry.isCanceled || c.children.some((gc) => gc.entry.isCanceled)) &&
     !hasRunningDescendant
 
-  const displayName =
-    entry.blockType === 'loop'
-      ? 'Loop'
-      : entry.blockType === 'parallel'
-        ? 'Parallel'
-        : entry.blockName
+  const containerId = entry.iterationContainerId
+  const storeBlockName = useWorkflowStore(
+    (state) => (containerId ? state.blocks[containerId]?.name : undefined)
+  )
+  const displayName = storeBlockName || entry.blockName
 
   return (
     <div className='flex min-w-0 flex-col'>