@bubblebrain-ai/bubble 0.0.10 → 0.0.12

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

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

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

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

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

@@ -22,7 +22,7 @@ export function loadHistorySync(filePath = defaultHistoryFilePath()) {
                     out.push(parsed);
             }
             catch {
-                // Malformed line — skip rather than fail the whole load.
+                // Malformed line - skip rather than fail the whole load.
             }
         }
         return out.length > MAX_HISTORY_ENTRIES ? out.slice(-MAX_HISTORY_ENTRIES) : out;
@@ -42,9 +42,9 @@ export function appendHistoryEntry(entry, filePath = defaultHistoryFilePath()) {
         // Persistence is best-effort; never crash the composer over disk IO.
     }
 }
-// Pure transition for ↑/↓ navigation. `index === null` means the user is
+// Pure transition for up/down navigation. `index === null` means the user is
 // editing a fresh draft; otherwise it points at history[index]. When stepping
-// from the draft into history we snapshot the current text so ↓ past the
+// from the draft into history we snapshot the current text so down past the
 // newest entry can restore it.
 export function stepHistory(state, direction, currentText) {
     const { history, index, draft } = state;
@@ -61,13 +61,11 @@ export function stepHistory(state, direction, currentText) {
         }
         return noChange;
     }
-    // down
     if (index === null)
         return noChange;
     if (index < history.length - 1) {
         return { text: history[index + 1], index: index + 1, draft, changed: true };
     }
-    // Past the newest entry: restore the saved draft and clear it.
     return { text: draft, index: null, draft: "", changed: true };
 }
 // Push to in-memory history with last-entry dedupe so repeated identical

package/dist/tui-ink/markdown.d.ts

@@ -30,7 +30,39 @@ interface InlineStyle {
     code?: boolean;
 }
 export declare function parseMarkdownBlocks(text: string): MarkdownBlock[];
+/**
+ * Return the byte offset where the LAST markdown block begins in `text`.
+ *
+ * Used by the streaming renderer to split incoming content into a "stable
+ * prefix" (everything before the in-flight block — already-closed blocks)
+ * and an "unstable suffix" (the block currently being typed by the model).
+ * Mirrors parseMarkdownBlocks's lexing rules so the boundary it produces is
+ * compatible with how MarkdownContent will later parse the prefix.
+ *
+ * Returns `text.length` when no blocks are present (empty / whitespace-only
+ * input), and `0` when the entire text is a single in-flight block.
+ */
+export declare function findLastBlockStart(text: string): number;
 export declare function parseMarkdownInlineSegments(text: string, style?: InlineStyle): MarkdownInlineSegment[];
+/**
+ * Streaming-aware wrapper around `MarkdownContent`.
+ *
+ * On every render, splits the incoming `content` into a stable prefix
+ * (everything before the in-flight block) and an unstable suffix (the block
+ * currently being typed). The two halves are rendered as two separate
+ * `MarkdownContent` instances; the stable one uses the same `content` prop
+ * across deltas, so its internal `useMemo([content])` short-circuits and
+ * does NOT re-parse on each token — which is the whole point. Only the
+ * shorter unstable suffix re-parses per delta.
+ *
+ * The boundary advances monotonically (the prefix only grows). A defensive
+ * reset handles the rare case where `content` is replaced wholesale (e.g.,
+ * the user re-enters a turn).
+ */
+export declare function StreamingMarkdown({ content, maxWidth, }: {
+    content: string;
+    maxWidth?: number;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function MarkdownContent({ content, maxWidth, }: {
     content: string;
     maxWidth?: number;

package/dist/tui-ink/markdown.js

@@ -89,6 +89,85 @@ export function parseMarkdownBlocks(text) {
     }
     return blocks;
 }
+/**
+ * Return the byte offset where the LAST markdown block begins in `text`.
+ *
+ * Used by the streaming renderer to split incoming content into a "stable
+ * prefix" (everything before the in-flight block — already-closed blocks)
+ * and an "unstable suffix" (the block currently being typed by the model).
+ * Mirrors parseMarkdownBlocks's lexing rules so the boundary it produces is
+ * compatible with how MarkdownContent will later parse the prefix.
+ *
+ * Returns `text.length` when no blocks are present (empty / whitespace-only
+ * input), and `0` when the entire text is a single in-flight block.
+ */
+export function findLastBlockStart(text) {
+    if (text.length === 0)
+        return 0;
+    const lines = text.split("\n");
+    // `split("\n")` on "abc\n" yields ["abc", ""]; on "abc" yields ["abc"]. The
+    // trailing newline only contributes a length-1 separator for every line
+    // except the final element produced by split.
+    const lineLengthWithSeparator = (idx) => {
+        const len = lines[idx].length;
+        return idx < lines.length - 1 ? len + 1 : len;
+    };
+    let i = 0;
+    let offset = 0;
+    let lastBlockStart = text.length;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Code block (fenced). Unclosed fences extend through EOF — that's exactly
+        // what we want for streaming, since marked-lexer-style "single token until
+        // close" keeps the in-flight code in the unstable suffix.
+        if (line.startsWith("```")) {
+            lastBlockStart = offset;
+            offset += lineLengthWithSeparator(i);
+            i++;
+            while (i < lines.length && !lines[i].startsWith("```")) {
+                offset += lineLengthWithSeparator(i);
+                i++;
+            }
+            if (i < lines.length) {
+                offset += lineLengthWithSeparator(i);
+                i++;
+            }
+            continue;
+        }
+        // Table — same shape as parseMarkdownBlocks: consume consecutive `|` lines.
+        if (line.trim().startsWith("|")) {
+            lastBlockStart = offset;
+            while (i < lines.length && lines[i].trim().startsWith("|")) {
+                offset += lineLengthWithSeparator(i);
+                i++;
+            }
+            continue;
+        }
+        // Heading.
+        if (/^#{1,6}\s+/.test(line)) {
+            lastBlockStart = offset;
+            offset += lineLengthWithSeparator(i);
+            i++;
+            continue;
+        }
+        // Blank line — does not start a block; just advances the offset.
+        if (line.trim() === "") {
+            offset += lineLengthWithSeparator(i);
+            i++;
+            continue;
+        }
+        // Paragraph — runs until blank line or start of another block.
+        lastBlockStart = offset;
+        while (i < lines.length &&
+            lines[i].trim() !== "" &&
+            !lines[i].startsWith("```") &&
+            !lines[i].trim().startsWith("|")) {
+            offset += lineLengthWithSeparator(i);
+            i++;
+        }
+    }
+    return lastBlockStart;
+}
 function parseTableRow(line) {
     let body = line.trim();
     if (body.startsWith("|"))
@@ -263,10 +342,8 @@ function InlineText({ text }) {
 function CodeBlock({ lang, lines }) {
     const theme = useTheme();
     // Lazy init: try sync highlight when shiki is already warm so the very first
-    // paint carries highlighted output. This matters because MessageList renders
-    // committed messages inside Ink's <Static>, which only paints each item once
-    // — anything we ship via setState in useEffect lands too late to appear in
-    // scrollback. Fall back to raw lines if shiki hasn't loaded yet.
+    // paint carries highlighted output. Fall back to raw lines if shiki hasn't
+    // loaded yet; useEffect will refresh the mounted transcript item later.
     const [highlighted, setHighlighted] = React.useState(() => {
         const code = lines.join("\n");
         if (!code)
@@ -377,6 +454,36 @@ function HeadingBlock({ level, text }) {
     }
     return (_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { ...props, children: text }) }));
 }
+/**
+ * Streaming-aware wrapper around `MarkdownContent`.
+ *
+ * On every render, splits the incoming `content` into a stable prefix
+ * (everything before the in-flight block) and an unstable suffix (the block
+ * currently being typed). The two halves are rendered as two separate
+ * `MarkdownContent` instances; the stable one uses the same `content` prop
+ * across deltas, so its internal `useMemo([content])` short-circuits and
+ * does NOT re-parse on each token — which is the whole point. Only the
+ * shorter unstable suffix re-parses per delta.
+ *
+ * The boundary advances monotonically (the prefix only grows). A defensive
+ * reset handles the rare case where `content` is replaced wholesale (e.g.,
+ * the user re-enters a turn).
+ */
+export function StreamingMarkdown({ content, maxWidth, }) {
+    const stablePrefixRef = React.useRef("");
+    if (!content.startsWith(stablePrefixRef.current)) {
+        stablePrefixRef.current = "";
+    }
+    const boundary = stablePrefixRef.current.length;
+    const tail = content.substring(boundary);
+    const advance = findLastBlockStart(tail);
+    if (advance > 0) {
+        stablePrefixRef.current = content.substring(0, boundary + advance);
+    }
+    const stablePrefix = stablePrefixRef.current;
+    const unstableSuffix = content.substring(stablePrefix.length);
+    return (_jsxs(Box, { flexDirection: "column", children: [stablePrefix && _jsx(MarkdownContent, { content: stablePrefix, maxWidth: maxWidth }), unstableSuffix && _jsx(MarkdownContent, { content: unstableSuffix, maxWidth: maxWidth })] }));
+}
 export function MarkdownContent({ content, maxWidth, }) {
     const blocks = React.useMemo(() => parseMarkdownBlocks(content), [content]);
     return (_jsx(Box, { flexDirection: "column", children: blocks.map((block, i) => {

package/dist/tui-ink/message-list.d.ts

@@ -21,12 +21,7 @@ interface MessageListProps {
     pendingApproval?: PendingApprovalHint | null;
     /** Animation tick used to refresh in-progress elapsed counters. */
     nowTick?: number;
-    /**
-     * Optional banner rendered as the first item of the scrollback Static
-     * stream. Committed to scrollback once on initial mount so it doesn't
-     * float between older messages and the live tail as the conversation
-     * progresses.
-     */
+    /** Optional banner rendered as the first item in the app-controlled transcript. */
     welcomeBanner?: React.ReactNode;
 }
 export declare function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, pendingApproval, nowTick, welcomeBanner, }: MessageListProps): import("react/jsx-runtime").JSX.Element;