@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/chat/messages/ChatMessageList.js

@@ -9,15 +9,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @module chat/messages/MessageList
  */
-import { useState, useCallback, useEffect, useMemo, useRef, } from 'react';
-import { Text, Spinner } from '@primer/react';
-import { DependabotIcon, PersonIcon } from '@primer/octicons-react';
+import { Fragment, useState, useCallback, useEffect, useMemo, useRef, } from 'react';
+import { Text, Spinner, Link, Label, RelativeTime } from '@primer/react';
+import { ArrowRightIcon, BroadcastIcon, ClockIcon, DependabotIcon, PersonIcon, SkipIcon, ToolsIcon, XCircleFillIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { Streamdown } from 'streamdown';
 import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
 import { ToolCallDisplay } from '../tools/ToolCallDisplay';
+import { TurnFooter } from './TurnFooter';
+import { normalizeAssistantMarkdown } from './assistantMarkdown';
 import { isToolCallMessage, getMessageText } from '../../utils';
-import { useAgentRuntimeStore, useAgentRuntimeSubagentActivityByToolCall, agentRuntimeStore, } from '../../stores/agentRuntimeStore';
+import { A2AAgentDialog, a2aAgentDetails } from '../tools/A2AAgentDialog';
+import { SUBAGENT_STOPPED } from '../../types/stream';
+import { useAgentRuntimeStore, useAgentRuntimeSubagentActivity, useAgentRuntimeSubagentActivityByToolCall, agentRuntimeStore, } from '../../stores/agentRuntimeStore';
 // ---------------------------------------------------------------------------
 // Normalize helper
 // ---------------------------------------------------------------------------
@@ -27,49 +31,47 @@ function normalizeName(name) {
         .replace(/[-_]/g, '')
         .toLowerCase();
 }
+// ---------------------------------------------------------------------------
+// Speakers — a message's name, tone and initials, for a chat that holds more
+// than one non-user voice (a team's supervisor and its members, a
+// delegation's asker and asked — not just "the assistant").
+// ---------------------------------------------------------------------------
 /**
- * Expand a single-line markdown table (rows joined with `||`) into one row
- * per line so a markdown renderer can produce a real HTML table. Idempotent:
- * any pre-existing `|\n|` boundaries are unaffected.
+ * A speaker's tone as the four Primer functional colours its header, its
+ * bubble and its avatar are drawn in. `'neutral'` (the default, for a
+ * speaker with no tone of its own) falls back to plain canvas/border/fg
+ * tokens, since Primer has no `neutral.subtle`.
  */
-function expandCompactMarkdownTableBody(body) {
-    if (!body)
-        return body;
-    if (!/\|\s*[-:| ]{3,}\|/.test(body))
-        return body;
-    if (!body.includes('||'))
-        return body;
-    return body.replace(/\|\|/g, '|\n|');
+function toneColorsOf(tone) {
+    if (!tone || tone === 'neutral') {
+        return {
+            emphasis: 'neutral.emphasis',
+            subtle: 'canvas.subtle',
+            muted: 'border.default',
+            fg: 'fg.default',
+        };
+    }
+    return {
+        emphasis: `${tone}.emphasis`,
+        subtle: `${tone}.subtle`,
+        muted: `${tone}.muted`,
+        fg: `${tone}.fg`,
+    };
 }
-/**
- * Pre-process assistant text for Streamdown:
- *  - Unwrap ```markdown / ```md fenced blocks so tables render as HTML
- *    instead of as a code block.
- *  - Inside any fenced block (or top-level body), expand compact one-line
- *    markdown tables.
- */
-function normalizeAssistantMarkdown(text) {
-    if (!text)
-        return text;
-    // Unwrap explicit ```markdown / ```md fences and expand compact tables.
-    let out = text.replace(/```(markdown|md)\s*\n([\s\S]*?)```/gi, (_match, _lang, body) => {
-        const expanded = expandCompactMarkdownTableBody(body.trim());
-        return `\n\n${expanded}\n\n`;
-    });
-    // Also expand compact tables inside other fenced blocks that happen to
-    // carry a markdown table (e.g. bare ``` fences).
-    out = out.replace(/```([a-zA-Z0-9_+-]*)\n([\s\S]*?)```/g, (match, lang, body) => {
-        const expanded = expandCompactMarkdownTableBody(body);
-        if (expanded === body)
-            return match;
-        // If we expanded an unlabeled fence containing a real markdown table,
-        // unwrap it so it renders as a table.
-        if (!lang || /^(text|plain)$/i.test(lang)) {
-            return `\n\n${expanded.trim()}\n\n`;
-        }
-        return `\`\`\`${lang}\n${expanded}\`\`\``;
-    });
-    return out;
+/** 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 }),
@@ -185,6 +187,18 @@ export function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint,
     }, [events, subagentNameHint]);
     const isDone = useMemo(() => events.some(e => e.phase === 'end' || e.phase === 'error'), [events]);
     const hasError = useMemo(() => events.some(e => e.phase === 'error'), [events]);
+    // A stop is an error the person asked for: shown as stopped, not failed.
+    const isStopped = useMemo(() => events.some(e => e.phase === 'error' && e.error === SUBAGENT_STOPPED), [events]);
+    /*
+     * A run over A2A is a separate agent's: the box says so, names where it
+     * runs, links its card, and while the agent is still being launched says
+     * that rather than "working".
+     */
+    const remote = useMemo(() => a2aAgentDetails(events, subagentNameHint), [events, subagentNameHint]);
+    const overA2A = remote !== null;
+    // "card" in the header opens the agent's details over the chat rather than
+    // a tab: the run's facts, the card fetched live, and the link out.
+    const [cardOpen, setCardOpen] = useState(false);
     // Forward inline tool-approval decisions to the shared monitoring socket.
     const handleRespond = useCallback(async (_toolCallId, result) => {
         if (result && typeof result === 'object') {
@@ -199,19 +213,41 @@ export function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint,
         }
     }, []);
     useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ block: 'end' });
+        messagesEndRef.current?.scrollIntoView?.({ block: 'end' });
     }, [displayItems]);
     if (events.length === 0) {
         return null;
     }
-    return (_jsxs(Box, { sx: {
+    /*
+     * Coloured for what it is: a run under way is accent, a finished one
+     * success, a failed one danger — the frame, the header and the name all
+     * say so, so the box reads as a subagent's at a glance rather than as one
+     * more grey card among the tool cards.
+     */
+    const tone = hasError
+        ? isStopped
+            ? 'attention'
+            : 'danger'
+        : isDone
+            ? 'success'
+            : 'accent';
+    const progress = hasError
+        ? isStopped
+            ? 'stopped'
+            : 'failed'
+        : isDone
+            ? 'done'
+            : overA2A && remote?.state === 'launching'
+                ? 'launching\u2026'
+                : 'working\u2026';
+    return (_jsxs(Box, { "data-subagent-panel": subagentName, "data-subagent-transport": overA2A ? 'a2a' : 'in-process', sx: {
             mt: 2,
             display: 'flex',
             flexDirection: 'column',
             height,
             width: '100%',
             border: '1px solid',
-            borderColor: 'border.default',
+            borderColor: `${tone}.emphasis`,
             borderRadius: 2,
             overflow: 'hidden',
             bg: 'canvas.default',
@@ -222,13 +258,10 @@ export function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint,
                     px: 2,
                     py: 1,
                     borderBottom: '1px solid',
-                    borderColor: 'border.muted',
-                    bg: 'canvas.subtle',
+                    borderColor: `${tone}.muted`,
+                    bg: `${tone}.subtle`,
                     flexShrink: 0,
-                }, children: [_jsx(Box, { sx: {
-                            display: 'flex',
-                            color: hasError ? 'danger.fg' : isDone ? 'success.fg' : 'accent.fg',
-                        }, children: _jsx(DependabotIcon, { size: 14 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.default' }, children: subagentName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 'auto' }, children: hasError ? 'failed' : isDone ? 'done' : 'working\u2026' })] }), _jsx(Box, { sx: { flex: 1, minHeight: 0, overflowY: 'auto' }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: !isDone, isStreaming: !isDone, showLoadingIndicator: !isDone, hideMessagesAfterToolUI: false, avatarConfig: avatarConfig, padding: 2, onRespond: handleRespond, messagesEndRef: messagesEndRef, emptyContent: _jsxs(Box, { sx: {
+                }, children: [_jsx(Box, { sx: { display: 'flex', color: `${tone}.fg` }, children: overA2A ? _jsx(BroadcastIcon, { size: 14 }) : _jsx(DependabotIcon, { size: 14 }) }), _jsx(Text, { sx: { fontSize: 0, color: `${tone}.fg` }, children: overA2A ? 'A2A agent' : 'Subagent' }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: `${tone}.fg` }, children: subagentName }), remote?.launch ? (_jsx(Text, { sx: { fontSize: 0, color: `${tone}.fg`, opacity: 0.8 }, children: remote.launch })) : null, remote ? (_jsx(Link, { as: "button", type: "button", "data-a2a-card-button": true, onClick: () => setCardOpen(true), sx: { fontSize: 0, ml: 1 }, children: "card" })) : null, _jsx(Text, { sx: { fontSize: 0, color: `${tone}.fg`, ml: 'auto' }, children: progress })] }), cardOpen && remote ? (_jsx(A2AAgentDialog, { details: remote, onClose: () => setCardOpen(false) })) : null, _jsx(Box, { sx: { flex: 1, minHeight: 0, overflowY: 'auto' }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: !isDone, isStreaming: !isDone, showLoadingIndicator: !isDone, hideMessagesAfterToolUI: false, avatarConfig: avatarConfig, padding: 2, onRespond: handleRespond, messagesEndRef: messagesEndRef, emptyContent: _jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 1,
@@ -341,11 +374,25 @@ function DefaultToolCallRenderer({ item, onRespond, }) {
         : externalDecision
             ? 'external'
             : undefined;
-    // `normalizeName` strips underscores, so compare against the normalized form.
-    const isSubagentDelegation = normalizedToolName === 'delegatetask';
+    /*
+     * A delegation, either way it is spelled.
+     *
+     * A server-side harness delegates through one `delegate_task` tool that
+     * names the subagent in its arguments; the in-page loop gives the parent
+     * one tool *per* subagent, named after it. The store is keyed by the parent
+     * tool call whichever way, so a call that has activity under its id is a
+     * delegation — and the box below shows the run, boxed like the tool card
+     * above it and named for who is running.
+     */
+    const delegationEvents = useAgentRuntimeSubagentActivity(item.toolCallId);
+    const isSubagentDelegation = normalizedToolName === 'delegatetask' || delegationEvents.length > 0;
     const delegatedSubagentName = typeof item.args?.subagent_name === 'string'
         ? item.args.subagent_name
-        : undefined;
+        : typeof item.args?.subagent === 'string'
+            ? item.args.subagent
+            : normalizedToolName === 'delegatetask'
+                ? undefined
+                : item.toolName;
     return (_jsxs(_Fragment, { children: [_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error, executionError: item.executionError, codeError: item.codeError, exitCode: item.exitCode, approvalRequired: hasApproval, approvalState: approvalState, approvalDecisionSource: approvalDecisionSource, onApprove: effectiveApprovalId && !decision && !externalDecision
                     ? () => makeDecision('approve')
                     : undefined, onDeny: effectiveApprovalId && !decision && !externalDecision
@@ -355,7 +402,7 @@ function DefaultToolCallRenderer({ item, onRespond, }) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, }) {
+export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, showTurnFooters = false, agentUsage, onRemoveItems, renderMessageFooter, }) {
     if (displayItems.length === 0) {
         return _jsx(_Fragment, { children: emptyContent });
     }
@@ -378,6 +425,8 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                     result: item.result,
                     status: item.status,
                     error: item.error,
+                    // Only tested for null-ness here, so the node itself is not built.
+                    defaultUI: null,
                 });
                 if (rendered !== null && rendered !== undefined) {
                     renderedToolCallIds.add(item.toolCallId);
@@ -390,111 +439,284 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
         }
     });
     const hasRenderedToolCall = renderedToolCallIds.size > 0;
-    return (_jsxs(_Fragment, { children: [displayItems.map((item, index) => {
-                // ---- Tool call item ----
-                if (isToolCallMessage(item)) {
-                    const respond = item.status === 'executing' || item.status === 'inProgress'
-                        ? createRespondCallback(item.toolCallId)
-                        : undefined;
-                    const toolUI = renderToolResult ? (renderToolResult({
-                        toolCallId: item.toolCallId,
-                        toolName: item.toolName,
-                        name: item.toolName,
-                        args: item.args,
-                        result: item.result,
-                        status: item.status,
-                        error: item.error,
-                        respond,
-                    })) : (_jsx(DefaultToolCallRenderer, { item: item, approvalConfig: approvalConfig, onRespond: createRespondCallback(item.toolCallId) }));
-                    if (toolUI === null || toolUI === undefined)
-                        return null;
-                    return (_jsx(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'flex-start',
-                            maxWidth: '95%',
-                            px: padding,
-                            py: 1,
-                        }, children: toolUI }, item.id));
+    /*
+     * Turn boundaries: a turn opens at each of the person's messages and runs
+     * to the item before the next one. The footer stands after a turn's last
+     * item — attached by index, not to the item's own rendering, so a turn
+     * whose closing item happens to be hidden still gets its accounting row.
+     */
+    const turnEnds = new Map();
+    if (showTurnFooters) {
+        let start = -1;
+        displayItems.forEach((item, index) => {
+            const opensTurn = !isToolCallMessage(item) && item.role === 'user';
+            if (opensTurn) {
+                if (start >= 0) {
+                    turnEnds.set(index - 1, start);
                 }
-                // ---- Chat message item ----
+                start = index;
+            }
+        });
+        if (start >= 0) {
+            turnEnds.set(displayItems.length - 1, start);
+        }
+    }
+    /** The turn as text: the person's ask, the answers, the tools by name. */
+    const copyTurn = (start, end) => {
+        const lines = [];
+        for (let index = start; index <= end; index += 1) {
+            const item = displayItems[index];
+            if (isToolCallMessage(item)) {
+                lines.push(`[tool · ${item.toolName}]`);
+            }
+            else {
                 const message = item;
-                const isUser = message.role === 'user';
-                // Optionally hide assistant messages that follow a rendered tool call
-                if (!isUser && hideMessagesAfterToolUI && hasRenderedToolCall) {
-                    const messageText = getMessageText(message);
-                    const prevIndex = index - 1;
-                    if (prevIndex >= 0) {
-                        const prevItem = displayItems[prevIndex];
-                        if (isToolCallMessage(prevItem) &&
-                            renderedToolCallIds.has(prevItem.toolCallId)) {
-                            return null;
-                        }
-                    }
-                    // Check for HITL-specific patterns
-                    const hitlToolCall = displayItems.find(di => isToolCallMessage(di) &&
-                        renderedToolCallIds.has(di.toolCallId) &&
-                        di.args &&
-                        'steps' in di.args &&
-                        Array.isArray(di.args.steps));
-                    if (hitlToolCall && messageText) {
-                        const steps = hitlToolCall.args.steps;
-                        const hasStepContent = steps.some(step => step.description &&
-                            messageText
-                                .toLowerCase()
-                                .includes(step.description.toLowerCase().slice(0, 20))) ||
-                            /^\s*(\d+\.\s|[-*]\s|\*\*)/.test(messageText) ||
-                            messageText.includes('**Enabled**') ||
-                            messageText.includes('steps below');
-                        if (hasStepContent) {
-                            return null;
-                        }
-                    }
+                const text = getMessageText(message);
+                if (text) {
+                    lines.push(message.role === 'user' ? `You: ${text}` : text);
                 }
-                return (_jsx(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: isUser ? 'flex-end' : 'flex-start',
-                        px: padding,
+            }
+        }
+        return (navigator.clipboard?.writeText(lines.join('\n\n')) ?? Promise.resolve());
+    };
+    const footerAt = (index) => {
+        const start = turnEnds.get(index);
+        if (start === undefined) {
+            return null;
+        }
+        const isLastTurn = index === displayItems.length - 1;
+        const running = isLoading || isStreaming;
+        return (_jsx(TurnFooter, { usage: agentUsage, live: isLastTurn && running, latest: isLastTurn && !running, padding: padding, onCopy: () => copyTurn(start, index), onRemove: () => onRemoveItems?.(displayItems.slice(start, index + 1).map(entry => entry.id)) }));
+    };
+    const renderItem = (item, index) => {
+        // ---- Tool call item ----
+        if (isToolCallMessage(item)) {
+            const respond = item.status === 'executing' || item.status === 'inProgress'
+                ? createRespondCallback(item.toolCallId)
+                : undefined;
+            /*
+                  The row the chat would draw by itself, handed to the caller.
+      
+                  `renderToolResult` replaces this outright, which is right for a
+                  caller substituting a custom card and wrong for one that only
+                  wants to add something beneath the row — that caller previously
+                  had to reimplement it, and returning nothing for the tools it did
+                  not care about hid those tools entirely. Offering the default as a
+                  node lets it compose instead of choosing.
+                */
+            const defaultUI = (_jsx(DefaultToolCallRenderer, { item: item, approvalConfig: approvalConfig, onRespond: createRespondCallback(item.toolCallId) }));
+            const toolUI = renderToolResult
+                ? renderToolResult({
+                    toolCallId: item.toolCallId,
+                    toolName: item.toolName,
+                    name: item.toolName,
+                    args: item.args,
+                    result: item.result,
+                    status: item.status,
+                    error: item.error,
+                    respond,
+                    defaultUI,
+                })
+                : defaultUI;
+            if (toolUI === null || toolUI === undefined)
+                return null;
+            return (_jsx(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                    /*
+                          The full column. `maxWidth: '95%'` with content-driven
+                          width left every tool card as wide as its longest line, so
+                          a transcript of executions was a ragged stack of
+                          differently-sized boxes. The default row still hugs its
+                          content under `alignItems`; anything that declares
+                          `width: '100%'` — the cell and output surfaces do — gets
+                          the whole measure.
+                        */
+                    width: '100%',
+                    px: padding,
+                    py: 1,
+                }, children: toolUI }, item.id));
+        }
+        // ---- Chat message item ----
+        const message = item;
+        const isUser = message.role === 'user';
+        const speaker = message.speaker;
+        /*
+         * A note — a wait, a failure, a stop — is not a speaker's turn: no
+         * avatar, no side, no bubble. Centred and pill-shaped, the way the
+         * transcript already sets apart what *happened* from what was *said*.
+         */
+        if (message.note) {
+            const noteColor = message.note === 'failed'
+                ? 'danger.fg'
+                : message.note === 'waiting'
+                    ? 'attention.fg'
+                    : 'fg.muted';
+            const NoteIcon = message.note === 'failed'
+                ? XCircleFillIcon
+                : message.note === 'waiting'
+                    ? ClockIcon
+                    : SkipIcon;
+            return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', px: padding, py: 1 }, children: _jsxs(Box, { sx: {
+                        display: 'inline-flex',
+                        gap: 2,
+                        alignItems: 'center',
+                        px: 3,
                         py: 1,
-                    }, children: _jsxs(Box, { sx: {
+                        borderRadius: 999,
+                        bg: 'canvas.subtle',
+                        border: '1px solid',
+                        borderColor: 'border.muted',
+                        color: noteColor,
+                        fontSize: 0,
+                        maxWidth: '90%',
+                    }, children: [_jsx(NoteIcon, { size: 14 }), speaker ? (_jsx(Text, { sx: { fontWeight: 'semibold' }, children: speaker.name })) : null, _jsx(Text, { sx: { color: 'fg.muted' }, children: getMessageText(message) }), message.createdAt ? (_jsx(RelativeTime, { datetime: message.createdAt.toISOString(), sx: { color: 'fg.muted' } })) : null] }) }, message.id));
+        }
+        // Optionally hide assistant messages that follow a rendered tool call
+        if (!isUser && hideMessagesAfterToolUI && hasRenderedToolCall) {
+            const messageText = getMessageText(message);
+            const prevIndex = index - 1;
+            if (prevIndex >= 0) {
+                const prevItem = displayItems[prevIndex];
+                if (isToolCallMessage(prevItem) &&
+                    renderedToolCallIds.has(prevItem.toolCallId)) {
+                    return null;
+                }
+            }
+            // Check for HITL-specific patterns
+            const hitlToolCall = displayItems.find(di => isToolCallMessage(di) &&
+                renderedToolCallIds.has(di.toolCallId) &&
+                di.args &&
+                'steps' in di.args &&
+                Array.isArray(di.args.steps));
+            if (hitlToolCall && messageText) {
+                const steps = hitlToolCall.args.steps;
+                const hasStepContent = steps.some(step => step.description &&
+                    messageText
+                        .toLowerCase()
+                        .includes(step.description.toLowerCase().slice(0, 20))) ||
+                    /^\s*(\d+\.\s|[-*]\s|\*\*)/.test(messageText) ||
+                    messageText.includes('**Enabled**') ||
+                    messageText.includes('steps below');
+                if (hasStepContent) {
+                    return null;
+                }
+            }
+        }
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: isUser ? 'flex-end' : 'flex-start',
+                px: padding,
+                py: 1,
+            }, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    gap: 2,
+                    flexDirection: isUser ? 'row-reverse' : 'row',
+                    alignItems: 'flex-start',
+                    /*
+                          Full width, always.
+        
+                          This row used to shrink to its content under the column's
+                          alignment, so the bubble's `maxWidth: '85%'` resolved
+                          against a parent whose width was itself the content's —
+                          circular geometry that re-settled with every streamed
+                          chunk, and the person's own message drifted leftward while
+                          the agent was answering. A full-width row is fixed ground:
+                          `row-reverse` pins the person's bubble to the right edge,
+                          `row` pins the agent's to the left, and 85% means 85% of
+                          the column whatever is being generated below.
+                        */
+                    width: '100%',
+                }, children: [avatarConfig.showAvatars && (_jsx(Box, { sx: {
+                            width: avatarConfig.avatarSize,
+                            height: avatarConfig.avatarSize,
+                            borderRadius: '50%',
+                            bg: speaker
+                                ? toneColorsOf(speaker.tone).emphasis
+                                : isUser
+                                    ? avatarConfig.userAvatarBg
+                                    : avatarConfig.assistantAvatarBg,
+                            color: speaker
+                                ? 'fg.onEmphasis'
+                                : isUser
+                                    ? 'fg.default'
+                                    : 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
                             display: 'flex',
-                            gap: 2,
-                            flexDirection: isUser ? 'row-reverse' : 'row',
-                            alignItems: 'flex-start',
-                        }, children: [avatarConfig.showAvatars && (_jsx(Box, { sx: {
-                                    width: avatarConfig.avatarSize,
-                                    height: avatarConfig.avatarSize,
-                                    borderRadius: '50%',
-                                    bg: isUser
-                                        ? avatarConfig.userAvatarBg
-                                        : avatarConfig.assistantAvatarBg,
-                                    color: isUser
-                                        ? 'fg.default'
-                                        : 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            flexShrink: 0,
+                            fontSize: speaker ? 0 : undefined,
+                            fontWeight: speaker ? 'bold' : undefined,
+                        }, children: speaker
+                            ? speaker.initials || '?'
+                            : isUser
+                                ? avatarConfig.userAvatar
+                                : avatarConfig.assistantAvatar })), _jsxs(Box, { sx: { maxWidth: '85%', minWidth: 0 }, children: [speaker ? (_jsxs(Box, { sx: {
                                     display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    flexShrink: 0,
-                                }, children: isUser
-                                    ? avatarConfig.userAvatar
-                                    : avatarConfig.assistantAvatar })), _jsx(Box, { sx: {
-                                    maxWidth: '85%',
+                                    gap: 2,
+                                    alignItems: 'baseline',
+                                    flexWrap: 'wrap',
+                                    flexDirection: isUser ? 'row-reverse' : 'row',
+                                    mb: 1,
+                                }, children: [_jsx(Text, { sx: {
+                                            fontWeight: 'semibold',
+                                            fontSize: 1,
+                                            color: toneColorsOf(speaker.tone).fg,
+                                        }, children: speaker.name }), message.directedTo ? (_jsxs(_Fragment, { children: [_jsxs(Text, { sx: {
+                                                    color: 'fg.muted',
+                                                    fontSize: 0,
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                }, children: [message.steer ? 'steers' : 'asks', ' ', _jsx(ArrowRightIcon, { size: 12 })] }), _jsx(Text, { sx: {
+                                                    fontWeight: 'semibold',
+                                                    fontSize: 1,
+                                                    color: toneColorsOf(message.directedTo.tone).fg,
+                                                }, children: message.directedTo.name })] })) : speaker.role ? (_jsx(Label, { size: "small", children: speaker.role })) : null, message.createdAt ? (_jsx(RelativeTime, { datetime: message.createdAt.toISOString(), sx: { fontSize: 0, color: 'fg.muted' } })) : null] })) : null, _jsxs(Box, { sx: {
                                     p: 2,
                                     overflowX: 'auto',
                                     borderRadius: 2,
-                                    backgroundColor: isUser ? 'accent.emphasis' : 'canvas.subtle',
+                                    backgroundColor: isUser
+                                        ? 'accent.emphasis'
+                                        : speaker
+                                            ? toneColorsOf(speaker.tone).subtle
+                                            : 'canvas.subtle',
+                                    border: !isUser && speaker ? '1px solid' : undefined,
+                                    borderColor: !isUser && speaker
+                                        ? toneColorsOf(speaker.tone).muted
+                                        : undefined,
                                     // Use primary-button text token for better contrast when
                                     // accent.emphasis is bright (e.g. Matrix dark theme).
                                     color: isUser
                                         ? 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))'
                                         : 'fg.default',
                                     ...streamdownCodeBlockStyles,
-                                }, children: isUser ? (_jsx(Text, { sx: {
-                                        fontSize: 1,
-                                        whiteSpace: 'pre-wrap',
-                                        wordBreak: 'break-word',
-                                    }, children: getMessageText(message) })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: normalizeAssistantMarkdown(getMessageText(message) || (isStreaming ? '...' : '')) }) })) })] }) }, message.id));
+                                }, children: [message.toolChips?.length ? (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap', mb: 2 }, children: message.toolChips.map((label, chipIndex) => (_jsx(Label, { variant: "secondary", size: "small", children: _jsxs(Box, { as: "span", sx: {
+                                                    display: 'inline-flex',
+                                                    gap: 1,
+                                                    alignItems: 'center',
+                                                }, children: [_jsx(ToolsIcon, { size: 10 }), " ", label] }) }, `${label}-${chipIndex}`))) })) : null, isUser ? (_jsx(Text, { sx: {
+                                            fontSize: 1,
+                                            whiteSpace: 'pre-wrap',
+                                            wordBreak: 'break-word',
+                                        }, children: getMessageText(message) })) : message.live && !getMessageText(message) ? (_jsx(TypingDots, { size: 6 })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: normalizeAssistantMarkdown(getMessageText(message) || (isStreaming ? '...' : '')) }) }))] }), renderMessageFooter ? (_jsx(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 2,
+                                    alignItems: 'center',
+                                    mt: 1,
+                                    flexWrap: 'wrap',
+                                    flexDirection: isUser ? 'row-reverse' : 'row',
+                                }, children: renderMessageFooter(message) })) : null] })] }) }, message.id));
+    };
+    return (_jsxs(_Fragment, { children: [displayItems.map((item, index) => {
+                const itemUI = renderItem(item, index);
+                const footer = footerAt(index);
+                if (itemUI === null && footer === null) {
+                    return null;
+                }
+                return (_jsxs(Fragment, { children: [itemUI, footer] }, item.id));
             }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
                     display: 'flex',
                     alignItems: 'flex-start',
@@ -517,27 +739,9 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                             }, children: avatarConfig.assistantAvatar })), _jsx(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
-                                gap: '4px',
                                 p: 2,
                                 borderRadius: 2,
                                 bg: 'canvas.subtle',
                                 minHeight: '32px',
-                            }, children: [0, 0.2, 0.4].map((delay, i) => (_jsx(Box, { sx: {
-                                    width: '8px',
-                                    height: '8px',
-                                    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,
-                                        },
-                                    },
-                                } }, i))) })] }) })), _jsx("div", { ref: messagesEndRef })] }));
+                            }, children: _jsx(TypingDots, {}) })] }) })), _jsx("div", { ref: messagesEndRef })] }));
 }