From e202d0753d7013575c4b3f97e726ffc6b6c1c9c2 Mon Sep 17 00:00:00 2001 From: arkon Date: Mon, 19 Jan 2026 19:22:28 +0100 Subject: [PATCH] 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 --- src/web/public/app.js | 34 +++++++++++++++++++++ src/web/public/index.html | 64 ++++++++++++++++++++++++++++----------- src/web/public/styles.css | 28 +++++++++++++++++ 3 files changed, 109 insertions(+), 17 deletions(-) diff --git a/src/web/public/app.js b/src/web/public/app.js index c4d74218..c6f49c33 100644 --- a/src/web/public/app.js +++ b/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'); diff --git a/src/web/public/index.html b/src/web/public/index.html index 38700e4f..8b29c5f3 100644 --- a/src/web/public/index.html +++ b/src/web/public/index.html @@ -46,7 +46,7 @@ -- - +
0 tokens
@@ -456,23 +456,53 @@
-
- - - Used when creating new cases. Leave empty for built-in template. +
+
Header Display
+
+ + + Show A-/A+ font size buttons in header +
+
+ + + Show CPU and memory usage in header +
+
+ + + Show total token count in header +
-
- - - Default directory for new sessions. -
-
- - - Enable tracker by default for new sessions. When disabled, tracker auto-enables when Ralph patterns are detected. +
+
General
+
+ + + Used when creating new cases. Leave empty for built-in template. +
+
+ + + Default directory for new sessions. +
+
+ + + Enable tracker by default for new sessions. When disabled, tracker auto-enables when Ralph patterns are detected. +
diff --git a/src/web/public/styles.css b/src/web/public/styles.css index df29f7c2..01a7bad1 100644 --- a/src/web/public/styles.css +++ b/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; }