feat(agentflow): update flow date change & save handlings and enhance…

[jocelynlin-wd]

… examples

• Introduced FlowStatePanel to display live flow data and saved snapshots in a resizable side panel.
• Updated BasicExample and CustomUIExample to integrate FlowStatePanel for improved user experience.
• Enhanced keyboard shortcuts for saving flow data with Cmd+S and Ctrl+S functionality.
• Updated coverage thresholds in jest.config.js to include new FlowStatePanel hooks.
• Revised TESTS.md to reflect changes in testing status for useFlowHandlers and related components.

Screen.Recording.2026-02-24.at.9.18.31.AM.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 user experience and developer tooling for Agentflow by introducing a dedicated panel to visualize live and saved flow states. It refines the core flow handling logic to provide more immediate and accurate data updates, and adds convenient keyboard shortcuts for saving. These changes collectively make the flow development process more transparent and efficient.

Highlights

• Enhanced Flow Data Handling and Visualization: Introduced a new FlowStatePanel component that displays live flow data (onFlowChange) and saved flow snapshots (onSave) in a resizable side panel within the example applications. This panel provides a real-time view of the flow's state, improving debugging and understanding of flow dynamics.
• Improved Flow Change Tracking and Synchronous Callbacks: Refactored useFlowHandlers to ensure onFlowChange callbacks are triggered synchronously with updated flow data (nodes, edges, and viewport) for all meaningful changes (connections, node/edge removals, node additions, and node drag stops). This provides more immediate and accurate state updates to consuming components.
• New Keyboard Shortcut for Saving: Implemented keyboard shortcuts (Cmd+S / Ctrl+S) to trigger the onSave callback, allowing users to quickly save their flow data without needing to interact with UI elements. This enhances user experience and workflow efficiency.
• Expanded Test Coverage and Documentation: Added comprehensive unit tests for the useFlowHandlers hook, ensuring the reliability of flow manipulation logic. Updated jest.config.js to include coverage thresholds for this critical hook and revised TESTS.md to reflect the improved testing status.

Changelog

• packages/agentflow/TESTS.md
  • Updated testing status for useFlowHandlers.ts to 'Done', reflecting new test coverage.
  • Included useFlowHandlers.ts in the list of modules with enforced 80% coverage thresholds.
  • Updated Agentflow.tsx integration test description to include keyboard shortcuts.
• packages/agentflow/examples/src/App.tsx
  • Changed the initial state of showProps to false.
• packages/agentflow/examples/src/FlowStatePanel.tsx
  • Added a new React component FlowStatePanel to display live and saved flow data in a resizable side panel.
• packages/agentflow/examples/src/demos/BasicExample.tsx
  • Imported FlowStatePanel component.
  • Added state variables currentFlow, savedFlow, and changeCount to manage flow data for the panel.
  • Updated handleFlowChange and handleSave callbacks to set the new state variables.
  • Integrated FlowStatePanel into the BasicExample layout.
• packages/agentflow/examples/src/demos/CustomUIExample.tsx
  • Updated type annotations for renderHeader, renderNodePalette, and onSave props.
• packages/agentflow/jest.config.js
  • Added ./src/features/canvas/hooks/useFlowHandlers.ts to the coverage thresholds configuration.
• packages/agentflow/src/Agentflow.test.tsx
  • Added new test suite for keyboard shortcuts, specifically verifying Cmd+S and Ctrl+S trigger the onSave callback.
• packages/agentflow/src/Agentflow.tsx
  • Imported FlowDataCallback type.
  • Updated prop types for onFlowChange, onSave, and onFlowGenerated to use FlowDataCallback.
  • Added handleNodeDragStop to the destructured useFlowHandlers return.
  • Implemented a useEffect hook to listen for Cmd+S / Ctrl+S keyboard events to trigger the handleSave function.
  • Added onNodeDragStop prop to the ReactFlow component.
• packages/agentflow/src/mocks/reactflow.tsx
  • Added mock implementations for applyNodeChanges and applyEdgeChanges utilities.
• packages/agentflow/src/core/types/index.ts
  • Defined a new type FlowDataCallback for functions that receive FlowData.
• packages/agentflow/src/features/canvas/hooks/useFlowHandlers.test.tsx
  • Added a new test file for the useFlowHandlers hook, covering connection, node, and edge changes, node drag stop, and node addition logic.
• packages/agentflow/src/features/canvas/hooks/useFlowHandlers.ts
  • Imported applyEdgeChanges, applyNodeChanges, and Node from reactflow.
  • Updated onFlowChange prop type to FlowDataCallback.
  • Introduced getViewport utility to retrieve current viewport data with a fallback.
  • Modified handleConnect to use a functional updater for setLocalEdges and synchronously call onFlowChangeRef.current.
  • Updated handleNodesChange to filter out non-meaningful changes (selection, dimensions, position) and synchronously call onFlowChangeRef.current with updated nodes.
  • Added handleNodeDragStop callback to trigger onFlowChange once after a node drag completes.
  • Modified handleEdgesChange to use applyEdgeChanges and synchronously call onFlowChangeRef.current.
  • Updated handleAddNode to use a functional updater for setLocalNodes and synchronously call onFlowChangeRef.current.
  • Removed setTimeout(..., 0) calls, making onFlowChange notifications synchronous.

Activity

• jocelynlin-wd created the pull request, introducing new features for flow data handling and visualization.
• The pull request includes updates to example applications to integrate the new FlowStatePanel.
• Core flow handling logic in useFlowHandlers has been refactored for synchronous onFlowChange callbacks.
• New keyboard shortcuts for saving flow data have been implemented and tested.
• Test coverage for useFlowHandlers has been added, and relevant documentation (TESTS.md) and configuration (jest.config.js) have been updated.

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 several valuable enhancements to the agentflow package. The new FlowStatePanel is a great addition for debugging and visualizing flow data in the examples. The implementation of Cmd+S/Ctrl+S keyboard shortcuts for saving improves user experience. The refactoring of useFlowHandlers to provide synchronous onFlowChange callbacks is a significant improvement for the reliability and predictability of flow state management. The code is well-structured and includes corresponding tests and documentation updates. I have one suggestion regarding a potential memory leak in the new FlowStatePanel component due to how global event listeners are managed.