@datalayer/agent-runtimes 1.3.88 → 1.3.90

package/lib/chat/tools/SubagentActivity.js

@@ -87,24 +87,7 @@ export function SubagentActivity({ toolCallId, }) {
         : isDone
             ? 'success.fg'
             : 'accent.fg';
-    return (_jsxs(Box, { sx: {
-            mt: 1,
-            ml: 2,
-            borderLeft: '2px solid',
-            borderColor: 'border.muted',
-            pl: 2,
-        }, children: [_jsxs(Box, { as: "button", onClick: () => setExpanded(prev => !prev), sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                    width: '100%',
-                    border: 'none',
-                    background: 'transparent',
-                    cursor: 'pointer',
-                    p: 0,
-                    color: 'fg.muted',
-                    textAlign: 'left',
-                }, children: [expanded ? (_jsx(ChevronDownIcon, { size: 12 })) : (_jsx(ChevronRightIcon, { size: 12 })), _jsx(Box, { sx: { color: statusColor, display: 'flex' }, children: _jsx(StatusIcon, { size: 14 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.default' }, children: subagentName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: hasError ? 'failed' : isDone ? 'done' : 'working…' })] }), expanded && (_jsx(Box, { sx: { mt: 1, display: 'flex', flexDirection: 'column', gap: 1 }, children: segments.map((segment, index) => (_jsx(SubagentSegmentView, { segment: segment }, index))) }))] }));
+    return (_jsxs(Box, { mt: 1, ml: 2, borderLeft: "2px solid", borderColor: "border.muted", pl: 2, children: [_jsxs(Box, { as: "button", onClick: () => setExpanded(prev => !prev), display: "flex", alignItems: "center", gap: 1, width: "100%", border: "none", background: "transparent", cursor: "pointer", p: 0, color: "fg.muted", textAlign: "left", children: [expanded ? (_jsx(ChevronDownIcon, { size: 12 })) : (_jsx(ChevronRightIcon, { size: 12 })), _jsx(Box, { color: statusColor, display: "flex", children: _jsx(StatusIcon, { size: 14 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.default' }, children: subagentName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: hasError ? 'failed' : isDone ? 'done' : 'working…' })] }), expanded && (_jsx(Box, { mt: 1, display: "flex", flexDirection: "column", gap: 1, children: segments.map((segment, index) => (_jsx(SubagentSegmentView, { segment: segment }, index))) }))] }));
 }
 function SubagentSegmentView({ segment, }) {
     switch (segment.kind) {
@@ -120,14 +103,14 @@ function SubagentSegmentView({ segment, }) {
         case 'thinking':
             if (!segment.text)
                 return null;
-            return (_jsxs(Box, { sx: { display: 'flex', gap: 1, color: 'fg.muted' }, children: [_jsx(Box, { sx: { mt: '2px', flexShrink: 0 }, children: _jsx(LightBulbIcon, { size: 12 }) }), _jsx(Text, { sx: {
+            return (_jsxs(Box, { display: "flex", gap: 1, color: "fg.muted", children: [_jsx(Box, { mt: "2px", flexShrink: 0, children: _jsx(LightBulbIcon, { size: 12 }) }), _jsx(Text, { sx: {
                             fontSize: 0,
                             fontStyle: 'italic',
                             whiteSpace: 'pre-wrap',
                             wordBreak: 'break-word',
                         }, children: segment.text })] }));
         case 'tool_call':
-            return (_jsxs(Box, { sx: { display: 'flex', gap: 1, color: 'fg.muted' }, children: [_jsx(Box, { sx: { mt: '2px', flexShrink: 0 }, children: _jsx(ToolsIcon, { size: 12 }) }), _jsxs(Box, { sx: { minWidth: 0 }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: segment.toolName ?? 'tool' }), segment.toolArgs && Object.keys(segment.toolArgs).length > 0 && (_jsx(Text, { as: "pre", sx: {
+            return (_jsxs(Box, { display: "flex", gap: 1, color: "fg.muted", children: [_jsx(Box, { mt: "2px", flexShrink: 0, children: _jsx(ToolsIcon, { size: 12 }) }), _jsxs(Box, { minWidth: 0, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: segment.toolName ?? 'tool' }), segment.toolArgs && Object.keys(segment.toolArgs).length > 0 && (_jsx(Text, { as: "pre", sx: {
                                     fontSize: 0,
                                     fontFamily: 'mono',
                                     m: 0,
@@ -139,7 +122,7 @@ function SubagentSegmentView({ segment, }) {
         case 'tool_result':
             if (!segment.result)
                 return null;
-            return (_jsxs(Box, { sx: { display: 'flex', gap: 1, color: 'fg.muted' }, children: [_jsx(Box, { sx: { mt: '2px', flexShrink: 0, color: 'success.fg' }, children: _jsx(CheckCircleIcon, { size: 12 }) }), _jsx(Text, { as: "pre", sx: {
+            return (_jsxs(Box, { display: "flex", gap: 1, color: "fg.muted", children: [_jsx(Box, { mt: "2px", flexShrink: 0, color: "success.fg", children: _jsx(CheckCircleIcon, { size: 12 }) }), _jsx(Text, { as: "pre", sx: {
                             fontSize: 0,
                             fontFamily: 'mono',
                             m: 0,
@@ -147,7 +130,7 @@ function SubagentSegmentView({ segment, }) {
                             wordBreak: 'break-word',
                         }, children: segment.result })] }));
         case 'error':
-            return (_jsxs(Box, { sx: { display: 'flex', gap: 1, color: 'danger.fg' }, children: [_jsx(Box, { sx: { mt: '2px', flexShrink: 0 }, children: _jsx(AlertIcon, { size: 12 }) }), _jsx(Text, { sx: { fontSize: 0 }, children: segment.error ?? 'Subagent failed' })] }));
+            return (_jsxs(Box, { display: "flex", gap: 1, color: "danger.fg", children: [_jsx(Box, { mt: "2px", flexShrink: 0, children: _jsx(AlertIcon, { size: 12 }) }), _jsx(Text, { sx: { fontSize: 0 }, children: segment.error ?? 'Subagent failed' })] }));
         default:
             return null;
     }

package/lib/chat/tools/ToolApprovalBanner.js

@@ -13,7 +13,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module chat/tools/ToolApprovalBanner
  */
 import { useState } from 'react';
-import { Box, Button, Text, CounterLabel } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Text, CounterLabel } from '@primer/react';
 import { ShieldCheckIcon, AlertIcon, CheckIcon, XIcon, } from '@primer/octicons-react';
 import { useChatWords } from '../ChatLanguage';
 /**
@@ -26,39 +27,8 @@ export function ToolApprovalBanner({ pendingApprovals, onReview, onApproveAll, o
         return null;
     }
     if (collapsed) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2,
-                px: 3,
-                py: 2,
-                bg: 'attention.subtle',
-                borderBottom: '1px solid',
-                borderColor: 'attention.muted',
-                cursor: 'pointer',
-            }, onClick: () => setCollapsed(false), children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: chatText.toolApprovalsPending }), _jsx(CounterLabel, { children: pendingApprovals.length })] }));
+        return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, bg: "attention.subtle", borderBottom: "1px solid", borderColor: "attention.muted", cursor: "pointer", onClick: () => setCollapsed(false), children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: chatText.toolApprovalsPending }), _jsx(CounterLabel, { children: pendingApprovals.length })] }));
     }
-    return (_jsxs(Box, { sx: {
-            borderBottom: '1px solid',
-            borderColor: 'attention.muted',
-            bg: 'attention.subtle',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    px: 3,
-                    py: 2,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: chatText.approvalsPending(pendingApprovals.length) })] }), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [onApproveAll && pendingApprovals.length >= 1 && (_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: onApproveAll, children: chatText.approveAll })), collapsible && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setCollapsed(true), children: chatText.collapse })), onDismiss && (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: XIcon, onClick: onDismiss, "aria-label": chatText.dismiss }))] })] }), _jsx(Box, { sx: { px: 3, pb: 2 }, children: pendingApprovals.map(approval => (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        py: 1,
-                        px: 2,
-                        mb: 1,
-                        bg: 'canvas.default',
-                        borderRadius: 2,
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                    }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: approval.toolName }), approval.toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, ml: 2 }, children: approval.toolDescription }))] }), _jsx(Button, { size: "small", variant: "default", onClick: () => onReview(approval), children: chatText.review })] }, approval.id))) })] }));
+    return (_jsxs(Box, { borderBottom: "1px solid", borderColor: "attention.muted", bg: "attention.subtle", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: chatText.approvalsPending(pendingApprovals.length) })] }), _jsxs(Box, { display: "flex", gap: 1, children: [onApproveAll && pendingApprovals.length >= 1 && (_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: onApproveAll, children: chatText.approveAll })), collapsible && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setCollapsed(true), children: chatText.collapse })), onDismiss && (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: XIcon, onClick: onDismiss, "aria-label": chatText.dismiss }))] })] }), _jsx(Box, { px: 3, pb: 2, children: pendingApprovals.map(approval => (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", py: 1, px: 2, mb: 1, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: approval.toolName }), approval.toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, ml: 2 }, children: approval.toolDescription }))] }), _jsx(Button, { size: "small", variant: "default", onClick: () => onReview(approval), children: chatText.review })] }, approval.id))) })] }));
 }
 export default ToolApprovalBanner;

package/lib/chat/tools/ToolApprovalDialog.js

@@ -10,7 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module chat/tools/ToolApprovalDialog
  */
 import { useCallback, useState } from 'react';
-import { Box, Button, Text, Heading, FormControl, Checkbox, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Text, Heading, FormControl, Checkbox } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
 import { AlertIcon, ToolsIcon, CheckIcon, XIcon } from '@primer/octicons-react';
 import { useChatWords } from '../ChatLanguage';
@@ -29,28 +30,12 @@ export function ToolApprovalDialog({ isOpen, toolName, toolDescription, args, on
     if (!isOpen) {
         return null;
     }
-    return (_jsxs(Dialog, { onClose: onClose, "aria-labelledby": "tool-approval-title", children: [_jsx(Dialog.Header, { children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(AlertIcon, { size: 16 }), chatText.approvalTitle] }) }), _jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(ToolsIcon, { size: 20 }), _jsx(Heading, { as: "h4", sx: { fontSize: 2 }, children: toolName })] }), toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: toolDescription }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { sx: {
+    return (_jsxs(Dialog, { onClose: onClose, "aria-labelledby": "tool-approval-title", children: [_jsx(Dialog.Header, { children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(AlertIcon, { size: 16 }), chatText.approvalTitle] }) }), _jsxs(Box, { p: 3, children: [_jsxs(Box, { mb: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(ToolsIcon, { size: 20 }), _jsx(Heading, { as: "h4", sx: { fontSize: 2 }, children: toolName })] }), toolDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: toolDescription }))] }), _jsxs(Box, { mb: 3, children: [_jsx(Text, { sx: {
                                     fontWeight: 'semibold',
                                     fontSize: 1,
                                     mb: 2,
                                     display: 'block',
-                                }, children: chatText.arguments }), _jsx(Box, { as: "pre", sx: {
-                                    p: 3,
-                                    bg: 'canvas.subtle',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    overflow: 'auto',
-                                    maxHeight: 200,
-                                    fontSize: 0,
-                                }, children: JSON.stringify(args, null, 2) })] }), _jsx(Box, { sx: {
-                            p: 3,
-                            bg: 'attention.subtle',
-                            borderRadius: 2,
-                            border: '1px solid',
-                            borderColor: 'attention.muted',
-                            mb: 3,
-                        }, children: _jsx(Text, { sx: { fontSize: 1 }, children: chatText.approvalWarning }) }), showRememberChoice && (_jsxs(FormControl, { sx: { mb: 3 }, children: [_jsx(Checkbox, { checked: rememberChoice, onChange: e => setRememberChoice(e.target.checked) }), _jsx(FormControl.Label, { children: chatText.rememberChoice })] })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [_jsx(Button, { variant: "danger", onClick: handleDeny, leadingVisual: XIcon, children: chatText.deny }), _jsx(Button, { variant: "primary", onClick: handleApprove, leadingVisual: CheckIcon, children: chatText.approve })] })] })] }));
+                                }, children: chatText.arguments }), _jsx(Box, { as: "pre", p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", overflow: "auto", maxHeight: 200, fontSize: 0, children: JSON.stringify(args, null, 2) })] }), _jsx(Box, { p: 3, bg: "attention.subtle", borderRadius: 2, border: "1px solid", borderColor: "attention.muted", mb: 3, children: _jsx(Text, { sx: { fontSize: 1 }, children: chatText.approvalWarning }) }), showRememberChoice && (_jsxs(FormControl, { sx: { mb: 3 }, children: [_jsx(Checkbox, { checked: rememberChoice, onChange: e => setRememberChoice(e.target.checked) }), _jsx(FormControl.Label, { children: chatText.rememberChoice })] })), _jsxs(Box, { display: "flex", justifyContent: "flex-end", gap: 2, children: [_jsx(Button, { variant: "danger", onClick: handleDeny, leadingVisual: XIcon, children: chatText.deny }), _jsx(Button, { variant: "primary", onClick: handleApprove, leadingVisual: CheckIcon, children: chatText.approve })] })] })] }));
 }
 /**
  * Hook to manage tool approval dialog state

package/lib/chat/tools/ToolCallDisplay.js

@@ -171,43 +171,12 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                     result.stderr ??
                     undefined)
                 : undefined);
-    return (_jsxs(Box, { "data-tool-call": toolName, "data-tool-call-status": status, sx: {
-            width: '100%',
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: compact ? '8px' : '12px',
-            overflow: 'hidden',
-            backgroundColor: 'canvas.default',
-        }, children: [_jsxs(Box, { as: "button", onClick: () => setIsExpanded(!isExpanded), sx: {
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: compact ? 1 : 2,
-                    padding: compact ? 1 : 2,
-                    backgroundColor: 'canvas.subtle',
-                    border: 'none',
-                    borderBottom: isExpanded ? '1px solid' : 'none',
-                    borderColor: 'border.default',
-                    cursor: 'pointer',
-                    textAlign: 'left',
-                    '&:hover': {
-                        backgroundColor: 'neutral.muted',
-                    },
-                }, children: [_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0 }, children: isExpanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })) }), hasMark(marks) && (_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0, display: 'flex' }, children: _jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 16 }) })), _jsx(Text, { sx: {
+    return (_jsxs(Box, { "data-tool-call": toolName, "data-tool-call-status": status, width: "100%", border: "1px solid", borderColor: "border.default", borderRadius: compact ? '8px' : '12px', overflow: "hidden", backgroundColor: "canvas.default", children: [_jsxs(Box, { as: "button", onClick: () => setIsExpanded(!isExpanded), width: "100%", display: "flex", alignItems: "center", gap: compact ? 1 : 2, padding: compact ? 1 : 2, backgroundColor: "canvas.subtle", border: "none", borderBottom: isExpanded ? '1px solid' : 'none', borderColor: "border.default", cursor: "pointer", textAlign: "left", hover: { backgroundColor: 'neutral.muted' }, children: [_jsx(Box, { color: "fg.muted", flexShrink: 0, children: isExpanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })) }), hasMark(marks) && (_jsx(Box, { color: "fg.muted", flexShrink: 0, display: "flex", children: _jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 16 }) })), _jsx(Text, { sx: {
                             fontWeight: 'semibold',
                             fontSize: compact ? 0 : 1,
                             color: 'fg.default',
                             flexShrink: 0,
-                        }, children: displayName }), _jsxs(Box, { sx: {
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            gap: 1,
-                            px: 2,
-                            py: '2px',
-                            borderRadius: 2,
-                            backgroundColor: statusDisplay.bgColor,
-                            flexShrink: 0,
-                        }, children: [_jsx(Box, { sx: { color: statusDisplay.color, display: 'flex' }, children: statusDisplay.icon }), _jsx(Text, { sx: {
+                        }, children: displayName }), _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, px: 2, py: "2px", borderRadius: 2, backgroundColor: statusDisplay.bgColor, flexShrink: 0, children: [_jsx(Box, { color: statusDisplay.color, display: "flex", children: statusDisplay.icon }), _jsx(Text, { sx: {
                                     fontSize: 0,
                                     fontWeight: 'medium',
                                     color: statusDisplay.color,
@@ -221,7 +190,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                             whiteSpace: 'nowrap',
                             flex: 1,
                             minWidth: 0,
-                        }, children: argsSummary }))] }), isExpanded && (_jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: { mb: result !== undefined || error ? 3 : 0 }, children: [_jsx(Text, { sx: {
+                        }, children: argsSummary }))] }), isExpanded && (_jsxs(Box, { p: 3, children: [_jsxs(Box, { mb: result !== undefined || error ? 3 : 0, children: [_jsx(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -229,14 +198,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: chatText.parameters }), _jsx(Box, { sx: {
-                                    backgroundColor: 'canvas.inset',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    overflow: 'auto',
-                                    maxHeight: '200px',
-                                }, children: _jsx("pre", { style: {
+                                }, children: chatText.parameters }), _jsx(Box, { backgroundColor: "canvas.inset", borderRadius: 2, border: "1px solid", borderColor: "border.default", overflow: "auto", maxHeight: "200px", children: _jsx("pre", { style: {
                                         margin: 0,
                                         padding: '12px',
                                         fontSize: '12px',
@@ -254,14 +216,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: chatText.result }), _jsx(Box, { sx: {
-                                    backgroundColor: 'success.subtle',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'success.muted',
-                                    overflow: 'auto',
-                                    maxHeight: '300px',
-                                }, children: _jsx("pre", { style: {
+                                }, children: chatText.result }), _jsx(Box, { backgroundColor: "success.subtle", borderRadius: 2, border: "1px solid", borderColor: "success.muted", overflow: "auto", maxHeight: "300px", children: _jsx("pre", { style: {
                                         margin: 0,
                                         padding: '12px',
                                         fontSize: '12px',
@@ -271,7 +226,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                         wordBreak: 'break-word',
                                     }, children: typeof result === 'string'
                                         ? result
-                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { sx: { mt: status === 'complete' && result !== undefined ? 3 : 0 }, children: approvalState === 'approved' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'success.fg', fontSize: 1, display: 'block' }, children: chatText.approvedRunning }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: chatText.approvedElsewhere }))] })) : approvalState === 'denied' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, display: 'block' }, children: chatText.deniedWontRun }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: chatText.decidedElsewhere }))] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: chatText.approvalNeeded }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: chatText.approve }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: chatText.deny })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
+                                        : JSON.stringify(result, null, 2) }) })] })), approvalRequired && (_jsx(Box, { mt: status === 'complete' && result !== undefined ? 3 : 0, children: approvalState === 'approved' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'success.fg', fontSize: 1, display: 'block' }, children: chatText.approvedRunning }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: chatText.approvedElsewhere }))] })) : approvalState === 'denied' ? (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, display: 'block' }, children: chatText.deniedWontRun }), approvalDecisionSource === 'external' && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: chatText.decidedElsewhere }))] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.default' }, children: chatText.approvalNeeded }), _jsxs(Box, { mt: 2, display: "flex", gap: 2, children: [_jsx(Button, { size: "small", onClick: onApprove, disabled: approvalLoading || !onApprove, children: chatText.approve }), _jsx(Button, { size: "small", variant: "danger", onClick: onDeny, disabled: approvalLoading || !onDeny, children: chatText.deny })] })] })) })), status === 'error' && effectiveExecutionError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -279,13 +234,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: [_jsx(AlertIcon, { size: 12 }), " ", chatText.executionError] }), _jsxs(Box, { sx: {
-                                    backgroundColor: 'danger.subtle',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'danger.muted',
-                                    p: 2,
-                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: effectiveExecutionError }), _jsx(Text, { sx: {
+                                }, children: [_jsx(AlertIcon, { size: 12 }), " ", chatText.executionError] }), _jsxs(Box, { backgroundColor: "danger.subtle", borderRadius: 2, border: "1px solid", borderColor: "danger.muted", p: 2, children: [_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: effectiveExecutionError }), _jsx(Text, { sx: {
                                             display: 'block',
                                             fontSize: 0,
                                             color: 'fg.muted',
@@ -298,17 +247,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: [chatText.toolCodeError, ": ", effectiveCodeError.name] }), _jsxs(Box, { sx: {
-                                    backgroundColor: 'severe.subtle',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'severe.muted',
-                                    overflow: 'hidden',
-                                }, children: [_jsx(Box, { sx: { p: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'severe.fg' }, children: effectiveCodeError.value }) }), effectiveCodeError.traceback && (_jsx(Box, { sx: {
-                                            borderTop: '1px solid',
-                                            borderColor: 'severe.muted',
-                                            backgroundColor: 'canvas.inset',
-                                        }, children: _jsx("pre", { style: {
+                                }, children: [chatText.toolCodeError, ": ", effectiveCodeError.name] }), _jsxs(Box, { backgroundColor: "severe.subtle", borderRadius: 2, border: "1px solid", borderColor: "severe.muted", overflow: "hidden", children: [_jsx(Box, { p: 2, children: _jsx(Text, { sx: { fontSize: 1, color: 'severe.fg' }, children: effectiveCodeError.value }) }), effectiveCodeError.traceback && (_jsx(Box, { borderTop: "1px solid", borderColor: "severe.muted", backgroundColor: "canvas.inset", children: _jsx("pre", { style: {
                                                 margin: 0,
                                                 padding: '8px 12px',
                                                 fontSize: '11px',
@@ -330,13 +269,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: chatText.errorHeading }), _jsx(Box, { sx: {
-                                    backgroundColor: 'danger.subtle',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'danger.muted',
-                                    p: 2,
-                                }, children: _jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: effectiveError }) })] })), hasNonZeroExit &&
+                                }, children: chatText.errorHeading }), _jsx(Box, { backgroundColor: "danger.subtle", borderRadius: 2, border: "1px solid", borderColor: "danger.muted", p: 2, children: _jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: effectiveError }) })] })), hasNonZeroExit &&
                         !effectiveExecutionError &&
                         !effectiveCodeError && (_jsxs(Box, { children: [_jsxs(Text, { sx: {
                                     display: 'block',
@@ -346,25 +279,12 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     mb: 2,
-                                }, children: [_jsx(AlertIcon, { size: 12 }), " ", chatText.processExited] }), _jsxs(Box, { sx: {
-                                    backgroundColor: 'attention.subtle',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'attention.muted',
-                                    p: 2,
-                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: chatText.exitedWithCode(String(effectiveExitCode)) }), _jsx(Text, { sx: {
+                                }, children: [_jsx(AlertIcon, { size: 12 }), " ", chatText.processExited] }), _jsxs(Box, { backgroundColor: "attention.subtle", borderRadius: 2, border: "1px solid", borderColor: "attention.muted", p: 2, children: [_jsx(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: chatText.exitedWithCode(String(effectiveExitCode)) }), _jsx(Text, { sx: {
                                             display: 'block',
                                             fontSize: 0,
                                             color: 'fg.muted',
                                             mt: 1,
-                                        }, children: chatText.nonZeroExit })] }), effectiveExitOutput && (_jsx(Box, { sx: {
-                                    mt: 2,
-                                    backgroundColor: 'canvas.inset',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'attention.muted',
-                                    overflow: 'auto',
-                                }, children: _jsx("pre", { style: {
+                                        }, children: chatText.nonZeroExit })] }), effectiveExitOutput && (_jsx(Box, { mt: 2, backgroundColor: "canvas.inset", borderRadius: 2, border: "1px solid", borderColor: "attention.muted", overflow: "auto", children: _jsx("pre", { style: {
                                         margin: 0,
                                         padding: '10px 12px',
                                         fontSize: '12px',
@@ -373,11 +293,6 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                                         whiteSpace: 'pre-wrap',
                                         wordBreak: 'break-word',
                                         maxHeight: '200px',
-                                    }, children: effectiveExitOutput }) }))] })), _jsx(Box, { sx: {
-                            mt: 3,
-                            pt: 2,
-                            borderTop: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle', fontFamily: 'monospace' }, children: ["ID: ", toolCallId] }) })] }))] }));
+                                    }, children: effectiveExitOutput }) }))] })), _jsx(Box, { mt: 3, pt: 2, borderTop: "1px solid", borderColor: "border.muted", children: _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle', fontFamily: 'monospace' }, children: ["ID: ", toolCallId] }) })] }))] }));
 }
 export default ToolCallDisplay;

package/lib/chat/usage/ContextPie.js

@@ -150,19 +150,7 @@ export function ContextPie({ agentUsage, padding, showContextRing = false, }) {
             },
         ],
     };
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-start',
-            gap: 2,
-            py: 1,
-            px: padding,
-            bg: 'canvas.subtle',
-            flexWrap: 'nowrap',
-            overflow: 'visible',
-            whiteSpace: 'nowrap',
-            minWidth: 0,
-        }, children: [showContextRing && (_jsxs(Box, { sx: { position: 'relative', flexShrink: 0 }, onMouseEnter: () => {
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "flex-start", gap: 2, py: 1, px: padding, bg: "canvas.subtle", flexWrap: "nowrap", overflow: "visible", whiteSpace: "nowrap", minWidth: 0, children: [showContextRing && (_jsxs(Box, { position: "relative", flexShrink: 0, onMouseEnter: () => {
                     if (hoverTimeoutRef.current)
                         clearTimeout(hoverTimeoutRef.current);
                     hoverTimeoutRef.current = setTimeout(() => setContextOverlayOpen(true), 150);
@@ -170,30 +158,7 @@ export function ContextPie({ agentUsage, padding, showContextRing = false, }) {
                     if (hoverTimeoutRef.current)
                         clearTimeout(hoverTimeoutRef.current);
                     hoverTimeoutRef.current = setTimeout(() => setContextOverlayOpen(false), 250);
-                }, children: [_jsx(Box, { ref: contextAnchorRef, sx: {
-                            cursor: 'pointer',
-                            width: 20,
-                            height: 20,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: '50%',
-                        }, children: _jsx(ReactECharts, { option: miniPieOption, style: { width: 18, height: 18 }, opts: { renderer: 'svg' } }) }), contextOverlayOpen && (_jsxs(Box, { sx: {
-                            position: 'absolute',
-                            bottom: '100%',
-                            left: 0,
-                            mb: 1,
-                            p: 3,
-                            width: 260,
-                            bg: 'canvas.overlay',
-                            borderRadius: 2,
-                            boxShadow: 'shadow.large',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            zIndex: 100,
-                        }, children: [_jsx(Text, { sx: {
+                }, children: [_jsx(Box, { ref: contextAnchorRef, cursor: "pointer", width: 20, height: 20, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid", borderColor: "border.default", borderRadius: "50%", children: _jsx(ReactECharts, { option: miniPieOption, style: { width: 18, height: 18 }, opts: { renderer: 'svg' } }) }), contextOverlayOpen && (_jsxs(Box, { position: "absolute", bottom: "100%", left: 0, mb: 1, p: 3, width: 260, bg: "canvas.overlay", borderRadius: 2, boxShadow: "shadow.large", border: "1px solid", borderColor: "border.default", zIndex: 100, children: [_jsx(Text, { sx: {
                                     fontWeight: 'bold',
                                     fontSize: 1,
                                     color: 'fg.default',
@@ -214,15 +179,9 @@ export function ContextPie({ agentUsage, padding, showContextRing = false, }) {
                                     fontWeight: 'semibold',
                                     display: 'block',
                                     mb: 2,
-                                }, children: ['• ', pct.toFixed(0), "%"] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mb: 2 }, children: _jsx(ReactECharts, { option: overlayPieOption, style: { width: 80, height: 80 }, opts: { renderer: 'svg' } }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: categories.map(cat => {
+                                }, children: ['• ', pct.toFixed(0), "%"] }), _jsx(Box, { display: "flex", justifyContent: "center", mb: 2, children: _jsx(ReactECharts, { option: overlayPieOption, style: { width: 80, height: 80 }, opts: { renderer: 'svg' } }) }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 1, children: categories.map(cat => {
                                     const catPct = usedTokens > 0 ? (cat.value / usedTokens) * 100 : 0;
-                                    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
-                                                    width: 8,
-                                                    height: 8,
-                                                    borderRadius: '50%',
-                                                    bg: cat.color,
-                                                    flexShrink: 0,
-                                                } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', flex: 1 }, children: cat.name }), _jsxs(Text, { sx: {
+                                    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { width: 8, height: 8, borderRadius: "50%", bg: cat.color, flexShrink: 0 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', flex: 1 }, children: cat.name }), _jsxs(Text, { sx: {
                                                     fontSize: 0,
                                                     color: 'fg.default',
                                                     fontWeight: 'semibold',

package/lib/components/a2ui/datalayer/Chart.js

@@ -152,16 +152,10 @@ export function ChartView({ props }) {
     const option = useMemo(() => chartOption(points, { kind, x, y, series }, colours), [points, kind, x, y, series, colours]);
     const columns = series ? [x, series, y] : [x, y];
     const label = `${title || 'Chart'}: ${y} by ${x}, as a ${kind}`;
-    return (_jsx(BlockFrame, { title: title, label: "Chart", weight: props.weight, testId: "a2ui-chart", children: _jsx(Box, { ref: frame, children: 'problem' in read ? (_jsx(Problem, { children: read.problem })) : points.length === 0 ? (_jsx(Quiet, { children: "No points yet." })) : (_jsxs(Box, { as: "figure", "aria-label": label, sx: { m: 0 }, children: [_jsx("div", { "aria-hidden": "true", children: _jsx(ReactECharts, { option: option, style: { height: 240, width: '100%' }, opts: { renderer: 'svg' }, notMerge: true, lazyUpdate: true }) }), _jsxs(Box, { as: "details", sx: { fontSize: 1 }, children: [_jsx(Box, { as: "summary", sx: {
-                                    cursor: 'pointer',
-                                    color: 'fg.muted',
-                                    '&:focus-visible': {
-                                        outline: '2px solid',
-                                        outlineColor: 'accent.fg',
-                                    },
-                                }, children: _jsx(Text, { children: "The numbers" }) }), _jsxs(Box, { as: "table", sx: {
-                                    mt: 1,
-                                    borderCollapse: 'collapse',
+    return (_jsx(BlockFrame, { title: title, label: "Chart", weight: props.weight, testId: "a2ui-chart", children: _jsx(Box, { ref: frame, children: 'problem' in read ? (_jsx(Problem, { children: read.problem })) : points.length === 0 ? (_jsx(Quiet, { children: "No points yet." })) : (_jsxs(Box, { as: "figure", "aria-label": label, m: 0, children: [_jsx("div", { "aria-hidden": "true", children: _jsx(ReactECharts, { option: option, style: { height: 240, width: '100%' }, opts: { renderer: 'svg' }, notMerge: true, lazyUpdate: true }) }), _jsxs(Box, { as: "details", fontSize: 1, children: [_jsx(Box, { as: "summary", cursor: "pointer", color: "fg.muted", focusVisible: {
+                                    outline: '2px solid',
+                                    outlineColor: 'accent.fg',
+                                }, children: _jsx(Text, { children: "The numbers" }) }), _jsxs(Box, { as: "table", mt: 1, borderCollapse: "collapse", sx: {
                                     '& th, & td': {
                                         textAlign: 'left',
                                         pr: 3,

package/lib/components/a2ui/datalayer/Chat.js

@@ -100,17 +100,9 @@ export function ChatView({ props }) {
         action?.();
         setDraft('');
     };
-    return (_jsxs(BlockFrame, { label: "Chat", weight: props.weight, testId: "a2ui-chat", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : (_jsx(Box, { sx: {
-                    maxHeight: 420,
-                    overflowY: 'auto',
-                    borderRadius: CARD_RADIUS,
-                }, children: _jsx(ChatMessageList, { displayItems: read.items, isLoading: false, isStreaming: false, showLoadingIndicator: false, hideMessagesAfterToolUI: false, avatarConfig: AVATARS, padding: 2, emptyContent: _jsx(ChatEmptyState, { description: "", emptyState: { title: welcome || 'Start a conversation' }, suggestions: starters.map(starter => ({
+    return (_jsxs(BlockFrame, { label: "Chat", weight: props.weight, testId: "a2ui-chat", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : (_jsx(Box, { maxHeight: 420, overflowY: "auto", borderRadius: CARD_RADIUS, children: _jsx(ChatMessageList, { displayItems: read.items, isLoading: false, isStreaming: false, showLoadingIndicator: false, hideMessagesAfterToolUI: false, avatarConfig: AVATARS, padding: 2, emptyContent: _jsx(ChatEmptyState, { description: "", emptyState: { title: welcome || 'Start a conversation' }, suggestions: starters.map(starter => ({
                             title: starter,
                             message: starter,
-                        })), onSuggestionSubmit: suggestion => send(suggestion.message) }), messagesEndRef: messagesEnd, onRespond: async () => undefined }) })), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'flex-end',
-                    gap: 2,
-                }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(InputPromptText, { value: draft, onChange: setDraft, placeholder: placeholder, onSubmit: () => send(draft), inputRef: inputRef }) }), _jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", variant: "primary", disabled: !draft.trim(), onClick: () => send(draft) })] })] }));
+                        })), onSuggestionSubmit: suggestion => send(suggestion.message) }), messagesEndRef: messagesEnd, onRespond: async () => undefined }) })), _jsxs(Box, { display: "flex", alignItems: "flex-end", gap: 2, children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsx(InputPromptText, { value: draft, onChange: setDraft, placeholder: placeholder, onSubmit: () => send(draft), inputRef: inputRef }) }), _jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", variant: "primary", disabled: !draft.trim(), onClick: () => send(draft) })] })] }));
 }
 export const Chat = ownImplementation('Chat', ChatView);

package/lib/components/a2ui/datalayer/Download.js

@@ -61,6 +61,6 @@ export function DownloadView({ props }) {
     const said = [props.media_type, sizeInWords(props.size)]
         .filter(Boolean)
         .join(' · ');
-    return (_jsx(BlockFrame, { label: "File to download", weight: props.weight, testId: "a2ui-download", children: 'problem' in offered ? (_jsx(Problem, { children: offered.problem })) : (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-start' }, children: [_jsx(Box, { sx: { color: 'fg.muted', pt: '2px' }, children: _jsx(DownloadIcon, { size: 16, "aria-hidden": "true" }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', minWidth: 0 }, children: [_jsxs(Box, { children: [_jsx(Link, { href: offered.url, download: offered.name, target: "_blank", rel: "noreferrer noopener", onClick: () => action?.(), sx: { fontWeight: 'semibold', wordBreak: 'break-word' }, children: offered.name }), said ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, ml: 2 }, children: said })) : null] }), props.description ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: props.description })) : null] })] })) }));
+    return (_jsx(BlockFrame, { label: "File to download", weight: props.weight, testId: "a2ui-download", children: 'problem' in offered ? (_jsx(Problem, { children: offered.problem })) : (_jsxs(Box, { display: "flex", gap: 2, alignItems: "flex-start", children: [_jsx(Box, { color: "fg.muted", pt: "2px", children: _jsx(DownloadIcon, { size: 16, "aria-hidden": "true" }) }), _jsxs(Box, { display: "flex", flexDirection: "column", minWidth: 0, children: [_jsxs(Box, { children: [_jsx(Link, { href: offered.url, download: offered.name, target: "_blank", rel: "noreferrer noopener", onClick: () => action?.(), sx: { fontWeight: 'semibold', wordBreak: 'break-word' }, children: offered.name }), said ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, ml: 2 }, children: said })) : null] }), props.description ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: props.description })) : null] })] })) }));
 }
 export const Download = ownImplementation('Download', DownloadView);

package/lib/components/a2ui/datalayer/Evidence.js

@@ -54,20 +54,6 @@ export function EvidenceView({ props }) {
     const sources = 'sources' in read ? read.sources : [];
     const shown = all ? sources : sources.slice(0, maxItems);
     const hidden = sources.length - shown.length;
-    return (_jsxs(BlockFrame, { title: title, label: "Evidence", weight: props.weight, testId: "a2ui-evidence", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : sources.length === 0 ? (_jsx(Quiet, { children: "Nothing cited yet." })) : (_jsx(Box, { as: "ol", sx: {
-                    m: 0,
-                    pl: 3,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 2,
-                }, children: shown.map((source, index) => (_jsxs("li", { children: [source.url ? (_jsxs(Link, { href: source.url, target: "_blank", rel: "noreferrer noopener", onClick: () => action?.(), sx: { fontWeight: 'semibold' }, children: [source.title, ' ', _jsx(LinkExternalIcon, { size: 12, "aria-label": "opens in a new tab" })] })) : (_jsx(Text, { sx: { fontWeight: 'semibold' }, children: source.title })), showPassages && source.passage ? (_jsx(Box, { as: "blockquote", sx: {
-                                m: 0,
-                                mt: 1,
-                                pl: 2,
-                                borderLeft: '3px solid',
-                                borderColor: 'border.default',
-                                color: 'fg.muted',
-                                fontSize: 1,
-                            }, children: source.passage })) : null] }, `${source.url}-${index}`))) })), hidden > 0 ? (_jsx(Box, { children: _jsxs(Button, { size: "small", variant: "invisible", onClick: () => setAll(true), children: [hidden, " more"] }) })) : null] }));
+    return (_jsxs(BlockFrame, { title: title, label: "Evidence", weight: props.weight, testId: "a2ui-evidence", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : sources.length === 0 ? (_jsx(Quiet, { children: "Nothing cited yet." })) : (_jsx(Box, { as: "ol", m: 0, pl: 3, display: "flex", flexDirection: "column", gap: 2, children: shown.map((source, index) => (_jsxs("li", { children: [source.url ? (_jsxs(Link, { href: source.url, target: "_blank", rel: "noreferrer noopener", onClick: () => action?.(), sx: { fontWeight: 'semibold' }, children: [source.title, ' ', _jsx(LinkExternalIcon, { size: 12, "aria-label": "opens in a new tab" })] })) : (_jsx(Text, { sx: { fontWeight: 'semibold' }, children: source.title })), showPassages && source.passage ? (_jsx(Box, { as: "blockquote", m: 0, mt: 1, pl: 2, borderLeft: "3px solid", borderColor: "border.default", color: "fg.muted", fontSize: 1, children: source.passage })) : null] }, `${source.url}-${index}`))) })), hidden > 0 ? (_jsx(Box, { children: _jsxs(Button, { size: "small", variant: "invisible", onClick: () => setAll(true), children: [hidden, " more"] }) })) : null] }));
 }
 export const Evidence = ownImplementation('Evidence', EvidenceView);

package/lib/components/a2ui/datalayer/FileUpload.js

@@ -89,18 +89,7 @@ export function FileUploadView({ props }) {
     return (_jsxs(BlockFrame, { label: label, weight: props.weight, testId: "a2ui-fileupload", children: [_jsxs(Box, { onDragOver: (event) => {
                     event.preventDefault();
                     setOver(true);
-                }, onDragLeave: () => setOver(false), onDrop: onDrop, "data-testid": "a2ui-fileupload-drop", sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: 2,
-                    p: 3,
-                    border: '1px dashed',
-                    borderColor: over ? 'accent.fg' : 'border.default',
-                    borderRadius: CARD_RADIUS,
-                    bg: over ? 'accent.subtle' : 'canvas.subtle',
-                    textAlign: 'center',
-                }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: label }), _jsx(Button, { leadingVisual: UploadIcon, "aria-describedby": hintId, onClick: () => input.current?.click(), children: multiple ? 'Choose files' : 'Choose a file' }), _jsxs(Text, { id: hintId, sx: { fontSize: 0, color: 'fg.muted' }, children: ["or drop ", multiple ? 'them' : 'it', " here. ", hint, "."] }), _jsx("input", { ref: input, type: "file", hidden: true, "aria-label": label, accept: accept?.join(','), multiple: multiple, onChange: event => {
+                }, onDragLeave: () => setOver(false), onDrop: onDrop, "data-testid": "a2ui-fileupload-drop", display: "flex", flexDirection: "column", alignItems: "center", gap: 2, p: 3, border: "1px dashed", borderColor: over ? 'accent.fg' : 'border.default', borderRadius: CARD_RADIUS, bg: over ? 'accent.subtle' : 'canvas.subtle', textAlign: "center", children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: label }), _jsx(Button, { leadingVisual: UploadIcon, "aria-describedby": hintId, onClick: () => input.current?.click(), children: multiple ? 'Choose files' : 'Choose a file' }), _jsxs(Text, { id: hintId, sx: { fontSize: 0, color: 'fg.muted' }, children: ["or drop ", multiple ? 'them' : 'it', " here. ", hint, "."] }), _jsx("input", { ref: input, type: "file", hidden: true, "aria-label": label, accept: accept?.join(','), multiple: multiple, onChange: event => {
                             if (event.target.files) {
                                 void give(event.target.files);
                             }

package/lib/components/a2ui/datalayer/Table.js

@@ -65,10 +65,7 @@ export function TableView({ props }) {
             choose(row);
         }
     };
-    return (_jsxs(BlockFrame, { title: title, label: "Table", weight: props.weight, testId: "a2ui-table", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : (_jsxs(Box, { sx: { overflowX: 'auto' }, children: [_jsxs(Box, { as: "table", role: selectable ? 'grid' : undefined, "aria-label": title || 'Table', sx: {
-                            width: '100%',
-                            borderCollapse: 'collapse',
-                            fontSize: 1,
+    return (_jsxs(BlockFrame, { title: title, label: "Table", weight: props.weight, testId: "a2ui-table", children: ['problem' in read ? (_jsx(Problem, { children: read.problem })) : (_jsxs(Box, { overflowX: "auto", children: [_jsxs(Box, { as: "table", role: selectable ? 'grid' : undefined, "aria-label": title || 'Table', width: "100%", borderCollapse: "collapse", fontSize: 1, sx: {
                             '& th, & td': {
                                 textAlign: 'left',
                                 px: 2,
@@ -86,18 +83,13 @@ export function TableView({ props }) {
                                                 onClick: () => choose(row),
                                                 onKeyDown: (event) => onKey(event, row),
                                             }
-                                            : null), sx: {
-                                            cursor: selectable ? 'pointer' : undefined,
-                                            bg: isSelected ? 'accent.subtle' : undefined,
-                                            '&:hover': selectable
-                                                ? { bg: isSelected ? 'accent.subtle' : 'canvas.subtle' }
-                                                : undefined,
-                                            '&:focus-visible': {
-                                                outline: '2px solid',
-                                                outlineColor: 'accent.fg',
-                                                outlineOffset: '-2px',
-                                            },
-                                        }, children: columns.map(column => (_jsx("td", { children: asWords(row[column]) }, column))) }, page * pageSize + index));
-                                }) })] }), all.length === 0 ? _jsx(Quiet, { children: "No rows yet." }) : null] })), pages > 1 ? (_jsxs(Box, { as: "nav", "aria-label": "Pages", sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Button, { size: "small", disabled: page === 0, onClick: () => setPage(page - 1), children: "Previous" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, "aria-live": "polite", children: ["Page ", page + 1, " of ", pages] }), _jsx(Button, { size: "small", disabled: page >= pages - 1, onClick: () => setPage(page + 1), children: "Next" })] })) : null] }));
+                                            : null), cursor: selectable ? 'pointer' : undefined, bg: isSelected ? 'accent.subtle' : undefined, focusVisible: {
+                                            outline: '2px solid',
+                                            outlineColor: 'accent.fg',
+                                            outlineOffset: '-2px',
+                                        }, hover: selectable
+                                            ? { bg: isSelected ? 'accent.subtle' : 'canvas.subtle' }
+                                            : undefined, children: columns.map(column => (_jsx("td", { children: asWords(row[column]) }, column))) }, page * pageSize + index));
+                                }) })] }), all.length === 0 ? _jsx(Quiet, { children: "No rows yet." }) : null] })), pages > 1 ? (_jsxs(Box, { as: "nav", "aria-label": "Pages", display: "flex", alignItems: "center", gap: 2, children: [_jsx(Button, { size: "small", disabled: page === 0, onClick: () => setPage(page - 1), children: "Previous" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, "aria-live": "polite", children: ["Page ", page + 1, " of ", pages] }), _jsx(Button, { size: "small", disabled: page >= pages - 1, onClick: () => setPage(page + 1), children: "Next" })] })) : null] }));
 }
 export const Table = ownImplementation('Table', TableView);