feat(ui): add header display settings for font controls, system stats, and token count

- Add visibility toggles in App Settings modal for A-/A+, CPU/MEM, and token count
- Make settings gear icon larger (32px) for better accessibility
- Apply settings on startup and immediately when saved
- All options enabled by default, persisted to localStorage

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

src/web/public/app.js

@@ -50,6 +50,7 @@ class ClaudemanApp {
   init() {
     this.initTerminal();
     this.loadFontSize();
+    this.applyHeaderVisibilitySettings();
     this.connectSSE();
     this.loadState();
     this.loadQuickStartCases();
@@ -1641,6 +1642,10 @@ class ClaudemanApp {
     document.getElementById('appSettingsClaudeMdPath').value = settings.defaultClaudeMdPath || '';
     document.getElementById('appSettingsDefaultDir').value = settings.defaultWorkingDir || '';
     document.getElementById('appSettingsRalphEnabled').checked = settings.ralphTrackerEnabled ?? false;
+    // Header visibility settings (default to true/enabled)
+    document.getElementById('appSettingsShowFontControls').checked = settings.showFontControls ?? true;
+    document.getElementById('appSettingsShowSystemStats').checked = settings.showSystemStats ?? true;
+    document.getElementById('appSettingsShowTokenCount').checked = settings.showTokenCount ?? true;
     document.getElementById('appSettingsModal').classList.add('active');
   }
 
@@ -1653,11 +1658,18 @@ class ClaudemanApp {
       defaultClaudeMdPath: document.getElementById('appSettingsClaudeMdPath').value.trim(),
       defaultWorkingDir: document.getElementById('appSettingsDefaultDir').value.trim(),
       ralphTrackerEnabled: document.getElementById('appSettingsRalphEnabled').checked,
+      // Header visibility settings
+      showFontControls: document.getElementById('appSettingsShowFontControls').checked,
+      showSystemStats: document.getElementById('appSettingsShowSystemStats').checked,
+      showTokenCount: document.getElementById('appSettingsShowTokenCount').checked,
     };
 
     // Save to localStorage
     localStorage.setItem('claudeman-app-settings', JSON.stringify(settings));
 
+    // Apply header visibility immediately
+    this.applyHeaderVisibilitySettings();
+
     // Also save to server
     try {
       await fetch('/api/settings', {
@@ -1692,6 +1704,28 @@ class ClaudemanApp {
     return {};
   }
 
+  applyHeaderVisibilitySettings() {
+    const settings = this.loadAppSettingsFromStorage();
+    // Default all to true (enabled) if not set
+    const showFontControls = settings.showFontControls ?? true;
+    const showSystemStats = settings.showSystemStats ?? true;
+    const showTokenCount = settings.showTokenCount ?? true;
+
+    const fontControlsEl = document.querySelector('.header-font-controls');
+    const systemStatsEl = document.getElementById('headerSystemStats');
+    const tokenCountEl = document.getElementById('headerTokens');
+
+    if (fontControlsEl) {
+      fontControlsEl.style.display = showFontControls ? '' : 'none';
+    }
+    if (systemStatsEl) {
+      systemStatsEl.style.display = showSystemStats ? '' : 'none';
+    }
+    if (tokenCountEl) {
+      tokenCountEl.style.display = showTokenCount ? '' : 'none';
+    }
+  }
+
   async loadAppSettingsFromServer() {
     try {
       const res = await fetch('/api/settings');

src/web/public/index.html

@@ -46,7 +46,7 @@
             <span class="stat-value" id="statMem">--</span>
           </div>
         </div>
-        <button class="btn-icon-header" onclick="app.openAppSettings()" title="App Settings">&#x2699;</button>
+        <button class="btn-icon-header btn-settings" onclick="app.openAppSettings()" title="App Settings">&#x2699;</button>
         <div class="header-tokens" id="headerTokens" title="Total tokens across all sessions">0 tokens</div>
       </div>
     </header>
@@ -456,23 +456,53 @@
           <button class="modal-close" onclick="app.closeAppSettings()">&times;</button>
         </div>
         <div class="modal-body">
-          <div class="form-row">
+          <div class="settings-section">
-            <label>Default CLAUDE.md Template Path</label>
+            <div class="settings-section-title">Header Display</div>
-            <input type="text" id="appSettingsClaudeMdPath" placeholder="/path/to/CLAUDE.md template">
+            <div class="form-row form-row-switch">
-            <span class="form-hint">Used when creating new cases. Leave empty for built-in template.</span>
+              <label>Show Font Controls</label>
+              <label class="switch">
+                <input type="checkbox" id="appSettingsShowFontControls" checked>
+                <span class="slider"></span>
+              </label>
+              <span class="form-hint">Show A-/A+ font size buttons in header</span>
+            </div>
+            <div class="form-row form-row-switch">
+              <label>Show System Stats</label>
+              <label class="switch">
+                <input type="checkbox" id="appSettingsShowSystemStats" checked>
+                <span class="slider"></span>
+              </label>
+              <span class="form-hint">Show CPU and memory usage in header</span>
+            </div>
+            <div class="form-row form-row-switch">
+              <label>Show Token Count</label>
+              <label class="switch">
+                <input type="checkbox" id="appSettingsShowTokenCount" checked>
+                <span class="slider"></span>
+              </label>
+              <span class="form-hint">Show total token count in header</span>
+            </div>
           </div>
-          <div class="form-row">
+          <div class="settings-section">
-            <label>Default Working Directory</label>
+            <div class="settings-section-title">General</div>
-            <input type="text" id="appSettingsDefaultDir" placeholder="~/projects">
+            <div class="form-row">
-            <span class="form-hint">Default directory for new sessions.</span>
+              <label>Default CLAUDE.md Template Path</label>
-          </div>
+              <input type="text" id="appSettingsClaudeMdPath" placeholder="/path/to/CLAUDE.md template">
-          <div class="form-row form-row-switch">
+              <span class="form-hint">Used when creating new cases. Leave empty for built-in template.</span>
-            <label>Enable Ralph Wiggum Tracker</label>
+            </div>
-            <label class="switch">
+            <div class="form-row">
-              <input type="checkbox" id="appSettingsRalphEnabled">
+              <label>Default Working Directory</label>
-              <span class="slider"></span>
+              <input type="text" id="appSettingsDefaultDir" placeholder="~/projects">
-            </label>
+              <span class="form-hint">Default directory for new sessions.</span>
-            <span class="form-hint">Enable tracker by default for new sessions. When disabled, tracker auto-enables when Ralph patterns are detected.</span>
+            </div>
+            <div class="form-row form-row-switch">
+              <label>Enable Ralph Wiggum Tracker</label>
+              <label class="switch">
+                <input type="checkbox" id="appSettingsRalphEnabled">
+                <span class="slider"></span>
+              </label>
+              <span class="form-hint">Enable tracker by default for new sessions. When disabled, tracker auto-enables when Ralph patterns are detected.</span>
+            </div>
           </div>
         </div>
         <div class="form-actions">

src/web/public/styles.css

@@ -284,6 +284,13 @@ body {
   transform: rotate(45deg);
 }
 
+.btn-icon-header.btn-settings {
+  width: 32px;
+  height: 32px;
+  font-size: 1.4rem;
+  margin-left: 0.5rem;
+}
+
 .btn-icon-header.btn-sm {
   width: 20px;
   height: 20px;
@@ -1347,6 +1354,27 @@ body {
   background: #dc3545;
 }
 
+.settings-section {
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.settings-section:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.settings-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 .form-row {
   margin-bottom: 0.75rem;
 }