fix(copilot): move usage limits to sidebar bottom, add to billing page

- Move UsageLimits from top-right headerSlot to left sidebar footer
- Show usage limits on both main copilot page and inside chat sessions
- Add CoPilot Usage Limits section to billing/credits page
- Change "Learn more about usage limits" to "Manage billing & credits"
- Remove unused headerSlot prop from ChatContainer/ChatMessagesContainer
- Clean up unused imports in CopilotPage

autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx

@@ -1,14 +1,8 @@
 "use client";
 
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/molecules/DropdownMenu/DropdownMenu";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
-import { DotsThree, UploadSimple } from "@phosphor-icons/react";
+import { UploadSimple } from "@phosphor-icons/react";
 import { useCallback, useRef, useState } from "react";
 import { ChatContainer } from "./components/ChatContainer/ChatContainer";
 import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
@@ -18,7 +12,6 @@ import { MobileHeader } from "./components/MobileHeader/MobileHeader";
 import { NotificationBanner } from "./components/NotificationBanner/NotificationBanner";
 import { NotificationDialog } from "./components/NotificationDialog/NotificationDialog";
 import { ScaleLoader } from "./components/ScaleLoader/ScaleLoader";
-import { UsageLimits } from "./components/UsageLimits/UsageLimits";
 import { useCopilotPage } from "./useCopilotPage";
 
 export function CopilotPage() {
@@ -93,7 +86,6 @@ export function CopilotPage() {
     // Delete functionality
     sessionToDelete,
     isDeleting,
-    handleDeleteClick,
     handleConfirmDelete,
     handleCancelDelete,
   } = useCopilotPage();
@@ -149,41 +141,6 @@ export function CopilotPage() {
             isUploadingFiles={isUploadingFiles}
             droppedFiles={droppedFiles}
             onDroppedFilesConsumed={handleDroppedFilesConsumed}
-            headerSlot={
-              sessionId ? (
-                <div className="flex items-center justify-end gap-1">
-                  <UsageLimits />
-                  {isMobile && (
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          className="rounded p-1.5 hover:bg-neutral-100"
-                          aria-label="More actions"
-                        >
-                          <DotsThree className="h-5 w-5 text-neutral-600" />
-                        </button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => {
-                            const session = sessions.find(
-                              (s) => s.id === sessionId,
-                            );
-                            if (session) {
-                              handleDeleteClick(session.id, session.title);
-                            }
-                          }}
-                          disabled={isDeleting}
-                          className="text-red-600 focus:bg-red-50 focus:text-red-600"
-                        >
-                          Delete chat
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  )}
-                </div>
-              ) : undefined
-            }
           />
         </div>
       </div>

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatContainer/ChatContainer.tsx

@@ -2,7 +2,6 @@
 import { ChatInput } from "@/app/(platform)/copilot/components/ChatInput/ChatInput";
 import { UIDataTypes, UIMessage, UITools } from "ai";
 import { LayoutGroup, motion } from "framer-motion";
-import { ReactNode } from "react";
 import { ChatMessagesContainer } from "../ChatMessagesContainer/ChatMessagesContainer";
 import { CopilotChatActionsProvider } from "../CopilotChatActionsProvider/CopilotChatActionsProvider";
 import { EmptySession } from "../EmptySession/EmptySession";
@@ -21,7 +20,6 @@ export interface ChatContainerProps {
   onSend: (message: string, files?: File[]) => void | Promise<void>;
   onStop: () => void;
   isUploadingFiles?: boolean;
-  headerSlot?: ReactNode;
   /** Files dropped onto the chat window. */
   droppedFiles?: File[];
   /** Called after droppedFiles have been consumed by ChatInput. */
@@ -40,7 +38,6 @@ export const ChatContainer = ({
   onSend,
   onStop,
   isUploadingFiles,
-  headerSlot,
   droppedFiles,
   onDroppedFilesConsumed,
 }: ChatContainerProps) => {
@@ -63,7 +60,6 @@ export const ChatContainer = ({
                 status={status}
                 error={error}
                 isLoading={isLoadingSession}
-                headerSlot={headerSlot}
                 sessionID={sessionId}
               />
               <motion.div

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatMessagesContainer/ChatMessagesContainer.tsx

@@ -30,7 +30,6 @@ interface Props {
   status: string;
   error: Error | undefined;
   isLoading: boolean;
-  headerSlot?: React.ReactNode;
   sessionID?: string | null;
 }
 
@@ -102,7 +101,6 @@ export function ChatMessagesContainer({
   status,
   error,
   isLoading,
-  headerSlot,
   sessionID,
 }: Props) {
   const lastMessage = messages[messages.length - 1];
@@ -135,7 +133,6 @@ export function ChatMessagesContainer({
   return (
     <Conversation className="min-h-0 flex-1">
       <ConversationContent className="flex flex-1 flex-col gap-6 px-3 py-6">
-        {headerSlot}
         {isLoading && messages.length === 0 && (
           <div
             className="flex flex-1 items-center justify-center"

autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx

@@ -18,6 +18,7 @@ import { toast } from "@/components/molecules/Toast/use-toast";
 import {
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarHeader,
   SidebarTrigger,
   useSidebar,
@@ -37,6 +38,7 @@ import { useCopilotUIStore } from "../../store";
 import { NotificationToggle } from "./components/NotificationToggle/NotificationToggle";
 import { DeleteChatDialog } from "../DeleteChatDialog/DeleteChatDialog";
 import { PulseLoader } from "../PulseLoader/PulseLoader";
+import { UsageLimits } from "../UsageLimits/UsageLimits";
 
 export function ChatSidebar() {
   const { state } = useSidebar();
@@ -416,6 +418,11 @@ export function ChatSidebar() {
             </motion.div>
           )}
         </SidebarContent>
+        {!isCollapsed && (
+          <SidebarFooter className="border-t border-zinc-100 px-4 py-3">
+            <UsageLimits />
+          </SidebarFooter>
+        )}
       </Sidebar>
 
       <DeleteChatDialog

autogpt_platform/frontend/src/app/(platform)/copilot/components/UsageLimits/UsageLimits.tsx

@@ -1,10 +1,4 @@
 import type { CoPilotUsageStatus } from "@/app/api/__generated__/models/coPilotUsageStatus";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/molecules/Popover/Popover";
-import { ChartBar } from "@phosphor-icons/react";
 import { useUsageLimits } from "./useUsageLimits";
 
 function formatResetTime(resetsAt: Date): string {
@@ -59,7 +53,13 @@ function UsageBar({
   );
 }
 
-function UsagePanelContent({ usage }: { usage: CoPilotUsageStatus }) {
+export function UsagePanelContent({
+  usage,
+  showBillingLink = true,
+}: {
+  usage: CoPilotUsageStatus;
+  showBillingLink?: boolean;
+}) {
   const hasDailyLimit = usage.daily.limit > 0;
   const hasWeeklyLimit = usage.weekly.limit > 0;
 
@@ -92,12 +92,14 @@ function UsagePanelContent({ usage }: { usage: CoPilotUsageStatus }) {
           resetsAt={usage.weekly.resets_at}
         />
       )}
-      <a
-        href="/profile/credits"
-        className="text-[11px] text-blue-600 hover:underline dark:text-blue-400"
-      >
-        Learn more about usage limits
-      </a>
+      {showBillingLink && (
+        <a
+          href="/profile/credits"
+          className="text-[11px] text-blue-600 hover:underline dark:text-blue-400"
+        >
+          Manage billing &amp; credits
+        </a>
+      )}
     </div>
   );
 }
@@ -105,23 +107,8 @@ function UsagePanelContent({ usage }: { usage: CoPilotUsageStatus }) {
 export function UsageLimits() {
   const { data: usage, isLoading } = useUsageLimits();
 
-  // Don't show if no limits configured or still loading
   if (isLoading || !usage) return null;
   if (usage.daily.limit <= 0 && usage.weekly.limit <= 0) return null;
 
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <button
-          className="rounded p-1.5 hover:bg-neutral-100 dark:hover:bg-neutral-800"
-          aria-label="Usage limits"
-        >
-          <ChartBar className="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
-        </button>
-      </PopoverTrigger>
-      <PopoverContent align="end" className="w-72 p-4">
-        <UsagePanelContent usage={usage} />
-      </PopoverContent>
-    </Popover>
-  );
+  return <UsagePanelContent usage={usage} />;
 }

autogpt_platform/frontend/src/app/(platform)/profile/(user)/credits/page.tsx

@@ -11,6 +11,8 @@ import {
 
 import { RefundModal } from "./RefundModal";
 import { CreditTransaction } from "@/lib/autogpt-server-api";
+import { UsagePanelContent } from "@/app/(platform)/copilot/components/UsageLimits/UsageLimits";
+import { useUsageLimits } from "@/app/(platform)/copilot/components/UsageLimits/useUsageLimits";
 
 import {
   Table,
@@ -21,6 +23,22 @@ import {
   TableRow,
 } from "@/components/__legacy__/ui/table";
 
+function CoPilotUsageSection() {
+  const { data: usage, isLoading } = useUsageLimits();
+
+  if (isLoading || !usage) return null;
+  if (usage.daily.limit <= 0 && usage.weekly.limit <= 0) return null;
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-medium">CoPilot Usage Limits</h3>
+      <div className="rounded-lg border border-neutral-200 p-4 dark:border-neutral-700">
+        <UsagePanelContent usage={usage} showBillingLink={false} />
+      </div>
+    </div>
+  );
+}
+
 export default function CreditsPage() {
   const api = useBackendAPI();
   const {
@@ -240,8 +258,10 @@ export default function CreditsPage() {
         </div>
 
         <div className="my-6 space-y-4">
-          {/* Payment Portal */}
+          {/* CoPilot Usage Limits */}
+          <CoPilotUsageSection />
 
+          {/* Payment Portal */}
           <h3 className="text-lg font-medium">Manage Your Payment Methods</h3>
           <p className="text-neutral-600">
             You can manage your cards and see your payment history in the