Make SCUM logs live relay only

This commit is contained in:
npc0-hue
2026-09-01 14:26:00 +08:00
parent 3f348401a9
commit 7d9c1b7e9e
28 changed files with 1011 additions and 175 deletions
@@ -86,7 +86,9 @@ describe("ServerManagementTerminalDrawer", () => {
expect(Array.from(container?.querySelectorAll(".terminal-text") ?? []).filter((node) => node.textContent === "generation A live output")).toHaveLength(1);
expect(apiMocks.openServerLogEvents).toHaveBeenCalledTimes(1);
expect(apiMocks.listLogStreams).not.toHaveBeenCalled();
expect(apiMocks.queryLogStream).not.toHaveBeenCalled();
expect(apiMocks.dispatchSourceRCONCommand).not.toHaveBeenCalled();
expect(container?.textContent).not.toContain("查看历史");
});
it("uses the server-provided clock for terminal system lines", async () => {
@@ -99,7 +101,7 @@ describe("ServerManagementTerminalDrawer", () => {
expect(systemLine?.querySelector("time")?.textContent).toBe(formatTerminalServerTime(serverTime));
});
it("loads the current session tail when stream metadata arrives", async () => {
it("does not load stored output when current stream metadata arrives", async () => {
const stream = logStream("stdout-current", "session-current", "process.stdout");
stream.latestSeq = 42;
apiMocks.queryLogStream.mockResolvedValue({ logStreamId: stream.id, entries: [logEntry(41, "tail before drawer opened"), logEntry(42, "latest stored output")], nextSeq: 42, latestSeq: 42 });
@@ -109,9 +111,9 @@ describe("ServerManagementTerminalDrawer", () => {
await emitStream(stream);
await flushPromises();
expect(container?.textContent).toContain("tail before drawer opened");
expect(container?.textContent).toContain("latest stored output");
expect(apiMocks.queryLogStream).toHaveBeenCalledWith({ logStreamId: stream.id, afterSeq: 0, limit: 500 });
expect(container?.textContent).not.toContain("tail before drawer opened");
expect(container?.textContent).not.toContain("latest stored output");
expect(apiMocks.queryLogStream).not.toHaveBeenCalled();
});
it("renders an empty current session without accepting unrelated or sessionless logs", async () => {
@@ -164,36 +166,17 @@ describe("ServerManagementTerminalDrawer", () => {
expect(apiMocks.openServerLogEvents).toHaveBeenCalledTimes(1);
});
it("keeps selected historical output separate while live output continues in the background", async () => {
const oldStream = logStream("stdout-old", "session-old", "process.stdout", "2026-08-01T00:00:00Z");
oldStream.latestSeq = 900;
apiMocks.listLogStreams.mockResolvedValue({ items: [oldStream], count: 1 });
apiMocks.queryLogStream.mockImplementation((request: { logStreamId: string }) => Promise.resolve(request.logStreamId === oldStream.id
? { logStreamId: oldStream.id, entries: [logEntry(1, "selected historical output", "2026-08-01T00:00:01Z")], nextSeq: 1, latestSeq: 1 }
: { logStreamId: request.logStreamId, entries: [], nextSeq: 0, latestSeq: 0 }));
it("keeps the terminal as a pure current live stream and never opens platform history", async () => {
await renderDrawer();
await emitSession("session-current");
await emitStream(logStream("stdout-current", "session-current", "process.stdout"));
await emitLog("stdout-current", "session-current", "process.stdout", logEntry(1, "current live output"));
await clickButton("查看历史");
await flushPromises();
const select = container?.querySelector<HTMLSelectElement>('select[aria-label="选择历史日志流"]');
if (!select) throw new Error("history stream selector not found");
await act(async () => setSelectValue(select, oldStream.id));
await flushPromises();
expect(container?.textContent).toContain("selected historical output");
expect(container?.textContent).not.toContain("current live output");
await emitLog("stdout-current", "session-current", "process.stdout", logEntry(2, "new live output while viewing history"));
expect(container?.textContent).not.toContain("new live output while viewing history");
await clickButton("实时输出");
expect(container?.textContent).toContain("current live output");
expect(container?.textContent).toContain("new live output while viewing history");
expect(container?.textContent).not.toContain("selected historical output");
expect(apiMocks.listLogStreams).toHaveBeenCalledWith("server-1");
expect(apiMocks.queryLogStream).toHaveBeenCalledWith({ logStreamId: oldStream.id, afterSeq: 400, limit: 500 });
expect(container?.textContent).not.toContain("查看历史");
expect(container?.querySelector('select[aria-label="选择历史日志流"]')).toBeNull();
expect(apiMocks.listLogStreams).not.toHaveBeenCalled();
expect(apiMocks.queryLogStream).not.toHaveBeenCalled();
expect(apiMocks.dispatchSourceRCONCommand).not.toHaveBeenCalled();
});
@@ -262,11 +245,6 @@ function setInputValue(input: HTMLInputElement, value: string) {
input.dispatchEvent(new Event("input", { bubbles: true }));
}
function setSelectValue(select: HTMLSelectElement, value: string) {
Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, "value")?.set?.call(select, value);
select.dispatchEvent(new Event("change", { bubbles: true }));
}
function logStream(id: string, logSessionId: string, streamKey: string, updatedAt = "2026-08-14T00:00:00Z"): LogStreamResponse {
return { id, serverInstanceId: "server-1", source: "process", streamKey, logSessionId, sessionStartedAt: updatedAt, latestSeq: 1, storageBackend: "database", retentionPolicy: "default", createdAt: updatedAt, updatedAt };
}
@@ -1,4 +1,4 @@
import { History, ListChecks, Send, Sparkles, Terminal, Trash2, X } from "lucide-react";
import { ListChecks, Send, Sparkles, Terminal, Trash2, X } from "lucide-react";
import { type FormEvent, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { platformApiClient } from "../api/client";
@@ -10,13 +10,11 @@ import { formatTerminalLogTime, formatTerminalServerTime } from "../utils/logTim
import { EmptyState, ResultBadge } from "./StateViews";
type LoadState<T> = { status: "loading" } | { status: "error"; reason: string } | { status: "ready"; data: T };
type HistoryLineState = { status: "idle" } | LoadState<TerminalLine[]>;
type TerminalLine = { id: string; tone: "input" | "info" | "success" | "warn" | "error"; text: string; at: string; sortKey: number; streamKey?: string; level?: string; seq?: number };
type TerminalQuickCommand = { label: string; command: string; hint: string };
const terminalJobResultPollMs = 1000;
const terminalJobResultPollAttempts = 30;
const terminalHistoryWindow = 500;
const maxTerminalLines = 10000;
const terminalQuickCommandCatalog: Record<string, TerminalQuickCommand[]> = {
"game.scum": [
@@ -92,17 +90,11 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
const [result, setResult] = useState<{ status: "pending" | "succeeded" | "failed"; label: string } | null>(null);
const [followLatest, setFollowLatest] = useState(true);
const [liveSessionId, setLiveSessionId] = useState<string | null>(null);
const [historyOpen, setHistoryOpen] = useState(false);
const [historyStreams, setHistoryStreams] = useState<LoadState<LogStreamResponse[]>>({ status: "loading" });
const [historyLines, setHistoryLines] = useState<HistoryLineState>({ status: "idle" });
const [selectedHistoryStreamId, setSelectedHistoryStreamId] = useState("");
const outputRef = useRef<HTMLDivElement>(null);
const followLatestRef = useRef(true);
const serverTimeRef = useRef<string | undefined>(undefined);
const initialHistoryPendingRef = useRef(false);
const liveSessionRef = useRef<string | null | undefined>(undefined);
const historyRequestRef = useRef(0);
const liveTailLoadedRef = useRef(new Map<string, number>());
const quickCommands = useMemo(() => terminalQuickCommandsForPlugin(pluginId), [pluginId]);
const supportsCommands = quickCommands.length > 0;
@@ -125,22 +117,6 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
});
}, []);
const loadLiveStreamTail = useCallback((stream: LogStreamResponse) => {
const latestSeq = Number(stream.latestSeq);
if (!Number.isFinite(latestSeq) || latestSeq <= 0) return;
const loadedThrough = liveTailLoadedRef.current.get(stream.id) ?? 0;
if (loadedThrough >= latestSeq) return;
liveTailLoadedRef.current.set(stream.id, latestSeq);
void platformApiClient.queryLogStream({ logStreamId: stream.id, afterSeq: Math.max(0, latestSeq - terminalHistoryWindow), limit: terminalHistoryWindow }).then((response) => {
if (!eventBelongsToLiveSession(stream.logSessionId, liveSessionRef.current)) return;
appendLines(response.entries.map((entry) => terminalLineFromLog({ ...stream, latestSeq: response.latestSeq }, entry)));
lockTerminalFollow();
}).catch((error) => {
if (!eventBelongsToLiveSession(stream.logSessionId, liveSessionRef.current)) return;
appendLines([terminalSystemLine("warn", `当前会话尾部日志读取失败,等待后续实时输出:${error instanceof Error ? error.message : "未知错误"}`, "SYSTEM", `tail-error-${stream.id}`, serverTimeRef.current)]);
});
}, [appendLines, lockTerminalFollow]);
useEffect(() => {
if (!open) return;
setStreams({ status: "loading" });
@@ -149,14 +125,8 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
setResult(null);
setHistoryIndex(null);
setLiveSessionId(null);
setHistoryOpen(false);
setHistoryStreams({ status: "loading" });
setHistoryLines({ status: "idle" });
setSelectedHistoryStreamId("");
liveSessionRef.current = undefined;
liveTailLoadedRef.current.clear();
serverTimeRef.current = undefined;
historyRequestRef.current += 1;
initialHistoryPendingRef.current = true;
followLatestRef.current = true;
setFollowLatest(true);
@@ -189,7 +159,7 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
setStreams({ status: "ready", data: [] });
setLines((current) => mergeTerminalLines(current, [nextSessionId
? terminalSystemLine("info", previousSessionId === undefined ? "已跟随当前受管进程输出会话。" : "Run 已切换到新的受管进程输出会话。", "SYSTEM", `session-${nextSessionId}`, serverTimeRef.current)
: terminalSystemLine("warn", "当前没有可跟随的受管进程输出;旧日志可从历史查看。", "SYSTEM", "session-empty", serverTimeRef.current)
: terminalSystemLine("warn", "当前没有可跟随的受管进程输出。", "SYSTEM", "session-empty", serverTimeRef.current)
]));
lockTerminalFollow();
});
@@ -198,7 +168,6 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
if (!stream || !eventBelongsToLiveSession(stream.logSessionId, liveSessionRef.current)) return;
ready = true;
setStreams((current) => ({ status: "ready", data: mergeLogStreams(current.status === "ready" ? current.data : [], stream) }));
loadLiveStreamTail(stream);
});
events.addEventListener("ready", () => {
ready = true;
@@ -217,36 +186,7 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
if (!ready) setStreams({ status: "error", reason: "实时日志推送连接失败" });
};
return () => events.close();
}, [appendLines, loadLiveStreamTail, lockTerminalFollow, open, serverId]);
useEffect(() => {
if (!open || !historyOpen) return;
let cancelled = false;
setHistoryStreams({ status: "loading" });
void platformApiClient.listLogStreams(serverId).then((response) => {
if (!cancelled) setHistoryStreams({ status: "ready", data: [...response.items].sort((left, right) => Date.parse(right.updatedAt) - Date.parse(left.updatedAt)) });
}).catch((error) => {
if (!cancelled) setHistoryStreams({ status: "error", reason: error instanceof Error ? error.message : "历史日志列表加载失败" });
});
return () => { cancelled = true; };
}, [historyOpen, open, serverId]);
async function selectHistoryStream(streamId: string) {
const stream = historyStreams.status === "ready" ? historyStreams.data.find((item) => item.id === streamId) : undefined;
if (!stream) return;
const requestId = historyRequestRef.current + 1;
historyRequestRef.current = requestId;
setSelectedHistoryStreamId(streamId);
setHistoryLines({ status: "loading" });
try {
const response = await platformApiClient.queryLogStream({ logStreamId: streamId, afterSeq: Math.max(0, stream.latestSeq - terminalHistoryWindow), limit: terminalHistoryWindow });
if (historyRequestRef.current !== requestId) return;
setHistoryLines({ status: "ready", data: response.entries.map((entry) => terminalLineFromLog(stream, entry)) });
} catch (error) {
if (historyRequestRef.current !== requestId) return;
setHistoryLines({ status: "error", reason: error instanceof Error ? error.message : "历史日志加载失败" });
}
}
}, [appendLines, lockTerminalFollow, open, serverId]);
function selectQuickCommand(item: TerminalQuickCommand) {
setCommand(item.command);
@@ -276,20 +216,9 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
}
function clearTerminalBuffer() {
if (historyOpen) {
setHistoryLines({ status: "ready", data: [] });
return;
}
setLines([]);
}
function toggleHistory() {
historyRequestRef.current += 1;
setHistoryOpen((current) => !current);
setSelectedHistoryStreamId("");
setHistoryLines({ status: "idle" });
}
function handleTerminalScroll() {
const output = outputRef.current;
if (!output || initialHistoryPendingRef.current) return;
@@ -347,19 +276,17 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
<div className="terminal-output-topbar">
<div>
<strong>{serverName}</strong>
<span>{historyOpen ? "历史日志(独立于实时终端)" : `当前受管进程会话${liveSessionId ? " · SSE 实时推送" : " · 等待 Run 输出"}`} · {streams.status === "ready" ? "已连接" : streams.status === "loading" ? "连接日志流" : "日志流异常"} · {followLatest ? "自动置底" : "已解锁滚动"}</span>
<span>{`当前受管进程会话${liveSessionId ? " · SSE 实时推送" : " · 等待 Run 输出"}`} · {streams.status === "ready" ? "已连接" : streams.status === "loading" ? "连接日志流" : "日志流异常"} · {followLatest ? "自动置底" : "已解锁滚动"}</span>
</div>
<div>
<button type="button" className="terminal-output-action" onClick={clearTerminalBuffer}><Trash2 size={14} /><span></span></button>
<button type="button" className="terminal-output-action" onClick={toggleHistory}><History size={14} /><span>{historyOpen ? "实时输出" : "查看历史"}</span></button>
<button type="button" className="terminal-output-action" aria-label="关闭打开终端" onClick={onClose}><X size={14} /><span></span></button>
</div>
</div>
<div ref={outputRef} className="terminal-output" role="log" aria-live="polite" onScroll={handleTerminalScroll}>
{!historyOpen && streams.status === "error" && <div className="terminal-line terminal-line-error terminal-source-system"><time>{formatTerminalServerTime(serverTimeRef.current)}</time><span className="terminal-text">{streams.reason}</span></div>}
{historyOpen && <HistoryLogView streams={historyStreams} lines={historyLines} selectedStreamId={selectedHistoryStreamId} onSelect={selectHistoryStream} serverTime={serverTimeRef.current} />}
{!historyOpen && streams.status === "ready" && lines.length === 0 && <div className="terminal-line terminal-line-warn terminal-source-system"><time>{formatTerminalServerTime(serverTimeRef.current)}</time><span className="terminal-text">{liveSessionId ? "当前受管进程会话暂无输出,后续输出会自动追加。" : "当前没有可跟随的受管进程输出;旧日志可从历史查看。"}</span></div>}
{!historyOpen && lines.map((line) => <div key={line.id} className={terminalLineClassName(line)}><time>{line.at}</time><span className="terminal-text">{line.text}</span></div>)}
{streams.status === "error" && <div className="terminal-line terminal-line-error terminal-source-system"><time>{formatTerminalServerTime(serverTimeRef.current)}</time><span className="terminal-text">{streams.reason}</span></div>}
{streams.status === "ready" && lines.length === 0 && <div className="terminal-line terminal-line-warn terminal-source-system"><time>{formatTerminalServerTime(serverTimeRef.current)}</time><span className="terminal-text">{liveSessionId ? "当前受管进程会话暂无输出,后续输出会自动追加。" : "当前没有可跟随的受管进程输出。"}</span></div>}
{lines.map((line) => <div key={line.id} className={terminalLineClassName(line)}><time>{line.at}</time><span className="terminal-text">{line.text}</span></div>)}
</div>
</section>
<section className="terminal-command-dock" aria-label="terminal command controls">
@@ -386,42 +313,6 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
);
}
interface HistoryLogViewProps {
streams: LoadState<LogStreamResponse[]>;
lines: HistoryLineState;
selectedStreamId: string;
onSelect: (streamId: string) => Promise<void>;
serverTime?: string;
}
function HistoryLogView({ streams, lines, selectedStreamId, onSelect, serverTime }: HistoryLogViewProps) {
if (streams.status === "loading") return <TerminalStatusLine tone="info" label="正在加载历史日志列表。" serverTime={serverTime} />;
if (streams.status === "error") return <TerminalStatusLine tone="error" label={streams.reason} serverTime={serverTime} />;
if (streams.data.length === 0) return <TerminalStatusLine tone="warn" label="暂无可查看的历史日志流。" serverTime={serverTime} />;
return (
<>
<div className="terminal-line terminal-line-info terminal-source-system">
<time></time>
<span className="terminal-text">
<select aria-label="选择历史日志流" value={selectedStreamId} onChange={(event) => void onSelect(event.target.value)}>
<option value="" disabled></option>
{streams.data.map((stream) => <option key={stream.id} value={stream.id}>{stream.streamKey} · {stream.updatedAt}</option>)}
</select>
</span>
</div>
{lines.status === "idle" && <TerminalStatusLine tone="info" label="请选择一个历史日志流。" serverTime={serverTime} />}
{lines.status === "loading" && <TerminalStatusLine tone="info" label="正在读取所选历史日志。" serverTime={serverTime} />}
{lines.status === "error" && <TerminalStatusLine tone="error" label={lines.reason} serverTime={serverTime} />}
{lines.status === "ready" && lines.data.length === 0 && <TerminalStatusLine tone="warn" label="所选历史日志流暂无保留内容。" serverTime={serverTime} />}
{lines.status === "ready" && lines.data.map((line) => <div key={line.id} className={terminalLineClassName(line)}><time>{line.at}</time><span className="terminal-text">{line.text}</span></div>)}
</>
);
}
function TerminalStatusLine({ tone, label, serverTime }: { tone: "info" | "warn" | "error"; label: string; serverTime?: string }) {
return <div className={`terminal-line terminal-line-${tone} terminal-source-system`}><time>{formatTerminalServerTime(serverTime)}</time><span className="terminal-text">{label}</span></div>;
}
function terminalQuickCommandsForPlugin(pluginId: string): TerminalQuickCommand[] {
return terminalQuickCommandCatalog[pluginId] ?? [];
}