@xgspz/cli-ui 0.6.14 → 0.6.16

package/src/chat/CliChat.tsx

@@ -15,12 +15,14 @@ import { Icon } from "../ui/icons";
 import { agentLabel as labelOf, fmtTokens, formatAnswersText, modelLabel } from "../ui/format";
 import { AgentBadge, Avatar, Skel, StatusDot, type DotCls } from "../ui/shared";
 import { HANDOFF_NOTICE_PREFIX, MessageView, SessionBreak, type MessageHandlers } from "../ui/Transcript";
-import { RENDER_MAX, RENDER_STEP, RENDER_WINDOW, buildTranscriptItems, hasOpenAsk, toolDataOf } from "../ui/transcriptModel";
+import { buildTranscriptItems, hasOpenAsk, toolDataOf } from "../ui/transcriptModel";
+import { useTranscriptWindow } from "../ui/useTranscriptWindow";
 import { Composer, type ComposerOptions } from "./Composer";
 import { fillTemplate, refShown, resolveChatConfig, type CliChatConfig } from "../core/config";
 import { exportMarkdown } from "./export";
 import { FileLinkContext, FileOpenContext } from "../ui/fileLinks";
 import { FileViewer } from "../board/FileViewer";
+import { pathHints, resolveMissingPath } from "../board/pathResolve";
 import { BrowserPane } from "../board/BrowserPane";
 import { CliBoard } from "../board/CliBoard";
 import { WorkspaceTabs } from "../ui/WorkspaceTabs";
@@ -122,6 +124,11 @@ function batchStatusView(taskStatus: string | null, jobStatus: string | null): {
 
 /** 「智能体在工作」那一行：跑了多久，很久没输出时提示可能卡住。与 Operator 的 RunningIndicator 一致。 */
 const QUIET_AFTER_MS = 180_000;
+/**
+ * 「正在加载会话」最多等这么久：会话记录还没到（执行节点暂时读不到、网关缓冲了实时数据、旧版中枢补发失败后
+ * 不再重试）就改成说明 +「重新读取」，不一直转圈。中枢报了 transcript_unavailable 时立刻说明。
+ */
+export const TRANSCRIPT_WAIT_MS = 20_000;
 function RunningIndicator({ agent, agentName, startedAt, lastActivityRef }: { agent: string | null; agentName: string; startedAt: number | null; lastActivityRef: React.MutableRefObject<number> }) {
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []);
@@ -288,6 +295,24 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
     && (remoteAwaiting === true || (!running && !!lastTurn?.asked && lastTurn.status === "succeeded"));
   // 一次性任务的子任务还没派发（没有节点对话）、或者流已经结束还没有转录：不再转圈，转录里有说明。
   const loading = !!key && !isNew && !!conv && !conv.hasTranscript && !conv.turns.length && conv.stream !== "error" && conv.stream !== "ended" && !(conv.batch && !conv.remoteTaskId);
+  // 记录迟迟不来：到时改成说明（见 TRANSCRIPT_WAIT_MS）；「重新读取」后重新计时。
+  const [loadStalled, setLoadStalled] = useState(false);
+  const [loadAttempt, setLoadAttempt] = useState(0);
+  useEffect(() => {
+    setLoadStalled(false);
+    if (!loading) return;
+    const timer = setTimeout(() => setLoadStalled(true), TRANSCRIPT_WAIT_MS);
+    return () => clearTimeout(timer);
+  }, [loading, key, loadAttempt]);
+  // 已结束的一次性任务：中枢补不到记录时关流前会先报 transcript_unavailable。
+  const transcriptProblem = !!key && !isNew && !!conv && !conv.hasTranscript && !conv.turns.length
+    ? conv.transcriptError ?? (loading && loadStalled
+      ? conv.stream === "connecting" || (conv.stream === "live" && !conv.job)
+        ? "实时连接还没有收到数据：网络或网关可能缓冲了实时推送。"
+        : "会话记录还没读到：执行节点暂时没有响应。"
+      : null)
+    : null;
+  const rereadTranscript = () => { if (!key) return; setLoadAttempt((n) => n + 1); store.reconnect(key, { force: true }); };
   const batchStatus = batch ? conv?.batchTask?.status ?? task?.status ?? null : null;
 
   // 用量：任务详情里的累计 + 实时流里上次刷新后的增量（「新开」的对话还没有用量，不借第一个对话的）。
@@ -363,13 +388,13 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
     if (target !== id && latest.current.key === refKey) go(target);
   }, [store, go, passiveContext]);
   const passiveView=useCliState(state=>key?state.boardContext[key]:undefined);
-  const passiveText=passiveContext&&passiveView?formatBoardContext(passiveView,key??undefined):'';
+  const passiveText=useMemo(()=>passiveContext&&passiveView?formatBoardContext(passiveView,key??undefined):'',[passiveContext,passiveView,key]);
   const refs = useCliState((s) => (key ? s.refs[key] : undefined));
   const viewingState = useCliState((s) => (key ? s.viewing[key] : undefined));
   const viewingRef = viewingState && !viewingState.off && !refs?.some((r) => r.id === viewingState.ref.id) ? viewingState.ref : null;
   // 输入框上方显示哪些（config.refs）：不显示的照样随消息带上。正在看的缺省不显示。
   const viewing = !passiveText && viewingRef && refShown(cfg, "viewing") ? viewingRef : null;
-  const shownRefs = refs?.filter((r) => refShown(cfg, r.kind));
+  const shownRefs = useMemo(() => refs?.filter((r) => refShown(cfg, r.kind)), [refs, cfg]);
   const chatRef = useRef<HTMLDivElement>(null);
   // 业务方补充的背景（store.appendContext）：随下一条消息带上，输入框上方显示出来，让用户知道会带上什么。
   const contextItems = useCliState((s) => s.context[key ?? ""]);
@@ -389,7 +414,14 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   }, [key, conv, fileOpen, store, inlineOwner]);
 
   // 对话里弹窗打开的文件 / 浏览器（没有看板接的时候）。换对话就关掉。
-  const [popup, setPopup] = useState<{ kind: "file"; path: string } | { kind: "browser" } | null>(null);
+  const [popup, setPopup] = useState<{ kind: "file"; path: string; resolvedFrom?: string } | { kind: "browser" } | null>(null);
+  // 弹窗里打不开的相对路径：和看板一样按这个对话里的线索补全（board/pathResolve.ts）。
+  const resolvePopupPath = useCallback((path: string, signal: AbortSignal) => {
+    const board = store.client.board, id = latest.current.key;
+    if (!board || !id) return Promise.resolve([]);
+    const seen = (store.getState().boardContext[id]?.history ?? []).map((f) => f.path);
+    return resolveMissingPath(board, id, path, pathHints(store.getState().convs[id]?.msgs ?? [], seen), signal);
+  }, [store]);
   useEffect(() => setPopup(null), [key]);
   useEffect(() => {
     if (!popup) return;
@@ -488,167 +520,27 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
   useEffect(() => { lastActivityRef.current = Date.now(); }, [messages]);
   const turnStartedAt = runSeenAt ?? lastUserTs;
 
-  // ── 分窗渲染（移植自 Operator 的 SessionView）：DOM 里最多 RENDER_MAX 行，几千条消息也照样流畅 ──
+  // ── 分窗渲染（与节点 Chat 共用 useTranscriptWindow）：DOM 里最多 RENDER_MAX 行，几千条消息也照样流畅 ──
   const scrollRef = useRef<HTMLDivElement>(null);
   useChatScrollbar(scrollRef, key);
-  const pinned = useRef(true);
-  const [atBottom, setAtBottom] = useState(true);
   const committed = useMemo(() => messages.filter((m) => m.role !== "queued"), [messages]);
-  const queued = useMemo(() => messages.filter((m) => m.role === "queued"), [messages]);
+  // 排队消息每次都是重新生成的对象：内容没变就沿用上一份，输入框上方的排队区不随流式输出重画。
+  const queuedNow = messages.filter((m) => m.role === "queued");
+  const queuedSig = queuedNow.map((m) => [m.id, m.content, m.note ?? "", m.turnId ?? "", m.ts ?? ""].join("\u0001")).join("\u0002");
+  const queued = useMemo(() => queuedNow, [queuedSig]); // eslint-disable-line react-hooks/exhaustive-deps
   // 「立即发送」只在有一轮正在执行、且接入开放了停止时可用。
   const queueSendNow = !readOnly && !batch && cfg.composer.stop && key && conv && runningTurn(conv) ? sendQueuedNow : undefined;
   const queueSendNowHint = !cfg.composer.stop && conv && runningTurn(conv) ? "当前接入没有开放停止，排队消息会在这一轮结束后发送" : undefined;
   // 节点转录比手里更早、还没取的条数（实时流只给最新一段，往上翻时分页取，和 Operator 一样）。
   const older = conv?.older ?? 0;
-  const [loadingOlder, setLoadingOlder] = useState(false);
-  const olderRef = useRef(older); olderRef.current = older;
-  const keyRef2 = useRef(key); keyRef2.current = key;
   const items = useMemo(() => buildTranscriptItems(committed, older > 0)
     .filter((it) => cfg.transcript.initialPrompt || it.kind !== "msg" || !it.initial), [committed, older, cfg.transcript.initialPrompt]);
   // 展开了的「续等」折叠行（按折叠行的 key）。
   const [openFolds, setOpenFolds] = useState<Set<string>>(() => new Set());
-  const [win, setWin] = useState<{ start: string | null; end: string | null }>({ start: null, end: null });
-  const { startIdx, endIdx } = useMemo(() => {
-    const find = (key: string | null) => (key ? items.findIndex((it) => it.key === key) : -1);
-    const e = find(win.end);
-    const last = e >= 0 ? e : items.length - 1;
-    let s = find(win.start);
-    if (s >= 0) while (s > 0 && items[s - 1].kind !== "msg") s--;
-    return { startIdx: s >= 0 && s <= last ? s : Math.max(0, last + 1 - RENDER_WINDOW), endIdx: last };
-  }, [items, win]);
-  const shown = useMemo(() => items.slice(startIdx, endIdx + 1), [items, startIdx, endIdx]);
-  const hiddenAbove = useMemo(() => { let n = 0; for (let i = 0; i < startIdx; i++) if (items[i].kind === "msg") n++; return n; }, [items, startIdx]);
-  const hiddenBelow = useMemo(() => { let n = 0; for (let i = endIdx + 1; i < items.length; i++) if (items[i].kind === "msg") n++; return n; }, [items, endIdx]);
-  const itemsRef = useRef(items); itemsRef.current = items;
-  const rangeRef = useRef({ startIdx, endIdx }); rangeRef.current = { startIdx, endIdx };
-  const winRef = useRef(win); winRef.current = win;
-  type Anchor = { key: string; top: number };
-  const anchorRef = useRef<(Anchor & { win: typeof win }) | null>(null);
-
-  const measure = useCallback((key?: string): Anchor | null => {
-    const el = scrollRef.current;
-    const node = key ? el?.querySelector<HTMLElement>(`[data-tkey="${CSS.escape(key)}"]`) : el?.querySelector<HTMLElement>("[data-tkey][data-msg]");
-    return node?.dataset.tkey ? { key: node.dataset.tkey, top: node.getBoundingClientRect().top } : null;
-  }, []);
-  const setRange = useCallback((s: number, e: number, anchor?: Anchor | null) => {
-    const its = itemsRef.current;
-    let a = s; while (a < its.length && its[a].kind !== "msg") a++;
-    let b = e; while (b > 0 && its[b].kind !== "msg") b--;
-    const next = { start: its[a]?.key ?? null, end: e >= its.length - 1 ? null : its[b]?.key ?? null };
-    if (winRef.current.start === next.start && winRef.current.end === next.end) return;
-    if (anchor) anchorRef.current = { ...anchor, win: next };
-    setWin(next);
-  }, []);
-  const revealEarlier = useCallback(() => {
-    const { startIdx: s, endIdx: e } = rangeRef.current;
-    if (s <= 0) {
-      // 手里的都显示了，节点上还有更早的：取一页接在前面，再往上展开（窗口按原来的那一行定位，不跳）。
-      const k = keyRef2.current;
-      if (!k || olderRef.current <= 0) return;
-      setLoadingOlder(true);
-      void store.loadOlder(k).then((ok) => { if (ok) requestAnimationFrame(() => revealRef.current.earlier()); }).finally(() => setLoadingOlder(false));
-      return;
-    }
-    const ns = Math.max(0, s - RENDER_STEP);
-    setRange(ns, Math.min(e, ns + RENDER_MAX - 1), measure());
-  }, [measure, setRange, store]);
-  const revealLater = useCallback(() => {
-    const its = itemsRef.current;
-    const { startIdx: s, endIdx: e } = rangeRef.current;
-    if (e >= its.length - 1) return;
-    const ne = Math.min(its.length - 1, e + RENDER_STEP);
-    const ns = Math.max(s, ne - RENDER_MAX + 1);
-    setRange(ns, ne, ns > s ? measure(its[ns].key) : null);
-  }, [measure, setRange]);
-  const revealRef = useRef({ earlier: revealEarlier, later: revealLater });
-  revealRef.current = { earlier: revealEarlier, later: revealLater };
-
-  const onScroll = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const bottom = el.scrollHeight - el.scrollTop - el.clientHeight < 60 && winRef.current.end === null;
-    pinned.current = bottom;
-    setAtBottom(bottom);
-    if (!bottom && winRef.current.start === null) {
-      const first = itemsRef.current.slice(rangeRef.current.startIdx).find((it) => it.kind === "msg");
-      if (first) setWin((w) => ({ ...w, start: first.key }));
-    } else if (bottom && winRef.current.start !== null) {
-      setWin({ start: null, end: null });
-    }
-  }, []);
-
-  const topSentinelRef = useRef<HTMLDivElement>(null);
-  const bottomSentinelRef = useRef<HTMLDivElement>(null);
-  const hasAbove = hiddenAbove > 0 || older > 0;
+  const loadOlderPage = useCallback((beforeApply: () => void) => (key ? store.loadOlder(key, { beforeApply }) : Promise.resolve(false)), [store, key]);
+  const { shown, hiddenAbove, hiddenBelow, loadingOlder, atBottom, onScroll, revealEarlier, revealLater, scrollToBottom, scrollToUserMsg, topSentinelRef, bottomSentinelRef } =
+    useTranscriptWindow({ scrollRef, items, older, loadOlder: loadOlderPage, messages, running, resetKey: key });
   const hasBelow = hiddenBelow > 0;
-  useEffect(() => {
-    const root = scrollRef.current;
-    if (!root || typeof IntersectionObserver === "undefined") return;
-    const watch = (target: HTMLElement | null, margin: string, go: () => void) => {
-      if (!target) return null;
-      const io = new IntersectionObserver((entries) => { if (!pinned.current && entries.some((e) => e.isIntersecting)) go(); }, { root, rootMargin: margin });
-      io.observe(target);
-      return io;
-    };
-    const up = hasAbove ? watch(topSentinelRef.current, "1800px 0px 0px 0px", () => revealRef.current.earlier()) : null;
-    const down = hasBelow ? watch(bottomSentinelRef.current, "0px 0px 1800px 0px", () => revealRef.current.later()) : null;
-    return () => { up?.disconnect(); down?.disconnect(); };
-  }, [hasAbove, hasBelow]);
-
-  useLayoutEffect(() => {
-    if (win.start === null || win.end !== null || endIdx - startIdx + 1 <= RENDER_MAX + 2) return;
-    const el = scrollRef.current;
-    if (!el) return;
-    if (el.scrollTop < (el.scrollHeight - el.clientHeight) / 2) setRange(startIdx, startIdx + RENDER_MAX - 1);
-    else { const ns = endIdx - RENDER_MAX + 1; setRange(ns, endIdx, measure(itemsRef.current[ns].key)); }
-  }, [win, startIdx, endIdx, setRange, measure]);
-
-  const scrollToBottom = useCallback((behavior: ScrollBehavior = "smooth") => {
-    const el = scrollRef.current;
-    if (!el) return;
-    pinned.current = true;
-    setAtBottom(true);
-    if (winRef.current.start !== null || winRef.current.end !== null) { setWin({ start: null, end: null }); return; }
-    el.scrollTo({ top: el.scrollHeight, behavior });
-  }, []);
-
-  // 在「你」的消息之间跳。
-  const scrollToUserMsg = useCallback((dir: -1 | 1) => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const base = el.getBoundingClientRect().top;
-    const tops = Array.from(el.querySelectorAll<HTMLElement>(".msg.user:not(.queued)")).map((n) => n.getBoundingClientRect().top - base + el.scrollTop);
-    const cur = el.scrollTop;
-    const candidates = dir < 0 ? tops.filter((t) => t < cur - 8) : tops.filter((t) => t > cur + 8);
-    if (!candidates.length) { if (dir < 0) revealRef.current.earlier(); else revealRef.current.later(); }
-    if (!tops.length) return;
-    const target = candidates.length ? (dir < 0 ? candidates[candidates.length - 1] : candidates[0]) : dir < 0 ? tops[0] : tops[tops.length - 1];
-    el.scrollTo({ top: Math.max(0, target - 12), behavior: "smooth" });
-  }, []);
-
-  useLayoutEffect(() => {
-    const a = anchorRef.current;
-    const el = scrollRef.current;
-    if (a && a.win === win) {
-      anchorRef.current = null;
-      const node = el?.querySelector<HTMLElement>(`[data-tkey="${CSS.escape(a.key)}"]`);
-      if (el && node) { const delta = node.getBoundingClientRect().top - a.top; if (Math.abs(delta) > 1) el.scrollTop += delta; }
-    }
-  }, [win]);
-  useLayoutEffect(() => { if (pinned.current && scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, running, startIdx, endIdx, win]);
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const ro = new ResizeObserver(() => { if (pinned.current) el.scrollTop = el.scrollHeight; });
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
-  useEffect(() => {
-    pinned.current = true;
-    setAtBottom(true);
-    setWin({ start: null, end: null });
-    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-  }, [key]);
 
   const contextReset = !!lastTurn?.context_reset && conv?.turns.some((turn) => turn.context_reset);
   const h = cfg.header;
@@ -712,6 +604,51 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
     };
   }, [store, key, isNew, board, openFile]);
 
+  // ── 输入框和内嵌看板的参数：保持引用稳定（输入框、看板都是 memo），智能体流式输出时不跟着每一块重画 ──
+  const saveExecution = useRef(execution.save);
+  saveExecution.current = execution.save;
+  const runControls = useMemo(() => <>
+    <RunControls task={{ id: draftScope, agent: execution.config?.agent ?? agent ?? initialOptions?.agent ?? undefined,
+      model: execution.config?.model, reasoning: execution.config?.reasoning, permission_mode: execution.config?.permission_mode }}
+      agents={execution.config?.agents} caps={executionAgent?.capabilities} defaults={executionAgent?.defaults}
+      showAgent={cfg.composer.agentSelector} showPermission={cfg.composer.executionMode}
+      unavailableReason={batch ? "一次性任务沿用任务执行设置，不支持在对话中修改。" : executionReadOnly ? "当前接入仅支持读取执行设置。" : execution.error ?? (!executionEnabled || execution.loading ? "正在读取执行设置…" : undefined)}
+      disabled={!executionEnabled || composerDisabled || running || batchPending || !!configurationBusy || execution.loading || executionReadOnly}
+      onSetAgent={agent => saveExecution.current({ agent, model: null, reasoning: null, permission_mode: null })}
+      onSetModel={model => saveExecution.current({ model })} onSetReasoning={reasoning => saveExecution.current({ reasoning })}
+      onSetPermission={permission_mode => saveExecution.current({ permission_mode })} />
+    {slots?.composerToolbar}
+  </>, [draftScope, execution.config, agent, initialOptions?.agent, executionAgent, cfg, batch, executionReadOnly, execution.error, executionEnabled, execution.loading,
+    composerDisabled, running, batchPending, configurationBusy, slots?.composerToolbar]);
+  const focusComposer = useCallback(() => chatRef.current?.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus({ preventScroll: true }), []);
+  const composerReferences = useMemo(() => (!!shownRefs?.length || !!viewing) && <div className="cli-refs composer-references" aria-label="下一条消息的引用">
+    {viewing && <ReferenceCard key={`${key}:viewing:${viewing.id}`} className="reference-viewing" title={`正在看${viewing.label}`} text={viewing.text} disabled={composerDisabled || !!configurationBusy} removeLabel={`不带上 ${viewing.label}`} onRemove={() => { if (key) store.dismissViewing(key); focusComposer(); }} />}
+    {(shownRefs ?? []).map(ref => <ReferenceCard key={`${key}:${ref.id}`} title={ref.kind === "message" && ref.label === "引用你的消息" ? "你" : ref.kind === "message" && ref.label === "引用智能体消息" ? "智能体" : ref.label} text={ref.text} disabled={composerDisabled || !!configurationBusy} removeLabel={`不带上 ${ref.label}`} onRemove={() => { if (key) store.removeRef(key, ref.id); focusComposer(); }} />)}
+  </div>, [shownRefs, viewing, key, composerDisabled, configurationBusy, store, focusComposer]);
+  const queuedMessages = useMemo(() => <QueuedMessages scopeKey={key ?? "new"} messages={queued} onCancel={handlers.onCancelQueued} onSendNow={queueSendNow} sendNowUnavailable={queueSendNowHint} onEdit={handlers.onCancelQueued ? editQueued : undefined} attachmentUrl={handlers.attachmentUrl} />,
+    [key, queued, handlers, queueSendNow, queueSendNowHint, editQueued]);
+  const onClearRef = useRef(onClear);
+  onClearRef.current = onClear;
+  // 发出前记下当时是否在执行：在执行时发的消息会排队，不滚到底。
+  const busyRef = useRef(false);
+  busyRef.current = running || batchPending;
+  const sendFromComposer = useCallback(async (text: string) => {
+    if (text.trim() === "/clear" && onClearRef.current) { onClearRef.current(); return; }
+    const sentFrom = key;
+    const wasBusy = busyRef.current;
+    await send(text);
+    if (!wasBusy && latest.current.key === sentFrom) scrollToBottom("auto");
+  }, [key, send, scrollToBottom]);
+  const pauseResume = useMemo(() => cfg.composer.stop && !readOnlyProp && controlTask && jobId && store.client.pauseTask && store.client.resumeTask ? {
+    paused: controlTask.status === "paused",
+    onToggle: async () => {
+      const action = controlTask.status === "paused" ? store.client.resumeTask! : store.client.pauseTask!;
+      await report(action(controlTask.id).then(() => store.refreshJob(jobId, true)), controlTask.status === "paused" ? "继续任务失败" : "暂停任务失败");
+    },
+  } : undefined, [cfg, readOnlyProp, controlTask, jobId, store, report]);
+  const inlineLayout = useMemo(() => (mobileWorkspace ? undefined : { tabsHost, active: workspaceActive, onActivate: showWorkspace, onChat: showChat }),
+    [mobileWorkspace, tabsHost, workspaceActive, showWorkspace, showChat]);
+
   return (
     <FileLinkContext.Provider value={resolveFile}>
     <FileOpenContext.Provider value={openFile}>
@@ -790,7 +727,12 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
                 </div></div>
               )}
               {contextReset && <div className="msg system info"><div className="msg-body">ℹ 执行节点上的会话重建过：从那一轮起是新的 Agent 会话，之前的对话上下文没有带过去（工作区文件还在）。</div></div>}
-              {loading && (
+              {transcriptProblem && (
+                <div className="msg system info cli-transcript-problem" role="status"><div className="msg-body">⚠ {transcriptProblem}
+                  <button className="btn btn-line btn-sm" style={{ marginLeft: 8 }} onClick={rereadTranscript}>重新读取</button>
+                </div></div>
+              )}
+              {loading && !transcriptProblem && (
                 <div aria-hidden>
                   <div className="session-label"><span className="ln" />正在加载会话<span className="ln" /></div>
                   <div className="msg user" style={{ opacity: .7 }}>
@@ -803,9 +745,9 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
                   </div>
                 </div>
               )}
-              {hasAbove && (
+              {hiddenAbove > 0 && (
                 <div ref={topSentinelRef} className="load-older">
-                  <button className="btn btn-ghost btn-sm" onClick={revealEarlier} disabled={loadingOlder}>{loadingOlder ? "正在加载更早的消息…" : `加载更早的消息（还有 ${hiddenAbove + older} 条）`}</button>
+                  <button className="btn btn-ghost btn-sm" onClick={() => void revealEarlier()} disabled={loadingOlder}>{loadingOlder ? "正在加载更早的消息…" : `加载更早的消息（还有 ${hiddenAbove} 条）`}</button>
                 </div>
               )}
               {shown.map((it) =>
@@ -868,36 +810,16 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
             uploadDocument={uploadDocument}
             key={key ?? "new"}
             draft={draftScope}
-            context={(!!shownRefs?.length || !!viewing) && <div className="cli-refs composer-references" aria-label="下一条消息的引用">
-              {viewing && <ReferenceCard key={`${key}:viewing:${viewing.id}`} className="reference-viewing" title={`正在看${viewing.label}`} text={viewing.text} disabled={composerDisabled || !!configurationBusy} removeLabel={`不带上 ${viewing.label}`} onRemove={() => { if (key) store.dismissViewing(key); chatRef.current?.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus({ preventScroll: true }); }} />}
-              {(shownRefs ?? []).map(ref => <ReferenceCard key={`${key}:${ref.id}`} title={ref.kind === "message" && ref.label === "引用你的消息" ? "你" : ref.kind === "message" && ref.label === "引用智能体消息" ? "智能体" : ref.label} text={ref.text} disabled={composerDisabled || !!configurationBusy} removeLabel={`不带上 ${ref.label}`} onRemove={() => { if (key) store.removeRef(key, ref.id); chatRef.current?.querySelector<HTMLTextAreaElement>(".composer textarea")?.focus({ preventScroll: true }); }} />)}
-            </div>}
+            context={composerReferences}
             placeholder={fillTemplate(key && !isNew ? cfg.composer.placeholder : cfg.composer.placeholderNew, { title: convTitle, agent: agentText })}
             disabled={composerDisabled || settingsBusy}
             disabledHint={cfg.composer.placeholderDisabled ? fillTemplate(cfg.composer.placeholderDisabled, { title: convTitle, agent: agentText }) : disabledHint}
             running={running || batchPending}
-            toolbar={<>
-              <RunControls task={{ id: draftScope, agent: execution.config?.agent ?? agent ?? initialOptions?.agent ?? undefined,
-                model: execution.config?.model, reasoning: execution.config?.reasoning, permission_mode: execution.config?.permission_mode }}
-                agents={execution.config?.agents} caps={executionAgent?.capabilities} defaults={executionAgent?.defaults}
-                showAgent={cfg.composer.agentSelector} showPermission={cfg.composer.executionMode}
-                unavailableReason={batch ? "一次性任务沿用任务执行设置，不支持在对话中修改。" : executionReadOnly ? "当前接入仅支持读取执行设置。" : execution.error ?? (!executionEnabled || execution.loading ? "正在读取执行设置…" : undefined)}
-                disabled={!executionEnabled || composerDisabled || running || batchPending || !!configurationBusy || execution.loading || executionReadOnly}
-                onSetAgent={agent => execution.save({ agent, model: null, reasoning: null, permission_mode: null })}
-                onSetModel={model => execution.save({ model })} onSetReasoning={reasoning => execution.save({ reasoning })}
-                onSetPermission={permission_mode => execution.save({ permission_mode })} />
-              {slots?.composerToolbar}
-            </>}
-            queued={<QueuedMessages scopeKey={key ?? "new"} messages={queued} onCancel={handlers.onCancelQueued} onSendNow={queueSendNow} sendNowUnavailable={queueSendNowHint} onEdit={handlers.onCancelQueued ? editQueued : undefined} attachmentUrl={handlers.attachmentUrl} />}
-            onSend={async text => { if (text.trim() === "/clear" && onClear) { onClear(); return; } const sentFrom = key; await send(text); if (!running && !batchPending && latest.current.key === sentFrom) scrollToBottom("auto"); }}
+            toolbar={runControls}
+            queued={queuedMessages}
+            onSend={sendFromComposer}
             onStop={cfg.composer.stop && key && conv && runningTurn(conv) ? stop : undefined}
-            taskControl={cfg.composer.stop && !readOnlyProp && controlTask && jobId && store.client.pauseTask && store.client.resumeTask ? {
-              paused: controlTask.status === "paused",
-              onToggle: async () => {
-                const action = controlTask.status === "paused" ? store.client.resumeTask! : store.client.pauseTask!;
-                await report(action(controlTask.id).then(() => store.refreshJob(jobId, true)), controlTask.status === "paused" ? "继续任务失败" : "暂停任务失败");
-              },
-            } : undefined}
+            taskControl={pauseResume}
             options={composerOptions}
           />
         )}
@@ -907,7 +829,7 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
           readOnly={readOnly || externalBoardOptions?.readOnly} availableTabs={externalBoardOptions?.availableTabs}
           acceptOpen={fileOpen !== "modal" && fileOpen !== "link"} theme={theme}
           visible={workspaceActive} onExpand={showWorkspace} onQuoteToChat={quoteToChat}
-          inlineLayout={mobileWorkspace ? undefined : { tabsHost, active: workspaceActive, onActivate: showWorkspace, onChat: showChat }} />}
+          inlineLayout={inlineLayout} />}
         </WorkspaceDrawer>
       </div>
       </SubagentChatScope>
@@ -915,7 +837,8 @@ function ChatInner({ slots, passiveContext = true, configurationBusy, onClear, j
         <div className="scrim" onClick={(e) => { if (e.target === e.currentTarget) setPopup(null); }}>
           <div className={`modal cli-popup ${popup.kind}`} role="dialog" aria-modal="true" aria-label={popup.kind === "file" ? popup.path : "任务浏览器"}>
             {popup.kind === "file" ? (
-              <FileViewer backend={board} jobId={key} path={popup.path} onClose={() => setPopup(null)} onOpenPath={(p) => setPopup({ kind: "file", path: p })} />
+              <FileViewer backend={board} jobId={key} path={popup.path} onClose={() => setPopup(null)} onOpenPath={(p) => setPopup({ kind: "file", path: p })}
+                resolveMissing={resolvePopupPath} onResolved={(to) => setPopup({ kind: "file", path: to, resolvedFrom: popup.resolvedFrom ?? popup.path })} resolvedFrom={popup.resolvedFrom} />
             ) : (
               <>
                 <div className="cli-fv-h"><span className="cli-fv-name">任务浏览器</span><span className="cli-fv-sp" /><button className="cli-fv-icon" onClick={() => setPopup(null)} title="关闭">{Icon.x()}</button></div>

package/src/chat/Composer.tsx

@@ -1,6 +1,6 @@
 // 输入框与 Operator 共用原件上传。上传完成只保留附件引用，用户发送时才交给 Agent。
 // 没有原件上传适配器的宿主继续使用原有文档文本解析。
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { memo, useEffect, useRef, useState, type ReactNode } from "react";
 import {
   ACCEPT_ATTR, ACCEPTED_LABEL, MAX_MESSAGE_CHARS, PASTE_NAME, charCount, composeMessage, isLongText, readFileText, type TextBlock,
 } from "../core/blocks";
@@ -24,7 +24,8 @@ export interface ComposerOptions {
   queue: boolean;
 }
 
-export function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, taskControl, options, toolbar, queued, context, uploadDocument }: {
+// memo：对话每次重画（流式输出时每来一块一次）不带着输入框重画；参数由 CliChat 保持引用稳定。
+export const Composer = memo(function Composer({ draft, placeholder, disabled, disabledHint, running, onSend, onStop, taskControl, options, toolbar, queued, context, uploadDocument }: {
   /** 草稿按这个键存在 localStorage（一般是对话 id）。 */
   draft: string;
   placeholder: string;
@@ -236,4 +237,4 @@ export function Composer({ draft, placeholder, disabled, disabledHint, running,
       </div>
     </div>
   );
-}
+});

package/src/core/conversation.ts

@@ -68,6 +68,8 @@ export interface ConvState {
   /** 节点转录（Operator 消息）。 */
   msgs: Msg[];
   hasTranscript: boolean;
+  /** 中枢说这段对话记录暂时读不到（transcript_unavailable）；读到转录后清掉。 */
+  transcriptError: string | null;
   /** 节点转录里比 msgs 更早、还没取的条数（实时流只给最新一段；往上翻时 store.loadOlder 分页取）。 */
   older: number;
   nodeRunning: boolean;
@@ -76,6 +78,8 @@ export interface ConvState {
    * 断线重连后补齐时 +1。首次连上不算。看板的「改动」据此重读 diff。
    */
   settled: number;
+  /** 运行中工具执行完的次数（节点 tool_result 事件）：工具可能改了文件，看板的「改动」据此在一轮当中节流重读。 */
+  edits: number;
   resolvedModel: string | null;
   /** 上次刷新任务详情之后，实时流里累计的用量（usage 事件）。 */
   liveUsage: { fresh: number; cacheRead: number };
@@ -97,7 +101,7 @@ export interface ConvState {
 }
 
 export const emptyConv = (key: string): ConvState => ({
-  key, ...parseConvKey(key), job: null, task: null, turns: [], msgs: [], hasTranscript: false, older: 0, nodeRunning: false, settled: 0, resolvedModel: null,
+  key, ...parseConvKey(key), job: null, task: null, turns: [], msgs: [], hasTranscript: false, transcriptError: null, older: 0, nodeRunning: false, settled: 0, edits: 0, resolvedModel: null,
   liveUsage: { fresh: 0, cacheRead: 0 }, stream: "idle", streamError: null, endReason: null, continuedBy: null, localAnswers: {},
   batch: false, batchTask: null, remoteTaskId: null,
 });
@@ -161,7 +165,7 @@ function focusBatchTask(conv: ConvState, task: BatchStreamTask | null): ConvStat
   const batchTask = task ? { ...kept, ...task } : null;
   return {
     ...conv, batch: true, batchTask, task: batchTask ? batchStreamTask(batchTask) : null, remoteTaskId: remote,
-    ...(sameRemote ? {} : { msgs: [], hasTranscript: false, older: 0, nodeRunning: false }),
+    ...(sameRemote ? {} : { msgs: [], hasTranscript: false, transcriptError: null, older: 0, nodeRunning: false }),
   };
 }
 
@@ -190,12 +194,14 @@ export function applyItems(conv: ConvState, items: StreamItem[]): ConvState {
   let next = conv;
   for (const item of items) {
     // 一次性任务：只认看的这个子任务所在的节点对话。
-    if (next.batch && (item.type === "transcript" || item.type === "node") && item.remote_task_id && item.remote_task_id !== next.remoteTaskId) continue;
+    if (next.batch && (item.type === "transcript" || item.type === "node" || item.type === "transcript_unavailable") && item.remote_task_id && item.remote_task_id !== next.remoteTaskId) continue;
     if (item.type === "transcript") {
       // 节点转录全量（连上 / 重连节点时各一次）：整体替换，没变的消息保留对象引用。
       const messages = Array.isArray(item.messages) ? item.messages.map(toMsg) : [];
       const merged = mergeSnapshot(next.msgs, messages, typeof item.older === "number" ? item.older : 0);
-      next = { ...next, msgs: merged.msgs, older: merged.older, hasTranscript: true, nodeRunning: item.running === true };
+      next = { ...next, msgs: merged.msgs, older: merged.older, hasTranscript: true, transcriptError: null, nodeRunning: item.running === true };
+    } else if (item.type === "transcript_unavailable") {
+      if (!next.hasTranscript) next = { ...next, transcriptError: typeof item.error === "string" && item.error ? item.error : "暂时读不到这段对话记录" };
     } else if (item.type === "node") {
       next = applyNodeEvent(next, item.event);
     } else if (item.type === "turn") {
@@ -226,6 +232,12 @@ const localId = (prefix: string) => `${prefix}-${Date.now()}-${++synthetic}`;
 
 /** 节点的一个回合事件。与 Operator 的 handleStreamEvent 同一套规则。 */
 export function applyNodeEvent(conv: ConvState, ev: NodeEvent): ConvState {
+  const next = applyTranscriptEvent(conv, ev);
+  // 工具执行完（不管对不对得上卡片）都算一次：看板的「改动」据此重读。
+  return ev.type === "tool_result" ? { ...next, edits: (next.edits ?? 0) + 1 } : next;
+}
+
+function applyTranscriptEvent(conv: ConvState, ev: NodeEvent): ConvState {
   const e = ev as Record<string, any>;
   const gen = typeof e.generation === "number" ? e.generation : 1;
   const set = (msgs: Msg[]) => ({ ...conv, msgs });