@datalayer/agent-runtimes 1.3.73 → 1.3.75

package/lib/chat/assistant/SpeechBalloon.js

@@ -1,13 +1,100 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { Button, IconButton, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon } from '@primer/octicons-react';
-import { ASSISTANT_WORDS } from './state';
+import { ASSISTANT_WORDS, } from './state';
 import { moreWaiting } from './ConversationBalloon';
 import { DecisionAsk } from './DecisionAsk';
-import { BalloonToolLineView, CurrentBalloonBody, ToolLineAnnouncer, } from './BalloonParts';
-export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, approval, decide, onDecisionActive, wide = false, onDismissPeek, display = 'history', tool, speaking = false, busy = false, attachment, }) {
+import { BalloonToolLineView, CurrentBalloonBody, ToolLineAnnouncer, conversationHeaderText, } from './BalloonParts';
+import { BalloonExpandButton } from './BalloonVisual';
+import { ScreenFullIcon } from '@primer/octicons-react';
+import { TypingDots } from '../indicators/TypingDots';
+/** The suggestions, as chips: each sends its prompt. */
+export function BalloonSuggestions({ suggestions, onSuggestion, }) {
+    return (_jsx(Box, { role: "group", "aria-label": "Suggestions", "data-balloon-suggestions": "", sx: { display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2 }, children: suggestions.map(suggestion => (_jsx(Button, { size: "small", "data-balloon-suggestion": suggestion.label, "aria-label": `Ask: ${suggestion.prompt}`, title: suggestion.prompt, onClick: () => onSuggestion(suggestion), sx: { borderRadius: 999 }, children: suggestion.label }, suggestion.label))) }));
+}
+/** How tall the listed conversation grows before it scrolls, in pixels. */
+export const BALLOON_HISTORY_MAX_HEIGHT = 220;
+/** Shorter, when something goes with the words under it (a notebook). */
+export const BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT = 120;
+/**
+ * The conversation in the `history` balloon: a header that counts it and
+ * opens it, then every message, the person's to the right, scrolled to the
+ * newest.
+ */
+/**
+ * The history balloon, large (*Expand*): every message, then the tool being
+ * called and what goes with the words, in the overlay or the page's area,
+ * scrolled there.
+ */
+export function BalloonHistoryLarge({ history, tool, attachment, }) {
+    return (_jsxs(Box, { role: "log", "aria-label": "Conversation", "data-balloon-history-large": "", sx: { display: 'flex', flexDirection: 'column', gap: 2, fontSize: 1 }, children: [history.map(message => (_jsx(Box, { "data-balloon-history-message": message.role, sx: {
+                    alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
+                    maxWidth: '80%',
+                    px: 3,
+                    py: 2,
+                    borderRadius: 2,
+                    bg: message.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
+                    whiteSpace: 'pre-wrap',
+                    overflowWrap: 'anywhere',
+                }, children: message.text }, message.id))), tool ? _jsx(BalloonToolLineView, { line: tool }) : null, attachment ? _jsx(Box, { children: attachment }) : null] }));
+}
+function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGHT, onExpand, }) {
+    const listRef = useRef(null);
+    const newest = history[history.length - 1]?.id;
+    useEffect(() => {
+        const list = listRef.current;
+        if (list) {
+            list.scrollTop = list.scrollHeight;
+        }
+    }, [history.length, newest]);
+    return (_jsxs(Box, { "data-balloon-history": "", sx: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-header": "", onClick: onOpen, sx: {
+                    m: 0,
+                    p: 0,
+                    pb: 1,
+                    border: 0,
+                    bg: 'transparent',
+                    font: 'inherit',
+                    textAlign: 'left',
+                    cursor: 'pointer',
+                    fontSize: 0,
+                    fontWeight: 'semibold',
+                    color: 'fg.muted',
+                    '&:hover': { textDecoration: 'underline' },
+                }, children: conversationHeaderText(history.length) }), onExpand ? (_jsx(IconButton, { icon: ScreenFullIcon, size: "small", variant: "invisible", "aria-label": "Expand the conversation", "data-balloon-history-expand": "", onClick: onExpand, sx: { position: 'absolute', top: '4px', right: '28px' } })) : null, _jsx(Box, { ref: listRef, role: "log", "aria-label": "Conversation", "data-balloon-history-list": "", sx: {
+                    maxHeight,
+                    overflowY: 'auto',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 1,
+                    pr: 1,
+                }, children: history.map(message => (_jsx(Box, { "data-balloon-history-message": message.role, sx: {
+                        alignSelf: message.role === 'user' ? 'flex-end' : 'flex-start',
+                        maxWidth: '88%',
+                        px: 2,
+                        py: 1,
+                        borderRadius: 2,
+                        bg: message.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
+                        overflowWrap: 'anywhere',
+                    }, children: message.text }, message.id))) })] }));
+}
+export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, approval, decide, onDecisionActive, wide = false, onDismissPeek, display = 'history', tool, speaking = false, busy = false, attachment, history, onExpand, expandTitle, suggestions, onSuggestion, waiting = false, fullText, onExpandHistory, }) {
+    // *more*: the words whole, when they were cut or overflow their lines.
+    const [whole, setWhole] = useState(false);
+    const [overflowing, setOverflowing] = useState(false);
+    const cut = (!!fullText && fullText !== text) || (!!more && text.endsWith('…'));
+    const wholeText = fullText ?? text;
+    // Other words, folded again.
+    useEffect(() => {
+        setWhole(false);
+    }, [wholeText.slice(0, 40)]);
+    const offered = suggestions && suggestions.length > 0 && onSuggestion && !approval
+        ? suggestions
+        : null;
     const current = display === 'current';
+    // History with messages to list: all of them, not the newest line alone.
+    const listed = !current && history && history.length > 0 ? history : null;
     return (_jsxs(Box, { "data-speech-balloon": "", "data-balloon-display": display, sx: {
             position: 'absolute',
             // Pixels, as strings: a number here is read as the theme's space
@@ -16,8 +103,14 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                 ? { bottom: `${above}px` }
                 : { top: `${above}px` }),
             [align]: 0,
-            maxWidth: wide || (current && attachment) ? 300 : current ? 260 : 280,
-            width: wide || (current && attachment) ? 300 : 'max-content',
+            maxWidth: wide || listed || offered || whole || (current && attachment)
+                ? 300
+                : current
+                    ? 260
+                    : 280,
+            width: wide || listed || offered || whole || (current && attachment)
+                ? 300
+                : 'max-content',
             px: 3,
             py: 2,
             bg: 'canvas.default',
@@ -54,7 +147,9 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                             font: 'inherit',
                             textAlign: 'left',
                             cursor: 'pointer',
-                        }, children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking }) })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
+                        }, children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking, waiting: waiting, whole: whole, fullText: wholeText, onOverflow: setOverflowing }) })) : listed ? (_jsx(BalloonHistory, { history: listed, onOpen: onOpen, onExpand: onExpandHistory, maxHeight: attachment
+                            ? BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT
+                            : BALLOON_HISTORY_MAX_HEIGHT })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
                             flex: 1,
                             minWidth: 0,
                             m: 0,
@@ -66,6 +161,17 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                             textAlign: 'left',
                             cursor: 'pointer',
                             '&:hover': { textDecoration: 'underline' },
-                        }, children: tool ? (_jsx(BalloonToolLineView, { line: tool })) : (_jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text })) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss", "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: ASSISTANT_WORDS.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: ASSISTANT_WORDS.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: moreWaiting(approval.others) })) : null] })), current && attachment ? (_jsx(Box, { "data-balloon-attachment": "", sx: { mt: 2 }, children: attachment })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
+                        }, children: tool ? (_jsx(BalloonToolLineView, { line: tool })) : (_jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text })) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss", "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), current && !approval && !tool && (cut || overflowing || whole) ? (_jsx(Box, { as: "button", type: "button", "aria-expanded": whole, "data-balloon-whole": whole ? 'less' : 'more', onClick: () => setWhole(!whole), sx: {
+                    m: 0,
+                    mt: 1,
+                    p: 0,
+                    border: 0,
+                    bg: 'transparent',
+                    color: 'accent.fg',
+                    font: 'inherit',
+                    fontSize: 0,
+                    cursor: 'pointer',
+                    '&:hover': { textDecoration: 'underline' },
+                }, children: whole ? 'less' : 'more' })) : null, listed && tool ? (_jsx(Box, { "data-balloon-history-tool": "", sx: { mt: 1 }, children: _jsx(BalloonToolLineView, { line: tool }) })) : null, !current && waiting ? (_jsx(Box, { "data-balloon-waiting": "", sx: { mt: 1 }, children: _jsx(TypingDots, { size: 6 }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: ASSISTANT_WORDS.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: ASSISTANT_WORDS.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: moreWaiting(approval.others) })) : null] })), offered && onSuggestion ? (_jsx(BalloonSuggestions, { suggestions: offered, onSuggestion: onSuggestion })) : null, attachment ? (_jsxs(Box, { "data-balloon-attachment": "", sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 1 }, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? 'the visual', onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
 }
 export default SpeechBalloon;

package/lib/chat/assistant/state.d.ts

@@ -79,6 +79,25 @@ export interface AssistantSaying {
 }
 /** How much of a message is kept as the agent's saying before it is cut. */
 export declare const SAYING_LIMIT = 220;
+/**
+ * A message's content as plain words, for a balloon: its text parts joined,
+ * code blocks left out, links and Markdown read as plain words.
+ */
+export declare function plainWordsOf(content: unknown): string;
+/** A message of the conversation, as the `history` balloon lists it. */
+export interface BalloonHistoryMessage {
+    id: string;
+    /** Who said it: the person, or the agent. */
+    role: 'user' | 'assistant';
+    /** Its words, plain. */
+    text: string;
+}
+/**
+ * The conversation as the `history` balloon lists it (T-23): the person's
+ * and the agent's messages with words, in order — not the tool calls, not
+ * an empty message — the same messages its header counts.
+ */
+export declare function balloonHistoryOf(items: readonly unknown[]): BalloonHistoryMessage[];
 /**
  * The newest thing the agent said, as the Office Assistant said it: in the
  * balloon, while the conversation is closed (T-23). Only its own messages

package/lib/chat/assistant/state.js

@@ -52,6 +52,49 @@ export const ASSISTANT_WORDS = {
 };
 /** How much of a message is kept as the agent's saying before it is cut. */
 export const SAYING_LIMIT = 220;
+/**
+ * A message's content as plain words, for a balloon: its text parts joined,
+ * code blocks left out, links and Markdown read as plain words.
+ */
+export function plainWordsOf(content) {
+    const raw = typeof content === 'string'
+        ? content
+        : Array.isArray(content)
+            ? content
+                .map(part => part &&
+                typeof part === 'object' &&
+                part.type === 'text'
+                ? String(part.text ?? '')
+                : '')
+                .join(' ')
+            : '';
+    return raw
+        .replace(/```[\s\S]*?```/g, ' ')
+        .replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1')
+        .replace(/[*_`#>]+/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+/**
+ * The conversation as the `history` balloon lists it (T-23): the person's
+ * and the agent's messages with words, in order — not the tool calls, not
+ * an empty message — the same messages its header counts.
+ */
+export function balloonHistoryOf(items) {
+    const history = [];
+    items.forEach((entry, index) => {
+        const item = entry;
+        if ((item.role !== 'user' && item.role !== 'assistant') ||
+            typeof item.toolName === 'string') {
+            return;
+        }
+        const text = plainWordsOf(item.content);
+        if (text) {
+            history.push({ id: String(item.id ?? index), role: item.role, text });
+        }
+    });
+    return history;
+}
 /**
  * The newest thing the agent said, as the Office Assistant said it: in the
  * balloon, while the conversation is closed (T-23). Only its own messages
@@ -64,23 +107,7 @@ export function latestSaying(items) {
         if (item.role !== 'assistant' || typeof item.toolName === 'string') {
             continue;
         }
-        const raw = typeof item.content === 'string'
-            ? item.content
-            : Array.isArray(item.content)
-                ? item.content
-                    .map(part => part &&
-                    typeof part === 'object' &&
-                    part.type === 'text'
-                    ? String(part.text ?? '')
-                    : '')
-                    .join(' ')
-                : '';
-        const plain = raw
-            .replace(/```[\s\S]*?```/g, ' ')
-            .replace(/!?\[([^\]]*)\]\([^)]*\)/g, '$1')
-            .replace(/[*_`#>]+/g, '')
-            .replace(/\s+/g, ' ')
-            .trim();
+        const plain = plainWordsOf(item.content);
         if (!plain) {
             continue;
         }

package/lib/chat/base/ChatBase.js

@@ -58,6 +58,8 @@ const EphemeralDocument = React.lazy(() => import('../document/EphemeralDocument
     default: m.EphemeralDocument,
 })));
 import { useNotebookTools } from '../../tools/adapters/agent-runtimes/notebookHooks';
+import { useAgentInspectorSink } from '../../components/inspector/agentInspector';
+import { chatInspectorRecorder, } from '../../components/inspector/chatInspect';
 // Tracks pending prompts already auto-sent for a given conversation scope.
 // This prevents layout-driven unmount/remount cycles from re-sending prompts.
 const sentPendingPromptKeys = new Set();
@@ -513,7 +515,7 @@ useStore: useStoreMode = true, protocol: protocolRaw, onSendMessage, onSendReady
 // Extended props
 brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, renderHeader, showTurnFooter = true, notebookToolSurfacesId, footerContent, welcome, trailingContent, voice, voiceSpeaking = false, onStopSpeaking, showInformation = false, onInformationClick, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, onItemsChange, onDisplayItemsChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools: frontendToolsProp, enableEphemeralNotebook = false, initialEphemeralNotebookOpen = true, onEphemeralNotebookOpenChange, enableEphemeralDocument = false, initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange, collapsed = false, onExpandFromCollapsed, ephemeralNotebookToolbar, ephemeralNotebookToolbarExtraItems, ephemeralDocumentToolbarExtraItems, ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration, ephemeralRuntimeOverride, 
 // Tool invocation hooks
-onToolCallStart, onToolCallComplete, 
+onToolCallStart, onToolCallComplete, inspector: inspectorGiven, 
 // Identity/Authorization props
 onAuthorizationRequired: _onAuthorizationRequired, connectedIdentities, 
 // Conversation persistence
@@ -1589,6 +1591,25 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     onToolCallStartRef.current = onToolCallStart;
     const onToolCallCompleteRef = useRef(onToolCallComplete);
     onToolCallCompleteRef.current = onToolCallComplete;
+    // The Agent Inspector: the turns and tool calls, recorded as they happen.
+    const inspectorFromContext = useAgentInspectorSink();
+    const inspectorSink = inspectorGiven ?? inspectorFromContext;
+    const inspectorActorRef = useRef('Agent');
+    inspectorActorRef.current =
+        (typeof title === 'string' && title) || activeAgentId || 'Agent';
+    const recorderRef = useRef(null);
+    if (inspectorSink && recorderRef.current?.sink !== inspectorSink) {
+        recorderRef.current = {
+            sink: inspectorSink,
+            recorder: chatInspectorRecorder(inspectorSink, () => inspectorActorRef.current, {
+                frontendTools: () => (frontendToolsRef.current ?? []).map(tool => tool.name),
+            }),
+        };
+    }
+    else if (!inspectorSink) {
+        recorderRef.current = null;
+    }
+    const inspectAnswerRef = useRef('');
     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
@@ -2415,6 +2436,9 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                             const sanitizedContent = typeof rawContent === 'string'
                                 ? sanitizeAssistantContent(rawContent)
                                 : (rawContent ?? '');
+                            if (typeof sanitizedContent === 'string' && sanitizedContent) {
+                                inspectAnswerRef.current = sanitizedContent;
+                            }
                             setDisplayItems(prev => {
                                 const newItems = [...prev];
                                 const idx = newItems.findIndex(item => !isToolCallMessage(item) && item.id === currentId);
@@ -2520,6 +2544,11 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                                 toolCallId,
                                 args,
                             });
+                            recorderRef.current?.recorder.toolStarted({
+                                id: toolCallId,
+                                name: toolName,
+                                args,
+                            });
                             const frontendTool = frontendToolsRef.current?.find(t => t.name === toolName);
                             const toolHandler = frontendTool?.handler;
                             // Execute when the args are complete. The protocol says so
@@ -2604,6 +2633,13 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                                 setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
                                     ? updatedToolCall
                                     : item));
+                                recorderRef.current?.recorder.toolEnded(toolCallId, {
+                                    result: event.toolResult.result,
+                                    error: event.toolResult.error ??
+                                        (updatedToolCall.status === 'error'
+                                            ? (executionError ?? 'failed')
+                                            : undefined),
+                                });
                                 // Fire post-hook for tool results
                                 onToolCallCompleteRef.current?.({
                                     toolName: existingToolCall.toolName,
@@ -2657,6 +2693,11 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                      * The bar and its ring simply never appeared for a browser agent.
                      */
                     {
+                        recorderRef.current?.recorder.turnEnded({
+                            text: inspectAnswerRef.current || undefined,
+                            usage: event.usage,
+                        });
+                        inspectAnswerRef.current = '';
                         const turnInput = event.usage?.promptTokens ?? 0;
                         const turnOutput = event.usage?.completionTokens ?? 0;
                         // The parts sum to the total when the harness did not send one:
@@ -2710,6 +2751,9 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     break;
                 case 'error':
                     console.error('[ChatBase] Protocol error:', event.error);
+                    recorderRef.current?.recorder.turnEnded({
+                        error: event.error?.message ?? 'error',
+                    });
                     if (event.error?.message &&
                         /exceeded maximum retries/i.test(event.error.message) &&
                         hideMessagesAfterToolUIRef.current) {
@@ -2777,6 +2821,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     result,
                     status: 'complete',
                 };
+                recorderRef.current?.recorder.toolEnded(toolCallId, { result });
                 toolCallsRef.current.set(toolCallId, completedToolCall);
                 setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
                     ? completedToolCall
@@ -2789,6 +2834,9 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     status: 'error',
                     error: err.message,
                 };
+                recorderRef.current?.recorder.toolEnded(toolCallId, {
+                    error: err.message,
+                });
                 toolCallsRef.current.set(toolCallId, errorToolCall);
                 setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
                     ? errorToolCall
@@ -2838,6 +2886,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         if (!adapterRef.current && !onSendMessage)
             return;
         stoppedRef.current = false;
+        inspectAnswerRef.current = '';
+        recorderRef.current?.recorder.turnStarted(messageContent, selectedModel || undefined);
         suppressAssistantTextForToolOnlyRef.current =
             isToolCallOnlyPrompt(messageContent);
         // Said, then sent: by the microphone at once, or from the composer it

package/lib/chat/indicators/TypingDots.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Three pulsing dots: a speaker is still at work and has not written yet —
+ * the chat's waiting indicator, and the assistant's balloon's. Still, but
+ * shown, for a reader who asks for reduced motion. Hidden from a screen
+ * reader: the live region beside it says the state.
+ *
+ * @module chat/indicators/TypingDots
+ */
+import type { ReactElement } from 'react';
+export declare function TypingDots({ size }: {
+    size?: number;
+}): ReactElement;
+export default TypingDots;

package/lib/chat/indicators/TypingDots.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+export function TypingDots({ size = 8 }) {
+    return (_jsx(Box, { "aria-hidden": "true", "data-typing-dots": "", sx: { display: 'inline-flex', alignItems: 'center', gap: '4px' }, children: [0, 0.2, 0.4].map((delay, index) => (_jsx(Box, { sx: {
+                width: size,
+                height: size,
+                borderRadius: '50%',
+                bg: 'fg.muted',
+                animation: 'typingPulse 1.4s ease-in-out infinite',
+                animationDelay: `${delay}s`,
+                '@keyframes typingPulse': {
+                    '0%, 60%, 100%': { transform: 'scale(0.6)', opacity: 0.4 },
+                    '30%': { transform: 'scale(1)', opacity: 1 },
+                },
+                '@media (prefers-reduced-motion: reduce)': {
+                    animation: 'none',
+                    opacity: 0.7,
+                },
+            } }, index))) }));
+}
+export default TypingDots;

package/lib/chat/messages/ChatMessageList.js

@@ -18,6 +18,7 @@ import { Streamdown } from 'streamdown';
 import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
 import { ToolCallDisplay } from '../tools/ToolCallDisplay';
 import { marksOfToolCall, skillIdOfCall } from '../marks';
+import { TypingDots } from '../indicators/TypingDots';
 import { TurnFooter } from './TurnFooter';
 import { normalizeAssistantMarkdown } from './assistantMarkdown';
 import { parseFormSubmission } from './formSubmission';
@@ -62,21 +63,6 @@ function toneColorsOf(tone) {
         fg: `${tone}.fg`,
     };
 }
-/** Three pulsing dots: a speaker is still writing and has not settled yet. */
-function TypingDots({ size = 8 }) {
-    return (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: '4px' }, children: [0, 0.2, 0.4].map((delay, index) => (_jsx(Box, { sx: {
-                width: size,
-                height: size,
-                borderRadius: '50%',
-                bg: 'fg.muted',
-                animation: 'typingPulse 1.4s ease-in-out infinite',
-                animationDelay: `${delay}s`,
-                '@keyframes typingPulse': {
-                    '0%, 60%, 100%': { transform: 'scale(0.6)', opacity: 0.4 },
-                    '30%': { transform: 'scale(1)', opacity: 1 },
-                },
-            } }, index))) }));
-}
 const SUBAGENT_AVATAR_CONFIG = {
     userAvatar: _jsx(PersonIcon, { size: 14 }),
     assistantAvatar: _jsx(DependabotIcon, { size: 14 }),

package/lib/components/inspector/AgentInspector.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The Agent Inspector: what agents do, one row a thing, newest last — the
+ * time (to the millisecond, and since the first), who did it and toward
+ * whom, its source and kind, its name with its mark, its status and
+ * duration, and a line that says it. A row unfolds to its payload as a JSON
+ * tree (a call's arguments and its result), and to what was made of it.
+ *
+ * Filters by source, kind and actor; *Pause* holds the rows still while the
+ * record goes on, *Clear* empties it, *Export* saves the session as JSON. A
+ * large payload (a notebook) says its size and stays folded until asked.
+ *
+ * Fed by a sink (`useAgentInspector`) or given its entries.
+ *
+ * @module components/inspector/AgentInspector
+ */
+import type { JSX } from 'react';
+import { type AgentInspectorEntry, type AgentInspectorExport, type AgentInspectorSink, type AgentInspectorSource } from './agentInspector';
+export type AgentInspectorProps = {
+    /** The record to show, kept current. */
+    sink?: AgentInspectorSink | null;
+    /** Or its entries, as given. */
+    entries?: readonly AgentInspectorEntry[];
+    /** How tall the rows grow before they scroll. */
+    maxHeight?: number | string;
+    /** Payloads larger than this, in bytes, stay folded until asked. */
+    largeBytes?: number;
+    /** What is said while nothing is recorded. */
+    emptyText?: string;
+    /** The file name the session is exported as, without `.json`. */
+    exportName?: string;
+    /**
+     * One agent's own record: what it did (`actor`), and the A2A messages it
+     * sent or received — one message shows in the sender's and in the
+     * receiver's, the same entry, as sent in one and received in the other.
+     */
+    agent?: string;
+};
+/** Whether an entry is one agent's: done by it, or sent to or by it. */
+export declare function isAgentsEntry(entry: AgentInspectorEntry, agent: string): boolean;
+/** Which way an entry went, from one agent's side: `→ Accounting`, `← Accounting`. */
+export declare function directionFrom(entry: AgentInspectorEntry, agent: string | undefined): string;
+/** A time of day, to the millisecond: `15:44:31.299`. */
+export declare function clockTime(at: number): string;
+/** Time since the first entry: `+1.204s`. */
+export declare function sinceFirst(at: number, first: number): string;
+/** How long a call took: `412 ms`, `3.4 s`. */
+export declare function durationText(ms: number): string;
+export type AgentInspectorFilter = {
+    sources: ReadonlySet<AgentInspectorSource>;
+    kinds: ReadonlySet<string>;
+    actors: ReadonlySet<string>;
+};
+/** The entries a filter keeps: an empty set keeps every value. */
+export declare function filterEntries(entries: readonly AgentInspectorEntry[], filter: AgentInspectorFilter): AgentInspectorEntry[];
+/** A session, as JSON. */
+export declare function exportEntries(entries: readonly AgentInspectorEntry[]): AgentInspectorExport;
+/** The Agent Inspector. */
+export declare function AgentInspector({ sink, entries: given, maxHeight, largeBytes, emptyText, exportName, agent, }: AgentInspectorProps): JSX.Element;
+export default AgentInspector;