fix(frontend): improve history tracking, error handling - #11786
Conversation
…I components - Added a new utility function to identify Google Drive file objects for better schema handling. - Updated the GoogleDrivePickerField component to conditionally render based on the UI type. - Refactored the matcher for Google Drive Picker schema to utilize the new utility function. - Enhanced the ArrayFieldTemplate component by adding a gap between items for improved layout. - Introduced a console log for debugging preprocessed schema in FormRenderer for development purposes.
…itor (#11784) ### Changes 🏗️ - Improved error handling in `useRunInputDialog.ts` to properly handle cases where node errors are empty or undefined - Fixed node collision resolution in Flow component by using the current state from the store instead of stale props - Enhanced edge management to track history when edges are removed - Fixed potential null reference in NodeHeader when accessing hardcodedValues - Improved history management in edgeStore by saving state before modifications - Significantly enhanced historyStore with better undo/redo functionality: - Added checks to prevent redundant state changes - Fixed comparison of current vs. previous states - Improved tracking of drag operations - Fixed nodeStore to properly track node position changes and maintain history - Removed console.log statement from FormRenderer ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Verified undo/redo functionality works correctly after adding/removing nodes - [x] Confirmed error handling works when validation fails - [x] Tested node dragging and collision resolution - [x] Verified edge creation and deletion properly updates history
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
|
This PR targets the Automatically setting the base branch to |
WalkthroughFrontend build system refactoring focused on improving state management, error handling, and safety. Changes include enhanced undo/redo with state guards in history store, history tracking integration into edge and node stores, robust error extraction in graph validation, and safe property access in component rendering logic. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Abhi1992002
changed the title
Abhi1992002
changed the title
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
`@autogpt_platform/frontend/src/app/`(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts:
- Around line 57-72: The current update logic only sets errors for nodes present
in nodeErrors and leaves stale errors on nodes that were fixed; call
useNodeStore.getState().clearAllNodeErrors() first to clear every node's errors,
then iterate over Object.entries(nodeErrors) and call
useNodeStore.getState().updateNodeErrors(nodeId, nodeErrorsForNode) to reapply
only the new errors (useNodeStore, nodeErrors, updateNodeErrors,
clearAllNodeErrors are the relevant symbols).
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts (1)
205-208: Consider a shared history snapshot helper (and clone arrays) to keep entries immutable.
prevStateis created in multiple places and currently stores live arrays. A small helper can both DRY this up and ensure snapshots don’t drift if any in-place mutations slip in later.♻️ Suggested refactor
+const cloneHistoryState = ( + nodes: CustomNode[], + edges: CustomEdge[], +) => ({ + nodes: nodes.map((n) => ({ + ...n, + position: { ...n.position }, + data: { ...n.data }, + })), + edges: edges.map((e) => ({ ...e })), +}); addBlock: ( block: BlockInfo, hardcodedValues?: Record<string, any>, position?: XYPosition, ) => { - const prevState = { - nodes: get().nodes, - edges: useEdgeStore.getState().edges, - }; + const prevState = cloneHistoryState( + get().nodes, + useEdgeStore.getState().edges, + ); updateNodeData: (nodeId, data) => { - const prevState = { - nodes: get().nodes, - edges: useEdgeStore.getState().edges, - }; + const prevState = cloneHistoryState( + get().nodes, + useEdgeStore.getState().edges, + ); setCredentialsOptional: (nodeId: string, optional: boolean) => { - const prevState = { - nodes: get().nodes, - edges: useEdgeStore.getState().edges, - }; + const prevState = cloneHistoryState( + get().nodes, + useEdgeStore.getState().edges, + );Also applies to: 249-252, 419-422
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (7)
autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsxautogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts
🧰 Additional context used
📓 Path-based instructions (8)
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
For frontend code formatting and linting, always run pnpm formatIf adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
autogpt_platform/frontend/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/for data fetching in frontend
Use function declarations (not arrow functions) for components and handlers in frontend
Only use Phosphor Icons in frontend; never use other icon libraries
Never usesrc/components/__legacy__/*or deprecatedBackendAPIin frontend
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
autogpt_platform/frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js 21+ with pnpm package manager for frontend development
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/(generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Use PascalCase for components, camelCase with use prefix for hooks
No barrel files or index.ts re-exports in frontend
For frontend render errors, use component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Format frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
autogpt_platform/frontend/**
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/**: Install frontend dependencies usingpnpm iinstead of npm
Generate API client from OpenAPI spec usingpnpm generate:api
Regenerate API client hooks usingpnpm generate:apiwhen OpenAPI spec changes
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
autogpt_platform/frontend/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.tsautogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use design system components from
src/components/(atoms, molecules, organisms) in frontend
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
autogpt_platform/frontend/src/app/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Create frontend pages in
src/app/(platform)/feature-name/page.tsxwith correspondingusePageName.tshook and localcomponents/subfolder
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Frontend error handling uses ErrorCard for render errors, toast for mutations, Sentry for exceptions
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Frontend workflow builder uses visual graph editor with xyflow/react
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Frontend workflow builder uses visual graph editor with xyflow/react
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsxautogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Never use `src/components/__legacy__/*` or deprecated `BackendAPI` in frontend
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts
📚 Learning: 2025-11-25T08:48:55.844Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T08:48:55.844Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : If adding protected frontend routes, update `frontend/lib/supabase/middleware.ts`
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.stories.{ts,tsx} : Add Storybook stories for new frontend components and Playwright E2E tests for features
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : For frontend render errors, use <ErrorCard /> component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts
🧬 Code graph analysis (4)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.ts (1)
autogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.ts (1)
useHistoryStore(28-126)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx (1)
autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts (1)
useNodeStore(119-538)
autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts (1)
autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts (1)
useNodeStore(119-538)
autogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.ts (2)
autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts (1)
useNodeStore(119-538)autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts (1)
useEdgeStore(40-205)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: test
- GitHub Check: lint
- GitHub Check: chromatic
- GitHub Check: types
- GitHub Check: Seer Code Review
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
🔇 Additional comments (12)
autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts (2)
51-55: Solid defensive error extraction.The fallback pattern ensures safe access to
error.response?.detailandnode_errors, preventing null reference errors when the API response structure is unexpected.
82-91: Consistent usage of extractednodeErrorsvariable.The first error node lookup correctly uses the already-extracted
nodeErrorsvariable, maintaining consistency with the refactored error handling above.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeHeader.tsx (1)
23-26: Safer title fallback whenagent_nameis missing.
Optional chaining avoids a null/undefined crash while preserving the fallback order.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/Flow.tsx (1)
58-66: Collision resolution now uses current store nodes.
Good call to read from the store to avoid stale node data during drag stop.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/useCustomEdge.ts (1)
55-68: Edge removals now captured in history.
Capturing prevState only on removals keeps undo/redo consistent without extra noise.autogpt_platform/frontend/src/app/(platform)/build/stores/edgeStore.ts (2)
58-73: Add-edge now avoids duplicates and records history.
The pre-mutation snapshot aligns well with undo/redo flow.
77-87: Remove-edge now records previous state for undo.
This keeps edge deletion reversible via history.autogpt_platform/frontend/src/app/(platform)/build/stores/historyStore.ts (4)
40-47: Guard against pushing current state is a solid noise reducer.
Avoids redundant history entries when no real change occurred.
67-86: Undo now skips no-op states and maintains stack integrity.
The equality guard and past/future updates look correct.
93-109: Redo logic now avoids duplicate past entries.
Capturing actualCurrentState before applying nextState is the right sequencing.
113-122: canUndo now reflects actual state changes.
Comparing against current nodes/edges improves accuracy.autogpt_platform/frontend/src/app/(platform)/build/stores/nodeStore.ts (1)
153-192: Verify node deletion doesn’t create two undo steps (edges then node).Edge removals are now tracked in the edge store, and node deletions typically auto-remove connected edges. Please confirm a node delete results in a single undo step that restores both nodes and edges. If you see two steps, consider batching or skipping edge-store history when the change originates from node deletion.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
2 participants
Changes 🏗️
useRunInputDialog.tsto properly handle cases where node errors are empty or undefinedFlow.tsxto use the current state from the store instead of stale propsChecklist ���
For code changes: