@mragentix/cli 4.2.37 → 4.2.39

package/dist/ui/App.js

@@ -21,8 +21,10 @@ 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";
@@ -36,7 +38,9 @@ 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 { fetchUpstreamChanges, mergeUpstream, restoreBranding, bumpVersion, buildAll, publishToNpm, pushToGithub, selfUpdate, } from "../core/update.js";
 import { trimFlushedItems, flushOnTurnText, flushOnTurnEnd } from "./live-item-flush.js";
 // ── Provider Error Hints ──────────────────────────────────
 /** Detect provider-side errors and return a user-facing hint. */
@@ -224,7 +228,7 @@ function markTaskInProgress(cwd, taskId) {
 export function App(props) {
     const theme = useTheme();
     const { stdout } = useStdout();
-    const { resizeKey } = useTerminalSize();
+    const { columns, resizeKey } = useTerminalSize();
     // 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");
@@ -260,6 +264,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);
@@ -284,6 +291,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;
@@ -730,6 +787,7 @@ 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) => {
                     if (item.kind === "subagent_group")
@@ -772,6 +830,34 @@ export function App(props) {
                 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
@@ -837,6 +923,137 @@ 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 /update — upstream sync pipeline
+        if (trimmed === "/update" || trimmed === "/u") {
+            try {
+                const status = fetchUpstreamChanges();
+                if (!status.hasUpdates) {
+                    setLiveItems((prev) => [
+                        ...prev,
+                        { kind: "info", text: "✅ Already up to date with upstream.", id: getId() },
+                    ]);
+                }
+                else {
+                    const commitList = status.commits.map((c) => `  ${c}`).join("\n");
+                    const msg = [
+                        `📦 Found ${status.commits.length} new commit(s) from upstream:\n`,
+                        commitList,
+                        "",
+                        status.diffStat,
+                        "",
+                        "Run /update confirm to merge, build, and publish.",
+                    ].join("\n");
+                    setLiveItems((prev) => [...prev, { kind: "info", text: msg, id: getId() }]);
+                }
+            }
+            catch (err) {
+                setLiveItems((prev) => [
+                    ...prev,
+                    { kind: "error", message: `${err.message}`, id: getId() },
+                ]);
+            }
+            return;
+        }
+        if (trimmed === "/update confirm") {
+            setLiveItems((prev) => [
+                ...prev,
+                { kind: "info", text: "🔄 Running update pipeline...", id: getId() },
+            ]);
+            try {
+                const steps = [];
+                steps.push("🔄 Merging upstream changes...");
+                const merge = mergeUpstream();
+                if (!merge.ok) {
+                    steps.push(`  ❌ ${merge.error}`);
+                    setLiveItems((prev) => [
+                        ...prev,
+                        { kind: "error", message: steps.join("\n"), id: getId() },
+                    ]);
+                    return;
+                }
+                steps.push("  ✓ Merged");
+                steps.push("🎨 Restoring branding...");
+                const branding = restoreBranding();
+                steps.push(`  ✓ ${branding.filesModified} file(s) updated`);
+                steps.push("📝 Bumping version...");
+                const version = bumpVersion();
+                steps.push(`  ✓ ${version.oldVersion} → ${version.newVersion}`);
+                steps.push("🔨 Building all packages...");
+                const build = buildAll();
+                if (!build.ok) {
+                    steps.push(`  ❌ Build failed:\n${build.output}`);
+                    setLiveItems((prev) => [
+                        ...prev,
+                        { kind: "error", message: steps.join("\n"), id: getId() },
+                    ]);
+                    return;
+                }
+                steps.push("  ✓ Built");
+                steps.push("📦 Publishing to npm...");
+                const pub = publishToNpm();
+                for (const r of pub.results)
+                    steps.push(`  ${r}`);
+                if (!pub.ok) {
+                    setLiveItems((prev) => [
+                        ...prev,
+                        { kind: "error", message: steps.join("\n"), id: getId() },
+                    ]);
+                    return;
+                }
+                steps.push("🚀 Pushing to GitHub...");
+                const push = pushToGithub(version.newVersion);
+                if (!push.ok) {
+                    steps.push(`  ❌ ${push.error}`);
+                    setLiveItems((prev) => [
+                        ...prev,
+                        { kind: "error", message: steps.join("\n"), id: getId() },
+                    ]);
+                    return;
+                }
+                steps.push("  ✓ Pushed");
+                steps.push("⬆️  Updating global install...");
+                const update = selfUpdate();
+                steps.push(update.ok ? "  ✓ Updated" : `  ⚠️  Self-update failed: ${update.output}`);
+                steps.push("");
+                steps.push(`✅ Updated to v${version.newVersion}! Restart mragentix to use the new version.`);
+                setLiveItems((prev) => [...prev, { kind: "info", text: steps.join("\n"), id: getId() }]);
+            }
+            catch (err) {
+                setLiveItems((prev) => [
+                    ...prev,
+                    {
+                        kind: "error",
+                        message: `Pipeline error: ${err.message}`,
+                        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 .mragentix/commands/)
         if (trimmed.startsWith("/")) {
             const parts = trimmed.slice(1).split(" ");
@@ -890,31 +1107,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) => compactHistory([...h, ...trimFlushedItems(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;
@@ -958,6 +1152,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);
@@ -976,6 +1211,7 @@ export function App(props) {
     }, [agentLoop, props.onSlashCommand, compactConversation]);
     const handleAbort = useCallback(() => {
         if (agentLoop.isRunning) {
+            agentLoop.clearQueue();
             agentLoop.abort();
         }
         else {
@@ -1064,6 +1300,9 @@ 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" },
+        { name: "update", aliases: ["u"], description: "Pull upstream changes, rebuild & publish" },
         ...PROMPT_COMMANDS.map((cmd) => ({
             name: cmd.name,
             aliases: cmd.aliases,
@@ -1099,10 +1338,14 @@ export function App(props) {
                 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":
@@ -1165,7 +1408,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", width: columns, 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);
@@ -1181,11 +1427,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: theme.success, 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, width: columns, 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