superlocalmemory 3.0.16 → 3.0.18

package/ui/index.html

@@ -740,7 +740,7 @@
             </li>
             <li class="nav-item">
                 <button class="nav-link" id="learning-tab" data-bs-toggle="tab" data-bs-target="#learning-pane">
-                    <i class="bi bi-mortarboard"></i> Learning <span class="badge bg-warning text-dark" style="font-size:0.6rem;vertical-align:top;">v2.7</span>
+                    <i class="bi bi-mortarboard"></i> Learning
                 </button>
             </li>
             <li class="nav-item">
@@ -760,17 +760,17 @@
             </li>
             <li class="nav-item" role="presentation">
                 <button class="nav-link" id="lifecycle-tab" data-bs-toggle="tab" data-bs-target="#lifecycle-pane" type="button" role="tab">
-                    <i class="bi bi-hourglass-split"></i> Lifecycle <span class="badge bg-success ms-1">v2.8</span>
+                    <i class="bi bi-hourglass-split"></i> Lifecycle
                 </button>
             </li>
             <li class="nav-item" role="presentation">
                 <button class="nav-link" id="behavioral-tab" data-bs-toggle="tab" data-bs-target="#behavioral-pane" type="button" role="tab">
-                    <i class="bi bi-lightbulb"></i> Behavioral <span class="badge bg-success ms-1">v2.8</span>
+                    <i class="bi bi-lightbulb"></i> Behavioral
                 </button>
             </li>
             <li class="nav-item" role="presentation">
                 <button class="nav-link" id="compliance-tab" data-bs-toggle="tab" data-bs-target="#compliance-pane" type="button" role="tab">
-                    <i class="bi bi-shield-lock"></i> Compliance <span class="badge bg-success ms-1">v2.8</span>
+                    <i class="bi bi-shield-lock"></i> Compliance
                 </button>
             </li>
             <li class="nav-item">
@@ -1023,8 +1023,13 @@
                 <p class="text-muted">See how each retrieval channel contributes to results.</p>
                 <div class="input-group mb-3">
                     <input type="text" id="recall-lab-query" class="form-control form-control-lg" placeholder="Enter your query...">
+                    <select id="recall-lab-per-page" class="form-select" style="max-width:100px;">
+                        <option value="10" selected>10</option>
+                        <option value="25">25</option>
+                        <option value="50">50</option>
+                    </select>
                     <button class="btn btn-primary btn-lg" id="recall-lab-search">
-                        <i class="bi bi-search"></i> Search with Trace
+                        <i class="bi bi-search"></i> Search
                     </button>
                 </div>
                 <div id="recall-lab-meta" class="mb-3 text-muted small"></div>
@@ -1070,8 +1075,19 @@
                 </div>
             </div>
 
-            <!-- Learning System (v2.7) -->
+            <!-- Learning System -->
             <div class="tab-pane fade" id="learning-pane">
+                <!-- Getting Started Guide -->
+                <div class="alert alert-light border mb-3" id="learning-getting-started">
+                    <h6 class="mb-2"><i class="bi bi-info-circle text-primary"></i> How Learning Works</h6>
+                    <p class="mb-1 small">SuperLocalMemory learns from your usage patterns to improve retrieval ranking over time. This happens automatically as you use <code>slm recall</code> or search via MCP.</p>
+                    <ul class="small mb-0">
+                        <li><strong>0-20 signals:</strong> Baseline phase (collecting data)</li>
+                        <li><strong>20+ signals:</strong> Rule-based ranking adjustments</li>
+                        <li><strong>200+ signals:</strong> ML model trained on your patterns</li>
+                    </ul>
+                    <p class="mb-0 mt-1 small text-muted">Each recall query generates a signal. Keep using SLM and this tab will populate automatically.</p>
+                </div>
                 <!-- Ranking Phase & Engagement -->
                 <div class="row g-3 mb-3">
                     <div class="col-md-4">
@@ -1424,12 +1440,18 @@
                 </div>
             </div>
 
-            <!-- Behavioral Learning (v2.8) -->
+            <!-- Behavioral Learning -->
             <div class="tab-pane fade" id="behavioral-pane" role="tabpanel">
                 <div class="d-flex justify-content-between align-items-center mb-3">
                     <h5 class="mb-0"><i class="bi bi-lightbulb text-info"></i> Behavioral Learning</h5>
                     <span class="badge bg-secondary" id="behavioral-profile-badge">default</span>
                 </div>
+                <!-- Getting Started Guide -->
+                <div class="alert alert-light border mb-3">
+                    <h6 class="mb-2"><i class="bi bi-info-circle text-primary"></i> How Behavioral Learning Works</h6>
+                    <p class="mb-1 small">This tab tracks how memories are used in practice — which recalls led to successful outcomes (code written, decisions made, bugs fixed) and which didn't.</p>
+                    <p class="mb-0 small text-muted">Report outcomes using the form below, or via MCP: <code>report_outcome</code>. Patterns emerge after 10+ outcomes.</p>
+                </div>
                 <!-- Stats Row -->
                 <div class="row g-3 mb-4">
                     <div class="col-md-3"><div class="card p-3 text-center"><div class="fw-bold fs-3 text-success" id="bh-success-count">-</div><small class="text-muted">Successes</small></div></div>
@@ -1465,12 +1487,18 @@
                 </div>
             </div>
 
-            <!-- Compliance & Audit (v2.8) -->
+            <!-- Compliance & Audit -->
             <div class="tab-pane fade" id="compliance-pane" role="tabpanel">
                 <div class="d-flex justify-content-between align-items-center mb-3">
                     <h5 class="mb-0"><i class="bi bi-shield-lock text-success"></i> Compliance &amp; Audit</h5>
                     <span class="badge bg-secondary" id="compliance-profile-badge">default</span>
                 </div>
+                <!-- Getting Started Guide -->
+                <div class="alert alert-light border mb-3">
+                    <h6 class="mb-2"><i class="bi bi-info-circle text-primary"></i> Compliance Overview</h6>
+                    <p class="mb-1 small">Set retention policies and access controls for your memories. In Mode A, all data stays on your device — EU AI Act compliant by default.</p>
+                    <p class="mb-0 small text-muted">Create a retention policy below to start managing memory lifecycle automatically.</p>
+                </div>
                 <!-- Stats Row -->
                 <div class="row g-3 mb-4">
                     <div class="col-md-4"><div class="card p-3 text-center"><div class="fw-bold fs-3" id="cp-audit-count">-</div><small class="text-muted">Audit Events</small></div></div>
@@ -1541,30 +1569,86 @@
                         <h6 class="mb-0"><i class="bi bi-gear-wide-connected"></i> V3 Configuration</h6>
                     </div>
                     <div class="card-body">
-                        <div class="row">
-                            <div class="col-md-6">
-                                <label class="form-label fw-bold">Operating Mode</label>
-                                <select id="settings-mode" class="form-select">
-                                    <option value="a">Mode A — Local Guardian (Zero Cloud)</option>
-                                    <option value="b">Mode B — Smart Local (Ollama)</option>
-                                    <option value="c">Mode C — Full Power (Cloud LLM)</option>
-                                </select>
-                                <button class="btn btn-sm btn-primary mt-2" id="settings-mode-save">Save Mode</button>
+                        <!-- Current Mode Banner -->
+                        <div id="settings-current-banner" class="alert alert-info mb-3">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <span>Active: <strong id="settings-current-mode">Loading...</strong></span>
+                                <span id="settings-current-detail" class="small"></span>
                             </div>
-                            <div class="col-md-6">
-                                <label class="form-label fw-bold">LLM Provider</label>
-                                <select id="settings-provider" class="form-select">
-                                    <option value="none">None (Mode A)</option>
-                                    <option value="openai">OpenAI</option>
-                                    <option value="anthropic">Anthropic</option>
-                                    <option value="ollama">Ollama (Local)</option>
-                                    <option value="openrouter">OpenRouter</option>
-                                </select>
-                                <div class="mt-2">
-                                    <input type="password" id="settings-api-key" class="form-control form-control-sm" placeholder="API Key">
+                        </div>
+
+                        <!-- Step 1: Mode -->
+                        <div class="mb-3">
+                            <label class="form-label fw-bold">Step 1: Operating Mode</label>
+                            <div class="btn-group w-100" role="group">
+                                <input type="radio" class="btn-check" name="settings-mode-radio" id="mode-a-radio" value="a" checked>
+                                <label class="btn btn-outline-success" for="mode-a-radio">
+                                    <strong>Mode A</strong><br><small>Zero Cloud — EU AI Act</small>
+                                </label>
+                                <input type="radio" class="btn-check" name="settings-mode-radio" id="mode-b-radio" value="b">
+                                <label class="btn btn-outline-info" for="mode-b-radio">
+                                    <strong>Mode B</strong><br><small>Local Ollama LLM</small>
+                                </label>
+                                <input type="radio" class="btn-check" name="settings-mode-radio" id="mode-c-radio" value="c">
+                                <label class="btn btn-outline-warning" for="mode-c-radio">
+                                    <strong>Mode C</strong><br><small>Cloud LLM (Best Accuracy)</small>
+                                </label>
+                            </div>
+                        </div>
+
+                        <!-- Step 2: Provider Config (Mode B/C only) -->
+                        <div id="settings-provider-panel" style="display:none;" class="card p-3 mb-3 border-primary">
+                            <h6 class="mb-2">Step 2: LLM Configuration</h6>
+
+                            <!-- Provider select -->
+                            <div class="row mb-2">
+                                <div class="col-md-4">
+                                    <label class="form-label small fw-bold">Provider</label>
+                                    <select id="settings-provider" class="form-select form-select-sm">
+                                        <option value="">-- Select --</option>
+                                        <option value="ollama">Ollama (Local)</option>
+                                        <option value="openrouter">OpenRouter</option>
+                                        <option value="openai">OpenAI</option>
+                                        <option value="anthropic">Anthropic</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-4">
+                                    <label class="form-label small fw-bold">Model <span class="text-danger">*</span></label>
+                                    <select id="settings-model" class="form-select form-select-sm">
+                                        <option value="">Select provider first</option>
+                                    </select>
+                                    <small id="settings-model-hint" class="text-muted"></small>
+                                </div>
+                                <div class="col-md-4" id="settings-key-col" style="display:none;">
+                                    <label class="form-label small fw-bold">API Key <span class="text-danger">*</span></label>
+                                    <input type="password" id="settings-api-key" class="form-control form-control-sm" placeholder="sk-... or your key">
+                                    <small class="text-muted">Saved locally in ~/.superlocalmemory/</small>
+                                </div>
+                            </div>
+
+                            <!-- Endpoint (advanced) -->
+                            <div class="row mb-2" id="settings-endpoint-row" style="display:none;">
+                                <div class="col-md-8">
+                                    <label class="form-label small">API Endpoint (advanced)</label>
+                                    <input type="text" id="settings-endpoint" class="form-control form-control-sm" placeholder="https://...">
                                 </div>
-                                <button class="btn btn-sm btn-primary mt-2" id="settings-provider-save">Save Provider</button>
                             </div>
+
+                            <!-- Connection test -->
+                            <div>
+                                <button class="btn btn-sm btn-outline-primary" id="settings-test-btn">
+                                    <i class="bi bi-lightning"></i> Test Connection
+                                </button>
+                                <span id="settings-test-result" class="ms-2 small"></span>
+                            </div>
+                        </div>
+
+                        <!-- Save button -->
+                        <div class="mt-2">
+                            <button class="btn btn-primary" id="settings-save-all">
+                                <i class="bi bi-check-circle"></i> Save Configuration
+                            </button>
+                            <span id="settings-save-status" class="ms-2" style="display:none;"></span>
                         </div>
                         <hr>
                         <div class="row">

package/ui/js/auto-settings.js

@@ -66,5 +66,334 @@ document.querySelectorAll('#auto-recall-toggle, #auto-recall-session').forEach(f
     }
 });
 
+// ============================================================================
+// Mode / Provider / Model Configuration (Professional Settings)
+// ============================================================================
+
+var PROVIDER_CONFIG = {
+    'ollama': {
+        name: 'Ollama',
+        needsKey: false,
+        endpoint: 'http://localhost:11434',
+        endpointEditable: true,
+        detectModels: true, // auto-detect via /api/v3/ollama/status
+    },
+    'openrouter': {
+        name: 'OpenRouter',
+        needsKey: true,
+        endpoint: 'https://openrouter.ai/api/v1',
+        endpointEditable: false,
+    },
+    'openai': {
+        name: 'OpenAI',
+        needsKey: true,
+        endpoint: 'https://api.openai.com/v1',
+        endpointEditable: true, // editable for Azure OpenAI
+    },
+    'anthropic': {
+        name: 'Anthropic',
+        needsKey: true,
+        endpoint: 'https://api.anthropic.com',
+        endpointEditable: false,
+    },
+};
+
+var MODEL_OPTIONS = {
+    'none': [],
+    'ollama': [
+        {value: 'llama3.1:8b', label: 'Llama 3.1 8B'},
+        {value: 'llama3.2:latest', label: 'Llama 3.2'},
+        {value: 'qwen3-vl:8b', label: 'Qwen3 VL 8B'},
+        {value: 'mistral:latest', label: 'Mistral'},
+    ],
+    'openrouter': [
+        {value: 'meta-llama/llama-3.1-8b-instruct:free', label: 'Llama 3.1 8B (Free)'},
+        {value: 'google/gemini-2.0-flash-001', label: 'Gemini 2.0 Flash'},
+        {value: 'anthropic/claude-3.5-haiku', label: 'Claude 3.5 Haiku'},
+        {value: 'openai/gpt-4o-mini', label: 'GPT-4o Mini'},
+        {value: 'deepseek/deepseek-chat-v3-0324:free', label: 'DeepSeek V3 (Free)'},
+    ],
+    'openai': [
+        {value: 'gpt-4o-mini', label: 'GPT-4o Mini'},
+        {value: 'gpt-4o', label: 'GPT-4o'},
+        {value: 'gpt-4-turbo', label: 'GPT-4 Turbo'},
+    ],
+    'anthropic': [
+        {value: 'claude-3-5-haiku-latest', label: 'Claude 3.5 Haiku'},
+        {value: 'claude-3-5-sonnet-latest', label: 'Claude 3.5 Sonnet'},
+        {value: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6'},
+    ],
+};
+
+async function loadModeSettings() {
+    try {
+        var resp = await fetch('/api/v3/mode');
+        if (!resp.ok) return;
+        var data = await resp.json();
+        var mode = data.mode || 'a';
+        var provider = data.provider || 'none';
+        var model = data.model || '';
+
+        // Set radio button
+        var radio = document.getElementById('mode-' + mode + '-radio');
+        if (radio) radio.checked = true;
+
+        // Set provider dropdown
+        var provEl = document.getElementById('settings-provider');
+        if (provEl && provider !== 'none') provEl.value = provider;
+
+        // Update banner
+        var modeNames = {a: 'Mode A — Local Guardian', b: 'Mode B — Smart Local', c: 'Mode C — Full Power'};
+        var bannerMode = document.getElementById('settings-current-mode');
+        if (bannerMode) {
+            var label = modeNames[mode] || mode;
+            if (provider && provider !== 'none') label += ' | ' + provider;
+            if (model) label += ' | ' + model;
+            bannerMode.textContent = label;
+        }
+
+        var bannerDetail = document.getElementById('settings-current-detail');
+        if (bannerDetail) {
+            if (mode === 'a') bannerDetail.textContent = 'Zero cloud — EU AI Act compliant';
+            else if (data.has_key) bannerDetail.textContent = 'API key configured';
+            else if (provider === 'ollama') bannerDetail.textContent = 'No API key needed';
+            else bannerDetail.textContent = 'API key not set';
+        }
+
+        var banner = document.getElementById('settings-current-banner');
+        if (banner) {
+            banner.className = mode === 'a' ? 'alert alert-success mb-3' :
+                               mode === 'b' ? 'alert alert-info mb-3' :
+                               'alert alert-warning mb-3';
+        }
+
+        // Show provider panel and populate model dropdown
+        updateModeUI();
+
+        // After provider UI updates, set the saved model value
+        if (model) {
+            setTimeout(function() {
+                var modelEl = document.getElementById('settings-model');
+                if (modelEl) {
+                    // Check if option exists, if not add it
+                    var found = false;
+                    for (var i = 0; i < modelEl.options.length; i++) {
+                        if (modelEl.options[i].value === model) { found = true; break; }
+                    }
+                    if (!found) {
+                        var opt = document.createElement('option');
+                        opt.value = model;
+                        opt.textContent = model + ' (current)';
+                        modelEl.insertBefore(opt, modelEl.firstChild);
+                    }
+                    modelEl.value = model;
+                }
+            }, 500);
+        }
+    } catch (e) {
+        console.log('Load mode settings error:', e);
+    }
+}
+
+function updateModeUI() {
+    var mode = document.querySelector('input[name="settings-mode-radio"]:checked')?.value || 'a';
+    var panel = document.getElementById('settings-provider-panel');
+    if (panel) {
+        panel.style.display = (mode === 'a') ? 'none' : 'block';
+    }
+    // Only set provider if it's currently empty (first load or Mode A→B/C)
+    var providerEl = document.getElementById('settings-provider');
+    if (providerEl && !providerEl.value) {
+        if (mode === 'b') providerEl.value = 'ollama';
+    }
+    if (mode !== 'a') updateProviderUI();
+}
+
+function updateProviderUI() {
+    var provider = document.getElementById('settings-provider')?.value || 'none';
+    var modelSelect = document.getElementById('settings-model');
+    var modelHint = document.getElementById('settings-model-hint');
+
+    // Preserve current model before rebuilding dropdown
+    var currentModel = modelSelect ? modelSelect.value : '';
+
+    var cfg = PROVIDER_CONFIG[provider] || {};
+
+    // Show/hide API key column
+    var keyCol = document.getElementById('settings-key-col');
+    if (keyCol) keyCol.style.display = cfg.needsKey ? 'block' : 'none';
+
+    // Show/hide endpoint row
+    var endpointRow = document.getElementById('settings-endpoint-row');
+    var endpointInput = document.getElementById('settings-endpoint');
+    if (endpointRow) {
+        endpointRow.style.display = cfg.endpointEditable ? 'block' : 'none';
+        if (endpointInput && cfg.endpoint) endpointInput.value = cfg.endpoint;
+    }
+
+    // For Ollama: check live status and populate real models
+    if (provider === 'ollama') {
+        if (modelHint) modelHint.textContent = 'Checking Ollama...';
+        fetch('/api/v3/ollama/status').then(function(r) { return r.json(); }).then(function(data) {
+            if (modelSelect) {
+                modelSelect.textContent = '';
+                if (data.running && data.models.length > 0) {
+                    data.models.forEach(function(m) {
+                        var opt = document.createElement('option');
+                        opt.value = m.name;
+                        opt.textContent = m.name;
+                        modelSelect.appendChild(opt);
+                    });
+                    if (modelHint) modelHint.textContent = 'Ollama running (' + data.count + ' models)';
+                    if (modelHint) modelHint.className = 'text-success small';
+                } else {
+                    var opt = document.createElement('option');
+                    opt.value = '';
+                    opt.textContent = 'Ollama not running!';
+                    modelSelect.appendChild(opt);
+                    if (modelHint) modelHint.textContent = 'Ollama not detected. Run: ollama serve';
+                    if (modelHint) modelHint.className = 'text-danger small';
+                }
+            }
+        }).catch(function() {
+            if (modelHint) { modelHint.textContent = 'Ollama not reachable'; modelHint.className = 'text-danger small'; }
+        });
+        return;
+    }
+
+    // For other providers: use static model list
+    if (modelSelect) {
+        modelSelect.textContent = '';
+        var options = MODEL_OPTIONS[provider] || [];
+        if (options.length === 0) {
+            var opt = document.createElement('option');
+            opt.value = '';
+            opt.textContent = 'N/A (Mode A)';
+            modelSelect.appendChild(opt);
+        } else {
+            options.forEach(function(o) {
+                var opt = document.createElement('option');
+                opt.value = o.value;
+                opt.textContent = o.label;
+                modelSelect.appendChild(opt);
+            });
+        }
+        // Restore previous model selection if it exists in the new list
+        if (currentModel) {
+            var found = false;
+            for (var i = 0; i < modelSelect.options.length; i++) {
+                if (modelSelect.options[i].value === currentModel) { found = true; break; }
+            }
+            if (found) {
+                modelSelect.value = currentModel;
+            } else if (currentModel) {
+                // Model not in list — add it as custom option so user doesn't lose their choice
+                var custom = document.createElement('option');
+                custom.value = currentModel;
+                custom.textContent = currentModel + ' (saved)';
+                modelSelect.insertBefore(custom, modelSelect.firstChild);
+                modelSelect.value = currentModel;
+            }
+        }
+    }
+
+    // Update hint
+    if (modelHint) {
+        var hints = {
+            'none': 'No LLM needed in Mode A',
+            'openrouter': '200+ models via OpenRouter API',
+            'openai': 'OpenAI models (requires API key)',
+            'anthropic': 'Anthropic models (requires API key)',
+        };
+        modelHint.textContent = hints[provider] || '';
+        modelHint.className = 'text-muted small';
+    }
+}
+
+async function testConnection() {
+    var provider = document.getElementById('settings-provider')?.value || '';
+    var model = document.getElementById('settings-model')?.value || '';
+    var apiKey = document.getElementById('settings-api-key')?.value || '';
+    var resultEl = document.getElementById('settings-test-result');
+
+    if (!provider) {
+        if (resultEl) { resultEl.textContent = 'Select a provider first'; resultEl.className = 'ms-2 small text-danger'; }
+        return;
+    }
+
+    if (resultEl) { resultEl.textContent = 'Testing...'; resultEl.className = 'ms-2 small text-muted'; }
+
+    try {
+        var resp = await fetch('/api/v3/provider/test', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({provider: provider, model: model, api_key: apiKey})
+        });
+        var data = await resp.json();
+        if (data.success) {
+            if (resultEl) { resultEl.textContent = 'Connected! ' + (data.message || ''); resultEl.className = 'ms-2 small text-success fw-bold'; }
+        } else {
+            if (resultEl) { resultEl.textContent = 'Failed: ' + (data.error || 'Unknown'); resultEl.className = 'ms-2 small text-danger'; }
+        }
+    } catch (e) {
+        if (resultEl) { resultEl.textContent = 'Error: ' + e.message; resultEl.className = 'ms-2 small text-danger'; }
+    }
+}
+
+async function saveAllSettings() {
+    var mode = document.querySelector('input[name="settings-mode-radio"]:checked')?.value || 'a';
+    var provider = document.getElementById('settings-provider')?.value || 'none';
+    if (mode === 'a') provider = 'none';
+    var model = document.getElementById('settings-model')?.value || '';
+    var apiKey = document.getElementById('settings-api-key')?.value || '';
+
+    var statusEl = document.getElementById('settings-save-status');
+    var saveBtn = document.getElementById('settings-save-all');
+    if (saveBtn) saveBtn.disabled = true;
+    if (statusEl) { statusEl.textContent = 'Saving...'; statusEl.style.display = 'inline'; statusEl.className = 'ms-2 text-muted'; }
+
+    try {
+        // Save mode
+        var modeResp = await fetch('/api/v3/mode/set', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({mode: mode, provider: provider, model: model, api_key: apiKey})
+        });
+
+        if (modeResp.ok) {
+            if (statusEl) {
+                statusEl.textContent = 'Configuration saved! Mode: ' + mode.toUpperCase() +
+                    (provider !== 'none' ? ' | Provider: ' + provider : '');
+                statusEl.className = 'ms-2 text-success fw-bold';
+            }
+            loadModeSettings();
+        } else {
+            if (statusEl) { statusEl.textContent = 'Save failed'; statusEl.className = 'ms-2 text-danger'; }
+        }
+    } catch (e) {
+        if (statusEl) { statusEl.textContent = 'Error: ' + e.message; statusEl.className = 'ms-2 text-danger'; }
+    }
+    if (saveBtn) saveBtn.disabled = false;
+
+    // Auto-hide status after 5 seconds
+    setTimeout(function() {
+        if (statusEl) statusEl.style.display = 'none';
+    }, 5000);
+}
+
+// Bind events
+document.getElementById('settings-provider')?.addEventListener('change', updateProviderUI);
+document.getElementById('settings-save-all')?.addEventListener('click', saveAllSettings);
+document.getElementById('settings-test-btn')?.addEventListener('click', testConnection);
+
+// Mode radio buttons
+document.querySelectorAll('input[name="settings-mode-radio"]').forEach(function(radio) {
+    radio.addEventListener('change', updateModeUI);
+});
+
 // Load settings when the settings tab is shown
-document.getElementById('settings-tab')?.addEventListener('shown.bs.tab', loadAutoSettings);
+document.getElementById('settings-tab')?.addEventListener('shown.bs.tab', function() {
+    loadAutoSettings();
+    loadModeSettings();
+    updateModeUI();
+});