protoagent 0.1.3 → 0.1.4

package/dist/App.js

@@ -6,8 +6,8 @@ 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 } from 'react';
-import { Box, Text, useApp, useInput } from 'ink';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { Box, Text, useApp, useInput, useStdout } from 'ink';
 import { TextInput, Select, PasswordInput } from '@inkjs/ui';
 import BigText from 'ink-big-text';
 import { OpenAI } from 'openai';
@@ -24,7 +24,7 @@ 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) {
+function renderMessageList(messagesToRender, allMessages, expandedMessages, startIndex = 0, deferTables = false) {
     const rendered = [];
     const skippedIndices = new Set();
     messagesToRender.forEach((msg, localIndex) => {
@@ -35,6 +35,7 @@ function renderMessageList(messagesToRender, allMessages, expandedMessages, star
         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';
@@ -43,12 +44,15 @@ function renderMessageList(messagesToRender, allMessages, expandedMessages, star
         const isConversationTurn = currentSpeaker === 'user' || currentSpeaker === 'assistant';
         const previousWasConversationTurn = previousSpeaker === 'user' || previousSpeaker === 'assistant';
         const speakerChanged = previousSpeaker !== currentSpeaker;
-        if (isFirstSystemMessage) {
+        // 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 (isConversationTurn && previousWasConversationTurn && speakerChanged) {
-            rendered.push(_jsx(Text, { children: " " }, `turn-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;
@@ -58,8 +62,8 @@ function renderMessageList(messagesToRender, allMessages, expandedMessages, star
             return;
         }
         if (isToolCall) {
-            if (displayContent && displayContent.trim().length > 0) {
-                rendered.push(_jsx(Box, { flexDirection: "column", children: _jsx(FormattedMessage, { content: displayContent.trimEnd() }) }, `${index}-text`));
+            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,
@@ -72,7 +76,7 @@ function renderMessageList(messagesToRender, allMessages, expandedMessages, star
                     const nextMsg = messagesToRender[nextLocalIndex];
                     if (nextMsg.role === 'tool' && nextMsg.tool_call_id === toolCall.id) {
                         toolResults.set(toolCall.id, {
-                            content: nextMsg.content || '',
+                            content: normalizeMessageSpacing(nextMsg.content || ''),
                             name: nextMsg.name || toolCall.name,
                         });
                         skippedIndices.add(nextLocalIndex);
@@ -84,19 +88,23 @@ function renderMessageList(messagesToRender, allMessages, expandedMessages, star
             return;
         }
         if (msg.role === 'tool') {
-            rendered.push(_jsx(CollapsibleBox, { title: `${msgAny.name || 'tool'} result`, content: displayContent || '', dimColor: true, maxPreviewLines: 3, expanded: expandedMessages.has(index) }, index));
+            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: trimAssistantSpacing(displayContent || '', followsToolMessage ? 'start' : 'both') }) }, index));
+        rendered.push(_jsx(Box, { flexDirection: "column", children: _jsx(FormattedMessage, { content: normalizedContent, deferTables: deferTables }) }, index));
     });
     return rendered;
 }
-function trimAssistantSpacing(message, trimMode = 'both') {
-    if (trimMode === 'start')
-        return message.trimStart();
-    if (trimMode === 'end')
-        return message.trimEnd();
-    return message.trim();
+function normalizeMessageSpacing(message) {
+    const normalized = message.replace(/\r\n/g, '\n');
+    const lines = normalized.split('\n');
+    while (lines.length > 0 && lines[0].trim() === '') {
+        lines.shift();
+    }
+    while (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+        lines.pop();
+    }
+    return lines.join('\n');
 }
 function getVisualSpeaker(message) {
     if (!message)
@@ -186,13 +194,13 @@ const ApprovalPrompt = ({ request, onRespond }) => {
         { label: sessionApprovalLabel, value: 'approve_session' },
         { label: 'Reject', value: 'reject' },
     ];
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginY: 1, children: [_jsx(Text, { color: "yellow", 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(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) }) })] }));
 };
 /** Cost/usage display in the status bar. */
 const UsageDisplay = ({ usage, totalCost }) => {
     if (!usage && totalCost === 0)
         return null;
-    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)] }))] }));
+    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)] }))] }));
 };
 /** Inline setup wizard — shown when no config exists. */
 const InlineSetup = ({ onComplete }) => {
@@ -231,6 +239,7 @@ const InlineSetup = ({ onComplete }) => {
 // ─── Main App ───
 export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     const { exit } = useApp();
+    const { stdout } = useStdout();
     // Core state
     const [config, setConfig] = useState(null);
     const [completionMessages, setCompletionMessages] = useState([]);
@@ -242,7 +251,10 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     const [initialized, setInitialized] = useState(false);
     const [needsSetup, setNeedsSetup] = useState(false);
     const [logFilePath, setLogFilePath] = useState(null);
-    // Collapsible state — track which message indices are expanded
+    // 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) => {
@@ -259,6 +271,8 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     const [lastUsage, setLastUsage] = useState(null);
     const [totalCost, setTotalCost] = useState(0);
     const [spinnerFrame, setSpinnerFrame] = useState(0);
+    // Active tool tracking — shows which tool is currently executing
+    const [activeTool, setActiveTool] = useState(null);
     // Session state
     const [session, setSession] = useState(null);
     // Quitting state — shows the resume command before exiting
@@ -269,6 +283,8 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
     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);
     // ─── Post-config initialization (reused after inline setup) ───
     const initializeWithConfig = useCallback(async (loadedConfig) => {
         setConfig(loadedConfig);
@@ -313,6 +329,18 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         }, 100);
         return () => clearInterval(interval);
     }, [loading]);
+    useEffect(() => {
+        if (!stdout)
+            return;
+        const handleResize = () => {
+            setInputWidthKey(stdout.columns ?? 80);
+        };
+        handleResize();
+        stdout.on('resize', handleResize);
+        return () => {
+            stdout.off('resize', handleResize);
+        };
+    }, [stdout]);
     useEffect(() => {
         const init = async () => {
             // Set log level and initialize log file
@@ -416,7 +444,7 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
             default:
                 return false;
         }
-    }, [exit, session, completionMessages]);
+    }, [config, exit, session, completionMessages]);
     // ─── Submit handler ───
     const handleSubmit = useCallback(async (value) => {
         const trimmed = value.trim();
@@ -427,10 +455,12 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
             const handled = await handleSlashCommand(trimmed);
             if (handled) {
                 setInputText('');
+                setInputResetKey((prev) => prev + 1);
                 return;
             }
         }
         setInputText('');
+        setInputResetKey((prev) => prev + 1); // Force TextInput to remount and clear
         setLoading(true);
         setError(null);
         setHelpMessage(null);
@@ -448,9 +478,9 @@ 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':
-                        // Update the current assistant message in completionMessages in real-time
+                        // Update the current assistant message in completionMessages
                         if (!assistantMessageRef.current || assistantMessageRef.current.kind !== 'streaming_text') {
-                            // First text delta - create the assistant message
+                            // First text delta — create the assistant message immediately
                             const assistantMsg = { role: 'assistant', content: event.content || '', tool_calls: [] };
                             setCompletionMessages((prev) => {
                                 assistantMessageRef.current = { message: assistantMsg, index: prev.length, kind: 'streaming_text' };
@@ -458,80 +488,96 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                             });
                         }
                         else {
-                            // Subsequent text delta - update the assistant message
+                            // Subsequent deltas — accumulate in ref, debounce the render (~50ms)
                             assistantMessageRef.current.message.content += event.content || '';
-                            setCompletionMessages((prev) => {
-                                const updated = [...prev];
-                                updated[assistantMessageRef.current.index] = { ...assistantMessageRef.current.message };
-                                return updated;
-                            });
+                            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);
+                            }
                         }
                         break;
                     case 'tool_call':
                         if (event.toolCall) {
                             const toolCall = event.toolCall;
-                            setCompletionMessages((prev) => {
-                                const existingRef = assistantMessageRef.current;
-                                const existingMessage = existingRef?.message
-                                    ? {
-                                        ...existingRef.message,
-                                        tool_calls: [...(existingRef.message.tool_calls || [])],
-                                    }
-                                    : null;
-                                const assistantMsg = existingMessage || {
-                                    role: 'assistant',
-                                    content: '',
-                                    tool_calls: [],
-                                };
-                                const existingToolCallIndex = assistantMsg.tool_calls.findIndex((existingToolCall) => existingToolCall.id === toolCall.id);
-                                const nextToolCall = {
-                                    id: toolCall.id,
-                                    type: 'function',
-                                    function: {
-                                        name: toolCall.name,
-                                        arguments: toolCall.args,
-                                    },
-                                };
-                                if (existingToolCallIndex === -1) {
-                                    assistantMsg.tool_calls.push(nextToolCall);
-                                }
-                                else {
-                                    assistantMsg.tool_calls[existingToolCallIndex] = nextToolCall;
+                            setActiveTool(toolCall.name);
+                            // Track the tool call in the ref WITHOUT triggering a render.
+                            // The render will happen when tool_result arrives.
+                            const existingRef = assistantMessageRef.current;
+                            const assistantMsg = existingRef?.message
+                                ? {
+                                    ...existingRef.message,
+                                    tool_calls: [...(existingRef.message.tool_calls || [])],
                                 }
-                                const nextIndex = existingRef?.index ?? prev.length;
+                                : { role: 'assistant', content: '', tool_calls: [] };
+                            const nextToolCall = {
+                                id: toolCall.id,
+                                type: 'function',
+                                function: { name: toolCall.name, arguments: toolCall.args },
+                            };
+                            const idx = assistantMsg.tool_calls.findIndex((tc) => tc.id === toolCall.id);
+                            if (idx === -1) {
+                                assistantMsg.tool_calls.push(nextToolCall);
+                            }
+                            else {
+                                assistantMsg.tool_calls[idx] = nextToolCall;
+                            }
+                            if (!existingRef) {
+                                // First tool call — we need to add the assistant message to state
+                                setCompletionMessages((prev) => {
+                                    assistantMessageRef.current = {
+                                        message: assistantMsg,
+                                        index: prev.length,
+                                        kind: 'tool_call_assistant',
+                                    };
+                                    return [...prev, assistantMsg];
+                                });
+                            }
+                            else {
+                                // Subsequent tool calls — just update the ref, no render
                                 assistantMessageRef.current = {
+                                    ...existingRef,
                                     message: assistantMsg,
-                                    index: nextIndex,
                                     kind: 'tool_call_assistant',
                                 };
-                                if (existingRef) {
-                                    const updated = [...prev];
-                                    updated[existingRef.index] = assistantMsg;
-                                    return updated;
-                                }
-                                return [...prev, assistantMsg];
-                            });
+                            }
                         }
                         break;
                     case 'tool_result':
                         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);
                                 }
                             }
-                            // Add tool result message to completion messages
-                            setCompletionMessages((prev) => [
-                                ...prev,
-                                {
+                            // Flush the assistant message update + tool result in a SINGLE state update
+                            setCompletionMessages((prev) => {
+                                const updated = [...prev];
+                                // Sync assistant message (may have new tool_calls since last render)
+                                if (assistantMessageRef.current) {
+                                    updated[assistantMessageRef.current.index] = {
+                                        ...assistantMessageRef.current.message,
+                                    };
+                                }
+                                // Append tool result
+                                updated.push({
                                     role: 'tool',
                                     tool_call_id: toolCall.id,
                                     content: toolCall.result || '',
                                     name: toolCall.name,
-                                },
-                            ]);
+                                });
+                                return updated;
+                            });
                         }
                         break;
                     case 'usage':
@@ -571,7 +617,16 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                             setError('Unknown error');
                         }
                         break;
+                    case 'iteration_done':
+                        assistantMessageRef.current = null;
+                        break;
                     case 'done':
+                        // Clear any pending text delta timer
+                        if (textFlushTimerRef.current) {
+                            clearTimeout(textFlushTimerRef.current);
+                            textFlushTimerRef.current = null;
+                        }
+                        setActiveTool(null);
                         setThreadErrors((prev) => prev.filter((threadError) => !threadError.transient));
                         break;
                 }
@@ -617,18 +672,17 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         : completionMessages.length;
     const archivedMessages = completionMessages.slice(0, liveStartIndex);
     const liveMessages = completionMessages.slice(liveStartIndex);
-    const archivedMessageNodes = renderMessageList(archivedMessages, completionMessages, expandedMessages);
-    const liveMessageNodes = renderMessageList(liveMessages, completionMessages, expandedMessages, liveStartIndex);
-    return (_jsxs(Box, { flexDirection: "column", height: "100%", children: [_jsx(BigText, { text: "ProtoAgent", font: "tiny", colors: ["#09A469"] }), _jsx(Text, { italic: true, dimColor: true, children: "\"The prefix \"proto-\" comes from the Greek word pr\u014Dtos \u2014 the beginning stage of something that will later evolve.\"" }), _jsx(Text, { children: " " }), 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) => {
+    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) => {
                     initializeWithConfig(newConfig).catch((err) => {
                         setError(`Initialization failed: ${err.message}`);
                     });
-                } })), _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflowY: "hidden", 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 && ((() => {
+                } })), _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];
-                        // Show "Thinking..." only if the last message is a user message (no assistant response yet)
                         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], " Working..."] }) })), initialized && !pendingApproval && (_jsxs(Box, { borderStyle: "single", borderColor: "green", paddingX: 1, children: [_jsx(Text, { color: "green", children: '> ' }), _jsx(TextInput, { defaultValue: inputText, onChange: setInputText, placeholder: "Type your message... (/help for commands)", onSubmit: handleSubmit }, inputText === '' ? 'reset' : 'active')] })), 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] })] }))] }));
+                        } }))] }), _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] })] }))] }));
 };

package/dist/agentic-loop.js

@@ -351,20 +351,19 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
                     }
                 }
             }
-            // Emit usage info
-            if (pricing) {
+            // Emit usage info — always emit, even without pricing (use estimates)
+            {
                 const inputTokens = actualUsage?.prompt_tokens ?? estimateConversationTokens(updatedMessages);
                 const outputTokens = actualUsage?.completion_tokens ?? estimateTokens(assistantMessage.content || '');
-                const usageInfo = createUsageInfo(inputTokens, outputTokens, pricing);
-                const contextInfo = getContextInfo(updatedMessages, pricing);
+                const cost = pricing
+                    ? createUsageInfo(inputTokens, outputTokens, pricing).estimatedCost
+                    : 0;
+                const contextPercent = pricing
+                    ? getContextInfo(updatedMessages, pricing).utilizationPercentage
+                    : 0;
                 onEvent({
                     type: 'usage',
-                    usage: {
-                        inputTokens,
-                        outputTokens,
-                        cost: usageInfo.estimatedCost,
-                        contextPercent: contextInfo.utilizationPercentage,
-                    },
+                    usage: { inputTokens, outputTokens, cost, contextPercent },
                 });
             }
             // Handle tool calls
@@ -391,6 +390,12 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
                 });
                 updatedMessages.push(assistantMessage);
                 for (const toolCall of assistantMessage.tool_calls) {
+                    // Check abort between tool calls
+                    if (abortSignal?.aborted) {
+                        logger.debug('Agentic loop aborted between tool calls');
+                        emitAbortAndFinish(onEvent);
+                        return updatedMessages;
+                    }
                     const { name, arguments: argsStr } = toolCall.function;
                     onEvent({
                         type: 'tool_call',
@@ -401,7 +406,18 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
                         let result;
                         // Handle sub-agent tool specially
                         if (name === 'sub_agent') {
-                            result = await runSubAgent(client, model, args.task, args.max_iterations, requestDefaults);
+                            const subProgress = (evt) => {
+                                onEvent({
+                                    type: 'tool_call',
+                                    toolCall: {
+                                        id: toolCall.id,
+                                        name: `sub_agent → ${evt.tool}`,
+                                        args: '',
+                                        status: evt.status === 'running' ? 'running' : 'done',
+                                    },
+                                });
+                            };
+                            result = await runSubAgent(client, model, args.task, args.max_iterations, requestDefaults, subProgress);
                         }
                         else {
                             result = await handleToolCall(name, args, { sessionId });
@@ -435,6 +451,9 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
                         });
                     }
                 }
+                // Signal UI that this iteration's tool calls are all done,
+                // so it can flush completed messages to static output.
+                onEvent({ type: 'iteration_done' });
                 // Continue loop — let the LLM process tool results
                 continue;
             }

package/dist/components/CollapsibleBox.js

@@ -7,7 +7,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, borderStyle: "round", borderColor: titleColor || 'white', children: [_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: titleColor, dimColor: dimColor, bold: true, children: title }) }), _jsx(Box, { marginLeft: 2, paddingRight: 1, children: _jsx(Text, { dimColor: dimColor, children: content }) })] }));
+        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 }) })] }));
     }
     // For long content, show preview or full content
     let preview;
@@ -22,5 +22,5 @@ export const CollapsibleBox = ({ title, content, titleColor, dimColor = false, m
             : linesTruncated;
     }
     const hasMore = !expanded;
-    return (_jsxs(Box, { flexDirection: "column", marginBottom: marginBottom, borderStyle: "round", borderColor: titleColor || 'white', children: [_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: titleColor, dimColor: dimColor, bold: true, children: [expanded ? '▼' : '▶', " ", title] }) }), _jsxs(Box, { flexDirection: "column", marginLeft: 2, paddingRight: 1, children: [_jsx(Text, { dimColor: dimColor, children: preview }), hasMore && _jsx(Text, { dimColor: true, children: "... (use /expand to see all)" })] })] }));
+    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)" })] })] }));
 };

package/dist/components/ConsolidatedToolMessage.js

@@ -1,6 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { Table } from './Table.js';
 import { FormattedMessage } from './FormattedMessage.js';
 export const ConsolidatedToolMessage = ({ toolCalls, toolResults, expanded = false, }) => {
     const toolNames = toolCalls.map((toolCall) => toolCall.name);
@@ -9,18 +8,11 @@ export const ConsolidatedToolMessage = ({ toolCalls, toolResults, expanded = fal
     const titleColor = containsTodoTool ? 'green' : 'white';
     const isExpanded = expanded || containsTodoTool;
     if (isExpanded) {
-        return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "white", children: [_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: titleColor, bold: true, children: ["\u25BC ", title] }) }), _jsx(Box, { flexDirection: "column", marginLeft: 2, paddingRight: 1, children: toolCalls.map((toolCall, idx) => {
+        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;
-                        // Try to see if it's JSON that could be a table
-                        let isJsonTable = false;
-                        try {
-                            const parsed = JSON.parse(result.content);
-                            isJsonTable = typeof parsed === 'object' && parsed !== null;
-                        }
-                        catch (e) { }
-                        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "cyan", bold: true, children: ["[", result.name, "]:"] }), isJsonTable ? (_jsx(Table, { data: result.content })) : (_jsx(FormattedMessage, { content: result.content }))] }, idx));
+                        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) => {
@@ -37,5 +29,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", borderStyle: "round", borderColor: titleColor || 'white', children: [_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: titleColor, dimColor: true, bold: true, children: ["\u25B6 ", title] }) }), _jsx(Box, { marginLeft: 2, paddingRight: 1, children: _jsx(Text, { dimColor: true, children: preview }) })] }));
+    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 }) })] }));
 };

package/dist/components/FormattedMessage.js

@@ -1,16 +1,89 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { Table } from './Table.js';
 import { formatMessage } from '../utils/format-message.js';
+export const DEFERRED_TABLE_PLACEHOLDER = 'table loading';
+const graphemeSegmenter = typeof Intl !== 'undefined' && 'Segmenter' in Intl
+    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+    : null;
+const COMBINING_MARK_PATTERN = /\p{Mark}/u;
+const ZERO_WIDTH_PATTERN = /[\u200B-\u200D\uFE0E\uFE0F]/u;
+const DOUBLE_WIDTH_PATTERN = /[\u1100-\u115F\u2329\u232A\u2E80-\uA4CF\uAC00-\uD7A3\uF900-\uFAFF\uFE10-\uFE19\uFE30-\uFE6F\uFF00-\uFF60\uFFE0-\uFFE6\u{1F300}-\u{1FAFF}\u{1F900}-\u{1F9FF}\u{1F1E6}-\u{1F1FF}]/u;
+function splitGraphemes(text) {
+    if (!text)
+        return [];
+    if (graphemeSegmenter) {
+        return Array.from(graphemeSegmenter.segment(text), (segment) => segment.segment);
+    }
+    return Array.from(text);
+}
+function getGraphemeWidth(grapheme) {
+    if (!grapheme)
+        return 0;
+    if (ZERO_WIDTH_PATTERN.test(grapheme))
+        return 0;
+    if (COMBINING_MARK_PATTERN.test(grapheme))
+        return 0;
+    if (/^[\u0000-\u001F\u007F-\u009F]$/.test(grapheme))
+        return 0;
+    if (DOUBLE_WIDTH_PATTERN.test(grapheme))
+        return 2;
+    return 1;
+}
+function getTextWidth(text) {
+    return splitGraphemes(text).reduce((width, grapheme) => width + getGraphemeWidth(grapheme), 0);
+}
+function padToWidth(text, width) {
+    const padding = Math.max(0, width - getTextWidth(text));
+    return text + ' '.repeat(padding);
+}
+function parseMarkdownTableToRows(markdown) {
+    const lines = markdown.trim().split('\n');
+    if (lines.length < 3)
+        return null;
+    const parseRow = (row) => row.split('|')
+        .map((cell) => cell.trim())
+        .filter((cell, index, array) => {
+        if (index === 0 && cell === '')
+            return false;
+        if (index === array.length - 1 && cell === '')
+            return false;
+        return true;
+    });
+    const header = parseRow(lines[0]);
+    const separator = parseRow(lines[1]);
+    if (header.length === 0 || separator.length === 0)
+        return null;
+    if (!separator.every((cell) => /^:?-{3,}:?$/.test(cell.replace(/\s+/g, ''))))
+        return null;
+    const rows = lines.slice(2).map(parseRow);
+    return [header, ...rows];
+}
+function renderPreformattedTable(markdown) {
+    const rows = parseMarkdownTableToRows(markdown);
+    if (!rows || rows.length === 0) {
+        return markdown.trim();
+    }
+    const columnCount = Math.max(...rows.map((row) => row.length));
+    const normalizedRows = rows.map((row) => Array.from({ length: columnCount }, (_, index) => row[index] ?? ''));
+    const widths = Array.from({ length: columnCount }, (_, index) => Math.max(...normalizedRows.map((row) => getTextWidth(row[index]))));
+    const formatRow = (row) => row
+        .map((cell, index) => padToWidth(cell, widths[index]))
+        .join('  ')
+        .trimEnd();
+    const header = formatRow(normalizedRows[0]);
+    const divider = widths.map((width) => '-'.repeat(width)).join('  ');
+    const body = normalizedRows.slice(1).map(formatRow);
+    return [header, divider, ...body].join('\n');
+}
 /**
  * FormattedMessage component
  *
  * Parses a markdown string and renders:
  * - Standard text with ANSI formatting
- * - Markdown tables using ink-table
+ * - Markdown tables as preformatted monospace text
  * - Code blocks (rendered in a box)
  */
-export const FormattedMessage = ({ content }) => {
+export const FormattedMessage = ({ content, deferTables = false }) => {
     if (!content)
         return null;
     const lines = content.split('\n');
@@ -80,7 +153,10 @@ export const FormattedMessage = ({ content }) => {
             if (block.type === 'table') {
                 if (!block.content.trim())
                     return null;
-                return _jsx(Table, { data: block.content }, index);
+                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));
             }
             if (block.type === 'code') {
                 return (_jsx(Box, { marginY: 1, paddingX: 1, borderStyle: "round", borderColor: "gray", children: _jsx(Text, { dimColor: true, children: block.content }) }, index));