tokenmaw 0.3.0

package/dist/ui/fullscreen-tui.js

@@ -0,0 +1,1405 @@
+import blessed from 'blessed';
+import { renderTuiMarkdown, toolDiff } from './markdown.js';
+import { resilientFetch } from '../fetch.js';
+import { layoutComposer } from './composer-layout.js';
+import { renderWelcome } from './welcome.js';
+import { copyText } from './clipboard.js';
+import { commandMatches } from './commands.js';
+import { diffPreview, elapsedLabel, STATUS_PRESENTATION, toolPresentation, tuiLayout, visibleTimelineEntries } from './tui-design.js';
+import { recordTimeline } from '../runtime/session-timeline.js';
+const PROVIDERS = [
+    { id: 'openai', label: 'OpenAI', backend: 'openai', baseUrl: 'https://api.openai.com/v1', needsKey: true },
+    { id: 'openrouter', label: 'OpenRouter', backend: 'openai', baseUrl: 'https://openrouter.ai/api/v1', needsKey: true },
+    { id: 'anthropic', label: 'Anthropic', backend: 'anthropic', baseUrl: 'https://api.anthropic.com', needsKey: true },
+    { id: 'opencode-go', label: 'OpenCode Go', backend: 'openai', baseUrl: 'https://opencode.ai/zen/go/v1', needsKey: true },
+    { id: 'ollama', label: 'Ollama · local', backend: 'ollama', baseUrl: 'http://localhost:11434', needsKey: false },
+    { id: 'custom', label: 'Custom · OpenAI compatible', backend: 'openai', baseUrl: '', needsKey: false },
+];
+const COLOR = {
+    // Stick to the ANSI palette so Windows consoles do not quantize custom RGB
+    // values into black. In blessed, `gray` is bright-black (color 8), so it can
+    // disappear on a black background; `white` is the readable 8-color fallback.
+    background: 'black', panel: 'black', elevated: '#20242a', modal: '#171a1f', modalRule: '#2b3139', line: 'gray',
+    text: 'light-white', muted: 'white', subtle: 'gray', accent: 'light-cyan', success: 'light-green',
+    warning: 'light-yellow', error: 'light-red',
+};
+const TONE_COLOR = { muted: COLOR.muted, accent: COLOR.accent, success: COLOR.success, warning: COLOR.warning, error: COLOR.error };
+function oneLine(value, max = 72) {
+    const text = String(value ?? '').replace(/\s+/g, ' ').trim();
+    return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+function safe(value) {
+    return blessed.escape(value);
+}
+function providerName(config) {
+    if (config.backend === 'anthropic')
+        return 'Anthropic';
+    if (config.backend === 'ollama')
+        return 'Ollama';
+    if (config.baseUrl?.includes('openrouter.ai'))
+        return 'OpenRouter';
+    if (config.baseUrl?.includes('opencode.ai/zen'))
+        return 'OpenCode Go';
+    return 'OpenAI compatible';
+}
+async function fetchRemoteModels(baseUrl, apiKey, backend) {
+    try {
+        const trimmed = baseUrl.replace(/\/+$/, '');
+        const url = backend === 'anthropic' ? `${trimmed}/v1/models` : backend === 'ollama' ? `${trimmed}/v1/models` : `${trimmed}/models`;
+        const headers = backend === 'anthropic'
+            ? { 'x-api-key': apiKey ?? '', 'anthropic-version': '2023-06-01' }
+            : apiKey ? { authorization: `Bearer ${apiKey}` } : {};
+        const response = await resilientFetch(url, { headers, retries: 0, timeout: 15000 });
+        const body = await response.json();
+        return { models: [...new Set((body.data ?? []).map((model) => model.id).filter((id) => Boolean(id)))].sort() };
+    }
+    catch (error) {
+        return { models: [], error: error instanceof Error ? error.message : String(error) };
+    }
+}
+export async function runFullscreenTui(runtime, options) {
+    let sessionId = `session-${Date.now()}`;
+    let session = await runtime.openSession(sessionId);
+    const instanceCache = new Map(runtime.listInstances(sessionId).map((instance) => [instance.instanceId, instance]));
+    let activeModel = options.modelName;
+    let activityVisible = false;
+    let composerPinned = true;
+    let selectedActivityIndex = 0;
+    let closed = false;
+    let composerCursor = 0;
+    let historyIndex;
+    let historyDraft = '';
+    let spinnerFrame = 0;
+    let spinnerTimer;
+    let welcomeTimer;
+    let welcomeFrame = 0;
+    const composerChars = [];
+    const inputHistory = [];
+    const pendingTurns = new Set();
+    const streams = new Map();
+    const activityLog = new Map();
+    const thinkingBlocks = new Map();
+    const thinkingBlockLines = new Map();
+    let latestThinkingTurnId;
+    let conversationFollowOutput = true;
+    let conversationScrollOffset = 0;
+    let restoringConversationScroll = false;
+    let conversationDirty = true;
+    let activityDirty = true;
+    let lastLayoutKey = '';
+    let composerRow = 0;
+    let composerColumn = 0;
+    let notice = '';
+    let completionIndex = 0;
+    let completionQuery = '';
+    let dismissedCompletion = '';
+    let nativeSelection = false;
+    let selection;
+    const hasSelection = () => Boolean(selection && (selection.start.x !== selection.end.x || selection.start.y !== selection.end.y));
+    const restoreThinking = () => {
+        const restored = new Map();
+        for (const message of session.messages) {
+            if (message.thinking && message.turnId)
+                restored.set(message.turnId, `${restored.get(message.turnId) ?? ''}${message.thinking}`);
+        }
+        for (const [turnId, thinking] of restored) {
+            if (!thinkingBlocks.has(turnId))
+                thinkingBlocks.set(turnId, { turnId, expanded: false, content: [], status: 'completed', thinking });
+        }
+    };
+    restoreThinking();
+    const screen = blessed.screen({
+        smartCSR: true, fullUnicode: true, title: 'TokenMaw',
+        style: { bg: COLOR.background, fg: COLOR.text },
+    });
+    const screenBuffer = screen;
+    const statusbar = blessed.box({
+        parent: screen, bottom: 0, left: 0, width: '100%', height: 1, tags: true,
+        padding: { left: 1, right: 1 }, style: { bg: COLOR.background, fg: COLOR.muted },
+    });
+    const conversation = blessed.box({
+        parent: screen, top: 0, left: 0, width: '100%', bottom: 3,
+        tags: true, scrollable: true, alwaysScroll: true, keys: true, vi: true, mouse: true, autoFocus: false,
+        scrollbar: {
+            ch: '│',
+            track: { bg: COLOR.panel },
+            style: { fg: COLOR.muted },
+        },
+        padding: { left: 2, right: 2 },
+        style: { bg: COLOR.background, fg: COLOR.text },
+    });
+    const activity = blessed.list({
+        parent: screen, top: 2, right: 0, width: '28%', bottom: 2,
+        tags: true, keys: true, vi: true, mouse: true,
+        scrollable: true, padding: { left: 1, right: 1 },
+        style: {
+            bg: COLOR.background, fg: COLOR.muted,
+            selected: { bg: COLOR.elevated, fg: COLOR.accent, bold: true },
+        },
+    });
+    const composer = blessed.box({
+        parent: screen, bottom: 1, left: 3, width: '100%-4', height: 2,
+        input: true, keys: true, mouse: true, padding: { left: 0, right: 1 },
+        style: { bg: COLOR.background, fg: COLOR.text },
+    });
+    const divider = blessed.box({
+        parent: screen, bottom: 3, left: 1, width: '100%-2', height: 1,
+        style: { fg: COLOR.line, bg: COLOR.background },
+    });
+    const composerPrompt = blessed.box({
+        parent: screen, bottom: 1, left: 1, width: 2, height: 2,
+        content: '›', style: { bg: COLOR.background, fg: COLOR.accent },
+    });
+    const completions = blessed.list({
+        parent: screen, left: 2, bottom: 4, width: '100%-4', height: 5,
+        hidden: true, tags: true, mouse: true, keys: false, autoFocus: false,
+        padding: { left: 1, right: 1 },
+        style: { bg: COLOR.panel, fg: COLOR.muted, selected: { bg: COLOR.elevated, fg: COLOR.accent, bold: true } },
+    });
+    const activityHeader = blessed.box({
+        parent: screen, top: 0, right: 0, width: '28%', height: 2, hidden: true, tags: true,
+        padding: { left: 1, right: 1 }, style: { bg: COLOR.background, fg: COLOR.text },
+    });
+    screen.program.setMouse({ vt200Mouse: true, sgrMouse: true, utfMouse: false, cellMotion: true, allMotion: true }, true);
+    const placeComposerCursor = () => {
+        if (closed || screen.focused !== composer)
+            return;
+        const lpos = composer.lpos;
+        if (!lpos)
+            return;
+        screen.program.cursorPos(lpos.yi + Number(composer.itop) + composerRow, lpos.xi + Number(composer.ileft) + composerColumn);
+    };
+    const composerValue = () => composerChars.join('');
+    const setComposerValue = (value) => {
+        composerChars.splice(0, composerChars.length, ...Array.from(value));
+        composerCursor = composerChars.length;
+        historyIndex = undefined;
+        historyDraft = '';
+    };
+    const renderComposer = () => {
+        const width = Math.max(2, Number(screen.width) - 5);
+        const result = layoutComposer(composerValue(), composerCursor, width, (text) => Number(composer.strWidth(text)));
+        const height = Math.min(Math.max(2, result.rows.length), Math.max(2, Math.min(6, Number(screen.height) - 7)));
+        const start = Math.max(0, result.cursor.row - height + 1);
+        composer.height = height;
+        composerPrompt.height = height;
+        conversation.bottom = height + 2;
+        activity.bottom = height + 2;
+        divider.bottom = height + 1;
+        divider.setContent('─'.repeat(Math.max(0, Number(screen.width) - 2)));
+        composerRow = result.cursor.row - start;
+        composerColumn = result.cursor.column;
+        composer.setContent(result.rows.slice(start, start + height).join('\n'));
+        const query = composerValue();
+        if (query !== completionQuery) {
+            completionIndex = 0;
+            completionQuery = query;
+        }
+        const matches = query === dismissedCompletion ? [] : commandMatches(query);
+        if (!matches.length)
+            completions.hide();
+        else {
+            completions.bottom = height + 2;
+            completions.height = Math.min(matches.length, 6, Math.max(1, Number(screen.height) - height - 3));
+            completionIndex = Math.min(completionIndex, matches.length - 1);
+            completions.setItems(matches.map((item) => `{${COLOR.accent}-fg}${safe(item.name.padEnd(12))}{/${COLOR.accent}-fg} {${COLOR.muted}-fg}${safe(item.description)}{/${COLOR.muted}-fg}`));
+            completions.select(completionIndex);
+            completions.show();
+            completions.setFront();
+        }
+    };
+    const renderComposerFrame = () => {
+        renderComposer();
+        screen.program.hideCursor();
+        screen.render();
+        placeComposerCursor();
+        screen.program.showCursor();
+    };
+    const updateHistory = (direction) => {
+        if (inputHistory.length === 0)
+            return;
+        if (historyIndex === undefined) {
+            if (direction > 0)
+                return;
+            historyDraft = composerValue();
+            historyIndex = inputHistory.length - 1;
+        }
+        else {
+            const next = historyIndex + direction;
+            if (next < 0)
+                return;
+            if (next >= inputHistory.length) {
+                historyIndex = undefined;
+                setComposerValue(historyDraft);
+                renderComposer();
+                renderComposerFrame();
+                return;
+            }
+            historyIndex = next;
+        }
+        const value = inputHistory[historyIndex] ?? '';
+        composerChars.splice(0, composerChars.length, ...Array.from(value));
+        composerCursor = composerChars.length;
+        renderComposer();
+        renderComposerFrame();
+    };
+    const handleComposerKey = (ch, key) => {
+        if (closed)
+            return;
+        const matches = completions.hidden ? [] : commandMatches(composerValue());
+        if (matches.length && (key.name === 'up' || key.name === 'down')) {
+            completionIndex = (completionIndex + (key.name === 'up' ? -1 : 1) + matches.length) % matches.length;
+            renderComposerFrame();
+            return;
+        }
+        if (matches.length && key.name === 'escape') {
+            dismissedCompletion = composerValue();
+            renderComposerFrame();
+            return;
+        }
+        if (matches.length && (key.name === 'tab' || ((!key.meta) && (key.name === 'enter' || key.name === 'return')))) {
+            setComposerValue(matches[completionIndex].name + (key.name === 'tab' ? ' ' : ''));
+            if (key.name === 'tab')
+                renderComposerFrame();
+            else
+                void submit();
+            return;
+        }
+        if ((key.name === 'enter' || key.name === 'return') && !key.meta) {
+            void submit();
+            return;
+        }
+        if ((key.meta && (key.name === 'enter' || key.name === 'return')) || (key.ctrl && key.name === 'j')) {
+            composerChars.splice(composerCursor++, 0, '\n');
+        }
+        else if (key.name === 'left')
+            composerCursor = Math.max(0, composerCursor - 1);
+        else if (key.name === 'right')
+            composerCursor = Math.min(composerChars.length, composerCursor + 1);
+        else if (key.name === 'home' || (key.ctrl && key.name === 'a'))
+            composerCursor = 0;
+        else if (key.name === 'end' || (key.ctrl && key.name === 'e'))
+            composerCursor = composerChars.length;
+        else if (key.name === 'up') {
+            updateHistory(-1);
+            return;
+        }
+        else if (key.name === 'down') {
+            updateHistory(1);
+            return;
+        }
+        else if (key.name === 'backspace') {
+            if (composerCursor > 0)
+                composerChars.splice(composerCursor - 1, 1);
+            composerCursor = Math.max(0, composerCursor - 1);
+        }
+        else if (key.name === 'delete') {
+            composerChars.splice(composerCursor, 1);
+        }
+        else if (key.ctrl && key.name === 'u') {
+            composerChars.splice(0, composerChars.length);
+            composerCursor = 0;
+        }
+        else if (ch && !key.ctrl && !key.meta && !/^[\x00-\x1f\x7f]$/.test(ch)) {
+            composerChars.splice(composerCursor, 0, ...Array.from(ch));
+            composerCursor += Array.from(ch).length;
+        }
+        else {
+            return;
+        }
+        historyIndex = undefined;
+        historyDraft = '';
+        renderComposer();
+        renderComposerFrame();
+    };
+    const startSpinner = () => {
+        if (spinnerTimer || pendingTurns.size === 0)
+            return;
+        spinnerTimer = setInterval(() => {
+            if (pendingTurns.size === 0 || closed) {
+                stopSpinner();
+                return;
+            }
+            if (nativeSelection || hasSelection())
+                return;
+            spinnerFrame = (spinnerFrame + 1) % 20;
+            conversationDirty = true;
+            scheduleRefresh();
+        }, 800);
+        spinnerTimer.unref?.();
+    };
+    const stopSpinner = () => {
+        if (!spinnerTimer)
+            return;
+        clearInterval(spinnerTimer);
+        spinnerTimer = undefined;
+    };
+    const focusComposer = () => {
+        if (closed)
+            return;
+        composerPinned = true;
+        if (screen.focused !== composer)
+            composer.focus();
+        renderComposerFrame();
+    };
+    const choose = (title, items) => new Promise((resolveChoice) => {
+        composerPinned = false;
+        const renderedItems = items.map((item) => typeof item === 'string'
+            ? safe(item)
+            : `{bold}${safe(item.label)}{/bold}${item.detail ? `  {${COLOR.muted}-fg}${safe(item.detail)}{/${COLOR.muted}-fg}` : ''}`);
+        const itemWidths = items.map((item) => typeof item === 'string' ? item.length : Math.max(item.label.length, item.detail?.length ?? 0));
+        const width = Math.min(Math.max(28, Number(screen.width) - 4), 82, Math.max(36, ...itemWidths.map((item) => item + 8)));
+        const height = Math.min(items.length + 4, 22, Math.max(6, Number(screen.height) - 2));
+        const modal = blessed.box({
+            parent: screen, top: 'center', left: 'center', width, height,
+            tags: true, style: { bg: COLOR.modal, fg: COLOR.text },
+        });
+        const heading = blessed.box({
+            parent: modal, top: 0, left: 1, right: 1, height: 1, tags: true,
+            content: `{bold}${safe(title)}{/bold}`, style: { bg: COLOR.modal, fg: COLOR.text },
+        });
+        const rule = blessed.box({
+            parent: modal, top: 1, left: 1, right: 1, height: 1, tags: true,
+            content: `{${COLOR.modalRule}-fg}${'─'.repeat(Math.max(0, width - 2))}{/${COLOR.modalRule}-fg}`,
+            style: { bg: COLOR.modal, fg: COLOR.modalRule },
+        });
+        const list = blessed.list({
+            parent: modal, top: 2, left: 1, right: 1, bottom: 1, items: renderedItems, tags: true, keys: true, vi: true, mouse: true,
+            scrollable: true, style: { bg: COLOR.modal, fg: COLOR.text, selected: { bg: COLOR.modal, fg: COLOR.accent, bold: true } },
+        });
+        let done = false;
+        const finish = (value) => {
+            if (done)
+                return;
+            done = true;
+            modal.destroy();
+            composerPinned = true;
+            focusComposer();
+            resolveChoice(value);
+        };
+        list.on('select', (_item, index) => finish(index));
+        list.key(['escape', 'q'], () => finish(-1));
+        list.focus();
+        void heading;
+        void rule;
+        screen.render();
+    });
+    const ask = (label, initial = '', secret = false) => new Promise((resolveAnswer) => {
+        composerPinned = false;
+        const width = Math.min(76, Math.max(28, Number(screen.width) - 4));
+        const modal = blessed.box({
+            parent: screen, top: 'center', left: 'center', width, height: 7,
+            style: { bg: COLOR.modal, fg: COLOR.text },
+        });
+        blessed.box({
+            parent: modal, top: 0, left: 1, right: 1, height: 1, tags: true,
+            content: `{bold}${safe(label)}{/bold}`, style: { bg: COLOR.modal, fg: COLOR.text },
+        });
+        blessed.box({
+            parent: modal, top: 1, left: 1, right: 1, height: 1,
+            content: '─'.repeat(Math.max(0, width - 2)), style: { bg: COLOR.modal, fg: COLOR.modalRule },
+        });
+        const input = blessed.textbox({
+            parent: modal, top: 3, left: 1, right: 1, height: 1,
+            inputOnFocus: true, keys: true, mouse: true, censor: secret,
+            style: { bg: COLOR.modal, fg: COLOR.text, focus: { bg: COLOR.modal, fg: COLOR.text } },
+        });
+        blessed.box({
+            parent: modal, bottom: 0, left: 1, right: 1, height: 1,
+            content: 'Enter confirm  ·  Esc cancel', style: { bg: COLOR.modal, fg: COLOR.modalRule },
+        });
+        input.setValue(initial);
+        let done = false;
+        const finish = (value) => {
+            if (done)
+                return;
+            done = true;
+            modal.destroy();
+            composerPinned = true;
+            focusComposer();
+            resolveAnswer(value.trim());
+        };
+        input.on('submit', (value) => finish(String(value ?? '')));
+        input.on('cancel', () => finish(''));
+        input.key('escape', () => finish(''));
+        input.focus();
+        input.readInput();
+        screen.render();
+    });
+    const instances = () => [...instanceCache.values()];
+    const depthPrefix = (instance) => {
+        const status = STATUS_PRESENTATION[instance.status];
+        const color = TONE_COLOR[status.tone];
+        return `${'  '.repeat(instance.depth)}{${color}-fg}${status.icon}{/${color}-fg}`;
+    };
+    const renderStatus = () => {
+        const active = instances().filter((item) => item.status === 'running' || item.status === 'waiting' || item.status === 'queued').length;
+        const activityText = active ? `${active} active` : 'Ready';
+        const width = Math.max(1, Number(screen.width) - 2);
+        const left = `maw  ${activeModel}`;
+        const right = Number(screen.width) >= 78 ? `${activityText}  ·  Ctrl+K commands` : activityText;
+        const gap = width - Number(statusbar.strWidth(left)) - Number(statusbar.strWidth(right));
+        statusbar.setContent(gap >= 3
+            ? `{bold}maw{/bold}  {${COLOR.muted}-fg}${safe(activeModel)}{/${COLOR.muted}-fg}${' '.repeat(gap)}{${active ? COLOR.accent : COLOR.muted}-fg}${safe(right)}{/${active ? COLOR.accent : COLOR.muted}-fg}`
+            : `{bold}maw{/bold}${active ? `  {${COLOR.accent}-fg}${active} active{/${COLOR.accent}-fg}` : ''}`);
+    };
+    const conversationAtBottom = () => {
+        const viewportHeight = Math.max(0, Number(conversation.height) - Number(conversation.iheight));
+        const scrollHeight = conversation.getScrollHeight();
+        if (scrollHeight <= viewportHeight)
+            return true;
+        return conversation.childBase >= scrollHeight - viewportHeight - 1;
+    };
+    // Conversation transcript buffer for the frame in flight. lineCursor tracks
+    // the total number of rendered lines (split-aware) pushed so far, giving
+    // O(1) anchors for click-to-expand hit-testing instead of rescanning the
+    // whole buffer per entry.
+    let conversationLines = [];
+    let lineCursor = 0;
+    const pushConversationLine = (line) => {
+        lineCursor += line.split('\n').length;
+        conversationLines.push(line);
+    };
+    const renderConversation = () => {
+        if (!conversationDirty)
+            return;
+        const previousScrollOffset = conversationScrollOffset;
+        const shouldFollowOutput = conversationFollowOutput;
+        conversationLines = [];
+        lineCursor = 0;
+        const screenWidth = typeof screen.width === 'number' ? screen.width : 80;
+        const metrics = tuiLayout(screenWidth, activityVisible);
+        const markdownCols = Math.max(10, Math.min(120, metrics.conversationWidth - metrics.horizontalPadding * 2 - 2));
+        thinkingBlockLines.clear();
+        const welcomeVisible = !session.messages.length && !streams.size && thinkingBlocks.size === 0;
+        if (welcomeVisible) {
+            for (const line of renderWelcome(Number(conversation.width) - Number(conversation.iwidth) - 1, Number(conversation.height) - Number(conversation.iheight), Number(screen.height), welcomeFrame))
+                pushConversationLine(line);
+            if (!welcomeTimer) {
+                welcomeTimer = setInterval(() => {
+                    if (nativeSelection || hasSelection() || screen.focused !== composer)
+                        return;
+                    welcomeFrame = (welcomeFrame + 1) % 80;
+                    scheduleRefresh();
+                }, 50);
+                welcomeTimer.unref?.();
+            }
+        }
+        else if (welcomeTimer) {
+            clearInterval(welcomeTimer);
+            welcomeTimer = undefined;
+        }
+        const renderedBlocks = new Set();
+        if (session.timeline) {
+            const { entries: visibleTimeline, omitted } = visibleTimelineEntries(session.timeline);
+            if (omitted) {
+                pushConversationLine(`{${COLOR.subtle}-fg}  ${omitted} earlier activity entries omitted from this view{/${COLOR.subtle}-fg}`);
+                pushConversationLine('');
+            }
+            for (const entry of visibleTimeline) {
+                if (entry.kind === 'message') {
+                    pushConversationLine('');
+                    if (entry.role === 'user') {
+                        pushConversationLine(`{${COLOR.accent}-fg}{bold}You{/bold}{/${COLOR.accent}-fg}`);
+                        pushConversationLine(safe(entry.content));
+                    }
+                    else if (entry.role === 'system') {
+                        pushConversationLine(`{${COLOR.warning}-fg}! ${safe(entry.content)}{/${COLOR.warning}-fg}`);
+                    }
+                    else {
+                        pushConversationLine(`{${COLOR.muted}-fg}{bold}TokenMaw{/bold}{/${COLOR.muted}-fg}`);
+                        pushConversationLine(renderTuiMarkdown(entry.content, markdownCols));
+                    }
+                    pushConversationLine('');
+                    continue;
+                }
+                const expanded = thinkingBlocks.get(entry.id)?.expanded ?? false;
+                const previous = thinkingBlocks.get(entry.id);
+                const block = { turnId: entry.id, expanded, content: previous?.content ?? [],
+                    status: entry.status === 'running' ? 'active' : 'completed',
+                    thinking: entry.kind === 'thinking' ? entry.content : previous?.thinking,
+                    startedAt: previous?.startedAt ?? (entry.status === 'running' ? Date.now() : undefined),
+                    finishedAt: entry.status === 'running' ? undefined : previous?.finishedAt };
+                thinkingBlocks.set(entry.id, block);
+                if (entry.kind === 'thinking') {
+                    renderThinkingBlock(block);
+                }
+                else {
+                    const headerLine = lineCursor;
+                    thinkingBlockLines.set(entry.id, { headerLine });
+                    latestThinkingTurnId = entry.id;
+                    const agent = entry.instanceId ? instanceCache.get(entry.instanceId)?.agentId : undefined;
+                    const state = entry.status === 'running'
+                        ? STATUS_PRESENTATION.running
+                        : entry.status === 'failed'
+                            ? STATUS_PRESENTATION.failed
+                            : entry.status === 'cancelled'
+                                ? STATUS_PRESENTATION.cancelled
+                                : STATUS_PRESENTATION.idle;
+                    const color = TONE_COLOR[state.tone];
+                    const presentation = toolPresentation(entry.tool ?? '', entry.input);
+                    const owner = agent && agent !== 'main' ? `${agent} · ` : '';
+                    const detail = presentation.detail ? `  ${oneLine(presentation.detail, Math.max(18, markdownCols - presentation.label.length - owner.length - 12))}` : '';
+                    pushConversationLine(`{${color}-fg}${expanded ? '▼' : '▶'} ${state.icon}{/${color}-fg} {${COLOR.muted}-fg}${safe(owner)}${safe(presentation.label)}${safe(detail)}{/${COLOR.muted}-fg}`);
+                    if (expanded) {
+                        if (entry.input) {
+                            pushConversationLine(`  {${COLOR.subtle}-fg}Input{/${COLOR.subtle}-fg}`);
+                            for (const line of safe(entry.input).split('\n'))
+                                pushConversationLine(`  ${line}`);
+                        }
+                        pushConversationLine(`  {${COLOR.subtle}-fg}${entry.status === 'running' ? 'Output · running' : 'Output'}{/${COLOR.subtle}-fg}`);
+                        for (const line of renderTuiMarkdown(entry.content || 'Waiting for output…', Math.max(10, markdownCols - 2)).split('\n'))
+                            pushConversationLine(`  ${line}`);
+                    }
+                    else {
+                        const patch = toolDiff(entry.tool ?? '', entry.content);
+                        if (patch)
+                            pushConversationLine(renderTuiMarkdown(diffPreview(patch), markdownCols));
+                        if (entry.status === 'failed')
+                            pushConversationLine(`  {${COLOR.error}-fg}${safe(oneLine(entry.content, markdownCols - 2))}{/${COLOR.error}-fg}`);
+                    }
+                    pushConversationLine('');
+                }
+            }
+        }
+        for (const message of session.timeline ? [] : session.messages) {
+            const user = message.role === 'user';
+            const content = message.role === 'assistant'
+                ? renderTuiMarkdown(message.content, markdownCols)
+                : safe(message.content);
+            pushConversationLine('');
+            if (user) {
+                pushConversationLine(`{${COLOR.accent}-fg}{bold}You{/bold}{/${COLOR.accent}-fg}`);
+                pushConversationLine(content);
+            }
+            else if (message.role === 'assistant') {
+                pushConversationLine(`{${COLOR.muted}-fg}{bold}TokenMaw{/bold}{/${COLOR.muted}-fg}`);
+                pushConversationLine(content);
+            }
+            else {
+                pushConversationLine(`{${COLOR.warning}-fg}! ${content}{/${COLOR.warning}-fg}`);
+            }
+            pushConversationLine('');
+            if (message.role === 'user' && message.turnId && thinkingBlocks.has(message.turnId)) {
+                renderedBlocks.add(message.turnId);
+                renderThinkingBlock(thinkingBlocks.get(message.turnId));
+            }
+        }
+        if (!session.timeline && pendingTurns.size > 0) {
+            const turnId = [...pendingTurns][0];
+            if (!thinkingBlocks.has(turnId)) {
+                thinkingBlocks.set(turnId, { turnId, expanded: false, content: [], status: 'active', startedAt: Date.now() });
+            }
+            if (!renderedBlocks.has(turnId)) {
+                renderThinkingBlock(thinkingBlocks.get(turnId));
+            }
+        }
+        for (const [turnId, text] of session.timeline ? [] : streams.entries()) {
+            if (!text.trim())
+                continue;
+            pushConversationLine('');
+            pushConversationLine(`{${COLOR.muted}-fg}{bold}TokenMaw{/bold}{/${COLOR.muted}-fg}`);
+            pushConversationLine(renderTuiMarkdown(text, markdownCols));
+            pushConversationLine('');
+        }
+        if (notice) {
+            pushConversationLine('');
+            const noticeColor = /^Error\b|failed/i.test(notice) ? COLOR.error : COLOR.warning;
+            pushConversationLine(`{${noticeColor}-fg}! ${safe(notice)}{/${noticeColor}-fg}`);
+            pushConversationLine('');
+        }
+        restoringConversationScroll = true;
+        try {
+            conversation.setContent(conversationLines.join('\n'));
+            if (welcomeVisible) {
+                conversation.resetScroll();
+            }
+            else if (shouldFollowOutput) {
+                conversation.scroll(conversation.getScrollHeight(), true);
+            }
+            else {
+                conversation.scroll(Math.max(0, previousScrollOffset) - conversation.childBase, true);
+            }
+            conversationScrollOffset = conversation.childBase;
+        }
+        finally {
+            restoringConversationScroll = false;
+        }
+        conversationFollowOutput = shouldFollowOutput;
+        conversationDirty = false;
+    };
+    const renderThinkingBlock = (block) => {
+        const headerLine = lineCursor;
+        const toggle = block.expanded ? '▼' : '▶';
+        const icon = block.status === 'active'
+            ? ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'][spinnerFrame % 10]
+            : toggle;
+        const color = block.status === 'active' ? COLOR.accent : COLOR.muted;
+        const label = block.thinking
+            ? (block.status === 'active' ? 'Thinking' : 'Thought')
+            : (block.status === 'active' ? 'Working' : 'Activity');
+        const duration = elapsedLabel(block.startedAt, block.finishedAt);
+        const durationText = duration ? `  ${duration}` : '';
+        if (block.status === 'active') {
+            const scanLabel = `{${COLOR.accent}-fg}${label}{/${COLOR.accent}-fg}`;
+            pushConversationLine(`{${color}-fg}${toggle} ${icon}{/${color}-fg} ${scanLabel}{${COLOR.subtle}-fg}${durationText}{/${COLOR.subtle}-fg}`);
+        }
+        else {
+            pushConversationLine(`{${color}-fg}${icon} ${label}${durationText}{/${color}-fg}`);
+        }
+        thinkingBlockLines.set(block.turnId, { headerLine });
+        latestThinkingTurnId = block.turnId;
+        if (block.expanded) {
+            if (block.thinking) {
+                for (const line of safe(block.thinking).split('\n'))
+                    pushConversationLine(`  ${line}`);
+                pushConversationLine('');
+            }
+            const content = block.content.length > 0 ? block.content : block.thinking ? [] : ['Waiting for activity…'];
+            for (const c of content) {
+                const rendered = c.includes('```diff\n')
+                    ? renderTuiMarkdown(c, Math.max(10, Number(conversation.width) - 8))
+                    : safe(c);
+                for (const line of rendered.split('\n'))
+                    pushConversationLine(`  ${line}`);
+            }
+        }
+        pushConversationLine('');
+    };
+    const renderActivity = () => {
+        if (!activityDirty)
+            return;
+        const current = instances();
+        const activeCount = current.filter((item) => ['running', 'waiting', 'queued'].includes(item.status)).length;
+        activityHeader.setContent(`{bold}Agents{/bold}{${COLOR.muted}-fg}${activeCount ? `  ${activeCount} active` : ''}{/${COLOR.muted}-fg}\n{${COLOR.subtle}-fg}${'─'.repeat(Math.max(0, Number(activity.width) - 2))}{/${COLOR.subtle}-fg}`);
+        activity.setItems(current.map((instance) => {
+            const state = STATUS_PRESENTATION[instance.status];
+            const summary = instance.lastError || activityLog.get(instance.instanceId)?.at(-1) || instance.lastOutput;
+            return `${depthPrefix(instance)} {bold}${safe(instance.agentId)}{/bold}  {${TONE_COLOR[state.tone]}-fg}${state.label}{/${TONE_COLOR[state.tone]}-fg}\n${'  '.repeat(instance.depth + 1)}{${COLOR.muted}-fg}${safe(oneLine(summary, Math.max(16, Number(activity.width) - instance.depth * 2 - 4)) || 'No recent activity')}{/${COLOR.muted}-fg}`;
+        }));
+        activityDirty = false;
+    };
+    const layout = () => {
+        const metrics = tuiLayout(Number(screen.width), activityVisible);
+        const layoutKey = `${metrics.activity}:${metrics.activityWidth}:${metrics.conversationWidth}:${metrics.horizontalPadding}:${Number(screen.height)}`;
+        if (layoutKey !== lastLayoutKey) {
+            lastLayoutKey = layoutKey;
+            conversationDirty = true;
+            activityDirty = true;
+        }
+        const conversationBox = conversation;
+        conversationBox.padding.left = metrics.horizontalPadding;
+        conversationBox.padding.right = metrics.horizontalPadding;
+        if (metrics.activity !== 'hidden') {
+            activity.show();
+            activityHeader.show();
+            activity.width = metrics.activityWidth;
+            activityHeader.width = metrics.activityWidth;
+            conversation.width = metrics.conversationWidth;
+            if (metrics.activity === 'overlay') {
+                activity.setFront();
+                activityHeader.setFront();
+            }
+        }
+        else {
+            activity.hide();
+            activityHeader.hide();
+            conversation.width = '100%';
+        }
+        composer.width = '100%-4';
+        composerPrompt.left = 1;
+    };
+    // Streaming chunks, spinner ticks, and animation frames can fire many times
+    // per macrotask; coalesce them into at most one full repaint per tick.
+    let refreshScheduled = false;
+    const scheduleRefresh = () => {
+        if (refreshScheduled || closed)
+            return;
+        refreshScheduled = true;
+        setImmediate(() => {
+            refreshScheduled = false;
+            refresh();
+        });
+    };
+    const refresh = () => {
+        if (closed)
+            return;
+        if (hasSelection())
+            return;
+        layout();
+        renderComposer();
+        renderStatus();
+        renderConversation();
+        renderActivity();
+        const composerFocused = composerPinned;
+        if (composerFocused && screen.focused !== composer)
+            composer.focus();
+        if (composerFocused)
+            screen.program.hideCursor();
+        screen.render();
+        if (composerFocused) {
+            placeComposerCursor();
+            screen.program.showCursor();
+        }
+    };
+    const applyModel = async (alias) => {
+        const resolved = options.resolveModel(alias);
+        if (!resolved.config.model)
+            throw new Error('Selected model is not configured.');
+        await options.persistModelSelection?.(alias);
+        runtime.setDefaultModel(alias);
+        await runtime.setSessionDefaultModel(sessionId, alias);
+        activeModel = resolved.name;
+        refresh();
+    };
+    const openModel = async () => {
+        const config = options.configManager.getConfig();
+        const aliases = [...new Set([...(config.model ? [config.model] : []), ...Object.keys(config.models ?? {}), ...(options.modelAliases ?? [])])];
+        if (!aliases.length) {
+            await openProvider();
+            return;
+        }
+        const index = await choose('Model', aliases.map((alias) => {
+            const entry = config.models?.[alias];
+            return {
+                label: `${alias}${alias === activeModel ? '  ✓' : ''}`,
+                detail: entry ? `${providerName(entry)} · ${entry.model}` : 'Session model',
+            };
+        }));
+        if (index >= 0)
+            await applyModel(aliases[index]);
+    };
+    const addProvider = async () => {
+        const providerIndex = await choose('Add provider', PROVIDERS.map((provider) => provider.label));
+        if (providerIndex < 0)
+            return;
+        const provider = PROVIDERS[providerIndex];
+        const baseUrl = await ask('Base URL', provider.baseUrl);
+        if (!baseUrl)
+            return;
+        let apiKey;
+        if (provider.needsKey) {
+            const envName = provider.id === 'openrouter' ? 'OPENROUTER_API_KEY' : provider.id === 'anthropic' ? 'ANTHROPIC_API_KEY' : provider.id === 'opencode-go' ? 'OPENCODE_API_KEY' : 'OPENAI_API_KEY';
+            apiKey = await ask(`API key · blank uses ${envName}`, '', true) || process.env[envName];
+            if (!apiKey)
+                return;
+        }
+        else if (provider.id === 'custom') {
+            apiKey = await ask('API key · optional', '', true) || undefined;
+        }
+        const remoteResult = await fetchRemoteModels(baseUrl, apiKey, provider.backend);
+        const remoteModels = remoteResult.models;
+        if (remoteResult.error)
+            notice = 'Could not load models. Enter a model name manually.';
+        let model;
+        if (remoteModels.length) {
+            const index = await choose('Provider model', [...remoteModels, 'Type manually…']);
+            if (index < 0)
+                return;
+            model = index < remoteModels.length ? remoteModels[index] : await ask('Provider model name');
+        }
+        else {
+            model = await ask('Provider model name');
+        }
+        if (!model)
+            return;
+        const suggested = provider.id === 'openrouter' ? model.split('/').at(-1) : model.split(':')[0];
+        const alias = await ask('Local alias', suggested);
+        if (!alias)
+            return;
+        const contextRaw = await ask('Context window · optional');
+        const contextWindow = Number.parseInt(contextRaw, 10);
+        const current = options.configManager.getConfig();
+        if (current.models?.[alias] && await choose(`Replace ${alias}?`, ['Replace', 'Cancel']) !== 0)
+            return;
+        const next = {
+            ...current,
+            model: current.model || alias,
+            models: {
+                ...(current.models ?? {}),
+                [alias]: {
+                    model, baseUrl, backend: provider.backend,
+                    ...(apiKey ? { apiKey } : {}),
+                    ...(Number.isFinite(contextWindow) && contextWindow > 0 ? { contextWindow } : {}),
+                },
+            },
+        };
+        await options.configManager.saveConfig(next);
+        if (!current.model)
+            await applyModel(alias);
+    };
+    const removeProvider = async () => {
+        const current = options.configManager.getConfig();
+        const entries = Object.entries(current.models ?? {});
+        if (!entries.length)
+            return;
+        const index = await choose('Remove provider', entries.map(([alias, config]) => `${alias}  ·  ${providerName(config)}  ·  ${config.model}`));
+        if (index < 0)
+            return;
+        const alias = entries[index][0];
+        if (await choose(`Remove ${alias}?`, ['Remove', 'Cancel']) !== 0)
+            return;
+        const models = { ...(current.models ?? {}) };
+        delete models[alias];
+        const model = current.model === alias ? Object.keys(models)[0] : current.model;
+        await options.configManager.saveConfig({ ...current, model, models });
+        if (activeModel === alias && model)
+            await applyModel(model);
+    };
+    const openProvider = async () => {
+        const entries = Object.entries(options.configManager.getConfig().models ?? {});
+        const actions = [
+            ...entries.map(([alias, config]) => ({ label: `${alias}  ·  ${providerName(config)}  ·  ${config.model}${alias === activeModel ? '  ✓' : ''}`, action: 'select', alias })),
+            { label: '+  Add provider', action: 'add', alias: '' },
+            ...(entries.length ? [{ label: '−  Remove provider', action: 'remove', alias: '' }] : []),
+        ];
+        const index = await choose('Provider', actions.map((item) => {
+            if (item.action === 'add')
+                return { label: 'Add provider', detail: 'Configure a model endpoint' };
+            if (item.action === 'remove')
+                return { label: 'Remove provider', detail: 'Delete a configured endpoint' };
+            const config = options.configManager.getConfig().models?.[item.alias];
+            return { label: `${item.alias}${item.alias === activeModel ? '  ✓' : ''}`, detail: config ? `${providerName(config)} · ${config.model}` : undefined };
+        }));
+        if (index < 0)
+            return;
+        const selected = actions[index];
+        if (selected.action === 'select')
+            await applyModel(selected.alias);
+        else if (selected.action === 'add')
+            await addProvider();
+        else
+            await removeProvider();
+    };
+    const showAgents = async () => {
+        const specs = runtime.listAgentSpecs();
+        const index = await choose('Agent specs', specs.map((spec) => ({
+            label: spec.id,
+            detail: `${spec.scope} · ${spec.model ?? 'inherit'} · ${oneLine(spec.description, 42)}`,
+        })));
+        if (index < 0)
+            return;
+        const spec = specs[index];
+        await choose(spec.id, [
+            `source  ${spec.source}`,
+            `model   ${spec.model ?? 'inherit'}`,
+            `tools   ${spec.tools.join(', ') || 'none'}`,
+            `agents  ${spec.agents.join(', ') || 'none'}`,
+            'Close',
+        ]);
+    };
+    const switchSession = async (id) => {
+        const next = await runtime.openSession(id);
+        sessionId = id;
+        session = next;
+        instanceCache.clear();
+        for (const instance of runtime.listInstances(id))
+            instanceCache.set(instance.instanceId, instance);
+        activityDirty = true;
+        activeModel = session.defaultModel ?? options.modelName;
+        streams.clear();
+        activityLog.clear();
+        thinkingBlocks.clear();
+        thinkingBlockLines.clear();
+        pendingTurns.clear();
+        notice = '';
+        conversationDirty = true;
+        conversationFollowOutput = true;
+        conversationScrollOffset = 0;
+        restoreThinking();
+        for (const instance of instances()) {
+            if (instance.instanceId === session.mainInstanceId && instance.activeTurnId)
+                pendingTurns.add(instance.activeTurnId);
+        }
+        startSpinner();
+        refresh();
+    };
+    const openSessions = async () => {
+        const sessions = await runtime.listSessions();
+        const index = await choose('Sessions', [
+            ...sessions.map((item) => ({ label: item.sessionId, detail: `${item.messages} messages` })),
+            { label: 'New session', detail: 'Start a blank conversation' },
+        ]);
+        if (index < 0)
+            return;
+        await switchSession(index === sessions.length ? `session-${Date.now()}` : sessions[index].sessionId);
+    };
+    const showActivityDetail = async () => {
+        const instance = instances()[selectedActivityIndex];
+        if (!instance)
+            return;
+        const log = activityLog.get(instance.instanceId) ?? [];
+        await choose(`${instance.agentId} · ${instance.instanceId.slice(0, 8)}`, [
+            `status  ${instance.status}`,
+            `source  ${runtime.registry.get(instance.agentId)?.source ?? ''}`,
+            ...log.slice(-12),
+            ...(instance.lastOutput ? [`output  ${oneLine(instance.lastOutput, 120)}`] : []),
+            ...(instance.lastError ? [`error   ${oneLine(instance.lastError, 120)}`] : []),
+            'Close',
+        ]);
+    };
+    const command = async (raw) => {
+        const [name = '', ...args] = raw.slice(1).trim().split(/\s+/);
+        switch (name.toLowerCase()) {
+            case 'provider':
+                await openProvider();
+                break;
+            case 'model':
+                await openModel();
+                break;
+            case 'agents':
+                await showAgents();
+                break;
+            case 'sessions':
+                await openSessions();
+                break;
+            case 'new':
+                await switchSession(`session-${Date.now()}`);
+                break;
+            case 'clear':
+                await runtime.clearSession(sessionId);
+                session.messages = [];
+                session.timeline = [];
+                instanceCache.clear();
+                for (const instance of runtime.listInstances(sessionId))
+                    instanceCache.set(instance.instanceId, instance);
+                activityDirty = true;
+                streams.clear();
+                thinkingBlocks.clear();
+                thinkingBlockLines.clear();
+                pendingTurns.clear();
+                notice = '';
+                conversationDirty = true;
+                refresh();
+                break;
+            case 'cancel': {
+                if (!args[0]) {
+                    await runtime.cancelSession(sessionId);
+                    notice = 'Stopped. Send a message to continue.';
+                    refresh();
+                    break;
+                }
+                const target = instances().find((item) => item.instanceId === args[0] || item.instanceId.startsWith(args[0] ?? ''));
+                const main = runtime.getInstance(session.mainInstanceId);
+                if (target && main && target.instanceId !== main.instanceId)
+                    await runtime.cancelAgent(main.instanceId, target.instanceId);
+                break;
+            }
+            case 'compact': {
+                try {
+                    notice = await runtime.compactInstance(session.mainInstanceId, { focus: args.length ? args.join(' ') : undefined });
+                }
+                catch (error) {
+                    notice = `Compact failed: ${error instanceof Error ? error.message : String(error)}`;
+                }
+                refresh();
+                break;
+            }
+            case 'help':
+                await commandPalette();
+                break;
+            case 'select':
+                setMouseInteraction(false);
+                break;
+            case 'mouse':
+                setMouseInteraction(nativeSelection);
+                break;
+            case 'exit':
+            case 'quit':
+                close();
+                break;
+            default: await choose('Unknown command', [`/${name} is not available`, 'Close']);
+        }
+    };
+    const commandPalette = async () => {
+        const actions = [
+            { label: 'Provider', detail: 'Manage model endpoints' },
+            { label: 'Model', detail: 'Choose the session model' },
+            { label: 'Agent specs', detail: 'Inspect effective roles and permissions' },
+            { label: 'Sessions', detail: 'Open a saved conversation' },
+            { label: 'New session', detail: 'Start a blank conversation' },
+            { label: 'Clear conversation', detail: 'Remove messages from this session' },
+            { label: 'Compact context', detail: 'Archive older model context' },
+            { label: 'Toggle activity', detail: 'Show or hide the agent tree' },
+            { label: 'Exit', detail: 'Close TokenMaw' },
+        ];
+        const index = await choose('Command palette', actions);
+        if (index === 0)
+            await openProvider();
+        if (index === 1)
+            await openModel();
+        if (index === 2)
+            await showAgents();
+        if (index === 3)
+            await openSessions();
+        if (index === 4)
+            await switchSession(`session-${Date.now()}`);
+        if (index === 5)
+            await command('/clear');
+        if (index === 6)
+            await command('/compact');
+        if (index === 7) {
+            activityVisible = !activityVisible;
+            refresh();
+        }
+        if (index === 8)
+            close();
+    };
+    const submit = async () => {
+        const value = composerValue().trim();
+        if (!value) {
+            focusComposer();
+            return;
+        }
+        if (!inputHistory.includes(value))
+            inputHistory.push(value);
+        setComposerValue('');
+        focusComposer();
+        try {
+            if (value.startsWith('/'))
+                await command(value);
+            else {
+                notice = '';
+                conversationFollowOutput = true;
+                const turnId = await runtime.submitMessage(sessionId, value);
+                const main = runtime.getInstance(session.mainInstanceId);
+                if (main && ['running', 'queued', 'waiting'].includes(main.status))
+                    pendingTurns.add(turnId);
+                if (pendingTurns.has(turnId) && !thinkingBlocks.has(turnId)) {
+                    thinkingBlocks.set(turnId, { turnId, expanded: false, content: [], status: 'active', startedAt: Date.now() });
+                }
+                startSpinner();
+                refresh();
+            }
+        }
+        catch (error) {
+            await choose('Error', [error instanceof Error ? error.message : String(error), 'Close']);
+        }
+        refresh();
+        focusComposer();
+    };
+    const onEvent = (event) => {
+        const eventSession = 'sessionId' in event ? event.sessionId : 'instance' in event ? event.instance.sessionId : 'instanceId' in event && event.instanceId ? instanceCache.get(event.instanceId)?.sessionId ?? runtime.getInstance(event.instanceId)?.sessionId : event.type === 'session_opened' ? event.session.sessionId : undefined;
+        if (eventSession && eventSession !== sessionId)
+            return;
+        if (event.type === 'instance_created' || event.type === 'instance_updated') {
+            instanceCache.set(event.instance.instanceId, event.instance);
+            activityDirty = true;
+        }
+        if (event.type === 'user_message' && !session.messages.some((message) => message.messageId === event.message.messageId)) {
+            session.messages.push({ ...event.message });
+        }
+        if (event.type === 'assistant_message' && !session.messages.some((message) => message.messageId === event.message.messageId)) {
+            session.messages.push({ ...event.message });
+        }
+        recordTimeline(session, event);
+        if (event.type === 'thinking_delta') {
+            conversationDirty = true;
+            const block = thinkingBlocks.get(event.turnId) ?? [...thinkingBlocks.values()].reverse().find((item) => item.status === 'active') ?? thinkingBlocks.get(latestThinkingTurnId ?? '');
+            if (block)
+                block.thinking = `${block.thinking ?? ''}${event.text}`;
+        }
+        if (event.type === 'assistant_delta') {
+            conversationDirty = true;
+            streams.set(event.turnId, `${streams.get(event.turnId) ?? ''}${event.text}`);
+        }
+        if (event.type === 'assistant_message') {
+            conversationDirty = true;
+            streams.delete(event.message.turnId ?? '');
+        }
+        if (event.type === 'tool_started' || event.type === 'tool_finished') {
+            conversationDirty = true;
+            activityDirty = true;
+            const log = activityLog.get(event.instanceId) ?? [];
+            log.push(`${event.tool}  ${oneLine(event.type === 'tool_started' ? event.input : event.output, 120)}`);
+            activityLog.set(event.instanceId, log.slice(-100));
+        }
+        if (event.type === 'tool_started') {
+            const block = thinkingBlocks.get(event.turnId) ?? [...thinkingBlocks.values()].reverse().find(b => b.status === 'active') ?? thinkingBlocks.get(latestThinkingTurnId ?? '');
+            if (block) {
+                const agent = runtime.getInstance(event.instanceId)?.agentId;
+                block.content.push(`→ ${agent && agent !== 'main' ? `${agent} · ` : ''}${event.tool}  ${oneLine(event.input, 60)}`);
+            }
+        }
+        if (event.type === 'tool_finished') {
+            const block = thinkingBlocks.get(event.turnId) ?? [...thinkingBlocks.values()].reverse().find(b => b.status === 'active') ?? thinkingBlocks.get(latestThinkingTurnId ?? '');
+            if (block) {
+                block.content.push(`✓ ${event.tool}  ${oneLine(event.output, 60)}`);
+                const patch = toolDiff(event.tool, event.output);
+                if (patch)
+                    block.content.push(patch);
+            }
+        }
+        if (event.type === 'context_compacted' && event.sessionId === sessionId) {
+            conversationDirty = true;
+            const label = event.instanceId === session.mainInstanceId
+                ? 'Context compacted'
+                : `${runtime.getInstance(event.instanceId)?.agentId ?? 'agent'} context compacted`;
+            notice = `${label} (${event.reason}): archived ${event.archivedMessages} messages, ${event.charsBefore} → ${event.charsAfter} chars.`;
+        }
+        if (event.type === 'runtime_error') {
+            conversationDirty = true;
+            if (event.sessionId === sessionId && event.instanceId === session.mainInstanceId) {
+                notice = `Error: ${event.error}`;
+                pendingTurns.clear();
+                stopSpinner();
+            }
+        }
+        if (event.type === 'instance_updated' && event.instance.instanceId === session.mainInstanceId
+            && event.instance.activeTurnId && ['running', 'waiting'].includes(event.instance.status)) {
+            const turnId = event.instance.activeTurnId;
+            conversationDirty = true;
+            pendingTurns.clear();
+            pendingTurns.add(turnId);
+            for (const [id, block] of thinkingBlocks) {
+                if (id !== turnId) {
+                    block.status = 'completed';
+                    block.finishedAt = Date.now();
+                    streams.delete(id);
+                }
+            }
+            if (!thinkingBlocks.has(turnId))
+                thinkingBlocks.set(turnId, { turnId, expanded: false, content: [], status: 'active', startedAt: Date.now() });
+            startSpinner();
+        }
+        if (event.type === 'instance_updated'
+            && event.instance.sessionId === sessionId
+            && event.instance.instanceId === session.mainInstanceId
+            && ['idle', 'failed', 'cancelled'].includes(event.instance.status)) {
+            const block = [...thinkingBlocks.values()].find(b => b.status === 'active');
+            conversationDirty = true;
+            if (block) {
+                block.status = 'completed';
+                block.finishedAt = Date.now();
+            }
+            pendingTurns.clear();
+            streams.clear();
+            stopSpinner();
+        }
+        scheduleRefresh();
+    };
+    const unsubscribe = runtime.subscribe(onEvent);
+    let finish;
+    const done = new Promise((resolveDone) => { finish = resolveDone; });
+    function close() {
+        if (closed)
+            return;
+        closed = true;
+        stopSpinner();
+        if (welcomeTimer)
+            clearInterval(welcomeTimer);
+        unsubscribe();
+        screen.destroy();
+        finish?.();
+    }
+    composer.on('keypress', handleComposerKey);
+    completions.on('select', (_item, index) => {
+        const selected = commandMatches(composerValue())[index];
+        if (selected) {
+            setComposerValue(selected.name + ' ');
+            focusComposer();
+        }
+    });
+    const runAction = (action) => {
+        void action().catch((error) => { notice = `Error: ${error instanceof Error ? error.message : String(error)}`; refresh(); });
+    };
+    activity.key(['enter', 'space'], () => { runAction(showActivityDetail); });
+    activity.on('select item', (_item, index) => { selectedActivityIndex = index; });
+    const openCommandPalette = () => {
+        if (screen.focused === composer || screen.focused === conversation || screen.focused === activity)
+            runAction(commandPalette);
+    };
+    const toggleActivity = () => {
+        activityVisible = !activityVisible;
+        refresh();
+        focusComposer();
+    };
+    screen.key(['C-k'], openCommandPalette);
+    screen.key(['C-b'], toggleActivity);
+    // Conversation and activity panes are mouse-scrollable. Focus returns to the
+    // composer after generation or when a modal closes.
+    const toggleThinkingBlock = (turnId) => {
+        const block = thinkingBlocks.get(turnId);
+        if (!block)
+            return;
+        conversationFollowOutput = false;
+        conversationScrollOffset = conversation.childBase;
+        block.expanded = !block.expanded;
+        conversationDirty = true;
+        refresh();
+    };
+    const focusConversation = () => {
+        // Browsing is independent of keyboard focus: typing always goes to the draft.
+        focusComposer();
+    };
+    const setMouseInteraction = (enabled) => {
+        selection = undefined;
+        nativeSelection = !enabled;
+        if (nativeSelection)
+            screen.program.disableMouse();
+        else {
+            screen.program.enableMouse();
+            if (process.platform === 'win32' || screen.program.term('windows')) {
+                screen.program.setMouse({ vt200Mouse: true, sgrMouse: true, utfMouse: false, cellMotion: true, allMotion: true }, true);
+            }
+        }
+        refresh();
+    };
+    screen.key(['f2'], () => setMouseInteraction(nativeSelection));
+    composer.on('click', focusComposer);
+    conversation.on('click', (data) => {
+        if (hasSelection())
+            return;
+        focusConversation();
+        if (!data || data.y === undefined)
+            return;
+        const lpos = conversation.lpos;
+        if (!lpos)
+            return;
+        const contentTop = lpos.yi + Number(conversation.itop);
+        const relY = data.y - contentTop;
+        const row = Math.floor(relY) + conversation.childBase;
+        // RenderThinkingBlock records indices in the raw `lines` array, but blessed
+        // re-parses/wraps content into `_clines`. Translate via ftor so the click
+        // still hits the header even when a preceding long line was wrapped.
+        const clines = conversation._clines;
+        const renderedLine = (real) => {
+            const bucket = clines?.ftor?.[real];
+            return bucket && bucket.length > 0 ? Number(bucket[0]) : real;
+        };
+        for (const [turnId, pos] of thinkingBlockLines) {
+            if (row === renderedLine(pos.headerLine)) {
+                toggleThinkingBlock(turnId);
+                return;
+            }
+        }
+    });
+    screen.key(['C-y'], () => {
+        if (latestThinkingTurnId)
+            toggleThinkingBlock(latestThinkingTurnId);
+    });
+    activity.on('click', focusComposer);
+    conversation.on('mousedown', focusConversation);
+    conversation.on('wheelup', () => {
+        selection = undefined;
+        focusConversation();
+        conversationFollowOutput = false;
+        conversationScrollOffset = conversation.childBase;
+        refresh();
+    });
+    conversation.on('wheeldown', () => {
+        selection = undefined;
+        focusConversation();
+        conversationScrollOffset = conversation.childBase;
+        conversationFollowOutput = conversationAtBottom();
+        refresh();
+    });
+    conversation.on('scroll', () => {
+        if (restoringConversationScroll)
+            return;
+        conversationScrollOffset = conversation.childBase;
+        conversationFollowOutput = conversationAtBottom();
+    });
+    screen.key(['pageup', 'pagedown'], (_ch, key) => {
+        selection = undefined;
+        if (!composerPinned && screen.focused !== conversation)
+            return;
+        focusConversation();
+        conversation.scroll((key.name === 'pageup' ? -1 : 1) * Math.max(1, Number(conversation.height) - 2));
+        screen.render();
+    });
+    screen.key(['C-x'], () => { void command('/cancel').catch((error) => { notice = String(error); refresh(); }); });
+    screen.key(['tab', 'escape'], () => {
+        if (screen.focused === conversation || screen.focused === activity)
+            focusComposer();
+    });
+    const orderedSelection = () => {
+        if (!selection || !hasSelection())
+            return;
+        const { start, end } = selection;
+        return start.y < end.y || (start.y === end.y && start.x <= end.x) ? [start, end] : [end, start];
+    };
+    conversation.on('render', () => {
+        const range = orderedSelection();
+        if (!range || !selection)
+            return;
+        const [start, end] = range;
+        for (let y = start.y; y <= end.y; y++) {
+            const row = screenBuffer.lines[y];
+            if (!row)
+                continue;
+            const left = y === start.y ? start.x : selection.left;
+            const right = y === end.y ? end.x : selection.right - 1;
+            for (let x = left; x <= right; x++) {
+                const cell = row[x];
+                if (cell)
+                    cell[0] = (cell[0] & ~0x3ffff) | (0 << 9) | 6;
+            }
+            row.dirty = true;
+        }
+    });
+    // Handle the raw protocol before Blessed: SGR drag reports (button 32) are
+    // misclassified as repeated presses by Blessed 0.1.x on some terminals.
+    screen.program.prependListener('mouse', (data) => {
+        if (nativeSelection)
+            return;
+        const bounds = conversation.lpos;
+        if (!bounds)
+            return;
+        const rawButton = Number(data.raw?.[0]);
+        const motion = data.action === 'mousemove' || (Number.isFinite(rawButton) && (rawButton & 32) !== 0 && (rawButton & 64) === 0);
+        if (motion && selection?.dragging) {
+            data.action = 'mousemove';
+            selection.end = { x: Math.max(selection.left, Math.min(selection.right - 1, data.x)), y: Math.max(selection.top, Math.min(selection.bottom - 1, data.y)) };
+            screen.render();
+        }
+        else if (data.action === 'mousedown' && data.button === 'left'
+            && data.x >= bounds.xi + Number(conversation.ileft) && data.x < bounds.xl - (Number(conversation.iwidth) - Number(conversation.ileft)) - 1
+            && data.y >= bounds.yi && data.y < bounds.yl) {
+            selection = {
+                start: { x: data.x, y: data.y }, end: { x: data.x, y: data.y }, dragging: true,
+                rows: screenBuffer.lines.map((row) => row.map((cell) => cell[1])),
+                left: bounds.xi + Number(conversation.ileft), right: bounds.xl - (Number(conversation.iwidth) - Number(conversation.ileft)) - 1,
+                top: bounds.yi, bottom: bounds.yl,
+            };
+        }
+        else if (data.action === 'mouseup' && selection?.dragging) {
+            selection.dragging = false;
+        }
+    });
+    screen.key(['C-c'], () => {
+        const range = orderedSelection();
+        if (!range || !selection) {
+            close();
+            return;
+        }
+        const [start, end] = range;
+        const lines = [];
+        for (let y = start.y; y <= end.y; y++) {
+            const left = y === start.y ? start.x : selection.left;
+            const right = y === end.y ? end.x + 1 : selection.right;
+            lines.push((selection.rows[y] ?? []).slice(left, right).join('').replace(/[\x00\x03]/g, '').trimEnd());
+        }
+        runAction(async () => {
+            try {
+                await (options.copyToClipboard ?? copyText)(lines.join('\n'));
+            }
+            finally {
+                selection = undefined;
+            }
+            refresh();
+            focusComposer();
+        });
+    });
+    composer.on('keypress', (_ch, key) => {
+        if (hasSelection() && !(key.ctrl && key.name === 'c')) {
+            selection = undefined;
+            refresh();
+        }
+    });
+    screen.key(['escape'], () => { selection = undefined; refresh(); });
+    screen.on('resize', refresh);
+    refresh();
+    focusComposer();
+    await done;
+}