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

package/src/local-files/LocalFileViewerServer.ts

@@ -3,12 +3,15 @@ import { createHmac, randomBytes, timingSafeEqual } from "node:crypto";
 import fs from "node:fs";
 import { createRequire } from "node:module";
 import http, { type IncomingMessage, type ServerResponse } from "node:http";
+import type { Duplex } from "node:stream";
 import path from "node:path";
 import hljs from "highlight.js/lib/common";
 import dos from "highlight.js/lib/languages/dos";
 import dockerfile from "highlight.js/lib/languages/dockerfile";
 import powershell from "highlight.js/lib/languages/powershell";
 import MarkdownIt from "markdown-it";
+import { CSV_PREVIEW_CSS, renderCsvPreview, csvSourcePreview } from "./CsvPreview.js";
+import { enableDiagramFences, DIAGRAM_PREVIEW_CLIENT_SCRIPT, DIAGRAM_PREVIEW_CSS } from "./DiagramPreview.js";
 import { isFileUrl, rewriteMarkdownFileLinks } from "./MarkdownFileLinks.js";
 import {
   selectPreferredNetworkAddress,
@@ -56,6 +59,7 @@ const MARKDOWN_RENDERER = new MarkdownIt({
     return `<pre class="markdown-code-block hljs"><code${languageAttribute}>${highlighted}</code></pre>`;
   },
 });
+enableDiagramFences(MARKDOWN_RENDERER);
 MARKDOWN_RENDERER.renderer.rules.table_open = () =>
   '<div class="markdown-table-scroll" role="region" aria-label="Markdown 表格" tabindex="0"><table>\n';
 MARKDOWN_RENDERER.renderer.rules.table_close = () => '</table></div>\n';
@@ -79,7 +83,7 @@ const HIGHLIGHT_LANGUAGE_BY_FILENAME: Readonly<Record<string, string>> = {
   "dockerfile": "dockerfile",
   "makefile": "makefile",
 };
-const VIEWER_CLIENT_SCRIPT = `(() => {
+const VIEWER_CLIENT_SCRIPT = DIAGRAM_PREVIEW_CLIENT_SCRIPT + `(() => {
   const eventsUrl = document.body.dataset.eventsUrl;
   const content = document.getElementById("viewer-content");
   const metadata = document.getElementById("viewer-metadata");
@@ -157,14 +161,15 @@ const VIEWER_CLIENT_SCRIPT = `(() => {
   requestAnimationFrame(positionHashTarget);
   if (!eventsUrl || typeof EventSource !== "function") return;
 
-  const restoreScroll = (top, left, atBottom, codeScrollLeft, tableScrollLeft) => {
+  const restoreScroll = (top, left, atBottom, codeScrollLeft, tablePositions) => {
     requestAnimationFrame(() => {
       const maxTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
       window.scrollTo(left, atBottom ? maxTop : Math.min(top, maxTop));
       const code = content.querySelector(".code");
       if (code) code.scrollLeft = codeScrollLeft;
-      content.querySelectorAll(".markdown-table-scroll").forEach((table, index) => {
-        table.scrollLeft = tableScrollLeft[index] ?? 0;
+      content.querySelectorAll(".markdown-table-scroll, .csv-table-scroll").forEach((table, index) => {
+        table.scrollLeft = tablePositions[index]?.left ?? 0;
+        table.scrollTop = tablePositions[index]?.top ?? 0;
       });
     });
   };
@@ -174,12 +179,40 @@ const VIEWER_CLIENT_SCRIPT = `(() => {
     const maxTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
     const atBottom = maxTop - top <= 24;
     const codeScrollLeft = content.querySelector(".code")?.scrollLeft ?? 0;
-    const tableScrollLeft = Array.from(content.querySelectorAll(".markdown-table-scroll"), (table) => table.scrollLeft);
-    content.innerHTML = nextContent;
+    const tablePositions = Array.from(content.querySelectorAll(".markdown-table-scroll, .csv-table-scroll"), (table) => ({ left: table.scrollLeft, top: table.scrollTop }));
+    const template = document.createElement("template");
+    template.innerHTML = nextContent;
+    const previousDiagrams = new Set(content.querySelectorAll("[data-diagram]"));
+    const nextDiagrams = Array.from(template.content.querySelectorAll("[data-diagram]"));
+    const retainedDiagrams = new Map();
+    const diagramSource = (block) => block.querySelector(".diagram-source code").textContent;
+    // Match unchanged diagrams first so inserted text or diagrams do not reset their state.
+    for (const next of nextDiagrams) {
+      const current = Array.from(previousDiagrams).find((block) => diagramSource(block) === diagramSource(next));
+      if (current) { retainedDiagrams.set(next, current); previousDiagrams.delete(current); }
+    }
+    for (const next of nextDiagrams) {
+      if (retainedDiagrams.has(next)) continue;
+      const current = Array.from(previousDiagrams).find((block) => block.dataset.previewKey === next.dataset.previewKey);
+      if (current) { retainedDiagrams.set(next, current); previousDiagrams.delete(current); }
+    }
+    const diagramScroll = [];
+    for (const [next, current] of retainedDiagrams) {
+      for (const panel of current.querySelectorAll(".diagram-preview, .diagram-source")) {
+        diagramScroll.push([panel, panel.scrollLeft, panel.scrollTop]);
+      }
+      const source = current.querySelector(".diagram-source code");
+      if (source.textContent !== diagramSource(next)) source.textContent = diagramSource(next);
+      current.dataset.previewKey = next.dataset.previewKey;
+      next.replaceWith(current);
+    }
+    content.replaceChildren(template.content);
     metadata.innerHTML = nextMetadata;
     syncViewMode();
+    window.agentBotDiagrams.scan();
+    for (const [panel, left, top] of diagramScroll) { panel.scrollLeft = left; panel.scrollTop = top; }
     highlightHashTarget();
-    restoreScroll(top, left, atBottom, codeScrollLeft, tableScrollLeft);
+    restoreScroll(top, left, atBottom, codeScrollLeft, tablePositions);
   };
 
   const source = new EventSource(eventsUrl);
@@ -187,7 +220,7 @@ const VIEWER_CLIENT_SCRIPT = `(() => {
     try {
       const update = JSON.parse(event.data);
       if (typeof update.content === "string" && typeof update.metadata === "string") {
-        if (viewSwitch) viewSwitch.hidden = update.viewMode !== "markdown" && update.viewMode !== "html";
+        if (viewSwitch) viewSwitch.hidden = update.viewMode !== "markdown" && update.viewMode !== "html" && update.viewMode !== "csv";
         replaceContent(update.content, update.metadata);
       }
     } catch {
@@ -229,7 +262,7 @@ interface DirectoryViewerEntry {
 interface RenderedFileSnapshot {
   content: string;
   metadata: string[];
-  viewMode?: "markdown" | "html";
+  viewMode?: "markdown" | "html" | "csv";
 }
 
 export interface LocalFileViewerServerOptions {
@@ -251,11 +284,18 @@ export interface LocalFileViewerAddress {
   publicConnectionKind?: NetworkConnectionKind;
 }
 
+export interface LocalFileViewerService {
+  handleRequest(request: IncomingMessage, response: ServerResponse): void;
+  handleUpgrade(request: IncomingMessage, socket: Duplex, head: Buffer): void;
+  close(): Promise<void>;
+}
+
 export class LocalFileViewerServer {
   private server?: http.Server;
   private secret?: Buffer;
   private address?: LocalFileViewerAddress;
   private basePath = "";
+  private readonly services = new Map<string, LocalFileViewerService>();
 
   constructor(private readonly options: LocalFileViewerServerOptions) {}
 
@@ -283,6 +323,11 @@ export class LocalFileViewerServer {
       });
     });
     server.on("clientError", (_error, socket) => socket.end("HTTP/1.1 400 Bad Request\r\n\r\n"));
+    server.on("upgrade", (request, socket, head) => {
+      const service = this.serviceFor(request);
+      if (service) service.handleUpgrade(request, socket, head);
+      else socket.end("HTTP/1.1 404 Not Found\r\nConnection: close\r\n\r\n");
+    });
 
     let selectedPort = preferredPort;
     try {
@@ -329,12 +374,36 @@ export class LocalFileViewerServer {
   }
 
   async close(): Promise<void> {
+    await Promise.all([...this.services.values()].map((service) => service.close()));
+    this.services.clear();
     const server = this.server;
     this.server = undefined;
     this.address = undefined;
     if (server) await closeServer(server);
   }
 
+  mountService(name: string, service: LocalFileViewerService): { publicBaseUrl: string; unmount(): void } {
+    if (!this.address || !this.server) throw new Error("Preview server is not running.");
+    if (!/^[a-z][a-z0-9-]*$/u.test(name) || ["preview", "turn-preview", "assets", "view", "raw"].includes(name)) {
+      throw new Error("Invalid Preview service route.");
+    }
+    const basePath = `${this.basePath}/${name}`;
+    if (this.services.has(basePath)) throw new Error("Preview service route is already mounted.");
+    this.services.set(basePath, service);
+    const url = new URL(this.address.publicBaseUrl);
+    url.pathname = basePath;
+    return { publicBaseUrl: url.toString(), unmount: () => {
+      if (this.services.get(basePath) === service) this.services.delete(basePath);
+    } };
+  }
+
+  private serviceFor(request: IncomingMessage): LocalFileViewerService | undefined {
+    try {
+      const pathname = new URL(request.url ?? "/", "http://127.0.0.1").pathname;
+      return [...this.services].find(([base]) => pathname === base || pathname.startsWith(`${base}/`))?.[1];
+    } catch { return undefined; }
+  }
+
   createFileUrl(filePath: string, reference?: string): string | undefined {
     if (!this.address || !this.secret) return undefined;
     const absolutePath = normalizeAbsolutePath(filePath);
@@ -365,6 +434,8 @@ export class LocalFileViewerServer {
   }
 
   private async handleRequest(request: IncomingMessage, response: ServerResponse): Promise<void> {
+    const service = this.serviceFor(request);
+    if (service) { service.handleRequest(request, response); return; }
     if (request.method !== "GET" && request.method !== "HEAD") {
       response.setHeader("Allow", "GET, HEAD");
       this.sendHtml(response, 405, errorPage("不支持的请求", "该服务只接受只读请求。"), request.method === "HEAD");
@@ -401,14 +472,16 @@ export class LocalFileViewerServer {
         return;
       }
       const journal = this.options.previewJournal;
-      const recorded = journal?.has(turnId);
+      const stored = journal?.has(turnId) ? undefined : this.options.getTurnSnapshot?.(turnId);
+      const journalId = isTurnPreviewState(stored) ? stored.previewTurnId ?? turnId : turnId;
+      const recorded = journal?.has(journalId);
       if (recorded && requestUrl.searchParams.get("events") === "1") {
-        this.serveJournalEvents(request, response, turnId, journal!);
+        this.serveJournalEvents(request, response, journalId, journal!);
         return;
       }
       const detailKey = requestUrl.searchParams.get("detail");
       let snapshot = recorded
-        ? journal!.load(turnId, detailKey ?? false)
+        ? journal!.load(journalId, detailKey ?? false)
         : this.options.getTurnSnapshot?.(turnId);
       if (!recorded && this.options.loadTurnSnapshot && request.method !== "HEAD"
         && requestUrl.searchParams.get("events") !== "1" && !requestUrl.searchParams.has("detail")) {
@@ -435,7 +508,7 @@ export class LocalFileViewerServer {
         const after = requestUrl.searchParams.get("detailAfter");
         const outputAppend = recorded && after && tool?.kind === "tool" && tool.tool.kind === "command" && !tool.tool.error
           && !/repl/i.test(tool.tool.title) && snapshot.previewCursor !== undefined
-          ? journal!.outputAppend(turnId, tool.id, Number(after), snapshot.previewCursor) : undefined;
+          ? journal!.outputAppend(journalId, tool.id, Number(after), snapshot.previewCursor) : undefined;
         const detail = outputAppend !== undefined && tool?.kind === "tool"
           && (snapshot.fullToolOutputs?.[tool.id]?.length ?? 0) > outputAppend.length
           ? { key, revision: String(tool.tool.previewRevision), content: "", outputAppend,
@@ -611,6 +684,7 @@ export class LocalFileViewerServer {
       ],
       content: snapshot.content,
       viewMode: snapshot.viewMode,
+      diagramScriptPath: isMarkdownFile(filePath) ? `${this.basePath}/assets/mermaid.js`.replace(/\/{2,}/gu, "/") : undefined,
       liveUpdates: {
         eventsUrl: eventsUrl.toString(),
         scriptPath: `${this.basePath}/assets/viewer.js`.replace(/\/{2,}/gu, "/"),
@@ -640,6 +714,11 @@ export class LocalFileViewerServer {
         appendUrlQueryParameter(renderUrl, "render", "html");
         appendUrlQueryParameter(renderUrl, "version", `${stat.mtimeMs}-${stat.ctimeMs}-${stat.size}`);
         content = `<iframe class="html-preview" data-view-panel="rendered" title="HTML 预览" sandbox="allow-scripts" referrerpolicy="no-referrer" src="${escapeAttribute(renderUrl.toString())}"></iframe><section data-view-panel="code">${notice}${renderText(preview.text, filePath)}</section>`;
+      } else if (extension === ".csv") {
+        viewMode = "csv";
+        const source = csvSourcePreview(preview.text);
+        const sourceNotice = source.truncated ? '<div class="notice">代码仅显示前 2000 个物理行，可打开原始文件或下载完整文件。</div>' : "";
+        content = `${renderCsvPreview(preview.text, preview.truncated)}<section data-view-panel="code">${notice}${sourceNotice}${renderText(source.text, filePath)}</section>`;
       } else {
         viewMode = isMarkdownFile(filePath) ? "markdown" : undefined;
         const previewContent = viewMode === "markdown"
@@ -927,6 +1006,9 @@ export class LocalFileViewerServer {
     if (renderHtml) {
       // A response-level sandbox also isolates this document when opened outside the viewer iframe.
       response.setHeader("Content-Security-Policy", "sandbox allow-scripts; default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; media-src data: blob:; font-src data:; base-uri 'none'; form-action 'none'; frame-ancestors 'self'");
+    } else {
+      // Raw HTML/SVG/XML must not gain the shared origin's storage or execution privileges.
+      response.setHeader("Content-Security-Policy", "sandbox; default-src 'none'; style-src 'unsafe-inline'; img-src data: blob:; media-src data: blob:; base-uri 'none'; form-action 'none'; frame-ancestors 'self'");
     }
     response.setHeader("Accept-Ranges", "bytes");
     response.setHeader("Cache-Control", "no-store");
@@ -984,6 +1066,7 @@ function renderViewerPage(input: {
   actions: Array<{ href: string; label: string }>;
   content: string;
   viewMode?: RenderedFileSnapshot["viewMode"];
+  diagramScriptPath?: string;
   liveUpdates?: { eventsUrl: string; scriptPath: string };
 }): string {
   const metadata = renderMetadata(input.metadata);
@@ -1008,7 +1091,7 @@ function renderViewerPage(input: {
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>${escapeHtml(input.title)} · Agent Bot</title>
-  <style>
+  <style>${input.diagramScriptPath ? DIAGRAM_PREVIEW_CSS : ""}
     :root { --viewer-header-offset: 56px; --viewer-code-font: "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", "Sarasa Mono SC", "Noto Sans Mono CJK SC", "Microsoft YaHei Mono", NSimSun, monospace; color-scheme: light dark; font-family: Inter, "Segoe UI", system-ui, sans-serif; }
     * { box-sizing: border-box; }
     body { margin: 0; background: #f5f7fa; color: #1f2329; }
@@ -1056,6 +1139,8 @@ function renderViewerPage(input: {
     .markdown-body code { padding: .14em .35em; border-radius: 4px; background: #f2f3f5; font-family: var(--viewer-code-font); font-size: .9em; }
     .markdown-body .markdown-code-block { margin: 0 0 1em; padding: 14px 16px; overflow: auto; border-radius: 6px; background: #f6f8fa; line-height: 1.55; }
     .markdown-body .markdown-code-block code { padding: 0; background: transparent; font-size: 13px; }
+    .markdown-body .diagram-source { padding: 14px 16px; }
+    .markdown-body .diagram-source code { padding: 0; background: transparent; font-size: 13px; }
     .markdown-table-scroll { max-width: 100%; margin: 0 0 1em; overflow-x: auto; }
     .markdown-table-scroll:focus-visible { outline: 2px solid #1456f0; outline-offset: 2px; }
     .markdown-body table { width: max-content; margin: 0; border-collapse: collapse; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
@@ -1063,6 +1148,7 @@ function renderViewerPage(input: {
     .markdown-body th { background: #f5f7fa; }
     .markdown-body img { max-width: 100%; height: auto; }
     .markdown-body hr { height: 1px; margin: 1.5em 0; border: 0; background: #dfe3e8; }
+    ${CSV_PREVIEW_CSS}
     .media { display: grid; place-items: center; min-height: 220px; }
     .media img, .media video { max-width: 100%; max-height: calc(100vh - 70px); }
     .media audio { width: min(720px, 100%); }
@@ -1092,6 +1178,7 @@ function renderViewerPage(input: {
       .view-switch button.is-active { background: #3a3b3d; color: #8ab4ff; box-shadow: none; }
       .code, .directory-list { background: #202124; color: #e8eaed; border-color: #3a3b3d; }
       .markdown-body { background: #202124; color: #e8eaed; }
+      .markdown-body .diagram { --border: #55585c; }
       .markdown-body h1, .markdown-body h2 { border-color: #3a3b3d; }
       .markdown-body blockquote { color: #a6a9ad; border-color: #55585c; }
       .markdown-body a { color: #8ab4ff; }
@@ -1115,7 +1202,7 @@ function renderViewerPage(input: {
     }
   </style>
 </head>
-<body${input.viewMode ? ' data-view-mode="rendered"' : ""}${liveAttributes}>
+<body${input.viewMode ? ' data-view-mode="rendered"' : ""}${liveAttributes}${input.diagramScriptPath ? ` data-diagram-script="${escapeAttribute(input.diagramScriptPath)}"` : ""}>
   <header id="viewer-header">
     <h1 id="viewer-title" data-file-path="${escapeAttribute(input.filePath)}">${escapeHtml(input.filePath)}</h1>
     <div class="meta"><span class="metadata-values" id="viewer-metadata">${metadata}</span>${toolbar}</div>

package/src/local-files/TurnPreviewPage.ts

@@ -1,9 +1,10 @@
 import { createHash } from "node:crypto";
+import { approvalActivityId } from "../presentation/TurnStateReducer.js";
 import path from "node:path";
 import { enableDiagramFences, DIAGRAM_PREVIEW_CLIENT_SCRIPT, DIAGRAM_PREVIEW_CSS } from "./DiagramPreview.js";
 import MarkdownIt from "markdown-it";
 import { highlightPreviewCode, PREVIEW_SYNTAX_CSS } from "./PreviewSyntaxHighlight.js";
-import type { ToolState } from "../runtime/types.js";
+import type { ApprovalRequest, ToolState } from "../runtime/types.js";
 import type { FileSummary, TurnActivity, TurnReasoningItem, TurnViewState, TurnViewStatus } from "../presentation/turnViewTypes.js";
 import { displayFilePath, displayToolCommand, formatShellCommandForDisplay, toolStatusIcon } from "../feishu/CardRenderer.js";
 import { turnReasoningItems } from "../presentation/turnReasoning.js";
@@ -41,6 +42,8 @@ const PREVIEW_LABELS = {
     error: "错误",
     reasoning: "思考",
     finalAnswer: "最终回答",
+    downloadMarkdown: "下载 Markdown",
+    copyMarkdown: "复制 Markdown",
     generating: "回答生成中",
     command: "命令",
     result: "结果",
@@ -51,12 +54,13 @@ const PREVIEW_LABELS = {
     noToolDetails: "没有可显示的工具详情。",
     fileChanges: "文件变更",
     model: "模型",
+    modelCalls: "模型调用",
+    modelCallsDescription: "本轮有效 Token 用量更新次数",
+    contextTokens: "上下文",
     tools: "个工具",
     turnTokens: "本轮",
     totalTokens: "总计",
     nonCachedTokens: "非缓存",
-    compactionTokens: "压缩",
-    compactionAfterTokens: "压缩后",
     characters: "字符",
     truncated: "较早的活动已被运行时截断；本页展示 Agent Bot 当前保存的完整快照。",
     statuses: {
@@ -82,6 +86,8 @@ const PREVIEW_LABELS = {
     error: "Error",
     reasoning: "Reasoning",
     finalAnswer: "Final answer",
+    downloadMarkdown: "Download Markdown",
+    copyMarkdown: "Copy Markdown",
     generating: "Generating answer",
     command: "Command",
     result: "Result",
@@ -92,12 +98,13 @@ const PREVIEW_LABELS = {
     noToolDetails: "No tool details available.",
     fileChanges: "File changes",
     model: "Model",
+    modelCalls: "Model calls",
+    modelCallsDescription: "Effective token usage updates in this turn",
+    contextTokens: "Context",
     tools: "tools",
     turnTokens: "Turn",
     totalTokens: "Total",
     nonCachedTokens: "Non-cached",
-    compactionTokens: "Compaction",
-    compactionAfterTokens: "After compaction",
     characters: "characters",
     truncated: "Earlier activities were truncated by the runtime; this page shows the complete snapshot currently saved by Agent Bot.",
     statuses: {
@@ -152,7 +159,76 @@ export const TURN_PREVIEW_CLIENT_SCRIPT = DIAGRAM_PREVIEW_CLIENT_SCRIPT + `(() =
     loading: isChinese ? "正在加载…" : "Loading…",
     loadFailed: isChinese ? "加载失败，请重试。" : "Could not load details.",
     retry: isChinese ? "重试" : "Retry",
+    copied: isChinese ? "已复制 Markdown" : "Markdown copied",
+    downloaded: isChinese ? "已开始下载" : "Download started",
+    copyFailed: isChinese ? "复制失败，请检查浏览器剪贴板权限后重试。" : "Copy failed. Check clipboard permissions and retry.",
+    downloadFailed: isChinese ? "下载失败，请重试。" : "Download failed. Please retry.",
   };
+  const copyMarkdownFallback = (text) => {
+    const active = document.activeElement;
+    const selection = window.getSelection?.();
+    const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i).cloneRange()) : [];
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.readOnly = true;
+    textarea.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none";
+    document.body.append(textarea);
+    try {
+      textarea.focus({ preventScroll: true });
+      textarea.select();
+      textarea.setSelectionRange(0, text.length);
+      if (!document.execCommand?.("copy")) throw new Error("Clipboard unavailable");
+    } finally {
+      textarea.remove();
+      active?.focus?.({ preventScroll: true });
+      if (selection) {
+        selection.removeAllRanges();
+        for (const range of ranges) selection.addRange(range);
+      }
+    }
+  };
+  const copyMarkdown = async (text) => {
+    if (window.navigator?.clipboard?.writeText) {
+      try { await window.navigator.clipboard.writeText(text); return; } catch {}
+    }
+    copyMarkdownFallback(text);
+  };
+  const answerActionsInFlight = new WeakSet();
+  content.addEventListener("click", async (event) => {
+    const button = event.target.closest?.("button[data-answer-action]");
+    const section = button?.closest(".final-result[data-answer-markdown]");
+    if (!section || !content.contains(section) || answerActionsInFlight.has(button)) return;
+    const action = button.dataset.answerAction;
+    if (action !== "copy" && action !== "download") return;
+    event.preventDefault();
+    const feedback = section.querySelector("[data-answer-feedback]");
+    answerActionsInFlight.add(button);
+    button.disabled = true;
+    try {
+      const markdown = new TextDecoder("utf-8", { ignoreBOM: true }).decode(Uint8Array.from(atob(section.dataset.answerMarkdown), (char) => char.charCodeAt(0)));
+      if (action === "copy") await copyMarkdown(markdown);
+      else {
+        const url = URL.createObjectURL(new Blob([markdown], { type: "text/markdown;charset=utf-8" }));
+        const link = document.createElement("a");
+        try {
+          link.href = url;
+          link.download = section.dataset.answerFilename;
+          link.hidden = true;
+          document.body.append(link);
+          link.click();
+        } finally {
+          link.remove();
+          setTimeout(() => URL.revokeObjectURL(url), 1000);
+        }
+      }
+      if (feedback) feedback.textContent = action === "copy" ? labels.copied : labels.downloaded;
+    } catch {
+      if (feedback) feedback.textContent = action === "copy" ? labels.copyFailed : labels.downloadFailed;
+    } finally {
+      button.disabled = false;
+      answerActionsInFlight.delete(button);
+    }
+  });
 
   let source;
   const terminalAtLoad = document.body.dataset.terminal === "true";
@@ -589,10 +665,10 @@ export function renderTurnPreviewSnapshot(
       : "",
     `<section class="timeline" data-preview-key="timeline"${timelineContent ? "" : " hidden"}>${timelineContent}</section>`,
     state.fileSummary.length > 0 ? renderFileSummary(state, language, resolveFileUrl, options.deferDetails) : "",
-    state.approval ? `<section class="notice" data-preview-key="approval"><h2>${escapeHtml(state.approval.title)}</h2><div class="markdown">${renderText(state.approval.reason ?? "")}</div><p>${escapeHtml(language === "zh" ? "请在飞书任务卡片中确认或拒绝。" : "Approve or reject using the task card in Feishu.")}</p></section>` : "",
+    state.approval ? renderApprovalNotice(state.approval, renderText, language) : "",
     state.error ? `<section class="result error-result" data-preview-key="error"><h2>${escapeHtml(labels.error)}</h2><pre>${escapeHtml(state.error)}</pre></section>` : "",
     state.finalResponse
-      ? `<section class="result final-result" data-preview-key="result"><h2>${escapeHtml(labels.finalAnswer)}</h2><div class="markdown">${renderText(state.finalResponse)}</div></section>`
+      ? renderFinalAnswer(state.finalResponse, state.turnId, renderText, language)
       : state.assistantText
         ? `<section class="result" data-preview-key="result"><h2>${escapeHtml(labels.generating)}</h2><div class="markdown">${renderText(state.assistantText)}</div></section>`
         : "",
@@ -606,6 +682,34 @@ export function renderTurnPreviewSnapshot(
   };
 }
 
+function renderApprovalNotice(request: ApprovalRequest, renderText: (value: string) => string, language: TurnPreviewLanguage): string {
+  const command = request.command?.trim();
+  const commandApproval = command && request.kind !== "mode_change";
+  const title = commandApproval ? language === "zh" ? "命令执行确认" : "Command approval" : request.title;
+  const reason = commandApproval
+    ? request.reason?.trim() || (request.title.trim() !== command ? request.title : "")
+    : request.reason ?? "";
+  const description = commandApproval
+    ? `<p class="approval-reason">${escapeHtml(reason === command ? "" : reason)}</p>`
+    : `<div class="markdown">${renderText(reason)}</div>`;
+  const details = commandApproval
+    ? `<details class="approval-details" data-activity-id="approval:${escapeAttribute(request.id)}"><summary>${language === "zh" ? "查看完整命令" : "View full command"}</summary><pre data-scroll-id="approval:${escapeAttribute(request.id)}:command">${escapeHtml(request.command!)}</pre></details>` : "";
+  const instruction = request.automatic
+    ? language === "zh" ? "自动执行模式：正在自动同意。" : "Auto mode: approving automatically."
+    : language === "zh" ? "请在飞书任务卡片中确认或拒绝。" : "Approve or reject using the task card in Feishu.";
+  return `<section class="notice" data-preview-key="approval"><h2>${escapeHtml(title)}</h2>${description}${details}<p>${instruction}</p></section>`;
+}
+
+function renderFinalAnswer(markdown: string, turnId: string, renderText: (value: string) => string, language: TurnPreviewLanguage): string {
+  const labels = previewLabels(language);
+  const filename = `turn-${turnId.replace(/[^A-Za-z0-9_-]/gu, "_").slice(0, 80) || "answer"}.md`;
+  const icon = (paths: string): string => `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">${paths}</svg>`;
+  const button = (action: string, label: string, paths: string): string => `<button type="button" class="answer-action" data-answer-action="${action}" title="${escapeAttribute(label)}" aria-label="${escapeAttribute(label)}">${icon(paths)}</button>`;
+  const actions = button("download", labels.downloadMarkdown, '<path d="M12 3v12m-5-5 5 5 5-5M5 16v5h14v-5"/>')
+    + button("copy", labels.copyMarkdown, '<rect x="8" y="8" width="12" height="13" rx="2"/><path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/>');
+  return `<section class="result final-result" data-preview-key="result" data-answer-markdown="${Buffer.from(markdown, "utf8").toString("base64")}" data-answer-filename="${filename}"><div class="result-heading"><h2>${escapeHtml(labels.finalAnswer)}</h2>${actions}<span class="answer-feedback" data-answer-feedback role="status" aria-live="polite"></span></div><div class="markdown">${renderText(markdown)}</div></section>`;
+}
+
 function renderPlan(state: TurnViewState, language: TurnPreviewLanguage): string {
   const labels = previewLabels(language);
   const completed = state.plan.filter((step) => step.status === "completed").length;
@@ -626,7 +730,8 @@ function renderTimeline(
   projectCwd?: string,
   deferDetails = false,
 ): string {
-  const activities = state.activities ?? [];
+  const activities = state.approval
+    ? state.activities.filter((a) => a.id !== approvalActivityId(state.turnId, state.approval!.id)) : state.activities ?? [];
   const positions = new Map(activities.map((activity, index) => [activity.id, index]));
   const reasoning = new Map<number, TurnReasoningItem[]>();
   for (const item of turnReasoningItems(state)) {
@@ -1092,7 +1197,7 @@ function renderMetadata(state: TurnViewState, language: TurnPreviewLanguage): st
     ? state.startedAt + state.durationMs
     : undefined);
   const elapsed = `<span>${escapeHtml(labels.elapsed)}<strong${isTerminal(state.status) ? "" : ` data-live-elapsed data-started-at="${state.startedAt}"`}>${completedAt === undefined && isTerminal(state.status) ? escapeHtml(labels.unknown) : formatDuration((completedAt ?? Date.now()) - state.startedAt)}</strong></span>`;
-  return [
+  const fields = [
     elapsed,
     state.modelProvider?.trim() ? `<span title="Provider">${escapeHtml(state.modelProvider.trim())}</span>` : "",
     state.model?.trim() ? `<span title="${escapeAttribute(labels.model)}">${escapeHtml(state.model.trim())}</span>` : "",
@@ -1100,11 +1205,13 @@ function renderMetadata(state: TurnViewState, language: TurnPreviewLanguage): st
       ? `<span title="${escapeAttribute(labels.turnTokens)}">${formatTokenCount(state.totalTokens)} tokens</span>`
       : `<span title="${escapeAttribute(labels.nonCachedTokens)}: ${formatNumber(state.totalTokens)} tokens">${escapeHtml(labels.nonCachedTokens)} ${formatTokenCount(state.totalTokens)} tokens</span>`,
     state.totalTokensIncludingCache === undefined ? "" : `<span title="${escapeAttribute(labels.totalTokens)}: ${formatNumber(state.totalTokensIncludingCache)} tokens">${escapeHtml(labels.totalTokens)} ${formatTokenCount(state.totalTokensIncludingCache)} tokens</span>`,
-    state.contextCompactionAfterTokens === undefined ? "" : state.contextCompactionBeforeTokens === undefined
-      ? `<span title="${escapeAttribute(labels.compactionAfterTokens)}">${formatTokenCount(state.contextCompactionAfterTokens)} tokens</span>`
-      : `<span title="${escapeAttribute(labels.compactionTokens)}">${formatTokenCount(state.contextCompactionBeforeTokens)} → ${formatTokenCount(state.contextCompactionAfterTokens)} tokens</span>`,
+    state.latestContextTokens !== undefined && Number.isFinite(state.latestContextTokens) && state.latestContextTokens >= 0
+      ? `<span title="${escapeAttribute(labels.contextTokens)}: ${formatNumber(state.latestContextTokens)} tokens">${escapeHtml(labels.contextTokens)} ${formatTokenCount(state.latestContextTokens)} tokens</span>` : "",
+    state.modelCallCount !== undefined && Number.isSafeInteger(state.modelCallCount) && state.modelCallCount >= 0
+      ? `<span title="${escapeAttribute(labels.modelCallsDescription)}">${escapeHtml(labels.modelCalls)} ${formatNumber(state.modelCallCount)}${language === "zh" ? " 次" : ""}</span>` : "",
     (state.totalToolCount ?? 0) > 0 ? `<span>${formatNumber(state.totalToolCount ?? 0)} ${escapeHtml(labels.tools)}</span>` : "",
-  ].filter(Boolean).join("");
+  ].filter(Boolean);
+  return fields.join("");
 }
 
 function previewTitle(state: TurnViewState): string {
@@ -1310,6 +1417,17 @@ summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
 .detail-message button { margin-left: 8px; cursor: pointer; }
 .tool-image img { display: block; max-width: 100%; max-height: 720px; }
 .final-result h2 { color: var(--success); }
+.approval-reason { white-space: pre-wrap; overflow-wrap: anywhere; }
+.approval-reason:empty { display: none; }
+.approval-details { margin: 8px 0; }
+.approval-details pre { max-height: 30em; }
+.result-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; }
+.result-heading h2 { margin: 0 4px 0 0; }
+.answer-action { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
+.answer-action:hover { color: var(--accent); background: var(--surface); }
+.answer-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.answer-action:disabled { opacity: 0.5; cursor: wait; }
+.answer-feedback { min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
 @media (max-width: 700px) {
   .header-inner { padding: 5px 12px; }
   .header-top { flex-basis: 100%; }