@bubblebrain-ai/bubble 0.0.33 → 0.0.35

package/dist/tui-ink/feishu-setup-picker.js

@@ -234,7 +234,7 @@ function renderBody(stage, theme) {
         case "done":
             return (_jsx(Box, { flexDirection: "column", children: stage.summary.split("\n").map((line, i) => (_jsx(Text, { children: line }, i))) }));
         case "error":
-            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "red", children: ["\u274C ", stage.message] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "\u6309 Enter \u5173\u95ED\u3002\u53EF\u4EE5\u7A0D\u540E\u518D /feishu setup \u91CD\u8BD5\u3002" }) })] }));
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.error, children: ["\u274C ", stage.message] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.muted, children: "\u6309 Enter \u5173\u95ED\u3002\u53EF\u4EE5\u7A0D\u540E\u518D /feishu setup \u91CD\u8BD5\u3002" }) })] }));
     }
 }
 function BindingForm({ stage, theme }) {
@@ -258,8 +258,8 @@ function BindingForm({ stage, theme }) {
                 const isActive = stage.field === field;
                 const isDone = !isActive && value && fieldOrderIndex(stage.field) > fieldOrderIndex(field);
                 const marker = isActive ? "› " : isDone ? "✓ " : "  ";
-                return (_jsxs(Box, { flexDirection: "column", marginBottom: isActive ? 1 : 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? theme.accent : isDone ? "green" : theme.muted, children: [marker, meta.label, ":"] }), _jsx(Box, { marginLeft: 1, children: _jsxs(Text, { children: [value, isActive ? "▌" : ""] }) })] }), isActive && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: theme.muted, children: meta.hint }) }))] }, field));
-            }), stage.error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: stage.error }) }))] }));
+                return (_jsxs(Box, { flexDirection: "column", marginBottom: isActive ? 1 : 0, children: [_jsxs(Box, { children: [_jsxs(Text, { color: isActive ? theme.accent : isDone ? theme.success : theme.muted, children: [marker, meta.label, ":"] }), _jsx(Box, { marginLeft: 1, children: _jsxs(Text, { children: [value, isActive ? "▌" : ""] }) })] }), isActive && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: theme.muted, children: meta.hint }) }))] }, field));
+            }), stage.error && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.error, children: stage.error }) }))] }));
 }
 function fieldOrderIndex(field) {
     return field === "chatId" ? 0 : field === "cwd" ? 1 : 2;

package/dist/tui-ink/input-box.d.ts

@@ -53,8 +53,6 @@ export declare function isCtrlLetterInput(input: string, key: {
 export declare function isCtrlCInput(input: string, key: {
     ctrl?: boolean;
 }): boolean;
-export declare function shouldUseLineComposerFrame(_background: string): boolean;
-export declare function composerSurfaceBackground(lineFrame: boolean, background: string, inputBg: string): string;
 export declare function shouldUseHardwareComposerCursor(env?: Record<string, string | undefined>): boolean;
 export declare function composerVerticalArrowDirection(key: {
     upArrow?: boolean;
@@ -63,12 +61,9 @@ export declare function composerVerticalArrowDirection(key: {
 }): "up" | "down" | undefined;
 export declare function resolveSoftwareCursorCellStyle(input: {
     visible: boolean;
-    cursorBackground: string;
-    cursorForeground: string;
     textColor: string;
-    rowBackground?: string;
 }): {
-    backgroundColor?: string;
+    inverse: boolean;
     color: string;
 };
 /**

package/dist/tui-ink/input-box.js

@@ -14,7 +14,6 @@ import { submitPayloadFingerprint } from "./submit-dedupe.js";
 export { createPastedContentMarker, expandPastedContentMarkers, shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
 import { createPastedContentMarker, expandPastedContentMarkers, shouldCollapsePastedContent, } from "../tui/paste-placeholder.js";
 import { imageDisplayLabel, stripInlineImageLabels } from "../tui/image-display.js";
-const MIN_VISIBLE_LINES = 3;
 const MAX_VISIBLE_LINES = 6;
 const PADDING_X = 1;
 const PROMPT = " > ";
@@ -47,12 +46,6 @@ export function isCtrlLetterInput(input, key, letter) {
 export function isCtrlCInput(input, key) {
     return isCtrlLetterInput(input, key, "c");
 }
-export function shouldUseLineComposerFrame(_background) {
-    return true;
-}
-export function composerSurfaceBackground(lineFrame, background, inputBg) {
-    return lineFrame ? background : inputBg;
-}
 export function shouldUseHardwareComposerCursor(env = process.env) {
     return env.BUBBLE_HARDWARE_CURSOR === "1";
 }
@@ -64,16 +57,10 @@ export function composerVerticalArrowDirection(key) {
     return undefined;
 }
 export function resolveSoftwareCursorCellStyle(input) {
-    if (input.visible) {
-        return {
-            backgroundColor: input.cursorBackground,
-            color: input.cursorForeground,
-        };
-    }
-    return {
-        backgroundColor: input.rowBackground,
-        color: input.textColor,
-    };
+    // Inverse video swaps the cell's real foreground/background at the terminal
+    // level, so the cursor block stays visible on any terminal palette without
+    // guessing a contrasting pair.
+    return { inverse: input.visible, color: input.textColor };
 }
 /**
  * Split a composer line around the cursor so the cell under it can render as
@@ -995,8 +982,7 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
     const classifyVerticalArrow = (direction) => {
         performVerticalArrowRef.current(direction);
     };
-    const lineFrame = shouldUseLineComposerFrame(theme.background);
-    const minVisibleLines = lineFrame ? 1 : MIN_VISIBLE_LINES;
+    const minVisibleLines = 1;
     const totalLines = Math.max(visualLines.length, 1);
     const visibleLines = Math.min(Math.max(totalLines, minVisibleLines), MAX_VISIBLE_LINES);
     let scrollOffset = 0;
@@ -1130,25 +1116,18 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
     });
     // Reference cursorTick so the effect re-runs on the forced render pass.
     void cursorTick;
-    const inputBg = disabled ? theme.inputBgDisabled : theme.inputBg;
-    const composerBg = composerSurfaceBackground(lineFrame, theme.background, inputBg);
-    const rowBg = lineFrame ? undefined : inputBg;
-    const cursorFg = lineFrame ? theme.background : inputBg;
     const cursorCellStyle = resolveSoftwareCursorCellStyle({
         visible: softwareCursorVisible,
-        cursorBackground: theme.inputText,
-        cursorForeground: cursorFg,
         textColor: theme.inputText,
-        rowBackground: rowBg,
     });
     const moreBelow = totalLines - scrollOffset - visibleLines;
     const filledLine = (value) => {
         const visibleWidth = visualWidth(value);
         return value + " ".repeat(Math.max(0, contentWidth - visibleWidth));
     };
-    return (_jsxs(Box, { flexDirection: "column", width: width, backgroundColor: theme.background, children: [lineFrame && (_jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) })), _jsxs(Box, { flexDirection: "column", paddingX: PADDING_X, width: width, backgroundColor: composerBg, children: [hasMoreAbove && (_jsx(Text, { backgroundColor: rowBg, color: theme.muted, dimColor: true, children: filledLine(` ↑ ${scrollOffset} more`) })), displayedLines.map((row) => {
+    return (_jsxs(Box, { flexDirection: "column", width: width, backgroundColor: theme.background, children: [_jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) }), _jsxs(Box, { flexDirection: "column", paddingX: PADDING_X, width: width, backgroundColor: theme.background, children: [hasMoreAbove && (_jsx(Text, { color: theme.muted, dimColor: true, children: filledLine(` ↑ ${scrollOffset} more`) })), displayedLines.map((row) => {
                         if (row.kind === "pad") {
-                            return (_jsx(Text, { backgroundColor: rowBg, children: " ".repeat(contentWidth) }, row.key));
+                            return (_jsx(Text, { children: " ".repeat(contentWidth) }, row.key));
                         }
                         const { text: line, visualIdx } = row;
                         const visualLine = visualLines[visualIdx];
@@ -1167,17 +1146,17 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
                         });
                         const renderedLine = renderedSegments.map((segment) => segment.text).join("");
                         const fill = " ".repeat(Math.max(0, lineWidth - visualWidth(renderedLine)));
-                        return (_jsxs(Box, { height: 1, overflow: "hidden", backgroundColor: composerBg, ref: isCursorLine
+                        return (_jsxs(Box, { height: 1, overflow: "hidden", backgroundColor: theme.background, ref: isCursorLine
                                 ? (el) => {
                                     cursorLineRef.current = el;
                                 }
-                                : undefined, children: [_jsx(Text, { backgroundColor: rowBg, color: isFirst ? theme.accent : theme.inputText, children: prompt }), renderedSegments.map((segment, index) => {
+                                : undefined, children: [_jsx(Text, { color: isFirst ? theme.accent : theme.inputText, children: prompt }), renderedSegments.map((segment, index) => {
                                     if (segment.kind === "cursor") {
-                                        return (_jsx(Text, { backgroundColor: cursorCellStyle.backgroundColor, color: cursorCellStyle.color, children: segment.text }, index));
+                                        return (_jsx(Text, { inverse: cursorCellStyle.inverse, color: cursorCellStyle.color, children: segment.text }, index));
                                     }
-                                    return (_jsx(Text, { backgroundColor: rowBg, color: segment.kind === "command" ? theme.accent : theme.inputText, bold: segment.kind === "command", children: segment.text }, index));
-                                }), _jsx(Text, { backgroundColor: rowBg, children: fill })] }, visualIdx));
-                    }), hasMoreBelow && (_jsx(Text, { backgroundColor: rowBg, color: theme.muted, dimColor: true, children: filledLine(` ↓ ${moreBelow} more`) }))] }), lineFrame && (_jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) })), showSuggestions && mode === "slash" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 4, children: [slashSuggestions
+                                    return (_jsx(Text, { color: segment.kind === "command" ? theme.accent : theme.inputText, bold: segment.kind === "command", children: segment.text }, index));
+                                }), _jsx(Text, { children: fill })] }, visualIdx));
+                    }), hasMoreBelow && (_jsx(Text, { color: theme.muted, dimColor: true, children: filledLine(` ↓ ${moreBelow} more`) }))] }), _jsx(Box, { paddingX: PADDING_X, children: _jsx(Text, { color: theme.border, children: "─".repeat(contentWidth) }) }), showSuggestions && mode === "slash" && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 4, children: [slashSuggestions
                         .slice(suggestionOffset, suggestionOffset + MAX_VISIBLE_SUGGESTIONS)
                         .map((cmd, visibleIndex) => {
                         const i = suggestionOffset + visibleIndex;
@@ -1190,6 +1169,6 @@ export function InputBox({ onSubmit, onQueue, onPasteNotice, disabled, onArrowDo
                         const i = suggestionOffset + visibleIndex;
                         const maxWidth = Math.max(10, Math.min(80, contentWidth - 2));
                         const label = s.path.length > maxWidth ? "…" + s.path.slice(-(maxWidth - 1)) : s.path;
-                        return (_jsx(Box, { height: 1, children: i === selectedIndex ? (_jsx(Text, { backgroundColor: "white", color: "black", children: ` ${label} ` })) : (_jsx(Text, { children: `  ${label}` })) }, s.path));
+                        return (_jsx(Box, { height: 1, children: i === selectedIndex ? (_jsx(Text, { color: theme.accent, bold: true, children: `› ${label}` })) : (_jsx(Text, { children: `  ${label}` })) }, s.path));
                     }), fileSuggestions.length > MAX_VISIBLE_SUGGESTIONS && (_jsx(Text, { color: theme.muted, children: `Showing ${suggestionOffset + 1}-${Math.min(suggestionOffset + MAX_VISIBLE_SUGGESTIONS, fileSuggestions.length)} of ${fileSuggestions.length}` }))] }))] }));
 }

package/dist/tui-ink/markdown.js

@@ -320,16 +320,17 @@ function appendInlineSegment(segments, text, style) {
         segments.push(next);
     }
 }
-function renderSegmentNodes(segments, keyPrefix) {
-    return segments.map((segment, index) => (_jsx(Text, { bold: segment.bold, italic: segment.italic, color: segment.code ? "#a78bfa" : undefined, children: segment.text }, `${keyPrefix}-${index}`)));
+function renderSegmentNodes(segments, keyPrefix, codeColor) {
+    return segments.map((segment, index) => (_jsx(Text, { bold: segment.bold, italic: segment.italic, color: segment.code ? codeColor : undefined, children: segment.text }, `${keyPrefix}-${index}`)));
 }
-function renderInlineSegments(text, keyPrefix, style = {}) {
-    return renderSegmentNodes(parseMarkdownInlineSegments(text, style), keyPrefix);
+function renderInlineSegments(text, keyPrefix, codeColor, style = {}) {
+    return renderSegmentNodes(parseMarkdownInlineSegments(text, style), keyPrefix, codeColor);
 }
 function inlinePlainText(text) {
     return parseMarkdownInlineSegments(text).map((segment) => segment.text).join("");
 }
 function InlineText({ text, maxWidth }) {
+    const theme = useTheme();
     const { columns } = useTerminalSize();
     // Pre-wrap CJK-aware so Ink's space-only wrap-ansi can't chop "、"-joined runs
     // mid-token. A caller-supplied maxWidth is exact (it already nets out the
@@ -338,10 +339,10 @@ function InlineText({ text, maxWidth }) {
     // wrapping a few cells early is invisible, a mid-token chop is not.
     const effectiveWidth = maxWidth ?? (columns ? Math.max(20, columns - 10) : undefined);
     if (effectiveWidth === undefined) {
-        return _jsx(Text, { children: renderInlineSegments(text, "inline") });
+        return _jsx(Text, { children: renderInlineSegments(text, "inline", theme.inlineCode) });
     }
     const wrapped = wrapInlineSegments(parseMarkdownInlineSegments(text), effectiveWidth);
-    return (_jsx(_Fragment, { children: wrapped.map((segments, li) => (_jsx(Text, { children: segments.length ? renderSegmentNodes(segments, `inline-${li}`) : " " }, li))) }));
+    return (_jsx(_Fragment, { children: wrapped.map((segments, li) => (_jsx(Text, { children: segments.length ? renderSegmentNodes(segments, `inline-${li}`, theme.inlineCode) : " " }, li))) }));
 }
 function CodeBlock({ lang, lines }) {
     const theme = useTheme();
@@ -378,6 +379,7 @@ function CodeBlock({ lang, lines }) {
     return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [lang && _jsx(Text, { color: theme.muted, children: lang }), _jsx(Box, { flexDirection: "column", children: highlighted.map((line, i) => (_jsx(Text, { children: line || " " }, i))) })] }));
 }
 function TableBlock({ headers, rows, maxWidth, }) {
+    const theme = useTheme();
     const { columns: termWidth } = useTerminalSize();
     const colCount = headers.length;
     // Reserve a buffer so the table fits even when wrapped inside an indented
@@ -425,7 +427,7 @@ function TableBlock({ headers, rows, maxWidth, }) {
             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 (_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}`, theme.inlineCode), 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 })] }));
 }
@@ -491,10 +493,10 @@ export function allocateColumnWidths(natural, available) {
     }
     return widths;
 }
-function renderCellLine(segments, width, keyPrefix) {
+function renderCellLine(segments, width, keyPrefix, codeColor) {
     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}`))),
+        ...renderSegmentNodes(segments, keyPrefix, codeColor),
         _jsx(Text, { children: padding }, `${keyPrefix}-pad`),
     ];
 }

package/dist/tui-ink/message-list.d.ts

@@ -31,7 +31,11 @@ interface MessageListProps {
      * a freshly-cleared screen instead of appending duplicates.
      */
     staticGeneration?: number;
-    /** Horizontal padding applied inside each committed/streaming row. */
+    /**
+     * Horizontal padding applied inside each committed/streaming row. Wrap
+     * budgets net this out via TRANSCRIPT_ROW_PADDING (= both sides of the
+     * default of 1) — keep the two in sync if this ever changes.
+     */
     paddingX?: number;
     /**
      * Maximum height (rows) for the live/dynamic region. The in-progress turn is

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

@@ -12,6 +12,16 @@ import { latestSubagentNote, sortSubagents, subagentDescriptor, subagentLabel, s
 import { sanitizeInternalReminderBlocks } from "../agent/internal-reminder-sanitizer.js";
 import { splitImageDisplayContent } from "../tui/image-display.js";
 const EXECUTE_COMMAND_BLOCK_MAX_LINES = 4;
+/**
+ * Every transcript row — each committed <Static> item and the DynamicClamp
+ * live region — wraps its content in paddingX={1}: one column of inset on
+ * EACH side. Any wrap budget derived from terminalColumns inside a row must
+ * net out these two columns. Forgetting them hands the pre-wrapper a budget
+ * two columns wider than the real room, and a dense CJK line that packs flush
+ * against that budget renders past the terminal edge — the terminal then
+ * hard-wraps the last glyph onto a stray row at column 0.
+ */
+const TRANSCRIPT_ROW_PADDING = 2;
 export function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, showThinking = false, verboseTrace, pendingApproval, nowTick, welcomeBanner, staticGeneration = 0, paddingX = 1, maxStreamRows, }) {
     const theme = useTheme();
     const hasStreaming = !!(streamingContent ||
@@ -195,7 +205,9 @@ function TimelineText({ content, compactTop, terminalColumns, streaming = false,
     // cell right and would overflow. Reserve that extra cell up front so the
     // pre-wrap never packs a line the terminal then hard-wraps.
     const gutter = ambiguousIsWide() ? 6 : 5;
-    const available = terminalColumns ? Math.max(20, terminalColumns - gutter) : undefined;
+    const available = terminalColumns
+        ? Math.max(20, terminalColumns - gutter - TRANSCRIPT_ROW_PADDING)
+        : undefined;
     const trimmed = visible.trim();
     return (_jsxs(Box, { marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsx(Text, { color: theme.agent, children: "\u25CF  " }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: streaming ? (_jsx(StreamingMarkdown, { content: trimmed, maxWidth: available })) : (_jsx(MarkdownContent, { content: trimmed, maxWidth: available })) })] }));
 }
@@ -347,7 +359,8 @@ function UserMessageBlock({ content, terminalColumns, inputStatus, separateFromP
 }
 function PendingInputMessagesBlock({ messages, terminalColumns, title, hint, bulletColor, }) {
     const theme = useTheme();
-    const contentWidth = Math.max(20, terminalColumns - 5);
+    // Inset per row: marginLeft (2) + "↳ " (2) + the transcript row padding.
+    const contentWidth = Math.max(20, terminalColumns - 4 - TRANSCRIPT_ROW_PADDING);
     return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: bulletColor, children: "\u2022 " }), _jsxs(Text, { bold: true, color: theme.inputText, children: [title, " "] }), _jsxs(Text, { color: theme.dim, children: ["(", hint, ")"] })] }), messages.flatMap((message, messageIndex) => {
                 const { bodyLines, referenceLines } = splitImageDisplayContent(message.content || " ");
                 const wrappedBody = bodyLines.flatMap((line) => wrapByVisualWidth(line || " ", contentWidth));

package/dist/tui-ink/model-picker.d.ts

@@ -65,8 +65,10 @@ export interface ProviderPickerProps {
     onSelect: (providerId: string) => void;
     onCancel: () => void;
     title?: string;
+    /** Fires whenever the highlighted row changes (and once on mount) — lets callers live-preview the selection. */
+    onHighlight?: (providerId: string) => void;
 }
-export declare function ProviderPicker({ providers, current, onSelect, onCancel, title }: ProviderPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProviderPicker({ providers, current, onSelect, onCancel, title, onHighlight }: ProviderPickerProps): import("react/jsx-runtime").JSX.Element;
 export interface KeyPickerProps {
     providerName: string;
     onSubmit: (key: string) => void;

package/dist/tui-ink/model-picker.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { Box, Text, useInput, usePaste, useStdout } from "ink";
 import { isKeyReleaseEvent } from "./key-events.js";
@@ -7,7 +7,7 @@ import { encodeModel, decodeModel, displayModel, isUserVisibleProvider } from ".
 import { listBuiltinModels } from "../model-catalog.js";
 import { padVisual, truncateVisual } from "../text-display.js";
 import { hasTerminalMouseSequence } from "./terminal-mouse.js";
-import { getAvailableThinkingLevels, normalizeThinkingLevel } from "../provider-transform.js";
+import { getAvailableThinkingLevels, isThinkingOnlyLevels, isThinkingToggleModel, normalizeThinkingLevel } from "../provider-transform.js";
 export { padVisual, truncateVisual } from "../text-display.js";
 export function resolvePickerKeyAction(input, key) {
     if (key.escape)
@@ -78,25 +78,24 @@ export function padPickerRows(rows, bodyRows, width) {
     }
     return padded;
 }
-// MiniMax models expose thinking as a binary on/off switch (the API's `thinking`
-// param is disabled|adaptive — there's no graded effort), so render the "on"
-// level as on/off instead of our internal "medium". Scoped to MiniMax only —
-// other 2-level models (e.g. GLM toggles) keep their effort labels.
-function isMiniMaxToggleModel(modelId) {
-    return modelId.toLowerCase().includes("minimax");
+function isThinkingToggleOption(option) {
+    const decoded = decodeModel(option.id);
+    return isThinkingToggleModel(decoded.providerId || option.providerBadge, decoded.modelId);
 }
 export function formatReasoningLevelsLabel(levels, asToggle = false) {
-    const normalized = levels.length > 0 ? levels : ["off"];
+    if (isThinkingOnlyLevels(levels))
+        return "on";
     if (asToggle)
         return "thinking on/off";
-    return `effort ${normalized.join("/")}`;
+    const normalized = levels.length > 0 ? levels : ["off"];
+    return normalized.join("/");
 }
 export function formatModelPickerRow(option, options) {
     const width = Math.max(24, options.width);
     const marker = options.selected ? "> " : "  ";
     const label = option.label.replace(/\s+/g, " ").trim();
     const provider = option.providerBadge.replace(/\s+/g, " ").trim();
-    const effort = formatReasoningLevelsLabel(option.reasoningLevels, isMiniMaxToggleModel(option.id));
+    const effort = formatReasoningLevelsLabel(option.reasoningLevels, isThinkingToggleOption(option));
     const current = options.current ? " ●" : "";
     const providerWidth = Math.max(6, Math.min(16, Math.floor(width * 0.18)));
     const effortWidth = Math.max(12, Math.min(30, Math.floor(width * 0.32)));
@@ -345,7 +344,14 @@ export function ModelPicker({ registry, current, currentThinkingLevel, recent, o
         row,
         selected: rawModelRows[index]?.selected ?? false,
     }));
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: phase.kind === "effort" ? "Select Reasoning Effort" : "Select Model" }), phase.kind === "effort" ? (_jsx(EffortPickerView, { model: phase.model, selectedIndex: phase.selectedIndex, bodyRows: bodyRows, rowWidth: rowWidth })) : (_jsxs(_Fragment, { children: [_jsx(SearchField, { query: query, placeholder: "Type to search models...", width: rowWidth }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter choose effort \u00B7 Esc cancel \u00B7 Backspace clear" })] })), phase.kind === "model" && _jsx(Box, { flexDirection: "column", height: bodyRows, overflow: "hidden", marginTop: 1, children: modelRows.map(({ key, row, selected }) => (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(Text, { color: selected ? theme.accent : (key === "no-results" ? theme.muted : undefined), bold: selected, children: row }) }, key))) })] }));
+    const highlightedOption = options[clampPickerIndex(selectedIndex, options.length)];
+    const enterAction = highlightedOption && shouldOpenEffortPicker(highlightedOption)
+        ? (isThinkingToggleOption(highlightedOption) ? "choose mode" : "choose effort")
+        : "select";
+    const effortTitle = phase.kind === "effort" && isThinkingToggleOption(phase.model)
+        ? "Select Thinking Mode"
+        : "Select Reasoning Effort";
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: phase.kind === "effort" ? effortTitle : "Select Model" }), phase.kind === "effort" ? (_jsx(EffortPickerView, { model: phase.model, selectedIndex: phase.selectedIndex, bodyRows: bodyRows, rowWidth: rowWidth })) : (_jsxs(_Fragment, { children: [_jsx(SearchField, { query: query, placeholder: "Type to search models...", width: rowWidth }), _jsxs(Text, { color: theme.muted, children: ["\u2191/\u2193 navigate \u00B7 Enter ", enterAction, " \u00B7 Esc cancel \u00B7 Backspace clear"] })] })), phase.kind === "model" && _jsx(Box, { flexDirection: "column", height: bodyRows, overflow: "hidden", marginTop: 1, children: modelRows.map(({ key, row, selected }) => (_jsx(Box, { height: 1, overflow: "hidden", children: _jsx(Text, { color: selected ? theme.accent : (key === "no-results" ? theme.muted : undefined), bold: selected, children: row }) }, key))) })] }));
 }
 function EffortPickerView({ model, selectedIndex, bodyRows, rowWidth, }) {
     const theme = useTheme();
@@ -355,7 +361,7 @@ function EffortPickerView({ model, selectedIndex, bodyRows, rowWidth, }) {
         row: formatEffortPickerRow(level, {
             selected: index === safeSelectedIndex,
             width: rowWidth,
-            asToggle: isMiniMaxToggleModel(model.id),
+            asToggle: isThinkingToggleOption(model),
         }),
         selected: index === safeSelectedIndex,
     }));
@@ -448,7 +454,7 @@ function reasoningLevelsForModel(model) {
     const { providerId, modelId } = decodeModel(model);
     return getAvailableThinkingLevels(providerId || "openai", modelId);
 }
-export function ProviderPicker({ providers, current, onSelect, onCancel, title }) {
+export function ProviderPicker({ providers, current, onSelect, onCancel, title, onHighlight }) {
     const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
@@ -457,6 +463,11 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title }
         const idx = providers.findIndex((p) => p.id === current);
         return idx >= 0 ? idx : 0;
     });
+    useEffect(() => {
+        const p = providers[selectedIndex];
+        if (p)
+            onHighlight?.(p.id);
+    }, [selectedIndex]);
     useInput((input, key) => {
         if (isKeyReleaseEvent(key))
             return;

package/dist/tui-ink/plan-confirm.js

@@ -110,6 +110,6 @@ export function PlanConfirm({ initialPlan, onApprove, onReject }) {
                         return (_jsx(Text, { children: line || " " }, index));
                     }
                     const safe = line || " ";
-                    return (_jsxs(Box, { children: [_jsx(Text, { children: safe.slice(0, cursorCol) }), _jsx(Text, { backgroundColor: "white", color: "black", children: safe[cursorCol] || " " }), _jsx(Text, { children: safe.slice(cursorCol + 1) })] }, index));
+                    return (_jsxs(Box, { children: [_jsx(Text, { children: safe.slice(0, cursorCol) }), _jsx(Text, { inverse: true, children: safe[cursorCol] || " " }), _jsx(Text, { children: safe.slice(cursorCol + 1) })] }, index));
                 }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.muted, children: [_jsx(Text, { color: theme.accent, bold: true, children: "\u2303S" }), " save & approve \u00A0\u00A0", _jsx(Text, { color: theme.accent, bold: true, children: "esc" }), " cancel edit"] }) })] }));
 }

package/dist/tui-ink/subagent-view.d.ts

@@ -26,7 +26,9 @@ export declare function subagentDescriptor(subagent: SubagentDisplay, includeThi
 export declare function subagentStatusColor(status: string | undefined, theme: Theme): string;
 export declare function subagentSummary(subagents: SubagentDisplay[]): string;
 export declare function sortSubagents(subagents: SubagentDisplay[]): SubagentDisplay[];
-/** A spawn_agent (one member), an agent_team/agent_batch, or a run_workflow (a group of members). */
+/** A spawn_agent (one member) or a run_workflow (a group of members). The
+ * "team"/"batch" kinds survive only to render transcripts recorded before
+ * those tools were removed (2026-07-06). */
 export interface SubagentGroup {
     id: string;
     kind: "single" | "team" | "batch" | "workflow";

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

@@ -15,7 +15,13 @@ export interface Theme {
     error: string;
     warning: string;
     success: string;
-    background: string;
+    /**
+     * Painted canvas color. `undefined` means "do not paint" — the terminal's
+     * own background shows through, so the app never fights the user's terminal
+     * palette (e.g. forcing pure black inside a soft-dark terminal). Users can
+     * still force a painted canvas via `theme.overrides.background` in config.
+     */
+    background: string | undefined;
     accent: string;
     /** Welcome banner border. */
     bannerBorder: string;
@@ -40,7 +46,8 @@ export interface Theme {
     toolResult: string;
     toolError: string;
     toolPending: string;
-    code: string;
+    /** Markdown inline `code` spans. */
+    inlineCode: string;
     traceAction: string;
     traceCount: string;
     traceDetail: string;
@@ -50,8 +57,10 @@ export interface Theme {
     userMessageBg: string;
     userMessageText: string;
     userRail: string;
+    /** Painted band backgrounds for diff lines inside user-message cards. */
     diffAdd: string;
     diffRemove: string;
+    /** Foregrounds for +/- diff lines rendered without a painted background. */
     diffAddFg: string;
     diffRemoveFg: string;
 }
@@ -62,6 +71,14 @@ export declare const darkTheme: Theme;
  * terminal background.
  */
 export declare const lightTheme: Theme;
+/**
+ * Decide whether the canvas needs painting. Auto mode always inherits the
+ * terminal's own background, and so does a forced theme that matches the
+ * detected terminal. A forced theme that mismatches (e.g. `/theme light`
+ * inside a dark terminal) paints its canvas, because its foregrounds are
+ * tuned for the opposite background and would otherwise be unreadable.
+ */
+export declare function canvasBackgroundFor(mode: ThemeMode, resolved: ResolvedTheme, terminalTheme: ResolvedTheme): string | undefined;
 export declare const ThemeProvider: import("react").Provider<Theme>;
 export declare function useTheme(): Theme;
 /** Build the active palette given a resolved mode and optional overrides. */

package/dist/tui-ink/theme.js

@@ -14,7 +14,7 @@ export const darkTheme = {
     error: "red",
     warning: "yellow",
     success: "green",
-    background: "#0A0A0A",
+    background: undefined,
     accent: "cyan",
     bannerBorder: "#38bdf8",
     bannerGradientFrom: "#67e8f9",
@@ -37,7 +37,7 @@ export const darkTheme = {
     toolResult: "gray",
     toolError: "red",
     toolPending: "yellow",
-    code: "yellow",
+    inlineCode: "#a78bfa",
     traceAction: "#E89A6B",
     traceCount: "#c9c1bd",
     traceDetail: "gray",
@@ -49,8 +49,8 @@ export const darkTheme = {
     userRail: "#8A7FC6",
     diffAdd: "#1a3d1a",
     diffRemove: "#3d1a1a",
-    diffAddFg: "#9CDCFE",
-    diffRemoveFg: "#F48771",
+    diffAddFg: "green",
+    diffRemoveFg: "red",
 };
 /**
  * Light palette tuned for paper-neutral surfaces, blue focus/user rails, warm
@@ -63,7 +63,7 @@ export const lightTheme = {
     error: "#B62633",
     warning: "#8B4A00",
     success: "#2F7D4A",
-    background: "#FCFCFA",
+    background: undefined,
     accent: "#8B4A00",
     bannerBorder: "#356FD2",
     bannerGradientFrom: "#0E7490",
@@ -86,7 +86,7 @@ export const lightTheme = {
     toolResult: "#171717",
     toolError: "#B62633",
     toolPending: "#8B4A00",
-    code: "#2F7D4A",
+    inlineCode: "#6D28D9",
     traceAction: "#8B4A00",
     traceCount: "#6F7377",
     traceDetail: "#8B9094",
@@ -98,9 +98,26 @@ export const lightTheme = {
     userRail: "#356FD2",
     diffAdd: "#D7E8D8",
     diffRemove: "#F7DADC",
-    diffAddFg: "#173D2D",
-    diffRemoveFg: "#5D1922",
+    diffAddFg: "#2F7D4A",
+    diffRemoveFg: "#B62633",
 };
+/** Canvas colors painted only when a forced theme mismatches the terminal. */
+const paintedCanvas = {
+    dark: "#0A0A0A",
+    light: "#FCFCFA",
+};
+/**
+ * Decide whether the canvas needs painting. Auto mode always inherits the
+ * terminal's own background, and so does a forced theme that matches the
+ * detected terminal. A forced theme that mismatches (e.g. `/theme light`
+ * inside a dark terminal) paints its canvas, because its foregrounds are
+ * tuned for the opposite background and would otherwise be unreadable.
+ */
+export function canvasBackgroundFor(mode, resolved, terminalTheme) {
+    if (mode === "auto" || resolved === terminalTheme)
+        return undefined;
+    return paintedCanvas[resolved];
+}
 const ThemeContext = createContext(darkTheme);
 export const ThemeProvider = ThemeContext.Provider;
 export function useTheme() {

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

@@ -9,6 +9,7 @@ interface WelcomeBannerProps {
     /** Session identifier (session file basename). */
     sessionLabel?: string;
     providerId?: string;
+    modelId?: string;
     modelLabel?: string;
     /** Active thinking level, rendered as part of the model unit (e.g. "xhigh"). */
     thinkingLabel?: string;
@@ -19,6 +20,6 @@ interface WelcomeVisibilityInput {
 }
 export declare function shouldShowWelcomeBanner({ startedWithVisibleHistory, }: WelcomeVisibilityInput): boolean;
 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 declare function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, sessionLabel, providerId, modelId, modelLabel, thinkingLabel, }: WelcomeBannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function formatModelLine({ providerId, modelId, modelLabel, thinkingLabel, tips, }: Pick<WelcomeBannerProps, "providerId" | "modelId" | "modelLabel" | "thinkingLabel" | "tips">): string;
 export {};

package/dist/tui-ink/welcome.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Box, Text } from "ink";
 import { createRequire } from "node:module";
 import { useTheme } from "./theme.js";
+import { isThinkingOnlyModel, isThinkingToggleModel } from "../provider-transform.js";
 const require = createRequire(import.meta.url);
 const PACKAGE_VERSION = readPackageVersion();
 const COMPACT_LOGO = [
@@ -28,11 +29,12 @@ 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, }) {
+export function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, sessionLabel, providerId, modelId, modelLabel, thinkingLabel, }) {
     const theme = useTheme();
     const effectiveWidth = Math.max(24, Math.min(terminalColumns - 2, 96));
     const modelLine = formatModelLine({
         providerId,
+        modelId,
         modelLabel,
         thinkingLabel,
         tips,
@@ -48,14 +50,16 @@ export function WelcomeBanner({ terminalColumns, tips, updateNotice, cwd, sessio
     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, }) {
+export function formatModelLine({ providerId, modelId, modelLabel, thinkingLabel, tips, }) {
     const parts = [];
-    // MiniMax thinking is a binary toggle (adaptive thinking), so label it
-    // "thinking mode" rather than "<level> effort"; and its provider id
-    // ("minimax-anthropic") is redundant with the model name, so omit it.
+    // Binary thinking toggles use an internal placeholder level, so label them
+    // "thinking mode" rather than "<level> effort". MiniMax provider ids are
+    // redundant with the model name, so omit them.
     const isMiniMax = (providerId || "").toLowerCase().includes("minimax");
+    const isThinkingToggle = isThinkingToggleModel(providerId, modelId);
+    const isThinkingOnly = isThinkingOnlyModel(providerId, modelId);
     if (modelLabel) {
-        if (thinkingLabel && isMiniMax)
+        if (thinkingLabel && (isThinkingToggle || isThinkingOnly))
             parts.push(modelLabel, "thinking mode");
         else if (thinkingLabel)
             parts.push(`${modelLabel} with ${thinkingLabel} effort`);