@spzxg/cli-ui 0.0.0-stage → 0.3.0

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/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/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 };
+}