@bubblebrain-ai/bubble 0.0.8 → 0.0.9

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Box, Static, Text } from "ink";
-import { theme } from "./theme.js";
+import { useTheme } from "./theme.js";
 import { highlightCode, inferLang } from "./code-highlight.js";
 import { MarkdownContent } from "./markdown.js";
 import { buildTraceGroups, formatElapsed, formatTracePath, traceGroupLabel } from "./trace-groups.js";
 import { EDIT_COLLAPSED_DIFF_LINES, formatEditSuccessSummary, getEditDiffDetails } from "./edit-diff.js";
+import { formatSubagentRoute } from "../agent/subagent-route-format.js";
 export function MessageList({ messages, streamingContent, streamingReasoning, streamingTools, streamingParts, terminalColumns, verboseTrace, pendingApproval, nowTick, welcomeBanner, }) {
     const hasStreaming = !!(streamingContent ||
         streamingReasoning ||
@@ -39,6 +40,7 @@ export function MessageList({ messages, streamingContent, streamingReasoning, st
                 } }), hasStreaming && (_jsx(StreamingMessage, { content: streamingContent, reasoning: streamingReasoning, tools: streamingTools, parts: streamingParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: pendingApproval, nowTick: nowTick }))] }));
 }
 function MessageItem({ message, terminalColumns, verboseTrace, showExpandHint, nowTick, }) {
+    const theme = useTheme();
     if (message.role === "user") {
         return _jsx(UserMessageBlock, { content: message.content, terminalColumns: terminalColumns });
     }
@@ -72,6 +74,7 @@ function MessageParts({ parts, terminalColumns, verboseTrace, pendingApproval, s
         }) }));
 }
 function TimelineText({ content, compactTop, terminalColumns, }) {
+    const theme = useTheme();
     if (!content.trim())
         return null;
     // marginLeft (2) + "⛬  " glyph (3 visual cells) = 5 cells consumed by the
@@ -115,6 +118,7 @@ function TraceGroupList({ toolCalls, terminalColumns, pendingApproval, nowTick,
     return (_jsxs(Box, { flexDirection: "column", children: [activeGroup && (_jsx(TraceActivityLine, { group: activeGroup, pendingApproval: pendingApproval, nowTick: nowTick, terminalColumns: terminalColumns })), groups.map((group, idx) => (_jsx(TraceGroupBlock, { group: group, terminalColumns: terminalColumns, pendingApproval: pendingApproval, compactTop: idx === 0 && compactTop, nowTick: nowTick }, group.raw.map((tool) => tool.id).join(":"))))] }));
 }
 function TraceActivityLine({ group, pendingApproval, nowTick, terminalColumns, }) {
+    const theme = useTheme();
     const waiting = isTraceGroupWaitingForApproval(group, pendingApproval);
     const elapsed = formatElapsed(group.startedAt, nowTick);
     const labelWidth = Math.max(20, terminalColumns - 26);
@@ -122,34 +126,39 @@ function TraceActivityLine({ group, pendingApproval, nowTick, terminalColumns, }
     return (_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { color: waiting ? theme.warning : theme.tracePending, children: "\u25CF " }), _jsxs(Text, { color: theme.traceDetail, children: [waiting ? "Waiting for approval" : "Working on", " "] }), _jsx(Text, { color: theme.traceAction, children: label }), elapsed && _jsxs(Text, { color: theme.traceDetail, children: [" \u00B7 ", elapsed] })] }));
 }
 function TraceGroupBlock({ group, terminalColumns, pendingApproval, compactTop, nowTick, }) {
+    const theme = useTheme();
     const waiting = isTraceGroupWaitingForApproval(group, pendingApproval);
-    const status = traceGroupStatus(group, waiting, nowTick);
+    const status = traceGroupStatus(group, waiting, theme, nowTick);
     const editTool = group.kind === "edit" && group.raw.length === 1 ? group.raw[0] : undefined;
     const editDetails = editTool && !group.pending && !group.hasError ? getEditDiffDetails(editTool) : null;
     if (editTool && editDetails) {
         return (_jsx(EditTraceBlock, { tool: editTool, details: editDetails, terminalColumns: terminalColumns, compactTop: compactTop, status: status }));
     }
-    const titleColor = group.hasError ? theme.error : theme.traceAction;
-    const detailColor = group.hasError ? theme.error : theme.traceDetail;
+    const allErrored = group.hasError && group.errorCount >= group.raw.length && !group.pending;
+    const titleColor = allErrored ? theme.error : theme.traceAction;
+    const detailColor = allErrored ? theme.error : theme.traceDetail;
     const commandWidth = Math.max(14, terminalColumns - group.title.length - 16);
     const detailWidth = Math.max(20, terminalColumns - 8);
     const detailLines = group.previewLines.length > 0 ? group.previewLines : group.items;
-    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: titleColor, children: group.title }), group.command ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: theme.traceCommand, children: truncateVisual(group.command, commandWidth) })] })) : group.count !== undefined && group.noun ? (_jsxs(Text, { color: theme.traceCount, children: [" ", group.count, " ", group.noun] })) : null, status && _jsxs(Text, { color: status.color, children: [" ", status.text] })] }), detailLines.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: detailLines.map((line, index) => (_jsxs(Box, { marginLeft: index === 0 ? 0 : 2, children: [index === 0 && _jsx(Text, { color: theme.traceDetail, children: "\u21B3 " }), _jsx(Text, { color: detailColor, children: truncateVisual(line, detailWidth - (index === 0 ? 2 : 0)) })] }, index))) })), group.omitted > 0 && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: theme.traceDetail, children: ["... ", group.omitted, " more, Ctrl+O to view"] }) }))] }));
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: titleColor, children: group.title }), group.command ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: theme.traceCommand, children: truncateVisual(group.command, commandWidth) })] })) : group.count !== undefined && group.noun ? (_jsxs(Text, { color: theme.traceCount, children: [" ", group.count, " ", group.noun] })) : null, status && _jsxs(Text, { color: status.color, children: [" ", status.text] })] }), detailLines.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: detailLines.map((line, index) => (_jsxs(Box, { marginLeft: index === 0 ? 0 : 2, children: [index === 0 && _jsx(Text, { color: theme.traceDetail, children: "\u21B3 " }), _jsx(Text, { color: detailColor, children: truncateVisual(line, detailWidth - (index === 0 ? 2 : 0)) })] }, index))) })), group.errorLines.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: group.errorLines.map((line, index) => (_jsxs(Box, { marginLeft: index === 0 ? 0 : 2, children: [index === 0 && _jsx(Text, { color: theme.traceDetail, children: "\u21B3 " }), _jsx(Text, { color: theme.error, children: truncateVisual(line, detailWidth - (index === 0 ? 2 : 0)) })] }, `error-${index}`))) })), group.omitted > 0 && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: theme.traceDetail, children: ["... ", group.omitted, " more, Ctrl+O to view"] }) }))] }));
 }
 function EditTraceBlock({ tool, details, terminalColumns, compactTop, status, }) {
+    const theme = useTheme();
     const path = formatTracePath(details.path ?? tool.args.path ?? "");
     const pathWidth = Math.max(14, terminalColumns - 12);
     return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.traceAction, children: "Edit" }), path && (_jsxs(_Fragment, { children: [_jsx(Text, { children: " " }), _jsx(Text, { color: theme.traceCommand, children: truncateVisual(path, pathWidth) })] })), status && _jsxs(Text, { color: status.color, children: [" ", status.text] })] }), _jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { color: theme.traceDetail, children: "\u23BF  " }), _jsx(Text, { color: theme.success, children: formatEditSuccessSummary(details) })] }), _jsx(DiffBlock, { diff: details.diff, terminalColumns: terminalColumns, maxLines: EDIT_COLLAPSED_DIFF_LINES, verbose: false, showExpandHint: true })] }));
 }
-function traceGroupStatus(group, waitingApproval, nowTick) {
+function traceGroupStatus(group, waitingApproval, theme, nowTick) {
     if (waitingApproval)
         return { text: "waiting for approval", color: theme.warning };
     if (group.pending) {
         const elapsed = formatElapsed(group.startedAt, nowTick);
         return { text: elapsed ? `running · ${elapsed}` : "running", color: theme.tracePending };
     }
-    if (group.hasError)
-        return { text: "error", color: theme.error };
+    if (group.hasError) {
+        const count = group.errorCount || 1;
+        return { text: count === 1 ? "1 error" : `${count} errors`, color: theme.error };
+    }
     return null;
 }
 function findActiveTraceGroup(groups, pendingApproval) {
@@ -173,16 +182,18 @@ function approvalMatchesTool(hint, tc) {
     return !hint.path || hint.path === tc.args.path;
 }
 function ReasoningTraceBlock({ reasoning }) {
+    const theme = useTheme();
     const lines = React.useMemo(() => reasoning.split("\n").filter((l) => l.trim() !== ""), [reasoning]);
     return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginBottom: 1, children: [_jsxs(Text, { color: theme.thinkingDim, dimColor: true, children: ["\u273B Reasoning trace", lines.length > 0 ? ` · ${lines.length} line${lines.length === 1 ? "" : "s"}` : ""] }), lines.map((line, i) => (_jsx(Text, { color: theme.thinkingDim, dimColor: true, italic: true, children: line }, i)))] }));
 }
 function UserMessageBlock({ content, terminalColumns }) {
-    const horizontalRoom = Math.max(20, terminalColumns - 4);
-    const maxBubbleTextWidth = Math.max(1, horizontalRoom - 4);
+    const theme = useTheme();
+    // Rail (▌ + space) takes 2 cols; reserve 2 cols inside the fill for left/right gutters.
+    const horizontalRoom = Math.max(20, terminalColumns - 2);
+    const bubbleTextWidth = Math.max(1, horizontalRoom - 2);
     const wrappedLines = content
         .split("\n")
-        .flatMap((line) => wrapByVisualWidth(line, maxBubbleTextWidth));
-    const bubbleTextWidth = Math.min(maxBubbleTextWidth, Math.max(8, ...wrappedLines.map((line) => visualWidth(line))));
+        .flatMap((line) => wrapByVisualWidth(line, bubbleTextWidth));
     return (_jsx(Box, { flexDirection: "column", children: wrappedLines.map((line, index) => (_jsxs(Box, { children: [_jsx(Text, { color: theme.userRail, children: "\u258C " }), _jsx(Text, { backgroundColor: theme.userMessageBg, color: theme.userMessageText, children: ` ${padVisual(line || " ", bubbleTextWidth)} ` })] }, index))) }));
 }
 const TOOL_DISPLAY_NAMES = {
@@ -276,9 +287,72 @@ function summarizeToolResult(tc) {
             return lineCount > 0 ? p(lineCount, "line", "lines") : "Done";
     }
 }
+function subagentsFrom(toolCall) {
+    const raw = toolCall.metadata?.subagents;
+    if (!Array.isArray(raw))
+        return [];
+    return raw.filter((item) => typeof item === "object" && item !== null);
+}
+function latestSubagentNote(subagent) {
+    const note = subagent.error
+        || subagent.toolNotes?.filter(Boolean).at(-1)
+        || subagent.summary
+        || subagent.task
+        || "";
+    return note.replace(/\r\n/g, "\n").split("\n").map((line) => line.trim()).find(Boolean) ?? "";
+}
+function subagentLabel(subagent) {
+    return subagent.nickname ?? subagent.agentName ?? "subagent";
+}
+function subagentRole(subagent) {
+    return [subagent.agentName, subagent.category ? `/${subagent.category}` : ""].join("") || "default";
+}
+function subagentDescriptor(subagent, includeThinking = false) {
+    const route = formatSubagentRoute(subagent.route, { includeThinking });
+    const role = subagentRole(subagent);
+    return route ? `${role} @ ${route}` : role;
+}
+function subagentStatusColor(status, theme) {
+    if (status === "completed")
+        return theme.success;
+    if (status === "failed" || status === "blocked" || status === "cancelled")
+        return theme.error;
+    if (status === "queued")
+        return theme.muted;
+    return theme.toolPending;
+}
+function subagentSummary(subagents) {
+    if (subagents.length === 0)
+        return "no subagents";
+    const counts = new Map();
+    for (const subagent of subagents) {
+        const status = subagent.status ?? "running";
+        counts.set(status, (counts.get(status) ?? 0) + 1);
+    }
+    const order = ["running", "queued", "completed", "blocked", "failed", "cancelled"];
+    return order
+        .filter((status) => counts.has(status))
+        .map((status) => `${counts.get(status)} ${status}`)
+        .join("  ");
+}
+function sortSubagents(subagents) {
+    const rank = {
+        running: 0,
+        blocked: 1,
+        failed: 2,
+        queued: 3,
+        cancelled: 4,
+        completed: 5,
+    };
+    return [...subagents].sort((a, b) => (rank[a.status ?? "running"] ?? 9) - (rank[b.status ?? "running"] ?? 9));
+}
 const COLLAPSED_PREVIEW_LINES = 10;
 const EXPANDED_PREVIEW_LINES = 50;
 function ToolCallDisplay({ toolCall, isStreaming, verbose, terminalColumns, showExpandHint = false, waitingApproval = false, compactTop = false, nowTick, }) {
+    const theme = useTheme();
+    if (toolCall.metadata?.kind === "subagent") {
+        return (_jsx(SubagentToolDisplay, { toolCall: toolCall, verbose: verbose, terminalColumns: terminalColumns, compactTop: compactTop }));
+    }
     // Show raw output immediately, then upgrade to highlighted ANSI when shiki
     // resolves. Avoids a noticeable "flash" where the line jumps from empty/raw
     // to colorized after a tick.
@@ -357,7 +431,25 @@ function ToolCallDisplay({ toolCall, isStreaming, verbose, terminalColumns, show
     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 }))] }));
 }
-function renderTruncationHint(remaining, verbose, 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 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);
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: compactTop ? 0 : 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: bulletColor, children: "\u21B3 " }), _jsx(Text, { bold: true, color: theme.toolName, children: "Subagents" }), subagents.length > 0 && _jsxs(Text, { color: theme.muted, children: [" ", subagentSummary(subagents)] })] }), rows.length > 0 && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [rows.map((subagent, index) => {
+                        const status = subagent.status ?? "running";
+                        const label = padVisual(truncateVisual(subagentLabel(subagent), 10), 10);
+                        const descriptorWidth = verbose ? 42 : 32;
+                        const descriptor = padVisual(truncateVisual(subagentDescriptor(subagent), descriptorWidth), descriptorWidth);
+                        const note = truncateVisual(latestSubagentNote(subagent), Math.max(12, detailWidth - 16 - descriptorWidth - 10));
+                        return (_jsxs(Box, { children: [_jsx(Text, { color: subagentStatusColor(status, theme), children: label }), _jsxs(Text, { color: theme.traceAction, children: [" ", descriptor] }), _jsxs(Text, { color: subagentStatusColor(status, theme), children: [" ", padVisual(status, 9)] }), note && _jsxs(Text, { color: subagent.error ? theme.error : theme.traceDetail, children: [" ", note] })] }, subagent.subAgentId ?? `${subagentLabel(subagent)}-${index}`));
+                    }), omitted > 0 && (_jsxs(Text, { color: theme.muted, children: ["... ", omitted, " more, Ctrl+O to view"] }))] })), subagents.length === 0 && toolCall.result && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: hasError ? theme.error : theme.muted, children: summarizeToolResult(toolCall) }) }))] }));
+}
+function TruncationHint({ remaining, verbose, showExpandHint, }) {
+    const theme = useTheme();
     if (remaining <= 0)
         return null;
     const noun = `line${remaining === 1 ? "" : "s"}`;
@@ -367,19 +459,21 @@ function renderTruncationHint(remaining, verbose, showExpandHint) {
     return (_jsxs(Text, { color: theme.muted, children: ["\u2026 +", remaining, " ", noun, showExpandHint ? " (ctrl+o to expand)" : ""] }));
 }
 function OutputPreview({ text, maxLines, verbose, showExpandHint, }) {
+    const theme = useTheme();
     const lines = text.split("\n");
     const shown = lines.slice(0, maxLines);
     const remaining = Math.max(0, lines.length - maxLines);
     if (shown.length === 0 || (shown.length === 1 && shown[0] === ""))
         return null;
-    return (_jsxs(Box, { flexDirection: "column", marginLeft: 4, children: [shown.map((line, i) => (_jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "\u2502 " }), _jsx(Text, { children: line })] }, i))), renderTruncationHint(remaining, verbose, showExpandHint)] }));
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 4, children: [shown.map((line, i) => (_jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "\u2502 " }), _jsx(Text, { children: line })] }, i))), _jsx(TruncationHint, { remaining: remaining, verbose: verbose, showExpandHint: showExpandHint })] }));
 }
 function WritePreview({ content, maxLines, verbose, showExpandHint, }) {
+    const theme = useTheme();
     const lines = content.split("\n");
     const shown = lines.slice(0, maxLines);
     const remaining = Math.max(0, lines.length - maxLines);
     const numWidth = Math.max(2, String(lines.length).length);
-    return (_jsxs(Box, { flexDirection: "column", marginLeft: 4, children: [shown.map((line, i) => (_jsxs(Box, { children: [_jsxs(Text, { color: theme.muted, children: [String(i + 1).padStart(numWidth, " "), "  "] }), _jsx(Text, { children: line })] }, i))), renderTruncationHint(remaining, verbose, showExpandHint)] }));
+    return (_jsxs(Box, { flexDirection: "column", marginLeft: 4, children: [shown.map((line, i) => (_jsxs(Box, { children: [_jsxs(Text, { color: theme.muted, children: [String(i + 1).padStart(numWidth, " "), "  "] }), _jsx(Text, { children: line })] }, i))), _jsx(TruncationHint, { remaining: remaining, verbose: verbose, showExpandHint: showExpandHint })] }));
 }
 function parseDiffLines(body) {
     const result = [];
@@ -420,6 +514,7 @@ function parseDiffLines(body) {
     return result;
 }
 function DiffBlock({ diff, terminalColumns, maxLines, verbose, showExpandHint, }) {
+    const theme = useTheme();
     const lines = parseDiffLines(diff);
     const shown = lines.slice(0, maxLines);
     const remaining = Math.max(0, lines.length - maxLines);
@@ -446,13 +541,14 @@ function DiffBlock({ diff, terminalColumns, maxLines, verbose, showExpandHint, }
                 const padded = padVisual(truncated, contentWidth);
                 const lineText = ` ${numStr} ${sign} ${padded}`;
                 return (_jsx(Text, { backgroundColor: bg, color: theme.userMessageText, children: lineText }, i));
-            }), renderTruncationHint(remaining, verbose, showExpandHint)] }));
+            }), _jsx(TruncationHint, { remaining: remaining, verbose: verbose, showExpandHint: showExpandHint })] }));
 }
 /**
  * "Edited 3 files (+42 -8) — a.ts, b.ts" digest below the assistant turn.
  * Surfaces only when there is at least one file-mutating tool call.
  */
 function TurnDigest({ toolCalls }) {
+    const theme = useTheme();
     const digest = React.useMemo(() => buildDigest(toolCalls), [toolCalls]);
     if (!digest)
         return null;

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { Box, Text, useInput, usePaste, useStdout } from "ink";
-import { theme } from "./theme.js";
+import { useTheme } from "./theme.js";
 import { encodeModel, decodeModel, displayModel, isUserVisibleProvider } from "../provider-registry.js";
 import { listBuiltinModels } from "../model-catalog.js";
 export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
+    const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
     const maxVisible = Math.max(5, termHeight - 10);
@@ -122,6 +123,7 @@ export function ModelPicker({ registry, current, recent, onSelect, onCancel }) {
                     })] })] }));
 }
 function SearchField({ query, placeholder }) {
+    const theme = useTheme();
     const [cursorVisible, setCursorVisible] = useState(true);
     useEffect(() => {
         const t = setInterval(() => setCursorVisible((v) => !v), 500);
@@ -189,6 +191,7 @@ function preferredModelIndex(options, current) {
     return idx >= 0 ? idx : 0;
 }
 export function ProviderPicker({ providers, current, onSelect, onCancel, title }) {
+    const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
     const maxVisible = Math.max(5, termHeight - 8);
@@ -240,6 +243,7 @@ export function ProviderPicker({ providers, current, onSelect, onCancel, title }
                 }) })] }));
 }
 export function KeyPicker({ providerName, onSubmit, onCancel }) {
+    const theme = useTheme();
     const [value, setValue] = useState("");
     useInput((input, key) => {
         if (key.escape) {
@@ -270,6 +274,7 @@ export function KeyPicker({ providerName, onSubmit, onCancel }) {
     return (_jsxs(Box, { flexDirection: "column", marginY: 1, paddingX: 1, borderStyle: "round", borderColor: theme.borderActive, children: [_jsxs(Text, { bold: true, color: theme.accent, children: ["Enter API Key for ", providerName] }), _jsx(Text, { color: theme.muted, children: "Paste or type the key \u00B7 Enter to submit \u00B7 Esc to cancel" }), _jsx(SearchField, { query: value.replace(/./g, "*"), placeholder: "Paste your key here..." })] }));
 }
 export function SkillPicker({ skills, onSelect, onCancel }) {
+    const theme = useTheme();
     const { stdout } = useStdout();
     const termHeight = stdout?.rows || 24;
     const maxVisible = Math.max(5, termHeight - 8);

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Text, useInput } from "ink";
-import { theme } from "./theme.js";
+import { useTheme } from "./theme.js";
 import { MarkdownContent } from "./markdown.js";
 export function PlanConfirm({ initialPlan, onApprove, onReject }) {
+    const theme = useTheme();
     const [stage, setStage] = useState("view");
     const [draft, setDraft] = useState(initialPlan);
     const [cursor, setCursor] = useState(initialPlan.length);

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

@@ -1,8 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { Box, Text, useInput } from "ink";
-import { theme } from "./theme.js";
+import { useTheme } from "./theme.js";
 export function QuestionDialog({ request, onSubmit, onCancel }) {
+    const theme = useTheme();
     const [index, setIndex] = useState(0);
     const [selected, setSelected] = useState(0);
     const [custom, setCustom] = useState("");

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

@@ -11,6 +11,7 @@ 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";
+import type { ResolvedTheme, ThemeMode } from "./theme.js";
 export interface RunTuiOptions {
     sessionManager?: SessionManager;
     createProvider?: (providerId: string, apiKey: string, baseURL: string) => Provider;
@@ -23,7 +24,10 @@ export interface RunTuiOptions {
     settingsManager?: SettingsManager;
     lspService?: LspService;
     mcpManager?: McpManager;
-    theme?: Record<string, string>;
+    themeMode?: ThemeMode;
+    themeOverrides?: Record<string, string>;
+    detectedTheme?: ResolvedTheme;
+    onThemeModeChange?: (mode: ThemeMode) => void;
     flushMemory?: () => Promise<void>;
     runMemoryCompaction?: () => Promise<string>;
     runMemorySummary?: (scope?: MemoryScope) => Promise<string>;

package/dist/tui-ink/run.js

@@ -1,13 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "ink";
+import chalk from "chalk";
 import { App } from "./app.js";
+import { warmHighlighter } from "./code-highlight.js";
 export async function runTui(agent, args, options = {}) {
-    const instance = render(_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, 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, flushMemory: options.flushMemory, runMemoryCompaction: options.runMemoryCompaction, runMemorySummary: options.runMemorySummary, runMemoryRefresh: options.runMemoryRefresh, bypassEnabled: options.bypassEnabled, onExit: () => {
+    // Kick off shiki load before the first code block reaches <Static>. Fire and
+    // forget — CodeBlock's lazy init falls back to raw lines if this isn't ready
+    // yet, so callers don't need to await it.
+    warmHighlighter();
+    let exitSummary;
+    const instance = render(_jsx(App, { agent: agent, args: args, sessionManager: options.sessionManager, 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, 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, onExit: (summary) => {
             // The app already called useApp().exit() inside requestExit, which
             // triggers Ink's own unmount + TTY restore. waitUntilExit() below is
             // the canonical signal that we're done — we deliberately do *not*
             // call instance.unmount() again here to avoid double-teardown
-            // warnings on React 19.
+            // warnings on React 19. We capture the summary and render it after
+            // teardown so it lands in the real shell scrollback (Claude-Code style).
+            exitSummary = summary;
         } }), {
         kittyKeyboard: {
             mode: "enabled",
@@ -21,5 +30,24 @@ export async function runTui(agent, args, options = {}) {
     // the cursor to column 0 before handing control back to the shell.
     if (process.stdout.isTTY) {
         process.stdout.write("\n");
+        if (exitSummary) {
+            process.stdout.write(formatExitSummary(exitSummary) + "\n");
+        }
     }
 }
+function formatExitSummary(summary) {
+    const label = "Total duration (wall):";
+    return chalk.dim(`${label} ${formatWallMs(summary.wallMs)}`);
+}
+function formatWallMs(ms) {
+    const totalSeconds = Math.max(0, Math.round(ms / 1000));
+    if (totalSeconds < 60)
+        return `${totalSeconds}s`;
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    if (minutes < 60)
+        return `${minutes}m ${seconds}s`;
+    const hours = Math.floor(minutes / 60);
+    const minutesRest = minutes % 60;
+    return `${hours}h ${minutesRest}m ${seconds}s`;
+}

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

@@ -1,37 +1,66 @@
 /**
- * Lightweight color theme for the TUI.
+ * Color themes for the TUI.
+ *
+ * Two base palettes are shipped: `darkTheme` for dark terminal backgrounds and
+ * `lightTheme` for light ones. The shape is identical so consumers depend on
+ * `Theme` rather than either palette directly. Active palette is provided
+ * through `ThemeContext` so components re-render automatically when the
+ * user switches via `/theme` at runtime.
  */
-export declare const theme: {
-    readonly user: "green";
-    readonly agent: "blue";
-    readonly error: "red";
-    readonly warning: "yellow";
-    readonly success: "green";
-    readonly accent: "cyan";
-    readonly border: "gray";
-    readonly borderActive: "cyan";
-    readonly inputBorder: "#8A7FC6";
-    readonly muted: "gray";
-    readonly dim: "gray";
-    readonly thinking: "magenta";
-    readonly thinkingDim: "gray";
-    readonly toolName: "cyan";
-    readonly toolResult: "gray";
-    readonly toolError: "red";
-    readonly toolPending: "yellow";
-    readonly code: "yellow";
-    readonly traceAction: "#E89A6B";
-    readonly traceCount: "#c9c1bd";
-    readonly traceDetail: "gray";
-    readonly traceCommand: "#59BCE8";
-    readonly tracePending: "yellow";
-    readonly userMessageBorder: "#8A7FC6";
-    readonly userMessageBg: "#2a2a34";
-    readonly userMessageText: "#f3f3f7";
-    readonly userRail: "#8A7FC6";
-    readonly diffAdd: "#1a3d1a";
-    readonly diffRemove: "#3d1a1a";
-    readonly diffAddFg: "#9CDCFE";
-    readonly diffRemoveFg: "#F48771";
-};
-export type ThemeColor = (typeof theme)[keyof typeof theme];
+export type ResolvedTheme = "light" | "dark";
+export type ThemeMode = "auto" | ResolvedTheme;
+export interface Theme {
+    user: string;
+    agent: string;
+    error: string;
+    warning: string;
+    success: string;
+    accent: string;
+    border: string;
+    borderActive: string;
+    inputBorder: string;
+    inputBorderDisabled: string;
+    inputBg: string;
+    inputBgDisabled: string;
+    inputText: string;
+    inputPlaceholder: string;
+    muted: string;
+    dim: string;
+    thinking: string;
+    thinkingDim: string;
+    toolName: string;
+    toolResult: string;
+    toolError: string;
+    toolPending: string;
+    code: string;
+    traceAction: string;
+    traceCount: string;
+    traceDetail: string;
+    traceCommand: string;
+    tracePending: string;
+    userMessageBorder: string;
+    userMessageBg: string;
+    userMessageText: string;
+    userRail: string;
+    diffAdd: string;
+    diffRemove: string;
+    diffAddFg: string;
+    diffRemoveFg: string;
+}
+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).
+ */
+export declare const lightTheme: Theme;
+export declare const ThemeProvider: import("react").Provider<Theme>;
+export declare function useTheme(): Theme;
+/** Build the active palette given a resolved mode and optional overrides. */
+export declare function paletteFor(mode: ResolvedTheme, overrides?: Record<string, string>): Theme;

package/dist/tui-ink/theme.js

@@ -1,21 +1,30 @@
 /**
- * Lightweight color theme for the TUI.
+ * Color themes for the TUI.
+ *
+ * Two base palettes are shipped: `darkTheme` for dark terminal backgrounds and
+ * `lightTheme` for light ones. The shape is identical so consumers depend on
+ * `Theme` rather than either palette directly. Active palette is provided
+ * through `ThemeContext` so components re-render automatically when the
+ * user switches via `/theme` at runtime.
  */
-export const theme = {
-    // Actors
+import { createContext, useContext } from "react";
+export const darkTheme = {
     user: "green",
     agent: "blue",
     error: "red",
     warning: "yellow",
     success: "green",
-    // UI chrome
     accent: "cyan",
     border: "gray",
     borderActive: "cyan",
     inputBorder: "#8A7FC6",
+    inputBorderDisabled: "#4a4754",
+    inputBg: "#1c1c24",
+    inputBgDisabled: "#161620",
+    inputText: "#f3f3f7",
+    inputPlaceholder: "#6c6a78",
     muted: "gray",
     dim: "gray",
-    // Content
     thinking: "magenta",
     thinkingDim: "gray",
     toolName: "cyan",
@@ -28,15 +37,79 @@ export const theme = {
     traceDetail: "gray",
     traceCommand: "#59BCE8",
     tracePending: "yellow",
-    // Message surfaces — user input uses a subtle fill plus a left rail so it is
-    // visually separate from assistant/tool trace output without becoming noisy.
     userMessageBorder: "#8A7FC6",
     userMessageBg: "#2a2a34",
     userMessageText: "#f3f3f7",
     userRail: "#8A7FC6",
-    // Diff
     diffAdd: "#1a3d1a",
     diffRemove: "#3d1a1a",
     diffAddFg: "#9CDCFE",
     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).
+ */
+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: "#f5f5fa",
+    inputBgDisabled: "#ebebf2",
+    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",
+};
+const ThemeContext = createContext(darkTheme);
+export const ThemeProvider = ThemeContext.Provider;
+export function useTheme() {
+    return useContext(ThemeContext);
+}
+/** Build the active palette given a resolved mode and optional overrides. */
+export function paletteFor(mode, overrides) {
+    const base = mode === "light" ? lightTheme : darkTheme;
+    if (!overrides)
+        return base;
+    const filtered = {};
+    for (const [key, value] of Object.entries(overrides)) {
+        if (typeof value === "string" && key in base) {
+            filtered[key] = value;
+        }
+    }
+    return { ...base, ...filtered };
+}