@ocis/myagent-cli 0.2.0

package/dist/ui/app.js

@@ -0,0 +1,1061 @@
+// ---------------------------------------------------------------------------
+// Interactive TUI application: alt-screen layout with a persistent sidebar,
+// the transcript, the editor and the footer.
+//
+// Owns the slash commands, keybindings, approvals, resume/render of remote
+// history and the git status polling that feeds the right panel.
+// ---------------------------------------------------------------------------
+import { basename, join, resolve } from "node:path";
+import { CombinedAutocompleteProvider, Box, Container, HStack, isViewportTUI, matchesKey, MouseRegion, ProcessTerminal, ScrollView, SelectList, Spacer, TuiAltScreen, VStack, visibleWidth, } from "@earendil-works/pi-tui";
+import { AgentRunner, usageFromSession } from "../agent/turn.js";
+import { MODES, nextMode, stripModeMarker } from "../agent/modes.js";
+import { createSystemPromptBuilder } from "../agent/prompt-builder.js";
+import { deriveTitle } from "../agent/sessions.js";
+import { TodoStore } from "../agent/todo.js";
+import { ApprovalPolicy } from "../approval/policy.js";
+import { collectFileDiff, collectGitStatus, EMPTY_GIT_STATUS } from "../git/status.js";
+import { writeFile } from "../runtime.js";
+import { bgRgb, isColorEnabled, modeBorder, overlayBackgroundRgb, panelBackgroundRgb, style, userMessageBackgroundRgb } from "./colors.js";
+import { helpLines } from "./help.js";
+import { buildModelItems, currentModelId } from "./model-list.js";
+import { createQuitConfirm } from "./quit-confirm.js";
+import { selectCardWidth, selectDescriptionMinWidth, selectLabelColumn, selectVisibleRows } from "./select-popup.js";
+import { editorTheme, selectListTheme } from "./theme.js";
+import { parseToolArgs } from "./tool-view.js";
+import { LogoComponent } from "./logo.js";
+import { ApprovalFloatComponent, AssistantMessageComponent, DiffOverlay, FooterComponent, InfoOverlay, NoticeComponent, PromptEditor, QueuedMessagesComponent, ReasoningBlockComponent, SelectOverlay, SidebarComponent, ToolCallComponent, UserMessageComponent, } from "./components.js";
+const SIDEBAR_MIN_WIDTH = 34;
+const SIDEBAR_RATIO = 0.25;
+const SIDEBAR_MIN_TERMINAL_WIDTH = 100;
+/**
+ * Panel width: ~25% of the terminal, floored at a readable minimum. Grows
+ * with wide terminals instead of being capped, so the panel keeps its share
+ * as the window grows (the transcript already gets the larger part).
+ */
+export function sidebarWidth(columns) {
+    return Math.max(SIDEBAR_MIN_WIDTH, Math.round(columns * SIDEBAR_RATIO));
+}
+export async function runTui(opts) {
+    const terminal = new ProcessTerminal();
+    // The editor draws its own inverse-video cursor cell; keep the terminal's
+    // hardware cursor hidden so no second (often bar-shaped) cursor shows up.
+    const tui = new TuiAltScreen(terminal, false, undefined, { mouse: true });
+    const todos = new TodoStore();
+    const transcript = new Container();
+    const scroll = new ScrollView(transcript, { follow: "end", primary: true, scrollbar: "auto" });
+    let panelBg;
+    let overlayBg;
+    let userBg;
+    const sidebar = new SidebarComponent(emptySidebar(), {
+        todos,
+        viewportHeight: () => sidebarScroll.viewportHeight,
+        panelBg: () => panelBg,
+    });
+    // Scrollable so a short terminal never clips the panel (wheel or Alt+↑/↓).
+    // The MouseRegion sits inside the ScrollView: the layout offsets its box by
+    // scrollTop, so mouse events arrive in content coordinates.
+    const sidebarScroll = new ScrollView(new MouseRegion(sidebar, onSidebarMouse), {
+        scrollbar: "auto",
+        overscroll: "contain",
+        scrollbarTrackStyle: (text) => (panelBg ? bgRgb(panelBg, style.dim(text)) : style.dim(text)),
+        scrollbarThumbStyle: (text) => (panelBg ? bgRgb(panelBg, text) : text),
+    });
+    // The ASK/AUTO badge is clickable — same action as Shift+Tab. Guarded so a
+    // click can't toggle approval underneath an open picker/approval card.
+    const footer = new FooterComponent(emptyFooter(opts), () => {
+        if (!tui.hasOverlay())
+            toggleApproval();
+    });
+    // Idle Ctrl+C is two-step: the first press arms the hint in the footer, the
+    // second (within the window) exits, and expiry drops back to idle.
+    const quitConfirm = createQuitConfirm((armed) => {
+        footer.state.pendingQuit = armed;
+        tui.requestRender();
+    });
+    const editor = new PromptEditor(tui, editorTheme(modeBorder(opts.initialMode)), opts.initialMode, opts.initialThinking);
+    // Inset the prompt from the edges; the left column stays on the terminal's
+    // own background so it reads as one continuous surface.
+    const promptBox = new Box(2, 0);
+    promptBox.addChild(editor);
+    // Steers waiting on the server float between the transcript and the prompt.
+    const queuedMessages = new QueuedMessagesComponent();
+    let sidebarVisible = true;
+    // -------------------------------------------------------------------------
+    // Git status (right panel)
+    // -------------------------------------------------------------------------
+    let gitRefreshTimer = null;
+    const applyGit = (status) => {
+        sidebar.state.git = status;
+        footer.state.branch = status.branch;
+        tui.requestRender();
+    };
+    const refreshGit = () => {
+        if (gitRefreshTimer)
+            clearTimeout(gitRefreshTimer);
+        gitRefreshTimer = setTimeout(() => void collectGitStatus(opts.workspace).then(applyGit), 250);
+        gitRefreshTimer.unref?.();
+    };
+    void collectGitStatus(opts.workspace).then(applyGit);
+    // -------------------------------------------------------------------------
+    // Sidebar interaction: click a file for its diff, click "more" to expand
+    // -------------------------------------------------------------------------
+    let diffOverlay = null;
+    function onSidebarMouse(event) {
+        if (event.type !== "press" && event.type !== "click")
+            return undefined;
+        const target = sidebar.targetAt(event.y);
+        if (!target)
+            return undefined;
+        // Consume the press so the release is delivered back as a click.
+        if (event.type === "press")
+            return { render: false };
+        if (target.type === "toggle-changes") {
+            sidebar.toggleChanges();
+            tui.requestRender();
+        }
+        else {
+            void openFileDiff(target.file);
+        }
+        return {};
+    }
+    async function openFileDiff(file) {
+        const diff = await collectFileDiff(opts.workspace, file);
+        diffOverlay?.hide(); // one diff popup at a time
+        const overlay = new DiffOverlay(`${file.status} ${file.path}`, diff.text, {
+            // Re-read per render: after a zoom the card must fit the new screen.
+            viewportHeight: () => Math.max(1, tui.terminal.rows - 2), // frame edges
+            truncated: diff.truncated,
+            close: () => handle.hide(),
+        });
+        const handle = tui.showOverlay(overlay, { width: "100%", maxHeight: "100%" });
+        diffOverlay = handle;
+    }
+    // -------------------------------------------------------------------------
+    // Session metadata + index persistence
+    // -------------------------------------------------------------------------
+    let thinkingLevels = [];
+    let firstUserMessage = null;
+    const titledThreads = new Set();
+    const sessionIndex = opts.sessionIndex;
+    todos.onChanged(() => {
+        if (runner.threadId)
+            sessionIndex.setTodos(opts.workspace, runner.threadId, todos.toJSON());
+        tui.requestRender();
+    });
+    // -------------------------------------------------------------------------
+    // Transcript view state
+    //
+    // currentAssistant/currentReasoning point at the component receiving the
+    // live stream; any non-content event resets them so block boundaries are
+    // explicit instead of inferred from Container internals.
+    // -------------------------------------------------------------------------
+    let currentAssistant = null;
+    let currentReasoning = null;
+    const reasoningBlocks = [];
+    /** Every rendered tool call (live + replayed history), keyed by id — result
+     *  updates and the Ctrl+O toggle. */
+    const toolCalls = new Map();
+    // Deliberate tradeoff: these grow unboundedly for the life of the session
+    // (cleared only by /new or a session switch). logLines/runLog back /export
+    // (the full transcript is the point), and toolCalls backs Ctrl+O over every
+    // rendered call — capping any of them would silently truncate the export or
+    // the toggle's reach. A session is bounded by what the user is willing to
+    // scroll; if this ever becomes a real footprint, cap runLog (debug-only)
+    // first and keep logLines intact.
+    const logLines = [];
+    let lastError = null;
+    let runLog = "";
+    function addTranscript(component) {
+        transcript.addChild(component);
+        tui.requestRender();
+    }
+    function addSpacer() {
+        transcript.addChild(new Spacer(1));
+    }
+    function resetStreamTargets() {
+        currentAssistant = null;
+        currentReasoning = null;
+    }
+    /** Cumulative usage is the runner/sidebar source; the footer shows one run. */
+    let runBaseline = null;
+    function applyUsage(usage, options = {}) {
+        runner.usage = usage;
+        sidebar.state.usage = usage;
+        footer.state.usage = options.resetFooter ? null : runUsageDelta(usage, runBaseline);
+        tui.requestRender();
+    }
+    const buildSystemPrompt = createSystemPromptBuilder({
+        workspace: opts.workspace,
+        skillDirs: opts.skillDirs,
+        noContextFiles: opts.noContextFiles,
+        extraInstructions: opts.extraInstructions,
+    });
+    // -------------------------------------------------------------------------
+    // Approval float (above the prompt)
+    // -------------------------------------------------------------------------
+    /**
+     * The approval currently being decided (null when none is open). NOT a
+     * modal overlay: the editor keeps focus, the card floats between the
+     * transcript and the prompt, and ctrl+y / ctrl+n answer it from the global
+     * key listener. The policy enforces the fixed 10-minute deadline and the
+     * cancellation (server release / stop) — its AbortSignal is this card's
+     * dismissal hook.
+     */
+    const approvalFloat = new ApprovalFloatComponent();
+    let approvalResolve = null;
+    /** Dismiss the card. The policy's race is the authority for the outcome. */
+    const clearApproval = () => {
+        approvalFloat.set(null);
+        approvalResolve = null;
+        tui.requestRender();
+    };
+    /** Answer the pending approval (ctrl+y / ctrl+n). */
+    const answerApproval = (outcome) => {
+        const resolve = approvalResolve;
+        if (!resolve)
+            return;
+        clearApproval();
+        resolve(outcome);
+    };
+    const approval = new ApprovalPolicy(opts.initialApproval, (request, signal) => new Promise((resolve) => {
+        approvalFloat.set(request);
+        approvalResolve = resolve;
+        // The policy settles the outcome itself (timeout / cancelled) — this
+        // listener only dismisses the card. The prompt promise stays pending
+        // and is dropped with the race.
+        signal.addEventListener("abort", () => {
+            if (approvalResolve === resolve)
+                clearApproval();
+        }, { once: true });
+        tui.requestRender();
+    }), () => runner.mode);
+    // -------------------------------------------------------------------------
+    // Runner + callbacks
+    // -------------------------------------------------------------------------
+    /** Render a user message into the transcript and release any matching float. */
+    const addUserMessage = (text, queued) => {
+        resetStreamTargets();
+        addTranscript(new UserMessageComponent(text, queued, { bg: () => userBg }));
+        addSpacer();
+        log(`> ${text}`);
+        queuedMessages.release(text);
+    };
+    const callbacks = {
+        onUserMessage: addUserMessage,
+        onSteerQueued: (text) => {
+            queuedMessages.add(text);
+            tui.requestRender();
+        },
+        // The server took the steered message into the running turn — it is part
+        // of the conversation now: release the float into the transcript.
+        onSteerAccepted: (text) => addUserMessage(text, false),
+        onContent: (delta) => {
+            currentReasoning = null;
+            if (!currentAssistant) {
+                currentAssistant = new AssistantMessageComponent();
+                addTranscript(currentAssistant);
+            }
+            currentAssistant.append(delta);
+            logRaw(delta);
+            // Streamed text must not depend on the spinner's 100ms tick to appear —
+            // every other handler requests its own render; content is no different.
+            tui.requestRender();
+        },
+        onReasoning: (delta) => {
+            currentAssistant = null;
+            if (!currentReasoning) {
+                currentReasoning = new ReasoningBlockComponent();
+                reasoningBlocks.push(currentReasoning);
+                addTranscript(currentReasoning);
+            }
+            currentReasoning.append(delta);
+            tui.requestRender();
+        },
+        onUsage: (usage) => applyUsage(usage),
+        onServerTool: (tool) => {
+            resetStreamTargets();
+            let component = toolCalls.get(tool.id);
+            if (!component) {
+                // Same component as client tools and replayed history — live server
+                // calls are click/Ctrl+O expandable exactly like after a rejoin.
+                component = new ToolCallComponent(tool.name, parseToolArgs(tool.arguments ?? "{}"));
+                toolCalls.set(tool.id, component);
+                addTranscript(component);
+            }
+            if (tool.phase === "result") {
+                component.setResult(typeof tool.result === "string" ? tool.result : JSON.stringify(tool.result ?? ""), tool.isError === true);
+            }
+            tui.requestRender();
+        },
+        onToolStart: (call, summary) => {
+            resetStreamTargets();
+            const component = new ToolCallComponent(call.name, parseToolArgs(call.arguments));
+            toolCalls.set(call.id, component);
+            addTranscript(component);
+            log(`⚙ ${call.name}: ${summary}`);
+            tui.requestRender();
+        },
+        onToolEnd: (call, output, isError) => {
+            toolCalls.get(call.id)?.setResult(output, isError);
+            log(`  ${isError ? "✗" : "✓"} ${output.split("\n")[0] ?? ""}`);
+            refreshGit();
+            tui.requestRender();
+        },
+        onNotice: (text, level) => {
+            resetStreamTargets();
+            addTranscript(new NoticeComponent(text, level));
+            if (level === "error")
+                lastError = text;
+            tui.requestRender();
+        },
+        onRunState: (state) => {
+            if (state === "running") {
+                quitConfirm.disarm();
+                // Snapshot the cumulative total so the footer can show this run alone.
+                runBaseline = runner.usage;
+                startSpinner();
+            }
+            else {
+                stopSpinner();
+            }
+            footer.state.runState = state;
+            tui.requestRender();
+        },
+        onThread: (threadId) => {
+            sessionIndex.remember(opts.workspace, threadId, firstUserMessage ? deriveTitle(firstUserMessage) : "New session");
+            if (firstUserMessage)
+                void titleThread(threadId, firstUserMessage);
+            tui.requestRender();
+        },
+        onSession: (detail) => {
+            applySessionDetail(detail);
+        },
+    };
+    const runner = new AgentRunner({
+        client: opts.client,
+        registry: opts.registry,
+        workspace: opts.workspace,
+        allowOutside: opts.allowOutside,
+        skillDirs: opts.skillDirs,
+        todos,
+        approval,
+        buildSystemPrompt,
+        callbacks,
+    });
+    runner.mode = opts.initialMode;
+    runner.thinkingLevel = opts.initialThinking;
+    runner.setModel(opts.initialModel ?? null);
+    if (opts.initialModel)
+        editor.model = opts.initialModel;
+    /**
+     * Cached GET /v1/models list — the picker refreshes on open; this cache is
+     * for the startup default display (and stays empty when the server is
+     * unreachable or has no models configured).
+     */
+    let defaultModelId = null;
+    void opts.client.listModels().then((models) => {
+        if (models.length === 0)
+            return;
+        defaultModelId = models.find((m) => m.default)?.id ?? models[0].id;
+        if (opts.initialModel && !models.some((m) => m.id === opts.initialModel)) {
+            addTranscript(new NoticeComponent(`Model "${opts.initialModel}" is not available on this integration — the server default applies instead.`, "warn"));
+        }
+        // Only fill the display before any thread/model knowledge exists.
+        if (!runner.threadId && !runner.selectedModel) {
+            runner.model = defaultModelId;
+            editor.model = defaultModelId;
+            tui.requestRender();
+        }
+    }).catch(() => { });
+    function log(line) {
+        logLines.push(line);
+    }
+    function logRaw(text) {
+        runLog += text;
+    }
+    function applySessionDetail(detail, options = {}) {
+        if (detail.model)
+            runner.model = detail.model;
+        editor.model = detail.model ?? runner.model;
+        if (detail.title)
+            sidebar.state.title = detail.title;
+        const usage = usageFromSession(detail.usage);
+        // A loaded/switched session has no run in this process — the footer starts empty.
+        if (usage)
+            applyUsage(usage, { resetFooter: options.resetFooter });
+        if (detail.thinking)
+            thinkingLevels = detail.thinking.levels;
+        tui.requestRender();
+    }
+    async function titleThread(threadId, message) {
+        if (titledThreads.has(threadId))
+            return;
+        titledThreads.add(threadId);
+        const title = deriveTitle(message);
+        sessionIndex.setTitle(opts.workspace, threadId, title);
+        sidebar.state.title = title;
+        tui.requestRender();
+        await opts.client.patchSessionTitle(threadId, title).catch(() => { });
+    }
+    // -------------------------------------------------------------------------
+    // Spinner
+    // -------------------------------------------------------------------------
+    let spinnerTimer = null;
+    function startSpinner() {
+        if (spinnerTimer)
+            return;
+        spinnerTimer = setInterval(() => {
+            footer.state.spinnerFrame++;
+            tui.requestRender();
+        }, 100);
+        spinnerTimer.unref?.();
+    }
+    function stopSpinner() {
+        if (spinnerTimer)
+            clearInterval(spinnerTimer);
+        spinnerTimer = null;
+    }
+    // -------------------------------------------------------------------------
+    // Layout
+    // -------------------------------------------------------------------------
+    let sidebarWidthNow = sidebarWidth(process.stdout.columns ?? 80);
+    const applyLayout = () => {
+        if (isViewportTUI(tui))
+            tui.setLayoutRoot(buildRoot());
+    };
+    // Left column owns the transcript, prompt and status bar; the right panel
+    // runs the full height and is unaffected by the left content.
+    const buildRoot = () => new HStack([
+        {
+            component: new VStack([
+                { component: scroll, basis: 0, grow: 1, minSize: 3 },
+                // Pending steers float between the transcript and the prompt; renders
+                // zero lines when empty.
+                { component: queuedMessages, basis: "auto", shrink: 0 },
+                // A pending approval floats directly above the prompt (renders zero
+                // lines when none is open).
+                { component: approvalFloat, basis: "auto", shrink: 0 },
+                { component: promptBox, basis: "auto", shrink: 1, minSize: 3 },
+                { component: footer, basis: "auto", shrink: 0 },
+            ]),
+            basis: 0,
+            grow: 1,
+            minSize: 1,
+        },
+        {
+            component: sidebarScroll,
+            basis: sidebarWidthNow,
+            maxSize: sidebarWidthNow,
+            shrink: 0,
+            visible: (vp) => sidebarVisible && vp.width >= SIDEBAR_MIN_TERMINAL_WIDTH,
+        },
+    ]);
+    applyLayout();
+    /** One page of sidebar scroll: the viewport minus two rows of overlap. */
+    const pageHeight = () => Math.max(1, sidebarScroll.viewportHeight - 2);
+    // The panel is ~25% of the terminal, so a resize rebuilds the layout root.
+    const onResize = () => {
+        const next = sidebarWidth(process.stdout.columns ?? 80);
+        if (next === sidebarWidthNow)
+            return;
+        sidebarWidthNow = next;
+        applyLayout();
+        tui.requestRender();
+    };
+    process.stdout.on("resize", onResize);
+    // -------------------------------------------------------------------------
+    // Resume
+    // -------------------------------------------------------------------------
+    const commands = [
+        { name: "help", description: "keybindings and commands" },
+        { name: "new", description: "start a new session" },
+        { name: "session", description: "list sessions and switch" },
+        { name: "plan", description: "switch to plan mode (read-only)" },
+        { name: "coding", description: "switch to coding mode (software work)" },
+        { name: "cowork", description: "switch to cowork mode (general tasks)" },
+        { name: "mode", description: "cycle plan/coding/cowork" },
+        { name: "edit", description: "toggle auto/ask approval" },
+        { name: "thinking", description: "set the thinking level" },
+        { name: "model", description: "choose the model (new sessions)" },
+        { name: "compact", description: "compact the session history" },
+        { name: "stop", description: "force-stop the running turn" },
+        { name: "reload", description: "reload context files and skills" },
+        { name: "export", description: "export the transcript" },
+        { name: "config", description: "show connection info" },
+        { name: "quit", description: "exit" },
+    ];
+    editor.setAutocompleteProvider(new CombinedAutocompleteProvider(commands, opts.workspace));
+    editor.onSubmit = (text) => {
+        editor.setText("");
+        void handleSubmit(text);
+    };
+    editor.mode = runner.mode;
+    editor.borderColor = modeBorder(runner.mode);
+    // The bottom-edge chips (mode / model / thinking) open their pickers — the
+    // mouse counterpart of Tab, /model and /thinking. Guarded so a click can't
+    // stack a second card while one is open.
+    editor.onChipClick = (chip) => {
+        if (tui.hasOverlay())
+            return;
+        if (chip === "mode")
+            showModePicker();
+        else if (chip === "model")
+            void showModelPicker();
+        else
+            showThinkingPicker();
+    };
+    /** The launch logo, kept so quit() can stop its shimmer timer. */
+    let launchLogo = null;
+    if (!opts.noLogo) {
+        launchLogo = new LogoComponent({ animate: true });
+        addTranscript(launchLogo);
+        addSpacer();
+        launchLogo.start(tui);
+    }
+    if (opts.resumeThreadId) {
+        runner.threadId = opts.resumeThreadId;
+        runner.resetModeAnnouncement();
+        const restoredTodos = sessionIndex.get(opts.workspace, opts.resumeThreadId)?.todos;
+        if (restoredTodos)
+            todos.replace(restoredTodos);
+        if (!(await loadSessionView(opts.resumeThreadId))) {
+            addTranscript(new NoticeComponent(`Could not load session ${opts.resumeThreadId}; starting fresh.`, "warn"));
+            runner.threadId = null;
+        }
+    }
+    function renderHistory(history) {
+        for (const message of history) {
+            if (message.role === "user") {
+                // The mode marker is machine-facing — don't show it in the transcript.
+                addTranscript(new UserMessageComponent(stripModeMarker(message.text), false, { bg: () => userBg }));
+                addSpacer();
+                continue;
+            }
+            if (message.text.trim()) {
+                const component = new AssistantMessageComponent();
+                component.append(message.text);
+                addTranscript(component);
+                addSpacer();
+            }
+            for (const toolCall of message.toolCalls ?? []) {
+                const component = new ToolCallComponent(toolCall.name, parseToolArgs(toolCall.arguments));
+                const output = typeof toolCall.result === "string" ? toolCall.result : JSON.stringify(toolCall.result ?? "");
+                component.setResult(output, toolCall.isError);
+                // Replayed calls must be toggleable too — Ctrl+O is the only keyboard path.
+                toolCalls.set(toolCall.id, component);
+                addTranscript(component);
+            }
+        }
+    }
+    /** Clear all view state; the remote thread is untouched. */
+    function clearView() {
+        resetStreamTargets();
+        toolCalls.clear();
+        reasoningBlocks.length = 0;
+        transcript.clear();
+        todos.replace([]);
+        runBaseline = null;
+        applyUsage(null);
+        sidebar.state.title = null;
+    }
+    /** Fetch and render a remote thread. Returns false when it is unreachable. */
+    async function loadSessionView(threadId) {
+        const detail = await opts.client.getSession(threadId, { history: true, historyLimit: 50 }).catch(() => null);
+        if (!detail)
+            return false;
+        renderHistory(detail.history ?? []);
+        applySessionDetail(detail, { resetFooter: true });
+        sessionIndex.remember(opts.workspace, threadId, detail.title || threadId);
+        return true;
+    }
+    // -------------------------------------------------------------------------
+    // Commands
+    // -------------------------------------------------------------------------
+    async function handleSubmit(text) {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return;
+        if (trimmed.startsWith("/")) {
+            await handleCommand(trimmed);
+            return;
+        }
+        if (!firstUserMessage)
+            firstUserMessage = trimmed;
+        await runner.send(trimmed);
+    }
+    /** Toggle AUTO/ASK (Shift+Tab or /edit); AUTO still asks for outside paths. */
+    function toggleApproval() {
+        footer.state.approval = approval.toggle();
+        tui.requestRender();
+    }
+    async function handleCommand(input) {
+        const [rawName, ...rest] = input.slice(1).split(/\s+/);
+        const name = (rawName ?? "").toLowerCase();
+        const argument = rest.join(" ").trim().toLowerCase();
+        switch (name) {
+            case "help":
+                showInfo("Help", helpLines(), { maxHeight: "90%" });
+                break;
+            case "new":
+                await newSession();
+                break;
+            case "session":
+            case "sessions":
+            case "resume":
+                await showSessions(argument === "all" ? "all" : "cwd");
+                break;
+            case "plan":
+            case "coding":
+            case "cowork":
+                setMode(name);
+                break;
+            case "mode":
+                setMode(nextMode(runner.mode));
+                break;
+            case "edit":
+                toggleApproval();
+                break;
+            case "thinking":
+                showThinkingPicker();
+                break;
+            case "model":
+                await showModelPicker();
+                break;
+            case "compact":
+                if (!runner.threadId)
+                    addTranscript(new NoticeComponent("No active session.", "warn"));
+                else {
+                    addTranscript(new NoticeComponent("Compacting session…", "info"));
+                    try {
+                        await runner.compact();
+                        addTranscript(new NoticeComponent("Compaction complete.", "info"));
+                    }
+                    catch (err) {
+                        addTranscript(new NoticeComponent(err instanceof Error ? err.message : String(err), "error"));
+                    }
+                }
+                break;
+            case "stop":
+                await runner.stop();
+                break;
+            case "reload":
+                addTranscript(new NoticeComponent("Context files and skills are re-read on every turn.", "info"));
+                break;
+            case "export":
+                await exportTranscript();
+                break;
+            case "config":
+                showInfo("Connection", [
+                    `server:      ${opts.config.baseUrl}`,
+                    `integration: ${opts.config.integrationId}`,
+                    `api key:     ${opts.config.apiKey ? `${opts.config.apiKey.slice(0, 8)}…` : "(none)"}`,
+                    `workspace:   ${opts.workspace}`,
+                    `approval:    ${approval.current}`,
+                ]);
+                break;
+            case "quit":
+            case "exit":
+                quit();
+                break;
+            default:
+                addTranscript(new NoticeComponent(`Unknown command: /${name} (try /help)`, "warn"));
+        }
+    }
+    function setMode(mode) {
+        runner.setMode(mode);
+        editor.mode = mode;
+        editor.borderColor = modeBorder(mode);
+        tui.requestRender();
+    }
+    async function newSession() {
+        await runner.stop().catch(() => { });
+        runner.threadId = null;
+        runner.resetModeAnnouncement();
+        runner.setThinkingLevel(opts.initialThinking);
+        // Back to the pending client-choice selection (or the server default).
+        runner.model = runner.selectedModel ?? defaultModelId;
+        editor.model = runner.model;
+        firstUserMessage = null;
+        clearView();
+        addTranscript(new NoticeComponent("New session.", "info"));
+        if (!opts.noLogo) {
+            const logo = new LogoComponent({ animate: false });
+            addTranscript(logo);
+            addSpacer();
+        }
+        tui.requestRender();
+    }
+    /**
+     * Session picker. `cwd` (default) shows only sessions this machine recorded
+     * for the current workspace; `all` shows every session on the integration
+     * with its source folder annotated. The remote API has no cwd concept — the
+     * local session index is the only folder association, so this filtering is
+     * client-side by design.
+     */
+    async function showSessions(scope = "cwd") {
+        let sessions = [];
+        try {
+            sessions = await opts.client.listSessions();
+        }
+        catch (err) {
+            addTranscript(new NoticeComponent(`Failed to list sessions: ${err instanceof Error ? err.message : String(err)}`, "error"));
+            return;
+        }
+        if (sessions.length === 0) {
+            addTranscript(new NoticeComponent("No remote sessions yet.", "info"));
+            return;
+        }
+        const current = runner.threadId;
+        const known = sessionIndex.knownThreadIds(opts.workspace);
+        const visible = scope === "cwd"
+            ? sessions.filter((s) => known.has(s.thread_id) || s.thread_id === current)
+            : sessions;
+        if (visible.length === 0) {
+            addTranscript(new NoticeComponent(`No sessions for this folder yet. ${sessions.length} session(s) belong to other folders — use /session all.`, "info"));
+            return;
+        }
+        const hiddenCount = sessions.length - visible.length;
+        const shown = visible.slice(0, 50);
+        const items = shown.map((s) => {
+            const folder = scope === "all" ? sessionIndex.findCwd(s.thread_id) : undefined;
+            const folderTag = folder && resolve(folder) !== resolve(opts.workspace)
+                ? `[${basename(folder)}] `
+                : "";
+            return {
+                value: s.thread_id,
+                label: `${s.thread_id === current ? "● " : "  "}${folderTag}${s.title || s.thread_id}`,
+                description: `${s.status} · ${s.message_count} msgs · ${new Date(s.updated_at).toLocaleString()}${s.thread_id === current ? " · current" : ""}`,
+            };
+        });
+        if (scope === "cwd" && hiddenCount > 0) {
+            items.push({
+                value: "__all__",
+                label: `  Show all folders…`,
+                description: `${hiddenCount} more session(s) from other folders`,
+            });
+        }
+        const currentIndex = scope === "cwd" ? shown.findIndex((s) => s.thread_id === current) : -1;
+        showSelectOverlay(scope === "cwd" ? "Switch session (this folder)" : "Switch session (all folders)", items, (value) => {
+            if (value === "__all__") {
+                void showSessions("all");
+                return;
+            }
+            if (value === runner.threadId) {
+                addTranscript(new NoticeComponent("Already on this session.", "info"));
+                tui.requestRender();
+                return;
+            }
+            const folder = sessionIndex.findCwd(value);
+            if (folder && resolve(folder) !== resolve(opts.workspace)) {
+                addTranscript(new NoticeComponent(`Note: this session was created in ${folder}; tools will still run in the current workspace (${opts.workspace}).`, "warn"));
+            }
+            void resumeSession(value);
+        }, { selectedIndex: currentIndex });
+    }
+    async function resumeSession(threadId) {
+        await runner.stop().catch(() => { });
+        clearView();
+        runner.threadId = threadId;
+        runner.resetModeAnnouncement();
+        const restored = sessionIndex.get(opts.workspace, threadId)?.todos;
+        if (restored)
+            todos.replace(restored);
+        if (!(await loadSessionView(threadId))) {
+            addTranscript(new NoticeComponent(`Failed to resume ${threadId}.`, "error"));
+        }
+        tui.requestRender();
+    }
+    /** Mode picker — the bottom-edge chip lands here (Tab still cycles). */
+    function showModePicker() {
+        const modes = Object.keys(MODES);
+        showSelectOverlay("Mode", modes.map((mode) => ({
+            value: mode,
+            label: MODES[mode].label,
+            description: `${MODES[mode].description}${mode === runner.mode ? " · current" : ""}`,
+        })), (value) => setMode(value), { selectedIndex: modes.indexOf(runner.mode) });
+    }
+    function showThinkingPicker() {
+        const levels = [...new Set(["default", "off", ...thinkingLevels.filter((l) => l !== "off")])];
+        showSelectOverlay("Thinking level (this request)", levels.map((level) => ({
+            value: level,
+            label: level === "default" ? "Default (provider decides)" : level,
+            description: level === (runner.thinkingLevel ?? "default") ? "current" : "",
+        })), (value) => {
+            runner.setThinkingLevel(value === "default" ? undefined : value);
+            editor.thinking = value === "default" ? undefined : value;
+            addTranscript(new NoticeComponent(`Thinking level: ${value}`, "info"));
+            tui.requestRender();
+        }, { maxVisible: 10 });
+    }
+    /**
+     * Client-choice model picker. The list always comes fresh from
+     * GET /v1/models (the integration's policy may have changed since startup);
+     * a forced-model integration returns a single entry.
+     *
+     * The picked model applies to the next new session: the server pins a
+     * thread's model on its first run, so a running thread cannot switch under
+     * itself.
+     */
+    async function showModelPicker() {
+        let models = [];
+        try {
+            models = await opts.client.listModels();
+        }
+        catch (err) {
+            addTranscript(new NoticeComponent(`Failed to list models: ${err instanceof Error ? err.message : String(err)}`, "error"));
+            tui.requestRender();
+            return;
+        }
+        if (models.length === 0) {
+            addTranscript(new NoticeComponent("No models are configured on this integration.", "warn"));
+            tui.requestRender();
+            return;
+        }
+        const current = currentModelId(models, runner.model, runner.selectedModel);
+        showSelectOverlay("Model (applies to a new session)", buildModelItems(models, current), (value) => {
+            runner.setModel(value);
+            if (runner.threadId) {
+                addTranscript(new NoticeComponent(`Model for new sessions: ${value}. This thread keeps ${runner.model ?? "its pinned model"} — run /new to switch.`, "info"));
+            }
+            else {
+                runner.model = value;
+                editor.model = value;
+                addTranscript(new NoticeComponent(`Model: ${value}`, "info"));
+            }
+            tui.requestRender();
+        }, {
+            selectedIndex: models.findIndex((m) => m.id === current),
+        });
+    }
+    function showInfo(title, body, options = {}) {
+        const contentWidth = body.reduce((widest, line) => Math.max(widest, visibleWidth(line)), visibleWidth(title));
+        const overlay = new InfoOverlay(title, body, () => handle.hide(), { bg: () => overlayBg });
+        const handle = tui.showOverlay(overlay, {
+            width: Math.min(88, tui.terminal.columns - 4, Math.max(40, contentWidth + 6)),
+            maxHeight: options.maxHeight ?? "70%",
+        });
+    }
+    /** Show a titled select overlay and report the chosen value. */
+    function showSelectOverlay(title, items, onSelect, options = {}) {
+        const rows = selectVisibleRows(tui.terminal.rows, options.maxVisible ?? 12);
+        // Tight label column so the card tracks the content instead of a fixed 32.
+        const column = selectLabelColumn(items);
+        const list = new SelectList(items, rows, selectListTheme, {
+            minPrimaryColumnWidth: column,
+            maxPrimaryColumnWidth: column,
+        });
+        if (options.selectedIndex !== undefined && options.selectedIndex >= 0) {
+            list.setSelectedIndex(options.selectedIndex);
+        }
+        const hasDescriptions = items.some((item) => Boolean(item.description));
+        const width = selectCardWidth(title, list, {
+            termWidth: tui.terminal.columns,
+            minWidth: hasDescriptions ? selectDescriptionMinWidth(column) : undefined,
+        });
+        const overlay = new SelectOverlay(title, list, { bg: () => overlayBg });
+        const handle = tui.showOverlay(overlay, { width, maxHeight: rows + 5 });
+        list.onSelect = (item) => {
+            handle.hide();
+            onSelect(item.value);
+        };
+        list.onCancel = () => handle.hide();
+    }
+    async function exportTranscript() {
+        const path = join(opts.workspace, `myagent-session-${runner.threadId?.slice(0, 8) ?? "new"}.md`);
+        const body = [
+            `# MyAgent session ${runner.threadId ?? "(new)"}`,
+            "",
+            `- workspace: ${opts.workspace}`,
+            `- exported: ${new Date().toISOString()}`,
+            "",
+            "```",
+            logLines.join("\n"),
+            "```",
+            "",
+            runLog,
+        ].join("\n");
+        try {
+            await writeFile(path, body);
+            addTranscript(new NoticeComponent(`Exported to ${path}`, "info"));
+        }
+        catch (err) {
+            addTranscript(new NoticeComponent(`Export failed: ${err instanceof Error ? err.message : String(err)}`, "error"));
+        }
+    }
+    // -------------------------------------------------------------------------
+    // Keybindings
+    // -------------------------------------------------------------------------
+    tui.addInputListener((data) => {
+        if (tui.hasOverlay())
+            return undefined;
+        // A pending approval owns ctrl+y / ctrl+n before anything else (the
+        // editor keeps focus, so plain keys keep typing into the prompt).
+        if (approvalResolve) {
+            if (matchesKey(data, "ctrl+y")) {
+                answerApproval("approved");
+                return { consume: true };
+            }
+            if (matchesKey(data, "ctrl+n")) {
+                answerApproval("denied");
+                return { consume: true };
+            }
+        }
+        // Repaint + swallow the key: every handled binding owns its own render.
+        const handled = () => { tui.requestRender(); return { consume: true }; };
+        if (matchesKey(data, "tab")) {
+            setMode(nextMode(runner.mode));
+            return handled();
+        }
+        if (matchesKey(data, "shift+tab")) {
+            toggleApproval();
+            return handled();
+        }
+        // Ctrl+P ("panel"), not Ctrl+B: Ctrl+B is tmux's default prefix — tmux
+        // users press it constantly, and send-prefix (Ctrl+B Ctrl+B) would toggle
+        // the sidebar on every literal prefix. Ctrl+P is bound nowhere else (not
+        // tmux, not pi-tui's editor — its history bindings are disabled).
+        if (matchesKey(data, "ctrl+p")) {
+            sidebarVisible = !sidebarVisible;
+            return handled();
+        }
+        if (matchesKey(data, "ctrl+e")) {
+            sidebar.toggleChanges();
+            return handled();
+        }
+        if (matchesKey(data, "alt+up")) {
+            sidebarScroll.scrollBy(-1);
+            return handled();
+        }
+        if (matchesKey(data, "alt+down")) {
+            sidebarScroll.scrollBy(1);
+            return handled();
+        }
+        if (matchesKey(data, "alt+pageUp")) {
+            sidebarScroll.scrollBy(-pageHeight());
+            return handled();
+        }
+        if (matchesKey(data, "alt+pageDown")) {
+            sidebarScroll.scrollBy(pageHeight());
+            return handled();
+        }
+        if (matchesKey(data, "ctrl+o")) {
+            for (const component of toolCalls.values())
+                component.toggle();
+            return handled();
+        }
+        if (matchesKey(data, "ctrl+t")) {
+            for (const component of reasoningBlocks)
+                component.toggle();
+            return handled();
+        }
+        if (matchesKey(data, "escape") && runner.busy) {
+            void runner.stop();
+            return { consume: true };
+        }
+        if (matchesKey(data, "ctrl+c")) {
+            if (runner.busy)
+                void runner.stop();
+            else if (quitConfirm.armed) {
+                quitConfirm.disarm();
+                quit();
+            }
+            else {
+                quitConfirm.arm();
+            }
+            return { consume: true };
+        }
+        return undefined;
+    });
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+    let finished = false;
+    let resolveQuit;
+    const done = new Promise((resolve) => { resolveQuit = resolve; });
+    const quit = () => {
+        if (finished)
+            return;
+        finished = true;
+        quitConfirm.disarm();
+        stopSpinner();
+        // The shimmer stops itself only after its last frame — quitting mid-
+        // animation would otherwise keep requesting renders after tui.stop()
+        // handed the terminal back.
+        launchLogo?.stop();
+        process.stdout.off("resize", onResize);
+        if (runner.busy)
+            void runner.stop().catch(() => { });
+        setTimeout(() => {
+            // Exit the alternate screen WITHOUT reprinting the final document into
+            // the normal buffer — quitting must leave the terminal as it was.
+            tui.stop({ preserveScreen: true });
+            resolveQuit(lastError ? 1 : 0);
+        }, 30);
+    };
+    tui.start();
+    tui.setFocus(editor);
+    tui.requestRender();
+    refreshGit();
+    if (opts.initialPrompt)
+        void handleSubmit(opts.initialPrompt);
+    if (isColorEnabled()) {
+        void tui.queryTerminalBackgroundColor({ timeoutMs: 250 }).then((terminalBg) => {
+            panelBg = panelBackgroundRgb(terminalBg);
+            overlayBg = overlayBackgroundRgb(terminalBg);
+            userBg = userMessageBackgroundRgb(terminalBg);
+            tui.requestRender();
+        });
+    }
+    return done;
+}
+// ---------------------------------------------------------------------------
+// Small helpers
+// ---------------------------------------------------------------------------
+/**
+ * Footer usage: `current` minus the pre-run `baseline`, so the status bar
+ * reports the current/last run instead of the session total.
+ */
+export function runUsageDelta(current, baseline) {
+    if (!current)
+        return null;
+    if (!baseline)
+        return current;
+    const delta = (value, base) => Math.max(0, value - base);
+    const cost = current.cost && baseline.cost
+        ? {
+            input: delta(current.cost.input, baseline.cost.input),
+            output: delta(current.cost.output, baseline.cost.output),
+            cacheRead: delta(current.cost.cacheRead ?? 0, baseline.cost.cacheRead ?? 0),
+            cacheWrite: delta(current.cost.cacheWrite ?? 0, baseline.cost.cacheWrite ?? 0),
+            total: delta(current.cost.total, baseline.cost.total),
+        }
+        : current.cost;
+    return {
+        input: delta(current.input, baseline.input),
+        output: delta(current.output, baseline.output),
+        cacheRead: delta(current.cacheRead, baseline.cacheRead),
+        cacheWrite: delta(current.cacheWrite, baseline.cacheWrite),
+        totalTokens: delta(current.totalTokens, baseline.totalTokens),
+        turns: delta(current.turns, baseline.turns),
+        contextTokens: current.contextTokens,
+        contextWindow: current.contextWindow,
+        ...(cost ? { cost } : {}),
+    };
+}
+function emptySidebar() {
+    return {
+        title: null,
+        usage: null,
+        git: { ...EMPTY_GIT_STATUS, files: [] },
+    };
+}
+function emptyFooter(opts) {
+    return {
+        approval: opts.initialApproval,
+        workspace: opts.workspace,
+        branch: null,
+        usage: null,
+        runState: "idle",
+        spinnerFrame: 0,
+    };
+}