From 885e9dc729c5bb4768d2f7af5cc9e2b6360255b0 Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Mon, 19 Jan 2026 02:10:44 +0100
Subject: [PATCH] feat: add confirmation dialog for session close

Shows a confirmation modal when clicking "x" on session tabs to warn
the user that the Claude session and running processes will be
terminated. Users can cancel or confirm the close action.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/app.js     | 33 ++++++++++++++++++++++++++++++++-
 src/web/public/index.html | 19 +++++++++++++++++++
 src/web/public/styles.css | 16 ++++++++++++++++
 3 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/src/web/public/app.js b/src/web/public/app.js
index 4952d29d..788b0939 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -13,6 +13,7 @@ class ClaudemanApp {
     this.respawnTimers = {}; // Track timed respawn timers
     this.terminalBuffers = new Map(); // Store terminal content per session
     this.editingSessionId = null; // Session being edited in options modal
+    this.pendingCloseSessionId = null; // Session pending close confirmation
 
     // Terminal write batching
     this.pendingWrites = '';
@@ -472,7 +473,7 @@ class ClaudemanApp {
           <span class="tab-name" data-session-id="${id}">${this.escapeHtml(name)}</span>
           ${hasRunningTasks ? `<span class="tab-badge" onclick="event.stopPropagation(); app.toggleTaskPanel()">${taskStats.running}</span>` : ''}
           <span class="tab-gear" onclick="event.stopPropagation(); app.openSessionOptions('${id}')" title="Session options">&#x2699;</span>
-          <span class="tab-close" onclick="event.stopPropagation(); app.closeSession('${id}')">&times;</span>
+          <span class="tab-close" onclick="event.stopPropagation(); app.requestCloseSession('${id}')">&times;</span>
         </div>
       `;
     }
@@ -568,6 +569,35 @@ class ClaudemanApp {
     }
   }
 
+  // Request confirmation before closing a session
+  requestCloseSession(sessionId) {
+    const session = this.sessions.get(sessionId);
+    if (!session) return;
+
+    this.pendingCloseSessionId = sessionId;
+
+    // Show session name in confirmation dialog
+    const name = this.getSessionName(session);
+    const sessionNameEl = document.getElementById('closeConfirmSessionName');
+    sessionNameEl.textContent = name;
+
+    document.getElementById('closeConfirmModal').classList.add('active');
+  }
+
+  cancelCloseSession() {
+    this.pendingCloseSessionId = null;
+    document.getElementById('closeConfirmModal').classList.remove('active');
+  }
+
+  async confirmCloseSession() {
+    const sessionId = this.pendingCloseSessionId;
+    this.cancelCloseSession();
+
+    if (sessionId) {
+      await this.closeSession(sessionId);
+    }
+  }
+
   nextSession() {
     const ids = Array.from(this.sessions.keys());
     if (ids.length <= 1) return;
@@ -1379,6 +1409,7 @@ class ClaudemanApp {
   closeAllPanels() {
     this.closeSessionOptions();
     this.closeAppSettings();
+    this.cancelCloseSession();
     document.getElementById('respawnPanel').classList.remove('open');
     document.getElementById('newSessionPanel').classList.remove('open');
     document.getElementById('taskPanel').classList.remove('open');
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 9b2066a7..dfa2a5ab 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -273,6 +273,25 @@
       </div>
     </div>
 
+    <!-- Close Session Confirmation Modal -->
+    <div class="modal" id="closeConfirmModal">
+      <div class="modal-backdrop" onclick="app.cancelCloseSession()"></div>
+      <div class="modal-content modal-sm">
+        <div class="modal-header">
+          <h3>Close Session?</h3>
+          <button class="modal-close" onclick="app.cancelCloseSession()">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p class="modal-warning-text">This will terminate the Claude session and any running processes.</p>
+          <p class="modal-session-name" id="closeConfirmSessionName"></p>
+        </div>
+        <div class="form-actions">
+          <button class="btn-toolbar" onclick="app.cancelCloseSession()">Cancel</button>
+          <button class="btn-toolbar btn-danger" onclick="app.confirmCloseSession()">Close Session</button>
+        </div>
+      </div>
+    </div>
+
     <!-- App Settings Modal -->
     <div class="modal" id="appSettingsModal">
       <div class="modal-backdrop" onclick="app.closeAppSettings()"></div>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 20c2d4f5..8cb4c701 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -745,6 +745,22 @@ body {
   max-width: 320px;
 }
 
+.modal-warning-text {
+  color: var(--text-dim);
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+}
+
+.modal-session-name {
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.8rem;
+  color: var(--accent-hover);
+  background: var(--bg-input);
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+
 .session-dir-display {
   padding: 0.5rem 0.75rem;
   background: var(--bg-input);