feat(ui): Escape key to stop generation + Delete session from Chat tab

Two quality-of-life improvements for the Chat tab:

1. **Escape to Stop**: Press Escape during generation to stop (same as Stop button)
   - Also shows 'Esc' hint on the Stop button
   - Escape closes delete confirmation if open

2. **Delete Session**: Delete button in Chat tab with confirmation modal
   - Shows 'Delete this session?' modal
   - Cancel/Delete buttons
   - Enter = Delete, Escape = Cancel
   - Button disabled during generation

Changes:
- ui/src/ui/views/chat.ts: Add keydown handler, delete modal, delete button
- ui/src/ui/app.ts: Add chatDeleteConfirm state
- ui/src/ui/app-render.ts: Wire up delete props
- ui/src/styles/components.css: Styles for delete confirmation modal

ui/src/styles/components.css

@@ -1484,3 +1484,52 @@
   flex-wrap: wrap;
   gap: 8px;
 }
+
+/* Chat delete confirmation modal */
+.chat-delete-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  z-index: 100;
+  border-radius: var(--radius-lg);
+}
+
+.chat-delete-card {
+  width: min(400px, 100%);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  text-align: center;
+  animation: scale-in 0.15s var(--ease-out);
+}
+
+.chat-delete-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.chat-delete-sub {
+  color: var(--muted);
+  font-size: 13px;
+  margin-bottom: 16px;
+  word-break: break-word;
+}
+
+.chat-delete-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.chat-delete-hint {
+  margin-top: 12px;
+  font-size: 11px;
+  color: var(--muted);
+}

ui/src/ui/app-render.ts

@@ -496,6 +496,15 @@ export function renderApp(state: AppViewState) {
               onSplitRatioChange: (ratio: number) => state.handleSplitRatioChange(ratio),
               assistantName: state.assistantName,
               assistantAvatar: state.assistantAvatar,
+              // Delete session
+              showDeleteConfirm: state.chatDeleteConfirm,
+              onDeleteClick: () => (state.chatDeleteConfirm = true),
+              onDeleteConfirm: async () => {
+                state.chatDeleteConfirm = false;
+                const { deleteSession } = await import("./controllers/sessions");
+                await deleteSession(state as Parameters<typeof deleteSession>[0], state.sessionKey);
+              },
+              onDeleteCancel: () => (state.chatDeleteConfirm = false),
             })
           : nothing}
 

ui/src/ui/app.ts

@@ -128,6 +128,7 @@ export class MoltbotApp extends LitElement {
   @state() compactionStatus: import("./app-tool-stream").CompactionStatus | null = null;
   @state() chatAvatarUrl: string | null = null;
   @state() chatThinkingLevel: string | null = null;
+  @state() chatDeleteConfirm = false;
   @state() chatQueue: ChatQueueItem[] = [];
   @state() chatAttachments: ChatAttachment[] = [];
   // Sidebar state for tool output viewing

ui/src/ui/views/chat.ts

@@ -68,6 +68,11 @@ export type ChatProps = {
   onCloseSidebar?: () => void;
   onSplitRatioChange?: (ratio: number) => void;
   onChatScroll?: (event: Event) => void;
+  // Delete session
+  showDeleteConfirm?: boolean;
+  onDeleteClick?: () => void;
+  onDeleteConfirm?: () => void;
+  onDeleteCancel?: () => void;
 };
 
 const COMPACTION_TOAST_DURATION_MS = 5000;
@@ -240,7 +245,58 @@ export function renderChat(props: ChatProps) {
   `;
 
   return html`
-    <section class="card chat">
+    <section
+      class="card chat"
+      tabindex="-1"
+      @keydown=${(e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          // If delete confirm is open, cancel it
+          if (props.showDeleteConfirm && props.onDeleteCancel) {
+            props.onDeleteCancel();
+            return;
+          }
+          // Otherwise, if we can abort, do it
+          if (canAbort && props.onAbort) {
+            props.onAbort();
+          }
+        }
+        // Enter in delete confirm modal = 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}
@@ -359,8 +415,20 @@ export function renderChat(props: ChatProps) {
               ?disabled=${!props.connected || (!canAbort && props.sending)}
               @click=${canAbort ? props.onAbort : props.onNewSession}
             >
-              ${canAbort ? "Stop" : "New session"}
+              ${canAbort ? "Stop" : "New session"}<kbd class="btn-kbd">${canAbort ? "Esc" : ""}</kbd>
             </button>
+            ${props.onDeleteClick
+              ? html`
+                  <button
+                    class="btn danger"
+                    ?disabled=${!props.connected || isBusy}
+                    @click=${props.onDeleteClick}
+                    title="Delete this session"
+                  >
+                    Delete
+                  </button>
+                `
+              : nothing}
             <button
               class="btn primary"
               ?disabled=${!props.connected}