feat: improve UI - larger monitor, cleaner close modal, remove toolbar buttons

- Monitor panel now 500px wide and 80vh max height
- Removed Copy, Clear, Monitor, Kill buttons from toolbar
- Redesigned close session modal with cleaner options:
  - "Remove Tab" keeps screen running
  - "Kill Claude" terminates completely
- Auto-switch to new session when created

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

src/web/public/app.js

@@ -763,20 +763,10 @@ class ClaudemanApp {
         this.terminal.writeln(`\x1b[90m Created session ${i}/${tabCount}: ${sessionName}\x1b[0m`);
       }
 
-      // Select the first session
+      // Auto-switch to the new session
       if (firstSessionId) {
-        this.activeSessionId = firstSessionId;
+        await this.selectSession(firstSessionId);
         this.loadQuickStartCases();
-
-        // Send resize
-        const dims = this.fitAddon.proposeDimensions();
-        if (dims) {
-          await fetch(`/api/sessions/${firstSessionId}/resize`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ cols: dims.cols, rows: dims.rows })
-          });
-        }
       }
 
       this.terminal.focus();

src/web/public/index.html

@@ -96,13 +96,7 @@
       </div>
 
       <div class="toolbar-right">
-        <button class="btn-toolbar" onclick="app.copyTerminal()" title="Copy terminal">Copy</button>
-        <button class="btn-toolbar" onclick="app.clearTerminal()" title="Clear terminal (Ctrl+L)">Clear</button>
-        <button class="btn-toolbar" onclick="app.toggleMonitorPanel()" title="Monitor">Monitor</button>
-
-        <div class="toolbar-divider"></div>
-
-        <button class="btn-toolbar btn-danger" onclick="app.killActiveSession()" title="Kill current session">Kill</button>
+        <!-- Buttons removed - use keyboard shortcuts instead -->
       </div>
     </footer>
 
@@ -264,17 +258,24 @@
       <div class="modal-backdrop" onclick="app.cancelCloseSession()"></div>
       <div class="modal-content modal-sm">
         <div class="modal-header">
-          <h3>Close Session?</h3>
+          <h3>Close Session</h3>
           <button class="modal-close" onclick="app.cancelCloseSession()">&times;</button>
         </div>
         <div class="modal-body">
           <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 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>
+        <div class="close-options">
+          <button class="close-option" onclick="app.confirmCloseSession(false)">
+            <span class="close-option-title">Remove Tab</span>
+            <span class="close-option-desc">Screen session keeps running in background</span>
+          </button>
+          <button class="close-option close-option-danger" onclick="app.confirmCloseSession(true)">
+            <span class="close-option-title">Kill Claude</span>
+            <span class="close-option-desc">Terminate the session completely</span>
+          </button>
+        </div>
+        <div class="modal-footer-cancel">
+          <button class="btn-toolbar btn-sm" onclick="app.cancelCloseSession()">Cancel</button>
         </div>
       </div>
     </div>

src/web/public/styles.css

@@ -850,7 +850,7 @@ body {
 }
 
 .modal-content.modal-sm {
-  max-width: 320px;
+  max-width: 340px;
 }
 
 .modal-warning-text {
@@ -859,6 +859,65 @@ body {
   margin-bottom: 0.5rem;
 }
 
+/* Close Session Options */
+.close-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.close-option {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0.75rem 1rem;
+  background: var(--bg-hover);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: left;
+}
+
+.close-option:hover {
+  background: var(--bg-card);
+  border-color: var(--accent);
+}
+
+.close-option-danger {
+  border-color: var(--red);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.close-option-danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: var(--red);
+}
+
+.close-option-title {
+  font-weight: 500;
+  font-size: 0.9rem;
+  color: var(--text);
+}
+
+.close-option-danger .close-option-title {
+  color: var(--red);
+}
+
+.close-option-desc {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.15rem;
+}
+
+.modal-footer-cancel {
+  display: flex;
+  justify-content: center;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--border);
+}
+
 .modal-session-name {
   font-family: 'SF Mono', Monaco, monospace;
   font-size: 0.8rem;
@@ -1420,9 +1479,9 @@ kbd {
   position: fixed;
   bottom: var(--toolbar-height);
   right: 0.5rem;
-  width: 420px;
+  width: 500px;
   max-width: calc(100vw - 1rem);
-  max-height: 60vh;
+  max-height: 80vh;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-bottom: none;