Fix CPU quota denominator and swap display on the System hero panel

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.27-62E6A7">
+    <img alt="Version" src="https://img.shields.io/badge/version-0.16.30-62E6A7">
   </p>
   <p>
     <a href="#why-site-gateway">Why Site Gateway</a> ·

ROADMAP.md

@@ -180,3 +180,9 @@ Roughly in priority order:
 `v0.16.26` ships three small UI fixes found while going through the System and API Access tabs. First, the Docker socket status tile's helper text was long enough to truncate with "…" inside its `.health-tile` card -- shortened to the single fact that matters there ("Site Gateway reads the Docker socket read-only to list running containers."), dropping the network-scoping detail so it's consistent with the tile's other single-fact entries (BACKUP_PASSWORD, restart policy); the dropped detail already lives in the in-app documentation. Second, the "Pick container" button sat visibly higher than the target field beside it on the Proxy Hosts, Streaming Hosts, and Settings target fields -- root cause was the sitewide `input{margin-top:7px}` label-gap rule still applying to the input after it's wrapped in a flex row alongside the button, giving the two flex children mismatched margin boxes; the same `7px` is now applied to the wrapper instead and zeroed on the nested input, so the row centers cleanly. Third, the API Access tab's summary bar (Active/Revoked/Full access/Read-only counts plus the "Hide revoked" toggle) could render much taller than intended at certain window widths -- its stat groups and the toggle had no protection against shrinking, so at narrower widths the browser would wrap their text internally instead of just running out of room, and a flex container sizes itself to its tallest child. Added `white-space:nowrap` and `flex-shrink:0` to the summary's stat groups and the "Hide revoked" toggle so they hold their line, plus `flex-wrap` on the summary bar itself as a fallback so if the whole row genuinely doesn't fit, complete items wrap to a new line instead of any single item's text breaking mid-phrase.
 
 `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.
+
+`v0.16.30` fixes two numbers on the System tab's new hero panel (added in v0.16.29) that were technically correct but meant the wrong thing. CPU percent was always computed against either a real Docker `--cpus` quota or, absent one, the *host's total core count* -- so pinning the container to 2 specific cores (`--cpuset-cpus`, Unraid's CPU pinning field) didn't change the denominator at all, since pinning caps which cores can run without capping how much of them can be used, and `cpu.max` stays `max` either way. CPU now checks `cpuset.cpus.effective` (the actual pinned core list, correctly counting ranges like `0-1,4`) whenever there's no real quota, and the hero panel's detail line now says which denominator applies -- "Of N allocated CPUs" for a real `--cpus` quota, "Of N pinned cores" for cpuset pinning with no quota, or "Of host's N cores -- no limit set" when neither is configured -- instead of always claiming "Of this container's CPU quota" even when there wasn't one. Swap had a similar honesty problem: without an explicit `--memory-swap` limit, `memory.swap.max` reads `max` (unbounded, shared with the host's swap) rather than "0," but the panel showed a bare "0 B" that read like a real, enforced cap. It now only shows a percentage when a real swap limit exists; otherwise it shows the actual bytes in use with "Unlimited -- shares host swap" instead of implying a limit that was never set.

package.json

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

src/public/features.js

@@ -571,6 +571,41 @@ 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) {
+    const quotaLabel = health.cpu.quotaSource === "quota" ? `Of ${health.cpu.quotaCpus} allocated CPU${health.cpu.quotaCpus === 1 ? "" : "s"}` : health.cpu.quotaSource === "pinned" ? `Of ${health.cpu.quotaCpus} pinned core${health.cpu.quotaCpus === 1 ? "" : "s"}` : `Of host\u2019s ${health.cpu.quotaCpus} core${health.cpu.quotaCpus === 1 ? "" : "s"} \u2014 no limit set`;
+    setHeroStat("cpu", { value: `${health.cpu.percent.toFixed(1)}%`, percent: health.cpu.percent, tone: tone(health.cpu.percent), detail: quotaLabel });
+  }
+  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" });
+  // Swap only gets a real percentage when the container has an actual --memory-swap limit set
+  // (memory.swap.max is a real number). Without one it's unbounded and shares the host's swap,
+  // so a raw "0 B" would read like a hard cap that doesn't exist -- say so instead.
+  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 && health.swap.limitBytes) setHeroStat("swap", { value: `${health.swap.percent.toFixed(1)}%`, percent: health.swap.percent, tone: tone(health.swap.percent), detail: `${formatBytes(health.swap.usedBytes)} / ${formatBytes(health.swap.limitBytes)}` });
+  else if (health.swap) setHeroStat("swap", { value: formatBytes(health.swap.usedBytes), percent: 0, detail: "Unlimited \u2014 shares host swap" });
+  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 +619,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 +687,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.27">
+  <link rel="stylesheet" href="/styles.css?v=0.16.30">
 </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.27" defer></script><script src="/features.js?v=0.16.27" defer></script><script src="/select-enhance.js?v=0.16.27" defer></script>
+  <script src="/app.js?v=0.16.30" defer></script><script src="/features.js?v=0.16.30" defer></script><script src="/select-enhance.js?v=0.16.30" defer></script>
 </body>
 </html>

src/public/styles.css

@@ -964,7 +964,8 @@ select{appearance:none!important;-webkit-appearance:none!important;background-re
 .api-token-card{min-height:0}
 .api-token-card.revoked{opacity:.6}
 .api-token-card .address{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
-.api-token-hide-revoked{margin:0 0 0 auto;padding:6px 12px;font-size:.85rem;flex-shrink:0;white-space:nowrap}
+.api-token-hide-revoked{margin:0 0 0 auto;padding:0;border:0;background:transparent;font-size:.85rem;flex-shrink:0;white-space:nowrap}
+.api-token-hide-revoked span{line-height:normal}
 .api-token-secret{display:block;margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(var(--bg-rgb),.4);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--font-size-sm);line-height:1.6;word-break:break-all}
 
 /* Backup history timeline */
@@ -976,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,117 @@ 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.
+// cpu.max sets a real CFS quota (from Docker's --cpus flag); cpuset.cpus.effective is the pinned
+// core *list* (from --cpuset-cpus / Unraid's CPU pinning), which caps which cores can run but not
+// how much of them can be used -- pinning alone leaves cpu.max at "max". Percent needs a real
+// denominator either way, and which one applies (and thus what the number means) has to be
+// reported back to the UI so the label doesn't lie about what's being measured.
+async function cgroupCpuQuota() {
+  const max = await readCgroupFile("cpu.max");
+  if (max) { const [quota, period] = max.split(/\s+/); if (quota !== "max") { const q = Number(quota), p = Number(period); if (q > 0 && p > 0) return { cpus: q / p, source: "quota" }; } }
+  const pinned = await readCgroupFile("cpuset.cpus.effective");
+  if (pinned) { const count = expandCpuList(pinned); if (count > 0) return { cpus: count, source: "pinned" }; }
+  return { cpus: os.cpus().length || 1, source: "host" };
+}
+// cpuset.cpus.effective is a comma-separated list of cores and ranges, e.g. "0-1,4" -- count how
+// many individual CPUs that covers rather than assuming a single contiguous range.
+function expandCpuList(list) {
+  return list.split(",").reduce((total, part) => {
+    const range = part.trim().match(/^(\d+)(?:-(\d+))?$/);
+    if (!range) return total;
+    const start = Number(range[1]), end = range[2] !== undefined ? Number(range[2]) : start;
+    return total + Math.max(0, end - start + 1);
+  }, 0);
+}
+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;
+  const quota = await cgroupCpuQuota();
+  const percent = ((usageMicros - previous.usageMicros) / elapsedMicros) / quota.cpus * 100;
+  return { percent: Math.max(0, Math.min(100, percent)), quotaCpus: quota.cpus, quotaSource: quota.source };
+}
+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 [cpu, memory, swap, disk] = await Promise.all([
+    cgroupCpuPercent(),
+    cgroupMemory(),
+    cgroupSwap(),
+    fsp.statfs(dataDir).catch(() => null),
+  ]);
+  return {
+    cpu,
+    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 +1693,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 {