@keyou007/agent-bot 0.1.21 → 0.1.23

package/src/local-files/TurnPreviewPage.ts

@@ -2,7 +2,8 @@ import path from "node:path";
 import MarkdownIt from "markdown-it";
 import type { ToolState } from "../runtime/types.js";
 import type { FileSummary, TurnActivity, TurnViewState, TurnViewStatus } from "../presentation/turnViewTypes.js";
-import { displayToolCommand, formatShellCommandForDisplay } from "../feishu/CardRenderer.js";
+import { displayFilePath, displayToolCommand, formatShellCommandForDisplay, toolStatusIcon } from "../feishu/CardRenderer.js";
+import { isFileUrl, rewriteMarkdownFileLinks } from "./MarkdownFileLinks.js";
 
 const MARKDOWN = new MarkdownIt({
   breaks: true,
@@ -10,6 +11,8 @@ const MARKDOWN = new MarkdownIt({
   linkify: true,
   typographer: false,
 });
+const validateLink = MARKDOWN.validateLink.bind(MARKDOWN);
+MARKDOWN.validateLink = (url) => isFileUrl(url) || validateLink(url);
 const defaultLinkOpen = MARKDOWN.renderer.rules.link_open
   ?? ((tokens, index, options, _environment, renderer) => renderer.renderToken(tokens, index, options));
 MARKDOWN.renderer.rules.link_open = (tokens, index, options, environment, renderer) => {
@@ -161,7 +164,12 @@ export const TURN_PREVIEW_CLIENT_SCRIPT = `(() => {
       const duration = hours > 0
         ? String(hours).padStart(2, "0") + ":" + String(minutes).padStart(2, "0") + ":" + String(remainder).padStart(2, "0")
         : String(minutes).padStart(2, "0") + ":" + String(remainder).padStart(2, "0");
-      element.textContent = labels.elapsed + duration;
+      const shortDuration = hours > 0
+        ? String(hours * 60 + minutes) + ":" + String(remainder).padStart(2, "0")
+        : minutes > 0
+          ? String(minutes) + ":" + String(remainder).padStart(2, "0")
+          : remainder > 0 ? String(remainder) + "s" : "";
+      element.textContent = element.dataset.shortDuration === "1" ? shortDuration : labels.elapsed + duration;
     });
   };
   updateElapsed();
@@ -284,9 +292,10 @@ export function renderTurnPreviewSnapshot(
     if (!state.projectCwd || !path.isAbsolute(state.projectCwd)) return undefined;
     return localFileUrl(path.resolve(state.projectCwd, filePath));
   } : undefined;
-  const timeline = renderTimeline(state.activities ?? [], resolveFileUrl, state.fullToolOutputs, state.fullToolErrors, language);
+  const renderText = (value: string): string => renderMarkdown(value, state.projectCwd, localFileUrl);
+  const timeline = renderTimeline(state.activities ?? [], renderText, resolveFileUrl, state.fullToolOutputs, state.fullToolErrors, language, state.projectCwd);
   const sections = [
-    state.prompt ? renderMessageActivity("prompt", state.prompt, "user prompt") : "",
+    state.prompt ? renderMessageActivity("prompt", state.prompt, "user prompt", renderText) : "",
     state.plan.length > 0 ? renderPlan(state, language) : "",
     state.activitiesTruncated
       ? `<div class="notice">${escapeHtml(labels.truncated)}</div>`
@@ -295,9 +304,9 @@ export function renderTurnPreviewSnapshot(
     state.fileSummary.length > 0 ? renderFileSummary(state, language, resolveFileUrl) : "",
     state.error ? `<section class="result error-result"><h2>${escapeHtml(labels.error)}</h2><pre>${escapeHtml(state.error)}</pre></section>` : "",
     state.finalResponse
-      ? `<section class="result final-result"><h2>${escapeHtml(labels.finalAnswer)}</h2><div class="markdown">${renderMarkdown(state.finalResponse)}</div></section>`
+      ? `<section class="result final-result"><h2>${escapeHtml(labels.finalAnswer)}</h2><div class="markdown">${renderText(state.finalResponse)}</div></section>`
       : state.assistantText
-        ? `<section class="result"><h2>${escapeHtml(labels.generating)}</h2><div class="markdown">${renderMarkdown(state.assistantText)}</div></section>`
+        ? `<section class="result"><h2>${escapeHtml(labels.generating)}</h2><div class="markdown">${renderText(state.assistantText)}</div></section>`
         : "",
   ].filter(Boolean).join("");
   const terminal = isTerminal(state.status);
@@ -322,36 +331,40 @@ function renderPlan(state: TurnViewState, language: TurnPreviewLanguage): string
 
 function renderTimeline(
   activities: TurnActivity[],
+  renderText: (value: string) => string,
   localFileUrl?: (filePath: string) => string | undefined,
   fullToolOutputs?: Record<string, string>,
   fullToolErrors?: Record<string, string>,
   language: TurnPreviewLanguage = "zh",
+  projectCwd?: string,
 ): string {
   return activities
     .filter((activity): activity is Exclude<TurnActivity, { kind: "reasoning" }> => activity.kind !== "reasoning")
-    .map((activity) => renderActivity(activity, localFileUrl, fullToolOutputs, fullToolErrors, language))
+    .map((activity) => renderActivity(activity, renderText, localFileUrl, fullToolOutputs, fullToolErrors, language, projectCwd))
     .join("");
 }
 
 function renderActivity(
   activity: Exclude<TurnActivity, { kind: "reasoning" }>,
+  renderText: (value: string) => string,
   localFileUrl?: (filePath: string) => string | undefined,
   fullToolOutputs?: Record<string, string>,
   fullToolErrors?: Record<string, string>,
   language: TurnPreviewLanguage = "zh",
+  projectCwd?: string,
 ): string {
   switch (activity.kind) {
     case "assistant":
-      return renderMessageActivity(activity.id, activity.text, "commentary");
+      return renderMessageActivity(activity.id, activity.text, "commentary", renderText);
     case "user":
-      return renderMessageActivity(activity.id, activity.text, "user");
+      return renderMessageActivity(activity.id, activity.text, "user", renderText);
     case "tool":
-      return renderToolActivity(activity.id, activity.tool, localFileUrl, fullToolOutputs, fullToolErrors, language);
+      return renderToolActivity(activity.id, activity.tool, localFileUrl, fullToolOutputs, fullToolErrors, language, projectCwd);
   }
 }
 
-function renderMessageActivity(id: string, text: string, kind: string): string {
-  return `<article class="activity message ${kind}" data-activity="${escapeAttribute(id)}"><div class="markdown">${renderMarkdown(text)}</div></article>`;
+function renderMessageActivity(id: string, text: string, kind: string, renderText: (value: string) => string): string {
+  return `<article class="activity message ${kind}" data-activity="${escapeAttribute(id)}"><div class="markdown">${renderText(text)}</div></article>`;
 }
 
 function renderToolActivity(
@@ -361,6 +374,7 @@ function renderToolActivity(
   fullToolOutputs?: Record<string, string>,
   fullToolErrors?: Record<string, string>,
   language: TurnPreviewLanguage = "zh",
+  projectCwd?: string,
 ): string {
   const labels = previewLabels(language);
   const command = tool.command ? (displayToolCommand(tool.command) || tool.command.trim()) : undefined;
@@ -370,29 +384,40 @@ function renderToolActivity(
     : command
       ? formatToolCommand(command)
       : undefined;
-  const commandInHeader = Boolean(displayCommand);
-  const title = commandInHeader ? displayCommand! : toolTitle(tool, command, repl, language);
+  const title = displayCommand ? summarizeToolCommand(displayCommand) : toolTitle(tool, command, repl, language);
   const output = fullToolOutputs?.[tool.id] ?? tool.output;
   const error = fullToolErrors?.[tool.id] ?? tool.error;
   const sameError = Boolean(output && error && normalizeOutput(output) === normalizeOutput(error));
+  const displayOutput = output && repl && !sameError ? formatReplOutput(output) : output;
+  const displayError = sameError ? undefined : error;
   const detailParts = [
-    displayCommand && !commandInHeader ? `<pre class="command-block${repl ? " repl-code" : ""}" data-scroll-id="${escapeAttribute(`${activityId}:command`)}">${escapeHtml(displayCommand)}</pre>` : "",
-    output
-      ? renderToolOutput(activityId, "output", sameError ? labels.resultError : repl ? labels.result : labels.output, output, sameError, repl, language, tool)
+    displayCommand ? `<div class="tool-command"><span class="tool-command-prefix" aria-hidden="true">$</span><pre class="command-block${repl ? " repl-code" : ""}">${escapeHtml(displayCommand)}</pre></div>` : "",
+    displayOutput
+      ? renderToolOutput(sameError ? labels.resultError : repl ? labels.result : labels.output, displayOutput, sameError, repl)
       : "",
-    error && !sameError
-      ? renderToolOutput(activityId, "error", labels.error, error, true, repl, language, tool)
+    displayError
+      ? renderToolOutput(labels.error, displayError, true, repl)
       : "",
-    !output && !error && !tool.files?.length ? renderToolStatusRow(tool, language) : "",
     renderToolImage(tool, localFileUrl, language),
     tool.files?.length
-      ? `<details class="tool-output" data-activity-id="${escapeAttribute(`${activityId}:files`)}"><summary><span class="tool-output-label">${escapeHtml(labels.files)}</span><span class="tool-output-meta">${renderToolTiming(tool, language)}<span class="tool-state ${tool.status}" aria-label="${escapeAttribute(tool.status)}">${toolStatusIcon(tool.status, language)}</span><span>${tool.files.length}</span></span></summary><ul class="files">${tool.files.map((file) => renderFileEntry(file, localFileUrl)).join("")}</ul></details>`
+      ? `<ul class="files" aria-label="${escapeAttribute(labels.files)}">${tool.files.map((file) => renderFileEntry(file, localFileUrl, projectCwd)).join("")}</ul>`
       : "",
   ].filter(Boolean).join("");
-  const titleMarkup = commandInHeader
+  const titleMarkup = displayCommand
     ? `<code class="tool-command-title">${escapeHtml(title)}</code>`
     : `<span class="tool-title">${escapeHtml(title)}</span>`;
-  return `<article class="activity tool"><section class="tool-step" data-activity-id="${escapeAttribute(activityId)}"><div class="tool-header" data-scroll-id="${escapeAttribute(`${activityId}:command`)}">${titleMarkup}</div><div class="tool-body">${detailParts || `<div class="muted">${escapeHtml(labels.noToolDetails)}</div>`}</div></section></article>`;
+  const timing = renderToolTiming(tool, "header");
+  const statusLabel = toolStatusLabel(tool.status, language);
+  const icon = `<span class="tool-status-icon" role="img" aria-label="${escapeAttribute(statusLabel)}" title="${escapeAttribute(statusLabel)}">${toolStatusIcon(tool.status)}</span>`;
+  const status = `<span class="tool-state ${tool.status}">${escapeHtml(statusLabel)}</span>`;
+  const header = `<summary class="tool-header">${icon}<span class="tool-summary-content">${titleMarkup}</span><span class="tool-meta">${timing}</span></summary>`;
+  const startedAt = tool.startedAt === undefined ? undefined : new Date(tool.startedAt);
+  const startTime = startedAt
+    ? `<time datetime="${startedAt.toISOString()}" title="${escapeAttribute(labels.startingTime)}">${new Intl.DateTimeFormat(language === "zh" ? "zh-CN" : "en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit", hourCycle: "h23" }).format(startedAt)}</time>`
+    : `<span title="${escapeAttribute(labels.startingTime)}">${escapeHtml(labels.unknown)}</span>`;
+  const characterCount = (displayOutput?.length ?? 0) + (displayError?.length ?? 0);
+  const footer = `<div class="tool-footer">${status}${startTime}${renderToolTiming(tool, "footer")}<span>${formatNumber(characterCount)} ${escapeHtml(labels.characters)}</span></div>`;
+  return `<article class="activity tool"><details class="tool-step" data-tool-status="${tool.status}" data-activity-id="${escapeAttribute(activityId)}">${header}<div class="tool-body"><div class="tool-content" data-scroll-id="${escapeAttribute(`${activityId}:content`)}" tabindex="0">${detailParts || `<div class="muted">${escapeHtml(labels.noToolDetails)}</div>`}</div>${footer}</div></details></article>`;
 }
 
 function toolTitle(tool: ToolState, command?: string, repl = false, language: TurnPreviewLanguage = "zh"): string {
@@ -402,6 +427,12 @@ function toolTitle(tool: ToolState, command?: string, repl = false, language: Tu
   return title || tool.kind;
 }
 
+function summarizeToolCommand(command: string): string {
+  const summary = command.replace(/[\\`^][ \t]*\r?\n/gu, " ").replace(/\s+/gu, " ").trim();
+  if (summary.length <= 160) return summary;
+  return `${summary.slice(0, 157).trimEnd()}…`;
+}
+
 function isReplTool(tool: ToolState): boolean {
   const title = tool.title.trim();
   const titleLooksLikeToolName = title.length <= 120 && !/[\s"'`]/u.test(title);
@@ -512,36 +543,29 @@ function normalizeReplText(value: string): string {
 }
 
 function renderToolOutput(
-  activityId: string,
-  kind: string,
   label: string,
   value: string,
   error = false,
   repl = false,
-  language: TurnPreviewLanguage = "zh",
-  tool?: ToolState,
 ): string {
-  const id = escapeAttribute(`${activityId}:${kind}`);
-  const displayValue = repl && !error ? formatReplOutput(value) : value;
-  const labels = previewLabels(language);
-  const status = tool?.status ?? "completed";
-  const timing = tool ? renderToolTiming(tool, language) : "";
-  return `<details class="tool-output${error ? " error-output" : ""}${repl ? " repl-result" : ""}" data-activity-id="${id}"><summary><span class="tool-output-label">${escapeHtml(label)}</span><span class="tool-output-meta">${timing}<span class="tool-state ${status}" aria-label="${escapeAttribute(status)}">${toolStatusIcon(status, language)}</span><span>${formatNumber(displayValue.length)} ${escapeHtml(labels.characters)}</span></span></summary><pre data-scroll-id="${id}">${escapeHtml(displayValue)}</pre></details>`;
+  return `<pre class="tool-output${error ? " error-output" : ""}${repl ? " repl-result" : ""}" aria-label="${escapeAttribute(label)}">${escapeHtml(value)}</pre>`;
 }
 
-function renderToolStatusRow(tool: ToolState, language: TurnPreviewLanguage): string {
-  const timing = renderToolTiming(tool, language);
-  return `<div class="tool-status-row"><span class="tool-output-meta">${timing}<span class="tool-state ${tool.status}" aria-label="${escapeAttribute(tool.status)}">${toolStatusIcon(tool.status, language)}</span></span></div>`;
+function renderToolTiming(tool: ToolState, placement: "header" | "footer"): string {
+  const className = `tool-${placement}-timing`;
+  const duration = toolDuration(tool);
+  if (duration === undefined) {
+    return `<span class="${className}">?</span>`;
+  }
+  const live = tool.status === "running" && tool.completedAt === undefined;
+  return `<span class="${className}"${live ? ` data-live-tool-duration data-started-at="${tool.startedAt}" data-short-duration="1"` : ""}>${formatShortDuration(duration)}</span>`;
 }
 
-function renderToolTiming(tool: ToolState, language: TurnPreviewLanguage): string {
-  const labels = previewLabels(language);
-  const start = tool.startedAt === undefined ? labels.unknown : formatTimestamp(tool.startedAt);
-  const duration = toolDuration(tool);
-  const liveDuration = duration === undefined
-    ? `<span>${escapeHtml(labels.elapsed.trim())}${language === "zh" ? "" : " "}${escapeHtml(labels.unknown)}</span>`
-    : `<span${tool.status === "running" && tool.completedAt === undefined ? ` data-live-tool-duration data-started-at="${tool.startedAt}"` : ""}>${escapeHtml(labels.elapsed)}${escapeHtml(duration)}</span>`;
-  return `<span title="${escapeAttribute(labels.startingTime)}">${escapeHtml(start)}</span>${liveDuration}`;
+function formatShortDuration(duration: string): string {
+  const parts = duration.split(":").map(Number);
+  const seconds = parts.at(-1) ?? 0;
+  const minutes = parts.length > 2 ? (parts.at(-2) ?? 0) + (parts.at(-3) ?? 0) * 60 : parts.at(-2) ?? 0;
+  return minutes > 0 ? `${minutes}:${String(seconds).padStart(2, "0")}` : seconds > 0 ? `${seconds}s` : "";
 }
 
 function renderToolImage(
@@ -567,12 +591,12 @@ function renderFileSummary(
   localFileUrl?: (filePath: string) => string | undefined,
 ): string {
   const labels = previewLabels(language);
-  const files = state.fileSummary.map((file) => renderFileEntry(file, localFileUrl)).join("");
-  return `<section class="files-summary"><h2>${escapeHtml(labels.fileChanges)} <span>${state.fileSummary.length}</span></h2><ul class="files">${files}</ul></section>`;
+  const files = state.fileSummary.map((file) => renderFileEntry(file, localFileUrl, state.projectCwd)).join("");
+  return `<details class="files-summary" data-activity-id="turn:files-summary"><summary><h2>${escapeHtml(labels.fileChanges)} <span>${state.fileSummary.length}</span></h2></summary><ul class="files">${files}</ul></details>`;
 }
 
-function renderFileEntry(file: FileSummary, localFileUrl?: (filePath: string) => string | undefined): string {
-  const label = `<code>${escapeHtml(file.path)}</code>`;
+function renderFileEntry(file: FileSummary, localFileUrl?: (filePath: string) => string | undefined, projectCwd?: string): string {
+  const label = `<code>${escapeHtml(displayFilePath(file.path, projectCwd))}</code>`;
   const url = localFileUrl?.(file.path);
   const link = url
     ? `<a class="file-link" href="${escapeAttribute(url)}" target="_blank" rel="noreferrer noopener">${label}</a>`
@@ -608,15 +632,23 @@ function previewTitle(state: TurnViewState): string {
   return value.length > 80 ? `${value.slice(0, 79)}…` : value;
 }
 
-function renderMarkdown(value: string): string {
-  return MARKDOWN.render(value);
+function renderMarkdown(value: string, projectCwd?: string, localFileUrl?: (filePath: string) => string | undefined): string {
+  const environment = {};
+  const tokens = MARKDOWN.parse(value, environment);
+  // Only the directory is used to resolve relative links; no Markdown file is created.
+  const markdownPath = projectCwd && path.isAbsolute(projectCwd) ? path.join(projectCwd, "turn.md") : undefined;
+  rewriteMarkdownFileLinks(tokens, markdownPath, (filePath) => {
+    const url = localFileUrl?.(filePath);
+    return url ? new URL(url) : undefined;
+  });
+  return MARKDOWN.renderer.render(tokens, MARKDOWN.options, environment);
 }
 
 function statusLabel(status: TurnViewStatus, language: TurnPreviewLanguage): string {
   return previewLabels(language).statuses[status];
 }
 
-function toolStatusIcon(status: ToolState["status"], language: TurnPreviewLanguage): string {
+function toolStatusLabel(status: ToolState["status"], language: TurnPreviewLanguage): string {
   return status === "completed"
     ? previewLabels(language).toolStatuses.completed
     : status === "failed"
@@ -640,15 +672,6 @@ function formatDuration(durationMs: number): string {
     : `${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
 }
 
-function formatTimestamp(timestampMs: number): string {
-  return new Intl.DateTimeFormat(undefined, {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false,
-  }).format(new Date(timestampMs));
-}
-
 function formatNumber(value: number): string {
   return Math.max(0, Math.floor(value)).toLocaleString("en-US");
 }
@@ -673,7 +696,7 @@ function escapeAttribute(value: string): string {
 }
 
 const TURN_PREVIEW_CSS = `
-:root { color-scheme: light dark; font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --page: #fff; --surface: #f5f6f7; --code: #fafafa; --text: #25272b; --muted: #62666d; --line: #e0e2e5; --accent: #245bc0; --success: #257449; --danger: #b52c34; }
+:root { color-scheme: light dark; font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --page: #fff; --surface: #f5f6f7; --code: #fafafa; --text: #25272b; --muted: #62666d; --line: #e0e2e5; --accent: #245bc0; --success: #257449; --danger: #b52c34; --scrollbar-thumb: #d4d7dc; --scrollbar-thumb-hover: #afb4bc; }
 * { box-sizing: border-box; letter-spacing: 0; }
 body { margin: 0; background: var(--page); color: var(--text); font-size: 13px; line-height: 1.55; }
 .page-header { position: sticky; top: 0; z-index: 3; background: var(--page); border-bottom: 1px solid var(--line); }
@@ -702,16 +725,21 @@ h2 span { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 4
 .metadata > span + span::before { content: "·"; position: absolute; left: 0; top: 0; }
 .metadata strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
 main { max-width: 1320px; margin: 0 auto; padding: 0 20px 40px; }
-.plan, .files-summary, .result { padding: 14px 0; border-bottom: 1px solid var(--line); }
+.plan, .files-summary, .result { padding: 14px 0; }
+.files-summary, .result { border-top: 1px solid var(--line); }
+.files-summary > summary h2 { margin: 0; }
+.files-summary > .files { padding-top: 8px; }
 .plan ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
 .plan li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; overflow-wrap: anywhere; }
 .plan li.completed { color: var(--muted); }
 .plan li.in_progress { color: var(--accent); }
 .timeline { padding-top: 2px; }
 .activity { min-width: 0; }
-.message { padding: 12px 0; border-bottom: 1px solid var(--line); }
+.message { padding: 12px 0; }
+.prompt { border-bottom: 1px solid var(--line); }
+.timeline .markdown hr { display: none; }
 .markdown { min-width: 0; overflow-wrap: anywhere; }
-.commentary > .markdown { font-weight: 700; }
+.message > .markdown, .result > .markdown { font-size: 14px; font-weight: 400; }
 .markdown > :first-child { margin-top: 0; }
 .markdown > :last-child { margin-bottom: 0; }
 .markdown p, .markdown ul, .markdown ol, .markdown pre, .markdown blockquote { margin: 0 0 6px; }
@@ -734,32 +762,52 @@ summary:hover { background: transparent; }
 summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 .tool { margin: 8px 0; }
 .tool-step { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: transparent; }
-.tool-header { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; padding: 7px 10px; overflow-x: auto; background: transparent; font-weight: 400; }
-.tool-state { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
+.tool-step[data-tool-status="running"] { border-color: var(--accent); }
+.tool-header { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 7px 10px; overflow: hidden; background: transparent; font-weight: 400; }
+.tool-content { max-height: calc(30 * 12px * 1.55 + 16px); padding: 8px 12px; overflow: auto; --tool-scrollbar-thumb: var(--scrollbar-thumb); scrollbar-width: thin; scrollbar-color: var(--tool-scrollbar-thumb) transparent; }
+.tool-content > * + * { margin-top: 8px; }
+.tool-content pre { max-width: none; max-height: none; padding: 0; overflow: visible; background: transparent; }
+.tool-command { display: flex; align-items: flex-start; gap: 8px; width: max-content; min-width: 100%; }
+.tool-command-prefix { flex: none; color: var(--muted); font: 12px/1.55 "Cascadia Mono", "SFMono-Regular", Consolas, monospace; }
+.tool-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 12px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.tool-footer > * { white-space: nowrap; }
+.tool-footer > * + *::before { content: "·"; margin-right: 8px; }
+@media (hover: hover) and (pointer: fine) {
+  .tool-content { --tool-scrollbar-thumb: transparent; }
+  .tool-content:is(:hover, :focus-visible, :focus-within) { --tool-scrollbar-thumb: var(--scrollbar-thumb); }
+}
+@supports selector(::-webkit-scrollbar) {
+  .tool-content { scrollbar-width: auto; scrollbar-color: auto; }
+  .tool-content::-webkit-scrollbar { width: 6px; height: 6px; }
+  .tool-content::-webkit-scrollbar-track,
+  .tool-content::-webkit-scrollbar-corner { background: transparent; }
+  .tool-content::-webkit-scrollbar-thumb { background: var(--tool-scrollbar-thumb); border-radius: 3px; }
+  .tool-content::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
+  .tool-content::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
+}
+@media (hover: none), (pointer: coarse) {
+  .tool-content { scrollbar-width: none; }
+  .tool-content::-webkit-scrollbar { display: none; width: 0; height: 0; }
+}
+.tool-status-icon { display: inline-flex; flex: 0 0 16px; align-items: center; justify-content: center; font-size: 13px; line-height: 18px; }
+.tool-state { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; font-weight: 400; white-space: nowrap; }
 .tool-state.completed { color: var(--success); }
 .tool-state.running { color: var(--accent); }
 .tool-state.failed { color: var(--danger); }
-.tool-title { min-width: 0; flex: 1 0 auto; overflow-wrap: normal; font-size: 12px; font-weight: 400; line-height: 1.45; white-space: pre; }
-.tool-command-title { display: block; min-width: 0; flex: 1 0 auto; margin: 0; padding: 0; overflow-wrap: normal; background: transparent; color: var(--text); font: 12px/1.55 "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-weight: 400; white-space: pre; }
-.tool-meta { display: flex; flex: 0 1 auto; flex-wrap: nowrap; gap: 12px; max-width: 48%; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tool-summary-content { min-width: 0; flex: 1 1 auto; overflow: hidden; }
+.tool-title, .tool-command-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tool-title { font-size: 12px; font-weight: 400; line-height: 1.45; }
+.tool-command-title { margin: 0; padding: 0; background: transparent; color: var(--text); font: 12px/1.55 "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-weight: 400; }
+.tool-meta { display: flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; gap: 12px; max-width: none; margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .tool-meta span { white-space: nowrap; }
-.tool-body { border-top: 1px solid var(--line); }
-.tool-body > .muted { padding: 8px 12px; }
-.tool-output { border-top: 1px solid var(--line); }
-.tool-output:first-child { border-top: 0; }
-.tool-output > summary { padding: 4px 12px; background: transparent; color: var(--muted); font-size: 12px; }
-.tool-output-label { min-width: 0; }
-.tool-output-meta { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; font-size: 11px; }
-.tool-status-row { display: flex; justify-content: flex-end; padding: 5px 12px; border-top: 1px solid var(--line); }
-.tool-output > pre { max-height: none; border-top: 1px solid var(--line); background: transparent; }
-.repl-code { background: transparent; }
-.repl-result > pre { white-space: pre; overflow-wrap: normal; background: transparent; }
-.error-output > summary, .error-result h2 { color: var(--danger); }
+.tool-header-timing { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.tool-header-timing:empty, .tool-footer-timing:empty { display: none; }
+.error-output, .error-result h2 { color: var(--danger); }
 .muted, .empty { color: var(--muted); }
-.notice, .empty { padding: 10px 0; border-bottom: 1px solid var(--line); }
+.notice, .empty { padding: 10px 0; }
 .notice { color: #926a08; }
 .files { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
-.tool-output .files { padding: 8px 12px; }
+.tool-content .files code { background: transparent; }
 .files li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
 .files code { min-width: 0; }
 .files .file-link { min-width: 0; color: var(--accent); text-underline-offset: 2px; }
@@ -767,7 +815,6 @@ summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
 .additions { color: var(--success); }
 .deletions { color: var(--danger); }
 .file-delta { display: inline-flex; flex: none; gap: 6px; font: 12px "Cascadia Mono", Consolas, monospace; }
-.tool-image { padding: 8px 12px; border-top: 1px solid var(--line); }
 .tool-image img { display: block; max-width: 100%; max-height: 720px; }
 .final-result h2 { color: var(--success); }
 @media (max-width: 700px) {
@@ -780,13 +827,12 @@ summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
   .message { padding: 10px 0; }
   .tool-header { gap: 6px; padding: 7px 9px; }
   .tool-state { font-size: 11px; }
-  .tool-meta { flex: 0 1 auto; gap: 10px; max-width: 50%; font-size: 11px; }
-  .tool-output > summary { min-height: 40px; padding: 6px 10px; }
-  .tool-output-meta { gap: 10px; }
+  .tool-meta { gap: 10px; font-size: 11px; }
+  .tool-content, .tool-footer { padding-left: 10px; padding-right: 10px; }
   pre { padding: 8px 10px; }
 }
 @media (prefers-color-scheme: dark) {
-  :root { --page: #18191b; --surface: #232427; --code: #1d1e20; --text: #e0e1e4; --muted: #a0a3ab; --line: #35373c; --accent: #8aaff7; --success: #83c69c; --danger: #f58c94; }
+  :root { --page: #18191b; --surface: #232427; --code: #1d1e20; --text: #e0e1e4; --muted: #a0a3ab; --line: #35373c; --accent: #8aaff7; --success: #83c69c; --danger: #f58c94; --scrollbar-thumb: #45494f; --scrollbar-thumb-hover: #60666e; }
   .notice, .status.waiting_for_approval { color: #e1bc6f; }
 }
 `;

package/src/proxy/ProxySessionController.ts

@@ -487,6 +487,7 @@ export interface ProxyLifecycle {
   supervised?: boolean;
   restart(contextKey: string, force: boolean, replyTarget?: MessageReplyTarget): Promise<void>;
   cancelSafeRestart?(scheduleId: number): Promise<boolean>;
+  cancelAutomaticUpdate?(action: CardAction): Promise<void>;
   rememberFeishuUserOpenId?(userOpenId: string): Promise<void> | void;
   persistAgentExecutionDefaults?(
     agentName: string,
@@ -975,7 +976,10 @@ export class ProxySessionController {
     await this.outbound.withReplyTarget(contextKey, replyTarget, async () => {
       try {
         const kind = String(scopedAction.value.action ?? "");
-        if (kind === "help_command") {
+        if (kind === "agentbot_update_cancel") {
+          if (!this.lifecycle?.cancelAutomaticUpdate) throw new Error("自动更新功能未启用。");
+          await this.lifecycle.cancelAutomaticUpdate(scopedAction);
+        } else if (kind === "help_command") {
           await this.executeHelpCommandAction(scopedAction, contextKey, replyTarget);
         } else if (kind === "turn_details") {
           await this.outbound.showDetails(contextKey, String(scopedAction.value.turnId ?? ""));
@@ -1708,6 +1712,7 @@ export class ProxySessionController {
         await loaded.runtime.setReasoningEffort(record.localSessionId, nextEffort);
       }
       this.store.updateRuntimeSession(record.localSessionId, { model: nextValue, reasoningEffort: nextEffort });
+      this.outbound.updateSessionModel(record.localSessionId, nextValue);
     } else if (setting === "thinking" && nextValue) {
       const models = await loaded.runtime.listModels(loaded.session.modelProvider, loaded.session.model);
       const currentModel = models.find((candidate) => candidate.id === loaded.session.model)
@@ -3734,6 +3739,10 @@ export class ProxySessionController {
       while (true) {
         let pendingTurnId: string | undefined;
         try {
+          this.outbound.updateSessionModel(
+            loaded.record.localSessionId,
+            loaded.runtime.getSession(loaded.record.localSessionId)?.model ?? loaded.session.model,
+          );
           pendingTurnId = await this.outbound.startPendingTurn(
             loaded.record.localSessionId,
             loaded.record.contextKey,
@@ -5187,7 +5196,9 @@ export class ProxySessionController {
         throw error;
       }
     };
-    return loaded.runtime.setExecutionSettings(loaded.record.localSessionId, settings, persist);
+    const session = await loaded.runtime.setExecutionSettings(loaded.record.localSessionId, settings, persist);
+    this.outbound.updateSessionModel(loaded.record.localSessionId, session.model);
+    return session;
   }
 
   private async assertProviderModelSettings(
@@ -5249,6 +5260,7 @@ export class ProxySessionController {
       await loaded.runtime.setReasoningEffort(loaded.record.localSessionId, nextEffort);
     }
     this.store.updateRuntimeSession(loaded.record.localSessionId, { model, reasoningEffort: nextEffort });
+    this.outbound.updateSessionModel(loaded.record.localSessionId, model);
     await this.persistAgentExecutionDefaults(loaded.record.localSessionId);
     const effortMessage = nextEffort && nextEffort !== currentEffort
       ? `，思考强度已自动调整为 ${nextEffort}`

package/src/state/StateStore.ts

@@ -2,6 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 import Database from "better-sqlite3";
 import { migrations } from "./migrations.js";
+import type { UpdateCheckSchedule, UpdateNotice } from "../updates/types.js";
 
 export type SessionStatus = "starting" | "ready" | "running" | "closed" | "failed";
 
@@ -287,6 +288,36 @@ export class StateStore {
     `);
   }
 
+  getUpdateCheckSchedule(): UpdateCheckSchedule | undefined {
+    const row = this.db.prepare("SELECT value_json FROM update_check_schedule WHERE id = 1")
+      .get() as { value_json: string } | undefined;
+    return row ? JSON.parse(row.value_json) as UpdateCheckSchedule : undefined;
+  }
+
+  saveUpdateCheckSchedule(schedule: UpdateCheckSchedule): void {
+    this.db.prepare(`INSERT INTO update_check_schedule (id, value_json) VALUES (1, ?)
+      ON CONFLICT(id) DO UPDATE SET value_json = excluded.value_json`).run(JSON.stringify(schedule));
+  }
+
+  getUpdateNotice(version: string): UpdateNotice | undefined {
+    const row = this.db.prepare("SELECT value_json FROM update_notices WHERE version = ?")
+      .get(version) as { value_json: string } | undefined;
+    return row ? JSON.parse(row.value_json) as UpdateNotice : undefined;
+  }
+
+  saveUpdateNotice(notice: UpdateNotice): void {
+    this.db.prepare(`INSERT INTO update_notices (version, status, value_json) VALUES (?, ?, ?)
+      ON CONFLICT(version) DO UPDATE SET status = excluded.status, value_json = excluded.value_json`)
+      .run(notice.version, notice.status, JSON.stringify(notice));
+  }
+
+  listPendingUpdateNotices(): UpdateNotice[] {
+    const rows = this.db.prepare(`SELECT value_json FROM update_notices
+      WHERE status IN ('announcing', 'countdown', 'preparing', 'scheduled')`)
+      .all() as Array<{ value_json: string }>;
+    return rows.map((row) => JSON.parse(row.value_json) as UpdateNotice);
+  }
+
   saveGoalCardDelivery(localSessionId: string, contextKey: string, messageId: string): void {
     const updatedAt = new Date().toISOString();
     this.db.prepare(`

package/src/state/migrations.ts

@@ -195,4 +195,16 @@ export const migrations = [
   CREATE INDEX IF NOT EXISTS idx_card_action_bindings_created
     ON card_action_bindings(created_at);
   `,
+  `
+  CREATE TABLE IF NOT EXISTS update_check_schedule (
+    id INTEGER PRIMARY KEY CHECK (id = 1),
+    value_json TEXT NOT NULL
+  );
+  CREATE TABLE IF NOT EXISTS update_notices (
+    version TEXT PRIMARY KEY,
+    status TEXT NOT NULL,
+    value_json TEXT NOT NULL
+  );
+  CREATE INDEX IF NOT EXISTS idx_update_notices_status ON update_notices(status);
+  `,
 ] as const;

package/src/updates/AutomaticUpdatePreparer.ts

@@ -0,0 +1,76 @@
+import { execFile, type ExecFileOptionsWithStringEncoding } from "node:child_process";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { promisify } from "node:util";
+import { z } from "zod";
+import { loadConfig } from "../config/loadConfig.js";
+import { controlEndpoint } from "../cli/controlProtocol.js";
+import { finalizeSelfUpdatePlan, prepareSelfUpdate, releaseSelfUpdatePlan, requireNpmSelfUpdateInstallation } from "../cli/SelfUpdater.js";
+import { stableVersionSchema } from "./PublishedRelease.js";
+
+const resultSchema = z.discriminatedUnion("status", [
+  z.object({ status: z.literal("current") }),
+  z.object({ status: z.literal("prepared"), planPath: z.string().min(1), targetVersion: stableVersionSchema }),
+]);
+const runFile = promisify(execFile);
+type RunPreparation = (file: string, args: string[], options: ExecFileOptionsWithStringEncoding) => Promise<{ stdout: string }>;
+interface UpdateProfile { home: string; configPath: string }
+
+export async function checkAutomaticUpdateSupport(profile: UpdateProfile, run: RunPreparation = runFile): Promise<void> {
+  z.object({ status: z.literal("supported") }).parse(await runPreparer("--check", profile, run));
+}
+
+export async function prepareAutomaticUpdate(
+  version: string,
+  profile: UpdateProfile,
+  run: RunPreparation = runFile,
+): Promise<z.infer<typeof resultSchema>> {
+  stableVersionSchema.parse(version);
+  const result = resultSchema.parse(await runPreparer(version, profile, run));
+  if (result.status === "prepared" && result.targetVersion !== version) {
+    throw new Error("The prepared update does not match the announced version.");
+  }
+  return result;
+}
+
+async function runPreparer(argument: string, profile: UpdateProfile, run: RunPreparation): Promise<unknown> {
+  const environment: NodeJS.ProcessEnv = { ...process.env, AGENT_BOT_HOME: profile.home, AGENT_BOT_CONFIG: profile.configPath };
+  delete environment.AGENT_BOT;
+  // npm preparation is synchronous and can take minutes; keep it off the live worker's event loop.
+  const { stdout } = await run(process.execPath, [fileURLToPath(import.meta.url), argument], {
+    env: environment, windowsHide: true, encoding: "utf8", maxBuffer: 1_000_000,
+  });
+  return JSON.parse(String(stdout)) as unknown;
+}
+
+async function main(): Promise<void> {
+  if (process.argv[2] === "--check") {
+    requireNpmSelfUpdateInstallation();
+    process.stdout.write(JSON.stringify({ status: "supported" }));
+    return;
+  }
+  const version = stableVersionSchema.parse(process.argv[2]);
+  const config = loadConfig();
+  const prepared = await prepareSelfUpdate({ version, channel: "latest" });
+  if (prepared.status === "prepared") {
+    try {
+      finalizeSelfUpdatePlan(prepared.planPath, {
+        controlEndpoint: controlEndpoint(config.storage.sqlitePath),
+        databasePath: config.storage.sqlitePath,
+        restartService: true,
+        workingDirectory: process.cwd(),
+        reason: `Agent Bot 自动更新到 ${version}`,
+      });
+    } catch (error) {
+      releaseSelfUpdatePlan(prepared.planPath);
+      throw error;
+    }
+  }
+  process.stdout.write(JSON.stringify(prepared));
+}
+
+if (process.argv[1] && pathToFileURL(process.argv[1]).href === import.meta.url) {
+  void main().catch((error: unknown) => {
+    process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
+    process.exitCode = 1;
+  });
+}