Add missing BACKUP_PASSWORD status row to the System tab (v0.16.1)

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

ROADMAP.md

@@ -34,6 +34,23 @@
 - The Top Paths popout now states it's showing the top 10, matching the existing server-side cap.
 - The Runtime/System dashboard panel's top accent bar changed from a stray `--blue` token to `--green`, matching the default accent already used by every other dashboard tile.
 
+`v0.15.2` fixed regressions introduced by `v0.15.1` and one deeper architectural bug:
+
+- The dashboard attention tile's inline "Resync now" button (added in `v0.15.1`) silently did nothing — a script-generation guard meant to avoid double-adding its click handler matched on markup text that had already been introduced by the same change, so the handler was never actually attached. Fixed and verified by checking for the handler's functional code rather than just a string match.
+- The Needs Attention dashboard chip and the attention-tile detail rows used different colors (amber vs. red) for the same condition; aligned to red.
+- Configuration drift kept re-reporting immediately after a successful resync. The `v0.15.1` fix (order-independent JSON comparison) was necessary but not sufficient — the deeper issue was comparing a live running config against a freshly re-adapted Caddyfile, which will almost never match because Caddy fills in runtime defaults (automation policy, TLS management state) that never appear in a bare adapted config. Rewrote drift detection to compare two live-config snapshots against a captured baseline instead, recapturing that baseline after every successful sync.
+- Removed the redundant "Resync now" callout from the Gateway Defaults page, superseded by the dashboard's inline button.
+
+`v0.16.0` adds the System tab and closes out a round of fixes found during live use of `v0.15.x`:
+
+- **New System tab** (Administration, first tab) — a read-only operations/diagnostics page: environment and integration status (Docker socket, `BACKUP_PASSWORD`), security status (default-credential and `ACME_EMAIL` detection), persistent gateway sync status with a Resync control, a scheduled-jobs table, per-folder storage usage, version/runtime info, and Reload/Restart controls. Restart is only enabled when the Docker socket is mounted and the container's own restart policy (checked via the Docker Engine API) is `always`, `unless-stopped`, or `on-failure`. The only interactive elements on the page are the Docker container-picker toggle (moved here from Gateway Defaults, which no longer carries integration/environment content) and the action buttons — everything else is status.
+- Fixed a real correctness bug: `PATCH /api/settings` called `syncCaddy()` unconditionally before saving anything, for every settings change — including backups, certificate-health, and log-retention changes that have nothing to do with the Caddy config. An unrelated Caddy resync failure could silently discard and revert a just-saved change before it was ever persisted. `syncCaddy()` now only runs when a `defaultSite` change is part of the request; everything else saves unconditionally.
+- The "Encrypt scheduled backups" toggle's helper text now positively confirms when `BACKUP_PASSWORD` is configured, instead of showing the same generic instructional copy regardless of whether it's set.
+- `app.js`/`features.js`/`select-enhance.js` are now served with `Cache-Control: no-cache`, so browsers always revalidate instead of potentially serving a stale cached copy despite the version query string.
+- Native `<select>` popups across the app are now replaced with a custom-drawn dark-themed listbox (the underlying native select is kept for form/value/event compatibility) — the `color-scheme` CSS hint shipped in `v0.15.1` turned out not to reliably theme native dropdown popups across real browsers/engines.
+
+`v0.16.1` is a fix for a gap in `v0.16.0`'s own System tab: the Environment & Integrations section never actually rendered a `BACKUP_PASSWORD` status row (only the Docker socket status was there), despite the backend already exposing that data via `/api/config`. Fixed.
+
 ## Product direction
 
 Site Gateway stays simpler than a general-purpose proxy manager: one dashboard, clear health reporting, and guided setup instead of exposing raw server configuration. **Caddy** remains the managed gateway — Site Gateway stores a small route model and generates/validates Caddy configuration rather than reimplementing certificate and proxy behavior itself.
@@ -83,6 +100,8 @@ Site Gateway stays simpler than a general-purpose proxy manager: one dashboard,
 - A durable, database-backed history of every backup, restore, and deletion attempt, shown as a human-readable timeline.
 - An opt-in Docker container picker (gated on the Docker socket being mounted and readable) for choosing Proxy/Streaming targets from the host’s running containers instead of typing them by hand.
 
+- A System tab (Administration) surfacing environment/integration status, security status, storage usage, scheduled jobs, gateway sync status, and reload/restart controls in one read-only operations page.
+
 ### Brand and docs
 
 - Current icon and wordmark (v0.11.99) used consistently across the login screen, sidebar, themed default pages, and this README.

package.json

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

src/public/app.js

@@ -189,7 +189,7 @@ function renderDashboard() {
   $("#dash-attention-total").textContent = data.attention.length;
   $("#dash-attention-detail").textContent = data.attention.length ? `${data.attention.length} item${data.attention.length === 1 ? "" : "s"} to review` : "No current issues";
   applyTileAccents(data);
-  $("#dash-attention-chip").classList.toggle("accent-warning", data.attention.length > 0);
+  $("#dash-attention-chip").classList.toggle("accent-danger", data.attention.length > 0);
   $("#dash-attention-chip").classList.toggle("accent-green", data.attention.length === 0);
   $("#dash-attention-icon").textContent = data.attention.length > 0 ? "!" : "✓";
   $("#dash-throughput-total").textContent = data.throughput?.liveRequests ?? 0;
@@ -602,6 +602,16 @@ $("#logout").addEventListener("click", async () => { await fetch("/api/logout",
 $("#check-health").addEventListener("click", async event => { const button = event.currentTarget; button.disabled = true; button.textContent = "Checking…"; try { const result = await api("/api/health/check", { method:"POST" }); state.dashboard = result.dashboard; state.certificates = result.certificates; state.readiness = { routes:result.readiness }; renderCertificates(); toast("Certificate and domain checks completed."); } catch (error) { toast(error.message, "error"); } finally { button.disabled = false; button.textContent = "Run certificate check"; } });
 $("#download-support")?.addEventListener("click", () => { location.href = "/api/support-report"; });
 $("#attention-list").addEventListener("click", event => { const target = event.target.closest("[data-issue-target]")?.dataset.issueTarget; if (target) { const [view, adminTab] = target.split("/"); state.view = view; if (view === "administration" && adminTab) state.adminTab = adminTab; render(); loadFeatureView().catch(error => toast(error.message, "error")); } });
+$("#attention-list").addEventListener("click", async event => {
+  const button = event.target.closest("[data-drift-resync]");
+  if (!button) return;
+  button.disabled = true; button.textContent = "Resyncing…";
+  try {
+    await api("/api/gateway/resync", { method: "POST" });
+    toast("Gateway configuration re-synced.");
+    await refresh();
+  } catch (error) { toast(error.message, "error"); button.disabled = false; button.textContent = "Resync now"; }
+});
 
 // --- Primary navigation (sidebar view switching) -------------------------------------------
 function closeMenus() { document.querySelectorAll(".menu-open").forEach(card => { card.classList.remove("menu-open"); card.querySelector(".menu-button")?.setAttribute("aria-expanded", "false"); }); }

src/public/features.js

@@ -79,7 +79,7 @@ function renderBackups() {
   const completeBackups = state.backups.filter(item => item.type === "complete"), configBackups = state.backups.filter(item => item.type === "configuration");
   const summaryEl = document.querySelector("#backup-summary");
   if (summaryEl) summaryEl.textContent = state.backups.length ? `${completeBackups.length} Complete (${formatBytes(completeBackups.reduce((sum, item) => sum + item.size, 0))}), ${configBackups.length} Configuration only (${formatBytes(configBackups.reduce((sum, item) => sum + item.size, 0))}).` : "";
-  document.querySelector("#backup-list").innerHTML = state.backups.length ? state.backups.map(item => `<article class="data-row backup-row" data-backup="${extendedEscape(item.filename)}"><span class="status-dot ${item.valid ? "running" : "error"}"></span><div><strong>${extendedEscape(item.filename)}</strong><small>${formatTime(item.createdAt)}</small></div><div><span class="chip type-${extendedEscape(item.type)}">${backupTypeLabel(item.type)}</span><small>Site Gateway ${extendedEscape(item.appVersion)}</small></div><div><strong>${formatBytes(item.size)}</strong><small>${item.valid ? "Verified manifest" : "Unreadable manifest"}</small></div><div class="row-actions"><a class="button secondary" href="/api/backups/${encodeURIComponent(item.filename)}/download">Download</a><button class="button secondary" data-backup-action="restore">Restore</button><button class="button secondary danger-text" data-backup-action="delete">Delete</button></div></article>`).join("") : '<p class="quiet-state padded">No stored backups yet.</p>';
+  document.querySelector("#backup-list").innerHTML = state.backups.length ? state.backups.map(item => `<article class="data-row backup-row" data-backup="${extendedEscape(item.filename)}"><span class="status-dot ${item.valid ? "running" : "error"}"></span><div><strong title="${extendedEscape(item.filename)}">${backupTypeLabel(item.type)} backup — ${formatTime(item.createdAt)}</strong><small>${formatBytes(item.size)}</small></div><div><span class="chip type-${extendedEscape(item.type)}">${backupTypeLabel(item.type)}</span><small>Site Gateway ${extendedEscape(item.appVersion)}</small></div><div><strong>${item.valid ? "Verified" : "Unreadable"}</strong><small>${item.valid ? "Manifest checks out" : "Manifest could not be read"}</small></div><div class="row-actions"><a class="button secondary" href="/api/backups/${encodeURIComponent(item.filename)}/download">Download</a><button class="button secondary" data-backup-action="restore">Restore</button><button class="button secondary danger-text" data-backup-action="delete">Delete</button></div></article>`).join("") : '<p class="quiet-state padded">No stored backups yet.</p>';
 }
 // Toggle the "configuration only" warning banner whenever scheduling or the
 // backup type changes.
@@ -275,7 +275,7 @@ document.addEventListener("click", event => { if (event.target.closest(".create-
 function decorateAccessToggles() { document.querySelectorAll("#access-list [data-access-id]").forEach(card => { const item = state.accessLists.find(value => value.id === card.dataset.accessId); const footer = card.querySelector(".card-footer"); if (!footer || !item) return; card.querySelectorAll(".menu [data-access-action=toggle]").forEach(button => button.remove()); if (footer.querySelector("[data-access-action=toggle]")) return; let actions = footer.querySelector(".card-actions"); if (!actions) { actions = document.createElement("div"); actions.className = "card-actions"; footer.append(actions); } const toggle = document.createElement("button"); toggle.className = "toggle " + (item.enabled !== false ? "on" : ""); toggle.dataset.accessAction = "toggle"; toggle.setAttribute("aria-label", (item.enabled !== false ? "Disable" : "Enable") + " Access List"); toggle.innerHTML = "<span></span>"; actions.append(toggle); }); }
 function decorateGroupCards() { document.querySelectorAll('[data-admin-panel="groups"] .group-card').forEach(card => { const group = state.groups.find(value => value.id === card.querySelector("[data-group-action]")?.dataset.groupId); if (!group) return; const icon = card.querySelector(".site-icon"); if (icon && icon.textContent.trim() === "GR") icon.innerHTML = featureIcon(group, "GR"); const menu = card.querySelector(".menu"); if (menu && !menu.querySelector("[data-group-action=icon]")) { const button = document.createElement("button"); button.dataset.groupAction = "icon"; button.dataset.groupId = group.id; button.textContent = "Change icon"; menu.prepend(button); } }); }
 document.addEventListener("click", event => { const button = event.target.closest("[data-group-action=icon]"); if (!button) return; event.preventDefault(); event.stopImmediatePropagation(); openIconPicker("groups", button.dataset.groupId); }, true);
-function normalizeAdminTabOrder() { const tabs = document.querySelector(".admin-tabs"); if (!tabs) return; const order = ["users","groups","defaults","audit","backups","retention","api","danger"]; order.forEach((name, index) => { const button = tabs.querySelector(`[data-admin-tab="${name}"]`); if (button) { if (name === "retention") button.textContent = "Logs & Retention"; tabs.append(button); } }); }
+function normalizeAdminTabOrder() { const tabs = document.querySelector(".admin-tabs"); if (!tabs) return; const order = ["system","users","groups","defaults","audit","backups","retention","api","danger"]; order.forEach((name, index) => { const button = tabs.querySelector(`[data-admin-tab="${name}"]`); if (button) { if (name === "retention") button.textContent = "Logs & Retention"; tabs.append(button); } }); }
 document.addEventListener("click", event => { if (event.target.closest(".admin-tabs")) setTimeout(normalizeAdminTabOrder, 0); });
 
 // --- Backup encryption password field: placeholder/visibility polish -------------
@@ -290,7 +290,7 @@ function renderEncryptionToggle() {
   const available = Boolean(state.config && state.config.backup && state.config.backup.encryptionAvailable);
   const savedEncrypt = Boolean(state.settings && state.settings.backups && state.settings.backups.encrypt);
   encryptionToggle.className = "encryption-toggle";
-  let message = "Uses the container\u2019s <code>BACKUP_PASSWORD</code> value. Enable only after configuring that value.";
+  let message = "<code>BACKUP_PASSWORD</code> is configured \u2014 scheduled backups can be encrypted.";
   if (!available && savedEncrypt) message = "This is enabled but <code>BACKUP_PASSWORD</code> is no longer configured \u2014 encrypted scheduled backups will fail until it\u2019s set again.";
   else if (!available) message = "<code>BACKUP_PASSWORD</code> not configured \u2014 set it in the container\u2019s environment to enable encrypted scheduled backups.";
   encryptionToggle.innerHTML = '<span class="field-label">Encrypt scheduled backups</span><span class="encryption-toggle-box"><input name="encrypt" type="checkbox"' + (available ? "" : " disabled") + (savedEncrypt ? " checked" : "") + '><span' + (!available ? ' class="warning-text"' : '') + '>' + message + '</span></span>';
@@ -326,27 +326,6 @@ document.addEventListener("click", async event => { const button = event.target.
 document.addEventListener("click", event => { const button = event.target.closest('[data-retention-action="download"]'); if (!button) return; window.location.href = "/api/logs/download"; });
 document.addEventListener("click", async event => { const button = event.target.closest('[data-retention-action="prune"]'); if (!button) return; event.preventDefault(); event.stopImmediatePropagation(); try { const preview = await api("/api/logs/prune/preview"); const counts = preview.counts || {}; const total = Object.values(counts).reduce((sum, value) => sum + value, 0); let dialog = document.querySelector("#retention-prune-dialog"); if (!dialog) { dialog = document.createElement("dialog"); dialog.id = "retention-prune-dialog"; document.body.append(dialog); } dialog.innerHTML = `<form method="dialog" class="dialog-card compact"><div class="dialog-heading"><div><p class="eyebrow">Log Retention</p><h2>Confirm pruning</h2></div></div><p class="muted">This will remove records older than your saved retention periods.</p><p class="muted">Access: <strong>${counts.access || 0}</strong> · Activity: <strong>${counts.activity || 0}</strong> · Certificates: <strong>${counts.certificate || 0}</strong> · Security: <strong>${counts.security || 0}</strong> · Audit: <strong>${counts.audit || 0}</strong></p><div class="dialog-actions"><button value="cancel" class="button secondary">Cancel</button><button value="confirm" class="button primary">Confirm pruning</button></div></form>`; dialog.showModal(); const result = await new Promise(resolve => dialog.addEventListener("close", () => resolve(dialog.returnValue), { once: true })); if (result !== "confirm") return; const response = await api("/api/logs/prune", { method: "POST" }); toast(`Pruning completed. ${Object.values(response.counts || {}).reduce((sum, value) => sum + value, 0)} record${total === 1 ? "" : "s"} removed.`); } catch (error) { toast(error.message); } }, true);
 
-// --- Config drift: show a resync callout in Administration > Default site when drift is detected --------
-function renderConfigDriftCallout() {
-  const callout = document.querySelector("#config-drift-callout");
-  if (!callout) return;
-  const drift = (state.dashboard?.attention || []).some(item => item.kind === "drift");
-  callout.hidden = !drift;
-}
-setInterval(renderConfigDriftCallout, 1000);
-document.addEventListener("click", async event => {
-  const button = event.target.closest("#config-resync");
-  if (!button) return;
-  button.disabled = true;
-  try {
-    await api("/api/gateway/resync", { method: "POST" });
-    toast("Gateway configuration re-synced.");
-    await refresh();
-    renderConfigDriftCallout();
-  } catch (error) { toast(error.message); } finally { button.disabled = false; }
-});
-
-
 // ============================================================================================
 // v0.15.0 additions: API access tokens, backup history, and the Docker container picker.
 // ============================================================================================
@@ -467,7 +446,7 @@ async function renderBackupHistory() {
 // saved value, so the integration can never be switched on without its prerequisite.
 function renderDockerPanel() {
   if (state.user?.role !== "administrator") return;
-  const panel = document.querySelector('[data-admin-panel="defaults"]'); if (!panel) return;
+  const panel = document.querySelector('[data-admin-panel="system"] .system-integrations'); if (!panel) return;
   const socketMounted = state.config?.docker?.socketMounted === true;
   const enabled = socketMounted && (state.settings?.dockerIntegration?.enabled === true || state.config?.docker?.enabled === true);
   let section = panel.querySelector(".docker-integration-section");
@@ -545,11 +524,89 @@ document.addEventListener("click", async event => {
 });
 
 
+// --- System tab: environment/integration status, storage, scheduled jobs, sync, restart --------
+function renderSystemPanel() {
+  if (state.user?.role !== "administrator") return;
+  const tabs = document.querySelector(".admin-tabs"), users = document.querySelector('[data-admin-panel="users"]');
+  if (!tabs || !users) return;
+  let tab = tabs.querySelector('[data-admin-tab="system"]');
+  if (!tab) { tab = document.createElement("button"); tab.dataset.adminTab = "system"; tab.textContent = "System"; tabs.insertBefore(tab, tabs.firstChild); }
+  let panel = document.querySelector('[data-admin-panel="system"]');
+  if (!panel) { panel = document.createElement("section"); panel.dataset.adminPanel = "system"; panel.className = "settings-panel hidden"; users.parentElement.insertBefore(panel, users); }
+  if (!panel.dataset.ready) {
+    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="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">Gateway</p><h2>Sync</h2></div><button type="button" id="system-resync" class="button secondary">Resync now</button></div><p id="system-sync-status" class="muted"></p></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="dashboard-jobs-list"></div></div>',
+      '<div class="dashboard-panel"><div class="panel-heading"><div><p class="eyebrow">Storage</p><h2>Disk usage</h2></div></div><div id="system-storage" class="health-grid"></div></div>',
+      '<div class="dashboard-panel"><div class="panel-heading"><div><p class="eyebrow">Build</p><h2>Version</h2></div></div><div id="system-version" class="muted"></div></div>',
+      '<div class="dashboard-panel"><div class="panel-heading"><div><p class="eyebrow">Gateway</p><h2>Reload & restart</h2></div></div><p class="muted">Reloading re-applies the current configuration to Caddy with no downtime. Restarting stops and restarts the whole application \u2014 only available when a restart policy is set on the container.</p><div class="row-actions"><button type="button" id="system-reload" class="button secondary">Reload gateway config</button><button type="button" id="system-restart" class="button secondary danger-text" disabled>Restart application</button></div><p id="system-restart-status" class="muted"></p></div>',
+    ].join("");
+    panel.querySelector("#system-resync").addEventListener("click", async event => {
+      const button = event.currentTarget; button.disabled = true; const original = button.textContent; button.textContent = "Resyncing\u2026";
+      try { await api("/api/gateway/resync", { method: "POST" }); toast("Gateway configuration re-synced."); await refresh(); }
+      catch (error) { toast(error.message, "error"); }
+      finally { button.disabled = false; button.textContent = original; }
+    });
+    panel.querySelector("#system-reload").addEventListener("click", async event => {
+      const button = event.currentTarget; button.disabled = true; const original = button.textContent; button.textContent = "Reloading\u2026";
+      try { await api("/api/system/reload", { method: "POST" }); toast("Gateway configuration reloaded."); await refresh(); }
+      catch (error) { toast(error.message, "error"); }
+      finally { button.disabled = false; button.textContent = original; }
+    });
+    panel.querySelector("#system-restart").addEventListener("click", async event => {
+      if (!await themedConfirm("Restart Site Gateway?", "The application will stop and restart. This takes a few seconds and briefly interrupts hosted sites and the dashboard.", "Restart")) return;
+      const button = event.currentTarget; button.disabled = true; button.textContent = "Restarting\u2026";
+      try { await api("/api/system/restart", { method: "POST" }); toast("Restarting \u2014 this dashboard will be unavailable briefly."); }
+      catch (error) { toast(error.message, "error"); button.disabled = false; button.textContent = "Restart application"; }
+    });
+  }
+  renderSystemStatus(panel);
+}
+async function renderSystemStatus(panel) {
+  panel = panel || document.querySelector('[data-admin-panel="system"]');
+  if (!panel || panel.classList.contains("hidden")) return;
+  const security = document.querySelector("#system-security"), storage = document.querySelector("#system-storage"),
+    version = document.querySelector("#system-version"), jobs = document.querySelector("#system-jobs"),
+    syncStatus = document.querySelector("#system-sync-status"), restartButton = document.querySelector("#system-restart"),
+    restartStatus = document.querySelector("#system-restart-status");
+  if (jobs) jobs.innerHTML = (state.dashboard?.jobs || []).map(job => `<div class="dashboard-list-item"><span class="status-dot ${job.enabled ? "running" : "idle"}"></span><span><strong>${extendedEscape(job.name)}</strong><small>${job.enabled ? `Active \u00b7 ${extendedEscape(job.schedule)}` : "Disabled"}</small></span></div>`).join("") || '<p class="quiet-state">No scheduled jobs reported.</p>';
+  const envStatus = document.querySelector("#system-env-status");
+  if (envStatus) {
+    const encryptionAvailable = Boolean(state.config?.backup?.encryptionAvailable);
+    envStatus.innerHTML = `<div class="health-tile"><span class="status-dot ${encryptionAvailable ? "running" : "idle"}"></span><span class="health-tile-copy"><strong>BACKUP_PASSWORD</strong><small>${encryptionAvailable ? "Configured \u2014 scheduled backups can be encrypted." : "Not set \u2014 configure it in the container\u2019s environment to enable encrypted scheduled backups."}</small></span></div>`;
+  }
+  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>Data directory: <code>${extendedEscape(state.config?.storage?.databasePath ? state.config.storage.databasePath.replace(/\/database\/.*/, "") : "/data")}</code> &middot; Admin port: <code>${extendedEscape(String(state.config?.adminPort ?? ""))}</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([
+      api("/api/system/security"),
+      api("/api/system/storage"),
+      api("/api/system/restart-policy"),
+    ]);
+    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." },
+      { ok: sec.acmeEmailConfigured, label: "ACME_EMAIL", detail: sec.acmeEmailConfigured ? "Configured." : "Not set \u2014 certificate issuance will proceed without a registration contact." },
+    ].map(row => `<div class="health-tile"><span class="status-dot ${row.ok ? "running" : "idle"}"></span><span class="health-tile-copy"><strong>${row.label}</strong><small>${row.detail}</small></span></div>`).join("");
+    if (storage) {
+      const rows = Object.entries(store.breakdown || {}).map(([key, bytes]) => `<div class="health-tile"><span class="status-dot running"></span><span class="health-tile-copy"><strong>${key[0].toUpperCase()}${key.slice(1)}</strong><small>${formatBytes(bytes)}</small></span></div>`).join("");
+      const capacity = store.capacity ? `<div class="health-tile"><span class="status-dot ${store.capacity.availableBytes / store.capacity.totalBytes > 0.1 ? "running" : "idle"}"></span><span class="health-tile-copy"><strong>Disk</strong><small>${formatBytes(store.capacity.availableBytes)} free of ${formatBytes(store.capacity.totalBytes)}</small></span></div>` : "";
+      storage.innerHTML = rows + capacity || '<p class="quiet-state">Storage usage unavailable.</p>';
+    }
+    if (restartButton) { restartButton.disabled = !policy.restartAvailable; if (restartStatus) restartStatus.textContent = policy.reason || (policy.policyName ? `Restart policy: ${policy.policyName}.` : ""); }
+  } catch { /* Status widgets keep their last-known values if a refresh call fails. */ }
+}
+
 // --- Wire the new panels into the shared refresh entry point ----------------------------------
 const baseRenderExtendedViews = window.renderExtendedViews;
 window.renderExtendedViews = function () {
   baseRenderExtendedViews();
   renderApiTokensPanel();
+  renderSystemPanel();
   renderDockerPanel();
   decorateContainerPickers();
   renderBackupHistory();

src/public/select-enhance.js

@@ -0,0 +1,121 @@
+// ============================================================================================
+// select-enhance.js -- replaces native <select> popups with a custom-drawn, dark-themed
+// listbox (Task #20). The `color-scheme` CSS hint does not reliably theme native select
+// popups across real browsers/engines, so this draws its own. The underlying native <select>
+// is kept in the DOM, fully intact for its `name`/`value`/form submission and for every
+// existing piece of code that reads or sets `form.elements[name].value` or listens for a
+// native "change" event -- none of that code needed to change. Only direct user interaction
+// with the native popup is replaced.
+// ============================================================================================
+
+function enhanceSelects() {
+  document.querySelectorAll("select").forEach(select => {
+    if (select.dataset.enhanced) return;
+    if (select.closest(".custom-select")) return;
+    select.dataset.enhanced = "1";
+
+    const wrap = document.createElement("span");
+    wrap.className = "custom-select";
+    select.replaceWith(wrap);
+    wrap.append(select);
+
+    // The native element stays for value/name/form/event-listener compatibility, but is
+    // removed from the tab order and made unclickable -- the trigger below is what users
+    // and assistive tech actually interact with.
+    select.tabIndex = -1;
+    select.setAttribute("aria-hidden", "true");
+
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "custom-select-trigger";
+    trigger.setAttribute("role", "combobox");
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    wrap.append(trigger);
+
+    const syncTriggerLabel = () => {
+      const option = select.options[select.selectedIndex];
+      trigger.textContent = option ? option.textContent : "";
+      trigger.disabled = select.disabled;
+    };
+    syncTriggerLabel();
+
+    let menu = null;
+    const closeMenu = () => {
+      if (!menu) return;
+      menu.remove();
+      menu = null;
+      trigger.setAttribute("aria-expanded", "false");
+    };
+    const commit = (option, index) => {
+      select.selectedIndex = index;
+      select.dispatchEvent(new Event("input", { bubbles: true }));
+      select.dispatchEvent(new Event("change", { bubbles: true }));
+      syncTriggerLabel();
+      closeMenu();
+      trigger.focus();
+    };
+    const openMenu = () => {
+      if (menu || select.disabled) return;
+      menu = document.createElement("div");
+      menu.className = "custom-select-menu";
+      menu.setAttribute("role", "listbox");
+      const rect = trigger.getBoundingClientRect();
+      menu.style.left = `${rect.left}px`;
+      menu.style.top = `${rect.bottom + 4}px`;
+      menu.style.width = `${rect.width}px`;
+      [...select.options].forEach((option, index) => {
+        const item = document.createElement("div");
+        item.className = "custom-select-option" + (index === select.selectedIndex ? " is-selected" : "") + (option.disabled ? " is-disabled" : "");
+        item.setAttribute("role", "option");
+        item.textContent = option.textContent;
+        if (option.disabled) item.setAttribute("aria-disabled", "true");
+        else item.addEventListener("click", () => commit(option, index));
+        menu.append(item);
+      });
+      // Dialogs render in the browser's top layer, which sits above ordinary DOM regardless
+      // of z-index -- a menu appended to <body> for a select inside a <dialog> would render
+      // beneath it. Appending into the dialog keeps the menu in the same stacking context.
+      (select.closest("dialog") || document.body).append(menu);
+      trigger.setAttribute("aria-expanded", "true");
+      const highlighted = () => menu?.querySelector(".is-highlighted") || menu?.querySelector(".is-selected") || menu?.firstElementChild;
+      menu.querySelector(".is-selected")?.classList.add("is-highlighted");
+      menu._moveHighlight = delta => {
+        const items = [...menu.querySelectorAll(".custom-select-option:not(.is-disabled)")];
+        if (!items.length) return;
+        const current = menu.querySelector(".is-highlighted");
+        let index = current ? items.indexOf(current) : -1;
+        index = (index + delta + items.length) % items.length;
+        menu.querySelectorAll(".is-highlighted").forEach(item => item.classList.remove("is-highlighted"));
+        items[index].classList.add("is-highlighted");
+        items[index].scrollIntoView({ block: "nearest" });
+      };
+      menu._chooseHighlighted = () => {
+        const item = highlighted();
+        if (!item) return;
+        const index = [...menu.children].indexOf(item);
+        if (index >= 0 && !select.options[index]?.disabled) commit(select.options[index], index);
+      };
+    };
+
+    trigger.addEventListener("click", () => (menu ? closeMenu() : openMenu()));
+    trigger.addEventListener("keydown", event => {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) event.preventDefault();
+      if (event.key === "ArrowDown") { if (!menu) openMenu(); else menu._moveHighlight(1); }
+      else if (event.key === "ArrowUp") { if (!menu) openMenu(); else menu._moveHighlight(-1); }
+      else if (event.key === "Enter" || event.key === " ") { if (!menu) openMenu(); else menu._chooseHighlighted(); }
+      else if (event.key === "Escape") closeMenu();
+      else if (event.key === "Tab") closeMenu();
+    });
+    document.addEventListener("click", event => { if (menu && !wrap.contains(event.target) && !menu.contains(event.target)) closeMenu(); }, true);
+
+    wrap.__syncTriggerLabel = syncTriggerLabel;
+  });
+  // Keep every already-enhanced trigger's label in sync with code elsewhere that sets
+  // `select.value`/`select.selectedIndex` directly (e.g. renderBackups() populating the
+  // scheduled-backup form from saved settings) without going through the custom menu.
+  document.querySelectorAll(".custom-select").forEach(wrap => wrap.__syncTriggerLabel?.());
+}
+
+document.addEventListener("DOMContentLoaded", enhanceSelects);
+setInterval(enhanceSelects, 150);

src/public/styles.css

@@ -709,6 +709,7 @@ dialog{max-height:calc(100vh - 28px);overflow:auto}
 .inline-status{grid-column:1/-1;margin:0;color:var(--green);font-size:.8rem;font-weight:700}
 .inline-status.status-success{color:var(--green)}
 .inline-status.status-warning{color:var(--warning)}
+.muted.status-warning{color:var(--warning)}
 .encryption-grid{align-items:start}
 .encryption-toggle{align-items:flex-start;padding-top:28px}
 .encryption-toggle small{display:block;margin-top:5px;color:var(--muted);font-size:.72rem;line-height:1.4}
@@ -771,6 +772,22 @@ label.check-control:has(input[name="upstreamTlsInsecure"]){position:relative;hei
 label.check-control:has(input[name="upstreamTlsInsecure"]) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 label.check-control:has(input[name="upstreamTlsInsecure"]) small{position:absolute;left:0;top:calc(100% + 7px);width:100%;padding:0!important;white-space:normal}
 
+/* Custom-drawn select (Task #20): native <select> popups can't be reliably themed dark across
+   browsers, so this replaces the popup only -- the native select stays for value/form/event
+   compatibility, positioned invisibly beneath the trigger. */
+.custom-select{position:relative;display:block;width:100%;margin-top:7px}
+.custom-select select{position:absolute;inset:0;opacity:0;pointer-events:none;margin:0;width:100%;height:100%}
+.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3);background:var(--field-bg);color:var(--text);font:inherit;text-align:left;cursor:pointer}
+.custom-select-trigger::after{content:"";width:9px;height:9px;flex:0 0 auto;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px)}
+.custom-select-trigger:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.1)}
+.custom-select-trigger[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}
+.custom-select-trigger:disabled{opacity:.55;cursor:not-allowed}
+.custom-select-menu{position:fixed;z-index:2147483647;max-height:min(280px,40vh);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);box-shadow:var(--shadow);padding:4px}
+.custom-select-option{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;color:var(--text);font-size:.85rem}
+.custom-select-option:hover,.custom-select-option.is-highlighted{background:rgba(var(--panel-rgb),.6);background:var(--field-bg)}
+.custom-select-option.is-selected{color:var(--green)}
+.custom-select-option.is-disabled{color:var(--muted);cursor:not-allowed}
+
 /* Shared diagnostic lists: Certificates, Access Logs, Gateway Events, Audit */
 select{appearance:none!important;-webkit-appearance:none!important;background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:16px!important}
 #certificate-list,#readiness-list{max-height:min(52vh,620px);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-2xl);background:var(--panel)}

src/server.js

@@ -638,6 +638,10 @@ async function syncCaddy() {
     await execFileAsync("caddy", ["reload", "--config", caddyfilePath, "--adapter", "caddyfile"]);
     gatewayError = null;
     lastGatewayReload = new Date().toISOString();
+    try {
+      const liveAfterReload = await caddyAdminRequest({ method: "GET", path: "/config/" });
+      if (liveAfterReload.status === 200) lastKnownGoodCaddyConfig = JSON.parse(liveAfterReload.body);
+    } catch (error) { console.warn("Could not capture post-reload config baseline:", error.message); }
   } catch (error) {
     const rejectedReason = error.stderr || error.message;
     let rollbackSucceeded = false;
@@ -659,6 +663,7 @@ async function syncCaddy() {
 
 
 let configDrift = { checkedAt: null, drift: false, detail: null };
+let lastKnownGoodCaddyConfig = null;
 function caddyAdminRequest(options, body) {
   return new Promise((resolve, reject) => {
     const request = http.request({ host: "127.0.0.1", port: 2019, timeout: 5000, ...options }, response => {
@@ -682,28 +687,18 @@ function stableStringify(value) {
 async function checkConfigDrift() {
   const wasDrifting = configDrift.drift;
   try {
-    const caddyfileContent = await fsp.readFile(caddyfilePath, "utf8").catch(() => null);
-    if (!caddyfileContent) return;
-    const [adapted, live] = await Promise.all([
-      caddyAdminRequest({ method: "POST", path: "/adapt", headers: { "Content-Type": "text/caddyfile" } }, caddyfileContent),
-      caddyAdminRequest({ method: "GET", path: "/config/" })
-    ]);
-    if (adapted.status !== 200 || live.status !== 200) return;
-    const adaptedParsed = JSON.parse(adapted.body);
-    const adaptedConfig = adaptedParsed && adaptedParsed.config !== undefined ? adaptedParsed.config : adaptedParsed;
+    const live = await caddyAdminRequest({ method: "GET", path: "/config/" });
+    if (live.status !== 200) return;
     const liveConfig = JSON.parse(live.body);
-    // Compare with sorted-key serialization, not raw JSON.stringify: Caddy\u2019s freshly-adapted
-    // config and its live running config can serialize object keys in a different order even when
-    // they\u2019re semantically identical, which previously registered as a false-positive drift.
-    const drift = stableStringify(adaptedConfig) !== stableStringify(liveConfig);
-    configDrift = { checkedAt: new Date().toISOString(), drift, detail: drift ? "Caddy\u2019s live configuration no longer matches the saved configuration." : null };
-    // Log only the false->true transition (not every 10-minute check while it persists or is clear),
-    // so Gateway Events shows exactly when drift was (re-)detected \u2014 useful for confirming whether
-    // a report of drift reappearing "right after resync" actually lines up with a real check, or with
-    // this job\u2019s normal 10-minute cadence instead.
-    if (drift && !wasDrifting) recordActivity("Configuration drift detected: Caddy\u2019s live configuration no longer matches the saved configuration.", "warning");
+    if (!lastKnownGoodCaddyConfig) {
+      lastKnownGoodCaddyConfig = liveConfig;
+      configDrift = { checkedAt: new Date().toISOString(), drift: false, detail: null };
+      return;
+    }
+    const drift = stableStringify(lastKnownGoodCaddyConfig) !== stableStringify(liveConfig);
+    configDrift = { checkedAt: new Date().toISOString(), drift, detail: drift ? "Caddy\u2019s live configuration no longer matches the last known-good configuration." : null };
+    if (drift && !wasDrifting) recordActivity("Configuration drift detected: Caddy\u2019s live configuration no longer matches the last known-good configuration.", "warning");
   } catch (error) {
-    // Caddy admin API unreachable, or transient error: don\u2019t flag drift on a check we couldn\u2019t complete.
     configDrift = { ...configDrift, checkedAt: new Date().toISOString() };
   }
 }
@@ -1018,7 +1013,7 @@ async function dashboardSnapshot() {
       publicIp: publicIpState.address,
       publicIpCheckedAt: publicIpState.checkedAt,
       publicIpError: publicIpState.error,
-      jobs: [{ name: "Upstream checks", enabled: true, schedule: "60s" }, { name: "Scheduled backups", enabled: Boolean(settings.backups?.enabled), schedule: settings.backups?.enabled ? settings.backups.frequency : "off" }, { name: "Log pruning", enabled: Boolean(settings.logsRetention?.pruningEnabled), schedule: settings.logsRetention?.pruningEnabled ? "15m" : "off" }, { name: "Access-log import", enabled: true, schedule: "30s" }, { name: "Public IP check", enabled: true, schedule: "60m" }]
+      jobs: [{ name: "Upstream checks", enabled: true, schedule: "60s" }, { name: "Scheduled backups", enabled: Boolean(settings.backups?.enabled), schedule: settings.backups?.enabled ? settings.backups.frequency : "off" }, { name: "Log pruning", enabled: Boolean(settings.logsRetention?.pruningEnabled), schedule: settings.logsRetention?.pruningEnabled ? "15m" : "off" }, { name: "Access-log import", enabled: true, schedule: "30s" }, { name: "Public IP check", enabled: true, schedule: "60m" }, { name: "Configuration drift check", enabled: true, schedule: "10m" }]
     },
     activity: recentActivity
   };
@@ -1347,11 +1342,11 @@ app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 app.get(["/", "/index.html"], (req, res) => {
   const html = fs.readFileSync(path.join(publicDir, "index.html"), "utf8")
-    .replace(/\/(app|features)\.js\?v=[^"']+/g, `/$1.js?v=${appVersion}`)
+    .replace(/\/(app|features|select-enhance)\.js\?v=[^"']+/g, `/$1.js?v=${appVersion}`)
     .replace(/\/styles\.css\?v=[^"']+/g, `/styles.css?v=${appVersion}`);
   res.type("html").send(html);
 });
-app.use(express.static(publicDir));
+app.use(express.static(publicDir, { setHeaders: (res, filePath) => { if (/\/(app|features)\.js$/.test(filePath)) res.setHeader("Cache-Control", "no-cache"); } }));
 app.use("/site-icons", express.static(iconsDir, { immutable: true, maxAge: "30d", setHeaders: res => res.setHeader("Content-Security-Policy", "default-src 'none'; style-src 'unsafe-inline'") }));
 
 
@@ -1575,10 +1570,70 @@ app.post("/api/account/mfa/recovery-codes", async (req, res, next) => {
 
 // --- Config, Users, Audit log, Groups, Access List <-> Group assignment --------------------------------------
 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/storage", async (req, res, next) => {
+  if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." });
+  try {
+    const breakdown = {};
+    for (const [key, dir] of Object.entries({ sites: sitesDir, backups: backupsDir, certificates: certificatesRoot, logs: logsDir, database: path.join(dataDir, "database") })) {
+      breakdown[key] = await directorySize(dir);
+    }
+    let capacity = null;
+    try {
+      const stats = await fsp.statfs(dataDir);
+      capacity = { totalBytes: stats.blocks * stats.bsize, freeBytes: stats.bfree * stats.bsize, availableBytes: stats.bavail * stats.bsize };
+    } catch { /* statfs isn't available on every platform/Node build -- degrade to breakdown-only. */ }
+    res.json({ dataDir, breakdown, usedBytes: Object.values(breakdown).reduce((sum, value) => sum + value, 0), capacity });
+  } catch (error) { next(error); }
+});
+// Inspects this container's own restart policy via the Docker Engine API, reusing the same
+// mounted-socket + self-identification (process.env.HOSTNAME) pattern as the container picker.
+async function ownRestartPolicy() {
+  if (!dockerSocketMounted) return { checked: false, policyName: null, restartAvailable: false, reason: "Docker socket not detected — mount /var/run/docker.sock to check the restart policy." };
+  const ownId = String(process.env.HOSTNAME || "").trim();
+  if (!ownId) return { checked: false, policyName: null, restartAvailable: false, reason: "Could not determine this container's own ID." };
+  try {
+    const own = await dockerRequest(`/containers/${encodeURIComponent(ownId)}/json`);
+    const policyName = own?.HostConfig?.RestartPolicy?.Name || "no";
+    const restartAvailable = ["always", "unless-stopped", "on-failure"].includes(policyName);
+    return { checked: true, policyName, restartAvailable, reason: restartAvailable ? null : `Restart policy is "${policyName}" — set it to "unless-stopped" (or similar) in your container config to enable restarting from here.` };
+  } catch (error) { return { checked: false, policyName: null, restartAvailable: false, reason: `Could not read the container's restart policy: ${error.message}` }; }
+}
+app.get("/api/system/restart-policy", async (req, res, next) => {
+  if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." });
+  try { res.json(await ownRestartPolicy()); } catch (error) { next(error); }
+});
+app.get("/api/system/security", (req, res) => {
+  if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." });
+  res.json({
+    adminPasswordIsDefault: process.env.ADMIN_PASSWORD === undefined,
+    sessionSecretIsDefault: process.env.SESSION_SECRET === undefined,
+    acmeEmailConfigured: Boolean(String(process.env.ACME_EMAIL || "").trim()),
+  });
+});
+app.post("/api/system/restart", async (req, res, next) => {
+  if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." });
+  try {
+    const policy = await ownRestartPolicy();
+    if (!policy.restartAvailable) return res.status(409).json({ error: policy.reason || "Restarting is not available." });
+    recordActivity("Administrator restarted Site Gateway.", "warning");
+    res.json({ ok: true });
+    setTimeout(() => process.exit(0), 250);
+  } catch (error) { next(error); }
+});
+app.post("/api/system/reload", async (req, res, next) => {
+  if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." });
+  try { await syncCaddy(); recordActivity("Administrator reloaded the gateway configuration."); res.json({ ok: true, lastGatewayReload }); } catch (error) { next(error); }
+});
 app.post("/api/gateway/resync", async (req, res, next) => {
   if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." });
   try {
     await syncCaddy();
+    try {
+      const liveAfterResync = await caddyAdminRequest({ method: "GET", path: "/config/" });
+      if (liveAfterResync.status === 200) lastKnownGoodCaddyConfig = JSON.parse(liveAfterResync.body);
+    } catch (error) { console.warn("Could not capture post-resync config baseline:", error.message); }
     configDrift = { checkedAt: new Date().toISOString(), drift: false, detail: null };
     recordActivity(`Gateway configuration re-synced by \u201c${req.user.username}\u201d.`);
     res.json({ ok: true });
@@ -2239,7 +2294,9 @@ app.patch("/api/settings", async (req, res, next) => {
       const days = key => Math.min(Math.max(Number(value[key]) || 30, 7), 3650);
       settings.logsRetention = { ...settings.logsRetention, accessDays: days("accessDays"), activityDays: days("activityDays"), auditDays: days("auditDays"), certificateDays: days("certificateDays"), securityDays: days("securityDays"), pruningEnabled: value.pruningEnabled === true };
     }
-    await syncCaddy(); await saveSettings(); recordActivity("Administration settings updated."); res.json({ ...settings, backupDirectory: backupsDir });
+    if (req.body.defaultSite) await syncCaddy();
+    await saveSettings();
+    recordActivity("Administration settings updated."); res.json({ ...settings, backupDirectory: backupsDir });
   } catch (error) { next(error); }
 });
 app.post("/api/logs/prune", async (req, res, next) => { try { if (req.user.role !== "administrator") return res.status(403).json({ error: "Administrator access is required." }); if (!settings.logsRetention?.pruningEnabled) return res.status(409).json({ error: "Automatic pruning is disabled. Enable it and save the retention policy first." }); const mode = req.body?.mode === "scheduled" ? "scheduled" : "manual"; const stamp = new Date().toISOString().replace(/[:.]/g, "-"); const snapshot = path.join(backupsDir, `pre-prune-${stamp}.sqlite`); storage.backupTo(snapshot); const counts = storage.pruneEvents(settings.logsRetention); settings.logsRetention = { ...settings.logsRetention, lastRunAt: new Date().toISOString(), lastRunMode: mode, lastRunCounts: counts, lastRunSnapshot: snapshot }; await saveSettings(); recordActivity(`${mode === "scheduled" ? "Scheduled" : "Manual"} log pruning completed: ${Object.values(counts).reduce((sum, value) => sum + value, 0)} records removed.`); res.json({ counts, snapshot }); } catch (error) { next(error); } });