@xgspz/cli-ui 0.0.0-stage → 0.6.15

package/src/ui/fileLinks.ts

@@ -0,0 +1,52 @@
+// 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);
+}
+
+/** File-shaped inline code is clickable; commands, models and code blocks remain code. */
+export function inlineFilePath(value: unknown): string | null {
+  if (typeof value !== 'string' || /\s/.test(value) || !/\.(?:md|markdown|txt|log|csv|tsv|json|ya?ml|toml|ini|xml|[cm]?[jt]sx?|css|scss|html?|py|sh|go|rs|java|c|cpp|h|pdf|png|jpe?g|gif|webp|svg|docx?|xlsx?|pptx?|zip)(?::\d+(?::\d+)?)?$/i.test(value)) return null;
+  return localFilePath(value);
+}

package/src/ui/format.ts

@@ -0,0 +1,103 @@
+// 格式化 / 推导小工具。规则与 Operator（operator-oss/app/orchestrator/format.ts）一致，
+// 只保留对话任务用得到的部分。
+import type { AskAnswers, AskQuestion, Msg } from "../core/types";
+
+// 紧凑 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) : [];
+    const upload = parts.length >= 3 && parts[parts.length - 3] === "uploads";
+    const managed = parts.length >= 4 && parts[parts.length - 4] === ".workspace" && parts[parts.length - 3] === "attachments";
+    if (m && (upload || managed) && parts.slice(-2).every(part => part !== "." && part !== "..")) {
+      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 };
+}

package/src/ui/icons.tsx

@@ -0,0 +1,92 @@
+// 图标：原样取自 operator-oss/app/icons.tsx，保持与 Operator 界面一致。
+/* Orchestrator — icon set (ported from the design's icons.js) */
+import type { ReactElement, ReactNode, SVGProps } from "react";
+
+type P = SVGProps<SVGSVGElement>;
+
+function S(children: ReactNode, props?: P) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      width="1em"
+      height="1em"
+      style={{ flex: "none" }}
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export const Icon = {
+  plus: (p?: P) => S(<><line x1={12} y1={5} x2={12} y2={19} /><line x1={5} y1={12} x2={19} y2={12} /></>, p),
+  list: (p?: P) => S(<><line x1={9} y1={6} x2={20} y2={6} /><line x1={9} y1={12} x2={20} y2={12} /><line x1={9} y1={18} x2={20} y2={18} /><circle cx={5} cy={6} r={0.5} /><circle cx={5} cy={12} r={0.5} /><circle cx={5} cy={18} r={0.5} /></>, p),
+  board: (p?: P) => S(<><rect x={3} y={4} width={5} height={16} rx={1.5} /><rect x={10} y={4} width={5} height={11} rx={1.5} /><rect x={17} y={4} width={4} height={8} rx={1.5} /></>, p),
+  chart: (p?: P) => S(<><line x1={5} y1={20} x2={5} y2={13} /><line x1={12} y1={20} x2={12} y2={5} /><line x1={19} y1={20} x2={19} y2={9} /></>, p),
+  folder: (p?: P) => S(<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />, p),
+  gear: (p?: P) => S(<><circle cx={12} cy={12} r={3} /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" /></>, p),
+  send: (p?: P) => S(<><path d="M7 11l5-5 5 5" /><line x1={12} y1={6} x2={12} y2={18} /></>, p),
+  spark: (p?: P) => S(<path d="M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6z" />, p),
+  clock: (p?: P) => S(<><circle cx={12} cy={12} r={9} /><path d="M12 7v5l3 2" /></>, p),
+  clear: (p?: P) => S(<><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v4h4" /></>, p),
+  dots: (p?: P) => S(<><circle cx={5} cy={12} r={1} /><circle cx={12} cy={12} r={1} /><circle cx={19} cy={12} r={1} /></>, p),
+  chevDown: (p?: P) => S(<path d="M6 9l6 6 6-6" />, p),
+  chevUp: (p?: P) => S(<path d="M6 15l6-6 6 6" />, p),
+  chevRight: (p?: P) => S(<path d="M9 6l6 6-6 6" />, p),
+  toBottom: (p?: P) => S(<><path d="M7 7l5 5 5-5" /><line x1={5} y1={17} x2={19} y2={17} /></>, p),
+  x: (p?: P) => S(<><line x1={6} y1={6} x2={18} y2={18} /><line x1={6} y1={18} x2={18} y2={6} /></>, p),
+  /** 回车 ↵：排队消息「立即发送」。 */
+  enter: (p?: P) => S(<><path d="M9 10l-5 5 5 5" /><path d="M20 4v7a4 4 0 0 1-4 4H4" /></>, p),
+  clip: (p?: P) => S(<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />, p),
+  check: (p?: P) => S(<path d="M5 12l5 5 9-11" />, p),
+  lock: (p?: P) => S(<><rect x={4} y={11} width={16} height={9} rx={2} /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>, p),
+  edit: (p?: P) => S(<><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" /></>, p),
+  doc: (p?: P) => S(<><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></>, p),
+  github: (p?: P) => S(<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />, p),
+  git: (p?: P) => S(<><circle cx={6} cy={6} r={2} /><circle cx={6} cy={18} r={2} /><circle cx={18} cy={9} r={2} /><path d="M18 11a8 8 0 0 1-8 8" /><line x1={6} y1={8} x2={6} y2={16} /></>, p),
+  flag: (p?: P) => S(<path d="M5 21V4h12l-2 4 2 4H5" />, p),
+  bolt: (p?: P) => S(<path d="M13 2L4 14h7l-1 8 9-12h-7z" />, p),
+  moon: (p?: P) => S(<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />, p),
+  sun: (p?: P) => S(<><circle cx={12} cy={12} r={4} /><line x1={12} y1={2} x2={12} y2={5} /><line x1={12} y1={19} x2={12} y2={22} /><line x1={2} y1={12} x2={5} y2={12} /><line x1={19} y1={12} x2={22} y2={12} /><line x1={4.9} y1={4.9} x2={6.8} y2={6.8} /><line x1={17.2} y1={17.2} x2={19.1} y2={19.1} /><line x1={4.9} y1={19.1} x2={6.8} y2={17.2} /><line x1={17.2} y1={6.8} x2={19.1} y2={4.9} /></>, p),
+  external: (p?: P) => S(<><path d="M14 4h6v6" /><path d="M20 4l-9 9" /><path d="M19 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" /></>, p),
+  copy: (p?: P) => S(<><rect x={9} y={9} width={12} height={12} rx={2} /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></>, p),
+  play: (p?: P) => S(<path d="M7 5l11 7-11 7z" />, p),
+  pause: (p?: P) => S(<><path d="M9 5v14" /><path d="M15 5v14" /></>, p),
+  stop: (p?: P) => S(<rect x={6} y={6} width={12} height={12} rx={2} />, p),
+  sliders: (p?: P) => S(<><line x1={4} y1={21} x2={4} y2={14} /><line x1={4} y1={10} x2={4} y2={3} /><line x1={12} y1={21} x2={12} y2={12} /><line x1={12} y1={8} x2={12} y2={3} /><line x1={20} y1={21} x2={20} y2={16} /><line x1={20} y1={12} x2={20} y2={3} /><line x1={1} y1={14} x2={7} y2={14} /><line x1={9} y1={8} x2={15} y2={8} /><line x1={17} y1={16} x2={23} y2={16} /></>, p),
+  search: (p?: P) => S(<><circle cx={11} cy={11} r={7} /><line x1={21} y1={21} x2={16.65} y2={16.65} /></>, p),
+  terminal: (p?: P) => S(<><rect x={3} y={4} width={18} height={16} rx={2} /><path d="M7 9l3 3-3 3" /><line x1={13} y1={15} x2={17} y2={15} /></>, p),
+  archive: (p?: P) => S(<><rect x={3} y={4} width={18} height={4} rx={1} /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8" /><line x1={10} y1={12} x2={14} y2={12} /></>, p),
+  restore: (p?: P) => S(<><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v4h4" /><path d="M12 8v4l3 2" /></>, p),
+  download: (p?: P) => S(<><path d="M12 4v11" /><path d="M7 11l5 5 5-5" /><line x1={5} y1={20} x2={19} y2={20} /></>, p),
+};
+
+// ---- agent brand marks ----
+// Logos, not line icons: filled paths in `currentColor` (the stroked `S()` set
+// above would smear these at avatar size). Keyed by agent driver id so any UI
+// that knows a task's `agent` can stamp the right mark; unknown/legacy ids get
+// no entry and callers fall back to a generic glyph.
+
+function Brand(children: ReactNode, props?: P) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" width="1em" height="1em" style={{ flex: "none" }} aria-hidden {...props}>
+      {children}
+    </svg>
+  );
+}
+
+export const AgentMark: Record<string, (p?: P) => ReactElement> = {
+  claude: (p?: P) => Brand(
+    <path d="M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.984-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.322.455-.34-.049-2.204-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z" />,
+    p,
+  ),
+  codex: (p?: P) => Brand(
+    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.911 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073zm-9.022 12.608a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494zM3.6 18.304a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .78 0l5.843-3.368v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.856L13.104 8.364 15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.024l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.681 4.66zM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.682zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />,
+    p,
+  ),
+};

package/src/ui/reference.ts

@@ -0,0 +1,40 @@
+/** A compact display-only excerpt. The original reference is kept for sending. */
+export function referencePreview(text: string): string {
+  const plain = text.slice(0, 4_000)
+    .replace(/^文件修订：[a-f0-9]{64}\n/gm, "")
+    .replace(/^\s*(?:```|~~~)[^\n]*$/gm, "")
+    .replace(/!\[([^\]]*)\]\([^\n)]*\)/g, "$1")
+    .replace(/\[([^\]]+)\]\([^\n)]*\)/g, "$1")
+    .replace(/^\s{0,3}#{1,6}\s+/gm, "")
+    .replace(/^\s*(?:>\s*)+/gm, "")
+    .replace(/^\s*(?:[-*+] |\d+[.)] )/gm, "")
+    .replace(/^\s*\|?[ :|-]+\|\s*$/gm, "")
+    .replace(/\*\*|__|~~|`/g, "")
+    .replace(/\*([^*\n]+)\*/g, "$1")
+    .replace(/\|/g, " · ")
+    .replace(/\s+/g, " ").trim();
+  return plain.length > 240 ? `${plain.slice(0, 240)}…` : plain;
+}
+
+/** Shorten known file-reference headings, while leaving URLs and agent names intact. */
+export function referenceTitle(title: string): string {
+  const file = /^(文件|文件片段) (.+)$/.exec(title);
+  const workspaceFile = /^(?:当前工作区文件|来源任务\s*.+?\s*的工作区文件) (.+)$/.exec(title);
+  const path = file?.[2] ?? workspaceFile?.[1];
+  if (!path) return title;
+  const name = path.split(/[\\/]/).filter(Boolean).pop();
+  return name ? `${file?.[1] ?? "文件"} ${name}` : title;
+}
+
+/** Only the leading format emitted by node composerDraft.quoteText is a reference. */
+export function splitQuotedMessage(content: string): { quote: { author: string; text: string }; text: string } | null {
+  const lines = content.split("\n");
+  const heading = /^引用 ([^\r\n]+)：$/.exec(lines[0]);
+  if (!heading) return null;
+  let index = 1;
+  const quoted: string[] = [];
+  while (lines[index]?.startsWith("> ")) quoted.push(lines[index++].slice(2));
+  if (!quoted.length || (index < lines.length && lines[index] !== "")) return null;
+  if (lines[index] === "") index++;
+  return { quote: { author: heading[1], text: quoted.join("\n") }, text: lines.slice(index).join("\n") };
+}

package/src/ui/shared.tsx

@@ -0,0 +1,38 @@
+// 小部件：状态点、头像、智能体标签、骨架条。与 Operator 的 shared.tsx 同样的类名和规则。
+import type { CSSProperties } from "react";
+import { AgentMark, Icon } from "./icons";
+
+/** Operator 的状态色：r 未开始 · a 进行中 · h 搁置 · g 完成 · x 取消 · b 运行中（蓝，闪）· c 等你处理（珊瑚，闪）。 */
+export type DotCls = "r" | "a" | "h" | "g" | "x";
+
+export function StatusDot({ cls, running, awaiting, title }: { cls: DotCls; running?: boolean; awaiting?: boolean; title?: string }) {
+  const c = awaiting ? "c" : running ? "b" : cls;
+  return <span className={`sdot ${c} ${awaiting || running ? "pulse" : ""}`} title={title} />;
+}
+
+export function Avatar({ who, agent }: { who: "user" | "cc"; agent?: string | null }) {
+  if (who === "user") return <span className="av you">A</span>;
+  const mark = agent ? AgentMark[agent] : undefined;
+  return <span className={`av cc${mark ? ` ${agent}` : ""}`}>{mark ? mark() : Icon.bolt()}</span>;
+}
+
+export function AgentBadge({ label }: { label: string }) {
+  return <span className="agent-badge" title={`运行于 ${label}`}>{label}</span>;
+}
+
+export function Skel({ w, h = 10, r, style }: { w: number | string; h?: number; r?: number | string; style?: CSSProperties }) {
+  return <span className="skel" aria-hidden style={{ width: w, height: h, ...(r !== undefined ? { borderRadius: r } : null), ...style }} />;
+}
+
+export function Spinner({ size }: { size?: number }) {
+  return <span className="spinner" role="status" aria-label="加载中" style={size ? { width: size, height: size } : undefined} />;
+}
+
+export function ErrNote({ children, onRetry }: { children: React.ReactNode; onRetry?: () => void }) {
+  return (
+    <div className="err-note">
+      <span className="err-msg">⚠ {children}</span>
+      {onRetry && <button className="btn btn-line btn-sm" onClick={onRetry}>{Icon.restore()} 重试</button>}
+    </div>
+  );
+}

package/src/ui/transcriptModel.ts

@@ -0,0 +1,151 @@
+// 实时转录背后的纯函数（无 React，可单测）。规则与 Operator 的 transcriptModel.ts 一致：
+// 为长对话设计——成千上万条消息、几 MB 的工具输出。
+import type { Msg, ToolData } from "../core/types";
+import { buildSessions } from "./format";
+
+/** 跟随最新输出时 DOM 里保留的行数。 */
+export const RENDER_WINDOW = 120;
+/** 往回翻（或再往下）时每次多显示的行数。 */
+export const RENDER_STEP = 80;
+/** DOM 里最多同时存在的行数，超过就丢掉远端的。 */
+export const RENDER_MAX = 360;
+
+// 工具消息解析结果按消息对象缓存：内容变了消息对象就会换，缓存不会过期。
+const toolCache = new WeakMap<Msg, ToolData>();
+/** tool 消息背后的工具卡片数据。只读，不要改返回值。 */
+export function toolDataOf(m: Msg): ToolData {
+  let data = toolCache.get(m);
+  if (!data) {
+    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;
+  return -1;
+}
+
+/** 末尾附近还有没回答的 AskUserQuestion 卡片。 */
+export function hasOpenAsk(messages: Msg[], scan = 400): boolean {
+  for (let i = messages.length - 1, n = 0; i >= 0 && n < scan; i--, n++) {
+    const m = messages[i];
+    if (m.role !== "tool") continue;
+    const d = toolDataOf(m);
+    if (d.ask && !d.ask.answers) return true;
+  }
+  return false;
+}
+
+/**
+ * 把（重连时的）快照合进已有的：没变的消息保持对象引用，memo 的行就不会重渲染（不会重新解析 markdown）。
+ * 快照只是最新一段（older > 0）时，保留这个页面已经往上翻出来的更早的消息（与 Operator 的 mergeSnapshot 一致）。
+ */
+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);
+  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 }
+  /** 收起的「等你在浏览器里操作」：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;
+
+/** 续等浏览器那边的人（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 });
+    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" && !(si === 0 && hasOlder);
+      items.push({ kind: "msg", key: m.id, m, initial, hideWho });
+    }
+  });
+  return items;
+}

package/src/ui/useChatScrollbar.ts

@@ -0,0 +1,29 @@
+import { useLayoutEffect, type RefObject } from "react";
+
+/** Keep the fixed composer column aligned with a transcript using classic scrollbars. */
+export function useChatScrollbar(ref: RefObject<HTMLElement | null>, scope?: string | null) {
+  useLayoutEffect(() => {
+    const element = ref.current;
+    const column = element?.closest<HTMLElement>("[data-chat-layout]");
+    if (!element || !column) return;
+    const property = "--cli-chat-scrollbar";
+    const previous = column.style.getPropertyValue(property);
+    const priority = column.style.getPropertyPriority(property);
+    let active = true, written = "";
+    const measure = () => {
+      if (!active) return;
+      written = `${Math.max(0, element.offsetWidth - element.clientWidth)}px`;
+      if (column.style.getPropertyValue(property) !== written) column.style.setProperty(property, written);
+    };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(element);
+    return () => {
+      active = false;
+      observer?.disconnect();
+      if (column.style.getPropertyValue(property) === written) {
+        if (previous) column.style.setProperty(property, previous, priority); else column.style.removeProperty(property);
+      }
+    };
+  }, [ref, scope]);
+}

package/src/ui/useComposerAutosize.ts

@@ -0,0 +1,54 @@
+import { useCallback, useLayoutEffect, type RefObject } from "react";
+
+/** Keep both composers between two and eight visual lines without changing focus or selection. */
+export function useComposerAutosize(ref: RefObject<HTMLTextAreaElement | null>, value: string) {
+  const resize = useCallback(() => {
+    const element = ref.current;
+    if (!element || element.clientWidth === 0) return;
+    const style = window.getComputedStyle(element);
+    const lineHeight = parseFloat(style.lineHeight) || (parseFloat(style.fontSize) || 16) * 1.6;
+    const padding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+    const border = (parseFloat(style.borderTopWidth) || 0) + (parseFloat(style.borderBottomWidth) || 0);
+    const borderBox = style.boxSizing === "border-box";
+    const extra = borderBox ? padding + border : 0;
+    const minimum = Math.ceil(lineHeight * 2 + extra);
+    const maximum = Math.ceil(lineHeight * 8 + extra);
+    const scrollTop = element.scrollTop;
+    element.style.minHeight = `${minimum}px`;
+    element.style.maxHeight = `${maximum}px`;
+    element.style.overflowY = "hidden";
+    element.style.height = "auto";
+    const contentHeight = element.value ? element.scrollHeight + (borderBox ? border : -padding) : minimum;
+    element.style.height = `${Math.max(minimum, Math.min(maximum, contentHeight))}px`;
+    element.style.overflowY = contentHeight > maximum ? "auto" : "hidden";
+    element.scrollTop = scrollTop;
+  }, [ref]);
+
+  useLayoutEffect(resize, [resize, value]);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    let width = element.clientWidth;
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+      const nextWidth = element.clientWidth;
+      if (nextWidth === width) return;
+      width = nextWidth;
+      resize();
+    });
+    observer?.observe(element);
+    const viewport = window.visualViewport;
+    const fonts = document.fonts;
+    const pointer = typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)") : null;
+    window.addEventListener("resize", resize);
+    viewport?.addEventListener("resize", resize);
+    fonts?.addEventListener("loadingdone", resize);
+    pointer?.addEventListener("change", resize);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", resize);
+      viewport?.removeEventListener("resize", resize);
+      fonts?.removeEventListener("loadingdone", resize);
+      pointer?.removeEventListener("change", resize);
+    };
+  }, [ref, resize]);
+}