@spzxg/cli-ui 0.4.0 → 0.6.0

package/src/board/ChangesPane.tsx

@@ -6,6 +6,8 @@ import type { DiffFile, DiffResult } from "../core/types.js";
 
 const STATUS_LABEL: Record<string, string> = { A: "新增", M: "修改", D: "删除", R: "重命名", "?": "未跟踪" };
 const COLLAPSE_LINES = 400;
+/** 一次画多少个文件的 diff：改了几千个文件时不一次塞进页面，往下点「再显示」。 */
+const RENDER_BATCH = 150;
 
 // 去掉 diff --git / index / --- / +++ 文件头，只留 hunk 行（与 Operator 一致）。
 function hunkLines(patch: string): string[] {
@@ -43,7 +45,7 @@ const FileDiff = memo(function FileDiff({ file: f, userToggled, onToggle, refs,
   file: DiffFile; userToggled: boolean; onToggle: (path: string) => void;
   refs: { current: Record<string, HTMLDivElement | null> }; onOpen?: (path: string) => void;
 }) {
-  const lines = useMemo(() => (f.binary ? [] : hunkLines(f.patch)), [f]);
+  const lines = useMemo(() => (f.binary || f.omitted ? [] : hunkLines(f.patch)), [f]);
   const big = lines.length > COLLAPSE_LINES;
   const isCollapsed = userToggled ? !big : big;
   const est = Math.round(34 + (isCollapsed ? 38 : Math.max(1, lines.length) * 18.6));
@@ -62,7 +64,8 @@ const FileDiff = memo(function FileDiff({ file: f, userToggled, onToggle, refs,
         big && <button className="tc-bigdiff" onClick={() => onToggle(f.path)}>大型 diff（{lines.length.toLocaleString()} 行）—— 点击展开</button>
       ) : (
         <div className="tc-hunks">
-          {f.binary ? <div className="tc-empty">二进制文件 —— 不予显示</div>
+          {f.omitted ? <div className="tc-empty">改动太多，这个文件的 diff 没有带上{onOpen && f.status !== "D" ? "，可以点「打开」看文件" : ""}。</div>
+            : f.binary ? <div className="tc-empty">二进制文件 —— 不予显示</div>
             : lines.length === 0 ? <div className="tc-empty">没有文本改动（仅权限或重命名）。</div>
               : lines.map((ln, i) => <div key={i} className={`dl ${lineClass(ln)}`}>{ln || " "}</div>)}
           {f.truncated && <div className="tc-empty">… 文件 diff 已截断</div>}
@@ -79,6 +82,7 @@ export function ChangesPane({ backend, jobId, refreshKey, onOpen }: { backend: B
   const [manual, setManual] = useState(0);
   const [toggled, setToggled] = useState<Set<string>>(new Set());
   const [active, setActive] = useState<string | null>(null);
+  const [shown, setShown] = useState(RENDER_BATCH);
   const secRefs = useRef<Record<string, HTMLDivElement | null>>({});
   const scrollRef = useRef<HTMLDivElement | null>(null);
 
@@ -93,6 +97,9 @@ export function ChangesPane({ backend, jobId, refreshKey, onOpen }: { backend: B
   const toggle = useCallback((path: string) => setToggled((s) => { const n = new Set(s); if (n.has(path)) n.delete(path); else n.add(path); return n; }), []);
   const jump = (path: string) => {
     setActive(path);
+    // 跳到还没画出来的文件：先把它画出来。
+    const at = files.findIndex((f) => f.path === path);
+    if (at >= shown) setShown(at + RENDER_BATCH);
     const el = secRefs.current[path];
     const box = scrollRef.current;
     if (el && box) box.scrollTo({ top: el.offsetTop - box.offsetTop, behavior: "smooth" });
@@ -130,11 +137,13 @@ export function ChangesPane({ backend, jobId, refreshKey, onOpen }: { backend: B
               <button key={f.path} className={`tc-frow ${active === f.path ? "on" : ""}`} onClick={() => jump(f.path)} title={f.path}>
                 <span className={`tc-st s-${f.status === "?" ? "new" : f.status}`} title={STATUS_LABEL[f.status] || f.status}>{f.status}</span>
                 <span className="tc-fpath">{f.path}</span>
-                {f.binary ? <span className="tc-bin">bin</span> : <span className="tc-cnt"><b className="add">+{f.additions}</b> <b className="del">−{f.deletions}</b></span>}
+                {f.binary ? <span className="tc-bin">bin</span> : f.omitted ? <span className="tc-bin">略</span> : <span className="tc-cnt"><b className="add">+{f.additions}</b> <b className="del">−{f.deletions}</b></span>}
               </button>
             ))}
           </div>
-          {files.map((f) => <FileDiff key={f.path} file={f} userToggled={toggled.has(f.path)} onToggle={toggle} refs={secRefs} onOpen={onOpen} />)}
+          {(data.patchesOmitted ?? 0) > 0 && <div className="tc-empty">改动太多：{data.patchesOmitted} 个文件的 diff 没有带上（只列出文件），可以打开文件查看。</div>}
+          {files.slice(0, shown).map((f) => <FileDiff key={f.path} file={f} userToggled={toggled.has(f.path)} onToggle={toggle} refs={secRefs} onOpen={onOpen} />)}
+          {files.length > shown && <button className="tc-bigdiff" onClick={() => setShown((n) => n + RENDER_BATCH)}>还有 {(files.length - shown).toLocaleString()} 个文件 —— 再显示 {Math.min(RENDER_BATCH, files.length - shown)} 个</button>}
         </div>
       )}
     </div>

package/src/board/CliBoard.tsx

@@ -7,10 +7,12 @@
 //
 // 同步：任务每有进展（实时流里的轮次 / 输出变化）就刷新，运行中再定时刷新；打开着的文件改了会自动重读。
 // 和 cli-chat 放在同一个 Provider 里时，对话里点本地文件 / 「查看浏览器」会在这里打开（store.openInBoard）。
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
-import type { CliEvent, CliStore, CliStoreOptions, OpenTarget } from "../core/store.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { CliErrorBoundary } from "../ui/ErrorBoundary.js";
+import type { BoardRef, CliEvent, CliStore, CliStoreOptions, OpenTarget } from "../core/store.js";
 import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider } from "../core/provider.js";
 import { convKey, parseConvKey, isRunning } from "../core/conversation.js";
+import { toolDataOf } from "../ui/transcriptModel.js";
 import type { BoardInfo, FileEntry } from "../core/types.js";
 import { Icon } from "../ui/icons.js";
 import { CenterError } from "../core/client.js";
@@ -20,7 +22,34 @@ import { ChangesPane } from "./ChangesPane.js";
 import { BrowserPane } from "./BrowserPane.js";
 
 export type BoardTab = "files" | "changes" | "browser";
+
+/** 宿主加的看板页签。 */
+export interface BoardExtraTab {
+  id: string;
+  label: string;
+  render: (ctx: { jobId: string; store: CliStore; quote: (ref: Omit<BoardRef, "id"> & { id?: string }) => void }) => ReactNode;
+}
 const TAB_LABEL: Record<BoardTab, string> = { files: "文件", changes: "改动", browser: "浏览器" };
+/** 同时开着的文件页签最多几个：再开新的，关掉最早打开、当前没在看的那个。 */
+export const MAX_FILE_TABS = 8;
+const FILE_TAB = "file:";
+const fileTabId = (path: string) => `${FILE_TAB}${path}`;
+/** 开着的文件页签记在会话存储里（按对话）：刷新页面后还在。 */
+const tabsKey = (jobId: string) => `cli-ui:board-tabs:${jobId}`;
+function loadTabs(jobId: string | null): { files: string[]; tab: string | null } {
+  if (!jobId) return { files: [], tab: null };
+  try {
+    const v = JSON.parse(sessionStorage.getItem(tabsKey(jobId)) ?? "null") as { files?: unknown; tab?: unknown } | null;
+    const files = Array.isArray(v?.files) ? v.files.filter((f): f is string => typeof f === "string").slice(-MAX_FILE_TABS) : [];
+    return { files, tab: typeof v?.tab === "string" ? v.tab : null };
+  } catch { return { files: [], tab: null }; }
+}
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function saveTabs(jobId: string, files: string[], tab: string) {
+  try { sessionStorage.setItem(tabsKey(jobId), JSON.stringify({ files, tab })); } catch { /* 存不下就不记 */ }
+}
+/** 有输出就刷新文件，但两次之间至少隔这么久（智能体连写几十个文件时不至于每个都打一次中枢）。 */
+const ACTIVITY_GAP_MS = 700;
 
 export interface CliBoardProps extends CliStoreOptions {
   /** 看哪个对话（center 的 job_id）。不给就跟共享仓库的选中走（和 cli-msglist / cli-chat 联动）。 */
@@ -34,10 +63,24 @@ export interface CliBoardProps extends CliStoreOptions {
   readOnly?: boolean;
   /** 文件上的自定义操作（预览头部的按钮）。 */
   fileActions?: FileAction[];
-  /** 运行中定时刷新文件列表的间隔，缺省 4000ms；0 = 只在实时流有变化时刷新。改动（diff）不轮询，只在有进展时刷新。 */
+  /** 运行中兜底刷新文件列表的间隔，缺省 15000ms（文件变化主要靠实时流里的工具结果触发，这里只兜底；人多时每人每 4 秒去节点列一次目录太重）；0 = 只在实时流有变化时刷新。改动（diff）不轮询，只在有进展时刷新。 */
   pollMs?: number;
   /** 接不接对话里的「打开文件 / 查看浏览器」，缺省接。 */
   acceptOpen?: boolean;
+  /**
+   * 显示「引用到对话」（文件预览、浏览器）：把看板里的东西带进这个对话的下一条消息（store.addRef）。
+   * 缺省：和对话放在同一个 Provider 里时显示。
+   */
+  quoteToChat?: boolean;
+  /**
+   * 宿主自己加的页签（例如终端、另一个浏览器），排在内置页签后面。ctx.quote 可以把页签里的东西引用到对话。
+   */
+  extraTabs?: BoardExtraTab[];
+  /**
+   * 看板上打开着的文件缺省带进对话的下一条消息一次（对话输入框上方显示「正在看」，可以点掉）。
+   * 缺省和 quoteToChat 一样。
+   */
+  autoQuoteOpenFile?: boolean;
   /** 给了就在页签栏右侧显示「隐藏面板」按钮。 */
   onCollapse?: () => void;
   /**
@@ -47,7 +90,7 @@ export interface CliBoardProps extends CliStoreOptions {
   collapsed?: boolean;
   onExpand?: () => void;
   /** 选中 / 打开文件 / 切页签时通知宿主（例如记到地址栏）。 */
-  onNavigate?: (state: { tab: BoardTab; dir: string; file: string | null }) => void;
+  onNavigate?: (state: { tab: BoardTab | string; dir: string; file: string | null }) => void;
   onEvent?: (event: CliEvent) => void;
   theme?: "light" | "dark";
   className?: string;
@@ -57,12 +100,12 @@ export interface CliBoardProps extends CliStoreOptions {
 
 export function CliBoard(props: CliBoardProps) {
   const ctx = useCliStoreContext();
-  return withOwnProvider(props, <BoardInner {...props} inProvider={!!ctx} />, !!ctx);
+  return <CliErrorBoundary component="cli-board" theme={props.theme}>{withOwnProvider(props, <BoardInner {...props} inProvider={!!ctx} />, !!ctx)}</CliErrorBoundary>;
 }
 
 interface OpenFile { path: string; size?: number; mtime?: number; version: number }
 
-function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, readOnly, fileActions, pollMs = 4000, acceptOpen = true, onCollapse, collapsed, onExpand, onNavigate, onEvent, theme = "light", className, style, inProvider }: CliBoardProps & { inProvider: boolean }) {
+function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, readOnly, fileActions, pollMs = 15_000, acceptOpen = true, quoteToChat, autoQuoteOpenFile, extraTabs, onCollapse, collapsed, onExpand, onNavigate, onEvent, theme = "light", className, style, inProvider }: CliBoardProps & { inProvider: boolean }) {
   useComponentEvents(onEvent, {}, inProvider);
   const store = useCliStore();
   const backend = store.client.board;
@@ -72,9 +115,10 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
 
   const [info, setInfo] = useState<BoardInfo | null>(null);
   const [infoError, setInfoError] = useState<string | null>(null);
-  const [tab, setTab] = useState<BoardTab>(defaultTab ?? tabs?.[0] ?? "files");
+  // 页签：内置的（文件列表 / 改动 / 浏览器）、打开的文件（file:<路径>，可以开多个、可以关）、宿主加的。
+  const [tab, setTab] = useState<string>(defaultTab ?? tabs?.[0] ?? "files");
   const [dir, setDir] = useState("");
-  const [file, setFile] = useState<OpenFile | null>(null);
+  const [files, setFiles] = useState<OpenFile[]>([]);
   // 刷新信号，按代价分开：
   //   tick     进展（实时流有新输出 / 轮次变化，节流）、切回页面、手动刷新 —— 文件、改动、打开的文件都跟着刷新；
   //   pollTick 运行中的定时刷新 —— 只刷文件列表和打开的文件（改动要在节点上跑 git diff，不轮询）；
@@ -86,16 +130,35 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
   const lastJob = useRef(jobId);
   if (lastJob.current !== jobId) {
     lastJob.current = jobId;
-    setInfo(null); setInfoError(null); setDir(""); setFile(null);
+    setInfo(null); setInfoError(null); setDir(""); setFiles([]);
+    setTab(defaultTab ?? tabs?.[0] ?? "files");
   }
+  // 恢复上次开着的文件页签（存在 sessionStorage）：挂上之后、绘制之前做——服务端渲染和首次渲染一致，不会对不上。
+  const restored = useRef<string | null>(null);
+  useIsoLayoutEffect(() => {
+    if (!jobId || restored.current === jobId) return;
+    restored.current = jobId;
+    const saved = loadTabs(jobId);
+    if (saved.files.length) setFiles((cur) => (cur.length ? cur : saved.files.map((path) => ({ path, version: 0 }))));
+    if (saved.tab) setTab((cur) => (cur === (defaultTab ?? tabs?.[0] ?? "files") ? saved.tab! : cur));
+  }, [jobId]);
 
   // 实时流：看板单独用时也要知道任务在不在跑（同一对话只连一次）。
   useEffect(() => (jobId ? store.open(jobId) : undefined), [store, jobId]);
   const conv = useCliState((s) => (jobId ? s.convs[jobId] : undefined));
   const running = conv ? isRunning(conv) : false;
-  // 进展签名：轮次状态 + 转录条数。变了就刷新（节流）。
-  const statusKey = conv ? `${conv.turns.map((t) => `${t.turn_id}:${t.status}`).join(",")}|${conv.job?.status ?? ""}` : "";
-  const activity = conv ? `${statusKey}|${conv.msgs.length}` : "";
+  // 进展签名：轮次状态 + 看的子任务（一次性任务没有轮次：续派开出新子任务、派发到节点、换了节点对话都要重查看板概况）+ 转录条数。变了就刷新（节流）。
+  const statusKey = conv
+    ? `${conv.turns.map((t) => `${t.turn_id}:${t.status}`).join(",")}|${conv.job?.status ?? ""}|${conv.task?.id ?? ""}:${conv.task?.status ?? ""}:${conv.remoteTaskId ?? conv.task?.remote_task_id ?? ""}`
+    : "";
+  // 能改动文件的只有工具调用：签名 = 轮次状态 + 消息条数 + 最近一个工具拿没拿到结果（拿到结果就是文件刚写完）。
+  // 智能体逐字输出回复时条数和工具都不变，不触发刷新——几十个人同时看也不会每秒去节点上列一遍目录。
+  const lastTool = useMemo(() => {
+    const msgs = conv?.msgs ?? [];
+    for (let i = msgs.length - 1, n = 0; i >= 0 && n < 50; i--, n++) if (msgs[i].role === "tool") return `${msgs[i].id}:${toolDataOf(msgs[i]).result !== undefined}`;
+    return "";
+  }, [conv?.msgs]);
+  const activity = conv ? `${statusKey}|${conv.msgs.length}|${lastTool}` : "";
 
   const bump = useCallback(() => setTick((n) => n + 1), []);
   // 手动刷新（页签栏的 ↻）：连看板概况一起重查。
@@ -105,7 +168,7 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
   const pending = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   useEffect(() => {
     if (!activity) return;
-    const wait = Math.max(0, 1500 - (Date.now() - lastBump.current));
+    const wait = Math.max(0, ACTIVITY_GAP_MS - (Date.now() - lastBump.current));
     if (pending.current) clearTimeout(pending.current);
     pending.current = setTimeout(() => { lastBump.current = Date.now(); bump(); }, wait);
     return () => { if (pending.current) clearTimeout(pending.current); };
@@ -140,34 +203,126 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
     return () => { alive = false; if (timer) clearTimeout(timer); };
   }, [backend, jobId, statusKey, manual]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const shownTabs = useMemo(() => (tabs ?? ["files", "changes", "browser"]).filter((t) => t !== "browser" || !info || info.browser), [tabs, info]);
+  const builtinTabs = useMemo<string[]>(() => (tabs ?? ["files", "changes", "browser"]).filter((t) => t !== "browser" || !info || info.browser !== false), [tabs, info]);
+  const fileTabsOn = builtinTabs.includes("files");
+  const shownTabs = useMemo<string[]>(() => [
+    ...builtinTabs,
+    ...(fileTabsOn ? files.map((f) => fileTabId(f.path)) : []),
+    ...(extraTabs ?? []).map((t) => t.id),
+  ], [builtinTabs, fileTabsOn, files, extraTabs]);
   const activeTab = shownTabs.includes(tab) ? tab : shownTabs[0] ?? "files";
+  const file = activeTab.startsWith(FILE_TAB) ? files.find((f) => fileTabId(f.path) === activeTab) ?? null : null;
+  const tabLabel = (t: string) => TAB_LABEL[t as BoardTab] ?? (t.startsWith(FILE_TAB) ? t.slice(FILE_TAB.length).split("/").pop() || t : undefined) ?? extraTabs?.find((x) => x.id === t)?.label ?? t;
+  // 页签多了横向滚动：当前页签总是滚到看得见的地方（新开的文件页签在最后，窄看板里容易被挤出去）。
+  const tabsRef = useRef<HTMLDivElement | null>(null);
+  const revealTab = useCallback(() => {
+    // 直接算滚动位置，不用 scrollIntoView：它会连带滚动宿主页面。
+    const box = tabsRef.current;
+    const on = box?.querySelector<HTMLElement>(".rail-tab.on");
+    if (!box || !on) return;
+    const b = box.getBoundingClientRect();
+    const r = on.getBoundingClientRect();
+    if (r.left < b.left) box.scrollLeft -= b.left - r.left + 8;
+    else if (r.right > b.right) box.scrollLeft += r.right - b.right + 8;
+  }, []);
+  useEffect(() => {
+    // 用定时器而不是 requestAnimationFrame：后台 / 被遮住的页面里 rAF 不跑。字体加载完页签会变宽，再对一次。
+    const timers = [setTimeout(revealTab, 0), setTimeout(revealTab, 400)];
+    let alive = true;
+    void document.fonts?.ready.then(() => { if (alive) revealTab(); });
+    return () => { alive = false; timers.forEach(clearTimeout); };
+  }, [activeTab, shownTabs.length, collapsed, revealTab]);
+  // 看板宽度或页签宽度变了（分栏拖动、刚挂上时分栏才给出宽度、字体加载完页签变宽）：再对一次。
+  useEffect(() => {
+    const box = tabsRef.current;
+    if (!box || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => revealTab());
+    ro.observe(box);
+    for (const child of box.children) ro.observe(child);
+    return () => ro.disconnect();
+  }, [collapsed, revealTab, shownTabs.length]);
+  // 记下开着的文件页签和当前页签（刷新页面后恢复）。恢复之前不写，免得用空的盖掉上次的。
+  useEffect(() => { if (jobId && restored.current === jobId) saveTabs(jobId, files.map((f) => f.path), activeTab); }, [jobId, files, activeTab]);
+  // 引用到对话：和对话在同一个 Provider 里时缺省开。
+  const canQuote = (quoteToChat ?? inProvider) && !!jobId;
+  const quote = useCallback((ref: Omit<BoardRef, "id"> & { id?: string }) => {
+    if (jobId) store.addRef(jobId, { ...ref, id: ref.id ?? `${ref.kind}:${ref.label}` });
+  }, [store, jobId]);
+  const quoteText = useCallback((path: string, text: string) => {
+    const name = path.split("/").pop() || path;
+    const short = text.replace(/\s+/g, " ").slice(0, 24);
+    // 同一个文件里选不同的段落各算一条（按内容区分），同一段重复点只留一条。
+    quote({ id: `sel:${path}:${text.length}:${short}`, kind: "selection", label: `${name}：${short}${text.length > 24 ? "…" : ""}`, text: `工作区文件 ${path} 里选中的这段：\n${text.split("\n").map((l) => `  > ${l}`).join("\n")}` });
+  }, [quote]);
+  // 正在看的东西（打开的文件、浏览器当前页面）：告诉对话（缺省带进下一条消息一次）。收起、切走、关掉、离开时撤掉。
+  const autoView = (autoQuoteOpenFile ?? canQuote) && !!jobId;
+  const [browserPage, setBrowserPage] = useState<{ url: string; title: string } | null>(null);
+  const viewingPath = autoView && !collapsed && file ? file.path : null;
+  const viewingPage = autoView && !collapsed && activeTab === "browser" && browserPage ? browserPage : null;
+  // 这个看板自己的标识：同一个对话开着两个看板时，各撤各的「正在看」和看板状态。
+  const owner = useMemo(() => `board-${Math.random().toString(36).slice(2, 10)}`, []);
+  useEffect(() => {
+    if (!jobId || !autoView) return;
+    store.setViewing(jobId, 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}` }
+        : 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]);
+  const allFileActions = useMemo<FileAction[]>(() => [
+    ...(canQuote ? [{ label: "引用到对话", title: "把这个文件带进下一条消息（智能体会按路径去读）", onClick: (f: { path: string; name: string }) => quote({ id: `file:${f.path}`, kind: "file", label: f.name, text: `工作区文件 ${f.path}` }) }] : []),
+    ...(fileActions ?? []),
+  ], [canQuote, quote, fileActions]);
 
   // 打开着的文件：每次刷新查一下它的修改时间，变了就重读。
   useEffect(() => {
-    if (!backend || !jobId || !file || !(tick + pollTick) || !info?.dispatched || collapsed) return;
+    if (!backend || !jobId || !file || !info?.dispatched || collapsed) return;
     let alive = true;
-    backend.stat(jobId, file.path).then((s) => {
+    const path = file.path;
+    const update = (fn: (f: OpenFile) => OpenFile) => setFiles((list) => list.map((f) => (f.path === path ? fn(f) : f)));
+    backend.stat(jobId, path).then((s) => {
       if (!alive || s.type !== "file") return;
-      setFile((f) => {
-        if (!f || f.path !== file.path || f.mtime === s.mtime) return f;
-        // 第一次拿到修改时间（从对话里打开的）只记下来；之后变了才重读。
-        return { ...f, size: s.size, mtime: s.mtime, version: f.mtime === undefined ? f.version : f.version + 1 };
-      });
+      // 第一次拿到修改时间（从对话里打开的、刷新后恢复的）只记下来；之后变了才重读。
+      update((f) => (f.mtime === s.mtime ? f : { ...f, size: s.size, mtime: s.mtime, version: f.mtime === undefined ? f.version : f.version + 1 }));
     }, (e: unknown) => {
-      // 打开着的文件被删了：重读一次，预览里显示「找不到文件」，不继续显示旧内容。
-      if (alive && e instanceof CenterError && e.status === 404) setFile((f) => (f && f.path === file.path && f.mtime !== -1 ? { ...f, mtime: -1, version: f.version + 1 } : f));
+      // 打开着的文件被删了：重读一次，预览里显示「文件不存在」，不继续显示旧内容。
+      if (alive && e instanceof CenterError && e.status === 404) update((f) => (f.mtime !== -1 ? { ...f, mtime: -1, version: f.version + 1 } : f));
     });
     return () => { alive = false; };
-  }, [tick, pollTick]); // eslint-disable-line react-hooks/exhaustive-deps
+    // 只看正在看的那个文件：切到别的文件页签时查一次它（后台的页签不轮询）。
+  }, [tick, pollTick, file?.path, info?.dispatched]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const activeRef = useRef(activeTab);
+  activeRef.current = activeTab;
+  /** 打开文件：已经开着就切过去（并重读），否则新开一个页签；超过 MAX_FILE_TABS 关掉最早的（不关正在看的）。 */
   const openPath = useCallback((path: string, entry?: Partial<FileEntry>) => {
-    const clean = path.replace(/^\.\//, "");
-    setTab("files");
-    setFile((f) => ({ path: clean, size: entry?.size, mtime: entry?.mtime, version: (f?.version ?? 0) + 1 }));
+    const clean = path.replace(/^\.\//, "").replace(/\/+$/, "");
+    if (!clean) return;
+    setFiles((list) => {
+      const have = list.find((f) => f.path === clean);
+      if (have) return list.map((f) => (f.path === clean ? { ...f, size: entry?.size ?? f.size, mtime: entry?.mtime ?? f.mtime, version: f.version + 1 } : f));
+      const next = [...list, { path: clean, size: entry?.size, mtime: entry?.mtime, version: 0 }];
+      while (next.length > MAX_FILE_TABS) {
+        const i = next.findIndex((f) => fileTabId(f.path) !== activeRef.current && f.path !== clean);
+        next.splice(i >= 0 ? i : 0, 1);
+      }
+      return next;
+    });
+    setTab(fileTabId(clean));
     const parent = clean.includes("/") && !clean.startsWith("/") ? clean.split("/").slice(0, -1).join("/") : "";
     setDir(parent);
   }, []);
+  /** 关文件页签：关的是正在看的，就切到它旁边的文件页签，没有了回文件列表。 */
+  const closeFile = useCallback((path: string) => {
+    setFiles((list) => {
+      const i = list.findIndex((f) => f.path === path);
+      if (i < 0) return list;
+      const next = list.filter((f) => f.path !== path);
+      if (activeRef.current === fileTabId(path)) setTab(next.length ? fileTabId(next[Math.min(i, next.length - 1)].path) : "files");
+      return next;
+    });
+  }, []);
 
   // 接对话里的打开请求（只接自己正在看的对话）。
   const jobRef = useRef(jobId);
@@ -179,7 +334,8 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
     return store.registerBoard((target: string, what: OpenTarget) => {
       if (!jobRef.current || target !== jobRef.current) return false;
       if (what.kind === "file") openPath(what.path);
-      else if (what.kind === "files") { setTab("files"); setFile(null); setDir(what.path ?? ""); }
+      else if (what.kind === "files") { setTab("files"); setDir(what.path ?? ""); }
+      else if (what.kind === "tab") setTab(what.id);
       else setTab(what.kind);
       expandRef.current?.();
       return true;
@@ -189,6 +345,13 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
   const navRef = useRef(onNavigate);
   navRef.current = onNavigate;
   useEffect(() => { navRef.current?.({ tab: activeTab, dir, file: file?.path ?? null }); }, [activeTab, dir, file?.path]);
+  // 看板现在的样子报给仓库：业务方用 store.workspace().openFile() / openFiles() 拿到当前打开的文件。
+  const openPaths = files.map((f) => f.path).join("\n");
+  useEffect(() => {
+    if (!jobId) return;
+    store.reportBoard(jobId, { tab: activeTab, dir, file: file?.path ?? null, files: openPaths ? openPaths.split("\n") : [] }, owner);
+  }, [store, jobId, activeTab, dir, file?.path, openPaths, owner]);
+  useEffect(() => () => { if (jobId) store.reportBoard(jobId, null, owner); }, [store, jobId, owner]);
 
   const body = () => {
     if (!backend) return <div className="tc-note">当前后端不支持看板（需要任务中心提供 /api/jobs/:id/board）。</div>;
@@ -196,8 +359,19 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
     if (!info) return <div className="tc-note">{infoError ? `读取看板失败：${infoError}（稍后自动重试）` : "读取中…"}</div>;
     if (!info.dispatched) return <div className="tc-note">任务还没开始执行（{info.detail ?? "等待分配执行节点"}）。开始后这里会显示工作区文件。</div>;
     if (activeTab === "changes") return <ChangesPane key={jobId} backend={backend} jobId={jobId} refreshKey={tick} onOpen={(p) => openPath(p)} />;
-    if (activeTab === "browser") return <BrowserPane key={`${jobId}:${info.remote_task_id}`} backend={backend} jobId={jobId} readOnly={readOnly} />;
-    if (file) {
+    if (activeTab === "browser") {
+      return <BrowserPane key={`${jobId}:${info.remote_task_id}`} backend={backend} jobId={jobId} readOnly={readOnly}
+        onPage={setBrowserPage}
+        onQuote={canQuote ? (p) => quote({ id: "browser:page", kind: "browser", label: p.title || p.url, text: `任务浏览器当前打开的页面：${p.title ? `${p.title} — ` : ""}${p.url}` }) : undefined}
+        onQuoteText={canQuote ? (text, p) => {
+          const clipped = text.length > 3_000 ? `${text.slice(0, 3_000)}…` : text;
+          const short = clipped.replace(/\s+/g, " ").slice(0, 24);
+          quote({ id: `bsel:${p.url}:${text.length}:${short}`, kind: "selection", label: `网页：${short}${clipped.length > 24 ? "…" : ""}`, text: `任务浏览器页面 ${p.title ? `「${p.title}」` : ""}${p.url} 里复制的这段：\n${clipped.split("\n").map((l) => `  > ${l}`).join("\n")}` });
+        } : undefined} />;
+    }
+    const extra = extraTabs?.find((t) => t.id === activeTab);
+    if (extra) return extra.render({ jobId, store, quote });
+    if (activeTab.startsWith(FILE_TAB) && file) {
       return (
         <FileViewer
           key={file.path}
@@ -207,9 +381,10 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
           size={file.size}
           mtime={file.mtime}
           version={file.version}
-          actions={fileActions}
+          actions={allFileActions}
           onOpenPath={(p) => openPath(p)}
-          lead={<button className="cli-fv-back" onClick={() => setFile(null)} title="返回文件列表">‹</button>}
+          onQuoteText={canQuote ? (text) => quoteText(file.path, text) : undefined}
+          lead={<button className="cli-fv-back" onClick={() => setTab("files")} title="返回文件列表">‹</button>}
         />
       );
     }
@@ -221,7 +396,7 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
       <aside className={`cli-ui cli-board collapsed ${className ?? ""}`} data-theme={theme} style={style}>
         <button className="cli-board-strip" onClick={onExpand} title="显示看板">
           {Icon.chevRight()}
-          {shownTabs.map((t) => <span key={t} className="cli-board-strip-t">{TAB_LABEL[t]}</span>)}
+          {shownTabs.map((t) => <span key={t} className="cli-board-strip-t">{tabLabel(t)}</span>)}
           {running && <span className="cli-sync-dot on" />}
         </button>
       </aside>
@@ -231,10 +406,17 @@ function BoardInner({ jobId: jobIdProp, taskId: taskIdProp, tabs, defaultTab, re
   return (
     <aside className={`cli-ui cli-board sess-rail ${className ?? ""}`} data-theme={theme} style={style}>
       <div className="rail-tabs">
-        {shownTabs.map((t) => (
-          <button key={t} className={`rail-tab ${activeTab === t ? "on" : ""}`} onClick={() => { setTab(t); if (t === "files" && activeTab === "files") setFile(null); }}>{TAB_LABEL[t]}</button>
-        ))}
-        <span style={{ flex: 1 }} />
+        <div className="rail-tabs-scroll" role="tablist" ref={tabsRef}>
+          {shownTabs.map((t) => t.startsWith(FILE_TAB) ? (
+            <span key={t} className={`rail-tab rail-ftab ${activeTab === t ? "on" : ""}`} role="tab" aria-selected={activeTab === t} title={t.slice(FILE_TAB.length)}
+              onMouseDown={(e) => { if (e.button === 1) { e.preventDefault(); closeFile(t.slice(FILE_TAB.length)); } }}>
+              <button className="rail-ftab-l" onClick={() => setTab(t)}>{Icon.doc()}{tabLabel(t)}</button>
+              <button className="rail-ftab-x" onClick={() => closeFile(t.slice(FILE_TAB.length))} title="关闭（鼠标中键也可以）" aria-label={`关闭 ${tabLabel(t)}`}>{Icon.x()}</button>
+            </span>
+          ) : (
+            <button key={t} role="tab" aria-selected={activeTab === t} className={`rail-tab ${activeTab === t ? "on" : ""}`} onClick={() => setTab(t)}>{tabLabel(t)}</button>
+          ))}
+        </div>
         {info?.dispatched && <button className="rail-collapse" onClick={refreshAll} title={running ? "运行中 · 自动同步" : "刷新"}>
           <span className={`cli-sync-dot ${running ? "on" : ""}`} />↻
         </button>}