refactor(copilot): Extract DeleteChatDialog to own component

Move delete confirmation dialog from ChatSidebar to reusable component:
- Create DeleteChatDialog under app/copilot/components
- Clean props interface: session, isDeleting, onConfirm, onCancel
- Update ChatSidebar to use new component
- All existing tests pass

.github/workflows/platform-backend-ci.yml

@@ -41,13 +41,18 @@ jobs:
         ports:
           - 6379:6379
       rabbitmq:
-        image: rabbitmq:3.12-management
+        image: rabbitmq:4.1.4
         ports:
           - 5672:5672
-          - 15672:15672
         env:
           RABBITMQ_DEFAULT_USER: ${{ env.RABBITMQ_DEFAULT_USER }}
           RABBITMQ_DEFAULT_PASS: ${{ env.RABBITMQ_DEFAULT_PASS }}
+        options: >-
+          --health-cmd "rabbitmq-diagnostics -q ping"
+          --health-interval 30s
+          --health-timeout 10s
+          --health-retries 5
+          --health-start-period 10s
       clamav:
         image: clamav/clamav-debian:latest
         ports:

.github/workflows/platform-frontend-ci.yml

@@ -6,10 +6,16 @@ on:
     paths:
       - ".github/workflows/platform-frontend-ci.yml"
       - "autogpt_platform/frontend/**"
+      - "autogpt_platform/backend/Dockerfile"
+      - "autogpt_platform/docker-compose.yml"
+      - "autogpt_platform/docker-compose.platform.yml"
   pull_request:
     paths:
       - ".github/workflows/platform-frontend-ci.yml"
       - "autogpt_platform/frontend/**"
+      - "autogpt_platform/backend/Dockerfile"
+      - "autogpt_platform/docker-compose.yml"
+      - "autogpt_platform/docker-compose.platform.yml"
   merge_group:
   workflow_dispatch:
 

autogpt_platform/backend/Dockerfile

@@ -53,63 +53,6 @@ COPY autogpt_platform/backend/backend/data/partial_types.py ./backend/data/parti
 COPY autogpt_platform/backend/gen_prisma_types_stub.py ./
 RUN poetry run prisma generate && poetry run gen-prisma-stub
 
-# ============================== BACKEND SERVER ============================== #
-
-FROM debian:13-slim AS server
-
-WORKDIR /app
-
-ENV POETRY_HOME=/opt/poetry \
-    POETRY_NO_INTERACTION=1 \
-    POETRY_VIRTUALENVS_CREATE=true \
-    POETRY_VIRTUALENVS_IN_PROJECT=true \
-    DEBIAN_FRONTEND=noninteractive
-ENV PATH=/opt/poetry/bin:$PATH
-
-# Install Python, FFmpeg, ImageMagick, and CLI tools for agent use.
-# bubblewrap provides OS-level sandbox (whitelist-only FS + no network)
-# for the bash_exec MCP tool.
-# Using --no-install-recommends saves ~650MB by skipping unnecessary deps like llvm, mesa, etc.
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    python3.13 \
-    python3-pip \
-    ffmpeg \
-    imagemagick \
-    jq \
-    ripgrep \
-    tree \
-    bubblewrap \
-    && rm -rf /var/lib/apt/lists/*
-
-COPY --from=builder /usr/local/lib/python3* /usr/local/lib/python3*
-COPY --from=builder /usr/local/bin/poetry /usr/local/bin/poetry
-# Copy Node.js installation for Prisma
-COPY --from=builder /usr/bin/node /usr/bin/node
-COPY --from=builder /usr/lib/node_modules /usr/lib/node_modules
-COPY --from=builder /usr/bin/npm /usr/bin/npm
-COPY --from=builder /usr/bin/npx /usr/bin/npx
-COPY --from=builder /root/.cache/prisma-python/binaries /root/.cache/prisma-python/binaries
-
-WORKDIR /app/autogpt_platform/backend
-
-# Copy only the .venv from builder (not the entire /app directory)
-# The .venv includes the generated Prisma client
-COPY --from=builder /app/autogpt_platform/backend/.venv ./.venv
-ENV PATH="/app/autogpt_platform/backend/.venv/bin:$PATH"
-
-# Copy dependency files + autogpt_libs (path dependency)
-COPY autogpt_platform/autogpt_libs /app/autogpt_platform/autogpt_libs
-COPY autogpt_platform/backend/poetry.lock autogpt_platform/backend/pyproject.toml ./
-
-# Copy backend code + docs (for Copilot docs search)
-COPY autogpt_platform/backend ./
-COPY docs /app/docs
-RUN poetry install --no-ansi --only-root
-
-ENV PORT=8000
-
-CMD ["poetry", "run", "rest"]
-
 # =============================== DB MIGRATOR =============================== #
 
 # Lightweight migrate stage - only needs Prisma CLI, not full Python environment
@@ -141,3 +84,59 @@ COPY autogpt_platform/backend/schema.prisma ./
 COPY autogpt_platform/backend/backend/data/partial_types.py ./backend/data/partial_types.py
 COPY autogpt_platform/backend/gen_prisma_types_stub.py ./
 COPY autogpt_platform/backend/migrations ./migrations
+
+# ============================== BACKEND SERVER ============================== #
+
+FROM debian:13-slim AS server
+
+WORKDIR /app
+
+ENV DEBIAN_FRONTEND=noninteractive
+
+# Install Python, FFmpeg, ImageMagick, and CLI tools for agent use.
+# bubblewrap provides OS-level sandbox (whitelist-only FS + no network)
+# for the bash_exec MCP tool.
+# Using --no-install-recommends saves ~650MB by skipping unnecessary deps like llvm, mesa, etc.
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    python3.13 \
+    python3-pip \
+    ffmpeg \
+    imagemagick \
+    jq \
+    ripgrep \
+    tree \
+    bubblewrap \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy poetry (build-time only, for `poetry install --only-root` to create entry points)
+COPY --from=builder /usr/local/lib/python3* /usr/local/lib/python3*
+COPY --from=builder /usr/local/bin/poetry /usr/local/bin/poetry
+# Copy Node.js installation for Prisma
+COPY --from=builder /usr/bin/node /usr/bin/node
+COPY --from=builder /usr/lib/node_modules /usr/lib/node_modules
+COPY --from=builder /usr/bin/npm /usr/bin/npm
+COPY --from=builder /usr/bin/npx /usr/bin/npx
+COPY --from=builder /root/.cache/prisma-python/binaries /root/.cache/prisma-python/binaries
+
+WORKDIR /app/autogpt_platform/backend
+
+# Copy only the .venv from builder (not the entire /app directory)
+# The .venv includes the generated Prisma client
+COPY --from=builder /app/autogpt_platform/backend/.venv ./.venv
+ENV PATH="/app/autogpt_platform/backend/.venv/bin:$PATH"
+
+# Copy dependency files + autogpt_libs (path dependency)
+COPY autogpt_platform/autogpt_libs /app/autogpt_platform/autogpt_libs
+COPY autogpt_platform/backend/poetry.lock autogpt_platform/backend/pyproject.toml ./
+
+# Copy backend code + docs (for Copilot docs search)
+COPY autogpt_platform/backend ./
+COPY docs /app/docs
+# Install the project package to create entry point scripts in .venv/bin/
+# (e.g., rest, executor, ws, db, scheduler, notification - see [tool.poetry.scripts])
+RUN POETRY_VIRTUALENVS_CREATE=true POETRY_VIRTUALENVS_IN_PROJECT=true \
+    poetry install --no-ansi --only-root
+
+ENV PORT=8000
+
+CMD ["rest"]

autogpt_platform/backend/backend/api/features/chat/routes.py

@@ -23,6 +23,7 @@ from .model import (
     ChatSession,
     append_and_save_message,
     create_chat_session,
+    delete_chat_session,
     get_chat_session,
     get_user_sessions,
 )
@@ -211,6 +212,43 @@ async def create_session(
     )
 
 
+@router.delete(
+    "/sessions/{session_id}",
+    dependencies=[Security(auth.requires_user)],
+    status_code=204,
+    responses={404: {"description": "Session not found or access denied"}},
+)
+async def delete_session(
+    session_id: str,
+    user_id: Annotated[str, Security(auth.get_user_id)],
+) -> Response:
+    """
+    Delete a chat session.
+
+    Permanently removes a chat session and all its messages.
+    Only the owner can delete their sessions.
+
+    Args:
+        session_id: The session ID to delete.
+        user_id: The authenticated user's ID.
+
+    Returns:
+        204 No Content on success.
+
+    Raises:
+        HTTPException: 404 if session not found or not owned by user.
+    """
+    deleted = await delete_chat_session(session_id, user_id)
+
+    if not deleted:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Session {session_id} not found or access denied",
+        )
+
+    return Response(status_code=204)
+
+
 @router.get(
     "/sessions/{session_id}",
 )

autogpt_platform/backend/docker-compose.test.yaml

@@ -53,7 +53,7 @@ services:
 
   rabbitmq:
     <<: *agpt-services
-    image: rabbitmq:management
+    image: rabbitmq:4.1.4
     container_name: rabbitmq
     healthcheck:
       test: rabbitmq-diagnostics -q ping
@@ -66,7 +66,6 @@ services:
       - RABBITMQ_DEFAULT_PASS=k0VMxyIJF9S35f3x2uaw5IWAl6Y536O7
     ports:
       - "5672:5672"
-      - "15672:15672"
   clamav:
     image: clamav/clamav-debian:latest
     ports:

autogpt_platform/docker-compose.platform.yml

@@ -75,7 +75,7 @@ services:
       timeout: 5s
       retries: 5
   rabbitmq:
-    image: rabbitmq:management
+    image: rabbitmq:4.1.4
     container_name: rabbitmq
     healthcheck:
       test: rabbitmq-diagnostics -q ping
@@ -88,14 +88,13 @@ services:
       <<: *backend-env
     ports:
       - "5672:5672"
-      - "15672:15672"
 
   rest_server:
     build:
       context: ../
       dockerfile: autogpt_platform/backend/Dockerfile
       target: server
-    command: ["python", "-m", "backend.rest"]
+    command: ["rest"] # points to entry in [tool.poetry.scripts] in pyproject.toml
     develop:
       watch:
         - path: ./
@@ -128,7 +127,7 @@ services:
       context: ../
       dockerfile: autogpt_platform/backend/Dockerfile
       target: server
-    command: ["python", "-m", "backend.exec"]
+    command: ["executor"] # points to entry in [tool.poetry.scripts] in pyproject.toml
     develop:
       watch:
         - path: ./
@@ -163,7 +162,7 @@ services:
       context: ../
       dockerfile: autogpt_platform/backend/Dockerfile
       target: server
-    command: ["python", "-m", "backend.ws"]
+    command: ["ws"] # points to entry in [tool.poetry.scripts] in pyproject.toml
     develop:
       watch:
         - path: ./
@@ -196,7 +195,7 @@ services:
       context: ../
       dockerfile: autogpt_platform/backend/Dockerfile
       target: server
-    command: ["python", "-m", "backend.db"]
+    command: ["db"] # points to entry in [tool.poetry.scripts] in pyproject.toml
     develop:
       watch:
         - path: ./
@@ -225,7 +224,7 @@ services:
       context: ../
       dockerfile: autogpt_platform/backend/Dockerfile
       target: server
-    command: ["python", "-m", "backend.scheduler"]
+    command: ["scheduler"] # points to entry in [tool.poetry.scripts] in pyproject.toml
     develop:
       watch:
         - path: ./
@@ -273,7 +272,7 @@ services:
       context: ../
       dockerfile: autogpt_platform/backend/Dockerfile
       target: server
-    command: ["python", "-m", "backend.notification"]
+    command: ["notification"] # points to entry in [tool.poetry.scripts] in pyproject.toml
     develop:
       watch:
         - path: ./

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

@@ -1,5 +1,7 @@
 "use client";
 
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { ChatContainer } from "./components/ChatContainer/ChatContainer";
 import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
@@ -31,6 +33,12 @@ export function CopilotPage() {
     handleDrawerOpenChange,
     handleSelectSession,
     handleNewChat,
+    // Delete functionality
+    sessionToDelete,
+    isDeleting,
+    handleDeleteClick,
+    handleConfirmDelete,
+    handleCancelDelete,
   } = useCopilotPage();
 
   if (isUserLoading || !isLoggedIn) {
@@ -48,7 +56,19 @@ export function CopilotPage() {
     >
       {!isMobile && <ChatSidebar />}
       <div className="relative flex h-full w-full flex-col overflow-hidden bg-[#f8f8f9] px-0">
-        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
+        {isMobile && (
+          <MobileHeader
+            onOpenDrawer={handleOpenDrawer}
+            showDelete={!!sessionId}
+            isDeleting={isDeleting}
+            onDelete={() => {
+              const session = sessions.find((s) => s.id === sessionId);
+              if (session) {
+                handleDeleteClick(session.id, session.title);
+              }
+            }}
+          />
+        )}
         <div className="flex-1 overflow-hidden">
           <ChatContainer
             messages={messages}
@@ -75,6 +95,50 @@ export function CopilotPage() {
           onOpenChange={handleDrawerOpenChange}
         />
       )}
+      {/* Delete confirmation dialog - rendered at top level for proper z-index on mobile */}
+      {isMobile && (
+        <Dialog
+          title="Delete chat"
+          controlled={{
+            isOpen: !!sessionToDelete,
+            set: async (open) => {
+              if (!open && !isDeleting) {
+                handleCancelDelete();
+              }
+            },
+          }}
+          onClose={handleCancelDelete}
+        >
+          <Dialog.Content>
+            <p className="text-neutral-600">
+              Are you sure you want to delete{" "}
+              <span className="font-medium">
+                &quot;{sessionToDelete?.title || "Untitled chat"}&quot;
+              </span>
+              ? This action cannot be undone.
+            </p>
+            <Dialog.Footer>
+              <Button
+                variant="ghost"
+                size="small"
+                onClick={handleCancelDelete}
+                disabled={isDeleting}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="primary"
+                size="small"
+                onClick={handleConfirmDelete}
+                loading={isDeleting}
+                className="bg-red-600 hover:bg-red-700"
+              >
+                Delete
+              </Button>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog>
+      )}
     </SidebarProvider>
   );
 }

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

@@ -1,8 +1,14 @@
 "use client";
-import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import {
+  getGetV2ListSessionsQueryKey,
+  useDeleteV2DeleteSession,
+  useGetV2ListSessions,
+} from "@/app/api/__generated__/endpoints/chat/chat";
 import { Button } from "@/components/atoms/Button/Button";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Text } from "@/components/atoms/Text/Text";
+import { toast } from "@/components/molecules/Toast/use-toast";
+import { DeleteChatDialog } from "../DeleteChatDialog";
 import {
   Sidebar,
   SidebarContent,
@@ -12,18 +18,52 @@ import {
   useSidebar,
 } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
-import { PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
+import { PlusCircleIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { motion } from "framer-motion";
+import { useState } from "react";
 import { parseAsString, useQueryState } from "nuqs";
 
 export function ChatSidebar() {
   const { state } = useSidebar();
   const isCollapsed = state === "collapsed";
   const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+  const [sessionToDelete, setSessionToDelete] = useState<{
+    id: string;
+    title: string | null | undefined;
+  } | null>(null);
+
+  const queryClient = useQueryClient();
 
   const { data: sessionsResponse, isLoading: isLoadingSessions } =
     useGetV2ListSessions({ limit: 50 });
 
+  const { mutate: deleteSession, isPending: isDeleting } =
+    useDeleteV2DeleteSession({
+      mutation: {
+        onSuccess: () => {
+          // Invalidate sessions list to refetch
+          queryClient.invalidateQueries({
+            queryKey: getGetV2ListSessionsQueryKey(),
+          });
+          // If we deleted the current session, clear selection
+          if (sessionToDelete?.id === sessionId) {
+            setSessionId(null);
+          }
+          setSessionToDelete(null);
+        },
+        onError: (error) => {
+          toast({
+            title: "Failed to delete chat",
+            description:
+              error instanceof Error ? error.message : "An error occurred",
+            variant: "destructive",
+          });
+          setSessionToDelete(null);
+        },
+      },
+    });
+
   const sessions =
     sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
 
@@ -35,6 +75,28 @@ export function ChatSidebar() {
     setSessionId(id);
   }
 
+  function handleDeleteClick(
+    e: React.MouseEvent,
+    id: string,
+    title: string | null | undefined,
+  ) {
+    e.stopPropagation(); // Prevent session selection
+    if (isDeleting) return; // Prevent double-click during deletion
+    setSessionToDelete({ id, title });
+  }
+
+  function handleConfirmDelete() {
+    if (sessionToDelete) {
+      deleteSession({ sessionId: sessionToDelete.id });
+    }
+  }
+
+  function handleCancelDelete() {
+    if (!isDeleting) {
+      setSessionToDelete(null);
+    }
+  }
+
   function formatDate(dateString: string) {
     const date = new Date(dateString);
     const now = new Date();
@@ -61,128 +123,151 @@ export function ChatSidebar() {
   }
 
   return (
-    <Sidebar
-      variant="inset"
-      collapsible="icon"
-      className="!top-[50px] !h-[calc(100vh-50px)] border-r border-zinc-100 px-0"
-    >
-      {isCollapsed && (
-        <SidebarHeader
-          className={cn(
-            "flex",
-            isCollapsed
-              ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
-              : "flex-row items-center justify-between",
-          )}
-        >
-          <motion.div
-            key={isCollapsed ? "header-collapsed" : "header-expanded"}
-            className="flex flex-col items-center gap-3 pt-4"
-            initial={{ opacity: 0, filter: "blur(3px)" }}
-            animate={{ opacity: 1, filter: "blur(0px)" }}
-            transition={{ type: "spring", bounce: 0.2 }}
-          >
-            <div className="flex flex-col items-center gap-2">
-              <SidebarTrigger />
-              <Button
-                variant="ghost"
-                onClick={handleNewChat}
-                style={{ minWidth: "auto", width: "auto" }}
-              >
-                <PlusCircleIcon className="!size-5" />
-                <span className="sr-only">New Chat</span>
-              </Button>
-            </div>
-          </motion.div>
-        </SidebarHeader>
-      )}
-      <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        {!isCollapsed && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.1 }}
-            className="flex items-center justify-between px-3"
-          >
-            <Text variant="h3" size="body-medium">
-              Your chats
-            </Text>
-            <div className="relative left-6">
-              <SidebarTrigger />
-            </div>
-          </motion.div>
-        )}
-
-        {!isCollapsed && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.15 }}
-            className="mt-4 flex flex-col gap-1"
-          >
-            {isLoadingSessions ? (
-              <div className="flex min-h-[30rem] items-center justify-center py-4">
-                <LoadingSpinner size="small" className="text-neutral-600" />
-              </div>
-            ) : sessions.length === 0 ? (
-              <p className="py-4 text-center text-sm text-neutral-500">
-                No conversations yet
-              </p>
-            ) : (
-              sessions.map((session) => (
-                <button
-                  key={session.id}
-                  onClick={() => handleSelectSession(session.id)}
-                  className={cn(
-                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
-                    session.id === sessionId
-                      ? "bg-zinc-100"
-                      : "hover:bg-zinc-50",
-                  )}
-                >
-                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
-                    <div className="min-w-0 max-w-full">
-                      <Text
-                        variant="body"
-                        className={cn(
-                          "truncate font-normal",
-                          session.id === sessionId
-                            ? "text-zinc-600"
-                            : "text-zinc-800",
-                        )}
-                      >
-                        {session.title || `Untitled chat`}
-                      </Text>
-                    </div>
-                    <Text variant="small" className="text-neutral-400">
-                      {formatDate(session.updated_at)}
-                    </Text>
-                  </div>
-                </button>
-              ))
+    <>
+      <Sidebar
+        variant="inset"
+        collapsible="icon"
+        className="!top-[50px] !h-[calc(100vh-50px)] border-r border-zinc-100 px-0"
+      >
+        {isCollapsed && (
+          <SidebarHeader
+            className={cn(
+              "flex",
+              isCollapsed
+                ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
+                : "flex-row items-center justify-between",
             )}
-          </motion.div>
-        )}
-      </SidebarContent>
-      {!isCollapsed && sessionId && (
-        <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.2 }}
           >
-            <Button
-              variant="primary"
-              size="small"
-              onClick={handleNewChat}
-              className="w-full"
-              leftIcon={<PlusIcon className="h-4 w-4" weight="bold" />}
+            <motion.div
+              key={isCollapsed ? "header-collapsed" : "header-expanded"}
+              className="flex flex-col items-center gap-3 pt-4"
+              initial={{ opacity: 0, filter: "blur(3px)" }}
+              animate={{ opacity: 1, filter: "blur(0px)" }}
+              transition={{ type: "spring", bounce: 0.2 }}
             >
-              New Chat
-            </Button>
-          </motion.div>
-        </SidebarFooter>
-      )}
-    </Sidebar>
+              <div className="flex flex-col items-center gap-2">
+                <SidebarTrigger />
+                <Button
+                  variant="ghost"
+                  onClick={handleNewChat}
+                  style={{ minWidth: "auto", width: "auto" }}
+                >
+                  <PlusCircleIcon className="!size-5" />
+                  <span className="sr-only">New Chat</span>
+                </Button>
+              </div>
+            </motion.div>
+          </SidebarHeader>
+        )}
+        <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {!isCollapsed && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+              className="flex items-center justify-between px-3"
+            >
+              <Text variant="h3" size="body-medium">
+                Your chats
+              </Text>
+              <div className="relative left-6">
+                <SidebarTrigger />
+              </div>
+            </motion.div>
+          )}
+
+          {!isCollapsed && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.2, delay: 0.15 }}
+              className="mt-4 flex flex-col gap-1"
+            >
+              {isLoadingSessions ? (
+                <div className="flex min-h-[30rem] items-center justify-center py-4">
+                  <LoadingSpinner size="small" className="text-neutral-600" />
+                </div>
+              ) : sessions.length === 0 ? (
+                <p className="py-4 text-center text-sm text-neutral-500">
+                  No conversations yet
+                </p>
+              ) : (
+                sessions.map((session) => (
+                  <div
+                    key={session.id}
+                    className={cn(
+                      "group relative w-full rounded-lg transition-colors",
+                      session.id === sessionId
+                        ? "bg-zinc-100"
+                        : "hover:bg-zinc-50",
+                    )}
+                  >
+                    <button
+                      onClick={() => handleSelectSession(session.id)}
+                      className="w-full px-3 py-2.5 pr-10 text-left"
+                    >
+                      <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
+                        <div className="min-w-0 max-w-full">
+                          <Text
+                            variant="body"
+                            className={cn(
+                              "truncate font-normal",
+                              session.id === sessionId
+                                ? "text-zinc-600"
+                                : "text-zinc-800",
+                            )}
+                          >
+                            {session.title || `Untitled chat`}
+                          </Text>
+                        </div>
+                        <Text variant="small" className="text-neutral-400">
+                          {formatDate(session.updated_at)}
+                        </Text>
+                      </div>
+                    </button>
+                    <button
+                      onClick={(e) =>
+                        handleDeleteClick(e, session.id, session.title)
+                      }
+                      disabled={isDeleting}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1.5 text-zinc-400 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-100 hover:text-red-600 focus-visible:opacity-100 disabled:cursor-not-allowed disabled:opacity-50"
+                      aria-label="Delete chat"
+                    >
+                      <TrashIcon className="h-4 w-4" />
+                    </button>
+                  </div>
+                ))
+              )}
+            </motion.div>
+          )}
+        </SidebarContent>
+        {!isCollapsed && sessionId && (
+          <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.2, delay: 0.2 }}
+            >
+              <Button
+                variant="primary"
+                size="small"
+                onClick={handleNewChat}
+                className="w-full"
+                leftIcon={<PlusIcon className="h-4 w-4" weight="bold" />}
+              >
+                New Chat
+              </Button>
+            </motion.div>
+          </SidebarFooter>
+        )}
+      </Sidebar>
+
+      <DeleteChatDialog
+        session={sessionToDelete}
+        isDeleting={isDeleting}
+        onConfirm={handleConfirmDelete}
+        onCancel={handleCancelDelete}
+      />
+    </>
   );
 }

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

@@ -0,0 +1,350 @@
+import { expect, test, describe, vi, beforeEach, afterEach } from "vitest";
+import {
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+  cleanup,
+} from "@testing-library/react";
+import { ChatSidebar } from "../ChatSidebar";
+import { server } from "@/mocks/mock-server";
+import {
+  getGetV2ListSessionsMockHandler,
+  getDeleteV2DeleteSessionMockHandler204,
+  getDeleteV2DeleteSessionMockHandler422,
+} from "@/app/api/__generated__/endpoints/chat/chat.msw";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { NuqsTestingAdapter } from "nuqs/adapters/testing";
+import { http, HttpResponse, delay } from "msw";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BackendAPIProvider } from "@/lib/autogpt-server-api/context";
+
+// Mock sessions data
+const mockSessions = {
+  sessions: [
+    {
+      id: "session-1",
+      title: "First Chat",
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    },
+    {
+      id: "session-2",
+      title: "Second Chat",
+      created_at: new Date(Date.now() - 86400000).toISOString(),
+      updated_at: new Date(Date.now() - 86400000).toISOString(),
+    },
+    {
+      id: "session-3",
+      title: null,
+      created_at: new Date(Date.now() - 172800000).toISOString(),
+      updated_at: new Date(Date.now() - 172800000).toISOString(),
+    },
+  ],
+  total: 3,
+};
+
+function createTestQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+}
+
+function TestWrapper({
+  children,
+  searchParams = "",
+  onUrlUpdate,
+}: {
+  children: React.ReactNode;
+  searchParams?: string;
+  onUrlUpdate?: (event: { queryString: string }) => void;
+}) {
+  const queryClient = createTestQueryClient();
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BackendAPIProvider>
+        <NuqsTestingAdapter
+          searchParams={searchParams}
+          hasMemory
+          onUrlUpdate={onUrlUpdate}
+        >
+          <SidebarProvider defaultOpen={true}>{children}</SidebarProvider>
+        </NuqsTestingAdapter>
+      </BackendAPIProvider>
+    </QueryClientProvider>
+  );
+}
+
+function renderChatSidebar(
+  searchParams = "",
+  onUrlUpdate?: (event: { queryString: string }) => void,
+) {
+  return render(
+    <TestWrapper searchParams={searchParams} onUrlUpdate={onUrlUpdate}>
+      <ChatSidebar />
+    </TestWrapper>,
+  );
+}
+
+describe("ChatSidebar", () => {
+  beforeEach(() => {
+    server.use(
+      getGetV2ListSessionsMockHandler(() => mockSessions),
+      getDeleteV2DeleteSessionMockHandler204(),
+    );
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe("Sessions List", () => {
+    test("renders session list correctly", async () => {
+      renderChatSidebar();
+
+      // Use getAllByText since component may render multiple times
+      await waitFor(() => {
+        const elements = screen.getAllByText("First Chat");
+        expect(elements.length).toBeGreaterThan(0);
+      });
+
+      expect(screen.getAllByText("Second Chat").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Untitled chat").length).toBeGreaterThan(0);
+    });
+
+    test("shows empty state when no sessions", async () => {
+      server.use(
+        getGetV2ListSessionsMockHandler(() => ({
+          sessions: [],
+          total: 0,
+        })),
+      );
+
+      renderChatSidebar();
+
+      await waitFor(() => {
+        expect(
+          screen.getAllByText("No conversations yet").length,
+        ).toBeGreaterThan(0);
+      });
+    });
+
+    test("formats dates correctly", async () => {
+      renderChatSidebar();
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      expect(screen.getAllByText("Today").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Yesterday").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("2 days ago").length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Delete Dialog", () => {
+    test("opens delete dialog when trash button is clicked", async () => {
+      renderChatSidebar();
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      // Find and click the delete button for the first session
+      const deleteButtons = screen.getAllByLabelText("Delete chat");
+      fireEvent.click(deleteButtons[0]);
+
+      // Dialog should appear with confirmation text
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Are you sure you want to delete/),
+        ).toBeDefined();
+      });
+    });
+
+    test("closes dialog when cancel is clicked", async () => {
+      renderChatSidebar();
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      const deleteButtons = screen.getAllByLabelText("Delete chat");
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Are you sure you want to delete/),
+        ).toBeDefined();
+      });
+
+      const cancelButton = screen.getByRole("button", { name: "Cancel" });
+      fireEvent.click(cancelButton);
+
+      await waitFor(() => {
+        expect(
+          screen.queryByText(/Are you sure you want to delete/),
+        ).toBeNull();
+      });
+    });
+
+    test("calls delete API when delete button is clicked", async () => {
+      const deleteMock = vi.fn();
+      server.use(
+        http.delete(
+          "http://localhost:3000/api/proxy/api/chat/sessions/:sessionId",
+          async ({ params }) => {
+            deleteMock(params.sessionId);
+            return new HttpResponse(null, { status: 204 });
+          },
+        ),
+      );
+
+      renderChatSidebar();
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      const deleteButtons = screen.getAllByLabelText("Delete chat");
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Are you sure you want to delete/),
+        ).toBeDefined();
+      });
+
+      const deleteButton = screen.getByRole("button", { name: "Delete" });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(deleteMock).toHaveBeenCalledWith("session-1");
+      });
+    });
+
+    test("closes dialog after successful deletion", async () => {
+      renderChatSidebar();
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      const deleteButtons = screen.getAllByLabelText("Delete chat");
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Are you sure you want to delete/),
+        ).toBeDefined();
+      });
+
+      const deleteButton = screen.getByRole("button", { name: "Delete" });
+      fireEvent.click(deleteButton);
+
+      await waitFor(() => {
+        expect(
+          screen.queryByText(/Are you sure you want to delete/),
+        ).toBeNull();
+      });
+    });
+
+    test("handles deletion error gracefully", async () => {
+      server.use(getDeleteV2DeleteSessionMockHandler422());
+
+      renderChatSidebar();
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      const deleteButtons = screen.getAllByLabelText("Delete chat");
+      fireEvent.click(deleteButtons[0]);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText(/Are you sure you want to delete/),
+        ).toBeDefined();
+      });
+
+      const deleteButton = screen.getByRole("button", { name: "Delete" });
+      fireEvent.click(deleteButton);
+
+      // Dialog should close even on error
+      await waitFor(() => {
+        expect(
+          screen.queryByText(/Are you sure you want to delete/),
+        ).toBeNull();
+      });
+    });
+  });
+
+  describe("Session Selection", () => {
+    test("highlights currently selected session", async () => {
+      renderChatSidebar("?sessionId=session-1");
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      // Find the session with selected styling (text-zinc-600 indicates selected)
+      const selectedSessions = screen.getAllByText("First Chat");
+      const hasSelectedStyle = selectedSessions.some(
+        (el) =>
+          el.className.includes("text-zinc-600") ||
+          el.closest("div")?.className.includes("bg-zinc-100"),
+      );
+      expect(hasSelectedStyle).toBe(true);
+    });
+
+    test("selects session when clicked", async () => {
+      const urlUpdateSpy = vi.fn();
+
+      renderChatSidebar("", urlUpdateSpy);
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      // Find a session button and click it
+      const sessionElements = screen.getAllByText("First Chat");
+      const sessionButton = sessionElements[0].closest("button");
+      if (sessionButton) {
+        fireEvent.click(sessionButton);
+      }
+
+      await waitFor(() => {
+        expect(urlUpdateSpy).toHaveBeenCalled();
+        const lastCall =
+          urlUpdateSpy.mock.calls[urlUpdateSpy.mock.calls.length - 1];
+        expect(lastCall[0].queryString).toContain("sessionId=session-1");
+      });
+    });
+  });
+
+  describe("New Chat", () => {
+    test("clears session selection when new chat button is clicked", async () => {
+      const urlUpdateSpy = vi.fn();
+
+      renderChatSidebar("?sessionId=session-1", urlUpdateSpy);
+
+      await waitFor(() => {
+        expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
+      });
+
+      const newChatButton = screen.getByRole("button", { name: "New Chat" });
+      fireEvent.click(newChatButton);
+
+      await waitFor(() => {
+        expect(urlUpdateSpy).toHaveBeenCalled();
+        const lastCall =
+          urlUpdateSpy.mock.calls[urlUpdateSpy.mock.calls.length - 1];
+        expect(lastCall[0].queryString).not.toContain("sessionId=session-1");
+      });
+    });
+  });
+});

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

@@ -0,0 +1,66 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+
+interface DeleteChatDialogProps {
+  /** The session to delete, or null if dialog should be closed */
+  session: { id: string; title: string | null | undefined } | null;
+  /** Whether deletion is in progress */
+  isDeleting: boolean;
+  /** Called when user confirms deletion */
+  onConfirm: () => void;
+  /** Called when user cancels (only works when not deleting) */
+  onCancel: () => void;
+}
+
+export function DeleteChatDialog({
+  session,
+  isDeleting,
+  onConfirm,
+  onCancel,
+}: DeleteChatDialogProps) {
+  return (
+    <Dialog
+      title="Delete chat"
+      controlled={{
+        isOpen: !!session,
+        set: async (open) => {
+          if (!open && !isDeleting) {
+            onCancel();
+          }
+        },
+      }}
+      onClose={onCancel}
+    >
+      <Dialog.Content>
+        <p className="text-neutral-600">
+          Are you sure you want to delete{" "}
+          <span className="font-medium">
+            &quot;{session?.title || "Untitled chat"}&quot;
+          </span>
+          ? This action cannot be undone.
+        </p>
+        <Dialog.Footer>
+          <Button
+            variant="ghost"
+            size="small"
+            onClick={onCancel}
+            disabled={isDeleting}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            size="small"
+            onClick={onConfirm}
+            loading={isDeleting}
+            className="bg-red-600 hover:bg-red-700"
+          >
+            Delete
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/index.ts

@@ -0,0 +1 @@
+export { DeleteChatDialog } from "./DeleteChatDialog";

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

@@ -1,22 +1,46 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
-import { ListIcon } from "@phosphor-icons/react";
+import { ListIcon, TrashIcon } from "@phosphor-icons/react";
 
 interface Props {
   onOpenDrawer: () => void;
+  showDelete?: boolean;
+  isDeleting?: boolean;
+  onDelete?: () => void;
 }
 
-export function MobileHeader({ onOpenDrawer }: Props) {
+export function MobileHeader({
+  onOpenDrawer,
+  showDelete,
+  isDeleting,
+  onDelete,
+}: Props) {
   return (
-    <Button
-      variant="icon"
-      size="icon"
-      aria-label="Open sessions"
-      onClick={onOpenDrawer}
-      className="fixed z-50 bg-white shadow-md"
+    <div
+      className="fixed z-50 flex gap-2"
       style={{ left: "1rem", top: `${NAVBAR_HEIGHT_PX + 20}px` }}
     >
-      <ListIcon width="1.25rem" height="1.25rem" />
-    </Button>
+      <Button
+        variant="icon"
+        size="icon"
+        aria-label="Open sessions"
+        onClick={onOpenDrawer}
+        className="bg-white shadow-md"
+      >
+        <ListIcon width="1.25rem" height="1.25rem" />
+      </Button>
+      {showDelete && onDelete && (
+        <Button
+          variant="icon"
+          size="icon"
+          aria-label="Delete current chat"
+          onClick={onDelete}
+          disabled={isDeleting}
+          className="bg-white text-red-500 shadow-md hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
+        >
+          <TrashIcon width="1.25rem" height="1.25rem" />
+        </Button>
+      )}
+    </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/CreateAgent.tsx

@@ -4,11 +4,11 @@ import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import {
   BookOpenIcon,
-  CheckFatIcon,
   PencilSimpleIcon,
   WarningDiamondIcon,
 } from "@phosphor-icons/react";
 import type { ToolUIPart } from "ai";
+import Image from "next/image";
 import NextLink from "next/link";
 import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
@@ -24,6 +24,7 @@ import {
   ClarificationQuestionsCard,
   ClarifyingQuestion,
 } from "./components/ClarificationQuestionsCard";
+import sparklesImg from "./components/MiniGame/assets/sparkles.png";
 import { MiniGame } from "./components/MiniGame/MiniGame";
 import {
   AccordionIcon,
@@ -83,7 +84,8 @@ function getAccordionMeta(output: CreateAgentToolOutput) {
   ) {
     return {
       icon,
-      title: "Creating agent, this may take a few minutes. Sit back and relax.",
+      title:
+        "Creating agent, this may take a few minutes. Play while you wait.",
       expanded: true,
     };
   }
@@ -167,16 +169,20 @@ export function CreateAgentTool({ part }: Props) {
           {isAgentSavedOutput(output) && (
             <div className="rounded-xl border border-border/60 bg-card p-4 shadow-sm">
               <div className="flex items-baseline gap-2">
-                <CheckFatIcon
-                  size={18}
-                  weight="regular"
-                  className="relative top-1 text-green-500"
+                <Image
+                  src={sparklesImg}
+                  alt="sparkles"
+                  width={24}
+                  height={24}
+                  className="relative top-1"
                 />
                 <Text
                   variant="body-medium"
-                  className="text-blacks mb-2 text-[16px]"
+                  className="mb-2 text-[16px] text-black"
                 >
-                  {output.message}
+                  Agent{" "}
+                  <span className="text-violet-600">{output.agent_name}</span>{" "}
+                  has been saved to your library!
                 </Text>
               </div>
               <div className="mt-3 flex flex-wrap gap-4">

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/components/MiniGame/MiniGame.tsx

@@ -2,20 +2,65 @@
 
 import { useMiniGame } from "./useMiniGame";
 
+function Key({ children }: { children: React.ReactNode }) {
+  return <strong>[{children}]</strong>;
+}
+
 export function MiniGame() {
-  const { canvasRef } = useMiniGame();
+  const { canvasRef, activeMode, showOverlay, score, highScore, onContinue } =
+    useMiniGame();
+
+  const isRunActive =
+    activeMode === "run" || activeMode === "idle" || activeMode === "over";
+
+  let overlayText: string | undefined;
+  let buttonLabel = "Continue";
+  if (activeMode === "idle") {
+    buttonLabel = "Start";
+  } else if (activeMode === "boss-intro") {
+    overlayText = "Face the bandit!";
+  } else if (activeMode === "boss-defeated") {
+    overlayText = "Great job, keep on going";
+  } else if (activeMode === "over") {
+    overlayText = `Score: ${score} / Record: ${highScore}`;
+    buttonLabel = "Retry";
+  }
 
   return (
-    <div
-      className="w-full overflow-hidden rounded-md bg-background text-foreground"
-      style={{ border: "1px solid #d17fff" }}
-    >
-      <canvas
-        ref={canvasRef}
-        tabIndex={0}
-        className="block w-full outline-none"
-        style={{ imageRendering: "pixelated" }}
-      />
+    <div className="flex flex-col gap-2">
+      <p className="text-sm font-medium text-purple-500">
+        {isRunActive ? (
+          <>
+            Run mode: <Key>Space</Key> to jump
+          </>
+        ) : (
+          <>
+            Duel mode: <Key>←→</Key> to move · <Key>Z</Key> to attack ·{" "}
+            <Key>X</Key> to block · <Key>Space</Key> to jump
+          </>
+        )}
+      </p>
+      <div className="relative w-full overflow-hidden rounded-md border border-accent bg-background text-foreground">
+        <canvas
+          ref={canvasRef}
+          tabIndex={0}
+          className="block w-full outline-none"
+        />
+        {showOverlay && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/40">
+            {overlayText && (
+              <p className="text-lg font-bold text-white">{overlayText}</p>
+            )}
+            <button
+              type="button"
+              onClick={onContinue}
+              className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-zinc-800 shadow-md transition-colors hover:bg-zinc-100"
+            >
+              {buttonLabel}
+            </button>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/copilot/tools/CreateAgent/helpers.tsx

@@ -136,7 +136,7 @@ export function getAnimationText(part: {
       if (isOperationPendingOutput(output)) return "Agent creation in progress";
       if (isOperationInProgressOutput(output))
         return "Agent creation already in progress";
-      if (isAgentSavedOutput(output)) return `Saved "${output.agent_name}"`;
+      if (isAgentSavedOutput(output)) return `Saved ${output.agent_name}`;
       if (isAgentPreviewOutput(output)) return `Preview "${output.agent_name}"`;
       if (isClarificationNeededOutput(output)) return "Needs clarification";
       return "Error creating agent";

autogpt_platform/frontend/src/app/(platform)/copilot/tools/EditAgent/EditAgent.tsx

@@ -5,7 +5,6 @@ import type { ToolUIPart } from "ai";
 import { useCopilotChatActions } from "../../components/CopilotChatActionsProvider/useCopilotChatActions";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
 import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
-import { ProgressBar } from "../../components/ProgressBar/ProgressBar";
 import {
   ContentCardDescription,
   ContentCodeBlock,
@@ -15,7 +14,7 @@ import {
   ContentMessage,
 } from "../../components/ToolAccordion/AccordionContent";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { useAsymptoticProgress } from "../../hooks/useAsymptoticProgress";
+import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame";
 import {
   ClarificationQuestionsCard,
   ClarifyingQuestion,
@@ -54,6 +53,7 @@ function getAccordionMeta(output: EditAgentToolOutput): {
   title: string;
   titleClassName?: string;
   description?: string;
+  expanded?: boolean;
 } {
   const icon = <AccordionIcon />;
 
@@ -80,7 +80,11 @@ function getAccordionMeta(output: EditAgentToolOutput): {
     isOperationPendingOutput(output) ||
     isOperationInProgressOutput(output)
   ) {
-    return { icon: <OrbitLoader size={32} />, title: "Editing agent" };
+    return {
+      icon: <OrbitLoader size={32} />,
+      title: "Editing agent, this may take a few minutes. Play while you wait.",
+      expanded: true,
+    };
   }
   return {
     icon: (
@@ -105,7 +109,6 @@ export function EditAgentTool({ part }: Props) {
     (isOperationStartedOutput(output) ||
       isOperationPendingOutput(output) ||
       isOperationInProgressOutput(output));
-  const progress = useAsymptoticProgress(isOperating);
   const hasExpandableContent =
     part.state === "output-available" &&
     !!output &&
@@ -149,9 +152,9 @@ export function EditAgentTool({ part }: Props) {
         <ToolAccordion {...getAccordionMeta(output)}>
           {isOperating && (
             <ContentGrid>
-              <ProgressBar value={progress} className="max-w-[280px]" />
+              <MiniGame />
               <ContentHint>
-                This could take a few minutes, grab a coffee ☕
+                This could take a few minutes — play while you wait!
               </ContentHint>
             </ContentGrid>
           )}

autogpt_platform/frontend/src/app/(platform)/copilot/tools/RunAgent/RunAgent.tsx

@@ -2,8 +2,14 @@
 
 import type { ToolUIPart } from "ai";
 import { MorphingTextAnimation } from "../../components/MorphingTextAnimation/MorphingTextAnimation";
+import { OrbitLoader } from "../../components/OrbitLoader/OrbitLoader";
 import { ToolAccordion } from "../../components/ToolAccordion/ToolAccordion";
-import { ContentMessage } from "../../components/ToolAccordion/AccordionContent";
+import {
+  ContentGrid,
+  ContentHint,
+  ContentMessage,
+} from "../../components/ToolAccordion/AccordionContent";
+import { MiniGame } from "../CreateAgent/components/MiniGame/MiniGame";
 import {
   getAccordionMeta,
   getAnimationText,
@@ -60,6 +66,21 @@ export function RunAgentTool({ part }: Props) {
         />
       </div>
 
+      {isStreaming && !output && (
+        <ToolAccordion
+          icon={<OrbitLoader size={32} />}
+          title="Running agent, this may take a few minutes. Play while you wait."
+          expanded={true}
+        >
+          <ContentGrid>
+            <MiniGame />
+            <ContentHint>
+              This could take a few minutes — play while you wait!
+            </ContentHint>
+          </ContentGrid>
+        </ToolAccordion>
+      )}
+
       {hasExpandableContent && output && (
         <ToolAccordion {...getAccordionMeta(output)}>
           {isRunAgentExecutionStartedOutput(output) && (

autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts

@@ -1,10 +1,15 @@
-import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import {
+  getGetV2ListSessionsQueryKey,
+  useDeleteV2DeleteSession,
+  useGetV2ListSessions,
+} from "@/app/api/__generated__/endpoints/chat/chat";
 import { toast } from "@/components/molecules/Toast/use-toast";
 import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
 import { useChat } from "@ai-sdk/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { DefaultChatTransport } from "ai";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useChatSession } from "./useChatSession";
 import { useLongRunningToolPolling } from "./hooks/useLongRunningToolPolling";
 
@@ -14,6 +19,11 @@ export function useCopilotPage() {
   const { isUserLoading, isLoggedIn } = useSupabase();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [pendingMessage, setPendingMessage] = useState<string | null>(null);
+  const [sessionToDelete, setSessionToDelete] = useState<{
+    id: string;
+    title: string | null | undefined;
+  } | null>(null);
+  const queryClient = useQueryClient();
 
   const {
     sessionId,
@@ -24,6 +34,30 @@ export function useCopilotPage() {
     isCreatingSession,
   } = useChatSession();
 
+  const { mutate: deleteSessionMutation, isPending: isDeleting } =
+    useDeleteV2DeleteSession({
+      mutation: {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: getGetV2ListSessionsQueryKey(),
+          });
+          if (sessionToDelete?.id === sessionId) {
+            setSessionId(null);
+          }
+          setSessionToDelete(null);
+        },
+        onError: (error) => {
+          toast({
+            title: "Failed to delete chat",
+            description:
+              error instanceof Error ? error.message : "An error occurred",
+            variant: "destructive",
+          });
+          setSessionToDelete(null);
+        },
+      },
+    });
+
   const breakpoint = useBreakpoint();
   const isMobile =
     breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
@@ -143,6 +177,24 @@ export function useCopilotPage() {
     if (isMobile) setIsDrawerOpen(false);
   }
 
+  const handleDeleteClick = useCallback(
+    (id: string, title: string | null | undefined) => {
+      if (isDeleting) return;
+      setSessionToDelete({ id, title });
+    },
+    [isDeleting],
+  );
+
+  const handleConfirmDelete = useCallback(() => {
+    if (sessionToDelete) {
+      deleteSessionMutation({ sessionId: sessionToDelete.id });
+    }
+  }, [sessionToDelete, deleteSessionMutation]);
+
+  const handleCancelDelete = useCallback(() => {
+    setSessionToDelete(null);
+  }, []);
+
   return {
     sessionId,
     messages,
@@ -165,5 +217,11 @@ export function useCopilotPage() {
     handleDrawerOpenChange,
     handleSelectSession,
     handleNewChat,
+    // Delete functionality
+    sessionToDelete,
+    isDeleting,
+    handleDeleteClick,
+    handleConfirmDelete,
+    handleCancelDelete,
   };
 }

autogpt_platform/frontend/src/app/api/openapi.json

@@ -1151,6 +1151,36 @@
       }
     },
     "/api/chat/sessions/{session_id}": {
+      "delete": {
+        "tags": ["v2", "chat", "chat"],
+        "summary": "Delete Session",
+        "description": "Delete a chat session.\n\nPermanently removes a chat session and all its messages.\nOnly the owner can delete their sessions.\n\nArgs:\n    session_id: The session ID to delete.\n    user_id: The authenticated user's ID.\n\nReturns:\n    204 No Content on success.\n\nRaises:\n    HTTPException: 404 if session not found or not owned by user.",
+        "operationId": "deleteV2DeleteSession",
+        "security": [{ "HTTPBearerJWT": [] }],
+        "parameters": [
+          {
+            "name": "session_id",
+            "in": "path",
+            "required": true,
+            "schema": { "type": "string", "title": "Session Id" }
+          }
+        ],
+        "responses": {
+          "204": { "description": "Successful Response" },
+          "401": {
+            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
+          },
+          "404": { "description": "Session not found or access denied" },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      },
       "get": {
         "tags": ["v2", "chat", "chat"],
         "summary": "Get Session",

autogpt_platform/frontend/src/components/__legacy__/ui/dialog.tsx

@@ -115,7 +115,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
       className,
     )}
     {...props}

autogpt_platform/frontend/src/types/images.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const content: import("next/image").StaticImageData;
+  export default content;
+}