@bubblebrain-ai/bubble 0.0.23 → 0.0.25

package/dist/tui-ink/input-history.d.ts

@@ -1,16 +1 @@
-export declare function defaultHistoryFilePath(): string;
-export declare function loadHistorySync(filePath?: string): string[];
-export declare function appendHistoryEntry(entry: string, filePath?: string): void;
-export interface HistoryNavState {
-    history: string[];
-    index: number | null;
-    draft: string;
-}
-export interface HistoryNavResult {
-    text: string;
-    index: number | null;
-    draft: string;
-    changed: boolean;
-}
-export declare function stepHistory(state: HistoryNavState, direction: "up" | "down", currentText: string): HistoryNavResult;
-export declare function pushHistoryEntry(history: string[], entry: string): string[];
+export * from "../tui/input-history.js";

package/dist/tui-ink/input-history.js

@@ -1,79 +1 @@
-import { appendFileSync, existsSync, mkdirSync, readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { getBubbleHome } from "../bubble-home.js";
-const MAX_HISTORY_ENTRIES = 1000;
-export function defaultHistoryFilePath() {
-    return join(getBubbleHome(), "input-history.jsonl");
-}
-// JSONL on disk: each line is a JSON-encoded string. JSON encoding handles
-// embedded newlines and quotes so multi-line composer entries round-trip safely.
-export function loadHistorySync(filePath = defaultHistoryFilePath()) {
-    try {
-        if (!existsSync(filePath))
-            return [];
-        const raw = readFileSync(filePath, "utf8");
-        const out = [];
-        for (const line of raw.split("\n")) {
-            if (!line)
-                continue;
-            try {
-                const parsed = JSON.parse(line);
-                if (typeof parsed === "string" && parsed.length > 0)
-                    out.push(parsed);
-            }
-            catch {
-                // Malformed line - skip rather than fail the whole load.
-            }
-        }
-        return out.length > MAX_HISTORY_ENTRIES ? out.slice(-MAX_HISTORY_ENTRIES) : out;
-    }
-    catch {
-        return [];
-    }
-}
-export function appendHistoryEntry(entry, filePath = defaultHistoryFilePath()) {
-    if (!entry || entry.trim().length === 0)
-        return;
-    try {
-        mkdirSync(dirname(filePath), { recursive: true });
-        appendFileSync(filePath, JSON.stringify(entry) + "\n", "utf8");
-    }
-    catch {
-        // Persistence is best-effort; never crash the composer over disk IO.
-    }
-}
-// Pure transition for up/down navigation. `index === null` means the user is
-// editing a fresh draft; otherwise it points at history[index]. When stepping
-// from the draft into history we snapshot the current text so down past the
-// newest entry can restore it.
-export function stepHistory(state, direction, currentText) {
-    const { history, index, draft } = state;
-    const noChange = { text: currentText, index, draft, changed: false };
-    if (direction === "up") {
-        if (history.length === 0)
-            return noChange;
-        if (index === null) {
-            const newIdx = history.length - 1;
-            return { text: history[newIdx], index: newIdx, draft: currentText, changed: true };
-        }
-        if (index > 0) {
-            return { text: history[index - 1], index: index - 1, draft, changed: true };
-        }
-        return noChange;
-    }
-    if (index === null)
-        return noChange;
-    if (index < history.length - 1) {
-        return { text: history[index + 1], index: index + 1, draft, changed: true };
-    }
-    return { text: draft, index: null, draft: "", changed: true };
-}
-// Push to in-memory history with last-entry dedupe so repeated identical
-// submissions don't spam the stack.
-export function pushHistoryEntry(history, entry) {
-    if (!entry || entry.trim().length === 0)
-        return history;
-    if (history.length > 0 && history[history.length - 1] === entry)
-        return history;
-    return [...history, entry];
-}
+export * from "../tui/input-history.js";

package/dist/tui-ink/input-queue.d.ts

@@ -0,0 +1,12 @@
+import type { SubmitPayload } from "./input-box.js";
+export interface QueuedInput {
+    payload: SubmitPayload;
+    displayKey?: string;
+    sessionFile?: string;
+}
+export interface PendingSteerMeta {
+    displayKey: string;
+    sessionFile?: string;
+}
+export declare function isQueuedInputForCurrentSession(input: QueuedInput, currentSessionFile?: string): boolean;
+export declare function queuedAndPendingDisplayKeys(queuedInputs: QueuedInput[], pendingSteers: Iterable<PendingSteerMeta>): Set<string>;

package/dist/tui-ink/input-queue.js

@@ -0,0 +1,17 @@
+export function isQueuedInputForCurrentSession(input, currentSessionFile) {
+    if (!input.sessionFile || !currentSessionFile)
+        return true;
+    return input.sessionFile === currentSessionFile;
+}
+export function queuedAndPendingDisplayKeys(queuedInputs, pendingSteers) {
+    const keys = new Set();
+    for (const input of queuedInputs) {
+        if (input.displayKey)
+            keys.add(input.displayKey);
+    }
+    for (const steer of pendingSteers) {
+        if (steer.displayKey)
+            keys.add(steer.displayKey);
+    }
+    return keys;
+}

package/dist/tui-ink/key-events.d.ts

@@ -0,0 +1,9 @@
+export interface InkKeyEvent {
+    eventType?: string;
+}
+/**
+ * Kitty keyboard protocol can report key press/repeat/release separately.
+ * Release events still carry the printable text, so handling them like normal
+ * input inserts every typed character twice.
+ */
+export declare function isKeyReleaseEvent(key: InkKeyEvent): boolean;

package/dist/tui-ink/key-events.js

@@ -0,0 +1,8 @@
+/**
+ * Kitty keyboard protocol can report key press/repeat/release separately.
+ * Release events still carry the printable text, so handling them like normal
+ * input inserts every typed character twice.
+ */
+export function isKeyReleaseEvent(key) {
+    return key.eventType === "release";
+}

package/dist/tui-ink/markdown.js

@@ -377,7 +377,7 @@ function TableBlock({ headers, rows, maxWidth, }) {
     const { columns: termWidth } = useTerminalSize();
     const colCount = headers.length;
     // Reserve a buffer so the table fits even when wrapped inside an indented
-    // box (e.g. the timeline gutter contributes marginLeft + "⛬  " = 5 cells).
+    // box (e.g. the timeline gutter contributes marginLeft + "●  " = 5 cells).
     const budget = Math.max(20, (maxWidth ?? termWidth) - 8);
     const maxWidths = headers.map((h, i) => {
         let max = visualWidth(inlinePlainText(h));

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

@@ -17,6 +17,8 @@ interface MessageListProps {
     streamingTools: DisplayToolCall[];
     streamingParts: DisplayMessagePart[];
     terminalColumns: number;
+    showThinking?: boolean;
+    expandedToolOutput?: boolean;
     verboseTrace: boolean;
     pendingApproval?: PendingApprovalHint | null;
     /** Animation tick used to refresh in-progress elapsed counters. */
@@ -24,5 +26,5 @@ interface MessageListProps {
     /** 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;
+export declare function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, showThinking, expandedToolOutput, verboseTrace, pendingApproval, nowTick, welcomeBanner, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,42 +9,48 @@ import { buildTraceGroups, executeCommandBlock, formatTracePath, shouldInlineExe
 import { EDIT_COLLAPSED_DIFF_LINES, formatEditSuccessSummary, getEditDiffDetails } from "./edit-diff.js";
 import { formatSubagentRoute } from "../agent/subagent-route-format.js";
 import { sanitizeInternalReminderBlocks } from "../agent/internal-reminder-sanitizer.js";
+import { splitImageDisplayContent } from "../tui/image-display.js";
 const EXECUTE_COMMAND_BLOCK_MAX_LINES = 4;
-export function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, pendingApproval, nowTick, welcomeBanner, }) {
+export function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, showThinking = false, expandedToolOutput = false, verboseTrace, pendingApproval, nowTick, welcomeBanner, }) {
+    const theme = useTheme();
     const hasStreaming = !!(streamingContent ||
         streamingReasoning ||
         streamingTools.length > 0 ||
         streamingParts.length > 0);
+    const regularMessages = messages.filter((message) => !message.inputStatus);
+    const pendingSteerMessages = messages.filter((message) => message.inputStatus === "pending_steer");
+    const queuedInputMessages = messages.filter((message) => message.inputStatus === "queued");
     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];
+    const lastMessageIndex = regularMessages.length - 1;
+    for (let i = 0; i < regularMessages.length; i++) {
+        const msg = regularMessages[i];
         staticItems.push({
             kind: "message",
             key: msg.key ?? `message-${i}`,
             message: msg,
             showExpandHint: !hasStreaming && i === lastMessageIndex,
+            separateFromPrevious: msg.role === "user" && regularMessages[i - 1]?.role === "user",
         });
     }
     return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [staticItems.map((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 }))] }));
+                return (_jsx(MessageItem, { message: item.message, terminalColumns: terminalColumns, showThinking: showThinking, expandedToolOutput: expandedToolOutput, verboseTrace: verboseTrace, showExpandHint: item.showExpandHint, separateFromPrevious: item.separateFromPrevious, nowTick: item.showExpandHint ? nowTick : undefined }, item.key));
+            }), hasStreaming && (_jsx(StreamingMessage, { content: streamingContent, reasoning: streamingReasoning, tools: streamingTools, parts: streamingParts, terminalColumns: terminalColumns, showThinking: showThinking, expandedToolOutput: expandedToolOutput, verboseTrace: verboseTrace, pendingApproval: pendingApproval, nowTick: nowTick })), pendingSteerMessages.length > 0 && (_jsx(PendingInputMessagesBlock, { messages: pendingSteerMessages, terminalColumns: terminalColumns, title: "Messages to steer at next model call", hint: "applies before the next provider request", bulletColor: theme.warning })), queuedInputMessages.length > 0 && (_jsx(PendingInputMessagesBlock, { messages: queuedInputMessages, terminalColumns: terminalColumns, title: "Messages queued for next turn", hint: "runs after the current answer", bulletColor: theme.muted }))] }));
 }
 // Memoized: with no <Static> region, every transcript row re-renders on each
 // state change unless its props are referentially stable. Message objects are
 // append-only (compaction reuses already-compacted instances), keys are
 // stable, and nowTick is only threaded to the last row, so memo hits for all
 // settled history rows.
-const MessageItem = React.memo(function MessageItem({ message, terminalColumns, verboseTrace, showExpandHint, nowTick, }) {
+const MessageItem = React.memo(function MessageItem({ message, terminalColumns, showThinking, expandedToolOutput, verboseTrace, showExpandHint, separateFromPrevious, nowTick, }) {
     const theme = useTheme();
     if (message.role === "user") {
-        return (_jsx(UserMessageBlock, { content: message.content, terminalColumns: terminalColumns, inputStatus: message.inputStatus }));
+        return (_jsx(UserMessageBlock, { content: message.content, terminalColumns: terminalColumns, inputStatus: message.inputStatus, separateFromPrevious: separateFromPrevious }));
     }
     if (message.role === "error") {
         return (_jsx(Box, { marginBottom: 1, flexDirection: "column", children: _jsxs(Text, { color: theme.error, children: ["Error: ", message.content] }) }));
@@ -59,12 +65,12 @@ const MessageItem = React.memo(function MessageItem({ message, terminalColumns,
     const hasVisibleAssistantContent = !!message.content ||
         (message.toolCalls?.length ?? 0) > 0 ||
         (message.parts?.length ?? 0) > 0 ||
-        (!!visibleReasoning && verboseTrace);
+        (!!visibleReasoning && (showThinking || verboseTrace));
     if (!hasVisibleAssistantContent)
         return null;
-    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [visibleReasoning && verboseTrace && _jsx(ReasoningTraceBlock, { reasoning: visibleReasoning }), 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 }))] }));
+    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [visibleReasoning && (showThinking || verboseTrace) && _jsx(ReasoningTraceBlock, { reasoning: visibleReasoning }), message.parts && message.parts.length > 0 ? (_jsx(MessageParts, { parts: message.parts, terminalColumns: terminalColumns, expandedToolOutput: expandedToolOutput, verboseTrace: verboseTrace, pendingApproval: undefined, showExpandHint: showExpandHint, nowTick: nowTick })) : (_jsxs(_Fragment, { children: [message.toolCalls && (_jsx(ToolsPart, { toolCalls: message.toolCalls, terminalColumns: terminalColumns, expandedToolOutput: expandedToolOutput, 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, }) {
+function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, showThinking, expandedToolOutput, verboseTrace, pendingApproval, nowTick, }) {
     const deferredContent = React.useDeferredValue(content);
     const deferredReasoning = React.useDeferredValue(reasoning);
     const deferredParts = React.useDeferredValue(parts);
@@ -72,22 +78,22 @@ function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, v
     const visibleParts = deferredParts.length > 0
         ? deferredParts
         : fallbackStreamingParts(deferredContent, tools);
-    return (_jsxs(Box, { flexDirection: "column", children: [visibleReasoning && verboseTrace && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(ReasoningTraceBlock, { reasoning: visibleReasoning }) })), visibleParts.length > 0 && (
+    return (_jsxs(Box, { flexDirection: "column", children: [visibleReasoning && (showThinking || verboseTrace) && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(ReasoningTraceBlock, { reasoning: visibleReasoning }) })), visibleParts.length > 0 && (
             // marginTop=1 matches the committed MessageItem layout exactly, so the
             // gap under the user message is identical while streaming and after the
             // turn commits — no spacing jump at finalize time. (The old marginTop=0
             // was a flicker mitigation for the main-screen <Static> renderer; the
             // alt-screen viewport repaints frames atomically, so it's obsolete.)
-            _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 }) }))] }));
+            _jsx(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: _jsx(MessageParts, { parts: visibleParts, terminalColumns: terminalColumns, expandedToolOutput: expandedToolOutput, verboseTrace: verboseTrace, pendingApproval: pendingApproval, showExpandHint: true, nowTick: nowTick, showActivity: true, streaming: true }) }))] }));
 }
-function MessageParts({ parts, terminalColumns, verboseTrace, pendingApproval, showExpandHint, nowTick, showActivity = false, streaming = false, }) {
+function MessageParts({ parts, terminalColumns, expandedToolOutput, 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, 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}`));
+            return (_jsx(ToolsPart, { toolCalls: part.toolCalls, terminalColumns: terminalColumns, expandedToolOutput: expandedToolOutput, verboseTrace: verboseTrace, pendingApproval: pendingApproval, showExpandHint: showExpandHint && idx === lastToolsPartIndex, compactTop: idx === 0, nowTick: nowTick, showActivity: showActivity && idx === lastToolsPartIndex }, `tools-${idx}`));
         }) }));
 }
 function findLastTextPartIndex(parts) {
@@ -101,23 +107,24 @@ function TimelineText({ content, compactTop, terminalColumns, streaming = false,
     const theme = useTheme();
     if (!content.trim())
         return null;
-    // marginLeft (2) + "⛬  " glyph (3 visual cells) = 5 cells consumed by the
+    // marginLeft (2) + "●  " marker (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;
     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 })) })] }));
+    return (_jsxs(Box, { marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsx(Text, { color: theme.agent, children: "\u25CF  " }), _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, }) {
+function ToolsPart({ toolCalls, terminalColumns, expandedToolOutput, verboseTrace, pendingApproval, showExpandHint, compactTop = false, nowTick, showActivity = false, }) {
     if (toolCalls.length === 0)
         return null;
-    if (!verboseTrace) {
+    const expandTools = verboseTrace || expandedToolOutput;
+    if (!expandTools) {
         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 = isToolPending(tc) && !!pendingApproval && approvalMatchesTool(pendingApproval, tc);
-            return (_jsx(ToolCallDisplay, { toolCall: tc, isStreaming: isToolPending(tc), verbose: verboseTrace, terminalColumns: terminalColumns, showExpandHint: showExpandHint && idx === lastIdx, waitingApproval: isWaitingApproval, compactTop: idx === 0 && compactTop, nowTick: nowTick }, tc.id));
+            return (_jsx(ToolCallDisplay, { toolCall: tc, isStreaming: isToolPending(tc), verbose: expandTools, terminalColumns: terminalColumns, showExpandHint: showExpandHint && idx === lastIdx, waitingApproval: isWaitingApproval, compactTop: idx === 0 && compactTop, nowTick: nowTick }, tc.id));
         }) }));
 }
 function fallbackStreamingParts(content, tools) {
@@ -236,7 +243,7 @@ function CompactionSummaryBlock({ message }) {
     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, inputStatus, }) {
+function UserMessageBlock({ content, terminalColumns, inputStatus, separateFromPrevious = false, }) {
     const theme = useTheme();
     const badge = userInputStatusBadgeLabel(inputStatus);
     // Rail and its right gutter must share the bubble background; otherwise the
@@ -244,10 +251,21 @@ function UserMessageBlock({ content, terminalColumns, inputStatus, }) {
     const railWidth = 2;
     const horizontalRoom = Math.max(20, terminalColumns - 2);
     const bubbleTextWidth = Math.max(1, horizontalRoom - railWidth - 2);
-    const wrappedLines = content
-        .split("\n")
+    const { bodyLines, referenceLines } = splitImageDisplayContent(content);
+    const wrappedLines = bodyLines
         .flatMap((line) => wrapByVisualWidth(line, bubbleTextWidth));
-    return (_jsxs(Box, { flexDirection: "column", children: [badge && (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: inputStatus === "pending_steer" ? theme.warning : theme.muted, children: ` ${badge} ` }), _jsx(Text, { color: theme.dim, children: inputStatus === "pending_steer" ? "applies at the next model call" : "runs after this turn" })] })), 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)))] }));
+    return (_jsxs(Box, { flexDirection: "column", marginTop: separateFromPrevious ? 1 : 0, children: [badge && (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: inputStatus === "pending_steer" ? theme.warning : theme.muted, children: ` ${badge} ` }), _jsx(Text, { color: theme.dim, children: inputStatus === "pending_steer" ? "applies at the next model call" : "runs after this turn" })] })), 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))), referenceLines.map((line, index) => (_jsx(Box, { children: _jsx(Text, { color: theme.muted, children: `  ${line}` }) }, `attachment-${index}`)))] }));
+}
+function PendingInputMessagesBlock({ messages, terminalColumns, title, hint, bulletColor, }) {
+    const theme = useTheme();
+    const contentWidth = Math.max(20, terminalColumns - 5);
+    return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: bulletColor, children: "\u2022 " }), _jsxs(Text, { bold: true, color: theme.inputText, children: [title, " "] }), _jsxs(Text, { color: theme.dim, children: ["(", hint, ")"] })] }), messages.flatMap((message, messageIndex) => {
+                const { bodyLines, referenceLines } = splitImageDisplayContent(message.content || " ");
+                const wrappedBody = bodyLines.flatMap((line) => wrapByVisualWidth(line || " ", contentWidth));
+                const bodyRows = wrappedBody.map((line, lineIndex) => (_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { color: theme.dim, children: lineIndex === 0 ? "↳ " : "  " }), _jsx(Text, { color: theme.inputText, children: line })] }, `body-${message.key ?? messageIndex}-${lineIndex}`)));
+                const attachmentRows = referenceLines.map((line, lineIndex) => (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: theme.dim, children: ["  ", line] }) }, `attachment-${message.key ?? messageIndex}-${lineIndex}`)));
+                return [...bodyRows, ...attachmentRows];
+            })] }));
 }
 const TOOL_DISPLAY_NAMES = {
     read: "Read",

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

@@ -1,10 +1,12 @@
 import { ProviderRegistry } from "../provider-registry.js";
+import type { ThinkingLevel } from "../types.js";
 export { padVisual, truncateVisual } from "../text-display.js";
 export interface ModelPickerOption {
     id: string;
     label: string;
     group: string;
     providerBadge: string;
+    reasoningLevels: ThinkingLevel[];
 }
 export type PickerKeyAction = "up" | "down" | "enter" | "escape" | "backspace" | "delete";
 export declare function resolvePickerKeyAction(input: string, key: {
@@ -23,14 +25,34 @@ export declare function formatSkillPickerRow(skill: {
     selected: boolean;
     width: number;
 }): string;
+export declare const MODEL_PICKER_MAX_BODY_ROWS = 10;
+export declare const MODEL_PICKER_CHROME_ROWS = 13;
+export declare function modelPickerBodyRows(termHeight: number): number;
+export declare function clampPickerIndex(index: number, length: number): number;
+export declare function pickerWindowStart(selectedIndex: number, length: number, visibleRows: number): number;
+export declare function padPickerRows(rows: string[], bodyRows: number, width: number): string[];
+export declare function formatReasoningLevelsLabel(levels: readonly ThinkingLevel[]): string;
+export declare function formatModelPickerRow(option: Pick<ModelPickerOption, "label" | "providerBadge" | "reasoningLevels">, options: {
+    selected: boolean;
+    current: boolean;
+    width: number;
+}): string;
+export declare function formatEffortPickerRow(level: ThinkingLevel, options: {
+    selected: boolean;
+    width: number;
+}): string;
+export declare function formatNoModelResultsRow(query: string, width: number): string;
+export declare function preferredEffortIndex(option: Pick<ModelPickerOption, "reasoningLevels">, currentThinkingLevel: ThinkingLevel): number;
+export declare function shouldOpenEffortPicker(option: Pick<ModelPickerOption, "reasoningLevels">): boolean;
 export interface ModelPickerProps {
     registry: ProviderRegistry;
     current: string;
+    currentThinkingLevel: ThinkingLevel;
     recent: string[];
-    onSelect: (model: string) => void;
+    onSelect: (model: string, thinkingLevel: ThinkingLevel) => void;
     onCancel: () => void;
 }
-export declare function ModelPicker({ registry, current, recent, onSelect, onCancel }: ModelPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModelPicker({ registry, current, currentThinkingLevel, 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<{