From 82ee28522ce9ac784b5b12e8df9375fbcebebdc8 Mon Sep 17 00:00:00 2001 From: npc0-hue Date: Tue, 11 Aug 2026 00:16:27 +0800 Subject: [PATCH] Fix terminal log follow and wrapping --- platform_web/api/client.test.ts | 22 ++++++++ platform_web/api/client.ts | 55 +++++++++++++------ .../ServerManagementTerminalDrawer.tsx | 21 ++++++- platform_web/theme/base-css.test.js | 9 +-- platform_web/theme/base.css | 10 ++-- 5 files changed, 88 insertions(+), 29 deletions(-) diff --git a/platform_web/api/client.test.ts b/platform_web/api/client.test.ts index dd3091e..2332ca3 100644 --- a/platform_web/api/client.test.ts +++ b/platform_web/api/client.test.ts @@ -802,6 +802,28 @@ describe("PlatformApiClient AI providers", () => { stream.close(); }); + it("reconnects terminal log SSE after the fetch stream ends", async () => { + const payloads = [ + "id: log-1:3\nevent: log\ndata: {\"streamId\":\"log-1\",\"entry\":{\"seq\":3,\"line\":\"first live line\"}}\n\n", + "id: log-1:4\nevent: log\ndata: {\"streamId\":\"log-1\",\"entry\":{\"seq\":4,\"line\":\"second live line\"}}\n\n" + ]; + const fetchMock = vi.fn(async (_input: RequestInfo | URL, _init?: RequestInit) => new Response(new ReadableStream({ start(controller) { controller.enqueue(new TextEncoder().encode(payloads[Math.min(fetchMock.mock.calls.length - 1, payloads.length - 1)])); controller.close(); } }), { status: 200, headers: { "Content-Type": "text/event-stream" } })); + vi.stubGlobal("fetch", fetchMock); + const client = new PlatformApiClient("/api/v1", () => "terminal-session"); + const events: string[] = []; + const stream = client.openServerLogEvents("server-1"); + stream.addEventListener("log", (event) => events.push(event.data)); + + await vi.waitFor(() => expect(events).toContain('{"streamId":"log-1","entry":{"seq":3,"line":"first live line"}}')); + await vi.waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(2), { timeout: 1500 }); + expect(new Headers(fetchMock.mock.calls[1]?.[1]?.headers).get("Last-Event-ID")).toBe("log-1:3"); + await vi.waitFor(() => expect(events).toEqual([ + '{"streamId":"log-1","entry":{"seq":3,"line":"first live line"}}', + '{"streamId":"log-1","entry":{"seq":4,"line":"second live line"}}' + ]), { timeout: 1500 }); + stream.close(); + }); + it("surfaces password confirmation denials without exposing generic forbidden text", async () => { vi.stubGlobal("fetch", vi.fn(async () => new Response(JSON.stringify({ code: "forbidden", diff --git a/platform_web/api/client.ts b/platform_web/api/client.ts index ecb4b29..e2464ca 100644 --- a/platform_web/api/client.ts +++ b/platform_web/api/client.ts @@ -791,11 +791,12 @@ async function responseError(response: Response): Promise { class FetchServerSentEventStream implements PlatformEventStream { onerror: ((event: Event) => void) | null = null; + private lastEventId = ""; private readonly controller = new AbortController(); private readonly listeners = new Map void>>(); constructor(private readonly url: string, private readonly sessionToken: string) { - void this.connect(); + void this.connectLoop(); } addEventListener(type: string, listener: (event: MessageEvent) => void): void { @@ -813,17 +814,21 @@ class FetchServerSentEventStream implements PlatformEventStream { this.listeners.clear(); } - private async connect(): Promise { - try { - const response = await fetch(this.url, { method: "GET", credentials: "include", headers: { Accept: "text/event-stream", Authorization: `Bearer ${this.sessionToken}` }, signal: this.controller.signal }); - if (!response.ok || !response.body) { - throw new Error(`event stream failed: ${response.status}`); - } - await this.read(response.body); - } catch { - if (!this.controller.signal.aborted) { + private async connectLoop(): Promise { + while (!this.controller.signal.aborted) { + try { + const headers = new Headers({ Accept: "text/event-stream", Authorization: `Bearer ${this.sessionToken}` }); + if (this.lastEventId) headers.set("Last-Event-ID", this.lastEventId); + const response = await fetch(this.url, { method: "GET", credentials: "include", headers, signal: this.controller.signal }); + if (!response.ok || !response.body) { + throw new Error(`event stream failed: ${response.status}`); + } + await this.read(response.body); + } catch { + if (this.controller.signal.aborted) return; this.onerror?.(new Event("error")); } + await this.reconnectPause(); } } @@ -853,23 +858,39 @@ class FetchServerSentEventStream implements PlatformEventStream { if (field === "id") eventId = value; if (field === "data") dataLines.push(value); }; - while (!this.controller.signal.aborted) { - const { value, done } = await reader.read(); - if (done) break; - buffer += decoder.decode(value, { stream: true }); - const lines = buffer.split("\n"); - buffer = lines.pop() ?? ""; - lines.forEach(processLine); + try { + while (!this.controller.signal.aborted) { + const { value, done } = await reader.read(); + if (done) break; + buffer += decoder.decode(value, { stream: true }); + const lines = buffer.split("\n"); + buffer = lines.pop() ?? ""; + lines.forEach(processLine); + } + buffer += decoder.decode(); + if (buffer) processLine(buffer); + processLine(""); + } finally { + reader.releaseLock(); } } private dispatch(type: string, data: string, lastEventId: string): void { + if (lastEventId) this.lastEventId = lastEventId; const event = new MessageEvent(type, { data, lastEventId }); this.listeners.get(type)?.forEach((listener) => listener(event)); if (type !== "message") { this.listeners.get("message")?.forEach((listener) => listener(event)); } } + + private reconnectPause(): Promise { + if (this.controller.signal.aborted) return Promise.resolve(); + return new Promise((resolve) => { + const timeout = globalThis.setTimeout(resolve, 1000); + this.controller.signal.addEventListener("abort", () => { globalThis.clearTimeout(timeout); resolve(); }, { once: true }); + }); + } } function safeValidationMessage(apiError?: ApiErrorResponse | null): string { diff --git a/platform_web/components/ServerManagementTerminalDrawer.tsx b/platform_web/components/ServerManagementTerminalDrawer.tsx index 9f92fb8..774a20d 100644 --- a/platform_web/components/ServerManagementTerminalDrawer.tsx +++ b/platform_web/components/ServerManagementTerminalDrawer.tsx @@ -261,9 +261,9 @@ export function ServerManagementTerminalDrawer({ open, serverId, serverName, plu
- {streams.status === "error" &&
LOGS{streams.reason}
} - {streams.status === "ready" && streams.data.length === 0 &&
LOGS暂无已接受日志。Run 恢复连接并完成日志水位校准后，新输出会继续追加。
} - {lines.map((line) =>
{line.streamKey || line.level || "LOG"}{line.text}
)} + {streams.status === "error" &&
{streams.reason}
} + {streams.status === "ready" && streams.data.length === 0 &&
暂无已接受日志。Run 恢复连接并完成日志水位校准后，新输出会继续追加。
} + {lines.map((line) =>
{line.text}
)}
@@ -316,6 +316,21 @@ function terminalSystemLine(tone: TerminalLine["tone"], text: string, streamKey: return { id, tone, text, at: new Date(now).toLocaleTimeString(), sortKey: now, streamKey }; } +function terminalLineClassName(line: TerminalLine): string { + return `terminal-line terminal-line-${line.tone} terminal-source-${terminalSourceClass(line.streamKey || line.level)}`; +} + +function terminalSourceClass(value?: string): string { + const key = (value ?? "").toLowerCase(); + if (key.includes("stderr") || key === "error") return "stderr"; + if (key.includes("stdout")) return "stdout"; + if (key.includes("command")) return "command"; + if (key.includes("platform")) return "platform"; + if (key.includes("bridge")) return "bridge"; + if (key.includes("system")) return "system"; + return "log"; +} + function isTerminalBridgeCommandState(state: GameClientBridgeCommandResponse["state"]): boolean { return state === "succeeded" || state === "failed" || state === "cancelled" || state === "expired" || state === "unknown"; } diff --git a/platform_web/theme/base-css.test.js b/platform_web/theme/base-css.test.js index d7f9a79..348a7f5 100644 --- a/platform_web/theme/base-css.test.js +++ b/platform_web/theme/base-css.test.js @@ -184,10 +184,11 @@ describe("platform web shared theme CSS", () => { expect(css).toContain(".management-terminal-body{height:100%;grid-template-rows:minmax(0,1fr)auto"); expect(css).toContain(".terminal-output-panel{display:grid;grid-template-rows:autominmax(0,1fr);min-height:0;border:1pxsolid#222;border-radius:8px;background:#000"); expect(css).toContain(".terminal-output-topbar{display:flex;align-items:center;justify-content:space-between"); - expect(css).toContain(".terminal-line{display:grid;grid-template-columns:76px148pxminmax(0,1fr)"); - expect(css).toContain(".terminal-line-success.terminal-stream,.terminal-line-success.terminal-text{color:#7ee787}"); - expect(css).toContain(".terminal-line-warn.terminal-stream,.terminal-line-warn.terminal-text{color:#d29922}"); - expect(css).toContain(".terminal-line-error.terminal-stream,.terminal-line-error.terminal-text{color:#ff7b72}"); + expect(css).toContain(".terminal-output{display:block;min-height:260px"); + expect(css).toContain(".terminal-line{display:grid;grid-template-columns:74pxminmax(0,1fr)"); + expect(css).toContain(".terminal-text{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word"); + expect(css).toContain(".terminal-source-system.terminal-text,.terminal-source-platform.terminal-text,.terminal-source-bridge.terminal-text{color:#d2a8ff}"); + expect(css).toContain(".terminal-line-error.terminal-text,.terminal-source-stderr.terminal-text,.terminal-source-stderrtime{color:#ff7b72}"); expect(css).toContain(".terminal-quick-command-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))"); }); diff --git a/platform_web/theme/base.css b/platform_web/theme/base.css index 38690a4..8803589 100644 --- a/platform_web/theme/base.css +++ b/platform_web/theme/base.css @@ -506,11 +506,11 @@ to{transform:translate(-50%,-50%) rotate(calc(var(--construct-drift) + 360deg))} .terminal-output-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 10px;border-bottom:1px solid #1f2933;background:#000;color:#dbeafe} .terminal-output-topbar>div{display:flex;align-items:center;gap:8px;min-width:0}.terminal-output-topbar>div:first-child{display:grid;gap:2px}.terminal-output-topbar strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.terminal-output-topbar span{font-size:11px;color:#8b949e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .terminal-output-action{min-height:30px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border:1px solid #30363d;border-radius:6px;background:#0d1117;color:#c9d1d9;cursor:pointer;font:inherit;font-size:12px}.terminal-output-action:hover,.terminal-output-action:focus-visible{border-color:#58a6ff;color:#fff;outline:0} -.terminal-output{display:grid;align-content:start;gap:2px;min-height:260px;max-height:min(54dvh,520px);overflow:auto;padding:10px;border-radius:0;background:#000;font-family:var(--font-mono);font-size:12.5px;color:#c9d1d9;box-shadow:none} +.terminal-output{display:block;min-height:260px;max-height:min(54dvh,520px);overflow:auto;padding:10px;border-radius:0;background:#000;font-family:var(--font-mono);font-size:12.5px;color:#c9d1d9;box-shadow:none} .management-terminal-body .terminal-output{height:100%;min-height:0;max-height:none} -.terminal-line{display:grid;grid-template-columns:76px 148px minmax(0,1fr);gap:10px;align-items:start;min-height:20px;padding:1px 0} -.terminal-line time{color:#6e7681}.terminal-stream{color:#8b949e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.terminal-text{overflow-wrap:anywhere;color:#c9d1d9} -.terminal-line-input .terminal-stream,.terminal-line-input .terminal-text{color:#79c0ff}.terminal-line-success .terminal-stream,.terminal-line-success .terminal-text{color:#7ee787}.terminal-line-warn .terminal-stream,.terminal-line-warn .terminal-text{color:#d29922}.terminal-line-error .terminal-stream,.terminal-line-error .terminal-text{color:#ff7b72} +.terminal-line{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:start;min-height:auto;padding:1px 0;line-height:1.42}.terminal-line+.terminal-line{margin-top:2px} +.terminal-line time{color:#6e7681}.terminal-text{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;color:#c9d1d9} +.terminal-source-system .terminal-text,.terminal-source-platform .terminal-text,.terminal-source-bridge .terminal-text{color:#d2a8ff}.terminal-source-command .terminal-text,.terminal-line-input .terminal-text{color:#79c0ff}.terminal-line-success .terminal-text{color:#7ee787}.terminal-line-warn .terminal-text{color:#d29922}.terminal-line-error .terminal-text,.terminal-source-stderr .terminal-text,.terminal-source-stderr time{color:#ff7b72} .terminal-command-dock{display:grid;gap:10px;padding:10px;border:1px solid #222;border-radius:8px;background:#000;box-shadow:none} .terminal-command-dock-header{display:flex;align-items:center;justify-content:space-between;gap:10px} .terminal-command-dock-header>span{display:inline-flex;align-items:center;gap:6px;color:#f0f6fc;font-weight:800} @@ -719,7 +719,7 @@ to{transform:translate(-50%,-50%) rotate(calc(var(--construct-drift) + 360deg))} .provider-table,.resource-table{min-width:680px} .log-line{grid-template-columns:minmax(0,1fr);gap:2px} .terminal-quick-command-list{grid-template-columns:repeat(2,minmax(0,1fr))} -.terminal-line{grid-template-columns:64px minmax(0,1fr);gap:5px 8px}.terminal-stream,.terminal-text{grid-column:2}.terminal-output-topbar{align-items:stretch}.terminal-output-topbar,.terminal-output-topbar>div{display:grid}.terminal-output-topbar>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))} +.terminal-line{grid-template-columns:64px minmax(0,1fr);gap:5px 8px}.terminal-output-topbar{align-items:stretch}.terminal-output-topbar,.terminal-output-topbar>div{display:grid}.terminal-output-topbar>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))} .management-terminal-drawer{height:92dvh;max-height:92dvh} .ai-provider-toolbar{align-items:stretch} .icon-command,.segmented-button{flex:1 1 auto}