Pass 3 next slice: snapshot polish, analytics depth, player drawer

- Snapshots now include recursive sizeBytes (lib/snapshots.ts dirSize),
  rendered as a badge next to mod count.
- Snapshot restore/delete is now type-to-confirm: click Restore/Delete,
  type the literal snapshot name, press Enter or click Confirm. Esc
  cancels, matches the existing wizard Esc handler.
- Analytics card:
  - Uptime ring showing % of datapoints with tps>0 (color-graded
    green/amber/red) + numeric % over selected range.
  - Peak-player marker dot on the Players sparkline + peak caption.
  - "Online now" player list (up to 8) with small PlayerAvatar badges,
    sourced from the latest analytics entry's players[] array.
- Player profile drawer (new):
  - Slide-in right panel opened by clicking any PlayerAvatar.
  - Shows Online / Op / Whitelisted / Banned badges, UUID, ban reason.
  - Quick toggles for op/deop, whitelist add/remove, ban (with reason
    input) and pardon — reuses /api/players POST contract.
  - Global event bus (lib/events.ts) decouples avatars from drawer.
  - Esc / backdrop / close-button dismiss.
- PlayerAvatar now renders as a <button> by default (stopPropagation on
  click, focus-visible ring); pass interactive={false} to opt out (used
  inside the drawer itself).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/providers.tsx

@@ -5,6 +5,7 @@ import { SessionProvider } from "next-auth/react";
 import { Toaster } from "sonner";
 import { useEffect, useState } from "react";
 import { CommandPalette } from "@/components/CommandPalette";
+import { PlayerDrawer } from "@/components/PlayerDrawer";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const [queryClient] = useState(
@@ -34,6 +35,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
       <QueryClientProvider client={queryClient}>
         {children}
         <CommandPalette />
+        <PlayerDrawer />
         <Toaster
           theme={theme}
           position="bottom-right"

components/Analytics.tsx

@@ -3,6 +3,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Badge } from "@/components/ui/badge";
+import { PlayerAvatar } from "@/components/PlayerAvatar";
 import {
   Card,
   CardContent,
@@ -18,8 +20,53 @@ type MetricEntry = {
   ramTotalMB: number;
   cpuPercent: number;
   playersOnline: number;
+  players?: string[];
 };
 
+function UptimeRing({ percent, size = 64 }: { percent: number; size?: number }) {
+  const r = size / 2 - 5;
+  const c = 2 * Math.PI * r;
+  const off = c * (1 - percent / 100);
+  const color =
+    percent >= 95 ? "#4ade80" : percent >= 80 ? "#facc15" : "#f87171";
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-label={`Uptime ${percent.toFixed(0)}%`}>
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={r}
+        stroke="currentColor"
+        strokeOpacity="0.15"
+        strokeWidth="5"
+        fill="none"
+      />
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={r}
+        stroke={color}
+        strokeWidth="5"
+        strokeLinecap="round"
+        strokeDasharray={c}
+        strokeDashoffset={off}
+        fill="none"
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+      />
+      <text
+        x="50%"
+        y="50%"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        className="fill-foreground"
+        fontSize={size * 0.28}
+        fontWeight="700"
+      >
+        {Math.round(percent)}%
+      </text>
+    </svg>
+  );
+}
+
 function Sparkline({
   data,
   color,
@@ -28,6 +75,8 @@ function Sparkline({
   label,
   unit,
   currentValue,
+  peakIndex,
+  peakLabel,
 }: {
   data: number[];
   color: string;
@@ -36,6 +85,8 @@ function Sparkline({
   label: string;
   unit: string;
   currentValue: string;
+  peakIndex?: number;
+  peakLabel?: string;
 }) {
   if (data.length < 2) {
     return (
@@ -55,17 +106,27 @@ function Sparkline({
     );
   }
 
-  const { pathD, areaD, w } = useMemo(() => {
+  const { pathD, areaD, w, peakXY } = useMemo(() => {
     const dataMax = max || Math.max(...data, 1);
     const width = 300;
-    const pts = data.map((v, i) => {
+    const coords = data.map((v, i) => {
       const x = (i / (data.length - 1)) * width;
       const y = height - (v / dataMax) * (height - 10) - 5;
-      return `${x},${y}`;
+      return { x, y };
     });
+    const pts = coords.map((c) => `${c.x},${c.y}`);
     const p = `M${pts.join(" L")}`;
-    return { pathD: p, areaD: `${p} L${width},${height} L0,${height} Z`, w: width };
+    const peak =
-  }, [data, max, height]);
+      typeof peakIndex === "number" && peakIndex >= 0 && peakIndex < coords.length
+        ? coords[peakIndex]
+        : null;
+    return {
+      pathD: p,
+      areaD: `${p} L${width},${height} L0,${height} Z`,
+      w: width,
+      peakXY: peak,
+    };
+  }, [data, max, height, peakIndex]);
 
   return (
     <div className="rounded-lg bg-muted p-4">
@@ -87,7 +148,18 @@ function Sparkline({
         </defs>
         <path d={areaD} fill={`url(#grad-${label})`} />
         <path d={pathD} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        {peakXY && (
+          <>
+            <circle cx={peakXY.x} cy={peakXY.y} r={3.5} fill={color} />
+            <circle cx={peakXY.x} cy={peakXY.y} r={6} fill={color} fillOpacity="0.25" />
+          </>
+        )}
       </svg>
+      {peakLabel && (
+        <p className="text-[10px] text-muted-foreground mt-1 tabular-nums">
+          peak {peakLabel}
+        </p>
+      )}
     </div>
   );
 }
@@ -105,6 +177,25 @@ export function Analytics() {
 
   const latest = metrics.length > 0 ? metrics[metrics.length - 1] : null;
 
+  const { uptimePct, peakPlayers, peakIndex, onlineNow } = useMemo(() => {
+    if (metrics.length === 0) {
+      return { uptimePct: 0, peakPlayers: 0, peakIndex: -1, onlineNow: [] as string[] };
+    }
+    const alive = metrics.filter((m) => m.tps > 0 || m.playersOnline > 0).length;
+    const pct = (alive / metrics.length) * 100;
+    let peak = -Infinity;
+    let idx = -1;
+    metrics.forEach((m, i) => {
+      if (m.playersOnline > peak) {
+        peak = m.playersOnline;
+        idx = i;
+      }
+    });
+    const online =
+      (latest?.players?.filter((p): p is string => typeof p === "string" && p.length > 0)) || [];
+    return { uptimePct: pct, peakPlayers: peak, peakIndex: idx, onlineNow: online };
+  }, [metrics, latest]);
+
   const ranges = [
     { label: "1h", value: 1 },
     { label: "6h", value: 6 },
@@ -138,7 +229,57 @@ export function Analytics() {
           </div>
         </div>
       </CardHeader>
-      <CardContent>
+      <CardContent className="space-y-4">
+        {metrics.length > 0 && (
+          <div className="flex items-center gap-4 flex-wrap rounded-lg bg-muted p-3">
+            <div className="flex items-center gap-3">
+              <UptimeRing percent={uptimePct} />
+              <div>
+                <p className="text-xs text-muted-foreground">Uptime</p>
+                <p className="text-sm font-semibold">
+                  {uptimePct.toFixed(1)}%{" "}
+                  <span className="text-xs text-muted-foreground">
+                    over last {hours}h
+                  </span>
+                </p>
+              </div>
+            </div>
+            <div className="h-10 w-px bg-border hidden sm:block" />
+            <div>
+              <p className="text-xs text-muted-foreground">Peak players</p>
+              <p className="text-sm font-semibold tabular-nums">
+                {peakPlayers >= 0 ? peakPlayers : 0}
+              </p>
+            </div>
+            <div className="h-10 w-px bg-border hidden sm:block" />
+            <div className="flex-1 min-w-0">
+              <p className="text-xs text-muted-foreground mb-1">
+                Online now ({onlineNow.length})
+              </p>
+              {onlineNow.length === 0 ? (
+                <p className="text-sm text-muted-foreground">—</p>
+              ) : (
+                <div className="flex flex-wrap gap-1.5">
+                  {onlineNow.slice(0, 8).map((name) => (
+                    <Badge
+                      key={name}
+                      variant="secondary"
+                      className="gap-1.5 text-xs px-1.5 py-0.5 font-normal"
+                    >
+                      <PlayerAvatar name={name} size={14} />
+                      {name}
+                    </Badge>
+                  ))}
+                  {onlineNow.length > 8 && (
+                    <Badge variant="secondary" className="text-xs px-1.5 py-0.5">
+                      +{onlineNow.length - 8}
+                    </Badge>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
           <Sparkline
             data={metrics.map((m) => m.tps)}
@@ -171,6 +312,8 @@ export function Analytics() {
             label="Players"
             unit=""
             currentValue={latest ? latest.playersOnline.toString() : "0"}
+            peakIndex={peakPlayers > 0 ? peakIndex : undefined}
+            peakLabel={peakPlayers > 0 ? peakPlayers.toString() : undefined}
           />
         </div>
       </CardContent>

components/ModManager.tsx

@@ -10,7 +10,7 @@ import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
-import { timeAgo } from "@/lib/time";
+import { timeAgo, formatBytes } from "@/lib/time";
 import {
   Card,
   CardContent,
@@ -67,6 +67,7 @@ type SnapshotInfo = {
   createdAt: string;
   modCount: number;
   mods: string[];
+  sizeBytes?: number;
 };
 
 type WizardStep = "idle" | "searching" | "reviewing" | "installing";
@@ -170,6 +171,7 @@ export function ModManager() {
   const [confirmDeleteSnap, setConfirmDeleteSnap] = useState<string | null>(null);
   const [installedQuery, setInstalledQuery] = useState("");
   const [sideFilter, setSideFilter] = useState<"all" | ModSide>("all");
+  const [typedConfirm, setTypedConfirm] = useState("");
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
 
   // Installed mods
@@ -209,6 +211,7 @@ export function ModManager() {
         setConfirmRemove(null);
         setConfirmRestore(null);
         setConfirmDeleteSnap(null);
+        setTypedConfirm("");
         return;
       }
       if (step === "searching" || step === "reviewing") {
@@ -1036,20 +1039,28 @@ export function ModManager() {
           </CardHeader>
           <CardContent>
             <ul className="space-y-1">
-              {snapshots.map((snap) => (
+              {snapshots.map((snap) => {
+                const pending =
+                  confirmRestore === snap.dirName || confirmDeleteSnap === snap.dirName;
+                const mode = confirmRestore === snap.dirName ? "restore" : "delete";
+                const matched = typedConfirm === snap.name;
+                return (
                   <li
                     key={snap.dirName}
-                  className="flex items-center justify-between px-3 py-2.5 rounded-md bg-muted/50 group"
+                    className="rounded-md bg-muted/50 group"
                   >
+                    <div className="flex items-center justify-between gap-2 px-3 py-2.5">
                       <div className="min-w-0">
-                    <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-2 flex-wrap">
                           <span className="text-sm font-medium">{snap.name}</span>
-                      <Badge
+                          <Badge variant="secondary" className="text-xs px-1.5 py-0">
-                        variant="secondary"
-                        className="text-xs px-1.5 py-0"
-                      >
                             {snap.modCount} mods
                           </Badge>
+                          {typeof snap.sizeBytes === "number" && snap.sizeBytes > 0 && (
+                            <Badge variant="secondary" className="text-xs px-1.5 py-0">
+                              {formatBytes(snap.sizeBytes)}
+                            </Badge>
+                          )}
                         </div>
                         <p
                           className="text-xs text-muted-foreground"
@@ -1059,55 +1070,29 @@ export function ModManager() {
                         </p>
                       </div>
                       <div className="flex gap-1 shrink-0 flex-wrap justify-end">
-                    {confirmRestore === snap.dirName ? (
+                        {pending ? (
-                      <>
-                        <Button
-                          size="sm"
-                          variant="default"
-                          onClick={() => restoreSnap.mutate(snap.dirName)}
-                          disabled={isBusy}
-                          className="text-xs h-9"
-                        >
-                          Confirm Restore
-                        </Button>
                           <Button
                             size="sm"
                             variant="ghost"
-                          onClick={() => setConfirmRestore(null)}
-                          className="text-xs h-9"
-                        >
-                          Cancel
-                        </Button>
-                      </>
-                    ) : confirmDeleteSnap === snap.dirName ? (
-                      <>
-                        <Button
-                          size="sm"
-                          variant="destructive"
                             onClick={() => {
-                            deleteSnap.mutate(snap.dirName);
+                              setConfirmRestore(null);
                               setConfirmDeleteSnap(null);
+                              setTypedConfirm("");
                             }}
-                          disabled={isBusy}
-                          className="text-xs h-9"
-                        >
-                          Confirm Delete
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => setConfirmDeleteSnap(null)}
                             className="text-xs h-9"
                           >
                             Cancel
                           </Button>
-                      </>
                         ) : (
                           <>
                             <Button
                               size="sm"
                               variant="outline"
-                          onClick={() => setConfirmRestore(snap.dirName)}
+                              onClick={() => {
+                                setConfirmRestore(snap.dirName);
+                                setConfirmDeleteSnap(null);
+                                setTypedConfirm("");
+                              }}
                               disabled={isBusy}
                               className="text-xs h-9 sm:opacity-0 sm:group-hover:opacity-100 transition"
                             >
@@ -1116,7 +1101,11 @@ export function ModManager() {
                             <Button
                               size="sm"
                               variant="ghost"
-                          onClick={() => setConfirmDeleteSnap(snap.dirName)}
+                              onClick={() => {
+                                setConfirmDeleteSnap(snap.dirName);
+                                setConfirmRestore(null);
+                                setTypedConfirm("");
+                              }}
                               disabled={isBusy}
                               className="text-xs h-9 text-muted-foreground sm:opacity-0 sm:group-hover:opacity-100 transition"
                             >
@@ -1125,8 +1114,53 @@ export function ModManager() {
                           </>
                         )}
                       </div>
+                    </div>
+                    {pending && (
+                      <div className="px-3 pb-3 pt-0 border-t border-border/60">
+                        <p className="text-xs text-muted-foreground mt-2 mb-1.5">
+                          Type <span className="font-mono text-foreground">{snap.name}</span> to{" "}
+                          {mode === "restore" ? "confirm restore" : "confirm delete"}
+                        </p>
+                        <div className="flex gap-2">
+                          <Input
+                            value={typedConfirm}
+                            autoFocus
+                            onChange={(e) => setTypedConfirm(e.target.value)}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter" && matched) {
+                                if (mode === "restore") restoreSnap.mutate(snap.dirName);
+                                else {
+                                  deleteSnap.mutate(snap.dirName);
+                                  setConfirmDeleteSnap(null);
+                                  setTypedConfirm("");
+                                }
+                              }
+                            }}
+                            placeholder={snap.name}
+                            className="h-9 text-sm flex-1 font-mono"
+                          />
+                          <Button
+                            size="sm"
+                            variant={mode === "restore" ? "default" : "destructive"}
+                            onClick={() => {
+                              if (mode === "restore") restoreSnap.mutate(snap.dirName);
+                              else {
+                                deleteSnap.mutate(snap.dirName);
+                                setConfirmDeleteSnap(null);
+                                setTypedConfirm("");
+                              }
+                            }}
+                            disabled={!matched || isBusy}
+                            className="text-xs h-9"
+                          >
+                            {mode === "restore" ? "Confirm Restore" : "Confirm Delete"}
+                          </Button>
+                        </div>
+                      </div>
+                    )}
                   </li>
-              ))}
+                );
+              })}
             </ul>
           </CardContent>
         </Card>

components/PlayerAvatar.tsx

@@ -2,33 +2,33 @@
 
 import Image from "next/image";
 import { useState } from "react";
+import { dispatchAppEvent } from "@/lib/events";
 
 export function PlayerAvatar({
   name,
   size = 24,
   className = "",
+  interactive = true,
 }: {
   name: string;
   size?: number;
   className?: string;
+  interactive?: boolean;
 }) {
   const [failed, setFailed] = useState(false);
   const dim = `${size}px`;
   const initial = name.slice(0, 1).toUpperCase();
 
-  if (failed || !name) {
+  const inner =
-    return (
+    failed || !name ? (
       <div
-        className={`rounded bg-muted text-muted-foreground shrink-0 flex items-center justify-center font-bold ${className}`}
+        className="rounded bg-muted text-muted-foreground shrink-0 flex items-center justify-center font-bold"
         style={{ width: dim, height: dim, fontSize: size * 0.5 }}
         aria-label={name}
       >
         {initial}
       </div>
-    );
+    ) : (
-  }
-
-  return (
       <Image
         src={`https://mc-heads.net/avatar/${encodeURIComponent(name)}/${size}`}
         alt=""
@@ -36,7 +36,25 @@ export function PlayerAvatar({
         height={size}
         unoptimized
         onError={() => setFailed(true)}
-      className={`rounded shrink-0 bg-muted ${className}`}
+        className="rounded shrink-0 bg-muted"
       />
     );
+
+  if (!interactive || !name) {
+    return <span className={`inline-flex shrink-0 ${className}`}>{inner}</span>;
+  }
+
+  return (
+    <button
+      type="button"
+      aria-label={`Open profile for ${name}`}
+      onClick={(e) => {
+        e.stopPropagation();
+        dispatchAppEvent("player:open", { name });
+      }}
+      className={`inline-flex shrink-0 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-ring hover:brightness-110 transition ${className}`}
+    >
+      {inner}
+    </button>
+  );
 }

components/PlayerDrawer.tsx

@@ -0,0 +1,243 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { PlayerAvatar } from "@/components/PlayerAvatar";
+import { onAppEvent } from "@/lib/events";
+
+type PlayerData = {
+  ops: { name: string; uuid: string; level: number }[];
+  whitelist: { name: string; uuid: string }[];
+  banned: { name: string; uuid: string; reason: string }[];
+};
+
+type MetricEntry = { ts: string; players?: string[] };
+
+export function PlayerDrawer() {
+  const { data: session } = useSession();
+  const queryClient = useQueryClient();
+  const [name, setName] = useState<string | null>(null);
+  const [banReason, setBanReason] = useState("");
+
+  useEffect(() => onAppEvent("player:open", ({ name }) => setName(name)), []);
+
+  useEffect(() => {
+    if (!name) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setName(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [name]);
+
+  const authed = !!session;
+
+  const players = useQuery<PlayerData>({
+    queryKey: ["players"],
+    queryFn: () => fetch("/api/players").then((r) => r.json()),
+    enabled: authed && !!name,
+    staleTime: 10_000,
+  });
+
+  // Use existing analytics cache (last entry) to determine online now
+  const analytics = queryClient.getQueryData<MetricEntry[]>(["analytics", 6]);
+  const onlineNow =
+    (analytics && analytics.length > 0
+      ? analytics[analytics.length - 1].players || []
+      : []) as string[];
+
+  const isOp = !!name && !!players.data?.ops.some((p) => p.name === name);
+  const isWhitelisted =
+    !!name && !!players.data?.whitelist.some((p) => p.name === name);
+  const bannedEntry =
+    (name && players.data?.banned.find((p) => p.name === name)) || null;
+  const isBanned = !!bannedEntry;
+  const isOnline = !!name && onlineNow.includes(name);
+
+  const action = useMutation({
+    mutationFn: async (params: { action: string; reason?: string }) => {
+      if (!name) throw new Error("No player selected");
+      const res = await fetch("/api/players", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: params.action, player: name, reason: params.reason }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error);
+      return data;
+    },
+    onSuccess: (data) => {
+      toast.success(data.response || "Done");
+      setBanReason("");
+      queryClient.invalidateQueries({ queryKey: ["players"] });
+    },
+    onError: (err) => toast.error("Action failed", { description: err.message }),
+  });
+
+  if (!name) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-40 flex justify-end bg-black/40 backdrop-blur-[2px]"
+      role="dialog"
+      aria-modal="true"
+      aria-label={`Profile for ${name}`}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) setName(null);
+      }}
+    >
+      <aside className="h-full w-full sm:max-w-sm bg-card border-l border-border shadow-2xl flex flex-col animate-in slide-in-from-right duration-150">
+        <header className="p-4 border-b border-border flex items-start gap-3">
+          <PlayerAvatar name={name} size={48} interactive={false} />
+          <div className="min-w-0 flex-1">
+            <h2 className="text-base font-semibold truncate">{name}</h2>
+            <div className="flex items-center gap-1.5 mt-1 flex-wrap">
+              {isOnline && (
+                <Badge className="text-xs px-1.5 py-0 bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">
+                  Online
+                </Badge>
+              )}
+              {isOp && (
+                <Badge variant="secondary" className="text-xs px-1.5 py-0">
+                  Op
+                </Badge>
+              )}
+              {isWhitelisted && (
+                <Badge variant="secondary" className="text-xs px-1.5 py-0">
+                  Whitelisted
+                </Badge>
+              )}
+              {isBanned && (
+                <Badge
+                  variant="outline"
+                  className="text-xs px-1.5 py-0 border-red-500/40 text-red-300"
+                >
+                  Banned
+                </Badge>
+              )}
+              {!isOp && !isWhitelisted && !isBanned && (
+                <span className="text-xs text-muted-foreground">No roles</span>
+              )}
+            </div>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label="Close"
+            onClick={() => setName(null)}
+            className="shrink-0"
+          >
+            ✕
+          </Button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+          {!authed ? (
+            <p className="text-sm text-muted-foreground">
+              Log in as admin to manage this player.
+            </p>
+          ) : (
+            <>
+              {bannedEntry?.reason && (
+                <div>
+                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
+                    Ban reason
+                  </p>
+                  <p className="text-sm text-red-300 break-words">
+                    {bannedEntry.reason}
+                  </p>
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 gap-2">
+                <Button
+                  variant={isOp ? "outline" : "default"}
+                  onClick={() =>
+                    action.mutate({ action: isOp ? "deop" : "op" })
+                  }
+                  disabled={action.isPending}
+                  className="text-sm"
+                >
+                  {isOp ? "Deop" : "Make Op"}
+                </Button>
+                <Button
+                  variant={isWhitelisted ? "outline" : "default"}
+                  onClick={() =>
+                    action.mutate({
+                      action: isWhitelisted ? "whitelist remove" : "whitelist add",
+                    })
+                  }
+                  disabled={action.isPending}
+                  className="text-sm"
+                >
+                  {isWhitelisted ? "Remove whitelist" : "Add to whitelist"}
+                </Button>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+                  {isBanned ? "Ban" : "Ban player"}
+                </p>
+                {isBanned ? (
+                  <Button
+                    variant="outline"
+                    onClick={() => action.mutate({ action: "pardon" })}
+                    disabled={action.isPending}
+                    className="w-full"
+                  >
+                    Pardon
+                  </Button>
+                ) : (
+                  <>
+                    <Input
+                      placeholder="Reason (optional)"
+                      value={banReason}
+                      onChange={(e) => setBanReason(e.target.value)}
+                      className="h-9 text-sm"
+                    />
+                    <Button
+                      variant="destructive"
+                      onClick={() =>
+                        action.mutate({ action: "ban", reason: banReason || undefined })
+                      }
+                      disabled={action.isPending}
+                      className="w-full"
+                    >
+                      Ban {name}
+                    </Button>
+                  </>
+                )}
+              </div>
+
+              <Separator />
+
+              <div className="text-xs text-muted-foreground space-y-1">
+                <p>
+                  <span className="text-foreground font-medium">UUID:</span>{" "}
+                  <span className="font-mono break-all">
+                    {players.data?.ops.find((p) => p.name === name)?.uuid ||
+                      players.data?.whitelist.find((p) => p.name === name)?.uuid ||
+                      players.data?.banned.find((p) => p.name === name)?.uuid ||
+                      "—"}
+                  </span>
+                </p>
+                <p>
+                  Actions use RCON on the live server. Some commands take a
+                  moment to reflect.
+                </p>
+              </div>
+            </>
+          )}
+        </div>
+      </aside>
+    </div>
+  );
+}

lib/events.ts

@@ -0,0 +1,21 @@
+export type AppEvents = {
+  "player:open": { name: string };
+};
+
+export function dispatchAppEvent<K extends keyof AppEvents>(
+  name: K,
+  detail: AppEvents[K]
+): void {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(name, { detail }));
+}
+
+export function onAppEvent<K extends keyof AppEvents>(
+  name: K,
+  handler: (detail: AppEvents[K]) => void
+): () => void {
+  if (typeof window === "undefined") return () => {};
+  const listener = (e: Event) => handler((e as CustomEvent<AppEvents[K]>).detail);
+  window.addEventListener(name, listener);
+  return () => window.removeEventListener(name, listener);
+}

lib/snapshots.ts

@@ -4,6 +4,7 @@ import {
   readdirSync,
   copyFileSync,
   rmSync,
+  statSync,
   writeFileSync,
   readFileSync,
   unlinkSync,
@@ -11,6 +12,22 @@ import {
 import { join } from "path";
 import { MODS_DIR, CLIENT_MODS_DIR, MOD_METADATA_FILE } from "./constants";
 
+function dirSize(dir: string): number {
+  let total = 0;
+  try {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      const p = join(dir, entry.name);
+      if (entry.isDirectory()) total += dirSize(p);
+      else if (entry.isFile()) {
+        try {
+          total += statSync(p).size;
+        } catch {}
+      }
+    }
+  } catch {}
+  return total;
+}
+
 const SNAPSHOTS_DIR = "/home/minecraft/server/snapshots";
 const MAX_SNAPSHOTS = 10;
 
@@ -19,6 +36,7 @@ export type SnapshotMeta = {
   createdAt: string;
   modCount: number;
   mods: string[];
+  sizeBytes?: number;
 };
 
 function ensureDir(dir: string) {
@@ -133,7 +151,8 @@ export function listSnapshots(): (SnapshotMeta & { dirName: string })[] {
       const meta = JSON.parse(
         readFileSync(join(SNAPSHOTS_DIR, dirName, "meta.json"), "utf8")
       ) as SnapshotMeta;
-      return { ...meta, dirName };
+      const sizeBytes = dirSize(join(SNAPSHOTS_DIR, dirName));
+      return { ...meta, dirName, sizeBytes };
     })
     .sort(
       (a, b) =>