feat(frontend): mobile AutoPilot parity + builder warning - #13232
Conversation
Adds a dismissible full-screen overlay on /build for viewports below the lg breakpoint, mirroring the auth MobileWarningBanner styling. The builder canvas relies on interactions that don't work well on a phone; this surfaces that expectation without hard-blocking access.
…bile Mounts the desktop UsagePopover and NotificationToggle inside the MobileDrawer header so mobile users get the same controls as desktop, just relocated into the chat drawer. Removes the duplicated standalone sound toggle since NotificationToggle's popover already manages sound.
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
🔍 PR Overlap DetectionThis check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early. 🟢 Low Risk — File Overlap OnlyThese PRs touch the same files but different sections (click to expand)
Summary: 0 conflict(s), 0 medium risk, 2 low risk (out of 2 PRs with file overlap) Auto-generated on push. Ignores: |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds a dismissible MobileWarning dialog on Builder page for small breakpoints and refactors the MobileDrawer header to remove the sound toggle and render UsagePopover and NotificationToggle. Both changes include Vitest + React Testing Library tests. ChangesMobile User Experience Improvements
Sequence Diagram(s)sequenceDiagram
participant MobileDrawer
participant Store as useCopilotUIStore
participant UsagePopover
participant NotificationToggle
MobileDrawer->>Store: update selector (remove isSoundEnabled/toggleSound)
MobileDrawer->>UsagePopover: render UsagePopover
MobileDrawer->>NotificationToggle: render NotificationToggle
MobileDrawer->>MobileDrawer: render search toggle and close button
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate 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 |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## dev #13232 +/- ##
=======================================
Coverage 72.59% 72.59%
=======================================
Files 2350 2352 +2
Lines 175007 175031 +24
Branches 17709 17710 +1
=======================================
+ Hits 127039 127058 +19
- Misses 44205 44217 +12
+ Partials 3763 3756 -7
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
![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)/build/components/MobileWarning/MobileWarning.tsx (1)
20-49: 💤 Low valueConsider basic focus management for the modal.
The overlay declares
role="dialog"/aria-modal="true"but doesn't move focus to the dialog (or the dismiss button) on mount, nor trap focus / handleEscape. Keyboard/screen-reader users can still tab into the obscured builder behind it. Low priority since the builder isn't usable on mobile anyway, but worth a quick focus-on-mount on the "Continue anyway" button.🤖 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/app/`(platform)/build/components/MobileWarning/MobileWarning.tsx around lines 20 - 49, The modal should move focus to the "Continue anyway" button on mount and handle Escape to dismiss: in the MobileWarning component create a ref (e.g., continueButtonRef) for the Button with the "Continue anyway" label, call continueButtonRef.current?.focus() inside a useEffect on mount, and add a keydown listener in that effect to call setIsDismissed(true) when Escape is pressed; clean up the listener on unmount. This gives basic focus management without a full focus trap while keeping the existing role="dialog" / aria-modal intact.
🤖 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/app/`(platform)/build/components/MobileWarning/MobileWarning.tsx:
- Line 6: Import and use the Phosphor alias with the -Icon suffix: replace the
DeviceMobile import and usage in MobileWarning.tsx with DeviceMobileIcon to
match `@phosphor-icons/react`@2.1.10 exports; also address the role="dialog"
accessibility gap in the MobileWarning component by adding keyboard and focus
management (trap focus within the dialog, handle Escape to close, and set an
initial focus target) or replace the custom markup with the project’s
design-system Dialog component to get built‑in focus/escape behavior.
---
Nitpick comments:
In
`@autogpt_platform/frontend/src/app/`(platform)/build/components/MobileWarning/MobileWarning.tsx:
- Around line 20-49: The modal should move focus to the "Continue anyway" button
on mount and handle Escape to dismiss: in the MobileWarning component create a
ref (e.g., continueButtonRef) for the Button with the "Continue anyway" label,
call continueButtonRef.current?.focus() inside a useEffect on mount, and add a
keydown listener in that effect to call setIsDismissed(true) when Escape is
pressed; clean up the listener on unmount. This gives basic focus management
without a full focus trap while keeping the existing role="dialog" / aria-modal
intact.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f71bfeea-01d0-48d6-bc00-09c39a816f80
📒 Files selected for processing (5)
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.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). (1)
- GitHub Check: Seer Code Review
🧰 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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
autogpt_platform/frontend/**/*.{tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
autogpt_platform/frontend/src/app/**/__tests__/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/AGENTS.md)
Write integration tests in
__tests__/next topage.tsxusing Vitest + RTL + MSW for new pages/features
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
autogpt_platform/frontend/src/app/(platform)/**/page.tsx
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/app/(platform)/**/page.tsx: Create pages insrc/app/(platform)/feature-name/page.tsxwithusePageName.tshook for logic and sub-components in localcomponents/folder
If adding protected frontend routes, updatefrontend/lib/supabase/middleware.tsCreate pages in
src/app/(platform)/feature-name/page.tsx
Files:
autogpt_platform/frontend/src/app/(platform)/build/page.tsx
🧠 Learnings (11)
📚 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)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/build/page.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.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/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsx
📚 Learning: 2026-03-24T02:23:31.305Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12526
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/RateLimitResetDialog/RateLimitResetDialog.tsx:0-0
Timestamp: 2026-03-24T02:23:31.305Z
Learning: In the Copilot platform UI code, follow the established Orval hook `onError` error-handling convention: first explicitly detect/handle `ApiError`, then read `error.response?.detail` (if present) as the primary message; if not available, fall back to `error.message`; and finally fall back to a generic string message. This convention should be used for generated Orval hooks even if the custom Orval mutator already maps details into `ApiError.message`, to keep consistency across hooks/components (e.g., `useCronSchedulerDialog.ts`, `useRunGraph.ts`, and rate-limit/reset flows).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
📚 Learning: 2026-03-31T14:04:42.444Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12623
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatInput/ChatInput.tsx:172-177
Timestamp: 2026-03-31T14:04:42.444Z
Learning: In the Copilot frontend components under autogpt_platform/frontend/src/app/(platform)/copilot/, Tailwind dark mode variants (e.g., `dark:*`) are intentional and should be allowed. Do not flag `dark:` utilities in these Copilot UI components as incorrect; they are used to ensure proper contrast and correct behavior in both light and dark themes.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsxautogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx
🔇 Additional comments (4)
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsx (1)
1-39: LGTM!autogpt_platform/frontend/src/app/(platform)/build/page.tsx (1)
4-12: LGTM!autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx (1)
26-28: LGTM!Also applies to: 107-109
autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/__tests__/MobileDrawerControls.test.tsx (1)
80-101: LGTM!
…ria-modal Replaces the deprecated DeviceMobile import with DeviceMobileIcon per the project's -Icon alias convention, and removes role="dialog" / aria-modal="true" from MobileWarning since the overlay is dismissible and doesn't actually trap focus or handle Escape. role="alert" captures the warning semantics honestly without promising modal behavior the component doesn't implement.
kcze
changed the title
Replaces the hand-rolled amber overlay with the design system Dialog, which renders as a vaul Drawer (slides up from the bottom) on mobile. This is a more native-feeling mobile pattern and brings proper focus management / escape handling for free.
…bove mobile drawer The Radix Popover default z-50 sits under the vaul Drawer overlay (z-60) and content (z-70), so the usage and notification popovers rendered behind the drawer's blur when triggered from the mobile drawer header. Bumps both to z-80 so they layer on top.
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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/app/`(platform)/build/components/MobileWarning/MobileWarning.tsx:
- Around line 31-32: In MobileWarning (component MobileWarning.tsx) replace the
hardcoded palette classes on DeviceMobileIcon and Text—swap "text-amber-600" for
the semantic token class (e.g., "text-accent") and swap "text-zinc-700" for the
semantic muted text token (e.g., "text-muted-foreground") so the icon and
message use the design-system CSS-vars and will respect dark-mode theming.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6fad56f2-a51f-4ebe-9dc8-69c0dd8eafaf
📒 Files selected for processing (2)
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsxautogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/__tests__/MobileWarning.test.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/tests/MobileWarning.test.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). (8)
- GitHub Check: integration_test
- GitHub Check: lint
- GitHub Check: check API types
- GitHub Check: Seer Code Review
- GitHub Check: Analyze (python)
- GitHub Check: Analyze (typescript)
- 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 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/app/(platform)/build/components/MobileWarning/MobileWarning.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)/build/components/MobileWarning/MobileWarning.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/app/(platform)/build/components/MobileWarning/MobileWarning.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/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
autogpt_platform/frontend/**/*.{tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should use
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.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)/build/components/MobileWarning/MobileWarning.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/app/(platform)/build/components/MobileWarning/MobileWarning.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/app/(platform)/build/components/MobileWarning/MobileWarning.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/app/(platform)/build/components/MobileWarning/MobileWarning.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/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
🧠 Learnings (30)
📓 Common learnings
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx:5-5
Timestamp: 2026-04-01T16:01:28.873Z
Learning: In Significant-Gravitas/AutoGPT, the `IconType` import from `@/components/__legacy__/ui/icons` in `autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx` is pre-existing and used by `MobileNavBar` for icon prop construction. Migrating it to Phosphor Icons requires a separate refactor of `MobileNavBar` and should not be flagged as a blocking issue in PRs that do not touch `MobileNavBar`.
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 0
File: :0-0
Timestamp: 2026-05-12T09:59:51.200Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/useSendMessage.ts`, the pending-first-send stall watchdog logic was intentionally kept inline (not extracted to a separate `usePendingFirstSendWatchdog` hook) to comply with the AGENTS.md rule of keeping out-of-scope changes under 20% in a bug-fix PR. The file was already ~190 lines before this PR; the watchdog adds ~40 lines. A follow-up PR is planned to extract the watchdog into a dedicated hook. Do not flag the watchdog's inline placement in `useSendMessage.ts` as a refactor opportunity in the current PR context.
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12856
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/ArtifactPanel/components/ArtifactErrorBoundary.tsx:70-97
Timestamp: 2026-04-20T16:41:41.946Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/components/ArtifactPanel/components/ArtifactErrorBoundary.tsx`, the hand-rolled alert fallback (rather than `<ErrorCard />`) is intentional. `ErrorCard`'s `ActionButtons` only offers Try Again / Report Error / Get Help; the artifact error boundary requires a "Copy error details" affordance so users can paste the error back to the agent. `ErrorCard`'s styling also assumes a full-page context and is unsuitable for the panel's narrow column. Do not flag this as a violation of the ErrorCard guideline. A future follow-up should extend `ErrorCard` with a custom-action slot to unify both surfaces.
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13100
File: autogpt_platform/frontend/src/components/molecules/PlanCard/PlanCard.tsx:35-39
Timestamp: 2026-05-13T08:06:50.288Z
Learning: In Significant-Gravitas/AutoGPT frontend (`autogpt_platform/frontend`), the per-card "Save X%" + struck-through original-monthly-price row was intentionally removed from `PlanCard.tsx` (commit 696b11705, PR `#13100`). The yearly discount is surfaced once on the Yearly billing toggle in `SubscriptionStep.tsx` (line 65) and `PaywallModal.tsx` (line 75) instead. `originalMonthlyPrice` and `yearlyDiscountPercent` are still returned by `computePlanPricing` for other consumers but are no longer consumed in `PlanCard`. Do not flag this as a regression in future reviews.
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 13208
File: autogpt_platform/frontend/src/components/layout/TopUpPrompt/useTopUpPrompt.ts:0-0
Timestamp: 2026-05-25T09:18:20.228Z
Learning: In `autogpt_platform/frontend/src/components/layout/TopUpPrompt/useTopUpPrompt.ts`, `useTopUpPrompt` intentionally uses graceful degradation: when called outside a `TopUpPromptProvider` it returns an inert `{ isOutOfCredits: false, openTopUp: noop }` fallback instead of throwing. This is by design — `LowCreditBanner` is optional UI and should never white-screen a page if the provider is absent. The real `TopUpPromptProvider` is always mounted in the platform layout (`autogpt_platform/frontend/src/app/(platform)/layout.tsx`) for production. Do not flag the missing-provider fallback as a bug.
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:7-37
Timestamp: 2026-04-15T22:49:27.673Z
Learning: In autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/, the legacy imports `Dialog`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogTitle` from `@/components/__legacy__/ui/dialog` are intentional and acceptable because the design system has no direct Dialog equivalent yet. Do not flag these as blocking issues in admin diagnostics components until a design-system Dialog is available.
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12440
File: autogpt_platform/backend/backend/copilot/workflow_import/converter.py:0-0
Timestamp: 2026-03-17T10:57:12.953Z
Learning: In Significant-Gravitas/AutoGPT PR `#12440`, `autogpt_platform/backend/backend/copilot/workflow_import/converter.py` was fully rewritten (commit 732960e2d) to no longer make direct LLM/OpenAI API calls. The converter now builds a structured text prompt for AutoPilot/CoPilot instead. There is no `response.choices` access or any direct LLM client usage in this file. Do not flag `response.choices` access or LLM client initialization patterns as issues in this file.
📚 Learning: 2026-04-01T16:01:28.873Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx:5-5
Timestamp: 2026-04-01T16:01:28.873Z
Learning: In Significant-Gravitas/AutoGPT, the `IconType` import from `@/components/__legacy__/ui/icons` in `autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx` is pre-existing and used by `MobileNavBar` for icon prop construction. Migrating it to Phosphor Icons requires a separate refactor of `MobileNavBar` and should not be flagged as a blocking issue in PRs that do not touch `MobileNavBar`.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-15T22:49:27.673Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:7-37
Timestamp: 2026-04-15T22:49:27.673Z
Learning: In autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/, the legacy imports `Dialog`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogTitle` from `@/components/__legacy__/ui/dialog` are intentional and acceptable because the design system has no direct Dialog equivalent yet. Do not flag these as blocking issues in admin diagnostics components until a design-system Dialog is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-30T03:25:37.624Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-30T03:25:37.624Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx,js,jsx} : No linter suppressors (`// ts-ignore`, `// eslint-disable`) — fix the actual issue
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.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 '<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)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-05-25T09:18:20.228Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 13208
File: autogpt_platform/frontend/src/components/layout/TopUpPrompt/useTopUpPrompt.ts:0-0
Timestamp: 2026-05-25T09:18:20.228Z
Learning: In `autogpt_platform/frontend/src/components/layout/TopUpPrompt/useTopUpPrompt.ts`, `useTopUpPrompt` intentionally uses graceful degradation: when called outside a `TopUpPromptProvider` it returns an inert `{ isOutOfCredits: false, openTopUp: noop }` fallback instead of throwing. This is by design — `LowCreditBanner` is optional UI and should never white-screen a page if the provider is absent. The real `TopUpPromptProvider` is always mounted in the platform layout (`autogpt_platform/frontend/src/app/(platform)/layout.tsx`) for production. Do not flag the missing-provider fallback as a bug.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-15T22:50:11.883Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/DiagnosticsContent.tsx:4-11
Timestamp: 2026-04-15T22:50:11.883Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/DiagnosticsContent.tsx`, the design system Card at `@/components/atoms/Card/Card.tsx` only exports `Card` (a simple wrapper div with no sub-components). `CardHeader`, `CardTitle`, `CardContent`, and `CardDescription` only exist in `@/components/__legacy__/ui/card`. The correct pattern is to import `Card` from the design system and the sub-components from legacy until the design system Card is extended. Do not flag this split import as a blocking issue.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-08T17:27:45.740Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-04-08T17:27:45.740Z
Learning: Applies to autogpt_platform/frontend/src/**/*.tsx : Component props should use `interface Props { ... }` (not exported) unless the interface needs to be used outside the component
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-05-12T09:59:51.200Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 0
File: :0-0
Timestamp: 2026-05-12T09:59:51.200Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/useSendMessage.ts`, the pending-first-send stall watchdog logic was intentionally kept inline (not extracted to a separate `usePendingFirstSendWatchdog` hook) to comply with the AGENTS.md rule of keeping out-of-scope changes under 20% in a bug-fix PR. The file was already ~190 lines before this PR; the watchdog adds ~40 lines. A follow-up PR is planned to extract the watchdog into a dedicated hook. Do not flag the watchdog's inline placement in `useSendMessage.ts` as a refactor opportunity in the current PR context.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-20T16:41:41.946Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12856
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/ArtifactPanel/components/ArtifactErrorBoundary.tsx:70-97
Timestamp: 2026-04-20T16:41:41.946Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/components/ArtifactPanel/components/ArtifactErrorBoundary.tsx`, the hand-rolled alert fallback (rather than `<ErrorCard />`) is intentional. `ErrorCard`'s `ActionButtons` only offers Try Again / Report Error / Get Help; the artifact error boundary requires a "Copy error details" affordance so users can paste the error back to the agent. `ErrorCard`'s styling also assumes a full-page context and is unsuitable for the panel's narrow column. Do not flag this as a violation of the ErrorCard guideline. A future follow-up should extend `ErrorCard` with a custom-action slot to unify both surfaces.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-30T03:25:37.624Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-30T03:25:37.624Z
Learning: Applies to autogpt_platform/frontend/src/**/components/**/*.{tsx,jsx} : Put sub-components in local `components/` folder; component props should be `type Props = { ... }` (not exported) unless used outside the component
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-30T03:25:37.624Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/AGENTS.md:0-0
Timestamp: 2026-04-30T03:25:37.624Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Always import the `-Icon`-suffixed alias from `phosphor-icons/react` (e.g. `TrashIcon`, `PlusIcon`, `SquareIcon`) — bare exports are deprecated
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-27T07:27:21.434Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 12924
File: autogpt_platform/frontend/src/app/(platform)/settings/profile/components/LinksSection/LinksSection.tsx:0-0
Timestamp: 2026-04-27T07:27:21.434Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/settings/profile/components/LinksSection/LinksSection.tsx`, the raw `<input type="url">` elements are intentional: each row requires a `LinkSimpleIcon` rendered inside the same focus ring as the input, which the design-system `Input` atom does not yet support (no `leftIcon` slot). Do not flag this as a design-system violation until a `leftIcon` prop is added to the `Input` atom. The unused `Input` import was already removed in commit b1834ad.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-15T22:49:27.673Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:7-37
Timestamp: 2026-04-15T22:49:27.673Z
Learning: In autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/, the legacy import `Checkbox` from `@/components/__legacy__/ui/checkbox` is intentional and acceptable because the design system has no direct Checkbox equivalent yet. Do not flag this as a blocking issue in admin diagnostics components until a design-system Checkbox is available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-05-16T12:31:37.649Z
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:31:37.649Z
Learning: In `autogpt_platform/frontend/src/components/layout/Navbar`, the `IconType` enum (imported from `src/components/__legacy__/ui/icons.tsx`) is part of the shared `MenuItemGroup` contract used by both `AccountMenu` (desktop) and `MobileNavbar`. Migrating `AccountMenu` off the legacy `IconType` requires migrating `MobileNavbar` at the same time, so any such migration should be a dedicated follow-up PR that touches all Navbar consumers together. Do not block individual AccountMenu PRs for this dependency.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-15T22:49:27.673Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:7-37
Timestamp: 2026-04-15T22:49:27.673Z
Learning: In autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/, the legacy imports `CardHeader`, `CardTitle`, `CardContent` from `@/components/__legacy__/ui/card` are intentional and acceptable because the design system has no direct Card sub-component equivalents yet. Do not flag these as blocking issues in admin diagnostics components until design-system Card sub-components are available.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-05-16T12:12:20.453Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13138
File: autogpt_platform/frontend/src/components/layout/Navbar/components/AccountMenu/AccountMenu.stories.tsx:1-1
Timestamp: 2026-05-16T12:12:20.453Z
Learning: In `autogpt_platform/frontend`, the `IconType` enum from `@/components/__legacy__/ui/icons` is used as a **data-contract** enum in `MenuItemGroup` (shared with `MobileNavbar`). Story fixtures and other code that passes `IconType` values to components is valid — the enum values are mapped to Phosphor icon components at render time via `getAccountMenuPhosphorIcon`. Do not flag story or fixture files for importing `IconType` as a violation of the "no legacy" guideline; only flag direct rendering of legacy UI primitives (e.g., legacy `<Popover>`, `<Avatar>`, etc.).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-03-23T06:36:25.447Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12440
File: autogpt_platform/frontend/src/app/(platform)/library/components/LibraryImportWorkflowDialog/useLibraryImportWorkflowDialog.ts:0-0
Timestamp: 2026-03-23T06:36:25.447Z
Learning: In Significant-Gravitas/AutoGPT PR `#12440`, the `LibraryImportWorkflowDialog` (previously `LibraryImportCompetitorDialog`) and its associated generated API hook (`usePostV2ImportACompetitorWorkflowN8nMakeComZapier` / `usePostV2ImportAWorkflowFromAnotherToolN8nMakeComZapier`) were removed in a subsequent refactor. Workflow import from external platforms (n8n, Make.com, Zapier) now uses a server action `fetchWorkflowFromUrl` instead of direct API calls or generated orval hooks. Do not expect or flag missing generated hook usage for workflow import in `autogpt_platform/frontend/src/app/(platform)/library/components/LibraryImportWorkflowDialog/`.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-03-17T10:57:12.953Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12440
File: autogpt_platform/backend/backend/copilot/workflow_import/converter.py:0-0
Timestamp: 2026-03-17T10:57:12.953Z
Learning: In Significant-Gravitas/AutoGPT PR `#12440`, `autogpt_platform/backend/backend/copilot/workflow_import/converter.py` was fully rewritten (commit 732960e2d) to no longer make direct LLM/OpenAI API calls. The converter now builds a structured text prompt for AutoPilot/CoPilot instead. There is no `response.choices` access or any direct LLM client usage in this file. Do not flag `response.choices` access or LLM client initialization patterns as issues in this file.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-05-13T08:06:50.288Z
Learnt from: Abhi1992002
Repo: Significant-Gravitas/AutoGPT PR: 13100
File: autogpt_platform/frontend/src/components/molecules/PlanCard/PlanCard.tsx:35-39
Timestamp: 2026-05-13T08:06:50.288Z
Learning: In Significant-Gravitas/AutoGPT frontend (`autogpt_platform/frontend`), the per-card "Save X%" + struck-through original-monthly-price row was intentionally removed from `PlanCard.tsx` (commit 696b11705, PR `#13100`). The yearly discount is surfaced once on the Yearly billing toggle in `SubscriptionStep.tsx` (line 65) and `PaywallModal.tsx` (line 75) instead. `originalMonthlyPrice` and `yearlyDiscountPercent` are still returned by `computePlanPricing` for other consumers but are no longer consumed in `PlanCard`. Do not flag this as a regression in future reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-05-01T03:11:53.988Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12973
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/RateLimitResetDialog/RateLimitResetDialog.tsx:12-15
Timestamp: 2026-05-01T03:11:53.988Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/components/RateLimitResetDialog/RateLimitResetDialog.tsx`, the dialog title "Daily AutoPilot limit reached" and body "daily usage limit" are intentionally fixed per design ticket SECRT-2294 — do NOT flag them as incorrect even when the weekly window is exhausted. The `weekly.resets_at` fallback in `RateLimitGate` is used solely for `resetsAt` timestamp resolution (so the user sees when they can retry), not for switching title/body copy. Weekly-specific copy variants would require a separate ticket.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-13T13:11:07.445Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12764
File: autogpt_platform/frontend/src/app/(platform)/library/components/SitrepItem/SitrepItem.tsx:143-145
Timestamp: 2026-04-13T13:11:07.445Z
Learning: In `autogpt_platform/frontend`, do not flag direct interpolation of `executionID` UUID strings into URL query parameters (e.g., `activeItem=${executionID}` in JSX/Next links). If the value is a UUID string matching `[0-9a-f-]`, it contains no reserved URL characters, so additional `encodeURIComponent` or Next.js object-based `href` encoding is unnecessary. Only treat it as an encoding issue if the query-param value is not guaranteed to be UUID-formatted (i.e., may include characters outside `[0-9a-f-]`).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-14T20:58:05.411Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 12770
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/ArtifactPanel/components/ArtifactContent.tsx:102-102
Timestamp: 2026-04-14T20:58:05.411Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/components/ArtifactPanel/components/ArtifactContent.tsx`, the raw `<img>` element with `// eslint-disable-next-line next/next/no-img-element` in the `ArtifactImage` component is intentional. Artifact images are user-uploaded with unknown dimensions; `next/image` with `fill` requires explicit container sizing and adds optimization overhead (blur placeholder, srcset) that is inappropriate for ephemeral workspace preview images. Do not flag this suppressor as a violation.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.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)/build/components/MobileWarning/MobileWarning.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 design system components from 'src/components/' (atoms, molecules, organisms) in frontend development
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.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)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-01T18:54:16.035Z
Learnt from: Bentlybro
Repo: Significant-Gravitas/AutoGPT PR: 12633
File: autogpt_platform/frontend/src/app/(platform)/library/components/AgentFilterMenu/AgentFilterMenu.tsx:3-10
Timestamp: 2026-04-01T18:54:16.035Z
Learning: In the frontend, the legacy Select component at `@/components/__legacy__/ui/select` is an intentional, codebase-wide visual-consistency pattern. During code reviews, do not flag or block PRs merely for continuing to use this legacy Select. If a migration to the newer design-system Select is desired, bundle it into a single dedicated cleanup/migration PR that updates all Select usages together (e.g., avoid piecemeal replacements).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-07T09:24:16.582Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12686
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/__tests__/PainPointsStep.test.tsx:1-19
Timestamp: 2026-04-07T09:24:16.582Z
Learning: In Significant-Gravitas/AutoGPT’s `autogpt_platform/frontend` (Vite + `vitejs/plugin-react` with the automatic JSX transform), do not flag usages of React types/components (e.g., `React.ReactNode`) in `.ts`/`.tsx` files as missing `React` imports. Since the React namespace is made available by the project’s TS/Vite setup, an explicit `import React from 'react'` or `import type { ReactNode } ...` is not required; only treat it as missing if typechecking (e.g., `pnpm types`) would actually fail.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-02T05:43:49.128Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12640
File: autogpt_platform/frontend/src/app/(no-navbar)/onboarding/steps/WelcomeStep.tsx:13-13
Timestamp: 2026-04-02T05:43:49.128Z
Learning: Do not flag `import { Question } from "phosphor-icons/react"` as an invalid import. `Question` is a valid named export from `phosphor-icons/react` (as reflected in the package’s generated `.d.ts` files and re-exports via `dist/index.d.ts`), so it should be treated as a supported named export during code reviews.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
📚 Learning: 2026-04-15T22:49:06.896Z
Learnt from: ntindle
Repo: Significant-Gravitas/AutoGPT PR: 11235
File: autogpt_platform/frontend/src/app/(platform)/admin/diagnostics/components/ExecutionsTable.tsx:0-0
Timestamp: 2026-04-15T22:49:06.896Z
Learning: In the AutoGPT frontend (React Query + toast/ErrorCard patterns), do not require `Sentry.captureException` in React Query mutation `catch` blocks. React Query handles error propagation for mutation paths, so follow the established pattern: show toast notifications for mutation errors and use `ErrorCard` for render/fetch errors. Only add `Sentry.captureException` for truly manual/unexpected exception paths that are outside React Query’s control (e.g., standalone async utilities or event handlers not wired through React Query).
Applied to files:
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx
🔇 Additional comments (1)
autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/MobileWarning.tsx (1)
14-47: LGTM!
…bile drawer spacing - Add "Don't show again" button to the builder mobile warning that records a flag in local storage so the warning never re-renders in the same browser. "Continue anyway" still only dismisses for the current session. - Reword the copy from "phone" to "small screen" since the warning also fires on small tablets. - Add left margin to the AutoPilot mobile drawer close (X) button so the notification bell isn't visually adjacent to it.
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
github-actions
Bot
added
the
conflicts
…-small-mobile-responsiveness-pass-copilot-parity-builder # Conflicts: # autogpt_platform/frontend/src/services/storage/local-storage.ts
github-actions
Bot
removed
the
conflicts
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
|
/review |
Avoids the brief desktop-modal flash on mobile by gating the Dialog's controlled isOpen behind a one-frame ready flag. The shared Dialog hook initializes its isLgScreenUp from useBreakpoint's "lg" default and only corrects it after a useEffect, so flipping isOpen true in the same render cycle as the breakpoint update would mount the desktop variant for a frame before swapping to the drawer.
![autogpt-pr-reviewer[bot]](https://avatars.githubusercontent.com/u/130738209?s=60&v=4){kind=small}
There was a problem hiding this comment.
📋 Automated Review — PR #13232
PR #13232 — feat(frontend): mobile AutoPilot parity + builder warning
Author: kcze | Files: 8
🎯 Verdict: REQUEST_CHANGES
PR Description Quality
Key.BUILDER_MOBILE_WARNING_SUPPRESSED. The description should be updated to reflect the dual dismissal behavior.
What This PR Does
Mobile users of the AutoPilot copilot couldn't access Usage limits or Notification settings — those controls only existed in the desktop sidebar. This PR surfaces UsagePopover and NotificationToggle inside the MobileDrawer header, replacing a redundant standalone speaker toggle. It also adds a MobileWarning dialog overlay on /build for viewports below lg, warning users that the visual builder works best on desktop and offering session-only or permanent dismissal.
Specialist Findings
🛡️ Security ✅ — No new attack surface. Purely presentational changes reusing existing authenticated components. No new API endpoints, no user input interpolation, no dangerouslySetInnerHTML, no new dependencies. localStorage stores only a non-sensitive UI preference string ("1").
🏗️ Architecture ✅ — Clean component co-location (build/components/MobileWarning/MobileWarning.tsx), proper reuse of existing UsagePopover and NotificationToggle instead of building mobile-specific variants, and clean removal of the duplicate sound toggle.
🟡 Hardcoded z-[80] in NotificationToggle.tsx:62 and UsagePopover.tsx:33 is a magic number that could cause stacking conflicts as more overlays are added. (Flagged by: architect, quality, product — 3 specialists)
🟡 MobileWarning.tsx:11 combines state logic and rendering in one file, technically diverging from the Component.tsx + useComponent.ts convention, but acceptable at ~64 lines.
⚡ Performance ✅ — All operations are O(1): state toggles, localStorage reads/writes, breakpoint checks. No loops, no data transformations, no new network calls. Local useState ensures dismissal doesn't trigger parent re-renders.
🧪 Testing MobileWarning.test.tsx is solid with coverage of all states and both dismissal paths. However, MobileDrawerControls.test.tsx is thin:
🟠 Only 1 test checking button presence with heavy Popover mocking — no regression test for the removed standalone speaker toggle, no interaction tests, no negative cases.
🟡 .toBeDefined() assertions on findByRole/getByRole at MobileDrawerControls.test.tsx:96 are no-op assertions — these methods throw if the element is missing, so .toBeDefined() always passes.
🟡 Only sm breakpoint tested in MobileWarning.test.tsx:58; base and md (the boundary) are untested.
📖 Quality ✅ — Clean naming, proper function declarations, no dead code, design system components used correctly (Phosphor Icons, Dialog, Button). Import organization is clean with no barrel files.
🔵 isSuppressed defaults to true at MobileWarning.tsx:14 as an SSR-safe guard — intent is non-obvious and could benefit from a brief comment.
📦 Product ✅ — Both features work as intended. Button ordering on mobile is correct (safe default first). Removed speaker toggle is replaced by the more capable NotificationToggle popover.
🟡 Warning dialog at MobileWarning.tsx:49 only offers "Continue anyway" and "Don't show again" — no navigation escape (e.g., "Go to AutoPilot") for mobile users who genuinely shouldn't be on /build.
🟡 Warning copy says "small screen" but fires for md (tablets); "this screen size" would be more accurate.
📬 Discussion
🔎 QA ✅ — UsagePopover and NotificationToggle verified working in MobileDrawer via agent-browser. Old speaker toggle confirmed removed. MobileWarning correctly hidden on desktop. MobileWarning could not be visually triggered on mobile due to agent-browser viewport/CSS media query limitations — unit tests cover this path.
🟠 Should Fix
- Missing regression test for removed sound toggle (
MobileDrawerControls.test.tsx:92) — The PR removes a standaloneSpeakerHigh/SpeakerSlashbutton from MobileDrawer, which is a behavioral change. Add a test asserting that no element witharia-labelmatching "Disable/Enable notification sound" exists in the drawer. (Flagged by: testing — 1 specialist) - MobileDrawerControls test coverage is too thin (
MobileDrawerControls.test.tsx:92) — A single presence-only test with fully mocked Popovers provides little confidence against regressions. Add at least one interaction test (e.g., clicking the notification settings button and verifying popover content appears). (Flagged by: testing — 1 specialist)
🟡 Nice to Have
- z-index design tokens (
NotificationToggle.tsx:62,UsagePopover.tsx:33) — Extractz-[80]into a Tailwind theme config token (e.g.,z-popover) to prevent z-index drift across files. (architect, quality, product) - Navigation escape from builder warning (
MobileWarning.tsx:49) — A "Go to AutoPilot" link would help mobile users who land on/buildand genuinely shouldn't be there. (product) - Test boundary breakpoints (
MobileWarning.test.tsx:58) — Addbaseandmdbreakpoint test cases to catch off-by-one issues if breakpoint names change. (testing) - Update PR description — Correct the "no localStorage" claim to reflect the dual dismissal behavior (session-only via "Continue anyway", persistent via "Don't show again"). (architect, testing, discussion)
🔵 Nits
- No-op assertions (
MobileDrawerControls.test.tsx:96) —.toBeDefined()onfindByRole/getByRolealways passes since these throw on missing elements. Use.toBeInTheDocument()for clarity. - SSR guard comment (
MobileWarning.tsx:14) —isSuppresseddefaults totrueto prevent dialog flash beforeuseEffectreads localStorage. A one-line comment would clarify intent.
QA Screenshots
| Screenshot | Description |
|---|---|
 |
UsagePopover + NotificationToggle buttons visible in drawer header ✅ |
 |
Usage popover shows daily/weekly/storage progress bars ✅ |
 |
Notification settings button present and clickable ✅ |
 |
No MobileWarning on desktop viewport ✅ |
Human Review Needed
NO — This is a small, isolated, UI-only PR with no auth/infra/DB changes. QA screenshots confirm the core features work. The requested test additions are straightforward.
Risk Assessment
Merge risk: LOW | Rollback: EASY
CI Status
❌ 4/6 checks failed — Lint passes (frontend + backend). Typecheck, backend tests, frontend unit tests, and frontend build failed. Backend test failure appears to be environment-related (0s runtime). Frontend failures should be investigated to confirm they are pre-existing and not introduced by this PR.
UI Testing — Variant Results
✅ local: Mobile parity controls (UsagePopover + NotificationToggle) verified working in MobileDrawer; MobileWarning correctly hidden on desktop; no regressions.
✅ hosted: Desktop behavior verified working correctly; mobile viewport testing limited by environment but integration tests provide adequate coverage for a low-risk additive UI change.
- low: Hardcoded z-[80] on PopoverContent may conflict with other z-index values in the app; consider using a design token or shared z-index scale
- low: Same hardcoded z-[80] on UsagePopover's PopoverContent — same concern as NotificationToggle
github-project-automation
Bot
moved this from 🆕 Needs initial review
to 🚧 Needs work
in AutoGPT development kanban
…rning - Extract MobileWarning's state into a co-located useMobileWarning hook per the project's Component.tsx + useComponent.ts convention. - Reword "small screen" to "this screen size" — the warning fires up to md (tablets), which is broader than "small screen" implies. - Add inline z-index rationale comments on both UsagePopover and NotificationToggle so the z-[80] is no longer a magic number. - Expand tests: parametric mobile-boundary coverage at base/sm/md for MobileWarning, plus a regression test in MobileDrawerControls that the legacy standalone sound toggle stays removed.
github-project-automation
Bot
moved this from 🚧 Needs work
to 👍🏼 Mergeable
in AutoGPT development kanban
github-project-automation
Bot
moved this from 👍🏼 Mergeable
to ✅ Done
in AutoGPT development kanban
2 participants
Why / What / How
Why: Closes OPEN-3128. Two concrete mobile issues worth a small, scoped pass:
ChatSidebar(which houses the Usage and Notification controls) is gated behind!isMobile, so phone users have no way to see usage limits or change notification settings.What:
UsagePopoverandNotificationToggleinside the AutoPilotMobileDrawerheader so mobile gets the same controls as desktop, just relocated./buildfor viewports belowlg, with two paths: "Continue anyway" (session-only dismiss) and "Don't show again" (persisted inlocalStorageso it doesn't reappear in the same browser).How:
UsagePopover,NotificationToggle) inside theMobileDrawerheader next to the search/close cluster. Removed the standalone speaker toggle that previously lived there sinceNotificationToggle's popover already manages sound — avoids two parallel sound controls on mobile.MobileWarningcomponent co-located underbuild/components/MobileWarning/, backed by auseMobileWarninghook for state. Uses the design-systemDialog, which renders as a vaulDraweron mobile. Triggers atbase|sm|md(< lg). Two dismiss paths: "Continue anyway" sets a session flag in component state; "Don't show again" writesBUILDER_MOBILE_WARNING_SUPPRESSEDvia the sharedstorageservice so the warning never re-renders in the same browser.Changes 🏗️
autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx— addedUsagePopover+NotificationToggle, removed duplicated standalone sound button.autogpt_platform/frontend/src/app/(platform)/build/components/MobileWarning/— newMobileWarning+useMobileWarning+ tests.autogpt_platform/frontend/src/app/(platform)/build/page.tsx— mountMobileWarning.autogpt_platform/frontend/src/services/storage/local-storage.ts— newBUILDER_MOBILE_WARNING_SUPPRESSEDstorage key.NotificationToggle/UsagePopoverpopover contentz-[80]so it layers above the mobile drawer overlay.Checklist 📋
For code changes:
pnpm format,pnpm lint,pnpm typespassMobileWarning.test.tsx,MobileDrawerControls.test.tsx)MobileDrawer.test.tsxstill passes (search interactions unchanged)/copilot, open the drawer, confirm Usage + Notification buttons render and their popovers layer above the drawer overlay/build, confirm the warning appears; click "Continue anyway" → warning closes for this session only; reload → warning re-appears/build, click "Don't show again" → warning closes; reload → warning does not re-appear (until localStorage is cleared)/buildshows no warning;/copilotdesktop sidebar still has its Usage + Notification controls (unchanged)