feat(stats): per-user API quota attribution + admin usage page

Track who burned how much YouTube API quota. A QuotaEvent audit log (migration
0009) records every spend with the triggering user (NULL = background/system) and
an action label, set via a request/job-scoped contextvar (quota.attribute) so no
call signatures change. User-initiated work (sync subscriptions, unsubscribe,
opt-in recent backfill, manual enrich) attributes to the user; scheduler work to
System, split by action.

- backend: QuotaEvent model + migration 0009; quota.attribute() contextvar;
  record_usage logs events; entry points wrapped (routes/sync, routes/channels,
  scheduler); GET /api/quota/my-usage + GET /api/quota/admin
- frontend: admin-only Stats page (header nav, page=stats) with daily bars +
  per-user breakdown by action and range picker; 'Your API usage' in Settings ->
  Sync for every user

Verified: attribution + endpoints compute correctly; events are per-user vs System.

frontend/src/components/Stats.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { api, type AdminQuotaRow } from "../lib/api";
+import { quotaActionLabel } from "../lib/format";
+
+const RANGES = [7, 30, 90] as const;
+
+export default function Stats() {
+  const [days, setDays] = useState<number>(30);
+  const q = useQuery({
+    queryKey: ["admin-quota", days],
+    queryFn: () => api.adminQuota(days),
+  });
+  const data = q.data;
+  const maxDaily = Math.max(1, ...(data?.daily ?? []).map((d) => d.total));
+  const grandTotal = (data?.rows ?? []).reduce((s, r) => s + r.total, 0);
+
+  return (
+    <div className="p-4 max-w-4xl mx-auto">
+      <div className="flex items-center justify-between gap-3 mb-4">
+        <h2 className="text-lg font-semibold">API quota usage</h2>
+        <div className="flex items-center gap-1">
+          {RANGES.map((d) => (
+            <button
+              key={d}
+              onClick={() => setDays(d)}
+              className={`px-3 py-1.5 rounded-full text-sm border transition ${
+                days === d
+                  ? "bg-accent text-accent-fg border-accent"
+                  : "bg-card border-border text-muted hover:border-accent"
+              }`}
+            >
+              {d}d
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <p className="text-xs text-muted mb-4 leading-relaxed">
+        YouTube Data API units attributed by who triggered the spend. <b className="text-fg/80">System</b> is
+        shared background work (scheduled backfill, enrichment, resync) that isn't tied to one person.
+      </p>
+
+      {q.isLoading ? (
+        <div className="text-muted py-8">Loading…</div>
+      ) : !data ? (
+        <div className="text-muted py-8">No data.</div>
+      ) : (
+        <>
+          {/* Daily totals (instance-wide, Pacific days) */}
+          <div className="glass-card rounded-xl p-3 mb-4">
+            <div className="text-xs text-muted mb-2">
+              Daily total ({data.range_days}d · {grandTotal.toLocaleString()} units)
+            </div>
+            {data.daily.length === 0 ? (
+              <div className="text-muted text-sm">No usage in this range.</div>
+            ) : (
+              <div className="flex items-end gap-0.5 h-24">
+                {data.daily.map((d) => (
+                  <div
+                    key={d.day}
+                    className="flex-1 bg-accent/70 hover:bg-accent rounded-t transition"
+                    style={{ height: `${Math.max(2, (d.total / maxDaily) * 100)}%` }}
+                    title={`${d.day}: ${d.total.toLocaleString()} units`}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Per-user breakdown */}
+          <div className="flex flex-col gap-1.5">
+            {data.rows.length === 0 ? (
+              <div className="text-muted py-4">No usage in this range.</div>
+            ) : (
+              data.rows.map((r) => (
+                <UserRow key={r.user_id ?? "system"} row={r} max={data.rows[0]?.total || 1} />
+              ))
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function UserRow({ row, max }: { row: AdminQuotaRow; max: number }) {
+  const [open, setOpen] = useState(false);
+  const actions = Object.entries(row.by_action).sort((a, b) => b[1] - a[1]);
+  const isSystem = row.user_id === null;
+  return (
+    <div className="glass-card rounded-xl p-3">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="w-full flex items-center gap-3 text-left"
+      >
+        <span className={`text-sm font-medium truncate flex-1 ${isSystem ? "text-muted" : ""}`}>
+          {isSystem ? "System (background)" : row.email}
+        </span>
+        <span className="text-sm font-semibold tabular-nums shrink-0">
+          {row.total.toLocaleString()}
+        </span>
+      </button>
+      {/* Proportion bar */}
+      <div className="mt-2 h-1.5 bg-border/40 rounded-full overflow-hidden">
+        <div
+          className="h-full bg-accent rounded-full"
+          style={{ width: `${Math.max(2, (row.total / max) * 100)}%` }}
+        />
+      </div>
+      {open && actions.length > 0 && (
+        <div className="mt-2 space-y-1 text-xs text-muted">
+          {actions.map(([action, units]) => (
+            <div key={action} className="flex items-center justify-between gap-2">
+              <span>{quotaActionLabel(action)}</span>
+              <span className="tabular-nums">{units.toLocaleString()}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}