@prestyj/cli 4.2.77 → 4.3.34

package/dist/ui/App.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React, { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { Box, Text, Static, useStdout } from "ink";
 import { useTerminalSize } from "./hooks/useTerminalSize.js";
+import { useDoublePress } from "./hooks/useDoublePress.js";
+import { useTaskBarStore, useTaskBarPolling, focusTaskBar, exitTaskBar, expandTaskBar, collapseTaskBar, navigateTaskBar, killTask, } from "./stores/taskbar-store.js";
 import crypto, { createHash } from "node:crypto";
 import { readFileSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
@@ -16,6 +18,7 @@ import { ToolGroupExecution } from "./components/ToolGroupExecution.js";
 import { ServerToolExecution } from "./components/ServerToolExecution.js";
 import { SubAgentPanel } from "./components/SubAgentPanel.js";
 import { CompactionSpinner, CompactionDone } from "./components/CompactionNotice.js";
+import { createWebSearchTool } from "../tools/web-search.js";
 import { StreamingArea } from "./components/StreamingArea.js";
 import { ActivityIndicator } from "./components/ActivityIndicator.js";
 import { InputArea } from "./components/InputArea.js";
@@ -25,8 +28,9 @@ import { PlanOverlay } from "./components/PlanOverlay.js";
 import { ModelSelector } from "./components/ModelSelector.js";
 import { TaskOverlay } from "./components/TaskOverlay.js";
 import { SkillsOverlay } from "./components/SkillsOverlay.js";
+import { ThemeSelector } from "./components/ThemeSelector.js";
 import { BackgroundTasksBar } from "./components/BackgroundTasksBar.js";
-import { useTheme } from "./theme/theme.js";
+import { useTheme, useSetTheme } from "./theme/theme.js";
 import { useAnimationTick, useAnimationActive, deriveFrame, } from "./components/AnimationContext.js";
 import { useTerminalTitle } from "./hooks/useTerminalTitle.js";
 import { useTerminalProgress } from "./hooks/useTerminalProgress.js";
@@ -34,6 +38,8 @@ import { getGitBranch } from "../utils/git.js";
 import { getModel, getContextWindow } from "../core/model-registry.js";
 import { SessionManager } from "../core/session-manager.js";
 import { log } from "../core/logger.js";
+import { startPeriodicUpdateCheck, stopPeriodicUpdateCheck } from "../core/auto-update.js";
+import { generateSessionTitle } from "../utils/session-title.js";
 import { SettingsManager } from "../core/settings-manager.js";
 import { shouldCompact, compact } from "../core/compaction/compactor.js";
 import { estimateConversationTokens } from "../core/compaction/token-estimator.js";
@@ -42,7 +48,7 @@ import { loadCustomCommands } from "../core/custom-commands.js";
 import { buildSystemPrompt } from "../system-prompt.js";
 import { extractPlanSteps, findCompletedMarkers, markStepsCompleted, stripDoneMarkers, } from "../utils/plan-steps.js";
 import { getMCPServers } from "../core/mcp/index.js";
-import { trimFlushedItems, flushOnTurnText, flushOnTurnEnd } from "./live-item-flush.js";
+import { trimFlushedItems, flushOnTurnText, flushOnTurnEnd, flushOverflow, } from "./live-item-flush.js";
 import { Buddy } from "./buddy/Buddy.js";
 // ── Provider Error Hints ──────────────────────────────────
 /** Detect provider-side errors and return a user-facing hint. */
@@ -264,22 +270,23 @@ function markTaskInProgress(cwd, taskId) {
 // ── App Component ──────────────────────────────────────────
 export function App(props) {
     const theme = useTheme();
+    const switchTheme = useSetTheme();
     const { stdout } = useStdout();
     const { columns, resizeKey } = useTerminalSize();
     // Hoisted before terminal title hook so it can reference them
     const [lastUserMessage, setLastUserMessage] = useState("");
+    const [exitPending, setExitPending] = useState(false);
     const [planMode, setPlanMode] = useState(false);
+    const planModeLocalRef = useRef(false);
+    planModeLocalRef.current = planMode;
     // Terminal title — updated later after agentLoop is created
     // (hoisted here so the hook is always called in the same order)
-    const [titlePhase, setTitlePhase] = useState("idle");
     const [titleRunning, setTitleRunning] = useState(false);
-    const [titleToolNames, setTitleToolNames] = useState([]);
+    const [sessionTitle, setSessionTitle] = useState(undefined);
+    const sessionTitleGeneratedRef = useRef(false);
     useTerminalTitle({
-        phase: titlePhase,
         isRunning: titleRunning,
-        userMessage: lastUserMessage,
-        activeToolNames: titleToolNames,
-        planMode,
+        sessionTitle,
     });
     // Items scrolled into Static (history).  For restored sessions, skip the
     // banner and add restored items via useEffect so Ink's <Static> treats them
@@ -322,20 +329,38 @@ export function App(props) {
     const persistedIndexRef = useRef(messagesRef.current.length);
     /** Last actual API-reported input token count (from turn_end). */
     const lastActualTokensRef = useRef(0);
-    /** Timestamp of last compaction — used for time-based cooldown. */
+    /** Timestamp (ms) when lastActualTokensRef was last updated by turn_end. */
+    const lastActualTokensTimestampRef = useRef(0);
+    /** Timestamp of last compaction — used for time-based cooldown and staleness detection. */
     const lastCompactionTimeRef = useRef(0);
     const getId = () => String(nextIdRef.current++);
     // Two-phase flush: items waiting to be moved to Static history after the
     // live area has been cleared and Ink has committed the smaller output.
     const pendingFlushRef = useRef([]);
+    const [flushGeneration, setFlushGeneration] = useState(0);
+    /** Queue items for two-phase flush and signal the drain effect. */
+    const queueFlush = useCallback((items) => {
+        if (items.length === 0)
+            return;
+        pendingFlushRef.current = [...pendingFlushRef.current, ...items];
+        setFlushGeneration((g) => g + 1);
+    }, []);
     // Derive credentials for the current provider
     const currentCreds = props.credentialsByProvider?.[currentProvider];
     const activeApiKey = currentCreds?.accessToken ?? props.apiKey;
     const activeAccountId = currentCreds?.accountId ?? props.accountId;
+    const activeBaseUrl = currentCreds?.baseUrl ?? props.baseUrl;
     // Load git branch
     useEffect(() => {
         getGitBranch(props.cwd).then(setGitBranch);
     }, [props.cwd]);
+    // Periodic update check during long sessions
+    useEffect(() => {
+        startPeriodicUpdateCheck(props.version, (msg) => {
+            setLiveItems((prev) => [...prev, { kind: "info", text: msg, id: getId() }]);
+        });
+        return () => stopPeriodicUpdateCheck();
+    }, [props.version]);
     // Load custom commands from .ezcoder/commands/
     const [customCommands, setCustomCommands] = useState([]);
     const reloadCustomCommands = useCallback(() => {
@@ -392,7 +417,11 @@ export function App(props) {
                     stdout?.write("\x1b[2J\x1b[3J\x1b[H");
                     setPlanAutoExpand(true);
                     setOverlay("plan");
-                    planOverlayPendingRef.current = false;
+                    // Don't clear planOverlayPendingRef here — keep it true until
+                    // the user actually approves/rejects the plan. Clearing it on a
+                    // timer causes a race where agent_done fires after the 300ms
+                    // timeout but before the user interacts, triggering a premature
+                    // completion sound.
                 }, 300);
                 return ("Plan submitted. Exiting plan mode.\n" +
                     "The plan pane is opening for user review.\n" +
@@ -461,17 +490,24 @@ export function App(props) {
                 signal: undefined,
                 approvedPlanPath: approvedPlanPathRef.current,
             });
-            // Replace spinner with completed notice
-            setLiveItems((prev) => prev.map((item) => item.id === spinId
-                ? {
-                    kind: "compacted",
-                    originalCount: result.result.originalCount,
-                    newCount: result.result.newCount,
-                    tokensBefore: result.result.tokensBeforeEstimate,
-                    tokensAfter: result.result.tokensAfterEstimate,
-                    id: spinId,
-                }
-                : item));
+            if (result.result.compacted) {
+                // Replace spinner with completed notice
+                setLiveItems((prev) => prev.map((item) => item.id === spinId
+                    ? {
+                        kind: "compacted",
+                        originalCount: result.result.originalCount,
+                        newCount: result.result.newCount,
+                        tokensBefore: result.result.tokensBeforeEstimate,
+                        tokensAfter: result.result.tokensAfterEstimate,
+                        id: spinId,
+                    }
+                    : item));
+            }
+            else {
+                // Nothing was actually compacted — remove spinner silently
+                log("INFO", "compaction", `Compaction skipped: ${result.result.reason ?? "unknown"}`);
+                setLiveItems((prev) => prev.filter((item) => item.id !== spinId));
+            }
             return result.messages;
         }
         catch (err) {
@@ -502,7 +538,6 @@ export function App(props) {
         if (options?.force) {
             const result = await compactConversation(messages);
             lastCompactionTimeRef.current = Date.now();
-            lastActualTokensRef.current = 0; // Reset stale pre-compaction count
             return result;
         }
         if (!autoCompact)
@@ -513,73 +548,41 @@ export function App(props) {
             return messages;
         }
         const contextWindow = getContextWindow(currentModel);
-        // Prefer actual API-reported tokens over char-based estimate
-        const actualTokens = lastActualTokensRef.current > 0 ? lastActualTokensRef.current : undefined;
+        // Prefer actual API-reported tokens over char-based estimate, but only
+        // when the token count was recorded AFTER the most recent compaction.
+        // A count from before compaction is stale — it reflects the old context
+        // size and would trigger compaction again immediately for no reason.
+        const tokensFresh = lastActualTokensTimestampRef.current > lastCompactionTimeRef.current;
+        const actualTokens = lastActualTokensRef.current > 0 && tokensFresh ? lastActualTokensRef.current : undefined;
         if (shouldCompact(messages, contextWindow, threshold, actualTokens)) {
+            const before = messages.length;
             const result = await compactConversation(messages);
             lastCompactionTimeRef.current = Date.now();
-            lastActualTokensRef.current = 0; // Reset stale pre-compaction count
+            // If compaction was a no-op (e.g. too few middle messages to summarize),
+            // return the original reference so the agent loop doesn't replace messages.
+            if (result.length === before)
+                return messages;
             return result;
         }
         return messages;
     }, [currentModel, compactConversation]);
-    // ── Background task bar state ───────────────────────────
-    const [bgTasks, setBgTasks] = useState([]);
-    const [taskBarFocused, setTaskBarFocused] = useState(false);
-    const [taskBarExpanded, setTaskBarExpanded] = useState(false);
-    const [selectedTaskIndex, setSelectedTaskIndex] = useState(0);
-    // Poll ProcessManager every 2s for running tasks
-    useEffect(() => {
-        if (!props.processManager)
-            return;
-        const pm = props.processManager;
-        const poll = () => {
-            const running = pm.list().filter((p) => p.exitCode === null);
-            setBgTasks(running);
-        };
-        poll();
-        const interval = setInterval(poll, 2000);
-        return () => clearInterval(interval);
-    }, [props.processManager]);
-    // Auto-exit task panel when all tasks gone
-    useEffect(() => {
-        if (bgTasks.length === 0) {
-            setTaskBarFocused(false);
-            setTaskBarExpanded(false);
-        }
-        // Clamp selected index
-        const maxIdx = Math.min(bgTasks.length, 5) - 1;
-        if (selectedTaskIndex > maxIdx && maxIdx >= 0) {
-            setSelectedTaskIndex(maxIdx);
-        }
-    }, [bgTasks.length, selectedTaskIndex]);
-    const handleFocusTaskBar = useCallback(() => {
-        if (bgTasks.length > 0) {
-            setTaskBarFocused(true);
-        }
-    }, [bgTasks.length]);
-    const handleTaskBarExit = useCallback(() => {
-        setTaskBarFocused(false);
-        setTaskBarExpanded(false);
-    }, []);
-    const handleTaskBarExpand = useCallback(() => {
-        setTaskBarExpanded(true);
-        setSelectedTaskIndex(0);
-    }, []);
-    const handleTaskBarCollapse = useCallback(() => {
-        setTaskBarExpanded(false);
-    }, []);
+    // ── Background task bar state (external store) ──────────
+    const { bgTasks, focused: taskBarFocused, expanded: taskBarExpanded, selectedIndex: selectedTaskIndex, } = useTaskBarStore();
+    useTaskBarPolling(props.processManager);
+    const handleFocusTaskBar = useCallback(() => focusTaskBar(), []);
+    const handleTaskBarExit = useCallback(() => exitTaskBar(), []);
+    const handleTaskBarExpand = useCallback(() => expandTaskBar(), []);
+    const handleTaskBarCollapse = useCallback(() => collapseTaskBar(), []);
     const handleTaskKill = useCallback((id) => {
-        props.processManager?.stop(id);
+        if (props.processManager)
+            killTask(props.processManager, id);
     }, [props.processManager]);
-    const handleTaskNavigate = useCallback((index) => {
-        setSelectedTaskIndex(index);
-    }, []);
+    const handleTaskNavigate = useCallback((index) => navigateTaskBar(index), []);
     // Resolve fresh OAuth credentials before each agent loop run.
     // Falls back to the static props when authStorage is not available.
-    const resolveCredentials = useCallback(async () => {
+    const resolveCredentials = useCallback(async (opts) => {
         if (props.authStorage) {
-            const creds = await props.authStorage.resolveCredentials(currentProvider);
+            const creds = await props.authStorage.resolveCredentials(currentProvider, opts);
             return { apiKey: creds.accessToken, accountId: creds.accountId };
         }
         return { apiKey: activeApiKey, accountId: activeAccountId };
@@ -592,7 +595,7 @@ export function App(props) {
         maxTokens: props.maxTokens,
         thinking: thinkingEnabled ? (props.thinking ?? "medium") : undefined,
         apiKey: activeApiKey,
-        baseUrl: props.baseUrl,
+        baseUrl: activeBaseUrl,
         accountId: activeAccountId,
         resolveCredentials,
         transformContext,
@@ -613,7 +616,57 @@ export function App(props) {
                     }
                 })();
             }
-        }, [persistNewMessages, planMode, props.cwd, props.skills]),
+            // Generate session title after the first turn (background, best-effort)
+            if (!sessionTitleGeneratedRef.current) {
+                sessionTitleGeneratedRef.current = true;
+                const msgs = messagesRef.current;
+                // Find the first user message and first assistant text
+                const userMsg = msgs.find((m) => m.role === "user");
+                const assistantMsg = msgs.find((m) => m.role === "assistant");
+                const userText = typeof userMsg?.content === "string"
+                    ? userMsg.content
+                    : Array.isArray(userMsg?.content)
+                        ? userMsg.content
+                            .filter((c) => c.type === "text")
+                            .map((c) => c.text)
+                            .join(" ")
+                        : "";
+                const assistantText = typeof assistantMsg?.content === "string"
+                    ? assistantMsg.content
+                    : Array.isArray(assistantMsg?.content)
+                        ? assistantMsg.content
+                            .filter((c) => c.type === "text")
+                            .map((c) => c.text)
+                            .join(" ")
+                        : "";
+                if (userText) {
+                    generateSessionTitle({
+                        provider: currentProvider,
+                        userMessage: userText,
+                        assistantPreview: assistantText.slice(0, 200),
+                        apiKey: activeApiKey,
+                        baseUrl: activeBaseUrl,
+                        accountId: activeAccountId,
+                        resolveCredentials,
+                    }).then((title) => {
+                        setSessionTitle(title);
+                        log("INFO", "title", `Session title generated: ${title}`);
+                    }, () => {
+                        // Best-effort — silently ignore failures
+                    });
+                }
+            }
+        }, [
+            persistNewMessages,
+            planMode,
+            props.cwd,
+            props.skills,
+            currentProvider,
+            activeApiKey,
+            activeAccountId,
+            activeBaseUrl,
+            resolveCredentials,
+        ]),
         onTurnText: useCallback((text, thinking, thinkingMs) => {
             // Track [DONE:n] markers for plan step progress
             if (planStepsRef.current.length > 0) {
@@ -629,13 +682,28 @@ export function App(props) {
             // Flush all completed items from the previous turn to Static history.
             // This keeps liveItems bounded per-turn, preventing Ink's live area from
             // growing unbounded, which makes Ink's live-area re-renders expensive.
+            //
+            // Items are queued in pendingFlushRef (not sent to setHistory directly)
+            // so the Static write happens in a SEPARATE render cycle from the
+            // live-area change — avoiding both Ink cursor-math clipping and the
+            // brief duplicate that occurred when setHistory was nested inside the
+            // setLiveItems updater.
             setLiveItems((prev) => {
                 const flushed = flushOnTurnText(prev);
                 if (flushed.length > 0) {
-                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
+                    queueFlush(flushed);
                 }
                 const displayText = planStepsRef.current.length > 0 ? stripDoneMarkers(text) : text;
-                return [{ kind: "assistant", text: displayText, thinking, thinkingMs, id: getId() }];
+                return [
+                    {
+                        kind: "assistant",
+                        text: displayText,
+                        thinking,
+                        thinkingMs,
+                        planMode: planModeLocalRef.current,
+                        id: getId(),
+                    },
+                ];
             });
         }, []),
         onToolStart: useCallback((toolCallId, name, args) => {
@@ -646,7 +714,7 @@ export function App(props) {
             setLiveItems((prev) => {
                 const { flushed, remaining } = partitionCompleted(prev);
                 if (flushed.length > 0) {
-                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
+                    queueFlush(flushed);
                 }
                 return remaining;
             });
@@ -707,6 +775,24 @@ export function App(props) {
             }
         }, []),
         onToolUpdate: useCallback((toolCallId, update) => {
+            const u = update;
+            // Bash progress streaming — append output to tool_start item
+            if (u.type === "bash_progress") {
+                setLiveItems((prev) => {
+                    const idx = prev.findIndex((item) => item.kind === "tool_start" && item.toolCallId === toolCallId);
+                    if (idx === -1)
+                        return prev;
+                    const item = prev[idx];
+                    const next = [...prev];
+                    next[idx] = {
+                        ...item,
+                        progressOutput: (item.progressOutput ?? "") + String(u.output ?? ""),
+                    };
+                    return next;
+                });
+                return;
+            }
+            // Subagent updates
             setLiveItems((prev) => {
                 const groupIdx = prev.findIndex((item) => item.kind === "subagent_group");
                 if (groupIdx === -1)
@@ -759,7 +845,7 @@ export function App(props) {
                     // Flush completed items to Static to keep the live area small
                     const { flushed, remaining } = partitionCompleted(next);
                     if (flushed.length > 0) {
-                        setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
+                        queueFlush(flushed);
                     }
                     return remaining;
                 });
@@ -818,7 +904,14 @@ export function App(props) {
                     // Flush completed items to Static to keep the live area small
                     const { flushed, remaining } = partitionCompleted(updated);
                     if (flushed.length > 0) {
-                        setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
+                        queueFlush(flushed);
+                        return remaining;
+                    }
+                    // Overflow flush: if live area is still large, flush aggressively
+                    const overflow = flushOverflow(updated);
+                    if (overflow.flushed.length > 0) {
+                        queueFlush(overflow.flushed);
+                        return overflow.remaining;
                     }
                     return remaining;
                 });
@@ -831,7 +924,7 @@ export function App(props) {
             setLiveItems((prev) => {
                 const { flushed, remaining } = partitionCompleted(prev);
                 if (flushed.length > 0) {
-                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
+                    queueFlush(flushed);
                 }
                 return [
                     ...remaining,
@@ -882,7 +975,7 @@ export function App(props) {
                 // Flush completed items to Static
                 const { flushed, remaining } = partitionCompleted(updated);
                 if (flushed.length > 0) {
-                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
+                    queueFlush(flushed);
                 }
                 return remaining;
             });
@@ -895,15 +988,19 @@ export function App(props) {
                 ...(usage.cacheRead != null && { cacheRead: String(usage.cacheRead) }),
                 ...(usage.cacheWrite != null && { cacheWrite: String(usage.cacheWrite) }),
             });
-            // Track actual token count for compaction decisions
+            // Track actual token count for compaction decisions.
+            // Anthropic has separate input/output limits — only count input.
+            // All other providers share the context window — count both.
+            const inputContext = usage.inputTokens + (usage.cacheRead ?? 0) + (usage.cacheWrite ?? 0);
             lastActualTokensRef.current =
-                usage.inputTokens + (usage.cacheRead ?? 0) + (usage.cacheWrite ?? 0);
+                currentProvider === "anthropic" ? inputContext : inputContext + usage.outputTokens;
+            lastActualTokensTimestampRef.current = Date.now();
             // For tool-only turns (no text), flush completed items to Static so
             // liveItems doesn't grow unbounded across consecutive tool-only turns.
             setLiveItems((prev) => {
                 const { flushed, remaining } = flushOnTurnEnd(prev, stopReason);
                 if (flushed.length > 0) {
-                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
+                    queueFlush(flushed);
                 }
                 return remaining;
             });
@@ -926,9 +1023,8 @@ export function App(props) {
             // separate render cycle so the Static write never coincides with
             // a live-area height change in the same frame.
             setLiveItems((prev) => {
-                if (prev.length > 0) {
-                    pendingFlushRef.current = prev;
-                }
+                if (prev.length > 0)
+                    queueFlush(prev);
                 return [];
             });
             // Run-all: auto-start next pending task after a short delay
@@ -1007,9 +1103,8 @@ export function App(props) {
                 ? undefined
                 : content.filter((c) => c.type === "image").length || undefined;
             setLiveItems((prev) => {
-                if (prev.length > 0) {
-                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(prev)]));
-                }
+                if (prev.length > 0)
+                    queueFlush(prev);
                 return [];
             });
             const userItem = {
@@ -1036,14 +1131,11 @@ export function App(props) {
             pendingFlushRef.current = [];
             setHistory((h) => compactHistory([...h, ...trimFlushedItems(items)]));
         }
-    });
+    }, [flushGeneration]);
     // Sync terminal title with agent loop state
-    const activeToolNamesKey = agentLoop.activeToolCalls.map((tc) => tc.name).join(",");
     useEffect(() => {
-        setTitlePhase(agentLoop.activityPhase);
         setTitleRunning(agentLoop.isRunning);
-        setTitleToolNames(agentLoop.activeToolCalls.map((tc) => tc.name));
-    }, [agentLoop.activityPhase, agentLoop.isRunning, activeToolNamesKey]);
+    }, [agentLoop.isRunning]);
     // Terminal progress bar (OSC 9;4) — pulsing bar in supported terminals
     useTerminalProgress(agentLoop.isRunning, agentLoop.activeToolCalls.length > 0);
     // Animated thinking border — derived from global animation tick
@@ -1084,6 +1176,9 @@ export function App(props) {
             // Clear terminal screen + scrollback — needed because Ink's <Static>
             // writes directly to stdout and can't be removed by clearing React state
             stdout?.write("\x1b[2J\x1b[3J\x1b[H");
+            // Discard any items queued for two-phase flush so they don't leak
+            // into the new session after the Static remount.
+            pendingFlushRef.current = [];
             setHistory([{ kind: "banner", id: "banner" }]);
             setLiveItems([]);
             setDoneStatus(null);
@@ -1094,11 +1189,22 @@ export function App(props) {
             void (async () => {
                 const newPrompt = await buildSystemPrompt(props.cwd, props.skills, planMode, undefined);
                 messagesRef.current = [{ role: "system", content: newPrompt }];
+                persistedIndexRef.current = messagesRef.current.length;
             })();
             agentLoop.reset();
+            setSessionTitle(undefined);
+            sessionTitleGeneratedRef.current = false;
+            // Bump staticKey to force Ink's <Static> to remount, discarding its
+            // internal record of previously rendered items so they don't reappear.
+            setStaticKey((k) => k + 1);
             setLiveItems([{ kind: "info", text: "Session cleared.", id: getId() }]);
             return;
         }
+        // Handle /theme — open theme selector overlay
+        if (trimmed === "/theme" || trimmed === "/t") {
+            setOverlay("theme");
+            return;
+        }
         // Handle /plan — toggle plan mode
         if (trimmed === "/plan" || trimmed === "/plan on") {
             setPlanMode(true);
@@ -1175,7 +1281,7 @@ export function App(props) {
                 // Move live items into history before starting
                 setLiveItems((prev) => {
                     if (prev.length > 0) {
-                        setHistory((h) => compactHistory([...h, ...trimFlushedItems(prev)]));
+                        pendingFlushRef.current = [...pendingFlushRef.current, ...prev];
                     }
                     return [];
                 });
@@ -1278,10 +1384,14 @@ export function App(props) {
             setLiveItems((prev) => [...prev, queuedItem]);
             return;
         }
-        // Move any remaining live items into history (Static) before starting new turn
+        // Move any remaining live items into history (Static) before starting a
+        // new turn. Must go through queueFlush so flushGeneration bumps and the
+        // drain effect actually runs — mutating pendingFlushRef directly here
+        // stashed items that nothing was signalled to pick up, so they sat in
+        // limbo until some unrelated later code path happened to call queueFlush.
         setLiveItems((prev) => {
             if (prev.length > 0) {
-                setHistory((h) => compactHistory([...h, ...trimFlushedItems(prev)]));
+                queueFlush(prev);
             }
             return [];
         });
@@ -1323,15 +1433,16 @@ export function App(props) {
             ]);
         }
     }, [agentLoop, props.onSlashCommand, compactConversation]);
+    const handleDoubleExit = useDoublePress(setExitPending, () => process.exit(0));
     const handleAbort = useCallback(() => {
         if (agentLoop.isRunning) {
             agentLoop.clearQueue();
             agentLoop.abort();
         }
         else {
-            process.exit(0);
+            handleDoubleExit();
         }
-    }, [agentLoop]);
+    }, [agentLoop, handleDoubleExit]);
     const handleToggleThinking = useCallback(() => {
         setThinkingEnabled((prev) => {
             const next = !prev;
@@ -1355,40 +1466,57 @@ export function App(props) {
         const newProvider = value.slice(0, colonIdx);
         const newModelId = value.slice(colonIdx + 1);
         log("INFO", "model", `Model changed`, { provider: newProvider, model: newModelId });
-        // Reconnect MCP servers when provider changes
+        // Handle provider-specific tool changes when provider changes
         setCurrentProvider((prevProvider) => {
-            if (newProvider !== prevProvider && props.mcpManager) {
-                void (async () => {
-                    // Disconnect old MCP servers
-                    await props.mcpManager.dispose();
-                    // Remove old MCP tools, connect new ones
-                    let apiKey;
-                    if (newProvider === "glm" && props.authStorage) {
+            if (newProvider !== prevProvider) {
+                // Add/remove client-side web_search tool based on provider.
+                // Anthropic has native server-side web search; all other providers need the client tool.
+                setCurrentTools((prev) => {
+                    const hasWebSearch = prev.some((t) => t.name === "web_search");
+                    if (newProvider === "anthropic" && hasWebSearch) {
+                        // Switching TO anthropic — remove client-side web_search (server-side handles it)
+                        return prev.filter((t) => t.name !== "web_search");
+                    }
+                    else if (newProvider !== "anthropic" && !hasWebSearch) {
+                        // Switching FROM anthropic — add client-side web_search
+                        return [...prev, createWebSearchTool()];
+                    }
+                    return prev;
+                });
+                // Reconnect MCP servers
+                if (props.mcpManager) {
+                    void (async () => {
+                        // Disconnect old MCP servers
+                        await props.mcpManager.dispose();
+                        // Remove old MCP tools, connect new ones
+                        let apiKey;
+                        if (newProvider === "glm" && props.authStorage) {
+                            try {
+                                const glmCreds = await props.authStorage.resolveCredentials("glm");
+                                apiKey = glmCreds.accessToken;
+                            }
+                            catch {
+                                // GLM not configured — skip Z.AI MCP servers
+                            }
+                        }
+                        else if (newProvider === "glm") {
+                            apiKey = props.credentialsByProvider?.["glm"]?.accessToken;
+                        }
                         try {
-                            const glmCreds = await props.authStorage.resolveCredentials("glm");
-                            apiKey = glmCreds.accessToken;
+                            const mcpTools = await props.mcpManager.connectAll(getMCPServers(newProvider, apiKey));
+                            setCurrentTools((prev) => [
+                                ...prev.filter((t) => !t.name.startsWith("mcp__")),
+                                ...mcpTools,
+                            ]);
+                            log("INFO", "mcp", `MCP servers reconnected for provider ${newProvider}`);
                         }
-                        catch {
-                            // GLM not configured — skip Z.AI MCP servers
+                        catch (err) {
+                            log("WARN", "mcp", `MCP reconnection failed: ${err instanceof Error ? err.message : String(err)}`);
+                            // Still remove old MCP tools even if reconnection fails
+                            setCurrentTools((prev) => prev.filter((t) => !t.name.startsWith("mcp__")));
                         }
-                    }
-                    else if (newProvider === "glm") {
-                        apiKey = props.credentialsByProvider?.["glm"]?.accessToken;
-                    }
-                    try {
-                        const mcpTools = await props.mcpManager.connectAll(getMCPServers(newProvider, apiKey));
-                        setCurrentTools((prev) => [
-                            ...prev.filter((t) => !t.name.startsWith("mcp__")),
-                            ...mcpTools,
-                        ]);
-                        log("INFO", "mcp", `MCP servers reconnected for provider ${newProvider}`);
-                    }
-                    catch (err) {
-                        log("WARN", "mcp", `MCP reconnection failed: ${err instanceof Error ? err.message : String(err)}`);
-                        // Still remove old MCP tools even if reconnection fails
-                        setCurrentTools((prev) => prev.filter((t) => !t.name.startsWith("mcp__")));
-                    }
-                })();
+                    })();
+                }
             }
             return newProvider;
         });
@@ -1408,12 +1536,28 @@ export function App(props) {
             });
         }
     }, [props.settingsFile, props.mcpManager, props.credentialsByProvider, props.authStorage]);
+    const handleThemeSelect = useCallback((name) => {
+        setOverlay(null);
+        if (switchTheme) {
+            switchTheme(name);
+        }
+        // Persist to settings
+        if (props.settingsFile) {
+            const sm = new SettingsManager(props.settingsFile);
+            sm.load().then(() => sm.set("theme", name));
+        }
+        setLiveItems((prev) => [
+            ...prev,
+            { kind: "info", text: `Theme switched to: ${name}`, id: getId() },
+        ]);
+    }, [switchTheme, props.settingsFile]);
     // All available slash commands for the command palette
     const allCommands = useMemo(() => [
         { name: "model", aliases: ["m"], description: "Switch model" },
         { name: "compact", aliases: ["c"], description: "Compact conversation" },
         { name: "clear", aliases: [], description: "Clear session and terminal" },
         { name: "quit", aliases: ["q", "exit"], description: "Exit the agent" },
+        { name: "theme", aliases: ["t"], description: "Switch theme" },
         { name: "plan", aliases: [], description: "Toggle plan mode (on/off)" },
         { name: "plans", aliases: [], description: "Open plans pane" },
         ...PROMPT_COMMANDS.map((cmd) => ({
@@ -1432,15 +1576,15 @@ export function App(props) {
             case "tombstone":
                 return null;
             case "banner":
-                return (_jsx(Banner, { version: props.version, model: props.model, provider: props.provider, cwd: props.cwd, taskCount: taskCount }, item.id));
+                return (_jsx(Banner, { version: props.version, model: currentModel, provider: currentProvider, cwd: props.cwd, taskCount: taskCount }, item.id));
             case "user":
                 return (_jsx(UserMessage, { text: item.text, imageCount: item.imageCount, pasteInfo: item.pasteInfo }, item.id));
             case "task":
                 return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { wrap: "wrap", children: [_jsx(Text, { color: theme.success, bold: true, children: "▶ " }), _jsx(Text, { color: theme.textDim, children: "Task: " }), _jsx(Text, { color: theme.success, children: item.title })] }) }, item.id));
             case "assistant":
-                return (_jsx(AssistantMessage, { text: item.text, thinking: item.thinking, thinkingMs: item.thinkingMs, showThinking: props.showThinking }, item.id));
+                return (_jsx(AssistantMessage, { text: item.text, thinking: item.thinking, thinkingMs: item.thinkingMs, showThinking: props.showThinking, planMode: item.planMode }, item.id));
             case "tool_start":
-                return _jsx(ToolExecution, { status: "running", name: item.name, args: item.args }, item.id);
+                return (_jsx(ToolExecution, { status: "running", name: item.name, args: item.args, progressOutput: item.progressOutput }, item.id));
             case "tool_done":
                 return (_jsx(ToolExecution, { status: "done", name: item.name, args: item.args, result: item.result, isError: item.isError, details: item.details }, item.id));
             case "tool_group":
@@ -1456,7 +1600,7 @@ export function App(props) {
             case "info":
                 return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsx(Text, { color: theme.textDim, wrap: "wrap", children: item.text }) }, item.id));
             case "plan_transition":
-                return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsxs(Text, { color: theme.planPrimary, bold: true, wrap: "wrap", children: [item.active ? "⊞ " : "⊟ ", item.text] }) }, item.id));
+                return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsxs(Text, { color: theme.planPrimary, bold: true, wrap: "wrap", children: [item.active ? "● " : "● ", item.text] }) }, item.id));
             case "queued":
                 return (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.accent, bold: true, children: "⏳ Queued: " }), _jsxs(Text, { color: theme.text, wrap: "wrap", children: [item.text, item.imageCount
                                     ? ` (+${item.imageCount} image${item.imageCount > 1 ? "s" : ""})`
@@ -1547,11 +1691,17 @@ export function App(props) {
                     setStaticKey((k) => k + 1);
                     setOverlay(null);
                 } })) : isPlanView ? (_jsx(PlanOverlay, { cwd: props.cwd, autoExpandNewest: planAutoExpand, onClose: () => {
+                    planOverlayPendingRef.current = false;
                     stdout?.write("\x1b[2J\x1b[3J\x1b[H");
                     setStaticKey((k) => k + 1);
                     setPlanAutoExpand(false);
                     setOverlay(null);
                 }, onApprove: (planPath) => {
+                    log("INFO", "plan", "Plan approved — transitioning to implementation", {
+                        planPath,
+                    });
+                    // Plan overlay dismissed — allow future onDone to fire normally
+                    planOverlayPendingRef.current = false;
                     // Store approved plan path — will be injected into the new system prompt
                     approvedPlanPathRef.current = planPath;
                     // Extract plan steps for progress tracking
@@ -1569,28 +1719,36 @@ export function App(props) {
                     setOverlay(null);
                     // Rebuild system prompt with the approved plan, then reset the session
                     void (async () => {
-                        const newPrompt = await buildSystemPrompt(props.cwd, props.skills, false, planPath);
-                        messagesRef.current = [{ role: "system", content: newPrompt }];
-                        agentLoop.reset();
-                        persistedIndexRef.current = messagesRef.current.length;
-                        // Create a new session file
-                        const sm = sessionManagerRef.current;
-                        if (sm) {
-                            const s = await sm.create(props.cwd, currentProvider, currentModel);
-                            sessionPathRef.current = s.path;
+                        try {
+                            const newPrompt = await buildSystemPrompt(props.cwd, props.skills, false, planPath);
+                            messagesRef.current = [{ role: "system", content: newPrompt }];
+                            agentLoop.reset();
+                            persistedIndexRef.current = messagesRef.current.length;
+                            // Create a new session file
+                            const sm = sessionManagerRef.current;
+                            if (sm) {
+                                const s = await sm.create(props.cwd, currentProvider, currentModel);
+                                sessionPathRef.current = s.path;
+                            }
+                            // Start implementation with a clean context
+                            setLiveItems([
+                                {
+                                    kind: "info",
+                                    text: "Plan approved — starting fresh session for implementation",
+                                    id: getId(),
+                                },
+                            ]);
+                            setDoneStatus(null);
+                            await agentLoop.run("The plan has been approved. Implement it now, following each step in order.");
+                        }
+                        catch (err) {
+                            const errMsg = err instanceof Error ? err.message : String(err);
+                            log("ERROR", "error", errMsg);
+                            setLiveItems((prev) => [...prev, { kind: "error", message: errMsg, id: getId() }]);
                         }
-                        // Start implementation with a clean context
-                        setLiveItems([
-                            {
-                                kind: "info",
-                                text: "Plan approved — starting fresh session for implementation",
-                                id: getId(),
-                            },
-                        ]);
-                        setDoneStatus(null);
-                        await agentLoop.run("The plan has been approved. Implement it now, following each step in order.");
                     })();
                 }, onReject: (planPath, feedback) => {
+                    planOverlayPendingRef.current = false;
                     stdout?.write("\x1b[2J\x1b[3J\x1b[H");
                     setStaticKey((k) => k + 1);
                     setPlanAutoExpand(false);
@@ -1603,10 +1761,15 @@ export function App(props) {
                         ...prev,
                         { kind: "info", text: `Plan rejected — "${feedback}"`, id: getId() },
                     ]);
-                    void agentLoop.run(msg);
+                    void agentLoop.run(msg).catch((err) => {
+                        const errMsg = err instanceof Error ? err.message : String(err);
+                        log("ERROR", "error", errMsg);
+                        setLiveItems((prev) => [...prev, { kind: "error", message: errMsg, id: getId() }]);
+                    });
                 } })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingRight: 1, children: [liveItems.map((item) => renderItem(item)), _jsx(StreamingArea, { isRunning: agentLoop.isRunning, streamingText: agentLoop.streamingText, streamingThinking: agentLoop.streamingThinking, showThinking: props.showThinking, thinkingMs: agentLoop.thinkingMs, planMode: planMode })] }), agentLoop.isRunning && agentLoop.activityPhase !== "idle" ? (_jsx(Box, { marginTop: 1, borderStyle: "round", borderColor: agentLoop.activityPhase === "thinking"
                             ? THINKING_BORDER_COLORS[thinkingBorderFrame]
-                            : "transparent", paddingLeft: 1, paddingRight: 1, width: columns, children: _jsx(ActivityIndicator, { phase: agentLoop.activityPhase, elapsedMs: agentLoop.elapsedMs, thinkingMs: agentLoop.thinkingMs, isThinking: agentLoop.isThinking, tokenEstimate: agentLoop.streamedTokenEstimate, charCountRef: agentLoop.charCountRef, realTokensAccumRef: agentLoop.realTokensAccumRef, userMessage: lastUserMessage, activeToolNames: agentLoop.activeToolCalls.map((tc) => tc.name), planMode: planMode, retryInfo: agentLoop.retryInfo, planDone: planSteps.filter((s) => s.completed).length, planTotal: planSteps.length }) })) : (doneStatus && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.success, children: ["✻ ", doneStatus.verb, " ", formatDuration(doneStatus.durationMs)] }) }))), agentLoop.queuedCount > 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.accent, children: ["⏳ ", agentLoop.queuedCount, " message", agentLoop.queuedCount > 1 ? "s" : "", " queued"] }) })), _jsx(InputArea, { onSubmit: handleSubmit, onAbort: handleAbort, disabled: agentLoop.isRunning, isActive: !taskBarFocused && !overlay, onDownAtEnd: handleFocusTaskBar, onShiftTab: handleToggleThinking, onToggleTasks: () => {
+                            : "transparent", paddingLeft: 1, paddingRight: 1, width: columns, children: _jsx(ActivityIndicator, { phase: agentLoop.activityPhase, elapsedMs: agentLoop.elapsedMs, runStartRef: agentLoop.runStartRef, thinkingMs: agentLoop.thinkingMs, isThinking: agentLoop.isThinking, tokenEstimate: agentLoop.streamedTokenEstimate, charCountRef: agentLoop.charCountRef, realTokensAccumRef: agentLoop.realTokensAccumRef, userMessage: lastUserMessage, activeToolNames: agentLoop.activeToolCalls.map((tc) => tc.name), planMode: planMode, retryInfo: agentLoop.retryInfo, planDone: planSteps.filter((s) => s.completed).length, planTotal: planSteps.length }) })) : agentLoop.stallError ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.warning, children: "⚠ API provider stream interrupted — retries exhausted." }), _jsx(Text, { color: theme.textDim, children: "  Your conversation is preserved. Send a message to continue." })] })) : (doneStatus &&
+                        !agentLoop.isRunning && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.success, children: ["✻ ", doneStatus.verb, " ", formatDuration(doneStatus.durationMs)] }) }))), agentLoop.queuedCount > 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.accent, children: ["⏳ ", agentLoop.queuedCount, " message", agentLoop.queuedCount > 1 ? "s" : "", " queued"] }) })), _jsx(InputArea, { onSubmit: handleSubmit, onAbort: handleAbort, disabled: agentLoop.isRunning, isActive: !taskBarFocused && !overlay, onDownAtEnd: handleFocusTaskBar, onShiftTab: handleToggleThinking, onToggleTasks: () => {
                             stdout?.write("\x1b[2J\x1b[3J\x1b[H");
                             setOverlay("tasks");
                         }, onToggleSkills: () => {
@@ -1625,6 +1788,6 @@ export function App(props) {
                                     id: getId(),
                                 },
                             ]);
-                        }, cwd: props.cwd, commands: allCommands }), overlay === "model" ? (_jsx(ModelSelector, { onSelect: handleModelSelect, onCancel: () => setOverlay(null), loggedInProviders: props.loggedInProviders ?? [currentProvider], currentModel: currentModel, currentProvider: currentProvider })) : (_jsx(Footer, { model: currentModel, tokensIn: agentLoop.contextUsed, linesAdded: agentLoop.linesChanged.added, linesRemoved: agentLoop.linesChanged.removed, cwd: props.cwd, gitBranch: gitBranch, thinkingEnabled: thinkingEnabled, planMode: planMode })), buddyEnabled && _jsx(Buddy, { phase: agentLoop.activityPhase }), bgTasks.length > 0 && (_jsx(BackgroundTasksBar, { tasks: bgTasks, focused: taskBarFocused, expanded: taskBarExpanded, selectedIndex: selectedTaskIndex, onExpand: handleTaskBarExpand, onCollapse: handleTaskBarCollapse, onKill: handleTaskKill, onExit: handleTaskBarExit, onNavigate: handleTaskNavigate }))] }))] }));
+                        }, cwd: props.cwd, commands: allCommands }), overlay === "model" ? (_jsx(ModelSelector, { onSelect: handleModelSelect, onCancel: () => setOverlay(null), loggedInProviders: props.loggedInProviders ?? [currentProvider], currentModel: currentModel, currentProvider: currentProvider })) : overlay === "theme" ? (_jsx(ThemeSelector, { onSelect: handleThemeSelect, onCancel: () => setOverlay(null), currentTheme: theme.name })) : (_jsx(Footer, { model: currentModel, tokensIn: agentLoop.contextUsed, cwd: props.cwd, gitBranch: gitBranch, thinkingEnabled: thinkingEnabled, planMode: planMode, exitPending: exitPending })), buddyEnabled && _jsx(Buddy, { phase: agentLoop.activityPhase }), bgTasks.length > 0 && (_jsx(BackgroundTasksBar, { tasks: bgTasks, focused: taskBarFocused, expanded: taskBarExpanded, selectedIndex: selectedTaskIndex, onExpand: handleTaskBarExpand, onCollapse: handleTaskBarCollapse, onKill: handleTaskKill, onExit: handleTaskBarExit, onNavigate: handleTaskNavigate }))] }))] }));
 }
 //# sourceMappingURL=App.js.map