@xgspz/cli-ui 0.0.0-stage → 0.6.14

package/src/ui/Markdown.tsx

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

package/src/ui/Popover.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
+import { createPortal } from "react-dom";
+export function Popover({ children, onClose, className, ariaLabel = "选项", placement = "auto", align = "end", returnFocusRef }: { children: React.ReactNode; onClose: () => void; className?: string; ariaLabel?: string; placement?: "auto" | "top"; align?: "start" | "end"; returnFocusRef?: RefObject<HTMLElement | null> }) {
+  const markerRef = useRef<HTMLSpanElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const placeRef = useRef<(() => void) | null>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  useLayoutEffect(() => {
+    const anchor = markerRef.current?.parentElement;
+    const menu = menuRef.current;
+    if (!anchor || !menu) return;
+    const place = () => {
+      const r = anchor.getBoundingClientRect();
+      const vv = window.visualViewport;
+      const topEdge = vv?.offsetTop ?? 0;
+      const vh = vv?.height ?? window.innerHeight;
+      const leftEdge = vv?.offsetLeft ?? 0;
+      const vw = vv?.width ?? window.innerWidth;
+      menu.style.minWidth = "0";
+      menu.style.maxWidth = `${Math.max(0, vw - 16)}px`;
+      menu.style.maxHeight = `${Math.max(0, vh - 16)}px`;
+      const mw = menu.offsetWidth, mh = menu.offsetHeight;
+      const preferredLeft = align === "start" ? r.left : r.right - mw;
+      const left = Math.max(leftEdge + 8, Math.min(preferredLeft, leftEdge + vw - mw - 8));
+      const below = r.bottom + 6;
+      const preferredTop = placement !== "top" && below + mh <= topEdge + vh - 8 ? below : r.top - mh - 6;
+      const top = Math.max(topEdge + 8, Math.min(preferredTop, topEdge + vh - mh - 8));
+      setPos({ top, left });
+    };
+    placeRef.current = place;
+    place();
+    const observer = new ResizeObserver(place);
+    observer.observe(menu);
+    window.addEventListener("resize", place);
+    window.visualViewport?.addEventListener("resize", place);
+    window.visualViewport?.addEventListener("scroll", place);
+    return () => { placeRef.current = null; observer.disconnect(); window.removeEventListener("resize", place); window.visualViewport?.removeEventListener("resize", place); window.visualViewport?.removeEventListener("scroll", place); };
+  }, [placement, align]);
+
+  const placed = pos !== null;
+  useEffect(() => {
+    if (placed) menuRef.current?.querySelector<HTMLElement>("button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex='0']")?.focus({ preventScroll: true });
+  }, [placed]);
+
+  useEffect(() => {
+    const close = (e: PointerEvent) => {
+      if (!menuRef.current?.contains(e.target as Node) && !markerRef.current?.parentElement?.contains(e.target as Node)) onClose();
+    };
+    const onScroll = (e: Event) => {
+      const menu = menuRef.current;
+      if (e.target instanceof Node && menu?.contains(e.target)) return;
+      const focused = document.activeElement;
+      // A phone keyboard may scroll the outer workspace while the card owns input focus.
+      if (menu?.classList.contains("composer-popover") && focused && menu.contains(focused) && focused.matches("input,textarea,select,[contenteditable='true']")) {
+        placeRef.current?.();
+        return;
+      }
+      onClose();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault(); e.stopPropagation(); onClose();
+        (returnFocusRef?.current ?? markerRef.current?.parentElement?.querySelector<HTMLButtonElement>("button"))?.focus();
+      }
+      if (e.key === "Tab") {
+        const items = Array.from(menuRef.current?.querySelectorAll<HTMLElement>("button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),a[href],[tabindex='0']") ?? []);
+        if (!items.length) return;
+        if (e.shiftKey && document.activeElement === items[0]) { e.preventDefault(); items.at(-1)?.focus(); }
+        else if (!e.shiftKey && document.activeElement === items.at(-1)) { e.preventDefault(); items[0].focus(); }
+      }
+    };
+    window.addEventListener("pointerdown", close, true);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("keydown", onKey, true);
+    return () => { window.removeEventListener("pointerdown", close, true); window.removeEventListener("scroll", onScroll, true); window.removeEventListener("keydown", onKey, true); };
+  }, [onClose, returnFocusRef]);
+
+  return (
+    <>
+      <span ref={markerRef} style={{ display: "none" }} />
+      {createPortal(
+        <div className="cli-ui" data-theme={markerRef.current?.closest("[data-theme]")?.getAttribute("data-theme") ?? "dark"}><div
+          ref={menuRef}
+          className={`popover${className ? ` ${className}` : ""}`} role="dialog" aria-label={ariaLabel}
+          style={{ position: "fixed", top: pos?.top ?? -9999, left: pos?.left ?? -9999, right: "auto", visibility: pos ? "visible" : "hidden" }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div></div>,
+        document.body,
+      )}
+    </>
+  );
+}

package/src/ui/QueuedMessages.tsx

@@ -0,0 +1,110 @@
+import { useEffect, useMemo, useRef, useState, type MouseEvent, type ReactNode } from "react";
+import type { Msg } from "../core/types";
+import { splitMessage } from "../core/blocks";
+import { withoutBoardContext } from "../board/context";
+import { Icon } from "./icons";
+import { splitAttachments, type MsgAttachment } from "./format";
+import { MessageView, type MessageViewOptions } from "./Transcript";
+import { Popover } from "./Popover";
+
+const detailView: MessageViewOptions = { timestamps: false, initialBadge: false, userLabel: "你", agentName: "智能体", viewingBlock: false };
+type QueueAction = (message: Msg) => void | Promise<unknown>;
+export interface QueuedMessagesProps {
+  scopeKey: string;
+  messages: readonly Msg[];
+  /** 删除：从队列中撤回。不传 = 只读（三个操作都不显示）。 */
+  onCancel?: QueueAction;
+  /**
+   * 立即发送：打断正在执行的回复，排队消息随即按顺序发出。只在有回复正在执行时传；
+   * 只对排在最前面的一条可用（后面的要等前面的先发）。
+   */
+  onSendNow?: QueueAction;
+  /** 没有 onSendNow 时按钮上的说明（缺省：当前没有正在执行的回复）。 */
+  sendNowUnavailable?: string;
+  /** 编辑：先撤回这一条，撤回成功后把内容放回输入框（与输入框里已有的草稿合并）。 */
+  onEdit?: QueueAction;
+  attachmentUrl?: (attachment: MsgAttachment) => string | null;
+  renderMessage?: (message: Msg) => ReactNode;
+}
+
+/** The original live queue remains authoritative; this view never removes or resends messages locally. */
+export function QueuedMessages({ scopeKey, messages, onCancel, onSendNow, sendNowUnavailable, onEdit, attachmentUrl, renderMessage }: QueuedMessagesProps) {
+  if (!messages.length) return null;
+  return <div className="cli-queue" role="list" aria-label={`排队消息（${messages.length}）`}>
+    {messages.map((message, index) => <QueuedMessage key={`${scopeKey}:${message.id}`} message={message} index={index} onCancel={onCancel} onSendNow={onSendNow} sendNowUnavailable={sendNowUnavailable} onEdit={onEdit} attachmentUrl={attachmentUrl} renderMessage={renderMessage} />)}
+  </div>;
+}
+
+type Busy = "send" | "edit" | "cancel";
+const BUSY_TEXT: Record<Busy, string> = { send: "正在打断当前回复…", edit: "正在撤回到输入框…", cancel: "正在删除…" };
+
+function QueuedMessage({ message, index, onCancel, onSendNow, sendNowUnavailable, onEdit, attachmentUrl, renderMessage }: Omit<QueuedMessagesProps, "messages" | "scopeKey"> & { message: Msg; index: number }) {
+  const [open, setOpen] = useState(false);
+  const [copying, setCopying] = useState(false);
+  const [feedback, setFeedback] = useState<{ error: boolean; text: string } | null>(null);
+  // 一次只做一个操作：在途时三个按钮都不可点，免得重复撤回 / 重复打断。
+  const [busy, setBusy] = useState<Busy | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const alive = useRef(true);
+  useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []);
+  const returnFocusRef = useRef<HTMLButtonElement | null>(null);
+  const content = useMemo(() => withoutBoardContext(message.content), [message.content]);
+  const preview = useMemo(() => {
+    const { text, attachments } = splitAttachments(content);
+    const body = splitMessage(text).map(part => part.kind === "text" ? part.text : part.block.name).join(" · ").replace(/\s+/g, " ").trim().slice(0, 160);
+    const summary = [body, ...attachments.map(attachment => attachment.name)].filter(Boolean).join(" · ");
+    return { summary: summary || "查看排队消息", attachments };
+  }, [content]);
+  const thumbnail = preview.attachments.filter(attachment => attachment.kind === "image").map(attachment => ({ attachment, url: attachmentUrl?.(attachment) })).find(item => item.url);
+  const toggle = (event: MouseEvent<HTMLButtonElement>) => { returnFocusRef.current = event.currentTarget; setOpen(value => !value); setFeedback(null); };
+  const copy = async () => {
+    if (copying) return;
+    setCopying(true); setFeedback(null);
+    try {
+      if (!navigator.clipboard?.writeText) throw new Error("当前浏览器不支持复制，请选择消息内容手动复制");
+      await navigator.clipboard.writeText(content);
+      setFeedback({ error: false, text: "消息已复制" });
+    } catch (error) {
+      setFeedback({ error: true, text: error instanceof Error ? error.message : "复制失败，请重试" });
+    } finally { setCopying(false); }
+  };
+  const run = async (kind: Busy, action: QueueAction | undefined) => {
+    if (!action || busy) return;
+    setBusy(kind); setActionError(null); setOpen(false);
+    try {
+      await action(message);
+    } catch (error) {
+      // 宿主自己报过错的会正常返回；抛出来的在这一行里说明。
+      if (alive.current) setActionError(error instanceof Error ? error.message : String(error));
+    } finally {
+      if (alive.current) setBusy(null);
+    }
+  };
+  const n = index + 1;
+  const actions = !!onCancel;
+  const sendBlocked = !onSendNow ? sendNowUnavailable ?? "当前没有正在执行的回复，排队消息会自动发送" : index > 0 ? `前面还有 ${index} 条排队消息，会先按顺序发送` : null;
+  const sendTitle = busy === "send" ? BUSY_TEXT.send : sendBlocked ?? "立即发送：打断当前回复，马上发送这条消息";
+  return <div className="cli-queue-row" role="listitem" data-queued-id={message.id} aria-busy={busy ? true : undefined}>
+    <span className="cli-queue-icon" aria-hidden="true">{Icon.list()}</span>
+    <button className="cli-queue-summary" aria-label={`查看第 ${n} 条排队消息`} aria-expanded={open} aria-haspopup="dialog" onClick={toggle} title={preview.summary}>
+      {thumbnail?.url && <img className="cli-queue-thumb" src={thumbnail.url} alt={thumbnail.attachment.name} loading="lazy" onError={event => { event.currentTarget.hidden = true; }} />}
+      <span className="cli-queue-text">{busy ? BUSY_TEXT[busy] : preview.summary}</span>
+    </button>
+    {actions && <div className="cli-queue-acts">
+      <button className="cli-queue-act cli-queue-send" title={sendTitle} aria-label={`立即发送第 ${n} 条排队消息`}
+        disabled={!!busy || !!sendBlocked} aria-busy={busy === "send" || undefined} onClick={() => void run("send", onSendNow)}>{busy === "send" ? <span className="spinner" /> : Icon.enter()}</button>
+      {onEdit && <button className="cli-queue-act cli-queue-edit" title={busy === "edit" ? BUSY_TEXT.edit : "编辑：撤回这条消息，放回输入框修改"} aria-label={`编辑第 ${n} 条排队消息`}
+        disabled={!!busy} aria-busy={busy === "edit" || undefined} onClick={() => void run("edit", onEdit)}>{busy === "edit" ? <span className="spinner" /> : Icon.edit()}</button>}
+      <button className="cli-queue-act cli-queue-remove" title={busy === "cancel" ? BUSY_TEXT.cancel : "删除：从队列中移除"} aria-label={`删除第 ${n} 条排队消息`}
+        disabled={!!busy} aria-busy={busy === "cancel" || undefined} onClick={() => void run("cancel", onCancel)}>{busy === "cancel" ? <span className="spinner" /> : Icon.x()}</button>
+    </div>}
+    {actionError && <div className="cli-queue-error" role="alert">{actionError}</div>}
+    {open && <Popover className="composer-popover cli-queue-popover" ariaLabel="排队消息内容" placement="top" align="start" returnFocusRef={returnFocusRef} onClose={() => setOpen(false)}>
+      <div className="pop-sec">第 {n} 条排队消息</div>
+      <div className="cli-queue-detail" onClick={event => { if (event.defaultPrevented && event.target instanceof Element && event.target.closest("a")) setOpen(false); }}>{renderMessage ? renderMessage({ ...message, role: "user", content }) : <MessageView m={{ ...message, role: "user", content }} initial={false} hideWho handlers={{ attachmentUrl }} view={detailView} />}</div>
+      {message.note && <div className="cli-queue-note">{message.note}</div>}
+      <div className="cli-queue-actions"><button className="pop-item" disabled={copying} onClick={() => void copy()}>{Icon.copy()} {copying ? "复制中…" : "复制消息"}</button></div>
+      {feedback && <div className="cli-queue-feedback" role={feedback.error ? "alert" : "status"}>{feedback.text}</div>}
+    </Popover>}
+  </div>;
+}

package/src/ui/ReferenceCard.tsx

@@ -0,0 +1,28 @@
+import { useId, useState, type ReactNode } from "react";
+import { Icon } from "./icons";
+import { Markdown } from "./Markdown";
+import { referencePreview, referenceTitle } from "./reference";
+
+/** A reference stays separate from editable text; expanding it never changes the payload. */
+export function ReferenceCard({ title, text, onRemove, disabled, renderContent, className, removeLabel }: {
+  title: string; text: string; onRemove?: () => void; disabled?: boolean;
+  renderContent?: (text: string) => ReactNode; className?: string; removeLabel?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const bodyId = useId();
+  const displayTitle = referenceTitle(title);
+  return <section className={`cli-reference${open ? " open" : ""}${className ? ` ${className}` : ""}`} aria-label={`引用 ${displayTitle}`}>
+    <div className="cli-reference-head">
+      <button type="button" className="cli-reference-toggle" aria-expanded={open} aria-controls={bodyId} aria-label={`${open ? "收起" : "展开"}引用 ${displayTitle}`} onClick={() => setOpen(value => !value)}>
+        <span className="cli-reference-icon" aria-hidden="true">{Icon.doc()}</span>
+        <span className="cli-reference-kind">引用</span>
+        <span className="cli-reference-title cli-ref-l" title={title}>{displayTitle}</span>
+        <span className="cli-reference-state">{open ? "收起" : "展开"}</span>
+        <span className="cli-reference-chevron" aria-hidden="true">{open ? Icon.chevUp() : Icon.chevDown()}</span>
+      </button>
+      {onRemove && <button type="button" className="cli-reference-remove" disabled={disabled} aria-label={removeLabel ?? `移除引用 ${title}`} title="移除引用" onClick={onRemove}>{Icon.x()}</button>}
+    </div>
+    {open ? <div className="cli-reference-body" id={bodyId}>{text.length > 50_000 ? <pre>{text}</pre> : renderContent ? renderContent(text) : <Markdown>{text}</Markdown>}</div>
+      : <div className="cli-reference-preview">{referencePreview(text) || "引用内容"}</div>}
+  </section>;
+}

package/src/ui/SubagentChat.tsx

@@ -0,0 +1,233 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import type { Msg } from "../core/types";
+import { childMessages, subagentFields, type LoadSubagent, type SubagentInfo, type SubagentTranscript } from "../core/subagents";
+import { Icon } from "./icons";
+
+const STATUS = { running: "运行中", completed: "已完成", failed: "失败", cancelled: "已取消", unknown: "状态未知" };
+type Selection = { scope: string; generation: number; info: SubagentInfo };
+const SubagentContext = createContext<((info: SubagentInfo, generation: number) => void) | null>(null);
+
+export function SubagentHistoryBoundary({ children }: { children: ReactNode }) { return <SubagentContext.Provider value={null}>{children}</SubagentContext.Provider>; }
+
+export function SubagentEntry({ info, generation }: { info: SubagentInfo; generation: number }) {
+  const open = useContext(SubagentContext);
+  return <div className="msg msg-tool">
+    <button type="button" className="subagent-entry" disabled={!open} onClick={() => open?.(info, generation)} aria-label={`查看子代理：${info.title}`}>
+      <span className="subagent-entry-icon">{Icon.spark()}</span>
+      <span className="subagent-entry-name">{info.title}</span>
+      <span className={`subagent-status ${info.status}`}>{STATUS[info.status] ?? STATUS.unknown}</span>
+      {Icon.chevRight()}
+    </button>
+  </div>;
+}
+
+/** One shared viewer for embedded Chat and the native Operator chat. It never controls execution. */
+export function SubagentChatScope({ scopeKey, messages, load, renderMessage, children }: {
+  scopeKey: string; messages: Msg[]; load?: LoadSubagent;
+  renderMessage: (message: Msg, agentName: string) => ReactNode; children: ReactNode;
+}) {
+  const [selection, setSelection] = useState<Selection | null>(null);
+  const selected = selection?.scope === scopeKey ? selection : null;
+  const open = useCallback((info: SubagentInfo, generation: number) => setSelection({ scope: scopeKey, generation, info }), [scopeKey]);
+  const close = useCallback(() => setSelection(null), []);
+  const root = useRef<HTMLDivElement>(null);
+  const [narrow, setNarrow] = useState(true);
+  useLayoutEffect(() => {
+    const element = root.current;
+    if (!element) return;
+    const measure = () => { const width = element.getBoundingClientRect().width; if (width > 0) setNarrow(width < 900); };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(element);
+    return () => observer?.disconnect();
+  }, []);
+  return <SubagentContext.Provider value={open}>
+    <div ref={root} className={`subagent-chat-scope${selected ? " has-subagent" : ""}${narrow ? " narrow" : ""}`}>
+      <div className="subagent-chat-main" inert={!!selected && narrow || undefined}>{children}</div>
+      {selected && <SubagentPanel key={`${scopeKey}:${selected.generation}:${selected.info.id}`} selection={selected} messages={messages} load={load} renderMessage={renderMessage} onClose={close} modal={narrow} />}
+    </div>
+  </SubagentContext.Provider>;
+}
+
+/** 子代理记录按动静补读时，相邻两次至少隔这么久。 */
+const SUBAGENT_REFRESH_GAP_MS = 2_000;
+
+function SubagentPanel({ selection, messages, load, renderMessage, onClose, modal }: {
+  selection: Selection; messages: Msg[]; load?: LoadSubagent;
+  renderMessage: (message: Msg, agentName: string) => ReactNode; onClose: () => void; modal: boolean;
+}) {
+  const [snapshot, setSnapshot] = useState<(SubagentTranscript & { before?: string }) | null>(null);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [loading, setLoading] = useState(!!load);
+  const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
+  const panel = useRef<HTMLElement>(null);
+  const closeButton = useRef<HTMLButtonElement>(null);
+  const scroll = useRef<HTMLDivElement>(null);
+  const follow = useRef(true);
+  const [following, setFollowing] = useState(true);
+  const [shownCount, setShownCount] = useState(120);
+  const { id } = selection.info;
+
+  // 不定时轮询：打开时读一次；之后父对话的实时流里这个子代理有了新动静（状态、更新时间、新的子消息），
+  // 或页面回到前台时再读——仅在服务端说记录还会变（refreshable）且子代理还在跑时；相邻两次至少隔 2 秒，挤在一起的合并。
+  const live = useRef(false);
+  const refreshSoon = useRef<(() => void) | null>(null);
+  useEffect(() => {
+    let disposed = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let inflight = false, again = false, last = 0;
+    if (!load) { setLoading(false); return; }
+    setLoading(true); setError(null);
+    const refresh = async () => {
+      if (disposed) return;
+      if (inflight) { again = true; return; }
+      inflight = true; last = Date.now();
+      try {
+        const value = await load(id, selection.generation);
+        if (value.subagent?.id !== id || !Array.isArray(value.messages)) throw new Error("子代理记录与当前选择不匹配");
+        if (disposed) return;
+        setSnapshot(previous => {
+          const overlap = previous?.messages.some(old => value.messages.some(row => row.id === old.id));
+          const byId = new Map((previous?.messages ?? []).map(row => [row.id, row]));
+          for (const row of value.messages) byId.set(row.id, row);
+          return { ...value, messages: [...byId.values()],
+            older: overlap ? previous?.older ?? value.older : value.older,
+            before: overlap ? previous?.before : value.messages[0]?.id };
+        }); setError(null);
+        live.current = !!value.refreshable && ["running", "unknown"].includes(value.subagent.status);
+      } catch (cause) {
+        if (!disposed) setError(cause instanceof Error ? cause.message : String(cause));
+      } finally {
+        inflight = false;
+        if (!disposed) setLoading(false);
+        if (again && !disposed) { again = false; schedule(); }
+      }
+    };
+    const schedule = () => {
+      if (disposed || timer || !live.current) return;
+      timer = setTimeout(() => { timer = undefined; void refresh(); }, Math.max(0, SUBAGENT_REFRESH_GAP_MS - (Date.now() - last)));
+    };
+    refreshSoon.current = () => { if (document.visibilityState !== "hidden") schedule(); };
+    const onVisibility = () => { if (document.visibilityState === "visible") schedule(); };
+    document.addEventListener("visibilitychange", onVisibility);
+    void refresh();
+    return () => { disposed = true; if (timer) clearTimeout(timer); refreshSoon.current = null; document.removeEventListener("visibilitychange", onVisibility); };
+  }, [load, id, selection.generation, attempt]);
+  // 父对话里这个子代理的动静：只看实时流（不看自己读回来的快照，免得读一次又触发下一次）。
+  const parentActivity = useMemo(() => {
+    let mark = "";
+    for (const message of messages) {
+      if (message.generation !== selection.generation) continue;
+      const candidate = subagentFields(message).subagent;
+      if (candidate?.id === id) mark = `${candidate.status}:${candidate.updatedAt ?? 0}`;
+    }
+    return `${mark}|${childMessages(messages, id, selection.generation).length}`;
+  }, [messages, id, selection.generation]);
+  const seenActivity = useRef(parentActivity);
+  useEffect(() => {
+    if (seenActivity.current === parentActivity) return;
+    seenActivity.current = parentActivity;
+    refreshSoon.current?.();
+  }, [parentActivity]);
+
+  const info = useMemo(() => {
+    let latest = snapshot?.subagent ?? selection.info;
+    for (const message of messages) {
+      if (message.generation !== selection.generation) continue;
+      const candidate = subagentFields(message).subagent;
+      if (candidate?.id === id && (candidate.updatedAt ?? 0) >= (latest.updatedAt ?? 0)) latest = candidate;
+    }
+    return latest;
+  }, [messages, snapshot, selection, id]);
+  const rows = useMemo(() => {
+    const merged = new Map((snapshot?.messages ?? []).map(row => [row.id, row]));
+    for (const row of childMessages(messages, id, selection.generation)) {
+      const previous = merged.get(row.id);
+      const updated = (value: typeof row) => {
+        const fields = subagentFields(value);
+        return fields.subagentMessage?.updatedAt ?? fields.subagent?.updatedAt ?? 0;
+      };
+      if (!previous || updated(row) >= updated(previous)) merged.set(row.id, row);
+    }
+    return childMessages([...merged.values()], id, selection.generation).sort((a, b) => (a.ts ?? a.created_at ?? 0) - (b.ts ?? b.created_at ?? 0)).map(row => {
+      const child = subagentFields(row).subagentMessage;
+      return { id: row.id, generation: row.generation, ts: row.ts ?? row.created_at,
+        role: child?.role ?? "tool", content: child?.tool ? JSON.stringify(child.tool) : child?.content ?? row.content } as Msg;
+    });
+  }, [snapshot, messages, id, selection.generation]);
+  const shown = rows.slice(-shownCount);
+  const promptAlreadyShown = rows.some(row => row.role === "user" && row.content === info.task);
+  const loadOlder = async () => {
+    if (rows.length > shownCount) { setShownCount(value => value + 120); return; }
+    if (!load || !snapshot?.before || loadingOlder) return;
+    const before = snapshot.before;
+    setLoadingOlder(true); setError(null);
+    try {
+      const value = await load(id, selection.generation, before);
+      if (value.subagent?.id !== id || !Array.isArray(value.messages)) throw new Error("子代理记录与当前选择不匹配");
+      setSnapshot(previous => {
+        const byId = new Map(value.messages.map(row => [row.id, row]));
+        for (const row of previous?.messages ?? []) byId.set(row.id, row);
+        return { ...(previous ?? value), messages: [...byId.values()],
+          ...(previous?.before === before ? { older: value.older, before: value.messages[0]?.id ?? before } : {}) };
+      });
+      setShownCount(count => count + 200);
+    } catch (cause) { setError(cause instanceof Error ? cause.message : String(cause)); }
+    finally { setLoadingOlder(false); }
+  };
+
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    closeButton.current?.focus({ preventScroll: true });
+    return () => {
+      if ((document.activeElement === document.body || panel.current?.contains(document.activeElement)) && previous?.isConnected && !previous.closest("[inert],[hidden]")) previous.focus({ preventScroll: true });
+    };
+  }, []);
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      const other = (document.activeElement as HTMLElement | null)?.closest('[role="dialog"]');
+      if (other && other !== panel.current) return;
+      if (event.key === "Escape") { event.preventDefault(); onClose(); return; }
+      if (!modal || event.key !== "Tab" || !panel.current) return;
+      const items = [...panel.current.querySelectorAll<HTMLElement>('button:not(:disabled),a[href],input:not(:disabled),textarea:not(:disabled),[tabindex="0"]')]
+        .filter(item => !item.closest("[hidden],[inert]") && getComputedStyle(item).display !== "none");
+      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(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [modal, onClose]);
+  useLayoutEffect(() => { if (follow.current && scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight; }, [rows, loading]);
+
+  return <>
+    {modal && <button className="subagent-chat-scrim" type="button" tabIndex={-1} aria-label="收起子代理详情" onClick={onClose} />}
+    <aside ref={panel} className="subagent-chat-panel" role="dialog" aria-modal={modal || undefined} aria-label={`子代理：${info.title}`}>
+      <div className="subagent-chat-header">
+        <div><span className="subagent-chat-caption">子代理</span><strong>{info.title}</strong></div>
+        <span className={`subagent-status ${info.status}`}>{STATUS[info.status] ?? STATUS.unknown}</span>
+        <button ref={closeButton} type="button" className="icon-btn" title="关闭子代理详情" aria-label="关闭子代理详情" onClick={onClose}>{Icon.x()}</button>
+      </div>
+      <div ref={scroll} className="subagent-chat-transcript transcript" onScroll={() => {
+        const element = scroll.current;
+        follow.current = !!element && element.scrollHeight - element.scrollTop - element.clientHeight < 60;
+        setFollowing(follow.current);
+      }}>
+        <div className="tw">
+          {loading && <div className="subagent-chat-note" role="status">正在读取子代理记录…</div>}
+          {error && <div className="subagent-chat-note error" role="alert">读取历史失败：{error} <button className="btn btn-ghost btn-sm" onClick={() => setAttempt(value => value + 1)}>重试</button></div>}
+          {!load && <div className="subagent-chat-note">当前接入未提供子代理历史接口，以下为已加载的记录。</div>}
+          {info.detailAvailability !== "full" && <div className="subagent-chat-note">{info.detailReason || (info.detailAvailability === "unavailable" ? "此智能体暂未提供子代理运行过程。" : "此智能体仅提供了部分运行记录。")}</div>}
+          {info.task && !promptAlreadyShown && renderMessage({ id: `prompt:${id}`, role: "user", content: info.task, generation: selection.generation }, info.title)}
+          {(rows.length > shownCount || (snapshot?.older ?? 0) > 0) && <div className="load-older"><button type="button" className="btn btn-ghost btn-sm" disabled={loadingOlder} onClick={() => { follow.current = false; setFollowing(false); void loadOlder(); }}>{loadingOlder ? "正在读取更早的记录…" : "加载更早的子代理记录"}</button></div>}
+          {shown.map(row => <div key={row.id}>{renderMessage(row, info.title)}</div>)}
+          {!loading && !error && !rows.length && <div className="subagent-chat-note">尚无可展示的运行记录。</div>}
+        </div>
+      </div>
+      {!following && <button type="button" className="btn btn-ghost btn-sm subagent-chat-latest" onClick={() => { follow.current = true; setFollowing(true); if (scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight; }}>跳到最新</button>}
+    </aside>
+  </>;
+}

package/src/ui/TextBlock.tsx

@@ -0,0 +1,51 @@
+import { memo, useState } from "react";
+import { charCount, type TextBlock } from "../core/blocks";
+import { fmtCount } from "./format";
+import { Icon } from "./icons";
+
+/** 展开后一次最多渲染这么多字；更长的再点「显示全部」，避免一次塞几十万字进 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 staged = /^\[文件原件：.*\]\(cli-upload:\/\//.test(block.text);
+  const original = staged || /^\[Attached (?:file|image): [^\r\n]+\]$/.test(block.text);
+  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() : block.kind === "context" || block.kind === "viewing" ? Icon.board() : block.kind === "background" ? Icon.flag() : Icon.clip()}</span>
+        <span className="cli-block-name" title={block.name}>{block.name}</span>
+        <span className="cli-block-meta">{original ? staged ? "原件已暂存" : "已保存到工作区" : `${fmtCount(chars)} 字 · ${fmtCount(lines)} 行`}</span>
+        <span className="cli-block-sp" />
+        {!original && <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>
+      {!original && <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;
+}