refactor(frontend): refactor credentials input with unified CredentialsGroupedView component #11801
Conversation
…tegration ### Summary This commit refactors the `RunInputDialog` component to utilize the new `CredentialsGroupedView` for improved credential management. ### Key Changes 1. **Integration of `CredentialsGroupedView`**: Replaces the previous credential handling logic with a more structured view that displays credential fields and manages their state. 2. **Updated State Management**: Introduces new handlers for credential field changes and updates the way credentials are processed within the dialog. 3. **Removed Legacy Code**: Cleans up unused credential schema handling and related UI components, streamlining the codebase. ### Benefits - **Improved User Experience**: The new layout provides a clearer and more organized way to manage credentials. - **Enhanced Code Maintainability**: By consolidating credential handling into a dedicated component, the code is easier to maintain and extend in the future. ### Testing - Verified that the `RunInputDialog` correctly displays and manages credentials using the new `CredentialsGroupedView`. - Ensured that all existing functionality remains intact and that no regressions were introduced.
…seFlow ### Summary This commit refactors the `useFlow` hook to ensure that hardcoded values remain in sync with handle IDs when custom nodes are present. ### Key Changes 1. **Moved Sync Logic**: The logic to synchronize hardcoded values with handle IDs has been moved into a new `useEffect` that triggers when both `customNodes` and `graph.links` are available. 2. **Removed Redundant Code**: The previous inline synchronization logic has been removed to streamline the code and improve readability. ### Benefits - **Improved Code Clarity**: The separation of concerns enhances the maintainability of the `useFlow` hook. - **Consistent State Management**: Ensures that hardcoded values are consistently updated based on the current state of custom nodes and graph links. ### Testing - Verified that the synchronization logic works as intended without introducing regressions in the flow editor functionality.
…d cleanup logic ### Summary This commit refactors the `NodeOutput` component to improve its user interface and streamline the handling of source names. ### Key Changes 1. **Accordion Integration**: Replaced the previous expandable section with an accordion layout for better organization of node output data. 2. **Source Name Cleanup**: Introduced utility functions to clean up source names, ensuring consistency in how tool source names are displayed. 3. **Code Simplification**: Removed unnecessary state management for expansion, simplifying the component's logic. ### Benefits - **Improved User Experience**: The accordion layout enhances readability and interaction with node output data. - **Cleaner Code**: The refactor reduces complexity and improves maintainability of the `NodeOutput` component. ### Testing - Verified that the accordion functionality works as intended and that source names are displayed correctly without regressions in the node output display.
github-project-automation
bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
WalkthroughThe PR refactors credential handling in the frontend by converting CredentialsGroupedView from context-based state management to accepting external props (inputCredentials, inputValues, onCredentialChange). RunInputDialog and RunAgentModal components are updated to use this new API. Additionally, NodeOutput replaces manual expand/collapse logic with the Accordion component. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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
This stack of pull requests is managed by Graphite. Learn more about stacking. |
…nd builder view switch ### Summary This commit modifies the mock feature flags in `use-get-flag.ts` to set both `NEW_FLOW_EDITOR` and `BUILDER_VIEW_SWITCH` to false. ### Key Changes - Updated `mockFlags` to disable `NEW_FLOW_EDITOR` and `BUILDER_VIEW_SWITCH`. ### Benefits - Ensures that these features are not enabled by default during development and testing. ### Testing - Verified that the changes do not affect existing functionality and that the flags are correctly set to false.
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx`:
- Around line 96-102: The code casts savedCredential.type to CredentialsType
without validation; add a type guard function (e.g., isCredentialsType(value):
value is CredentialsType) that checks savedCredential.type against the allowed
literals ("api_key", "oauth2", "user_password") and use it in
CredentialsGroupedView before calling onCredentialChange so you only pass a
validated CredentialsType; if the guard fails, handle gracefully (skip calling
onCredentialChange, set a safe default, or log an error) rather than blindly
casting.
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.ts`:
- Around line 1-2: Delete this barrel re-export file and update all imports to
reference the concrete module files directly: remove index.ts that re-exports
CredentialsGroupedView and the CredentialField type, then change any import
locations to import { CredentialsGroupedView } from "./CredentialsGroupedView"
(pointing to CredentialsGroupedView.tsx) and import type { CredentialField }
from "./helpers" (pointing to helpers.ts). Ensure no other code depends on the
barrel by searching for imports from the folder path and replacing them with the
explicit file paths.
🧹 Nitpick comments (6)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx (2)
41-68: Consider adding a null check forinputDataand accessibility label for the copy button.
The
inputDatais rendered without a null/undefined check. If the execution result lacks input data, this could passundefinedtoContentRenderer.The copy button contains only an icon without an
aria-label, which impacts screen reader accessibility.Suggested improvements
- <div className="space-y-2"> - <Text variant="small-medium">Input</Text> - - <ContentRenderer value={inputData} shortContent={false} /> - - <div className="mt-1 flex justify-end gap-1"> + {inputData != null && ( + <div className="space-y-2"> + <Text variant="small-medium">Input</Text> + + <ContentRenderer value={inputData} shortContent={false} /> + + <div className="mt-1 flex justify-end gap-1"> <NodeDataViewer data={inputData} pinName="Input" execId={executionResultId} /> <Button variant="secondary" size="small" onClick={() => handleCopy("input", inputData)} + aria-label={copiedKey === "input" ? "Copied" : "Copy input data"} className={cn( "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900", copiedKey === "input" && "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200", )} > {copiedKey === "input" ? ( <CheckIcon size={12} className="text-green-600" /> ) : ( <CopyIcon size={12} /> )} </Button> + </div> </div> - </div> + )}
106-121: Addaria-labelfor accessibility on per-pin copy buttons.Consistent with the input copy button, these icon-only buttons should include an
aria-labelfor screen reader users.Suggested fix
<Button variant="secondary" size="small" onClick={() => handleCopy(key, value)} + aria-label={copiedKey === key ? "Copied" : `Copy ${beautifyString(key)} data`} className={cn( "h-fit min-w-0 gap-1.5 border border-zinc-200 p-2 text-black hover:text-slate-900", copiedKey === key && "border-green-400 bg-green-100 hover:border-green-400 hover:bg-green-200", )} >autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts (1)
122-147: Prefer a named function in the handler per frontend style rules.
If you want to keep the memoization, swap the arrow for a named function to align with “function declarations for handlers.”As per coding guidelines, prefer function declarations for handlers.♻️ Suggested tweak
- const handleCredentialFieldChange = useCallback( - (key: string, value?: CredentialsMetaInput) => { + const handleCredentialFieldChange = useCallback(function handleCredentialFieldChange( + key: string, + value?: CredentialsMetaInput, + ) { setCredentialValues((prev) => { if (value) { return { ...prev, [key]: value }; } else { const next = { ...prev }; delete next[key]; return next; } }); - }, - [], - ); + }, []);autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx (1)
76-115: Auto-select effect is correctly guarded but consider cleanup.The
hasAttemptedAutoSelectref prevents repeated auto-selection, which is appropriate. However, ifcredentialFieldschanges (e.g., different nodes selected), the ref won't reset, potentially skipping auto-selection for new fields.Consider whether the ref should reset when
credentialFieldsidentity changes, if that's a valid use case for this component.autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx (1)
69-69: Consider simplifying the dual condition.The condition
hasCredentials() && credentialFields.length > 0may be redundant ifhasCredentials()is derived from whether credential fields exist. If they're always in sync, you could simplify to justcredentialFields.length > 0.However, if
hasCredentials()checks graph-level metadata whilecredentialFieldsis a derived/filtered list, the dual check provides defense-in-depth against rendering an empty section.#!/bin/bash # Check what hasCredentials() returns and if it's related to credentialFields echo "=== hasCredentials implementation in graphStore ===" rg -n "hasCredentials" --type=ts -A5 | head -40autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx (1)
33-35: Consider memoizingrequiredCredentialsSet.The
new Set(...)is created on every render, which creates a new object reference each time. WhileCredentialsGroupedViewuses this in dependency arrays foruseMemoanduseEffect, the changing reference could trigger unnecessary recalculations.♻️ Proposed fix to memoize the Set
+ const requiredCredentials = useMemo( + () => + new Set( + (agent.credentials_input_schema?.required as string[]) || [], + ), + [agent.credentials_input_schema?.required], + ); - const requiredCredentials = new Set( - (agent.credentials_input_schema?.required as string[]) || [], - );
📜 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 (10)
autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.ts
🧰 Additional context used
📓 Path-based instructions (10)
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/helper.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.tsautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/helper.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.tsautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/helper.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.tsautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/helper.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.tsautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/helper.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.tsautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/helper.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.tsautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
autogpt_platform/frontend/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/src/components/**/*.{ts,tsx}: Separate render logic from data/behavior in components
Structure frontend components asComponentName/ComponentName.tsxplususeComponentName.tshook plushelpers.tsfile
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.ts
autogpt_platform/frontend/src/components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/components/**/*.tsx: Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Use Tailwind CSS utilities only for styling in frontend. Use design system components from src/components/ (atoms, molecules, organisms). Never use src/components/legacy/*
Only use Phosphor Icons (@phosphor-icons/react) for icon components in frontend
Prefer design tokens over hardcoded values in frontend styling
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx
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/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.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/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
🧠 Learnings (8)
📚 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/src/components/**/*.{ts,tsx} : Structure frontend components as `ComponentName/ComponentName.tsx` plus `useComponentName.ts` hook plus `helpers.ts` file
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.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} : Use PascalCase for components, camelCase with use prefix for hooks
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.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/components/**/*.tsx : Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
📚 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/src/app/**/*.tsx : Create frontend pages in `src/app/(platform)/feature-name/page.tsx` with corresponding `usePageName.ts` hook and local `components/` subfolder
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.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: Frontend workflow builder uses visual graph editor with xyflow/react
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.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} : No barrel files or index.ts re-exports in frontend
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.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/src/**/*.tsx : Use design system components from `src/components/` (atoms, molecules, organisms) in frontend
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.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/src/components/**/*.{ts,tsx} : Separate render logic from data/behavior in components
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
🧬 Code graph analysis (3)
autogpt_platform/frontend/src/app/(platform)/build/components/helper.ts (1)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx (1)
CustomEdge(24-24)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx (6)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsx (1)
useNodeOutput(6-45)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ContentRenderer.tsx (1)
ContentRenderer(20-51)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/NodeDataViewer.tsx (1)
NodeDataViewer(32-168)autogpt_platform/frontend/src/components/atoms/Button/Button.tsx (1)
Button(12-152)autogpt_platform/frontend/src/lib/utils.ts (1)
beautifyString(147-156)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ViewMoreData.tsx (1)
ViewMoreData(12-141)
autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx (1)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx (1)
CredentialsGroupedView(31-188)
⏰ 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). (4)
- GitHub Check: test
- GitHub Check: types
- GitHub Check: Seer Code Review
- GitHub Check: Check PR Status
🔇 Additional comments (17)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx (3)
1-14: LGTM!Clean import structure using Phosphor Icons and design system components from atoms/molecules as per coding guidelines.
16-22: LGTM!Good use of function declaration for the component and clean simplification of the hook return values by delegating expansion state to the Accordion component.
29-30: Verify: Accordion starts expanded by default.The
defaultValue="node-output"causes the accordion to render expanded on initial load. The previous implementation used manualisExpandedstate. Please confirm this UX change (starting expanded) is intentional, as users may prefer the node output to be collapsed initially to reduce visual clutter.If collapsed-by-default is desired, remove the
defaultValueprop.autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.ts (1)
2-2: Import path refactor looks good.
Keeps helper resolution consistent after the shared move.autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts (1)
179-187: Return shape updates look good.
Exposing the new credential fields and handler keeps the hook aligned with the new grouped view.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts (1)
154-160: LGTM — sync timing is clearer now.
Running the hardcoded-values sync after nodes and links are ready should prevent early misses.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsx (1)
39-42: LGTM — streamlined return values fit the Accordion refactor.
No issues with the updated hook output shape.autogpt_platform/frontend/src/app/(platform)/build/components/helper.ts (1)
64-78: Confirm the backend's expectations forsource_namewhen receivingtoolsvs. the fulltools_^_{node_id}_~_{field}format.The concern about data loss is valid:
customEdgeToLinkwritesedge.sourceHandledirectly tosource_nameafter cleanup, discarding the original tool-specific routing information. Backend code shows thattools_^_{node_id}_~_{field_name}format is used for dynamic field routing during execution.When the graph is saved via
getBackendLinks(), only the cleaned"tools"value (without the node ID and field routing info) is sent to the backend. Verify whether:
- The backend can reconstruct the full routing format from other link data (
source_id,sink_id,sink_name), or- The backend relies on the complete
source_nameformat and this causes routing failures for tool-connected nodesIf the backend requires the full format, preserve the original
source_nameinCustomEdge.dataas suggested in the original comment.autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx (3)
23-29: Props interface is well-defined for controlled component pattern.The component now properly accepts external state management props (
inputCredentials,inputValues,onCredentialChange), enabling reuse across different contexts (RunInputDialog, ModalRunSection). This is a clean controlled component API.
117-141: User credentials section renders correctly.The mapping over
userCredentialFieldsand passing props toCredentialsInputis clean. TheonCredentialChangecallback is correctly wired.
144-185: System credentials Accordion section looks good.The collapsible Accordion for system credentials with the missing indicator is a good UX pattern. Icon usage follows guidelines (Phosphor Icons).
autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx (3)
13-13: Import path updated to shared location.The import correctly points to the new shared
CredentialsGroupedViewlocation, aligning with the refactoring goal of making this component reusable.
28-39: Hook API updated for credential field handling.The destructured values (
credentialFields,requiredCredentials,handleCredentialFieldChange) align with the newCredentialsGroupedViewAPI. This cleanly separates state management (in the hook) from rendering (in the component).
77-83: CredentialsGroupedView props are correctly wired.The prop mappings are appropriate:
credentialValues→inputCredentials(consistent naming)handleCredentialFieldChange→onCredentialChange(callback pattern)autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx (3)
2-2: Import updated to shared component location.Correctly imports from the new centralized path, ensuring both
RunInputDialogandModalRunSectionuse the same component.
10-24: Context consumption is well-structured.The component cleanly consumes modal context for credential state management. The separation between
inputValues(form inputs) andinputCredentials(credential selections) is clear.
104-110: VerifysetInputCredentialsValuecallback signature matches expected type.The
onCredentialChangeprop expects(key: string, value?: CredentialsMetaInput) => void, butsetInputCredentialsValuefrom the context is typed as(key: string, value: any | undefined) => void. While TypeScript allowsanyto be assigned toCredentialsMetaInput, the context should use the specificCredentialsMetaInputtype instead ofanyfor proper type safety.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
...nts/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx
Show resolved
Hide resolved
...ontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/index.ts
Outdated
Show resolved
Hide resolved
Abhi1992002
changed the title
### Summary This commit refactors the import paths for the `CredentialsGroupedView` component across multiple files to ensure consistency and correct referencing. ### Key Changes - Updated import statements in `RunInputDialog.tsx` and `ModalRunSection.tsx` to point to the correct file path for `CredentialsGroupedView`. - Removed the now obsolete index file for `CredentialsGroupedView`. ### Benefits - **Improved Code Clarity**: Ensures that the component is imported from the correct location, reducing potential errors. - **Streamlined Imports**: Consolidates the import structure for better maintainability. ### Testing - Verified that the components render correctly with the updated import paths and that no functionality was broken by these changes.
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
autogpt_platform/frontend/src/app/(platform)/build/components/helper.ts (1)
70-80: Restore the fulltools_^_pattern when converting edges back to backend format.When sending edges to the backend via
customEdgeToLink(), thesource_namefield loses thetools_^_{node_id}_~_{field}routing information becauselinkToCustomEdge()only stores the cleaned handle ID ("tools"). Multiple tool outputs on the same node cannot be distinguished, causing incorrect routing in backend execution.The frontend must either:
- Store the full source name pattern separately in edge data during conversion, or
- Reconstruct the original pattern from edge metadata when converting back to backend format
This affects any workflow using Smart Decision Maker or other blocks that emit tool outputs.
🤖 Fix all issues with AI agents
In
`@autogpt_platform/frontend/src/app/`(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx:
- Around line 40-67: The copy buttons are icon-only and lack accessible labels;
update the Button elements that invoke handleCopy (e.g., the Button with
onClick={() => handleCopy("input", inputData)} and the analogous output Button
around lines 100-122) to include an aria-label prop like aria-label={`Copy
input`} or aria-label={`Copy output`} (update dynamically based on the pin
name), and ensure the label remains accurate when using copiedKey state (e.g.,
aria-label={`Copied input`} when copiedKey === "input") so screen readers
describe the action.
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx`:
- Around line 8-11: The file imports deprecated types CredentialsMetaInput and
CredentialsType from "@/lib/autogpt-server-api/*"; replace those occurrences in
CredentialsGroupedView.tsx by importing the same type definitions from the
approved shared types module or the generated API types (e.g., shared/types or
api/generated/types), update the import statement(s) to point to the new module,
and remove the deprecated import; ensure you update any references inside the
CredentialsGroupedView component to use the newly imported symbols and run type
checks to confirm no remaining references to the deprecated module.
♻️ Duplicate comments (2)
autogpt_platform/frontend/src/app/(platform)/build/components/helper.ts (1)
64-68: Data loss incleanupSourceNamecollapses all tool outputs to a single handle.This issue was previously flagged. The function discards the unique tool identifier from source names like
tools_^_tool_a_~_output1, mapping them all to"tools". This causes:
- Edge collisions when multiple tool outputs exist on the same node
- Round-trip data loss since
customEdgeToLink(line 86) will convert the edge back withsource_name: "tools"instead of the original value🐛 Proposed fix to preserve unique tool identifiers
-const isToolSourceName = (sourceName: string): boolean => - sourceName.startsWith("tools_^_"); - -const cleanupSourceName = (sourceName: string): string => - isToolSourceName(sourceName) ? "tools" : sourceName; +const TOOL_SOURCE_PREFIX = "tools_^_"; + +const isToolSourceName = (sourceName: string): boolean => + sourceName.startsWith(TOOL_SOURCE_PREFIX); + +/** + * Converts tool source names to a handle-compatible format while preserving uniqueness. + * e.g., "tools_^_tool_a_~_output1" -> "tools_tool_a_output1" + */ +const cleanupSourceName = (sourceName: string): string => + isToolSourceName(sourceName) + ? sourceName.replace(TOOL_SOURCE_PREFIX, "tools_").replace(/_\^_|_~_/g, "_") + : sourceName;autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx (1)
96-101: ValidatesavedCredential.typebefore casting.Still casting a string to
CredentialsTypewithout a guard; please ensure only allowed literals pass through before callingonCredentialChange.
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts (1)
173-177: Consider documenting the difference between credential change handlers.Both
handleCredentialChange(replaces all credentials) andhandleCredentialFieldChange(updates single field) are exported. If both are needed for different consumers, consider adding JSDoc comments to clarify their intended use cases.
📜 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/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx
🧰 Additional context used
📓 Path-based instructions (10)
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/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.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/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
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/BuilderActions/components/RunInputDialog/RunInputDialog.tsxautogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.tsautogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsxautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsxautogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx
autogpt_platform/frontend/src/components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/components/**/*.tsx: Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Use Tailwind CSS utilities only for styling in frontend. Use design system components from src/components/ (atoms, molecules, organisms). Never use src/components/legacy/*
Only use Phosphor Icons (@phosphor-icons/react) for icon components in frontend
Prefer design tokens over hardcoded values in frontend styling
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx
autogpt_platform/frontend/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/src/components/**/*.{ts,tsx}: Separate render logic from data/behavior in components
Structure frontend components asComponentName/ComponentName.tsxplususeComponentName.tshook plushelpers.tsfile
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx
🧠 Learnings (9)
📚 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/src/components/**/*.{ts,tsx} : Structure frontend components as `ComponentName/ComponentName.tsx` plus `useComponentName.ts` hook plus `helpers.ts` file
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.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} : Use PascalCase for components, camelCase with use prefix for hooks
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.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/src/app/**/*.tsx : Create frontend pages in `src/app/(platform)/feature-name/page.tsx` with corresponding `usePageName.ts` hook and local `components/` subfolder
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.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} : Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.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/components/**/*.tsx : Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.tsautogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
📚 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} : Use function declarations (not arrow functions) for components and handlers in frontend
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/helper.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: Frontend workflow builder uses visual graph editor with xyflow/react
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.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/src/**/*.tsx : Use design system components from `src/components/` (atoms, molecules, organisms) in frontend
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
📚 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/src/components/**/*.{ts,tsx} : Separate render logic from data/behavior in components
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
🧬 Code graph analysis (4)
autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx (1)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx (1)
CredentialsGroupedView(31-189)
autogpt_platform/frontend/src/app/(platform)/build/components/helper.ts (1)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/edges/CustomEdge.tsx (1)
CustomEdge(24-24)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx (2)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/helpers.ts (1)
CredentialField(4-4)autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts (1)
CredentialsType(205-209)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx (6)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/useNodeOutput.tsx (1)
useNodeOutput(6-45)autogpt_platform/frontend/src/components/atoms/Text/Text.tsx (1)
Text(15-35)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ContentRenderer.tsx (1)
ContentRenderer(20-51)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/NodeDataViewer/NodeDataViewer.tsx (1)
NodeDataViewer(32-168)autogpt_platform/frontend/src/lib/utils.ts (1)
beautifyString(147-156)autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/components/ViewMoreData.tsx (1)
ViewMoreData(12-141)
⏰ 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). (6)
- GitHub Check: types
- GitHub Check: test
- GitHub Check: chromatic
- GitHub Check: Seer Code Review
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
🔇 Additional comments (13)
autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/Flow/useFlow.ts (1)
153-159: LGTM! Clean separation of sync logic into a dedicated effect.Moving the hardcoded values synchronization into its own effect improves readability and ensures proper timing—running after both nodes and links are loaded. The pattern is consistent with other effects in this file (e.g., line 201).
One minor observation: if performance becomes a concern with large graphs, consider tracking which node IDs actually changed rather than syncing all nodes on every
customNodesreference change.autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/useRunInputDialog.ts (5)
10-14: LGTM!The new imports for
useCallbackandCredentialFieldtype are appropriate for the added functionality.
128-131: LGTM!The
requiredCredentialsmemo correctly creates a Set for efficient O(1) lookups when checking if a credential field is required.
133-147: LGTM!The
handleCredentialFieldChangecallback is well-implemented:
- Uses functional state update to avoid stale closures
- Properly handles both setting and clearing credential values
- Empty dependency array is correct since
setCredentialValuesis stable
179-191: LGTM!The return statement properly exposes both the new granular
handleCredentialFieldChangecallback and the existinghandleCredentialChangefor full object updates, providing flexibility for different consumer use cases.
122-126: The implementation is correctly typed and type-safe.CredentialFieldis defined as[string, any], which is fully compatible with the[string, T][]tuple array returned byObject.entries(). The early return of[]for missing schema properties is also type-safe. No changes needed.autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx (1)
23-37: Props-based credential wiring looks good.Externalizing
inputCredentials/inputValues/onCredentialChangeimproves reuse and keeps state ownership clear.autogpt_platform/frontend/src/app/(platform)/build/components/BuilderActions/components/RunInputDialog/RunInputDialog.tsx (1)
69-83: Nice consolidation to the shared CredentialsGroupedView.The new guard (
credentialFields.length > 0) and prop wiring make the credentials section safer and more reusable.autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/components/NewAgentLibraryView/components/modals/RunAgentModal/components/ModalRunSection/ModalRunSection.tsx (3)
2-2: LGTM!The import path correctly references the centralized
CredentialsGroupedViewcomponent location, following the no-barrel-files guideline with a direct import.
22-24: LGTM!The new context values
inputCredentialsandsetInputCredentialsValueare properly destructured, enabling external credential state management consistent with the refactoredCredentialsGroupedViewAPI.
104-110: Props correctly match theCredentialsGroupedViewcomponent signature.All five props (
credentialFields,requiredCredentials,inputCredentials,inputValues,onCredentialChange) align with the component's interface, and the callback is properly wired tosetInputCredentialsValue.autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx (2)
3-39: Accordion-based Node Output layout looks cohesive.The Accordion integration and the hook-driven data wiring read clean and consistent with the new structure.
71-99: Output pin rendering + “View more” behavior is intact.Limiting initial pins while delegating overflow to
ViewMoreDatakeeps the panel compact without losing access to full output.Also applies to: 129-134
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
...(platform)/build/components/FlowEditor/nodes/CustomNode/components/NodeOutput/NodeOutput.tsx
Show resolved
Hide resolved
...nts/contextual/CredentialsInput/components/CredentialsGroupedView/CredentialsGroupedView.tsx
Show resolved
Hide resolved
github-project-automation
bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
Abhi1992002
deleted the
abhi/replace-new-builder-credential-form-with-new-one
branch
github-project-automation
bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
2 participants
Changes 🏗️
Checklist 📋
For code changes:
For configuration changes:
.env.defaultis updated or already compatible with my changesdocker-compose.ymlis updated or already compatible with my changes