256 lines
8.5 KiB
TypeScript
256 lines
8.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState, useCallback } from "react";
|
|
import { io, Socket } from "socket.io-client";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Terminal, Send, Trash2, AlertCircle } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
|
|
interface LogLine {
|
|
text: string;
|
|
timestamp: number;
|
|
type: "info" | "warn" | "error" | "raw";
|
|
}
|
|
|
|
function classifyLine(line: string): LogLine["type"] {
|
|
if (/\[WARN\]|WARNING/i.test(line)) return "warn";
|
|
if (/\[ERROR\]|SEVERE|Exception|Error/i.test(line)) return "error";
|
|
return "info";
|
|
}
|
|
|
|
function LineColor({ type }: { type: LogLine["type"] }) {
|
|
const colors = {
|
|
info: "text-zinc-300",
|
|
warn: "text-amber-400",
|
|
error: "text-red-400",
|
|
raw: "text-zinc-500",
|
|
};
|
|
return colors[type];
|
|
}
|
|
|
|
const MAX_LINES = 1000;
|
|
|
|
export default function ConsolePage() {
|
|
const [lines, setLines] = useState<LogLine[]>([]);
|
|
const [command, setCommand] = useState("");
|
|
const [connected, setConnected] = useState(false);
|
|
const [history, setHistory] = useState<string[]>([]);
|
|
const [historyIndex, setHistoryIndex] = useState(-1);
|
|
const socketRef = useRef<Socket | null>(null);
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const autoScrollRef = useRef(true);
|
|
|
|
useEffect(() => {
|
|
const socket = io("/console", {
|
|
transports: ["websocket"],
|
|
});
|
|
socketRef.current = socket;
|
|
|
|
socket.on("connect", () => setConnected(true));
|
|
socket.on("disconnect", () => setConnected(false));
|
|
socket.on("connect_error", () => {
|
|
toast.error("Failed to connect to server console");
|
|
});
|
|
|
|
socket.on("output", (data: { line: string; timestamp: number }) => {
|
|
setLines((prev) => {
|
|
const newLine: LogLine = {
|
|
text: data.line,
|
|
timestamp: data.timestamp,
|
|
type: classifyLine(data.line),
|
|
};
|
|
const updated = [...prev, newLine];
|
|
return updated.length > MAX_LINES ? updated.slice(-MAX_LINES) : updated;
|
|
});
|
|
});
|
|
|
|
// Receive buffered history on connect
|
|
socket.on("history", (data: string[] | { lines: string[] }) => {
|
|
const rawLines = Array.isArray(data) ? data : (data?.lines ?? []);
|
|
const historicalLines = rawLines.map((line) => ({
|
|
text: line,
|
|
timestamp: Date.now(),
|
|
type: classifyLine(line) as LogLine["type"],
|
|
}));
|
|
setLines(historicalLines);
|
|
});
|
|
|
|
return () => {
|
|
socket.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
// Auto-scroll to bottom
|
|
useEffect(() => {
|
|
if (autoScrollRef.current && scrollRef.current) {
|
|
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
|
}
|
|
}, [lines]);
|
|
|
|
const sendCommand = useCallback(() => {
|
|
const cmd = command.trim();
|
|
if (!cmd || !socketRef.current) return;
|
|
|
|
// Add to local history
|
|
setHistory((prev) => {
|
|
const updated = [cmd, ...prev.filter((h) => h !== cmd)].slice(0, 50);
|
|
return updated;
|
|
});
|
|
setHistoryIndex(-1);
|
|
|
|
// Echo to console
|
|
setLines((prev) => [
|
|
...prev,
|
|
{ text: `> ${cmd}`, timestamp: Date.now(), type: "raw" },
|
|
]);
|
|
|
|
socketRef.current.emit("command", { command: cmd });
|
|
setCommand("");
|
|
}, [command]);
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") {
|
|
sendCommand();
|
|
} else if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
const newIndex = Math.min(historyIndex + 1, history.length - 1);
|
|
setHistoryIndex(newIndex);
|
|
if (history[newIndex]) setCommand(history[newIndex]);
|
|
} else if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
const newIndex = Math.max(historyIndex - 1, -1);
|
|
setHistoryIndex(newIndex);
|
|
setCommand(newIndex === -1 ? "" : history[newIndex] ?? "");
|
|
}
|
|
};
|
|
|
|
const formatTime = (ts: number) =>
|
|
new Date(ts).toLocaleTimeString("en", { hour12: false });
|
|
|
|
return (
|
|
<div className="p-6 h-full flex flex-col gap-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">Server Console</h1>
|
|
<p className="text-zinc-400 text-sm mt-1">
|
|
Real-time server output and command input
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Badge
|
|
className={
|
|
connected
|
|
? "bg-emerald-500/20 text-emerald-400 border-emerald-500/30"
|
|
: "bg-red-500/20 text-red-400 border-red-500/30"
|
|
}
|
|
>
|
|
<span
|
|
className={`w-1.5 h-1.5 rounded-full mr-1.5 ${
|
|
connected ? "bg-emerald-500" : "bg-red-500"
|
|
} animate-pulse`}
|
|
/>
|
|
{connected ? "Connected" : "Disconnected"}
|
|
</Badge>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="border-zinc-700 text-zinc-400 hover:text-white"
|
|
onClick={() => setLines([])}
|
|
>
|
|
<Trash2 className="w-4 h-4 mr-1.5" />
|
|
Clear
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Card className="bg-zinc-900 border-zinc-800 flex-1 min-h-0 flex flex-col">
|
|
<CardHeader className="py-3 px-4 border-b border-zinc-800 flex-row items-center gap-2">
|
|
<Terminal className="w-4 h-4 text-emerald-500" />
|
|
<CardTitle className="text-sm font-medium text-zinc-400">
|
|
Console Output
|
|
</CardTitle>
|
|
<span className="ml-auto text-xs text-zinc-600">
|
|
{lines.length} lines
|
|
</span>
|
|
</CardHeader>
|
|
|
|
<CardContent className="p-0 flex-1 min-h-0">
|
|
<div
|
|
ref={scrollRef}
|
|
onScroll={(e) => {
|
|
const el = e.currentTarget;
|
|
autoScrollRef.current =
|
|
el.scrollTop + el.clientHeight >= el.scrollHeight - 20;
|
|
}}
|
|
className="h-full overflow-y-auto font-mono text-xs p-4 space-y-0.5"
|
|
style={{ maxHeight: "calc(100vh - 280px)" }}
|
|
>
|
|
{lines.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-40 text-zinc-600">
|
|
<Terminal className="w-8 h-8 mb-2 opacity-50" />
|
|
<p>Waiting for server output...</p>
|
|
</div>
|
|
) : (
|
|
lines.map((line, i) => (
|
|
<div key={i} className="flex gap-3 leading-5">
|
|
<span className="text-zinc-700 shrink-0 select-none">
|
|
{formatTime(line.timestamp)}
|
|
</span>
|
|
<span
|
|
className={`break-all ${
|
|
{
|
|
info: "text-zinc-300",
|
|
warn: "text-amber-400",
|
|
error: "text-red-400",
|
|
raw: "text-emerald-400",
|
|
}[line.type]
|
|
}`}
|
|
>
|
|
{line.text}
|
|
</span>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
|
|
{/* Command input */}
|
|
<div className="p-3 border-t border-zinc-800 flex gap-2">
|
|
<div className="flex-1 flex items-center gap-2 bg-zinc-950 border border-zinc-700 rounded-md px-3 focus-within:border-emerald-500/50 transition-colors">
|
|
<span className="text-emerald-500 font-mono text-sm select-none">
|
|
/
|
|
</span>
|
|
<input
|
|
type="text"
|
|
value={command}
|
|
onChange={(e) => setCommand(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Enter server command... (↑↓ for history)"
|
|
disabled={!connected}
|
|
className="flex-1 bg-transparent py-2 text-sm text-white placeholder:text-zinc-600 outline-none font-mono"
|
|
/>
|
|
</div>
|
|
<Button
|
|
onClick={sendCommand}
|
|
disabled={!connected || !command.trim()}
|
|
className="bg-emerald-600 hover:bg-emerald-500 text-white shrink-0"
|
|
>
|
|
<Send className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{!connected && (
|
|
<div className="flex items-center gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-400 text-sm">
|
|
<AlertCircle className="w-4 h-4 shrink-0" />
|
|
Console disconnected. The server may be offline or restarting.
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|