Add System tab hero panel: CPU/memory/swap/disk/network + throughput

README.md

@@ -12,7 +12,7 @@
     <img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?logo=docker&logoColor=white">
     <img alt="Architectures" src="https://img.shields.io/badge/platform-amd64%20%7C%20arm64-5965F2">
     <img alt="Caddy" src="https://img.shields.io/badge/powered%20by-Caddy-1F88C0">
-    <img alt="Version" src="https://img.shields.io/badge/version-0.16.28-62E6A7">
+    <img alt="Version" src="https://img.shields.io/badge/version-0.16.29-62E6A7">
   </p>
   <p>
     <a href="#why-site-gateway">Why Site Gateway</a> ·

ROADMAP.md

@@ -182,3 +182,5 @@ Roughly in priority order:
 `v0.16.27` fixes the real, deeper causes behind two v0.16.26 fixes that turned out to be incomplete -- both confirmed by rendering the actual markup and CSS in a headless browser and measuring the real computed heights before and after, rather than reasoning from the stylesheet alone. The API Access summary bar was still rendering 32px taller than the Users tab's summary bar (84px vs 52px, measured) even after last release's `white-space`/`flex-shrink` fix, because that fix addressed a different problem (text wrapping) than what was actually happening here: the sitewide `label{margin:var(--space-4) 0 0}` rule -- meant to space a stacked field label above its input -- was also landing on the "Hide revoked" toggle, since it's built as a `<label>` too. That gave it a lopsided 16px top margin with no bottom margin, and a flex row sizes itself to its tallest child's full margin box, so the whole bar grew to accommodate it. This is the same bug class the System tab's Docker toggle was already patched for (`.system-integrations .check-control{margin:0}`) -- the API tokens toggle just didn't get the same treatment when it was added. Fixed by zeroing that toggle's margin the same way. (A real, much smaller ~16px difference remains between the two bars, and that part is expected: the API bar contains an actual bordered, padded checkbox control, and Users' doesn't, so its row is naturally a little taller than one built from plain text alone.) Separately, the "Pick container" button was still measurably 2px shorter than its target field (41px vs 39px, measured) even after realigning their margins -- the button and input use different padding values (11px vs the shared 12px `--space-3`), and no amount of margin/alignment fiddling closes a real padding gap. Gave both an explicit `height:44px`, the same fixed control height already used throughout the app for this exact kind of row (dialog inputs, the log host selector, Settings target fields), so they're now pixel-identical rather than approximately matched.
 
 `v0.16.28` closes the API Access summary bar's remaining height gap against every other tab's summary bar (Users, Groups, Hosted Sites, Proxy Hosts, and so on) -- measured with the same headless-browser approach as v0.16.27: 68px vs 52px before this release, now 53px vs 52px, a difference too small to see and driven only by the checkbox input's own fixed 17px size (every checkbox in the app is 17px; shrinking just this one to save the last pixel would have made it the odd one out). The remaining gap came from the "Hide revoked" toggle's bordered, padded pill styling -- a treatment none of the other tabs' summary bars use, since none of them embed a control inline with their stat counts. Rather than keep splitting the difference, the toggle now sits flush in the bar like the stat counts beside it: no border, no background, no padding, and its label text no longer inherits `.check-control`'s 1.35 line-height (meant for roomier form checkboxes, not a compact inline one). It still reads clearly as an interactive control -- the checkbox itself, its green accent color, and the pointer cursor on hover are untouched -- it just no longer sits inside its own nested box within the already-bordered summary bar.
+
+`v0.16.29` adds a hero panel to the top of the Administration > System tab -- a single, visually distinct "one-stop shop" for this container's live CPU, memory, swap, disk, and network numbers, plus request throughput, all in one place instead of scattered across the plain status tiles below it. CPU, memory, and swap all read directly from this container's own cgroup v2 files (`cpu.stat`'s `usage_usec`, `memory.current`/`memory.max`, `memory.swap.current`/`memory.swap.max`) rather than host-level figures, on the same reasoning already settled for this feature: Site Gateway is rarely the only thing running on the host, so a host-wide number would be misleading in a dashboard scoped to one container. CPU percent is computed from two samples of the cumulative `usage_usec` counter taken a poll apart, normalized against `cpu.max`'s quota when one is set (or the host's core count when it isn't); memory and swap read straight off their `.current`/`.max` pairs, with swap showing "Off" rather than a stale percentage when the container has none configured. Disk reuses the same `statfs`-on-the-data-volume approach the System tab's storage breakdown already used. Network throughput is new: since `/sys/class/net/*/statistics/{rx_bytes,tx_bytes}` are cumulative counters too, a background sampler reads every non-loopback interface every 5 seconds and keeps a rolling rate in memory, so the hero panel always shows a real, smoothed rate rather than a lifetime total or a jittery two-reads-per-request estimate. Request throughput reuses the exact number already shown on the main Dashboard ("requests in the last minute"), so the two stay in sync without duplicating the underlying query. Each stat degrades independently and visibly rather than silently: a metric with no readable source (cgroup v1 hosts, a sandboxed `/sys/class/net`, and so on) shows a dash and a one-line explanation instead of a wrong number or a blank space, and CPU/memory/swap/disk fills turn amber past 75% and red past 90%, matching the color language already used elsewhere in the app for degraded/warning states.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "site-gateway",
-  "version": "0.16.28",
+  "version": "0.16.29",
   "private": true,
   "description": "Site Gateway: simple self-hosted website publishing, reverse proxying, and automatic HTTPS.",
   "type": "module",

src/public/features.js

@@ -571,6 +571,34 @@ document.addEventListener("click", async event => {
 });
 
 
+// Formats a byte rate as e.g. "1.2 MB/s"; reuses formatBytes and just appends the rate suffix.
+function formatRate(bytesPerSecond) { return `${formatBytes(bytesPerSecond)}/s`; }
+function setHeroStat(key, { value, percent, detail, tone } = {}) {
+  const valueEl = document.querySelector(`#system-hero-${key}-value`), fillEl = document.querySelector(`#system-hero-${key}-fill`), detailEl = document.querySelector(`#system-hero-${key}-detail`);
+  if (valueEl) valueEl.textContent = value ?? "\u2014";
+  if (fillEl) { fillEl.style.width = `${Math.max(0, Math.min(100, percent ?? 0))}%`; fillEl.className = `system-hero-fill${tone ? ` ${tone}` : ""}`; }
+  if (detailEl) detailEl.textContent = detail || "";
+}
+// Populates the System tab's hero panel (CPU/memory/swap/disk/network/throughput) from
+// /api/system/health. Each stat degrades gracefully to a dash when its source isn't available
+// (e.g. no cgroup v2, no readable network interfaces, swap disabled on the host).
+function renderSystemHealthHero(health) {
+  if (!document.querySelector("#system-hero-grid")) return;
+  if (!health) { ["cpu", "memory", "swap", "disk", "network", "throughput"].forEach(key => setHeroStat(key, { value: "\u2014", detail: "Unavailable" })); return; }
+  const tone = percent => percent >= 90 ? "critical" : percent >= 75 ? "warning" : "";
+  if (health.cpu) setHeroStat("cpu", { value: `${health.cpu.percent.toFixed(1)}%`, percent: health.cpu.percent, tone: tone(health.cpu.percent), detail: "Of this container\u2019s CPU quota" });
+  else setHeroStat("cpu", { value: "\u2014", detail: "cgroup CPU stats unavailable" });
+  if (health.memory) setHeroStat("memory", { value: `${health.memory.percent.toFixed(1)}%`, percent: health.memory.percent, tone: tone(health.memory.percent), detail: `${formatBytes(health.memory.usedBytes)} / ${formatBytes(health.memory.limitBytes)}` });
+  else setHeroStat("memory", { value: "\u2014", detail: "cgroup memory stats unavailable" });
+  if (health.swap && health.swap.configured === false) setHeroStat("swap", { value: "Off", percent: 0, detail: "Swap is not configured for this container" });
+  else if (health.swap) setHeroStat("swap", { value: health.swap.percent === null ? formatBytes(health.swap.usedBytes) : `${health.swap.percent.toFixed(1)}%`, percent: health.swap.percent ?? 0, tone: health.swap.percent ? tone(health.swap.percent) : "", detail: health.swap.limitBytes ? `${formatBytes(health.swap.usedBytes)} / ${formatBytes(health.swap.limitBytes)}` : formatBytes(health.swap.usedBytes) });
+  else setHeroStat("swap", { value: "\u2014", detail: "cgroup swap stats unavailable" });
+  if (health.disk) setHeroStat("disk", { value: `${health.disk.percent.toFixed(1)}%`, percent: health.disk.percent, tone: tone(health.disk.percent), detail: `${formatBytes(health.disk.usedBytes)} used \u00b7 ${formatBytes(health.disk.availableBytes)} free` });
+  else setHeroStat("disk", { value: "\u2014", detail: "Disk stats unavailable" });
+  if (health.network) setHeroStat("network", { value: formatRate(health.network.rxBytesPerSec + health.network.txBytesPerSec), percent: 0, detail: `\u2193 ${formatRate(health.network.rxBytesPerSec)} \u00b7 \u2191 ${formatRate(health.network.txBytesPerSec)}` });
+  else setHeroStat("network", { value: "\u2014", detail: "Sampling\u2026" });
+  setHeroStat("throughput", { value: String(health.throughput?.liveRequests ?? 0), percent: 0, detail: "requests in the last minute" });
+}
 // --- System tab: environment/integration status, storage, scheduled jobs, sync, restart --------
 function renderSystemPanel() {
   if (state.user?.role !== "administrator") return;
@@ -584,6 +612,11 @@ function renderSystemPanel() {
     panel.dataset.ready = "1";
     panel.innerHTML = [
       '<div class="panel-heading"><div><h2>System</h2><p class="muted">What\u2019s configured, what\u2019s running, and what this deployment can do. Nothing here is customizable except the Docker toggle below and the action buttons \u2014 everything else is status.</p></div></div>',
+      '<div class="system-hero"><div class="system-hero-grid" id="system-hero-grid">' +
+        ["cpu:CPU", "memory:Memory", "swap:Swap", "disk:Disk", "network:Network", "throughput:Throughput"].map(entry => { const [key, label] = entry.split(":");
+          return `<div class="system-hero-stat" data-hero-stat="${key}"><span class="system-hero-label">${label}</span><strong class="system-hero-value" id="system-hero-${key}-value">\u2014</strong><div class="system-hero-bar"><div class="system-hero-fill" id="system-hero-${key}-fill"></div></div><small class="system-hero-detail" id="system-hero-${key}-detail"></small></div>`;
+        }).join("") +
+      '</div></div>',
       '<div class="dashboard-panel"><div class="panel-heading"><div><p class="eyebrow">Environment</p><h2>Integrations</h2></div></div><div id="system-env-status" class="health-grid"></div><div class="system-integrations"></div></div>',
       '<div class="dashboard-panel"><div class="panel-heading"><div><p class="eyebrow">Environment</p><h2>Security status</h2></div></div><div id="system-security" class="health-grid"></div></div>',
       '<div class="dashboard-panel"><div class="panel-heading"><div><p class="eyebrow">Operations</p><h2>Scheduled jobs</h2></div></div><div id="system-jobs" class="health-grid"></div></div>',
@@ -647,11 +680,13 @@ async function renderSystemStatus(panel) {
   if (syncStatus) { const drift = (state.dashboard?.attention || []).some(item => item.kind === "drift"); syncStatus.textContent = drift ? "Configuration drift detected \u2014 the running gateway no longer matches the last known-good configuration." : `Gateway configuration is in sync. Last reload: ${state.dashboard?.gateway?.lastReload ? formatTime(state.dashboard.gateway.lastReload) : "unknown"}.`; syncStatus.className = drift ? "muted status-warning" : "muted"; }
   if (version) version.innerHTML = `Site Gateway v${extendedEscape(state.config?.version || "unknown")}<br>Access this dashboard at: <code>${extendedEscape(location.origin)}</code><br>Data directory: <code>${extendedEscape(state.config?.storage?.databasePath ? state.config.storage.databasePath.replace(/\/database\/.*/, "") : "/data")}</code> &middot; Site ports: <code>${extendedEscape(String(state.config?.minPort ?? ""))}\u2013${extendedEscape(String(state.config?.maxPort ?? ""))}</code>`;
   try {
-    const [sec, store, policy] = await Promise.all([
+    const [sec, store, policy, health] = await Promise.all([
       api("/api/system/security"),
       api("/api/system/storage"),
       api("/api/system/restart-policy"),
+      api("/api/system/health").catch(() => null),
     ]);
+    renderSystemHealthHero(health);
     if (security) security.innerHTML = [
       { ok: !sec.adminPasswordIsDefault, label: "ADMIN_PASSWORD", detail: sec.adminPasswordIsDefault ? "Still using the built-in default \u2014 set this before exposing the dashboard." : "Configured." },
       { ok: !sec.sessionSecretIsDefault, label: "SESSION_SECRET", detail: sec.sessionSecretIsDefault ? "Not set \u2014 sessions are keyed off the admin credentials instead of an independent secret." : "Configured." },

src/public/index.html

@@ -8,7 +8,7 @@
   <title>Site Gateway</title>
   <meta name="description" content="Host sites, proxy services, and manage HTTPS from one simple dashboard.">
   <link rel="icon" type="image/png" href="/site-gateway-icon-approved.png">
-  <link rel="stylesheet" href="/styles.css?v=0.16.28">
+  <link rel="stylesheet" href="/styles.css?v=0.16.29">
 </head>
 
 <!-- ================================================================
@@ -434,6 +434,6 @@
   <div id="toast" class="toast" role="status"></div>
   <div id="update-banner" class="update-banner hidden" role="status"><span>A new version of Site Gateway is available.</span><div class="update-banner-actions"><button id="update-banner-refresh" class="button primary">Refresh</button><button id="update-banner-dismiss" class="text-button">Dismiss</button></div></div>
   <!-- App scripts: core (app.js) then extended views/admin (features.js) -->
-  <script src="/app.js?v=0.16.28" defer></script><script src="/features.js?v=0.16.28" defer></script><script src="/select-enhance.js?v=0.16.28" defer></script>
+  <script src="/app.js?v=0.16.29" defer></script><script src="/features.js?v=0.16.29" defer></script><script src="/select-enhance.js?v=0.16.29" defer></script>
 </body>
 </html>

src/public/styles.css

@@ -977,3 +977,19 @@ select{appearance:none!important;-webkit-appearance:none!important;background-re
 .check-control.is-disabled{opacity:.55}
 .check-control.is-disabled span{color:var(--muted)}
 .docker-integration-section,.backup-history-section{margin-top:var(--space-5)}
+
+/* System tab hero: one-stop CPU/memory/swap/disk/network/throughput readout, styled like the
+   decorative .metric-card gradient tiles rather than the plain .health-tile rows below it. */
+.system-hero{margin:0 0 18px;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg,rgba(var(--panel2-rgb),.95),rgba(var(--card-shade-rgb),.95));box-shadow:0 14px 40px rgba(var(--black-rgb),.14)}
+.system-hero-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-4)}
+.system-hero-stat{min-width:0;display:flex;flex-direction:column;gap:6px}
+.system-hero-label{color:var(--muted);font-size:var(--font-size-sm);font-weight:650;text-transform:uppercase;letter-spacing:.04em}
+.system-hero-value{font-size:1.5rem;font-weight:800;line-height:1.1}
+.system-hero-bar{height:6px;border-radius:var(--radius-full);background:rgba(var(--bg-rgb),.4);overflow:hidden}
+.system-hero-fill{height:100%;border-radius:var(--radius-full);background:var(--green);transition:width .4s ease}
+.system-hero-fill.warning{background:var(--warning)}
+.system-hero-fill.critical{background:var(--danger)}
+.system-hero-stat[data-hero-stat="network"] .system-hero-bar,.system-hero-stat[data-hero-stat="throughput"] .system-hero-bar{display:none}
+.system-hero-detail{color:var(--muted);font-size:var(--font-size-xs);min-height:1.2em}
+@media(max-width:1100px){.system-hero-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
+@media(max-width:420px){.system-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

src/server.js

@@ -5,6 +5,7 @@ import fs from "node:fs";
 import fsp from "node:fs/promises";
 import http from "node:http";
 import net from "node:net";
+import os from "node:os";
 import dgram from "node:dgram";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -93,6 +94,99 @@ async function directorySize(directory) {
   return sizes.reduce((sum, size) => sum + size, 0);
 }
 
+// --- System health: cgroup v2 CPU/memory/swap sampling + network throughput -------------------
+// All readings are container-scoped (cgroup v2), not host-wide, because Site Gateway usually
+// isn't the only thing running on the host and host-wide numbers would be misleading in a
+// per-container dashboard. Falls back to host-level approximations (with a flag the UI can use
+// to disclaim them) when cgroup v2 files aren't readable -- e.g. cgroup v1 hosts, or a container
+// runtime that doesn't expose them.
+const CGROUP_ROOT = "/sys/fs/cgroup";
+async function readCgroupFile(name) {
+  try { return (await fsp.readFile(path.join(CGROUP_ROOT, name), "utf8")).trim(); } catch { return null; }
+}
+let lastCpuSample = null; // { usageMicros, atMs } -- usage_usec is cumulative, so CPU% needs a delta between two samples.
+async function cgroupCpuPercent() {
+  const stat = await readCgroupFile("cpu.stat");
+  if (!stat) return null;
+  const match = stat.match(/^usage_usec (\d+)/m);
+  if (!match) return null;
+  const usageMicros = Number(match[1]), atMs = Date.now();
+  const previous = lastCpuSample;
+  lastCpuSample = { usageMicros, atMs };
+  if (!previous) return null; // First call has nothing to diff against -- the next poll will have a real number.
+  const elapsedMicros = (atMs - previous.atMs) * 1000;
+  if (elapsedMicros <= 0) return null;
+  // cpu.max caps how many CPUs this container may use; percent is relative to that quota (or to
+  // the host's core count when the container has no quota set, i.e. cpu.max reads "max").
+  const max = await readCgroupFile("cpu.max");
+  let quotaCpus = os.cpus().length || 1;
+  if (max) { const [quota, period] = max.split(/\s+/); if (quota !== "max") { const q = Number(quota), p = Number(period); if (q > 0 && p > 0) quotaCpus = q / p; } }
+  const percent = ((usageMicros - previous.usageMicros) / elapsedMicros) / quotaCpus * 100;
+  return Math.max(0, Math.min(100, percent));
+}
+async function cgroupMemory() {
+  const current = await readCgroupFile("memory.current");
+  if (current === null) return null;
+  const maxRaw = await readCgroupFile("memory.max");
+  const totalBytes = os.totalmem();
+  const limitBytes = maxRaw && maxRaw !== "max" ? Number(maxRaw) : totalBytes;
+  const usedBytes = Number(current);
+  return { usedBytes, limitBytes, percent: limitBytes > 0 ? (usedBytes / limitBytes) * 100 : null };
+}
+async function cgroupSwap() {
+  const current = await readCgroupFile("memory.swap.current");
+  if (current === null) return null;
+  const maxRaw = await readCgroupFile("memory.swap.max");
+  const usedBytes = Number(current);
+  if (maxRaw === "0") return { usedBytes: 0, limitBytes: 0, percent: null, configured: false };
+  const limitBytes = maxRaw && maxRaw !== "max" ? Number(maxRaw) : null;
+  return { usedBytes, limitBytes, percent: limitBytes ? (usedBytes / limitBytes) * 100 : null, configured: true };
+}
+// Network counters are cumulative since the interface came up, so throughput needs a delta
+// between two samples too -- sampled on a fixed interval in the background (rather than on
+// each request) so the rate stays smooth regardless of how often the dashboard polls.
+let lastNetworkSample = null; // { rxBytes, txBytes, atMs }
+let networkRate = null; // { rxBytesPerSec, txBytesPerSec }
+async function sampleNetworkInterfaces() {
+  try {
+    const names = (await fsp.readdir("/sys/class/net")).filter(name => name !== "lo");
+    const totals = await Promise.all(names.map(async name => {
+      const [rx, tx] = await Promise.all([
+        fsp.readFile(`/sys/class/net/${name}/statistics/rx_bytes`, "utf8").catch(() => "0"),
+        fsp.readFile(`/sys/class/net/${name}/statistics/tx_bytes`, "utf8").catch(() => "0"),
+      ]);
+      return { rx: Number(rx.trim()) || 0, tx: Number(tx.trim()) || 0 };
+    }));
+    const rxBytes = totals.reduce((sum, value) => sum + value.rx, 0), txBytes = totals.reduce((sum, value) => sum + value.tx, 0), atMs = Date.now();
+    if (lastNetworkSample) {
+      const elapsedSeconds = (atMs - lastNetworkSample.atMs) / 1000;
+      if (elapsedSeconds > 0) networkRate = { rxBytesPerSec: Math.max(0, (rxBytes - lastNetworkSample.rxBytes) / elapsedSeconds), txBytesPerSec: Math.max(0, (txBytes - lastNetworkSample.txBytes) / elapsedSeconds) };
+    }
+    lastNetworkSample = { rxBytes, txBytes, atMs };
+  } catch { /* No readable network interfaces (e.g. host networking with restricted /sys) -- the hero panel just omits the network stat. */ }
+}
+setInterval(sampleNetworkInterfaces, 5000).unref();
+sampleNetworkInterfaces();
+// One combined snapshot for the System tab's hero panel -- CPU/memory/swap/network are all
+// container-scoped (cgroup v2 + this container's network namespace); disk reuses the same
+// statfs-on-the-data-volume approach as /api/system/storage.
+async function systemHealthSnapshot() {
+  const [cpuPercent, memory, swap, disk] = await Promise.all([
+    cgroupCpuPercent(),
+    cgroupMemory(),
+    cgroupSwap(),
+    fsp.statfs(dataDir).catch(() => null),
+  ]);
+  return {
+    cpu: cpuPercent === null ? null : { percent: cpuPercent },
+    memory,
+    swap,
+    disk: disk ? { totalBytes: disk.blocks * disk.bsize, freeBytes: disk.bfree * disk.bsize, availableBytes: disk.bavail * disk.bsize, usedBytes: disk.blocks * disk.bsize - disk.bfree * disk.bsize, percent: ((disk.blocks - disk.bfree) / disk.blocks) * 100 } : null,
+    network: networkRate,
+    throughput: { liveRequests: storage.performanceLiveCount(60) },
+  };
+}
+
 function numberEnv(name, fallback) {
   const value = Number.parseInt(process.env[name] || "", 10);
   return Number.isInteger(value) ? value : fallback;
@@ -1581,6 +1675,10 @@ app.post("/api/account/mfa/recovery-codes", async (req, res, next) => {
 app.get("/api/config", (req, res) => res.json({ version: appVersion, minPort, maxPort, adminPort, storage: { engine: "sqlite", databasePath: storage.databasePath, instanceId: LOCAL_INSTANCE_ID, backupsPath: backupsDir, certificatesPath: certificatesRoot }, gateway: { enabled: true, error: gatewayError }, backup: { encryptionAvailable: Boolean(scheduledBackupPassword) }, docker: { socketMounted: dockerSocketMounted, enabled: dockerSocketMounted && settings.dockerIntegration?.enabled === true } }));
 
 // --- System tab: storage usage, restart-policy check, and self-restart -----------------------------------
+app.get("/api/system/health", async (req, res, next) => {
+  if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." });
+  try { res.json(await systemHealthSnapshot()); } catch (error) { next(error); }
+});
 app.get("/api/system/storage", async (req, res, next) => {
   if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." });
   try {