@bubblebrain-ai/bubble 0.0.10 → 0.0.12

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

@@ -3,8 +3,8 @@ import React from "react";
 import { Box, Static, Text } from "ink";
 import { useTheme } 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 { MarkdownContent, StreamingMarkdown } from "./markdown.js";
+import { buildTraceGroups, formatTracePath, traceGroupLabel } from "./trace-groups.js";
 import { EDIT_COLLAPSED_DIFF_LINES, formatEditSuccessSummary, getEditDiffDetails } from "./edit-diff.js";
 import { formatSubagentRoute } from "../agent/subagent-route-format.js";
 export function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, pendingApproval, nowTick, welcomeBanner, }) {
@@ -12,12 +12,6 @@ export function MessageList({ messages, streamingContent, streamingReasoning, st
         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" });
@@ -32,7 +26,7 @@ export function MessageList({ messages, streamingContent, streamingReasoning, st
             showExpandHint: !hasStreaming && i === lastMessageIndex,
         });
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => {
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Static, { items: staticItems, children: (item) => {
                     if (item.kind === "welcome") {
                         return _jsx(React.Fragment, { children: welcomeBanner }, item.key);
                     }
@@ -47,13 +41,16 @@ function MessageItem({ message, terminalColumns, verboseTrace, showExpandHint, n
     if (message.role === "error") {
         return (_jsx(Box, { marginBottom: 1, flexDirection: "column", children: _jsxs(Text, { color: theme.error, children: ["Error: ", message.content] }) }));
     }
+    if (message.syntheticKind === "ui_compact_summary") {
+        return _jsx(CompactionSummaryBlock, { message: message });
+    }
     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 }))] }));
+    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 })), message.taskElapsedMs !== undefined && (_jsx(TaskDurationLine, { elapsedMs: message.taskElapsedMs }))] }));
 }
 function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, verboseTrace, pendingApproval, nowTick, }) {
     const deferredContent = React.useDeferredValue(content);
@@ -62,18 +59,26 @@ function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, v
     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 }) }))] }));
+    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, streaming: true }) }))] }));
 }
-function MessageParts({ parts, terminalColumns, verboseTrace, pendingApproval, showExpandHint, nowTick, showActivity = false, }) {
+function MessageParts({ parts, terminalColumns, verboseTrace, pendingApproval, showExpandHint, nowTick, showActivity = false, streaming = false, }) {
     const lastToolsPartIndex = findLastToolsPartIndex(parts);
+    const lastTextPartIndex = findLastTextPartIndex(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(TimelineText, { content: part.content, compactTop: idx === 0, terminalColumns: terminalColumns, streaming: streaming && idx === lastTextPartIndex }, `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, }) {
+function findLastTextPartIndex(parts) {
+    for (let i = parts.length - 1; i >= 0; i--) {
+        if (parts[i]?.type === "text")
+            return i;
+    }
+    return -1;
+}
+function TimelineText({ content, compactTop, terminalColumns, streaming = false, }) {
     const theme = useTheme();
     if (!content.trim())
         return null;
@@ -81,7 +86,8 @@ function TimelineText({ content, compactTop, terminalColumns, }) {
     // 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 }) })] }));
+    const trimmed = content.trim();
+    return (_jsxs(Box, { marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsx(Text, { color: theme.agent, children: "\u26EC  " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: streaming ? (_jsx(StreamingMarkdown, { content: trimmed, maxWidth: available })) : (_jsx(MarkdownContent, { content: trimmed, maxWidth: available })) })] }));
 }
 function ToolsPart({ toolCalls, terminalColumns, verboseTrace, pendingApproval, showExpandHint, compactTop = false, nowTick, showActivity = false, }) {
     if (toolCalls.length === 0)
@@ -120,10 +126,10 @@ function TraceGroupList({ toolCalls, terminalColumns, pendingApproval, nowTick,
 function TraceActivityLine({ group, pendingApproval, nowTick, terminalColumns, }) {
     const theme = useTheme();
     const waiting = isTraceGroupWaitingForApproval(group, pendingApproval);
-    const elapsed = formatElapsed(group.startedAt, nowTick);
+    void 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] })] }));
+    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 })] }));
 }
 function TraceGroupBlock({ group, terminalColumns, pendingApproval, compactTop, nowTick, }) {
     const theme = useTheme();
@@ -137,23 +143,30 @@ function TraceGroupBlock({ group, terminalColumns, pendingApproval, compactTop,
     const allErrored = group.hasError && group.errorCount >= group.raw.length && !group.pending;
     const titleColor = allErrored ? theme.error : theme.traceAction;
     const detailColor = allErrored ? theme.error : theme.traceDetail;
-    const commandWidth = Math.max(14, terminalColumns - group.title.length - 16);
+    const commandWidth = Math.max(14, terminalColumns - group.title.length - 20);
     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.errorLines.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: group.errorLines.map((line, index) => (_jsxs(Box, { marginLeft: index === 0 ? 0 : 2, children: [index === 0 && _jsx(Text, { color: theme.traceDetail, children: "\u21B3 " }), _jsx(Text, { color: theme.error, children: truncateVisual(line, detailWidth - (index === 0 ? 2 : 0)) })] }, `error-${index}`))) })), group.omitted > 0 && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: theme.traceDetail, children: ["... ", group.omitted, " more, Ctrl+O to view"] }) }))] }));
+    // When a bash command is too long to fit on the title line, drop it onto its
+    // own indented rows so narrow splits keep the full command visible instead of
+    // silently truncating mid-flag.
+    const commandFitsInline = !group.command || visualWidth(group.command) <= commandWidth;
+    const wrappedCommandLines = group.command && !commandFitsInline
+        ? wrapByVisualWidth(group.command, Math.max(10, detailWidth - 2))
+        : null;
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: titleColor, children: group.title }), group.command && commandFitsInline ? (_jsxs(Text, { color: theme.traceCommand, children: [" ", group.command] })) : !group.command && 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] })] }), wrappedCommandLines && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: wrappedCommandLines.map((seg, idx) => (_jsx(Text, { color: theme.traceCommand, children: seg }, `cmd-${idx}`))) })), 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.errorLines.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: group.errorLines.map((line, index) => (_jsxs(Box, { marginLeft: index === 0 ? 0 : 2, children: [index === 0 && _jsx(Text, { color: theme.traceDetail, children: "\u21B3 " }), _jsx(Text, { color: theme.error, children: truncateVisual(line, detailWidth - (index === 0 ? 2 : 0)) })] }, `error-${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 theme = useTheme();
     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 })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: theme.traceAction, children: "Edit" }), path && _jsxs(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, theme, 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 };
+        void nowTick;
+        return { text: "running", color: theme.tracePending };
     }
     if (group.hasError) {
         const count = group.errorCount || 1;
@@ -186,15 +199,24 @@ 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 CompactionSummaryBlock({ message }) {
+    const theme = useTheme();
+    const rawStatus = message.content.replace(/^✓\s*/, "").trim();
+    const status = rawStatus.replace(/^Compaction complete\s*(?:·\s*)?/i, "").trim() || "Session compacted";
+    const summary = message.compactionSummary?.trim();
+    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, paddingX: 1, flexDirection: "column", borderStyle: "round", borderColor: theme.borderActive, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.success, bold: true, children: "\u2713 " }), _jsx(Text, { color: theme.accent, bold: true, children: "Compaction checkpoint" }), _jsxs(Text, { color: theme.muted, children: [" \u00B7 ", status] })] }), summary && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.muted, dimColor: true, children: "Preserved context summary" }), _jsx(Box, { paddingLeft: 2, flexDirection: "column", children: _jsx(MarkdownContent, { content: summary }) })] }))] }));
+}
 function UserMessageBlock({ content, terminalColumns }) {
     const theme = useTheme();
-    // Rail (▌ + space) takes 2 cols; reserve 2 cols inside the fill for left/right gutters.
+    // Rail and its right gutter must share the bubble background; otherwise the
+    // terminal background shows up as a dark seam between rail and message.
+    const railWidth = 2;
     const horizontalRoom = Math.max(20, terminalColumns - 2);
-    const bubbleTextWidth = Math.max(1, horizontalRoom - 2);
+    const bubbleTextWidth = Math.max(1, horizontalRoom - railWidth - 2);
     const wrappedLines = content
         .split("\n")
         .flatMap((line) => wrapByVisualWidth(line, bubbleTextWidth));
-    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))) }));
+    return (_jsx(Box, { flexDirection: "column", children: wrappedLines.map((line, index) => (_jsxs(Box, { children: [_jsx(Text, { backgroundColor: theme.userMessageBg, color: theme.userRail, children: index === 0 ? "▌ " : "  " }), _jsx(Text, { backgroundColor: theme.userMessageBg, color: theme.userMessageText, children: ` ${padVisual(line || " ", bubbleTextWidth)} ` })] }, index))) }));
 }
 const TOOL_DISPLAY_NAMES = {
     read: "Read",
@@ -403,8 +425,8 @@ function ToolCallDisplay({ toolCall, isStreaming, verbose, terminalColumns, show
                 ? 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.
+    // Compose summary: pending tools stay compact; waiting-for-approval gets an
+    // explicit badge so the trail survives the dialog closing.
     let summary;
     let summaryColor = theme.muted;
     if (waitingApproval) {
@@ -412,8 +434,8 @@ function ToolCallDisplay({ toolCall, isStreaming, verbose, terminalColumns, show
         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";
+        void nowTick;
+        summary = "running";
         summaryColor = theme.toolPending;
     }
     else {
@@ -529,7 +551,8 @@ function DiffBlock({ diff, terminalColumns, maxLines, verbose, showExpandHint, }
     // 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 blankPrefix = " ".repeat(prefixWidth);
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: leftMargin, children: [shown.flatMap((line, i) => {
                 const bg = line.type === "add"
                     ? theme.diffAdd
                     : line.type === "remove"
@@ -537,10 +560,17 @@ function DiffBlock({ diff, terminalColumns, maxLines, verbose, showExpandHint, }
                         : 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));
+                // Soft-wrap long lines at the terminal-derived content width so narrow
+                // splits still show the full content. Continuation rows reuse the same
+                // background but blank out the gutter (no line number, no +/-) so a
+                // reader can tell at a glance which rows belong to the same logical
+                // diff line.
+                const segments = wrapByVisualWidth(line.content, contentWidth);
+                return segments.map((segment, segIdx) => {
+                    const padded = padVisual(segment, contentWidth);
+                    const prefix = segIdx === 0 ? ` ${numStr} ${sign} ` : blankPrefix;
+                    return (_jsx(Text, { backgroundColor: bg, color: theme.userMessageText, children: `${prefix}${padded}` }, `${i}-${segIdx}`));
+                });
             }), _jsx(TruncationHint, { remaining: remaining, verbose: verbose, showExpandHint: showExpandHint })] }));
 }
 /**
@@ -554,6 +584,10 @@ function TurnDigest({ toolCalls }) {
         return null;
     return (_jsx(Box, { marginLeft: 2, marginTop: 1, children: _jsx(Text, { color: theme.muted, dimColor: true, children: digest }) }));
 }
+function TaskDurationLine({ elapsedMs }) {
+    const theme = useTheme();
+    return (_jsx(Box, { marginLeft: 2, marginTop: 1, children: _jsxs(Text, { color: theme.muted, dimColor: true, children: ["Task duration: ", formatDuration(elapsedMs)] }) }));
+}
 function buildDigest(toolCalls) {
     const paths = new Set();
     let added = 0;
@@ -595,6 +629,24 @@ function buildDigest(toolCalls) {
         : "";
     return `↳ ${verb} ${paths.size} file${paths.size === 1 ? "" : "s"}${stats} — ${pathDisplay}`;
 }
+function formatDuration(ms) {
+    if (!Number.isFinite(ms) || ms <= 0)
+        return "0s";
+    if (ms < 1000)
+        return `${Math.max(1, Math.round(ms))}ms`;
+    const seconds = ms / 1000;
+    if (seconds < 10)
+        return `${seconds.toFixed(1)}s`;
+    if (seconds < 60)
+        return `${Math.round(seconds)}s`;
+    let minutes = Math.floor(seconds / 60);
+    let remSec = Math.round(seconds - minutes * 60);
+    if (remSec >= 60) {
+        minutes += Math.floor(remSec / 60);
+        remSec %= 60;
+    }
+    return remSec === 0 ? `${minutes}m` : `${minutes}m ${remSec}s`;
+}
 function truncateVisual(str, maxWidth) {
     if (maxWidth <= 0)
         return "";

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

@@ -1,10 +1,28 @@
 import { ProviderRegistry } from "../provider-registry.js";
+export { padVisual, truncateVisual } from "../text-display.js";
 export interface ModelPickerOption {
     id: string;
     label: string;
     group: string;
     providerBadge: string;
 }
+export type PickerKeyAction = "up" | "down" | "enter" | "escape" | "backspace" | "delete";
+export declare function resolvePickerKeyAction(input: string, key: {
+    upArrow?: boolean;
+    downArrow?: boolean;
+    return?: boolean;
+    escape?: boolean;
+    backspace?: boolean;
+    delete?: boolean;
+}): PickerKeyAction | undefined;
+export declare function isPrintablePickerInput(input: string): boolean;
+export declare function formatSkillPickerRow(skill: {
+    name: string;
+    description?: string;
+}, options: {
+    selected: boolean;
+    width: number;
+}): string;
 export interface ModelPickerProps {
     registry: ProviderRegistry;
     current: string;

package/dist/tui-ink/model-picker.js

@@ -4,13 +4,61 @@ import { Box, Text, useInput, usePaste, useStdout } from "ink";
 import { useTheme } from "./theme.js";
 import { encodeModel, decodeModel, displayModel, isUserVisibleProvider } from "../provider-registry.js";
 import { listBuiltinModels } from "../model-catalog.js";
+import { padVisual, truncateVisual } from "../text-display.js";
+export { padVisual, truncateVisual } from "../text-display.js";
+export function resolvePickerKeyAction(input, key) {
+    if (key.escape)
+        return "escape";
+    if (key.return)
+        return "enter";
+    if (key.upArrow)
+        return "up";
+    if (key.downArrow)
+        return "down";
+    if (key.backspace)
+        return "backspace";
+    if (key.delete)
+        return "delete";
+    const sequence = normalizeEscapeSequence(input);
+    if (/^(?:O|\[[\d;:]*)A$/.test(sequence))
+        return "up";
+    if (/^(?:O|\[[\d;:]*)B$/.test(sequence))
+        return "down";
+    return undefined;
+}
+export function isPrintablePickerInput(input) {
+    if (!input)
+        return false;
+    if (input.startsWith("\x1b"))
+        return false;
+    if (isRawEscapeTail(input))
+        return false;
+    return !/[\x00-\x1f\x7f]/.test(input);
+}
+export function formatSkillPickerRow(skill, options) {
+    const width = Math.max(12, options.width);
+    const marker = options.selected ? "> " : "  ";
+    const nameBudget = Math.max(8, Math.min(28, Math.floor(width * 0.35)));
+    const name = truncateVisual(skill.name, nameBudget);
+    const nameCell = padVisual(name, nameBudget);
+    const description = (skill.description ?? "").replace(/\s+/g, " ").trim();
+    const row = description
+        ? `${marker}${nameCell}  ${description}`
+        : `${marker}${nameCell}`;
+    return padVisual(truncateVisual(row, width), width);
+}
+function normalizeEscapeSequence(input) {
+    return input.startsWith("\x1b") ? input.slice(1) : input;
+}
+function isRawEscapeTail(input) {
+    return /^(?:O[ABCDHF]|\[[\d;:]*[A-Za-z~])$/.test(input);
+}
 export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
     const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
     const maxVisible = Math.max(5, termHeight - 10);
     const [rawOptions, setRawOptions] = useState(() => buildLocalModelOptions(registry, current, recent));
-    const [refreshing, setRefreshing] = useState(false);
     const [query, setQuery] = useState("");
     const [selectedIndex, setSelectedIndex] = useState(() => preferredModelIndex(buildLocalModelOptions(registry, current, recent), current));
     useEffect(() => {
@@ -63,10 +111,8 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
                     const currentIndex = preferredModelIndex(opts, current);
                     return index === preferredModelIndex(localOptions, current) ? currentIndex : Math.min(index, Math.max(0, opts.length - 1));
                 });
-                setRefreshing(false);
             }
         }
-        setRefreshing(true);
         void refreshRemote();
         return () => {
             cancelled = true;
@@ -79,25 +125,26 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
         return rawOptions.filter((opt) => opt.label.toLowerCase().includes(q) || opt.providerBadge.toLowerCase().includes(q));
     }, [rawOptions, query]);
     useInput((input, key) => {
-        if (key.escape) {
+        const action = resolvePickerKeyAction(input, key);
+        if (action === "escape") {
             onCancel();
             return;
         }
-        if (key.return) {
+        if (action === "enter") {
             const opt = options[selectedIndex];
             if (opt)
                 onSelect(opt.id);
             return;
         }
-        if (key.upArrow) {
+        if (action === "up") {
             setSelectedIndex((i) => Math.max(0, i - 1));
             return;
         }
-        if (key.downArrow) {
+        if (action === "down") {
             setSelectedIndex((i) => Math.min(options.length - 1, i + 1));
             return;
         }
-        if (key.backspace || key.delete) {
+        if (action === "backspace" || action === "delete") {
             setQuery((q) => {
                 const next = q.slice(0, -1);
                 setSelectedIndex(0);
@@ -105,7 +152,7 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
             });
             return;
         }
-        if (input && !key.ctrl && !key.meta) {
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
             setQuery((q) => {
                 const next = q + input;
                 setSelectedIndex(0);
@@ -116,7 +163,7 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
     });
     const start = Math.max(0, Math.min(selectedIndex, options.length - maxVisible));
     const visible = options.slice(start, start + maxVisible);
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Select Model" }), _jsx(SearchField, { query: query, placeholder: "Type to search models..." }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 Backspace clear" }), refreshing && _jsx(Text, { color: theme.muted, children: "Refreshing remote model list..." }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.length === 0 && (_jsxs(Text, { color: theme.muted, children: ["No models match \"", query, "\""] })), visible.map((opt, i) => {
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Select Model" }), _jsx(SearchField, { query: query, placeholder: "Type to search models..." }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 Backspace clear" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.length === 0 && (_jsxs(Text, { color: theme.muted, children: ["No models match \"", query, "\""] })), visible.map((opt, i) => {
                         const actualIndex = start + i;
                         const isSelected = actualIndex === selectedIndex;
                         return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", opt.label] }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: theme.muted, dimColor: true, children: opt.providerBadge }) }), opt.id === current && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: theme.accent, children: "\u25CF" }) }))] }, opt.id));
@@ -200,25 +247,26 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title }
         return idx >= 0 ? idx : 0;
     });
     useInput((input, key) => {
-        if (key.escape) {
+        const action = resolvePickerKeyAction(input, key);
+        if (action === "escape") {
             onCancel();
             return;
         }
-        if (key.return) {
+        if (action === "enter") {
             const p = providers[selectedIndex];
             if (p)
                 onSelect(p.id);
             return;
         }
-        if (key.upArrow) {
+        if (action === "up") {
             setSelectedIndex((i) => Math.max(0, i - 1));
             return;
         }
-        if (key.downArrow) {
+        if (action === "down") {
             setSelectedIndex((i) => Math.min(providers.length - 1, i + 1));
             return;
         }
-        if (input && input.length === 1 && /[a-z]/i.test(input)) {
+        if (isPrintablePickerInput(input) && input.length === 1 && /[a-z]/i.test(input)) {
             const char = input.toLowerCase();
             for (let i = selectedIndex + 1; i < providers.length; i++) {
                 if (providers[i].name.toLowerCase().startsWith(char)) {
@@ -246,20 +294,21 @@ export function KeyPicker({ providerName, onSubmit, onCancel }) {
     const theme = useTheme();
     const [value, setValue] = useState("");
     useInput((input, key) => {
-        if (key.escape) {
+        const action = resolvePickerKeyAction(input, key);
+        if (action === "escape") {
             onCancel();
             return;
         }
-        if (key.return) {
+        if (action === "enter") {
             if (value.trim())
                 onSubmit(value.trim());
             return;
         }
-        if (key.backspace || key.delete) {
+        if (action === "backspace" || action === "delete") {
             setValue((v) => v.slice(0, -1));
             return;
         }
-        if (input && !key.ctrl && !key.meta) {
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
             setValue((v) => v + input);
         }
     });
@@ -277,7 +326,9 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
     const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
+    const terminalColumns = stdout?.columns || 80;
     const maxVisible = Math.max(5, termHeight - 8);
+    const rowWidth = Math.max(36, Math.min(96, terminalColumns - 6));
     const [query, setQuery] = useState("");
     const [selectedIndex, setSelectedIndex] = useState(0);
     const options = useMemo(() => {
@@ -287,25 +338,26 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
         return skills.filter((skill) => skill.name.toLowerCase().includes(q) || skill.description.toLowerCase().includes(q));
     }, [query, skills]);
     useInput((input, key) => {
-        if (key.escape) {
+        const action = resolvePickerKeyAction(input, key);
+        if (action === "escape") {
             onCancel();
             return;
         }
-        if (key.return) {
+        if (action === "enter") {
             const skill = options[selectedIndex];
             if (skill)
                 onSelect(skill.name);
             return;
         }
-        if (key.upArrow) {
+        if (action === "up") {
             setSelectedIndex((i) => Math.max(0, i - 1));
             return;
         }
-        if (key.downArrow) {
+        if (action === "down") {
             setSelectedIndex((i) => Math.min(Math.max(0, options.length - 1), i + 1));
             return;
         }
-        if (key.backspace || key.delete) {
+        if (action === "backspace" || action === "delete") {
             setQuery((q) => {
                 const next = q.slice(0, -1);
                 setSelectedIndex(0);
@@ -313,7 +365,7 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
             });
             return;
         }
-        if (input && !key.ctrl && !key.meta) {
+        if (isPrintablePickerInput(input) && !key.ctrl && !key.meta) {
             setQuery((q) => {
                 const next = q + input;
                 setSelectedIndex(0);
@@ -321,11 +373,13 @@ export function SkillPicker({ skills, onSelect, onCancel }) {
             });
         }
     });
-    const start = Math.max(0, Math.min(selectedIndex, options.length - maxVisible));
+    const maxStart = Math.max(0, options.length - maxVisible);
+    const start = Math.max(0, Math.min(maxStart, selectedIndex - Math.floor(maxVisible / 2)));
     const visible = options.slice(start, start + maxVisible);
     return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Select Skill" }), _jsx(SearchField, { query: query, placeholder: "Type to search skills..." }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter load \u00B7 Esc cancel \u00B7 Backspace clear" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [options.length === 0 && (_jsxs(Text, { color: theme.muted, children: ["No skills match \"", query, "\""] })), visible.map((skill, i) => {
                         const actualIndex = start + i;
                         const isSelected = actualIndex === selectedIndex;
-                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", skill.name] }), skill.description && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: theme.muted, dimColor: true, children: skill.description }) }))] }, skill.name));
+                        const row = formatSkillPickerRow(skill, { selected: isSelected, width: rowWidth });
+                        return (_jsx(Box, { children: _jsx(Text, { inverse: isSelected, color: isSelected ? theme.accent : undefined, bold: isSelected, children: row }) }, skill.name));
                     })] })] }));
 }

package/dist/tui-ink/run-session-picker.d.ts

@@ -0,0 +1,10 @@
+import type { ResolvedTheme } from "./detect-theme.js";
+import type { SessionSummary } from "../session.js";
+export interface RunSessionPickerOptions {
+    currentCwd: string;
+    currentSessions: SessionSummary[];
+    allSessions: SessionSummary[];
+    resolvedTheme: ResolvedTheme;
+    themeOverrides?: Record<string, string>;
+}
+export declare function runSessionPicker(options: RunSessionPickerOptions): Promise<string | undefined>;

package/dist/tui-ink/run-session-picker.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "ink";
+import { SessionPicker } from "./session-picker.js";
+import { ThemeProvider, paletteFor } from "./theme.js";
+export async function runSessionPicker(options) {
+    const theme = paletteFor(options.resolvedTheme, options.themeOverrides);
+    return new Promise((resolve) => {
+        let done = false;
+        const finish = (value) => {
+            if (done)
+                return;
+            done = true;
+            try {
+                instance.unmount();
+            }
+            catch { /* ignore */ }
+            resolve(value);
+        };
+        const instance = render(_jsx(ThemeProvider, { value: theme, children: _jsx(SessionPicker, { currentCwd: options.currentCwd, currentSessions: options.currentSessions, allSessions: options.allSessions, onSelect: (file) => finish(file), onCancel: () => finish(undefined) }) }));
+        void instance.waitUntilExit().then(() => finish(undefined));
+    });
+}

package/dist/tui-ink/run.js

@@ -4,7 +4,7 @@ import chalk from "chalk";
 import { App } from "./app.js";
 import { warmHighlighter } from "./code-highlight.js";
 export async function runTui(agent, args, options = {}) {
-    // Kick off shiki load before the first code block reaches <Static>. Fire and
+    // Kick off shiki load before the first code block is rendered. Fire and
     // forget — CodeBlock's lazy init falls back to raw lines if this isn't ready
     // yet, so callers don't need to await it.
     warmHighlighter();
@@ -18,6 +18,11 @@ export async function runTui(agent, args, options = {}) {
             // teardown so it lands in the real shell scrollback (Claude-Code style).
             exitSummary = summary;
         } }), {
+        // Bubble owns Ctrl+C so it can route both raw ETX and kitty keyboard
+        // Ctrl+C through App.requestExit(). Ink's default only exits reliably
+        // for raw "\x03"; with kitty keyboard it can swallow the parsed
+        // ctrl+c event before our useInput handlers see it.
+        exitOnCtrlC: false,
         kittyKeyboard: {
             mode: "enabled",
             flags: ["disambiguateEscapeCodes"],
@@ -36,7 +41,7 @@ export async function runTui(agent, args, options = {}) {
     }
 }
 function formatExitSummary(summary) {
-    const label = "Total duration (wall):";
+    const label = "Total duration:";
     return chalk.dim(`${label} ${formatWallMs(summary.wallMs)}`);
 }
 function formatWallMs(ms) {

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

@@ -0,0 +1,10 @@
+import type { SessionSummary } from "../session.js";
+export type SessionPickerMode = "current" | "all";
+export interface SessionPickerProps {
+    currentCwd: string;
+    currentSessions: SessionSummary[];
+    allSessions: SessionSummary[];
+    onSelect: (file: string) => void;
+    onCancel: () => void;
+}
+export declare function SessionPicker({ currentCwd, currentSessions, allSessions, onSelect, onCancel }: SessionPickerProps): import("react/jsx-runtime").JSX.Element;