feat(frontend): add credential type selector for multi-auth providers - #12378
Conversation
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
🔍 PR Overlap DetectionThis check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early. 🟢 Low Risk — File Overlap OnlyThese PRs touch the same files but different sections (click to expand)
Summary: 0 conflict(s), 0 medium risk, 1 low risk (out of 1 PRs with file overlap) Auto-generated on push. Ignores: |
WalkthroughAdds multi-credential-type support to the CredentialsInput flow: new CredentialTypeSelector modal, credential-type utilities, UI updates to show type badges, and hook plumbing to open/control the selector with fallback to existing single-type flows. Changes
Sequence DiagramsequenceDiagram
participant User
participant CredentialsInput
participant CredentialTypeSelector
participant TabContent as Tab Content Handler
participant ExternalFlow as OAuth/Modal/Server
User->>CredentialsInput: Click "Add credential"
alt Multiple credential types available
CredentialsInput->>CredentialTypeSelector: open(supportedTypes, provider, schema)
User->>CredentialTypeSelector: choose type (e.g., API Key)
CredentialTypeSelector->>TabContent: render tab for chosen type
User->>TabContent: submit credentials / authorize
TabContent->>ExternalFlow: onCredentialsCreate / onOAuthLogin
ExternalFlow-->>CredentialTypeSelector: success
CredentialTypeSelector->>CredentialsInput: notify(created credential)
CredentialsInput->>User: update list / UI
else Single credential type
CredentialsInput->>ExternalFlow: open APIKeyCredentialsModal or OAuth flow
ExternalFlow-->>CredentialsInput: credential created
CredentialsInput->>User: update list / UI
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 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
🧪 Generate unit tests (beta)
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 |
![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: 3
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx (1)
52-61: Avoid showing the provider logo twice for OAuth credentials.The row already renders
ProviderIconat Lines 104-105. Foroauth2, the newTypeIconresolves to the same provider logo again, so GitHub/Google entries end up with duplicate branding instead of an extra type cue. A generic OAuth glyph here, or suppressing the second icon for OAuth rows, would read more cleanly.Also applies to: 107-107
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx` around lines 52 - 61, The TypeIcon logic is causing duplicate provider logos for OAuth entries; update the resolution for TypeIcon in CredentialRow.tsx so that when credential.type === "oauth2" it does not use getCredentialTypeIcon(provider) but instead uses a generic OAuth glyph or no icon: modify the isRealCredentialType check or add an explicit branch before calling getCredentialTypeIcon (reference symbols: credential.type, isRealCredentialType, credType, TypeIcon, getCredentialTypeIcon, provider, fallbackIcon, ProviderIcon) so ProviderIcon remains the sole provider logo and OAuth rows show a generic OAuth icon or no second icon.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx`:
- Around line 3-7: The new CredentialTypeSelector.tsx incorrectly imports Form,
FormDescription, and FormField from the deprecated __legacy__ form; replace
those imports with the current form primitives used elsewhere in the repo (use
the non-legacy Form/FormField/FormDescription equivalents or the project's
current form components) so the selector no longer depends on
src/components/__legacy__/ui/form; update the import statement in
CredentialTypeSelector.tsx to reference the canonical form components and adjust
any prop names or usage to match the current API (preserve component names used
in this file: Form, FormField, FormDescription or map to their modern
counterparts) to ensure compatibility with the new UI layer.
- Around line 238-260: The onChange handler for the Input with id="expiresAt" in
CredentialTypeSelector is stripping the time portion by forcing T00:00; instead
preserve the full datetime-local value (including hours/minutes) when calling
field.onChange. Replace the normalization logic in the onChange callback (the
block that creates dateTime, setHours(0,0,0,0), and builds normalizedValue) so
that when value is truthy you pass the original value (or a canonicalized value
that retains time like adding seconds if needed) to field.onChange; leave the
empty-case behavior unchanged.
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts`:
- Around line 285-289: In handleActionButtonClick, clear any stale OAuth error
before opening the multi-type selector: when hasMultipleCredentialTypes is true
call the state setter that resets oAuthError (e.g., setOAuthError(null) or the
equivalent) immediately before calling setCredentialTypeSelectorOpen(true) so
previous OAuth failures are not rendered after switching credential types.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx`:
- Around line 52-61: The TypeIcon logic is causing duplicate provider logos for
OAuth entries; update the resolution for TypeIcon in CredentialRow.tsx so that
when credential.type === "oauth2" it does not use
getCredentialTypeIcon(provider) but instead uses a generic OAuth glyph or no
icon: modify the isRealCredentialType check or add an explicit branch before
calling getCredentialTypeIcon (reference symbols: credential.type,
isRealCredentialType, credType, TypeIcon, getCredentialTypeIcon, provider,
fallbackIcon, ProviderIcon) so ProviderIcon remains the sole provider logo and
OAuth rows show a generic OAuth icon or no second icon.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: fddc751a-f599-4439-9024-f538c1c3b209
📒 Files selected for processing (6)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts
📜 Review details
⏰ 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). (5)
- GitHub Check: Check PR Status
- GitHub Check: types
- GitHub Check: Seer Code Review
- GitHub Check: end-to-end tests
- GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (14)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend development
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Runpnpm formatto auto-fix formatting issues before completing work
Runpnpm lintto check for lint errors and fix any that appear before completing work
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/generated/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend developmentRun
pnpm typesto check for type errors and fix any that appear before completing work
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/src/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Structure React components as: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts (exception: small 3-4 line components can be inline; render-only components can be direct files)
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}: Format frontend code usingpnpm format
Never use components fromsrc/components/__legacy__/*
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Structure components asComponentName/ComponentName.tsx+useComponentName.ts+helpers.tsand use design system components fromsrc/components/(atoms, molecules, organisms)
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}and regenerate withpnpm generate:api
Use function declarations (not arrow functions) for components and handlers
Separate render logic from business logic with component.tsx + useComponent.ts + helpers.ts structure
Colocate state when possible, avoid creating large components, use sub-components in local/componentsfolder
Avoid large hooks, abstract logic intohelpers.tsfiles when sensible
Use arrow functions only for callbacks, not for component declarations
Avoid comments at all times unless the code is very complex
Do not useuseCallbackoruseMemounless asked to optimize a given function
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components and handlers
Use type-safe generated API hooks via Orval + React Query for data fetching
Use React Query for server state management and co-locate UI state in components/hooks
Separate render logic (.tsx) from business logic (use*.tshooks)
Use only shadcn/ui (Radix UI primitives) with Tailwind CSS for UI components
Use Phosphor Icons only for all icon implementations
Use ErrorCard component for render errors, toast for mutations, and Sentry for exceptions
Use design system components fromsrc/components/(atoms, molecules, organisms)
Never usesrc/components/__legacy__/*components
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Use Tailwind CSS only for styling with design tokens
Do not useuseCallbackoruseMemounless asked to optimize a specific function
Never type withanyunless a variable/attribute can actually be of any type
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should be
interface Props { ... }(not exported) unless the interface needs to be used outside the componentUse
type Props = { ... }(not exported) for component props unless used outside the component
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Fully capitalize acronyms in symbols, e.g.
graphID,useBackendAPI
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Put sub-components in a local
components/folder within the feature directory
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/src/**/[A-Z]*/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Structure components as ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/CredentialsInput.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
autogpt_platform/frontend/src/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Do not type hook returns, let Typescript infer as much as possible
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.ts
autogpt_platform/frontend/src/**/use*.ts
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
autogpt_platform/frontend/src/**/use*.ts: Extract component logic into custom hooks grouped by concern, with each hook in its own.tsfile
Do not type hook returns; let TypeScript infer types as much as possible
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts
🧠 Learnings (14)
📓 Common learnings
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11795
File: autogpt_platform/backend/backend/api/features/chat/tools/utils.py:92-111
Timestamp: 2026-01-19T07:20:23.494Z
Learning: In autogpt_platform/backend/backend/api/features/chat/tools/utils.py, the _serialize_missing_credential function uses next(iter(field_info.provider)) for provider selection. The PR author confirmed this non-deterministic provider selection is acceptable because the function returns both "type" (single, for backward compatibility) and "types" (full array), which achieves the primary goal of deterministic credential type presentation.
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/api/openapi.json:10030-10037
Timestamp: 2026-03-01T07:59:02.311Z
Learning: Repo: Significant-Gravitas/AutoGPT PR: 12213 — For MCP manual token storage, backend model autogpt_platform/backend/backend/api/features/mcp/routes.py defines MCPStoreTokenRequest.token as Pydantic SecretStr with a min length constraint, which generates OpenAPI schema metadata (format: "password", writeOnly: true, minLength: 1) in autogpt_platform/frontend/src/app/api/openapi.json. Prefer SecretStr (with length constraints) for sensitive request fields so generated TS clients and docs treat them as secrets.
Learnt from: Pwuts
Repo: Significant-Gravitas/AutoGPT PR: 12284
File: autogpt_platform/frontend/src/app/api/openapi.json:11897-11900
Timestamp: 2026-03-04T23:58:18.476Z
Learning: Repo: Significant-Gravitas/AutoGPT — PR `#12284`
Backend/frontend OpenAPI codegen convention: In backend/api/features/store/model.py, the StoreSubmission and StoreSubmissionAdminView models define submitted_at: datetime | None, changes_summary: str | None, and instructions: str | None with no default. This is intentional to produce “required but nullable” fields in OpenAPI (properties appear in required[] and use anyOf [type, null]). This matches Prisma’s submittedAt DateTime? and changesSummary String?. Do not flag this as a required/nullable mismatch.
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.tsx : Use `type Props = { ... }` (not exported) for component props unless used outside the component
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsxautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/use*.ts : Extract component logic into custom hooks grouped by concern, with each hook in its own `.ts` file
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/use*.ts : Do not type hook returns; let TypeScript infer types as much as possible
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use React Query for server state (via generated hooks) in frontend development
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use React Query for server state management and co-locate UI state in components/hooks
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use type-safe generated API hooks via Orval + React Query for data fetching
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/useCredentialsInput.ts
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Run `pnpm types` to check for type errors and fix any that appear before completing work
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/**/*.tsx : Component props should be `interface Props { ... }` (not exported) unless the interface needs to be used outside the component
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsx
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx} : Fully capitalize acronyms in symbols, e.g. `graphID`, `useBackendAPI`
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialsSelect/CredentialsSelect.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Only use Phosphor Icons (phosphor-icons/react) for icons in frontend components
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.tsautogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use Phosphor Icons only for all icon implementations
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.ts
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css} : Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/helpers.ts
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialRow/CredentialRow.tsx
Remove unnecessary date normalization logic from the datetime input onChange handler since the input type already handles formatting. Add skeleton loading state for better UX while credentials are loading.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx (1)
3-7:⚠️ Potential issue | 🟠 MajorRemove the
__legacy__form dependency from this new selector.This file still pulls
Form,FormDescription, andFormFieldfrom the deprecated UI layer. Please switch it to the current form primitives before merging.As per coding guidelines, frontend code must "Never use components from
src/components/__legacy__/*".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx` around lines 3 - 7, Replace the deprecated imports of Form, FormDescription, and FormField from "@/components/__legacy__/ui/form" with the current form primitives used in the codebase; update the import source in CredentialTypeSelector.tsx to the new module that exports Form, FormDescription, and FormField (the non-__legacy__ form implementation) and ensure any props or usage of these symbols in the CredentialTypeSelector component match the API of the modern primitives.
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx (1)
19-22: Avoid introducing a new dependency onautogpt-server-apihere.This new component is still typed against
@/lib/autogpt-server-api/types, which keeps the flow coupled to the deprecated client surface. Prefer the generated OpenAPI contracts used elsewhere in the frontend.As per coding guidelines, frontend code should "Use generated API hooks from
@/app/api/__generated__/endpoints/instead of deprecatedBackendAPIorsrc/lib/autogpt-server-api/*".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx` around lines 19 - 22, The CredentialTypeSelector currently imports BlockIOCredentialsSubSchema, CredentialsMetaInput, and CredentialsType from the deprecated autogpt-server-api; replace those type imports with the equivalent generated OpenAPI types used elsewhere in the frontend (the generated contracts under the app/api/__generated__/endpoints/ package) so the component no longer depends on the deprecated client surface, update any prop/type references in CredentialTypeSelector to the new types, and ensure imports align with other frontend components using the generated API contracts.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx`:
- Line 32: The prop supportedTypes on CredentialTypeSelector must be guaranteed
non-empty to avoid defaultTab resolving to undefined; update the component prop
type from CredentialsType[] to a non-empty tuple (e.g., [CredentialsType,
...CredentialsType[]]) and add a runtime guard in CredentialTypeSelector (and
where it’s consumed by TabsLine/defaultTab) that throws or falls back if
supportedTypes is empty so TabsLine always receives a valid defaultTab;
reference the supportedTypes prop, defaultTab computation, and the TabsLine
usage in CredentialTypeSelector to locate and fix the code.
- Around line 97-105: The handler inside CredentialTypeSelector currently calls
onCredentialsCreate(creds) and then immediately onClose(), which closes the
modal even if creation fails; update the APIKeyTabContent onCredentialsCreate
prop handler to wait for the creation to succeed (i.e., treat
onCredentialsCreate as returning a Promise or accept a success callback) and
only call onClose() after the Promise resolves successfully; if the Promise
rejects, do not call onClose() and allow the error to surface (or show
validation UI) so the user can retry—adjust the handler attached to
APIKeyTabContent and any callers of onCredentialsCreate accordingly.
---
Duplicate comments:
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx`:
- Around line 3-7: Replace the deprecated imports of Form, FormDescription, and
FormField from "@/components/__legacy__/ui/form" with the current form
primitives used in the codebase; update the import source in
CredentialTypeSelector.tsx to the new module that exports Form, FormDescription,
and FormField (the non-__legacy__ form implementation) and ensure any props or
usage of these symbols in the CredentialTypeSelector component match the API of
the modern primitives.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx`:
- Around line 19-22: The CredentialTypeSelector currently imports
BlockIOCredentialsSubSchema, CredentialsMetaInput, and CredentialsType from the
deprecated autogpt-server-api; replace those type imports with the equivalent
generated OpenAPI types used elsewhere in the frontend (the generated contracts
under the app/api/__generated__/endpoints/ package) so the component no longer
depends on the deprecated client surface, update any prop/type references in
CredentialTypeSelector to the new types, and ensure imports align with other
frontend components using the generated API contracts.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d2448a68-6cc8-4aae-96c5-a7888d774cc2
📒 Files selected for processing (1)
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📜 Review details
⏰ 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). (5)
- GitHub Check: types
- GitHub Check: Seer Code Review
- GitHub Check: Analyze (python)
- GitHub Check: end-to-end tests
- GitHub Check: Check PR Status
🧰 Additional context used
📓 Path-based instructions (12)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend development
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Runpnpm formatto auto-fix formatting issues before completing work
Runpnpm lintto check for lint errors and fix any that appear before completing work
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/generated/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend developmentRun
pnpm typesto check for type errors and fix any that appear before completing work
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/src/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Structure React components as: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts (exception: small 3-4 line components can be inline; render-only components can be direct files)
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}: Format frontend code usingpnpm format
Never use components fromsrc/components/__legacy__/*
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Structure components asComponentName/ComponentName.tsx+useComponentName.ts+helpers.tsand use design system components fromsrc/components/(atoms, molecules, organisms)
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}and regenerate withpnpm generate:api
Use function declarations (not arrow functions) for components and handlers
Separate render logic from business logic with component.tsx + useComponent.ts + helpers.ts structure
Colocate state when possible, avoid creating large components, use sub-components in local/componentsfolder
Avoid large hooks, abstract logic intohelpers.tsfiles when sensible
Use arrow functions only for callbacks, not for component declarations
Avoid comments at all times unless the code is very complex
Do not useuseCallbackoruseMemounless asked to optimize a given function
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use function declarations (not arrow functions) for components and handlers
Use type-safe generated API hooks via Orval + React Query for data fetching
Use React Query for server state management and co-locate UI state in components/hooks
Separate render logic (.tsx) from business logic (use*.tshooks)
Use only shadcn/ui (Radix UI primitives) with Tailwind CSS for UI components
Use Phosphor Icons only for all icon implementations
Use ErrorCard component for render errors, toast for mutations, and Sentry for exceptions
Use design system components fromsrc/components/(atoms, molecules, organisms)
Never usesrc/components/__legacy__/*components
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Use Tailwind CSS only for styling with design tokens
Do not useuseCallbackoruseMemounless asked to optimize a specific function
Never type withanyunless a variable/attribute can actually be of any type
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should be
interface Props { ... }(not exported) unless the interface needs to be used outside the componentUse
type Props = { ... }(not exported) for component props unless used outside the component
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Fully capitalize acronyms in symbols, e.g.
graphID,useBackendAPI
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Put sub-components in a local
components/folder within the feature directory
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
autogpt_platform/frontend/src/**/[A-Z]*/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Structure components as ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts
Files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
🧠 Learnings (20)
📓 Common learnings
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11795
File: autogpt_platform/backend/backend/api/features/chat/tools/utils.py:92-111
Timestamp: 2026-01-19T07:20:23.494Z
Learning: In autogpt_platform/backend/backend/api/features/chat/tools/utils.py, the _serialize_missing_credential function uses next(iter(field_info.provider)) for provider selection. The PR author confirmed this non-deterministic provider selection is acceptable because the function returns both "type" (single, for backward compatibility) and "types" (full array), which achieves the primary goal of deterministic credential type presentation.
Learnt from: Pwuts
Repo: Significant-Gravitas/AutoGPT PR: 12284
File: autogpt_platform/frontend/src/app/api/openapi.json:11897-11900
Timestamp: 2026-03-04T23:58:18.476Z
Learning: Repo: Significant-Gravitas/AutoGPT — PR `#12284`
Backend/frontend OpenAPI codegen convention: In backend/api/features/store/model.py, the StoreSubmission and StoreSubmissionAdminView models define submitted_at: datetime | None, changes_summary: str | None, and instructions: str | None with no default. This is intentional to produce “required but nullable” fields in OpenAPI (properties appear in required[] and use anyOf [type, null]). This matches Prisma’s submittedAt DateTime? and changesSummary String?. Do not flag this as a required/nullable mismatch.
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/api/openapi.json:10030-10037
Timestamp: 2026-03-01T07:59:02.311Z
Learning: Repo: Significant-Gravitas/AutoGPT PR: 12213 — For MCP manual token storage, backend model autogpt_platform/backend/backend/api/features/mcp/routes.py defines MCPStoreTokenRequest.token as Pydantic SecretStr with a min length constraint, which generates OpenAPI schema metadata (format: "password", writeOnly: true, minLength: 1) in autogpt_platform/frontend/src/app/api/openapi.json. Prefer SecretStr (with length constraints) for sensitive request fields so generated TS clients and docs treat them as secrets.
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.tsx : Use `type Props = { ... }` (not exported) for component props unless used outside the component
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/[A-Z]*/**/*.{ts,tsx} : Structure components as ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/**/*.{js,jsx,ts,tsx} : Never use components from `src/components/__legacy__/*`
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Never use 'src/components/__legacy__/*' in frontend code
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Never use `src/components/__legacy__/*` components
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Run `pnpm types` to check for type errors and fix any that appear before completing work
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/**/*.tsx : Component props should be `interface Props { ... }` (not exported) unless the interface needs to be used outside the component
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Structure components as `ComponentName/ComponentName.tsx` + `useComponentName.ts` + `helpers.ts` and use design system components from `src/components/` (atoms, molecules, organisms)
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use only shadcn/ui (Radix UI primitives) with Tailwind CSS for UI components
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/*'
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-03-04T23:58:18.476Z
Learnt from: Pwuts
Repo: Significant-Gravitas/AutoGPT PR: 12284
File: autogpt_platform/frontend/src/app/api/openapi.json:11897-11900
Timestamp: 2026-03-04T23:58:18.476Z
Learning: Repo: Significant-Gravitas/AutoGPT — PR `#12284`
Backend/frontend OpenAPI codegen convention: In backend/api/features/store/model.py, the StoreSubmission and StoreSubmissionAdminView models define submitted_at: datetime | None, changes_summary: str | None, and instructions: str | None with no default. This is intentional to produce “required but nullable” fields in OpenAPI (properties appear in required[] and use anyOf [type, null]). This matches Prisma’s submittedAt DateTime? and changesSummary String?. Do not flag this as a required/nullable mismatch.
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-27T15:59:00.370Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/api/openapi.json:9983-9995
Timestamp: 2026-02-27T15:59:00.370Z
Learning: Repo: Significant-Gravitas/AutoGPT PR: 12213 — OpenAPI/codegen
Learning: Ensuring a field is required in generated TS types needs two sides: (1) no default value on the Pydantic field, and (2) the OpenAPI model's "required" array must list it. For MCPToolInfo, making input_schema required in OpenAPI and removing Field(default_factory=dict) in the backend prevents optional typing drift.
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-27T15:59:00.370Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/api/openapi.json:9983-9995
Timestamp: 2026-02-27T15:59:00.370Z
Learning: Repo: Significant-Gravitas/AutoGPT PR: 12213 — Backend/frontend OpenAPI codegen
Learning: For MCP schema models, required OpenAPI fields must have no defaults in Pydantic. Specifically, MCPToolInfo.input_schema must be required (no Field(default_factory=dict)) so openapi.json emits it in "required", ensuring generated TS types treat input_schema as non-optional.
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-03-01T07:59:02.311Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/api/openapi.json:10030-10037
Timestamp: 2026-03-01T07:59:02.311Z
Learning: Repo: Significant-Gravitas/AutoGPT PR: 12213 — For MCP manual token storage, backend model autogpt_platform/backend/backend/api/features/mcp/routes.py defines MCPStoreTokenRequest.token as Pydantic SecretStr with a min length constraint, which generates OpenAPI schema metadata (format: "password", writeOnly: true, minLength: 1) in autogpt_platform/frontend/src/app/api/openapi.json. Prefer SecretStr (with length constraints) for sensitive request fields so generated TS clients and docs treat them as secrets.
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-27T10:45:55.700Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/helpers.tsx:23-24
Timestamp: 2026-02-27T10:45:55.700Z
Learning: As of PR `#12213`, MCP tool response types (MCPToolsDiscoveredResponse, MCPToolOutputResponse) are defined in openapi.json and frontend code in autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/helpers.tsx uses the generated types from `@/app/api/__generated__/`. Other tools like RunBlock still use inline TypeScript interfaces (e.g., BlockDetailsResponse) for SSE stream payloads that are not included in openapi.json schemas. The pattern is tool-specific: use generated types when available in openapi.json, use inline types only when the payload schema is truly SSE-stream-only and not exposed via OpenAPI.
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-03-10T06:34:10.984Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 12354
File: autogpt_platform/frontend/src/components/renderers/InputRenderer/base/oneof/OneOfField.tsx:16-19
Timestamp: 2026-03-10T06:34:10.984Z
Learning: In `autogpt_platform/frontend/src/components/renderers/InputRenderer/base/oneof/OneOfField.tsx`, the schema parameters in functions like `getDiscriminatorPropName` use `any` intentionally because `discriminator`, `const`, and `advanced` are custom JSON Schema extensions not present in `RJSFSchema` from `rjsf/utils`. A typed intersection `RJSFSchema & { discriminator?: string | { propertyName: string }; const?: unknown; advanced?: boolean }` is the preferred alternative over bare `any` to maintain type safety while accommodating these extensions.
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-02-26T21:29:44.105Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-02-26T21:29:44.105Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx,js,jsx} : Run `pnpm lint` to check for lint errors and fix any that appear before completing work
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
📚 Learning: 2026-03-10T06:22:52.942Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 12354
File: autogpt_platform/frontend/src/app/(platform)/build/components/FlowEditor/nodes/CustomNode/CustomNode.tsx:26-30
Timestamp: 2026-03-10T06:22:52.942Z
Learning: In the AutoGPT platform frontend (autogpt_platform/frontend/), `advanced=true` fields are always declared directly on the top-level `Input` class for every block. Advanced fields are never nested inside objects, arrays, anyOf, oneOf, or allOf variants. Therefore, a top-level-only check of `schema.properties` (as done in `hasAdvancedFields` in `CustomNode.tsx`) is sufficient and correct; a recursive schema walk is not needed.
Applied to files:
autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx
0ubbe
left a comment
0ubbe
left a comment
There was a problem hiding this comment.
@Abhi1992002 in the past, for each missing credential, it would be shown in a separate row and with a button next to it, intrigued why is not doing that in the new builder 🤔
…ove dead code - Refactor CredentialField to use the centralised CredentialsGroupedView instead of directly using CredentialsInput, ensuring consistent credential display (type badges, action buttons, system/user grouping) across all contexts including multi-auth providers (OAuth + API Key). - Add variant and showTitle props to CredentialsGroupedView so it can be used in both dialog and node-level contexts. - Delete dead legacy files: - agent-run-draft-view.tsx (exported but never imported) - agent-status-chip.tsx (only used by agent-run-draft-view) Related: #12378
|
Superseded by #12382 |
github-project-automation
Bot
moved this from 🆕 Needs initial review
to ✅ Done
in AutoGPT development kanban
|
Reopened per Ubbe — this PR fixes the root issue in CredentialsInput (OAuth priority over API key) which affects both builder nodes and CredentialsGroupedView. |
github-project-automation
Bot
moved this from ✅ Done
to 👍🏼 Mergeable
in AutoGPT development kanban
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
…#12378) ### Changes - When a provider supports multiple credential types (e.g. GitHub with both OAuth and API Key), clicking "Add credential" now opens a tabbed dialog where users can choose which type to use. Previously, OAuth always took priority and API key was unreachable. - Each credential in the list now shows a type-specific icon (provider icon for OAuth, key for API Key, password/lock for others) and a small label badge (e.g. "API Key", "OAuth"). - The native dropdown options also include the credential type in parentheses for clarity. - Single credential type providers behave exactly as before — no dialog, direct action. https://github.com/user-attachments/assets/79f3a097-ea97-426b-a2d9-781d7dcdb8a4 ## Test plan - [x] Test with a provider that has only one credential type (e.g. OpenAI with api_key only) — should behave as before - [x] Test with a provider that has multiple types (e.g. GitHub with OAuth + API Key configured) — should show tabbed dialog - [x] Verify OAuth tab triggers the OAuth flow correctly - [x] Verify API Key tab shows the inline form and creates credentials - [x] Verify credential list shows correct icons and type badges - [x] Verify dropdown options show type in parentheses
…Significant-Gravitas#12378) ### Changes - When a provider supports multiple credential types (e.g. GitHub with both OAuth and API Key), clicking "Add credential" now opens a tabbed dialog where users can choose which type to use. Previously, OAuth always took priority and API key was unreachable. - Each credential in the list now shows a type-specific icon (provider icon for OAuth, key for API Key, password/lock for others) and a small label badge (e.g. "API Key", "OAuth"). - The native dropdown options also include the credential type in parentheses for clarity. - Single credential type providers behave exactly as before — no dialog, direct action. https://github.com/user-attachments/assets/79f3a097-ea97-426b-a2d9-781d7dcdb8a4 ## Test plan - [x] Test with a provider that has only one credential type (e.g. OpenAI with api_key only) — should behave as before - [x] Test with a provider that has multiple types (e.g. GitHub with OAuth + API Key configured) — should show tabbed dialog - [x] Verify OAuth tab triggers the OAuth flow correctly - [x] Verify API Key tab shows the inline form and creates credentials - [x] Verify credential list shows correct icons and type badges - [x] Verify dropdown options show type in parentheses
4 participants
Changes
clicking "Add credential" now opens a tabbed dialog where users can choose which type to use.
Previously, OAuth always took priority and API key was unreachable.
password/lock for others) and a small label badge (e.g. "API Key", "OAuth").
Screen.Recording.2026-03-12.at.10.16.47.AM.mov
Test plan
behave as before
should show tabbed dialog