feat(ui): add real-time diagnostic logs console (#974)

* feat(diagnostics): add admin-gated real-time diagnostics logs terminal UI

* feat(ui): resolve diagnostics logs feedback and optimize client-side caching

* feat(ui): resolve diagnostics logs feedback

static/js/admin.js

@@ -2488,12 +2488,206 @@ function initDangerZone() {
   });
 }
 
+/* ═══════════════════════════════════════════
+   TERMINAL LOGS VIEWER
+   ═══════════════════════════════════════════ */
+let logsPollInterval = null;
+let isLogsPolling = false;
+let cachedLogs = [];
+let logsAbortController = null;
+
+function renderLogs(isAutoPoll = false) {
+  const consoleContainer = el('log-console-container');
+  const levelSelect = el('log-level-select');
+  const searchInput = el('log-search-input');
+
+  if (!consoleContainer) return;
+
+  const levelFilter = levelSelect ? levelSelect.value : 'ALL';
+  const searchQuery = searchInput ? searchInput.value.trim().toLowerCase() : '';
+
+  let logs = cachedLogs;
+
+  // Filter by level locally
+  if (levelFilter !== 'ALL') {
+    logs = logs.filter(line => line.includes(` - ${levelFilter} - `));
+  }
+
+  // Filter by search query locally
+  if (searchQuery) {
+    logs = logs.filter(line => line.toLowerCase().includes(searchQuery));
+  }
+
+  if (logs.length === 0) {
+    consoleContainer.innerHTML = '<div class="settings-system-logs-placeholder">No logs found matching current filters.</div>';
+    return;
+  }
+
+  // Preserve scroll position if user is reading previous logs
+  const atBottom = consoleContainer.scrollHeight - consoleContainer.scrollTop - consoleContainer.clientHeight < 40;
+
+  consoleContainer.innerHTML = logs.map(line => {
+    let levelClass = 'log-line-default';
+
+    if (line.includes(' - INFO - ')) {
+      levelClass = 'log-line-info';
+    } else if (line.includes(' - WARNING - ')) {
+      levelClass = 'log-line-warning';
+    } else if (line.includes(' - ERROR - ') || line.includes(' - CRITICAL - ')) {
+      levelClass = 'log-line-error';
+    } else if (line.includes(' - DEBUG - ')) {
+      levelClass = 'log-line-debug';
+    }
+
+    // XSS safe escape
+    const escaped = line
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+
+    return `<div class="log-line ${levelClass}">${escaped}</div>`;
+  }).join('');
+
+  if (!isAutoPoll || atBottom) {
+    consoleContainer.scrollTop = consoleContainer.scrollHeight;
+  }
+}
+
+async function loadLogs(isAutoPoll = false) {
+  const consoleContainer = el('log-console-container');
+  const limitSelect = el('log-limit-select');
+
+  if (!consoleContainer) return;
+
+  const limit = limitSelect ? limitSelect.value : 200;
+
+  if (logsAbortController) {
+    logsAbortController.abort();
+  }
+  logsAbortController = new AbortController();
+  const { signal } = logsAbortController;
+
+  try {
+    const res = await fetch(`/api/diagnostics/logs?limit=${limit}`, {
+      credentials: 'same-origin',
+      signal
+    });
+
+    if (!res.ok) {
+      if (!isAutoPoll) {
+        consoleContainer.innerHTML = '';
+        const errDiv = document.createElement('div');
+        errDiv.style.color = 'var(--red)';
+        errDiv.style.fontWeight = '600';
+        errDiv.textContent = `Failed to load logs: HTTP ${res.status}`;
+        consoleContainer.appendChild(errDiv);
+      }
+      return;
+    }
+
+    const data = await res.json();
+    if (data.status !== 'success' || !data.logs) {
+      if (!isAutoPoll) {
+        consoleContainer.innerHTML = '';
+        const errDiv = document.createElement('div');
+        errDiv.style.color = 'var(--red)';
+        errDiv.style.fontWeight = '600';
+        errDiv.textContent = 'Failed to parse logs data';
+        consoleContainer.appendChild(errDiv);
+      }
+      return;
+    }
+
+    cachedLogs = data.logs;
+    renderLogs(isAutoPoll);
+  } catch (err) {
+    if (err.name === 'AbortError') {
+      return; // Silently ignore deliberate abort
+    }
+    if (!isAutoPoll) {
+      consoleContainer.innerHTML = '';
+      const errDiv = document.createElement('div');
+      errDiv.style.color = 'var(--red)';
+      errDiv.style.fontWeight = '600';
+      errDiv.textContent = `Error retrieving logs: ${err.message}`;
+      consoleContainer.appendChild(errDiv);
+    }
+  } finally {
+    if (logsAbortController?.signal === signal) {
+      logsAbortController = null;
+    }
+  }
+}
+
+function startLogsPolling() {
+  if (isLogsPolling) return;
+  isLogsPolling = true;
+  const toggle = el('log-auto-refresh-toggle');
+  if (toggle) toggle.checked = true;
+
+  logsPollInterval = setInterval(() => {
+    const modal = el('settings-modal');
+    const systemPanel = el('settings-modal')?.querySelector('[data-settings-panel="system"]');
+
+    // Safe self-cleanup if modal or panel is hidden/closed
+    if (!modal || modal.classList.contains('hidden') || !systemPanel || systemPanel.classList.contains('hidden')) {
+      stopLogsPolling();
+      return;
+    }
+
+    loadLogs(true);
+  }, 3000);
+}
+
+function stopLogsPolling() {
+  if (!isLogsPolling) return;
+  isLogsPolling = false;
+  if (logsPollInterval) {
+    clearInterval(logsPollInterval);
+    logsPollInterval = null;
+  }
+  const toggle = el('log-auto-refresh-toggle');
+  if (toggle) toggle.checked = false;
+}
+
+function initLogsView() {
+  const refreshBtn = el('log-refresh-btn');
+  const levelSelect = el('log-level-select');
+  const limitSelect = el('log-limit-select');
+  const searchInput = el('log-search-input');
+  const autoRefreshToggle = el('log-auto-refresh-toggle');
+
+  if (refreshBtn) refreshBtn.addEventListener('click', () => loadLogs(false));
+  if (levelSelect) levelSelect.addEventListener('change', () => renderLogs(false));
+  if (limitSelect) limitSelect.addEventListener('change', () => loadLogs(false));
+  if (searchInput) searchInput.addEventListener('input', () => renderLogs(false));
+
+  if (autoRefreshToggle) {
+    autoRefreshToggle.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        startLogsPolling();
+      } else {
+        stopLogsPolling();
+      }
+    });
+  }
+
+  // Initial fetch on view loading
+  loadLogs(false);
+}
+
 /* ═══════════════════════════════════════════
    INIT & REFRESH
    ═══════════════════════════════════════════ */
 function initAll() {
   modalEl = el('settings-modal');
-  const inits = [initSignupToggle, initAddUser, initEndpointForm, initMcpForm, initCalDAV, initBackup, initDangerZone, initTokenForm, () => settingsModule.initIntegrations()];
+  const inits = [
+    initSignupToggle, initAddUser, initEndpointForm, initMcpForm,
+    initCalDAV, initBackup, initDangerZone, initTokenForm, initLogsView,
+    () => settingsModule.initIntegrations()
+  ];
   for (const fn of inits) {
     try { fn(); } catch (e) { console.error('Admin init error in', fn.name || 'anonymous', e); }
   }
@@ -2507,6 +2701,7 @@ function refreshAll() {
   loadBuiltinTools();
   loadMcpServers();
   loadTokens();
+  loadLogs(false);
 }
 
 /* ═══════════════════════════════════════════
@@ -2523,6 +2718,7 @@ export function open(tab) {
 }
 
 export function close() {
+  stopLogsPolling();
   settingsModule.close();
 }