refactor(agentflow): enhance ESLint configuration and improve test coverage (#5866)

* refactor(agentflow): enhance ESLint configuration and improve test coverage

- Updated ESLint configuration to include TypeScript resolver for improved import handling.
- Added restrictions on importing from features to enforce architectural boundaries.
- Enhanced test coverage for various components, including ConnectionLine and NodeOutputHandles.
- Updated architecture documentation to reflect recent changes in file structure and component organization.

* fix build error (missing import)

Author: jocelynlin-wd

packages/agentflow/.eslintrc.js

@@ -27,6 +27,11 @@ module.exports = {
     settings: {
         react: {
             version: 'detect'
+        },
+        'import/resolver': {
+            typescript: {
+                project: './tsconfig.json'
+            }
         }
     },
     plugins: ['react', 'react-hooks', '@typescript-eslint', 'unused-imports', 'jsx-a11y', 'simple-import-sort', 'import'],
@@ -75,6 +80,21 @@ module.exports = {
         'import/newline-after-import': 'error',
         'import/no-duplicates': 'error',
         'prettier/prettier': 'error',
+        // Ban @/features alias — features use relative imports internally, and no other
+        // layer should import from features (enforced by import/no-restricted-paths below).
+        // This catches any remaining edge case where the alias would bypass zone checks.
+        'no-restricted-imports': [
+            'error',
+            {
+                patterns: [
+                    {
+                        group: ['@/features', '@/features/*'],
+                        message:
+                            '@/features alias is not allowed. Features use relative imports internally; other layers cannot import from features.'
+                    }
+                ]
+            }
+        ],
         // Architectural boundary enforcement
         'import/no-restricted-paths': [
             'error',

packages/agentflow/ARCHITECTURE.md

@@ -31,6 +31,7 @@ src/
 atoms/
 ├── MainCard.tsx            # Styled card wrapper
 ├── NodeInputHandler.tsx    # Form input for node properties
+├── ...                     # Other UI primitives
 └── index.ts                # Central export
 ```
 
@@ -57,41 +58,35 @@ features/
 │   ├── containers/         # Smart components with state/logic
 │   │   ├── AgentFlowNode.tsx
 │   │   ├── AgentFlowEdge.tsx
-│   │   ├── StickyNote.tsx
-│   │   ├── IterationNode.tsx
+│   │   ├── ...             # Other node containers
 │   │   └── index.ts
 │   ├── components/         # Presentational components
-│   │   ├── AgentflowHeader.tsx
 │   │   ├── ConnectionLine.tsx
-│   │   ├── NodeToolbarActions.tsx
-│   │   ├── NodeStatusIndicator.tsx
-│   │   ├── NodeInfoDialog.tsx
-│   │   ├── NodeModelConfigs.tsx
+│   │   ├── NodeOutputHandles.tsx
+│   │   ├── ...             # Other presentational components
 │   │   └── index.ts
 │   ├── hooks/              # Canvas-related hooks
-│   │   ├── useFlowNodes.ts
 │   │   ├── useFlowHandlers.ts
 │   │   ├── useDragAndDrop.ts
+│   │   ├── ...             # Other canvas hooks
 │   │   └── index.ts
 │   ├── styled.ts           # Styled components
-│   ├── nodeIcons.tsx       # Icon utilities
-│   ├── canvas.css          # Co-located styles
 │   └── index.ts            # Public API
 │
 ├── node-palette/           # Add nodes drawer
 │   ├── AddNodesDrawer.tsx
-│   ├── StyledFab.tsx
 │   ├── search.ts           # Feature-specific utility (private)
-│   └── index.ts            # Exports: AddNodesDrawer, StyledFab
+│   ├── ...
+│   └── index.ts
 │
 ├── generator/              # AI flow generation
 │   ├── GenerateFlowDialog.tsx
-│   ├── SuggestionChips.tsx
-│   └── index.ts            # Exports: GenerateFlowDialog
+│   ├── ...
+│   └── index.ts
 │
 └── node-editor/            # Node property editing
     ├── EditNodeDialog.tsx
-    └── index.ts            # Exports: EditNodeDialog
+    └── index.ts
 ```
 
 **Rules:**
@@ -117,19 +112,21 @@ core/
 │   └── index.ts
 ├── node-config/            # Node configuration (icons, colors, default types)
 │   ├── nodeIcons.ts        # AGENTFLOW_ICONS, DEFAULT_AGENTFLOW_NODES
-│   ├── nodeIconUtils.ts    # getAgentflowIcon, getNodeColor
-│   └── index.ts
+│   └── ...
 ├── node-catalog/           # Node catalog and filtering logic
-│   ├── nodeFilters.ts      # filterNodesByComponents, isAgentflowNode, groupNodesByCategory
-│   └── index.ts
+│   ├── nodeFilters.ts      # filterNodesByComponents, isAgentflowNode
+│   └── ...
+├── theme/                  # Design tokens and MUI theming
+│   ├── tokens.ts           # Color palettes, spacing, shadows
+│   ├── createAgentflowTheme.ts
+│   └── ...
 ├── validation/             # Flow validation logic
 │   ├── flowValidation.ts   # validateFlow, validateNode
-│   └── index.ts
+│   └── ...
 ├── utils/                  # Generic utilities
-│   ├── nodeFactory.ts      # initNode, getUniqueNodeId, getUniqueNodeLabel
-│   ├── connectionValidation.ts # isValidConnectionAgentflowV2
-│   ├── flowExport.ts       # generateExportFlowData
-│   └── index.ts
+│   ├── nodeFactory.ts      # initNode, getUniqueNodeId
+│   ├── connectionValidation.ts
+│   └── ...
 └── index.ts                # Barrel export (use sparingly)
 ```
 
@@ -153,15 +150,13 @@ core/
 infrastructure/
 ├── api/                    # API client layer (network requests)
 │   ├── client.ts           # Axios factory
-│   ├── nodes.ts            # Nodes API endpoints
-│   ├── chatflows.ts        # Chatflows API endpoints
+│   ├── ...                 # Endpoint modules (nodes, chatflows, etc.)
 │   └── index.ts
 │
 └── store/                  # State management
     ├── AgentflowContext.tsx # Flow state context
-    ├── ApiContext.tsx      # API client context
-    ├── ConfigContext.tsx   # Configuration context
-    ├── useFlowInstance.ts  # ReactFlow instance hook
+    ├── agentflowReducer.ts # Reducer for flow state actions
+    ├── ...                 # Other contexts (ApiContext, ConfigContext)
     └── index.ts
 ```
 
@@ -352,6 +347,6 @@ import { useFlowHandlers } from '@features/canvas/hooks/useFlowHandlers'
 | Type        | Convention                | Example                               |
 | ----------- | ------------------------- | ------------------------------------- |
 | Component   | PascalCase.tsx            | `AgentFlowNode.tsx`                   |
-| Hook        | camelCase.ts (use prefix) | `useFlowInstance.ts`                  |
+| Hook        | camelCase.ts (use prefix) | `useFlowHandlers.ts`                  |
 | Logic/Types | camelCase.ts              | `flowValidation.ts`, `nodeFilters.ts` |
 | Styles      | kebab-case (co-located)   | `canvas.css`                          |

packages/agentflow/README.md

@@ -117,14 +117,15 @@ export default function App() {
 
 ### Imperative Methods (via `ref`)
 
-| Method              | Return Type        | Description                      |
-| ------------------- | ------------------ | -------------------------------- |
-| `getFlow()`         | `FlowData`         | Get current flow data            |
-| `toJSON()`          | `string`           | Export flow as JSON string       |
-| `validate()`        | `ValidationResult` | Validate the current flow        |
-| `fitView()`         | `void`             | Fit all nodes into view          |
-| `clear()`           | `void`             | Remove all nodes and edges       |
-| `addNode(nodeData)` | `void`             | Add a node (`Partial<FlowNode>`) |
+| Method                   | Return Type               | Description                           |
+| ------------------------ | ------------------------- | ------------------------------------- |
+| `getFlow()`              | `FlowData`                | Get current flow data                 |
+| `toJSON()`               | `string`                  | Export flow as JSON string            |
+| `validate()`             | `ValidationResult`        | Validate the current flow             |
+| `fitView()`              | `void`                    | Fit all nodes into view               |
+| `clear()`                | `void`                    | Remove all nodes and edges            |
+| `addNode(nodeData)`      | `void`                    | Add a node (`Partial<FlowNode>`)      |
+| `getReactFlowInstance()` | `ReactFlowInstance\|null` | Get the underlying ReactFlow instance |
 
 ### Design Note
 

packages/agentflow/TESTS.md

@@ -35,6 +35,7 @@ These modules carry the highest risk. Test in the same PR when modifying.
 | `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()`, `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/infrastructure/store/ApiContext.tsx` | `ApiProvider` — client creation, memoization, `useApiContext` error boundary | ✅ 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 |
 
@@ -46,28 +47,23 @@ Test when adding features or fixing bugs in these areas.
 | File | Key exports to test | Status |
 | --- | --- | --- |
 | `src/features/node-palette/search.ts` | `fuzzyScore`, `searchNodes`, `debounce` | ✅ Done |
-| `src/features/canvas/hooks/useFlowNodes.ts` | `useFlowNodes()` — category filtering, component whitelist, error states | ⬜ Not yet |
-| `src/features/canvas/hooks/useDragAndDrop.ts` | `useDragAndDrop()` — JSON parse error handling, node init on drop | ⬜ Not yet |
-| `src/features/canvas/hooks/useNodeColors.ts` | `useNodeColors()` — color calculations for selected/hover/dark mode | ⬜ Not yet |
-| `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/features/canvas/hooks/useFlowNodes.ts` | `useFlowNodes()` — category filtering, component whitelist, error states | ✅ Done |
+| `src/features/canvas/hooks/useDragAndDrop.ts` | `useDragAndDrop()` — JSON parse error handling, node init on drop | ✅ Done |
+| `src/features/canvas/hooks/useNodeColors.ts` | `useNodeColors()` — color calculations for selected/hover/dark mode | ✅ Done |
+| `src/infrastructure/store/ConfigContext.tsx` | `ConfigProvider` — theme detection (light/dark/system), media query listener | ✅ Done |
+| `src/features/generator/GenerateFlowDialog.tsx` | Dialog state machine — API call flow, error handling, progress state | ✅ Done |
+| `src/features/node-editor/EditNodeDialog.tsx` | Label editing — keyboard handling (Enter/Escape), node data updates | ✅ Done |
+| `src/features/canvas/hooks/useOpenNodeEditor.ts` | `openNodeEditor()` — node/schema lookup, inputValues initialization, early returns | ✅ Done |
 
 ### Tier 3 — UI Components
 
 Mostly JSX with minimal logic. Only add tests if business logic is introduced.
 
 <!-- prettier-ignore -->
-| File | When to add tests | Status |
+| File | Key exports to test | Status |
 | --- | --- | --- |
-| `src/features/node-palette/AddNodesDrawer.tsx` | If category grouping or drag serialization logic changes | ⬜ Not yet |
-| `src/features/canvas/components/NodeOutputHandles.tsx` | Has `getMinimumNodeHeight()` — test if calculation logic changes | ⬜ Not yet |
-| `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/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/features/canvas/components/NodeOutputHandles.tsx` | `getMinimumNodeHeight()` — linear scaling, MIN_NODE_HEIGHT floor | ✅ Done |
+| `src/features/canvas/components/ConnectionLine.tsx` | Edge label visibility per node type, label content (condition index, humanInput proceed/reject), edge color from AGENTFLOW_ICONS | ✅ Done |
 | `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`, etc.) do not need dedicated tests.
@@ -133,14 +129,7 @@ The jest config uses file extensions to select the test environment:
 -   **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`
+-   **Coverage thresholds**: uniform 80% floor (`branches`, `functions`, `lines`, `statements`) — see `coverageThreshold` in `jest.config.js` for the full list
 -   **Coverage exclusions**:
     -   `src/__test_utils__/**` — test utilities
     -   `src/__mocks__/**` — module mocks

packages/agentflow/jest.config.js

@@ -38,10 +38,14 @@ module.exports = {
         './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 },
+        './src/features/canvas/components/ConnectionLine.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
+        // Only getMinimumNodeHeight() is tested; the component is Tier 3 UI with no business logic
+        './src/features/canvas/components/NodeOutputHandles.tsx': { branches: 0, functions: 10, lines: 30, statements: 30 },
+        './src/features/canvas/hooks/': { branches: 80, functions: 80, lines: 80, statements: 80 },
+        './src/features/generator/GenerateFlowDialog.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 },
+        './src/features/node-editor/': { branches: 80, functions: 80, lines: 80, statements: 80 },
         './src/features/node-palette/search.ts': { branches: 80, functions: 80, lines: 80, statements: 80 },
-        './src/infrastructure/api/': { branches: 80, functions: 80, lines: 80, statements: 80 },
-        './src/infrastructure/store/AgentflowContext.tsx': { branches: 80, functions: 80, lines: 80, statements: 80 }
+        './src/infrastructure/': { branches: 80, functions: 80, lines: 80, statements: 80 }
     },
     projects: [
         // .test.ts → node (fast, no DOM)

packages/agentflow/package.json

@@ -85,6 +85,7 @@
         "@typescript-eslint/eslint-plugin": "^8.18.2",
         "@typescript-eslint/parser": "^8.18.2",
         "@vitejs/plugin-react": "^4.2.0",
+        "eslint-import-resolver-typescript": "4.4.4",
         "eslint-plugin-import": "^2.29.0",
         "eslint-plugin-simple-import-sort": "^12.0.0",
         "jest": "^29.7.0",

packages/agentflow/src/__test_utils__/jest-environment-jsdom.js

@@ -30,7 +30,18 @@ Module.prototype.require = function (id) {
                 toDataURL: () => ''
             }),
             createImageData: () => ({ data: [] }),
-            loadImage: () => Promise.resolve({})
+            loadImage: () => Promise.resolve({}),
+            Image: class Image {
+                constructor() {
+                    this.src = ''
+                    this.width = 0
+                    this.height = 0
+                    this.onload = null
+                    this.onerror = null
+                    this.naturalWidth = 0
+                    this.naturalHeight = 0
+                }
+            }
         }
     }
     return originalRequire.apply(this, arguments)

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

@@ -3,8 +3,6 @@ import type { ReactFlowInstance } from 'reactflow'
 
 import type { AxiosInstance } from 'axios'
 
-import { EditNodeDialogProps } from '@/features/node-editor/EditNodeDialog'
-
 // ============================================================================
 // Flow Data Types
 // ============================================================================
@@ -267,14 +265,21 @@ export interface ConfigContextValue {
     readOnly: boolean
 }
 
+/** Props passed to the edit node dialog (defined here to avoid core → features import) */
+export interface EditDialogProps {
+    inputParams?: InputParam[]
+    data?: NodeData
+    disabled?: boolean
+}
+
 export interface AgentflowState {
     nodes: FlowNode[]
     edges: FlowEdge[]
     chatflow: FlowConfig | null
     isDirty: boolean
     reactFlowInstance: ReactFlowInstance | null
     editingNodeId: string | null
-    editDialogProps: EditNodeDialogProps['dialogProps'] | null
+    editDialogProps: EditDialogProps | null
 }
 
 export type AgentflowAction =
@@ -283,7 +288,7 @@ export type AgentflowAction =
     | { type: 'SET_CHATFLOW'; payload: FlowConfig | null }
     | { type: 'SET_DIRTY'; payload: boolean }
     | { type: 'SET_REACTFLOW_INSTANCE'; payload: ReactFlowInstance | null }
-    | { type: 'OPEN_EDIT_DIALOG'; payload: { nodeId: string; dialogProps: EditNodeDialogProps['dialogProps'] } }
+    | { type: 'OPEN_EDIT_DIALOG'; payload: { nodeId: string; dialogProps: EditDialogProps } }
     | { type: 'CLOSE_EDIT_DIALOG' }
     | { type: 'RESET' }