fix(frontend): marketplace card description 3 lines + fallback color - #12557
Conversation
The description text on marketplace StoreCard was capped at 2 lines, which truncated useful context. Increase to 3 lines for better readability. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Change the StoreCard fallback background from bg-violet-50 to rgb(216, 208, 255) for missing agent images. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
WalkthroughModified the StoreCard component to adjust image placeholder styling and increase the description text visibility by changing the truncation from two lines to three lines. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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. 🟢 Low Risk — File Overlap OnlyThese PRs touch the same files but different sections (click to expand)
Summary: 0 conflict(s), 0 medium risk, 4 low risk (out of 4 PRs with file overlap) Auto-generated on push. Ignores: |
![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
🧹 Nitpick comments (1)
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx (1)
3-3: Replace legacy star rating icons with Phosphor Icons.The import from
@/components/__legacy__/ui/iconsviolates the guideline to never use legacy components and to only use Phosphor Icons for frontend icons. MigrateStarRatingIconsto use@phosphor-icons/react/Staror@phosphor-icons/react/StarFillinstead.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/app/`(platform)/marketplace/components/StoreCard/StoreCard.tsx at line 3, The file imports and uses a legacy StarRatingIcons component; remove the import from "@/components/__legacy__/ui/icons" and replace usages inside the StoreCard component (where StarRatingIcons is referenced) with Phosphor icons by importing Star and StarFill from "@phosphor-icons/react". Render filled stars with <StarFill> and empty/outline stars with <Star>, preserving existing props like size/className/title and mapping the rating logic currently driving StarRatingIcons to choose between StarFill and Star; ensure styling and accessibility (aria-hidden/aria-label) remain consistent with the original component.
🤖 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)/marketplace/components/StoreCard/StoreCard.tsx:
- Around line 82-85: The div inside the StoreCard component (the element with
className "absolute inset-0 rounded-xl") uses an inline style with rgb(216, 208,
255); replace this inline style with a Tailwind-based solution: either use an
existing Tailwind utility if a matching token exists (e.g., bg-violet-50) or add
a custom color token in tailwind.config.js (e.g., "agent-fallback": "rgb(216,
208, 255)") and update the div to use that class (or use Tailwind arbitrary
value syntax if this is a one-off). Ensure all styling is applied via Tailwind
classes and remove the style prop from the element.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/marketplace/components/StoreCard/StoreCard.tsx:
- Line 3: The file imports and uses a legacy StarRatingIcons component; remove
the import from "@/components/__legacy__/ui/icons" and replace usages inside the
StoreCard component (where StarRatingIcons is referenced) with Phosphor icons by
importing Star and StarFill from "@phosphor-icons/react". Render filled stars
with <StarFill> and empty/outline stars with <Star>, preserving existing props
like size/className/title and mapping the rating logic currently driving
StarRatingIcons to choose between StarFill and Star; ensure styling and
accessibility (aria-hidden/aria-label) remain consistent with the original
component.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e504e56d-6e60-4891-84b6-ce7bdbd06a60
📒 Files selected for processing (1)
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.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). (4)
- GitHub Check: integration_test
- GitHub Check: check API types
- GitHub Check: end-to-end tests
- 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 development
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.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)/marketplace/components/StoreCard/StoreCard.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
autogpt_platform/frontend/**/*.{ts,tsx}: Fully capitalize acronyms in symbols, e.g.graphID,useBackendAPI
Use function declarations (not arrow functions) for components and handlers
Nodark:Tailwind classes — the design system handles dark mode
Noanytypes unless the value genuinely can be anything
No linter suppressors (//@ts-ignore``,// eslint-disable) — fix the actual issue instead
Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this threshold
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/` following the pattern `use{Method}{Version}{OperationName}`; regenerate with `pnpm generate:api`
Use Tailwind CSS only for styling; use design tokens and Phosphor Icons only (no other icon libraries)
Do not use `useCallback` or `useMemo` unless asked to optimize a given function
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}: Format frontend code usingpnpm format
Never use components fromsrc/components/__legacy__/*Refer to
@frontend/CLAUDE.mdfor frontend-specific commands, architecture, and development patterns
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Structure components asComponentName/ComponentName.tsx+useComponentName.ts+helpers.tsand use design system components fromsrc/components/(atoms, molecules, organisms)
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}and regenerate withpnpm generate:api
Use function declarations (not arrow functions) for components and handlers
Separate render logic from business logic with component.tsx + useComponent.ts + helpers.ts structure
Colocate state when possible, avoid creating large components, use sub-components in local/componentsfolder
Avoid large hooks, abstract logic intohelpers.tsfiles when sensible
Use arrow functions only for callbacks, not for component declarations
Avoid comments at all times unless the code is very complex
Do not useuseCallbackoruseMemounless asked to optimize a given function
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should be
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.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)/marketplace/components/StoreCard/StoreCard.tsx
autogpt_platform/frontend/src/app/(platform)/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
If adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
autogpt_platform/frontend/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
autogpt_platform/frontend/**/*.tsx: Use Next.js<Link>for internal navigation — never raw<a>tags
Put sub-components in localcomponents/folder; component props should betype Props = { ... }(not exported) unless it needs to be used outside the component
Use design system components fromsrc/components/(atoms, molecules, organisms); never usesrc/components/__legacy__/*
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
autogpt_platform/frontend/src/**
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Avoid index and barrel files
Files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
🧠 Learnings (13)
📓 Common learnings
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: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12536
File: autogpt_platform/frontend/src/app/api/openapi.json:5770-5790
Timestamp: 2026-03-24T21:25:13.744Z
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.
📚 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)/marketplace/components/StoreCard/StoreCard.tsx
📚 Learning: 2026-03-19T12:07:49.237Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12462
File: autogpt_platform/frontend/src/app/(platform)/marketplace/components/AgentImages/AgentImage.tsx:17-21
Timestamp: 2026-03-19T12:07:49.237Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/marketplace/components/AgentImages/AgentImage.tsx`, the `images` array passed to `AgentImages` is static per agent detail page and does not change after mount. Therefore, index-based keying of `loadedThumbs` (a `Set<number>`) is sufficient and will not produce stale entries. Do not flag this as a potential stale-state issue due to index reuse.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
📚 Learning: 2026-03-20T09:30:38.372Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.372Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use Tailwind CSS only for styling; use design tokens and Phosphor Icons only (no other icon libraries)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
📚 Learning: 2026-03-20T09:30:38.372Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.372Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : No linter suppressors (`// ts-ignore`, `// eslint-disable`) — fix the actual issue instead
Applied to files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
📚 Learning: 2026-03-20T09:30:38.372Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.372Z
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)/marketplace/components/StoreCard/StoreCard.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 Tailwind CSS utilities only for styling in frontend components
Applied to files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css} : Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Applied to files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
📚 Learning: 2026-03-20T09:30:38.372Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.372Z
Learning: Applies to autogpt_platform/frontend/**/*.tsx : Put sub-components in local `components/` folder; 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)/marketplace/components/StoreCard/StoreCard.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/**/*.{stories.tsx,stories.ts} : Add/update Storybook stories for UI components in frontend development
Applied to files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx
📚 Learning: 2026-03-20T09:30:38.372Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.372Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Fully capitalize acronyms in symbols, e.g. `graphID`, `useBackendAPI`
Applied to files:
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.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)/marketplace/components/StoreCard/StoreCard.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)/marketplace/components/StoreCard/StoreCard.tsx
🔇 Additional comments (1)
autogpt_platform/frontend/src/app/(platform)/marketplace/components/StoreCard/StoreCard.tsx (1)
119-119: LGTM! Improved description visibility.The increase from 2 to 3 lines improves readability while using proper Tailwind utilities.
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
2 participants
Summary
bg-violet-50torgb(216, 208, 255)Test plan
pnpm format,pnpm lint,pnpm typesall pass🤖 Generated with Claude Code