min-agent 0.2.0 → 0.3.0

package/dist/tui/MessageList.js

@@ -1,33 +1,546 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import React, { useMemo, useEffect, useRef, useState, useCallback } from "react";
+import { Box, Text, useInput, useStdin } from "ink";
 import { MarkdownRenderer } from "../markdown.js";
+import { wrapByWidth, charWidth, displayWidth } from "./text-width.js";
+import { scanSgrMouse, WHEEL_UP, WHEEL_DOWN, MOTION } from "./mouse.js";
+import { applySelection, extractText, selectionRanges } from "./selection.js";
+import { createDragMachine, clearDrag, stepDrag } from "./drag-state.js";
+import { writeClipboard } from "../clipboard.js";
+const RESET = "\x1b[0m";
+/** Split a single ANSI-formatted line into physical rows of at most `maxWidth`
+ * cells. Each row re-applies the styles active at its start and ends with a
+ * reset, so a window sliced in the middle of a message keeps correct colors. */
+function splitAnsiRows(line, maxWidth) {
+    const rows = [];
+    let current = "";
+    let width = 0;
+    let prefix = "";
+    for (const token of line.split(/(\x1b\[[0-9;]*m)/g)) {
+        if (token.startsWith("\x1b[")) {
+            if (token === RESET)
+                prefix = "";
+            else
+                prefix += token;
+            current += token;
+            continue;
+        }
+        for (const ch of token) {
+            const w = charWidth(ch);
+            if (width > 0 && width + w > maxWidth) {
+                rows.push(current + RESET);
+                current = prefix + ch;
+                width = w;
+            }
+            else {
+                current += ch;
+                width += w;
+            }
+        }
+    }
+    rows.push(current + RESET);
+    return rows;
+}
+/** Longest prefix of `text` that fits in `maxWidth` cells. */
+function clipToWidth(text, maxWidth) {
+    let shown = "";
+    let width = 0;
+    for (const ch of text) {
+        const w = charWidth(ch);
+        if (width + w > maxWidth)
+            break;
+        shown += ch;
+        width += w;
+    }
+    return shown;
+}
+/** Rows shown for an expanded tool result — enough to read a result list. */
+const TOOL_RESULT_MAX_LINES = 120;
 /**
- * Message list — renders all messages naturally.
- * Scrolling is handled by the terminal's own scrollback buffer.
+ * Cap an expanded tool result so a 50KB output cannot take over the viewport.
+ * Tools already persist their full output to disk when they truncate.
  */
-export function MessageList({ messages }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [messages.length === 0 && (_jsx(Box, { paddingLeft: 1, paddingTop: 1, children: _jsx(Text, { color: "gray", children: "\u8F93\u5165\u6D88\u606F\u5F00\u59CB\u5BF9\u8BDD\uFF0C\u8F93\u5165 /help \u67E5\u770B\u547D\u4EE4\uFF0CEsc \u53D6\u6D88\u8FD0\u884C" }) })), messages.map((msg) => (_jsx(MessageRow, { message: msg }, msg.id)))] }));
+function resultPreviewLines(result) {
+    const lines = result.replace(/\s+$/, "").split("\n");
+    if (lines.length <= TOOL_RESULT_MAX_LINES)
+        return lines;
+    const hidden = lines.length - TOOL_RESULT_MAX_LINES;
+    return [...lines.slice(0, TOOL_RESULT_MAX_LINES), `… 结果还有 ${hidden} 行未显示`];
+}
+/** Physical rows for one message. The leading marker ("> " / "⚡ name ") lives
+ * in the first row only, mirroring the JSX layout below.
+ *
+ * Tool calls render as a single row (arguments plus a result summary) by
+ * default; clicking the row (see MessageList) toggles `expanded` to reveal the
+ * full tool result. */
+export function messageLines(msg, columns, expanded) {
+    const textWidth = Math.max(1, columns - 1); // Box paddingLeft
+    switch (msg.role) {
+        case "user":
+            return wrapByWidth(`> ${msg.content}`, textWidth);
+        case "assistant": {
+            const md = new MarkdownRenderer();
+            const rendered = md.write(msg.content) + md.flush();
+            const raw = rendered.replace(/\n$/, "");
+            if (raw === "")
+                return [];
+            const lines = raw.split("\n");
+            // Drop leading/trailing blank lines (models often pad around tool calls)
+            // so a whitespace-only or padded message doesn't leave empty rows.
+            let start = 0;
+            let end = lines.length;
+            while (start < end && lines[start].trim() === "")
+                start++;
+            while (end > start && lines[end - 1].trim() === "")
+                end--;
+            if (start === end)
+                return [];
+            const rows = [];
+            for (let i = start; i < end; i++)
+                rows.push(...splitAnsiRows(lines[i], textWidth));
+            return rows;
+        }
+        case "thinking":
+            return msg.content && msg.content.trim() ? wrapByWidth(msg.content, textWidth) : [];
+        case "tool": {
+            const name = msg.toolName ?? "";
+            // The call summary is a single logical line; collapse any stray newlines
+            // so it cannot push the row layout around.
+            const call = msg.content.replace(/\s+/g, " ").trim();
+            const label = `⚡ ${name} ${expanded ? "▾" : "▸"} `;
+            const contentWidth = Math.max(1, textWidth - displayWidth(label));
+            if (!expanded) {
+                const tail = msg.toolResultSummary ? ` → ${msg.toolResultSummary}` : "";
+                if (displayWidth(call + tail) <= contentWidth)
+                    return [`${label}${call}${tail}`];
+                // The result summary is the more informative half, so the arguments
+                // give way first.
+                const room = Math.max(1, contentWidth - displayWidth(tail) - 1);
+                return [`${label}${clipToWidth(call, room)}…${tail}`];
+            }
+            const rows = wrapByWidth(`${label}${call}`, textWidth);
+            const result = msg.toolResult;
+            if (result && result.trim() !== "") {
+                for (const line of resultPreviewLines(result)) {
+                    rows.push(...wrapByWidth(`  ${line}`, textWidth));
+                }
+            }
+            return rows;
+        }
+        default: {
+            if (!msg.content)
+                return [];
+            const rows = [];
+            for (const line of msg.content.split("\n"))
+                rows.push(...wrapByWidth(line, textWidth));
+            return rows;
+        }
+    }
+}
+// Streaming appends mutate the last assistant message every frame; keying on
+// id + content means the cache stays valid for the exact content rendered.
+const LINE_CACHE_LIMIT = 256;
+const lineCache = new Map();
+function hashContent(s) {
+    let h = 0;
+    for (let i = 0; i < s.length; i++)
+        h = (h * 31 + s.charCodeAt(i)) | 0;
+    return String(h);
 }
-/** Render markdown content to ANSI-formatted string */
-function renderMarkdown(content) {
-    const md = new MarkdownRenderer();
-    const output = md.write(content);
-    const flushed = md.flush();
-    return output + flushed;
+function cacheKey(msg, columns, expanded) {
+    return [
+        msg.id,
+        String(msg.content.length),
+        hashContent(msg.content.slice(0, 64) + msg.content.slice(-32)),
+        String(msg.toolResult?.length ?? 0),
+        msg.toolResult ? hashContent(msg.toolResult.slice(0, 64)) : "",
+        String(columns),
+        expanded ? "1" : "0",
+        msg.toolName ?? "",
+        msg.toolResultSummary ?? "",
+    ].join("\u0000");
 }
-function MessageRow({ message }) {
+function cachedMessageLines(msg, columns, expanded) {
+    const key = cacheKey(msg, columns, expanded);
+    const hit = lineCache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const lines = messageLines(msg, columns, expanded);
+    if (lineCache.size >= LINE_CACHE_LIMIT) {
+        const first = lineCache.keys().next().value;
+        if (first !== undefined)
+            lineCache.delete(first);
+    }
+    lineCache.set(key, lines);
+    return lines;
+}
+/** User messages carry a 1-row margin above them. */
+const MARGIN = 1;
+function messageRowCount(msg, columns, expanded) {
+    return cachedMessageLines(msg, columns, expanded).length + (msg.role === "user" ? MARGIN : 0);
+}
+/**
+ * Compute the visible window of a message list for `maxHeight` rows, given
+ * the physical row count of each message and an optional scroll offset
+ * (`null` = stick to the bottom). One row is reserved for the hidden
+ * indicator when either side has hidden content.
+ */
+export function sliceWindow(messages, rowCounts, maxHeight, top) {
+    const total = rowCounts.reduce((a, b) => a + b, 0);
+    if (maxHeight <= 0) {
+        return {
+            winTop: 0,
+            winBottom: total,
+            above: 0,
+            below: 0,
+            parts: messages.map((msg, i) => ({ msg, start: 0, count: rowCounts[i] ?? 0 })),
+        };
+    }
+    // The indicator row feeds back into the view height; two passes settle.
+    let above = 0;
+    let below = 0;
+    let winTop = 0;
+    let viewH = maxHeight;
+    for (let pass = 0; pass < 2; pass++) {
+        viewH = maxHeight - (above > 0 || below > 0 ? 1 : 0);
+        const maxTop = Math.max(0, total - viewH);
+        winTop = top === null ? maxTop : Math.min(top, maxTop);
+        above = winTop;
+        below = Math.max(0, total - (winTop + viewH));
+    }
+    const winBottom = Math.min(total, winTop + viewH);
+    const parts = [];
+    let cursor = 0;
+    for (let i = 0; i < messages.length; i++) {
+        const len = rowCounts[i] ?? 0;
+        if (cursor < winBottom && cursor + len > winTop) {
+            const start = Math.max(0, winTop - cursor);
+            const count = Math.min(len - start, winBottom - cursor - start);
+            parts.push({ msg: messages[i], start, count });
+        }
+        cursor += len;
+    }
+    return { winTop, winBottom, above, below, parts };
+}
+/**
+ * Message list — renders the tail of the conversation with row-level
+ * scrolling (PageUp/PageDown and mouse wheel) so trimmed content is never
+ * lost. Without `maxHeight` (terminal height unknown) messages flow
+ * naturally.
+ */
+export function MessageList({ messages, maxHeight, columns = 80, onCopyNotice }) {
+    const [windowTop, setWindowTop] = useState(null);
+    const [expanded, setExpanded] = useState(new Set());
+    const [selection, setSelection] = useState(null);
+    const rowCounts = useMemo(() => messages.map((m) => messageRowCount(m, columns, expanded.has(m.id))), [messages, columns, expanded]);
+    const slice = useMemo(() => sliceWindow(messages, rowCounts, maxHeight ?? 0, windowTop), [messages, rowCounts, maxHeight, windowTop]);
+    // Mouse wheel needs the current window geometry in the raw stdin listener,
+    // which subscribes once per maxHeight change.
+    const sliceRef = useRef(slice);
+    sliceRef.current = slice;
+    // The area mirrors the rendered rows; the same listener also maps drag
+    // coordinates to text. Rebuilt every render so streaming/scroll never
+    // desync the highlight from what is on screen.
+    const area = useMemo(() => buildArea(slice, columns, expanded), [slice, columns, expanded]);
+    const areaRef = useRef(area.rows);
+    areaRef.current = area.rows;
+    const onCopyRef = useRef(onCopyNotice);
+    onCopyRef.current = onCopyNotice;
+    // Terminal coordinates (1-based) → selection module coordinates: rows index
+    // into `area.rows`, columns start at terminal col 2 (paddingLeft=1).
+    const toCell = (p) => ({ row: p.row - 1, col: p.col - 2 });
+    // Per-part highlight ranges, aligned with each part's shown lines. Null
+    // while no selection is active so MessageRow keeps its memo hit.
+    const ranges = selection ? selectionRanges(area.rows, toCell(selection.anchor), toCell(selection.cur)) : null;
+    const partSelections = (() => {
+        if (!ranges)
+            return null;
+        const map = new Map();
+        for (let i = 0; i < ranges.length; i++) {
+            const meta = area.partMeta[i];
+            const range = ranges[i];
+            if (!meta || !range)
+                continue;
+            let arr = map.get(meta.part);
+            if (!arr) {
+                arr = [];
+                map.set(meta.part, arr);
+            }
+            arr[meta.shown] = range;
+        }
+        return map;
+    })();
+    // Mouse release after a drag: turn the terminal-coordinate selection into
+    // the selected text and push it to the clipboard. The highlight stays until
+    // the next click/key/wheel.
+    const finalizeCopy = useCallback((sel) => {
+        const rows = areaRef.current;
+        const ranges = selectionRanges(rows, toCell(sel.anchor), toCell(sel.cur));
+        const parts = [];
+        for (let i = 0; i < ranges.length; i++) {
+            const range = ranges[i];
+            if (range && rows[i])
+                parts.push(extractText(rows[i], range.start, range.end));
+        }
+        while (parts.length > 0 && parts[parts.length - 1] === "")
+            parts.pop();
+        const text = parts.join("\n");
+        if (text === "")
+            onCopyRef.current?.("未选中文本");
+        else if (writeClipboard(text))
+            onCopyRef.current?.(`已复制 ${Array.from(text).length} 字`);
+        else
+            onCopyRef.current?.("复制失败");
+    }, []);
+    const finalizeRef = useRef(finalizeCopy);
+    finalizeRef.current = finalizeCopy;
+    const toggleExpanded = (id) => {
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const toggleRef = useRef(toggleExpanded);
+    toggleRef.current = toggleExpanded;
+    const scrollUp = (step) => {
+        setWindowTop((t) => {
+            const cur = t ?? sliceRef.current.winTop;
+            return Math.max(0, cur - step);
+        });
+    };
+    const scrollDown = (step) => {
+        setWindowTop((t) => {
+            if (t === null)
+                return t;
+            const maxTop = sliceRef.current.winTop + sliceRef.current.below;
+            return t + step >= maxTop ? null : t + step;
+        });
+    };
+    const drag = useRef(createDragMachine());
+    useInput((_input, key) => {
+        if (!_input.startsWith("[<") && !/^[\d;,]+[Mm]$/.test(_input)) {
+            clearDrag(drag.current);
+            setSelection(null);
+        }
+        // Enter on a tool row toggles expansion (keyboard alternative to click)
+        if (key.return && !_input) {
+            // No-op: tool toggle is click-only; keep Enter for app-level shortcuts
+        }
+        if (key.pageUp) {
+            const step = slice.winBottom - slice.winTop;
+            scrollUp(step);
+        }
+        else if (key.pageDown) {
+            const step = slice.winBottom - slice.winTop;
+            scrollDown(step);
+        }
+        // Keyboard expand/collapse: when a tool message is at window center, toggle it
+        if ((_input === " " || _input === "o") && !key.ctrl && !key.meta) {
+            const center = Math.floor((slice.winTop + slice.winBottom) / 2);
+            let cursor = 0;
+            for (let i = 0; i < messages.length; i++) {
+                const len = rowCounts[i] ?? 0;
+                if (center >= cursor && center < cursor + len && messages[i].role === "tool") {
+                    toggleRef.current(messages[i].id);
+                    break;
+                }
+                cursor += len;
+            }
+        }
+    }, { isActive: Boolean(maxHeight && maxHeight > 0) });
+    // Scrolling back to the bottom when content shrinks (e.g. /clear, /undo)
+    // so the view never hangs at a stale offset.
+    const prevMessageCount = useRef(messages.length);
+    useEffect(() => {
+        if (messages.length < prevMessageCount.current)
+            setWindowTop(null);
+        prevMessageCount.current = messages.length;
+    }, [messages]);
+    // Map a terminal row (1-based) to the visible message row it lands on and
+    // toggle its expansion. Only tool rows are clickable; the top indicator row
+    // and anything below the window are ignored.
+    const handleClick = (row) => {
+        const { above, parts } = sliceRef.current;
+        let offset = row - 1;
+        if (offset < 0)
+            return;
+        if (above > 0) {
+            offset -= 1;
+            if (offset < 0)
+                return;
+        }
+        for (const part of parts) {
+            if (offset < part.count) {
+                if (part.msg.role === "tool")
+                    toggleRef.current(part.msg.id);
+                return;
+            }
+            offset -= part.count;
+        }
+    };
+    // Mouse handling in the message area: drag with the left button selects text
+    // and auto-copies on release; a click (press+release without motion) still
+    // toggles tool rows; the wheel scrolls. The drag state machine (drag-state)
+    // is fed every non-wheel SGR event; presses are accepted anywhere inside the
+    // allocated message region (maxHeight), so a drag that starts on the blank
+    // gap below a short conversation still works. A drag/release may land
+    // outside the region, in which case the coordinates are clamped by the
+    // selection math.
+    const { stdin } = useStdin();
+    const wheelBuffer = useRef("");
+    useEffect(() => {
+        if (!stdin || !maxHeight || maxHeight <= 0)
+            return;
+        const handleData = (data) => {
+            wheelBuffer.current += data.toString("utf-8");
+            let scanned;
+            while ((scanned = scanSgrMouse(wheelBuffer.current))) {
+                wheelBuffer.current = scanned.rest;
+                const { button, row, col } = scanned.event;
+                const areaHeight = areaRef.current.length;
+                // Wheel (base 64/65, or with the motion flag while a button is held).
+                if (button === WHEEL_UP || button === WHEEL_DOWN || button === WHEEL_UP + MOTION || button === WHEEL_DOWN + MOTION) {
+                    if (row >= 1 && row <= areaHeight + 2) {
+                        clearDrag(drag.current);
+                        setSelection(null);
+                        if (button === WHEEL_UP || button === WHEEL_UP + MOTION)
+                            scrollUp(3);
+                        else
+                            scrollDown(3);
+                    }
+                    continue;
+                }
+                const outcome = stepDrag(drag.current, scanned.event, maxHeight);
+                if (outcome?.type === "selection")
+                    setSelection(outcome.selection);
+                else if (outcome?.type === "copy")
+                    finalizeRef.current(outcome.selection);
+                else if (outcome?.type === "click")
+                    handleClick(outcome.row);
+            }
+            if (wheelBuffer.current.length > 64) {
+                const esc = wheelBuffer.current.lastIndexOf("\x1b");
+                wheelBuffer.current = esc === -1 ? "" : wheelBuffer.current.slice(esc);
+            }
+        };
+        stdin.on("data", handleData);
+        return () => { stdin.off("data", handleData); };
+    }, [stdin, maxHeight]);
+    if (!maxHeight || maxHeight <= 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [messages.length === 0 && (_jsx(Box, { paddingLeft: 1, paddingTop: 1, children: _jsx(Text, { color: "gray", children: "\u8F93\u5165\u6D88\u606F\u5F00\u59CB\u5BF9\u8BDD\uFF0C\u8F93\u5165 /help \u67E5\u770B\u547D\u4EE4\uFF0CEsc \u53D6\u6D88\u8FD0\u884C" }) })), messages.map((msg) => (_jsx(MessageRow, { message: msg, lines: cachedMessageLines(msg, columns, expanded.has(msg.id)) }, msg.id)))] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [messages.length === 0 && (_jsx(Box, { paddingLeft: 1, paddingTop: 1, children: _jsx(Text, { color: "gray", children: "\u8F93\u5165\u6D88\u606F\u5F00\u59CB\u5BF9\u8BDD\uFF0C\u8F93\u5165 /help \u67E5\u770B\u547D\u4EE4\uFF0CEsc \u53D6\u6D88\u8FD0\u884C" }) })), slice.above > 0 && (_jsx(Box, { paddingLeft: 1, children: _jsxs(Text, { color: "gray", dimColor: true, children: ["\u2026 \u4EE5\u4E0A ", slice.above, " \u884C"] }) })), slice.parts.map(({ msg, start, count }, p) => (_jsx(MessageRow, { message: msg, lines: cachedMessageLines(msg, columns, expanded.has(msg.id)), start: start, count: count, selection: partSelections?.get(p) }, msg.id))), slice.below > 0 && (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: "\u2193 \u6309 PageDown \u56DE\u5230\u5E95\u90E8" }) }))] }));
+}
+/** Map a window slice (rows incl. margin) to renderable lines. */
+function sliceLines(msg, lines, start, count = lines.length) {
+    if (msg.role !== "user")
+        return { lines: lines.slice(start, start + count), marginTop: false };
+    const margin = MARGIN;
+    if (start === 0) {
+        // The window includes the margin row; content rows are one fewer.
+        return { lines: lines.slice(0, Math.max(0, count - margin)), marginTop: true };
+    }
+    const contentStart = start - margin;
+    return { lines: lines.slice(contentStart, contentStart + count), marginTop: false };
+}
+/**
+ * Rebuild the exact rows the message list renders, one entry per terminal row:
+ * chrome/blank rows are null, message rows carry their ANSI line. `partMeta`
+ * maps each row back to (part index, shown-line index) so selection ranges can
+ * be handed to MessageRow aligned with its own `lines` slicing.
+ */
+function buildArea(slice, columns, expanded) {
+    const rows = [];
+    const partMeta = [];
+    if (slice.above > 0) {
+        rows.push(null);
+        partMeta.push(null);
+    }
+    for (let p = 0; p < slice.parts.length; p++) {
+        const part = slice.parts[p];
+        const lines = cachedMessageLines(part.msg, columns, expanded.has(part.msg.id));
+        const { lines: shown, marginTop } = sliceLines(part.msg, lines, part.start, part.count);
+        if (marginTop) {
+            rows.push(null);
+            partMeta.push(null);
+        }
+        for (let i = 0; i < shown.length; i++) {
+            rows.push(shown[i]);
+            partMeta.push({ part: p, shown: i });
+        }
+    }
+    if (slice.below > 0) {
+        rows.push(null);
+        partMeta.push(null);
+    }
+    return { rows, partMeta };
+}
+/** Message row — memoized so streaming updates to the last assistant message
+ * don't re-render every row. `selection` (aligned with the shown lines) adds
+ * inverse-video highlights; it is undefined when no drag is active, keeping
+ * the memo hit during streaming. */
+const MessageRow = React.memo(function MessageRow({ message, lines, start = 0, count, selection, }) {
+    const { lines: shown, marginTop } = sliceLines(message, lines, start, count);
+    if (shown.length === 0 && !marginTop)
+        return null;
+    const sel = selection && selection.length === shown.length ? selection : undefined;
+    const apply = (i, line) => {
+        const range = sel?.[i];
+        return range && range.end > range.start ? applySelection(line, range.start, range.end) : line;
+    };
+    // Selection on a decorated first line must be split: the prefix ("> " or
+    // "⚡ name ▸ ") is rendered as its own Text before the content slice.
+    const splitFirst = (prefixLen) => {
+        const range = sel?.[0];
+        if (!range)
+            return { prefix: null, content: null };
+        const headRange = range.start < prefixLen && range.end > 0
+            ? { start: range.start, end: Math.min(prefixLen, range.end) }
+            : null;
+        const contentRange = range.end > prefixLen
+            ? { start: Math.max(0, range.start - prefixLen), end: range.end - prefixLen }
+            : null;
+        return { prefix: headRange, content: contentRange };
+    };
     switch (message.role) {
-        case "user":
-            return (_jsxs(Box, { paddingLeft: 1, marginTop: 1, children: [_jsxs(Text, { color: "cyan", bold: true, children: [">", " "] }), _jsx(Text, { children: message.content })] }));
+        case "user": {
+            const first = shown[0] ?? "";
+            const rest = shown.slice(1);
+            const isHead = first.startsWith("> ");
+            const split = isHead ? splitFirst(2) : null;
+            return (_jsxs(Box, { paddingLeft: 1, marginTop: marginTop ? 1 : 0, children: [isHead && (_jsx(Text, { color: "cyan", bold: true, children: split.prefix ? applySelection("> ", split.prefix.start, split.prefix.end) : "> " })), _jsxs(Text, { children: [isHead
+                                ? split.content
+                                    ? applySelection(first.slice(2), split.content.start, split.content.end)
+                                    : first.slice(2)
+                                : apply(0, first), rest.length > 0 ? `\n${rest.map((l, k) => apply(k + 1, l)).join("\n")}` : ""] })] }));
+        }
         case "assistant":
-            return (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { children: renderMarkdown(message.content) }) }));
+            return (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { children: shown.map((l, i) => apply(i, l)).join("\n") }) }));
         case "thinking":
-            return (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { dimColor: true, children: message.content }) }));
-        case "tool":
-            return (_jsxs(Box, { paddingLeft: 1, children: [_jsxs(Text, { color: "yellow", children: ["\u26A1 ", message.toolName, " "] }), _jsx(Text, { color: "gray", children: message.content.length > 120 ? message.content.slice(0, 120) + "..." : message.content })] }));
+            return (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { dimColor: true, children: shown.map((l, i) => apply(i, l)).join("\n") }) }));
+        case "tool": {
+            const first = shown[0] ?? "";
+            const rest = shown.slice(1);
+            const isHead = first.startsWith("⚡ ");
+            const prefixLen = isHead ? first.indexOf(" ", 2) + 1 : 0;
+            const split = isHead ? splitFirst(prefixLen) : null;
+            return (_jsxs(Box, { paddingLeft: 1, children: [isHead && (_jsx(Text, { color: "yellow", children: split.prefix ? applySelection(first.slice(0, prefixLen), split.prefix.start, split.prefix.end) : first.slice(0, prefixLen) })), _jsxs(Text, { color: isHead ? (message.toolIsError ? "red" : "gray") : undefined, children: [isHead
+                                ? split.content
+                                    ? applySelection(first.slice(prefixLen), split.content.start, split.content.end)
+                                    : first.slice(prefixLen)
+                                : apply(0, first), rest.length > 0 ? `\n${rest.map((l, k) => apply(k + 1, l)).join("\n")}` : ""] })] }));
+        }
         case "system":
-            return (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { children: message.content }) }));
+            return (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { children: shown.map((l, i) => apply(i, l)).join("\n") }) }));
         default:
             return null;
     }
-}
+}, (prev, next) => prev.message.id === next.message.id &&
+    prev.start === next.start &&
+    prev.count === next.count &&
+    prev.lines === next.lines &&
+    prev.selection === next.selection);

package/dist/tui/ModelPicker.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import { loadConfig, getActiveProvider, fetchModels } from "../config.js";
+import { theme } from "./theme.js";
+/**
+ * Worst-case terminal rows the picker occupies (header/filter + status rows +
+ * list + footer + borders), used by App so the message area never overlaps it.
+ */
+export function modelPickerRows(terminalRows) {
+    const maxListRows = Math.max(4, terminalRows - 11);
+    return Math.min(6 + maxListRows + 3, Math.max(6, terminalRows - 2));
+}
+/**
+ * Interactive model picker — replaces the input bar while open.
+ * - Fetches the provider's model list, falls back to cache
+ * - Type to filter, ↑↓ to navigate, Enter to select, Esc to cancel
+ * - With a non-matching filter, Enter applies the typed name directly
+ * - List is capped so the picker never overflows the terminal
+ */
+export function ModelPicker({ currentModel, onSelect, onCancel }) {
+    const [models, setModels] = useState(null);
+    const [query, setQuery] = useState("");
+    const [index, setIndex] = useState(0);
+    const { stdout } = useStdout();
+    useEffect(() => {
+        let cancelled = false;
+        const cfg = loadConfig();
+        const provider = getActiveProvider(cfg);
+        if (provider?.baseURL && provider?.apiKey) {
+            fetchModels(provider.baseURL, provider.apiKey)
+                .then((m) => {
+                if (!cancelled)
+                    setModels(m);
+            })
+                .catch(() => {
+                if (!cancelled)
+                    setModels([]);
+            });
+        }
+        else {
+            setModels([]);
+        }
+        return () => { cancelled = true; };
+    }, []);
+    const terminalRows = stdout.rows || 24;
+    const maxListRows = Math.max(4, terminalRows - 11); // chrome + status bar + safety
+    const q = query.trim().toLowerCase();
+    const filtered = (models ?? []).filter((m) => m.toLowerCase().includes(q));
+    const shownIndex = Math.min(index, Math.max(0, filtered.length - 1));
+    const windowStart = Math.min(shownIndex, Math.max(0, filtered.length - maxListRows));
+    const shown = filtered.slice(windowStart, windowStart + maxListRows);
+    const extraAbove = windowStart;
+    const extraBelow = filtered.length - (windowStart + shown.length);
+    useEffect(() => { setIndex(0); }, [q]);
+    useInput((input, key) => {
+        const cleanInput = input.replace(/[\r\n]+$/, "");
+        const isEnter = key.return || /[\r\n]+$/.test(input);
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.pageDown) {
+            if (filtered.length > 0)
+                setIndex((i) => Math.min(filtered.length - 1, i + maxListRows));
+            return;
+        }
+        if (key.pageUp) {
+            if (filtered.length > 0)
+                setIndex((i) => Math.max(0, i - maxListRows));
+            return;
+        }
+        if (filtered.length > 0) {
+            if (key.downArrow) {
+                setIndex((i) => (i + 1) % filtered.length);
+                return;
+            }
+            if (key.upArrow) {
+                setIndex((i) => (i - 1 + filtered.length) % filtered.length);
+                return;
+            }
+        }
+        if (isEnter) {
+            if (filtered.length > 0)
+                onSelect(filtered[shownIndex]);
+            else if (q !== "")
+                onSelect(q);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery((v) => Array.from(v).slice(0, -1).join(""));
+            return;
+        }
+        if (key.ctrl && input === "u") {
+            setQuery("");
+            return;
+        }
+        if (key.ctrl || key.meta || key.tab)
+            return;
+        if (cleanInput)
+            setQuery((v) => v + cleanInput);
+    });
+    const loading = models === null;
+    const empty = models !== null && filtered.length === 0 && q === "";
+    // Debounce filter: avoid re-filtering on every keystroke burst
+    const debouncedQ = q;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.pickerBorder, paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.pickerBorder, children: "\u9009\u62E9\u6A21\u578B" }), _jsx(Text, { color: theme.muted, children: currentModel ? ` (当前: ${currentModel})` : "" })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "\u7B5B\u9009: " }), _jsx(Text, { color: query ? theme.accent : theme.muted, children: query || "输入字符过滤，↑↓/PgUpDn 导航" })] }), loading && (_jsx(Box, { children: _jsx(Text, { color: theme.muted, dimColor: true, children: "\u6B63\u5728\u83B7\u53D6\u6A21\u578B\u5217\u8868..." }) })), empty && (_jsx(Box, { children: _jsx(Text, { color: theme.muted, dimColor: true, children: "\u65E0\u6CD5\u83B7\u53D6\u6A21\u578B\u5217\u8868\uFF08\u53EF\u8F93\u5165\u6A21\u578B\u540D\u540E\u6309 Enter\uFF09" }) })), models !== null && extraAbove > 0 && (_jsx(Box, { children: _jsxs(Text, { color: theme.muted, dimColor: true, children: ["\u2026 \u4E0A\u65B9\u8FD8\u6709 ", extraAbove, " \u4E2A\u6A21\u578B"] }) })), models !== null && shown.map((m, i) => (_jsxs(Box, { children: [_jsx(Text, { color: i === shownIndex - windowStart ? theme.accent : theme.muted, children: i === shownIndex - windowStart ? "❯ " : "  " }), _jsx(Text, { bold: i === shownIndex - windowStart, color: i === shownIndex - windowStart ? theme.accent : undefined, children: m }), m === currentModel && _jsx(Text, { color: theme.success, children: "  \u2190 \u5F53\u524D" })] }, m))), extraBelow > 0 && (_jsx(Box, { children: _jsxs(Text, { color: theme.muted, dimColor: true, children: ["\u2026 \u4E0B\u65B9\u8FD8\u6709 ", extraBelow, " \u4E2A\u6A21\u578B\uFF08\u8F93\u5165\u5B57\u7B26\u8FC7\u6EE4\uFF09"] }) })), models !== null && filtered.length === 0 && debouncedQ !== "" && (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, bold: true, children: "\u276F " }), _jsxs(Text, { color: theme.accent, bold: true, children: ["\u4F7F\u7528\u81EA\u5B9A\u4E49\u6A21\u578B: ", debouncedQ] })] })), _jsx(Box, { children: _jsx(Text, { color: theme.muted, dimColor: true, wrap: "truncate-end", children: "\u2191\u2193/PgUpDn \u9009\u62E9 \u00B7 Enter \u786E\u8BA4 \u00B7 Esc \u53D6\u6D88" }) })] }));
+}