feat(frontend): Settings v2 API keys page (SECRT-2273) - #12907
Conversation
…SECRT-2272) Introduces a parallel Settings hub at /settings with its own sidebar shell, gated behind a new LaunchDarkly flag so v1 at /profile/settings remains the default until follow-up PRs wire real content per section. - New Flag.SETTINGS_V2 in use-get-flag.ts (default false) - /settings layout with FeatureFlagPage gate → redirects to /profile/settings when off - SettingsSidebar: 237px fixed, 7 nav items, active state matches Figma tokens (bg #EFEFF0, text #1F1F20 Geist Medium, inactive #505057 Geist Regular) - SettingsNavItem extracted as its own component with per-item entrance variant - Per-link loader via Next 15 useLinkStatus on the right edge of active Link - SettingsMobileNav: below md breakpoint, sidebar hides and a pill trigger opens a Popover listing all sections - Entrance animations via framer-motion (ease-out, <300ms, useReducedMotion aware) staggered on sidebar items, fade+slide on main content keyed by pathname - 7 placeholder pages (Profile, Creator Dashboard, Billing, Integrations, Settings, AutoGPT API Keys, OAuth Apps) with h4 Poppins title + coming soon
…gs-v2-page-layout-behind-a-feature-flag
…, and placeholder pages
- Add aria-current="page" to active desktop + mobile nav Links for a11y - Guard root /settings href from matching nested subsection pathnames in isActive - Add /settings to Supabase PROTECTED_PAGES so unauthenticated users can't hit the shell - Type the next/link vi.mock props in settings tests (drop any) - Assert active state via aria-current in SettingsSidebar tests (decouple from className)
Static aria-label='Open settings navigation' overrode the visible child text, so screen readers lost the active section. Switch to a templated label that includes current.label, and update tests to match.
…gs-v2-page-layout-behind-a-feature-flag
Adds a new GET /api/api-keys/paginated route that returns the caller's ACTIVE API keys in pages of 15 (configurable, 1-100). The legacy GET /api/api-keys is untouched so the existing profile page continues to work. Introduces `list_user_api_keys_paginated` which runs find_many + count in parallel and filters by status so revoked keys are hidden by default. Powers the Settings v2 infinite-scroll API keys page (SECRT-2273).
Wires the Settings v2 API keys page to real data. Replaces the mock 100-key stub with TanStack Query-backed list, paginated 15/page via client-side slicing over the existing GET /api/api-keys endpoint (the generated /api/api-keys/paginated hook will swap in after the backend rolls out). Adds create, revoke single, revoke batch, per-key details, and infinite-scroll at the bottom of the list. Key pieces: - CreateAPIKeyDialog — zod-validated form (name + description + >=1 permission from the APIKeyPermission enum) with a second "success" view that one-time-shows the plaintext key + copy button. - DeleteAPIKeyDialog — confirm revoke with loading state; supports single row delete and batch delete from the selection bar. - APIKeyInfoDialog — opens from an info icon next to each row; shows masked key, scopes, description, created_at, last_used_at. - APIKeyListEmpty — animated vertical marquee of ghost key-cards with a top+bottom mask fade (respects prefers-reduced-motion). - APIKeyListSkeleton — 6-row shimmer for initial load. - APIKeysHeader — responsive; create button drops below the title on mobile and shrinks to size=small. Side changes bundled because the page depends on them: - Settings layout ScrollArea uses h-full on mobile / calc(100vh-60px) on md+ so the mobile nav no longer produces a second scrollbar. - ScrollArea gains an optional showScrollToTop FAB. - Placeholder-pages test drops the api-keys entry now that the page has real content. SECRT-2273.
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
github-actions
Bot
added
platform/frontend
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughIntroduces a comprehensive API key management feature for the settings page, including components for listing, creating, and deleting API keys with multi-select support, form validation, API integration via React Query, and extensive integration test coverage. Changes
Sequence DiagramsequenceDiagram
actor User
participant List as APIKeyList
participant Row as APIKeyRow
participant Dialog as DeleteAPIKeyDialog
participant API as API Server
User->>List: Load page
List->>API: Fetch API keys
API-->>List: Return active keys
List->>Row: Render rows (one per key)
User->>Row: Click delete or select checkbox
Row->>List: Toggle selection / request delete
alt Single key delete
Row->>Dialog: Open delete dialog (keyIds=[id])
else Multiple keys selected
List->>Dialog: Open delete dialog (keyIds=[...])
end
Dialog->>Dialog: Compute isBatch from keyIds.length
User->>Dialog: Click Revoke button
Dialog->>API: POST revoke (keyIds)
API-->>Dialog: Success response
Dialog->>List: onDeleted callback
List->>API: Refetch keys
API-->>List: Updated key list
List->>Row: Remove deleted rows
Dialog->>Dialog: Close dialog
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
🔍 PR Overlap DetectionThis check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early. 🔴 Merge Conflicts DetectedThe following PRs have been tested and will have merge conflicts if merged after this PR. Consider coordinating with the authors.
🟢 Low Risk — File Overlap OnlyThese PRs touch the same files but different sections (click to expand)
Summary: 1 conflict(s), 0 medium risk, 2 low risk (out of 3 PRs with file overlap) Auto-generated on push. Ignores: |
…-layout-behind-a-feature-flag' into abhimanyuyadav/secrt-2273-add-autogpt-api-key-page
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## dev #12907 +/- ##
========================================
Coverage 68.12% 68.12%
========================================
Files 1934 1955 +21
Lines 149285 149500 +215
Branches 15558 15580 +22
========================================
+ Hits 101698 101850 +152
- Misses 44564 44615 +51
- Partials 3023 3035 +12
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
github-actions
Bot
removed
the
conflicts
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
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)/settings/layout.tsx (1)
14-53:⚠️ Potential issue | 🔴 CriticalCritical: leftover duplicated layout tree — file will not compile due to unbalanced JSX tags.
The outer
<div>opened at line 15 is never closed. The code at lines 36–51 (oldoverflow-y-autolayout) was not removed, leaving two root-level<div>elements in the return without a fragment wrapper. The first outer div's closing tag is missing entirely.Delete lines 36–51 and keep only the new
ScrollArea-based structure.Required fix
</motion.div> </ScrollArea> </main> </div> + </div> - <div className="flex h-full w-full overflow-hidden bg-[`#F9F9FA`]"> - <SettingsSidebar /> - <div className="flex flex-1 flex-col overflow-hidden"> - <SettingsMobileNav /> - <main className="flex-1 overflow-y-auto bg-[`#F9F9FA`] px-4 pt-2 md:px-[111px] md:pt-[39px]"> - <motion.div - key={pathname} - initial={reduceMotion ? { opacity: 0 } : { opacity: 0, y: 8 }} - animate={{ opacity: 1, y: 0 }} - transition={{ duration: 0.28, ease: [0, 0, 0.2, 1] as const }} - > - {children} - </motion.div> - </main> - </div> - </div> );Also verify that the new padding scheme (
max-w-[1100px] px-4on themotion.divat line 29 withmd:pt-[39px]) matches the intended desktop gutter—the old code usedmd:px-[111px]on<main>.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/layout.tsx around lines 14 - 53, Return contains a duplicated layout tree: remove the old overflow-y-auto block (the duplicate <div> containing the second SettingsSidebar/SettingsMobileNav/main/motion.div) so the JSX is balanced and only the ScrollArea-based structure with SettingsSidebar, SettingsMobileNav, ScrollArea, motion.div (keyed by pathname, using reduceMotion and children) remains; ensure the outer <div className="flex h-full w-full overflow-hidden bg-[`#F9F9FA`]"> is properly closed. Also reconcile desktop gutter: if you need the original desktop padding, move or add the md:px-[111px] (previously on <main>) to the retained layout (either on <main> or the inner motion.div that has max-w-[1100px] px-4) so the md breakpoint matches the old desktop gutter.
🧹 Nitpick comments (8)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeysHeader/APIKeysHeader.tsx (1)
23-40: Optional: de-duplicate the responsive buttons.Rendering two
<Button>s toggled bysm:hidden/hidden sm:inline-flexmeans both are present in the DOM (both focusable by keyboard and visible to assistive tech, even when visually hidden). Since the only difference issizeand icon size, consider a single button with a responsive icon or a tiny helper picking size by breakpoint.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeysHeader/APIKeysHeader.tsx around lines 23 - 40, The two responsive Button instances (the Button component with leftIcon={<PlusIcon ... />} and onClick={onCreate}) should be collapsed into a single Button that changes its size and icon size responsively instead of rendering both hidden/visible variants; update the Button usage in APIKeysHeader to compute size and iconSize based on breakpoint (or apply responsive classnames) and pass a single leftIcon={<PlusIcon size={iconSize} />} and size={buttonSize} while keeping onCreate and the existing variant and text, so only one Button element (with onCreate and PlusIcon) remains in the DOM.autogpt_platform/backend/backend/api/features/v1.py (1)
1982-2005: Consider renaming the route handler to avoid shadowing the data-layer function name.
list_user_api_keys_paginatedis also the name of the helper this calls viaapi_key_db.list_user_api_keys_paginated. Not a functional issue (different namespaces), but slightly noisy when debugging. Something likeget_api_keys_paginated_route/list_api_keys_paginated_endpointwould read better. Optional.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/backend/backend/api/features/v1.py` around lines 1982 - 2005, Rename the FastAPI route handler function list_user_api_keys_paginated to a clearer non-shadowing name (e.g., list_api_keys_paginated_endpoint or get_api_keys_paginated_route) to avoid confusion with the data-layer helper api_key_db.list_user_api_keys_paginated; update the function declaration name and any references (router registration, imports, tests) that call this handler so the endpoint behavior and signature remain identical while leaving api_key_db.list_user_api_keys_paginated unchanged.autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx (1)
24-55: Optional: wrap the checkbox grid inrole="group"with anaria-labelfor screen reader grouping.The
Text"Permissions" header isn't programmatically associated with the checkbox group. Addingrole="group" aria-labelledby="..."(oraria-label="Permissions") on the grid container would help assistive tech announce the set as a cohesive unit.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx around lines 24 - 55, The checkbox grid (the div rendering PERMISSION_OPTIONS) should be exposed as an accessible group: add role="group" and either aria-label="Permissions" on that grid div or aria-labelledby that points to the header Text element (give the Text a stable id, e.g. "permissions-label"); keep the existing role="checkbox" buttons and their aria-checked, but ensure the grid container uses role="group" and the header id or aria-label so screen readers announce the set as a cohesive unit (refer to the Permissions header Text, the grid div rendering PERMISSION_OPTIONS, and the toggle function/value usage to locate where to add these attributes).autogpt_platform/frontend/src/components/ui/scroll-area.tsx (2)
96-109: Nit: redundant inner null-check.
viewportis already narrowed to non-null above (line 99); theif (!viewport) return;insideupdate()is dead code and can be removed.♻️ Proposed diff
function update() { - if (!viewport) return; setVisible(viewport.scrollTop > threshold); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/ui/scroll-area.tsx` around lines 96 - 109, The inner null-check inside the update function is redundant: in the useEffect you already return early if viewportRef.current is falsy, so remove the dead `if (!viewport) return;` from the update closure and let update call setVisible(viewport.scrollTop > threshold) directly; keep the rest of the effect (viewport.addEventListener("scroll", update, { passive: true }) and cleanup) intact and continue to reference viewport via the captured `viewport` variable from the enclosing scope (used with viewportRef and setVisible in the useEffect).
125-139: Optional: prefer-translate-x-1/2over hardcoded negative margin.Using a value tied to the button's pixel size (
-ml-[22px]) means any change toh-11 w-11silently breaks centering. A translate-based centering is more robust:♻️ Proposed diff
- className="absolute bottom-6 left-1/2 z-30 -ml-[22px] flex h-11 w-11 items-center justify-center rounded-full bg-zinc-800 text-white shadow-md transition-colors hover:bg-zinc-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-800 focus-visible:ring-offset-2" + className="absolute bottom-6 left-1/2 z-30 flex h-11 w-11 -translate-x-1/2 items-center justify-center rounded-full bg-zinc-800 text-white shadow-md transition-colors hover:bg-zinc-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-800 focus-visible:ring-offset-2"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/ui/scroll-area.tsx` around lines 125 - 139, The absolute-centering uses a hardcoded negative margin (-ml-[22px]) on the motion.button which will break if h-11 w-11 change; update the className on the motion.button to remove -ml-[22px] and use a translate-based centering class (e.g., -translate-x-1/2) alongside left-1/2 to keep it horizontally centered regardless of size changes; ensure other classes (absolute bottom-6 left-1/2 z-30 etc.) remain unchanged and test focus/hover styles still apply.autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeySelectionBar/APIKeySelectionBar.tsx (1)
27-45: Use the design-systemButtoninstead of raw<button>elements.The "Delete selected" button uses the
Buttonatom, but "Select All" and "Deselect" fall back to raw<button>with hand-rolled focus styles. UsingButtonwith a ghost/link variant keeps focus-state, sizing, and disabled styling consistent across the app.♻️ Suggested shape (exact variant names depend on your Button atom)
- {!allSelected && ( - <button - type="button" - onClick={onSelectAll} - className="rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-800" - > - <Text variant="body-medium" as="span" className="text-textBlack"> - Select All - </Text> - </button> - )} - <button - type="button" - onClick={onDeselectAll} - className="rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-800" - > - <Text variant="body-medium" as="span" className="text-textBlack"> - Deselect - </Text> - </button> + {!allSelected && ( + <Button variant="ghost" size="small" onClick={onSelectAll}> + Select All + </Button> + )} + <Button variant="ghost" size="small" onClick={onDeselectAll}> + Deselect + </Button>As per coding guidelines, "Use design system components from
src/components/(atoms, molecules, organisms)".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeySelectionBar/APIKeySelectionBar.tsx around lines 27 - 45, Replace the raw <button> elements in the APIKeySelectionBar component (the elements using onSelectAll and onDeselectAll) with the design-system Button atom so focus, sizing and disabled styles are consistent; keep the same onClick handlers (onSelectAll, onDeselectAll), the Text children, and map visual props to the Button (use the ghost/link variant or equivalent and pass any className or size props instead of custom focus classes) so behavior remains the same but styling uses the Button component.autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx (1)
71-71: Replace hardcoded color with a design token.
bg-[#F9F9FA]is a Tailwind arbitrary value. As per coding guidelines (Use design system components from 'src/components/' ... use design tokens), prefer a token-backed class (e.g.bg-zinc-50or the canonical page-background token) so dark-mode/theming remains centralized.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx at line 71, In APIKeyList component update the sticky header's background class (the className containing "sticky top-0 z-20 bg-[`#F9F9FA`]") to use a design-token backed Tailwind class instead of the arbitrary color; replace bg-[`#F9F9FA`] with the canonical page background token (for example the project's page-background token or an approved token like bg-zinc-50) so theming/dark-mode follows the design system.autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts (1)
13-13: Naming mismatch: this key is for the legacy (non-paginated) endpoint.
API_KEYS_PAGINATED_QUERY_KEYis derived fromgetGetV1ListUserApiKeysQueryKey()— i.e. the legacy, non-paginatedGET /api/api-keyshook. The PR description notes the UI will switch to the paginated endpoint later; the current name implies it's already wired to the paginated query, which will make the later swap easy to miss (e.g.useCreateAPIKey/useRevokeAPIKeyinvalidations would silently target the wrong key).Consider renaming to something like
API_KEYS_LIST_QUERY_KEYnow, and updating to the paginated key as part of the endpoint switch.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts at line 13, Rename the misleading constant API_KEYS_PAGINATED_QUERY_KEY to API_KEYS_LIST_QUERY_KEY because it currently uses the legacy non-paginated getGetV1ListUserApiKeysQueryKey(); update every usage (e.g., invalidations in useCreateAPIKey, useRevokeAPIKey and any hooks importing API_KEYS_PAGINATED_QUERY_KEY) to the new API_KEYS_LIST_QUERY_KEY identifier so future replacement with the paginated query key is explicit and won't silently target the wrong cache key.
🤖 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/app/`(platform)/settings/api-keys/components/hooks/useCreateAPIKey.ts:
- Around line 14-40: Remove the redundant HTTP status guards and align error
handling with the Orval mutator convention: in the usePostV1CreateNewApiKey call
remove the onSuccess check for response.status === 200 so onSuccess always
executes on success, change onError to prefer error.response?.detail before
falling back to error.message (e.g. description: error?.response?.detail ??
error?.message), and in createKey remove the post-await status check after
mutation.mutateAsync (it's unreachable) and simply return the successful result
(response or response.data consistent with other hooks) so mutateAsync errors
propagate via rejection.
---
Outside diff comments:
In `@autogpt_platform/frontend/src/app/`(platform)/settings/layout.tsx:
- Around line 14-53: Return contains a duplicated layout tree: remove the old
overflow-y-auto block (the duplicate <div> containing the second
SettingsSidebar/SettingsMobileNav/main/motion.div) so the JSX is balanced and
only the ScrollArea-based structure with SettingsSidebar, SettingsMobileNav,
ScrollArea, motion.div (keyed by pathname, using reduceMotion and children)
remains; ensure the outer <div className="flex h-full w-full overflow-hidden
bg-[`#F9F9FA`]"> is properly closed. Also reconcile desktop gutter: if you need
the original desktop padding, move or add the md:px-[111px] (previously on
<main>) to the retained layout (either on <main> or the inner motion.div that
has max-w-[1100px] px-4) so the md breakpoint matches the old desktop gutter.
---
Nitpick comments:
In `@autogpt_platform/backend/backend/api/features/v1.py`:
- Around line 1982-2005: Rename the FastAPI route handler function
list_user_api_keys_paginated to a clearer non-shadowing name (e.g.,
list_api_keys_paginated_endpoint or get_api_keys_paginated_route) to avoid
confusion with the data-layer helper api_key_db.list_user_api_keys_paginated;
update the function declaration name and any references (router registration,
imports, tests) that call this handler so the endpoint behavior and signature
remain identical while leaving api_key_db.list_user_api_keys_paginated
unchanged.
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx:
- Line 71: In APIKeyList component update the sticky header's background class
(the className containing "sticky top-0 z-20 bg-[`#F9F9FA`]") to use a
design-token backed Tailwind class instead of the arbitrary color; replace
bg-[`#F9F9FA`] with the canonical page background token (for example the project's
page-background token or an approved token like bg-zinc-50) so theming/dark-mode
follows the design system.
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeySelectionBar/APIKeySelectionBar.tsx:
- Around line 27-45: Replace the raw <button> elements in the APIKeySelectionBar
component (the elements using onSelectAll and onDeselectAll) with the
design-system Button atom so focus, sizing and disabled styles are consistent;
keep the same onClick handlers (onSelectAll, onDeselectAll), the Text children,
and map visual props to the Button (use the ghost/link variant or equivalent and
pass any className or size props instead of custom focus classes) so behavior
remains the same but styling uses the Button component.
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeysHeader/APIKeysHeader.tsx:
- Around line 23-40: The two responsive Button instances (the Button component
with leftIcon={<PlusIcon ... />} and onClick={onCreate}) should be collapsed
into a single Button that changes its size and icon size responsively instead of
rendering both hidden/visible variants; update the Button usage in APIKeysHeader
to compute size and iconSize based on breakpoint (or apply responsive
classnames) and pass a single leftIcon={<PlusIcon size={iconSize} />} and
size={buttonSize} while keeping onCreate and the existing variant and text, so
only one Button element (with onCreate and PlusIcon) remains in the DOM.
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx:
- Around line 24-55: The checkbox grid (the div rendering PERMISSION_OPTIONS)
should be exposed as an accessible group: add role="group" and either
aria-label="Permissions" on that grid div or aria-labelledby that points to the
header Text element (give the Text a stable id, e.g. "permissions-label"); keep
the existing role="checkbox" buttons and their aria-checked, but ensure the grid
container uses role="group" and the header id or aria-label so screen readers
announce the set as a cohesive unit (refer to the Permissions header Text, the
grid div rendering PERMISSION_OPTIONS, and the toggle function/value usage to
locate where to add these attributes).
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts:
- Line 13: Rename the misleading constant API_KEYS_PAGINATED_QUERY_KEY to
API_KEYS_LIST_QUERY_KEY because it currently uses the legacy non-paginated
getGetV1ListUserApiKeysQueryKey(); update every usage (e.g., invalidations in
useCreateAPIKey, useRevokeAPIKey and any hooks importing
API_KEYS_PAGINATED_QUERY_KEY) to the new API_KEYS_LIST_QUERY_KEY identifier so
future replacement with the paginated query key is explicit and won't silently
target the wrong cache key.
In `@autogpt_platform/frontend/src/components/ui/scroll-area.tsx`:
- Around line 96-109: The inner null-check inside the update function is
redundant: in the useEffect you already return early if viewportRef.current is
falsy, so remove the dead `if (!viewport) return;` from the update closure and
let update call setVisible(viewport.scrollTop > threshold) directly; keep the
rest of the effect (viewport.addEventListener("scroll", update, { passive: true
}) and cleanup) intact and continue to reference viewport via the captured
`viewport` variable from the enclosing scope (used with viewportRef and
setVisible in the useEffect).
- Around line 125-139: The absolute-centering uses a hardcoded negative margin
(-ml-[22px]) on the motion.button which will break if h-11 w-11 change; update
the className on the motion.button to remove -ml-[22px] and use a
translate-based centering class (e.g., -translate-x-1/2) alongside left-1/2 to
keep it horizontally centered regardless of size changes; ensure other classes
(absolute bottom-6 left-1/2 z-30 etc.) remain unchanged and test focus/hover
styles still apply.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 07415609-55ac-463e-b84e-ee7f698246aa
📒 Files selected for processing (35)
autogpt_platform/backend/backend/api/features/v1.pyautogpt_platform/backend/backend/api/model.pyautogpt_platform/backend/backend/data/auth/api_key.pyautogpt_platform/frontend/AGENTS.mdautogpt_platform/frontend/src/app/(platform)/settings/__tests__/placeholder-pages.test.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/__tests__/create.test.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/__tests__/delete.test.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/__tests__/main.test.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/__tests__/APIKeyInfoDialog.test.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/helpers.test.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/helpers.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/useAPIKeyListView.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/useAPIKeySelection.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyListEmpty/APIKeyListEmpty.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyListEmpty/components/APIKeyMarquee.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyListSkeleton/APIKeyListSkeleton.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyRow/APIKeyRow.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeySelectionBar/APIKeySelectionBar.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeysHeader/APIKeysHeader.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/CreateAPIKeyDialog.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/CreateAPIKeyForm.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/CreateAPIKeySuccess.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/schema.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/useCreateAPIKeyForm.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/DeleteAPIKeyDialog/DeleteAPIKeyDialog.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useCreateAPIKey.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useRevokeAPIKey.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/page.tsxautogpt_platform/frontend/src/app/(platform)/settings/layout.tsxautogpt_platform/frontend/src/app/api/openapi.jsonautogpt_platform/frontend/src/components/ui/scroll-area.tsx
💤 Files with no reviewable changes (1)
- autogpt_platform/frontend/src/app/(platform)/settings/tests/placeholder-pages.test.tsx
…merge (SECRT-2273) The merge of dev back into this branch left two overlapping copies of the layout's return JSX (the pre-ScrollArea block from 2272's flag-removal commit and the post-ScrollArea block from 2273). Keep only the ScrollArea-based layout that's intended on this branch.
There was a problem hiding this comment.
🧹 Nitpick comments (2)
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx (2)
15-19: Nit: prefer a design token over the arbitrarybg-[#F9F9FA].Not introduced by this PR (the root
<div>already uses it), but the change re-appliesbg-[#F9F9FA]on<main>as well. Per the repo guideline to use design tokens for Tailwind styling, consider replacing with the appropriate token (e.g. abg-background-*/ neutral token from the design system) in a follow-up so future theme changes propagate consistently.As per coding guidelines: "Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/layout.tsx around lines 15 - 19, Replace the hard-coded hex background color with the project design token so theme changes propagate: update the root container and the main element where `bg-[`#F9F9FA`]` is applied (the JSX housing SettingsSidebar and SettingsMobileNav) to use the appropriate Tailwind design token like the repo's background/neutral token (e.g., `bg-background-default` or the neutral token from the design system) wherever `bg-[`#F9F9FA`]` appears; ensure both the outer <div> that wraps SettingsSidebar and the <main> element are changed so styling is consistent with the design tokens standard.
19-23: Hardcoded60pxoffset couples this layout toSettingsMobileNavheight.The
md:h-[calc(100vh-60px)]assumesSettingsMobileNavrenders at exactly 60px tall onmd+. If the mobile nav is ever resized (or hidden at larger breakpoints), the ScrollArea will be under- or over-sized and can reintroduce a double scrollbar or cut content off.Since the parent
<main>is alreadyflex-1inside aflex h-full flex-coltree,h-fullalone should flex correctly on all breakpoints without thecalcoverride. Consider dropping the md-specific height unless there's a concrete reason the flexbox sizing breaks on desktop:♻️ Suggested simplification
- <ScrollArea - showScrollToTop - className="h-full md:h-[calc(100vh-60px)]" - > + <ScrollArea showScrollToTop className="h-full">Please confirm on desktop (
md+) that<main className="flex-1 overflow-hidden">gives theScrollAreaa bounded height soh-fullalone works (Radix ScrollArea Viewport usesh-full w-fulland needs a constrained parent height to scroll). If flex sizing is fine, themd:h-[calc(100vh-60px)]is redundant; if not, keep it but extract the60pxinto a shared constant co-located withSettingsMobileNavso they can't drift.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/layout.tsx around lines 19 - 23, The layout hard-codes md:h-[calc(100vh-60px)] which ties ScrollArea sizing to a 60px SettingsMobileNav height; change main and ScrollArea to rely on flexbox by removing the md-specific calc and using h-full (i.e., set main className to "flex-1 overflow-hidden" and ScrollArea to "h-full ...") and then verify on md+ that the ScrollArea viewport is constrained and scrolls correctly; if flex sizing fails on desktop, instead extract the 60px value into a shared constant co-located with SettingsMobileNav and reference that constant in the md height expression so both components stay in sync.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@autogpt_platform/frontend/src/app/`(platform)/settings/layout.tsx:
- Around line 15-19: Replace the hard-coded hex background color with the
project design token so theme changes propagate: update the root container and
the main element where `bg-[`#F9F9FA`]` is applied (the JSX housing
SettingsSidebar and SettingsMobileNav) to use the appropriate Tailwind design
token like the repo's background/neutral token (e.g., `bg-background-default` or
the neutral token from the design system) wherever `bg-[`#F9F9FA`]` appears;
ensure both the outer <div> that wraps SettingsSidebar and the <main> element
are changed so styling is consistent with the design tokens standard.
- Around line 19-23: The layout hard-codes md:h-[calc(100vh-60px)] which ties
ScrollArea sizing to a 60px SettingsMobileNav height; change main and ScrollArea
to rely on flexbox by removing the md-specific calc and using h-full (i.e., set
main className to "flex-1 overflow-hidden" and ScrollArea to "h-full ...") and
then verify on md+ that the ScrollArea viewport is constrained and scrolls
correctly; if flex sizing fails on desktop, instead extract the 60px value into
a shared constant co-located with SettingsMobileNav and reference that constant
in the md height expression so both components stay in sync.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 141abfdc-9abd-4d83-94a7-760403ac83ab
📒 Files selected for processing (1)
autogpt_platform/frontend/src/app/(platform)/settings/layout.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). (9)
- GitHub Check: integration_test
- GitHub Check: check API types
- GitHub Check: test (3.11)
- GitHub Check: test (3.13)
- GitHub Check: test (3.12)
- GitHub Check: Seer Code Review
- GitHub Check: end-to-end tests
- GitHub Check: Analyze (python)
- GitHub Check: Check PR Status
🧰 Additional context used
📓 Path-based instructions (8)
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 developmentFormat frontend code using
pnpm formatRun
pnpm formatto auto-fix formatting issuesRun
pnpm lintto check and fix lint errors after any code changesRun
pnpm test:unitto run integration tests and fix any failures after code changesFully capitalize acronyms in symbols, e.g.
graphID,useBackendAPIUse function declarations (not arrow functions) for components and handlers
No
dark:Tailwind classes — the design system handles dark mode automaticallyUse Next.js
<Link>component for internal navigation — never raw<a>tagsNo linter suppressors (
//@ts-ignore``,// eslint-disable) — fix the actual issue insteadAvoid index and barrel files in the frontend codebase
Files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.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/app/(platform)/settings/layout.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 and fix type errors after any code changesNo
anytypes unless the value genuinely can be anythingKeep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this limit
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Separate render logic (
.tsx) from business logic (use*.tshooks) in component structureUse Phosphor Icons only — always import the
-Icon-suffixed alias (e.g.TrashIcon,PlusIcon), not bare exportsUse ErrorCard for render errors, toast for mutations, and Sentry for exceptions in error handling
Use
type Props = { ... }for component props (not exported) unless it needs to be used outside the componentUse design system components from
src/components/(atoms, molecules, organisms), never usesrc/components/__legacy__/*Use generated API hooks from
@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}and regenerate withpnpm generate:apiDo not use
useCallbackoruseMemounless asked to optimize a given function
Files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/following the patternuse{Method}{Version}{OperationName}, and regenerate withpnpm generate:api
Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local/componentsfolder
Use function declarations for components and handlers, use arrow functions only for callbacks
Do not useuseCallbackoruseMemounless asked to optimise a given function
Files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
autogpt_platform/frontend/**/*.{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/app/(platform)/settings/layout.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
autogpt_platform/frontend/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Use shadcn/ui (Radix UI primitives) with Tailwind CSS styling for UI components
Use Tailwind CSS only with design tokens and Phosphor Icons for styling
Files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
🧠 Learnings (20)
📓 Common learnings
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12536
File: autogpt_platform/frontend/src/app/api/openapi.json:5770-5790
Timestamp: 2026-03-24T21:25:15.983Z
Learning: Repo: Significant-Gravitas/AutoGPT — PR `#12536`
File: autogpt_platform/frontend/src/app/api/openapi.json
Learning: The OpenAPI spec file is auto-generated; per established convention, endpoints generally declare only 200/201, 401, and 422 responses. Do not suggest adding explicit 403/404 response entries for single operations unless planning a repo-wide spec update. Prefer clarifying such behaviors in endpoint descriptions/docstrings instead of altering response maps.
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12566
File: autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts:968-974
Timestamp: 2026-03-26T00:32:06.673Z
Learning: In Significant-Gravitas/AutoGPT, the admin-facing methods in `autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts` (e.g., `addUserCredits`, `getUsersHistory`, `getUserRateLimit`, `resetUserRateLimit`) intentionally follow the legacy `BackendAPI` pattern with manually defined types in `autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts`. Migrating these admin endpoints to the generated OpenAPI hooks (`@/app/api/__generated__/endpoints/`) is a planned separate effort covering all admin endpoints together, not done piecemeal per PR. Do not flag individual admin type additions in `types.ts` as blocking issues.
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.
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:14:10.597Z
Learning: Use Next.js 15 App Router with client-first approach for the framework architecture
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:14:10.597Z
Learning: Use type-safe generated API hooks via Orval + React Query for data fetching
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:14:10.597Z
Learning: Use React Query for server state and co-locate UI state in components/hooks
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:14:10.597Z
Learning: Use LaunchDarkly integration for feature flags
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:14:10.597Z
Learning: Use Vitest + React Testing Library + MSW for integration tests (primary), Playwright for E2E, and Storybook for visual testing
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:14:10.597Z
Learning: Write failing tests first (TDD), then implement, then verify
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : No linter suppressors (`// ts-ignore`, `// eslint-disable`) — fix the actual issue
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:27:45.740Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-08T17:27:45.740Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,css} : Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : No `dark:` Tailwind classes — the design system handles dark mode
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.tsx : Tailwind CSS only for styling, use design tokens, Phosphor Icons only
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/src/app/(platform)/**/page.tsx : Create pages in `src/app/(platform)/feature-name/page.tsx`
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:27:45.740Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-08T17:27:45.740Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.{ts,tsx} : Structure components as `ComponentName/ComponentName.tsx` + `useComponentName.ts` + `helpers.ts`, use design system components from `src/components/` (atoms, molecules, organisms), and never use `src/components/__legacy__/*`
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.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} : Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-03-11T08:40:59.673Z
Learnt from: kcze
Repo: Significant-Gravitas/AutoGPT PR: 12328
File: autogpt_platform/frontend/src/app/(platform)/copilot/useLoadMoreMessages.ts:49-61
Timestamp: 2026-03-11T08:40:59.673Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/useLoadMoreMessages.ts`, clearing `olderMessages` (and resetting `oldestSequence`/`hasMore`) when `initialOldestSequence` shifts on the same session is intentional. Pages already fetched were based on a now-stale cursor; retaining them risks sequence gaps or duplicates. `ScrollPreserver` keeps the currently visible viewport intact, so only unvisited older pages are dropped. This is a deliberate safe-refetch design tradeoff.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:27:45.740Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-08T17:27:45.740Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local `/components` folder
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use function declarations (not arrow functions) for components and handlers
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Frontend uses Next.js 15 App Router with client-first approach, React Query for server state, and co-located UI state in components/hooks
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use Next.js `<Link>` for internal navigation — never raw `<a>` tags
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-02-27T10:45:49.499Z
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:49.499Z
Learning: Prefer using generated OpenAPI types from '@/app/api/__generated__/' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-03-24T02:05:04.672Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:04.672Z
Learning: When gating React component logic on a React Query result (e.g., hooks like `useQuery` / `useGetV2GetCopilotUsage`), prefer destructuring and checking `isSuccess` (or aliasing it to a meaningful boolean like `isSuccess: hasUsage`) instead of relying on `!isLoading`. Reason: `isLoading` can be `false` in error/idle states where `data` may still be `undefined`, while `isSuccess` indicates the query completed successfully and `data` is populated.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
🔇 Additional comments (1)
autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx (1)
24-32: LGTM on the animation + padding relocation.Moving
mx-auto max-w-[1100px] px-4 pb-8 pt-2 md:pt-[39px]onto the animatedmotion.div(instead of<main>) keeps the centered content width while letting theScrollAreafill the full width — which is the right pattern so the scrollbar track hugs the viewport edge rather than the 1100px column. Reduced-motion handling and thepathname-keyed re-animation are preserved correctly.
…e full list (SECRT-2273) Backend - Remove GET /api/api-keys/paginated route, ListAPIKeysPaginatedResponse model, and list_user_api_keys_paginated data fn. The legacy GET /api/api-keys already returns every active key; the extra paginated route was unused outside the Settings v2 page. - Drop the now-unused asyncio + APIKeyWhereInput imports. Frontend - useAPIKeysList: drop visible-page state; return all ACTIVE keys in one pass. Rename the export to API_KEYS_QUERY_KEY and update useCreateAPIKey / useRevokeAPIKey invalidations. - useAPIKeyListView: remove hasNextPage / fetchNextPage / isFetchingNextPage forwarding. - APIKeyList: replace InfiniteScroll with a plain wrapper; the layout's ScrollArea already handles overflow. - Regenerate openapi.json.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx (1)
67-68: Replace arbitrary hex color with a design token.
bg-[#F9F9FA]hardcodes a raw color instead of using a Tailwind design token, which will drift from the design system and breaks themeing. Also,style={{ overflow: "hidden" }}can be expressed with theoverflow-hiddenutility for consistency.🎨 Proposed fix
- className="sticky top-0 z-20 bg-[`#F9F9FA`]" - style={{ overflow: "hidden" }} + className="sticky top-0 z-20 overflow-hidden bg-background"Use whichever neutral background token the rest of the settings surface is using (e.g.
bg-background,bg-muted, or a project-specific token) so the sticky selection bar matches the page chrome.As per coding guidelines: "Use Tailwind CSS only for styling with design tokens and Phosphor Icons only".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx around lines 67 - 68, In the APIKeyList component replace the hardcoded hex background and inline style: change the className fragment using bg-[`#F9F9FA`] to the appropriate Tailwind design token used by the settings surface (e.g. bg-background or bg-muted) and remove style={{ overflow: "hidden" }}, adding the utility class overflow-hidden instead so the sticky top bar uses design tokens and Tailwind utilities consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx:
- Around line 67-68: In the APIKeyList component replace the hardcoded hex
background and inline style: change the className fragment using bg-[`#F9F9FA`] to
the appropriate Tailwind design token used by the settings surface (e.g.
bg-background or bg-muted) and remove style={{ overflow: "hidden" }}, adding the
utility class overflow-hidden instead so the sticky top bar uses design tokens
and Tailwind utilities consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ea6cf2c8-a3eb-4c84-9f79-b12ca0704083
📒 Files selected for processing (6)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/useAPIKeyListView.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useCreateAPIKey.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useRevokeAPIKey.tsautogpt_platform/frontend/src/app/api/openapi.json
✅ Files skipped from review due to trivial changes (2)
- autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useCreateAPIKey.ts
- autogpt_platform/frontend/src/app/api/openapi.json
🚧 Files skipped from review as they are similar to previous changes (2)
- autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/useAPIKeyListView.ts
- autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useRevokeAPIKey.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). (6)
- GitHub Check: check API types
- GitHub Check: integration_test
- GitHub Check: Seer Code Review
- GitHub Check: end-to-end tests
- GitHub Check: Analyze (python)
- 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 developmentFormat frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
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/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
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 developmentFully capitalize acronyms in symbols, e.g.
graphID,useBackendAPIUse function declarations (not arrow functions) for components/handlers
No
dark:Tailwind classes — the design system handles dark modeUse Next.js
<Link>for internal navigation — never raw<a>tagsNo
anytypes unless the value genuinely can be anythingNo linter suppressors (
//@ts-ignore``,// eslint-disable) — fix the actual issueKeep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Use Phosphor Icons only for icons
Always import the
-Icon-suffixed alias from@phosphor-icons/react(e.g.TrashIcon,PlusIcon,SquareIcon) — bare exports likeTrash/Plusare deprecatedUse design system components from
src/components/(atoms, molecules, organisms); never usesrc/components/__legacy__/*Use generated API hooks from
@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}and regenerate withpnpm generate:apiUse Tailwind CSS only for styling with design tokens and Phosphor Icons only
Do not use
useCallbackoruseMemounless asked to optimize a given function
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/following the patternuse{Method}{Version}{OperationName}, and regenerate withpnpm generate:api
Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local/componentsfolder
Use function declarations for components and handlers, use arrow functions only for callbacks
Do not useuseCallbackoruseMemounless asked to optimise a given function
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
autogpt_platform/frontend/**/*.{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/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
autogpt_platform/frontend/src/app/(platform)/**/components/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Put sub-components in local
components/folder for features
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
autogpt_platform/frontend/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Component props should be
type Props = { ... }(not exported) unless it needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
autogpt_platform/frontend/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
No barrel files or
index.tsre-exports in the frontend
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
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/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
autogpt_platform/frontend/**/*use*.ts
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Extract custom hooks grouped by concern into separate
.tsfiles; each hook should represent a cohesive domain of functionality (e.g., useSearch, useFilters, usePagination)Do not type hook returns; let TypeScript infer as much as possible
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
🧠 Learnings (28)
📓 Common learnings
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12566
File: autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts:968-974
Timestamp: 2026-03-26T00:32:06.673Z
Learning: In Significant-Gravitas/AutoGPT, the admin-facing methods in `autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts` (e.g., `addUserCredits`, `getUsersHistory`, `getUserRateLimit`, `resetUserRateLimit`) intentionally follow the legacy `BackendAPI` pattern with manually defined types in `autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts`. Migrating these admin endpoints to the generated OpenAPI hooks (`@/app/api/__generated__/endpoints/`) is a planned separate effort covering all admin endpoints together, not done piecemeal per PR. Do not flag individual admin type additions in `types.ts` as blocking issues.
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12536
File: autogpt_platform/frontend/src/app/api/openapi.json:5770-5790
Timestamp: 2026-03-24T21:25:15.983Z
Learning: Repo: Significant-Gravitas/AutoGPT — PR `#12536`
File: autogpt_platform/frontend/src/app/api/openapi.json
Learning: The OpenAPI spec file is auto-generated; per established convention, endpoints generally declare only 200/201, 401, and 422 responses. Do not suggest adding explicit 403/404 response entries for single operations unless planning a repo-wide spec update. Prefer clarifying such behaviors in endpoint descriptions/docstrings instead of altering response maps.
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.
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Use Next.js 15 App Router with client-first approach for framework
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Use type-safe generated API hooks via Orval + React Query for data fetching
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Use React Query for server state and co-locate UI state in components/hooks for state management
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Separate render logic (`.tsx`) from business logic (`use*.ts` hooks) in component structure
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Use xyflow/react for workflow builder visual graph editor
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Use shadcn/ui (Radix UI primitives) with Tailwind CSS for UI components
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Use LaunchDarkly integration for feature flags
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Use ErrorCard for render errors, toast for mutations, and Sentry for exceptions in error handling
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Use Vitest + React Testing Library + MSW for integration tests (primary), Playwright for E2E, and Storybook for visual testing
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Run `pnpm format`, `pnpm lint`, `pnpm types`, and `pnpm test:unit` before reporting work as done, creating commits, or opening PRs
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:28:26.043Z
Learning: Avoid index and barrel files
📚 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/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-02-27T10:45:49.499Z
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:49.499Z
Learning: Prefer using generated OpenAPI types from '@/app/api/__generated__/' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
📚 Learning: 2026-03-24T02:05:04.672Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:04.672Z
Learning: When gating React component logic on a React Query result (e.g., hooks like `useQuery` / `useGetV2GetCopilotUsage`), prefer destructuring and checking `isSuccess` (or aliasing it to a meaningful boolean like `isSuccess: hasUsage`) instead of relying on `!isLoading`. Reason: `isLoading` can be `false` in error/idle states where `data` may still be `undefined`, while `isSuccess` indicates the query completed successfully and `data` is populated.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use generated API hooks from `@/app/api/__generated__/endpoints/` with pattern `use{Method}{Version}{OperationName}` and regenerate with `pnpm generate:api`
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-08T17:27:45.740Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-08T17:27:45.740Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use generated API hooks from `@/app/api/__generated__/endpoints/` following the pattern `use{Method}{Version}{OperationName}`, and regenerate with `pnpm generate:api`
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/src/**/*.ts : Extract component logic into custom hooks grouped by concern, not by component. Each hook should represent a cohesive domain of functionality (e.g., useSearch, useFilters, usePagination) rather than bundling all state into one useComponentState hook. Put each hook in its own `.ts` file.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.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/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.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/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.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/**/*.{ts,tsx} : Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend development
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-13T13:11:00.401Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/EmptySession/EmptySession.tsx:41-42
Timestamp: 2026-04-13T13:11:00.401Z
Learning: In Significant-Gravitas/AutoGPT `autogpt_platform/frontend`, unconditional React Query hook calls (e.g. `usePulseChips()` in `EmptySession.tsx`) are intentional when the underlying data is expected to be cached from prior page visits. The team considers the fetch cost acceptable in these cases and does not require `enabled` gating purely for feature-flag-disabled paths. Do not flag unconditional query hooks as wasteful when caching makes the cost negligible.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Separate render logic (`.tsx`) from business logic (`use*.ts` hooks)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-03-26T00:32:06.673Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12566
File: autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts:968-974
Timestamp: 2026-03-26T00:32:06.673Z
Learning: In Significant-Gravitas/AutoGPT, the admin-facing methods in `autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts` (e.g., `addUserCredits`, `getUsersHistory`, `getUserRateLimit`, `resetUserRateLimit`) intentionally follow the legacy `BackendAPI` pattern with manually defined types in `autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts`. Migrating these admin endpoints to the generated OpenAPI hooks (`@/app/api/__generated__/endpoints/`) is a planned separate effort covering all admin endpoints together, not done piecemeal per PR. Do not flag individual admin type additions in `types.ts` as blocking issues.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-03-24T02:05:08.144Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:08.144Z
Learning: In `Significant-Gravitas/AutoGPT` (autogpt_platform frontend), when gating logic on a React Query result being available (e.g., `useGetV2GetCopilotUsage`), prefer destructuring `isSuccess` (e.g., `const { data, isSuccess: hasUsage } = useQuery(...)`) over checking `!isLoading`. `isLoading` can be `false` in error/idle states where `data` is still `undefined`, while `isSuccess` guarantees the query completed successfully and `data` is populated. This pattern was established in `CopilotPage.tsx` (PR `#12526`, commit e9dfd1f76).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-03-24T02:23:33.877Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/RateLimitResetDialog/RateLimitResetDialog.tsx:0-0
Timestamp: 2026-03-24T02:23:33.877Z
Learning: When handling errors in `onError` callbacks for generated Orval hooks in the Copilot platform UI (autogpt_platform/frontend), the project convention is to explicitly check for `ApiError` and read `error.response?.detail` first, falling back to `error.message` and then a generic string. While the custom Orval mutator (`autogpt_platform/frontend/src/app/api/mutators/custom-mutator.ts`) already maps `responseData?.detail` into `ApiError.message`, the explicit `error.response?.detail` extraction is still used for consistency with other hooks like `useCronSchedulerDialog.ts` and `useRunGraph.ts`. This pattern is established in `autogpt_platform/frontend/src/app/(platform)/copilot/hooks/useResetRateLimit.ts` (commit 7962185cc, PR `#12526`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-15T22:49:10.465Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:10.465Z
Learning: In Significant-Gravitas/AutoGPT (autogpt_platform/frontend), `Sentry.captureException` is NOT required in `catch` blocks for React Query mutation error paths. React Query already handles error propagation internally, and the correct pattern is: toast notifications for mutation errors, ErrorCard for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths outside of React Query's scope (e.g., standalone async utilities, event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.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 '<ErrorCard />' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-20T16:41:41.946Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12856
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/ArtifactPanel/components/ArtifactErrorBoundary.tsx:70-97
Timestamp: 2026-04-20T16:41:41.946Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/components/ArtifactPanel/components/ArtifactErrorBoundary.tsx`, the hand-rolled alert fallback (rather than `<ErrorCard />`) is intentional. `ErrorCard`'s `ActionButtons` only offers Try Again / Report Error / Get Help; the artifact error boundary requires a "Copy error details" affordance so users can paste the error back to the agent. `ErrorCard`'s styling also assumes a full-page context and is unsuitable for the panel's narrow column. Do not flag this as a violation of the ErrorCard guideline. A future follow-up should extend `ErrorCard` with a custom-action slot to unify both surfaces.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-03-05T19:50:36.724Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 0
File: :0-0
Timestamp: 2026-03-05T19:50:36.724Z
Learning: In `autogpt_platform/frontend/src/app/api/helpers.ts`, the `getPaginationNextPageNumber()` function includes an intentional defensive null check (`if (!pagination) return undefined`) after destructuring `lastPage.data.pagination`. This was proven necessary in production because React Query calls `getNextPageParam` even with error responses (e.g., 401s) that lack the expected pagination structure. Returning `undefined` signals React Query to treat it as "no next page" and stop pagination instead of throwing a TypeError. This is valid and should not be flagged in future reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-15T14:10:18.177Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/backend/backend/copilot/graphiti/CLAUDE.md:0-0
Timestamp: 2026-04-15T14:10:18.177Z
Learning: Applies to autogpt_platform/backend/backend/copilot/graphiti/**/*agent*.{ts,tsx} : Agent error handling must distinguish between recoverable and non-recoverable errors
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : No linter suppressors (`// ts-ignore`, `// eslint-disable`) — fix the actual issue
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-03-17T06:48:26.471Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12445
File: autogpt_platform/backend/backend/copilot/sdk/service.py:1071-1072
Timestamp: 2026-03-17T06:48:26.471Z
Learning: In Significant-Gravitas/AutoGPT (autogpt_platform), the AI SDK enforces `z.strictObject({type, errorText})` on SSE `StreamError` responses, so additional fields like `retryable: bool` cannot be added to `StreamError` or serialized via `to_sse()`. Instead, retry signaling for transient Anthropic API errors is done via the `COPILOT_RETRYABLE_ERROR_PREFIX` constant prepended to persisted session messages (in `ChatMessage.content`). The frontend detects retryable errors by checking `markerType === "retryable_error"` from `parseSpecialMarkers()` — no SSE schema changes and no string matching on error text. This pattern was established in PR `#12445`, commit 64d82797b.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
📚 Learning: 2026-04-13T13:16:57.226Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/hooks/useAgentStatus.ts:65-79
Timestamp: 2026-04-13T13:16:57.226Z
Learning: When using `useGetV1ListAllExecutions` from `autogpt_platform/frontend/src/app/api/__generated__/endpoints/graphs/graphs`, assume it already returns executions in reverse-chronological order (most recent first). If you need the “first” matching failure/completion, it’s intentional to pick the first match from the returned array (e.g., via `.find()`), and you should not request sorting the executions array before calling `.find()`—that adds overhead without practical benefit given the API ordering guarantee. Only recommend additional sorting if the ordering guarantee is broken/unclear in the specific call site.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts
🔇 Additional comments (1)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useAPIKeysList.ts (1)
1-31: LGTM!Clean hook that correctly uses the generated API hook, applies a query-level
selectto filter ACTIVE keys, and exposes derivedisEmptystate. Follows the separation-of-concerns and naming conventions (acronymAPIfully capitalized, no typed return, nouseMemo/useCallback). Thequery.data ?? []fallback safely handles theundefinedcase before the query resolves.
…273) - APIKeyInfoDialog + formatLastUsed: wrap ISO-string timestamps in new Date() before passing to date-fns. The generated API types say Date, but JSON responses deliver strings — date-fns v4 would crash. Sentry flagged this as CRITICAL. - useCreateAPIKey: drop the dead onSuccess status === 200 guard and the unreachable post-await status check. The Orval mutator already rejects on non-2xx, so reaching response.data implies the success variant. This also fixes the Sentry-reported silent failure on 201 responses (the strict 200 check skipped the success path). - formatLastUsed now accepts string | Date so callers don't need defensive conversions.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx (1)
80-89: Optional: consider extractingSectionto its own file.
Sectionis defined here with an inline prop type and only used locally, which is fine for now. If it gets reused byCreateAPIKeyDialog/APIKeyRowor grows more styling, extracting it to a shared sibling (e.g../Section.tsx) and using a namedtype Props = { ... }would align better with the project's component-per-file convention.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx around lines 80 - 89, Extract the inline Section component into its own file (e.g., Section.tsx): create a named React component Section that accepts props typed via a named type Props = { label: string; children: ReactNode }, export it as a named export, move the JSX and styling exactly as-is, and replace the local definition with an import in APIKeyInfoDialog; also update other components that may reuse it (CreateAPIKeyDialog, APIKeyRow) to import the shared Section to keep a single source of truth for styling and types.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx:
- Around line 80-89: Extract the inline Section component into its own file
(e.g., Section.tsx): create a named React component Section that accepts props
typed via a named type Props = { label: string; children: ReactNode }, export it
as a named export, move the JSX and styling exactly as-is, and replace the local
definition with an import in APIKeyInfoDialog; also update other components that
may reuse it (CreateAPIKeyDialog, APIKeyRow) to import the shared Section to
keep a single source of truth for styling and types.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6827a2c9-df1f-4360-befe-e903e3247ba8
📒 Files selected for processing (3)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/helpers.tsautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useCreateAPIKey.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/helpers.ts
- autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/hooks/useCreateAPIKey.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). (7)
- GitHub Check: check API types
- GitHub Check: integration_test
- GitHub Check: lint
- GitHub Check: end-to-end tests
- GitHub Check: Seer Code Review
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
🧰 Additional context used
📓 Path-based instructions (9)
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 developmentFormat frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.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/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.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 frontend code changesFully capitalize acronyms in symbols (e.g.,
graphID,useBackendAPI)Use function declarations (not arrow functions) for components and handlers
No
dark:Tailwind classes — the design system handles dark mode automaticallyNo
anytypes unless the value genuinely can be anythingNo linter suppressors (
//@ts-ignore``,// eslint-disable) — fix the actual issue insteadAlways import the
-Icon-suffixed alias from@phosphor-icons/react(e.g.,TrashIcon,PlusIcon,SquareIcon); bare exports likeTrash/Plusare deprecatedDo not use
useCallbackoruseMemounless asked to optimize a given function
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/following the patternuse{Method}{Version}{OperationName}, and regenerate withpnpm generate:api
Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local/componentsfolder
Use function declarations for components and handlers, use arrow functions only for callbacks
Do not useuseCallbackoruseMemounless asked to optimise a given functionKeep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Use generated API hooks from
@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
autogpt_platform/frontend/**/*.{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/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
autogpt_platform/frontend/src/**
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Run
pnpm formatto auto-fix formatting issues before completing any frontend code changesRun
pnpm lintto check for lint errors and fix any that appear before completing frontend code changesRun
pnpm test:unitto run integration tests and fix any failures before completing frontend code changes
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
autogpt_platform/frontend/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Use Next.js
<Link>for internal navigation — never use raw<a>tagsComponent props should be
type Props = { ... }(not exported) unless it needs to be used outside the componentUse design system components from
src/components/(atoms, molecules, organisms); never usesrc/components/__legacy__/*Use Tailwind CSS only for styling, with design tokens and Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
🧠 Learnings (14)
📓 Common learnings
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12566
File: autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts:968-974
Timestamp: 2026-03-26T00:32:06.673Z
Learning: In Significant-Gravitas/AutoGPT, the admin-facing methods in `autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts` (e.g., `addUserCredits`, `getUsersHistory`, `getUserRateLimit`, `resetUserRateLimit`) intentionally follow the legacy `BackendAPI` pattern with manually defined types in `autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts`. Migrating these admin endpoints to the generated OpenAPI hooks (`@/app/api/__generated__/endpoints/`) is a planned separate effort covering all admin endpoints together, not done piecemeal per PR. Do not flag individual admin type additions in `types.ts` as blocking issues.
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.
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12536
File: autogpt_platform/frontend/src/app/api/openapi.json:5770-5790
Timestamp: 2026-03-24T21:25:15.983Z
Learning: Repo: Significant-Gravitas/AutoGPT — PR `#12536`
File: autogpt_platform/frontend/src/app/api/openapi.json
Learning: The OpenAPI spec file is auto-generated; per established convention, endpoints generally declare only 200/201, 401, and 422 responses. Do not suggest adding explicit 403/404 response entries for single operations unless planning a repo-wide spec update. Prefer clarifying such behaviors in endpoint descriptions/docstrings instead of altering response maps.
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:32:06.718Z
Learning: Avoid index and barrel files in frontend code
📚 Learning: 2026-04-15T22:49:27.673Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:7-37
Timestamp: 2026-04-15T22:49:27.673Z
Learning: In autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/, the legacy imports `Dialog`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogTitle` from `@/components/__legacy__/ui/dialog` are intentional and acceptable because the design system has no direct Dialog equivalent yet. Do not flag these as blocking issues in admin diagnostics components until a design-system Dialog is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-03-12T10:00:26.493Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 12378
File: autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx:97-105
Timestamp: 2026-03-12T10:00:26.493Z
Learning: In `autogpt_platform/frontend/src/components/contextual/CredentialsInput/components/CredentialTypeSelector/CredentialTypeSelector.tsx`, the `onCredentialsCreate` callback passed to `APIKeyTabContent` is only invoked after the API request succeeds. This is because `useAPIKeyCredentialsModal` (in `useAPIKeyCredentialsModal.ts`) awaits `credentials.createAPIKeyCredentials(...)` before calling `onCredentialsCreate`. Therefore, calling `onClose()` immediately after `onCredentialsCreate(creds)` is correct — it only closes the modal on success.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-03-26T00:32:06.673Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12566
File: autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts:968-974
Timestamp: 2026-03-26T00:32:06.673Z
Learning: In Significant-Gravitas/AutoGPT, the admin-facing methods in `autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts` (e.g., `addUserCredits`, `getUsersHistory`, `getUserRateLimit`, `resetUserRateLimit`) intentionally follow the legacy `BackendAPI` pattern with manually defined types in `autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts`. Migrating these admin endpoints to the generated OpenAPI hooks (`@/app/api/__generated__/endpoints/`) is a planned separate effort covering all admin endpoints together, not done piecemeal per PR. Do not flag individual admin type additions in `types.ts` as blocking issues.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.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/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-03-24T02:23:33.877Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/RateLimitResetDialog/RateLimitResetDialog.tsx:0-0
Timestamp: 2026-03-24T02:23:33.877Z
Learning: When handling errors in `onError` callbacks for generated Orval hooks in the Copilot platform UI (autogpt_platform/frontend), the project convention is to explicitly check for `ApiError` and read `error.response?.detail` first, falling back to `error.message` and then a generic string. While the custom Orval mutator (`autogpt_platform/frontend/src/app/api/mutators/custom-mutator.ts`) already maps `responseData?.detail` into `ApiError.message`, the explicit `error.response?.detail` extraction is still used for consistency with other hooks like `useCronSchedulerDialog.ts` and `useRunGraph.ts`. This pattern is established in `autogpt_platform/frontend/src/app/(platform)/copilot/hooks/useResetRateLimit.ts` (commit 7962185cc, PR `#12526`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-03-17T06:48:26.471Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12445
File: autogpt_platform/backend/backend/copilot/sdk/service.py:1071-1072
Timestamp: 2026-03-17T06:48:26.471Z
Learning: In Significant-Gravitas/AutoGPT (autogpt_platform), the AI SDK enforces `z.strictObject({type, errorText})` on SSE `StreamError` responses, so additional fields like `retryable: bool` cannot be added to `StreamError` or serialized via `to_sse()`. Instead, retry signaling for transient Anthropic API errors is done via the `COPILOT_RETRYABLE_ERROR_PREFIX` constant prepended to persisted session messages (in `ChatMessage.content`). The frontend detects retryable errors by checking `markerType === "retryable_error"` from `parseSpecialMarkers()` — no SSE schema changes and no string matching on error text. This pattern was established in PR `#12445`, commit 64d82797b.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-02-27T10:45:49.499Z
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:49.499Z
Learning: Prefer using generated OpenAPI types from '@/app/api/__generated__/' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-03-24T02:05:04.672Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:04.672Z
Learning: When gating React component logic on a React Query result (e.g., hooks like `useQuery` / `useGetV2GetCopilotUsage`), prefer destructuring and checking `isSuccess` (or aliasing it to a meaningful boolean like `isSuccess: hasUsage`) instead of relying on `!isLoading`. Reason: `isLoading` can be `false` in error/idle states where `data` may still be `undefined`, while `isSuccess` indicates the query completed successfully and `data` is populated.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx
🔇 Additional comments (1)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyInfoDialog/APIKeyInfoDialog.tsx (1)
19-78: LGTM!Clean, focused dialog component. Props are well-typed, the
new Date(...)wrapping oncreated_at/last_used_atis consistent with the PR's safer-date-parsing fix (backend returns ISO strings while generated types sayDate), and the empty-state fallbacks forscopesandlast_used_atlook correct.
…2273) CI's 'check API types' uses 'poetry run export-api-schema' which outputs unicode literals (ensure_ascii=False). My earlier manual json.dumps export escaped them as \u26a0\ufe0f, so the committed spec drifted from CI's canonical output. Regenerated via the proper script.
…ys (SECRT-2273) - scroll-area: use `-translate-x-1/2` for the FAB instead of a magic `-ml-[22px]` margin tied to the button size. - PermissionsCheckboxGroup: add `role="group"` + `aria-labelledby` on the checkbox grid so assistive tech announces the permissions as a cohesive set. - APIKeySelectionBar: replace the raw `<button>` Select-All / Deselect with the design-system `Button` atom (ghost variant). - settings/layout.tsx: drop the `md:h-[calc(100vh-60px)]` override that coupled the ScrollArea height to the mobile nav height; flex sizing via `h-full` works fine now. - APIKeyList.tsx: move the sticky selection bar's `overflow: hidden` from inline style to the `overflow-hidden` utility.
|
Addressed CodeRabbit nitpicks in 3850388:
Skipped for scope:
|
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (5)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx (1)
67-67: Prefer design tokens over arbitrary hex color.
bg-[#F9F9FA]is a one-off hex value. Consider mapping it to a Tailwind design token (e.g.bg-zinc-50or a semantic surface token) so the selection bar background stays consistent with the rest of the design system and adapts correctly to any future theme changes.rounded-[8px]on Line 80 is similar — preferrounded-lg(or the equivalent token) if possible.As per coding guidelines: "Use Tailwind CSS only for styling with design tokens".
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx at line 67, The component's className in APIKeyList.tsx uses an arbitrary hex bg color and a custom radius token: replace bg-[`#F9F9FA`] in the sticky bar className with a Tailwind design token (e.g. bg-zinc-50 or your project's semantic surface token) so it follows the design system, and change rounded-[8px] (used later in the same component) to the equivalent token such as rounded-lg; update only those className tokens in the APIKeyList component (search for the "sticky top-0 z-20 overflow-hidden bg-[`#F9F9FA`]" occurrence and the "rounded-[8px]" occurrence) to ensure consistency with theme tokens.autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx (2)
27-36: Hardcoded labelidmay collide on re-render.
api-key-permissions-labelis a static string, so if this component is ever rendered more than once in the same DOM (e.g., two create-key dialogs mounted simultaneously, or a future side-by-side form), you'll end up with duplicate IDs and an ambiguousaria-labelledbytarget. Consider deriving a unique id viaReact.useId()and threading it to both the label and the group.♻️ Suggested change
-export function PermissionsCheckboxGroup({ value, onChange }: Props) { +export function PermissionsCheckboxGroup({ value, onChange }: Props) { + const labelId = React.useId(); function toggle(permission: APIKeyPermission) { @@ <Text - id="api-key-permissions-label" + id={labelId} variant="large-medium" @@ <div role="group" - aria-labelledby="api-key-permissions-label" + aria-labelledby={labelId} className="grid max-h-[220px] grid-cols-2 gap-x-4 gap-y-2 overflow-y-auto"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx around lines 27 - 36, The hardcoded id "api-key-permissions-label" in the PermissionsCheckboxGroup component can collide when multiple instances mount; replace it by generating a unique id with React.useId() (e.g., const labelId = useId()) inside the PermissionsCheckboxGroup function and use that labelId both as the Text id and as the div's aria-labelledby to ensure unique, accessible labeling for each instance.
42-49: Focus ring may be clipped by scroll container.The button uses
focus-visible:ring-2but lives inside a parent withoverflow-y-autoandmax-h-[220px]. When a focused option is near the edge of the scroll viewport, the ring can be visually clipped. Consider adding a little padding/inset to the scroll container (e.g.,p-1) or usingring-offsetso the outline remains fully visible during keyboard navigation.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx around lines 42 - 49, The focus ring on each option button in PermissionsCheckboxGroup can be clipped by the scroll container (the parent with overflow-y-auto and max-h-[220px]); update the UI so the ring is not clipped by either adding small inset padding to the scroll container (e.g., p-1 on the container element that wraps the mapped buttons) or add a ring offset to the button itself (e.g., include ring-offset-1 and optionally ring-offset-white/dark on the button class alongside focus-visible:ring-2) to ensure the focus outline for the button (the element using onClick={() => toggle(option.value)} and aria-checked) remains fully visible during keyboard navigation.autogpt_platform/frontend/src/components/ui/scroll-area.tsx (2)
90-114: Consider extractinguseScrolledPastThresholdinto its ownuse*.tsfile.The frontend guidelines ask to separate business/behavior logic (
use*.tshooks) from render (.tsx).useScrolledPastThresholdis generic enough that it's a nice candidate forsrc/components/ui/scroll-area/useScrolledPastThreshold.ts(or a shared hooks location), and would also keepscroll-area.tsxrender-focused. Not blocking — the file is still short — purely a hygiene suggestion.Also, the inner
update()runssetVisible(viewport.scrollTop > threshold)on every scroll tick; React will bail on equal values but you can shave a read by comparing before calling. Entirely optional.As per coding guidelines: "Separate render logic (
.tsx) from business logic (use*.tshooks)".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/ui/scroll-area.tsx` around lines 90 - 114, Extract the useScrolledPastThreshold hook out of scroll-area.tsx into a new file (e.g., useScrolledPastThreshold.ts) and export it so scroll-area.tsx imports and uses it; relocate the function signature and its React.useEffect (including props enabled, threshold, and viewportRef) to the new module to keep render code separate from hook logic. While moving, micro-optimize the inner update callback (inside useScrolledPastThreshold) to compare the computed boolean (viewport.scrollTop > threshold) with the current visible state before calling setVisible to avoid redundant state updates, and ensure the same event listener setup/teardown (addEventListener with { passive: true } and removeEventListener) is preserved. Also keep the early runtime guards for viewport and the effect dependency array [enabled, threshold, viewportRef] intact.
10-14: Prop types should betype Props = { ... }per the frontend style guide.The two new prop shapes use
interface ScrollAreaProps/interface ScrollToTopFabProps. The repo's current frontend guideline isComponent props should betype Props = { ... }(not exported) unless it needs to be used outside the component. Neither is exported, so they can simply betype Props = { ... }, co-located with each component. Note the older rootAGENTS.mdstill saysinterface Props, so this is a soft nit rather than a blocker — flagging for consistency with the newer guideline.As per coding guidelines: "Component props should be
type Props = { ... }(not exported) unless it needs to be used outside the component".Also applies to: 116-119
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/ui/scroll-area.tsx` around lines 10 - 14, Replace the non-exported interfaces with local type aliases per the frontend style guide: change "interface ScrollAreaProps" to "type Props" for the ScrollArea component and likewise change "interface ScrollToTopFabProps" to "type Props" for the ScrollToTopFab component, keeping them co-located with their respective components and ensuring they still extend React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> (or the appropriate primitive) and preserve orientation/showScrollToTop/other fields; do not export the types.
🤖 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/ui/scroll-area.tsx`:
- Around line 36-38: The scrollToTop function always uses smooth scrolling which
ignores users' prefers-reduced-motion settings; update scrollToTop to respect
useReducedMotion() (or accept a reducedMotion boolean passed from
ScrollToTopFab) and choose behavior: "auto" when reduced motion is requested and
"smooth" otherwise, so call viewportRef.current?.scrollTo({ top: 0, behavior:
reducedMotion ? "auto" : "smooth" }); and remove any duplicate reduced-motion
branching elsewhere if you opt to pass the flag down.
- Around line 127-144: The floating action button (the motion.button that
renders the ArrowUpIcon and uses onClick/reduceMotion) uses hardcoded utilities
like bg-zinc-800, text-white, hover:bg-zinc-900 and focus-visible:ring-zinc-800;
update its className to use the design tokens instead: replace bg-zinc-800 with
bg-primary, text-white with text-primary-foreground, hover:bg-zinc-900 with
hover:bg-primary/90, and replace focus-visible:ring-zinc-800 (or any focus ring
utility) with focus-visible:ring-ring while preserving other layout and
accessibility classes and the rest of the motion props.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx:
- Line 67: The component's className in APIKeyList.tsx uses an arbitrary hex bg
color and a custom radius token: replace bg-[`#F9F9FA`] in the sticky bar
className with a Tailwind design token (e.g. bg-zinc-50 or your project's
semantic surface token) so it follows the design system, and change
rounded-[8px] (used later in the same component) to the equivalent token such as
rounded-lg; update only those className tokens in the APIKeyList component
(search for the "sticky top-0 z-20 overflow-hidden bg-[`#F9F9FA`]" occurrence and
the "rounded-[8px]" occurrence) to ensure consistency with theme tokens.
In
`@autogpt_platform/frontend/src/app/`(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx:
- Around line 27-36: The hardcoded id "api-key-permissions-label" in the
PermissionsCheckboxGroup component can collide when multiple instances mount;
replace it by generating a unique id with React.useId() (e.g., const labelId =
useId()) inside the PermissionsCheckboxGroup function and use that labelId both
as the Text id and as the div's aria-labelledby to ensure unique, accessible
labeling for each instance.
- Around line 42-49: The focus ring on each option button in
PermissionsCheckboxGroup can be clipped by the scroll container (the parent with
overflow-y-auto and max-h-[220px]); update the UI so the ring is not clipped by
either adding small inset padding to the scroll container (e.g., p-1 on the
container element that wraps the mapped buttons) or add a ring offset to the
button itself (e.g., include ring-offset-1 and optionally ring-offset-white/dark
on the button class alongside focus-visible:ring-2) to ensure the focus outline
for the button (the element using onClick={() => toggle(option.value)} and
aria-checked) remains fully visible during keyboard navigation.
In `@autogpt_platform/frontend/src/components/ui/scroll-area.tsx`:
- Around line 90-114: Extract the useScrolledPastThreshold hook out of
scroll-area.tsx into a new file (e.g., useScrolledPastThreshold.ts) and export
it so scroll-area.tsx imports and uses it; relocate the function signature and
its React.useEffect (including props enabled, threshold, and viewportRef) to the
new module to keep render code separate from hook logic. While moving,
micro-optimize the inner update callback (inside useScrolledPastThreshold) to
compare the computed boolean (viewport.scrollTop > threshold) with the current
visible state before calling setVisible to avoid redundant state updates, and
ensure the same event listener setup/teardown (addEventListener with { passive:
true } and removeEventListener) is preserved. Also keep the early runtime guards
for viewport and the effect dependency array [enabled, threshold, viewportRef]
intact.
- Around line 10-14: Replace the non-exported interfaces with local type aliases
per the frontend style guide: change "interface ScrollAreaProps" to "type Props"
for the ScrollArea component and likewise change "interface ScrollToTopFabProps"
to "type Props" for the ScrollToTopFab component, keeping them co-located with
their respective components and ensuring they still extend
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> (or the
appropriate primitive) and preserve orientation/showScrollToTop/other fields; do
not export the types.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d5ba033c-3d9b-407c-8722-9e00e06d3164
📒 Files selected for processing (5)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeySelectionBar/APIKeySelectionBar.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/layout.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- autogpt_platform/frontend/src/app/(platform)/settings/layout.tsx
- autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeySelectionBar/APIKeySelectionBar.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). (6)
- GitHub Check: integration_test
- GitHub Check: check API types
- GitHub Check: Seer Code Review
- GitHub Check: end-to-end tests
- GitHub Check: Analyze (python)
- GitHub Check: Check PR Status
🧰 Additional context used
📓 Path-based instructions (11)
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 developmentFormat frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.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/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.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 development
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/following the patternuse{Method}{Version}{OperationName}, and regenerate withpnpm generate:api
Separate render logic from business logic using component.tsx + useComponent.ts + helpers.ts pattern, colocate state when possible and avoid creating large components, use sub-components in local/componentsfolder
Use function declarations for components and handlers, use arrow functions only for callbacks
Do not useuseCallbackoruseMemounless asked to optimise a given functionRun
pnpm typesto check for type errors and fix any that appear before completing code changes in the frontendUse function declarations (not arrow functions) for components and handlers
No
dark:Tailwind classes — the design system handles dark modeUse Next.js
<Link>component for internal navigation — never raw<a>tagsNo
anytypes unless the value genuinely can be anythingKeep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Use type-safe generated API hooks via Orval + React Query for data fetching
Separate render logic (
.tsx) from business logic (use*.tshooks)Use shadcn/ui (Radix UI primitives) with Tailwind CSS styling for UI components
Use Phosphor Icons only, always import the
-Icon-suffixed alias (e.g.TrashIcon,PlusIcon) from@phosphor-icons/reactNever use
src/components/__legacy__/*componentsUse generated API hooks from
@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}Use Tailwind CSS only for styling with design tokens
Do not use
useCallbackoruseMemounless asked to optimize a specific functionComponent props should be
type Props = { ... }(not exported) unless it needs to be used outside the compone...
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
autogpt_platform/frontend/**/*.{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/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Run
pnpm formatto auto-fix formatting issues before completing any code changes in the frontendRun
pnpm lintto check for lint errors and fix any that appear before completing code changes in the frontendFully capitalize acronyms in symbols, e.g.
graphID,useBackendAPINo linter suppressors (
//@ts-ignore``,// eslint-disable) — fix the actual issue instead
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
autogpt_platform/frontend/src/app/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Put sub-components in a local
components/folder within the feature directory
Files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.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/ui/scroll-area.tsx
autogpt_platform/frontend/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Structure components as
ComponentName/ComponentName.tsx+useComponentName.ts+helpers.ts, use design system components fromsrc/components/(atoms, molecules, organisms), and never usesrc/components/__legacy__/*Use Storybook for design system components in
src/components/
Files:
autogpt_platform/frontend/src/components/ui/scroll-area.tsx
🧠 Learnings (20)
📓 Common learnings
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12536
File: autogpt_platform/frontend/src/app/api/openapi.json:5770-5790
Timestamp: 2026-03-24T21:25:15.983Z
Learning: Repo: Significant-Gravitas/AutoGPT — PR `#12536`
File: autogpt_platform/frontend/src/app/api/openapi.json
Learning: The OpenAPI spec file is auto-generated; per established convention, endpoints generally declare only 200/201, 401, and 422 responses. Do not suggest adding explicit 403/404 response entries for single operations unless planning a repo-wide spec update. Prefer clarifying such behaviors in endpoint descriptions/docstrings instead of altering response maps.
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12566
File: autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts:968-974
Timestamp: 2026-03-26T00:32:06.673Z
Learning: In Significant-Gravitas/AutoGPT, the admin-facing methods in `autogpt_platform/frontend/src/lib/autogpt-server-api/client.ts` (e.g., `addUserCredits`, `getUsersHistory`, `getUserRateLimit`, `resetUserRateLimit`) intentionally follow the legacy `BackendAPI` pattern with manually defined types in `autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts`. Migrating these admin endpoints to the generated OpenAPI hooks (`@/app/api/__generated__/endpoints/`) is a planned separate effort covering all admin endpoints together, not done piecemeal per PR. Do not flag individual admin type additions in `types.ts` as blocking issues.
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.
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:51:01.687Z
Learning: Use Next.js 15 App Router with client-first approach for the frontend framework
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:51:01.687Z
Learning: Use React Query for server state and co-located UI state in components/hooks
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:51:01.687Z
Learning: Regenerate API client with `pnpm generate:api` when OpenAPI spec changes
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:51:01.687Z
Learning: Integration tests are the default (~90% of tests); use Vitest + React Testing Library + MSW
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT
Timestamp: 2026-04-24T11:51:01.687Z
Learning: Write failing tests first (TDD), implement, then verify
📚 Learning: 2026-04-15T22:49:27.673Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:7-37
Timestamp: 2026-04-15T22:49:27.673Z
Learning: In autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/, the legacy import `Checkbox` from `@/components/__legacy__/ui/checkbox` is intentional and acceptable because the design system has no direct Checkbox equivalent yet. Do not flag this as a blocking issue in admin diagnostics components until a design-system Checkbox is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.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/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.tsx : Component props should be `type Props = { ... }` (not exported) unless it needs to be used outside the component
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/src/**/*.ts : Extract component logic into custom hooks grouped by concern, not by component. Each hook should represent a cohesive domain of functionality (e.g., useSearch, useFilters, usePagination) rather than bundling all state into one useComponentState hook. Put each hook in its own `.ts` file.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx
📚 Learning: 2026-04-08T17:27:45.740Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-08T17:27:45.740Z
Learning: Applies to autogpt_platform/frontend/src/**/*.tsx : Component props should use `interface Props { ... }` (not exported) unless the interface needs to be used outside the component
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/components/ui/scroll-area.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} : Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-02-27T10:45:49.499Z
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:49.499Z
Learning: Prefer using generated OpenAPI types from '@/app/api/__generated__/' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
📚 Learning: 2026-03-24T02:05:04.672Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx:0-0
Timestamp: 2026-03-24T02:05:04.672Z
Learning: When gating React component logic on a React Query result (e.g., hooks like `useQuery` / `useGetV2GetCopilotUsage`), prefer destructuring and checking `isSuccess` (or aliasing it to a meaningful boolean like `isSuccess: hasUsage`) instead of relying on `!isLoading`. Reason: `isLoading` can be `false` in error/idle states where `data` may still be `undefined`, while `isSuccess` indicates the query completed successfully and `data` is populated.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsxautogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsxautogpt_platform/frontend/src/components/ui/scroll-area.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/app/(platform)/settings/api-keys/components/APIKeyList/APIKeyList.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use function declarations (not arrow functions) for components and handlers
Applied to files:
autogpt_platform/frontend/src/components/ui/scroll-area.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 function declarations for components and handlers (not arrow functions) in React components
Applied to files:
autogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-08T17:28:40.841Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-08T17:28:40.841Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Separate render logic (`.tsx`) from business logic (`use*.ts` hooks)
Applied to files:
autogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-08T17:27:45.740Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-08T17:27:45.740Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use function declarations for components and handlers, use arrow functions only for callbacks
Applied to files:
autogpt_platform/frontend/src/components/ui/scroll-area.tsx
📚 Learning: 2026-04-01T16:01:28.873Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx:5-5
Timestamp: 2026-04-01T16:01:28.873Z
Learning: In Significant-Gravitas/AutoGPT, the `IconType` import from `@/components/__legacy__/ui/icons` in `autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx` is pre-existing and used by `MobileNavBar` for icon prop construction. Migrating it to Phosphor Icons requires a separate refactor of `MobileNavBar` and should not be flagged as a blocking issue in PRs that do not touch `MobileNavBar`.
Applied to files:
autogpt_platform/frontend/src/components/ui/scroll-area.tsx
🔇 Additional comments (1)
autogpt_platform/frontend/src/app/(platform)/settings/api-keys/components/CreateAPIKeyDialog/components/PermissionsCheckboxGroup.tsx (1)
15-64: LGTM — clean, accessible checkbox group.Props as
interface Props, function declaration, Phosphor-Iconaliases, design-systemText, Tailwind-only styling, androle="checkbox" + aria-checkedon a native<button>all line up with the conventions. Toggle logic is straightforward and immutably updatesvalue.
…v2 (SECRT-2273) - scroll-area.tsx: honour `prefers-reduced-motion` in `scrollToTop` — use `behavior: 'auto'` when reduced motion is requested, `'smooth'` otherwise. Matches the entrance/exit animation branching. - scroll-area.tsx: move the scroll-to-top FAB to semantic design tokens (`bg-primary`, `text-primary-foreground`, `hover:bg-primary/90`, `focus-visible:ring-ring`) instead of raw `zinc-*` utilities. - useAPIKeyListView: memoise `allIds` with `useMemo` so `useAPIKeySelection`'s effect only re-runs when the actual id list changes, not on every parent render.
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
…tegrations branch Belongs to the API keys PR (#12907), not this integrations PR.
2 participants
Why / What / How
Why: The Settings v2 API keys page was a UI-only stub with 100 mock rows, a noop "Create Key" button, noop delete buttons, and no empty/loading states. Users couldn't actually manage their keys from the new Settings UI. Ships SECRT-2273.
What: Replaces the mock with a working page: paginated list (15/page) with infinite scroll, create flow with one-time plaintext reveal, single + batch revoke with confirmation dialogs, per-key details dialog, skeleton loader, animated empty state, toast + mutation-loading feedback, and responsive header.
api.key.page.desktop.mov
How:
GET /api/api-keys/paginatedroute returning{ items, total_count, page, page_size, has_more }. The legacyGET /api/api-keysis untouched so the existing profile page keeps working. The list fn runsfind_many+countin parallel and filters toACTIVEstatus by default so revoked keys stay hidden.useGetV1ListUserApiKeysPaginatedInfinitehook that's already in the regenerated client.src/app/(platform)/settings/api-keys/components/— no legacy components reused. Shared primitives (Dialog, Form, Toast, Skeleton, InfiniteScroll, BaseTooltip) come from the atoms/molecules design system.prefers-reduced-motion.h-fullon mobile andmd:h-[calc(100vh-60px)]on desktop to remove a double scrollbar that appeared when the mobile nav took space above the fixed-height scroll region.Changes 🏗️
Backend
GET /api/api-keys/paginated— new route, page + page_size query params,ListAPIKeysPaginatedResponse.list_user_api_keys_paginated— new data fn, gathers find_many + count, default ACTIVE-only filter./api/api-keysroutes untouched.Frontend (settings/api-keys)
page.tsx+components/APIKeyList/,APIKeyRow/,APIKeysHeader/,APIKeySelectionBar/— real-data wiring, drop mock array.components/hooks/—useAPIKeysList,useCreateAPIKey,useRevokeAPIKey.components/CreateAPIKeyDialog/— zod-validated form + success view with copy.components/DeleteAPIKeyDialog/— confirm with loading state; single + batch.components/APIKeyInfoDialog/— shows masked key, scopes, description, created/last_used.components/APIKeyListEmpty/+APIKeyListEmpty/components/APIKeyMarquee.tsx— animated empty state.components/APIKeyListSkeleton/— 6-row skeleton.Other
settings/layout.tsx— responsive ScrollArea height (fixes double-scrollbar on mobile).components/ui/scroll-area.tsx— optionalshowScrollToTopFAB.__tests__/placeholder-pages.test.tsx— drop api-keys from placeholder list.AGENTS.md— Phosphor-Iconsuffix convention note.api/openapi.json— regenerated with new paginated endpoint.Checklist 📋
For code changes:
prefers-reduced-motion)For configuration changes:
.env.defaultis updated or already compatible with my changesdocker-compose.ymlis updated or already compatible with my changes