@bubblebrain-ai/bubble 0.0.20 → 0.0.21

package/dist/tui-ink/trace-groups.d.ts

@@ -7,6 +7,10 @@ export interface TraceGroup {
     count?: number;
     noun?: string;
     command?: string;
+    /** Model-provided one-line summary of what the command does (bash `description` arg). */
+    description?: string;
+    /** Original command split into lines, line breaks preserved (execute groups only). */
+    commandLines?: string[];
     items: string[];
     previewLines: string[];
     errorLines: string[];
@@ -25,3 +29,15 @@ export declare function buildTraceGroups(toolCalls: DisplayToolCall[], options?:
 export declare function formatTracePath(value: unknown, homeDir?: string): string;
 export declare function formatElapsed(startedAt: number | undefined, now?: number): string | null;
 export declare function traceGroupLabel(group: TraceGroup): string;
+/**
+ * An execute command is shown inline in the header only when nothing is lost:
+ * no description competing for the slot, a single logical line, and it fits
+ * the width budget. Otherwise the full command renders as a wrapped block
+ * below the header — commands are never clipped mid-line.
+ */
+export declare function shouldInlineExecuteCommand(group: TraceGroup, widthBudget: number): boolean;
+/** Visible command-block lines for compact rendering, capped at `maxLines`. */
+export declare function executeCommandBlock(group: TraceGroup, maxLines: number): {
+    lines: string[];
+    omitted: number;
+};

package/dist/tui-ink/trace-groups.js

@@ -65,12 +65,36 @@ export function formatElapsed(startedAt, now = Date.now()) {
     return `${minutes}m${remainder.toString().padStart(2, "0")}s`;
 }
 export function traceGroupLabel(group) {
+    if (group.description)
+        return `${group.title} ${group.description}`;
     if (group.command)
         return `${group.title} ${group.command}`;
     if (group.count !== undefined && group.noun)
         return `${group.title} ${group.count} ${group.noun}`;
     return group.title;
 }
+/**
+ * An execute command is shown inline in the header only when nothing is lost:
+ * no description competing for the slot, a single logical line, and it fits
+ * the width budget. Otherwise the full command renders as a wrapped block
+ * below the header — commands are never clipped mid-line.
+ */
+export function shouldInlineExecuteCommand(group, widthBudget) {
+    if (group.kind !== "execute" || !group.command)
+        return false;
+    if (group.description)
+        return false;
+    const lines = group.commandLines ?? [];
+    if (lines.length > 1)
+        return false;
+    return group.command.length <= widthBudget;
+}
+/** Visible command-block lines for compact rendering, capped at `maxLines`. */
+export function executeCommandBlock(group, maxLines) {
+    const lines = group.commandLines ?? [];
+    const shown = lines.slice(0, maxLines);
+    return { lines: shown, omitted: Math.max(0, lines.length - shown.length) };
+}
 function classifyTool(toolCall) {
     if (toolCall.metadata?.kind === "subagent") {
         return { kind: "subagent", title: "Subagents", bucketKey: `subagent:${toolCall.id}`, groupable: false };
@@ -244,11 +268,15 @@ function buildSearchGroup(classifier, raw, options, pending, startedAt, hasError
 function buildExecuteGroup(classifier, tool, options, pending, startedAt, hasError, errorCount) {
     const lines = resultLines(tool.result).map((line) => formatTracePath(line, options.homeDir));
     const { shown, omitted } = take(lines, options.maxPreviewLines);
+    const rawCommand = String(tool.args.command ?? tool.args.cmd ?? commandFromRawArguments(tool.rawArguments) ?? "");
+    const description = String(tool.args.description ?? "").trim() || undefined;
     return {
         kind: "execute",
         title: classifier.title,
         raw: [tool],
-        command: normalizeCommand(tool.args.command ?? tool.args.cmd ?? commandFromRawArguments(tool.rawArguments)),
+        command: normalizeCommand(rawCommand),
+        description,
+        commandLines: commandLinesOf(rawCommand),
         items: [],
         previewLines: shown,
         errorLines: [],
@@ -262,7 +290,7 @@ function buildExecuteGroup(classifier, tool, options, pending, startedAt, hasErr
 function buildMutationGroup(classifier, raw, options, pending, startedAt, hasError, errorCount) {
     const items = raw
         .map((tool) => {
-        const path = formatTracePath(tool.args.path ?? "", options.homeDir);
+        const path = formatTracePath(tool.args.path ?? firstMetadataPath(tool) ?? "", options.homeDir);
         const details = tool.name === "edit" ? getEditDiffDetails(tool) : null;
         const suffix = details ? ` ${formatCompactEditStats(details.added, details.removed)}` : "";
         return path ? `${path}${suffix}` : "";
@@ -428,6 +456,19 @@ function displayToolName(name) {
         return "Tool";
     return name.charAt(0).toUpperCase() + name.slice(1).replace(/_/g, " ");
 }
+// Preserves the command's own line structure (heredocs, && chains the model
+// formatted across lines); only trims trailing whitespace and outer blank lines.
+function commandLinesOf(rawCommand) {
+    const lines = rawCommand
+        .replace(/\r\n/g, "\n")
+        .split("\n")
+        .map((line) => line.trimEnd());
+    while (lines.length > 0 && lines[0].trim() === "")
+        lines.shift();
+    while (lines.length > 0 && lines[lines.length - 1].trim() === "")
+        lines.pop();
+    return lines;
+}
 function toolHeader(tool, homeDir) {
     const args = tool.args || {};
     for (const key of ["path", "command", "pattern", "query", "url"]) {
@@ -436,8 +477,15 @@ function toolHeader(tool, homeDir) {
             return formatTracePath(value, homeDir);
         }
     }
+    const path = firstMetadataPath(tool);
+    if (path)
+        return formatTracePath(path, homeDir);
     return undefined;
 }
+function firstMetadataPath(tool) {
+    const paths = tool.metadata?.paths;
+    return Array.isArray(paths) && typeof paths[0] === "string" ? paths[0] : undefined;
+}
 function formatCompactEditStats(added, removed) {
     const parts = [];
     if (added > 0)

package/dist/tui-ink/transcript-viewport-math.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Pure scroll arithmetic for the alt-screen transcript viewport.
+ *
+ * Mirrors the live OpenTUI scrollbox semantics (src/tui/run.ts
+ * transcriptMaxScrollTop / isTranscriptAtBottom): "at bottom" tolerates a
+ * one-line slack so sub-line rounding never flips the follow flag while the
+ * user sits at the end of the transcript.
+ */
+export declare function maxScrollTop(contentHeight: number, viewportHeight: number): number;
+export declare function clampScrollTop(scrollTop: number, contentHeight: number, viewportHeight: number): number;
+export declare function isAtBottom(scrollTop: number, contentHeight: number, viewportHeight: number): boolean;

package/dist/tui-ink/transcript-viewport-math.js

@@ -0,0 +1,17 @@
+/**
+ * Pure scroll arithmetic for the alt-screen transcript viewport.
+ *
+ * Mirrors the live OpenTUI scrollbox semantics (src/tui/run.ts
+ * transcriptMaxScrollTop / isTranscriptAtBottom): "at bottom" tolerates a
+ * one-line slack so sub-line rounding never flips the follow flag while the
+ * user sits at the end of the transcript.
+ */
+export function maxScrollTop(contentHeight, viewportHeight) {
+    return Math.max(0, contentHeight - viewportHeight);
+}
+export function clampScrollTop(scrollTop, contentHeight, viewportHeight) {
+    return Math.max(0, Math.min(scrollTop, maxScrollTop(contentHeight, viewportHeight)));
+}
+export function isAtBottom(scrollTop, contentHeight, viewportHeight) {
+    return scrollTop >= maxScrollTop(contentHeight, viewportHeight) - 1;
+}

package/dist/tui-ink/transcript-viewport.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export interface TranscriptViewportHandle {
+    /**
+     * Re-engage bottom-follow. Sets the pending force flag from
+     * transcript-scroll.ts, so the snap survives streaming renders that land
+     * between the request and the next measured layout.
+     */
+    forceScrollToBottom(): void;
+    /** Scroll by N lines (negative = up). A user gesture: cancels a pending force. */
+    scrollBy(lines: number): void;
+    scrollPage(direction: "up" | "down"): void;
+}
+interface TranscriptViewportProps {
+    children: React.ReactNode;
+}
+/**
+ * Height-clamped scrolling viewport for the alt-screen transcript. The outer
+ * box clips; the inner box carries the full transcript and slides via a
+ * negative top margin. Follow policy is the shared transcript-scroll.ts:
+ * stay snapped while at the bottom, hold position while reading history,
+ * snap back on send/approval via forceScrollToBottom().
+ */
+export declare const TranscriptViewport: React.ForwardRefExoticComponent<TranscriptViewportProps & React.RefAttributes<TranscriptViewportHandle>>;
+export {};

package/dist/tui-ink/transcript-viewport.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Box, measureElement } from "ink";
+import { resolveTranscriptScroll } from "../tui/transcript-scroll.js";
+import { clampScrollTop, isAtBottom, maxScrollTop } from "./transcript-viewport-math.js";
+/**
+ * Height-clamped scrolling viewport for the alt-screen transcript. The outer
+ * box clips; the inner box carries the full transcript and slides via a
+ * negative top margin. Follow policy is the shared transcript-scroll.ts:
+ * stay snapped while at the bottom, hold position while reading history,
+ * snap back on send/approval via forceScrollToBottom().
+ */
+export const TranscriptViewport = forwardRef(function TranscriptViewport({ children }, ref) {
+    const viewportRef = useRef(null);
+    const contentRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const scrollTopRef = useRef(0);
+    const followingRef = useRef(true);
+    const forcePendingRef = useRef(false);
+    // forceScrollToBottom must work even when no other state changes in the
+    // same tick; bumping this guarantees a commit so the measuring effect runs.
+    const [, setScrollEpoch] = useState(0);
+    const applyScrollTop = (next) => {
+        scrollTopRef.current = next;
+        setScrollTop(next);
+    };
+    // measureElement returns the Yoga-computed size, valid only after layout —
+    // callable from effects and input handlers, never during render.
+    const measureHeights = () => ({
+        viewportHeight: viewportRef.current ? measureElement(viewportRef.current).height : 0,
+        contentHeight: contentRef.current ? measureElement(contentRef.current).height : 0,
+    });
+    // Content and viewport heights change with streaming text, tool expansion,
+    // resize, and bottom-stack visibility — no dependency list covers them
+    // all, so re-resolve after every commit. setState below bails out via
+    // Object.is when nothing moved, so the steady state does not loop.
+    useEffect(() => {
+        const { viewportHeight, contentHeight } = measureHeights();
+        if (viewportHeight <= 0)
+            return;
+        const action = resolveTranscriptScroll({
+            forcePending: forcePendingRef.current,
+            shouldFollow: followingRef.current,
+            following: followingRef.current,
+        });
+        if (action === "scroll-bottom") {
+            forcePendingRef.current = false;
+            followingRef.current = true;
+            applyScrollTop(maxScrollTop(contentHeight, viewportHeight));
+        }
+        else {
+            const clamped = clampScrollTop(scrollTopRef.current, contentHeight, viewportHeight);
+            followingRef.current = isAtBottom(clamped, contentHeight, viewportHeight);
+            if (clamped !== scrollTopRef.current)
+                applyScrollTop(clamped);
+        }
+    });
+    useImperativeHandle(ref, () => {
+        const scrollBy = (lines) => {
+            forcePendingRef.current = false; // the user's latest gesture wins
+            const { viewportHeight, contentHeight } = measureHeights();
+            if (viewportHeight <= 0)
+                return;
+            const next = clampScrollTop(scrollTopRef.current + lines, contentHeight, viewportHeight);
+            followingRef.current = isAtBottom(next, contentHeight, viewportHeight);
+            if (next !== scrollTopRef.current)
+                applyScrollTop(next);
+        };
+        return {
+            forceScrollToBottom() {
+                forcePendingRef.current = true;
+                setScrollEpoch((epoch) => epoch + 1);
+            },
+            scrollBy,
+            scrollPage(direction) {
+                const { viewportHeight } = measureHeights();
+                const step = Math.max(1, viewportHeight - 2);
+                scrollBy(direction === "up" ? -step : step);
+            },
+        };
+    }, []);
+    return (_jsx(Box, { ref: viewportRef, flexDirection: "column", flexGrow: 1, minHeight: 0, overflowY: "hidden", children: _jsx(Box, { ref: contentRef, flexDirection: "column", flexShrink: 0, marginTop: -scrollTop, children: children }) }));
+});

package/dist/tui-ink/welcome.d.ts

@@ -1,18 +1,20 @@
 import type { DisplayMessage } from "./display-history.js";
 interface WelcomeBannerProps {
     terminalColumns: number;
-    modelLabel?: string;
-    cwd?: string;
     tips: string[];
-    skillsCount?: number;
-    mcpConnectedCount?: number;
-    mcpTotalCount?: number;
-    hasAgentsFile?: boolean;
+    /** One-line "update available" notice shown under the version. */
+    updateNotice?: string;
+    /** Friendly working directory (~ collapsed). */
+    cwd?: string;
+    providerId?: string;
+    modelLabel?: string;
+    /** Active thinking level, rendered as part of the model unit (e.g. "xhigh"). */
+    thinkingLabel?: string;
 }
 interface WelcomeVisibilityInput {
     messages: Pick<DisplayMessage, "role" | "syntheticKind">[];
     startedWithVisibleHistory: boolean;
 }
 export declare function shouldShowWelcomeBanner({ startedWithVisibleHistory, }: WelcomeVisibilityInput): boolean;
-export declare function WelcomeBanner({ terminalColumns, modelLabel, cwd, tips, skillsCount, mcpConnectedCount, mcpTotalCount, hasAgentsFile, }: WelcomeBannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, providerId, modelLabel, thinkingLabel, }: WelcomeBannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tui-ink/welcome.js

@@ -1,12 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text } from "ink";
 import { createRequire } from "node:module";
 import { useTheme } from "./theme.js";
-import { BUBBLE_COMPACT_WORDMARK, BUBBLE_WORDMARK, bubbleWordmarkLineText, bubbleWordmarkMaxWidth, } from "../tui/wordmark.js";
+import { bubbleWordmarkForWidth, } from "../tui/wordmark.js";
 const require = createRequire(import.meta.url);
 const PACKAGE_VERSION = readPackageVersion();
-const WIDE_LOGO_MIN_WIDTH = bubbleWordmarkMaxWidth(BUBBLE_WORDMARK) + 4;
 export function shouldShowWelcomeBanner({ startedWithVisibleHistory, }) {
     // Keep banner visibility tied to the initial history, not transient overlays,
     // so opening and closing a picker does not move it in the transcript.
@@ -14,20 +13,19 @@ export function shouldShowWelcomeBanner({ startedWithVisibleHistory, }) {
         return false;
     return true;
 }
-export function WelcomeBanner({ terminalColumns, modelLabel, cwd, tips, skillsCount = 0, mcpConnectedCount = 0, mcpTotalCount = 0, hasAgentsFile = false, }) {
+export function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, providerId, modelLabel, thinkingLabel, }) {
     const theme = useTheme();
     const effectiveWidth = Math.max(20, Math.min(terminalColumns - 2, 118));
-    const useWideLogo = effectiveWidth >= WIDE_LOGO_MIN_WIDTH;
+    // Adaptive sizing: large pixel logo on wide terminals, standard, then the
+    // single-line compact mark — same thresholds as the OpenTUI home screen.
+    const logoLines = bubbleWordmarkForWidth(effectiveWidth);
     const actionableTips = tips
         .filter((item) => !item.startsWith("Ready with") && item.trim().length > 0)
         .slice(0, 2);
     const tip = actionableTips.length > 0
         ? actionableTips.join(" · ")
         : "Type / for commands and @ to reference files";
-    const modelLine = modelLabel ? `${modelLabel}${cwd ? ` · ${cwd}` : ""}` : cwd;
-    return (_jsxs(Box, { width: effectiveWidth, flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", children: useWideLogo
-                    ? BUBBLE_WORDMARK.map((line, rowIndex) => (_jsx(LogoRow, { line: line }, `logo-row-${rowIndex}`)))
-                    : _jsx(CompactLogo, {}) }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { bold: true, color: theme.muted, children: PACKAGE_VERSION }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { bold: true, color: theme.userMessageText, children: "TIP: " }), _jsx(Text, { bold: true, color: theme.userMessageText, children: tip })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "shift+tab to cycle modes \u00B7 ctrl+r for reasoning \u00B7 ctrl+o for trace" }) }), modelLine && (_jsx(Box, { children: _jsx(Text, { color: theme.muted, children: truncateToWidth(modelLine, effectiveWidth - 4) }) })), _jsxs(Box, { marginTop: 1, children: [_jsx(StatusItem, { label: "Skills", count: skillsCount, ok: skillsCount > 0 }), _jsx(Text, { color: theme.muted, children: "  " }), _jsx(StatusItem, { label: "MCPs", count: mcpConnectedCount, total: mcpTotalCount, ok: mcpTotalCount === 0 || mcpConnectedCount === mcpTotalCount }), _jsx(Text, { color: theme.muted, children: "  " }), _jsx(StatusItem, { label: "AGENTS.md", ok: hasAgentsFile })] })] }));
+    return (_jsxs(Box, { width: effectiveWidth, flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsx(Box, { flexDirection: "column", alignItems: "center", children: logoLines.map((line, rowIndex) => (_jsx(LogoRow, { line: line }, `logo-row-${rowIndex}`))) }), _jsx(Box, { marginTop: 2, children: _jsx(Text, { bold: true, color: theme.muted, children: PACKAGE_VERSION }) }), updateNotice && (_jsx(Box, { children: _jsx(Text, { color: theme.accent, children: updateNotice }) })), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { bold: true, color: theme.userMessageText, children: "TIP: " }), _jsx(Text, { bold: true, color: theme.userMessageText, children: tip })] }), (cwd || modelLabel) && (_jsxs(Box, { marginTop: 1, children: [cwd && _jsx(Text, { color: theme.muted, children: cwd }), cwd && (providerId || modelLabel) && _jsx(Text, { children: "    " }), providerId && _jsxs(Text, { color: theme.muted, dimColor: true, children: [providerId, " \u00B7 "] }), modelLabel && (_jsxs(Text, { bold: true, color: theme.toolName, children: [modelLabel, thinkingLabel ? ` ${thinkingLabel}` : ""] }))] }))] }));
 }
 function LogoRow({ line }) {
     const theme = useTheme();
@@ -36,14 +34,6 @@ function LogoRow({ line }) {
     }
     return (_jsx(Box, { children: line.segments.map((segment, index) => (_jsx(React.Fragment, { children: _jsx(Text, { bold: true, color: logoColor(theme, segment.tone), children: segment.text }) }, `${index}-${segment.text}`))) }));
 }
-function CompactLogo() {
-    const theme = useTheme();
-    const line = BUBBLE_COMPACT_WORDMARK[0];
-    if (!line?.segments) {
-        return _jsx(Text, { bold: true, color: theme.warning, children: bubbleWordmarkLineText(line ?? { text: "" }) });
-    }
-    return (_jsx(Box, { children: line.segments.map((segment, index) => (_jsx(Text, { bold: true, color: logoColor(theme, segment.tone), children: segment.text }, `${segment.text}-${index}`))) }));
-}
 function logoColor(theme, tone) {
     switch (tone) {
         case "brand": return theme.warning;
@@ -53,15 +43,6 @@ function logoColor(theme, tone) {
         case "caption": return theme.muted;
     }
 }
-function StatusItem({ label, count, total, ok, }) {
-    const theme = useTheme();
-    const countText = count === undefined
-        ? ""
-        : total !== undefined && total > count
-            ? ` (${count}/${total})`
-            : ` (${count})`;
-    return (_jsxs(_Fragment, { children: [_jsxs(Text, { bold: true, color: theme.muted, children: [label, countText, " "] }), _jsx(Text, { bold: true, color: ok ? theme.success : theme.error, children: ok ? "✓" : "×" })] }));
-}
 function readPackageVersion() {
     try {
         const pkg = require("../../package.json");
@@ -71,10 +52,3 @@ function readPackageVersion() {
         return "v0.0.0";
     }
 }
-function truncateToWidth(text, maxWidth) {
-    if (maxWidth <= 0)
-        return "";
-    if (text.length <= maxWidth)
-        return text;
-    return text.slice(0, Math.max(1, maxWidth - 1)) + "…";
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bubblebrain-ai/bubble",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "A terminal coding agent",
   "type": "module",
   "engines": {