system health in settings

2026-05-22 10:49:29 -05:00
parent eb75f1a49f
commit 238ea09214
5 changed files with 322 additions and 1 deletions
@@ -891,6 +891,7 @@ function initSettingsSidebar() {
    // (nav-hidden toggle, viewport resize, dropdown opened) doesn't leave the
    // section partly hidden under the nav.
    updateSettingsScrollOffset();
+    _clickLockUntil = Date.now() + 1200;
    setActive(link);
    target.scrollIntoView({ behavior: "smooth", block: "start" });
    history.replaceState(null, "", `#${id}`);
@@ -898,7 +899,9 @@ function initSettingsSidebar() {

  // Active-section highlight via IntersectionObserver + page-bottom override.
  const visible = new Set();
+  let _clickLockUntil = 0;
  function updateActive() {
+    if (Date.now() < _clickLockUntil) return;
    // Special case: if the user has scrolled as far as the page allows, the
    // last visible section becomes active (otherwise the topmost-visible
    // heuristic would leave shorter trailing sections — like Custom CSS or
@@ -1706,6 +1709,129 @@ function initThumbnailHandlers() {
  if (form) form.addEventListener("submit", saveThumbnailSettings);
 }

+// ── Server Health ─────────────────────────────────────────────────────────
+
+function formatBytes(bytes) {
+  if (!bytes || bytes <= 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+  return `${(bytes / Math.pow(k, i)).toFixed(i > 0 ? 1 : 0)} ${sizes[i]}`;
+}
+
+function formatUptime(totalSeconds) {
+  const s = Math.floor(totalSeconds);
+  const days = Math.floor(s / 86400);
+  const hours = Math.floor((s % 86400) / 3600);
+  const mins = Math.floor((s % 3600) / 60);
+  const secs = s % 60;
+  if (days > 0) return `${days}d ${hours}h ${mins}m`;
+  if (hours > 0) return `${hours}h ${mins}m ${secs}s`;
+  if (mins > 0) return `${mins}m ${secs}s`;
+  return `${secs}s`;
+}
+
+async function loadHealthStats() {
+  const loading = document.getElementById("health-loading");
+  const content = document.getElementById("health-content");
+  if (loading) { loading.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i>Loading...'; loading.classList.remove("hidden"); }
+  if (content) content.classList.add("hidden");
+
+  try {
+    const res = await fetch("/api/settings/health", { credentials: "include" });
+    if (!res.ok) {
+      if (loading) loading.textContent = "Failed to load health stats.";
+      return;
+    }
+    const data = await res.json();
+
+    const mem = data.memory || {};
+    const rss = mem.rss || 0;
+    const heapUsed = mem.heapUsed || 0;
+    const ext = (mem.external || 0) + (mem.arrayBuffers || 0);
+
+    const set = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
+
+    set("health-uptime", formatUptime(data.uptime || 0));
+    set("health-rss", formatBytes(rss));
+    set("health-heap-used", formatBytes(heapUsed));
+    set("health-external", formatBytes(ext));
+    const heapPct = rss > 0 ? Math.min(100, (heapUsed / rss) * 100) : 0;
+    const extPct  = rss > 0 ? Math.min(100 - heapPct, (ext / rss) * 100) : 0;
+
+    const heapBar = document.getElementById("health-heap-bar");
+    const extBar  = document.getElementById("health-ext-bar");
+    const heapBarLabel = document.getElementById("health-heap-bar-label");
+    const barLabel = document.getElementById("health-bar-label");
+
+    if (heapBar) {
+      heapBar.style.width = `${heapPct.toFixed(1)}%`;
+      heapBar.title = `Heap: ${formatBytes(heapUsed)} (${heapPct.toFixed(1)}% of RSS)`;
+    }
+    if (extBar) {
+      extBar.style.width = `${extPct.toFixed(1)}%`;
+      extBar.title = `External/Buffers: ${formatBytes(ext)} (${extPct.toFixed(1)}% of RSS)`;
+    }
+    if (heapBarLabel) {
+      heapBarLabel.textContent = `${heapPct.toFixed(0)}%`;
+      heapBarLabel.classList.toggle("hidden", heapPct < 8);
+    }
+    if (barLabel) {
+      barLabel.textContent = rss > 0
+        ? `${formatBytes(heapUsed)} heap + ${formatBytes(ext)} ext / ${formatBytes(rss)} RSS`
+        : "-";
+    }
+
+    const t = data.components?.thumbnails || {};
+    set("h-thumb-count", `${t.cachedCount ?? 0} / ${t.cacheMax ?? 0}`);
+    set("h-thumb-bytes", formatBytes(t.cachedBytes || 0));
+    set("h-thumb-frames", t.pendingFrames ?? 0);
+    set("h-thumb-gen", `${t.genActive ?? 0} active, ${t.genQueued ?? 0} queued`);
+    set("h-thumb-max", t.cacheMax ?? 0);
+
+    const c = data.components?.clients || {};
+    set("h-clients-mem", c.inMemory ?? 0);
+    set("h-clients-online", c.online ?? 0);
+
+    const db = data.components?.database || {};
+    set("h-db-size", formatBytes(db.fileSizeBytes || 0));
+
+    if (loading) loading.classList.add("hidden");
+    if (content) content.classList.remove("hidden");
+  } catch (e) {
+    if (loading) loading.textContent = `Error: ${e.message}`;
+  }
+}
+
+async function runGC() {
+  const gcBtn = document.getElementById("health-gc-btn");
+  const msgEl = document.getElementById("health-gc-message");
+  if (gcBtn) gcBtn.disabled = true;
+  try {
+    const res = await fetch("/api/settings/gc", { method: "POST", credentials: "include" });
+    const data = await res.json().catch(() => ({}));
+    if (msgEl) {
+      msgEl.textContent = res.ok
+        ? `GC complete — freed ~${formatBytes(data.freedBytes || 0)}`
+        : `GC failed: ${data.error || res.statusText}`;
+      msgEl.classList.remove("hidden");
+      setTimeout(() => msgEl.classList.add("hidden"), 6000);
+    }
+    if (res.ok) await loadHealthStats();
+  } catch (e) {
+    if (msgEl) { msgEl.textContent = `Error: ${e.message}`; msgEl.classList.remove("hidden"); }
+  } finally {
+    if (gcBtn) gcBtn.disabled = false;
+  }
+}
+
+function initHealthHandlers() {
+  const refreshBtn = document.getElementById("health-refresh-btn");
+  const gcBtn = document.getElementById("health-gc-btn");
+  if (refreshBtn) refreshBtn.addEventListener("click", loadHealthStats);
+  if (gcBtn) gcBtn.addEventListener("click", runGC);
+}
+
 async function init() {
  try {
    await loadCurrentUser();
@@ -1729,9 +1855,11 @@ async function init() {
      await loadRegistrationSettings();
      await loadBuildRateLimitSettings();
      await loadThumbnailSettings();
+      await loadHealthStats();
      initRegistrationHandlers();
      initBuildRateLimitHandlers();
      initThumbnailHandlers();
+      initHealthHandlers();
    }

    passwordForm.addEventListener("submit", updatePassword);
@@ -98,6 +98,7 @@
            <a data-target="build-rate-limit-section" class="settings-nav-link" data-permission="system:configure" style="--accent: 251 146 60"><i class="fa-solid fa-gauge-high w-4 text-orange-400"></i><span>Build Rate Limit</span></a>
            <a data-target="section-appearance"       class="settings-nav-link" data-permission="system:configure" style="--accent: 232 121 249"><i class="fa-solid fa-paintbrush w-4 text-fuchsia-400"></i><span>Custom CSS</span></a>
            <a data-target="export-import-section"    class="settings-nav-link" data-permission="system:configure" style="--accent: 251 191 36"><i class="fa-solid fa-file-export w-4 text-amber-400"></i><span>Export / Import</span></a>
+            <a data-target="section-health"           class="settings-nav-link" data-permission="system:configure" style="--accent: 34 211 238"><i class="fa-solid fa-heart-pulse w-4 text-cyan-400"></i><span>Server Health</span></a>
          </nav>
        </aside>

@@ -989,6 +990,123 @@
        <p id="export-import-message" class="hidden text-sm rounded-lg px-3 py-2 border"></p>
      </section>

+        <!-- Server Health -->
+        <section id="section-health" class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4 settings-section hidden" data-permission="system:configure">
+          <div class="flex items-center justify-between gap-3 flex-wrap">
+            <div class="flex items-center gap-3">
+              <div class="flex items-center justify-center w-9 h-9 rounded-lg bg-cyan-500/10 border border-cyan-500/30">
+                <i class="fa-solid fa-heart-pulse text-cyan-400"></i>
+              </div>
+              <div>
+                <h2 class="text-lg font-semibold">Server Health</h2>
+                <p class="text-sm text-slate-400">Memory usage, per-component breakdown, and process stats.</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2">
+              <button id="health-gc-btn" type="button"
+                class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm transition-colors text-slate-300">
+                <i class="fa-solid fa-broom"></i>Force GC
+              </button>
+              <button id="health-refresh-btn" type="button"
+                class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm transition-colors text-slate-300">
+                <i class="fa-solid fa-rotate"></i>Refresh
+              </button>
+            </div>
+          </div>
+
+          <div id="health-loading" class="text-slate-500 text-sm py-4 text-center">
+            <i class="fa-solid fa-spinner fa-spin mr-2"></i>Loading...
+          </div>
+
+          <div id="health-content" class="hidden space-y-4">
+            <!-- Summary cards -->
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
+              <div class="rounded-lg bg-slate-900 border border-slate-800 px-3 py-2">
+                <div class="text-slate-400 text-xs mb-0.5">Uptime</div>
+                <div id="health-uptime" class="font-medium font-mono">-</div>
+              </div>
+              <div class="rounded-lg bg-slate-900 border border-slate-800 px-3 py-2">
+                <div class="text-slate-400 text-xs mb-0.5">RSS (Total)</div>
+                <div id="health-rss" class="font-medium font-mono">-</div>
+              </div>
+              <div class="rounded-lg bg-slate-900 border border-slate-800 px-3 py-2">
+                <div class="text-slate-400 text-xs mb-0.5">Heap Used</div>
+                <div id="health-heap-used" class="font-medium font-mono">-</div>
+              </div>
+              <div class="rounded-lg bg-slate-900 border border-slate-800 px-3 py-2">
+                <div class="text-slate-400 text-xs mb-0.5">External / Buffers</div>
+                <div id="health-external" class="font-medium font-mono">-</div>
+              </div>
+            </div>
+
+            <!-- Memory bar -->
+            <div>
+              <div class="flex justify-between text-xs mb-1.5">
+                <span class="text-slate-400">RSS memory breakdown</span>
+                <span id="health-bar-label" class="font-mono text-slate-300">-</span>
+              </div>
+              <!-- Stacked bar: heap | external/buffers | free -->
+              <div class="h-5 rounded-lg bg-slate-700 overflow-hidden flex" style="min-width:0">
+                <div id="health-heap-bar"
+                  class="h-full bg-sky-500 transition-all duration-700 flex items-center justify-center overflow-hidden"
+                  style="width:0%" title="JS Heap">
+                  <span id="health-heap-bar-label" class="text-white text-[10px] font-mono font-semibold leading-none px-1 hidden"></span>
+                </div>
+                <div id="health-ext-bar"
+                  class="h-full bg-violet-500 transition-all duration-700"
+                  style="width:0%" title="External / Buffers"></div>
+              </div>
+              <!-- Legend -->
+              <div class="flex items-center gap-4 mt-2 text-xs text-slate-400">
+                <span class="flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 rounded-sm bg-sky-500"></span>Heap used</span>
+                <span class="flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 rounded-sm bg-violet-500"></span>External / Buffers</span>
+                <span class="flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 rounded-sm bg-slate-700"></span>Other (native, stack)</span>
+              </div>
+            </div>
+
+            <!-- Component breakdown -->
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">Components</p>
+              <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                <!-- Thumbnails -->
+                <div class="rounded-lg bg-slate-900 border border-slate-800 p-3 space-y-2">
+                  <div class="flex items-center gap-2 text-sm font-medium text-slate-200">
+                    <i class="fa-solid fa-images text-sky-400 text-xs w-3"></i>Thumbnail Cache
+                  </div>
+                  <div class="space-y-1 text-xs text-slate-400 font-mono">
+                    <div class="flex justify-between"><span>Cached</span><span id="h-thumb-count" class="text-slate-200">-</span></div>
+                    <div class="flex justify-between"><span>Cache size</span><span id="h-thumb-bytes" class="text-slate-200">-</span></div>
+                    <div class="flex justify-between"><span>Pending frames</span><span id="h-thumb-frames" class="text-slate-200">-</span></div>
+                    <div class="flex justify-between"><span>Gen active / queued</span><span id="h-thumb-gen" class="text-slate-200">-</span></div>
+                    <div class="flex justify-between text-slate-500"><span>Capacity</span><span id="h-thumb-max">-</span></div>
+                  </div>
+                </div>
+                <!-- Clients -->
+                <div class="rounded-lg bg-slate-900 border border-slate-800 p-3 space-y-2">
+                  <div class="flex items-center gap-2 text-sm font-medium text-slate-200">
+                    <i class="fa-solid fa-users text-emerald-400 text-xs w-3"></i>Connected Clients
+                  </div>
+                  <div class="space-y-1 text-xs text-slate-400 font-mono">
+                    <div class="flex justify-between"><span>In memory</span><span id="h-clients-mem" class="text-slate-200">-</span></div>
+                    <div class="flex justify-between"><span>Online (&lt;60s)</span><span id="h-clients-online" class="text-slate-200">-</span></div>
+                  </div>
+                </div>
+                <!-- Database -->
+                <div class="rounded-lg bg-slate-900 border border-slate-800 p-3 space-y-2">
+                  <div class="flex items-center gap-2 text-sm font-medium text-slate-200">
+                    <i class="fa-solid fa-database text-amber-400 text-xs w-3"></i>Database
+                  </div>
+                  <div class="space-y-1 text-xs text-slate-400 font-mono">
+                    <div class="flex justify-between"><span>File size</span><span id="h-db-size" class="text-slate-200">-</span></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <p id="health-gc-message" class="hidden text-xs rounded-lg px-3 py-2 border border-emerald-700 bg-emerald-900/20 text-emerald-300"></p>
+          </div>
+        </section>
+
        </div>
        <!-- /Sections -->
      </div>
@@ -2494,3 +2494,11 @@ export function recordAutoDeployRun(deployId: string, clientId: string) {
    Date.now(),
  );
 }
+
+export function getDatabaseFileSizeBytes(): number {
+  try {
+    return Bun.file(dbPath).size;
+  } catch {
+    return 0;
+  }
+}
@@ -2,7 +2,9 @@ import { authenticateRequest } from "../../auth";
 import { AuditAction, getAuditLogs, logAudit } from "../../auditLog";
 import { logger } from "../../logger";
 import { getConfig, updateSecurityConfig, updateTlsConfig, updateAppearanceConfig, updateChatConfig, getExportableConfig, importFullConfig, updateRegistrationConfig, updateBuildRateLimitConfig, updateThumbnailsConfig } from "../../config";
-import { getClientMetricsSummary, getClientMetricsSummaryForUser } from "../../db";
+import { getClientMetricsSummary, getClientMetricsSummaryForUser, getDatabaseFileSizeBytes } from "../../db";
+import { getThumbnailStats } from "../../thumbnails";
+import { getClientCount, getOnlineClients } from "../../clientManager";
 import { metrics } from "../../metrics";
 import { requirePermission } from "../../rbac";
 import { getUserTelegramChatId, setUserTelegramChatId, getUserClientAccessScope, listUserClientRuleIdsByAccess, canUserAccessClient } from "../../users";
@@ -750,5 +752,48 @@ export async function handleMiscRoutes(
    }
  }

+  // GET /api/settings/health
+  if (req.method === "GET" && url.pathname === "/api/settings/health") {
+    const user = await authenticateRequest(req);
+    if (!user) return new Response("Unauthorized", { status: 401 });
+    if (user.role !== "admin") return new Response("Forbidden", { status: 403 });
+
+    const mem = process.memoryUsage();
+    return Response.json({
+      memory: {
+        rss: mem.rss,
+        heapTotal: mem.heapTotal,
+        heapUsed: mem.heapUsed,
+        external: mem.external,
+        arrayBuffers: (mem as any).arrayBuffers ?? 0,
+      },
+      uptime: Math.floor(process.uptime()),
+      components: {
+        thumbnails: getThumbnailStats(),
+        clients: {
+          inMemory: getClientCount(),
+          online: getOnlineClients().length,
+        },
+        database: {
+          fileSizeBytes: getDatabaseFileSizeBytes(),
+        },
+      },
+    });
+  }
+
+  // POST /api/settings/gc
+  if (req.method === "POST" && url.pathname === "/api/settings/gc") {
+    const user = await authenticateRequest(req);
+    if (!user) return new Response("Unauthorized", { status: 401 });
+    if (user.role !== "admin") return new Response("Forbidden", { status: 403 });
+
+    const before = process.memoryUsage().heapUsed;
+    if (typeof Bun !== "undefined" && typeof (Bun as any).gc === "function") {
+      (Bun as any).gc(true);
+    }
+    const after = process.memoryUsage().heapUsed;
+    return Response.json({ ok: true, freedBytes: Math.max(0, before - after) });
+  }
+
  return null;
 }
@@ -216,6 +216,28 @@ export function clearThumbnailRequest(id: string) {
  thumbnailRequests.delete(id);
 }

+export function getThumbnailStats(): {
+  cachedCount: number;
+  cachedBytes: number;
+  pendingFrames: number;
+  genActive: number;
+  genQueued: number;
+  genStateTracked: number;
+  cacheMax: number;
+} {
+  let cachedBytes = 0;
+  for (const rec of thumbnails.values()) cachedBytes += rec.bytes.byteLength;
+  return {
+    cachedCount: thumbnails.size,
+    cachedBytes,
+    pendingFrames: latestFrames.size,
+    genActive: _activeThumbnailGen,
+    genQueued: _thumbnailGenQueue.length,
+    genStateTracked: thumbnailGenState.size,
+    cacheMax: THUMBNAIL_CACHE_MAX,
+  };
+}
+
 export function consumeThumbnailRequest(id: string, windowMs = 5000): boolean {
  const ts = thumbnailRequests.get(id);
  if (!ts) return false;