@bubblebrain-ai/bubble 0.0.8 → 0.0.10

package/dist/tui-ink/code-highlight.d.ts

@@ -2,5 +2,7 @@
  * Lightweight code highlighting for TUI using Shiki.
  * Converts token colors to ANSI escape codes for Ink rendering.
  */
+export declare function warmHighlighter(): void;
 export declare function highlightCode(code: string, lang: string): Promise<string>;
+export declare function highlightCodeSync(code: string, lang: string): string | null;
 export declare function inferLang(path?: string): string;

package/dist/tui-ink/code-highlight.js

@@ -4,6 +4,7 @@
  */
 import { createHighlighter } from "shiki";
 let highlighterPromise = null;
+let highlighterReady = null;
 function getHighlighter() {
     if (!highlighterPromise) {
         highlighterPromise = createHighlighter({
@@ -28,10 +29,18 @@ function getHighlighter() {
                 "tsx",
                 "yaml",
             ],
+        }).then((h) => {
+            highlighterReady = h;
+            return h;
         });
     }
     return highlighterPromise;
 }
+// Fire-and-forget warmup so synchronous callers can use highlightCodeSync once
+// shiki has finished loading. Safe to call multiple times.
+export function warmHighlighter() {
+    getHighlighter().catch(() => { });
+}
 function hexToAnsiFg(hex) {
     if (!hex)
         return "";
@@ -52,13 +61,32 @@ function tokensToAnsi(tokens) {
     }
     return lines.join("\n");
 }
-export async function highlightCode(code, lang) {
-    const h = await getHighlighter();
+function runHighlight(h, code, lang) {
     const loaded = h.getLoadedLanguages();
     const safeLang = loaded.includes(lang) ? lang : "text";
     const { tokens } = h.codeToTokens(code, { lang: safeLang, theme: "github-dark" });
     return tokensToAnsi(tokens);
 }
+export async function highlightCode(code, lang) {
+    const h = await getHighlighter();
+    return runHighlight(h, code, lang);
+}
+// Synchronous variant that returns null when shiki hasn't finished loading yet.
+// Used by code paths that render into Ink's <Static> (which only paints once)
+// so the first frame can already carry highlighted output.
+export function highlightCodeSync(code, lang) {
+    if (!highlighterReady) {
+        // Ensure warmup is in flight for future renders.
+        warmHighlighter();
+        return null;
+    }
+    try {
+        return runHighlight(highlighterReady, code, lang);
+    }
+    catch {
+        return null;
+    }
+}
 const LANG_MAP = {
     bash: "bash",
     css: "css",

package/dist/tui-ink/detect-theme.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Detect whether the host terminal is using a light or dark background so we
+ * can pick a sensible default palette when the user has theme set to "auto".
+ *
+ * Resolution order:
+ *   1. `COLORFGBG` env var — synchronous, set by VTE-family terminals (GNOME
+ *      Terminal, Konsole) and iTerm2 (when enabled). Format is "fg;bg" or
+ *      "fg;aux;bg" with each value being an ANSI color index 0–15.
+ *   2. OSC 11 query — write `ESC ] 11 ; ? BEL`, listen on stdin for a reply
+ *      shaped like `ESC ] 11 ; rgb:RRRR/GGGG/BBBB BEL`. Capped at ~150 ms so
+ *      we don't stall startup on terminals that swallow the query.
+ *   3. Fallback to "dark" — most coding terminals are dark, so this is the
+ *      least surprising default when detection fails.
+ *
+ * Must run BEFORE Ink's `render()` takes over stdin. Ink puts stdin into raw
+ * mode and consumes input itself, so the OSC 11 reply would never reach us.
+ */
+import type { ResolvedTheme } from "./theme.js";
+export declare function detectTerminalTheme(timeoutMs?: number): Promise<ResolvedTheme>;

package/dist/tui-ink/detect-theme.js

@@ -0,0 +1,123 @@
+/**
+ * Detect whether the host terminal is using a light or dark background so we
+ * can pick a sensible default palette when the user has theme set to "auto".
+ *
+ * Resolution order:
+ *   1. `COLORFGBG` env var — synchronous, set by VTE-family terminals (GNOME
+ *      Terminal, Konsole) and iTerm2 (when enabled). Format is "fg;bg" or
+ *      "fg;aux;bg" with each value being an ANSI color index 0–15.
+ *   2. OSC 11 query — write `ESC ] 11 ; ? BEL`, listen on stdin for a reply
+ *      shaped like `ESC ] 11 ; rgb:RRRR/GGGG/BBBB BEL`. Capped at ~150 ms so
+ *      we don't stall startup on terminals that swallow the query.
+ *   3. Fallback to "dark" — most coding terminals are dark, so this is the
+ *      least surprising default when detection fails.
+ *
+ * Must run BEFORE Ink's `render()` takes over stdin. Ink puts stdin into raw
+ * mode and consumes input itself, so the OSC 11 reply would never reach us.
+ */
+export async function detectTerminalTheme(timeoutMs = 150) {
+    const fromEnv = parseColorFgBg(process.env.COLORFGBG);
+    if (fromEnv)
+        return fromEnv;
+    if (process.stdout.isTTY && process.stdin.isTTY) {
+        const fromOsc = await queryOsc11(timeoutMs);
+        if (fromOsc)
+            return fromOsc;
+    }
+    return "dark";
+}
+/**
+ * COLORFGBG examples:
+ *   "15;0"     → bright-white fg on black bg → dark
+ *   "0;15"     → black fg on bright-white bg → light
+ *   "15;default;0" → some terminals add a default-bg sentinel in the middle.
+ *
+ * ANSI indices 0–6 are typically dark (black, red, green, yellow, blue,
+ * magenta, cyan); 7–15 are typically light (gray-to-white-ish). 7 itself
+ * (white) is ambiguous on some terminals but more often points to light.
+ */
+function parseColorFgBg(value) {
+    if (!value)
+        return null;
+    const parts = value.split(";");
+    const last = parts[parts.length - 1];
+    if (!last)
+        return null;
+    const bg = parseInt(last, 10);
+    if (Number.isNaN(bg))
+        return null;
+    if (bg >= 0 && bg <= 6)
+        return "dark";
+    if (bg >= 7 && bg <= 15)
+        return "light";
+    return null;
+}
+function queryOsc11(timeoutMs) {
+    return new Promise((resolve) => {
+        const stdin = process.stdin;
+        const stdout = process.stdout;
+        let settled = false;
+        const originalRaw = stdin.isRaw;
+        let buffer = "";
+        const cleanup = () => {
+            stdin.removeListener("data", onData);
+            try {
+                stdin.setRawMode(originalRaw);
+            }
+            catch {
+                // ignore — terminal may have already restored
+            }
+            stdin.pause();
+        };
+        const finish = (result) => {
+            if (settled)
+                return;
+            settled = true;
+            clearTimeout(timer);
+            cleanup();
+            resolve(result);
+        };
+        const onData = (chunk) => {
+            buffer += chunk.toString("utf8");
+            // Match `ESC ] 11 ; rgb:RRRR/GGGG/BBBB ST` where ST is BEL (\x07) or
+            // ESC \\. Some terminals reply with shorter hex (rgb:rr/gg/bb).
+            const match = buffer.match(/\x1b\]11;rgb:([0-9a-fA-F]+)\/([0-9a-fA-F]+)\/([0-9a-fA-F]+)(?:\x07|\x1b\\)/);
+            if (!match)
+                return;
+            const [, r, g, b] = match;
+            const lum = relativeLuminance(parseHexChannel(r), parseHexChannel(g), parseHexChannel(b));
+            finish(lum > 0.5 ? "light" : "dark");
+        };
+        try {
+            stdin.setRawMode(true);
+        }
+        catch {
+            resolve(null);
+            return;
+        }
+        stdin.resume();
+        stdin.on("data", onData);
+        const timer = setTimeout(() => finish(null), timeoutMs);
+        try {
+            stdout.write("\x1b]11;?\x07");
+        }
+        catch {
+            finish(null);
+        }
+    });
+}
+/** Normalize a hex channel string of arbitrary length to a 0–1 float. */
+function parseHexChannel(hex) {
+    const max = (1 << (hex.length * 4)) - 1;
+    return parseInt(hex, 16) / max;
+}
+/**
+ * sRGB relative luminance per WCAG 2.x. Output range is 0 (black) to 1 (white).
+ * We treat ≥ 0.5 as "light"; the actual threshold is forgiving because real
+ * terminal backgrounds tend to be near-pure black (≈0.0) or near-pure white
+ * (≈1.0).
+ */
+function relativeLuminance(r, g, b) {
+    const channel = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}

package/dist/tui-ink/footer.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { homedir } from "node:os";
-import { theme } from "./theme.js";
+import { useTheme } from "./theme.js";
 import { PERMISSION_MODE_INFO } from "../permission/mode.js";
 export function FooterBar({ data }) {
+    const theme = useTheme();
     const usageText = data.usageTotals.prompt || data.usageTotals.completion
         ? `↑${formatTokens(data.usageTotals.prompt)} ↓${formatTokens(data.usageTotals.completion)}`
         : "";
@@ -12,10 +13,10 @@ export function FooterBar({ data }) {
             ? ` • ⌃R ${data.thinkingLevel}`
             : " • ⌃R off"
         : "";
-    const traceText = data.verboseTrace ? " • ⌃O details:on" : " • ⌃O details";
-    return (_jsxs(Box, { paddingX: 1, flexShrink: 0, children: [_jsx(Text, { color: theme.muted, children: formatCwd(data.cwd) }), usageText && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.muted, children: "  " }), _jsx(Text, { color: theme.muted, dimColor: true, children: usageText })] })), _jsx(ModeBadge, { mode: data.mode }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: theme.muted, children: data.providerId }), _jsx(Text, { color: theme.muted, children: " \u2022 " }), _jsx(Text, { color: theme.toolName, children: data.model }), _jsxs(Text, { color: theme.muted, dimColor: true, children: [thinkingText, traceText] })] }));
+    return (_jsxs(Box, { paddingX: 1, flexShrink: 0, children: [_jsx(Text, { color: theme.muted, children: formatCwd(data.cwd) }), usageText && (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.muted, children: "  " }), _jsx(Text, { color: theme.muted, dimColor: true, children: usageText })] })), _jsx(ModeBadge, { mode: data.mode }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { color: theme.muted, children: data.providerId }), _jsx(Text, { color: theme.muted, children: " \u2022 " }), _jsx(Text, { color: theme.toolName, children: data.model }), _jsx(Text, { color: theme.muted, dimColor: true, children: thinkingText })] }));
 }
 function ModeBadge({ mode }) {
+    const theme = useTheme();
     if (!mode || mode === "default")
         return null;
     const info = PERMISSION_MODE_INFO[mode];

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

@@ -1,16 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useCursor, useInput, usePaste, useStdout } from "ink";
 import stringWidth from "string-width";
 import { appendFileSync } from "node:fs";
 import { registry as slashRegistry } from "../slash-commands/index.js";
-import { theme } from "./theme.js";
+import { useTheme } from "./theme.js";
 import { filterFileSuggestions, findAtContext, listProjectFiles } from "./file-mentions.js";
 import { ingestClipboardImage, ingestImagePath, isImageFilePath, isScreenshotTempPath, splitPastedPaths, } from "./image-paste.js";
-const MIN_VISIBLE_LINES = 1;
-const MAX_VISIBLE_LINES = 5;
+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 PROMPT = " > ";
 const MAX_VISIBLE_SUGGESTIONS = 8;
 export function needsCursorRowCompensation(nextOutputHeight, viewportRows, previousOutputHeight) {
     const hadPreviousFrame = previousOutputHeight !== null && previousOutputHeight > 0;
@@ -137,12 +138,16 @@ export function insertNewlineAtCursor(text, cursor) {
     };
 }
 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
@@ -248,8 +253,15 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
             }, 0);
         };
         // Strip orphaned focus-event tails that can appear if focus reporting
-        // splits across the paste boundary.
-        const clean = pasted.replace(/\x1b\[I$/, "").replace(/\x1b\[O$/, "");
+        // 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") {
@@ -324,10 +336,19 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
         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);
@@ -460,12 +481,30 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
         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;
         }
@@ -500,14 +539,25 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
         scrollOffset = Math.min(Math.max(cursorVisualRow - Math.floor(visibleLines / 2), 0), totalLines - visibleLines);
     }
     const displayedLines = [];
-    for (let i = 0; i < visibleLines; i++) {
+    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 = [
@@ -601,31 +651,38 @@ export function InputBox({ onSubmit, onPasteNotice, disabled, skillRegistry, ter
     });
     // Reference cursorTick so the effect re-runs on the forced render pass.
     void cursorTick;
-    const borderChar = "─";
-    const topBorder = hasMoreAbove
-        ? `─── ↑ ${scrollOffset} more ${borderChar.repeat(Math.max(0, contentWidth - 14 - scrollOffset.toString().length))}`
-        : borderChar.repeat(contentWidth);
-    const bottomBorder = hasMoreBelow
-        ? `─── ↓ ${totalLines - scrollOffset - visibleLines} more ${borderChar.repeat(Math.max(0, contentWidth - 16 - (totalLines - scrollOffset - visibleLines).toString().length))}`
-        : borderChar.repeat(contentWidth);
+    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));
-                }) })), _jsx(Text, { color: theme.inputBorder, children: topBorder.slice(0, contentWidth) }), _jsx(Box, { flexDirection: "column", paddingX: PADDING_X, children: displayedLines.map(({ text: line, visualIdx }) => {
-                    const displayLine = line.length === 0 ? " " : line;
-                    const isFirst = visualIdx === 0;
-                    const isCursorLine = visualIdx === cursorVisualRow;
-                    return (_jsxs(Box, { height: 1, overflow: "hidden", ref: isCursorLine
-                            ? (el) => {
-                                cursorLineRef.current = el;
-                            }
-                            : undefined, children: [isFirst ? (_jsx(Text, { color: theme.accent, children: PROMPT })) : (_jsx(Text, { children: " ".repeat(PROMPT.length) })), _jsx(Text, { children: displayLine })] }, visualIdx));
-                }) }), _jsx(Text, { color: theme.inputBorder, children: bottomBorder.slice(0, contentWidth) }), showSuggestions && mode === "slash" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [slashSuggestions
+                }) })), _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;
-                        return (_jsx(Box, { height: 1, children: _jsx(Text, { children: i === selectedIndex ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.accent, bold: true, children: "❯ " }), _jsx(Text, { color: theme.accent, bold: true, children: cmd.name.padEnd(16) }), _jsxs(Text, { color: theme.muted, children: [" [", cmd.type, "]"] }), _jsxs(Text, { dimColor: true, children: [" ", cmd.description] })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.muted, children: `  ${cmd.name.padEnd(16)}` }), _jsxs(Text, { dimColor: true, children: [" [", cmd.type, "]"] }), _jsxs(Text, { dimColor: true, children: [" ", cmd.description] })] })) }) }, cmd.name));
+                        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) => {

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

@@ -0,0 +1,16 @@
+export declare function defaultHistoryFilePath(): string;
+export declare function loadHistorySync(filePath?: string): string[];
+export declare function appendHistoryEntry(entry: string, filePath?: string): void;
+export interface HistoryNavState {
+    history: string[];
+    index: number | null;
+    draft: string;
+}
+export interface HistoryNavResult {
+    text: string;
+    index: number | null;
+    draft: string;
+    changed: boolean;
+}
+export declare function stepHistory(state: HistoryNavState, direction: "up" | "down", currentText: string): HistoryNavResult;
+export declare function pushHistoryEntry(history: string[], entry: string): string[];

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

@@ -0,0 +1,81 @@
+import { appendFileSync, existsSync, mkdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { getBubbleHome } from "../bubble-home.js";
+const MAX_HISTORY_ENTRIES = 1000;
+export function defaultHistoryFilePath() {
+    return join(getBubbleHome(), "input-history.jsonl");
+}
+// JSONL on disk: each line is a JSON-encoded string. JSON encoding handles
+// embedded newlines and quotes so multi-line composer entries round-trip safely.
+export function loadHistorySync(filePath = defaultHistoryFilePath()) {
+    try {
+        if (!existsSync(filePath))
+            return [];
+        const raw = readFileSync(filePath, "utf8");
+        const out = [];
+        for (const line of raw.split("\n")) {
+            if (!line)
+                continue;
+            try {
+                const parsed = JSON.parse(line);
+                if (typeof parsed === "string" && parsed.length > 0)
+                    out.push(parsed);
+            }
+            catch {
+                // Malformed line — skip rather than fail the whole load.
+            }
+        }
+        return out.length > MAX_HISTORY_ENTRIES ? out.slice(-MAX_HISTORY_ENTRIES) : out;
+    }
+    catch {
+        return [];
+    }
+}
+export function appendHistoryEntry(entry, filePath = defaultHistoryFilePath()) {
+    if (!entry || entry.trim().length === 0)
+        return;
+    try {
+        mkdirSync(dirname(filePath), { recursive: true });
+        appendFileSync(filePath, JSON.stringify(entry) + "\n", "utf8");
+    }
+    catch {
+        // Persistence is best-effort; never crash the composer over disk IO.
+    }
+}
+// Pure transition for ↑/↓ 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
+// newest entry can restore it.
+export function stepHistory(state, direction, currentText) {
+    const { history, index, draft } = state;
+    const noChange = { text: currentText, index, draft, changed: false };
+    if (direction === "up") {
+        if (history.length === 0)
+            return noChange;
+        if (index === null) {
+            const newIdx = history.length - 1;
+            return { text: history[newIdx], index: newIdx, draft: currentText, changed: true };
+        }
+        if (index > 0) {
+            return { text: history[index - 1], index: index - 1, draft, changed: true };
+        }
+        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
+// submissions don't spam the stack.
+export function pushHistoryEntry(history, entry) {
+    if (!entry || entry.trim().length === 0)
+        return history;
+    if (history.length > 0 && history[history.length - 1] === entry)
+        return history;
+    return [...history, entry];
+}

package/dist/tui-ink/markdown.js

@@ -7,8 +7,8 @@ import React from "react";
 import { Box, Text } from "ink";
 import stringWidth from "string-width";
 import { useTerminalSize } from "./use-terminal-size.js";
-import { theme } from "./theme.js";
-import { highlightCode } from "./code-highlight.js";
+import { useTheme } from "./theme.js";
+import { highlightCode, highlightCodeSync } from "./code-highlight.js";
 const graphemeSegmenter = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function"
     ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
     : null;
@@ -261,31 +261,40 @@ function InlineText({ text }) {
     return _jsx(Text, { children: renderInlineSegments(text, "inline") });
 }
 function CodeBlock({ lang, lines }) {
-    const [highlighted, setHighlighted] = React.useState(null);
+    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.
+    const [highlighted, setHighlighted] = React.useState(() => {
+        const code = lines.join("\n");
+        if (!code)
+            return lines;
+        const sync = highlightCodeSync(code, lang || "text");
+        return sync ? sync.split("\n") : lines;
+    });
+    const upgraded = React.useRef(highlighted !== lines);
     React.useEffect(() => {
+        if (upgraded.current)
+            return;
         let cancelled = false;
-        async function run() {
-            const code = lines.join("\n");
-            if (!code)
+        const code = lines.join("\n");
+        if (!code)
+            return;
+        highlightCode(code, lang || "text")
+            .then((ansi) => {
+            if (cancelled)
                 return;
-            try {
-                const ansi = await highlightCode(code, lang || "text");
-                if (!cancelled)
-                    setHighlighted(ansi.split("\n"));
-            }
-            catch {
-                if (!cancelled)
-                    setHighlighted(lines);
-            }
-        }
-        // Show plain text immediately while highlighting loads
-        setHighlighted(lines);
-        run();
+            upgraded.current = true;
+            setHighlighted(ansi.split("\n"));
+        })
+            .catch(() => { });
         return () => {
             cancelled = true;
         };
     }, [lang, lines]);
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [lang && _jsx(Text, { color: theme.muted, children: lang }), _jsx(Box, { flexDirection: "column", children: highlighted?.map((line, i) => (_jsx(Text, { children: line || " " }, i))) })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [lang && _jsx(Text, { color: theme.muted, children: lang }), _jsx(Box, { flexDirection: "column", children: highlighted.map((line, i) => (_jsx(Text, { children: line || " " }, i))) })] }));
 }
 function TableBlock({ headers, rows, maxWidth, }) {
     const { columns: termWidth } = useTerminalSize();
@@ -354,6 +363,7 @@ function inlineSegmentsWidth(segments) {
     return segments.reduce((sum, segment) => sum + visualWidth(segment.text), 0);
 }
 function HeadingBlock({ level, text }) {
+    const theme = useTheme();
     const props = { bold: true };
     if (level === 1) {
         props.underline = true;