@bubblebrain-ai/bubble 0.0.7 → 0.0.9

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

@@ -0,0 +1,694 @@
+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";
+import { appendFileSync } from "node:fs";
+import { registry as slashRegistry } from "../slash-commands/index.js";
+import { useTheme } from "./theme.js";
+import { filterFileSuggestions, findAtContext, listProjectFiles } from "./file-mentions.js";
+import { ingestClipboardImage, ingestImagePath, isImageFilePath, isScreenshotTempPath, splitPastedPaths, } from "./image-paste.js";
+import { appendHistoryEntry, loadHistorySync, pushHistoryEntry, stepHistory, } from "./input-history.js";
+const MIN_VISIBLE_LINES = 3;
+const MAX_VISIBLE_LINES = 6;
+const PADDING_X = 1;
+const PROMPT = " > ";
+const MAX_VISIBLE_SUGGESTIONS = 8;
+export function needsCursorRowCompensation(nextOutputHeight, viewportRows, previousOutputHeight) {
+    const hadPreviousFrame = previousOutputHeight !== null && previousOutputHeight > 0;
+    const isFullscreen = nextOutputHeight >= viewportRows;
+    const wasFullscreen = hadPreviousFrame && previousOutputHeight >= viewportRows;
+    const wasOverflowing = hadPreviousFrame && previousOutputHeight > viewportRows;
+    const isOverflowing = nextOutputHeight > viewportRows;
+    const isLeavingFullscreen = wasFullscreen && nextOutputHeight < viewportRows;
+    // Ink omits the trailing newline in two cases that matter for cursor math:
+    // the normal fullscreen frame, and the clear/sync frame used when leaving an
+    // overflowing viewport. buildCursorSuffix still assumes the cursor starts one
+    // line below the output, so pass y+1 in those cases.
+    return isFullscreen || wasOverflowing || (isOverflowing && hadPreviousFrame) || isLeavingFullscreen;
+}
+// Break a logical line into segments that each fit within `maxWidth` display
+// columns. Uses string-width so CJK and emoji wrap correctly; empty lines
+// still produce one empty segment so cursors on blank lines render.
+function wrapLineByWidth(line, maxWidth) {
+    if (line.length === 0)
+        return [""];
+    const out = [];
+    let current = "";
+    let currentWidth = 0;
+    for (const ch of line) {
+        const w = stringWidth(ch);
+        if (currentWidth + w > maxWidth && current.length > 0) {
+            out.push(current);
+            current = "";
+            currentWidth = 0;
+        }
+        current += ch;
+        currentWidth += w;
+    }
+    if (current.length > 0 || out.length === 0)
+        out.push(current);
+    return out;
+}
+function computeVisualLines(text, maxWidth) {
+    const logical = text.split("\n");
+    const out = [];
+    let abs = 0;
+    for (let lIdx = 0; lIdx < logical.length; lIdx++) {
+        const line = logical[lIdx];
+        const segments = wrapLineByWidth(line, maxWidth);
+        let offset = 0;
+        for (const seg of segments) {
+            out.push({ text: seg, absStart: abs + offset, logicalLineIndex: lIdx });
+            offset += seg.length;
+        }
+        abs += line.length + 1; // consume the "\n"
+    }
+    return out;
+}
+// Map a source-text cursor index to its (visualRow, visualCol) coordinates.
+function cursorToVisual(visualLines, cursor) {
+    if (visualLines.length === 0)
+        return { row: 0, col: 0 };
+    let row = 0;
+    for (let i = 0; i < visualLines.length; i++) {
+        if (visualLines[i].absStart <= cursor)
+            row = i;
+        else
+            break;
+    }
+    const vl = visualLines[row];
+    const charOffset = Math.max(0, cursor - vl.absStart);
+    return { row, col: stringWidth(vl.text.slice(0, charOffset)) };
+}
+// Map a (visualRow, visualCol) target back to a source-text cursor index.
+// Used by up/down arrows to preserve the visual column when jumping rows.
+function visualToCursor(visualLines, row, col) {
+    if (visualLines.length === 0)
+        return 0;
+    const clamped = Math.max(0, Math.min(visualLines.length - 1, row));
+    const vl = visualLines[clamped];
+    let width = 0;
+    let charOffset = 0;
+    for (const ch of vl.text) {
+        const w = stringWidth(ch);
+        if (width + w > col)
+            break;
+        width += w;
+        charOffset += ch.length;
+    }
+    return vl.absStart + charOffset;
+}
+export function shouldSubmitExactSlashSuggestion(input, suggestionName) {
+    if (!suggestionName)
+        return false;
+    return input.trim() === `/${suggestionName}`;
+}
+export function resolveSlashEnterAction(input, suggestions, selectedIndex) {
+    if (suggestions.some((item) => shouldSubmitExactSlashSuggestion(input, item.name))) {
+        return { kind: "submit" };
+    }
+    const suggestion = suggestions[selectedIndex];
+    return suggestion ? { kind: "complete", text: `/${suggestion.name} ` } : { kind: "none" };
+}
+const KITTY_RETURN_PRIVATE_USE = String.fromCodePoint(57345);
+export function isInkModifiedEnterInput(input) {
+    const normalized = input.startsWith("\x1b") ? input.slice(1) : input;
+    return normalized === KITTY_RETURN_PRIVATE_USE
+        || /^\[(?:13|57345)(?::\d+){0,2};[2-9]\d*(?::[12])?u$/.test(normalized)
+        || /^\[27;[2-9]\d*(?::[12])?;(?:13|57345)~$/.test(normalized);
+}
+export function resolveInkEnterIntent(input, key) {
+    if (key.eventType === "release")
+        return "none";
+    const hasReturnInput = !!input && /[\r\n]/.test(input);
+    if (isInkModifiedEnterInput(input))
+        return "newline";
+    const isEnter = hasReturnInput || !!key.return;
+    if (!isEnter)
+        return "none";
+    if (key.shift || key.ctrl || key.meta)
+        return "newline";
+    return "submit";
+}
+export function insertNewlineAtCursor(text, cursor) {
+    const clampedCursor = Math.max(0, Math.min(text.length, cursor));
+    return {
+        text: `${text.slice(0, clampedCursor)}\n${text.slice(clampedCursor)}`,
+        cursor: clampedCursor + 1,
+    };
+}
+export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, terminalColumns, cwd }) {
+    const theme = useTheme();
+    const width = terminalColumns;
+    const [text, setText] = useState("");
+    const [cursor, setCursor] = useState(0);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [projectFiles, setProjectFiles] = useState(null);
+    const [attachments, setAttachments] = useState([]);
+    const [history, setHistory] = useState(() => loadHistorySync());
+    const [historyIndex, setHistoryIndex] = useState(null);
+    const historyDraftRef = useRef("");
+    const loadingFilesRef = useRef(false);
+    // 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);
+    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]);
+    useEffect(() => {
+        if (!atContext || projectFiles !== null || loadingFilesRef.current)
+            return;
+        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.
+    useEffect(() => {
+        if (!process.stdout.isTTY)
+            return;
+        process.stdout.write("\x1b[2 q"); // steady block
+        return () => {
+            process.stdout.write("\x1b[0 q"); // reset to terminal default
+        };
+    }, []);
+    const slashSuggestions = useMemo(() => {
+        if (!isSlashContext)
+            return [];
+        const commandSuggestions = slashRegistry.list().map((command) => ({
+            type: "command",
+            name: command.name,
+            description: command.description,
+        }));
+        const skillSuggestions = (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]);
+    const fileSuggestions = useMemo(() => {
+        if (!atContext || !projectFiles)
+            return [];
+        return filterFileSuggestions(projectFiles, atContext.query, MAX_VISIBLE_SUGGESTIONS * 3);
+    }, [atContext, projectFiles]);
+    const mode = slashSuggestions.length > 0
+        ? "slash"
+        : atContext
+            ? "file"
+            : null;
+    const activeCount = mode === "slash" ? slashSuggestions.length : mode === "file" ? fileSuggestions.length : 0;
+    const navigable = activeCount > 0;
+    const showSuggestions = mode !== null;
+    let suggestionOffset = 0;
+    if (navigable && activeCount > MAX_VISIBLE_SUGGESTIONS) {
+        suggestionOffset = Math.min(Math.max(selectedIndex - Math.floor(MAX_VISIBLE_SUGGESTIONS / 2), 0), activeCount - MAX_VISIBLE_SUGGESTIONS);
+    }
+    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]);
+    const addAttachment = React.useCallback((att) => {
+        setAttachments((prev) => [...prev, att]);
+    }, []);
+    const notice = React.useCallback((msg) => {
+        onPasteNotice?.(msg);
+    }, [onPasteNotice]);
+    // Empty paste is the common signal that the clipboard holds an image and the
+    // 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 { attachment, error } = await ingestClipboardImage();
+        if (attachment) {
+            addAttachment(attachment);
+            return true;
+        }
+        if (error && error !== "clipboard has no image") {
+            notice(`image paste failed: ${error}`);
+        }
+        return false;
+    }, [addAttachment, notice]);
+    usePaste((pasted) => {
+        pastePendingRef.current = true;
+        // 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;
+            }, 0);
+        };
+        // Strip orphaned focus-event tails that can appear if focus reporting
+        // splits across the paste boundary. Bracketed paste also delivers line
+        // breaks as bare CR on many terminals; left as-is, those CRs survive into
+        // the rendered Text and the terminal interprets them as "return to column
+        // 0", visually overwriting earlier characters even though the underlying
+        // state still holds the full paste.
+        const clean = pasted
+            .replace(/\x1b\[I$/, "")
+            .replace(/\x1b\[O$/, "")
+            .replace(/\r\n?/g, "\n");
+        // 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);
+            }
+            else {
+                clearPending();
+            }
+            return;
+        }
+        // Look for image paths inside the paste (drag-and-drop from Finder/
+        // Nautilus/Explorer). Multi-selection can arrive newline- or
+        // space-separated.
+        const tokens = splitPastedPaths(clean);
+        const imageTokens = tokens.filter(isImageFilePath);
+        if (imageTokens.length === 0) {
+            // Plain text paste — insert into the input at the cursor.
+            insertTextAtCursor(clean);
+            clearPending();
+            return;
+        }
+        const handle = async () => {
+            const results = await Promise.all(imageTokens.map((t) => ingestImagePath(t)));
+            const successful = [];
+            const errors = [];
+            for (let i = 0; i < results.length; i++) {
+                const { attachment, error } = results[i];
+                if (attachment) {
+                    successful.push(attachment);
+                }
+                else if (error) {
+                    errors.push(`${imageTokens[i]}: ${error}`);
+                }
+            }
+            // macOS screenshot shortcut writes a TemporaryItems path into the
+            // clipboard but the file may already be gone by the time we read it.
+            // Fall back to the clipboard image when that happens.
+            if (successful.length === 0 &&
+                process.platform === "darwin" &&
+                imageTokens.some(isScreenshotTempPath)) {
+                const clipOk = await tryClipboardImage();
+                if (clipOk)
+                    return;
+            }
+            for (const att of successful)
+                addAttachment(att);
+            const nonImageLines = tokens.filter((t) => !isImageFilePath(t));
+            if (successful.length > 0 && nonImageLines.length > 0) {
+                insertTextAtCursor(nonImageLines.join("\n"));
+            }
+            else if (successful.length === 0) {
+                // None resolved — fall back to treating the paste as text.
+                insertTextAtCursor(clean);
+            }
+            for (const err of errors)
+                notice(err);
+        };
+        void handle().finally(clearPending);
+    }, { isActive: !disabled });
+    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);
+        setSelectedIndex(0);
+    };
+    const submitInput = (submittedText) => {
+        if (submittedText.trim().length === 0 && attachments.length === 0)
+            return;
+        onSubmit({ text: submittedText, images: attachments });
+        if (submittedText.trim().length > 0) {
+            const nextHistory = pushHistoryEntry(history, submittedText);
+            if (nextHistory !== history) {
+                setHistory(nextHistory);
+                appendHistoryEntry(submittedText);
+            }
+        }
+        setText("");
+        setCursor(0);
+        setSelectedIndex(0);
+        setAttachments([]);
+        setHistoryIndex(null);
+        historyDraftRef.current = "";
+    };
+    const applySlashEnterAction = (submittedText) => {
+        const action = resolveSlashEnterAction(submittedText, slashSuggestions, selectedIndex);
+        if (action.kind === "submit") {
+            submitInput(submittedText);
+            return true;
+        }
+        if (action.kind === "complete") {
+            setText(action.text);
+            setCursor(action.text.length);
+            setSelectedIndex(0);
+            return true;
+        }
+        return false;
+    };
+    useInput((input, key) => {
+        if (disabled)
+            return;
+        if (process.env.BUBBLE_KEY_DEBUG) {
+            try {
+                appendFileSync("/tmp/bubble-key.log", JSON.stringify({
+                    t: new Date().toISOString(),
+                    input,
+                    inputCodes: [...input].map((ch) => ch.codePointAt(0)),
+                    key,
+                }) + "\n");
+            }
+            catch { }
+        }
+        const enterIntent = resolveInkEnterIntent(input, key);
+        if (enterIntent === "newline") {
+            const next = insertNewlineAtCursor(text, cursor);
+            setText(next.text);
+            setCursor(next.cursor);
+            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);
+            if (showSuggestions) {
+                if (mode === "slash" && navigable && applySlashEnterAction(nextText)) {
+                    return;
+                }
+                if (mode === "file") {
+                    if (navigable) {
+                        const suggestion = fileSuggestions[selectedIndex];
+                        if (suggestion)
+                            applyFileSuggestion(suggestion.path);
+                    }
+                    return;
+                }
+            }
+            submitInput(nextText);
+            return;
+        }
+        // Autocomplete navigation
+        if (showSuggestions) {
+            if (navigable && key.upArrow) {
+                setSelectedIndex((i) => (i - 1 + activeCount) % activeCount);
+                return;
+            }
+            if (navigable && key.downArrow) {
+                setSelectedIndex((i) => (i + 1) % activeCount);
+                return;
+            }
+            if (key.escape) {
+                setSelectedIndex(0);
+                return;
+            }
+            if (key.return || key.tab) {
+                if (mode === "slash" && navigable) {
+                    if (key.return)
+                        applySlashEnterAction(text);
+                    if (key.tab) {
+                        const suggestion = slashSuggestions[selectedIndex];
+                        if (suggestion) {
+                            const newText = `/${suggestion.name} `;
+                            setText(newText);
+                            setCursor(newText.length);
+                            setSelectedIndex(0);
+                        }
+                    }
+                    return;
+                }
+                if (mode === "file") {
+                    if (navigable) {
+                        const suggestion = fileSuggestions[selectedIndex];
+                        if (suggestion)
+                            applyFileSuggestion(suggestion.path);
+                    }
+                    // Swallow Enter/Tab even when no matches to avoid accidental submit.
+                    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);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            if (cursor > 0) {
+                const before = text.slice(0, cursor - 1);
+                const after = text.slice(cursor);
+                setText(before + after);
+                setCursor(cursor - 1);
+                setSelectedIndex(0);
+            }
+            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));
+            }
+            return;
+        }
+        if (key.leftArrow) {
+            setCursor(Math.max(0, cursor - 1));
+            setSelectedIndex(0);
+            return;
+        }
+        if (key.rightArrow) {
+            setCursor(Math.min(text.length, cursor + 1));
+            setSelectedIndex(0);
+            return;
+        }
+        if (key.upArrow) {
+            if (cursorVisualRow > 0) {
+                setCursor(visualToCursor(visualLines, cursorVisualRow - 1, cursorVisualCol));
+                return;
+            }
+            const result = stepHistory({ history, index: historyIndex, draft: historyDraftRef.current }, "up", text);
+            if (result.changed) {
+                setText(result.text);
+                setCursor(result.text.length);
+                setHistoryIndex(result.index);
+                historyDraftRef.current = result.draft;
+                setSelectedIndex(0);
+            }
+            return;
+        }
+        if (key.downArrow) {
+            if (cursorVisualRow < visualLines.length - 1) {
+                setCursor(visualToCursor(visualLines, cursorVisualRow + 1, cursorVisualCol));
+                return;
+            }
+            const result = stepHistory({ history, index: historyIndex, draft: historyDraftRef.current }, "down", text);
+            if (result.changed) {
+                setText(result.text);
+                setCursor(result.text.length);
+                setHistoryIndex(result.index);
+                historyDraftRef.current = result.draft;
+                setSelectedIndex(0);
+            }
+            return;
+        }
+        if (input) {
+            const before = text.slice(0, cursor);
+            const after = text.slice(cursor);
+            setText(before + input + after);
+            setCursor(cursor + input.length);
+            setSelectedIndex(0);
+        }
+    });
+    // Anchor the cursor directly to whichever line Box currently contains the
+    // cursor. Its absolute yoga (top, left) IS the row the cursor should land
+    // on — no manual border/row offsets that can drift one row off after a
+    // layout shift.
+    const cursorLineRef = useRef(null);
+    const lastCursorRef = useRef(null);
+    const previousOutputHeightRef = useRef(null);
+    const previousViewportRowsRef = useRef(null);
+    const previousInputFrameSignatureRef = useRef(null);
+    const previousRowCompensationRef = useRef(0);
+    const { setCursorPosition } = useCursor();
+    const { stdout } = useStdout();
+    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);
+    const totalLines = Math.max(visualLines.length, 1);
+    const visibleLines = Math.min(Math.max(totalLines, MIN_VISIBLE_LINES), MAX_VISIBLE_LINES);
+    let scrollOffset = 0;
+    if (totalLines > visibleLines) {
+        scrollOffset = Math.min(Math.max(cursorVisualRow - Math.floor(visibleLines / 2), 0), totalLines - visibleLines);
+    }
+    const displayedLines = [];
+    const topPadLines = totalLines < visibleLines
+        ? Math.floor((visibleLines - totalLines) / 2)
+        : 0;
+    for (let i = 0; i < topPadLines; i++) {
+        displayedLines.push({ kind: "pad", key: `top-${i}` });
+    }
+    const contentLineCount = Math.min(totalLines, visibleLines - topPadLines);
+    for (let i = 0; i < contentLineCount; i++) {
+        const visualIdx = scrollOffset + i;
+        const vl = visualLines[visualIdx];
+        displayedLines.push({
+            kind: "content",
+            text: vl ? vl.text : "",
+            visualIdx,
+        });
+    }
+    while (displayedLines.length < visibleLines) {
+        displayedLines.push({ kind: "pad", key: `bottom-${displayedLines.length}` });
+    }
+    const hasMoreAbove = scrollOffset > 0;
+    const hasMoreBelow = scrollOffset + visibleLines < totalLines;
+    const inputFrameSignature = [
+        disabled ? "disabled" : "active",
+        text,
+        scrollOffset.toString(),
+        visibleLines.toString(),
+        attachments.map((att) => `${att.filename ?? "clipboard"}:${att.bytes}`).join(","),
+        mode ?? "none",
+        selectedIndex.toString(),
+        suggestionOffset.toString(),
+        activeCount.toString(),
+        projectFiles?.length.toString() ?? "loading",
+    ].join("\u0000");
+    // Measure after yoga runs (useLayoutEffect fires after Ink's resetAfterCommit
+    // calls onComputeLayout). Push the new position into useCursor's ref and bump
+    // `cursorTick` to force one more render so useCursor's useInsertionEffect
+    // sees the fresh value and Ink emits a cursor-only update.
+    //
+    // While the input is disabled (agent is running, pickers open, etc.) the
+    // 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) {
+            if (disabled && lastCursorRef.current !== null) {
+                lastCursorRef.current = null;
+                setCursorTick((t) => t + 1);
+            }
+            setCursorPosition(undefined);
+            return;
+        }
+        let left = 0;
+        let top = 0;
+        let lastNode;
+        const trace = [];
+        while (node?.yogaNode) {
+            const layout = node.yogaNode.getComputedLayout();
+            left += layout.left;
+            top += layout.top;
+            if (process.env.BUBBLE_CURSOR_DEBUG) {
+                trace.push(`${node.nodeName}(+${layout.left},+${layout.top})`);
+            }
+            lastNode = node;
+            node = node.parentNode;
+        }
+        const rootHeight = lastNode?.yogaNode?.getComputedHeight() ?? 0;
+        const viewportRows = stdout.rows ?? process.stdout.rows ?? 24;
+        const previousOutputHeight = previousOutputHeightRef.current;
+        // After a clear/sync frame, Ink's physical terminal cursor remains on the
+        // last rendered row even though log-update records an output string with a
+        // trailing newline. The forced cursor render that follows has the same
+        // visible frame, so keep the same row compensation until the input frame
+        // content or height actually changes.
+        const sameRenderedFrame = previousOutputHeight === rootHeight &&
+            previousViewportRowsRef.current === viewportRows &&
+            previousInputFrameSignatureRef.current === inputFrameSignature;
+        const rowCompensation = sameRenderedFrame
+            ? previousRowCompensationRef.current
+            : needsCursorRowCompensation(rootHeight, viewportRows, previousOutputHeight) ? 1 : 0;
+        previousOutputHeightRef.current = rootHeight;
+        previousViewportRowsRef.current = viewportRows;
+        previousInputFrameSignatureRef.current = inputFrameSignature;
+        previousRowCompensationRef.current = rowCompensation;
+        if (disabled) {
+            if (lastCursorRef.current !== null) {
+                lastCursorRef.current = null;
+                setCursorPosition(undefined);
+                setCursorTick((t) => t + 1);
+            }
+            return;
+        }
+        const next = {
+            x: left + PROMPT.length + cursorVisualCol,
+            y: top + rowCompensation,
+        };
+        if (process.env.BUBBLE_CURSOR_DEBUG) {
+            try {
+                appendFileSync("/tmp/bubble-cursor.log", `${new Date().toISOString()} row=${cursorVisualRow} col=${cursorVisualCol} -> x=${next.x} y=${next.y} (rootH=${rootHeight}, prevH=${previousOutputHeight ?? "none"}, vp=${viewportRows}, comp=${rowCompensation}) | ${trace.join(" < ")}\n`);
+            }
+            catch { }
+        }
+        const prev = lastCursorRef.current;
+        if (!prev || prev.x !== next.x || prev.y !== next.y) {
+            lastCursorRef.current = next;
+            setCursorPosition(next);
+            setCursorTick((t) => t + 1);
+        }
+    });
+    // Reference cursorTick so the effect re-runs on the forced render pass.
+    void cursorTick;
+    const inputBg = disabled ? theme.inputBgDisabled : theme.inputBg;
+    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) => {
+                        if (row.kind === "pad") {
+                            return (_jsx(Text, { backgroundColor: inputBg, children: " ".repeat(contentWidth) }, row.key));
+                        }
+                        const { text: line, visualIdx } = row;
+                        const lineText = line.length === 0 ? " " : line;
+                        const isFirst = visualIdx === 0;
+                        const isCursorLine = visualIdx === cursorVisualRow;
+                        const prompt = isFirst ? PROMPT : " ".repeat(PROMPT.length);
+                        const fill = " ".repeat(Math.max(0, lineWidth - stringWidth(lineText)));
+                        return (_jsxs(Box, { height: 1, overflow: "hidden", ref: isCursorLine
+                                ? (el) => {
+                                    cursorLineRef.current = el;
+                                }
+                                : undefined, children: [_jsx(Text, { backgroundColor: inputBg, color: isFirst ? theme.accent : theme.inputText, children: prompt }), _jsx(Text, { backgroundColor: inputBg, color: theme.inputText, children: lineText }), _jsx(Text, { backgroundColor: inputBg, children: fill })] }, visualIdx));
+                    }), hasMoreBelow && (_jsx(Text, { backgroundColor: inputBg, color: theme.muted, dimColor: true, children: filledLine(` ↓ ${moreBelow} more`) }))] }), showSuggestions && mode === "slash" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 4, children: [slashSuggestions
+                        .slice(suggestionOffset, suggestionOffset + MAX_VISIBLE_SUGGESTIONS)
+                        .map((cmd, visibleIndex) => {
+                        const i = suggestionOffset + visibleIndex;
+                        const label = `/${cmd.name}`.padEnd(17);
+                        const isSelected = i === selectedIndex;
+                        return (_jsx(Box, { height: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: isSelected ? theme.accent : theme.muted, bold: isSelected, children: label }), cmd.type === "skill" && _jsx(Text, { color: theme.muted, children: " [skill]" }), _jsxs(Text, { dimColor: true, children: [" ", cmd.description] })] }) }, cmd.name));
+                    }), slashSuggestions.length > MAX_VISIBLE_SUGGESTIONS && (_jsx(Text, { color: theme.muted, children: `Showing ${suggestionOffset + 1}-${Math.min(suggestionOffset + MAX_VISIBLE_SUGGESTIONS, slashSuggestions.length)} of ${slashSuggestions.length}` }))] })), showSuggestions && mode === "file" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [projectFiles === null && _jsx(Text, { dimColor: true, children: "Loading project files\u2026" }), projectFiles !== null && fileSuggestions.length === 0 && (_jsxs(Text, { dimColor: true, children: ["No files match \"", atContext?.query ?? "", "\""] })), fileSuggestions
+                        .slice(suggestionOffset, suggestionOffset + MAX_VISIBLE_SUGGESTIONS)
+                        .map((s, visibleIndex) => {
+                        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));
+                    }), 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}` }))] }))] }));
+}