@prestyj/cli 4.2.15 → 4.2.44

package/dist/ui/App.js

@@ -12,6 +12,7 @@ import { useAgentLoop } from "./hooks/useAgentLoop.js";
 import { UserMessage } from "./components/UserMessage.js";
 import { AssistantMessage } from "./components/AssistantMessage.js";
 import { ToolExecution } from "./components/ToolExecution.js";
+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";
@@ -20,10 +21,13 @@ import { ActivityIndicator } from "./components/ActivityIndicator.js";
 import { InputArea } from "./components/InputArea.js";
 import { Footer } from "./components/Footer.js";
 import { Banner } from "./components/Banner.js";
+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 { BackgroundTasksBar } from "./components/BackgroundTasksBar.js";
 import { useTheme } from "./theme/theme.js";
+import { useAnimationTick, deriveFrame } from "./components/AnimationContext.js";
 import { useTerminalTitle } from "./hooks/useTerminalTitle.js";
 import { getGitBranch } from "../utils/git.js";
 import { getModel, getContextWindow } from "../core/model-registry.js";
@@ -34,28 +38,29 @@ import { shouldCompact, compact } from "../core/compaction/compactor.js";
 import { estimateConversationTokens } from "../core/compaction/token-estimator.js";
 import { PROMPT_COMMANDS, getPromptCommand } from "../core/prompt-commands.js";
 import { loadCustomCommands } from "../core/custom-commands.js";
+import { buildSystemPrompt } from "../system-prompt.js";
 import { getMCPServers } from "../core/mcp/index.js";
-import { pruneHistory, flushOnTurnText, flushOnTurnEnd } from "./live-item-flush.js";
+import { trimFlushedItems, flushOnTurnText, flushOnTurnEnd } from "./live-item-flush.js";
 // ── Provider Error Hints ──────────────────────────────────
 /** Detect provider-side errors and return a user-facing hint. */
 function getProviderErrorHint(message) {
     const lower = message.toLowerCase();
-    // Billing / insufficient balance (some providers use 429 for this)
-    if (lower.includes("insufficient balance") ||
-        lower.includes("quota exceeded") ||
-        lower.includes("billing")) {
-        return "Your account has insufficient balance or no active resource package. Top up your account at the provider's dashboard.";
-    }
     if (lower.includes("overloaded") || lower.includes("engine_overloaded")) {
         return "This is a provider-side issue — their servers are under heavy load. Try again in a moment.";
     }
+    if (lower.includes("insufficient balance") ||
+        lower.includes("no resource package") ||
+        lower.includes("quota exceeded") ||
+        lower.includes("recharge")) {
+        return "The provider reports a billing or quota issue. Check your account balance or resource package.";
+    }
     if (lower.includes("rate limit") ||
         lower.includes("too many requests") ||
         lower.includes("429")) {
         return "You've hit the provider's rate limit. Wait a moment before retrying.";
     }
     if (lower.includes("502") || lower.includes("bad gateway")) {
-        return "The provider returned a server error. This is not an ezcoder issue — try again shortly.";
+        return "The provider returned a server error. This is not a ezcoder issue — try again shortly.";
     }
     if (lower.includes("503") || lower.includes("service unavailable")) {
         return "The provider's service is temporarily unavailable. Try again in a moment.";
@@ -64,12 +69,39 @@ function getProviderErrorHint(message) {
         return "The request to the provider timed out. Their servers may be slow — try again.";
     }
     if (lower.includes("500") && lower.includes("internal server error")) {
-        return "The provider experienced an internal error. This is not an ezcoder issue.";
+        return "The provider experienced an internal error. This is not a ezcoder issue.";
+    }
+    if (lower.includes("does not recognize the requested model") ||
+        (lower.includes("model") &&
+            (lower.includes("not exist") || lower.includes("not found") || lower.includes("no access")))) {
+        return "Use /model to switch to a different model, or check that your account has access to the requested model.";
     }
     return null;
 }
-// pruneHistory, flushOnTurnText, flushOnTurnEnd, MAX_HISTORY_ITEMS
-// are imported from ./live-item-flush.ts
+/** Tools that get aggregated into a single compact group when concurrent. */
+const AGGREGATABLE_TOOLS = new Set(["read", "grep", "find", "ls"]);
+/**
+ * Cap memory by replacing old items with tiny tombstones. Ink's <Static>
+ * tracks rendered items by array length — the array must never shrink, but
+ * we can swap out heavy objects for lightweight `{ kind: "tombstone", id }`
+ * entries so GC can reclaim the original data.
+ */
+const MAX_LIVE_HISTORY = 200;
+function compactHistory(items) {
+    if (items.length <= MAX_LIVE_HISTORY)
+        return items;
+    const cutoff = items.length - MAX_LIVE_HISTORY;
+    const compacted = new Array(items.length);
+    for (let i = 0; i < cutoff; i++) {
+        const it = items[i];
+        compacted[i] = it.kind === "tombstone" ? it : { kind: "tombstone", id: it.id };
+    }
+    for (let i = cutoff; i < items.length; i++) {
+        compacted[i] = items[i];
+    }
+    return compacted;
+}
+// flushOnTurnText, flushOnTurnEnd are imported from ./live-item-flush.ts
 // ── Duration summary ─────────────────────────────────────
 function formatDuration(ms) {
     const totalSec = Math.round(ms / 1000);
@@ -211,7 +243,7 @@ export function App(props) {
     useEffect(() => {
         if (isRestoredSession && !restoredRef.current) {
             restoredRef.current = true;
-            setHistory((prev) => pruneHistory([...prev, ...props.initialHistory]));
+            setHistory((prev) => compactHistory([...prev, ...trimFlushedItems(props.initialHistory)]));
         }
     }, [isRestoredSession, props.initialHistory]);
     // Items from the current/last turn — rendered in the live area so they stay visible
@@ -231,6 +263,9 @@ export function App(props) {
     const [currentTools, setCurrentTools] = useState(props.tools);
     const [thinkingEnabled, setThinkingEnabled] = useState(!!props.thinking);
     const messagesRef = useRef(props.messages);
+    const [planMode, setPlanMode] = useState(false);
+    const [planAutoExpand, setPlanAutoExpand] = useState(false);
+    const approvedPlanPathRef = useRef(undefined);
     const nextIdRef = useRef(0);
     const sessionManagerRef = useRef(props.sessionsDir ? new SessionManager(props.sessionsDir) : null);
     const sessionPathRef = useRef(props.sessionPath);
@@ -255,6 +290,56 @@ export function App(props) {
     useEffect(() => {
         reloadCustomCommands();
     }, [reloadCustomCommands]);
+    // ── Plan mode wiring ─────────────────────────────────────
+    // Sync planModeRef with React state
+    useEffect(() => {
+        if (props.planModeRef) {
+            props.planModeRef.current = planMode;
+        }
+    }, [planMode, props.planModeRef]);
+    // Rebuild system prompt when plan mode changes
+    useEffect(() => {
+        void (async () => {
+            const newPrompt = await buildSystemPrompt(props.cwd, props.skills, planMode, approvedPlanPathRef.current);
+            if (messagesRef.current[0]?.role === "system") {
+                messagesRef.current[0] = {
+                    role: "system",
+                    content: newPrompt,
+                };
+            }
+        })();
+    }, [planMode, props.cwd, props.skills]);
+    // Wire onEnterPlan callback ref
+    useEffect(() => {
+        if (props.onEnterPlanRef) {
+            props.onEnterPlanRef.current = (reason) => {
+                setPlanMode(true);
+                const msg = reason ? `Plan mode activated: ${reason}` : "Plan mode activated";
+                setLiveItems((prev) => [...prev, { kind: "info", text: msg, id: getId() }]);
+            };
+        }
+    }, [props.onEnterPlanRef]);
+    // Wire onExitPlan callback ref
+    useEffect(() => {
+        if (props.onExitPlanRef) {
+            props.onExitPlanRef.current = async (planPath) => {
+                // Deactivate plan mode, store approved plan path, open pane
+                setPlanMode(false);
+                approvedPlanPathRef.current = planPath;
+                // Use setTimeout to open pane after the current tool execution completes,
+                // so the turn can finish and the UI transitions cleanly
+                setTimeout(() => {
+                    stdout?.write("\x1b[2J\x1b[3J\x1b[H");
+                    setPlanAutoExpand(true);
+                    setOverlay("plan");
+                }, 300);
+                return ("Plan submitted. Exiting plan mode.\n" +
+                    "The plan pane is opening for user review.\n" +
+                    "Plan saved at: " +
+                    planPath);
+            };
+        }
+    }, [props.onExitPlanRef, stdout]);
     const persistNewMessages = useCallback(async () => {
         const sm = sessionManagerRef.current;
         const sp = sessionPathRef.current;
@@ -311,6 +396,7 @@ export function App(props) {
                 apiKey: compactApiKey,
                 contextWindow,
                 signal: undefined,
+                approvedPlanPath: approvedPlanPathRef.current,
             });
             // Replace spinner with completed notice
             setLiveItems((prev) => prev.map((item) => item.id === spinId
@@ -440,7 +526,7 @@ export function App(props) {
             setLiveItems((prev) => {
                 const flushed = flushOnTurnText(prev);
                 if (flushed.length > 0) {
-                    setHistory((h) => pruneHistory([...h, ...flushed]));
+                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
                 }
                 return [{ kind: "assistant", text, thinking, thinkingMs, id: getId() }];
             });
@@ -471,6 +557,31 @@ export function App(props) {
                     return [...prev, { kind: "subagent_group", agents: [newAgent], id: getId() }];
                 });
             }
+            else if (AGGREGATABLE_TOOLS.has(name)) {
+                // Group concurrent read-only tools into a single compact item
+                setLiveItems((prev) => {
+                    // Find an active tool group (has at least one running tool)
+                    const groupIdx = prev.findIndex((item) => item.kind === "tool_group" &&
+                        item.tools.some((t) => t.status === "running"));
+                    if (groupIdx !== -1) {
+                        const group = prev[groupIdx];
+                        const next = [...prev];
+                        next[groupIdx] = {
+                            ...group,
+                            tools: [...group.tools, { toolCallId, name, args, status: "running" }],
+                        };
+                        return next;
+                    }
+                    return [
+                        ...prev,
+                        {
+                            kind: "tool_group",
+                            tools: [{ toolCallId, name, args, status: "running" }],
+                            id: getId(),
+                        },
+                    ];
+                });
+            }
             else {
                 setLiveItems((prev) => [
                     ...prev,
@@ -533,6 +644,20 @@ export function App(props) {
             }
             else {
                 setLiveItems((prev) => {
+                    // Check if this tool is in a tool_group
+                    const groupIdx = prev.findIndex((item) => item.kind === "tool_group" &&
+                        item.tools.some((t) => t.toolCallId === toolCallId));
+                    if (groupIdx !== -1) {
+                        const group = prev[groupIdx];
+                        const next = [...prev];
+                        next[groupIdx] = {
+                            ...group,
+                            tools: group.tools.map((t) => t.toolCallId === toolCallId
+                                ? { ...t, status: "done", result, isError }
+                                : t),
+                        };
+                        return next;
+                    }
                     // Find the matching tool_start and replace it with tool_done
                     const startIdx = prev.findIndex((item) => item.kind === "tool_start" && item.toolCallId === toolCallId);
                     if (startIdx !== -1) {
@@ -618,7 +743,7 @@ export function App(props) {
             setLiveItems((prev) => {
                 const { flushed, remaining } = flushOnTurnEnd(prev, stopReason);
                 if (flushed.length > 0) {
-                    setHistory((h) => pruneHistory([...h, ...flushed]));
+                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(flushed)]));
                 }
                 return remaining;
             });
@@ -662,11 +787,77 @@ export function App(props) {
         onAborted: useCallback(() => {
             log("WARN", "agent", "Agent run aborted by user");
             setRunAllTasks(false);
+            setDoneStatus(null);
             setLiveItems((prev) => {
-                const next = prev.map((item) => item.kind === "subagent_group" ? { ...item, aborted: true } : item);
+                const next = prev.map((item) => {
+                    if (item.kind === "subagent_group")
+                        return { ...item, aborted: true };
+                    // Convert running tools to stopped state so spinners stop
+                    if (item.kind === "tool_start") {
+                        return {
+                            kind: "tool_done",
+                            name: item.name,
+                            args: item.args,
+                            result: "Stopped.",
+                            isError: true,
+                            durationMs: 0,
+                            id: item.id,
+                        };
+                    }
+                    if (item.kind === "server_tool_start") {
+                        return {
+                            kind: "server_tool_done",
+                            name: item.name,
+                            input: item.input,
+                            resultType: "aborted",
+                            data: null,
+                            durationMs: 0,
+                            id: item.id,
+                        };
+                    }
+                    if (item.kind === "tool_group") {
+                        const tools = item.tools.map((t) => t.status === "running"
+                            ? { ...t, status: "done", result: "Stopped.", isError: true }
+                            : t);
+                        return { ...item, tools };
+                    }
+                    // Remove compaction spinner (compaction can't complete after abort)
+                    if (item.kind === "compacting") {
+                        return { kind: "tombstone", id: item.id };
+                    }
+                    return item;
+                });
                 return [...next, { kind: "info", text: "Request was stopped.", id: getId() }];
             });
         }, []),
+        onQueuedStart: useCallback((content) => {
+            // When a queued message starts processing, show it as a UserItem
+            // and flush prior items to history
+            const displayText = typeof content === "string"
+                ? content
+                : content
+                    .filter((c) => c.type === "text")
+                    .map((c) => c.text)
+                    .join("\n");
+            const imageCount = typeof content === "string"
+                ? undefined
+                : content.filter((c) => c.type === "image").length || undefined;
+            setLiveItems((prev) => {
+                if (prev.length > 0) {
+                    setHistory((h) => compactHistory([...h, ...trimFlushedItems(prev)]));
+                }
+                return [];
+            });
+            const userItem = {
+                kind: "user",
+                text: displayText,
+                imageCount,
+                id: getId(),
+            };
+            setLastUserMessage(displayText);
+            setDoneStatus(null);
+            setLiveItems([userItem]);
+        }, []),
     });
     // Phase 2 of the two-phase flush: after onDone clears liveItems (phase 1)
     // and Ink renders the smaller live area (updating its internal line
@@ -679,7 +870,7 @@ export function App(props) {
         if (pendingFlushRef.current.length > 0) {
             const items = pendingFlushRef.current;
             pendingFlushRef.current = [];
-            setHistory((h) => pruneHistory([...h, ...items]));
+            setHistory((h) => compactHistory([...h, ...trimFlushedItems(items)]));
         }
     });
     // Sync terminal title with agent loop state
@@ -687,25 +878,11 @@ export function App(props) {
         setTitlePhase(agentLoop.activityPhase);
         setTitleRunning(agentLoop.isRunning);
     }, [agentLoop.activityPhase, agentLoop.isRunning]);
-    // Animated thinking border
-    const [thinkingBorderFrame, setThinkingBorderFrame] = useState(0);
-    useEffect(() => {
-        if (agentLoop.activityPhase !== "thinking")
-            return;
-        const timer = setInterval(() => {
-            setThinkingBorderFrame((f) => (f + 1) % THINKING_BORDER_COLORS.length);
-        }, 1000);
-        return () => clearInterval(timer);
-    }, [agentLoop.activityPhase]);
-    // Success flash on turn completion
-    const [doneFlash, setDoneFlash] = useState(false);
-    useEffect(() => {
-        if (doneStatus) {
-            setDoneFlash(true);
-            const timer = setTimeout(() => setDoneFlash(false), 600);
-            return () => clearTimeout(timer);
-        }
-    }, [doneStatus]);
+    // Animated thinking border — derived from global animation tick
+    const animTick = useAnimationTick();
+    const thinkingBorderFrame = agentLoop.activityPhase === "thinking"
+        ? deriveFrame(animTick, 1000, THINKING_BORDER_COLORS.length)
+        : 0;
     const handleSubmit = useCallback(async (input, inputImages = [], pasteInfo) => {
         const trimmed = input.trim();
         if (trimmed.startsWith("/")) {
@@ -746,6 +923,30 @@ export function App(props) {
             setLiveItems([{ kind: "info", text: "Session cleared.", id: getId() }]);
             return;
         }
+        // Handle /plan — toggle plan mode
+        if (trimmed === "/plan" || trimmed === "/plan on") {
+            setPlanMode(true);
+            setLiveItems((prev) => [
+                ...prev,
+                { kind: "info", text: "Plan mode activated", id: getId() },
+            ]);
+            return;
+        }
+        if (trimmed === "/plan off") {
+            setPlanMode(false);
+            setLiveItems((prev) => [
+                ...prev,
+                { kind: "info", text: "Plan mode deactivated", id: getId() },
+            ]);
+            return;
+        }
+        // Handle /plans — open plan pane
+        if (trimmed === "/plans") {
+            stdout?.write("\x1b[2J\x1b[3J\x1b[H");
+            setPlanAutoExpand(false);
+            setOverlay("plan");
+            return;
+        }
         // Handle prompt-template commands (built-in + custom from .ezcoder/commands/)
         if (trimmed.startsWith("/")) {
             const parts = trimmed.slice(1).split(" ");
@@ -759,7 +960,7 @@ export function App(props) {
                 // Move live items into history before starting
                 setLiveItems((prev) => {
                     if (prev.length > 0) {
-                        setHistory((h) => pruneHistory([...h, ...prev]));
+                        setHistory((h) => compactHistory([...h, ...trimFlushedItems(prev)]));
                     }
                     return [];
                 });
@@ -799,31 +1000,8 @@ export function App(props) {
                 return;
             }
         }
-        // Move any remaining live items into history (Static) before starting new turn
-        setLiveItems((prev) => {
-            if (prev.length > 0) {
-                setHistory((h) => pruneHistory([...h, ...prev]));
-            }
-            return [];
-        });
-        // Build display text — strip image paths, show badges instead
+        // ── Build user content (shared by normal + queued paths) ──
         const hasImages = inputImages.length > 0;
-        let displayText = input;
-        if (hasImages) {
-            const { cleanText } = await extractImagePaths(input, props.cwd);
-            displayText = cleanText;
-        }
-        const userItem = {
-            kind: "user",
-            text: displayText,
-            imageCount: hasImages ? inputImages.length : undefined,
-            pasteInfo,
-            id: getId(),
-        };
-        setLastUserMessage(input);
-        setDoneStatus(null);
-        setLiveItems([userItem]);
-        // Build user content — plain string or content array with images
         const modelInfo = getModel(currentModel);
         const modelSupportsImages = modelInfo?.supportsImages ?? true;
         let userContent;
@@ -867,6 +1045,47 @@ export function App(props) {
         else {
             userContent = input;
         }
+        // ── Queue message if agent is already running ──
+        if (agentLoop.isRunning) {
+            log("INFO", "queue", `Queued message: ${trimmed.length > 80 ? trimmed.slice(0, 80) + "..." : trimmed}`);
+            agentLoop.queueMessage(userContent);
+            let displayText = input;
+            if (hasImages) {
+                const { cleanText } = await extractImagePaths(input, props.cwd);
+                displayText = cleanText;
+            }
+            const queuedItem = {
+                kind: "queued",
+                text: displayText,
+                imageCount: hasImages ? inputImages.length : undefined,
+                id: getId(),
+            };
+            setLiveItems((prev) => [...prev, queuedItem]);
+            return;
+        }
+        // Move any remaining live items into history (Static) before starting new turn
+        setLiveItems((prev) => {
+            if (prev.length > 0) {
+                setHistory((h) => compactHistory([...h, ...trimFlushedItems(prev)]));
+            }
+            return [];
+        });
+        // Build display text — strip image paths, show badges instead
+        let displayText = input;
+        if (hasImages) {
+            const { cleanText } = await extractImagePaths(input, props.cwd);
+            displayText = cleanText;
+        }
+        const userItem = {
+            kind: "user",
+            text: displayText,
+            imageCount: hasImages ? inputImages.length : undefined,
+            pasteInfo,
+            id: getId(),
+        };
+        setLastUserMessage(input);
+        setDoneStatus(null);
+        setLiveItems([userItem]);
         // Run agent
         try {
             await agentLoop.run(userContent);
@@ -885,6 +1104,7 @@ export function App(props) {
     }, [agentLoop, props.onSlashCommand, compactConversation]);
     const handleAbort = useCallback(() => {
         if (agentLoop.isRunning) {
+            agentLoop.clearQueue();
             agentLoop.abort();
         }
         else {
@@ -935,15 +1155,10 @@ export function App(props) {
                         apiKey = props.credentialsByProvider?.["glm"]?.accessToken;
                     }
                     try {
-                        const allConfigs = getMCPServers(newProvider, apiKey);
-                        const eagerConfigs = allConfigs.filter((c) => !c.lazy);
-                        const lazyConfigs = allConfigs.filter((c) => c.lazy);
-                        const mcpTools = await props.mcpManager.connectAll(eagerConfigs);
-                        const lazyTools = props.mcpManager.registerLazy(lazyConfigs);
+                        const mcpTools = await props.mcpManager.connectAll(getMCPServers(newProvider, apiKey));
                         setCurrentTools((prev) => [
                             ...prev.filter((t) => !t.name.startsWith("mcp__")),
                             ...mcpTools,
-                            ...lazyTools,
                         ]);
                         log("INFO", "mcp", `MCP servers reconnected for provider ${newProvider}`);
                     }
@@ -978,6 +1193,8 @@ export function App(props) {
         { 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: "plan", aliases: [], description: "Toggle plan mode (on/off)" },
+        { name: "plans", aliases: [], description: "Open plans pane" },
         ...PROMPT_COMMANDS.map((cmd) => ({
             name: cmd.name,
             aliases: cmd.aliases,
@@ -991,6 +1208,8 @@ export function App(props) {
     ], [customCommands]);
     const renderItem = (item) => {
         switch (item.kind) {
+            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));
             case "user":
@@ -1003,16 +1222,22 @@ export function App(props) {
                 return _jsx(ToolExecution, { status: "running", name: item.name, args: item.args }, item.id);
             case "tool_done":
                 return (_jsx(ToolExecution, { status: "done", name: item.name, args: item.args, result: item.result, isError: item.isError }, item.id));
+            case "tool_group":
+                return _jsx(ToolGroupExecution, { tools: item.tools }, item.id);
             case "server_tool_start":
                 return (_jsx(ServerToolExecution, { status: "running", name: item.name, input: item.input, startedAt: item.startedAt }, item.id));
             case "server_tool_done":
-                return (_jsx(ServerToolExecution, { status: "done", name: item.name, input: item.input, durationMs: item.durationMs }, item.id));
+                return (_jsx(ServerToolExecution, { status: "done", name: item.name, input: item.input, durationMs: item.durationMs, resultType: item.resultType }, item.id));
             case "error": {
                 const providerHint = getProviderErrorHint(item.message);
-                return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: theme.error, children: ["✗ ", item.message] }), providerHint && (_jsxs(Text, { color: theme.textDim, children: ["  Hint: ", providerHint] }))] }, item.id));
+                return (_jsxs(Box, { marginTop: 1, flexDirection: "column", flexShrink: 1, children: [_jsxs(Text, { color: theme.error, wrap: "wrap", children: ["✗ ", item.message] }), providerHint && (_jsxs(Text, { color: theme.textDim, wrap: "wrap", children: ["  Hint: ", providerHint] }))] }, item.id));
             }
             case "info":
-                return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.textDim, children: item.text }) }, item.id));
+                return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsx(Text, { color: theme.textDim, wrap: "wrap", children: 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" : ""})`
+                                    : ""] })] }, item.id));
             case "compacting":
                 return _jsx(CompactionSpinner, {}, item.id);
             case "compacted":
@@ -1075,7 +1300,10 @@ export function App(props) {
         runAllTasksRef.current = runAllTasks;
     }, [runAllTasks]);
     const isTaskView = overlay === "tasks";
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: isTaskView ? [] : history, style: { width: "100%" }, children: (item) => (_jsx(Box, { flexDirection: "column", paddingRight: 1, children: renderItem(item) }, item.id)) }, `${resizeKey}-${staticKey}`), isTaskView ? (_jsx(TaskOverlay, { cwd: props.cwd, agentRunning: agentLoop.isRunning, onClose: () => {
+    const isSkillsView = overlay === "skills";
+    const isPlanView = overlay === "plan";
+    const isOverlayView = isTaskView || isSkillsView || isPlanView;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: isOverlayView ? [] : history, style: { width: "100%" }, children: (item) => (_jsx(Box, { flexDirection: "column", paddingRight: 1, children: renderItem(item) }, item.id)) }, `${resizeKey}-${staticKey}`), isTaskView ? (_jsx(TaskOverlay, { cwd: props.cwd, agentRunning: agentLoop.isRunning, onClose: () => {
                     stdout?.write("\x1b[2J\x1b[3J\x1b[H");
                     setTaskCount(getTaskCount(props.cwd));
                     setStaticKey((k) => k + 1);
@@ -1091,11 +1319,77 @@ export function App(props) {
                         markTaskInProgress(props.cwd, next.id);
                         startTask(next.title, next.prompt, next.id);
                     }
-                } })) : (_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 })] }), agentLoop.isRunning && agentLoop.activityPhase !== "idle" ? (_jsx(Box, { marginTop: 1, borderStyle: "round", borderColor: agentLoop.activityPhase === "thinking"
+                } })) : isSkillsView ? (_jsx(SkillsOverlay, { cwd: props.cwd, onClose: () => {
+                    stdout?.write("\x1b[2J\x1b[3J\x1b[H");
+                    setStaticKey((k) => k + 1);
+                    setOverlay(null);
+                } })) : isPlanView ? (_jsx(PlanOverlay, { cwd: props.cwd, autoExpandNewest: planAutoExpand, onClose: () => {
+                    stdout?.write("\x1b[2J\x1b[3J\x1b[H");
+                    setStaticKey((k) => k + 1);
+                    setPlanAutoExpand(false);
+                    setOverlay(null);
+                }, onApprove: (planPath) => {
+                    // Store approved plan path — will be injected into the new system prompt
+                    approvedPlanPathRef.current = planPath;
+                    // Clear session for a fresh context focused on the plan
+                    stdout?.write("\x1b[2J\x1b[3J\x1b[H");
+                    setHistory([{ kind: "banner", id: "banner" }]);
+                    setLiveItems([]);
+                    setStaticKey((k) => k + 1);
+                    setPlanAutoExpand(false);
+                    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;
+                        }
+                        // 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) => {
+                    stdout?.write("\x1b[2J\x1b[3J\x1b[H");
+                    setStaticKey((k) => k + 1);
+                    setPlanAutoExpand(false);
+                    setOverlay(null);
+                    // Send rejection + feedback to the agent
+                    const msg = `The plan at ${planPath} was rejected.\n\nFeedback: ${feedback}\n\n` +
+                        `Please revise the plan based on this feedback.`;
+                    setLiveItems((prev) => [
+                        ...prev,
+                        { kind: "info", text: `Plan rejected — "${feedback}"`, id: getId() },
+                    ]);
+                    void agentLoop.run(msg);
+                } })) : (_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, children: _jsx(ActivityIndicator, { phase: agentLoop.activityPhase, elapsedMs: agentLoop.elapsedMs, thinkingMs: agentLoop.thinkingMs, isThinking: agentLoop.isThinking, tokenEstimate: agentLoop.streamedTokenEstimate, userMessage: lastUserMessage, activeToolNames: agentLoop.activeToolCalls.map((tc) => tc.name) }) })) : (doneStatus && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: doneFlash ? theme.success : theme.textDim, children: ["✻ ", doneStatus.verb, " ", formatDuration(doneStatus.durationMs)] }) }))), _jsx(InputArea, { onSubmit: handleSubmit, onAbort: handleAbort, disabled: agentLoop.isRunning, isActive: !taskBarFocused && !overlay, onDownAtEnd: handleFocusTaskBar, onShiftTab: handleToggleThinking, onToggleTasks: () => {
+                            : "transparent", paddingLeft: 1, paddingRight: 1, children: _jsx(ActivityIndicator, { phase: agentLoop.activityPhase, elapsedMs: agentLoop.elapsedMs, thinkingMs: agentLoop.thinkingMs, isThinking: agentLoop.isThinking, tokenEstimate: agentLoop.streamedTokenEstimate, userMessage: lastUserMessage, activeToolNames: agentLoop.activeToolCalls.map((tc) => tc.name), planMode: planMode }) })) : (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: () => {
                             stdout?.write("\x1b[2J\x1b[3J\x1b[H");
                             setOverlay("tasks");
-                        }, 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, cwd: props.cwd, gitBranch: gitBranch, thinkingEnabled: thinkingEnabled })), bgTasks.length > 0 && (_jsx(BackgroundTasksBar, { tasks: bgTasks, focused: taskBarFocused, expanded: taskBarExpanded, selectedIndex: selectedTaskIndex, onExpand: handleTaskBarExpand, onCollapse: handleTaskBarCollapse, onKill: handleTaskKill, onExit: handleTaskBarExit, onNavigate: handleTaskNavigate }))] }))] }));
+                        }, onToggleSkills: () => {
+                            stdout?.write("\x1b[2J\x1b[3J\x1b[H");
+                            setOverlay("skills");
+                        }, onTogglePlanMode: () => {
+                            const next = !planMode;
+                            setPlanMode(next);
+                            log("INFO", "plan", `Plan mode ${next ? "enabled" : "disabled"}`);
+                            setLiveItems((items) => [
+                                ...items,
+                                { kind: "info", text: `Plan mode ${next ? "on" : "off"}`, 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, cwd: props.cwd, gitBranch: gitBranch, thinkingEnabled: thinkingEnabled, planMode: planMode })), 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