@bubblebrain-ai/bubble 0.0.36 → 0.0.37

package/dist/tui-ink/app.js

@@ -342,7 +342,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     const [staticGeneration, setStaticGeneration] = useState(0);
     const reprintTranscript = useCallback(() => {
         if (process.stdout.isTTY) {
-            process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
+            process.stdout.write("\x1b[0m\x1b[2J\x1b[3J\x1b[H");
         }
         setStaticGeneration((generation) => generation + 1);
     }, []);
@@ -2112,7 +2112,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
     // to its content keeps the composer pinned just below the latest output the
     // way ordinary shell programs do.
     const mainWidth = Math.max(40, terminalColumns);
-    return (_jsx(ThemeProvider, { value: palette, children: _jsxs(Box, { flexDirection: "column", width: mainWidth, backgroundColor: palette.background, children: [_jsx(MessageList, { messages: messages, streamingContent: streamingContent, streamingReasoning: streamingReasoning, streamingTools: streamingTools, streamingParts: streamingParts, terminalColumns: mainWidth, showThinking: showThinking, verboseTrace: verboseTrace, pendingApproval: approvalHint, nowTick: nowTick, welcomeBanner: welcomeBannerNode, staticGeneration: staticGeneration, paddingX: 1, maxStreamRows: Math.max(6, terminalRows - 10) }), pickerMode === "grok-model" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: grokModels.length === 0 ? (_jsx(Text, { children: "Loading Grok subscription models\u2026" })) : (_jsx(ProviderPicker, { title: "Select Grok Model and Reasoning", providers: grokModels.flatMap((model) => model.reasoningLevels.map((effort) => ({
+    return (_jsx(ThemeProvider, { value: palette, children: _jsxs(Box, { flexDirection: "column", width: mainWidth, children: [_jsx(MessageList, { messages: messages, streamingContent: streamingContent, streamingReasoning: streamingReasoning, streamingTools: streamingTools, streamingParts: streamingParts, terminalColumns: mainWidth, showThinking: showThinking, verboseTrace: verboseTrace, pendingApproval: approvalHint, nowTick: nowTick, welcomeBanner: welcomeBannerNode, staticGeneration: staticGeneration, paddingX: 1, maxStreamRows: Math.max(6, terminalRows - 10) }), pickerMode === "grok-model" && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: grokModels.length === 0 ? (_jsx(Text, { children: "Loading Grok subscription models\u2026" })) : (_jsx(ProviderPicker, { title: "Select Grok Model and Reasoning", providers: grokModels.flatMap((model) => model.reasoningLevels.map((effort) => ({
                             id: JSON.stringify({ modelId: model.id, reasoningEffort: effort }),
                             name: `${model.name}${effort === "off" ? "" : ` · ${effort}`}`,
                             enabled: true,
@@ -2213,7 +2213,7 @@ export function App({ agent, args, sessionManager: initialSessionManager, switch
                         : 0, flexShrink: 0, backgroundColor: palette.background, children: _jsx(WaitingIndicator, { tools: streamingTools, hasStreamingText: streamingContent.length > 0, hasStreamingReasoning: streamingReasoning.length > 0, streamedChars: streamingContent.length + streamingReasoning.length, nowTick: nowTick, pendingSteerCount: pendingSteerCount, queuedCount: queuedCount }) })), !isExiting && !pickerMode && !statsPanel && (_jsx(Box, { paddingBottom: 1, flexShrink: 0, backgroundColor: palette.background, children: _jsx(InputBox, { onSubmit: handleSubmit, onQueue: isRunning ? queueInput : undefined, onArrowDownAtBottom: () => {
                             if (subagentMembers.length > 0 && !pickerMode)
                                 setSubagentEntryFocused(true);
-                        }, disabled: !!pendingPlan || !!pendingApproval || !!pendingQuestion || !!pendingFeedback || !!statsPanel || subagentEntryFocused, cursorResetEpoch: cursorResetEpoch, draftText: composerDraft?.text, draftEpoch: composerDraft?.epoch, onDraftApplied: clearComposerDraft, skillRegistry: externalSessionBound ? undefined : safeSkillRegistry, localSlashCommands: externalSessionBound ? [] : [...INK_LOCAL_SLASH_COMMANDS], allowedSlashCommands: unsupportedExternalSessionBound ? GROK_LOCAL_SLASH_COMMANDS : undefined, allowWorkspaceMentions: !unsupportedExternalSessionBound, allowImageAttachments: !externalSessionBound, terminalColumns: mainWidth, cwd: args.cwd, sessionFile: currentSessionFile(), nextImageLabelStart: nextImageDisplayLabelStartRef.current }) })), !isExiting && !pickerMode && !statsPanel && !pendingPlan && !pendingApproval && !pendingQuestion && !pendingFeedback && subagentMembers.length > 0 && (_jsxs(Box, { paddingX: 1, flexShrink: 0, backgroundColor: palette.background, children: [_jsx(Text, { bold: subagentEntryFocused, color: subagentEntryFocused ? palette.accent : palette.toolName, children: subagentEntryFocused ? "> ↳ " : "  ↳ " }), _jsxs(Text, { color: subagentEntryFocused ? palette.accent : palette.muted, children: [subagentMembers.length, " subagent", subagentMembers.length === 1 ? "" : "s", " \u00B7 ", subagentSummary(subagentMembers), " \u00B7 "] }), _jsx(Text, { color: palette.accent, children: subagentEntryFocused ? "Enter open · Esc back" : "↓ to inspect traces" })] })), !isExiting && (_jsx(Box, { flexShrink: 0, children: _jsx(FooterBar, { data: buildFooterData({
+                        }, disabled: !!pendingPlan || !!pendingApproval || !!pendingQuestion || !!pendingFeedback || !!statsPanel || subagentEntryFocused, cursorResetEpoch: cursorResetEpoch, draftText: composerDraft?.text, draftEpoch: composerDraft?.epoch, onDraftApplied: clearComposerDraft, skillRegistry: externalSessionBound ? undefined : safeSkillRegistry, localSlashCommands: externalSessionBound ? [] : [...INK_LOCAL_SLASH_COMMANDS], allowedSlashCommands: unsupportedExternalSessionBound ? GROK_LOCAL_SLASH_COMMANDS : undefined, allowWorkspaceMentions: !unsupportedExternalSessionBound, allowImageAttachments: !externalSessionBound, terminalColumns: mainWidth, cwd: args.cwd, sessionFile: currentSessionFile(), nextImageLabelStart: nextImageDisplayLabelStartRef.current }) })), !isExiting && !pickerMode && !statsPanel && !pendingPlan && !pendingApproval && !pendingQuestion && !pendingFeedback && subagentMembers.length > 0 && (_jsxs(Box, { paddingX: 1, flexShrink: 0, children: [_jsx(Text, { bold: subagentEntryFocused, color: subagentEntryFocused ? palette.accent : palette.toolName, children: subagentEntryFocused ? "> ↳ " : "  ↳ " }), _jsxs(Text, { color: subagentEntryFocused ? palette.accent : palette.muted, children: [subagentMembers.length, " subagent", subagentMembers.length === 1 ? "" : "s", " \u00B7 ", subagentSummary(subagentMembers), " \u00B7 "] }), _jsx(Text, { color: palette.accent, children: subagentEntryFocused ? "Enter open · Esc back" : "↓ to inspect traces" })] })), !isExiting && (_jsx(Box, { flexShrink: 0, children: _jsx(FooterBar, { data: buildFooterData({
                             mode: permissionMode,
                             goalLine: externalSessionBound ? undefined : goalLine,
                             runtimeLabel: externalSessionBound

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

@@ -55,10 +55,10 @@ export function MessageList({ messages, streamingContent, streamingReasoning, st
     const clampDynamic = typeof maxStreamRows === "number" && maxStreamRows > 0;
     return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Static, { items: staticItems, children: (item) => {
                     if (item.kind === "welcome") {
-                        return (_jsx(Box, { flexDirection: "column", paddingX: paddingX, children: welcomeBanner }, item.key));
+                        return (_jsx(Box, { flexDirection: "column", paddingX: paddingX, backgroundColor: theme.background, children: welcomeBanner }, item.key));
                     }
-                    return (_jsx(Box, { flexDirection: "column", paddingX: paddingX, children: _jsx(MessageItem, { message: item.message, terminalColumns: terminalColumns, showThinking: showThinking, verboseTrace: verboseTrace, showExpandHint: item.showExpandHint, separateFromPrevious: item.separateFromPrevious }) }, item.key));
-                } }, `transcript-${staticGeneration}`), hasDynamic && (_jsxs(DynamicClamp, { maxRows: clampDynamic ? maxStreamRows : undefined, paddingX: paddingX, children: [hasStreaming && (_jsx(StreamingMessage, { content: streamingContent, reasoning: streamingReasoning, tools: streamingTools, parts: streamingParts, terminalColumns: terminalColumns, showThinking: showThinking, verboseTrace: verboseTrace, pendingApproval: pendingApproval, nowTick: nowTick })), pendingSteerMessages.length > 0 && (_jsx(PendingInputMessagesBlock, { messages: pendingSteerMessages, terminalColumns: terminalColumns, title: "Messages to steer at next model call", hint: "applies before the next provider request", bulletColor: theme.warning })), queuedInputMessages.length > 0 && (_jsx(PendingInputMessagesBlock, { messages: queuedInputMessages, terminalColumns: terminalColumns, title: "Messages queued for next turn", hint: "runs after the current answer", bulletColor: theme.muted }))] }))] }));
+                    return (_jsx(Box, { flexDirection: "column", paddingX: paddingX, backgroundColor: theme.background, children: _jsx(MessageItem, { message: item.message, terminalColumns: terminalColumns, showThinking: showThinking, verboseTrace: verboseTrace, showExpandHint: item.showExpandHint, separateFromPrevious: item.separateFromPrevious }) }, item.key));
+                } }, `transcript-${staticGeneration}`), hasDynamic && (_jsxs(DynamicClamp, { maxRows: clampDynamic ? maxStreamRows : undefined, paddingX: paddingX, backgroundColor: theme.background, children: [hasStreaming && (_jsx(StreamingMessage, { content: streamingContent, reasoning: streamingReasoning, tools: streamingTools, parts: streamingParts, terminalColumns: terminalColumns, showThinking: showThinking, verboseTrace: verboseTrace, pendingApproval: pendingApproval, nowTick: nowTick })), pendingSteerMessages.length > 0 && (_jsx(PendingInputMessagesBlock, { messages: pendingSteerMessages, terminalColumns: terminalColumns, title: "Messages to steer at next model call", hint: "applies before the next provider request", bulletColor: theme.warning })), queuedInputMessages.length > 0 && (_jsx(PendingInputMessagesBlock, { messages: queuedInputMessages, terminalColumns: terminalColumns, title: "Messages queued for next turn", hint: "runs after the current answer", bulletColor: theme.muted }))] }))] }));
 }
 /**
  * Bounds the live (in-progress turn) region to at most `maxRows` rows, pinned
@@ -70,7 +70,7 @@ export function MessageList({ messages, streamingContent, streamingReasoning, st
  * (no reserved-space gap). The full turn still lands in <Static> scrollback the
  * moment it commits, so nothing is lost — only the live preview is windowed.
  */
-function DynamicClamp({ maxRows, paddingX, children, }) {
+function DynamicClamp({ maxRows, paddingX, backgroundColor, children, }) {
     const innerRef = React.useRef(null);
     const [offset, setOffset] = React.useState(0);
     const [clipHeight, setClipHeight] = React.useState(undefined);
@@ -102,7 +102,7 @@ function DynamicClamp({ maxRows, paddingX, children, }) {
                 setClipHeight(undefined);
         }
     });
-    return (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingX: paddingX, ...(clipHeight !== undefined ? { height: clipHeight, overflowY: "hidden" } : {}), children: _jsx(Box, { ref: innerRef, flexDirection: "column", flexShrink: 0, marginTop: offset, children: children }) }));
+    return (_jsx(Box, { flexDirection: "column", flexShrink: 0, paddingX: paddingX, backgroundColor: backgroundColor, ...(clipHeight !== undefined ? { height: clipHeight, overflowY: "hidden" } : {}), children: _jsx(Box, { ref: innerRef, flexDirection: "column", flexShrink: 0, marginTop: offset, children: children }) }));
 }
 // Memoized: with no <Static> region, every transcript row re-renders on each
 // state change unless its props are referentially stable. Message objects are

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

@@ -22,10 +22,17 @@ export function resolvePickerKeyAction(input, key) {
         return "backspace";
     if (key.delete)
         return "delete";
+    // Batched chunks: slow ptys (web-terminal bridges, SSH, paste) can deliver
+    // several keys in ONE input event, in which case ink sets no key flags at
+    // all ("\r/quit\r" arrives with return=false). Act on the chunk's leading
+    // key instead of swallowing it — exact-match anchors would drop the whole
+    // chunk.
+    if (input.startsWith("\r") || input.startsWith("\n"))
+        return "enter";
     const sequence = normalizeEscapeSequence(input);
-    if (/^(?:O|\[[\d;:]*)A$/.test(sequence))
+    if (/^(?:O|\[[\d;:]*)A/.test(sequence))
         return "up";
-    if (/^(?:O|\[[\d;:]*)B$/.test(sequence))
+    if (/^(?:O|\[[\d;:]*)B/.test(sequence))
         return "down";
     return undefined;
 }
@@ -793,6 +800,16 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title,
         const idx = providers.findIndex((p) => p.id === current);
         return idx >= 0 ? idx : 0;
     });
+    // Authoritative selection lives in a ref, mutated synchronously by the
+    // input handler; state only mirrors it for display. Slow ptys (web-terminal
+    // bridges) can deliver several key events before React commits a re-render,
+    // and a state-only selection would leave the handler closure stale — Enter
+    // would then select the pre-batch highlight.
+    const selectedIndexRef = useRef(selectedIndex);
+    const moveSelection = (next) => {
+        selectedIndexRef.current = next;
+        setSelectedIndex(next);
+    };
     useEffect(() => {
         const p = providers[selectedIndex];
         if (p)
@@ -807,30 +824,31 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title,
             return;
         }
         if (action === "enter") {
-            const p = providers[selectedIndex];
+            const p = providers[selectedIndexRef.current];
             if (p)
                 onSelect(p.id);
             return;
         }
         if (action === "up") {
-            setSelectedIndex((i) => Math.max(0, i - 1));
+            moveSelection((selectedIndexRef.current - 1 + providers.length) % providers.length);
             return;
         }
         if (action === "down") {
-            setSelectedIndex((i) => Math.min(providers.length - 1, i + 1));
+            moveSelection((selectedIndexRef.current + 1) % providers.length);
             return;
         }
         if (isPrintablePickerInput(input) && input.length === 1 && /[a-z]/i.test(input)) {
             const char = input.toLowerCase();
-            for (let i = selectedIndex + 1; i < providers.length; i++) {
+            const from = selectedIndexRef.current;
+            for (let i = from + 1; i < providers.length; i++) {
                 if (providers[i].name.toLowerCase().startsWith(char)) {
-                    setSelectedIndex(i);
+                    moveSelection(i);
                     return;
                 }
             }
-            for (let i = 0; i <= selectedIndex; i++) {
+            for (let i = 0; i <= from; i++) {
                 if (providers[i].name.toLowerCase().startsWith(char)) {
-                    setSelectedIndex(i);
+                    moveSelection(i);
                     return;
                 }
             }
@@ -838,7 +856,12 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title,
     });
     const start = Math.max(0, Math.min(selectedIndex, providers.length - maxVisible));
     const visible = providers.slice(start, start + maxVisible);
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: title || "Select Provider" }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 type letter to jump" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: visible.map((p, i) => {
+    return (
+    // backgroundColor lives on the picker's OWN root box, below its state:
+    // a canvas toggle (theme preview across a forced-theme mismatch) then
+    // reshapes only this stateless output subtree. On an ancestor wrapper it
+    // would remount the whole picker and reset selectedIndex mid-navigation.
+    _jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, backgroundColor: theme.background, children: [_jsx(Text, { bold: true, color: theme.accent, children: title || "Select Provider" }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 navigate \u00B7 Enter select \u00B7 Esc cancel \u00B7 type letter to jump" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: visible.map((p, i) => {
                     const actualIndex = start + i;
                     const isSelected = actualIndex === selectedIndex;
                     return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? theme.accent : undefined, children: [isSelected ? "> " : "  ", p.name, p.id === current ? " (current)" : "", !p.enabled ? " [disabled]" : ""] }) }, p.id));

package/package.json

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