protoagent 0.1.10 → 0.1.12

package/README.md

@@ -61,7 +61,6 @@ protoagent init --project --force
 ## Interactive Commands
 
 - `/help` — Show available slash commands
-- `/clear` — Start a fresh conversation in a new session
 - `/collapse` — Collapse long system and tool output
 - `/expand` — Expand collapsed messages
 - `/quit` or `/exit` — Save and exit

package/dist/App.js

@@ -43,8 +43,7 @@ Here's how the terminal UI is laid out (showcasing all options at once for demon
 ├─────────────────────────────────────────┤
 │  tokens: 1234↓ 56↑ | ctx: 12% | $0.02   │  static-ish, updates after each turn
 ├─────────────────────────────────────────┤
-│  /clear — Clear conversation...         │  dynamic, shown when typing /
-│  /quit  — Exit ProtoAgent               │
+│  /quit  — Exit ProtoAgent               │  dynamic, shown when typing /
 ├─────────────────────────────────────────┤
 │  ⠹ Running read_file...                 │  dynamic, shown while loading
 ├─────────────────────────────────────────┤
@@ -56,47 +55,50 @@ Here's how the terminal UI is laid out (showcasing all options at once for demon
 │  protoagent --session abc12345          │
 └─────────────────────────────────────────┘
 */
-import { useState, useEffect, useCallback, useRef } from 'react';
+import React, { 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 { TextInput, Select } from '@inkjs/ui';
 import { OpenAI } from 'openai';
-import { readConfig, writeConfig, resolveApiKey } from './config.js';
-import { loadRuntimeConfig } from './runtime-config.js';
-import { getAllProviders, getProvider, getModelPricing, getRequestDefaultParams } from './providers.js';
+import { readConfig, writeConfig, writeInitConfig, resolveApiKey, TargetSelection, ModelSelection, ApiKeyInput } from './config.js';
+import { loadRuntimeConfig, getActiveRuntimeConfigPath } from './runtime-config.js';
+import { getProvider, getModelPricing, getRequestDefaultParams } from './providers.js';
 import { runAgenticLoop, initializeMessages, } from './agentic-loop.js';
-import { setDangerouslyAcceptAll, setApprovalHandler, clearApprovalHandler } from './tools/index.js';
+import { setDangerouslySkipPermissions, setApprovalHandler, clearApprovalHandler } from './tools/index.js';
 import { setLogLevel, LogLevel, initLogFile, logger } from './utils/logger.js';
 import { createSession, ensureSystemPromptAtTop, saveSession, loadSession, generateTitle, } from './sessions.js';
 import { clearTodos, getTodosForSession, setTodosForSession } from './tools/todo.js';
-import { initializeMcp, closeMcp } from './mcp.js';
+import { initializeMcp, closeMcp, getConnectedMcpServers } from './mcp.js';
 import { generateSystemPrompt } from './system-prompt.js';
+import { renderFormattedText } from './utils/format-message.js';
 // ─── 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'));
+    addStatic(_jsxs(Text, { children: [_jsx(Text, { color: "#09A469", children: "\u2588\u2580\u2588 \u2588\u2580\u2588 \u2588\u2580\u2588 \u2580\u2588\u2580 \u2588\u2580\u2588 \u2584\u2580\u2588 \u2588\u2580\u2580 \u2588\u2580\u2580 \u2588\u2584 \u2588 \u2580\u2588\u2580" }), '\n', _jsx(Text, { color: "#09A469", children: "\u2588\u2580\u2580 \u2588\u2580\u2584 \u2588\u2584\u2588  \u2588  \u2588\u2584\u2588 \u2588\u2580\u2588 \u2588\u2584\u2588 \u2588\u2588\u2584 \u2588 \u2580\u2588  \u2588" }), '\n'] }));
 }
-function printRuntimeHeader(addStatic, config, session, logFilePath, dangerouslyAcceptAll) {
+function printRuntimeHeader(addStatic, config, session, dangerouslySkipPermissions) {
     const provider = getProvider(config.provider);
     let line = `Model: ${provider?.name || config.provider} / ${config.model}`;
-    if (dangerouslyAcceptAll)
+    if (dangerouslySkipPermissions)
         line += ' (auto-approve all)';
     if (session)
-        line += ` | Session: ${session.id.slice(0, 8)}`;
-    let text = `${line}\n`;
+        line += ` | Session: ${session.id}`;
+    const lines = [_jsx(Text, { dimColor: true, children: line }, "model")];
+    const logFilePath = logger.getLogFilePath();
     if (logFilePath) {
-        text += `Debug logs: ${logFilePath}\n`;
+        lines.push(_jsxs(Text, { dimColor: true, children: ["Debug logs: ", logFilePath] }, "log"));
     }
-    text += '\n';
-    addStatic(text);
+    const configPath = getActiveRuntimeConfigPath();
+    if (configPath) {
+        lines.push(_jsxs(Text, { dimColor: true, children: ["Config file: ", configPath] }, "config"));
+    }
+    const mcpServers = getConnectedMcpServers();
+    if (mcpServers.length > 0) {
+        lines.push(_jsxs(Text, { dimColor: true, children: ["MCPs: ", mcpServers.join(', ')] }, "mcp"));
+    }
+    addStatic(_jsxs(Text, { children: [lines.map((l, i) => _jsxs(React.Fragment, { children: [l, '\n'] }, i)), '\n'] }));
 }
 function normalizeTranscriptText(text) {
     const normalized = text.replace(/\r\n/g, '\n');
@@ -110,14 +112,72 @@ function normalizeTranscriptText(text) {
 function printMessageToScrollback(addStatic, role, text) {
     const normalized = normalizeTranscriptText(text);
     if (!normalized) {
-        addStatic('\n');
+        addStatic(_jsx(Text, { children: '\n' }));
         return;
     }
     if (role === 'user') {
-        addStatic(`\x1b[32m>\x1b[0m ${normalized}\n`);
+        addStatic(_jsxs(Text, { children: [_jsx(Text, { color: "green", children: '>' }), " ", normalized, '\n'] }));
         return;
     }
-    addStatic(`${normalized}\n\n`);
+    // Apply Markdown formatting (bold, italic) to assistant messages
+    addStatic(_jsxs(Text, { children: [renderFormattedText(normalized), '\n'] }));
+}
+/**
+ * Format a sub-agent tool call into a human-readable activity string.
+ * Shows what the sub-agent is actually doing, e.g. "Sub-agent reading file package.json"
+ */
+function formatSubAgentActivity(tool, args) {
+    if (!args || typeof args !== 'object') {
+        return `Sub-agent running ${tool}...`;
+    }
+    const argEntries = Object.entries(args);
+    if (argEntries.length === 0) {
+        return `Sub-agent running ${tool}...`;
+    }
+    // Extract the most meaningful argument based on the tool
+    let detail = '';
+    const firstValue = argEntries[0]?.[1];
+    switch (tool) {
+        case 'read_file':
+            detail = typeof args.file_path === 'string' ? args.file_path : '';
+            break;
+        case 'write_file':
+            detail = typeof args.file_path === 'string' ? args.file_path : '';
+            break;
+        case 'edit_file':
+            detail = typeof args.file_path === 'string' ? args.file_path : '';
+            break;
+        case 'list_directory':
+            detail = typeof args.directory_path === 'string' ? args.directory_path : '(current)';
+            break;
+        case 'search_files':
+            detail = typeof args.search_term === 'string' ? `"${args.search_term}"` : '';
+            break;
+        case 'bash':
+            detail = typeof args.command === 'string'
+                ? args.command.split(/\s+/).slice(0, 3).join(' ') + (args.command.split(/\s+/).length > 3 ? '...' : '')
+                : '';
+            break;
+        case 'todo_write':
+            detail = Array.isArray(args.todos) ? `${args.todos.length} task(s)` : '';
+            break;
+        case 'webfetch':
+            detail = typeof args.url === 'string' ? new URL(args.url).hostname : '';
+            break;
+        case 'sub_agent':
+            // Nested sub-agent
+            detail = 'nested task...';
+            break;
+        default:
+            // Use the first argument value as fallback
+            detail = typeof firstValue === 'string'
+                ? firstValue.length > 30 ? firstValue.slice(0, 30) + '...' : firstValue
+                : '';
+    }
+    if (detail) {
+        return `Sub-agent ${tool.replace(/_/g, ' ')}: ${detail}`;
+    }
+    return `Sub-agent running ${tool}...`;
 }
 function replayMessagesToScrollback(addStatic, messages) {
     for (const message of messages) {
@@ -135,11 +195,11 @@ function replayMessagesToScrollback(addStatic, messages) {
         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`);
+            addStatic(_jsxs(Text, { dimColor: true, children: ['▶ ', toolName, ': ', compact, '\n'] }));
         }
     }
     if (messages.length > 0) {
-        addStatic('\n');
+        addStatic(_jsx(Text, { children: '\n' }));
     }
 }
 // Returns only the last N displayable lines of text so the live streaming box
@@ -154,7 +214,6 @@ function clipToRows(text, terminalRows) {
 }
 // ─── Available slash commands ───
 const SLASH_COMMANDS = [
-    { name: '/clear', description: 'Clear conversation and start fresh' },
     { name: '/help', description: 'Show all available commands' },
     { name: '/quit', description: 'Exit ProtoAgent' },
     { name: '/exit', description: 'Alias for /quit' },
@@ -162,7 +221,6 @@ const SLASH_COMMANDS = [
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
 const HELP_TEXT = [
     'Commands:',
-    '  /clear  - Clear conversation and start fresh',
     '  /help   - Show this help',
     '  /quit   - Exit ProtoAgent',
     '  /exit   - Alias for /quit',
@@ -238,40 +296,33 @@ const UsageDisplay = ({ usage, totalCost }) => {
 };
 /** Inline setup wizard — shown when no config exists. */
 const InlineSetup = ({ onComplete }) => {
-    const [setupStep, setSetupStep] = useState('provider');
+    const [setupStep, setSetupStep] = useState('target');
+    const [target, setTarget] = useState('project');
     const [selectedProviderId, setSelectedProviderId] = useState('');
     const [selectedModelId, setSelectedModelId] = useState('');
-    const [apiKeyError, setApiKeyError] = useState('');
-    const providerItems = getAllProviders().flatMap((provider) => provider.models.map((model) => ({
-        label: `${provider.name} - ${model.name}`,
-        value: `${provider.id}:::${model.id}`,
-    })));
+    const handleModelSelect = (providerId, modelId) => {
+        setSelectedProviderId(providerId);
+        setSelectedModelId(modelId);
+        setSetupStep('api_key');
+    };
+    const handleConfigComplete = (config) => {
+        writeInitConfig(target);
+        writeConfig(config, target);
+        onComplete(config);
+    };
+    if (setupStep === 'target') {
+        return (_jsx(Box, { marginTop: 1, children: _jsx(TargetSelection, { title: "First-time setup", subtitle: "Create a ProtoAgent runtime config:", onSelect: (value) => {
+                    setTarget(value);
+                    setSetupStep('provider');
+                } }) }));
+    }
     if (setupStep === 'provider') {
-        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: "First-time setup" }), _jsx(Text, { dimColor: true, children: "Select a provider and model:" }), _jsx(Box, { marginTop: 1, children: _jsx(Select, { options: providerItems.map((item) => ({ value: item.value, label: item.label })), onChange: (value) => {
-                            const [providerId, modelId] = value.split(':::');
-                            setSelectedProviderId(providerId);
-                            setSelectedModelId(modelId);
-                            setSetupStep('api_key');
-                        } }) })] }));
+        return (_jsx(Box, { marginTop: 1, children: _jsx(ModelSelection, { setSelectedProviderId: setSelectedProviderId, setSelectedModelId: setSelectedModelId, onSelect: handleModelSelect, title: "First-time setup" }) }));
     }
-    const provider = getProvider(selectedProviderId);
-    const hasResolvedAuth = Boolean(resolveApiKey({ provider: selectedProviderId, apiKey: undefined }));
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: "First-time setup" }), _jsxs(Text, { dimColor: true, children: ["Selected: ", provider?.name, " / ", selectedModelId] }), _jsx(Text, { children: hasResolvedAuth ? 'Optional API key:' : 'Enter your API key:' }), apiKeyError && _jsx(Text, { color: "red", children: apiKeyError }), _jsx(PasswordInput, { placeholder: hasResolvedAuth ? 'Press enter to keep resolved auth' : `Paste your ${provider?.apiKeyEnvVar || 'API'} key`, onSubmit: (value) => {
-                    if (value.trim().length === 0 && !hasResolvedAuth) {
-                        setApiKeyError('API key cannot be empty.');
-                        return;
-                    }
-                    const newConfig = {
-                        provider: selectedProviderId,
-                        model: selectedModelId,
-                        ...(value.trim().length > 0 ? { apiKey: value.trim() } : {}),
-                    };
-                    writeConfig(newConfig, 'project');
-                    onComplete(newConfig);
-                } })] }));
+    return (_jsx(Box, { marginTop: 1, children: _jsx(ApiKeyInput, { selectedProviderId: selectedProviderId, selectedModelId: selectedModelId, target: target, title: "First-time setup", showProviderHeaders: false, onComplete: handleConfigComplete }) }));
 };
 // ─── Main App ───
-export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
+export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }) => {
     const { exit } = useApp();
     const { stdout } = useStdout();
     const terminalRows = stdout?.rows ?? 24;
@@ -286,10 +337,10 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     // collisions if multiple App instances ever coexist.
     const staticCounterRef = useRef(0);
     const [staticItems, setStaticItems] = useState([]);
-    const addStatic = useCallback((text) => {
+    const addStatic = useCallback((node) => {
         staticCounterRef.current += 1;
         const id = `s${staticCounterRef.current}`;
-        setStaticItems((prev) => [...prev, { id, text }]);
+        setStaticItems((prev) => [...prev, { id, node }]);
     }, []);
     // Core state
     const [config, setConfig] = useState(null);
@@ -309,7 +360,6 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     const [threadErrors, setThreadErrors] = useState([]);
     const [initialized, setInitialized] = useState(false);
     const [needsSetup, setNeedsSetup] = useState(false);
-    const [logFilePath, setLogFilePath] = useState(null);
     // Input reset key — incremented on submit to force TextInput remount and clear
     const [inputResetKey, setInputResetKey] = useState(0);
     // Approval state
@@ -329,9 +379,15 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     const assistantMessageRef = useRef(null);
     // Abort controller for cancelling the current completion
     const abortControllerRef = useRef(null);
+    // Buffer for streaming text that accumulates content and flushes complete lines to static
+    // This prevents the live streaming area from growing unbounded - complete lines are
+    // immediately flushed to <Static>, only the incomplete final line stays in the dynamic frame
+    const streamingBufferRef = useRef({
+        unflushedContent: '',
+        hasFlushedAnyLine: false,
+    });
     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);
@@ -350,7 +406,7 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                 setCompletionMessages(loadedSession.completionMessages);
                 if (!didPrintIntroRef.current) {
                     printBanner(addStatic);
-                    printRuntimeHeader(addStatic, loadedConfig, loadedSession, logFilePath, dangerouslyAcceptAll);
+                    printRuntimeHeader(addStatic, loadedConfig, loadedSession, dangerouslySkipPermissions);
                     replayMessagesToScrollback(addStatic, loadedSession.completionMessages);
                     didPrintIntroRef.current = true;
                 }
@@ -369,13 +425,13 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
             setSession(newSession);
             if (!didPrintIntroRef.current) {
                 printBanner(addStatic);
-                printRuntimeHeader(addStatic, loadedConfig, newSession, logFilePath, dangerouslyAcceptAll);
+                printRuntimeHeader(addStatic, loadedConfig, newSession, dangerouslySkipPermissions);
                 didPrintIntroRef.current = true;
             }
         }
         setNeedsSetup(false);
         setInitialized(true);
-    }, [dangerouslyAcceptAll, logFilePath, sessionId, addStatic]);
+    }, [dangerouslySkipPermissions, sessionId, addStatic]);
     // ─── Initialization ───
     useEffect(() => {
         if (!loading) {
@@ -389,23 +445,16 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     }, [loading]);
     useEffect(() => {
         if (error) {
-            addStatic(`\x1b[31mError: ${error}\x1b[0m\n\n`);
+            addStatic(_jsxs(Text, { color: "red", children: ["Error: ", error] }));
         }
     }, [error, addStatic]);
-    useEffect(() => {
-        if (!didPrintIntroRef.current || !logFilePath || printedLogPathRef.current === logFilePath) {
-            return;
-        }
-        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`);
+            addStatic(_jsxs(Text, { color: "red", children: ["Error: ", threadError.message] }));
         }
     }, [threadErrors, addStatic]);
     useEffect(() => {
@@ -415,15 +464,14 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                 const level = LogLevel[logLevel.toUpperCase()];
                 if (level !== undefined) {
                     setLogLevel(level);
-                    const logPath = initLogFile();
-                    setLogFilePath(logPath);
+                    initLogFile();
                     logger.info(`ProtoAgent started with log level: ${logLevel}`);
-                    logger.info(`Log file: ${logPath}`);
+                    logger.info(`Log file: ${logger.getLogFilePath()}`);
                 }
             }
             // Set global approval mode
-            if (dangerouslyAcceptAll) {
-                setDangerouslyAcceptAll(true);
+            if (dangerouslySkipPermissions) {
+                setDangerouslySkipPermissions(true);
             }
             // Register interactive approval handler
             setApprovalHandler(async (req) => {
@@ -477,23 +525,6 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                     setError(`Failed to save session before exit: ${err.message}`);
                 }
                 return true;
-            case '/clear':
-                // Re-initialize messages with just the system prompt
-                initializeMessages().then((msgs) => {
-                    setCompletionMessages(msgs);
-                    setHelpMessage(null);
-                    setLastUsage(null);
-                    setTotalCost(0);
-                    setThreadErrors([]);
-                    if (session) {
-                        const newSession = createSession(config.model, config.provider);
-                        clearTodos(session.id);
-                        clearTodos(newSession.id);
-                        newSession.completionMessages = msgs;
-                        setSession(newSession);
-                    }
-                });
-                return true;
             case '/expand':
             case '/collapse':
                 // expand/collapse removed — transcript lives in scrollback
@@ -527,8 +558,9 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         setError(null);
         setHelpMessage(null);
         setThreadErrors([]);
-        // Reset turn tracking
+        // Reset turn tracking and streaming buffer
         assistantMessageRef.current = null;
+        streamingBufferRef.current = { unflushedContent: '', hasFlushedAnyLine: false };
         // 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 };
@@ -544,50 +576,92 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
             const updatedMessages = await runAgenticLoop(clientRef.current, config.model, [...completionMessages, userMessage], trimmed, (event) => {
                 switch (event.type) {
                     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>.
+                        const deltaText = event.content || '';
+                        // First text delta of this turn: initialize ref, show streaming indicator.
                         if (!assistantMessageRef.current || assistantMessageRef.current.kind !== 'streaming_text') {
-                            // First text delta of this turn: initialise ref, show streaming indicator.
-                            const assistantMsg = { role: 'assistant', content: event.content || '', tool_calls: [] };
+                            // Trim leading whitespace from first delta - LLMs often output leading \n or spaces
+                            const trimmedDelta = deltaText.replace(/^\s+/, '');
+                            const assistantMsg = { role: 'assistant', content: trimmedDelta, tool_calls: [] };
                             const idx = completionMessages.length + 1;
                             assistantMessageRef.current = { message: assistantMsg, index: idx, kind: 'streaming_text' };
                             setIsStreaming(true);
-                            setStreamingText(event.content || '');
                             setCompletionMessages((prev) => [...prev, assistantMsg]);
+                            // Initialize the streaming buffer and process the first chunk
+                            // through the same split logic as subsequent deltas for consistency
+                            const buffer = { unflushedContent: trimmedDelta, hasFlushedAnyLine: false };
+                            streamingBufferRef.current = buffer;
+                            // Process the first chunk: split on newlines and flush complete lines
+                            const lines = buffer.unflushedContent.split('\n');
+                            if (lines.length > 1) {
+                                const completeLines = lines.slice(0, -1);
+                                const textToFlush = completeLines.join('\n');
+                                if (textToFlush) {
+                                    addStatic(renderFormattedText(textToFlush));
+                                    buffer.hasFlushedAnyLine = true;
+                                }
+                                buffer.unflushedContent = lines[lines.length - 1];
+                            }
+                            setStreamingText(buffer.unflushedContent);
                         }
                         else {
-                            // Subsequent deltas — append to ref AND to React state for live display.
-                            assistantMessageRef.current.message.content += event.content || '';
-                            setStreamingText((prev) => prev + (event.content || ''));
+                            // Subsequent deltas — append to ref and buffer, then flush complete lines
+                            assistantMessageRef.current.message.content += deltaText;
+                            // Accumulate in buffer and flush complete lines to static
+                            const buffer = streamingBufferRef.current;
+                            buffer.unflushedContent += deltaText;
+                            // Split on newlines to find complete lines
+                            const lines = buffer.unflushedContent.split('\n');
+                            // If we have more than 1 element, there were newlines
+                            if (lines.length > 1) {
+                                // All lines except the last one are complete (ended with \n)
+                                const completeLines = lines.slice(0, -1);
+                                // Build the text to flush - each complete line gets a newline added back
+                                const textToFlush = completeLines.join('\n');
+                                if (textToFlush) {
+                                    addStatic(renderFormattedText(textToFlush));
+                                    buffer.hasFlushedAnyLine = true;
+                                }
+                                // Keep only the last (incomplete) line in the buffer
+                                buffer.unflushedContent = lines[lines.length - 1];
+                            }
+                            // Show the incomplete line (if any) in the dynamic frame
+                            setStreamingText(buffer.unflushedContent);
                         }
                         break;
                     }
                     case 'sub_agent_iteration':
                         if (event.subAgentTool) {
-                            const { tool, status } = event.subAgentTool;
+                            const { tool, status, args } = event.subAgentTool;
                             if (status === 'running') {
-                                setActiveTool(`sub_agent → ${tool}`);
+                                setActiveTool(formatSubAgentActivity(tool, args));
                             }
                             else {
                                 setActiveTool(null);
                             }
                         }
+                        // Handle sub-agent usage update
+                        if (event.subAgentUsage) {
+                            setTotalCost((prev) => prev + event.subAgentUsage.cost);
+                        }
                         break;
                     case 'tool_call':
                         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.
+                            // flush any remaining unflushed content to <Static> now.
+                            // The streaming buffer contains text that hasn't been flushed yet
+                            // (the incomplete final line). We need to flush it before the tool call.
                             if (assistantMessageRef.current?.kind === 'streaming_text') {
-                                const precedingText = assistantMessageRef.current.message.content || '';
-                                if (precedingText) {
-                                    addStatic(`${normalizeTranscriptText(precedingText)}\n\n`);
+                                const buffer = streamingBufferRef.current;
+                                // Flush any remaining unflushed content
+                                if (buffer.unflushedContent) {
+                                    addStatic(renderFormattedText(buffer.unflushedContent));
                                 }
+                                // Add spacing after the streamed text and before the tool call
+                                addStatic(renderFormattedText('\n'));
+                                // Reset streaming state and buffer
+                                streamingBufferRef.current = { unflushedContent: '', hasFlushedAnyLine: false };
                                 setIsStreaming(false);
                                 setStreamingText('');
                                 assistantMessageRef.current = null;
@@ -646,7 +720,7 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                                 .replace(/\s+/g, ' ')
                                 .trim()
                                 .slice(0, 180);
-                            addStatic(`\x1b[2m▶ ${toolCall.name}: ${compactResult}\x1b[0m\n`);
+                            addStatic(_jsxs(Text, { dimColor: true, children: ['▶ ', toolCall.name, ': ', compactResult, '\n'] }));
                             // Flush the assistant message + tool result into completionMessages
                             // for session saving.
                             setCompletionMessages((prev) => {
@@ -713,14 +787,32 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                     case 'done':
                         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`);
+                            const buffer = streamingBufferRef.current;
+                            // Flush any remaining unflushed content from the buffer
+                            // This is the final incomplete line that was being displayed live
+                            if (buffer.unflushedContent) {
+                                // If we've already flushed some lines, just append the remainder
+                                // Otherwise, normalize and flush the full content
+                                if (buffer.hasFlushedAnyLine) {
+                                    addStatic(renderFormattedText(buffer.unflushedContent));
+                                }
+                                else {
+                                    // Nothing was flushed yet, normalize the full content
+                                    const normalized = normalizeTranscriptText(finalRef.message.content || '');
+                                    if (normalized) {
+                                        addStatic(renderFormattedText(normalized));
+                                    }
+                                }
+                            }
+                            // Add final spacing after the streamed text
+                            // Always add one newline - the user message adds another for blank line separation
+                            if (buffer.unflushedContent) {
+                                addStatic(renderFormattedText('\n'));
                             }
+                            // Clear streaming state and buffer
                             setIsStreaming(false);
                             setStreamingText('');
+                            streamingBufferRef.current = { unflushedContent: '', hasFlushedAnyLine: false };
                             setCompletionMessages((prev) => {
                                 const updated = [...prev];
                                 updated[finalRef.index] = { ...finalRef.message };
@@ -766,11 +858,11 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         }
     });
     // ─── Render ───
-    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) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Static, { items: staticItems, children: (item) => (_jsx(Text, { children: item.node }, 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}`);
                     });
-                } })), 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) => {
+                } })), isStreaming && (_jsxs(Text, { wrap: "wrap", children: [renderFormattedText(clipToRows(streamingText, terminalRows)), _jsx(Text, { dimColor: true, children: "\u258D" })] })), threadErrors.filter((threadError) => threadError.transient).map((threadError) => (_jsx(LeftBar, { color: "gray", marginBottom: 1, children: _jsx(Text, { color: "gray", children: 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] })] }))] }));