fix: add gap spacing to dialog footer buttons on mobile

- Moved delete button from MobileDrawer to MobileHeader (next to menu button)
- Delete button only shows when a session is selected
- Fixes modal z-index issue (dialog was showing behind drawer)
- Fixes layout scroll issue in drawer
- Simplified MobileDrawer back to original layout

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/backend/api/features/chat/sdk/security_hooks.py

@@ -11,15 +11,45 @@ import re
 from collections.abc import Callable
 from typing import Any, cast
 
-from backend.api.features.chat.sdk.tool_adapter import (
+from backend.api.features.chat.sdk.tool_adapter import MCP_TOOL_PREFIX
-    BLOCKED_TOOLS,
-    DANGEROUS_PATTERNS,
-    MCP_TOOL_PREFIX,
-    WORKSPACE_SCOPED_TOOLS,
-)
 
 logger = logging.getLogger(__name__)
 
+# Tools that are blocked entirely (CLI/system access).
+# "Bash" (capital) is the SDK built-in — it's NOT in allowed_tools but blocked
+# here as defence-in-depth.  The agent uses mcp__copilot__bash_exec instead,
+# which has kernel-level network isolation (unshare --net).
+BLOCKED_TOOLS = {
+    "Bash",
+    "bash",
+    "shell",
+    "exec",
+    "terminal",
+    "command",
+}
+
+# Tools allowed only when their path argument stays within the SDK workspace.
+# The SDK uses these to handle oversized tool results (writes to tool-results/
+# files, then reads them back) and for workspace file operations.
+WORKSPACE_SCOPED_TOOLS = {"Read", "Write", "Edit", "Glob", "Grep"}
+
+# Dangerous patterns in tool inputs
+DANGEROUS_PATTERNS = [
+    r"sudo",
+    r"rm\s+-rf",
+    r"dd\s+if=",
+    r"/etc/passwd",
+    r"/etc/shadow",
+    r"chmod\s+777",
+    r"curl\s+.*\|.*sh",
+    r"wget\s+.*\|.*sh",
+    r"eval\s*\(",
+    r"exec\s*\(",
+    r"__import__",
+    r"os\.system",
+    r"subprocess",
+]
+
 
 def _deny(reason: str) -> dict[str, Any]:
     """Return a hook denial response."""

autogpt_platform/backend/backend/api/features/chat/sdk/service.py

@@ -41,7 +41,6 @@ from .response_adapter import SDKResponseAdapter
 from .security_hooks import create_security_hooks
 from .tool_adapter import (
     COPILOT_TOOL_NAMES,
-    SDK_DISALLOWED_TOOLS,
     LongRunningCallback,
     create_copilot_mcp_server,
     set_execution_context,
@@ -544,7 +543,7 @@ async def stream_chat_completion_sdk(
                 "system_prompt": system_prompt,
                 "mcp_servers": {"copilot": mcp_server},
                 "allowed_tools": COPILOT_TOOL_NAMES,
-                "disallowed_tools": SDK_DISALLOWED_TOOLS,
+                "disallowed_tools": ["Bash"],
                 "hooks": security_hooks,
                 "cwd": sdk_cwd,
                 "max_buffer_size": config.claude_agent_max_buffer_size,

autogpt_platform/backend/backend/api/features/chat/sdk/tool_adapter.py

@@ -310,48 +310,7 @@ def create_copilot_mcp_server():
 # Bash is NOT included — use the sandboxed MCP bash_exec tool instead,
 # which provides kernel-level network isolation via unshare --net.
 # Task allows spawning sub-agents (rate-limited by security hooks).
-# WebSearch uses Brave Search via Anthropic's API — safe, no SSRF risk.
+_SDK_BUILTIN_TOOLS = ["Read", "Write", "Edit", "Glob", "Grep", "Task"]
-_SDK_BUILTIN_TOOLS = ["Read", "Write", "Edit", "Glob", "Grep", "Task", "WebSearch"]
-
-# SDK built-in tools that must be explicitly blocked.
-# Bash: dangerous — agent uses mcp__copilot__bash_exec with kernel-level
-#   network isolation (unshare --net) instead.
-# WebFetch: SSRF risk — can reach internal network (localhost, 10.x, etc.).
-#   Agent uses the SSRF-protected mcp__copilot__web_fetch tool instead.
-SDK_DISALLOWED_TOOLS = ["Bash", "WebFetch"]
-
-# Tools that are blocked entirely in security hooks (defence-in-depth).
-# Includes SDK_DISALLOWED_TOOLS plus common aliases/synonyms.
-BLOCKED_TOOLS = {
-    *SDK_DISALLOWED_TOOLS,
-    "bash",
-    "shell",
-    "exec",
-    "terminal",
-    "command",
-}
-
-# Tools allowed only when their path argument stays within the SDK workspace.
-# The SDK uses these to handle oversized tool results (writes to tool-results/
-# files, then reads them back) and for workspace file operations.
-WORKSPACE_SCOPED_TOOLS = {"Read", "Write", "Edit", "Glob", "Grep"}
-
-# Dangerous patterns in tool inputs
-DANGEROUS_PATTERNS = [
-    r"sudo",
-    r"rm\s+-rf",
-    r"dd\s+if=",
-    r"/etc/passwd",
-    r"/etc/shadow",
-    r"chmod\s+777",
-    r"curl\s+.*\|.*sh",
-    r"wget\s+.*\|.*sh",
-    r"eval\s*\(",
-    r"exec\s*\(",
-    r"__import__",
-    r"os\.system",
-    r"subprocess",
-]
 
 # List of tool names for allowed_tools configuration
 # Include MCP tools, the MCP Read tool for oversized results,

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

@@ -1,6 +1,8 @@
 "use client";
 
 import { SidebarProvider } from "@/components/ui/sidebar";
+// TODO: Replace with modern Dialog component when available
+import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog";
 import { ChatContainer } from "./components/ChatContainer/ChatContainer";
 import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar";
 import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer";
@@ -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,16 @@ export function CopilotPage() {
           onOpenChange={handleDrawerOpenChange}
         />
       )}
+      {/* Delete confirmation dialog - rendered at top level for proper z-index on mobile */}
+      {isMobile && (
+        <DeleteConfirmDialog
+          entityType="chat"
+          entityName={sessionToDelete?.title || "Untitled chat"}
+          open={!!sessionToDelete}
+          onOpenChange={(open) => !open && handleCancelDelete()}
+          onDoDelete={handleConfirmDelete}
+        />
+      )}
     </SidebarProvider>
   );
 }

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

@@ -1,8 +1,15 @@
 "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";
+// TODO: Replace with modern Dialog component when available
+import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog";
 import {
   Sidebar,
   SidebarContent,
@@ -12,18 +19,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 +76,22 @@ 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 formatDate(dateString: string) {
     const date = new Date(dateString);
     const now = new Date();
@@ -61,6 +118,7 @@ export function ChatSidebar() {
   }
 
   return (
+    <>
       <Sidebar
         variant="inset"
         collapsible="icon"
@@ -130,15 +188,18 @@ export function ChatSidebar() {
                 </p>
               ) : (
                 sessions.map((session) => (
-                <button
+                  <div
                     key={session.id}
-                  onClick={() => handleSelectSession(session.id)}
                     className={cn(
-                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+                      "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">
@@ -159,6 +220,17 @@ export function ChatSidebar() {
                         </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>
@@ -184,5 +256,14 @@ export function ChatSidebar() {
           </SidebarFooter>
         )}
       </Sidebar>
+
+      <DeleteConfirmDialog
+        entityType="chat"
+        entityName={sessionToDelete?.title || "Untitled chat"}
+        open={!!sessionToDelete}
+        onOpenChange={(open) => !open && setSessionToDelete(null)}
+        onDoDelete={handleConfirmDelete}
+      />
+    </>
   );
 }

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 (
+    <div
+      className="fixed z-50 flex gap-2"
+      style={{ left: "1rem", top: `${NAVBAR_HEIGHT_PX + 20}px` }}
+    >
       <Button
         variant="icon"
         size="icon"
         aria-label="Open sessions"
         onClick={onOpenDrawer}
-      className="fixed z-50 bg-white shadow-md"
+        className="bg-white shadow-md"
-      style={{ left: "1rem", top: `${NAVBAR_HEIGHT_PX + 20}px` }}
       >
         <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/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}