@bubblebrain-ai/bubble 0.0.52 → 0.0.54

package/dist/tui/components/image-preview.js

@@ -0,0 +1,130 @@
+import chalk from "chalk";
+import { Image, getCapabilities, getImageDimensions, truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { darkTheme } from "../model/theme.js";
+import { themeBackground, themeDim, themeForeground } from "../model/theme-style.js";
+function normalizedImage(input) {
+    if ("attachment" in input)
+        return { ...input.attachment, label: input.label };
+    return input;
+}
+export function formatImageBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(bytes < 10 * 1024 ? 1 : 0)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(bytes < 10 * 1024 * 1024 ? 1 : 0)} MB`;
+}
+function formatName(mediaType) {
+    return mediaType.slice("image/".length).replace("jpeg", "JPEG").toUpperCase();
+}
+export function imageDetailLine(input) {
+    const image = normalizedImage(input);
+    const dimensions = getImageDimensions(image.base64, image.mediaType);
+    return [
+        formatName(image.mediaType),
+        dimensions ? `${dimensions.widthPx}×${dimensions.heightPx}` : undefined,
+        formatImageBytes(image.bytes),
+    ].filter(Boolean).join(" · ");
+}
+/** Grok-style transient preview rendered directly above the composer. */
+export class ComposerImagePreviewComponent {
+    getImage;
+    getTheme;
+    cachedKey;
+    cachedImage;
+    constructor(getImage, getTheme = () => darkTheme) {
+        this.getImage = getImage;
+        this.getTheme = getTheme;
+    }
+    render(width) {
+        const input = this.getImage();
+        if (!input || width < 8)
+            return [];
+        const theme = this.getTheme();
+        const image = normalizedImage(input);
+        const innerWidth = Math.max(1, width - 4);
+        const key = `${image.label}:${image.dataUrl.length}:${image.sourcePath ?? image.filename ?? ""}`;
+        if (key !== this.cachedKey) {
+            this.cachedKey = key;
+            this.cachedImage = new Image(image.base64, image.mediaType, { fallbackColor: (text) => themeDim(theme.dim, text) }, {
+                maxWidthCells: Math.min(42, innerWidth),
+                maxHeightCells: 6,
+                filename: image.sourcePath ?? image.filename,
+            });
+        }
+        const header = truncateToWidth(`  ${chalk.bold(themeForeground(theme.inputText, image.label))}  ${themeDim(theme.dim, imageDetailLine(image))}`, width, "");
+        const rows = [themeBackground(theme.backgroundPanel, `${header}${" ".repeat(Math.max(0, width - visibleWidth(header)))}`)];
+        if (getCapabilities().images)
+            rows.push(...(this.cachedImage?.render(innerWidth) ?? []));
+        const path = image.sourcePath ?? image.filename;
+        if (path)
+            rows.push(truncateToWidth(themeDim(theme.dim, `  ${path}`), width));
+        rows.push(truncateToWidth(themeDim(theme.dim, "  Enter to view · Backspace/Delete to remove"), width));
+        return rows;
+    }
+    invalidate() {
+        this.cachedKey = undefined;
+        this.cachedImage?.invalidate();
+    }
+}
+/** Full image inspector used by composer activation and sent-message clicks. */
+export class ImageViewerComponent {
+    onClose;
+    getTheme;
+    focused = false;
+    image;
+    renderer;
+    hovered = false;
+    constructor(input, onClose, getTerminalRows = () => 30, getTheme = () => darkTheme) {
+        this.onClose = onClose;
+        this.getTheme = getTheme;
+        this.image = normalizedImage(input);
+        this.renderer = new Image(this.image.base64, this.image.mediaType, { fallbackColor: (text) => themeDim(this.getTheme().dim, text) }, {
+            maxWidthCells: 100,
+            maxHeightCells: Math.max(1, Math.min(18, getTerminalRows() - 12)),
+            filename: this.image.sourcePath ?? this.image.filename,
+        });
+    }
+    render(width) {
+        const theme = this.getTheme();
+        const safeWidth = Math.max(1, width);
+        if (safeWidth < 4)
+            return [truncateToWidth(this.image.label, safeWidth, "")];
+        const title = `${this.image.label}  ${imageDetailLine(this.image)}`;
+        const titleRow = truncateToWidth(chalk.bold(themeForeground(theme.inputText, title)), Math.max(1, safeWidth - 4), "");
+        const body = this.renderer.render(Math.max(1, safeWidth - 4));
+        const path = this.image.sourcePath ?? this.image.filename;
+        return [
+            themeForeground(theme.border, `┌${"─".repeat(Math.max(0, safeWidth - 2))}┐`),
+            `${themeForeground(theme.border, "│")} ${titleRow}${" ".repeat(Math.max(0, safeWidth - 4 - visibleWidth(titleRow)))} ${themeForeground(theme.border, "│")}`,
+            ...body,
+            ...(path ? [truncateToWidth(themeDim(theme.dim, `  ${path}`), safeWidth)] : []),
+            truncateToWidth(themeDim(theme.dim, `  Esc close${this.hovered ? "  ·  click to close" : ""}`), safeWidth),
+            themeForeground(theme.border, `└${"─".repeat(Math.max(0, safeWidth - 2))}┘`),
+        ];
+    }
+    handleInput(data) {
+        if (data === "\x1b" || data === "q" || data === "Q" || data === "\r")
+            this.onClose();
+    }
+    handleMouse(event) {
+        if (event.kind === "leave") {
+            const changed = this.hovered;
+            this.hovered = false;
+            return changed;
+        }
+        if (event.kind === "move") {
+            const changed = !this.hovered;
+            this.hovered = true;
+            return changed;
+        }
+        if (!event.release && (event.button & 3) === 0) {
+            this.onClose();
+            return true;
+        }
+        return false;
+    }
+    invalidate() {
+        this.renderer.invalidate();
+    }
+}

package/dist/tui/components/plan-dialog.d.ts

@@ -0,0 +1,34 @@
+import { type Component, type Focusable, type TUI } from "@bubblebrain-ai/pi-tui";
+import { type Theme } from "../model/theme.js";
+/**
+ * Full-width plan approval sheet with an embedded multiline editor.
+ *
+ * Enter approves the proposed plan while viewing it. Editing deliberately
+ * changes Enter to a newline; Ctrl+S/Ctrl+D is the explicit save-and-approve
+ * action, matching the pre-migration Ink interaction.
+ */
+export declare class PlanDialogComponent implements Component, Focusable {
+    private readonly getTerminalRows;
+    private readonly getTheme;
+    private stage;
+    private readonly editor;
+    private viewOffset;
+    private viewRows;
+    private viewContentRows;
+    private validationMessage;
+    private hasFocus;
+    private readonly initialPlan;
+    onApprove?: (plan: string) => void;
+    onReject?: () => void;
+    constructor(tui: TUI, initialPlan: string, getTerminalRows: () => number, getTheme?: () => Theme);
+    get focused(): boolean;
+    set focused(value: boolean);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+    private enterEditStage;
+    private renderPlan;
+    private renderEditor;
+    private maxViewOffset;
+    private fitEditorWindow;
+}

package/dist/tui/components/plan-dialog.js

@@ -0,0 +1,196 @@
+import chalk from "chalk";
+import { Editor, matchesKey, wrapTextWithAnsi, } from "@bubblebrain-ai/pi-tui";
+import { createComposerEditorTheme } from "../composer-style.js";
+import { darkTheme } from "../model/theme.js";
+import { themeDim, themeForeground } from "../model/theme-style.js";
+import { paintSheetLine, padSheetLine, safeSheetText } from "./bottom-sheet.js";
+/**
+ * Full-width plan approval sheet with an embedded multiline editor.
+ *
+ * Enter approves the proposed plan while viewing it. Editing deliberately
+ * changes Enter to a newline; Ctrl+S/Ctrl+D is the explicit save-and-approve
+ * action, matching the pre-migration Ink interaction.
+ */
+export class PlanDialogComponent {
+    getTerminalRows;
+    getTheme;
+    stage = "view";
+    editor;
+    viewOffset = 0;
+    viewRows = 0;
+    viewContentRows = 0;
+    validationMessage;
+    hasFocus = false;
+    initialPlan;
+    onApprove;
+    onReject;
+    constructor(tui, initialPlan, getTerminalRows, getTheme = () => darkTheme) {
+        this.getTerminalRows = getTerminalRows;
+        this.getTheme = getTheme;
+        // Plans originate in model output. Keep terminal control sequences out of
+        // both the preview and the editable buffer.
+        this.initialPlan = safeSheetText(initialPlan);
+        this.editor = new Editor(tui, createComposerEditorTheme(getTheme), {
+            borderStyle: "box",
+            paddingX: 1,
+            prompt: "",
+            autocompletePlacement: "below",
+            autocompleteBorderStyle: "none",
+        });
+        this.editor.setText(this.initialPlan);
+        this.editor.onChange = (value) => {
+            if (value.trim())
+                this.validationMessage = undefined;
+        };
+    }
+    get focused() {
+        return this.hasFocus;
+    }
+    set focused(value) {
+        this.hasFocus = value;
+        this.editor.focused = value && this.stage === "edit";
+    }
+    render(width) {
+        const theme = this.getTheme();
+        const safeWidth = Math.max(1, width);
+        const terminalRows = Math.max(1, this.getTerminalRows());
+        // Long plans scroll inside a bounded sheet instead of covering the entire
+        // transcript. On short terminals, keep one row of conversation visible.
+        const sheetRows = terminalRows > 1
+            ? Math.min(18, terminalRows - 1)
+            : 1;
+        const showHelp = sheetRows >= 4;
+        const panelBudget = Math.max(1, sheetRows - (showHelp ? 1 : 0));
+        const panel = this.stage === "edit"
+            ? this.renderEditor(safeWidth, panelBudget, theme)
+            : this.renderPlan(safeWidth, panelBudget, theme);
+        const painted = panel.map((line) => paintSheetLine(line, safeWidth, false, theme));
+        if (!showHelp)
+            return painted;
+        const help = this.stage === "edit"
+            ? "Enter newline  │  Ctrl+S/Ctrl+D save & approve  │  Esc cancel edit"
+            : "↑/↓ scroll  │  Enter/y approve  │  e edit  │  Esc/n reject";
+        return [...painted, themeDim(theme.dim, padSheetLine(help, safeWidth))];
+    }
+    handleInput(data) {
+        if (this.stage === "view") {
+            if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c") || data === "n" || data === "N") {
+                this.onReject?.();
+                return;
+            }
+            if (matchesKey(data, "enter") || data === "y" || data === "Y") {
+                this.onApprove?.(this.initialPlan.trim());
+                return;
+            }
+            if (data === "e" || data === "E") {
+                this.enterEditStage();
+                return;
+            }
+            if (matchesKey(data, "up") || data === "k") {
+                this.viewOffset = Math.max(0, this.viewOffset - 1);
+                return;
+            }
+            if (matchesKey(data, "down") || data === "j") {
+                this.viewOffset = Math.min(this.maxViewOffset(), this.viewOffset + 1);
+            }
+            return;
+        }
+        if (matchesKey(data, "escape")) {
+            this.editor.setText(this.initialPlan);
+            this.validationMessage = undefined;
+            this.stage = "view";
+            this.editor.focused = false;
+            return;
+        }
+        if (matchesKey(data, "ctrl+s") || matchesKey(data, "ctrl+d")) {
+            const finalPlan = this.editor.getExpandedText().trim();
+            if (!finalPlan) {
+                this.validationMessage = "Plan cannot be empty.";
+                return;
+            }
+            this.onApprove?.(finalPlan);
+            return;
+        }
+        if (matchesKey(data, "enter")) {
+            this.editor.insertTextAtCursor("\n");
+            return;
+        }
+        this.editor.handleInput(data);
+    }
+    invalidate() {
+        this.editor.invalidate();
+    }
+    enterEditStage() {
+        this.stage = "edit";
+        this.validationMessage = undefined;
+        this.editor.setText(this.initialPlan);
+        this.editor.focused = this.hasFocus;
+    }
+    renderPlan(width, budget, theme) {
+        const indentWidth = width >= 12 ? 2 : width >= 3 ? 1 : 0;
+        const indent = " ".repeat(indentWidth);
+        const contentWidth = Math.max(1, width - indentWidth * 2);
+        const title = `${indent}${chalk.bold(themeForeground(theme.inputText, "Proposed plan"))}`;
+        const action = (key, label) => `${indent}${themeForeground(theme.accent, key)} ${label}`;
+        if (width < 24 && budget <= 3) {
+            return [action("y", "approve"), action("e", "edit"), action("n", "reject")].slice(0, budget);
+        }
+        const actions = width < 40
+            ? `${indent}${themeForeground(theme.accent, "y")} approve ${themeForeground(theme.accent, "e")} edit ${themeForeground(theme.accent, "n")} reject`
+            : `${indent}${themeForeground(theme.accent, "y")} approve   ${themeForeground(theme.accent, "e")} edit   ${themeForeground(theme.accent, "n")} reject`;
+        if (budget === 1)
+            return [actions];
+        const roomy = budget >= 6;
+        const fixedRows = 2 + (roomy ? 2 : 0);
+        const bodyBudget = Math.max(0, budget - fixedRows);
+        const wrapped = safeSheetText(this.initialPlan)
+            .split("\n")
+            .flatMap((line) => line ? wrapTextWithAnsi(line, contentWidth) : [""]);
+        this.viewRows = bodyBudget;
+        this.viewContentRows = wrapped.length;
+        this.viewOffset = Math.min(this.viewOffset, this.maxViewOffset());
+        const visible = wrapped.slice(this.viewOffset, this.viewOffset + bodyBudget);
+        while (visible.length < bodyBudget)
+            visible.push("");
+        return [
+            title,
+            ...(roomy ? [""] : []),
+            ...visible.map((line) => `${indent}${themeForeground(theme.inputText, line)}`),
+            ...(roomy ? [""] : []),
+            actions,
+        ].slice(0, budget);
+    }
+    renderEditor(width, budget, theme) {
+        const indentWidth = width >= 12 ? 2 : width >= 3 ? 1 : 0;
+        const indent = " ".repeat(indentWidth);
+        const contentWidth = Math.max(1, width - indentWidth * 2);
+        const title = `${indent}${chalk.bold(themeForeground(theme.inputText, "Edit plan"))}`;
+        if (budget === 1)
+            return [title];
+        const errorRows = this.validationMessage ? 1 : 0;
+        const editorBudget = Math.max(1, budget - 1 - errorRows);
+        const renderedEditor = this.editor.render(contentWidth);
+        const visibleEditor = this.fitEditorWindow(renderedEditor, editorBudget);
+        const lines = [title, ...visibleEditor.map((line) => `${indent}${line}`)];
+        if (this.validationMessage) {
+            lines.push(`${indent}${themeForeground(theme.error, this.validationMessage)}`);
+        }
+        return lines.slice(0, budget);
+    }
+    maxViewOffset() {
+        return Math.max(0, this.viewContentRows - this.viewRows);
+    }
+    fitEditorWindow(lines, budget) {
+        if (lines.length <= budget)
+            return lines;
+        if (budget <= 2)
+            return lines.slice(-budget);
+        const top = lines[0];
+        const bottom = lines[lines.length - 1];
+        const body = lines.slice(1, -1);
+        const bodyBudget = budget - 2;
+        const cursorIndex = Math.max(0, body.findIndex((line) => line.includes("\x1b[7m")));
+        const start = Math.max(0, Math.min(cursorIndex - Math.floor(bodyBudget / 2), Math.max(0, body.length - bodyBudget)));
+        return [top, ...body.slice(start, start + bodyBudget), bottom];
+    }
+}

package/dist/tui/components/provider-key-input.d.ts

@@ -0,0 +1,18 @@
+import { Input, type Component } from "@bubblebrain-ai/pi-tui";
+import { type Theme } from "../model/theme.js";
+/**
+ * Inline credential phase used by /provider.
+ *
+ * It deliberately owns a plain masked Input instead of the main Editor so a
+ * credential can never enter composer history, autocomplete, or transcript
+ * state. Its geometry mirrors the model/reasoning command surface: a filled
+ * context row immediately above the normal square composer frame.
+ */
+export declare class ProviderKeyInputComponent implements Component {
+    readonly input: Input;
+    private readonly providerName;
+    private readonly getTheme;
+    constructor(input: Input, providerName: string, getTheme?: () => Theme);
+    render(width: number): string[];
+    invalidate(): void;
+}

package/dist/tui/components/provider-key-input.js

@@ -0,0 +1,49 @@
+import { truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { darkTheme } from "../model/theme.js";
+import { themeBackground, themeDim, themeForeground } from "../model/theme-style.js";
+function fillLine(text, width) {
+    const clipped = truncateToWidth(text, width);
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+/**
+ * Inline credential phase used by /provider.
+ *
+ * It deliberately owns a plain masked Input instead of the main Editor so a
+ * credential can never enter composer history, autocomplete, or transcript
+ * state. Its geometry mirrors the model/reasoning command surface: a filled
+ * context row immediately above the normal square composer frame.
+ */
+export class ProviderKeyInputComponent {
+    input;
+    providerName;
+    getTheme;
+    constructor(input, providerName, getTheme = () => darkTheme) {
+        this.input = input;
+        this.providerName = providerName;
+        this.getTheme = getTheme;
+    }
+    render(width) {
+        const theme = this.getTheme();
+        const borderColor = (text) => themeDim(theme.border, text);
+        const surfaceBackground = (text) => themeBackground(theme.backgroundPanel, text);
+        const safeWidth = Math.max(1, Math.floor(width));
+        const title = `  Enter API Key for ${this.providerName}`;
+        const hint = " · Enter to save · Esc or empty Backspace to return";
+        const surface = surfaceBackground(fillLine(`${themeForeground(theme.accent, "◆")}${title}${themeDim(theme.dim, hint)}`, safeWidth));
+        if (safeWidth < 3) {
+            return [surface, ...this.input.render(safeWidth)];
+        }
+        const innerWidth = safeWidth - 2;
+        const inputLine = this.input.render(innerWidth)[0] ?? " ".repeat(innerWidth);
+        const horizontal = "─".repeat(innerWidth);
+        return [
+            surface,
+            borderColor(`┌${horizontal}┐`),
+            `${borderColor("│")}${fillLine(inputLine, innerWidth)}${borderColor("│")}`,
+            borderColor(`└${horizontal}┘`),
+        ];
+    }
+    invalidate() {
+        this.input.invalidate?.();
+    }
+}

package/dist/tui/components/question-dialog.d.ts

@@ -0,0 +1,25 @@
+import { type Component, type Focusable } from "@bubblebrain-ai/pi-tui";
+import type { QuestionAnswer, QuestionRequest } from "../../question/types.js";
+import { type Theme } from "../model/theme.js";
+/** Request-aware, bottom-docked replacement for the lost Ink QuestionDialog. */
+export declare class QuestionDialogComponent implements Component, Focusable {
+    private readonly request;
+    private readonly getTerminalRows;
+    private readonly getTheme;
+    focused: boolean;
+    private questionIndex;
+    private selectedIndex;
+    private customInput;
+    private answers;
+    onSubmit?: (answers: QuestionAnswer[]) => void;
+    onCancel?: () => void;
+    constructor(request: QuestionRequest, getTerminalRows: () => number, getTheme?: () => Theme);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+    private currentQuestion;
+    private saveCurrentAnswer;
+    private toggleSelectedOption;
+    private commitAndAdvance;
+    private moveToQuestion;
+}