SSE events bridge, PWA service worker, offline banner, lazy admin tabs

- New /api/events SSE endpoint (authed): pushes status every 5s and chat
  on log-file mtime change (~1.5s poll). Heartbeat every 15s, hard-caps
  each stream at 10min so the browser gets a clean auth refresh on
  reconnect. Auto-aborts on client disconnect.
- Factored shared helpers out of the existing routes:
  - lib/server-status.ts (probeStatus, reused by /api/status + SSE)
  - lib/chat-log.ts (parseLogLine, readChatMessages, logMtime, reused by
    /api/chat + SSE)
- EventsBridge client (mounted in Providers) opens one EventSource per
  authed session and writes live data into the TanStack Query cache for
  ["status"] and ["chat"] — no refactor needed in consuming components,
  they keep reading their usual query keys.
- Now that SSE pushes updates, polling intervals bumped: StatusCard and
  ServerControls 10s -> 60s, ChatBridge 5s -> 30s. SSE handles realtime,
  polling is safety fallback.
- OfflineBanner: sticky amber bar when navigator.onLine flips false.
- PWA: minimal public/sw.js with shell + asset cache (network-first for
  HTML, stale-while-revalidate for static assets, never touches /api/*
  or text/event-stream). ServiceWorkerRegister client registers it in
  production only.
- AdminTabs now uses next/dynamic with skeleton fallbacks for Players /
  Chat / Mods / Backups / Logs, keeping initial /admin bundle smaller.

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

components/AdminTabs.tsx

@@ -1,14 +1,39 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ServerControls } from "@/components/ServerControls";
 import { Analytics } from "@/components/Analytics";
-import { PlayerManager } from "@/components/PlayerManager";
-import { ChatBridge } from "@/components/ChatBridge";
-import { ModManager } from "@/components/ModManager";
-import { BackupManager } from "@/components/BackupManager";
-import { LogViewer } from "@/components/LogViewer";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const TabFallback = () => (
+  <div className="space-y-3">
+    <Skeleton className="h-24 w-full" />
+    <Skeleton className="h-48 w-full" />
+  </div>
+);
+
+const PlayerManager = dynamic(
+  () => import("@/components/PlayerManager").then((m) => ({ default: m.PlayerManager })),
+  { loading: TabFallback, ssr: false }
+);
+const ChatBridge = dynamic(
+  () => import("@/components/ChatBridge").then((m) => ({ default: m.ChatBridge })),
+  { loading: TabFallback, ssr: false }
+);
+const ModManager = dynamic(
+  () => import("@/components/ModManager").then((m) => ({ default: m.ModManager })),
+  { loading: TabFallback, ssr: false }
+);
+const BackupManager = dynamic(
+  () => import("@/components/BackupManager").then((m) => ({ default: m.BackupManager })),
+  { loading: TabFallback, ssr: false }
+);
+const LogViewer = dynamic(
+  () => import("@/components/LogViewer").then((m) => ({ default: m.LogViewer })),
+  { loading: TabFallback, ssr: false }
+);
 
 const TABS = [
   { value: "server", label: "Server" },

components/ChatBridge.tsx

@@ -29,7 +29,7 @@ export function ChatBridge() {
   const { data: messages = [] } = useQuery<ChatMessage[]>({
     queryKey: ["chat"],
     queryFn: () => fetch("/api/chat?lines=50").then((r) => r.json()),
-    refetchInterval: 5000,
+    refetchInterval: 30_000,
     staleTime: 2000,
   });
 

components/EventsBridge.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { useSession } from "next-auth/react";
+import { useEffect } from "react";
+
+export function EventsBridge() {
+  const { data: session, status } = useSession();
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    if (status !== "authenticated" || !session) return;
+    if (typeof window === "undefined" || !("EventSource" in window)) return;
+
+    let closed = false;
+    let es: EventSource | null = null;
+
+    const connect = () => {
+      if (closed) return;
+      es = new EventSource("/api/events");
+
+      es.addEventListener("status", (e: MessageEvent) => {
+        try {
+          queryClient.setQueryData(["status"], JSON.parse(e.data));
+        } catch {}
+      });
+      es.addEventListener("chat", (e: MessageEvent) => {
+        try {
+          queryClient.setQueryData(["chat"], JSON.parse(e.data));
+        } catch {}
+      });
+
+      es.onerror = () => {
+        // Browser auto-retries, but if the server closed after the 10m cap
+        // we want a clean reconnect rather than tight reconnect loops.
+        if (closed) return;
+        es?.close();
+        es = null;
+        setTimeout(connect, 3000);
+      };
+    };
+
+    connect();
+    return () => {
+      closed = true;
+      es?.close();
+    };
+  }, [status, session, queryClient]);
+
+  return null;
+}

components/OfflineBanner.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function OfflineBanner() {
+  const [online, setOnline] = useState(true);
+
+  useEffect(() => {
+    if (typeof navigator === "undefined") return;
+    setOnline(navigator.onLine);
+    const on = () => setOnline(true);
+    const off = () => setOnline(false);
+    window.addEventListener("online", on);
+    window.addEventListener("offline", off);
+    return () => {
+      window.removeEventListener("online", on);
+      window.removeEventListener("offline", off);
+    };
+  }, []);
+
+  if (online) return null;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="sticky top-0 z-30 w-full bg-amber-500/20 border-b border-amber-500/30 text-amber-200 text-xs sm:text-sm px-3 py-1.5 text-center backdrop-blur"
+    >
+      You&apos;re offline — showing cached data. Live updates will resume automatically.
+    </div>
+  );
+}

components/ServerControls.tsx

@@ -39,7 +39,7 @@ export function ServerControls() {
   const { data: status, isLoading } = useQuery<ServerStatus>({
     queryKey: ["status"],
     queryFn: () => fetch("/api/status").then((r) => r.json()),
-    refetchInterval: 10000,
+    refetchInterval: 60_000,
     staleTime: 5000,
   });
 

components/ServiceWorkerRegister.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function ServiceWorkerRegister() {
+  useEffect(() => {
+    if (typeof navigator === "undefined") return;
+    if (!("serviceWorker" in navigator)) return;
+    if (process.env.NODE_ENV !== "production") return;
+
+    const register = () => {
+      navigator.serviceWorker
+        .register("/sw.js", { scope: "/" })
+        .catch(() => {});
+    };
+
+    if (document.readyState === "complete") register();
+    else window.addEventListener("load", register, { once: true });
+  }, []);
+
+  return null;
+}

components/StatusCard.tsx

@@ -20,7 +20,7 @@ export function StatusCard() {
   const { data, isLoading } = useQuery<ServerStatus>({
     queryKey: ["status"],
     queryFn: () => fetch("/api/status").then((r) => r.json()),
-    refetchInterval: 10000,
+    refetchInterval: 60_000,
     staleTime: 5000,
   });