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

[jocelynlin-wd]

• fix 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

Screen.Recording.2026-02-17.at.5.49.06.PM.mov

Screen.Recording.2026-02-17.at.5.48.35.PM.mov

[gemini-code-assist]

Summary of Changes

Hello @jocelynlin-wd, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the Agentflow canvas by refining the node drag and drop experience and introducing a robust design token system with full dark mode compatibility. The styling refactor ensures a consistent and adaptable UI, while the expanded test suite provides greater confidence in the stability and correctness of the core components and their interactions.

Highlights

• Canvas Drag and Drop Behavior: Fixed the drag and drop functionality for adding nodes to the canvas, ensuring accurate placement and unique labeling for new nodes.
• Design System Refactor with Dark Mode Support: Refactored component styling across the application to utilize a new design token system, providing comprehensive dark mode theme support for various UI elements including backgrounds, borders, text, and ReactFlow components.
• Enhanced Testing Infrastructure: Added extensive integration tests for the main Agentflow component, covering dark mode, theme integration, and core functionalities. The Jest configuration was updated to include custom environments and mocks for canvas and axios to improve test reliability and performance.

Changelog

• packages/agentflow/.eslintrc.js
  • Added ESLint rules to disable specific TypeScript checks for mock and test utility files.
• packages/agentflow/TESTS.md
  • Updated test documentation to include new test utilities (factory functions, custom Jest environment, module mocks) and revised Jest configuration details.
  • Added src/Agentflow.tsx to the list of files with required coverage thresholds.
• packages/agentflow/examples/src/App.tsx
  • Introduced showProps state and passed it, along with a toggle function, to the PropsDisplay component.
• packages/agentflow/examples/src/PropsDisplay.tsx
  • Refactored to accept showProps and onToggleProps as external props, removing internal state management for prop display visibility.
• packages/agentflow/examples/src/demos/AllNodeTypesExample.tsx
  • Adjusted the canvas container height from 100vh to 100% for better layout flexibility.
• packages/agentflow/examples/src/demos/CustomUIExample.tsx
  • Adjusted the canvas container height from 100vh to 100% and wrapped the Agentflow component in a flex container.
• packages/agentflow/examples/src/demos/DarkModeExample.tsx
  • Adjusted the canvas container height from 100vh to 100%.
  • Updated the Agentflow component's theme prop to isDarkMode for consistency with the new theme system.
• packages/agentflow/examples/src/demos/FilteredComponentsExample.tsx
  • Adjusted the canvas container height from 100vh to 100% for better layout flexibility.
• packages/agentflow/examples/src/demos/MultiNodeFlow.tsx
  • Adjusted the canvas container height from 100vh to 100% and wrapped the Agentflow component in a flex container.
• packages/agentflow/examples/src/demos/StatusIndicatorsExample.tsx
  • Adjusted the canvas container height from 100vh to 100% for better layout flexibility.
• packages/agentflow/jest.config.js
  • Excluded src/__test_utils__ from test coverage collection.
  • Added src/Agentflow.tsx to the list of files with an 80% coverage threshold.
  • Updated the testEnvironment for component tests to use a custom JSDOM environment, addressing canvas module loading issues.
• packages/agentflow/src/Agentflow.test.tsx
  • Added comprehensive integration tests for the Agentflow component, covering dark mode, theme integration, component structure, header rendering, read-only mode, prop integration, callback props, generate flow dialog, imperative ref, and CSS variable injection/cleanup.
• packages/agentflow/src/Agentflow.tsx
  • Integrated theme tokens for ReactFlow component colors (MiniMap, Background).
  • Applied data-dark-mode attribute to the canvas and dark class to the main container based on isDarkMode prop.
  • Updated ReactFlow Controls component to apply a dark-mode-controls class when in dark mode.
  • Adjusted the positioning logic for the 'Generate Flow' button.
  • Replaced the theme prop with isDarkMode for direct dark mode control.
• packages/agentflow/src/AgentflowProvider.tsx
  • Integrated MUI's ThemeProvider to manage the application's theme.
  • Replaced the theme prop with isDarkMode for direct dark mode control.
  • Implemented useEffect hooks to dynamically inject and clean up CSS variables into the document head based on the isDarkMode state.
• packages/agentflow/src/mocks/axios.ts
  • Added a mock implementation for the axios library to prevent actual network requests during tests.
• packages/agentflow/src/mocks/reactflow.tsx
  • Added a mock implementation for the reactflow library, including its components and hooks, to facilitate isolated testing of ReactFlow-dependent components.
• packages/agentflow/src/test_utils/jest-environment-jsdom.js
  • Added a custom Jest environment to mock the canvas native module, resolving potential compilation issues in test environments.
• packages/agentflow/src/atoms/MainCard.tsx
  • Updated the MainCard component to correctly pass through all additional props to the underlying MUI Card component.
• packages/agentflow/src/core/node-config/nodeIcons.ts
  • Updated node icon colors to reference the new theme tokens instead of hardcoded hex values.
• packages/agentflow/src/core/theme/createAgentflowTheme.test.ts
  • Added unit tests for the createAgentflowTheme factory, verifying light/dark mode behavior, theme consistency, custom palette extension, and MUI integration.
• packages/agentflow/src/core/theme/createAgentflowTheme.ts
  • Added a new file to define the createAgentflowTheme function, which generates a Material-UI theme using design tokens and supports light/dark modes.
• packages/agentflow/src/core/theme/cssVariables.test.ts
  • Added unit tests for the generateCSSVariables function, ensuring correct generation of CSS variables for light/dark modes, proper formatting, and consistency with design tokens.
• packages/agentflow/src/core/theme/cssVariables.ts
  • Added a new file to define the generateCSSVariables function, which creates a string of CSS custom properties from the design tokens for dynamic styling.
• packages/agentflow/src/core/theme/index.ts
  • Added a new file to centralize the exports for all theme-related modules.
• packages/agentflow/src/core/theme/tokens.test.ts
  • Added unit tests for the design tokens, validating node colors, background/border/text/semantic/ReactFlow colors, spacing scale, shadows, border radius, and gradients for uniqueness and correctness.
• packages/agentflow/src/core/theme/tokens.ts
  • Added a new file defining a comprehensive set of design tokens for Agentflow, including base colors, semantic UI colors, ReactFlow specific colors, spacing, shadows, and border radius, with full light and dark mode variants.
• packages/agentflow/src/core/theme/types.ts
  • Added a new file to extend Material-UI's theme types, providing type safety and autocomplete for custom palette properties like 'card'.
• packages/agentflow/src/core/types/index.ts
  • Updated the AgentflowProps and ConfigContextValue interfaces to replace the theme property with isDarkMode for clearer dark mode control.
• packages/agentflow/src/features/canvas/canvas.css
  • Refactored CSS to utilize custom CSS variables for styling various elements, enabling dynamic theme switching.
  • Added specific dark mode styles for ReactFlow controls and minimap to ensure proper visibility and aesthetics.
• packages/agentflow/src/features/canvas/components/NodeInputHandle.tsx
  • Refactored NodeInputHandle to memoize inline styles and use constants for handle dimensions, improving performance and readability.
• packages/agentflow/src/features/canvas/components/NodeOutputHandles.tsx
  • Refactored NodeOutputHandles to memoize inline styles and use constants for handle dimensions and positioning, improving performance and maintainability.
  • Updated the getMinimumNodeHeight calculation for output handles.
• packages/agentflow/src/features/canvas/components/NodeToolbarActions.tsx
  • Ensured the isVisible prop is correctly passed to StyledNodeToolbar to control visibility.
  • Adjusted icon button colors to dynamically adapt to dark mode.
• packages/agentflow/src/features/canvas/containers/AgentFlowNode.tsx
  • Removed fixed width and padding from AgentFlowNode and CardWrapper to allow for content-based sizing.
  • Adjusted the width of the NodeIcon container for better layout.
• packages/agentflow/src/features/canvas/hooks/useDragAndDrop.ts
  • Fixed the drag and drop behavior by switching from screenToFlowPosition() to project() for more accurate node placement.
  • Added DROP_OFFSET_X and DROP_OFFSET_Y constants to center dropped nodes on the cursor position.
  • Incorporated getUniqueNodeLabel to ensure new nodes have unique labels upon creation.
• packages/agentflow/src/features/canvas/hooks/useFlowHandlers.ts
  • Integrated getUniqueNodeLabel when initializing new nodes to ensure unique labels.
• packages/agentflow/src/features/canvas/styled.ts
  • Updated CardWrapper and StyledNodeToolbar to use theme tokens for background, border, padding, border-radius, and shadows.
  • Ensured NodeToolbar has overflow: visible to prevent clipping of its contents.
• packages/agentflow/src/features/node-palette/StyledFab.tsx
  • Updated StyledFab to use theme tokens for gradient colors, ensuring consistency with the new design system.
• packages/agentflow/src/infrastructure/store/ConfigContext.tsx
  • Simplified ConfigProvider by directly accepting isDarkMode as a prop, removing internal state and useEffect for theme determination.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a significant and well-executed refactoring to implement a design token system with support for dark mode. The changes include creating a centralized token system, a theme provider that injects CSS variables, and updating numerous components and styles to use these new tokens. The drag-and-drop behavior for adding nodes has also been improved for better positioning. Additionally, the PR adds a comprehensive suite of tests for the new theme system and the main Agentflow component, along with the necessary Jest configuration and mocks.

My review focuses on ensuring consistency with the new design token system. I've pointed out a couple of instances where magic numbers are used instead of tokens, which could be improved for better maintainability. Overall, this is an excellent update that greatly improves the styling architecture and test coverage of the agentflow package.