From f61df0b89e0dd0cbf5efbd6ef1c1b6427748af1f Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Wed, 21 Jan 2026 13:07:45 +0100
Subject: [PATCH] feat(ui): improve settings modal with tabs and bolder Run
 Claude text

- Add tabbed interface to App Settings modal (Display, Claude CLI, Paths)
- Add modal-lg class for wider settings modal (520px)
- Remove "(will be created)" text from empty case display
- Make Run Claude button text bolder (font-weight: 700)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/app.js     | 24 +++++++++++++++++++---
 src/web/public/index.html | 42 ++++++++++++++++++++-------------------
 src/web/public/styles.css |  6 +++++-
 3 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/src/web/public/app.js b/src/web/public/app.js
index 42983ec5..808221ce 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -942,9 +942,9 @@ class ClaudemanApp {
         select.value = firstCase.name;
         this.updateDirDisplayForCase(firstCase.name);
       } else {
-        // No cases exist yet - show the default case name as directory hint
+        // No cases exist yet - show the default case name as directory
         select.value = 'testcase';
-        document.getElementById('dirDisplay').textContent = '~/claudeman-cases/testcase (will be created)';
+        document.getElementById('dirDisplay').textContent = '~/claudeman-cases/testcase';
       }
 
       // Only add event listener once (on first load)
@@ -1771,7 +1771,25 @@ class ClaudemanApp {
     claudeModeSelect.onchange = () => {
       allowedToolsRow.style.display = claudeModeSelect.value === 'allowedTools' ? '' : 'none';
     };
-    document.getElementById('appSettingsModal').classList.add('active');
+    // Reset to first tab and wire up tab switching
+    this.switchSettingsTab('settings-display');
+    const modal = document.getElementById('appSettingsModal');
+    modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
+      btn.onclick = () => this.switchSettingsTab(btn.dataset.tab);
+    });
+    modal.classList.add('active');
+  }
+
+  switchSettingsTab(tabName) {
+    const modal = document.getElementById('appSettingsModal');
+    // Toggle active class on tab buttons
+    modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.tab === tabName);
+    });
+    // Toggle hidden class on tab content
+    modal.querySelectorAll('.modal-tab-content').forEach(content => {
+      content.classList.toggle('hidden', content.id !== tabName);
+    });
   }
 
   closeAppSettings() {
diff --git a/src/web/public/index.html b/src/web/public/index.html
index b0faf66d..ef6ed81d 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -437,14 +437,19 @@
     <!-- App Settings Modal -->
     <div class="modal" id="appSettingsModal">
       <div class="modal-backdrop" onclick="app.closeAppSettings()"></div>
-      <div class="modal-content">
+      <div class="modal-content modal-lg">
         <div class="modal-header">
           <h3>App Settings</h3>
           <button class="modal-close" onclick="app.closeAppSettings()">&times;</button>
         </div>
+        <div class="modal-tabs">
+          <button class="modal-tab-btn active" data-tab="settings-display">Display</button>
+          <button class="modal-tab-btn" data-tab="settings-claude">Claude CLI</button>
+          <button class="modal-tab-btn" data-tab="settings-paths">Paths</button>
+        </div>
         <div class="modal-body">
-          <div class="settings-section">
-            <div class="settings-section-title">Header Display</div>
+          <!-- Display Tab -->
+          <div class="modal-tab-content" id="settings-display">
             <div class="form-row form-row-switch">
               <label>Show Font Controls</label>
               <label class="switch">
@@ -478,8 +483,8 @@
               <span class="form-hint">Show Monitor panel at bottom right</span>
             </div>
           </div>
-          <div class="settings-section">
-            <div class="settings-section-title">Claude CLI</div>
+          <!-- Claude CLI Tab -->
+          <div class="modal-tab-content hidden" id="settings-claude">
             <div class="form-row">
               <label>Startup Mode</label>
               <select id="appSettingsClaudeMode" class="form-select">
@@ -492,13 +497,21 @@
             <div class="form-row" id="allowedToolsRow" style="display: none;">
               <label>Allowed Tools</label>
               <input type="text" id="appSettingsAllowedTools" placeholder="Read,Glob,Grep,Bash">
-              <span class="form-hint">Comma-separated list of tools to allow (e.g., Read,Glob,Grep,Bash)</span>
+              <span class="form-hint">Comma-separated list of tools to allow</span>
+            </div>
+            <div class="form-row form-row-switch">
+              <label>Enable Ralph Tracker</label>
+              <label class="switch">
+                <input type="checkbox" id="appSettingsRalphEnabled">
+                <span class="slider"></span>
+              </label>
+              <span class="form-hint">Auto-enable for new sessions (otherwise auto-enables on Ralph pattern detection)</span>
             </div>
           </div>
-          <div class="settings-section">
-            <div class="settings-section-title">Paths & Defaults</div>
+          <!-- Paths Tab -->
+          <div class="modal-tab-content hidden" id="settings-paths">
             <div class="form-row">
-              <label>Default CLAUDE.md Template Path</label>
+              <label>Default CLAUDE.md Template</label>
               <input type="text" id="appSettingsClaudeMdPath" placeholder="/path/to/CLAUDE.md template">
               <span class="form-hint">Used when creating new cases. Leave empty for built-in template.</span>
             </div>
@@ -508,17 +521,6 @@
               <span class="form-hint">Default directory for new sessions.</span>
             </div>
           </div>
-          <div class="settings-section">
-            <div class="settings-section-title">Features</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">
           <button class="btn-toolbar" onclick="app.closeAppSettings()">Cancel</button>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 68d1cfbf..badfcd4a 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -1163,7 +1163,7 @@ body {
   background: linear-gradient(135deg, #1e3a5f 0%, #3d2a5c 100%);
   border-color: #2d4a6f;
   color: var(--accent-hover);
-  font-weight: 500;
+  font-weight: 700;
   padding: 0.4rem 0.85rem;
 }
 
@@ -1728,6 +1728,10 @@ body {
   max-width: 340px;
 }
 
+.modal-content.modal-lg {
+  max-width: 520px;
+}
+
 .modal-warning-text {
   color: var(--text-dim);
   font-size: 0.85rem;