protoagent 0.1.6 → 0.1.8

package/dist/App.js

@@ -1,15 +1,65 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Main UI component — the heart of ProtoAgent's terminal interface.
- *
- * Renders the chat loop, tool call feedback, approval prompts,
- * and cost/usage info. All heavy logic lives in `agentic-loop.ts`;
- * this file is purely presentation + state wiring.
- */
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { Box, Text, useApp, useInput, useStdout } from 'ink';
+Main UI component — the heart of ProtoAgent's terminal interface.
+
+Renders the chat loop, tool call feedback, approval prompts,
+and cost/usage info. All heavy logic lives in `agentic-loop.ts`;
+this file is purely presentation + state wiring.
+
+Here's how the terminal UI is laid out (showcasing all options at once for demonstration, but in practice many elements are conditional on state):
+┌─────────────────────────────────────────┐
+│  ProtoAgent  (BigText logo)             │  static, rendered once (printBanner)
+│  Model: Anthropic / claude-3-5 | Sess.. │  static header (printRuntimeHeader)
+│  Debug logs: /path/to/log               │  static, if --log-level set
+├─────────────────────────────────────────┤
+│                                         │
+│  [System Prompt ▸ collapsed]            │  archived (memoized)
+│                                         │
+│  > user message                         │  archived (memoized)
+│                                         │
+│  assistant reply text                   │  archived (memoized)
+│                                         │
+│  [tool_name ▸ collapsed]                │  archived (memoized)
+│                                         │
+│  > user message                         │  archived (memoized)
+│                                         │
+├ ─ ─ ─ ─ ─ ─ ─ live boundary ─ ─ ─ ─ ─ ─ ┤
+│                                         │
+│  assistant streaming text...            │  live (re-renders, ~50ms debounce)
+│                                         │
+│  [tool_name ▸ collapsed]                │  live (re-renders on tool_result)
+│                                         │
+│  Thinking...                            │  live, only if last msg is user
+│                                         │
+│ ╭─ Approval Required ─────────────────╮ │  live, only when pending approval
+│ │  description / detail               │ │
+│ │  ○ Approve once                     │ │
+│ │  ○ Approve for session              │ │
+│ │  ○ Reject                           │ │
+│ ╰─────────────────────────────────────╯ │
+│                                         │
+│  [Error: message]                       │  live, inline thread errors
+│                                         │
+├─────────────────────────────────────────┤
+│  tokens: 1234↓ 56↑ | ctx: 12% | $0.02   │  static-ish, updates after each turn
+├─────────────────────────────────────────┤
+│  /clear — Clear conversation...         │  dynamic, shown when typing /
+│  /quit  — Exit ProtoAgent               │
+├─────────────────────────────────────────┤
+│  ⠹ Running read_file...                 │  dynamic, shown while loading
+├─────────────────────────────────────────┤
+│ ╭─────────────────────────────────────╮ │
+│ │ > [text input cursor              ] │ │  always visible when initialized
+│ ╰─────────────────────────────────────╯ │
+├─────────────────────────────────────────┤
+│  Session saved. Resume with:            │  one-shot, shown on /quit
+│  protoagent --session abc12345          │
+└─────────────────────────────────────────┘
+*/
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Box, Text, Static, useApp, useInput, useStdout } from 'ink';
+import { LeftBar } from './components/LeftBar.js';
 import { TextInput, Select, PasswordInput } from '@inkjs/ui';
-import BigText from 'ink-big-text';
 import { OpenAI } from 'openai';
 import { readConfig, writeConfig, resolveApiKey } from './config.js';
 import { loadRuntimeConfig } from './runtime-config.js';
@@ -21,117 +71,105 @@ import { createSession, ensureSystemPromptAtTop, saveSession, loadSession, gener
 import { clearTodos, getTodosForSession, setTodosForSession } from './tools/todo.js';
 import { initializeMcp, closeMcp } from './mcp.js';
 import { generateSystemPrompt } from './system-prompt.js';
-import { CollapsibleBox } from './components/CollapsibleBox.js';
-import { ConsolidatedToolMessage } from './components/ConsolidatedToolMessage.js';
-import { FormattedMessage } from './components/FormattedMessage.js';
-function renderMessageList(messagesToRender, allMessages, expandedMessages, startIndex = 0, deferTables = false) {
-    const rendered = [];
-    const skippedIndices = new Set();
-    messagesToRender.forEach((msg, localIndex) => {
-        if (skippedIndices.has(localIndex)) {
-            return;
-        }
-        const index = startIndex + localIndex;
-        const msgAny = msg;
-        const isToolCall = msg.role === 'assistant' && msgAny.tool_calls && msgAny.tool_calls.length > 0;
-        const displayContent = 'content' in msg && typeof msg.content === 'string' ? msg.content : null;
-        const normalizedContent = normalizeMessageSpacing(displayContent || '');
-        const isFirstSystemMessage = msg.role === 'system' && !allMessages.slice(0, index).some((message) => message.role === 'system');
-        const previousMessage = index > 0 ? allMessages[index - 1] : null;
-        const followsToolMessage = previousMessage?.role === 'tool';
-        const currentSpeaker = getVisualSpeaker(msg);
-        const previousSpeaker = getVisualSpeaker(previousMessage);
-        const isConversationTurn = currentSpeaker === 'user' || currentSpeaker === 'assistant';
-        const previousWasConversationTurn = previousSpeaker === 'user' || previousSpeaker === 'assistant';
-        const speakerChanged = previousSpeaker !== currentSpeaker;
-        // Determine if we need a blank-line spacer above this message.
-        // At most one spacer is added per message to avoid doubling.
-        const needsSpacer = isFirstSystemMessage ||
-            (isConversationTurn && previousWasConversationTurn && speakerChanged) ||
-            followsToolMessage ||
-            (isToolCall && previousMessage != null);
-        if (needsSpacer) {
-            rendered.push(_jsx(Text, { children: " " }, `spacer-${index}`));
-        }
-        if (msg.role === 'user') {
-            rendered.push(_jsx(Box, { flexDirection: "column", children: _jsxs(Text, { children: [_jsx(Text, { color: "green", bold: true, children: '> ' }), _jsx(Text, { children: displayContent })] }) }, index));
-            return;
-        }
-        if (msg.role === 'system') {
-            rendered.push(_jsx(CollapsibleBox, { title: "System Prompt", content: displayContent || '', titleColor: "green", dimColor: false, maxPreviewLines: 3, expanded: expandedMessages.has(index) }, index));
-            return;
-        }
-        if (isToolCall) {
-            if (normalizedContent.length > 0) {
-                rendered.push(_jsx(Box, { flexDirection: "column", children: _jsx(FormattedMessage, { content: normalizedContent, deferTables: deferTables }) }, `${index}-text`));
-            }
-            const toolCalls = msgAny.tool_calls.map((tc) => ({
-                id: tc.id,
-                name: tc.function?.name || 'tool',
-            }));
-            const toolResults = new Map();
-            let nextLocalIndex = localIndex + 1;
-            for (const toolCall of toolCalls) {
-                if (nextLocalIndex < messagesToRender.length) {
-                    const nextMsg = messagesToRender[nextLocalIndex];
-                    if (nextMsg.role === 'tool' && nextMsg.tool_call_id === toolCall.id) {
-                        toolResults.set(toolCall.id, {
-                            content: normalizeMessageSpacing(nextMsg.content || ''),
-                            name: nextMsg.name || toolCall.name,
-                        });
-                        skippedIndices.add(nextLocalIndex);
-                        nextLocalIndex++;
-                    }
-                }
-            }
-            rendered.push(_jsx(ConsolidatedToolMessage, { toolCalls: toolCalls, toolResults: toolResults, expanded: expandedMessages.has(index) }, index));
-            return;
-        }
-        if (msg.role === 'tool') {
-            rendered.push(_jsx(CollapsibleBox, { title: `${msgAny.name || 'tool'} result`, content: normalizedContent, dimColor: true, maxPreviewLines: 3, expanded: expandedMessages.has(index) }, index));
-            return;
-        }
-        rendered.push(_jsx(Box, { flexDirection: "column", children: _jsx(FormattedMessage, { content: normalizedContent, deferTables: deferTables }) }, index));
-    });
-    return rendered;
+// ─── Scrollback helpers ───
+// These functions append text to the permanent scrollback buffer via the
+// <Static> component. Ink flushes new Static items within its own render
+// cycle, so there are no timing issues with write()/log-update.
+function printBanner(addStatic) {
+    const green = '\x1b[38;2;9;164;105m';
+    const reset = '\x1b[0m';
+    addStatic([
+        '',
+        `${green}█▀█ █▀█ █▀█ ▀█▀ █▀█ ▄▀█ █▀▀ █▀▀ █▄ █ ▀█▀${reset}`,
+        `${green}█▀▀ █▀▄ █▄█  █  █▄█ █▀█ █▄█ ██▄ █ ▀█  █${reset}`,
+        '',
+    ].join('\n'));
 }
-function normalizeMessageSpacing(message) {
-    const normalized = message.replace(/\r\n/g, '\n');
+function printRuntimeHeader(addStatic, config, session, logFilePath, dangerouslyAcceptAll) {
+    const provider = getProvider(config.provider);
+    const grey = '\x1b[90m';
+    const reset = '\x1b[0m';
+    let line = `${grey}Model: ${provider?.name || config.provider} / ${config.model}`;
+    if (dangerouslyAcceptAll)
+        line += ' (auto-approve all)';
+    if (session)
+        line += ` | Session: ${session.id.slice(0, 8)}`;
+    line += reset;
+    let text = `${line}\n`;
+    if (logFilePath) {
+        text += `${grey}Debug logs: ${logFilePath}${reset}\n`;
+    }
+    text += '\n';
+    addStatic(text);
+}
+function normalizeTranscriptText(text) {
+    const normalized = text.replace(/\r\n/g, '\n');
     const lines = normalized.split('\n');
-    while (lines.length > 0 && lines[0].trim() === '') {
+    while (lines.length > 0 && lines[0].trim() === '')
         lines.shift();
-    }
-    while (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+    while (lines.length > 0 && lines[lines.length - 1].trim() === '')
         lines.pop();
-    }
     return lines.join('\n');
 }
-function getVisualSpeaker(message) {
-    if (!message)
-        return null;
-    if (message.role === 'tool')
-        return 'assistant';
-    if (message.role === 'user' || message.role === 'assistant' || message.role === 'system') {
-        return message.role;
+function printMessageToScrollback(addStatic, role, text) {
+    const normalized = normalizeTranscriptText(text);
+    if (!normalized) {
+        addStatic('\n');
+        return;
     }
-    return null;
+    if (role === 'user') {
+        addStatic(`\x1b[32m>\x1b[0m ${normalized}\n`);
+        return;
+    }
+    addStatic(`${normalized}\n\n`);
+}
+function replayMessagesToScrollback(addStatic, messages) {
+    for (const message of messages) {
+        const msgAny = message;
+        if (message.role === 'system')
+            continue;
+        if (message.role === 'user' && typeof message.content === 'string') {
+            printMessageToScrollback(addStatic, 'user', message.content);
+            continue;
+        }
+        if (message.role === 'assistant' && typeof message.content === 'string' && message.content.trim().length > 0) {
+            printMessageToScrollback(addStatic, 'assistant', message.content);
+            continue;
+        }
+        if (message.role === 'tool') {
+            const toolName = msgAny.name || 'tool';
+            const compact = String(msgAny.content || '').replace(/\s+/g, ' ').trim().slice(0, 180);
+            addStatic(`\x1b[2m▶ ${toolName}: ${compact}\x1b[0m\n`);
+        }
+    }
+    if (messages.length > 0) {
+        addStatic('\n');
+    }
+}
+// Returns only the last N displayable lines of text so the live streaming box
+// never grows taller than the terminal, preventing Ink's clearTerminal wipe.
+const STREAMING_RESERVED_ROWS = 3; // usage bar + spinner + input line
+function clipToRows(text, terminalRows) {
+    const maxLines = Math.max(1, terminalRows - STREAMING_RESERVED_ROWS);
+    const lines = text.split('\n');
+    if (lines.length <= maxLines)
+        return text;
+    return lines.slice(lines.length - maxLines).join('\n');
 }
 // ─── Available slash commands ───
 const SLASH_COMMANDS = [
     { name: '/clear', description: 'Clear conversation and start fresh' },
-    { name: '/collapse', description: 'Collapse all long messages' },
-    { name: '/expand', description: 'Expand all collapsed messages' },
     { name: '/help', description: 'Show all available commands' },
     { name: '/quit', description: 'Exit ProtoAgent' },
+    { name: '/exit', description: 'Alias for /quit' },
 ];
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const HELP_TEXT = [
     'Commands:',
-    '  /clear    - Clear conversation and start fresh',
-    '  /collapse - Collapse all long messages',
-    '  /expand   - Expand all collapsed messages',
-    '  /help     - Show this help',
-    '  /quit     - Exit ProtoAgent',
+    '  /clear  - Clear conversation and start fresh',
+    '  /help   - Show this help',
+    '  /quit   - Exit ProtoAgent',
+    '  /exit   - Alias for /quit',
 ].join('\n');
 function buildClient(config) {
     const provider = getProvider(config.provider);
@@ -194,13 +232,13 @@ const ApprovalPrompt = ({ request, onRespond }) => {
         { label: sessionApprovalLabel, value: 'approve_session' },
         { label: 'Reject', value: 'reject' },
     ];
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, marginY: 1, children: [_jsx(Text, { color: "green", bold: true, children: "Approval Required" }), _jsx(Text, { children: request.description }), request.detail && (_jsx(Text, { dimColor: true, children: request.detail.length > 200 ? request.detail.slice(0, 200) + '...' : request.detail })), _jsx(Box, { marginTop: 1, children: _jsx(Select, { options: items.map((item) => ({ value: item.value, label: item.label })), onChange: (value) => onRespond(value) }) })] }));
+    return (_jsxs(LeftBar, { color: "green", marginTop: 1, marginBottom: 1, children: [_jsx(Text, { color: "green", bold: true, children: "Approval Required" }), _jsx(Text, { children: request.description }), request.detail && (_jsx(Text, { dimColor: true, children: request.detail.length > 200 ? request.detail.slice(0, 200) + '...' : request.detail })), _jsx(Box, { marginTop: 1, children: _jsx(Select, { options: items.map((item) => ({ value: item.value, label: item.label })), onChange: (value) => onRespond(value) }) })] }));
 };
 /** Cost/usage display in the status bar. */
 const UsageDisplay = ({ usage, totalCost }) => {
     if (!usage && totalCost === 0)
         return null;
-    return (_jsxs(Box, { marginTop: 1, children: [usage && (_jsxs(Text, { dimColor: true, children: ["tokens: ", usage.inputTokens, "\u2193 ", usage.outputTokens, "\u2191 | ctx: ", usage.contextPercent.toFixed(0), "%"] })), totalCost > 0 && (_jsxs(Text, { dimColor: true, children: [" | cost: $", totalCost.toFixed(4)] }))] }));
+    return (_jsxs(Box, { marginTop: 1, children: [usage && (_jsxs(Box, { children: [_jsxs(Box, { backgroundColor: "#042f2e", paddingX: 1, children: [_jsx(Text, { color: "black", children: "tokens: " }), _jsxs(Text, { color: "black", bold: true, children: [usage.inputTokens, "\u2193 ", usage.outputTokens, "\u2191"] })] }), _jsxs(Box, { backgroundColor: "#064e3b", paddingX: 1, children: [_jsx(Text, { color: "black", children: "ctx: " }), _jsxs(Text, { color: "black", bold: true, children: [usage.contextPercent.toFixed(0), "%"] })] })] })), _jsxs(Box, { backgroundColor: "#042f2e", paddingX: 1, children: [_jsx(Text, { color: "black", children: "cost: " }), _jsxs(Text, { color: "black", bold: true, children: ["$", totalCost.toFixed(4)] })] })] }));
 };
 /** Inline setup wizard — shown when no config exists. */
 const InlineSetup = ({ onComplete }) => {
@@ -240,10 +278,35 @@ const InlineSetup = ({ onComplete }) => {
 export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     const { exit } = useApp();
     const { stdout } = useStdout();
+    const terminalRows = stdout?.rows ?? 24;
+    // ─── Static scrollback state ───
+    // Each item appended here is rendered once by <Static> and permanently
+    // flushed to the terminal scrollback by Ink, within its own render cycle.
+    // Using <Static> items is important to avoid re-rendering issues, which hijack
+    // scrollback and copying when new AI message streams are coming in.
+    //
+    // staticCounterRef keeps ID generation local to this component instance,
+    // making it immune to Strict Mode double-invoke, HMR counter drift, and
+    // collisions if multiple App instances ever coexist.
+    const staticCounterRef = useRef(0);
+    const [staticItems, setStaticItems] = useState([]);
+    const addStatic = useCallback((text) => {
+        staticCounterRef.current += 1;
+        const id = `s${staticCounterRef.current}`;
+        setStaticItems((prev) => [...prev, { id, text }]);
+    }, []);
     // Core state
     const [config, setConfig] = useState(null);
     const [completionMessages, setCompletionMessages] = useState([]);
     const [inputText, setInputText] = useState('');
+    // isStreaming: true while the assistant is producing tokens.
+    // streamingText: the live in-progress token buffer shown in the dynamic Ink
+    // frame while the response streams. Cleared to '' at done and flushed to
+    // <Static> as a permanent scrollback item. Keeping it in React state (not a
+    // ref) is safe because the Ink frame height does NOT change as tokens arrive —
+    // the streaming box is always 1+ lines tall while loading=true.
+    const [isStreaming, setIsStreaming] = useState(false);
+    const [streamingText, setStreamingText] = useState('');
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     const [helpMessage, setHelpMessage] = useState(null);
@@ -253,18 +316,6 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     const [logFilePath, setLogFilePath] = useState(null);
     // Input reset key — incremented on submit to force TextInput remount and clear
     const [inputResetKey, setInputResetKey] = useState(0);
-    const [inputWidthKey, setInputWidthKey] = useState(stdout?.columns ?? 80);
-    // Collapsible state — only applies to live (current turn) messages
-    const [expandedMessages, setExpandedMessages] = useState(new Set());
-    const expandLatestMessage = useCallback((index) => {
-        setExpandedMessages((prev) => {
-            if (prev.has(index))
-                return prev;
-            const next = new Set(prev);
-            next.add(index);
-            return next;
-        });
-    }, []);
     // Approval state
     const [pendingApproval, setPendingApproval] = useState(null);
     // Usage state
@@ -279,12 +330,12 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     const [quittingSession, setQuittingSession] = useState(null);
     // OpenAI client ref (stable across renders)
     const clientRef = useRef(null);
-    // Track current assistant message being built in the event handler
     const assistantMessageRef = useRef(null);
     // Abort controller for cancelling the current completion
     const abortControllerRef = useRef(null);
-    // Debounce timer for text_delta renders (~50ms batching)
-    const textFlushTimerRef = useRef(null);
+    const didPrintIntroRef = useRef(false);
+    const printedThreadErrorIdsRef = useRef(new Set());
+    const printedLogPathRef = useRef(null);
     // ─── Post-config initialization (reused after inline setup) ───
     const initializeWithConfig = useCallback(async (loadedConfig) => {
         setConfig(loadedConfig);
@@ -301,6 +352,12 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                 setTodosForSession(loadedSession.id, loadedSession.todos);
                 setSession(loadedSession);
                 setCompletionMessages(loadedSession.completionMessages);
+                if (!didPrintIntroRef.current) {
+                    printBanner(addStatic);
+                    printRuntimeHeader(addStatic, loadedConfig, loadedSession, logFilePath, dangerouslyAcceptAll);
+                    replayMessagesToScrollback(addStatic, loadedSession.completionMessages);
+                    didPrintIntroRef.current = true;
+                }
             }
             else {
                 setError(`Session "${sessionId}" not found. Starting a new session.`);
@@ -314,10 +371,15 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
             clearTodos(newSession.id);
             newSession.completionMessages = initialCompletionMessages;
             setSession(newSession);
+            if (!didPrintIntroRef.current) {
+                printBanner(addStatic);
+                printRuntimeHeader(addStatic, loadedConfig, newSession, logFilePath, dangerouslyAcceptAll);
+                didPrintIntroRef.current = true;
+            }
         }
         setNeedsSetup(false);
         setInitialized(true);
-    }, [sessionId]);
+    }, [dangerouslyAcceptAll, logFilePath, sessionId, addStatic]);
     // ─── Initialization ───
     useEffect(() => {
         if (!loading) {
@@ -330,17 +392,26 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         return () => clearInterval(interval);
     }, [loading]);
     useEffect(() => {
-        if (!stdout)
+        if (error) {
+            addStatic(`\x1b[31mError: ${error}\x1b[0m\n\n`);
+        }
+    }, [error, addStatic]);
+    useEffect(() => {
+        if (!didPrintIntroRef.current || !logFilePath || printedLogPathRef.current === logFilePath) {
             return;
-        const handleResize = () => {
-            setInputWidthKey(stdout.columns ?? 80);
-        };
-        handleResize();
-        stdout.on('resize', handleResize);
-        return () => {
-            stdout.off('resize', handleResize);
-        };
-    }, [stdout]);
+        }
+        printedLogPathRef.current = logFilePath;
+        addStatic(`Debug logs: ${logFilePath}\n\n`);
+    }, [logFilePath, addStatic]);
+    useEffect(() => {
+        for (const threadError of threadErrors) {
+            if (threadError.transient || printedThreadErrorIdsRef.current.has(threadError.id)) {
+                continue;
+            }
+            printedThreadErrorIdsRef.current.add(threadError.id);
+            addStatic(`\x1b[31mError: ${threadError.message}\x1b[0m\n\n`);
+        }
+    }, [threadErrors, addStatic]);
     useEffect(() => {
         const init = async () => {
             // Set log level and initialize log file
@@ -418,7 +489,6 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                     setLastUsage(null);
                     setTotalCost(0);
                     setThreadErrors([]);
-                    setExpandedMessages(new Set());
                     if (session) {
                         const newSession = createSession(config.model, config.provider);
                         clearTodos(session.id);
@@ -429,13 +499,8 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                 });
                 return true;
             case '/expand':
-                // Expand all collapsed messages
-                const allIndices = new Set(completionMessages.map((_, i) => i));
-                setExpandedMessages(allIndices);
-                return true;
             case '/collapse':
-                // Collapse all messages
-                setExpandedMessages(new Set());
+                // expand/collapse removed — transcript lives in scrollback
                 return true;
             case '/help':
                 setHelpMessage(HELP_TEXT);
@@ -461,13 +526,19 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         setInputText('');
         setInputResetKey((prev) => prev + 1); // Force TextInput to remount and clear
         setLoading(true);
+        setIsStreaming(false);
+        setStreamingText('');
         setError(null);
         setHelpMessage(null);
         setThreadErrors([]);
-        // Add user message to completion messages IMMEDIATELY for real-time UI display
+        // Reset turn tracking
+        assistantMessageRef.current = null;
+        // Print the user message directly to scrollback so it is selectable/copyable.
+        // We still push it into completionMessages for session saving.
         const userMessage = { role: 'user', content: trimmed };
+        printMessageToScrollback(addStatic, 'user', trimmed);
         setCompletionMessages((prev) => [...prev, userMessage]);
-        // Reset assistant message tracker
+        // Reset assistant message tracker (streamed indices were reset above)
         assistantMessageRef.current = null;
         try {
             const pricing = getModelPricing(config.provider, config.model);
@@ -476,33 +547,27 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
             abortControllerRef.current = new AbortController();
             const updatedMessages = await runAgenticLoop(clientRef.current, config.model, [...completionMessages, userMessage], trimmed, (event) => {
                 switch (event.type) {
-                    case 'text_delta':
-                        // Update the current assistant message in completionMessages
+                    case 'text_delta': {
+                        // Accumulate tokens into streamingText React state — shown live in
+                        // the dynamic Ink frame. The frame height stays constant (spinner +
+                        // streaming box + input) so setState here does NOT trigger
+                        // clearTerminal. At 'done' the full text is flushed to <Static>.
                         if (!assistantMessageRef.current || assistantMessageRef.current.kind !== 'streaming_text') {
-                            // First text delta — create the assistant message immediately
+                            // First text delta of this turn: initialise ref, show streaming indicator.
                             const assistantMsg = { role: 'assistant', content: event.content || '', tool_calls: [] };
-                            setCompletionMessages((prev) => {
-                                assistantMessageRef.current = { message: assistantMsg, index: prev.length, kind: 'streaming_text' };
-                                return [...prev, assistantMsg];
-                            });
+                            const idx = completionMessages.length + 1;
+                            assistantMessageRef.current = { message: assistantMsg, index: idx, kind: 'streaming_text' };
+                            setIsStreaming(true);
+                            setStreamingText(event.content || '');
+                            setCompletionMessages((prev) => [...prev, assistantMsg]);
                         }
                         else {
-                            // Subsequent deltas — accumulate in ref, debounce the render (~50ms)
+                            // Subsequent deltas — append to ref AND to React state for live display.
                             assistantMessageRef.current.message.content += event.content || '';
-                            if (!textFlushTimerRef.current) {
-                                textFlushTimerRef.current = setTimeout(() => {
-                                    textFlushTimerRef.current = null;
-                                    setCompletionMessages((prev) => {
-                                        if (!assistantMessageRef.current)
-                                            return prev;
-                                        const updated = [...prev];
-                                        updated[assistantMessageRef.current.index] = { ...assistantMessageRef.current.message };
-                                        return updated;
-                                    });
-                                }, 50);
-                            }
+                            setStreamingText((prev) => prev + (event.content || ''));
                         }
                         break;
+                    }
                     case 'sub_agent_iteration':
                         if (event.subAgentTool) {
                             const { tool, status } = event.subAgentTool;
@@ -518,6 +583,19 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                         if (event.toolCall) {
                             const toolCall = event.toolCall;
                             setActiveTool(toolCall.name);
+                            // If the model streamed some text before invoking this tool,
+                            // flush it to <Static> now. Without this, streamingText is
+                            // never cleared — the 'done' handler only flushes streaming_text
+                            // when the turn ends with plain text, not with tool calls.
+                            if (assistantMessageRef.current?.kind === 'streaming_text') {
+                                const precedingText = assistantMessageRef.current.message.content || '';
+                                if (precedingText) {
+                                    addStatic(`${normalizeTranscriptText(precedingText)}\n\n`);
+                                }
+                                setIsStreaming(false);
+                                setStreamingText('');
+                                assistantMessageRef.current = null;
+                            }
                             // Track the tool call in the ref WITHOUT triggering a render.
                             // The render will happen when tool_result arrives.
                             const existingRef = assistantMessageRef.current;
@@ -564,16 +642,20 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                         if (event.toolCall) {
                             const toolCall = event.toolCall;
                             setActiveTool(null);
-                            if (toolCall.name === 'todo_read' || toolCall.name === 'todo_write') {
-                                const currentAssistantIndex = assistantMessageRef.current?.index;
-                                if (typeof currentAssistantIndex === 'number') {
-                                    expandLatestMessage(currentAssistantIndex);
-                                }
-                            }
-                            // Flush the assistant message update + tool result in a SINGLE state update
+                            // Write the tool summary immediately — at this point loading is
+                            // still true but the frame height is stable (spinner + input box).
+                            // The next state change (setActiveTool(null)) doesn't affect
+                            // frame height so write() restores the correct frame.
+                            const compactResult = (toolCall.result || '')
+                                .replace(/\s+/g, ' ')
+                                .trim()
+                                .slice(0, 180);
+                            addStatic(`\x1b[2m▶ ${toolCall.name}: ${compactResult}\x1b[0m\n`);
+                            // Flush the assistant message + tool result into completionMessages
+                            // for session saving.
                             setCompletionMessages((prev) => {
                                 const updated = [...prev];
-                                // Sync assistant message (may have new tool_calls since last render)
+                                // Sync assistant message
                                 if (assistantMessageRef.current) {
                                     updated[assistantMessageRef.current.index] = {
                                         ...assistantMessageRef.current.message,
@@ -628,13 +710,27 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                         }
                         break;
                     case 'iteration_done':
-                        assistantMessageRef.current = null;
+                        if (assistantMessageRef.current?.kind === 'tool_call_assistant') {
+                            assistantMessageRef.current = null;
+                        }
                         break;
                     case 'done':
-                        // Clear any pending text delta timer
-                        if (textFlushTimerRef.current) {
-                            clearTimeout(textFlushTimerRef.current);
-                            textFlushTimerRef.current = null;
+                        if (assistantMessageRef.current?.kind === 'streaming_text') {
+                            const finalRef = assistantMessageRef.current;
+                            // Flush the complete streamed text to <Static> (permanent scrollback),
+                            // then clear the live streaming state from the dynamic Ink frame.
+                            const normalized = normalizeTranscriptText(finalRef.message.content || '');
+                            if (normalized) {
+                                addStatic(`${normalized}\n\n`);
+                            }
+                            setIsStreaming(false);
+                            setStreamingText('');
+                            setCompletionMessages((prev) => {
+                                const updated = [...prev];
+                                updated[finalRef.index] = { ...finalRef.message };
+                                return updated;
+                            });
+                            assistantMessageRef.current = null;
                         }
                         setActiveTool(null);
                         setThreadErrors((prev) => prev.filter((threadError) => !threadError.transient));
@@ -662,7 +758,7 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         finally {
             setLoading(false);
         }
-    }, [loading, config, completionMessages, session, handleSlashCommand, expandLatestMessage]);
+    }, [loading, config, completionMessages, session, handleSlashCommand, addStatic]);
     // ─── Keyboard shortcuts ───
     useInput((input, key) => {
         if (key.ctrl && input === 'c') {
@@ -674,25 +770,12 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         }
     });
     // ─── Render ───
-    const providerInfo = config ? getProvider(config.provider) : null;
-    const liveStartIndex = loading
-        ? (typeof assistantMessageRef.current?.index === 'number'
-            ? assistantMessageRef.current.index
-            : Math.max(completionMessages.length - 1, 0))
-        : completionMessages.length;
-    const archivedMessages = completionMessages.slice(0, liveStartIndex);
-    const liveMessages = completionMessages.slice(liveStartIndex);
-    const archivedMessageNodes = useMemo(() => renderMessageList(archivedMessages, completionMessages, expandedMessages), [archivedMessages, completionMessages, expandedMessages]);
-    const liveMessageNodes = useMemo(() => renderMessageList(liveMessages, completionMessages, expandedMessages, liveStartIndex, loading), [liveMessages, completionMessages, expandedMessages, liveStartIndex, loading]);
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(BigText, { text: "ProtoAgent", font: "tiny", colors: ["#09A469"] }), config && (_jsxs(Text, { dimColor: true, children: ["Model: ", providerInfo?.name || config.provider, " / ", config.model, dangerouslyAcceptAll && _jsx(Text, { color: "red", children: " (auto-approve all)" }), session && _jsxs(Text, { dimColor: true, children: [" | Session: ", session.id.slice(0, 8)] })] })), logFilePath && _jsxs(Text, { dimColor: true, children: ["Debug logs: ", logFilePath] }), error && _jsx(Text, { color: "red", children: error }), helpMessage && (_jsx(CollapsibleBox, { title: "Help", content: helpMessage, titleColor: "green", dimColor: false, maxPreviewLines: 10, expanded: true })), !initialized && !error && !needsSetup && _jsx(Text, { children: "Initializing..." }), needsSetup && (_jsx(InlineSetup, { onComplete: (newConfig) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => (_jsx(Text, { children: item.text }, item.id)) }), helpMessage && (_jsx(LeftBar, { color: "green", marginTop: 1, marginBottom: 1, children: _jsx(Text, { children: helpMessage }) })), !initialized && !error && !needsSetup && _jsx(Text, { children: "Initializing..." }), needsSetup && (_jsx(InlineSetup, { onComplete: (newConfig) => {
                     initializeWithConfig(newConfig).catch((err) => {
                         setError(`Initialization failed: ${err.message}`);
                     });
-                } })), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [archivedMessageNodes, liveMessageNodes, threadErrors.map((threadError) => (_jsx(Box, { marginBottom: 1, borderStyle: "round", borderColor: "red", paddingX: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", threadError.message] }) }, `thread-error-${threadError.id}`))), loading && completionMessages.length > 0 && ((() => {
-                        const lastMsg = completionMessages[completionMessages.length - 1];
-                        return lastMsg.role === 'user' ? _jsx(Text, { dimColor: true, children: "Thinking..." }) : null;
-                    })()), pendingApproval && (_jsx(ApprovalPrompt, { request: pendingApproval.request, onRespond: (response) => {
-                            pendingApproval.resolve(response);
-                            setPendingApproval(null);
-                        } }))] }), _jsx(UsageDisplay, { usage: lastUsage ?? null, totalCost: totalCost }), initialized && !pendingApproval && inputText.startsWith('/') && (_jsx(CommandFilter, { inputText: inputText })), initialized && !pendingApproval && loading && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "green", bold: true, children: [SPINNER_FRAMES[spinnerFrame], ' ', activeTool ? `Running ${activeTool}...` : 'Working...'] }) })), initialized && !pendingApproval && (_jsx(Box, { borderStyle: "round", borderColor: "green", paddingX: 1, flexDirection: "column", children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: "green", bold: true, children: '>' }) }), _jsx(Box, { flexGrow: 1, minWidth: 10, children: _jsx(TextInput, { defaultValue: inputText, onChange: setInputText, placeholder: "Type your message... (/help for commands)", onSubmit: handleSubmit }, `${inputResetKey}-${inputWidthKey}`) })] }) }, `input-shell-${inputWidthKey}`)), quittingSession && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Session saved. Resume with:" }), _jsxs(Text, { color: "green", children: ["protoagent --session ", quittingSession.id] })] }))] }));
+                } })), isStreaming && (_jsxs(Text, { wrap: "wrap", children: [clipToRows(streamingText, terminalRows), _jsx(Text, { dimColor: true, children: "\u258D" })] })), threadErrors.filter((threadError) => threadError.transient).map((threadError) => (_jsx(LeftBar, { color: "red", marginBottom: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", threadError.message] }) }, `thread-error-${threadError.id}`))), pendingApproval && (_jsx(ApprovalPrompt, { request: pendingApproval.request, onRespond: (response) => {
+                    pendingApproval.resolve(response);
+                    setPendingApproval(null);
+                } })), initialized && !pendingApproval && loading && !isStreaming && (_jsx(Box, { children: _jsxs(Text, { color: "green", bold: true, children: [SPINNER_FRAMES[spinnerFrame], ' ', activeTool ? `Running ${activeTool}...` : 'Working...'] }) })), initialized && !pendingApproval && inputText.startsWith('/') && (_jsx(CommandFilter, { inputText: inputText })), _jsx(UsageDisplay, { usage: lastUsage ?? null, totalCost: totalCost }), initialized && !pendingApproval && (_jsx(Box, { children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { color: "green", bold: true, children: '>' }) }), _jsx(Box, { flexGrow: 1, minWidth: 10, children: _jsx(TextInput, { defaultValue: inputText, onChange: setInputText, placeholder: "Type your message... (/help for commands)", onSubmit: handleSubmit }, inputResetKey) })] }) })), quittingSession && (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Session saved. Resume with:" }), _jsxs(Text, { color: "green", children: ["protoagent --session ", quittingSession.id] })] }))] }));
 };

package/dist/agentic-loop.js

@@ -46,21 +46,22 @@ async function sleepWithAbort(delayMs, abortSignal) {
         abortSignal.addEventListener('abort', onAbort, { once: true });
     });
 }
-function appendStreamingFragment(current, fragment) {
+/** @internal exported for unit testing only */
+export function appendStreamingFragment(current, fragment) {
     if (!fragment)
         return current;
     if (!current)
         return fragment;
+    // Some providers resend the full accumulated value instead of a delta.
+    // These two guards handle that case without corrupting normal incremental deltas.
     if (current === fragment)
         return current;
     if (fragment.startsWith(current))
         return fragment;
-    const maxOverlap = Math.min(current.length, fragment.length);
-    for (let overlap = maxOverlap; overlap > 0; overlap--) {
-        if (current.endsWith(fragment.slice(0, overlap))) {
-            return current + fragment.slice(overlap);
-        }
-    }
+    // Normal case: incremental delta, just append.
+    // The previous partial-overlap loop was removed because it caused false-positive
+    // deduplication: short JSON tokens (e.g. `", "`) would coincidentally match the
+    // tail of `current`, silently stripping characters from valid argument payloads.
     return current + fragment;
 }
 function collapseRepeatedString(value) {
@@ -347,7 +348,7 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
                 if (chunk.usage) {
                     actualUsage = chunk.usage;
                 }
-                // Stream text content
+                // Stream text content (and return to UI for immediate display via onEvent)
                 if (delta?.content) {
                     streamedContent += delta.content;
                     assistantMessage.content = streamedContent;
@@ -355,7 +356,7 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
                         onEvent({ type: 'text_delta', content: delta.content });
                     }
                 }
-                // Accumulate tool calls
+                // Accumulate tool calls across stream chunks
                 if (delta?.tool_calls) {
                     hasToolCalls = true;
                     for (const tc of delta.tool_calls) {

package/dist/components/CollapsibleBox.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
+import { Text } from 'ink';
+import { LeftBar } from './LeftBar.js';
 export const CollapsibleBox = ({ title, content, titleColor, dimColor = false, maxPreviewLines = 3, maxPreviewChars = 500, expanded = false, marginBottom = 0, }) => {
     const lines = content.split('\n');
     const isTooManyLines = lines.length > maxPreviewLines;
@@ -7,7 +8,7 @@ export const CollapsibleBox = ({ title, content, titleColor, dimColor = false, m
     const isLong = isTooManyLines || isTooManyChars;
     // If content is short, always show it
     if (!isLong) {
-        return (_jsxs(Box, { flexDirection: "column", marginBottom: marginBottom, children: [_jsx(Text, { color: titleColor, dimColor: dimColor, bold: true, children: title }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { dimColor: dimColor, children: content }) })] }));
+        return (_jsxs(LeftBar, { color: titleColor ?? 'white', marginBottom: marginBottom, children: [_jsx(Text, { color: titleColor, dimColor: dimColor, bold: true, children: title }), _jsx(Text, { dimColor: dimColor, children: content })] }));
     }
     // For long content, show preview or full content
     let preview;
@@ -22,5 +23,5 @@ export const CollapsibleBox = ({ title, content, titleColor, dimColor = false, m
             : linesTruncated;
     }
     const hasMore = !expanded;
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: marginBottom, children: [_jsxs(Text, { color: titleColor, dimColor: dimColor, bold: true, children: [expanded ? '▼' : '▶', " ", title] }), _jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsx(Text, { dimColor: dimColor, children: preview }), hasMore && _jsx(Text, { dimColor: true, children: "... (use /expand to see all)" })] })] }));
+    return (_jsxs(LeftBar, { color: titleColor ?? 'white', marginBottom: marginBottom, children: [_jsxs(Text, { color: titleColor, dimColor: dimColor, bold: true, children: [expanded ? '▼' : '▶', " ", title] }), _jsx(Text, { dimColor: dimColor, children: preview }), hasMore && _jsx(Text, { dimColor: true, children: "... (use /expand to see all)" })] }));
 };

package/dist/components/ConsolidatedToolMessage.js

@@ -1,19 +1,20 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { FormattedMessage } from './FormattedMessage.js';
+import { LeftBar } from './LeftBar.js';
 export const ConsolidatedToolMessage = ({ toolCalls, toolResults, expanded = false, }) => {
     const toolNames = toolCalls.map((toolCall) => toolCall.name);
     const title = `Called: ${toolNames.join(', ')}`;
     const containsTodoTool = toolCalls.some((toolCall) => toolCall.name === 'todo_read' || toolCall.name === 'todo_write');
-    const titleColor = containsTodoTool ? 'green' : 'white';
+    const titleColor = containsTodoTool ? 'green' : 'cyan';
     const isExpanded = expanded || containsTodoTool;
     if (isExpanded) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: titleColor, bold: true, children: ["\u25BC ", title] }), _jsx(Box, { flexDirection: "column", marginLeft: 1, children: toolCalls.map((toolCall, idx) => {
-                        const result = toolResults.get(toolCall.id);
-                        if (!result)
-                            return null;
-                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", bold: true, children: ["[", result.name, "]:"] }), _jsx(FormattedMessage, { content: result.content })] }, idx));
-                    }) })] }));
+        return (_jsxs(LeftBar, { color: titleColor, children: [_jsxs(Text, { color: titleColor, bold: true, children: ["\u25BC ", title] }), toolCalls.map((toolCall, idx) => {
+                    const result = toolResults.get(toolCall.id);
+                    if (!result)
+                        return null;
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", bold: true, children: ["[", result.name, "]:"] }), _jsx(FormattedMessage, { content: result.content })] }, idx));
+                })] }));
     }
     const compactLines = toolCalls.flatMap((toolCall) => {
         const result = toolResults.get(toolCall.id);
@@ -29,5 +30,5 @@ export const ConsolidatedToolMessage = ({ toolCalls, toolResults, expanded = fal
     const preview = compactPreview.length > previewLimit
         ? `${compactPreview.slice(0, previewLimit).trimEnd()}... (use /expand)`
         : compactPreview;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: titleColor, dimColor: true, bold: true, children: ["\u25B6 ", title] }), _jsx(Box, { marginLeft: 1, children: _jsx(Text, { dimColor: true, children: preview }) })] }));
+    return (_jsxs(LeftBar, { color: "white", children: [_jsxs(Text, { color: titleColor, dimColor: true, bold: true, children: ["\u25B6 ", title] }), _jsx(Text, { dimColor: true, children: preview })] }));
 };

package/dist/components/FormattedMessage.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { formatMessage } from '../utils/format-message.js';
+import { LeftBar } from './LeftBar.js';
 export const DEFERRED_TABLE_PLACEHOLDER = 'table loading';
 const graphemeSegmenter = typeof Intl !== 'undefined' && 'Segmenter' in Intl
     ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
@@ -156,10 +157,10 @@ export const FormattedMessage = ({ content, deferTables = false }) => {
                 if (deferTables) {
                     return (_jsx(Box, { marginY: 1, children: _jsx(Text, { dimColor: true, children: DEFERRED_TABLE_PLACEHOLDER }) }, index));
                 }
-                return (_jsx(Box, { marginY: 1, paddingX: 1, borderStyle: "round", borderColor: "gray", children: _jsx(Text, { children: renderPreformattedTable(block.content) }) }, index));
+                return (_jsx(LeftBar, { color: "gray", marginTop: 1, marginBottom: 1, children: _jsx(Text, { children: renderPreformattedTable(block.content) }) }, index));
             }
             if (block.type === 'code') {
-                return (_jsx(Box, { marginY: 1, paddingX: 1, borderStyle: "round", borderColor: "gray", children: _jsx(Text, { dimColor: true, children: block.content }) }, index));
+                return (_jsx(LeftBar, { color: "gray", marginTop: 1, marginBottom: 1, children: _jsx(Text, { dimColor: true, children: block.content }) }, index));
             }
             // Text Block
             if (!block.content.trim())

package/dist/components/LeftBar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * LeftBar — renders a bold green vertical bar (│) on the left side of
+ * content, like a GitHub "note" callout. The bar stretches to match the
+ * full height of the content by measuring the content box after each render
+ * and repeating the │ character once per row.
+ *
+ * Uses Ink's measureElement (available in stock Ink) rather than a Box
+ * border, so it adds zero extra border lines and avoids ghosting on resize.
+ */
+import { useRef, useState, useLayoutEffect } from 'react';
+import { Box, Text, measureElement } from 'ink';
+export const LeftBar = ({ color = 'green', children, marginTop = 0, marginBottom = 0, }) => {
+    const contentRef = useRef(null);
+    const [height, setHeight] = useState(1);
+    useLayoutEffect(() => {
+        if (contentRef.current) {
+            try {
+                const { height: h } = measureElement(contentRef.current);
+                if (h > 0)
+                    setHeight(h);
+            }
+            catch {
+                // measureElement can throw before layout is complete; keep previous height
+            }
+        }
+    });
+    const bar = Array.from({ length: height }, () => '│').join('\n');
+    return (_jsxs(Box, { flexDirection: "row", marginTop: marginTop, marginBottom: marginBottom, children: [_jsx(Box, { flexDirection: "column", marginRight: 1, children: _jsx(Text, { color: color, bold: true, children: bar }) }), _jsx(Box, { ref: contentRef, flexDirection: "column", flexGrow: 1, children: children })] }));
+};

package/dist/system-prompt.js

@@ -67,7 +67,7 @@ export async function generateSystemPrompt() {
     const toolDescriptions = generateToolDescriptions();
     const skillsSection = buildSkillsCatalogSection(skills);
     return `You are ProtoAgent, a coding assistant with file system and shell command capabilities.
-Your job is to help the user complete coding tasks in their project.
+Your job is to help the user complete coding tasks in their project. You must be absolutely careful and diligent in your work, and follow all guidelines to the letter. Always prefer thoroughness and correctness over speed. Never cut corners.
 
 PROJECT CONTEXT
 
@@ -85,13 +85,13 @@ GUIDELINES
 
 OUTPUT FORMAT:
 - You are running in a terminal. Be concise. Optimise for scannability.
-- Use **bold** for important terms, *italic* for references.
- - For structured data, do NOT use Markdown table syntax. Use plain text, preformatted monospace tables with aligned columns.
- - Keep text tables compact: prefer narrower columns, minimal horizontal padding, and multi-line cells over very wide tables.
- - When a table would be too wide, wrap cell content onto multiple lines and abbreviate non-essential text so it fits terminal widths cleanly.
-- Use flat bullet lists with emojis to communicate information densely (e.g. ✅ done, ❌ failed, 📁 file, 🔍 searching).
+- Do NOT use Markdown formatting. No **bold**, no *italic*, no # headers, no --- dividers.
+- Do NOT use Markdown code fences (backticks) unless the content is actual code or a command.
+- For structured data, use plain text with aligned columns (spaces, not pipes/dashes).
+- Keep tables compact: narrower columns, minimal padding. Wrap cell content rather than making very wide tables.
+- Use flat plain-text lists with a simple dash or symbol prefix (e.g. - item, or ✅ done, ❌ failed).
 - NEVER use nested indentation. Keep all lists flat — one level only.
-- Markdown links [text](url) are NOT supported — just write URLs inline.
+- Do NOT use Markdown links [text](url) — just write URLs inline.
 
 SUBAGENT STRATEGY:
 Delegate work to specialized subagents aggressively. They excel at focused, parallel tasks.
@@ -121,8 +121,11 @@ FILE OPERATIONS:
 - ALWAYS use read_file before editing to get exact content.
 - NEVER write over existing files unless explicitly asked — use edit_file instead.
 - Create parent directories before creating files in them.
-- Use bash for package management, git, building, testing, etc.
-- When running interactive commands, add flags to avoid prompts (--yes, --template, etc.)
+- INDENTATION: when writing new_string for edit_file, preserve the exact indentation of every line. Copy the indent character-for-character from the file. A single dropped space is a bug.
+- STRICT TYPO PREVENTION: You have a tendency to drop characters or misspell words (e.g., "commands" vs "comands") when generating long code blocks. Before submitting a tool call, perform a character-by-character mental audit.
+- VERIFICATION STEP: After generating a new_string, compare it against the old_string. Ensure that only the intended changes are present and that no existing words have been accidentally altered or truncated.
+- NO TRUNCATION: Never truncate code or leave "..." in your tool calls. Every string must be literal and complete.
+- IF edit_file FAILS: do NOT retry by guessing or reconstructing old_string from memory. Call read_file on the file first, then copy the exact text verbatim for old_string. The error output shows exactly which lines differ between your old_string and the file — read those carefully before retrying.
 
 IMPLEMENTATION STANDARDS:
 - **Thorough investigation**: Before implementing, understand the existing codebase, patterns, and related systems.

package/dist/tools/edit-file.js

@@ -7,9 +7,9 @@
  */
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { validatePath } from '../utils/path-validation.js';
+import { validatePath, getWorkingDirectory } from '../utils/path-validation.js';
 import { requestApproval } from '../utils/approval.js';
-import { assertReadBefore, recordRead } from '../utils/file-time.js';
+import { checkReadBefore, recordRead } from '../utils/file-time.js';
 export const editFileTool = {
     type: 'function',
     function: {
@@ -32,6 +32,54 @@ export const editFileTool = {
         },
     },
 };
+// ─── Path suggestion helper (mirrors read_file behaviour) ───
+async function findSimilarPaths(requestedPath) {
+    const cwd = getWorkingDirectory();
+    const segments = requestedPath.split('/').filter(Boolean);
+    const MAX_DEPTH = 6;
+    const MAX_ENTRIES = 200;
+    const MAX_SUGGESTIONS = 3;
+    const candidates = [];
+    async function walkSegments(dir, segIndex, currentPath) {
+        if (segIndex >= segments.length || segIndex >= MAX_DEPTH || candidates.length >= MAX_SUGGESTIONS)
+            return;
+        const targetSegment = segments[segIndex].toLowerCase();
+        let entries;
+        try {
+            entries = (await fs.readdir(dir, { withFileTypes: true })).slice(0, MAX_ENTRIES).map(e => e.name);
+        }
+        catch {
+            return;
+        }
+        const isLastSegment = segIndex === segments.length - 1;
+        for (const entry of entries) {
+            if (candidates.length >= MAX_SUGGESTIONS)
+                break;
+            const entryLower = entry.toLowerCase();
+            if (!entryLower.includes(targetSegment) && !targetSegment.includes(entryLower))
+                continue;
+            const entryPath = path.join(currentPath, entry);
+            const fullPath = path.join(dir, entry);
+            if (isLastSegment) {
+                try {
+                    await fs.stat(fullPath);
+                    candidates.push(entryPath);
+                }
+                catch { /* skip */ }
+            }
+            else {
+                try {
+                    const stat = await fs.stat(fullPath);
+                    if (stat.isDirectory())
+                        await walkSegments(fullPath, segIndex + 1, entryPath);
+                }
+                catch { /* skip */ }
+            }
+        }
+    }
+    await walkSegments(cwd, 0, '');
+    return candidates;
+}
 /** Strategy 1: Exact verbatim match (current behavior). */
 const exactReplacer = {
     name: 'exact',
@@ -245,10 +293,26 @@ export async function editFile(filePath, oldString, newString, expectedReplaceme
     if (oldString.length === 0) {
         return 'Error: old_string cannot be empty.';
     }
-    const validated = await validatePath(filePath);
+    let validated;
+    try {
+        validated = await validatePath(filePath);
+    }
+    catch (err) {
+        if (err.message?.includes('does not exist') || err.code === 'ENOENT') {
+            const suggestions = await findSimilarPaths(filePath);
+            let msg = `File not found: '${filePath}'.`;
+            if (suggestions.length > 0) {
+                msg += ' Did you mean one of these?\n' + suggestions.map(s => `  ${s}`).join('\n');
+            }
+            return msg;
+        }
+        throw err;
+    }
     // Staleness guard: must have read file before editing
     if (sessionId) {
-        assertReadBefore(sessionId, validated);
+        const staleError = checkReadBefore(sessionId, validated);
+        if (staleError)
+            return staleError;
     }
     const content = await fs.readFile(validated, 'utf8');
     // Use fuzzy match cascade
@@ -262,7 +326,67 @@ export async function editFile(filePath, oldString, newString, expectedReplaceme
                 return `Error: found ${count} occurrence(s) of old_string (via ${strategy.name} match), but expected ${expectedReplacements}. Be more specific or set expected_replacements=${count}.`;
             }
         }
-        return `Error: old_string not found in ${filePath}. Strategies exhausted (exact, line-trimmed, indent-flexible, whitespace-normalized, trimmed-boundary). Re-read the file and try again.`;
+        // Build a per-strategy diagnostic to help the model self-correct without
+        // requiring a full re-read. For each strategy, find the closest partial
+        // match and report ALL lines where it diverges (not just the first).
+        const searchLines = oldString.split('\n');
+        const contentLines = content.split('\n');
+        const diagnostics = [];
+        for (const strategy of STRATEGIES) {
+            // Find the window in the file that shares the most lines with oldString
+            let bestWindowStart = -1;
+            let bestMatchedLines = 0;
+            for (let i = 0; i <= contentLines.length - searchLines.length; i++) {
+                let matched = 0;
+                for (let j = 0; j < searchLines.length; j++) {
+                    const fileLine = strategy.name === 'whitespace-normalized'
+                        ? contentLines[i + j].replace(/\s+/g, ' ').trim()
+                        : contentLines[i + j].trim();
+                    const searchLine = strategy.name === 'whitespace-normalized'
+                        ? searchLines[j].replace(/\s+/g, ' ').trim()
+                        : searchLines[j].trim();
+                    if (fileLine === searchLine)
+                        matched++;
+                }
+                if (matched > bestMatchedLines) {
+                    bestMatchedLines = matched;
+                    bestWindowStart = i;
+                }
+            }
+            if (bestWindowStart >= 0 && bestMatchedLines > 0 && bestMatchedLines < searchLines.length) {
+                // Collect all diverging lines, not just the first
+                const diffLines = [];
+                const MAX_DIFFS = 6;
+                for (let j = 0; j < searchLines.length && diffLines.length < MAX_DIFFS; j++) {
+                    const fileLine = contentLines[bestWindowStart + j] ?? '(end of file)';
+                    const searchLine = searchLines[j];
+                    const fileNorm = strategy.name === 'whitespace-normalized'
+                        ? fileLine.replace(/\s+/g, ' ').trim()
+                        : fileLine.trim();
+                    const searchNorm = strategy.name === 'whitespace-normalized'
+                        ? searchLine.replace(/\s+/g, ' ').trim()
+                        : searchLine.trim();
+                    if (fileNorm !== searchNorm) {
+                        diffLines.push(`    line ${bestWindowStart + j + 1}:\n` +
+                            `      yours: ${searchLine.trim().slice(0, 120)}\n` +
+                            `      file:  ${fileLine.trim().slice(0, 120)}`);
+                    }
+                }
+                const truncNote = diffLines.length === MAX_DIFFS ? `\n    ... (more diffs not shown)` : '';
+                diagnostics.push(`  ${strategy.name}: ${bestMatchedLines}/${searchLines.length} lines match, ${searchLines.length - bestMatchedLines} differ:\n` +
+                    diffLines.join('\n') + truncNote);
+            }
+            else if (bestMatchedLines === 0) {
+                diagnostics.push(`  ${strategy.name}: no lines matched — old_string may be from a different file or heavily rewritten`);
+            }
+            else {
+                diagnostics.push(`  ${strategy.name}: no partial match found`);
+            }
+        }
+        const hint = diagnostics.length > 0
+            ? '\nDiagnostics per strategy:\n' + diagnostics.join('\n')
+            : '';
+        return `Error: old_string not found in ${filePath}.${hint}\nDo NOT retry with a guess. Call read_file on ${filePath} first to get the exact current content, then construct old_string by copying verbatim from the file.`;
     }
     const { actual, strategy, count } = match;
     // Request approval

package/dist/tools/read-file.js

@@ -108,46 +108,29 @@ export async function readFile(filePath, offset = 0, limit = 2000, sessionId) {
     const start = Math.max(0, offset);
     const maxLines = Math.max(0, limit);
     const lines = [];
-    let totalLines = 0;
     const stream = createReadStream(validated, { encoding: 'utf8' });
     const lineReader = readline.createInterface({
         input: stream,
         crlfDelay: Infinity,
     });
     try {
+        let lineIndex = 0;
         for await (const line of lineReader) {
-            if (totalLines >= start && lines.length < maxLines) {
+            if (lineIndex >= start && lines.length < maxLines) {
                 lines.push(line);
             }
-            totalLines++;
-        }
-        const stats = await fs.stat(validated);
-        if (stats.size === 0) {
-            totalLines = 0;
-        }
-        else if (lines.length === 0 && totalLines === 0) {
-            totalLines = 1;
+            lineIndex++;
         }
     }
     finally {
         lineReader.close();
         stream.destroy();
     }
-    const end = Math.min(totalLines, start + lines.length);
-    // Add line numbers (1-based)
-    const numbered = lines.map((line, i) => {
-        const lineNum = String(start + i + 1).padStart(5, ' ');
-        // Truncate very long lines
-        const truncated = line.length > 2000 ? line.slice(0, 2000) + '... (truncated)' : line;
-        return `${lineNum} | ${truncated}`;
-    });
+    // Truncate very long individual lines but don't reformat content
+    const slice = lines.map(line => line.length > 2000 ? line.slice(0, 2000) + '... (truncated)' : line);
     // Record successful read for staleness tracking
     if (sessionId) {
         recordRead(sessionId, validated);
     }
-    const rangeLabel = lines.length === 0
-        ? 'none'
-        : `${Math.min(start + 1, totalLines)}-${end}`;
-    const header = `File: ${filePath} (${totalLines} lines total, showing ${rangeLabel})`;
-    return `${header}\n${numbered.join('\n')}`;
+    return slice.join('\n');
 }

package/dist/tools/write-file.js

@@ -5,6 +5,7 @@ import fs from 'node:fs/promises';
 import path from 'node:path';
 import { validatePath } from '../utils/path-validation.js';
 import { requestApproval } from '../utils/approval.js';
+import { recordRead } from '../utils/file-time.js';
 export const writeFileTool = {
     type: 'function',
     function: {
@@ -49,5 +50,10 @@ export async function writeFile(filePath, content, sessionId) {
         await fs.rm(tmpPath, { force: true }).catch(() => undefined);
     }
     const lines = content.split('\n').length;
+    // Record the write as a read so a subsequent edit_file on this file doesn't
+    // immediately fail the staleness guard with "you must read first".
+    if (sessionId) {
+        recordRead(sessionId, validated);
+    }
     return `Successfully wrote ${lines} lines to ${filePath}`;
 }

package/dist/utils/file-time.js

@@ -13,34 +13,43 @@ export function recordRead(sessionId, absolutePath) {
     readTimes.set(`${sessionId}:${absolutePath}`, Date.now());
 }
 /**
- * Assert that a file was previously read and hasn't changed on disk since.
- * Throws if the file was never read or has been modified.
+ * Check that a file was previously read and hasn't changed on disk since.
+ * Returns an error string if the check fails, or null if all is well.
+ * Use this instead of assertReadBefore so staleness errors surface as normal
+ * tool return values rather than exceptions that get swallowed into a generic
+ * "Error executing edit_file: ..." message.
  */
-export function assertReadBefore(sessionId, absolutePath) {
+export function checkReadBefore(sessionId, absolutePath) {
     const key = `${sessionId}:${absolutePath}`;
     const lastRead = readTimes.get(key);
     if (!lastRead) {
-        throw new Error(`You must read '${absolutePath}' before editing it. Call read_file first.`);
+        return `You must read '${absolutePath}' before editing it. Call read_file first.`;
     }
     try {
         const mtime = fs.statSync(absolutePath).mtimeMs;
         if (mtime > lastRead + 100) {
-            // Clear stale entry so the error message stays accurate
+            // Clear stale entry so the error message stays accurate on retry
             readTimes.delete(key);
-            throw new Error(`'${absolutePath}' has changed on disk since you last read it. Re-read it before editing.`);
+            return `'${absolutePath}' has changed on disk since you last read it. Re-read it before editing.`;
         }
     }
     catch (err) {
         if (err.code === 'ENOENT') {
             readTimes.delete(key);
-            throw new Error(`'${absolutePath}' no longer exists on disk.`);
-        }
-        // Re-throw our own errors
-        if (err.message.includes('has changed on disk') || err.message.includes('must read')) {
-            throw err;
+            return `'${absolutePath}' no longer exists on disk.`;
         }
         // Ignore other stat errors — don't block edits on stat failures
     }
+    return null;
+}
+/**
+ * @deprecated Use checkReadBefore instead — it returns a string rather than
+ * throwing, so the error surfaces cleanly as a tool result.
+ */
+export function assertReadBefore(sessionId, absolutePath) {
+    const err = checkReadBefore(sessionId, absolutePath);
+    if (err)
+        throw new Error(err);
 }
 /**
  * Clear all read-time entries for a session (e.g. on session end).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "protoagent",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "files": [
     "dist",
@@ -28,7 +28,7 @@
     "commander": "^14.0.1",
     "he": "^1.2.0",
     "html-to-text": "^9.0.5",
-    "ink": "^6.7.0",
+    "ink": "^6.8.0",
     "ink-big-text": "^2.0.0",
     "jsonc-parser": "^3.3.1",
     "openai": "^5.23.1",