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

package/src/feishu/CardRenderer.ts

@@ -4,6 +4,7 @@ import type { JsonValue } from "../acp/acpTypes.js";
 import type { RuntimeSession } from "../acp/AcpSessionManager.js";
 import type {
   ApprovalDecision,
+  ApprovalRequest,
   ModelOption,
   ModelProviderOption,
   PermissionMode,
@@ -197,6 +198,7 @@ export interface SessionTaskCardEntry {
   reference: string;
   summary: string;
   detailLines: string[];
+  stopAction?: TaskListCardAction;
   actions?: TaskListCardAction[];
   current?: boolean;
 }
@@ -1698,38 +1700,7 @@ function renderTurnElements(
   elements.push(...renderActivities(visibleActivities, state.projectCwd));
   if (state.fileSummary.length > 0) elements.push(fileSummaryPanel(state));
 
-  if (state.approval) {
-    const request = state.approval;
-    elements.push(markdown([
-      `**${request.title}**`,
-      request.command ? codeBlock(request.command, 800) : undefined,
-      request.reason,
-    ].filter(Boolean).join("\n")));
-    elements.push({
-      tag: "column_set",
-      flex_mode: "flow",
-      horizontal_spacing: "8px",
-      columns: request.options.map((option) => ({
-        tag: "column",
-        width: "auto",
-        elements: [{
-          tag: "button",
-          text: { tag: "plain_text", content: request.kind === "mode_change" ? option.label : approvalDecisionLabel(option.id) },
-          type: option.id === "accept" || option.id === "acceptForSession" ? "primary" : option.id === "cancel" ? "danger" : "default",
-          behaviors: [{
-            type: "callback",
-            value: {
-              action: "approval",
-              sessionId: state.sessionId,
-              turnId: state.turnId,
-              requestId: request.id,
-              decision: option.id,
-            },
-          }],
-        }],
-      })),
-    });
-  }
+  if (state.approval) elements.push(...renderApprovalElements(state, state.approval));
   if (state.error) elements.push(markdown(codeBlock(state.error, 2_000)));
   const showAssistantText = state.assistantText && assistantTextMode === "always";
   if (showAssistantText) {
@@ -1769,38 +1740,7 @@ function renderGroupedTurnElements(
   elements.push(...renderGroupedActivityGroups(visibleGroups, state.projectCwd));
   if (state.fileSummary.length > 0) elements.push(fileSummaryPanel(state));
 
-  if (state.approval) {
-    const request = state.approval;
-    elements.push(markdown([
-      `**${request.title}**`,
-      request.command ? codeBlock(request.command, 800) : undefined,
-      request.reason,
-    ].filter(Boolean).join("\n")));
-    elements.push({
-      tag: "column_set",
-      flex_mode: "flow",
-      horizontal_spacing: "8px",
-      columns: request.options.map((option) => ({
-        tag: "column",
-        width: "auto",
-        elements: [{
-          tag: "button",
-          text: { tag: "plain_text", content: request.kind === "mode_change" ? option.label : approvalDecisionLabel(option.id) },
-          type: option.id === "accept" || option.id === "acceptForSession" ? "primary" : option.id === "cancel" ? "danger" : "default",
-          behaviors: [{
-            type: "callback",
-            value: {
-              action: "approval",
-              sessionId: state.sessionId,
-              turnId: state.turnId,
-              requestId: request.id,
-              decision: option.id,
-            },
-          }],
-        }],
-      })),
-    });
-  }
+  if (state.approval) elements.push(...renderApprovalElements(state, state.approval));
   if (state.error) elements.push(markdown(codeBlock(state.error, 2_000)));
   const showAssistantText = state.assistantText && assistantTextMode === "always";
   if (showAssistantText) {
@@ -1812,6 +1752,79 @@ function renderGroupedTurnElements(
   return elements;
 }
 
+function renderApprovalElements(state: TurnViewState, request: ApprovalRequest): Record<string, unknown>[] {
+  const elements: Record<string, unknown>[] = [];
+  const command = request.command?.trim();
+  if (command && request.kind !== "mode_change") {
+    elements.push(markdown("**命令执行确认**"));
+    const reason = request.reason?.trim()
+      || (request.title.trim() !== command ? request.title.trim() : "");
+    if (reason && reason !== command) {
+      const preview = approvalTextPreview(reason, 1_000, escapeApprovalText);
+      elements.push(markdown(escapeApprovalText(preview)));
+      if (preview !== reason) elements.push(markdown("<font color='grey'>说明较长，请在 Preview 中查看完整内容。</font>"));
+    }
+    const display = displayToolCommand(command) ?? command;
+    const summary = truncateText(display.replace(/\s+/gu, " "), 64);
+    const preview = approvalTextPreview(command, 2_200);
+    elements.push(collapsiblePanel(`查看命令 · ${summary}`, [
+      markdown(codeBlock(preview, preview.length)),
+      ...(preview !== command ? [markdown("<font color='grey'>命令过长，卡片仅显示开头。请在 Preview 中查看完整命令后再授权。</font>")] : []),
+    ], {
+      elementId: `approval_${createHash("sha256").update(request.id).digest("hex").slice(0, 11)}`,
+      compact: true,
+      borderColor: "grey",
+    }));
+  } else {
+    elements.push(markdown([
+      `**${request.title}**`,
+      request.command ? codeBlock(request.command, 800) : undefined,
+      request.reason,
+    ].filter(Boolean).join("\n")));
+  }
+  elements.push({
+    tag: "column_set",
+    flex_mode: "flow",
+    horizontal_spacing: "8px",
+    columns: request.options.map((option) => ({
+      tag: "column",
+      width: "auto",
+      elements: [{
+        tag: "button",
+        text: { tag: "plain_text", content: request.kind === "mode_change" ? option.label : approvalDecisionLabel(option.id) },
+        type: option.id === "accept" || option.id === "acceptForSession" ? "primary" : option.id === "cancel" ? "danger" : "default",
+        behaviors: [{
+          type: "callback",
+          value: {
+            action: "approval",
+            sessionId: state.sessionId,
+            turnId: state.turnId,
+            requestId: request.id,
+            decision: option.id,
+          },
+        }],
+      }],
+    })),
+  });
+  return elements;
+}
+
+function approvalTextPreview(value: string, maxBytes: number, encode = (text: string): string => text): string {
+  if (Buffer.byteLength(JSON.stringify(encode(value)), "utf8") <= maxBytes) return value;
+  let bytes = 5;
+  let result = "";
+  for (const character of value) {
+    bytes += Buffer.byteLength(JSON.stringify(encode(character)), "utf8") - 2;
+    if (bytes > maxBytes) break;
+    result += character;
+  }
+  return `${result}...`;
+}
+
+function escapeApprovalText(value: string): string {
+  return escapeCardHtml(value).replace(/[\\`*_[\]#]/gu, (character) => `&#${character.codePointAt(0)};`);
+}
+
 function emptyTurnText(status: TurnViewStatus, agentLabel?: string): string {
   const label = agentLabel?.trim().replace(/[\r\n]+/g, " ") || "Agent";
   if (status === "starting") return `正在连接 ${label}…`;
@@ -2298,6 +2311,7 @@ function collapsiblePanel(
 
 function sessionTaskPanel(entry: SessionTaskCardEntry): Record<string, unknown> {
   const elements: Record<string, unknown>[] = [markdown(entry.detailLines.join("\n"))];
+  if (entry.stopAction) elements.push(sessionActionButton(entry.stopAction));
   if (entry.actions?.length) elements.push(sessionActionOverflow(entry.actions));
   return collapsiblePanel(entry.summary, elements, {
     elementId: sessionTaskPanelElementId(entry.reference),

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; }
+    }
+`;

package/src/local-files/LocalFileViewerServer.ts

@@ -9,6 +9,8 @@ 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 +58,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 +82,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 +160,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 +178,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 +219,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 +261,7 @@ interface DirectoryViewerEntry {
 interface RenderedFileSnapshot {
   content: string;
   metadata: string[];
-  viewMode?: "markdown" | "html";
+  viewMode?: "markdown" | "html" | "csv";
 }
 
 export interface LocalFileViewerServerOptions {
@@ -611,6 +643,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 +673,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"
@@ -984,6 +1022,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 +1047,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 +1095,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 +1104,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 +1134,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 +1158,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>