@symerian/symi 3.5.0 → 3.5.1

package/dist/control-ui/js/logs.js

@@ -0,0 +1,238 @@
+// ── Native Logs Viewer ────────────────────────────────────────────────
+// Fetches logs via the Glass UI's gateway RPC and renders them natively.
+// No iframe, no SPA proxy — direct gateway connection.
+
+const LOGS_POLL_MS   = 3000;
+const LOGS_LIMIT     = 500;
+const LOGS_MAX_BYTES = 250000;
+
+const LEVEL_COLORS = {
+  TRACE: '#6b7280',
+  DEBUG: '#8b5cf6',
+  INFO:  '#60a5fa',
+  WARN:  '#f59e0b',
+  ERROR: '#ef4444',
+  FATAL: '#dc2626',
+};
+
+const LEVEL_ORDER = ['TRACE', 'DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'];
+
+let logsContainer = null;
+let logsCursor    = null;
+let logsTimer     = null;
+let logsAutoFollow = true;
+let logsLevelFilters = new Set(LEVEL_ORDER);
+let logsFilterText = '';
+let logsEntries = [];
+
+function createLogsUI() {
+  const overlay = document.querySelector('body > .page-overlay');
+  const frame   = document.getElementById('page-overlay-frame');
+
+  // Hide the iframe
+  if (frame) frame.style.display = 'none';
+
+  // Create or get native logs container
+  let container = document.getElementById('native-logs-container');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'native-logs-container';
+    container.innerHTML = `
+      <div class="logs-toolbar">
+        <div class="logs-filters">
+          ${LEVEL_ORDER.map(l => `
+            <label class="logs-level-toggle" data-level="${l}">
+              <input type="checkbox" checked data-level="${l}">
+              <span class="logs-level-badge" style="color:${LEVEL_COLORS[l]}">${l}</span>
+            </label>
+          `).join('')}
+        </div>
+        <div class="logs-search">
+          <input type="text" id="logs-search-input" placeholder="Filter logs..." />
+        </div>
+        <div class="logs-actions">
+          <label class="logs-auto-follow">
+            <input type="checkbox" id="logs-auto-follow-cb" checked> Auto-follow
+          </label>
+          <button id="logs-export-btn" title="Export visible">Export</button>
+        </div>
+      </div>
+      <div class="logs-scroll" id="logs-scroll">
+        <div class="logs-entries" id="logs-entries"></div>
+      </div>
+    `;
+    overlay.appendChild(container);
+
+    // Wire up level filters
+    container.querySelectorAll('.logs-level-toggle input').forEach(cb => {
+      cb.addEventListener('change', () => {
+        const level = cb.dataset.level;
+        if (cb.checked) logsLevelFilters.add(level);
+        else logsLevelFilters.delete(level);
+        renderLogs();
+      });
+    });
+
+    // Wire up search
+    document.getElementById('logs-search-input').addEventListener('input', e => {
+      logsFilterText = e.target.value.toLowerCase();
+      renderLogs();
+    });
+
+    // Wire up auto-follow
+    document.getElementById('logs-auto-follow-cb').addEventListener('change', e => {
+      logsAutoFollow = e.target.checked;
+      if (logsAutoFollow) scrollToBottom();
+    });
+
+    // Wire up export
+    document.getElementById('logs-export-btn').addEventListener('click', () => {
+      const visible = getVisibleEntries();
+      const text = visible.map(e => e.raw).join('\n');
+      const blob = new Blob([text], { type: 'text/plain' });
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(blob);
+      a.download = `symi-logs-${new Date().toISOString().slice(0,19)}.txt`;
+      a.click();
+    });
+  }
+
+  logsContainer = container;
+  container.style.display = 'flex';
+  return container;
+}
+
+function destroyLogsUI() {
+  if (logsTimer) { clearInterval(logsTimer); logsTimer = null; }
+  const container = document.getElementById('native-logs-container');
+  if (container) container.style.display = 'none';
+  const frame = document.getElementById('page-overlay-frame');
+  if (frame) frame.style.display = '';
+}
+
+function parseLogLine(line) {
+  try {
+    const obj = JSON.parse(line);
+    const level = obj._meta?.logLevelName || 'INFO';
+    const time  = obj.time || obj._meta?.date || '';
+    const msg   = obj['1'] || obj.msg || obj.message || '';
+    const sub   = obj['0'] || '';
+    return { level, time, msg, sub, raw: line, parsed: obj };
+  } catch {
+    // Plain text line
+    return { level: 'INFO', time: '', msg: line, sub: '', raw: line, parsed: null };
+  }
+}
+
+function getVisibleEntries() {
+  return logsEntries.filter(e => {
+    if (!logsLevelFilters.has(e.level)) return false;
+    if (logsFilterText && !e.raw.toLowerCase().includes(logsFilterText)) return false;
+    return true;
+  });
+}
+
+function renderLogs() {
+  const el = document.getElementById('logs-entries');
+  if (!el) return;
+
+  const visible = getVisibleEntries();
+  const html = visible.map(e => {
+    const color = LEVEL_COLORS[e.level] || '#999';
+    const timeStr = e.time ? new Date(e.time).toLocaleTimeString() : '';
+    const escapedMsg = escapeHtml(e.msg).substring(0, 500);
+    const escapedSub = escapeHtml(e.sub);
+    return `<div class="log-line">
+      <span class="log-time">${timeStr}</span>
+      <span class="log-level" style="color:${color}">${e.level.padEnd(5)}</span>
+      ${escapedSub ? `<span class="log-sub">${escapedSub}</span>` : ''}
+      <span class="log-msg">${escapedMsg}</span>
+    </div>`;
+  }).join('');
+
+  el.innerHTML = html || '<div class="log-empty">No log entries.</div>';
+
+  if (logsAutoFollow) scrollToBottom();
+}
+
+function scrollToBottom() {
+  const scroll = document.getElementById('logs-scroll');
+  if (scroll) scroll.scrollTop = scroll.scrollHeight;
+}
+
+function escapeHtml(s) {
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+async function fetchLogs() {
+  console.log('[logs] fetchLogs called, gateway exists:', !!window.gateway, 'connected:', window.gateway?.connected);
+  if (!window.gateway?.connected) return;
+  try {
+    const params = { limit: LOGS_LIMIT, maxBytes: LOGS_MAX_BYTES };
+    if (logsCursor != null) params.cursor = logsCursor;
+    console.log('[logs] calling rpc logs.tail...');
+    const result = await window.gateway.rpc('logs.tail', params);
+    console.log('[logs] rpc result:', result ? 'ok, lines=' + (result.lines?.length || 0) : 'null');
+    if (!result) return;
+
+    if (result.reset) {
+      logsEntries = [];
+      logsCursor = null;
+    }
+
+    if (result.lines && result.lines.length > 0) {
+      const newEntries = result.lines.map(parseLogLine);
+      logsEntries.push(...newEntries);
+      // Cap at 2000 entries
+      if (logsEntries.length > 2000) {
+        logsEntries = logsEntries.slice(logsEntries.length - 2000);
+      }
+      renderLogs();
+    }
+
+    if (typeof result.cursor === 'number') {
+      logsCursor = result.cursor;
+    }
+  } catch (err) {
+    console.error('[logs] fetch error:', err);
+  }
+}
+
+function startLogsPolling() {
+  console.log('[logs] startLogsPolling, gateway:', !!window.gateway, 'connected:', window.gateway?.connected);
+  // Initial fetch  
+  logsCursor = null;
+  logsEntries = [];
+  
+  // If gateway isn't connected yet, wait for it
+  if (!window.gateway?.connected) {
+    console.log('[logs] gateway not connected, waiting...');
+    const waitIv = setInterval(() => {
+      console.log('[logs] waiting for gateway... connected:', window.gateway?.connected);
+      if (window.gateway?.connected) {
+        clearInterval(waitIv);
+        console.log('[logs] gateway connected! starting fetch...');
+        fetchLogs();
+        if (logsTimer) clearInterval(logsTimer);
+        logsTimer = setInterval(fetchLogs, LOGS_POLL_MS);
+      }
+    }, 500);
+    setTimeout(() => clearInterval(waitIv), 30000);
+    return;
+  }
+  
+  fetchLogs();
+  // Poll every few seconds
+  if (logsTimer) clearInterval(logsTimer);
+  logsTimer = setInterval(fetchLogs, LOGS_POLL_MS);
+}
+
+// Public API
+window.openNativeLogs = function() {
+  createLogsUI();
+  startLogsPolling();
+};
+
+window.closeNativeLogs = function() {
+  destroyLogsUI();
+};

package/dist/control-ui/js/menu.js

@@ -0,0 +1,232 @@
+// ── Command Menu ──────────────────────────────────────────────────────────────
+
+const menuOverlay = document.getElementById("cmd-overlay");
+const menuTrigger = document.getElementById("menu-trigger");
+const menuBackdrop = document.getElementById("cmd-backdrop");
+
+let menuIsOpen = false;
+
+function openMenu() {
+  menuIsOpen = true;
+  menuOverlay.classList.add("open");
+  menuOverlay.removeAttribute("aria-hidden");
+  menuTrigger.classList.add("menu-open");
+  menuTrigger.setAttribute("aria-expanded", "true");
+  document.addEventListener("keydown", onMenuKey);
+}
+
+function closeMenu() {
+  menuIsOpen = false;
+  menuOverlay.classList.remove("open");
+  menuOverlay.setAttribute("aria-hidden", "true");
+  menuTrigger.classList.remove("menu-open");
+  menuTrigger.setAttribute("aria-expanded", "false");
+  document.removeEventListener("keydown", onMenuKey);
+}
+
+function toggleMenu() {
+  if (menuIsOpen) {
+    closeMenu();
+  } else {
+    openMenu();
+  }
+}
+
+function onMenuKey(e) {
+  if (e.key === "Escape") {
+    closeMenu();
+  }
+}
+
+// ── Trigger & backdrop ────────────────────────────────────────────────────────
+menuTrigger.addEventListener("click", toggleMenu);
+menuBackdrop.addEventListener("click", closeMenu);
+
+// Keyboard shortcut: press M to open (when not focused on input)
+document.addEventListener("keydown", (e) => {
+  if (menuIsOpen) {
+    return;
+  }
+  if (e.key === "m" || e.key === "M") {
+    if (
+      document.activeElement.tagName === "INPUT" ||
+      document.activeElement.tagName === "TEXTAREA"
+    ) {
+      return;
+    }
+    e.preventDefault();
+    openMenu();
+  }
+});
+
+// ── Page Overlay (native in-app navigation) ───────────────────────────────────
+// Use direct-child selectors to avoid matching duplicates inside chat messages
+function getPageOverlay() {
+  return document.querySelector("body > .page-overlay");
+}
+function _getPageBackBtn() {
+  return document.querySelector("body > .page-overlay #page-back-btn");
+}
+function getPageTitle() {
+  return document.querySelector("body > .page-overlay #page-overlay-title");
+}
+function getPagePopoutBtn() {
+  return document.querySelector("body > .page-overlay #page-popout-btn");
+}
+function getPageFrame() {
+  return document.querySelector("body > .page-overlay #page-overlay-frame");
+}
+
+let overlayIsOpen = false;
+
+function openPageOverlay(name, standardUrl) {
+  // Derive the proxy URL: strip 18789 origin, prefix with /standard, add ?embed=1
+  // Also pass token + gatewayUrl via hash so the SPA auto-connects
+  let proxyUrl;
+  try {
+    const parsed = new URL(standardUrl);
+    proxyUrl = `/standard${parsed.pathname}${parsed.search ? parsed.search + "&embed=1" : "?embed=1"}`;
+  } catch {
+    proxyUrl = `/standard/?embed=1`;
+  }
+  // The SPA reads token and gatewayUrl from hash params → triggers auto-connect
+  proxyUrl +=
+    "#token=" +
+    encodeURIComponent(window.__SYMI_EMBED_TOKEN || "") +
+    "&gatewayUrl=" +
+    encodeURIComponent("ws://127.0.0.1:3333");
+
+  getPageTitle().textContent = name.toUpperCase();
+  getPagePopoutBtn().href = standardUrl;
+  getPageFrame().src = proxyUrl;
+
+  overlayIsOpen = true;
+  getPageOverlay().classList.add("open");
+  getPageOverlay().setAttribute("aria-hidden", "false");
+  document.addEventListener("keydown", onOverlayKey);
+}
+
+function closePageOverlay() {
+  overlayIsOpen = false;
+  // Clean up native settings panel if open
+  if (window.closeNativeSettings) {
+    window.closeNativeSettings();
+  }
+  getPageOverlay().classList.remove("open");
+  getPageOverlay().setAttribute("aria-hidden", "true");
+  // Restore iframe + popout button for next use
+  getPageFrame().style.display = "";
+  getPagePopoutBtn().style.display = "";
+  // Delay clearing src so the close animation plays cleanly
+  setTimeout(() => {
+    if (!overlayIsOpen) {
+      getPageFrame().src = "";
+    }
+  }, 300);
+  document.removeEventListener("keydown", onOverlayKey);
+}
+
+function onOverlayKey(e) {
+  if (e.key === "Escape") {
+    closePageOverlay();
+  }
+}
+
+document.querySelector("body > .page-overlay #page-back-btn")?.addEventListener("click", () => {
+  // Go back to the menu instead of closing everything
+  closePageOverlay();
+  openMenu();
+});
+
+// ── Item routing ──────────────────────────────────────────────────────────────
+// Page display names (mapped from the menu item text)
+const PAGE_NAMES = {
+  "/overview": "Overview",
+  "/channels": "Channels",
+  "/instances": "Instances",
+  "/sessions": "Sessions",
+  "/usage": "Usage",
+  "/cron": "Cron Jobs",
+  "/tasks": "Background Tasks",
+  "/agents": "Agents",
+  "/skills": "Skills",
+  "/nodes": "Nodes",
+  "/config": "Config",
+  "/debug": "Debug",
+  "/tools": "Agent Tools",
+  "/logs": "Logs",
+};
+
+// All internal pages rendered natively (no iframe)
+const NATIVE_PAGES = {
+  "/overview": "overview",
+  "/channels": "channels",
+  "/instances": "instances",
+  "/sessions": "sessions",
+  "/usage": "usage",
+  "/cron": "cron",
+  "/tasks": "tasks",
+  "/agents": "agents",
+  "/skills": "skills",
+  "/nodes": "nodes",
+  "/config": "config",
+  "/debug": "debug",
+  "/tools": "tools",
+  "/logs": "logs",
+};
+
+function openNativePage(pageName, pageKey) {
+  if (window.closeNativeSettings) {
+    window.closeNativeSettings();
+  }
+  getPageTitle().textContent = pageName.toUpperCase();
+  getPagePopoutBtn().style.display = "none";
+  getPageFrame().style.display = "none";
+  overlayIsOpen = true;
+  getPageOverlay().classList.add("open");
+  getPageOverlay().setAttribute("aria-hidden", "false");
+  document.addEventListener("keydown", onOverlayKey);
+  if (window.openNativeSettings) {
+    window.openNativeSettings(pageKey);
+  }
+}
+
+document.querySelectorAll(".cmd-item[data-href]").forEach((item) => {
+  item.addEventListener("click", (e) => {
+    e.preventDefault();
+    const href = item.dataset.href;
+
+    if (href === "#chat") {
+      closeMenu();
+      if (window.closeNativeSettings) {
+        window.closeNativeSettings();
+      }
+      closePageOverlay();
+      return;
+    }
+
+    // Internal pages rendered natively
+    if (href.includes("127.0.0.1:18789")) {
+      let pathname = "/";
+      try {
+        pathname = new URL(href).pathname;
+      } catch {}
+
+      const pageKey = NATIVE_PAGES[pathname];
+      if (pageKey) {
+        const pageName = PAGE_NAMES[pathname] ?? "Page";
+        closeMenu();
+        openNativePage(pageName, pageKey);
+        return;
+      }
+    }
+
+    // External links open in new tab
+    window.open(href, "_blank", "noopener");
+    closeMenu();
+  });
+});
+
+// Expose for external use (e.g., if other modules need to close the overlay)
+window.openPageOverlay = openPageOverlay;
+window.closePageOverlay = closePageOverlay;

package/dist/control-ui/js/menu.js.pre-nav

@@ -0,0 +1,66 @@
+// ── Command Menu ──────────────────────────────────────────────────────────────
+
+const menuOverlay = document.getElementById('cmd-overlay');
+const menuTrigger = document.getElementById('menu-trigger');
+const menuBackdrop = document.getElementById('cmd-backdrop');
+
+let menuIsOpen = false;
+
+function openMenu() {
+  menuIsOpen = true;
+  menuOverlay.classList.add('open');
+  menuOverlay.removeAttribute('aria-hidden');
+  menuTrigger.classList.add('menu-open');
+  menuTrigger.setAttribute('aria-expanded', 'true');
+  document.addEventListener('keydown', onMenuKey);
+}
+
+function closeMenu() {
+  menuIsOpen = false;
+  menuOverlay.classList.remove('open');
+  menuOverlay.setAttribute('aria-hidden', 'true');
+  menuTrigger.classList.remove('menu-open');
+  menuTrigger.setAttribute('aria-expanded', 'false');
+  document.removeEventListener('keydown', onMenuKey);
+}
+
+function toggleMenu() {
+  menuIsOpen ? closeMenu() : openMenu();
+}
+
+function onMenuKey(e) {
+  if (e.key === 'Escape') closeMenu();
+}
+
+// ── Trigger & backdrop ────────────────────────────────────────────────────────
+menuTrigger.addEventListener('click', toggleMenu);
+menuBackdrop.addEventListener('click', closeMenu);
+
+// Keyboard shortcut: press M to open (when not focused on input)
+document.addEventListener('keydown', e => {
+  if (menuIsOpen) return;
+  if (e.key === 'm' || e.key === 'M') {
+    if (document.activeElement.tagName === 'INPUT' ||
+        document.activeElement.tagName === 'TEXTAREA') return;
+    e.preventDefault();
+    openMenu();
+  }
+});
+
+// ── Item routing ──────────────────────────────────────────────────────────────
+document.querySelectorAll('.cmd-item[data-href]').forEach(item => {
+  item.addEventListener('click', e => {
+    e.preventDefault();
+    const href = item.dataset.href;
+
+    if (href === '#chat') {
+      // Already on the chat — just close the menu
+      closeMenu();
+      return;
+    }
+
+    // All other items: open in new tab (preserves new UI in current tab)
+    window.open(href, '_blank', 'noopener');
+    closeMenu();
+  });
+});

package/dist/control-ui/js/metrics.js

@@ -0,0 +1,53 @@
+// ── Live metrics via /api/metrics (served by Node.js app layer) ───────
+
+function setBar(barId, valId, pct, label) {
+  const bar = document.getElementById(barId);
+  const val = document.getElementById(valId);
+  if (bar) {
+    bar.style.width = Math.min(pct, 100) + "%";
+  }
+  if (val && label !== undefined) {
+    val.textContent = label;
+  }
+}
+
+async function updateMetrics() {
+  try {
+    const res = await fetch("/api/metrics");
+    const data = await res.json();
+
+    setBar("cpu-bar", "cpu-val", data.cpu, data.cpu + "%");
+    setBar("ram-bar", "ram-val", data.memPct, data.memUsedGB + "G");
+    setBar("gpu-bar", "gpu-val", 5, "5%"); // GPU live data future enhancement
+    setBar("disk-bar", "disk-val", 5, "5%");
+
+    const uptimeEl = document.getElementById("uptime");
+    if (uptimeEl) {
+      uptimeEl.textContent = data.uptime;
+    }
+  } catch {
+    // Server not ready yet — no-op
+  }
+}
+
+function updateUptime() {
+  // Static uptime from system — weeks:days:hours
+  const el = document.getElementById("uptime");
+  if (el) {
+    el.textContent = "2w 3d 21h";
+  }
+}
+
+function updateSubagents() {
+  const el = document.getElementById("subagent-count");
+  if (el) {
+    el.textContent = "0 active";
+  }
+}
+
+// Initial + interval updates
+void updateMetrics();
+updateUptime();
+updateSubagents();
+
+setInterval(updateMetrics, 2000);