minimal-agent 0.10.0 → 0.12.0

package/src/ui/MessageList.tsx

@@ -0,0 +1,559 @@
+/**
+ * ============================================================
+ *  src/ui/MessageList.tsx —— 消息历史展示
+ * ------------------------------------------------------------
+ *  渲染历史消息（system 不显示）。
+ *  使用 Ink 5.x 的 <Static> commit 历史到终端 scrollback：
+ *  鼠标滚轮可以自然翻阅，性能也更好（已 commit 的行不会再 rerender）。
+ *
+ *  流式中的 assistant 文本不再在这里"假消息"显示——
+ *  streaming 阶段不渲染 live answer，turn 结束后再以正式的
+ *  assistant Message 进入 history 并被 <Static> commit。
+ *
+ *  banner 也走 Static 流（items[0]）。
+ *  Ink 5 的 Static 约定要求 Static 是兄弟节点中第一个，否则它上方的 live
+ *  兄弟会跟 Static commit 一起被重打到 stdout（用户实测看到 banner 被
+ *  反复打印 N 次）。把 banner 作为 Static 的第一个 item，banner 自然
+ *  commit 进 scrollback，启动时打印一次，不再反复出现。
+ *
+ *  v2 新增：
+ *    - assistant 分支渲染 reasoning_content / reasoning（💭 dim gray）；
+ *      窄终端（rows<28）折叠 2 行 + "▾ N 行 reasoning 折叠"
+ *    - tool 分支显示 tool_call_id 末 8 字符作为 [tool result · #abc12345]，
+ *      "▾ 完整 N 行（输入 /show xxx 查看）" 提示用户用命令展开
+ *    - user 分支前插 turn 头横线 "────── Turn N · 14:32 · 8s · 6 tools ──────"，
+ *      turn 边界扫描结果由 useMemo 一次性算出，挂在 StaticItem 上
+ *
+ *  样式约定：
+ *    banner:    青色加粗 minimal-agent + 暗灰色 provider/快捷键提示
+ *    user:      整条青色 + "> " 前缀（输入；前置 turn 横线，若 turnMeta 非空）
+ *    assistant: reasoning 暗灰带 💭，content 绿色 ⏺ 锚点 + 默认亮色正文（输出），tool_calls 黄色
+ *    tool:      暗灰色，折叠（默认只显示前 3 行，末尾提示用 /show 查看）
+ * ============================================================
+ */
+
+import React from 'react';
+import { Box, Static, Text } from 'ink';
+
+import { friendlyToolDescription } from '../loop.js';
+import { contentToDisplayText, contentToPlainText } from '../multimodal.js';
+import type { Message } from '../types.js';
+import { splitThinkBlocks } from '../utils/stripThink.js';
+import { figures } from './figures.js';
+import { type MdLineKind, renderMarkdownLines } from './markdown.js';
+import { theme } from './theme.js';
+
+/**
+ * Turn 元信息：每个非中断 user message 是一个 turn 的起点。
+ * 由 summarizeTurn() 一次性扫 history 算出，挂在 StaticItem 上喂给 MessageRow。
+ */
+export interface TurnMeta {
+  turnN: number;
+  /** turn 内最后一条 assistant/tool timestamp - user timestamp（缺失 fallback 0） */
+  durationMs: number;
+  /** turn 内所有 assistant 的 tool_calls.length 累加 */
+  toolsCount: number;
+  /** user message 的 timestamp（缺失 fallback Date.now()） */
+  timestamp: number;
+}
+
+/** 中断标记 user message 的固定内容（loop.ts 写入） */
+const INTERRUPT_USER_CONTENT = '(用户按下了 ESC/Ctrl+C 中断了任务)';
+
+/** Static items 的混合类型：banner 在 items[0]，messages 在后面。 */
+type StaticItem =
+  | { kind: 'banner'; text: string; key: string }
+  | {
+      kind: 'message';
+      msg: Message;
+      turnMeta: TurnMeta | null;
+      /** tool 消息的发起方人话描述（buildToolCallIndex 反查）；其余消息 null */
+      toolMeta: ToolCallMeta | null;
+      key: string;
+    };
+
+interface Props {
+  history: Message[];
+  /** compact / clearHistory 触发递增；作为 <Static key={}> 的 remount 触发器 */
+  compactGeneration: number;
+  /** banner 文案；不传则不渲染 banner 行 */
+  bannerText?: string;
+  /** 当前终端高度（行数）；用于窄终端 reasoning 折叠判断 */
+  terminalRows?: number;
+}
+
+const MAX_TOOL_PREVIEW_LINES = 3;
+/**
+ * 顾问意见的例外：它不是「工具输出」那类可略读的噪声，而是**第二个模型的独立评审**，
+ * 用户此刻最想看的就是它说了什么。折叠到 3 行等于藏起来 —— 而 `/advisor ask` 手动路径
+ * 反而是 ephemeralLine 全文输出，同一份内容两种待遇。
+ *
+ * 24 行的依据：顾问 persona 明确要求「只讲最关键的 1-3 点、不复述历史」，一份合规的
+ * 评审装得下；真跑长了仍然折叠 + /show，刷屏边界没有放开。
+ */
+const MAX_ADVISOR_PREVIEW_LINES = 24;
+
+/** tool 结果的预览行数上限（纯函数，单独导出可测）。 */
+export function toolPreviewCap(toolName?: string): number {
+  return toolName === 'Advisor' ? MAX_ADVISOR_PREVIEW_LINES : MAX_TOOL_PREVIEW_LINES;
+}
+/** 窄终端 reasoning 折叠阈值（行）—— 小于此值时 reasoning 只显示首 2 行 */
+const NARROW_TERMINAL_ROWS = 28;
+/** reasoning 超过此字符数截尾 —— 防撑爆历史 */
+const REASONING_MAX_CHARS = 2000;
+
+export interface AssistantDisplayLine {
+  /** prose = 可含 ANSI 的正文行；code = 原文逐字节；fence = ``` 围栏 */
+  content: string;
+  /**
+   * 行前缀。code/fence **恒为 ''**（复制安全断言点：代码顶格零装饰，
+   * 复制粘贴即原文）；prose 首条非空行 '⏺ '、续行 '  '（视觉锚点，
+   * 普通文字复制场景少，保留过程锚更重要）。
+   */
+  prefix: '⏺ ' | '  ' | '';
+  kind: MdLineKind;
+  /** wrap='end'：Ink 原样输出（不注入换行、不截断），超宽交终端软换行 */
+  wrap: 'end';
+}
+
+/**
+ * 把 assistant 最终正文拆成展示行：markdown 管线（src/ui/markdown.ts）产出
+ * prose/code/fence 三类行，⏺ 锚点落在**第一条非空 prose 行**——答案以代码块
+ * 开头时代码顶格在前、⏺ 顺延；全代码答案无 ⏺（代码纯净优先）。
+ * 纯文本无 markdown 特征时走快路径，与旧「按 \n 切 + wrap='end'」逐行一致。
+ */
+export function buildAssistantDisplayLines(text: string): AssistantDisplayLine[] {
+  if (text.length === 0) return [];
+  let anchorPlaced = false;
+  return renderMarkdownLines(text).map((line) => {
+    if (line.kind !== 'prose') {
+      return { content: line.text, prefix: '' as const, kind: line.kind, wrap: 'end' as const };
+    }
+    if (!anchorPlaced && line.text.trim() !== '') {
+      anchorPlaced = true;
+      return { content: line.text, prefix: '⏺ ' as const, kind: line.kind, wrap: 'end' as const };
+    }
+    return { content: line.text, prefix: '  ' as const, kind: line.kind, wrap: 'end' as const };
+  });
+}
+
+/** 工具调用元信息：tool 消息头行的「人话描述」来源（从同 turn assistant 反查）。 */
+export interface ToolCallMeta {
+  toolName: string;
+  friendly: string;
+}
+
+/**
+ * 扫 history 里全部 assistant.tool_calls，建 tool_call_id → 人话描述 索引。
+ * tool 消息本身只有 content + tool_call_id（不动 history 字节的前提下，
+ * 头行要显示「哪个工具在干什么」只能反查发起方）。<Static> 提交时序保证
+ * assistant(tool_calls) 恒先于对应 tool 消息入 history，索引命中无竞态。
+ */
+export function buildToolCallIndex(history: Message[]): Map<string, ToolCallMeta> {
+  const map = new Map<string, ToolCallMeta>();
+  for (const m of history) {
+    if (m.role !== 'assistant' || !m.tool_calls) continue;
+    for (const tc of m.tool_calls) {
+      map.set(tc.id, {
+        toolName: tc.function.name,
+        friendly: friendlyToolDescription(tc.function.name, tc.function.arguments),
+      });
+    }
+  }
+  return map;
+}
+
+/**
+ * 从 Agent 子任务报告的统计尾巴（agent.ts 固定格式
+ * 「（子任务「x」[type]：N 轮 · M 次工具调用，K 次失败）」）解析统计数。
+ * 失败结果（错误文案）不匹配 → null，头行只显示描述不显示 ✓ 统计。
+ */
+export function agentResultStats(
+  content: string,
+): { turns: number; tools: number; failed: number } | null {
+  const m = /（子任务「[^」]*」\[[^\]]+\]：(\d+) 轮 · (\d+) 次工具调用(?:，(\d+) 次失败)?）/.exec(
+    content,
+  );
+  if (!m) return null;
+  return { turns: Number(m[1]), tools: Number(m[2]), failed: m[3] ? Number(m[3]) : 0 };
+}
+
+/**
+ * 把 assistant message 的两个字符串型 reasoning 字段拼成单字符串。
+ * `reasoning_details` 是结构化数组，本期不展开。两个字段任一非空即返回拼接结果；
+ * 都空返回 ''。
+ *
+ * 导出供单测断言。
+ */
+export function combineReasoning(
+  message: Extract<Message, { role: 'assistant' }>,
+): string {
+  const parts: string[] = [];
+  if (
+    typeof message.reasoning_content === 'string' &&
+    message.reasoning_content.length > 0
+  ) {
+    parts.push(message.reasoning_content);
+  }
+  if (typeof message.reasoning === 'string' && message.reasoning.length > 0) {
+    parts.push(message.reasoning);
+  }
+  return parts.join('\n');
+}
+
+/**
+ * 扫一遍 history，按 user message 切分 turn，返回每条 message 对应的 turnMeta。
+ * 返回数组长度 = history.length，与 history 一一对应：
+ *   - user message（非中断）→ 该 turn 的 TurnMeta（turnN 递增，>=1）
+ *   - 中断标记 user / assistant / tool / system → null
+ *
+ * 算法：
+ *   1) 先识别"turn 起点"：所有非中断 user message
+ *   2) 每个 turn 起点 turnN 从 1 递增
+ *   3) turn 结束位置 = 下一个 turn 起点之前（或 history 末尾）
+ *   4) durationMs = turn 内最后一条 assistant/tool 的 timestamp - user.timestamp
+ *   5) toolsCount = turn 内所有 assistant.tool_calls?.length 累加
+ *
+ * 导出供单测断言。
+ */
+export function summarizeTurn(history: Message[]): Array<TurnMeta | null> {
+  const result: Array<TurnMeta | null> = new Array(history.length).fill(null);
+  // 找出所有 turn 起点的 index
+  const turnStartIndices: number[] = [];
+  for (let i = 0; i < history.length; i++) {
+    const m = history[i];
+    if (
+      m.role === 'user' &&
+      contentToPlainText(m.content) !== INTERRUPT_USER_CONTENT
+    ) {
+      turnStartIndices.push(i);
+    }
+  }
+  for (let t = 0; t < turnStartIndices.length; t++) {
+    const startIdx = turnStartIndices[t];
+    const endIdx =
+      t + 1 < turnStartIndices.length
+        ? turnStartIndices[t + 1] - 1
+        : history.length - 1;
+    const startMsg = history[startIdx];
+    const userTimestamp =
+      (startMsg as { timestamp?: number }).timestamp ?? Date.now();
+
+    let lastResponseTs: number | null = null;
+    let toolsCount = 0;
+    for (let j = startIdx + 1; j <= endIdx; j++) {
+      const m = history[j];
+      if (m.role === 'assistant') {
+        toolsCount += m.tool_calls?.length ?? 0;
+        if (typeof m.timestamp === 'number') lastResponseTs = m.timestamp;
+      } else if (m.role === 'tool') {
+        if (typeof m.timestamp === 'number') lastResponseTs = m.timestamp;
+      }
+    }
+    const durationMs =
+      lastResponseTs !== null ? Math.max(0, lastResponseTs - userTimestamp) : 0;
+    result[startIdx] = {
+      turnN: t + 1,
+      durationMs,
+      toolsCount,
+      timestamp: userTimestamp,
+    };
+  }
+  return result;
+}
+
+/** 格式化 timestamp 为 HH:MM（本地时区） */
+function formatTime(ts: number): string {
+  return new Date(ts).toTimeString().slice(0, 5);
+}
+
+/** 格式化耗时：<1s / 1.2s / 3m */
+function formatDuration(ms: number): string {
+  if (ms < 1000) return '<1s';
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  if (ms < 3_600_000) return `${Math.floor(ms / 60_000)}m`;
+  return `${Math.floor(ms / 3_600_000)}h`;
+}
+
+/**
+ * React.memo 包装。
+ *
+ * props 浅比较够用：
+ *  - history 引用变化才需要重算 items（useMemo 依赖正确）
+ *  - compactGeneration 数字
+ *  - bannerText / terminalRows 都是基础类型 / 启动后稳定
+ *
+ * App.tsx 中用 useDeferredValue(chat.history) 把 history 推后到低优先级队列，
+ * 配合此 memo，streaming 期间高频 setStreamingText 不再带着 MessageList
+ * 重算 items + Static reconcile。
+ */
+export const MessageList = React.memo(function MessageList({
+  history,
+  compactGeneration,
+  bannerText,
+  terminalRows,
+}: Props): JSX.Element {
+  const items: StaticItem[] = React.useMemo(() => {
+    const turnMetas = summarizeTurn(history);
+    const toolIndex = buildToolCallIndex(history);
+    return [
+      ...(bannerText
+        ? [
+            {
+              kind: 'banner' as const,
+              text: bannerText,
+              key: `banner-${bannerText.slice(0, 10)}`,
+            },
+          ]
+        : []),
+      ...history.map((m, idx) => ({
+        kind: 'message' as const,
+        msg: m,
+        turnMeta: turnMetas[idx],
+        toolMeta: m.role === 'tool' ? (toolIndex.get(m.tool_call_id) ?? null) : null,
+        // 纯派生 key：有 id 用 id，没有就用 idx 兜底。绝不在 render 期 mutate 消息对象
+        // （<Static> 已 commit 的行永不重绘，key 仅在 append 对账时用，idx 已足够稳定）。
+        key: m.id ?? `message-${idx}`,
+      })),
+    ];
+  }, [bannerText, history]);
+
+  // 窄终端判定（terminalRows 缺失时默认不折叠，保留完整 reasoning）
+  const foldReasoning =
+    typeof terminalRows === 'number' && terminalRows < NARROW_TERMINAL_ROWS;
+
+  return (
+    <Static items={items} key={compactGeneration}>
+      {(item) => {
+        if (item.kind === 'banner') {
+          return <BannerRow key={item.key} text={item.text} />;
+        }
+        return (
+          <MessageRow
+            key={item.key}
+            message={item.msg}
+            turnMeta={item.turnMeta}
+            toolMeta={item.toolMeta}
+            foldReasoning={foldReasoning}
+          />
+        );
+      }}
+    </Static>
+  );
+});
+
+function BannerRow({ text }: { text: string }): JSX.Element {
+  // text 形如 "minimal-agent  · provider/model · /new ... · Ctrl+C 中断"
+  // 拆出第一个 token "minimal-agent" 走加粗青色，剩下走暗灰。
+  const splitAt = text.indexOf('  ·');
+  const head = splitAt >= 0 ? text.slice(0, splitAt) : text;
+  const tail = splitAt >= 0 ? text.slice(splitAt) : '';
+  return (
+    <Box marginBottom={1}>
+      <Text color={theme.user} bold>
+        {head}
+      </Text>
+      {tail.length > 0 && <Text color={theme.subtle}>{tail}</Text>}
+    </Box>
+  );
+}
+
+function MessageRow({
+  message,
+  turnMeta,
+  toolMeta,
+  foldReasoning,
+}: {
+  message: Message;
+  turnMeta: TurnMeta | null;
+  toolMeta?: ToolCallMeta | null;
+  foldReasoning: boolean;
+}): JSX.Element | null {
+  switch (message.role) {
+    case 'system': {
+      // v2.x：ephemeral system message 是 UI 临时提示（slash 命令输出等），
+      // 用暗灰单行风格显示；正经 system prompt（_ephemeral=undefined）依然 hide。
+      const ephemeral =
+        (message as { _ephemeral?: true })._ephemeral === true;
+      if (!ephemeral) return null;
+      const lines = message.content.split('\n');
+      return (
+        <Box marginBottom={1} paddingLeft={2}>
+          <Box flexDirection="column">
+            {lines.map((line, i) => (
+              <Text key={`eph-${i}`} color={theme.subtle} dimColor wrap="end">
+                {line}
+              </Text>
+            ))}
+          </Box>
+        </Box>
+      );
+    }
+    case 'user': {
+      const rule = figures.hr.repeat(6);
+      const headerLine =
+        turnMeta !== null
+          ? `${rule} Turn ${turnMeta.turnN} · ${formatTime(turnMeta.timestamp)} · ${formatDuration(turnMeta.durationMs)} · ${turnMeta.toolsCount} tools ${rule}`
+          : null;
+      return (
+        <Box flexDirection="column" marginBottom={1}>
+          {headerLine !== null && (
+            <Text color={theme.subtle} dimColor>
+              {headerLine}
+            </Text>
+          )}
+          <Box>
+            <Text color={theme.user} bold>
+              {'> '}
+            </Text>
+            {/* 用户问题正文也染青色：整条青 = "你的输入"，与答案"绿 ⏺ + 默认亮色正文"、
+                思维链"灰 💭"形成 青/灰/绿 三色分明的视觉层次。纯 Static，零刷屏风险。 */}
+            <Text color={theme.user} wrap="end">
+              {contentToDisplayText(message.content)}
+            </Text>
+          </Box>
+        </Box>
+      );
+    }
+    case 'assistant': {
+      // assistant 可能只有 tool_calls 没有 content（content 为 null）
+      const raw = message.content ?? '';
+      // 展示层切分内联 <think>（MiniMax 等把思维链写进 content，内核有意不剥）：
+      // thought 并入 💭 块（灰 dim + 折叠，与结构化 reasoning 同款待遇），
+      // 正文只显示净化后的部分。纯展示层——history 字节零改动（KV 缓存约束）。
+      const { thought, answer } = splitThinkBlocks(raw);
+      const tcCount = message.tool_calls?.length ?? 0;
+
+      // reasoning 拼接：结构化字段在前，内联 <think> 在后
+      let reasoningText = [combineReasoning(message), thought]
+        .filter(Boolean)
+        .join('\n');
+      let truncatedCharsHint = '';
+      if (reasoningText.length > REASONING_MAX_CHARS) {
+        const omitted = reasoningText.length - REASONING_MAX_CHARS;
+        reasoningText = reasoningText.slice(0, REASONING_MAX_CHARS);
+        truncatedCharsHint = `...(${omitted} 字省略)`;
+      }
+      const reasoningLines =
+        reasoningText.length > 0 ? reasoningText.split('\n') : [];
+      const visibleReasoningLines = foldReasoning
+        ? reasoningLines.slice(0, 2)
+        : reasoningLines;
+      const hiddenReasoningCount =
+        reasoningLines.length - visibleReasoningLines.length;
+
+      return (
+        <Box flexDirection="column" marginBottom={1}>
+          {visibleReasoningLines.length > 0 && (
+            <Box flexDirection="column">
+              {/* wrap='end'：Ink 默认 wrap 会经 wrapAnsi(hard:true) 注入真实换行，
+                  从思维链复制文本会被硬断行——统一 end（原样输出，交终端软换行） */}
+              {visibleReasoningLines.map((line, i) => (
+                <Text key={`r-${i}`} color={theme.subtle} dimColor wrap="end">
+                  {i === 0 ? `${figures.thought} ${line}` : `   ${line}`}
+                </Text>
+              ))}
+              {hiddenReasoningCount > 0 && (
+                <Text color={theme.subtle} dimColor>
+                  {`   ${figures.fold} ${hiddenReasoningCount} 行 reasoning 折叠（终端高度 < ${NARROW_TERMINAL_ROWS}）`}
+                </Text>
+              )}
+              {truncatedCharsHint.length > 0 && (
+                <Text color={theme.subtle} dimColor>
+                  {`   ${truncatedCharsHint}`}
+                </Text>
+              )}
+            </Box>
+          )}
+          {/* 最终答案：markdown 管线格式化（标题/列表/行内代码/引用），⏺ 锚点落
+              第一条非空 prose 行 + 默认亮色正文（答案是主角）。代码块「零装饰」：
+              fence 行 dim、code 行顶格无前缀无染色逐字节原文 —— 复制粘贴即原文。
+              纯 <Static> 渲染（write-once），零刷屏风险，不碰 LiveArea 的 INV-1/INV-2。 */}
+          {buildAssistantDisplayLines(answer).map((line, i) => {
+            if (line.kind === 'fence') {
+              return (
+                <Text key={`a-${i}`} color={theme.subtle} dimColor wrap={line.wrap}>
+                  {line.content}
+                </Text>
+              );
+            }
+            if (line.kind === 'code') {
+              return (
+                <Text key={`a-${i}`} wrap={line.wrap}>
+                  {line.content.length > 0 ? line.content : ' '}
+                </Text>
+              );
+            }
+            return line.prefix === '⏺ ' ? (
+              <Box key={`a-${i}`}>
+                <Text color={theme.anchor} bold wrap={line.wrap}>
+                  {line.prefix}
+                </Text>
+                <Text wrap={line.wrap}>
+                  {line.content.length > 0 ? line.content : ' '}
+                </Text>
+              </Box>
+            ) : (
+              <Text key={`a-${i}`} wrap={line.wrap}>
+                {`${line.prefix}${line.content}`.length > 0
+                  ? `${line.prefix}${line.content}`
+                  : ' '}
+              </Text>
+            );
+          })}
+          {tcCount > 0 && (
+            <Text color={theme.warning} dimColor wrap="end">
+              {`  ${figures.corner} 调用了 ${tcCount} 个工具：${(message.tool_calls ?? [])
+                .map((tc) => tc.function.name)
+                .join(', ')}`}
+            </Text>
+          )}
+        </Box>
+      );
+    }
+    case 'tool': {
+      const lines = message.content.split('\n');
+      // 顾问意见给更高的预览上限，并用默认亮色而非 dim 灰 —— 它是另一个模型说的话，
+      // 不该和 grep 输出一样被视觉降级（见 MAX_ADVISOR_PREVIEW_LINES）。
+      const isAdvisor = toolMeta?.toolName === 'Advisor';
+      const previewCap = toolPreviewCap(toolMeta?.toolName);
+      const previewLines = lines.slice(0, previewCap);
+      const hidden = Math.max(0, lines.length - previewCap);
+      const shortId = message.tool_call_id.slice(-8);
+      // 头行升级：有 toolMeta（发起方反查命中）显示人话描述；Agent 子任务
+      // 再解析统计尾巴显示 ✓ N 轮 · M 次工具。无 meta（历史重载等）兜底旧格式。
+      const stats =
+        toolMeta?.toolName === 'Agent' ? agentResultStats(message.content) : null;
+      const statsTail = stats
+        ? ` ${figures.ok} ${stats.turns} 轮 · ${stats.tools} 次工具${stats.failed > 0 ? `（${stats.failed} 次失败）` : ''}`
+        : '';
+      // 顾问头行单独成文并去掉 dim：friendlyToolDescription 没有 Advisor 分支，
+      // 走兜底会显示成一串参数预览，看不出这是「第二个模型的独立意见」。
+      const headText = isAdvisor
+        ? `[顾问意见 · #${shortId}]`
+        : toolMeta
+          ? `[${toolMeta.friendly} · #${shortId}]${statsTail}`
+          : `[tool result · #${shortId}]`;
+      return (
+        <Box marginBottom={1} paddingLeft={2}>
+          <Box flexDirection="column">
+            <Text color={theme.subtle} {...(isAdvisor ? {} : { dimColor: true })} wrap="end">
+              {headText}
+            </Text>
+            {/* 逐行 wrap='end'：整段默认 wrap 会注入真实换行，从预览复制会被硬断行 */}
+            {previewLines.map((line, i) => (
+              <Text key={`p-${i}`} {...(isAdvisor ? {} : { color: theme.subtle })} wrap="end">
+                {line.length > 0 ? line : ' '}
+              </Text>
+            ))}
+            {hidden > 0 && (
+              <Text color={theme.subtle} dimColor>
+                {`... ${figures.fold} 完整 ${lines.length} 行（输入 /show ${shortId} 查看）`}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      );
+    }
+  }
+}

package/src/ui/ModelPicker.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+import type { ModelConfig } from '../config/configFile.js';
+import { theme } from './theme.js';
+
+interface ModelPickerProps {
+  models: ModelConfig[];
+  currentModelId: string | null;
+  title: string;
+  /** null 选项标签（用于顾问模型"不使用"）；不传则不显示 null 选项 */
+  nullOptionLabel?: string;
+  onSelect: (modelId: string | null) => void;
+  onCancel: () => void;
+}
+
+export function ModelPicker({
+  models,
+  currentModelId,
+  title,
+  nullOptionLabel,
+  onSelect,
+  onCancel,
+}: ModelPickerProps): JSX.Element {
+  const enabledModels = models.filter((m) => m.enabled && m.apiKey);
+  const hasNullOption = Boolean(nullOptionLabel);
+  const nullIndex = hasNullOption ? enabledModels.length : -1;
+  const listLength = enabledModels.length + (hasNullOption ? 1 : 0);
+
+  const initialIdx = (() => {
+    const idx = enabledModels.findIndex((m) => m.id === currentModelId);
+    if (idx >= 0) return idx;
+    if (hasNullOption && !currentModelId) return nullIndex;
+    return 0;
+  })();
+
+  const [idx, setIdx] = useState(Math.max(0, Math.min(initialIdx, listLength - 1)));
+
+  useInput((input, key) => {
+    if (key.escape || (key.ctrl && input === 'c')) {
+      onCancel();
+      return;
+    }
+    if (key.upArrow) {
+      setIdx((i) => (i - 1 + listLength) % listLength);
+      return;
+    }
+    if (key.downArrow) {
+      setIdx((i) => (i + 1) % listLength);
+      return;
+    }
+    if (key.return) {
+      if (hasNullOption && idx === nullIndex) {
+        onSelect(null);
+      } else {
+        const target = enabledModels[idx];
+        if (target) onSelect(target.id);
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box marginBottom={1}>
+        <Text color={theme.user} bold>{title}</Text>
+      </Box>
+      <Text color={theme.subtle}>在已配置的模型中选择；选择后立即生效，后续请求使用新模型。</Text>
+      <Box flexDirection="column" marginTop={1}>
+        {enabledModels.map((m, i) => {
+          const active = i === idx;
+          const isCurrent = m.id === currentModelId;
+          const displayName = m.displayName || m.model;
+          return (
+            <Box key={m.id} flexDirection="column">
+              <Text color={active ? theme.user : undefined}>
+                {active ? '> ' : '  '}
+                {isCurrent ? '✓ ' : '  '}
+                <Text color={active ? theme.user : undefined} bold={isCurrent}>{displayName}</Text>
+                {isCurrent ? <Text color={theme.subtle}> （当前）</Text> : null}
+              </Text>
+              <Text color={theme.subtle}>
+                {'        '}
+                {m.model} · {formatContextWindow(m.contextWindow)}
+              </Text>
+            </Box>
+          );
+        })}
+        {hasNullOption && (
+          <Text color={idx === nullIndex ? theme.user : theme.subtle}>
+            {idx === nullIndex ? '> ' : '  '}
+            {!currentModelId ? '✓ ' : '  '}
+            {nullOptionLabel}
+          </Text>
+        )}
+      </Box>
+      <Box marginTop={1}>
+        <Text color={theme.subtle}>↑↓ 选择 · Enter 确认 · ESC 取消</Text>
+      </Box>
+    </Box>
+  );
+}
+
+function formatContextWindow(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M context`;
+  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}K context`;
+  return `${tokens} context`;
+}