@bubblebrain-ai/bubble 0.0.63 → 0.0.65

package/dist/tui/fullscreen.js

@@ -0,0 +1,256 @@
+/**
+ * Fullscreen (alternate-screen) mode on TuiAltScreen (rewrite/pi-tui).
+ *
+ * Complements the default main-screen chat flow: instead of appending to
+ * scrollback, the whole transcript lives in a viewport with follow-end,
+ * mouse-wheel scrolling, click-drag selection, and Ctrl+F transcript search
+ * (all provided by TuiAltScreen + ScrollView). The composer stays docked at
+ * the bottom via a layout root: [transcript scroll view, editor, footer].
+ *
+ * Toggle with /fullscreen; Escape exits back to the main screen.
+ */
+import process from "node:process";
+import { ProcessTerminal, TuiAltScreen, VStack, ScrollView, Editor, Markdown, matchesKey, isKeyRelease, } from "@bubblebrain-ai/pi-tui";
+import { ResponsiveTranscriptComponent } from "./components/responsive-transcript.js";
+import { StreamingMessageComponent } from "./components/streaming-message.js";
+import { createTranscriptTheme } from "./components/transcript.js";
+import { ResponsiveFooterComponent } from "./footer.js";
+import { getNextPermissionMode } from "../permission/mode.js";
+import { COMPOSER_EDITOR_OPTIONS, createComposerEditorTheme } from "./composer-style.js";
+import { TraceInteractionState } from "./model/trace-interaction.js";
+import { ComposerImagePreviewComponent, ImageViewerComponent } from "./components/image-preview.js";
+import { createAssistantMarkdownTheme } from "./markdown-style.js";
+import { darkTheme } from "./model/theme.js";
+import { TuiAnimationClock } from "./animation-clock.js";
+export class FullscreenApp {
+    options;
+    tui;
+    transcript;
+    streamingMessage;
+    animationClock;
+    editor;
+    composerPreview;
+    footer;
+    traceInteraction;
+    markdown;
+    transcriptTheme;
+    markdownRenderer = (text, width) => {
+        this.markdown.setText(text);
+        return this.markdown.render(width);
+    };
+    unsubscribe;
+    showReasoning = false;
+    verboseTrace = false;
+    disposed = false;
+    streamingMounted = false;
+    constructor(options) {
+        this.options = options;
+        const terminal = options.terminal ?? new ProcessTerminal();
+        const getTheme = options.getTheme ?? (() => darkTheme);
+        this.transcriptTheme = createTranscriptTheme(getTheme);
+        this.markdown = new Markdown("", 0, 0, createAssistantMarkdownTheme(getTheme));
+        this.traceInteraction = options.traceInteraction ?? new TraceInteractionState();
+        // Trace hover depends on no-button pointer motion, including inside tmux.
+        this.tui = new TuiAltScreen(terminal, undefined, undefined, { mouseMotion: "all" });
+        this.editor = new Editor(this.tui, createComposerEditorTheme(getTheme), COMPOSER_EDITOR_OPTIONS);
+        this.composerPreview = options.composer
+            ? new ComposerImagePreviewComponent(() => options.composer?.previewAttachment(), getTheme)
+            : undefined;
+        this.transcript = new ResponsiveTranscriptComponent(() => ({
+            messages: this.options.controller.getTranscript(),
+            options: this.transcriptRenderOptions(),
+        }), {
+            onTraceAction: (action) => {
+                if (action.kind !== "open-image")
+                    return;
+                const message = this.options.controller.getTranscript().find((candidate) => candidate.key === action.messageKey);
+                const image = message?.images?.find((candidate) => candidate.label === action.imageLabel);
+                if (image)
+                    this.openImageViewer(image);
+            },
+        });
+        this.streamingMessage = new StreamingMessageComponent(8, () => this.tui.requestRender(), undefined, getTheme);
+        this.animationClock = new TuiAnimationClock((elapsedMs) => {
+            if (this.streamingMessage.advanceAnimationFrame(elapsedMs))
+                this.tui.requestRender();
+        });
+        this.footer = new ResponsiveFooterComponent(() => ({
+            agent: this.options.agent,
+            mode: this.options.agent.mode,
+            goalLine: this.options.controller.getGoalIndicator?.(),
+            hidden: this.tui.terminal.rows <= 2,
+            theme: getTheme(),
+        }));
+        this.buildLayout();
+        this.unsubscribe = this.options.controller.subscribe(() => this.render());
+    }
+    buildLayout() {
+        // The live tail belongs inside the scrolling transcript. Its activity lane
+        // stays docked above the composer and keeps one row both running and idle,
+        // so clearing the spinner cannot pull settled content downward.
+        const transcriptBody = new VStack([this.transcript, this.streamingMessage]);
+        const scroll = new ScrollView(transcriptBody, { follow: "end", primary: true });
+        const layout = new VStack([
+            { component: scroll, basis: 0, grow: 1, minSize: 0 },
+            { component: this.streamingMessage.activityLane, basis: "auto", shrink: 0 },
+            ...(this.composerPreview ? [{ component: this.composerPreview, basis: "auto", shrink: 0 }] : []),
+            { component: this.editor, basis: "auto", shrink: 0 },
+            { component: this.footer, basis: "auto", shrink: 0 },
+        ]);
+        this.tui.setLayoutRoot(layout);
+        this.tui.setFocus(this.editor);
+        if (this.options.composer) {
+            this.options.composer.attachEditor(this.editor);
+            this.options.composer.setOpenImageHandler((image) => this.openImageViewer(image));
+        }
+        else
+            this.editor.onSubmit = (text) => {
+                const trimmed = text.trim();
+                if (!trimmed)
+                    return;
+                this.editor.addToHistory(trimmed);
+                if (trimmed === "/fullscreen" || trimmed === "/main") {
+                    this.options.onExit();
+                    return;
+                }
+                if (trimmed.startsWith("/")) {
+                    this.options.onCommand(trimmed);
+                    return;
+                }
+                if (this.options.controller.isRunning()) {
+                    if (!this.options.controller.steer(trimmed))
+                        this.options.controller.queueInput(trimmed);
+                }
+                else if (this.options.controller.queueAfterCommand?.(trimmed)) {
+                    this.render();
+                }
+                else {
+                    this.options.controller.appendDisplayMessage({ key: `user-${Date.now()}`, role: "user", content: trimmed });
+                    void this.options.controller.runTurn(trimmed, process.cwd());
+                }
+            };
+        this.tui.addInputListener((data) => {
+            // Kitty reports key releases separately. Global shortcuts must only run
+            // on the press or Escape would cancel the run and exit on key-up.
+            if (isKeyRelease(data))
+                return { consume: true };
+            if (matchesKey(data, "shift+tab")) {
+                this.options.agent.setMode(getNextPermissionMode(this.options.agent.mode));
+                this.render();
+                return { consume: true };
+            }
+            if (matchesKey(data, "escape")) {
+                if (this.options.controller.cancelActiveRun()) {
+                    return { consume: true };
+                }
+                if (this.options.controller.isBusy?.())
+                    return { consume: true };
+                this.options.onExit();
+                return { consume: true };
+            }
+            if (matchesKey(data, "ctrl+c")) {
+                if (this.options.controller.cancelActiveRun()) {
+                    return { consume: true };
+                }
+                if (this.options.controller.isBusy?.())
+                    return { consume: true };
+                this.options.onExit();
+                return { consume: true };
+            }
+            if (data === "\x14") {
+                this.showReasoning = !this.showReasoning;
+                this.render();
+                return { consume: true };
+            }
+            if (data === "\x0f") {
+                this.verboseTrace = !this.verboseTrace;
+                this.render();
+                return { consume: true };
+            }
+            return undefined;
+        });
+    }
+    openImageViewer(image) {
+        let handle;
+        const close = () => {
+            handle?.hide();
+            this.tui.setFocus(this.editor);
+            this.render();
+        };
+        const component = new ImageViewerComponent(image, close, () => this.tui.terminal.rows, this.options.getTheme);
+        handle = this.tui.showOverlay(component, {
+            anchor: "center",
+            width: "70%",
+            minWidth: 36,
+            maxWidth: 110,
+            maxHeight: "85%",
+            margin: 1,
+            dismissOnOutsideClick: true,
+        });
+        this.tui.setFocus(component);
+    }
+    render() {
+        if (this.disposed)
+            return;
+        const columns = this.tui.terminal.columns || process.stdout.columns || 80;
+        const tail = this.options.controller.isRunning()
+            ? this.options.controller.getStreamingTail()
+            : null;
+        const commandActivity = this.options.controller.getCommandActivity?.() ?? null;
+        if (tail) {
+            if (!this.streamingMounted) {
+                this.streamingMounted = true;
+                this.streamingMessage.startSpinner();
+            }
+            this.streamingMessage.noteWidth(columns);
+            this.streamingMessage.update(tail, columns, this.transcriptRenderOptions());
+        }
+        else if (commandActivity) {
+            if (!this.streamingMounted) {
+                this.streamingMounted = true;
+                this.streamingMessage.startSpinner();
+            }
+            this.streamingMessage.noteWidth(columns);
+            this.streamingMessage.updateCommandActivity(commandActivity.kind === "compact" ? "Compacting" : commandActivity.kind, commandActivity.status === "cancelling", columns);
+        }
+        else if (this.streamingMounted) {
+            this.streamingMounted = false;
+            this.streamingMessage.clearToNothing();
+        }
+        this.animationClock.setActive(this.streamingMessage.isAnimationActive());
+        this.tui.requestRender();
+    }
+    transcriptRenderOptions() {
+        return {
+            theme: this.transcriptTheme,
+            showReasoning: this.showReasoning,
+            verboseTrace: this.verboseTrace,
+            traceInteraction: this.traceInteraction,
+            markdownRenderer: this.markdownRenderer,
+            // While running, this separates settled history from the live surface.
+            // Once settled, the permanent blank activity lane owns the dock gap.
+            trailingSpacer: this.options.controller.isRunning(),
+        };
+    }
+    start() {
+        this.tui.start();
+        this.render();
+    }
+    dispose() {
+        if (this.disposed)
+            return;
+        this.disposed = true;
+        this.unsubscribe();
+        this.animationClock.dispose();
+        this.streamingMessage.dispose();
+        // Returning to the host/main renderer must not copy the fullscreen dock
+        // (composer + footer) into terminal scrollback.
+        this.tui.stop({ preserveScreen: true });
+    }
+    async waitUntilExit() {
+        await new Promise(() => {
+            // Exit is driven by onExit (Escape/Ctrl+C//fullscreen); the promise
+            // resolves via dispose() from the host.
+        });
+    }
+}

package/dist/tui/image-display.d.ts

@@ -0,0 +1,23 @@
+export interface ImageDisplayMessage {
+    content?: string | null;
+}
+export declare function imageDisplayLabel(index: number): string;
+export declare function imageDisplayLabels(count: number, labelStart?: number): string[];
+export declare function imageDisplayReferenceLine(label: string): string;
+/**
+ * Removes inline image labels (and a single trailing space) from composer text
+ * before submit, so the labels stay a composer-only positioning affordance and
+ * the model receives the user's actual text. Each label is removed once.
+ */
+export declare function stripInlineImageLabels(content: string, labels: string[]): string;
+export declare function isImageDisplayReferenceLine(line: string): boolean;
+export declare function splitImageDisplayContent(content: string): {
+    bodyLines: string[];
+    referenceLines: string[];
+};
+export declare function formatImageUserDisplayText(input: string, imageCount: number, labelStart?: number): string;
+export declare function displayImagesFromPayload(payload: SubmitPayload): DisplayImageAttachment[];
+export declare function imageAttachmentFromDataUrl(url: string): ImageAttachment | undefined;
+export declare function nextImageDisplayLabelStart(messages: Iterable<ImageDisplayMessage>): number;
+import type { SubmitPayload } from "./model/composer-types.js";
+import type { DisplayImageAttachment, ImageAttachment } from "./model/image-attachment.js";

package/dist/tui/image-display.js

@@ -0,0 +1,92 @@
+export function imageDisplayLabel(index) {
+    return `[Image #${index}]`;
+}
+export function imageDisplayLabels(count, labelStart = 1) {
+    return Array.from({ length: Math.max(0, count) }, (_, index) => imageDisplayLabel(labelStart + index));
+}
+export function imageDisplayReferenceLine(label) {
+    return `└ ${label}`;
+}
+/**
+ * Removes inline image labels (and a single trailing space) from composer text
+ * before submit, so the labels stay a composer-only positioning affordance and
+ * the model receives the user's actual text. Each label is removed once.
+ */
+export function stripInlineImageLabels(content, labels) {
+    let out = content;
+    for (const label of labels) {
+        const withSpace = out.indexOf(`${label} `);
+        if (withSpace >= 0) {
+            out = out.slice(0, withSpace) + out.slice(withSpace + label.length + 1);
+            continue;
+        }
+        const bare = out.indexOf(label);
+        if (bare >= 0)
+            out = out.slice(0, bare) + out.slice(bare + label.length);
+    }
+    return out;
+}
+export function isImageDisplayReferenceLine(line) {
+    return /^└ \[Image #\d+\]$/.test(line.trimEnd());
+}
+export function splitImageDisplayContent(content) {
+    const bodyLines = [];
+    const referenceLines = [];
+    for (const line of content.split("\n")) {
+        if (isImageDisplayReferenceLine(line)) {
+            referenceLines.push(line);
+        }
+        else {
+            bodyLines.push(line);
+        }
+    }
+    return { bodyLines, referenceLines };
+}
+export function formatImageUserDisplayText(input, imageCount, labelStart = 1) {
+    if (imageCount <= 0)
+        return input;
+    const labels = imageDisplayLabels(imageCount, labelStart);
+    // The composer text is the canonical presentation: if a chip was inserted
+    // inline, keep it at that exact position after submit. Reconstructed legacy
+    // messages do not contain labels, so only their missing chips fall back to
+    // standalone reference rows.
+    const missingLabels = labels.filter((label) => !input.includes(label));
+    return [input, ...missingLabels.map(imageDisplayReferenceLine)].filter(Boolean).join("\n");
+}
+export function displayImagesFromPayload(payload) {
+    const start = payload.imageDisplayStart ?? 1;
+    return payload.images.map((attachment, index) => ({
+        ...attachment,
+        label: imageDisplayLabel(start + index),
+    }));
+}
+export function imageAttachmentFromDataUrl(url) {
+    const match = /^data:([^;,]+);base64,([A-Za-z0-9+/=\r\n]+)$/.exec(url.trim());
+    if (!match)
+        return undefined;
+    const mediaType = match[1].toLowerCase();
+    const base64 = match[2].replace(/[\r\n]/g, "");
+    if (!mediaType.startsWith("image/"))
+        return undefined;
+    let bytes = 0;
+    try {
+        bytes = Buffer.from(base64, "base64").byteLength;
+    }
+    catch {
+        return undefined;
+    }
+    return { base64, mediaType, bytes, dataUrl: `data:${mediaType};base64,${base64}` };
+}
+export function nextImageDisplayLabelStart(messages) {
+    let max = 0;
+    const pattern = /\[Image #(\d+)\]/g;
+    for (const message of messages) {
+        const content = message.content ?? "";
+        for (const match of content.matchAll(pattern)) {
+            const value = Number(match[1]);
+            if (Number.isFinite(value))
+                max = Math.max(max, value);
+        }
+    }
+    return max + 1;
+}

package/dist/tui/image-paste.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Image paste utilities: path detection, file reading, clipboard access, and size-capping.
+ *
+ * Terminals don't forward image bytes to stdin. Paths arrive as text when users
+ * drag files in; Cmd+V of an image produces an empty paste (we probe the
+ * clipboard). macOS screenshot shortcut (Cmd+Shift+Ctrl+4) writes to both a
+ * TemporaryItems path and the clipboard — the path often gets cleaned up before
+ * we can read it, so we fall back to the clipboard.
+ */
+import type { ContentPart } from "../types.js";
+export interface ImageAttachment {
+    base64: string;
+    mediaType: string;
+    /** Raw byte size of the decoded image (not base64). */
+    bytes: number;
+    /** data:<mediaType>;base64,<...> — ready to send as image_url.url. */
+    dataUrl: string;
+    filename?: string;
+    sourcePath?: string;
+}
+export interface ImagePathToken {
+    rawPath: string;
+    start: number;
+    end: number;
+}
+export interface ImageInputResolution {
+    actualInput: string | ContentPart[];
+    displayInput: string;
+    errors: string[];
+    attachments: ImageAttachment[];
+    imagePathCount: number;
+}
+export interface LabeledImageAttachment extends ImageAttachment {
+    label: string;
+}
+export interface ComposerImageResolution {
+    text: string;
+    attachments: LabeledImageAttachment[];
+    errors: string[];
+    imagePathCount: number;
+    nextLabelIndex: number;
+}
+export declare function isImageFilePath(raw: string): boolean;
+export declare function extractImagePathTokens(input: string): ImagePathToken[];
+export declare function removeImagePathTokens(input: string, tokens: ImagePathToken[]): string;
+export declare function imageAttachmentLabel(att: ImageAttachment, index: number): string;
+/**
+ * Label for an image path before ingestion runs. Matches what
+ * imageAttachmentLabel produces for the same file, so a label inserted at
+ * paste time stays a valid key once the attachment is registered.
+ */
+export declare function imageLabelForPath(rawPath: string, index: number): string;
+export declare function imageAttachmentReference(att: ImageAttachment, index: number): string;
+export declare function imageAttachmentLabelPattern(): RegExp;
+export declare function buildImageContentParts(promptText: string, attachments: ImageAttachment[]): ContentPart[];
+export declare function formatImageDisplayInput(promptText: string, attachments: ImageAttachment[], labelStart?: number): string;
+export declare function buildImageContentPartsFromLabels(input: string, attachmentsByLabel: Map<string, ImageAttachment>): {
+    actualInput?: ContentPart[];
+    displayInput: string;
+    usedLabels: string[];
+};
+/**
+ * Split a pasted blob into candidate path tokens.
+ *
+ * Multi-drag from Finder delivers a mix of newline- and space-separated
+ * absolute paths. Spaces inside a single path are escaped (`\ `) — we split
+ * only on a space that is followed by the start of a new absolute path.
+ */
+export declare function splitPastedPaths(pasted: string): string[];
+/**
+ * True when a pasted blob consists solely of image file paths (drag from
+ * Finder, or a terminal that converts clipboard images to temp-file paths).
+ */
+export declare function isImagePathPaste(pasted: string): boolean;
+/**
+ * Bare image filename with no directory, e.g. "Screenshot ... AM.png".
+ * Copying an image file in Finder puts only the file's NAME in the
+ * clipboard's plain-text flavor — the actual bits arrive as a file-url or
+ * image flavor that must be read from the clipboard separately.
+ */
+export declare function bareImageFilenameFromPaste(pasted: string): string | null;
+export declare function readImageFromPath(rawPath: string): Promise<ImageAttachment | null>;
+/** macOS screenshot shortcut writes to these paths and they may be auto-cleaned. */
+export declare function isScreenshotTempPath(s: string): boolean;
+export declare function getImageFromClipboard(): Promise<ImageAttachment | null>;
+/**
+ * If the image is close to the API size cap, try to downscale it in place.
+ * Uses the OS-native tools that are typically available:
+ *   - macOS: `sips` (always present)
+ *   - linux: ImageMagick `convert` (if installed)
+ * Returns the original attachment if resize isn't needed or can't run.
+ */
+export declare function maybeResizeImage(att: ImageAttachment): Promise<ImageAttachment>;
+export interface ValidationResult {
+    ok: boolean;
+    reason?: string;
+}
+export declare function validateImageSize(att: ImageAttachment): ValidationResult;
+/** End-to-end: given a file path, read -> resize-if-needed -> validate. */
+export declare function ingestImagePath(p: string): Promise<{
+    attachment?: ImageAttachment;
+    error?: string;
+}>;
+export declare function ingestClipboardImage(): Promise<{
+    attachment?: ImageAttachment;
+    error?: string;
+}>;
+export declare function resolveImageInput(input: string, options?: {
+    labelStart?: number;
+}): Promise<ImageInputResolution>;
+export declare function resolveComposerImagePaths(input: string, options?: {
+    labelStart?: number;
+}): Promise<ComposerImageResolution>;