@bubblebrain-ai/bubble 0.0.7 → 0.0.8

package/dist/tui-ink/markdown.js

@@ -0,0 +1,384 @@
+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 { theme } from "./theme.js";
+import { highlightCode } 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 [highlighted, setHighlighted] = React.useState(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        async function run() {
+            const code = lines.join("\n");
+            if (!code)
+                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();
+        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 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 {};