@bubblebrain-ai/bubble 0.0.7 → 0.0.9

package/dist/tui-ink/app.js

@@ -0,0 +1,1129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import { AgentAbortError } from "../agent.js";
+import { registry as slashRegistry } from "../slash-commands/index.js";
+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 { 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";
+import { getAvailableThinkingLevels, getDefaultThinkingLevel, normalizeThinkingLevel } from "../provider-transform.js";
+import { FooterBar, buildFooterData } from "./footer.js";
+import { SkillRegistry } from "../skills/registry.js";
+import { parseSkillInvocation } from "../skills/invocation.js";
+import { useTerminalSize } from "./use-terminal-size.js";
+import { WelcomeBanner, shouldShowWelcomeBanner } from "./welcome.js";
+import { expandAtMentions } from "./file-mentions.js";
+import { TodosPanel } from "./todos.js";
+import { PlanConfirm } from "./plan-confirm.js";
+import { ApprovalDialog } from "./approval/approval-dialog.js";
+import { getNextPermissionMode } from "../permission/mode.js";
+import { QuestionDialog } from "./question-dialog.js";
+import os from "node:os";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+function buildTips(agent, registry) {
+    const tips = [];
+    const hasProvider = registry.getEnabled().length > 0;
+    if (!hasProvider) {
+        tips.push("Run /login or /provider --add to configure a model");
+    }
+    else if (agent.model) {
+        tips.push(`Ready with ${displayModel(agent.model)}`);
+    }
+    else {
+        tips.push("Run /model to pick a model");
+    }
+    tips.push("Type @ to reference a file");
+    tips.push("Type / for commands and skills");
+    return tips;
+}
+function friendlyCwd(cwd) {
+    const home = os.homedir();
+    if (cwd === home)
+        return "~";
+    if (cwd.startsWith(home + "/"))
+        return "~" + cwd.slice(home.length);
+    return cwd;
+}
+function reconstructDisplayMessages(agentMessages) {
+    const result = [];
+    for (const m of agentMessages) {
+        if (m.role === "system" || m.role === "tool")
+            continue;
+        if (m.role === "user") {
+            if (m.isMeta)
+                continue; // <system-reminder> injections are not user-visible
+            result.push({
+                key: nextDisplayMessageKey("user"),
+                role: "user",
+                content: typeof m.content === "string" ? m.content : "(multimedia)",
+            });
+        }
+        else if (m.role === "assistant") {
+            const toolCalls = [];
+            if (m.toolCalls) {
+                for (const tc of m.toolCalls) {
+                    let args = {};
+                    try {
+                        args = JSON.parse(tc.arguments || "{}");
+                    }
+                    catch {
+                        args = {};
+                    }
+                    const toolResult = agentMessages.find((tm) => tm.role === "tool" && tm.toolCallId === tc.id);
+                    toolCalls.push({
+                        id: tc.id,
+                        name: tc.name,
+                        args,
+                        result: toolResult ? toolResult.content : undefined,
+                        isError: toolResult ? toolResult.content?.startsWith?.("Error:") : false,
+                        metadata: toolResult ? toolResult.metadata : undefined,
+                    });
+                }
+            }
+            result.push({
+                key: nextDisplayMessageKey("asst"),
+                role: "assistant",
+                content: m.content,
+                reasoning: m.reasoning || undefined,
+                toolCalls: toolCalls.length > 0 ? toolCalls : undefined,
+            });
+        }
+    }
+    return result;
+}
+/**
+ * Streaming tool arguments arrive as an incomplete JSON buffer. We can't
+ * JSON.parse() until the closing brace lands, but the user wants to see the
+ * short identifying fields (path, command, …) as soon as the model emits
+ * them so the tool row header reflects what's happening.
+ *
+ * Intentionally limited to short, single-line fields. Long fields like
+ * `content` are *not* surfaced live: rendering thousands of partial lines
+ * per delta floods the terminal and the partial value can break around
+ * unescaped sequences. The final value lands when the tool actually
+ * executes and tool_start delivers canonical args.
+ */
+function parsePartialArgs(buffer, previous) {
+    // If the buffer is now valid JSON, prefer the real parse.
+    try {
+        const parsed = JSON.parse(buffer);
+        if (parsed && typeof parsed === "object")
+            return parsed;
+    }
+    catch {
+        // fall through to partial extraction below
+    }
+    const result = { ...previous };
+    const FIELDS = ["path", "command", "pattern", "url", "query"];
+    for (const field of FIELDS) {
+        // Match a complete-looking quoted string. Requires a closing quote so we
+        // don't surface half-typed paths that may still change as bytes arrive.
+        const match = buffer.match(new RegExp(`"${field}"\\s*:\\s*"((?:\\\\.|[^"\\\\])*)"`));
+        if (match) {
+            const raw = match[1] ?? "";
+            result[field] = raw
+                .replace(/\\n/g, "\n")
+                .replace(/\\t/g, "\t")
+                .replace(/\\"/g, '"')
+                .replace(/\\\\/g, "\\");
+        }
+    }
+    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
+ * nextDisplayMessageKey on every push.
+ */
+function withMessageKey(message) {
+    if (message.key)
+        return 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, 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("");
+    const [streamingTools, setStreamingTools] = useState([]);
+    const [streamingParts, setStreamingParts] = useState([]);
+    const [usageTotals, setUsageTotals] = useState({ prompt: 0, completion: 0 });
+    const [thinkingLevel, setThinkingLevel] = useState(agent.thinking);
+    const [permissionMode, setPermissionMode] = useState(agent.mode);
+    const [todos, setTodos] = useState(() => agent.getTodos());
+    const [pendingPlan, setPendingPlan] = useState(null);
+    const [pendingApproval, setPendingApproval] = useState(null);
+    const [pendingQuestion, setPendingQuestion] = useState(null);
+    const [pickerMode, setPickerMode] = useState(null);
+    const [keyProviderId, setKeyProviderId] = useState(null);
+    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.
+    const [nowTick, setNowTick] = useState(() => Date.now());
+    // Timestamp of when the current agent run started — drives elapsed display
+    // on the WaitingIndicator.
+    const runStartRef = useRef(null);
+    // Mark the moment the run started; flips back to null in the finally block.
+    useEffect(() => {
+        if (!isRunning)
+            return;
+        setNowTick(Date.now());
+        const t = setInterval(() => setNowTick(Date.now()), 1000);
+        return () => clearInterval(t);
+    }, [isRunning]);
+    const userConfig = new UserConfig();
+    const safeRegistry = registry ?? new ProviderRegistry(userConfig);
+    const safeSkillRegistry = skillRegistry ?? new SkillRegistry({
+        cwd: args.cwd,
+        skillPaths: userConfig.getSkillPaths(),
+    });
+    const requestExit = useCallback(() => {
+        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.
+        if (activeAbortRef.current) {
+            try {
+                activeAbortRef.current.abort(new AgentAbortError("Exiting Bubble."));
+            }
+            catch {
+                // ignore — abort is best effort during shutdown
+            }
+            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.
+                let timer;
+                try {
+                    await Promise.race([
+                        flushMemory(),
+                        new Promise((_, reject) => {
+                            timer = setTimeout(() => reject(new Error("flushMemory timed out after 3s")), 3000);
+                        }),
+                    ]);
+                }
+                catch (err) {
+                    flushError = err;
+                }
+                finally {
+                    if (timer)
+                        clearTimeout(timer);
+                }
+            }
+            // Hand off to Ink. Ink's render instance owns TTY teardown (raw mode,
+            // cursor, alt-screen); doing it ourselves here races with that and
+            // leaves the terminal in odd states. run.tsx awaits waitUntilExit()
+            // and then main.ts handles the rest.
+            exit();
+            // Surface flush failures *after* Ink has restored the screen so the
+            // warning lands on the real shell instead of being clobbered.
+            if (flushError) {
+                const message = flushError instanceof Error ? flushError.message : String(flushError);
+                process.nextTick(() => {
+                    process.stderr.write(`warning: failed to flush memory on exit: ${message}\n`);
+                });
+            }
+            onExit?.({ wallMs: Date.now() - sessionStartRef.current });
+        })();
+    }, [exit, flushMemory, onExit]);
+    useEffect(() => {
+        if (!planHandlerRef)
+            return;
+        planHandlerRef.current = (plan) => new Promise((resolve) => {
+            setPendingPlan({ plan, resolve });
+        });
+        return () => {
+            if (planHandlerRef.current) {
+                planHandlerRef.current = undefined;
+            }
+        };
+    }, [planHandlerRef]);
+    useEffect(() => {
+        if (!approvalHandlerRef)
+            return;
+        approvalHandlerRef.current = (request) => new Promise((resolve) => {
+            setPendingApproval({ request, resolve });
+        });
+        return () => {
+            if (approvalHandlerRef.current) {
+                approvalHandlerRef.current = undefined;
+            }
+        };
+    }, [approvalHandlerRef]);
+    useEffect(() => {
+        if (!questionController)
+            return;
+        const syncFirstPending = () => {
+            setPendingQuestion((current) => current ?? questionController.list()[0] ?? null);
+        };
+        const unsubscribe = questionController.subscribe((event) => {
+            if (event.type === "asked") {
+                setPendingQuestion(event.request);
+                return;
+            }
+            setPendingQuestion((current) => current?.id === event.request.id ? null : current);
+            setTimeout(syncFirstPending, 0);
+        });
+        syncFirstPending();
+        return unsubscribe;
+    }, [questionController]);
+    const rebuildSystemPrompt = useCallback((overrides) => {
+        const modelParts = agent.model.includes(":")
+            ? agent.model.split(":")
+            : [agent.providerId || safeRegistry.getDefault()?.id || "openai", agent.model];
+        const providerId = modelParts[0];
+        agent.setSystemPrompt(buildSystemPrompt({
+            agentName: "Bubble",
+            configuredProvider: providerId,
+            configuredModel: displayModel(agent.model),
+            configuredModelId: agent.model,
+            thinkingLevel: overrides?.thinkingLevel ?? agent.thinking,
+            mode: overrides?.mode ?? agent.mode,
+            workingDir: args.cwd,
+            skills: safeSkillRegistry?.summaries() ?? [],
+        }));
+    }, [agent, args.cwd, safeRegistry, safeSkillRegistry]);
+    useInput((input, key) => {
+        if (pendingPlan || pendingApproval || pendingQuestion)
+            return;
+        if (key.ctrl && input === "o" && !pickerMode) {
+            setVerboseTrace((v) => !v);
+            return;
+        }
+        // Ctrl+R: cycle thinking level (formerly Shift+Tab)
+        if (key.ctrl && input === "r" && !pickerMode) {
+            const modelParts = agent.model.includes(":")
+                ? agent.model.split(":")
+                : [agent.providerId || safeRegistry.getDefault()?.id || "openai", agent.model];
+            const providerId = modelParts[0];
+            const modelId = modelParts.slice(1).join(":");
+            const availableLevels = getAvailableThinkingLevels(providerId, modelId);
+            const currentLevel = normalizeThinkingLevel(agent.thinking, availableLevels);
+            const currentIndex = availableLevels.indexOf(currentLevel);
+            const nextLevel = availableLevels[(currentIndex + 1) % availableLevels.length];
+            agent.thinking = nextLevel;
+            rebuildSystemPrompt({ thinkingLevel: nextLevel });
+            userConfig.setDefaultThinkingLevel(nextLevel);
+            setThinkingLevel(nextLevel);
+            sessionManager?.setMetadata({ model: agent.model, thinkingLevel: nextLevel, reasoningEffort: nextLevel });
+            sessionManager?.appendMarker("thinking_level_switch", nextLevel);
+            return;
+        }
+        // Shift+Tab: cycle through permission modes (default → acceptEdits → plan
+        // → [bypassPermissions if enabled] → default). Agent.setMode injects a
+        // <system-reminder>, so we do not rebuild the cache-friendly system prompt here.
+        if (key.tab && key.shift && !pickerMode) {
+            const nextMode = getNextPermissionMode(agent.mode);
+            agent.setMode(nextMode);
+            setPermissionMode(nextMode);
+            sessionManager?.appendMarker("mode_switch", nextMode);
+            return;
+        }
+        if (key.escape && !pickerMode) {
+            if (isRunning && activeAbortRef.current) {
+                activeAbortRef.current.abort(new AgentAbortError("Agent run cancelled by user."));
+                return;
+            }
+        }
+    });
+    const updateDisplayMessages = useCallback((updater) => {
+        setMessages((prev) => compactDisplayMessages(updater(prev).map(withMessageKey)));
+    }, []);
+    const addMessage = useCallback((role, content) => {
+        updateDisplayMessages((prev) => [...prev, withMessageKey({ role, content })]);
+    }, [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") {
+            setKeyProviderId(providerId ?? null);
+        }
+        setPickerMode(mode);
+    }, []);
+    const handleModelSelect = useCallback((model) => {
+        const run = async () => {
+            agent.model = model;
+            const decoded = model.includes(":")
+                ? model.split(":")
+                : [agent.providerId || safeRegistry.getDefault()?.id || "openai", model];
+            const providerId = decoded[0];
+            await safeRegistry.prepareProvider(providerId);
+            const provider = safeRegistry.getConfigured().find((item) => item.id === providerId);
+            if (!provider?.apiKey || !createProvider) {
+                addMessage("error", `Provider ${providerId} is not configured or has no active credentials.`);
+                setPickerMode(null);
+                return;
+            }
+            const modelId = model.includes(":") ? model.split(":").slice(1).join(":") : model;
+            agent.thinking = normalizeThinkingLevel(agent.thinking || getDefaultThinkingLevel(providerId, modelId), getAvailableThinkingLevels(providerId, modelId));
+            agent.setProvider(createProvider(providerId, provider.apiKey, provider.baseURL));
+            agent.providerId = providerId;
+            agent.setSystemPrompt(buildSystemPrompt({
+                agentName: "Bubble",
+                configuredProvider: providerId,
+                configuredModel: displayModel(model),
+                configuredModelId: model,
+                thinkingLevel: agent.thinking,
+                workingDir: args.cwd,
+                skills: safeSkillRegistry?.summaries() ?? [],
+            }));
+            userConfig.pushRecentModel(model);
+            setThinkingLevel(agent.thinking);
+            sessionManager?.setMetadata({ model, thinkingLevel: agent.thinking, reasoningEffort: agent.thinking });
+            sessionManager?.appendMarker("model_switch", model);
+            addMessage("assistant", `Model switched to ${displayModel(model)}.`);
+            setPickerMode(null);
+        };
+        void run();
+    }, [agent, addMessage, sessionManager, userConfig, safeRegistry, createProvider]);
+    const handleProviderSelect = useCallback(async (providerId) => {
+        await safeRegistry.prepareProvider(providerId);
+        const configured = safeRegistry.getConfigured();
+        const p = configured.find((x) => x.id === providerId);
+        const builtin = BUILTIN_PROVIDERS.find((x) => x.id === providerId);
+        if (!p && !builtin) {
+            addMessage("error", `Provider ${providerId} not found.`);
+            setPickerMode(null);
+            return;
+        }
+        if (!p?.apiKey) {
+            if (!p && builtin) {
+                safeRegistry.addProvider(providerId, "");
+            }
+            safeRegistry.setDefault(providerId);
+            setKeyProviderId(providerId);
+            setPickerMode("key");
+            return;
+        }
+        safeRegistry.setDefault(providerId);
+        agent.setProvider(createProvider(providerId, p.apiKey, p.baseURL));
+        agent.providerId = providerId;
+        addMessage("assistant", `Switched to provider ${p.name}. Use /model to pick a model.`);
+        setPickerMode(null);
+    }, [addMessage, agent, createProvider, safeRegistry]);
+    const handleProviderAddSelect = useCallback((providerId) => {
+        const ok = safeRegistry.addProvider(providerId, "");
+        if (!ok) {
+            addMessage("error", `Provider ${providerId} could not be added.`);
+            setPickerMode(null);
+            return;
+        }
+        safeRegistry.setDefault(providerId);
+        setKeyProviderId(providerId);
+        setPickerMode("key");
+    }, [addMessage, safeRegistry]);
+    const handleLoginProviderSelect = useCallback(async (providerId) => {
+        setPickerMode(null);
+        const command = `/login ${providerId}`;
+        const { handled, result } = await slashRegistry.execute(command, {
+            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);
+        }
+    }, [agent, addMessage, clearMessages, createProvider, exit, openPicker, safeRegistry, sessionManager]);
+    const handleLogoutProviderSelect = useCallback(async (providerId) => {
+        setPickerMode(null);
+        const command = `/logout ${providerId}`;
+        const { handled, result } = await slashRegistry.execute(command, {
+            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);
+        }
+    }, [agent, addMessage, clearMessages, createProvider, exit, openPicker, safeRegistry, sessionManager]);
+    const handleKeySubmit = useCallback((key) => {
+        const targetId = keyProviderId || safeRegistry.getDefault()?.id;
+        if (!targetId) {
+            addMessage("error", "No provider selected.");
+            setPickerMode(null);
+            setKeyProviderId(null);
+            return;
+        }
+        safeRegistry.updateProviderKey(targetId, key);
+        const p = safeRegistry.getConfigured().find((x) => x.id === targetId);
+        if (p && createProvider) {
+            agent.setProvider(createProvider(targetId, key, p.baseURL));
+            agent.providerId = targetId;
+        }
+        addMessage("assistant", `API key updated for ${p?.name || targetId} to ${maskKey(key)}.`);
+        setPickerMode(null);
+        setKeyProviderId(null);
+    }, [addMessage, agent, createProvider, keyProviderId, safeRegistry]);
+    const handleSubmit = useCallback(async (payload) => {
+        const normalized = typeof payload === "string" ? { text: payload, images: [] } : payload;
+        const input = normalized.text;
+        const images = normalized.images;
+        if (!input.trim() && images.length === 0)
+            return;
+        const runAgentInput = async (actualInput, displayInput, attachedImages = []) => {
+            const activeProviderId = agent.providerId || safeRegistry.getDefault()?.id;
+            const hasActiveProvider = !!activeProviderId && safeRegistry.getEnabled().some((provider) => provider.id === activeProviderId);
+            if (!hasActiveProvider) {
+                addMessage("error", "No provider configured. Use /login for ChatGPT or /provider --add <id> before sending a prompt.");
+                return;
+            }
+            if (!agent.model) {
+                addMessage("error", "No model selected. Use /model after /login or provider setup.");
+                return;
+            }
+            const displayContent = attachedImages.length > 0
+                ? `${displayInput}${displayInput ? "\n" : ""}${attachedImages
+                    .map((img, i) => `[image${attachedImages.length > 1 ? ` ${i + 1}` : ""}: ${img.filename ?? "clipboard"} · ${Math.max(1, Math.round(img.bytes / 1024))}KB]`)
+                    .join(" ")}`
+                : displayInput;
+            updateDisplayMessages((prev) => [
+                ...prev,
+                withMessageKey({ role: "user", content: displayContent }),
+            ]);
+            setIsRunning(true);
+            runStartRef.current = Date.now();
+            setStreamingContent("");
+            setStreamingReasoning("");
+            setStreamingTools([]);
+            setStreamingParts([]);
+            let assistantContent = "";
+            let assistantReasoning = "";
+            const toolCalls = [];
+            const assistantParts = [];
+            const abortController = new AbortController();
+            activeAbortRef.current = abortController;
+            const syncStreamingParts = () => {
+                setStreamingParts(snapshotDisplayParts(assistantParts));
+            };
+            const hasAssistantOutput = () => (!!assistantContent ||
+                !!assistantReasoning ||
+                toolCalls.length > 0 ||
+                assistantParts.length > 0);
+            const commitAssistantMessage = () => {
+                if (!hasAssistantOutput())
+                    return;
+                const currentParts = snapshotDisplayParts(assistantParts);
+                const currentToolCalls = [...toolCalls];
+                const partContent = assistantContent || contentFromParts(currentParts);
+                const partToolCalls = currentToolCalls.length > 0
+                    ? currentToolCalls
+                    : toolCallsFromParts(currentParts);
+                const msg = {
+                    key: nextDisplayMessageKey("asst"),
+                    role: "assistant",
+                    content: partContent,
+                };
+                if (assistantReasoning) {
+                    msg.reasoning = assistantReasoning;
+                }
+                if (partToolCalls.length > 0) {
+                    msg.toolCalls = partToolCalls;
+                }
+                if (currentParts.length > 0) {
+                    msg.parts = currentParts;
+                }
+                updateDisplayMessages((prev) => [...prev, msg]);
+            };
+            const clearAssistantStream = () => {
+                setStreamingContent("");
+                setStreamingReasoning("");
+                setStreamingTools([]);
+                setStreamingParts([]);
+                assistantContent = "";
+                assistantReasoning = "";
+                toolCalls.length = 0;
+                assistantParts.length = 0;
+            };
+            try {
+                for await (const event of agent.run(actualInput, args.cwd, { abortSignal: abortController.signal })) {
+                    switch (event.type) {
+                        case "text_delta":
+                            assistantContent += event.content;
+                            appendTextPart(assistantParts, event.content);
+                            setStreamingContent(assistantContent);
+                            syncStreamingParts();
+                            break;
+                        case "reasoning_delta":
+                            assistantReasoning += event.content;
+                            setStreamingReasoning(assistantReasoning);
+                            break;
+                        case "tool_call_start": {
+                            // The LLM has begun emitting this tool call. Args are still
+                            // streaming — render an empty-args placeholder so the user
+                            // sees the tool the moment it appears in the assistant
+                            // response, not after the full arg payload finishes.
+                            if (!toolCalls.some((t) => t.id === event.id)) {
+                                const toolCall = {
+                                    id: event.id,
+                                    name: event.name,
+                                    args: {},
+                                    startedAt: Date.now(),
+                                };
+                                toolCalls.push(toolCall);
+                                appendToolPart(assistantParts, toolCall);
+                                setStreamingTools([...toolCalls]);
+                                syncStreamingParts();
+                            }
+                            break;
+                        }
+                        case "tool_call_delta": {
+                            // Best-effort parse of the partial argument JSON to extract
+                            // identifying fields (path, command, content, …). The buffer
+                            // is incomplete JSON during streaming, so fall back to regex
+                            // peeks on common string fields.
+                            const tc = toolCalls.find((t) => t.id === event.id);
+                            if (tc) {
+                                tc.args = parsePartialArgs(event.arguments, tc.args);
+                                setStreamingTools([...toolCalls]);
+                                syncStreamingParts();
+                            }
+                            break;
+                        }
+                        case "tool_call_end": {
+                            // Provider signaled args streaming is complete; agent will
+                            // emit tool_start next. We don't need to do anything visual
+                            // here — the placeholder is already in place and tool_start
+                            // will refresh it with the canonical parsed args.
+                            break;
+                        }
+                        case "tool_start": {
+                            // Tool is about to execute. Upgrade the placeholder created
+                            // by tool_call_start (or append if upstream skipped the
+                            // streaming path).
+                            const existing = toolCalls.find((t) => t.id === event.id);
+                            if (existing) {
+                                existing.args = event.args;
+                                existing.startedAt = existing.startedAt ?? Date.now();
+                            }
+                            else {
+                                const toolCall = {
+                                    id: event.id,
+                                    name: event.name,
+                                    args: event.args,
+                                    startedAt: Date.now(),
+                                };
+                                toolCalls.push(toolCall);
+                                appendToolPart(assistantParts, toolCall);
+                            }
+                            setStreamingTools([...toolCalls]);
+                            syncStreamingParts();
+                            break;
+                        }
+                        case "tool_end": {
+                            const tc = toolCalls.find((t) => t.id === event.id);
+                            if (tc) {
+                                tc.result = event.result.content;
+                                tc.isError = event.result.isError;
+                                tc.metadata = event.result.metadata;
+                                setStreamingTools([...toolCalls]);
+                                syncStreamingParts();
+                            }
+                            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;
+                        }
+                        case "mode_changed": {
+                            setPermissionMode(event.mode);
+                            sessionManager?.appendMarker("mode_switch", event.mode);
+                            break;
+                        }
+                        case "turn_end": {
+                            if (event.usage) {
+                                setUsageTotals((totals) => ({
+                                    prompt: totals.prompt + event.usage.promptTokens,
+                                    completion: totals.completion + event.usage.completionTokens,
+                                }));
+                            }
+                            if (event.willContinue) {
+                                syncStreamingParts();
+                                break;
+                            }
+                            commitAssistantMessage();
+                            clearAssistantStream();
+                            break;
+                        }
+                    }
+                }
+            }
+            catch (err) {
+                commitAssistantMessage();
+                if (err instanceof AgentAbortError || err?.name === "AbortError") {
+                    updateDisplayMessages((prev) => [
+                        ...prev,
+                        withMessageKey({ role: "assistant", content: "Cancelled." }),
+                    ]);
+                }
+                else {
+                    updateDisplayMessages((prev) => [
+                        ...prev,
+                        withMessageKey({ role: "error", content: err.message }),
+                    ]);
+                }
+            }
+            finally {
+                if (activeAbortRef.current === abortController)
+                    activeAbortRef.current = null;
+                setIsRunning(false);
+                runStartRef.current = null;
+                setStreamingContent("");
+                setStreamingReasoning("");
+                setStreamingTools([]);
+                setStreamingParts([]);
+            }
+        };
+        // Slash commands and skill invocations drop any attached images —
+        // they're meant for pure command routing.
+        if (input.startsWith("/")) {
+            // Fast-path `/quit` and `/exit` before slash-registry / skill
+            // resolution. This guarantees a literal "/quit" always exits even if
+            // a skill or alias of the same name is later registered. The
+            // canonical handler still lives in slash-commands/commands.ts so
+            // `/help` and the slash menu can list it; both paths end up calling
+            // requestExit().
+            if (/^\/(?:quit|exit)\s*$/.test(input.trim())) {
+                requestExit();
+                return;
+            }
+            const skillInvocation = parseSkillInvocation(input, safeSkillRegistry);
+            if (skillInvocation) {
+                await runAgentInput(skillInvocation.actualPrompt, input);
+                return;
+            }
+            const { handled, result, inject } = await slashRegistry.execute(input, {
+                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) {
+                if (agent.mode !== permissionMode) {
+                    setPermissionMode(agent.mode);
+                }
+                if (result) {
+                    addMessage("assistant", result);
+                }
+                if (inject) {
+                    await runAgentInput(inject, input);
+                }
+                return;
+            }
+        }
+        const expansion = await expandAtMentions(input, args.cwd);
+        if (expansion.missing.length > 0) {
+            addMessage("error", `Could not resolve @mention: ${expansion.missing.join(", ")}`);
+        }
+        for (const skip of expansion.skipped) {
+            addMessage("error", `Skipped @${skip.path}: ${skip.reason}`);
+        }
+        const agentInput = images.length > 0
+            ? [
+                ...(expansion.text ? [{ type: "text", text: expansion.text }] : []),
+                ...images.map((img) => ({
+                    type: "image_url",
+                    image_url: { url: img.dataUrl },
+                })),
+            ]
+            : expansion.text;
+        await runAgentInput(agentInput, input, images.map((img) => ({ filename: img.filename, bytes: img.bytes })));
+    }, [addMessage, agent, args.cwd, openPicker, createProvider, safeRegistry, safeSkillRegistry, updateDisplayMessages]);
+    const currentProviderId = agent.providerId || safeRegistry.getDefault()?.id;
+    const keyTarget = keyProviderId
+        ? safeRegistry.getConfigured().find((p) => p.id === keyProviderId)
+        : safeRegistry.getDefault();
+    // Surface a pending approval as an inline badge on the matching tool row.
+    // ApprovalRequest does not carry a toolCallId today; matching is loose by
+    // type + the most identifying arg (path/command).
+    const approvalHint = pendingApproval
+        ? (() => {
+            const r = pendingApproval.request;
+            if (r.type === "bash")
+                return { toolName: "bash", command: r.command };
+            if (r.type === "edit")
+                return { toolName: "edit", path: r.path };
+            if (r.type === "write")
+                return { toolName: "write", path: r.path };
+            return null;
+        })()
+        : null;
+    const showWelcome = shouldShowWelcomeBanner({
+        messages,
+        startedWithVisibleHistory: startedWithVisibleHistoryRef.current,
+    });
+    const mcpStates = mcpManager?.getStates() ?? [];
+    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 (_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 = [
+    "mapping the workspace",
+    "reading the room",
+    "following the threads",
+    "connecting the pieces",
+    "sorting the context",
+    "scanning the structure",
+    "shaping the next step",
+    "gathering signal",
+    "checking the edges",
+    "lining up the answer",
+    "tracing the flow",
+    "building the picture",
+    "walking the graph",
+    "collecting the clues",
+    "framing the problem",
+    "locating the source",
+    "resolving the shape",
+    "untangling the state",
+    "comparing the paths",
+    "narrowing the target",
+    "tracking the changes",
+    "reading the patterns",
+    "weighing the options",
+    "assembling the context",
+    "following the signal",
+    "checking the assumptions",
+    "aligning the details",
+    "testing the shape",
+    "pulling the thread",
+    "cleaning the edges",
+    "refining the draft",
+    "verifying the route",
+    "making sense of it",
+    "looking for leverage",
+    "stitching the answer",
+    "holding the thread",
+    "distilling the noise",
+    "finding the seam",
+    "reading between the lines",
+    "preparing the response",
+];
+const TOOL_TARGET_PHRASES = {
+    read: "reading files",
+    write: "writing changes",
+    edit: "patching files",
+    grep: "searching the codebase",
+    glob: "scanning paths",
+    ls: "listing directories",
+    bash: "running command",
+    web_search: "searching the web",
+    web_fetch: "fetching a page",
+    task: "spawning subagent",
+};
+function formatTokensApprox(chars) {
+    const tokens = Math.max(0, Math.round(chars / 4));
+    if (tokens < 1000)
+        return `${tokens}`;
+    if (tokens < 10000)
+        return `${(tokens / 1000).toFixed(1)}k`;
+    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.
+    useEffect(() => {
+        const t = setInterval(() => {
+            setFrameIndex((i) => (i + 1) % SPINNER_FRAMES.length);
+        }, 100);
+        return () => clearInterval(t);
+    }, []);
+    // Determine state: active tool > streaming text > streaming reasoning > idle
+    const activeTool = [...tools].reverse().find((t) => !t.result);
+    const state = activeTool
+        ? "tool"
+        : hasStreamingText
+            ? "text"
+            : hasStreamingReasoning
+                ? "reasoning"
+                : "idle";
+    // Rotate idle phrases on a slower cadence; only matters in the idle state.
+    useEffect(() => {
+        if (state !== "idle")
+            return;
+        const t = setInterval(() => {
+            setIdlePhrase((current) => {
+                const candidates = GENERIC_PHRASES.filter((item) => item !== current);
+                return candidates[Math.floor(Math.random() * candidates.length)] || current;
+            });
+        }, 1500);
+        return () => clearInterval(t);
+    }, [state]);
+    let phrase;
+    if (state === "tool" && activeTool) {
+        phrase =
+            TOOL_TARGET_PHRASES[activeTool.name] || `running ${activeTool.name}`;
+    }
+    else if (state === "text") {
+        phrase = "writing the response";
+    }
+    else if (state === "reasoning") {
+        phrase = "working through the request";
+    }
+    else {
+        phrase = idlePhrase;
+    }
+    const elapsedSec = runStartedAt
+        ? Math.max(0, Math.floor((nowTick - runStartedAt) / 1000))
+        : 0;
+    const elapsedText = elapsedSec > 0 ? `${elapsedSec}s` : "0s";
+    const tokenText = streamedChars > 0 ? `↓${formatTokensApprox(streamedChars)} tok` : "";
+    return (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent, children: SPINNER_FRAMES[frameIndex] }), _jsxs(Text, { color: theme.muted, children: [" ", phrase, " "] }), _jsxs(Text, { color: theme.muted, dimColor: true, children: ["(", elapsedText, tokenText ? ` · ${tokenText}` : "", " \u00B7 esc\u00B7esc to interrupt)"] })] }));
+}