@bubblebrain-ai/bubble 0.0.20 → 0.0.21

package/dist/tui-ink/app.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useApp, useInput } from "ink";
-import { AgentAbortError } from "../agent.js";
+import { AgentAbortError, INTERRUPTED_ASSISTANT_CONTENT } from "../agent.js";
 import { isHiddenToolMetadata } from "../agent/discovery-barrier.js";
 import { registry as slashRegistry } from "../slash-commands/index.js";
 import { UserConfig, maskKey } from "../config.js";
 import { createPastedContentMarker, InputBox, isCtrlCInput, shouldCollapsePastedContent, } from "./input-box.js";
 import { MessageList } from "./message-list.js";
-import { appendTextPart, appendToolPart, compactDisplayMessages, contentFromParts, latestCompactionSummary, nextDisplayMessageKey, snapshotDisplayParts, toolCallsFromParts, } from "./display-history.js";
+import { appendTextPart, appendToolPart, compactDisplayMessages, contentFromParts, latestCompactionSummary, nextDisplayMessageKey, setUserInputStatus, snapshotDisplayParts, stripInterruptedAssistantMarker, toolCallsFromParts, } from "./display-history.js";
+import { AgentRunInputQueue } from "../agent/input-controller.js";
 import { paletteFor, ThemeProvider, useTheme } from "./theme.js";
 import { ModelPicker, ProviderPicker, KeyPicker, SkillPicker } from "./model-picker.js";
 import { FeishuSetupPicker } from "./feishu-setup-picker.js";
@@ -28,9 +29,8 @@ import { QuestionDialog } from "./question-dialog.js";
 import { FeedbackDialog } from "./feedback-dialog.js";
 import { collectFeedback } from "../feedback/collect.js";
 import { hasTerminalMouseSequence } from "./terminal-mouse.js";
+import { TranscriptViewport } from "./transcript-viewport.js";
 import os from "node:os";
-import { existsSync } from "node:fs";
-import { join } from "node:path";
 function buildTips(agent, registry) {
     const tips = [];
     const hasProvider = registry.getEnabled().length > 0;
@@ -95,13 +95,31 @@ function reconstructDisplayMessages(agentMessages) {
                     });
                 }
             }
-            result.push({
-                key: nextDisplayMessageKey("asst"),
-                role: "assistant",
-                content: m.content,
-                reasoning: m.reasoning || undefined,
-                toolCalls: toolCalls.length > 0 ? toolCalls : undefined,
-            });
+            // An aborted assistant message carries the model-facing interruption
+            // note in its content. Render only what the assistant actually said
+            // (partial streamed text, if any) plus a dedicated interrupt row —
+            // never the note itself, which reads like a leaked system prompt.
+            const interrupted = m.error?.aborted === true;
+            const content = interrupted
+                ? stripInterruptedAssistantMarker(m.content, INTERRUPTED_ASSISTANT_CONTENT)
+                : m.content;
+            if (content || m.reasoning || toolCalls.length > 0) {
+                result.push({
+                    key: nextDisplayMessageKey("asst"),
+                    role: "assistant",
+                    content,
+                    reasoning: m.reasoning || undefined,
+                    toolCalls: toolCalls.length > 0 ? toolCalls : undefined,
+                });
+            }
+            if (interrupted) {
+                result.push({
+                    key: nextDisplayMessageKey("asst"),
+                    role: "assistant",
+                    content: "Interrupted by user",
+                    syntheticKind: "ui_interrupt",
+                });
+            }
         }
     }
     return result;
@@ -183,116 +201,12 @@ function withMessageKey(message) {
     const prefix = message.role === "user" ? "user" : message.role === "error" ? "err" : "asst";
     return { ...message, key: nextDisplayMessageKey(prefix) };
 }
-// Keep the live (non-Static) region small so non-GPU terminals (xterm.js DOM
-// renderer, ssh into a basic terminal, tmux without GPU) don't flicker when
-// Ink re-reconciles the streaming block on every token. Flushing earlier and
-// in smaller chunks shifts most of the answer into terminal scrollback, where
-// it's a one-time write that doesn't get re-rendered.
-const STREAMING_STATIC_FLUSH_MIN_CHARS = 600;
-const STREAMING_STATIC_FLUSH_TARGET_CHARS = 400;
-const STREAMING_STATIC_FLUSH_MIN_TAIL = 120;
-/**
- * True iff `prefix` ends inside an open ```/~~~ fenced code block. Splitting
- * the streaming buffer at such a point would let the flushed half render
- * without its closing fence — `MarkdownContent` would then treat the body as
- * plain prose and the trailing half would render as an isolated code block
- * with no opener. Fence delimiters of different families don't close each
- * other (a `~~~` inside a ``` block is just text). We use a permissive
- * "line starts with three or more of the same char" rule, ignoring the info
- * string — that's enough to spot when we're mid-block.
- */
-function endsInsideUnclosedCodeFence(prefix) {
-    let openMarker = null;
-    for (const rawLine of prefix.split("\n")) {
-        const line = rawLine.replace(/^ {0,3}/, "");
-        if (openMarker === null) {
-            if (line.startsWith("```"))
-                openMarker = "`";
-            else if (line.startsWith("~~~"))
-                openMarker = "~";
-        }
-        else if (line.startsWith(openMarker.repeat(3))) {
-            openMarker = null;
-        }
-    }
-    return openMarker !== null;
-}
-function findStreamingStaticFlushIndex(content) {
-    if (content.length < STREAMING_STATIC_FLUSH_MIN_CHARS)
-        return -1;
-    const upper = Math.min(STREAMING_STATIC_FLUSH_TARGET_CHARS, content.length - STREAMING_STATIC_FLUSH_MIN_TAIL);
-    if (upper <= 0)
-        return -1;
-    const search = content.slice(0, upper);
-    const paragraphBreak = search.lastIndexOf("\n\n");
-    if (paragraphBreak >= STREAMING_STATIC_FLUSH_TARGET_CHARS / 2) {
-        const splitIndex = paragraphBreak + 2;
-        if (!endsInsideUnclosedCodeFence(content.slice(0, splitIndex))) {
-            return splitIndex;
-        }
-    }
-    const lineBreak = search.lastIndexOf("\n");
-    if (lineBreak >= STREAMING_STATIC_FLUSH_TARGET_CHARS / 2) {
-        const splitIndex = lineBreak + 1;
-        if (!endsInsideUnclosedCodeFence(content.slice(0, splitIndex))) {
-            return splitIndex;
-        }
-    }
-    // Inside an open code fence: hold off flushing until the closing fence
-    // arrives. The live region grows a bit, but Markdown rendering stays correct.
-    return -1;
-}
-function cloneDisplayPart(part) {
-    if (part.type === "text") {
-        return { type: "text", content: part.content };
-    }
-    return {
-        type: "tools",
-        toolCalls: part.toolCalls.map((toolCall) => ({
-            ...toolCall,
-            args: { ...toolCall.args },
-        })),
-    };
-}
-function splitDisplayPartsAtTextOffset(parts, offset) {
-    const flushedParts = [];
-    const remainingParts = [];
-    let remainingOffset = Math.max(0, offset);
-    let reachedTail = false;
-    for (const part of parts) {
-        if (part.type === "text") {
-            if (!reachedTail && remainingOffset >= part.content.length) {
-                if (part.content)
-                    flushedParts.push(cloneDisplayPart(part));
-                remainingOffset -= part.content.length;
-                continue;
-            }
-            if (!reachedTail && remainingOffset > 0) {
-                const head = part.content.slice(0, remainingOffset);
-                const tail = part.content.slice(remainingOffset);
-                if (head)
-                    flushedParts.push({ type: "text", content: head });
-                if (tail)
-                    remainingParts.push({ type: "text", content: tail });
-                remainingOffset = 0;
-                reachedTail = true;
-                continue;
-            }
-            remainingParts.push(cloneDisplayPart(part));
-            reachedTail = true;
-            continue;
-        }
-        if (!reachedTail && remainingOffset > 0) {
-            flushedParts.push(cloneDisplayPart(part));
-        }
-        else {
-            remainingParts.push(cloneDisplayPart(part));
-            reachedTail = true;
-        }
-    }
-    return { flushedParts, remainingParts };
-}
-export function App({ agent, args, sessionManager, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, themeMode: initialThemeMode, themeOverrides, detectedTheme, onThemeModeChange, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, bypassEnabled, onExit }) {
+// Batch streaming text deltas before committing them to React state. Without
+// <Static>, every commit re-renders the full-screen frame; per-token commits
+// would make Yoga re-lay-out the transcript for every few bytes of output.
+// 40ms keeps perceived latency invisible while capping layout work at 25fps.
+const STREAMING_FLUSH_INTERVAL_MS = 40;
+export function App({ agent, args, sessionManager, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, themeMode: initialThemeMode, themeOverrides, detectedTheme, onThemeModeChange, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, bypassEnabled, updateNotice, hookController, onExit }) {
     const [themeMode, setThemeMode] = useState(initialThemeMode ?? "auto");
     // `detectedTheme` is captured once at startup in main.ts. We keep it in state
     // so future re-detection (e.g. if a user runs `/theme auto` after switching
@@ -310,13 +224,11 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
     const themeResolved = themeMode === "auto" ? autoResolved : themeMode;
     const { exit } = useApp();
     const [messages, setMessages] = useState(() => compactDisplayMessages(reconstructDisplayMessages(agent.messages)));
-    const [clearEpoch, setClearEpoch] = useState(0);
     const [isRunning, setIsRunning] = useState(false);
     const [streamingContent, setStreamingContent] = useState("");
     const [streamingReasoning, setStreamingReasoning] = useState("");
     const [streamingTools, setStreamingTools] = useState([]);
     const [streamingParts, setStreamingParts] = useState([]);
-    const [usageTotals, setUsageTotals] = useState({ prompt: 0, completion: 0 });
     const [thinkingLevel, setThinkingLevel] = useState(agent.thinking);
     const [permissionMode, setPermissionMode] = useState(agent.mode);
     const [todos, setTodos] = useState(() => agent.getTodos());
@@ -330,7 +242,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
     const [keyProviderId, setKeyProviderId] = useState(null);
     const [verboseTrace, setVerboseTrace] = useState(false);
     const startedWithVisibleHistoryRef = useRef(messages.some((message) => message.syntheticKind !== "ui_summary"));
-    const { columns: terminalColumns } = useTerminalSize();
+    const { columns: terminalColumns, rows: terminalRows } = useTerminalSize();
     const showWelcome = shouldShowWelcomeBanner({
         messages,
         startedWithVisibleHistory: startedWithVisibleHistoryRef.current,
@@ -338,27 +250,17 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
     const activeAbortRef = useRef(null);
     const exitRequestedRef = useRef(false);
     const sessionStartRef = useRef(Date.now());
-    const previousTerminalColumnsRef = useRef(null);
-    useEffect(() => {
-        if (previousTerminalColumnsRef.current === null) {
-            previousTerminalColumnsRef.current = terminalColumns;
-            return;
-        }
-        if (previousTerminalColumnsRef.current === terminalColumns)
-            return;
-        previousTerminalColumnsRef.current = terminalColumns;
-        // This follows Gemini CLI's normal terminal-buffer strategy: after a
-        // resize, the previous live Ink frame may have wrapped at the old width,
-        // so cursor-up based repaint can leave stale progress frames behind.
-        // Debounce resize storms, then clear and replay Static at the settled width.
-        const timer = setTimeout(() => {
-            if (exitRequestedRef.current)
-                return;
-            process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
-            setClearEpoch((epoch) => epoch + 1);
-        }, 300);
-        return () => clearTimeout(timer);
-    }, [terminalColumns]);
+    const viewportRef = useRef(null);
+    // Steer/queue while the agent runs (parity with the OpenTUI composer):
+    // Enter steers the current run via the agent's input controller; Tab (or an
+    // ineligible input) queues for the next turn. Both render placeholder user
+    // rows whose badge tracks the input's lifecycle.
+    const inputControllerRef = useRef(null);
+    const pendingSteersRef = useRef(new Map());
+    const queuedInputsRef = useRef([]);
+    const [pendingSteerCount, setPendingSteerCount] = useState(0);
+    const [queuedCount, setQueuedCount] = useState(0);
+    const nextRunIdRef = useRef(0);
     // Set true the moment /quit is invoked so we can hide dynamic UI (composer,
     // waiting indicator, footer) before Ink snapshots its final frame into the
     // shell scrollback. Without this, the last visible "> " input row stays
@@ -488,6 +390,14 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         syncFirstPending();
         return unsubscribe;
     }, [questionController]);
+    // An approval or question demands the user's attention: re-engage
+    // bottom-follow even if they had scrolled up (second force trigger
+    // documented in transcript-scroll.ts).
+    useEffect(() => {
+        if (pendingApproval || pendingQuestion) {
+            viewportRef.current?.forceScrollToBottom();
+        }
+    }, [pendingApproval, pendingQuestion]);
     const rebuildSystemPrompt = useCallback((overrides) => {
         const modelParts = agent.model.includes(":")
             ? agent.model.split(":")
@@ -509,10 +419,22 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             requestExit();
             return;
         }
-        if (pendingPlan || pendingApproval || pendingQuestion || pendingFeedback)
-            return;
+        // Mouse reporting is off (native drag-select/copy works directly), so no
+        // SGR wheel events arrive — wheel scrolling reaches the app as Up/Down
+        // arrows via the terminal's alternate-scroll mode, classified in the
+        // composer. Defensively drop any stray mouse report bytes.
         if (hasTerminalMouseSequence(input))
             return;
+        if (!pickerMode && key.pageUp) {
+            viewportRef.current?.scrollPage("up");
+            return;
+        }
+        if (!pickerMode && key.pageDown) {
+            viewportRef.current?.scrollPage("down");
+            return;
+        }
+        if (pendingPlan || pendingApproval || pendingQuestion || pendingFeedback)
+            return;
         if (key.ctrl && input === "o" && !pickerMode) {
             setVerboseTrace((v) => !v);
             return;
@@ -560,12 +482,34 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         updateDisplayMessages((prev) => [...prev, withMessageKey({ role, content })]);
     }, [updateDisplayMessages]);
     const clearMessages = useCallback(() => {
-        // Static history is already written to terminal scrollback, so clearing
-        // React state alone would leave old rows visible.
-        process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
+        // The transcript lives entirely in React state now (alt-screen viewport,
+        // no terminal scrollback) — clearing state clears the screen. Writing
+        // \x1b[2J here would just flash a black frame before the next paint.
         setMessages([]);
-        setClearEpoch((epoch) => epoch + 1);
     }, []);
+    // Render a placeholder user row for input waiting to enter the run.
+    const addStatusUserMessage = useCallback((content, status) => {
+        const key = nextDisplayMessageKey("user");
+        updateDisplayMessages((prev) => [...prev, { key, role: "user", content, inputStatus: status }]);
+        viewportRef.current?.forceScrollToBottom();
+        return key;
+    }, [updateDisplayMessages]);
+    const queueInput = useCallback((payload) => {
+        const displayKey = addStatusUserMessage(payload.displayText ?? payload.text, "queued");
+        queuedInputsRef.current.push({ payload, displayKey });
+        setQueuedCount(queuedInputsRef.current.length);
+    }, [addStatusUserMessage]);
+    const submitSteer = useCallback((payload) => {
+        const controller = inputControllerRef.current;
+        if (!controller) {
+            queueInput(payload);
+            return;
+        }
+        const displayKey = addStatusUserMessage(payload.displayText ?? payload.text, "pending_steer");
+        const pending = controller.enqueue(payload.text);
+        pendingSteersRef.current.set(pending.id, { displayKey });
+        setPendingSteerCount(pendingSteersRef.current.size);
+    }, [addStatusUserMessage, queueInput]);
     const openPicker = useCallback((mode, providerId) => {
         if (mode === "key") {
             setKeyProviderId(providerId ?? null);
@@ -683,6 +627,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             settingsManager,
             lspService,
             mcpManager,
+            hookController,
             flushMemory,
             runMemoryCompaction,
             runMemorySummary,
@@ -716,6 +661,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             settingsManager,
             lspService,
             mcpManager,
+            hookController,
             flushMemory,
             runMemoryCompaction,
             runMemorySummary,
@@ -753,6 +699,26 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         const images = normalized.images;
         if (!input.trim() && images.length === 0)
             return;
+        // Agent already running: route the submit into the live run instead of
+        // starting a new one. Plain prose steers the current turn; slash
+        // commands, @-mentions and image payloads queue for the next turn
+        // (mirrors the OpenTUI boundary-steer eligibility rules).
+        if (activeAbortRef.current) {
+            if (/^\/(?:quit|exit)\s*$/.test(input.trim())) {
+                requestExit();
+                return;
+            }
+            const steerEligible = !displayInput.trim().startsWith("/") &&
+                !input.includes("@") &&
+                images.length === 0;
+            if (steerEligible) {
+                submitSteer(normalized);
+            }
+            else {
+                queueInput(normalized);
+            }
+            return;
+        }
         const runAgentInput = async (actualInput, displayInput, attachedImages = []) => {
             const activeProviderId = agent.providerId || safeRegistry.getDefault()?.id;
             const hasActiveProvider = !!activeProviderId && safeRegistry.getEnabled().some((provider) => provider.id === activeProviderId);
@@ -773,6 +739,9 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                 ...prev,
                 withMessageKey({ role: "user", content: displayContent }),
             ]);
+            // Sending is an explicit "watch the newest turn" intent: snap the
+            // transcript back to the bottom even if the user had scrolled up.
+            viewportRef.current?.forceScrollToBottom();
             setIsRunning(true);
             runStartRef.current = Date.now();
             setStreamingContent("");
@@ -785,9 +754,31 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             const assistantParts = [];
             const abortController = new AbortController();
             activeAbortRef.current = abortController;
+            const inputController = new AgentRunInputQueue(`run-${++nextRunIdRef.current}`);
+            inputControllerRef.current = inputController;
             const syncStreamingParts = () => {
                 setStreamingParts(snapshotDisplayParts(assistantParts));
             };
+            // Text/reasoning deltas arrive far faster than the screen needs to
+            // update; batch them so the full-frame re-render runs at most every
+            // STREAMING_FLUSH_INTERVAL_MS. Tool events stay immediate.
+            let streamingFlushTimer = null;
+            const cancelStreamingFlush = () => {
+                if (streamingFlushTimer !== null) {
+                    clearTimeout(streamingFlushTimer);
+                    streamingFlushTimer = null;
+                }
+            };
+            const scheduleStreamingFlush = () => {
+                if (streamingFlushTimer !== null)
+                    return;
+                streamingFlushTimer = setTimeout(() => {
+                    streamingFlushTimer = null;
+                    setStreamingContent(assistantContent);
+                    setStreamingReasoning(assistantReasoning);
+                    syncStreamingParts();
+                }, STREAMING_FLUSH_INTERVAL_MS);
+            };
             const hasAssistantOutput = () => (!!assistantContent ||
                 !!assistantReasoning ||
                 toolCalls.length > 0 ||
@@ -821,6 +812,9 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                 updateDisplayMessages((prev) => [...prev, msg]);
             };
             const clearAssistantStream = () => {
+                // A timer firing after this reset would resurrect the just-committed
+                // text as a phantom streaming block — cancel before clearing.
+                cancelStreamingFlush();
                 setStreamingContent("");
                 setStreamingReasoning("");
                 setStreamingTools([]);
@@ -830,58 +824,20 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                 toolCalls.length = 0;
                 assistantParts.length = 0;
             };
-            const flushAssistantStaticChunk = () => {
-                if (toolCalls.some((toolCall) => toolCall.result === undefined)) {
-                    return false;
-                }
-                const splitIndex = findStreamingStaticFlushIndex(assistantContent);
-                if (splitIndex <= 0)
-                    return false;
-                const { flushedParts, remainingParts } = splitDisplayPartsAtTextOffset(assistantParts, splitIndex);
-                const flushedContent = contentFromParts(flushedParts);
-                const flushedToolCalls = toolCallsFromParts(flushedParts);
-                if (!flushedContent && flushedToolCalls.length === 0)
-                    return false;
-                const msg = {
-                    key: nextDisplayMessageKey("asst"),
-                    role: "assistant",
-                    content: flushedContent,
-                };
-                if (assistantReasoning) {
-                    msg.reasoning = assistantReasoning;
-                    assistantReasoning = "";
-                    setStreamingReasoning("");
-                }
-                if (flushedToolCalls.length > 0) {
-                    msg.toolCalls = flushedToolCalls;
-                }
-                if (flushedParts.length > 0) {
-                    msg.parts = flushedParts;
-                }
-                updateDisplayMessages((prev) => [...prev, msg]);
-                assistantParts.splice(0, assistantParts.length, ...remainingParts);
-                assistantContent = contentFromParts(assistantParts);
-                const remainingToolCalls = toolCallsFromParts(assistantParts);
-                toolCalls.splice(0, toolCalls.length, ...remainingToolCalls);
-                setStreamingContent(assistantContent);
-                setStreamingTools([...toolCalls]);
-                syncStreamingParts();
-                return true;
-            };
             try {
-                for await (const event of agent.run(actualInput, args.cwd, { abortSignal: abortController.signal })) {
+                for await (const event of agent.run(actualInput, args.cwd, {
+                    abortSignal: abortController.signal,
+                    inputController,
+                })) {
                     switch (event.type) {
                         case "text_delta":
                             assistantContent += event.content;
                             appendTextPart(assistantParts, event.content);
-                            if (!flushAssistantStaticChunk()) {
-                                setStreamingContent(assistantContent);
-                                syncStreamingParts();
-                            }
+                            scheduleStreamingFlush();
                             break;
                         case "reasoning_delta":
                             assistantReasoning += event.content;
-                            setStreamingReasoning(assistantReasoning);
+                            scheduleStreamingFlush();
                             break;
                         case "tool_call_start": {
                             // The LLM has begun emitting this tool call. Args are still
@@ -980,13 +936,41 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                             sessionManager?.appendMarker("mode_switch", event.mode);
                             break;
                         }
-                        case "turn_end": {
-                            if (event.usage) {
-                                setUsageTotals((totals) => ({
-                                    prompt: totals.prompt + event.usage.promptTokens,
-                                    completion: totals.completion + event.usage.completionTokens,
-                                }));
+                        case "input_applied": {
+                            // The steer joined the current turn — its placeholder row
+                            // becomes a regular user message (badge cleared).
+                            const steer = pendingSteersRef.current.get(event.id);
+                            if (steer) {
+                                pendingSteersRef.current.delete(event.id);
+                                setPendingSteerCount(pendingSteersRef.current.size);
+                                updateDisplayMessages((prev) => prev.map((message) => message.key === steer.displayKey ? setUserInputStatus(message) : message));
+                            }
+                            break;
+                        }
+                        case "input_rejected": {
+                            // No model continuation left in this run: the steer moves to
+                            // the next turn's queue, badge flips to QUEUED.
+                            const steer = pendingSteersRef.current.get(event.id);
+                            if (steer) {
+                                pendingSteersRef.current.delete(event.id);
+                                setPendingSteerCount(pendingSteersRef.current.size);
+                                updateDisplayMessages((prev) => prev.map((message) => message.key === steer.displayKey ? setUserInputStatus(message, "queued") : message));
+                                queuedInputsRef.current.push({
+                                    payload: { text: event.content, images: [] },
+                                    displayKey: steer.displayKey,
+                                });
+                                setQueuedCount(queuedInputsRef.current.length);
+                            }
+                            break;
+                        }
+                        case "input_pending_changed": {
+                            if (event.pending === 0 && pendingSteersRef.current.size > 0) {
+                                pendingSteersRef.current.clear();
                             }
+                            setPendingSteerCount(event.pending === 0 ? 0 : event.pending);
+                            break;
+                        }
+                        case "turn_end": {
                             if (event.willContinue) {
                                 syncStreamingParts();
                                 break;
@@ -1011,6 +995,32 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                 }
             }
             finally {
+                cancelStreamingFlush();
+                // Leftover steers that never reached a model-call boundary: drop
+                // them on cancel (the user asked the run to stop); requeue them for
+                // the next turn on a normal end (mirrors the OpenTUI run teardown).
+                const cancelled = abortController.signal.aborted;
+                for (const leftover of inputController.clear()) {
+                    const steer = pendingSteersRef.current.get(leftover.id);
+                    pendingSteersRef.current.delete(leftover.id);
+                    if (cancelled) {
+                        if (steer) {
+                            updateDisplayMessages((prev) => prev.filter((message) => message.key !== steer.displayKey));
+                        }
+                        continue;
+                    }
+                    if (steer) {
+                        updateDisplayMessages((prev) => prev.map((message) => message.key === steer.displayKey ? setUserInputStatus(message, "queued") : message));
+                    }
+                    queuedInputsRef.current.push({
+                        payload: { text: leftover.content, images: [] },
+                        displayKey: steer?.displayKey,
+                    });
+                }
+                setPendingSteerCount(0);
+                setQueuedCount(queuedInputsRef.current.length);
+                if (inputControllerRef.current === inputController)
+                    inputControllerRef.current = null;
                 if (activeAbortRef.current === abortController)
                     activeAbortRef.current = null;
                 setIsRunning(false);
@@ -1051,12 +1061,14 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                 }),
                 openPicker,
                 openFeedback,
+                fillComposer,
                 registry: safeRegistry,
                 skillRegistry: safeSkillRegistry,
                 bashAllowlist,
                 settingsManager,
                 lspService,
                 mcpManager,
+                hookController,
                 flushMemory,
                 runMemoryCompaction,
                 runMemorySummary,
@@ -1085,6 +1097,14 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                             },
                         ]);
                     }
+                    else if (result.startsWith("⏪")) {
+                        // /rewind truncated agent.messages — rebuild the transcript from
+                        // the rewound state before appending the summary.
+                        updateDisplayMessages(() => [
+                            ...reconstructDisplayMessages(agent.messages),
+                            { role: "assistant", content: result },
+                        ]);
+                    }
                     else {
                         addMessage("assistant", result);
                     }
@@ -1113,7 +1133,32 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             ]
             : expansion.text;
         await runAgentInput(agentInput, displayInput, images.map((img) => ({ filename: img.filename, bytes: img.bytes })));
-    }, [addMessage, agent, args.cwd, openPicker, createProvider, safeRegistry, safeSkillRegistry, updateDisplayMessages]);
+    }, [addMessage, agent, args.cwd, openPicker, createProvider, fillComposer, safeRegistry, safeSkillRegistry, updateDisplayMessages, queueInput, submitSteer, requestExit]);
+    // Drain the queue once the run ends and no modal needs the user first.
+    // The placeholder row is removed right before resubmitting — handleSubmit
+    // renders the message again as a regular user row.
+    const drainQueuedInput = useCallback(() => {
+        if (activeAbortRef.current)
+            return;
+        if (pendingPlan || pendingApproval || pendingQuestion || pendingFeedback || pickerMode)
+            return;
+        const next = queuedInputsRef.current.shift();
+        if (!next)
+            return;
+        setQueuedCount(queuedInputsRef.current.length);
+        if (next.displayKey) {
+            updateDisplayMessages((prev) => prev.filter((message) => message.key !== next.displayKey));
+        }
+        void handleSubmit(next.payload);
+    }, [pendingPlan, pendingApproval, pendingQuestion, pendingFeedback, pickerMode, updateDisplayMessages, handleSubmit]);
+    useEffect(() => {
+        if (isRunning || queuedCount === 0)
+            return;
+        if (pendingPlan || pendingApproval || pendingQuestion || pendingFeedback || pickerMode)
+            return;
+        const timer = setTimeout(drainQueuedInput, 0);
+        return () => clearTimeout(timer);
+    }, [isRunning, queuedCount, pendingPlan, pendingApproval, pendingQuestion, pendingFeedback, pickerMode, drainQueuedInput]);
     const currentProviderId = agent.providerId || safeRegistry.getDefault()?.id;
     const keyTarget = keyProviderId
         ? safeRegistry.getConfigured().find((p) => p.id === keyProviderId)
@@ -1133,39 +1178,47 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             return null;
         })()
         : null;
-    const mcpStates = mcpManager?.getStates() ?? [];
-    const mcpConnectedCount = mcpStates.filter((state) => state.status.kind === "connected").length;
-    const hasAgentsFile = useMemo(() => existsSync(join(args.cwd, "AGENTS.md")) || existsSync(join(args.cwd, ".bubble", "AGENTS.md")), [args.cwd]);
-    const welcomeBannerNode = showWelcome ? (_jsx(WelcomeBanner, { terminalColumns: terminalColumns, modelLabel: agent.model ? displayModel(agent.model) : undefined, cwd: friendlyCwd(args.cwd), tips: buildTips(agent, safeRegistry), skillsCount: safeSkillRegistry.summaries().length, mcpConnectedCount: mcpConnectedCount, mcpTotalCount: mcpStates.length, hasAgentsFile: hasAgentsFile })) : null;
-    return (_jsx(ThemeProvider, { value: palette, children: _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Box, { flexDirection: "column", paddingX: 1, paddingTop: 1, flexShrink: 0, children: [_jsx(MessageList, { messages: messages, streamingContent: streamingContent, streamingReasoning: streamingReasoning, streamingTools: streamingTools, streamingParts: streamingParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: approvalHint, nowTick: nowTick, welcomeBanner: welcomeBannerNode }, clearEpoch), pickerMode === "model" && (_jsx(ModelPicker, { registry: safeRegistry, current: agent.model, recent: userConfig.getRecentModels(), onSelect: handleModelSelect, onCancel: closePicker })), pickerMode === "provider" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
-                                .filter((p) => isUserVisibleProvider(p.id))
-                                .map((p) => {
-                                const configured = safeRegistry.getConfigured().find((item) => item.id === p.id);
-                                const configuredLabel = configured?.apiKey ? "configured" : "needs key";
-                                return {
-                                    id: p.id,
-                                    name: `${p.name} [${configuredLabel}]`,
-                                    enabled: true,
-                                };
-                            }), current: currentProviderId, onSelect: handleProviderSelect, onCancel: closePicker })), pickerMode === "provider-add" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
-                                .filter((p) => isUserVisibleProvider(p.id))
-                                .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleProviderAddSelect, onCancel: closePicker, title: "Add Provider" })), pickerMode === "login" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
-                                .filter((p) => isUserVisibleProvider(p.id) && safeRegistry.supportsOAuth(p.id))
-                                .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLoginProviderSelect, onCancel: closePicker, title: "Select Login Provider" })), pickerMode === "logout" && (_jsx(ProviderPicker, { providers: safeRegistry.getConfigured()
-                                .filter((p) => safeRegistry.getAuthStorage().has(p.id))
-                                .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLogoutProviderSelect, onCancel: closePicker, title: "Select Logout Provider" })), pickerMode === "key" && keyTarget && (_jsx(KeyPicker, { providerName: keyTarget.name, onSubmit: handleKeySubmit, onCancel: () => {
-                                closePicker();
-                                setKeyProviderId(null);
-                            } })), pickerMode === "skill" && (_jsx(SkillPicker, { skills: safeSkillRegistry.summaries(), onSelect: (name) => {
-                                fillComposer(`/${name} `);
-                                closePicker();
-                            }, onCancel: closePicker })), pickerMode === "feishu-setup" && (_jsx(FeishuSetupPicker, { onComplete: (summary) => {
-                                closePicker();
-                                addMessage("assistant", summary);
-                            }, onCancel: () => {
-                                closePicker();
-                                addMessage("assistant", "已取消 Feishu setup。");
-                            } }))] }), todos.length > 0 && !pickerMode && !pendingPlan && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(TodosPanel, { todos: todos, terminalColumns: terminalColumns }) })), pendingPlan && !pickerMode && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(PlanConfirm, { initialPlan: pendingPlan.plan, onApprove: (finalPlan) => {
+    const showThinkingLabel = getAvailableThinkingLevels(agent.providerId, agent.apiModel).length > 2
+        && thinkingLevel
+        && thinkingLevel !== "off";
+    const welcomeBannerNode = showWelcome ? (_jsx(WelcomeBanner, { terminalColumns: terminalColumns, tips: buildTips(agent, safeRegistry), updateNotice: updateNotice, cwd: friendlyCwd(args.cwd), providerId: agent.providerId || safeRegistry.getDefault()?.id, modelLabel: agent.model ? displayModel(agent.model) : undefined, thinkingLabel: showThinkingLabel ? thinkingLevel : undefined })) : null;
+    // One row shorter than the terminal on purpose. A frame that exactly fills
+    // the screen makes Ink omit the trailing newline ("fullscreen" mode), and
+    // Ink's cursor-only repositioning (buildReturnToBottom) miscalculates by one
+    // row for such frames — the composer cursor lands one row above the prompt
+    // after any cursor-only update (e.g. restoreLastOutput following an external
+    // stdout write). Keeping every frame below viewport height keeps all of
+    // Ink's cursor paths on the consistent trailing-newline math.
+    const frameRows = Math.max(4, terminalRows - 1);
+    return (_jsx(ThemeProvider, { value: palette, children: _jsxs(Box, { flexDirection: "column", width: terminalColumns, height: frameRows, children: [_jsx(TranscriptViewport, { ref: viewportRef, children: _jsx(Box, { flexDirection: "column", paddingX: 1, paddingTop: 1, flexShrink: 0, children: _jsx(MessageList, { messages: messages, streamingContent: streamingContent, streamingReasoning: streamingReasoning, streamingTools: streamingTools, streamingParts: streamingParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: approvalHint, nowTick: nowTick, welcomeBanner: welcomeBannerNode }) }) }), pickerMode === "model" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ModelPicker, { registry: safeRegistry, current: agent.model, recent: userConfig.getRecentModels(), onSelect: handleModelSelect, onCancel: closePicker }) })), pickerMode === "provider" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                            .filter((p) => isUserVisibleProvider(p.id))
+                            .map((p) => {
+                            const configured = safeRegistry.getConfigured().find((item) => item.id === p.id);
+                            const configuredLabel = configured?.apiKey ? "configured" : "needs key";
+                            return {
+                                id: p.id,
+                                name: `${p.name} [${configuredLabel}]`,
+                                enabled: true,
+                            };
+                        }), current: currentProviderId, onSelect: handleProviderSelect, onCancel: closePicker }) })), pickerMode === "provider-add" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                            .filter((p) => isUserVisibleProvider(p.id))
+                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleProviderAddSelect, onCancel: closePicker, title: "Add Provider" }) })), pickerMode === "login" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                            .filter((p) => isUserVisibleProvider(p.id) && safeRegistry.supportsOAuth(p.id))
+                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLoginProviderSelect, onCancel: closePicker, title: "Select Login Provider" }) })), pickerMode === "logout" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ProviderPicker, { providers: safeRegistry.getConfigured()
+                            .filter((p) => safeRegistry.getAuthStorage().has(p.id))
+                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLogoutProviderSelect, onCancel: closePicker, title: "Select Logout Provider" }) })), pickerMode === "key" && keyTarget && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(KeyPicker, { providerName: keyTarget.name, onSubmit: handleKeySubmit, onCancel: () => {
+                            closePicker();
+                            setKeyProviderId(null);
+                        } }) })), pickerMode === "skill" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(SkillPicker, { skills: safeSkillRegistry.summaries(), onSelect: (name) => {
+                            fillComposer(`/${name} `);
+                            closePicker();
+                        }, onCancel: closePicker }) })), pickerMode === "feishu-setup" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(FeishuSetupPicker, { onComplete: (summary) => {
+                            closePicker();
+                            addMessage("assistant", summary);
+                        }, onCancel: () => {
+                            closePicker();
+                            addMessage("assistant", "已取消 Feishu setup。");
+                        } }) })), todos.length > 0 && !pickerMode && !pendingPlan && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(TodosPanel, { todos: todos, terminalColumns: terminalColumns }) })), pendingPlan && !pickerMode && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(PlanConfirm, { initialPlan: pendingPlan.plan, onApprove: (finalPlan) => {
                             const resolve = pendingPlan.resolve;
                             setPendingPlan(null);
                             resolve({ action: "approve", plan: finalPlan });
@@ -1192,16 +1245,9 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                             else if (result.kind === "error") {
                                 addMessage("error", `Feedback failed: ${result.message}`);
                             }
-                        } }) })), !isExiting && isRunning && !pickerMode && !pendingPlan && !pendingApproval && !pendingQuestion && !pendingFeedback && (_jsx(Box, { paddingX: 1, paddingBottom: 1, flexShrink: 0, children: _jsx(WaitingIndicator, { tools: streamingTools, hasStreamingText: streamingContent.length > 0, hasStreamingReasoning: streamingReasoning.length > 0, streamedChars: streamingContent.length + streamingReasoning.length, nowTick: nowTick }) })), !isExiting && !pickerMode && (_jsx(Box, { paddingBottom: 1, flexShrink: 0, children: _jsx(InputBox, { onSubmit: handleSubmit, disabled: isRunning || !!pendingPlan || !!pendingApproval || !!pendingQuestion || !!pendingFeedback, cursorResetEpoch: cursorResetEpoch, draftText: composerDraft?.text, draftEpoch: composerDraft?.epoch, onDraftApplied: clearComposerDraft, skillRegistry: safeSkillRegistry, terminalColumns: terminalColumns, cwd: args.cwd }) })), !isExiting && (_jsx(Box, { flexShrink: 0, children: _jsx(FooterBar, { data: buildFooterData({
-                            cwd: args.cwd,
-                            providerId: agent.providerId || safeRegistry.getDefault()?.id || "unknown",
-                            model: displayModel(agent.model) || "no model",
-                            thinkingLevel,
-                            showThinking: getAvailableThinkingLevels(agent.providerId, agent.apiModel).length > 2,
-                            mode: permissionMode,
-                            usageTotals,
-                            verboseTrace,
-                        }) }) }))] }) }));
+                        } }) })), !isExiting && isRunning && !pickerMode && !pendingPlan && !pendingApproval && !pendingQuestion && !pendingFeedback && (_jsx(Box, { paddingX: 1, paddingBottom: 1, flexShrink: 0, children: _jsx(WaitingIndicator, { tools: streamingTools, hasStreamingText: streamingContent.length > 0, hasStreamingReasoning: streamingReasoning.length > 0, streamedChars: streamingContent.length + streamingReasoning.length, nowTick: nowTick, pendingSteerCount: pendingSteerCount, queuedCount: queuedCount }) })), !isExiting && !pickerMode && (_jsx(Box, { paddingBottom: 1, flexShrink: 0, children: _jsx(InputBox, { onSubmit: handleSubmit, onQueue: isRunning ? queueInput : undefined, onWheelScroll: (direction, lines) => {
+                            viewportRef.current?.scrollBy(direction === "up" ? -lines : lines);
+                        }, disabled: !!pendingPlan || !!pendingApproval || !!pendingQuestion || !!pendingFeedback, cursorResetEpoch: cursorResetEpoch, draftText: composerDraft?.text, draftEpoch: composerDraft?.epoch, onDraftApplied: clearComposerDraft, skillRegistry: safeSkillRegistry, terminalColumns: terminalColumns, cwd: args.cwd }) })), !isExiting && (_jsx(Box, { flexShrink: 0, children: _jsx(FooterBar, { data: buildFooterData({ mode: permissionMode }) }) }))] }) }));
 }
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const GENERIC_PHRASES = [
@@ -1266,7 +1312,7 @@ function formatTokensApprox(chars) {
         return `${(tokens / 1000).toFixed(1)}k`;
     return `${Math.round(tokens / 1000)}k`;
 }
-function WaitingIndicator({ tools, hasStreamingText, hasStreamingReasoning, streamedChars, nowTick, }) {
+function WaitingIndicator({ tools, hasStreamingText, hasStreamingReasoning, streamedChars, nowTick, pendingSteerCount = 0, queuedCount = 0, }) {
     void nowTick;
     const theme = useTheme();
     const [frameIndex, setFrameIndex] = useState(0);
@@ -1314,5 +1360,13 @@ function WaitingIndicator({ tools, hasStreamingText, hasStreamingReasoning, stre
         phrase = idlePhrase;
     }
     const tokenText = streamedChars > 0 ? `↓${formatTokensApprox(streamedChars)} tok` : "";
-    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: SPINNER_FRAMES[frameIndex] }), _jsxs(Text, { color: theme.muted, children: [" ", phrase, " "] }), _jsxs(Text, { color: theme.muted, dimColor: true, children: ["(", tokenText ? `${tokenText} · ` : "", "esc\u00B7esc to interrupt)"] })] }));
+    const hintParts = [];
+    if (tokenText)
+        hintParts.push(tokenText);
+    if (pendingSteerCount > 0)
+        hintParts.push(`${pendingSteerCount} pending steer${pendingSteerCount === 1 ? "" : "s"}`);
+    if (queuedCount > 0)
+        hintParts.push(`${queuedCount} queued`);
+    hintParts.push("enter steer", "tab queue", "esc stop");
+    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: SPINNER_FRAMES[frameIndex] }), _jsxs(Text, { color: theme.muted, children: [" ", phrase, " "] }), _jsxs(Text, { color: theme.muted, dimColor: true, children: ["(", hintParts.join(" · "), ")"] })] }));
 }