@spzxg/cli-ui 0.4.0 → 0.6.0

package/src/msglist/CliMsgList.tsx

@@ -2,6 +2,7 @@
 // 一张卡片是 center 里的一个对话任务（mode=conversation）。对话任务里开了几个对话时，卡片下面按对话展开，
 // 点哪个对话选哪个（选中值是对话键 "job#task"）；卡片上的「+」在这个对话任务里新开一个对话（同一个工作区）。
 import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import { CliErrorBoundary } from "../ui/ErrorBoundary.js";
 import type { CliEvent, JobEntry } from "../core/store.js";
 import type { CliStoreOptions, CliStore } from "../core/store.js";
 import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider, type ResultHandlers } from "../core/provider.js";
@@ -14,10 +15,11 @@ import { resolveMsgListConfig, type CliMsgListConfig, type ResolvedMsgListConfig
 
 /** onTurnEnd / onConversationEnd：浏览器里从实时流算出的结果通知，不依赖 center 的 callback.url。 */
 export interface CliMsgListProps extends CliStoreOptions, ResultHandlers {
-  /** 列表显示哪些对话（center 的 job_id）。不给就用本地记住的 + （discover 时）从 center 发现的。 */
+  /**
+   * 列表显示哪些对话（center 的 job_id），由宿主按自己的用户 / 业务给。
+   * 不给就是空列表（只显示本页新建的对话）：组件不会去 center 列出这个产品线令牌下的全部对话。
+   */
   jobIds?: string[];
-  /** 没给 jobIds 时，挂载后从 center 发现本产品线的对话。缺省 true。 */
-  discover?: boolean;
   /** 受控的选中项（对话键：job_id，或 "job_id#task_id"）；不给就用共享仓库里的选中（和 cli-chat 联动）。 */
   selectedId?: string | null;
   /**
@@ -30,7 +32,10 @@ export interface CliMsgListProps extends CliStoreOptions, ResultHandlers {
   /** 顶部名称与色块（如业务 / 项目名）。 */
   title?: string;
   color?: string;
-  /** 顶部的说明文字（对应 Operator 的项目上下文）。 */
+  /**
+   * 顶部的项目说明（只显示）。要让智能体读到，创建时用 newConversation.workspace.context，之后用 store.appendContext；
+   * onEditContext 给了就可以点开（宿主自己做编辑框）。
+   */
   context?: string;
   onEditContext?: () => void;
   onCollapse?: () => void;
@@ -49,7 +54,7 @@ export interface CliMsgListProps extends CliStoreOptions, ResultHandlers {
 
 export function CliMsgList(props: CliMsgListProps) {
   const ctx = useCliStoreContext();
-  return withOwnProvider(props, <MsgListInner {...props} inProvider={!!ctx} />, !!ctx);
+  return <CliErrorBoundary component="cli-msglist" theme={props.theme}>{withOwnProvider(props, <MsgListInner {...props} inProvider={!!ctx} />, !!ctx)}</CliErrorBoundary>;
 }
 
 const SEARCH_MIN = 6;
@@ -119,8 +124,28 @@ interface ConvRowView {
   turns: number;
 }
 
-/** 对话任务里的对话：只有一个时返回 []（整张卡片就是它）。 */
+/** 一次性任务里子任务的状态 → 行的样子。 */
+const BATCH_ROW: Record<string, { cls: DotCls; label: string; running?: boolean }> = {
+  blocked: { cls: "r", label: "等待前置" }, queued: { cls: "r", label: "排队中" },
+  dispatching: { cls: "a", label: "运行中", running: true }, running: { cls: "a", label: "运行中", running: true }, verifying: { cls: "a", label: "核对中", running: true },
+  orphaned: { cls: "a", label: "等待节点" }, stalled: { cls: "a", label: "等待节点" }, paused: { cls: "r", label: "已暂停" },
+  succeeded: { cls: "g", label: "已完成" }, failed: { cls: "x", label: "失败" }, cancelled: { cls: "x", label: "已取消" },
+};
+
+/**
+ * 卡片下面的行：对话任务里的对话（只有一个时返回 []，整张卡片就是它）；
+ * 一次性任务（宿主把它的 job_id 放进了列表）有几个子任务时，每个子任务一行——点哪行，对话和看板就看那个子任务。
+ */
 export function convRows(jobId: string, entry: JobEntry | undefined): ConvRowView[] {
+  const job = entry?.job;
+  if (job && job.mode !== "conversation") {
+    const tasks = [...(job.tasks ?? [])].sort((a, b) => (a.seq ?? 0) - (b.seq ?? 0));
+    if (tasks.length <= 1) return [];
+    return tasks.map((t) => {
+      const look = BATCH_ROW[t.status] ?? { cls: "a" as DotCls, label: t.status };
+      return { key: convKey(jobId, t.id), title: t.title, cls: look.cls, label: look.label, running: !!look.running, awaiting: false, activity: look.label, turns: 0 };
+    });
+  }
   const list = entry?.job?.conversation?.conversations ?? [];
   if (list.length <= 1) return [];
   const jobEnded = TERMINAL_JOB.has(entry?.job?.status ?? "");
@@ -166,9 +191,10 @@ function MsgCard({ v, selected, onSelect, show, onNewInJob }: { v: CardView; sel
   );
 }
 
-function ConvRow({ v, selected, onSelect, show }: { v: ConvRowView; selected: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"] }) {
+function ConvRow({ v, selected, following, onSelect, show }: { v: ConvRowView; selected: boolean; following?: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"] }) {
   return (
-    <button className={`cli-conv-row ${selected ? "sel" : ""} ${v.awaiting && show.status ? "awaiting" : ""}`} onClick={onSelect}>
+    <button className={`cli-conv-row ${selected ? "sel" : ""} ${following ? "following" : ""} ${v.awaiting && show.status ? "awaiting" : ""}`} onClick={onSelect}
+      title={following ? "对话和看板正在看这个子任务（跟着最近开始执行的子任务）" : undefined}>
       {show.status && <StatusDot cls={v.cls} running={v.running} awaiting={v.awaiting} title={v.label} />}
       <span className="cli-conv-title">{v.title}</span>
       {show.activity && show.status && <span className="cli-conv-act">{v.activity}</span>}
@@ -190,25 +216,28 @@ function CardSkeleton({ i = 0 }: { i?: number }) {
 type GroupProps = {
   label: string | false; cards: CardView[]; selected: string | null; onSelect: (id: string) => void; show: ResolvedMsgListConfig["card"];
   rows: Record<string, ConvRowView[]>; firstTask: Record<string, string | undefined>; onNewInJob?: (jobId: string) => void;
+  /** 选中一次性任务（不指定子任务）时，对话和看板实际在看的子任务：那一行标出来，三个组件看的是哪个一眼对得上。 */
+  following?: string | null;
   accent?: boolean; collapsible?: boolean; collapsed?: boolean; onToggle?: () => void;
   /** 不分组：只有卡片，没有组标题。 */
   plain?: boolean;
 };
 
-function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewInJob, accent, collapsible, collapsed, onToggle, plain }: GroupProps) {
+function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewInJob, accent, collapsible, collapsed, onToggle, plain, following }: GroupProps) {
   if (!cards.length || label === false) return null;
   const sel = selected ? parseConvKey(selected) : null;
   const list = cards.map((v) => {
     const convs = rows[v.id] ?? [];
     // 选中的是这个对话任务：只有 job_id 指它的第一个对话。
-    const selectedKey = sel?.jobId === v.id ? convKey(v.id, sel.taskId ?? firstTask[v.id]) : null;
+    // 一次性任务：只有 job_id = 跟着最近开始执行的子任务（卡片本身选中），不落在哪一行上。
+    const selectedKey = sel?.jobId === v.id ? (v.batch ? (sel.taskId ? convKey(v.id, sel.taskId) : null) : convKey(v.id, sel.taskId ?? firstTask[v.id])) : null;
     const newing = sel?.jobId === v.id && sel.taskId === NEW_TASK;
     const card = (
       <MsgCard
         key={v.id} v={v} show={show}
         // 只有一个对话：整张卡片就是它；有几个对话：卡片是标题，选中落在下面的行上。
-        selected={!convs.length && !newing && sel?.jobId === v.id}
-        onSelect={() => onSelect(convs.length ? convs.find((c) => c.key === selectedKey)?.key ?? convs[0].key : v.id)}
+        selected={(!convs.length || v.batch) && !newing && sel?.jobId === v.id && (!v.batch || !sel?.taskId)}
+        onSelect={() => onSelect(convs.length && !v.batch ? convs.find((c) => c.key === selectedKey)?.key ?? convs[0].key : v.id)}
         onNewInJob={onNewInJob && !v.batch && v.group !== "done" && v.group !== "cancelled" ? () => onNewInJob(v.id) : undefined}
       />
     );
@@ -217,7 +246,7 @@ function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewI
       <div key={v.id} className="cli-job-group">
         {card}
         <div className="cli-conv-rows">
-          {convs.map((c) => <ConvRow key={c.key} v={c} selected={c.key === selectedKey} onSelect={() => onSelect(c.key)} show={show} />)}
+          {convs.map((c) => <ConvRow key={c.key} v={c} selected={c.key === selectedKey} following={!selectedKey && v.batch && sel?.jobId === v.id && c.key === (following ? convKey(v.id, following) : null)} onSelect={() => onSelect(c.key)} show={show} />)}
           {newing && <div className="cli-conv-row sel"><span className="cli-conv-title">新对话 · 发第一条消息后开始</span></div>}
         </div>
       </div>
@@ -243,7 +272,7 @@ function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewI
   );
 }
 
-function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, title = "对话", color = "#b8613f", context, onEditContext, onCollapse, pollMs = 10_000, config, theme = "light", className, style, width, onEvent, onTurnEnd, onConversationEnd, onCallback, inProvider }: CliMsgListProps & { inProvider: boolean }) {
+function MsgListInner({ jobIds, selectedId, onSelect, onNew, title = "对话", color = "#b8613f", context, onEditContext, onCollapse, pollMs = 10_000, config, theme = "light", className, style, width, onEvent, onTurnEnd, onConversationEnd, onCallback, inProvider }: CliMsgListProps & { inProvider: boolean }) {
   useComponentEvents(onEvent, { onTurnEnd, onConversationEnd, onCallback }, inProvider);
   const configKey = JSON.stringify(config ?? {});
   const cfg = useMemo(() => resolveMsgListConfig(config), [configKey]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -255,6 +284,7 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
   const listLoading = useCliState((s) => s.listLoading);
   const listError = useCliState((s) => s.listError);
   const selected = selectedId !== undefined ? selectedId : shared;
+  const following = useCliState((s) => (selected && !parseConvKey(selected).taskId ? s.convs[selected]?.task?.id ?? null : null));
   const [query, setQuery] = useState("");
   const [doneCollapsed, setDoneCollapsed] = useState(false);
   const [cancelledCollapsed, setCancelledCollapsed] = useState(true);
@@ -269,12 +299,9 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
     if (jobId && !ids.includes(jobId)) store.addJob(jobId);
   }, [selected, ids, store]);
 
-  // 首次：刷新已知的；没给 jobIds 时再去 center 发现。
+  // 首次：拉一遍列表里已有的（宿主给的 jobIds）。
   useEffect(() => {
-    void store.refreshAll({ all: true }).then(() => {
-      if (!jobIds && discover) return store.discover().finally(() => setDiscovered(true));
-      setDiscovered(true);
-    });
+    void store.refreshAll({ all: true }).finally(() => setDiscovered(true));
   }, [store]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -301,11 +328,12 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
   const newInJob = cfg.card.newInJob ? (jobId: string) => select(convKey(jobId, NEW_TASK)) : undefined;
   const rows = useMemo(() => Object.fromEntries(ids.map((id) => [id, convRows(id, jobs[id])])), [ids, jobs]);
   const firstTask = useMemo(() => Object.fromEntries(ids.map((id) => [id, jobs[id]?.job?.conversation?.conversations?.[0]?.task_id ?? jobs[id]?.job?.tasks?.[0]?.id])), [ids, jobs]);
-  const groupProps = { selected, onSelect: select, show: cfg.card, rows, firstTask, onNewInJob: newInJob };
+  const groupProps = { selected, onSelect: select, show: cfg.card, rows, firstTask, onNewInJob: newInJob, following };
   const startNew = () => { if (onNew) onNew(); else store.select(null); };
   const firstLoad = !discovered && !cards.length;
   const showRow = h.show && (h.title || h.newButton || h.refresh || !!onCollapse);
-  const showContext = h.show && h.context && (context !== undefined || !!onEditContext);
+  // 只显示：有文字、或者宿主给了编辑入口时才出现（发给智能体的项目背景见 newConversation.workspace.context 和 store.appendContext）。
+  const showContext = h.show && h.context && (!!context || !!onEditContext);
   const showBanner = showRow || showContext;
 
   return (
@@ -325,7 +353,7 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
           </div>}
           {showContext && (
             <button className="pb-ctx" onClick={onEditContext} style={onEditContext ? undefined : { cursor: "default" }}>
-              <div className={`ctx-txt ${context ? "" : "empty-ctx"}`}>{context || "添加上下文 —— 简介、背景与规范，会附加到每个对话前。"}</div>
+              <div className={`ctx-txt ${context ? "" : "empty-ctx"}`}>{context || "添加项目背景 —— 简介、范围与规范"}</div>
               {onEditContext && <div className="ctx-edit">{Icon.edit()} 上下文</div>}
             </button>
           )}

package/src/styles.css

@@ -124,6 +124,12 @@
 .cli-ui .cli-fv-csv th{position:sticky;top:0;background:var(--surface-2);font-weight:600;}
 .cli-ui .cli-fv-note{padding:18px 16px;font-size:13px;color:var(--ink-3);line-height:1.7;}
 .cli-ui .cli-fv-note.err{color:var(--red);}
+.cli-ui .cli-zip-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
+.cli-ui .cli-zip-meter{flex:1 1 100%;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden;}
+.cli-ui .cli-zip-meter>span{display:block;height:100%;background:var(--accent);transition:width .2s;}
+.cli-ui .cli-fv-trunc.cli-files-err{color:var(--red);}
+.cli-ui .cli-fv-slow{margin-top:6px;font-size:12px;color:var(--ink-3);}
+.cli-ui .cli-fv-img-err{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;color:var(--red);font-size:13px;}
 .cli-ui .cli-fv-trunc{padding:6px 14px;font-size:12px;color:var(--amber);background:var(--surface-2);border-bottom:1px solid var(--line-2);}
 
 /* 对话里弹窗打开的文件 / 浏览器 */
@@ -139,8 +145,20 @@
 /* 键盘 / 输入法接收框：不放到屏幕外（focus 时会把宿主的滚动容器拖过去），透明盖在左上角，不挡点击。 */
 .cli-ui .bp-keys{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;resize:none;border:0;padding:0;}
 
+/* 网页弹出的 alert / confirm / prompt：画面里看不到，盖在画面上处理 */
+.cli-ui .bp-dialog{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.28);z-index:2;}
+.cli-ui .bp-dialog-box{width:min(360px,calc(100% - 24px));background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:14px 16px;display:flex;flex-direction:column;gap:10px;}
+.cli-ui .bp-dialog-t{font-size:12px;color:var(--ink-3);}
+.cli-ui .bp-dialog-m{font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:40vh;overflow:auto;}
+.cli-ui .bp-dialog-in{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;}
+.cli-ui .bp-dialog-hint{font-size:12px;color:var(--amber);}
+.cli-ui .bp-dialog-a{display:flex;justify-content:flex-end;gap:8px;}
+
 /* ── 窄容器（手机、很窄的侧栏）：预览工具栏换行，次要信息收起 ── */
 .cli-ui .cli-fv{container-type:inline-size;}
+.cli-ui .cli-fv{position:relative;}
+.cli-ui .cli-fv-selq{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 6px));display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:12px;white-space:nowrap;color:#fff;background:var(--ink);box-shadow:var(--sh-2, 0 4px 14px rgba(0,0,0,.18));}
+.cli-ui .cli-fv-selq svg{width:12px;height:12px;}
 .cli-ui .cli-fv-h{flex-wrap:wrap;row-gap:4px;}
 @container (max-width:380px){
   .cli-ui .cli-fv-meta{display:none;}
@@ -172,3 +190,86 @@
 .cli-ui .cli-conv-row.awaiting{box-shadow:inset 2px 0 0 var(--blue);}
 .cli-ui .cli-conv-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .cli-ui .cli-conv-act{font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap;}
+
+/* 组件出错时只影响自己那一块 */
+.cli-ui.cli-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;height:100%;background:var(--panel);color:var(--ink-2);font-size:13px;}
+.cli-ui .cli-error-t{font-weight:600;color:var(--ink);}
+.cli-ui .cli-error-m{color:var(--ink-3);font-family:var(--mono);font-size:11.5px;word-break:break-all;}
+
+/* ── 可拖动分栏（CliSplit / <cli-split>，见 layout/split.ts） ── */
+.cli-split{display:flex;align-items:stretch;width:100%;height:100%;min-height:0;overflow:hidden;}
+.cli-split > .cli-split-pane{min-height:0;height:100%;overflow:hidden;}
+.cli-split > .cli-split-pane > *{height:100%;}
+/* 拖动条不占宽度：9px 的手柄压在两栏的分界线上，中间 1px 的线悬停 / 聚焦 / 拖动时变色 */
+.cli-split > .cli-split-gutter{flex:0 0 9px;margin:0 -4px;position:relative;z-index:6;cursor:col-resize;touch-action:none;outline:none;}
+.cli-split > .cli-split-gutter[hidden]{display:none;}
+.cli-split > .cli-split-gutter::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:transparent;transition:background .12s,width .12s,left .12s;}
+.cli-split > .cli-split-gutter:hover::after,
+.cli-split > .cli-split-gutter:focus-visible::after,
+.cli-split.cli-split-dragging > .cli-split-gutter:active::after{left:3px;width:3px;background:#b8613f;}
+.cli-split.cli-split-dragging{cursor:col-resize;user-select:none;}
+/* 拖动时 iframe（HTML / PDF 预览）不吃指针事件，否则拖过它就断了 */
+.cli-split.cli-split-dragging iframe{pointer-events:none;}
+cli-split{display:block;}
+
+/* 工具卡片的预览：窄栏里按行换行，不出横向滚动条（diff 保持原样对齐） */
+.cli-ui .tpeek-pre:not(.diff){white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:hidden;}
+/* 一次性任务整体选中时，对话和看板正在跟的那个子任务 */
+.cli-ui .cli-conv-row.following{border-color:var(--accent);border-style:dashed;background:var(--surface);}
+
+/* 浏览器放大：盖住页面，画面按窗口大小显示（接管后登录、填验证码） */
+.cli-ui.bp-backdrop{position:fixed;inset:0;background:rgba(20,23,28,.45);z-index:999;}
+.cli-ui .bp.bp-big{position:fixed;inset:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;background:var(--panel);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:auto;--cli-browser-max-h:calc(100vh - 230px);}
+.cli-ui .bp.bp-big .bp-viewer{flex:1 1 auto;min-height:0;}
+.cli-ui .bp-head .bp-zoom{white-space:nowrap;}
+
+/* 续等浏览器那边的人：收成一行 */
+.cli-ui .cli-wait-fold{display:flex;align-items:center;gap:8px;width:100%;margin:6px 0;padding:7px 12px;border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);color:var(--ink-3);font-size:12.5px;text-align:left;cursor:pointer;}
+.cli-ui .cli-wait-fold:hover{color:var(--ink-2);border-color:var(--accent);}
+.cli-ui .cli-wait-more{margin-left:auto;font-size:11.5px;color:var(--accent);}
+
+/* 文件预览放大：盖住页面 */
+.cli-ui.cli-fv-backdrop{position:fixed;inset:0;background:rgba(20,23,28,.45);z-index:999;}
+.cli-ui .cli-fv.cli-fv-big{position:fixed;inset:20px;z-index:1000;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;}
+.cli-ui .cli-fv-zoom{font-size:14px;line-height:1;}
+/* 图片缩放 */
+.cli-ui .cli-fv-imgwrap{display:flex;flex-direction:column;min-height:100%;}
+.cli-ui .cli-fv-imgbar{display:flex;align-items:center;gap:4px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:1;}
+.cli-ui .cli-fv-imgpct{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:44px;text-align:center;}
+.cli-ui .cli-fv-imgwrap .cli-fv-img{flex:1;}
+.cli-ui .cli-fv-img.zoomed{display:block;overflow:auto;}
+.cli-ui .cli-fv-img.zoomed img{display:block;margin:0 auto;}
+
+/* 看板引用到对话：输入框上方的小卡片 */
+.cli-ui .cli-refs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px 0;font-size:12px;}
+.cli-ui .cli-refs-t{display:inline-flex;align-items:center;gap:4px;color:var(--ink-3);}
+.cli-ui .cli-refs-t svg{width:13px;height:13px;}
+.cli-ui .cli-ref{display:inline-flex;align-items:center;gap:4px;max-width:260px;padding:3px 4px 3px 9px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);}
+.cli-ui .cli-ref-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .cli-ref-x{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--ink-3);}
+.cli-ui .cli-ref-x:hover{background:var(--surface-2);color:var(--ink);}
+.cli-ui .cli-ref-x svg{width:10px;height:10px;}
+.cli-ui .cli-ref.auto{border-style:dashed;background:transparent;}
+.cli-ui .cli-ref-k{color:var(--ink-3);flex:none;}
+.cli-ui .cli-ref.sel .cli-ref-l::before{content:"“";}
+
+/* 看板页签：文件可以开多个（可关），页签多了横向滚动，刷新 / 收起按钮固定在右边。 */
+.cli-ui .cli-board .rail-tabs{align-items:stretch;}
+.cli-ui .rail-tabs-scroll{flex:1 1 auto;min-width:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;}
+.cli-ui .rail-tabs-scroll::-webkit-scrollbar{display:none;}
+.cli-ui .rail-tabs-scroll .rail-tab{flex:none;}
+.cli-ui .rail-ftab{display:inline-flex;align-items:center;gap:2px;max-width:180px;padding-right:4px;letter-spacing:0;font-family:inherit;font-size:12px;}
+.cli-ui .rail-ftab-l{display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;background:none;border:0;padding:0;cursor:pointer;font:inherit;}
+.cli-ui .rail-ftab-l svg{width:12px;height:12px;flex:none;}
+.cli-ui .rail-ftab-x{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;border-radius:4px;border:0;background:none;color:var(--ink-4);cursor:pointer;opacity:.6;}
+.cli-ui .rail-ftab:hover .rail-ftab-x,.cli-ui .rail-ftab.on .rail-ftab-x{opacity:1;}
+.cli-ui .rail-ftab-x:hover{background:var(--surface-2);color:var(--ink);}
+.cli-ui .rail-ftab-x svg{width:9px;height:9px;}
+.cli-ui .bp-toast-btn{margin-left:8px;padding:1px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:transparent;color:inherit;font-size:12px;cursor:pointer;}
+.cli-ui .bp-toast-btn:hover{background:rgba(255,255,255,.15);}
+.cli-ui .bp-toast{max-width:calc(100% - 24px);white-space:normal;text-align:center;}
+/* 预览里的长链接、长单词（报告里常见的超长搜索地址）换行，不撑出看板。 */
+.cli-ui .cli-fv-md{overflow-wrap:anywhere;}
+.cli-ui .cli-fv-md pre,.cli-ui .cli-fv-md table{overflow-wrap:normal;}
+.cli-ui .cli-refs.cli-ctxs+.cli-refs{padding-top:4px;}
+.cli-ui .cli-ref.ctx{padding-right:9px;background:var(--surface-2);border-color:var(--line-2);}

package/src/ui/ErrorBoundary.tsx

@@ -0,0 +1,38 @@
+// 组件嵌在业务方的页面里：组件自己渲染出错时只影响它自己那一块（显示「出错了，重试」），不能把宿主整个页面带白屏。
+// 出错时在 window 上发一个 "cli-ui-error" 事件（detail: { component, error }），宿主可以接到自己的监控里。
+import { Component, type ReactNode } from "react";
+
+interface Props { component: string; theme?: "light" | "dark"; children: ReactNode }
+interface State { error: Error | null; attempt: number }
+
+export class CliErrorBoundary extends Component<Props, State> {
+  state: State = { error: null, attempt: 0 };
+
+  static getDerivedStateFromError(error: unknown): Partial<State> {
+    return { error: error instanceof Error ? error : new Error(String(error)) };
+  }
+
+  componentDidCatch(error: unknown) {
+    console.error(`[@spzxg/cli-ui] <${this.props.component}> 渲染出错`, error);
+    try {
+      window.dispatchEvent(new CustomEvent("cli-ui-error", { detail: { component: this.props.component, error } }));
+    } catch { /* 没有 window（服务端渲染）就不发 */ }
+  }
+
+  render() {
+    const { error, attempt } = this.state;
+    if (!error) return <ErrorKey key={attempt}>{this.props.children}</ErrorKey>;
+    return (
+      <div className="cli-ui cli-error" data-theme={this.props.theme ?? "light"} role="alert">
+        <div className="cli-error-t">这一块暂时显示不了</div>
+        <div className="cli-error-m">{error.message || "未知错误"}</div>
+        <button className="btn btn-line btn-sm" onClick={() => this.setState((s) => ({ error: null, attempt: s.attempt + 1 }))}>重试</button>
+      </div>
+    );
+  }
+}
+
+/** 重试时换 key：子树整个重建，不带着出错前的状态。 */
+function ErrorKey({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/src/ui/TextBlock.tsx

@@ -22,7 +22,7 @@ export const TextBlockCard = memo(function TextBlockCard({ block, onRemove }: {
   return (
     <div className={`cli-block ${open ? "open" : ""}`}>
       <div className="cli-block-h">
-        <span className="cli-block-ic">{block.kind === "file" ? Icon.doc() : Icon.clip()}</span>
+        <span className="cli-block-ic">{block.kind === "file" ? Icon.doc() : block.kind === "context" ? Icon.board() : block.kind === "background" ? Icon.flag() : Icon.clip()}</span>
         <span className="cli-block-name" title={block.name}>{block.name}</span>
         <span className="cli-block-meta">{fmtCount(chars)} 字 · {fmtCount(lines)} 行</span>
         <span className="cli-block-sp" />

package/src/ui/transcriptModel.ts

@@ -58,37 +58,94 @@ export function hasOpenAsk(messages: Msg[], scan = 400): boolean {
 }
 
 /**
- * 把（重连时的）全量转录合进已有的：没变的消息保持对象引用，memo 的行就不会重渲染（不会重新解析 markdown）。
+ * 把（重连时的）快照合进已有的：没变的消息保持对象引用，memo 的行就不会重渲染（不会重新解析 markdown）。
+ * 快照只是最新一段（older > 0）时，保留这个页面已经往上翻出来的更早的消息（与 Operator 的 mergeSnapshot 一致）。
  */
-export function mergeSnapshot(prev: Msg[] | undefined, committed: Msg[]): Msg[] {
+export function mergeSnapshot(prev: Msg[] | undefined, committed: Msg[], older = 0): { msgs: Msg[]; older: number } {
   const byId = new Map<string, Msg>();
   for (const m of prev ?? []) byId.set(m.id, m);
-  return committed.map((m) => {
+  const fresh = committed.map((m) => {
     const p = byId.get(m.id);
     if (!p || p.role !== m.role || p.content !== m.content || p.generation !== m.generation) return m;
     return p.ts === m.ts ? p : { ...p, ts: m.ts };
   });
+  let kept: Msg[] = [];
+  if (prev && fresh.length && older > 0) {
+    const at = prev.findIndex((m) => m.id === fresh[0].id);
+    // 只留落过库的（带时间的）：本地补的说明行随旧视图一起作废。
+    if (at > 0) kept = prev.slice(0, at).filter((m) => m.role !== "queued" && m.ts != null);
+  }
+  return { msgs: [...kept, ...fresh], older: Math.max(0, older - kept.length) };
+}
+
+/** 往上翻取到的一页更早的消息接在最前面（已经有的跳过）。 */
+export function prependOlder(prev: Msg[], page: Msg[]): Msg[] {
+  const have = new Set(prev.map((m) => m.id));
+  const add = page.filter((m) => !have.has(m.id));
+  return add.length ? [...add, ...prev] : prev;
 }
 
 export type TranscriptItem =
   | { kind: "label"; key: string; n: number; current: boolean }
   | { kind: "break"; key: string; summary: string }
-  | { kind: "msg"; key: string; m: Msg; initial: boolean; hideWho: boolean };
+  | { kind: "msg"; key: string; m: Msg; initial: boolean; hideWho: boolean }
+  /** 收起的「等你在浏览器里操作」：AI 每 ~50 秒续等一次，每次都是「思考 + 工具 + 一句话」，几分钟就刷满一屏。 */
+  | { kind: "fold"; key: string; msgs: Msg[]; waits: number };
+
+const WAIT_TOOL = /browser_handoff|browser_ask_user/;
+/** 续等的结果：用户还没做完 / 还没填。 */
+const STILL_WAITING = /hasn'?t (finished|answered|responded)|not (finished|answered|done) yet|still waiting|keep waiting|wait_only|还没(有)?(完成|回答|填)|继续等/i;
 
-/** 转录展开成扁平的行（会话标签、/clear 分隔、消息），界面可以只渲染其中一个窗口。 */
-export function buildTranscriptItems(messages: Msg[]): TranscriptItem[] {
+/** 续等浏览器那边的人（browser_handoff / browser_ask_user 带 wait_only，或结果是「还没好」）。第一次请求不算。 */
+export function isWaitCall(m: Msg): boolean {
+  if (m.role !== "tool") return false;
+  const d = toolDataOf(m);
+  if (!WAIT_TOOL.test(d.title)) return false;
+  if (d.result === undefined) return /wait_only/.test(d.detail ?? "");
+  return STILL_WAITING.test(d.result);
+}
+const isThinking = (m: Msg) => m.role === "tool" && /^\W*thinking\b/i.test(toolDataOf(m).title);
+/** 两次续等之间的消息：智能体的一句话、思考。 */
+const between = (m: Msg) => m.role === "assistant" || isThinking(m);
+
+/**
+ * 一段连续的续等（中间只夹着思考和一句话）：最后一次照常显示（它的状态是最新的），前面的收成一行。
+ * 返回收起的那段的结束位置（不含）和收起了几次续等；不到两次续等不收，返回 null。
+ */
+function waitRun(msgs: Msg[], start: number): { end: number; waits: number } | null {
+  let last = start;
+  let waits = 1;
+  for (let i = start + 1; i < msgs.length; i++) {
+    if (isWaitCall(msgs[i])) { last = i; waits++; continue; }
+    if (!between(msgs[i])) break;
+  }
+  return waits >= 2 ? { end: last, waits: waits - 1 } : null;
+}
+
+/**
+ * 转录展开成扁平的行（会话标签、/clear 分隔、消息），界面可以只渲染其中一个窗口。
+ * hasOlder：更早的消息还没取，第一条就不一定是它那个会话的开场。
+ */
+export function buildTranscriptItems(messages: Msg[], hasOlder = false): TranscriptItem[] {
   const sessions = buildSessions(messages);
   const items: TranscriptItem[] = [];
   sessions.forEach((s, si) => {
     if (si > 0 && s.summaryBefore) items.push({ kind: "break", key: `b-${s.n}`, summary: s.summaryBefore });
     items.push({ kind: "label", key: `s-${s.n}`, n: s.n, current: si === sessions.length - 1 });
-    s.messages.forEach((m, mi) => {
+    for (let mi = 0; mi < s.messages.length; mi++) {
+      const m = s.messages[mi];
+      const run = isWaitCall(m) ? waitRun(s.messages, mi) : null;
+      if (run) {
+        items.push({ kind: "fold", key: `f-${m.id}`, msgs: s.messages.slice(mi, run.end), waits: run.waits });
+        mi = run.end - 1;
+        continue;
+      }
       const prev = s.messages[mi - 1];
       // 一段连续的智能体输出（文字 → 工具 → 文字）只显示一次头像行
       const hideWho = m.role === "assistant" && !!prev && (prev.role === "assistant" || prev.role === "tool");
-      const initial = mi === 0 && m.role === "user";
+      const initial = mi === 0 && m.role === "user" && !(si === 0 && hasOlder);
       items.push({ kind: "msg", key: m.id, m, initial, hideWho });
-    });
+    }
   });
   return items;
 }