minimal-agent 0.5.4 → 0.5.6

package/src/ui/MessageList.js

@@ -1,22 +1,222 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+/**
+ * ============================================================
+ *  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, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["\uD83D\uDCA1 ", streamingReasoning.length > 300
-                            ? `...(${Math.round(streamingReasoning.length / 1000)}K字)${streamingReasoning.slice(-200)}`
-                            : streamingReasoning] }) })), 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(', ')}` }))] }));
         }
@@ -24,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

@@ -0,0 +1,54 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/** 阶段标签中文映射 */
+const STAGE_LABELS = {
+    thinking: '思考中',
+    streaming: '回答中',
+    tool_executing: '调用工具',
+    compacting: '压缩历史',
+};
+/** 工具参数预览单行最大宽度（fallback 时用） */
+const TOOL_ARGS_MAX = 60;
+/** 按字符宽度截断，超长尾部加 …（按字符而非 byte，够用） */
+function truncateTail(s, max) {
+    if (s.length <= max)
+        return s;
+    return `${s.slice(0, max - 1)}…`;
+}
+/**
+ * 静态指示符：不使用动画 spinner（setState+setInterval 会每 120ms 触发整棵树 rerender，
+ * 导致 StreamingBlock / InputBox 等兄弟组件频繁重绘 → 终端追加新行而非原地刷新）。
+ * 用固定字符代替，stage_change 事件本身已足够表达"正在工作"。
+ */
+function useSpinnerFrame() {
+    return '◉';
+}
+export function ProgressPanel({ progressStage, runningTools, turnTokens, turnElapsedMs, turnStep, pluginProgress, }) {
+    // spinner hook 必须无条件调用（React Hooks 规则），早 return 放在 hook 之后
+    const spinner = useSpinnerFrame();
+    // idle 时整个面板不渲染
+    if (progressStage === 'idle') {
+        return null;
+    }
+    const stageLabel = STAGE_LABELS[progressStage];
+    const elapsedSec = (turnElapsedMs / 1000).toFixed(1);
+    const tokensStr = turnTokens.toLocaleString();
+    // 头行的"主描述"：有工具用 friendly，无工具用 stage label
+    let mainDescription;
+    if (runningTools.length > 0) {
+        const first = runningTools[0];
+        mainDescription =
+            first.argsFriendly && first.argsFriendly.length > 0
+                ? first.argsFriendly
+                : `${first.toolName}(${truncateTail(first.argsPreview, TOOL_ARGS_MAX)})`;
+        if (runningTools.length > 1) {
+            mainDescription += ` +${runningTools.length - 1} more`;
+        }
+    }
+    else {
+        mainDescription = stageLabel;
+    }
+    // 头行尾部的附加信息：耗时 / token / step
+    const stepHint = typeof turnStep === 'number' && turnStep > 0 ? ` · step ${turnStep}` : '';
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", children: [spinner, " "] }), _jsx(Text, { bold: true, children: mainDescription }), _jsx(Text, { color: "gray", children: ` · ${elapsedSec}s · ~${tokensStr} tokens${stepHint}` })] }), pluginProgress && (_jsx(Box, { children: _jsx(Text, { color: "magenta", children: `[plugin:${pluginProgress.pluginId}] ${pluginProgress.current}/${pluginProgress.max ?? '?'}${pluginProgress.message ? ` ${pluginProgress.message}` : ''}` }) }))] }));
+}

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)

package/src/ui/StreamingBlock.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+/** streaming text 显示尾部行数上限（超出截尾，老内容滚出窗口） */
+const STREAMING_TAIL_LINES = 20;
+export function StreamingBlock({ progressStage, streamingText, }) {
+    if (progressStage !== 'streaming' || streamingText.length === 0) {
+        return null;
+    }
+    const lines = streamingText.split('\n').slice(-STREAMING_TAIL_LINES);
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [lines.map((line, i) => (_jsx(Text, { children: line }, i))), _jsx(Text, { color: "gray", dimColor: true, children: "\u258D" })] }));
+}

package/src/ui/ToolStatus.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 export function ToolStatus({ status, compacting }) {
     if (compacting) {
-        return (_jsx(Box, { children: _jsx(Text, { color: "magenta", bold: true, children: "\uD83D\uDDDC  \u6B63\u5728\u538B\u7F29\u5BF9\u8BDD\u5386\u53F2..." }) }));
+        return (_jsx(Box, { children: _jsx(Text, { color: "magenta", bold: true, children: "\uD83D\uDF18 \u6B63\u5728\u538B\u7F29\u5BF9\u8BDD\u5386\u53F2..." }) }));
     }
     if (status) {
-        return (_jsx(Box, { children: _jsxs(Text, { color: "yellow", children: ['⏳ ', _jsx(Text, { bold: true, children: status.toolName }), `(${status.argsPreview})`] }) }));
+        return (_jsx(Box, { children: _jsxs(Text, { color: "yellow", children: ["\u23F3 ", _jsx(Text, { bold: true, children: status.toolName }), "(", status.argsPreview, ")"] }) }));
     }
     return null;
 }