refactor(agentflow): update import paths and clean up test utilities (#5789)

* refactor(agentflow): update import paths and clean up test utilities

- Refactor import paths to use absolute paths (alias) for better readability and maintainability.
- Remove unused function `initializeDefaultNodeData` from `nodeFactory` and its related tests.
- Update `TESTS.md` to reflect the current testing status of various modules.
- Minor adjustments to Vite configuration for improved development experience.

* fix markdown format

Author: jocelynlin-wd

packages/agentflow/TESTS.md

@@ -21,53 +21,56 @@ Add tests when actively working on these files. Each tier reflects impact and te
 
 These modules carry the highest risk. Test in the same PR when modifying.
 
+<!-- prettier-ignore -->
 | File | Key exports to test | Status |
-|------|-------------------|--------|
+| --- | --- | --- |
 | `src/core/validation/` | `validateFlow`, `validateNode` — empty flows, missing/multiple starts, disconnected nodes, cycles, required inputs | ✅ Done |
-| `src/core/utils/` | `getUniqueNodeId`, `getUniqueNodeLabel`, `initializeDefaultNodeData`, `initNode`, `generateExportFlowData`, `isValidConnectionAgentflowV2` | ✅ Done |
+| `src/core/utils/` | `getUniqueNodeId`, `getUniqueNodeLabel`, `initNode`, `generateExportFlowData`, `isValidConnectionAgentflowV2` | ✅ Done |
 | `src/core/node-catalog/` | `filterNodesByComponents`, `isAgentflowNode`, `groupNodesByCategory` | ✅ Done |
 | `src/core/node-config/` | `getAgentflowIcon`, `getNodeColor` | ✅ Done |
-| `src/core/theme/tokens.ts` | All design tokens — node colors (15 types, uniqueness), light/dark variants (backgrounds, borders, text), spacing scale (8px base), semantic colors, ReactFlow colors, shadows, border radius, gradients | ✅ Done |
-| `src/core/theme/cssVariables.ts` | `generateCSSVariables()` — generates valid CSS strings, includes all variables (colors, spacing, shadows, etc.), correct light/dark mode values, proper formatting (px suffixes), consistency with tokens | ✅ Done |
-| `src/core/theme/createAgentflowTheme.ts` | `createAgentflowTheme()` — MUI theme creation, palette mode (light/dark), background/text/border colors from tokens, custom card palette extension, 8px spacing, border radius, theme consistency | ✅ Done |
+| `src/core/theme/tokens.ts` | All design tokens — node colors, light/dark variants, spacing scale, semantic colors, ReactFlow colors, shadows, border radius, gradients | ✅ Done |
+| `src/core/theme/cssVariables.ts` | `generateCSSVariables()` — valid CSS strings, all variables, correct light/dark values, proper formatting, consistency with tokens | ✅ Done |
+| `src/core/theme/createAgentflowTheme.ts` | `createAgentflowTheme()` — MUI theme creation, palette mode, colors from tokens, custom card palette, spacing, border radius, consistency | ✅ Done |
 | `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 action types), `normalizeNodes`. Remaining: `deleteNode()`, `duplicateNode()`, `updateNodeData()`, `getFlowData()` — React callbacks, test when provider stabilizes | 🟡 Partial |
-| `src/useAgentflow.ts` | `getFlow()`, `toJSON()`, `validate()`, `addNode()`, `clear()` | ⬜ Not yet — thin wrapper, test when hook gains own logic |
-| `src/features/canvas/hooks/useFlowHandlers.ts` | `onConnect`, `onNodesChange`, `onEdgesChange`, `onAddNode` | ⬜ Not yet — heavily coupled to ReactFlow, test when handlers stabilize |
+| `src/infrastructure/store/AgentflowContext.tsx` | `agentflowReducer` (all actions), `normalizeNodes`. Remaining: `deleteNode()`, `duplicateNode()`, `updateNodeData()`, `getFlowData()` | 🟡 Partial |
+| `src/useAgentflow.ts` | `getFlow()`, `toJSON()`, `validate()`, `addNode()`, `clear()` | ⬜ Not yet — thin wrapper |
+| `src/features/canvas/hooks/useFlowHandlers.ts` | `onConnect`, `onNodesChange`, `onEdgesChange`, `onAddNode` | ⬜ Not yet — coupled to ReactFlow |
 
 ### Tier 2 — Feature Hooks & Dialogs
 
 Test when adding features or fixing bugs in these areas.
 
+<!-- prettier-ignore -->
 | 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/infrastructure/api/hooks/useApi.ts` | `useApi()` — loading/error/data state transitions | ⬜ Not yet — may be deprecated, check before investing |
+| `src/infrastructure/api/hooks/useApi.ts` | `useApi()` — loading/error/data state transitions | ⬜ Not yet — may be deprecated |
 
 ### 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 |
-|------|------------------|--------|
+| --- | --- | --- |
 | `src/features/node-palette/AddNodesDrawer.tsx` | If category grouping or drag serialization logic changes | ⬜ Not yet |
-| `src/features/canvas/components/NodeOutputHandles.tsx` | Has `getMinimumNodeHeight()` pure function — test if calculation 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/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 integration (data-dark-mode attribute, Controls class), ThemeProvider wrapper, theme switching, CSS variables injection/cleanup, header rendering, component structure, generate flow dialog (open/close/onGenerated), imperative ref | ✅ Done |
+| `src/Agentflow.tsx` | Integration test — dark mode, ThemeProvider, CSS variables, header rendering, 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.
 
@@ -106,28 +109,29 @@ This custom environment intercepts `require('canvas')` at the module level and r
 **ReactFlow Mock** (`src/__mocks__/reactflow.tsx`): Provides mock implementations of ReactFlow components and hooks.
 
 Key features:
-- Uses `forwardRef` for MUI `styled()` compatibility (prevents emotion errors)
-- Uses `useState` internally to maintain stable references (prevents infinite re-render loops)
-- Exports all commonly used ReactFlow components (`Controls`, `MiniMap`, `Background`, etc.)
-- Mocks hooks (`useNodesState`, `useEdgesState`, `useReactFlow`)
+
+-   Uses `forwardRef` for MUI `styled()` compatibility (prevents emotion errors)
+-   Uses `useState` internally to maintain stable references (prevents infinite re-render loops)
+-   Exports all commonly used ReactFlow components (`Controls`, `MiniMap`, `Background`, etc.)
+-   Mocks hooks (`useNodesState`, `useEdgesState`, `useReactFlow`)
 
 **Axios Mock** (`src/__mocks__/axios.ts`): Prevents network errors by mocking all HTTP requests. Returns empty arrays/objects for all API calls to silence network warnings in tests.
 
 **CSS Mock** (`src/__mocks__/styleMock.js`): Empty object export for CSS imports.
 
 ## 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/Agentflow.tsx`
-  - `./src/core/`
-  - `./src/features/node-palette/search.ts`
-  - `./src/infrastructure/api/`
-- **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
+-   **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/Agentflow.tsx`
+    -   `./src/core/`
+    -   `./src/features/node-palette/search.ts`
+    -   `./src/infrastructure/api/`
+-   **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/examples/vite.config.ts

@@ -3,23 +3,24 @@ import react from '@vitejs/plugin-react'
 import path from 'path'
 
 export default defineConfig({
-  plugins: [react()],
-  root: __dirname,
-  resolve: {
-    alias: {
-      // Use the source files directly for development
-      '@flowise/agentflow': path.resolve(__dirname, '../src'),
+    plugins: [react()],
+    root: __dirname,
+    resolve: {
+        alias: {
+            // Use the source files directly for development
+            '@flowise/agentflow': path.resolve(__dirname, '../src'),
+            '@': path.resolve(__dirname, '../src')
+        }
     },
-  },
-  server: {
-    port: 5174,
-    // Watch the parent src directory for changes
-    watch: {
-      // Include the agentflow source directory
-      ignored: ['!**/packages/agentflow/src/**'],
+    server: {
+        port: 5174,
+        // Watch the parent src directory for changes
+        watch: {
+            // Include the agentflow source directory
+            ignored: ['!**/packages/agentflow/src/**']
+        }
     },
-  },
-  optimizeDeps: {
-    include: ['react', 'react-dom', '@mui/material', 'reactflow'],
-  },
+    optimizeDeps: {
+        include: ['react', 'react-dom', '@mui/material', 'reactflow']
+    }
 })

packages/agentflow/src/__test_utils__/factories.ts

@@ -1,4 +1,4 @@
-import type { FlowEdge, FlowNode, NodeData } from '../core/types'
+import type { FlowEdge, FlowNode, NodeData } from '@/core/types'
 
 /**
  * Create a {@link FlowNode} with sensible defaults.

packages/agentflow/src/atoms/Input.tsx

@@ -3,7 +3,7 @@ import { ChangeEvent, useState } from 'react'
 import { IconButton, InputAdornment, SxProps, TextField, Theme } from '@mui/material'
 import { IconEye, IconEyeOff } from '@tabler/icons-react'
 
-import type { InputParam } from '../core/types'
+import type { InputParam } from '@/core/types'
 
 export interface InputProps {
     inputParam?: InputParam

packages/agentflow/src/atoms/NodeInputHandler.tsx

@@ -6,7 +6,7 @@ import { styled, useTheme } from '@mui/material/styles'
 import { tooltipClasses } from '@mui/material/Tooltip'
 import { IconArrowsMaximize, IconVariable } from '@tabler/icons-react'
 
-import type { InputAnchor, InputParam, NodeData } from '../core/types'
+import type { InputAnchor, InputParam, NodeData } from '@/core/types'
 
 const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} classes={{ popper: className }} />)({
     [`& .${tooltipClasses.tooltip}`]: {

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

@@ -1,5 +1,5 @@
 // Node factory - Node ID generation, labeling, and initialization
-export { getUniqueNodeId, getUniqueNodeLabel, initializeDefaultNodeData, initNode } from './nodeFactory'
+export { getUniqueNodeId, getUniqueNodeLabel, initNode } from './nodeFactory'
 
 // Connection validation utilities
 export { isValidConnectionAgentflowV2 } from './connectionValidation'

packages/agentflow/src/core/utils/nodeFactory.test.ts

@@ -2,7 +2,7 @@ import { makeFlowNode, makeNodeData } from '@test-utils/factories'
 
 import type { NodeData } from '../types'
 
-import { getUniqueNodeId, getUniqueNodeLabel, initializeDefaultNodeData, initNode } from './nodeFactory'
+import { getUniqueNodeId, getUniqueNodeLabel, initNode } from './nodeFactory'
 
 const makeNode = (id: string, name: string, label: string) => makeFlowNode(id, { data: { id, name, label } })
 
@@ -48,31 +48,6 @@ describe('getUniqueNodeLabel', () => {
     })
 })
 
-describe('initializeDefaultNodeData', () => {
-    it('should return empty object for empty params', () => {
-        expect(initializeDefaultNodeData([])).toEqual({})
-    })
-
-    it('should use default values when provided', () => {
-        const params = [
-            { name: 'temperature', default: 0.7 },
-            { name: 'maxTokens', default: 1024 }
-        ]
-        expect(initializeDefaultNodeData(params)).toEqual({
-            temperature: 0.7,
-            maxTokens: 1024
-        })
-    })
-
-    it('should use empty string when no default is provided', () => {
-        const params = [{ name: 'apiKey' }, { name: 'model', default: 'gpt-4' }]
-        expect(initializeDefaultNodeData(params)).toEqual({
-            apiKey: '',
-            model: 'gpt-4'
-        })
-    })
-})
-
 describe('initNode', () => {
     it('should set the new node id on the returned data', () => {
         const result = initNode(makeNodeData(), 'node_0')
@@ -129,10 +104,9 @@ describe('initNode', () => {
         })
         const result = initNode(nodeData, 'n1')
         expect(result.inputs!['temp']).toBe(0.7)
-        // initNode only sets defaults for params with an explicit `default` value,
-        // unlike initializeDefaultNodeData which falls back to ''. Params without
-        // a default are intentionally omitted so the UI can distinguish "unset" from "empty".
-        expect(result.inputs!['model']).toBeUndefined()
+        // Params without a default fall back to '' (matching agentflow v2 behavior).
+        // This ensures show/hide conditions can evaluate against a defined value.
+        expect(result.inputs!['model']).toBe('')
     })
 
     it('should preserve existing inputs over defaults', () => {

packages/agentflow/src/core/utils/nodeFactory.ts

@@ -15,7 +15,6 @@ export function getUniqueNodeId(nodeData: NodeData, nodes: FlowNode[]): string {
     return baseId
 }
 
-// TODO: Integrate with node drop/creation flow to assign unique labels per node type
 /**
  * Generate a unique node label based on existing nodes
  */
@@ -34,11 +33,11 @@ export function getUniqueNodeLabel(nodeData: NodeData, nodes: FlowNode[]): strin
     return `${nodeData.label} ${suffix}`
 }
 
-// TODO: Integrate with node drop/creation flow to populate default input values
 /**
- * Initialize default values for node parameters
+ * Initialize default values for node parameters.
+ * Falls back to '' for params without a default — needed by show/hide condition evaluation.
  */
-export function initializeDefaultNodeData(nodeParams: Array<{ name: string; default?: unknown }>): Record<string, unknown> {
+function initializeDefaultNodeData(nodeParams: Array<{ name: string; default?: unknown }>): Record<string, unknown> {
     const initialValues: Record<string, unknown> = {}
 
     for (const input of nodeParams) {
@@ -117,13 +116,8 @@ export function initNode(nodeData: NodeData, newNodeId: string, isAgentflow = tr
     // Initialize outputs
     const outputAnchors = isAgentflow ? createAgentFlowOutputs(nodeData, newNodeId) : []
 
-    // Initialize default input values
-    const initialInputs: Record<string, unknown> = {}
-    for (const param of inputParams) {
-        if (param.default !== undefined) {
-            initialInputs[param.name] = param.default
-        }
-    }
+    // Initialize default input values (matches agentflow v2 — falls back to '' for show/hide conditions)
+    const initialInputs = initializeDefaultNodeData(inputParams)
 
     // Create initialized node data
     const initializedData: NodeData = {

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

@@ -1,4 +1,4 @@
-import type { HeaderRenderProps, ValidationResult } from '../../../core/types'
+import type { HeaderRenderProps, ValidationResult } from '@/core/types'
 
 export interface AgentflowHeaderProps extends HeaderRenderProps {
     readOnly?: boolean

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

@@ -3,7 +3,7 @@ import { EdgeLabelRenderer, getBezierPath, Position, useStore } from 'reactflow'
 
 import { useTheme } from '@mui/material/styles'
 
-import { AGENTFLOW_ICONS } from '../../../core'
+import { AGENTFLOW_ICONS } from '@/core'
 
 interface EdgeLabelProps {
     transform: string