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

@@ -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');

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>

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);