@bubblebrain-ai/bubble 0.0.31 → 0.0.33

package/dist/tui-ink/app.js

@@ -72,6 +72,12 @@ function friendlyCwd(cwd) {
         return "~" + cwd.slice(home.length);
     return cwd;
 }
+function sessionBasename(sessionFile) {
+    if (!sessionFile)
+        return undefined;
+    const base = sessionFile.split("/").pop() ?? sessionFile;
+    return base.replace(/\.jsonl$/, "");
+}
 function truncate(value, max) {
     if (value.length <= max)
         return value;
@@ -1686,7 +1692,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     const showThinkingLabel = Boolean(thinkingLevel)
         && thinkingLevel !== "off"
         && (isMiniMaxProvider || getAvailableThinkingLevels(agent.providerId, agent.apiModel).length > 2);
-    const welcomeBannerNode = showWelcome ? (_jsx(WelcomeBanner, { terminalColumns: terminalColumns, tips: buildTips(agent, safeRegistry), updateNotice: currentUpdateNotice, cwd: friendlyCwd(args.cwd), providerId: agent.providerId || safeRegistry.getDefault()?.id, modelLabel: agent.model ? displayModel(agent.model) : undefined, thinkingLabel: showThinkingLabel ? thinkingLevel : undefined })) : null;
+    const welcomeBannerNode = showWelcome ? (_jsx(WelcomeBanner, { terminalColumns: terminalColumns, tips: buildTips(agent, safeRegistry), updateNotice: currentUpdateNotice, cwd: friendlyCwd(args.cwd), sessionLabel: sessionBasename(currentSessionFile()), providerId: agent.providerId || safeRegistry.getDefault()?.id, modelLabel: agent.model ? displayModel(agent.model) : undefined, thinkingLabel: showThinkingLabel ? thinkingLevel : undefined })) : null;
     const commandPaletteItems = useMemo(() => buildCommandPaletteItems(safeSkillRegistry), [safeSkillRegistry]);
     const mcpReconnectItems = useMemo(() => buildMcpReconnectItems(mcpManager), [mcpManager]);
     // No fixed-height frame: settled rows flow into the terminal's native

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

@@ -44,6 +44,13 @@ export declare function parseMarkdownBlocks(text: string): MarkdownBlock[];
  */
 export declare function findLastBlockStart(text: string): number;
 export declare function parseMarkdownInlineSegments(text: string, style?: InlineStyle): MarkdownInlineSegment[];
+/**
+ * Distribute `available` inner cells across columns. Columns whose natural
+ * width already fits their fair share keep it untouched (numbers and dates
+ * never wrap); only the wider columns split the remainder proportionally and
+ * wrap their content.
+ */
+export declare function allocateColumnWidths(natural: number[], available: number): number[];
 /**
  * CJK-aware line wrap over styled inline segments.
  *

package/dist/tui-ink/markdown.js

@@ -406,32 +406,92 @@ function TableBlock({ headers, rows, maxWidth, }) {
     let widths = [...maxWidths];
     if (totalWidth > budget) {
         const available = Math.max(budget - separatorsWidth, colCount * 4);
-        const ratio = totalInnerWidth > 0 ? available / totalInnerWidth : 1;
-        widths = maxWidths.map((w) => Math.max(4, Math.floor(w * ratio)));
-        // The 4-cell floor can push the sum back above `available`; shave the
-        // overshoot off the widest columns so the row never exceeds the budget
-        // and gets hard-wrapped by the terminal.
-        let excess = widths.reduce((a, b) => a + b, 0) - available;
-        while (excess > 0) {
-            let widest = -1;
-            for (let i = 0; i < widths.length; i++) {
-                if (widths[i] > 4 && (widest === -1 || widths[i] > widths[widest]))
-                    widest = i;
-            }
-            if (widest === -1)
-                break;
-            widths[widest] -= 1;
-            excess -= 1;
-        }
+        widths = allocateColumnWidths(maxWidths, available);
     }
     const top = g.tl + widths.map((w) => g.h.repeat(w + 2)).join(g.tm) + g.tr;
     const mid = g.ml + widths.map((w) => g.h.repeat(w + 2)).join(g.mm) + g.mr;
     const bot = g.bl + widths.map((w) => g.h.repeat(w + 2)).join(g.bm) + g.br;
-    const renderRow = (cells, keyPrefix, isHeader = false) => (_jsxs(Text, { children: [`${g.v} `, cells.map((c, i) => (_jsxs(React.Fragment, { children: [renderTableCell(c, widths[i] ?? 4, isHeader, `${keyPrefix}-cell-${i}`), i < colCount - 1 ? ` ${g.v} ` : ` ${g.v}`] }, i)))] }, keyPrefix));
+    // A cell wider than its column wraps onto continuation lines (CJK-aware, so
+    // 、-joined user lists break cleanly); the row grows to its tallest cell.
+    const renderRow = (cells, keyPrefix, isHeader = false) => {
+        const wrapped = cells.map((c, i) => {
+            const width = widths[i] ?? 4;
+            let lines = wrapInlineSegments(parseMarkdownInlineSegments(c, { bold: isHeader }), width);
+            if (lines.length > MAX_TABLE_CELL_LINES) {
+                lines = lines.slice(0, MAX_TABLE_CELL_LINES);
+                const last = lines[MAX_TABLE_CELL_LINES - 1];
+                lines[MAX_TABLE_CELL_LINES - 1] = truncateInlineSegments([...last, { text: " …" }], width);
+            }
+            return lines;
+        });
+        const height = Math.max(1, ...wrapped.map((lines) => lines.length));
+        return (_jsx(Box, { flexDirection: "column", children: Array.from({ length: height }, (_, line) => (_jsxs(Text, { children: [`${g.v} `, wrapped.map((cellLines, i) => (_jsxs(React.Fragment, { children: [renderCellLine(cellLines[line] ?? [], widths[i] ?? 4, `${keyPrefix}-cell-${i}-${line}`), i < colCount - 1 ? ` ${g.v} ` : ` ${g.v}`] }, i)))] }, `${keyPrefix}-line-${line}`))) }, keyPrefix));
+    };
     return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { children: top }), renderRow(headers, "header", true), _jsx(Text, { children: mid }), rows.map((row, ri) => renderRow(row, `row-${ri}`)), _jsx(Text, { children: bot })] }));
 }
-function renderTableCell(cell, width, isHeader, keyPrefix) {
-    const segments = truncateInlineSegments(parseMarkdownInlineSegments(cell, { bold: isHeader }), width);
+/** Cap a pathological cell (huge blob of text) at this many wrapped lines. */
+const MAX_TABLE_CELL_LINES = 8;
+/**
+ * Distribute `available` inner cells across columns. Columns whose natural
+ * width already fits their fair share keep it untouched (numbers and dates
+ * never wrap); only the wider columns split the remainder proportionally and
+ * wrap their content.
+ */
+export function allocateColumnWidths(natural, available) {
+    const count = natural.length;
+    const widths = new Array(count).fill(0);
+    const fixed = new Array(count).fill(false);
+    let remaining = available;
+    let unfixed = count;
+    // Each fixed column frees slack that can fit further columns — iterate to a
+    // fixpoint. Terminates: natural sum exceeds `available` (only caller path),
+    // so at least one column always stays unfixed.
+    let changed = true;
+    while (changed && unfixed > 0) {
+        changed = false;
+        const fair = remaining / unfixed;
+        for (let i = 0; i < count; i++) {
+            if (fixed[i] || natural[i] > fair)
+                continue;
+            fixed[i] = true;
+            widths[i] = natural[i];
+            remaining -= natural[i];
+            unfixed -= 1;
+            changed = true;
+        }
+    }
+    if (unfixed > 0) {
+        const wideTotal = natural.reduce((sum, w, i) => sum + (fixed[i] ? 0 : w), 0);
+        let assigned = 0;
+        let lastWide = -1;
+        for (let i = 0; i < count; i++) {
+            if (fixed[i])
+                continue;
+            widths[i] = Math.max(4, Math.floor((remaining * natural[i]) / wideTotal));
+            assigned += widths[i];
+            lastWide = i;
+        }
+        // Flooring leftovers go to the last wide column instead of being wasted.
+        if (lastWide >= 0 && assigned < remaining)
+            widths[lastWide] += remaining - assigned;
+    }
+    // On a very narrow budget the 4-cell floor can overshoot; shave the widest
+    // columns so the row never exceeds `available` and hard-wraps.
+    let excess = widths.reduce((a, b) => a + b, 0) - available;
+    while (excess > 0) {
+        let widest = -1;
+        for (let i = 0; i < count; i++) {
+            if (widths[i] > 4 && (widest === -1 || widths[i] > widths[widest]))
+                widest = i;
+        }
+        if (widest === -1)
+            break;
+        widths[widest] -= 1;
+        excess -= 1;
+    }
+    return widths;
+}
+function renderCellLine(segments, width, keyPrefix) {
     const padding = " ".repeat(Math.max(0, width - inlineSegmentsWidth(segments)));
     return [
         ...segments.map((segment, index) => (_jsx(Text, { bold: segment.bold, italic: segment.italic, color: segment.code ? "#a78bfa" : undefined, children: segment.text }, `${keyPrefix}-${index}`))),

package/dist/tui-ink/message-list.js

@@ -139,7 +139,11 @@ const MessageItem = React.memo(function MessageItem({ message, terminalColumns,
         message.taskElapsedMs !== undefined;
     if (!hasVisibleAssistantContent)
         return null;
-    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [visibleReasoning && (showThinking || verboseTrace) && _jsx(ReasoningTraceBlock, { reasoning: visibleReasoning }), message.parts && message.parts.length > 0 ? (_jsx(MessageParts, { parts: message.parts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: undefined, showExpandHint: showExpandHint, nowTick: nowTick })) : (_jsxs(_Fragment, { children: [message.toolCalls && (_jsx(ToolsPart, { toolCalls: message.toolCalls, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: undefined, showExpandHint: showExpandHint, nowTick: nowTick })), visibleContent.trim() && _jsx(MarkdownContent, { content: visibleContent })] })), verboseTrace && message.toolCalls && message.toolCalls.length > 0 && (_jsx(TurnDigest, { toolCalls: message.toolCalls })), message.taskElapsedMs !== undefined && (_jsx(TaskDurationLine, { elapsedMs: message.taskElapsedMs }))] }));
+    return (_jsxs(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: [visibleReasoning && (showThinking || verboseTrace) && _jsx(ReasoningTraceBlock, { reasoning: visibleReasoning }), message.parts && message.parts.length > 0 ? (_jsx(MessageParts, { parts: message.parts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: undefined, showExpandHint: showExpandHint, nowTick: nowTick })) : (_jsxs(_Fragment, { children: [message.toolCalls && (_jsx(ToolsPart, { toolCalls: message.toolCalls, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: undefined, showExpandHint: showExpandHint, nowTick: nowTick })), visibleContent.trim() && (
+                    // Thread the real terminal width down (minus the row's paddingX
+                    // inset); without it, width-aware blocks like tables fall back to
+                    // a stale/default useTerminalSize and mis-budget their columns.
+                    _jsx(MarkdownContent, { content: visibleContent, maxWidth: Math.max(20, terminalColumns - 4) }))] })), verboseTrace && message.toolCalls && message.toolCalls.length > 0 && (_jsx(TurnDigest, { toolCalls: message.toolCalls })), message.taskElapsedMs !== undefined && (_jsx(TaskDurationLine, { elapsedMs: message.taskElapsedMs }))] }));
 });
 function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, showThinking, verboseTrace, pendingApproval, nowTick, }) {
     const deferredContent = React.useDeferredValue(content);

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

@@ -17,6 +17,11 @@ export interface Theme {
     success: string;
     background: string;
     accent: string;
+    /** Welcome banner border. */
+    bannerBorder: string;
+    /** Welcome banner logo/title gradient endpoints (top→bottom, left→right). */
+    bannerGradientFrom: string;
+    bannerGradientTo: string;
     border: string;
     borderActive: string;
     backgroundPanel: string;

package/dist/tui-ink/theme.js

@@ -16,6 +16,9 @@ export const darkTheme = {
     success: "green",
     background: "#0A0A0A",
     accent: "cyan",
+    bannerBorder: "#38bdf8",
+    bannerGradientFrom: "#67e8f9",
+    bannerGradientTo: "#a78bfa",
     border: "gray",
     borderActive: "cyan",
     backgroundPanel: "#141414",
@@ -62,6 +65,9 @@ export const lightTheme = {
     success: "#2F7D4A",
     background: "#FCFCFA",
     accent: "#8B4A00",
+    bannerBorder: "#356FD2",
+    bannerGradientFrom: "#0E7490",
+    bannerGradientTo: "#6D28D9",
     border: "#B9BDB8",
     borderActive: "#356FD2",
     backgroundPanel: "#F6F6F3",

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

@@ -6,6 +6,8 @@ interface WelcomeBannerProps {
     updateNotice?: string;
     /** Friendly working directory (~ collapsed). */
     cwd?: string;
+    /** Session identifier (session file basename). */
+    sessionLabel?: string;
     providerId?: string;
     modelLabel?: string;
     /** Active thinking level, rendered as part of the model unit (e.g. "xhigh"). */
@@ -16,6 +18,7 @@ interface WelcomeVisibilityInput {
     startedWithVisibleHistory: boolean;
 }
 export declare function shouldShowWelcomeBanner({ startedWithVisibleHistory, }: WelcomeVisibilityInput): boolean;
-export declare function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, providerId, modelLabel, thinkingLabel, }: WelcomeBannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function lerpColor(from: string, to: string, t: number): string;
+export declare function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, sessionLabel, providerId, modelLabel, thinkingLabel, }: WelcomeBannerProps): import("react/jsx-runtime").JSX.Element;
 export declare function formatModelLine({ providerId, modelLabel, thinkingLabel, tips, }: Pick<WelcomeBannerProps, "providerId" | "modelLabel" | "thinkingLabel" | "tips">): string;
 export {};

package/dist/tui-ink/welcome.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
 import { createRequire } from "node:module";
 import { useTheme } from "./theme.js";
@@ -18,7 +18,17 @@ export function shouldShowWelcomeBanner({ startedWithVisibleHistory, }) {
         return false;
     return true;
 }
-export function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, providerId, modelLabel, thinkingLabel, }) {
+export function lerpColor(from, to, t) {
+    const pa = [1, 3, 5].map((i) => parseInt(from.slice(i, i + 2), 16));
+    const pb = [1, 3, 5].map((i) => parseInt(to.slice(i, i + 2), 16));
+    const out = pa.map((v, i) => Math.round(v + ((pb[i] ?? v) - v) * t));
+    return `#${out.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+function GradientText({ text, from, to }) {
+    const chars = [...text];
+    return (_jsx(_Fragment, { children: chars.map((ch, i) => (_jsx(Text, { bold: true, color: lerpColor(from, to, chars.length <= 1 ? 0 : i / (chars.length - 1)), children: ch }, `ch-${i}`))) }));
+}
+export function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, sessionLabel, providerId, modelLabel, thinkingLabel, }) {
     const theme = useTheme();
     const effectiveWidth = Math.max(24, Math.min(terminalColumns - 2, 96));
     const modelLine = formatModelLine({
@@ -27,7 +37,16 @@ export function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, provid
         thinkingLabel,
         tips,
     });
-    return (_jsxs(Box, { width: effectiveWidth, flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexDirection: "column", marginRight: 2, flexShrink: 0, children: COMPACT_LOGO.map((line, rowIndex) => (_jsx(Text, { color: theme.warning, bold: true, children: line }, `logo-row-${rowIndex}`))) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.inputText, children: "Bubble" }), _jsxs(Text, { color: theme.muted, children: [" ", PACKAGE_VERSION] })] }), modelLine && (_jsx(Text, { color: theme.muted, children: modelLine })), cwd && (_jsx(Text, { color: theme.muted, children: cwd }))] })] }), updateNotice && (_jsx(Box, { children: _jsx(Text, { color: theme.accent, children: updateNotice }) }))] }));
+    const infoRows = [];
+    if (cwd)
+        infoRows.push({ label: "Directory:", value: cwd, color: theme.inputText });
+    if (sessionLabel)
+        infoRows.push({ label: "Session:", value: sessionLabel, color: theme.muted });
+    if (modelLine)
+        infoRows.push({ label: "Model:", value: modelLine, color: theme.traceCommand });
+    infoRows.push({ label: "Version:", value: PACKAGE_VERSION, color: theme.muted });
+    const labelWidth = Math.max(...infoRows.map((row) => row.label.length)) + 1;
+    return (_jsxs(Box, { width: effectiveWidth, flexDirection: "column", marginBottom: 1, borderStyle: "round", borderColor: theme.bannerBorder, paddingX: 2, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexDirection: "column", marginRight: 2, flexShrink: 0, children: COMPACT_LOGO.map((line, rowIndex) => (_jsx(Text, { bold: true, color: lerpColor(theme.bannerGradientFrom, theme.bannerGradientTo, COMPACT_LOGO.length <= 1 ? 0 : rowIndex / (COMPACT_LOGO.length - 1)), children: line }, `logo-row-${rowIndex}`))) }), _jsxs(Box, { flexDirection: "column", marginTop: 1, flexGrow: 1, flexShrink: 1, children: [_jsx(Box, { children: _jsx(GradientText, { text: "Welcome to Bubble!", from: theme.bannerGradientFrom, to: theme.bannerGradientTo }) }), _jsx(Text, { color: theme.muted, wrap: "wrap", children: "I am a cat and you can send /help for help information." })] })] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: infoRows.map((row) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: theme.dim, children: row.label.padEnd(labelWidth) }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { color: row.color, wrap: "wrap", children: row.value }) })] }, row.label))) }), updateNotice && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.accent, children: updateNotice }) }))] }));
 }
 export function formatModelLine({ providerId, modelLabel, thinkingLabel, tips, }) {
     const parts = [];

package/package.json

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