@bubblebrain-ai/bubble 0.0.12 → 0.0.13

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

@@ -59,7 +59,15 @@ function StreamingMessage({ content, reasoning, tools, parts, terminalColumns, v
     const visibleParts = deferredParts.length > 0
         ? deferredParts
         : fallbackStreamingParts(deferredContent, tools);
-    return (_jsxs(Box, { flexDirection: "column", children: [deferredReasoning && verboseTrace && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(ReasoningTraceBlock, { reasoning: deferredReasoning }) })), visibleParts.length > 0 && (_jsx(Box, { marginTop: 1, marginBottom: 1, flexDirection: "column", children: _jsx(MessageParts, { parts: visibleParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, showExpandHint: true, nowTick: nowTick, showActivity: true, streaming: true }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [deferredReasoning && verboseTrace && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(ReasoningTraceBlock, { reasoning: deferredReasoning }) })), visibleParts.length > 0 && (
+            // marginTop intentionally 0: this Box only mounts on the first non-empty
+            // streaming frame, so a marginTop=1 here would visibly insert a blank
+            // line under the user message right at that moment (the "spinner sits
+            // close, then content appears with a sudden gap, then spinner slides
+            // down" effect users perceive as flicker on the DOM xterm renderer).
+            // marginBottom=1 stays so streamed text doesn't collide with the
+            // WaitingIndicator rendered below.
+            _jsx(Box, { marginTop: 0, marginBottom: 1, flexDirection: "column", children: _jsx(MessageParts, { parts: visibleParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, showExpandHint: true, nowTick: nowTick, showActivity: true, streaming: true }) }))] }));
 }
 function MessageParts({ parts, terminalColumns, verboseTrace, pendingApproval, showExpandHint, nowTick, showActivity = false, streaming = false, }) {
     const lastToolsPartIndex = findLastToolsPartIndex(parts);

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

@@ -49,15 +49,9 @@ export interface Theme {
 }
 export declare const darkTheme: Theme;
 /**
- * Light palette. Two ground rules drove the color choices:
- *   1. Named ANSI colors that render OK on both backgrounds (red/green/blue)
- *      are kept by name so the user's terminal palette overrides remain
- *      effective.
- *   2. Specific hex values are used wherever the dark palette assumed a dark
- *      background (notably accent/code/trace colors and message bubbles).
- *      Each hex was picked to clear WCAG AA contrast (4.5:1) against a near-
- *      white background (#fafafa) or, when applicable, against the explicit
- *      surface color in the same palette (e.g. diffAddFg vs diffAdd).
+ * Light palette aligned with the restored OpenTUI runtime: paper-neutral
+ * surfaces, blue focus/user rails, warm command accent, and semantic tool
+ * colors tuned for readable contrast on a light terminal background.
  */
 export declare const lightTheme: Theme;
 export declare const ThemeProvider: import("react").Provider<Theme>;

package/dist/tui-ink/theme.js

@@ -47,53 +47,47 @@ export const darkTheme = {
     diffRemoveFg: "#F48771",
 };
 /**
- * Light palette. Two ground rules drove the color choices:
- *   1. Named ANSI colors that render OK on both backgrounds (red/green/blue)
- *      are kept by name so the user's terminal palette overrides remain
- *      effective.
- *   2. Specific hex values are used wherever the dark palette assumed a dark
- *      background (notably accent/code/trace colors and message bubbles).
- *      Each hex was picked to clear WCAG AA contrast (4.5:1) against a near-
- *      white background (#fafafa) or, when applicable, against the explicit
- *      surface color in the same palette (e.g. diffAddFg vs diffAdd).
+ * Light palette aligned with the restored OpenTUI runtime: paper-neutral
+ * surfaces, blue focus/user rails, warm command accent, and semantic tool
+ * colors tuned for readable contrast on a light terminal background.
  */
 export const lightTheme = {
-    user: "green",
-    agent: "blue",
-    error: "red",
-    warning: "#9A6500", // ANSI yellow is invisible on white — go to dark amber.
-    success: "green",
-    accent: "#0E5A85", // dark teal — replaces "cyan" which washes out on white.
-    border: "gray",
-    borderActive: "#0E5A85",
-    inputBorder: "#6B5FB8",
-    inputBorderDisabled: "#c5c3d0",
-    inputBg: "#eeeef6",
-    inputBgDisabled: "#e2e2ec",
-    inputText: "#1c1c24",
-    inputPlaceholder: "#7a7886",
-    muted: "gray",
-    dim: "gray",
-    thinking: "magenta",
-    thinkingDim: "gray",
-    toolName: "#0E5A85",
-    toolResult: "gray",
-    toolError: "red",
-    toolPending: "#9A6500",
-    code: "#9A6500",
-    traceAction: "#B85A20",
-    traceCount: "#5a5a5a",
-    traceDetail: "gray",
-    traceCommand: "#1A5FA0",
-    tracePending: "#9A6500",
-    userMessageBorder: "#6B5FB8",
-    userMessageBg: "#e8e6f4",
-    userMessageText: "#1c1c24",
-    userRail: "#6B5FB8",
-    diffAdd: "#d4f4d4",
-    diffRemove: "#f4d4d4",
-    diffAddFg: "#1c1c24",
-    diffRemoveFg: "#1c1c24",
+    user: "#356FD2",
+    agent: "#171717",
+    error: "#B62633",
+    warning: "#8B4A00",
+    success: "#2F7D4A",
+    accent: "#8B4A00",
+    border: "#B9BDB8",
+    borderActive: "#356FD2",
+    inputBorder: "#356FD2",
+    inputBorderDisabled: "#D7DAD4",
+    inputBg: "#F1F3F0",
+    inputBgDisabled: "#E6E8E3",
+    inputText: "#171717",
+    inputPlaceholder: "#6F7377",
+    muted: "#6F7377",
+    dim: "#8B9094",
+    thinking: "#5F666D",
+    thinkingDim: "#8B9094",
+    toolName: "#495057",
+    toolResult: "#171717",
+    toolError: "#B62633",
+    toolPending: "#8B4A00",
+    code: "#2F7D4A",
+    traceAction: "#8B4A00",
+    traceCount: "#6F7377",
+    traceDetail: "#8B9094",
+    traceCommand: "#257E8A",
+    tracePending: "#8B4A00",
+    userMessageBorder: "#356FD2",
+    userMessageBg: "#F1F3F0",
+    userMessageText: "#234B93",
+    userRail: "#356FD2",
+    diffAdd: "#D7E8D8",
+    diffRemove: "#F7DADC",
+    diffAddFg: "#173D2D",
+    diffRemoveFg: "#5D1922",
 };
 const ThemeContext = createContext(darkTheme);
 export const ThemeProvider = ThemeContext.Provider;

package/dist/tui-ink/welcome.js

@@ -3,80 +3,10 @@ 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";
 const require = createRequire(import.meta.url);
 const PACKAGE_VERSION = readPackageVersion();
-const BUBBLE_LOGO_LETTERS = [
-    [
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-    ],
-    [
-        "██   ██",
-        "██   ██",
-        "██   ██",
-        "██   ██",
-        "██   ██",
-        "██   ██",
-        " █████ ",
-    ],
-    [
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-    ],
-    [
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-        "██   ██",
-        "██   ██",
-        "██████ ",
-    ],
-    [
-        "██     ",
-        "██     ",
-        "██     ",
-        "██     ",
-        "██     ",
-        "██     ",
-        "███████",
-    ],
-    [
-        "███████",
-        "██     ",
-        "██     ",
-        "██████ ",
-        "██     ",
-        "██     ",
-        "███████",
-    ],
-];
-/**
- * Derive a 6-step logo gradient from the active theme tokens so the banner
- * stays readable on both dark and light backgrounds.
- */
-function logoColors(theme) {
-    return [
-        theme.userMessageText,
-        theme.userMessageText,
-        theme.inputBorder,
-        theme.inputBorder,
-        theme.traceCommand,
-        theme.traceCommand,
-    ];
-}
-const COMPACT_LOGO = ["B", "U", "B", "B", "L", "E"];
-const WIDE_LOGO_MIN_WIDTH = 52;
+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.
@@ -96,18 +26,32 @@ export function WelcomeBanner({ terminalColumns, modelLabel, cwd, tips, skillsCo
         : "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_LOGO_LETTERS[0].map((_, rowIndex) => (_jsx(LogoRow, { rowIndex: rowIndex }, `logo-row-${rowIndex}`)))
+                    ? 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 })] })] }));
 }
-function LogoRow({ rowIndex }) {
+function LogoRow({ line }) {
     const theme = useTheme();
-    const colors = logoColors(theme);
-    return (_jsx(Box, { children: BUBBLE_LOGO_LETTERS.map((letter, index) => (_jsxs(React.Fragment, { children: [_jsx(Text, { bold: true, color: colors[index], children: letter[rowIndex] }), index < BUBBLE_LOGO_LETTERS.length - 1 && _jsx(Text, { children: " " })] }, `${index}-${rowIndex}`))) }));
+    if (!line.segments) {
+        return _jsx(Text, { bold: true, color: logoColor(theme, line.tone ?? "caption"), children: line.text ?? "" });
+    }
+    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 colors = logoColors(theme);
-    return (_jsx(Box, { children: COMPACT_LOGO.map((letter, index) => (_jsx(Text, { bold: true, color: colors[index], children: letter }, `${letter}-${index}`))) }));
+    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;
+        case "ink": return theme.userMessageText;
+        case "stone": return theme.muted;
+        case "soft": return theme.dim;
+        case "caption": return theme.muted;
+    }
 }
 function StatusItem({ label, count, total, ok, }) {
     const theme = useTheme();

package/dist/tui-opentui/app.d.ts

@@ -0,0 +1,54 @@
+/** @jsxImportSource @opentui/react */
+import React from "react";
+import { type Agent } from "../agent.js";
+import type { CliArgs } from "../cli.js";
+import type { SessionManager } from "../session.js";
+import type { PlanDecision, Provider } from "../types.js";
+import { type ResolvedTheme, type ThemeMode } from "./theme.js";
+import { ProviderRegistry } from "../provider-registry.js";
+import { SkillRegistry } from "../skills/registry.js";
+import type { ApprovalDecision, ApprovalRequest } from "../approval/types.js";
+import type { BashAllowlist } from "../approval/session-cache.js";
+import type { SettingsManager } from "../permissions/settings.js";
+import type { McpManager } from "../mcp/manager.js";
+import type { LspService } from "../lsp/index.js";
+import type { QuestionController } from "../question/index.js";
+import type { MemoryScope } from "../memory/index.js";
+export interface PlanHandlerRef {
+    current?: (plan: string) => Promise<PlanDecision>;
+}
+export interface ApprovalHandlerRef {
+    current?: (req: ApprovalRequest) => Promise<ApprovalDecision>;
+}
+interface AppProps {
+    agent: Agent;
+    args: CliArgs;
+    sessionManager?: SessionManager;
+    createProvider?: (providerId: string, apiKey: string, baseURL: string) => Provider;
+    registry?: ProviderRegistry;
+    skillRegistry?: SkillRegistry;
+    planHandlerRef?: PlanHandlerRef;
+    approvalHandlerRef?: ApprovalHandlerRef;
+    questionController?: QuestionController;
+    bashAllowlist?: BashAllowlist;
+    settingsManager?: SettingsManager;
+    lspService?: LspService;
+    mcpManager?: McpManager;
+    themeMode?: ThemeMode;
+    themeOverrides?: Record<string, string>;
+    detectedTheme?: ResolvedTheme;
+    onThemeModeChange?: (mode: ThemeMode) => void;
+    flushMemory?: () => Promise<void>;
+    runMemoryCompaction?: () => Promise<string>;
+    runMemorySummary?: (scope?: MemoryScope) => Promise<string>;
+    runMemoryRefresh?: (scope?: MemoryScope) => Promise<string>;
+    /** Whether the bypassPermissions mode is reachable via Shift+Tab cycling. */
+    bypassEnabled?: boolean;
+    onExit?: (summary: ExitSummary) => void;
+}
+export interface ExitSummary {
+    /** Wall-clock duration of the session, in milliseconds. */
+    wallMs: number;
+}
+export declare function App({ agent, args, sessionManager, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, themeMode: initialThemeMode, themeOverrides, detectedTheme, onThemeModeChange, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, bypassEnabled, onExit }: AppProps): React.ReactNode;
+export {};