@bubblebrain-ai/bubble 0.0.9 → 0.0.11

package/dist/tui-ink/markdown.js

@@ -89,6 +89,85 @@ export function parseMarkdownBlocks(text) {
     }
     return blocks;
 }
+/**
+ * Return the byte offset where the LAST markdown block begins in `text`.
+ *
+ * Used by the streaming renderer to split incoming content into a "stable
+ * prefix" (everything before the in-flight block — already-closed blocks)
+ * and an "unstable suffix" (the block currently being typed by the model).
+ * Mirrors parseMarkdownBlocks's lexing rules so the boundary it produces is
+ * compatible with how MarkdownContent will later parse the prefix.
+ *
+ * Returns `text.length` when no blocks are present (empty / whitespace-only
+ * input), and `0` when the entire text is a single in-flight block.
+ */
+export function findLastBlockStart(text) {
+    if (text.length === 0)
+        return 0;
+    const lines = text.split("\n");
+    // `split("\n")` on "abc\n" yields ["abc", ""]; on "abc" yields ["abc"]. The
+    // trailing newline only contributes a length-1 separator for every line
+    // except the final element produced by split.
+    const lineLengthWithSeparator = (idx) => {
+        const len = lines[idx].length;
+        return idx < lines.length - 1 ? len + 1 : len;
+    };
+    let i = 0;
+    let offset = 0;
+    let lastBlockStart = text.length;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Code block (fenced). Unclosed fences extend through EOF — that's exactly
+        // what we want for streaming, since marked-lexer-style "single token until
+        // close" keeps the in-flight code in the unstable suffix.
+        if (line.startsWith("```")) {
+            lastBlockStart = offset;
+            offset += lineLengthWithSeparator(i);
+            i++;
+            while (i < lines.length && !lines[i].startsWith("```")) {
+                offset += lineLengthWithSeparator(i);
+                i++;
+            }
+            if (i < lines.length) {
+                offset += lineLengthWithSeparator(i);
+                i++;
+            }
+            continue;
+        }
+        // Table — same shape as parseMarkdownBlocks: consume consecutive `|` lines.
+        if (line.trim().startsWith("|")) {
+            lastBlockStart = offset;
+            while (i < lines.length && lines[i].trim().startsWith("|")) {
+                offset += lineLengthWithSeparator(i);
+                i++;
+            }
+            continue;
+        }
+        // Heading.
+        if (/^#{1,6}\s+/.test(line)) {
+            lastBlockStart = offset;
+            offset += lineLengthWithSeparator(i);
+            i++;
+            continue;
+        }
+        // Blank line — does not start a block; just advances the offset.
+        if (line.trim() === "") {
+            offset += lineLengthWithSeparator(i);
+            i++;
+            continue;
+        }
+        // Paragraph — runs until blank line or start of another block.
+        lastBlockStart = offset;
+        while (i < lines.length &&
+            lines[i].trim() !== "" &&
+            !lines[i].startsWith("```") &&
+            !lines[i].trim().startsWith("|")) {
+            offset += lineLengthWithSeparator(i);
+            i++;
+        }
+    }
+    return lastBlockStart;
+}
 function parseTableRow(line) {
     let body = line.trim();
     if (body.startsWith("|"))
@@ -263,10 +342,8 @@ function InlineText({ text }) {
 function CodeBlock({ lang, lines }) {
     const theme = useTheme();
     // Lazy init: try sync highlight when shiki is already warm so the very first
-    // paint carries highlighted output. This matters because MessageList renders
-    // committed messages inside Ink's <Static>, which only paints each item once
-    // — anything we ship via setState in useEffect lands too late to appear in
-    // scrollback. Fall back to raw lines if shiki hasn't loaded yet.
+    // paint carries highlighted output. Fall back to raw lines if shiki hasn't
+    // loaded yet; useEffect will refresh the mounted transcript item later.
     const [highlighted, setHighlighted] = React.useState(() => {
         const code = lines.join("\n");
         if (!code)
@@ -377,6 +454,36 @@ function HeadingBlock({ level, text }) {
     }
     return (_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { ...props, children: text }) }));
 }
+/**
+ * Streaming-aware wrapper around `MarkdownContent`.
+ *
+ * On every render, splits the incoming `content` into a stable prefix
+ * (everything before the in-flight block) and an unstable suffix (the block
+ * currently being typed). The two halves are rendered as two separate
+ * `MarkdownContent` instances; the stable one uses the same `content` prop
+ * across deltas, so its internal `useMemo([content])` short-circuits and
+ * does NOT re-parse on each token — which is the whole point. Only the
+ * shorter unstable suffix re-parses per delta.
+ *
+ * The boundary advances monotonically (the prefix only grows). A defensive
+ * reset handles the rare case where `content` is replaced wholesale (e.g.,
+ * the user re-enters a turn).
+ */
+export function StreamingMarkdown({ content, maxWidth, }) {
+    const stablePrefixRef = React.useRef("");
+    if (!content.startsWith(stablePrefixRef.current)) {
+        stablePrefixRef.current = "";
+    }
+    const boundary = stablePrefixRef.current.length;
+    const tail = content.substring(boundary);
+    const advance = findLastBlockStart(tail);
+    if (advance > 0) {
+        stablePrefixRef.current = content.substring(0, boundary + advance);
+    }
+    const stablePrefix = stablePrefixRef.current;
+    const unstableSuffix = content.substring(stablePrefix.length);
+    return (_jsxs(Box, { flexDirection: "column", children: [stablePrefix && _jsx(MarkdownContent, { content: stablePrefix, maxWidth: maxWidth }), unstableSuffix && _jsx(MarkdownContent, { content: unstableSuffix, maxWidth: maxWidth })] }));
+}
 export function MarkdownContent({ content, maxWidth, }) {
     const blocks = React.useMemo(() => parseMarkdownBlocks(content), [content]);
     return (_jsx(Box, { flexDirection: "column", children: blocks.map((block, i) => {

package/dist/tui-ink/message-list.d.ts

@@ -21,12 +21,7 @@ interface MessageListProps {
     pendingApproval?: PendingApprovalHint | null;
     /** Animation tick used to refresh in-progress elapsed counters. */
     nowTick?: number;
-    /**
-     * Optional banner rendered as the first item of the scrollback Static
-     * stream. Committed to scrollback once on initial mount so it doesn't
-     * float between older messages and the live tail as the conversation
-     * progresses.
-     */
+    /** Optional banner rendered as the first item in the app-controlled transcript. */
     welcomeBanner?: React.ReactNode;
 }
 export declare function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, pendingApproval, nowTick, welcomeBanner, }: MessageListProps): import("react/jsx-runtime").JSX.Element;

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,23 @@ 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 status = message.content.replace(/^✓\s*/, "").trim() || "Session compacted";
+    const summary = message.compactionSummary?.trim();
+    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.success, bold: true, children: "\u2713 " }), _jsx(Text, { color: theme.accent, bold: true, children: "Compaction" }), _jsxs(Text, { color: theme.muted, children: ["  \u00B7  ", status] })] }), summary && (_jsx(Box, { marginTop: 1, paddingLeft: 3, 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 +424,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 +433,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 +550,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 +559,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 +583,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 +628,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.js

@@ -10,7 +10,6 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
     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 +62,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;
@@ -116,7 +113,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));

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;

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import { useTheme } from "./theme.js";
+import { formatRelativeTime } from "./recent-activity.js";
+export function SessionPicker({ currentCwd, currentSessions, allSessions, onSelect, onCancel }) {
+    const theme = useTheme();
+    const { stdout } = useStdout();
+    const termHeight = stdout?.rows || 24;
+    const maxVisible = Math.max(6, termHeight - 10);
+    const [mode, setMode] = useState("current");
+    const [selectedSessionIdx, setSelectedSessionIdx] = useState(0);
+    const rows = useMemo(() => buildRows(mode, currentCwd, currentSessions, allSessions), [mode, currentCwd, currentSessions, allSessions]);
+    const sessionRowIndices = useMemo(() => rows.map((row, i) => (row.type === "session" ? i : -1)).filter((i) => i >= 0), [rows]);
+    const clampedIdx = sessionRowIndices.length === 0
+        ? 0
+        : Math.min(selectedSessionIdx, sessionRowIndices.length - 1);
+    const selectedRowIndex = sessionRowIndices[clampedIdx] ?? -1;
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.tab) {
+            setMode((m) => (m === "current" ? "all" : "current"));
+            setSelectedSessionIdx(0);
+            return;
+        }
+        if (key.return) {
+            const row = rows[selectedRowIndex];
+            if (row?.type === "session" && row.session)
+                onSelect(row.session.file);
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedSessionIdx((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedSessionIdx((i) => Math.min(Math.max(0, sessionRowIndices.length - 1), i + 1));
+            return;
+        }
+    });
+    // Window the visible rows around the selected session.
+    const start = clampWindowStart(rows, selectedRowIndex, maxVisible);
+    const visible = rows.slice(start, start + maxVisible);
+    const modeLabel = mode === "current" ? "Current dir" : "All directories";
+    const totalSessions = sessionRowIndices.length;
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Resume session" }), _jsxs(Text, { color: theme.muted, children: ["View: ", _jsx(Text, { color: theme.accent, children: modeLabel }), "  ·  ", totalSessions, " session", totalSessions === 1 ? "" : "s"] }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter resume \u00B7 Tab toggle scope \u00B7 Esc start fresh" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [totalSessions === 0 && (_jsx(Text, { color: theme.muted, children: mode === "current"
+                            ? "No previous sessions in this directory."
+                            : "No previous sessions found." })), visible.map((row, i) => {
+                        const actualIndex = start + i;
+                        if (row.type === "header") {
+                            return (_jsx(Box, { marginTop: i === 0 ? 0 : 1, children: _jsx(Text, { color: theme.muted, bold: true, children: row.label }) }, `h-${actualIndex}`));
+                        }
+                        const session = row.session;
+                        const isSelected = actualIndex === selectedRowIndex;
+                        const time = formatRelativeTime(session.mtime).padEnd(9);
+                        return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", time, "  ", truncate(session.firstUserMessage, 60)] }), _jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: theme.muted, dimColor: true, children: ["\u00B7 ", session.messageCount, " msg", session.messageCount === 1 ? "" : "s"] }) })] }, session.file));
+                    })] })] }));
+}
+function buildRows(mode, currentCwd, currentSessions, allSessions) {
+    if (mode === "current") {
+        if (currentSessions.length === 0)
+            return [];
+        return [
+            { type: "header", label: currentCwd },
+            ...currentSessions.map((session) => ({ type: "session", session })),
+        ];
+    }
+    const grouped = new Map();
+    for (const session of allSessions) {
+        const key = session.cwdLabel;
+        const list = grouped.get(key);
+        if (list)
+            list.push(session);
+        else
+            grouped.set(key, [session]);
+    }
+    const sortedGroups = Array.from(grouped.entries()).sort((a, b) => {
+        if (a[0] === currentCwd)
+            return -1;
+        if (b[0] === currentCwd)
+            return 1;
+        const aLatest = a[1][0]?.mtime ?? 0;
+        const bLatest = b[1][0]?.mtime ?? 0;
+        return bLatest - aLatest;
+    });
+    const rows = [];
+    for (const [label, sessions] of sortedGroups) {
+        rows.push({ type: "header", label });
+        for (const session of sessions)
+            rows.push({ type: "session", session });
+    }
+    return rows;
+}
+function clampWindowStart(rows, selectedRowIndex, maxVisible) {
+    if (rows.length <= maxVisible)
+        return 0;
+    if (selectedRowIndex < 0)
+        return 0;
+    const half = Math.floor(maxVisible / 2);
+    let start = Math.max(0, selectedRowIndex - half);
+    if (start + maxVisible > rows.length)
+        start = rows.length - maxVisible;
+    return Math.max(0, start);
+}
+function truncate(text, max) {
+    if (text.length <= max)
+        return text.padEnd(max);
+    return text.slice(0, max - 1) + "…";
+}