@xgspz/cli-ui 0.0.0-stage → 0.6.15

package/src/ui/Transcript.tsx

@@ -0,0 +1,435 @@
+// 转录里的一行。移植自 operator-oss/app/orchestrator/Transcript.tsx，类名、结构、文案保持一致；
+// 去掉了对话任务用不到的部分（/clear、重新登录、浏览器交还……这些动作 center 不提供）。
+import { subagentFields } from "../core/subagents";
+import { SubagentEntry } from "./SubagentChat";
+import { memo, useContext, useId, useState } from "react";
+import { FileOpenContext, FileLinkContext } from "./fileLinks";
+import type { AskAnswers, AskQuestion, InputRequest, Msg, ToolData, ToolPeek } from "../core/types";
+import { splitMessage } from "../core/blocks";
+import { Icon } from "./icons";
+import { Markdown } from "./Markdown";
+import { clockTime, diffCls, splitAttachments, type MsgAttachment } from "./format";
+import { Avatar } from "./shared";
+import { toolDataOf } from "./transcriptModel";
+import { TextBlockCard, isLongMessage } from "./TextBlock";
+import { ReferenceCard } from "./ReferenceCard";
+import { splitQuotedMessage } from "./reference";
+
+// 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<boolean | null>(null);
+  const bodyId = useId();
+  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" title={data.title} aria-expanded={expandable ? showBody : undefined} aria-controls={expandable ? bodyId : undefined} style={{ cursor: expandable ? "pointer" : "default" }} onClick={() => expandable && setOpen(!showBody)}>
+        {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" id={bodyId}>
+          {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);
+    try {
+      const e = await onSubmit(input.id, vals.map((v, i) => input.fields[i].secret ? v : v.trim()));
+      if (e) { setErr(e); setBusy(false); }
+    } catch (error) {
+      setErr(error instanceof Error ? error.message : "提交失败，请重试");
+      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 }) {
+  const open = useContext(FileOpenContext), resolve = useContext(FileLinkContext);
+  if (!items.length) return null;
+  return (
+    <div className="msg-attachments">
+      {items.map((a, i) => {
+        const url = attachmentUrl?.(a) ?? resolve?.(a.path, a.kind === "image" ? "image" : "link") ?? 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}`} onClick={event => { if (!event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey && event.button === 0 && open?.(a.path)) event.preventDefault(); }}>{Icon.clip()} <span>{a.kind === "file" ? a.name : label}</span></a>
+          : open && a.kind === "file" ? <button key={i} className="file-chip" onClick={() => open(a.path)} title={`打开 ${a.name}`}>{Icon.clip()} <span>{a.name}</span></button> : <span key={i} className="file-chip" title={a.name}>{Icon.clip()} <span>{label}</span></span>;
+      })}
+    </div>
+  );
+}
+
+/** 用户消息正文：普通文字按 markdown 渲染，附件 / 长粘贴是可折叠卡片，很长的纯文字也折叠。 */
+function UserBody({ content, attachmentUrl, viewing = true }: { content: string; attachmentUrl?: (a: MsgAttachment) => string | null; viewing?: boolean }) {
+  const { text, attachments } = splitAttachments(content);
+  // 看板上正在看的东西（缺省随消息带上的那块）：配置成不显示时转录里也不显示。
+  const parts = (text ? splitMessage(text) : []).filter((p) => viewing || p.kind !== "block" || p.block.kind !== "viewing");
+  return (
+    <>
+      {parts.map((part, i) => part.kind === "block"
+        ? part.block.kind === "context" ? <ReferenceCard key={i} title="参考内容" text={part.block.text.replace(/^用户在右侧看板里引用了下面这些，供这条消息参考：\n/, "")} /> : <TextBlockCard key={i} block={part.block} />
+        : <QuotedText key={i} text={part.text} />)}
+      <AttachmentStrip items={attachments} attachmentUrl={attachmentUrl} />
+    </>
+  );
+}
+
+function QuotedText({ text }: { text: string }) {
+  const quoted = splitQuotedMessage(text);
+  return quoted ? <><ReferenceCard title={quoted.quote.author} text={quoted.quote.text} />{quoted.text && <LongText text={quoted.text} />}</> : <LongText text={text} />;
+}
+
+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;
+  /** 用户消息里「看板正在看」那块显示成卡片；false = 不显示（照样发给了智能体）。缺省显示。 */
+  viewingBlock?: boolean;
+}
+const DEFAULT_VIEW: MessageViewOptions = { timestamps: true, initialBadge: true, userLabel: "你", agentName: "智能体" };
+
+export interface MessageHandlers {
+  onQuote?: (msg:Msg,selected?:string)=>void;
+  /** 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} viewing={view.viewingBlock} />
+          {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);
+    const child = subagentFields(m);
+    if (child.subagentMessage) return null;
+    if (child.subagent) return <SubagentEntry info={child.subagent} generation={m.generation} />;
+    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} viewing={view.viewingBlock} /> : m.content && <Markdown>{m.content}</Markdown>}
+      </div>
+      {handlers.onQuote && m.content.trim() && <div className="msg-actions"><button aria-label="引用消息" title="引用消息或选中文字" onMouseDown={e=>e.preventDefault()} onClick={e=>{const selection=window.getSelection();const body=e.currentTarget.closest('.msg')?.querySelector('.msg-body');const selected=selection&&body?.contains(selection.anchorNode)&&body.contains(selection.focusNode)?selection.toString().trim():'';handlers.onQuote?.(m,selected||undefined);}}>{Icon.doc()} 引用</button></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/UploadProgress.tsx

@@ -0,0 +1,46 @@
+import { fmtSize } from "../board/fileKind";
+import { Icon } from "./icons";
+
+export type UploadProgressStatus = "queued" | "checking" | "uploading" | "verifying" | "ready" | "cancelled" | "error";
+export interface UploadProgressProps {
+  name: string;
+  status: UploadProgressStatus;
+  bytes?: number;
+  total?: number;
+  error?: string;
+  onCancel?: () => void;
+  onRetry?: () => void;
+  onRemove?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+const labels: Record<UploadProgressStatus, string> = { queued: "等待上传", checking: "校验中", uploading: "上传中", verifying: "确认中", ready: "已上传", cancelled: "已取消", error: "上传失败" };
+
+/** Presentation only: the upload owner controls status, retries and cancellation. */
+export function UploadProgress({ name, status, bytes, total, error, onCancel, onRetry, onRemove, disabled, className }: UploadProgressProps) {
+  const size = typeof total === "number" && Number.isFinite(total) && total >= 0 ? Math.floor(total) : undefined;
+  const received = typeof bytes === "number" && Number.isFinite(bytes) ? Math.max(0, Math.min(Math.floor(bytes), size ?? Infinity)) : undefined;
+  const active = status === "queued" || status === "checking" || status === "uploading" || status === "verifying";
+  const percentage = status === "ready" ? 100 : status === "uploading" && received !== undefined && size !== undefined && size > 0 ? Math.floor(received / size * 100) : undefined;
+  const count = status === "ready" && size !== undefined ? fmtSize(size) : received !== undefined ? `${fmtSize(received)}${size !== undefined ? ` / ${fmtSize(size)}` : ""}` : size !== undefined ? fmtSize(size) : "";
+  const label = labels[status];
+  return <div className={`cli-upload-progress${className ? ` ${className}` : ""}`} data-upload-status={status}>
+    <span className="cli-upload-icon" aria-hidden="true">{Icon.doc()}</span>
+    <div className="cli-upload-body">
+      <div className="cli-upload-head">
+        <span className="cli-upload-name" title={name}>{name}</span>
+        <span className="cli-upload-status" role="status" aria-live="polite" aria-atomic="true"><span className="cli-upload-sr">{name}：</span>{label}</span>
+      </div>
+      {(count || percentage !== undefined) && <div className="cli-upload-meta"><span>{count}</span>{percentage !== undefined && <span aria-hidden="true">{percentage}%</span>}</div>}
+      {(active || status === "ready") && <div className={`cli-upload-track${percentage === undefined ? " indeterminate" : ""}`} role="progressbar" aria-label={`上传进度：${name}`} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percentage} aria-valuetext={`${label}${count ? `，${count}` : ""}`}>
+        <span className="cli-upload-fill" style={percentage === undefined ? undefined : { width: `${percentage}%` }} />
+      </div>}
+      {status === "error" && error && <div className="cli-upload-error" role="alert">{error}</div>}
+    </div>
+    {((active && onCancel) || (!active && (onRemove || (status === "error" || status === "cancelled") && onRetry))) && <div className="cli-upload-actions">
+      {active && onCancel && <button type="button" disabled={disabled} className="cli-upload-action" title="取消上传" aria-label={`取消上传 ${name}`} onClick={onCancel}>{Icon.x()}</button>}
+      {(status === "error" || status === "cancelled") && onRetry && <button type="button" disabled={disabled} className="cli-upload-action cli-upload-retry" aria-label={`重试上传 ${name}`} onClick={onRetry}>重试</button>}
+      {!active && onRemove && <button type="button" disabled={disabled} className="cli-upload-action" title="移除上传记录" aria-label={`移除上传记录 ${name}`} onClick={onRemove}>{Icon.x()}</button>}
+    </div>}
+  </div>;
+}

package/src/ui/WorkspaceDrawer.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
+import { Icon } from "./icons";
+
+const useLayout = typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+export function useWorkspaceDrawer(ref: RefObject<HTMLElement | null>, forced = false) {
+  const [narrow, setNarrow] = useState(false);
+  useLayout(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measure = () => { const width = element.getBoundingClientRect().width; if (width > 0) setNarrow(width <= 640); };
+    measure();
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    resize?.observe(element);
+    window.addEventListener("resize", measure);
+    return () => { resize?.disconnect(); window.removeEventListener("resize", measure); };
+  }, [ref]);
+  return forced || narrow;
+}
+
+/** Keep the board in the same React position when it moves between desktop and mobile layouts. */
+export function WorkspaceDrawer({ enabled, open, onClose, children }: {
+  enabled: boolean; open: boolean; onClose: () => void; children: ReactNode;
+}) {
+  const panel = useRef<HTMLDivElement>(null);
+  const closeButton = useRef<HTMLButtonElement>(null);
+  const close = useRef(onClose);
+  close.current = onClose;
+  useEffect(() => {
+    if (!enabled || !open) return;
+    const previous = document.activeElement as HTMLElement | null;
+    closeButton.current?.focus({ preventScroll: true });
+    const onKey = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      // Menus rendered into document.body handle their own Escape/Tab first.
+      const dialog = (document.activeElement as HTMLElement | null)?.closest('[role="dialog"]');
+      if (dialog && dialog !== panel.current) return;
+      if (event.key === "Escape") { event.preventDefault(); close.current(); return; }
+      if (event.key !== "Tab" || !panel.current) return;
+      const items = [...panel.current.querySelectorAll<HTMLElement>('button:not(:disabled),a[href],input:not(:disabled),textarea:not(:disabled),select:not(:disabled),[tabindex="0"]')]
+        .filter(item => !item.closest('[hidden],[inert]') && getComputedStyle(item).display !== "none" && getComputedStyle(item).visibility !== "hidden");
+      const first = items[0], last = items.at(-1);
+      if (!first || !last) return;
+      if (!panel.current.contains(document.activeElement) || (event.shiftKey && document.activeElement === first)) { event.preventDefault(); (event.shiftKey ? last : first).focus({ preventScroll: true }); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus({ preventScroll: true }); }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      const current = document.activeElement;
+      if ((current === document.body || panel.current?.contains(current)) && previous?.isConnected && !previous.closest('[hidden],[inert]')) previous.focus({ preventScroll: true });
+    };
+  }, [enabled, open]);
+  return <div className={enabled ? "workspace-drawer-layer" : "workspace-board-slot"} hidden={enabled && !open}>
+    <button type="button" className="workspace-drawer-scrim" aria-label="收起工作区遮罩" tabIndex={-1} hidden={!enabled} onClick={onClose} />
+    <div ref={panel} className={enabled ? "workspace-drawer-panel" : "workspace-board-slot"} role={enabled && open ? "dialog" : undefined} aria-modal={enabled && open ? true : undefined} aria-label={enabled ? "工作区看板" : undefined}>
+      <div className="workspace-drawer-heading" hidden={!enabled}>
+        <span>工作区</span>
+        <button ref={closeButton} type="button" className="workspace-drawer-close" aria-label="关闭工作区" title="关闭工作区" onClick={onClose}>{Icon.x()}</button>
+      </div>
+      {children}
+    </div>
+  </div>;
+}

package/src/ui/WorkspaceTabs.tsx

@@ -0,0 +1,60 @@
+import { useLayoutEffect, useRef, type ReactNode } from "react";
+
+/** A scrollable header shared by the conversation and its existing board tabs. */
+export function WorkspaceTabs({ title, subtitle, chatActive, onChat, onTabsHost }: {
+  title: string;
+  subtitle?: ReactNode;
+  chatActive: boolean;
+  onChat: () => void;
+  onTabsHost: (host: HTMLDivElement | null) => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    const box = ref.current;
+    if (!box) return;
+    let focused: HTMLElement | null = null;
+    const onFocus = (event: FocusEvent) => { focused = event.target as HTMLElement; };
+    const tabs = () => [...box.querySelectorAll<HTMLButtonElement>('button[role="tab"]')].filter(tab => !tab.disabled);
+    const reveal = (tab: HTMLElement) => {
+      const outer = box.getBoundingClientRect(), inner = tab.getBoundingClientRect();
+      if (inner.left < outer.left) box.scrollLeft -= outer.left - inner.left + 8;
+      else if (inner.right > outer.right) box.scrollLeft += inner.right - outer.right + 8;
+    };
+    const sync = () => {
+      const items = tabs(), active = items.find(tab => tab.getAttribute("aria-selected") === "true") ?? items[0];
+      for (const item of items) item.tabIndex = item === active ? 0 : -1;
+      if (active) reveal(active);
+      if (active && focused && !focused.isConnected && document.activeElement === document.body) active.focus({ preventScroll: true });
+    };
+    // Board tabs are portals: listen on the DOM container so both adapters share keyboard behavior.
+    const onKey = (event: KeyboardEvent) => {
+      const items = tabs(), index = items.indexOf(event.target as HTMLButtonElement);
+      if (index < 0 || event.altKey || event.metaKey || event.ctrlKey) return;
+      let next: number;
+      if (event.key === "ArrowRight") next = (index + 1) % items.length;
+      else if (event.key === "ArrowLeft") next = (index - 1 + items.length) % items.length;
+      else if (event.key === "Home") next = 0;
+      else if (event.key === "End") next = items.length - 1;
+      else return;
+      event.preventDefault();
+      for (const item of items) item.tabIndex = item === items[next] ? 0 : -1;
+      items[next].focus({ preventScroll: true });
+      reveal(items[next]);
+    };
+    sync();
+    box.addEventListener("keydown", onKey);
+    box.addEventListener("focusin", onFocus);
+    const mutations = new MutationObserver(sync);
+    mutations.observe(box, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-selected", "disabled"] });
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+    resize?.observe(box);
+    return () => { box.removeEventListener("keydown", onKey); box.removeEventListener("focusin", onFocus); mutations.disconnect(); resize?.disconnect(); };
+  }, []);
+  return <div ref={ref} className="sh-main workspace-tabs" role="tablist" aria-label="对话与工作区">
+    <button type="button" className={`workspace-chat-tab${chatActive ? " on" : ""}`} role="tab" aria-selected={chatActive} aria-label={`对话：${title}`} title={title} onClick={onChat}>
+      {subtitle && <span className="workspace-chat-subtitle">{subtitle}</span>}
+      <span className="workspace-chat-title"><span className="workspace-chat-kind">对话</span><span>{title}</span></span>
+    </button>
+    <div className="workspace-board-tabs-host" ref={onTabsHost} />
+  </div>;
+}