fix(frontend): agent favorites layout - #11733
Conversation
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
WalkthroughFavorites favoriting logic un-gated by feature flag; FavoriteButton moved out of link wrappers and accepts an optional className; useFavoriteAgents and FavoritesSection now accept/search by a searchTerm prop; toast per-type icons removed and toast close-button positioning CSS deleted. Changes
Sequence Diagram(s)Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
|
Thank you for submitting this PR to fix the agent favorites layout! The code changes look good and align with your description. However, before we can merge this PR, you need to complete the checklist in the PR description. Please:
Your changes seem straightforward, but it's still important to document how you've tested these UI changes. A simple test plan might include checking that:
Once you've completed the checklist, we can proceed with merging your PR. |
|
Thank you for your PR to fix the agent favorites layout! The changes look good and are well-focused on the issue:
However, before we can merge this PR, please complete the checklist in the PR description. Specifically:
Once you've completed the checklist, we can proceed with the review process. The actual code changes look good and focused on the layout improvements described. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In
@autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx:
- Around line 21-23: The current render guard in FavoritesSection returns null
whenever isLoading is true, preventing the skeleton grid from ever showing;
update the conditional so that the component only returns null when not
isLoading AND favoriteAgents.length === 0, and when isLoading is true render the
existing skeleton grid markup instead; locate the check using isLoading and
favoriteAgents in the FavoritesSection component and adjust the logic so the
skeleton path (the skeleton grid JSX within FavoritesSection) is reachable while
loading.
- Around line 26-41: The outer header div in the FavoritesSection component uses
an invalid Tailwind token "pb" in className ("pb mb-3 flex items-center...");
replace "pb" with the intended padding class (e.g., "pb-2" or another correct
pb-* value) or remove it if no bottom padding was intended so Tailwind applies
styles correctly; update the className on the div that contains the HeartIcon
and Title in FavoritesSection.tsx accordingly.
In
@autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsx:
- Around line 6-26: The FavoriteButton currently becomes visually hidden when
!isFavorite but remains keyboard-focusable and has no focus-visible affordance;
update the component so the hidden state restores visibility when focused and
adds clear focus-visible styling: when composing className in FavoriteButton
include the conditional fragment for the hidden state as "!isFavorite &&
'opacity-0 group-hover:opacity-100 focus-visible:opacity-100'" and add explicit
focus-visible classes (e.g., focus-visible:ring-2, focus-visible:ring-offset-2,
focus-visible:outline-none or similar) so keyboard users get a visible
ring/outline; keep onClick and aria-label unchanged.
- Around line 8-10: Update the FavoriteButton props to use a type import for the
click event: add an import type for MouseEvent from "react" and change the
onClick prop signature from (e: React.MouseEvent) => void to (e:
MouseEvent<HTMLButtonElement>) => void so the handler uses the explicit imported
MouseEvent type for the button element.
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx (1)
31-40: Redundant conditions after the new early-return (minor cleanup).
!isLoading && (...)is always true after the guard at Line 21.{favoriteAgents.length > 0 && ...}is also redundant for the same reason.(Also: this file still relies on
@/components/__legacy__/ui/skeleton; worth migrating when convenient, per frontend guidelines.) Based on coding guidelines, avoidsrc/components/__legacy__/*.Also applies to: 70-70
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/components/molecules/Toast/styles.module.cssautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
💤 Files with no reviewable changes (1)
- autogpt_platform/frontend/src/components/molecules/Toast/styles.module.css
🧰 Additional context used
📓 Path-based instructions (10)
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
For frontend code formatting and linting, always run pnpm formatIf adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
autogpt_platform/frontend/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/for data fetching in frontend
Use function declarations (not arrow functions) for components and handlers in frontend
Only use Phosphor Icons in frontend; never use other icon libraries
Never usesrc/components/__legacy__/*or deprecatedBackendAPIin frontend
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js 21+ with pnpm package manager for frontend development
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/src/components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/components/**/*.tsx: Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Use Tailwind CSS utilities only for styling in frontend. Use design system components from src/components/ (atoms, molecules, organisms). Never use src/components/legacy/*
Only use Phosphor Icons (@phosphor-icons/react) for icon components in frontend
Prefer design tokens over hardcoded values in frontend styling
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from @/app/api/generated/endpoints/ (generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Use PascalCase for components, camelCase with use prefix for hooks
No barrel files or index.ts re-exports in frontend
For frontend render errors, use component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Format frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/**
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/**: Install frontend dependencies usingpnpm iinstead of npm
Generate API client from OpenAPI spec usingpnpm generate:api
Regenerate API client hooks usingpnpm generate:apiwhen OpenAPI spec changes
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/src/components/**/*.{ts,tsx}: Separate render logic from data/behavior in components
Structure frontend components asComponentName/ComponentName.tsxplususeComponentName.tshook plushelpers.tsfile
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use design system components from
src/components/(atoms, molecules, organisms) in frontend
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/src/app/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Create frontend pages in
src/app/(platform)/feature-name/page.tsxwith correspondingusePageName.tshook and localcomponents/subfolder
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
🧠 Learnings (12)
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Only use Phosphor Icons (phosphor-icons/react) for icon components in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Only use Phosphor Icons in frontend; never use other icon libraries
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx,css} : Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Prefer design tokens over hardcoded values in frontend styling
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : No barrel files or index.ts re-exports in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Never use `src/components/__legacy__/*` or deprecated `BackendAPI` in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/src/**/*.tsx : Use design system components from `src/components/` (atoms, molecules, organisms) in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Use Tailwind CSS utilities only for styling in frontend. Use design system components from src/components/ (atoms, molecules, organisms). Never use src/components/__legacy__/*
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : For frontend render errors, use <ErrorCard /> component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use function declarations (not arrow functions) for components and handlers in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
🧬 Code graph analysis (1)
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx (2)
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsx (1)
FavoriteButton(12-38)autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/AgentCardMenu.tsx (1)
AgentCardMenu(30-188)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: types
- GitHub Check: test
- GitHub Check: chromatic
- GitHub Check: Seer Code Review
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
🔇 Additional comments (2)
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx (1)
40-67: Good: controls moved out of the link; please visually verify no overlap with the kebab menu across breakpoints.This restructuring should prevent nested-interactive/link click issues and matches the PR goal (heart next to menu).
Please sanity-check in UI thatFavoriteButton(absolute right-10 top-0) andAgentCardMenu(absolute right-2 top-1in its component) don’t overlap on small widths and that the heart remains discoverable on hover/focus.autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx (1)
24-29: No action needed—Sonner v2.0.7 explicitly supportsnullto disable icons.Sonner added support for fully hiding icons with
null(as of v2.0.2). Passingnullfor icon keys does not fall back to defaults; it is the documented, intended way to disable icons. The code is correct as written.Likely an incorrect or invalid review comment.
5221fa8 to
38dba36
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
@autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx:
- Around line 21-23: The early return in the FavoritesSection component
incorrectly includes isLoading so the skeleton never renders; update the
early-return logic (referencing FavoritesSection, isLoading and favoriteAgents)
to only return null when there are truly no favorites after loading finishes
(e.g., only return when favoriteAgents.length === 0 AND isLoading is false), so
the skeleton block remains reachable while isLoading is true.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsxautogpt_platform/frontend/src/components/molecules/Toast/styles.module.cssautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
💤 Files with no reviewable changes (1)
- autogpt_platform/frontend/src/components/molecules/Toast/styles.module.css
🚧 Files skipped from review as they are similar to previous changes (1)
- autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsx
🧰 Additional context used
📓 Path-based instructions (10)
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
For frontend code formatting and linting, always run pnpm formatIf adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
autogpt_platform/frontend/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/for data fetching in frontend
Use function declarations (not arrow functions) for components and handlers in frontend
Only use Phosphor Icons in frontend; never use other icon libraries
Never usesrc/components/__legacy__/*or deprecatedBackendAPIin frontend
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
autogpt_platform/frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js 21+ with pnpm package manager for frontend development
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from @/app/api/generated/endpoints/ (generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Use PascalCase for components, camelCase with use prefix for hooks
No barrel files or index.ts re-exports in frontend
For frontend render errors, use component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Format frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
autogpt_platform/frontend/**
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/**: Install frontend dependencies usingpnpm iinstead of npm
Generate API client from OpenAPI spec usingpnpm generate:api
Regenerate API client hooks usingpnpm generate:apiwhen OpenAPI spec changes
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use design system components from
src/components/(atoms, molecules, organisms) in frontend
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
autogpt_platform/frontend/src/app/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Create frontend pages in
src/app/(platform)/feature-name/page.tsxwith correspondingusePageName.tshook and localcomponents/subfolder
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
autogpt_platform/frontend/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsxautogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx
autogpt_platform/frontend/src/components/**/*.tsx
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/components/**/*.tsx: Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Use Tailwind CSS utilities only for styling in frontend. Use design system components from src/components/ (atoms, molecules, organisms). Never use src/components/legacy/*
Only use Phosphor Icons (@phosphor-icons/react) for icon components in frontend
Prefer design tokens over hardcoded values in frontend styling
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
autogpt_platform/frontend/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/src/components/**/*.{ts,tsx}: Separate render logic from data/behavior in components
Structure frontend components asComponentName/ComponentName.tsxplususeComponentName.tshook plushelpers.tsfile
Files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
🧠 Learnings (12)
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Separate frontend component render logic from data/behavior. Structure: ComponentName/ComponentName.tsx + useComponentName.ts + helpers.ts. Small components (3-4 lines) can be inline. Render-only components can be direct files without folders
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Prefer design tokens over hardcoded values in frontend styling
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Use Tailwind CSS utilities only for styling in frontend. Use design system components from src/components/ (atoms, molecules, organisms). Never use src/components/__legacy__/*
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx,css} : Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Only use Phosphor Icons (phosphor-icons/react) for icon components in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Only use Phosphor Icons in frontend; never use other icon libraries
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/src/**/*.tsx : Use design system components from `src/components/` (atoms, molecules, organisms) in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : No barrel files or index.ts re-exports in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Never use `src/components/__legacy__/*` or deprecated `BackendAPI` in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use function declarations (not arrow functions) for components and handlers in frontend
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Applied to files:
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx
🧬 Code graph analysis (2)
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx (1)
autogpt_platform/frontend/src/components/atoms/Text/Text.tsx (1)
Text(15-35)
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx (2)
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/FavoriteButton.tsx (1)
FavoriteButton(12-38)autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/components/AgentCardMenu.tsx (1)
AgentCardMenu(30-188)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: chromatic
- GitHub Check: test
- GitHub Check: types
- GitHub Check: Seer Code Review
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
🔇 Additional comments (5)
autogpt_platform/frontend/src/components/molecules/Toast/toaster.tsx (1)
25-28: LGTM - Toast icons successfully removed.The icons are now set to
null, removing visual indicators from toast notifications as intended. The implementation preserves the Sonner configuration while cleanly disabling per-type icons.autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx (2)
26-41: LGTM - Header restructure with Text components.The new header structure using Text components follows design system patterns correctly. The HeartIcon with
weight="fill"and the count display provide clear visual feedback.
4-4: Replace legacy Skeleton import with design system component.This imports from
__legacy__, which violates coding guidelines. Use the Skeleton component from the design system instead.As per coding guidelines: "Never use src/components/legacy/*"
autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx (2)
40-66: LGTM - Layout restructure successfully places favorite button next to menu.The changes correctly position the FavoriteButton and AgentCardMenu outside the NextLink wrapper with absolute positioning. This achieves the PR objective of placing the heart icon next to the kebab menu while keeping the avatar/name area clickable.
Layout verification:
- Parent container has
relativepositioning (line 38) ✓- FavoriteButton positioned at
right-10 top-0(line 64) ✓- AgentCardMenu positioned at
right-2 top-1(from relevant code) ✓- Both buttons properly isolated from link navigation ✓
27-27: Remove unusedisAgentFavoritingEnabledvariable.The
isAgentFavoritingEnabledvariable is destructured from the hook but never used in the component. This is dead code left over from removing the feature flag conditional rendering.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx (3)
34-42: Redundant!isLoadingcheck.Since line 24 already returns
nullwhenisLoadingis true, this condition will always be true when reached. You can simplify by removing the conditional wrapper.♻️ Suggested simplification
- {!isLoading && ( - <Text - variant="body" - data-testid="agents-count" - className="relative bottom-px text-zinc-500" - > - {agentCount} - </Text> - )} + <Text + variant="body" + data-testid="agents-count" + className="relative bottom-px text-zinc-500" + > + {agentCount} + </Text>
51-55: Consider using the design system'sLoadingSpinnerfor consistency.The custom spinner works, but the
InfiniteScrollcomponent already has a default loader usingLoadingSpinner. Using the design system component would ensure visual consistency across the app.
65-65: Redundant condition check.The condition
favoriteAgents.length > 0is always true at this point because line 24 returnsnullwhenfavoriteAgents.length === 0. The divider will always render when the component renders.♻️ Suggested simplification
- {favoriteAgents.length > 0 && <div className="!mt-10 border-t" />} + <div className="!mt-10 border-t" />
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (3)
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.tsautogpt_platform/frontend/src/app/(platform)/library/page.tsx
🧰 Additional context used
📓 Path-based instructions (8)
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: Always run pnpm install before frontend development, then use pnpm dev to start development server on port 3000
For frontend code formatting and linting, always run pnpm formatIf adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
autogpt_platform/frontend/**/*.{ts,tsx}: Use generated API hooks from@/app/api/__generated__/endpoints/for data fetching in frontend
Use function declarations (not arrow functions) for components and handlers in frontend
Only use Phosphor Icons in frontend; never use other icon libraries
Never usesrc/components/__legacy__/*or deprecatedBackendAPIin frontend
Files:
autogpt_platform/frontend/src/app/(platform)/library/page.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
autogpt_platform/frontend/**/*.{ts,tsx,json}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js 21+ with pnpm package manager for frontend development
Files:
autogpt_platform/frontend/src/app/(platform)/library/page.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Use generated API hooks from @/app/api/generated/endpoints/ (generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Use function declarations for components and handlers (not arrow functions). Only arrow functions for small inline lambdas (map, filter, etc.)
Use PascalCase for components, camelCase with use prefix for hooks
No barrel files or index.ts re-exports in frontend
For frontend render errors, use component. For mutation errors, display with toast notifications. For manual exceptions, use Sentry.captureException()
Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Files:
autogpt_platform/frontend/src/app/(platform)/library/page.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
autogpt_platform/frontend/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Format frontend code using
pnpm format
Files:
autogpt_platform/frontend/src/app/(platform)/library/page.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
autogpt_platform/frontend/**
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
autogpt_platform/frontend/**: Install frontend dependencies usingpnpm iinstead of npm
Generate API client from OpenAPI spec usingpnpm generate:api
Regenerate API client hooks usingpnpm generate:apiwhen OpenAPI spec changes
Files:
autogpt_platform/frontend/src/app/(platform)/library/page.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use design system components from
src/components/(atoms, molecules, organisms) in frontend
Files:
autogpt_platform/frontend/src/app/(platform)/library/page.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/src/app/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Create frontend pages in
src/app/(platform)/feature-name/page.tsxwith correspondingusePageName.tshook and localcomponents/subfolder
Files:
autogpt_platform/frontend/src/app/(platform)/library/page.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
autogpt_platform/frontend/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (autogpt_platform/CLAUDE.md)
Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Files:
autogpt_platform/frontend/src/app/(platform)/library/page.tsxautogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsxautogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
🧠 Learnings (8)
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Prefer design tokens over hardcoded values in frontend styling
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.tsx : Use Tailwind CSS utilities only for styling in frontend. Use design system components from src/components/ (atoms, molecules, organisms). Never use src/components/__legacy__/*
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx,css} : Use only Tailwind CSS for styling in frontend, with design tokens and Phosphor Icons
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use generated API hooks from @/app/api/__generated__/endpoints/ (generated via Orval from backend OpenAPI spec). Pattern: use{Method}{Version}{OperationName} (e.g., useGetV2ListLibraryAgents). Regenerate with: pnpm generate:api. Never use deprecated BackendAPI or src/lib/autogpt-server-api/*
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use PascalCase for components, camelCase with use prefix for hooks
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use generated API hooks from `@/app/api/__generated__/endpoints/` for data fetching in frontend
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
📚 Learning: 2025-11-25T08:48:33.246Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T08:48:33.246Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Default to client components (use client). Use server components only for SEO or extreme TTFB needs. Use React Query for server state via generated hooks. Co-locate UI state in components/hooks
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
📚 Learning: 2025-11-25T08:49:03.583Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/CLAUDE.md:0-0
Timestamp: 2025-11-25T08:49:03.583Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use function declarations (not arrow functions) for components and handlers in frontend
Applied to files:
autogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts
🧬 Code graph analysis (2)
autogpt_platform/frontend/src/app/(platform)/library/page.tsx (1)
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx (1)
FavoritesSection(14-68)
autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx (5)
autogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts (1)
useFavoriteAgents(12-48)autogpt_platform/frontend/src/components/atoms/Text/Text.tsx (1)
Text(15-35)autogpt_platform/frontend/src/components/contextual/InfiniteScroll/InfiniteScroll.tsx (1)
InfiniteScroll(29-73)autogpt_platform/frontend/src/lib/autogpt-server-api/types.ts (1)
LibraryAgent(488-517)autogpt_platform/frontend/src/app/(platform)/library/components/LibraryAgentCard/LibraryAgentCard.tsx (1)
LibraryAgentCard(22-130)
⏰ 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: chromatic
- GitHub Check: test
- GitHub Check: lint
- GitHub Check: types
- GitHub Check: Check PR Status
- GitHub Check: Analyze (python)
- GitHub Check: Seer Code Review
🔇 Additional comments (4)
autogpt_platform/frontend/src/app/(platform)/library/hooks/useFavoriteAgents.ts (2)
33-36:useMemodependency onallAgentsmay cause unnecessary recalculations.The
allAgentsarray is recreated on every render whenagentsQueryDatachanges (expected behavior). However, sinceallAgentsis derived directly fromagentsQueryData, you could depend onagentsQueryDatainstead for clearer intent, or this is acceptable as-is since React Query memoizes query data.This is minor and the current implementation works correctly.
41-46: Verify thathasNextPageand pagination behavior align with client-side filtering expectations.After client-side filtering,
hasNextPagestill reflects server pagination state, not whether there are more filtered results to show. This could lead to confusing UX where:
- User searches, sees filtered results
hasNextPageis true (server has more pages)- User scrolls to load more, but new page may have no matching results
This might be intentional (fetch all then filter), but verify this is the expected behavior for the favorites section.
autogpt_platform/frontend/src/app/(platform)/library/page.tsx (1)
9-27: LGTM!The page correctly wires
searchTermto bothFavoritesSectionandLibraryAgentList, ensuring consistent search behavior across the library. The component follows coding guidelines with function declaration and proper state management via the custom hook.autogpt_platform/frontend/src/app/(platform)/library/components/FavoritesSection/FavoritesSection.tsx (1)
24-26: Early return logic is clean and handles both loading and empty states.The combined condition
isLoading || favoriteAgents.length === 0correctly hides the section during loading and when there are no favorites, which aligns with the PR objective to always show favorites when available (feature flag removed).
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
3 participants
Changes 🏗️
...menuChecklist 📋
For code changes:
Summary by CodeRabbit
New Features
UI/UX Improvements
✏️ Tip: You can customize this high-level summary in your review settings.