protoagent 0.1.2 → 0.1.4

package/dist/App.js

@@ -6,13 +6,14 @@ 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';
 import { readConfig, writeConfig, resolveApiKey } from './config.js';
-import { getProvider, getModelPricing, SUPPORTED_MODELS } from './providers.js';
+import { loadRuntimeConfig } from './runtime-config.js';
+import { getAllProviders, getProvider, getModelPricing, getRequestDefaultParams } from './providers.js';
 import { runAgenticLoop, initializeMessages, } from './agentic-loop.js';
 import { setDangerouslyAcceptAll, setApprovalHandler, clearApprovalHandler } from './tools/index.js';
 import { setLogLevel, LogLevel, initLogFile, logger } from './utils/logger.js';
@@ -23,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) => {
@@ -34,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';
@@ -42,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;
@@ -57,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,
@@ -71,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);
@@ -83,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)
@@ -143,7 +152,7 @@ function buildClient(config) {
     if (baseURL) {
         clientOptions.baseURL = baseURL;
     }
-    // Custom headers: parse PROTOAGENT_CUSTOM_HEADERS (newline-separated "Key: Value" pairs)
+    // Custom headers: env override takes precedence over provider defaults
     const rawHeaders = process.env.PROTOAGENT_CUSTOM_HEADERS?.trim();
     if (rawHeaders) {
         const defaultHeaders = {};
@@ -160,6 +169,9 @@ function buildClient(config) {
             clientOptions.defaultHeaders = defaultHeaders;
         }
     }
+    else if (provider?.headers && Object.keys(provider.headers).length > 0) {
+        clientOptions.defaultHeaders = provider.headers;
+    }
     return new OpenAI(clientOptions);
 }
 // ─── Sub-components ───
@@ -182,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 }) => {
@@ -196,7 +208,7 @@ const InlineSetup = ({ onComplete }) => {
     const [selectedProviderId, setSelectedProviderId] = useState('');
     const [selectedModelId, setSelectedModelId] = useState('');
     const [apiKeyError, setApiKeyError] = useState('');
-    const providerItems = SUPPORTED_MODELS.flatMap((provider) => provider.models.map((model) => ({
+    const providerItems = getAllProviders().flatMap((provider) => provider.models.map((model) => ({
         label: `${provider.name} - ${model.name}`,
         value: `${provider.id}:::${model.id}`,
     })));
@@ -209,15 +221,16 @@ const InlineSetup = ({ onComplete }) => {
                         } }) })] }));
     }
     const provider = getProvider(selectedProviderId);
-    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: "Enter your API key:" }), apiKeyError && _jsx(Text, { color: "red", children: apiKeyError }), _jsx(PasswordInput, { placeholder: `Paste your ${provider?.apiKeyEnvVar || 'API'} key`, onSubmit: (value) => {
-                    if (value.trim().length === 0) {
+    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,
-                        apiKey: value.trim(),
+                        ...(value.trim().length > 0 ? { apiKey: value.trim() } : {}),
                     };
                     writeConfig(newConfig);
                     onComplete(newConfig);
@@ -226,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([]);
@@ -237,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) => {
@@ -254,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
@@ -264,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);
@@ -308,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
@@ -331,6 +364,7 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
                     setPendingApproval({ request: req, resolve });
                 });
             });
+            await loadRuntimeConfig();
             // Load config — if none exists, show inline setup
             const loadedConfig = readConfig();
             if (!loadedConfig) {
@@ -410,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();
@@ -421,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);
@@ -436,14 +472,15 @@ export const App = ({ dangerouslyAcceptAll = false, logLevel, sessionId, }) => {
         assistantMessageRef.current = null;
         try {
             const pricing = getModelPricing(config.provider, config.model);
+            const requestDefaults = getRequestDefaultParams(config.provider, config.model);
             // Create abort controller for this completion
             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 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' };
@@ -451,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':
@@ -564,11 +617,25 @@ 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;
                 }
-            }, { pricing: pricing || undefined, abortSignal: abortControllerRef.current.signal, sessionId: session?.id });
+            }, {
+                pricing: pricing || undefined,
+                abortSignal: abortControllerRef.current.signal,
+                sessionId: session?.id,
+                requestDefaults,
+            });
             // Final update to ensure we have the complete message history
             setCompletionMessages(updatedMessages);
             // Update session
@@ -605,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

@@ -219,6 +219,7 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
     const pricing = options.pricing;
     const abortSignal = options.abortSignal;
     const sessionId = options.sessionId;
+    const requestDefaults = options.requestDefaults || {};
     // Note: userInput is passed for context/logging but user message should already be in messages array
     // (added by the caller in handleSubmit for immediate UI display)
     const updatedMessages = [...messages];
@@ -243,7 +244,7 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
         if (pricing) {
             const contextInfo = getContextInfo(updatedMessages, pricing);
             if (contextInfo.needsCompaction) {
-                const compacted = await compactIfNeeded(client, model, updatedMessages, pricing.contextWindow, contextInfo.currentTokens);
+                const compacted = await compactIfNeeded(client, model, updatedMessages, pricing.contextWindow, contextInfo.currentTokens, requestDefaults, sessionId);
                 // Replace messages in-place
                 updatedMessages.length = 0;
                 updatedMessages.push(...compacted);
@@ -287,6 +288,7 @@ export async function runAgenticLoop(client, model, messages, userInput, onEvent
                 }
             }
             const stream = await client.chat.completions.create({
+                ...requestDefaults,
                 model,
                 messages: updatedMessages,
                 tools: allTools,
@@ -349,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
@@ -389,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',
@@ -399,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);
+                            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 });
@@ -433,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/ConfigDialog.js

@@ -7,12 +7,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text } from 'ink';
 import { PasswordInput, Select } from '@inkjs/ui';
-import { getProvider, SUPPORTED_MODELS } from '../providers.js';
+import { getAllProviders, getProvider } from '../providers.js';
+import { resolveApiKey } from '../config.js';
 export const ConfigDialog = ({ currentConfig, onComplete, onCancel, }) => {
     const [step, setStep] = useState('select_provider');
     const [selectedProviderId, setSelectedProviderId] = useState(currentConfig.provider);
     const [selectedModelId, setSelectedModelId] = useState(currentConfig.model);
-    const providerItems = SUPPORTED_MODELS.flatMap((provider) => provider.models.map((model) => ({
+    const providerItems = getAllProviders().flatMap((provider) => provider.models.map((model) => ({
         label: `${provider.name} - ${model.name}`,
         value: `${provider.id}:::${model.id}`,
     })));
@@ -28,12 +29,13 @@ export const ConfigDialog = ({ currentConfig, onComplete, onCancel, }) => {
     }
     // API key entry step
     const provider = getProvider(selectedProviderId);
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: "green", paddingX: 1, children: [_jsx(Text, { color: "green", bold: true, children: "Confirm Configuration" }), _jsxs(Text, { dimColor: true, children: ["Provider: ", provider?.name, " / ", selectedModelId] }), _jsx(Text, { children: "Enter your API key (or leave empty to keep current/env var):" }), _jsx(PasswordInput, { placeholder: `Paste your ${provider?.apiKeyEnvVar || 'API'} key`, onSubmit: (value) => {
+    const hasResolvedAuth = Boolean(resolveApiKey({ provider: selectedProviderId, apiKey: undefined }));
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: "green", paddingX: 1, children: [_jsx(Text, { color: "green", bold: true, children: "Confirm Configuration" }), _jsxs(Text, { dimColor: true, children: ["Provider: ", provider?.name, " / ", selectedModelId] }), _jsx(Text, { children: hasResolvedAuth ? 'Optional API key (leave empty to keep resolved auth):' : 'Enter your API key:' }), _jsx(PasswordInput, { placeholder: `Paste your ${provider?.apiKeyEnvVar || 'API'} key`, onSubmit: (value) => {
                     const finalApiKey = value.trim().length > 0 ? value.trim() : currentConfig.apiKey;
                     const newConfig = {
                         provider: selectedProviderId,
                         model: selectedModelId,
-                        apiKey: finalApiKey,
+                        ...(finalApiKey?.trim() ? { apiKey: finalApiKey.trim() } : {}),
                     };
                     onComplete(newConfig);
                 } })] }));