feat(frontend): add app-level sidebar with nav links and chat sessions - #12498
Closed
Abhi1992002 wants to merge 10 commits into
Closed
feat(frontend): add app-level sidebar with nav links and chat sessions#12498Abhi1992002 wants to merge 10 commits into
Abhi1992002 wants to merge 10 commits into
Conversation
Abhi1992002
requested review from
Bentlybro and
Pwuts
and removed request for
a team
March 20, 2026 15:40
github-project-automation
Bot
moved this to 🆕 Needs initial review
in AutoGPT development kanban
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThis PR restructures the application layout by moving sidebar infrastructure from the Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate 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 |
Contributor
🔍 PR Overlap DetectionThis check compares your PR against all other open PRs targeting the same branch to detect potential merge conflicts early. 🔴 Merge Conflicts DetectedThe following PRs have been tested and will have merge conflicts if merged after this PR. Consider coordinating with the authors.
🟢 Low Risk — File Overlap OnlyThese PRs touch the same files but different sections (click to expand)
Summary: 2 conflict(s), 0 medium risk, 1 low risk (out of 3 PRs with file overlap) Auto-generated on push. Ignores: |
Abhi1992002
marked this pull request as draft
March 20, 2026 15:46
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
autogpt_platform/frontend/src/components/ui/sidebar.tsx (1)
280-299:⚠️ Potential issue | 🟠 MajorForward the rest of the trigger props to the native button.
The new implementation only preserves
onClick, soclassName,type,aria-*,disabled, and any other consumer props are silently dropped. That is a breaking API change for a shared primitive.💡 Suggested fix
const SidebarTrigger = React.forwardRef< - React.ElementRef<typeof Button>, - React.ComponentProps<typeof Button> ->(({ onClick }, ref) => { + HTMLButtonElement, + React.ComponentProps<"button"> +>(({ className, onClick, type = "button", ...props }, ref) => { const { toggleSidebar } = useSidebar(); return ( <button ref={ref} + type={type} data-sidebar="trigger" - className="rounded-md p-1.5 text-neutral-600 transition-colors hover:bg-zinc-100" + className={cn( + "rounded-md p-1.5 text-neutral-600 transition-colors hover:bg-zinc-100", + className, + )} + {...props} onClick={(event) => { onClick?.(event); toggleSidebar(); }} >If you keep the native button version, the
Buttonimport above can be removed once the prop types switch toReact.ComponentProps<"button">.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/ui/sidebar.tsx` around lines 280 - 299, SidebarTrigger currently only accepts and forwards onClick, dropping other native/button props (className, type, aria-*, disabled, etc.), which breaks consumers; update SidebarTrigger to forward all remaining props to the rendered button (use the rest/spread pattern on the props parameter) and call onClick?.(event) before toggleSidebar(), and adjust the forwarded ref/type signature to React.ComponentProps<"button"> (or keep React.ComponentProps<typeof Button> if you continue rendering Button) so className, aria attributes and disabled are preserved; ensure you still pass ref to the button and include data-sidebar="trigger".autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx (1)
48-52:⚠️ Potential issue | 🟡 MinorAlign the primary route labels across breakpoints.
Desktop now exposes
/copilotand/libraryas "Copilot" and "Workflow", but mobile still presents the same destinations as "Home" and "Agents". That will be confusing when users switch between layouts.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx` around lines 48 - 52, The mobileNavLinks array is using inconsistent labels ("Home", "Agents") vs desktop ("Copilot", "Workflow"); update the entries in mobileNavLinks so their name strings match the desktop labels (e.g., use "Copilot" for the homeHref entry and "Workflow" for the "/library" entry) while keeping the same hrefs and preserving the conditional inclusion (isChatEnabled and ...loggedInLinks) so the links and labels are consistent across breakpoints.
🧹 Nitpick comments (4)
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsx (1)
9-10: Match the/copilotsegment explicitly.
startsWith("/copilot")also matches siblings like/copilot-foo. Checking for"/copilot"or"/copilot/"keeps the dynamic content scoped to that route tree.💡 Suggested fix
- if (pathname.startsWith("/copilot")) { + if (pathname === "/copilot" || pathname.startsWith("/copilot/")) { return <ChatSessionList />; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsx` around lines 9 - 10, The pathname check in SidebarDynamicContent currently uses pathname.startsWith("/copilot") which also matches routes like "/copilot-foo"; update the condition to explicitly match the segment by changing it to pathname === "/copilot" || pathname.startsWith("/copilot/") so ChatSessionList only renders for the /copilot route tree; locate this logic in the SidebarDynamicContent component where ChatSessionList is returned and replace the startsWith call accordingly.autogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx (1)
3-3: Please don't wire the new sidebar through a legacy logo component.This makes the shared shell depend on
src/components/__legacy__/*from day one. A non-legacy SVG/component under the supported layout tree would keep the new shell on the forward path.As per coding guidelines, "Never use 'src/components/legacy/*' in frontend code".
Also applies to: 81-84
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx` at line 3, The sidebar is importing and rendering the legacy IconAutoGPTLogo; remove the import of IconAutoGPTLogo and replace all usages in AppSidebar (including the instances referenced around the 81-84 region) with a new non-legacy logo component (e.g., AppLogo or LogoIcon) from the supported layout/icon component tree; update the import to reference that new symbol and ensure AppSidebar renders the new component instead of IconAutoGPTLogo.autogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx (1)
25-30: Keep this copilot implementation in the copilot feature, not the shared layout package.This file lives under
components/layout/AppSidebar, but it now pulls store state, dialogs, loaders, toggles, and usage limits straight fromapp/(platform)/copilot/.... That inverts the dependency direction of the shared shell and makes this sidebar code harder to reuse or trim.As per coding guidelines, "Colocate state when possible, avoid creating large components, use sub-components in local
/componentsfolder".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx` around lines 25 - 30, The AppSidebar ChatSessionList currently imports copilot-specific state and components (useCopilotUIStore, DeleteChatDialog, PulseLoader, UsageLimits, NotificationToggle) which inverts dependency direction; remove these direct copilot imports and make ChatSessionList framework-agnostic by depending on props and local lightweight subcomponents instead. Specifically, replace calls to useCopilotUIStore with passed-in props or callbacks (e.g., sessions, selectedId, onSelect, onDelete, loading flags), and replace DeleteChatDialog/PulseLoader/UsageLimits/NotificationToggle usages with abstract slot props or small local components in ChatSessionList so the shared layout has no reference to app/(platform)/copilot; then create a copilot-specific wrapper component inside the copilot feature that imports useCopilotUIStore and the copilot components and composes them into ChatSessionList, mapping store state and handlers to the new props.autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx (1)
5-5: Avoid extending the new mobile nav with__legacy__icons.This updated menu path still depends on
IconType, so the sidebar migration keeps the navbar coupled to the legacy icon package instead of the repo-standard icon path.As per coding guidelines, "Never use 'src/components/legacy/*' in frontend code" and "Only use Phosphor Icons (
@phosphor-icons/react) for icons in frontend components".Also applies to: 104-127
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx` at line 5, The Navbar import uses the legacy IconType from __legacy__ which couples the navbar to deprecated icons; replace all uses of IconType in Navbar.tsx (and the similar references in the 104-127 block) with Phosphor icon components: remove the import of "@/components/__legacy__/ui/icons", change any prop/type annotations that reference IconType to accept React.ComponentType or the specific Phosphor icon types, and import the needed icons directly from "@phosphor-icons/react" (e.g., import { Home, List } from "@phosphor-icons/react") and update the JSX to render those Phosphor components instead. Ensure types and props (where IconType was used) are adjusted to accept the new component type.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@autogpt_platform/frontend/src/app/`(platform)/copilot/CopilotPage.tsx:
- Around line 100-105: The wrapper div in CopilotPage.tsx still hardcodes
bg-[`#f8f8f9`]; replace that hardcoded color with the project's shared background
design token class used across the app (i.e., swap bg-[`#f8f8f9`] for the shared
background token class used elsewhere so the Copilot route picks up the new
`#FAFAFA` and future theme changes), leaving the rest of the attributes
(onDragEnter/onDragOver/onDragLeave/onDrop, relative flex h-full w-full flex-col
overflow-hidden px-0) intact.
In `@autogpt_platform/frontend/src/app/`(platform)/copilot/page.tsx:
- Around line 9-11: Restore the page-level feature-flag guard around CopilotPage
by reintroducing FeatureFlagPage with Flag.CHAT as the guard (wrap CopilotPage
inside <FeatureFlagPage flag={Flag.CHAT} whenDisabled="/library"> ...
</FeatureFlagPage>), unless Flag.CHAT has been globally retired; update the JSX
in page.tsx to use FeatureFlagPage and ensure imports for FeatureFlagPage and
Flag are present and used so deep links to /copilot respect the
rollout/kill-switch.
In `@autogpt_platform/frontend/src/app/globals.css`:
- Around line 81-82: Replace the literal hex background in the body rule with
the design token so dark-mode and token updates apply: in the CSS rule for body
(the selector "body { ... }") remove bg-[`#FAFAFA`] and use the background token
(e.g., bg-background or the Tailwind class mapped to --background) so the page
consumes the --background design token and the .dark palette will affect the
body; keep the other utilities (font-sans text-foreground antialiased
transition-colors) intact.
In `@autogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx`:
- Around line 47-57: The sidebar currently sets homeHref based on isChatEnabled
but still renders the first nav item with name "Copilot" (navLinks) and the logo
link to the wrong place when chat is disabled; update the navLinks entry and
logo link to be consistent with homeHref: make the first item’s name and href
conditional (use "Copilot" and "/copilot" when isChatEnabled is true, otherwise
"Library" and "/library") or derive both name and href from homeHref, and ensure
the logo link (the element referencing homeHref around line ~81) uses the same
homeHref variable so label, icon and link route match the feature flag.
In
`@autogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx`:
- Around line 42-43: The sessions query currently collapses errors into an empty
list by reading sessionsResponse?.data ?? [] which hides failures; update the
component using useGetV2ListSessions (the sessionsResponse and isLoadingSessions
variables) to check sessionsResponse?.isError or sessionsResponse?.error (or the
hook's isError flag) and render <ErrorCard /> when the query errored instead of
showing the empty-state "No conversations yet"; keep existing loading handling
for isLoadingSessions, and apply the same fix to the other places noted where
session results are defaulted to [] (the other usages of
useGetV2ListSessions/response handling referenced in the comment) so all
non-200/query-failure states render ErrorCard rather than the empty state.
- Around line 101-105: Remove the unnecessary refetch-on-selection effect in the
ChatSessionList component: delete the useEffect that calls
queryClient.invalidateQueries({ queryKey: getGetV2ListSessionsQueryKey() }) and
its dependency on sessionId and queryClient so switching sessionId no longer
triggers a list invalidation; rely on existing delete/rename mutation
invalidations and the 10s polling instead.
---
Outside diff comments:
In `@autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx`:
- Around line 48-52: The mobileNavLinks array is using inconsistent labels
("Home", "Agents") vs desktop ("Copilot", "Workflow"); update the entries in
mobileNavLinks so their name strings match the desktop labels (e.g., use
"Copilot" for the homeHref entry and "Workflow" for the "/library" entry) while
keeping the same hrefs and preserving the conditional inclusion (isChatEnabled
and ...loggedInLinks) so the links and labels are consistent across breakpoints.
In `@autogpt_platform/frontend/src/components/ui/sidebar.tsx`:
- Around line 280-299: SidebarTrigger currently only accepts and forwards
onClick, dropping other native/button props (className, type, aria-*, disabled,
etc.), which breaks consumers; update SidebarTrigger to forward all remaining
props to the rendered button (use the rest/spread pattern on the props
parameter) and call onClick?.(event) before toggleSidebar(), and adjust the
forwarded ref/type signature to React.ComponentProps<"button"> (or keep
React.ComponentProps<typeof Button> if you continue rendering Button) so
className, aria attributes and disabled are preserved; ensure you still pass ref
to the button and include data-sidebar="trigger".
---
Nitpick comments:
In `@autogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx`:
- Line 3: The sidebar is importing and rendering the legacy IconAutoGPTLogo;
remove the import of IconAutoGPTLogo and replace all usages in AppSidebar
(including the instances referenced around the 81-84 region) with a new
non-legacy logo component (e.g., AppLogo or LogoIcon) from the supported
layout/icon component tree; update the import to reference that new symbol and
ensure AppSidebar renders the new component instead of IconAutoGPTLogo.
In
`@autogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx`:
- Around line 25-30: The AppSidebar ChatSessionList currently imports
copilot-specific state and components (useCopilotUIStore, DeleteChatDialog,
PulseLoader, UsageLimits, NotificationToggle) which inverts dependency
direction; remove these direct copilot imports and make ChatSessionList
framework-agnostic by depending on props and local lightweight subcomponents
instead. Specifically, replace calls to useCopilotUIStore with passed-in props
or callbacks (e.g., sessions, selectedId, onSelect, onDelete, loading flags),
and replace DeleteChatDialog/PulseLoader/UsageLimits/NotificationToggle usages
with abstract slot props or small local components in ChatSessionList so the
shared layout has no reference to app/(platform)/copilot; then create a
copilot-specific wrapper component inside the copilot feature that imports
useCopilotUIStore and the copilot components and composes them into
ChatSessionList, mapping store state and handlers to the new props.
In
`@autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsx`:
- Around line 9-10: The pathname check in SidebarDynamicContent currently uses
pathname.startsWith("/copilot") which also matches routes like "/copilot-foo";
update the condition to explicitly match the segment by changing it to pathname
=== "/copilot" || pathname.startsWith("/copilot/") so ChatSessionList only
renders for the /copilot route tree; locate this logic in the
SidebarDynamicContent component where ChatSessionList is returned and replace
the startsWith call accordingly.
In `@autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx`:
- Line 5: The Navbar import uses the legacy IconType from __legacy__ which
couples the navbar to deprecated icons; replace all uses of IconType in
Navbar.tsx (and the similar references in the 104-127 block) with Phosphor icon
components: remove the import of "@/components/__legacy__/ui/icons", change any
prop/type annotations that reference IconType to accept React.ComponentType or
the specific Phosphor icon types, and import the needed icons directly from
"@phosphor-icons/react" (e.g., import { Home, List } from
"@phosphor-icons/react") and update the JSX to render those Phosphor components
instead. Ensure types and props (where IconType was used) are adjusted to accept
the new component type.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 9152b855-ed55-4af6-8d75-4ad05474c03f
📒 Files selected for processing (12)
autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/app/globals.cssautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: check API types
- GitHub Check: integration_test
- GitHub Check: Seer Code Review
- GitHub Check: end-to-end tests
- GitHub Check: Analyze (python)
- GitHub Check: Check PR Status
- GitHub Check: Analyze (typescript)
🧰 Additional context used
📓 Path-based instructions (16)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx,js,jsx}: Use Node.js 21+ with pnpm package manager for frontend development
Always run 'pnpm format' for formatting and linting code in frontend development
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/services/feature-flags/use-get-flag.tsautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.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/lib/constants.tsautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/services/feature-flags/use-get-flag.tsautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
autogpt_platform/frontend/**/*.{ts,tsx}: No barrel files or 'index.ts' re-exports in frontend code
Regenerate API hooks with 'pnpm generate:api' after backend OpenAPI spec changes in frontend development
autogpt_platform/frontend/**/*.{ts,tsx}: Fully capitalize acronyms in symbols, e.g.graphID,useBackendAPI
Use function declarations (not arrow functions) for components and handlers
Nodark:Tailwind classes — the design system handles dark mode
Noanytypes unless the value genuinely can be anything
No linter suppressors (//@ts-ignore``,// eslint-disable) — fix the actual issue instead
Keep files under ~200 lines; extract sub-components or hooks into their own files when a file grows beyond this threshold
Keep render functions and hooks under ~50 lines; extract named helpers or sub-components when they grow longer
Use generated API hooks from `@/app/api/generated/endpoints/` following the pattern `use{Method}{Version}{OperationName}`; regenerate with `pnpm generate:api`
Use Tailwind CSS only for styling; use design tokens and Phosphor Icons only (no other icon libraries)
Do not use `useCallback` or `useMemo` unless asked to optimize a given function
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/services/feature-flags/use-get-flag.tsautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx}: Format frontend code usingpnpm format
Never use components fromsrc/components/__legacy__/*
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/services/feature-flags/use-get-flag.tsautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
autogpt_platform/frontend/src/**/*.{ts,tsx}: Structure components asComponentName/ComponentName.tsx+useComponentName.ts+helpers.tsand use design system components fromsrc/components/(atoms, molecules, organisms)
Use generated API hooks from@/app/api/__generated__/endpoints/with patternuse{Method}{Version}{OperationName}and regenerate withpnpm generate:api
Use function declarations (not arrow functions) for components and handlers
Separate render logic from business logic with component.tsx + useComponent.ts + helpers.ts structure
Colocate state when possible, avoid creating large components, use sub-components in local/componentsfolder
Avoid large hooks, abstract logic intohelpers.tsfiles when sensible
Use arrow functions only for callbacks, not for component declarations
Avoid comments at all times unless the code is very complex
Do not useuseCallbackoruseMemounless asked to optimize a given function
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/services/feature-flags/use-get-flag.tsautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/services/feature-flags/use-get-flag.tsautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/globals.cssautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/src/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Do not type hook returns, let Typescript infer as much as possible
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts
autogpt_platform/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Never type with
any, if no types available useunknown
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/services/feature-flags/use-get-flag.tsautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/**/*.ts
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
autogpt_platform/frontend/**/*.ts: Extract component logic into custom hooks grouped by concern, not by component; put each hook in its own.tsfile
Do not type hook returns; let TypeScript infer as much as possible
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts
autogpt_platform/frontend/src/**
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Avoid index and barrel files
Files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/services/feature-flags/use-get-flag.tsautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/globals.cssautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/src/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Component props should be
interface Props { ... }(not exported) unless the interface needs to be used outside the component
Files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/**/*.tsx
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
autogpt_platform/frontend/**/*.tsx: Use Next.js<Link>for internal navigation — never raw<a>tags
Put sub-components in localcomponents/folder; component props should betype Props = { ... }(not exported) unless it needs to be used outside the component
Use design system components fromsrc/components/(atoms, molecules, organisms); never usesrc/components/__legacy__/*
Files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/src/app/(platform)/**/page.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Create pages in
src/app/(platform)/feature-name/page.tsxwith ausePageName.tshook for logic and sub-components in localcomponents/folderCreate pages in
src/app/(platform)/feature-name/page.tsxstructure
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx
autogpt_platform/frontend/src/app/(platform)/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
If adding protected frontend routes, update
frontend/lib/supabase/middleware.ts
Files:
autogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.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/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
autogpt_platform/frontend/src/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (autogpt_platform/frontend/CLAUDE.md)
Structure components as
ComponentName/ComponentName.tsx+useComponentName.ts+helpers.ts
Files:
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
🧠 Learnings (37)
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Fully capitalize acronyms in symbols, e.g. `graphID`, `useBackendAPI`
Applied to files:
autogpt_platform/frontend/src/lib/constants.tsautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Separate render logic from data/behavior in React components; keep comments minimal (code should be self-documenting)
Applied to files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx
📚 Learning: 2026-03-19T12:07:53.087Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12462
File: autogpt_platform/frontend/src/components/molecules/TallyPoup/TallyPopup.tsx:5-8
Timestamp: 2026-03-19T12:07:53.087Z
Learning: In `autogpt_platform/frontend/src/components/molecules/TallyPoup/useTallyPopup.ts`, the Tally embed script loading is idempotent — the script tag is appended only once, and subsequent calls to `useTallyPopup()` from multiple components (e.g., both `TallyPopupSimple` in `app/layout.tsx` and `FeedbackButton` in the Navbar) are safe no-ops. Do not flag multiple callers of this hook as causing duplicate script injection.
Applied to files:
autogpt_platform/frontend/src/app/layout.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : No linter suppressors (`// ts-ignore`, `// eslint-disable`) — fix the actual issue instead
Applied to files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/**/*.tsx : Put sub-components in local `components/` folder; component props should be `type Props = { ... }` (not exported) unless it needs to be used outside the component
Applied to files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.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} : Never use 'src/components/__legacy__/*' in frontend code
Applied to files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.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/**/*.{ts,tsx} : No barrel files or 'index.ts' re-exports in frontend code
Applied to files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/**/*.{js,jsx,ts,tsx} : Never use components from `src/components/__legacy__/*`
Applied to files:
autogpt_platform/frontend/src/app/layout.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use Tailwind CSS only for styling; use design tokens and Phosphor Icons only (no other icon libraries)
Applied to files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/app/globals.cssautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : No `dark:` Tailwind classes — the design system handles dark mode
Applied to files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/app/globals.cssautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.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/layout.tsx
📚 Learning: 2026-01-28T18:29:34.362Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/src/tests/CLAUDE.md:0-0
Timestamp: 2026-01-28T18:29:34.362Z
Learning: Do not test third-party library internals (Radix UI, React Query)
Applied to files:
autogpt_platform/frontend/src/app/layout.tsx
📚 Learning: 2026-02-27T10:45:49.499Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12213
File: autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunMCPTool/helpers.tsx:23-24
Timestamp: 2026-02-27T10:45:49.499Z
Learning: Prefer using generated OpenAPI types from '@/app/api/__generated__/' for payloads defined in openapi.json (e.g., MCPToolsDiscoveredResponse, MCPToolOutputResponse). Use inline TypeScript interfaces only for payloads that are SSE-stream-only and not exposed via OpenAPI. Apply this pattern to frontend tool components (e.g., RunMCPTool) and related areas where similar SSE/openapi-discrepancies occur; avoid re-implementing types when a generated type is available.
Applied to files:
autogpt_platform/frontend/src/app/layout.tsxautogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/app/(platform)/**/page.tsx : Create pages in `src/app/(platform)/feature-name/page.tsx` with a `usePageName.ts` hook for logic and sub-components in local `components/` folder
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/src/app/(platform)/**/page.tsx : Create pages in `src/app/(platform)/feature-name/page.tsx` structure
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/page.tsx
📚 Learning: 2026-02-26T10:13:22.013Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12207
File: autogpt_platform/frontend/src/components/ai-elements/message.tsx:48-49
Timestamp: 2026-02-26T10:13:22.013Z
Learning: The copilot frontend (autogpt_platform/frontend/src/app/(platform)/copilot) does not currently support dark mode. Dark mode CSS variants in copilot components are unnecessary until dark mode support is explicitly added to the copilot feature.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx
📚 Learning: 2026-03-17T10:57:10.126Z
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:10.126Z
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)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx
📚 Learning: 2026-02-26T10:12:58.845Z
Learnt from: 0ubbe
Repo: Significant-Gravitas/AutoGPT PR: 12207
File: autogpt_platform/frontend/src/components/ai-elements/conversation.tsx:0-0
Timestamp: 2026-02-26T10:12:58.845Z
Learning: Guideline: Do not apply dark mode CSS classes (e.g., dark:text-*) to copilot UI components until dark mode support is implemented. Applies to all copilot-related components (paths containing /copilot/). When reviewing, search for dark:* class names within copilot components and refactor to use conditional class sets or feature-flag gates, ensuring no dark-mode styles are present in the code paths that render copilot UI unless dark mode support is officially enabled.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use generated API hooks from '@/app/api/__generated__/endpoints/' instead of deprecated 'BackendAPI' or 'src/lib/autogpt-server-api/*'
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Colocate state when possible, avoid creating large components, use sub-components in local `/components` folder
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/page.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/**/*.{js,jsx,ts,tsx,css} : Use Tailwind CSS only for styling, use design tokens, and use Phosphor Icons only
Applied to files:
autogpt_platform/frontend/src/app/globals.cssautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use Tailwind CSS utilities only for styling in frontend components
Applied to files:
autogpt_platform/frontend/src/app/globals.cssautogpt_platform/frontend/src/components/ui/sidebar.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/app/(platform)/**/*.tsx : If adding protected frontend routes, update `frontend/lib/supabase/middleware.ts`
Applied to files:
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.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} : Default to client components ('use client') in Next.js; only use server components for SEO or extreme TTFB needs
Applied to files:
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.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/src/lib/supabase/middleware.ts : Update 'frontend/lib/supabase/middleware.ts' when adding protected routes in frontend
Applied to files:
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/src/components/**/*.{ts,tsx} : Structure components as `ComponentName/ComponentName.tsx` + `useComponentName.ts` + `helpers.ts`
Applied to files:
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.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/src/components/**/*.{tsx,ts} : 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)
Applied to files:
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Separate render logic from business logic with component.tsx + useComponent.ts + helpers.ts structure
Applied to files:
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Framework: Next.js 15 App Router with client-first approach
Applied to files:
autogpt_platform/frontend/src/components/layout/AppSidebar/SidebarDynamicContent.tsxautogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx
📚 Learning: 2026-03-11T08:40:59.673Z
Learnt from: kcze
Repo: Significant-Gravitas/AutoGPT PR: 12328
File: autogpt_platform/frontend/src/app/(platform)/copilot/useLoadMoreMessages.ts:49-61
Timestamp: 2026-03-11T08:40:59.673Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/useLoadMoreMessages.ts`, clearing `olderMessages` (and resetting `oldestSequence`/`hasMore`) when `initialOldestSequence` shifts on the same session is intentional. Pages already fetched were based on a now-stale cursor; retaining them risks sequence gaps or duplicates. `ScrollPreserver` keeps the currently visible viewport intact, so only unvisited older pages are dropped. This is a deliberate safe-refetch design tradeoff.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/ChatSessionList.tsx
📚 Learning: 2026-03-17T06:18:46.285Z
Learnt from: majdyz
Repo: Significant-Gravitas/AutoGPT PR: 12445
File: autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx:55-67
Timestamp: 2026-03-17T06:18:46.285Z
Learning: In `autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx`, an explicit `isBusy` guard on the retry handler (`handleRetry`) is not needed. Once `onSend` is invoked, the chat status immediately transitions to "submitted", which causes the `ErrorCard` (containing the retry button) to unmount before a second click can register, making double-send impossible by design.
Applied to files:
autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Structure components as `ComponentName/ComponentName.tsx` + `useComponentName.ts` + `helpers.ts` and use design system components from `src/components/` (atoms, molecules, organisms)
Applied to files:
autogpt_platform/frontend/src/app/(platform)/layout.tsxautogpt_platform/frontend/src/components/ui/sidebar.tsxautogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/**/*.{ts,tsx} : Use function declarations (not arrow functions) for components and handlers
Applied to files:
autogpt_platform/frontend/src/components/ui/sidebar.tsx
📚 Learning: 2026-02-04T16:50:51.495Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-04T16:50:51.495Z
Learning: Applies to autogpt_platform/frontend/src/**/*.{ts,tsx} : Use function declarations (not arrow functions) for components and handlers
Applied to files:
autogpt_platform/frontend/src/components/ui/sidebar.tsx
📚 Learning: 2026-02-04T16:49:42.490Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2026-02-04T16:49:42.490Z
Learning: Applies to autogpt_platform/frontend/**/*.{tsx,ts} : Use PascalCase for component names and camelCase with 'use' prefix for hook names in React
Applied to files:
autogpt_platform/frontend/src/components/ui/sidebar.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/**/*.tsx : Use Next.js `<Link>` for internal navigation — never raw `<a>` tags
Applied to files:
autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsx
📚 Learning: 2026-03-20T09:30:38.357Z
Learnt from: CR
Repo: Significant-Gravitas/AutoGPT PR: 0
File: autogpt_platform/frontend/CLAUDE.md:0-0
Timestamp: 2026-03-20T09:30:38.357Z
Learning: Applies to autogpt_platform/frontend/**/*.tsx : Use design system components from `src/components/` (atoms, molecules, organisms); never use `src/components/__legacy__/*`
Applied to files:
autogpt_platform/frontend/src/components/layout/Navbar/Navbar.tsxautogpt_platform/frontend/src/components/layout/AppSidebar/AppSidebar.tsx
🔇 Additional comments (4)
autogpt_platform/frontend/src/lib/constants.ts (1)
13-13: LGTM.Centralizing the navbar height change in the shared constant keeps downstream layout calculations aligned.
autogpt_platform/frontend/src/services/feature-flags/use-get-flag.ts (1)
30-30: LGTM.This keeps environments without LaunchDarkly aligned with the new default chat rollout.
autogpt_platform/frontend/src/components/ui/sidebar.tsx (1)
30-31: LGTM.Updating both desktop and mobile widths together keeps the provider and sheet sizing consistent.
autogpt_platform/frontend/src/app/(platform)/layout.tsx (1)
13-21: Nice shell consolidation.Moving
SidebarProviderandAppSidebarup to the platform layout removes the page-level wrapper duplication and keeps scrolling scoped to the content pane.
This was referenced Mar 23, 2026
Abhi1992002
force-pushed
the
abhi/update-autogpt-layout
branch
from
March 25, 2026 04:44
c525247 to
0eb5133
Compare
github-actions
Bot
added
the
conflicts
Contributor
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
Contributor
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
github-actions
Bot
added
conflicts
Contributor
|
This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request. |
… content - Create AppSidebar component with logo, collapsible nav links (Home, Workflow, Explore, Builder, Settings), and dynamic content slot - Move navigation links and logo from Navbar into the sidebar - Add ChatSessionList extracted from ChatSidebar for copilot route - Add route-based SidebarDynamicContent (chat list on copilot, placeholder on other pages) - Simplify Navbar to only show search input with dynamic placeholder, nav arrows, and right-side items (activity, wallet, account) - Remove SidebarProvider and ChatSidebar from CopilotPage (now handled at layout level) - Wrap platform layout in SidebarProvider with AppSidebar
…om navbar, move to sidebar - Remove AutoGPT logo and navigation links from the top navbar - Add border-bottom to navbar matching sidebar border color - Remove bell icon (AgentActivityDropdown) from sidebar header - Remove Workspace Files navlink from sidebar - Remove generic text labels from sidebar dynamic content section - Make page content scrollable (overflow-auto instead of overflow-hidden)
…ing, fix sidebar - Replace hardcoded bg colors with bg-background design token in CopilotPage and globals.css - Make sidebar nav item conditional: show "Library" instead of "Copilot" when chat flag disabled - Add ErrorCard for session query failures instead of collapsing to empty state - Remove redundant refetch-on-selection useEffect (mutations + polling already handle freshness) - Forward className and remaining props in SidebarTrigger to avoid silently dropping consumer props
PulseLoader was removed in dev (500b345). Use CircleNotch from Phosphor with animate-spin to match the ChatSidebar pattern.
The activity badge hook fetched executions only once on mount, missing runs started after initial load. Added refetchInterval (5s) and increased test badge timeout to account for polling delay.
Use inline type instead of imported LibraryAgent to avoid mismatch between generated API types and legacy backend API client types.
Abhi1992002
force-pushed
the
abhi/update-autogpt-layout
branch
from
March 28, 2026 04:12
540f8e9 to
ecfa1af
Compare
Contributor
|
Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly. |
github-actions
Bot
removed
the
conflicts
github-project-automation
Bot
moved this from 🆕 Needs initial review
to ✅ Done
in AutoGPT development kanban
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Moves navigation and the AutoGPT logo out of the top navbar and into a new collapsible left sidebar, creating a more spacious layout. The copilot chat session list (previously scoped to the copilot page) is now rendered as dynamic sidebar content visible app-wide when on the /copilot route. The Chat feature flag default is flipped to
trueso copilot is available by default.Changes 🏗️
AppSidebarcomponent with nav links (Copilot, Workflow, Explore, Builder, Settings), logo, and collapse toggleSidebarDynamicContentthat rendersChatSessionListwhen on the copilot routeChatSessionListfrom the copilot-specificChatSidebarinto a shared layout componentSidebarProviderand removed the per-pageSidebarProvider/ChatSidebarfrom CopilotPageNavbar(kept right-side actions: wallet, activity, feedback, profile)#F6F7F8→#FAFAFAFlag.CHATdefault totrueFeatureFlagPagewrapper on copilot route and removedTallyPopupSimpleChecklist 📋
For code changes: