@matterailab/orbcode 0.1.3

package/dist/ui/App.js

@@ -0,0 +1,569 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { 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, loadSettings, saveSettings } from "../config/settings.js";
+import { Agent } from "../core/agent.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 { StatusBar } from "./components/StatusBar.js";
+import { ModelPicker } from "./components/ModelPicker.js";
+import { SessionPicker } from "./components/SessionPicker.js";
+import { listSessions } from "../core/sessions.js";
+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: "/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: "/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: "/analytics", description: "open your MatterAI analytics dashboard" },
+    { name: "/login", description: "sign in to MatterAI" },
+    { name: "/logout", description: "sign out and remove the saved token" },
+    { name: "/version", description: "show the OrbCode CLI version" },
+    { name: "/exit", description: "quit OrbCode CLI" },
+];
+function setTerminalTitle(title) {
+    if (process.stdout.isTTY) {
+        process.stdout.write(`\x1b]0;${title}\x07`);
+    }
+}
+/** Human lines for the /status and /cost 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`);
+    }
+    if (profile.creditsResetDate)
+        lines.push(`Resets      ${profile.creditsResetDate}`);
+    return lines;
+}
+const INIT_PROMPT = `Analyze this codebase and create an AGENTS.md file containing:
+1. A short overview of what the project does
+2. Build, run, lint and test commands
+3. Architecture and code structure (key directories and what lives in them)
+4. Code style conventions used in this repo (imports, formatting, naming, error handling)
+
+If an AGENTS.md already exists, improve it. Keep it under ~60 lines so it is cheap to include in future prompts.`;
+// Ported from the Orbital extension's commit slash command (commitCommandResponse).
+const buildCommitPrompt = (userInput) => `The user has explicitly asked you to check pending changes and generate detailed commit messages. You MUST now help them with this.
+
+Please check all the pending changes in the git repository and generate detailed commit messages. If needed, you can split into multiple commits also.
+
+Instructions:
+1. First, check all pending changes using git status and git diff
+2. Group related changes together logically (e.g., a feature implementation, a bug fix, refactoring, etc.)
+3. For each logical group, generate a detailed, conventional commit message following the format:
+   type(scope): short description
+
+   Detailed explanation of what changed and why
+4. Create separate commits for each logical group using git add and git commit
+5. For GitHub repositories only, attribute the commit author as: matterai-app[bot]
+
+To detect if the repository is hosted on GitHub, check the remote URL using:
+  git remote get-url origin
+
+If the remote URL contains "github.com", use the author flag:
+  git commit --author="matterai-app[bot] <matterai-app[bot]@users.noreply.github.com>"
+
+Before committing, present the commit messages to the user for review and ask them to confirm before executing.${userInput ? `\n\nThe user provided the following input with the commit command:\n${userInput}` : ""}`;
+const buildCodeReviewPrompt = (userInput) => `The user has explicitly asked you to perform a thorough code review of the pending changes. You MUST now help them with this.
+
+Review the code as a panel of four experts. Adopt each expert persona fully, one at a time, and review the complete change set from that specialty before moving on to the next:
+
+1. Performance Expert — algorithmic complexity, redundant computation or I/O, N+1 queries, unnecessary allocations, blocking calls on hot paths, missed caching or batching opportunities, and memory leaks.
+2. Security Expert — injection (SQL/command/path), unsafe deserialization, missing input validation or sanitization, secrets or credentials in code, authentication/authorization gaps, unsafe defaults, and risky dependency usage.
+3. Bug Hunter — logic errors, off-by-one mistakes, null/undefined handling, unhandled errors and rejected promises, race conditions, incorrect edge-case behavior, type coercion pitfalls, and broken assumptions between callers and callees.
+4. Test Expert — missing or inadequate test coverage for the changed behavior, untested edge cases and error paths, assertions that don't verify the actual behavior, and brittle or flaky test patterns; propose specific test cases worth adding.
+
+Instructions:
+1. First, gather the changes to review: use git status and git diff (including staged changes). If the working tree is clean, review the most recent commit instead.
+2. Read the surrounding code of the changed files whenever you need more context for a finding — do not judge a diff hunk in isolation.
+3. Report findings grouped per expert. For each finding include: severity (critical / major / minor), the file and line, what is wrong, why it matters, and a concrete suggested fix.
+4. Only report real findings. If an expert finds nothing significant, state that explicitly — do not invent issues to fill space.
+5. Finish with a short summary: all findings ordered by severity, and an overall verdict on whether the changes are safe to merge.
+
+This is a review only — do NOT modify any files. Present the findings to the user.${userInput ? `\n\nThe user provided the following input with the code-review command:\n${userInput}` : ""}`;
+let rowCounter = 0;
+function rowId() {
+    return `row-${rowCounter++}`;
+}
+export function App({ initialView, initialPrompt, initialSession, }) {
+    const { exit } = useApp();
+    const [settings, setSettings] = useState(() => loadSettings());
+    const [view, setView] = useState(initialView ?? (getAuthToken(settings) ? "chat" : "login"));
+    const [rows, setRows] = useState(() => [
+        { kind: "header", id: "header", cwd: process.cwd(), modelName: getModel(loadSettings().model).name },
+    ]);
+    const [busy, setBusy] = useState(false);
+    const [busyLabel, setBusyLabel] = useState("Thinking");
+    const [streamingReasoning, setStreamingReasoning] = useState("");
+    const [streamingText, setStreamingText] = useState("");
+    const [runningTool, setRunningTool] = useState(null);
+    const [pendingApproval, setPendingApproval] = useState(null);
+    const [pendingFollowup, setPendingFollowup] = useState(null);
+    const [modelPickerOpen, setModelPickerOpen] = useState(false);
+    const [resumableSessions, setResumableSessions] = useState(null);
+    const [staticKey, setStaticKey] = useState(0);
+    const [tasks, setTasks] = useState("");
+    const [contextTokens, setContextTokens] = useState(0);
+    const [totalCost, setTotalCost] = useState(0);
+    const [approvalMode, setApprovalMode] = useState(() => settings.autoApproveEdits && settings.autoApproveSafeCommands
+        ? "auto"
+        : settings.autoApproveEdits
+            ? "edits"
+            : "ask");
+    const [sessionTitle, setSessionTitle] = useState("");
+    const [usage, setUsage] = useState(null);
+    // Refresh plan/usage from /axoncode/profile (shown below the chat box).
+    const refreshUsage = useCallback(() => {
+        const token = getAuthToken(loadSettings());
+        if (!token)
+            return;
+        fetchProfile(token)
+            .then((profile) => setUsage({ plan: profile.plan, usagePercentage: profile.usagePercentage }))
+            .catch(() => { });
+    }, []);
+    const agentRef = useRef(null);
+    const expandReasoningRef = useRef(false);
+    const reasoningBufferRef = useRef("");
+    const textBufferRef = useRef("");
+    // taskId for which a title fetch has already been started (once per task).
+    const titleTaskRef = useRef(null);
+    const maybeFetchTitle = useCallback(() => {
+        const agent = agentRef.current;
+        if (!agent || titleTaskRef.current === agent.taskId)
+            return;
+        titleTaskRef.current = agent.taskId;
+        const token = getAuthToken(loadSettings());
+        if (!token)
+            return;
+        void fetchTaskTitle(agent.taskId, token).then((title) => {
+            if (title && agentRef.current?.taskId === agent.taskId) {
+                setSessionTitle(title);
+                setTerminalTitle(`${title} (orbcode)`);
+                agent.setTitle(title);
+            }
+        });
+    }, []);
+    const pushRow = useCallback((row) => {
+        setRows((prev) => [...prev, { ...row, id: rowId() }]);
+    }, []);
+    // Wipe the visible transcript and remount <Static> with just the header —
+    // a clean slate for /clear, /new and /resume.
+    const resetTranscript = useCallback(() => {
+        if (process.stdout.isTTY) {
+            process.stdout.write("\x1b[2J\x1b[H");
+        }
+        setRows([
+            { kind: "header", id: rowId(), cwd: process.cwd(), modelName: getModel(loadSettings().model).name },
+        ]);
+        setStaticKey((k) => k + 1);
+    }, []);
+    const handleEvent = useCallback((event) => {
+        switch (event.type) {
+            case "reasoning-delta":
+                reasoningBufferRef.current += event.text;
+                setStreamingReasoning(reasoningBufferRef.current);
+                setBusyLabel("Thinking");
+                break;
+            case "reasoning-done":
+                pushRow({
+                    kind: "reasoning",
+                    text: reasoningBufferRef.current,
+                    durationMs: event.durationMs,
+                    expanded: expandReasoningRef.current,
+                });
+                reasoningBufferRef.current = "";
+                setStreamingReasoning("");
+                break;
+            case "text-delta":
+                textBufferRef.current += event.text;
+                setStreamingText(textBufferRef.current);
+                setBusyLabel("Responding");
+                break;
+            case "text-done":
+                pushRow({ kind: "assistant", text: textBufferRef.current });
+                textBufferRef.current = "";
+                setStreamingText("");
+                break;
+            case "tool-start":
+                setRunningTool({ id: event.id, name: event.name, summary: event.summary });
+                setBusyLabel(`Running ${event.name}`);
+                break;
+            case "tool-end":
+                setRunningTool(null);
+                setBusyLabel("Thinking");
+                pushRow({
+                    kind: "tool",
+                    name: event.name,
+                    summary: event.summary,
+                    resultPreview: event.resultPreview,
+                    isError: event.isError,
+                    diff: event.diff,
+                });
+                break;
+            case "todos":
+                setTasks(event.todos);
+                break;
+            case "usage":
+                setContextTokens(event.inputTokens + event.outputTokens);
+                setTotalCost(event.totalCost);
+                break;
+            case "completion":
+                pushRow({ kind: "completion", text: event.result });
+                break;
+            case "error":
+                pushRow({ kind: "error", text: event.message });
+                break;
+            case "turn-end":
+                // Flush anything still streaming (e.g. on interrupt).
+                if (textBufferRef.current) {
+                    pushRow({ kind: "assistant", text: textBufferRef.current });
+                    textBufferRef.current = "";
+                    setStreamingText("");
+                }
+                if (reasoningBufferRef.current) {
+                    reasoningBufferRef.current = "";
+                    setStreamingReasoning("");
+                }
+                setRunningTool(null);
+                setBusy(false);
+                maybeFetchTitle();
+                refreshUsage();
+                break;
+        }
+    }, [pushRow, maybeFetchTitle, refreshUsage]);
+    const createAgent = useCallback((resume) => {
+        const current = loadSettings();
+        return new Agent({
+            cwd: process.cwd(),
+            token: getAuthToken(current),
+            modelId: current.model,
+            organizationId: current.organizationId,
+            baseUrl: current.baseUrl,
+            autoApproveEdits: current.autoApproveEdits,
+            autoApproveSafeCommands: current.autoApproveSafeCommands,
+            resume,
+            callbacks: {
+                onEvent: handleEvent,
+                requestApproval: (request) => new Promise((resolve) => setPendingApproval({ request, resolve })),
+                requestFollowup: (question, suggestions) => new Promise((resolve) => setPendingFollowup({ question, suggestions, resolve })),
+            },
+        });
+    }, [handleEvent]);
+    const getAgent = useCallback(() => {
+        if (!agentRef.current) {
+            agentRef.current = createAgent();
+        }
+        return agentRef.current;
+    }, [createAgent]);
+    const handleResume = useCallback((session) => {
+        setResumableSessions(null);
+        agentRef.current = createAgent(session);
+        resetTranscript();
+        setTasks(session.todos ?? "");
+        setTotalCost(session.totalCost ?? 0);
+        if (session.title) {
+            // The stored title is already the backend one (or the prompt
+            // fallback); don't re-fetch for this task.
+            titleTaskRef.current = session.id;
+            setSessionTitle(session.title);
+            setTerminalTitle(`${session.title} (orbcode)`);
+        }
+        // Replay the conversation into the transcript.
+        for (const message of session.messages) {
+            if (message.role === "user" && typeof message.content === "string") {
+                const match = /<user_query>\n?([\s\S]*?)\n?<\/user_query>/.exec(message.content);
+                if (match)
+                    pushRow({ kind: "user", text: match[1] });
+            }
+            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}` });
+    }, [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]);
+    const handleCommand = useCallback((command) => {
+        const [name, ...rest] = command.split(/\s+/);
+        const arg = rest.join(" ");
+        switch (name) {
+            case "/help":
+                pushRow({
+                    kind: "info",
+                    text: SLASH_COMMANDS.map((c) => `${c.name.padEnd(12)} ${c.description}`).join("\n"),
+                });
+                break;
+            case "/model": {
+                const ids = Object.keys(AXON_MODELS);
+                if (arg && isValidAxonModel(arg)) {
+                    switchModel(arg);
+                }
+                else if (arg && isValidAxonModel(`axon-code-2-5-${arg}`)) {
+                    switchModel(`axon-code-2-5-${arg}`);
+                }
+                else if (arg) {
+                    pushRow({ kind: "error", text: `Unknown model "${arg}". Available: ${ids.join(", ")}` });
+                }
+                else {
+                    setModelPickerOpen(true);
+                }
+                break;
+            }
+            case "/clear":
+                // Like the terminal's `clear`: wipe the view only. The
+                // conversation, session and context all continue.
+                resetTranscript();
+                break;
+            case "/new":
+                // Drop the agent entirely so the next message starts a fresh session.
+                agentRef.current = null;
+                titleTaskRef.current = null;
+                setSessionTitle("");
+                setTerminalTitle("orbcode");
+                setTasks("");
+                setContextTokens(0);
+                resetTranscript();
+                break;
+            case "/analytics": {
+                const url = `${APP_URL}/orbital`;
+                pushRow({ kind: "info", text: `Opening analytics: ${url}` });
+                void open(url).catch(() => { });
+                break;
+            }
+            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." });
+                    break;
+                }
+                setResumableSessions(sessions);
+                break;
+            }
+            case "/compact":
+                if (!getAuthToken(settings)) {
+                    setView("login");
+                    break;
+                }
+                setBusy(true);
+                setBusyLabel("Compacting");
+                void getAgent().compact();
+                break;
+            case "/tasks":
+                pushRow({
+                    kind: "info",
+                    text: tasks.trim() ? `Tasks\n${tasks}` : "No tasks yet.",
+                });
+                break;
+            case "/status": {
+                const model = getModel(settings.model);
+                const contextPct = Math.min(100, Math.round((contextTokens / model.contextWindow) * 100));
+                pushRow({
+                    kind: "info",
+                    text: [
+                        `Version     ${VERSION}`,
+                        `Model       ${model.name} (${model.id})`,
+                        `Directory   ${process.cwd()}`,
+                        `Account     ${getAuthToken(settings) ? (settings.apiKey || process.env.ORBCODE_TOKEN ? "API key" : "signed in") : "signed out"}${settings.organizationId ? ` · org ${settings.organizationId}` : ""}`,
+                        `Gateway     ${settings.baseUrl ?? "MatterAI (default)"}`,
+                        `Context     ${contextTokens.toLocaleString()} / ${model.contextWindow.toLocaleString()} tokens (${contextPct}%)`,
+                        `Cost        $${totalCost.toFixed(4)} this session`,
+                        `Approvals   edits ${settings.autoApproveEdits ? "auto" : "ask"} · safe commands ${settings.autoApproveSafeCommands ? "auto" : "ask"}`,
+                        ...(sessionTitle ? [`Task        ${sessionTitle}`] : []),
+                    ].join("\n"),
+                });
+                const statusToken = getAuthToken(settings);
+                if (statusToken) {
+                    fetchProfile(statusToken)
+                        .then((profile) => {
+                        const lines = usageLines(profile);
+                        if (lines.length > 0)
+                            pushRow({ kind: "info", text: lines.join("\n") });
+                    })
+                        .catch(() => { });
+                }
+                break;
+            }
+            case "/init":
+                if (!getAuthToken(settings)) {
+                    setView("login");
+                    break;
+                }
+                pushRow({ kind: "user", text: "/init" });
+                setBusy(true);
+                setBusyLabel("Thinking");
+                void getAgent().runTurn(INIT_PROMPT);
+                break;
+            case "/commit":
+                if (!getAuthToken(settings)) {
+                    setView("login");
+                    break;
+                }
+                pushRow({ kind: "user", text: command });
+                setBusy(true);
+                setBusyLabel("Thinking");
+                void getAgent().runTurn(buildCommitPrompt(arg));
+                break;
+            case "/code-review":
+                if (!getAuthToken(settings)) {
+                    setView("login");
+                    break;
+                }
+                pushRow({ kind: "user", text: command });
+                setBusy(true);
+                setBusyLabel("Reviewing");
+                void getAgent().runTurn(buildCodeReviewPrompt(arg));
+                break;
+            case "/version":
+                pushRow({ kind: "info", text: `OrbCode CLI v${VERSION}` });
+                break;
+            case "/cost": {
+                pushRow({ kind: "info", text: `Session cost: $${totalCost.toFixed(4)} (fetching balance…)` });
+                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);
+                        if (lines.length > 0)
+                            pushRow({ kind: "info", text: lines.join("\n") });
+                    })
+                        .catch(() => { });
+                }
+                break;
+            }
+            case "/login":
+                setView("login");
+                break;
+            case "/logout": {
+                const updated = { ...settings, token: undefined };
+                setSettings(updated);
+                saveSettings(updated);
+                agentRef.current = null;
+                setView("login");
+                break;
+            }
+            case "/exit":
+                exit();
+                break;
+            default:
+                pushRow({ kind: "error", text: `Unknown command: ${name}. Try /help.` });
+        }
+    }, [settings, tasks, contextTokens, totalCost, sessionTitle, exit, pushRow, getAgent, switchModel, resetTranscript]);
+    const handleSubmit = useCallback((value) => {
+        if (value.startsWith("/")) {
+            handleCommand(value);
+            return;
+        }
+        if (!getAuthToken(settings)) {
+            setView("login");
+            return;
+        }
+        pushRow({ kind: "user", text: value });
+        setBusy(true);
+        setBusyLabel("Thinking");
+        void getAgent().runTurn(value);
+    }, [settings.token, handleCommand, getAgent, pushRow]);
+    // Apply --resume and an initial prompt (`orbcode "do something"`) on startup.
+    const bootedRef = useRef(false);
+    useEffect(() => {
+        if (bootedRef.current)
+            return;
+        bootedRef.current = true;
+        if (initialSession)
+            handleResume(initialSession);
+        if (initialPrompt)
+            handleSubmit(initialPrompt);
+        refreshUsage();
+    }, [initialSession, initialPrompt, handleResume, handleSubmit, refreshUsage]);
+    useInput((input, key) => {
+        if (key.escape && busy && !pendingApproval && !pendingFollowup) {
+            agentRef.current?.abort();
+        }
+        if (key.tab && key.shift) {
+            setApprovalMode((prev) => {
+                const next = prev === "ask" ? "edits" : prev === "edits" ? "auto" : "ask";
+                const autoApproveEdits = next !== "ask";
+                const autoApproveSafeCommands = next === "auto";
+                const updated = { ...loadSettings(), autoApproveEdits, autoApproveSafeCommands };
+                setSettings(updated);
+                saveSettings(updated);
+                agentRef.current?.setApprovalMode(autoApproveEdits, autoApproveSafeCommands);
+                return next;
+            });
+        }
+        if (key.ctrl && input === "o") {
+            const expanded = !expandReasoningRef.current;
+            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)));
+            if (process.stdout.isTTY) {
+                process.stdout.write("\x1b[2J\x1b[H");
+            }
+            setStaticKey((k) => k + 1);
+        }
+    });
+    const handleLogin = useCallback((token, profile) => {
+        const updated = { ...loadSettings(), token };
+        setSettings(updated);
+        saveSettings(updated);
+        agentRef.current = null;
+        setView("chat");
+        setUsage({ plan: profile.plan, usagePercentage: profile.usagePercentage });
+        const who = profile.user?.name || profile.user?.email;
+        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 inputActive = view === "chat" && !busy && !pendingApproval && !pendingFollowup && !modelPickerOpen && !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: [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) => {
+                                setModelPickerOpen(false);
+                                switchModel(modelId);
+                            }, onCancel: () => setModelPickerOpen(false) }) })), resumableSessions && (_jsx(Box, { marginTop: 1, children: _jsx(SessionPicker, { sessions: resumableSessions, onSelect: handleResume, onCancel: () => setResumableSessions(null) }) })), 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 && !streamingText && (_jsx(Box, { marginTop: 1, children: _jsx(Spinner, { label: busyLabel }) })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_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 })] })] }))] }));
+}
+function tail(text, lines) {
+    const all = text.split("\n").filter((l) => l.trim());
+    return all.slice(-lines).join("\n");
+}
+function LoginSection({ onLogin }) {
+    return _jsx(LoginView, { onLogin: onLogin });
+}

package/dist/ui/LoginView.js

@@ -0,0 +1,82 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import open from "open";
+import { COLORS, PRODUCT_NAME } from "../branding.js";
+import { getAuthorizeUrl, pollDeviceAuth, startDeviceAuth, verifyToken, } from "../auth/auth.js";
+import { Spinner } from "./components/Spinner.js";
+export function LoginView({ onLogin }) {
+    const [phase, setPhase] = useState("idle");
+    const [error, setError] = useState(null);
+    const [authorizeUrl, setAuthorizeUrl] = useState("");
+    const cancelledRef = useRef(false);
+    const pollGeneration = useRef(0);
+    useEffect(() => () => {
+        cancelledRef.current = true;
+    }, []);
+    const finishWithToken = async (token) => {
+        setPhase("verifying");
+        setError(null);
+        try {
+            const profile = await verifyToken(token);
+            if (!cancelledRef.current)
+                onLogin(token, profile);
+        }
+        catch (err) {
+            setPhase("idle");
+            setError(err.message);
+        }
+    };
+    const beginBrowserLogin = async () => {
+        setPhase("starting");
+        setError(null);
+        const generation = ++pollGeneration.current;
+        try {
+            const { devicecode, expiresIn, interval } = await startDeviceAuth();
+            const url = getAuthorizeUrl(devicecode);
+            setAuthorizeUrl(url);
+            open(url).catch(() => { });
+            setPhase("waiting");
+            const deadline = Date.now() + expiresIn * 1000;
+            while (Date.now() < deadline) {
+                if (cancelledRef.current || pollGeneration.current !== generation)
+                    return;
+                await new Promise((resolve) => setTimeout(resolve, interval * 1000));
+                if (cancelledRef.current || pollGeneration.current !== generation)
+                    return;
+                const result = await pollDeviceAuth(devicecode);
+                if (result.status === "authorized") {
+                    await finishWithToken(result.token);
+                    return;
+                }
+                if (result.status === "expired")
+                    break;
+            }
+            if (pollGeneration.current === generation && !cancelledRef.current) {
+                setPhase("idle");
+                setError("Sign-in timed out. Press Enter to try again.");
+            }
+        }
+        catch (err) {
+            if (pollGeneration.current === generation && !cancelledRef.current) {
+                setPhase("idle");
+                setError(err.message);
+            }
+        }
+    };
+    useInput((input, key) => {
+        if (phase === "verifying" || phase === "starting")
+            return;
+        if (key.escape && phase === "waiting") {
+            // Cancel polling and go back to idle so the user can retry.
+            pollGeneration.current++;
+            setPhase("idle");
+            setError(null);
+            return;
+        }
+        if (key.return && phase === "idle") {
+            void beginBrowserLogin();
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: COLORS.primary, paddingX: 1, children: [_jsxs(Text, { bold: true, color: COLORS.primary, children: ["Sign in to ", PRODUCT_NAME] }), phase === "waiting" ? (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1, children: _jsx(Spinner, { label: "Waiting for authorization in your browser" }) }), _jsx(Text, { dimColor: true, children: "Approve the \"Authorize OrbCode CLI\" dialog at:" }), _jsxs(Text, { dimColor: true, children: [" ", authorizeUrl] }), _jsx(Text, { dimColor: true, children: "Esc to cancel" })] })) : (_jsxs(Text, { children: ["Press ", _jsx(Text, { bold: true, children: "Enter" }), " to open MatterAI in your browser and authorize OrbCode CLI."] })), phase === "starting" && _jsx(Text, { color: COLORS.thinking, children: "Contacting sign-in service\u2026" }), phase === "verifying" && _jsx(Text, { color: COLORS.thinking, children: "Verifying\u2026" }), error && _jsxs(Text, { color: COLORS.error, children: ["\u2717 ", error] }), _jsx(Text, { dimColor: true, children: "To use a token instead, set apiKey in ~/.orbcode/settings.json or the ORBCODE_TOKEN env var." })] }));
+}