@blockrun/franklin 3.5.1 → 3.6.2

package/dist/ui/app.js

@@ -8,12 +8,14 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import { render, Static, Box, Text, useApp, useInput, useStdout } from 'ink';
 import Spinner from 'ink-spinner';
 import TextInput from 'ink-text-input';
+import VimInput from './vim-input.js';
 import { renderMarkdown } from './markdown.js';
 import { resolveModel, PICKER_CATEGORIES, PICKER_MODELS_FLAT, } from './model-picker.js';
 import { estimateCost } from '../pricing.js';
 import { formatTokens, shortModelName } from '../stats/format.js';
+import { mouse } from './mouse.js';
 // ─── Full-width input box ──────────────────────────────────────────────────
-function InputBox({ input, setInput, onSubmit, model, balance, sessionCost, queued, queuedCount, focused, busy, contextPct }) {
+function InputBox({ input, setInput, onSubmit, model, balance, sessionCost, queued, queuedCount, focused, busy, contextPct, vimMode, onVimModeChange }) {
     const { stdout } = useStdout();
     const cols = stdout?.columns ?? 80;
     const innerWidth = Math.min(Math.max(30, cols - 4), cols - 2);
@@ -22,7 +24,13 @@ function InputBox({ input, setInput, onSubmit, model, balance, sessionCost, queu
             ? `⏎ ${queuedCount ?? 1} queued: ${queued.slice(0, 40)}`
             : 'Working...')
         : 'Type a message...';
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: '╭' + '─'.repeat(cols - 2) + '╮' }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "\u2502 " }), busy && !input ? _jsxs(Text, { color: "yellow", children: [_jsx(Spinner, { type: "dots" }), " "] }) : null, _jsx(Box, { width: busy && !input ? innerWidth - 4 : innerWidth, children: _jsx(TextInput, { value: input, onChange: setInput, onSubmit: onSubmit, placeholder: placeholder, focus: focused !== false }) }), _jsxs(Text, { dimColor: true, children: [' '.repeat(Math.max(0, cols - innerWidth - 4)), "\u2502"] })] }), _jsx(Text, { dimColor: true, children: '╰' + '─'.repeat(cols - 2) + '╯' }), _jsx(Box, { marginLeft: 1, children: _jsxs(Text, { dimColor: true, children: [busy ? _jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }) : null, busy ? ' ' : '', model, "  \u00B7  ", balance, sessionCost > 0.00001 ? _jsxs(Text, { color: "yellow", children: ["  -$", sessionCost.toFixed(4)] }) : '', contextPct !== undefined && contextPct > 0 ? (_jsxs(Text, { color: contextPct > 85 ? 'red' : contextPct > 70 ? 'yellow' : undefined, children: ['  ·  ctx ', contextPct, '%'] })) : null, (queuedCount ?? 0) > 0 ? _jsxs(Text, { color: "cyan", children: ["  \u00B7  ", queuedCount, " queued"] }) : null, '  ·  esc'] }) })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, children: '╭' + '─'.repeat(cols - 2) + '╮' }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "\u2502 " }), busy && !input ? _jsxs(Text, { color: "yellow", children: [_jsx(Spinner, { type: "dots" }), " "] }) : null, _jsx(Box, { width: busy && !input ? innerWidth - 4 : innerWidth, children: vimMode ? (_jsx(VimInput, { value: input, onChange: setInput, onSubmit: onSubmit, placeholder: placeholder, focus: focused !== false, showMode: true, onModeChange: onVimModeChange })) : (_jsx(TextInput, { value: input, onChange: setInput, onSubmit: onSubmit, placeholder: placeholder, focus: focused !== false })) }), _jsxs(Text, { dimColor: true, children: [' '.repeat(Math.max(0, cols - innerWidth - 4)), "\u2502"] })] }), _jsx(Text, { dimColor: true, children: '╰' + '─'.repeat(cols - 2) + '╯' }), _jsx(Box, { marginLeft: 1, children: _jsxs(Text, { dimColor: true, children: [busy ? _jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }) : null, busy ? ' ' : '', shortModelName(model), "  \u00B7  ", balance, sessionCost > 0.00001 ? _jsxs(Text, { color: "yellow", children: ["  -$", sessionCost.toFixed(4)] }) : '', contextPct !== undefined && contextPct > 0 ? (() => {
+                            // Visual context bar: ▓▓▓▓▓▓░░░░ 75%
+                            const filled = Math.round(contextPct / 10);
+                            const empty = 10 - filled;
+                            const barColor = contextPct > 85 ? 'red' : contextPct > 70 ? 'yellow' : 'green';
+                            return (_jsxs(Text, { children: ['  ', _jsx(Text, { color: barColor, children: '▓'.repeat(filled) }), _jsx(Text, { dimColor: true, children: '░'.repeat(empty) }), _jsxs(Text, { color: barColor, children: [' ', contextPct, "%"] })] }));
+                        })() : null, (queuedCount ?? 0) > 0 ? _jsxs(Text, { color: "cyan", children: ["  \u00B7  ", queuedCount, " queued"] }) : null, '  ·  esc'] }) })] }));
 }
 function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain, startWithPicker, onSubmit, onModelChange, onAbort, onExit, }) {
     const { exit } = useApp();
@@ -33,6 +41,8 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
     const [tools, setTools] = useState(new Map());
     // Completed tool results committed to Static (permanent scrollback — no re-render artifacts)
     const [completedTools, setCompletedTools] = useState([]);
+    // Last completed tool — shown in dynamic area so it can be expanded/collapsed with Tab
+    const [expandableTool, setExpandableTool] = useState(null);
     // Full responses committed to Static immediately — goes into terminal scrollback like Claude Code
     const [committedResponses, setCommittedResponses] = useState([]);
     // Short preview of latest response shown in dynamic area (last ~5 lines, cleared on next turn)
@@ -48,6 +58,8 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
     const [totalCost, setTotalCost] = useState(0);
     const [showHelp, setShowHelp] = useState(false);
     const [showWallet, setShowWallet] = useState(false);
+    const [vimEnabled, setVimEnabled] = useState(false);
+    const [currentVimMode, setCurrentVimMode] = useState('insert');
     const [balance, setBalance] = useState(walletBalance);
     // Parse the fetched balance to a number so we can compute live balance = fetchedBalance - sessionCost.
     // costAtLastFetch tracks totalCost when balance was last fetched, to avoid double-subtracting.
@@ -69,6 +81,37 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
     // Messages queued while agent is busy — auto-submitted FIFO when turns complete.
     const [queuedInputs, setQueuedInputs] = useState([]);
     const turnDoneCallbackRef = useRef(null);
+    // ── Render throttling: batch rapid text_delta/thinking_delta into 50ms frames ──
+    // Without this, each delta (20-100/sec) triggers a full React re-render.
+    // With this, we accumulate in refs and flush at ~20fps — smooth and efficient.
+    const pendingTextRef = useRef('');
+    const pendingThinkingRef = useRef('');
+    const flushTimerRef = useRef(null);
+    const flushPendingText = useCallback(() => {
+        flushTimerRef.current = null;
+        const text = pendingTextRef.current;
+        const thinking = pendingThinkingRef.current;
+        if (text) {
+            pendingTextRef.current = '';
+            setWaiting(false);
+            setThinking(false);
+            setStreamText(prev => prev + text);
+        }
+        if (thinking) {
+            pendingThinkingRef.current = '';
+            setWaiting(false);
+            setThinking(true);
+            setThinkingText(prev => {
+                const updated = prev + thinking;
+                return updated.length > 500 ? updated.slice(-500) : updated;
+            });
+        }
+    }, []);
+    const scheduleFlush = useCallback(() => {
+        if (!flushTimerRef.current) {
+            flushTimerRef.current = setTimeout(flushPendingText, 50);
+        }
+    }, [flushPendingText]);
     // Refs to read current state values inside memoized event handlers (avoids stale closures)
     const streamTextRef = useRef('');
     const turnTokensRef = useRef({ input: 0, output: 0, calls: 0 });
@@ -99,15 +142,19 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
     const commitResponse = useCallback((text, tokens = turnTokensRef.current, cost = turnCostRef.current) => {
         if (!text.trim())
             return;
-        setCommittedResponses((rs) => [...rs, {
-                key: String(Date.now() + Math.random()),
-                text,
-                tokens,
-                cost,
-                model: turnModelRef.current,
-                tier: turnTierRef.current,
-                savings: turnSavingsRef.current,
-            }]);
+        setCommittedResponses((rs) => {
+            const next = [...rs, {
+                    key: String(Date.now() + Math.random()),
+                    text,
+                    tokens,
+                    cost,
+                    model: turnModelRef.current,
+                    tier: turnTierRef.current,
+                    savings: turnSavingsRef.current,
+                }];
+            // Cap at 300 items — older items are already in terminal scrollback
+            return next.length > 300 ? next.slice(-300) : next;
+        });
         const allLines = text.split('\n');
         if (allLines.length > 20) {
             setResponsePreview('  ↑ scroll to see full reply\n' + allLines.slice(-20).join('\n'));
@@ -154,7 +201,10 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
             return;
         }
         // Esc to quit (only when input is empty and in input mode)
+        // In Vim mode: Esc goes to normal mode (handled by VimInput), only quit on Esc in normal mode with empty input
         if (key.escape && mode === 'input' && ready && !input) {
+            if (vimEnabled && currentVimMode === 'insert')
+                return; // Let VimInput handle Esc → normal
             onExit();
             exit();
             return;
@@ -179,6 +229,12 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
             setReady(true);
         }
     }, { isActive: isPickerOrEsc });
+    // Tab key: toggle expand/collapse on the last completed tool
+    useInput((_ch, key) => {
+        if (key.tab && expandableTool) {
+            setExpandableTool(prev => prev ? { ...prev, expanded: !prev.expanded } : null);
+        }
+    }, { isActive: mode === 'input' && !permissionRequest && !askUserRequest });
     // Input history: Up/Down arrow when in ready input mode
     useInput((_ch, key) => {
         if (key.upArrow && inputHistory.length > 0) {
@@ -256,6 +312,10 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                     setShowHelp(true);
                     setShowWallet(false);
                     return;
+                case '/vim':
+                    setVimEnabled(prev => !prev);
+                    showStatus(vimEnabled ? 'Vim mode OFF' : 'Vim mode ON — Esc for normal, i for insert', 'success', 3000);
+                    return;
                 case '/clear':
                     setStreamText('');
                     setTools(new Map());
@@ -316,6 +376,12 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
         setThinking(false);
         setThinkingText('');
         setTools(new Map());
+        // Flush expandable tool to Static before clearing
+        setExpandableTool(prev => {
+            if (prev)
+                setCompletedTools(prev2 => [...prev2, { ...prev, expanded: false }]);
+            return null;
+        });
         setCompletedTools([]);
         setReady(false);
         setWaiting(true);
@@ -329,6 +395,22 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
         turnSavingsRef.current = undefined;
         onSubmit(trimmed);
     }, [ready, currentModel, totalCost, onSubmit, onModelChange, onAbort, onExit, exit, lastPrompt, inputHistory, showStatus]);
+    // Mouse support — enable tracking and handle clicks on tool results
+    useEffect(() => {
+        const cleanup = mouse.enable();
+        const handleClick = (_event) => {
+            // Click anywhere toggles the expandable tool (if one exists)
+            // This is intentionally simple — we don't track exact coordinates of components.
+            // The expandable tool is always the most recent tool result, so any click is a
+            // reasonable toggle target. Tab key remains the precise alternative.
+            setExpandableTool(prev => prev ? { ...prev, expanded: !prev.expanded } : null);
+        };
+        mouse.on('click', handleClick);
+        return () => {
+            mouse.removeListener('click', handleClick);
+            cleanup();
+        };
+    }, []);
     // Expose event handler, balance updater, and permission bridge
     useEffect(() => {
         globalThis.__runcode_ui = {
@@ -360,18 +442,14 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
             handleEvent: (event) => {
                 switch (event.kind) {
                     case 'text_delta':
-                        setWaiting(false);
-                        setThinking(false);
-                        setStreamText(prev => prev + event.text);
+                        // Throttled: accumulate in ref, flush every 50ms (~20fps)
+                        pendingTextRef.current += event.text;
+                        scheduleFlush();
                         break;
                     case 'thinking_delta':
-                        setWaiting(false);
-                        setThinking(true);
-                        setThinkingText(prev => {
-                            // Keep last 500 chars of thinking for display
-                            const updated = prev + event.text;
-                            return updated.length > 500 ? updated.slice(-500) : updated;
-                        });
+                        // Throttled: accumulate in ref, flush every 50ms
+                        pendingThinkingRef.current += event.text;
+                        scheduleFlush();
                         break;
                     case 'capability_start':
                         setWaiting(false);
@@ -382,6 +460,9 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                                 done: false, error: false,
                                 preview: event.preview || '',
                                 liveOutput: '',
+                                liveLines: [],
+                                fullOutput: '',
+                                expanded: false,
                                 elapsed: 0,
                             });
                             return next;
@@ -393,7 +474,13 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                             if (!t || t.done)
                                 return prev;
                             const next = new Map(prev);
-                            next.set(event.id, { ...t, liveOutput: event.text });
+                            // Accumulate output lines for multi-line display (keep last 5)
+                            const newLines = [...t.liveLines];
+                            const incoming = event.text.split('\n').filter(Boolean);
+                            newLines.push(...incoming);
+                            while (newLines.length > 5)
+                                newLines.shift();
+                            next.set(event.id, { ...t, liveOutput: event.text, liveLines: newLines });
                             return next;
                         });
                         break;
@@ -413,10 +500,19 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                                     error: !!event.result.isError,
                                     preview: resultPreview,
                                     liveOutput: '',
+                                    liveLines: [],
+                                    fullOutput: event.result.output || '',
+                                    diff: event.result.diff,
+                                    expanded: false,
                                     elapsed: Date.now() - t.startTime,
                                 };
-                                // Move to Static (permanent scrollback) — prevents re-render artifacts
-                                setCompletedTools(prev2 => [...prev2, completed]);
+                                // Move previous expandable tool to Static, set new one as expandable
+                                setExpandableTool(prevExpTool => {
+                                    if (prevExpTool) {
+                                        setCompletedTools(prev2 => [...prev2, { ...prevExpTool, expanded: false }]);
+                                    }
+                                    return completed;
+                                });
                                 next.delete(event.id);
                             }
                             return next;
@@ -444,6 +540,23 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                         break;
                     }
                     case 'turn_done': {
+                        // Flush any pending throttled text immediately
+                        if (flushTimerRef.current) {
+                            clearTimeout(flushTimerRef.current);
+                            flushTimerRef.current = null;
+                        }
+                        // Merge pending text into the ref so commitResponse sees the full text
+                        if (pendingTextRef.current) {
+                            streamTextRef.current += pendingTextRef.current;
+                            pendingTextRef.current = '';
+                        }
+                        pendingThinkingRef.current = '';
+                        // Flush expandable tool to Static before committing response
+                        setExpandableTool(prev => {
+                            if (prev)
+                                setCompletedTools(prev2 => [...prev2, { ...prev, expanded: false }]);
+                            return null;
+                        });
                         const text = streamTextRef.current;
                         if (text.trim()) {
                             commitResponse(text, turnTokensRef.current, turnCostRef.current);
@@ -502,17 +615,39 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
     // opens/closes. The picker is rendered inline below scrollback, and the
     // InputBox is hidden while it's active.
     const inPicker = mode === 'model-picker';
-    return (_jsxs(Box, { flexDirection: "column", children: [statusMsg && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: statusTone === 'error' ? 'red' : statusTone === 'warning' ? 'yellow' : 'green', children: statusMsg }) })), showHelp && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Commands" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/model" }), " [name]  Switch model (picker if no name)"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/wallet" }), "        Show wallet address & balance"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/cost" }), "          Session cost & savings"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/retry" }), "         Retry the last prompt"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/compact" }), "       Compress conversation history"] }), _jsx(Text, { dimColor: true, children: "  \u2500\u2500 Coding \u2500\u2500" }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/test" }), "          Run tests"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/fix" }), "           Fix last error"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/review" }), "        Code review"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/explain" }), " file  Explain code"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/search" }), " query  Search codebase"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/session-search" }), " q  Search past sessions"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/refactor" }), " desc Refactor code"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/scaffold" }), " desc Generate boilerplate"] }), _jsx(Text, { dimColor: true, children: "  \u2500\u2500 Git \u2500\u2500" }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/commit" }), "        Commit changes"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/push" }), "          Push to remote"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/pr" }), "            Create pull request"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/status" }), "        Git status"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/diff" }), "          Git diff"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/log" }), "           Git log"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/branch" }), " [name] Branches"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/stash" }), "         Stash changes"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/undo" }), "          Undo last commit"] }), _jsx(Text, { dimColor: true, children: "  \u2500\u2500 Analysis \u2500\u2500" }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/security" }), "      Security audit"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/lint" }), "          Quality check"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/optimize" }), "      Performance check"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/todo" }), "          Find TODOs"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/deps" }), "          Dependencies"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/clean" }), "         Dead code removal"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/context" }), "       Session info (model, tokens, mode)"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/plan" }), "          Enter plan mode (read-only tools)"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/execute" }), "       Exit plan mode (enable all tools)"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/sessions" }), "      List saved sessions"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/resume" }), " id     Resume a saved session"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/clear" }), "         Clear conversation history"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/doctor" }), "        Diagnose setup issues"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/help" }), "          This help"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/exit" }), "          Quit"] }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "  Shortcuts: sonnet, opus, gpt, gemini, deepseek, flash, free, r1, o4, nano, mini, haiku" })] })), showWallet && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Wallet" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: ["  Chain:   ", _jsx(Text, { color: "magenta", children: chain })] }), _jsxs(Text, { children: ["  Address: ", _jsx(Text, { color: "cyan", children: walletAddress })] }), _jsxs(Text, { children: ["  Balance: ", _jsx(Text, { color: "green", children: balance })] })] })), _jsx(Static, { items: completedTools, children: (tool) => (_jsx(Box, { marginLeft: 1, children: tool.error
-                        ? _jsxs(Text, { color: "red", children: ["  \u2717 ", tool.name, " ", _jsxs(Text, { dimColor: true, children: [tool.elapsed, "ms", tool.preview ? ` — ${tool.preview}` : ''] })] })
-                        : _jsxs(Text, { color: "green", children: ["  \u2713 ", tool.name, " ", _jsxs(Text, { dimColor: true, children: [tool.elapsed, "ms", tool.preview ? ` — ${tool.preview}` : ''] })] }) }, tool.key)) }), _jsx(Static, { items: committedResponses, children: (r) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { wrap: "wrap", children: renderMarkdown(r.text) }), (r.tokens.input > 0 || r.tokens.output > 0) && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { dimColor: true, children: [r.tier && _jsxs(Text, { color: "cyan", children: [r.tier, " "] }), r.model ? shortModelName(r.model) : '', r.model ? '  ·  ' : '', r.tokens.calls > 0 && r.tokens.input === 0
-                                        ? `${r.tokens.calls} calls`
-                                        : `${formatTokens(r.tokens.input)} in / ${formatTokens(r.tokens.output)} out`, r.cost > 0 ? `  ·  $${r.cost.toFixed(4)}` : '', r.savings !== undefined && r.savings > 0 ? _jsxs(Text, { color: "green", children: ["  saved ", Math.round(r.savings * 100), "%"] }) : ''] }) }))] }, r.key)) }), permissionRequest && (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 1, children: [_jsx(Text, { color: "yellow", children: "  \u256D\u2500 Permission required \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Text, { color: "yellow", children: ["  \u2502 ", _jsx(Text, { bold: true, children: permissionRequest.toolName })] }), permissionRequest.description.split('\n').map((line, i) => (_jsxs(Text, { dimColor: true, children: ["  \u2502 ", line] }, i))), _jsx(Text, { color: "yellow", children: "  \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx(Box, { marginLeft: 3, children: _jsxs(Text, { children: [_jsx(Text, { bold: true, color: "green", children: "[y]" }), _jsx(Text, { dimColor: true, children: " yes  " }), _jsx(Text, { bold: true, color: "cyan", children: "[a]" }), _jsx(Text, { dimColor: true, children: " always  " }), _jsx(Text, { bold: true, color: "red", children: "[n]" }), _jsx(Text, { dimColor: true, children: " no" })] }) })] })), askUserRequest && (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 1, children: [_jsx(Text, { color: "cyan", children: "  \u256D\u2500 Question \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Text, { color: "cyan", children: ["  \u2502 ", _jsx(Text, { bold: true, children: askUserRequest.question })] }), askUserRequest.options && askUserRequest.options.length > 0 && (askUserRequest.options.map((opt, i) => (_jsxs(Text, { dimColor: true, children: ["  \u2502 ", i + 1, ". ", opt] }, i)))), _jsx(Text, { color: "cyan", children: "  \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Box, { marginLeft: 3, children: [_jsx(Text, { bold: true, children: "answer> " }), _jsx(TextInput, { value: askUserInput, onChange: setAskUserInput, onSubmit: (val) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [statusMsg && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: statusTone === 'error' ? 'red' : statusTone === 'warning' ? 'yellow' : 'green', children: statusMsg }) })), showHelp && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Commands" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/model" }), " [name]  Switch model (picker if no name)"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/wallet" }), "        Show wallet address & balance"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/cost" }), "          Session cost & savings"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/retry" }), "         Retry the last prompt"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/compact" }), "       Compress conversation history"] }), _jsx(Text, { dimColor: true, children: "  \u2500\u2500 Coding \u2500\u2500" }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/test" }), "          Run tests"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/fix" }), "           Fix last error"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/review" }), "        Code review"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/explain" }), " file  Explain code"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/search" }), " query  Search codebase"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/session-search" }), " q  Search past sessions"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/refactor" }), " desc Refactor code"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/scaffold" }), " desc Generate boilerplate"] }), _jsx(Text, { dimColor: true, children: "  \u2500\u2500 Git \u2500\u2500" }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/commit" }), "        Commit changes"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/push" }), "          Push to remote"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/pr" }), "            Create pull request"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/status" }), "        Git status"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/diff" }), "          Git diff"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/log" }), "           Git log"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/branch" }), " [name] Branches"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/stash" }), "         Stash changes"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/undo" }), "          Undo last commit"] }), _jsx(Text, { dimColor: true, children: "  \u2500\u2500 Analysis \u2500\u2500" }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/security" }), "      Security audit"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/lint" }), "          Quality check"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/optimize" }), "      Performance check"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/todo" }), "          Find TODOs"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/deps" }), "          Dependencies"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/clean" }), "         Dead code removal"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/context" }), "       Session info (model, tokens, mode)"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/plan" }), "          Enter plan mode (read-only tools)"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/execute" }), "       Exit plan mode (enable all tools)"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/sessions" }), "      List saved sessions"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/resume" }), " id     Resume a saved session"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/clear" }), "         Clear conversation history"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/doctor" }), "        Diagnose setup issues"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/vim" }), "           Toggle Vim input mode"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/help" }), "          This help"] }), _jsxs(Text, { children: ["  ", _jsx(Text, { color: "cyan", children: "/exit" }), "          Quit"] }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "  Shortcuts: sonnet, opus, gpt, gemini, deepseek, flash, free, r1, o4, nano, mini, haiku" })] })), showWallet && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Wallet" }), _jsx(Text, { children: " " }), _jsxs(Text, { children: ["  Chain:   ", _jsx(Text, { color: "magenta", children: chain })] }), _jsxs(Text, { children: ["  Address: ", _jsx(Text, { color: "cyan", children: walletAddress })] }), _jsxs(Text, { children: ["  Balance: ", _jsx(Text, { color: "green", children: balance })] })] })), _jsx(Static, { items: completedTools, children: (tool) => {
+                    const elapsedFmt = tool.elapsed >= 1000
+                        ? `${(tool.elapsed / 1000).toFixed(1)}s`
+                        : `${tool.elapsed}ms`;
+                    return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Text, { children: [tool.error
+                                        ? _jsx(Text, { color: "red", children: "\u2717" })
+                                        : _jsx(Text, { color: "green", children: "\u2713" }), ' ', _jsx(Text, { bold: true, children: tool.name }), tool.preview ? _jsxs(Text, { dimColor: true, children: ["(", tool.preview.slice(0, 80), ")"] }) : null, _jsxs(Text, { dimColor: true, children: [" ", elapsedFmt] })] }), tool.diff && !tool.error && tool.diff.oldLines.length <= 8 && tool.diff.newLines.length <= 8 && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [tool.diff.oldLines.map((line, i) => (_jsxs(Text, { color: "red", wrap: "truncate-end", children: ['⎿  ', "- ", line.slice(0, 120)] }, `old-${i}`))), tool.diff.newLines.map((line, i) => (_jsxs(Text, { color: "green", wrap: "truncate-end", children: ['⎿  ', "+ ", line.slice(0, 120)] }, `new-${i}`)))] })), tool.diff && !tool.error && (tool.diff.oldLines.length > 8 || tool.diff.newLines.length > 8) && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ['⎿  ', tool.diff.oldLines.length, " lines \u2192 ", tool.diff.newLines.length, " lines"] }) })), tool.error && tool.fullOutput && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: tool.fullOutput.split('\n').filter(Boolean).slice(0, 3).map((line, i) => (_jsxs(Text, { color: "red", wrap: "truncate-end", children: ['⎿  ', line.slice(0, 120)] }, i))) }))] }, tool.key));
+                } }), _jsx(Static, { items: committedResponses, children: (r) => {
+                    const isUserMsg = r.key.startsWith('user-');
+                    return (_jsxs(Box, { flexDirection: "column", children: [!isUserMsg && (r.tokens.input > 0 || r.tokens.output > 0) && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: '─'.repeat(60) }) })), _jsx(Text, { wrap: "wrap", children: renderMarkdown(r.text) }), (r.tokens.input > 0 || r.tokens.output > 0) && (_jsx(Box, { marginLeft: 1, marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: [r.tier && _jsxs(Text, { color: "cyan", children: ["[", r.tier, "] "] }), r.model ? shortModelName(r.model) : '', r.model ? '  ·  ' : '', r.tokens.calls > 0 && r.tokens.input === 0
+                                            ? `${r.tokens.calls} calls`
+                                            : `${formatTokens(r.tokens.input)} in / ${formatTokens(r.tokens.output)} out`, r.cost > 0 ? `  ·  $${r.cost.toFixed(4)}` : '', r.savings !== undefined && r.savings > 0 ? _jsxs(Text, { color: "green", children: ["  saved ", Math.round(r.savings * 100), "%"] }) : ''] }) }))] }, r.key));
+                } }), permissionRequest && (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 1, children: [_jsx(Text, { color: "yellow", children: "  \u256D\u2500 Permission required \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Text, { color: "yellow", children: ["  \u2502 ", _jsx(Text, { bold: true, children: permissionRequest.toolName })] }), permissionRequest.description.split('\n').map((line, i) => (_jsxs(Text, { dimColor: true, children: ["  \u2502 ", line] }, i))), _jsx(Text, { color: "yellow", children: "  \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsx(Box, { marginLeft: 3, children: _jsxs(Text, { children: [_jsx(Text, { bold: true, color: "green", children: "[y]" }), _jsx(Text, { dimColor: true, children: " yes  " }), _jsx(Text, { bold: true, color: "cyan", children: "[a]" }), _jsx(Text, { dimColor: true, children: " always  " }), _jsx(Text, { bold: true, color: "red", children: "[n]" }), _jsx(Text, { dimColor: true, children: " no" })] }) })] })), askUserRequest && (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: 1, children: [_jsx(Text, { color: "cyan", children: "  \u256D\u2500 Question \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Text, { color: "cyan", children: ["  \u2502 ", _jsx(Text, { bold: true, children: askUserRequest.question })] }), askUserRequest.options && askUserRequest.options.length > 0 && (askUserRequest.options.map((opt, i) => (_jsxs(Text, { dimColor: true, children: ["  \u2502 ", i + 1, ". ", opt] }, i)))), _jsx(Text, { color: "cyan", children: "  \u2570\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }), _jsxs(Box, { marginLeft: 3, children: [_jsx(Text, { bold: true, children: "answer> " }), _jsx(TextInput, { value: askUserInput, onChange: setAskUserInput, onSubmit: (val) => {
                                     const answer = val.trim() || '(no response)';
                                     const r = askUserRequest.resolve;
                                     setAskUserRequest(null);
                                     setAskUserInput('');
                                     r(answer);
-                                }, focus: true })] })] })), Array.from(tools.entries()).map(([id, tool]) => (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsxs(Text, { color: "cyan", children: ['  ', _jsx(Spinner, { type: "dots" }), ' ', tool.name, tool.preview ? _jsxs(Text, { dimColor: true, children: [": ", tool.preview.slice(0, 60)] }) : null, _jsx(Text, { dimColor: true, children: (() => { const s = Math.round((Date.now() - tool.startTime) / 1000); return s > 0 ? ` ${s}s` : ''; })() })] }), tool.liveOutput ? (_jsxs(Text, { color: "yellow", children: ['    ', tool.liveOutput.slice(0, 100)] })) : null] }, id))), thinking && (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsxs(Text, { color: "magenta", children: ["  ", _jsx(Spinner, { type: "dots" }), " thinking", completedTools.length > 0 ? _jsxs(Text, { dimColor: true, children: [' ', "(step ", completedTools.length + 1, ")"] }) : null] }), thinkingText && (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ['    ', thinkingText.split('\n').pop()?.slice(0, 100)] }))] })), waiting && !thinking && tools.size === 0 && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: "yellow", children: ["  ", _jsx(Spinner, { type: "dots" }), " ", _jsxs(Text, { dimColor: true, children: [currentModel, completedTools.length > 0 ? ` · step ${completedTools.length + 1}` : ''] })] }) })), streamText && (_jsx(Box, { marginTop: 0, marginBottom: 0, children: _jsx(Text, { wrap: "wrap", children: renderMarkdown(streamText) }) })), responsePreview && !streamText && (_jsx(Box, { flexDirection: "column", marginBottom: 0, children: _jsx(Text, { wrap: "wrap", children: renderMarkdown(responsePreview) }) })), inPicker && (() => {
+                                }, focus: true })] })] })), expandableTool && (() => {
+                const tool = expandableTool;
+                const elapsedFmt = tool.elapsed >= 1000
+                    ? `${(tool.elapsed / 1000).toFixed(1)}s`
+                    : `${tool.elapsed}ms`;
+                const hasExpandableContent = !!(tool.diff || (tool.fullOutput && tool.fullOutput.split('\n').length > 1));
+                return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Text, { children: [tool.error ? _jsx(Text, { color: "red", children: "\u2717" }) : _jsx(Text, { color: "green", children: "\u2713" }), ' ', _jsx(Text, { bold: true, children: tool.name }), tool.preview ? _jsxs(Text, { dimColor: true, children: ["(", tool.preview.slice(0, 80), ")"] }) : null, _jsxs(Text, { dimColor: true, children: [" ", elapsedFmt] }), hasExpandableContent && (_jsxs(Text, { dimColor: true, children: [" ", tool.expanded ? '(tab to collapse)' : '(tab to expand)'] }))] }), !tool.expanded && tool.diff && !tool.error && tool.diff.oldLines.length <= 8 && tool.diff.newLines.length <= 8 && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [tool.diff.oldLines.map((line, i) => (_jsxs(Text, { color: "red", wrap: "truncate-end", children: ['⎿  ', "- ", line.slice(0, 120)] }, `old-${i}`))), tool.diff.newLines.map((line, i) => (_jsxs(Text, { color: "green", wrap: "truncate-end", children: ['⎿  ', "+ ", line.slice(0, 120)] }, `new-${i}`)))] })), tool.expanded && tool.fullOutput && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [tool.fullOutput.split('\n').slice(0, 30).map((line, i) => (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ['⎿  ', line.slice(0, 120)] }, i))), tool.fullOutput.split('\n').length > 30 && (_jsxs(Text, { dimColor: true, children: ['⎿  ', "... ", tool.fullOutput.split('\n').length - 30, " more lines"] }))] })), tool.error && !tool.expanded && tool.fullOutput && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: tool.fullOutput.split('\n').filter(Boolean).slice(0, 3).map((line, i) => (_jsxs(Text, { color: "red", wrap: "truncate-end", children: ['⎿  ', line.slice(0, 120)] }, i))) }))] }));
+            })(), Array.from(tools.entries()).map(([id, tool]) => {
+                const elapsed = Math.round((Date.now() - tool.startTime) / 1000);
+                const elapsedStr = elapsed > 0 ? ` ${elapsed}s` : '';
+                return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), ' ', _jsx(Text, { bold: true, color: "cyan", children: tool.name }), tool.preview ? _jsxs(Text, { dimColor: true, children: ["(", tool.preview.slice(0, 70), ")"] }) : null, _jsx(Text, { dimColor: true, children: elapsedStr })] }), tool.liveLines.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: tool.liveLines.map((line, i) => (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ['⎿  ', line.slice(0, 120)] }, i))) }))] }, id));
+            }), thinking && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsxs(Text, { color: "magenta", children: [_jsx(Spinner, { type: "dots" }), ' ', _jsx(Text, { bold: true, children: "thinking" }), completedTools.length > 0 ? _jsxs(Text, { dimColor: true, children: [' ', "\u00B7 step ", completedTools.length + 1] }) : null] }), thinkingText && (() => {
+                        const lines = thinkingText.split('\n').filter(Boolean).slice(-3);
+                        return (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: lines.map((line, i) => (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ['⎿  ', line.slice(0, 120)] }, i))) }));
+                    })()] })), waiting && !thinking && tools.size === 0 && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "yellow", children: [_jsx(Spinner, { type: "dots" }), ' ', _jsxs(Text, { dimColor: true, children: [shortModelName(currentModel), completedTools.length > 0 ? ` · step ${completedTools.length + 1}` : ''] })] }) })), streamText && (_jsx(Box, { marginTop: 0, marginBottom: 0, children: _jsx(Text, { wrap: "wrap", children: renderMarkdown(streamText) }) })), responsePreview && !streamText && (_jsx(Box, { flexDirection: "column", marginBottom: 0, children: _jsx(Text, { wrap: "wrap", children: renderMarkdown(responsePreview) }) })), inPicker && (() => {
                 let flatIdx = 0;
                 return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { marginLeft: 2, children: [_jsx(Text, { bold: true, children: "Select a model " }), _jsx(Text, { dimColor: true, children: "(\u2191\u2193 navigate, Enter select, Esc cancel)" })] }), PICKER_CATEGORIES.map((cat) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u2500\u2500 ", cat.category, " \u2500\u2500"] }) }), cat.models.map((m) => {
                                     const myIdx = flatIdx++;
@@ -521,7 +656,7 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                                     const isHighlight = m.highlight === true;
                                     return (_jsxs(Box, { marginLeft: 2, children: [_jsxs(Text, { inverse: isSelected, color: isSelected ? 'cyan' : isHighlight ? 'yellow' : undefined, bold: isSelected || isHighlight, children: [' ', m.label.padEnd(26), ' '] }), _jsxs(Text, { dimColor: true, children: [" ", m.shortcut.padEnd(14)] }), _jsx(Text, { color: m.price === 'FREE' ? 'green' : isHighlight ? 'yellow' : undefined, dimColor: !isHighlight && m.price !== 'FREE', children: m.price }), isCurrent && _jsx(Text, { color: "green", children: " \u2190" })] }, m.id));
                                 })] }, cat.category))), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsx(Text, { dimColor: true, children: "Your conversation stays above \u2014 picking a model keeps all history intact." }) })] }));
-            })(), !inPicker && (_jsx(InputBox, { input: (permissionRequest || askUserRequest) ? '' : input, setInput: (permissionRequest || askUserRequest) ? () => { } : setInput, onSubmit: (permissionRequest || askUserRequest) ? () => { } : handleSubmit, model: currentModel, balance: liveBalance, sessionCost: totalCost, queued: queuedInputs[0] || undefined, queuedCount: queuedInputs.length, focused: !permissionRequest && !askUserRequest, busy: !askUserRequest && (waiting || thinking || tools.size > 0), contextPct: contextPct }))] }));
+            })(), !inPicker && (_jsx(InputBox, { input: (permissionRequest || askUserRequest) ? '' : input, setInput: (permissionRequest || askUserRequest) ? () => { } : setInput, onSubmit: (permissionRequest || askUserRequest) ? () => { } : handleSubmit, model: currentModel, balance: liveBalance, sessionCost: totalCost, queued: queuedInputs[0] || undefined, queuedCount: queuedInputs.length, focused: !permissionRequest && !askUserRequest, busy: !askUserRequest && (waiting || thinking || tools.size > 0), contextPct: contextPct, vimMode: vimEnabled, onVimModeChange: setCurrentVimMode }))] }));
 }
 export function launchInkUI(opts) {
     let resolveInput = null;
@@ -573,7 +708,7 @@ export function launchInkUI(opts) {
             return new Promise((resolve) => { resolveInput = resolve; });
         },
         onAbort: (cb) => { abortCallback = cb; },
-        cleanup: () => { instance.unmount(); },
+        cleanup: () => { mouse.disable(); instance.unmount(); },
         requestPermission: (toolName, description) => {
             const ui = globalThis.__runcode_ui;
             return ui?.requestPermission(toolName, description) ?? Promise.resolve('no');

package/dist/ui/markdown.d.ts

@@ -2,6 +2,12 @@
  * Markdown renderer for terminal output.
  * Converts markdown to ANSI-formatted text using chalk.
  * Shared between Ink UI and basic terminal UI.
+ *
+ * Features beyond basic markdown:
+ * - Language labels on code blocks (```ts → TS)
+ * - Numbered list support
+ * - Nested blockquotes
+ * - Task lists (- [x] done, - [ ] todo)
  */
 /**
  * Render a complete markdown string to ANSI-colored terminal output.

package/dist/ui/markdown.js

@@ -2,8 +2,30 @@
  * Markdown renderer for terminal output.
  * Converts markdown to ANSI-formatted text using chalk.
  * Shared between Ink UI and basic terminal UI.
+ *
+ * Features beyond basic markdown:
+ * - Language labels on code blocks (```ts → TS)
+ * - Numbered list support
+ * - Nested blockquotes
+ * - Task lists (- [x] done, - [ ] todo)
  */
 import chalk from 'chalk';
+/** Short language label for code block headers. */
+const LANG_LABELS = {
+    ts: 'TypeScript', typescript: 'TypeScript',
+    js: 'JavaScript', javascript: 'JavaScript',
+    py: 'Python', python: 'Python',
+    rs: 'Rust', rust: 'Rust',
+    go: 'Go', golang: 'Go',
+    sh: 'Shell', bash: 'Shell', zsh: 'Shell', shell: 'Shell',
+    json: 'JSON', yaml: 'YAML', yml: 'YAML', toml: 'TOML',
+    sql: 'SQL', html: 'HTML', css: 'CSS', xml: 'XML',
+    md: 'Markdown', markdown: 'Markdown',
+    diff: 'Diff', dockerfile: 'Dockerfile',
+    c: 'C', cpp: 'C++', java: 'Java', rb: 'Ruby', ruby: 'Ruby',
+    swift: 'Swift', kt: 'Kotlin', kotlin: 'Kotlin',
+    tsx: 'TSX', jsx: 'JSX',
+};
 /**
  * Render a complete markdown string to ANSI-colored terminal output.
  */
@@ -11,14 +33,41 @@ export function renderMarkdown(text) {
     const lines = text.split('\n');
     const out = [];
     let inCodeBlock = false;
+    let codeBlockLang = '';
     for (const line of lines) {
         // Code block toggle
         if (line.startsWith('```')) {
+            if (!inCodeBlock) {
+                // Opening — extract language
+                const lang = line.slice(3).trim().split(/\s/)[0].toLowerCase();
+                codeBlockLang = lang;
+                const label = LANG_LABELS[lang] || (lang ? lang.toUpperCase() : '');
+                out.push(chalk.dim('```') + (label ? chalk.dim.italic(` ${label}`) : ''));
+            }
+            else {
+                // Closing
+                out.push(chalk.dim('```'));
+                codeBlockLang = '';
+            }
             inCodeBlock = !inCodeBlock;
-            out.push(chalk.dim(line));
             continue;
         }
         if (inCodeBlock) {
+            // Diff-style highlighting inside code blocks
+            if (codeBlockLang === 'diff') {
+                if (line.startsWith('+')) {
+                    out.push(chalk.green(line));
+                    continue;
+                }
+                if (line.startsWith('-')) {
+                    out.push(chalk.red(line));
+                    continue;
+                }
+                if (line.startsWith('@@')) {
+                    out.push(chalk.cyan(line));
+                    continue;
+                }
+            }
             out.push(chalk.cyan(line));
             continue;
         }
@@ -40,9 +89,21 @@ export function renderMarkdown(text) {
             out.push(chalk.dim('─'.repeat(40)));
             continue;
         }
-        // Blockquotes
-        if (line.startsWith('> ')) {
-            out.push(chalk.dim('│ ') + chalk.italic(renderInline(line.slice(2))));
+        // Blockquotes (support nesting: >> , >>> )
+        const bqMatch = line.match(/^((?:>\s*)+)(.*)/);
+        if (bqMatch) {
+            const depth = (bqMatch[1].match(/>/g) || []).length;
+            const prefix = chalk.dim('│ '.repeat(depth));
+            out.push(prefix + chalk.italic(renderInline(bqMatch[2].trim())));
+            continue;
+        }
+        // Task lists: - [x] done, - [ ] todo
+        const taskMatch = line.match(/^(\s*)[-*] \[([ xX])\] (.*)/);
+        if (taskMatch) {
+            const indent = taskMatch[1];
+            const checked = taskMatch[2] !== ' ';
+            const label = taskMatch[3];
+            out.push(indent + (checked ? chalk.green('✓') : chalk.dim('○')) + ' ' + renderInline(label));
             continue;
         }
         // Bullet points
@@ -50,6 +111,12 @@ export function renderMarkdown(text) {
             out.push(line.replace(/^(\s*)[-*] /, '$1• ').replace(/^(\s*• )(.*)/, (_, prefix, rest) => prefix + renderInline(rest)));
             continue;
         }
+        // Numbered lists: 1. , 2. , etc.
+        const numMatch = line.match(/^(\s*)(\d+)\. (.*)/);
+        if (numMatch) {
+            out.push(numMatch[1] + chalk.dim(numMatch[2] + '.') + ' ' + renderInline(numMatch[3]));
+            continue;
+        }
         // Table rows — render with dim separators
         if (line.includes('|') && line.trim().startsWith('|')) {
             // Separator row (|---|---|)
@@ -57,7 +124,7 @@ export function renderMarkdown(text) {
                 out.push(chalk.dim(line));
                 continue;
             }
-            // Data row — bold headers in first row, dim pipes
+            // Data row — dim pipes
             const cells = line.split('|').map(c => c.trim()).filter(Boolean);
             const formatted = cells.map(c => renderInline(c)).join(chalk.dim(' │ '));
             out.push(chalk.dim('│ ') + formatted + chalk.dim(' │'));
@@ -69,7 +136,7 @@ export function renderMarkdown(text) {
     return out.join('\n');
 }
 /**
- * Render inline markdown formatting (bold, italic, code, links).
+ * Render inline markdown formatting (bold, italic, code, links, strikethrough).
  */
 function renderInline(text) {
     return text

package/dist/ui/model-picker.js

@@ -54,7 +54,7 @@ export const MODEL_SHORTCUTS = {
     // Others
     minimax: 'minimax/minimax-m2.7',
     glm: 'zai/glm-5.1',
-    'glm-turbo': 'zai/glm-5.1-turbo',
+    'glm-turbo': 'zai/glm-5-turbo',
     'glm5': 'zai/glm-5.1',
     kimi: 'moonshot/kimi-k2.5',
 };
@@ -79,7 +79,7 @@ export const PICKER_CATEGORIES = [
         category: '🔥 Promo (flat $0.001/call)',
         models: [
             { id: 'zai/glm-5.1', shortcut: 'glm', label: 'GLM-5.1', price: '$0.001/call', highlight: true },
-            { id: 'zai/glm-5.1-turbo', shortcut: 'glm-turbo', label: 'GLM-5.1 Turbo', price: '$0.001/call', highlight: true },
+            { id: 'zai/glm-5-turbo', shortcut: 'glm-turbo', label: 'GLM-5 Turbo', price: '$0.001/call', highlight: true },
         ],
     },
     {

package/dist/ui/mouse.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Mouse event support for Ink terminal UI.
+ * Enables SGR extended mouse tracking (DECSET 1000+1006) and parses events from stdin.
+ * Lightweight — only handles clicks, not drag/hover/selection.
+ */
+import { EventEmitter } from 'node:events';
+export interface MouseEvent {
+    button: 'left' | 'middle' | 'right' | 'wheel-up' | 'wheel-down';
+    action: 'press' | 'release';
+    col: number;
+    row: number;
+}
+declare class MouseManager extends EventEmitter {
+    private enabled;
+    private stdinListener;
+    /**
+     * Enable mouse tracking. Call once on app startup.
+     * Returns cleanup function to call on unmount.
+     */
+    enable(): () => void;
+    /**
+     * Disable mouse tracking and clean up.
+     */
+    disable(): void;
+    isEnabled(): boolean;
+}
+/** Singleton mouse manager. */
+export declare const mouse: MouseManager;
+export {};