@bubblebrain-ai/bubble 0.0.52 → 0.0.53

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

@@ -1,1279 +0,0 @@
-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 { visualWidth, graphemeWidth } from "./width.js";
-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, 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, 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 { shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
-import { imageDisplayLabel, stripInlineImageLabels } from "../tui/image-display.js";
-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,
-    };
-}
-/**
- * Rebuild a composer buffer from a persisted history entry. Text long enough to
- * have been collapsed at paste time is collapsed again into a `[Pasted text #N …]`
- * marker, but its full content is preserved in the buffer's paste spans so the
- * composer stays compact, no content is lost, and the next submit re-expands it.
- */
-function bufferFromHistoryText(text) {
-    if (shouldCollapsePastedContent(text)) {
-        return insertComposerPaste(createComposerBuffer(), text);
-    }
-    return createComposerBuffer(text);
-}
-/**
- * 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: bufferFromHistoryText(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 = " > ";
-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;
-}
-export function resolveCursorRowCompensation(input) {
-    if (input.sameRenderedFrame)
-        return input.previousRowCompensation;
-    return needsCursorRowCompensation(input.nextOutputHeight, input.viewportRows, input.previousOutputHeight) ? 1 : 0;
-}
-export function isCtrlLetterInput(input, key, letter) {
-    const normalized = letter.toLowerCase();
-    if (!/^[a-z]$/.test(normalized))
-        return false;
-    const rawControlInput = String.fromCharCode(normalized.charCodeAt(0) - 96);
-    return input === rawControlInput || (key.ctrl === true && input.toLowerCase() === normalized);
-}
-export function isCtrlCInput(input, key) {
-    return isCtrlLetterInput(input, key, "c");
-}
-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) {
-    // 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
- * 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 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));
-    if (offset >= lineText.length) {
-        return { before: lineText, at: " ", after: "" };
-    }
-    const codePoint = lineText.codePointAt(offset);
-    const length = codePoint > 0xffff ? 2 : 1;
-    return {
-        before: lineText.slice(0, offset),
-        at: lineText.slice(offset, offset + length),
-        after: lineText.slice(offset + length),
-    };
-}
-// Break a logical line into segments that each fit within `maxWidth` display
-// columns. Uses the shared terminal-aware width (./width.js) so CJK, emoji and
-// ambiguous-width chars wrap exactly as the terminal renders them; 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 = graphemeWidth(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: visualWidth(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 = graphemeWidth(ch);
-        if (width + w > col)
-            break;
-        width += w;
-        charOffset += ch.length;
-    }
-    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;
-    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 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 {
-        text: `${text.slice(0, clampedCursor)}\n${text.slice(clampedCursor)}`,
-        cursor: clampedCursor + 1,
-    };
-}
-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, 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 [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 [history, setHistory] = useState(() => loadHistoryEntriesSync({ scope: historyScope }));
-    const [historyIndex, setHistoryIndex] = useState(null);
-    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);
-    // 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);
-    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 = 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(() => resolveComposerAtContext(text, cursor, isSlashContext, allowWorkspaceMentions), [allowWorkspaceMentions, text, cursor, isSlashContext]);
-    useEffect(() => {
-        if (!atContext || projectFiles !== null || loadingFilesRef.current)
-            return;
-        loadingFilesRef.current = true;
-        listProjectFiles(cwd).then((files) => setProjectFiles(files), () => setProjectFiles([]));
-    }, [atContext, cwd, projectFiles]);
-    // 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[1 q"); // blinking block
-        return () => {
-            process.stdout.write("\x1b[0 q"); // reset to terminal default
-        };
-    }, [hardwareCursorEnabled]);
-    const slashSuggestions = useMemo(() => {
-        if (!isSlashContext)
-            return [];
-        const commands = new Map();
-        for (const command of localSlashCommands) {
-            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);
-        }
-        const commandSuggestions = [...commands.values()].map((command) => ({
-            type: "command",
-            name: command.name,
-            description: command.description,
-        }));
-        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));
-    }, [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()) {
-            if (!allowedSlashCommands || allowedSlashCommands.has(command.name))
-                names.add(command.name);
-        }
-        if (!allowedSlashCommands) {
-            for (const skill of skillRegistry?.summaries() ?? [])
-                names.add(skill.name);
-        }
-        return names;
-    }, [allowedSlashCommands, skillRegistry, localSlashCommands]);
-    const slashCommandHighlight = useMemo(() => resolveSlashCommandHighlightRange(text, knownSlashCommandNames), [text, knownSlashCommandNames]);
-    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;
-        updateComposerBuffer((current) => insertComposerText(current, insertion));
-    }, [updateComposerBuffer]);
-    const addAttachment = React.useCallback((att) => {
-        const base = imageLabelStartOverride ?? nextImageLabelStart;
-        const index = attachmentCountRef.current;
-        attachmentCountRef.current += 1;
-        // Place the image label inline at the cursor so the reference appears where
-        // it was pasted (not forced to the start), and moves with later edits. It is
-        // stripped from the text on submit so the model still receives clean text.
-        insertTextAtCursor(`${imageDisplayLabel(base + index)} `);
-        ensureImageLabelStart();
-        setAttachments((prev) => [...prev, att]);
-    }, [ensureImageLabelStart, insertTextAtCursor, imageLabelStartOverride, nextImageLabelStart]);
-    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 (expectedDraftEpoch) => {
-        const { attachment, error } = await ingestClipboardImage();
-        if (draftIdentityEpochRef.current !== expectedDraftEpoch)
-            return false;
-        if (attachment) {
-            addAttachment(attachment);
-            return true;
-        }
-        if (error && error !== "clipboard has no image") {
-            notice(`image paste failed: ${error}`);
-        }
-        return false;
-    }, [addAttachment, notice]);
-    usePaste((pasted) => {
-        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(() => {
-                pasteOperationsRef.current.finish(pasteOperationId);
-            }, 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");
-        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(pasteDraftEpoch).finally(clearPending);
-            }
-            else {
-                clearPending();
-            }
-            return;
-        }
-        // Copying an image file in Finder pastes only the file's NAME while the
-        // real bits stay on the system clipboard — attach from there. If the
-        // clipboard turns out to hold no image, it was just text: insert it
-        // quietly.
-        const bareName = bareImageFilenameFromPaste(clean);
-        if (bareName && process.platform === "darwin") {
-            void tryClipboardImage(pasteDraftEpoch)
-                .then((attached) => {
-                if (draftIdentityEpochRef.current === pasteDraftEpoch && !attached) {
-                    insertTextAtCursor(clean);
-                }
-            })
-                .finally(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.
-            if (shouldCollapsePastedContent(clean)) {
-                updateComposerBuffer((current) => insertComposerPaste(current, clean));
-            }
-            else {
-                insertTextAtCursor(clean);
-            }
-            clearPending();
-            return;
-        }
-        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++) {
-                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(pasteDraftEpoch);
-                if (clipOk)
-                    return;
-            }
-            if (draftIdentityEpochRef.current !== pasteDraftEpoch)
-                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 insert = `@${selectedPath} `;
-        updateComposerBuffer((current) => replaceComposerRange(current, atContext.start, atContext.end, insert));
-        setSelectedIndex(0);
-    };
-    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 = expandComposerBuffer(submittedBuffer);
-        const expandedText = stripInlineImageLabels(pasteExpanded, inlineLabels);
-        if (expandedText.trim().length === 0 && attachments.length === 0)
-            return;
-        const deliver = target === "queue" && onQueue ? onQueue : onSubmit;
-        const payload = {
-            // The pasted-content marker is a composer-only affordance. Submit the
-            // fully-expanded text so the transcript shows what was actually sent —
-            // the agent already receives the expanded text — rather than the marker.
-            // `text` (model input) has image labels stripped; `displayText` keeps them
-            // inline at their paste position so the transcript shows the image there.
-            text: expandedText,
-            ...(inlineLabels.length > 0 && pasteExpanded !== expandedText ? { displayText: pasteExpanded } : {}),
-            images: attachments,
-            imageDisplayStart: attachments.length > 0 ? (imageLabelStartOverride ?? nextImageLabelStart) : undefined,
-        };
-        const fingerprint = submitPayloadFingerprint(payload);
-        if (submittedPayloadFingerprintRef.current === fingerprint)
-            return;
-        submittedPayloadFingerprintRef.current = fingerprint;
-        deliver(payload);
-        // Always record the submitted text so ↑/↓ can recall it. The full expanded
-        // text is persisted (content is never lost); on recall, long text is
-        // re-collapsed into a paste marker that still carries its full content.
-        if (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;
-            });
-        }
-        updateComposerBuffer(() => createComposerBuffer());
-        setSelectedIndex(0);
-        setAttachments([]);
-        attachmentCountRef.current = 0;
-        setImageLabelStartOverride(null);
-        setHistoryIndex(null);
-        historyDraftRef.current = null;
-        invalidateDraftAsyncWork();
-    };
-    const applySlashEnterAction = (submittedBuffer) => {
-        const action = resolveSlashEnterAction(submittedBuffer.text, slashSuggestions, selectedIndex);
-        if (action.kind === "submit") {
-            submitInput(submittedBuffer);
-            return true;
-        }
-        if (action.kind === "complete") {
-            updateComposerBuffer((current) => replaceComposerRange(current, 0, current.text.length, action.text));
-            setSelectedIndex(0);
-            return true;
-        }
-        return false;
-    };
-    useInput((input, key) => {
-        if (isKeyReleaseEvent(key))
-            return;
-        const strippedInput = stripTerminalMouseSequences(input);
-        if (strippedInput !== input && !strippedInput) {
-            return;
-        }
-        input = strippedInput;
-        if (disabled)
-            return;
-        if (isCtrlCInput(input, key))
-            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 (shouldDeferComposerCommitWhilePastePending(pasteOperationsRef.current.hasPending, enterIntent, key)) {
-            return;
-        }
-        if (enterIntent === "newline") {
-            updateComposerBuffer((current) => insertComposerText(current, "\n"));
-            setSelectedIndex(0);
-            return;
-        }
-        if (enterIntent === "submit" && input && /[\r\n]/.test(input)) {
-            const beforeReturn = input.split(/[\r\n]/)[0] ?? "";
-            const nextBuffer = insertComposerText(composerBufferRef.current, beforeReturn);
-            if (showSuggestions) {
-                if (mode === "slash" && navigable && applySlashEnterAction(nextBuffer)) {
-                    return;
-                }
-                if (mode === "file") {
-                    if (navigable) {
-                        const suggestion = fileSuggestions[selectedIndex];
-                        if (suggestion)
-                            applyFileSuggestion(suggestion.path);
-                    }
-                    return;
-                }
-            }
-            submitInput(nextBuffer);
-            return;
-        }
-        const composerArrowDirection = composerVerticalArrowDirection(key);
-        // Autocomplete navigation
-        if (showSuggestions) {
-            if (navigable && composerArrowDirection === "up") {
-                setSelectedIndex((i) => (i - 1 + activeCount) % activeCount);
-                return;
-            }
-            if (navigable && composerArrowDirection === "down") {
-                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(composerBufferRef.current);
-                    if (key.tab) {
-                        const suggestion = slashSuggestions[selectedIndex];
-                        if (suggestion) {
-                            const newText = `/${suggestion.name} `;
-                            updateComposerBuffer((current) => replaceComposerRange(current, 0, current.text.length, newText));
-                            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;
-                }
-            }
-        }
-        // 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) {
-            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.
-            submitInput(composerBufferRef.current);
-            return;
-        }
-        const editAction = resolveComposerEditAction(input, key);
-        if (editAction) {
-            if (editAction === "word-left") {
-                updateComposerBuffer((current) => moveComposerCursor(current, previousWordBoundary(current.text, current.cursor), "left"));
-            }
-            else if (editAction === "word-right") {
-                updateComposerBuffer((current) => moveComposerCursor(current, nextWordBoundary(current.text, current.cursor), "right"));
-            }
-            else if (editAction === "line-start") {
-                updateComposerBuffer((current) => moveComposerCursor(current, lineStartBoundary(current.text, current.cursor), "left"));
-            }
-            else if (editAction === "line-end") {
-                updateComposerBuffer((current) => moveComposerCursor(current, lineEndBoundary(current.text, current.cursor), "right"));
-            }
-            else if (editAction === "delete-line-start") {
-                updateComposerBuffer((current) => replaceComposerRange(current, lineStartBoundary(current.text, current.cursor), current.cursor));
-            }
-            else {
-                updateComposerBuffer((current) => replaceComposerRange(current, current.cursor, lineEndBoundary(current.text, current.cursor)));
-            }
-            setSelectedIndex(0);
-            return;
-        }
-        if (key.backspace) {
-            if (composerBufferRef.current.cursor > 0) {
-                updateComposerBuffer((current) => deleteComposerBackward(current));
-                setSelectedIndex(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) => {
-                    const next = prev.slice(0, -1);
-                    if (next.length === 0)
-                        setImageLabelStartOverride(null);
-                    return next;
-                });
-                attachmentCountRef.current = Math.max(0, attachmentCountRef.current - 1);
-            }
-            return;
-        }
-        if (key.delete) {
-            updateComposerBuffer((current) => deleteComposerForward(current));
-            setSelectedIndex(0);
-            return;
-        }
-        if (key.leftArrow) {
-            updateComposerBuffer((current) => moveComposerCursor(current, current.cursor - 1, "left"));
-            setSelectedIndex(0);
-            return;
-        }
-        if (key.rightArrow) {
-            updateComposerBuffer((current) => moveComposerCursor(current, current.cursor + 1, "right"));
-            setSelectedIndex(0);
-            return;
-        }
-        if (key.upArrow || key.downArrow) {
-            if (composerArrowDirection) {
-                classifyVerticalArrow(composerArrowDirection);
-            }
-            return;
-        }
-        // Ctrl/meta chords are app-level shortcuts (Ctrl+S selection mode,
-        // Ctrl+O trace, Ctrl+R thinking, …) — never type their letter. Raw C0
-        // control bytes (kitty protocol off) are equally not text.
-        if (key.ctrl || key.meta)
-            return;
-        if (input) {
-            const printable = input.replace(/[\x00-\x08\x0b\x0c\x0e-\x1f\x7f]/g, "");
-            if (!printable)
-                return;
-            updateComposerBuffer((current) => insertComposerText(current, printable));
-            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 lastCursorResetEpochRef = useRef(null);
-    const lastDraftEpochRef = useRef(null);
-    const lastWidthRef = useRef(null);
-    const { setCursorPosition } = useCursor();
-    const { stdout } = useStdout();
-    const [cursorTick, setCursorTick] = useState(0);
-    useLayoutEffect(() => {
-        const isInitialMount = lastCursorResetEpochRef.current === null;
-        const shouldReset = !isInitialMount || cursorResetEpoch > 0;
-        lastCursorResetEpochRef.current = cursorResetEpoch;
-        if (!shouldReset)
-            return;
-        previousOutputHeightRef.current = null;
-        previousViewportRowsRef.current = null;
-        previousInputFrameSignatureRef.current = null;
-        previousRowCompensationRef.current = 0;
-        lastCursorRef.current = null;
-        setCursorPosition(undefined);
-        setCursorTick((t) => t + 1);
-    }, [cursorResetEpoch, setCursorPosition]);
-    useLayoutEffect(() => {
-        if (lastDraftEpochRef.current === draftEpoch)
-            return;
-        lastDraftEpochRef.current = draftEpoch;
-        if (draftText === undefined)
-            return;
-        updateComposerBuffer(() => createComposerBuffer(draftText));
-        setSelectedIndex(0);
-        setAttachments([]);
-        attachmentCountRef.current = 0;
-        setImageLabelStartOverride(null);
-        setHistoryIndex(null);
-        historyDraftRef.current = null;
-        invalidateDraftAsyncWork();
-        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
-    // row. Reset to a "no previous frame" state so the next layout effect treats
-    // the new width as a fresh start.
-    useLayoutEffect(() => {
-        if (lastWidthRef.current !== null && lastWidthRef.current !== width) {
-            previousOutputHeightRef.current = null;
-            previousViewportRowsRef.current = null;
-            previousInputFrameSignatureRef.current = null;
-            previousRowCompensationRef.current = 0;
-            lastCursorRef.current = null;
-        }
-        lastWidthRef.current = width;
-    }, [width]);
-    const contentWidth = Math.max(1, width - PADDING_X * 2);
-    const lineWidth = Math.max(1, contentWidth - PROMPT.length);
-    const imageLabelStart = imageLabelStartOverride ?? nextImageLabelStart;
-    const attachmentLabels = useMemo(() => attachments.map((_, index) => imageDisplayLabel(imageLabelStart + index)), [attachments, imageLabelStart]);
-    // Labels are normally inline in `text` at their paste position. Only labels
-    // that are NOT present inline (e.g. attachments restored from history) fall
-    // back to a leading prefix so they stay visible.
-    const unmarkedLabels = useMemo(() => attachmentLabels.filter((label) => !text.includes(label)), [attachmentLabels, text]);
-    const imageInlinePrefix = unmarkedLabels.length > 0 ? `${unmarkedLabels.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 ----
-    //
-    // 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) => {
-        // 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) {
-                const requested = displayCursorToSourceCursor(visualToCursor(visualLines, cursorVisualRow - 1, cursorVisualCol));
-                updateComposerBuffer((current) => moveComposerCursor(current, requested, "nearest"));
-                return;
-            }
-        }
-        else {
-            if (cursorVisualRow < visualLines.length - 1) {
-                const requested = displayCursorToSourceCursor(visualToCursor(visualLines, cursorVisualRow + 1, cursorVisualCol));
-                updateComposerBuffer((current) => moveComposerCursor(current, requested, "nearest"));
-                return;
-            }
-        }
-        const result = stepComposerHistory({
-            buffer: composerBufferRef.current,
-            attachments,
-            imageLabelStartOverride,
-            historyIndex,
-            draftSnapshot: historyDraftRef.current,
-        }, history, direction);
-        if (result.changed) {
-            updateComposerBuffer(() => result.buffer);
-            setAttachments(result.attachments);
-            attachmentCountRef.current = result.attachments.length;
-            setImageLabelStartOverride(result.imageLabelStartOverride);
-            setHistoryIndex(result.historyIndex);
-            historyDraftRef.current = result.draftSnapshot;
-            setSelectedIndex(0);
-            invalidateDraftAsyncWork();
-        }
-        else if (direction === "down") {
-            // At the bottom edge with nothing newer in history: hand Down to the
-            // parent so focus can move into the subagent entry (Claude Code parity).
-            onArrowDownAtBottom?.();
-        }
-    };
-    const classifyVerticalArrow = (direction) => {
-        performVerticalArrowRef.current(direction);
-    };
-    const minVisibleLines = 1;
-    const totalLines = Math.max(visualLines.length, 1);
-    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);
-    }
-    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,
-        imageInlinePrefix,
-        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.
-    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) {
-                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;
-        // `||` on purpose: some ptys (and Bun on a detached tty) report rows as 0,
-        // which `??` would happily accept — and `rootHeight >= 0` then flags every
-        // frame as fullscreen, forcing a bogus +1 row compensation.
-        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 = resolveCursorRowCompensation({
-            sameRenderedFrame,
-            previousRowCompensation: previousRowCompensationRef.current,
-            nextOutputHeight: rootHeight,
-            viewportRows,
-            previousOutputHeight,
-        });
-        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 cursorCellStyle = resolveSoftwareCursorCellStyle({
-        visible: softwareCursorVisible,
-        textColor: theme.inputText,
-    });
-    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: [_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, { 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 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 - visualWidth(renderedLine)));
-                        return (_jsxs(Box, { height: 1, overflow: "hidden", backgroundColor: theme.background, ref: isCursorLine
-                                ? (el) => {
-                                    cursorLineRef.current = el;
-                                }
-                                : undefined, children: [_jsx(Text, { color: isFirst ? theme.accent : theme.inputText, children: prompt }), renderedSegments.map((segment, index) => {
-                                    if (segment.kind === "cursor") {
-                                        return (_jsx(Text, { inverse: cursorCellStyle.inverse, color: cursorCellStyle.color, children: segment.text }, index));
-                                    }
-                                    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;
-                        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, { 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}` }))] }))] }));
-}