@spzxg/cli-ui 0.0.0-stage → 0.1.0

package/src/styles.css

@@ -0,0 +1,50 @@
+/* @spzxg/cli-ui 样式入口：Operator 原样式（作用域在 .cli-ui 内）+ 组件自己的补充。
+   用法：import "@spzxg/cli-ui/styles.css";
+   字体：沿用 Operator 的 Space Grotesk / JetBrains Mono，宿主页面没加载时退回系统字体。 */
+@import "./operator.css";
+
+/* ── 组件根容器：填满宿主给的空间 ── */
+.cli-ui.cli-msglist,
+.cli-ui.cli-chat{display:flex;flex-direction:column;min-height:0;min-width:0;height:100%;overflow:hidden;}
+.cli-ui.cli-msglist .col-tasks{flex:1 1 auto;min-height:0;border-right:none;}
+.cli-ui.cli-chat .session{height:100%;}
+.cli-ui .task .tdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
+
+/* 新对话的空白页：放在转录区里，不撑满高度 */
+.cli-ui .cli-hero{flex:none;padding:60px 20px 20px;}
+
+/* ── 文本块（文件 / 长粘贴）：输入框和转录共用 ── */
+.cli-ui .cli-blocks{display:flex;flex-direction:column;gap:8px;padding:10px 12px 0;max-height:46vh;overflow-y:auto;}
+.cli-ui .cli-blocks .attach-chip.file{max-width:100%;align-self:flex-start;}
+.cli-ui .cli-blocks .attach-chip.file .attach-badge{position:static;margin-left:8px;}
+.cli-ui .cli-block{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface-2);overflow:hidden;}
+.cli-ui .msg-body .cli-block{margin:6px 0;background:var(--surface);}
+.cli-ui .cli-block-h{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;font-size:12.5px;}
+.cli-ui .cli-block-ic{display:inline-flex;color:var(--ink-3);}
+.cli-ui .cli-block-ic svg{width:14px;height:14px;}
+.cli-ui .cli-block-name{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.cli-ui .cli-block-meta{font-family:var(--mono);font-size:11px;color:var(--ink-4);white-space:nowrap;}
+.cli-ui .cli-block-sp{flex:1;}
+.cli-ui .cli-block-btn{font-size:12px;color:var(--accent);padding:2px 8px;border-radius:6px;}
+.cli-ui .cli-block-btn:hover{background:var(--accent-soft);}
+.cli-ui .cli-block-x{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;color:var(--ink-3);}
+.cli-ui .cli-block-x:hover{background:var(--row-sel);color:var(--ink);}
+.cli-ui .cli-block-x svg{width:13px;height:13px;}
+.cli-ui .cli-block-body{margin:0;padding:8px 12px 10px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink-2);white-space:pre-wrap;word-break:break-word;max-height:calc(4.65em + 18px);overflow:hidden;}
+.cli-ui .cli-block.open .cli-block-body{max-height:360px;overflow-y:auto;}
+.cli-ui .cli-block-more{display:block;width:100%;padding:6px;font-size:12px;color:var(--accent);border-top:1px solid var(--line-2);}
+.cli-ui .cli-block-more:hover{background:var(--accent-soft);}
+
+/* ── 很长的消息正文：折叠显示开头 ── */
+.cli-ui .cli-long-pre{white-space:pre-wrap;word-break:break-word;font-size:inherit;font-family:inherit;margin:0;}
+.cli-ui .cli-long-pre.clamp{max-height:10.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);}
+.cli-ui .cli-long-btn{margin-top:6px;font-size:12px;color:var(--accent);padding:2px 0;}
+.cli-ui .cli-long-btn:hover{text-decoration:underline;}
+
+/* ── 输入框补充 ── */
+.cli-ui .cli-comp-err{margin:0 0 8px;padding:7px 11px;border-radius:var(--r-sm);font-size:12.5px;color:var(--red);background:var(--red-soft);}
+.cli-ui .cli-count{font-family:var(--mono);}
+.cli-ui .cli-count.over{color:var(--red);}
+
+/* 排队气泡下的等待原因（中枢给的：节点连不上、没有可用节点……） */
+.cli-ui .cli-queued-note{margin-top:6px;font-size:12px;color:var(--amber);}

package/src/ui/Markdown.tsx

@@ -0,0 +1,26 @@
+import { memo, type ComponentProps } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+
+// 渲染 Agent 的 markdown 输出：标题、列表、表格、带语言的代码块（高亮）、行内代码、链接。
+// 与 Operator 的 Markdown.tsx 一致：只高亮写明语言的代码块（自动识别在流式输出时很耗），
+// 并 memo，文字没变的消息重渲染时跳过整个解析。
+// Operator 里本地文件链接会改走任务的文件接口；这里没有文件接口（见 PLAN.md 的看板组件），链接原样打开。
+function MdLink(props: ComponentProps<"a">) {
+  return <a {...props} target="_blank" rel="noreferrer" />;
+}
+
+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 }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+});

package/src/ui/TextBlock.tsx

@@ -0,0 +1,49 @@
+import { memo, useState } from "react";
+import { charCount, type TextBlock } from "../core/blocks.js";
+import { fmtCount } from "./format.js";
+import { Icon } from "./icons.js";
+
+/** 展开后一次最多渲染这么多字；更长的再点「显示全部」，避免一次塞几十万字进 DOM。 */
+const EXPANDED_STEP = 20_000;
+const PREVIEW_LINES = 3;
+
+/**
+ * 文本块卡片：输入框里待发送的文件 / 长粘贴，和转录里已发出的附件，用同一个样子。
+ * 默认只显示开头几行，点开才显示正文（分段渲染），长内容不会把页面卡住。
+ */
+export const TextBlockCard = memo(function TextBlockCard({ block, onRemove }: { block: TextBlock; onRemove?: () => void }) {
+  const [open, setOpen] = useState(false);
+  const [limit, setLimit] = useState(EXPANDED_STEP);
+  const chars = charCount(block.text);
+  const lines = block.text ? block.text.split("\n").length : 0;
+  const preview = block.text.split("\n", PREVIEW_LINES + 1).slice(0, PREVIEW_LINES).join("\n").slice(0, 400);
+  const shown = open ? block.text.slice(0, limit) : preview;
+  const rest = block.text.length - limit;
+  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-name" title={block.name}>{block.name}</span>
+        <span className="cli-block-meta">{fmtCount(chars)} 字 · {fmtCount(lines)} 行</span>
+        <span className="cli-block-sp" />
+        <button type="button" className="cli-block-btn" onClick={() => { setOpen((o) => !o); setLimit(EXPANDED_STEP); }}>
+          {open ? "收起" : "展开"}
+        </button>
+        {onRemove && <button type="button" className="cli-block-x" title="移除" aria-label={`移除 ${block.name}`} onClick={onRemove}>{Icon.x()}</button>}
+      </div>
+      <pre className="cli-block-body">{shown}{!open && block.text.length > preview.length ? "…" : ""}</pre>
+      {open && rest > 0 && (
+        <button type="button" className="cli-block-more" onClick={() => setLimit((n) => n + EXPANDED_STEP * 5)}>
+          还有 {fmtCount(rest)} 字，继续显示
+        </button>
+      )}
+    </div>
+  );
+});
+
+/** 很长的普通文字（没走附件格式、直接打进来的）：折叠显示开头，点开看全部。 */
+export const LONG_MESSAGE_CHARS = 3_000;
+export const LONG_MESSAGE_LINES = 40;
+export function isLongMessage(text: string) {
+  return text.length > LONG_MESSAGE_CHARS || text.split("\n", LONG_MESSAGE_LINES + 1).length > LONG_MESSAGE_LINES;
+}

package/src/ui/Transcript.tsx

@@ -0,0 +1,408 @@
+// 转录里的一行。移植自 operator-oss/app/orchestrator/Transcript.tsx，类名、结构、文案保持一致；
+// 去掉了对话任务用不到的部分（/clear、重新登录、浏览器交还……这些动作 center 不提供）。
+import { memo, useState } from "react";
+import type { AskAnswers, AskQuestion, InputRequest, Msg, ToolData, ToolPeek } from "../core/types.js";
+import { splitMessage } from "../core/blocks.js";
+import { Icon } from "./icons.js";
+import { Markdown } from "./Markdown.js";
+import { clockTime, diffCls, splitAttachments, type MsgAttachment } from "./format.js";
+import { Avatar } from "./shared.js";
+import { toolDataOf } from "./transcriptModel.js";
+import { TextBlockCard, isLongMessage } from "./TextBlock.js";
+
+// Operator 写进转录的几类系统提示（取开头一段做匹配）：按「上下文超限」那种醒目样式显示。
+const LOUD_NOTICES = [
+  "本次会话的上下文已超出模型上限",
+  "该智能体的连接已失效",
+  "该智能体的用量已达上限",
+  "智能体的审批策略拦截了这一轮",
+];
+const APPROVAL_BLOCKED = LOUD_NOTICES[3];
+
+function PeekView({ peek, expandable, onExpand }: { peek: ToolPeek; expandable: boolean; onExpand: () => void }) {
+  const corner = <span className="tcorner">⎿</span>;
+  if (peek.kind === "count") {
+    return (
+      <button className="tpeek tpeek-count" style={{ cursor: expandable ? "pointer" : "default" }} onClick={() => expandable && onExpand()}>
+        {corner}<span className="tpeek-txt">{peek.text}</span>
+        {expandable && <span className="tpeek-more">展开</span>}
+      </button>
+    );
+  }
+  if (peek.kind === "todos") {
+    return (
+      <div className="tpeek tpeek-todos">
+        {peek.items.map((t, i) => (
+          <div className={`tdo ${t.status}`} key={i}>
+            <span className="tdo-box">{t.status === "completed" ? "✔" : t.status === "in_progress" ? "▣" : "▢"}</span>
+            <span className="tdo-txt">{t.text}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+  if (peek.kind === "diff") {
+    return (
+      <div className="tpeek tpeek-diff">
+        <div className="tpeek-sum">{corner}<span className="dstat add">+{peek.added}</span><span className="dstat del">−{peek.removed}</span>{peek.label && <span className="tpeek-txt">{peek.label}</span>}</div>
+        <pre className="tpeek-pre diff">{peek.lines.map((l, i) => <div className={`dl ${diffCls(l.sign)}`} key={i}>{l.sign} {l.text}</div>)}</pre>
+        {peek.truncated ? <button className="tpeek-more btn-link" onClick={onExpand}>还有 {peek.truncated} 行</button> : null}
+      </div>
+    );
+  }
+  return (
+    <div className="tpeek tpeek-lines">
+      {peek.label && <div className="tpeek-sum">{corner}<span className="tpeek-txt">{peek.label}</span></div>}
+      <pre className="tpeek-pre">{peek.lines.join("\n") || "（无输出）"}</pre>
+      {peek.truncated ? <button className="tpeek-more btn-link" onClick={onExpand}>还有 {peek.truncated} 行</button> : null}
+    </div>
+  );
+}
+
+function ToolView({ data }: { data: ToolData }) {
+  const [open, setOpen] = useState(false);
+  const hasDiff = !!data.diff?.length;
+  const expandable = !!(data.detail || hasDiff || data.result !== undefined);
+  // 失败的工具自动展开输出，和 Claude Code 一样。
+  const showBody = open || (!!data.isError && data.result !== undefined);
+  return (
+    <div className="tool">
+      <button className="tool-h" style={{ cursor: expandable ? "pointer" : "default" }} onClick={() => expandable && setOpen((o) => !o)}>
+        {expandable && <span className={`tchev ${showBody ? "open" : ""}`}>{Icon.chevRight()}</span>}
+        <span className="tg">{data.title}</span>
+        {data.result !== undefined && <span className={data.isError ? "tx" : "tcheck"}>{data.isError ? Icon.x() : Icon.check()}</span>}
+      </button>
+      {data.peek && !showBody && <PeekView peek={data.peek} expandable={expandable} onExpand={() => setOpen(true)} />}
+      {showBody && (
+        <div className="tool-body">
+          {data.detail && <pre className="tool-pre">{data.detail}</pre>}
+          {hasDiff && <pre className="tool-pre diff">{data.diff!.map((l, i) => <div className={`dl ${diffCls(l.sign)}`} key={i}>{l.sign} {l.text}</div>)}</pre>}
+          {data.result !== undefined && (
+            <>
+              {(data.detail || hasDiff) && <div className="tool-divider">结果</div>}
+              <pre className={`tool-pre ${data.isError ? "err" : ""}`}>{data.result || "（无输出）"}</pre>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// AskUserQuestion 卡片。对话任务里回答 = 发下一条消息（节点上的回合已经结束），所以提交后由上层组成文字发出。
+function AskView({ data, agentLabel, onAnswer }: { data: ToolData; agentLabel: string; onAnswer?: (answers: AskAnswers) => Promise<void> | void }) {
+  const questions = data.ask?.questions ?? [];
+  const existing = data.ask?.answers;
+  const [state, setState] = useState(() => questions.map(() => ({ picked: [] as string[], other: "" })));
+  const [submitted, setSubmitted] = useState(false);
+
+  if (existing) {
+    return (
+      <div className="ask answered">
+        <div className="ask-head">{Icon.spark()} 你的回答</div>
+        {questions.map((q, i) => (
+          <div className="ask-q" key={i}>
+            <div className="ask-qh"><span className="ask-chip">{q.header}</span>{q.question}</div>
+            <div className="ask-picked">{(existing[i] ?? []).join("、") || "—"}</div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const toggle = (qi: number, label: string, multi: boolean) =>
+    setState((s) => s.map((st, i) => {
+      if (i !== qi) return st;
+      if (multi) {
+        const has = st.picked.includes(label);
+        return { ...st, picked: has ? st.picked.filter((l) => l !== label) : [...st.picked, label] };
+      }
+      return { picked: [label], other: "" };
+    }));
+  const setOther = (qi: number, v: string) =>
+    setState((s) => s.map((st, i) => (i === qi ? (questions[i].multiSelect ? { ...st, other: v } : { picked: [], other: v }) : st)));
+
+  const answers: AskAnswers = state.map((st) => [...st.picked, ...(st.other.trim() ? [st.other.trim()] : [])]);
+  const complete = answers.every((a) => a.length > 0);
+  // 发送失败时恢复成可提交（选择保留），不让卡片卡在「发送中…」。
+  const submit = () => {
+    if (!complete || submitted || !onAnswer) return;
+    setSubmitted(true);
+    void Promise.resolve(onAnswer(answers)).catch(() => setSubmitted(false));
+  };
+
+  return (
+    <div className="ask">
+      <div className="ask-head">{Icon.spark()} {agentLabel} 需要你的输入</div>
+      {questions.map((q, i) => (
+        <div className="ask-q" key={i}>
+          <div className="ask-qh"><span className="ask-chip">{q.header}</span>{q.question}{q.multiSelect && <span className="ask-multi">可多选</span>}</div>
+          <div className="ask-opts">
+            {q.options.map((o) => (
+              <button key={o.label} className={`ask-opt ${state[i].picked.includes(o.label) ? "on" : ""}`} onClick={() => toggle(i, o.label, !!q.multiSelect)} disabled={submitted}>
+                <span className="ask-opt-l">{o.label}</span>
+                {o.description && <span className="ask-opt-d">{o.description}</span>}
+              </button>
+            ))}
+            <input className="ask-other" placeholder="其他…" value={state[i].other} disabled={submitted} onChange={(e) => setOther(i, e.target.value)} />
+          </div>
+        </div>
+      ))}
+      <div className="ask-foot">
+        <button className="btn btn-accent btn-sm" onClick={submit} disabled={!complete || submitted || !onAnswer}>{submitted ? "发送中…" : "发送回答"}</button>
+      </div>
+    </div>
+  );
+}
+
+// browser_ask_user 卡片：移植自 Operator 的 InputView（已答 / 已取消 / 等待中）。
+// 能不能在这里提交取决于数据后端：Operator 后端可以直接把值交给浏览器脚本（onSubmit）；
+// center 的对话任务在 Agent 等输入时会结束那一轮，卡片随即变成「已取消」，这里不提供提交，只显示等待中的字段。
+function InputView({ input, agentLabel, onSubmit, onBrowser }: { input: InputRequest; agentLabel: string; onSubmit?: (id: string, values: string[]) => Promise<string | null>; onBrowser?: () => void }) {
+  const [vals, setVals] = useState<string[]>(() => input.fields.map(() => ""));
+  const [shown, setShown] = useState<boolean[]>(() => input.fields.map(() => false));
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  if (input.status !== "pending") {
+    return (
+      <div className="ask answered">
+        <div className="ask-head">{Icon.lock()} {input.status === "answered" ? "你提供的信息" : "已取消 —— 这一轮被停止了"}</div>
+        <div className="ask-q"><div className="ask-qh">{input.message}</div></div>
+        {input.status === "answered" && input.fields.map((f, i) => (
+          <div className="ask-q" key={i}>
+            <div className="ask-qh"><span className="ask-chip">{f.label}</span></div>
+            <div className="ask-picked">{f.secret ? "••••••（只交给浏览器脚本，没有保存，也没有发给模型）" : input.values?.[i] ?? "—"}</div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  const canSubmit = !!onSubmit;
+  const set = (i: number, v: string) => setVals((a) => a.map((x, j) => (j === i ? v : x)));
+  const complete = vals.every((v) => v.trim());
+  const submit = async () => {
+    if (!complete || busy || !onSubmit) return;
+    setBusy(true);
+    setErr(null);
+    const e = await onSubmit(input.id, vals.map((v) => v.trim()));
+    if (e) { setErr(e); setBusy(false); }
+  };
+  return (
+    <div className="ask">
+      <div className="ask-head">{Icon.lock()} {agentLabel} 需要你提供信息 · 浏览器正停在这一页等待</div>
+      <div className="ask-q"><div className="ask-qh" style={{ whiteSpace: "pre-wrap" }}>{input.message}</div></div>
+      {input.fields.map((f, i) => (
+        <div className="ask-q" key={i}>
+          <div className="ask-qh"><span className="ask-chip">{f.label}</span>{f.secret && <span className="ask-multi">保密</span>}</div>
+          <div className="ask-opts">
+            {f.options?.map((o) => (
+              <button key={o} className={`ask-opt ${vals[i] === o ? "on" : ""}`} onClick={() => set(i, o)} disabled={busy || !canSubmit}>
+                <span className="ask-opt-l">{o}</span>
+              </button>
+            ))}
+            <div className="input-row">
+              <input
+                className="ask-other"
+                type={f.secret && !shown[i] ? "password" : "text"}
+                autoComplete={f.secret ? "new-password" : "off"}
+                placeholder={f.options?.length ? "其他…" : f.placeholder || `输入${f.label}`}
+                value={f.options?.includes(vals[i]) ? "" : vals[i]}
+                disabled={busy || !canSubmit}
+                onChange={(e) => set(i, e.target.value)}
+                onKeyDown={(e) => { if (e.key === "Enter" && !e.nativeEvent.isComposing) void submit(); }}
+              />
+              {f.secret && canSubmit && (
+                <button className="btn btn-ghost btn-sm" type="button" onClick={() => setShown((a) => a.map((x, j) => (j === i ? !x : x)))}>
+                  {shown[i] ? "隐藏" : "显示"}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+      <div className="ask-foot" style={{ gap: 8, alignItems: "center" }}>
+        {err && <span className="input-err">{err}</span>}
+        {!err && canSubmit && input.fields.some((f) => f.secret) && <span className="input-note">密码只交给浏览器脚本，不保存、不发给模型</span>}
+        {!canSubmit && <span className="input-note">请在执行节点的 Operator 界面里提交（密码只交给浏览器脚本，不经对话发送）</span>}
+        <span style={{ flex: 1 }} />
+        {onBrowser && <button className="btn btn-line btn-sm" onClick={onBrowser}>查看浏览器</button>}
+        <button className="btn btn-accent btn-sm" onClick={() => void submit()} disabled={!complete || busy || !canSubmit}>{busy ? "发送中…" : "提交"}</button>
+      </div>
+    </div>
+  );
+}
+
+// 浏览器交接提示（Operator 的 browser_handoff / 页面权限请求写进转录的「🖐 …」行）：要用户在页面里亲自操作。
+// 与 Operator 一致：有浏览器能力时带「查看浏览器」「我已完成，交还给 AI」两个按钮，没有时只显示文字。
+export const HANDOFF_NOTICE_PREFIX = "🖐 ";
+function HandoffLine({ text, onBrowser, onHandback }: { text: string; onBrowser?: () => void; onHandback?: () => Promise<string | null> }) {
+  const [state, setState] = useState<"idle" | "busy" | "done">("idle");
+  const [err, setErr] = useState<string | null>(null);
+  return (
+    <div className="msg system info">
+      <div className="msg-body">
+        {text}
+        {(onBrowser || onHandback) && (
+          <div style={{ display: "flex", gap: 8, marginTop: 8, flexWrap: "wrap", alignItems: "center" }}>
+            {onBrowser && <button className="btn btn-line btn-sm" onClick={onBrowser}>查看浏览器</button>}
+            {onHandback && (
+              <button className="btn btn-accent btn-sm" disabled={state !== "idle"} onClick={async () => {
+                setState("busy");
+                const e = await onHandback();
+                if (e) { setErr(e); setState("idle"); } else setState("done");
+              }}>{state === "done" ? "已交还" : state === "busy" ? "交还中…" : "我已完成，交还给 AI"}</button>
+            )}
+            {err && <span className="input-err">{err}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// 附件条：Operator 的用户消息里，图片 / 大段粘贴以「[Attached image|file: 路径]」标记行出现。
+// 能拿到文件地址时（attachmentUrl）显示缩略图 / 可点的文件片，拿不到时显示不可点的片。
+function AttachmentStrip({ items, attachmentUrl }: { items: MsgAttachment[]; attachmentUrl?: (a: MsgAttachment) => string | null }) {
+  if (!items.length) return null;
+  return (
+    <div className="msg-attachments">
+      {items.map((a, i) => {
+        const url = attachmentUrl?.(a) ?? null;
+        if (a.kind === "image" && url) {
+          return <a key={i} href={url} target="_blank" rel="noreferrer" title="查看原图"><img src={url} alt="附件图片" loading="lazy" /></a>;
+        }
+        const label = a.kind === "image" ? "附件图片" : "附件文件";
+        return url
+          ? <a key={i} href={url} target="_blank" rel="noreferrer" className="file-chip" title={`打开 ${a.name}`}>{Icon.clip()} <span>{label}</span></a>
+          : <span key={i} className="file-chip" title={a.name}>{Icon.clip()} <span>{label}</span></span>;
+      })}
+    </div>
+  );
+}
+
+/** 用户消息正文：普通文字按 markdown 渲染，附件 / 长粘贴是可折叠卡片，很长的纯文字也折叠。 */
+function UserBody({ content, attachmentUrl }: { content: string; attachmentUrl?: (a: MsgAttachment) => string | null }) {
+  const { text, attachments } = splitAttachments(content);
+  const parts = text ? splitMessage(text) : [];
+  return (
+    <>
+      {parts.map((part, i) => part.kind === "block"
+        ? <TextBlockCard key={i} block={part.block} />
+        : <LongText key={i} text={part.text} />)}
+      <AttachmentStrip items={attachments} attachmentUrl={attachmentUrl} />
+    </>
+  );
+}
+
+function LongText({ text }: { text: string }) {
+  const [open, setOpen] = useState(false);
+  if (!isLongMessage(text)) return <Markdown>{text}</Markdown>;
+  return (
+    <div className={`cli-long ${open ? "open" : ""}`}>
+      {open ? (text.length > 50_000 ? <pre className="cli-long-pre">{text}</pre> : <Markdown>{text}</Markdown>) : <div className="cli-long-pre clamp">{text.slice(0, 1_200)}</div>}
+      <button type="button" className="cli-long-btn" onClick={() => setOpen((o) => !o)}>
+        {open ? "收起" : `展开全部（${text.length.toLocaleString("zh-CN")} 字）`}
+      </button>
+    </div>
+  );
+}
+
+/** 消息行的显示选项（来自组件配置）。要引用稳定，否则 memo 失效。 */
+export interface MessageViewOptions { timestamps: boolean; initialBadge: boolean; userLabel: string; agentName: string }
+const DEFAULT_VIEW: MessageViewOptions = { timestamps: true, initialBadge: true, userLabel: "你", agentName: "智能体" };
+
+export interface MessageHandlers {
+  /** browser_ask_user 卡片提交（返回错误文案或 null）。后端不支持时不给，卡片只读。 */
+  onInput?: (inputId: string, values: string[]) => Promise<string | null>;
+  /** 「查看浏览器」：宿主有浏览器面板时给。 */
+  onShowBrowser?: () => void;
+  /** 浏览器交接后「我已完成，交还给 AI」（返回错误文案或 null）。 */
+  onHandback?: () => Promise<string | null>;
+  /** 附件标记行的文件地址（Operator 后端才有）。 */
+  attachmentUrl?: (a: MsgAttachment) => string | null;
+  /** 与 Operator 相同的签名：askId 是提问的 tool_use id。 */
+  onAnswer?: (askId: string, questions: AskQuestion[], answers: AskAnswers) => Promise<void> | void;
+  onCancelQueued?: (msg: Msg) => void;
+  onRetry?: (msgId: string) => void;
+}
+
+// memo：实时回合里每个事件都会让上层重渲染，但消息对象只在内容变化时替换，没变的行直接跳过。
+// 调用方要传引用稳定的回调，否则 memo 失效。
+export const MessageView = memo(function MessageView({ m, initial: isInitial, hideWho, running, agent, agentLabel = "智能体", handlers, view = DEFAULT_VIEW }: {
+  m: Msg; initial: boolean; hideWho: boolean; running?: boolean; agent?: string | null; agentLabel?: string; handlers: MessageHandlers; view?: MessageViewOptions;
+}) {
+  const initial = isInitial && view.initialBadge;
+  const time = view.timestamps && m.ts != null ? <span className="msg-time">{clockTime(m.ts)}</span> : null;
+  if (m.role === "queued") {
+    return (
+      <div className="msg user queued">
+        <div className="who"><Avatar who="user" /> {view.userLabel}<span className="badge queued-badge">排队中</span>{time}</div>
+        <div className="msg-body">
+          <UserBody content={m.content} attachmentUrl={handlers.attachmentUrl} />
+          {m.note && <div className="cli-queued-note">⏳ {m.note}</div>}
+          {handlers.onCancelQueued && <button className="queued-x" title="从队列中移除" aria-label="从队列中移除" onClick={() => handlers.onCancelQueued!(m)}>{Icon.x()}</button>}
+        </div>
+      </div>
+    );
+  }
+  if (m.role === "tool") {
+    const data = toolDataOf(m);
+    if (data.input) return <div className="msg msg-tool"><InputView input={data.input} agentLabel={agentLabel} onSubmit={handlers.onInput} onBrowser={handlers.onShowBrowser} /></div>;
+    if (data.ask) return <div className="msg msg-tool"><AskView data={data} agentLabel={agentLabel} onAnswer={handlers.onAnswer ? (answers) => handlers.onAnswer!(data.ask?.id || m.toolId || "", data.ask?.questions ?? [], answers) : undefined} /></div>;
+    return <div className="msg msg-tool"><ToolView data={data} /></div>;
+  }
+  if (m.role === "system" && m.content.startsWith(HANDOFF_NOTICE_PREFIX)) {
+    return <HandoffLine text={m.content} onBrowser={handlers.onShowBrowser} onHandback={handlers.onHandback} />;
+  }
+  if (m.role === "system") {
+    if (LOUD_NOTICES.some((notice) => m.content.includes(notice))) {
+      return (
+        <div className="msg system overflow">
+          <div className="msg-body">
+            {m.content}
+            {m.content.includes(APPROVAL_BLOCKED) && handlers.onRetry && (
+              <div className="overflow-actions">
+                <button className="btn btn-sm" onClick={() => handlers.onRetry!(m.id)} disabled={running} title="重新发送失败的消息">{Icon.bolt()} 重试</button>
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    }
+    const info = /^[✓ℹ⇄]/.test(m.content);
+    const glyphed = info || m.content.startsWith("⚠");
+    return <div className={`msg system${info ? " info" : ""}`}><div className="msg-body">{glyphed ? m.content : `⚠ ${m.content}`}</div></div>;
+  }
+  const isUser = m.role === "user";
+  return (
+    <div className={`msg ${isUser ? "user" : "assistant"} ${initial ? "initial" : ""}`}>
+      {!hideWho && (
+        <div className="who">
+          <Avatar who={isUser ? "user" : "cc"} agent={agent} />
+          {isUser ? view.userLabel : view.agentName}
+          {initial && <span className="badge">初始提示</span>}
+          {time}
+        </div>
+      )}
+      <div className="msg-body">
+        {initial && <div className="initial-tag">{Icon.spark()} 已随项目上下文发送</div>}
+        {isUser ? <UserBody content={m.content} attachmentUrl={handlers.attachmentUrl} /> : m.content && <Markdown>{m.content}</Markdown>}
+      </div>
+    </div>
+  );
+});
+
+export function SessionBreak({ summary }: { summary: string }) {
+  return (
+    <div className="sbreak">
+      <span className="ln" />
+      <div className="card">
+        <div className="cl">{Icon.clear()} 上下文已清空 · 摘要已保存</div>
+        <div className="ct">{summary}</div>
+      </div>
+      <span className="ln" />
+    </div>
+  );
+}

package/src/ui/format.ts

@@ -0,0 +1,101 @@
+// 格式化 / 推导小工具。规则与 Operator（operator-oss/app/orchestrator/format.ts）一致，
+// 只保留对话任务用得到的部分。
+import type { AskAnswers, AskQuestion, Msg } from "../core/types.js";
+
+// 紧凑 token 数：1234 → "1.2k"，1_200_000 → "1.2M"。
+export function fmtTokens(n: number): string {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(n >= 1e7 ? 0 : 1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(n >= 1e4 ? 0 : 1)}k`;
+  return String(n);
+}
+
+export function fmtCount(n: number): string {
+  return n.toLocaleString("zh-CN");
+}
+
+// 消息时间：当天只显示时刻，跨天带日期。绝对时间是有意的：消息行是 memo 的，相对时间会冻住。
+export function clockTime(ts: number): string {
+  const d = new Date(ts);
+  const time = d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+  if (d.toDateString() === new Date().toDateString()) return time;
+  return `${d.toLocaleDateString([], { month: "short", day: "numeric" })}, ${time}`;
+}
+
+export function relTime(ts: number): string {
+  const d = Date.now() - ts;
+  const m = Math.floor(d / 60000);
+  if (m < 1) return "刚刚";
+  if (m < 60) return `${m} 分钟前`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h} 小时前`;
+  return `${Math.floor(h / 24)} 天前`;
+}
+
+export const toMs = (value: string | number | null | undefined) => {
+  if (value === null || value === undefined) return null;
+  const ms = typeof value === "number" ? value : new Date(value).getTime();
+  return Number.isFinite(ms) ? ms : null;
+};
+
+// 用户回答 AskUserQuestion 后，组成一条普通回复发出去（对话任务里回答就是下一条消息）。
+export function formatAnswersText(questions: AskQuestion[], answers: AskAnswers): string {
+  const lines = questions.map((q, i) => {
+    const picked = (answers[i] ?? []).filter((s) => s && s.trim());
+    return `- ${q.header || q.question}：${picked.length ? picked.join("、") : "（未选择）"}`;
+  });
+  return `回答你的问题：\n${lines.join("\n")}`;
+}
+
+export const diffCls = (sign: "+" | "-" | " ") => (sign === "+" ? "add" : sign === "-" ? "del" : "ctx");
+
+// 按 generation 把扁平的消息分成一次次会话，抽出 /clear 的摘要。
+export function buildSessions(messages: Msg[]) {
+  const summaryByGen: Record<number, string> = {};
+  for (const m of messages) if (m.role === "session_break") summaryByGen[m.generation] = m.content;
+  const committed = messages.filter((m) => m.role !== "queued");
+  const gens = Array.from(new Set(committed.filter((m) => m.role !== "session_break").map((m) => m.generation))).sort((a, b) => a - b);
+  return gens.map((n) => ({
+    n,
+    summaryBefore: summaryByGen[n - 1] ?? null,
+    messages: committed.filter((m) => m.generation === n && m.role !== "session_break"),
+  }));
+}
+
+// 智能体显示名：与 Operator 的驱动 id 对应。
+const AGENT_LABELS: Record<string, string> = { claude: "Claude Code", codex: "Codex", grok: "Grok", pi: "Pi", mock: "Mock" };
+export const agentLabel = (agent: string | null | undefined) => (agent ? AGENT_LABELS[agent] ?? agent : "智能体");
+
+// 已解析的模型 id 的友好名（"claude-opus-5" → "Opus 5"；非 Claude 的原样显示）。
+export function modelLabel(id: string | null | undefined): string {
+  if (!id) return "";
+  const s = id.toLowerCase();
+  const long = s.includes("[1m]") ? " (1M)" : "";
+  const fam = ["fable", "opus", "sonnet", "haiku"].find((f) => s.includes(f));
+  if (!fam) return id;
+  const cap = fam[0].toUpperCase() + fam.slice(1);
+  const v = s.match(new RegExp(`${fam}-(\\d+)(?:-(\\d+))?`));
+  return v ? `${cap} ${v[1]}${v[2] ? `.${v[2]}` : ""}${long}` : `${cap}${long}`;
+}
+
+// ── Operator 的附件标记行 ─────────────────────────────
+// Operator 界面里上传的图片 / 大段粘贴，以一行「[Attached image: 路径]」「[Attached file: 路径]」写进用户消息。
+// 规则与 Operator 的 splitAttachments 一致：路径形如 …/uploads/<task>/<file> 的才算附件，手打的同形文字留在正文里。
+const ATTACHMENT_RE = /^\[Attached (image|file): (.+)\]$/;
+export interface MsgAttachment { path: string; kind: "image" | "file"; name: string; taskId: string }
+
+export function splitAttachments(content: string): { text: string; attachments: MsgAttachment[] } {
+  if (!content.includes("[Attached image: ") && !content.includes("[Attached file: ")) return { text: content, attachments: [] };
+  const attachments: MsgAttachment[] = [];
+  const kept: string[] = [];
+  for (const line of content.split("\n")) {
+    const m = ATTACHMENT_RE.exec(line.trim());
+    const parts = m ? m[2].split(/[\\/]/).filter(Boolean) : [];
+    if (m && parts.length >= 3 && parts[parts.length - 3] === "uploads") {
+      const [taskId, file] = parts.slice(-2);
+      attachments.push({ path: m[2], kind: m[1] === "image" ? "image" : "file", name: file, taskId });
+    } else {
+      kept.push(line);
+    }
+  }
+  return { text: kept.join("\n").trim(), attachments };
+}