@bubblebrain-ai/bubble 0.0.63 → 0.0.64

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

@@ -0,0 +1,43 @@
+import { type Component, type Focusable } from "@bubblebrain-ai/pi-tui";
+import type { ApprovalRequest } from "../../approval/types.js";
+import { type Theme } from "../model/theme.js";
+export type ApprovalDialogChoice = {
+    kind: "approve_once";
+} | {
+    kind: "approve_session";
+} | {
+    kind: "reject";
+};
+interface ApprovalPresentation {
+    title: string;
+    details: string[];
+}
+export interface ApprovalDialogOptions {
+    getTheme?: () => Theme;
+}
+/** Convert every approval variant into a compact, request-specific heading and preview. */
+export declare function approvalPresentation(request: ApprovalRequest): ApprovalPresentation;
+/**
+ * Bottom-docked approval sheet inspired by coding-agent permission cards.
+ * It owns selection and shortcuts so global run-cancellation cannot steal
+ * Escape/Ctrl+C while the tool call is waiting for a decision.
+ */
+export declare class ApprovalDialogComponent implements Component, Focusable {
+    private readonly request;
+    private readonly getTerminalRows;
+    private readonly options;
+    focused: boolean;
+    private selectedIndex;
+    onSelect?: (choice: ApprovalDialogChoice) => void;
+    onCancel?: () => void;
+    constructor(request: ApprovalRequest, getTerminalRows: () => number, options?: ApprovalDialogOptions);
+    /**
+     * "This session" appears only when the approval controller attached a
+     * sessionGrant: the exact bash command, or an MCP tool name.
+     */
+    private choices;
+    render(width: number): string[];
+    handleInput(data: string): void;
+    invalidate(): void;
+}
+export {};

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

@@ -0,0 +1,212 @@
+import path from "node:path";
+import chalk from "chalk";
+import { matchesKey, truncateToWidth, wrapTextWithAnsi, } from "@bubblebrain-ai/pi-tui";
+import { paintSheetLine, padSheetLine, safeSheetText } from "./bottom-sheet.js";
+import { darkTheme } from "../model/theme.js";
+import { themeDim, themeForeground } from "../model/theme-style.js";
+function bashCommandLabel(command) {
+    const firstToken = safeSheetText(command).trim().match(/^([^\s;&|]+)/)?.[1] ?? "command";
+    const unquoted = firstToken.replace(/^["'`]+|["'`]+$/g, "");
+    return path.basename(unquoted) || "command";
+}
+function jsonPreview(value) {
+    if (value === undefined)
+        return undefined;
+    try {
+        return safeSheetText(JSON.stringify(value));
+    }
+    catch {
+        return safeSheetText(String(value));
+    }
+}
+/** Convert every approval variant into a compact, request-specific heading and preview. */
+export function approvalPresentation(request) {
+    switch (request.type) {
+        case "bash":
+            return {
+                title: `Request approval for ${bashCommandLabel(request.command)}`,
+                details: [
+                    safeSheetText(request.command),
+                    `${request.background ? "background command" : "working directory"}: ${safeSheetText(request.cwd)}`,
+                ],
+            };
+        case "edit":
+            return {
+                title: safeSheetText(`Request approval to edit ${path.basename(request.path) || request.path}`),
+                details: [request.path, ...request.diff.split("\n").filter(Boolean).slice(0, 2)].map(safeSheetText),
+            };
+        case "write":
+            return {
+                title: safeSheetText(`Request approval to ${request.fileExists ? "overwrite" : "create"} ${path.basename(request.path) || request.path}`),
+                details: [request.path, ...(request.diff ?? request.content).split("\n").filter(Boolean).slice(0, 2)].map(safeSheetText),
+            };
+        case "patch":
+            return {
+                title: `Request approval to update ${request.files.length} file${request.files.length === 1 ? "" : "s"}`,
+                details: (request.paths.length > 0 ? request.paths : [request.path]).map(safeSheetText),
+            };
+        case "lsp":
+            return {
+                title: safeSheetText(`Request approval for ${request.operation}`),
+                details: [safeSheetText(request.path)],
+            };
+        case "agent_profile":
+            return {
+                title: safeSheetText(`Trust agent profile ${request.name}`),
+                details: [request.path, ...request.promptPreview.split("\n").filter(Boolean).slice(0, 2)].map(safeSheetText),
+            };
+        case "external_tool": {
+            const input = jsonPreview(request.rawInput);
+            const locations = request.locations?.map((location) => location.line == null ? location.path : `${location.path}:${location.line}`) ?? [];
+            return {
+                title: safeSheetText(`Request approval for ${request.title.trim() || request.kind.trim() || "external tool"}`),
+                details: [...(input ? [input] : []), ...locations].map(safeSheetText),
+            };
+        }
+    }
+}
+function styleDetail(request, detail, index, theme) {
+    if (request.type === "bash" && index === 0) {
+        const commandMatch = detail.match(/^(\S+)([\s\S]*)$/);
+        if (commandMatch) {
+            return themeForeground(theme.traceCommand, commandMatch[1]) + themeForeground(theme.success, commandMatch[2]);
+        }
+    }
+    return index === 0 ? themeForeground(theme.accent, detail) : themeDim(theme.dim, detail);
+}
+/**
+ * Bottom-docked approval sheet inspired by coding-agent permission cards.
+ * It owns selection and shortcuts so global run-cancellation cannot steal
+ * Escape/Ctrl+C while the tool call is waiting for a decision.
+ */
+export class ApprovalDialogComponent {
+    request;
+    getTerminalRows;
+    options;
+    focused = false;
+    selectedIndex = 0;
+    onSelect;
+    onCancel;
+    constructor(request, getTerminalRows, options = {}) {
+        this.request = request;
+        this.getTerminalRows = getTerminalRows;
+        this.options = options;
+    }
+    /**
+     * "This session" appears only when the approval controller attached a
+     * sessionGrant: the exact bash command, or an MCP tool name.
+     */
+    choices() {
+        const grant = this.request.type === "bash" || this.request.type === "external_tool"
+            ? this.request.sessionGrant
+            : undefined;
+        return [
+            { kind: "approve_once", label: "Yes, proceed" },
+            ...(grant
+                ? [{
+                        kind: "approve_session",
+                        label: this.request.type === "bash"
+                            ? "Yes, and don't ask again for this exact command this session"
+                            : `Yes, don't ask again this session for ${safeSheetText(grant)}`,
+                    }]
+                : []),
+            { kind: "reject", label: "No, reject" },
+        ];
+    }
+    render(width) {
+        const theme = this.options.getTheme?.() ?? darkTheme;
+        const safeWidth = Math.max(1, width);
+        const terminalRows = Math.max(1, this.getTerminalRows());
+        const showHelp = terminalRows >= 5;
+        const panelBudget = Math.max(1, Math.min(9, terminalRows - (showHelp ? 1 : 0)));
+        const presentation = approvalPresentation(this.request);
+        const choices = this.choices();
+        const choiceCount = Math.min(choices.length, panelBudget);
+        const extraRows = Math.max(0, panelBudget - choiceCount);
+        const contentWidth = Math.max(1, safeWidth - (safeWidth >= 12 ? 4 : 2));
+        const indent = " ".repeat(safeWidth >= 12 ? 2 : 1);
+        let remainingExtras = extraRows;
+        const topPadding = remainingExtras >= 5 ? 1 : 0;
+        remainingExtras -= topPadding;
+        const titleRows = remainingExtras > 0 ? 1 : 0;
+        remainingExtras -= titleRows;
+        const bottomPadding = remainingExtras >= 4 ? 1 : 0;
+        remainingExtras -= bottomPadding;
+        const blankBeforeChoices = remainingExtras >= 2 ? 1 : 0;
+        remainingExtras -= blankBeforeChoices;
+        const detailBudget = remainingExtras;
+        const panelLines = [];
+        if (topPadding)
+            panelLines.push({ line: "" });
+        if (titleRows) {
+            panelLines.push({ line: `${indent}${chalk.bold(themeForeground(theme.inputText, truncateToWidth(presentation.title, contentWidth, "…")))}` });
+        }
+        if (detailBudget > 0) {
+            const renderedDetails = [];
+            for (let index = 0; index < presentation.details.length && renderedDetails.length < detailBudget; index += 1) {
+                const detail = presentation.details[index];
+                if (!detail)
+                    continue;
+                const styled = styleDetail(this.request, detail, index, theme);
+                renderedDetails.push(...wrapTextWithAnsi(styled, contentWidth));
+            }
+            for (const detail of renderedDetails.slice(0, detailBudget)) {
+                panelLines.push({ line: `${indent}${detail}` });
+            }
+            while (panelLines.length < topPadding + titleRows + detailBudget)
+                panelLines.push({ line: "" });
+        }
+        if (blankBeforeChoices)
+            panelLines.push({ line: "" });
+        const visibleChoices = choiceCount === choices.length
+            ? choices.map((choice, index) => ({ choice, index }))
+            : choices
+                .map((choice, index) => ({ choice, index }))
+                .slice(Math.max(0, Math.min(this.selectedIndex - choiceCount + 1, choices.length - choiceCount)), choices.length)
+                .slice(0, choiceCount);
+        for (const { choice, index } of visibleChoices) {
+            const selected = index === this.selectedIndex;
+            const radio = selected ? "●" : "○";
+            const label = `${index + 1} (${radio}) ${choice.label}`;
+            const line = `${indent}${selected
+                ? chalk.bold(themeForeground(theme.inputText, label))
+                : themeForeground(theme.muted, label)}`;
+            panelLines.push({ line, selected });
+        }
+        if (bottomPadding)
+            panelLines.push({ line: "" });
+        const paintedPanel = panelLines.slice(0, panelBudget).map(({ line, selected }) => paintSheetLine(line, safeWidth, selected, theme));
+        if (!showHelp)
+            return paintedPanel;
+        const help = `${this.selectedIndex + 1}/${choices.length} select  │  Tab next  │  Enter confirm  │  Esc deny`;
+        return [...paintedPanel, themeDim(theme.dim, padSheetLine(help, safeWidth))];
+    }
+    handleInput(data) {
+        const choices = this.choices();
+        if (matchesKey(data, "up") || matchesKey(data, "shift+tab")) {
+            this.selectedIndex = (this.selectedIndex + choices.length - 1) % choices.length;
+            return;
+        }
+        if (matchesKey(data, "down") || matchesKey(data, "tab")) {
+            this.selectedIndex = (this.selectedIndex + 1) % choices.length;
+            return;
+        }
+        if (/^[1-9]$/.test(data) && Number(data) <= choices.length) {
+            this.selectedIndex = Number(data) - 1;
+            return;
+        }
+        const selected = choices[this.selectedIndex];
+        if (!selected)
+            return;
+        if (matchesKey(data, "enter")) {
+            this.onSelect?.({ kind: selected.kind });
+            return;
+        }
+        if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+            this.onCancel?.();
+        }
+    }
+    invalidate() {
+        // Rendering is derived from current width, height, request, and selection.
+    }
+}

package/dist/tui/components/bottom-sheet.d.ts

@@ -0,0 +1,9 @@
+import type { Theme } from "../model/theme.js";
+export declare const BOTTOM_SHEET_BACKGROUND = "#242424";
+export declare const BOTTOM_SHEET_SELECTED_BACKGROUND = "#3A3A3A";
+/** Treat model/tool supplied copy as text, never as terminal instructions. */
+export declare function safeSheetText(value: string): string;
+/** Sanitize a field that must occupy exactly one terminal row. */
+export declare function safeSheetInlineText(value: string): string;
+export declare function padSheetLine(line: string, width: number): string;
+export declare function paintSheetLine(line: string, width: number, selected?: boolean, theme?: Theme): string;

package/dist/tui/components/bottom-sheet.js

@@ -0,0 +1,32 @@
+import chalk from "chalk";
+import { stripTerminalSequences, truncateToWidth, visibleWidth } from "@bubblebrain-ai/pi-tui";
+import { themeBackground } from "../model/theme-style.js";
+export const BOTTOM_SHEET_BACKGROUND = "#242424";
+export const BOTTOM_SHEET_SELECTED_BACKGROUND = "#3A3A3A";
+/** Treat model/tool supplied copy as text, never as terminal instructions. */
+export function safeSheetText(value) {
+    return stripTerminalSequences(value)
+        .replace(/\r\n?/g, "\n")
+        .replace(/\t/g, "   ")
+        // Preserve visible newlines but neutralize every other control character.
+        // eslint-disable-next-line no-control-regex
+        .replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g, "�");
+}
+/** Sanitize a field that must occupy exactly one terminal row. */
+export function safeSheetInlineText(value) {
+    return safeSheetText(value)
+        .replace(/\s+/gu, " ")
+        .replace(/\s+([,.;:!?，。；：！？、）)\]}])/gu, "$1")
+        .trim();
+}
+export function padSheetLine(line, width) {
+    const safeWidth = Math.max(1, width);
+    const truncated = truncateToWidth(line, safeWidth, "");
+    return truncated + " ".repeat(Math.max(0, safeWidth - visibleWidth(truncated)));
+}
+export function paintSheetLine(line, width, selected = false, theme) {
+    const background = theme
+        ? selected ? theme.traceSelectedBg : theme.backgroundPanel
+        : selected ? BOTTOM_SHEET_SELECTED_BACKGROUND : BOTTOM_SHEET_BACKGROUND;
+    return theme ? themeBackground(background, padSheetLine(line, width)) : chalk.bgHex(background)(padSheetLine(line, width));
+}

package/dist/tui/components/context-info.d.ts

@@ -0,0 +1,54 @@
+import { type Component, type Focusable, type TuiMouseEvent } from "@bubblebrain-ai/pi-tui";
+import type { ContextUsageSnapshot } from "../../context/usage.js";
+import { type Theme } from "../model/theme.js";
+export interface ContextInfoPanelData {
+    snapshot: ContextUsageSnapshot;
+    sessionId?: string;
+    cwd: string;
+    thinking: string;
+    permissionMode: string;
+    turnCount: number;
+    toolCallCount: number;
+    compactionCount: number;
+    mcpServerCount: number;
+}
+export interface ContextInfoComponentOptions {
+    getTerminalRows(): number;
+    onClose(): void;
+    onRender(): void;
+    copySessionId?(): Promise<void>;
+    theme?: Theme;
+}
+/** Largest-remainder allocation keeps the categorical grid at exactly 100 cells. */
+export declare function allocateContextCells(values: number[]): number[];
+export declare function buildContextUsageLines(data: ContextInfoPanelData, contentWidth: number, theme?: Theme): string[];
+export declare class ContextInfoComponent implements Component, Focusable {
+    private readonly data;
+    private readonly options;
+    focused: boolean;
+    private activeTab;
+    private offset;
+    private bodyRows;
+    private contentRows;
+    private frameWidth;
+    private frameHeight;
+    private tabHits;
+    private copyHit;
+    private hoveredTab;
+    private closeHovered;
+    private copyHovered;
+    private copyStatus;
+    constructor(data: ContextInfoPanelData, options: ContextInfoComponentOptions);
+    render(width: number): string[];
+    handleInput(data: string): void;
+    handleMouse(event: TuiMouseEvent): boolean;
+    invalidate(): void;
+    private frameLine;
+    private renderTabs;
+    private renderFooter;
+    private stepTab;
+    private selectTab;
+    private scroll;
+    private setOffset;
+    private copySessionId;
+}