Add multi-user: Google OAuth, roles, quotas, admin panel

Phase 2. The schema landed last commit; this makes it real.

AUTH is now multi-provider. MUSE_AUTH takes a comma list, so github,google
runs both. The callback URL is unchanged — /auth/callback for every provider,
with the provider carried in the state COOKIE rather than the query string —
so adding Google needs no edit to an already-registered GitHub app, and the
callback can't be steered to a different provider by the redirect. With more
than one enabled, /auth/login shows a chooser built from style attributes
only, which the CSP already permits, so it needs no stylesheet and no extra
hash.

Google identities are the VERIFIED email. An unverified one is refused: anyone
can put someone else's address on an account they control, and the allowlist is
keyed on exactly that string.

WHO MAY LOG IN is now two rules — the MUSE_ALLOWED_USERS bootstrap list, then
a non-disabled users row. Inviting is adding a row; no email, no token, no
expiry to manage. MUSE_ALLOWED_USERS stays mandatory only while the table is
empty, so a working multi-user install isn't held hostage by an env var it has
outgrown, but an empty database with no allowlist still refuses to start
because nobody could ever get in. The rule is one function used at login AND
on every request: checking only at sign-in isn't revocation, it's a delay.

QUOTAS are requests per calendar month and bytes of imported audio, 0 =
unlimited. Calendar month, not a rolling window — "12 left until the 1st" is
something a person can plan around. Batches are checked against the whole
batch, so a 30-track album with 5 requests left is refused up front rather
than accepted and abandoned halfway. Storage is measured from the file
actually written, not the size the peer advertised. Admins are exempt.

ADMIN PANEL: host CPU/memory/disk read straight from /proc — no psutil, no
compiled dependency, and in a container /proc reports the host, which is what
you want for a homelab box. Plus library totals, slskd connection state, a
30-day chart, per-user and per-artist breakdowns, and inline role/quota
editing. The chart is hand-rolled SVG: a charting library would add ~150KB for
one stacked bar chart and most of them inject <style> at runtime, which this
app's CSP blocks.

Guard rails: the last active admin cannot be demoted, disabled or deleted;
disabling revokes sessions immediately; deleting a user keeps their jobs,
because the history records what is in the library and why. Requests are
private by default — users see their own, admins see all — and retrying
someone else's job returns 404 rather than 403, since a distinct error would
confirm the id exists.

Also drops AnimatePresence mode="wait" from the tab container. It gates the
incoming panel on the outgoing one's exit animation reporting finished, so
anything that stalls the frame loop leaves the UI stuck on the old tab with no
way forward — found while testing, where a backgrounded page froze navigation
entirely. A cosmetic transition should never gate navigation.

Verified: admin endpoints 200/403/403/401 for admin/user/guest/anon; last-admin
demote, disable and delete all 409; disable revokes mid-session; quota refuses
the 3rd of 2 and a 30-track batch, then succeeds once raised; users see only
their own jobs; cross-user retry 404s; bad role/provider/duplicate/empty patch
all rejected; multi-provider chooser and both redirects correct; three CSRF
variants 400; preflight refuses unknown providers, missing secrets, and an
empty database with no allowlist. CPU, memory and disk confirmed populated
inside the linux/amd64 container.

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

web/lib/api.ts

@@ -92,13 +92,71 @@ export type Job = {
   created_at: string;
 };
 
+export type Usage = { requests: number; storage: number };
+
 export type Me = {
   user: string | null;
   auth: string;
-  role?: string;
+  role?: string | null;
   display?: string | null;
   avatar?: string | null;
+  provider?: string;
   quota?: number;
+  storage_quota?: number;
+  usage?: Usage;
+  providers?: string[];
+};
+
+export type AdminUser = {
+  username: string;
+  provider: string;
+  role: string;
+  display: string | null;
+  avatar: string | null;
+  quota: number;
+  storage_quota: number;
+  disabled: boolean;
+  created_at: string;
+  last_seen: string | null;
+  invited_by: string | null;
+  usage: Usage;
+  /** In MUSE_ALLOWED_USERS — cannot actually be locked out by disabling. */
+  bootstrap: boolean;
+};
+
+export type DiskStat = { total: number; used: number; free: number; pct: number | null };
+
+export type SystemStats = {
+  system: {
+    cpu_pct: number | null;
+    cpus: number | null;
+    mem_total: number | null;
+    mem_used: number | null;
+    mem_pct: number | null;
+    load: number[] | null;
+    disks: Record<string, DiskStat | null>;
+  };
+  workers: number;
+  pending: number;
+  jobs: Record<string, number>;
+  library: { tracks: number; bytes: number };
+  users: number;
+  sessions: number;
+  slskd: {
+    ok: boolean;
+    connected?: boolean;
+    logged_in?: boolean;
+    version?: string;
+    shared_files?: number | null;
+    error?: string;
+  };
+};
+
+export type Activity = {
+  days: number;
+  series: { date: string; n: number; imported: number; failed: number }[];
+  per_user: { u: string; n: number; bytes: number }[];
+  top_artists: { artist: string; n: number }[];
 };
 
 /**
@@ -118,18 +176,33 @@ export class ApiError extends Error {
 async function get<T>(path: string, init?: RequestInit): Promise<T> {
   const r = await fetch(path, { credentials: "same-origin", ...init });
   if (r.status === 401) throw new ApiError(401, "signed out");
-  if (!r.ok) throw new ApiError(r.status, `HTTP ${r.status}`);
+  if (!r.ok) {
+    // FastAPI puts the useful part in `detail` — quota messages, "only active
+    // admin", and so on. Surfacing "HTTP 429" instead would throw away the
+    // only text that tells the user what to do about it.
+    let msg = `HTTP ${r.status}`;
+    try {
+      const body = await r.json();
+      if (typeof body?.detail === "string") msg = body.detail;
+      else if (typeof body?.error === "string") msg = body.error;
+    } catch {
+      /* not JSON */
+    }
+    throw new ApiError(r.status, msg);
+  }
   return (await r.json()) as T;
 }
 
-function post<T>(path: string, body?: unknown): Promise<T> {
+function send<T>(method: string, path: string, body?: unknown): Promise<T> {
   return get<T>(path, {
-    method: "POST",
+    method,
     headers: { "Content-Type": "application/json" },
     body: body === undefined ? undefined : JSON.stringify(body),
   });
 }
 
+const post = <T,>(path: string, body?: unknown) => send<T>("POST", path, body);
+
 export const api = {
   me: () => get<Me>("/api/me"),
   search: (q: string) =>
@@ -161,8 +234,45 @@ export const api = {
       skipped: { line: string; why: string }[];
       pending: number;
     }>("/api/import", { text }),
+
+  admin: {
+    users: () => get<{ users: AdminUser[]; roles: string[] }>("/api/admin/users"),
+    addUser: (u: {
+      username: string;
+      provider: string;
+      role: string;
+      quota: number;
+      storage_quota_gb: number;
+    }) => post<AdminUser>("/api/admin/users", u),
+    patchUser: (
+      username: string,
+      patch: Partial<{
+        role: string;
+        quota: number;
+        storage_quota_gb: number;
+        disabled: boolean;
+      }>,
+    ) => send<AdminUser>("PATCH", `/api/admin/users/${encodeURIComponent(username)}`, patch),
+    deleteUser: (username: string) =>
+      send<{ ok: boolean }>("DELETE", `/api/admin/users/${encodeURIComponent(username)}`),
+    system: () => get<SystemStats>("/api/admin/system"),
+    activity: (days = 30) => get<Activity>(`/api/admin/activity?days=${days}`),
+  },
 };
 
+/** Bytes → human. Binary units, because that's what df and the OS report. */
+export function bytes(n: number | null | undefined): string {
+  if (!n) return "0 B";
+  const u = ["B", "KB", "MB", "GB", "TB"];
+  let i = 0;
+  let v = n;
+  while (v >= 1024 && i < u.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v.toFixed(v < 10 && i > 0 ? 1 : 0)} ${u[i]}`;
+}
+
 export const mmss = (ms: number | null | undefined) => {
   const t = Math.round((ms || 0) / 1000);
   return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`;