@bubblebrain-ai/bubble 0.0.52 → 0.0.53

package/dist/tui/components/welcome.d.ts

@@ -0,0 +1,20 @@
+import { type Component } from "@bubblebrain-ai/pi-tui";
+import { type Theme } from "../model/theme.js";
+export interface WelcomeBannerData {
+    cwd: string;
+    session?: string;
+    model: string;
+    provider?: string;
+    thinking?: string;
+    updateNotice?: string;
+    theme?: Theme;
+}
+/** Width-responsive Bubble welcome, rendered from live app state. */
+export declare class WelcomeBannerComponent implements Component {
+    private readonly getData;
+    constructor(getData: () => WelcomeBannerData);
+    render(width: number): string[];
+    invalidate(): void;
+}
+export declare function renderWelcomeBanner(data: WelcomeBannerData, columns: number): string[];
+export declare function formatWelcomeModel(data: Pick<WelcomeBannerData, "model" | "provider" | "thinking">): string;

package/dist/tui/components/welcome.js

@@ -0,0 +1,133 @@
+import { createRequire } from "node:module";
+import chalk from "chalk";
+import stringWidth from "string-width";
+import { truncateToWidth } from "@bubblebrain-ai/pi-tui";
+import { displayModel } from "../../provider-registry.js";
+import { isThinkingOnlyModel, isThinkingToggleModel } from "../../provider-transform.js";
+import { darkTheme } from "../model/theme.js";
+import { themeDim, themeForeground } from "../model/theme-style.js";
+const require = createRequire(import.meta.url);
+const PACKAGE_VERSION = readPackageVersion();
+const COMPACT_CAT = [
+    " ▄  ▄ ",
+    "██████",
+    "█ ██ █",
+    "██████",
+    " ▀  ▀ ",
+];
+/** Width-responsive Bubble welcome, rendered from live app state. */
+export class WelcomeBannerComponent {
+    getData;
+    constructor(getData) {
+        this.getData = getData;
+    }
+    render(width) {
+        return renderWelcomeBanner(this.getData(), width);
+    }
+    invalidate() {
+        // No cache: width and model/session data are both live inputs.
+    }
+}
+export function renderWelcomeBanner(data, columns) {
+    const theme = data.theme ?? darkTheme;
+    const available = Math.max(1, Math.floor(columns));
+    if (available < 24) {
+        return [
+            truncateToWidth(chalk.bold(themeForeground(theme.accent, "Bubble")) + themeDim(theme.dim, " · /help"), available),
+            "",
+        ];
+    }
+    const cardWidth = Math.min(96, available - 2);
+    const contentWidth = cardWidth - 6; // border + two-cell horizontal padding
+    const margin = " ".repeat(Math.max(0, Math.floor((available - cardWidth) / 2)));
+    const border = (value) => themeDim(theme.border, value);
+    const row = (content = "") => {
+        const fitted = truncateToWidth(content, contentWidth);
+        const padded = `${fitted}${" ".repeat(Math.max(0, contentWidth - stringWidth(fitted)))}`;
+        return `${margin}${border("│")}  ${padded}  ${border("│")}`;
+    };
+    const rows = [
+        `${margin}${border(`╭${"─".repeat(Math.max(0, cardWidth - 2))}╮`)}`,
+        row(),
+    ];
+    if (contentWidth >= 34) {
+        const gradientFrom = validGradientColor(theme.bannerGradientFrom, darkTheme.bannerGradientFrom);
+        const gradientTo = validGradientColor(theme.bannerGradientTo, darkTheme.bannerGradientTo);
+        const title = gradient("Welcome to Bubble!", gradientFrom, gradientTo);
+        const subtitle = themeDim(theme.dim, "I am a cat and you can send /help for help information.");
+        const copy = ["", title, subtitle, "", ""];
+        for (let index = 0; index < COMPACT_CAT.length; index++) {
+            const cat = chalk.bold.hex(interpolateHex(gradientFrom, gradientTo, index / (COMPACT_CAT.length - 1)))(COMPACT_CAT[index]);
+            rows.push(row(`${cat}  ${copy[index] ?? ""}`));
+        }
+    }
+    else {
+        rows.push(row(chalk.bold(themeForeground(theme.accent, "Welcome to Bubble!"))));
+        rows.push(row(themeDim(theme.dim, "Send /help for help")));
+    }
+    rows.push(row());
+    const labels = ["Directory:", "Session:", "Model:", "Version:"];
+    const labelWidth = Math.max(...labels.map((label) => label.length)) + 1;
+    const model = formatWelcomeModel(data);
+    const info = [
+        ["Directory:", data.cwd],
+        ...(data.session ? [["Session:", data.session]] : []),
+        ["Model:", model],
+        ["Version:", PACKAGE_VERSION],
+    ];
+    for (const [label, value] of info) {
+        rows.push(row(`${themeDim(theme.dim, label.padEnd(labelWidth))}${themeForeground(theme.agent, value)}`));
+    }
+    if (data.updateNotice) {
+        rows.push(row());
+        rows.push(row(themeForeground(theme.warning, data.updateNotice)));
+    }
+    rows.push(row());
+    rows.push(`${margin}${border(`╰${"─".repeat(Math.max(0, cardWidth - 2))}╯`)}`);
+    rows.push("");
+    return rows;
+}
+function validGradientColor(value, fallback) {
+    return /^#[0-9a-f]{6}$/i.test(value) ? value : fallback;
+}
+export function formatWelcomeModel(data) {
+    const model = displayModel(data.model);
+    const thinking = data.thinking && data.thinking !== "off" ? data.thinking : undefined;
+    const provider = data.provider ?? "";
+    const modelParts = [];
+    if (thinking && (isThinkingToggleModel(provider, data.model) || isThinkingOnlyModel(provider, data.model))) {
+        modelParts.push(model, "thinking mode");
+    }
+    else if (thinking) {
+        modelParts.push(`${model} with ${thinking} effort`);
+    }
+    else {
+        modelParts.push(model);
+    }
+    if (provider && !provider.toLowerCase().includes("minimax"))
+        modelParts.push(provider);
+    return modelParts.join(" · ");
+}
+function gradient(text, from, to) {
+    const chars = [...text];
+    return chars.map((char, index) => {
+        const t = chars.length <= 1 ? 0 : index / (chars.length - 1);
+        const color = interpolateHex(from, to, t);
+        return chalk.bold.hex(color)(char);
+    }).join("");
+}
+function interpolateHex(from, to, t) {
+    const a = [1, 3, 5].map((index) => Number.parseInt(from.slice(index, index + 2), 16));
+    const b = [1, 3, 5].map((index) => Number.parseInt(to.slice(index, index + 2), 16));
+    const channels = a.map((value, index) => Math.round(value + ((b[index] ?? value) - value) * t));
+    return `#${channels.map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+}
+function readPackageVersion() {
+    try {
+        const pkg = require("../../../package.json");
+        return pkg.version ? `v${pkg.version}` : "v0.0.0";
+    }
+    catch {
+        return "v0.0.0";
+    }
+}

package/dist/tui/components/workflow-inspector.d.ts

@@ -0,0 +1,30 @@
+import { type Component } from "@bubblebrain-ai/pi-tui";
+import type { SubagentDisplay } from "../model/subagent-view.js";
+import { type Theme } from "../model/theme.js";
+export interface WorkflowInspectorSnapshot {
+    id: string;
+    title: string;
+    status: string;
+    members: SubagentDisplay[];
+    createdAt?: number;
+    updatedAt?: number;
+}
+export interface WorkflowInspectorOptions {
+    getSnapshot(): WorkflowInspectorSnapshot | undefined;
+    getTerminalRows(): number;
+    onClose(): void;
+    onOpenAgent(agentId: string): void;
+    onStop(runId: string): void;
+    onRender(): void;
+    theme?: Theme;
+}
+export declare class WorkflowInspectorComponent implements Component {
+    private readonly options;
+    focused: boolean;
+    private selected;
+    private scrollOffset;
+    constructor(options: WorkflowInspectorOptions);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+}

package/dist/tui/components/workflow-inspector.js

@@ -0,0 +1,136 @@
+import { matchesKey, truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { darkTheme } from "../model/theme.js";
+import { themeBackground, themeDim, themeForeground } from "../model/theme-style.js";
+import { safeSheetText } from "./bottom-sheet.js";
+const FINAL = new Set(["completed", "failed", "blocked", "cancelled", "closed"]);
+function safe(value) {
+    return safeSheetText(value).replace(/[\r\n\t]+/g, " ").trim();
+}
+function pad(line, width) {
+    const clipped = truncateToWidth(line, width, "");
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+function glyph(status, theme) {
+    if (status === "completed" || status === "closed")
+        return themeForeground(theme.success, "✓");
+    if (status === "failed" || status === "blocked")
+        return themeForeground(theme.error, "×");
+    if (status === "cancelled")
+        return themeForeground(theme.muted, "■");
+    if (status === "queued")
+        return themeForeground(theme.muted, "○");
+    return themeForeground(theme.accent, "◆");
+}
+function memberMeta(member) {
+    const tokens = member.usage ? member.usage.promptTokens + member.usage.completionTokens : 0;
+    const duration = member.createdAt
+        ? Math.floor((((FINAL.has(member.status ?? "") ? member.updatedAt : Date.now()) ?? Date.now()) - member.createdAt) / 1000)
+        : 0;
+    return [member.route?.model ?? member.agentName, tokens ? `${tokens} tok` : "", duration ? `${duration}s` : ""].filter(Boolean).join(" · ");
+}
+export class WorkflowInspectorComponent {
+    options;
+    focused = false;
+    selected = 0;
+    scrollOffset = 0;
+    constructor(options) {
+        this.options = options;
+    }
+    render(width) {
+        const theme = this.options.theme ?? darkTheme;
+        const snapshot = this.options.getSnapshot();
+        if (!snapshot)
+            return [
+                themeForeground(theme.error, "Workflow is no longer available"),
+                themeDim(theme.dim, "Esc close"),
+            ];
+        const frameWidth = Math.max(1, Math.floor(width));
+        const inside = Math.max(1, frameWidth - 4);
+        const members = snapshot.members;
+        this.selected = Math.max(0, Math.min(this.selected, Math.max(0, members.length - 1)));
+        const terminalRows = Math.max(8, this.options.getTerminalRows());
+        const bodyBudget = Math.max(3, terminalRows - 7);
+        if (this.selected < this.scrollOffset)
+            this.scrollOffset = this.selected;
+        if (this.selected >= this.scrollOffset + bodyBudget)
+            this.scrollOffset = this.selected - bodyBudget + 1;
+        const done = members.filter((member) => FINAL.has(member.status ?? "running")).length;
+        const phases = [...new Set(members.map((member) => member.phase).filter((phase) => !!phase))];
+        const currentPhase = [...members].reverse().find((member) => !FINAL.has(member.status ?? "running"))?.phase ?? phases.at(-1);
+        const title = `${snapshot.title} — ${snapshot.status}`;
+        if (frameWidth < 6) {
+            return [
+                title,
+                `${done}/${members.length}`,
+                ...members.map((member) => `${glyph(member.status ?? "running", theme)} ${safe(member.nickname ?? member.agentName ?? "agent")}`),
+            ].slice(0, terminalRows).map((row) => truncateToWidth(row, frameWidth, ""));
+        }
+        const border = (text) => themeForeground(theme.border, text);
+        const accent = (text) => themeForeground(theme.accent, text);
+        const dim = (text) => themeDim(theme.dim, text);
+        const selectedBackground = (text) => themeBackground(theme.traceSelectedBg, text);
+        const top = border(`┌─ ${truncateToWidth(title, Math.max(1, frameWidth - 6), "")} ${"─".repeat(Math.max(0, frameWidth - visibleWidth(title) - 5))}┐`);
+        const header = `${border("│")} ${pad(dim(`${done}/${members.length} agents · Enter inspect · x stop · Esc close`), inside)} ${border("│")}`;
+        const separator = border(`├${"─".repeat(frameWidth - 2)}┤`);
+        const rows = [];
+        if (frameWidth >= 88) {
+            const railWidth = Math.min(24, Math.max(16, Math.floor(inside * 0.27)));
+            const rosterWidth = inside - railWidth - 3;
+            const phaseRows = (phases.length > 0 ? phases : ["Workflow"]).map((phase) => `${phase === currentPhase ? accent("◆") : dim("│")} ${safe(phase)}`);
+            const rosterRows = members.slice(this.scrollOffset, this.scrollOffset + bodyBudget).map((member, index) => {
+                const actualIndex = this.scrollOffset + index;
+                const selected = actualIndex === this.selected;
+                const line = `${selected ? accent("›") : " "} ${glyph(member.status ?? "running", theme)} ${safe(member.nickname ?? member.agentName ?? "agent")} — ${safe(member.task ?? "")}  ${dim(memberMeta(member))}`;
+                return selected ? selectedBackground(pad(line, rosterWidth)) : pad(line, rosterWidth);
+            });
+            for (let index = 0; index < bodyBudget; index += 1) {
+                rows.push(`${border("│")} ${pad(phaseRows[index] ?? "", railWidth)} ${dim("│")} ${pad(rosterRows[index] ?? "", rosterWidth)} ${border("│")}`);
+            }
+        }
+        else {
+            const phaseLine = phases.length > 0
+                ? phases.map((phase) => phase === currentPhase ? accent(`◆ ${safe(phase)}`) : dim(`· ${safe(phase)}`)).join(dim("  →  "))
+                : dim("◆ Workflow");
+            rows.push(`${border("│")} ${pad(phaseLine, inside)} ${border("│")}`);
+            const rosterBudget = Math.max(1, bodyBudget - 1);
+            for (let index = 0; index < rosterBudget; index += 1) {
+                const actualIndex = this.scrollOffset + index;
+                const member = members[actualIndex];
+                if (!member) {
+                    rows.push(`${border("│")} ${pad("", inside)} ${border("│")}`);
+                    continue;
+                }
+                const line = `${actualIndex === this.selected ? accent("›") : " "} ${glyph(member.status ?? "running", theme)} ${safe(member.nickname ?? member.agentName ?? "agent")} — ${safe(member.task ?? "")}  ${dim(memberMeta(member))}`;
+                rows.push(`${border("│")} ${actualIndex === this.selected ? selectedBackground(pad(line, inside)) : pad(line, inside)} ${border("│")}`);
+            }
+        }
+        return [top, header, separator, ...rows, border(`└${"─".repeat(frameWidth - 2)}┘`)];
+    }
+    handleInput(data) {
+        const snapshot = this.options.getSnapshot();
+        if (matchesKey(data, "escape")) {
+            this.options.onClose();
+            return;
+        }
+        if (!snapshot)
+            return;
+        if (matchesKey(data, "up") || data === "k")
+            this.selected = Math.max(0, this.selected - 1);
+        else if (matchesKey(data, "down") || data === "j")
+            this.selected = Math.min(Math.max(0, snapshot.members.length - 1), this.selected + 1);
+        else if (matchesKey(data, "enter")) {
+            const id = snapshot.members[this.selected]?.subAgentId;
+            if (id)
+                this.options.onOpenAgent(id);
+            return;
+        }
+        else if (data === "x" && !FINAL.has(snapshot.status)) {
+            this.options.onStop(snapshot.id);
+            return;
+        }
+        else
+            return;
+        this.options.onRender();
+    }
+    invalidate() { }
+}

package/dist/tui/composer-autocomplete.d.ts

@@ -0,0 +1,61 @@
+import { type AutocompleteArgumentSuggestions, type AutocompleteItem, type AutocompleteProvider, type AutocompleteSuggestions, type SlashCommand as TuiSlashCommand } from "@bubblebrain-ai/pi-tui";
+import type { UnifiedCommand } from "../slash-commands/unified.js";
+import type { SkillSummary } from "../skills/types.js";
+import type { TuiMode } from "@bubblebrain-ai/pi-tui";
+import { type ProviderRegistry } from "../provider-registry.js";
+import type { ThinkingLevel } from "../types.js";
+import type { ResolvedTheme, ThemeMode } from "./model/theme.js";
+import { type ModelPickerRegistry, type ModelProviderGroup } from "./model-picker-data.js";
+export interface ComposerAutocompleteSources {
+    cwd: string;
+    commands(): UnifiedCommand[];
+    skills(): SkillSummary[];
+    uiMode?(): TuiMode;
+    registry?: ComposerPickerRegistry;
+    thinkingLevel?(): ThinkingLevel;
+    providerId?(): string;
+    themeMode?(): ThemeMode;
+    detectedTheme?(): ResolvedTheme;
+    onModelSuggestionsChanged?(): void;
+    fdPath?: string | null;
+}
+type ModelCompletionSource = (argumentPrefix: string) => AutocompleteArgumentSuggestions | AutocompleteItem[] | null;
+type ProviderCompletionSource = ModelCompletionSource;
+type ThemeCompletionSource = ModelCompletionSource;
+type ComposerPickerRegistry = ModelPickerRegistry & Pick<ProviderRegistry, "getConfigured" | "getDefault">;
+export declare function buildModelAutocompleteItems(groups: ModelProviderGroup[], argumentPrefix?: string, currentThinkingLevel?: ThinkingLevel): AutocompleteItem[];
+export declare function buildProviderAutocompleteItems(registry: Pick<ProviderRegistry, "getConfigured" | "getModelConfig">, argumentPrefix?: string, currentProviderId?: string): AutocompleteItem[];
+export declare function buildThemeAutocompleteItems(argumentPrefix?: string, detectedTheme?: ResolvedTheme): AutocompleteItem[];
+/**
+ * Build the command surface in execution-priority order. The registry remains
+ * live so MCP prompts that connect after startup appear on the next keypress.
+ */
+export declare function buildComposerSlashCommands(commands: UnifiedCommand[], skills: SkillSummary[], uiMode?: TuiMode, modelCompletions?: ModelCompletionSource, providerCompletions?: ProviderCompletionSource, themeCompletions?: ThemeCompletionSource): TuiSlashCommand[];
+/** A live adapter around pi-tui's command/file completion implementation. */
+export declare class ComposerAutocompleteProvider implements AutocompleteProvider {
+    private readonly sources;
+    private discoveredModels;
+    private modelRefresh;
+    constructor(sources: ComposerAutocompleteSources);
+    getSuggestions(lines: string[], cursorLine: number, cursorCol: number, options: {
+        signal: AbortSignal;
+        force?: boolean;
+    }): Promise<AutocompleteSuggestions | null>;
+    applyCompletion(lines: string[], cursorLine: number, cursorCol: number, item: AutocompleteItem, prefix: string): {
+        lines: string[];
+        cursorLine: number;
+        cursorCol: number;
+    };
+    shouldTriggerFileCompletion(lines: string[], cursorLine: number, cursorCol: number): boolean;
+    private delegate;
+    private getThemeCompletions;
+    private getProviderCompletions;
+    private getModelCompletions;
+    /**
+     * Remote discovery enriches the already-visible local catalog. It is shared
+     * per provider snapshot and runs all providers concurrently, so opening the
+     * composer menu never waits on network latency.
+     */
+    private refreshModelCatalog;
+}
+export {};