Sync Version panel's Uptime to the shared 7-second hero poll

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

ROADMAP.md

@@ -200,3 +200,11 @@ Roughly in priority order:
 `v0.16.36` opens `/api/system/health` up to every signed-in user instead of administrators only, so the Dashboard's hero panel (unified with the System tab's in v0.16.35) actually populates for standard users instead of sitting on dashes forever. It's a read-only endpoint with nothing destructive or sensitive behind it -- live CPU/memory/swap/disk/network numbers a standard user could already roughly infer from the Dashboard running fast or slow -- so it now follows the same no-admin-gate pattern as `/api/dashboard` rather than the stricter pattern used by the rest of `/api/system/*` (storage breakdown, restart, restart-policy), which stay administrator-only since those are either configuration detail or capable of restarting the container. Worth keeping in mind: when `DATA_DIR_LIMIT_GB` is set, each poll of this endpoint does a real recursive walk of `/data` to compute Site Gateway's own footprint (see v0.16.32) -- with multiple people viewing the Dashboard at once, each on their own 7-second timer, that's now multiple concurrent walks instead of one administrator's. Not a problem at ordinary usage levels, but worth revisiting (e.g. a shared, briefly-cached snapshot) if it's ever noticeably heavy with a lot of concurrent viewers.
 
 `v0.16.37` combines the documentation catch-up for the hero panel arc (v0.16.29-36: README feature bullets and the environment-variable table, plus new "Live resource panel" and "Version" sections in the in-app manual's Administration System article, and an updated Dashboard "Runtime & System" article) with a real fix found while reviewing the Dashboard's hero panel live: the Throughput chip next to it (requests/min) was still only updating on the old 30-second `refreshDashboard()` timer, not the hero's 7-second poll, even though `/api/system/health` already computes that exact number on every call and the Dashboard was just discarding it. `refreshDashboardHero()` now also updates the Throughput chip from that same response, so it refreshes on the same cadence as the rest of the hero instead of lagging behind it by up to 23 seconds.
+
+`v0.16.38` fixes the Dashboard hero's Uptime tile reliably showing "0m" right after a page load or refresh, before slowly counting up from there rather than showing the real elapsed time immediately. Root cause: a 1-second ticker (`setInterval(() => updateDashboardUptime(), 1000)`) has always run independently of the real data fetch, calling `updateDashboardUptime()` with no argument once a second while the Dashboard is visible. The function's old anchor logic (`window.__dashboardStartedAt || (window.__dashboardStartedAt = ...)`) treated a bare, argument-less call as "anchor starts now" (zero elapsed), and because that anchor was set-once, a later call carrying the real `uptimeSeconds` from `/api/dashboard` was then a no-op -- the wrong zero-based anchor had already won the race, almost every time, since the ticker fires every second and the dashboard fetch takes at least one network round trip. `updateDashboardUptime()` now only ever sets the anchor from a real, finite `seconds` value, and does so every time real data arrives rather than once -- so it can't be raced by the bare ticker call (which now just re-renders using whatever anchor already exists, or does nothing until one does), and it also self-corrects if the container genuinely restarts while the page stays open, instead of drifting forever from a stale first anchor. Separately, confirmed by inspection (not a bug, but worth documenting): the Administration System tab's Version panel does *not* tick client-side the way the Dashboard's hero does -- its Uptime is a static string recomputed only when the page's shared dashboard data refetches (on load, or every 30 seconds while the Dashboard view specifically is the active one), so it can go visibly stale while sitting on the Administration tab. Left as-is for now since it's presented as build/version metadata rather than a live stat, but flagged in case a ticking version is wanted there too.
+
+
+`v0.16.39` retires the Dashboard Uptime tile's separate 1-second client-side ticker, the same mechanism behind the v0.16.38 "resets to 0m on page load" bug, in favor of treating Uptime as just another field on the shared 7-second `/api/system/health` poll that already drives CPU, memory, swap, disk, and network on both the Dashboard and the Administration > System tab's hero panel. Revisiting the ticker after fixing its race condition, it turned out to be solving a precision problem the display doesn't actually have: `formatDuration()` only ever renders minute-level granularity ("2h 59m"), never seconds, so a per-second tick never changed what was on screen between one 7-second poll and the next. `systemHealthSnapshot()` now includes `uptimeSeconds` (from `process.uptime()`, the same source `dashboardSnapshot()` already used), and `renderHeroPanel()`'s former `includeThroughput` boolean became a `sixthSlot` option ("throughput" for the System tab, which has no other requests/min display, or "uptime" for the Dashboard, which already shows Throughput in its own chip) so the sixth hero slot can be either stat without a special case. The client ticker, its anchor state, and the whole race-condition class it enabled are gone: one poll, one code path, six stats, no anchor to get out of sync.
+
+
+`v0.16.40` moves the Administration → System tab's Version panel Uptime figure onto the same 7-second `/api/system/health` poll driving the hero panel above it, instead of only updating when the page's slower, general dashboard snapshot refetches (on load, or every ~30 seconds while the Dashboard view specifically is active). Found while reviewing the v0.16.39 change: the hero's own Uptime slot was now current to the second, but the separate Version-panel line right below it — the same number, shown twice on the same page — could still be stale by up to half a minute or more. `renderSystemStatus()`'s Uptime is now wrapped in its own `#system-version-uptime` span and updated by a small `updateSystemVersionUptime(health)` helper, called both from the initial render and from the same 7-second timer that already refreshes the hero, so the two Uptime figures on that page can no longer drift apart.

package.json

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

src/public/app.js

@@ -147,7 +147,6 @@ function probeCopy(service, ready, error, unconfigured = "Not configured") {
 
 
 function renderDashboardJobs(system) { const columns = document.querySelector("#dashboard-view .dashboard-columns"), health = columns?.firstElementChild; if (!columns) return; let panel = document.querySelector("#dashboard-jobs"); if (!panel) { panel = document.createElement("section"); panel.id = "dashboard-jobs"; panel.className = "dashboard-panel dashboard-jobs-panel"; columns.insertBefore(panel, columns.children[1] || null); } if (health && health.parentElement === columns) columns.parentElement.insertBefore(health, columns); panel.innerHTML = `<div class="panel-heading"><div><p class="eyebrow">Operations</p><h2>Scheduled jobs</h2></div></div><div class="dashboard-jobs-list">${(system.jobs || []).map(job => `<div class="dashboard-list-item"><span class="status-dot ${job.enabled ? "running" : "idle"}"></span><span><strong>${escapeHtml(job.name)}</strong><small>${job.enabled ? `Active · ${escapeHtml(job.schedule)}` : "Disabled"}</small></span></div>`).join("")}</div>`; }
-function updateDashboardUptime(seconds) { const started = window.__dashboardStartedAt || (window.__dashboardStartedAt = Date.now() - Number(seconds || 0) * 1000); const target = document.querySelector("#system-uptime"); if (!target) return; const elapsed = Math.max(0, Math.floor((Date.now() - started) / 1000)); target.textContent = formatDuration(elapsed); }
 // Dashboard tiles share one baseline accent (green) and switch to the existing
 // --warning / --danger tokens when the thing they count is actually in trouble --
 // the same mechanism the "Needs attention" chip already used.
@@ -214,7 +213,6 @@ function renderDashboard() {
   $("#upstream-health-dot").className = `status-dot ${!upstreams.total ? "inactive" : upstreams.unhealthy > 0 ? "error" : "running"}`;
   $("#upstream-health-copy").textContent = !upstreams.total ? "No proxy hosts configured" : `${upstreams.healthy} of ${upstreams.total} healthy`;
   $("#health-checked").innerHTML = `<span class="live-dot" id="health-live-dot"></span>Last checked ${formatTime(data.checkedAt)}`;
-  updateDashboardUptime(data.system.uptimeSeconds);
   // Memory/Data/Storage/Version/Database/Public IP moved to the Administration > System tab's
   // Version panel -- the Dashboard's own Runtime/System panel is now the shared hero component
   // (see renderHeroPanel/refreshDashboardHero), which reads real container-scoped CPU/memory/
@@ -228,7 +226,6 @@ function renderDashboard() {
   $("#activity-list").innerHTML = data.activity.length ? data.activity.slice(0, 5).map(item => `<div class="activity-tile"><span class="activity-mark ${item.status === "error" ? "bad" : item.status === "warning" ? "warn" : ""}">${item.status === "error" || item.status === "warning" ? "!" : "✓"}</span><span class="activity-copy"><strong>${escapeHtml(item.message)}</strong><small title="${escapeHtml(formatTime(item.at))}">${escapeHtml(formatRelativeTime(item.at))}</small></span></div>`).join("") : '<p class="quiet-state">No recent activity.</p>';
 }
 
-setInterval(() => { if (!document.querySelector("#dashboard-view.hidden")) updateDashboardUptime(); }, 1000);
 
 
 // --- Card rendering helpers (icons, permissions) -----------------------------------
@@ -550,17 +547,20 @@ async function refreshDashboard() {
   try { state.dashboard = await api("/api/dashboard"); renderDashboard(); }
   finally { button.disabled = false; button.classList.remove("spinning"); }
 }
-// Populates the Dashboard's hero panel (CPU/memory/swap/disk/network -- Throughput is skipped
-// here since the Dashboard already has its own live-requests chip, and Uptime is handled by the
-// existing updateDashboardUptime() ticker rather than this endpoint) directly from
+// Populates the Dashboard's hero panel (CPU/memory/swap/disk/network/uptime) directly from
 // /api/system/health, the same call and the same renderHeroPanel() the Administration > System
 // tab's hero uses, so the two can never show different numbers for the same live stat again.
+// Uptime uses sixthSlot: "uptime" here (the System tab uses the default "throughput" slot instead,
+// since the Dashboard already has its own live-requests chip elsewhere -- see below). There's no
+// separate ticker or anchor for Uptime anymore: formatDuration() only ever shows minute-level
+// granularity, so refreshing it on this same 7s poll as everything else is all the precision the
+// display needs, and it removes a whole class of ticker/anchor race-condition bugs for free.
 async function refreshDashboardHero() {
   try {
     const health = await api("/api/system/health");
-    window.renderHeroPanel?.("dashboard-hero", health, { includeThroughput: false });
+    window.renderHeroPanel?.("dashboard-hero", health, { sixthSlot: "uptime" });
     // /api/system/health already computes throughput.liveRequests (the hero just doesn't display
-    // it here, since the Dashboard shows it in its own chip instead -- see includeThroughput above).
+    // it here, since the Dashboard shows it in its own chip instead -- see sixthSlot above).
     // Reuse that number to keep the chip on the same 7s cadence as the hero, instead of leaving it
     // on the separate 30s refreshDashboard() timer, which was the actual bug being reported here.
     const throughputTotal = $("#dash-throughput-total"); if (throughputTotal && health.throughput) throughputTotal.textContent = health.throughput.liveRequests ?? 0;

src/public/features.js

@@ -595,8 +595,12 @@ function setHeroStat(prefix, key, { value, percent, detail, tone } = {}) {
 // isn't available (e.g. no cgroup v2, no readable network interfaces, swap disabled on the host).
 // Throughput is System-tab-only -- the Dashboard already shows live requests/min in its own chip,
 // so `includeThroughput: false` there skips it rather than showing the same number twice.
-function renderHeroPanel(prefix, health, { includeThroughput } = { includeThroughput: true }) {
-  const keys = includeThroughput ? ["cpu", "memory", "swap", "disk", "network", "throughput"] : ["cpu", "memory", "swap", "disk", "network"];
+function renderHeroPanel(prefix, health, { sixthSlot = "throughput" } = {}) {
+  // sixthSlot picks what the panel's sixth stat is: "throughput" (Administration > System, since
+  // that page has no other requests/min display) or "uptime" (the Dashboard, which already has
+  // its own Throughput chip elsewhere -- showing it twice added nothing). Both come straight off
+  // the same /api/system/health poll as everything else here, no separate ticker or anchor.
+  const keys = ["cpu", "memory", "swap", "disk", "network", sixthSlot];
   if (!document.querySelector(`#${prefix}-${keys[0]}-value`)) return;
   if (!health) { keys.forEach(key => setHeroStat(prefix, key, { value: "\u2014", detail: "Unavailable" })); return; }
   const tone = percent => percent >= 90 ? "critical" : percent >= 75 ? "warning" : "";
@@ -622,7 +626,8 @@ function renderHeroPanel(prefix, health, { includeThroughput } = { includeThroug
   else setHeroStat(prefix, "disk", { value: "\u2014", detail: "Disk stats unavailable" });
   if (health.network) setHeroStat(prefix, "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(prefix, "network", { value: "\u2014", detail: "Sampling\u2026" });
-  if (includeThroughput) setHeroStat(prefix, "throughput", { value: String(health.throughput?.liveRequests ?? 0), percent: 0, detail: "requests in the last minute" });
+  if (sixthSlot === "throughput") setHeroStat(prefix, "throughput", { value: String(health.throughput?.liveRequests ?? 0), percent: 0, detail: "requests in the last minute" });
+  else if (sixthSlot === "uptime") setHeroStat(prefix, "uptime", Number.isFinite(health.uptimeSeconds) ? { value: formatDuration(health.uptimeSeconds), detail: "Since last restart" } : { value: "\u2014", detail: "Unavailable" });
 }
 // --- System tab: environment/integration status, storage, scheduled jobs, sync, restart --------
 function renderSystemPanel() {
@@ -686,11 +691,19 @@ function renderSystemPanel() {
     if (!state.systemHealthTimer) state.systemHealthTimer = setInterval(() => {
       const systemPanel = document.querySelector('[data-admin-panel="system"]');
       if (state.view !== "administration" || !systemPanel || systemPanel.classList.contains("hidden")) return;
-      api("/api/system/health").then(health => renderHeroPanel("system-hero", health, { includeThroughput: true })).catch(() => {});
+      api("/api/system/health").then(health => { renderHeroPanel("system-hero", health); updateSystemVersionUptime(health); }).catch(() => {});
     }, 7000);
   }
   renderSystemStatus(panel);
 }
+// Updates just the Version panel's Uptime figure from a fresh /api/system/health payload --
+// kept separate from the rest of renderSystemStatus() so it can be called on the fast 7s hero
+// poll without re-rendering (or re-fetching) everything else in that panel.
+function updateSystemVersionUptime(health) {
+  const el = document.querySelector("#system-version-uptime");
+  if (!el) return;
+  el.textContent = Number.isFinite(health?.uptimeSeconds) ? formatDuration(health.uptimeSeconds) : "Unavailable";
+}
 async function renderSystemStatus(panel) {
   panel = panel || document.querySelector('[data-admin-panel="system"]');
   if (!panel) return;
@@ -710,16 +723,19 @@ 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) {
-    // Uptime, Caddy version, Database status, and Public IP used to live on the Dashboard's
-    // Runtime/System panel -- that panel is now the shared hero component (CPU/memory/swap/disk/
-    // network), so this operational metadata moved here instead, reusing the same system.* fields
-    // from the global dashboard snapshot rather than a separate fetch.
+    // Caddy version, Database status, and Public IP used to live on the Dashboard's Runtime/System
+    // panel -- that panel is now the shared hero component (CPU/memory/swap/disk/network), so this
+    // operational metadata moved here instead, reusing the same system.* fields from the global
+    // dashboard snapshot rather than a separate fetch. Uptime is the one exception: it's wrapped in
+    // its own #system-version-uptime span and kept current by updateSystemVersionUptime(), called
+    // from the same 7-second /api/system/health poll that drives the hero panel above, instead of
+    // only refreshing on the slower ~30s dashboard snapshot like the rest of this block.
     const sys = state.dashboard?.system || {};
     const uptime = Number.isFinite(sys.uptimeSeconds) ? formatDuration(sys.uptimeSeconds) : "Unavailable";
     const database = sys.databaseEngine ? `${extendedEscape(sys.databaseEngine)} \u00b7 ${extendedEscape(sys.databaseStatus || "unknown")} \u00b7 ${formatBytes(sys.databaseBytes)}` : "Unavailable";
     const publicIp = sys.publicIp || (sys.publicIpError ? "Unavailable" : "Checking\u2026");
     const publicIpDetail = sys.publicIpError ? `check failed \u00b7 ${extendedEscape(sys.publicIpError)}` : sys.publicIpCheckedAt ? `checked ${extendedEscape(formatTime(sys.publicIpCheckedAt))}` : "not yet checked";
-    version.innerHTML = `Site Gateway v${extendedEscape(state.config?.version || "unknown")} \u00b7 Caddy ${extendedEscape(sys.caddyVersion || "unknown")}<br>Uptime: ${uptime} \u00b7 Database: ${database} \u00b7 Public IP: ${extendedEscape(publicIp)} (${publicIpDetail})<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>`;
+    version.innerHTML = `Site Gateway v${extendedEscape(state.config?.version || "unknown")} \u00b7 Caddy ${extendedEscape(sys.caddyVersion || "unknown")}<br>Uptime: <span id="system-version-uptime">${uptime}</span> \u00b7 Database: ${database} \u00b7 Public IP: ${extendedEscape(publicIp)} (${publicIpDetail})<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, health] = await Promise.all([
@@ -728,7 +744,8 @@ async function renderSystemStatus(panel) {
       api("/api/system/restart-policy"),
       api("/api/system/health").catch(() => null),
     ]);
-    renderHeroPanel("system-hero", health, { includeThroughput: true });
+    renderHeroPanel("system-hero", health);
+    if (health) updateSystemVersionUptime(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/server.js

@@ -222,6 +222,10 @@ async function systemHealthSnapshot() {
     })() : null,
     network: networkRate,
     throughput: { liveRequests: storage.performanceLiveCount(60) },
+    // Same source dashboardSnapshot() already uses for its own uptime figure -- included here too
+    // so the Dashboard's hero panel can show Uptime as a plain value on the same 7s poll as every
+    // other hero stat, instead of a separate client-side ticker anchored against a one-time fetch.
+    uptimeSeconds: Math.floor(process.uptime()),
   };
 }