Implement platform management features

platform_web/components/ServerManagementTerminalDrawer.tsx

@@ -1,14 +1,15 @@
-import { ListChecks, Send, Sparkles, Terminal, Trash2, X } from "lucide-react";
+import { History, 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";
 import type { GameClientBridgeCommandResponse, LogEntryBody, LogStreamResponse } from "../api/types";
 import { scumManagementRCONCommandRequest } from "../schemas/scumManagementRcon";
 import { cx } from "../utils/classes";
-import { mergeLogStreams, parseLogStreamEvent, parseServerLogEvent, streamFromServerLogEvent } from "../utils/logEvents";
+import { mergeLogStreams, parseLogSessionEvent, parseLogStreamEvent, parseServerLogEvent, streamFromServerLogEvent } from "../utils/logEvents";
 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 };
 
@@ -89,9 +90,16 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
   const [historyIndex, setHistoryIndex] = useState<number | null>(null);
   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 initialHistoryPendingRef = useRef(false);
+  const liveSessionRef = useRef<string | null | undefined>(undefined);
+  const historyRequestRef = useRef(0);
   const quickCommands = useMemo(() => terminalQuickCommandsForPlugin(pluginId), [pluginId]);
   const supportsCommands = quickCommands.length > 0;
 
@@ -121,10 +129,17 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
     setPending(false);
     setResult(null);
     setHistoryIndex(null);
+    setLiveSessionId(null);
+    setHistoryOpen(false);
+    setHistoryStreams({ status: "loading" });
+    setHistoryLines({ status: "idle" });
+    setSelectedHistoryStreamId("");
+    liveSessionRef.current = undefined;
+    historyRequestRef.current += 1;
     initialHistoryPendingRef.current = true;
     followLatestRef.current = true;
     setFollowLatest(true);
-    setLines([terminalSystemLine("info", supportsCommands ? "连接平台日志推送，先补最近历史再实时追加。" : "该插件暂未声明可用的终端命令通道。", "SYSTEM")]);
+    setLines([terminalSystemLine("info", supportsCommands ? "正在连接当前受管进程输出。" : "该插件暂未声明可用的终端命令通道。", "SYSTEM")]);
   }, [open, supportsCommands]);
 
   useEffect(() => {
@@ -140,9 +155,24 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
     if (!open) return undefined;
     let ready = false;
     const events = platformApiClient.openServerLogEvents(serverId, { historyLimit: terminalInitialHistoryWindow });
+    events.addEventListener("session", (event) => {
+      const session = parseLogSessionEvent(event);
+      if (!session) return;
+      ready = true;
+      const nextSessionId = normalizeLogSessionId(session.logSessionId);
+      const previousSessionId = liveSessionRef.current;
+      liveSessionRef.current = nextSessionId;
+      setLiveSessionId(nextSessionId);
+      if (previousSessionId === nextSessionId) return;
+      setStreams({ status: "ready", data: [] });
+      setLines(nextSessionId
+        ? [terminalSystemLine("info", previousSessionId === undefined ? "已跟随当前受管进程输出会话。" : "Run 已切换到新的受管进程输出会话。", "SYSTEM", `session-${nextSessionId}`)]
+        : [terminalSystemLine("warn", "当前没有可跟随的受管进程输出；旧日志可从历史查看。", "SYSTEM", "session-empty")]);
+      lockTerminalFollow();
+    });
     events.addEventListener("stream", (event) => {
       const stream = parseLogStreamEvent(event);
-      if (!stream) return;
+      if (!stream || !eventBelongsToLiveSession(stream.logSessionId, liveSessionRef.current)) return;
       ready = true;
       setStreams((current) => ({ status: "ready", data: mergeLogStreams(current.status === "ready" ? current.data : [], stream) }));
     });
@@ -153,7 +183,7 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
     });
     events.addEventListener("log", (event) => {
       const payload = parseServerLogEvent(event);
-      if (!payload) return;
+      if (!payload || !eventBelongsToLiveSession(payload.logSessionId, liveSessionRef.current)) return;
       ready = true;
       const stream = streamFromServerLogEvent(payload);
       setStreams((current) => ({ status: "ready", data: mergeLogStreams(current.status === "ready" ? current.data : [], stream) }));
@@ -165,6 +195,35 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
     return () => events.close();
   }, [appendLines, 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 - terminalInitialHistoryWindow), limit: terminalInitialHistoryWindow });
+      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 : "历史日志加载失败" });
+    }
+  }
+
   function selectQuickCommand(item: TerminalQuickCommand) {
     setCommand(item.command);
     setHistoryIndex(null);
@@ -193,9 +252,20 @@ 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;
@@ -253,17 +323,19 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
         <div className="terminal-output-topbar">
           <div>
             <strong>{serverName}</strong>
-            <span>当前服务器 Run 日志 · 已接受历史 + SSE 实时推送 · {streams.status === "ready" ? "等待当前输出" : streams.status === "loading" ? "连接日志流" : "日志流异常"} · {followLatest ? "自动置底" : "已解锁滚动"}</span>
+            <span>{historyOpen ? "历史日志（独立于实时终端）" : `当前受管进程会话${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}>
-          {streams.status === "error" && <div className="terminal-line terminal-line-error terminal-source-system"><time>{new Date().toLocaleTimeString()}</time><span className="terminal-text">{streams.reason}</span></div>}
-          {streams.status === "ready" && streams.data.length === 0 && <div className="terminal-line terminal-line-warn terminal-source-system"><time>{new Date().toLocaleTimeString()}</time><span className="terminal-text">暂无已接受日志。Run 恢复连接并完成日志水位校准后，新输出会继续追加。</span></div>}
-          {lines.map((line) => <div key={line.id} className={terminalLineClassName(line)}><time>{line.at}</time><span className="terminal-text">{line.text}</span></div>)}
+          {!historyOpen && streams.status === "error" && <div className="terminal-line terminal-line-error terminal-source-system"><time>{new Date().toLocaleTimeString()}</time><span className="terminal-text">{streams.reason}</span></div>}
+          {historyOpen && <HistoryLogView streams={historyStreams} lines={historyLines} selectedStreamId={selectedHistoryStreamId} onSelect={selectHistoryStream} />}
+          {!historyOpen && streams.status === "ready" && lines.length === 0 && <div className="terminal-line terminal-line-warn terminal-source-system"><time>{new Date().toLocaleTimeString()}</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>)}
         </div>
       </section>
       <section className="terminal-command-dock" aria-label="terminal command controls">
@@ -279,7 +351,7 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
           <form className="terminal-command-form" onSubmit={(event) => void submitCommand(event)}>
             <label>
               <span>SCUM 管理命令</span>
-              <small>Enter 发送，↑/↓ 调出历史；命令结果以 Run 日志追加为准。</small>
+              <small>Enter 发送，↑/↓ 调出历史；实时日志来自受管进程输出。</small>
               <input value={command} disabled={!canManage || pending} placeholder={canManage ? "输入单行命令" : "当前账号没有运行操作权限"} onKeyDown={handleCommandKeyDown} onChange={(event) => { setCommand(event.target.value); setHistoryIndex(null); }} />
             </label>
             <button type="submit" className="primary-command" disabled={!canManage || pending || !command.trim()}>{pending ? <Sparkles size={15} /> : <Send size={15} />}<span>{pending ? "提交中…" : "发送"}</span></button>
@@ -290,6 +362,41 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
   );
 }
 
+interface HistoryLogViewProps {
+  streams: LoadState<LogStreamResponse[]>;
+  lines: HistoryLineState;
+  selectedStreamId: string;
+  onSelect: (streamId: string) => Promise<void>;
+}
+
+function HistoryLogView({ streams, lines, selectedStreamId, onSelect }: HistoryLogViewProps) {
+  if (streams.status === "loading") return <TerminalStatusLine tone="info" label="正在加载历史日志列表。" />;
+  if (streams.status === "error") return <TerminalStatusLine tone="error" label={streams.reason} />;
+  if (streams.data.length === 0) return <TerminalStatusLine tone="warn" label="暂无可查看的历史日志流。" />;
+  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="请选择一个历史日志流。" />}
+      {lines.status === "loading" && <TerminalStatusLine tone="info" label="正在读取所选历史日志。" />}
+      {lines.status === "error" && <TerminalStatusLine tone="error" label={lines.reason} />}
+      {lines.status === "ready" && lines.data.length === 0 && <TerminalStatusLine tone="warn" label="所选历史日志流暂无保留内容。" />}
+      {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 }: { tone: "info" | "warn" | "error"; label: string }) {
+  return <div className={`terminal-line terminal-line-${tone} terminal-source-system`}><time>{new Date().toLocaleTimeString()}</time><span className="terminal-text">{label}</span></div>;
+}
+
 function terminalQuickCommandsForPlugin(pluginId: string): TerminalQuickCommand[] {
   return terminalQuickCommandCatalog[pluginId] ?? [];
 }
@@ -331,6 +438,16 @@ function terminalSourceClass(value?: string): string {
   return "log";
 }
 
+function normalizeLogSessionId(value?: string): string | null {
+  const normalized = value?.trim();
+  return normalized || null;
+}
+
+function eventBelongsToLiveSession(eventSessionId: string | undefined, liveSessionId: string | null | undefined): boolean {
+  const normalizedEventSessionId = normalizeLogSessionId(eventSessionId);
+  return Boolean(normalizedEventSessionId && normalizedEventSessionId === liveSessionId);
+}
+
 function isTerminalBridgeCommandState(state: GameClientBridgeCommandResponse["state"]): boolean {
   return state === "succeeded" || state === "failed" || state === "cancelled" || state === "expired" || state === "unknown";
 }