feat: add option to keep screen alive when closing tab

When clicking (x) on a session tab, users now choose:
- Hide Tab (Keep Screen): removes tab but screen session stays alive
- Close & Kill Screen: terminates both tab and screen session

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/session.ts

@@ -764,7 +764,7 @@ export class Session extends EventEmitter {
     });
   }
 
-  async stop(): Promise<void> {
+  async stop(killScreen: boolean = true): Promise<void> {
     // Clear activity timeout to prevent memory leak
     if (this.activityTimeout) {
       clearTimeout(this.activityTimeout);
@@ -808,8 +808,8 @@ export class Session extends EventEmitter {
     this._status = 'stopped';
     this._currentTaskId = null;
 
-    // Kill the associated screen session if any
+    // Kill the associated screen session if requested
-    if (this._screenSession && this._screenManager) {
+    if (this._screenSession && this._screenManager && killScreen) {
       try {
         await this._screenManager.killScreen(this.id);
         console.log('[Session] Killed screen session:', this._screenSession.screenName);
@@ -817,6 +817,9 @@ export class Session extends EventEmitter {
         console.error('[Session] Failed to kill screen session:', err);
       }
       this._screenSession = null;
+    } else if (this._screenSession && !killScreen) {
+      console.log('[Session] Keeping screen session alive:', this._screenSession.screenName);
+      this._screenSession = null; // Detach but don't kill
     }
 
     if (this.rejectPromise) {

src/web/public/app.js

@@ -563,9 +563,9 @@ class ClaudemanApp {
     }
   }
 
-  async closeSession(sessionId) {
+  async closeSession(sessionId, killScreen = true) {
     try {
-      await fetch(`/api/sessions/${sessionId}`, { method: 'DELETE' });
+      await fetch(`/api/sessions/${sessionId}?killScreen=${killScreen}`, { method: 'DELETE' });
       this.sessions.delete(sessionId);
       this.terminalBuffers.delete(sessionId);
 
@@ -582,6 +582,12 @@ class ClaudemanApp {
       }
 
       this.renderSessionTabs();
+
+      if (killScreen) {
+        this.showToast('Session closed and screen killed', 'success');
+      } else {
+        this.showToast('Tab hidden, screen still running', 'info');
+      }
     } catch (err) {
       this.showToast('Failed to close session', 'error');
     }
@@ -607,12 +613,12 @@ class ClaudemanApp {
     document.getElementById('closeConfirmModal').classList.remove('active');
   }
 
-  async confirmCloseSession() {
+  async confirmCloseSession(killScreen = true) {
     const sessionId = this.pendingCloseSessionId;
     this.cancelCloseSession();
 
     if (sessionId) {
-      await this.closeSession(sessionId);
+      await this.closeSession(sessionId, killScreen);
     }
   }
 

src/web/public/index.html

@@ -268,12 +268,13 @@
           <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>
+          <p class="modal-warning-text">Choose how to close this session:</p>
         </div>
-        <div class="form-actions">
+        <div class="form-actions form-actions-stack">
+          <button class="btn-toolbar btn-warning" onclick="app.confirmCloseSession(false)" title="Remove tab but keep screen session running">Hide Tab (Keep Screen)</button>
+          <button class="btn-toolbar btn-danger" onclick="app.confirmCloseSession(true)" title="Terminate the screen session completely">Close & Kill Screen</button>
           <button class="btn-toolbar" onclick="app.cancelCloseSession()">Cancel</button>
-          <button class="btn-toolbar btn-danger" onclick="app.confirmCloseSession()">Close Session</button>
         </div>
       </div>
     </div>

src/web/public/styles.css

@@ -800,6 +800,24 @@ body {
   border-top: 1px solid var(--border);
 }
 
+.form-actions-stack {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.form-actions-stack button {
+  width: 100%;
+}
+
+.btn-warning {
+  background: var(--yellow);
+  color: #000;
+}
+
+.btn-warning:hover {
+  background: #d4a107;
+}
+
 /* Modal */
 .modal {
   display: none;

src/web/server.ts

@@ -149,6 +149,8 @@ export class WebServer extends EventEmitter {
 
     this.app.delete('/api/sessions/:id', async (req): Promise<ApiResponse> => {
       const { id } = req.params as { id: string };
+      const query = req.query as { killScreen?: string };
+      const killScreen = query.killScreen !== 'false'; // Default to true
       const session = this.sessions.get(id);
 
       if (!session) {
@@ -162,7 +164,7 @@ export class WebServer extends EventEmitter {
         this.respawnControllers.delete(id);
       }
 
-      await session.stop();
+      await session.stop(killScreen);
       this.sessions.delete(id);
       this.terminalBatches.delete(id);
       this.broadcast('session:deleted', { id });