@datalayer/agent-runtimes 1.3.89 → 1.3.90

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

@@ -19,10 +19,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module components/a2ui/datalayer/formWidgets
  */
 import { useState } from 'react';
-import { Box, FormControl, Text, TextInputWithTokens, ToggleSwitch, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { FormControl, Text, TextInputWithTokens, ToggleSwitch, } from '@primer/react';
 /** A `boolean` as a toggle switch. */
 export function SwitchWidget({ id, value, label, disabled, readonly, onChange, }) {
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { as: "span", id: `${id}-label`, sx: { fontWeight: 'semibold' }, children: label }), _jsx(ToggleSwitch, { size: "small", "aria-labelledby": `${id}-label`, checked: Boolean(value), disabled: disabled || readonly, onClick: () => onChange(!value) })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsx(Text, { as: "span", id: `${id}-label`, sx: { fontWeight: 'semibold' }, children: label }), _jsx(ToggleSwitch, { size: "small", "aria-labelledby": `${id}-label`, checked: Boolean(value), disabled: disabled || readonly, onClick: () => onChange(!value) })] }));
 }
 /** An `array` of `string` items as tokens: typed, then Enter or a comma. */
 export function TagsWidget({ id, value, label, disabled, readonly, placeholder, onChange, }) {

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

@@ -5,22 +5,7 @@ import { Box } from '@datalayer/primer-addons';
 export const CARD_RADIUS = 'var(--theme-radius-card, 6px)';
 /** A block's frame: its title above, what it draws inside. */
 export function BlockFrame({ title, label, weight, children, testId, }) {
-    return (_jsxs(Box, { as: "section", "aria-label": title || label, "data-testid": testId, sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            minWidth: 0,
-            boxSizing: 'border-box',
-            p: 3,
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: CARD_RADIUS,
-            bg: 'canvas.default',
-            color: 'fg.default',
-            ...(typeof weight === 'number'
-                ? { flex: `${weight}`, minHeight: 0 }
-                : null),
-        }, children: [title ? (_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title })) : null, children] }));
+    return (_jsxs(Box, { as: "section", "aria-label": title || label, "data-testid": testId, display: "flex", flexDirection: "column", gap: 2, minWidth: 0, boxSizing: "border-box", p: 3, border: "1px solid", borderColor: "border.default", borderRadius: CARD_RADIUS, bg: "canvas.default", color: "fg.default", flex: typeof weight === 'number' ? `${weight}` : undefined, minHeight: typeof weight === 'number' ? 0 : undefined, children: [title ? (_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title })) : null, children] }));
 }
 /** What a block says instead of what it was given, when that cannot be drawn. */
 export function Problem({ children }) {

package/lib/components/agents/AgentSummary.js

@@ -108,55 +108,5 @@ export const AgentSummary = ({ summary, title = 'Active Agent', }) => {
     const shortAgentName = strip(summary.agentName, MAX_AGENT_NAME_LENGTH);
     const badgeLabel = `${summary.agentName} · ${summary.location}`;
     const badgeLabelShort = `${shortAgentName} · ${summary.location}`;
-    return (_jsxs(Box, { ref: badgeRef, sx: { position: 'relative' }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs(Box, { as: "button", type: "button", title: badgeLabel, sx: {
-                    px: 2,
-                    py: '6px',
-                    maxWidth: 280,
-                    minWidth: 0,
-                    border: '1px solid',
-                    borderColor: hasError ? 'danger.emphasis' : 'border.default',
-                    borderRadius: 2,
-                    bg: hasError ? 'danger.subtle' : 'canvas.default',
-                    color: hasError ? 'danger.fg' : 'fg.default',
-                    fontSize: 0,
-                    cursor: 'default',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                }, children: [isCreating && _jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), hasError && _jsx("span", { "aria-hidden": true, children: "\u26A0" }), _jsx(Box, { as: "span", sx: {
-                            display: 'block',
-                            minWidth: 0,
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                        }, children: badgeLabelShort })] }), isHovering && (_jsxs(Box, { sx: {
-                    position: 'absolute',
-                    top: 'calc(100% + 8px)',
-                    ...(opensLeftward ? { right: 0 } : { left: 0 }),
-                    width: OVERLAY_WIDTH,
-                    p: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    bg: 'canvas.overlay',
-                    boxShadow: 'shadow.large',
-                    zIndex: 120,
-                    fontSize: 0,
-                    color: 'fg.default',
-                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600 }, children: title }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Name: ", summary.agentName] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Location: ", summary.location] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Spec: ", summary.specId || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Harness: ", summary.harness || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Variant: ", summary.variant || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted' }, children: ["Status: ", isCreating ? 'creating' : summary.status || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Agent base URL: ", summary.baseUrl || '—'] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Code sandbox base URL:", ' ', summary.sandboxBaseUrl ? (_jsx(Box, { as: "a", href: summary.sandboxBaseUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: summary.sandboxBaseUrl })) : ('—')] }), _jsxs(Box, { sx: {
-                            color: 'fg.muted',
-                            wordBreak: 'break-all',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 1,
-                        }, children: ["Agent ID:", ' ', summary.agentId ? (summary.agentId) : isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), "Creating\u2026"] })) : ('—')] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Agent status:", ' ', hasAgent && agentStatusUrl ? (_jsx(Box, { as: "a", href: agentStatusUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: agentStatusUrl })) : ('n/a')] }), _jsxs(Box, { sx: { color: 'fg.muted', wordBreak: 'break-all' }, children: ["Code sandbox status:", ' ', sandboxStatusUrl ? (_jsx(Box, { as: "a", href: sandboxStatusUrl, target: "_blank", rel: "noopener noreferrer", sx: { color: 'accent.fg', textDecoration: 'underline' }, children: sandboxStatusUrl })) : ('n/a')] }), hasError && (_jsxs(Box, { sx: {
-                            mt: 1,
-                            p: 1,
-                            border: '1px solid',
-                            borderColor: 'danger.muted',
-                            borderRadius: 2,
-                            bg: 'danger.subtle',
-                            color: 'danger.fg',
-                            wordBreak: 'break-word',
-                        }, children: ["Error: ", summary.error] }))] }))] }));
+    return (_jsxs(Box, { ref: badgeRef, position: "relative", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs(Box, { as: "button", type: "button", title: badgeLabel, px: 2, py: "6px", maxWidth: 280, minWidth: 0, border: "1px solid", borderColor: hasError ? 'danger.emphasis' : 'border.default', borderRadius: 2, bg: hasError ? 'danger.subtle' : 'canvas.default', color: hasError ? 'danger.fg' : 'fg.default', fontSize: 0, cursor: "default", display: "flex", alignItems: "center", gap: 1, children: [isCreating && _jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), hasError && _jsx("span", { "aria-hidden": true, children: "\u26A0" }), _jsx(Box, { as: "span", display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: badgeLabelShort })] }), isHovering && (_jsxs(Box, { position: "absolute", top: "calc(100% + 8px)", width: OVERLAY_WIDTH, p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.overlay", boxShadow: "shadow.large", zIndex: 120, fontSize: 0, color: "fg.default", right: opensLeftward ? 0 : undefined, left: opensLeftward ? undefined : 0, children: [_jsx(Box, { mb: 1, fontWeight: 600, children: title }), _jsxs(Box, { color: "fg.muted", children: ["Name: ", summary.agentName] }), _jsxs(Box, { color: "fg.muted", children: ["Location: ", summary.location] }), _jsxs(Box, { color: "fg.muted", children: ["Spec: ", summary.specId || '—'] }), _jsxs(Box, { color: "fg.muted", children: ["Harness: ", summary.harness || '—'] }), _jsxs(Box, { color: "fg.muted", children: ["Variant: ", summary.variant || '—'] }), _jsxs(Box, { color: "fg.muted", children: ["Status: ", isCreating ? 'creating' : summary.status || '—'] }), _jsxs(Box, { color: "fg.muted", wordBreak: "break-all", children: ["Agent base URL: ", summary.baseUrl || '—'] }), _jsxs(Box, { color: "fg.muted", wordBreak: "break-all", children: ["Code sandbox base URL:", ' ', summary.sandboxBaseUrl ? (_jsx(Box, { as: "a", href: summary.sandboxBaseUrl, target: "_blank", rel: "noopener noreferrer", color: "accent.fg", textDecoration: "underline", children: summary.sandboxBaseUrl })) : ('—')] }), _jsxs(Box, { color: "fg.muted", wordBreak: "break-all", display: "flex", alignItems: "center", gap: 1, children: ["Agent ID:", ' ', summary.agentId ? (summary.agentId) : isCreating ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small", sx: { width: 12, height: 12 } }), "Creating\u2026"] })) : ('—')] }), _jsxs(Box, { color: "fg.muted", wordBreak: "break-all", children: ["Agent status:", ' ', hasAgent && agentStatusUrl ? (_jsx(Box, { as: "a", href: agentStatusUrl, target: "_blank", rel: "noopener noreferrer", color: "accent.fg", textDecoration: "underline", children: agentStatusUrl })) : ('n/a')] }), _jsxs(Box, { color: "fg.muted", wordBreak: "break-all", children: ["Code sandbox status:", ' ', sandboxStatusUrl ? (_jsx(Box, { as: "a", href: sandboxStatusUrl, target: "_blank", rel: "noopener noreferrer", color: "accent.fg", textDecoration: "underline", children: sandboxStatusUrl })) : ('n/a')] }), hasError && (_jsxs(Box, { mt: 1, p: 1, border: "1px solid", borderColor: "danger.muted", borderRadius: 2, bg: "danger.subtle", color: "danger.fg", wordBreak: "break-word", children: ["Error: ", summary.error] }))] }))] }));
 };

package/lib/components/cards/NotificationEventCard.js

@@ -74,35 +74,7 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
         }
         detailEntries.push({ label: `payload.${key}`, value: String(value) });
     });
-    return (_jsxs(Box, { sx: {
-            minWidth: 0,
-            maxWidth: '100%',
-            overflow: 'hidden',
-            p: 3,
-            borderRadius: 2,
-            border: '1px solid',
-            borderColor: event.read ? 'border.default' : 'accent.muted',
-            bg: event.read ? 'canvas.default' : 'accent.subtle',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'flex-start',
-                    gap: 2,
-                    mb: 1,
-                    minWidth: 0,
-                }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            minWidth: 0,
-                            flex: 1,
-                        }, children: [_jsx(Label, { variant: EVENT_KIND_VARIANT[eventKind] ?? 'secondary', children: eventKind }), _jsx(Truncate, { maxWidth: "50%", title: String(eventTitle || ''), sx: { fontWeight: 'semibold', fontSize: 1, minWidth: 0 }, children: eventTitle }), eventKind === 'agent-output' && event.payload?.exit_status && (_jsxs(Label, { variant: "success", sx: { fontSize: 0, whiteSpace: 'nowrap' }, children: ["Status: ", String(event.payload.exit_status)] })), event.agent_id && (_jsx(Truncate, { maxWidth: 240, title: String(event.agent_id), children: _jsx(Label, { variant: "secondary", sx: { fontSize: 0, maxWidth: '100%' }, children: event.agent_id }) })), eventOrigin && (_jsxs(Label, { variant: "secondary", sx: { fontSize: 0, whiteSpace: 'nowrap' }, children: ["Origin: ", eventOrigin] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [hasAgentRoute && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => onOpenAgent?.(runtimeId), children: "View agent" })), event.created_at && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', whiteSpace: 'nowrap' }, children: new Date(event.created_at).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleRead(event), sx: { p: 1 }, children: event.read ? _jsx(EyeClosedIcon, { size: 12 }) : _jsx(EyeIcon, { size: 12 }) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onDelete(event), sx: { p: 1, color: 'danger.fg' }, children: _jsx(TrashIcon, { size: 12 }) })] })] }), event.payload && (_jsxs(Box, { sx: {
-                    fontSize: 0,
-                    color: 'fg.muted',
-                    mt: 1,
-                    minWidth: 0,
-                    overflowWrap: 'anywhere',
-                }, children: [(startedAt ||
+    return (_jsxs(Box, { minWidth: 0, maxWidth: "100%", overflow: "hidden", p: 3, borderRadius: 2, border: "1px solid", borderColor: event.read ? 'border.default' : 'accent.muted', bg: event.read ? 'canvas.default' : 'accent.subtle', children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 2, mb: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, flex: 1, children: [_jsx(Label, { variant: EVENT_KIND_VARIANT[eventKind] ?? 'secondary', children: eventKind }), _jsx(Truncate, { maxWidth: "50%", title: String(eventTitle || ''), sx: { fontWeight: 'semibold', fontSize: 1, minWidth: 0 }, children: eventTitle }), eventKind === 'agent-output' && event.payload?.exit_status && (_jsxs(Label, { variant: "success", sx: { fontSize: 0, whiteSpace: 'nowrap' }, children: ["Status: ", String(event.payload.exit_status)] })), event.agent_id && (_jsx(Truncate, { maxWidth: 240, title: String(event.agent_id), children: _jsx(Label, { variant: "secondary", sx: { fontSize: 0, maxWidth: '100%' }, children: event.agent_id }) })), eventOrigin && (_jsxs(Label, { variant: "secondary", sx: { fontSize: 0, whiteSpace: 'nowrap' }, children: ["Origin: ", eventOrigin] }))] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [hasAgentRoute && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => onOpenAgent?.(runtimeId), children: "View agent" })), event.created_at && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', whiteSpace: 'nowrap' }, children: new Date(event.created_at).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleRead(event), sx: { p: 1 }, children: event.read ? _jsx(EyeClosedIcon, { size: 12 }) : _jsx(EyeIcon, { size: 12 }) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onDelete(event), sx: { p: 1, color: 'danger.fg' }, children: _jsx(TrashIcon, { size: 12 }) })] })] }), event.payload && (_jsxs(Box, { fontSize: 0, color: "fg.muted", mt: 1, minWidth: 0, overflowWrap: "anywhere", children: [(startedAt ||
                         endedAt ||
                         (eventKind === 'agent-output' &&
                             event.payload.duration_ms != null)) && (_jsxs(Text, { as: "p", children: [startedAt ? `Started: ${formatRelativeTime(startedAt)}` : '', startedAt && endedAt ? ' · ' : '', endedAt ? `Ended: ${formatRelativeTime(endedAt)}` : '', (startedAt || endedAt) &&
@@ -111,14 +83,7 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
                                 ? ' · '
                                 : '', eventKind === 'agent-output' && event.payload.duration_ms != null
                                 ? `Duration: ${formatDurationMs(Number(event.payload.duration_ms))}`
-                                : ''] })), eventKind.includes('guardrail') && event.payload.message && (_jsx(Text, { as: "p", sx: { mb: 1 }, children: String(event.payload.message) })), eventKind.includes('guardrail') && event.payload.action_taken && (_jsxs(Text, { as: "p", children: ["Action: ", String(event.payload.action_taken)] })), eventKind === 'agent-started' && event.payload.trigger_type && (_jsxs(Text, { as: "p", children: ["Trigger: ", String(event.payload.trigger_type)] })), outputText && (_jsx(Box, { sx: {
-                            mt: 2,
-                            p: 2,
-                            borderRadius: 2,
-                            border: '1px solid',
-                            borderColor: 'border.muted',
-                            bg: 'canvas.subtle',
-                        }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: 1 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsxs("details", { open: isOutputExpanded, children: [_jsx("summary", { onClick: e => {
+                                : ''] })), eventKind.includes('guardrail') && event.payload.message && (_jsx(Text, { as: "p", sx: { mb: 1 }, children: String(event.payload.message) })), eventKind.includes('guardrail') && event.payload.action_taken && (_jsxs(Text, { as: "p", children: ["Action: ", String(event.payload.action_taken)] })), eventKind === 'agent-started' && event.payload.trigger_type && (_jsxs(Text, { as: "p", children: ["Trigger: ", String(event.payload.trigger_type)] })), outputText && (_jsx(Box, { mt: 2, p: 2, borderRadius: 2, border: "1px solid", borderColor: "border.muted", bg: "canvas.subtle", children: _jsxs(Box, { display: "flex", alignItems: "flex-start", gap: 1, children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsxs("details", { open: isOutputExpanded, children: [_jsx("summary", { onClick: e => {
                                                     e.preventDefault();
                                                     setIsOutputExpanded(prev => !prev);
                                                 }, style: {
@@ -126,23 +91,7 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
                                                     display: 'flex',
                                                     alignItems: 'center',
                                                     minWidth: 0,
-                                                }, children: _jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        gap: 2,
-                                                        minWidth: 0,
-                                                        width: '100%',
-                                                        flexWrap: 'nowrap',
-                                                    }, children: [_jsx(Box, { sx: {
-                                                                display: 'flex',
-                                                                alignItems: 'center',
-                                                                color: 'fg.muted',
-                                                                flexShrink: 0,
-                                                                transition: 'transform 0.15s ease',
-                                                                transform: isOutputExpanded
-                                                                    ? 'rotate(180deg)'
-                                                                    : 'rotate(0deg)',
-                                                            }, children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: {
+                                                }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, width: "100%", flexWrap: "nowrap", children: [_jsx(Box, { display: "flex", alignItems: "center", color: "fg.muted", flexShrink: 0, transition: "transform 0.15s ease", transform: isOutputExpanded ? 'rotate(180deg)' : 'rotate(0deg)', children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 fontWeight: 'semibold',
                                                                 flexShrink: 0,
@@ -151,31 +100,16 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
                                                                 color: 'fg.muted',
                                                                 minWidth: 0,
                                                                 flex: 1,
-                                                            }, children: outputText })] }) }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: outputText }) }) })] }) }), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1, flexShrink: 0 }, title: "Download output markdown", "aria-label": "Download output markdown", onClick: () => {
+                                                            }, children: outputText })] }) }), _jsx(Box, { mt: 2, children: _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: outputText }) }) })] }) }), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1, flexShrink: 0 }, title: "Download output markdown", "aria-label": "Download output markdown", onClick: () => {
                                         const payload = createMarkdownDownloadPayload(outputText, `${runtimeId}-output`);
                                         downloadTextPayload(payload);
-                                    }, children: _jsx(DownloadIcon, { size: 12 }) })] }) })), _jsx(Box, { sx: {
-                            mt: 2,
-                            p: 2,
-                            borderRadius: 2,
-                            border: '1px solid',
-                            borderColor: 'border.muted',
-                            bg: 'canvas.subtle',
-                        }, children: _jsxs("details", { open: isDetailsExpanded, children: [_jsx("summary", { onClick: e => {
+                                    }, children: _jsx(DownloadIcon, { size: 12 }) })] }) })), _jsx(Box, { mt: 2, p: 2, borderRadius: 2, border: "1px solid", borderColor: "border.muted", bg: "canvas.subtle", children: _jsxs("details", { open: isDetailsExpanded, children: [_jsx("summary", { onClick: e => {
                                         e.preventDefault();
                                         setIsDetailsExpanded(prev => !prev);
                                     }, style: {
                                         cursor: 'pointer',
                                         display: 'flex',
                                         alignItems: 'center',
-                                    }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    color: 'fg.muted',
-                                                    transition: 'transform 0.15s ease',
-                                                    transform: isDetailsExpanded
-                                                        ? 'rotate(180deg)'
-                                                        : 'rotate(0deg)',
-                                                }, children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "View details" })] }) }), _jsx(Box, { sx: { mt: 2, display: 'grid', gap: 1 }, children: detailEntries.map(({ label, value }) => (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: [label, ":", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: value })] }, label))) })] }) })] }))] }));
+                                    }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Box, { display: "flex", alignItems: "center", color: "fg.muted", transition: "transform 0.15s ease", transform: isDetailsExpanded ? 'rotate(180deg)' : 'rotate(0deg)', children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "View details" })] }) }), _jsx(Box, { mt: 2, display: "grid", gap: 1, children: detailEntries.map(({ label, value }) => (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: [label, ":", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: value })] }, label))) })] }) })] }))] }));
 }
 export default NotificationEventCard;

package/lib/components/cards/OutputCard.js

@@ -23,37 +23,9 @@ export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
     const startedAt = event?.started_at || event?.payload?.started_at || null;
     const endedAt = event?.ended_at || event?.payload?.ended_at || null;
     const durationMs = event.kind === 'agent-output' ? event.payload?.duration_ms : null;
-    return (_jsxs(Box, { sx: {
-            minWidth: 0,
-            maxWidth: '100%',
-            overflow: 'hidden',
-            p: 3,
-            borderRadius: 2,
-            border: '1px solid',
-            borderColor: event.read ? 'border.default' : 'accent.muted',
-            bg: event.read ? 'canvas.default' : 'accent.subtle',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'flex-start',
-                    gap: 2,
-                    mb: 2,
-                    minWidth: 0,
-                }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            minWidth: 0,
-                            flex: 1,
-                        }, children: [_jsx(Label, { variant: "success", children: "output" }), _jsx(Truncate, { maxWidth: "50%", title: String(event.title || runtimeId), sx: { fontWeight: 'semibold', fontSize: 1, minWidth: 0 }, children: event.title || runtimeId }), event.payload?.exit_status && (_jsxs(Label, { variant: "success", sx: { fontSize: 0, whiteSpace: 'nowrap' }, children: ["Status: ", String(event.payload.exit_status)] })), event.agent_id && (_jsx(Truncate, { maxWidth: 240, title: String(event.agent_id), children: _jsx(Label, { variant: "secondary", sx: { fontSize: 0, maxWidth: '100%' }, children: event.agent_id }) }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [event.agent_id && onOpenAgent && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => onOpenAgent(String(event.agent_id)), children: "Open agent" })), event.created_at && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', whiteSpace: 'nowrap' }, children: new Date(event.created_at).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleRead(event), sx: { p: 1 }, children: event.read ? _jsx(EyeClosedIcon, { size: 12 }) : _jsx(EyeIcon, { size: 12 }) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onDelete(event), sx: { p: 1, color: 'danger.fg' }, children: _jsx(TrashIcon, { size: 12 }) })] })] }), (startedAt || endedAt || durationMs != null) && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: [startedAt ? `Started: ${formatRelativeTime(startedAt)}` : '', startedAt && endedAt ? ' · ' : '', endedAt ? `Ended: ${formatRelativeTime(endedAt)}` : '', (startedAt || endedAt) && durationMs != null ? ' · ' : '', durationMs != null
+    return (_jsxs(Box, { minWidth: 0, maxWidth: "100%", overflow: "hidden", p: 3, borderRadius: 2, border: "1px solid", borderColor: event.read ? 'border.default' : 'accent.muted', bg: event.read ? 'canvas.default' : 'accent.subtle', children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 2, mb: 2, minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, flex: 1, children: [_jsx(Label, { variant: "success", children: "output" }), _jsx(Truncate, { maxWidth: "50%", title: String(event.title || runtimeId), sx: { fontWeight: 'semibold', fontSize: 1, minWidth: 0 }, children: event.title || runtimeId }), event.payload?.exit_status && (_jsxs(Label, { variant: "success", sx: { fontSize: 0, whiteSpace: 'nowrap' }, children: ["Status: ", String(event.payload.exit_status)] })), event.agent_id && (_jsx(Truncate, { maxWidth: 240, title: String(event.agent_id), children: _jsx(Label, { variant: "secondary", sx: { fontSize: 0, maxWidth: '100%' }, children: event.agent_id }) }))] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [event.agent_id && onOpenAgent && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => onOpenAgent(String(event.agent_id)), children: "Open agent" })), event.created_at && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', whiteSpace: 'nowrap' }, children: new Date(event.created_at).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleRead(event), sx: { p: 1 }, children: event.read ? _jsx(EyeClosedIcon, { size: 12 }) : _jsx(EyeIcon, { size: 12 }) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onDelete(event), sx: { p: 1, color: 'danger.fg' }, children: _jsx(TrashIcon, { size: 12 }) })] })] }), (startedAt || endedAt || durationMs != null) && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: [startedAt ? `Started: ${formatRelativeTime(startedAt)}` : '', startedAt && endedAt ? ' · ' : '', endedAt ? `Ended: ${formatRelativeTime(endedAt)}` : '', (startedAt || endedAt) && durationMs != null ? ' · ' : '', durationMs != null
                         ? `Duration: ${formatDurationMs(Number(durationMs))}`
-                        : ''] })), outputText && (_jsx(Box, { sx: {
-                    p: 2,
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: 'border.muted',
-                    bg: 'canvas.subtle',
-                }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: 1 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsxs("details", { open: isOutputExpanded, children: [_jsx("summary", { onClick: e => {
+                        : ''] })), outputText && (_jsx(Box, { p: 2, borderRadius: 2, border: "1px solid", borderColor: "border.muted", bg: "canvas.subtle", children: _jsxs(Box, { display: "flex", alignItems: "flex-start", gap: 1, children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsxs("details", { open: isOutputExpanded, children: [_jsx("summary", { onClick: e => {
                                             e.preventDefault();
                                             setIsOutputExpanded(prev => !prev);
                                         }, style: {
@@ -61,23 +33,7 @@ export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
                                             display: 'flex',
                                             alignItems: 'center',
                                             minWidth: 0,
-                                        }, children: _jsxs(Box, { sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                gap: 2,
-                                                minWidth: 0,
-                                                width: '100%',
-                                                flexWrap: 'nowrap',
-                                            }, children: [_jsx(Box, { sx: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        color: 'fg.muted',
-                                                        flexShrink: 0,
-                                                        transition: 'transform 0.15s ease',
-                                                        transform: isOutputExpanded
-                                                            ? 'rotate(180deg)'
-                                                            : 'rotate(0deg)',
-                                                    }, children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: {
+                                        }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, width: "100%", flexWrap: "nowrap", children: [_jsx(Box, { display: "flex", alignItems: "center", color: "fg.muted", flexShrink: 0, transition: "transform 0.15s ease", transform: isOutputExpanded ? 'rotate(180deg)' : 'rotate(0deg)', children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: {
                                                         fontSize: 0,
                                                         fontWeight: 'semibold',
                                                         flexShrink: 0,
@@ -86,7 +42,7 @@ export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
                                                         color: 'fg.muted',
                                                         minWidth: 0,
                                                         flex: 1,
-                                                    }, children: outputText })] }) }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: outputText }) }) })] }) }), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1, flexShrink: 0 }, title: "Download output markdown", "aria-label": "Download output markdown", onClick: () => {
+                                                    }, children: outputText })] }) }), _jsx(Box, { mt: 2, children: _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: outputText }) }) })] }) }), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1, flexShrink: 0 }, title: "Download output markdown", "aria-label": "Download output markdown", onClick: () => {
                                 const payload = createMarkdownDownloadPayload(outputText, `${runtimeId}-output`);
                                 downloadTextPayload(payload);
                             }, children: _jsx(DownloadIcon, { size: 12 }) })] }) }))] }));

package/lib/components/cards/ToolApprovalCard.js

@@ -43,32 +43,7 @@ export function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead,
         : approval.status === 'pending'
             ? ', review pending'
             : `, ${statusDescriptor}`;
-    return (_jsx(Box, { sx: {
-            p: 3,
-            borderRadius: 2,
-            border: '1px solid',
-            borderColor: isRead ? 'transparent' : 'accent.muted',
-            bg: isRead ? 'canvas.default' : 'accent.subtle',
-        }, children: _jsxs(Box, { sx: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'flex-start',
-                gap: 3,
-            }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 2,
-                                mb: 1,
-                                flexWrap: 'wrap',
-                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: approval.toolName }), _jsx(Label, { variant: statusConfig.variant, children: statusConfig.label }), _jsx(Label, { variant: riskConfig.variant, children: riskConfig.label }), !isRead && _jsx(Label, { variant: "accent", children: "Unread" })] }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: ["Requested by ", approval.requestedBy, ' ', formatRelativeTime(approval.requestedAt), reviewSummary] }), _jsx(Box, { sx: {
-                                mt: 2,
-                                width: '100%',
-                                p: 2,
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'border.muted',
-                                bg: 'canvas.subtle',
-                            }, children: _jsxs("details", { open: isDetailsExpanded, children: [_jsx("summary", { onClick: e => {
+    return (_jsx(Box, { p: 3, borderRadius: 2, border: "1px solid", borderColor: isRead ? 'transparent' : 'accent.muted', bg: isRead ? 'canvas.default' : 'accent.subtle', children: _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 3, children: [_jsxs(Box, { flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1, flexWrap: "wrap", children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: approval.toolName }), _jsx(Label, { variant: statusConfig.variant, children: statusConfig.label }), _jsx(Label, { variant: riskConfig.variant, children: riskConfig.label }), !isRead && _jsx(Label, { variant: "accent", children: "Unread" })] }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: ["Requested by ", approval.requestedBy, ' ', formatRelativeTime(approval.requestedAt), reviewSummary] }), _jsx(Box, { mt: 2, width: "100%", p: 2, borderRadius: 2, border: "1px solid", borderColor: "border.muted", bg: "canvas.subtle", children: _jsxs("details", { open: isDetailsExpanded, children: [_jsx("summary", { onClick: e => {
                                             e.preventDefault();
                                             setIsDetailsExpanded(prev => !prev);
                                         }, style: {
@@ -76,14 +51,6 @@ export function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead,
                                             display: 'flex',
                                             alignItems: 'center',
                                             minWidth: 0,
-                                        }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Box, { sx: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        color: 'fg.muted',
-                                                        transition: 'transform 0.15s ease',
-                                                        transform: isDetailsExpanded
-                                                            ? 'rotate(180deg)'
-                                                            : 'rotate(0deg)',
-                                                    }, children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "View details" })] }) }), _jsxs(Box, { sx: { mt: 2, display: 'grid', gap: 1 }, children: [_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Source:", ' '] }), _jsxs(Text, { as: "span", sx: detailValueSx, children: [approval.sourceName, " (", approval.sourceType, ")"] })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Request ID:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.id })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Requested at:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: new Date(approval.requestedAt).toLocaleString() })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Requested by:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.requestedBy })] }), approval.reviewedAt && (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Reviewed at:", ' '] }), _jsxs(Text, { as: "span", sx: detailValueSx, children: [new Date(approval.reviewedAt).toLocaleString(), " by", ' ', approval.reviewedBy || 'reviewer'] })] })), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Parameters:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: parameterCount })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Reason:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.reason || approval.toolDescription })] })] }), parameterCount > 0 && (_jsx(Box, { sx: { mt: 2, display: 'grid', gap: 1 }, children: Object.entries(approval.parameters || {}).map(([key, value]) => (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: [key, ":", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: String(value) })] }, key))) }))] }) })] }), approval.status === 'pending' && (_jsxs(Box, { sx: { display: 'flex', gap: 2, flexShrink: 0 }, children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckCircleIcon, onClick: () => onApprove?.(approval.id), children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: () => onReject?.(approval.id), children: "Reject" })] })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleRead?.(approval.id, isRead), sx: { p: 1 }, title: `Mark as ${isRead ? 'unread' : 'read'}`, "aria-label": `Mark as ${isRead ? 'unread' : 'read'}`, children: isRead ? _jsx(EyeClosedIcon, { size: 12 }) : _jsx(EyeIcon, { size: 12 }) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onDelete?.(approval.id), sx: { p: 1, color: 'danger.fg' }, title: "Delete", "aria-label": "Delete", children: _jsx(TrashIcon, { size: 12 }) })] })] }) }));
+                                        }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Box, { display: "flex", alignItems: "center", color: "fg.muted", transition: "transform 0.15s ease", transform: isDetailsExpanded ? 'rotate(180deg)' : 'rotate(0deg)', children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "View details" })] }) }), _jsxs(Box, { mt: 2, display: "grid", gap: 1, children: [_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Source:", ' '] }), _jsxs(Text, { as: "span", sx: detailValueSx, children: [approval.sourceName, " (", approval.sourceType, ")"] })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Request ID:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.id })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Requested at:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: new Date(approval.requestedAt).toLocaleString() })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Requested by:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.requestedBy })] }), approval.reviewedAt && (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Reviewed at:", ' '] }), _jsxs(Text, { as: "span", sx: detailValueSx, children: [new Date(approval.reviewedAt).toLocaleString(), " by", ' ', approval.reviewedBy || 'reviewer'] })] })), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Parameters:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: parameterCount })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Reason:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.reason || approval.toolDescription })] })] }), parameterCount > 0 && (_jsx(Box, { mt: 2, display: "grid", gap: 1, children: Object.entries(approval.parameters || {}).map(([key, value]) => (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: [key, ":", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: String(value) })] }, key))) }))] }) })] }), approval.status === 'pending' && (_jsxs(Box, { display: "flex", gap: 2, flexShrink: 0, children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckCircleIcon, onClick: () => onApprove?.(approval.id), children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: () => onReject?.(approval.id), children: "Reject" })] })), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleRead?.(approval.id, isRead), sx: { p: 1 }, title: `Mark as ${isRead ? 'unread' : 'read'}`, "aria-label": `Mark as ${isRead ? 'unread' : 'read'}`, children: isRead ? _jsx(EyeClosedIcon, { size: 12 }) : _jsx(EyeIcon, { size: 12 }) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onDelete?.(approval.id), sx: { p: 1, color: 'danger.fg' }, title: "Delete", "aria-label": "Delete", children: _jsx(TrashIcon, { size: 12 }) })] })] }) }));
 }
 export default ToolApprovalCard;

package/lib/components/code-sandboxes/CodeSandboxCellVariables.js

@@ -147,7 +147,7 @@ export function CodeSandboxCellVariables(props) {
             setWillSaveOutput(false);
         }
     }, [willSaveOutput]);
-    return (_jsxs(Box, { as: "form", sx: { p: 3 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-input-variables", children: trans.__('Inputs') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { as: TextInputWithTokens, tokens: inputsState.filter(item => item.selected), onTokenRemove: onTokenRemove, onChange: handleChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { addNewItem: filterVal &&
+    return (_jsxs(Box, { as: "form", p: 3, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-input-variables", children: trans.__('Inputs') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { as: TextInputWithTokens, tokens: inputsState.filter(item => item.selected), onTokenRemove: onTokenRemove, onChange: handleChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { addNewItem: filterVal &&
                                         !inputsState.find(localItem => localItem.text === filterVal)
                                         ? {
                                             id: filterVal,

package/lib/components/code-sandboxes/CodeSandboxEnvironmentSelect.js

@@ -1,5 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { ActionList, ActionMenu, Box, Label, Link, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, Label, Link, Text } from '@primer/react';
 /**
  * The labels of an option, on one line: cost, name, provider, where.
  *
@@ -9,12 +10,7 @@ import { ActionList, ActionMenu, Box, Label, Link, Text } from '@primer/react';
  */
 function OptionLabels(props) {
     const { option } = props;
-    return (_jsxs(Box, { as: "span", sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            whiteSpace: 'nowrap',
-        }, children: [option.burningRate ? (_jsxs(Label, { size: "small", variant: "sponsors", children: [option.burningRate, " credits/second"] })) : null, option.gpu ? (_jsx(Label, { size: "small", variant: "success", children: "GPU" })) : null, option.version ? (_jsx(Label, { size: "small", variant: "secondary", children: option.version })) : null, option.sizeClass ? (_jsx(Label, { size: "small", variant: "secondary", children: option.sizeClass })) : null, option.name ? _jsx(Label, { size: "small", children: option.name }) : null, option.providerTitle ? (_jsx(Label, { size: "small", variant: "accent", children: option.providerTitle })) : null, option.location ? (_jsx(Label, { size: "small", variant: "secondary", children: option.location })) : null] }));
+    return (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1, whiteSpace: "nowrap", children: [option.burningRate ? (_jsxs(Label, { size: "small", variant: "sponsors", children: [option.burningRate, " credits/second"] })) : null, option.gpu ? (_jsx(Label, { size: "small", variant: "success", children: "GPU" })) : null, option.version ? (_jsx(Label, { size: "small", variant: "secondary", children: option.version })) : null, option.sizeClass ? (_jsx(Label, { size: "small", variant: "secondary", children: option.sizeClass })) : null, option.name ? _jsx(Label, { size: "small", children: option.name }) : null, option.providerTitle ? (_jsx(Label, { size: "small", variant: "accent", children: option.providerTitle })) : null, option.location ? (_jsx(Label, { size: "small", variant: "secondary", children: option.location })) : null] }));
 }
 export function CodeSandboxEnvironmentSelect(props) {
     const { disabled, onSelect, options, overlayWidth = 'xlarge', placeholder = 'Select an environment', selectedKey, } = props;
@@ -68,13 +64,7 @@ export function CodeSandboxEnvironmentSelect(props) {
                         gridTemplateColumns: 'min-content minmax(0, 1fr) min-content',
                     },
                     '& [data-component="text"]': { width: '100%', textAlign: 'left' },
-                }, children: selected ? (_jsxs(Box, { as: "span", sx: {
-                        display: 'flex',
-                        width: '100%',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 2,
-                    }, children: [_jsx(Text, { children: selected.title }), _jsx(OptionLabels, { option: selected })] })) : (placeholder) }), _jsx(ActionMenu.Overlay, { width: overlayWidth, children: _jsx(ActionList, { selectionVariant: "single", children: grouped
+                }, children: selected ? (_jsxs(Box, { as: "span", display: "flex", width: "100%", alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { children: selected.title }), _jsx(OptionLabels, { option: selected })] })) : (placeholder) }), _jsx(ActionMenu.Overlay, { width: overlayWidth, children: _jsx(ActionList, { selectionVariant: "single", children: grouped
                         ? groups.map(group => (_jsxs(ActionList.Group, { children: [group ? (_jsx(ActionList.GroupHeading, { children: group })) : null, rows(priceFirst(ordered.filter(option => (option.group ?? '') === group)))] }, group || 'ungrouped')))
                         : rows(ordered) }) })] }));
 }

package/lib/components/code-sandboxes/CodeSandboxPicker.js

@@ -129,26 +129,21 @@ export function CodeSandboxPicker(props) {
         // then lists only environments to start, so it needs no group heading
         // of its own ("Assign a new Code Sandbox" already labels the control).
         .map(option => ({ ...option, group: undefined })), [dropdownDescs, dropdownOptions]);
-    const radioSections = (entries) => (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: entries.map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", sx: {
-                        /*
-                         * The type of a form label, not of a heading.
-                         *
-                         * "Assign an existing Code Sandbox" and "Assign a
-                         * new Code Sandbox" name the two ways of answering
-                         * one question, and the second is the label of the
-                         * dropdown; set in the larger, heavier type of an
-                         * `h4`, the first read as a section above it rather
-                         * than as its pair. The values are the ones Primer
-                         * gives `FormControl.Label` — taken as the variables
-                         * it resolves rather than through the Primer scale,
-                         * whose `semibold` the JupyterLab theme redefines.
-                         */
-                        margin: 0,
-                        marginBottom: 2,
-                        color: 'fg.default',
-                        fontSize: 'var(--text-body-size-medium, 0.875rem)',
-                        fontWeight: 'var(--base-text-weight-semibold, 600)',
-                    }, children: group }), runtimeDescs.map(k => {
+    const radioSections = (entries) => (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: entries.map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", 
+                    /*
+                     * The type of a form label, not of a heading.
+                     *
+                     * "Assign an existing Code Sandbox" and "Assign a
+                     * new Code Sandbox" name the two ways of answering
+                     * one question, and the second is the label of the
+                     * dropdown; set in the larger, heavier type of an
+                     * `h4`, the first read as a section above it rather
+                     * than as its pair. The values are the ones Primer
+                     * gives `FormControl.Label` — taken as the variables
+                     * it resolves rather than through the Primer scale,
+                     * whose `semibold` the JupyterLab theme redefines.
+                     */
+                    margin: 0, marginBottom: 2, color: "fg.default", fontSize: "var(--text-body-size-medium, 0.875rem)", fontWeight: "var(--base-text-weight-semibold, 600)", children: group }), runtimeDescs.map(k => {
                     const choiceKey = codeSandboxDescKey(k);
                     const displayId = codeSandboxDisplayId(k);
                     return (
@@ -157,7 +152,7 @@ export function CodeSandboxPicker(props) {
                     // by where it runs and what it runs.
                     _jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: choiceKey, onChange: () => {
                                             setRuntimeDesc(k);
-                                        }, checked: isSameCodeSandbox(k, runtimeDesc) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", sx: { alignItems: 'baseline' }, children: [_jsx(Box, { children: k.displayName }), displayId && (_jsx(Text, { sx: {
+                                        }, checked: isSameCodeSandbox(k, runtimeDesc) }), _jsx(FormControl.Label, { children: _jsxs(Box, { display: "flex", alignItems: "baseline", children: [_jsx(Box, { children: k.displayName }), displayId && (_jsx(Text, { sx: {
                                                         ml: 2,
                                                         fontSize: 0,
                                                         color: 'fg.muted',

package/lib/components/code-sandboxes/CodeSandboxVariables.js

@@ -147,10 +147,10 @@ export function CodeSandboxVariables(props) {
             },
         },
     ];
-    return (_jsxs(Box, { className: className, sx: { paddingTop: '10px' }, children: [_jsxs(FormControl, { layout: "horizontal", children: [_jsx(FormControl.Label, { children: trans.__('Transfer variables') }), _jsx(ToggleSwitch, { checked: transferVariables, size: "small", onClick: e => {
+    return (_jsxs(Box, { className: className, paddingTop: "10px", children: [_jsxs(FormControl, { layout: "horizontal", children: [_jsx(FormControl.Label, { children: trans.__('Transfer variables') }), _jsx(ToggleSwitch, { checked: transferVariables, size: "small", onClick: e => {
                             e.preventDefault();
                             setTransferVariable(!transferVariables);
                         }, "aria-labelledby": "kernel-toggle-variables" })] }), transferVariables && (_jsxs(Table.Container, { sx: { flex: '1 1 auto', marginTop: 3 }, children: [_jsx(Table.Subtitle, { as: "p", id: "dla-kernel-variables-subtitle", children: trans.__('The list of transferable runtime variables.') }), kernelVariables ? (Object.keys(kernelVariables ?? {}).length ? (_jsx(DataTable, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", data: Object.entries(kernelVariables ?? {})
                             .map(([name, type], id) => ({ id, name, type }))
-                            .sort((a, b) => (a.name > b.name ? 1 : -1)), columns: columns, cellPadding: "condensed" })) : (_jsx(Box, { sx: { gridArea: 'table' }, children: _jsx(Blankslate, { border: true, children: _jsx(Blankslate.Heading, { children: trans.__('No eligible variables.') }) }) }))) : (_jsx(Table.Skeleton, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", columns: columns, rows: 5 }))] }))] }));
+                            .sort((a, b) => (a.name > b.name ? 1 : -1)), columns: columns, cellPadding: "condensed" })) : (_jsx(Box, { gridArea: "table", children: _jsx(Blankslate, { border: true, children: _jsx(Blankslate.Heading, { children: trans.__('No eligible variables.') }) }) }))) : (_jsx(Table.Skeleton, { "aria-labelledby": "dla-kernel-variables", "aria-describedby": "dla-kernel-variables-subtitle", columns: columns, rows: 5 }))] }))] }));
 }

package/lib/components/scheduler/ScheduleMenu.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect, useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Button, Dialog, FormControl, IconButton, Spinner, Text, TextInput, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, Button, Dialog, FormControl, IconButton, Spinner, Text, TextInput, } from '@primer/react';
 import { ClockIcon, TrashIcon } from '@primer/octicons-react';
 import { disableSchedule, updateSchedule, upsertSchedule, } from '../../api/scheduler/schedules';
 import { DEFAULT_SERVICE_URLS } from '@datalayer/core/lib/api/constants';
@@ -130,23 +131,17 @@ export const ScheduleMenu = ({ notebookUid, scheduleUid, token, baseUrl = DEFAUL
                                 ? `${ariaLabel} (saving…)`
                                 : isEnabled
                                     ? ariaLabel
-                                    : `${ariaLabel} (disabled)` }) }), _jsxs(ActionMenu.Overlay, { width: "medium", sx: { minWidth: 300 }, children: [_jsx(Box, { sx: {
-                                    px: 3,
-                                    pt: 3,
-                                    pb: 2,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: _jsx(Text, { as: "p", sx: { fontWeight: 600 }, children: "Schedule" }) }), _jsx(ActionList, { selectionVariant: "single", showDividers: true, children: SCHEDULE_PRESETS.map(option => (_jsxs(ActionList.Item, { selected: preset === option.id, disabled: !isEnabled, onSelect: () => selectPreset(option.id), children: [option.label, _jsx(ActionList.Description, { variant: "block", children: option.cron })] }, option.id))) }), _jsxs(Box, { sx: { p: 3, borderTop: '1px solid', borderColor: 'border.default' }, children: [_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: "Cron Expression" }), _jsx(TextInput, { value: cronExpression, onChange: event => {
+                                    : `${ariaLabel} (disabled)` }) }), _jsxs(ActionMenu.Overlay, { width: "medium", sx: { minWidth: 300 }, children: [_jsx(Box, { px: 3, pt: 3, pb: 2, borderBottom: "1px solid", borderColor: "border.default", children: _jsx(Text, { as: "p", sx: { fontWeight: 600 }, children: "Schedule" }) }), _jsx(ActionList, { selectionVariant: "single", showDividers: true, children: SCHEDULE_PRESETS.map(option => (_jsxs(ActionList.Item, { selected: preset === option.id, disabled: !isEnabled, onSelect: () => selectPreset(option.id), children: [option.label, _jsx(ActionList.Description, { variant: "block", children: option.cron })] }, option.id))) }), _jsxs(Box, { p: 3, borderTop: "1px solid", borderColor: "border.default", children: [_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: "Cron Expression" }), _jsx(TextInput, { value: cronExpression, onChange: event => {
                                             const value = event.currentTarget.value;
                                             setHasExplicitCron(value.trim().length > 0);
                                             setCronExpression(value);
-                                        }, placeholder: "* * * * *", "aria-label": "Cron expression", block: true, disabled: !isEnabled }), _jsxs(Box, { sx: { mt: 2, display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { size: "small", onClick: applyCustomCron, disabled: !isEnabled, children: "Apply Cron" }), scheduleUid ? (_jsx(Button, { size: "small", variant: "danger", leadingVisual: TrashIcon, onClick: () => setIsDeleteDialogOpen(true), disabled: !isEnabled, children: "Delete Schedule" })) : null] }), _jsxs(Text, { as: "p", sx: { mt: 2, fontSize: 0, color: 'fg.muted' }, children: ["Current: ", selectedPresetDescription] })] })] })] }), isDeleteDialogOpen && scheduleUid ? (_jsx(Dialog, { title: "Delete schedule", onClose: () => {
+                                        }, placeholder: "* * * * *", "aria-label": "Cron expression", block: true, disabled: !isEnabled }), _jsxs(Box, { mt: 2, display: "flex", gap: 2, flexWrap: "wrap", children: [_jsx(Button, { size: "small", onClick: applyCustomCron, disabled: !isEnabled, children: "Apply Cron" }), scheduleUid ? (_jsx(Button, { size: "small", variant: "danger", leadingVisual: TrashIcon, onClick: () => setIsDeleteDialogOpen(true), disabled: !isEnabled, children: "Delete Schedule" })) : null] }), _jsxs(Text, { as: "p", sx: { mt: 2, fontSize: 0, color: 'fg.muted' }, children: ["Current: ", selectedPresetDescription] })] })] })] }), isDeleteDialogOpen && scheduleUid ? (_jsx(Dialog, { title: "Delete schedule", onClose: () => {
                     if (isDeleting) {
                         return;
                     }
                     setIsDeleteDialogOpen(false);
                     setDeleteConfirmUid('');
-                }, width: "medium", children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(Text, { children: ["This action will disable the schedule and remove planned runs. Type", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 700 }, children: scheduleUid }), ' ', "to confirm."] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Schedule UID" }), _jsx(TextInput, { value: deleteConfirmUid, onChange: event => setDeleteConfirmUid(event.currentTarget.value), placeholder: scheduleUid, autoFocus: true })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [_jsx(Button, { variant: "default", onClick: () => {
+                }, width: "medium", children: _jsxs(Box, { display: "grid", gap: 3, children: [_jsxs(Text, { children: ["This action will disable the schedule and remove planned runs. Type", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 700 }, children: scheduleUid }), ' ', "to confirm."] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Schedule UID" }), _jsx(TextInput, { value: deleteConfirmUid, onChange: event => setDeleteConfirmUid(event.currentTarget.value), placeholder: scheduleUid, autoFocus: true })] }), _jsxs(Box, { display: "flex", justifyContent: "flex-end", gap: 2, children: [_jsx(Button, { variant: "default", onClick: () => {
                                         setIsDeleteDialogOpen(false);
                                         setDeleteConfirmUid('');
                                     }, disabled: isDeleting, children: "Cancel" }), _jsx(Button, { variant: "danger", onClick: () => void performDeleteSchedule(), disabled: isDeleting || deleteConfirmUid !== scheduleUid, children: "Delete schedule" })] })] }) })) : null] }));

package/lib/components/specs/SpecPayloadPreview.js

@@ -72,31 +72,6 @@ export function SpecPayloadPreview({ spec, onClose, title = 'Spec Payload Previe
         document.addEventListener('keydown', onKeyDown);
         return () => document.removeEventListener('keydown', onKeyDown);
     }, [onClose]);
-    return (_jsxs(Box, { role: "dialog", "aria-label": title, "aria-modal": "true", sx: {
-            position: 'fixed',
-            inset: 24,
-            zIndex: 300,
-            bg: 'canvas.default',
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 1,
-            boxShadow: 'shadow.large',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: title }), _jsx(IconButton, { icon: XIcon, "aria-label": "Close spec preview", size: "small", variant: "invisible", onClick: onClose })] }), _jsx(Box, { sx: { p: 3, overflow: 'auto', flex: 1 }, children: _jsx(Box, { as: "pre", sx: {
-                        m: 0,
-                        whiteSpace: 'pre',
-                        fontFamily: 'monospace',
-                        fontSize: 0,
-                        lineHeight: '20px',
-                    }, children: specToYaml(spec) }) })] }));
+    return (_jsxs(Box, { role: "dialog", "aria-label": title, "aria-modal": "true", position: "fixed", inset: 24, zIndex: 300, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 1, boxShadow: "shadow.large", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: title }), _jsx(IconButton, { icon: XIcon, "aria-label": "Close spec preview", size: "small", variant: "invisible", onClick: onClose })] }), _jsx(Box, { p: 3, overflow: "auto", flex: 1, children: _jsx(Box, { as: "pre", m: 0, whiteSpace: "pre", fontFamily: "monospace", fontSize: 0, lineHeight: "20px", children: specToYaml(spec) }) })] }));
 }
 export default SpecPayloadPreview;