@bubblebrain-ai/bubble 0.0.6 → 0.0.8

package/dist/tui-ink/message-list.js

@@ -0,0 +1,571 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Static, Text } from "ink";
+import { theme } from "./theme.js";
+import { highlightCode, inferLang } from "./code-highlight.js";
+import { MarkdownContent } from "./markdown.js";
+import { buildTraceGroups, formatElapsed, formatTracePath, traceGroupLabel } from "./trace-groups.js";
+import { EDIT_COLLAPSED_DIFF_LINES, formatEditSuccessSummary, getEditDiffDetails } from "./edit-diff.js";
+export function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, pendingApproval, nowTick, welcomeBanner, }) {
+    const hasStreaming = !!(streamingContent ||
+        streamingReasoning ||
+        streamingTools.length > 0 ||
+        streamingParts.length > 0);
+    // Committed messages enter ink's <Static> region immediately and never move
+    // between a live <Box> and Static. Moving the same message across those
+    // regions writes it into terminal scrollback twice. Mutable assistant output
+    // stays in StreamingMessage until the agent reports a final turn_end. Keep
+    // the Static instance identity stable across terminal resizes; remounting it
+    // would replay all previously-written scrollback items.
+    const staticItems = [];
+    if (welcomeBanner) {
+        staticItems.push({ kind: "welcome", key: "welcome" });
+    }
+    const lastMessageIndex = messages.length - 1;
+    for (let i = 0; i < messages.length; i++) {
+        const msg = messages[i];
+        staticItems.push({
+            kind: "message",
+            key: msg.key ?? `message-${i}`,
+            message: msg,
+            showExpandHint: !hasStreaming && i === lastMessageIndex,
+        });
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => {
+                    if (item.kind === "welcome") {
+                        return _jsx(React.Fragment, { children: welcomeBanner }, item.key);
+                    }
+                    return (_jsx(MessageItem, { message: item.message, terminalColumns: terminalColumns, verboseTrace: verboseTrace, showExpandHint: item.showExpandHint, nowTick: item.showExpandHint ? nowTick : undefined }, item.key));
+                } }), hasStreaming && (_jsx(StreamingMessage, { content: streamingContent, reasoning: streamingReasoning, tools: streamingTools, parts: streamingParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, nowTick: nowTick }))] }));
+}
+function MessageItem({ message, terminalColumns, verboseTrace, showExpandHint, nowTick, }) {
+    if (message.role === "user") {
+        return _jsx(UserMessageBlock, { content: message.content, terminalColumns: terminalColumns });
+    }
+    if (message.role === "error") {
+        return (_jsx(Box, { marginBottom: 1, flexDirection: "column", children: _jsxs(Text, { color: theme.error, children: ["Error: ", message.content] }) }));
+    }
+    const hasVisibleAssistantContent = !!message.content ||
+        (message.toolCalls?.length ?? 0) > 0 ||
+        (message.parts?.length ?? 0) > 0 ||
+        (!!message.reasoning && verboseTrace);
+    if (!hasVisibleAssistantContent)
+        return null;
+    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [message.reasoning && verboseTrace && _jsx(ReasoningTraceBlock, { reasoning: message.reasoning }), message.parts && message.parts.length > 0 ? (_jsx(MessageParts, { parts: message.parts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: undefined, showExpandHint: showExpandHint, nowTick: nowTick })) : (_jsxs(_Fragment, { children: [message.toolCalls && (_jsx(ToolsPart, { toolCalls: message.toolCalls, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: undefined, showExpandHint: showExpandHint, nowTick: nowTick })), message.content && _jsx(MarkdownContent, { content: message.content })] })), verboseTrace && message.toolCalls && message.toolCalls.length > 0 && (_jsx(TurnDigest, { toolCalls: message.toolCalls }))] }));
+}
+function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, verboseTrace, pendingApproval, nowTick, }) {
+    const deferredContent = React.useDeferredValue(content);
+    const deferredReasoning = React.useDeferredValue(reasoning);
+    const deferredParts = React.useDeferredValue(parts);
+    const visibleParts = deferredParts.length > 0
+        ? deferredParts
+        : fallbackStreamingParts(deferredContent, tools);
+    return (_jsxs(Box, { flexDirection: "column", children: [deferredReasoning && verboseTrace && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(ReasoningTraceBlock, { reasoning: deferredReasoning }) })), visibleParts.length > 0 && (_jsx(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: _jsx(MessageParts, { parts: visibleParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, showExpandHint: true, nowTick: nowTick, showActivity: true }) }))] }));
+}
+function MessageParts({ parts, terminalColumns, verboseTrace, pendingApproval, showExpandHint, nowTick, showActivity = false, }) {
+    const lastToolsPartIndex = findLastToolsPartIndex(parts);
+    return (_jsx(Box, { flexDirection: "column", children: parts.map((part, idx) => {
+            if (part.type === "text") {
+                return (_jsx(TimelineText, { content: part.content, compactTop: idx === 0, terminalColumns: terminalColumns }, `text-${idx}`));
+            }
+            return (_jsx(ToolsPart, { toolCalls: part.toolCalls, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, showExpandHint: showExpandHint && idx === lastToolsPartIndex, compactTop: idx === 0, nowTick: nowTick, showActivity: showActivity && idx === lastToolsPartIndex }, `tools-${idx}`));
+        }) }));
+}
+function TimelineText({ content, compactTop, terminalColumns, }) {
+    if (!content.trim())
+        return null;
+    // marginLeft (2) + "⛬  " glyph (3 visual cells) = 5 cells consumed by the
+    // timeline gutter; pass the remaining width so wide blocks like tables size
+    // themselves against the actual content area instead of the raw terminal.
+    const available = terminalColumns ? Math.max(20, terminalColumns - 5) : undefined;
+    return (_jsxs(Box, { marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsx(Text, { color: theme.agent, children: "\u26EC  " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(MarkdownContent, { content: content.trim(), maxWidth: available }) })] }));
+}
+function ToolsPart({ toolCalls, terminalColumns, verboseTrace, pendingApproval, showExpandHint, compactTop = false, nowTick, showActivity = false, }) {
+    if (toolCalls.length === 0)
+        return null;
+    if (!verboseTrace) {
+        return (_jsx(TraceGroupList, { toolCalls: toolCalls, terminalColumns: terminalColumns, pendingApproval: pendingApproval, nowTick: nowTick, compactTop: compactTop, showActivity: showActivity }));
+    }
+    const lastIdx = toolCalls.length - 1;
+    return (_jsx(Box, { flexDirection: "column", children: toolCalls.map((tc, idx) => {
+            const isWaitingApproval = tc.result === undefined && !!pendingApproval && approvalMatchesTool(pendingApproval, tc);
+            return (_jsx(ToolCallDisplay, { toolCall: tc, isStreaming: tc.result === undefined, verbose: verboseTrace, terminalColumns: terminalColumns, showExpandHint: showExpandHint && idx === lastIdx, waitingApproval: isWaitingApproval, compactTop: idx === 0 && compactTop, nowTick: nowTick }, tc.id));
+        }) }));
+}
+function fallbackStreamingParts(content, tools) {
+    const parts = [];
+    if (tools.length > 0)
+        parts.push({ type: "tools", toolCalls: tools });
+    if (content)
+        parts.push({ type: "text", content });
+    return parts;
+}
+function findLastToolsPartIndex(parts) {
+    for (let i = parts.length - 1; i >= 0; i--) {
+        if (parts[i]?.type === "tools")
+            return i;
+    }
+    return -1;
+}
+function TraceGroupList({ toolCalls, terminalColumns, pendingApproval, nowTick, compactTop = false, showActivity = false, }) {
+    const groups = React.useMemo(() => buildTraceGroups(toolCalls), [toolCalls]);
+    const activeGroup = showActivity ? findActiveTraceGroup(groups, pendingApproval) : undefined;
+    if (groups.length === 0)
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", children: [activeGroup && (_jsx(TraceActivityLine, { group: activeGroup, pendingApproval: pendingApproval, nowTick: nowTick, terminalColumns: terminalColumns })), groups.map((group, idx) => (_jsx(TraceGroupBlock, { group: group, terminalColumns: terminalColumns, pendingApproval: pendingApproval, compactTop: idx === 0 && compactTop, nowTick: nowTick }, group.raw.map((tool) => tool.id).join(":"))))] }));
+}
+function TraceActivityLine({ group, pendingApproval, nowTick, terminalColumns, }) {
+    const waiting = isTraceGroupWaitingForApproval(group, pendingApproval);
+    const elapsed = formatElapsed(group.startedAt, nowTick);
+    const labelWidth = Math.max(20, terminalColumns - 26);
+    const label = truncateVisual(traceGroupLabel(group), labelWidth);
+    return (_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { color: waiting ? theme.warning : theme.tracePending, children: "\u25CF " }), _jsxs(Text, { color: theme.traceDetail, children: [waiting ? "Waiting for approval" : "Working on", " "] }), _jsx(Text, { color: theme.traceAction, children: label }), elapsed && _jsxs(Text, { color: theme.traceDetail, children: [" \u00B7 ", elapsed] })] }));
+}
+function TraceGroupBlock({ group, terminalColumns, pendingApproval, compactTop, nowTick, }) {
+    const waiting = isTraceGroupWaitingForApproval(group, pendingApproval);
+    const status = traceGroupStatus(group, waiting, nowTick);
+    const editTool = group.kind === "edit" && group.raw.length === 1 ? group.raw[0] : undefined;
+    const editDetails = editTool && !group.pending && !group.hasError ? getEditDiffDetails(editTool) : null;
+    if (editTool && editDetails) {
+        return (_jsx(EditTraceBlock, { tool: editTool, details: editDetails, terminalColumns: terminalColumns, compactTop: compactTop, status: status }));
+    }
+    const titleColor = group.hasError ? theme.error : theme.traceAction;
+    const detailColor = group.hasError ? theme.error : theme.traceDetail;
+    const commandWidth = Math.max(14, terminalColumns - group.title.length - 16);
+    const detailWidth = Math.max(20, terminalColumns - 8);
+    const detailLines = group.previewLines.length > 0 ? group.previewLines : group.items;
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: titleColor, children: group.title }), group.command ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: theme.traceCommand, children: truncateVisual(group.command, commandWidth) })] })) : group.count !== undefined && group.noun ? (_jsxs(Text, { color: theme.traceCount, children: [" ", group.count, " ", group.noun] })) : null, status && _jsxs(Text, { color: status.color, children: [" ", status.text] })] }), detailLines.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: detailLines.map((line, index) => (_jsxs(Box, { marginLeft: index === 0 ? 0 : 2, children: [index === 0 && _jsx(Text, { color: theme.traceDetail, children: "\u21B3 " }), _jsx(Text, { color: detailColor, children: truncateVisual(line, detailWidth - (index === 0 ? 2 : 0)) })] }, index))) })), group.omitted > 0 && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: theme.traceDetail, children: ["... ", group.omitted, " more, Ctrl+O to view"] }) }))] }));
+}
+function EditTraceBlock({ tool, details, terminalColumns, compactTop, status, }) {
+    const path = formatTracePath(details.path ?? tool.args.path ?? "");
+    const pathWidth = Math.max(14, terminalColumns - 12);
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.traceAction, children: "Edit" }), path && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: theme.traceCommand, children: truncateVisual(path, pathWidth) })] })), status && _jsxs(Text, { color: status.color, children: [" ", status.text] })] }), _jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { color: theme.traceDetail, children: "\u23BF  " }), _jsx(Text, { color: theme.success, children: formatEditSuccessSummary(details) })] }), _jsx(DiffBlock, { diff: details.diff, terminalColumns: terminalColumns, maxLines: EDIT_COLLAPSED_DIFF_LINES, verbose: false, showExpandHint: true })] }));
+}
+function traceGroupStatus(group, waitingApproval, nowTick) {
+    if (waitingApproval)
+        return { text: "waiting for approval", color: theme.warning };
+    if (group.pending) {
+        const elapsed = formatElapsed(group.startedAt, nowTick);
+        return { text: elapsed ? `running · ${elapsed}` : "running", color: theme.tracePending };
+    }
+    if (group.hasError)
+        return { text: "error", color: theme.error };
+    return null;
+}
+function findActiveTraceGroup(groups, pendingApproval) {
+    for (let i = groups.length - 1; i >= 0; i--) {
+        const group = groups[i];
+        if (isTraceGroupWaitingForApproval(group, pendingApproval) || group.pending) {
+            return group;
+        }
+    }
+    return undefined;
+}
+function isTraceGroupWaitingForApproval(group, pendingApproval) {
+    return !!pendingApproval && group.raw.some((tool) => tool.result === undefined && approvalMatchesTool(pendingApproval, tool));
+}
+function approvalMatchesTool(hint, tc) {
+    if (hint.toolName !== tc.name)
+        return false;
+    if (hint.toolName === "bash") {
+        return !hint.command || hint.command === tc.args.command;
+    }
+    return !hint.path || hint.path === tc.args.path;
+}
+function ReasoningTraceBlock({ reasoning }) {
+    const lines = React.useMemo(() => reasoning.split("\n").filter((l) => l.trim() !== ""), [reasoning]);
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginBottom: 1, children: [_jsxs(Text, { color: theme.thinkingDim, dimColor: true, children: ["\u273B Reasoning trace", lines.length > 0 ? ` · ${lines.length} line${lines.length === 1 ? "" : "s"}` : ""] }), lines.map((line, i) => (_jsx(Text, { color: theme.thinkingDim, dimColor: true, italic: true, children: line }, i)))] }));
+}
+function UserMessageBlock({ content, terminalColumns }) {
+    const horizontalRoom = Math.max(20, terminalColumns - 4);
+    const maxBubbleTextWidth = Math.max(1, horizontalRoom - 4);
+    const wrappedLines = content
+        .split("\n")
+        .flatMap((line) => wrapByVisualWidth(line, maxBubbleTextWidth));
+    const bubbleTextWidth = Math.min(maxBubbleTextWidth, Math.max(8, ...wrappedLines.map((line) => visualWidth(line))));
+    return (_jsx(Box, { flexDirection: "column", children: wrappedLines.map((line, index) => (_jsxs(Box, { children: [_jsx(Text, { color: theme.userRail, children: "\u258C " }), _jsx(Text, { backgroundColor: theme.userMessageBg, color: theme.userMessageText, children: ` ${padVisual(line || " ", bubbleTextWidth)} ` })] }, index))) }));
+}
+const TOOL_DISPLAY_NAMES = {
+    read: "Read",
+    write: "Write",
+    edit: "Edit",
+    bash: "Bash",
+    grep: "Grep",
+    glob: "Glob",
+    web_fetch: "WebFetch",
+    web_search: "WebSearch",
+};
+const TOOL_GLYPHS = {
+    read: "⏺",
+    write: "✎",
+    edit: "✎",
+    bash: "▶",
+    grep: "⌕",
+    glob: "⌕",
+    web_fetch: "⇲",
+    web_search: "⌕",
+    task: "↳",
+    todo: "✓",
+    skill: "★",
+};
+function displayToolName(name) {
+    if (TOOL_DISPLAY_NAMES[name])
+        return TOOL_DISPLAY_NAMES[name];
+    return name.charAt(0).toUpperCase() + name.slice(1);
+}
+function toolGlyph(name) {
+    return TOOL_GLYPHS[name] ?? "●";
+}
+function getToolHeader(toolCall) {
+    const args = toolCall.args || {};
+    const trunc = (s, n = 50) => (s.length > n ? s.slice(0, n) + "..." : s);
+    switch (toolCall.name) {
+        case "read":
+        case "write":
+        case "edit":
+            return args.path ? trunc(String(args.path), 60) : undefined;
+        case "bash":
+            return args.command ? trunc(String(args.command).replace(/\n/g, " "), 60) : undefined;
+        case "grep":
+            return args.pattern ? trunc(String(args.pattern), 60) : undefined;
+        case "glob":
+            return args.pattern ? trunc(String(args.pattern), 60) : undefined;
+        case "web_fetch":
+            return args.url ? trunc(String(args.url), 60) : undefined;
+        case "web_search":
+            return args.query ? trunc(String(args.query), 60) : undefined;
+        default:
+            return undefined;
+    }
+}
+function summarizeToolResult(tc) {
+    if (tc.result === undefined)
+        return "pending";
+    const raw = tc.result.replace(/\r\n/g, "\n");
+    if (tc.isError) {
+        const firstLine = raw.split("\n").find((l) => l.trim() !== "") || "Error";
+        return firstLine.length > 80 ? firstLine.slice(0, 80) + "..." : firstLine;
+    }
+    const nonEmpty = raw.split("\n").filter((l) => l.trim() !== "");
+    const lineCount = nonEmpty.length;
+    const p = (n, singular, plural) => `${n} ${n === 1 ? singular : plural}`;
+    switch (tc.name) {
+        case "read":
+            return p(lineCount, "line", "lines");
+        case "write": {
+            const firstLine = raw.split("\n")[0] || "";
+            if (firstLine.startsWith("Wrote ") || firstLine.startsWith("Updated ")) {
+                return firstLine;
+            }
+            return "Wrote file";
+        }
+        case "edit": {
+            return formatEditSuccessSummary(getEditDiffDetails(tc));
+        }
+        case "bash":
+            return lineCount > 0 ? `${p(lineCount, "line", "lines")} output` : "Done";
+        case "grep":
+            return `Found ${p(lineCount, "match", "matches")}`;
+        case "glob":
+            return `Found ${p(lineCount, "file", "files")}`;
+        case "web_search":
+            return `${p(lineCount, "result", "results")}`;
+        case "web_fetch":
+            return p(lineCount, "line", "lines");
+        default:
+            return lineCount > 0 ? p(lineCount, "line", "lines") : "Done";
+    }
+}
+const COLLAPSED_PREVIEW_LINES = 10;
+const EXPANDED_PREVIEW_LINES = 50;
+function ToolCallDisplay({ toolCall, isStreaming, verbose, terminalColumns, showExpandHint = false, waitingApproval = false, compactTop = false, nowTick, }) {
+    // Show raw output immediately, then upgrade to highlighted ANSI when shiki
+    // resolves. Avoids a noticeable "flash" where the line jumps from empty/raw
+    // to colorized after a tick.
+    const initialPreview = React.useMemo(() => {
+        if (toolCall.result === undefined || toolCall.isError)
+            return null;
+        return toolCall.result.replace(/\r\n/g, "\n");
+    }, [toolCall.result, toolCall.isError]);
+    const [highlighted, setHighlighted] = React.useState(initialPreview);
+    const header = getToolHeader(toolCall);
+    const maxLines = verbose ? EXPANDED_PREVIEW_LINES : COLLAPSED_PREVIEW_LINES;
+    React.useEffect(() => {
+        let cancelled = false;
+        if (toolCall.result === undefined || toolCall.isError) {
+            setHighlighted(null);
+            return;
+        }
+        const raw = toolCall.result.replace(/\r\n/g, "\n");
+        let lang = "text";
+        if (toolCall.name === "read")
+            lang = inferLang(toolCall.args.path);
+        else if (toolCall.name === "bash")
+            lang = "shell";
+        // Always seed with raw so the user sees content immediately.
+        setHighlighted(raw);
+        if (lang === "text") {
+            return;
+        }
+        highlightCode(raw, lang)
+            .then((out) => {
+            if (!cancelled)
+                setHighlighted(out);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setHighlighted(raw);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [toolCall.result, toolCall.name, toolCall.args.path, toolCall.isError]);
+    const glyph = toolGlyph(toolCall.name);
+    const bulletColor = toolCall.isError
+        ? theme.error
+        : waitingApproval
+            ? theme.warning
+            : isStreaming
+                ? theme.toolPending
+                : theme.user;
+    const name = displayToolName(toolCall.name);
+    // Compose summary: pending tools get an elapsed counter; waiting-for-approval
+    // gets an explicit badge so the trail survives the dialog closing.
+    let summary;
+    let summaryColor = theme.muted;
+    if (waitingApproval) {
+        summary = "⏸ waiting for approval";
+        summaryColor = theme.warning;
+    }
+    else if (toolCall.result === undefined && toolCall.startedAt) {
+        const elapsedSec = Math.max(0, Math.floor(((nowTick ?? Date.now()) - toolCall.startedAt) / 1000));
+        summary = elapsedSec > 0 ? `running · ${elapsedSec}s` : "running";
+        summaryColor = theme.toolPending;
+    }
+    else {
+        summary = summarizeToolResult(toolCall);
+        if (toolCall.isError)
+            summaryColor = theme.error;
+        else if (toolCall.name === "edit" && toolCall.result !== undefined)
+            summaryColor = theme.success;
+    }
+    const editDetails = getEditDiffDetails(toolCall);
+    const isEditDiff = editDetails !== null && toolCall.result !== undefined;
+    // Only show the file preview once the tool actually executed. During the
+    // streaming-args phase, args.content is incomplete and re-rendering the
+    // entire body per delta both looks chaotic and breaks on partial escapes.
+    const isWritePreview = toolCall.name === "write" && !toolCall.isError && toolCall.result !== undefined;
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: bulletColor, children: [glyph, " "] }), _jsx(Text, { bold: true, color: theme.toolName, children: name }), header && _jsxs(Text, { color: theme.muted, children: ["(", header, ")"] })] }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: summaryColor, children: ["\u23BF  ", summary] }) }), toolCall.isError && toolCall.result && (_jsx(Box, { marginLeft: 4, flexDirection: "column", children: toolCall.result.replace(/\r\n/g, "\n").split("\n").slice(0, 6).map((line, i) => (_jsx(Text, { color: theme.error, children: line }, i))) })), isEditDiff && (_jsx(DiffBlock, { diff: editDetails.diff, terminalColumns: terminalColumns, maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint })), isWritePreview && (_jsx(WritePreview, { content: String(toolCall.args.content || ""), maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint })), !toolCall.isError && !isEditDiff && !isWritePreview && highlighted && (_jsx(OutputPreview, { text: highlighted, maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint }))] }));
+}
+function renderTruncationHint(remaining, verbose, showExpandHint) {
+    if (remaining <= 0)
+        return null;
+    const noun = `line${remaining === 1 ? "" : "s"}`;
+    if (verbose) {
+        return (_jsxs(Text, { color: theme.muted, children: ["... (", remaining, " more ", noun, ")"] }));
+    }
+    return (_jsxs(Text, { color: theme.muted, children: ["\u2026 +", remaining, " ", noun, showExpandHint ? " (ctrl+o to expand)" : ""] }));
+}
+function OutputPreview({ text, maxLines, verbose, showExpandHint, }) {
+    const lines = text.split("\n");
+    const shown = lines.slice(0, maxLines);
+    const remaining = Math.max(0, lines.length - maxLines);
+    if (shown.length === 0 || (shown.length === 1 && shown[0] === ""))
+        return null;
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 4, children: [shown.map((line, i) => (_jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "\u2502 " }), _jsx(Text, { children: line })] }, i))), renderTruncationHint(remaining, verbose, showExpandHint)] }));
+}
+function WritePreview({ content, maxLines, verbose, showExpandHint, }) {
+    const lines = content.split("\n");
+    const shown = lines.slice(0, maxLines);
+    const remaining = Math.max(0, lines.length - maxLines);
+    const numWidth = Math.max(2, String(lines.length).length);
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 4, children: [shown.map((line, i) => (_jsxs(Box, { children: [_jsxs(Text, { color: theme.muted, children: [String(i + 1).padStart(numWidth, " "), "  "] }), _jsx(Text, { children: line })] }, i))), renderTruncationHint(remaining, verbose, showExpandHint)] }));
+}
+function parseDiffLines(body) {
+    const result = [];
+    let oldNum = 0;
+    let newNum = 0;
+    const rawLines = body.split("\n");
+    if (rawLines[rawLines.length - 1] === "")
+        rawLines.pop();
+    for (const raw of rawLines) {
+        if (raw.startsWith("+++") ||
+            raw.startsWith("---") ||
+            raw.startsWith("Index:") ||
+            raw.startsWith("==="))
+            continue;
+        if (raw.startsWith("@@")) {
+            const m = raw.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+            if (m) {
+                oldNum = parseInt(m[1], 10);
+                newNum = parseInt(m[2], 10);
+            }
+            continue;
+        }
+        if (raw.startsWith("+")) {
+            result.push({ type: "add", num: newNum, content: raw.slice(1) });
+            newNum++;
+        }
+        else if (raw.startsWith("-")) {
+            result.push({ type: "remove", num: oldNum, content: raw.slice(1) });
+            oldNum++;
+        }
+        else {
+            const content = raw.startsWith(" ") ? raw.slice(1) : raw;
+            result.push({ type: "context", num: newNum, content });
+            oldNum++;
+            newNum++;
+        }
+    }
+    return result;
+}
+function DiffBlock({ diff, terminalColumns, maxLines, verbose, showExpandHint, }) {
+    const lines = parseDiffLines(diff);
+    const shown = lines.slice(0, maxLines);
+    const remaining = Math.max(0, lines.length - maxLines);
+    const maxNum = lines.reduce((acc, l) => Math.max(acc, l.num), 0);
+    const numWidth = Math.max(2, String(maxNum).length);
+    const leftMargin = 2;
+    const prefixWidth = numWidth + 4; // " NUM ± "
+    // Reserve the full left-margin chain from terminal edge to diff content:
+    // app padding (1) + ToolCallDisplay marginLeft (2) + DiffBlock marginLeft (2)
+    // + right padding (1) + 1-col safety = 7. Without this, each row overflows
+    // by 1 column, the terminal auto-wraps, and every line renders with a blank
+    // row beneath it.
+    const bandWidth = Math.max(10, terminalColumns - 7);
+    const contentWidth = Math.max(1, bandWidth - prefixWidth);
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: leftMargin, children: [shown.map((line, i) => {
+                const bg = line.type === "add"
+                    ? theme.diffAdd
+                    : line.type === "remove"
+                        ? theme.diffRemove
+                        : undefined;
+                const sign = line.type === "add" ? "+" : line.type === "remove" ? "-" : " ";
+                const numStr = String(line.num).padStart(numWidth, " ");
+                const truncated = truncateVisual(line.content, contentWidth);
+                const padded = padVisual(truncated, contentWidth);
+                const lineText = ` ${numStr} ${sign} ${padded}`;
+                return (_jsx(Text, { backgroundColor: bg, color: theme.userMessageText, children: lineText }, i));
+            }), renderTruncationHint(remaining, verbose, showExpandHint)] }));
+}
+/**
+ * "Edited 3 files (+42 -8) — a.ts, b.ts" digest below the assistant turn.
+ * Surfaces only when there is at least one file-mutating tool call.
+ */
+function TurnDigest({ toolCalls }) {
+    const digest = React.useMemo(() => buildDigest(toolCalls), [toolCalls]);
+    if (!digest)
+        return null;
+    return (_jsx(Box, { marginLeft: 2, marginTop: 1, children: _jsx(Text, { color: theme.muted, dimColor: true, children: digest }) }));
+}
+function buildDigest(toolCalls) {
+    const paths = new Set();
+    let added = 0;
+    let removed = 0;
+    let writes = 0;
+    let edits = 0;
+    for (const tc of toolCalls) {
+        if (tc.isError || !tc.result)
+            continue;
+        if (tc.name === "edit") {
+            const details = getEditDiffDetails(tc);
+            if (details) {
+                added += details.added;
+                removed += details.removed;
+            }
+            if (tc.args.path)
+                paths.add(String(tc.args.path));
+            edits += 1;
+        }
+        else if (tc.name === "write") {
+            if (tc.args.path)
+                paths.add(String(tc.args.path));
+            writes += 1;
+            const content = String(tc.args.content ?? "");
+            if (content)
+                added += content.split("\n").length;
+        }
+    }
+    const total = edits + writes;
+    if (total === 0 || paths.size === 0)
+        return null;
+    const verb = edits > 0 && writes === 0 ? "Edited" : writes > 0 && edits === 0 ? "Wrote" : "Touched";
+    const pathList = Array.from(paths);
+    const shownPaths = pathList.slice(0, 4).map((p) => p.split("/").pop() || p);
+    const extra = pathList.length - shownPaths.length;
+    const pathDisplay = shownPaths.join(", ") + (extra > 0 ? `, +${extra} more` : "");
+    const stats = added || removed
+        ? ` (${added ? `+${added}` : ""}${added && removed ? " " : ""}${removed ? `-${removed}` : ""})`
+        : "";
+    return `↳ ${verb} ${paths.size} file${paths.size === 1 ? "" : "s"}${stats} — ${pathDisplay}`;
+}
+function truncateVisual(str, maxWidth) {
+    if (maxWidth <= 0)
+        return "";
+    let out = "";
+    let width = 0;
+    for (const char of str) {
+        const w = charVisualWidth(char);
+        if (width + w > maxWidth)
+            break;
+        out += char;
+        width += w;
+    }
+    return out;
+}
+function visualWidth(str) {
+    let width = 0;
+    for (const char of str) {
+        const code = char.codePointAt(0) || 0;
+        if ((code >= 0x4e00 && code <= 0x9fff) ||
+            (code >= 0x3000 && code <= 0x303f) ||
+            (code >= 0xff00 && code <= 0xffef) ||
+            (code >= 0x3040 && code <= 0x309f) ||
+            (code >= 0x30a0 && code <= 0x30ff)) {
+            width += 2;
+        }
+        else {
+            width += 1;
+        }
+    }
+    return width;
+}
+function padVisual(str, width) {
+    const currentWidth = visualWidth(str);
+    return str + " ".repeat(Math.max(0, width - currentWidth));
+}
+function charVisualWidth(char) {
+    const code = char.codePointAt(0) || 0;
+    if ((code >= 0x4e00 && code <= 0x9fff) ||
+        (code >= 0x3000 && code <= 0x303f) ||
+        (code >= 0xff00 && code <= 0xffef) ||
+        (code >= 0x3040 && code <= 0x309f) ||
+        (code >= 0x30a0 && code <= 0x30ff)) {
+        return 2;
+    }
+    return 1;
+}
+function wrapByVisualWidth(line, maxWidth) {
+    if (maxWidth <= 0)
+        return [line];
+    if (line === "")
+        return [""];
+    const result = [];
+    let current = "";
+    let currentWidth = 0;
+    for (const char of line) {
+        const w = charVisualWidth(char);
+        if (currentWidth + w > maxWidth) {
+            result.push(current);
+            current = char;
+            currentWidth = w;
+        }
+        else {
+            current += char;
+            currentWidth += w;
+        }
+    }
+    if (current !== "" || result.length === 0)
+        result.push(current);
+    return result;
+}

package/dist/tui-ink/model-picker.d.ts

@@ -0,0 +1,43 @@
+import { ProviderRegistry } from "../provider-registry.js";
+export interface ModelPickerOption {
+    id: string;
+    label: string;
+    group: string;
+    providerBadge: string;
+}
+export interface ModelPickerProps {
+    registry: ProviderRegistry;
+    current: string;
+    recent: string[];
+    onSelect: (model: string) => void;
+    onCancel: () => void;
+}
+export declare function ModelPicker({ registry, current, recent, onSelect, onCancel }: ModelPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function buildLocalModelOptions(registry: ProviderRegistry, current: string, recent: string[]): ModelPickerOption[];
+export interface ProviderPickerProps {
+    providers: Array<{
+        id: string;
+        name: string;
+        enabled: boolean;
+    }>;
+    current?: string;
+    onSelect: (providerId: string) => void;
+    onCancel: () => void;
+    title?: string;
+}
+export declare function ProviderPicker({ providers, current, onSelect, onCancel, title }: ProviderPickerProps): import("react/jsx-runtime").JSX.Element;
+export interface KeyPickerProps {
+    providerName: string;
+    onSubmit: (key: string) => void;
+    onCancel: () => void;
+}
+export declare function KeyPicker({ providerName, onSubmit, onCancel }: KeyPickerProps): import("react/jsx-runtime").JSX.Element;
+export interface SkillPickerProps {
+    skills: Array<{
+        name: string;
+        description: string;
+    }>;
+    onSelect: (name: string) => void;
+    onCancel: () => void;
+}
+export declare function SkillPicker({ skills, onSelect, onCancel }: SkillPickerProps): import("react/jsx-runtime").JSX.Element;