feat: add close buttons for Ralph tracker and Monitor panels

- Add close button (×) to Ralph Wiggum tracker panel
- Add close button (×) to Monitor panel
- Add "Show Monitor Panel" toggle in app settings (default: on)
- closeRalphTracker() disables tracker and hides panel
- closeMonitor() hides panel and saves setting

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

src/web/public/app.js

@@ -51,6 +51,7 @@ class ClaudemanApp {
     this.initTerminal();
     this.loadFontSize();
     this.applyHeaderVisibilitySettings();
+    this.applyMonitorVisibility();
     this.connectSSE();
     this.loadState();
     this.loadQuickStartCases();
@@ -1662,6 +1663,7 @@ class ClaudemanApp {
     document.getElementById('appSettingsShowFontControls').checked = settings.showFontControls ?? true;
     document.getElementById('appSettingsShowSystemStats').checked = settings.showSystemStats ?? true;
     document.getElementById('appSettingsShowTokenCount').checked = settings.showTokenCount ?? true;
+    document.getElementById('appSettingsShowMonitor').checked = settings.showMonitor ?? true;
     document.getElementById('appSettingsModal').classList.add('active');
   }
 
@@ -1678,6 +1680,7 @@ class ClaudemanApp {
       showFontControls: document.getElementById('appSettingsShowFontControls').checked,
       showSystemStats: document.getElementById('appSettingsShowSystemStats').checked,
       showTokenCount: document.getElementById('appSettingsShowTokenCount').checked,
+      showMonitor: document.getElementById('appSettingsShowMonitor').checked,
     };
 
     // Save to localStorage
@@ -1685,6 +1688,7 @@ class ClaudemanApp {
 
     // Apply header visibility immediately
     this.applyHeaderVisibilitySettings();
+    this.applyMonitorVisibility();
 
     // Also save to server
     try {
@@ -1742,6 +1746,28 @@ class ClaudemanApp {
     }
   }
 
+  applyMonitorVisibility() {
+    const settings = this.loadAppSettingsFromStorage();
+    const showMonitor = settings.showMonitor ?? true;
+    const monitorPanel = document.getElementById('monitorPanel');
+    if (monitorPanel) {
+      monitorPanel.style.display = showMonitor ? '' : 'none';
+    }
+  }
+
+  closeMonitor() {
+    // Hide the monitor panel
+    const monitorPanel = document.getElementById('monitorPanel');
+    if (monitorPanel) {
+      monitorPanel.classList.remove('open');
+      monitorPanel.style.display = 'none';
+    }
+    // Save the setting
+    const settings = this.loadAppSettingsFromStorage();
+    settings.showMonitor = false;
+    localStorage.setItem('claudeman-app-settings', JSON.stringify(settings));
+  }
+
   async loadAppSettingsFromServer() {
     try {
       const res = await fetch('/api/settings');
@@ -1999,6 +2025,21 @@ class ClaudemanApp {
     });
   }
 
+  async closeRalphTracker() {
+    if (!this.activeSessionId) return;
+
+    // Disable tracker via API
+    await fetch(`/api/sessions/${this.activeSessionId}/inner-config`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: false })
+    });
+
+    // Clear local state and hide panel
+    this.innerStates.delete(this.activeSessionId);
+    this.renderInnerStatePanel();
+  }
+
   toggleRalphDetach() {
     const panel = this.$('innerStatePanel');
     const detachBtn = this.$('ralphDetachBtn');

src/web/public/index.html

@@ -100,6 +100,7 @@
         </div>
         <div class="ralph-controls">
           <button class="btn-icon-sm" onclick="event.stopPropagation(); app.toggleRalphDetach()" title="Detach/Attach panel" id="ralphDetachBtn">&#x29C9;</button>
+          <button class="btn-icon-sm" onclick="event.stopPropagation(); app.closeRalphTracker()" title="Close tracker">&times;</button>
         </div>
       </div>
 
@@ -229,6 +230,7 @@
           <button class="btn-icon-sm" onclick="app.reconcileScreens()" title="Refresh screens">&#x21BB;</button>
           <button class="btn-icon-sm" onclick="app.toggleMonitorDetach()" title="Detach panel" id="monitorDetachBtn">&#x29C9;</button>
           <button class="btn-icon-sm" onclick="app.toggleMonitorPanel()" title="Toggle panel" id="monitorToggleBtn">&#x25B2;</button>
+          <button class="btn-icon-sm" onclick="app.closeMonitor()" title="Close monitor">&times;</button>
         </div>
       </div>
       <div class="monitor-resize-handle" id="monitorResizeHandle"></div>
@@ -469,6 +471,14 @@
               </label>
               <span class="form-hint">Show total token count in header</span>
             </div>
+            <div class="form-row form-row-switch">
+              <label>Show Monitor Panel</label>
+              <label class="switch">
+                <input type="checkbox" id="appSettingsShowMonitor" checked>
+                <span class="slider"></span>
+              </label>
+              <span class="form-hint">Show Monitor panel at bottom right</span>
+            </div>
           </div>
           <div class="settings-section">
             <div class="settings-section-title">General</div>