@bubblebrain-ai/bubble 0.0.11 → 0.0.13

package/dist/tui-ink/app.js

@@ -4,7 +4,7 @@ import { Box, Text, useApp, useInput } from "ink";
 import { AgentAbortError } from "../agent.js";
 import { registry as slashRegistry } from "../slash-commands/index.js";
 import { UserConfig, maskKey } from "../config.js";
-import { InputBox, isCtrlCInput } from "./input-box.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 { paletteFor, ThemeProvider, useTheme } from "./theme.js";
@@ -65,7 +65,9 @@ function reconstructDisplayMessages(agentMessages) {
             result.push({
                 key: nextDisplayMessageKey("user"),
                 role: "user",
-                content: typeof m.content === "string" ? m.content : "(multimedia)",
+                content: typeof m.content === "string"
+                    ? (shouldCollapsePastedContent(m.content) ? createPastedContentMarker(m.content) : m.content)
+                    : "(multimedia)",
             });
         }
         else if (m.role === "assistant") {
@@ -178,9 +180,40 @@ function withMessageKey(message) {
     const prefix = message.role === "user" ? "user" : message.role === "error" ? "err" : "asst";
     return { ...message, key: nextDisplayMessageKey(prefix) };
 }
-const STREAMING_STATIC_FLUSH_MIN_CHARS = 5000;
-const STREAMING_STATIC_FLUSH_TARGET_CHARS = 3600;
-const STREAMING_STATIC_FLUSH_MIN_TAIL = 700;
+// 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;
@@ -190,12 +223,20 @@ function findStreamingStaticFlushIndex(content) {
     const search = content.slice(0, upper);
     const paragraphBreak = search.lastIndexOf("\n\n");
     if (paragraphBreak >= STREAMING_STATIC_FLUSH_TARGET_CHARS / 2) {
-        return paragraphBreak + 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) {
-        return lineBreak + 1;
+        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) {
@@ -281,6 +322,8 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
     const [pendingQuestion, setPendingQuestion] = useState(null);
     const [pendingFeedback, setPendingFeedback] = useState(null);
     const [pickerMode, setPickerMode] = useState(null);
+    const [cursorResetEpoch, setCursorResetEpoch] = useState(0);
+    const [composerDraft, setComposerDraft] = useState(null);
     const [keyProviderId, setKeyProviderId] = useState(null);
     const [verboseTrace, setVerboseTrace] = useState(false);
     const startedWithVisibleHistoryRef = useRef(messages.some((message) => message.syntheticKind !== "ui_summary"));
@@ -455,7 +498,6 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             thinkingLevel: overrides?.thinkingLevel ?? agent.thinking,
             mode: overrides?.mode ?? agent.mode,
             workingDir: args.cwd,
-            skills: safeSkillRegistry?.summaries() ?? [],
         }));
     }, [agent, args.cwd, safeRegistry, safeSkillRegistry]);
     useInput((input, key) => {
@@ -486,7 +528,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             rebuildSystemPrompt({ thinkingLevel: nextLevel });
             userConfig.setDefaultThinkingLevel(nextLevel);
             setThinkingLevel(nextLevel);
-            sessionManager?.setMetadata({ model: agent.model, thinkingLevel: nextLevel, reasoningEffort: nextLevel });
+            sessionManager?.updateMetadata({ model: agent.model, thinkingLevel: nextLevel, reasoningEffort: nextLevel });
             sessionManager?.appendMarker("thinking_level_switch", nextLevel);
             return;
         }
@@ -526,6 +568,19 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         }
         setPickerMode(mode);
     }, []);
+    const closePicker = useCallback(() => {
+        setPickerMode(null);
+        setCursorResetEpoch((epoch) => epoch + 1);
+    }, []);
+    const fillComposer = useCallback((text) => {
+        setComposerDraft((current) => ({
+            text,
+            epoch: (current?.epoch ?? 0) + 1,
+        }));
+    }, []);
+    const clearComposerDraft = useCallback(() => {
+        setComposerDraft(null);
+    }, []);
     const openFeedback = useCallback((initialDescription) => {
         const base = collectFeedback(agent, { description: "" });
         const { description: _drop, ...rest } = base;
@@ -542,7 +597,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             const provider = safeRegistry.getConfigured().find((item) => item.id === providerId);
             if (!provider?.apiKey || !createProvider) {
                 addMessage("error", `Provider ${providerId} is not configured or has no active credentials.`);
-                setPickerMode(null);
+                closePicker();
                 return;
             }
             const modelId = model.includes(":") ? model.split(":").slice(1).join(":") : model;
@@ -556,17 +611,16 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                 configuredModelId: model,
                 thinkingLevel: agent.thinking,
                 workingDir: args.cwd,
-                skills: safeSkillRegistry?.summaries() ?? [],
             }));
             userConfig.pushRecentModel(model);
             setThinkingLevel(agent.thinking);
-            sessionManager?.setMetadata({ model, thinkingLevel: agent.thinking, reasoningEffort: agent.thinking });
+            sessionManager?.updateMetadata({ model, thinkingLevel: agent.thinking, reasoningEffort: agent.thinking });
             sessionManager?.appendMarker("model_switch", model);
             addMessage("assistant", `Model switched to ${displayModel(model)}.`);
-            setPickerMode(null);
+            closePicker();
         };
         void run();
-    }, [agent, addMessage, sessionManager, userConfig, safeRegistry, createProvider]);
+    }, [agent, addMessage, closePicker, sessionManager, userConfig, safeRegistry, createProvider]);
     const handleProviderSelect = useCallback(async (providerId) => {
         await safeRegistry.prepareProvider(providerId);
         const configured = safeRegistry.getConfigured();
@@ -574,7 +628,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         const builtin = BUILTIN_PROVIDERS.find((x) => x.id === providerId);
         if (!p && !builtin) {
             addMessage("error", `Provider ${providerId} not found.`);
-            setPickerMode(null);
+            closePicker();
             return;
         }
         if (!p?.apiKey) {
@@ -590,21 +644,21 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         agent.setProvider(createProvider(providerId, p.apiKey, p.baseURL));
         agent.providerId = providerId;
         addMessage("assistant", `Switched to provider ${p.name}. Use /model to pick a model.`);
-        setPickerMode(null);
-    }, [addMessage, agent, createProvider, safeRegistry]);
+        closePicker();
+    }, [addMessage, agent, closePicker, createProvider, safeRegistry]);
     const handleProviderAddSelect = useCallback((providerId) => {
         const ok = safeRegistry.addProvider(providerId, "");
         if (!ok) {
             addMessage("error", `Provider ${providerId} could not be added.`);
-            setPickerMode(null);
+            closePicker();
             return;
         }
         safeRegistry.setDefault(providerId);
         setKeyProviderId(providerId);
         setPickerMode("key");
-    }, [addMessage, safeRegistry]);
+    }, [addMessage, closePicker, safeRegistry]);
     const handleLoginProviderSelect = useCallback(async (providerId) => {
-        setPickerMode(null);
+        closePicker();
         const command = `/login ${providerId}`;
         const { handled, result } = await slashRegistry.execute(command, {
             agent,
@@ -635,9 +689,9 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         if (handled && result) {
             addMessage("assistant", result);
         }
-    }, [agent, addMessage, clearMessages, createProvider, exit, openPicker, safeRegistry, sessionManager]);
+    }, [agent, addMessage, clearMessages, closePicker, createProvider, exit, openPicker, safeRegistry, sessionManager]);
     const handleLogoutProviderSelect = useCallback(async (providerId) => {
-        setPickerMode(null);
+        closePicker();
         const command = `/logout ${providerId}`;
         const { handled, result } = await slashRegistry.execute(command, {
             agent,
@@ -668,12 +722,12 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         if (handled && result) {
             addMessage("assistant", result);
         }
-    }, [agent, addMessage, clearMessages, createProvider, exit, openPicker, safeRegistry, sessionManager]);
+    }, [agent, addMessage, clearMessages, closePicker, createProvider, exit, openPicker, safeRegistry, sessionManager]);
     const handleKeySubmit = useCallback((key) => {
         const targetId = keyProviderId || safeRegistry.getDefault()?.id;
         if (!targetId) {
             addMessage("error", "No provider selected.");
-            setPickerMode(null);
+            closePicker();
             setKeyProviderId(null);
             return;
         }
@@ -684,12 +738,13 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             agent.providerId = targetId;
         }
         addMessage("assistant", `API key updated for ${p?.name || targetId} to ${maskKey(key)}.`);
-        setPickerMode(null);
+        closePicker();
         setKeyProviderId(null);
-    }, [addMessage, agent, createProvider, keyProviderId, safeRegistry]);
+    }, [addMessage, agent, closePicker, createProvider, keyProviderId, safeRegistry]);
     const handleSubmit = useCallback(async (payload) => {
         const normalized = typeof payload === "string" ? { text: payload, images: [] } : payload;
         const input = normalized.text;
+        const displayInput = normalized.displayText ?? input;
         const images = normalized.images;
         if (!input.trim() && images.length === 0)
             return;
@@ -966,7 +1021,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         };
         // Slash commands and skill invocations drop any attached images —
         // they're meant for pure command routing.
-        if (input.startsWith("/")) {
+        if (displayInput.startsWith("/")) {
             // Fast-path `/quit` and `/exit` before slash-registry / skill
             // resolution. This guarantees a literal "/quit" always exits even if
             // a skill or alias of the same name is later registered. The
@@ -979,7 +1034,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             }
             const skillInvocation = parseSkillInvocation(input, safeSkillRegistry);
             if (skillInvocation) {
-                await runAgentInput(skillInvocation.actualPrompt, input);
+                await runAgentInput(skillInvocation.actualPrompt, displayInput);
                 return;
             }
             const { handled, result, inject } = await slashRegistry.execute(input, {
@@ -1033,7 +1088,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                     }
                 }
                 if (inject) {
-                    await runAgentInput(inject, input);
+                    await runAgentInput(inject, displayInput);
                 }
                 return;
             }
@@ -1054,7 +1109,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                 })),
             ]
             : expansion.text;
-        await runAgentInput(agentInput, input, images.map((img) => ({ filename: img.filename, bytes: img.bytes })));
+        await runAgentInput(agentInput, displayInput, images.map((img) => ({ filename: img.filename, bytes: img.bytes })));
     }, [addMessage, agent, args.cwd, openPicker, createProvider, safeRegistry, safeSkillRegistry, updateDisplayMessages]);
     const currentProviderId = agent.providerId || safeRegistry.getDefault()?.id;
     const keyTarget = keyProviderId
@@ -1079,7 +1134,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
     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: () => setPickerMode(null) })), pickerMode === "provider" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+    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);
@@ -1089,50 +1144,23 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                                     name: `${p.name} [${configuredLabel}]`,
                                     enabled: true,
                                 };
-                            }), current: currentProviderId, onSelect: handleProviderSelect, onCancel: () => setPickerMode(null) })), pickerMode === "provider-add" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                            }), 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: () => setPickerMode(null), title: "Add Provider" })), pickerMode === "login" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                                .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: () => setPickerMode(null), title: "Select Login Provider" })), pickerMode === "logout" && (_jsx(ProviderPicker, { providers: safeRegistry.getConfigured()
+                                .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: () => setPickerMode(null), title: "Select Logout Provider" })), pickerMode === "key" && keyTarget && (_jsx(KeyPicker, { providerName: keyTarget.name, onSubmit: handleKeySubmit, onCancel: () => {
-                                setPickerMode(null);
+                                .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: async (name) => {
-                                setPickerMode(null);
-                                const { handled, result } = await slashRegistry.execute(`/skill ${name}`, {
-                                    agent,
-                                    addMessage,
-                                    clearMessages,
-                                    cwd: args.cwd,
-                                    exit: () => { requestExit(); },
-                                    sessionManager,
-                                    createProvider: createProvider ?? (() => {
-                                        throw new Error("Provider creation not available");
-                                    }),
-                                    openPicker,
-                                    openFeedback,
-                                    registry: safeRegistry,
-                                    skillRegistry: safeSkillRegistry,
-                                    bashAllowlist,
-                                    settingsManager,
-                                    lspService,
-                                    mcpManager,
-                                    flushMemory,
-                                    runMemoryCompaction,
-                                    runMemorySummary,
-                                    runMemoryRefresh,
-                                    getThemeMode: () => themeMode,
-                                    getResolvedTheme: () => themeResolved,
-                                    setThemeMode: applyThemeMode,
-                                });
-                                if (handled && result)
-                                    addMessage("assistant", result);
-                            }, onCancel: () => setPickerMode(null) })), pickerMode === "feishu-setup" && (_jsx(FeishuSetupPicker, { onComplete: (summary) => {
-                                setPickerMode(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: () => {
-                                setPickerMode(null);
+                                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;
@@ -1161,7 +1189,7 @@ 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, skillRegistry: safeSkillRegistry, terminalColumns: terminalColumns, cwd: args.cwd }) })), !isExiting && (_jsx(Box, { flexShrink: 0, children: _jsx(FooterBar, { data: buildFooterData({
+                        } }) })), !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",

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

@@ -1,18 +1,36 @@
 import type { SkillRegistry } from "../skills/registry.js";
 import { type ImageAttachment } from "./image-paste.js";
 export interface SubmitPayload {
+    /** Fully-expanded text sent to the agent. */
     text: string;
+    /** Text shown in the composer/transcript when it differs from the real text. */
+    displayText?: string;
     images: ImageAttachment[];
 }
 interface InputBoxProps {
     onSubmit: (payload: SubmitPayload) => void;
     onPasteNotice?: (notice: string) => void;
     disabled?: boolean;
+    cursorResetEpoch?: number;
+    draftText?: string;
+    draftEpoch?: number;
+    onDraftApplied?: () => void;
     skillRegistry?: SkillRegistry;
     terminalColumns: number;
     cwd: string;
 }
+export interface PastedContentReference {
+    marker: string;
+    content: string;
+}
 export declare function needsCursorRowCompensation(nextOutputHeight: number, viewportRows: number, previousOutputHeight: number | null): boolean;
+export declare function resolveCursorRowCompensation(input: {
+    sameRenderedFrame: boolean;
+    previousRowCompensation: number;
+    nextOutputHeight: number;
+    viewportRows: number;
+    previousOutputHeight: number | null;
+}): number;
 export declare function isCtrlCInput(input: string, key: {
     ctrl?: boolean;
 }): boolean;
@@ -40,5 +58,8 @@ export declare function insertNewlineAtCursor(text: string, cursor: number): {
     text: string;
     cursor: number;
 };
-export declare function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, terminalColumns, cwd }: InputBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function shouldCollapsePastedContent(text: string): boolean;
+export declare function createPastedContentMarker(content: string): string;
+export declare function expandPastedContentMarkers(displayText: string, references: PastedContentReference[]): string;
+export declare function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch, draftText, draftEpoch, onDraftApplied, skillRegistry, terminalColumns, cwd, }: InputBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -14,6 +14,8 @@ const MAX_VISIBLE_LINES = 6;
 const PADDING_X = 1;
 const PROMPT = " > ";
 const MAX_VISIBLE_SUGGESTIONS = 8;
+const LONG_PASTE_CHAR_THRESHOLD = 1000;
+const LONG_PASTE_LINE_THRESHOLD = 20;
 export function needsCursorRowCompensation(nextOutputHeight, viewportRows, previousOutputHeight) {
     const hadPreviousFrame = previousOutputHeight !== null && previousOutputHeight > 0;
     const isFullscreen = nextOutputHeight >= viewportRows;
@@ -27,6 +29,11 @@ export function needsCursorRowCompensation(nextOutputHeight, viewportRows, previ
     // line below the output, so pass y+1 in those cases.
     return isFullscreen || wasOverflowing || (isOverflowing && hadPreviousFrame) || isLeavingFullscreen;
 }
+export function resolveCursorRowCompensation(input) {
+    if (input.sameRenderedFrame)
+        return input.previousRowCompensation;
+    return needsCursorRowCompensation(input.nextOutputHeight, input.viewportRows, input.previousOutputHeight) ? 1 : 0;
+}
 export function isCtrlCInput(input, key) {
     return input === "\x03" || (key.ctrl === true && input.toLowerCase() === "c");
 }
@@ -141,7 +148,42 @@ export function insertNewlineAtCursor(text, cursor) {
         cursor: clampedCursor + 1,
     };
 }
-export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, terminalColumns, cwd }) {
+export function shouldCollapsePastedContent(text) {
+    if (text.length >= LONG_PASTE_CHAR_THRESHOLD)
+        return true;
+    return text.split("\n").length >= LONG_PASTE_LINE_THRESHOLD;
+}
+export function createPastedContentMarker(content) {
+    return `[Pasted Content ${content.length} chars]`;
+}
+export function expandPastedContentMarkers(displayText, references) {
+    if (references.length === 0 || displayText.length === 0)
+        return displayText;
+    let expanded = "";
+    let index = 0;
+    const used = new Set();
+    while (index < displayText.length) {
+        let matched = -1;
+        for (let i = 0; i < references.length; i++) {
+            const ref = references[i];
+            if (!used.has(i) && displayText.startsWith(ref.marker, index)) {
+                matched = i;
+                break;
+            }
+        }
+        if (matched >= 0) {
+            const ref = references[matched];
+            expanded += ref.content;
+            index += ref.marker.length;
+            used.add(matched);
+            continue;
+        }
+        expanded += displayText[index];
+        index += 1;
+    }
+    return expanded;
+}
+export function InputBox({ onSubmit, onPasteNotice, disabled, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, terminalColumns, cwd, }) {
     const theme = useTheme();
     const width = terminalColumns;
     const [text, setText] = useState("");
@@ -149,6 +191,7 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [projectFiles, setProjectFiles] = useState(null);
     const [attachments, setAttachments] = useState([]);
+    const [pastedContentRefs, setPastedContentRefs] = useState([]);
     const [history, setHistory] = useState(() => loadHistorySync());
     const [historyIndex, setHistoryIndex] = useState(null);
     const historyDraftRef = useRef("");
@@ -283,7 +326,14 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
         const imageTokens = tokens.filter(isImageFilePath);
         if (imageTokens.length === 0) {
             // Plain text paste — insert into the input at the cursor.
-            insertTextAtCursor(clean);
+            if (shouldCollapsePastedContent(clean)) {
+                const marker = createPastedContentMarker(clean);
+                setPastedContentRefs((prev) => [...prev, { marker, content: clean }]);
+                insertTextAtCursor(marker);
+            }
+            else {
+                insertTextAtCursor(clean);
+            }
             clearPending();
             return;
         }
@@ -337,20 +387,28 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
         setSelectedIndex(0);
     };
     const submitInput = (submittedText) => {
-        if (submittedText.trim().length === 0 && attachments.length === 0)
+        const expandedText = expandPastedContentMarkers(submittedText, pastedContentRefs);
+        if (expandedText.trim().length === 0 && attachments.length === 0)
             return;
-        onSubmit({ text: submittedText, images: attachments });
-        if (submittedText.trim().length > 0) {
-            const nextHistory = pushHistoryEntry(history, submittedText);
+        onSubmit({
+            text: expandedText,
+            displayText: expandedText === submittedText ? undefined : submittedText,
+            images: attachments,
+        });
+        // A collapsed marker cannot be safely replayed from history once its
+        // in-memory paste reference is gone; skip those entries instead.
+        if (expandedText.trim().length > 0 && expandedText === submittedText) {
+            const nextHistory = pushHistoryEntry(history, expandedText);
             if (nextHistory !== history) {
                 setHistory(nextHistory);
-                appendHistoryEntry(submittedText);
+                appendHistoryEntry(expandedText);
             }
         }
         setText("");
         setCursor(0);
         setSelectedIndex(0);
         setAttachments([]);
+        setPastedContentRefs([]);
         setHistoryIndex(null);
         historyDraftRef.current = "";
     };
@@ -501,6 +559,7 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
                 setHistoryIndex(result.index);
                 historyDraftRef.current = result.draft;
                 setSelectedIndex(0);
+                setPastedContentRefs([]);
             }
             return;
         }
@@ -516,6 +575,7 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
                 setHistoryIndex(result.index);
                 historyDraftRef.current = result.draft;
                 setSelectedIndex(0);
+                setPastedContentRefs([]);
             }
             return;
         }
@@ -537,9 +597,40 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
     const previousViewportRowsRef = useRef(null);
     const previousInputFrameSignatureRef = useRef(null);
     const previousRowCompensationRef = useRef(0);
+    const lastCursorResetEpochRef = useRef(null);
+    const lastDraftEpochRef = useRef(null);
     const lastWidthRef = useRef(null);
     const { setCursorPosition } = useCursor();
     const { stdout } = useStdout();
+    const [cursorTick, setCursorTick] = useState(0);
+    useLayoutEffect(() => {
+        const isInitialMount = lastCursorResetEpochRef.current === null;
+        const shouldReset = !isInitialMount || cursorResetEpoch > 0;
+        lastCursorResetEpochRef.current = cursorResetEpoch;
+        if (!shouldReset)
+            return;
+        previousOutputHeightRef.current = null;
+        previousViewportRowsRef.current = null;
+        previousInputFrameSignatureRef.current = null;
+        previousRowCompensationRef.current = 0;
+        lastCursorRef.current = null;
+        setCursorPosition(undefined);
+        setCursorTick((t) => t + 1);
+    }, [cursorResetEpoch, setCursorPosition]);
+    useLayoutEffect(() => {
+        if (lastDraftEpochRef.current === draftEpoch)
+            return;
+        lastDraftEpochRef.current = draftEpoch;
+        if (!draftText)
+            return;
+        setText(draftText);
+        setCursor(draftText.length);
+        setSelectedIndex(0);
+        setPastedContentRefs([]);
+        setHistoryIndex(null);
+        historyDraftRef.current = "";
+        onDraftApplied?.();
+    }, [draftEpoch, draftText, onDraftApplied]);
     // After a terminal resize the previous-frame refs reference a layout that no
     // longer exists; carrying them forward makes `needsCursorRowCompensation`
     // compare new yoga heights against stale ones and offsets the cursor by a
@@ -608,7 +699,6 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
     // user can't type. Keeping the real cursor visible in the input makes it
     // flicker every time streaming output above it re-lays out the frame, so
     // we hide it entirely until input is active again.
-    const [cursorTick, setCursorTick] = useState(0);
     useLayoutEffect(() => {
         let node = cursorLineRef.current ?? undefined;
         if (!node?.yogaNode) {
@@ -644,9 +734,13 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
         const sameRenderedFrame = previousOutputHeight === rootHeight &&
             previousViewportRowsRef.current === viewportRows &&
             previousInputFrameSignatureRef.current === inputFrameSignature;
-        const rowCompensation = sameRenderedFrame
-            ? previousRowCompensationRef.current
-            : needsCursorRowCompensation(rootHeight, viewportRows, previousOutputHeight) ? 1 : 0;
+        const rowCompensation = resolveCursorRowCompensation({
+            sameRenderedFrame,
+            previousRowCompensation: previousRowCompensationRef.current,
+            nextOutputHeight: rootHeight,
+            viewportRows,
+            previousOutputHeight,
+        });
         previousOutputHeightRef.current = rootHeight;
         previousViewportRowsRef.current = viewportRows;
         previousInputFrameSignatureRef.current = inputFrameSignature;

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

@@ -59,7 +59,15 @@ function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, v
     const visibleParts = deferredParts.length > 0
         ? deferredParts
         : fallbackStreamingParts(deferredContent, tools);
-    return (_jsxs(Box, { flexDirection: "column", children: [deferredReasoning && verboseTrace && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(ReasoningTraceBlock, { reasoning: deferredReasoning }) })), visibleParts.length > 0 && (_jsx(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: _jsx(MessageParts, { parts: visibleParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, showExpandHint: true, nowTick: nowTick, showActivity: true, streaming: true }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [deferredReasoning && verboseTrace && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(ReasoningTraceBlock, { reasoning: deferredReasoning }) })), 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 }) }))] }));
 }
 function MessageParts({ parts, terminalColumns, verboseTrace, pendingApproval, showExpandHint, nowTick, showActivity = false, streaming = false, }) {
     const lastToolsPartIndex = findLastToolsPartIndex(parts);
@@ -201,9 +209,10 @@ function ReasoningTraceBlock({ reasoning }) {
 }
 function CompactionSummaryBlock({ message }) {
     const theme = useTheme();
-    const status = message.content.replace(/^✓\s*/, "").trim() || "Session compacted";
+    const rawStatus = message.content.replace(/^✓\s*/, "").trim();
+    const status = rawStatus.replace(/^Compaction complete\s*(?:·\s*)?/i, "").trim() || "Session compacted";
     const summary = message.compactionSummary?.trim();
-    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.success, bold: true, children: "\u2713 " }), _jsx(Text, { color: theme.accent, bold: true, children: "Compaction" }), _jsxs(Text, { color: theme.muted, children: ["  \u00B7  ", status] })] }), summary && (_jsx(Box, { marginTop: 1, paddingLeft: 3, flexDirection: "column", children: _jsx(MarkdownContent, { content: summary }) }))] }));
+    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 }) {
     const theme = useTheme();