feat: improve Monitor panel UX and preserve session names

- Monitor panel now opens by default on webapp start
- Replace "Reconcile" button with refresh icon (↻)
- Change close button to toggle (▼/▲) for collapse/expand
- Preserve session display names when saving screen info
- Use stored name when restoring sessions (no more "Restored:" prefix)
- Show session name in Monitor panel instead of screen name
- Kill screen session when closing a tab

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

src/web/public/app.js

@@ -30,6 +30,8 @@ class ClaudemanApp {
     this.loadState();
     this.loadQuickStartCases();
     this.setupEventListeners();
+    // Show monitor panel by default
+    this.toggleMonitorPanel();
   }
 
   initTerminal() {
@@ -1361,6 +1363,7 @@ class ClaudemanApp {
 
   async toggleMonitorPanel() {
     const panel = document.getElementById('monitorPanel');
+    const toggleBtn = document.getElementById('monitorToggleBtn');
     panel.classList.toggle('open');
 
     if (panel.classList.contains('open')) {
@@ -1368,9 +1371,11 @@ class ClaudemanApp {
       await this.loadScreens();
       await fetch('/api/screens/stats/start', { method: 'POST' });
       this.renderTaskPanel();
+      if (toggleBtn) toggleBtn.innerHTML = '▼'; // Down arrow when open
     } else {
       // Stop stats collection when panel is closed
       await fetch('/api/screens/stats/stop', { method: 'POST' });
+      if (toggleBtn) toggleBtn.innerHTML = '▲'; // Up arrow when closed
     }
   }
 
@@ -1487,7 +1492,7 @@ class ClaudemanApp {
         <div class="process-item">
           <span class="process-mode ${modeClass}">${screen.mode}</span>
           <div class="process-info">
-            <div class="process-name">${this.escapeHtml(screen.screenName)}</div>
+            <div class="process-name">${this.escapeHtml(screen.name || screen.screenName)}</div>
             <div class="process-meta">
               <span class="process-stat memory">${stats.memoryMB}MB</span>
               <span class="process-stat cpu">${stats.cpuPercent}%</span>

src/web/public/index.html

@@ -135,8 +135,8 @@
       <div class="monitor-panel-header">
         <span>Monitor</span>
         <div class="monitor-panel-actions">
-          <button class="btn-toolbar btn-sm" onclick="app.reconcileScreens()" title="Check for dead screens">Reconcile</button>
-          <button class="btn-close" onclick="app.toggleMonitorPanel()">&times;</button>
+          <button class="btn-icon-sm" onclick="app.reconcileScreens()" title="Refresh screens">&#x21BB;</button>
+          <button class="btn-icon-sm" onclick="app.toggleMonitorPanel()" title="Toggle panel" id="monitorToggleBtn">&#x25BC;</button>
         </div>
       </div>
       <div class="monitor-panel-body">

src/web/public/styles.css

@@ -661,6 +661,22 @@ body {
   color: var(--text);
 }
 
+.btn-icon-sm {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+  border-radius: 4px;
+}
+
+.btn-icon-sm:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
 .form-row {
   margin-bottom: 0.75rem;
 }

src/web/server.ts

@@ -141,6 +141,8 @@ export class WebServer extends EventEmitter {
       }
 
       session.name = body.name || '';
+      // Also update the screen name if this session has a screen
+      this.screenManager.updateScreenName(id, session.name);
       this.broadcast('session:updated', session.toDetailedState());
       return { success: true, name: session.name };
     });
@@ -1063,7 +1065,7 @@ export class WebServer extends EventEmitter {
               id: screen.sessionId,  // Preserve the original session ID
               workingDir: screen.workingDir,
               mode: screen.mode,
-              name: `Restored: ${screen.screenName}`,
+              name: screen.name || screen.screenName,
               screenManager: this.screenManager,
               useScreen: true
             });