@spzxg/cli-ui 0.6.0 → 0.6.2

package/src/core/config.ts

@@ -1,5 +1,5 @@
 /**
- * 组件的界面配置：哪些模块显示、文案怎么写。全部可选，不给就是缺省（默认文案；cli-chat 的顶部栏缺省隐藏，其余全部显示）。
+ * 组件的界面配置：哪些模块显示、文案怎么写。全部可选，缺省值见下方 DEFAULT_*_CONFIG。
  *
  *   <CliChat config={{ header: { title: true, status: true }, composer: { placeholder: "问点什么…", fileUpload: false } }} />
  *   <CliMsgList config={{ header: { refresh: false }, card: { turns: false } }} />
@@ -39,15 +39,15 @@ export interface CliChatConfig {
     placeholderRunning?: string;
     /** 不能发送时（对话已结束、只读）的占位文案。 */
     placeholderDisabled?: string;
-    /** 底部「⏎ 发送 / ⇧⏎ 换行」提示。 */
+    /** 底部「Shift + Enter 换行」提示；发送快捷键仍为 Enter。 */
     hints?: boolean;
     /** 底部字数统计。 */
     charCount?: boolean;
-    /** 文件上传（按钮、拖拽、粘贴文件）。只收 TXT / Markdown / Word。 */
+    /** 文件上传（按钮、拖拽、粘贴文件）。只收文档：Word、Excel、Markdown、TXT、HTML、CSV。 */
     fileUpload?: boolean;
     /** 「文件」按钮的文字。 */
     fileButtonText?: string;
-    /** 运行中的停止按钮。 */
+    /** 执行控制：普通对话停止当前轮次，一次性子任务暂停 / 继续。 */
     stop?: boolean;
     /** 运行中允许发消息排队；false = 运行中不能发。 */
     queue?: boolean;
@@ -60,6 +60,8 @@ export interface CliChatConfig {
     sessionLabel?: boolean;
     /** 消息时间。 */
     timestamps?: boolean;
+    /** 已随项目上下文发送的初始提示。缺省不渲染；true 显示原文。 */
+    initialPrompt?: boolean;
     /** 首条消息上的「初始提示」「已随项目上下文发送」标记。 */
     initialBadge?: boolean;
     /** 工具调用卡片（命令、读写文件……）；false 只留文字往来（提问卡片照常显示）。 */
@@ -73,6 +75,12 @@ export interface CliChatConfig {
   labels?: { user?: string; agent?: string };
   /** 新对话的空白页。false = 不显示。 */
   empty?: boolean | { title?: string; description?: string };
+  /**
+   * 输入框上方显示哪些看板引用（不显示的照样随下一条消息带给智能体，只是不占地方、也不能点掉）。
+   * 种类：viewing（看板上正在看的文件 / 浏览器页面，缺省带上）、file、selection（选中的一段）、browser、changes，或宿主自定义的种类；
+   * "*" = 没列出的种类。true 全显示，false 全不显示。缺省 { viewing: false }：正在看的不显示，明确引用的都显示。
+   */
+  refs?: boolean | Record<string, boolean>;
 }
 
 export interface ResolvedChatConfig {
@@ -81,25 +89,31 @@ export interface ResolvedChatConfig {
     show: boolean; placeholder: string; placeholderNew: string; placeholderRunning: string; placeholderDisabled: string | null;
     hints: boolean; charCount: boolean; fileUpload: boolean; fileButtonText: string; stop: boolean; queue: boolean;
   };
-  transcript: { nav: boolean; sessionLabel: boolean; timestamps: boolean; initialBadge: boolean; tools: boolean; runningIndicator: boolean; status: boolean };
+  transcript: { nav: boolean; sessionLabel: boolean; timestamps: boolean; initialPrompt: boolean; initialBadge: boolean; tools: boolean; runningIndicator: boolean; status: boolean };
   labels: { user: string; agent: string };
   empty: { show: boolean; title: string; description: string };
+  /** 按种类显示 / 不显示；"*" 是没列出的种类。用 refShown 判断。 */
+  refs: Record<string, boolean>;
 }
 
+/** 这个种类的看板引用（"viewing" = 正在看的）要不要显示在输入框上方。 */
+export const refShown = (cfg: Pick<ResolvedChatConfig, "refs">, kind: string) => cfg.refs[kind] ?? cfg.refs["*"] ?? true;
+
 export const DEFAULT_CHAT_CONFIG: ResolvedChatConfig = {
   // 顶部栏缺省整栏隐藏（模型、状态、用量这些对使用者是干扰），需要的项在 config.header 里打开。
   header: { show: true, crumb: false, export: false, title: false, agent: false, usage: false, model: false, status: false, close: false },
   composer: {
     show: true,
-    placeholder: "在“{title}”中回复 {agent}…（可拖入 TXT / Markdown / Word 文件）",
-    placeholderNew: "输入第一条消息，开始新对话…（可拖入 TXT / Markdown / Word 文件）",
+    placeholder: "回复 {agent}…",
+    placeholderNew: "输入消息，开始新对话…",
     placeholderRunning: "排队一条后续消息…（本轮结束后发送）",
     placeholderDisabled: null,
     hints: true, charCount: true, fileUpload: true, fileButtonText: "文件", stop: true, queue: true,
   },
-  transcript: { nav: true, sessionLabel: true, timestamps: true, initialBadge: true, tools: true, runningIndicator: true, status: false },
+  transcript: { nav: true, sessionLabel: true, timestamps: true, initialPrompt: false, initialBadge: true, tools: true, runningIndicator: true, status: false },
   labels: { user: "你", agent: "智能体" },
-  empty: { show: true, title: "开始一个新对话", description: "在下面输入第一条消息。可以附上 TXT、Markdown 或 Word 文件，内容会转成文字一起发送。" },
+  empty: { show: true, title: "开始一个新对话", description: "在下面输入第一条消息。可以附上 Word、Excel、Markdown、TXT、HTML、CSV 文档，内容会转成文字一起发送。" },
+  refs: { "*": true, viewing: false },
 };
 
 export function resolveChatConfig(config: CliChatConfig = {}): ResolvedChatConfig {
@@ -107,18 +121,13 @@ export function resolveChatConfig(config: CliChatConfig = {}): ResolvedChatConfi
   const header = config.header === true ? allOn(d.header) : toggle(config.header, d.header);
   const composer = toggle(config.composer, d.composer);
   const empty = toggle(config.empty, d.empty);
-  // 没有文件上传时，缺省文案里的「可拖入文件」提示也去掉。
-  if (!composer.fileUpload) {
-    const strip = (text: string) => text.replace(/（可拖入 TXT \/ Markdown \/ Word 文件）$/, "");
-    if (!isObj(config.composer) || config.composer.placeholder === undefined) composer.placeholder = strip(composer.placeholder);
-    if (!isObj(config.composer) || config.composer.placeholderNew === undefined) composer.placeholderNew = strip(composer.placeholderNew);
-  }
   return {
     header,
     composer,
     transcript: { ...d.transcript, ...defined(config.transcript) },
     labels: { ...d.labels, ...defined(config.labels) },
     empty,
+    refs: config.refs === true ? { "*": true } : config.refs === false ? { "*": false } : { ...d.refs, ...(defined(isObj(config.refs) ? config.refs : undefined) as Record<string, boolean>) },
   };
 }
 
@@ -133,7 +142,7 @@ export interface CliMsgListConfig {
     newButton?: boolean;
     /** 「+ 对话」按钮的文字。 */
     newButtonText?: string;
-    /** 刷新按钮。 */
+    /** 手动刷新按钮，缺省隐藏；列表仍按 pollMs 自动更新。 */
     refresh?: boolean;
     /** 上下文说明框（需同时给 context 或 onEditContext）。 */
     context?: boolean;
@@ -179,7 +188,7 @@ export interface ResolvedMsgListConfig {
 }
 
 export const DEFAULT_MSGLIST_CONFIG: ResolvedMsgListConfig = {
-  header: { show: true, title: true, newButton: true, newButtonText: "对话", refresh: true, context: true },
+  header: { show: true, title: true, newButton: true, newButtonText: "对话", refresh: false, context: true },
   search: "auto",
   searchPlaceholder: "搜索对话…",
   grouped: false,

package/src/core/conversation.ts

@@ -403,10 +403,10 @@ function batchViewMessages(conv: ConvState): Msg[] {
   }
   const generation = out.length ? out[out.length - 1].generation : 1;
   const note = (id: string, content: string) => out.push({ id: `batch-${id}`, role: "system", content, generation });
+  for (const q of task?.queued ?? []) out.push({ id: `batch-q-${q.id}`, role: "queued", content: q.prompt, generation, ...(q.created_at ? { ts: new Date(q.created_at).getTime() } : {}) });
   if (task?.conversation) {
     // 对话式：像对话一样显示——还没派发的消息是「排队中」气泡，没有「子任务」字样。
     if (CHAT_TASK_ERROR[task.status]) note(`err-${task.id}-${task.attempt}`, `⚠ ${CHAT_TASK_ERROR[task.status]}${task.last_error ? `：${describeTurnError(task.last_error)}` : ""}`);
-    for (const q of task.queued ?? []) out.push({ id: `batch-q-${q.id}`, role: "queued", content: q.prompt, generation, ...(q.created_at ? { ts: new Date(q.created_at).getTime() } : {}) });
     return out;
   }
   if (!task) {

package/src/core/xlsx.ts

@@ -0,0 +1,142 @@
+// Excel（.xlsx / .xlsm）→ 纯文本：每个工作表一段 CSV，发给智能体。
+//
+// .xlsx 是 ZIP 里的一堆 XML：workbook.xml 列出工作表，sharedStrings.xml 是共享字符串，worksheets/sheetN.xml 是单元格。
+// 只取单元格的值（公式取缓存的结果），不要格式、图片、图表；日期按单元格格式认出来写成 2026-08-10（带时间的加上时分），
+// 百分比写成 0.6%（和表格里看到的一致）。
+// 老版 .xls（二进制）读不了，调用方提示另存为 .xlsx。
+
+export interface SheetText { name: string; hidden: boolean; rows: string[][] }
+
+const NS_MAIN = "http://schemas.openxmlformats.org/spreadsheetml/2006/main";
+const NS_REL = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+
+/** 内置的日期 / 时间数字格式编号。 */
+const BUILTIN_DATE_FMTS = new Set([14, 15, 16, 17, 18, 19, 20, 21, 22, 27, 30, 36, 45, 46, 47, 50, 57]);
+
+const parseXml = (text: string) => new DOMParser().parseFromString(text, "application/xml");
+const els = (root: Document | Element, tag: string) => Array.from(root.getElementsByTagNameNS(NS_MAIN, tag));
+
+/** 「A1」→ 列号（从 0 开始）。 */
+export function columnIndex(ref: string) {
+  let n = 0;
+  for (const ch of ref) {
+    const c = ch.toUpperCase().charCodeAt(0);
+    if (c < 65 || c > 90) break;
+    n = n * 26 + (c - 64);
+  }
+  return n - 1;
+}
+
+/** 自定义格式里有年月日时（引号里的、[颜色] 不算）就当日期。 */
+function isDateFormat(code: string) {
+  const bare = code.replace(/"[^"]*"/g, "").replace(/\[[^\]]*\]/g, "").replace(/\\./g, "");
+  return /[ymdhs]/i.test(bare) && !/^[#0.,%E+\-\s]*$/i.test(bare);
+}
+
+/** Excel 序列日期 → 2026-08-10 / 2026-08-10 14:30。 */
+export function excelDate(serial: number) {
+  const ms = Math.round((serial - 25569) * 86_400_000); // 1970-01-01 = 25569
+  const d = new Date(ms);
+  if (Number.isNaN(d.getTime())) return String(serial);
+  const p = (n: number) => String(n).padStart(2, "0");
+  const date = `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())}`;
+  const secs = d.getUTCHours() * 3600 + d.getUTCMinutes() * 60 + d.getUTCSeconds();
+  if (!secs) return date;
+  const time = `${p(d.getUTCHours())}:${p(d.getUTCMinutes())}${d.getUTCSeconds() ? `:${p(d.getUTCSeconds())}` : ""}`;
+  return serial < 1 ? time : `${date} ${time}`;
+}
+
+/** 单元格里的文字：<t> 连起来（富文本是多段 <r><t>），不要注音（<rPh>）。 */
+function richText(el: Element) {
+  return els(el, "t").filter((t) => t.parentElement?.localName !== "rPh").map((t) => t.textContent ?? "").join("");
+}
+
+/** 读出所有工作表（按工作簿里的顺序）。 */
+export async function readXlsx(data: ArrayBuffer): Promise<SheetText[]> {
+  // 按需加载（mammoth 也用它，不额外增加体积）。
+  const mod = (await import("jszip")) as unknown as { default?: typeof import("jszip") } & typeof import("jszip");
+  const JSZip = mod.default ?? mod;
+  const zip = await JSZip.loadAsync(data);
+  const read = async (path: string) => { const f = zip.file(path); return f ? f.async("string") : null; };
+
+  const workbook = await read("xl/workbook.xml");
+  if (!workbook) throw new Error("不是 Excel 工作簿");
+  const rels = new Map<string, string>();
+  const relsXml = await read("xl/_rels/workbook.xml.rels");
+  if (relsXml) {
+    for (const r of Array.from(parseXml(relsXml).getElementsByTagName("Relationship"))) {
+      const target = r.getAttribute("Target") ?? "";
+      rels.set(r.getAttribute("Id") ?? "", target.startsWith("/") ? target.slice(1) : `xl/${target}`);
+    }
+  }
+  const shared: string[] = [];
+  const sharedXml = await read("xl/sharedStrings.xml");
+  if (sharedXml) for (const si of els(parseXml(sharedXml), "si")) shared.push(richText(si));
+
+  // 哪些样式是日期 / 百分比：cellXfs 第 i 个 → numFmtId → 内置格式或自定义格式。
+  const dateStyles = new Set<number>();
+  const percentStyles = new Set<number>();
+  const stylesXml = await read("xl/styles.xml");
+  if (stylesXml) {
+    const styles = parseXml(stylesXml);
+    const custom = new Map(els(styles, "numFmt").map((f) => [Number(f.getAttribute("numFmtId")), f.getAttribute("formatCode") ?? ""]));
+    const xfs = els(styles, "cellXfs")[0];
+    if (xfs) {
+      Array.from(xfs.children).filter((x) => x.localName === "xf").forEach((xf, i) => {
+        const id = Number(xf.getAttribute("numFmtId") ?? 0);
+        const code = custom.get(id);
+        if (BUILTIN_DATE_FMTS.has(id) || (code !== undefined && isDateFormat(code))) dateStyles.add(i);
+        else if (id === 9 || id === 10 || (code !== undefined && code.replace(/"[^"]*"/g, "").includes("%"))) percentStyles.add(i);
+      });
+    }
+  }
+
+  const sheets: SheetText[] = [];
+  for (const s of els(parseXml(workbook), "sheet")) {
+    const name = s.getAttribute("name") ?? `Sheet${sheets.length + 1}`;
+    const path = rels.get(s.getAttributeNS(NS_REL, "id") ?? s.getAttribute("r:id") ?? "") ?? `xl/worksheets/sheet${sheets.length + 1}.xml`;
+    const xml = await read(path);
+    if (!xml) continue;
+    const rows: string[][] = [];
+    for (const row of els(parseXml(xml), "row")) {
+      const r = Number(row.getAttribute("r")) || rows.length + 1;
+      const cells: string[] = [];
+      let next = 0;
+      for (const c of Array.from(row.children).filter((x) => x.localName === "c")) {
+        const ref = c.getAttribute("r");
+        const col = ref ? columnIndex(ref) : next;
+        next = col + 1;
+        const type = c.getAttribute("t");
+        const v = els(c, "v")[0]?.textContent ?? "";
+        let value: string;
+        if (type === "s") value = shared[Number(v)] ?? "";
+        else if (type === "inlineStr") value = richText(c);
+        else if (type === "b") value = v === "1" ? "TRUE" : v === "0" ? "FALSE" : v;
+        else if (type === "str" || type === "e" || !v) value = v;
+        else if (dateStyles.has(Number(c.getAttribute("s") ?? -1)) && Number.isFinite(Number(v))) value = excelDate(Number(v));
+        else if (percentStyles.has(Number(c.getAttribute("s") ?? -1)) && Number.isFinite(Number(v))) value = `${Number((Number(v) * 100).toPrecision(12))}%`;
+        else value = v;
+        cells[col] = value;
+      }
+      rows[r - 1] = Array.from(cells, (x) => x ?? "");
+    }
+    const dense = Array.from(rows, (x) => x ?? []);
+    // 去掉末尾的空行、每行末尾的空格子。
+    while (dense.length && dense[dense.length - 1].every((x) => !x)) dense.pop();
+    for (const row of dense) while (row.length && !row[row.length - 1]) row.pop();
+    sheets.push({ name, hidden: (s.getAttribute("state") ?? "visible") !== "visible", rows: dense });
+  }
+  return sheets;
+}
+
+const csvCell = (v: string) => (/[",\n\r]/.test(v) ? `"${v.replace(/"/g, '""')}"` : v);
+
+/** 工作表 → 发给智能体的文字：每个工作表一个标题 + CSV。 */
+export function sheetsToText(sheets: SheetText[]) {
+  return sheets
+    .map((s) => {
+      const head = `## 工作表：${s.name}${s.hidden ? "（隐藏）" : ""}（${s.rows.length} 行）`;
+      return s.rows.length ? `${head}\n${s.rows.map((r) => r.map(csvCell).join(",")).join("\n")}` : `${head}\n（空）`;
+    })
+    .join("\n\n");
+}

package/src/styles.css

@@ -46,6 +46,37 @@
 .cli-ui .cli-count{font-family:var(--mono);}
 .cli-ui .cli-count.over{color:var(--red);}
 
+/* 组件在侧栏中也保持清晰的标题、操作和输入区。 */
+.cli-ui.cli-chat{container:cli-chat / inline-size;}
+.cli-ui .sess-head .sh-main{min-width:0;flex:1 1 180px;}
+.cli-ui .sess-head .sh-tools{min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;}
+.cli-ui .sess-head .crumb{overflow-wrap:anywhere;}
+.cli-ui .cli-export{white-space:nowrap;}
+.cli-ui .comp-area textarea{min-width:0;min-height:48px;}
+.cli-ui .comp-foot{gap:8px;padding:8px 10px;background:transparent;border-top:0;flex-wrap:wrap;}
+.cli-ui .cli-attach{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 8px;border-radius:7px;color:var(--ink-3);font-size:12px;}
+.cli-ui .cli-attach:hover{background:var(--surface-2);color:var(--ink);}
+.cli-ui .cli-attach svg{width:15px;height:15px;}
+.cli-ui .send.cli-send{display:inline-flex;justify-content:center;gap:5px;width:auto;min-width:76px;padding:0 12px;font-size:12.5px;font-weight:600;}
+.cli-ui .send.cli-send:disabled{background:var(--surface-2);color:var(--ink-4);box-shadow:none;opacity:1;}
+.cli-ui .cli-export:focus-visible,.cli-ui .cli-attach:focus-visible,.cli-ui .send:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
+.cli-ui .cli-task-control{height:34px;padding:0 10px;white-space:nowrap;}
+.cli-ui .cli-task-control:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
+@container cli-chat (max-width:560px){
+  .cli-ui .sess-head{gap:8px;padding:12px 14px;}
+  .cli-ui .sess-head .sh-main{flex-basis:100%;}
+  .cli-ui .sess-head .sh-tools{flex:1;justify-content:flex-start;margin-left:0;}
+  .cli-ui .sess-head .cli-export{margin-left:auto;}
+  .cli-ui .tw{padding:0 16px;}
+  .cli-ui .composer{padding:10px 12px;}
+}
+
+/* 普通文本和 URL 换行；代码、宽表格只在各自区域内横向滚动。聊天和看板预览共用。 */
+.cli-ui .transcript-wrap,.cli-ui .transcript,.cli-ui .tw,.cli-ui .msg,.cli-ui .msg-body,.cli-ui .md{min-width:0;}
+.cli-ui .msg-body,.cli-ui .md{overflow-wrap:anywhere;}
+.cli-ui .md pre{max-width:100%;overflow-wrap:normal;}
+.cli-ui .md table{display:block;max-width:100%;overflow-x:auto;}
+
 /* 排队气泡下的等待原因（中枢给的：节点连不上、没有可用节点……） */
 .cli-ui .cli-queued-note{margin-top:6px;font-size:12px;color:var(--amber);}
 

package/src/ui/TextBlock.tsx

@@ -22,7 +22,7 @@ export const TextBlockCard = memo(function TextBlockCard({ block, onRemove }: {
   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" ? Icon.board() : block.kind === "background" ? Icon.flag() : Icon.clip()}</span>
+        <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-sp" />

package/src/ui/Transcript.tsx

@@ -283,9 +283,10 @@ function AttachmentStrip({ items, attachmentUrl }: { items: MsgAttachment[]; att
 }
 
 /** 用户消息正文：普通文字按 markdown 渲染，附件 / 长粘贴是可折叠卡片，很长的纯文字也折叠。 */
-function UserBody({ content, attachmentUrl }: { content: string; attachmentUrl?: (a: MsgAttachment) => string | null }) {
+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) : [];
+  // 看板上正在看的东西（缺省随消息带上的那块）：配置成不显示时转录里也不显示。
+  const parts = (text ? splitMessage(text) : []).filter((p) => viewing || p.kind !== "block" || p.block.kind !== "viewing");
   return (
     <>
       {parts.map((part, i) => part.kind === "block"
@@ -310,7 +311,11 @@ function LongText({ text }: { text: string }) {
 }
 
 /** 消息行的显示选项（来自组件配置）。要引用稳定，否则 memo 失效。 */
-export interface MessageViewOptions { timestamps: boolean; initialBadge: boolean; userLabel: string; agentName: string }
+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 {
@@ -340,7 +345,7 @@ export const MessageView = memo(function MessageView({ m, initial: isInitial, hi
       <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} />
+          <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>
@@ -388,7 +393,7 @@ export const MessageView = memo(function MessageView({ m, initial: isInitial, hi
       )}
       <div className="msg-body">
         {initial && <div className="initial-tag">{Icon.spark()} 已随项目上下文发送</div>}
-        {isUser ? <UserBody content={m.content} attachmentUrl={handlers.attachmentUrl} /> : m.content && <Markdown>{m.content}</Markdown>}
+        {isUser ? <UserBody content={m.content} attachmentUrl={handlers.attachmentUrl} viewing={view.viewingBlock} /> : m.content && <Markdown>{m.content}</Markdown>}
       </div>
     </div>
   );

package/src/ui/icons.tsx

@@ -54,6 +54,7 @@ export const Icon = {
   external: (p?: P) => S(<><path d="M14 4h6v6" /><path d="M20 4l-9 9" /><path d="M19 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5" /></>, p),
   copy: (p?: P) => S(<><rect x={9} y={9} width={12} height={12} rx={2} /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" /></>, p),
   play: (p?: P) => S(<path d="M7 5l11 7-11 7z" />, p),
+  pause: (p?: P) => S(<><path d="M9 5v14" /><path d="M15 5v14" /></>, p),
   stop: (p?: P) => S(<rect x={6} y={6} width={12} height={12} rx={2} />, p),
   sliders: (p?: P) => S(<><line x1={4} y1={21} x2={4} y2={14} /><line x1={4} y1={10} x2={4} y2={3} /><line x1={12} y1={21} x2={12} y2={12} /><line x1={12} y1={8} x2={12} y2={3} /><line x1={20} y1={21} x2={20} y2={16} /><line x1={20} y1={12} x2={20} y2={3} /><line x1={1} y1={14} x2={7} y2={14} /><line x1={9} y1={8} x2={15} y2={8} /><line x1={17} y1={16} x2={23} y2={16} /></>, p),
   search: (p?: P) => S(<><circle cx={11} cy={11} r={7} /><line x1={21} y1={21} x2={16.65} y2={16.65} /></>, p),