@bubblebrain-ai/bubble 0.0.7 → 0.0.9

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.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Lightweight Markdown renderer for Ink TUI.
+ * Supports code blocks, inline formatting, and tables.
+ */
+export type MarkdownBlock = {
+    type: "paragraph";
+    lines: string[];
+} | {
+    type: "heading";
+    level: number;
+    text: string;
+} | {
+    type: "code";
+    lang: string;
+    lines: string[];
+} | {
+    type: "table";
+    headers: string[];
+    rows: string[][];
+};
+export interface MarkdownInlineSegment {
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    code?: boolean;
+}
+interface InlineStyle {
+    bold?: boolean;
+    italic?: boolean;
+    code?: boolean;
+}
+export declare function parseMarkdownBlocks(text: string): MarkdownBlock[];
+export declare function parseMarkdownInlineSegments(text: string, style?: InlineStyle): MarkdownInlineSegment[];
+export declare function MarkdownContent({ content, maxWidth, }: {
+    content: string;
+    maxWidth?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tui-ink/markdown.js

@@ -0,0 +1,394 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Lightweight Markdown renderer for Ink TUI.
+ * Supports code blocks, inline formatting, and tables.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import stringWidth from "string-width";
+import { useTerminalSize } from "./use-terminal-size.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;
+function splitGraphemes(text) {
+    if (!text)
+        return [];
+    if (graphemeSegmenter) {
+        const out = [];
+        for (const { segment } of graphemeSegmenter.segment(text))
+            out.push(segment);
+        return out;
+    }
+    return Array.from(text);
+}
+export function parseMarkdownBlocks(text) {
+    const lines = text.split("\n");
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Code block
+        if (line.startsWith("```")) {
+            const lang = line.slice(3).trim();
+            i++;
+            const codeLines = [];
+            while (i < lines.length && !lines[i].startsWith("```")) {
+                codeLines.push(lines[i]);
+                i++;
+            }
+            blocks.push({ type: "code", lang, lines: codeLines });
+            i++;
+            continue;
+        }
+        // Table
+        if (line.trim().startsWith("|")) {
+            const tableLines = [];
+            while (i < lines.length && lines[i].trim().startsWith("|")) {
+                tableLines.push(lines[i]);
+                i++;
+            }
+            if (tableLines.length >= 2) {
+                const headers = parseTableRow(tableLines[0]);
+                if (headers.length > 0 && isTableSeparatorRow(tableLines[1], headers.length)) {
+                    const rows = tableLines.slice(2).map((rowLine) => normalizeTableRow(parseTableRow(rowLine), headers.length));
+                    blocks.push({ type: "table", headers, rows });
+                }
+                else {
+                    blocks.push({ type: "paragraph", lines: tableLines });
+                }
+            }
+            else {
+                blocks.push({ type: "paragraph", lines: tableLines });
+            }
+            continue;
+        }
+        // Heading
+        const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
+        if (headingMatch) {
+            blocks.push({ type: "heading", level: headingMatch[1].length, text: headingMatch[2].trim() });
+            i++;
+            continue;
+        }
+        // Empty line -> skip
+        if (line.trim() === "") {
+            i++;
+            continue;
+        }
+        // Paragraph
+        const paraLines = [];
+        while (i < lines.length &&
+            lines[i].trim() !== "" &&
+            !lines[i].startsWith("```") &&
+            !lines[i].trim().startsWith("|")) {
+            paraLines.push(lines[i]);
+            i++;
+        }
+        blocks.push({ type: "paragraph", lines: paraLines });
+    }
+    return blocks;
+}
+function parseTableRow(line) {
+    let body = line.trim();
+    if (body.startsWith("|"))
+        body = body.slice(1);
+    if (endsWithUnescapedPipe(body))
+        body = body.slice(0, -1);
+    const cells = [];
+    let current = "";
+    let inCode = false;
+    for (let i = 0; i < body.length; i++) {
+        const char = body[i];
+        if (char === "\\" && i + 1 < body.length) {
+            current += body[i + 1];
+            i++;
+            continue;
+        }
+        if (char === "`") {
+            inCode = !inCode;
+            current += char;
+            continue;
+        }
+        if (char === "|" && !inCode) {
+            cells.push(current.trim());
+            current = "";
+            continue;
+        }
+        current += char;
+    }
+    cells.push(current.trim());
+    return cells;
+}
+function endsWithUnescapedPipe(text) {
+    if (!text.endsWith("|"))
+        return false;
+    let slashCount = 0;
+    for (let i = text.length - 2; i >= 0 && text[i] === "\\"; i--)
+        slashCount++;
+    return slashCount % 2 === 0;
+}
+function isTableSeparatorRow(line, expectedColumns) {
+    const cells = parseTableRow(line);
+    if (cells.length !== expectedColumns)
+        return false;
+    return cells.every((cell) => /^:?-{3,}:?$/.test(cell.replace(/\s+/g, "")));
+}
+function normalizeTableRow(row, colCount) {
+    const normalized = row.slice(0, colCount);
+    while (normalized.length < colCount)
+        normalized.push("");
+    return normalized;
+}
+function visualWidth(str) {
+    if (!str)
+        return 0;
+    return stringWidth(str);
+}
+function graphemeWidth(grapheme) {
+    if (!grapheme)
+        return 0;
+    return stringWidth(grapheme);
+}
+// Inline formatting: bold, italic, inline code
+export function parseMarkdownInlineSegments(text, style = {}) {
+    const segments = [];
+    let buffer = "";
+    let i = 0;
+    const flush = () => {
+        appendInlineSegment(segments, buffer, style);
+        buffer = "";
+    };
+    while (i < text.length) {
+        const char = text[i];
+        if (char === "\\" && i + 1 < text.length) {
+            buffer += text[i + 1];
+            i += 2;
+            continue;
+        }
+        if (char === "`") {
+            const close = findClosingMarker(text, "`", i + 1);
+            if (close !== -1) {
+                flush();
+                appendInlineSegment(segments, text.slice(i + 1, close), { ...style, code: true });
+                i = close + 1;
+                continue;
+            }
+        }
+        const marker = inlineMarkerAt(text, i);
+        if (marker) {
+            const close = findClosingMarker(text, marker, i + marker.length);
+            if (close !== -1 && close > i + marker.length) {
+                flush();
+                const inner = text.slice(i + marker.length, close);
+                const nextStyle = marker === "***"
+                    ? { ...style, bold: true, italic: true }
+                    : marker === "**" || marker === "__"
+                        ? { ...style, bold: true }
+                        : { ...style, italic: true };
+                for (const segment of parseMarkdownInlineSegments(inner, nextStyle)) {
+                    appendInlineSegment(segments, segment.text, segment);
+                }
+                i = close + marker.length;
+                continue;
+            }
+        }
+        buffer += char;
+        i++;
+    }
+    flush();
+    return segments.length > 0 ? segments : [{ text, ...style }];
+}
+function inlineMarkerAt(text, index) {
+    for (const marker of ["***", "**", "__", "*", "_"]) {
+        if (!text.startsWith(marker, index))
+            continue;
+        if (marker.includes("_") && isIntraWordUnderscore(text, index, marker.length))
+            continue;
+        return marker;
+    }
+    return null;
+}
+function findClosingMarker(text, marker, start) {
+    for (let i = start; i <= text.length - marker.length; i++) {
+        if (text[i] === "\\") {
+            i++;
+            continue;
+        }
+        if (!text.startsWith(marker, i))
+            continue;
+        if (marker.includes("_") && isIntraWordUnderscore(text, i, marker.length))
+            continue;
+        return i;
+    }
+    return -1;
+}
+function isIntraWordUnderscore(text, index, markerLength) {
+    const before = text[index - 1];
+    const after = text[index + markerLength];
+    return isWordChar(before) && isWordChar(after);
+}
+function isWordChar(char) {
+    return !!char && /[A-Za-z0-9]/.test(char);
+}
+function appendInlineSegment(segments, text, style) {
+    if (!text)
+        return;
+    const previous = segments[segments.length - 1];
+    const next = {
+        text,
+        bold: style.bold || undefined,
+        italic: style.italic || undefined,
+        code: style.code || undefined,
+    };
+    if (previous &&
+        previous.bold === next.bold &&
+        previous.italic === next.italic &&
+        previous.code === next.code) {
+        previous.text += text;
+    }
+    else {
+        segments.push(next);
+    }
+}
+function renderInlineSegments(text, keyPrefix, style = {}) {
+    return parseMarkdownInlineSegments(text, style).map((segment, index) => (_jsx(Text, { bold: segment.bold, italic: segment.italic, color: segment.code ? "#a78bfa" : undefined, children: segment.text }, `${keyPrefix}-${index}`)));
+}
+function inlinePlainText(text) {
+    return parseMarkdownInlineSegments(text).map((segment) => segment.text).join("");
+}
+function InlineText({ text }) {
+    return _jsx(Text, { children: renderInlineSegments(text, "inline") });
+}
+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.
+    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;
+        const code = lines.join("\n");
+        if (!code)
+            return;
+        highlightCode(code, lang || "text")
+            .then((ansi) => {
+            if (cancelled)
+                return;
+            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))) })] }));
+}
+function TableBlock({ headers, rows, maxWidth, }) {
+    const { columns: termWidth } = useTerminalSize();
+    const colCount = headers.length;
+    // Reserve a buffer so the table fits even when wrapped inside an indented
+    // box (e.g. the timeline gutter contributes marginLeft + "⛬  " = 5 cells).
+    const budget = Math.max(20, (maxWidth ?? termWidth) - 8);
+    const maxWidths = headers.map((h, i) => {
+        let max = visualWidth(inlinePlainText(h));
+        for (const row of rows) {
+            const cell = row[i] || "";
+            max = Math.max(max, visualWidth(inlinePlainText(cell)));
+        }
+        return max;
+    });
+    const totalInnerWidth = maxWidths.reduce((a, b) => a + b, 0);
+    const separatorsWidth = colCount * 3 + 1; // " │ " separators + outer edges
+    const totalWidth = totalInnerWidth + separatorsWidth;
+    let widths = [...maxWidths];
+    if (totalWidth > budget) {
+        const available = Math.max(budget - separatorsWidth, colCount * 4);
+        const ratio = totalInnerWidth > 0 ? available / totalInnerWidth : 1;
+        widths = maxWidths.map((w) => Math.max(4, Math.floor(w * ratio)));
+    }
+    const top = "┌" + widths.map((w) => "─".repeat(w + 2)).join("┬") + "┐";
+    const mid = "├" + widths.map((w) => "─".repeat(w + 2)).join("┼") + "┤";
+    const bot = "└" + widths.map((w) => "─".repeat(w + 2)).join("┴") + "┘";
+    const renderRow = (cells, keyPrefix, isHeader = false) => (_jsxs(Text, { children: ["│ ", cells.map((c, i) => (_jsxs(React.Fragment, { children: [renderTableCell(c, widths[i] ?? 4, isHeader, `${keyPrefix}-cell-${i}`), i < colCount - 1 ? " │ " : " │"] }, i)))] }, keyPrefix));
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { children: top }), renderRow(headers, "header", true), _jsx(Text, { children: mid }), rows.map((row, ri) => renderRow(row, `row-${ri}`)), _jsx(Text, { children: bot })] }));
+}
+function renderTableCell(cell, width, isHeader, keyPrefix) {
+    const segments = truncateInlineSegments(parseMarkdownInlineSegments(cell, { bold: isHeader }), width);
+    const padding = " ".repeat(Math.max(0, width - inlineSegmentsWidth(segments)));
+    return [
+        ...segments.map((segment, index) => (_jsx(Text, { bold: segment.bold, italic: segment.italic, color: segment.code ? "#a78bfa" : undefined, children: segment.text }, `${keyPrefix}-${index}`))),
+        _jsx(Text, { children: padding }, `${keyPrefix}-pad`),
+    ];
+}
+function truncateInlineSegments(segments, width) {
+    if (inlineSegmentsWidth(segments) <= width)
+        return segments;
+    if (width <= 1)
+        return [{ text: "…" }];
+    const target = width - 1;
+    const output = [];
+    let used = 0;
+    for (const segment of segments) {
+        let text = "";
+        for (const grapheme of splitGraphemes(segment.text)) {
+            const gWidth = graphemeWidth(grapheme);
+            if (used + gWidth > target) {
+                if (text)
+                    appendInlineSegment(output, text, segment);
+                appendInlineSegment(output, "…", {});
+                return output;
+            }
+            text += grapheme;
+            used += gWidth;
+        }
+        appendInlineSegment(output, text, segment);
+    }
+    appendInlineSegment(output, "…", {});
+    return output;
+}
+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;
+        props.color = theme.accent;
+    }
+    else if (level === 2) {
+        props.color = theme.accent;
+    }
+    else if (level === 3) {
+        props.color = theme.warning;
+    }
+    return (_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { ...props, children: text }) }));
+}
+export function MarkdownContent({ content, maxWidth, }) {
+    const blocks = React.useMemo(() => parseMarkdownBlocks(content), [content]);
+    return (_jsx(Box, { flexDirection: "column", children: blocks.map((block, i) => {
+            if (block.type === "code") {
+                return _jsx(CodeBlock, { lang: block.lang, lines: block.lines }, i);
+            }
+            if (block.type === "table") {
+                return (_jsx(TableBlock, { headers: block.headers, rows: block.rows, maxWidth: maxWidth }, i));
+            }
+            if (block.type === "heading") {
+                return _jsx(HeadingBlock, { level: block.level, text: block.text }, i);
+            }
+            return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: block.lines.map((line, li) => (_jsx(InlineText, { text: line }, li))) }, i));
+        }) }));
+}

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

@@ -0,0 +1,33 @@
+import React from "react";
+import type { DisplayMessage, DisplayMessagePart, DisplayToolCall } from "./display-history.js";
+/**
+ * Hint surfaced when the user can interrupt the currently-running pending tool
+ * via the approval dialog. The match is loose (by request type → tool name),
+ * since ApprovalRequest does not carry a toolCallId today.
+ */
+export interface PendingApprovalHint {
+    toolName: "edit" | "write" | "bash";
+    path?: string;
+    command?: string;
+}
+interface MessageListProps {
+    messages: DisplayMessage[];
+    streamingContent: string;
+    streamingReasoning: string;
+    streamingTools: DisplayToolCall[];
+    streamingParts: DisplayMessagePart[];
+    terminalColumns: number;
+    verboseTrace: boolean;
+    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.
+     */
+    welcomeBanner?: React.ReactNode;
+}
+export declare function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, pendingApproval, nowTick, welcomeBanner, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export {};