@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/chat/messages/FormSubmissionMessage.js

@@ -8,42 +8,11 @@ export function FormSubmissionMessage({ submission, }) {
     const [expanded, setExpanded] = useState(true);
     const entries = Object.entries(submission.values);
     const count = entries.length;
-    return (_jsxs(Box, { sx: {
-            width: '100%',
-            minWidth: 280,
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: '12px',
-            overflow: 'hidden',
-            backgroundColor: 'canvas.default',
-            color: 'fg.default',
-        }, children: [_jsxs(Box, { as: "button", type: "button", "aria-expanded": expanded, onClick: () => setExpanded(value => !value), sx: {
-                    width: '100%',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    padding: 2,
-                    backgroundColor: 'canvas.subtle',
-                    border: 'none',
-                    borderBottom: expanded ? '1px solid' : 'none',
-                    borderColor: 'border.default',
-                    cursor: 'pointer',
-                    textAlign: 'left',
-                    color: 'fg.default',
-                    '&:hover': { backgroundColor: 'neutral.muted' },
-                }, children: [_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0 }, children: expanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })) }), _jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0 }, children: _jsx(ChecklistIcon, { size: 16 }) }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Submitted ", submission.title] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 'auto' }, children: [count, " field", count === 1 ? '' : 's'] })] }), expanded ? (_jsx(Box, { as: "table", sx: { width: '100%', borderCollapse: 'collapse' }, children: _jsx(Box, { as: "tbody", children: entries.map(([id, value]) => (_jsxs(Box, { as: "tr", sx: {
+    return (_jsxs(Box, { width: "100%", minWidth: 280, border: "1px solid", borderColor: "border.default", borderRadius: "12px", overflow: "hidden", backgroundColor: "canvas.default", color: "fg.default", children: [_jsxs(Box, { as: "button", type: "button", "aria-expanded": expanded, onClick: () => setExpanded(value => !value), width: "100%", display: "flex", alignItems: "center", gap: 2, padding: 2, backgroundColor: "canvas.subtle", border: "none", borderBottom: expanded ? '1px solid' : 'none', borderColor: "border.default", cursor: "pointer", textAlign: "left", color: "fg.default", hover: { backgroundColor: 'neutral.muted' }, children: [_jsx(Box, { color: "fg.muted", flexShrink: 0, children: expanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })) }), _jsx(Box, { color: "fg.muted", flexShrink: 0, children: _jsx(ChecklistIcon, { size: 16 }) }), _jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Submitted ", submission.title] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 'auto' }, children: [count, " field", count === 1 ? '' : 's'] })] }), expanded ? (_jsx(Box, { as: "table", width: "100%", borderCollapse: "collapse", children: _jsx(Box, { as: "tbody", children: entries.map(([id, value]) => (_jsxs(Box, { as: "tr", sx: {
                             '& + tr td': {
                                 borderTop: '1px solid',
                                 borderColor: 'border.muted',
                             },
-                        }, children: [_jsx(Box, { as: "td", sx: {
-                                    px: 3,
-                                    py: 1,
-                                    fontSize: 0,
-                                    color: 'fg.muted',
-                                    whiteSpace: 'nowrap',
-                                    verticalAlign: 'top',
-                                    width: '40%',
-                                }, children: labelOfFieldId(id) }), _jsx(Box, { as: "td", sx: { px: 3, py: 1, fontSize: 1, wordBreak: 'break-word' }, children: displayValue(value) })] }, id))) }) })) : null] }));
+                        }, children: [_jsx(Box, { as: "td", px: 3, py: 1, fontSize: 0, color: "fg.muted", whiteSpace: "nowrap", verticalAlign: "top", width: "40%", children: labelOfFieldId(id) }), _jsx(Box, { as: "td", px: 3, py: 1, fontSize: 1, wordBreak: "break-word", children: displayValue(value) })] }, id))) }) })) : null] }));
 }
 export default FormSubmissionMessage;

package/lib/chat/messages/NotebookToolSurfaces.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { Cell, Output, OutputViewer, notebookStore, } from '@datalayer/jupyter-react';
 import { decode } from '@toon-format/toon';
 /**
@@ -239,27 +240,14 @@ export function NotebookToolSurfaces({ documentId, context, }) {
     // its default rendering untouched.
     return (_jsxs(_Fragment, { children: [defaultUI, liveOutputs || outputs ? (
             /* An execution's outputs, and nothing else — see above. */
-            _jsxs(Box, { sx: {
-                    mt: 1,
-                    // The full column, not the content's own width: a surface sized
-                    // to its longest line reads as a fragment.
-                    width: '100%',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    overflow: 'hidden',
-                    bg: 'canvas.default',
-                }, children: [_jsx(Box, { sx: {
-                            px: 2,
-                            py: 1,
-                            bg: 'canvas.subtle',
-                            borderBottom: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Output \u00B7", ' ', status === 'executing'
+            _jsxs(Box, { mt: 1, 
+                // The full column, not the content's own width: a surface sized
+                // to its longest line reads as a fragment.
+                width: "100%", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", bg: "canvas.default", children: [_jsx(Box, { px: 2, py: 1, bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.muted", children: _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Output \u00B7", ' ', status === 'executing'
                                     ? 'executing…'
                                     : status === 'error'
                                         ? 'stopped'
-                                        : 'executed'] }) }), _jsx(Box, { sx: { p: 2 }, children: liveOutputs ? (
+                                        : 'executed'] }) }), _jsx(Box, { p: 2, children: liveOutputs ? (
                         /* The adapter's live mirror of the run: the area follows the
                            model, so each line lands here the moment the kernel prints
                            it — mounted from the first render of `executing`, before
@@ -269,28 +257,11 @@ export function NotebookToolSurfaces({ documentId, context, }) {
               Drawn as a surface, the way the A2UI example presents an execution:
               a captioned card, the change first, the outputs after.
             */
-            _jsxs(Box, { sx: {
-                    mt: 1,
-                    // The full column, not the content's own width: a surface sized
-                    // to its longest line reads as a fragment.
-                    width: '100%',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    overflow: 'hidden',
-                    bg: 'canvas.default',
-                }, children: [_jsx(Box, { sx: {
-                            px: 2,
-                            py: 1,
-                            bg: 'canvas.subtle',
-                            borderBottom: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [index !== undefined ? `Cell ${index}` : 'Cell', ' · ', TOOL_VERBS[shortName] ?? shortName] }) }), _jsx(Cell, { readOnly: true, type: cellModel.type ?? 'code', source: cellModel.sharedModel.getSource(), outputs: [] }), cellOutputsModel &&
-                        (status === 'executing' || cellOutputsModel.length > 0) ? (_jsx(Box, { sx: {
-                            borderTop: '1px solid',
-                            borderColor: 'border.muted',
-                            p: 2,
-                        }, children: _jsx(Output, { id: `${context.toolCallId}-outputs`, model: cellOutputsModel, showControl: false, showEditor: false, autoRun: false }) })) : null] })) : null] }));
+            _jsxs(Box, { mt: 1, 
+                // The full column, not the content's own width: a surface sized
+                // to its longest line reads as a fragment.
+                width: "100%", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", bg: "canvas.default", children: [_jsx(Box, { px: 2, py: 1, bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.muted", children: _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [index !== undefined ? `Cell ${index}` : 'Cell', ' · ', TOOL_VERBS[shortName] ?? shortName] }) }), _jsx(Cell, { readOnly: true, type: cellModel.type ?? 'code', source: cellModel.sharedModel.getSource(), outputs: [] }), cellOutputsModel &&
+                        (status === 'executing' || cellOutputsModel.length > 0) ? (_jsx(Box, { borderTop: "1px solid", borderColor: "border.muted", p: 2, children: _jsx(Output, { id: `${context.toolCallId}-outputs`, model: cellOutputsModel, showControl: false, showEditor: false, autoRun: false }) })) : null] })) : null] }));
 }
 /**
  * The renderer `ChatBase` mounts when a host names a notebook: the default

package/lib/chat/messages/TurnFooter.js

@@ -52,15 +52,9 @@ export function TurnFooter({ usage, live, latest, padding, onCopy, onRemove, })
         }
         copiedTimer.current = window.setTimeout(() => setCopied(false), 1500);
     };
-    return (_jsxs(Box, { "data-turn-footer": "", sx: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            px: padding,
-            // Tucked against the turn it accounts for, not opening a new band.
-            mt: -1,
-            pb: 1,
-            minHeight: 24,
+    return (_jsxs(Box, { "data-turn-footer": "", display: "flex", alignItems: "center", gap: 1, px: padding, 
+        // Tucked against the turn it accounts for, not opening a new band.
+        mt: -1, pb: 1, minHeight: 24, sx: {
             // Barely there until wanted.
             opacity: 0.55,
             transition: 'opacity 0.15s ease',
@@ -72,6 +66,6 @@ export function TurnFooter({ usage, live, latest, padding, onCopy, onRemove, })
             '&:hover [data-turn-actions], &:focus-within [data-turn-actions]': {
                 opacity: 1,
             },
-        }, children: [record && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(record.contextTokens) }), ' / ', formatTokenCount(record.contextWindow), ' ctx · turn ', formatTokenCount(record.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(record.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), !live && (_jsxs(Box, { "data-turn-actions": "", sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(IconButton, { "data-turn-copy": "", icon: copied ? CheckIcon : CopyIcon, "aria-label": chatText.copyTurn, size: "small", variant: "invisible", onClick: () => void handleCopy() }), _jsx(IconButton, { "data-turn-remove": "", icon: TrashIcon, "aria-label": chatText.removeTurn, size: "small", variant: "invisible", onClick: onRemove })] }))] }));
+        }, children: [record && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(record.contextTokens) }), ' / ', formatTokenCount(record.contextWindow), ' ctx · turn ', formatTokenCount(record.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(record.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), !live && (_jsxs(Box, { "data-turn-actions": "", display: "flex", alignItems: "center", children: [_jsx(IconButton, { "data-turn-copy": "", icon: copied ? CheckIcon : CopyIcon, "aria-label": chatText.copyTurn, size: "small", variant: "invisible", onClick: () => void handleCopy() }), _jsx(IconButton, { "data-turn-remove": "", icon: TrashIcon, "aria-label": chatText.removeTurn, size: "small", variant: "invisible", onClick: onRemove })] }))] }));
 }
 export default TurnFooter;

package/lib/chat/notebook/EphemeralNotebook.js

@@ -1,8 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ServerConnection, ServiceManager } from '@jupyterlab/services';
-import { DatalayerThemeProvider, getThemeConfig, useSystemColorMode, useThemeStore, } from '@datalayer/primer-addons';
-import { Box } from '@primer/react';
+import { Box, DatalayerThemeProvider, getThemeConfig, useSystemColorMode, useThemeStore, } from '@datalayer/primer-addons';
 import { Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, JupyterReactTheme, notebookStore, disposeServiceManager, useJupyterLabCssLoaded, } from '@datalayer/jupyter-react';
 import { useAgentsRuntimes } from '../../hooks/useAgentRuntimes';
 import { useResumeServerExecutions } from '../../jupyter/useResumeServerExecutions';
@@ -380,14 +379,7 @@ export function EphemeralNotebook({ notebookId, runtimeName, runtimeOverride, se
      * ephemeral notebooks on one sandbox from sharing a session.
      */
     const sessionPath = useMemo(() => `.datalayer/${notebookId}.ipynb`, [notebookId]);
-    return (_jsx(Box, { sx: {
-            flex: 1,
-            minHeight: 0,
-            height: '100%',
-            position: 'relative',
-            overflow: 'hidden',
-            bg: 'canvas.default',
-        }, children: activeServiceManager && notebookReady ? (_jsx(ThemeRoot, { inherit: inheritTheme, colorMode: effectiveColorMode, themeConfig: themeConfig, children: _jsx(JupyterReactTheme, { colormode: resolvedMode, backgroundColor: themeBackground, children: _jsx(Box, { sx: {
+    return (_jsx(Box, { flex: 1, minHeight: 0, height: "100%", position: "relative", overflow: "hidden", bg: "canvas.default", children: activeServiceManager && notebookReady ? (_jsx(ThemeRoot, { inherit: inheritTheme, colorMode: effectiveColorMode, themeConfig: themeConfig, children: _jsx(JupyterReactTheme, { colormode: resolvedMode, backgroundColor: themeBackground, children: _jsx(Box, { sx: {
                         position: 'absolute',
                         inset: 0,
                         display: 'flex',

package/lib/chat/parts/ReasoningPart.js

@@ -35,7 +35,7 @@ export function ReasoningPart({ text, isStreaming }) {
             return () => clearTimeout(timer);
         }
     }, [isStreaming, isExpanded]);
-    return (_jsxs(Box, { sx: { marginBottom: 3 }, children: [_jsxs(Button, { variant: "invisible", size: "small", onClick: () => setIsExpanded(!isExpanded), sx: {
+    return (_jsxs(Box, { marginBottom: 3, children: [_jsxs(Button, { variant: "invisible", size: "small", onClick: () => setIsExpanded(!isExpanded), sx: {
                     width: '100%',
                     display: 'flex',
                     gap: 2,
@@ -48,20 +48,6 @@ export function ReasoningPart({ text, isStreaming }) {
                     '&:hover': {
                         color: 'fg.default',
                     },
-                }, children: [_jsx(Text, { sx: { fontSize: 1 }, children: "\uD83E\uDDE0" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'normal' }, children: isStreaming ? 'Thinking...' : 'Reasoning' }), _jsx(Box, { as: "span", sx: {
-                            display: 'inline-flex',
-                            marginLeft: 'auto',
-                            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                            transition: 'transform 0.2s',
-                        }, children: _jsx(ChevronDownIcon, {}) })] }), isExpanded && (_jsx(Box, { sx: {
-                    marginTop: 2,
-                    padding: 3,
-                    backgroundColor: 'canvas.inset',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    color: 'fg.muted',
-                    ...streamdownMarkdownStyles,
-                }, children: _jsx(Streamdown, { children: text }) }))] }));
+                }, children: [_jsx(Text, { sx: { fontSize: 1 }, children: "\uD83E\uDDE0" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'normal' }, children: isStreaming ? 'Thinking...' : 'Reasoning' }), _jsx(Box, { as: "span", display: "inline-flex", marginLeft: "auto", transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: _jsx(ChevronDownIcon, {}) })] }), isExpanded && (_jsx(Box, { marginTop: 2, padding: 3, backgroundColor: "canvas.inset", borderRadius: 2, border: "1px solid", borderColor: "border.default", color: "fg.muted", sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: text }) }))] }));
 }
 export default ReasoningPart;

package/lib/chat/parts/TextPart.js

@@ -19,21 +19,11 @@ export function TextPart({ text, message, isLastPart, onRegenerate, }) {
             console.error('Error copying text:', error);
         });
     };
-    return (_jsxs(Box, { sx: {
-            padding: 3,
-            borderRadius: 2,
-            backgroundColor: message.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
-            marginBottom: 2,
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'flex-start',
-                    marginBottom: 2,
-                }, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { padding: 3, borderRadius: 2, backgroundColor: message.role === 'user' ? 'accent.subtle' : 'canvas.subtle', marginBottom: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 2, children: [_jsx(Text, { sx: {
                             fontWeight: 'bold',
                             fontSize: 1,
                             color: 'fg.muted',
                             textTransform: 'uppercase',
-                        }, children: message.role === 'user' ? 'You' : 'Assistant' }), message.role === 'assistant' && isLastPart && (_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(IconButton, { icon: SyncIcon, "aria-label": "Regenerate", size: "small", variant: "invisible", onClick: () => onRegenerate(message.id) }), _jsx(IconButton, { icon: CopyIcon, "aria-label": "Copy", size: "small", variant: "invisible", onClick: () => copy(text) })] }))] }), _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: text }) })] }));
+                        }, children: message.role === 'user' ? 'You' : 'Assistant' }), message.role === 'assistant' && isLastPart && (_jsxs(Box, { display: "flex", gap: 1, children: [_jsx(IconButton, { icon: SyncIcon, "aria-label": "Regenerate", size: "small", variant: "invisible", onClick: () => onRegenerate(message.id) }), _jsx(IconButton, { icon: CopyIcon, "aria-label": "Copy", size: "small", variant: "invisible", onClick: () => copy(text) })] }))] }), _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: text }) })] }));
 }
 export default TextPart;

package/lib/chat/parts/ToolPart.js

@@ -103,13 +103,7 @@ export function ToolPart({ part }) {
                     part.output.stderr ??
                     undefined)
                 : undefined);
-    return (_jsxs(Box, { sx: {
-            marginBottom: 2,
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            overflow: 'hidden',
-        }, children: [_jsxs(Button, { variant: "invisible", onClick: () => setIsExpanded(!isExpanded), sx: {
+    return (_jsxs(Box, { marginBottom: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: [_jsxs(Button, { variant: "invisible", onClick: () => setIsExpanded(!isExpanded), sx: {
                     width: '100%',
                     display: 'flex',
                     justifyContent: 'space-between',
@@ -124,27 +118,9 @@ export function ToolPart({ part }) {
                     '&:hover': {
                         backgroundColor: 'neutral.muted',
                     },
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [hasMark(marks) && (_jsx(Box, { sx: { display: 'flex', color: 'fg.muted' }, children: _jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 14 }) })), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: toolName }), _jsxs(Box, { sx: {
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    gap: 1,
-                                    paddingX: 2,
-                                    paddingY: 1,
-                                    borderRadius: 2,
-                                    backgroundColor: 'neutral.subtle',
-                                    fontSize: 0,
-                                }, children: [_jsx(Text, { sx: { color: statusInfo.color }, children: statusInfo.icon }), _jsx(Text, { sx: { color: statusInfo.color, fontWeight: 'semibold' }, children: statusInfo.label })] })] }), _jsx(Box, { as: "span", sx: {
-                            display: 'inline-flex',
-                            transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                            transition: 'transform 0.2s',
-                        }, children: _jsx(ChevronDownIcon, {}) })] }), isExpanded && (_jsxs(Box, { children: [_jsxs(Box, { sx: {
-                            padding: 3,
-                            borderBottom: part.state === 'output-available' ||
-                                part.state === 'output-error'
-                                ? '1px solid'
-                                : 'none',
-                            borderColor: 'border.default',
-                        }, children: [_jsx(Text, { sx: {
+                }, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [hasMark(marks) && (_jsx(Box, { display: "flex", color: "fg.muted", children: _jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 14 }) })), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: toolName }), _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, paddingX: 2, paddingY: 1, borderRadius: 2, backgroundColor: "neutral.subtle", fontSize: 0, children: [_jsx(Text, { sx: { color: statusInfo.color }, children: statusInfo.icon }), _jsx(Text, { sx: { color: statusInfo.color, fontWeight: 'semibold' }, children: statusInfo.label })] })] }), _jsx(Box, { as: "span", display: "inline-flex", transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: "transform 0.2s", children: _jsx(ChevronDownIcon, {}) })] }), isExpanded && (_jsxs(Box, { children: [_jsxs(Box, { padding: 3, borderBottom: part.state === 'output-available' || part.state === 'output-error'
+                            ? '1px solid'
+                            : 'none', borderColor: "border.default", children: [_jsx(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -152,20 +128,14 @@ export function ToolPart({ part }) {
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     marginBottom: 2,
-                                }, children: "Parameters" }), _jsx(Box, { sx: {
-                                    backgroundColor: 'canvas.inset',
-                                    borderRadius: 2,
-                                    overflow: 'auto',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: _jsx("pre", { style: {
+                                }, children: "Parameters" }), _jsx(Box, { backgroundColor: "canvas.inset", borderRadius: 2, overflow: "auto", border: "1px solid", borderColor: "border.default", children: _jsx("pre", { style: {
                                         margin: 0,
                                         padding: '12px',
                                         fontSize: '12px',
                                         fontFamily: 'monospace',
                                         lineHeight: 1.5,
                                         overflow: 'auto',
-                                    }, children: JSON.stringify(part.input, null, 2) }) })] }), part.state === 'output-available' && (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Text, { sx: {
+                                    }, children: JSON.stringify(part.input, null, 2) }) })] }), part.state === 'output-available' && (_jsxs(Box, { padding: 3, children: [_jsx(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -173,13 +143,7 @@ export function ToolPart({ part }) {
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     marginBottom: 2,
-                                }, children: "Result" }), _jsx(Box, { sx: {
-                                    backgroundColor: 'canvas.default',
-                                    borderRadius: 2,
-                                    overflow: 'auto',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: _jsx("pre", { style: {
+                                }, children: "Result" }), _jsx(Box, { backgroundColor: "canvas.default", borderRadius: 2, overflow: "auto", border: "1px solid", borderColor: "border.default", children: _jsx("pre", { style: {
                                         margin: 0,
                                         padding: '12px',
                                         fontSize: '12px',
@@ -190,7 +154,7 @@ export function ToolPart({ part }) {
                                         ? typeof part.output === 'string'
                                             ? part.output
                                             : JSON.stringify(part.output, null, 2)
-                                        : 'No output' }) })] })), executionResult && !executionResult.execution_ok && (_jsxs(Box, { sx: { padding: 3 }, children: [_jsxs(Text, { sx: {
+                                        : 'No output' }) })] })), executionResult && !executionResult.execution_ok && (_jsxs(Box, { padding: 3, children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -198,14 +162,7 @@ export function ToolPart({ part }) {
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     marginBottom: 2,
-                                }, children: [_jsx(AlertIcon, { size: 12 }), " Execution Error"] }), _jsxs(Box, { sx: {
-                                    backgroundColor: 'danger.subtle',
-                                    borderRadius: 2,
-                                    overflow: 'auto',
-                                    border: '1px solid',
-                                    borderColor: 'danger.muted',
-                                    padding: 2,
-                                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: executionResult.execution_error ||
+                                }, children: [_jsx(AlertIcon, { size: 12 }), " Execution Error"] }), _jsxs(Box, { backgroundColor: "danger.subtle", borderRadius: 2, overflow: "auto", border: "1px solid", borderColor: "danger.muted", padding: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: executionResult.execution_error ||
                                             'Sandbox execution failed' }), _jsx(Text, { sx: {
                                             display: 'block',
                                             fontSize: 0,
@@ -213,7 +170,7 @@ export function ToolPart({ part }) {
                                             marginTop: 1,
                                         }, children: "The sandbox or execution environment failed to run the code." })] })] })), executionResult &&
                         executionResult.execution_ok &&
-                        executionResult.code_error && (_jsxs(Box, { sx: { padding: 3 }, children: [_jsxs(Text, { sx: {
+                        executionResult.code_error && (_jsxs(Box, { padding: 3, children: [_jsxs(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -221,17 +178,7 @@ export function ToolPart({ part }) {
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     marginBottom: 2,
-                                }, children: ["Code Error: ", executionResult.code_error.name] }), _jsxs(Box, { sx: {
-                                    backgroundColor: 'severe.subtle',
-                                    borderRadius: 2,
-                                    overflow: 'hidden',
-                                    border: '1px solid',
-                                    borderColor: 'severe.muted',
-                                }, children: [_jsx(Box, { sx: { padding: 2 }, children: _jsx(Text, { sx: { fontSize: 0, color: 'severe.fg' }, children: executionResult.code_error.value }) }), executionResult.code_error.traceback && (_jsx(Box, { sx: {
-                                            borderTop: '1px solid',
-                                            borderColor: 'severe.muted',
-                                            backgroundColor: 'canvas.inset',
-                                        }, children: _jsx("pre", { style: {
+                                }, children: ["Code Error: ", executionResult.code_error.name] }), _jsxs(Box, { backgroundColor: "severe.subtle", borderRadius: 2, overflow: "hidden", border: "1px solid", borderColor: "severe.muted", children: [_jsx(Box, { padding: 2, children: _jsx(Text, { sx: { fontSize: 0, color: 'severe.fg' }, children: executionResult.code_error.value }) }), executionResult.code_error.traceback && (_jsx(Box, { borderTop: "1px solid", borderColor: "severe.muted", backgroundColor: "canvas.inset", children: _jsx("pre", { style: {
                                                 margin: 0,
                                                 padding: '8px 12px',
                                                 fontSize: '11px',
@@ -245,7 +192,7 @@ export function ToolPart({ part }) {
                         executionResult.execution_ok &&
                         !executionResult.code_error &&
                         executionResult.exit_code != null &&
-                        executionResult.exit_code !== 0 && (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Text, { sx: {
+                        executionResult.exit_code !== 0 && (_jsxs(Box, { padding: 3, children: [_jsx(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -253,26 +200,12 @@ export function ToolPart({ part }) {
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     marginBottom: 2,
-                                }, children: "Process Exited" }), _jsxs(Box, { sx: {
-                                    backgroundColor: 'attention.subtle',
-                                    borderRadius: 2,
-                                    overflow: 'hidden',
-                                    border: '1px solid',
-                                    borderColor: 'attention.muted',
-                                    padding: 2,
-                                }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'attention.fg' }, children: ["Process exited with code ", executionResult.exit_code] }), _jsx(Text, { sx: {
+                                }, children: "Process Exited" }), _jsxs(Box, { backgroundColor: "attention.subtle", borderRadius: 2, overflow: "hidden", border: "1px solid", borderColor: "attention.muted", padding: 2, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'attention.fg' }, children: ["Process exited with code ", executionResult.exit_code] }), _jsx(Text, { sx: {
                                             display: 'block',
                                             fontSize: 0,
                                             color: 'fg.muted',
                                             marginTop: 1,
-                                        }, children: "The code called sys.exit() with a non-zero exit code." }), effectiveExitOutput && (_jsx(Box, { sx: {
-                                            mt: 2,
-                                            backgroundColor: 'canvas.inset',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'attention.muted',
-                                            overflow: 'auto',
-                                        }, children: _jsx("pre", { style: {
+                                        }, children: "The code called sys.exit() with a non-zero exit code." }), 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',
@@ -284,7 +217,7 @@ export function ToolPart({ part }) {
                                             }, children: effectiveExitOutput }) }))] })] })), part.state === 'output-error' &&
                         'errorText' in part &&
                         part.errorText &&
-                        !executionResult && (_jsxs(Box, { sx: { padding: 3 }, children: [_jsx(Text, { sx: {
+                        !executionResult && (_jsxs(Box, { padding: 3, children: [_jsx(Text, { sx: {
                                     display: 'block',
                                     fontSize: 0,
                                     fontWeight: 'semibold',
@@ -292,13 +225,6 @@ export function ToolPart({ part }) {
                                     textTransform: 'uppercase',
                                     letterSpacing: '0.05em',
                                     marginBottom: 2,
-                                }, children: "Error" }), _jsx(Box, { sx: {
-                                    backgroundColor: 'danger.subtle',
-                                    borderRadius: 2,
-                                    overflow: 'auto',
-                                    border: '1px solid',
-                                    borderColor: 'danger.muted',
-                                    padding: 2,
-                                }, children: _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: part.errorText }) })] }))] }))] }));
+                                }, children: "Error" }), _jsx(Box, { backgroundColor: "danger.subtle", borderRadius: 2, overflow: "auto", border: "1px solid", borderColor: "danger.muted", padding: 2, children: _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: part.errorText }) })] }))] }))] }));
 }
 export default ToolPart;

package/lib/chat/presence/Presence.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { FluentEmoji } from '@datalayer/core/lib/components/emoji';
 import { PRESENCE_LINES } from './presenceStatus';
-const ACCENT = 'var(--loop-accent, var(--fgColor-accent))';
+const ACCENT = 'var(--theme-accent)';
 /**
  * A face at `size`: an emoji drawn in Fluent Emoji, the same on every
  * platform (LOOP T-20) — the system's, as text, only for one Datalayer ships
@@ -14,41 +15,12 @@ export function FaceDrawing({ face, size }) {
 export function PresenceFace({ face, size, state, }) {
     const active = state === 'thinking' || state === 'working';
     const paused = state === 'paused';
-    return (_jsxs(Box, { as: "span", "aria-hidden": true, "data-presence": state, sx: {
-            position: 'relative',
-            display: 'inline-flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: size + 8,
-            height: size + 8,
-            flexShrink: 0,
-            fontSize: size,
-            lineHeight: 1,
-        }, children: [_jsx(Box, { as: "span", sx: {
-                    position: 'absolute',
-                    inset: 0,
-                    borderRadius: '50%',
-                    boxShadow: paused ? 'none' : `0 0 0 2px ${ACCENT}`,
-                    border: paused ? '2px dashed' : 'none',
-                    borderColor: 'border.default',
-                    opacity: active || state === 'waiting' || paused ? 0.9 : 0,
-                    transition: 'opacity var(--theme-motion-status, 0ms) var(--theme-motion-easing, ease)',
-                    animation: active
-                        ? 'loopPresenceBreath 1.8s ease-in-out infinite'
-                        : 'none',
+    return (_jsxs(Box, { as: "span", "aria-hidden": true, "data-presence": state, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", width: size + 8, height: size + 8, flexShrink: 0, fontSize: size, lineHeight: 1, children: [_jsx(Box, { as: "span", position: "absolute", inset: 0, borderRadius: "50%", boxShadow: paused ? 'none' : `0 0 0 2px ${ACCENT}`, border: paused ? '2px dashed' : 'none', borderColor: "border.default", opacity: active || state === 'waiting' || paused ? 0.9 : 0, transition: "opacity var(--theme-motion-status, 0ms) var(--theme-motion-easing, ease)", animation: active ? 'loopPresenceBreath 1.8s ease-in-out infinite' : 'none', reducedMotion: { animation: 'none' }, sx: {
                     '@keyframes loopPresenceBreath': {
                         '0%, 100%': { transform: 'scale(0.92)', opacity: 0.35 },
                         '50%': { transform: 'scale(1.06)', opacity: 0.9 },
                     },
-                    '@media (prefers-reduced-motion: reduce)': {
-                        animation: 'none',
-                    },
-                } }), _jsx(Box, { as: "span", sx: {
-                    display: 'inline-flex',
-                    opacity: paused ? 0.55 : 1,
-                    filter: paused ? 'grayscale(0.6)' : 'none',
-                    transition: 'opacity var(--theme-motion-status, 0ms) var(--theme-motion-easing, ease)',
-                }, children: _jsx(FaceDrawing, { face: face, size: size }) })] }));
+                } }), _jsx(Box, { as: "span", display: "inline-flex", opacity: paused ? 0.55 : 1, filter: paused ? 'grayscale(0.6)' : 'none', transition: "opacity var(--theme-motion-status, 0ms) var(--theme-motion-easing, ease)", children: _jsx(FaceDrawing, { face: face, size: size }) })] }));
 }
 export function PresenceLine({ state }) {
     return (_jsx(Text, { role: "status", "aria-live": "polite", "data-presence-line": state, sx: {

package/lib/chat/prompt/FloatingCard.js

@@ -63,18 +63,6 @@ export function FloatingCard({ children, anchor = 'bottom', }) {
             borderRadius: 2,
             boxShadow: 'shadow.large',
             overflow: 'hidden',
-        }, children: [_jsx(Box, { onPointerDown: onHandlePointerDown, "aria-label": "Move the prompt", sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height: 18,
-                    cursor: 'grab',
-                    color: 'fg.subtle',
-                    bg: 'canvas.subtle',
-                    borderBottom: '1px solid',
-                    borderColor: 'border.muted',
-                    touchAction: 'none',
-                    '&:active': { cursor: 'grabbing' },
-                }, children: _jsx(GrabberIcon, { size: 16 }) }), children] }));
+        }, children: [_jsx(Box, { onPointerDown: onHandlePointerDown, "aria-label": "Move the prompt", display: "flex", alignItems: "center", justifyContent: "center", height: 18, cursor: "grab", color: "fg.subtle", bg: "canvas.subtle", borderBottom: "1px solid", borderColor: "border.muted", active: { cursor: 'grabbing' }, touchAction: "none", children: _jsx(GrabberIcon, { size: 16 }) }), children] }));
 }
 export default FloatingCard;

package/lib/chat/prompt/InputPrompt.js

@@ -148,12 +148,7 @@ export function InputPrompt({ input, setInput, isLoading, kernelStatus, connecti
                             content: (_jsx(_Fragment, { children: anyOffered || extrasOffered || suggestionsOffered ? (_jsxs(_Fragment, { children: [agentsOffered && (_jsx(AgentsMenu, { agents: agents, selectedAgentId: selectedAgentId, onSelectAgent: onSelectAgent })), toolsOffered && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: onToggleMcpToolApproval, availableTools: availableTools, availableFrontendTools: availableFrontendTools })), skillsOffered && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: onToggleSkillApproval })), modelsOffered && (_jsx(ModelSelector, { models: models, decisions: decisions, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol })), suggestionsOffered && (_jsx(SuggestionsMenu, { suggestions: suggestionItems, onPick: text => {
                                                 setInput(text);
                                                 setPickedFocus(n => n + 1);
-                                            } })), extrasOffered && (_jsx(Box, { sx: {
-                                                marginLeft: 'auto',
-                                                display: 'inline-flex',
-                                                alignItems: 'center',
-                                                gap: 1,
-                                            }, children: footerExtras }))] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading controls..." })) })),
+                                            } })), extrasOffered && (_jsx(Box, { marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 1, children: footerExtras }))] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading controls..." })) })),
                         },
                     ]
                     : [] }), trailingPanel] }));

package/lib/chat/prompt/InputPromptBase.js

@@ -177,16 +177,7 @@ export function InputPromptBase({ variant = 'lexical', placeholder = 'Ask anythi
         onStop?.();
     }, [onStop]);
     // ---- Render ------------------------------------------------------------
-    return (_jsx(Box, { sx: sx, children: _jsx(Box, { sx: {
-                p: padding,
-                ...(showBorderTop && {
-                    borderTop: '1px solid',
-                    borderColor: 'border.default',
-                }),
-                ...(showBackground && {
-                    bg: 'canvas.subtle',
-                }),
-            }, children: _jsxs(Box
+    return (_jsx(Box, { sx: sx, children: _jsx(Box, { p: padding, borderTop: showBorderTop ? '1px solid' : undefined, borderColor: showBorderTop ? 'border.default' : undefined, bg: showBackground ? 'canvas.subtle' : undefined, children: _jsxs(Box
             // Named so the turn-end refocus can ask whether the caret is already
             // somewhere inside this prompt before it reaches for it.
             , { 
@@ -209,14 +200,10 @@ export function InputPromptBase({ variant = 'lexical', placeholder = 'Ask anythi
                     if (!event.currentTarget.contains(event.relatedTarget)) {
                         setFocused(false);
                     }
-                }, sx: {
-                    border: '1px solid',
+                }, border: "1px solid", 
+                // The theme's card (LOOP T-03, T-06): today's 6px elsewhere.
+                borderRadius: "var(--theme-radius-card, 6px)", bg: "canvas.default", overflow: "hidden", transition: "border-color 0.2s ease", sx: {
                     borderColor: 'border.default',
-                    // The theme's card (LOOP T-03, T-06): today's 6px elsewhere.
-                    borderRadius: 'var(--theme-radius-card, 6px)',
-                    bg: 'canvas.default',
-                    overflow: 'hidden',
-                    transition: 'border-color 0.2s ease',
                     '&:focus-within': {
                         borderColor: 'accent.fg',
                         boxShadow: (t) => `0 0 0 1px ${t?.colors?.accent?.fg ?? '#16A085'}`,