Initial commit: Minecraft dashboard

Next.js 16 + Tailwind v4 + shadcn v4 dashboard for managing a modded
Forge 1.20.1 server. Includes server controls, player management, mod
manager with Modrinth search and dependency resolution, world backups,
snapshots, analytics, logs, and chat bridge.

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

components/LogViewer.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { useRef, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export function LogViewer() {
+  const logRef = useRef<HTMLPreElement>(null);
+  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [lines, setLines] = useState(100);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const autoScrollRef = useRef(true);
+
+  const { data, refetch, isFetching, isError, error } = useQuery<{ logs: string }>({
+    queryKey: ["logs", lines],
+    queryFn: async () => {
+      const res = await fetch(`/api/logs?lines=${lines}`);
+      if (!res.ok) throw new Error(`Failed to load logs (${res.status})`);
+      return res.json();
+    },
+    enabled: hasLoaded,
+    refetchInterval: autoRefresh ? 3000 : false,
+  });
+
+  // Auto-scroll only if user is near the bottom
+  useEffect(() => {
+    if (logRef.current && autoScrollRef.current) {
+      logRef.current.scrollTop = logRef.current.scrollHeight;
+    }
+  }, [data]);
+
+  const handleScroll = () => {
+    if (!logRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = logRef.current;
+    autoScrollRef.current = scrollHeight - scrollTop - clientHeight < 80;
+  };
+
+  // Fetch on mount
+  useEffect(() => {
+    setHasLoaded(true);
+  }, []);
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+          <div>
+            <CardTitle>Console Logs</CardTitle>
+            <CardDescription>Server output from journalctl</CardDescription>
+          </div>
+          <div className="flex items-center gap-2">
+            <select
+              value={lines}
+              onChange={(e) => {
+                setLines(Number(e.target.value));
+                setTimeout(() => refetch(), 50);
+              }}
+              className="h-10 rounded-md border border-input bg-muted px-2 text-sm text-foreground focus:outline-none"
+            >
+              <option value={50}>50 lines</option>
+              <option value={100}>100 lines</option>
+              <option value={200}>200 lines</option>
+            </select>
+            <Button
+              size="sm"
+              variant={autoRefresh ? "default" : "outline"}
+              onClick={() => {
+                setAutoRefresh(!autoRefresh);
+                if (!autoRefresh) autoScrollRef.current = true;
+              }}
+              className={`text-xs ${autoRefresh ? "animate-pulse" : ""}`}
+            >
+              {autoRefresh ? "Live" : "Auto"}
+            </Button>
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={() => refetch()}
+              disabled={isFetching}
+            >
+              {isFetching ? "..." : "Refresh"}
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <pre
+          ref={logRef}
+          onScroll={handleScroll}
+          className={`rounded-lg border bg-background p-3 sm:p-4 h-[300px] sm:h-[450px] overflow-y-auto font-mono text-xs leading-relaxed whitespace-pre-wrap break-all ${
+            isError ? "border-red-500/30 text-red-300" : "border-border text-muted-foreground"
+          }`}
+        >
+          {isError
+            ? `Failed to load logs: ${error instanceof Error ? error.message : "unknown error"}`
+            : data?.logs || (isFetching ? "Loading logs..." : "No logs available.")}
+        </pre>
+      </CardContent>
+    </Card>
+  );
+}