@bubblebrain-ai/bubble 0.0.52 → 0.0.54

package/dist/tui/components/stats-panel.js

@@ -0,0 +1,301 @@
+import chalk from "chalk";
+import { matchesKey, truncateToWidth, visibleWidth, } from "@bubblebrain-ai/pi-tui";
+import { formatStatsPanelBody, rangeLabel, } from "../../stats/usage.js";
+import { parseTerminalMouseWheel } from "../model/terminal-mouse.js";
+import { darkTheme } from "../model/theme.js";
+import { themeBackground, themeDim, themeForeground } from "../model/theme-style.js";
+const RANGES = [
+    { range: "7d", label: "Last 7 days" },
+    { range: "30d", label: "Last 30 days" },
+];
+const MAX_PANEL_HEIGHT = 30;
+const COLLAPSED_MODEL_ROWS = 5;
+function fit(value, width) {
+    if (width <= 0)
+        return "";
+    const clipped = truncateToWidth(value, width, "");
+    return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+}
+function formatGeneratedAt(value) {
+    return value.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function styleActivityLine(line, theme) {
+    if (!theme) {
+        return line.split(/([·○◉●])/u).map((part) => {
+            if (part === "·")
+                return chalk.gray.dim(part);
+            if (part === "○")
+                return chalk.cyan.dim(part);
+            if (part === "◉")
+                return chalk.cyan(part);
+            if (part === "●")
+                return chalk.magenta(part);
+            return chalk.gray(part);
+        }).join("");
+    }
+    return line.split(/([·○◉●])/u).map((part) => {
+        if (part === "·")
+            return themeDim(theme.dim, part);
+        if (part === "○")
+            return themeDim(theme.accent, part);
+        if (part === "◉")
+            return themeForeground(theme.accent, part);
+        if (part === "●")
+            return themeForeground(theme.thinking, part);
+        return themeForeground(theme.muted, part);
+    }).join("");
+}
+function isModelToggleLine(line) {
+    return line.includes("Show fewer models") || /Show \d+ more models?/u.test(line);
+}
+function styleBodyLine(line, theme) {
+    if (line === "Activity" || line === "Model usage" || line === "Summary") {
+        return theme ? chalk.bold(themeForeground(theme.inputText, line)) : chalk.bold.white(line);
+    }
+    if (/[·○◉●]/u.test(line))
+        return styleActivityLine(line, theme);
+    if (isModelToggleLine(line))
+        return theme ? themeForeground(theme.accent, line) : chalk.cyan(line);
+    return theme ? themeForeground(theme.muted, line) : chalk.gray(line);
+}
+export function buildStatsPanelLines(bundle, range, contentWidth, expandedModels = false, theme) {
+    const stats = bundle.ranges[range];
+    const body = formatStatsPanelBody(stats, Math.max(48, contentWidth), { expandedModels })
+        .split("\n")
+        .map((line) => styleBodyLine(line, theme));
+    return [
+        theme ? chalk.bold(themeForeground(theme.inputText, "Stats")) : chalk.bold.white("Stats"),
+        "",
+        theme
+            ? themeForeground(theme.muted, `${rangeLabel(range)} · ${stats.startDate} – ${stats.endDate}`)
+            : chalk.gray(`${rangeLabel(range)} · ${stats.startDate} – ${stats.endDate}`),
+        theme
+            ? themeDim(theme.dim, `Generated ${formatGeneratedAt(bundle.generatedAt)}`)
+            : chalk.dim(`Generated ${formatGeneratedAt(bundle.generatedAt)}`),
+        "",
+        ...body,
+    ];
+}
+/** A /context-style usage overlay with range switching and scrolling. */
+export class StatsPanelComponent {
+    bundle;
+    options;
+    focused = false;
+    range = "30d";
+    offset = 0;
+    bodyRows = 0;
+    contentRows = 0;
+    frameWidth = 0;
+    tabHits = [];
+    modelToggleHit;
+    hoveredTab;
+    modelToggleHovered = false;
+    closeHovered = false;
+    modelsExpanded = false;
+    constructor(bundle, options) {
+        this.bundle = bundle;
+        this.options = options;
+    }
+    render(width) {
+        const theme = this.options.theme ?? darkTheme;
+        const frameWidth = Math.max(1, Math.floor(width));
+        const frameHeight = Math.max(1, Math.min(MAX_PANEL_HEIGHT, this.options.getTerminalRows() - 4));
+        this.frameWidth = frameWidth;
+        if (frameWidth < 8 || frameHeight < 5) {
+            return [truncateToWidth("Stats · Esc close", frameWidth, "")].slice(0, frameHeight);
+        }
+        const innerWidth = frameWidth - 2;
+        const horizontal = "─".repeat(Math.max(0, frameWidth - 2));
+        const topDashCount = Math.max(0, frameWidth - 7);
+        const close = this.closeHovered
+            ? chalk.bold(themeForeground(theme.inputText, "[✗]"))
+            : themeForeground(theme.muted, "[✗]");
+        const top = themeForeground(theme.border, `┌${"─".repeat(topDashCount)}`) + ` ${close} ` + themeForeground(theme.border, "┐");
+        const bottom = themeForeground(theme.border, `└${horizontal}┘`);
+        const separator = themeForeground(theme.border, `├${horizontal}┤`);
+        const tabLine = this.renderTabs(innerWidth);
+        const contentWidth = Math.max(1, innerWidth - 4);
+        const content = buildStatsPanelLines(this.bundle, this.range, contentWidth, this.modelsExpanded, this.options.theme);
+        this.bodyRows = Math.max(0, frameHeight - 5);
+        this.contentRows = content.length;
+        const maxOffset = Math.max(0, content.length - this.bodyRows);
+        this.offset = Math.min(this.offset, maxOffset);
+        const visible = content.slice(this.offset, this.offset + this.bodyRows);
+        while (visible.length < this.bodyRows)
+            visible.push("");
+        this.modelToggleHit = undefined;
+        const body = visible.map((line, index) => {
+            const modelToggle = isModelToggleLine(line);
+            if (modelToggle) {
+                this.modelToggleHit = {
+                    start: 1,
+                    end: frameWidth - 1,
+                    row: 3 + index,
+                };
+            }
+            const padded = `  ${fit(line, contentWidth)}  `;
+            const decorated = modelToggle && this.modelToggleHovered
+                ? themeForeground(theme.inputText, themeBackground(theme.traceHoverBg, padded))
+                : padded;
+            return this.frameLine(decorated, innerWidth);
+        });
+        const footer = this.frameLine(this.renderFooter(innerWidth), innerWidth);
+        return [top, this.frameLine(tabLine, innerWidth), separator, ...body, footer, bottom]
+            .slice(0, frameHeight)
+            .map((line) => truncateToWidth(line, frameWidth, ""));
+    }
+    handleInput(data) {
+        const wheel = parseTerminalMouseWheel(data);
+        if (wheel.length > 0) {
+            for (const direction of wheel)
+                this.scroll(direction === "up" ? -3 : 3);
+            return;
+        }
+        if (matchesKey(data, "escape"))
+            return this.options.onClose();
+        if (matchesKey(data, "tab"))
+            return this.stepRange(1);
+        if (matchesKey(data, "shift+tab"))
+            return this.stepRange(-1);
+        if (matchesKey(data, "left") || data === "h" || data === "1")
+            return this.selectRange("7d");
+        if (matchesKey(data, "right") || data === "l" || data === "2")
+            return this.selectRange("30d");
+        if (data === "m")
+            return this.toggleModels();
+        if (matchesKey(data, "up") || data === "k")
+            return this.scroll(-1);
+        if (matchesKey(data, "down") || data === "j")
+            return this.scroll(1);
+        if (matchesKey(data, "pageUp"))
+            return this.scroll(-Math.max(1, this.bodyRows - 1));
+        if (matchesKey(data, "pageDown"))
+            return this.scroll(Math.max(1, this.bodyRows - 1));
+        if (matchesKey(data, "home"))
+            return this.setOffset(0);
+        if (matchesKey(data, "end") || data === "G") {
+            return this.setOffset(Math.max(0, this.contentRows - this.bodyRows));
+        }
+    }
+    handleMouse(event) {
+        if (event.kind === "leave") {
+            const changed = this.closeHovered || this.modelToggleHovered || this.hoveredTab !== undefined;
+            this.closeHovered = false;
+            this.modelToggleHovered = false;
+            this.hoveredTab = undefined;
+            return changed;
+        }
+        const overClose = event.y === 0
+            && event.x >= Math.max(0, this.frameWidth - 6)
+            && event.x < this.frameWidth - 1;
+        const tabIndex = this.tabHits.findIndex((hit) => (event.y === hit.row && event.x >= hit.start && event.x < hit.end));
+        const overModelToggle = !!this.modelToggleHit
+            && event.y === this.modelToggleHit.row
+            && event.x >= this.modelToggleHit.start
+            && event.x < this.modelToggleHit.end;
+        if (event.kind === "move") {
+            const nextTab = tabIndex >= 0 ? tabIndex : undefined;
+            const changed = this.closeHovered !== overClose
+                || this.modelToggleHovered !== overModelToggle
+                || this.hoveredTab !== nextTab;
+            this.closeHovered = overClose;
+            this.modelToggleHovered = overModelToggle;
+            this.hoveredTab = nextTab;
+            return changed;
+        }
+        if (event.release || (event.button & 3) !== 0)
+            return false;
+        if (overClose) {
+            this.options.onClose();
+            return true;
+        }
+        const target = RANGES[tabIndex];
+        if (target) {
+            this.selectRange(target.range);
+            return true;
+        }
+        if (overModelToggle) {
+            this.toggleModels();
+            return true;
+        }
+        return false;
+    }
+    invalidate() { }
+    frameLine(content, width) {
+        const theme = this.options.theme ?? darkTheme;
+        return `${themeForeground(theme.border, "│")}${fit(content, width)}${themeForeground(theme.border, "│")}`;
+    }
+    renderTabs(innerWidth) {
+        const theme = this.options.theme ?? darkTheme;
+        const pieces = ["  "];
+        let width = 2;
+        this.tabHits = [];
+        for (let index = 0; index < RANGES.length; index += 1) {
+            const item = RANGES[index];
+            const gap = index > 0 ? 3 : 0;
+            if (gap > 0) {
+                pieces.push("   ");
+                width += gap;
+            }
+            const start = 1 + width;
+            this.tabHits.push({ start, end: start + visibleWidth(item.label), row: 1 });
+            const active = item.range === this.range;
+            const hovered = index === this.hoveredTab;
+            pieces.push(active
+                ? chalk.bold(themeForeground(theme.inputText, themeBackground(theme.traceSelectedBg, item.label)))
+                : hovered
+                    ? themeForeground(theme.inputText, themeBackground(theme.traceHoverBg, item.label))
+                    : themeForeground(theme.muted, item.label));
+            width += visibleWidth(item.label);
+        }
+        return fit(pieces.join(""), innerWidth);
+    }
+    renderFooter(innerWidth) {
+        const theme = this.options.theme ?? darkTheme;
+        const plain = innerWidth >= 74 && this.bundle.ranges[this.range].models.length > COLLAPSED_MODEL_ROWS
+            ? "m models  |  Tab/←/→ range  |  ↑/↓ scroll  |  Esc close"
+            : innerWidth >= 62
+                ? "Tab/←/→ range  |  ↑/↓ scroll  |  Esc close"
+                : innerWidth >= 42
+                    ? "←/→ range  |  ↑/↓ scroll  |  Esc close"
+                    : "↑/↓ scroll  |  Esc close";
+        const left = Math.max(0, Math.floor((innerWidth - visibleWidth(plain)) / 2));
+        return fit(`${" ".repeat(left)}${themeDim(theme.dim, plain)}`, innerWidth);
+    }
+    stepRange(direction) {
+        const current = RANGES.findIndex((item) => item.range === this.range);
+        const next = (current + direction + RANGES.length) % RANGES.length;
+        this.selectRange(RANGES[next].range);
+    }
+    selectRange(range) {
+        if (range === this.range)
+            return;
+        this.range = range;
+        this.offset = 0;
+        this.modelsExpanded = false;
+        this.modelToggleHovered = false;
+        this.options.onRender();
+    }
+    toggleModels() {
+        const modelCount = this.bundle.ranges[this.range].models.length;
+        if (modelCount <= COLLAPSED_MODEL_ROWS)
+            return;
+        const insertedRows = modelCount - COLLAPSED_MODEL_ROWS;
+        this.offset = this.modelsExpanded
+            ? Math.max(0, this.offset - insertedRows)
+            : this.offset + insertedRows;
+        this.modelsExpanded = !this.modelsExpanded;
+        this.modelToggleHovered = false;
+        this.options.onRender();
+    }
+    scroll(delta) {
+        this.setOffset(this.offset + delta);
+    }
+    setOffset(value) {
+        const next = Math.max(0, Math.min(Math.max(0, this.contentRows - this.bodyRows), value));
+        if (next === this.offset)
+            return;
+        this.offset = next;
+        this.options.onRender();
+    }
+}

package/dist/tui/components/streaming-message.d.ts

@@ -0,0 +1,69 @@
+import { VStack, type Component } from "@bubblebrain-ai/pi-tui";
+import type { DisplayMessagePart, DisplayToolCall } from "../model/display-history.js";
+import type { TraceAction } from "../model/trace-interaction.js";
+import type { Theme } from "../model/theme.js";
+import { type TranscriptRenderOptions } from "./transcript.js";
+export interface StreamingTailState {
+    content: string;
+    reasoning: string;
+    tools: readonly DisplayToolCall[];
+    parts: readonly DisplayMessagePart[];
+    phase?: "thinking" | "working";
+}
+/**
+ * A permanent one-row boundary between the scrolling transcript and composer.
+ * Running turns paint the spinner into this lane; idle turns leave it blank.
+ * The row never collapses, so completing a turn cannot change the document /
+ * composer geometry.
+ */
+export declare class AgentActivityLaneComponent implements Component {
+    private text;
+    setText(text: string): void;
+    render(width: number): string[];
+    invalidate(): void;
+}
+export declare class StreamingMessageComponent extends VStack {
+    private readonly onTraceAction?;
+    private readonly getTheme?;
+    private tail;
+    private commandActivity;
+    private frame;
+    private spinnerActive;
+    private idlePhraseElapsedMs;
+    private readonly onFrame?;
+    readonly activityLane: AgentActivityLaneComponent;
+    private readonly thinkingHeaderRow;
+    private readonly thinkingEllipsisRow;
+    private readonly reasoningGapRow;
+    private readonly timelineEllipsisRow;
+    private readonly liveGapRow;
+    private readonly reasoningRows;
+    private readonly timelineRows;
+    private idlePhraseIndex;
+    private projectionOptions;
+    constructor(maxPreviewRows?: number, onFrame?: () => void, onTraceAction?: ((action: TraceAction) => void) | undefined, getTheme?: (() => Theme) | undefined);
+    /** Live update while streaming. */
+    update(tail: StreamingTailState, columns: number, projectionOptions?: Omit<TranscriptRenderOptions, "columns">): void;
+    /** Paint a non-turn command into the same permanent activity lane Grok uses
+     * for Thinking, tools and manual compaction. No transcript preview rows are
+     * created, so completion only replaces the spinner with its event line. */
+    updateCommandActivity(label: string, cancelling: boolean, columns: number): void;
+    /**
+     * Turn ended: collapse every scrollable slot and clear (but do not collapse)
+     * the permanent activity lane. Same-frame with the controller's settled
+     * append, the full answer replaces the preview without changing the
+     * transcript/composer boundary height.
+     */
+    clearToNothing(): void;
+    private clearProjectedRows;
+    startSpinner(): void;
+    private lastColumns?;
+    stopSpinner(): void;
+    isAnimationActive(): boolean;
+    /** Advance decorative state only; trace/Markdown projection never runs here. */
+    advanceAnimationFrame(elapsedMs?: number): boolean;
+    dispose(): void;
+    /** Remember the width for spinner-driven rebuilds between flushes. */
+    noteWidth(columns: number): void;
+    private updateActivityLane;
+}