Fix(agentflow) - Add iteration node full functionality

packages/agentflow/src/core/theme/createAgentflowTheme.ts

@@ -18,7 +18,11 @@ export function createAgentflowTheme(isDarkMode: boolean): Theme {
         palette: {
             mode,
             primary: tokens.colors.palette.primary,
-            secondary: tokens.colors.palette.secondary,
+            secondary: {
+                light: tokens.colors.palette.secondary.light[mode],
+                main: tokens.colors.palette.secondary.main[mode],
+                dark: tokens.colors.palette.secondary.dark[mode]
+            },
             success: tokens.colors.palette.success,
             error: tokens.colors.palette.error,
             warning: tokens.colors.palette.warning,
@@ -79,21 +83,16 @@ export function createAgentflowTheme(isDarkMode: boolean): Theme {
                 styleOverrides: {
                     root: {
                         '&.Mui-selected': {
-                            color: isDarkMode ? '#fff' : tokens.colors.palette.secondary.dark,
-                            backgroundColor: isDarkMode
-                                ? tokens.colors.background.listItemSelected.dark
-                                : tokens.colors.palette.secondary.light,
+                            color: tokens.colors.palette.secondary.dark[mode],
+                            backgroundColor: tokens.colors.background.listItemSelected[mode] || tokens.colors.palette.secondary.light[mode],
                             '&:hover': {
-                                backgroundColor: isDarkMode
-                                    ? tokens.colors.background.listItemSelected.dark
-                                    : tokens.colors.palette.secondary.light
+                                backgroundColor:
+                                    tokens.colors.background.listItemSelected[mode] || tokens.colors.palette.secondary.light[mode]
                             }
                         },
                         '&:hover': {
-                            color: isDarkMode ? '#fff' : tokens.colors.palette.secondary.dark,
-                            backgroundColor: isDarkMode
-                                ? tokens.colors.background.listItemSelected.dark
-                                : tokens.colors.palette.secondary.light
+                            color: tokens.colors.palette.secondary.dark[mode],
+                            backgroundColor: tokens.colors.background.listItemSelected[mode] || tokens.colors.palette.secondary.light[mode]
                         }
                     }
                 }

packages/agentflow/src/core/theme/tokens.ts

@@ -66,6 +66,9 @@ const baseColors = {
     secondaryLight: '#ede7f6',
     secondaryMain: '#673ab7',
     secondaryDark: '#5e35b1',
+    darkSecondaryLight: '#454c59',
+    darkSecondaryMain: '#7c4dff',
+    darkSecondaryDark: '#ffffff',
 
     // MUI palette colors - success (green)
     successLight: '#cdf5d8',
@@ -158,9 +161,9 @@ export const tokens = {
                 dark: baseColors.primaryDark
             },
             secondary: {
-                light: baseColors.secondaryLight,
-                main: baseColors.secondaryMain,
-                dark: baseColors.secondaryDark
+                light: { light: baseColors.secondaryLight, dark: baseColors.darkSecondaryLight },
+                main: { light: baseColors.secondaryMain, dark: baseColors.darkSecondaryMain },
+                dark: { light: baseColors.secondaryDark, dark: baseColors.darkSecondaryDark }
             },
             success: {
                 light: baseColors.successLight,
@@ -285,7 +288,11 @@ export const tokens = {
     // All values sit below the Canvas Kit modal overlay (30–50).
     zIndex: {
         canvasButton: 10, // FABs and button containers
-        canvasPanel: 20 // Open panels/poppers anchored to buttons
+        canvasPanel: 20, // Open panels/poppers anchored to buttons
+        // ReactFlow renders group/parent nodes at an elevated stacking context; edges drawn
+        // between children inside an iteration group must exceed that context to stay visible
+        // above the group body. 9999 is the conventional ReactFlow ceiling for this use case.
+        iterationEdge: 9999
     }
 } as const
 

packages/agentflow/src/core/types/flow.ts

@@ -33,6 +33,7 @@ export interface FlowEdge {
     data?: EdgeData
     selected?: boolean
     animated?: boolean
+    zIndex?: number
 }
 
 export interface FlowData {

packages/agentflow/src/features/canvas/containers/IterationNode.tsx

@@ -12,7 +12,7 @@ import { NodeInputHandle } from '../components/NodeInputHandle'
 import { getMinimumNodeHeight, NodeOutputHandles } from '../components/NodeOutputHandles'
 import { NodeStatusIndicator } from '../components/NodeStatusIndicator'
 import { NodeToolbarActions } from '../components/NodeToolbarActions'
-import { useNodeColors } from '../hooks/useNodeColors'
+import { useNodeColors, useOpenNodeEditor } from '../hooks'
 import { CardWrapper } from '../styled'
 
 import { NodeInfoDialog } from './NodeInfoDialog'
@@ -28,7 +28,10 @@ function IterationNodeComponent({ data }: IterationNodeProps) {
     const theme = useTheme()
     const { isDarkMode } = useConfigContext()
     const { apiBaseUrl } = useApiContext()
-    const { state } = useAgentflowContext()
+    const { state, executionState } = useAgentflowContext()
+    const nodeExecution = executionState?.nodeStates[data.id]
+    const status = nodeExecution?.status ?? data.status
+    const error = nodeExecution?.error ?? data.error
     const ref = useRef<HTMLDivElement>(null)
     const reactFlowWrapper = useRef<HTMLDivElement>(null)
     const updateNodeInternals = useUpdateNodeInternals()
@@ -40,6 +43,8 @@ function IterationNodeComponent({ data }: IterationNodeProps) {
         height: '250px'
     })
 
+    const { openNodeEditor } = useOpenNodeEditor()
+
     const { nodeColor, stateColor, backgroundColor } = useNodeColors({
         nodeColor: data.color,
         selected: data.selected,
@@ -71,7 +76,7 @@ function IterationNodeComponent({ data }: IterationNodeProps) {
     }, [data, ref, updateNodeInternals])
 
     const onResizeEnd = useCallback(
-        (e: unknown, params: { width: number; height: number }) => {
+        (_e: unknown, params: { width: number; height: number }) => {
             if (!ref.current) return
             setCardDimensions({
                 width: `${params.width}px`,
@@ -82,7 +87,12 @@ function IterationNodeComponent({ data }: IterationNodeProps) {
     )
 
     return (
-        <div ref={ref} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+        <div
+            ref={ref}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            onDoubleClick={() => openNodeEditor(data.id)}
+        >
             <NodeToolbar align='start' isVisible={true}>
                 <Box style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
                     <NodeIcon data={data} apiBaseUrl={apiBaseUrl} />
@@ -122,7 +132,7 @@ function IterationNodeComponent({ data }: IterationNodeProps) {
                 }}
                 border={false}
             >
-                <NodeStatusIndicator status={data.status} error={data.error} />
+                <NodeStatusIndicator status={status} error={error} />
 
                 <Box sx={{ width: '100%' }}>
                     <NodeInputHandle nodeId={data.id} nodeColor={nodeColor} hidden={data.hideInput} />

packages/agentflow/src/features/canvas/hooks/useFlowHandlers.test.tsx

@@ -4,7 +4,7 @@ import { makeFlowEdge, makeFlowNode, makeNodeData } from '@test-utils/factories'
 import { act, renderHook } from '@testing-library/react'
 
 import { isValidConnectionAgentflowV2 } from '@/core'
-import type { FlowEdge, FlowNode, NodeData } from '@/core/types'
+import type { FlowData, FlowEdge, FlowNode, NodeData } from '@/core/types'
 import { checkNodePlacementConstraints } from '@/core/validation'
 
 import { useFlowHandlers } from './useFlowHandlers'
@@ -180,6 +180,44 @@ describe('useFlowHandlers', () => {
             expect(onFlowChange).not.toHaveBeenCalled()
             expect(mockSetDirty).not.toHaveBeenCalled()
         })
+
+        it('should set zIndex on edge when both nodes share the same parentNode', () => {
+            nodes = [makeFlowNode('child_a', { parentNode: 'iter_0' }), makeFlowNode('child_b', { parentNode: 'iter_0' })]
+            const { result } = renderUseFlowHandlers()
+
+            act(() => {
+                result.current.handleConnect({ source: 'child_a', target: 'child_b', sourceHandle: null, targetHandle: null })
+            })
+
+            expect(onFlowChange).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    edges: expect.arrayContaining([expect.objectContaining({ zIndex: 9999 })])
+                })
+            )
+        })
+
+        it('should not set zIndex when nodes have different parents', () => {
+            nodes = [makeFlowNode('child_a', { parentNode: 'iter_0' }), makeFlowNode('child_b', { parentNode: 'iter_1' })]
+            const { result } = renderUseFlowHandlers()
+
+            act(() => {
+                result.current.handleConnect({ source: 'child_a', target: 'child_b', sourceHandle: null, targetHandle: null })
+            })
+
+            const edge = (onFlowChange.mock.calls[0][0] as FlowData).edges[0]
+            expect(edge.zIndex).toBeUndefined()
+        })
+
+        it('should not set zIndex when nodes are not inside any iteration group', () => {
+            const { result } = renderUseFlowHandlers()
+
+            act(() => {
+                result.current.handleConnect({ source: 'a', target: 'b', sourceHandle: null, targetHandle: null })
+            })
+
+            const edge = (onFlowChange.mock.calls[0][0] as FlowData).edges[0]
+            expect(edge.zIndex).toBeUndefined()
+        })
     })
 
     describe('handleNodesChange', () => {

packages/agentflow/src/features/canvas/hooks/useFlowHandlers.ts

@@ -2,6 +2,7 @@ import { useCallback, useRef } from 'react'
 import { addEdge, applyEdgeChanges, applyNodeChanges, Connection, EdgeChange, Node, NodeChange } from 'reactflow'
 
 import { getNodeColor, getUniqueNodeId, getUniqueNodeLabel, initNode, isValidConnectionAgentflowV2, resolveNodeType } from '@/core'
+import { tokens } from '@/core/theme/tokens'
 import type { FlowDataCallback, FlowEdge, FlowNode, NodeDataSchema } from '@/core/types'
 import { checkNodePlacementConstraints } from '@/core/validation'
 import { useAgentflowContext } from '@/infrastructure/store'
@@ -71,9 +72,14 @@ export function useFlowHandlers({
                 edgeLabel = raw === '0' ? 'proceed' : 'reject'
             }
 
+            const sourceParent = sourceNode?.parentNode
+            const targetParent = targetNode?.parentNode
+            const isWithinIterationNode = sourceParent && targetParent && sourceParent === targetParent
+
             const newEdge = {
                 ...params,
                 type: 'agentflowEdge',
+                ...(isWithinIterationNode && { zIndex: tokens.zIndex.iterationEdge }),
                 data: {
                     sourceColor,
                     targetColor,

packages/agentflow/src/features/node-editor/useAvailableVariables.test.tsx

@@ -5,7 +5,7 @@ import { useAvailableVariables } from './useAvailableVariables'
 // --- Mocks ---
 
 const mockState = {
-    nodes: [] as Array<{ id: string; data: Record<string, unknown> }>,
+    nodes: [] as Array<{ id: string; extent?: string; parentNode?: string; data: Record<string, unknown> }>,
     edges: [] as Array<{ source: string; target: string }>
 }
 
@@ -150,4 +150,47 @@ describe('useAvailableVariables', () => {
         const nodeOutputs = result.current.filter((i) => i.category === 'Node Outputs')
         expect(nodeOutputs).toHaveLength(0)
     })
+
+    it('includes $iteration variable when node is inside an iteration group', () => {
+        mockState.nodes = [
+            { id: 'iter_0', data: { id: 'iter_0', name: 'iterationAgentflow', label: 'Iteration' } },
+            {
+                id: 'child_0',
+                extent: 'parent',
+                parentNode: 'iter_0',
+                data: { id: 'child_0', name: 'directReplyAgentflow', label: 'Direct Reply' }
+            }
+        ]
+
+        const { result } = renderHook(() => useAvailableVariables('child_0'))
+
+        const iterationItems = result.current.filter((i) => i.category === 'Iteration')
+        expect(iterationItems).toHaveLength(1)
+        expect(iterationItems[0].label).toBe('$iteration')
+        expect(iterationItems[0].value).toBe('{{$iteration}}')
+    })
+
+    it('does not include $iteration variable when node is not inside an iteration group', () => {
+        mockState.nodes = [makeNode('agent_0', 'agentAgentflow')]
+
+        const { result } = renderHook(() => useAvailableVariables('agent_0'))
+
+        const iterationItems = result.current.filter((i) => i.category === 'Iteration')
+        expect(iterationItems).toHaveLength(0)
+    })
+
+    it('lists $iteration before other variables when inside an iteration group', () => {
+        mockState.nodes = [
+            {
+                id: 'child_0',
+                extent: 'parent',
+                parentNode: 'iter_0',
+                data: { id: 'child_0', name: 'directReplyAgentflow', label: 'Direct Reply' }
+            }
+        ]
+
+        const { result } = renderHook(() => useAvailableVariables('child_0'))
+
+        expect(result.current[0].label).toBe('$iteration')
+    })
 })

packages/agentflow/src/features/node-editor/useAvailableVariables.ts

@@ -70,6 +70,17 @@ export function useAvailableVariables(nodeId: string): VariableItem[] {
     return useMemo(() => {
         const items: VariableItem[] = [...GLOBAL_VARIABLES]
 
+        // Nodes inside an iteration group (extent === 'parent') get access to $iteration
+        const currentNode = nodes.find((n) => n.id === nodeId)
+        if (currentNode?.extent === 'parent') {
+            items.unshift({
+                label: '$iteration',
+                description: 'Iteration item. For JSON, use dot notation: $iteration.name',
+                category: 'Iteration',
+                value: '{{$iteration}}'
+            })
+        }
+
         // ── Upstream node outputs ────────────────────────────────────────
         const upstreamNodes = getUpstreamNodes(nodeId, nodes, edges)
         for (const node of upstreamNodes) {

packages/agentflow/src/infrastructure/store/AgentflowContext.test.tsx

@@ -222,6 +222,95 @@ describe('AgentflowContext', () => {
             expect(result.current.state.edges).toHaveLength(1)
             expect(result.current.state.edges[0].id).toBe('edge-3-4')
         })
+
+        it('should remove child nodes when an iteration node is deleted', () => {
+            const initialFlow: FlowData = {
+                nodes: [
+                    makeFlowNode('iteration-1', { type: 'iteration' }),
+                    makeFlowNode('child-1', { parentNode: 'iteration-1', extent: 'parent' }),
+                    makeFlowNode('child-2', { parentNode: 'iteration-1', extent: 'parent' }),
+                    makeFlowNode('other-1')
+                ],
+                edges: []
+            }
+
+            const { result } = renderHook(() => useAgentflowContext(), {
+                wrapper: createWrapper(initialFlow)
+            })
+
+            expect(result.current.state.nodes).toHaveLength(4)
+
+            act(() => {
+                result.current.deleteNode('iteration-1')
+            })
+
+            const remainingIds = result.current.state.nodes.map((n) => n.id)
+            expect(remainingIds).toEqual(['other-1'])
+            expect(remainingIds).not.toContain('iteration-1')
+            expect(remainingIds).not.toContain('child-1')
+            expect(remainingIds).not.toContain('child-2')
+        })
+
+        it('should remove edges connected to child nodes when an iteration node is deleted', () => {
+            const initialFlow: FlowData = {
+                nodes: [
+                    makeFlowNode('iteration-1', { type: 'iteration' }),
+                    makeFlowNode('child-1', { parentNode: 'iteration-1', extent: 'parent' }),
+                    makeFlowNode('child-2', { parentNode: 'iteration-1', extent: 'parent' }),
+                    makeFlowNode('upstream-1'),
+                    makeFlowNode('downstream-1')
+                ],
+                edges: [
+                    makeEdge('upstream-1', 'iteration-1', { id: 'edge-in' }),
+                    makeEdge('child-1', 'child-2', { id: 'edge-inner' }),
+                    makeEdge('iteration-1', 'downstream-1', { id: 'edge-out' }),
+                    makeEdge('upstream-1', 'downstream-1', { id: 'edge-unrelated' })
+                ]
+            }
+
+            const { result } = renderHook(() => useAgentflowContext(), {
+                wrapper: createWrapper(initialFlow)
+            })
+
+            expect(result.current.state.edges).toHaveLength(4)
+
+            act(() => {
+                result.current.deleteNode('iteration-1')
+            })
+
+            const remainingEdgeIds = result.current.state.edges.map((e) => e.id)
+            expect(remainingEdgeIds).toEqual(['edge-unrelated'])
+            expect(remainingEdgeIds).not.toContain('edge-in')
+            expect(remainingEdgeIds).not.toContain('edge-inner')
+            expect(remainingEdgeIds).not.toContain('edge-out')
+        })
+
+        it('should recursively remove nested children when an iteration node is deleted', () => {
+            const initialFlow: FlowData = {
+                nodes: [
+                    makeFlowNode('iteration-1', { type: 'iteration' }),
+                    makeFlowNode('child-1', { parentNode: 'iteration-1', extent: 'parent' }),
+                    makeFlowNode('iteration-2', { parentNode: 'iteration-1', extent: 'parent', type: 'iteration' }),
+                    makeFlowNode('grandchild-1', { parentNode: 'iteration-2', extent: 'parent' }),
+                    makeFlowNode('other-1')
+                ],
+                edges: [makeEdge('grandchild-1', 'child-1', { id: 'edge-grand' })]
+            }
+
+            const { result } = renderHook(() => useAgentflowContext(), {
+                wrapper: createWrapper(initialFlow)
+            })
+
+            expect(result.current.state.nodes).toHaveLength(5)
+
+            act(() => {
+                result.current.deleteNode('iteration-1')
+            })
+
+            const remainingIds = result.current.state.nodes.map((n) => n.id)
+            expect(remainingIds).toEqual(['other-1'])
+            expect(result.current.state.edges).toHaveLength(0)
+        })
     })
 
     describe('duplicateNode', () => {