fix(subflows): enable nested subflow interaction and execution highlighting

Remove !important z-index overrides that prevented nested subflows from
being grabbed/dragged independently. Z-index is now managed by ReactFlow's
elevateNodesOnSelect and per-node zIndex: depth props. Also adds execution
status highlighting for nested subflows in both canvas and snapshot preview.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: waleedlatif1

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/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx

@@ -1240,8 +1240,12 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
 
     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)

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

@@ -8,6 +8,7 @@ import { type DiffStatus, hasDiffStatus } from '@/lib/workflows/diff/types'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { useLastRunPath } from '@/stores/execution'
 import { usePanelEditorStore } from '@/stores/panel'
 
 /**
@@ -23,6 +24,8 @@ export interface SubflowNodeData {
   isPreviewSelected?: boolean
   kind: 'loop' | 'parallel'
   name?: string
+  /** Execution status passed by preview/snapshot views */
+  executionStatus?: 'success' | 'error' | 'not-executed'
 }
 
 /**
@@ -56,6 +59,15 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
 
   const isPreviewSelected = data?.isPreviewSelected || false
 
+  const lastRunPath = useLastRunPath()
+  const executionStatus = data.executionStatus
+  const runPathStatus: 'success' | 'error' | undefined =
+    executionStatus === 'success' || executionStatus === 'error'
+      ? executionStatus
+      : isPreview
+        ? undefined
+        : lastRunPath.get(id)
+
   /**
    * Calculate the nesting level of this subflow node based on its parent hierarchy.
    * Used to apply appropriate styling for nested containers.
@@ -105,32 +117,57 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
    * Determine the ring styling based on subflow state priority:
    * 1. Focused (selected in editor), selected (shift-click/box), or preview selected - blue ring
    * 2. Diff status (version comparison) - green/orange ring
+   * 3. Run path status (execution result) - green/red ring
    */
   const isSelected = !isPreview && selected
   const hasRing =
-    isFocused || isSelected || isPreviewSelected || diffStatus === 'new' || diffStatus === 'edited'
-  const ringStyles = cn(
-    hasRing && 'ring-[1.75px]',
-    (isFocused || isSelected || isPreviewSelected) && 'ring-[var(--brand-secondary)]',
-    diffStatus === 'new' && 'ring-[var(--brand-tertiary-2)]',
-    diffStatus === 'edited' && 'ring-[var(--warning)]'
-  )
+    isFocused ||
+    isSelected ||
+    isPreviewSelected ||
+    diffStatus === 'new' ||
+    diffStatus === 'edited' ||
+    !!runPathStatus
+  /**
+   * Compute the outline color for the subflow ring.
+   * Uses CSS outline instead of box-shadow ring because in ReactFlow v11,
+   * child nodes are DOM children of parent nodes and paint over the parent's
+   * internal ring overlay. Outline renders on the element's own compositing
+   * layer, so it stays visible above nested child nodes.
+   */
+  const outlineColor = hasRing
+    ? isFocused || isSelected || isPreviewSelected
+      ? 'var(--brand-secondary)'
+      : diffStatus === 'new'
+        ? 'var(--brand-tertiary-2)'
+        : diffStatus === 'edited'
+          ? 'var(--warning)'
+          : runPathStatus === 'success'
+            ? executionStatus
+              ? 'var(--brand-tertiary-2)'
+              : 'var(--border-success)'
+            : runPathStatus === 'error'
+              ? 'var(--text-error)'
+              : undefined
+    : undefined
 
   return (
     <div className='group relative'>
       <div
         ref={blockRef}
-        onClick={() => setCurrentBlockId(id)}
         className={cn(
-          'workflow-drag-handle relative cursor-grab select-none rounded-[8px] border border-[var(--border-1)] [&:active]:cursor-grabbing',
-          'transition-block-bg transition-ring'
+          'relative select-none rounded-[8px] border border-[var(--border-1)]',
+          'transition-block-bg'
         )}
         style={{
           width: data.width || 500,
           height: data.height || 300,
           position: 'relative',
           overflow: 'visible',
-          pointerEvents: isPreview ? 'none' : 'all',
+          pointerEvents: 'none',
+          ...(outlineColor && {
+            outline: `1.75px solid ${outlineColor}`,
+            outlineOffset: '-1px',
+          }),
         }}
         data-node-id={id}
         data-type='subflowNode'
@@ -141,11 +178,13 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
           <ActionBar blockId={id} blockType={data.kind} disabled={!userPermissions.canEdit} />
         )}
 
-        {/* Header Section */}
+        {/* Header Section — only interactive area for dragging */}
         <div
+          onClick={() => setCurrentBlockId(id)}
           className={cn(
-            'flex items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px]'
+            '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'
           )}
+          style={{ pointerEvents: 'auto' }}
         >
           <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
             <div
@@ -182,7 +221,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
           data-dragarea='true'
           style={{
             position: 'relative',
-            pointerEvents: isPreview ? 'none' : 'auto',
+            pointerEvents: 'none',
           }}
         >
           {/* Subflow Start */}
@@ -232,12 +271,6 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
           }}
           id={endHandleId}
         />
-
-        {hasRing && (
-          <div
-            className={cn('pointer-events-none absolute inset-0 z-40 rounded-[8px]', ringStyles)}
-          />
-        )}
       </div>
     </div>
   )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

@@ -32,6 +32,7 @@ import type {
 } from '@/executor/types'
 import { hasExecutionResult } from '@/executor/utils/errors'
 import { coerceValue } from '@/executor/utils/start-block'
+import { stripCloneSuffixes } from '@/executor/utils/subflow-utils'
 import { subscriptionKeys } from '@/hooks/queries/subscription'
 import { useExecutionStream } from '@/hooks/use-execution-stream'
 import { WorkflowValidationError } from '@/serializer'
@@ -486,14 +487,23 @@ export function useWorkflowExecution() {
         if (isStaleExecution()) return
         updateActiveBlocks(data.blockId, false)
         if (workflowId) setBlockRunStatus(workflowId, data.blockId, 'success')
-
         executedBlockIds.add(data.blockId)
         accumulatedBlockStates.set(data.blockId, {
           output: data.output,
           executed: true,
           executionTime: data.durationMs,
         })
 
+        // For nested containers, the SSE blockId may be a cloned ID (e.g. P1__obranch-0).
+        // Also record the original workflow-level ID so the canvas can highlight it.
+        if (isContainerBlockType(data.blockType)) {
+          const originalId = stripCloneSuffixes(data.blockId)
+          if (originalId !== data.blockId) {
+            executedBlockIds.add(originalId)
+            if (workflowId) setBlockRunStatus(workflowId, originalId, 'success')
+          }
+        }
+
         if (isContainerBlockType(data.blockType) && !data.iterationContainerId) {
           return
         }
@@ -525,6 +535,15 @@ export function useWorkflowExecution() {
           executionTime: data.durationMs || 0,
         })
 
+        // For nested containers, also record the original workflow-level ID
+        if (isContainerBlockType(data.blockType)) {
+          const originalId = stripCloneSuffixes(data.blockId)
+          if (originalId !== data.blockId) {
+            executedBlockIds.add(originalId)
+            if (workflowId) setBlockRunStatus(workflowId, originalId, 'error')
+          }
+        }
+
         accumulatedBlockLogs.push(
           createBlockLogEntry(data, { success: false, output: {}, error: data.error })
         )

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

@@ -198,7 +198,7 @@ const defaultEdgeOptions = { type: 'custom' }
 const reactFlowStyles = [
   'bg-[var(--bg)]',
   '[&_.react-flow__edges]:!z-0',
-  '[&_.react-flow__node]:!z-[21]',
+  '[&_.react-flow__node]:z-[21]',
   '[&_.react-flow__handle]:!z-[30]',
   '[&_.react-flow__edge-labels]:!z-[60]',
   '[&_.react-flow__pane]:!bg-[var(--bg)]',

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

@@ -289,21 +289,32 @@ export function PreviewWorkflow({
     return map
   }, [executedBlocks])
 
-  /** Derives subflow status from children. Error takes precedence. */
+  /** Derives subflow status from children. Recursively checks nested subflows. Error takes precedence. */
   const getSubflowExecutionStatus = useMemo(() => {
-    return (subflowId: string): ExecutionStatus | undefined => {
+    const derive = (subflowId: string): ExecutionStatus | undefined => {
       const childIds = subflowChildrenMap.get(subflowId)
       if (!childIds?.length) return undefined
 
-      const executedChildren = childIds
-        .map((id) => blockExecutionMap.get(id))
-        .filter((status): status is { status: string } => Boolean(status))
+      const childStatuses: string[] = []
+      for (const childId of childIds) {
+        const direct = blockExecutionMap.get(childId)
+        if (direct) {
+          childStatuses.push(direct.status)
+        } else {
+          const childBlock = workflowState.blocks?.[childId]
+          if (childBlock?.type === 'loop' || childBlock?.type === 'parallel') {
+            const nested = derive(childId)
+            if (nested) childStatuses.push(nested)
+          }
+        }
+      }
 
-      if (executedChildren.length === 0) return undefined
-      if (executedChildren.some((s) => s.status === 'error')) return 'error'
+      if (childStatuses.length === 0) return undefined
+      if (childStatuses.some((s) => s === 'error')) return 'error'
       return 'success'
     }
-  }, [subflowChildrenMap, blockExecutionMap])
+    return derive
+  }, [subflowChildrenMap, blockExecutionMap, workflowState.blocks])
 
   /** Gets block status. Subflows derive status from children. */
   const getBlockExecutionStatus = useMemo(() => {

apps/sim/lib/logs/execution/trace-spans/trace-spans.ts

@@ -2,6 +2,7 @@ import { createLogger } from '@sim/logger'
 import type { ToolCall, TraceSpan } from '@/lib/logs/types'
 import { isWorkflowBlockType, stripCustomToolPrefix } from '@/executor/constants'
 import type { ExecutionResult } from '@/executor/types'
+import { stripCloneSuffixes } from '@/executor/utils/subflow-utils'
 
 const logger = createLogger('TraceSpans')
 
@@ -569,28 +570,31 @@ interface ContainerNameCounters {
 
 /**
  * Resolves a container name from normal (non-iteration) spans or assigns a sequential number.
+ * Strips clone suffixes so all clones of the same container share one name/number.
  */
 function resolveContainerName(
   containerId: string,
   containerType: 'parallel' | 'loop',
   normalSpans: TraceSpan[],
   counters: ContainerNameCounters
 ): string {
+  const originalId = stripCloneSuffixes(containerId)
+
   const matchingBlock = normalSpans.find(
-    (s) => s.blockId === containerId && s.type === containerType
+    (s) => s.blockId === originalId && s.type === containerType
   )
   if (matchingBlock?.name) return matchingBlock.name
 
   if (containerType === 'parallel') {
-    if (!counters.parallelNumbers.has(containerId)) {
-      counters.parallelNumbers.set(containerId, counters.parallelCounter++)
+    if (!counters.parallelNumbers.has(originalId)) {
+      counters.parallelNumbers.set(originalId, counters.parallelCounter++)
     }
-    return `Parallel ${counters.parallelNumbers.get(containerId)}`
+    return `Parallel ${counters.parallelNumbers.get(originalId)}`
   }
-  if (!counters.loopNumbers.has(containerId)) {
-    counters.loopNumbers.set(containerId, counters.loopCounter++)
+  if (!counters.loopNumbers.has(originalId)) {
+    counters.loopNumbers.set(originalId, counters.loopCounter++)
   }
-  return `Loop ${counters.loopNumbers.get(containerId)}`
+  return `Loop ${counters.loopNumbers.get(originalId)}`
 }
 
 /**