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>

components/PlayerAvatar.tsx

@@ -2,41 +2,59 @@
 
 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) {
-    return (
+  const inner =
+    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>
+    ) : (
+      <Image
+        src={`https://mc-heads.net/avatar/${encodeURIComponent(name)}/${size}`}
+        alt=""
+        width={size}
+        height={size}
+        unoptimized
+        onError={() => setFailed(true)}
+        className="rounded shrink-0 bg-muted"
+      />
     );
+
+  if (!interactive || !name) {
+    return <span className={`inline-flex shrink-0 ${className}`}>{inner}</span>;
   }
 
   return (
-    <Image
-      src={`https://mc-heads.net/avatar/${encodeURIComponent(name)}/${size}`}
-      alt=""
-      width={size}
-      height={size}
-      unoptimized
-      onError={() => setFailed(true)}
-      className={`rounded shrink-0 bg-muted ${className}`}
-    />
+    <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>
   );
 }