Add automatic retention purging for the Diagnostic and Audit logs

The diagnostic log already rings-buffer to 500 rows, but the audit
log had no cap at all and would grow forever. Adds an opt-in
age-based purge under Settings -> Logs: keep entries for N days,
checked on a configurable interval (hourly through monthly), plus a
manual "Purge now" button. Reuses the existing node-schedule-style
reschedule-on-settings-change pattern from the secret/Tailscale
expiry checkers, but as a plain setInterval since "how often" here is
an interval rather than a specific daily time.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/App.tsx

@@ -23,6 +23,7 @@ import NotificationSettings from "./pages/settings/NotificationSettings";
 import BadgeSettings from "./pages/settings/BadgeSettings";
 import DisplaySettings from "./pages/settings/DisplaySettings";
 import CacheSettings from "./pages/settings/CacheSettings";
+import LogSettings from "./pages/settings/LogSettings";
 import AppShell from "./layout/AppShell";
 import { setDateTimeSettings } from "./utils/date";
 import { setPageSize } from "./utils/pageSize";
@@ -126,6 +127,7 @@ export default function App() {
           <Route path="badges" element={<BadgeSettings />} />
           <Route path="display" element={<DisplaySettings />} />
           <Route path="cache" element={<CacheSettings />} />
+          <Route path="logs" element={<LogSettings />} />
         </Route>
       </Routes>
     </AppShell>

web/src/api/client.ts

@@ -153,6 +153,12 @@ export interface DisplaySettings {
   pageSize: number;
 }
 
+export interface LogRetentionSettings {
+  enabled: boolean;
+  retentionDays: number;
+  intervalHours: number;
+}
+
 export interface AppSettings {
   gotify: GotifySettings;
   ntfy: NtfySettings;
@@ -162,6 +168,7 @@ export interface AppSettings {
   providerColors: Record<string, string>;
   integrationColors: Record<string, string>;
   display: DisplaySettings;
+  logRetention: LogRetentionSettings;
 }
 
 export type AppSettingsPatch = { [K in keyof AppSettings]?: Partial<AppSettings[K]> };
@@ -792,5 +799,7 @@ export const api = {
       request<{ ok: true }>("/api/settings/test-smtp", { method: "POST", body: JSON.stringify(data) }),
     testWebhook: (data: { url: string; secret?: string }) =>
       request<{ ok: true }>("/api/settings/test-webhook", { method: "POST", body: JSON.stringify(data) }),
+    purgeLogs: () =>
+      request<{ diagDeleted: number; auditDeleted: number }>("/api/settings/purge-logs", { method: "POST" }),
   },
 };

web/src/pages/Settings.tsx

@@ -5,6 +5,7 @@ const SUB_NAV = [
   { to: "/settings/badges", label: "Badges" },
   { to: "/settings/display", label: "Display" },
   { to: "/settings/cache", label: "Cache" },
+  { to: "/settings/logs", label: "Logs" },
 ];
 
 export default function Settings() {

web/src/pages/settings/LogSettings.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+import { api, type AppSettings } from "../../api/client";
+
+const INTERVAL_OPTIONS: { value: number; label: string }[] = [
+  { value: 1, label: "Every hour" },
+  { value: 6, label: "Every 6 hours" },
+  { value: 12, label: "Every 12 hours" },
+  { value: 24, label: "Daily" },
+  { value: 168, label: "Weekly" },
+  { value: 720, label: "Monthly" },
+];
+
+export default function LogSettings() {
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [enabled, setEnabled] = useState(false);
+  const [retentionDays, setRetentionDays] = useState(90);
+  const [intervalHours, setIntervalHours] = useState(24);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [purging, setPurging] = useState(false);
+  const [purgeResult, setPurgeResult] = useState<{ diagDeleted: number; auditDeleted: number } | null>(null);
+  const [purgeError, setPurgeError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.settings
+      .get()
+      .then((res: { settings: AppSettings }) => {
+        setEnabled(res.settings.logRetention.enabled);
+        setRetentionDays(res.settings.logRetention.retentionDays);
+        setIntervalHours(res.settings.logRetention.intervalHours);
+      })
+      .catch((err) => setLoadError(err instanceof Error ? err.message : String(err)))
+      .finally(() => setLoading(false));
+  }, []);
+
+  async function handleSave() {
+    setSaving(true);
+    setSaveError(null);
+    setSaved(false);
+    try {
+      await api.settings.update({ logRetention: { enabled, retentionDays, intervalHours } });
+      setSaved(true);
+      setTimeout(() => setSaved(false), 3000);
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handlePurgeNow() {
+    if (!confirm(`Delete diagnostic and audit log entries older than ${retentionDays} days now?`)) return;
+    setPurging(true);
+    setPurgeError(null);
+    setPurgeResult(null);
+    try {
+      const result = await api.settings.purgeLogs();
+      setPurgeResult(result);
+    } catch (err) {
+      setPurgeError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setPurging(false);
+    }
+  }
+
+  if (loading) return <div className="text-secondary">Loading…</div>;
+
+  return (
+    <>
+      <div className="d-flex align-items-center justify-content-between mb-3">
+        <h3 className="mb-0">Logs</h3>
+        <div className="d-flex align-items-center gap-2">
+          {saveError && <span className="text-danger small">{saveError}</span>}
+          {saved && <span className="text-success small">✓ Settings saved</span>}
+          <button className="btn btn-primary" onClick={handleSave} disabled={saving}>
+            {saving ? "Saving…" : "Save Settings"}
+          </button>
+        </div>
+      </div>
+
+      {loadError && <div className="alert alert-danger">{loadError}</div>}
+
+      <div className="row row-cards">
+        <div className="col-md-7">
+          <div className="card h-100">
+            <div className="card-header">
+              <h3 className="card-title">Automatic purge</h3>
+            </div>
+            <div className="card-body">
+              <p className="text-secondary">
+                Automatically deletes old entries from the Diagnostic Log and Audit Log so they don't grow
+                unbounded. The Diagnostic Log already keeps only its most recent 500 calls regardless of this
+                setting; this additionally purges by age, and is the only thing that trims the Audit Log.
+              </p>
+              <label className="form-check mb-3">
+                <input type="checkbox" className="form-check-input" checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
+                <span className="form-check-label">Automatically purge old log entries</span>
+              </label>
+              <div className="row g-3">
+                <div className="col-md-6">
+                  <label className="form-label">Keep entries for</label>
+                  <div className="input-group">
+                    <input
+                      type="number"
+                      className="form-control"
+                      min={1}
+                      max={3650}
+                      value={retentionDays}
+                      disabled={!enabled}
+                      onChange={(e) => setRetentionDays(Number(e.target.value))}
+                    />
+                    <span className="input-group-text">days</span>
+                  </div>
+                </div>
+                <div className="col-md-6">
+                  <label className="form-label">Purge frequency</label>
+                  <select
+                    className="form-select"
+                    value={intervalHours}
+                    disabled={!enabled}
+                    onChange={(e) => setIntervalHours(Number(e.target.value))}
+                  >
+                    {INTERVAL_OPTIONS.map((opt) => (
+                      <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="col-md-5">
+          <div className="card h-100">
+            <div className="card-header">
+              <h3 className="card-title">Purge now</h3>
+            </div>
+            <div className="card-body">
+              <p className="text-secondary">
+                Runs a purge immediately using the retention period above, regardless of whether automatic
+                purging is enabled.
+              </p>
+              {purgeError && <div className="alert alert-danger mb-0">{purgeError}</div>}
+              {purgeResult && (
+                <div className="alert alert-success mb-0">
+                  Deleted {purgeResult.diagDeleted} diagnostic log and {purgeResult.auditDeleted} audit log
+                  {" "}entries.
+                </div>
+              )}
+            </div>
+            <div className="card-footer">
+              <button className="btn btn-outline-danger" onClick={handlePurgeNow} disabled={purging}>
+                {purging ? "Purging…" : "Purge now"}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}