@bubblebrain-ai/bubble 0.0.34 → 0.0.36

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

@@ -6,15 +6,76 @@ import { appendFileSync } from "node:fs";
 import { registry as slashRegistry } from "../slash-commands/index.js";
 import { useTheme } from "./theme.js";
 import { filterFileSuggestions, findAtContext, listProjectFiles } from "./file-mentions.js";
-import { bareImageFilenameFromPaste, ingestClipboardImage, ingestImagePath, isImageFilePath, isScreenshotTempPath, splitPastedPaths, } from "./image-paste.js";
+import { bareImageFilenameFromPaste, extractImagePathTokens, ingestClipboardImage, ingestImagePath, isImageFilePath, isScreenshotTempPath, splitPastedPaths, } from "./image-paste.js";
 import { appendHistoryEntry, loadHistoryEntriesSync, pushHistoryEntry, stepHistory, } from "./input-history.js";
+import { cloneComposerBuffer, createComposerBuffer, deleteComposerBackward, deleteComposerForward, expandComposerBuffer, hasActiveComposerPastes, insertComposerPaste, insertComposerText, moveComposerCursor, replaceComposerRange, } from "./composer-buffer.js";
 import { isKeyReleaseEvent } from "./key-events.js";
+import { PasteOperationTracker } from "./paste-operation-tracker.js";
 import { stripTerminalMouseSequences } from "./terminal-mouse.js";
 import { submitPayloadFingerprint } from "./submit-dedupe.js";
 export { createPastedContentMarker, expandPastedContentMarkers, shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
-import { createPastedContentMarker, expandPastedContentMarkers, shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
+import { shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
 import { imageDisplayLabel, stripInlineImageLabels } from "../tui/image-display.js";
-const MIN_VISIBLE_LINES = 3;
+export function resolveComposerAtContext(text, cursor, isSlashContext, allowWorkspaceMentions = true) {
+    return !allowWorkspaceMentions || isSlashContext ? null : findAtContext(text, cursor);
+}
+export function createComposerDraftSnapshot(input) {
+    return {
+        buffer: cloneComposerBuffer(input.buffer),
+        attachments: input.attachments.map((attachment) => ({ ...attachment })),
+        imageLabelStartOverride: input.imageLabelStartOverride,
+    };
+}
+/**
+ * Browse persisted history without turning marker-shaped text into live paste
+ * tokens, while preserving the exact unsent draft in memory for the final
+ * Down transition back out of history.
+ */
+export function stepComposerHistory(state, history, direction) {
+    const plainDraft = state.draftSnapshot
+        ? {
+            text: state.draftSnapshot.buffer.text,
+            images: state.draftSnapshot.attachments,
+            ...(state.draftSnapshot.imageLabelStartOverride !== null
+                ? { imageDisplayStart: state.draftSnapshot.imageLabelStartOverride }
+                : {}),
+        }
+        : { text: "", images: [] };
+    const result = stepHistory({ history, index: state.historyIndex, draft: plainDraft }, direction, {
+        text: state.buffer.text,
+        images: state.attachments,
+        ...(state.imageLabelStartOverride !== null
+            ? { imageDisplayStart: state.imageLabelStartOverride }
+            : {}),
+    });
+    if (!result.changed)
+        return { ...state, changed: false };
+    let draftSnapshot = state.draftSnapshot;
+    if (state.historyIndex === null && result.index !== null && draftSnapshot === null) {
+        draftSnapshot = createComposerDraftSnapshot({
+            buffer: state.buffer,
+            attachments: state.attachments,
+            imageLabelStartOverride: state.imageLabelStartOverride,
+        });
+    }
+    if (result.index === null && draftSnapshot) {
+        const restored = createComposerDraftSnapshot(draftSnapshot);
+        return {
+            ...restored,
+            historyIndex: null,
+            draftSnapshot: null,
+            changed: true,
+        };
+    }
+    return {
+        buffer: createComposerBuffer(result.text),
+        attachments: (result.images ?? []).map((attachment) => ({ ...attachment })),
+        imageLabelStartOverride: result.imageDisplayStart ?? null,
+        historyIndex: result.index,
+        draftSnapshot: result.index === null ? null : draftSnapshot,
+        changed: true,
+    };
+}
 const MAX_VISIBLE_LINES = 6;
 const PADDING_X = 1;
 const PROMPT = " > ";
@@ -47,12 +108,6 @@ export function isCtrlLetterInput(input, key, letter) {
 export function isCtrlCInput(input, key) {
     return isCtrlLetterInput(input, key, "c");
 }
-export function shouldUseLineComposerFrame(_background) {
-    return true;
-}
-export function composerSurfaceBackground(lineFrame, background, inputBg) {
-    return lineFrame ? background : inputBg;
-}
 export function shouldUseHardwareComposerCursor(env = process.env) {
     return env.BUBBLE_HARDWARE_CURSOR === "1";
 }
@@ -64,16 +119,10 @@ export function composerVerticalArrowDirection(key) {
     return undefined;
 }
 export function resolveSoftwareCursorCellStyle(input) {
-    if (input.visible) {
-        return {
-            backgroundColor: input.cursorBackground,
-            color: input.cursorForeground,
-        };
-    }
-    return {
-        backgroundColor: input.rowBackground,
-        color: input.textColor,
-    };
+    // Inverse video swaps the cell's real foreground/background at the terminal
+    // level, so the cursor block stays visible on any terminal palette without
+    // guessing a contrasting pair.
+    return { inverse: input.visible, color: input.textColor };
 }
 /**
  * Split a composer line around the cursor so the cell under it can render as
@@ -249,6 +298,9 @@ export function resolveInkEnterIntent(input, key) {
         return "newline";
     return "submit";
 }
+export function shouldDeferComposerCommitWhilePastePending(hasPendingPaste, enterIntent, key) {
+    return hasPendingPaste && (enterIntent === "submit" || key.tab === true);
+}
 export function insertNewlineAtCursor(text, cursor) {
     const clampedCursor = Math.max(0, Math.min(text.length, cursor));
     return {
@@ -333,49 +385,69 @@ export function resolveComposerEditAction(input, key) {
         return "delete-line-end";
     return null;
 }
-export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDownAtBottom, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, localSlashCommands = [], terminalColumns, cwd, sessionFile, nextImageLabelStart = 1, }) {
+export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDownAtBottom, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, localSlashCommands = [], allowedSlashCommands, allowWorkspaceMentions = true, allowImageAttachments = true, terminalColumns, cwd, sessionFile, nextImageLabelStart = 1, }) {
     const theme = useTheme();
     const width = terminalColumns;
     const historyScope = useMemo(() => ({ sessionFile, cwd }), [sessionFile, cwd]);
     const hardwareCursorEnabled = shouldUseHardwareComposerCursor();
-    const [text, setText] = useState("");
-    const [cursor, setCursor] = useState(0);
+    const [composerBuffer, setComposerBuffer] = useState(() => createComposerBuffer());
+    const composerBufferRef = useRef(composerBuffer);
+    composerBufferRef.current = composerBuffer;
+    const updateComposerBuffer = React.useCallback((transition) => {
+        const next = transition(composerBufferRef.current);
+        composerBufferRef.current = next;
+        setComposerBuffer(next);
+        return next;
+    }, []);
+    const { text, cursor } = composerBuffer;
     const [softwareCursorVisible, setSoftwareCursorVisible] = useState(true);
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [projectFiles, setProjectFiles] = useState(null);
     const [attachments, setAttachments] = useState([]);
     const [imageLabelStartOverride, setImageLabelStartOverride] = useState(null);
-    const [pastedContentRefs, setPastedContentRefs] = useState([]);
     const [history, setHistory] = useState(() => loadHistoryEntriesSync({ scope: historyScope }));
     const [historyIndex, setHistoryIndex] = useState(null);
-    const historyDraftRef = useRef("");
+    const historyDraftRef = useRef(null);
     const historyScopeRef = useRef(historyScope);
+    const historyScopeKey = `${historyScope.cwd}\0${historyScope.sessionFile ?? ""}`;
+    const previousHistoryScopeKeyRef = useRef(historyScopeKey);
+    const draftIdentityEpochRef = useRef(0);
+    const pasteOperationsRef = useRef(new PasteOperationTracker());
     const submittedPayloadFingerprintRef = useRef(null);
     const loadingFilesRef = useRef(false);
-    const nextPastedContentIndexRef = useRef(1);
     // Kept equal to attachments.length so a synchronous multi-image paste loop
     // assigns each image its correct (distinct) inline label index.
     const attachmentCountRef = useRef(0);
-    // Paste and the keystrokes that follow can arrive inside the same stdin chunk
-    // and dispatch within one discreteUpdates batch. If the Enter that a user
-    // typed after a paste fires before React commits the paste-driven setState,
-    // useInput's Enter branch reads stale `text` and submits without the paste.
-    // This ref flips synchronously at paste-start and clears after the paste
-    // commit has been flushed — useInput's Enter handler bails while it's set.
-    const pastePendingRef = useRef(false);
     historyScopeRef.current = historyScope;
+    const invalidateDraftAsyncWork = React.useCallback(() => {
+        draftIdentityEpochRef.current += 1;
+        pasteOperationsRef.current.invalidateAll();
+    }, []);
     const ensureImageLabelStart = React.useCallback(() => {
         setImageLabelStartOverride((current) => current ?? nextImageLabelStart);
     }, [nextImageLabelStart]);
     useEffect(() => {
+        const scopeChanged = previousHistoryScopeKeyRef.current !== historyScopeKey;
+        previousHistoryScopeKeyRef.current = historyScopeKey;
         setHistory(loadHistoryEntriesSync({ scope: historyScope }));
         setHistoryIndex(null);
         setImageLabelStartOverride(null);
-        historyDraftRef.current = "";
-    }, [historyScope]);
+        historyDraftRef.current = null;
+        if (scopeChanged) {
+            updateComposerBuffer(() => createComposerBuffer());
+            setAttachments([]);
+            attachmentCountRef.current = 0;
+            setProjectFiles(null);
+            loadingFilesRef.current = false;
+        }
+        invalidateDraftAsyncWork();
+    }, [historyScope, historyScopeKey, invalidateDraftAsyncWork, updateComposerBuffer]);
+    useEffect(() => () => {
+        invalidateDraftAsyncWork();
+    }, [invalidateDraftAsyncWork]);
     const isSlashContext = text.startsWith("/") && cursor > 0 && !text.includes("\n");
     const slashPrefix = isSlashContext ? text.slice(1).toLowerCase() : "";
-    const atContext = useMemo(() => (isSlashContext ? null : findAtContext(text, cursor)), [text, cursor, isSlashContext]);
+    const atContext = useMemo(() => resolveComposerAtContext(text, cursor, isSlashContext, allowWorkspaceMentions), [allowWorkspaceMentions, text, cursor, isSlashContext]);
     useEffect(() => {
         if (!atContext || projectFiles !== null || loadingFilesRef.current)
             return;
@@ -403,6 +475,8 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
             commands.set(command.name, command);
         }
         for (const command of slashRegistry.list()) {
+            if (allowedSlashCommands && !allowedSlashCommands.has(command.name))
+                continue;
             if (!commands.has(command.name))
                 commands.set(command.name, command);
         }
@@ -411,24 +485,28 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
             name: command.name,
             description: command.description,
         }));
-        const skillSuggestions = (skillRegistry?.summaries() ?? []).map((skill) => ({
+        const skillSuggestions = (allowedSlashCommands ? [] : (skillRegistry?.summaries() ?? [])).map((skill) => ({
             type: "skill",
             name: skill.name,
             description: skill.description,
         }));
         const all = [...commandSuggestions, ...skillSuggestions];
         return all.filter((item) => item.name.toLowerCase().startsWith(slashPrefix));
-    }, [isSlashContext, slashPrefix, skillRegistry, localSlashCommands]);
+    }, [allowedSlashCommands, isSlashContext, slashPrefix, skillRegistry, localSlashCommands]);
     const knownSlashCommandNames = useMemo(() => {
         const names = new Set();
         for (const command of localSlashCommands)
             names.add(command.name);
-        for (const command of slashRegistry.list())
-            names.add(command.name);
-        for (const skill of skillRegistry?.summaries() ?? [])
-            names.add(skill.name);
+        for (const command of slashRegistry.list()) {
+            if (!allowedSlashCommands || allowedSlashCommands.has(command.name))
+                names.add(command.name);
+        }
+        if (!allowedSlashCommands) {
+            for (const skill of skillRegistry?.summaries() ?? [])
+                names.add(skill.name);
+        }
         return names;
-    }, [skillRegistry, localSlashCommands]);
+    }, [allowedSlashCommands, skillRegistry, localSlashCommands]);
     const slashCommandHighlight = useMemo(() => resolveSlashCommandHighlightRange(text, knownSlashCommandNames), [text, knownSlashCommandNames]);
     const fileSuggestions = useMemo(() => {
         if (!atContext || !projectFiles)
@@ -450,14 +528,8 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
     const insertTextAtCursor = React.useCallback((insertion) => {
         if (!insertion)
             return;
-        setText((prev) => {
-            const c = cursor;
-            const before = prev.slice(0, c);
-            const after = prev.slice(c);
-            return before + insertion + after;
-        });
-        setCursor((c) => c + insertion.length);
-    }, [cursor]);
+        updateComposerBuffer((current) => insertComposerText(current, insertion));
+    }, [updateComposerBuffer]);
     const addAttachment = React.useCallback((att) => {
         const base = imageLabelStartOverride ?? nextImageLabelStart;
         const index = attachmentCountRef.current;
@@ -476,8 +548,10 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
     // terminal has nothing textual to deliver. Probe the clipboard; if it yields
     // an image, treat the paste as an image attachment. macOS only — Linux/Win
     // terminals don't reliably emit empty pastes on image-only clipboards.
-    const tryClipboardImage = React.useCallback(async () => {
+    const tryClipboardImage = React.useCallback(async (expectedDraftEpoch) => {
         const { attachment, error } = await ingestClipboardImage();
+        if (draftIdentityEpochRef.current !== expectedDraftEpoch)
+            return false;
         if (attachment) {
             addAttachment(attachment);
             return true;
@@ -488,12 +562,13 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
         return false;
     }, [addAttachment, notice]);
     usePaste((pasted) => {
-        pastePendingRef.current = true;
+        const pasteOperationId = pasteOperationsRef.current.begin();
+        const pasteDraftEpoch = draftIdentityEpochRef.current;
         // Clear the ref after React has committed the paste-driven setState.
         // setTimeout with 0 runs after the current discreteUpdates batch flushes.
         const clearPending = () => {
             setTimeout(() => {
-                pastePendingRef.current = false;
+                pasteOperationsRef.current.finish(pasteOperationId);
             }, 0);
         };
         // Strip orphaned focus-event tails that can appear if focus reporting
@@ -506,10 +581,29 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
             .replace(/\x1b\[I$/, "")
             .replace(/\x1b\[O$/, "")
             .replace(/\r\n?/g, "\n");
+        if (!allowImageAttachments) {
+            // A constrained text-only runtime must not probe the clipboard or read
+            // pasted filesystem paths. Do not leak image path strings as chat text.
+            const containsImagePath = clean.length > 0 && (bareImageFilenameFromPaste(clean) !== null
+                || extractImagePathTokens(clean).length > 0);
+            if (clean.length === 0 || containsImagePath) {
+                notice("image attachments are disabled in this runtime session");
+            }
+            else {
+                if (shouldCollapsePastedContent(clean)) {
+                    updateComposerBuffer((current) => insertComposerPaste(current, clean));
+                }
+                else {
+                    insertTextAtCursor(clean);
+                }
+            }
+            clearPending();
+            return;
+        }
         // Empty paste on macOS usually means "Cmd+V with an image on the clipboard".
         if (clean.length === 0) {
             if (process.platform === "darwin") {
-                void tryClipboardImage().finally(clearPending);
+                void tryClipboardImage(pasteDraftEpoch).finally(clearPending);
             }
             else {
                 clearPending();
@@ -522,10 +616,11 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
         // quietly.
         const bareName = bareImageFilenameFromPaste(clean);
         if (bareName && process.platform === "darwin") {
-            void tryClipboardImage()
+            void tryClipboardImage(pasteDraftEpoch)
                 .then((attached) => {
-                if (!attached)
+                if (draftIdentityEpochRef.current === pasteDraftEpoch && !attached) {
                     insertTextAtCursor(clean);
+                }
             })
                 .finally(clearPending);
             return;
@@ -538,9 +633,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
         if (imageTokens.length === 0) {
             // Plain text paste — insert into the input at the cursor.
             if (shouldCollapsePastedContent(clean)) {
-                const marker = createPastedContentMarker(clean, nextPastedContentIndexRef.current++);
-                setPastedContentRefs((prev) => [...prev, { marker, content: clean }]);
-                insertTextAtCursor(marker);
+                updateComposerBuffer((current) => insertComposerPaste(current, clean));
             }
             else {
                 insertTextAtCursor(clean);
@@ -550,6 +643,8 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
         }
         const handle = async () => {
             const results = await Promise.all(imageTokens.map((t) => ingestImagePath(t)));
+            if (draftIdentityEpochRef.current !== pasteDraftEpoch)
+                return;
             const successful = [];
             const errors = [];
             for (let i = 0; i < results.length; i++) {
@@ -567,10 +662,12 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
             if (successful.length === 0 &&
                 process.platform === "darwin" &&
                 imageTokens.some(isScreenshotTempPath)) {
-                const clipOk = await tryClipboardImage();
+                const clipOk = await tryClipboardImage(pasteDraftEpoch);
                 if (clipOk)
                     return;
             }
+            if (draftIdentityEpochRef.current !== pasteDraftEpoch)
+                return;
             for (const att of successful)
                 addAttachment(att);
             const nonImageLines = tokens.filter((t) => !isImageFilePath(t));
@@ -589,20 +686,16 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
     const applyFileSuggestion = (selectedPath) => {
         if (!atContext)
             return;
-        const before = text.slice(0, atContext.start);
-        const after = text.slice(atContext.end);
         const insert = `@${selectedPath} `;
-        const newText = before + insert + after;
-        setText(newText);
-        setCursor(before.length + insert.length);
+        updateComposerBuffer((current) => replaceComposerRange(current, atContext.start, atContext.end, insert));
         setSelectedIndex(0);
     };
-    const submitInput = (submittedText, target = "submit") => {
+    const submitInput = (submittedBuffer, target = "submit") => {
         const labelStartForSubmit = imageLabelStartOverride ?? nextImageLabelStart;
         const inlineLabels = attachments.map((_, index) => imageDisplayLabel(labelStartForSubmit + index));
         // Text-paste markers expand to their content (not replayable); image labels
         // are a composer-only affordance stripped here (replayable via attachments).
-        const pasteExpanded = expandPastedContentMarkers(submittedText, pastedContentRefs);
+        const pasteExpanded = expandComposerBuffer(submittedBuffer);
         const expandedText = stripInlineImageLabels(pasteExpanded, inlineLabels);
         if (expandedText.trim().length === 0 && attachments.length === 0)
             return;
@@ -626,7 +719,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
         // A collapsed text-paste marker cannot be safely replayed once its
         // in-memory reference is gone; skip those. Image-label stripping is fine to
         // replay (the attachments are stored on the history entry).
-        if (pasteExpanded === submittedText && (expandedText.trim().length > 0 || attachments.length > 0)) {
+        if (!hasActiveComposerPastes(submittedBuffer) && (expandedText.trim().length > 0 || attachments.length > 0)) {
             const historyEntry = {
                 text: expandedText,
                 images: attachments,
@@ -640,26 +733,23 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
                 return nextHistory;
             });
         }
-        setText("");
-        setCursor(0);
+        updateComposerBuffer(() => createComposerBuffer());
         setSelectedIndex(0);
         setAttachments([]);
         attachmentCountRef.current = 0;
         setImageLabelStartOverride(null);
-        setPastedContentRefs([]);
-        nextPastedContentIndexRef.current = 1;
         setHistoryIndex(null);
-        historyDraftRef.current = "";
+        historyDraftRef.current = null;
+        invalidateDraftAsyncWork();
     };
-    const applySlashEnterAction = (submittedText) => {
-        const action = resolveSlashEnterAction(submittedText, slashSuggestions, selectedIndex);
+    const applySlashEnterAction = (submittedBuffer) => {
+        const action = resolveSlashEnterAction(submittedBuffer.text, slashSuggestions, selectedIndex);
         if (action.kind === "submit") {
-            submitInput(submittedText);
+            submitInput(submittedBuffer);
             return true;
         }
         if (action.kind === "complete") {
-            setText(action.text);
-            setCursor(action.text.length);
+            updateComposerBuffer((current) => replaceComposerRange(current, 0, current.text.length, action.text));
             setSelectedIndex(0);
             return true;
         }
@@ -689,18 +779,19 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
             catch { }
         }
         const enterIntent = resolveInkEnterIntent(input, key);
+        if (shouldDeferComposerCommitWhilePastePending(pasteOperationsRef.current.hasPending, enterIntent, key)) {
+            return;
+        }
         if (enterIntent === "newline") {
-            const next = insertNewlineAtCursor(text, cursor);
-            setText(next.text);
-            setCursor(next.cursor);
+            updateComposerBuffer((current) => insertComposerText(current, "\n"));
             setSelectedIndex(0);
             return;
         }
         if (enterIntent === "submit" && input && /[\r\n]/.test(input)) {
             const beforeReturn = input.split(/[\r\n]/)[0] ?? "";
-            const nextText = text.slice(0, cursor) + beforeReturn + text.slice(cursor);
+            const nextBuffer = insertComposerText(composerBufferRef.current, beforeReturn);
             if (showSuggestions) {
-                if (mode === "slash" && navigable && applySlashEnterAction(nextText)) {
+                if (mode === "slash" && navigable && applySlashEnterAction(nextBuffer)) {
                     return;
                 }
                 if (mode === "file") {
@@ -712,7 +803,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
                     return;
                 }
             }
-            submitInput(nextText);
+            submitInput(nextBuffer);
             return;
         }
         const composerArrowDirection = composerVerticalArrowDirection(key);
@@ -733,13 +824,12 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
             if (key.return || key.tab) {
                 if (mode === "slash" && navigable) {
                     if (key.return)
-                        applySlashEnterAction(text);
+                        applySlashEnterAction(composerBufferRef.current);
                     if (key.tab) {
                         const suggestion = slashSuggestions[selectedIndex];
                         if (suggestion) {
                             const newText = `/${suggestion.name} `;
-                            setText(newText);
-                            setCursor(newText.length);
+                            updateComposerBuffer((current) => replaceComposerRange(current, 0, current.text.length, newText));
                             setSelectedIndex(0);
                         }
                     }
@@ -759,55 +849,44 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
         // While the agent runs, Tab queues the composer content for the next
         // turn (Enter steers — handled by the app-level submit routing).
         if (key.tab && !key.shift && onQueue && !showSuggestions) {
-            if (pastePendingRef.current)
-                return;
-            submitInput(text, "queue");
+            submitInput(composerBufferRef.current, "queue");
             return;
         }
         if (enterIntent === "submit") {
             // A paste is still mid-flight — dropping this Enter avoids submitting
             // an input state that doesn't yet include the paste.
-            if (pastePendingRef.current)
-                return;
-            submitInput(text);
+            submitInput(composerBufferRef.current);
             return;
         }
         const editAction = resolveComposerEditAction(input, key);
         if (editAction) {
             if (editAction === "word-left") {
-                setCursor(previousWordBoundary(text, cursor));
+                updateComposerBuffer((current) => moveComposerCursor(current, previousWordBoundary(current.text, current.cursor), "left"));
             }
             else if (editAction === "word-right") {
-                setCursor(nextWordBoundary(text, cursor));
+                updateComposerBuffer((current) => moveComposerCursor(current, nextWordBoundary(current.text, current.cursor), "right"));
             }
             else if (editAction === "line-start") {
-                setCursor(lineStartBoundary(text, cursor));
+                updateComposerBuffer((current) => moveComposerCursor(current, lineStartBoundary(current.text, current.cursor), "left"));
             }
             else if (editAction === "line-end") {
-                setCursor(lineEndBoundary(text, cursor));
+                updateComposerBuffer((current) => moveComposerCursor(current, lineEndBoundary(current.text, current.cursor), "right"));
             }
             else if (editAction === "delete-line-start") {
-                const next = deleteToLineStart(text, cursor);
-                setText(next.text);
-                setCursor(next.cursor);
+                updateComposerBuffer((current) => replaceComposerRange(current, lineStartBoundary(current.text, current.cursor), current.cursor));
             }
             else {
-                const next = deleteToLineEnd(text, cursor);
-                setText(next.text);
-                setCursor(next.cursor);
+                updateComposerBuffer((current) => replaceComposerRange(current, current.cursor, lineEndBoundary(current.text, current.cursor)));
             }
             setSelectedIndex(0);
             return;
         }
         if (key.backspace) {
-            if (cursor > 0) {
-                const before = text.slice(0, cursor - 1);
-                const after = text.slice(cursor);
-                setText(before + after);
-                setCursor(cursor - 1);
+            if (composerBufferRef.current.cursor > 0) {
+                updateComposerBuffer((current) => deleteComposerBackward(current));
                 setSelectedIndex(0);
             }
-            else if (attachments.length > 0) {
+            else if (attachmentCountRef.current > 0) {
                 // Backspace at position 0 drops the most recent attachment so users
                 // can undo a misfired paste without submitting the message.
                 setAttachments((prev) => {
@@ -821,21 +900,17 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
             return;
         }
         if (key.delete) {
-            if (cursor < text.length) {
-                const next = deleteAtCursor(text, cursor);
-                setText(next.text);
-                setCursor(next.cursor);
-                setSelectedIndex(0);
-            }
+            updateComposerBuffer((current) => deleteComposerForward(current));
+            setSelectedIndex(0);
             return;
         }
         if (key.leftArrow) {
-            setCursor(Math.max(0, cursor - 1));
+            updateComposerBuffer((current) => moveComposerCursor(current, current.cursor - 1, "left"));
             setSelectedIndex(0);
             return;
         }
         if (key.rightArrow) {
-            setCursor(Math.min(text.length, cursor + 1));
+            updateComposerBuffer((current) => moveComposerCursor(current, current.cursor + 1, "right"));
             setSelectedIndex(0);
             return;
         }
@@ -854,10 +929,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
             const printable = input.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, "");
             if (!printable)
                 return;
-            const before = text.slice(0, cursor);
-            const after = text.slice(cursor);
-            setText(before + printable + after);
-            setCursor(cursor + printable.length);
+            updateComposerBuffer((current) => insertComposerText(current, printable));
             setSelectedIndex(0);
         }
     });
@@ -895,18 +967,16 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
         if (lastDraftEpochRef.current === draftEpoch)
             return;
         lastDraftEpochRef.current = draftEpoch;
-        if (!draftText)
+        if (draftText === undefined)
             return;
-        setText(draftText);
-        setCursor(draftText.length);
+        updateComposerBuffer(() => createComposerBuffer(draftText));
         setSelectedIndex(0);
         setAttachments([]);
         attachmentCountRef.current = 0;
         setImageLabelStartOverride(null);
-        setPastedContentRefs([]);
-        nextPastedContentIndexRef.current = 1;
         setHistoryIndex(null);
-        historyDraftRef.current = "";
+        historyDraftRef.current = null;
+        invalidateDraftAsyncWork();
         onDraftApplied?.();
     }, [draftEpoch, draftText, onDraftApplied]);
     useEffect(() => {
@@ -961,30 +1031,40 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
     // bottom edge (Down → next message, then back to the in-progress draft).
     const performVerticalArrowRef = useRef(() => { });
     performVerticalArrowRef.current = (direction) => {
+        // A paste and the following key can arrive in one stdin batch. Wait for
+        // that paste transition to commit before moving or snapshotting history.
+        if (pasteOperationsRef.current.hasPending)
+            return;
         if (direction === "up") {
             if (cursorVisualRow > 0) {
-                setCursor(displayCursorToSourceCursor(visualToCursor(visualLines, cursorVisualRow - 1, cursorVisualCol)));
+                const requested = displayCursorToSourceCursor(visualToCursor(visualLines, cursorVisualRow - 1, cursorVisualCol));
+                updateComposerBuffer((current) => moveComposerCursor(current, requested, "nearest"));
                 return;
             }
         }
         else {
             if (cursorVisualRow < visualLines.length - 1) {
-                setCursor(displayCursorToSourceCursor(visualToCursor(visualLines, cursorVisualRow + 1, cursorVisualCol)));
+                const requested = displayCursorToSourceCursor(visualToCursor(visualLines, cursorVisualRow + 1, cursorVisualCol));
+                updateComposerBuffer((current) => moveComposerCursor(current, requested, "nearest"));
                 return;
             }
         }
-        const result = stepHistory({ history, index: historyIndex, draft: historyDraftRef.current }, direction, { text, images: attachments });
+        const result = stepComposerHistory({
+            buffer: composerBufferRef.current,
+            attachments,
+            imageLabelStartOverride,
+            historyIndex,
+            draftSnapshot: historyDraftRef.current,
+        }, history, direction);
         if (result.changed) {
-            setText(result.text);
-            setCursor(result.text.length);
-            setAttachments(result.images ?? []);
-            attachmentCountRef.current = (result.images ?? []).length;
-            setImageLabelStartOverride(result.imageDisplayStart ?? null);
-            setHistoryIndex(result.index);
-            historyDraftRef.current = result.draft;
+            updateComposerBuffer(() => result.buffer);
+            setAttachments(result.attachments);
+            attachmentCountRef.current = result.attachments.length;
+            setImageLabelStartOverride(result.imageLabelStartOverride);
+            setHistoryIndex(result.historyIndex);
+            historyDraftRef.current = result.draftSnapshot;
             setSelectedIndex(0);
-            setPastedContentRefs([]);
-            nextPastedContentIndexRef.current = 1;
+            invalidateDraftAsyncWork();
         }
         else if (direction === "down") {
             // At the bottom edge with nothing newer in history: hand Down to the
@@ -995,8 +1075,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
     const classifyVerticalArrow = (direction) => {
         performVerticalArrowRef.current(direction);
     };
-    const lineFrame = shouldUseLineComposerFrame(theme.background);
-    const minVisibleLines = lineFrame ? 1 : MIN_VISIBLE_LINES;
+    const minVisibleLines = 1;
     const totalLines = Math.max(visualLines.length, 1);
     const visibleLines = Math.min(Math.max(totalLines, minVisibleLines), MAX_VISIBLE_LINES);
     let scrollOffset = 0;
@@ -1130,25 +1209,18 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
     });
     // Reference cursorTick so the effect re-runs on the forced render pass.
     void cursorTick;
-    const inputBg = disabled ? theme.inputBgDisabled : theme.inputBg;
-    const composerBg = composerSurfaceBackground(lineFrame, theme.background, inputBg);
-    const rowBg = lineFrame ? undefined : inputBg;
-    const cursorFg = lineFrame ? theme.background : inputBg;
     const cursorCellStyle = resolveSoftwareCursorCellStyle({
         visible: softwareCursorVisible,
-        cursorBackground: theme.inputText,
-        cursorForeground: cursorFg,
         textColor: theme.inputText,
-        rowBackground: rowBg,
     });
     const moreBelow = totalLines - scrollOffset - visibleLines;
     const filledLine = (value) => {
         const visibleWidth = visualWidth(value);
         return value + " ".repeat(Math.max(0, contentWidth - visibleWidth));
     };
-    return (_jsxs(Box, { flexDirection: "column", width: width, backgroundColor: theme.background, children: [lineFrame && (_jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) })), _jsxs(Box, { flexDirection: "column", paddingX: PADDING_X, width: width, backgroundColor: composerBg, children: [hasMoreAbove && (_jsx(Text, { backgroundColor: rowBg, color: theme.muted, dimColor: true, children: filledLine(` ↑ ${scrollOffset} more`) })), displayedLines.map((row) => {
+    return (_jsxs(Box, { flexDirection: "column", width: width, backgroundColor: theme.background, children: [_jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) }), _jsxs(Box, { flexDirection: "column", paddingX: PADDING_X, width: width, backgroundColor: theme.background, children: [hasMoreAbove && (_jsx(Text, { color: theme.muted, dimColor: true, children: filledLine(` ↑ ${scrollOffset} more`) })), displayedLines.map((row) => {
                         if (row.kind === "pad") {
-                            return (_jsx(Text, { backgroundColor: rowBg, children: " ".repeat(contentWidth) }, row.key));
+                            return (_jsx(Text, { children: " ".repeat(contentWidth) }, row.key));
                         }
                         const { text: line, visualIdx } = row;
                         const visualLine = visualLines[visualIdx];
@@ -1167,17 +1239,17 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
                         });
                         const renderedLine = renderedSegments.map((segment) => segment.text).join("");
                         const fill = " ".repeat(Math.max(0, lineWidth - visualWidth(renderedLine)));
-                        return (_jsxs(Box, { height: 1, overflow: "hidden", backgroundColor: composerBg, ref: isCursorLine
+                        return (_jsxs(Box, { height: 1, overflow: "hidden", backgroundColor: theme.background, ref: isCursorLine
                                 ? (el) => {
                                     cursorLineRef.current = el;
                                 }
-                                : undefined, children: [_jsx(Text, { backgroundColor: rowBg, color: isFirst ? theme.accent : theme.inputText, children: prompt }), renderedSegments.map((segment, index) => {
+                                : undefined, children: [_jsx(Text, { color: isFirst ? theme.accent : theme.inputText, children: prompt }), renderedSegments.map((segment, index) => {
                                     if (segment.kind === "cursor") {
-                                        return (_jsx(Text, { backgroundColor: cursorCellStyle.backgroundColor, color: cursorCellStyle.color, children: segment.text }, index));
+                                        return (_jsx(Text, { inverse: cursorCellStyle.inverse, color: cursorCellStyle.color, children: segment.text }, index));
                                     }
-                                    return (_jsx(Text, { backgroundColor: rowBg, color: segment.kind === "command" ? theme.accent : theme.inputText, bold: segment.kind === "command", children: segment.text }, index));
-                                }), _jsx(Text, { backgroundColor: rowBg, children: fill })] }, visualIdx));
-                    }), hasMoreBelow && (_jsx(Text, { backgroundColor: rowBg, color: theme.muted, dimColor: true, children: filledLine(` ↓ ${moreBelow} more`) }))] }), lineFrame && (_jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) })), showSuggestions && mode === "slash" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 4, children: [slashSuggestions
+                                    return (_jsx(Text, { color: segment.kind === "command" ? theme.accent : theme.inputText, bold: segment.kind === "command", children: segment.text }, index));
+                                }), _jsx(Text, { children: fill })] }, visualIdx));
+                    }), hasMoreBelow && (_jsx(Text, { color: theme.muted, dimColor: true, children: filledLine(` ↓ ${moreBelow} more`) }))] }), _jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) }), showSuggestions && mode === "slash" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 4, children: [slashSuggestions
                         .slice(suggestionOffset, suggestionOffset + MAX_VISIBLE_SUGGESTIONS)
                         .map((cmd, visibleIndex) => {
                         const i = suggestionOffset + visibleIndex;
@@ -1190,6 +1262,6 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
                         const i = suggestionOffset + visibleIndex;
                         const maxWidth = Math.max(10, Math.min(80, contentWidth - 2));
                         const label = s.path.length > maxWidth ? "…" + s.path.slice(-(maxWidth - 1)) : s.path;
-                        return (_jsx(Box, { height: 1, children: i === selectedIndex ? (_jsx(Text, { backgroundColor: "white", color: "black", children: ` ${label} ` })) : (_jsx(Text, { children: `  ${label}` })) }, s.path));
+                        return (_jsx(Box, { height: 1, children: i === selectedIndex ? (_jsx(Text, { color: theme.accent, bold: true, children: `› ${label}` })) : (_jsx(Text, { children: `  ${label}` })) }, s.path));
                     }), fileSuggestions.length > MAX_VISIBLE_SUGGESTIONS && (_jsx(Text, { color: theme.muted, children: `Showing ${suggestionOffset + 1}-${Math.min(suggestionOffset + MAX_VISIBLE_SUGGESTIONS, fileSuggestions.length)} of ${fileSuggestions.length}` }))] }))] }));
 }