@bubblebrain-ai/bubble 0.0.20 → 0.0.21

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>;

package/dist/tui-ink/run.js

@@ -1,15 +1,55 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "ink";
-import chalk from "chalk";
 import { App } from "./app.js";
+import { MOUSE_REPORTING_DISABLE } from "./terminal-mouse.js";
+// DECSET 1007: terminals translate the mouse wheel into Up/Down arrow keys
+// while the alternate screen is active. Mouse reporting stays OFF on purpose
+// so plain drag-select and copy keep their native terminal behavior; the
+// composer classifies wheel-synthesized arrows vs real key presses.
+const ALTERNATE_SCROLL_ENABLE = "\x1b[?1007h";
+const ALTERNATE_SCROLL_DISABLE = "\x1b[?1007l";
 import { warmHighlighter } from "./code-highlight.js";
+/**
+ * Best-effort terminal restore for abnormal exits. DECSET mouse modes are
+ * global terminal state — if the process dies without disabling them, the
+ * user's shell receives \x1b[<35;… garbage on every mouse move. The alt-screen
+ * and cursor writes are defensive duplicates of Ink's own teardown (idempotent
+ * when Ink already ran; load-bearing when it didn't).
+ */
+function restoreTerminal() {
+    if (!process.stdout.isTTY)
+        return;
+    try {
+        process.stdout.write(ALTERNATE_SCROLL_DISABLE + MOUSE_REPORTING_DISABLE + "\x1b[?1049l\x1b[?25h");
+    }
+    catch {
+        // stdout may already be destroyed during shutdown
+    }
+}
 export async function runTui(agent, args, options = {}) {
     // 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();
     let exitSummary;
-    const instance = render(_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, createProvider: options.createProvider, registry: options.registry, skillRegistry: options.skillRegistry, planHandlerRef: options.planHandlerRef, approvalHandlerRef: options.approvalHandlerRef, questionController: options.questionController, bashAllowlist: options.bashAllowlist, settingsManager: options.settingsManager, lspService: options.lspService, mcpManager: options.mcpManager, themeMode: options.themeMode, themeOverrides: options.themeOverrides, detectedTheme: options.detectedTheme, onThemeModeChange: options.onThemeModeChange, flushMemory: options.flushMemory, runMemoryCompaction: options.runMemoryCompaction, runMemorySummary: options.runMemorySummary, runMemoryRefresh: options.runMemoryRefresh, bypassEnabled: options.bypassEnabled, onExit: (summary) => {
+    const onFatalError = (err) => {
+        restoreTerminal();
+        const detail = err instanceof Error ? err.stack ?? err.message : String(err);
+        try {
+            process.stderr.write(`${detail}\n`);
+        }
+        catch {
+            // nothing left to report to
+        }
+        process.exit(1);
+    };
+    const onSigterm = () => {
+        restoreTerminal();
+        process.exit(143);
+    };
+    process.on("uncaughtException", onFatalError);
+    process.on("SIGTERM", onSigterm);
+    const instance = render(_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, createProvider: options.createProvider, registry: options.registry, skillRegistry: options.skillRegistry, planHandlerRef: options.planHandlerRef, approvalHandlerRef: options.approvalHandlerRef, questionController: options.questionController, bashAllowlist: options.bashAllowlist, settingsManager: options.settingsManager, lspService: options.lspService, mcpManager: options.mcpManager, themeMode: options.themeMode, themeOverrides: options.themeOverrides, detectedTheme: options.detectedTheme, onThemeModeChange: options.onThemeModeChange, flushMemory: options.flushMemory, runMemoryCompaction: options.runMemoryCompaction, runMemorySummary: options.runMemorySummary, runMemoryRefresh: options.runMemoryRefresh, bypassEnabled: options.bypassEnabled, updateNotice: options.updateNotice, hookController: options.hookController, onExit: (summary) => {
             // The app already called useApp().exit() inside requestExit, which
             // triggers Ink's own unmount + TTY restore. waitUntilExit() below is
             // the canonical signal that we're done — we deliberately do *not*
@@ -25,34 +65,44 @@ export async function runTui(agent, args, options = {}) {
         exitOnCtrlC: false,
         kittyKeyboard: {
             mode: "enabled",
-            flags: ["disambiguateEscapeCodes"],
+            // reportEventTypes lets the composer tell real arrow-key presses
+            // (kitty-enhanced, carry eventType) apart from the bare arrow
+            // sequences terminals synthesize for wheel scrolling in alternate
+            // screen — see the classifier in input-box.tsx.
+            flags: ["disambiguateEscapeCodes", "reportEventTypes"],
         },
+        // The whole point of the Ink migration: render into the 1049 alternate
+        // screen so streaming repaints never touch the user's shell scrollback.
+        // Ink degrades this to false automatically when stdout is not a TTY.
+        alternateScreen: true,
     });
-    await instance.waitUntilExit();
+    // Enable alternate-scroll after render() so it follows alt-screen entry:
+    // the wheel arrives as Up/Down arrows, while plain drag-select and copy
+    // keep their native terminal behavior (no mouse reporting).
+    if (process.stdout.isTTY) {
+        process.stdout.write(ALTERNATE_SCROLL_ENABLE);
+    }
+    try {
+        await instance.waitUntilExit();
+    }
+    finally {
+        // Reset scroll translation before anything is printed to the primary
+        // screen; Ink has already left the alt screen by the time
+        // waitUntilExit() resolves.
+        if (process.stdout.isTTY) {
+            process.stdout.write(ALTERNATE_SCROLL_DISABLE);
+        }
+        process.off("uncaughtException", onFatalError);
+        process.off("SIGTERM", onSigterm);
+    }
     // zsh's PROMPT_SP prints a reverse-video `%` if the previous program left
     // the cursor mid-line. Ink's interactive teardown (log-update.done) doesn't
     // emit a trailing newline, so mirror Ink's non-interactive branch and align
     // the cursor to column 0 before handing control back to the shell.
     if (process.stdout.isTTY) {
         process.stdout.write("\n");
-        if (exitSummary) {
-            process.stdout.write(formatExitSummary(exitSummary) + "\n");
-        }
     }
-}
-function formatExitSummary(summary) {
-    const label = "Total duration:";
-    return chalk.dim(`${label} ${formatWallMs(summary.wallMs)}`);
-}
-function formatWallMs(ms) {
-    const totalSeconds = Math.max(0, Math.round(ms / 1000));
-    if (totalSeconds < 60)
-        return `${totalSeconds}s`;
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    if (minutes < 60)
-        return `${minutes}m ${seconds}s`;
-    const hours = Math.floor(minutes / 60);
-    const minutesRest = minutes % 60;
-    return `${hours}h ${minutesRest}m ${seconds}s`;
+    // The exit summary is printed by main.ts (single print site, after the alt
+    // screen has been left, so it lands in the real shell scrollback).
+    return exitSummary;
 }

package/dist/tui-ink/terminal-mouse.d.ts

@@ -1,3 +1,4 @@
+export declare const MOUSE_REPORTING_DISABLE = "\u001B[?1006l\u001B[?1000l";
 export type MouseWheelDirection = "up" | "down";
 export declare function stripTerminalMouseSequences(input: string): string;
 export declare function hasTerminalMouseSequence(input: string): boolean;

package/dist/tui-ink/terminal-mouse.js

@@ -1,3 +1,7 @@
+// Bubble does NOT enable mouse reporting — plain drag-select and copy keep
+// their native terminal behavior. This disable sequence is written
+// defensively on teardown in case a previous crash left reporting on.
+export const MOUSE_REPORTING_DISABLE = "\x1b[?1006l\x1b[?1000l";
 const SGR_MOUSE_SEQUENCE_RE = /\x1b?\[?<\d+;\d+;\d+[mM]/g;
 const SGR_MOUSE_WHEEL_RE = /\x1b?\[?<(\d+);\d+;\d+([mM])/g;
 export function stripTerminalMouseSequences(input) {