Per-player playtime tracking + sparkline hover tooltips

- New GET /api/players/playtime (authed): reads each vanilla stats file
  under /home/minecraft/server/world/stats and maps uuid→name via
  usercache.json. Returns playtime in ticks and hours, plus file mtime
  as "last seen". Memoized 60s via lib/cache#memoAsync.
- New PlaytimeLeaderboard card in the Players tab:
    - Rank, avatar (click → PlayerDrawer), relative last-seen, hours.
    - Top 10 by default with toggle to show all; combined hours badge.
- PlayerDrawer surfaces the player's total hours + last-seen using the
  same cached playtime query, plus fills in UUID if the player is not
  in ops/whitelist/banned.
- lib/time.ts: formatHours() — minutes under 1h, "H.Hh" under a day,
  "Dd Hh" above.
- Analytics sparklines gain hover/touch tooltips:
    - Timestamps threaded through from each MetricEntry.
    - SVG overlay captures onMouseMove/onTouchMove, computes nearest
      index by x, draws a dashed guide line + focus dot.
    - Floating tooltip shows HH:MM + formatted value with unit; edge
      clamping keeps it in-frame at the extremes.
    - Per-chart formatValue so RAM shows GB, CPU 0 decimals, Players
      integer, TPS 1 decimal. Keeps the peak-player marker intact.

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

components/PlaytimeLeaderboard.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { PlayerAvatar } from "@/components/PlayerAvatar";
+import { formatHours, timeAgo } from "@/lib/time";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export type PlaytimeEntry = {
+  uuid: string;
+  name: string;
+  playtimeTicks: number;
+  playtimeHours: number;
+  lastPlayedMs: number;
+};
+
+const TOP_N = 10;
+
+export function PlaytimeLeaderboard() {
+  const [showAll, setShowAll] = useState(false);
+  const { data = [], isLoading, isError } = useQuery<PlaytimeEntry[]>({
+    queryKey: ["players-playtime"],
+    queryFn: () => fetch("/api/players/playtime").then((r) => r.json()),
+    staleTime: 60_000,
+    refetchInterval: 5 * 60_000,
+  });
+
+  const visible = showAll ? data : data.slice(0, TOP_N);
+  const totalHours = data.reduce((sum, e) => sum + e.playtimeHours, 0);
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between gap-2 flex-wrap">
+          <div>
+            <CardTitle className="text-base">Playtime</CardTitle>
+            <CardDescription>
+              Total hours played by each whitelisted player
+            </CardDescription>
+          </div>
+          {data.length > 0 && (
+            <div className="text-right">
+              <p className="text-xs text-muted-foreground">Combined</p>
+              <p className="text-sm font-semibold tabular-nums">
+                {formatHours(totalHours)}
+              </p>
+            </div>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <ul className="space-y-1">
+            {Array.from({ length: 5 }).map((_, i) => (
+              <li key={i} className="flex items-center gap-3 px-3 py-2">
+                <Skeleton className="h-6 w-6 rounded" />
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-3 w-14 ml-auto" />
+              </li>
+            ))}
+          </ul>
+        ) : isError ? (
+          <p className="text-sm text-red-300 text-center py-4">
+            Failed to load playtime.
+          </p>
+        ) : data.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No playtime recorded yet.
+          </p>
+        ) : (
+          <>
+            <ol className="space-y-1">
+              {visible.map((p, i) => (
+                <li
+                  key={p.uuid}
+                  className="flex items-center gap-3 px-3 py-2 rounded-md bg-muted/50"
+                >
+                  <span className="text-xs font-bold text-muted-foreground tabular-nums w-5 text-center shrink-0">
+                    {i + 1}
+                  </span>
+                  <PlayerAvatar name={p.name} size={24} />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-sm font-medium truncate">{p.name}</p>
+                    <p
+                      className="text-xs text-muted-foreground"
+                      title={new Date(p.lastPlayedMs).toLocaleString()}
+                    >
+                      last seen {timeAgo(p.lastPlayedMs)}
+                    </p>
+                  </div>
+                  <Badge
+                    variant="secondary"
+                    className="text-xs px-1.5 py-0 tabular-nums shrink-0"
+                  >
+                    {formatHours(p.playtimeHours)}
+                  </Badge>
+                </li>
+              ))}
+            </ol>
+            {data.length > TOP_N && (
+              <div className="text-center mt-3">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => setShowAll((v) => !v)}
+                  className="text-xs"
+                >
+                  {showAll ? "Show top 10" : `Show all ${data.length}`}
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}