@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/chat/prompt/InputPromptLexical.js

@@ -268,54 +268,53 @@ function ReadOnlyPlugin({ readOnly }) {
 }
 export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, onHistory, autoFocus = false, focusSignal, mentionableAgents, promptCommands, }) {
     const chatText = useChatWords();
-    return (_jsx(Box, { sx: {
-            /*
-              The placeholder is positioned against this box.
-    
-              It is `position: absolute` and this was `static`, so it resolved
-              against whatever ancestor happened to be positioned — which put
-              "Type a message..." up in the header, nowhere near the box it
-              describes. A containing block is the whole fix.
-            */
-            position: 'relative',
-            px: 2,
-            // A little more above than the 2px it had: the text sat hard against
-            // the edge of the box, which reads as clipped rather than as tight.
-            // Still less than below, where the footer's own padding follows.
-            pt: '6px',
-            pb: 1,
-            /*
-             * Greyed while it cannot be typed in.
-             *
-             * `contenteditable=false` stops the caret and nothing else — the text
-             * kept the same weight and colour as a live prompt, so a person had to
-             * try typing to discover the box was inert. The colour is set on the
-             * container and inherited, because the editable element deliberately
-             * declares no colour of its own.
-             */
-            color: disabled || readOnly ? 'fg.subtle' : undefined,
-            cursor: disabled || readOnly ? 'not-allowed' : undefined,
+    return (_jsx(Box
+    /*
+        The placeholder is positioned against this box.
+
+        It is `position: absolute` and this was `static`, so it resolved
+        against whatever ancestor happened to be positioned — which put
+        "Type a message..." up in the header, nowhere near the box it
+        describes. A containing block is the whole fix.
+      */
+    , { 
+        /*
+            The placeholder is positioned against this box.
+  
+            It is `position: absolute` and this was `static`, so it resolved
+            against whatever ancestor happened to be positioned — which put
+            "Type a message..." up in the header, nowhere near the box it
+            describes. A containing block is the whole fix.
+          */
+        position: "relative", px: 2, 
+        // A little more above than the 2px it had: the text sat hard against
+        // the edge of the box, which reads as clipped rather than as tight.
+        // Still less than below, where the footer's own padding follows.
+        pt: "6px", pb: 1, 
+        /*
+         * Greyed while it cannot be typed in.
+         *
+         * `contenteditable=false` stops the caret and nothing else — the text
+         * kept the same weight and colour as a live prompt, so a person had to
+         * try typing to discover the box was inert. The colour is set on the
+         * container and inherited, because the editable element deliberately
+         * declares no colour of its own.
+         */
+        color: disabled || readOnly ? 'fg.subtle' : undefined, cursor: disabled || readOnly ? 'not-allowed' : undefined, sx: {
             '& .input-prompt-lexical-p': {
                 margin: 0,
             },
-        }, children: _jsxs(LexicalExtensionComposer, { extension: EDITOR_EXTENSION, contentEditable: null, children: [_jsx(ContentEditable, { placeholder: _jsx(Box, { sx: {
-                            position: 'absolute',
-                            /*
-                              Level with the first line of typing.
-            
-                              Relative to the box above, which establishes the containing
-                              block. The editor's own `padding: 2px 0` sits inside this
-                              box's `pt: 2px`, so the caret's first line starts 4px down —
-                              matching it here is what stops the placeholder floating
-                              above the text it stands in for.
-                            */
-                            top: '8px',
-                            left: '8px',
-                            color: 'fg.subtle',
-                            fontSize: 1,
-                            pointerEvents: 'none',
-                            userSelect: 'none',
-                        }, children: placeholder }), "aria-placeholder": placeholder, className: "input-prompt-lexical-content", "aria-label": chatText.messageInput, style: {
+        }, children: _jsxs(LexicalExtensionComposer, { extension: EDITOR_EXTENSION, contentEditable: null, children: [_jsx(ContentEditable, { placeholder: _jsx(Box, { position: "absolute", 
+                        /*
+                            Level with the first line of typing.
+          
+                            Relative to the box above, which establishes the containing
+                            block. The editor's own `padding: 2px 0` sits inside this
+                            box's `pt: 2px`, so the caret's first line starts 4px down —
+                            matching it here is what stops the placeholder floating
+                            above the text it stands in for.
+                          */
+                        top: "8px", left: "8px", color: "fg.subtle", fontSize: 1, pointerEvents: "none", userSelect: "none", children: placeholder }), "aria-placeholder": placeholder, className: "input-prompt-lexical-content", "aria-label": chatText.messageInput, style: {
                         outline: 'none',
                         minHeight: 32,
                         maxHeight: 120,

package/lib/chat/prompt/InputPromptText.js

@@ -65,7 +65,7 @@ export function InputPromptText({ value, onChange, placeholder = 'Ask anything
             }
         }
     }, [onSubmit, onHistory]);
-    return (_jsx(Box, { sx: { px: 2, py: 1 }, children: _jsx(Textarea, { ref: inputRef, value: value, onChange: e => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly, sx: {
+    return (_jsx(Box, { px: 2, py: 1, children: _jsx(Textarea, { ref: inputRef, value: value, onChange: e => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly, sx: {
                 width: '100%',
                 resize: 'none',
                 // Greyed while it cannot be typed in, so the state is legible

package/lib/chat/prompt/footer/InPromptFooter.js

@@ -6,13 +6,6 @@ import { PromptStacks } from '../stack';
 import { useChatWords } from '../../ChatLanguage';
 export function InPromptFooter({ stacks, children, rightContent, isLoading = false, sendDisabled = false, isKernelBusy = false, onSend, onStop, }) {
     const chatText = useChatWords();
-    return (_jsxs(_Fragment, { children: [stacks && stacks.length > 0 ? _jsx(PromptStacks, { stacks: stacks }) : null, _jsxs(Box, { "data-prompt-stack": "controls", sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 2,
-                    pt: 1,
-                    pb: 2,
-                }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": chatText.stop, "data-prompt-action": "stop", onClick: onStop, size: "small", variant: "invisible" })) : isKernelBusy ? (_jsx(IconButton, { icon: PauseIcon, "aria-label": chatText.pauseKernelBusy, onClick: onStop, size: "small", variant: "invisible", disabled: !onStop })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": chatText.send, onClick: onSend, disabled: sendDisabled, size: "small", variant: "invisible" }))] })] })] }));
+    return (_jsxs(_Fragment, { children: [stacks && stacks.length > 0 ? _jsx(PromptStacks, { stacks: stacks }) : null, _jsxs(Box, { "data-prompt-stack": "controls", display: "flex", alignItems: "center", gap: 2, px: 2, pt: 1, pb: 2, children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, flex: 1, children: children }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": chatText.stop, "data-prompt-action": "stop", onClick: onStop, size: "small", variant: "invisible" })) : isKernelBusy ? (_jsx(IconButton, { icon: PauseIcon, "aria-label": chatText.pauseKernelBusy, onClick: onStop, size: "small", variant: "invisible", disabled: !onStop })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": chatText.send, onClick: onSend, disabled: sendDisabled, size: "small", variant: "invisible" }))] })] })] }));
 }
 export default InPromptFooter;

package/lib/chat/prompt/menus/AgentsMenu.js

@@ -28,7 +28,7 @@ export function AgentsMenu({ agents, selectedAgentId, onSelectAgent, }) {
         active ? `Agent — ${active.name}` : 'Choose an agent',
         `${agents.length} available`,
     ].join(' · ');
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: label, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": label, leadingVisual: ActiveIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: agents.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { width: 440, maxWidth: 'calc(100vw - 16px)' }, children: _jsx(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": "Agent", children: agents.map(agent => (_jsxs(ActionList.Item, { selected: agent.id === selectedAgentId, onSelect: () => onSelectAgent?.(agent.id), children: [_jsx(ActionList.LeadingVisual, { children: agent.icon ? _jsx(agent.icon, {}) : _jsx(AiAgentIcon, {}) }), agent.name, agent.description ? (_jsx(ActionList.Description, { variant: "block", 
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: label, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": label, leadingVisual: ActiveIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: agents.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { width: 440, maxWidth: "calc(100vw - 16px)", children: _jsx(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": "Agent", children: agents.map(agent => (_jsxs(ActionList.Item, { selected: agent.id === selectedAgentId, onSelect: () => onSelectAgent?.(agent.id), children: [_jsx(ActionList.LeadingVisual, { children: agent.icon ? _jsx(agent.icon, {}) : _jsx(AiAgentIcon, {}) }), agent.name, agent.description ? (_jsx(ActionList.Description, { variant: "block", 
                                     /* `minWidth: 0` is the load-bearing one: a grid item
                                        defaults to `min-content`, so without it the description
                                        refuses to be narrower than its longest unbroken run and

package/lib/chat/prompt/menus/InlineAgentsMenu.js

@@ -9,7 +9,7 @@ export function InlineAgentsMenu({ agents, selectedAgentId, onSelectAgent, }) {
         active ? `Answering: ${active.name}` : 'Choose an agent',
         `${agents.length} available`,
     ].join(' · ');
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: label, direction: "s", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": label, leadingVisual: ActiveIcon, sx: { px: 1, color: 'fg.muted' }, children: _jsx(Text, { sx: { fontSize: 0 }, children: agents.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-bottom", align: "start", width: "large", children: _jsx(Box, { sx: { width: 440, maxWidth: 'calc(100vw - 16px)' }, children: _jsx(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": "Agent", children: agents.map(agent => (_jsxs(ActionList.Item, { selected: agent.id === selectedAgentId, onSelect: () => onSelectAgent?.(agent.id), children: [_jsx(ActionList.LeadingVisual, { children: agent.icon ? _jsx(agent.icon, {}) : _jsx(AiAgentIcon, {}) }), agent.name, agent.description ? (_jsx(ActionList.Description, { variant: "block", 
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: label, direction: "s", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": label, leadingVisual: ActiveIcon, sx: { px: 1, color: 'fg.muted' }, children: _jsx(Text, { sx: { fontSize: 0 }, children: agents.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-bottom", align: "start", width: "large", children: _jsx(Box, { width: 440, maxWidth: "calc(100vw - 16px)", children: _jsx(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": "Agent", children: agents.map(agent => (_jsxs(ActionList.Item, { selected: agent.id === selectedAgentId, onSelect: () => onSelectAgent?.(agent.id), children: [_jsx(ActionList.LeadingVisual, { children: agent.icon ? _jsx(agent.icon, {}) : _jsx(AiAgentIcon, {}) }), agent.name, agent.description ? (_jsx(ActionList.Description, { variant: "block", 
                                     /* `minWidth: 0` is the load-bearing one: a grid item
                                        defaults to `min-content`, so without it the description
                                        refuses to be narrower than its longest unbroken run and

package/lib/chat/prompt/menus/ModelSelector.js

@@ -34,11 +34,7 @@ export function ModelSelector({ models, decisions, selectedModel, onModelSelect,
     const summary = isA2AProtocol
         ? 'set by the agent config'
         : `${active?.name ?? 'none selected'} · ${models.length} to choose from`;
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'flex-end',
-        }, children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Model — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Model — ${summary}`, leadingVisual: AiModelIcon, disabled: isA2AProtocol, sx: isA2AProtocol
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "flex-end", children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Model — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Model — ${summary}`, leadingVisual: AiModelIcon, disabled: isA2AProtocol, sx: isA2AProtocol
                                     ? { opacity: 0.5, cursor: 'not-allowed' }
                                     : undefined, children: _jsx(Text, { sx: { fontSize: 0 }, children: models.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "end", children: _jsxs(ActionList, { selectionVariant: "single", children: [models.map(modelItem => (_jsxs(ActionList.Item, { selected: selectedModel === modelItem.id, onSelect: () => onModelSelect(modelItem.id), disabled: modelItem.isAvailable === false || isA2AProtocol, sx: modelItem.isAvailable === false
                                         ? { color: 'fg.muted' }

package/lib/chat/prompt/menus/SkillsMenu.js

@@ -20,28 +20,11 @@ export function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill
         : skills.length === 0
             ? 'none loaded'
             : `${enabledSkills.size} of ${skills.length} enabled`;
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Skills — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Skills — ${summary}`, leadingVisual: BriefcaseIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: skills.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsx(ActionList, { children: skillsLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading skills..." }) })) : skills.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                        px: 3,
-                                        py: 2,
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.muted',
-                                    }, children: [_jsxs(Text, { id: "toggle-all-skills", sx: {
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Skills — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Skills — ${summary}`, leadingVisual: BriefcaseIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: skills.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { maxHeight: "60vh", overflowY: "auto", children: _jsx(ActionList, { children: skillsLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading skills..." }) })) : skills.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", children: [_jsxs(Text, { id: "toggle-all-skills", sx: {
                                                 fontSize: 0,
                                                 fontWeight: 'semibold',
                                                 color: 'fg.muted',
-                                            }, children: ["Enable all (", enabledSkills.size, "/", skills.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.size === skills.length, onClick: () => onToggleAllSkills(skills.map(s => s.id), enabledSkills.size !== skills.length), "aria-labelledby": "toggle-all-skills" })] }), skills.map(skill => (_jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                        px: 3,
-                                        py: 2,
-                                        '&:hover': {
-                                            backgroundColor: 'canvas.subtle',
-                                        },
-                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [hasMark(marksOfSkill(skill.id)) && (_jsx(SpecMark, { ...marksOfSkill(skill.id), size: 16 })), _jsx(Text, { id: `toggle-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.status && (_jsx(Text, { sx: {
+                                            }, children: ["Enable all (", enabledSkills.size, "/", skills.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.size === skills.length, onClick: () => onToggleAllSkills(skills.map(s => s.id), enabledSkills.size !== skills.length), "aria-labelledby": "toggle-all-skills" })] }), skills.map(skill => (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 2, hover: { backgroundColor: 'canvas.subtle' }, children: [_jsxs(Box, { flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [hasMark(marksOfSkill(skill.id)) && (_jsx(SpecMark, { ...marksOfSkill(skill.id), size: 16 })), _jsx(Text, { id: `toggle-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.status && (_jsx(Text, { sx: {
                                                                 fontSize: '10px',
                                                                 px: 1,
                                                                 borderRadius: 2,
@@ -62,15 +45,5 @@ export function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill
                                                         overflow: 'hidden',
                                                         textOverflow: 'ellipsis',
                                                         whiteSpace: 'nowrap',
-                                                    }, children: skill.description }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        alignItems: 'center',
-                                                        gap: '2px',
-                                                    }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Enabled" }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.has(skill.id), onClick: () => onToggleSkill(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] }), _jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        alignItems: 'center',
-                                                        gap: '2px',
-                                                    }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Approved" }), _jsx(ToggleSwitch, { size: "small", checked: approvedSkills.has(skill.id), onClick: () => onToggleSkillApproval(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] })] })] }, skill.id)))] })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No skills available" }) })) }) }) })] }));
+                                                    }, children: skill.description }))] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, children: [_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px", children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Enabled" }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.has(skill.id), onClick: () => onToggleSkill(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] }), _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px", children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Approved" }), _jsx(ToggleSwitch, { size: "small", checked: approvedSkills.has(skill.id), onClick: () => onToggleSkillApproval(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] })] })] }, skill.id)))] })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No skills available" }) })) }) }) })] }));
 }

package/lib/chat/prompt/menus/SuggestionsMenu.js

@@ -22,7 +22,7 @@ import { LightBulbIcon } from '@primer/octicons-react';
 import { groupSuggestions } from '../../display/groupSuggestions';
 export function SuggestionsMenu({ suggestions, onPick, }) {
     const summary = suggestions.length === 0 ? 'none' : `${suggestions.length} to choose from`;
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Suggestions — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Suggestions — ${summary}`, leadingVisual: LightBulbIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: suggestions.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsx(ActionList, { children: suggestions.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "This agent offers no suggestions." }) })) : (
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Suggestions — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Suggestions — ${summary}`, leadingVisual: LightBulbIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: suggestions.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { maxHeight: "60vh", overflowY: "auto", children: _jsx(ActionList, { children: suggestions.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "This agent offers no suggestions." }) })) : (
                         // In blocks: the team's openers, then the addressed member's
                         // own under its name — the same shape the empty state draws.
                         // No `as` on the heading: inside a menu Primer refuses one.

package/lib/chat/prompt/menus/ToolsMenu.js

@@ -39,16 +39,7 @@ export function ToolsMenu({ codemodeEnabled, onToggleCodemode, mcpServers, enabl
         .join(' · ');
     return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Tools — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Tools — ${summary}`, leadingVisual: ToolsIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: availableTools.length +
                                 availableFrontendTools.length +
-                                enabledMcpToolCount }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsxs(ActionList, { children: [_jsx(ActionList.Group, { title: "Codemode", children: _jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                        px: 3,
-                                        py: 2,
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.muted',
-                                        gap: 2,
-                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: "toggle-codemode", sx: { fontWeight: 'semibold', display: 'block' }, children: "Enable Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: codemodeEnabled
+                                enabledMcpToolCount }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { maxHeight: "60vh", overflowY: "auto", children: _jsxs(ActionList, { children: [_jsx(ActionList.Group, { title: "Codemode", children: _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", gap: 2, children: [_jsxs(Box, { flex: 1, minWidth: 0, children: [_jsx(Text, { id: "toggle-codemode", sx: { fontWeight: 'semibold', display: 'block' }, children: "Enable Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: codemodeEnabled
                                                         ? 'MCP tools accessible via meta-tools (search_tools, execute_code).'
                                                         : 'Expose MCP tools directly to the model.' })] }), _jsx(ToggleSwitch, { size: "small", checked: codemodeEnabled, disabled: !onToggleCodemode, onClick: () => {
                                                 if (onToggleCodemode) {
@@ -61,19 +52,7 @@ export function ToolsMenu({ codemodeEnabled, onToggleCodemode, mcpServers, enabl
                                 const allEnabled = enabledCount === allToolNames.length &&
                                     allToolNames.length > 0;
                                 const serverMarks = marksOfMcpServer(server);
-                                return (_jsxs(ActionList.Group, { title: `${server.name}${server.isAvailable ? '' : ' (unavailable)'}`, children: [server.isAvailable && server.tools.length > 0 && (_jsxs(Box, { sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'space-between',
-                                                px: 3,
-                                                py: 2,
-                                                borderBottom: '1px solid',
-                                                borderColor: 'border.muted',
-                                            }, children: [_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        gap: 2,
-                                                    }, children: [hasMark(serverMarks) && (_jsx(SpecMark, { icon: serverMarks.icon, emoji: serverMarks.emoji, size: 16 })), _jsxs(Text, { id: `toggle-all-${server.id}`, sx: {
+                                return (_jsxs(ActionList.Group, { title: `${server.name}${server.isAvailable ? '' : ' (unavailable)'}`, children: [server.isAvailable && server.tools.length > 0 && (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [hasMark(serverMarks) && (_jsx(SpecMark, { icon: serverMarks.icon, emoji: serverMarks.emoji, size: 16 })), _jsxs(Text, { id: `toggle-all-${server.id}`, sx: {
                                                                 fontSize: 0,
                                                                 fontWeight: 'semibold',
                                                                 color: 'fg.muted',
@@ -83,37 +62,14 @@ export function ToolsMenu({ codemodeEnabled, onToggleCodemode, mcpServers, enabl
                                             // Tools default to NOT approved — user must explicitly
                                             // approve each one (matches the Skills approval UX).
                                             const isApproved = serverApproved?.has(tool.name) ?? false;
-                                            return (_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'space-between',
-                                                    px: 3,
-                                                    py: 2,
-                                                    '&:hover': {
-                                                        backgroundColor: 'canvas.subtle',
-                                                    },
-                                                }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: `toggle-tool-${server.id}-${tool.name}`, sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Text, { sx: {
+                                            return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 2, hover: { backgroundColor: 'canvas.subtle' }, children: [_jsxs(Box, { flex: 1, minWidth: 0, children: [_jsx(Text, { id: `toggle-tool-${server.id}-${tool.name}`, sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Text, { sx: {
                                                                     display: 'block',
                                                                     fontSize: 0,
                                                                     color: 'fg.muted',
                                                                     overflow: 'hidden',
                                                                     textOverflow: 'ellipsis',
                                                                     whiteSpace: 'nowrap',
-                                                                }, children: tool.description }))] }), _jsxs(Box, { sx: {
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            gap: 3,
-                                                        }, children: [_jsxs(Box, { sx: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'column',
-                                                                    alignItems: 'center',
-                                                                    gap: '2px',
-                                                                }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Enabled" }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => onToggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }), _jsxs(Box, { sx: {
-                                                                    display: 'flex',
-                                                                    flexDirection: 'column',
-                                                                    alignItems: 'center',
-                                                                    gap: '2px',
-                                                                }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Approved" }), _jsx(ToggleSwitch, { size: "small", checked: isApproved, onClick: () => onToggleMcpToolApproval(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] })] })] }, `${server.id}-${tool.name}`));
+                                                                }, children: tool.description }))] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, children: [_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px", children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Enabled" }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => onToggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }), _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "2px", children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Approved" }), _jsx(ToggleSwitch, { size: "small", checked: isApproved, onClick: () => onToggleMcpToolApproval(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] })] })] }, `${server.id}-${tool.name}`));
                                         })) : server.isAvailable ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No tools discovered" }) })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "Server unavailable" }) }))] }, server.id));
                             })) : (_jsx(ActionList.Group, { title: "No MCP Servers", children: _jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No MCP Servers" }) }) }))] }) }) })] }));
 }

package/lib/chat/prompt/plugins/AgentMentionPlugin.js

@@ -256,14 +256,7 @@ export function AgentMentionPlugin({ agents, }) {
     if (!open || !query?.rect) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: anchorRef, sx: {
-                    position: 'fixed',
-                    left: query.rect.left,
-                    top: query.rect.top,
-                    width: 1,
-                    height: query.rect.height || 16,
-                    pointerEvents: 'none',
-                } }), _jsx(Overlay, { returnFocusRef: anchorRef, onEscape: () => setQuery(null), onClickOutside: () => setQuery(null), anchorSide: "outside-top", 
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: anchorRef, position: "fixed", left: query.rect.left, top: query.rect.top, width: 1, height: query.rect.height || 16, pointerEvents: "none" }), _jsx(Overlay, { returnFocusRef: anchorRef, onEscape: () => setQuery(null), onClickOutside: () => setQuery(null), anchorSide: "outside-top", 
                 // The caret already has focus and must keep it: a person is still
                 // typing, and the menu is a suggestion rather than a destination.
                 preventFocusOnOpen: true, 
@@ -322,7 +315,7 @@ export function AgentMentionPlugin({ agents, }) {
                     maxHeight: MENU_MAX_HEIGHT,
                     overflowY: 'auto',
                     maxWidth: 'calc(100vw - 16px)',
-                }, children: _jsx(Box, { sx: { width: '100%', maxWidth: MENU_WIDTH, minWidth: 0 }, children: _jsx(ActionList, { selectionVariant: "single", children: matches.map(agent => {
+                }, children: _jsx(Box, { width: "100%", maxWidth: MENU_WIDTH, minWidth: 0, children: _jsx(ActionList, { selectionVariant: "single", children: matches.map(agent => {
                             const index = choosable.indexOf(agent);
                             return (_jsxs(ActionList.Item, { ref: element => {
                                     if (element) {

package/lib/chat/prompt/plugins/CommandPlugin.js

@@ -245,14 +245,7 @@ export function CommandPlugin({ commands, }) {
     if (!open || !query?.rect) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: anchorRef, sx: {
-                    position: 'fixed',
-                    left: query.rect.left,
-                    top: query.rect.top,
-                    width: 1,
-                    height: query.rect.height || 16,
-                    pointerEvents: 'none',
-                } }), _jsx(Overlay, { returnFocusRef: anchorRef, onEscape: () => setQuery(null), onClickOutside: () => setQuery(null), anchorSide: "outside-top", 
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: anchorRef, position: "fixed", left: query.rect.left, top: query.rect.top, width: 1, height: query.rect.height || 16, pointerEvents: "none" }), _jsx(Overlay, { returnFocusRef: anchorRef, onEscape: () => setQuery(null), onClickOutside: () => setQuery(null), anchorSide: "outside-top", 
                 // The caret already has focus and must keep it: a person is still
                 // typing, and the menu is a suggestion rather than a destination.
                 preventFocusOnOpen: true, 
@@ -311,7 +304,7 @@ export function CommandPlugin({ commands, }) {
                     maxHeight: MENU_MAX_HEIGHT,
                     overflowY: 'auto',
                     maxWidth: 'calc(100vw - 16px)',
-                }, children: _jsx(Box, { sx: { width: '100%', maxWidth: MENU_WIDTH, minWidth: 0 }, children: _jsx(ActionList, { selectionVariant: "single", children: matches.map(command => {
+                }, children: _jsx(Box, { width: "100%", maxWidth: MENU_WIDTH, minWidth: 0, children: _jsx(ActionList, { selectionVariant: "single", children: matches.map(command => {
                             const index = choosable.indexOf(command);
                             return (_jsxs(ActionList.Item, { ref: element => {
                                     if (element) {

package/lib/chat/prompt/plugins/MentionChip.js

@@ -5,20 +5,6 @@ export function MentionChip({ name, icon: IconComponent, }) {
         // `contentEditable={false}` is what stops the caret entering it: without
         // it a person can put the cursor between the icon and the name and type
         // into a mention.
-        contentEditable: false, sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            px: 1,
-            py: '1px',
-            mx: '1px',
-            borderRadius: 6,
-            bg: 'accent.subtle',
-            color: 'accent.fg',
-            fontSize: 1,
-            lineHeight: 1.4,
-            whiteSpace: 'nowrap',
-            userSelect: 'none',
-        }, children: [IconComponent ? _jsx(IconComponent, { size: 12 }) : null, name] }));
+        contentEditable: false, display: "inline-flex", alignItems: "center", gap: 1, px: 1, py: "1px", mx: "1px", borderRadius: 6, bg: "accent.subtle", color: "accent.fg", fontSize: 1, lineHeight: 1.4, whiteSpace: "nowrap", userSelect: "none", children: [IconComponent ? _jsx(IconComponent, { size: 12 }) : null, name] }));
 }
 export default MentionChip;

package/lib/chat/prompt/stack.js

@@ -17,25 +17,7 @@ export function PromptStacks({ stacks, disabled = false, }) {
     }
     return (_jsx(_Fragment, { children: visible.map(stack => {
             const isDisabled = disabled || stack.disabled;
-            return (_jsx(Box, { "data-prompt-stack": stack.id, "aria-disabled": isDisabled || undefined, sx: {
-                    ...(stack.layout === 'block'
-                        ? null
-                        : {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: stack.gap ?? 2,
-                        }),
-                    px: stack.px ?? 2,
-                    py: stack.py ?? 1,
-                    ...(stack.pt === undefined ? null : { pt: stack.pt }),
-                    ...(stack.pb === undefined ? null : { pb: stack.pb }),
-                    minHeight: stack.minHeight,
-                    ...(stack.bordered
-                        ? { borderTop: '1px solid', borderColor: 'border.default' }
-                        : null),
-                    ...(stack.subtle ? { bg: 'canvas.subtle' } : null),
-                    ...(isDisabled ? { opacity: 0.5, pointerEvents: 'none' } : null),
-                }, children: stack.content }, stack.id));
+            return (_jsx(Box, { "data-prompt-stack": stack.id, "aria-disabled": isDisabled || undefined, px: stack.px ?? 2, py: stack.py ?? 1, minHeight: stack.minHeight, display: stack.layout === 'block' ? undefined : 'flex', alignItems: stack.layout === 'block' ? undefined : 'center', gap: stack.layout === 'block' ? undefined : (stack.gap ?? 2), pt: stack.pt === undefined ? undefined : stack.pt, pb: stack.pb === undefined ? undefined : stack.pb, borderTop: stack.bordered ? '1px solid' : undefined, borderColor: stack.bordered ? 'border.default' : undefined, bg: stack.subtle ? 'canvas.subtle' : undefined, opacity: isDisabled ? 0.5 : undefined, pointerEvents: isDisabled ? 'none' : undefined, children: stack.content }, stack.id));
         }) }));
 }
 export default PromptStacks;

package/lib/chat/tools/A2AAgentDialog.js

@@ -104,16 +104,10 @@ const strings = (value) => Array.isArray(value)
 // Pieces
 // ---------------------------------------------------------------------------
 function Section({ title, children, }) {
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, m: 0 }, children: title }), children] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, m: 0 }, children: title }), children] }));
 }
 function Row({ label, children, }) {
-    return (_jsxs(Box, { sx: {
-            display: 'grid',
-            gridTemplateColumns: '112px 1fr',
-            gap: 2,
-            alignItems: 'baseline',
-            fontSize: 0,
-        }, children: [_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: label }), _jsx(Box, { sx: { minWidth: 0, wordBreak: 'break-all' }, children: children })] }));
+    return (_jsxs(Box, { display: "grid", gridTemplateColumns: "112px 1fr", gap: 2, alignItems: "baseline", fontSize: 0, children: [_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: label }), _jsx(Box, { minWidth: 0, wordBreak: "break-all", children: children })] }));
 }
 function External({ href, children, }) {
     return (_jsxs(Link, { href: href, target: "_blank", rel: "noreferrer", sx: {
@@ -164,21 +158,15 @@ function ValueView({ value, depth = 0, }) {
             return _jsx(None, {});
         }
         if (value.every(item => typeof item !== 'object' || item === null)) {
-            return (_jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: value.map((item, index) => (_jsx(ValueView, { value: item, depth: depth + 1 }, index))) }));
+            return (_jsx(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: value.map((item, index) => (_jsx(ValueView, { value: item, depth: depth + 1 }, index))) }));
         }
-        return (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: value.map((item, index) => (_jsx(Box, { sx: { pl: 2, borderLeft: '2px solid', borderColor: 'border.muted' }, children: _jsx(ValueView, { value: item, depth: depth + 1 }) }, index))) }));
+        return (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: value.map((item, index) => (_jsx(Box, { pl: 2, borderLeft: "2px solid", borderColor: "border.muted", children: _jsx(ValueView, { value: item, depth: depth + 1 }) }, index))) }));
     }
     const entries = Object.entries(value);
     if (entries.length === 0) {
         return _jsx(None, { word: "empty" });
     }
-    return (_jsx(Box, { sx: {
-            display: 'grid',
-            gridTemplateColumns: 'max-content 1fr',
-            columnGap: 2,
-            rowGap: 1,
-            alignItems: 'baseline',
-        }, children: entries.map(([key, entry]) => (_jsxs(React.Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: humanize(key) }), _jsx(Box, { sx: { minWidth: 0, wordBreak: 'break-all' }, children: _jsx(ValueView, { value: entry, depth: depth + 1 }) })] }, key))) }));
+    return (_jsx(Box, { display: "grid", gridTemplateColumns: "max-content 1fr", columnGap: 2, rowGap: 1, alignItems: "baseline", children: entries.map(([key, entry]) => (_jsxs(React.Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: humanize(key) }), _jsx(Box, { minWidth: 0, wordBreak: "break-all", children: _jsx(ValueView, { value: entry, depth: depth + 1 }) })] }, key))) }));
 }
 /** The keys laid out by hand below; every other top-level key gets a row of its own. */
 const HANDLED_KEYS = new Set([
@@ -211,21 +199,11 @@ function CardFields({ card, }) {
     const inputs = strings(card.defaultInputModes);
     const outputs = strings(card.defaultOutputModes);
     const others = Object.entries(card).filter(([key]) => !HANDLED_KEYS.has(key));
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: text(card.name) ?? 'Unnamed agent' }), text(card.version) ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 2 }, children: ["v", text(card.version)] })) : null, text(card.protocolVersion) ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 2 }, children: ["A2A ", text(card.protocolVersion)] })) : null, text(card.description) ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1, mb: 0 }, children: text(card.description) })) : null] }), text(card.url) ? (_jsx(Row, { label: "Endpoint", children: _jsx(External, { href: text(card.url) }) })) : null, text(card.documentationUrl) ? (_jsx(Row, { label: "Documentation", children: _jsx(External, { href: text(card.documentationUrl) }) })) : null, text(card.iconUrl) ? (_jsx(Row, { label: "Icon", children: _jsx(External, { href: text(card.iconUrl) }) })) : null, provider ? (_jsx(Row, { label: "Provider", children: _jsx(ValueView, { value: provider, depth: 1 }) })) : null, card.supportedInterfaces !== undefined ? (_jsx(Row, { label: "Interfaces", children: interfaces.length === 0 ? (_jsx(None, {})) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: interfaces.map((entry, index) => (_jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 2,
-                            alignItems: 'center',
-                            flexWrap: 'wrap',
-                        }, children: [_jsx(Label, { size: "small", children: text(entry.protocolBinding) ?? 'binding' }), text(entry.url) ? _jsx(Mono, { children: text(entry.url) }) : null, text(entry.protocolVersion) ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["v", text(entry.protocolVersion)] })) : null] }, index))) })) })) : null, capabilities !== undefined ? (_jsx(Row, { label: "Capabilities", children: capabilityEntries.length === 0 ? (_jsx(None, {})) : (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: capabilityEntries
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: text(card.name) ?? 'Unnamed agent' }), text(card.version) ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 2 }, children: ["v", text(card.version)] })) : null, text(card.protocolVersion) ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 2 }, children: ["A2A ", text(card.protocolVersion)] })) : null, text(card.description) ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1, mb: 0 }, children: text(card.description) })) : null] }), text(card.url) ? (_jsx(Row, { label: "Endpoint", children: _jsx(External, { href: text(card.url) }) })) : null, text(card.documentationUrl) ? (_jsx(Row, { label: "Documentation", children: _jsx(External, { href: text(card.documentationUrl) }) })) : null, text(card.iconUrl) ? (_jsx(Row, { label: "Icon", children: _jsx(External, { href: text(card.iconUrl) }) })) : null, provider ? (_jsx(Row, { label: "Provider", children: _jsx(ValueView, { value: provider, depth: 1 }) })) : null, card.supportedInterfaces !== undefined ? (_jsx(Row, { label: "Interfaces", children: interfaces.length === 0 ? (_jsx(None, {})) : (_jsx(Box, { display: "flex", flexDirection: "column", gap: 1, children: interfaces.map((entry, index) => (_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap", children: [_jsx(Label, { size: "small", children: text(entry.protocolBinding) ?? 'binding' }), text(entry.url) ? _jsx(Mono, { children: text(entry.url) }) : null, text(entry.protocolVersion) ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["v", text(entry.protocolVersion)] })) : null] }, index))) })) })) : null, capabilities !== undefined ? (_jsx(Row, { label: "Capabilities", children: capabilityEntries.length === 0 ? (_jsx(None, {})) : (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", children: capabilityEntries
                                 .filter(([, flag]) => typeof flag === 'boolean')
-                                .map(([key, flag]) => (_jsxs(Label, { size: "small", variant: flag ? 'success' : 'secondary', children: [key, ": ", flag ? 'yes' : 'no'] }, key))) }), extensions.map((extension, index) => (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                gap: 2,
-                                alignItems: 'baseline',
-                                flexWrap: 'wrap',
-                            }, children: [_jsx(Mono, { children: text(extension.uri) ?? 'extension' }), extension.required === true ? (_jsx(Label, { size: "small", variant: "attention", children: "required" })) : null, text(extension.description) ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: text(extension.description) })) : null] }, index))), capabilityEntries
+                                .map(([key, flag]) => (_jsxs(Label, { size: "small", variant: flag ? 'success' : 'secondary', children: [key, ": ", flag ? 'yes' : 'no'] }, key))) }), extensions.map((extension, index) => (_jsxs(Box, { display: "flex", gap: 2, alignItems: "baseline", flexWrap: "wrap", children: [_jsx(Mono, { children: text(extension.uri) ?? 'extension' }), extension.required === true ? (_jsx(Label, { size: "small", variant: "attention", children: "required" })) : null, text(extension.description) ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: text(extension.description) })) : null] }, index))), capabilityEntries
                             .filter(([key, entry]) => typeof entry !== 'boolean' && key !== 'extensions')
-                            .map(([key, entry]) => (_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: humanize(key) }), _jsx(ValueView, { value: entry, depth: 1 })] }, key)))] })) })) : null, card.skills !== undefined ? (_jsx(Row, { label: "Skills", children: skills.length === 0 ? (_jsx(None, {})) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: skills.map((skill, index) => (_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: text(skill.name) ?? text(skill.id) ?? 'skill' }), text(skill.description) ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 2 }, children: text(skill.description) })) : null, strings(skill.tags).length > 0 ? (_jsx(Box, { sx: { display: 'inline-flex', gap: 1, ml: 2 }, children: strings(skill.tags).map(tag => (_jsx(Label, { size: "small", children: tag }, tag))) })) : null] }, index))) })) })) : null, card.defaultInputModes !== undefined ? (_jsx(Row, { label: "Input modes", children: inputs.length ? _jsx(Mono, { children: inputs.join(', ') }) : _jsx(None, {}) })) : null, card.defaultOutputModes !== undefined ? (_jsx(Row, { label: "Output modes", children: outputs.length ? _jsx(Mono, { children: outputs.join(', ') }) : _jsx(None, {}) })) : null, others.map(([key, value]) => (_jsx(Row, { label: humanize(key), children: _jsx(ValueView, { value: value }) }, key)))] }));
+                            .map(([key, entry]) => (_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: humanize(key) }), _jsx(ValueView, { value: entry, depth: 1 })] }, key)))] })) })) : null, card.skills !== undefined ? (_jsx(Row, { label: "Skills", children: skills.length === 0 ? (_jsx(None, {})) : (_jsx(Box, { display: "flex", flexDirection: "column", gap: 1, children: skills.map((skill, index) => (_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: text(skill.name) ?? text(skill.id) ?? 'skill' }), text(skill.description) ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 2 }, children: text(skill.description) })) : null, strings(skill.tags).length > 0 ? (_jsx(Box, { display: "inline-flex", gap: 1, ml: 2, children: strings(skill.tags).map(tag => (_jsx(Label, { size: "small", children: tag }, tag))) })) : null] }, index))) })) })) : null, card.defaultInputModes !== undefined ? (_jsx(Row, { label: "Input modes", children: inputs.length ? _jsx(Mono, { children: inputs.join(', ') }) : _jsx(None, {}) })) : null, card.defaultOutputModes !== undefined ? (_jsx(Row, { label: "Output modes", children: outputs.length ? _jsx(Mono, { children: outputs.join(', ') }) : _jsx(None, {}) })) : null, others.map(([key, value]) => (_jsx(Row, { label: humanize(key), children: _jsx(ValueView, { value: value }) }, key)))] }));
 }
 const LAUNCH_LABEL = {
     local: 'launched on the local agent-runtimes server',
@@ -249,17 +227,6 @@ export function A2AAgentDialog({ details, onClose, }) {
                 ? [{ content: 'Open agent card', onClick: openCard }]
                 : []),
             { content: 'Close', onClick: onClose, buttonType: 'primary' },
-        ], children: _jsxs(Box, { "data-a2a-agent-dialog": details.name, "data-a2a-card-status": fetched.status, sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Section, { title: "This run", children: [details.description ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: details.description })) : null, _jsx(Row, { label: "Launch", children: _jsxs(Text, { sx: { fontSize: 0 }, children: [details.launch ?? 'auto', _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [' ', "\u2014 ", LAUNCH_LABEL[details.launch ?? 'auto'] ?? ''] })] }) }), details.ref ? (_jsx(Row, { label: "Agentspec", children: _jsx(Mono, { children: details.ref }) })) : null, _jsx(Row, { label: "State", children: _jsx(Text, { sx: { fontSize: 0 }, children: details.state ?? 'unknown' }) }), details.taskId ? (_jsx(Row, { label: "Task", children: _jsx(Mono, { children: details.taskId }) })) : null, details.runtimeUid ? (_jsx(Row, { label: "Runtime", children: _jsx(Mono, { children: details.runtimeUid }) })) : null, details.url ? (_jsx(Row, { label: "Endpoint", children: _jsx(External, { href: details.url }) })) : null, cardUrl ? (_jsx(Row, { label: "Agent card", children: _jsx(External, { href: cardUrl }) })) : null] }), _jsxs(Section, { title: "Agent card", children: [fetched.status === 'idle' ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No endpoint known yet: the card can be fetched once the agent is launched." })) : null, fetched.status === 'loading' ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Fetching ", cardUrl, "\u2026"] })] })) : null, fetched.status === 'error' ? (_jsxs(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: ["The card could not be fetched from here (", fetched.error, "). It may still open in a tab through the link above."] })) : null, fetched.status === 'loaded' ? (_jsxs(_Fragment, { children: [_jsx(CardFields, { card: fetched.card }), _jsxs(Box, { as: "details", sx: { fontSize: 0 }, children: [_jsx(Box, { as: "summary", sx: { cursor: 'pointer', color: 'fg.muted' }, children: "Raw JSON" }), _jsx(Box, { as: "pre", "data-a2a-card-json": true, sx: {
-                                                mt: 2,
-                                                p: 2,
-                                                bg: 'canvas.subtle',
-                                                border: '1px solid',
-                                                borderColor: 'border.default',
-                                                borderRadius: 2,
-                                                overflow: 'auto',
-                                                maxHeight: 280,
-                                                fontSize: 0,
-                                                m: 0,
-                                            }, children: JSON.stringify(fetched.card, null, 2) })] })] })) : null] }), details.card && fetched.status !== 'loaded' ? (_jsxs(Section, { title: "Card, as the server saw it at launch", children: [_jsx(Row, { label: "Name", children: _jsxs(Text, { sx: { fontSize: 0 }, children: [details.card.name ?? '—', details.card.version ? ` v${details.card.version}` : ''] }) }), details.card.description ? (_jsx(Row, { label: "Description", children: _jsx(Text, { sx: { fontSize: 0 }, children: details.card.description }) })) : null, details.card.skills && details.card.skills.length > 0 ? (_jsx(Row, { label: "Skills", children: _jsx(Text, { sx: { fontSize: 0 }, children: details.card.skills.join(', ') }) })) : null] })) : null] }) }));
+        ], children: _jsxs(Box, { "data-a2a-agent-dialog": details.name, "data-a2a-card-status": fetched.status, display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Section, { title: "This run", children: [details.description ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: details.description })) : null, _jsx(Row, { label: "Launch", children: _jsxs(Text, { sx: { fontSize: 0 }, children: [details.launch ?? 'auto', _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [' ', "\u2014 ", LAUNCH_LABEL[details.launch ?? 'auto'] ?? ''] })] }) }), details.ref ? (_jsx(Row, { label: "Agentspec", children: _jsx(Mono, { children: details.ref }) })) : null, _jsx(Row, { label: "State", children: _jsx(Text, { sx: { fontSize: 0 }, children: details.state ?? 'unknown' }) }), details.taskId ? (_jsx(Row, { label: "Task", children: _jsx(Mono, { children: details.taskId }) })) : null, details.runtimeUid ? (_jsx(Row, { label: "Runtime", children: _jsx(Mono, { children: details.runtimeUid }) })) : null, details.url ? (_jsx(Row, { label: "Endpoint", children: _jsx(External, { href: details.url }) })) : null, cardUrl ? (_jsx(Row, { label: "Agent card", children: _jsx(External, { href: cardUrl }) })) : null] }), _jsxs(Section, { title: "Agent card", children: [fetched.status === 'idle' ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No endpoint known yet: the card can be fetched once the agent is launched." })) : null, fetched.status === 'loading' ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Fetching ", cardUrl, "\u2026"] })] })) : null, fetched.status === 'error' ? (_jsxs(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: ["The card could not be fetched from here (", fetched.error, "). It may still open in a tab through the link above."] })) : null, fetched.status === 'loaded' ? (_jsxs(_Fragment, { children: [_jsx(CardFields, { card: fetched.card }), _jsxs(Box, { as: "details", fontSize: 0, children: [_jsx(Box, { as: "summary", cursor: "pointer", color: "fg.muted", children: "Raw JSON" }), _jsx(Box, { as: "pre", "data-a2a-card-json": true, mt: 2, p: 2, bg: "canvas.subtle", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "auto", maxHeight: 280, fontSize: 0, m: 0, children: JSON.stringify(fetched.card, null, 2) })] })] })) : null] }), details.card && fetched.status !== 'loaded' ? (_jsxs(Section, { title: "Card, as the server saw it at launch", children: [_jsx(Row, { label: "Name", children: _jsxs(Text, { sx: { fontSize: 0 }, children: [details.card.name ?? '—', details.card.version ? ` v${details.card.version}` : ''] }) }), details.card.description ? (_jsx(Row, { label: "Description", children: _jsx(Text, { sx: { fontSize: 0 }, children: details.card.description }) })) : null, details.card.skills && details.card.skills.length > 0 ? (_jsx(Row, { label: "Skills", children: _jsx(Text, { sx: { fontSize: 0 }, children: details.card.skills.join(', ') }) })) : null] })) : null] }) }));
 }
 export default A2AAgentDialog;