From b813bf7f270c6795c2d0f1b55498b95336da7ca9 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <78010029+emir-karabeg@users.noreply.github.com>
Date: Thu, 15 Jan 2026 17:42:59 -0800
Subject: [PATCH] improvement: workflow, blocks, preview, avatars,
 output-select (#2840)

* improvement(workflow): ui/ux, refactors, optimizations

* improvement: blocks, preview, avatars

* improvement(output-select): ui

* update API endpoint picker to match output selector

* improvement: subflow ui/ux

---------

Co-authored-by: waleed <walif6@gmail.com>
---
 .../components => }/action-bar/action-bar.tsx |   7 +-
 .../output-select/output-select.tsx           |   5 +-
 .../components/note-block/note-block.tsx      |   2 +-
 .../deploy-modal/components/api/api.tsx       |  61 +-
 .../components/general/general.tsx            |   1 -
 .../components/subflows/subflow-node.tsx      |  34 +-
 .../components/connections/connections.tsx    |  23 -
 .../workflow-block/components/index.ts        |   2 -
 .../workflow-block/workflow-block.tsx         |   7 +-
 .../workflow-controls/workflow-controls.tsx   |  20 +-
 .../[workspaceId]/w/[workflowId]/workflow.tsx | 748 ++++++++----------
 .../components/block-details-sidebar.tsx      |   5 -
 .../w/components/preview/preview.tsx          |  19 +-
 .../components/folder-item/folder-item.tsx    |   4 +-
 .../workflow-item/avatars/avatars.tsx         |  18 +-
 .../workflow-item/workflow-item.tsx           |  82 +-
 16 files changed, 421 insertions(+), 617 deletions(-)
 rename apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/{workflow-block/components => }/action-bar/action-bar.tsx (97%)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/connections/connections.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/index.ts

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
similarity index 97%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index 615d91aad1..57cfc4f4d1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -100,6 +100,7 @@ export const ActionBar = memo(
     const isStartBlock = blockType === 'starter' || blockType === 'start_trigger'
     const isResponseBlock = blockType === 'response'
     const isNoteBlock = blockType === 'note'
+    const isSubflowBlock = blockType === 'loop' || blockType === 'parallel'
 
     /**
      * Get appropriate tooltip message based on disabled state
@@ -125,7 +126,7 @@ export const ActionBar = memo(
           'dark:border-transparent dark:bg-[var(--surface-4)]'
         )}
       >
-        {!isNoteBlock && (
+        {!isNoteBlock && !isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
@@ -148,7 +149,7 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
-        {!isStartBlock && !isResponseBlock && (
+        {!isStartBlock && !isResponseBlock && !isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
@@ -169,7 +170,7 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
-        {!isNoteBlock && (
+        {!isNoteBlock && !isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index ea0406fe11..7911b4fab7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -331,13 +331,16 @@ export function OutputSelect({
   return (
     <Combobox
       size='sm'
-      className='!w-fit !py-[2px] [&>svg]:!ml-[4px] [&>svg]:!h-3 [&>svg]:!w-3 [&>span]:!text-[var(--text-secondary)] min-w-[100px] rounded-[6px] bg-transparent px-[9px] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-transparent [&>span]:text-center'
+      className='!w-fit !py-[2px] min-w-[100px] rounded-[6px] px-[9px]'
       groups={comboboxGroups}
       options={[]}
       multiSelect
       multiSelectValues={normalizedSelectedValues}
       onMultiSelectChange={onOutputSelect}
       placeholder={selectedDisplayText}
+      overlayContent={
+        <span className='truncate text-[var(--text-primary)]'>{selectedDisplayText}</span>
+      }
       disabled={disabled || workflowOutputs.length === 0}
       align={align}
       maxHeight={maxHeight}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
index 62d44bd053..31c64f908a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -4,13 +4,13 @@ import type { NodeProps } from 'reactflow'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
 import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   BLOCK_DIMENSIONS,
   useBlockDimensions,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-dimensions'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
-import { ActionBar } from '../workflow-block/components'
 import type { WorkflowBlockProps } from '../workflow-block/types'
 
 interface NoteBlockNodeData extends WorkflowBlockProps {}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index e2131a6ced..97ddbbd770 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -3,16 +3,12 @@
 import { useState } from 'react'
 import { Check, Clipboard } from 'lucide-react'
 import {
-  Badge,
   Button,
   ButtonGroup,
   ButtonGroupItem,
   Code,
+  Combobox,
   Label,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
   Tooltip,
 } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
@@ -602,48 +598,19 @@ console.log(limits);`
                   <span>{copied.async ? 'Copied' : 'Copy'}</span>
                 </Tooltip.Content>
               </Tooltip.Root>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <div className='min-w-0 max-w-full'>
-                    <Badge
-                      variant='outline'
-                      className='flex-none cursor-pointer whitespace-nowrap rounded-[6px]'
-                    >
-                      <span className='whitespace-nowrap text-[12px]'>
-                        {getAsyncExampleTitle()}
-                      </span>
-                    </Badge>
-                  </div>
-                </PopoverTrigger>
-                <PopoverContent
-                  side='bottom'
-                  align='end'
-                  sideOffset={4}
-                  maxHeight={300}
-                  maxWidth={300}
-                  minWidth={160}
-                  border
-                >
-                  <PopoverItem
-                    active={asyncExampleType === 'execute'}
-                    onClick={() => setAsyncExampleType('execute')}
-                  >
-                    Execute Job
-                  </PopoverItem>
-                  <PopoverItem
-                    active={asyncExampleType === 'status'}
-                    onClick={() => setAsyncExampleType('status')}
-                  >
-                    Check Status
-                  </PopoverItem>
-                  <PopoverItem
-                    active={asyncExampleType === 'rate-limits'}
-                    onClick={() => setAsyncExampleType('rate-limits')}
-                  >
-                    Rate Limits
-                  </PopoverItem>
-                </PopoverContent>
-              </Popover>
+              <Combobox
+                size='sm'
+                className='!w-fit !py-[2px] min-w-[100px] rounded-[6px] px-[9px]'
+                options={[
+                  { label: 'Execute Job', value: 'execute' },
+                  { label: 'Check Status', value: 'status' },
+                  { label: 'Rate Limits', value: 'rate-limits' },
+                ]}
+                value={asyncExampleType}
+                onChange={(value) => setAsyncExampleType(value as AsyncExampleType)}
+                align='end'
+                dropdownWidth={160}
+              />
             </div>
           </div>
           <Code.Viewer
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index c9114a2d7f..218e032f1e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -334,7 +334,6 @@ export function GeneralDeploy({
                     }}
                     onPaneClick={() => setExpandedSelectedBlockId(null)}
                     selectedBlockId={expandedSelectedBlockId}
-                    lightweight
                   />
                 </div>
                 {expandedSelectedBlockId && workflowToShow.blocks?.[expandedSelectedBlockId] && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index df0d1afa07..04e64907fa 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -1,12 +1,12 @@
 import { memo, useMemo, useRef } from 'react'
 import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position, useReactFlow } from 'reactflow'
-import { Button, Trash } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 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 { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { usePanelEditorStore } from '@/stores/panel'
 
 /**
@@ -18,11 +18,16 @@ import { usePanelEditorStore } from '@/stores/panel'
 const SubflowNodeStyles: React.FC = () => {
   return (
     <style jsx global>{`
-      /* Z-index management for subflow nodes */
+      /* Z-index management for subflow nodes - default behind blocks */
       .workflow-container .react-flow__node-subflowNode {
         z-index: -1 !important;
       }
 
+      /* Selected subflows appear above other subflows but below blocks (z-21) */
+      .workflow-container .react-flow__node-subflowNode:has([data-subflow-selected='true']) {
+        z-index: 10 !important;
+      }
+
       /* Drag-over states */
       .loop-node-drag-over,
       .parallel-node-drag-over {
@@ -63,8 +68,8 @@ export interface SubflowNodeData {
  */
 export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeData>) => {
   const { getNodes } = useReactFlow()
-  const { collaborativeBatchRemoveBlocks } = useCollaborativeWorkflow()
   const blockRef = useRef<HTMLDivElement>(null)
+  const userPermissions = useUserPermissionsContext()
 
   const currentWorkflow = useCurrentWorkflow()
   const currentBlock = currentWorkflow.getBlockById(id)
@@ -80,6 +85,8 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
   const isFocused = currentBlockId === id
 
+  const isPreviewSelected = data?.isPreviewSelected || false
+
   /**
    * Calculate the nesting level of this subflow node based on its parent hierarchy.
    * Used to apply appropriate styling for nested containers.
@@ -125,8 +132,6 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
     return { top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px`, transform: 'translateY(-50%)' }
   }
 
-  const isPreviewSelected = data?.isPreviewSelected || false
-
   /**
    * Determine the ring styling based on subflow state priority:
    * 1. Focused (selected in editor) or preview selected - blue ring
@@ -162,7 +167,12 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
           data-node-id={id}
           data-type='subflowNode'
           data-nesting-level={nestingLevel}
+          data-subflow-selected={isFocused || isPreviewSelected}
         >
+          {!isPreview && (
+            <ActionBar blockId={id} blockType={data.kind} disabled={!userPermissions.canEdit} />
+          )}
+
           {/* Header Section */}
           <div
             className={cn(
@@ -180,18 +190,6 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
                 {blockName}
               </span>
             </div>
-            {!isPreview && (
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  collaborativeBatchRemoveBlocks([id])
-                }}
-                className='h-[14px] w-[14px] p-0 opacity-0 transition-opacity duration-100 group-hover:opacity-100'
-              >
-                <Trash className='h-[14px] w-[14px]' />
-              </Button>
-            )}
           </div>
 
           {!isPreview && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/connections/connections.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/connections/connections.tsx
deleted file mode 100644
index fcca532fb9..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/connections/connections.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useBlockConnections } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections'
-
-interface ConnectionsProps {
-  blockId: string
-}
-
-/**
- * Displays incoming connections at the bottom left of the workflow block
- */
-export function Connections({ blockId }: ConnectionsProps) {
-  const { incomingConnections, hasIncomingConnections } = useBlockConnections(blockId)
-
-  if (!hasIncomingConnections) return null
-
-  const connectionCount = incomingConnections.length
-  const connectionText = `${connectionCount} ${connectionCount === 1 ? 'connection' : 'connections'}`
-
-  return (
-    <div className='pointer-events-none absolute top-full left-0 ml-[8px] flex items-center gap-[8px] pt-[8px] opacity-0 transition-opacity group-hover:opacity-100'>
-      <span className='text-[12px] text-[var(--text-tertiary)]'>{connectionText}</span>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/index.ts
deleted file mode 100644
index 2329ca5b5f..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { ActionBar } from './action-bar/action-bar'
-export { Connections } from './connections/connections'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 761b5c6182..e81cbdb442 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -9,10 +9,7 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createMcpToolId } from '@/lib/mcp/utils'
 import { getProviderIdFromServiceId } from '@/lib/oauth'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import {
-  ActionBar,
-  Connections,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components'
+import { ActionBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar'
 import {
   useBlockProperties,
   useChildWorkflow,
@@ -934,8 +931,6 @@ export const WorkflowBlock = memo(function WorkflowBlock({
           <ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
         )}
 
-        {shouldShowDefaultHandles && <Connections blockId={id} />}
-
         {shouldShowDefaultHandles && (
           <Handle
             type='target'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index 4b836f085f..a9bd36e0d2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -126,16 +126,7 @@ export function WorkflowControls() {
             </PopoverTrigger>
             <Tooltip.Content side='top'>{mode === 'hand' ? 'Mover' : 'Pointer'}</Tooltip.Content>
           </Tooltip.Root>
-          <PopoverContent align='center' side='top' sideOffset={8} maxWidth={100} minWidth={100}>
-            <PopoverItem
-              onClick={() => {
-                setMode('cursor')
-                setIsCanvasModeOpen(false)
-              }}
-            >
-              <Cursor className='h-3 w-3' />
-              <span>Pointer</span>
-            </PopoverItem>
+          <PopoverContent side='top' sideOffset={8} maxWidth={100} minWidth={100}>
             <PopoverItem
               onClick={() => {
                 setMode('hand')
@@ -145,6 +136,15 @@ export function WorkflowControls() {
               <Hand className='h-3 w-3' />
               <span>Mover</span>
             </PopoverItem>
+            <PopoverItem
+              onClick={() => {
+                setMode('cursor')
+                setIsCanvasModeOpen(false)
+              }}
+            >
+              <Cursor className='h-3 w-3' />
+              <span>Pointer</span>
+            </PopoverItem>
           </PopoverContent>
         </Popover>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 358106d3ae..ec6274a10e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -161,6 +161,24 @@ function calculatePasteOffset(
   }
 }
 
+function mapEdgesByNode(edges: Edge[], nodeIds: Set<string>): Map<string, Edge[]> {
+  const result = new Map<string, Edge[]>()
+  edges.forEach((edge) => {
+    if (nodeIds.has(edge.source)) {
+      const list = result.get(edge.source) ?? []
+      list.push(edge)
+      result.set(edge.source, list)
+      return
+    }
+    if (nodeIds.has(edge.target)) {
+      const list = result.get(edge.target) ?? []
+      list.push(edge)
+      result.set(edge.target, list)
+    }
+  })
+  return result
+}
+
 /** Custom node types for ReactFlow. */
 const nodeTypes: NodeTypes = {
   workflowBlock: WorkflowBlock,
@@ -178,12 +196,16 @@ const edgeTypes: EdgeTypes = {
 const defaultEdgeOptions = { type: 'custom' }
 
 const reactFlowStyles = [
+  'bg-[var(--bg)]',
   '[&_.react-flow__edges]:!z-0',
   '[&_.react-flow__node]:!z-[21]',
   '[&_.react-flow__handle]:!z-[30]',
   '[&_.react-flow__edge-labels]:!z-[60]',
-  '[&_.react-flow__pane]:!bg-transparent',
-  '[&_.react-flow__renderer]:!bg-transparent',
+  '[&_.react-flow__pane]:!bg-[var(--bg)]',
+  '[&_.react-flow__pane]:select-none',
+  '[&_.react-flow__selectionpane]:select-none',
+  '[&_.react-flow__renderer]:!bg-[var(--bg)]',
+  '[&_.react-flow__viewport]:!bg-[var(--bg)]',
   '[&_.react-flow__background]:hidden',
 ].join(' ')
 const reactFlowFitViewOptions = { padding: 0.6, maxZoom: 1.0 } as const
@@ -200,7 +222,6 @@ interface BlockData {
   id: string
   type: string
   position: { x: number; y: number }
-  distance: number
 }
 
 /**
@@ -322,6 +343,59 @@ const WorkflowContent = React.memo(() => {
     return resizeLoopNodes(updateNodeDimensions)
   }, [resizeLoopNodes, updateNodeDimensions])
 
+  /** Checks if a node can be placed inside a container (loop/parallel). */
+  const canNodeEnterContainer = useCallback(
+    (node: Node): boolean => {
+      if (node.data?.type === 'starter') return false
+      if (node.type === 'subflowNode') return false
+      const block = blocks[node.id]
+      return !(block && TriggerUtils.isTriggerBlock(block))
+    },
+    [blocks]
+  )
+
+  /** Shifts position updates to ensure nodes stay within container bounds. */
+  const shiftUpdatesToContainerBounds = useCallback(
+    <T extends { newPosition: { x: number; y: number } }>(rawUpdates: T[]): T[] => {
+      if (rawUpdates.length === 0) return rawUpdates
+
+      const minX = Math.min(...rawUpdates.map((u) => u.newPosition.x))
+      const minY = Math.min(...rawUpdates.map((u) => u.newPosition.y))
+
+      const targetMinX = CONTAINER_DIMENSIONS.LEFT_PADDING
+      const targetMinY = CONTAINER_DIMENSIONS.HEADER_HEIGHT + CONTAINER_DIMENSIONS.TOP_PADDING
+
+      const shiftX = minX < targetMinX ? targetMinX - minX : 0
+      const shiftY = minY < targetMinY ? targetMinY - minY : 0
+
+      if (shiftX === 0 && shiftY === 0) return rawUpdates
+
+      return rawUpdates.map((u) => ({
+        ...u,
+        newPosition: {
+          x: u.newPosition.x + shiftX,
+          y: u.newPosition.y + shiftY,
+        },
+      }))
+    },
+    []
+  )
+
+  /** Applies highlight styling to a container node during drag operations. */
+  const highlightContainerNode = useCallback(
+    (containerId: string, containerKind: 'loop' | 'parallel') => {
+      clearDragHighlights()
+      const containerElement = document.querySelector(`[data-id="${containerId}"]`)
+      if (containerElement) {
+        containerElement.classList.add(
+          containerKind === 'loop' ? 'loop-node-drag-over' : 'parallel-node-drag-over'
+        )
+        document.body.style.cursor = 'copy'
+      }
+    },
+    []
+  )
+
   const { handleAutoLayout: autoLayoutWithFitView } = useAutoLayout(activeWorkflowId || null)
 
   const isWorkflowEmpty = useMemo(() => Object.keys(blocks).length === 0, [blocks])
@@ -503,6 +577,99 @@ const WorkflowContent = React.memo(() => {
     [collaborativeBatchUpdateParent]
   )
 
+  /**
+   * Executes a batch parent update for nodes being moved into or out of containers.
+   * Consolidates the common logic used by onNodeDragStop and onSelectionDragStop.
+   */
+  const executeBatchParentUpdate = useCallback(
+    (nodesToProcess: Node[], targetParentId: string | null, logMessage: string) => {
+      // Build set of node IDs for efficient lookup
+      const nodeIds = new Set(nodesToProcess.map((n) => n.id))
+
+      // Filter to nodes whose parent is actually changing
+      const nodesNeedingUpdate = nodesToProcess.filter((n) => {
+        const block = blocks[n.id]
+        if (!block) return false
+        const currentParent = block.data?.parentId || null
+        // Skip if the node's parent is also being moved (keep children with their parent)
+        if (currentParent && nodeIds.has(currentParent)) return false
+        return currentParent !== targetParentId
+      })
+
+      if (nodesNeedingUpdate.length === 0) return
+
+      // Filter out nodes that cannot enter containers (when target is a container)
+      const validNodes = targetParentId
+        ? nodesNeedingUpdate.filter(canNodeEnterContainer)
+        : nodesNeedingUpdate
+
+      if (validNodes.length === 0) return
+
+      // Find boundary edges (edges that cross the container boundary)
+      const movingNodeIds = new Set(validNodes.map((n) => n.id))
+      const boundaryEdges = edgesForDisplay.filter((e) => {
+        const sourceInSelection = movingNodeIds.has(e.source)
+        const targetInSelection = movingNodeIds.has(e.target)
+        return sourceInSelection !== targetInSelection
+      })
+      const boundaryEdgesByNode = mapEdgesByNode(boundaryEdges, movingNodeIds)
+
+      // Build position updates
+      const rawUpdates = validNodes.map((n) => {
+        const edgesForThisNode = boundaryEdgesByNode.get(n.id) ?? []
+        const newPosition = targetParentId
+          ? calculateRelativePosition(n.id, targetParentId, true)
+          : getNodeAbsolutePosition(n.id)
+        return {
+          blockId: n.id,
+          newParentId: targetParentId,
+          newPosition,
+          affectedEdges: edgesForThisNode,
+        }
+      })
+
+      // Shift to container bounds if moving into a container
+      const updates = targetParentId ? shiftUpdatesToContainerBounds(rawUpdates) : rawUpdates
+
+      collaborativeBatchUpdateParent(updates)
+
+      // Update display nodes
+      setDisplayNodes((nodes) =>
+        nodes.map((node) => {
+          const update = updates.find((u) => u.blockId === node.id)
+          if (update) {
+            return {
+              ...node,
+              position: update.newPosition,
+              parentId: update.newParentId ?? undefined,
+            }
+          }
+          return node
+        })
+      )
+
+      // Resize container if moving into one
+      if (targetParentId) {
+        resizeLoopNodesWrapper()
+      }
+
+      logger.info(logMessage, {
+        targetParentId,
+        nodeCount: validNodes.length,
+      })
+    },
+    [
+      blocks,
+      edgesForDisplay,
+      canNodeEnterContainer,
+      calculateRelativePosition,
+      getNodeAbsolutePosition,
+      shiftUpdatesToContainerBounds,
+      collaborativeBatchUpdateParent,
+      resizeLoopNodesWrapper,
+    ]
+  )
+
   const addBlock = useCallback(
     (
       id: string,
@@ -515,6 +682,9 @@ const WorkflowContent = React.memo(() => {
       autoConnectEdge?: Edge,
       triggerMode?: boolean
     ) => {
+      pendingSelectionRef.current = new Set([id])
+      setSelectedEdges(new Map())
+
       const blockData: Record<string, unknown> = { ...(data || {}) }
       if (parentId) blockData.parentId = parentId
       if (extent) blockData.extent = extent
@@ -533,7 +703,7 @@ const WorkflowContent = React.memo(() => {
       collaborativeBatchAddBlocks([block], autoConnectEdge ? [autoConnectEdge] : [], {}, {}, {})
       usePanelEditorStore.getState().setCurrentBlockId(id)
     },
-    [collaborativeBatchAddBlocks]
+    [collaborativeBatchAddBlocks, setSelectedEdges]
   )
 
   const { activeBlockIds, pendingBlocks, isDebugging } = useExecutionStore(
@@ -674,104 +844,52 @@ const WorkflowContent = React.memo(() => {
     copyBlocks(blockIds)
   }, [contextMenuBlocks, copyBlocks])
 
+  /**
+   * Executes a paste operation with validation and selection handling.
+   * Consolidates shared logic for context paste, duplicate, and keyboard paste.
+   */
+  const executePasteOperation = useCallback(
+    (operation: 'paste' | 'duplicate', pasteOffset: { x: number; y: number }) => {
+      const pasteData = preparePasteData(pasteOffset)
+      if (!pasteData) return
+
+      const pastedBlocksArray = Object.values(pasteData.blocks)
+      const validation = validateTriggerPaste(pastedBlocksArray, blocks, operation)
+      if (!validation.isValid) {
+        addNotification({
+          level: 'error',
+          message: validation.message!,
+          workflowId: activeWorkflowId || undefined,
+        })
+        return
+      }
+
+      // Set pending selection before adding blocks - sync effect will apply it (accumulates for rapid pastes)
+      pendingSelectionRef.current = new Set([
+        ...(pendingSelectionRef.current ?? []),
+        ...pastedBlocksArray.map((b) => b.id),
+      ])
+
+      collaborativeBatchAddBlocks(
+        pastedBlocksArray,
+        pasteData.edges,
+        pasteData.loops,
+        pasteData.parallels,
+        pasteData.subBlockValues
+      )
+    },
+    [preparePasteData, blocks, addNotification, activeWorkflowId, collaborativeBatchAddBlocks]
+  )
+
   const handleContextPaste = useCallback(() => {
     if (!hasClipboard()) return
-
-    const pasteOffset = calculatePasteOffset(clipboard, screenToFlowPosition)
-
-    const pasteData = preparePasteData(pasteOffset)
-    if (!pasteData) return
-
-    const {
-      blocks: pastedBlocks,
-      edges: pastedEdges,
-      loops: pastedLoops,
-      parallels: pastedParallels,
-      subBlockValues: pastedSubBlockValues,
-    } = pasteData
-
-    const pastedBlocksArray = Object.values(pastedBlocks)
-    const validation = validateTriggerPaste(pastedBlocksArray, blocks, 'paste')
-    if (!validation.isValid) {
-      addNotification({
-        level: 'error',
-        message: validation.message!,
-        workflowId: activeWorkflowId || undefined,
-      })
-      return
-    }
-
-    // Set pending selection before adding blocks - sync effect will apply it (accumulates for rapid pastes)
-    pendingSelectionRef.current = new Set([
-      ...(pendingSelectionRef.current ?? []),
-      ...pastedBlocksArray.map((b) => b.id),
-    ])
-
-    collaborativeBatchAddBlocks(
-      pastedBlocksArray,
-      pastedEdges,
-      pastedLoops,
-      pastedParallels,
-      pastedSubBlockValues
-    )
-  }, [
-    hasClipboard,
-    clipboard,
-    screenToFlowPosition,
-    preparePasteData,
-    blocks,
-    activeWorkflowId,
-    addNotification,
-    collaborativeBatchAddBlocks,
-  ])
+    executePasteOperation('paste', calculatePasteOffset(clipboard, screenToFlowPosition))
+  }, [hasClipboard, executePasteOperation, clipboard, screenToFlowPosition])
 
   const handleContextDuplicate = useCallback(() => {
-    const blockIds = contextMenuBlocks.map((b) => b.id)
-    copyBlocks(blockIds)
-    const pasteData = preparePasteData(DEFAULT_PASTE_OFFSET)
-    if (!pasteData) return
-
-    const {
-      blocks: pastedBlocks,
-      edges: pastedEdges,
-      loops: pastedLoops,
-      parallels: pastedParallels,
-      subBlockValues: pastedSubBlockValues,
-    } = pasteData
-
-    const pastedBlocksArray = Object.values(pastedBlocks)
-    const validation = validateTriggerPaste(pastedBlocksArray, blocks, 'duplicate')
-    if (!validation.isValid) {
-      addNotification({
-        level: 'error',
-        message: validation.message!,
-        workflowId: activeWorkflowId || undefined,
-      })
-      return
-    }
-
-    // Set pending selection before adding blocks - sync effect will apply it (accumulates for rapid pastes)
-    pendingSelectionRef.current = new Set([
-      ...(pendingSelectionRef.current ?? []),
-      ...pastedBlocksArray.map((b) => b.id),
-    ])
-
-    collaborativeBatchAddBlocks(
-      pastedBlocksArray,
-      pastedEdges,
-      pastedLoops,
-      pastedParallels,
-      pastedSubBlockValues
-    )
-  }, [
-    contextMenuBlocks,
-    copyBlocks,
-    preparePasteData,
-    blocks,
-    activeWorkflowId,
-    addNotification,
-    collaborativeBatchAddBlocks,
-  ])
+    copyBlocks(contextMenuBlocks.map((b) => b.id))
+    executePasteOperation('duplicate', DEFAULT_PASTE_OFFSET)
+  }, [contextMenuBlocks, copyBlocks, executePasteOperation])
 
   const handleContextDelete = useCallback(() => {
     const blockIds = contextMenuBlocks.map((b) => b.id)
@@ -880,36 +998,7 @@ const WorkflowContent = React.memo(() => {
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
         if (effectivePermissions.canEdit && hasClipboard()) {
           event.preventDefault()
-
-          const pasteOffset = calculatePasteOffset(clipboard, screenToFlowPosition)
-
-          const pasteData = preparePasteData(pasteOffset)
-          if (pasteData) {
-            const pastedBlocks = Object.values(pasteData.blocks)
-            const validation = validateTriggerPaste(pastedBlocks, blocks, 'paste')
-            if (!validation.isValid) {
-              addNotification({
-                level: 'error',
-                message: validation.message!,
-                workflowId: activeWorkflowId || undefined,
-              })
-              return
-            }
-
-            // Set pending selection before adding blocks - sync effect will apply it (accumulates for rapid pastes)
-            pendingSelectionRef.current = new Set([
-              ...(pendingSelectionRef.current ?? []),
-              ...pastedBlocks.map((b) => b.id),
-            ])
-
-            collaborativeBatchAddBlocks(
-              pastedBlocks,
-              pasteData.edges,
-              pasteData.loops,
-              pasteData.parallels,
-              pasteData.subBlockValues
-            )
-          }
+          executePasteOperation('paste', calculatePasteOffset(clipboard, screenToFlowPosition))
         }
       }
     }
@@ -926,15 +1015,11 @@ const WorkflowContent = React.memo(() => {
     redo,
     getNodes,
     copyBlocks,
-    preparePasteData,
-    collaborativeBatchAddBlocks,
     hasClipboard,
     effectivePermissions.canEdit,
-    blocks,
-    addNotification,
-    activeWorkflowId,
     clipboard,
     screenToFlowPosition,
+    executePasteOperation,
   ])
 
   /**
@@ -962,34 +1047,42 @@ const WorkflowContent = React.memo(() => {
       const containerAtPoint = isPointInLoopNode(newNodePosition)
       const nodeIndex = new Map(getNodes().map((n) => [n.id, n]))
 
-      const candidates = Object.entries(blocks)
-        .filter(([id, block]) => {
-          if (!block.enabled) return false
-          if (block.type === 'response') return false
-          const node = nodeIndex.get(id)
-          if (!node) return false
+      const closest = Object.entries(blocks).reduce<{
+        id: string
+        type: string
+        position: { x: number; y: number }
+        distanceSquared: number
+      } | null>((acc, [id, block]) => {
+        if (!block.enabled) return acc
+        if (block.type === 'response') return acc
+        const node = nodeIndex.get(id)
+        if (!node) return acc
 
-          const blockParentId = blocks[id]?.data?.parentId
-          const dropParentId = containerAtPoint?.loopId
-          if (dropParentId !== blockParentId) return false
+        const blockParentId = blocks[id]?.data?.parentId
+        const dropParentId = containerAtPoint?.loopId
+        if (dropParentId !== blockParentId) return acc
 
-          return true
-        })
-        .map(([id, block]) => {
-          const anchor = getNodeAnchorPosition(id)
-          const distance = Math.sqrt(
-            (anchor.x - newNodePosition.x) ** 2 + (anchor.y - newNodePosition.y) ** 2
-          )
+        const anchor = getNodeAnchorPosition(id)
+        const distanceSquared =
+          (anchor.x - newNodePosition.x) ** 2 + (anchor.y - newNodePosition.y) ** 2
+        if (!acc || distanceSquared < acc.distanceSquared) {
           return {
             id,
             type: block.type,
             position: anchor,
-            distance,
+            distanceSquared,
           }
-        })
-        .sort((a, b) => a.distance - b.distance)
+        }
+        return acc
+      }, null)
 
-      return candidates[0] || null
+      if (!closest) return null
+
+      return {
+        id: closest.id,
+        type: closest.type,
+        position: closest.position,
+      }
     },
     [blocks, getNodes, getNodeAnchorPosition, isPointInLoopNode]
   )
@@ -1053,15 +1146,28 @@ const WorkflowContent = React.memo(() => {
       candidateBlocks: { id: string; type: string; position: { x: number; y: number } }[],
       targetPosition: { x: number; y: number }
     ): { id: string; type: string; position: { x: number; y: number } } | undefined => {
-      return candidateBlocks
-        .filter((b) => b.type !== 'response')
-        .map((b) => ({
-          block: b,
-          distance: Math.sqrt(
-            (b.position.x - targetPosition.x) ** 2 + (b.position.y - targetPosition.y) ** 2
-          ),
-        }))
-        .sort((a, b) => a.distance - b.distance)[0]?.block
+      const closest = candidateBlocks.reduce<{
+        id: string
+        type: string
+        position: { x: number; y: number }
+        distanceSquared: number
+      } | null>((acc, block) => {
+        if (block.type === 'response') return acc
+        const distanceSquared =
+          (block.position.x - targetPosition.x) ** 2 + (block.position.y - targetPosition.y) ** 2
+        if (!acc || distanceSquared < acc.distanceSquared) {
+          return { ...block, distanceSquared }
+        }
+        return acc
+      }, null)
+
+      return closest
+        ? {
+            id: closest.id,
+            type: closest.type,
+            position: closest.position,
+          }
+        : undefined
     },
     []
   )
@@ -1637,39 +1743,27 @@ const WorkflowContent = React.memo(() => {
         // Check if hovering over a container node
         const containerInfo = isPointInLoopNode(position)
 
-        // Clear any previous highlighting
-        clearDragHighlights()
-
         // Highlight container if hovering over it and not dragging a subflow
         // Subflow drag is marked by body class flag set by toolbar
         const isSubflowDrag = document.body.classList.contains('sim-drag-subflow')
 
         if (containerInfo && !isSubflowDrag) {
-          const containerElement = document.querySelector(`[data-id="${containerInfo.loopId}"]`)
-          if (containerElement) {
-            // Determine the type of container node for appropriate styling
-            const containerNode = getNodes().find((n) => n.id === containerInfo.loopId)
-            if (
-              containerNode?.type === 'subflowNode' &&
-              (containerNode.data as SubflowNodeData)?.kind === 'loop'
-            ) {
-              containerElement.classList.add('loop-node-drag-over')
-            } else if (
-              containerNode?.type === 'subflowNode' &&
-              (containerNode.data as SubflowNodeData)?.kind === 'parallel'
-            ) {
-              containerElement.classList.add('parallel-node-drag-over')
+          const containerNode = getNodes().find((n) => n.id === containerInfo.loopId)
+          if (containerNode?.type === 'subflowNode') {
+            const kind = (containerNode.data as SubflowNodeData)?.kind
+            if (kind === 'loop' || kind === 'parallel') {
+              highlightContainerNode(containerInfo.loopId, kind)
             }
-            document.body.style.cursor = 'copy'
           }
         } else {
+          clearDragHighlights()
           document.body.style.cursor = ''
         }
       } catch (err) {
         logger.error('Error in onDragOver', { err })
       }
     },
-    [screenToFlowPosition, isPointInLoopNode, getNodes]
+    [screenToFlowPosition, isPointInLoopNode, getNodes, highlightContainerNode]
   )
 
   const loadingWorkflowRef = useRef<string | null>(null)
@@ -1974,6 +2068,7 @@ const WorkflowContent = React.memo(() => {
           const targetInSelection = movingNodeIds.has(e.target)
           return sourceInSelection !== targetInSelection
         })
+        const boundaryEdgesByNode = mapEdgesByNode(boundaryEdges, movingNodeIds)
 
         // Collect absolute positions BEFORE any mutations
         const absolutePositions = new Map<string, { x: number; y: number }>()
@@ -1984,9 +2079,7 @@ const WorkflowContent = React.memo(() => {
         // Build batch update with all blocks and their affected edges
         const updates = validBlockIds.map((blockId) => {
           const absolutePosition = absolutePositions.get(blockId)!
-          const edgesForThisNode = boundaryEdges.filter(
-            (e) => e.source === blockId || e.target === blockId
-          )
+          const edgesForThisNode = boundaryEdgesByNode.get(blockId) ?? []
           return {
             blockId,
             newParentId: null,
@@ -2443,23 +2536,9 @@ const WorkflowContent = React.memo(() => {
         setPotentialParentId(bestContainerMatch.container.id)
 
         // Add highlight class and change cursor
-        const containerElement = document.querySelector(
-          `[data-id="${bestContainerMatch.container.id}"]`
-        )
-        if (containerElement) {
-          // Apply appropriate class based on container type
-          if (
-            bestContainerMatch.container.type === 'subflowNode' &&
-            (bestContainerMatch.container.data as SubflowNodeData)?.kind === 'loop'
-          ) {
-            containerElement.classList.add('loop-node-drag-over')
-          } else if (
-            bestContainerMatch.container.type === 'subflowNode' &&
-            (bestContainerMatch.container.data as SubflowNodeData)?.kind === 'parallel'
-          ) {
-            containerElement.classList.add('parallel-node-drag-over')
-          }
-          document.body.style.cursor = 'copy'
+        const kind = (bestContainerMatch.container.data as SubflowNodeData)?.kind
+        if (kind === 'loop' || kind === 'parallel') {
+          highlightContainerNode(bestContainerMatch.container.id, kind)
         }
       } else {
         // Remove highlighting if no longer over a container
@@ -2476,6 +2555,7 @@ const WorkflowContent = React.memo(() => {
       getNodeAbsolutePosition,
       getNodeDepth,
       updateContainerDimensionsDuringDrag,
+      highlightContainerNode,
     ]
   )
 
@@ -2529,103 +2609,12 @@ const WorkflowContent = React.memo(() => {
           previousPositions: multiNodeDragStartRef.current,
         })
 
-        // Process parent updates for nodes whose parent is changing
-        // Check each node individually - don't rely on dragStartParentId since
-        // multi-node selections can contain nodes from different parents
-        const selectedNodeIds = new Set(selectedNodes.map((n) => n.id))
-        const nodesNeedingParentUpdate = selectedNodes.filter((n) => {
-          const block = blocks[n.id]
-          if (!block) return false
-          const currentParent = block.data?.parentId || null
-          // Skip if the node's parent is also being moved (keep children with their parent)
-          if (currentParent && selectedNodeIds.has(currentParent)) return false
-          // Node needs update if current parent !== target parent
-          return currentParent !== potentialParentId
-        })
-
-        if (nodesNeedingParentUpdate.length > 0) {
-          // Filter out nodes that cannot be moved into subflows (when target is a subflow)
-          const validNodes = nodesNeedingParentUpdate.filter((n) => {
-            // These restrictions only apply when moving INTO a subflow
-            if (potentialParentId) {
-              if (n.data?.type === 'starter') return false
-              const block = blocks[n.id]
-              if (block && TriggerUtils.isTriggerBlock(block)) return false
-              if (n.type === 'subflowNode') return false
-            }
-            return true
-          })
-
-          if (validNodes.length > 0) {
-            const movingNodeIds = new Set(validNodes.map((n) => n.id))
-            const boundaryEdges = edgesForDisplay.filter((e) => {
-              const sourceInSelection = movingNodeIds.has(e.source)
-              const targetInSelection = movingNodeIds.has(e.target)
-              return sourceInSelection !== targetInSelection
-            })
-
-            const rawUpdates = validNodes.map((n) => {
-              const edgesForThisNode = boundaryEdges.filter(
-                (e) => e.source === n.id || e.target === n.id
-              )
-              const newPosition = potentialParentId
-                ? calculateRelativePosition(n.id, potentialParentId, true)
-                : getNodeAbsolutePosition(n.id)
-              return {
-                blockId: n.id,
-                newParentId: potentialParentId,
-                newPosition,
-                affectedEdges: edgesForThisNode,
-              }
-            })
-
-            let updates = rawUpdates
-            if (potentialParentId) {
-              const minX = Math.min(...rawUpdates.map((u) => u.newPosition.x))
-              const minY = Math.min(...rawUpdates.map((u) => u.newPosition.y))
-
-              const targetMinX = CONTAINER_DIMENSIONS.LEFT_PADDING
-              const targetMinY =
-                CONTAINER_DIMENSIONS.HEADER_HEIGHT + CONTAINER_DIMENSIONS.TOP_PADDING
-
-              const shiftX = minX < targetMinX ? targetMinX - minX : 0
-              const shiftY = minY < targetMinY ? targetMinY - minY : 0
-
-              updates = rawUpdates.map((u) => ({
-                ...u,
-                newPosition: {
-                  x: u.newPosition.x + shiftX,
-                  y: u.newPosition.y + shiftY,
-                },
-              }))
-            }
-
-            collaborativeBatchUpdateParent(updates)
-
-            setDisplayNodes((nodes) =>
-              nodes.map((node) => {
-                const update = updates.find((u) => u.blockId === node.id)
-                if (update) {
-                  return {
-                    ...node,
-                    position: update.newPosition,
-                    parentId: update.newParentId ?? undefined,
-                  }
-                }
-                return node
-              })
-            )
-
-            if (potentialParentId) {
-              resizeLoopNodesWrapper()
-            }
-
-            logger.info('Batch moved nodes to new parent', {
-              targetParentId: potentialParentId,
-              nodeCount: validNodes.length,
-            })
-          }
-        }
+        // Process parent updates using shared helper
+        executeBatchParentUpdate(
+          selectedNodes,
+          potentialParentId,
+          'Batch moved nodes to new parent'
+        )
 
         // Clear drag start state
         setDragStartPosition(null)
@@ -2818,31 +2807,15 @@ const WorkflowContent = React.memo(() => {
       edgesForDisplay,
       removeEdgesForNode,
       getNodeAbsolutePosition,
-      calculateRelativePosition,
-      resizeLoopNodesWrapper,
       getDragStartPosition,
       setDragStartPosition,
       addNotification,
       activeWorkflowId,
       collaborativeBatchUpdatePositions,
-      collaborativeBatchUpdateParent,
+      executeBatchParentUpdate,
     ]
   )
 
-  // // Lock selection mode when selection drag starts (captures Shift state at drag start)
-  // const onSelectionStart = useCallback(() => {
-  //   if (isShiftPressed) {
-  //     setIsSelectionDragActive(true)
-  //   }
-  // }, [isShiftPressed])
-
-  // const onSelectionEnd = useCallback(() => {
-  //   requestAnimationFrame(() => {
-  //     setIsSelectionDragActive(false)
-  //     setDisplayNodes((nodes) => resolveParentChildSelectionConflicts(nodes, blocks))
-  //   })
-  // }, [blocks])
-
   /** Captures initial positions when selection drag starts (for marquee-selected nodes). */
   const onSelectionDragStart = useCallback(
     (_event: React.MouseEvent, nodes: Node[]) => {
@@ -2883,13 +2856,7 @@ const WorkflowContent = React.memo(() => {
       if (nodes.length === 0) return
 
       // Filter out nodes that can't be placed in containers
-      const eligibleNodes = nodes.filter((n) => {
-        if (n.data?.type === 'starter') return false
-        if (n.type === 'subflowNode') return false
-        const block = blocks[n.id]
-        if (block && TriggerUtils.isTriggerBlock(block)) return false
-        return true
-      })
+      const eligibleNodes = nodes.filter(canNodeEnterContainer)
 
       // If no eligible nodes, clear any potential parent
       if (eligibleNodes.length === 0) {
@@ -2969,18 +2936,12 @@ const WorkflowContent = React.memo(() => {
         const bestMatch = sortedContainers[0]
 
         if (bestMatch.container.id !== potentialParentId) {
-          clearDragHighlights()
           setPotentialParentId(bestMatch.container.id)
 
           // Add highlight
-          const containerElement = document.querySelector(`[data-id="${bestMatch.container.id}"]`)
-          if (containerElement) {
-            if ((bestMatch.container.data as SubflowNodeData)?.kind === 'loop') {
-              containerElement.classList.add('loop-node-drag-over')
-            } else if ((bestMatch.container.data as SubflowNodeData)?.kind === 'parallel') {
-              containerElement.classList.add('parallel-node-drag-over')
-            }
-            document.body.style.cursor = 'copy'
+          const kind = (bestMatch.container.data as SubflowNodeData)?.kind
+          if (kind === 'loop' || kind === 'parallel') {
+            highlightContainerNode(bestMatch.container.id, kind)
           }
         }
       } else if (potentialParentId) {
@@ -2989,12 +2950,13 @@ const WorkflowContent = React.memo(() => {
       }
     },
     [
-      blocks,
+      canNodeEnterContainer,
       getNodes,
       potentialParentId,
       getNodeAbsolutePosition,
       getNodeDepth,
       clearDragHighlights,
+      highlightContainerNode,
     ]
   )
 
@@ -3009,102 +2971,8 @@ const WorkflowContent = React.memo(() => {
         previousPositions: multiNodeDragStartRef.current,
       })
 
-      // Process parent updates for nodes whose parent is changing
-      // Check each node individually - don't rely on dragStartParentId since
-      // multi-node selections can contain nodes from different parents
-      const selectedNodeIds = new Set(nodes.map((n: Node) => n.id))
-      const nodesNeedingParentUpdate = nodes.filter((n: Node) => {
-        const block = blocks[n.id]
-        if (!block) return false
-        const currentParent = block.data?.parentId || null
-        // Skip if the node's parent is also being moved (keep children with their parent)
-        if (currentParent && selectedNodeIds.has(currentParent)) return false
-        // Node needs update if current parent !== target parent
-        return currentParent !== potentialParentId
-      })
-
-      if (nodesNeedingParentUpdate.length > 0) {
-        // Filter out nodes that cannot be moved into subflows (when target is a subflow)
-        const validNodes = nodesNeedingParentUpdate.filter((n: Node) => {
-          // These restrictions only apply when moving INTO a subflow
-          if (potentialParentId) {
-            if (n.data?.type === 'starter') return false
-            const block = blocks[n.id]
-            if (block && TriggerUtils.isTriggerBlock(block)) return false
-            if (n.type === 'subflowNode') return false
-          }
-          return true
-        })
-
-        if (validNodes.length > 0) {
-          const movingNodeIds = new Set(validNodes.map((n: Node) => n.id))
-          const boundaryEdges = edgesForDisplay.filter((e) => {
-            const sourceInSelection = movingNodeIds.has(e.source)
-            const targetInSelection = movingNodeIds.has(e.target)
-            return sourceInSelection !== targetInSelection
-          })
-
-          const rawUpdates = validNodes.map((n: Node) => {
-            const edgesForThisNode = boundaryEdges.filter(
-              (e) => e.source === n.id || e.target === n.id
-            )
-            const newPosition = potentialParentId
-              ? calculateRelativePosition(n.id, potentialParentId, true)
-              : getNodeAbsolutePosition(n.id)
-            return {
-              blockId: n.id,
-              newParentId: potentialParentId,
-              newPosition,
-              affectedEdges: edgesForThisNode,
-            }
-          })
-
-          let updates = rawUpdates
-          if (potentialParentId) {
-            const minX = Math.min(...rawUpdates.map((u) => u.newPosition.x))
-            const minY = Math.min(...rawUpdates.map((u) => u.newPosition.y))
-
-            const targetMinX = CONTAINER_DIMENSIONS.LEFT_PADDING
-            const targetMinY = CONTAINER_DIMENSIONS.HEADER_HEIGHT + CONTAINER_DIMENSIONS.TOP_PADDING
-
-            const shiftX = minX < targetMinX ? targetMinX - minX : 0
-            const shiftY = minY < targetMinY ? targetMinY - minY : 0
-
-            updates = rawUpdates.map((u) => ({
-              ...u,
-              newPosition: {
-                x: u.newPosition.x + shiftX,
-                y: u.newPosition.y + shiftY,
-              },
-            }))
-          }
-
-          collaborativeBatchUpdateParent(updates)
-
-          setDisplayNodes((nodes) =>
-            nodes.map((node) => {
-              const update = updates.find((u) => u.blockId === node.id)
-              if (update) {
-                return {
-                  ...node,
-                  position: update.newPosition,
-                  parentId: update.newParentId ?? undefined,
-                }
-              }
-              return node
-            })
-          )
-
-          if (potentialParentId) {
-            resizeLoopNodesWrapper()
-          }
-
-          logger.info('Batch moved selection to new parent', {
-            targetParentId: potentialParentId,
-            nodeCount: validNodes.length,
-          })
-        }
-      }
+      // Process parent updates using shared helper
+      executeBatchParentUpdate(nodes, potentialParentId, 'Batch moved selection to new parent')
 
       // Clear drag state
       setDragStartPosition(null)
@@ -3114,14 +2982,10 @@ const WorkflowContent = React.memo(() => {
     [
       blocks,
       getNodes,
-      getNodeAbsolutePosition,
       collaborativeBatchUpdatePositions,
-      collaborativeBatchUpdateParent,
-      calculateRelativePosition,
-      resizeLoopNodesWrapper,
       potentialParentId,
-      edgesForDisplay,
       clearDragHighlights,
+      executeBatchParentUpdate,
     ]
   )
 
@@ -3130,6 +2994,23 @@ const WorkflowContent = React.memo(() => {
     usePanelEditorStore.getState().clearCurrentBlock()
   }, [])
 
+  /** Prevents native text selection when starting a shift-drag on the pane. */
+  const handleCanvasMouseDown = useCallback((event: React.MouseEvent) => {
+    if (!event.shiftKey) return
+
+    const target = event.target as HTMLElement | null
+    if (!target) return
+
+    const isPaneTarget = Boolean(target.closest('.react-flow__pane, .react-flow__selectionpane'))
+    if (!isPaneTarget) return
+
+    event.preventDefault()
+    const selection = window.getSelection()
+    if (selection && selection.rangeCount > 0) {
+      selection.removeAllRanges()
+    }
+  }, [])
+
   /**
    * Handles node click to select the node in ReactFlow.
    * Parent-child conflict resolution happens automatically in onNodesChange.
@@ -3303,6 +3184,7 @@ const WorkflowContent = React.memo(() => {
               onConnectEnd={effectivePermissions.canEdit ? onConnectEnd : undefined}
               nodeTypes={nodeTypes}
               edgeTypes={edgeTypes}
+              onMouseDown={handleCanvasMouseDown}
               onDrop={effectivePermissions.canEdit ? onDrop : undefined}
               onDragOver={effectivePermissions.canEdit ? onDragOver : undefined}
               onInit={(instance) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx
index 5ff5ea92c4..56fadd8362 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block-details-sidebar.tsx
@@ -1156,11 +1156,6 @@ function BlockDetailsSidebarContent({
         <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
           {block.name || blockConfig.name}
         </span>
-        {block.enabled === false && (
-          <Badge variant='red' size='sm'>
-            Disabled
-          </Badge>
-        )}
         {onClose && (
           <Button variant='ghost' className='!p-[4px] flex-shrink-0' onClick={onClose}>
             <X className='h-[14px] w-[14px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
index af554710cb..e3c5a159d0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -181,17 +181,18 @@ interface FitViewOnChangeProps {
  */
 function FitViewOnChange({ nodeIds, fitPadding }: FitViewOnChangeProps) {
   const { fitView } = useReactFlow()
-  const hasFittedRef = useRef(false)
+  const lastNodeIdsRef = useRef<string | null>(null)
 
   useEffect(() => {
-    if (nodeIds.length > 0 && !hasFittedRef.current) {
-      hasFittedRef.current = true
-      // Small delay to ensure nodes are rendered before fitting
-      const timeoutId = setTimeout(() => {
-        fitView({ padding: fitPadding, duration: 200 })
-      }, 50)
-      return () => clearTimeout(timeoutId)
-    }
+    if (!nodeIds.length) return
+    const shouldFit = lastNodeIdsRef.current !== nodeIds
+    if (!shouldFit) return
+    lastNodeIdsRef.current = nodeIds
+
+    const timeoutId = setTimeout(() => {
+      fitView({ padding: fitPadding, duration: 200 })
+    }, 50)
+    return () => clearTimeout(timeoutId)
   }, [nodeIds, fitPadding, fitView])
 
   return null
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index 3c76650ac6..7bd228d25e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -342,7 +342,7 @@ export function FolderItem({
             spellCheck='false'
           />
         ) : (
-          <>
+          <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
             <span
               className='min-w-0 flex-1 truncate font-medium text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
               onDoubleClick={handleDoubleClick}
@@ -357,7 +357,7 @@ export function FolderItem({
             >
               <MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
             </button>
-          </>
+          </div>
         )}
       </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx
index 506b9a6e24..7ffcf90859 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { type CSSProperties, useEffect, useMemo } from 'react'
+import { type CSSProperties, useMemo } from 'react'
 import { Avatar, AvatarFallback, AvatarImage, Tooltip } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { getUserColor } from '@/lib/workspaces/colors'
@@ -19,11 +19,6 @@ const AVATAR_CONFIG = {
 
 interface AvatarsProps {
   workflowId: string
-  /**
-   * Callback fired when the presence visibility changes.
-   * Used by parent components to adjust layout (e.g., text truncation spacing).
-   */
-  onPresenceChange?: (hasAvatars: boolean) => void
 }
 
 interface PresenceUser {
@@ -85,7 +80,7 @@ function UserAvatar({ user, index }: UserAvatarProps) {
  * @param props - Component props
  * @returns Avatar stack for workflow presence
  */
-export function Avatars({ workflowId, onPresenceChange }: AvatarsProps) {
+export function Avatars({ workflowId }: AvatarsProps) {
   const { presenceUsers, currentWorkflowId } = useSocket()
   const { data: session } = useSession()
   const currentUserId = session?.user?.id
@@ -127,19 +122,12 @@ export function Avatars({ workflowId, onPresenceChange }: AvatarsProps) {
     return { visibleUsers: visible, overflowCount: overflow }
   }, [workflowUsers, maxVisible])
 
-  useEffect(() => {
-    const hasAnyAvatars = visibleUsers.length > 0
-    if (typeof onPresenceChange === 'function') {
-      onPresenceChange(hasAnyAvatars)
-    }
-  }, [visibleUsers, onPresenceChange])
-
   if (visibleUsers.length === 0) {
     return null
   }
 
   return (
-    <div className='-space-x-1 flex items-center'>
+    <div className='-space-x-1 flex flex-shrink-0 items-center'>
       {overflowCount > 0 && (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index ddea49b135..8c3e7c2663 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -64,8 +64,6 @@ export function WorkflowItem({
   const [deleteModalNames, setDeleteModalNames] = useState<string | string[]>('')
   const [canDeleteCaptured, setCanDeleteCaptured] = useState(true)
 
-  const [hasAvatars, setHasAvatars] = useState(false)
-
   const capturedSelectionRef = useRef<{
     workflowIds: string[]
     workflowNames: string | string[]
@@ -319,48 +317,50 @@ export function WorkflowItem({
           className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px]'
           style={{ backgroundColor: workflow.color }}
         />
-        <div className={clsx('min-w-0 flex-1', hasAvatars && 'pr-[8px]')}>
-          {isEditing ? (
-            <input
-              ref={inputRef}
-              value={editValue}
-              onChange={(e) => setEditValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              onBlur={handleInputBlur}
-              className={clsx(
-                'w-full border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
-                active
-                  ? 'text-[var(--text-primary)]'
-                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
-              )}
-              maxLength={100}
-              disabled={isRenaming}
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-              }}
-              autoComplete='off'
-              autoCorrect='off'
-              autoCapitalize='off'
-              spellCheck='false'
-            />
-          ) : (
-            <div
-              className={clsx(
-                'truncate font-medium',
-                active
-                  ? 'text-[var(--text-primary)]'
-                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
-              )}
-              onDoubleClick={handleDoubleClick}
-            >
-              {workflow.name}
-            </div>
-          )}
+        <div className='min-w-0 flex-1'>
+          <div className='flex min-w-0 items-center gap-[8px]'>
+            {isEditing ? (
+              <input
+                ref={inputRef}
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onBlur={handleInputBlur}
+                className={clsx(
+                  'w-full min-w-0 border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
+                  active
+                    ? 'text-[var(--text-primary)]'
+                    : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+                )}
+                maxLength={100}
+                disabled={isRenaming}
+                onClick={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+                autoComplete='off'
+                autoCorrect='off'
+                autoCapitalize='off'
+                spellCheck='false'
+              />
+            ) : (
+              <div
+                className={clsx(
+                  'min-w-0 flex-1 truncate font-medium',
+                  active
+                    ? 'text-[var(--text-primary)]'
+                    : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+                )}
+                onDoubleClick={handleDoubleClick}
+              >
+                {workflow.name}
+              </div>
+            )}
+            {!isEditing && <Avatars workflowId={workflow.id} />}
+          </div>
         </div>
         {!isEditing && (
           <>
-            <Avatars workflowId={workflow.id} onPresenceChange={setHasAvatars} />
             <button
               type='button'
               onPointerDown={handleMorePointerDown}