@bubblebrain-ai/bubble 0.0.52 → 0.0.53

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

@@ -0,0 +1,263 @@
+import chalk from "chalk";
+import { decodeKittyPrintable, matchesKey, truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { paintSheetLine, padSheetLine, safeSheetInlineText, safeSheetText } from "./bottom-sheet.js";
+import { darkTheme } from "../model/theme.js";
+import { themeDim, themeForeground } from "../model/theme-style.js";
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+function printableInput(data) {
+    const decoded = decodeKittyPrintable(data);
+    if (decoded !== undefined)
+        return decoded;
+    // Bracketed paste is already normalized by ProcessTerminal. Keep printable
+    // text (including CJK and pasted line breaks) while excluding raw terminal
+    // control input. safeSheetText() normalizes the allowed whitespace below.
+    // eslint-disable-next-line no-control-regex
+    return data && !/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/.test(data) ? data : undefined;
+}
+function removeLastGrapheme(value) {
+    const segments = [...graphemeSegmenter.segment(value)];
+    const last = segments[segments.length - 1];
+    return last ? value.slice(0, last.index) : "";
+}
+function joinColumns(left, right, width, theme = darkTheme) {
+    if (!right || width < 56) {
+        const combined = right ? `${left}  ${themeDim(theme.dim, right)}` : left;
+        return truncateToWidth(combined, width, "…");
+    }
+    // The reference keeps the answer label compact and gives the explanation
+    // most of the row. At a 100-column terminal the second column begins around
+    // column 33, rather than drifting toward the middle of the sheet.
+    const leftWidth = Math.max(20, Math.min(34, Math.floor(width * 0.33)));
+    const renderedLeft = truncateToWidth(left, leftWidth - 2, "…");
+    const gap = " ".repeat(Math.max(2, leftWidth - visibleWidth(renderedLeft)));
+    return `${renderedLeft}${gap}${themeDim(theme.dim, truncateToWidth(right, Math.max(1, width - leftWidth), "…"))}`;
+}
+/** Request-aware, bottom-docked replacement for the lost Ink QuestionDialog. */
+export class QuestionDialogComponent {
+    request;
+    getTerminalRows;
+    getTheme;
+    focused = false;
+    questionIndex = 0;
+    selectedIndex = 0;
+    customInput = "";
+    answers;
+    onSubmit;
+    onCancel;
+    constructor(request, getTerminalRows, getTheme = () => darkTheme) {
+        this.request = request;
+        this.getTerminalRows = getTerminalRows;
+        this.getTheme = getTheme;
+        this.answers = request.questions.map(() => []);
+    }
+    render(width) {
+        const theme = this.getTheme();
+        const safeWidth = Math.max(1, width);
+        const terminalRows = Math.max(1, this.getTerminalRows());
+        // A bottom sheet must not become the entire screen after a resize. Keep
+        // one transcript row visible whenever the terminal has room for it.
+        const sheetRows = terminalRows > 1 ? terminalRows - 1 : 1;
+        const question = this.currentQuestion();
+        if (!question)
+            return [];
+        const canUseCustom = question.custom !== false;
+        const rows = [
+            ...question.options.map((_, optionIndex) => ({ kind: "option", optionIndex })),
+            ...(canUseCustom ? [{ kind: "custom" }] : []),
+        ];
+        const showOuterHelp = sheetRows >= 5;
+        const available = Math.max(1, sheetRows - (showOuterHelp ? 1 : 0));
+        const roomy = available >= 8;
+        const showInnerHelp = available >= 5;
+        const fixedRows = 1 + (roomy ? 3 : 0) + (showInnerHelp ? 1 : 0);
+        const choiceBudget = Math.max(0, Math.min(rows.length, available - fixedRows));
+        const panelBudget = fixedRows + choiceBudget;
+        const indentWidth = safeWidth >= 12 ? 2 : safeWidth >= 3 ? 1 : 0;
+        const indent = " ".repeat(indentWidth);
+        const contentWidth = Math.max(1, safeWidth - indentWidth * 2);
+        const selectedStart = Math.max(0, Math.min(this.selectedIndex - choiceBudget + 1, Math.max(0, rows.length - choiceBudget)));
+        const visibleRows = rows.slice(selectedStart, selectedStart + choiceBudget);
+        const panel = [];
+        if (roomy)
+            panel.push({ line: "" });
+        const tab = this.request.questions.length > 1
+            ? themeDim(theme.dim, `  ${safeSheetInlineText(question.header) || "Question"} ${this.questionIndex + 1}/${this.request.questions.length}`)
+            : "";
+        const titleWidth = Math.max(1, contentWidth - visibleWidth(tab));
+        panel.push({
+            line: `${indent}${chalk.bold(themeForeground(theme.inputText, truncateToWidth(safeSheetInlineText(question.question), titleWidth, "…")))}${tab}`,
+        });
+        if (roomy)
+            panel.push({ line: "" });
+        const currentAnswers = this.answers[this.questionIndex] ?? [];
+        for (const row of visibleRows) {
+            const absoluteIndex = rows.indexOf(row);
+            const selected = absoluteIndex === this.selectedIndex;
+            if (row.kind === "custom") {
+                const marker = this.customInput.trim() ? "●" : "○";
+                const custom = this.customInput || "Type your answer here";
+                panel.push({
+                    line: `${indent}${selected
+                        ? chalk.bold(themeForeground(theme.inputText, `z (${marker}) ${custom}`))
+                        : themeForeground(theme.muted, `z (${marker}) ${custom}`)}`,
+                    selected,
+                });
+                continue;
+            }
+            const optionIndex = row.optionIndex ?? 0;
+            const option = question.options[optionIndex];
+            const checked = currentAnswers.includes(option.label);
+            const marker = checked ? "●" : "○";
+            const left = `${optionIndex + 1} (${marker}) ${safeSheetInlineText(option.label)}`;
+            const line = joinColumns(left, safeSheetInlineText(option.description), contentWidth, theme);
+            panel.push({
+                line: `${indent}${selected
+                    ? chalk.bold(themeForeground(theme.inputText, line))
+                    : themeForeground(theme.muted, line)}`,
+                selected,
+            });
+        }
+        if (roomy)
+            panel.push({ line: "" });
+        if (showInnerHelp) {
+            const selectionHelp = question.multiple ? "↑/↓ navigate · Space toggle · type custom" : "↑/↓ navigate · type custom";
+            const submitHelp = this.questionIndex < this.request.questions.length - 1 ? "Enter:next" : "Enter:submit";
+            const rightGap = Math.max(1, contentWidth - visibleWidth(selectionHelp) - visibleWidth(submitHelp));
+            panel.push({
+                line: `${indent}${themeDim(theme.dim, truncateToWidth(`${selectionHelp}${" ".repeat(rightGap)}${submitHelp}`, contentWidth, ""))}`,
+            });
+        }
+        const painted = panel.slice(0, panelBudget).map(({ line, selected }) => paintSheetLine(line, safeWidth, selected, theme));
+        if (!showOuterHelp)
+            return painted;
+        const outerHelp = this.request.questions.length > 1
+            ? "Tab next question  │  ←/→ change question  │  Esc dismiss"
+            : "Tab next answer  │  Esc dismiss  │  Shift+X dismiss";
+        return [...painted, themeDim(theme.dim, padSheetLine(outerHelp, safeWidth))];
+    }
+    handleInput(data) {
+        const question = this.currentQuestion();
+        if (!question)
+            return;
+        const rowCount = question.options.length + (question.custom === false ? 0 : 1);
+        if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c") || matchesKey(data, "shift+x")) {
+            this.onCancel?.();
+            return;
+        }
+        if (matchesKey(data, "up")) {
+            this.selectedIndex = (this.selectedIndex + rowCount - 1) % Math.max(1, rowCount);
+            return;
+        }
+        if (matchesKey(data, "down")) {
+            this.selectedIndex = (this.selectedIndex + 1) % Math.max(1, rowCount);
+            return;
+        }
+        if (matchesKey(data, "left") && this.questionIndex > 0) {
+            this.saveCurrentAnswer();
+            this.moveToQuestion(this.questionIndex - 1);
+            return;
+        }
+        if (matchesKey(data, "right") && this.questionIndex < this.request.questions.length - 1) {
+            this.saveCurrentAnswer();
+            this.moveToQuestion(this.questionIndex + 1);
+            return;
+        }
+        if (matchesKey(data, "tab")) {
+            if (this.request.questions.length > 1) {
+                this.commitAndAdvance();
+            }
+            else {
+                this.selectedIndex = (this.selectedIndex + 1) % Math.max(1, rowCount);
+            }
+            return;
+        }
+        if (/^[1-9]$/.test(data) && Number(data) <= question.options.length) {
+            this.selectedIndex = Number(data) - 1;
+            return;
+        }
+        const customSelected = question.custom !== false && this.selectedIndex === question.options.length;
+        if (matchesKey(data, "backspace") || matchesKey(data, "delete")) {
+            if (customSelected)
+                this.customInput = removeLastGrapheme(this.customInput);
+            return;
+        }
+        if (data === " " && !customSelected) {
+            this.toggleSelectedOption();
+            return;
+        }
+        if (matchesKey(data, "enter")) {
+            this.commitAndAdvance();
+            return;
+        }
+        const printable = printableInput(data);
+        if (printable !== undefined && question.custom !== false) {
+            this.selectedIndex = question.options.length;
+            this.customInput += safeSheetText(printable).replace(/\n/g, " ");
+        }
+    }
+    invalidate() {
+        // Width, height, selection, and answers are projected on every render.
+    }
+    currentQuestion() {
+        return this.request.questions[this.questionIndex];
+    }
+    saveCurrentAnswer() {
+        const question = this.currentQuestion();
+        if (!question)
+            return [];
+        const customSelected = question.custom !== false && this.selectedIndex === question.options.length;
+        let answer;
+        if (customSelected) {
+            answer = this.customInput.trim() ? [this.customInput.trim()] : [];
+        }
+        else if (question.multiple) {
+            answer = [...(this.answers[this.questionIndex] ?? [])];
+        }
+        else {
+            const label = question.options[this.selectedIndex]?.label;
+            answer = label ? [label] : [];
+        }
+        this.answers[this.questionIndex] = answer;
+        return answer;
+    }
+    toggleSelectedOption() {
+        const question = this.currentQuestion();
+        const option = question?.options[this.selectedIndex]?.label;
+        if (!question || !option)
+            return;
+        if (!question.multiple) {
+            this.answers[this.questionIndex] = [option];
+            return;
+        }
+        const current = this.answers[this.questionIndex] ?? [];
+        this.answers[this.questionIndex] = current.includes(option)
+            ? current.filter((item) => item !== option)
+            : [...current, option];
+    }
+    commitAndAdvance() {
+        this.saveCurrentAnswer();
+        if (this.questionIndex < this.request.questions.length - 1) {
+            this.moveToQuestion(this.questionIndex + 1);
+            return;
+        }
+        this.onSubmit?.(this.answers.map((answer) => [...answer]));
+    }
+    moveToQuestion(index) {
+        this.questionIndex = index;
+        const question = this.currentQuestion();
+        const prior = this.answers[index]?.[0];
+        const priorOption = question?.options.findIndex((option) => option.label === prior) ?? -1;
+        if (priorOption >= 0) {
+            this.selectedIndex = priorOption;
+            this.customInput = "";
+        }
+        else if (prior && question?.custom !== false) {
+            this.selectedIndex = question.options.length;
+            this.customInput = prior;
+        }
+        else {
+            this.selectedIndex = 0;
+            this.customInput = "";
+        }
+    }
+}

package/dist/tui/components/responsive-transcript.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Stable transcript component.
+ *
+ * The component tree keeps this object for the lifetime of the TUI. Its rows
+ * are projected from message state at render time, so a terminal resize uses
+ * the new width instead of mechanically wrapping ANSI strings produced for an
+ * old width. This also makes message identity independent from rendered row
+ * count (which changes with Markdown, CJK, and terminal width).
+ */
+import type { Component, TuiMouseEvent } from "@bubblebrain-ai/pi-tui";
+import type { DisplayMessage } from "../model/display-history.js";
+import type { TraceAction } from "../model/trace-interaction.js";
+import { type TranscriptRenderOptions } from "./transcript.js";
+export interface ResponsiveTranscriptSnapshot {
+    messages: readonly DisplayMessage[];
+    options?: Omit<TranscriptRenderOptions, "columns">;
+}
+export interface ResponsiveTranscriptCallbacks {
+    onTraceAction?(action: TraceAction): void;
+}
+export declare class ResponsiveTranscriptComponent implements Component {
+    private readonly getSnapshot;
+    private readonly callbacks;
+    private traceTargets;
+    private traceInteraction?;
+    private cache?;
+    constructor(getSnapshot: () => ResponsiveTranscriptSnapshot, callbacks?: ResponsiveTranscriptCallbacks);
+    render(width: number): string[];
+    handleMouse(event: TuiMouseEvent): boolean;
+    invalidate(): void;
+}

package/dist/tui/components/responsive-transcript.js

@@ -0,0 +1,77 @@
+import { projectTranscript, } from "./transcript.js";
+export class ResponsiveTranscriptComponent {
+    getSnapshot;
+    callbacks;
+    traceTargets = [];
+    traceInteraction;
+    cache;
+    constructor(getSnapshot, callbacks = {}) {
+        this.getSnapshot = getSnapshot;
+        this.callbacks = callbacks;
+    }
+    render(width) {
+        const snapshot = this.getSnapshot();
+        const options = snapshot.options ?? {};
+        const normalizedWidth = Math.max(1, width);
+        const showReasoning = options.showReasoning ?? false;
+        const verboseTrace = options.verboseTrace ?? false;
+        const trailingSpacer = options.trailingSpacer !== false;
+        const dimFromMessageIndex = options.dimFromMessageIndex;
+        const traceRevision = options.traceInteraction?.getRevision() ?? 0;
+        const cached = this.cache;
+        const projection = cached
+            && cached.messages === snapshot.messages
+            && cached.width === normalizedWidth
+            && cached.showReasoning === showReasoning
+            && cached.verboseTrace === verboseTrace
+            && cached.trailingSpacer === trailingSpacer
+            && cached.dimFromMessageIndex === dimFromMessageIndex
+            && cached.theme === options.theme
+            && cached.markdownRenderer === options.markdownRenderer
+            && cached.traceInteraction === options.traceInteraction
+            && cached.traceRevision === traceRevision
+            ? cached.projection
+            : projectTranscript(snapshot.messages, {
+                ...options,
+                columns: normalizedWidth,
+            });
+        if (projection !== cached?.projection) {
+            this.cache = {
+                messages: snapshot.messages,
+                width: normalizedWidth,
+                showReasoning,
+                verboseTrace,
+                trailingSpacer,
+                dimFromMessageIndex,
+                theme: options.theme,
+                markdownRenderer: options.markdownRenderer,
+                traceInteraction: options.traceInteraction,
+                traceRevision,
+                projection,
+            };
+        }
+        this.traceTargets = projection.traceTargets;
+        this.traceInteraction = options.traceInteraction;
+        return projection.rows;
+    }
+    handleMouse(event) {
+        if (!this.traceInteraction)
+            return false;
+        if (event.kind === "leave")
+            return this.traceInteraction.clearHover();
+        const target = this.traceTargets[event.y];
+        if (event.kind === "move")
+            return this.traceInteraction.hover(target);
+        if (event.release || (event.button & 3) !== 0 || !target)
+            return false;
+        const action = this.traceInteraction.activate(target, event.clickCount);
+        if (action)
+            this.callbacks.onTraceAction?.(action);
+        return true;
+    }
+    invalidate() {
+        // Theme/capability changes can alter ANSI output without changing the
+        // immutable transcript reference. Width changes already miss naturally.
+        this.cache = undefined;
+    }
+}

package/dist/tui/components/rewind-picker.d.ts

@@ -0,0 +1,62 @@
+import { type Component, type Focusable, type TuiMouseEvent } from "@bubblebrain-ai/pi-tui";
+import type { UserTurn } from "../../session.js";
+import type { RewindScope } from "../../rewind.js";
+import { type Theme } from "../model/theme.js";
+export declare const REWIND_SCOPE_LABEL: Record<RewindScope, string>;
+export interface RewindPickerPoint {
+    turn: UserTurn;
+    /** Oldest-first ordinal in SessionManager.listUserTurns(). */
+    turnIndex: number;
+    fileCount: number;
+}
+export type RewindPickerPhase = "loading" | "picker" | "cancel-offer" | "confirm" | "executing" | "error";
+export interface RewindPickerCallbacks {
+    getTerminalRows(): number;
+    onPreview(point: RewindPickerPoint, scope: RewindScope): void;
+    onScopeChange(point: RewindPickerPoint | undefined, scope: RewindScope): void;
+    onCancel(): void;
+    onCancelRun(): void;
+    onConfirm(point: RewindPickerPoint, scope: RewindScope): void;
+    onRender(): void;
+    theme?: Theme;
+}
+/** Grok-style prompt-area rewind sheet: filled surface, accent rail, and full-row selection. */
+export declare class RewindPickerComponent implements Component, Focusable {
+    private readonly callbacks;
+    focused: boolean;
+    private phase;
+    private points;
+    private selected;
+    private choice;
+    private scope;
+    private error;
+    private hitRows;
+    constructor(initialPhase: "picker" | "cancel-offer", points: RewindPickerPoint[], callbacks: RewindPickerCallbacks);
+    getPhase(): RewindPickerPhase;
+    getSelectedPoint(): RewindPickerPoint | undefined;
+    showLoading(): void;
+    showPicker(points: RewindPickerPoint[]): void;
+    showExecuting(): void;
+    showError(message: string): void;
+    render(width: number): string[];
+    handleInput(data: string): void;
+    handleMouse(event: TuiMouseEvent): boolean;
+    invalidate(): void;
+    private renderPicker;
+    private renderCancelOffer;
+    private renderConfirm;
+    private renderError;
+    private line;
+    private choiceLine;
+    private finish;
+    private setPoints;
+    private visiblePointBudget;
+    private movePoint;
+    private moveChoice;
+    private stepScope;
+    private emitPreview;
+    private confirm;
+    private activateCancelChoice;
+    private hover;
+    private activate;
+}