@datalayer/agent-runtimes 1.3.89 → 1.3.91

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

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

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

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

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/a2ui/styles.js

@@ -36,21 +36,32 @@ export const A2UI_RENDER_SCOPE_SX = {
     '& .a2ui-caption': {
         color: 'var(--a2ui-text-caption-color, var(--a2ui-color-on-surface, #656d76))',
     },
+    /*
+     * A button is the theme's filled button (STUDIO P-04, T-30): its fill and
+     * its label are Primer's primary-button properties, which every theme and
+     * an application's accent set together (`themeAccentVars`), so the label
+     * is always the accent's own text on it. The label is a Text inside the
+     * button, which the `.a2ui-text` rule above paints in the surface's ink —
+     * a dark label on Spatial's dark accent — so it inherits the button's.
+     */
     '& .a2ui-button': {
         appearance: 'none',
         cursor: 'pointer',
-        border: '1px solid var(--a2ui-color-primary, #1f883d)',
-        background: 'var(--a2ui-color-primary, #1f883d)',
-        color: 'var(--a2ui-color-on-primary, #ffffff)',
+        border: '1px solid var(--button-primary-bgColor-rest)',
+        background: 'var(--button-primary-bgColor-rest)',
+        color: 'var(--button-primary-fgColor-rest)',
         borderRadius: 'var(--a2ui-button-border-radius, 6px)',
         padding: 'var(--a2ui-button-padding, 5px 16px)',
         fontWeight: 'var(--a2ui-button-font-weight, 500)',
         boxShadow: 'var(--a2ui-button-box-shadow, none)',
         transition: 'background-color 0.15s ease, border-color 0.15s ease',
     },
+    '& .a2ui-button .a2ui-text': {
+        color: 'inherit',
+    },
     '& .a2ui-button:hover': {
-        background: 'var(--a2ui-color-primary-hover, #1a7f37)',
-        borderColor: 'var(--a2ui-color-primary-hover, #1a7f37)',
+        background: 'var(--button-primary-bgColor-hover)',
+        borderColor: 'var(--button-primary-bgColor-hover)',
     },
     '& .a2ui-button:disabled': {
         opacity: 0.6,

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',