min-agent 0.2.1 → 0.4.0

package/dist/tui/MessageList.js

@@ -1,33 +1,687 @@
 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, clustersOf, displayWidth } from "./text-width.js";
+import { messageTextWidth } from "./layout.js";
+import { scanSgrMouse, WHEEL_UP, WHEEL_DOWN, MOTION } from "./mouse.js";
+import { applySelection, selectionRanges, stripAnsi, textFromSelection, wordRangeAt, mouseToCell, splitRangeAt, alignPartSelections, visualPrefix, } from "./selection.js";
+import { createDragMachine, clearDrag, stepDrag } from "./drag-state.js";
+import { createClickCounter, noteClick } from "./click-count.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 { text: g, width: w } of clustersOf(token)) {
+            if (width > 0 && width + w > maxWidth) {
+                rows.push(current + RESET);
+                current = prefix + g;
+                width = w;
+            }
+            else {
+                current += g;
+                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 { text: g, width: w } of clustersOf(text)) {
+        if (width + w > maxWidth)
+            break;
+        shown += g;
+        width += w;
+    }
+    return shown;
+}
+/** Rows shown for an expanded tool result — enough to read a result list. */
+const TOOL_RESULT_MAX_LINES = 120;
+/**
+ * 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.
+ */
+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 = messageTextWidth(columns);
+    switch (msg.role) {
+        case "user":
+            return wrapByWidth(`> ${msg.content}`, textWidth);
+        case "assistant": {
+            try {
+                const md = new MarkdownRenderer();
+                const rendered = md.write(typeof msg.content === "string" ? msg.content : String(msg.content ?? "")) + md.flush();
+                const raw = rendered.replace(/\n$/, "");
+                if (raw === "")
+                    return [];
+                const lines = raw.split("\n");
+                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;
+            }
+            catch {
+                return wrapByWidth(typeof msg.content === "string" ? msg.content : String(msg.content ?? ""), textWidth);
+            }
+        }
+        case "thinking":
+            return 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}` : "";
+                const packed = displayWidth(call + tail) <= contentWidth
+                    ? `${label}${call}${tail}`
+                    : `${label}${clipToWidth(call, Math.max(1, contentWidth - displayWidth(tail) - 1))}…${tail}`;
+                return [clipToWidth(packed, textWidth)];
+            }
+            const rows = wrapByWidth(`${label}${call}`, textWidth);
+            if (msg.toolChildren && msg.toolChildren.length > 0) {
+                for (const child of msg.toolChildren) {
+                    const summary = child.summary ? ` ${child.summary}` : "";
+                    rows.push(...wrapByWidth(`  ↳ ${child.name}${summary}`, 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);
+}
+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 ?? "",
+        (msg.toolChildren ?? []).map((c) => `${c.name}:${c.summary}`).join("|"),
+    ].join("\u0000");
+}
+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);
+}
+/** Rows a window actually paints: content plus one indicator per hidden side. */
+export function slicePaintRows(slice) {
+    return slice.winBottom - slice.winTop + (slice.above > 0 ? 1 : 0) + (slice.below > 0 ? 1 : 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). Each hidden side (above / below) takes its
+ * own indicator row, and those rows are subtracted from the content budget
+ * so the painted window never exceeds `maxHeight`.
+ */
+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 })),
+        };
+    }
+    // Indicator rows depend on whether the window has hidden content on each
+    // side, which depends on view height — iterate until the chrome settles
+    // (0 → 1 → 2 indicators).
+    let above = 0;
+    let below = 0;
+    let winTop = 0;
+    let viewH = maxHeight;
+    for (let pass = 0; pass < 3; pass++) {
+        const chrome = (above > 0 ? 1 : 0) + (below > 0 ? 1 : 0);
+        viewH = Math.max(1, maxHeight - chrome);
+        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 all messages naturally.
- * Scrolling is handled by the terminal's own scrollback buffer.
+ * 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 }) {
-    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)))] }));
+export function MessageList({ messages, maxHeight, columns = 80, onCopyNotice, selectionMode, onExitSelectionMode, interactive = true, }) {
+    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 kindsRef = useRef(area.kinds);
+    kindsRef.current = area.kinds;
+    const partMetaRef = useRef(area.partMeta);
+    partMetaRef.current = area.partMeta;
+    const onCopyRef = useRef(onCopyNotice);
+    onCopyRef.current = onCopyNotice;
+    const selectionModeRef = useRef(Boolean(selectionMode));
+    selectionModeRef.current = Boolean(selectionMode);
+    const lastCellRef = useRef(null);
+    const clicks = useRef(createClickCounter());
+    // Terminal coordinates (1-based) → selection module coordinates: rows index
+    // into `area.rows`, columns start at terminal col 2 (paddingLeft=1).
+    const toCell = (p) => mouseToCell(area.rows, p.row, p.col);
+    // 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 = ranges ? alignPartSelections(ranges, area.partMeta) : null;
+    // 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 text = textFromSelection(rows, kindsRef.current, selectionRanges(rows, mouseToCell(rows, sel.anchor.row, sel.anchor.col), mouseToCell(rows, sel.cur.row, sel.cur.col)));
+        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 selectionRef = useRef(selection);
+    selectionRef.current = selection;
+    const onExitRef = useRef(onExitSelectionMode);
+    onExitRef.current = onExitSelectionMode;
+    const seedSelection = () => {
+        const current = selectionRef.current;
+        if (current)
+            return current;
+        if (lastCellRef.current)
+            return { anchor: lastCellRef.current, cur: lastCellRef.current };
+        const rows = areaRef.current;
+        const i = rows.findIndex((r) => r != null);
+        const cell = i >= 0 ? { row: i + 1, col: 2 } : { row: 1, col: 2 };
+        return { anchor: cell, cur: cell };
+    };
+    const clampSelection = (sel) => {
+        const n = Math.max(1, areaRef.current.length);
+        return {
+            anchor: sel.anchor,
+            cur: { row: Math.max(1, Math.min(n, sel.cur.row)), col: Math.max(1, sel.cur.col) },
+        };
+    };
+    const nudgeSelection = (drow, dcol) => {
+        const s = seedSelection();
+        const n = Math.max(1, areaRef.current.length);
+        let row = Math.max(1, Math.min(n, s.cur.row + drow));
+        if (drow !== 0) {
+            while (row >= 1 && row <= n && areaRef.current[row - 1] == null) {
+                const next = row + Math.sign(drow);
+                if (next < 1 || next > n)
+                    break;
+                row = next;
+            }
+        }
+        const line = areaRef.current[row - 1];
+        const width = line ? displayWidth(stripAnsi(line)) : 0;
+        const col = Math.max(1, Math.min(2 + width, s.cur.col + dcol));
+        setSelection({ anchor: s.anchor, cur: { row, col } });
+    };
+    useEffect(() => {
+        if (!selectionMode)
+            return;
+        setSelection((prev) => prev ?? seedSelection());
+    }, [selectionMode, seedSelection]);
+    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 (selectionModeRef.current) {
+            const inkKey = key;
+            if (key.escape) {
+                setSelection(null);
+                onExitRef.current?.();
+                return;
+            }
+            if (key.return) {
+                const sel = selectionRef.current ?? seedSelection();
+                finalizeRef.current(sel);
+                onExitRef.current?.();
+                return;
+            }
+            if (key.leftArrow) {
+                nudgeSelection(0, -1);
+                return;
+            }
+            if (key.rightArrow) {
+                nudgeSelection(0, 1);
+                return;
+            }
+            if (key.upArrow) {
+                nudgeSelection(-1, 0);
+                return;
+            }
+            if (key.downArrow) {
+                nudgeSelection(1, 0);
+                return;
+            }
+            if (inkKey.home) {
+                const s = seedSelection();
+                setSelection({ anchor: s.anchor, cur: { row: s.cur.row, col: 1 } });
+                return;
+            }
+            if (inkKey.end) {
+                const s = seedSelection();
+                const line = areaRef.current[s.cur.row - 1];
+                const width = line ? displayWidth(stripAnsi(line)) : 0;
+                setSelection({ anchor: s.anchor, cur: { row: s.cur.row, col: 2 + width } });
+                return;
+            }
+            if (key.pageUp) {
+                scrollUp(slice.winBottom - slice.winTop);
+                setSelection((prev) => (prev ? clampSelection(prev) : prev));
+            }
+            else if (key.pageDown) {
+                scrollDown(slice.winBottom - slice.winTop);
+                setSelection((prev) => (prev ? clampSelection(prev) : prev));
+            }
+            return;
+        }
+        if (!_input.startsWith("[<") && !/^[\d;,]+[Mm]$/.test(_input)) {
+            clearDrag(drag.current);
+            setSelection(null);
+        }
+        if (key.pageUp) {
+            const step = slice.winBottom - slice.winTop;
+            scrollUp(step);
+        }
+        else if (key.pageDown) {
+            const step = slice.winBottom - slice.winTop;
+            scrollDown(step);
+        }
+        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(interactive && maxHeight && maxHeight > 0) });
+    // Scrolling back to the bottom when content shrinks (e.g. /new, /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;
+        }
+    };
+    const selectWord = (row, col) => {
+        const rows = areaRef.current;
+        const cell = mouseToCell(rows, row, col);
+        const line = rows[cell.row];
+        if (!line)
+            return;
+        const range = wordRangeAt(stripAnsi(line), cell.col);
+        if (range.end <= range.start)
+            return;
+        const sel = {
+            anchor: { row: cell.row + 1, col: range.start + 2 },
+            cur: { row: cell.row + 1, col: range.end + 1 },
+        };
+        setSelection(sel);
+        finalizeRef.current(sel);
+    };
+    const selectMessage = (row) => {
+        const rowIndex = row - 1;
+        const meta = partMetaRef.current[rowIndex];
+        if (!meta)
+            return;
+        let start = rowIndex;
+        let end = rowIndex;
+        while (start > 0 && partMetaRef.current[start - 1]?.part === meta.part)
+            start--;
+        while (end < partMetaRef.current.length - 1 && partMetaRef.current[end + 1]?.part === meta.part)
+            end++;
+        const lastLine = areaRef.current[end];
+        const width = lastLine ? displayWidth(stripAnsi(lastLine)) : 0;
+        const sel = {
+            anchor: { row: start + 1, col: 2 },
+            cur: { row: end + 1, col: Math.max(2, 1 + width) },
+        };
+        setSelection(sel);
+        finalizeRef.current(sel);
+    };
+    // 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 } = 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);
+                        if (!selectionModeRef.current)
+                            setSelection(null);
+                        if (button === WHEEL_UP || button === WHEEL_UP + MOTION)
+                            scrollUp(3);
+                        else
+                            scrollDown(3);
+                        if (selectionModeRef.current)
+                            setSelection((prev) => (prev ? clampSelection(prev) : prev));
+                    }
+                    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") {
+                    lastCellRef.current = { row: outcome.row, col: outcome.col };
+                    const count = noteClick(clicks.current, { row: outcome.row, col: outcome.col, at: Date.now() });
+                    if (count >= 3)
+                        selectMessage(outcome.row);
+                    else if (count === 2)
+                        selectWord(outcome.row, outcome.col);
+                    else
+                        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, clampSelection, handleClick, scrollDown, scrollUp, selectMessage, selectWord]);
+    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", height: maxHeight, overflow: "hidden", width: "100%", 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, flexShrink: 0, 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, flexShrink: 0, 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, lineOffset: start };
+    const margin = MARGIN;
+    if (start === 0) {
+        return { lines: lines.slice(0, Math.max(0, count - margin)), marginTop: true, lineOffset: 0 };
+    }
+    const contentStart = start - margin;
+    return { lines: lines.slice(contentStart, contentStart + count), marginTop: false, lineOffset: contentStart };
+}
+function copyKindFor(msg, lineIndex) {
+    if (msg.role === "user")
+        return lineIndex === 0 ? "user-head" : "plain";
+    if (msg.role === "tool")
+        return lineIndex === 0 ? "tool-head" : "tool-body";
+    return "plain";
 }
-/** 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;
+/**
+ * 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 kinds = [];
+    const partMeta = [];
+    if (slice.above > 0) {
+        rows.push(null);
+        kinds.push("plain");
+        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, lineOffset } = sliceLines(part.msg, lines, part.start, part.count);
+        if (marginTop) {
+            rows.push(null);
+            kinds.push("plain");
+            partMeta.push(null);
+        }
+        for (let i = 0; i < shown.length; i++) {
+            rows.push(shown[i]);
+            kinds.push(copyKindFor(part.msg, lineOffset + i));
+            partMeta.push({ part: p, shown: i });
+        }
+    }
+    if (slice.below > 0) {
+        rows.push(null);
+        kinds.push("plain");
+        partMeta.push(null);
+    }
+    return { rows, kinds, partMeta };
 }
-function MessageRow({ message }) {
+/** 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) {
+        if (!marginTop)
+            return null;
+        return _jsx(Box, { height: 1, flexShrink: 0 });
+    }
+    const sel = selection;
+    const apply = (i, line) => {
+        const range = sel?.[i];
+        return range && range.end > range.start ? applySelection(line, range.start, range.end) : line;
+    };
+    const splitFirst = (prefix) => {
+        const range = sel?.[0];
+        if (!range)
+            return { head: null, tail: null };
+        return splitRangeAt(range, displayWidth(prefix));
+    };
+    const paintPrefix = (prefix, head) => head ? applySelection(prefix, head.start, head.end) : prefix;
+    const paintBody = (body, tail) => tail ? applySelection(body, tail.start, tail.end) : body;
     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 prefix = visualPrefix(first, "user");
+            const split = prefix ? splitFirst(prefix) : null;
+            const headBody = prefix ? paintBody(first.slice(prefix.length), split.tail) : apply(0, first);
+            return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, marginTop: marginTop ? 1 : 0, flexShrink: 0, children: [_jsxs(Box, { flexWrap: "nowrap", children: [prefix !== "" && (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: "cyan", bold: true, children: paintPrefix(prefix, split.head) }) })), _jsx(Text, { wrap: "truncate-end", children: headBody })] }), rest.map((l, k) => (_jsx(Text, { wrap: "truncate-end", children: apply(k + 1, l) }, k)))] }));
+        }
         case "assistant":
-            return (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { children: renderMarkdown(message.content) }) }));
+            return (_jsx(Box, { flexDirection: "column", paddingLeft: 1, flexShrink: 0, children: shown.map((l, i) => (_jsx(Text, { wrap: "truncate-end", children: apply(i, l) }, i))) }));
         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, { flexDirection: "column", paddingLeft: 1, flexShrink: 0, children: shown.map((l, i) => (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: apply(i, l) }, i))) }));
+        case "tool": {
+            const first = shown[0] ?? "";
+            const rest = shown.slice(1);
+            const prefix = visualPrefix(first, "tool");
+            const split = prefix ? splitFirst(prefix) : null;
+            const headBody = prefix ? paintBody(first.slice(prefix.length), split.tail) : apply(0, first);
+            return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, flexShrink: 0, children: [_jsxs(Box, { flexWrap: "nowrap", children: [prefix !== "" && (_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: "yellow", children: paintPrefix(prefix, split.head) }) })), _jsx(Text, { color: prefix ? (message.toolIsError ? "red" : "gray") : undefined, wrap: "truncate-end", children: headBody })] }), rest.map((l, k) => (_jsx(Text, { color: message.toolIsError ? "red" : undefined, wrap: "truncate-end", children: apply(k + 1, l) }, k)))] }));
+        }
         case "system":
-            return (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { children: message.content }) }));
+            return (_jsx(Box, { flexDirection: "column", paddingLeft: 1, flexShrink: 0, children: shown.map((l, i) => (_jsx(Text, { wrap: "truncate-end", children: apply(i, l) }, i))) }));
         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);