protoagent 0.1.13 → 0.1.15

package/dist/App.js

@@ -6,32 +6,27 @@ Renders the chat loop, tool call feedback, approval prompts,
 and cost/usage info. All heavy logic lives in `agentic-loop.ts`;
 this file is purely presentation + state wiring.
 
-Here's how the terminal UI is laid out (showcasing all options at once for demonstration, but in practice many elements are conditional on state):
+ACTUAL UI Layout:
 ┌─────────────────────────────────────────┐
-│  ProtoAgent  (BigText logo)             │  static, rendered once (printBanner)
-│  Model: Anthropic / claude-3-5 | Sess.. │  static header (printRuntimeHeader)
+│  ProtoAgent  (ASCII block logo)         │  static, rendered once
+│  Model: Provider / model | Session: id  │  static header
 │  Debug logs: /path/to/log               │  static, if --log-level set
+│  Config file: /path/to/config           │  static, if config exists
+│  MCPs: server1, server2                 │  static, if MCPs connected
 ├─────────────────────────────────────────┤
 │                                         │
-│  [System Prompt ▸ collapsed]            │  archived (memoized)
+│  Archived messages (Static scrollback): │
+│  > user message                         │
+│  assistant reply text                   │
+│  ▶ tool_name: result preview...         │
 │                                         │
-│  > user message                         │  archived (memoized)
+├ ─ ─ ─ ─ ─ live boundary ─ ─ ─ ─ ─ ─ ─ ─ ┤
 │                                         │
-│  assistant reply text                   │  archived (memoized)
+│  assistant streaming text...▍           │  live (re-renders per token)
 │                                         │
-│  [tool_name ▸ collapsed]                │  archived (memoized)
+│  ⠹ Running read_file...                 │  live, spinner + active tool
 │                                         │
-│  > user message                         │  archived (memoized)
-│                                         │
-├ ─ ─ ─ ─ ─ ─ ─ live boundary ─ ─ ─ ─ ─ ─ ┤
-│                                         │
-│  assistant streaming text...            │  live (re-renders, ~50ms debounce)
-│                                         │
-│  [tool_name ▸ collapsed]                │  live (re-renders on tool_result)
-│                                         │
-│  Thinking...                            │  live, only if last msg is user
-│                                         │
-│ ╭─ Approval Required ─────────────────╮ │  live, only when pending approval
+│ ╭─ Approval Required ─────────────────╮ │  live, when pending approval
 │ │  description / detail               │ │
 │ │  ○ Approve once                     │ │
 │ │  ○ Approve for session              │ │
@@ -41,9 +36,9 @@ Here's how the terminal UI is laid out (showcasing all options at once for demon
 │  [Error: message]                       │  live, inline thread errors
 │                                         │
 ├─────────────────────────────────────────┤
-│  tokens: 1234↓ 56↑ | ctx: 12% | $0.02   │  static-ish, updates after each turn
+│  tokens: 1234↓ 56↑ | ctx: 12% | $0.02   │  live, updates each turn
 ├─────────────────────────────────────────┤
-│  /quit  — Exit ProtoAgent               │  dynamic, shown when typing /
+│  /quit  — Exit ProtoAgent               │  dynamic, shown when typing / to show available commands
 ├─────────────────────────────────────────┤
 │  ⠹ Running read_file...                 │  dynamic, shown while loading
 ├─────────────────────────────────────────┤
@@ -54,13 +49,22 @@ Here's how the terminal UI is laid out (showcasing all options at once for demon
 │  Session saved. Resume with:            │  one-shot, shown on /quit
 │  protoagent --session abc12345          │
 └─────────────────────────────────────────┘
+
+NOTES:
+- System prompt is NOT displayed (filtered out in replay)
+- Tool results are flat text, not collapsible
+- "Working..." spinner shown when loading but not streaming
 */
 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 } from '@inkjs/ui';
+import { CommandFilter, SLASH_COMMANDS } from './components/CommandFilter.js';
+import { ApprovalPrompt } from './components/ApprovalPrompt.js';
+import { UsageDisplay } from './components/UsageDisplay.js';
+import { InlineSetup } from './components/InlineSetup.js';
+import { TextInput } from '@inkjs/ui';
 import { OpenAI } from 'openai';
-import { readConfig, writeConfig, writeInitConfig, resolveApiKey, TargetSelection, ModelSelection, ApiKeyInput } from './config.js';
+import { readConfig, resolveApiKey } from './config.js';
 import { loadRuntimeConfig, getActiveRuntimeConfigPath } from './runtime-config.js';
 import { getProvider, getModelPricing, getRequestDefaultParams } from './providers.js';
 import { runAgenticLoop, initializeMessages, } from './agentic-loop.js';
@@ -70,22 +74,25 @@ import { createSession, ensureSystemPromptAtTop, saveSession, loadSession, gener
 import { clearTodos, getTodosForSession, setTodosForSession } from './tools/todo.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.
+import { renderFormattedText, normalizeTranscriptText } from './utils/format-message.js';
+import { formatToolActivity } from './utils/tool-display.js';
+import { useAgentEventHandler } from './hooks/useAgentEventHandler.js';
+// Render the ProtoAgent ASCII logo in brand green (#09A469)
 function printBanner(addStatic) {
-    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'] }));
+    const BRAND_GREEN = '#09A469';
+    addStatic(_jsxs(Text, { children: [_jsx(Text, { color: BRAND_GREEN, 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: BRAND_GREEN, 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'] }));
 }
+// Display runtime metadata: model, session, debug log path, config path, and connected MCPs
 function printRuntimeHeader(addStatic, config, session, dangerouslySkipPermissions) {
     const provider = getProvider(config.provider);
-    let line = `Model: ${provider?.name || config.provider} / ${config.model}`;
+    let modelLine = `Model: ${provider?.name || config.provider} / ${config.model}`;
     if (dangerouslySkipPermissions)
-        line += ' (auto-approve all)';
+        modelLine += ' (auto-approve all)';
     if (session)
-        line += ` | Session: ${session.id}`;
-    const lines = [_jsx(Text, { dimColor: true, children: line }, "model")];
+        modelLine += ` | Session: ${session.id}`;
+    const lines = [
+        _jsx(Text, { dimColor: true, children: modelLine }, "model")
+    ];
     const logFilePath = logger.getLogFilePath();
     if (logFilePath) {
         lines.push(_jsxs(Text, { dimColor: true, children: ["Debug logs: ", logFilePath] }, "log"));
@@ -100,15 +107,6 @@ function printRuntimeHeader(addStatic, config, session, dangerouslySkipPermissio
     }
     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');
-    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 printMessageToScrollback(addStatic, role, text) {
     const normalized = normalizeTranscriptText(text);
     if (!normalized) {
@@ -119,66 +117,9 @@ function printMessageToScrollback(addStatic, role, text) {
         addStatic(_jsxs(Text, { children: [_jsx(Text, { color: "green", children: '>' }), " ", normalized, '\n'] }));
         return;
     }
-    // Apply Markdown formatting (bold, italic) to assistant messages
+    // Fallback is assistant, render with Markdown formatting (bold, italic)
     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) {
         const msgAny = message;
@@ -195,15 +136,27 @@ 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(_jsxs(Text, { dimColor: true, children: ['▶ ', toolName, ': ', compact, '\n'] }));
+            // Format tool display with args if available
+            let toolDisplay = toolName;
+            if (msgAny.args) {
+                try {
+                    const args = JSON.parse(msgAny.args);
+                    toolDisplay = formatToolActivity(toolName, args);
+                }
+                catch {
+                    // If parsing fails, use the tool name
+                }
+            }
+            addStatic(_jsxs(Text, { dimColor: true, children: ['▶ ', toolDisplay, ': ', compact, '\n'] }));
         }
     }
     if (messages.length > 0) {
         addStatic(_jsx(Text, { children: '\n' }));
     }
 }
-// Returns only the last N displayable lines of text so the live streaming box
-// never grows taller than the terminal, preventing Ink's clearTerminal wipe.
+// Limit streaming text to viewport height to prevent overflow that would
+// trigger Ink's clearTerminal() and wipe scrollback history. Completed
+// lines are archived to <Static>; we only show the last N visible lines.
 const STREAMING_RESERVED_ROWS = 3; // usage bar + spinner + input line
 function clipToRows(text, terminalRows) {
     const maxLines = Math.max(1, terminalRows - STREAMING_RESERVED_ROWS);
@@ -212,18 +165,12 @@ function clipToRows(text, terminalRows) {
         return text;
     return lines.slice(lines.length - maxLines).join('\n');
 }
-// ─── Available slash commands ───
-const SLASH_COMMANDS = [
-    { name: '/help', description: 'Show all available commands' },
-    { name: '/quit', description: 'Exit ProtoAgent' },
-    { name: '/exit', description: 'Alias for /quit' },
-];
+// ─── Spinner frames for loading indicator ───
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+// ─── Help text derived from slash commands ───
 const HELP_TEXT = [
     'Commands:',
-    '  /help   - Show this help',
-    '  /quit   - Exit ProtoAgent',
-    '  /exit   - Alias for /quit',
+    ...SLASH_COMMANDS.map((cmd) => `  ${cmd.name} - ${cmd.description}`),
 ].join('\n');
 function buildClient(config) {
     const provider = getProvider(config.provider);
@@ -266,75 +213,14 @@ function buildClient(config) {
     }
     return new OpenAI(clientOptions);
 }
-// ─── Sub-components ───
-/** Shows filtered slash commands when user types /. */
-const CommandFilter = ({ inputText }) => {
-    if (!inputText.startsWith('/'))
-        return null;
-    const filtered = SLASH_COMMANDS.filter((cmd) => cmd.name.toLowerCase().startsWith(inputText.toLowerCase()));
-    if (filtered.length === 0)
-        return null;
-    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: filtered.map((cmd) => (_jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: "green", children: cmd.name }), " \u2014 ", cmd.description] }, cmd.name))) }));
-};
-/** Interactive approval prompt rendered inline. */
-const ApprovalPrompt = ({ request, onRespond }) => {
-    const sessionApprovalLabel = request.sessionScopeKey
-        ? 'Approve this operation for session'
-        : `Approve all "${request.type}" for session`;
-    const items = [
-        { label: 'Approve once', value: 'approve_once' },
-        { label: sessionApprovalLabel, value: 'approve_session' },
-        { label: 'Reject', value: 'reject' },
-    ];
-    return (_jsxs(LeftBar, { color: "green", marginTop: 1, marginBottom: 1, children: [_jsx(Text, { color: "green", bold: true, children: "Approval Required" }), _jsx(Text, { children: request.description }), request.detail && (_jsx(Text, { dimColor: true, children: request.detail.length > 200 ? request.detail.slice(0, 200) + '...' : request.detail })), _jsx(Box, { marginTop: 1, children: _jsx(Select, { options: items.map((item) => ({ value: item.value, label: item.label })), onChange: (value) => onRespond(value) }) })] }));
-};
-/** Cost/usage display in the status bar. */
-const UsageDisplay = ({ usage, totalCost }) => {
-    if (!usage && totalCost === 0)
-        return null;
-    return (_jsxs(Box, { marginTop: 1, children: [usage && (_jsxs(Box, { children: [_jsxs(Box, { backgroundColor: "#064e3b", paddingX: 1, children: [_jsx(Text, { color: "white", children: "tokens: " }), _jsxs(Text, { color: "white", bold: true, children: [usage.inputTokens, "\u2193 ", usage.outputTokens, "\u2191"] })] }), _jsxs(Box, { backgroundColor: "#065f46", paddingX: 1, children: [_jsx(Text, { color: "white", children: "ctx: " }), _jsxs(Text, { color: "white", bold: true, children: [usage.contextPercent.toFixed(0), "%"] })] })] })), totalCost > 0 && (_jsxs(Box, { backgroundColor: "#064e3b", paddingX: 1, children: [_jsx(Text, { color: "black", children: "cost: " }), _jsxs(Text, { color: "black", bold: true, children: ["$", totalCost.toFixed(4)] })] }))] }));
-};
-/** Inline setup wizard — shown when no config exists. */
-const InlineSetup = ({ onComplete }) => {
-    const [setupStep, setSetupStep] = useState('target');
-    const [target, setTarget] = useState('project');
-    const [selectedProviderId, setSelectedProviderId] = useState('');
-    const [selectedModelId, setSelectedModelId] = useState('');
-    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 (_jsx(Box, { marginTop: 1, children: _jsx(ModelSelection, { setSelectedProviderId: setSelectedProviderId, setSelectedModelId: setSelectedModelId, onSelect: handleModelSelect, title: "First-time setup" }) }));
-    }
-    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 = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }) => {
     const { exit } = useApp();
     const { stdout } = useStdout();
     const terminalRows = stdout?.rows ?? 24;
     // ─── Static scrollback state ───
-    // Each item appended here is rendered once by <Static> and permanently
-    // flushed to the terminal scrollback by Ink, within its own render cycle.
-    // Using <Static> items is important to avoid re-rendering issues, which hijack
-    // scrollback and copying when new AI message streams are coming in.
-    //
-    // staticCounterRef keeps ID generation local to this component instance,
-    // making it immune to Strict Mode double-invoke, HMR counter drift, and
-    // collisions if multiple App instances ever coexist.
+    // Each item is rendered once by <Static> and permanently flushed to scrollback.
+    // staticCounterRef generates unique IDs (s1, s2, s3...) for React keys.
     const staticCounterRef = useRef(0);
     const [staticItems, setStaticItems] = useState([]);
     const addStatic = useCallback((node) => {
@@ -346,12 +232,6 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
     const [config, setConfig] = useState(null);
     const [completionMessages, setCompletionMessages] = useState([]);
     const [inputText, setInputText] = useState('');
-    // isStreaming: true while the assistant is producing tokens.
-    // streamingText: the live in-progress token buffer shown in the dynamic Ink
-    // frame while the response streams. Cleared to '' at done and flushed to
-    // <Static> as a permanent scrollback item. Keeping it in React state (not a
-    // ref) is safe because the Ink frame height does NOT change as tokens arrive —
-    // the streaming box is always 1+ lines tall while loading=true.
     const [isStreaming, setIsStreaming] = useState(false);
     const [streamingText, setStreamingText] = useState('');
     const [loading, setLoading] = useState(false);
@@ -386,9 +266,22 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
         unflushedContent: '',
         hasFlushedAnyLine: false,
     });
+    // Hook for handling agent events
+    const handleAgentEvent = useAgentEventHandler({
+        addStatic,
+        setCompletionMessages,
+        setIsStreaming,
+        setStreamingText,
+        setActiveTool,
+        setLastUsage,
+        setTotalCost,
+        setThreadErrors,
+        setError,
+        assistantMessageRef,
+        streamingBufferRef,
+    });
     const didPrintIntroRef = useRef(false);
     const printedThreadErrorIdsRef = useRef(new Set());
-    // ─── Post-config initialization (reused after inline setup) ───
     const initializeWithConfig = useCallback(async (loadedConfig) => {
         setConfig(loadedConfig);
         clientRef.current = buildClient(loadedConfig);
@@ -432,7 +325,6 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
         setNeedsSetup(false);
         setInitialized(true);
     }, [dangerouslySkipPermissions, sessionId, addStatic]);
-    // ─── Initialization ───
     useEffect(() => {
         if (!loading) {
             setSpinnerFrame(0);
@@ -457,6 +349,7 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
             addStatic(_jsxs(Text, { color: "red", children: ["Error: ", threadError.message] }));
         }
     }, [threadErrors, addStatic]);
+    // One-time initialization: logging, approval handlers, config loading
     useEffect(() => {
         const init = async () => {
             // Set log level and initialize log file
@@ -496,13 +389,13 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
             closeMcp();
         };
     }, []);
-    // ─── Slash commands ───
     const handleSlashCommand = useCallback(async (cmd) => {
         const parts = cmd.trim().split(/\s+/);
         const command = parts[0]?.toLowerCase();
         switch (command) {
             case '/quit':
             case '/exit':
+                // No active session: exit immediately. Otherwise: save before exit.
                 if (!session) {
                     exit();
                     return true;
@@ -525,10 +418,6 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
                     setError(`Failed to save session before exit: ${err.message}`);
                 }
                 return true;
-            case '/expand':
-            case '/collapse':
-                // expand/collapse removed — transcript lives in scrollback
-                return true;
             case '/help':
                 setHelpMessage(HELP_TEXT);
                 return true;
@@ -536,7 +425,6 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
                 return false;
         }
     }, [config, exit, session, completionMessages]);
-    // ─── Submit handler ───
     const handleSubmit = useCallback(async (value) => {
         const trimmed = value.trim();
         if (!trimmed || loading || !clientRef.current || !config)
@@ -573,258 +461,7 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
             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': {
-                        const deltaText = event.content || '';
-                        // First text delta of this turn: initialize ref, show streaming indicator.
-                        if (!assistantMessageRef.current || assistantMessageRef.current.kind !== 'streaming_text') {
-                            // 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);
-                            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 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, args } = event.subAgentTool;
-                            if (status === 'running') {
-                                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 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 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;
-                            }
-                            // 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 || [])],
-                                }
-                                : { 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,
-                                    kind: 'tool_call_assistant',
-                                };
-                            }
-                        }
-                        break;
-                    case 'tool_result':
-                        if (event.toolCall) {
-                            const toolCall = event.toolCall;
-                            setActiveTool(null);
-                            // Write the tool summary immediately — at this point loading is
-                            // still true but the frame height is stable (spinner + input box).
-                            // The next state change (setActiveTool(null)) doesn't affect
-                            // frame height so write() restores the correct frame.
-                            const compactResult = (toolCall.result || '')
-                                .replace(/\s+/g, ' ')
-                                .trim()
-                                .slice(0, 180);
-                            addStatic(_jsxs(Text, { dimColor: true, children: ['▶ ', toolCall.name, ': ', compactResult, '\n'] }));
-                            // Flush the assistant message + tool result into completionMessages
-                            // for session saving.
-                            setCompletionMessages((prev) => {
-                                const updated = [...prev];
-                                // Sync assistant message
-                                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':
-                        if (event.usage) {
-                            setLastUsage(event.usage);
-                            setTotalCost((prev) => prev + event.usage.cost);
-                        }
-                        break;
-                    case 'error':
-                        if (event.error) {
-                            const errorMessage = event.error;
-                            setThreadErrors((prev) => {
-                                if (event.transient) {
-                                    return [
-                                        ...prev.filter((threadError) => !threadError.transient),
-                                        {
-                                            id: `${Date.now()}-${prev.length}`,
-                                            message: errorMessage,
-                                            transient: true,
-                                        },
-                                    ];
-                                }
-                                if (prev[prev.length - 1]?.message === errorMessage) {
-                                    return prev;
-                                }
-                                return [
-                                    ...prev,
-                                    {
-                                        id: `${Date.now()}-${prev.length}`,
-                                        message: errorMessage,
-                                        transient: false,
-                                    },
-                                ];
-                            });
-                        }
-                        else {
-                            setError('Unknown error');
-                        }
-                        break;
-                    case 'iteration_done':
-                        if (assistantMessageRef.current?.kind === 'tool_call_assistant') {
-                            assistantMessageRef.current = null;
-                        }
-                        break;
-                    case 'done':
-                        if (assistantMessageRef.current?.kind === 'streaming_text') {
-                            const finalRef = assistantMessageRef.current;
-                            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 };
-                                return updated;
-                            });
-                            assistantMessageRef.current = null;
-                        }
-                        setActiveTool(null);
-                        setThreadErrors((prev) => prev.filter((threadError) => !threadError.transient));
-                        break;
-                }
-            }, {
+            const updatedMessages = await runAgenticLoop(clientRef.current, config.model, [...completionMessages, userMessage], trimmed, handleAgentEvent, {
                 pricing: pricing || undefined,
                 abortSignal: abortControllerRef.current.signal,
                 sessionId: session?.id,
@@ -847,7 +484,6 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
             setLoading(false);
         }
     }, [loading, config, completionMessages, session, handleSlashCommand, addStatic]);
-    // ─── Keyboard shortcuts ───
     useInput((input, key) => {
         if (key.ctrl && input === 'c') {
             exit();
@@ -857,7 +493,6 @@ export const App = ({ dangerouslySkipPermissions = false, logLevel, sessionId, }
             abortControllerRef.current.abort();
         }
     });
-    // ─── Render ───
     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}`);