improvement(copilot): state persistence, subflow recreation, dynamic handle topologies (#3569)

* improvement(copilot): state persistence, subflow recreation, dynamic handle topologies

* address comments

Author: icecrasher321

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

@@ -19,6 +19,11 @@ const {
 
 vi.mock('@/lib/auth/hybrid', () => ({
   checkHybridAuth: mockCheckHybridAuth,
+  AuthType: {
+    SESSION: 'session',
+    API_KEY: 'api_key',
+    INTERNAL_JWT: 'internal_jwt',
+  },
 }))
 
 vi.mock('@/lib/workflows/utils', () => ({

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

@@ -11,6 +11,7 @@ import { extractAndPersistCustomTools } from '@/lib/workflows/persistence/custom
 import { saveWorkflowToNormalizedTables } from '@/lib/workflows/persistence/utils'
 import { sanitizeAgentToolsInBlocks } from '@/lib/workflows/sanitization/validation'
 import { authorizeWorkflowByWorkspacePermission } from '@/lib/workflows/utils'
+import { validateEdges } from '@/stores/workflows/workflow/edge-validation'
 import type { BlockState, WorkflowState } from '@/stores/workflows/workflow/types'
 import { generateLoopBlocks, generateParallelBlocks } from '@/stores/workflows/workflow/utils'
 
@@ -180,12 +181,16 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
     )
 
     const typedBlocks = filteredBlocks as Record<string, BlockState>
+    const validatedEdges = validateEdges(state.edges as WorkflowState['edges'], typedBlocks)
+    const validationWarnings = validatedEdges.dropped.map(
+      ({ edge, reason }) => `Dropped edge "${edge.id}": ${reason}`
+    )
     const canonicalLoops = generateLoopBlocks(typedBlocks)
     const canonicalParallels = generateParallelBlocks(typedBlocks)
 
     const workflowState = {
       blocks: filteredBlocks,
-      edges: state.edges,
+      edges: validatedEdges.valid,
       loops: canonicalLoops,
       parallels: canonicalParallels,
       lastSaved: state.lastSaved || Date.now(),
@@ -276,7 +281,10 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
       )
     }
 
-    return NextResponse.json({ success: true, warnings }, { status: 200 })
+    return NextResponse.json(
+      { success: true, warnings: [...warnings, ...validationWarnings] },
+      { status: 200 }
+    )
   } catch (error: any) {
     const elapsed = Date.now() - startTime
     logger.error(

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

@@ -4,7 +4,6 @@ import { createLogger } from '@sim/logger'
 import { ChevronDown, ChevronsUpDown, ChevronUp, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import Editor from 'react-simple-code-editor'
-import { useUpdateNodeInternals } from 'reactflow'
 import {
   Button,
   Code,
@@ -173,7 +172,6 @@ export function ConditionInput({
   const [visualLineHeights, setVisualLineHeights] = useState<{
     [key: string]: number[]
   }>({})
-  const updateNodeInternals = useUpdateNodeInternals()
   const batchRemoveEdges = useWorkflowStore((state) => state.batchRemoveEdges)
   const edges = useWorkflowStore((state) => state.edges)
 
@@ -352,17 +350,8 @@ export function ConditionInput({
     if (newValue !== prevStoreValueRef.current) {
       prevStoreValueRef.current = newValue
       setStoreValue(newValue)
-      updateNodeInternals(blockId)
     }
-  }, [
-    conditionalBlocks,
-    blockId,
-    subBlockId,
-    setStoreValue,
-    updateNodeInternals,
-    isReady,
-    isPreview,
-  ])
+  }, [conditionalBlocks, blockId, subBlockId, setStoreValue, isReady, isPreview])
 
   // Cleanup when component unmounts
   useEffect(() => {
@@ -708,8 +697,6 @@ export function ConditionInput({
 
     shouldPersistRef.current = true
     setConditionalBlocks((blocks) => updateBlockTitles(blocks.filter((block) => block.id !== id)))
-
-    setTimeout(() => updateNodeInternals(blockId), 0)
   }
 
   const moveBlock = (id: string, direction: 'up' | 'down') => {
@@ -737,8 +724,6 @@ export function ConditionInput({
     ]
     shouldPersistRef.current = true
     setConditionalBlocks(updateBlockTitles(newBlocks))
-
-    setTimeout(() => updateNodeInternals(blockId), 0)
   }
 
   // Add useEffect to handle keyboard events for both dropdowns

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

@@ -198,14 +198,14 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
         </div>
 
         {/*
-         * Click-catching background — selects this subflow when the body area is clicked.
-         * No event bubbling concern: ReactFlow renders child nodes as viewport-level siblings,
-         * not as DOM children of this component, so child clicks never reach this div.
+         * Subflow body background. Uses pointer-events: none so that edges rendered
+         * inside the subflow remain clickable. The subflow node wrapper also has
+         * pointer-events: none (set in workflow.tsx), so body-area clicks pass
+         * through to the pane. Subflow selection is done via the header above.
          */}
         <div
           className='absolute inset-0 top-[44px] rounded-b-[8px]'
-          style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
-          onClick={() => setCurrentBlockId(id)}
+          style={{ pointerEvents: 'none' }}
         />
 
         {!isPreview && (

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

@@ -11,6 +11,7 @@ import { createMcpToolId } from '@/lib/mcp/shared'
 import { getProviderIdFromServiceId } from '@/lib/oauth'
 import type { FilterRule, SortRule } from '@/lib/table/types'
 import { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
+import { getConditionRows, getRouterRows } from '@/lib/workflows/dynamic-handle-topology'
 import {
   buildCanonicalIndex,
   evaluateSubBlockCondition,
@@ -1049,6 +1050,9 @@ export const WorkflowBlock = memo(function WorkflowBlock({
 
   const subBlockRows = subBlockRowsData.rows
   const subBlockState = subBlockRowsData.stateToUse
+  const topologySubBlocks = data.isPreview
+    ? (data.blockState?.subBlocks ?? {})
+    : (currentStoreBlock?.subBlocks ?? {})
   const effectiveAdvanced = useMemo(() => {
     const rawValues = Object.entries(subBlockState).reduce<Record<string, unknown>>(
       (acc, [key, entry]) => {
@@ -1108,34 +1112,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
    */
   const conditionRows = useMemo(() => {
     if (type !== 'condition') return [] as { id: string; title: string; value: string }[]
-
-    const conditionsValue = subBlockState.conditions?.value
-    const raw = typeof conditionsValue === 'string' ? conditionsValue : undefined
-
-    try {
-      if (raw) {
-        const parsed = JSON.parse(raw) as unknown
-        if (Array.isArray(parsed)) {
-          return parsed.map((item: unknown, index: number) => {
-            const conditionItem = item as { id?: string; value?: unknown }
-            const title = index === 0 ? 'if' : index === parsed.length - 1 ? 'else' : 'else if'
-            return {
-              id: conditionItem?.id ?? `${id}-cond-${index}`,
-              title,
-              value: typeof conditionItem?.value === 'string' ? conditionItem.value : '',
-            }
-          })
-        }
-      }
-    } catch (error) {
-      logger.warn('Failed to parse condition subblock value', { error, blockId: id })
-    }
-
-    return [
-      { id: `${id}-if`, title: 'if', value: '' },
-      { id: `${id}-else`, title: 'else', value: '' },
-    ]
-  }, [type, subBlockState, id])
+    return getConditionRows(id, topologySubBlocks.conditions?.value)
+  }, [type, topologySubBlocks, id])
 
   /**
    * Compute per-route rows (id/value) for router_v2 blocks so we can render
@@ -1144,31 +1122,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
    */
   const routerRows = useMemo(() => {
     if (type !== 'router_v2') return [] as { id: string; value: string }[]
-
-    const routesValue = subBlockState.routes?.value
-    const raw = typeof routesValue === 'string' ? routesValue : undefined
-
-    try {
-      if (raw) {
-        const parsed = JSON.parse(raw) as unknown
-        if (Array.isArray(parsed)) {
-          return parsed.map((item: unknown, index: number) => {
-            const routeItem = item as { id?: string; value?: string }
-            return {
-              // Use stable ID format that matches ConditionInput's generateStableId
-              id: routeItem?.id ?? `${id}-route${index + 1}`,
-              value: routeItem?.value ?? '',
-            }
-          })
-        }
-      }
-    } catch (error) {
-      logger.warn('Failed to parse router routes value', { error, blockId: id })
-    }
-
-    // Fallback must match ConditionInput's default: generateStableId(blockId, 'route1') = `${blockId}-route1`
-    return [{ id: `${id}-route1`, value: '' }]
-  }, [type, subBlockState, id])
+    return getRouterRows(id, topologySubBlocks.routes?.value)
+  }, [type, topologySubBlocks, id])
 
   /**
    * Compute and publish deterministic layout metrics for workflow blocks.

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts

@@ -6,6 +6,7 @@ export { useBlockOutputFields } from './use-block-output-fields'
 export { useBlockVisual } from './use-block-visual'
 export { useCanvasContextMenu } from './use-canvas-context-menu'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
+export { useDynamicHandleRefresh } from './use-dynamic-handle-refresh'
 export { useNodeUtilities } from './use-node-utilities'
 export { usePreventZoom } from './use-prevent-zoom'
 export { useScrollManagement } from './use-scroll-management'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-dynamic-handle-refresh.ts

@@ -0,0 +1,33 @@
+import { useEffect, useMemo, useRef } from 'react'
+import { useUpdateNodeInternals } from 'reactflow'
+import {
+  collectDynamicHandleTopologySignatures,
+  getChangedDynamicHandleBlockIds,
+} from '@/lib/workflows/dynamic-handle-topology'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+
+export function useDynamicHandleRefresh() {
+  const updateNodeInternals = useUpdateNodeInternals()
+  const blocks = useWorkflowStore((state) => state.blocks)
+  const previousSignaturesRef = useRef<Map<string, string>>(new Map())
+
+  const signatures = useMemo(() => collectDynamicHandleTopologySignatures(blocks), [blocks])
+
+  useEffect(() => {
+    const changedBlockIds = getChangedDynamicHandleBlockIds(
+      previousSignaturesRef.current,
+      signatures
+    )
+    previousSignaturesRef.current = signatures
+
+    if (changedBlockIds.length === 0) {
+      return
+    }
+
+    const frameId = requestAnimationFrame(() => {
+      changedBlockIds.forEach((blockId) => updateNodeInternals(blockId))
+    })
+
+    return () => cancelAnimationFrame(frameId)
+  }, [signatures, updateNodeInternals])
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/auto-layout-utils.ts

@@ -116,7 +116,7 @@ export async function applyAutoLayoutAndUpdateStore(
       lastSaved: Date.now(),
     }
 
-    useWorkflowStore.setState(newWorkflowState)
+    useWorkflowStore.getState().replaceWorkflowState(newWorkflowState)
 
     logger.info('Successfully updated workflow store with auto layout', { workflowId })
 
@@ -168,9 +168,9 @@ export async function applyAutoLayoutAndUpdateStore(
       })
 
       // Revert the store changes since database save failed
-      useWorkflowStore.setState({
+      useWorkflowStore.getState().replaceWorkflowState({
         ...workflowStore.getWorkflowState(),
-        blocks: blocks,
+        blocks,
         lastSaved: workflowStore.lastSaved,
       })
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './auto-layout-utils'
 export * from './block-protection-utils'
 export * from './block-ring-utils'
+export * from './node-derivation'
 export * from './node-position-utils'
 export * from './workflow-canvas-helpers'
 export * from './workflow-execution-utils'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/node-derivation.ts

@@ -0,0 +1,32 @@
+import type { BlockState } from '@/stores/workflows/workflow/types'
+
+export const Z_INDEX = {
+  ROOT_BLOCK: 10,
+  CHILD_BLOCK: 1000,
+} as const
+
+export function computeContainerZIndex(
+  block: Pick<BlockState, 'data'>,
+  allBlocks: Record<string, Pick<BlockState, 'data'>>
+): number {
+  let depth = 0
+  let parentId = block.data?.parentId
+
+  while (parentId && depth < 100) {
+    depth++
+    parentId = allBlocks[parentId]?.data?.parentId
+  }
+
+  return depth
+}
+
+export function computeBlockZIndex(
+  block: Pick<BlockState, 'type' | 'data'>,
+  allBlocks: Record<string, Pick<BlockState, 'type' | 'data'>>
+): number {
+  if (block.type === 'loop' || block.type === 'parallel') {
+    return computeContainerZIndex(block, allBlocks)
+  }
+
+  return block.data?.parentId ? Z_INDEX.CHILD_BLOCK : Z_INDEX.ROOT_BLOCK
+}