@mooncompany/uplink-chat 0.5.0

package/public/js/settings.js

@@ -0,0 +1,1087 @@
+// ============================================
+// SETTINGS MODULE
+// Settings panel, preferences
+// ============================================
+
+// DOM elements
+let settingsBtn, settingsPanel;
+let agentNameInput, gatewayUrlInput;
+let encryptToggle, changePasswordRow, changePasswordBtn;
+let syncRow, syncPushBtn, syncPullBtn, syncStatus;
+let clearBtn, logoutBtn;
+let textInput;
+let showShortcutsBtn;
+let voiceModeSelect, realtimeVoiceRow, realtimeVoiceSelect, realtimeKeyRow, realtimeKeyInput, realtimeKeySaveBtn, realtimeKeyStatus;
+
+// Focus trap elements
+let focusableElements = [];
+let firstFocusableElement = null;
+let lastFocusableElement = null;
+
+// Cleanup: MutationObserver and AbortController for event listeners
+let panelObserver = null;
+let eventsAbortController = null;
+
+function init() {
+  settingsBtn = document.getElementById('settingsBtn');
+  settingsPanel = document.getElementById('settingsPanel');
+  agentNameInput = document.getElementById('agentNameInput');
+  gatewayUrlInput = document.getElementById('gatewayUrlInput');
+  encryptToggle = document.getElementById('encryptToggle');
+  changePasswordRow = document.getElementById('changePasswordRow');
+  changePasswordBtn = document.getElementById('changePasswordBtn');
+  syncRow = document.getElementById('syncRow');
+  syncPushBtn = document.getElementById('syncPushBtn');
+  syncPullBtn = document.getElementById('syncPullBtn');
+  syncStatus = document.getElementById('syncStatus');
+  clearBtn = document.getElementById('settingsClearBtn');
+  logoutBtn = document.getElementById('logoutBtn');
+  textInput = document.getElementById('textInput');
+  showShortcutsBtn = document.getElementById('showShortcutsBtn');
+  voiceModeSelect = document.getElementById('voiceModeSelect');
+  realtimeVoiceRow = document.getElementById('realtimeVoiceRow');
+  realtimeVoiceSelect = document.getElementById('realtimeVoiceSelect');
+  realtimeKeyRow = document.getElementById('realtimeKeyRow');
+  realtimeKeyInput = document.getElementById('realtimeKeyInput');
+  realtimeKeySaveBtn = document.getElementById('realtimeKeySaveBtn');
+  realtimeKeyStatus = document.getElementById('realtimeKeyStatus');
+
+  if (!settingsBtn || !settingsPanel) {
+    console.warn('Settings: Elements not found, retrying...');
+    setTimeout(init, 100);
+    return;
+  }
+
+  // Initialize sub-modules
+  if (window.UplinkAppearanceSettings) window.UplinkAppearanceSettings.init();
+  if (window.UplinkTTSSettings) window.UplinkTTSSettings.init();
+  if (window.UplinkSTTSettings) window.UplinkSTTSettings.init();
+
+  // Setup collapsible sections
+  setupSections();
+
+  // Setup event listeners
+  setupEvents();
+
+  // Apply initial state
+  applyState();
+
+  // Register with panel manager
+  if (window.UplinkPanels && settingsPanel) {
+    window.UplinkPanels.register('settings', {
+      element: settingsPanel,
+      isOpen: () => settingsPanel.classList.contains('visible'),
+      open: () => {
+        settingsPanel.classList.add('visible');
+        onPanelOpen();
+      },
+      close: () => {
+        settingsPanel.classList.remove('visible');
+        onPanelClose();
+      }
+    });
+  }
+
+  // Cleanup previous observer if init is called again
+  if (panelObserver) {
+    panelObserver.disconnect();
+    panelObserver = null;
+  }
+
+  // Listen for panel visibility changes (for focus trap)
+  panelObserver = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'class') {
+        const isVisible = settingsPanel.classList.contains('visible');
+        if (isVisible) {
+          onPanelOpen();
+        } else {
+          onPanelClose();
+        }
+      }
+    });
+  });
+
+  if (settingsPanel) {
+    panelObserver.observe(settingsPanel, { attributes: true });
+  }
+
+  // Bind logout button (now in HTML)
+  const existingLogoutBtn = document.getElementById('logoutBtn');
+  if (existingLogoutBtn) {
+    existingLogoutBtn.addEventListener('click', handleLogout);
+  }
+  console.log('Settings: Initialized');
+}
+
+// Collapsible section management
+function setupSections() {
+  if (!settingsPanel) return;
+
+  const headers = settingsPanel.querySelectorAll('.settings-section-header');
+  headers.forEach(header => {
+    header.addEventListener('click', () => {
+      const expanded = header.getAttribute('aria-expanded') === 'true';
+      const bodyId = header.getAttribute('aria-controls');
+      const body = document.getElementById(bodyId);
+      if (!body) return;
+
+      if (expanded) {
+        // Collapse
+        header.setAttribute('aria-expanded', 'false');
+        body.classList.add('collapsed');
+      } else {
+        // Expand
+        header.setAttribute('aria-expanded', 'true');
+        body.classList.remove('collapsed');
+      }
+
+      // Update focusable elements for focus trap
+      updateFocusableElements();
+    });
+  });
+
+  // Restore saved section states
+  const savedSections = localStorage.getItem('uplink-settings-sections');
+  if (savedSections) {
+    try {
+      const states = JSON.parse(savedSections);
+      headers.forEach(header => {
+        const section = header.closest('.settings-section');
+        const key = section?.dataset.section;
+        if (key && states[key] !== undefined) {
+          const bodyId = header.getAttribute('aria-controls');
+          const body = document.getElementById(bodyId);
+          if (!body) return;
+          
+          if (states[key]) {
+            header.setAttribute('aria-expanded', 'true');
+            body.classList.remove('collapsed');
+          } else {
+            header.setAttribute('aria-expanded', 'false');
+            body.classList.add('collapsed');
+          }
+        }
+      });
+    } catch (e) { /* ignore corrupt data */ }
+  }
+
+  // Save section states on toggle
+  settingsPanel.addEventListener('click', (e) => {
+    const header = e.target.closest('.settings-section-header');
+    if (!header) return;
+    
+    // Debounce save
+    setTimeout(saveSectionStates, 50);
+  });
+}
+
+function saveSectionStates() {
+  if (!settingsPanel) return;
+  const states = {};
+  settingsPanel.querySelectorAll('.settings-section').forEach(section => {
+    const key = section.dataset.section;
+    const header = section.querySelector('.settings-section-header');
+    if (key && header) {
+      states[key] = header.getAttribute('aria-expanded') === 'true';
+    }
+  });
+  localStorage.setItem('uplink-settings-sections', JSON.stringify(states));
+}
+
+// Show toast notification
+function showToast(message, type = 'success') {
+  const existingToast = document.querySelector('.settings-toast');
+  if (existingToast) {
+    existingToast.remove();
+  }
+
+  const toast = document.createElement('div');
+  toast.className = `settings-toast ${type}`;
+  toast.textContent = message;
+  // M-35: Announce toast to screen readers
+  toast.setAttribute('role', 'alert');
+  toast.setAttribute('aria-live', 'polite');
+  toast.style.cssText = `
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: ${type === 'success' ? '#10b981' : '#ef4444'};
+    color: white;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    z-index: 10000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  `;
+
+  document.body.appendChild(toast);
+
+  // Trigger animation
+  requestAnimationFrame(() => {
+    toast.style.opacity = '1';
+  });
+
+  // Remove after 3 seconds
+  setTimeout(() => {
+    toast.style.opacity = '0';
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+// Focus trap functions
+function updateFocusableElements() {
+  if (!settingsPanel) return;
+
+  focusableElements = Array.from(
+    settingsPanel.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    )
+  ).filter(el => !el.disabled && el.offsetParent !== null);
+
+  firstFocusableElement = focusableElements[0];
+  lastFocusableElement = focusableElements[focusableElements.length - 1];
+}
+
+function handleFocusTrap(e) {
+  if (e.key !== 'Tab' || !settingsPanel?.classList.contains('visible')) return;
+
+  updateFocusableElements();
+
+  if (focusableElements.length === 0) return;
+
+  if (e.shiftKey) {
+    // Shift + Tab
+    if (document.activeElement === firstFocusableElement) {
+      e.preventDefault();
+      lastFocusableElement.focus();
+    }
+  } else {
+    // Tab
+    if (document.activeElement === lastFocusableElement) {
+      e.preventDefault();
+      firstFocusableElement.focus();
+    }
+  }
+}
+
+function onPanelOpen() {
+  updateFocusableElements();
+  // Focus first focusable element
+  if (firstFocusableElement) {
+    firstFocusableElement.focus();
+  }
+  // Add focus trap listener
+  document.addEventListener('keydown', handleFocusTrap);
+}
+
+function onPanelClose() {
+  // Remove focus trap listener
+  document.removeEventListener('keydown', handleFocusTrap);
+  // Return focus to settings button
+  if (settingsBtn) {
+    settingsBtn.focus();
+  }
+}
+
+function applyState() {
+  const core = window.UplinkCore;
+  if (!core) return;
+
+  // Update inputs with current values
+  if (agentNameInput) agentNameInput.value = core.agentName;
+  if (gatewayUrlInput) gatewayUrlInput.value = core.gatewayUrl;
+  if (encryptToggle) {
+    encryptToggle.classList.toggle('on', core.encryptionEnabled);
+    encryptToggle.setAttribute('aria-checked', core.encryptionEnabled ? 'true' : 'false');
+  }
+  if (changePasswordRow) changePasswordRow.style.display = core.encryptionEnabled ? 'flex' : 'none';
+  if (syncRow) syncRow.style.display = core.encryptionEnabled ? 'flex' : 'none';
+  if (textInput) textInput.placeholder = `Message ${core.agentName}...`;
+
+  // Apply sub-module states
+  if (window.UplinkAppearanceSettings) window.UplinkAppearanceSettings.applyState();
+  if (window.UplinkTTSSettings) window.UplinkTTSSettings.applyState();
+  if (window.UplinkSTTSettings) window.UplinkSTTSettings.applyState();
+  
+  // Load voice mode settings
+  loadVoiceModeSettings();
+  
+  // Update about section
+  updateAboutSection();
+}
+
+async function loadVoiceModeSettings() {
+  try {
+    const response = await fetch('/api/config');
+    if (!response.ok) return;
+    const config = await response.json();
+    
+    // Select the correct voice mode card
+    const mode = config.voiceMode || 'push-to-talk';
+    const voiceModeCards = document.querySelectorAll('.voice-mode-card');
+    voiceModeCards.forEach(card => {
+      if (card.dataset.mode === mode) {
+        card.classList.add('selected');
+        card.setAttribute('aria-checked', 'true');
+      } else {
+        card.classList.remove('selected');
+        card.setAttribute('aria-checked', 'false');
+      }
+    });
+    
+    // Update agent name in agent-voice card description
+    const agentVoiceDesc = document.querySelector('.voice-mode-card[data-mode="agent-voice"] .voice-mode-desc');
+    if (agentVoiceDesc && config.assistantName) {
+      agentVoiceDesc.textContent = `Talk to ${config.assistantName} — full tools & memory`;
+    }
+    
+    // Show/hide conditional settings
+    updateVoiceModeSettings(mode);
+    
+    // Load voice-specific settings
+    if (realtimeVoiceSelect && config.realtimeVoice) {
+      realtimeVoiceSelect.value = config.realtimeVoice;
+    }
+    if (realtimeKeyStatus) {
+      realtimeKeyStatus.textContent = config.hasOpenaiKey 
+        ? '✓ Key saved' 
+        : 'Required for real-time voice';
+    }
+    
+    // Load live voice settings
+    const liveVoiceSelect = document.getElementById('liveVoiceSelect');
+    if (liveVoiceSelect && config.realtimeVoice) {
+      liveVoiceSelect.value = config.realtimeVoice;
+    }
+    const liveVoiceKeyStatus = document.getElementById('liveVoiceKeyStatus');
+    if (liveVoiceKeyStatus) {
+      liveVoiceKeyStatus.textContent = config.hasOpenaiKey 
+        ? '✓ Key saved' 
+        : 'Required for real-time voice';
+    }
+    
+    // Load agent voice settings
+    const agentVoiceTtsEngineSelect = document.getElementById('agentVoiceTtsEngineSelect');
+    if (agentVoiceTtsEngineSelect && config.agentVoiceTtsEngine) {
+      agentVoiceTtsEngineSelect.value = config.agentVoiceTtsEngine;
+    }
+    const agentVoiceTtsVoiceSelect = document.getElementById('agentVoiceTtsVoiceSelect');
+    if (agentVoiceTtsVoiceSelect && config.agentVoiceTtsVoice) {
+      agentVoiceTtsVoiceSelect.value = config.agentVoiceTtsVoice;
+    }
+    
+    // Load VAD sensitivity
+    const vadSlider = document.getElementById('vadSensitivitySlider');
+    const vadValue = document.getElementById('vadSensitivityValue');
+    if (vadSlider) {
+      const savedVad = config.vadSilenceDurationMs || 400;
+      vadSlider.value = savedVad;
+      if (vadValue) vadValue.textContent = `${(savedVad / 1000).toFixed(1)}s`;
+    }
+  } catch (error) {
+    console.warn('Settings: Failed to load voice mode settings', error);
+  }
+}
+
+function updateVoiceModeSettings(mode) {
+  // Get containers for conditional settings
+  const pushToTalkSettings = document.getElementById('pushToTalkSettings');
+  const liveVoiceSettings = document.getElementById('liveVoiceSettings');
+  const agentVoiceSettings = document.getElementById('agentVoiceSettings');
+  
+  // Hide all
+  if (pushToTalkSettings) pushToTalkSettings.classList.add('setting-hidden');
+  if (liveVoiceSettings) liveVoiceSettings.classList.add('setting-hidden');
+  if (agentVoiceSettings) agentVoiceSettings.classList.add('setting-hidden');
+  
+  // Show relevant settings based on mode
+  if (mode === 'push-to-talk' && pushToTalkSettings) {
+    pushToTalkSettings.classList.remove('setting-hidden');
+  } else if (mode === 'live-voice' && liveVoiceSettings) {
+    liveVoiceSettings.classList.remove('setting-hidden');
+  } else if (mode === 'agent-voice' && agentVoiceSettings) {
+    agentVoiceSettings.classList.remove('setting-hidden');
+  }
+}
+
+async function updateAboutSection() {
+  const versionEl = document.getElementById('aboutVersion');
+  const statusEl = document.getElementById('aboutGatewayStatus');
+  const dotEl = document.getElementById('aboutGatewayDot');
+  
+  if (!statusEl || !dotEl) return;
+
+  try {
+    // Use Uplink's own server-side gateway check instead of hitting the gateway directly
+    // This avoids CORS issues and works regardless of gateway URL format (ws://, http://, etc.)
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 5000);
+    
+    const resp = await fetch('/api/session/status', { signal: controller.signal });
+    clearTimeout(timeout);
+    
+    if (resp.ok) {
+      const data = await resp.json();
+      if (data.gatewayConnected) {
+        statusEl.textContent = 'Connected';
+        dotEl.className = 'status-indicator connected';
+      } else {
+        statusEl.textContent = 'Disconnected';
+        dotEl.className = 'status-indicator disconnected';
+      }
+    } else {
+      statusEl.textContent = `Error (${resp.status})`;
+      dotEl.className = 'status-indicator disconnected';
+    }
+  } catch (e) {
+    statusEl.textContent = 'Unreachable';
+    dotEl.className = 'status-indicator disconnected';
+  }
+}
+
+// Server settings state (for tracking changes)
+let serverSettingsOriginal = { watchdogEnabled: true, networkAccess: false };
+
+async function fetchServerSettings() {
+  try {
+    const response = await fetch('/api/config/server');
+    if (!response.ok) return;
+    
+    const data = await response.json();
+    const watchdogToggle = document.getElementById('watchdogToggle');
+    const networkAccessToggle = document.getElementById('networkAccessToggle');
+    const restartRow = document.getElementById('serverRestartRow');
+    
+    if (watchdogToggle) watchdogToggle.checked = data.watchdogEnabled;
+    if (networkAccessToggle) networkAccessToggle.checked = data.networkAccess;
+    
+    serverSettingsOriginal = {
+      watchdogEnabled: data.watchdogEnabled,
+      networkAccess: data.networkAccess
+    };
+    
+    // Hide restart row initially
+    if (restartRow) restartRow.style.display = 'none';
+  } catch (error) {
+    console.warn('Settings: Failed to fetch server settings', error);
+  }
+}
+
+function checkServerSettingsChanged() {
+  const watchdogToggle = document.getElementById('watchdogToggle');
+  const networkAccessToggle = document.getElementById('networkAccessToggle');
+  const restartRow = document.getElementById('serverRestartRow');
+  
+  if (!watchdogToggle || !networkAccessToggle || !restartRow) return;
+  
+  const changed = watchdogToggle.checked !== serverSettingsOriginal.watchdogEnabled ||
+                  networkAccessToggle.checked !== serverSettingsOriginal.networkAccess;
+  
+  restartRow.style.display = changed ? 'flex' : 'none';
+}
+
+async function saveServerSettings() {
+  const watchdogToggle = document.getElementById('watchdogToggle');
+  const networkAccessToggle = document.getElementById('networkAccessToggle');
+  
+  if (!watchdogToggle || !networkAccessToggle) return;
+  
+  try {
+    const response = await fetch('/api/config/server', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        watchdogEnabled: watchdogToggle.checked,
+        networkAccess: networkAccessToggle.checked
+      })
+    });
+    
+    if (!response.ok) throw new Error('Failed to save');
+    return true;
+  } catch (error) {
+    console.error('Settings: Failed to save server settings', error);
+    return false;
+  }
+}
+
+async function restartServer() {
+  const saved = await saveServerSettings();
+  if (!saved) {
+    alert('Failed to save settings. Please try again.');
+    return;
+  }
+  
+  const restartBtn = document.getElementById('serverRestartBtn');
+  if (restartBtn) {
+    restartBtn.textContent = 'Restarting...';
+    restartBtn.disabled = true;
+  }
+  
+  try {
+    await fetch('/api/config/server/restart', { method: 'POST' });
+  } catch {
+    // Expected — server is shutting down
+  }
+  
+  // Wait for server to come back, then reload
+  let attempts = 0;
+  const checkReady = setInterval(async () => {
+    attempts++;
+    if (attempts > 30) { // 15 seconds max
+      clearInterval(checkReady);
+      if (restartBtn) {
+        restartBtn.textContent = 'Restart Server';
+        restartBtn.disabled = false;
+      }
+      alert('Server did not restart in time. Please restart manually.');
+      return;
+    }
+    try {
+      const res = await fetch('/api/status', { signal: AbortSignal.timeout(2000) });
+      if (res.ok) {
+        clearInterval(checkReady);
+        window.location.reload();
+      }
+    } catch {
+      // Server still down, keep trying
+    }
+  }, 500);
+}
+
+function setupEvents() {
+  // Abort previous event listeners to prevent stacking if init called multiple times
+  if (eventsAbortController) {
+    eventsAbortController.abort();
+  }
+  eventsAbortController = new AbortController();
+  const signal = eventsAbortController.signal;
+
+  // Toggle settings panel (via panel manager for mutual exclusivity)
+  settingsBtn?.addEventListener('click', () => {
+    if (window.UplinkPanels) {
+      window.UplinkPanels.toggle('settings', settingsBtn);
+    } else {
+      settingsPanel?.classList.toggle('visible');
+    }
+  });
+
+  // Close button
+  const closeBtn = document.getElementById('settingsCloseBtn');
+  closeBtn?.addEventListener('click', () => {
+    if (window.UplinkPanels) {
+      window.UplinkPanels.close('settings');
+    } else {
+      settingsPanel?.classList.remove('visible');
+    }
+  });
+
+  // Agent name change
+  agentNameInput?.addEventListener('change', () => {
+    const core = window.UplinkCore;
+    if (core) {
+      core.agentName = agentNameInput.value.trim() || 'Assistant';
+      if (textInput) textInput.placeholder = `Message ${core.agentName}...`;
+    }
+  });
+
+  // Gateway URL change with validation
+  gatewayUrlInput?.addEventListener('change', async () => {
+    const core = window.UplinkCore;
+    if (!core) return;
+
+    // Mobile keyboard fixes: trim, lowercase, remove spaces, fix autocorrect
+    let newUrl = gatewayUrlInput.value.trim().toLowerCase();
+    newUrl = newUrl.replace(/\s+/g, ''); // Remove spaces mobile keyboards add
+    newUrl = newUrl.replace(/local\s*host/gi, 'localhost'); // Fix "local host"
+    
+    // Add http:// if no protocol
+    if (newUrl && !/^(https?|wss?):\/\//i.test(newUrl)) {
+      newUrl = 'http://' + newUrl;
+    }
+    
+    // Update input with cleaned URL
+    gatewayUrlInput.value = newUrl;
+    
+    if (!newUrl) return;
+
+    // Validate URL format
+    try {
+      new URL(newUrl);
+    } catch (e) {
+      showToast('Invalid URL format', 'error');
+      gatewayUrlInput.value = core.gatewayUrl;
+      return;
+    }
+
+    // Convert WebSocket URLs to HTTP for health check
+    const healthCheckUrl = newUrl
+      .replace(/^ws:/, 'http:')
+      .replace(/^wss:/, 'https:')
+      .replace(/\/$/, '');
+
+    // Test gateway connectivity
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 5000);
+
+      const response = await fetch(`${healthCheckUrl}/health`, {
+        method: 'GET',
+        signal: controller.signal
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      // Gateway is reachable, save the URL
+      core.gatewayUrl = newUrl;
+      showToast('Settings saved!', 'success');
+    } catch (error) {
+      console.error('Gateway validation failed:', error);
+      // Still save the URL but warn user - they might know it works
+      core.gatewayUrl = newUrl;
+      showToast('Gateway unreachable, but URL saved. Check connection.', 'warning');
+    }
+  });
+
+  // Encryption toggle
+  encryptToggle?.addEventListener('click', toggleEncryption);
+
+  // Encryption toggle keyboard handler
+  encryptToggle?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      encryptToggle.click();
+    }
+  });
+
+  // Change password
+  changePasswordBtn?.addEventListener('click', changePassword);
+
+  // Sync buttons
+  syncPushBtn?.addEventListener('click', handleSyncPush);
+  syncPullBtn?.addEventListener('click', handleSyncPull);
+
+  // Clear chat
+  clearBtn?.addEventListener('click', clearChat);
+
+  // Show keyboard shortcuts
+  showShortcutsBtn?.addEventListener('click', () => {
+    if (window.UplinkShortcuts?.show) {
+      window.UplinkShortcuts.show();
+    }
+  });
+
+  // Server settings: watchdog toggle
+  const watchdogToggle = document.getElementById('watchdogToggle');
+  watchdogToggle?.addEventListener('change', () => {
+    checkServerSettingsChanged();
+  }, { signal });
+
+  // Server settings: network access toggle
+  const networkAccessToggle = document.getElementById('networkAccessToggle');
+  networkAccessToggle?.addEventListener('change', () => {
+    checkServerSettingsChanged();
+  }, { signal });
+
+  // Server settings: restart button
+  const serverRestartBtn = document.getElementById('serverRestartBtn');
+  serverRestartBtn?.addEventListener('click', restartServer, { signal });
+
+  // Voice mode settings (radio cards)
+  const voiceModeCards = document.querySelectorAll('.voice-mode-card');
+  
+  async function selectVoiceMode(card) {
+    const mode = card.dataset.mode;
+    if (!mode) return;
+
+    // Update UI selection
+    voiceModeCards.forEach(c => {
+      c.classList.remove('selected');
+      c.setAttribute('aria-checked', 'false');
+    });
+    card.classList.add('selected');
+    card.setAttribute('aria-checked', 'true');
+
+    // Save to config
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ voiceMode: mode })
+      });
+      
+      // Show/hide conditional settings
+      updateVoiceModeSettings(mode);
+      
+      showToast(`Voice mode: ${card.querySelector('.voice-mode-title').textContent}`, 'success');
+    } catch {
+      showToast('Failed to save voice mode', 'error');
+    }
+  }
+  
+  voiceModeCards?.forEach(card => {
+    // Click handler
+    card.addEventListener('click', () => selectVoiceMode(card), { signal });
+    
+    // Keyboard handler
+    card.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        selectVoiceMode(card);
+      }
+    }, { signal });
+  });
+
+  realtimeKeySaveBtn?.addEventListener('click', async () => {
+    const key = realtimeKeyInput?.value?.trim();
+    if (!key) {
+      showToast('Enter an API key', 'error');
+      return;
+    }
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ openaiApiKey: key })
+      });
+      realtimeKeyInput.value = '';
+      if (realtimeKeyStatus) realtimeKeyStatus.textContent = '✓ Key saved';
+      showToast('OpenAI API key saved', 'success');
+    } catch {
+      showToast('Failed to save API key', 'error');
+    }
+  }, { signal });
+
+  realtimeVoiceSelect?.addEventListener('change', async () => {
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ realtimeVoice: realtimeVoiceSelect.value })
+      });
+      showToast(`Real-time voice: ${realtimeVoiceSelect.value}`, 'success');
+    } catch {
+      showToast('Failed to save voice setting', 'error');
+    }
+  }, { signal });
+
+  // Live Voice settings
+  const liveVoiceKeySaveBtn = document.getElementById('liveVoiceKeySaveBtn');
+  const liveVoiceKeyInput = document.getElementById('liveVoiceKeyInput');
+  const liveVoiceKeyStatus = document.getElementById('liveVoiceKeyStatus');
+  const liveVoiceSelect = document.getElementById('liveVoiceSelect');
+
+  liveVoiceKeySaveBtn?.addEventListener('click', async () => {
+    const key = liveVoiceKeyInput?.value?.trim();
+    if (!key) {
+      showToast('Enter an API key', 'error');
+      return;
+    }
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ openaiApiKey: key })
+      });
+      liveVoiceKeyInput.value = '';
+      if (liveVoiceKeyStatus) liveVoiceKeyStatus.textContent = '✓ Key saved';
+      showToast('OpenAI API key saved', 'success');
+    } catch {
+      showToast('Failed to save API key', 'error');
+    }
+  }, { signal });
+
+  liveVoiceSelect?.addEventListener('change', async () => {
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ realtimeVoice: liveVoiceSelect.value })
+      });
+      showToast(`Live voice: ${liveVoiceSelect.value}`, 'success');
+    } catch {
+      showToast('Failed to save voice setting', 'error');
+    }
+  }, { signal });
+
+  // Agent Voice settings
+  const agentVoiceTtsEngineSelect = document.getElementById('agentVoiceTtsEngineSelect');
+  const agentVoiceTtsVoiceSelect = document.getElementById('agentVoiceTtsVoiceSelect');
+
+  agentVoiceTtsEngineSelect?.addEventListener('change', async () => {
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agentVoiceTtsEngine: agentVoiceTtsEngineSelect.value })
+      });
+      showToast(`Agent TTS engine: ${agentVoiceTtsEngineSelect.value}`, 'success');
+    } catch {
+      showToast('Failed to save TTS engine', 'error');
+    }
+  }, { signal });
+
+  agentVoiceTtsVoiceSelect?.addEventListener('change', async () => {
+    try {
+      await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agentVoiceTtsVoice: agentVoiceTtsVoiceSelect.value })
+      });
+      showToast(`Agent TTS voice: ${agentVoiceTtsVoiceSelect.value}`, 'success');
+    } catch {
+      showToast('Failed to save TTS voice', 'error');
+    }
+  }, { signal });
+
+  // VAD sensitivity slider
+  const vadSlider = document.getElementById('vadSensitivitySlider');
+  const vadValue = document.getElementById('vadSensitivityValue');
+  let vadSaveTimeout = null;
+  vadSlider?.addEventListener('input', () => {
+    const ms = parseInt(vadSlider.value);
+    if (vadValue) vadValue.textContent = `${(ms / 1000).toFixed(1)}s`;
+    // Debounce save
+    if (vadSaveTimeout) clearTimeout(vadSaveTimeout);
+    vadSaveTimeout = setTimeout(async () => {
+      try {
+        await fetch('/api/config', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ vadSilenceDurationMs: ms })
+        });
+        showToast(`Speech detection: ${(ms / 1000).toFixed(1)}s`, 'success');
+      } catch {
+        showToast('Failed to save speech detection setting', 'error');
+      }
+    }, 500);
+  }, { signal });
+
+  // Fetch server settings on panel open
+  fetchServerSettings();
+
+  // Listen for unlocked event to apply state
+  window.addEventListener('uplink:unlocked', applyState, { signal });
+}
+
+async function toggleEncryption() {
+  const core = window.UplinkCore;
+  const storage = window.UplinkStorage;
+  if (!core || !storage) return;
+
+  if (core.encryptionEnabled) {
+    // Turning off
+    if (confirm('Disable encryption? Your chat history will be stored unencrypted.')) {
+      await storage.migrateHistory(false);
+      core.encryptionEnabled = false;
+      core.state.currentPassword = null;
+      encryptToggle?.classList.remove('on');
+      encryptToggle?.setAttribute('aria-checked', 'false');
+      if (changePasswordRow) changePasswordRow.style.display = 'none';
+      if (syncRow) syncRow.style.display = 'none';
+    }
+  } else {
+    // Turning on
+    const pass = prompt('Enter a password to encrypt your chat history (min 8 characters):');
+    if (pass && pass.length >= 8) {
+      const confirmPass = prompt('Confirm password:');
+      if (pass === confirmPass) {
+        core.state.currentPassword = pass;
+        await storage.migrateHistory(true, pass);
+        core.encryptionEnabled = true;
+        encryptToggle?.classList.add('on');
+        encryptToggle?.setAttribute('aria-checked', 'true');
+        if (changePasswordRow) changePasswordRow.style.display = 'flex';
+        if (syncRow) syncRow.style.display = 'flex';
+      } else {
+        alert('Passwords do not match');
+      }
+    } else if (pass) {
+      alert('Password must be at least 8 characters');
+    }
+  }
+}
+
+async function changePassword() {
+  const core = window.UplinkCore;
+  const crypto = window.UplinkEncryption;
+  const storage = window.UplinkStorage;
+  if (!core || !crypto || !storage) return;
+
+  const oldPass = prompt('Enter current password:');
+  if (!oldPass) return;
+
+  // Verify old password
+  const valid = await crypto.verifyPassword(oldPass);
+  if (!valid) {
+    alert('Incorrect password');
+    return;
+  }
+
+  const newPass = prompt('Enter new password (min 8 characters):');
+  if (!newPass || newPass.length < 8) {
+    if (newPass) alert('Password must be at least 8 characters');
+    return;
+  }
+
+  const confirmPass = prompt('Confirm new password:');
+  if (newPass !== confirmPass) {
+    alert('Passwords do not match');
+    return;
+  }
+
+  // Re-encrypt with new password
+  core.state.currentPassword = oldPass;
+  await storage.migrateHistory(true, newPass);
+  core.state.currentPassword = newPass;
+  alert('Password changed successfully');
+}
+
+function clearChat() {
+  const core = window.UplinkCore;
+  const agentName = core?.agentName || 'your assistant';
+
+  if (!confirm(`Clear chat history?\n\nThis only clears your local browser view - ${agentName} still remembers the conversation.`)) {
+    return;
+  }
+
+  const chat = window.UplinkChat;
+  const storage = window.UplinkStorage;
+
+  chat?.clearMessages();
+  storage?.clearHistory();
+}
+
+// Sync handlers
+async function handleSyncPush() {
+  const storage = window.UplinkStorage;
+  if (!storage) return;
+
+  if (syncStatus) syncStatus.textContent = 'Pushing...';
+  if (syncPushBtn) syncPushBtn.disabled = true;
+
+  try {
+    await storage.pushSync();
+    if (syncStatus) syncStatus.textContent = 'Pushed successfully!';
+    setTimeout(() => {
+      if (syncStatus) syncStatus.textContent = 'Same password syncs to same account';
+    }, 3000);
+  } catch (e) {
+    console.error('Sync push failed:', e);
+    if (syncStatus) syncStatus.textContent = 'Push failed: ' + e.message;
+  } finally {
+    if (syncPushBtn) syncPushBtn.disabled = false;
+  }
+}
+
+async function handleSyncPull() {
+  const storage = window.UplinkStorage;
+  if (!storage) return;
+
+  if (syncStatus) syncStatus.textContent = 'Pulling...';
+  if (syncPullBtn) syncPullBtn.disabled = true;
+
+  try {
+    const syncData = await storage.pullSync();
+
+    if (!syncData) {
+      if (syncStatus) syncStatus.textContent = 'No sync data found for this password';
+      setTimeout(() => {
+        if (syncStatus) syncStatus.textContent = 'Same password syncs to same account';
+      }, 3000);
+      return;
+    }
+
+    // Ask user how to apply
+    const mode = confirm('Replace local data with synced data?\n\nOK = Replace (recommended for new device)\nCancel = Merge (combine with local)')
+      ? 'replace'
+      : 'merge';
+
+    await storage.applySync(syncData, mode);
+
+    if (syncStatus) syncStatus.textContent = 'Synced successfully! Refreshing...';
+
+    // Reload page to apply changes
+    setTimeout(() => location.reload(), 1000);
+  } catch (e) {
+    console.error('Sync pull failed:', e);
+    if (syncStatus) syncStatus.textContent = 'Pull failed: ' + e.message;
+  } finally {
+    if (syncPullBtn) syncPullBtn.disabled = false;
+  }
+}
+
+async function handleLogout() {
+  if (!confirm('Are you sure? This will clear all local Uplink data including chat history.')) return;
+  
+  try {
+    // Only remove Uplink-specific localStorage keys (not other apps on same origin)
+    const uplinkKeys = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key && (
+        key.startsWith('uplink') ||
+        key.startsWith('chat') ||
+        key.startsWith('settings') ||
+        key.startsWith('gateway') ||
+        key.startsWith('sync') ||
+        key.startsWith('push') ||
+        key.startsWith('voice') ||
+        key.startsWith('theme') ||
+        key.startsWith('tts') ||
+        key.startsWith('messages') ||
+        key.startsWith('satellite')
+      )) {
+        uplinkKeys.push(key);
+      }
+    }
+    uplinkKeys.forEach(key => localStorage.removeItem(key));
+    
+    sessionStorage.clear();
+    const dbs = await window.indexedDB.databases?.();
+    if (dbs) for (const db of dbs) if (db.name) window.indexedDB.deleteDatabase(db.name);
+    location.reload();
+  } catch (e) {
+    console.error('Logout failed:', e);
+    alert('Logout failed: ' + e.message);
+  }
+}
+
+// Cleanup function
+function destroy() {
+  if (panelObserver) {
+    panelObserver.disconnect();
+    panelObserver = null;
+  }
+  if (eventsAbortController) {
+    eventsAbortController.abort();
+    eventsAbortController = null;
+  }
+}
+
+// Expose API
+export const UplinkSettings = {
+  show: () => settingsPanel?.classList.add('visible'),
+  hide: () => settingsPanel?.classList.remove('visible'),
+  toggle: () => settingsPanel?.classList.toggle('visible'),
+  applyState,
+  logout: handleLogout,
+  showToast,
+  destroy
+};
+
+import { UplinkCore } from './core.js';
+
+// Backward compat: assign to window
+window.UplinkSettings = UplinkSettings;
+
+// Register and init
+UplinkCore.registerModule('settings', init);