feat(frontend): compact wallet popover for the new layout - #13699
Conversation
Replace the 28.5rem wallet panel with a compact popover when the wallet renders in the new sidebar layout. The classic navbar keeps the existing panel unchanged. - Extract task-group data into helpers.ts and the credits/confetti/websocket logic into useWallet.ts, shrinking Wallet.tsx from 360 to ~120 lines - Add WalletCompactPanel: balance, an Add credits row that opens TopUpDialog, and a collapsible Earn credits list - Collapse fully completed task groups into a single Done row via getEarnRows - Add an add-credits variant to TopUpDialog so opening it deliberately does not claim the user is out of credits
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
🚧 Files skipped from review as they are similar to previous changes (6)
📜 Recent review details⏰ Context from checks skipped due to timeout. (8)
WalkthroughThe wallet component delegates state, onboarding task processing, and panel rendering to dedicated helpers, a hook, and compact/full panels. Compact mode opens an add-credits dialog, while ChangesWallet refactor
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Wallet
participant useWallet
participant WalletCompactPanel
participant TopUpDialog
Wallet->>useWallet: obtain wallet state and task groups
useWallet-->>Wallet: return credits and formatted values
Wallet->>WalletCompactPanel: render compact wallet
WalletCompactPanel->>Wallet: request add credits
Wallet->>TopUpDialog: close wallet and open dialog
TopUpDialog-->>Wallet: report dialog close
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 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. 🔴 Merge Conflicts DetectedThe following PRs have been tested and will have merge conflicts if merged after this PR. Consider coordinating with the authors.
Summary: 2 conflict(s), 0 medium risk, 0 low risk (out of 2 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: 2
🧹 Nitpick comments (3)
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsx (1)
3-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winLegacy
ScrollAreaimport.
ScrollAreais pulled fromsrc/components/__legacy__/ui/scroll-area. As per path instructions,Never use src/components/__legacy__/* — use design system components from src/components/.Also applies to: 43-43
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsx` at line 3, Replace the legacy ScrollArea imports in WalletFullPanel with the corresponding design-system ScrollArea component from the non-legacy components path, and update both referenced usages/imports consistently.Source: Path instructions
autogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsx (1)
11-49: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winLGTM on the variant logic itself.
Consider adding a small test asserting the title/copy switch between
"out-of-credits"(default) and"add-credits", since there's no direct test coverage of this new branch yet.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsx` around lines 11 - 49, Add focused tests for TopUpDialog covering the default/"out-of-credits" variant and the explicit "add-credits" variant, asserting each renders its corresponding title and descriptive copy. Reuse the existing dialog test setup and verify the default behavior when variant is omitted.autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.ts (1)
28-28: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winPrefer
useMemooveruseState+useEffectforcompletedCount.
completedCountis purely derived fromgroups/state, same astotalCount(line 32-35). Using state+effect introduces an extra render wherecompletedCountstarts asnullbefore the effect runs, whereas auseMemowould compute it synchronously and avoid the transient null (which currently gates the reward-dot/tooltip inWallet.tsx).♻️ Proposed refactor
- const [completedCount, setCompletedCount] = useState<number | null>(null); - - const walletRef = useRef<HTMLButtonElement | null>(null); - - const totalCount = useMemo( - () => groups.reduce((acc, group) => acc + group.tasks.length, 0), - [groups], - ); - - useEffect(() => { - if (!state) { - return; - } - const completed = groups.reduce( - (acc, group) => - acc + - group.tasks.filter((task) => state?.completedSteps?.includes(task.id)) - .length, - 0, - ); - setCompletedCount(completed); - }, [groups, state]); + const walletRef = useRef<HTMLButtonElement | null>(null); + + const totalCount = useMemo( + () => groups.reduce((acc, group) => acc + group.tasks.length, 0), + [groups], + ); + + const completedCount = useMemo(() => { + if (!state) return null; + return groups.reduce( + (acc, group) => + acc + + group.tasks.filter((task) => state.completedSteps?.includes(task.id)) + .length, + 0, + ); + }, [groups, state]);Also applies to: 41-49
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.ts` at line 28, Replace the completedCount useState/useEffect derivation in the wallet hook with a useMemo calculation based on groups and state, matching the existing totalCount pattern. Compute the value synchronously so it does not transiently remain null and continue exposing the same completed-count behavior to the reward-dot and tooltip consumers.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsx`:
- Line 6: Replace the lucide-react X import and its usages in WalletFullPanel
with the corresponding -Icon-suffixed close icon imported from
`@phosphor-icons/react`, preserving the existing close-button behavior.
In
`@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.ts`:
- Line 22: Stabilize the WebSocket initialization in useWallet so onboarding
state changes do not repeatedly rerun the effect through the
groups/handleNotification dependency chain. Move api.connectWebSocket() into a
mount-only or otherwise stable effect, or ensure cleanup tracks only the active
WebSocket detacher so stale cleanups cannot close an existing connection.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsx`:
- Line 3: Replace the legacy ScrollArea imports in WalletFullPanel with the
corresponding design-system ScrollArea component from the non-legacy components
path, and update both referenced usages/imports consistently.
In
`@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.ts`:
- Line 28: Replace the completedCount useState/useEffect derivation in the
wallet hook with a useMemo calculation based on groups and state, matching the
existing totalCount pattern. Compute the value synchronously so it does not
transiently remain null and continue exposing the same completed-count behavior
to the reward-dot and tooltip consumers.
In
`@autogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsx`:
- Around line 11-49: Add focused tests for TopUpDialog covering the
default/"out-of-credits" variant and the explicit "add-credits" variant,
asserting each renders its corresponding title and descriptive copy. Reuse the
existing dialog test setup and verify the default behavior when variant is
omitted.
🪄 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 Plus
Run ID: 1f5a33d8-292b-4739-bed8-2eb625e41f95
📒 Files selected for processing (8)
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (9)
- GitHub Check: lint
- GitHub Check: integration_test
- GitHub Check: check API types
- GitHub Check: Seer Code Review
- GitHub Check: Check PR Status
- GitHub Check: end-to-end tests
- GitHub Check: Analyze (python)
- GitHub Check: check-overlaps
- GitHub Check: Analyze (typescript)
🧰 Additional context used
📓 Path-based instructions (17)
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
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Fully capitalize acronyms in symbols, e.g.graphID,useBackendAPI
No linter suppressors (//@ts-ignore``,// eslint-disable) — fix the actual issue
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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}: Use function declarations (not arrow functions) for components/handlers
Noanytypes unless the value genuinely can be anything
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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__/*
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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
autogpt_platform/frontend/src/**/*.{ts,tsx}: Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Always import the-Icon-suffixed alias from@phosphor-icons/react(e.g.TrashIcon,PlusIcon,SquareIcon) — bare exports are deprecated
Do not useuseCallbackoruseMemounless asked to optimize a given function
Never usesrc/components/__legacy__/*— use design system components fromsrc/components/
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
autogpt_platform/frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
autogpt_platform/frontend/**/*.{tsx,jsx}: Nodark:Tailwind classes — the design system handles dark mode
Use Next.js<Link>for internal navigation — never raw<a>tags
Use Tailwind CSS only for styling with design tokens and Phosphor Icons only
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
autogpt_platform/frontend/src/**/components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Put sub-components in local
components/folder; component props should betype Props = { ... }(not exported) unless used outside the component
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Structure components as
ComponentName/ComponentName.tsx+useComponentName.ts+helpers.ts
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Avoid index and barrel files
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}: Use Vitest + RTL + MSW for integration tests as the primary testing approach (~90%, page-level), use Playwright for E2E critical flows, and use Storybook for design system components
Run frontend integration tests withpnpm test:unit(Vitest + RTL + MSW)
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsx
autogpt_platform/frontend/src/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Use Orval-generated MSW handlers from
@/app/api/__generated__/endpoints/{tag}/{tag}.msw.tsfor API mocking
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.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/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.ts
autogpt_platform/frontend/src/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Do not type hook returns, let Typescript infer as much as possible
autogpt_platform/frontend/src/**/*.ts: Extract component logic into custom hooks grouped by concern, not by component, with each hook in its own.tsfile
Do not type hook returns; let TypeScript infer as much as possible
Files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.ts
🧠 Learnings (10)
📚 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/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.tsautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/useWallet.tsautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.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/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
📚 Learning: 2026-07-03T04:19:11.799Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13474
File: autogpt_platform/frontend/src/app/(platform)/PlatformChrome/PlatformChrome.tsx:38-38
Timestamp: 2026-07-03T04:19:11.799Z
Learning: When reviewing Tailwind usage in .tsx components, allow intentional raw hex color values if they exactly match the design-spec and there is no equivalent Tailwind design token/utility class available (e.g., a utility like `bg-zinc-50` may be a different shade than the required `#f9f9f9`). Do not flag these as "design-token violations" as long as the reviewer can confirm that an appropriate Tailwind token does not exist or would not match the exact color.
Applied to files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/TopUpDialog/TopUpDialog.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
📚 Learning: 2026-05-16T12:12:12.246Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13138
File: autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/helpers.tsx:1-1
Timestamp: 2026-05-16T12:12:12.246Z
Learning: Code reviews for the Navbar component set should treat the `MenuItemGroup` contract as shared between `AccountMenu` (desktop) and `MobileNavbar`. If a PR attempts to migrate `AccountMenu` off the legacy `IconType` imported from `src/components/__legacy__/ui/icons.tsx`, require that the migration be coordinated with `MobileNavbar` as part of the same follow-up change (or explicitly defer the `MobileNavbar` side to a dedicated follow-up PR) to avoid leaving the shared contract in an inconsistent state. Do not block an otherwise-complete `AccountMenu` PR solely due to the pending cross-consumer legacy `IconType` dependency.
Applied to files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx
📚 Learning: 2026-04-20T13:17:39.951Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12854
File: autogpt_platform/frontend/src/app/(platform)/library/__tests__/briefing.test.tsx:84-84
Timestamp: 2026-04-20T13:17:39.951Z
Learning: In the AutoGPT frontend, `testing-library/react` cleanup is already handled globally after each test via `src/tests/integrations/vitest.setup.tsx`. Therefore, for integration test files under `__tests__/`, do NOT add redundant `afterEach(() => cleanup())`. Only add local `afterEach` teardown for resources that are not covered globally—specifically, when using fake timers, add `afterEach(() => vi.useRealTimers())` (or equivalent) to restore real timers and prevent cross-test interference.
Applied to files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsx
📚 Learning: 2026-04-20T20:07:22.981Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/__tests__/ExecutionsTable.test.tsx:27-76
Timestamp: 2026-04-20T20:07:22.981Z
Learning: In this codebase, Orval-generated API modules under `src/app/api/__generated__/` are not committed to git and must be generated via `pnpm generate:api` (requires a running backend). In integration tests, it’s acceptable—and expected—to stub generated hooks/modules by mocking them with `vi.mock("`@/app/api/__generated__/endpoints/`{tag}/{tag}")`. Do not treat `vi.mock` of these generated hook modules as a violation of the MSW handler guideline, since the corresponding MSW handlers cannot be imported at test time when generated files are absent.
Applied to files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsx
🔇 Additional comments (5)
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/helpers.ts (1)
1-150: LGTM!autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletTaskGroups.tsx (1)
7-7: LGTM!autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletCompactPanel.tsx (1)
1-92: LGTM!autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/Wallet.tsx (1)
9-136: LGTM!autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/WalletCompactPanel.test.tsx (1)
1-159: LGTM!
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## dev #13699 +/- ##
==========================================
+ Coverage 76.64% 76.69% +0.04%
==========================================
Files 2715 2719 +4
Lines 207923 207952 +29
Branches 19947 19948 +1
==========================================
+ Hits 159370 159479 +109
+ Misses 44153 44059 -94
- Partials 4400 4414 +14
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}
|
Addressed the review round in 439d7e7, 3ed45bf and 9f1a566. Inline threads
Nitpicks
Coverage Local coverage on the touched files:
38 tests pass across the wallet and top-up suites; |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsx (1)
7-11: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse a function declaration for the mocked component.
TopUpFormis a React component and is currently declared as an arrow function. As per coding guidelines, frontend components and handlers must use function declarations rather than arrow functions.Proposed fix
-vi.mock("../TopUpForm/TopUpForm", () => ({ - TopUpForm: ({ submitLabel }: { submitLabel?: string }) => ( - <button type="submit">{submitLabel}</button> - ), -})); +vi.mock("../TopUpForm/TopUpForm", () => { + function MockTopUpForm({ submitLabel }: { submitLabel?: string }) { + return <button type="submit">{submitLabel}</button>; + } + + return { TopUpForm: MockTopUpForm }; +});🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsx` around lines 7 - 11, Update the mocked TopUpForm component in the vi.mock factory to use a named function declaration instead of an arrow function, preserving its submitLabel prop and rendered button behavior.Source: Coding guidelines
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx (2)
116-121: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winTest only covers the
credits === nullhalf of the render-nothing condition.The test title claims both "credits and onboarding state" gate rendering, but only
creditsState.creditsis nulled;onboardingState.statestays truthy (buildOnboarding()). The!statebranch ofif (credits === null || !state) return null;inWallet.tsxis never exercised.Suggested addition
it("renders nothing until credits and onboarding state are both available", () => { creditsState.credits = null; const { container } = render(<Wallet />); expect(container.innerHTML).toBe(""); }); + + it("renders nothing until onboarding state is available", () => { + onboardingState.state = null; + const { container } = render(<Wallet />); + + expect(container.innerHTML).toBe(""); + });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx` around lines 116 - 121, Update the “renders nothing until credits and onboarding state are both available” test to also set onboardingState.state to null and assert Wallet renders no content, thereby covering the !state branch alongside the existing credits === null case.
1-262: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winFile exceeds the ~200-line guideline for
src/**/*.{ts,tsx}.At 262 lines, consider splitting along the existing
describeboundaries, e.g. keep rendering/interaction tests here and move the "Wallet onboarding notifications" block into a separateWallet.notifications.test.tsx, sharing the mock setup via a small test-utils module. As per coding guidelines, "Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx` around lines 1 - 262, Split the Wallet test file at its existing describe boundaries to keep the rendering and interaction tests separate from the “Wallet onboarding notifications” tests. Move the notification suite into a dedicated Wallet.notifications.test.tsx file, and extract the shared mocks/setup such as backendAPI, creditsState, onboardingState, and beforeEach into a small test utility module reused by both files.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsx`:
- Around line 57-63: Update the “calls onClose when the dialog is dismissed”
test to assert that the onClose mock is called exactly once after pressing
Escape, replacing the loose invocation assertion while preserving the existing
setup and dismissal flow.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx`:
- Around line 116-121: Update the “renders nothing until credits and onboarding
state are both available” test to also set onboardingState.state to null and
assert Wallet renders no content, thereby covering the !state branch alongside
the existing credits === null case.
- Around line 1-262: Split the Wallet test file at its existing describe
boundaries to keep the rendering and interaction tests separate from the “Wallet
onboarding notifications” tests. Move the notification suite into a dedicated
Wallet.notifications.test.tsx file, and extract the shared mocks/setup such as
backendAPI, creditsState, onboardingState, and beforeEach into a small test
utility module reused by both files.
In
`@autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsx`:
- Around line 7-11: Update the mocked TopUpForm component in the vi.mock factory
to use a named function declaration instead of an arrow function, preserving its
submitLabel prop and rendered button behavior.
🪄 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 Plus
Run ID: d2eb9fc6-2041-46b8-8a62-40b28b9a8edf
📒 Files selected for processing (2)
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsxautogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsx
📜 Review details
⏰ Context from checks skipped due to timeout. (8)
- GitHub Check: setup
- GitHub Check: end-to-end tests
- GitHub Check: setup
- GitHub Check: Seer Code Review
- GitHub Check: check-overlaps
- GitHub Check: Analyze (typescript)
- GitHub Check: Analyze (python)
- GitHub Check: Check PR Status
🧰 Additional context used
📓 Path-based instructions (15)
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
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Fully capitalize acronyms in symbols, e.g.graphID,useBackendAPI
No linter suppressors (//@ts-ignore``,// eslint-disable) — fix the actual issue
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
autogpt_platform/frontend/**/*.{tsx,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{tsx,ts}: Use function declarations for components and handlers (not arrow functions) in React components
Only use arrow functions for small inline lambdas (map, filter, etc.) in React components
Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Use Tailwind CSS utilities only for styling in frontend components
Use design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Never use 'src/components/legacy/' in frontend code
Only use Phosphor Icons (@phosphor-icons/react) for icons in frontend components
Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/'
Use React Query for server state (via generated hooks) in frontend development
Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Use '' component for rendering errors in frontend UI; use toast notifications for mutation errors; use 'Sentry.captureException()' for manual exceptions
Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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}: Use function declarations (not arrow functions) for components/handlers
Noanytypes unless the value genuinely can be anything
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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__/*
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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
autogpt_platform/frontend/src/**/*.{ts,tsx}: Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}
Always import the-Icon-suffixed alias from@phosphor-icons/react(e.g.TrashIcon,PlusIcon,SquareIcon) — bare exports are deprecated
Do not useuseCallbackoruseMemounless asked to optimize a given function
Never usesrc/components/__legacy__/*— use design system components fromsrc/components/
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{test,spec}.{ts,tsx}: Use Vitest + RTL + MSW for integration tests as the primary testing approach (~90%, page-level), use Playwright for E2E critical flows, and use Storybook for design system components
Run frontend integration tests withpnpm test:unit(Vitest + RTL + MSW)
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
autogpt_platform/frontend/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
autogpt_platform/frontend/**/*.{tsx,jsx}: Nodark:Tailwind classes — the design system handles dark mode
Use Next.js<Link>for internal navigation — never raw<a>tags
Use Tailwind CSS only for styling with design tokens and Phosphor Icons only
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
autogpt_platform/frontend/src/**/components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Put sub-components in local
components/folder; component props should betype Props = { ... }(not exported) unless used outside the component
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
autogpt_platform/frontend/src/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Structure components as
ComponentName/ComponentName.tsx+useComponentName.ts+helpers.ts
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
autogpt_platform/frontend/src/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Use Orval-generated MSW handlers from
@/app/api/__generated__/endpoints/{tag}/{tag}.msw.tsfor API mocking
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Avoid index and barrel files
Files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
🧠 Learnings (11)
📚 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/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
📚 Learning: 2026-07-28T15:32:54.931Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13699
File: autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/components/WalletFullPanel.tsx:0-0
Timestamp: 2026-07-28T15:32:54.931Z
Learning: In AutoGPT's frontend (autogpt_platform/frontend), prefer importing the non-legacy ScrollArea component from `@/components/ui/scroll-area` over `@/components/__legacy__/ui/scroll-area` for new or migrated code. The non-legacy component is a drop-in superset: it preserves the legacy component’s props and additionally supports the optional `showScrollToTop` prop—so reviewers should flag new legacy imports unless there’s a specific, documented reason they can’t use the non-legacy version.
Applied to files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.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/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
📚 Learning: 2026-07-03T04:19:11.799Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13474
File: autogpt_platform/frontend/src/app/(platform)/PlatformChrome/PlatformChrome.tsx:38-38
Timestamp: 2026-07-03T04:19:11.799Z
Learning: When reviewing Tailwind usage in .tsx components, allow intentional raw hex color values if they exactly match the design-spec and there is no equivalent Tailwind design token/utility class available (e.g., a utility like `bg-zinc-50` may be a different shade than the required `#f9f9f9`). Do not flag these as "design-token violations" as long as the reviewer can confirm that an appropriate Tailwind token does not exist or would not match the exact color.
Applied to files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
📚 Learning: 2026-04-20T13:17:39.951Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12854
File: autogpt_platform/frontend/src/app/(platform)/library/__tests__/briefing.test.tsx:84-84
Timestamp: 2026-04-20T13:17:39.951Z
Learning: In the AutoGPT frontend, `testing-library/react` cleanup is already handled globally after each test via `src/tests/integrations/vitest.setup.tsx`. Therefore, for integration test files under `__tests__/`, do NOT add redundant `afterEach(() => cleanup())`. Only add local `afterEach` teardown for resources that are not covered globally—specifically, when using fake timers, add `afterEach(() => vi.useRealTimers())` (or equivalent) to restore real timers and prevent cross-test interference.
Applied to files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
📚 Learning: 2026-04-20T20:07:22.981Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/__tests__/ExecutionsTable.test.tsx:27-76
Timestamp: 2026-04-20T20:07:22.981Z
Learning: In this codebase, Orval-generated API modules under `src/app/api/__generated__/` are not committed to git and must be generated via `pnpm generate:api` (requires a running backend). In integration tests, it’s acceptable—and expected—to stub generated hooks/modules by mocking them with `vi.mock("`@/app/api/__generated__/endpoints/`{tag}/{tag}")`. Do not treat `vi.mock` of these generated hook modules as a violation of the MSW handler guideline, since the corresponding MSW handlers cannot be imported at test time when generated files are absent.
Applied to files:
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsxautogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
📚 Learning: 2026-05-16T12:12:12.246Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13138
File: autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/helpers.tsx:1-1
Timestamp: 2026-05-16T12:12:12.246Z
Learning: Code reviews for the Navbar component set should treat the `MenuItemGroup` contract as shared between `AccountMenu` (desktop) and `MobileNavbar`. If a PR attempts to migrate `AccountMenu` off the legacy `IconType` imported from `src/components/__legacy__/ui/icons.tsx`, require that the migration be coordinated with `MobileNavbar` as part of the same follow-up change (or explicitly defer the `MobileNavbar` side to a dedicated follow-up PR) to avoid leaving the shared contract in an inconsistent state. Do not block an otherwise-complete `AccountMenu` PR solely due to the pending cross-consumer legacy `IconType` dependency.
Applied to files:
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx
🔇 Additional comments (4)
autogpt_platform/frontend/src/components/layout/TopUpPrompt/__tests__/TopUpDialog.test.tsx (1)
1-5: LGTM!Also applies to: 13-55
autogpt_platform/frontend/src/components/layout/Navbar/components/Wallet/__tests__/Wallet.test.tsx (3)
1-113: LGTM!
123-190: LGTM! Assertions line up withonWalletOpen, the!compactreward-dot/tooltip gating, and thewalletShownguard inuseWallet.ts/Wallet.tsx.
193-262: Solid regression coverage for the stable-subscription fix.The "subscribes once and keeps the connection across onboarding updates" test (lines 201-218) correctly targets the
notificationReffix: it verifiesonWebSocketMessage/connectWebSocketare called exactly once even after an onboarding state change that would previously have re-createdhandleNotificationand torn down/reattached the listener. The confetti-gating and unmount-detach tests likewise matchuseWallet.tsbehavior precisely.
0ubbe
left a comment
0ubbe
left a comment
There was a problem hiding this comment.
Nice 🏁 , a couple of nits ☕️
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 👍🏼 Mergeable
in AutoGPT development kanban
The wallet PR accidentally carried local flag toggles: AGENT_BRIEFING true -> false and TASK_PROGRESS_BAR false -> true. Neither is used by the wallet. Restore both to their dev values so no flag defaults on when LaunchDarkly fails to resolve.
…p state Per review: useCallback/useMemo are not the house style here, so groups, totalCount and completedCount are plain derived values and the handlers are function declarations. The notification ref is now refreshed on every render, which keeps the websocket subscription mounted exactly as before. The TopUpDialog open state and its handlers move out of Wallet.tsx into the hook, leaving the component render-only.
|
/reapprove |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Re-approved at the request of @Abhi1992002 (#13699 (comment))
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
2 participants
Why / What / How
Why. The wallet popover is
28.5remwide with an inline top-up form, an auto-refill config form, collapsible task groups, embedded videos and progress bars. That was designed for the classic top navbar. In the new sidebar layout the wallet lives in the sidebar footer as a small$1.00pill, and opening it throws a panel wider than the sidebar itself over the page. It's far too heavy for what a user wants there: how many credits do I have, how do I get more.What. A compact popover used only when the wallet renders in the new layout (
compactprop, set bySidebarUserActions). The classic navbar keeps the existing panel, byte-for-byte.How.
Wallet.tsxhad grown to 360 lines mixing trigger markup, popover content, credits fetching, confetti and websocket wiring. Rather than add a second panel to it, the shared parts were pulled out first:helpers.ts— task-group definitions +getEarnRows()useWallet.ts— credits, balance-flash, completion counts, onboarding websocket + confetticomponents/WalletFullPanel.tsx— the existing classic panel, moved verbatimcomponents/WalletCompactPanel.tsx— the new oneWallet.tsxis now ~120 lines and just picks a panel.The compact panel shows three things: balance, an Add credits row, and a collapsible Earn credits list. To keep the list short,
getEarnRows()flattens the three task groups — a group with every task done collapses to oneFirst Wins · 3 of 3 — Donerow, while a group still in progress contributes one row per task.Add credits opens
TopUpDialoginstead of embeddingTopUpForminline. That dialog's copy was hardcoded to "You're out of automation credits", which is wrong when you open it deliberately with a positive balance, so it gained anadd-creditsvariant. Default is unchanged, so the low-credit banner and daily auto-opener read exactly as before.Completed rows reuse
SealCheckIcon(weight="fill",#00a656) from the copilotTaskProgressBar's "All tasks complete" header, so completion reads the same across the app.Changes 🏗️
WalletCompactPanel— balance, Add credits row, collapsible Earn credits list; rendered whencompactis set (new layout only)getEarnRows()to flatten task groups; completed groups collapse to a single Done rowhelpers.ts(task groups + row flattening) anduseWallet.ts(credits, confetti, websocket) out ofWallet.tsx; move the classic panel toWalletFullPanel.tsx.Wallet.tsx360 → ~120 linesside="top" align="start"at22remwithrounded-2xlarge, sized so long task names wrap rather than truncatevariantprop toTopUpDialog(out-of-creditsdefault |add-credits) so the wallet entry point gets accurate copySealCheckIcon/CircleIconfrom the copilot task-progress treatment for row statusTask/TaskGroupinterfaces moved fromWallet.tsxtohelpers.ts(only importer,WalletTaskGroups.tsx, updated)No backend changes. No API changes. Reward amounts are unchanged and still mirror
backend/data/onboarding.py.Checklist 📋
For code changes:
pnpm format,pnpm lint,pnpm typescleanpnpm test:unit— 379 files passWalletCompactPanel.test.tsx: row flattening (completed group collapses, in-progress group lists tasks, no task dropped), panel render, accordion collapse, Add credits callbackAUTOGPT_NEW_LAYOUTon): open the wallet from the sidebar footer — compact panel opens up and to the right, fits the viewport, long task names wrapENABLE_PLATFORM_PAYMENToff — Add credits row is hidden, rest of the panel still rendersAUTOGPT_NEW_LAYOUToff): wallet is visually unchanged — inline top-up, auto-refill, task videos, progress bars, confetti on step completion