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>
This commit is contained in:
hurkicorgi 2026-04-13 05:48:00 -06:00
parent 19d66c2de6
commit 359a12ef9d
14 changed files with 460 additions and 132 deletions

View file

@ -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" },