@blockrun/franklin 3.3.0 → 3.3.1

package/dist/tools/webfetch.js

@@ -9,27 +9,30 @@ const MAX_BODY_BYTES = 256 * 1024; // 256KB
 const CACHE_TTL_MS = 15 * 60 * 1000;
 const MAX_CACHE_ENTRIES = 50;
 const fetchCache = new Map();
-function getCached(url) {
-    const entry = fetchCache.get(url);
+function cacheKey(url, maxLength) {
+    return `${url}::${maxLength}`;
+}
+function getCached(key) {
+    const entry = fetchCache.get(key);
     if (!entry)
         return null;
     if (Date.now() > entry.expiresAt) {
-        fetchCache.delete(url);
+        fetchCache.delete(key);
         return null;
     }
     return entry.output;
 }
-function setCached(url, output) {
+function setCached(key, output) {
     // Evict oldest entry if at capacity
     if (fetchCache.size >= MAX_CACHE_ENTRIES) {
         const firstKey = fetchCache.keys().next().value;
         if (firstKey)
             fetchCache.delete(firstKey);
     }
-    fetchCache.set(url, { output, expiresAt: Date.now() + CACHE_TTL_MS });
+    fetchCache.set(key, { output, expiresAt: Date.now() + CACHE_TTL_MS });
 }
 // ─── Execute ────────────────────────────────────────────────────────────────
-async function execute(input, _ctx) {
+async function execute(input, ctx) {
     const { url, max_length } = input;
     if (!url) {
         return { output: 'Error: url is required', isError: true };
@@ -45,13 +48,17 @@ async function execute(input, _ctx) {
     if (!['http:', 'https:'].includes(parsed.protocol)) {
         return { output: `Error: only http/https URLs are supported`, isError: true };
     }
+    const maxLen = Math.min(max_length ?? MAX_BODY_BYTES, MAX_BODY_BYTES);
+    const key = cacheKey(url, maxLen);
     // Check cache first
-    const cached = getCached(url);
+    const cached = getCached(key);
     if (cached) {
         return { output: cached + '\n\n(cached)' };
     }
     const controller = new AbortController();
     const timeout = setTimeout(() => controller.abort(), 30_000);
+    const onAbort = () => controller.abort();
+    ctx.abortSignal.addEventListener('abort', onAbort, { once: true });
     try {
         const response = await fetch(url, {
             signal: controller.signal,
@@ -68,7 +75,6 @@ async function execute(input, _ctx) {
             };
         }
         const contentType = response.headers.get('content-type') || '';
-        const maxLen = Math.min(max_length ?? MAX_BODY_BYTES, MAX_BODY_BYTES);
         // Read body with size limit
         const reader = response.body?.getReader();
         if (!reader) {
@@ -106,11 +112,14 @@ async function execute(input, _ctx) {
             output += '\n\n... (content truncated)';
         }
         // Cache successful responses
-        setCached(url, output);
+        setCached(key, output);
         return { output };
     }
     catch (err) {
         const msg = err instanceof Error ? err.message : String(err);
+        if (ctx.abortSignal.aborted) {
+            return { output: `Error: request aborted for ${url}`, isError: true };
+        }
         if (msg.includes('abort')) {
             return { output: `Error: request timed out after 30s for ${url}`, isError: true };
         }
@@ -118,6 +127,7 @@ async function execute(input, _ctx) {
     }
     finally {
         clearTimeout(timeout);
+        ctx.abortSignal.removeEventListener('abort', onAbort);
     }
 }
 function stripHtml(html) {

package/dist/tools/write.js

@@ -4,6 +4,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import os from 'node:os';
+import { partiallyReadFiles } from './read.js';
 function withTrailingSep(value) {
     return value.endsWith(path.sep) ? value : value + path.sep;
 }
@@ -84,6 +85,7 @@ async function execute(input, ctx) {
         fs.mkdirSync(parentDir, { recursive: true });
         const existed = fs.existsSync(resolved);
         fs.writeFileSync(resolved, content, 'utf-8');
+        partiallyReadFiles.delete(resolved);
         const lineCount = content.split('\n').length;
         const byteCount = Buffer.byteLength(content, 'utf-8');
         const sizeStr = byteCount >= 1024 ? `${(byteCount / 1024).toFixed(1)}KB` : `${byteCount}B`;

package/dist/ui/app.js

@@ -3,21 +3,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * RunCode ink-based terminal UI.
  * Real-time streaming, thinking animation, tool progress, slash commands.
  */
+import chalk from 'chalk';
 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 { renderMarkdown } from './markdown.js';
 import { resolveModel, PICKER_CATEGORIES, PICKER_MODELS_FLAT, } from './model-picker.js';
 import { estimateCost } from '../pricing.js';
 // ─── Full-width input box ──────────────────────────────────────────────────
-function InputBox({ input, setInput, onSubmit, model, balance, sessionCost, queued, focused, busy }) {
+function InputBox({ input, setInput, onSubmit, model, balance, sessionCost, queued, queuedCount, focused, busy }) {
     const { stdout } = useStdout();
     const cols = stdout?.columns ?? 80;
     const innerWidth = Math.min(Math.max(30, cols - 4), cols - 2);
     const placeholder = busy
-        ? (queued ? `⏎ queued: ${queued.slice(0, 40)}` : 'Working...')
+        ? (queued
+            ? `⏎ ${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)] }) : '', '  ·  esc to abort/quit'] }) })] }));
+    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)] }) : '', (queuedCount ?? 0) > 0 ? _jsxs(Text, { color: "cyan", children: ["  \u00B7  ", queuedCount, " queued"] }) : null, '  ·  esc to abort/quit'] }) })] }));
 }
 function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain, startWithPicker, onSubmit, onModelChange, onAbort, onExit, }) {
     const { exit } = useApp();
@@ -37,6 +41,7 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
     const [mode, setMode] = useState(startWithPicker ? 'model-picker' : 'input');
     const [pickerIdx, setPickerIdx] = useState(0);
     const [statusMsg, setStatusMsg] = useState('');
+    const [statusTone, setStatusTone] = useState('success');
     const [turnTokens, setTurnTokens] = useState({ input: 0, output: 0, calls: 0 });
     const [totalCost, setTotalCost] = useState(0);
     const [showHelp, setShowHelp] = useState(false);
@@ -59,26 +64,50 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
     const [permissionRequest, setPermissionRequest] = useState(null);
     const [askUserRequest, setAskUserRequest] = useState(null);
     const [askUserInput, setAskUserInput] = useState('');
-    // Message queued while agent is busy — auto-submitted when turn completes
-    const [queuedInput, setQueuedInput] = useState('');
+    // Messages queued while agent is busy — auto-submitted FIFO when turns complete.
+    const [queuedInputs, setQueuedInputs] = useState([]);
     const turnDoneCallbackRef = useRef(null);
     // 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 });
     const totalCostRef = useRef(0);
     const turnCostRef = useRef(0); // per-turn cost (reset each turn)
-    const queuedInputRef = useRef('');
+    const queuedInputsRef = useRef([]);
     // Keep refs in sync so memoized event handlers can read current values
     streamTextRef.current = streamText;
     turnTokensRef.current = turnTokens;
     totalCostRef.current = totalCost;
-    queuedInputRef.current = queuedInput;
+    queuedInputsRef.current = queuedInputs;
     costAtLastFetchRef.current = costAtLastFetch;
     baseBalanceNumRef.current = baseBalanceNum;
     // Compute live balance = fetchedBalance - spend_since_last_fetch
     const liveBalance = baseBalanceNum !== null
         ? `$${Math.max(0, baseBalanceNum - (totalCost - costAtLastFetch)).toFixed(2)} USDC`
         : balance;
+    const showStatus = useCallback((text, tone = 'success', durationMs = 3000) => {
+        setStatusTone(tone);
+        setStatusMsg(text);
+        if (durationMs > 0) {
+            setTimeout(() => setStatusMsg(''), durationMs);
+        }
+    }, []);
+    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,
+            }]);
+        const allLines = text.split('\n');
+        if (allLines.length > 20) {
+            setResponsePreview('  ↑ scroll to see full reply\n' + allLines.slice(-20).join('\n'));
+        }
+        else {
+            setResponsePreview('');
+        }
+    }, []);
     // Permission dialog key handler — captures y/n/a when dialog is visible.
     // ink 6.x: useInput handlers all fire regardless of TextInput focus prop,
     // so we handle here AND block TextInput onChange (see focused prop below).
@@ -110,11 +139,10 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
         // Escape during generation → abort current turn (skip if permission dialog open)
         if (key.escape && !ready && !permissionRequest) {
             onAbort();
-            setStatusMsg('Aborted');
+            showStatus('Aborted', 'warning', 3000);
             setReady(true);
             setWaiting(false);
             setThinking(false);
-            setTimeout(() => setStatusMsg(''), 3000);
             return;
         }
         // Esc to quit (only when input is empty and in input mode)
@@ -134,10 +162,9 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
             const selected = PICKER_MODELS_FLAT[pickerIdx];
             setCurrentModel(selected.id);
             onModelChange(selected.id);
-            setStatusMsg(`Model → ${selected.label}`);
+            showStatus(`Model → ${selected.label}`, 'success', 3000);
             setMode('input');
             setReady(true);
-            setTimeout(() => setStatusMsg(''), 3000);
         }
         else if (key.escape) {
             setMode('input');
@@ -169,8 +196,9 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
             return;
         // If agent is busy, queue the message — it will be auto-submitted when the turn finishes
         if (!ready) {
-            setQueuedInput(trimmed);
+            setQueuedInputs(prev => [...prev, trimmed]);
             setInput('');
+            showStatus(`Queued message (${queuedInputsRef.current.length + 1} pending)`, 'warning', 1500);
             return;
         }
         // Bare exit/quit (no slash needed)
@@ -199,8 +227,7 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                         const resolved = resolveModel(parts[1]);
                         setCurrentModel(resolved);
                         onModelChange(resolved);
-                        setStatusMsg(`Model → ${resolved}`);
-                        setTimeout(() => setStatusMsg(''), 3000);
+                        showStatus(`Model → ${resolved}`, 'success', 3000);
                     }
                     else {
                         const idx = PICKER_MODELS_FLAT.findIndex(m => m.id === currentModel);
@@ -215,8 +242,7 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                     return;
                 case '/cost':
                 case '/usage':
-                    setStatusMsg(`Cost: $${totalCost.toFixed(4)} this session`);
-                    setTimeout(() => setStatusMsg(''), 4000);
+                    showStatus(`Cost: $${totalCost.toFixed(4)} this session`, 'success', 4000);
                     return;
                 case '/help':
                     setShowHelp(true);
@@ -234,8 +260,7 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                     return;
                 case '/retry':
                     if (!lastPrompt) {
-                        setStatusMsg('No previous prompt to retry');
-                        setTimeout(() => setStatusMsg(''), 3000);
+                        showStatus('No previous prompt to retry', 'warning', 3000);
                         return;
                     }
                     setStreamText('');
@@ -261,6 +286,13 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
             }
         }
         // ── Normal prompt ──
+        // Show user message in scrollback so the conversation is readable
+        setCommittedResponses(rs => [...rs, {
+                key: `user-${Date.now()}`,
+                text: chalk.cyan('❯') + ' ' + trimmed,
+                tokens: { input: 0, output: 0, calls: 0 },
+                cost: 0,
+            }]);
         setResponsePreview('');
         setLastPrompt(trimmed);
         setInputHistory(prev => [...prev.slice(-49), trimmed]); // Keep last 50
@@ -279,7 +311,7 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
         setTurnTokens({ input: 0, output: 0, calls: 0 });
         turnCostRef.current = 0;
         onSubmit(trimmed);
-    }, [ready, currentModel, totalCost, onSubmit, onModelChange, onAbort, onExit, exit, lastPrompt, inputHistory]);
+    }, [ready, currentModel, totalCost, onSubmit, onModelChange, onAbort, onExit, exit, lastPrompt, inputHistory, showStatus]);
     // Expose event handler, balance updater, and permission bridge
     useEffect(() => {
         globalThis.__runcode_ui = {
@@ -387,27 +419,24 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                         break;
                     }
                     case 'turn_done': {
-                        // Commit full response to Static immediately — enters terminal scrollback like Claude Code.
-                        // Also keep a short preview (last 5 lines) visible in the dynamic area.
                         const text = streamTextRef.current;
                         if (text.trim()) {
-                            setCommittedResponses(rs => [...rs, {
-                                    key: String(Date.now()),
-                                    text,
-                                    tokens: turnTokensRef.current,
-                                    cost: turnCostRef.current, // per-turn cost, not cumulative
-                                }]);
-                            // Preview = only show when response is long enough to scroll off screen
-                            const allLines = text.split('\n');
-                            if (allLines.length > 20) {
-                                setResponsePreview('  ↑ scroll to see full reply\n' + allLines.slice(-20).join('\n'));
-                            }
-                            else {
-                                // Short response: already fully visible in scrollback, no preview needed
-                                setResponsePreview('');
-                            }
+                            commitResponse(text, turnTokensRef.current, turnCostRef.current);
                             setStreamText('');
                         }
+                        if (event.reason === 'error' && event.error) {
+                            commitResponse(`Error: ${event.error}`, turnTokensRef.current, turnCostRef.current);
+                            showStatus('Turn failed', 'error', 5000);
+                        }
+                        else if (event.reason === 'aborted') {
+                            showStatus('Aborted', 'warning', 3000);
+                        }
+                        else if (event.reason === 'max_turns') {
+                            showStatus('Stopped after reaching max turns', 'warning', 5000);
+                        }
+                        else {
+                            setStatusMsg('');
+                        }
                         setReady(true);
                         setWaiting(false);
                         setThinking(false);
@@ -417,10 +446,10 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                         // Ring the terminal bell so the user knows the AI finished
                         // (shows notification badge in iTerm2/Terminal.app when tabbed away)
                         process.stderr.write('\x07');
-                        // Auto-submit any message queued while agent was busy
-                        const queued = queuedInputRef.current;
+                        // Auto-submit any queued message while agent was busy
+                        const queued = queuedInputsRef.current[0];
                         if (queued) {
-                            setQueuedInput('');
+                            setQueuedInputs((prev) => prev.slice(1));
                             // Small delay so React can flush the ready=true state first
                             setTimeout(() => {
                                 const fn = globalThis.__runcode_submit;
@@ -440,7 +469,7 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
             delete globalThis.__runcode_ui;
             delete globalThis.__runcode_submit;
         };
-    }, [handleSubmit]);
+    }, [handleSubmit, commitResponse, showStatus]);
     // ── Render ──
     // Note: the tree is ALWAYS the same shape across mode changes. Static
     // components (completedTools, committedResponses) stay mounted so Ink
@@ -448,9 +477,9 @@ 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: "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: "/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 display"] }), _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
+    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: r.text }), (r.tokens.input > 0 || r.tokens.output > 0) && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { dimColor: true, children: [r.tokens.calls > 0 && r.tokens.input === 0
+                        : _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.tokens.calls > 0 && r.tokens.input === 0
                                         ? `${r.tokens.calls} calls`
                                         : `${r.tokens.input.toLocaleString()} in / ${r.tokens.output.toLocaleString()} out${r.tokens.calls > 0 ? ` / ${r.tokens.calls} calls` : ''}`, r.cost > 0 ? `  ·  $${r.cost.toFixed(4)}` : ''] }) }))] }, 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)';
@@ -458,7 +487,7 @@ function RunCodeApp({ initialModel, workDir, walletAddress, walletBalance, chain
                                     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] }) : null, _jsx(Text, { dimColor: true, children: (() => { const s = Math.round((Date.now() - tool.startTime) / 1000); return s > 0 ? ` ${s}s` : ''; })() })] }), tool.liveOutput ? (_jsxs(Text, { dimColor: true, children: ["  \u2514 ", tool.liveOutput] })) : null] }, id))), thinking && (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsxs(Text, { color: "magenta", children: ["  ", _jsx(Spinner, { type: "dots" }), " thinking..."] }), thinkingText && (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  ", thinkingText.split('\n').pop()?.slice(0, 80)] }))] })), waiting && !thinking && tools.size === 0 && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: "yellow", children: ["  ", _jsx(Spinner, { type: "dots" }), " ", _jsx(Text, { dimColor: true, children: currentModel })] }) })), streamText && (_jsx(Box, { marginTop: 0, marginBottom: 0, children: _jsx(Text, { wrap: "wrap", children: streamText }) })), responsePreview && !streamText && (_jsx(Box, { flexDirection: "column", marginBottom: 0, children: _jsx(Text, { wrap: "wrap", children: responsePreview }) })), inPicker && (() => {
+                                }, 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] }) : null, _jsx(Text, { dimColor: true, children: (() => { const s = Math.round((Date.now() - tool.startTime) / 1000); return s > 0 ? ` ${s}s` : ''; })() })] }), tool.liveOutput ? (_jsxs(Text, { dimColor: true, children: ["  \u2514 ", tool.liveOutput] })) : null] }, id))), thinking && (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsxs(Text, { color: "magenta", children: ["  ", _jsx(Spinner, { type: "dots" }), " thinking..."] }), thinkingText && (_jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["  ", thinkingText.split('\n').pop()?.slice(0, 80)] }))] })), waiting && !thinking && tools.size === 0 && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { color: "yellow", children: ["  ", _jsx(Spinner, { type: "dots" }), " ", _jsx(Text, { dimColor: true, children: currentModel })] }) })), 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++;
@@ -467,7 +496,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: queuedInput || undefined, focused: !permissionRequest && !askUserRequest, busy: !askUserRequest && (waiting || thinking || tools.size > 0) }))] }));
+            })(), !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) }))] }));
 }
 export function launchInkUI(opts) {
     let resolveInput = null;

package/dist/ui/markdown.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Markdown renderer for terminal output.
+ * Converts markdown to ANSI-formatted text using chalk.
+ * Shared between Ink UI and basic terminal UI.
+ */
+/**
+ * Render a complete markdown string to ANSI-colored terminal output.
+ */
+export declare function renderMarkdown(text: string): string;

package/dist/ui/markdown.js

@@ -0,0 +1,86 @@
+/**
+ * Markdown renderer for terminal output.
+ * Converts markdown to ANSI-formatted text using chalk.
+ * Shared between Ink UI and basic terminal UI.
+ */
+import chalk from 'chalk';
+/**
+ * Render a complete markdown string to ANSI-colored terminal output.
+ */
+export function renderMarkdown(text) {
+    const lines = text.split('\n');
+    const out = [];
+    let inCodeBlock = false;
+    for (const line of lines) {
+        // Code block toggle
+        if (line.startsWith('```')) {
+            inCodeBlock = !inCodeBlock;
+            out.push(chalk.dim(line));
+            continue;
+        }
+        if (inCodeBlock) {
+            out.push(chalk.cyan(line));
+            continue;
+        }
+        // Headers
+        if (line.startsWith('### ')) {
+            out.push(chalk.bold(line.slice(4)));
+            continue;
+        }
+        if (line.startsWith('## ')) {
+            out.push(chalk.bold.underline(line.slice(3)));
+            continue;
+        }
+        if (line.startsWith('# ')) {
+            out.push(chalk.bold.underline(line.slice(2)));
+            continue;
+        }
+        // Horizontal rule
+        if (/^[-=─]{3,}$/.test(line.trim())) {
+            out.push(chalk.dim('─'.repeat(40)));
+            continue;
+        }
+        // Blockquotes
+        if (line.startsWith('> ')) {
+            out.push(chalk.dim('│ ') + chalk.italic(renderInline(line.slice(2))));
+            continue;
+        }
+        // Bullet points
+        if (line.match(/^(\s*)[-*] /)) {
+            out.push(line.replace(/^(\s*)[-*] /, '$1• ').replace(/^(\s*• )(.*)/, (_, prefix, rest) => prefix + renderInline(rest)));
+            continue;
+        }
+        // Table rows — render with dim separators
+        if (line.includes('|') && line.trim().startsWith('|')) {
+            // Separator row (|---|---|)
+            if (/^\s*\|[\s-:]+\|/.test(line) && !line.match(/[a-zA-Z]/)) {
+                out.push(chalk.dim(line));
+                continue;
+            }
+            // Data row — bold headers in first 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(' │'));
+            continue;
+        }
+        // Everything else — inline formatting
+        out.push(renderInline(line));
+    }
+    return out.join('\n');
+}
+/**
+ * Render inline markdown formatting (bold, italic, code, links).
+ */
+function renderInline(text) {
+    return text
+        // Inline code (process first to protect contents from other formatting)
+        .replace(/`([^`]+)`/g, (_, t) => chalk.cyan(t))
+        // Bold
+        .replace(/\*\*([^*]+)\*\*/g, (_, t) => chalk.bold(t))
+        // Italic
+        .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, (_, t) => chalk.italic(t))
+        // Strikethrough
+        .replace(/~~([^~]+)~~/g, (_, t) => chalk.strikethrough(t))
+        // Links — show label in blue, URL dimmed
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) => chalk.blue.underline(label) + chalk.dim(` (${url})`));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockrun/franklin",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "Franklin — The AI agent with a wallet. Spends USDC autonomously to get real work done. Pay per action, no subscriptions.",
   "type": "module",
   "exports": {