@spzxg/cli-ui 0.4.0 → 0.6.1

package/src/board/FilesPane.tsx

@@ -5,8 +5,9 @@ import { CenterError, type BoardBackend } from "../core/client.js";
 import type { FileEntry } from "../core/types.js";
 import { Icon } from "../ui/icons.js";
 import { relTime } from "../ui/format.js";
-import { downloadFile } from "./FileViewer.js";
+import { downloadFile } from "./fileOps.js";
 import { fmtSize } from "./fileKind.js";
+import { downloadFolder, FAILED_LIST_NAME, type FolderProgress } from "./folderDownload.js";
 
 export interface FilesPaneProps {
   backend: BoardBackend;
@@ -22,6 +23,7 @@ export interface FilesPaneProps {
 export function FilesPane({ backend, jobId, dir, onDir, onOpen, refreshKey, onListed }: FilesPaneProps) {
   const [entries, setEntries] = useState<FileEntry[] | null>(null);
   const [truncated, setTruncated] = useState(false);
+  const [total, setTotal] = useState<number | undefined>(undefined);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
   // 这个目录上一次看到的 mtime：用来标「新」。第一次打开目录不标。
@@ -31,6 +33,27 @@ export function FilesPane({ backend, jobId, dir, onDir, onOpen, refreshKey, onLi
   onListedRef.current = onListed;
   const onDirRef = useRef(onDir);
   onDirRef.current = onDir;
+  // 打包下载文件夹：同一时间只打一个，可以取消。
+  const [zip, setZip] = useState<{ dir: string; progress: FolderProgress; abort: AbortController } | null>(null);
+  // 下载的结果 / 失败（和「同步失败」分开：下载出错不代表列表过期）。
+  const [notice, setNotice] = useState<{ text: string; err: boolean } | null>(null);
+  const zipDir = (target: string) => {
+    if (zip) return;
+    const abort = new AbortController();
+    setNotice(null);
+    setZip({ dir: target, progress: { phase: "listing", files: 0, total: 0, bytes: 0 }, abort });
+    downloadFolder(backend, jobId, target, { signal: abort.signal, onProgress: (progress) => setZip((z) => (z && z.abort === abort ? { ...z, progress } : z)) })
+      .then(({ files, failed }) => {
+        if (failed.length) setNotice({ err: true, text: `已打包 ${files} 个文件；${failed.length} 个没读到（${failed[0].reason}${failed.length > 1 ? " 等" : ""}），清单在压缩包里的 ${FAILED_LIST_NAME}` });
+      })
+      .catch((err: unknown) => { if (!(err instanceof DOMException && err.name === "AbortError")) setNotice({ err: true, text: `打包下载失败：${err instanceof Error ? err.message : String(err)}` }); })
+      .finally(() => setZip((z) => (z && z.abort === abort ? null : z)));
+  };
+  const downloadOne = (path: string, size: number) => {
+    setNotice(null);
+    void downloadFile(backend, jobId, path, size).catch((err: unknown) => setNotice({ err: true, text: `下载失败：${err instanceof Error ? err.message : String(err)}` }));
+  };
+  useEffect(() => () => zip?.abort.abort(), [jobId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     let alive = true;
@@ -49,6 +72,7 @@ export function FilesPane({ backend, jobId, dir, onDir, onOpen, refreshKey, onLi
       seen.current.mtimes = new Map(res.entries.map((e) => [e.path, e.mtime]));
       setEntries(res.entries);
       setTruncated(res.truncated);
+      setTotal(res.total);
       onListedRef.current?.(dir, res.entries);
     }, (e: unknown) => {
       if (!alive) return;
@@ -73,7 +97,28 @@ export function FilesPane({ backend, jobId, dir, onDir, onOpen, refreshKey, onLi
         ))}
         <span className="cli-fv-sp" />
         {loading && entries && <span className="cli-files-sync" title="正在同步">同步中…</span>}
+        {entries && entries.length > 0 && !zip && (
+          <button className="cli-fv-icon" title={`把「${dir || "工作区"}」打包成 ZIP 下载`} onClick={() => zipDir(dir)}>{Icon.download()}</button>
+        )}
       </div>
+      {zip && (
+        <div className="cli-fv-trunc cli-zip-bar">
+          {zip.progress.phase === "listing" ? `正在列出「${zip.dir || "工作区"}」里的文件…`
+            : zip.progress.phase === "reading" ? `正在读取 ${zip.progress.files} / ${zip.progress.total} 个文件（${fmtSize(zip.progress.bytes)}${zip.progress.totalBytes ? ` / ${fmtSize(zip.progress.totalBytes)}` : ""}）`
+              + (zip.progress.retrying ? ` · 网络不稳，正在重试 ${zip.progress.retrying.split("/").pop()}` : "")
+              + (zip.progress.failed ? ` · ${zip.progress.failed} 个没读到` : "") + "…"
+              : "正在打包…"}
+          {zip.progress.phase === "reading" && zip.progress.totalBytes ? (
+            <span className="cli-zip-meter"><span style={{ width: `${Math.min(100, (zip.progress.bytes / Math.max(1, zip.progress.totalBytes)) * 100)}%` }} /></span>
+          ) : null}
+          <button className="cli-fv-btn" onClick={() => zip.abort.abort()}>取消</button>
+        </div>
+      )}
+      {notice && (
+        <div className={`cli-fv-trunc ${notice.err ? "cli-files-err" : ""}`}>{notice.text}
+          <button className="cli-fv-btn" onClick={() => setNotice(null)}>知道了</button>
+        </div>
+      )}
       {error && entries && <div className="cli-fv-trunc">同步失败：{error}（下面是上次读到的列表，有进展时会自动再试，也可以点右上角 ↻）</div>}
       {error && !entries ? (
         <div className="cli-fv-note err">{error}<br /><span style={{ color: "var(--ink-3)" }}>有进展时会自动再试，也可以点右上角 ↻ 重试。</span></div>
@@ -96,12 +141,14 @@ export function FilesPane({ backend, jobId, dir, onDir, onOpen, refreshKey, onLi
                 {fresh.has(e.path) && <span className="cli-frow-new">有更新</span>}
                 <span className="cli-frow-meta">{e.type === "file" ? `${fmtSize(e.size)} · ` : ""}{relTime(e.mtime)}</span>
               </button>
-              {e.type === "file" && (
-                <button className="cli-frow-dl" title="下载" onClick={() => void downloadFile(backend, jobId, e.path).catch((err: unknown) => setError(err instanceof Error ? err.message : String(err)))}>{Icon.download()}</button>
+              {e.type === "file" ? (
+                <button className="cli-frow-dl" title="下载" onClick={() => downloadOne(e.path, e.size)}>{Icon.download()}</button>
+              ) : (
+                <button className="cli-frow-dl" title="打包成 ZIP 下载" disabled={!!zip} onClick={() => zipDir(e.path)}>{Icon.download()}</button>
               )}
             </div>
           ))}
-          {truncated && <div className="cli-fv-trunc">文件太多，只列出前 2000 个。</div>}
+          {truncated && <div className="cli-fv-trunc">文件太多{total ? `（共 ${total.toLocaleString()} 个）` : ""}，只列出前 {entries.length.toLocaleString()} 个。</div>}
         </div>
       )}
     </div>

package/src/board/blocks.tsx

@@ -7,6 +7,7 @@
 // （baseUrl / token / line / headers）建一个。不给 jobId 时跟 Provider 的选中走。
 // 它们只依赖中枢的看板接口（/api/jobs/:id/files、/browser…），不依赖 cli-chat / cli-board。
 import { useState, type CSSProperties } from "react";
+import { CliErrorBoundary } from "../ui/ErrorBoundary.js";
 import type { CliEvent, CliStore, CliStoreOptions } from "../core/store.js";
 import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider } from "../core/provider.js";
 import { FileViewer, type FileAction } from "./FileViewer.js";
@@ -39,7 +40,7 @@ export interface CliFilePreviewProps extends BlockProps {
 
 export function CliFilePreview(props: CliFilePreviewProps) {
   const ctx = useCliStoreContext();
-  return withOwnProvider(props, <FilePreviewInner {...props} inProvider={!!ctx} />, !!ctx);
+  return <CliErrorBoundary component="cli-file-preview" theme={props.theme}>{withOwnProvider(props, <FilePreviewInner {...props} inProvider={!!ctx} />, !!ctx)}</CliErrorBoundary>;
 }
 
 function FilePreviewInner({ jobId: jobIdProp, path, onOpenPath, onClose, actions, version, bare, theme = "light", className, style, onEvent, inProvider }: CliFilePreviewProps & { inProvider: boolean }) {
@@ -67,7 +68,7 @@ export interface CliBrowserViewProps extends BlockProps {
 
 export function CliBrowserView(props: CliBrowserViewProps) {
   const ctx = useCliStoreContext();
-  return withOwnProvider(props, <BrowserViewInner {...props} inProvider={!!ctx} />, !!ctx);
+  return <CliErrorBoundary component="cli-browser" theme={props.theme}>{withOwnProvider(props, <BrowserViewInner {...props} inProvider={!!ctx} />, !!ctx)}</CliErrorBoundary>;
 }
 
 function BrowserViewInner({ jobId: jobIdProp, readOnly, theme = "light", className, style, onEvent, inProvider }: CliBrowserViewProps & { inProvider: boolean }) {

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/fileOps.ts

@@ -0,0 +1,55 @@
+// 工作区文件的基础操作（不依赖界面）：可直接打开的地址、下载到本地、读成 Blob。
+// 看板、文件预览和给业务方的工作区接口（workspace.ts）共用。
+import { fileUrlFromBase, type BoardBackend } from "../core/client.js";
+import { extOf, fmtSize } from "./fileKind.js";
+
+/** 只能先 fetch 成 blob 时（中枢太旧）：超过这么大的不在浏览器里拼下载。 */
+const BLOB_DOWNLOAD_MAX = 300 * 1024 * 1024;
+
+export const MIME: Record<string, string> = {
+  png: "image/png", jpg: "image/jpeg", jpeg: "image/jpeg", gif: "image/gif", webp: "image/webp", svg: "image/svg+xml",
+  bmp: "image/bmp", ico: "image/x-icon", avif: "image/avif", pdf: "application/pdf", html: "text/html", htm: "text/html",
+  md: "text/markdown", txt: "text/plain", csv: "text/csv", json: "application/json", zip: "application/zip",
+  docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  pptx: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+};
+export const mimeOf = (path: string) => MIME[extOf(path)] ?? "application/octet-stream";
+
+/**
+ * 浏览器能直接打开的地址（不需要请求头）：同源代理时就是文件接口；没有代理注入令牌时用中枢发的短期链接。
+ * 中枢太旧发不了短期链接时返回 null（调用方改用读成 Blob）。
+ */
+export async function directFileUrl(backend: BoardBackend, jobId: string, path: string, download = false): Promise<string | null> {
+  if (backend.directLinks) return backend.fileUrl(jobId, path, { download });
+  const linkBase = backend.fileLinkBase ? await backend.fileLinkBase(jobId) : null;
+  return linkBase ? fileUrlFromBase(linkBase, path, download) : null;
+}
+
+/** 把 Blob 存到本地（浏览器下载）。 */
+export function saveBlob(blob: Blob, name: string) {
+  const url = URL.createObjectURL(blob);
+  clickDownload(url, name);
+  setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
+function clickDownload(href: string, name: string) {
+  const a = document.createElement("a");
+  a.href = href;
+  a.download = name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+
+/**
+ * 下载：用浏览器能直接打开的地址（流式、可断点续传，不占内存）；同源代理以外的接入向中枢换短期链接。
+ * 只有中枢太旧时才 fetch 成 blob 再存（太大的拒绝，免得撑爆浏览器内存）。
+ */
+export async function downloadFile(backend: BoardBackend, jobId: string, path: string, size?: number) {
+  const name = path.split("/").pop() || "file";
+  const url = await directFileUrl(backend, jobId, path, true);
+  if (url) { clickDownload(url, name); return; }
+  if (size !== undefined && size > BLOB_DOWNLOAD_MAX) throw new Error(`文件较大（${fmtSize(size)}），当前接入方式不能在浏览器里下载，请升级任务中心`);
+  saveBlob(new Blob([await backend.readBuffer(jobId, path)]), name);
+}

package/src/board/folderDownload.ts

@@ -0,0 +1,161 @@
+// 工作区「下载整个文件夹」：逐级列目录、逐个读文件（经中枢），在浏览器里打成 ZIP 下载。
+// 有上限：文件数、总大小（读进内存再打包）；超了直接报出来，让用户进到更小的目录或单个下载，不会把页面撑爆。
+// 弱网 / 节点忙：每个请求失败了按退避重试几次；某个文件一直读不到（或读的时候被任务删了）就跳过，
+// 照样把其余的打包，失败的清单放进压缩包里的 FAILED_LIST_NAME，并告诉调用方。取消会中止正在传的请求。
+import { CenterError, type BoardBackend } from "../core/client.js";
+import { fmtSize } from "./fileKind.js";
+import { saveBlob } from "./fileOps.js";
+import { buildZip, type ZipEntry } from "./zip.js";
+
+export const FOLDER_MAX_FILES = 2000;
+export const FOLDER_MAX_BYTES = 300 * 1024 * 1024;
+/** 同时读几个文件：中枢 / 节点不被一个人的下载占满，浏览器连接也留给别的请求。 */
+const PARALLEL = 3;
+/** 每个请求最多试几次，两次之间等多久（毫秒；带 ±30% 浮动）。 */
+const ATTEMPTS = 3;
+const BACKOFF_MS = [1_000, 3_000];
+export const FAILED_LIST_NAME = "_下载失败的文件.txt";
+
+export type FolderProgress = { phase: "listing" | "reading" | "zipping"; files: number; total: number; bytes: number; totalBytes?: number; failed?: number; retrying?: string };
+export type FolderResult = { files: number; failed: Array<{ path: string; reason: string }> };
+export type FolderZip = FolderResult & { blob: Blob; name: string };
+export type ListOptions = { signal?: AbortSignal; backoff?: number[]; maxFiles?: number; maxBytes?: number };
+
+const abortError = () => new DOMException("已取消", "AbortError");
+const isAbort = (e: unknown) => e instanceof DOMException && e.name === "AbortError";
+
+/** 值得再试的失败：网络（超时、断线）、限流、中枢 / 节点临时出错。404、403 之类再试也一样。 */
+export function isTransient(error: unknown): boolean {
+  if (!(error instanceof CenterError)) return !isAbort(error);
+  return error.code === "NETWORK" || error.status === 429 || error.status === 408 || error.status >= 500 || error.code === "node_unreachable";
+}
+
+function sleep(ms: number, signal?: AbortSignal) {
+  return new Promise<void>((resolve, reject) => {
+    if (signal?.aborted) return reject(abortError());
+    const t = setTimeout(() => { signal?.removeEventListener("abort", stop); resolve(); }, ms);
+    const stop = () => { clearTimeout(t); reject(abortError()); };
+    signal?.addEventListener("abort", stop, { once: true });
+  });
+}
+
+/** 失败了按退避再试（只试临时性的失败）。onRetry 告诉界面「正在重试」。 */
+export async function withRetry<T>(fn: () => Promise<T>, signal?: AbortSignal, onRetry?: (attempt: number, error: unknown) => void, backoff = BACKOFF_MS): Promise<T> {
+  for (let attempt = 1; ; attempt++) {
+    if (signal?.aborted) throw abortError();
+    try {
+      return await fn();
+    } catch (error) {
+      if (isAbort(error) || signal?.aborted) throw abortError();
+      if (attempt >= ATTEMPTS || !isTransient(error)) throw error;
+      onRetry?.(attempt, error);
+      const base = backoff[Math.min(attempt - 1, backoff.length - 1)] ?? 0;
+      await sleep(Math.round(base * (0.7 + Math.random() * 0.6)), signal);
+    }
+  }
+}
+
+/** 列出 dir 下所有文件（递归）。超过上限（缺省 FOLDER_MAX_FILES 个、FOLDER_MAX_BYTES）抛错。 */
+export async function listFolder(backend: BoardBackend, jobId: string, dir: string, opts: ListOptions = {}): Promise<Array<{ path: string; size: number; mtime: number }>> {
+  const { signal, backoff, maxFiles = FOLDER_MAX_FILES, maxBytes = FOLDER_MAX_BYTES } = opts;
+  const out: Array<{ path: string; size: number; mtime: number }> = [];
+  let bytes = 0;
+  const queue = [dir || "."];
+  while (queue.length) {
+    if (signal?.aborted) throw abortError();
+    const cur = queue.shift()!;
+    let res;
+    try {
+      res = await withRetry(() => backend.stat(jobId, cur), signal, undefined, backoff);
+    } catch (error) {
+      // 子目录在列的时候被任务删了：跳过它；要下载的目录本身没了照常报错。
+      if (cur !== (dir || ".") && error instanceof CenterError && error.status === 404) continue;
+      throw error;
+    }
+    if (res.type !== "dir") continue;
+    if (res.truncated) throw new Error(`「${cur === "." ? "工作区" : cur}」里文件太多，节点只列出了一部分；请进到更小的目录再下载`);
+    for (const e of res.entries) {
+      if (e.type === "dir") { queue.push(e.path); continue; }
+      out.push({ path: e.path, size: e.size, mtime: e.mtime });
+      bytes += e.size;
+      if (out.length > maxFiles) throw new Error(`文件超过 ${maxFiles} 个，请进到更小的目录再下载`);
+      if (bytes > maxBytes) throw new Error(`总大小超过 ${fmtSize(maxBytes)}，请进到更小的目录或单个下载`);
+    }
+  }
+  return out;
+}
+
+export type FolderOptions = { onProgress?: (p: FolderProgress) => void; signal?: AbortSignal; zipName?: string; backoff?: number[] };
+
+/** 打包下载 dir（"" = 整个工作区）到本地。返回打了几个文件、哪些没读到。 */
+export async function downloadFolder(backend: BoardBackend, jobId: string, dir: string, opts: FolderOptions = {}): Promise<FolderResult> {
+  const { blob, name, files, failed } = await zipFolder(backend, jobId, dir, opts);
+  saveBlob(blob, name);
+  return { files, failed };
+}
+
+/** 把 dir（"" = 整个工作区）打成 ZIP，返回 Blob（不下载；业务方可以自己上传到服务器）。 */
+export async function zipFolder(backend: BoardBackend, jobId: string, dir: string, opts: FolderOptions = {}): Promise<FolderZip> {
+  const { onProgress, signal } = opts;
+  onProgress?.({ phase: "listing", files: 0, total: 0, bytes: 0 });
+  const files = await listFolder(backend, jobId, dir, { signal, backoff: opts.backoff });
+  if (!files.length) throw new Error("这个目录里没有文件");
+  const totalBytes = files.reduce((n, f) => n + f.size, 0);
+  const base = dir ? `${dir.replace(/\/+$/, "")}/` : "";
+  const entries: Array<ZipEntry | null> = new Array(files.length).fill(null);
+  const failed: FolderResult["failed"] = [];
+  // 每个文件已收到的字节（含正在传的），进度条按它走：一个大文件慢慢传时也看得到在动。
+  const got = new Array<number>(files.length).fill(0);
+  let done = 0;
+  let next = 0;
+  let retrying: string | undefined;
+  let lastReport = 0;
+  const report = (force = false) => {
+    const now = Date.now();
+    if (!force && now - lastReport < 200) return;
+    lastReport = now;
+    onProgress?.({ phase: "reading", files: done, total: files.length, bytes: got.reduce((a, b) => a + b, 0), totalBytes, failed: failed.length, retrying });
+  };
+  const worker = async () => {
+    while (next < files.length) {
+      const i = next++;
+      if (signal?.aborted) throw abortError();
+      const f = files[i];
+      try {
+        const buffer = await withRetry(
+          () => { got[i] = 0; return backend.readBuffer(jobId, f.path, { signal, onBytes: (n) => { got[i] = n; report(); } }); },
+          signal,
+          () => { retrying = f.path; report(true); },
+          opts.backoff,
+        );
+        const data = new Uint8Array(buffer);
+        got[i] = data.length;
+        // 任务在写、文件比列的时候大了很多：总量还是要守住上限。
+        if (got.reduce((a, b) => a + b, 0) > FOLDER_MAX_BYTES * 1.1) throw new Error(`读到的总大小超过 ${fmtSize(FOLDER_MAX_BYTES)}（文件还在变大），请进到更小的目录或单个下载`);
+        // ZIP 里的路径相对下载的目录（文件夹名本身作为 ZIP 文件名）。
+        entries[i] = { path: f.path.startsWith(base) ? f.path.slice(base.length) : f.path, data, mtime: f.mtime };
+      } catch (error) {
+        if (isAbort(error) || signal?.aborted) throw abortError();
+        if (!(error instanceof CenterError)) throw error;
+        got[i] = 0;
+        failed.push({ path: f.path, reason: error.message });
+      }
+      if (retrying === f.path) retrying = undefined;
+      done++;
+      report(true);
+    }
+  };
+  // 列完马上报「读取 0 / N」：网络慢时第一个文件要好一会儿才有字节，不能一直停在「正在列出」。
+  report(true);
+  await Promise.all(Array.from({ length: Math.min(PARALLEL, files.length) }, worker));
+  const ok = entries.filter((e): e is ZipEntry => !!e);
+  if (!ok.length) throw new Error(`${failed.length} 个文件都没读到：${failed[0]?.reason ?? "未知原因"}`);
+  onProgress?.({ phase: "zipping", files: done, total: files.length, bytes: got.reduce((a, b) => a + b, 0), totalBytes, failed: failed.length });
+  if (failed.length) {
+    const list = ["下面这些文件没有下载下来（其余文件都在压缩包里）：", "", ...failed.map((f) => `${f.path}\t${f.reason}`), ""].join("\n");
+    ok.push({ path: FAILED_LIST_NAME, data: new TextEncoder().encode(list) as Uint8Array<ArrayBuffer> });
+  }
+  const blob = buildZip(ok);
+  const name = opts.zipName ?? `${(dir.split("/").filter(Boolean).pop() || "工作区")}.zip`;
+  return { blob, name, files: ok.length - (failed.length ? 1 : 0), failed };
+}

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