fix: allow all display settings to work on mobile

- Remove display:none from CSS for all settings-controlled elements
- System stats, token count, monitor, subagents, project insights,
  file browser now respect user settings on mobile
- Settings already saved independently (mobile/desktop) via getSettingsStorageKey()
- Add compact mobile styling for each element instead of hiding

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

CLAUDE.md

@@ -16,7 +16,7 @@ When user says "COM":
 1. Increment version in BOTH `package.json` AND `CLAUDE.md`
 2. Run: `git add -A && git commit -m "chore: bump version to X.XXXX" && git push && npm run build && systemctl --user restart claudeman-web`
 
-**Version**: 0.1471 (must match `package.json` for npm publish)
+**Version**: 0.1472 (must match `package.json` for npm publish)
 
 ## Project Overview
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeman",
-  "version": "0.1471",
+  "version": "0.1472",
   "description": "The missing control plane for Claude Code - run 20 autonomous agents with real-time monitoring and session persistence",
   "type": "module",
   "main": "dist/index.js",

src/web/public/styles.css

@@ -7833,8 +7833,10 @@ kbd {
     height: 18px;
   }
 
+  /* System stats - compact on tablet, visibility controlled by JS */
   .header-system-stats {
-    display: none;
+    font-size: 0.6rem;
+    gap: 0.25rem;
   }
 
   .header-right {
@@ -7904,9 +7906,10 @@ kbd {
     max-height: 40vh;
   }
 
-  /* Hide project insights on tablet */
+  /* Project insights - compact on tablet, visibility controlled by JS */
   .project-insights-panel {
-    display: none;
+    max-width: 280px;
+    font-size: 0.7rem;
   }
 }
 
@@ -7935,14 +7938,16 @@ kbd {
     min-width: 14px;
   }
 
-  /* Hide system stats on phones */
+  /* System stats - very compact on phones, visibility controlled by JS */
   .header-system-stats {
-    display: none;
+    font-size: 0.55rem;
+    gap: 0.15rem;
   }
 
-  /* Hide token count on phones - takes too much space */
+  /* Token count - compact on phones, visibility controlled by JS */
   .header-tokens {
-    display: none;
+    font-size: 0.6rem;
+    padding: 0.1rem 0.3rem;
   }
 
   /* Ultra-compact header for mobile - fixed at top */
@@ -8332,23 +8337,14 @@ kbd {
     color: #fff;
   }
 
-  /* Full-width panels - hide on phones due to limited screen space and toolbar overlap */
+  /* Panels on mobile - full width, positioned above toolbar, visibility controlled by JS */
   .monitor-panel,
   .subagents-panel {
-    /* Hide by default on phones - not enough screen space and overlaps toolbar */
-    display: none !important;
-  }
-
-  /* When explicitly shown via class, use proper mobile styling */
-  .monitor-panel.force-show-mobile,
-  .subagents-panel.force-show-mobile {
-    display: flex !important;
     width: 100%;
     max-width: 100%;
     left: 0;
     right: 0;
     border-radius: 8px 8px 0 0;
-    /* Position well above the mobile toolbar (44px + safe area) */
     bottom: calc(44px + 2rem + var(--safe-area-bottom));
     max-height: 35vh;
   }
@@ -8520,14 +8516,18 @@ kbd {
     padding-right: calc(0.5rem + var(--safe-area-right));
   }
 
-  /* Project insights panel - hide on mobile */
+  /* Project insights panel - compact on mobile, visibility controlled by JS */
   .project-insights-panel {
-    display: none !important;
+    max-width: 100%;
+    font-size: 0.65rem;
+    bottom: calc(44px + 2rem + var(--safe-area-bottom));
   }
 
-  /* File browser panel - hide on mobile */
+  /* File browser panel - compact on mobile, visibility controlled by JS */
   .file-browser-panel {
-    display: none !important;
+    max-width: 100%;
+    max-height: 50vh;
+    bottom: calc(44px + 2rem + var(--safe-area-bottom));
   }
 
   /* Notification drawer - full width on mobile, includes safe area padding */