@spzxg/cli-ui 0.6.0 → 0.6.2

package/dist/cli-ui.js

@@ -1,4 +1,4 @@
-import { C as a, b as i, d as r, e as t, f as o, h as C, i as l, j as n, k as m, m as d, l as u, n as w, o as B, p as f } from "./cli-ui-embed-CXdmrwo1.js";
+import { C as a, b as i, d as r, e as t, f as o, h as C, i as l, j as n, k as m, m as d, l as u, n as w, o as B, p as f } from "./cli-ui-embed-6IJ_jRVh.js";
 export {
   a as CliBoard,
   i as CliBrowserView,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spzxg/cli-ui",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "type": "module",
   "description": "任务中心（cli-task-center）对话任务的前端积木：cli-msglist 消息对话列表、cli-chat 对话，数据全部来自 center 服务。",
   "main": "src/index.ts",
@@ -44,6 +44,7 @@
     "vitest": "^2.1.8"
   },
   "dependencies": {
+    "jszip": "^3.10.2",
     "mammoth": "^1.13.0",
     "react-markdown": "^10.1.0",
     "rehype-highlight": "^7.0.2",

package/src/board/CliBoard.tsx

@@ -264,9 +264,9 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
   useEffect(() => {
     if (!jobId || !autoView) return;
     store.setViewing(jobId, viewingPath
-      ? { id: `file:${viewingPath}`, kind: "file", label: viewingPath.split("/").pop() || viewingPath, text: `当前在看板里打开的文件 ${viewingPath}` }
+      ? { id: `file:${viewingPath}`, kind: "file", label: viewingPath.split("/").pop() || viewingPath, text: `用户当前在看板里打开着工作区文件 ${viewingPath}` }
       : viewingPage
-        ? { id: "browser:page", kind: "browser", label: viewingPage.title || viewingPage.url, text: `当前在看板里看的任务浏览器页面：${viewingPage.title ? `${viewingPage.title} — ` : ""}${viewingPage.url}` }
+        ? { id: "browser:page", kind: "browser", label: viewingPage.title || viewingPage.url, text: `用户当前在看板里看着任务浏览器页面：${viewingPage.title ? `${viewingPage.title} — ` : ""}${viewingPage.url}` }
         : null, owner);
   }, [store, jobId, autoView, viewingPath, viewingPage?.url, viewingPage?.title, owner]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => () => { if (jobId) store.setViewing(jobId, null, owner); }, [store, jobId, owner]);

package/src/board/FileViewer.tsx

@@ -6,14 +6,17 @@
 //     流式加载、支持断点，不把文件读进浏览器内存。中枢太旧发不了短期链接时才先 fetch 成 blob，这时超大的文件不预览、只给下载。
 //   · 文本只读开头 512 KB（Range），超过的可以切到「看末尾」（日志）；GBK 导出的文件按 GB18030 解。
 //   · 文件在变（任务还在写）：看板递增 version 时重读；读的时候保留滚动位置，原本在最底下的继续贴着底（像 tail -f）。
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
 import { fileUrlFromBase, type BoardBackend } from "../core/client.js";
 import { Icon } from "../ui/icons.js";
 import { Markdown } from "../ui/Markdown.js";
 import { FileLinkContext, FileOpenContext } from "../ui/fileLinks.js";
-import { codeLang, fmtSize, parseCsv, previewKind, resolveRelative, type PreviewKind } from "./fileKind.js";
+import { codeLang, fmtSize, parseCsv, previewKind, resolveRelative, splitMarkdown, type PreviewKind } from "./fileKind.js";
+import { loadText, refreshText, type LoadedText } from "./textLoad.js";
+import { decodeText } from "../core/textDecode.js";
 import { relTime } from "../ui/format.js";
 import { downloadFile, mimeOf } from "./fileOps.js";
+import { bridgeDoc, frameToken, type FrameSelMessage } from "./frameQuote.js";
 
 export { downloadFile };
 
@@ -26,14 +29,19 @@ export interface FileAction {
   onClick: (file: { path: string; name: string; url: string; downloadUrl: string }, jobId: string) => void;
 }
 
-const TEXT_MAX = 512 * 1024;
-const HIGHLIGHT_MAX = 120 * 1024;
-/** Markdown 超过这么多按纯文本显示（渲染几百 KB 的 Markdown 会让页面卡住）。 */
-const MARKDOWN_RENDER_MAX = 300 * 1024;
-/** 只能先 fetch 成 blob 时（中枢太旧）：超过这么大的不预览、不在浏览器里拼下载。 */
-const BLOB_PREVIEW_MAX = 50 * 1024 * 1024;
+// 预览能看多大（实测 Chromium：32 MB 纯文本排版约 3 秒，60 MB 的 HTML 报告约 12 秒显示出来）：
+/** 文本（代码、日志、Markdown、CSV、HTML 源文件）一次最多读这么多；更大的看开头 / 末尾。 */
+export const TEXT_MAX = 32 * 1024 * 1024;
+/** HTML 预览（能选中引用）最多读这么多进来；更大的直接按地址打开（能看，不能选中引用）。 */
+export const HTML_QUOTE_MAX = 100 * 1024 * 1024;
+/** 代码高亮到这么大（约 1 MB/秒）；更大的按纯文本显示（照样能选中引用）。 */
+const HIGHLIGHT_MAX = 512 * 1024;
+/** 大 Markdown 分段渲染，每段这么多字（渲染耗时随长度超线性增长：300 KB 约 0.7 秒，3 MB 一次渲染要 30 秒）。 */
+const MARKDOWN_SECTION = 128 * 1024;
+/** 只能先 fetch 成 blob 时（中枢太旧）：超过这么大的图片 / PDF 不预览、不在浏览器里拼下载。 */
+const BLOB_PREVIEW_MAX = 100 * 1024 * 1024;
 /** Word 在浏览器里转换，太大的只给下载。 */
-const DOCX_PREVIEW_MAX = 30 * 1024 * 1024;
+const DOCX_PREVIEW_MAX = 50 * 1024 * 1024;
 /** 短期链接 30 分钟有效：每 5 分钟问一次（客户端缓存着，快到期才真的换），长时间开着的预览不会失效。 */
 const LINK_RECHECK_MS = 5 * 60_000;
 
@@ -97,7 +105,7 @@ function useFileSrc(backend: BoardBackend, jobId: string, path: string, enabled:
 }
 
 type Loaded =
-  | { kind: "text"; text: string; truncated: boolean; size: number; tail: boolean; encoding?: string }
+  | ({ kind: "text" } & LoadedText)
   | { kind: "docx"; html: string }
   | { kind: "none" };
 
@@ -118,7 +126,7 @@ export interface FileViewerProps {
   actions?: FileAction[];
   /** 隐藏头部（宿主自己做）。 */
   bare?: boolean;
-  /** 给了就支持「选中文字 → 引用到对话」：在预览里选中一段文字时浮出按钮（Markdown / 代码 / 文本 / 表格）。 */
+  /** 给了就支持「选中文字 → 引用到对话」：在预览里选中一段文字时浮出按钮（Markdown / 代码 / 文本 / 表格 / HTML / Word，及各自的源文件）。 */
   onQuoteText?: (text: string) => void;
 }
 
@@ -149,23 +157,79 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
     return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
   }, [big]);
   const needsSrc = kind === "image" || kind === "pdf" || kind === "html";
+  // 这个预览的口令：iframe 里的选区桥报上来的消息只认它（见 frameQuote.ts）。
+  const token = useMemo(frameToken, []);
   const links = useFileLinks(backend, jobId);
   const knownSize = size ?? (loaded?.kind === "text" ? loaded.size : undefined);
-  const src = useFileSrc(backend, jobId, path, needsSrc, version, knownSize, links, attempt);
+  // 读大文件时的进度（已收到的字节数）。
+  const [progress, setProgress] = useState(0);
+  // HTML 要能选中引用：整个读进来（最多 HTML_QUOTE_MAX）、插上选区桥，用 srcdoc 显示（见 frameQuote.ts）。
+  // 更大的、读失败的退回原来的 src 方式（能看，不能选中引用）。相对资源按文件地址解析；中枢太旧拿不到地址时相对资源显示不了（和以前一样）。
+  // 文件地址在读到的那一刻定下来：短期链接定时换新时不重载页面。
+  const linksRef = useRef(links);
+  linksRef.current = links;
+  const htmlTooBig = size !== undefined && size > HTML_QUOTE_MAX;
+  const htmlBridge = !!onQuoteText && kind === "html" && mode === "preview" && !links.pending && !htmlTooBig;
+  const [htmlDoc, setHtmlDoc] = useState<{ srcDoc: string } | "fallback" | "toobig" | null>(null);
+  // 走 srcdoc 时不用再按地址取（中枢太旧时那是又整个读一遍）。
+  const bridged = htmlBridge && htmlDoc !== "fallback" && htmlDoc !== "toobig";
+  const src = useFileSrc(backend, jobId, path, needsSrc && !bridged, version, knownSize, links, attempt);
+  useEffect(() => {
+    if (!htmlBridge) return;
+    const ctl = new AbortController();
+    let over = false;
+    setHtmlDoc(null);
+    setProgress(0);
+    backend.readBuffer(jobId, path, {
+      signal: ctl.signal,
+      // 大小事先不知道（从对话里打开的）：读着读着超过上限就停下，改成直接打开。
+      onBytes: (n) => { setProgress(n); if (n > HTML_QUOTE_MAX && !over) { over = true; ctl.abort(); } },
+    }).then((buffer) => {
+      if (ctl.signal.aborted) return;
+      const url = linksRef.current.url?.(path);
+      const base = url ? withVersion(new URL(url, window.location.href).href, version) : undefined;
+      setHtmlDoc({ srcDoc: bridgeDoc(decodeText(new Uint8Array(buffer)).text, { token, base }) });
+    }, () => { if (over) setHtmlDoc("toobig"); else if (!ctl.signal.aborted) setHtmlDoc("fallback"); });
+    return () => { if (!over) ctl.abort(); };
+  }, [htmlBridge, backend, jobId, path, version, attempt, token]);
 
   // 重读时保留滚动位置；原本贴着底（或在看末尾）的继续贴着底——任务在往文件里写时像 tail -f。
   const bodyRef = useRef<HTMLDivElement | null>(null);
+  const loadedRef = useRef(loaded);
+  loadedRef.current = loaded;
+  const textKey = useRef("");
   const rootRef = useRef<HTMLDivElement | null>(null);
   const stick = useRef(false);
   // 选中文字 → 浮出「引用到对话」。按钮放在选区上方；滚动、点别处、选区清空时收起。
-  const [sel, setSel] = useState<{ text: string; x: number; y: number } | null>(null);
+  // frame = 选区在 HTML / Word 预览的 iframe 里（由插进去的小脚本报上来，见 frameQuote.ts）。
+  const [sel, setSel] = useState<{ text: string; x: number; y: number; frame?: boolean } | null>(null);
+  const frameRef = useRef<HTMLIFrameElement | null>(null);
+  useEffect(() => {
+    if (!onQuoteText) return;
+    const onMessage = (e: MessageEvent) => {
+      const frame = frameRef.current;
+      const root = rootRef.current;
+      const data = e.data as FrameSelMessage | null;
+      if (!frame || !root || e.source !== frame.contentWindow || !data || data.cliUiSel !== token) return;
+      const text = data.scroll ? "" : (data.text ?? "").trim();
+      if (!text) { setSel((cur) => (cur?.frame ? null : cur)); return; }
+      const box = root.getBoundingClientRect();
+      const fr = frame.getBoundingClientRect();
+      const r = data.rect ?? { left: fr.width / 2, top: 48, width: 0 };
+      setSel({ text, frame: true, x: Math.min(Math.max(8, fr.left - box.left + r.left + r.width / 2), box.width - 8), y: Math.max(40, fr.top - box.top + r.top) });
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [onQuoteText, token]);
   useEffect(() => {
     if (!onQuoteText) return;
     const read = () => {
       const s = window.getSelection();
       const body = bodyRef.current;
       const root = rootRef.current;
-      if (!s || s.isCollapsed || !s.rangeCount || !body || !root || !body.contains(s.anchorNode) || !body.contains(s.focusNode)) { setSel(null); return; }
+      // 宿主页面上没有选区：iframe 里的选区（另一个文档）不在这里，交给上面的消息处理，不清掉。
+      if (!s || s.isCollapsed || !s.rangeCount) { setSel((cur) => (cur?.frame ? cur : null)); return; }
+      if (!body || !root || !body.contains(s.anchorNode) || !body.contains(s.focusNode)) { setSel(null); return; }
       const text = s.toString().trim();
       if (!text) { setSel(null); return; }
       const box = root.getBoundingClientRect();
@@ -175,14 +239,18 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
       setSel({ text, x: Math.min(Math.max(8, r.left - box.left + r.width / 2), box.width - 8), y: Math.max(40, r.top - box.top) });
     };
     const onUp = () => setTimeout(read, 0);
-    const onChange = () => { const s = window.getSelection(); if (!s || s.isCollapsed) setSel(null); };
+    const onChange = () => { const s = window.getSelection(); if (!s || s.isCollapsed) setSel((cur) => (cur?.frame ? cur : null)); };
     const body = bodyRef.current;
     document.addEventListener("mouseup", onUp);
     document.addEventListener("keyup", onUp);
     document.addEventListener("selectionchange", onChange);
     const onScroll = () => setSel(null);
+    // 选区在 iframe 里时，点宿主页面别处（不是这个按钮）就收起。
+    const onDown = (e: MouseEvent) => { if (!(e.target instanceof Element && e.target.closest(".cli-fv-selq"))) setSel((cur) => (cur?.frame ? null : cur)); };
     body?.addEventListener("scroll", onScroll, { passive: true });
+    document.addEventListener("mousedown", onDown);
     return () => {
+      document.removeEventListener("mousedown", onDown);
       document.removeEventListener("mouseup", onUp);
       document.removeEventListener("keyup", onUp);
       document.removeEventListener("selectionchange", onChange);
@@ -193,7 +261,8 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
     if (!sel || !onQuoteText) return;
     const text = sel.text.length > QUOTE_SELECTION_MAX ? `${sel.text.slice(0, QUOTE_SELECTION_MAX)}…` : sel.text;
     onQuoteText(text);
-    window.getSelection()?.removeAllRanges();
+    if (sel.frame) frameRef.current?.contentWindow?.postMessage({ cliUiClear: token }, "*");
+    else window.getSelection()?.removeAllRanges();
     setSel(null);
   };
   useEffect(() => {
@@ -202,7 +271,8 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
     if (needsSrc || kind === "binary") { setLoaded({ kind: "none" }); return; }
     if (kind === "docx") {
       if (size !== undefined && size > DOCX_PREVIEW_MAX) { setError(`文件较大（${fmtSize(size)}），请下载后查看`); return; }
-      backend.readBuffer(jobId, path).then(async (buffer) => {
+      setProgress(0);
+      backend.readBuffer(jobId, path, { onBytes: (n) => { if (alive) setProgress(n); } }).then(async (buffer) => {
         const mammoth = await import("mammoth");
         const convert = (mammoth as unknown as { convertToHtml: typeof import("mammoth").convertToHtml }).convertToHtml
           ?? (mammoth as unknown as { default: typeof import("mammoth") }).default.convertToHtml;
@@ -213,12 +283,18 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
         if (alive) setLoaded({ kind: "docx", html: out.value });
       }).catch((e: unknown) => { if (alive) setError(e instanceof Error ? e.message : String(e)); });
     } else {
-      backend.readText(jobId, path, TEXT_MAX, { tail }).then(
+      // 只是文件变了（同一个文件、同样看开头 / 末尾）：能接上就只取新增的部分（见 textLoad.ts），接不上再整个重读。
+      const key = `${path}|${tail}|${attempt}`;
+      const prev = loadedRef.current?.kind === "text" && textKey.current === key ? loadedRef.current : null;
+      textKey.current = key;
+      if (!prev) setProgress(0);
+      const full = () => loadText(backend, jobId, path, { max: TEXT_MAX, tail, onBytes: (n) => { if (alive && !prev) setProgress(n); } });
+      (prev ? refreshText(backend, jobId, path, prev, TEXT_MAX).then((r) => r ?? full(), full) : full()).then(
         (r) => {
           if (!alive) return;
           const box = bodyRef.current;
           stick.current = tail || (!!box && box.scrollHeight > box.clientHeight && box.scrollHeight - box.scrollTop - box.clientHeight < 40);
-          setLoaded({ kind: "text", text: r.text, truncated: r.truncated, size: r.size, tail: !!r.tail, encoding: r.encoding });
+          setLoaded({ kind: "text", ...r });
         },
         (e: unknown) => { if (alive) setError(e instanceof Error ? e.message : String(e)); },
       );
@@ -251,11 +327,13 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
   const canSource = kind === "markdown" || kind === "html" || kind === "csv";
   const shownSize = knownSize;
   const text = loaded?.kind === "text" ? loaded : null;
-  // 太大的 Markdown 按纯文本显示（渲染会卡住页面）。
-  const mdTooBig = !!text && kind === "markdown" && text.text.length > MARKDOWN_RENDER_MAX;
-  const loading = !error && !src.error && (needsSrc ? !src.url : !loaded);
+  const loading = !error && !src.error && (needsSrc ? (bridged ? htmlDoc === null : !src.url) : !loaded);
   const slow = useSlow(loading);
-  const slowNote = slow ? <div className="cli-fv-slow">网络较慢或执行节点忙，仍在读取{shownSize ? `（${fmtSize(shownSize)}）` : ""}…</div> : null;
+  // 大文件显示读到哪了；很久没读完提示网络慢。
+  const progressText = progress > 0 ? `已读取 ${fmtSize(progress)}${shownSize ? ` / ${fmtSize(shownSize)}` : ""}` : "";
+  const slowNote = progressText || slow
+    ? <div className="cli-fv-slow">{slow ? `网络较慢或执行节点忙，仍在读取${progressText ? `（${progressText}）` : shownSize ? `（${fmtSize(shownSize)}）` : ""}…` : progressText}</div>
+    : null;
 
   return (
     <>
@@ -303,16 +381,25 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
             <button className="btn btn-accent btn-sm" style={{ marginLeft: 8 }} onClick={() => void download()} disabled={busy}>{Icon.download()} 下载</button>
           </div>
         ) : needsSrc ? (
-          !src.url ? <div className="cli-fv-note">加载中…{slowNote}</div>
+          bridged && htmlDoc === null ? <div className="cli-fv-note">加载中…{slowNote}</div>
+          // 可以选中引用：srcdoc + 选区桥。沙箱同样不给同源，页面自己的脚本被插入的 CSP 挡住，只有桥脚本能跑。
+          : bridged && htmlDoc ? <iframe ref={frameRef} className="cli-fv-frame" srcDoc={htmlDoc.srcDoc} title={name} sandbox="allow-scripts allow-popups allow-forms allow-modals" />
+          : !src.url ? <div className="cli-fv-note">加载中…{slowNote}</div>
             : kind === "image" ? <ImageView key={src.url} src={src.url} name={name} onRetry={retry} />
               : kind === "pdf" ? <iframe className="cli-fv-frame" src={src.url} title={name} />
                 : mode === "source" ? <SourceView backend={backend} jobId={jobId} path={path} version={version} />
                   // HTML：节点按沙箱 CSP 返回；这里再加 iframe 沙箱（不给同源），页面脚本碰不到宿主。
-                  : <iframe className="cli-fv-frame" src={src.url} title={name} sandbox="allow-scripts allow-popups allow-forms allow-modals" />
+                  : <>
+                        {onQuoteText && (htmlTooBig || htmlDoc === "toobig") && <div className="cli-fv-trunc">文件超过 {fmtSize(HTML_QUOTE_MAX)}，直接打开显示，不能选中文字引用（可以用「引用到对话」引用整个文件）。</div>}
+                        <iframe className="cli-fv-frame" src={src.url} title={name} sandbox="allow-scripts allow-popups allow-forms allow-modals" />
+                      </>
         ) : !loaded ? (
           <div className="cli-fv-note">加载中…{slowNote}</div>
         ) : loaded.kind === "docx" ? (
-          <iframe className="cli-fv-frame doc" title={name} sandbox="" srcDoc={docxPage(loaded.html)} />
+          // Word：转出来的 HTML 放进沙箱。能选中引用时插上选区桥（只放行桥脚本，文档里不会有别的脚本能跑）。
+          onQuoteText
+            ? <iframe ref={frameRef} className="cli-fv-frame doc" title={name} sandbox="allow-scripts" srcDoc={bridgeDoc(docxPage(loaded.html), { token })} />
+            : <iframe className="cli-fv-frame doc" title={name} sandbox="" srcDoc={docxPage(loaded.html)} />
         ) : text ? (
           <>
             {(text.truncated || tail) && (
@@ -322,11 +409,10 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
                 <button className="cli-fv-btn" onClick={() => setTail(!tail)}>{tail ? "看开头" : "看末尾"}</button>
               </div>
             )}
-            {mdTooBig && <div className="cli-fv-trunc">Markdown 较大，按纯文本显示。</div>}
-            {kind === "markdown" && mode === "preview" && !mdTooBig ? (
+            {kind === "markdown" && mode === "preview" ? (
               <FileLinkContext.Provider value={mdResolve}>
                 <FileOpenContext.Provider value={mdOpen}>
-                  <div className="cli-fv-md"><Markdown>{text.text}</Markdown></div>
+                  <div className="cli-fv-md"><MarkdownSections text={text.text} scrollRef={bodyRef} /></div>
                 </FileOpenContext.Provider>
               </FileLinkContext.Provider>
             ) : kind === "csv" && mode === "preview" ? (
@@ -334,7 +420,8 @@ export function FileViewer({ backend, jobId, path, size, mtime, version = 0, onO
             ) : kind === "code" && text.text.length <= HIGHLIGHT_MAX ? (
               <div className="cli-fv-code"><Markdown>{fenced(text.text, codeLang(path))}</Markdown></div>
             ) : (
-              <pre className="cli-fv-pre">{text.text}</pre>
+              // 追加的内容各是一个文字节点：文件往后长的时候前面的不用重新排版。
+              <pre className="cli-fv-pre">{text.parts.map((p, i) => <Fragment key={i}>{p}</Fragment>)}</pre>
             )}
           </>
         ) : null}
@@ -398,17 +485,58 @@ function ImageView({ src, name, onRetry }: { src: string; name: string; onRetry?
 }
 
 function SourceView({ backend, jobId, path, version }: { backend: BoardBackend; jobId: string; path: string; version: number }) {
-  const [text, setText] = useState<string | null>(null);
+  const [state, setState] = useState<{ text: string; size?: number; truncated?: boolean } | null>(null);
   useEffect(() => {
     let alive = true;
-    backend.readText(jobId, path, TEXT_MAX).then((r) => { if (alive) setText(r.text); }, (e: unknown) => { if (alive) setText(`读取失败：${e instanceof Error ? e.message : String(e)}`); });
+    backend.readText(jobId, path, TEXT_MAX).then((r) => { if (alive) setState({ text: r.text, size: r.size, truncated: r.truncated }); }, (e: unknown) => { if (alive) setState({ text: `读取失败：${e instanceof Error ? e.message : String(e)}` }); });
     return () => { alive = false; };
   }, [backend, jobId, path, version]);
-  return text === null ? <div className="cli-fv-note">加载中…</div> : <pre className="cli-fv-pre">{text}</pre>;
+  if (!state) return <div className="cli-fv-note">加载中…</div>;
+  return (
+    <>
+      {state.truncated && <div className="cli-fv-trunc">文件较大（{fmtSize(state.size ?? 0)}），源文件只显示前 {fmtSize(TEXT_MAX)}；完整内容请下载。</div>}
+      <pre className="cli-fv-pre">{state.text}</pre>
+    </>
+  );
 }
 
+/** 一段 Markdown：内容没变就不重新渲染（文件追加时只有最后一段在变）。 */
+const MarkdownSection = memo(function MarkdownSection({ text }: { text: string }) {
+  return <Markdown>{text}</Markdown>;
+});
+
+/**
+ * 大 Markdown 分段渲染：先渲染前几段，滚到快看完的地方再接着渲染后面的（每段约 MARKDOWN_SECTION 字）。
+ * 小文件就是一段，和整篇渲染一样。没有 IntersectionObserver 的环境（老浏览器、服务端）一次全部渲染。
+ */
+function MarkdownSections({ text, scrollRef }: { text: string; scrollRef: RefObject<HTMLDivElement | null> }) {
+  const sections = useMemo(() => splitMarkdown(text, MARKDOWN_SECTION), [text]);
+  const lazy = typeof IntersectionObserver !== "undefined";
+  const [shown, setShown] = useState(2);
+  const sentinel = useRef<HTMLDivElement | null>(null);
+  const more = shown < sections.length && lazy;
+  useEffect(() => {
+    const el = sentinel.current;
+    if (!more || !el) return;
+    const io = new IntersectionObserver((entries) => { if (entries.some((e) => e.isIntersecting)) setShown((n) => n + 2); }, { root: scrollRef.current, rootMargin: "0px 0px 2000px 0px" });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [more, shown, scrollRef]);
+  const visible = lazy ? sections.slice(0, shown) : sections;
+  return (
+    <>
+      {visible.map((s, i) => <MarkdownSection key={i} text={s} />)}
+      {more && <div ref={sentinel} className="cli-fv-slow">还有 {sections.length - shown} 段，继续往下滚动显示…</div>}
+    </>
+  );
+}
+
+/** 表格先显示这么多行，「再显示」每次多这么多（几十万行一次画出来页面会卡住）。 */
+const CSV_PAGE = 2_000;
+
 function CsvTable({ text }: { text: string }) {
-  const { rows, more } = useMemo(() => parseCsv(text), [text]);
+  const [limit, setLimit] = useState(CSV_PAGE);
+  const { rows, more } = useMemo(() => parseCsv(text, limit + 1), [text, limit]);
   if (!rows.length) return <div className="cli-fv-note">空文件。</div>;
   const [head, ...body] = rows;
   return (
@@ -417,7 +545,12 @@ function CsvTable({ text }: { text: string }) {
         <thead><tr>{head.map((c, i) => <th key={i}>{c}</th>)}</tr></thead>
         <tbody>{body.map((r, i) => <tr key={i}>{r.map((c, j) => <td key={j}>{c}</td>)}</tr>)}</tbody>
       </table>
-      {more && <div className="cli-fv-trunc">只显示前 500 行；完整内容请下载。</div>}
+      {more && (
+        <div className="cli-fv-trunc">已显示前 {body.length.toLocaleString()} 行。
+          <button className="cli-fv-btn" onClick={() => setLimit((n) => n + CSV_PAGE * 5)}>再显示 {(CSV_PAGE * 5).toLocaleString()} 行</button>
+          （也可以切到「源文件」看全部文字）
+        </div>
+      )}
     </div>
   );
 }

package/src/board/fileKind.ts

@@ -79,3 +79,34 @@ export function parseCsv(text: string, maxRows = 500): { rows: string[][]; more:
   if (cell || row.length) { row.push(cell); rows.push(row); }
   return { rows: rows.slice(0, maxRows), more: rows.length > maxRows };
 }
+
+/**
+ * 大 Markdown 分段（每段约 size 字）：在代码块外的空行处切，各段单独渲染（整篇几 MB 一次渲染会卡住页面几十秒）。
+ * 一直没有空行的超长内容到 4 倍大小也切（在代码块里切时补上收尾、下一段重新开头）。
+ */
+export function splitMarkdown(text: string, size: number): string[] {
+  if (text.length <= size) return [text];
+  const out: string[] = [];
+  const lines = text.split("\n");
+  let cur: string[] = [];
+  let len = 0;
+  let fence: string | null = null;
+  for (const line of lines) {
+    const m = /^ {0,3}(`{3,}|~{3,})/.exec(line);
+    if (m) {
+      if (!fence) fence = line.trim();
+      else if (line.trim().startsWith(fence.slice(0, 3)) && line.trim().replace(/[`~]/g, "") === "") fence = null;
+    }
+    cur.push(line);
+    len += line.length + 1;
+    const atBreak = !fence && line.trim() === "" && len >= size;
+    if (atBreak || len >= size * 4) {
+      if (fence) cur.push(fence.replace(/[^`~].*$/, ""));
+      out.push(cur.join("\n"));
+      cur = fence ? [fence] : [];
+      len = 0;
+    }
+  }
+  if (cur.length && cur.some((l) => l !== "")) out.push(cur.join("\n"));
+  return out;
+}

package/src/board/frameQuote.ts

@@ -0,0 +1,50 @@
+// HTML / Word 预览里「选中文字 → 引用到对话」。
+//
+// 这两种预览放在沙箱 iframe 里（不给同源，页面碰不到宿主），宿主反过来也读不到 iframe 里的选区。
+// 所以预览改成 srcdoc：在文档最前面插一段小脚本，选区变了用 postMessage 报给宿主（带口令，宿主只认自己这个 iframe）。
+//   · 页面自己的脚本照旧不让跑（和执行节点返回 HTML 时的 CSP 一致）：插入的 CSP 只放行带 nonce 的这一段；
+//   · 相对路径的样式 / 图片按文件原地址解析（<base>），文档里的 #锚点 在页内滚动（不然会按 <base> 整页跳走）。
+
+/** iframe → 宿主：选区（text 为空 = 取消了选择）或滚动了（收起按钮）。 */
+export interface FrameSelMessage { cliUiSel: string; text?: string; rect?: { left: number; top: number; width: number } | null; scroll?: boolean }
+
+const randomId = () => Math.random().toString(36).slice(2, 12) + Math.random().toString(36).slice(2, 12);
+
+/** 每个预览一个口令 / nonce。 */
+export const frameToken = randomId;
+
+function bridgeScript(token: string) {
+  const t = JSON.stringify(token);
+  return `(function(){var t=${t};function post(m){m.cliUiSel=t;try{parent.postMessage(m,"*")}catch(e){}}
+function send(){var s=getSelection(),text=s&&!s.isCollapsed?String(s).trim():"",rect=null;
+if(text&&s.rangeCount){var b=s.getRangeAt(0).getBoundingClientRect();rect={left:b.left,top:b.top,width:b.width}}post({text:text,rect:rect})}
+function later(){setTimeout(send,0)}
+document.addEventListener("mouseup",later);document.addEventListener("keyup",later);
+document.addEventListener("selectionchange",function(){var s=getSelection();if(!s||s.isCollapsed)post({text:""})});
+addEventListener("scroll",function(){post({scroll:true})},true);
+addEventListener("message",function(e){if(e.source===parent&&e.data&&e.data.cliUiClear===t){var s=getSelection();s&&s.removeAllRanges()}});
+document.addEventListener("click",function(e){var a=e.target&&e.target.closest&&e.target.closest('a[href^="#"]');if(!a)return;e.preventDefault();
+var id=decodeURIComponent(a.getAttribute("href").slice(1)),el=id?document.getElementById(id)||document.getElementsByName(id)[0]:document.body;el&&el.scrollIntoView()});})();`;
+}
+
+const escAttr = (s: string) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+
+/**
+ * 给 HTML 文档插上选区桥：CSP（页面脚本不跑、只能从文件所在地址取资源）、<base>、桥脚本。
+ * base = 文件的绝对地址（相对资源按它解析）；不给（Word 转出来的，图片都内嵌）时只允许 data: 资源。
+ */
+export function bridgeDoc(html: string, opts: { token: string; base?: string }) {
+  let origin = "";
+  if (opts.base) { try { origin = new URL(opts.base).origin; } catch { origin = ""; } }
+  const src = origin ? `${origin} ` : "";
+  const csp = `default-src 'none'; script-src 'nonce-${opts.token}'; img-src ${src}data: blob:; style-src ${src}'unsafe-inline'; font-src ${src}data:; media-src ${src}data: blob:`;
+  const head = `<meta http-equiv="Content-Security-Policy" content="${escAttr(csp)}">`
+    + (opts.base ? `<base href="${escAttr(opts.base)}">` : "")
+    + `<script nonce="${opts.token}">${bridgeScript(opts.token)}</script>`;
+  // 插在 <head> 里最前面；没有 <head> 就插在 doctype 后面（解析器会自动补出 head），不放到 doctype 前面免得变成怪异模式。
+  const headTag = /<head(\s[^>]*)?>/i.exec(html);
+  if (headTag) { const at = headTag.index + headTag[0].length; return html.slice(0, at) + head + html.slice(at); }
+  const doctype = /^\s*<!doctype[^>]*>/i.exec(html);
+  if (doctype) return doctype[0] + head + html.slice(doctype[0].length);
+  return head + html;
+}

package/src/board/textLoad.ts

@@ -0,0 +1,99 @@
+// 预览里文本文件（代码、日志、Markdown、CSV）的读取。
+//
+// 能读多大：一次最多 max 字节（预览里是 32 MB），更大的只看开头或末尾。
+// 文件在变（任务在写日志、在改报告）时不整个重读：后端有 readBytes 时，从上次读到的地方往前多取一小段（OVERLAP），
+// 这一小段和手里的末尾一模一样就说明文件只是往后追加了，只取新增的部分接上；对不上（文件被改写、变短了）才整个重读。
+// 只对 UTF-8 文件这样做（GBK 的字节边界不好对齐，整个重读）。
+
+import type { BoardBackend } from "../core/client.js";
+import { decodeText } from "../core/textDecode.js";
+
+/** 往前多取这么多字节，用来确认文件只是追加。 */
+export const OVERLAP = 256;
+/** 追加的段落多了合成一段（每段是 <pre> 里的一个文字节点）。 */
+const MAX_PARTS = 200;
+
+export interface LoadedText {
+  text: string;
+  /** 分段的文字（追加的每次一段）：<pre> 里按段渲染，追加时前面的不用重排。 */
+  parts: string[];
+  /** 文件比读到的大（只读了开头或末尾）。 */
+  truncated: boolean;
+  /** 文件总大小。 */
+  size: number;
+  /** 读的是末尾。 */
+  tail: boolean;
+  encoding?: string;
+  /** 读到的内容在文件里的字节范围 [start, end)。 */
+  start: number;
+  end: number;
+  /** end 之前的最后 OVERLAP 个字节（只有 UTF-8、后端有 readBytes 时有），用来确认文件只是追加。 */
+  tailBytes: Uint8Array | null;
+}
+
+/** 末尾有几个字节是没写完的 UTF-8 字（0 = 完整）。 */
+export function incompleteUtf8Tail(bytes: Uint8Array) {
+  const len = bytes.length;
+  for (let i = len - 1; i >= 0 && i >= len - 4; i--) {
+    const b = bytes[i];
+    if ((b & 0xc0) === 0x80) continue;
+    const need = b >= 0xf0 ? 4 : b >= 0xe0 ? 3 : b >= 0xc0 ? 2 : 1;
+    const have = len - i;
+    return have < need ? have : 0;
+  }
+  return 0;
+}
+
+const sameBytes = (a: Uint8Array, b: Uint8Array) => a.length === b.length && a.every((x, i) => x === b[i]);
+
+/** 第一次读：开头（或末尾）最多 max 字节。 */
+export async function loadText(backend: BoardBackend, jobId: string, path: string, opts: { max: number; tail?: boolean; onBytes?: (bytes: number) => void }): Promise<LoadedText> {
+  if (!backend.readBytes) {
+    const r = await backend.readText(jobId, path, opts.max, { tail: opts.tail, onBytes: opts.onBytes });
+    return { text: r.text, parts: [r.text], truncated: r.truncated, size: r.size, tail: !!r.tail, encoding: r.encoding, start: 0, end: 0, tailBytes: null };
+  }
+  const chunk = await backend.readBytes(jobId, path, { maxBytes: opts.max, tail: opts.tail, onBytes: opts.onBytes });
+  const { text, encoding } = decodeText(chunk.bytes, { fromMiddle: chunk.start > 0 });
+  const k = encoding === "utf-8" ? incompleteUtf8Tail(chunk.bytes) : 0;
+  const end = chunk.start + chunk.bytes.length - k;
+  const tailBytes = encoding === "utf-8" ? chunk.bytes.slice(Math.max(0, chunk.bytes.length - k - OVERLAP), chunk.bytes.length - k) : null;
+  return {
+    text, parts: [text], truncated: chunk.start + chunk.bytes.length < chunk.size || chunk.start > 0, size: chunk.size,
+    tail: chunk.start > 0, encoding, start: chunk.start, end, tailBytes,
+  };
+}
+
+/**
+ * 文件变了：能接上就只取新增的部分，返回新的内容；返回 null = 接不上（被改写 / 变短 / 不是 UTF-8 / 后端不支持），调用方整个重读。
+ * 只看开头且文件比 max 大时，开头没变就不用重读（追加的在后面，本来就不显示）。
+ */
+export async function refreshText(backend: BoardBackend, jobId: string, path: string, prev: LoadedText, max: number): Promise<LoadedText | null> {
+  if (!backend.readBytes || !prev.tailBytes) return null;
+  const overlap = prev.tailBytes.length;
+  const from = prev.end - overlap;
+  const headOnly = !prev.tail && prev.truncated;
+  // 末尾模式攒多了（超过 1.5 倍）：整个重读末尾，免得越攒越大。
+  if (prev.tail && prev.end - prev.start > max * 1.5) return null;
+  const room = headOnly ? 0 : prev.tail ? max : Math.max(0, max - (prev.end - prev.start));
+  const chunk = await backend.readBytes(jobId, path, { start: from, maxBytes: overlap + room });
+  if (chunk.size < prev.end || chunk.start !== from || chunk.bytes.length < overlap) return null;
+  if (!sameBytes(chunk.bytes.subarray(0, overlap), prev.tailBytes)) return null;
+  const readEnd = from + chunk.bytes.length;
+  if (headOnly) return { ...prev, size: chunk.size };
+  const added = chunk.bytes.subarray(overlap);
+  const k = incompleteUtf8Tail(added);
+  const delta = added.subarray(0, added.length - k);
+  let addedText: string;
+  try { addedText = new TextDecoder("utf-8", { fatal: true }).decode(delta); } catch { return null; }
+  const end = prev.end + delta.length;
+  const tailBytes = new Uint8Array(Math.min(OVERLAP, overlap + delta.length));
+  const joined = new Uint8Array(overlap + delta.length);
+  joined.set(prev.tailBytes, 0);
+  joined.set(delta, overlap);
+  tailBytes.set(joined.subarray(joined.length - tailBytes.length));
+  const parts = addedText ? (prev.parts.length >= MAX_PARTS ? [prev.text, addedText] : [...prev.parts, addedText]) : prev.parts;
+  return {
+    ...prev, text: addedText ? prev.text + addedText : prev.text, parts, size: chunk.size, end, tailBytes,
+    truncated: prev.tail || chunk.size > readEnd,
+  };
+}