mu-harness 0.16.13 → 0.16.15

package/esm/harness/npm/src/tui/chat/ChatApp.js

@@ -0,0 +1,1306 @@
+import { spawn } from 'node:child_process';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { dirname, isAbsolute, relative, resolve } from 'node:path';
+import { box, column, flex, measure, ProcessTerminal, scrollView, truncateToWidth, TUI, visibleWidth, } from 'mu-tui';
+import { buildCommands, filterCommands } from './commands.js';
+import { MultilineEditor } from './editor.js';
+import { activeMention, collectCandidates, rank } from './picker.js';
+import { formatTokens, statusComponent, statusFromEvent } from './status.js';
+import { asHexColor, styleToAnsi, ThemeProvider, themesByName } from './theme.js';
+import { entryComponent, formatToolArgs, stickyHeader, Transcript, transcriptComponent, } from './transcript.js';
+const RESET = '\x1b[0m';
+const PROMPT_WIDTH = 2;
+const encodeBinary = (_key, value) => value instanceof Uint8Array ? { __binary: 'base64', data: Buffer.from(value).toString('base64') } : value;
+const textOf = (message) => message.content.map((part) => (part.type === 'text' ? part.text : '')).join('');
+const SPINNER_INTERVAL_MS = 100;
+const MAX_LIST_ROWS = 8;
+const SPLASH_INPUT_WIDTH = 72;
+const APPROVAL_OPTIONS = [
+    { label: 'Approve once', value: 'approve' },
+    { label: 'Approve for this session', value: 'approve_always' },
+    { label: 'Deny', value: 'deny' },
+];
+const DIM = '\x1b[2m';
+const lastAssistantText = (messages) => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const message = messages[i];
+        if (message.role === 'assistant') {
+            return message.content.map((part) => (part.type === 'text' ? part.text : '')).join('');
+        }
+    }
+    return '';
+};
+const padTo = (value, width) => {
+    if (width <= 0)
+        return '';
+    const fitted = visibleWidth(value) > width ? truncateToWidth(value, width) : value;
+    return fitted + ' '.repeat(Math.max(0, width - visibleWidth(fitted)));
+};
+const listView = (rows, selected, theme) => ({
+    render: (s) => {
+        if (s.width <= 0)
+            return;
+        const normal = styleToAnsi(theme.styles.commandPaletteItem);
+        const sel = styleToAnsi(theme.styles.commandPaletteSelected);
+        const maxLeft = rows.reduce((max, r) => Math.max(max, r.left.length), 0);
+        for (let i = 0; i < rows.length && i < s.height; i++) {
+            const isSel = i === selected;
+            const prefix = isSel ? '› ' : '  ';
+            const leftPart = `${prefix}${rows[i].left}${' '.repeat(Math.max(0, maxLeft - rows[i].left.length))}`;
+            if (visibleWidth(leftPart) >= s.width) {
+                s.text(0, i, `${isSel ? sel : normal}${padTo(leftPart, s.width)}${RESET}`);
+                continue;
+            }
+            const rightAvail = s.width - visibleWidth(leftPart);
+            const rightText = rows[i].right ? `  ${rows[i].right}` : '';
+            const right = padTo(rightText, rightAvail);
+            if (isSel) {
+                s.text(0, i, `${sel}${leftPart}${right}${RESET}`);
+            }
+            else {
+                s.text(0, i, `${normal}${leftPart}${DIM}${right}${RESET}`);
+            }
+        }
+    },
+});
+export class ChatApp {
+    host;
+    tui;
+    terminal;
+    editor;
+    scroll;
+    transcript = new Transcript();
+    subScroll;
+    subTranscript = new Transcript();
+    themeProvider;
+    commands;
+    session;
+    features;
+    banner;
+    unsubscribe;
+    unsubscribeTheme;
+    unsubscribeSubAgents;
+    runUnsubs = new Set();
+    activeRuns = new Set();
+    mentionAc;
+    status = { label: 'ready', busy: false, spinnerTick: 0, context: '', model: '' };
+    running = false;
+    queue = [];
+    pendingShell = [];
+    models = [];
+    paletteCursor = 0;
+    paletteDismissedFor = '__none__';
+    pickerMention;
+    pickerRanked = [];
+    pickerCursor = 0;
+    history;
+    historyIndex;
+    historyDraft = '';
+    spinnerTimer;
+    lastEsc = 0;
+    modelPickerOpen = false;
+    modelHandle;
+    sessionPickerOpen = false;
+    sessionHandle;
+    approvalQueue = [];
+    approvalCursor = 0;
+    unsubscribeApproval;
+    errorText;
+    errorTimer;
+    stopped = false;
+    constructor(host) {
+        this.host = host;
+        this.session = host.session;
+        this.features = host.features ?? {};
+        this.banner = host.banner;
+        this.transcript.thinkingVisible = host.initialThinking;
+        this.history = host.history?.load() ?? [];
+        this.historyIndex = this.history.length;
+        this.themeProvider = new ThemeProvider(themesByName[host.initialTheme] ?? themesByName.dark);
+        this.terminal = new ProcessTerminal({
+            alternateScreen: true,
+            bracketedPaste: true,
+            focusEvents: true,
+            keyboard: true,
+            mouse: { drag: true, motion: true },
+        });
+        this.tui = new TUI(this.terminal);
+        this.editor = new MultilineEditor({
+            placeholder: 'type a message…',
+            onSubmit: (value) => this.submit(value),
+            onChange: (value) => this.onInputChange(value),
+        });
+        this.scroll = scrollView({ render: (s) => transcriptComponent(this.transcript, this.theme()).render(s) }, { stickyHeader: (info) => this.stickyHeaderView(info), footer: () => this.jumpToBottomHint() });
+        this.subScroll = scrollView({ render: (s) => transcriptComponent(this.subTranscript, this.theme()).render(s) });
+        this.commands = buildCommands(this.commandHost()).filter((c) => {
+            if ((c.name === 'sessions' || c.name === 'new') && !this.feature('sessionPicker'))
+                return false;
+            if (c.name === 'model' && !this.feature('modelPicker'))
+                return false;
+            return true;
+        });
+        this.tui.setRoot({ render: (s) => this.root().render(s) });
+        this.tui.setBackgroundColor(this.theme().colors.background);
+        this.tui.setFocus(this.editor);
+        this.tui.addInputInterceptor((event) => this.intercept(event));
+        this.tui.addGlobalKeybinding({ chord: { key: 'c', ctrl: true }, handler: () => this.onCtrlC() });
+        this.tui.addGlobalKeybinding({ chord: { key: 't', ctrl: true }, handler: () => this.toggleTheme() });
+        this.tui.addGlobalKeybinding({ chord: { key: 'o', ctrl: true }, handler: () => this.toggleExpand() });
+        this.tui.addGlobalKeybinding({ chord: { key: 'end', ctrl: true }, handler: () => this.jumpToBottom() });
+        this.unsubscribeTheme = this.themeProvider.subscribe(() => {
+            this.tui.setBackgroundColor(this.theme().colors.background);
+            this.tui.requestRender(true);
+        });
+        this.bindSession();
+        if (this.feature('subAgents')) {
+            this.unsubscribeSubAgents = this.host.subAgents.subscribe((run) => this.onSubAgentRun(run));
+        }
+        if (this.feature('approvals')) {
+            this.unsubscribeApproval = this.host.approvals.subscribe((req) => {
+                this.approvalQueue.push(req);
+                this.tui.requestRender();
+            });
+        }
+        this.updateSpeaker();
+        this.transcript.seed(this.session?.messages ?? []);
+    }
+    async start() {
+        this.tui.start();
+        await this.loadModels();
+    }
+    async stop() {
+        if (this.stopped)
+            return;
+        this.stopped = true;
+        this.unsubscribe?.();
+        this.unsubscribeTheme?.();
+        this.unsubscribeSubAgents?.();
+        this.unsubscribeApproval?.();
+        this.clearRuns();
+        this.stopSpinner();
+        this.clearError();
+        this.session?.abort();
+        this.tui.stop();
+    }
+    theme() {
+        return this.themeProvider.current();
+    }
+    commandHost() {
+        return {
+            newSession: () => this.newSession(),
+            openModelPicker: () => this.openModelPicker(),
+            toggleExpand: () => this.toggleExpand(),
+            toggleThinking: () => this.toggleThinking(),
+            exportContext: (args) => void this.exportContext(args),
+            listSessions: () => void this.openSessionPicker(),
+            quit: () => void this.stop().then(() => this.host.onExit(0)),
+        };
+    }
+    async openSessionPicker() {
+        if (this.running) {
+            this.showError('Cannot switch sessions while a response is running.');
+            return;
+        }
+        const sessions = await this.host.listSessions();
+        if (sessions.length === 0) {
+            this.transcript.note('No sessions yet.');
+            this.tui.requestRender();
+            return;
+        }
+        const content = this.buildSessionPicker(sessions, (id) => {
+            this.sessionHandle?.close();
+            if (id !== this.session?.id)
+                void this.host.openSession(id).then((next) => this.swapSession(next));
+        });
+        this.sessionPickerOpen = true;
+        this.sessionHandle = this.tui.showModal(content, {
+            width: 72,
+            border: false,
+            background: this.theme().colors.surface,
+            onClose: () => {
+                this.sessionPickerOpen = false;
+                this.tui.setFocus(this.editor);
+            },
+        });
+    }
+    buildSessionPicker(sessions, onPick) {
+        const currentId = this.session?.id;
+        let cursor = Math.max(0, sessions.findIndex((s) => s.id === currentId));
+        return {
+            handleInput: (event) => {
+                if (event.type !== 'key' || event.kind === 'release' || sessions.length === 0)
+                    return;
+                if (event.key === 'up')
+                    cursor = (cursor - 1 + sessions.length) % sessions.length;
+                else if (event.key === 'down')
+                    cursor = (cursor + 1) % sessions.length;
+                else if (event.key === 'enter')
+                    onPick(sessions[cursor].id);
+            },
+            render: (s) => {
+                if (s.width <= 0)
+                    return;
+                const theme = this.theme();
+                const itemSgr = styleToAnsi(theme.styles.commandPaletteItem);
+                const selSgr = styleToAnsi(theme.styles.commandPaletteSelected);
+                const muted = styleToAnsi(theme.styles.muted);
+                const ITEM_INDENT = 2;
+                const textX = ITEM_INDENT;
+                const innerW = Math.max(1, s.width);
+                s.text(textX, 1, `${styleToAnsi(theme.styles.title)}Sessions${RESET}`);
+                const maxRows = Math.min(sessions.length, 10, Math.max(1, s.height - 6));
+                const top = cursor >= maxRows ? cursor - maxRows + 1 : 0;
+                for (let r = 0; r < maxRows; r++) {
+                    const session = sessions[top + r];
+                    if (!session)
+                        break;
+                    const isSel = top + r === cursor;
+                    const marker = session.id === currentId ? '● ' : '  ';
+                    const label = session.title || session.id;
+                    const body = `${marker}${label}`;
+                    s.text(0, 3 + r, `${isSel ? selSgr : itemSgr}${padTo(body, innerW)}${RESET}`);
+                }
+                const footerRow = 3 + maxRows + 1;
+                s.text(textX, footerRow, `${muted}↑/↓ move · Enter open · Esc close${RESET}`);
+                s.text(0, footerRow + 1, '');
+            },
+        };
+    }
+    bindSession() {
+        this.unsubscribe = this.session?.subscribe((event) => this.handleEvent(event));
+    }
+    feature(name) {
+        return this.features[name] !== false;
+    }
+    /** Returns the active session, creating it lazily on first use. */
+    ensureSession() {
+        if (!this.session) {
+            this.session = this.host.createSession();
+            this.bindSession();
+        }
+        return this.session;
+    }
+    clearRuns() {
+        this.mentionAc?.abort();
+        this.mentionAc = undefined;
+        for (const unsub of this.runUnsubs)
+            unsub();
+        this.runUnsubs.clear();
+        this.abortRuns();
+    }
+    abortRuns() {
+        for (const run of this.activeRuns) {
+            run.cancelled = true;
+            run.handle.cancel();
+            run.session.abort();
+        }
+        this.activeRuns.clear();
+    }
+    onSubAgentRun(run) {
+        if (run.parentId !== this.session?.id)
+            return;
+        const handle = this.transcript.appendSubAgent(run.agent, run.session.messages);
+        const record = { session: run.session, handle, cancelled: false };
+        this.activeRuns.add(record);
+        const toolNames = new Map();
+        const unsub = run.session.subscribe((event) => {
+            switch (event.type) {
+                case 'tool_call': {
+                    toolNames.set(event.id, event.name);
+                    const args = formatToolArgs(event.name, event.input);
+                    handle.addTool(args ? `${event.name} ${args}` : event.name);
+                    break;
+                }
+                case 'turn_end':
+                    if (!record.cancelled)
+                        handle.finish(lastAssistantText(run.session.messages));
+                    this.activeRuns.delete(record);
+                    unsub();
+                    this.runUnsubs.delete(unsub);
+                    break;
+                case 'error':
+                    if (!record.cancelled)
+                        handle.fail(event.error instanceof Error ? event.error.message : String(event.error));
+                    this.activeRuns.delete(record);
+                    unsub();
+                    this.runUnsubs.delete(unsub);
+                    break;
+            }
+            this.tui.requestRender();
+        });
+        this.runUnsubs.add(unsub);
+        this.tui.requestRender();
+    }
+    tryDispatch(text) {
+        const match = /^@([^\s]+)\s+([\s\S]+)$/.exec(text);
+        if (!match)
+            return false;
+        const [, agent, task] = match;
+        if (!this.host.agentNames().includes(agent))
+            return false;
+        if (this.running) {
+            this.queue.push(text);
+            this.tui.requestRender();
+            return true;
+        }
+        this.dispatchMention(agent, task, text);
+        return true;
+    }
+    dispatchMention(agent, task, displayText) {
+        const session = this.ensureSession();
+        this.transcript.appendUser(displayText);
+        const ac = new AbortController();
+        this.mentionAc = ac;
+        this.running = true;
+        this.status.busy = true;
+        this.setStatus('thinking…');
+        this.startSpinner();
+        this.tui.requestRender();
+        this.host.dispatchSubAgent(agent, task, session.id)
+            .then((result) => {
+            if (ac.signal.aborted)
+                return;
+            this.mentionAc = undefined;
+            const content = `The "${agent}" sub-agent was asked:\n${task}\n\nIts result:\n${result.text}\n\nUse this to respond to the user.`;
+            return session.send(content);
+        })
+            .catch((err) => {
+            if (ac.signal.aborted)
+                return;
+            this.running = false;
+            this.status.busy = false;
+            this.stopSpinner();
+            this.showError(err instanceof Error ? err.message : String(err));
+        });
+    }
+    swapSession(next) {
+        this.unsubscribe?.();
+        this.clearRuns();
+        this.session = next;
+        this.bindSession();
+        this.updateSpeaker();
+        this.transcript.seed(next.messages);
+        this.queue.length = 0;
+        this.pendingShell.length = 0;
+        this.running = false;
+        this.status.busy = false;
+        this.status.context = '';
+        this.stopSpinner();
+        this.setStatus('ready');
+        this.tui.requestRender(true);
+    }
+    handleEvent(event) {
+        this.updateSpeaker();
+        this.transcript.applyEvent(event);
+        const label = statusFromEvent(event);
+        if (label !== undefined)
+            this.status.label = label;
+        switch (event.type) {
+            case 'turn_start':
+                this.running = true;
+                this.startSpinner();
+                break;
+            case 'turn_end':
+                this.onTurnComplete();
+                break;
+            case 'usage':
+                this.applyUsage(event.usage);
+                break;
+            case 'error': {
+                const message = event.error instanceof Error ? event.error.message : String(event.error);
+                this.showError(message);
+                this.onTurnComplete();
+                break;
+            }
+        }
+        this.tui.requestRender();
+    }
+    applyUsage(usage) {
+        const used = usage.total ?? ((usage.input ?? 0) + (usage.output ?? 0) || undefined);
+        const total = usage.contextWindow;
+        if (used !== undefined && total) {
+            this.status.context = `${formatTokens(used)}/${formatTokens(total)} (${Math.round((used / total) * 100)}%)`;
+        }
+        else if (used !== undefined) {
+            this.status.context = `${formatTokens(used)} tokens`;
+        }
+        else if (total) {
+            this.status.context = `${formatTokens(total)} ctx`;
+        }
+    }
+    onTurnComplete() {
+        this.running = false;
+        if (this.queue.length > 0) {
+            const next = this.queue.shift();
+            if (!this.tryDispatch(next))
+                this.send(next);
+            return;
+        }
+        this.status.busy = false;
+        this.stopSpinner();
+        this.setStatus('ready');
+    }
+    stripFileMentions(text) {
+        const agents = new Set(this.host.agentNames());
+        return text.replace(/(^|\s)@(\S+)/g, (match, pre, token) => (agents.has(token) ? match : `${pre}${token}`));
+    }
+    send(value) {
+        const session = this.ensureSession();
+        this.transcript.appendUser(value);
+        const content = this.flushShellContext(this.stripFileMentions(value));
+        this.running = true;
+        this.status.busy = true;
+        this.setStatus('thinking…');
+        this.startSpinner();
+        this.tui.requestRender();
+        session.send(content).catch((err) => {
+            this.running = false;
+            this.status.busy = false;
+            this.stopSpinner();
+            this.showError(err instanceof Error ? err.message : String(err));
+        });
+    }
+    flushShellContext(userText) {
+        if (this.pendingShell.length === 0)
+            return userText;
+        const blocks = this.pendingShell
+            .map((entry) => `$ ${entry.cmd}\n${entry.output}`)
+            .join('\n\n');
+        this.pendingShell.length = 0;
+        return `<shell-output>\nShell commands the user ran locally since the last message:\n\n${blocks}\n</shell-output>\n\n${userText}`;
+    }
+    submit(value) {
+        const trimmed = value.trim();
+        if (!trimmed)
+            return;
+        if (this.modelPickerOpen || this.sessionPickerOpen)
+            return;
+        this.clearError();
+        this.pushHistory(trimmed);
+        this.editor.setValue('');
+        if (trimmed.startsWith('!') || trimmed.startsWith('$')) {
+            this.runShell(trimmed.slice(1).trim());
+            return;
+        }
+        if (trimmed.startsWith('/')) {
+            this.runCommand(trimmed);
+            return;
+        }
+        if (this.tryDispatch(trimmed))
+            return;
+        if (this.running) {
+            this.queue.push(trimmed);
+            this.tui.requestRender();
+            return;
+        }
+        this.send(trimmed);
+    }
+    enqueueFromInput() {
+        const value = this.editor.getValue().trim();
+        if (!value)
+            return;
+        this.pushHistory(value);
+        this.editor.setValue('');
+        this.queue.push(value);
+        this.tui.requestRender();
+    }
+    onInputChange(value) {
+        if (value !== this.paletteDismissedFor)
+            this.paletteDismissedFor = '__none__';
+        const items = this.paletteItems();
+        this.paletteCursor = Math.max(0, Math.min(this.paletteCursor, Math.max(0, items.length - 1)));
+        if (items.length === 0) {
+            const mention = activeMention(value, this.editor.cursorPos);
+            if (mention) {
+                this.pickerMention = mention;
+                this.pickerRanked = rank(mention.query, collectCandidates(this.host.cwd, this.host.agentNames()), MAX_LIST_ROWS);
+                this.pickerCursor = Math.max(0, Math.min(this.pickerCursor, Math.max(0, this.pickerRanked.length - 1)));
+            }
+            else {
+                this.pickerMention = undefined;
+                this.pickerRanked = [];
+            }
+        }
+        else {
+            this.pickerMention = undefined;
+            this.pickerRanked = [];
+        }
+        this.editor.hiddenPrefix = value.startsWith('/') || value.startsWith('!') || value.startsWith('$')
+            ? value[0]
+            : this.pickerVisible() && value.startsWith('@')
+                ? '@'
+                : '';
+        this.tui.requestRender();
+    }
+    intercept(event) {
+        if (this.modelPickerOpen || this.sessionPickerOpen)
+            return false;
+        if (event.type !== 'key' || event.kind === 'release')
+            return false;
+        const key = event.key;
+        if (this.approvalQueue.length > 0) {
+            const count = APPROVAL_OPTIONS.length;
+            if (key === 'left' || (key === 'tab' && event.shift))
+                return this.moveApproval(-1);
+            if (key === 'right' || (key === 'tab' && !event.shift))
+                return this.moveApproval(1);
+            if (key === 'enter')
+                return this.resolveApproval(APPROVAL_OPTIONS[this.approvalCursor % count].value);
+            if (key === 'escape' || key === 'esc')
+                return this.resolveApproval('deny');
+            return true;
+        }
+        if (key === 'escape' || key === 'esc')
+            return this.onEscape();
+        if (key === 'backspace') {
+            if (this.deleteMention())
+                return true;
+            return false;
+        }
+        if (key === 'enter' && event.alt) {
+            if (this.running) {
+                this.enqueueFromInput();
+                return true;
+            }
+            return false;
+        }
+        if (this.paletteItems().length > 0) {
+            if (key === 'up')
+                return this.paletteMove(-1);
+            if (key === 'down')
+                return this.paletteMove(1);
+            if (key === 'tab')
+                return this.paletteComplete();
+            if (key === 'enter')
+                return this.paletteRun();
+            return false;
+        }
+        if (this.pickerVisible()) {
+            if (key === 'up')
+                return this.pickerMove(-1);
+            if (key === 'down')
+                return this.pickerMove(1);
+            if (key === 'tab' || key === 'enter')
+                return this.pickerAccept();
+            return false;
+        }
+        if (key === 'tab')
+            return this.cycleAgent();
+        if (key === 'up')
+            return this.navigateHistory('up');
+        if (key === 'down')
+            return this.navigateHistory('down');
+        return false;
+    }
+    cycleAgent() {
+        this.host.cycleAgent();
+        this.tui.requestRender();
+        return true;
+    }
+    onEscape() {
+        const focused = this.focusedSub();
+        if (focused) {
+            focused.open = false;
+            this.tui.requestRender();
+            return true;
+        }
+        if (this.paletteItems().length > 0) {
+            this.paletteDismissedFor = this.editor.getValue();
+            this.tui.requestRender();
+            return true;
+        }
+        if (this.pickerVisible()) {
+            this.pickerMention = undefined;
+            this.pickerRanked = [];
+            this.tui.requestRender();
+            return true;
+        }
+        const value = this.editor.getValue();
+        if (value.startsWith('!') || value.startsWith('$') || value.startsWith('/')) {
+            this.editor.setValue('');
+            this.tui.requestRender();
+            return true;
+        }
+        if (this.running) {
+            const now = Date.now();
+            if (this.lastEsc > 0 && now - this.lastEsc < 1500) {
+                this.lastEsc = 0;
+                this.cancelGeneration();
+            }
+            else {
+                this.lastEsc = now;
+                this.setStatus('press Esc again to cancel');
+                this.tui.requestRender();
+            }
+            return true;
+        }
+        return false;
+    }
+    cancelGeneration() {
+        this.queue.length = 0;
+        this.mentionAc?.abort();
+        this.mentionAc = undefined;
+        this.abortRuns();
+        this.session?.abort();
+        this.onTurnComplete();
+        this.tui.requestRender();
+    }
+    paletteItems() {
+        return filterCommands(this.commands, this.editor.getValue(), this.paletteDismissedFor).slice(0, MAX_LIST_ROWS);
+    }
+    paletteMove(delta) {
+        const items = this.paletteItems();
+        if (items.length === 0)
+            return true;
+        this.paletteCursor = (this.paletteCursor + delta + items.length) % items.length;
+        this.tui.requestRender();
+        return true;
+    }
+    paletteComplete() {
+        const items = this.paletteItems();
+        const command = items[this.paletteCursor];
+        if (!command)
+            return true;
+        const next = `/${command.name} `;
+        this.editor.setValue(next);
+        this.editor.setCursor(next.length);
+        return true;
+    }
+    paletteRun() {
+        const items = this.paletteItems();
+        const command = items[this.paletteCursor];
+        if (!command)
+            return true;
+        this.editor.setValue('');
+        void command.run('');
+        return true;
+    }
+    runCommand(value) {
+        const body = value.trim().slice(1);
+        const space = body.indexOf(' ');
+        const name = (space === -1 ? body : body.slice(0, space)).toLowerCase();
+        const args = space === -1 ? '' : body.slice(space + 1).trim();
+        const command = this.commands.find((c) => c.name === name);
+        if (!command) {
+            this.transcript.note(`Unknown command: /${name}`, true);
+            this.tui.requestRender();
+            return;
+        }
+        void command.run(args);
+    }
+    pickerVisible() {
+        return this.pickerMention !== undefined && this.pickerRanked.length > 0 && this.paletteItems().length === 0;
+    }
+    pickerMove(delta) {
+        if (this.pickerRanked.length === 0)
+            return true;
+        this.pickerCursor = (this.pickerCursor + delta + this.pickerRanked.length) % this.pickerRanked.length;
+        this.tui.requestRender();
+        return true;
+    }
+    pickerAccept() {
+        const mention = this.pickerMention;
+        const candidate = this.pickerRanked[this.pickerCursor];
+        if (!mention || !candidate)
+            return true;
+        const value = this.editor.getValue();
+        const cursor = this.editor.cursorPos;
+        const insertion = `@${candidate.insert} `;
+        const next = value.slice(0, mention.start) + insertion + value.slice(cursor);
+        this.editor.setValue(next);
+        this.editor.setCursor(mention.start + insertion.length);
+        this.pickerMention = undefined;
+        this.pickerRanked = [];
+        this.tui.requestRender();
+        return true;
+    }
+    deleteMention() {
+        const value = this.editor.getValue();
+        const cursor = this.editor.cursorPos;
+        const re = /@[^\s]+/g;
+        let match;
+        while ((match = re.exec(value)) !== null) {
+            const start = match.index;
+            const end = start + match[0].length;
+            if (cursor > start && cursor <= end) {
+                this.editor.setValue(value.slice(0, start) + value.slice(end));
+                this.editor.setCursor(start);
+                this.tui.requestRender();
+                return true;
+            }
+        }
+        return false;
+    }
+    pushHistory(text) {
+        this.host.history?.append(text);
+        if (this.history[this.history.length - 1] !== text)
+            this.history.push(text);
+        this.historyIndex = this.history.length;
+        this.historyDraft = '';
+    }
+    navigateHistory(direction) {
+        if (this.history.length === 0)
+            return false;
+        if (direction === 'up') {
+            if (this.historyIndex === 0)
+                return true;
+            if (this.historyIndex === this.history.length)
+                this.historyDraft = this.editor.getValue();
+            this.historyIndex -= 1;
+        }
+        else {
+            if (this.historyIndex >= this.history.length)
+                return true;
+            this.historyIndex += 1;
+        }
+        const value = this.historyIndex === this.history.length ? this.historyDraft : this.history[this.historyIndex];
+        this.editor.setValue(value);
+        this.editor.setCursor(value.length);
+        this.tui.requestRender();
+        return true;
+    }
+    newSession() {
+        if (this.running) {
+            this.showError('Cannot start a new session while a response is running.');
+            return;
+        }
+        this.swapSession(this.host.createSession());
+    }
+    async openModelPicker() {
+        if (this.running) {
+            this.showError('Cannot switch models while a response is running.');
+            return;
+        }
+        if (this.models.length === 0)
+            await this.loadModels();
+        if (this.models.length === 0) {
+            this.showError('No models available from the backend.');
+            return;
+        }
+        const ref = this.host.modelRef();
+        const currentId = ref.includes('/') ? ref.slice(ref.indexOf('/') + 1) : ref;
+        const content = this.buildModelPicker(currentId, (id) => {
+            this.modelHandle?.close();
+            void this.switchModel(`local/${id}`);
+        });
+        this.modelPickerOpen = true;
+        this.modelHandle = this.tui.showModal(content, {
+            width: 60,
+            border: false,
+            background: this.theme().colors.surface,
+            onClose: () => {
+                this.modelPickerOpen = false;
+                this.tui.setFocus(this.editor);
+            },
+        });
+    }
+    buildModelPicker(currentId, onPick) {
+        const models = this.models;
+        const maxId = models.reduce((max, m) => Math.max(max, m.id.length), 0);
+        const PADX = 0;
+        let cursor = Math.max(0, models.findIndex((m) => m.id === currentId));
+        return {
+            handleInput: (event) => {
+                if (event.type !== 'key' || event.kind === 'release' || models.length === 0)
+                    return;
+                if (event.key === 'up')
+                    cursor = (cursor - 1 + models.length) % models.length;
+                else if (event.key === 'down')
+                    cursor = (cursor + 1) % models.length;
+                else if (event.key === 'enter')
+                    onPick(models[cursor].id);
+            },
+            render: (s) => {
+                if (s.width <= 0)
+                    return;
+                const theme = this.theme();
+                const itemSgr = styleToAnsi(theme.styles.commandPaletteItem);
+                const selSgr = styleToAnsi(theme.styles.commandPaletteSelected);
+                const muted = styleToAnsi(theme.styles.muted);
+                const ITEM_INDENT = 2;
+                const textX = PADX + ITEM_INDENT;
+                const innerW = Math.max(1, s.width - PADX * 2);
+                s.text(textX, 1, `${styleToAnsi(theme.styles.title)}Model Picker${RESET}`);
+                const maxRows = Math.min(models.length, 10, Math.max(1, s.height - 6));
+                const top = cursor >= maxRows ? cursor - maxRows + 1 : 0;
+                for (let r = 0; r < maxRows; r++) {
+                    const m = models[top + r];
+                    if (!m)
+                        break;
+                    const isSel = top + r === cursor;
+                    const pad = ' '.repeat(Math.max(0, maxId - m.id.length));
+                    const provider = m.ownedBy ? `  ${m.ownedBy}` : '';
+                    const indent = ' '.repeat(ITEM_INDENT);
+                    const body = isSel ? `${indent}${m.id}${pad}${provider}` : `${indent}${m.id}${pad}${DIM}${provider}`;
+                    s.text(PADX, 3 + r, `${isSel ? selSgr : itemSgr}${padTo(body, innerW)}${RESET}`);
+                }
+                const footerRow = 3 + maxRows + 1;
+                s.text(textX, footerRow, `${muted}↑/↓ move · Enter select · Esc close${RESET}`);
+                s.text(0, footerRow + 1, '');
+            },
+        };
+    }
+    moveApproval(delta) {
+        const count = APPROVAL_OPTIONS.length;
+        this.approvalCursor = (this.approvalCursor + delta + count) % count;
+        this.tui.requestRender();
+        return true;
+    }
+    resolveApproval(action) {
+        const req = this.approvalQueue.shift();
+        if (!req)
+            return true;
+        this.approvalCursor = 0;
+        this.host.approvals.resolve(req.id, action);
+        this.tui.requestRender();
+        return true;
+    }
+    approvalView() {
+        const req = this.approvalQueue[0];
+        if (!req)
+            return undefined;
+        const cursor = this.approvalCursor;
+        const args = formatToolArgs(req.name, req.input);
+        return {
+            render: (s) => {
+                if (s.width <= 0)
+                    return;
+                const theme = this.theme();
+                const itemSgr = styleToAnsi(theme.styles.commandPaletteItem);
+                const selSgr = styleToAnsi({ ...theme.styles.commandPaletteSelected, fg: '#000000' });
+                const muted = styleToAnsi(theme.styles.muted);
+                const innerW = Math.max(1, s.width);
+                const queued = this.approvalQueue.length > 1 ? ` (+${this.approvalQueue.length - 1} more)` : '';
+                const title = (req.agent ? `Tool approval · ${req.agent}` : 'Tool approval') + queued;
+                s.text(0, 0, `${styleToAnsi(theme.styles.title)}${title}${RESET}`);
+                const head = args ? `${req.name} ${args}` : req.name;
+                s.text(0, 1, `${muted}${truncateToWidth(head, innerW)}${RESET}`);
+                const choices = APPROVAL_OPTIONS
+                    .map((opt, r) => `${r === cursor ? selSgr : itemSgr} ${opt.label} ${RESET}`)
+                    .join(`${muted}  ${RESET}`);
+                s.text(0, 3, choices);
+                s.text(0, 4, `${muted}←/→ or tab move · Enter select · Esc deny${RESET}`);
+            },
+        };
+    }
+    async switchModel(ref) {
+        this.host.selectModel(ref);
+        const current = this.session;
+        const carry = current ? current.messages.some((m) => m.role !== 'system') : false;
+        let next;
+        try {
+            next = carry && current
+                ? await this.host.forkSession(current.id, current.messages.length - 1)
+                : this.host.createSession();
+        }
+        catch {
+            next = this.host.createSession();
+        }
+        this.swapSession(next);
+        this.transcript.note(`switched model to ${ref}`);
+        this.tui.requestRender();
+    }
+    async exportContext(args) {
+        const all = this.session?.messages ?? [];
+        if (all.length === 0) {
+            this.showError('Nothing to export yet.');
+            return;
+        }
+        const outputPath = args.trim() || '.mu/context.json';
+        const resolved = resolve(this.host.cwd, outputPath);
+        const rel = relative(this.host.cwd, resolved);
+        if (rel.startsWith('..') || isAbsolute(rel)) {
+            this.showError('Export path must stay inside the project directory.');
+            return;
+        }
+        const system = all.filter((message) => message.role === 'system').map(textOf).join('\n\n');
+        const payload = {
+            exportedAt: new Date().toISOString(),
+            session: {
+                id: this.session?.id ?? '',
+                cwd: this.host.cwd,
+                agent: this.host.agentRef(),
+                model: this.host.modelRef(),
+            },
+            request: {
+                system,
+                tools: (this.session?.tools ?? []).map((tool) => ({
+                    name: tool.name,
+                    description: tool.description,
+                    parameters: tool.parameters,
+                    ...(tool.prompt ? { prompt: tool.prompt } : {}),
+                })),
+                messages: all.filter((message) => message.role !== 'system'),
+            },
+        };
+        try {
+            await mkdir(dirname(resolved), { recursive: true });
+            await writeFile(resolved, `${JSON.stringify(payload, encodeBinary, 2)}\n`, 'utf-8');
+            this.transcript.note(`saved full context to ${outputPath}`);
+        }
+        catch (error) {
+            this.showError(`Failed to export: ${error instanceof Error ? error.message : String(error)}`);
+        }
+        this.tui.requestRender();
+    }
+    toggleExpand() {
+        if (this.transcript.toggleExpanded())
+            this.tui.requestRender();
+    }
+    toggleThinking() {
+        this.host.saveThinking(this.transcript.toggleReasoning());
+        this.tui.requestRender();
+    }
+    toggleTheme() {
+        const next = this.theme().name === 'dark' ? themesByName.light : themesByName.dark;
+        this.themeProvider.setTheme(next);
+        this.host.saveTheme(next.name);
+    }
+    onCtrlC() {
+        if (this.editor.getValue().length > 0) {
+            this.editor.setValue('');
+            this.tui.requestRender();
+            return;
+        }
+        void this.stop().then(() => this.host.onExit(130));
+    }
+    recordShell(cmd, output) {
+        const MAX = 10_000;
+        const capped = output.length > MAX ? `${output.slice(0, MAX)}\n…[truncated]` : output;
+        this.pendingShell.push({ cmd, output: capped });
+    }
+    runShell(cmd) {
+        if (!cmd)
+            return;
+        const handle = this.transcript.appendShell(cmd);
+        this.tui.requestRender();
+        let stdout = '';
+        let stderr = '';
+        let proc;
+        try {
+            proc = spawn('bash', ['-c', cmd], { cwd: this.host.cwd, stdio: ['pipe', 'pipe', 'pipe'] });
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            handle.setOutput(message, true);
+            this.recordShell(cmd, message);
+            this.tui.requestRender();
+            return;
+        }
+        proc.stdout?.on('data', (data) => {
+            stdout += data.toString('utf-8');
+        });
+        proc.stderr?.on('data', (data) => {
+            stderr += data.toString('utf-8');
+        });
+        proc.on('close', (code) => {
+            const output = code !== 0 || stderr ? [stdout, stderr].filter(Boolean).join('\n') : stdout;
+            const trimmed = output.trim() || '(no output)';
+            handle.setOutput(trimmed, code !== 0);
+            this.recordShell(cmd, code !== 0 ? `(exit ${code})\n${trimmed}` : trimmed);
+            this.tui.requestRender();
+        });
+        proc.on('error', (err) => {
+            handle.setOutput(err.message, true);
+            this.recordShell(cmd, err.message);
+            this.tui.requestRender();
+        });
+    }
+    setStatus(label) {
+        this.status.label = label;
+    }
+    showError(message) {
+        this.errorText = message;
+        if (this.errorTimer)
+            clearTimeout(this.errorTimer);
+        this.errorTimer = setTimeout(() => {
+            this.errorText = undefined;
+            this.errorTimer = undefined;
+            this.tui.requestRender();
+        }, 6000);
+        this.tui.requestRender();
+    }
+    clearError() {
+        if (this.errorTimer)
+            clearTimeout(this.errorTimer);
+        this.errorTimer = undefined;
+        this.errorText = undefined;
+    }
+    startSpinner() {
+        this.status.busy = true;
+        if (this.spinnerTimer)
+            return;
+        this.spinnerTimer = setInterval(() => {
+            this.status.spinnerTick += 1;
+            this.tui.requestRender();
+        }, SPINNER_INTERVAL_MS);
+    }
+    stopSpinner() {
+        if (this.spinnerTimer) {
+            clearInterval(this.spinnerTimer);
+            this.spinnerTimer = undefined;
+        }
+        this.status.busy = false;
+    }
+    async loadModels() {
+        try {
+            this.models = await this.host.listModels();
+            this.tui.requestRender();
+        }
+        catch {
+            // backend may be unreachable; surfaced on first send
+        }
+    }
+    /** Plain model id (+ provider) shown in the status bar. */
+    modelText() {
+        const ref = this.host.modelRef();
+        const slash = ref.indexOf('/');
+        const id = slash >= 0 ? ref.slice(slash + 1) : ref;
+        const providerName = slash >= 0 ? ref.slice(0, slash) : '';
+        const model = this.models.find((m) => m.id === id);
+        const provider = model?.ownedBy ?? providerName;
+        return provider ? `${id}  ${provider}` : id;
+    }
+    updateSpeaker() {
+        this.transcript.speaker = { name: this.host.agentRef(), color: asHexColor(this.host.agentColor()) };
+    }
+    promptGlyph() {
+        const theme = this.theme();
+        const muted = styleToAnsi(theme.styles.muted);
+        const value = this.editor.getValue();
+        if (value.startsWith('!') || value.startsWith('$'))
+            return `${styleToAnsi(theme.styles.bashPrompt)}$ ${RESET}`;
+        if (value.startsWith('/'))
+            return `${muted}/ ${RESET}`;
+        if (this.pickerVisible())
+            return `${muted}@ ${RESET}`;
+        return `${muted}❯ ${RESET}`;
+    }
+    inputPanel() {
+        const inner = this.approvalView() ?? this.editorInner();
+        return box(inner, { background: this.theme().colors.surface, padding: 1 });
+    }
+    editorInner() {
+        const prompt = this.promptGlyph();
+        const editor = this.editor;
+        const editorRows = editor.rows();
+        return {
+            render: (s) => {
+                if (s.width <= 0 || s.height <= 0)
+                    return;
+                s.text(0, 0, prompt);
+                const rows = Math.min(editorRows, Math.max(1, s.height - 1));
+                s.child(editor, { x: PROMPT_WIDTH, y: 0, width: Math.max(1, s.width - PROMPT_WIDTH), height: rows });
+            },
+        };
+    }
+    errorView() {
+        const message = this.errorText;
+        if (!message)
+            return undefined;
+        const theme = this.theme();
+        const head = styleToAnsi(theme.styles.errorPrefix);
+        const body = styleToAnsi(theme.styles.errorLine);
+        return {
+            render: (s) => {
+                if (s.width <= 0)
+                    return;
+                const text = visibleWidth(message) > s.width - 2 ? truncateToWidth(message, Math.max(1, s.width - 2)) : message;
+                s.text(0, 0, `${head}!${RESET} ${body}${text}${RESET}`);
+                s.text(0, 1, '');
+            },
+        };
+    }
+    waitingView() {
+        if (this.queue.length === 0)
+            return undefined;
+        const theme = this.theme();
+        const muted = styleToAnsi(theme.styles.muted);
+        const body = styleToAnsi(theme.styles.body);
+        const rows = this.queue.slice(0, 6).map((entry) => entry.replace(/\s+/g, ' '));
+        return {
+            render: (s) => {
+                for (let i = 0; i < rows.length; i++) {
+                    const tag = '[follow-up] ';
+                    const text = padTo(rows[i], Math.max(0, s.width - tag.length));
+                    s.text(0, i, `${muted}${tag}${RESET}${body}${text}${RESET}`);
+                }
+            },
+        };
+    }
+    /** The input area: error/palette/picker/waiting affordances + the input panel (no status bar). */
+    inputGroup() {
+        const children = [];
+        const error = this.errorView();
+        if (error)
+            children.push(error);
+        const palette = this.paletteItems();
+        if (palette.length > 0) {
+            const rows = palette.map((c) => ({ left: `/${c.name}`, right: c.description }));
+            children.push(listView(rows, this.paletteCursor, this.theme()));
+        }
+        else if (this.pickerVisible()) {
+            const rows = this.pickerRanked.map((c) => ({ left: c.label, right: c.kind === 'agent' ? 'agent' : '' }));
+            children.push(listView(rows, this.pickerCursor, this.theme()));
+        }
+        const waiting = this.waitingView();
+        if (waiting)
+            children.push(waiting);
+        children.push(this.inputPanel());
+        return children;
+    }
+    statusBar() {
+        this.status.model = this.modelText();
+        return statusComponent(this.status, this.theme());
+    }
+    dock() {
+        return column([...this.inputGroup(), this.statusBar()]);
+    }
+    jumpToBottom() {
+        this.scroll.scrollToBottom();
+        this.tui.requestRender();
+    }
+    jumpToBottomHint() {
+        const theme = this.theme();
+        const label = ' ↓ Jump to bottom (ctrl+End) ';
+        const pill = styleToAnsi({ fg: theme.colors.text, bg: theme.colors.surfaceMuted });
+        let pillStart = 0;
+        let pillEnd = 0;
+        return {
+            handleInput: (event) => {
+                if (event.type !== 'mouse' || event.kind !== 'press' || event.button !== 'left')
+                    return false;
+                if (event.localY !== 0)
+                    return false;
+                if (event.localX === undefined || event.localX < pillStart || event.localX >= pillEnd)
+                    return false;
+                this.jumpToBottom();
+                return true;
+            },
+            render: (s) => {
+                if (s.width <= 0)
+                    return;
+                const text = visibleWidth(label) > s.width ? truncateToWidth(label, s.width) : label;
+                const width = visibleWidth(text);
+                pillStart = Math.max(0, Math.floor((s.width - width) / 2));
+                pillEnd = pillStart + width;
+                s.text(pillStart, 0, `${pill}${text}${RESET}`);
+                s.text(0, 1, '');
+            },
+        };
+    }
+    stickyHeaderView(info) {
+        const gov = this.governingUser(info.scrollY, info.width);
+        if (!gov || info.scrollY < gov.endRow)
+            return undefined;
+        return stickyHeader(gov.text, this.theme());
+    }
+    governingUser(scrollY, width) {
+        if (width <= 0)
+            return undefined;
+        const theme = this.theme();
+        const expanded = this.transcript.expanded;
+        let y = 0;
+        let current;
+        for (const entry of this.transcript.entries) {
+            if (y > scrollY)
+                break;
+            const margin = entry.kind === 'tool_call' ? 0 : 1;
+            const height = measure(entryComponent(entry, theme, expanded), width) + margin;
+            if (entry.kind === 'user')
+                current = { text: entry.text, endRow: y + height };
+            y += height;
+        }
+        return current;
+    }
+    focusedSub() {
+        for (const entry of this.transcript.entries) {
+            if (entry.kind === 'subagent' && entry.open)
+                return entry;
+        }
+        return undefined;
+    }
+    subAgentHeader(entry) {
+        const theme = this.theme();
+        const color = entry.status === 'done'
+            ? theme.colors.success
+            : entry.status === 'error'
+                ? theme.styles.errorPrefix.fg ?? theme.colors.danger
+                : entry.status === 'canceled'
+                    ? theme.colors.textMuted
+                    : theme.colors.accent;
+        const accent = styleToAnsi({ fg: color, bold: true });
+        const muted = styleToAnsi(theme.styles.muted);
+        const line = `${accent}▌ ${entry.agent}${RESET}${muted} sub-agent · ${entry.status}  ·  esc to close${RESET}`;
+        return {
+            render: (s) => {
+                if (s.width <= 0)
+                    return;
+                s.text(0, 0, visibleWidth(line) > s.width ? truncateToWidth(line, s.width) : line);
+                s.text(0, 1, '');
+            },
+        };
+    }
+    subAgentView(entry) {
+        this.subTranscript.seed(entry.messages ?? []);
+        return column([this.subAgentHeader(entry), flex(this.subScroll)]);
+    }
+    /** Wraps a child to a max width, horizontally centered (keeps its natural height). */
+    centered(child, maxW) {
+        return {
+            render: (s) => {
+                const w = Math.max(0, Math.min(maxW, s.width));
+                if (w === 0)
+                    return;
+                const h = s.measure(child, w);
+                const x = Math.max(0, Math.floor((s.width - w) / 2));
+                s.child(child, { x, y: 0, width: w, height: h });
+            },
+        };
+    }
+    /** The ASCII banner rendered at its natural height, centered as a block. */
+    bannerBlock() {
+        const theme = this.theme();
+        const sgr = styleToAnsi({ fg: theme.colors.accent, bold: true });
+        const lines = (this.banner ?? '').split('\n');
+        const blockW = lines.reduce((max, line) => Math.max(max, visibleWidth(line)), 0);
+        return {
+            render: (s) => {
+                if (s.width <= 0)
+                    return;
+                const x = Math.max(0, Math.floor((s.width - blockW) / 2));
+                for (let i = 0; i < lines.length; i++)
+                    s.text(x, i, `${sgr}${lines[i]}${RESET}`);
+                s.text(0, lines.length, '');
+            },
+        };
+    }
+    root() {
+        const focused = this.focusedSub();
+        const showBanner = this.banner !== undefined && this.transcript.entries.length === 0 && !focused;
+        const spacer = { render: () => { } };
+        const inner = focused
+            ? this.subAgentView(focused)
+            : showBanner
+                // Splash: banner + a centered, width-limited minimal input; status pinned at the bottom.
+                ? column([
+                    flex(spacer),
+                    this.bannerBlock(),
+                    this.centered(column(this.inputGroup()), SPLASH_INPUT_WIDTH),
+                    flex(spacer),
+                    this.statusBar(),
+                ])
+                // Conversation: transcript fills, input docked at the bottom.
+                : column([flex(this.scroll), this.dock()]);
+        return {
+            render: (s) => {
+                s.fill({ x: 0, y: 0, width: s.width, height: s.height }, this.theme().colors.background);
+                if (s.width <= 2) {
+                    inner.render(s);
+                    return;
+                }
+                s.child(inner, { x: 1, y: 0, width: s.width - 2, height: s.height });
+            },
+        };
+    }
+}