minimal-agent 0.5.5 → 0.6.0

package/src/ui/InputBox.js

@@ -16,42 +16,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *    - 保留强制刷新但精准控制时机
  * ============================================================
  */
-import { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
 import { useTextBuffer } from './hooks/useTextBuffer.js';
 import { usePasteHandler } from './hooks/usePasteHandler.js';
 import { useInputHistory } from './hooks/useInputHistory.js';
-export function InputBox({ onSubmit, disabled, onAbort, onClear, onCompact }) {
+function InputBoxImpl({ onSubmit, disabled, onAbort, onClear, onCompact }) {
     const buf = useTextBuffer();
     const hist = useInputHistory();
     const ctrlCCountRef = useRef(0);
     const ctrlCTimerRef = useRef(null);
     const { exit } = useApp();
-    // ✅ 精准刷新计数器：只在必要时触发重渲染
-    const [refreshCounter, setRefreshCounter] = useState(0);
-    // ✅ 精准刷新函数
-    const forceRefresh = useCallback(() => {
-        setRefreshCounter((c) => c + 1);
-    }, []);
-    // ✅ IME 输入缓冲：非 ASCII 字符（CJK/emoji）累积后批量刷新，减少 rerender 频率
-    const imeBufRef = useRef('');
-    const imeTimerRef = useRef(null);
-    const flushImeBuffer = useCallback(() => {
-        if (imeTimerRef.current) {
-            clearTimeout(imeTimerRef.current);
-            imeTimerRef.current = null;
-        }
-        if (imeBufRef.current.length > 0) {
-            buf.insert(imeBufRef.current);
-            imeBufRef.current = '';
-            forceRefresh();
-        }
-    }, [buf, forceRefresh]);
+    // 刷新触发器：值本身不读，只用 setter 触发 InputBoxImpl 重渲（→ BufferView 随父重渲）。
+    const [, setRefreshCounter] = useState(0);
     // ✅ Ctrl+R 反向搜索模式（null 表示不在搜索）
     const [searchMode, setSearchMode] = useState(null);
     // ✅ Delete 专用去重：只防止 Windows 双事件，不影响其他键
     const lastDeleteTime = useRef(0);
     const DELETE_DEBOUNCE_MS = 20; // 仅 Delete 键用极短防抖
+    const forceRefresh = useCallback(() => {
+        setRefreshCounter((c) => c + 1);
+    }, []);
     // ✅ 粘贴处理 Hook：支持多行粘贴
     // v0.3 设计：Enter 始终发送, Alt+Enter（Mac: Option+Enter）换行, 粘贴期间拦截 Enter
     const { handleInput: handlePasteInput } = usePasteHandler({
@@ -145,7 +130,6 @@ export function InputBox({ onSubmit, disabled, onAbort, onClear, onCompact }) {
         // ---- Ctrl+C ----
         if (key.ctrl && input === 'c') {
             if (buf.state.text.length > 0) {
-                flushImeBuffer();
                 buf.clear();
                 forceRefresh();
                 return;
@@ -169,7 +153,6 @@ export function InputBox({ onSubmit, disabled, onAbort, onClear, onCompact }) {
         //   - Ctrl+Enter：返回 'continue' → 这里也执行**强制发送**
         //   - 粘贴期间 + Enter：返回 'enter-in-paste' → **忽略**（防误发）
         if (key.return) {
-            flushImeBuffer(); // 先提交残留 CJK 输入
             const text = buf.state.text.trim();
             if (text.length === 0)
                 return;
@@ -305,43 +288,35 @@ export function InputBox({ onSubmit, disabled, onAbort, onClear, onCompact }) {
         // Alt+Enter 在多数终端发 \x1b\r：Ink 把 \x1b 剥掉后 input='\r'、key.return=false、
         // key.meta=false，从这里落地。把 \r/\r\n 统一成 \n，textBuffer 才能真切分逻辑行
         // （否则 layout 永远 1 行 → ↑/↓ 失效、输入框不长高，光标只能左右）。
-        //
-        // IME 兼容优化（方案C：启发式过滤 + 延迟刷新）：
-        //   - ASCII 可打印字符 → 立即插入+刷新（英文打字无延迟）
-        //   - 非 ASCII 字符（CJK/emoji）→ 累积到 imeBuf，50ms 后批量刷新
-        //     （合并连续 CJK 输入，减少 Ink 整树 rerender 次数）
         if (input && !key.meta) {
             const normalized = input.replace(/\r\n?/g, '\n');
-            if (normalized.length === 0)
-                return;
-            // ASCII 可打印 + 换行：立即处理
-            if (/^[\x20-\x7E\n]+$/.test(normalized)) {
-                flushImeBuffer(); // 先提交残留 CJK
-                buf.insert(normalized);
-                forceRefresh();
-                return;
-            }
-            // 非 ASCII（CJK / emoji / 特殊字符）：累积后延迟刷新
-            imeBufRef.current += normalized;
-            if (!imeTimerRef.current) {
-                imeTimerRef.current = setTimeout(() => {
-                    if (imeBufRef.current.length > 0) {
-                        buf.insert(imeBufRef.current);
-                        imeBufRef.current = '';
-                        forceRefresh();
-                    }
-                    imeTimerRef.current = null;
-                }, 50);
-            }
+            buf.insert(normalized);
+            forceRefresh();
         }
     });
     // ✅ 搜索模式下覆盖整个 BufferView，显示 (reverse-i-search)`<query>': <hit>
     if (searchMode !== null) {
         return _jsx(ReverseSearchView, { query: searchMode.query, hit: searchMode.hit });
     }
-    // ✅ 传递 refreshCounter 作为 prop（不放入 key）
-    return (_jsx(BufferView, { buf: buf, disabled: disabled, refreshCounter: refreshCounter }));
+    // BufferView 非 memo：InputBoxImpl 因按键 setState（useTextBuffer 的 buf state
+    // 或 refreshCounter 任一变化）重渲时，BufferView 作为子组件随之重渲、重读 buf.layout。
+    // 故无需把刷新计数透传给它（透传是冗余的）。
+    return _jsx(BufferView, { buf: buf, disabled: disabled });
 }
+/**
+ * v2.x 修复：用 React.memo 包装 InputBox。
+ *
+ * 根因：App.tsx 之前用 deps=[chat] 包 handleClear / handleSubmit；chat 每次
+ * useChat 重渲都是新对象引用（流式期 reasoningPreview/streamingText 每 100ms flush，
+ * ~10 Hz）→ handleClear / handleSubmit 引用频繁变 → InputBox 收到新 onClear / onSubmit
+ * → 不 memo 时强制重渲 → Ink 收到 InputBox 子树输出变化 → 整个 live 区被重写 →
+ * 看起来 spinner 每帧打新行。
+ *
+ * App.tsx deps 已改为精细字段（chat.clearHistory / chat.submit 等），引用稳定；
+ * 配合此处 React.memo，InputBox 在 onSubmit / onAbort / onClear / onCompact /
+ * disabled 真正变化时才重渲。
+ */
+export const InputBox = React.memo(InputBoxImpl);
 // ---------- 反向搜索视图 ----------
 function ReverseSearchView({ query, hit, }) {
     // hit 可能含换行；仅展示首行避免撑爆 InputBox
@@ -353,17 +328,16 @@ function ReverseSearchView({ query, hit, }) {
             : hitFirstLine;
     return (_jsxs(Box, { borderStyle: "round", borderColor: "magenta", paddingX: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "magenta", bold: true, children: '(reverse-i-search)`' }), _jsx(Text, { color: "yellow", children: query }), _jsx(Text, { color: "magenta", bold: true, children: "': " }), _jsx(Text, { color: hitFirstLine === null ? 'gray' : 'white', children: hitDisplay })] }), _jsx(Box, { children: _jsx(Text, { color: "gray", dimColor: true, children: "Enter \u63D0\u4EA4 \u00B7 ESC \u53D6\u6D88 \u00B7 Backspace \u5220\u5B57\u7B26" }) })] }));
 }
-function BufferView({ buf, disabled, refreshCounter }) {
-    // ✅ 关键：用 useMemo 依赖 refreshCounter，而非改变 key
-    // 这样不会重建组件，只是强制重新计算 layout
+function BufferView({ buf, disabled }) {
+    // buf.layout 由 useTextBuffer 的 useMemo([state]) 维护：父组件每次重渲传入的 buf
+    // 都已带最新 layout，这里直接读即可（BufferView 故意不 memo，随父重渲）。
     const { lines, cursorRow, cursorCol } = buf.layout;
     const promptColor = disabled ? 'gray' : 'cyan';
     const prompt = disabled ? '⏳ ' : '> ';
     return (_jsx(Box, { borderStyle: "round", borderColor: promptColor, paddingX: 1, flexDirection: "column", children: lines.map((line, row) => {
             const isFirst = row === 0;
             const isCursorRow = row === cursorRow && !disabled;
-            // ✅ key 保持稳定（只用 row），避免组件重建
-            // refreshCounter 通过 useMemo 依赖间接触发更新
+            // key 只用 row：保持稳定，避免逐行重建（layout 变化由父级重渲带下来）
             return (_jsxs(Box, { children: [_jsx(Text, { color: promptColor, bold: true, children: isFirst ? prompt : '  ' }), isCursorRow ? _jsx(CursorLine, { line: line, col: cursorCol }) : _jsx(Text, { children: line || ' ' })] }, row));
         }) }));
 }

package/src/ui/LiveArea.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================
+ *  src/ui/LiveArea.tsx —— 输入框上方的本轮过程区（有界多行流式 live 区）
+ * ------------------------------------------------------------
+ *  结构（自上而下）：
+ *    ┌ 状态行（恒 1 行）：动画 spinner + 阶段标签 + 已耗时 (+ plugin 进度)
+ *    └ 内容区（0..N 行，有界）：随阶段切换——
+ *        thinking       → reasoningPreview 尾部最近 N 行（gray dim，首行 💭）
+ *        streaming      → streamingText   尾部最近 N 行（默认亮色 = 答案是主角）
+ *        tool_executing → runningTools 逐行人话描述（gray dim）
+ *        compacting/idle→ 无内容行
+ *
+ *  ★ 为什么这样能既"多行打字机 + 流式答案"又**不刷屏**（详见 liveViewport.ts 头部）：
+ *    - INV-1：每行都用 wrapToDisplayLines / clampWidthStart 按 CJK/emoji=2 钳到
+ *      ≤ cols - LIVE_RIGHT_MARGIN → 终端永不自动折行 → ink eraseLines 每帧精确。
+ *    - INV-2：内容区取**尾部最近 N 行**（contentMaxLines 自适应终端高度），保证
+ *      live 区总高度 < 终端行数 → 不触发 ink 的 outputHeight>=rows 全屏重写。
+ *    完整思维链/答案由 <Static>（MessageList）write-once 呈现，不进 live 区。
+ *
+ *  ★ 动画 spinner + 已耗时：非 idle 时挂一个 ~150ms tick 强制 re-render，保证
+ *    "无 token 到达的纯等待期"spinner 仍在跳、秒数仍在走 → 消除"卡住"观感。
+ *    流式内容本身走 useChat 的 100ms 节流；ink 内部 32ms throttle 合并，频率安全。
+ * ============================================================
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Text } from 'ink';
+import { LIVE_RIGHT_MARGIN, clampWidthStart, wrapToDisplayLines, } from './liveViewport.js';
+const STAGE_LABELS = {
+    thinking: '思考中',
+    streaming: '回答中',
+    tool_executing: '调用工具',
+    compacting: '压缩历史',
+};
+/** 动画 spinner 帧（charWidth 上界按 2 计；终端实际多为 1，算宽无害）。 */
+const SPINNER_FRAMES = ['✶', '✸', '✹', '✺', '✹', '✷'];
+/** spinner 推进 + 强制 re-render 间隔（ms）。~7Hz，远低于 ink 31Hz throttle，Windows 安全。 */
+const SPINNER_INTERVAL_MS = 150;
+/** 内容区行数硬顶（大终端也不铺满，保持清爽）。 */
+const CONTENT_HARD_CAP = 8;
+/** 终端高度里预留给 status(1) + 输入框(3) + StatusLine(1) + error/interrupt + 安全余量。 */
+const RESERVED_ROWS = 9;
+/** reasoning 行 💭 前缀 / 续行缩进的预留宽度（💭=2 + 空格；上界 4 更稳）。 */
+const REASONING_PREFIX_RESERVE = 4;
+/** 工具 argsPreview fallback 截断长度。 */
+const TOOL_ARGS_MAX = 60;
+/** 内容区最多显示几行：自适应终端高度，留足 status/input 余量（满足 INV-2）。 */
+export function contentMaxLines(terminalRows) {
+    return Math.max(2, Math.min(CONTENT_HARD_CAP, terminalRows - RESERVED_ROWS));
+}
+/** 取数组尾部最近 n 个元素。 */
+function lastN(arr, n) {
+    return arr.length <= n ? arr : arr.slice(arr.length - n);
+}
+function toolDesc(t) {
+    if (t.argsFriendly && t.argsFriendly.length > 0)
+        return t.argsFriendly;
+    const a = t.argsPreview.length > TOOL_ARGS_MAX
+        ? `${t.argsPreview.slice(0, TOOL_ARGS_MAX - 1)}…`
+        : t.argsPreview;
+    return `${t.toolName}(${a})`;
+}
+/**
+ * 纯函数：把一帧的 props（+ 动画 frame / 已耗时秒数）算成 LiveView。
+ * idle 返回 null。导出供单测断言 INV-1（每行宽）/ INV-2（行数）/ 颜色层次。
+ */
+export function buildLiveView(props) {
+    const { progressStage, reasoningPreview, streamingText, runningTools, pluginProgress, terminalCols, terminalRows, frame, elapsedSec, } = props;
+    if (progressStage === 'idle')
+        return null;
+    const stage = progressStage;
+    const maxWidth = Math.max(8, terminalCols - LIVE_RIGHT_MARGIN);
+    const maxLines = contentMaxLines(terminalRows);
+    // ---- 状态行 ----
+    let status = `${frame} ${STAGE_LABELS[stage]} (${elapsedSec}s)`;
+    if (pluginProgress) {
+        status += `  ·  [plugin:${pluginProgress.pluginId}] ${pluginProgress.current}/${pluginProgress.max ?? '?'}${pluginProgress.message ? ` ${pluginProgress.message}` : ''}`;
+    }
+    status = clampWidthStart(status, maxWidth);
+    // ---- 内容区 ----
+    let contentLines = [];
+    let contentDim = true;
+    if (stage === 'thinking' && reasoningPreview.length > 0) {
+        const wrapped = wrapToDisplayLines(reasoningPreview, maxWidth - REASONING_PREFIX_RESERVE);
+        contentLines = lastN(wrapped, maxLines).map((line, i) => i === 0 ? `💭 ${line}` : `   ${line}`);
+        contentDim = true;
+    }
+    else if (stage === 'streaming' && streamingText.length > 0) {
+        contentLines = lastN(wrapToDisplayLines(streamingText, maxWidth), maxLines);
+        contentDim = false; // 答案 = 主角，默认亮色
+    }
+    else if (stage === 'tool_executing' && runningTools.length > 0) {
+        contentLines = lastN(runningTools, maxLines).map((t) => clampWidthStart(`  ${toolDesc(t)}`, maxWidth));
+        contentDim = true;
+    }
+    return {
+        statusLine: status,
+        statusColor: stage === 'compacting' ? 'magenta' : 'cyan',
+        contentLines,
+        contentDim,
+    };
+}
+export const LiveArea = React.memo(function LiveArea(props) {
+    const { progressStage } = props;
+    // 计时起点：idle→非idle 那一刻记下，idle 清零。在 render 中惰性初始化 ref（幂等，安全）。
+    const startRef = useRef(null);
+    if (progressStage === 'idle') {
+        startRef.current = null;
+    }
+    else if (startRef.current === null) {
+        startRef.current = Date.now();
+    }
+    // 非 idle 时 ~150ms tick：强制 re-render，让 spinner/秒数在纯等待期也持续动。
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        if (progressStage === 'idle')
+            return;
+        const timer = setInterval(() => setTick((t) => (t + 1) % 1_000_000), SPINNER_INTERVAL_MS);
+        return () => clearInterval(timer);
+    }, [progressStage]);
+    if (progressStage === 'idle')
+        return null;
+    const now = Date.now();
+    const elapsedSec = startRef.current
+        ? Math.max(0, Math.floor((now - startRef.current) / 1000))
+        : 0;
+    const frame = SPINNER_FRAMES[Math.floor(now / SPINNER_INTERVAL_MS) % SPINNER_FRAMES.length];
+    const view = buildLiveView({ ...props, frame, elapsedSec });
+    if (!view)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: view.statusColor, bold: true, wrap: "truncate", children: view.statusLine }), view.contentLines.map((line, i) => (_jsx(Text, { color: view.contentDim ? 'gray' : undefined, dimColor: view.contentDim, wrap: "truncate", children: line.length > 0 ? line : ' ' }, `live-${i}`)))] }));
+});

package/src/ui/MessageList.js

@@ -1,30 +1,222 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================
+ *  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';
+/** 中断标记 user message 的固定内容（loop.ts 写入） */
+const INTERRUPT_USER_CONTENT = '(用户按下了 ESC/Ctrl+C 中断了任务)';
 const MAX_TOOL_PREVIEW_LINES = 3;
-export function MessageList({ history, streamingText, streamingReasoning }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [history.map((m, i) => (_jsx(MessageRow, { message: m }, i))), streamingReasoning.length > 0 && (_jsx(Box, { marginBottom: 1, flexDirection: "column", children: (() => {
-                    const MAX_LINES = 5;
-                    const THRESHOLD = 300;
-                    if (streamingReasoning.length <= THRESHOLD) {
-                        return (_jsxs(Text, { color: "gray", dimColor: true, children: ["\uD83D\uDCA1 ", streamingReasoning] }));
-                    }
-                    const allLines = streamingReasoning.split('\n');
-                    const tailLines = allLines.slice(-MAX_LINES);
-                    const omitted = allLines.length - MAX_LINES;
-                    return (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "gray", dimColor: true, children: ["\uD83D\uDCA1 ... (", Math.round(streamingReasoning.length / 1000), "K\u5B57, \u7701\u7565 ", omitted, " \u884C)"] }), tailLines.slice(0, -1).map((line, i) => (_jsxs(Text, { color: "gray", dimColor: true, children: ['  ', line || ' '] }, i))), _jsxs(Text, { color: "gray", dimColor: true, children: ['  ', tailLines[tailLines.length - 1] || ' '] })] }));
-                })() })), streamingText.length > 0 && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: streamingText }) }))] }));
+/** 窄终端 reasoning 折叠阈值（行）—— 小于此值时 reasoning 只显示首 2 行 */
+const NARROW_TERMINAL_ROWS = 28;
+/** reasoning 超过此字符数截尾 —— 防撑爆历史 */
+const REASONING_MAX_CHARS = 2000;
+/**
+ * 把 assistant message 的两个字符串型 reasoning 字段拼成单字符串。
+ * `reasoning_details` 是结构化数组，本期不展开。两个字段任一非空即返回拼接结果；
+ * 都空返回 ''。
+ *
+ * 导出供单测断言。
+ */
+export function combineReasoning(message) {
+    const parts = [];
+    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) {
+    const result = new Array(history.length).fill(null);
+    // 找出所有 turn 起点的 index
+    const turnStartIndices = [];
+    for (let i = 0; i < history.length; i++) {
+        const m = history[i];
+        if (m.role === 'user' && 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.timestamp ?? Date.now();
+        let lastResponseTs = 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;
 }
-function MessageRow({ message }) {
+/** 格式化 timestamp 为 HH:MM（本地时区） */
+function formatTime(ts) {
+    return new Date(ts).toTimeString().slice(0, 5);
+}
+/** 格式化耗时：<1s / 1.2s / 3m */
+function formatDuration(ms) {
+    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, }) {
+    const items = React.useMemo(() => {
+        const turnMetas = summarizeTurn(history);
+        return [
+            ...(bannerText
+                ? [
+                    {
+                        kind: 'banner',
+                        text: bannerText,
+                        key: `banner-${bannerText.slice(0, 10)}`,
+                    },
+                ]
+                : []),
+            ...history.map((m, idx) => ({
+                kind: 'message',
+                msg: m,
+                turnMeta: turnMetas[idx],
+                // 纯派生 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 (_jsx(Static, { items: items, children: (item) => {
+            if (item.kind === 'banner') {
+                return _jsx(BannerRow, { text: item.text }, item.key);
+            }
+            return (_jsx(MessageRow, { message: item.msg, turnMeta: item.turnMeta, foldReasoning: foldReasoning }, item.key));
+        } }, compactGeneration));
+});
+function BannerRow({ text }) {
+    // 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 (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: head }), tail.length > 0 && _jsx(Text, { color: "gray", children: tail })] }));
+}
+function MessageRow({ message, turnMeta, foldReasoning, }) {
     switch (message.role) {
-        case 'system':
-            return null; // 不展示系统提示词
-        case 'user':
-            return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: "cyan", bold: true, children: '> ' }), _jsx(Text, { children: message.content })] }));
+        case 'system': {
+            // v2.x：ephemeral system message 是 UI 临时提示（slash 命令输出等），
+            // 用暗灰单行风格显示；正经 system prompt（_ephemeral=undefined）依然 hide。
+            const ephemeral = message._ephemeral === true;
+            if (!ephemeral)
+                return null;
+            const lines = message.content.split('\n');
+            return (_jsx(Box, { marginBottom: 1, paddingLeft: 2, children: _jsx(Box, { flexDirection: "column", children: lines.map((line, i) => (_jsx(Text, { color: "gray", dimColor: true, children: line }, `eph-${i}`))) }) }));
+        }
+        case 'user': {
+            const headerLine = turnMeta !== null
+                ? `────── Turn ${turnMeta.turnN} · ${formatTime(turnMeta.timestamp)} · ${formatDuration(turnMeta.durationMs)} · ${turnMeta.toolsCount} tools ──────`
+                : null;
+            return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [headerLine !== null && (_jsx(Text, { color: "gray", dimColor: true, children: headerLine })), _jsxs(Box, { children: [_jsx(Text, { color: "cyan", bold: true, children: '> ' }), _jsx(Text, { color: "cyan", children: message.content })] })] }));
+        }
         case 'assistant': {
             // assistant 可能只有 tool_calls 没有 content（content 为 null）
             const text = message.content ?? '';
             const tcCount = message.tool_calls?.length ?? 0;
-            return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [text.length > 0 && _jsx(Text, { children: text }), tcCount > 0 && (_jsx(Text, { color: "yellow", dimColor: true, children: `  └─ 调用了 ${tcCount} 个工具：${(message.tool_calls ?? [])
+            // reasoning 拼接
+            let reasoningText = combineReasoning(message);
+            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 (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [visibleReasoningLines.length > 0 && (_jsxs(Box, { flexDirection: "column", children: [visibleReasoningLines.map((line, i) => (_jsx(Text, { color: "gray", dimColor: true, children: i === 0 ? `💭 ${line}` : `   ${line}` }, `r-${i}`))), hiddenReasoningCount > 0 && (_jsx(Text, { color: "gray", dimColor: true, children: `   ▾ ${hiddenReasoningCount} 行 reasoning 折叠（终端高度 < ${NARROW_TERMINAL_ROWS}）` })), truncatedCharsHint.length > 0 && (_jsx(Text, { color: "gray", dimColor: true, children: `   ${truncatedCharsHint}` }))] })), text.length > 0 &&
+                        text.split('\n').map((line, i) => i === 0 ? (_jsxs(Box, { children: [_jsx(Text, { color: "green", bold: true, children: '⏺ ' }), _jsx(Text, { children: line.length > 0 ? line : ' ' })] }, `a-${i}`)) : (_jsx(Text, { children: `  ${line}` }, `a-${i}`))), tcCount > 0 && (_jsx(Text, { color: "yellow", dimColor: true, children: `  └─ 调用了 ${tcCount} 个工具：${(message.tool_calls ?? [])
                             .map((tc) => tc.function.name)
                             .join(', ')}` }))] }));
         }
@@ -32,7 +224,8 @@ function MessageRow({ message }) {
             const lines = message.content.split('\n');
             const preview = lines.slice(0, MAX_TOOL_PREVIEW_LINES).join('\n');
             const hidden = Math.max(0, lines.length - MAX_TOOL_PREVIEW_LINES);
-            return (_jsx(Box, { marginBottom: 1, paddingLeft: 2, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", dimColor: true, children: "[tool result]" }), _jsx(Text, { color: "gray", children: preview }), hidden > 0 && (_jsx(Text, { color: "gray", dimColor: true, children: `... (省略 ${hidden} 行)` }))] }) }));
+            const shortId = message.tool_call_id.slice(-8);
+            return (_jsx(Box, { marginBottom: 1, paddingLeft: 2, children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", dimColor: true, children: `[tool result · #${shortId}]` }), _jsx(Text, { color: "gray", children: preview }), hidden > 0 && (_jsx(Text, { color: "gray", dimColor: true, children: `... ▾ 完整 ${lines.length} 行（输入 /show ${shortId} 查看）` }))] }) }));
         }
     }
 }

package/src/ui/ProgressPanel.js

@@ -1,43 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-/**
- * ============================================================
- *  src/ui/ProgressPanel.tsx —— 工作过程显示面板（v2 瘦身版）
- * ------------------------------------------------------------
- *  贴在 InputBox 上方的一块"过程区"。
- *  仅当 progressStage !== 'idle' 时渲染，turn 结束后整块消失。
- *
- *  v2 变化：
- *    - 删除 streamingText 块（搬去 StreamingBlock 独立组件）
- *    - 删除 reasoning preview 块（reasoning 留在 history 由 MessageList 渲染）
- *    - spinner 行融合 friendly 工具描述：
- *        `⠋ Reading src/foo.ts +2 more · 2.3s · ~890 tokens · step 6`
- *    - 不再单独列每个 tool 一行（多个工具用 +N more 在 spinner 行末尾）
- *
- *  样式：
- *    ⠋ Reading src/foo.ts +2 more · 2.3s · ~890 tokens · step 6
- *    [plugin:ralph-wiggum] 3/10 验证中...
- *
- *  设计要点：
- *  - braille spinner 用 useEffect + setInterval(120ms) 自驱动；unmount 时 clearInterval
- *  - 最终高度：1 行 spinner / 0~1 行 plugin progress
- * ============================================================
- */
-import React from 'react';
 import { Box, Text } from 'ink';
-/** braille spinner 帧序列 */
-const SPINNER_FRAMES = [
-    '⠋',
-    '⠙',
-    '⠹',
-    '⠸',
-    '⠼',
-    '⠴',
-    '⠦',
-    '⠧',
-    '⠇',
-    '⠏',
-];
-const SPINNER_INTERVAL_MS = 120;
 /** 阶段标签中文映射 */
 const STAGE_LABELS = {
     thinking: '思考中',
@@ -54,18 +16,12 @@ function truncateTail(s, max) {
     return `${s.slice(0, max - 1)}…`;
 }
 /**
- * 自驱动的 braille spinner hook。
- * 组件 unmount 时自动 clearInterval，避免悬挂定时器。
+ * 静态指示符：不使用动画 spinner（setState+setInterval 会每 120ms 触发整棵树 rerender，
+ * 导致 StreamingBlock / InputBox 等兄弟组件频繁重绘 → 终端追加新行而非原地刷新）。
+ * 用固定字符代替，stage_change 事件本身已足够表达"正在工作"。
  */
 function useSpinnerFrame() {
-    const [frame, setFrame] = React.useState(0);
-    React.useEffect(() => {
-        const t = setInterval(() => {
-            setFrame((f) => (f + 1) % SPINNER_FRAMES.length);
-        }, SPINNER_INTERVAL_MS);
-        return () => clearInterval(t);
-    }, []);
-    return SPINNER_FRAMES[frame];
+    return '◉';
 }
 export function ProgressPanel({ progressStage, runningTools, turnTokens, turnElapsedMs, turnStep, pluginProgress, }) {
     // spinner hook 必须无条件调用（React Hooks 规则），早 return 放在 hook 之后

package/src/ui/StatusLine.js

@@ -1,16 +1,35 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ============================================================
+ *  src/ui/StatusLine.tsx —— 底部状态栏
+ * ------------------------------------------------------------
+ *  显示：
+ *    cwd ~/proj · {provider}/{model} · tokens 12.3K / 200K · 距压缩 7.7K
+ *  接近压缩阈值时 tokens / 距压缩 变黄；超过阈值时变红。
+ * ============================================================
+ */
+import React from 'react';
 import { Box, Text } from 'ink';
 import { homedir } from 'node:os';
 import { sep } from 'node:path';
 import { getWorkingDir } from '../bootstrap/workingDir.js';
 import { useTokenUsage } from './hooks/useTokenUsage.js';
-export function StatusLine({ provider, history, pluginProgress, }) {
+/**
+ * React.memo 包装。
+ *
+ * props: provider 引用启动后稳定；history 引用变化（useMemo slice）但内容变化
+ * 才需要重算 useTokenUsage —— React.memo 浅比较 history 引用就够了（slice 后引用
+ * 变了说明真有新消息）；pluginProgress 仅插件循环时更新。
+ *
+ * 流式 streamingText 高频更新不影响 history 引用，StatusLine 不会被带着 rerender。
+ */
+export const StatusLine = React.memo(function StatusLine({ provider, history, pluginProgress, }) {
     const usage = useTokenUsage(history, provider);
     const ratio = usage.tokens / usage.threshold;
     const color = ratio >= 1 ? 'red' : ratio >= 0.7 ? 'yellow' : 'green';
     const cwdDisplay = shortenPath(getWorkingDir());
     return (_jsxs(Box, { children: [pluginProgress && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: "magenta", children: ["\uD83D\uDD04 ", pluginProgress.pluginId, " "] }), _jsxs(Text, { color: "magenta", children: [pluginProgress.current, "/", pluginProgress.max] }), _jsx(Text, { color: "gray", children: ' · ' })] })), _jsx(Text, { color: "cyan", children: "cwd " }), _jsx(Text, { color: "gray", children: cwdDisplay }), _jsx(Text, { color: "gray", children: ' · ' }), _jsxs(Text, { color: "gray", children: [provider.name, "/", provider.model] }), _jsx(Text, { color: "gray", children: ' · ' }), _jsxs(Text, { color: color, children: ["tokens ", fmt(usage.tokens), " / ", fmt(usage.contextWindow)] }), _jsx(Text, { color: "gray", children: ' · ' }), _jsx(Text, { color: color, children: usage.toThreshold > 0 ? `距压缩 ${fmt(usage.toThreshold)}` : `已超阈值（下轮压缩）` })] }));
-}
+});
 /** 把整数格式化为 1.2K / 12.3K / 1.5M */
 function fmt(n) {
     if (n < 1000)