@bubblebrain-ai/bubble 0.0.24 → 0.0.26

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useCursor, useInput, usePaste, useStdout } from "ink";
 import stringWidth from "string-width";
@@ -7,10 +7,13 @@ 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 { appendHistoryEntry, loadHistorySync, pushHistoryEntry, stepHistory, } from "./input-history.js";
+import { appendHistoryEntry, loadHistoryEntriesSync, pushHistoryEntry, stepHistory, } from "./input-history.js";
+import { isKeyReleaseEvent } from "./key-events.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 { imageDisplayLabel } from "../tui/image-display.js";
 const MIN_VISIBLE_LINES = 3;
 const MAX_VISIBLE_LINES = 6;
 const PADDING_X = 1;
@@ -37,15 +40,43 @@ export function resolveCursorRowCompensation(input) {
 export function isCtrlCInput(input, key) {
     return input === "\x03" || (key.ctrl === true && input.toLowerCase() === "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";
+}
+export function composerVerticalArrowDirection(key) {
+    if (key.upArrow)
+        return "up";
+    if (key.downArrow)
+        return "down";
+    return undefined;
+}
+export function resolveSoftwareCursorCellStyle(input) {
+    if (input.visible) {
+        return {
+            backgroundColor: input.cursorBackground,
+            color: input.cursorForeground,
+        };
+    }
+    return {
+        backgroundColor: input.rowBackground,
+        color: input.textColor,
+    };
+}
 /**
  * Split a composer line around the cursor so the cell under it can render as
  * an inverse-video software cursor. The visible cursor must not depend on the
  * real terminal cursor: Ink only re-arms its one-shot cursor escape when the
  * component owning useCursor re-commits, so frames produced by other
  * components' local state (the waiting spinner, viewport scrolling) hide the
- * hardware cursor for most of an agent run. Drawing the cell ourselves keeps
- * the cursor visible on every frame; the real (mostly hidden) cursor is still
- * positioned for IME anchoring.
+ * hardware cursor for most of an agent run. Drawing and blinking the cell
+ * ourselves keeps it visible while preserving normal typing feedback; the real
+ * cursor is still positioned for IME anchoring.
  */
 export function splitLineAtCursor(lineText, charOffset) {
     const offset = Math.max(0, Math.min(charOffset, lineText.length));
@@ -132,6 +163,52 @@ function visualToCursor(visualLines, row, col) {
     }
     return vl.absStart + charOffset;
 }
+export function resolveSlashCommandHighlightRange(input, commandNames) {
+    if (!input.startsWith("/"))
+        return null;
+    const match = /^\/([^\s]+)/.exec(input);
+    if (!match)
+        return null;
+    const commandName = match[1]?.toLowerCase();
+    if (!commandName)
+        return null;
+    for (const name of commandNames) {
+        if (name.toLowerCase() === commandName) {
+            return { start: 0, end: match[0].length };
+        }
+    }
+    return null;
+}
+function splitHighlightedText(text, absStart, highlight) {
+    if (!text)
+        return [];
+    if (!highlight)
+        return [{ kind: "normal", text }];
+    const start = Math.max(0, highlight.start - absStart);
+    const end = Math.min(text.length, highlight.end - absStart);
+    if (start >= end)
+        return [{ kind: "normal", text }];
+    const segments = [];
+    if (start > 0)
+        segments.push({ kind: "normal", text: text.slice(0, start) });
+    segments.push({ kind: "command", text: text.slice(start, end) });
+    if (end < text.length)
+        segments.push({ kind: "normal", text: text.slice(end) });
+    return segments;
+}
+export function splitComposerTextSegments(input) {
+    if (input.cursorOffset === undefined) {
+        return splitHighlightedText(input.text, input.absStart, input.highlight);
+    }
+    const cursorOffset = Math.max(0, Math.min(input.text.length, input.cursorOffset));
+    const cursorSegments = splitLineAtCursor(input.text, cursorOffset);
+    const cursorConsumesSource = cursorOffset < input.text.length;
+    return [
+        ...splitHighlightedText(cursorSegments.before, input.absStart, input.highlight),
+        { kind: "cursor", text: cursorSegments.at },
+        ...splitHighlightedText(cursorSegments.after, input.absStart + cursorOffset + (cursorConsumesSource ? cursorSegments.at.length : 0), input.highlight),
+    ];
+}
 export function shouldSubmitExactSlashSuggestion(input, suggestionName) {
     if (!suggestionName)
         return false;
@@ -171,18 +248,101 @@ export function insertNewlineAtCursor(text, cursor) {
         cursor: clampedCursor + 1,
     };
 }
-export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disabled, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, terminalColumns, cwd, }) {
+export function previousWordBoundary(text, cursor) {
+    const clampedCursor = Math.max(0, Math.min(text.length, cursor));
+    if (clampedCursor === 0)
+        return 0;
+    let index = clampedCursor - 1;
+    while (index > 0 && /\s/.test(text[index]))
+        index--;
+    while (index > 0 && !/\s/.test(text[index - 1]))
+        index--;
+    return index;
+}
+export function nextWordBoundary(text, cursor) {
+    const clampedCursor = Math.max(0, Math.min(text.length, cursor));
+    if (clampedCursor === text.length)
+        return text.length;
+    let index = clampedCursor;
+    while (index < text.length && /\s/.test(text[index]))
+        index++;
+    while (index < text.length && !/\s/.test(text[index]))
+        index++;
+    return index;
+}
+export function lineStartBoundary(text, cursor) {
+    const clampedCursor = Math.max(0, Math.min(text.length, cursor));
+    return text.lastIndexOf("\n", clampedCursor - 1) + 1;
+}
+export function lineEndBoundary(text, cursor) {
+    const clampedCursor = Math.max(0, Math.min(text.length, cursor));
+    const lineEnd = text.indexOf("\n", clampedCursor);
+    return lineEnd === -1 ? text.length : lineEnd;
+}
+export function deleteToLineStart(text, cursor) {
+    const clampedCursor = Math.max(0, Math.min(text.length, cursor));
+    const lineStart = lineStartBoundary(text, clampedCursor);
+    return {
+        text: text.slice(0, lineStart) + text.slice(clampedCursor),
+        cursor: lineStart,
+    };
+}
+export function deleteToLineEnd(text, cursor) {
+    const clampedCursor = Math.max(0, Math.min(text.length, cursor));
+    const lineEnd = lineEndBoundary(text, clampedCursor);
+    return {
+        text: text.slice(0, clampedCursor) + text.slice(lineEnd),
+        cursor: clampedCursor,
+    };
+}
+export function deleteAtCursor(text, cursor) {
+    const clampedCursor = Math.max(0, Math.min(text.length, cursor));
+    if (clampedCursor >= text.length)
+        return { text, cursor: clampedCursor };
+    return {
+        text: text.slice(0, clampedCursor) + text.slice(clampedCursor + 1),
+        cursor: clampedCursor,
+    };
+}
+export function resolveComposerEditAction(input, key) {
+    if (key.home)
+        return "line-start";
+    if (key.end)
+        return "line-end";
+    const wordModifier = key.ctrl || key.meta;
+    if (wordModifier && key.leftArrow)
+        return "word-left";
+    if (wordModifier && key.rightArrow)
+        return "word-right";
+    const lowerInput = input.toLowerCase();
+    if ((key.ctrl && lowerInput === "a") || input === "\x01")
+        return "line-start";
+    if ((key.ctrl && lowerInput === "e") || input === "\x05")
+        return "line-end";
+    if ((key.ctrl && lowerInput === "u") || input === "\x15")
+        return "delete-line-start";
+    if ((key.ctrl && lowerInput === "k") || input === "\x0b")
+        return "delete-line-end";
+    return null;
+}
+export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, cursorResetEpoch = 0, draftText, draftEpoch = 0, onDraftApplied, skillRegistry, localSlashCommands = [], 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 [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(() => loadHistorySync());
+    const [history, setHistory] = useState(() => loadHistoryEntriesSync({ scope: historyScope }));
     const [historyIndex, setHistoryIndex] = useState(null);
     const historyDraftRef = useRef("");
+    const historyScopeRef = useRef(historyScope);
+    const submittedPayloadFingerprintRef = useRef(null);
     const loadingFilesRef = useRef(false);
     const nextPastedContentIndexRef = useRef(1);
     // Paste and the keystrokes that follow can arrive inside the same stdin chunk
@@ -192,6 +352,16 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
     // 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 ensureImageLabelStart = React.useCallback(() => {
+        setImageLabelStartOverride((current) => current ?? nextImageLabelStart);
+    }, [nextImageLabelStart]);
+    useEffect(() => {
+        setHistory(loadHistoryEntriesSync({ scope: historyScope }));
+        setHistoryIndex(null);
+        setImageLabelStartOverride(null);
+        historyDraftRef.current = "";
+    }, [historyScope]);
     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]);
@@ -201,23 +371,31 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
         loadingFilesRef.current = true;
         listProjectFiles(cwd).then((files) => setProjectFiles(files), () => setProjectFiles([]));
     }, [atContext, cwd, projectFiles]);
-    // Request a steady (non-blinking) block cursor via DECSCUSR while this
-    // component is mounted. Terminals default to a blinking cursor, which is
-    // distracting in an input that you'd glance away from. Restore the
-    // terminal default on unmount so the user's shell isn't left with our
-    // choice sticking around.
+    // The rendered inverse-video cell below is the visible cursor. Keep Ink's
+    // terminal cursor hidden by default so it can't race the software cursor; the
+    // hardware cursor can be enabled for IME diagnostics with BUBBLE_HARDWARE_CURSOR=1.
     useEffect(() => {
+        if (!hardwareCursorEnabled)
+            return;
         if (!process.stdout.isTTY)
             return;
-        process.stdout.write("\x1b[2 q"); // steady block
+        process.stdout.write("\x1b[1 q"); // blinking block
         return () => {
             process.stdout.write("\x1b[0 q"); // reset to terminal default
         };
-    }, []);
+    }, [hardwareCursorEnabled]);
     const slashSuggestions = useMemo(() => {
         if (!isSlashContext)
             return [];
-        const commandSuggestions = slashRegistry.list().map((command) => ({
+        const commands = new Map();
+        for (const command of localSlashCommands) {
+            commands.set(command.name, command);
+        }
+        for (const command of slashRegistry.list()) {
+            if (!commands.has(command.name))
+                commands.set(command.name, command);
+        }
+        const commandSuggestions = [...commands.values()].map((command) => ({
             type: "command",
             name: command.name,
             description: command.description,
@@ -229,7 +407,18 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
         }));
         const all = [...commandSuggestions, ...skillSuggestions];
         return all.filter((item) => item.name.toLowerCase().startsWith(slashPrefix));
-    }, [isSlashContext, slashPrefix, skillRegistry]);
+    }, [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);
+        return names;
+    }, [skillRegistry, localSlashCommands]);
+    const slashCommandHighlight = useMemo(() => resolveSlashCommandHighlightRange(text, knownSlashCommandNames), [text, knownSlashCommandNames]);
     const fileSuggestions = useMemo(() => {
         if (!atContext || !projectFiles)
             return [];
@@ -259,8 +448,9 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
         setCursor((c) => c + insertion.length);
     }, [cursor]);
     const addAttachment = React.useCallback((att) => {
+        ensureImageLabelStart();
         setAttachments((prev) => [...prev, att]);
-    }, []);
+    }, [ensureImageLabelStart]);
     const notice = React.useCallback((msg) => {
         onPasteNotice?.(msg);
     }, [onPasteNotice]);
@@ -394,24 +584,38 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
         if (expandedText.trim().length === 0 && attachments.length === 0)
             return;
         const deliver = target === "queue" && onQueue ? onQueue : onSubmit;
-        deliver({
+        const payload = {
             text: expandedText,
             displayText: expandedText === submittedText ? undefined : submittedText,
             images: attachments,
-        });
+            imageDisplayStart: attachments.length > 0 ? (imageLabelStartOverride ?? nextImageLabelStart) : undefined,
+        };
+        const fingerprint = submitPayloadFingerprint(payload);
+        if (submittedPayloadFingerprintRef.current === fingerprint)
+            return;
+        submittedPayloadFingerprintRef.current = fingerprint;
+        deliver(payload);
         // 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(expandedText);
-            }
+        if (expandedText === submittedText && (expandedText.trim().length > 0 || attachments.length > 0)) {
+            const historyEntry = {
+                text: expandedText,
+                images: attachments,
+                ...(attachments.length > 0 ? { imageDisplayStart: imageLabelStartOverride ?? nextImageLabelStart } : {}),
+            };
+            setHistory((current) => {
+                const nextHistory = pushHistoryEntry(current, historyEntry);
+                if (nextHistory !== current) {
+                    appendHistoryEntry(historyEntry, { scope: historyScopeRef.current });
+                }
+                return nextHistory;
+            });
         }
         setText("");
         setCursor(0);
         setSelectedIndex(0);
         setAttachments([]);
+        setImageLabelStartOverride(null);
         setPastedContentRefs([]);
         nextPastedContentIndexRef.current = 1;
         setHistoryIndex(null);
@@ -432,6 +636,8 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
         return false;
     };
     useInput((input, key) => {
+        if (isKeyReleaseEvent(key))
+            return;
         const strippedInput = stripTerminalMouseSequences(input);
         if (strippedInput !== input && !strippedInput) {
             return;
@@ -479,13 +685,14 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
             submitInput(nextText);
             return;
         }
+        const composerArrowDirection = composerVerticalArrowDirection(key);
         // Autocomplete navigation
         if (showSuggestions) {
-            if (navigable && key.upArrow) {
+            if (navigable && composerArrowDirection === "up") {
                 setSelectedIndex((i) => (i - 1 + activeCount) % activeCount);
                 return;
             }
-            if (navigable && key.downArrow) {
+            if (navigable && composerArrowDirection === "down") {
                 setSelectedIndex((i) => (i + 1) % activeCount);
                 return;
             }
@@ -535,7 +742,34 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
             submitInput(text);
             return;
         }
-        if (key.backspace || key.delete) {
+        const editAction = resolveComposerEditAction(input, key);
+        if (editAction) {
+            if (editAction === "word-left") {
+                setCursor(previousWordBoundary(text, cursor));
+            }
+            else if (editAction === "word-right") {
+                setCursor(nextWordBoundary(text, cursor));
+            }
+            else if (editAction === "line-start") {
+                setCursor(lineStartBoundary(text, cursor));
+            }
+            else if (editAction === "line-end") {
+                setCursor(lineEndBoundary(text, cursor));
+            }
+            else if (editAction === "delete-line-start") {
+                const next = deleteToLineStart(text, cursor);
+                setText(next.text);
+                setCursor(next.cursor);
+            }
+            else {
+                const next = deleteToLineEnd(text, cursor);
+                setText(next.text);
+                setCursor(next.cursor);
+            }
+            setSelectedIndex(0);
+            return;
+        }
+        if (key.backspace) {
             if (cursor > 0) {
                 const before = text.slice(0, cursor - 1);
                 const after = text.slice(cursor);
@@ -546,7 +780,21 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
             else if (attachments.length > 0) {
                 // Backspace at position 0 drops the most recent attachment so users
                 // can undo a misfired paste without submitting the message.
-                setAttachments((prev) => prev.slice(0, -1));
+                setAttachments((prev) => {
+                    const next = prev.slice(0, -1);
+                    if (next.length === 0)
+                        setImageLabelStartOverride(null);
+                    return next;
+                });
+            }
+            return;
+        }
+        if (key.delete) {
+            if (cursor < text.length) {
+                const next = deleteAtCursor(text, cursor);
+                setText(next.text);
+                setCursor(next.cursor);
+                setSelectedIndex(0);
             }
             return;
         }
@@ -561,7 +809,9 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
             return;
         }
         if (key.upArrow || key.downArrow) {
-            classifyVerticalArrow(key.upArrow ? "up" : "down", key.eventType);
+            if (composerArrowDirection) {
+                classifyVerticalArrow(composerArrowDirection);
+            }
             return;
         }
         // Ctrl/meta chords are app-level shortcuts (Ctrl+S selection mode,
@@ -619,12 +869,19 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
         setText(draftText);
         setCursor(draftText.length);
         setSelectedIndex(0);
+        setAttachments([]);
+        setImageLabelStartOverride(null);
         setPastedContentRefs([]);
         nextPastedContentIndexRef.current = 1;
         setHistoryIndex(null);
         historyDraftRef.current = "";
         onDraftApplied?.();
     }, [draftEpoch, draftText, onDraftApplied]);
+    useEffect(() => {
+        if (text || attachments.length > 0) {
+            submittedPayloadFingerprintRef.current = null;
+        }
+    }, [text, attachments.length]);
     // 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
@@ -642,40 +899,50 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
     }, [width]);
     const contentWidth = Math.max(1, width - PADDING_X * 2);
     const lineWidth = Math.max(1, contentWidth - PROMPT.length);
-    const visualLines = useMemo(() => computeVisualLines(text, lineWidth), [text, lineWidth]);
-    const { row: cursorVisualRow, col: cursorVisualCol } = cursorToVisual(visualLines, cursor);
-    // ---- Wheel-vs-keyboard classification for Up/Down arrows ----
+    const imageLabelStart = imageLabelStartOverride ?? nextImageLabelStart;
+    const attachmentLabels = useMemo(() => attachments.map((_, index) => imageDisplayLabel(imageLabelStart + index)), [attachments, imageLabelStart]);
+    const imageInlinePrefix = attachmentLabels.length > 0 ? `${attachmentLabels.join(" ")} ` : "";
+    const displayText = imageInlinePrefix + text;
+    const displayCursor = cursor + imageInlinePrefix.length;
+    const displayCursorToSourceCursor = (value) => Math.max(0, Math.min(text.length, value - imageInlinePrefix.length));
+    // Steady (non-blinking) cursor on purpose. The composer lives in the live
+    // (repainting) region; a blink timer would rewrite these rows ~twice a second
+    // even at idle, and the terminal drops any in-progress text selection every
+    // time the underlying cells are rewritten — which is why composer text could
+    // not be highlighted/copied while agent answers (committed to <Static>, never
+    // repainted) could. Keeping the cursor steady leaves the idle composer frame
+    // static, so native selection works. We still hide it while disabled.
+    useEffect(() => {
+        setSoftwareCursorVisible(!disabled);
+    }, [disabled]);
+    const visualLines = useMemo(() => computeVisualLines(displayText, lineWidth), [displayText, lineWidth]);
+    const { row: cursorVisualRow, col: cursorVisualCol } = cursorToVisual(visualLines, displayCursor);
+    // ---- Up/Down arrow handling in the composer ----
     //
-    // With mouse reporting off (so native drag-select/copy works), terminals
-    // translate the wheel into Up/Down arrow keys while in the alternate
-    // screen. Those synthetic arrows must scroll the transcript, not move the
-    // composer cursor or browse history. Three signals, in priority order:
-    //   1. kitty keyboard protocol: real key presses carry `eventType`;
-    //      synthetic wheel arrows are bare legacy sequences. Once one enhanced
-    //      arrow is seen, bare arrows are classified as wheel with no delay.
-    //   2. burst heuristic (non-kitty terminals): a wheel notch delivers
-    //      several arrows within a few ms; a keypress delivers one. The first
-    //      arrow is briefly deferred to see whether siblings follow.
-    //   3. wheel session: shortly after a wheel burst, single arrows continue
-    //      to scroll, so slow trackpad scrolling doesn't fall back to history.
+    // Scrolling is the terminal's job now (native scrollback), so the composer
+    // owns Up/Down unconditionally: move within multiline input first, then
+    // browse prompt history at the top edge (Up → previous sent message) or the
+    // bottom edge (Down → next message, then back to the in-progress draft).
     const performVerticalArrowRef = useRef(() => { });
     performVerticalArrowRef.current = (direction) => {
         if (direction === "up") {
             if (cursorVisualRow > 0) {
-                setCursor(visualToCursor(visualLines, cursorVisualRow - 1, cursorVisualCol));
+                setCursor(displayCursorToSourceCursor(visualToCursor(visualLines, cursorVisualRow - 1, cursorVisualCol)));
                 return;
             }
         }
         else {
             if (cursorVisualRow < visualLines.length - 1) {
-                setCursor(visualToCursor(visualLines, cursorVisualRow + 1, cursorVisualCol));
+                setCursor(displayCursorToSourceCursor(visualToCursor(visualLines, cursorVisualRow + 1, cursorVisualCol)));
                 return;
             }
         }
-        const result = stepHistory({ history, index: historyIndex, draft: historyDraftRef.current }, direction, text);
+        const result = stepHistory({ history, index: historyIndex, draft: historyDraftRef.current }, direction, { text, images: attachments });
         if (result.changed) {
             setText(result.text);
             setCursor(result.text.length);
+            setAttachments(result.images ?? []);
+            setImageLabelStartOverride(result.imageDisplayStart ?? null);
             setHistoryIndex(result.index);
             historyDraftRef.current = result.draft;
             setSelectedIndex(0);
@@ -683,66 +950,13 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
             nextPastedContentIndexRef.current = 1;
         }
     };
-    const kittyArrowsSeenRef = useRef(false);
-    const arrowBurstRef = useRef(null);
-    const lastWheelFlushRef = useRef(0);
-    const ARROW_BURST_WINDOW_MS = 20;
-    const WHEEL_SESSION_MS = 300;
-    const flushArrowBurst = (burst) => {
-        if (burst.count > 1 && onWheelScroll) {
-            lastWheelFlushRef.current = Date.now();
-            onWheelScroll(burst.direction, burst.count);
-        }
-        else {
-            performVerticalArrowRef.current(burst.direction);
-        }
-    };
-    const classifyVerticalArrow = (direction, eventType) => {
-        if (eventType) {
-            kittyArrowsSeenRef.current = true;
-            performVerticalArrowRef.current(direction);
-            return;
-        }
-        if (!onWheelScroll) {
-            performVerticalArrowRef.current(direction);
-            return;
-        }
-        if (kittyArrowsSeenRef.current) {
-            lastWheelFlushRef.current = Date.now();
-            onWheelScroll(direction, 1);
-            return;
-        }
-        const pending = arrowBurstRef.current;
-        if (pending) {
-            if (pending.direction === direction) {
-                pending.count += 1;
-                return;
-            }
-            clearTimeout(pending.timer);
-            arrowBurstRef.current = null;
-            flushArrowBurst(pending);
-        }
-        if (Date.now() - lastWheelFlushRef.current < WHEEL_SESSION_MS) {
-            lastWheelFlushRef.current = Date.now();
-            onWheelScroll(direction, 1);
-            return;
-        }
-        const burst = {
-            direction,
-            count: 1,
-            timer: setTimeout(() => {
-                arrowBurstRef.current = null;
-                flushArrowBurst(burst);
-            }, ARROW_BURST_WINDOW_MS),
-        };
-        arrowBurstRef.current = burst;
+    const classifyVerticalArrow = (direction) => {
+        performVerticalArrowRef.current(direction);
     };
-    useEffect(() => () => {
-        if (arrowBurstRef.current)
-            clearTimeout(arrowBurstRef.current.timer);
-    }, []);
+    const lineFrame = shouldUseLineComposerFrame(theme.background);
+    const minVisibleLines = lineFrame ? 1 : MIN_VISIBLE_LINES;
     const totalLines = Math.max(visualLines.length, 1);
-    const visibleLines = Math.min(Math.max(totalLines, MIN_VISIBLE_LINES), MAX_VISIBLE_LINES);
+    const visibleLines = Math.min(Math.max(totalLines, minVisibleLines), MAX_VISIBLE_LINES);
     let scrollOffset = 0;
     if (totalLines > visibleLines) {
         scrollOffset = Math.min(Math.max(cursorVisualRow - Math.floor(visibleLines / 2), 0), totalLines - visibleLines);
@@ -772,6 +986,7 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
     const inputFrameSignature = [
         disabled ? "disabled" : "active",
         text,
+        imageInlinePrefix,
         scrollOffset.toString(),
         visibleLines.toString(),
         attachments.map((att) => `${att.filename ?? "clipboard"}:${att.bytes}`).join(","),
@@ -791,6 +1006,13 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
     // flicker every time streaming output above it re-lays out the frame, so
     // we hide it entirely until input is active again.
     useLayoutEffect(() => {
+        if (!hardwareCursorEnabled) {
+            if (lastCursorRef.current !== null) {
+                lastCursorRef.current = null;
+            }
+            setCursorPosition(undefined);
+            return;
+        }
         let node = cursorLineRef.current ?? undefined;
         if (!node?.yogaNode) {
             if (disabled && lastCursorRef.current !== null) {
@@ -867,37 +1089,53 @@ export function InputBox({ onSubmit, onQueue, onWheelScroll, onPasteNotice, disa
     // 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 = stringWidth(value);
         return value + " ".repeat(Math.max(0, contentWidth - visibleWidth));
     };
-    return (_jsxs(Box, { flexDirection: "column", children: [attachments.length > 0 && (_jsx(Box, { flexDirection: "row", flexWrap: "wrap", paddingX: PADDING_X, marginBottom: 0, children: attachments.map((att, i) => {
-                    const label = att.filename || "clipboard";
-                    const kb = Math.max(1, Math.round(att.bytes / 1024));
-                    return (_jsx(Box, { marginRight: 1, children: _jsx(Text, { color: theme.accent, children: `[img${attachments.length > 1 ? ` ${i + 1}` : ""}: ${label} · ${kb}KB]` }) }, i));
-                }) })), _jsxs(Box, { flexDirection: "column", paddingX: PADDING_X, children: [hasMoreAbove && (_jsx(Text, { backgroundColor: inputBg, color: theme.muted, dimColor: true, children: filledLine(` ↑ ${scrollOffset} more`) })), displayedLines.map((row) => {
+    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) => {
                         if (row.kind === "pad") {
-                            return (_jsx(Text, { backgroundColor: inputBg, children: " ".repeat(contentWidth) }, row.key));
+                            return (_jsx(Text, { backgroundColor: rowBg, children: " ".repeat(contentWidth) }, row.key));
                         }
                         const { text: line, visualIdx } = row;
+                        const visualLine = visualLines[visualIdx];
                         const lineText = line.length === 0 ? " " : line;
                         const isFirst = visualIdx === 0;
                         const isCursorLine = visualIdx === cursorVisualRow;
                         const prompt = isFirst ? PROMPT : " ".repeat(PROMPT.length);
-                        const cursorSegments = isCursorLine && !disabled
-                            ? splitLineAtCursor(lineText, cursor - (visualLines[cursorVisualRow]?.absStart ?? 0))
-                            : null;
-                        const renderedLine = cursorSegments
-                            ? cursorSegments.before + cursorSegments.at + cursorSegments.after
-                            : lineText;
+                        const highlight = imageInlinePrefix ? null : slashCommandHighlight;
+                        const renderedSegments = splitComposerTextSegments({
+                            text: lineText,
+                            absStart: visualLine?.absStart ?? 0,
+                            highlight,
+                            cursorOffset: isCursorLine && !disabled
+                                ? displayCursor - (visualLines[cursorVisualRow]?.absStart ?? 0)
+                                : undefined,
+                        });
+                        const renderedLine = renderedSegments.map((segment) => segment.text).join("");
                         const fill = " ".repeat(Math.max(0, lineWidth - stringWidth(renderedLine)));
-                        return (_jsxs(Box, { height: 1, overflow: "hidden", ref: isCursorLine
+                        return (_jsxs(Box, { height: 1, overflow: "hidden", backgroundColor: composerBg, ref: isCursorLine
                                 ? (el) => {
                                     cursorLineRef.current = el;
                                 }
-                                : undefined, children: [_jsx(Text, { backgroundColor: inputBg, color: isFirst ? theme.accent : theme.inputText, children: prompt }), cursorSegments ? (_jsxs(_Fragment, { children: [cursorSegments.before && (_jsx(Text, { backgroundColor: inputBg, color: theme.inputText, children: cursorSegments.before })), _jsx(Text, { backgroundColor: theme.inputText, color: inputBg, children: cursorSegments.at }), cursorSegments.after && (_jsx(Text, { backgroundColor: inputBg, color: theme.inputText, children: cursorSegments.after }))] })) : (_jsx(Text, { backgroundColor: inputBg, color: theme.inputText, children: lineText })), _jsx(Text, { backgroundColor: inputBg, children: fill })] }, visualIdx));
-                    }), hasMoreBelow && (_jsx(Text, { backgroundColor: inputBg, color: theme.muted, dimColor: true, children: filledLine(` ↓ ${moreBelow} more`) }))] }), showSuggestions && mode === "slash" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 4, children: [slashSuggestions
+                                : undefined, children: [_jsx(Text, { backgroundColor: rowBg, 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, { 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
                         .slice(suggestionOffset, suggestionOffset + MAX_VISIBLE_SUGGESTIONS)
                         .map((cmd, visibleIndex) => {
                         const i = suggestionOffset + visibleIndex;