@matterailab/orbcode 0.2.2 → 0.2.3

package/dist/ui/App.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { Box, Static, Text, useApp, useInput } from "ink";
 import open from "open";
 import { COLORS, VERSION } from "../branding.js";
-import { BUILTIN_AXON_MODELS, getModel, isValidAxonModel } from "../api/models.js";
+import { BUILTIN_AXON_MODELS, getModel, isValidAxonModel, } from "../api/models.js";
 import { LoginView } from "./LoginView.js";
-import { APP_URL, fetchBalance, fetchProfile, fetchTaskTitle } from "../auth/auth.js";
-import { getAuthToken, getPendingProjectHooks, loadSettings, saveSettings, trustProjectHooks, } from "../config/settings.js";
+import { APP_URL, fetchProfile, fetchTaskTitle, } from "../auth/auth.js";
+import { getAuthToken, getPendingProjectHooks, loadSettings, saveMcpApproval, saveSettings, trustProjectHooks, } from "../config/settings.js";
 import { Agent } from "../core/agent.js";
+import { McpManager } from "../mcp/manager.js";
 import { Spinner } from "./components/Spinner.js";
 import { InputBox } from "./components/InputBox.js";
 import { ApprovalPrompt } from "./components/ApprovalPrompt.js";
 import { FollowupPrompt } from "./components/FollowupPrompt.js";
 import { HookTrustPrompt } from "./components/HookTrustPrompt.js";
+import { McpApprovalPrompt } from "./components/McpApprovalPrompt.js";
+import { McpPicker } from "./components/McpPicker.js";
 import { StatusBar } from "./components/StatusBar.js";
 import { ModelPicker } from "./components/ModelPicker.js";
 import { SessionPicker } from "./components/SessionPicker.js";
@@ -21,16 +24,38 @@ import { RowView, formatToolName } from "./components/rows.js";
 const SLASH_COMMANDS = [
     { name: "/help", description: "show available commands" },
     { name: "/model", description: "select the Axon model to use" },
-    { name: "/clear", description: "clear the screen — the conversation continues" },
+    {
+        name: "/clear",
+        description: "clear the screen — the conversation continues",
+    },
     { name: "/new", description: "start a new conversation with a clean slate" },
     { name: "/resume", description: "resume a previous session" },
-    { name: "/compact", description: "summarize the conversation to free up context" },
+    {
+        name: "/compact",
+        description: "summarize the conversation to free up context",
+    },
     { name: "/tasks", description: "show the current task list" },
-    { name: "/status", description: "show session status (model, context, cost, account)" },
-    { name: "/cost", description: "show session cost and balance" },
-    { name: "/init", description: "analyze this codebase and create an AGENTS.md" },
-    { name: "/commit", description: "check pending changes and create detailed commits" },
-    { name: "/code-review", description: "expert review of pending changes: performance, security, bugs, tests" },
+    {
+        name: "/status",
+        description: "show session status (model, context, cost, account)",
+    },
+    { name: "/usage", description: "fetch plan usage" },
+    {
+        name: "/init",
+        description: "analyze this codebase and create an AGENTS.md",
+    },
+    {
+        name: "/mcp",
+        description: "manage MCP servers — enable, disable, reconnect, view status",
+    },
+    {
+        name: "/commit",
+        description: "check pending changes and create detailed commits",
+    },
+    {
+        name: "/code-review",
+        description: "expert review of pending changes: performance, security, bugs, tests",
+    },
     { name: "/analytics", description: "open your MatterAI analytics dashboard" },
     { name: "/login", description: "sign in to MatterAI" },
     { name: "/logout", description: "sign out and remove the saved token" },
@@ -64,17 +89,11 @@ function formatRelativeTime(isoStr) {
         return `in ${min}m`;
     return "soon";
 }
-/** Human lines for the /status and /cost usage block (extension profile data). */
+/** Human lines for the /status and /usage usage block (extension profile data). */
 function usageLines(profile) {
     const lines = [];
     if (profile.plan)
-        lines.push(`Plan        ${profile.plan}`);
-    if (typeof profile.usagePercentage === "number") {
-        lines.push(`Usage       ${profile.usagePercentage}% used · ${Math.max(0, 100 - profile.usagePercentage)}% remaining`);
-    }
-    if (typeof profile.remainingReviews === "number") {
-        lines.push(`Reviews     ${profile.remainingReviews} remaining`);
-    }
+        lines.push(`Plan        ${profile.plan?.toUpperCase()}`);
     if (profile.tieredUsage) {
         const ws = [
             ["5hr", "5-Hour", profile.tieredUsage.fiveHour],
@@ -82,10 +101,9 @@ function usageLines(profile) {
             ["mo", "Monthly", profile.tieredUsage.monthly],
         ];
         for (const [short, label, w] of ws) {
-            const remaining = Math.max(0, w.remaining || 0);
             const pct = Math.max(0, Math.min(100, w.percentage || 0));
             const reset = formatRelativeTime(w.resetsAt);
-            lines.push(`${label.padEnd(12)} ${remaining.toFixed(1)}/${w.limit.toFixed(1)} left (${pct}% used) · Resets ${reset}`);
+            lines.push(`${label.padEnd(12)}${pct}% used · Resets ${reset}`);
         }
     }
     else if (profile.creditsResetDate) {
@@ -149,7 +167,12 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
     const [view, setView] = useState(initialView ?? (getAuthToken(settings) ? "chat" : "login"));
     const [updateInfo, setUpdateInfo] = useState(null);
     const [rows, setRows] = useState(() => [
-        { kind: "header", id: "header", cwd: process.cwd(), modelName: getModel(loadSettings().model).name },
+        {
+            kind: "header",
+            id: "header",
+            cwd: process.cwd(),
+            modelName: getModel(loadSettings().model).name,
+        },
     ]);
     const [busy, setBusy] = useState(false);
     const [busyLabel, setBusyLabel] = useState("Thinking");
@@ -167,6 +190,12 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
     const [queuedMessages, setQueuedMessages] = useState([]);
     const [modelPickerOpen, setModelPickerOpen] = useState(false);
     const [resumableSessions, setResumableSessions] = useState(null);
+    // MCP manager (created once, shared across agents in this process). Null until
+    // the first agent is created so we don't spawn servers before login.
+    const mcpManagerRef = useRef(null);
+    const [mcpPickerOpen, setMcpPickerOpen] = useState(false);
+    // Project-scope MCP servers awaiting the user's approval at startup.
+    const [pendingMcpApproval, setPendingMcpApproval] = useState(null);
     const [staticKey, setStaticKey] = useState(0);
     const [tasks, setTasks] = useState("");
     const [contextTokens, setContextTokens] = useState(0);
@@ -184,7 +213,11 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
         if (!token)
             return;
         fetchProfile(token)
-            .then((profile) => setUsage({ plan: profile.plan, usagePercentage: profile.usagePercentage, tieredUsage: profile.tieredUsage }))
+            .then((profile) => setUsage({
+            plan: profile.plan,
+            usagePercentage: profile.usagePercentage,
+            tieredUsage: profile.tieredUsage,
+        }))
             .catch(() => { });
     }, []);
     const agentRef = useRef(null);
@@ -243,7 +276,12 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
             process.stdout.write("\x1b[2J\x1b[H");
         }
         setRows([
-            { kind: "header", id: rowId(), cwd: process.cwd(), modelName: getModel(loadSettings().model).name },
+            {
+                kind: "header",
+                id: rowId(),
+                cwd: process.cwd(),
+                modelName: getModel(loadSettings().model).name,
+            },
         ]);
         setStaticKey((k) => k + 1);
     }, []);
@@ -275,7 +313,11 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
                 setStreamingText("");
                 break;
             case "tool-start":
-                setRunningTool({ id: event.id, name: event.name, summary: event.summary });
+                setRunningTool({
+                    id: event.id,
+                    name: event.name,
+                    summary: event.summary,
+                });
                 setBusyLabel(`Running ${event.name}`);
                 break;
             case "tool-end":
@@ -305,7 +347,10 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
                 pushRow({ kind: "completion", text: event.result });
                 break;
             case "system":
-                pushRow({ kind: event.isError ? "error" : "info", text: event.message });
+                pushRow({
+                    kind: event.isError ? "error" : "info",
+                    text: event.message,
+                });
                 break;
             case "error":
                 pushRow({ kind: "error", text: event.message });
@@ -346,6 +391,13 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
     }, [pushRow, maybeFetchTitle, refreshUsage, drainQueue]);
     const createAgent = useCallback((resume) => {
         const current = loadSettings();
+        // Create the MCP manager once per process and reuse it across agents
+        // (so /new and /resume keep the same server connections). It reads
+        // the enabled/disabled lists from settings and connects to approved
+        // servers lazily on start().
+        if (!mcpManagerRef.current) {
+            mcpManagerRef.current = new McpManager(process.cwd(), current.disabledMcpServers ?? [], current.enabledMcpServers ?? []);
+        }
         return new Agent({
             cwd: process.cwd(),
             token: getAuthToken(current),
@@ -355,6 +407,7 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
             autoApproveEdits: current.autoApproveEdits,
             autoApproveSafeCommands: current.autoApproveSafeCommands,
             hooks: current.hooks,
+            mcp: mcpManagerRef.current,
             resume,
             callbacks: {
                 onEvent: handleEvent,
@@ -393,23 +446,33 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
                 if (match)
                     pushRow({ kind: "user", text: match[1] });
             }
-            else if (message.role === "assistant" && typeof message.content === "string" && message.content.trim()) {
+            else if (message.role === "assistant" &&
+                typeof message.content === "string" &&
+                message.content.trim()) {
                 pushRow({ kind: "assistant", text: message.content });
             }
         }
-        pushRow({ kind: "info", text: `Resumed session: ${session.title || session.id}` });
+        pushRow({
+            kind: "info",
+            text: `Resumed session: ${session.title || session.id}`,
+        });
     }, [createAgent, pushRow, resetTranscript]);
     const switchModel = useCallback((modelId) => {
         const updated = { ...loadSettings(), model: modelId };
         setSettings(updated);
         saveSettings(updated);
         agentRef.current?.setModel(modelId);
-        pushRow({ kind: "info", text: `Model switched to ${getModel(modelId).name}` });
+        pushRow({
+            kind: "info",
+            text: `Model switched to ${getModel(modelId).name}`,
+        });
     }, [pushRow]);
     // Fire SessionEnd hooks (best-effort, capped at 3s) before quitting.
     const endAndExit = useCallback((reason) => {
         const agent = agentRef.current;
         if (!agent) {
+            // No agent yet, but the MCP manager may have started; tear it down.
+            void mcpManagerRef.current?.stop().catch(() => { });
             exit();
             return;
         }
@@ -471,7 +534,10 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
                         switchModel(matches[0]);
                     }
                     else {
-                        pushRow({ kind: "error", text: `Unknown model "${arg}". Available: ${pickerIds.join(", ")}` });
+                        pushRow({
+                            kind: "error",
+                            text: `Unknown model "${arg}". Available: ${pickerIds.join(", ")}`,
+                        });
                     }
                 }
                 else {
@@ -504,7 +570,10 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
             case "/resume": {
                 const sessions = listSessions(process.cwd()).filter((s) => s.id !== agentRef.current?.taskId);
                 if (sessions.length === 0) {
-                    pushRow({ kind: "info", text: "No previous sessions found for this directory." });
+                    pushRow({
+                        kind: "info",
+                        text: "No previous sessions found for this directory.",
+                    });
                     break;
                 }
                 setResumableSessions(sessions);
@@ -564,6 +633,18 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
                 setBusyLabel("Thinking");
                 void getAgent().runTurn(INIT_PROMPT);
                 break;
+            case "/mcp": {
+                const manager = mcpManagerRef.current;
+                if (!manager) {
+                    pushRow({
+                        kind: "info",
+                        text: "MCP not initialized yet — send a message first.",
+                    });
+                    break;
+                }
+                setMcpPickerOpen(true);
+                break;
+            }
             case "/commit":
                 if (!getAuthToken(settings)) {
                     setView("login");
@@ -587,15 +668,10 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
             case "/version":
                 pushRow({ kind: "info", text: `OrbCode CLI v${VERSION}` });
                 break;
-            case "/cost": {
-                pushRow({ kind: "info", text: `Session cost: $${totalCost.toFixed(4)} (fetching balance…)` });
+            case "/usage": {
+                pushRow({ kind: "info", text: "Fetching plan usage…" });
                 const token = getAuthToken(settings);
                 if (token) {
-                    fetchBalance(token, settings.organizationId).then((balance) => {
-                        if (balance !== undefined) {
-                            pushRow({ kind: "info", text: `Account balance: $${balance.toFixed(2)}` });
-                        }
-                    });
                     fetchProfile(token)
                         .then((profile) => {
                         const lines = usageLines(profile);
@@ -625,9 +701,24 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
                 endAndExit("prompt_input_exit");
                 break;
             default:
-                pushRow({ kind: "error", text: `Unknown command: ${name}. Try /help.` });
+                pushRow({
+                    kind: "error",
+                    text: `Unknown command: ${name}. Try /help.`,
+                });
         }
-    }, [settings, tasks, contextTokens, totalCost, sessionTitle, endAndExit, pushRow, getAgent, switchModel, resetTranscript, clearQueue]);
+    }, [
+        settings,
+        tasks,
+        contextTokens,
+        totalCost,
+        sessionTitle,
+        endAndExit,
+        pushRow,
+        getAgent,
+        switchModel,
+        resetTranscript,
+        clearQueue,
+    ]);
     const handleSubmit = useCallback((value) => {
         if (value.startsWith("/")) {
             handleCommand(value);
@@ -658,7 +749,10 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
             const updated = loadSettings();
             setSettings(updated);
             agentRef.current?.setHooks(updated.hooks);
-            pushRow({ kind: "info", text: "Project hooks trusted — enabled for this workspace." });
+            pushRow({
+                kind: "info",
+                text: "Project hooks trusted — enabled for this workspace.",
+            });
         }
         else {
             pushRow({
@@ -671,6 +765,28 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
         if (deferred)
             handleSubmit(deferred);
     }, [handleSubmit, pushRow]);
+    // Resolve the MCP server approval prompt: connect to the approved project
+    // servers, persist the decision, and proceed with any deferred startup prompt.
+    const resolveMcpApproval = useCallback(async (approved) => {
+        setPendingMcpApproval(null);
+        const manager = mcpManagerRef.current;
+        if (manager) {
+            // Enable each approved server (connects immediately). Disapproved
+            // ones stay disabled and won't prompt again (persisted below).
+            await Promise.all(approved.map((name) => manager.enableServer(name).catch(() => { })));
+            saveMcpApproval(process.cwd(), manager.getEnabled(), manager.getDisabled());
+            const snap = manager.snapshot();
+            const connected = snap.servers.filter((s) => s.status === "connected").length;
+            pushRow({
+                kind: "info",
+                text: `MCP: ${connected}/${snap.servers.length} server${snap.servers.length === 1 ? "" : "s"} connected${approved.length ? ` (approved: ${approved.join(", ")})` : ""}.`,
+            });
+        }
+        const deferred = deferredPromptRef.current;
+        deferredPromptRef.current = null;
+        if (deferred)
+            handleSubmit(deferred);
+    }, [handleSubmit, pushRow]);
     // Apply --resume and an initial prompt (`orbcode "do something"`) on startup.
     const bootedRef = useRef(false);
     useEffect(() => {
@@ -689,6 +805,19 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
         else if (initialPrompt) {
             handleSubmit(initialPrompt);
         }
+        // Start the MCP manager and surface any project-scope servers that need
+        // approval. The approval prompt is non-blocking: the agent can start
+        // working while the user decides, and approved servers connect live.
+        const current = loadSettings();
+        if (getAuthToken(current)) {
+            const manager = new McpManager(process.cwd(), current.disabledMcpServers ?? [], current.enabledMcpServers ?? []);
+            mcpManagerRef.current = manager;
+            void manager.start().then(() => {
+                const pendingMcp = manager.getPendingApproval();
+                if (pendingMcp.length > 0)
+                    setPendingMcpApproval(pendingMcp);
+            });
+        }
         refreshUsage();
     }, [initialSession, initialPrompt, handleResume, handleSubmit, refreshUsage]);
     // Resolve the npm version check after first paint so the TUI shows up
@@ -721,7 +850,11 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
                 const next = prev === "ask" ? "edits" : prev === "edits" ? "auto" : "ask";
                 const autoApproveEdits = next !== "ask";
                 const autoApproveSafeCommands = next === "auto";
-                const updated = { ...loadSettings(), autoApproveEdits, autoApproveSafeCommands };
+                const updated = {
+                    ...loadSettings(),
+                    autoApproveEdits,
+                    autoApproveSafeCommands,
+                };
                 setSettings(updated);
                 saveSettings(updated);
                 agentRef.current?.setApprovalMode(autoApproveEdits, autoApproveSafeCommands);
@@ -733,7 +866,7 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
             expandReasoningRef.current = expanded;
             // Re-render the whole transcript (including past thinking) with the
             // new expansion state: clear the screen and remount <Static>.
-            setRows((prev) => prev.map((row) => (row.kind === "reasoning" ? { ...row, expanded } : row)));
+            setRows((prev) => prev.map((row) => row.kind === "reasoning" ? { ...row, expanded } : row));
             if (process.stdout.isTTY) {
                 process.stdout.write("\x1b[2J\x1b[H");
             }
@@ -746,31 +879,53 @@ export function App({ initialView, initialPrompt, initialSession, updateCheck, }
         saveSettings(updated);
         agentRef.current = null;
         setView("chat");
-        setUsage({ plan: profile.plan, usagePercentage: profile.usagePercentage, tieredUsage: profile.tieredUsage });
+        setUsage({
+            plan: profile.plan,
+            usagePercentage: profile.usagePercentage,
+            tieredUsage: profile.tieredUsage,
+        });
         const who = profile.user?.name || profile.user?.email;
-        pushRow({ kind: "info", text: `Signed in${who ? ` as ${who}` : ""}. Ready when you are.` });
+        pushRow({
+            kind: "info",
+            text: `Signed in${who ? ` as ${who}` : ""}. Ready when you are.`,
+        });
     }, [pushRow]);
-    const taskLines = useMemo(() => tasks.split("\n").map((l) => l.trim()).filter(Boolean), [tasks]);
+    const taskLines = useMemo(() => tasks
+        .split("\n")
+        .map((l) => l.trim())
+        .filter(Boolean), [tasks]);
     const inputActive = view === "chat" &&
         !pendingApproval &&
         !pendingFollowup &&
         !pendingHookTrust &&
+        !pendingMcpApproval &&
         !modelPickerOpen &&
+        !mcpPickerOpen &&
         !resumableSessions;
     return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: rows, children: (row) => _jsx(RowView, { row: row }, row.id) }, staticKey), view === "login" ? (_jsx(LoginSection, { onLogin: handleLogin })) : (_jsxs(Box, { flexDirection: "column", children: [updateInfo?.updateAvailable && updateInfo.latest && (_jsxs(Box, { marginTop: 1, flexDirection: "column", borderStyle: "round", borderColor: COLORS.warning, paddingX: 2, alignSelf: "flex-start", children: [_jsxs(Text, { color: COLORS.warning, bold: true, children: ["\u2191 Update available: v", updateInfo.current, " \u2192 v", updateInfo.latest] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: COLORS.accent, children: "orbcode update" }), " to install the latest version, then relaunch."] })] })), streamingReasoning && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: COLORS.thinking, italic: true, children: "\u2726 Thinking\u2026" }), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, italic: true, children: tail(streamingReasoning, expandReasoningRef.current ? 30 : 3) }) })] })), streamingText && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: COLORS.primary, children: "\u25CF " }), streamingText] }) })), runningTool && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: COLORS.warning, children: [formatToolName(runningTool.name), " ", _jsx(Text, { dimColor: true, children: runningTool.summary })] }) })), taskLines.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: "Tasks" }), taskLines.slice(0, 10).map((line, i) => (_jsx(Text, { dimColor: /^[-*]\s*\[x\]/i.test(line), children: line
                                     .replace(/^[-*]\s*\[x\]/i, "  ■")
                                     .replace(/^[-*]\s*\[-\]/, "  ◧")
-                                    .replace(/^[-*]\s*\[ \]/, "  □") }, i))), taskLines.length > 10 && _jsxs(Text, { dimColor: true, children: [" \u2026 ", taskLines.length - 10, " more"] })] })), modelPickerOpen && (_jsx(Box, { marginTop: 1, children: _jsx(ModelPicker, { currentId: settings.model, onSelect: (modelId) => {
+                                    .replace(/^[-*]\s*\[ \]/, "  □") }, i))), taskLines.length > 10 && (_jsxs(Text, { dimColor: true, children: [" \u2026 ", taskLines.length - 10, " more"] }))] })), modelPickerOpen && (_jsx(Box, { marginTop: 1, children: _jsx(ModelPicker, { currentId: settings.model, onSelect: (modelId) => {
                                 setModelPickerOpen(false);
                                 switchModel(modelId);
-                            }, onCancel: () => setModelPickerOpen(false) }) })), resumableSessions && (_jsx(Box, { marginTop: 1, children: _jsx(SessionPicker, { sessions: resumableSessions, onSelect: handleResume, onCancel: () => setResumableSessions(null) }) })), pendingHookTrust && (_jsx(Box, { marginTop: 1, children: _jsx(HookTrustPrompt, { cwd: process.cwd(), commands: pendingHookTrust.commands, onDecision: resolveHookTrust }) })), pendingApproval && (_jsx(Box, { marginTop: 1, children: _jsx(ApprovalPrompt, { request: pendingApproval.request, onDecision: (decision) => {
+                            }, onCancel: () => setModelPickerOpen(false) }) })), resumableSessions && (_jsx(Box, { marginTop: 1, children: _jsx(SessionPicker, { sessions: resumableSessions, onSelect: handleResume, onCancel: () => setResumableSessions(null) }) })), pendingHookTrust && (_jsx(Box, { marginTop: 1, children: _jsx(HookTrustPrompt, { cwd: process.cwd(), commands: pendingHookTrust.commands, onDecision: resolveHookTrust }) })), pendingMcpApproval && (_jsx(Box, { marginTop: 1, children: _jsx(McpApprovalPrompt, { serverNames: pendingMcpApproval, onApprove: resolveMcpApproval }) })), mcpPickerOpen && mcpManagerRef.current && (_jsx(Box, { marginTop: 1, children: _jsx(McpPicker, { manager: mcpManagerRef.current, onChanged: () => {
+                                const m = mcpManagerRef.current;
+                                if (m)
+                                    saveMcpApproval(process.cwd(), m.getEnabled(), m.getDisabled());
+                            }, onCancel: () => setMcpPickerOpen(false) }) })), pendingApproval && (_jsx(Box, { marginTop: 1, children: _jsx(ApprovalPrompt, { request: pendingApproval.request, onDecision: (decision) => {
                                 pendingApproval.resolve(decision);
                                 setPendingApproval(null);
                             } }) })), pendingFollowup && (_jsx(Box, { marginTop: 1, children: _jsx(FollowupPrompt, { question: pendingFollowup.question, suggestions: pendingFollowup.suggestions, onAnswer: (answer) => {
                                 pushRow({ kind: "user", text: answer });
                                 pendingFollowup.resolve(answer);
                                 setPendingFollowup(null);
-                            } }) })), busy && !pendingApproval && !pendingFollowup && !pendingHookTrust && !streamingText && (_jsx(Box, { marginTop: 1, children: _jsx(Spinner, { label: busyLabel }) })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [queuedMessages.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, marginBottom: 1, children: [_jsxs(Text, { dimColor: true, bold: true, children: ["Queue (", queuedMessages.length, ")"] }), queuedMessages.slice(0, 5).map((msg, i) => (_jsxs(Text, { dimColor: true, children: [i + 1, ". ", truncateForQueue(msg).replace(/\n/g, "↵")] }, i))), queuedMessages.length > 5 && (_jsxs(Text, { dimColor: true, children: [" \u2026 ", queuedMessages.length - 5, " more"] }))] })), _jsx(InputBox, { active: inputActive, slashCommands: SLASH_COMMANDS, onSubmit: handleSubmit }), _jsx(StatusBar, { modelId: settings.model, contextTokens: contextTokens, totalCost: totalCost, state: busy ? busyLabel : "", approvalMode: approvalMode, busy: busy, title: sessionTitle, plan: usage?.plan, usagePercentage: usage?.usagePercentage, tieredUsage: usage?.tieredUsage })] })] }))] }));
+                            } }) })), busy &&
+                        !pendingApproval &&
+                        !pendingFollowup &&
+                        !pendingHookTrust &&
+                        !pendingMcpApproval &&
+                        !mcpPickerOpen &&
+                        !streamingText && (_jsx(Box, { marginTop: 1, children: _jsx(Spinner, { label: busyLabel }) })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [queuedMessages.length > 0 && (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, marginBottom: 1, children: [_jsxs(Text, { dimColor: true, bold: true, children: ["Queue (", queuedMessages.length, ")"] }), queuedMessages.slice(0, 5).map((msg, i) => (_jsxs(Text, { dimColor: true, children: [i + 1, ". ", truncateForQueue(msg).replace(/\n/g, "↵")] }, i))), queuedMessages.length > 5 && (_jsxs(Text, { dimColor: true, children: [" \u2026 ", queuedMessages.length - 5, " more"] }))] })), _jsx(InputBox, { active: inputActive, slashCommands: SLASH_COMMANDS, onSubmit: handleSubmit }), _jsx(StatusBar, { modelId: settings.model, contextTokens: contextTokens, totalCost: totalCost, state: busy ? busyLabel : "", approvalMode: approvalMode, busy: busy, title: sessionTitle, plan: usage?.plan, usagePercentage: usage?.usagePercentage, tieredUsage: usage?.tieredUsage })] })] }))] }));
 }
 function tail(text, lines) {
     const all = text.split("\n").filter((l) => l.trim());
@@ -782,6 +937,6 @@ function truncateForQueue(text) {
         return text;
     return text.slice(0, QUEUE_PREVIEW_LIMIT - 1) + "…";
 }
-function LoginSection({ onLogin }) {
+function LoginSection({ onLogin, }) {
     return _jsx(LoginView, { onLogin: onLogin });
 }

package/dist/ui/components/McpApprovalPrompt.js

@@ -0,0 +1,61 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { COLORS } from "../../branding.js";
+const VISIBLE_ROWS = 8;
+/**
+ * Shown at startup when the project's `.mcp.json` defines servers that haven't
+ * been approved yet. Project-scope servers ship in the repo and can spawn
+ * processes / open network connections, so they require explicit per-project
+ * approval — mirroring Claude Code's `.mcp.json` approval dialog.
+ *
+ * The user toggles servers with Space and confirms with Enter; Escape rejects
+ * all. Approved servers are persisted to `.orbcode/settings.json` so they
+ * auto-connect on future sessions in this project.
+ */
+export function McpApprovalPrompt({ serverNames, onApprove }) {
+    const [selected, setSelected] = useState(0);
+    const [checked, setChecked] = useState(new Set(serverNames));
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelected((s) => (s - 1 + serverNames.length) % serverNames.length);
+            return;
+        }
+        if (key.downArrow || key.tab) {
+            setSelected((s) => (s + 1) % serverNames.length);
+            return;
+        }
+        if (key.escape) {
+            onApprove([]);
+            return;
+        }
+        if (key.return) {
+            onApprove([...checked]);
+            return;
+        }
+        if (input === " ") {
+            const name = serverNames[selected];
+            if (!name)
+                return;
+            setChecked((prev) => {
+                const next = new Set(prev);
+                if (next.has(name))
+                    next.delete(name);
+                else
+                    next.add(name);
+                return next;
+            });
+        }
+    });
+    if (serverNames.length === 0)
+        return null;
+    const count = serverNames.length;
+    const windowStart = Math.max(0, Math.min(selected - VISIBLE_ROWS + 1, count - VISIBLE_ROWS));
+    const visible = serverNames.slice(windowStart, windowStart + VISIBLE_ROWS);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: COLORS.warning, paddingX: 1, children: [_jsxs(Text, { bold: true, color: COLORS.warning, children: [count, " MCP server", count === 1 ? "" : "s", " found in .mcp.json"] }), _jsx(Text, { dimColor: true, children: "Select any you wish to enable for this project." }), windowStart > 0 && _jsxs(Text, { dimColor: true, children: ["  \u2191 ", windowStart, " more"] }), visible.map((name, i) => {
+                const index = windowStart + i;
+                const isSelected = index === selected;
+                const isChecked = checked.has(name);
+                return (_jsxs(Text, { color: isSelected ? COLORS.accent : undefined, children: [isSelected ? "❯ " : "  ", isChecked ? "☑" : "☐", " ", name] }, name));
+            }), windowStart + VISIBLE_ROWS < count && (_jsxs(Text, { dimColor: true, children: ["  \u2193 ", count - windowStart - VISIBLE_ROWS, " more"] })), _jsx(Text, { dimColor: true, children: "space toggle \u00B7 enter confirm \u00B7 esc reject all" })] }));
+}

package/dist/ui/components/McpAuthScreen.js

@@ -0,0 +1,55 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { COLORS } from "../../branding.js";
+import { copyToClipboard } from "../../utils/clipboard.js";
+/**
+ * Shown when the user triggers OAuth authentication for an MCP server. Mirrors
+ * Claude Code's auth screen:
+ *
+ *   - "Authenticating with <server>…"
+ *   - "A browser window will open for authentication"
+ *   - The authorization URL (with `c` to copy it)
+ *   - A paste fallback for when the browser redirect fails
+ *   - "Return here after authenticating. Press Esc to go back."
+ *
+ * The auth code can arrive two ways: the loopback callback server (automatic,
+ * handled by the manager) or a manual paste here. Both resolve the same
+ * promise, so whichever fires first wins.
+ */
+export function McpAuthScreen({ serverName, authUrl, onPasteCode, onCancel }) {
+    const [pasted, setPasted] = useState("");
+    const [copied, setCopied] = useState(false);
+    const [mode, setMode] = useState("waiting");
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (mode === "paste") {
+            if (key.return) {
+                if (pasted.trim())
+                    onPasteCode(pasted.trim());
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setPasted((p) => p.slice(0, -1));
+                return;
+            }
+            if (input && !key.ctrl && !key.meta) {
+                setPasted((p) => p + input);
+            }
+            return;
+        }
+        // waiting mode
+        if (input.toLowerCase() === "c" && authUrl) {
+            const ok = copyToClipboard(authUrl);
+            setCopied(ok);
+            return;
+        }
+        if (key.return) {
+            setMode("paste");
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: COLORS.warning, paddingX: 1, children: [_jsxs(Text, { bold: true, color: COLORS.warning, children: ["Authenticating with ", serverName, "\u2026"] }), _jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: COLORS.thinking, children: "\u273D " }), _jsx(Text, { children: "A browser window will open for authentication" })] }), _jsx(Text, { children: " " }), authUrl ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "If your browser doesn't open automatically, copy this URL manually (c to copy)" }), _jsx(Box, { paddingLeft: 1, marginTop: 0, children: _jsx(Text, { wrap: "wrap", color: COLORS.accent, children: authUrl }) }), copied && _jsx(Text, { color: COLORS.success, children: "\u2713 Copied to clipboard" })] })) : (_jsx(Text, { dimColor: true, children: "Waiting for the authorization URL\u2026" })), _jsx(Text, { children: " " }), mode === "paste" ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "If the redirect page shows a connection error, paste the URL from your browser's address bar:" }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "URL> " }), pasted, _jsx(Text, { inverse: true, children: " " })] }), _jsx(Text, { dimColor: true, children: "enter to submit \u00B7 esc to go back" })] })) : (_jsx(Text, { dimColor: true, children: "Press enter to paste a redirect URL manually \u00B7 esc to go back" })), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Return here after authenticating in your browser. Press Esc to go back." })] }));
+}