@bubblebrain-ai/bubble 0.0.36 → 0.0.38

package/dist/tui-ink/markdown.js

@@ -344,7 +344,7 @@ function InlineText({ text, maxWidth }) {
     const wrapped = wrapInlineSegments(parseMarkdownInlineSegments(text), effectiveWidth);
     return (_jsx(_Fragment, { children: wrapped.map((segments, li) => (_jsx(Text, { children: segments.length ? renderSegmentNodes(segments, `inline-${li}`, theme.inlineCode) : " " }, li))) }));
 }
-function CodeBlock({ lang, lines }) {
+function CodeBlock({ lang, lines, flushTop = false }) {
     const theme = useTheme();
     // Lazy init: try sync highlight when shiki is already warm so the very first
     // paint carries highlighted output. Fall back to raw lines if shiki hasn't
@@ -376,9 +376,9 @@ function CodeBlock({ lang, lines }) {
             cancelled = true;
         };
     }, [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))) })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginTop: flushTop ? 0 : 1, marginBottom: 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, }) {
+function TableBlock({ headers, rows, maxWidth, flushTop = false, }) {
     const theme = useTheme();
     const { columns: termWidth } = useTerminalSize();
     const colCount = headers.length;
@@ -429,7 +429,7 @@ function TableBlock({ headers, rows, maxWidth, }) {
         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}`, 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 })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginTop: flushTop ? 0 : 1, marginBottom: 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 })] }));
 }
 /** Cap a pathological cell (huge blob of text) at this many wrapped lines. */
 const MAX_TABLE_CELL_LINES = 8;
@@ -663,7 +663,7 @@ export function wrapInlineSegments(segments, maxWidth) {
 function inlineSegmentsWidth(segments) {
     return segments.reduce((sum, segment) => sum + visualWidth(segment.text), 0);
 }
-function HeadingBlock({ level, text }) {
+function HeadingBlock({ level, text, flushTop = false }) {
     const theme = useTheme();
     const props = { bold: true };
     if (level === 1) {
@@ -676,7 +676,7 @@ function HeadingBlock({ level, text }) {
     else if (level === 3) {
         props.color = theme.warning;
     }
-    return (_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsx(Text, { ...props, children: text }) }));
+    return (_jsx(Box, { marginTop: flushTop ? 0 : 1, marginBottom: 1, children: _jsx(Text, { ...props, children: text }) }));
 }
 /**
  * Streaming-aware wrapper around `MarkdownContent`.
@@ -693,7 +693,7 @@ function HeadingBlock({ level, text }) {
  * reset handles the rare case where `content` is replaced wholesale (e.g.,
  * the user re-enters a turn).
  */
-export function StreamingMarkdown({ content, maxWidth, }) {
+export function StreamingMarkdown({ content, maxWidth, flushTop = false, }) {
     const stablePrefixRef = React.useRef("");
     if (!content.startsWith(stablePrefixRef.current)) {
         stablePrefixRef.current = "";
@@ -706,7 +706,7 @@ export function StreamingMarkdown({ content, maxWidth, }) {
     }
     const stablePrefix = stablePrefixRef.current;
     const unstableSuffix = content.substring(stablePrefix.length);
-    return (_jsxs(Box, { flexDirection: "column", children: [stablePrefix && _jsx(MarkdownContent, { content: stablePrefix, maxWidth: maxWidth }), unstableSuffix && _jsx(MarkdownContent, { content: unstableSuffix, maxWidth: maxWidth })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [stablePrefix && _jsx(MarkdownContent, { content: stablePrefix, maxWidth: maxWidth, flushTop: flushTop }), unstableSuffix && _jsx(MarkdownContent, { content: unstableSuffix, maxWidth: maxWidth, flushTop: flushTop && !stablePrefix })] }));
 }
 // A markdown list item: optional indent, a bullet (-, *, +) or ordered marker
 // (1. / 2)), then whitespace, then the item text. The captured prefix is
@@ -720,17 +720,18 @@ export function splitListItem(line) {
     const prefix = m[1] + m[2] + m[3];
     return { prefix, content: m[4], indent: visualWidth(prefix) };
 }
-export function MarkdownContent({ content, maxWidth, }) {
+export function MarkdownContent({ content, maxWidth, flushTop = false, }) {
     const blocks = React.useMemo(() => parseMarkdownBlocks(content), [content]);
     return (_jsx(Box, { flexDirection: "column", children: blocks.map((block, i) => {
+            const blockFlushTop = flushTop && i === 0;
             if (block.type === "code") {
-                return _jsx(CodeBlock, { lang: block.lang, lines: block.lines }, i);
+                return _jsx(CodeBlock, { lang: block.lang, lines: block.lines, flushTop: blockFlushTop }, i);
             }
             if (block.type === "table") {
-                return (_jsx(TableBlock, { headers: block.headers, rows: block.rows, maxWidth: maxWidth }, i));
+                return (_jsx(TableBlock, { headers: block.headers, rows: block.rows, maxWidth: maxWidth, flushTop: blockFlushTop }, i));
             }
             if (block.type === "heading") {
-                return _jsx(HeadingBlock, { level: block.level, text: block.text }, i);
+                return _jsx(HeadingBlock, { level: block.level, text: block.text, flushTop: blockFlushTop }, i);
             }
             return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: block.lines.map((line, li) => {
                     const item = splitListItem(line);

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

@@ -31,8 +31,14 @@ export function MessageList({ messages, streamingContent, streamingReasoning, st
     const regularMessages = messages.filter((message) => !message.inputStatus);
     const pendingSteerMessages = messages.filter((message) => message.inputStatus === "pending_steer");
     const queuedInputMessages = messages.filter((message) => message.inputStatus === "queued");
+    // While the transcript has no settled rows, the banner stays OUT of
+    // <Static> and renders in the live region instead, so it repaints on every
+    // commit — a /model switch on the fresh launch screen updates the banner in
+    // place. It is committed to scrollback together with the first settled row
+    // (same render commit, so the hand-off is seamless) and frozen from then on.
+    const bannerCommitted = regularMessages.length > 0;
     const staticItems = [];
-    if (welcomeBanner) {
+    if (welcomeBanner && bannerCommitted) {
         staticItems.push({ kind: "welcome", key: "welcome" });
     }
     const lastMessageIndex = regularMessages.length - 1;
@@ -55,10 +61,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}`), welcomeBanner && !bannerCommitted && (_jsx(Box, { flexDirection: "column", paddingX: paddingX, backgroundColor: theme.background, children: welcomeBanner })), 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 +76,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 +108,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
@@ -123,6 +129,11 @@ const MessageItem = React.memo(function MessageItem({ message, terminalColumns,
     if (message.syntheticKind === "ui_interrupt") {
         return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.error, children: "\u23F9 " }), _jsx(Text, { color: theme.muted, dimColor: true, children: message.content || "Interrupted by user" })] }));
     }
+    // One-line status notices (model switch etc.): accent-colored so they read
+    // as UI feedback, not assistant prose.
+    if (message.syntheticKind === "ui_notice") {
+        return (_jsx(Box, { marginTop: 1, marginBottom: 1, children: _jsxs(Text, { color: theme.accent, children: ["\u2726 ", message.content] }) }));
+    }
     const visibleReasoning = sanitizeInternalReminderBlocks(message.reasoning ?? "").trim();
     // Same defense as reasoning: strip any internal reminder markup the model
     // echoed back into its visible answer so it never reaches the transcript.
@@ -209,7 +220,7 @@ function TimelineText({ content, compactTop, terminalColumns, streaming = false,
         ? 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 })) })] }));
+    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, flushTop: true })) : (_jsx(MarkdownContent, { content: trimmed, maxWidth: available, flushTop: true })) })] }));
 }
 function ToolsPart({ toolCalls, terminalColumns, verboseTrace, pendingApproval, showExpandHint, compactTop = false, nowTick, showActivity = false, }) {
     if (toolCalls.length === 0)

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/dist/tui-ink/run.d.ts

@@ -34,6 +34,12 @@ export interface RunTuiOptions {
     mcpManager?: McpManager;
     /** Shared with the model-facing goal tools and the Ink auto-continuation loop. */
     goalStore?: import("../goal/store.js").GoalStore;
+    /** Unified process manager; drives task notices, auto-resume, and the status row. */
+    processManager?: import("../tasks/manager.js").ProcessManager;
+    /** tasks.auto_resume from user config (design §2.3b). Default ON. */
+    tasksAutoResume?: boolean;
+    /** Ctrl+G send-to-background channel shared with the bash tool (design §2.5). */
+    promotionChannel?: import("../tasks/promotion.js").PromotionChannel;
     themeMode?: ThemeMode;
     themeOverrides?: Record<string, string>;
     detectedTheme?: ResolvedTheme;

package/dist/tui-ink/run.js

@@ -3,7 +3,7 @@ import { render } from "ink";
 import { App } from "./app.js";
 import { warmHighlighter } from "./code-highlight.js";
 export function createInkAppElement(agent, args, options, onExit) {
-    return (_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, switchSession: options.switchSession, createProvider: options.createProvider, registry: options.registry, skillRegistry: options.skillRegistry, planHandlerRef: options.planHandlerRef, approvalHandlerRef: options.approvalHandlerRef, questionController: options.questionController, bashAllowlist: options.bashAllowlist, settingsManager: options.settingsManager, lspService: options.lspService, mcpManager: options.mcpManager, goalStore: options.goalStore, themeMode: options.themeMode, themeOverrides: options.themeOverrides, detectedTheme: options.detectedTheme, onThemeModeChange: options.onThemeModeChange, flushMemory: options.flushMemory, runMemoryCompaction: options.runMemoryCompaction, runMemorySummary: options.runMemorySummary, runMemoryRefresh: options.runMemoryRefresh, bypassEnabled: options.bypassEnabled, updateNotice: options.updateNotice, updateNoticeRefresh: options.updateNoticeRefresh, hookController: options.hookController, externalRuntime: options.externalRuntime, onExit: onExit }));
+    return (_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, switchSession: options.switchSession, createProvider: options.createProvider, registry: options.registry, skillRegistry: options.skillRegistry, planHandlerRef: options.planHandlerRef, approvalHandlerRef: options.approvalHandlerRef, questionController: options.questionController, bashAllowlist: options.bashAllowlist, settingsManager: options.settingsManager, lspService: options.lspService, mcpManager: options.mcpManager, goalStore: options.goalStore, processManager: options.processManager, tasksAutoResume: options.tasksAutoResume, promotionChannel: options.promotionChannel, themeMode: options.themeMode, themeOverrides: options.themeOverrides, detectedTheme: options.detectedTheme, onThemeModeChange: options.onThemeModeChange, flushMemory: options.flushMemory, runMemoryCompaction: options.runMemoryCompaction, runMemorySummary: options.runMemorySummary, runMemoryRefresh: options.runMemoryRefresh, bypassEnabled: options.bypassEnabled, updateNotice: options.updateNotice, updateNoticeRefresh: options.updateNoticeRefresh, hookController: options.hookController, externalRuntime: options.externalRuntime, onExit: onExit }));
 }
 /**
  * Best-effort terminal restore for abnormal exits. Bubble renders into the

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

@@ -9,9 +9,13 @@
  * members as their events stream in.
  */
 import { type SubagentGroup } from "./subagent-view.js";
+import type { BackgroundTaskInfo } from "../tasks/manager.js";
 export type { SubagentGroup };
 export interface SubagentInspectorProps {
     groups: SubagentGroup[];
     onCancel: () => void;
+    /** Background tasks of the bound session (design §2.5). */
+    tasks?: BackgroundTaskInfo[];
+    onKillTask?: (taskId: string) => void;
 }
-export declare function SubagentInspector({ groups, onCancel }: SubagentInspectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function SubagentInspector({ groups, onCancel, tasks, onKillTask }: SubagentInspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/tui-ink/subagent-inspector.js

@@ -16,7 +16,7 @@ import { useTheme } from "./theme.js";
 import { padVisual, truncateVisual } from "../text-display.js";
 import { latestSubagentNote, subagentDescriptor, subagentLabel, subagentStatusColor, subagentSummary, } from "./subagent-view.js";
 const STATUS_FILTERS = [null, "running", "queued", "completed", "failed"];
-export function SubagentInspector({ groups, onCancel }) {
+export function SubagentInspector({ groups, onCancel, tasks = [], onKillTask }) {
     const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
@@ -28,9 +28,13 @@ export function SubagentInspector({ groups, onCancel }) {
     const [filterIdx, setFilterIdx] = useState(0);
     const statusFilter = STATUS_FILTERS[filterIdx];
     const allMembers = useMemo(() => groups.flatMap((g) => g.members), [groups]);
-    // Flat row list: a header per multi-member group, then its (filtered) members.
+    // Flat row list: background tasks first (design §2.5), then a header per
+    // multi-member group and its (filtered) members.
     const rows = useMemo(() => {
         const out = [];
+        for (const task of tasks) {
+            out.push({ type: "task", task, key: task.id });
+        }
         for (const group of groups) {
             const members = statusFilter
                 ? group.members.filter((m) => (m.status ?? "running") === statusFilter)
@@ -44,12 +48,13 @@ export function SubagentInspector({ groups, onCancel }) {
             });
         }
         return out;
-    }, [groups, statusFilter]);
-    const memberRowIndices = useMemo(() => rows.map((row, i) => (row.type === "member" ? i : -1)).filter((i) => i >= 0), [rows]);
+    }, [groups, statusFilter, tasks]);
+    const memberRowIndices = useMemo(() => rows.map((row, i) => (row.type === "member" || row.type === "task" ? i : -1)).filter((i) => i >= 0), [rows]);
     const clampedIdx = memberRowIndices.length === 0 ? 0 : Math.min(selectedIdx, memberRowIndices.length - 1);
     const selectedRowIndex = memberRowIndices[clampedIdx] ?? -1;
     const selectedRow = rows[selectedRowIndex];
     const selectedMember = selectedRow?.type === "member" ? selectedRow.member : undefined;
+    const selectedTask = selectedRow?.type === "task" ? selectedRow.task : undefined;
     useInput((input, key) => {
         if (isKeyReleaseEvent(key))
             return;
@@ -91,9 +96,13 @@ export function SubagentInspector({ groups, onCancel }) {
             setView("detail");
             return;
         }
+        if (input === "x" && selectedTask && selectedTask.status === "running") {
+            onKillTask?.(selectedTask.id);
+            return;
+        }
     });
-    if (groups.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Subagents" }), _jsx(Text, { color: theme.muted, children: "No subagents have been spawned yet. Esc to close." })] }));
+    if (groups.length === 0 && tasks.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Subagents & tasks" }), _jsx(Text, { color: theme.muted, children: "No subagents or background tasks yet. Esc to close." })] }));
     }
     if (view === "detail" && selectedMember) {
         return (_jsx(SubagentDetail, { member: selectedMember, group: selectedRow?.type === "member" ? selectedRow.group : undefined, scroll: detailScroll, maxVisible: maxVisible, termWidth: termWidth }));
@@ -103,8 +112,15 @@ export function SubagentInspector({ groups, onCancel }) {
     const visible = rows.slice(start, start + maxVisible);
     const labelWidth = 12;
     const descriptorWidth = Math.max(20, Math.min(46, termWidth - 48));
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: "Subagents \u00B7 working traces" }), _jsxs(Text, { color: theme.muted, children: [allMembers.length, " member", allMembers.length === 1 ? "" : "s", " \u00B7 ", subagentSummary(allMembers), statusFilter ? `  ·  filter: ${statusFilter}` : ""] }), _jsx(Text, { color: theme.muted, children: "\u2191/\u2193 select \u00B7 Enter/\u2192 open trace \u00B7 f filter status \u00B7 Esc close" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [rows.length === 0 && (_jsx(Text, { color: theme.muted, children: "No members match the current filter." })), visible.map((row, i) => {
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsx(Text, { bold: true, color: theme.accent, children: tasks.length > 0 ? "Subagents & tasks · working traces" : "Subagents · working traces" }), _jsxs(Text, { color: theme.muted, children: [allMembers.length, " member", allMembers.length === 1 ? "" : "s", " \u00B7 ", subagentSummary(allMembers), tasks.length > 0 ? `  ·  ${tasks.length} task${tasks.length === 1 ? "" : "s"}` : "", statusFilter ? `  ·  filter: ${statusFilter}` : ""] }), _jsxs(Text, { color: theme.muted, children: ["\u2191/\u2193 select \u00B7 Enter/\u2192 open trace", tasks.length > 0 ? " · x kill task" : "", " \u00B7 f filter status \u00B7 Esc close"] }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [rows.length === 0 && (_jsx(Text, { color: theme.muted, children: "No members match the current filter." })), visible.map((row, i) => {
                         const actualIndex = start + i;
+                        if (row.type === "task") {
+                            const task = row.task;
+                            const isSelected = actualIndex === selectedRowIndex;
+                            const elapsed = Math.max(0, Math.round(((task.endedAt ?? Date.now()) - task.startedAt) / 1000));
+                            const statusColor = task.status === "running" ? theme.warning : task.status === "completed" ? theme.success : theme.error;
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? theme.accent : undefined, children: isSelected ? "> " : "  " }), _jsx(Text, { color: statusColor, children: padVisual(task.id, labelWidth) }), _jsxs(Text, { color: theme.traceAction, children: [" ", padVisual(truncateVisual(task.description || task.command, descriptorWidth), descriptorWidth)] }), _jsxs(Text, { color: statusColor, children: [" ", padVisual(task.status, 9)] }), _jsxs(Text, { color: theme.traceDetail, children: [" ", elapsed, "s", task.exitCode != null ? ` · exit ${task.exitCode}` : ""] })] }, row.key));
+                        }
                         if (row.type === "header") {
                             return (_jsx(Box, { marginTop: i === 0 ? 0 : 1, children: _jsxs(Text, { bold: true, color: theme.muted, children: ["\u25A6 ", row.group.kind, " \u00B7 ", truncateVisual(row.group.label, termWidth - 18), " (", row.group.members.length, ")"] }) }, `h-${actualIndex}`));
                         }

package/dist/tui-ink/welcome.js

@@ -32,6 +32,10 @@ function GradientText({ text, from, to }) {
 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));
+    // The model row here refreshes live only while the banner is still in the
+    // dynamic region (empty transcript). Once the first settled row commits it
+    // into <Static> scrollback it freezes; from then on the accent-colored
+    // "Model switched" transcript notices carry model changes.
     const modelLine = formatModelLine({
         providerId,
         modelId,

package/package.json

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