@keyou007/agent-bot 0.1.24-alpha.4 → 0.1.24-alpha.6

package/src/feishu/FeishuTurnPresenter.ts

@@ -4,6 +4,7 @@ import {
   appendSteerMessage as appendSteerMessageToState,
   createTurnViewState,
   compactTurnView,
+  continueTurnView,
   reduceTurnEvent,
 } from "../presentation/TurnStateReducer.js";
 import { splitMarkdown } from "../presentation/splitMarkdown.js";
@@ -74,6 +75,7 @@ interface TurnEntry {
   elapsedTimer?: ReturnType<typeof setInterval>;
   finalizing?: Promise<void>;
   lastFinalizedStatus?: TurnViewState["status"];
+  continuing?: boolean;
 }
 
 export class FeishuTurnPresenter {
@@ -158,6 +160,13 @@ export class FeishuTurnPresenter {
     const existing = this.pendingEntries.get(sessionId);
     if (existing) {
       await existing.initializing;
+      if (existing.continuing) {
+        existing.state = { ...existing.state, status: "running", error: undefined, completedAt: undefined, durationMs: undefined };
+        this.persist(existing.state.turnId, sessionId, existing.state, existing.contextKey);
+        existing.scheduler?.update(existing.state, "critical");
+        this.startElapsedUpdates(existing);
+        return existing.state.turnId;
+      }
       const images = localImagePaths === undefined ? existing.state.promptImagePaths : [...new Set(localImagePaths)];
       if ((prompt && existing.state.prompt !== prompt) || JSON.stringify(images) !== JSON.stringify(existing.state.promptImagePaths)) {
         existing.state = { ...existing.state, ...(prompt ? { prompt } : {}), ...(images ? { promptImagePaths: images } : {}) };
@@ -204,15 +213,15 @@ export class FeishuTurnPresenter {
   ): Promise<boolean> {
     const entry = this.pendingEntries.get(sessionId);
     if (!entry) return false;
-    this.pendingEntries.delete(sessionId);
-    this.stopElapsedUpdates(entry);
+    if (!entry.continuing) this.pendingEntries.delete(sessionId);
+    if (!entry.continuing) this.stopElapsedUpdates(entry);
     const completedAt = Date.now();
     entry.state = {
       ...entry.state,
-      status: "failed",
+      status: entry.continuing ? "running" : "failed",
       error: message,
-      completedAt,
-      durationMs: Math.max(0, completedAt - entry.state.startedAt),
+      completedAt: entry.continuing ? undefined : completedAt,
+      durationMs: entry.continuing ? undefined : Math.max(0, completedAt - entry.state.startedAt),
     };
     this.persist(entry.state.turnId, sessionId, entry.state, entry.contextKey);
     await entry.initializing;
@@ -298,7 +307,7 @@ export class FeishuTurnPresenter {
             status: "running" as const,
           };
       this.store.previews?.seed(initial);
-      this.store.previews?.user(turnId, activityId, text, localImagePaths);
+      this.store.previews?.user(initial.previewTurnId ?? turnId, activityId, text, localImagePaths);
       const state = this.cardState(appendSteerMessageToState(initial, activityId, text, localImagePaths));
       entry = { contextKey, state, initializing: Promise.resolve() } as TurnEntry;
       this.entries.set(turnId, entry);
@@ -309,7 +318,7 @@ export class FeishuTurnPresenter {
     }
 
     await entry.initializing;
-    this.store.previews?.user(turnId, activityId, text, localImagePaths);
+    this.store.previews?.user(entry.state.previewTurnId ?? turnId, activityId, text, localImagePaths);
     entry.state = this.cardState(appendSteerMessageToState(entry.state, activityId, text, localImagePaths));
     this.persist(turnId, sessionId, entry.state, entry.contextKey);
     if (!entry.historySnapshot) entry.scheduler?.update(entry.state, "critical");
@@ -317,10 +326,50 @@ export class FeishuTurnPresenter {
 
   async onEvent(event: AgentEvent): Promise<void> {
     let existing = this.entries.get(event.turnId);
+    if (!existing) {
+      const saved = this.store.getTurnSnapshot(event.turnId);
+      if (isTurnViewState(saved) && saved.continuedToTurnId) return;
+    }
     let eventApplied = false;
+    if (event.type === "turn_completed" && event.approvedPlan) {
+      const entry = existing ?? this.createEntry({ type: "progress", sessionId: event.sessionId,
+        turnId: event.turnId, activityId: "plan-handoff", text: "方案已确认，继续执行" });
+      if (!entry || entry.continuing) return;
+      entry.continuing = true;
+      entry.historySnapshot = undefined;
+      this.store.previews?.seed(entry.state);
+      entry.state = { ...entry.state, status: "running", approval: undefined };
+      this.pendingEntries.set(event.sessionId, entry);
+      this.persist(event.turnId, event.sessionId, entry.state, entry.contextKey);
+      await entry.initializing;
+      await entry.scheduler?.flush(entry.state);
+      return;
+    }
     if (!existing && event.type === "turn_started") {
       const pending = this.pendingEntries.get(event.sessionId);
-      if (pending) {
+      if (pending?.continuing) {
+        const previous = pending.state;
+        const previewTurnId = previous.previewTurnId ?? previous.turnId;
+        this.flushPersistence();
+        const state = continueTurnView(previous, event.turnId, event.startedAt);
+        this.store.previews?.handoff(previewTurnId, event.turnId, event.startedAt);
+        this.store.saveTurnSnapshot(previous.turnId, event.sessionId, {
+          ...previous, status: "completed", completedAt: event.startedAt,
+          durationMs: Math.max(0, event.startedAt - previous.startedAt),
+          finalResponse: "", continuedToTurnId: event.turnId, previewTurnId,
+        }, pending.contextKey);
+        if (pending.messageId) this.store.saveTurnDelivery(event.turnId, { progressMessageId: pending.messageId });
+        this.entries.delete(previous.turnId);
+        this.pendingEntries.delete(event.sessionId);
+        pending.state = state;
+        pending.continuing = false;
+        pending.lastFinalizedStatus = undefined;
+        pending.historySnapshot = undefined;
+        this.entries.set(event.turnId, pending);
+        this.persist(event.turnId, event.sessionId, state, pending.contextKey);
+        existing = pending;
+        eventApplied = true;
+      } else if (pending) {
         const pendingTurnId = pending.state.turnId;
         const state = reduceTurnEvent(
           createTurnViewState(
@@ -362,8 +411,9 @@ export class FeishuTurnPresenter {
     if (!entry) return;
 
     if (existing && !eventApplied) {
+      event = presentationEvent(event, entry.state);
       this.store.previews?.seed(entry.state);
-      this.store.previews?.event(event);
+      this.store.previews?.event(event, entry.state.previewTurnId);
       const previousStatus = entry.state.status;
       entry.state = this.cardState(reduceTurnEvent(entry.state, event));
       if (isTerminalViewStatus(previousStatus) && !event.type.startsWith("turn_")) entry.state.status = previousStatus;
@@ -374,6 +424,8 @@ export class FeishuTurnPresenter {
     if (!entry.scheduler) return;
 
     if (isTerminalEvent(event)) {
+      if (this.pendingEntries.get(event.sessionId) === entry) this.pendingEntries.delete(event.sessionId);
+      entry.continuing = false;
       this.stopElapsedUpdates(entry);
       if (entry.finalizing) await entry.finalizing;
       const terminalState = entry.state;
@@ -394,7 +446,8 @@ export class FeishuTurnPresenter {
   }
 
   async showDetails(contextKey: string, turnId: string): Promise<void> {
-    const snapshot = this.store.previews?.load(turnId) ?? this.store.getTurnSnapshot(turnId);
+    const saved = this.store.getTurnSnapshot(turnId);
+    const snapshot = this.store.previews?.load(isTurnViewState(saved) ? saved.previewTurnId ?? turnId : turnId) ?? saved;
     if (!isTurnViewState(snapshot)) {
       await this.outbound.sendText(contextKey, "未找到这次执行的详情。可能已被清理。");
       return;
@@ -408,6 +461,7 @@ export class FeishuTurnPresenter {
     page: number | "latest",
     messageId?: string,
   ): Promise<void> {
+    turnId = this.latestPresentationTurn(turnId, contextKey, messageId);
     const entry = this.entries.get(turnId);
     if (entry) await entry.initializing;
     const ownsProgressCard = entry
@@ -430,7 +484,7 @@ export class FeishuTurnPresenter {
       }
 
       if (!entry.historySnapshot) {
-        entry.historySnapshot = this.store.previews?.load(turnId) ?? entry.state;
+        entry.historySnapshot = this.store.previews?.load(entry.state.previewTurnId ?? turnId) ?? entry.state;
         await entry.scheduler?.flush();
       }
       const card = this.renderActivityHistory(entry.historySnapshot, page);
@@ -439,7 +493,8 @@ export class FeishuTurnPresenter {
       return;
     }
 
-    const snapshot = this.store.previews?.load(turnId) ?? this.store.getTurnSnapshot(turnId);
+    const saved = this.store.getTurnSnapshot(turnId);
+    const snapshot = this.store.previews?.load(isTurnViewState(saved) ? saved.previewTurnId ?? turnId : turnId) ?? saved;
     if (!isTurnViewState(snapshot)) throw new Error("未找到这次执行的活动历史。");
     const card = page === "latest"
       ? this.renderTurn(snapshot)
@@ -477,9 +532,9 @@ export class FeishuTurnPresenter {
     const compact = compactTurnView(state);
     this.dirty.set(turnId, { state: compact, contextKey });
     if (!event || isTerminalViewStatus(state.status) || state.status === "waiting_for_approval") {
-      this.store.previews.flush(turnId, true);
+      this.store.previews.flush(state.previewTurnId ?? turnId, true);
       this.flushPersistence();
-      if (isTerminalViewStatus(state.status)) this.store.previews.release(turnId);
+      if (isTerminalViewStatus(state.status)) this.store.previews.release(state.previewTurnId ?? turnId);
     } else if (!this.persistTimer) {
       this.persistTimer = setTimeout(() => {
         try { this.flushPersistence(); } catch (error) { this.options.onError?.(error); }
@@ -519,7 +574,8 @@ export class FeishuTurnPresenter {
           this.sessionModelProviders.get(event.sessionId),
         );
     this.store.previews?.seed(initial);
-    this.store.previews?.event(event);
+    event = presentationEvent(event, initial);
+    this.store.previews?.event(event, initial.previewTurnId);
     const state = this.cardState(reduceTurnEvent(initial, event));
     const entry = { contextKey, state, initializing: Promise.resolve() } as TurnEntry;
     this.entries.set(event.turnId, entry);
@@ -596,7 +652,21 @@ export class FeishuTurnPresenter {
   private turnPreviewUrl(state: TurnViewState): string | undefined {
     return state.turnId.startsWith("pending_")
       ? undefined
-      : this.options.turnPreviewUrl?.(state.turnId);
+      : this.options.turnPreviewUrl?.(state.previewTurnId ?? state.turnId);
+  }
+
+  private latestPresentationTurn(turnId: string, contextKey: string, messageId?: string): string {
+    const seen = new Set<string>();
+    while (!seen.has(turnId)) {
+      seen.add(turnId);
+      const saved = this.store.getTurnSnapshot(turnId);
+      if (!isTurnViewState(saved) || !saved.continuedToTurnId) break;
+      const next = saved.continuedToTurnId;
+      if (this.store.getTurnContextKey?.(next) !== contextKey
+        || (messageId && this.store.getTurnDelivery(next)?.progressMessageId !== messageId)) break;
+      turnId = next;
+    }
+    return turnId;
   }
 
   private startElapsedUpdates(entry: TurnEntry): void {
@@ -717,6 +787,28 @@ export class FeishuTurnPresenter {
   }
 }
 
+function presentationEvent(event: AgentEvent, state: TurnViewState): AgentEvent {
+  if (event.type === "turn_started" && state.segmentStartedAt !== undefined) return { ...event, startedAt: state.startedAt };
+  if (event.type === "turn_completed" && event.durationMs !== undefined && state.segmentStartedAt !== undefined) {
+    return { ...event, durationMs: Math.max(0, state.segmentStartedAt - state.startedAt) + event.durationMs };
+  }
+  if (state.continuedFromTurnId) {
+    // Tool/item IDs are only required to be unique within one runtime Turn.
+    const scoped = (id: string) => event.turnId + ":" + id;
+    if (event.type === "tool_started" || event.type === "tool_updated") return { ...event, tool: { ...event.tool, id: scoped(event.tool.id) } };
+    if (event.type === "tool_output_delta") return { ...event, toolId: scoped(event.toolId) };
+    if (event.type === "reasoning_delta" || event.type === "reasoning_completed") return { ...event, itemId: scoped(event.itemId) };
+    if (event.type === "progress") return { ...event,
+      activityId: (event.activityId?.startsWith("commentary:") ? "commentary:" : "") + scoped(event.activityId ?? "progress"),
+      ...(event.reasoning ? { reasoning: { ...event.reasoning, itemId: scoped(event.reasoning.itemId) } } : {}) };
+    if (event.type === "agent_text_delta" && event.replacesActivityId) return {
+      ...event, replacesActivityId: "commentary:" + scoped(event.replacesActivityId),
+    };
+    if (event.type === "context_compaction" && event.compactionId) return { ...event, compactionId: scoped(event.compactionId) };
+  }
+  return event;
+}
+
 function normalizeTurnCardMarkdown(
   state: TurnViewState,
   localFileUrl: LocalFileUrlResolver | undefined,

package/src/feishu/types.ts

@@ -7,6 +7,7 @@ export type { MergedForwardContent, ReferencedMessageContent } from "./MergedFor
 
 export interface IncomingMessage {
   messageId: string;
+  messageType?: string;
   createdAt?: number;
   contextKey: string;
   chatId?: string;

package/src/index.ts

@@ -1,6 +1,9 @@
 import path from "node:path";
 import { spawn } from "node:child_process";
 import { fileURLToPath } from "node:url";
+import { TerminalServer } from "./terminal/TerminalServer.js";
+import { sendTerminalAuthorization } from "./terminal/TerminalCards.js";
+import { ShellCommandJobManager } from "./shell/ShellCommandJobManager.js";
 import { LocalControlServer } from "./cli/LocalControlServer.js";
 import { controlEndpoint, type ControlRequest, type ControlResponse } from "./cli/controlProtocol.js";
 import { readPackageVersion } from "./cli/packageVersion.js";
@@ -79,6 +82,8 @@ const transport = consoleOnly ? "console" : requireServerFeishuTransport(config.
 const logger = createLogger(config);
 const store = new StateStore(config.storage.sqlitePath, (error) => logger.error({ error }, "Failed to persist Turn preview journal."));
 let localFileViewer: LocalFileViewerServer | undefined;
+let terminalServer: TerminalServer | undefined;
+const shellCommandJobs = new ShellCommandJobManager(path.join(path.dirname(config.storage.sqlitePath), "command-jobs"));
 let loadTurnDetails: ((turnId: string) => Promise<unknown>) | undefined;
 if (config.fileViewer.enabled) {
   const viewer = new LocalFileViewerServer({
@@ -160,7 +165,7 @@ let restartRequested = false;
 let pendingSelfUpdatePlanPath: string | undefined;
 let preparingSelfUpdate = false;
 const safeRestart = new SafeRestartScheduler({
-  readActivity: () => store.getServerActivityState(),
+  readActivity: () => serverActivity(),
   onReady: (reason, notificationTargets) => pendingSelfUpdatePlanPath
     ? initiateSelfUpdate(reason, notificationTargets)
     : initiateRestart(reason, notificationTargets),
@@ -226,8 +231,39 @@ async function prepareAndScheduleUpdate(version: string, target: RestartNotifica
   }
 }
 
+if (feishuOutbound && localFileViewer && config.terminal?.enabled !== false) {
+  const server = new TerminalServer({
+    stateDirectory: path.join(path.dirname(config.storage.sqlitePath), "terminal"),
+    ownerId: () => config.feishu.userOpenId,
+    canStart: () => !shuttingDown && !restartRequested && !safeRestart.scheduled && !safeRestart.restarting,
+    readJob: (jobId) => shellCommandJobs.readJob(jobId),
+    requestApproval: (authorization) => sendTerminalAuthorization(feishuOutbound, authorization),
+    updateCard: (messageId, view) => feishuOutbound.updateInteractiveCard(messageId, new CardRenderer().renderTerminalAuthorization(view)),
+    logger,
+  });
+  try {
+    const publicBaseUrl = await server.start(localFileViewer);
+    terminalServer = server;
+    logger.info({ publicBaseUrl }, "Interactive terminal service started (owner authorization required).");
+  } catch (error) {
+    await server.close();
+    logger.warn({ error }, "Terminal service unavailable; command cards remain usable.");
+  }
+}
+
+function serverActivity() {
+  const activity = store.getServerActivityState();
+  const activeTerminals = terminalServer?.activeCount ?? 0;
+  return { ...activity, activeTerminals };
+}
+
 const controller = new ProxySessionController(config, store, runtimes, outbound, logger, {
   supervised,
+  terminalUrl: (jobId) => terminalServer?.createUrl(jobId),
+  authorizeTerminal: (action) => {
+    if (!terminalServer) throw new Error("网页终端未启用。");
+    return terminalServer.resolveApproval(action);
+  },
   showUpdates: (contextKey, userId) => manualUpdates.show(contextKey, userId),
   selectUpdate: (action, replyTarget) => manualUpdates.select(action, replyTarget),
   restart: requestRestart,
@@ -264,7 +300,7 @@ const controller = new ProxySessionController(config, store, runtimes, outbound,
     const changed = writeAgentExecutionDefaults(activeConfigPath, agentName, defaults);
     logger.info({ agentName, changed }, "Stored Agent execution defaults.");
   },
-});
+}, undefined, undefined, shellCommandJobs);
 loadTurnDetails = (turnId) => controller.loadTurnDetails(turnId);
 
 if (feishuOutbound) {
@@ -327,7 +363,7 @@ function recoverPendingSelfUpdate(): void {
     pending.plan.reason ?? `Resume Agent Bot update to ${pending.plan.toVersion}`,
     notificationTarget,
     {
-      restartImmediatelyIfIdle: isServerIdle(store.getServerActivityState()),
+      restartImmediatelyIfIdle: isServerIdle(serverActivity()),
     },
   );
   logger.warn(
@@ -468,7 +504,7 @@ async function handleControlRequest(request: ControlRequest): Promise<ControlRes
           }),
           safeRestartScheduled: safeRestart.scheduled,
           safeRestartReason: safeRestart.pendingReason,
-          activity: store.getServerActivityState(),
+          activity: serverActivity(),
         },
       };
     case "server_restart": {
@@ -497,7 +533,7 @@ async function handleControlRequest(request: ControlRequest): Promise<ControlRes
       }
       assertSelfUpdatePlanPath(request.planPath, agentBotHome());
       const notificationTarget = inferServerRestartTarget(request.notificationSessionId);
-      const restartImmediatelyIfIdle = isServerIdle(store.getServerActivityState());
+      const restartImmediatelyIfIdle = isServerIdle(serverActivity());
       pendingSelfUpdatePlanPath = request.planPath;
       safeRestart.schedule(request.reason, notificationTarget, { restartImmediatelyIfIdle });
       return {
@@ -636,6 +672,7 @@ async function shutdown(
     outbound.flushAll().catch((error: unknown) => logger.warn({ error }, "Failed to flush presenters.")),
     delay(5_000),
   ]);
+  await terminalServer?.close().catch((error: unknown) => logger.warn({ error }, "Failed to close terminals."));
   runtimes.close();
   await controlServer?.close().catch((error: unknown) => logger.warn({ error }, "Failed to close local control endpoint."));
   await localFileViewer?.close().catch((error: unknown) => logger.warn({ error }, "Failed to close local file viewer."));
@@ -708,8 +745,8 @@ function inferServerRestartTarget(notificationSessionId?: string): RestartNotifi
   return privateRestartNotificationTarget(config.feishu.userOpenId);
 }
 
-function isServerIdle(activity: { runningSessions: number; pendingFinalDeliveries: number }): boolean {
-  return activity.runningSessions === 0 && activity.pendingFinalDeliveries === 0;
+function isServerIdle(activity: { runningSessions: number; pendingFinalDeliveries: number; activeTerminals?: number }): boolean {
+  return activity.runningSessions === 0 && activity.pendingFinalDeliveries === 0 && !activity.activeTerminals;
 }
 
 function restartNotificationTargetForSession(

package/src/local-files/CsvPreview.ts

@@ -0,0 +1,132 @@
+const MAX_ROWS = 500;
+const MAX_COLUMNS = 50;
+const MAX_CELL_CHARACTERS = 4_000;
+
+export interface CsvPreview {
+  rows: string[][];
+  notices: string[];
+}
+
+export function csvSourcePreview(source: string): { text: string; truncated: boolean } {
+  const text = source.replace(/\r\n?/gu, "\n");
+  let offset = 0;
+  for (let line = 0; line < 2_000; line += 1) {
+    const newline = text.indexOf("\n", offset);
+    if (newline < 0 || newline === text.length - 1) return { text, truncated: false };
+    offset = newline + 1;
+  }
+  return { text: text.slice(0, offset - 1), truncated: true };
+}
+
+// Parse records rather than physical lines: quoted CSV fields may contain newlines.
+export function parseCsvPreview(source: string, sourceTruncated = false): CsvPreview {
+  const text = source.charCodeAt(0) === 0xfeff ? source.slice(1) : source;
+  const rows: string[][] = [];
+  const notices = new Set<string>();
+  let row: string[] = [];
+  let field = "";
+  let fieldCharacters = 0;
+  let state: "start" | "plain" | "quoted" | "closed" = "start";
+  let recordStarted = false;
+  const append = (character: string): void => {
+    if (row.length >= MAX_COLUMNS) return;
+    if (fieldCharacters < MAX_CELL_CHARACTERS) { field += character; fieldCharacters += 1; }
+    else notices.add(`过长单元格仅显示前 ${MAX_CELL_CHARACTERS} 个字符。`);
+  };
+  const endField = (): void => {
+    if (row.length < MAX_COLUMNS) row.push(field);
+    else notices.add(`表格仅显示前 ${MAX_COLUMNS} 列。`);
+    field = "";
+    fieldCharacters = 0;
+    state = "start";
+  };
+  if (sourceTruncated) notices.add("文件较大，仅读取开头 2 MiB；末尾不完整的记录不显示。可下载完整文件。");
+  let invalid = false;
+  for (let index = 0; index < text.length; index += 1) {
+    const character = String.fromCodePoint(text.codePointAt(index)!);
+    if (character.length === 2) index += 1;
+    recordStarted = true;
+    if (state === "quoted") {
+      if (character === '"') state = "closed";
+      else append(character);
+      continue;
+    }
+    if (character === '"') {
+      if (state === "start") state = "quoted";
+      else if (state === "closed") { append(character); state = "quoted"; }
+      else { invalid = true; break; }
+    } else if (character === ",") {
+      endField();
+    } else if (character === "\r" || character === "\n") {
+      if (character === "\r" && text[index + 1] === "\n") index += 1;
+      endField();
+      rows.push(row);
+      row = [];
+      recordStarted = false;
+      if (rows.length === MAX_ROWS && index + 1 < text.length) {
+        notices.add(`表格仅显示前 ${MAX_ROWS} 行。`);
+        return { rows, notices: [...notices] };
+      }
+    } else if (state === "closed") {
+      invalid = true;
+      break;
+    } else {
+      state = "plain";
+      append(character);
+    }
+  }
+  if (invalid || (!sourceTruncated && state === "quoted")) {
+    notices.add(`第 ${rows.length + 1} 条记录的引号格式不完整或不合法，已停止解析。请切换代码查看原文。`);
+  } else if (recordStarted && !sourceTruncated) {
+    endField();
+    rows.push(row);
+  }
+  return { rows, notices: [...notices] };
+}
+
+export function renderCsvPreview(source: string, sourceTruncated = false): string {
+  const { rows, notices } = parseCsvPreview(source, sourceTruncated);
+  const columns = Math.max(0, ...rows.map((row) => row.length));
+  const noticesHtml = notices.map((notice) => `<div class="notice">${escapeHtml(notice)}</div>`).join("");
+  if (!rows.length) {
+    return `<section data-view-panel="rendered">${noticesHtml}<div class="csv-summary">${notices.length ? "没有可显示的完整记录。" : "CSV 文件为空。"}</div></section>`;
+  }
+  const headings = Array.from({ length: columns }, (_, index) => {
+    const label = index < 26 ? String.fromCharCode(65 + index) : `A${String.fromCharCode(65 + index - 26)}`;
+    return `<th scope="col">${label}</th>`;
+  }).join("");
+  const body = rows.map((row, index) => {
+    const cells = row.map((value) => `<td><div class="csv-cell">${escapeHtml(value)}</div></td>`).join("");
+    const missing = columns - row.length;
+    return `<tr><th scope="row">${index + 1}</th>${cells}${missing ? `<td colspan="${missing}" class="csv-missing"></td>` : ""}</tr>`;
+  }).join("");
+  return `<section data-view-panel="rendered">${noticesHtml}<div class="csv-summary">已显示 ${rows.length} 行 · 最多 ${columns} 列 · 首行保留为数据</div><div class="csv-table-scroll" role="region" aria-label="CSV 表格" tabindex="0"><table class="csv-table"><thead><tr><th scope="col" aria-label="行号">#</th>${headings}</tr></thead><tbody>${body}</tbody></table></div></section>`;
+}
+
+function escapeHtml(value: string): string {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+
+export const CSV_PREVIEW_CSS = `
+    .csv-summary { padding: 10px 12px; color: #646a73; font-size: 12px; }
+    .csv-table-scroll { isolation: isolate; max-width: 100%; max-height: calc(100dvh - var(--viewer-header-offset) - 40px); overflow: auto; background: #fff; }
+    .csv-table-scroll:focus-visible { outline: 2px solid #1456f0; outline-offset: -2px; }
+    .csv-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.5; }
+    .csv-table th, .csv-table td { padding: 7px 12px; text-align: left; vertical-align: top; border-right: 1px solid #dfe3e8; border-bottom: 1px solid #dfe3e8; }
+    .csv-table th { background: #f0f3f8; font-weight: 600; }
+    .csv-table thead th { position: sticky; top: 0; z-index: 1; }
+    .csv-table tr > th:first-child { position: sticky; left: 0; text-align: right; min-width: 3.5em; }
+    .csv-table thead th:first-child { z-index: 2; }
+    .csv-table tbody tr:nth-child(even) td { background: #f9fafc; }
+    .csv-table tbody tr:hover td { background: #edf3ff; }
+    .csv-cell { min-width: 4em; max-width: 32rem; white-space: pre-wrap; overflow-wrap: anywhere; }
+    @media (max-width: 640px) { .csv-cell { max-width: 20rem; } }
+    @media (prefers-color-scheme: dark) {
+      .csv-summary { color: #a6a9ad; }
+      .csv-table-scroll { background: #202124; }
+      .csv-table th, .csv-table td { border-color: #55585c; }
+      .csv-table th { background: #292a2d; }
+      .csv-table tbody tr:nth-child(even) td { background: #252629; }
+      .csv-table tbody tr:hover td { background: #292f3d; }
+    }
+`;