protoagent 0.1.6 → 0.1.7

package/dist/App.js

@@ -6,10 +6,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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';
+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 +21,103 @@ 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.
+let _staticCounter = 0;
+function makeStaticId() {
+    return `s${++_staticCounter}`;
+}
+function printBanner(addStatic) {
+    const green = '\x1b[38;2;9;164;105m';
+    const reset = '\x1b[0m';
+    addStatic([
+        `${green}█▀█ █▀█ █▀█ ▀█▀ █▀█ ▄▀█ █▀▀ █▀▀ █▄ █ ▀█▀${reset}`,
+        `${green}█▀▀ █▀▄ █▄█  █  █▄█ █▀█ █▄█ ██▄ █ ▀█  █${reset}`,
+        '',
+    ].join('\n'));
+}
+function printRuntimeHeader(addStatic, config, session, logFilePath, dangerouslyAcceptAll) {
+    const provider = getProvider(config.provider);
+    let line = `Model: ${provider?.name || config.provider} / ${config.model}`;
+    if (dangerouslyAcceptAll)
+        line += ' (auto-approve all)';
+    if (session)
+        line += ` | Session: ${session.id.slice(0, 8)}`;
+    let text = `${line}\n`;
+    if (logFilePath) {
+        text += `Debug logs: ${logFilePath}\n`;
+    }
+    text += '\n';
+    addStatic(text);
 }
-function normalizeMessageSpacing(message) {
-    const normalized = message.replace(/\r\n/g, '\n');
+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;
+    }
+    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');
     }
-    return null;
+}
+// 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' },
 ];
 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',
 ].join('\n');
 function buildClient(config) {
     const provider = getProvider(config.provider);
@@ -194,13 +180,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, { 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)] }))] }));
 };
 /** Inline setup wizard — shown when no config exists. */
 const InlineSetup = ({ onComplete }) => {
@@ -240,10 +226,27 @@ 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.
+    // This eliminates all write()/log-update timing issues.
+    const [staticItems, setStaticItems] = useState([]);
+    const addStatic = useCallback((text) => {
+        setStaticItems((prev) => [...prev, { id: makeStaticId(), 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 +256,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 +270,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 +292,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 +311,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 +332,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 +429,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 +439,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 +466,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 +487,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;
@@ -564,16 +569,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 +637,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 +685,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 +697,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);
+                } })), _jsx(UsageDisplay, { usage: lastUsage ?? null, totalCost: totalCost }), initialized && !pendingApproval && inputText.startsWith('/') && (_jsx(CommandFilter, { inputText: inputText })), initialized && !pendingApproval && loading && !isStreaming && (_jsx(Box, { children: _jsxs(Text, { color: "green", bold: true, children: [SPINNER_FRAMES[spinnerFrame], ' ', activeTool ? `Running ${activeTool}...` : 'Working...'] }) })), 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/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

@@ -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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "protoagent",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "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",