@bubblebrain-ai/bubble 0.0.12 → 0.0.13

package/dist/tui-opentui/markdown.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+/** @jsxImportSource @opentui/react */
+/**
+ * Markdown rendering for the OpenTUI-based TUI.
+ *
+ * The previous Ink implementation hand-parsed markdown into block primitives
+ * because Ink had no native markdown support. OpenTUI ships
+ * `MarkdownRenderable` as a built-in (tree-sitter backed), so most of the
+ * 600+ lines of parsing logic collapse to a single intrinsic element.
+ *
+ * Public exports are kept compatible with the old Ink module so consumers
+ * (message-list, plan-confirm) don't need import changes.
+ */
+import React from "react";
+import { useTheme } from "./theme.js";
+/**
+ * Detect the byte offset where the last complete block ends. Used by the
+ * streaming renderer to keep already-finalized blocks stable while the
+ * trailing block is still being typed.
+ */
+export function findLastBlockStart(text) {
+    // Walk backwards to find the start of the trailing incomplete block.
+    // A block break is a blank line (two newlines) at column 0. If we are
+    // inside an unclosed ```/~~~ fence, the trailing block extends back to
+    // the fence opener.
+    const lastFenceOpen = findUnclosedFenceStart(text);
+    if (lastFenceOpen !== -1)
+        return lastFenceOpen;
+    const idx = text.lastIndexOf("\n\n");
+    return idx === -1 ? 0 : idx + 2;
+}
+function findUnclosedFenceStart(text) {
+    let cursor = 0;
+    let openAt = -1;
+    let openMarker = null;
+    for (const line of text.split("\n")) {
+        const trimmed = line.replace(/^ {0,3}/, "");
+        if (openMarker === null) {
+            if (trimmed.startsWith("```")) {
+                openMarker = "`";
+                openAt = cursor;
+            }
+            else if (trimmed.startsWith("~~~")) {
+                openMarker = "~";
+                openAt = cursor;
+            }
+        }
+        else if (trimmed.startsWith(openMarker.repeat(3))) {
+            openMarker = null;
+            openAt = -1;
+        }
+        cursor += line.length + 1;
+    }
+    return openMarker === null ? -1 : openAt;
+}
+/** Stub kept for test compatibility — OpenTUI parses internally. */
+export function parseMarkdownBlocks(text) {
+    const lines = text.split("\n");
+    const blocks = [];
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        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;
+        }
+        if (/^#{1,6}\s/.test(line)) {
+            const match = /^(#{1,6})\s+(.*)$/.exec(line);
+            if (match) {
+                blocks.push({ type: "heading", level: match[1].length, text: match[2] });
+                i++;
+                continue;
+            }
+        }
+        if (line.trim() === "") {
+            i++;
+            continue;
+        }
+        const paragraph = [];
+        while (i < lines.length && lines[i].trim() !== "" && !lines[i].startsWith("```")) {
+            paragraph.push(lines[i]);
+            i++;
+        }
+        blocks.push({ type: "paragraph", lines: paragraph });
+    }
+    return blocks;
+}
+/** Stub kept for test compatibility. */
+export function parseMarkdownInlineSegments(text, style = {}) {
+    return [{ text, ...style }];
+}
+/**
+ * Render a complete (non-streaming) markdown blob. OpenTUI's MarkdownRenderable
+ * handles parse + style + code highlighting via tree-sitter internally.
+ */
+export function MarkdownContent({ content, terminalColumns }) {
+    const theme = useTheme();
+    if (!content)
+        return null;
+    return (_jsx("box", { style: { flexDirection: "column", width: terminalColumns ? terminalColumns - 2 : undefined }, children: React.createElement("markdown", {
+            content,
+            style: {
+                textColor: theme.userMessageText,
+                codeBackgroundColor: theme.inputBg,
+                codeTextColor: theme.code,
+                headerColor: theme.brand,
+                linkColor: theme.traceCommand,
+            },
+        }) }));
+}
+/**
+ * Streaming variant. With OpenTUI's double-buffered renderer there's no
+ * tearing penalty for re-parsing on every token — the renderer composes the
+ * full frame natively before swapping. So we just delegate to the same
+ * primitive and let it handle partial input.
+ */
+export function StreamingMarkdown({ content, terminalColumns }) {
+    return _jsx(MarkdownContent, { content: content, terminalColumns: terminalColumns });
+}

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

@@ -0,0 +1,31 @@
+/** @jsxImportSource @opentui/react */
+import React from "react";
+import type { DisplayMessage, DisplayMessagePart, DisplayToolCall } from "./display-history.js";
+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;
+    nowTick?: number;
+    welcomeBanner?: React.ReactNode;
+}
+/**
+ * Scrollback-style message list following opencode visual rules:
+ *
+ *  - User messages: `›` (U+203A) prefix in accent color, plain text body
+ *  - Assistant messages: full-width body in `theme.text`, no chrome
+ *  - Reasoning: `Thinking:` prefix in textMuted
+ *  - Tools: dim title row + paddingLeft=1 body
+ *  - No borders, no bubbles, no role badges — everything is text rhythm
+ */
+export declare function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, welcomeBanner, }: MessageListProps): React.ReactNode;
+export {};

package/dist/tui-opentui/message-list.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { useTheme } from "./theme.js";
+import { MarkdownContent, StreamingMarkdown } from "./markdown.js";
+import { EDIT_COLLAPSED_DIFF_LINES, getEditDiffDetails } from "./edit-diff.js";
+/**
+ * Scrollback-style message list following opencode visual rules:
+ *
+ *  - User messages: `›` (U+203A) prefix in accent color, plain text body
+ *  - Assistant messages: full-width body in `theme.text`, no chrome
+ *  - Reasoning: `Thinking:` prefix in textMuted
+ *  - Tools: dim title row + paddingLeft=1 body
+ *  - No borders, no bubbles, no role badges — everything is text rhythm
+ */
+export function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, welcomeBanner, }) {
+    const hasStreaming = !!(streamingContent ||
+        streamingReasoning ||
+        streamingTools.length > 0 ||
+        streamingParts.length > 0);
+    return (_jsxs("box", { style: { flexDirection: "column", flexShrink: 0 }, children: [welcomeBanner, messages.map((msg, i) => (_jsx(MessageItem, { message: msg, terminalColumns: terminalColumns, verboseTrace: verboseTrace }, msg.key ?? `message-${i}`))), hasStreaming && (_jsx(StreamingMessage, { content: streamingContent, reasoning: streamingReasoning, tools: streamingTools, parts: streamingParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace }))] }));
+}
+function MessageItem({ message, terminalColumns, verboseTrace, }) {
+    const theme = useTheme();
+    if (message.role === "user") {
+        return _jsx(UserMessageBlock, { content: message.content, theme: theme });
+    }
+    if (message.role === "error") {
+        return (_jsx("box", { style: { marginBottom: 1, flexDirection: "column" }, children: _jsx("text", { fg: theme.error, content: `Error: ${message.content}` }) }));
+    }
+    if (message.syntheticKind === "ui_compact_summary") {
+        return _jsx(CompactionSummaryBlock, { message: message, theme: theme });
+    }
+    const hasVisible = !!message.content ||
+        (message.toolCalls?.length ?? 0) > 0 ||
+        (message.parts?.length ?? 0) > 0 ||
+        (!!message.reasoning && verboseTrace);
+    if (!hasVisible)
+        return null;
+    return (_jsxs("box", { style: { marginTop: 1, marginBottom: 1, flexDirection: "column" }, children: [message.reasoning && verboseTrace && _jsx(ReasoningBlock, { reasoning: message.reasoning, theme: theme }), message.parts && message.parts.length > 0 ? (_jsx(MessageParts, { parts: message.parts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, theme: theme })) : (_jsxs(_Fragment, { children: [message.toolCalls && _jsx(ToolsPart, { toolCalls: message.toolCalls, terminalColumns: terminalColumns, verboseTrace: verboseTrace, theme: theme }), message.content && _jsx(MarkdownContent, { content: message.content, terminalColumns: terminalColumns })] }))] }));
+}
+function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, verboseTrace, }) {
+    const theme = useTheme();
+    const visibleParts = parts.length > 0 ? parts : fallbackStreamingParts(content, tools);
+    return (_jsxs("box", { style: { flexDirection: "column", marginTop: 1 }, children: [reasoning && verboseTrace && _jsx(ReasoningBlock, { reasoning: reasoning, theme: theme }), visibleParts.length > 0 && (_jsx(MessageParts, { parts: visibleParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, streaming: true, theme: theme }))] }));
+}
+function fallbackStreamingParts(content, tools) {
+    const out = [];
+    if (tools.length > 0)
+        out.push({ type: "tools", toolCalls: tools });
+    if (content)
+        out.push({ type: "text", content });
+    return out;
+}
+function MessageParts({ parts, terminalColumns, verboseTrace, streaming = false, theme, }) {
+    return (_jsx("box", { style: { flexDirection: "column" }, children: parts.map((part, idx) => {
+            if (part.type === "text") {
+                if (streaming && idx === parts.length - 1) {
+                    return _jsx(StreamingMarkdown, { content: part.content, terminalColumns: terminalColumns }, `text-${idx}`);
+                }
+                return _jsx(MarkdownContent, { content: part.content, terminalColumns: terminalColumns }, `text-${idx}`);
+            }
+            return _jsx(ToolsPart, { toolCalls: part.toolCalls, terminalColumns: terminalColumns, verboseTrace: verboseTrace, theme: theme }, `tools-${idx}`);
+        }) }));
+}
+/**
+ * User message: `›` prefix in accent color, body in accent color. No border
+ * or background — flows in scrollback as raw colored text. opencode pattern.
+ */
+function UserMessageBlock({ content, theme }) {
+    const lines = content.split("\n");
+    return (_jsx("box", { style: { marginTop: 1, marginBottom: 1, flexDirection: "column" }, children: lines.map((line, i) => (_jsxs("text", { fg: theme.userMessageText, children: [i === 0 ? "› " : "  ", line || " "] }, `u-${i}`))) }));
+}
+function ReasoningBlock({ reasoning, theme }) {
+    return (_jsx("box", { style: { flexDirection: "column", marginBottom: 1 }, children: reasoning.split("\n").map((line, i) => (_jsxs("text", { fg: theme.textMuted, children: [i === 0 ? "Thinking: " : "          ", line] }, `r-${i}`))) }));
+}
+function CompactionSummaryBlock({ message, theme }) {
+    return (_jsxs("box", { style: { flexDirection: "column", marginTop: 1, marginBottom: 1 }, children: [_jsx("text", { fg: theme.textMuted, attributes: 1, content: "\u2500\u2500 context compacted \u2500\u2500" }), message.content && (_jsx("text", { fg: theme.textMuted, content: message.content }))] }));
+}
+function ToolsPart({ toolCalls, terminalColumns, verboseTrace, theme, }) {
+    return (_jsx("box", { style: { flexDirection: "column", marginTop: 1 }, children: toolCalls.map((tc) => (_jsx(ToolCard, { tool: tc, terminalColumns: terminalColumns, verboseTrace: verboseTrace, theme: theme }, tc.id))) }));
+}
+/**
+ * Tool card: dim title line + indented body. No icons, no per-tool colors —
+ * pure text rhythm so the eye reads the header as a section break and the
+ * body as content. Matches opencode's `theme.block` pattern.
+ */
+function ToolCard({ tool, terminalColumns, verboseTrace, theme, }) {
+    const pending = tool.result === undefined;
+    const error = tool.isError;
+    const target = describeToolTarget(tool);
+    const headerColor = pending ? theme.toolPending : error ? theme.toolError : theme.textMuted;
+    const titleText = target ? `${tool.name}  ${target}` : tool.name;
+    const editDetails = (tool.name === "edit" || tool.name === "multiedit" || tool.name === "write")
+        ? getEditDiffDetails(tool)
+        : null;
+    return (_jsxs("box", { style: { flexDirection: "column", marginBottom: 1 }, children: [_jsx("text", { fg: headerColor, content: titleText }), _jsxs("box", { style: { paddingLeft: 1, flexDirection: "column" }, children: [!pending && tool.result && verboseTrace && (_jsx(ToolResultPreview, { result: tool.result, error: error, terminalColumns: terminalColumns, theme: theme })), editDetails && editDetails.diff && (_jsx(EditDiffPreview, { diff: editDetails.diff, theme: theme }))] })] }));
+}
+function describeToolTarget(tool) {
+    const args = tool.args || {};
+    if (typeof args.path === "string")
+        return args.path;
+    if (typeof args.command === "string")
+        return args.command.slice(0, 80);
+    if (typeof args.pattern === "string")
+        return args.pattern;
+    if (typeof args.url === "string")
+        return args.url;
+    if (typeof args.query === "string")
+        return args.query;
+    return "";
+}
+function ToolResultPreview({ result, error, terminalColumns, theme, }) {
+    const lines = result.split("\n").slice(0, 8);
+    const maxLen = Math.max(20, terminalColumns - 8);
+    return (_jsx("box", { style: { flexDirection: "column" }, children: lines.map((line, i) => (_jsx("text", { fg: error ? theme.toolError : theme.text, content: line.length > maxLen ? line.slice(0, maxLen - 1) + "…" : line }, `r-${i}`))) }));
+}
+function EditDiffPreview({ diff, theme }) {
+    const allLines = diff.split("\n");
+    const shown = allLines.slice(0, EDIT_COLLAPSED_DIFF_LINES);
+    const overflow = allLines.length - shown.length;
+    return (_jsxs("box", { style: { flexDirection: "column" }, children: [shown.map((line, i) => {
+                const kind = line.startsWith("+") ? "+" : line.startsWith("-") ? "-" : " ";
+                const fg = kind === "+" ? theme.diffAddFg : kind === "-" ? theme.diffRemoveFg : theme.textMuted;
+                return _jsx("text", { fg: fg, content: line }, `d-${i}`);
+            }), overflow > 0 && _jsx("text", { fg: theme.textMuted, content: `  … +${overflow} more lines` })] }));
+}

package/dist/tui-opentui/model-picker.d.ts

@@ -0,0 +1,63 @@
+/** @jsxImportSource @opentui/react */
+import React from "react";
+import { ProviderRegistry } from "../provider-registry.js";
+export { padVisual, truncateVisual } from "../text-display.js";
+export interface ModelPickerOption {
+    id: string;
+    label: string;
+    group: string;
+    providerBadge: string;
+}
+export type PickerKeyAction = "up" | "down" | "enter" | "escape" | "backspace" | "delete";
+export declare function resolvePickerKeyAction(input: string, key: {
+    upArrow?: boolean;
+    downArrow?: boolean;
+    return?: boolean;
+    escape?: boolean;
+    backspace?: boolean;
+    delete?: boolean;
+}): PickerKeyAction | undefined;
+export declare function isPrintablePickerInput(input: string): boolean;
+export declare function formatSkillPickerRow(skill: {
+    name: string;
+    description?: string;
+}, options: {
+    selected: boolean;
+    width: number;
+}): string;
+export interface ModelPickerProps {
+    registry: ProviderRegistry;
+    current: string;
+    recent: string[];
+    onSelect: (model: string) => void;
+    onCancel: () => void;
+}
+export declare function ModelPicker({ registry, current, recent, onSelect, onCancel }: ModelPickerProps): React.ReactNode;
+export declare function buildLocalModelOptions(registry: ProviderRegistry, current: string, recent: string[]): ModelPickerOption[];
+export interface ProviderPickerProps {
+    providers: Array<{
+        id: string;
+        name: string;
+        enabled: boolean;
+    }>;
+    current?: string;
+    onSelect: (providerId: string) => void;
+    onCancel: () => void;
+    title?: string;
+}
+export declare function ProviderPicker({ providers, current, onSelect, onCancel, title }: ProviderPickerProps): React.ReactNode;
+export interface KeyPickerProps {
+    providerName: string;
+    onSubmit: (key: string) => void;
+    onCancel: () => void;
+}
+export declare function KeyPicker({ providerName, onSubmit, onCancel }: KeyPickerProps): React.ReactNode;
+export interface SkillPickerProps {
+    skills: Array<{
+        name: string;
+        description: string;
+    }>;
+    onSelect: (name: string) => void;
+    onCancel: () => void;
+}
+export declare function SkillPicker({ skills, onSelect, onCancel }: SkillPickerProps): React.ReactNode;