@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/chat/indicators/SandboxStatusIndicator.js

@@ -69,13 +69,9 @@ function deriveAggregate(status) {
     return 'idle';
 }
 function renderSandboxGlyph(aggregate) {
-    return (_jsx(Box, { as: "span", sx: {
-            display: 'inline-block',
-            width: 10,
-            height: 10,
-            borderRadius: '50%',
-            bg: SANDBOX_INDICATOR_COLORS[aggregate],
-            ...(aggregate === 'executing' && {
+    return (_jsx(Box, { as: "span", display: "inline-block", width: 10, height: 10, borderRadius: "50%", bg: SANDBOX_INDICATOR_COLORS[aggregate], sx: aggregate !== 'executing'
+            ? undefined
+            : {
                 animation: 'sandbox-busy-fade 1.2s ease-in-out infinite',
                 '@keyframes sandbox-busy-fade': {
                     '0%': {
@@ -94,8 +90,7 @@ function renderSandboxGlyph(aggregate) {
                         filter: 'saturate(1)',
                     },
                 },
-            }),
-        } }));
+            } }));
 }
 /* ── Component ─────────────────────────────────────────── */
 export function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOverride, }) {
@@ -166,12 +161,7 @@ export function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOver
     }, [aggregate, effectiveStatus]);
     // Show a subtle gray dot when sandbox is unavailable.
     // The tooltip tells the user none is configured.
-    return (_jsxs(Box, { as: "span", sx: {
-            position: 'relative',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }, onMouseEnter: () => setIsOverlayOpen(true), onMouseLeave: () => setIsOverlayOpen(false), children: [_jsx("button", { type: "button", "aria-label": tooltipText, onClick: aggregate === 'executing' ? sendInterrupt : undefined, onFocus: () => setIsOverlayOpen(true), onBlur: () => setIsOverlayOpen(false), style: {
+    return (_jsxs(Box, { as: "span", position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", onMouseEnter: () => setIsOverlayOpen(true), onMouseLeave: () => setIsOverlayOpen(false), children: [_jsx("button", { type: "button", "aria-label": tooltipText, onClick: aggregate === 'executing' ? sendInterrupt : undefined, onFocus: () => setIsOverlayOpen(true), onBlur: () => setIsOverlayOpen(false), style: {
                     display: 'inline-flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -187,24 +177,6 @@ export function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOver
                     appearance: 'none',
                     cursor: aggregate === 'executing' ? 'pointer' : 'default',
                     lineHeight: 0,
-                }, children: _jsx(Box, { as: "span", sx: { display: 'inline-flex', alignItems: 'center', flexShrink: 0 }, children: renderSandboxGlyph(aggregate) }) }), isOverlayOpen && (_jsxs(Box, { role: "tooltip", sx: {
-                    position: 'absolute',
-                    right: 0,
-                    top: 'calc(100% + 6px)',
-                    minWidth: 220,
-                    px: 2,
-                    py: 2,
-                    borderRadius: 2,
-                    bg: 'canvas.overlay',
-                    color: 'fg.default',
-                    fontSize: 0,
-                    lineHeight: 1.5,
-                    boxShadow: 'shadow.medium',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    zIndex: 1000,
-                    fontFamily: 'mono',
-                    pointerEvents: 'none',
-                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600, fontFamily: 'normal' }, children: tooltipText }), effectiveStatus ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsxs(Box, { as: "span", sx: { fontWeight: 600 }, children: ["variant:", ' '] }), _jsx(Box, { as: "span", children: effectiveStatus.variant })] }), _jsxs(Box, { children: [_jsxs(Box, { as: "span", sx: { fontWeight: 600 }, children: ["sandbox_running:", ' '] }), _jsx(Box, { as: "span", children: String(effectiveStatus.sandbox_running) })] }), _jsxs(Box, { children: [_jsxs(Box, { as: "span", sx: { fontWeight: 600 }, children: ["is_executing:", ' '] }), _jsx(Box, { as: "span", children: String(effectiveStatus.is_executing) })] }), effectiveStatus.jupyter_url && (_jsxs(Box, { sx: { wordBreak: 'break-all' }, children: [_jsxs(Box, { as: "span", sx: { fontWeight: 600 }, children: ["jupyter_url:", ' '] }), _jsx(Box, { as: "span", children: effectiveStatus.jupyter_url })] })), effectiveStatus.error && (_jsx(Box, { sx: { mt: 1, color: 'danger.fg' }, children: effectiveStatus.error })), aggregate === 'executing' && (_jsx(Box, { sx: { mt: 1, fontFamily: 'normal', color: 'fg.muted' }, children: "Click to interrupt execution" }))] })) : (_jsx(Box, { sx: { fontFamily: 'normal', color: 'fg.muted' }, children: "No sandbox configured for this agent." }))] }))] }));
+                }, children: _jsx(Box, { as: "span", display: "inline-flex", alignItems: "center", flexShrink: 0, children: renderSandboxGlyph(aggregate) }) }), isOverlayOpen && (_jsxs(Box, { role: "tooltip", position: "absolute", right: 0, top: "calc(100% + 6px)", minWidth: 220, px: 2, py: 2, borderRadius: 2, bg: "canvas.overlay", color: "fg.default", fontSize: 0, lineHeight: 1.5, boxShadow: "shadow.medium", border: "1px solid", borderColor: "border.default", zIndex: 1000, fontFamily: "mono", pointerEvents: "none", children: [_jsx(Box, { mb: 1, fontWeight: 600, fontFamily: "normal", children: tooltipText }), effectiveStatus ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsxs(Box, { as: "span", fontWeight: 600, children: ["variant:", ' '] }), _jsx(Box, { as: "span", children: effectiveStatus.variant })] }), _jsxs(Box, { children: [_jsxs(Box, { as: "span", fontWeight: 600, children: ["sandbox_running:", ' '] }), _jsx(Box, { as: "span", children: String(effectiveStatus.sandbox_running) })] }), _jsxs(Box, { children: [_jsxs(Box, { as: "span", fontWeight: 600, children: ["is_executing:", ' '] }), _jsx(Box, { as: "span", children: String(effectiveStatus.is_executing) })] }), effectiveStatus.jupyter_url && (_jsxs(Box, { wordBreak: "break-all", children: [_jsxs(Box, { as: "span", fontWeight: 600, children: ["jupyter_url:", ' '] }), _jsx(Box, { as: "span", children: effectiveStatus.jupyter_url })] })), effectiveStatus.error && (_jsx(Box, { mt: 1, color: "danger.fg", children: effectiveStatus.error })), aggregate === 'executing' && (_jsx(Box, { mt: 1, fontFamily: "normal", color: "fg.muted", children: "Click to interrupt execution" }))] })) : (_jsx(Box, { fontFamily: "normal", color: "fg.muted", children: "No sandbox configured for this agent." }))] }))] }));
 }
 export default SandboxStatusIndicator;

package/lib/chat/indicators/SkillsStatusIndicator.js

@@ -76,17 +76,8 @@ export function SkillsStatusIndicator({ skillsCount, enabledCount, loading = fal
                 background: 'none',
                 cursor: 'default',
                 lineHeight: 0,
-            }, children: _jsx(Box, { as: "span", sx: {
-                    display: 'inline-block',
-                    width: 12,
-                    height: 12,
-                    borderRadius: '50%',
-                    bg: SKILLS_STATUS_COLORS[aggregate],
-                    flexShrink: 0,
-                    ...(aggregate === 'loading' && {
-                        animation: 'skills-pulse 1.5s ease-in-out infinite',
-                    }),
-                    '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
-                } }) }) }));
+            }, children: _jsx(Box, { as: "span", display: "inline-block", width: 12, height: 12, borderRadius: "50%", bg: SKILLS_STATUS_COLORS[aggregate], flexShrink: 0, animation: aggregate === 'loading'
+                    ? 'skills-pulse 1.5s ease-in-out infinite'
+                    : undefined, reducedMotion: { animation: 'none' } }) }) }));
 }
 export default SkillsStatusIndicator;

package/lib/chat/indicators/TypingDots.js

@@ -1,21 +1,11 @@
 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`,
+    return (_jsx(Box, { "aria-hidden": "true", "data-typing-dots": "", display: "inline-flex", alignItems: "center", gap: "4px", children: [0, 0.2, 0.4].map((delay, index) => (_jsx(Box, { width: size, height: size, borderRadius: "50%", bg: "fg.muted", animation: "typingPulse 1.4s ease-in-out infinite", animationDelay: `${delay}s`, reducedMotion: { animation: 'none', opacity: 0.7 }, sx: {
                 '@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

@@ -229,34 +229,7 @@ export function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint,
             : 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: `${tone}.emphasis`,
-            borderRadius: 2,
-            overflow: 'hidden',
-            bg: 'canvas.default',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                    px: 2,
-                    py: 1,
-                    borderBottom: '1px solid',
-                    borderColor: `${tone}.muted`,
-                    bg: `${tone}.subtle`,
-                    flexShrink: 0,
-                }, 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,
-                            color: 'fg.muted',
-                            p: 2,
-                        }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Starting\u2026" })] }) }) })] }));
+    return (_jsxs(Box, { "data-subagent-panel": subagentName, "data-subagent-transport": overA2A ? 'a2a' : 'in-process', mt: 2, display: "flex", flexDirection: "column", height: height, width: "100%", border: "1px solid", borderColor: `${tone}.emphasis`, borderRadius: 2, overflow: "hidden", bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, px: 2, py: 1, borderBottom: "1px solid", borderColor: `${tone}.muted`, bg: `${tone}.subtle`, flexShrink: 0, children: [_jsx(Box, { 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, { 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, { display: "flex", alignItems: "center", gap: 1, color: "fg.muted", p: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Starting\u2026" })] }) }) })] }));
 }
 // ---------------------------------------------------------------------------
 // DefaultToolCallRenderer — reads approvals from the Zustand store,
@@ -507,23 +480,17 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                 : defaultUI;
             if (toolUI === null || toolUI === undefined)
                 return null;
-            return (_jsx(Box, { "data-chat-tool-row": item.toolName, 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: compact ? '2px' : 1,
-                }, children: toolUI }, item.id));
+            return (_jsx(Box, { "data-chat-tool-row": item.toolName, 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: compact ? '2px' : 1, children: toolUI }, item.id));
         }
         // ---- Chat message item ----
         const message = item;
@@ -545,20 +512,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                 : 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,
-                        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));
+            return (_jsx(Box, { display: "flex", justifyContent: "center", px: padding, py: 1, children: _jsxs(Box, { display: "inline-flex", gap: 2, alignItems: "center", px: 3, py: 1, 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) {
@@ -591,63 +545,33 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                 }
             }
         }
-        return (_jsx(Box, { "data-chat-message": message.role, sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: isUser ? 'flex-end' : 'flex-start',
-                px: padding,
-                py: compact ? '2px' : 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',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            flexShrink: 0,
-                            fontSize: speaker ? 0 : undefined,
-                            fontWeight: speaker ? 'bold' : undefined,
-                        }, children: speaker
+        return (_jsx(Box, { "data-chat-message": message.role, display: "flex", flexDirection: "column", alignItems: isUser ? 'flex-end' : 'flex-start', px: padding, py: compact ? '2px' : 1, children: _jsxs(Box, { 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, { 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", 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: compact ? '92%' : '85%', minWidth: 0 }, children: [speaker ? (_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    gap: 2,
-                                    alignItems: 'baseline',
-                                    flexWrap: 'wrap',
-                                    flexDirection: isUser ? 'row-reverse' : 'row',
-                                    mb: 1,
-                                }, children: [_jsx(Text, { sx: {
+                                : avatarConfig.assistantAvatar })), _jsxs(Box, { maxWidth: compact ? '92%' : '85%', minWidth: 0, children: [speaker ? (_jsxs(Box, { display: "flex", 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,
@@ -661,42 +585,29 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                                     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: compact ? 1 : 2,
-                                    px: compact ? 2 : 2,
-                                    overflowX: 'auto',
-                                    // The theme's bubble (LOOP T-03, T-06): today's 6px elsewhere.
-                                    borderRadius: 'var(--theme-radius-bubble, 6px)',
-                                    // A message arriving, at the theme's pace (LOOP T-10): no
-                                    // motion in a theme that sets none, nor when motion is reduced.
-                                    animation: 'chatMessageArrive var(--theme-motion-message, 0ms) var(--theme-motion-easing, ease) both',
+                                                }, 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, { p: compact ? 1 : 2, px: compact ? 2 : 2, overflowX: "auto", 
+                                // The theme's bubble (LOOP T-03, T-06): today's 6px elsewhere.
+                                borderRadius: "bubble", 
+                                // A message arriving, at the theme's pace (LOOP T-10): no
+                                // motion in a theme that sets none, nor when motion is reduced.
+                                animation: "chatMessageArrive var(--theme-motion-message) var(--theme-motion-easing) both", reducedMotion: { animation: 'none' }, 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', sx: {
                                     '@keyframes chatMessageArrive': {
                                         from: { opacity: 0, transform: 'translateY(4px)' },
                                         to: { opacity: 1, transform: 'none' },
                                     },
-                                    '@media (prefers-reduced-motion: reduce)': {
-                                        animation: 'none',
-                                    },
-                                    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: [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 ? ((() => {
+                                }, children: [message.toolChips?.length ? (_jsx(Box, { 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", display: "inline-flex", gap: 1, alignItems: "center", children: [_jsx(ToolsIcon, { size: 10 }), " ", label] }) }, `${label}-${chipIndex}`))) })) : null, isUser ? ((() => {
                                         // A submitted form is drawn as the form, not as the JSON
                                         // the agent reads — see `formSubmission`.
                                         const text = getMessageText(message);
@@ -705,20 +616,8 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                                 fontSize: compact ? 0 : 1,
                                                 whiteSpace: 'pre-wrap',
                                                 wordBreak: 'break-word',
-                                            }, children: [message.metadata?.input === 'voice' ? (_jsx(Box, { as: "span", "data-spoken": "", title: "Said aloud", "aria-label": "Said aloud:", sx: {
-                                                        display: 'inline-flex',
-                                                        verticalAlign: 'text-bottom',
-                                                        mr: 1,
-                                                        opacity: 0.85,
-                                                    }, children: _jsx(MicrophoneIcon, { size: 14, "aria-hidden": "true" }) })) : null, text] }));
-                                    })()) : message.live && !getMessageText(message) ? (_jsx(TypingDots, { size: 6 })) : (_jsx(ChatMarkdown, { density: density, text: 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));
+                                            }, children: [message.metadata?.input === 'voice' ? (_jsx(Box, { as: "span", "data-spoken": "", title: "Said aloud", "aria-label": "Said aloud:", display: "inline-flex", verticalAlign: "text-bottom", mr: 1, opacity: 0.85, children: _jsx(MicrophoneIcon, { size: 14, "aria-hidden": "true" }) })) : null, text] }));
+                                    })()) : message.live && !getMessageText(message) ? (_jsx(TypingDots, { size: 6 })) : (_jsx(ChatMarkdown, { density: density, text: getMessageText(message) || (isStreaming ? '...' : '') }))] }), renderMessageFooter ? (_jsx(Box, { 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);
@@ -727,31 +626,5 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                     return null;
                 }
                 return (_jsxs(Fragment, { children: [itemUI, footer] }, item.id));
-            }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { "data-chat-typing": "", sx: {
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    px: padding,
-                    py: 1,
-                }, children: _jsxs(Box, { sx: {
-                        display: 'flex',
-                        gap: 2,
-                        alignItems: 'flex-start',
-                    }, children: [avatarConfig.showAvatars && (_jsx(Box, { sx: {
-                                width: avatarConfig.avatarSize,
-                                height: avatarConfig.avatarSize,
-                                borderRadius: '50%',
-                                bg: avatarConfig.assistantAvatarBg,
-                                color: 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                flexShrink: 0,
-                            }, children: avatarConfig.assistantAvatar })), _jsx(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                p: compact ? 1 : 2,
-                                borderRadius: 'var(--theme-radius-bubble, 6px)',
-                                bg: 'canvas.subtle',
-                                minHeight: compact ? '20px' : '32px',
-                            }, children: _jsx(TypingDots, {}) })] }) })), _jsx("div", { ref: messagesEndRef })] }));
+            }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { "data-chat-typing": "", display: "flex", alignItems: "flex-start", px: padding, py: 1, children: _jsxs(Box, { display: "flex", gap: 2, alignItems: "flex-start", children: [avatarConfig.showAvatars && (_jsx(Box, { width: avatarConfig.avatarSize, height: avatarConfig.avatarSize, borderRadius: "50%", bg: avatarConfig.assistantAvatarBg, color: "var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: avatarConfig.assistantAvatar })), _jsx(Box, { display: "flex", alignItems: "center", p: compact ? 1 : 2, borderRadius: "var(--theme-radius-bubble, 6px)", bg: "canvas.subtle", minHeight: compact ? '20px' : '32px', children: _jsx(TypingDots, {}) })] }) })), _jsx("div", { ref: messagesEndRef })] }));
 }

package/lib/chat/messages/ChatMessages.js

@@ -54,57 +54,27 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
             }
         }
         // Default rendering
-        return (_jsxs(Box, { ref: isLast ? lastMessageRef : undefined, sx: {
-                display: 'flex',
-                gap: 3,
-                p: 3,
+        return (_jsxs(Box, { ref: isLast ? lastMessageRef : undefined, display: "flex", gap: 3, p: 3, borderColor: "border.muted", bg: message.role === 'assistant' ? 'canvas.subtle' : 'canvas.default', sx: {
                 borderBottom: '1px solid',
-                borderColor: 'border.muted',
-                bg: message.role === 'assistant' ? 'canvas.subtle' : 'canvas.default',
                 '&:last-child': {
                     borderBottom: 'none',
                 },
-            }, children: [showAvatars && (_jsx(Box, { sx: { flexShrink: 0 }, children: _jsx(Box, { sx: {
-                            width: 32,
-                            height: 32,
-                            borderRadius: '50%',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            bg: message.role === 'user'
-                                ? 'neutral.muted'
-                                : message.role === 'assistant'
-                                    ? 'accent.emphasis'
-                                    : 'attention.emphasis',
-                            color: message.role === 'user'
-                                ? 'fg.default'
-                                : 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
-                        }, children: message.role === 'user' ? (_jsx(PersonIcon, { size: 16 })) : message.role === 'assistant' ? (_jsx(AiAgentIcon, { size: 16, color: assistantIconColor })) : (_jsx(ToolsIcon, { size: 16 })) }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 2,
-                                mb: 1,
-                            }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: message.role === 'user'
+            }, children: [showAvatars && (_jsx(Box, { flexShrink: 0, children: _jsx(Box, { width: 32, height: 32, borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", bg: message.role === 'user'
+                            ? 'neutral.muted'
+                            : message.role === 'assistant'
+                                ? 'accent.emphasis'
+                                : 'attention.emphasis', color: message.role === 'user'
+                            ? 'fg.default'
+                            : 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))', children: message.role === 'user' ? (_jsx(PersonIcon, { size: 16 })) : message.role === 'assistant' ? (_jsx(AiAgentIcon, { size: 16, color: assistantIconColor })) : (_jsx(ToolsIcon, { size: 16 })) }) })), _jsxs(Box, { flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: message.role === 'user'
                                         ? 'You'
                                         : message.role === 'assistant'
                                             ? 'Assistant'
-                                            : 'System' }), showTimestamps && message.createdAt && (_jsx(RelativeTime, { datetime: message.createdAt.toISOString(), sx: { fontSize: 0, color: 'fg.muted' } }))] }), _jsx(Box, { sx: { fontSize: 1, lineHeight: 1.5 }, children: renderMessageContent(message, activityRenderer, uiPluginRegistry ?? undefined) })] })] }, message.id));
+                                            : 'System' }), showTimestamps && message.createdAt && (_jsx(RelativeTime, { datetime: message.createdAt.toISOString(), sx: { fontSize: 0, color: 'fg.muted' } }))] }), _jsx(Box, { fontSize: 1, lineHeight: 1.5, children: renderMessageContent(message, activityRenderer, uiPluginRegistry ?? undefined) })] })] }, message.id));
     };
     if (messages.length === 0) {
-        return (_jsxs(Box, { className: className, sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                p: 4,
-                color: 'fg.muted',
-            }, children: [_jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { mt: 3, fontSize: 2 }, children: chatText.startConversation }), _jsx(Text, { sx: { mt: 1, fontSize: 1 }, children: chatText.sendToBegin })] }));
+        return (_jsxs(Box, { className: className, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", p: 4, color: "fg.muted", children: [_jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { mt: 3, fontSize: 2 }, children: chatText.startConversation }), _jsx(Text, { sx: { mt: 1, fontSize: 1 }, children: chatText.sendToBegin })] }));
     }
-    return (_jsx(Box, { ref: containerRef, className: className, sx: {
-            flex: 1,
-            overflow: 'auto',
-        }, children: messages.map((message, index) => renderMessage(message, index === messages.length - 1)) }));
+    return (_jsx(Box, { ref: containerRef, className: className, flex: 1, overflow: "auto", children: messages.map((message, index) => renderMessage(message, index === messages.length - 1)) }));
 }
 /**
  * Render message content based on type
@@ -117,7 +87,7 @@ function renderMessageContent(message, activityRenderer, uiPluginRegistry) {
     }
     // Array of content parts
     if (Array.isArray(content)) {
-        return (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: content.map((part, index) => renderContentPart(part, index, activityRenderer, uiPluginRegistry)) }));
+        return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: content.map((part, index) => renderContentPart(part, index, activityRenderer, uiPluginRegistry)) }));
     }
     return null;
 }
@@ -131,36 +101,13 @@ function renderContentPart(part, index, activityRenderer, uiPluginRegistry) {
         case 'image':
             return (_jsx(Box, { children: _jsx("img", { src: part.url, alt: part.alt || 'Image', style: { maxWidth: '100%', borderRadius: '8px' } }) }, index));
         case 'tool-call':
-            return (_jsxs(Box, { sx: {
-                    p: 2,
-                    bg: 'canvas.subtle',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(ToolsIcon, { size: 16 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Tool: ", part.toolName] })] }), _jsx(Box, { as: "pre", sx: {
-                            fontSize: 0,
-                            overflow: 'auto',
-                            m: 0,
-                            p: 2,
-                            bg: 'canvas.inset',
-                            borderRadius: 1,
-                        }, children: JSON.stringify(part.args, null, 2) })] }, index));
+            return (_jsxs(Box, { p: 2, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1, children: [_jsx(ToolsIcon, { size: 16 }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Tool: ", part.toolName] })] }), _jsx(Box, { as: "pre", fontSize: 0, overflow: "auto", m: 0, p: 2, bg: "canvas.inset", borderRadius: 1, children: JSON.stringify(part.args, null, 2) })] }, index));
         case 'tool-result': {
             const result = part.result;
             const isSuccess = result && typeof result === 'object' && 'success' in result
                 ? result.success
                 : true;
-            return (_jsxs(Box, { sx: {
-                    p: 2,
-                    bg: isSuccess ? 'success.subtle' : 'danger.subtle',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: isSuccess ? 'success.muted' : 'danger.muted',
-                }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0, mb: 1 }, children: ["Result: ", part.toolName] }), _jsx(Box, { as: "pre", sx: {
-                            fontSize: 0,
-                            overflow: 'auto',
-                            m: 0,
-                        }, children: result?.error || JSON.stringify(result, null, 2) })] }, index));
+            return (_jsxs(Box, { p: 2, bg: isSuccess ? 'success.subtle' : 'danger.subtle', borderRadius: 2, border: "1px solid", borderColor: isSuccess ? 'success.muted' : 'danger.muted', children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0, mb: 1 }, children: ["Result: ", part.toolName] }), _jsx(Box, { as: "pre", fontSize: 0, overflow: "auto", m: 0, children: result?.error || JSON.stringify(result, null, 2) })] }, index));
         }
         case 'activity':
             // Check for custom renderer
@@ -182,18 +129,7 @@ function renderContentPart(part, index, activityRenderer, uiPluginRegistry) {
                 }
             }
             // Default activity rendering
-            return (_jsxs(Box, { sx: {
-                    p: 2,
-                    bg: 'accent.subtle',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'accent.muted',
-                }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Activity: ", part.activityType] }), part.data != null && (_jsx(Box, { as: "pre", sx: {
-                            fontSize: 0,
-                            overflow: 'auto',
-                            mt: 1,
-                            m: 0,
-                        }, children: String(typeof part.data === 'object'
+            return (_jsxs(Box, { p: 2, bg: "accent.subtle", borderRadius: 2, border: "1px solid", borderColor: "accent.muted", children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Activity: ", part.activityType] }), part.data != null && (_jsx(Box, { as: "pre", fontSize: 0, overflow: "auto", mt: 1, m: 0, children: String(typeof part.data === 'object'
                             ? JSON.stringify(part.data, null, 2)
                             : part.data) }))] }, index));
         default: