refactor: replace delete modal with confirm(), compact mobile layout

- Remove custom modal overlay, use native confirm() dialog
- Use 🗑 icon instead of 'Delete' text to save space
- Tighten mobile button padding (4px 8px) and gaps
- Remove chatDeleteConfirm state and related props

ui/src/styles/components.css

@@ -1371,13 +1371,13 @@
 
 @media (max-width: 480px) {
   .chat-compose__actions {
-    flex-wrap: wrap;
+    gap: 4px;
-    gap: 6px;
   }
 
   .chat-compose__actions .btn {
-    padding: 6px 10px;
+    padding: 4px 8px;
     font-size: 13px;
+    flex-shrink: 0;
   }
 
   .chat-compose__actions .btn-kbd {
@@ -1500,49 +1500,3 @@
   flex-wrap: wrap;
   gap: 8px;
 }
-
-/* Delete session confirmation modal */
-.chat-delete-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-  backdrop-filter: blur(2px);
-}
-
-.chat-delete-card {
-  background: var(--card);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 20px 24px;
-  max-width: 360px;
-  text-align: center;
-}
-
-.chat-delete-title {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.chat-delete-sub {
-  font-size: 13px;
-  color: var(--muted);
-  margin-bottom: 16px;
-  word-break: break-word;
-}
-
-.chat-delete-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-}
-
-.chat-delete-hint {
-  margin-top: 12px;
-  font-size: 11px;
-  color: var(--muted);
-}

ui/src/ui/app-render.ts

@@ -498,13 +498,10 @@ export function renderApp(state: AppViewState) {
               assistantName: state.assistantName,
               assistantAvatar: state.assistantAvatar,
               // Delete session (disabled for main session)
-              showDeleteConfirm: state.chatDeleteConfirm,
               isMainSession:
                 state.sessionKey === "main" ||
                 parseAgentSessionKey(state.sessionKey)?.rest === "main",
-              onDeleteClick: () => (state.chatDeleteConfirm = true),
+              onDelete: async () => {
-              onDeleteConfirm: async () => {
-                state.chatDeleteConfirm = false;
                 const { deleteSession } = await import("./controllers/sessions");
                 await deleteSession(state as Parameters<typeof deleteSession>[0], state.sessionKey);
                 // Switch to main session after deletion
@@ -517,7 +514,6 @@ export function renderApp(state: AppViewState) {
                 });
                 void loadChatHistory(state);
               },
-              onDeleteCancel: () => (state.chatDeleteConfirm = false),
             })
           : nothing}
 

ui/src/ui/app.ts

@@ -130,7 +130,6 @@ export class MoltbotApp extends LitElement {
   @state() chatThinkingLevel: string | null = null;
   @state() chatQueue: ChatQueueItem[] = [];
   @state() chatAttachments: ChatAttachment[] = [];
-  @state() chatDeleteConfirm = false;
   // Sidebar state for tool output viewing
   @state() sidebarOpen = false;
   @state() sidebarContent: string | null = null;

ui/src/ui/views/chat.ts

@@ -69,11 +69,8 @@ export type ChatProps = {
   onSplitRatioChange?: (ratio: number) => void;
   onChatScroll?: (event: Event) => void;
   // Delete session
-  showDeleteConfirm?: boolean;
   isMainSession?: boolean;
-  onDeleteClick?: () => void;
+  onDelete?: () => void;
-  onDeleteConfirm?: () => void;
-  onDeleteCancel?: () => void;
 };
 
 const COMPACTION_TOAST_DURATION_MS = 5000;
@@ -246,44 +243,7 @@ export function renderChat(props: ChatProps) {
   `;
 
   return html`
-    <section
+    <section class="card chat">
-      class="card chat"
-      tabindex="-1"
-      @keydown=${(e: KeyboardEvent) => {
-        // Escape to cancel delete confirmation
-        if (e.key === "Escape" && props.showDeleteConfirm && props.onDeleteCancel) {
-          e.preventDefault();
-          props.onDeleteCancel();
-        }
-        // Enter to confirm delete
-        if (e.key === "Enter" && props.showDeleteConfirm && props.onDeleteConfirm) {
-          e.preventDefault();
-          props.onDeleteConfirm();
-        }
-      }}
-    >
-      ${props.showDeleteConfirm
-        ? html`
-            <div class="chat-delete-overlay" role="dialog" aria-modal="true">
-              <div class="chat-delete-card">
-                <div class="chat-delete-title">Delete this session?</div>
-                <div class="chat-delete-sub">
-                  This will permanently delete the session "${props.sessionKey}".
-                </div>
-                <div class="chat-delete-actions">
-                  <button class="btn" @click=${props.onDeleteCancel} autofocus>
-                    Cancel
-                  </button>
-                  <button class="btn danger" @click=${props.onDeleteConfirm}>
-                    Delete
-                  </button>
-                </div>
-                <div class="chat-delete-hint">Press Enter to delete, Escape to cancel</div>
-              </div>
-            </div>
-          `
-        : nothing}
-
       ${props.disabledReason
         ? html`<div class="callout">${props.disabledReason}</div>`
         : nothing}
@@ -404,15 +364,19 @@ export function renderChat(props: ChatProps) {
             >
               ${canAbort ? "Stop" : "New session"}
             </button>
-            ${props.onDeleteClick
+            ${props.onDelete
               ? html`
                   <button
                     class="btn danger"
                     ?disabled=${!props.connected || isBusy || props.isMainSession}
-                    @click=${props.onDeleteClick}
+                    @click=${() => {
+                      if (confirm(`Delete session "${props.sessionKey}"?`)) {
+                        props.onDelete!();
+                      }
+                    }}
                     title=${props.isMainSession ? "Cannot delete main session" : "Delete this session"}
                   >
-                    Delete
+                    🗑
                   </button>
                 `
               : nothing}