@bubblebrain-ai/bubble 0.0.20 → 0.0.22

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

@@ -10,6 +10,16 @@ export interface SubmitPayload {
 }
 interface InputBoxProps {
     onSubmit: (payload: SubmitPayload) => void;
+    /**
+     * When set (agent running), Tab queues the composer content for the next
+     * turn instead of its idle-time behavior.
+     */
+    onQueue?: (payload: SubmitPayload) => void;
+    /**
+     * Receives scroll intent when Up/Down arrows are classified as synthetic
+     * wheel events (terminal alternate-scroll) rather than keyboard presses.
+     */
+    onWheelScroll?: (direction: "up" | "down", lines: number) => void;
     onPasteNotice?: (notice: string) => void;
     disabled?: boolean;
     cursorResetEpoch?: number;
@@ -31,6 +41,21 @@ export declare function resolveCursorRowCompensation(input: {
 export declare function isCtrlCInput(input: string, key: {
     ctrl?: boolean;
 }): boolean;
+/**
+ * Split a composer line around the cursor so the cell under it can render as
+ * an inverse-video software cursor. The visible cursor must not depend on the
+ * real terminal cursor: Ink only re-arms its one-shot cursor escape when the
+ * component owning useCursor re-commits, so frames produced by other
+ * components' local state (the waiting spinner, viewport scrolling) hide the
+ * hardware cursor for most of an agent run. Drawing the cell ourselves keeps
+ * the cursor visible on every frame; the real (mostly hidden) cursor is still
+ * positioned for IME anchoring.
+ */
+export declare function splitLineAtCursor(lineText: string, charOffset: number): {
+    before: string;
+    at: string;
+    after: string;
+};
 export declare function shouldSubmitExactSlashSuggestion(input: string, suggestionName?: string): boolean;
 export declare function resolveSlashEnterAction(input: string, suggestions: Array<{
     name: string;
@@ -55,4 +80,4 @@ export declare function insertNewlineAtCursor(text: string, cursor: number): {
     text: string;
     cursor: number;
 };
-export declare function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch, draftText, draftEpoch, onDraftApplied, skillRegistry, terminalColumns, cwd, }: InputBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disabled, cursorResetEpoch, draftText, draftEpoch, onDraftApplied, skillRegistry, terminalColumns, cwd, }: InputBoxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useCursor, useInput, usePaste, useStdout } from "ink";
 import stringWidth from "string-width";
@@ -6,7 +6,7 @@ import { appendFileSync } from "node:fs";
 import { registry as slashRegistry } from "../slash-commands/index.js";
 import { useTheme } from "./theme.js";
 import { filterFileSuggestions, findAtContext, listProjectFiles } from "./file-mentions.js";
-import { ingestClipboardImage, ingestImagePath, isImageFilePath, isScreenshotTempPath, splitPastedPaths, } from "./image-paste.js";
+import { bareImageFilenameFromPaste, ingestClipboardImage, ingestImagePath, isImageFilePath, isScreenshotTempPath, splitPastedPaths, } from "./image-paste.js";
 import { appendHistoryEntry, loadHistorySync, pushHistoryEntry, stepHistory, } from "./input-history.js";
 import { stripTerminalMouseSequences } from "./terminal-mouse.js";
 export { createPastedContentMarker, expandPastedContentMarkers, shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
@@ -37,6 +37,29 @@ export function resolveCursorRowCompensation(input) {
 export function isCtrlCInput(input, key) {
     return input === "\x03" || (key.ctrl === true && input.toLowerCase() === "c");
 }
+/**
+ * Split a composer line around the cursor so the cell under it can render as
+ * an inverse-video software cursor. The visible cursor must not depend on the
+ * real terminal cursor: Ink only re-arms its one-shot cursor escape when the
+ * component owning useCursor re-commits, so frames produced by other
+ * components' local state (the waiting spinner, viewport scrolling) hide the
+ * hardware cursor for most of an agent run. Drawing the cell ourselves keeps
+ * the cursor visible on every frame; the real (mostly hidden) cursor is still
+ * positioned for IME anchoring.
+ */
+export function splitLineAtCursor(lineText, charOffset) {
+    const offset = Math.max(0, Math.min(charOffset, lineText.length));
+    if (offset >= lineText.length) {
+        return { before: lineText, at: " ", after: "" };
+    }
+    const codePoint = lineText.codePointAt(offset);
+    const length = codePoint > 0xffff ? 2 : 1;
+    return {
+        before: lineText.slice(0, offset),
+        at: lineText.slice(offset, offset + length),
+        after: lineText.slice(offset + length),
+    };
+}
 // Break a logical line into segments that each fit within `maxWidth` display
 // columns. Uses string-width so CJK and emoji wrap correctly; empty lines
 // still produce one empty segment so cursors on blank lines render.
@@ -148,7 +171,7 @@ export function insertNewlineAtCursor(text, cursor) {
         cursor: clampedCursor + 1,
     };
 }
-export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, terminalColumns, cwd, }) {
+export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disabled, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, terminalColumns, cwd, }) {
     const theme = useTheme();
     const width = terminalColumns;
     const [text, setText] = useState("");
@@ -285,6 +308,20 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch =
             }
             return;
         }
+        // Copying an image file in Finder pastes only the file's NAME while the
+        // real bits stay on the system clipboard — attach from there. If the
+        // clipboard turns out to hold no image, it was just text: insert it
+        // quietly.
+        const bareName = bareImageFilenameFromPaste(clean);
+        if (bareName && process.platform === "darwin") {
+            void tryClipboardImage()
+                .then((attached) => {
+                if (!attached)
+                    insertTextAtCursor(clean);
+            })
+                .finally(clearPending);
+            return;
+        }
         // Look for image paths inside the paste (drag-and-drop from Finder/
         // Nautilus/Explorer). Multi-selection can arrive newline- or
         // space-separated.
@@ -352,11 +389,12 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch =
         setCursor(before.length + insert.length);
         setSelectedIndex(0);
     };
-    const submitInput = (submittedText) => {
+    const submitInput = (submittedText, target = "submit") => {
         const expandedText = expandPastedContentMarkers(submittedText, pastedContentRefs);
         if (expandedText.trim().length === 0 && attachments.length === 0)
             return;
-        onSubmit({
+        const deliver = target === "queue" && onQueue ? onQueue : onSubmit;
+        deliver({
             text: expandedText,
             displayText: expandedText === submittedText ? undefined : submittedText,
             images: attachments,
@@ -481,6 +519,14 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch =
                 }
             }
         }
+        // While the agent runs, Tab queues the composer content for the next
+        // turn (Enter steers — handled by the app-level submit routing).
+        if (key.tab && !key.shift && onQueue && !showSuggestions) {
+            if (pastePendingRef.current)
+                return;
+            submitInput(text, "queue");
+            return;
+        }
         if (enterIntent === "submit") {
             // A paste is still mid-flight — dropping this Enter avoids submitting
             // an input state that doesn't yet include the paste.
@@ -514,45 +560,23 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch =
             setSelectedIndex(0);
             return;
         }
-        if (key.upArrow) {
-            if (cursorVisualRow > 0) {
-                setCursor(visualToCursor(visualLines, cursorVisualRow - 1, cursorVisualCol));
-                return;
-            }
-            const result = stepHistory({ history, index: historyIndex, draft: historyDraftRef.current }, "up", text);
-            if (result.changed) {
-                setText(result.text);
-                setCursor(result.text.length);
-                setHistoryIndex(result.index);
-                historyDraftRef.current = result.draft;
-                setSelectedIndex(0);
-                setPastedContentRefs([]);
-                nextPastedContentIndexRef.current = 1;
-            }
+        if (key.upArrow || key.downArrow) {
+            classifyVerticalArrow(key.upArrow ? "up" : "down", key.eventType);
             return;
         }
-        if (key.downArrow) {
-            if (cursorVisualRow < visualLines.length - 1) {
-                setCursor(visualToCursor(visualLines, cursorVisualRow + 1, cursorVisualCol));
-                return;
-            }
-            const result = stepHistory({ history, index: historyIndex, draft: historyDraftRef.current }, "down", text);
-            if (result.changed) {
-                setText(result.text);
-                setCursor(result.text.length);
-                setHistoryIndex(result.index);
-                historyDraftRef.current = result.draft;
-                setSelectedIndex(0);
-                setPastedContentRefs([]);
-                nextPastedContentIndexRef.current = 1;
-            }
+        // Ctrl/meta chords are app-level shortcuts (Ctrl+S selection mode,
+        // Ctrl+O trace, Ctrl+R thinking, …) — never type their letter. Raw C0
+        // control bytes (kitty protocol off) are equally not text.
+        if (key.ctrl || key.meta)
             return;
-        }
         if (input) {
+            const printable = input.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, "");
+            if (!printable)
+                return;
             const before = text.slice(0, cursor);
             const after = text.slice(cursor);
-            setText(before + input + after);
-            setCursor(cursor + input.length);
+            setText(before + printable + after);
+            setCursor(cursor + printable.length);
             setSelectedIndex(0);
         }
     });
@@ -620,6 +644,103 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch =
     const lineWidth = Math.max(1, contentWidth - PROMPT.length);
     const visualLines = useMemo(() => computeVisualLines(text, lineWidth), [text, lineWidth]);
     const { row: cursorVisualRow, col: cursorVisualCol } = cursorToVisual(visualLines, cursor);
+    // ---- Wheel-vs-keyboard classification for Up/Down arrows ----
+    //
+    // With mouse reporting off (so native drag-select/copy works), terminals
+    // translate the wheel into Up/Down arrow keys while in the alternate
+    // screen. Those synthetic arrows must scroll the transcript, not move the
+    // composer cursor or browse history. Three signals, in priority order:
+    //   1. kitty keyboard protocol: real key presses carry `eventType`;
+    //      synthetic wheel arrows are bare legacy sequences. Once one enhanced
+    //      arrow is seen, bare arrows are classified as wheel with no delay.
+    //   2. burst heuristic (non-kitty terminals): a wheel notch delivers
+    //      several arrows within a few ms; a keypress delivers one. The first
+    //      arrow is briefly deferred to see whether siblings follow.
+    //   3. wheel session: shortly after a wheel burst, single arrows continue
+    //      to scroll, so slow trackpad scrolling doesn't fall back to history.
+    const performVerticalArrowRef = useRef(() => { });
+    performVerticalArrowRef.current = (direction) => {
+        if (direction === "up") {
+            if (cursorVisualRow > 0) {
+                setCursor(visualToCursor(visualLines, cursorVisualRow - 1, cursorVisualCol));
+                return;
+            }
+        }
+        else {
+            if (cursorVisualRow < visualLines.length - 1) {
+                setCursor(visualToCursor(visualLines, cursorVisualRow + 1, cursorVisualCol));
+                return;
+            }
+        }
+        const result = stepHistory({ history, index: historyIndex, draft: historyDraftRef.current }, direction, text);
+        if (result.changed) {
+            setText(result.text);
+            setCursor(result.text.length);
+            setHistoryIndex(result.index);
+            historyDraftRef.current = result.draft;
+            setSelectedIndex(0);
+            setPastedContentRefs([]);
+            nextPastedContentIndexRef.current = 1;
+        }
+    };
+    const kittyArrowsSeenRef = useRef(false);
+    const arrowBurstRef = useRef(null);
+    const lastWheelFlushRef = useRef(0);
+    const ARROW_BURST_WINDOW_MS = 20;
+    const WHEEL_SESSION_MS = 300;
+    const flushArrowBurst = (burst) => {
+        if (burst.count > 1 && onWheelScroll) {
+            lastWheelFlushRef.current = Date.now();
+            onWheelScroll(burst.direction, burst.count);
+        }
+        else {
+            performVerticalArrowRef.current(burst.direction);
+        }
+    };
+    const classifyVerticalArrow = (direction, eventType) => {
+        if (eventType) {
+            kittyArrowsSeenRef.current = true;
+            performVerticalArrowRef.current(direction);
+            return;
+        }
+        if (!onWheelScroll) {
+            performVerticalArrowRef.current(direction);
+            return;
+        }
+        if (kittyArrowsSeenRef.current) {
+            lastWheelFlushRef.current = Date.now();
+            onWheelScroll(direction, 1);
+            return;
+        }
+        const pending = arrowBurstRef.current;
+        if (pending) {
+            if (pending.direction === direction) {
+                pending.count += 1;
+                return;
+            }
+            clearTimeout(pending.timer);
+            arrowBurstRef.current = null;
+            flushArrowBurst(pending);
+        }
+        if (Date.now() - lastWheelFlushRef.current < WHEEL_SESSION_MS) {
+            lastWheelFlushRef.current = Date.now();
+            onWheelScroll(direction, 1);
+            return;
+        }
+        const burst = {
+            direction,
+            count: 1,
+            timer: setTimeout(() => {
+                arrowBurstRef.current = null;
+                flushArrowBurst(burst);
+            }, ARROW_BURST_WINDOW_MS),
+        };
+        arrowBurstRef.current = burst;
+    };
+    useEffect(() => () => {
+        if (arrowBurstRef.current)
+            clearTimeout(arrowBurstRef.current.timer);
+    }, []);
     const totalLines = Math.max(visualLines.length, 1);
     const visibleLines = Math.min(Math.max(totalLines, MIN_VISIBLE_LINES), MAX_VISIBLE_LINES);
     let scrollOffset = 0;
@@ -694,7 +815,10 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch =
             node = node.parentNode;
         }
         const rootHeight = lastNode?.yogaNode?.getComputedHeight() ?? 0;
-        const viewportRows = stdout.rows ?? process.stdout.rows ?? 24;
+        // `||` on purpose: some ptys (and Bun on a detached tty) report rows as 0,
+        // which `??` would happily accept — and `rootHeight >= 0` then flags every
+        // frame as fullscreen, forcing a bogus +1 row compensation.
+        const viewportRows = stdout.rows || process.stdout.rows || 24;
         const previousOutputHeight = previousOutputHeightRef.current;
         // After a clear/sync frame, Ink's physical terminal cursor remains on the
         // last rendered row even though log-update records an output string with a
@@ -761,12 +885,18 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch =
                         const isFirst = visualIdx === 0;
                         const isCursorLine = visualIdx === cursorVisualRow;
                         const prompt = isFirst ? PROMPT : " ".repeat(PROMPT.length);
-                        const fill = " ".repeat(Math.max(0, lineWidth - stringWidth(lineText)));
+                        const cursorSegments = isCursorLine && !disabled
+                            ? splitLineAtCursor(lineText, cursor - (visualLines[cursorVisualRow]?.absStart ?? 0))
+                            : null;
+                        const renderedLine = cursorSegments
+                            ? cursorSegments.before + cursorSegments.at + cursorSegments.after
+                            : lineText;
+                        const fill = " ".repeat(Math.max(0, lineWidth - stringWidth(renderedLine)));
                         return (_jsxs(Box, { height: 1, overflow: "hidden", ref: isCursorLine
                                 ? (el) => {
                                     cursorLineRef.current = el;
                                 }
-                                : undefined, children: [_jsx(Text, { backgroundColor: inputBg, color: isFirst ? theme.accent : theme.inputText, children: prompt }), _jsx(Text, { backgroundColor: inputBg, color: theme.inputText, children: lineText }), _jsx(Text, { backgroundColor: inputBg, children: fill })] }, visualIdx));
+                                : undefined, children: [_jsx(Text, { backgroundColor: inputBg, color: isFirst ? theme.accent : theme.inputText, children: prompt }), cursorSegments ? (_jsxs(_Fragment, { children: [cursorSegments.before && (_jsx(Text, { backgroundColor: inputBg, color: theme.inputText, children: cursorSegments.before })), _jsx(Text, { backgroundColor: theme.inputText, color: inputBg, children: cursorSegments.at }), cursorSegments.after && (_jsx(Text, { backgroundColor: inputBg, color: theme.inputText, children: cursorSegments.after }))] })) : (_jsx(Text, { backgroundColor: inputBg, color: theme.inputText, children: lineText })), _jsx(Text, { backgroundColor: inputBg, children: fill })] }, visualIdx));
                     }), hasMoreBelow && (_jsx(Text, { backgroundColor: inputBg, color: theme.muted, dimColor: true, children: filledLine(` ↓ ${moreBelow} more`) }))] }), showSuggestions && mode === "slash" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 4, children: [slashSuggestions
                         .slice(suggestionOffset, suggestionOffset + MAX_VISIBLE_SUGGESTIONS)
                         .map((cmd, visibleIndex) => {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { DisplayMessage, DisplayMessagePart, DisplayToolCall } from "./display-history.js";
+import { type DisplayMessage, type DisplayMessagePart, type DisplayToolCall } from "./display-history.js";
 /**
  * Hint surfaced when the user can interrupt the currently-running pending tool
  * via the approval dialog. The match is loose (by request type → tool name),

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

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
-import { Box, Static, Text } from "ink";
+import { Box, Text } from "ink";
 import { useTheme } from "./theme.js";
 import { highlightCode, inferLang } from "./code-highlight.js";
 import { MarkdownContent, StreamingMarkdown } from "./markdown.js";
-import { buildTraceGroups, formatTracePath, traceGroupLabel } from "./trace-groups.js";
+import { userInputStatusBadgeLabel, } from "./display-history.js";
+import { buildTraceGroups, executeCommandBlock, formatTracePath, shouldInlineExecuteCommand, traceGroupLabel, } from "./trace-groups.js";
 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";
+const EXECUTE_COMMAND_BLOCK_MAX_LINES = 4;
 export function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, pendingApproval, nowTick, welcomeBanner, }) {
     const hasStreaming = !!(streamingContent ||
         streamingReasoning ||
@@ -27,17 +29,22 @@ export function MessageList({ messages, streamingContent, streamingReasoning, st
             showExpandHint: !hasStreaming && i === lastMessageIndex,
         });
     }
-    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);
-                    }
-                    return (_jsx(MessageItem, { message: item.message, terminalColumns: terminalColumns, verboseTrace: verboseTrace, showExpandHint: item.showExpandHint, nowTick: item.showExpandHint ? nowTick : undefined }, item.key));
-                } }), hasStreaming && (_jsx(StreamingMessage, { content: streamingContent, reasoning: streamingReasoning, tools: streamingTools, parts: streamingParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, nowTick: nowTick }))] }));
-}
-function MessageItem({ message, terminalColumns, verboseTrace, showExpandHint, nowTick, }) {
+    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 }))] }));
+}
+// 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 theme = useTheme();
     if (message.role === "user") {
-        return _jsx(UserMessageBlock, { content: message.content, terminalColumns: terminalColumns });
+        return (_jsx(UserMessageBlock, { content: message.content, terminalColumns: terminalColumns, inputStatus: message.inputStatus }));
     }
     if (message.role === "error") {
         return (_jsx(Box, { marginBottom: 1, flexDirection: "column", children: _jsxs(Text, { color: theme.error, children: ["Error: ", message.content] }) }));
@@ -45,6 +52,9 @@ function MessageItem({ message, terminalColumns, verboseTrace, showExpandHint, n
     if (message.syntheticKind === "ui_compact_summary") {
         return _jsx(CompactionSummaryBlock, { message: message });
     }
+    if (message.syntheticKind === "ui_interrupt") {
+        return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.error, children: "\u23F9 " }), _jsx(Text, { color: theme.muted, dimColor: true, children: message.content || "Interrupted by user" })] }));
+    }
     const visibleReasoning = sanitizeInternalReminderBlocks(message.reasoning ?? "").trim();
     const hasVisibleAssistantContent = !!message.content ||
         (message.toolCalls?.length ?? 0) > 0 ||
@@ -53,7 +63,7 @@ function MessageItem({ message, terminalColumns, verboseTrace, showExpandHint, n
     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 }))] }));
-}
+});
 function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, verboseTrace, pendingApproval, nowTick, }) {
     const deferredContent = React.useDeferredValue(content);
     const deferredReasoning = React.useDeferredValue(reasoning);
@@ -63,14 +73,12 @@ function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, v
         ? 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 && (
-            // marginTop intentionally 0: this Box only mounts on the first non-empty
-            // streaming frame, so a marginTop=1 here would visibly insert a blank
-            // line under the user message right at that moment (the "spinner sits
-            // close, then content appears with a sudden gap, then spinner slides
-            // down" effect users perceive as flicker on the DOM xterm renderer).
-            // marginBottom=1 stays so streamed text doesn't collide with the
-            // WaitingIndicator rendered below.
-            _jsx(Box, { marginTop: 0, marginBottom: 1, flexDirection: "column", children: _jsx(MessageParts, { parts: visibleParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, showExpandHint: true, nowTick: nowTick, showActivity: true, streaming: true }) }))] }));
+            // 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 }) }))] }));
 }
 function MessageParts({ parts, terminalColumns, verboseTrace, pendingApproval, showExpandHint, nowTick, showActivity = false, streaming = false, }) {
     const lastToolsPartIndex = findLastToolsPartIndex(parts);
@@ -157,14 +165,22 @@ function TraceGroupBlock({ group, terminalColumns, pendingApproval, compactTop,
     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;
-    // 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))
+    // A model-provided bash description owns the header slot; the command then
+    // always renders as a block below. Without one, single-line commands that
+    // fit stay inline; anything longer becomes a wrapped block preserving the
+    // command's own line structure — commands are never clipped mid-line.
+    const showDescription = group.kind === "execute" && !!group.description;
+    const inlineCommand = !showDescription && group.command
+        ? (group.kind === "execute"
+            ? (shouldInlineExecuteCommand(group, commandWidth) ? group.command : undefined)
+            : (visualWidth(group.command) <= commandWidth ? group.command : undefined))
+        : undefined;
+    const commandBlock = group.command && !inlineCommand
+        ? (group.kind === "execute"
+            ? executeCommandBlock(group, EXECUTE_COMMAND_BLOCK_MAX_LINES)
+            : { lines: [group.command], omitted: 0 })
         : 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"] }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: titleColor, children: group.title }), showDescription ? (_jsxs(Text, { color: theme.traceDetail, children: [" ", truncateVisual(group.description, commandWidth)] })) : inlineCommand ? (_jsxs(Text, { color: theme.traceCommand, children: [" ", inlineCommand] })) : !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] })] }), commandBlock && commandBlock.lines.length > 0 && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [commandBlock.lines.flatMap((line, idx) => wrapByVisualWidth(line || " ", Math.max(10, detailWidth - 2)).map((seg, segIdx) => (_jsx(Text, { color: theme.traceCommand, children: seg }, `cmd-${idx}-${segIdx}`)))), commandBlock.omitted > 0 && (_jsxs(Text, { color: theme.traceDetail, children: ["\u2026 ", commandBlock.omitted, " more line", commandBlock.omitted === 1 ? "" : "s"] }))] })), 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();
@@ -220,8 +236,9 @@ 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 }) {
+function UserMessageBlock({ content, terminalColumns, inputStatus, }) {
     const theme = useTheme();
+    const badge = userInputStatusBadgeLabel(inputStatus);
     // 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;
@@ -230,7 +247,7 @@ function UserMessageBlock({ content, terminalColumns }) {
     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, { 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", 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)))] }));
 }
 const TOOL_DISPLAY_NAMES = {
     read: "Read",

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

@@ -4,13 +4,14 @@ import type { SessionManager } from "../session.js";
 import type { Provider } from "../types.js";
 import type { ProviderRegistry } from "../provider-registry.js";
 import type { SkillRegistry } from "../skills/registry.js";
-import { type ApprovalHandlerRef, type PlanHandlerRef } from "./app.js";
+import { type ApprovalHandlerRef, type ExitSummary, type PlanHandlerRef } from "./app.js";
 import type { BashAllowlist } from "../approval/session-cache.js";
 import type { SettingsManager } from "../permissions/settings.js";
 import type { McpManager } from "../mcp/manager.js";
 import type { LspService } from "../lsp/index.js";
 import type { QuestionController } from "../question/index.js";
 import type { MemoryScope } from "../memory/index.js";
+import type { ExternalHookController } from "../hooks/controller.js";
 import type { ResolvedTheme, ThemeMode } from "./theme.js";
 export interface RunTuiOptions {
     sessionManager?: SessionManager;
@@ -33,5 +34,9 @@ export interface RunTuiOptions {
     runMemorySummary?: (scope?: MemoryScope) => Promise<string>;
     runMemoryRefresh?: (scope?: MemoryScope) => Promise<string>;
     bypassEnabled?: boolean;
+    /** One-line "update available" notice rendered under the welcome banner version. */
+    updateNotice?: string;
+    /** External lifecycle hooks, threaded into slash-command execution. */
+    hookController?: ExternalHookController;
 }
-export declare function runTui(agent: Agent, args: CliArgs, options?: RunTuiOptions): Promise<void>;
+export declare function runTui(agent: Agent, args: CliArgs, options?: RunTuiOptions): Promise<ExitSummary | undefined>;