@bubblebrain-ai/bubble 0.0.12 → 0.0.14

package/dist/tui-ink/app.js

@@ -180,9 +180,40 @@ function withMessageKey(message) {
     const prefix = message.role === "user" ? "user" : message.role === "error" ? "err" : "asst";
     return { ...message, key: nextDisplayMessageKey(prefix) };
 }
-const STREAMING_STATIC_FLUSH_MIN_CHARS = 5000;
-const STREAMING_STATIC_FLUSH_TARGET_CHARS = 3600;
-const STREAMING_STATIC_FLUSH_MIN_TAIL = 700;
+// Keep the live (non-Static) region small so non-GPU terminals (xterm.js DOM
+// renderer, ssh into a basic terminal, tmux without GPU) don't flicker when
+// Ink re-reconciles the streaming block on every token. Flushing earlier and
+// in smaller chunks shifts most of the answer into terminal scrollback, where
+// it's a one-time write that doesn't get re-rendered.
+const STREAMING_STATIC_FLUSH_MIN_CHARS = 600;
+const STREAMING_STATIC_FLUSH_TARGET_CHARS = 400;
+const STREAMING_STATIC_FLUSH_MIN_TAIL = 120;
+/**
+ * True iff `prefix` ends inside an open ```/~~~ fenced code block. Splitting
+ * the streaming buffer at such a point would let the flushed half render
+ * without its closing fence — `MarkdownContent` would then treat the body as
+ * plain prose and the trailing half would render as an isolated code block
+ * with no opener. Fence delimiters of different families don't close each
+ * other (a `~~~` inside a ``` block is just text). We use a permissive
+ * "line starts with three or more of the same char" rule, ignoring the info
+ * string — that's enough to spot when we're mid-block.
+ */
+function endsInsideUnclosedCodeFence(prefix) {
+    let openMarker = null;
+    for (const rawLine of prefix.split("\n")) {
+        const line = rawLine.replace(/^ {0,3}/, "");
+        if (openMarker === null) {
+            if (line.startsWith("```"))
+                openMarker = "`";
+            else if (line.startsWith("~~~"))
+                openMarker = "~";
+        }
+        else if (line.startsWith(openMarker.repeat(3))) {
+            openMarker = null;
+        }
+    }
+    return openMarker !== null;
+}
 function findStreamingStaticFlushIndex(content) {
     if (content.length < STREAMING_STATIC_FLUSH_MIN_CHARS)
         return -1;
@@ -192,12 +223,20 @@ function findStreamingStaticFlushIndex(content) {
     const search = content.slice(0, upper);
     const paragraphBreak = search.lastIndexOf("\n\n");
     if (paragraphBreak >= STREAMING_STATIC_FLUSH_TARGET_CHARS / 2) {
-        return paragraphBreak + 2;
+        const splitIndex = paragraphBreak + 2;
+        if (!endsInsideUnclosedCodeFence(content.slice(0, splitIndex))) {
+            return splitIndex;
+        }
     }
     const lineBreak = search.lastIndexOf("\n");
     if (lineBreak >= STREAMING_STATIC_FLUSH_TARGET_CHARS / 2) {
-        return lineBreak + 1;
+        const splitIndex = lineBreak + 1;
+        if (!endsInsideUnclosedCodeFence(content.slice(0, splitIndex))) {
+            return splitIndex;
+        }
     }
+    // Inside an open code fence: hold off flushing until the closing fence
+    // arrives. The live region grows a bit, but Markdown rendering stays correct.
     return -1;
 }
 function cloneDisplayPart(part) {
@@ -957,10 +996,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             catch (err) {
                 commitAssistantMessage();
                 if (err instanceof AgentAbortError || err?.name === "AbortError") {
-                    updateDisplayMessages((prev) => [
-                        ...prev,
-                        withMessageKey({ role: "assistant", content: "Cancelled." }),
-                    ]);
+                    updateDisplayMessages(() => reconstructDisplayMessages(agent.messages));
                 }
                 else {
                     updateDisplayMessages((prev) => [

package/dist/tui-ink/approval/approval-dialog.js

@@ -53,7 +53,7 @@ function buildOptions(request) {
             },
         ];
     }
-    // edit / write
+    // edit / write / patch
     return [
         { id: "yes", label: "Yes", allowAmend: true, amendPlaceholder: "and tell Claude what to do next" },
         {
@@ -69,6 +69,8 @@ function dialogTitle(req) {
     switch (req.type) {
         case "edit":
             return "Edit file";
+        case "patch":
+            return "Apply patch";
         case "write":
             return req.fileExists ? "Overwrite file" : "Create file";
         case "bash":
@@ -81,6 +83,8 @@ function dialogQuestion(req) {
     switch (req.type) {
         case "edit":
             return `Do you want to make this edit to ${basename(req.path)}?`;
+        case "patch":
+            return `Do you want to apply this patch to ${req.paths.length} file${req.paths.length === 1 ? "" : "s"}?`;
         case "write":
             return `Do you want to ${req.fileExists ? "overwrite" : "create"} ${basename(req.path)}?`;
         case "bash":
@@ -99,6 +103,8 @@ function RequestPreview({ request }) {
             return _jsx(BashPreview, { command: request.command, cwd: request.cwd });
         case "edit":
             return _jsx(DiffView, { diff: request.diff });
+        case "patch":
+            return _jsx(DiffView, { diff: request.diff });
         case "write":
             return _jsx(WritePreview, { path: request.path, content: request.content });
     }

package/dist/tui-ink/display-history.d.ts

@@ -33,6 +33,7 @@ export interface DisplayToolCall {
      */
     rawArguments?: string;
     result?: string;
+    resultCollapsed?: boolean;
     isError?: boolean;
     metadata?: ToolResultMetadata;
     /** Set when the tool_start event was received. Used to render elapsed time. */

package/dist/tui-ink/display-history.js

@@ -46,7 +46,6 @@ export function toolCallsFromParts(parts) {
 const FULL_DETAIL_WINDOW = 24;
 const MAX_OLD_CONTENT_CHARS = 1200;
 const MAX_OLD_REASONING_CHARS = 600;
-const MAX_OLD_TOOL_RESULT_CHARS = 800;
 export function compactDisplayMessages(messages) {
     if (messages.length === 0) {
         return messages;
@@ -97,11 +96,13 @@ function compactDisplayPart(part) {
     };
 }
 function compactToolCall(toolCall) {
+    if (toolCall.result === undefined) {
+        return toolCall;
+    }
     return {
         ...toolCall,
-        result: toolCall.result
-            ? truncateText(toolCall.result, MAX_OLD_TOOL_RESULT_CHARS)
-            : toolCall.result,
+        result: undefined,
+        resultCollapsed: true,
     };
 }
 const PREVIOUS_SUMMARY_PREFIX = /^Previous conversation summary:\s*\n?([\s\S]*)$/;

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);
@@ -97,8 +105,8 @@ function ToolsPart({ toolCalls, terminalColumns, verboseTrace, pendingApproval,
     }
     const lastIdx = toolCalls.length - 1;
     return (_jsx(Box, { flexDirection: "column", children: toolCalls.map((tc, idx) => {
-            const isWaitingApproval = tc.result === undefined && !!pendingApproval && approvalMatchesTool(pendingApproval, tc);
-            return (_jsx(ToolCallDisplay, { toolCall: tc, isStreaming: tc.result === undefined, verbose: verboseTrace, terminalColumns: terminalColumns, showExpandHint: showExpandHint && idx === lastIdx, waitingApproval: isWaitingApproval, compactTop: idx === 0 && compactTop, nowTick: nowTick }, tc.id));
+            const isWaitingApproval = isToolPending(tc) && !!pendingApproval && approvalMatchesTool(pendingApproval, tc);
+            return (_jsx(ToolCallDisplay, { toolCall: tc, isStreaming: isToolPending(tc), verbose: verboseTrace, terminalColumns: terminalColumns, showExpandHint: showExpandHint && idx === lastIdx, waitingApproval: isWaitingApproval, compactTop: idx === 0 && compactTop, nowTick: nowTick }, tc.id));
         }) }));
 }
 function fallbackStreamingParts(content, tools) {
@@ -184,7 +192,7 @@ function findActiveTraceGroup(groups, pendingApproval) {
     return undefined;
 }
 function isTraceGroupWaitingForApproval(group, pendingApproval) {
-    return !!pendingApproval && group.raw.some((tool) => tool.result === undefined && approvalMatchesTool(pendingApproval, tool));
+    return !!pendingApproval && group.raw.some((tool) => isToolPending(tool) && approvalMatchesTool(pendingApproval, tool));
 }
 function approvalMatchesTool(hint, tc) {
     if (hint.toolName !== tc.name)
@@ -194,6 +202,9 @@ function approvalMatchesTool(hint, tc) {
     }
     return !hint.path || hint.path === tc.args.path;
 }
+function isToolPending(tool) {
+    return tool.result === undefined && tool.resultCollapsed !== true;
+}
 function ReasoningTraceBlock({ reasoning }) {
     const theme = useTheme();
     const lines = React.useMemo(() => reasoning.split("\n").filter((l) => l.trim() !== ""), [reasoning]);
@@ -272,6 +283,8 @@ function getToolHeader(toolCall) {
     }
 }
 function summarizeToolResult(tc) {
+    if (tc.resultCollapsed)
+        return tc.isError ? "error output collapsed" : "result collapsed";
     if (tc.result === undefined)
         return "pending";
     const raw = tc.result.replace(/\r\n/g, "\n");
@@ -433,7 +446,7 @@ function ToolCallDisplay({ toolCall, isStreaming, verbose, terminalColumns, show
         summary = "⏸ waiting for approval";
         summaryColor = theme.warning;
     }
-    else if (toolCall.result === undefined && toolCall.startedAt) {
+    else if (isToolPending(toolCall) && toolCall.startedAt) {
         void nowTick;
         summary = "running";
         summaryColor = theme.toolPending;
@@ -446,18 +459,19 @@ function ToolCallDisplay({ toolCall, isStreaming, verbose, terminalColumns, show
             summaryColor = theme.success;
     }
     const editDetails = getEditDiffDetails(toolCall);
-    const isEditDiff = editDetails !== null && toolCall.result !== undefined;
+    const isEditDiff = editDetails !== null && toolCall.result !== undefined && !toolCall.resultCollapsed;
+    const showSummary = !toolCall.resultCollapsed || waitingApproval;
     // Only show the file preview once the tool actually executed. During the
     // streaming-args phase, args.content is incomplete and re-rendering the
     // entire body per delta both looks chaotic and breaks on partial escapes.
-    const isWritePreview = toolCall.name === "write" && !toolCall.isError && toolCall.result !== undefined;
-    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: bulletColor, children: [glyph, " "] }), _jsx(Text, { bold: true, color: theme.toolName, children: name }), header && _jsxs(Text, { color: theme.muted, children: ["(", header, ")"] })] }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: summaryColor, children: ["\u23BF  ", summary] }) }), toolCall.isError && toolCall.result && (_jsx(Box, { marginLeft: 4, flexDirection: "column", children: toolCall.result.replace(/\r\n/g, "\n").split("\n").slice(0, 6).map((line, i) => (_jsx(Text, { color: theme.error, children: line }, i))) })), isEditDiff && (_jsx(DiffBlock, { diff: editDetails.diff, terminalColumns: terminalColumns, maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint })), isWritePreview && (_jsx(WritePreview, { content: String(toolCall.args.content || ""), maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint })), !toolCall.isError && !isEditDiff && !isWritePreview && highlighted && (_jsx(OutputPreview, { text: highlighted, maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint }))] }));
+    const isWritePreview = toolCall.name === "write" && !toolCall.isError && toolCall.result !== undefined && !toolCall.resultCollapsed;
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: bulletColor, children: [glyph, " "] }), _jsx(Text, { bold: true, color: theme.toolName, children: name }), header && _jsxs(Text, { color: theme.muted, children: ["(", header, ")"] })] }), showSummary && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: summaryColor, children: ["\u23BF  ", summary] }) })), toolCall.isError && toolCall.result && (_jsx(Box, { marginLeft: 4, flexDirection: "column", children: toolCall.result.replace(/\r\n/g, "\n").split("\n").slice(0, 6).map((line, i) => (_jsx(Text, { color: theme.error, children: line }, i))) })), isEditDiff && (_jsx(DiffBlock, { diff: editDetails.diff, terminalColumns: terminalColumns, maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint })), isWritePreview && (_jsx(WritePreview, { content: String(toolCall.args.content || ""), maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint })), !toolCall.isError && !isEditDiff && !isWritePreview && highlighted && (_jsx(OutputPreview, { text: highlighted, maxLines: maxLines, verbose: verbose, showExpandHint: showExpandHint }))] }));
 }
 function SubagentToolDisplay({ toolCall, verbose, terminalColumns, compactTop, }) {
     const theme = useTheme();
     const subagents = subagentsFrom(toolCall);
     const hasError = toolCall.isError || subagents.some((subagent) => (subagent.status === "failed" || subagent.status === "blocked" || subagent.status === "cancelled"));
-    const bulletColor = hasError ? theme.error : toolCall.result === undefined ? theme.toolPending : theme.user;
+    const bulletColor = hasError ? theme.error : isToolPending(toolCall) ? theme.toolPending : theme.user;
     const detailWidth = Math.max(24, terminalColumns - 10);
     const rows = verbose ? sortSubagents(subagents) : sortSubagents(subagents).slice(0, 4);
     const omitted = Math.max(0, subagents.length - rows.length);

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/trace-groups.js

@@ -323,7 +323,7 @@ function isFailedSubagent(subagent) {
     return subagent.status === "failed" || subagent.status === "blocked" || subagent.status === "cancelled";
 }
 function isToolPending(tool) {
-    return tool.result === undefined;
+    return tool.result === undefined && tool.resultCollapsed !== true;
 }
 function isDirectoryLikeGlob(pattern) {
     const normalized = pattern.trim();

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 {};