feat(agentflow): update canvas add node drag and drop behaviour (#5774)

* feat(agentflow): update canvas add node drag and drop behaviour

- fix style issues and refactor components using design token with dark mode theme support
- add and update tests with additional jest config to mock canvas and libs

* fix lint error on test

* address gemini review comments

* update README Props to match actual implementation

Author: jocelynlin-wd

packages/agentflow/.eslintrc.js

@@ -142,6 +142,18 @@ module.exports = {
                 'no-console': 'off',
                 '@typescript-eslint/no-non-null-assertion': 'off'
             }
+        },
+        {
+            files: ['src/__mocks__/**/*.{ts,tsx}'],
+            rules: {
+                '@typescript-eslint/no-explicit-any': 'off'
+            }
+        },
+        {
+            files: ['src/__test_utils__/**/*.js'],
+            rules: {
+                '@typescript-eslint/no-require-imports': 'off'
+            }
         }
     ]
 }

packages/agentflow/README.md

@@ -103,12 +103,11 @@ export default function App() {
 | `apiBaseUrl` | `string` | **(required)** | Flowise API server endpoint |
 | `token` | `string` | — | Authentication token for API calls |
 | `initialFlow` | `FlowData` | — | Initial flow data to render (uncontrolled — only used on mount) |
-| `flowId` | `string` | — | Flow ID for loading an existing flow from the API |
 | `components` | `string[]` | — | Restrict which node types appear in the palette |
 | `onFlowChange` | `(flow: FlowData) => void` | — | Called when the flow changes (node/edge add, remove, move) |
 | `onSave` | `(flow: FlowData) => void` | — | Called when the user triggers a save |
 | `onFlowGenerated` | `(flow: FlowData) => void` | — | Called when a flow is generated via AI |
-| `theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Theme override |
+| `isDarkMode` | `boolean` | `false` | Use dark mode theme |
 | `readOnly` | `boolean` | `false` | Disable editing (nodes not draggable/connectable) |
 | `showDefaultHeader` | `boolean` | `true` | Show built-in header (ignored if `renderHeader` provided) |
 | `showDefaultPalette` | `boolean` | `true` | Show built-in node palette |
@@ -125,7 +124,7 @@ export default function App() {
 | `validate()` | `ValidationResult` | Validate the current flow |
 | `fitView()` | `void` | Fit all nodes into view |
 | `clear()` | `void` | Remove all nodes and edges |
-| `addNode(name)` | `void` | Add a node by component name |
+| `addNode(nodeData)` | `void` | Add a node (`Partial<FlowNode>`) |
 
 ### Design Note
 

packages/agentflow/TESTS.md

@@ -27,6 +27,9 @@ These modules carry the highest risk. Test in the same PR when modifying.
 | `src/core/utils/` | `getUniqueNodeId`, `getUniqueNodeLabel`, `initializeDefaultNodeData`, `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/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 |
@@ -64,17 +67,67 @@ Mostly JSX with minimal logic. Only add tests if business logic is introduced.
 | `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 when component orchestration is stable | ⬜ 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 |
 
 Files that are pure styling or data constants (`styled.ts`, `nodeIcons.ts`, `MainCard.tsx`, `Input.tsx`, etc.) do not need dedicated tests.
 
+## Test Utilities
+
+### Factory Functions (`src/__test_utils__/factories.ts`)
+
+Use factory functions to create test fixtures with sensible defaults:
+
+```typescript
+import { makeFlowNode, makeFlowEdge, makeNodeData } from '@test-utils/factories'
+
+// Create test nodes
+const node = makeFlowNode('node-1', {
+    type: 'agentflowNode',
+    data: { name: 'llmAgentflow', label: 'LLM' }
+})
+
+// Create test edges
+const edge = makeFlowEdge('node-1', 'node-2')
+
+// Create node data (for palette/search tests)
+const nodeData = makeNodeData({ name: 'llmAgentflow', label: 'LLM' })
+```
+
+### Custom Jest Environment
+
+**File**: `src/__test_utils__/jest-environment-jsdom.js`
+
+Prevents the `canvas` native module from being loaded during jsdom initialization. The canvas package requires native compilation which fails in many environments, but it's only an optional dependency of jsdom and not needed for React component tests.
+
+This custom environment intercepts `require('canvas')` at the module level and returns a mock before jsdom tries to load the native binary.
+
+### Module Mocks
+
+**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`)
+
+**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` (jsdom env, `.test.tsx`)
+- **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/infrastructure/api/`
   - `./src/features/node-palette/search.ts`
-- **Exclusions**: `src/infrastructure/api/hooks/useApi.ts` is excluded from coverage collection (potentially deprecated — check before investing in tests)
+  - `./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/src/App.tsx

@@ -100,6 +100,7 @@ function LoadingFallback() {
 
 export default function App() {
     const [selectedExample, setSelectedExample] = useState<ExampleId>('basic')
+    const [showProps, setShowProps] = useState(true)
     // Config loaded from environment variables
 
     const currentExample = examples.find((e) => e.id === selectedExample)
@@ -175,6 +176,8 @@ export default function App() {
                     exampleName={currentExample.name}
                     props={actualProps as Record<string, string | boolean>}
                     exampleId={selectedExample}
+                    showProps={showProps}
+                    onToggleProps={setShowProps}
                 />
             )}
 

packages/agentflow/examples/src/PropsDisplay.tsx

@@ -4,22 +4,15 @@
  * Displays Agentflow component props in an expandable accordion format
  */
 
-import { useEffect, useState } from 'react'
-
 interface PropsDisplayProps {
     exampleName: string
     props: Record<string, string | boolean>
     exampleId: string
+    showProps: boolean
+    onToggleProps: (show: boolean) => void
 }
 
-export function PropsDisplay({ exampleName, props, exampleId }: PropsDisplayProps) {
-    const [showProps, setShowProps] = useState(false)
-
-    // Auto-expand props when example changes
-    useEffect(() => {
-        setShowProps(true)
-    }, [exampleId])
-
+export function PropsDisplay({ exampleName, props, exampleId, showProps, onToggleProps }: PropsDisplayProps) {
     return (
         <div
             key={exampleId}
@@ -31,7 +24,7 @@ export function PropsDisplay({ exampleName, props, exampleId }: PropsDisplayProp
         >
             {/* Accordion Header */}
             <button
-                onClick={() => setShowProps(!showProps)}
+                onClick={() => onToggleProps(!showProps)}
                 style={{
                     width: '100%',
                     padding: '12px 16px',

packages/agentflow/examples/src/demos/AllNodeTypesExample.tsx

@@ -219,7 +219,7 @@ export function AllNodeTypesExample() {
     const agentflowRef = useRef<AgentFlowInstance>(null)
 
     return (
-        <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
             {/* Info Header */}
             <div
                 style={{

packages/agentflow/examples/src/demos/CustomUIExample.tsx

@@ -253,21 +253,23 @@ export function CustomUIExample() {
     const agentflowRef = useRef<AgentFlowInstance>(null)
 
     return (
-        <div style={{ width: '100%', height: '100vh' }}>
-            <Agentflow
-                ref={agentflowRef}
-                apiBaseUrl={apiBaseUrl}
-                token={token ?? undefined}
-                initialFlow={initialFlow}
-                renderHeader={(props) => <CustomHeader {...props} />}
-                renderNodePalette={(props) => <CustomPalette {...props} />}
-                showDefaultHeader={false}
-                showDefaultPalette={false}
-                onSave={(flow) => {
-                    console.log('Saving flow:', flow)
-                    alert('Flow saved! Check console.')
-                }}
-            />
+        <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ flex: 1 }}>
+                <Agentflow
+                    ref={agentflowRef}
+                    apiBaseUrl={apiBaseUrl}
+                    token={token ?? undefined}
+                    initialFlow={initialFlow}
+                    renderHeader={(props) => <CustomHeader {...props} />}
+                    renderNodePalette={(props) => <CustomPalette {...props} />}
+                    showDefaultHeader={false}
+                    showDefaultPalette={false}
+                    onSave={(flow) => {
+                        console.log('Saving flow:', flow)
+                        alert('Flow saved! Check console.')
+                    }}
+                />
+            </div>
         </div>
     )
 }

packages/agentflow/examples/src/demos/DarkModeExample.tsx

@@ -104,7 +104,7 @@ export function DarkModeExample() {
     return (
         <ThemeProvider theme={darkTheme}>
             <CssBaseline />
-            <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
                 {/* Theme Toggle */}
                 <div
                     style={{
@@ -140,7 +140,7 @@ export function DarkModeExample() {
                         apiBaseUrl={apiBaseUrl}
                         token={token ?? undefined}
                         initialFlow={sampleFlow}
-                        theme={isDark ? 'dark' : 'light'}
+                        isDarkMode={isDark}
                         showDefaultHeader={false}
                     />
                 </div>
@@ -153,6 +153,6 @@ export const DarkModeExampleProps = {
     apiBaseUrl: '{from environment variables}',
     token: '{from environment variables}',
     initialFlow: 'FlowData (sample flow)',
-    theme: '{isDark ? "dark" : "light"}',
+    isDarkMode: '{isDark}',
     showDefaultHeader: false
 }

packages/agentflow/examples/src/demos/FilteredComponentsExample.tsx

@@ -77,7 +77,7 @@ export function FilteredComponentsExample() {
     const currentPreset = presets[selectedPreset]
 
     return (
-        <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+        <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
             {/* Preset Selector */}
             <div
                 style={{

packages/agentflow/examples/src/demos/MultiNodeFlow.tsx

@@ -149,15 +149,17 @@ export function MultiNodeFlow() {
     const agentflowRef = useRef<AgentFlowInstance>(null)
 
     return (
-        <div style={{ width: '100%', height: '100vh' }}>
-            <Agentflow
-                ref={agentflowRef}
-                apiBaseUrl={apiBaseUrl}
-                token={token ?? undefined}
-                initialFlow={translationFlow}
-                showDefaultHeader={true}
-                onFlowChange={(flow) => console.log('Flow changed:', flow.nodes.length, 'nodes')}
-            />
+        <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ flex: 1 }}>
+                <Agentflow
+                    ref={agentflowRef}
+                    apiBaseUrl={apiBaseUrl}
+                    token={token ?? undefined}
+                    initialFlow={translationFlow}
+                    showDefaultHeader={true}
+                    onFlowChange={(flow) => console.log('Flow changed:', flow.nodes.length, 'nodes')}
+                />
+            </div>
         </div>
     )
 }