@spzxg/cli-ui 0.6.5 → 0.6.7

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/TextBlock.tsx

@@ -14,6 +14,8 @@ 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);
@@ -24,14 +26,14 @@ export const TextBlockCard = memo(function TextBlockCard({ block, onRemove }: {
       <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">{fmtCount(chars)} 字 · {fmtCount(lines)} 行</span>
+        <span className="cli-block-meta">{original ? staged ? "原件已暂存" : "已保存到工作区" : `${fmtCount(chars)} 字 · ${fmtCount(lines)} 行`}</span>
         <span className="cli-block-sp" />
-        <button type="button" className="cli-block-btn" onClick={() => { setOpen((o) => !o); setLimit(EXPANDED_STEP); }}>
+        {!original && <button type="button" className="cli-block-btn" onClick={() => { setOpen((o) => !o); setLimit(EXPANDED_STEP); }}>
           {open ? "收起" : "展开"}
-        </button>
+        </button>}
         {onRemove && <button type="button" className="cli-block-x" title="移除" aria-label={`移除 ${block.name}`} onClick={onRemove}>{Icon.x()}</button>}
       </div>
-      <pre className="cli-block-body">{shown}{!open && block.text.length > preview.length ? "…" : ""}</pre>
+      {!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)} 字，继续显示

package/src/ui/Transcript.tsx

@@ -1,6 +1,7 @@
 // 转录里的一行。移植自 operator-oss/app/orchestrator/Transcript.tsx，类名、结构、文案保持一致；
 // 去掉了对话任务用不到的部分（/clear、重新登录、浏览器交还……这些动作 center 不提供）。
-import { memo, useState } from "react";
+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";
@@ -9,6 +10,8 @@ import { clockTime, diffCls, splitAttachments, type MsgAttachment } from "./form
 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 = [
@@ -60,21 +63,22 @@ function PeekView({ peek, expandable, onExpand }: { peek: ToolPeek; expandable:
 }
 
 function ToolView({ data }: { data: ToolData }) {
-  const [open, setOpen] = useState(false);
+  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);
+  const showBody = open ?? (!!data.isError && data.result !== undefined);
   return (
     <div className="tool">
-      <button className="tool-h" style={{ cursor: expandable ? "pointer" : "default" }} onClick={() => expandable && setOpen((o) => !o)}>
+      <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">
+        <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 && (
@@ -186,8 +190,13 @@ function InputView({ input, agentLabel, onSubmit, onBrowser }: { input: InputReq
     if (!complete || busy || !onSubmit) return;
     setBusy(true);
     setErr(null);
-    const e = await onSubmit(input.id, vals.map((v) => v.trim()));
-    if (e) { setErr(e); setBusy(false); }
+    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">
@@ -265,18 +274,19 @@ function HandoffLine({ text, onBrowser, onHandback }: { text: string; onBrowser?
 // 附件条：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) ?? null;
+        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}`}>{Icon.clip()} <span>{label}</span></a>
-          : <span key={i} className="file-chip" title={a.name}>{Icon.clip()} <span>{label}</span></span>;
+          ? <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>
   );
@@ -290,13 +300,18 @@ function UserBody({ content, attachmentUrl, viewing = true }: { content: string;
   return (
     <>
       {parts.map((part, i) => part.kind === "block"
-        ? <TextBlockCard key={i} block={part.block} />
-        : <LongText key={i} text={part.text} />)}
+        ? 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>;

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

package/src/ui/format.ts

@@ -90,7 +90,9 @@ export function splitAttachments(content: string): { text: string; attachments:
   for (const line of content.split("\n")) {
     const m = ATTACHMENT_RE.exec(line.trim());
     const parts = m ? m[2].split(/[\\/]/).filter(Boolean) : [];
-    if (m && parts.length >= 3 && parts[parts.length - 3] === "uploads") {
+    const 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 {

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