feat(audit): admin audit log (Notification P3)

Append-only who/what/when trail for admin actions + scheduler run summaries,
generalizing QuotaEvent. Logged at ACTION / run-summary granularity — never
per-row (a scheduler run touching thousands of videos is ONE row).

Backend:
- migration 0054_audit_log + AuditLog model (actor_id FK SET NULL, action,
  target_type/id, summary, before/after JSON, created_at).
- app/audit.py: AuditAction constants (single source of truth, i18n'd on the
  client) + record() (adds to the caller's txn) + gc(retention_days).
- producers wired: role change / suspend / delete / invite approve-deny-add /
  demo add-remove-reset / discovery purge (admin.py); config set/reset — secret
  VALUES never logged, key only (config.py); scheduler interval + maintenance
  tune (scheduler routes); sync pause/resume (sync.py); and the scheduler _job()
  choke point writes ONE run-summary row per run — manual runs + errors always,
  automatic runs only when they changed something (no no-op-poll spam).
- retention: audit_gc scheduler job prunes rows older than audit_retention_days
  (sysconfig, default 180; 0 = keep forever).
- admin API routes/audit.py (/api/admin/audit): recent-window list (actor emails
  resolved, System for background) + clear (leaves one tamper-evidence row).

Frontend:
- new admin-only "Audit log" nav page (ScrollText) using the shared DataTable
  (first admin page to reuse it) — sort/filter/paginate/persist, action select
  filter, actor text filter, before→after detail, Clear-all with confirm.
- AuditLog.tsx + auditColumns.tsx + api.adminAudit/clearAudit + AuditRow type.
- trilingual audit + auditActions namespaces (HU/EN/DE) + nav + config-group +
  scheduler job labels; Audit config group (retention days).

frontend/src/components/AuditLog.tsx

@@ -0,0 +1,90 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Trash2 } from "lucide-react";
+import { api } from "../lib/api";
+import { notify } from "../lib/notifications";
+import { LS } from "../lib/storage";
+import { Section } from "./ui/form";
+import { useConfirm } from "./ConfirmProvider";
+import DataTable from "./DataTable";
+import { auditColumns } from "./auditColumns";
+
+// Admin-only audit trail: an append-only who/what/when log of admin actions + scheduler run
+// summaries (never per-row). Read-only apart from Clear. Client-side sort/filter/paginate via
+// DataTable; the API returns the most recent window (capped) — the log stays small by design.
+export default function AuditLog() {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const confirm = useConfirm();
+  const q = useQuery({ queryKey: ["admin-audit"], queryFn: () => api.adminAudit() });
+  const data = q.data;
+  const rows = useMemo(() => data?.items ?? [], [data]);
+
+  const actionOptions = useMemo(() => {
+    const present = Array.from(new Set(rows.map((r) => r.action))).sort();
+    return present.map((a) => ({ value: a, label: t(`auditActions.${a}`, a) }));
+  }, [rows, t]);
+  const columns = useMemo(() => auditColumns(t, actionOptions), [t, actionOptions]);
+
+  const clear = useMutation({
+    mutationFn: () => api.clearAudit(),
+    onSuccess: (r) => {
+      qc.invalidateQueries({ queryKey: ["admin-audit"] });
+      notify({ level: "success", message: t("audit.cleared", { count: r.cleared }) });
+    },
+    onError: () => notify({ level: "error", message: t("audit.clearFailed") }),
+  });
+  const onClear = async () => {
+    if (
+      await confirm({
+        title: t("audit.clearTitle"),
+        message: t("audit.clearConfirm"),
+        confirmLabel: t("audit.clear"),
+        danger: true,
+      })
+    )
+      clear.mutate();
+  };
+
+  const truncated = !!data && data.total > data.returned;
+
+  return (
+    <div className="p-4 max-w-5xl w-full mx-auto">
+      <Section card title={t("audit.title")}>
+        <p className="text-xs text-muted leading-relaxed mb-3">{t("audit.intro")}</p>
+        {q.isLoading ? (
+          <div className="text-muted py-8">{t("common.loading")}</div>
+        ) : rows.length === 0 ? (
+          <p className="text-sm text-muted">{t("audit.empty")}</p>
+        ) : (
+          <>
+            <DataTable
+              rows={rows}
+              columns={columns}
+              rowKey={(r) => String(r.id)}
+              persistKey={LS.auditTable}
+              controlsPosition="top"
+              controlsLeading={
+                <button
+                  onClick={onClear}
+                  disabled={clear.isPending}
+                  className="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-lg border border-border text-muted hover:text-red-400 disabled:opacity-50 transition"
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                  {t("audit.clear")}
+                </button>
+              }
+              emptyText={t("audit.empty")}
+            />
+            {truncated && (
+              <p className="text-[11px] text-muted mt-2">
+                {t("audit.truncated", { returned: data!.returned, total: data!.total })}
+              </p>
+            )}
+          </>
+        )}
+      </Section>
+    </div>
+  );
+}

frontend/src/components/ConfigPanel.tsx

@@ -15,7 +15,7 @@ import { LS } from "../lib/storage";
 // applied together via one Save/Discard bar (consistent with the Settings page); nothing hits
 // the server until Save. Group order is fixed where known so logically related settings (e.g.
 // Email/SMTP) stay together.
-const GROUP_ORDER = ["access", "email", "youtube", "google", "quota", "backfill", "shorts", "batch", "downloads", "plex"];
+const GROUP_ORDER = ["access", "email", "youtube", "google", "quota", "backfill", "shorts", "batch", "downloads", "audit", "plex"];
 
 export default function ConfigPanel() {
   const { t } = useTranslation();

frontend/src/components/NavSidebar.tsx

@@ -15,6 +15,7 @@ import {
   ListVideo,
   LogOut,
   MessageSquare,
+  ScrollText,
   Settings,
   Shield,
   SlidersHorizontal,
@@ -193,6 +194,7 @@ export default function NavSidebar({
           { page: "scheduler", icon: Activity, label: t("header.account.scheduler") },
           { page: "config", icon: SlidersHorizontal, label: t("header.account.config") },
           { page: "users", icon: Users, label: t("header.account.users") },
+          { page: "audit", icon: ScrollText, label: t("header.account.audit") },
         ]
       : [];
 

frontend/src/components/auditColumns.tsx

@@ -0,0 +1,91 @@
+import type { TFunction } from "i18next";
+import { relativeTime, formatDate } from "../lib/format";
+import i18n from "../i18n";
+import type { AuditRow } from "../lib/api";
+import type { Column } from "./DataTable";
+
+function actionLabel(t: TFunction, action: string): string {
+  // Canonical key → localized label; falls back to the raw key for any unmapped action.
+  return t(`auditActions.${action}`, action);
+}
+
+function fmt(v: unknown): string {
+  return v == null || v === "" ? "—" : String(v);
+}
+
+/** A compact before→after (or after-only) rendering of the JSON snapshots, e.g. "role: user → admin". */
+function changeText(row: AuditRow): string | null {
+  const { before, after } = row;
+  if (before && after) {
+    return Object.keys(after)
+      .map((k) => `${k}: ${fmt(before[k])} → ${fmt(after[k])}`)
+      .join(", ");
+  }
+  if (after) {
+    return Object.entries(after)
+      .map(([k, v]) => `${k}: ${fmt(v)}`)
+      .join(", ");
+  }
+  return null;
+}
+
+/** Columns for the admin audit-log DataTable. `actionOptions` are the distinct actions present in
+ * the data (built by the page) so the Action column's select filter only offers real values. */
+export function auditColumns(
+  t: TFunction,
+  actionOptions: { value: string; label: string }[],
+): Column<AuditRow>[] {
+  return [
+    {
+      key: "when",
+      header: t("audit.cols.when"),
+      nowrap: true,
+      sortable: true,
+      sortValue: (r) => r.created_at ?? "",
+      cardPrimary: true,
+      render: (r) => (
+        <span
+          className="text-muted tabular-nums"
+          title={r.created_at ? formatDate(r.created_at, i18n.language) : ""}
+        >
+          {r.created_at ? relativeTime(r.created_at) : "—"}
+        </span>
+      ),
+    },
+    {
+      key: "actor",
+      header: t("audit.cols.actor"),
+      sortable: true,
+      sortValue: (r) => r.actor ?? "",
+      filter: { kind: "text", get: (r) => r.actor ?? t("audit.system") },
+      render: (r) =>
+        r.actor ? (
+          <span className="truncate">{r.actor}</span>
+        ) : (
+          <span className="text-muted italic">{t("audit.system")}</span>
+        ),
+    },
+    {
+      key: "action",
+      header: t("audit.cols.action"),
+      nowrap: true,
+      sortable: true,
+      sortValue: (r) => actionLabel(t, r.action),
+      filter: { kind: "select", options: actionOptions, test: (r, v) => r.action === v },
+      render: (r) => <span className="font-medium">{actionLabel(t, r.action)}</span>,
+    },
+    {
+      key: "details",
+      header: t("audit.cols.details"),
+      render: (r) => {
+        const change = changeText(r);
+        return (
+          <div className="min-w-0">
+            {r.summary && <div className="truncate">{r.summary}</div>}
+            {change && <div className="text-[11px] text-muted truncate">{change}</div>}
+          </div>
+        );
+      },
+    },
+  ];
+}