refactor(agentflow): remove unused components, fix connector anchor bug (#5863)

refactor(agentflow): remove unused components, fix connector anchor bug, and enhance test coverage

- Deleted unused Input and ConfirmDialog components to streamline the codebase.
- Updated jest.config.js to improve coverage thresholds and exclude deprecated hooks.
- Enhanced test coverage for useAgentflow and AgentflowContext with new E2E tests.
- Adjusted architecture documentation to reflect the removal of components and updated file structure.

Author: jocelynlin-wd

packages/agentflow/ARCHITECTURE.md

@@ -30,8 +30,6 @@ src/
 ```
 atoms/
 ├── MainCard.tsx            # Styled card wrapper
-├── Input.tsx               # Basic input component
-├── ConfirmDialog.tsx       # Confirmation dialog with context
 ├── NodeInputHandler.tsx    # Form input for node properties
 └── index.ts                # Central export
 ```
@@ -157,14 +155,12 @@ infrastructure/
 │   ├── client.ts           # Axios factory
 │   ├── nodes.ts            # Nodes API endpoints
 │   ├── chatflows.ts        # Chatflows API endpoints
-│   ├── hooks/
-│   │   └── useApi.ts       # API hook (co-located)
 │   └── index.ts
 │
 └── store/                  # State management
+    ├── AgentflowContext.tsx # Flow state context
     ├── ApiContext.tsx      # API client context
     ├── ConfigContext.tsx   # Configuration context
-    ├── AgentflowContext.tsx # Flow state context
     ├── useFlowInstance.ts  # ReactFlow instance hook
     └── index.ts
 ```

packages/agentflow/TESTS.md

@@ -34,8 +34,8 @@ These modules carry the highest risk. Test in the same PR when modifying.
 | `src/infrastructure/api/client.ts` | `createApiClient` — headers, auth token, 401 interceptor | ✅ Done |
 | `src/infrastructure/api/chatflows.ts` | All CRUD + `generateAgentflow` + `getChatModels`, FlowData serialization | ✅ Done |
 | `src/infrastructure/api/nodes.ts` | `getAllNodes`, `getNodeByName`, `getNodeIconUrl` | ✅ Done |
-| `src/infrastructure/store/AgentflowContext.tsx` | `agentflowReducer` (all actions), `normalizeNodes`, `deleteNode()`, `duplicateNode()`. Remaining:  `updateNodeData()`, `getFlowData()` | 🟡 Partial|
-| `src/useAgentflow.ts` | `getFlow()`, `toJSON()`, `validate()`, `addNode()`, `clear()` | ⬜ Not yet — thin wrapper |
+| `src/infrastructure/store/AgentflowContext.tsx` | `agentflowReducer` (all actions), `normalizeNodes`, `deleteNode()`, `duplicateNode()`, `openEditDialog()`, `closeEditDialog()`, `setNodes()`, `setEdges()`, `updateNodeData()`, `deleteEdge()`, state synchronization with local setters. E2E: composite workflow (add→connect→edit→save), load→modify→save roundtrip, multi-edge from single node, rapid connect/disconnect cycles, edge deletion | ✅ Done |
+| `src/useAgentflow.ts` | `getFlow()`, `toJSON()`, `validate()`, `addNode()`, `clear()`, `fitView()`, `getReactFlowInstance()`, instance stability | ✅ Done |
 | `src/features/canvas/hooks/useFlowHandlers.ts` | `handleConnect`, `handleNodesChange`, `handleEdgesChange`, `handleAddNode` — synchronous `onFlowChange` callbacks, dirty tracking, viewport resolution, change filtering | ✅ Done |
 
 ### Tier 2 — Feature Hooks & Dialogs
@@ -52,7 +52,6 @@ Test when adding features or fixing bugs in these areas.
 | `src/infrastructure/store/ConfigContext.tsx` | `ConfigProvider` — theme detection (light/dark/system), media query listener | ⬜ Not yet |
 | `src/features/generator/GenerateFlowDialog.tsx` | Dialog state machine — API call flow, error handling, progress state | ⬜ Not yet |
 | `src/features/node-editor/EditNodeDialog.tsx` | Label editing — keyboard handling (Enter/Escape), node data updates | ⬜ Not yet |
-| `src/infrastructure/api/hooks/useApi.ts` | `useApi()` — loading/error/data state transitions | ⬜ Not yet — may be deprecated |
 
 ### Tier 3 — UI Components
 
@@ -66,13 +65,12 @@ Mostly JSX with minimal logic. Only add tests if business logic is introduced.
 | `src/features/canvas/containers/AgentFlowNode.tsx` | If warning state or color logic becomes more complex | ⬜ Not yet |
 | `src/features/canvas/containers/AgentFlowEdge.tsx` | If edge deletion or interaction logic changes | ⬜ Not yet |
 | `src/features/canvas/containers/IterationNode.tsx` | If resize or dimension calculation logic changes | ⬜ Not yet |
-| `src/atoms/ConfirmDialog.tsx` | If promise-based confirmation pattern is modified | ⬜ Not yet |
 | `src/atoms/NodeInputHandler.tsx` | If input rendering or position calculation logic changes | ⬜ Not yet |
 | `src/features/canvas/components/ConnectionLine.tsx` | If edge label determination logic becomes more complex | ⬜ Not yet |
 | `src/features/canvas/components/NodeStatusIndicator.tsx` | If status-to-color/icon mapping expands | ⬜ Not yet |
 | `src/Agentflow.tsx` | Integration test — dark mode, ThemeProvider, CSS variables, header rendering, keyboard shortcuts (Cmd+S / Ctrl+S save), generate flow dialog, imperative ref | ✅ Done |
 
-Files that are pure styling or data constants (`styled.ts`, `nodeIcons.ts`, `MainCard.tsx`, `Input.tsx`, etc.) do not need dedicated tests.
+Files that are pure styling or data constants (`styled.ts`, `nodeIcons.ts`, `MainCard.tsx`, etc.) do not need dedicated tests.
 
 ## Test Utilities
 
@@ -119,21 +117,32 @@ Key features:
 
 **CSS Mock** (`src/__mocks__/styleMock.js`): Empty object export for CSS imports.
 
+## File Extension Convention
+
+The jest config uses file extensions to select the test environment:
+
+| Extension   | Environment             | When to use                                                                |
+| ----------- | ----------------------- | -------------------------------------------------------------------------- |
+| `.test.ts`  | **node** (no DOM)       | Pure logic — utilities, reducers, data transformations                     |
+| `.test.tsx` | **jsdom** (browser DOM) | Anything that renders React — `renderHook` with providers, component tests |
+
+**Source files** follow a different rule: use `.tsx` only when the file contains JSX syntax. A React hook like `useAgentflow.ts` has no JSX, so it stays `.ts` even though its test file is `.test.tsx` (because the test uses `renderHook` with a JSX wrapper).
+
 ## Configuration
 
 -   **Jest config**: `jest.config.js` — two projects: `unit` (node env, `.test.ts`) and `components` (custom jsdom env, `.test.tsx`)
 -   **Test environment**: Component tests use custom jsdom environment (`src/__test_utils__/jest-environment-jsdom.js`) to handle canvas loading
 -   **Import aliases**: `@test-utils` maps to `src/__test_utils__` for convenient imports
 -   **Coverage thresholds**: uniform 80% floor (`branches`, `functions`, `lines`, `statements`) enforced per-path:
+    -   `./src/*.ts` (root-level modules like `useAgentflow.ts`)
     -   `./src/Agentflow.tsx`
     -   `./src/core/`
     -   `./src/features/canvas/hooks/useFlowHandlers.ts`
     -   `./src/features/node-palette/search.ts`
     -   `./src/infrastructure/api/`
-    -   ⏳ `./src/infrastructure/store/AgentflowContext.tsx` — will be added when coverage reaches 80%
+    -   `./src/infrastructure/store/AgentflowContext.tsx`
 -   **Coverage exclusions**:
     -   `src/__test_utils__/**` — test utilities
     -   `src/__mocks__/**` — module mocks
-    -   `src/infrastructure/api/hooks/useApi.ts` — potentially deprecated
 -   **CI**: `pnpm test:coverage` runs in GitHub Actions between lint and build
 -   **Reports**: `coverage/lcov-report/index.html` for detailed HTML report

packages/agentflow/jest.config.js

@@ -27,15 +27,15 @@ module.exports = {
         '!src/**/index.ts',
         '!src/__mocks__/**',
         '!src/__test_utils__/**',
-        // Potentially deprecated — exclude until resolved (see TESTS.md)
-        '!src/infrastructure/api/hooks/useApi.ts'
+        '!src/infrastructure/api/hooks/**'
     ],
     // text: per-folder table, text-summary: totals, lcov: HTML report at coverage/lcov-report/
     coverageReporters: ['text', 'text-summary', 'lcov'],
     coverageDirectory: 'coverage',
     // 80% floor to catch regressions without blocking active development.
     // Add new paths here as more modules gain test coverage.
     coverageThreshold: {
+        './src/*.ts': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/Agentflow.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/core/': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/canvas/hooks/useFlowHandlers.ts': { branches: 80, functions: 80, lines: 80, statements: 80 },

packages/agentflow/src/atoms/ConfirmDialog.tsx

@@ -1,5 +1,3 @@
 // UI Components - Internal design system
-export { ConfirmDialog, ConfirmProvider, useConfirm } from './ConfirmDialog'
-export { Input } from './Input'
 export { MainCard, type MainCardProps } from './MainCard'
 export { NodeInputHandler } from './NodeInputHandler'

packages/agentflow/src/atoms/Input.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, RefObject } from 'react'
-import { memo, useMemo } from 'react'
+import { memo, useEffect, useMemo, useState } from 'react'
 import { Handle, Position, useUpdateNodeInternals } from 'reactflow'
 
 import { useTheme } from '@mui/material/styles'
@@ -37,17 +37,32 @@ export function getMinimumNodeHeight(outputCount: number): number {
 function NodeOutputHandlesComponent({ outputAnchors, nodeColor, isHovered, nodeRef, nodeId }: NodeOutputHandlesProps) {
     const theme = useTheme()
     const updateNodeInternals = useUpdateNodeInternals()
+    const [nodeHeight, setNodeHeight] = useState(0)
 
-    const getAnchorPosition = (index: number) => {
-        const currentHeight = nodeRef.current?.clientHeight || 0
-        const spacing = currentHeight / (outputAnchors.length + 1)
-        const anchorPosition = spacing * (index + 1)
+    // Track actual node height via ResizeObserver so we re-render once layout is done
+    useEffect(() => {
+        const el = nodeRef.current
+        if (!el) return
 
-        if (anchorPosition > 0) {
-            updateNodeInternals(nodeId)
-        }
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const height = entry.contentRect.height
+                setNodeHeight((prev) => {
+                    if (prev !== height) {
+                        updateNodeInternals(nodeId)
+                        return height
+                    }
+                    return prev
+                })
+            }
+        })
+        observer.observe(el)
+        return () => observer.disconnect()
+    }, [nodeRef, nodeId, updateNodeInternals])
 
-        return anchorPosition
+    const getAnchorPosition = (index: number) => {
+        const spacing = nodeHeight / (outputAnchors.length + 1)
+        return spacing * (index + 1)
     }
 
     // Memoize static styles

packages/agentflow/src/atoms/index.ts

@@ -1,5 +1,4 @@
 import { memo, useEffect, useRef, useState } from 'react'
-import { useUpdateNodeInternals } from 'reactflow'
 
 import { Box, Typography } from '@mui/material'
 
@@ -31,7 +30,6 @@ function AgentFlowNodeComponent({ data }: AgentFlowNodeProps) {
     const { isDarkMode } = useConfigContext()
     const { apiBaseUrl } = useApiContext()
     const ref = useRef<HTMLDivElement>(null)
-    const updateNodeInternals = useUpdateNodeInternals()
     const { openNodeEditor } = useOpenNodeEditor()
 
     const [isHovered, setIsHovered] = useState(false)
@@ -52,14 +50,6 @@ function AgentFlowNodeComponent({ data }: AgentFlowNodeProps) {
     const outputAnchors = data.outputAnchors ?? []
     const minHeight = getMinimumNodeHeight(outputAnchors.length)
 
-    useEffect(() => {
-        if (ref.current) {
-            setTimeout(() => {
-                updateNodeInternals(data.id)
-            }, 10)
-        }
-    }, [data, ref, updateNodeInternals])
-
     useEffect(() => {
         if (data.warning) {
             setWarningMessage(data.warning)

packages/agentflow/src/features/canvas/components/NodeOutputHandles.tsx

@@ -19,7 +19,6 @@ export interface EditNodeDialogProps {
     onCancel: () => void
 }
 
-// TODO: Integrate with canvas node click/double-click to open this dialog for editing node properties
 /**
  * Dialog for editing node properties
  */