fix(ops): fix subflow resizing on exit (#2760)

* fix(sockets): broadcast handles and enabled/disabled state

* made all ops batched, removed all individual ops

* fix subflow resizing on exit

* removed unused custom event

* fix failing tests, update testing

* fix test mock

Author: waleedlatif1

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

@@ -156,7 +156,7 @@ export function ConditionInput({
     [key: string]: number[]
   }>({})
   const updateNodeInternals = useUpdateNodeInternals()
-  const removeEdge = useWorkflowStore((state) => state.removeEdge)
+  const batchRemoveEdges = useWorkflowStore((state) => state.batchRemoveEdges)
   const edges = useWorkflowStore((state) => state.edges)
 
   const prevStoreValueRef = useRef<string | null>(null)
@@ -657,11 +657,12 @@ export function ConditionInput({
     if (isPreview || disabled || conditionalBlocks.length <= 2) return
 
     // Remove any associated edges before removing the block
-    edges.forEach((edge) => {
-      if (edge.sourceHandle?.startsWith(`condition-${id}`)) {
-        removeEdge(edge.id)
-      }
-    })
+    const edgeIdsToRemove = edges
+      .filter((edge) => edge.sourceHandle?.startsWith(`condition-${id}`))
+      .map((edge) => edge.id)
+    if (edgeIdsToRemove.length > 0) {
+      batchRemoveEdges(edgeIdsToRemove)
+    }
 
     if (conditionalBlocks.length === 1) return
     shouldPersistRef.current = true

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-node-utilities.ts

@@ -373,16 +373,20 @@ export function useNodeUtilities(blocks: Record<string, any>) {
    * Updates a node's parent with proper position calculation
    * @param nodeId ID of the node being reparented
    * @param newParentId ID of the new parent (or null to remove parent)
-   * @param updateBlockPosition Function to update the position of a block
-   * @param updateParentId Function to update the parent ID of a block
+   * @param batchUpdatePositions Function to batch update positions of blocks
+   * @param batchUpdateBlocksWithParent Function to batch update blocks with parent info
    * @param resizeCallback Function to resize loop nodes after parent update
    */
   const updateNodeParent = useCallback(
     (
       nodeId: string,
       newParentId: string | null,
-      updateBlockPosition: (id: string, position: { x: number; y: number }) => void,
-      updateParentId: (id: string, parentId: string, extent: 'parent') => void,
+      batchUpdatePositions: (
+        updates: Array<{ id: string; position: { x: number; y: number } }>
+      ) => void,
+      batchUpdateBlocksWithParent: (
+        updates: Array<{ id: string; position: { x: number; y: number }; parentId?: string }>
+      ) => void,
       resizeCallback: () => void
     ) => {
       const node = getNodes().find((n) => n.id === nodeId)
@@ -394,15 +398,15 @@ export function useNodeUtilities(blocks: Record<string, any>) {
       if (newParentId) {
         const relativePosition = calculateRelativePosition(nodeId, newParentId)
 
-        updateBlockPosition(nodeId, relativePosition)
-        updateParentId(nodeId, newParentId, 'parent')
+        batchUpdatePositions([{ id: nodeId, position: relativePosition }])
+        batchUpdateBlocksWithParent([
+          { id: nodeId, position: relativePosition, parentId: newParentId },
+        ])
       } else if (currentParentId) {
         const absolutePosition = getNodeAbsolutePosition(nodeId)
 
-        // First set the absolute position so the node visually stays in place
-        updateBlockPosition(nodeId, absolutePosition)
-        // Then clear the parent relationship in the store (empty string removes parentId/extent)
-        updateParentId(nodeId, '', 'parent')
+        batchUpdatePositions([{ id: nodeId, position: absolutePosition }])
+        batchUpdateBlocksWithParent([{ id: nodeId, position: absolutePosition, parentId: '' }])
       }
 
       resizeCallback()

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

@@ -443,11 +443,9 @@ const WorkflowContent = React.memo(() => {
   }, [userPermissions, currentWorkflow.isSnapshotView])
 
   const {
-    collaborativeAddEdge: addEdge,
-    collaborativeRemoveEdge: removeEdge,
+    collaborativeBatchAddEdges,
     collaborativeBatchRemoveEdges,
     collaborativeBatchUpdatePositions,
-    collaborativeUpdateParentId: updateParentId,
     collaborativeBatchUpdateParent,
     collaborativeBatchAddBlocks,
     collaborativeBatchRemoveBlocks,
@@ -464,6 +462,34 @@ const WorkflowContent = React.memo(() => {
     [collaborativeBatchUpdatePositions]
   )
 
+  const addEdge = useCallback(
+    (edge: Edge) => {
+      collaborativeBatchAddEdges([edge])
+    },
+    [collaborativeBatchAddEdges]
+  )
+
+  const removeEdge = useCallback(
+    (edgeId: string) => {
+      collaborativeBatchRemoveEdges([edgeId])
+    },
+    [collaborativeBatchRemoveEdges]
+  )
+
+  const batchUpdateBlocksWithParent = useCallback(
+    (updates: Array<{ id: string; position: { x: number; y: number }; parentId?: string }>) => {
+      collaborativeBatchUpdateParent(
+        updates.map((u) => ({
+          blockId: u.id,
+          newParentId: u.parentId || null,
+          newPosition: u.position,
+          affectedEdges: [],
+        }))
+      )
+    },
+    [collaborativeBatchUpdateParent]
+  )
+
   const addBlock = useCallback(
     (
       id: string,
@@ -570,8 +596,8 @@ const WorkflowContent = React.memo(() => {
       const result = updateNodeParentUtil(
         nodeId,
         newParentId,
-        updateBlockPosition,
-        updateParentId,
+        collaborativeBatchUpdatePositions,
+        batchUpdateBlocksWithParent,
         () => resizeLoopNodesWrapper()
       )
 
@@ -594,8 +620,8 @@ const WorkflowContent = React.memo(() => {
     },
     [
       getNodes,
-      updateBlockPosition,
-      updateParentId,
+      collaborativeBatchUpdatePositions,
+      batchUpdateBlocksWithParent,
       blocks,
       edgesForDisplay,
       getNodeAbsolutePosition,
@@ -903,22 +929,15 @@ const WorkflowContent = React.memo(() => {
     (blockId: string, edgesToRemove: Edge[]): void => {
       if (edgesToRemove.length === 0) return
 
-      window.dispatchEvent(new CustomEvent('skip-edge-recording', { detail: { skip: true } }))
-
-      try {
-        edgesToRemove.forEach((edge) => {
-          removeEdge(edge.id)
-        })
+      const edgeIds = edgesToRemove.map((edge) => edge.id)
+      collaborativeBatchRemoveEdges(edgeIds, { skipUndoRedo: true })
 
-        logger.debug('Removed edges for node', {
-          blockId,
-          edgeCount: edgesToRemove.length,
-        })
-      } finally {
-        window.dispatchEvent(new CustomEvent('skip-edge-recording', { detail: { skip: false } }))
-      }
+      logger.debug('Removed edges for node', {
+        blockId,
+        edgeCount: edgesToRemove.length,
+      })
     },
-    [removeEdge]
+    [collaborativeBatchRemoveEdges]
   )
 
   /** Finds the closest block to a position for auto-connect. */
@@ -1942,27 +1961,37 @@ const WorkflowContent = React.memo(() => {
 
         const movingNodeIds = new Set(validBlockIds)
 
+        // Find boundary edges (edges that cross the subflow boundary)
         const boundaryEdges = edgesForDisplay.filter((e) => {
           const sourceInSelection = movingNodeIds.has(e.source)
           const targetInSelection = movingNodeIds.has(e.target)
           return sourceInSelection !== targetInSelection
         })
 
-        // Collect absolute positions BEFORE updating parents
+        // Collect absolute positions BEFORE any mutations
         const absolutePositions = new Map<string, { x: number; y: number }>()
         for (const blockId of validBlockIds) {
           absolutePositions.set(blockId, getNodeAbsolutePosition(blockId))
         }
 
-        for (const blockId of validBlockIds) {
+        // 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
           )
-          removeEdgesForNode(blockId, edgesForThisNode)
-          updateNodeParent(blockId, null, edgesForThisNode)
-        }
+          return {
+            blockId,
+            newParentId: null,
+            newPosition: absolutePosition,
+            affectedEdges: edgesForThisNode,
+          }
+        })
 
-        // Immediately update displayNodes to prevent React Flow from using stale parent data
+        // Single atomic batch update (handles edge removal + parent update + undo/redo)
+        collaborativeBatchUpdateParent(updates)
+
+        // Update displayNodes once to prevent React Flow from using stale parent data
         setDisplayNodes((nodes) =>
           nodes.map((n) => {
             const absPos = absolutePositions.get(n.id)
@@ -1977,6 +2006,8 @@ const WorkflowContent = React.memo(() => {
             return n
           })
         )
+
+        // Note: Container resize happens automatically via the derivedNodes effect
       } catch (err) {
         logger.error('Failed to remove from subflow', { err })
       }
@@ -1985,7 +2016,7 @@ const WorkflowContent = React.memo(() => {
     window.addEventListener('remove-from-subflow', handleRemoveFromSubflow as EventListener)
     return () =>
       window.removeEventListener('remove-from-subflow', handleRemoveFromSubflow as EventListener)
-  }, [blocks, edgesForDisplay, removeEdgesForNode, updateNodeParent, getNodeAbsolutePosition])
+  }, [blocks, edgesForDisplay, getNodeAbsolutePosition, collaborativeBatchUpdateParent])
 
   /** Handles node position changes - updates local state for smooth drag, syncs to store only on drag end. */
   const onNodesChange = useCallback((changes: NodeChange[]) => {
@@ -2072,7 +2103,12 @@ const WorkflowContent = React.memo(() => {
     // Create a mapping of node IDs to check for missing parent references
     const nodeIds = new Set(Object.keys(blocks))
 
-    // Check for nodes with invalid parent references
+    // Check for nodes with invalid parent references and collect updates
+    const orphanedUpdates: Array<{
+      id: string
+      position: { x: number; y: number }
+      parentId: string
+    }> = []
     Object.entries(blocks).forEach(([id, block]) => {
       const parentId = block.data?.parentId
 
@@ -2084,22 +2120,28 @@ const WorkflowContent = React.memo(() => {
         })
 
         const absolutePosition = getNodeAbsolutePosition(id)
-        updateBlockPosition(id, absolutePosition)
-        updateParentId(id, '', 'parent')
+        orphanedUpdates.push({ id, position: absolutePosition, parentId: '' })
       }
     })
-  }, [blocks, updateBlockPosition, updateParentId, getNodeAbsolutePosition, isWorkflowReady])
+
+    // Batch update all orphaned nodes at once
+    if (orphanedUpdates.length > 0) {
+      batchUpdateBlocksWithParent(orphanedUpdates)
+    }
+  }, [blocks, batchUpdateBlocksWithParent, getNodeAbsolutePosition, isWorkflowReady])
 
   /** Handles edge removal changes. */
   const onEdgesChange = useCallback(
     (changes: any) => {
-      changes.forEach((change: any) => {
-        if (change.type === 'remove') {
-          removeEdge(change.id)
-        }
-      })
+      const edgeIdsToRemove = changes
+        .filter((change: any) => change.type === 'remove')
+        .map((change: any) => change.id)
+
+      if (edgeIdsToRemove.length > 0) {
+        collaborativeBatchRemoveEdges(edgeIdsToRemove)
+      }
     },
-    [removeEdge]
+    [collaborativeBatchRemoveEdges]
   )
 
   /**
@@ -2683,9 +2725,6 @@ const WorkflowContent = React.memo(() => {
 
         const edgesToAdd: Edge[] = autoConnectEdge ? [autoConnectEdge] : []
 
-        // Skip recording these edges separately since they're part of the parent update
-        window.dispatchEvent(new CustomEvent('skip-edge-recording', { detail: { skip: true } }))
-
         // Moving to a new parent container - pass both removed and added edges for undo/redo
         const affectedEdges = [...edgesToRemove, ...edgesToAdd]
         updateNodeParent(node.id, potentialParentId, affectedEdges)
@@ -2704,10 +2743,10 @@ const WorkflowContent = React.memo(() => {
           })
         )
 
-        // Now add the edges after parent update
-        edgesToAdd.forEach((edge) => addEdge(edge))
-
-        window.dispatchEvent(new CustomEvent('skip-edge-recording', { detail: { skip: false } }))
+        // Add edges after parent update (skip undo recording - it's part of parent update)
+        if (edgesToAdd.length > 0) {
+          collaborativeBatchAddEdges(edgesToAdd, { skipUndoRedo: true })
+        }
       } else if (!potentialParentId && dragStartParentId) {
         // Moving OUT of a subflow to canvas
         // Get absolute position BEFORE removing from parent
@@ -2761,7 +2800,7 @@ const WorkflowContent = React.memo(() => {
       potentialParentId,
       updateNodeParent,
       updateBlockPosition,
-      addEdge,
+      collaborativeBatchAddEdges,
       tryCreateAutoConnectEdge,
       blocks,
       edgesForDisplay,

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/access-control/access-control.tsx

@@ -25,8 +25,8 @@ import { Input as BaseInput, Skeleton } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionStatus } from '@/lib/billing/client'
 import type { PermissionGroupConfig } from '@/lib/permission-groups/types'
+import { getUserColor } from '@/lib/workspaces/colors'
 import { getUserRole } from '@/lib/workspaces/organization'
-import { getUserColor } from '@/app/workspace/[workspaceId]/w/utils/get-user-color'
 import { getAllBlocks } from '@/blocks'
 import { useOrganization, useOrganizations } from '@/hooks/queries/organization'
 import {