@bubblebrain-ai/bubble 0.0.8 → 0.0.9

package/dist/tools/read.js

@@ -2,9 +2,10 @@
  * Read tool - read file contents with truncation, dedup, and auto-pagination.
  */
 import { constants } from "node:fs";
-import { access, readFile, stat } from "node:fs/promises";
-import { resolve } from "node:path";
+import { access, readFile, readdir, stat } from "node:fs/promises";
+import { basename, dirname, extname, join, relative } from "node:path";
 import { isSensitivePath } from "./sensitive-paths.js";
+import { resolveToolPath } from "./path-utils.js";
 const MAX_LINES = 2500;
 const MAX_BYTES = 256 * 1024;
 const FILE_UNCHANGED_STUB = "File unchanged since last read. The earlier read tool_result in this conversation is still current — refer to that instead of re-reading. If you need a different range, call read again with explicit offset/limit; if the file has actually changed, edit or write will refresh this cache automatically.";
@@ -33,7 +34,7 @@ export function createReadTool(cwd, approval, lsp, fileState) {
             required: ["path"],
         },
         async execute(args) {
-            const filePath = resolve(cwd, args.path);
+            const filePath = resolveToolPath(cwd, args.path);
             if (isSensitivePath(filePath)) {
                 return {
                     content: `Error: Access to sensitive credential storage is blocked: ${filePath}`,
@@ -58,8 +59,11 @@ export function createReadTool(cwd, approval, lsp, fileState) {
             try {
                 await access(filePath, constants.R_OK);
             }
-            catch {
-                return { content: `Error: Cannot read file: ${filePath}`, isError: true };
+            catch (error) {
+                return {
+                    content: await readFileNotFoundMessage(filePath, cwd, error),
+                    isError: true,
+                };
             }
             const argOffset = typeof args.offset === "number" ? args.offset : undefined;
             const argLimit = typeof args.limit === "number" ? args.limit : undefined;
@@ -167,3 +171,111 @@ export function createReadTool(cwd, approval, lsp, fileState) {
         },
     };
 }
+async function readFileNotFoundMessage(filePath, cwd, error) {
+    const message = [`Error: Cannot read file: ${filePath}`];
+    const code = typeof error?.code === "string" ? error.code : undefined;
+    if (code && code !== "ENOENT" && code !== "ENOTDIR")
+        return message[0];
+    const suggestions = await suggestReadPaths(filePath, cwd);
+    if (suggestions.length === 1) {
+        message.push(`Did you mean ${suggestions[0]}?`);
+    }
+    else if (suggestions.length > 1) {
+        message.push("Did you mean one of these?");
+        message.push(...suggestions.map((suggestion) => `- ${suggestion}`));
+    }
+    return message.join("\n");
+}
+async function suggestReadPaths(filePath, cwd) {
+    const suggestions = new Set();
+    const underCwd = await suggestPathUnderCwd(filePath, cwd);
+    if (underCwd)
+        suggestions.add(underCwd);
+    for (const suggestion of await suggestSimilarFiles(filePath)) {
+        suggestions.add(suggestion);
+    }
+    return [...suggestions].slice(0, 5);
+}
+async function suggestPathUnderCwd(filePath, cwd) {
+    const parent = dirname(cwd);
+    const parentPrefix = parent.endsWith("/") ? parent : `${parent}/`;
+    if (!filePath.startsWith(parentPrefix) || filePath === cwd || filePath.startsWith(`${cwd}/`)) {
+        return undefined;
+    }
+    const candidate = join(cwd, relative(parent, filePath));
+    try {
+        const stats = await stat(candidate);
+        return stats.isFile() ? candidate : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+async function suggestSimilarFiles(filePath) {
+    const dir = dirname(filePath);
+    const target = basename(filePath);
+    let entries;
+    try {
+        entries = await readdir(dir, { withFileTypes: true });
+    }
+    catch {
+        return [];
+    }
+    return entries
+        .filter((entry) => entry.isFile() || entry.isSymbolicLink())
+        .map((entry) => {
+        const score = similarFileScore(target, entry.name);
+        return score === undefined ? undefined : { path: join(dir, entry.name), score };
+    })
+        .filter((entry) => entry !== undefined)
+        .sort((a, b) => a.score - b.score || a.path.length - b.path.length || a.path.localeCompare(b.path))
+        .map((entry) => entry.path)
+        .slice(0, 5);
+}
+function similarFileScore(target, candidate) {
+    if (candidate === target)
+        return undefined;
+    const targetExt = extname(target).toLowerCase();
+    const candidateExt = extname(candidate).toLowerCase();
+    const targetStem = basename(target, targetExt).toLowerCase();
+    const candidateStem = basename(candidate, candidateExt).toLowerCase();
+    if (!targetStem || !candidateStem)
+        return undefined;
+    if (candidateExt === targetExt &&
+        (candidateStem.startsWith(`${targetStem}_`) || candidateStem.startsWith(`${targetStem}-`))) {
+        return 0;
+    }
+    if (candidateExt === targetExt && (candidateStem.startsWith(targetStem) || targetStem.startsWith(candidateStem))) {
+        return 5;
+    }
+    if (candidateStem === targetStem) {
+        return 10;
+    }
+    if (candidateStem.includes(targetStem) || targetStem.includes(candidateStem)) {
+        return candidateExt === targetExt ? 15 : 20;
+    }
+    const distance = levenshteinDistance(targetStem, candidateStem, 3);
+    if (distance <= 2) {
+        return (candidateExt === targetExt ? 30 : 35) + distance;
+    }
+    return undefined;
+}
+function levenshteinDistance(a, b, maxDistance) {
+    if (Math.abs(a.length - b.length) > maxDistance)
+        return maxDistance + 1;
+    let previous = Array.from({ length: b.length + 1 }, (_, index) => index);
+    for (let i = 1; i <= a.length; i++) {
+        const current = [i];
+        let rowMin = current[0];
+        for (let j = 1; j <= b.length; j++) {
+            const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+            const value = Math.min(previous[j] + 1, current[j - 1] + 1, previous[j - 1] + cost);
+            current[j] = value;
+            rowMin = Math.min(rowMin, value);
+        }
+        if (rowMin > maxDistance)
+            return maxDistance + 1;
+        previous = current;
+    }
+    return previous[b.length];
+}

package/dist/tools/write.js

@@ -2,12 +2,13 @@
  * Write tool - create files or safely replace full file contents.
  */
 import { mkdir, readFile, writeFile } from "node:fs/promises";
-import { dirname, resolve } from "node:path";
+import { dirname } from "node:path";
 import { createTwoFilesPatch } from "diff";
 import { gateToolAction } from "../approval/tool-helper.js";
 import { formatDiagnosticBlocks } from "../lsp/index.js";
 import { isWithinWorkspace } from "./file-state.js";
 import { withFileMutationQueue } from "./file-mutation-queue.js";
+import { resolveToolPath } from "./path-utils.js";
 export function createWriteTool(cwd, options = {}, approval, lsp, fileState) {
     return {
         name: "write",
@@ -27,7 +28,7 @@ export function createWriteTool(cwd, options = {}, approval, lsp, fileState) {
             required: ["path", "content"],
         },
         async execute(args) {
-            const filePath = resolve(cwd, args.path);
+            const filePath = resolveToolPath(cwd, args.path);
             const overwrite = args.overwrite === true;
             if (!isWithinWorkspace(cwd, filePath)) {
                 return {

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

@@ -2,6 +2,7 @@ import { type Agent } from "../agent.js";
 import type { CliArgs } from "../cli.js";
 import type { SessionManager } from "../session.js";
 import type { PlanDecision, Provider } from "../types.js";
+import { type ResolvedTheme, type ThemeMode } from "./theme.js";
 import { ProviderRegistry } from "../provider-registry.js";
 import { SkillRegistry } from "../skills/registry.js";
 import type { ApprovalDecision, ApprovalRequest } from "../approval/types.js";
@@ -31,13 +32,21 @@ interface AppProps {
     settingsManager?: SettingsManager;
     lspService?: LspService;
     mcpManager?: McpManager;
+    themeMode?: ThemeMode;
+    themeOverrides?: Record<string, string>;
+    detectedTheme?: ResolvedTheme;
+    onThemeModeChange?: (mode: ThemeMode) => void;
     flushMemory?: () => Promise<void>;
     runMemoryCompaction?: () => Promise<string>;
     runMemorySummary?: (scope?: MemoryScope) => Promise<string>;
     runMemoryRefresh?: (scope?: MemoryScope) => Promise<string>;
     /** Whether the bypassPermissions mode is reachable via Shift+Tab cycling. */
     bypassEnabled?: boolean;
-    onExit?: () => void;
+    onExit?: (summary: ExitSummary) => void;
 }
-export declare function App({ agent, args, sessionManager, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, bypassEnabled, onExit }: AppProps): import("react/jsx-runtime").JSX.Element;
+export interface ExitSummary {
+    /** Wall-clock duration of the session, in milliseconds. */
+    wallMs: number;
+}
+export declare function App({ agent, args, sessionManager, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, themeMode: initialThemeMode, themeOverrides, detectedTheme, onThemeModeChange, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, bypassEnabled, onExit }: AppProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/tui-ink/app.js

@@ -7,7 +7,7 @@ import { UserConfig, maskKey } from "../config.js";
 import { InputBox } from "./input-box.js";
 import { MessageList } from "./message-list.js";
 import { appendTextPart, appendToolPart, compactDisplayMessages, contentFromParts, nextDisplayMessageKey, snapshotDisplayParts, toolCallsFromParts, } from "./display-history.js";
-import { theme } from "./theme.js";
+import { paletteFor, ThemeProvider, useTheme } from "./theme.js";
 import { ModelPicker, ProviderPicker, KeyPicker, SkillPicker } from "./model-picker.js";
 import { BUILTIN_PROVIDERS, ProviderRegistry, displayModel, isUserVisibleProvider } from "../provider-registry.js";
 import { buildSystemPrompt } from "../system-prompt.js";
@@ -136,6 +136,33 @@ function parsePartialArgs(buffer, previous) {
     }
     return result;
 }
+function mergeToolMetadata(current, incoming) {
+    if (!incoming)
+        return current;
+    if (current?.kind !== "subagent" || incoming.kind !== "subagent") {
+        return incoming;
+    }
+    const currentSubagents = Array.isArray(current.subagents) ? current.subagents : [];
+    const incomingSubagents = Array.isArray(incoming.subagents) ? incoming.subagents : [];
+    const byId = new Map();
+    for (const item of currentSubagents) {
+        const subAgentId = typeof item === "object" && item !== null && "subAgentId" in item
+            ? String(item.subAgentId)
+            : "";
+        byId.set(subAgentId || `current:${byId.size}`, item);
+    }
+    for (const item of incomingSubagents) {
+        const subAgentId = typeof item === "object" && item !== null && "subAgentId" in item
+            ? String(item.subAgentId)
+            : "";
+        byId.set(subAgentId || `incoming:${byId.size}`, item);
+    }
+    return {
+        ...current,
+        ...incoming,
+        subagents: [...byId.values()],
+    };
+}
 /**
  * Coerce a freshly-constructed DisplayMessage into one that carries a stable
  * `key`. Centralizes the safety net so callers don't have to remember to call
@@ -147,9 +174,25 @@ function withMessageKey(message) {
     const prefix = message.role === "user" ? "user" : message.role === "error" ? "err" : "asst";
     return { ...message, key: nextDisplayMessageKey(prefix) };
 }
-export function App({ agent, args, sessionManager, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, bypassEnabled, onExit }) {
+export function App({ agent, args, sessionManager, createProvider, registry, skillRegistry, planHandlerRef, approvalHandlerRef, questionController, bashAllowlist, settingsManager, lspService, mcpManager, themeMode: initialThemeMode, themeOverrides, detectedTheme, onThemeModeChange, flushMemory, runMemoryCompaction, runMemorySummary, runMemoryRefresh, bypassEnabled, onExit }) {
+    const [themeMode, setThemeMode] = useState(initialThemeMode ?? "auto");
+    // `detectedTheme` is captured once at startup in main.ts. We keep it in state
+    // so future re-detection (e.g. if a user runs `/theme auto` after switching
+    // their terminal) is possible without re-mounting the app. For now it never
+    // changes after first render.
+    const [autoResolved] = useState(detectedTheme ?? "dark");
+    const palette = useMemo(() => {
+        const resolved = themeMode === "auto" ? autoResolved : themeMode;
+        return paletteFor(resolved, themeOverrides);
+    }, [themeMode, autoResolved, themeOverrides]);
+    const applyThemeMode = useCallback((mode) => {
+        setThemeMode(mode);
+        onThemeModeChange?.(mode);
+    }, [onThemeModeChange]);
+    const themeResolved = themeMode === "auto" ? autoResolved : themeMode;
     const { exit } = useApp();
     const [messages, setMessages] = useState(() => compactDisplayMessages(reconstructDisplayMessages(agent.messages)));
+    const [clearEpoch, setClearEpoch] = useState(0);
     const [isRunning, setIsRunning] = useState(false);
     const [streamingContent, setStreamingContent] = useState("");
     const [streamingReasoning, setStreamingReasoning] = useState("");
@@ -167,8 +210,34 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
     const [verboseTrace, setVerboseTrace] = useState(false);
     const startedWithVisibleHistoryRef = useRef(messages.some((message) => message.syntheticKind !== "ui_summary"));
     const { columns: terminalColumns } = useTerminalSize();
+    // When the terminal width changes mid-session (e.g. the user toggles an IDE
+    // side-panel), every full-width ANSI bg run already written into scrollback
+    // by <Static> stays at the old width. The terminal then wraps those rows on
+    // the new width and leaves residual coloured stripes underneath. Ink can't
+    // reach scrollback to repaint. So on width change, we wipe screen +
+    // scrollback and bump `clearEpoch` so <Static> remounts and replays every
+    // committed message at the new width. Cost: a single flicker per resize and
+    // any pre-session shell scrollback is also cleared. Skip the initial mount.
+    const previousColumnsRef = useRef(null);
+    useEffect(() => {
+        if (previousColumnsRef.current === null) {
+            previousColumnsRef.current = terminalColumns;
+            return;
+        }
+        if (previousColumnsRef.current === terminalColumns)
+            return;
+        previousColumnsRef.current = terminalColumns;
+        process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
+        setClearEpoch((n) => n + 1);
+    }, [terminalColumns]);
     const activeAbortRef = useRef(null);
     const exitRequestedRef = useRef(false);
+    const sessionStartRef = useRef(Date.now());
+    // Set true the moment /quit is invoked so we can hide dynamic UI (composer,
+    // waiting indicator, footer) before Ink snapshots its final frame into the
+    // shell scrollback. Without this, the last visible "> " input row stays
+    // glued to the bottom of the terminal after exit.
+    const [isExiting, setIsExiting] = useState(false);
     // 1Hz tick used to refresh elapsed counters on in-progress tool rows and
     // on the WaitingIndicator. Only ticks while the agent is running so we
     // don't churn renders at idle.
@@ -194,6 +263,10 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
         if (exitRequestedRef.current)
             return;
         exitRequestedRef.current = true;
+        // Drop the composer / waiting indicator / footer from the React tree
+        // *before* we tell Ink to exit, so Ink's final log-update snapshot
+        // doesn't leave an empty "> " row behind in the shell scrollback.
+        setIsExiting(true);
         // Cancel any in-flight agent run first so its tools / network calls
         // don't keep emitting text after Ink unmounts and corrupt the
         // restored shell prompt.
@@ -207,6 +280,12 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             activeAbortRef.current = null;
         }
         void (async () => {
+            // Yield once so React can commit the `isExiting=true` render
+            // (which strips the composer/footer) before we hand control to
+            // Ink's teardown. Without this, on the no-flushMemory path the
+            // exit() below races the next React commit and Ink snapshots the
+            // pre-exit frame with the composer still visible.
+            await new Promise((resolve) => setImmediate(resolve));
             let flushError = null;
             if (flushMemory) {
                 // Bound the flush so a stuck LLM/network call cannot trap the TUI.
@@ -240,7 +319,7 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                     process.stderr.write(`warning: failed to flush memory on exit: ${message}\n`);
                 });
             }
-            onExit?.();
+            onExit?.({ wallMs: Date.now() - sessionStartRef.current });
         })();
     }, [exit, flushMemory, onExit]);
     useEffect(() => {
@@ -351,6 +430,12 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
     }, [updateDisplayMessages]);
     const clearMessages = useCallback(() => {
         setMessages([]);
+        // Ink's <Static> writes items into terminal scrollback and never removes
+        // them — emptying the React state alone leaves the old output visible.
+        // Wipe screen + scrollback (xterm \x1b[3J) and bump the epoch below so
+        // Static remounts with a fresh internal cursor.
+        process.stdout.write("\x1b[2J\x1b[3J\x1b[H");
+        setClearEpoch((n) => n + 1);
     }, []);
     const openPicker = useCallback((mode, providerId) => {
         if (mode === "key") {
@@ -454,6 +539,9 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             runMemoryCompaction,
             runMemorySummary,
             runMemoryRefresh,
+            getThemeMode: () => themeMode,
+            getResolvedTheme: () => themeResolved,
+            setThemeMode: applyThemeMode,
         });
         if (handled && result) {
             addMessage("assistant", result);
@@ -483,6 +571,9 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
             runMemoryCompaction,
             runMemorySummary,
             runMemoryRefresh,
+            getThemeMode: () => themeMode,
+            getResolvedTheme: () => themeResolved,
+            setThemeMode: applyThemeMode,
         });
         if (handled && result) {
             addMessage("assistant", result);
@@ -672,6 +763,21 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                             }
                             break;
                         }
+                        case "tool_update": {
+                            const tc = toolCalls.find((t) => t.id === event.id);
+                            if (tc) {
+                                tc.metadata = mergeToolMetadata(tc.metadata, event.update.metadata);
+                                if (event.update.message) {
+                                    tc.result = event.update.message;
+                                }
+                                tc.isError = event.update.status === "failed"
+                                    || event.update.status === "blocked"
+                                    || event.update.status === "cancelled";
+                                setStreamingTools([...toolCalls]);
+                                syncStreamingParts();
+                            }
+                            break;
+                        }
                         case "todos_updated": {
                             setTodos(event.todos);
                             break;
@@ -764,6 +870,9 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
                 runMemoryCompaction,
                 runMemorySummary,
                 runMemoryRefresh,
+                getThemeMode: () => themeMode,
+                getResolvedTheme: () => themeResolved,
+                setThemeMode: applyThemeMode,
             });
             if (handled) {
                 if (agent.mode !== permissionMode) {
@@ -823,81 +932,84 @@ export function App({ agent, args, sessionManager, createProvider, registry, ski
     const mcpConnectedCount = mcpStates.filter((state) => state.status.kind === "connected").length;
     const hasAgentsFile = useMemo(() => existsSync(join(args.cwd, "AGENTS.md")) || existsSync(join(args.cwd, ".bubble", "AGENTS.md")), [args.cwd]);
     const welcomeBannerNode = showWelcome ? (_jsx(WelcomeBanner, { terminalColumns: terminalColumns, modelLabel: agent.model ? displayModel(agent.model) : undefined, cwd: friendlyCwd(args.cwd), tips: buildTips(agent, safeRegistry), skillsCount: safeSkillRegistry.summaries().length, mcpConnectedCount: mcpConnectedCount, mcpTotalCount: mcpStates.length, hasAgentsFile: hasAgentsFile })) : null;
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, padding: 1, children: [_jsx(MessageList, { messages: messages, streamingContent: streamingContent, streamingReasoning: streamingReasoning, streamingTools: streamingTools, streamingParts: streamingParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: approvalHint, nowTick: nowTick, welcomeBanner: welcomeBannerNode }), pickerMode === "model" && (_jsx(ModelPicker, { registry: safeRegistry, current: agent.model, recent: userConfig.getRecentModels(), onSelect: handleModelSelect, onCancel: () => setPickerMode(null) })), pickerMode === "provider" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
-                            .filter((p) => isUserVisibleProvider(p.id))
-                            .map((p) => {
-                            const configured = safeRegistry.getConfigured().find((item) => item.id === p.id);
-                            const configuredLabel = configured?.apiKey ? "configured" : "needs key";
-                            return {
-                                id: p.id,
-                                name: `${p.name} [${configuredLabel}]`,
-                                enabled: true,
-                            };
-                        }), current: currentProviderId, onSelect: handleProviderSelect, onCancel: () => setPickerMode(null) })), pickerMode === "provider-add" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
-                            .filter((p) => isUserVisibleProvider(p.id))
-                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleProviderAddSelect, onCancel: () => setPickerMode(null), title: "Add Provider" })), pickerMode === "login" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
-                            .filter((p) => isUserVisibleProvider(p.id) && safeRegistry.supportsOAuth(p.id))
-                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLoginProviderSelect, onCancel: () => setPickerMode(null), title: "Select Login Provider" })), pickerMode === "logout" && (_jsx(ProviderPicker, { providers: safeRegistry.getConfigured()
-                            .filter((p) => safeRegistry.getAuthStorage().has(p.id))
-                            .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLogoutProviderSelect, onCancel: () => setPickerMode(null), title: "Select Logout Provider" })), pickerMode === "key" && keyTarget && (_jsx(KeyPicker, { providerName: keyTarget.name, onSubmit: handleKeySubmit, onCancel: () => {
-                            setPickerMode(null);
-                            setKeyProviderId(null);
-                        } })), pickerMode === "skill" && (_jsx(SkillPicker, { skills: safeSkillRegistry.summaries(), onSelect: async (name) => {
-                            setPickerMode(null);
-                            const { handled, result } = await slashRegistry.execute(`/skill ${name}`, {
-                                agent,
-                                addMessage,
-                                clearMessages,
-                                cwd: args.cwd,
-                                exit: () => { requestExit(); },
-                                sessionManager,
-                                createProvider: createProvider ?? (() => {
-                                    throw new Error("Provider creation not available");
-                                }),
-                                openPicker,
-                                registry: safeRegistry,
-                                skillRegistry: safeSkillRegistry,
-                                bashAllowlist,
-                                settingsManager,
-                                lspService,
-                                mcpManager,
-                                flushMemory,
-                                runMemoryCompaction,
-                                runMemorySummary,
-                                runMemoryRefresh,
-                            });
-                            if (handled && result)
-                                addMessage("assistant", result);
-                        }, onCancel: () => setPickerMode(null) }))] }), todos.length > 0 && !pickerMode && !pendingPlan && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(TodosPanel, { todos: todos, terminalColumns: terminalColumns }) })), pendingPlan && !pickerMode && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(PlanConfirm, { initialPlan: pendingPlan.plan, onApprove: (finalPlan) => {
-                        const resolve = pendingPlan.resolve;
-                        setPendingPlan(null);
-                        resolve({ action: "approve", plan: finalPlan });
-                    }, onReject: (reason) => {
-                        const resolve = pendingPlan.resolve;
-                        setPendingPlan(null);
-                        resolve({ action: "reject", reason });
-                    } }) })), pendingApproval && !pickerMode && !pendingPlan && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ApprovalDialog, { request: pendingApproval.request, onDecision: (decision) => {
-                        const resolve = pendingApproval.resolve;
-                        setPendingApproval(null);
-                        resolve(decision);
-                    }, onAllowBashPrefix: (prefix) => {
-                        bashAllowlist?.add(prefix);
-                    } }) })), pendingQuestion && !pickerMode && !pendingPlan && !pendingApproval && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(QuestionDialog, { request: pendingQuestion, onSubmit: (answers) => {
-                        questionController?.reply(pendingQuestion.id, answers);
-                        setPendingQuestion(null);
-                    }, onCancel: () => {
-                        questionController?.reject(pendingQuestion.id);
-                        setPendingQuestion(null);
-                    } }) })), isRunning && !pickerMode && !pendingPlan && !pendingApproval && !pendingQuestion && (_jsx(Box, { paddingX: 1, paddingBottom: 1, flexShrink: 0, children: _jsx(WaitingIndicator, { tools: streamingTools, hasStreamingText: streamingContent.length > 0, hasStreamingReasoning: streamingReasoning.length > 0, streamedChars: streamingContent.length + streamingReasoning.length, runStartedAt: runStartRef.current ?? undefined, nowTick: nowTick }) })), !pickerMode && (_jsx(Box, { paddingX: 1, paddingBottom: 1, flexShrink: 0, children: _jsx(InputBox, { onSubmit: handleSubmit, disabled: isRunning || !!pendingPlan || !!pendingApproval || !!pendingQuestion, skillRegistry: safeSkillRegistry, terminalColumns: terminalColumns, cwd: args.cwd }) })), _jsx(FooterBar, { data: buildFooterData({
-                    cwd: args.cwd,
-                    providerId: agent.providerId || safeRegistry.getDefault()?.id || "unknown",
-                    model: displayModel(agent.model) || "no model",
-                    thinkingLevel,
-                    showThinking: getAvailableThinkingLevels(agent.providerId, agent.apiModel).length > 2,
-                    mode: permissionMode,
-                    usageTotals,
-                    verboseTrace,
-                }) })] }));
+    return (_jsx(ThemeProvider, { value: palette, children: _jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(MessageList, { messages: messages, streamingContent: streamingContent, streamingReasoning: streamingReasoning, streamingTools: streamingTools, streamingParts: streamingParts, terminalColumns: terminalColumns, verboseTrace: verboseTrace, pendingApproval: approvalHint, nowTick: nowTick, welcomeBanner: welcomeBannerNode }, clearEpoch), pickerMode === "model" && (_jsx(ModelPicker, { registry: safeRegistry, current: agent.model, recent: userConfig.getRecentModels(), onSelect: handleModelSelect, onCancel: () => setPickerMode(null) })), pickerMode === "provider" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                                .filter((p) => isUserVisibleProvider(p.id))
+                                .map((p) => {
+                                const configured = safeRegistry.getConfigured().find((item) => item.id === p.id);
+                                const configuredLabel = configured?.apiKey ? "configured" : "needs key";
+                                return {
+                                    id: p.id,
+                                    name: `${p.name} [${configuredLabel}]`,
+                                    enabled: true,
+                                };
+                            }), current: currentProviderId, onSelect: handleProviderSelect, onCancel: () => setPickerMode(null) })), pickerMode === "provider-add" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                                .filter((p) => isUserVisibleProvider(p.id))
+                                .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleProviderAddSelect, onCancel: () => setPickerMode(null), title: "Add Provider" })), pickerMode === "login" && (_jsx(ProviderPicker, { providers: BUILTIN_PROVIDERS
+                                .filter((p) => isUserVisibleProvider(p.id) && safeRegistry.supportsOAuth(p.id))
+                                .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLoginProviderSelect, onCancel: () => setPickerMode(null), title: "Select Login Provider" })), pickerMode === "logout" && (_jsx(ProviderPicker, { providers: safeRegistry.getConfigured()
+                                .filter((p) => safeRegistry.getAuthStorage().has(p.id))
+                                .map((p) => ({ id: p.id, name: p.name, enabled: true })), current: currentProviderId, onSelect: handleLogoutProviderSelect, onCancel: () => setPickerMode(null), title: "Select Logout Provider" })), pickerMode === "key" && keyTarget && (_jsx(KeyPicker, { providerName: keyTarget.name, onSubmit: handleKeySubmit, onCancel: () => {
+                                setPickerMode(null);
+                                setKeyProviderId(null);
+                            } })), pickerMode === "skill" && (_jsx(SkillPicker, { skills: safeSkillRegistry.summaries(), onSelect: async (name) => {
+                                setPickerMode(null);
+                                const { handled, result } = await slashRegistry.execute(`/skill ${name}`, {
+                                    agent,
+                                    addMessage,
+                                    clearMessages,
+                                    cwd: args.cwd,
+                                    exit: () => { requestExit(); },
+                                    sessionManager,
+                                    createProvider: createProvider ?? (() => {
+                                        throw new Error("Provider creation not available");
+                                    }),
+                                    openPicker,
+                                    registry: safeRegistry,
+                                    skillRegistry: safeSkillRegistry,
+                                    bashAllowlist,
+                                    settingsManager,
+                                    lspService,
+                                    mcpManager,
+                                    flushMemory,
+                                    runMemoryCompaction,
+                                    runMemorySummary,
+                                    runMemoryRefresh,
+                                    getThemeMode: () => themeMode,
+                                    getResolvedTheme: () => themeResolved,
+                                    setThemeMode: applyThemeMode,
+                                });
+                                if (handled && result)
+                                    addMessage("assistant", result);
+                            }, onCancel: () => setPickerMode(null) }))] }), todos.length > 0 && !pickerMode && !pendingPlan && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(TodosPanel, { todos: todos, terminalColumns: terminalColumns }) })), pendingPlan && !pickerMode && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(PlanConfirm, { initialPlan: pendingPlan.plan, onApprove: (finalPlan) => {
+                            const resolve = pendingPlan.resolve;
+                            setPendingPlan(null);
+                            resolve({ action: "approve", plan: finalPlan });
+                        }, onReject: (reason) => {
+                            const resolve = pendingPlan.resolve;
+                            setPendingPlan(null);
+                            resolve({ action: "reject", reason });
+                        } }) })), pendingApproval && !pickerMode && !pendingPlan && !pendingQuestion && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(ApprovalDialog, { request: pendingApproval.request, onDecision: (decision) => {
+                            const resolve = pendingApproval.resolve;
+                            setPendingApproval(null);
+                            resolve(decision);
+                        }, onAllowBashPrefix: (prefix) => {
+                            bashAllowlist?.add(prefix);
+                        } }) })), pendingQuestion && !pickerMode && !pendingPlan && !pendingApproval && (_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(QuestionDialog, { request: pendingQuestion, onSubmit: (answers) => {
+                            questionController?.reply(pendingQuestion.id, answers);
+                            setPendingQuestion(null);
+                        }, onCancel: () => {
+                            questionController?.reject(pendingQuestion.id);
+                            setPendingQuestion(null);
+                        } }) })), !isExiting && isRunning && !pickerMode && !pendingPlan && !pendingApproval && !pendingQuestion && (_jsx(Box, { paddingX: 1, paddingBottom: 1, flexShrink: 0, children: _jsx(WaitingIndicator, { tools: streamingTools, hasStreamingText: streamingContent.length > 0, hasStreamingReasoning: streamingReasoning.length > 0, streamedChars: streamingContent.length + streamingReasoning.length, runStartedAt: runStartRef.current ?? undefined, nowTick: nowTick }) })), !isExiting && !pickerMode && (_jsx(Box, { paddingBottom: 1, flexShrink: 0, children: _jsx(InputBox, { onSubmit: handleSubmit, disabled: isRunning || !!pendingPlan || !!pendingApproval || !!pendingQuestion, skillRegistry: safeSkillRegistry, terminalColumns: terminalColumns, cwd: args.cwd }) })), !isExiting && (_jsx(FooterBar, { data: buildFooterData({
+                        cwd: args.cwd,
+                        providerId: agent.providerId || safeRegistry.getDefault()?.id || "unknown",
+                        model: displayModel(agent.model) || "no model",
+                        thinkingLevel,
+                        showThinking: getAvailableThinkingLevels(agent.providerId, agent.apiModel).length > 2,
+                        mode: permissionMode,
+                        usageTotals,
+                        verboseTrace,
+                    }) }))] }) }));
 }
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const GENERIC_PHRASES = [
@@ -963,6 +1075,7 @@ function formatTokensApprox(chars) {
     return `${Math.round(tokens / 1000)}k`;
 }
 function WaitingIndicator({ tools, hasStreamingText, hasStreamingReasoning, streamedChars, runStartedAt, nowTick, }) {
+    const theme = useTheme();
     const [frameIndex, setFrameIndex] = useState(0);
     const [idlePhrase, setIdlePhrase] = useState(() => GENERIC_PHRASES[0]);
     // Frame timer is independent of the agent state — keeps animation smooth.

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { theme } from "../theme.js";
+import { useTheme } from "../theme.js";
 import { ApprovalSelect } from "./select.js";
 import { DiffView } from "./diff-view.js";
 import { inferBashPrefix } from "../../approval/session-cache.js";
 import { classifyBashDanger } from "../../approval/danger.js";
 export function ApprovalDialog({ request, onDecision, onAllowBashPrefix, }) {
+    const theme = useTheme();
     const options = buildOptions(request);
     const onSubmit = (id, extras) => {
         switch (id) {
@@ -103,11 +104,13 @@ function RequestPreview({ request }) {
     }
 }
 function BashPreview({ command, cwd }) {
+    const theme = useTheme();
     const danger = classifyBashDanger(command);
     return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.muted, children: "$ " }), _jsx(Text, { children: command })] }), _jsxs(Text, { color: theme.muted, children: ["cwd: ", compressHome(cwd)] }), danger && (_jsxs(Box, { marginTop: 1, children: [_jsxs(Text, { color: theme.warning, bold: true, children: ["\u26A0 ", danger.pattern, ":"] }), _jsxs(Text, { color: theme.warning, children: [" ", danger.message] })] }))] }));
 }
 const MAX_WRITE_PREVIEW_LINES = 20;
 function WritePreview({ path, content }) {
+    const theme = useTheme();
     const lines = content.split("\n");
     const shown = lines.slice(0, MAX_WRITE_PREVIEW_LINES);
     const overflow = lines.length - shown.length;

package/dist/tui-ink/approval/diff-view.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { theme } from "../theme.js";
+import { useTheme } from "../theme.js";
 import { parseDiffHunks } from "../../approval/diff-hunks.js";
 const DEFAULT_MAX_LINES = 40;
 export function DiffView({ diff, maxLines = DEFAULT_MAX_LINES }) {
+    const theme = useTheme();
     const hunks = parseDiffHunks(diff);
     if (hunks.length === 0) {
         return (_jsx(Text, { color: theme.muted, children: "(no diff body to display)" }));

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { Box, Text, useInput } from "ink";
-import { theme } from "../theme.js";
+import { useTheme } from "../theme.js";
 export function ApprovalSelect({ options, onSubmit, onCancel, hint, initialIndex = 0, }) {
+    const theme = useTheme();
     const [focusIndex, setFocusIndex] = useState(Math.max(0, Math.min(initialIndex, options.length - 1)));
     const [amending, setAmending] = useState(false);
     const [amendText, setAmendText] = useState("");