@datalayer/agent-runtimes 1.5.43 → 1.5.44

package/lib/chat/ChatInline.js

@@ -6,7 +6,18 @@ import { CopyIcon, ArrowLeftIcon, SyncIcon, TrashIcon, CheckIcon, PlusIcon, Penc
 import { SparklesIcon } from '@datalayer/icons-react';
 import { AGUIAdapter } from '../protocols';
 import { generateMessageId } from '../types/messages';
-import { sanitizeAssistantContent } from '../utils';
+import { BROWSER_LIMITS, emptyConversation, reduceConversation, } from '../portable/conversation';
+import { conversationEventsOf } from '../portable/adapterEvents';
+/** The answer so far: the newest assistant message of the conversation. */
+function answerOf(state) {
+    for (let index = state.items.length - 1; index >= 0; index -= 1) {
+        const item = state.items[index];
+        if (item.kind === 'message' && item.role === 'assistant') {
+            return item.text;
+        }
+    }
+    return '';
+}
 /**
  * Pre-defined AI action groups
  */
@@ -79,8 +90,15 @@ export function ChatInline({ selectedText, protocol, onReplaceSelection, onInser
     const [input, setInput] = useState('');
     // AI state
     const [aiState, setAiState] = useState('initial');
-    // AI response content
-    const [aiResponse, setAiResponse] = useState('');
+    // The one-shot conversation (MOBILE M-030): `reduceConversation`'s, as in
+    // ChatBase and on the phone; the response is its newest assistant message.
+    const [conversation, setConversation] = useState(() => emptyConversation(BROWSER_LIMITS));
+    const conversationRef = useRef(conversation);
+    const changeConversation = useCallback((next) => {
+        conversationRef.current = next;
+        setConversation(next);
+    }, []);
+    const aiResponse = useMemo(() => answerOf(conversation), [conversation]);
     // Previous prompt for regeneration
     const [previousPrompt, setPreviousPrompt] = useState('');
     // Current page in options menu (for sub-menus like translate)
@@ -112,20 +130,23 @@ export function ChatInline({ selectedText, protocol, onReplaceSelection, onInser
         adapterRef.current = adapter;
         // Subscribe to events
         unsubscribeRef.current = adapter.subscribe((event) => {
-            switch (event.type) {
-                case 'message':
-                    if (event.message?.content) {
-                        const content = typeof event.message.content === 'string'
-                            ? sanitizeAssistantContent(event.message.content)
-                            : '';
-                        setAiResponse(content);
-                    }
-                    break;
-                case 'error':
-                    console.error('[ChatInline] Protocol error:', event.error);
-                    setError(event.error?.message || 'Unknown error');
-                    setAiState('initial');
-                    break;
+            if (event.type === 'error') {
+                console.error('[ChatInline] Protocol error:', event.error);
+                setError(event.error?.message || 'Unknown error');
+                setAiState('initial');
+                return;
+            }
+            // The event, as the conversation reads it: one reducer whatever the protocol.
+            try {
+                const inputs = conversationEventsOf(event, conversationRef.current);
+                if (inputs.length) {
+                    changeConversation(inputs.reduce((kept, input) => reduceConversation(kept, input), conversationRef.current));
+                }
+            }
+            catch (failure) {
+                console.error('[ChatInline] Protocol event not read:', failure);
+                setError(failure instanceof Error ? failure.message : String(failure));
+                setAiState('initial');
             }
         });
         // Connect
@@ -134,7 +155,7 @@ export function ChatInline({ selectedText, protocol, onReplaceSelection, onInser
             unsubscribeRef.current?.();
             adapterRef.current?.disconnect();
         };
-    }, [protocol]);
+    }, [protocol, changeConversation]);
     // Submit prompt to AI
     const submitPrompt = useCallback(async (prompt) => {
         if (!adapterRef.current) {
@@ -145,7 +166,7 @@ export function ChatInline({ selectedText, protocol, onReplaceSelection, onInser
         setInput('');
         setPreviousPrompt(prompt);
         setError(null);
-        setAiResponse('');
+        changeConversation(emptyConversation(BROWSER_LIMITS));
         // Build system message with selected text context
         const systemContext = `Do not surround your answer in quote marks. Only return the answer, nothing else. The user is selecting this text:
 
@@ -178,7 +199,7 @@ ${selectedText || ''}
             setError(err.message);
             setAiState('initial');
         }
-    }, [selectedText]);
+    }, [selectedText, changeConversation]);
     // Handle pending prompt from toolbar dropdown
     useEffect(() => {
         if (pendingPrompt && aiState === 'initial') {
@@ -235,8 +256,8 @@ ${selectedText || ''}
     // Handle back to options
     const handleBackToOptions = useCallback(() => {
         setAiState('initial');
-        setAiResponse('');
-    }, []);
+        changeConversation(emptyConversation(BROWSER_LIMITS));
+    }, [changeConversation]);
     // Handle discard
     const handleDiscard = useCallback(() => {
         onClose?.();

package/lib/chat/base/ChatBase.js

@@ -25,7 +25,7 @@ import { SkeletonText } from '@primer/react/experimental';
 import { SidebarExpandIcon } from '@primer/octicons-react';
 import { notebookStore, JupyterReactTheme } from '@datalayer/jupyter-react';
 import { Box, setupPrimerPortals, useThemeStore, getColorPalette, getThemeConfig, useSystemColorMode, } from '@datalayer/primer-addons';
-import { AlertIcon, PersonIcon } from '@primer/octicons-react';
+import { AlertIcon, PersonIcon, UnmuteIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { QueryClientProvider, QueryClientContext } from '@tanstack/react-query';
 import { useCoreStore } from '@datalayer/core';
@@ -57,6 +57,7 @@ import { settledVoice } from '../../voice/chatVoice';
 import { useVoiceSettings } from '../../voice/useVoiceSettings';
 import { useVoiceSpeaker } from '../../voice/useVoiceSpeaker';
 import { useSpokenAnswers } from '../../voice/useSpokenAnswers';
+import { lineToSay } from '../../voice/sayAloud';
 import { isFloatingChatViewMode } from '../viewModes';
 import { ToolApprovalBanner, ToolApprovalDialog, } from '../tools';
 import { initialModelId, isOffered, offeredModels as offeredModelsFor, } from './modelChoice';
@@ -1819,6 +1820,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         recorderRef.current = null;
     }
     const inspectAnswerRef = useRef('');
+    // A line the agent says aloud, from a run's `voice.say` (VOICE.md VO-35).
+    const voiceSayRef = useRef(undefined);
     const handleRespondRef = useRef(null);
     // A decision made outside the chat — a host page's own approval banner —
     // is answered exactly as the tool card's buttons answer it: through the
@@ -2801,6 +2804,9 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     // What the server says besides the conversation's text comes on
                     // the ui socket (REACTOR_UI RU-W); the run's own — `loop.session`
                     // among them — are the conversation's.
+                    if (event.activity) {
+                        voiceSayRef.current?.(event.activity);
+                    }
                     read();
                     break;
                 case 'done':
@@ -2968,6 +2974,31 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     const ownVoice = useVoiceSpeaker(settled, !hostSpeaks);
     useSpokenAnswers(displayItems, isLoading, !hostSpeaks && settled?.output === 'always', ownVoice.speaker);
     const speakingNow = voiceSpeaking || ownVoice.state.speaking;
+    /*
+     * A line the agent wants heard, not written (VO-35): a caption while the
+     * run goes on, said by the speaker where answers are said by themselves.
+     */
+    const [voiceSaid, setVoiceSaid] = useState('');
+    voiceSayRef.current = activity => {
+        const line = lineToSay(activity);
+        if (!line) {
+            return;
+        }
+        setVoiceSaid(line);
+        if (settled?.output === 'always') {
+            if (onReadAloud) {
+                onReadAloud(line);
+            }
+            else {
+                ownVoice.speaker?.say(line);
+            }
+        }
+    };
+    useEffect(() => {
+        if (!isLoading) {
+            setVoiceSaid('');
+        }
+    }, [isLoading]);
     // Answers spoken over, hands-free (VOICE.md VO-13): marked *interrupted*.
     const [interruptedIds, setInterruptedIds] = useState(() => new Set());
     const stopSpeaking = onStopSpeaking ?? (ownVoice.speaker ? ownVoice.stop : undefined);
@@ -3762,7 +3793,17 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         }, send: (text, metadata) => void handleSend(text, undefined, metadata) })) : undefined;
     // Why an answer could not be heard, in a sentence, by the composer.
     const voiceRefused = !hostSpeaks && ownVoice.state.refused ? (_jsx(Text, { role: "alert", sx: { fontSize: 0, color: 'danger.fg', maxWidth: 260 }, "data-voice-refused": "", children: ownVoice.state.refused })) : null;
-    const inputToolbar = showInput ? (_jsx(InputPrompt, { footerExtras: voiceRefused ? (_jsxs(_Fragment, { children: [voiceRefused, voiceControl] })) : (voiceControl), interim: voiceInterim, input: input, setInput: setInput, isLoading: isLoading, kernelStatus: liveKernelStatus, connectionConfirmed: connectionConfirmed, placeholder: placeholder, 
+    // The line said aloud, written as it is said: captions always (VO-65).
+    const voiceSayCaption = voiceSaid ? (_jsxs(Text, { "aria-live": "polite", sx: {
+            fontSize: 0,
+            fontStyle: 'italic',
+            color: 'fg.muted',
+            maxWidth: 260,
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 1,
+        }, "data-voice-say": "", children: [_jsx(UnmuteIcon, { size: 12, "aria-label": "Said aloud" }), voiceSaid] })) : null;
+    const inputToolbar = showInput ? (_jsx(InputPrompt, { footerExtras: voiceRefused || voiceSayCaption ? (_jsxs(_Fragment, { children: [voiceSayCaption, voiceRefused, voiceControl] })) : (voiceControl), interim: voiceInterim, input: input, setInput: setInput, isLoading: isLoading, kernelStatus: liveKernelStatus, connectionConfirmed: connectionConfirmed, placeholder: placeholder, 
         /*
           The same openers the empty state offers, typed into the box they would
           be typed into.

package/lib/components/agents/AgentSummary.d.ts

@@ -1,28 +1,6 @@
 import React from 'react';
-export interface AgentSummaryData {
-    agentName: string;
-    location: string;
-    specId?: string;
-    /**
-     * The framework turning this agent's loop, as its spec declares it —
-     * `pydantic-ai` server-side, `vercel-ai` in the page.
-     */
-    harness?: string;
-    /**
-     * The runtime variant the host chose: `<location>-<harness>`.
-     *
-     * Shown next to the harness rather than instead of it, because they answer
-     * different questions and can disagree: the harness is what the spec asked
-     * for, the variant is what it actually got.
-     */
-    variant?: string;
-    status?: string;
-    baseUrl?: string;
-    sandboxBaseUrl?: string;
-    agentId?: string;
-    isReady?: boolean;
-    error?: string;
-}
+import { type AgentSummaryData } from '../../portable/runtimes';
+export type { AgentSummaryData } from '../../portable/runtimes';
 export interface AgentSummaryProps {
     summary: AgentSummaryData | null;
     title?: string;

package/lib/components/agents/AgentSummary.js

@@ -7,19 +7,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Spinner } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { strip } from '@datalayer/core/lib/utils';
-/**
- * Statuses that represent an agent actively being created/started. The spinner
- * only shows for these; app-navigation states ("selected", "switching") and
- * settled states ("ready", "running", ...) never spin.
- */
-const CREATING_STATUSES = new Set([
-    'creating',
-    'starting',
-    'launching',
-    'connecting',
-    'pending',
-    'resuming',
-]);
+import { isCreatingAgent, } from '../../portable/runtimes';
 const MAX_AGENT_NAME_LENGTH = 32;
 const toSandboxStatusUrl = (value) => {
     const raw = String(value || '').trim();
@@ -95,12 +83,8 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
     if (!summary) {
         return null;
     }
-    const normalizedStatus = (summary.status || '').toLowerCase();
-    // Only show the spinner while the agent is genuinely being created: it is not
-    // ready, has no id yet, and its status is an active creation/startup state.
-    const isCreating = !summary.isReady &&
-        !summary.agentId &&
-        CREATING_STATUSES.has(normalizedStatus);
+    // Only show the spinner while the agent is genuinely being created.
+    const isCreating = isCreatingAgent(summary);
     const hasError = Boolean(summary.error);
     // The agent is optional: some examples run only a code sandbox. Show the
     // agent status when there is an agent (or one is being created).

package/lib/hooks/useChat.js

@@ -10,8 +10,11 @@
  */
 import { useCallback, useMemo } from 'react';
 import { useChatStore } from '../stores';
-import { createUserMessage, createAssistantMessage, generateMessageId, } from '../types/messages';
-import { sanitizeAssistantContent } from '../utils';
+import { createUserMessage, generateMessageId } from '../types/messages';
+import { isToolCallMessage } from '../utils';
+import { BROWSER_LIMITS, emptyConversation, reduceConversation, withPrompt, } from '../portable/conversation';
+import { conversationEventsOf, snapshotOfMessages, } from '../portable/adapterEvents';
+import { conversationDrawer, emptyChatLayer, } from '../chat/base/conversationItems';
 /**
  * Main hook for chat functionality
  *
@@ -56,13 +59,17 @@ export function useChat() {
     const clearMessages = useChatStore(state => state.clearMessages);
     const setLoading = useChatStore(state => state.setLoading);
     const setError = useChatStore(state => state.setError);
+    const setMessages = useChatStore(state => state.setMessages);
     const startStreaming = useChatStore(state => state.startStreaming);
-    const appendToStream = useChatStore(state => state.appendToStream);
     const stopStreaming = useChatStore(state => state.stopStreaming);
     const setSuggestions = useChatStore(state => state.setSuggestions);
     const getTools = useChatStore(state => state.getTools);
     /**
-     * Send a user message and get AI response
+     * Send a user message and get the AI's response. The conversation is
+     * `reduceConversation`'s (MOBILE M-030), as in ChatBase and on the phone:
+     * every adapter event read by `conversationEventsOf`, an inference
+     * provider's deltas as AG-UI text events, and the store's messages drawn
+     * from it.
      */
     const sendMessage = useCallback(async (content, options) => {
         // Check if we have a way to send messages
@@ -70,102 +77,95 @@ export function useChat() {
             setError(new Error('No inference provider or protocol adapter configured.'));
             return;
         }
-        // Create and add user message
         const userMessage = createUserMessage(content);
-        addMessage(userMessage);
-        // Clear error and set loading
+        const draw = conversationDrawer(words => words);
+        let conversation = withPrompt(reduceConversation(emptyConversation(BROWSER_LIMITS), snapshotOfMessages(messages)), userMessage.id, content);
+        const show = (next) => {
+            conversation = next;
+            setMessages(draw(conversation, emptyChatLayer()).filter((item) => !isToolCallMessage(item)));
+        };
+        const reduce = (events) => {
+            if (events.length) {
+                show(events.reduce((kept, event) => reduceConversation(kept, event), conversation));
+            }
+        };
+        /** An adapter's event, as the conversation reads it; its failure is the chat's error. */
+        const read = (event) => {
+            if (event.type === 'error') {
+                if (event.error) {
+                    setError(event.error);
+                }
+                return;
+            }
+            try {
+                reduce(conversationEventsOf(event, conversation));
+            }
+            catch (failure) {
+                setError(failure instanceof Error ? failure : new Error(String(failure)));
+            }
+        };
+        show(conversation);
         setError(null);
         setLoading(true);
+        startStreaming(generateMessageId());
         try {
-            // Get registered tools
             const tools = getTools();
-            // Merge options
             const requestOptions = {
                 ...options,
                 tools: tools.length > 0 ? tools : undefined,
             };
-            // Get all messages for context
+            // Every message so far, for context.
             const allMessages = [...messages, userMessage];
-            // Create placeholder for assistant message
-            const assistantMessageId = generateMessageId();
-            const assistantMessage = createAssistantMessage('');
-            assistantMessage.id = assistantMessageId;
-            addMessage(assistantMessage);
-            // Stream the response
-            startStreaming(assistantMessageId);
-            // Use protocol adapter if available (for ag-ui, a2a, acp)
-            // Otherwise fall back to inference provider (for vercel-ai, OpenAI-compatible)
+            // A protocol adapter (ag-ui, a2a, acp) when there is one; else the
+            // inference provider (vercel-ai, OpenAI-compatible).
             if (protocolAdapter) {
-                // Track pending tool calls for this run
+                // The calls this run asks the page's tools for, run once it ends.
                 const pendingToolCalls = new Map();
-                let currentAssistantContent = '';
-                // Subscribe to adapter events
                 const unsubscribe = protocolAdapter.subscribe(event => {
-                    switch (event.type) {
-                        case 'message':
-                            // AG-UI sends incremental messages with accumulating content
-                            if (event.message) {
-                                const rawContent = typeof event.message.content === 'string'
-                                    ? event.message.content
-                                    : '';
-                                currentAssistantContent =
-                                    sanitizeAssistantContent(rawContent);
-                                // Update the assistant message with the current content
-                                updateMessage(assistantMessageId, {
-                                    content: currentAssistantContent,
-                                    toolCalls: event.message.toolCalls,
-                                });
-                            }
-                            break;
-                        case 'tool-call':
-                            // Track tool call for execution after stream completes
-                            if (event.toolCall) {
-                                console.log('[useChat] Tool call received:', event.toolCall.toolCallId, event.toolCall.toolName);
-                                pendingToolCalls.set(event.toolCall.toolCallId, {
-                                    toolName: event.toolCall.toolName,
-                                    args: event.toolCall.args,
-                                });
-                            }
-                            break;
-                        case 'error':
-                            if (event.error) {
-                                setError(event.error);
-                            }
-                            break;
+                    if (event.type === 'tool-call' && event.toolCall) {
+                        pendingToolCalls.set(event.toolCall.toolCallId, {
+                            toolName: event.toolCall.toolName,
+                            args: event.toolCall.args,
+                        });
                     }
+                    read(event);
                 });
                 try {
-                    // Send the initial message
                     await protocolAdapter.sendMessage(userMessage, {
                         tools: requestOptions.tools,
                         messages: allMessages,
                     });
-                    // After stream completes, execute any pending tool calls
                     if (pendingToolCalls.size > 0 && toolExecutor) {
-                        console.log('[useChat] Executing', pendingToolCalls.size, 'tool calls');
-                        // Execute tool calls and collect results
                         const toolResults = [];
                         for (const [toolCallId, { toolName, args }] of pendingToolCalls) {
-                            console.log('[useChat] Executing tool:', toolName, 'with args:', args);
                             const result = await toolExecutor.execute({
                                 toolCallId,
                                 toolName,
                                 args,
                             });
-                            console.log('[useChat] Tool result:', result);
                             toolResults.push({
                                 toolCallId,
                                 toolName,
                                 result: result.result,
                                 isError: !result.success,
                             });
+                            // The call answered, in the conversation.
+                            reduce(conversationEventsOf({
+                                type: 'tool-result',
+                                toolResult: {
+                                    toolCallId,
+                                    success: result.success,
+                                    result: result.result,
+                                    ...(result.success ? {} : { error: result.error }),
+                                },
+                            }, conversation));
                         }
-                        // Build messages array with tool results for continuation
-                        // Include the assistant message with tool calls
+                        // The run continued with the results: the assistant's calls,
+                        // then one `tool` message per result (AG-UI).
                         const assistantWithToolCalls = {
-                            id: assistantMessageId,
+                            id: generateMessageId(),
                             role: 'assistant',
-                            content: currentAssistantContent,
+                            content: '',
                             createdAt: new Date(),
                             toolCalls: Array.from(pendingToolCalls.entries()).map(([toolCallId, { toolName, args }]) => ({
                                 type: 'tool-call',
@@ -175,7 +175,6 @@ export function useChat() {
                                 status: 'completed',
                             })),
                         };
-                        // Create tool result messages
                         const toolResultMessages = toolResults.map(tr => ({
                             id: generateMessageId(),
                             role: 'tool',
@@ -187,48 +186,14 @@ export function useChat() {
                                 isError: tr.isError,
                             },
                         }));
-                        // Update stored messages
-                        updateMessage(assistantMessageId, assistantWithToolCalls);
-                        toolResultMessages.forEach(msg => addMessage(msg));
-                        // Create new assistant message for the continuation
-                        const continuationAssistantId = generateMessageId();
-                        const continuationMessage = createAssistantMessage('');
-                        continuationMessage.id = continuationAssistantId;
-                        addMessage(continuationMessage);
-                        startStreaming(continuationAssistantId);
-                        // Subscribe to continuation events
-                        const unsubscribeContinuation = protocolAdapter.subscribe(event => {
-                            if (event.type === 'message' && event.message) {
-                                const rawContent = typeof event.message.content === 'string'
-                                    ? event.message.content
-                                    : '';
-                                const content = sanitizeAssistantContent(rawContent);
-                                updateMessage(continuationAssistantId, {
-                                    content,
-                                    toolCalls: event.message.toolCalls,
-                                });
-                            }
-                            else if (event.type === 'error' && event.error) {
-                                setError(event.error);
-                            }
-                        });
-                        try {
-                            // Build the full message history for continuation
-                            const continuationMessages = [
+                        await protocolAdapter.sendMessage(toolResultMessages[toolResultMessages.length - 1], {
+                            tools: requestOptions.tools,
+                            messages: [
                                 ...allMessages,
                                 assistantWithToolCalls,
                                 ...toolResultMessages,
-                            ];
-                            // Send continuation request with tool results
-                            // AG-UI expects tool results as messages with role: "tool"
-                            await protocolAdapter.sendMessage(toolResultMessages[toolResultMessages.length - 1], {
-                                tools: requestOptions.tools,
-                                messages: continuationMessages,
-                            });
-                        }
-                        finally {
-                            unsubscribeContinuation();
-                        }
+                            ],
+                        });
                     }
                 }
                 finally {
@@ -236,47 +201,50 @@ export function useChat() {
                 }
             }
             else if (inferenceProvider) {
+                const answerId = generateMessageId();
+                reduce([
+                    { type: 'RUN_STARTED' },
+                    {
+                        type: 'TEXT_MESSAGE_START',
+                        messageId: answerId,
+                        role: 'assistant',
+                    },
+                ]);
                 const response = await inferenceProvider.streamMessage(allMessages, requestOptions, event => {
-                    switch (event.type) {
-                        case 'content-delta':
-                            if (event.delta?.delta.content) {
-                                appendToStream(assistantMessageId, event.delta.delta.content);
-                            }
-                            break;
-                        case 'tool-call-start':
-                            // Handle tool call UI update
-                            if (event.toolCall) {
-                                // Tool calls are handled by the tool executor
-                                console.log('[useChat] Tool call started:', event.toolCall);
-                            }
-                            break;
-                        case 'error':
-                            if (event.error) {
-                                setError(event.error);
-                            }
-                            break;
+                    if (event.type === 'content-delta' &&
+                        event.delta?.delta.content) {
+                        reduce([
+                            {
+                                type: 'TEXT_MESSAGE_CONTENT',
+                                messageId: answerId,
+                                delta: event.delta.delta.content,
+                            },
+                        ]);
+                    }
+                    else if (event.type === 'error' && event.error) {
+                        setError(event.error);
                     }
                 });
-                // Update final message with complete content and tool calls
-                const finalAssistantContent = typeof response.message.content === 'string'
-                    ? sanitizeAssistantContent(response.message.content)
-                    : response.message.content;
-                updateMessage(assistantMessageId, {
-                    content: finalAssistantContent,
-                    toolCalls: response.message.toolCalls,
-                });
-                // Handle tool calls if present
-                if (response.message.toolCalls &&
-                    response.message.toolCalls.length > 0) {
-                    // Tool calls are executed by the tool executor if configured
-                    if (toolExecutor) {
-                        for (const toolCall of response.message.toolCalls) {
-                            await toolExecutor.execute({
-                                toolCallId: toolCall.toolCallId,
-                                toolName: toolCall.toolName,
-                                args: toolCall.args,
-                            });
-                        }
+                // The answer as the provider gave it whole, then the run's end.
+                const said = conversationEventsOf({
+                    type: 'message',
+                    message: {
+                        id: answerId,
+                        role: 'assistant',
+                        content: typeof response.message.content === 'string'
+                            ? response.message.content
+                            : '',
+                    },
+                }, conversation);
+                reduce([...said, { type: 'RUN_FINISHED' }]);
+                // The page's tools run the calls it asked for.
+                if (toolExecutor && response.message.toolCalls?.length) {
+                    for (const toolCall of response.message.toolCalls) {
+                        await toolExecutor.execute({
+                            toolCallId: toolCall.toolCallId,
+                            toolName: toolCall.toolName,
+                            args: toolCall.args,
+                        });
                     }
                 }
             }
@@ -293,12 +261,10 @@ export function useChat() {
         protocolAdapter,
         toolExecutor,
         messages,
-        addMessage,
-        updateMessage,
+        setMessages,
         setLoading,
         setError,
         startStreaming,
-        appendToStream,
         stopStreaming,
         getTools,
     ]);