@spzxg/cli-ui 0.1.0 → 0.3.1

package/src/msglist/CliMsgList.tsx

@@ -1,24 +1,30 @@
 // cli-msglist：消息对话列表。界面取自 Operator 的任务栏（TasksColumn 的列表视图，不做看板），
-// 一张卡片是 center 里的一个对话任务（mode=conversation）。
+// 一张卡片是 center 里的一个对话任务（mode=conversation）。对话任务里开了几个对话时，卡片下面按对话展开，
+// 点哪个对话选哪个（选中值是对话键 "job#task"）；卡片上的「+」在这个对话任务里新开一个对话（同一个工作区）。
 import { useEffect, useMemo, useState, type CSSProperties } from "react";
 import type { CliEvent, JobEntry } from "../core/store.js";
-import type { ConversationCallback } from "../core/types.js";
 import type { CliStoreOptions, CliStore } from "../core/store.js";
-import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider } from "../core/provider.js";
-import { TERMINAL_JOB } from "../core/conversation.js";
+import { useCliState, useCliStore, useCliStoreContext, useComponentEvents, withOwnProvider, type ResultHandlers } from "../core/provider.js";
+import { convKey, NEW_TASK, parseConvKey, TERMINAL_JOB } from "../core/conversation.js";
+import type { ConversationInfo } from "../core/types.js";
 import { Icon } from "../ui/icons.js";
 import { agentLabel, relTime, toMs } from "../ui/format.js";
 import { AgentBadge, ErrNote, Skel, StatusDot, type DotCls } from "../ui/shared.js";
 import { resolveMsgListConfig, type CliMsgListConfig, type ResolvedMsgListConfig } from "../core/config.js";
 
-export interface CliMsgListProps extends CliStoreOptions {
+/** onTurnEnd / onConversationEnd：浏览器里从实时流算出的结果通知，不依赖 center 的 callback.url。 */
+export interface CliMsgListProps extends CliStoreOptions, ResultHandlers {
   /** 列表显示哪些对话（center 的 job_id）。不给就用本地记住的 + （discover 时）从 center 发现的。 */
   jobIds?: string[];
   /** 没给 jobIds 时，挂载后从 center 发现本产品线的对话。缺省 true。 */
   discover?: boolean;
-  /** 受控的选中项；不给就用共享仓库里的选中（和 cli-chat 联动）。 */
+  /** 受控的选中项（对话键：job_id，或 "job_id#task_id"）；不给就用共享仓库里的选中（和 cli-chat 联动）。 */
   selectedId?: string | null;
-  onSelect?: (jobId: string) => void;
+  /**
+   * 选了一个对话。id 是对话键：只有一个对话的对话任务是 job_id；对话任务里的某个对话是 "job_id#task_id"；
+   * 点了「+」是 "job_id#new"（在这个对话任务里新开对话）。ref 是拆开的 jobId / taskId（新开时 taskId 为 "new"）。
+   */
+  onSelect?: (id: string, ref: { jobId: string; taskId: string | null }) => void;
   /** 点「新对话」：缺省清空选中，cli-chat 会显示空白的新对话。 */
   onNew?: () => void;
   /** 顶部名称与色块（如业务 / 项目名）。 */
@@ -37,8 +43,7 @@ export interface CliMsgListProps extends CliStoreOptions {
   /** 界面配置：顶部栏、搜索、卡片内容、分组标题与空状态文案，见 core/config.ts。 */
   config?: CliMsgListConfig;
   onEvent?: (event: CliEvent) => void;
-  /** 前端回调：载荷与 center 回调 conversation_turn / conversation_closed 的请求体同名同义。 */
-  onCallback?: (payload: ConversationCallback) => void;
+
   store?: CliStore;
 }
 
@@ -48,6 +53,7 @@ export function CliMsgList(props: CliMsgListProps) {
 }
 
 const SEARCH_MIN = 6;
+const BATCH_ACTIVE = new Set(["dispatching", "running", "verifying"]);
 
 interface CardView {
   id: string;
@@ -62,6 +68,8 @@ interface CardView {
   agent: string | null;
   turns: number;
   updatedAt: number;
+  /** 一次性任务（含续派，宿主把它的 job_id 放进了列表）：只能查看，不能在里面新开对话。 */
+  batch: boolean;
   loading: boolean;
   error: string | null;
 }
@@ -70,7 +78,8 @@ export function cardView(id: string, entry: JobEntry | undefined): CardView {
   const job = entry?.job;
   const conv = job?.conversation;
   const updatedAt = toMs(conv?.last_activity_at) ?? 0;
-  const base = { id, title: job?.title ?? id, desc: entry?.firstInput ?? "", agent: job?.tasks?.[0]?.agent ?? conv?.last_turn?.agent ?? null, turns: conv?.turns ?? 0, updatedAt, loading: !job && !entry?.error, error: entry?.error ?? null };
+  const batch = !!job && job.mode !== "conversation";
+  const base = { id, title: job?.title ?? id, desc: entry?.firstInput ?? "", agent: job?.tasks?.[0]?.agent ?? conv?.last_turn?.agent ?? null, turns: conv?.turns ?? 0, updatedAt, batch, loading: !job && !entry?.error, error: entry?.error ?? null };
   const status = job?.status ?? "queued";
   if (TERMINAL_JOB.has(status)) {
     const cancelled = status === "cancelled";
@@ -78,19 +87,55 @@ export function cardView(id: string, entry: JobEntry | undefined): CardView {
     const label = cancelled ? "已取消" : failed ? "已失败" : "已完成";
     return { ...base, cls: cancelled || failed ? "x" : "g", label, running: false, awaiting: false, group: cancelled ? "cancelled" : "done", activity: updatedAt ? `${label} · ${relTime(updatedAt)}` : label };
   }
-  const running = !!conv?.running_turn;
+  // 一次性任务：有子任务在节点上跑就是运行中，没有轮次、不会停在提问上。
+  if (batch) {
+    const running = (job?.tasks ?? []).some((task) => BATCH_ACTIVE.has(task.status));
+    return { ...base, cls: "a", label: "进行中", running, awaiting: false, group: "active", activity: running ? "运行中 · 工作中" : status === "queued" ? "等待执行节点" : "进行中" };
+  }
+  // 开了几个对话：任何一个在跑就算在跑，任何一个停在提问上就要你处理（关掉的对话不算）。
+  const open = (conv?.conversations ?? []).filter((c) => !c.closed);
+  const many = (conv?.conversations?.length ?? 0) > 1;
+  const running = many ? open.some((c) => c.running_turn) : !!conv?.running_turn;
   // 上一轮以提问结束、后面没有新消息：等你回答。
-  const awaiting = !running && !conv?.queued_turns && !!conv?.last_turn?.asked;
+  const awaiting = many ? open.some((c) => !c.running_turn && !c.queued_turns && !!c.last_turn?.asked) : !running && !conv?.queued_turns && !!conv?.last_turn?.asked;
   if (awaiting) return { ...base, cls: "a", label: "需要你处理", running, awaiting, group: "needs", activity: updatedAt ? `等你处理 · ${relTime(updatedAt)}` : "等你处理" };
   if (running) return { ...base, cls: "a", label: "进行中", running, awaiting, group: "active", activity: "运行中 · 工作中" };
   const waiting = conv?.queued_turns ? `${conv.queued_turns} 条排队中` : status === "queued" ? "等待执行节点" : updatedAt ? relTime(updatedAt) : "未开始";
   return { ...base, cls: "a", label: "进行中", running, awaiting, group: "active", activity: waiting };
 }
 
-function MsgCard({ v, selected, onSelect, show }: { v: CardView; selected: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"] }) {
+/** 对话任务里的一个对话（对话任务开了几个对话时，卡片下面的一行）。 */
+interface ConvRowView {
+  key: string;
+  title: string;
+  cls: DotCls;
+  label: string;
+  running: boolean;
+  awaiting: boolean;
+  activity: string;
+  turns: number;
+}
+
+/** 对话任务里的对话：只有一个时返回 []（整张卡片就是它）。 */
+export function convRows(jobId: string, entry: JobEntry | undefined): ConvRowView[] {
+  const list = entry?.job?.conversation?.conversations ?? [];
+  if (list.length <= 1) return [];
+  const jobEnded = TERMINAL_JOB.has(entry?.job?.status ?? "");
+  return list.map((c: ConversationInfo) => {
+    const base = { key: convKey(jobId, c.task_id), title: c.title, turns: c.turns };
+    if (c.closed || jobEnded) return { ...base, cls: "g" as DotCls, label: "已结束", running: false, awaiting: false, activity: "已结束" };
+    const running = c.running_turn;
+    const awaiting = !running && !c.queued_turns && !!c.last_turn?.asked;
+    if (awaiting) return { ...base, cls: "a" as DotCls, label: "需要你处理", running, awaiting, activity: "等你处理" };
+    if (running) return { ...base, cls: "a" as DotCls, label: "进行中", running, awaiting, activity: "运行中" };
+    return { ...base, cls: "a" as DotCls, label: "进行中", running, awaiting, activity: c.queued_turns ? `${c.queued_turns} 条排队中` : "空闲" };
+  });
+}
+
+function MsgCard({ v, selected, onSelect, show, onNewInJob }: { v: CardView; selected: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"]; onNewInJob?: () => void }) {
   if (v.loading) return <CardSkeleton i={v.id.length} />;
   const foot = show.activity || (show.turns && v.turns > 0);
-  return (
+  const card = (
     <button className={`task ${selected ? "sel" : ""} ${v.awaiting && show.status ? "awaiting" : ""}`} onClick={onSelect} title={v.error ?? undefined}>
       <div className="task-top">
         {show.status && <StatusDot cls={v.cls} running={v.running} awaiting={v.awaiting} title={v.label} />}
@@ -103,10 +148,29 @@ function MsgCard({ v, selected, onSelect, show }: { v: CardView; selected: boole
       {foot && <div className="task-foot">
         {show.activity && <span className="activity">{v.awaiting ? <span style={{ color: "var(--blue)" }}>●</span> : v.running ? <span style={{ color: "var(--amber)" }}>●</span> : null}{v.activity}</span>}
         <span className="spacer" />
-        {show.turns && v.turns > 0 && <span className="activity">{v.turns} 轮对话</span>}
+        {show.turns && v.turns > 0 && <span className="activity">{v.turns} 条消息</span>}
       </div>}
     </button>
   );
+  if (!onNewInJob) return card;
+  // 「+」不能放进卡片按钮里（按钮不能嵌套）：叠在卡片右下角。
+  return (
+    <div className="cli-job-card">
+      {card}
+      <button className="icon-btn cli-new-in-job" onClick={onNewInJob} title="在这个任务里新开一个对话（共用同一个工作区）" aria-label="在这个任务里新开一个对话">{Icon.plus()}</button>
+    </div>
+  );
+}
+
+function ConvRow({ v, selected, onSelect, show }: { v: ConvRowView; selected: boolean; onSelect: () => void; show: ResolvedMsgListConfig["card"] }) {
+  return (
+    <button className={`cli-conv-row ${selected ? "sel" : ""} ${v.awaiting && show.status ? "awaiting" : ""}`} onClick={onSelect}>
+      {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 && <span className="cli-conv-act">{v.activity}</span>}
+      {show.turns && v.turns > 0 && <span className="cli-conv-act">{v.turns} 条</span>}
+    </button>
+  );
 }
 
 function CardSkeleton({ i = 0 }: { i?: number }) {
@@ -119,9 +183,40 @@ function CardSkeleton({ i = 0 }: { i?: number }) {
   );
 }
 
-function Group({ label, cards, selected, onSelect, show, accent, collapsible, collapsed, onToggle }: { label: string | false; cards: CardView[]; selected: string | null; onSelect: (id: string) => void; show: ResolvedMsgListConfig["card"]; accent?: boolean; collapsible?: boolean; collapsed?: boolean; onToggle?: () => void }) {
+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;
+  accent?: boolean; collapsible?: boolean; collapsed?: boolean; onToggle?: () => void;
+};
+
+function Group({ label, cards, selected, onSelect, show, rows, firstTask, onNewInJob, accent, collapsible, collapsed, onToggle }: GroupProps) {
   if (!cards.length || label === false) return null;
-  const list = cards.map((v) => <MsgCard key={v.id} v={v} selected={v.id === selected} onSelect={() => onSelect(v.id)} show={show} />);
+  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;
+    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)}
+        onNewInJob={onNewInJob && !v.batch && v.group !== "done" && v.group !== "cancelled" ? () => onNewInJob(v.id) : undefined}
+      />
+    );
+    if (!convs.length && !newing) return card;
+    return (
+      <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} />)}
+          {newing && <div className="cli-conv-row sel"><span className="cli-conv-title">新对话 · 发第一条消息后开始</span></div>}
+        </div>
+      </div>
+    );
+  });
   if (collapsible) {
     return (
       <>
@@ -141,8 +236,8 @@ function Group({ label, cards, selected, onSelect, show, accent, collapsible, co
   );
 }
 
-function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, title = "对话", color = "#b8613f", context, onEditContext, onCollapse, pollMs = 10_000, config, theme = "light", className, style, width, onEvent, onCallback, inProvider }: CliMsgListProps & { inProvider: boolean }) {
-  useComponentEvents(onEvent, onCallback, inProvider);
+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 }) {
+  useComponentEvents(onEvent, { onTurnEnd, onConversationEnd, onCallback }, inProvider);
   const configKey = JSON.stringify(config ?? {});
   const cfg = useMemo(() => resolveMsgListConfig(config), [configKey]); // eslint-disable-line react-hooks/exhaustive-deps
   const h = cfg.header;
@@ -162,7 +257,10 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
   useEffect(() => { if (jobIds) store.setJobIds(jobIds); }, [store, idsKey]); // eslint-disable-line react-hooks/exhaustive-deps
   // 宿主选中了列表里还没有的对话（例如旁边独立的 cli-chat 刚新建出来的）：加进列表，不用两个组件共享任何东西。
   // 放在 setJobIds 之后，宿主的 jobIds 更新后也会再补一次。
-  useEffect(() => { if (selected && !ids.includes(selected)) store.addJob(selected); }, [selected, ids, store]);
+  useEffect(() => {
+    const jobId = selected ? parseConvKey(selected).jobId : null;
+    if (jobId && !ids.includes(jobId)) store.addJob(jobId);
+  }, [selected, ids, store]);
 
   // 首次：刷新已知的；没给 jobIds 时再去 center 发现。
   useEffect(() => {
@@ -183,7 +281,8 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
 
   const cards = useMemo(() => ids.map((id) => cardView(id, jobs[id])), [ids, jobs]);
   const q = query.trim().toLowerCase();
-  const shown = q ? cards.filter((c) => c.title.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)) : cards;
+  const shown = q ? cards.filter((c) => c.title.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q)
+    || (jobs[c.id]?.job?.conversation?.conversations ?? []).some((conv) => conv.title.toLowerCase().includes(q))) : cards;
   const byRecent = (a: CardView, b: CardView) => b.updatedAt - a.updatedAt;
   const groups = {
     needs: shown.filter((c) => c.group === "needs").sort(byRecent),
@@ -191,7 +290,11 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
     done: shown.filter((c) => c.group === "done").sort(byRecent),
     cancelled: shown.filter((c) => c.group === "cancelled").sort(byRecent),
   };
-  const select = (id: string) => { if (selectedId === undefined) store.select(id); onSelect?.(id); };
+  const select = (id: string) => { if (selectedId === undefined) store.select(id); onSelect?.(id, parseConvKey(id)); };
+  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 startNew = () => { if (onNew) onNew(); else store.select(null); };
   const firstLoad = !discovered && !cards.length;
   const showRow = h.show && (h.title || h.newButton || h.refresh || !!onCollapse);
@@ -234,10 +337,10 @@ function MsgListInner({ jobIds, discover = true, selectedId, onSelect, onNew, ti
               <>
                 {cards.length === 0 && <div className="empty" style={{ padding: "30px 16px" }}><div className="e-t">{cfg.emptyTitle}</div>{cfg.emptyDescription && <div className="e-s">{cfg.emptyDescription}</div>}</div>}
                 {q && shown.length === 0 && <div className="search-empty">没有匹配“{query.trim()}”的对话。</div>}
-                <Group label={cfg.groups.needs} cards={groups.needs} selected={selected} onSelect={select} show={cfg.card} accent />
-                <Group label={cfg.groups.active} cards={groups.active} selected={selected} onSelect={select} show={cfg.card} />
-                <Group label={cfg.groups.done} cards={groups.done} selected={selected} onSelect={select} show={cfg.card} collapsible collapsed={doneCollapsed && !q} onToggle={() => setDoneCollapsed((c) => !c)} />
-                <Group label={cfg.groups.cancelled} cards={groups.cancelled} selected={selected} onSelect={select} show={cfg.card} collapsible collapsed={cancelledCollapsed && !q} onToggle={() => setCancelledCollapsed((c) => !c)} />
+                <Group label={cfg.groups.needs} cards={groups.needs} {...groupProps} accent />
+                <Group label={cfg.groups.active} cards={groups.active} {...groupProps} />
+                <Group label={cfg.groups.done} cards={groups.done} {...groupProps} collapsible collapsed={doneCollapsed && !q} onToggle={() => setDoneCollapsed((c) => !c)} />
+                <Group label={cfg.groups.cancelled} cards={groups.cancelled} {...groupProps} collapsible collapsed={cancelledCollapsed && !q} onToggle={() => setCancelledCollapsed((c) => !c)} />
               </>
             )}
           </div>

package/src/styles.css

@@ -48,3 +48,127 @@
 
 /* 排队气泡下的等待原因（中枢给的：节点连不上、没有可用节点……） */
 .cli-ui .cli-queued-note{margin-top:6px;font-size:12px;color:var(--amber);}
+
+/* Agent 消息里打不开的本地文件链接：显示成文字（路径在悬停提示里） */
+.cli-ui .md .cli-local-link{color:var(--ink-2);border-bottom:1px dashed var(--line-strong);cursor:help;}
+
+/* ── cli-board：右侧看板（Operator 右栏的样子 + 文件浏览 / 预览） ── */
+.cli-ui.cli-file-preview,
+.cli-ui.cli-browser-view{display:flex;flex-direction:column;min-height:0;min-width:0;height:100%;overflow:hidden;background:var(--panel);}
+.cli-ui.cli-browser-view .rail-pad{flex:1;}
+.cli-ui.cli-board{display:flex;flex-direction:column;min-height:0;min-width:0;height:100%;overflow:hidden;border-left:1px solid var(--line);}
+.cli-ui.cli-board .rail-scroll{overflow:hidden;}
+.cli-ui.cli-board.collapsed{background:var(--bg-2);}
+.cli-ui .cli-board-strip{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;height:100%;padding:14px 0;color:var(--ink-3);}
+.cli-ui .cli-board-strip:hover{background:var(--row-sel);color:var(--ink);}
+.cli-ui .cli-board-strip svg{width:14px;height:14px;transform:rotate(180deg);}
+.cli-ui .cli-board-strip-t{writing-mode:vertical-rl;font-family:var(--mono);font-size:11px;letter-spacing:.1em;}
+.cli-ui.cli-board .tc-note{padding:18px 16px;font-size:13px;color:var(--ink-3);line-height:1.6;}
+.cli-ui .cli-sync-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-4);margin-right:5px;vertical-align:middle;}
+.cli-ui .cli-sync-dot.on{background:var(--green);animation:cli-pulse 1.6s ease-in-out infinite;}
+@keyframes cli-pulse{50%{opacity:.35;}}
+.cli-ui .cli-tc-open{font-size:11px;color:var(--accent);padding:1px 6px;border-radius:5px;margin-left:6px;cursor:pointer;}
+.cli-ui .cli-tc-open:hover{background:var(--accent-soft);}
+
+.cli-ui .cli-files{display:flex;flex-direction:column;min-height:0;flex:1;}
+.cli-ui .cli-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:10px 12px;border-bottom:1px solid var(--line-2);font-size:12.5px;}
+.cli-ui .cli-crumb{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;border-radius:6px;color:var(--ink-3);}
+.cli-ui .cli-crumb svg{width:13px;height:13px;}
+.cli-ui .cli-crumb.on{color:var(--ink);font-weight:600;}
+.cli-ui .cli-crumb:hover{background:var(--row-sel);}
+.cli-ui .cli-crumb-sep{color:var(--ink-4);}
+.cli-ui .cli-files-sync{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);}
+.cli-ui .cli-files-list{flex:1;min-height:0;overflow-y:auto;padding:4px 0;}
+.cli-ui .cli-frow{display:flex;align-items:center;width:100%;}
+.cli-ui .cli-frow:hover{background:var(--row-sel);}
+.cli-ui .cli-frow.fresh .cli-frow-name{color:var(--accent-ink);}
+.cli-ui button.cli-frow,.cli-ui .cli-frow-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:7px 12px;font-size:13px;text-align:left;color:var(--ink);}
+.cli-ui .cli-frow-ic{display:inline-flex;color:var(--ink-3);}
+.cli-ui .cli-frow.dir .cli-frow-ic{color:var(--accent);}
+.cli-ui .cli-frow-ic svg{width:14px;height:14px;}
+.cli-ui .cli-frow-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .cli-frow-new{font-size:10.5px;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:9px;}
+.cli-ui .cli-frow-meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);white-space:nowrap;}
+.cli-ui .cli-frow-dl{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:6px;border-radius:6px;color:var(--ink-3);opacity:0;}
+.cli-ui .cli-frow:hover .cli-frow-dl,.cli-ui .cli-frow-dl:focus-visible{opacity:1;}
+.cli-ui .cli-frow-dl:hover{background:var(--surface-2);color:var(--ink);}
+.cli-ui .cli-frow-dl svg{width:14px;height:14px;}
+@media (hover:none){.cli-ui .cli-frow-dl{opacity:1;}}
+
+.cli-ui .cli-fv{display:flex;flex-direction:column;min-height:0;flex:1;background:var(--panel);}
+.cli-ui .cli-fv-h{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line-2);font-size:12.5px;min-width:0;}
+.cli-ui .cli-fv-ic{display:inline-flex;color:var(--ink-3);}
+.cli-ui .cli-fv-ic svg{width:14px;height:14px;}
+.cli-ui .cli-fv-name{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .cli-fv-meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);white-space:nowrap;}
+.cli-ui .cli-fv-sp{flex:1;}
+.cli-ui .cli-fv-back{font-size:18px;line-height:1;width:26px;height:26px;border-radius:6px;color:var(--ink-3);}
+.cli-ui .cli-fv-back:hover{background:var(--row-sel);color:var(--ink);}
+.cli-ui .cli-fv-btn{font-size:12px;color:var(--accent);padding:3px 8px;border-radius:6px;white-space:nowrap;}
+.cli-ui .cli-fv-btn:hover{background:var(--accent-soft);}
+.cli-ui .cli-fv-icon{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;color:var(--ink-3);flex:none;}
+.cli-ui .cli-fv-icon:hover:not(:disabled){background:var(--surface-2);color:var(--ink);}
+.cli-ui .cli-fv-icon:disabled{opacity:.4;}
+.cli-ui .cli-fv-icon svg{width:14px;height:14px;}
+.cli-ui .cli-fv-b{flex:1;min-height:0;overflow:auto;}
+.cli-ui .cli-fv-b.k-pdf,.cli-ui .cli-fv-b.k-html,.cli-ui .cli-fv-b.k-docx{overflow:hidden;display:flex;}
+.cli-ui .cli-fv-frame{flex:1;width:100%;height:100%;min-height:360px;border:0;background:#fff;}
+.cli-ui .cli-fv-md{padding:16px 18px;}
+.cli-ui .cli-fv-code .md pre{margin:0;border:0;border-radius:0;min-height:100%;}
+.cli-ui .cli-fv-pre{margin:0;padding:12px 14px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-break:break-word;}
+.cli-ui .cli-fv-img{display:grid;place-items:center;padding:16px;min-height:100%;background:repeating-conic-gradient(var(--surface-2) 0 25%,transparent 0 50%) 0 0/16px 16px;}
+.cli-ui .cli-fv-img img{max-width:100%;height:auto;box-shadow:var(--sh-1);}
+.cli-ui .cli-fv-csv{overflow:auto;}
+.cli-ui .cli-fv-csv table{border-collapse:collapse;font-size:12px;font-family:var(--mono);}
+.cli-ui .cli-fv-csv th,.cli-ui .cli-fv-csv td{border:1px solid var(--line-2);padding:4px 8px;white-space:nowrap;text-align:left;}
+.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-fv-trunc{padding:6px 14px;font-size:12px;color:var(--amber);background:var(--surface-2);border-bottom:1px solid var(--line-2);}
+
+/* 对话里弹窗打开的文件 / 浏览器 */
+.cli-ui .modal.cli-popup{width:min(960px,calc(100vw - 40px));height:min(82vh,900px);display:flex;flex-direction:column;overflow:hidden;}
+.cli-ui .modal.cli-popup.browser .rail-pad{flex:1;}
+.cli-ui .md a[href="#"]{cursor:pointer;}
+
+/* ── 浏览器实时画面（canvas）：按比例适应容器；接管时高亮 ── */
+.cli-ui .bp-screen{display:flex;align-items:center;justify-content:center;}
+/* 宽高都用 auto + max-*：替换元素按自身比例缩小，点击坐标和显示区域一致。 */
+.cli-ui .bp-frame{display:block;max-width:100%;max-height:var(--cli-browser-max-h,70vh);width:auto;height:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
+.cli-ui .bp-frame.live{cursor:pointer;outline:2px solid var(--coral);outline-offset:-2px;}
+/* 键盘 / 输入法接收框：不放到屏幕外（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;}
+
+/* ── 窄容器（手机、很窄的侧栏）：预览工具栏换行，次要信息收起 ── */
+.cli-ui .cli-fv{container-type:inline-size;}
+.cli-ui .cli-fv-h{flex-wrap:wrap;row-gap:4px;}
+@container (max-width:380px){
+  .cli-ui .cli-fv-meta{display:none;}
+  .cli-ui .cli-fv-btn{padding:3px 6px;}
+}
+.cli-ui.cli-board{container-type:inline-size;}
+@container (max-width:340px){
+  .cli-ui .cli-frow-meta{display:none;}
+  .cli-ui .rail-tab{padding:12px 9px 10px;}
+}
+.cli-ui .scrim{z-index:var(--cli-popup-z,200);}
+
+/* ── 对话列表：一个任务里的几个对话 ── */
+.cli-ui .cli-job-card{position:relative;margin-bottom:8px;}
+.cli-ui .cli-job-card .task{width:100%;margin-bottom:0;}
+.cli-ui .cli-job-card .task .task-foot{padding-right:26px;}
+.cli-ui .cli-new-in-job{position:absolute;right:8px;bottom:8px;width:22px;height:22px;opacity:0;transition:opacity .12s;}
+.cli-ui .cli-job-card:hover .cli-new-in-job,
+.cli-ui .cli-new-in-job:focus-visible{opacity:1;}
+@media (hover:none){.cli-ui .cli-new-in-job{opacity:1;}}
+.cli-ui .cli-job-group{margin-bottom:8px;}
+.cli-ui .cli-job-group .cli-job-card,
+.cli-ui .cli-job-group .task{margin-bottom:0;}
+.cli-ui .cli-conv-rows{display:flex;flex-direction:column;gap:2px;margin:4px 0 0 14px;padding-left:8px;border-left:1px solid var(--line);}
+.cli-ui .cli-conv-row{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:6px 8px;border:1px solid transparent;border-radius:var(--r);background:none;color:inherit;text-align:left;cursor:pointer;font-size:12.5px;}
+.cli-ui div.cli-conv-row{cursor:default;color:var(--ink-3);}
+.cli-ui .cli-conv-row:hover{background:var(--surface-2);}
+.cli-ui .cli-conv-row.sel{border-color:var(--accent);background:var(--surface);}
+.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;}

package/src/ui/Markdown.tsx

@@ -1,23 +1,52 @@
-import { memo, type ComponentProps } from "react";
-import ReactMarkdown from "react-markdown";
+import { memo, useContext, type ComponentProps, type MouseEvent } from "react";
+import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
+import { FileLinkContext, FileOpenContext, localFilePath } from "./fileLinks.js";
 
 // 渲染 Agent 的 markdown 输出：标题、列表、表格、带语言的代码块（高亮）、行内代码、链接。
 // 与 Operator 的 Markdown.tsx 一致：只高亮写明语言的代码块（自动识别在流式输出时很耗），
 // 并 memo，文字没变的消息重渲染时跳过整个解析。
-// Operator 里本地文件链接会改走任务的文件接口；这里没有文件接口（见 PLAN.md 的看板组件），链接原样打开。
-function MdLink(props: ComponentProps<"a">) {
-  return <a {...props} target="_blank" rel="noreferrer" />;
+// 本地文件链接按 Operator 的规则识别：有地址（FileLinkContext）就改写过去，没有就显示成不可点的文字。
+function MdLink({ href, children, ...props }: ComponentProps<"a">) {
+  const resolve = useContext(FileLinkContext);
+  const open = useContext(FileOpenContext);
+  const local = localFilePath(href);
+  if (local) {
+    const url = resolve?.(local, "link") ?? null;
+    if (!url && !open) return <span className="cli-local-link" title={`本地文件：${local}`}>{children}</span>;
+    const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+      if (!open || (url && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0))) return;
+      if (open(local) || !url) e.preventDefault();
+    };
+    return <a {...props} href={url ?? "#"} target="_blank" rel="noreferrer" title={`打开文件：${local}`} onClick={onClick}>{children}</a>;
+  }
+  return <a {...props} href={href} target="_blank" rel="noreferrer">{children}</a>;
 }
 
+function MdImg({ src, alt, ...props }: ComponentProps<"img">) {
+  const resolve = useContext(FileLinkContext);
+  const local = typeof src === "string" ? localFilePath(src) : null;
+  if (local) {
+    const url = resolve?.(local, "image") ?? null;
+    if (!url) return <span className="cli-local-link" title={`本地文件：${local}`}>{alt || local}</span>;
+    // eslint-disable-next-line jsx-a11y/alt-text
+    return <img {...props} alt={alt ?? ""} src={url} />;
+  }
+  return <img {...props} alt={alt ?? ""} src={src} />;
+}
+
+// 缺省的地址处理会把 file: 等非网页协议清空；放行 file: 和 Windows 路径，交给上面按本地文件处理（与 Operator 一致）。
+const urlTransform = (url: string) => (/^file:/i.test(url) || /^[a-z]:[\\/]/i.test(url) ? url : defaultUrlTransform(url));
+
 export const Markdown = memo(function Markdown({ children }: { children: string }) {
   return (
     <div className="md">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
         rehypePlugins={[[rehypeHighlight, { detect: false, ignoreMissing: true }]]}
-        components={{ a: MdLink }}
+        components={{ a: MdLink, img: MdImg }}
+        urlTransform={urlTransform}
       >
         {children}
       </ReactMarkdown>

package/src/ui/fileLinks.ts

@@ -0,0 +1,46 @@
+// Agent 消息里指向本地文件的链接（[报告](report.md)、/Users/…/a.ts、file:///…、src/a.ts:12）。
+// 识别规则移植自 Operator 的 app/orchestrator/fileLinks.ts：原样渲染的话浏览器会把它当成宿主网站根目录下的地址，打不开。
+// Operator 把它改写到任务的文件接口；这里由宿主 / 后端给出地址（fileUrl），给不出就显示成不可点的文字，不留坏链接。
+import { createContext } from "react";
+
+/** 本地文件 → 能打开的地址；返回 null 表示打不开（显示成文字）。 */
+export type FileUrlResolver = (path: string, kind: "link" | "image") => string | null;
+export const FileLinkContext = createContext<FileUrlResolver | null>(null);
+
+/**
+ * 点了本地文件链接：交给看板 / 弹窗打开，返回 true 表示接住了（链接不再按网址跳转）。
+ * 按住 ⌘/Ctrl/Shift 点、或中键点，仍然按网址在新窗口打开。
+ */
+export type FileOpenHandler = (path: string) => boolean;
+export const FileOpenContext = createContext<FileOpenHandler | null>(null);
+
+const SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+const WIN_ABS = /^[a-z]:[\\/]/i;
+
+function normalize(p: string): string {
+  const abs = p.startsWith("/");
+  const out: string[] = [];
+  for (const seg of p.split("/")) {
+    if (!seg || seg === ".") continue;
+    if (seg === ".." && out.length && out[out.length - 1] !== "..") out.pop();
+    else if (seg === ".." && abs) continue;
+    else out.push(seg);
+  }
+  return (abs ? "/" : "") + out.join("/");
+}
+
+/** 链接指向本地文件时返回路径（相对工作目录或绝对路径）；网址、锚点等返回 null。规则与 Operator 一致。 */
+export function localFilePath(href: string | undefined | null): string | null {
+  let h = String(href ?? "").trim();
+  if (!h || h.startsWith("#") || h.startsWith("//") || h.startsWith("/api/") || h.startsWith("/view?")) return null;
+  if (/^file:/i.test(h)) h = h.replace(/^file:(\/\/localhost)?(\/\/)?/i, "");
+  else if (SCHEME.test(h) && !WIN_ABS.test(h)) return null;
+  h = h.replace(/[?#].*$/, "");
+  try { h = decodeURI(h); } catch { /* 保持原样 */ }
+  h = h.replace(/\\/g, "/");
+  h = h.replace(/:(\d+)(:\d+)?$/, "");
+  if (!h) return null;
+  if (h === "~" || h.startsWith("~/")) return h;
+  if (h.startsWith("/") || WIN_ABS.test(h)) return WIN_ABS.test(h) ? h : normalize(h);
+  return normalize(h);
+}

package/src/ui/transcriptModel.ts

@@ -16,12 +16,30 @@ const toolCache = new WeakMap<Msg, ToolData>();
 export function toolDataOf(m: Msg): ToolData {
   let data = toolCache.get(m);
   if (!data) {
-    try { data = JSON.parse(m.content) as ToolData; } catch { data = { title: m.content }; }
+    try { data = sanitizeTool(JSON.parse(m.content)); } catch { data = { title: m.content }; }
     toolCache.set(m, data);
   }
   return data;
 }
 
+/**
+ * 工具卡片的数据来自节点，格式不对的部分丢掉而不是让整个对话渲染崩掉：
+ * 提问卡片要有 questions 数组，浏览器输入卡片要有 fields 数组，其余字段按类型保留。
+ */
+function sanitizeTool(raw: unknown): ToolData {
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return { title: typeof raw === "string" ? raw : String(raw) };
+  const d = { ...(raw as Record<string, unknown>) } as Record<string, unknown> & ToolData;
+  if (typeof d.title !== "string") d.title = d.title == null ? "" : String(d.title);
+  for (const k of ["detail", "result"] as const) if (d[k] != null && typeof d[k] !== "string") d[k] = JSON.stringify(d[k]);
+  const ask = d.ask as { questions?: unknown } | undefined;
+  if (ask && (typeof ask !== "object" || !Array.isArray(ask.questions))) delete d.ask;
+  const input = d.input as { fields?: unknown; id?: unknown } | undefined;
+  if (input && (typeof input !== "object" || !Array.isArray(input.fields))) delete d.input;
+  if (d.diff && !Array.isArray(d.diff)) delete d.diff;
+  if (d.peek && typeof d.peek !== "object") delete d.peek;
+  return d;
+}
+
 /** 从最新一端找这个 id 的消息（实时更新都落在末尾）。 */
 export function indexFromEnd(arr: Msg[], id: string): number {
   for (let i = arr.length - 1; i >= 0; i--) if (arr[i].id === id) return i;