Merge remote changes - resolve conflicts: keep remote package.json v1.4.0, keep local self-updater.js logic, features.js regenerated by build

status/js/app-selector.js

@@ -1,5 +1,6 @@
 // App Selector System
 (function () {
+  const errorHandler = new ErrorHandler();
   injectModal('app-selector-modal', `<div id="app-selector-modal" class="weather-modal">
     <div class="app-selector-content">
       <h2 style="margin: 0 0 24px; color: var(--fg); text-align: center;">Choose an App</h2>
@@ -230,7 +231,7 @@
         return true;
       }
     } catch (e) {
-      console.error('Failed to fetch app templates:', e);
+      errorHandler.logError('[AppSelector] Fetch Templates', e, { function: 'fetchApiTemplates' });
     }
     return false;
   }
@@ -242,7 +243,7 @@
       const data = await response.json();
       return data;
     } catch (e) {
-      console.error('Failed to check port:', e);
+      errorHandler.logError('[AppSelector] Check Port', e, { function: 'checkPortAvailability' });
       return { available: true }; // Assume available on error
     }
   }
@@ -256,7 +257,7 @@
         return data.suggestedPort;
       }
     } catch (e) {
-      console.error('Failed to get suggested port:', e);
+      errorHandler.logError('[AppSelector] Get Suggested Port', e, { function: 'getSuggestedPort' });
     }
     return basePort;
   }
@@ -842,7 +843,7 @@
         throw new Error(result.error || 'Deployment failed');
       }
     } catch (error) {
-      console.error('Deployment error:', error);
+      errorHandler.logError('[AppSelector] Deployment', error, { function: 'deploy' });
       showNotification(
         `Failed to deploy ${appTemplate.name}: ${error.message}`,
         'error',

status/js/backup-restore.js

@@ -384,6 +384,9 @@
   });
 
   // === Automated Backups Tab ===
+  // Holds the destination currently being edited in the form
+  var currentDestination = { type: 'local' };
+
   async function loadBackupSchedule() {
     if (!scheduleContainer) return;
     try {
@@ -394,6 +397,10 @@
       var autoKey = Object.keys(cfg)[0];
       var auto = autoKey ? cfg[autoKey] : null;
 
+      // Pull existing destination (first one) — fall back to local
+      var existingDest = (auto?.destinations && auto.destinations[0]) || { type: 'local' };
+      currentDestination = JSON.parse(JSON.stringify(existingDest));
+
       var html = '<div style="padding: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 16px;">';
       html += '<h4 style="margin: 0 0 12px; color: var(--accent); font-size: 0.9rem;">⏰ Backup Schedule</h4>';
       html += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">';
@@ -423,20 +430,238 @@
       html += '  <button id="backup-run-now" style="padding: 8px 16px; border-radius: 6px; cursor: pointer;">▶️ Run Backup Now</button>';
       html += '</div>';
       html += '</div>';
+
+      // === Destination Section ===
+      html += '<div style="padding: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: 16px;">';
+      html += '<h4 style="margin: 0 0 12px; color: var(--accent); font-size: 0.9rem;">☁️ Backup Destination</h4>';
+      html += '<div><label style="font-size: 0.8rem; color: var(--muted);">Where to store backups:</label>';
+      html += '  <select id="backup-dest-type" style="width: 100%;">';
+      html += '    <option value="local"' + (currentDestination.type === 'local' ? ' selected' : '') + '>💾 Local disk</option>';
+      html += '    <option value="dropbox"' + (currentDestination.type === 'dropbox' ? ' selected' : '') + '>📦 Dropbox</option>';
+      html += '    <option value="webdav"' + (currentDestination.type === 'webdav' ? ' selected' : '') + '>🌐 WebDAV (Nextcloud / ownCloud)</option>';
+      html += '    <option value="sftp"' + (currentDestination.type === 'sftp' ? ' selected' : '') + '>🔐 SFTP</option>';
+      html += '  </select></div>';
+      html += '<div id="backup-dest-form" style="margin-top: 12px;"></div>';
+      html += '<div id="backup-dest-result" style="display: none; margin-top: 10px; padding: 8px 10px; border-radius: 6px; font-size: 0.8rem;"></div>';
+      html += '</div>';
+
       html += '<div id="backup-schedule-result" style="display: none; margin-top: 12px; padding: 10px; border-radius: 8px; font-size: 0.85rem;"></div>';
       scheduleContainer.innerHTML = html;
 
       document.getElementById('backup-save-schedule')?.addEventListener('click', saveSchedule);
       document.getElementById('backup-run-now')?.addEventListener('click', runBackupNow);
+
+      var destTypeSel = document.getElementById('backup-dest-type');
+      destTypeSel?.addEventListener('change', function() {
+        currentDestination = { type: destTypeSel.value };
+        renderDestinationForm(destTypeSel.value);
+      });
+      renderDestinationForm(currentDestination.type);
     } catch (e) {
       scheduleContainer.innerHTML = '<div class="panel-empty" style="color: var(--bad-fg);">Failed to load schedule: ' + escapeHtml(e.message) + '</div>';
     }
   }
 
+  // Render the provider-specific form fields and load saved credentials (masked)
+  async function renderDestinationForm(type) {
+    var formEl = document.getElementById('backup-dest-form');
+    if (!formEl) return;
+
+    if (type === 'local') {
+      formEl.innerHTML = '<div style="font-size: 0.8rem; color: var(--muted); padding: 8px;">Backups are stored on the host filesystem. No additional configuration required.</div>';
+      return;
+    }
+
+    var html = '';
+
+    if (type === 'dropbox') {
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Access Token:</label>';
+      html += '<input type="password" id="dest-dropbox-token" placeholder="sl.B..." style="width: 100%; margin-bottom: 8px;" />';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Folder path:</label>';
+      html += '<input type="text" id="dest-dropbox-path" placeholder="/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
+      html += '<div style="font-size: 0.7rem; color: var(--muted); margin-bottom: 8px;">Generate a token at <a href="https://www.dropbox.com/developers/apps" target="_blank" style="color: var(--accent);">Dropbox App Console</a> with files.content.write + files.content.read scopes.</div>';
+    } else if (type === 'webdav') {
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Server URL:</label>';
+      html += '<input type="text" id="dest-webdav-url" placeholder="https://cloud.example.com/remote.php/dav/files/username" style="width: 100%; margin-bottom: 8px;" />';
+      html += '<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;">';
+      html += '  <div><label style="font-size: 0.8rem; color: var(--muted);">Username:</label>';
+      html += '    <input type="text" id="dest-webdav-username" style="width: 100%;" /></div>';
+      html += '  <div><label style="font-size: 0.8rem; color: var(--muted);">Password / App password:</label>';
+      html += '    <input type="password" id="dest-webdav-password" style="width: 100%;" /></div>';
+      html += '</div>';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Folder path:</label>';
+      html += '<input type="text" id="dest-webdav-path" placeholder="/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
+    } else if (type === 'sftp') {
+      html += '<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-bottom: 8px;">';
+      html += '  <div><label style="font-size: 0.8rem; color: var(--muted);">Host:</label>';
+      html += '    <input type="text" id="dest-sftp-host" placeholder="backup.example.com" style="width: 100%;" /></div>';
+      html += '  <div><label style="font-size: 0.8rem; color: var(--muted);">Port:</label>';
+      html += '    <input type="number" id="dest-sftp-port" value="22" style="width: 100%;" /></div>';
+      html += '</div>';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Username:</label>';
+      html += '<input type="text" id="dest-sftp-username" style="width: 100%; margin-bottom: 8px;" />';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Auth method:</label>';
+      html += '<select id="dest-sftp-authtype" style="width: 100%; margin-bottom: 8px;">';
+      html += '  <option value="password">Password</option>';
+      html += '  <option value="key">Private key</option>';
+      html += '</select>';
+      html += '<div id="dest-sftp-password-row"><label style="font-size: 0.8rem; color: var(--muted);">Password:</label>';
+      html += '  <input type="password" id="dest-sftp-password" style="width: 100%; margin-bottom: 8px;" /></div>';
+      html += '<div id="dest-sftp-key-row" style="display: none;"><label style="font-size: 0.8rem; color: var(--muted);">Private key (PEM):</label>';
+      html += '  <textarea id="dest-sftp-privatekey" rows="4" style="width: 100%; font-family: monospace; font-size: 0.75rem; margin-bottom: 8px;" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"></textarea></div>';
+      html += '<label style="font-size: 0.8rem; color: var(--muted);">Remote path:</label>';
+      html += '<input type="text" id="dest-sftp-path" placeholder="/home/user/dashcaddy-backups" value="' + escapeHtml(currentDestination.path || '/home/user/dashcaddy-backups') + '" style="width: 100%; margin-bottom: 8px;" />';
+    }
+
+    html += '<div style="display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;">';
+    html += '  <button id="dest-save-creds" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer;">💾 Save Credentials</button>';
+    html += '  <button id="dest-test-conn" style="padding: 6px 12px; font-size: 0.8rem; background: color-mix(in srgb, var(--accent) 20%, transparent); border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; cursor: pointer;">🔌 Test Connection</button>';
+    html += '  <button id="dest-clear-creds" style="padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; cursor: pointer; color: var(--bad-fg);">🗑️ Clear</button>';
+    html += '</div>';
+
+    formEl.innerHTML = html;
+
+    // SFTP auth type toggle
+    if (type === 'sftp') {
+      var authSel = document.getElementById('dest-sftp-authtype');
+      var pwRow = document.getElementById('dest-sftp-password-row');
+      var keyRow = document.getElementById('dest-sftp-key-row');
+      authSel?.addEventListener('change', function() {
+        if (authSel.value === 'key') { pwRow.style.display = 'none'; keyRow.style.display = ''; }
+        else { pwRow.style.display = ''; keyRow.style.display = 'none'; }
+      });
+    }
+
+    document.getElementById('dest-save-creds')?.addEventListener('click', function() { saveCredentials(type); });
+    document.getElementById('dest-test-conn')?.addEventListener('click', function() { testDestination(type); });
+    document.getElementById('dest-clear-creds')?.addEventListener('click', function() { clearCredentials(type); });
+
+    // Pull existing (masked) credentials
+    await loadCredentials(type);
+  }
+
+  function destResult(msg, ok) {
+    var el = document.getElementById('backup-dest-result');
+    if (!el) return;
+    el.innerHTML = msg;
+    el.style.display = 'block';
+    el.style.background = ok ? 'color-mix(in srgb, var(--ok-fg) 15%, transparent)' : 'color-mix(in srgb, var(--bad-fg) 15%, transparent)';
+    el.style.border = ok ? '1px solid var(--ok-fg)' : '1px solid var(--bad-fg)';
+  }
+
+  async function loadCredentials(provider) {
+    try {
+      var res = await fetch('/api/v1/backups/credentials/' + provider);
+      var data = await res.json();
+      if (!data.success || !data.credentials) return;
+      var c = data.credentials;
+      if (provider === 'dropbox') {
+        var t = document.getElementById('dest-dropbox-token'); if (t && c.token) t.value = c.token;
+      } else if (provider === 'webdav') {
+        var u = document.getElementById('dest-webdav-url'); if (u && c.url) u.value = c.url;
+        var n = document.getElementById('dest-webdav-username'); if (n && c.username) n.value = c.username;
+        var p = document.getElementById('dest-webdav-password'); if (p && c.password) p.value = c.password;
+      } else if (provider === 'sftp') {
+        var h = document.getElementById('dest-sftp-host'); if (h && c.host) h.value = c.host;
+        var po = document.getElementById('dest-sftp-port'); if (po && c.port) po.value = c.port;
+        var un = document.getElementById('dest-sftp-username'); if (un && c.username) un.value = c.username;
+        var pw = document.getElementById('dest-sftp-password'); if (pw && c.password) pw.value = c.password;
+        var pk = document.getElementById('dest-sftp-privatekey'); if (pk && c.privateKey) pk.value = c.privateKey;
+        if (c.privateKey) {
+          var sel = document.getElementById('dest-sftp-authtype');
+          if (sel) { sel.value = 'key'; sel.dispatchEvent(new Event('change')); }
+        }
+      }
+    } catch (e) { /* no creds yet — silent */ }
+  }
+
+  function collectCredentials(provider) {
+    if (provider === 'dropbox') {
+      return { token: document.getElementById('dest-dropbox-token')?.value };
+    }
+    if (provider === 'webdav') {
+      return {
+        url: document.getElementById('dest-webdav-url')?.value,
+        username: document.getElementById('dest-webdav-username')?.value,
+        password: document.getElementById('dest-webdav-password')?.value
+      };
+    }
+    if (provider === 'sftp') {
+      var auth = document.getElementById('dest-sftp-authtype')?.value;
+      var creds = {
+        host: document.getElementById('dest-sftp-host')?.value,
+        port: parseInt(document.getElementById('dest-sftp-port')?.value) || 22,
+        username: document.getElementById('dest-sftp-username')?.value
+      };
+      if (auth === 'key') creds.privateKey = document.getElementById('dest-sftp-privatekey')?.value;
+      else creds.password = document.getElementById('dest-sftp-password')?.value;
+      return creds;
+    }
+    return {};
+  }
+
+  async function saveCredentials(provider) {
+    try {
+      var creds = collectCredentials(provider);
+      var res = await secureFetch('/api/v1/backups/credentials/' + provider, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(creds)
+      });
+      var data = await res.json();
+      destResult(data.success ? '✅ Credentials saved' : '⚠️ ' + escapeHtml(data.error || 'Failed'), data.success);
+    } catch (e) {
+      destResult('❌ ' + escapeHtml(e.message), false);
+    }
+  }
+
+  async function clearCredentials(provider) {
+    if (!confirm('Delete saved ' + provider + ' credentials?')) return;
+    try {
+      var res = await secureFetch('/api/v1/backups/credentials/' + provider, { method: 'DELETE' });
+      var data = await res.json();
+      if (data.success) {
+        destResult('✅ Credentials cleared', true);
+        renderDestinationForm(provider);
+      } else {
+        destResult('⚠️ ' + escapeHtml(data.error || 'Failed'), false);
+      }
+    } catch (e) { destResult('❌ ' + escapeHtml(e.message), false); }
+  }
+
+  function buildDestination(type) {
+    var dest = { type: type };
+    if (type === 'local') return dest;
+    if (type === 'dropbox') dest.path = document.getElementById('dest-dropbox-path')?.value || '/dashcaddy-backups';
+    else if (type === 'webdav') dest.path = document.getElementById('dest-webdav-path')?.value || '/dashcaddy-backups';
+    else if (type === 'sftp') dest.path = document.getElementById('dest-sftp-path')?.value || '/dashcaddy-backups';
+    return dest;
+  }
+
+  async function testDestination(type) {
+    destResult('<span class="brand-spinner"></span> Testing connection...', true);
+    try {
+      var dest = buildDestination(type);
+      var res = await secureFetch('/api/v1/backups/test-destination', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(dest)
+      });
+      var data = await res.json();
+      if (data.success) {
+        var ms = data.elapsedMs ? ' (' + data.elapsedMs + 'ms)' : '';
+        destResult('✅ Connection OK' + ms + ' — write/read/delete probe succeeded', true);
+      } else {
+        destResult('❌ ' + escapeHtml(data.error || 'Connection failed'), false);
+      }
+    } catch (e) { destResult('❌ ' + escapeHtml(e.message), false); }
+  }
+
   async function saveSchedule() {
     var schedule = document.getElementById('backup-schedule-select')?.value;
     var retention = parseInt(document.getElementById('backup-retention-select')?.value) || 5;
     var encrypt = document.getElementById('backup-encrypt-toggle')?.checked ?? true;
+    var destType = document.getElementById('backup-dest-type')?.value || 'local';
     var resultEl = document.getElementById('backup-schedule-result');
     try {
       var res = await secureFetch('/api/v1/backups/config', {
@@ -451,7 +676,7 @@
               encrypt: encrypt,
               verify: true,
               retention: { keep: retention },
-              destinations: [{ type: 'local' }]
+              destinations: [buildDestination(destType)]
             }
           }
         })
@@ -477,12 +702,13 @@
   async function runBackupNow() {
     var btn = document.getElementById('backup-run-now');
     var resultEl = document.getElementById('backup-schedule-result');
+    var destType = document.getElementById('backup-dest-type')?.value || 'local';
     if (btn) { btn.disabled = true; btn.innerHTML = '<span class="brand-spinner"></span> Running...'; }
     try {
       var res = await secureFetch('/api/v1/backups/execute', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ include: ['all'], destinations: [{ type: 'local' }] })
+        body: JSON.stringify({ include: ['all'], destinations: [buildDestination(destType)] })
       });
       var data = await res.json();
       if (resultEl) {

status/js/dns-template-selector.js

@@ -6,12 +6,16 @@
 (function(window) {
   'use strict';
 
+  const debug = (...args) => {
+    if (window.DASHCADDY_DEBUG) console.log(...args);
+  };
+
   class DnsTemplateSelector {
     constructor(progressTracker) {
       this.progressTracker = progressTracker;
       this.modal = null;
       this.onTemplateSelected = null;
-      console.log('[DnsTemplateSelector] Module loaded');
+      debug('[DnsTemplateSelector] Module loaded');
     }
 
     /**
@@ -216,7 +220,7 @@
      * @private
      */
     handleTemplateSelection(template) {
-      console.log(`[DnsTemplateSelector] Template selected: ${template.id}`);
+      debug(`[DnsTemplateSelector] Template selected: ${template.id}`);
       
       // Close modal
       this.close();
@@ -235,7 +239,7 @@
      * @private
      */
     handleSetupLater() {
-      console.log('[DnsTemplateSelector] DNS setup deferred');
+      debug('[DnsTemplateSelector] DNS setup deferred');
       
       // Mark as deferred in progress tracker
       if (this.progressTracker) {
@@ -316,6 +320,6 @@
   }
 
   window.DnsTemplateSelector = DnsTemplateSelector;
-  console.log('[DnsTemplateSelector] Module loaded');
+  debug('[DnsTemplateSelector] Module loaded');
 
 })(window);

status/js/globals.js

@@ -24,6 +24,9 @@ const DC = {
   },
 };
 
+// Error handler for tracking issues
+const errorHandler = new ErrorHandler();
+
 // ===== GLOBAL SITE CONFIG (loaded from server, cached in localStorage) =====
 // Only non-sensitive display preferences are cached; DNS IPs/topology are fetched from API
 const _cachedCfg = JSON.parse(localStorage.getItem('dashcaddy_site_config') || 'null');
@@ -160,7 +163,7 @@ async function getCSRFToken() {
     csrfToken = data.token;
     return csrfToken;
   } catch (error) {
-    console.error('Failed to get CSRF token:', error);
+    errorHandler.logError('[CSRF] Get Token', error, { function: 'getCSRFToken' });
     throw error;
   }
 }
@@ -185,7 +188,7 @@ async function secureFetch(url, options = {}) {
         'X-CSRF-Token': token
       };
     } catch (error) {
-      console.error('Failed to add CSRF token to request:', error);
+      errorHandler.logError('[CSRF] Add to Request', error, { function: 'secureFetch' });
     }
   }
 

status/js/keyboard-shortcuts.js

@@ -6,6 +6,10 @@
 (function() {
   'use strict';
 
+  const debug = (...args) => {
+    if (window.DASHCADDY_DEBUG) { console.log(...args); }
+  };
+
   // All modal selectors that can be closed with Escape
   const MODAL_SELECTORS = [
     '#app-selector-modal',
@@ -39,9 +43,9 @@
       // Add global keyboard listener
       document.addEventListener('keydown', handleKeyDown);
 
-      console.log('[Keyboard Shortcuts] Initialized');
-      console.log('[Keyboard Shortcuts] Press Ctrl+K to open quick search');
-      console.log('[Keyboard Shortcuts] Press Escape to close modals');
+      debug('[Keyboard Shortcuts] Initialized');
+      debug('[Keyboard Shortcuts] Press Ctrl+K to open quick search');
+      debug('[Keyboard Shortcuts] Press Escape to close modals');
     } catch (e) {
       console.warn('[Keyboard Shortcuts] Failed to initialize:', e.message);
     }
@@ -599,7 +603,7 @@
           }
           break;
         default:
-          console.log('[Keyboard Shortcuts] Unknown action:', action);
+          debug('[Keyboard Shortcuts] Unknown action:', action);
       }
     } catch (e) {
       console.warn('[Keyboard Shortcuts] Error executing action:', e.message);

status/js/live-events.js

@@ -11,7 +11,7 @@
 
     es.addEventListener('connected', () => {
       reconnectDelay = 1000; // reset backoff
-      console.log('[SSE] Connected to event stream');
+      debug('[SSE] Connected to event stream');
     });
 
     // Health status changes → update card dots/badges in real time

status/js/notification-settings.js

@@ -1,5 +1,6 @@
 // ========== NOTIFICATION SETTINGS ==========
 (function() {
+  const errorHandler = new ErrorHandler();
   // Inject modal HTML
   injectModal('notifications-modal', `<div id="notifications-modal" class="weather-modal">
     <div class="weather-modal-content" style="min-width: 550px; max-width: 650px;">
@@ -255,7 +256,7 @@
         document.getElementById('event-deploy-failed').checked = config.events?.deploymentFailed !== false;
       }
     } catch (error) {
-      console.error('Failed to load notification config:', error);
+      errorHandler.logError('[Notifications] Load Config', error, { function: 'loadConfig' });
     }
   }
 
@@ -289,7 +290,7 @@
         container.innerHTML = '<div style="color: var(--muted); text-align: center; padding: 20px;">No notifications yet</div>';
       }
     } catch (error) {
-      console.error('Failed to load notification history:', error);
+      errorHandler.logError('[Notifications] Load History', error, { function: 'loadHistory' });
     }
   }
 

status/js/onboarding.js

@@ -9,6 +9,12 @@
 (function() {
   'use strict';
 
+  const debug = (...args) => {
+    if (window.DASHCADDY_DEBUG) {
+      console.log(...args);
+    }
+  };
+
   let progressTracker;
   let themeAdapter;
   let tourManager;
@@ -20,7 +26,7 @@
    */
   async function initializeOnboarding() {
     try {
-      console.log('[Onboarding] Initializing system...');
+      debug('[Onboarding] Initializing system...');
 
       if (window.__dashcaddySiteConfigLoaded) {
         try {
@@ -30,27 +36,27 @@
 
       // Initialize Error Handler first
       errorHandler = new ErrorHandler();
-      console.log('[Onboarding] Error Handler initialized');
+      debug('[Onboarding] Error Handler initialized');
 
       // Initialize Progress Tracker
       progressTracker = new ProgressTracker('dashcaddy_onboarding');
-      console.log('[Onboarding] Progress Tracker initialized');
+      debug('[Onboarding] Progress Tracker initialized');
 
       // Initialize Theme Adapter
       themeAdapter = new ThemeAdapter();
-      console.log('[Onboarding] Theme Adapter initialized');
+      debug('[Onboarding] Theme Adapter initialized');
 
       // Initialize DNS Template Selector
       dnsTemplateSelector = new DnsTemplateSelector(progressTracker);
-      console.log('[Onboarding] DNS Template Selector initialized');
+      debug('[Onboarding] DNS Template Selector initialized');
 
       // Initialize Tour Manager
       tourManager = new TourManager(progressTracker, themeAdapter, dnsTemplateSelector);
-      console.log('[Onboarding] Tour Manager initialized');
+      debug('[Onboarding] Tour Manager initialized');
 
       // Check if tour should auto-start
       if (tourManager.shouldAutoStart()) {
-        console.log('[Onboarding] Auto-starting tour for first-time install');
+        debug('[Onboarding] Auto-starting tour for first-time install');
         await progressTracker.markInstallOnboardingCompleted();
         // Wait a bit for page to fully load
         setTimeout(() => {
@@ -59,11 +65,11 @@
       } else {
         const tourCompleted = progressTracker.isTourCompleted();
         const currentStep = progressTracker.getCurrentStep();
-        console.log(`[Onboarding] Tour not auto-starting (completed: ${tourCompleted}, step: ${currentStep})`);
+        debug(`[Onboarding] Tour not auto-starting (completed: ${tourCompleted}, step: ${currentStep})`);
         
         // If tour is in progress, offer to resume
         if (!tourCompleted && currentStep > 0) {
-          console.log('[Onboarding] Tour in progress, can be resumed manually');
+          debug('[Onboarding] Tour in progress, can be resumed manually');
         }
       }
 
@@ -81,13 +87,10 @@
         getErrorStats: () => errorHandler.getStatistics()
       };
 
-      console.log('[Onboarding] System initialized successfully');
+      debug('[Onboarding] System initialized successfully');
     } catch (error) {
-      console.error('[Onboarding] Initialization error:', error);
-      
-      // Use error handler if available
       if (errorHandler) {
-        errorHandler.logError('Initialization', error);
+        errorHandler.logError('[Onboarding] Initialization', error);
       }
       
       // Graceful degradation - don't break the dashboard
@@ -104,10 +107,12 @@
 
     const clickHandler = () => {
       if (tourManager) {
-        console.log('[Onboarding] Starting tour via button click');
+        debug('[Onboarding] Starting tour via button click');
         tourManager.restartTour();
       } else {
-        console.error('[Onboarding] Tour manager not initialized');
+        if (errorHandler) {
+          errorHandler.logError('[Onboarding] Tour Manager Not Initialized', new Error('Tour manager not initialized'));
+        }
         alert('Tour is not available. Check browser console for errors.\n\nPossible issues:\n- Driver.js library failed to load\n- JavaScript errors during initialization');
       }
     };
@@ -157,7 +162,6 @@
           setTimeout(attemptInit, 500);
         } else {
           // Max retries reached, show fallback
-          console.error('[Onboarding] Driver.js failed to load after multiple attempts');
           if (errorHandler) {
             errorHandler.handleDriverLoadFailure();
           } else {
@@ -179,6 +183,6 @@
     waitForDriver();
   }
 
-  console.log('[Onboarding] System loaded');
+  debug('[Onboarding] System loaded');
 
 })();

status/js/progress-tracker.js

@@ -18,6 +18,12 @@
 (function(window) {
   'use strict';
 
+  const errorHandler = new ErrorHandler();
+
+  const debug = (...args) => {
+    if (window.DASHCADDY_DEBUG) { console.log(...args); }
+  };
+
   /**
    * ProgressTracker class
    * Manages persistent storage of onboarding progress
@@ -68,7 +74,7 @@
         const data = localStorage.getItem(this.storageKey);
         return data ? JSON.parse(data) : null;
       } catch (error) {
-        console.error('[ProgressTracker] Error reading from storage:', error);
+        errorHandler.logError('[ProgressTracker] Read Storage', error, { function: '_getStorage' });
         return null;
       }
     }
@@ -82,7 +88,7 @@
       try {
         localStorage.setItem(this.storageKey, JSON.stringify(state));
       } catch (error) {
-        console.error('[ProgressTracker] Error writing to storage:', error);
+        errorHandler.logError('[ProgressTracker] Write Storage', error, { function: '_setStorage' });
         // Handle quota exceeded or storage unavailable
         // Fall back to session storage or in-memory storage
         this._handleStorageError(error);
@@ -100,7 +106,7 @@
         sessionStorage.setItem(this.storageKey, JSON.stringify(this._getStorage()));
         console.warn('[ProgressTracker] Falling back to session storage');
       } catch (sessionError) {
-        console.error('[ProgressTracker] Session storage also unavailable:', sessionError);
+        errorHandler.logError('[ProgressTracker] Session Storage Unavailable', sessionError, { function: '_handleStorageError' });
         // Could implement in-memory fallback here if needed
       }
     }
@@ -186,7 +192,7 @@
           body: JSON.stringify({ onboardingCompleted: true })
         });
       } catch (error) {
-        console.error('[ProgressTracker] Failed to persist install onboarding state:', error);
+        errorHandler.logError('[ProgressTracker] Persist Install Onboarding', error, { function: 'markInstallOnboardingCompleted' });
       }
     }
 
@@ -308,6 +314,6 @@
   // Export to global scope
   window.ProgressTracker = ProgressTracker;
 
-  console.log('[ProgressTracker] Module loaded');
+  debug('[ProgressTracker] Module loaded');
 
 })(window);

status/js/resource-monitor.js

@@ -12,6 +12,7 @@
       <div class="panel-tabs">
         <button class="panel-tab active" data-panel="stats-live">Live Stats</button>
         <button class="panel-tab" data-panel="stats-aggregated">24h Summary</button>
+        <button class="panel-tab" data-panel="stats-history">History</button>
         <button class="panel-tab" data-panel="stats-alerts">Alerts</button>
       </div>
 
@@ -34,6 +35,27 @@
         </div>
       </div>
 
+      <!-- Tab: Long-term History -->
+      <div id="stats-history" class="panel-section">
+        <div style="display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;">
+          <label style="font-size: 0.85rem; color: var(--muted);">Container:</label>
+          <select id="stats-history-container" style="padding: 4px 8px; background: var(--card-base); border: 1px solid var(--border); color: var(--fg); border-radius: 4px; font-size: 0.85rem; flex: 1; min-width: 180px;"></select>
+          <div id="stats-history-range-buttons" style="display: flex; gap: 4px;">
+            <button class="stats-range-btn active" data-range="1h">1h</button>
+            <button class="stats-range-btn" data-range="24h">24h</button>
+            <button class="stats-range-btn" data-range="7d">7d</button>
+            <button class="stats-range-btn" data-range="30d">30d</button>
+            <button class="stats-range-btn" data-range="1y">1y</button>
+          </div>
+        </div>
+        <div id="stats-history-container-area" class="scroll-container">
+          <div class="panel-empty">
+            <span class="empty-icon">📊</span>
+            Choose a container and time range to view history.
+          </div>
+        </div>
+      </div>
+
       <!-- Tab: Alert Configuration -->
       <div id="stats-alerts" class="panel-section">
         <div id="stats-alerts-container" class="scroll-container">
@@ -325,4 +347,141 @@
   // Lazy-load tabs
   document.querySelector('[data-panel="stats-aggregated"]')?.addEventListener('click', loadAggregated);
   document.querySelector('[data-panel="stats-alerts"]')?.addEventListener('click', loadAlerts);
+
+  // === History Tab ===
+  const historyContainerSelect = document.getElementById('stats-history-container');
+  const historyArea = document.getElementById('stats-history-container-area');
+  const rangeButtons = document.querySelectorAll('.stats-range-btn');
+
+  let currentRange = '1h';
+
+  function rangeToMs(range) {
+    switch (range) {
+      case '1h':  return 60 * 60 * 1000;
+      case '24h': return 24 * 60 * 60 * 1000;
+      case '7d':  return 7 * 24 * 60 * 60 * 1000;
+      case '30d': return 30 * 24 * 60 * 60 * 1000;
+      case '1y':  return 365 * 24 * 60 * 60 * 1000;
+      default:    return 60 * 60 * 1000;
+    }
+  }
+
+  function tierLabel(tier) {
+    if (tier === 'raw') return 'live (10s samples)';
+    if (tier === 'hourly') return 'hourly average';
+    if (tier === 'daily') return 'daily average';
+    return tier;
+  }
+
+  // Simple SVG sparkline — no external lib
+  function renderSparkline(samples, accessor, color, label, unit) {
+    if (!samples || samples.length === 0) {
+      return `<div style="text-align: center; color: var(--muted); padding: 20px;">No data for ${escapeHtml(label)}</div>`;
+    }
+    const values = samples.map(accessor).filter(v => v != null);
+    if (values.length === 0) {
+      return `<div style="text-align: center; color: var(--muted); padding: 20px;">No data for ${escapeHtml(label)}</div>`;
+    }
+    const max = Math.max(...values, 1);
+    const min = Math.min(...values, 0);
+    const range = max - min || 1;
+    const w = 600, h = 80, pad = 4;
+    const stepX = (w - pad * 2) / Math.max(values.length - 1, 1);
+    const points = values.map((v, i) => {
+      const x = pad + i * stepX;
+      const y = h - pad - ((v - min) / range) * (h - pad * 2);
+      return `${x.toFixed(1)},${y.toFixed(1)}`;
+    }).join(' ');
+    const last = values[values.length - 1];
+    const avg = values.reduce((a, b) => a + b, 0) / values.length;
+    return `
+      <div style="margin-bottom: 14px;">
+        <div style="display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;">
+          <span style="font-weight: 600; font-size: 0.9rem;">${escapeHtml(label)}</span>
+          <span style="font-size: 0.75rem; color: var(--muted);">last ${last.toFixed(1)}${unit} · avg ${avg.toFixed(1)}${unit} · max ${max.toFixed(1)}${unit}</span>
+        </div>
+        <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" style="width: 100%; height: ${h}px; background: var(--base); border-radius: 4px;">
+          <polyline fill="none" stroke="${color}" stroke-width="1.5" points="${points}" />
+        </svg>
+      </div>
+    `;
+  }
+
+  function populateHistoryContainerSelect() {
+    if (!historyContainerSelect) return;
+    const data = cachedMonitoringData || {};
+    const previous = historyContainerSelect.value;
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+      historyContainerSelect.innerHTML = '<option value="">No containers</option>';
+      return;
+    }
+    historyContainerSelect.innerHTML = entries
+      .map(([id, info]) => `<option value="${escapeHtml(id)}">${escapeHtml(info.name || id)}</option>`)
+      .join('');
+    if (previous && data[previous]) historyContainerSelect.value = previous;
+  }
+
+  async function loadHistory() {
+    if (!historyArea || !historyContainerSelect) return;
+    const containerId = historyContainerSelect.value;
+    if (!containerId) {
+      historyArea.innerHTML = '<div class="panel-empty"><span class="empty-icon">📊</span>No container selected.</div>';
+      return;
+    }
+    const endTime = Date.now();
+    const startTime = endTime - rangeToMs(currentRange);
+    historyArea.innerHTML = '<div class="panel-empty"><span class="brand-spinner"></span> Loading history...</div>';
+
+    try {
+      const res = await fetch(`/api/v1/monitoring/history/${encodeURIComponent(containerId)}?startTime=${startTime}&endTime=${endTime}`);
+      const data = await res.json();
+      if (!data.success) throw new Error(data.error || 'Failed to load history');
+
+      const samples = data.samples || [];
+      const tier = data.tier || 'raw';
+
+      if (samples.length === 0) {
+        historyArea.innerHTML = `<div class="panel-empty"><span class="empty-icon">📊</span>No data for the last ${currentRange}. Tier: ${tierLabel(tier)}.</div>`;
+        return;
+      }
+
+      // Different shape between raw vs rolled-up samples
+      const isRaw = tier === 'raw';
+      const cpuAccessor = isRaw ? (s) => s.cpu?.percent : (s) => s.cpu?.avg;
+      const memAccessor = isRaw ? (s) => s.memory?.percent : (s) => s.memory?.avgPercent;
+      const netRxAccessor = isRaw ? (s) => (s.network?.rxMB || 0) : (s) => (s.network?.rxMB || 0);
+      const netTxAccessor = isRaw ? (s) => (s.network?.txMB || 0) : (s) => (s.network?.txMB || 0);
+
+      let html = `
+        <div style="font-size: 0.75rem; color: var(--muted); margin-bottom: 8px;">
+          ${samples.length} samples · ${escapeHtml(tierLabel(tier))} · ${new Date(startTime).toLocaleString()} → ${new Date(endTime).toLocaleString()}
+        </div>
+      `;
+      html += renderSparkline(samples, cpuAccessor, '#2ecc71', 'CPU', '%');
+      html += renderSparkline(samples, memAccessor, '#3498db', 'Memory', '%');
+      html += renderSparkline(samples, netRxAccessor, '#9b59b6', 'Network RX', ' MB');
+      html += renderSparkline(samples, netTxAccessor, '#e67e22', 'Network TX', ' MB');
+
+      historyArea.innerHTML = html;
+    } catch (e) {
+      historyArea.innerHTML = `<div class="panel-empty"><span class="empty-icon">⚠️</span>Failed to load history: ${escapeHtml(e.message)}</div>`;
+    }
+  }
+
+  rangeButtons.forEach(btn => {
+    btn.addEventListener('click', () => {
+      rangeButtons.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentRange = btn.dataset.range;
+      loadHistory();
+    });
+  });
+
+  historyContainerSelect?.addEventListener('change', loadHistory);
+
+  document.querySelector('[data-panel="stats-history"]')?.addEventListener('click', () => {
+    populateHistoryContainerSelect();
+    loadHistory();
+  });
 })();

status/js/service-credentials.js

@@ -1,5 +1,6 @@
 // ===== SERVICE CREDENTIALS =====
 (function() {
+  const errorHandler = new ErrorHandler();
   injectModal('folder-browser-modal', `<div id="folder-browser-modal" class="weather-modal">
     <div class="weather-modal-content" style="min-width: 500px; max-width: 700px; max-height: 80vh;">
       <h3>📂 Browse for Media Folders</h3>
@@ -433,7 +434,7 @@
 
       await loadServiceCreds(currentService);
     } catch (e) {
-      console.error('Failed to save credentials:', e);
+      errorHandler.logError('[ServiceCredentials] Save', e, { function: 'saveCredentials' });
       showError('Failed to save: ' + (e.message || 'Unknown error'));
     }
     saveBtn.textContent = 'Save';
@@ -460,7 +461,7 @@
       if (btn) btn.classList.remove('has-creds');
       await loadServiceCreds(currentService);
     } catch (e) {
-      console.error('Failed to clear credentials:', e);
+      errorHandler.logError('[ServiceCredentials] Clear', e, { function: 'clearCredentials' });
       showError('Failed to clear: ' + (e.message || 'Unknown error'));
     }
   });

status/js/setup-wizard.js

@@ -1,4 +1,6 @@
 // Shared timezone utility — used by setup wizard and settings modal
+const errorHandler = new ErrorHandler();
+
 window.populateTimezoneSelect = function(selectEl, selectedTz) {
   const timezones = Intl.supportedValuesOf('timeZone');
   const detected = selectedTz || Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
@@ -150,11 +152,11 @@ window.populateTimezoneSelect = function(selectEl, selectedTz) {
         await response.json();
         return true;
       } else {
-        console.error('Failed to save config to server:', response.status);
+        errorHandler.logError('[SetupWizard] Save Config', new Error(`Server returned ${response.status}`), { function: 'saveConfigToServer' });
         return false;
       }
     } catch (error) {
-      console.error('Error saving config to server:', error);
+      errorHandler.logError('[SetupWizard] Save Config', error, { function: 'saveConfigToServer' });
       return false;
     }
   }

status/js/theme-adapter.js

@@ -7,6 +7,12 @@
 (function(window) {
   'use strict';
 
+  const errorHandler = new ErrorHandler();
+
+  const debug = (...args) => {
+    if (window.DASHCADDY_DEBUG) { console.log(...args); }
+  };
+
   /**
    * Theme configuration mapping for Driver.js
    * Maps dashboard themes to Driver.js styling
@@ -170,7 +176,7 @@
         attributeFilter: ['class']
       });
 
-      console.log('[ThemeAdapter] Theme change listener initialized');
+      debug('[ThemeAdapter] Theme change listener initialized');
     }
 
     /**
@@ -180,13 +186,13 @@
      * @param {string} oldTheme - Old theme name
      */
     _notifyThemeChange(newTheme, oldTheme) {
-      console.log(`[ThemeAdapter] Theme changed: ${oldTheme} → ${newTheme}`);
+      debug(`[ThemeAdapter] Theme changed: ${oldTheme} → ${newTheme}`);
       
       this.themeChangeCallbacks.forEach(callback => {
         try {
           callback(newTheme, oldTheme);
         } catch (error) {
-          console.error('[ThemeAdapter] Error in theme change callback:', error);
+          errorHandler.logError('[ThemeAdapter] Theme Change Callback', error, { function: '_notifyThemeChange' });
         }
       });
     }
@@ -207,7 +213,7 @@
       // Note: Driver.js v1.0+ uses CSS variables, so we inject a style element
       this._injectDriverStyles(themeConfig);
       
-      console.log('[ThemeAdapter] Theme applied to driver:', this.currentTheme);
+      debug('[ThemeAdapter] Theme applied to driver:', this.currentTheme);
     }
 
     /**
@@ -302,6 +308,6 @@
   // Export to global scope
   window.ThemeAdapter = ThemeAdapter;
 
-  console.log('[ThemeAdapter] Module loaded');
+  debug('[ThemeAdapter] Module loaded');
 
 })(window);

status/js/tooltip-definitions.js

@@ -6,6 +6,12 @@
 (function(window) {
   'use strict';
 
+  const errorHandler = new ErrorHandler();
+
+  const debug = (...args) => {
+    if (window.DASHCADDY_DEBUG) { console.log(...args); }
+  };
+
   /**
    * Validate a tooltip definition
    * @param {Object} tooltip - The tooltip definition to validate
@@ -147,7 +153,7 @@
         `${e.tooltip}: ${e.errors.join(', ')}`
       ).join('\n');
       
-      console.error('[TooltipDefinitions] Validation errors:', errorMessages);
+      errorHandler.logError('[TooltipDefinitions] Validation', errorMessages, { function: 'validateTooltip' });
       throw new TooltipError(`Tooltip validation failed:\n${errorMessages}`);
     }
   }
@@ -160,7 +166,7 @@
     TooltipError
   };
 
-  console.log('[TooltipDefinitions] Validation module loaded');
+  debug('[TooltipDefinitions] Validation module loaded');
 
 })(window);
 
@@ -489,7 +495,7 @@ function getActiveTooltips() {
       try {
         return tooltip.condition();
       } catch (error) {
-        console.error(`[TooltipDefinitions] Error evaluating condition for ${tooltip.id}:`, error);
+        errorHandler.logError('[TooltipDefinitions] Condition Eval', error, { function: 'evaluateCondition', tooltipId: tooltip.id });
         return false;
       }
     }
@@ -534,5 +540,5 @@ window.TooltipDefinitions = {
   getNewFeatureTooltips
 };
 
-console.log('[TooltipDefinitions] Definitions loaded:', TOOLTIP_DEFINITIONS.length, 'tooltips');
+debug('[TooltipDefinitions] Definitions loaded:', TOOLTIP_DEFINITIONS.length, 'tooltips');
 

status/js/totp-settings.js

@@ -1,5 +1,6 @@
 // ===== TOTP SETTINGS =====
 (function() {
+  const errorHandler = new ErrorHandler();
   injectModal('totp-settings-modal', `<div id="totp-settings-modal" class="weather-modal">
     <div class="weather-modal-content" style="min-width: 420px; max-width: 520px;">
       <h3 style="margin: 0 0 16px; font-size: 1.1rem;">Authentication Settings</h3>
@@ -185,7 +186,7 @@
         document.getElementById('totp-setup-code').focus();
       }
     } catch (e) {
-      console.error('TOTP setup failed:', e);
+      errorHandler.logError('[TOTP] Setup Failed', e, { function: 'setupTOTP' });
     }
   });
 
@@ -274,7 +275,7 @@
       });
       loadTotpSettings(); // Refresh modal + card (handles "never" disabling TOTP)
     } catch (err) {
-      console.error('Failed to update session duration:', err);
+      errorHandler.logError('[TOTP] Update Session Duration', err, { function: 'updateSessionDuration' });
     }
   });
 
@@ -290,7 +291,7 @@
       const data = await res.json();
       if (data.success) loadTotpSettings();
     } catch (e) {
-      console.error('Failed to disable TOTP:', e);
+      errorHandler.logError('[TOTP] Disable Failed', e, { function: 'disableTOTP' });
     }
   });
 
@@ -322,7 +323,7 @@
         const active = data.config.enabled && data.config.isSetUp;
         updateAuthCard(active, data.config.sessionDuration);
       }
-    } catch (e) { console.error('[AuthCard] Failed to update:', e); }
+    } catch (e) { errorHandler.logError('[TOTP] AuthCard Update', e, { function: 'authCardUpdate' }); }
   })();
 
 })();

status/js/tour-manager.js

@@ -6,6 +6,12 @@
 (function(window) {
   'use strict';
 
+  const errorHandler = new ErrorHandler();
+
+  const debug = (...args) => {
+    if (window.DASHCADDY_DEBUG) { console.log(...args); }
+  };
+
   class TourManager {
     constructor(progressTracker, themeAdapter, dnsTemplateSelector) {
       this.progressTracker = progressTracker;
@@ -26,7 +32,7 @@
       const driverFactory = window.driver?.js?.driver || window.driver?.driver || window.driver;
 
       if (typeof driverFactory !== 'function') {
-        console.error('[TourManager] Driver.js not loaded or invalid. window.driver:', window.driver);
+        errorHandler.logError('[TourManager] Driver.js Not Loaded', new Error('Driver.js not loaded or invalid'), { windowDriver: typeof window.driver });
         return false;
       }
 
@@ -92,7 +98,7 @@
       const activeTooltips = allTooltips.filter(t => !completedIds.includes(t.id));
 
       if (activeTooltips.length === 0) {
-        console.log('[TourManager] No tooltips to show');
+        debug('[TourManager] No tooltips to show');
         this.progressTracker.markTourCompleted();
         return;
       }
@@ -131,7 +137,7 @@
         // Add custom handlers for DNS tooltip
         if (tooltip.id === 'dns-priority' && this.dnsTemplateSelector) {
           step.popover.onSetupNowClick = () => {
-            console.log('[TourManager] Opening DNS template selector');
+            debug('[TourManager] Opening DNS template selector');
             this.dnsTemplateSelector.showTemplateSelector();
             // Mark tooltip as completed and move to next
             this.progressTracker.markTooltipCompleted(tooltip.id);
@@ -141,7 +147,7 @@
           };
           
           step.popover.onLaterClick = () => {
-            console.log('[TourManager] DNS setup deferred');
+            debug('[TourManager] DNS setup deferred');
             this.progressTracker.markDnsSetupDeferred();
             // Mark tooltip as completed and move to next
             this.progressTracker.markTooltipCompleted(tooltip.id);
@@ -198,7 +204,7 @@
     async showTooltip(tooltipId) {
       const tooltip = window.TooltipDefinitions.getTooltipById(tooltipId);
       if (!tooltip) {
-        console.error(`[TourManager] Tooltip not found: ${tooltipId}`);
+        errorHandler.logError('[TourManager] Tooltip Not Found', new Error(`Tooltip not found: ${tooltipId}`), { tooltipId });
         return;
       }
 
@@ -232,11 +238,11 @@
       const newFeatureTooltips = window.TooltipDefinitions.getNewFeatureTooltips();
 
       if (newFeatureTooltips.length === 0) {
-        console.log('[TourManager] No new features to show');
+        debug('[TourManager] No new features to show');
         return;
       }
 
-      console.log(`[TourManager] Showing ${newFeatureTooltips.length} new features`);
+      debug(`[TourManager] Showing ${newFeatureTooltips.length} new features`);
 
       // Convert to Driver.js steps
       const steps = newFeatureTooltips.map((tooltip, index) => {
@@ -280,7 +286,7 @@
         clearTimeout(resizeTimeout);
         resizeTimeout = setTimeout(() => {
           if (this.isActive && this.driver) {
-            console.log('[TourManager] Window resized, repositioning tooltip');
+            debug('[TourManager] Window resized, repositioning tooltip');
             this.driver.refresh();
           }
         }, 150); // Debounce for 150ms
@@ -289,7 +295,7 @@
       // Layout change handler (for theme changes, DOM mutations)
       this.layoutChangeHandler = () => {
         if (this.isActive && this.driver) {
-          console.log('[TourManager] Layout changed, repositioning tooltip');
+          debug('[TourManager] Layout changed, repositioning tooltip');
           // Small delay to allow layout to settle
           setTimeout(() => {
             if (this.driver) {
@@ -347,7 +353,7 @@
     onTourComplete() {
       this.progressTracker.markTourCompleted();
       this.isActive = false;
-      console.log('[TourManager] Tour completed');
+      debug('[TourManager] Tour completed');
     }
 
     /**
@@ -355,12 +361,12 @@
      */
     onTourSkip() {
       // Save current progress but don't mark as completed
-      console.log('[TourManager] Tour skipped');
+      debug('[TourManager] Tour skipped');
       this.isActive = false;
     }
   }
 
   window.TourManager = TourManager;
-  console.log('[TourManager] Module loaded');
+  debug('[TourManager] Module loaded');
 
 })(window);

status/js/update-management.js

@@ -335,7 +335,8 @@
       const res = await fetch('/api/v1/system/version');
       const data = await res.json();
       if (data.success) {
-        dcVersionInfo.textContent = 'v' + data.version + (data.commit ? ' (' + data.commit.substring(0, 7) + ')' : '');
+        const commit = data.commit && data.commit !== 'unknown' ? data.commit : null;
+        dcVersionInfo.textContent = 'v' + data.version + (commit ? ' (' + commit.substring(0, 7) + ')' : '');
       }
     } catch (_) {
       dcVersionInfo.textContent = 'Unable to fetch version';

status/js/weather.js

@@ -1,5 +1,6 @@
 // ========== WEATHER WIDGET ==========
 (function() {
+  const errorHandler = new ErrorHandler();
   // Inject modal HTML
   injectModal('weather-modal', `<div id="weather-modal" class="weather-modal"><div class="weather-modal-content"><h3>Weather Settings</h3>
     <label for="weather-location-input">Location:</label>
@@ -166,7 +167,7 @@
         weatherWidget.icon.innerHTML = `<span class="weather-emoji">${escapeHtml(weather.icon)}</span>`;
       }
     } catch (error) {
-      console.error('Weather update error:', error);
+      errorHandler.logError('[Weather] Update Error', error, { function: 'updateWeather' });
       weatherWidget.location.textContent = 'Weather Error';
       weatherWidget.temp.textContent = 'Error';
       weatherWidget.condition.textContent = 'Failed to load';