@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/chat/assistant/AssistantContextMenu.d.ts

@@ -15,6 +15,14 @@
  */
 import type { JSX, RefObject } from 'react';
 import type { Icon } from '@primer/octicons-react';
+/** The longest a description is drawn in the menu, in characters. */
+export declare const MENU_DESCRIPTION_MAX = 60;
+/**
+ * A description short enough for one line of the menu: whole words up to
+ * {@link MENU_DESCRIPTION_MAX} characters, then an ellipsis. The full text
+ * stays in its tooltip.
+ */
+export declare function shortDescription(text: string): string;
 /** One entry of the assistant's menu. */
 export type AssistantMenuItem = {
     /** Stable id: `inspect`, `stop`, a plugin's own. */

package/lib/chat/assistant/AssistantContextMenu.js

@@ -2,6 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { ActionList, ActionMenu } from '@primer/react';
+/** The longest a description is drawn in the menu, in characters. */
+export const MENU_DESCRIPTION_MAX = 60;
+/**
+ * A description short enough for one line of the menu: whole words up to
+ * {@link MENU_DESCRIPTION_MAX} characters, then an ellipsis. The full text
+ * stays in its tooltip.
+ */
+export function shortDescription(text) {
+    const flat = text.replace(/\s+/g, ' ').trim();
+    if (flat.length <= MENU_DESCRIPTION_MAX) {
+        return flat;
+    }
+    const cut = flat.slice(0, MENU_DESCRIPTION_MAX);
+    const space = cut.lastIndexOf(' ');
+    return `${(space > MENU_DESCRIPTION_MAX / 2 ? cut.slice(0, space) : cut).replace(/[\s,.;:!?—-]+$/, '')}…`;
+}
 /** The entries by group, in the order their first entry came. */
 export function menuGroups(items) {
     const groups = [];
@@ -61,7 +77,7 @@ export function AssistantContextMenu({ at, items, onClose, returnFocusRef, label
                                     item.onSelect();
                                     onClose();
                                     requestAnimationFrame(() => returnFocusRef?.current?.focus());
-                                }, children: [item.icon && (_jsx(ActionList.LeadingVisual, { children: _jsx(item.icon, {}) })), item.label, item.description && (_jsx(ActionList.Description, { variant: "block", children: item.description }))] }, item.id)));
+                                }, children: [item.icon && (_jsx(ActionList.LeadingVisual, { children: _jsx(item.icon, {}) })), item.label, item.description && (_jsx(ActionList.Description, { variant: "block", children: _jsx("span", { title: item.description, children: shortDescription(item.description) }) }))] }, item.id)));
                             return (_jsxs(ActionList.Group, { ...(choice ? { selectionVariant: 'single' } : {}), children: [group && (_jsx(ActionList.GroupHeading, { children: group })), list] }, group ?? `ungrouped-${index}`));
                         }) }) }) })] }));
 }

package/lib/chat/assistant/AssistantStage.js

@@ -617,31 +617,12 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
                         return;
                     }
                     (onCharacterClick ?? onToggle)();
-                }, sx: {
-                    display: 'block',
-                    width: size,
-                    height: size,
-                    p: 0,
-                    border: 0,
-                    bg: 'transparent',
-                    cursor: 'grab',
-                    touchAction: 'none',
-                    filter: 'drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18))',
-                    '&:active': { cursor: 'grabbing' },
-                    '&:focus-visible': {
-                        outline: '2px solid',
-                        outlineColor: 'var(--focus-outlineColor, var(--fgColor-accent))',
-                        outlineOffset: 2,
-                        borderRadius: '50%',
-                    },
-                }, children: [described && (_jsx(Box, { as: "span", id: describedBy, sx: {
-                            position: 'absolute',
-                            width: 1,
-                            height: 1,
-                            overflow: 'hidden',
-                            clip: 'rect(0 0 0 0)',
-                            whiteSpace: 'nowrap',
-                        }, children: `Its character: ${characterName}` })), shipped ? (_jsx(shipped.Drawing, { size: size, mode: colorMode })) : (_jsx(SpriteCharacter, { character: character, state: state, size: size, sounds: soundsOn, mouthLevel: mouthLevel }))] }), (hovered || menuOpen) && !aside && state !== 'goodbye' && (_jsx(Box, { sx: { position: 'absolute', top: '-6px', right: '-6px' }, children: _jsxs(ActionMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: XIcon, "aria-label": `Send ${name} away`, size: "small", variant: "invisible", "data-assistant-dismiss": "", sx: {
+                }, display: "block", width: size, height: size, p: 0, border: 0, bg: "transparent", cursor: "grab", filter: "drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18))", active: { cursor: 'grabbing' }, focusVisible: {
+                    outline: '2px solid',
+                    outlineColor: 'var(--focus-outlineColor, var(--fgColor-accent))',
+                    outlineOffset: 2,
+                    borderRadius: '50%',
+                }, touchAction: "none", children: [described && (_jsx(Box, { as: "span", id: describedBy, position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap", children: `Its character: ${characterName}` })), shipped ? (_jsx(shipped.Drawing, { size: size, mode: colorMode })) : (_jsx(SpriteCharacter, { character: character, state: state, size: size, sounds: soundsOn, mouthLevel: mouthLevel }))] }), (hovered || menuOpen) && !aside && state !== 'goodbye' && (_jsx(Box, { position: "absolute", top: "-6px", right: "-6px", children: _jsxs(ActionMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: XIcon, "aria-label": `Send ${name} away`, size: "small", variant: "invisible", "data-assistant-dismiss": "", sx: {
                                     bg: 'canvas.default',
                                     borderRadius: '50%',
                                     boxShadow: 'shadow.small',

package/lib/chat/assistant/BalloonParts.js

@@ -51,7 +51,7 @@ async function respondInBalloon(_toolCallId, result) {
  */
 export function BalloonChatItems({ items, density = 'compact', waiting = false, }) {
     const end = useRef(null);
-    return (_jsx(Box, { "data-balloon-chat-items": "", sx: { minWidth: 0 }, children: _jsx(ChatMessageList, { displayItems: items, isLoading: waiting, isStreaming: false, showLoadingIndicator: waiting, hideMessagesAfterToolUI: false, avatarConfig: BALLOON_AVATARS, padding: 0, onRespond: respondInBalloon, messagesEndRef: end, emptyContent: waiting ? _jsx(TypingDots, { size: 6 }) : null, density: density }) }));
+    return (_jsx(Box, { "data-balloon-chat-items": "", minWidth: 0, children: _jsx(ChatMessageList, { displayItems: items, isLoading: waiting, isStreaming: false, showLoadingIndicator: waiting, hideMessagesAfterToolUI: false, avatarConfig: BALLOON_AVATARS, padding: 0, onRespond: respondInBalloon, messagesEndRef: end, emptyContent: waiting ? _jsx(TypingDots, { size: 6 }) : null, density: density }) }));
 }
 /**
  * The tool being called, in the balloon: the chat's tool call card, compact,
@@ -59,7 +59,7 @@ export function BalloonChatItems({ items, density = 'compact', waiting = false,
  * Seen, not read out: {@link ToolLineAnnouncer} says it once per change.
  */
 export function BalloonToolCall({ line, waiting = false, }) {
-    return (_jsx(Box, { "aria-hidden": "true", "data-balloon-tool": line.phase, "data-balloon-tool-name": line.tool || undefined, sx: { minWidth: 0, width: '100%' }, children: _jsx(BalloonChatItems, { items: [displayItemOfLine(line)], waiting: waiting }) }));
+    return (_jsx(Box, { "aria-hidden": "true", "data-balloon-tool": line.phase, "data-balloon-tool-name": line.tool || undefined, minWidth: 0, width: "100%", children: _jsx(BalloonChatItems, { items: [displayItemOfLine(line)], waiting: waiting }) }));
 }
 /**
  * What a screen reader hears of the tool lines, politely: once when a call
@@ -76,7 +76,7 @@ export function ToolLineAnnouncer({ line, }) {
             setSaid(words);
         }
     }, [line?.id, line?.phase]);
-    return (_jsx(Box, { as: "span", role: "status", "aria-live": "polite", "data-balloon-announce": "", sx: VISUALLY_HIDDEN, children: said }));
+    return (_jsx(Box, { as: "span", role: "status", "aria-live": "polite", "data-balloon-announce": "", ...VISUALLY_HIDDEN, children: said }));
 }
 /**
  * The `current` balloon's mark: *Now*, with a dot that breathes while the
@@ -84,15 +84,7 @@ export function ToolLineAnnouncer({ line, }) {
  */
 export function BalloonNow({ busy = false }) {
     const chatText = useChatWords();
-    return (_jsxs(Box, { as: "span", "data-balloon-now": busy ? 'busy' : '', sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '6px',
-            fontSize: 0,
-            fontWeight: 'semibold',
-            color: 'accent.fg',
-            textTransform: 'uppercase',
-            letterSpacing: '0.04em',
+    return (_jsxs(Box, { as: "span", "data-balloon-now": busy ? 'busy' : '', display: "inline-flex", alignItems: "center", gap: "6px", fontSize: 0, fontWeight: "semibold", color: "accent.fg", textTransform: "uppercase", letterSpacing: "0.04em", sx: {
             '@keyframes balloonNowBreathe': {
                 '0%, 100%': { opacity: 1, transform: 'scale(1)' },
                 '50%': { opacity: 0.35, transform: 'scale(0.7)' },
@@ -123,21 +115,9 @@ export function conversationHeaderText(count, chatText = ENGLISH_CHAT_WORDS) {
  */
 export function ConversationBalloonHeader({ count, }) {
     const chatText = useChatWords();
-    return (_jsx(Box, { "data-balloon-header": "", sx: {
-            flexShrink: 0,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 2,
-            // Room for the close control over the corner.
-            pl: 3,
-            pr: 6,
-            py: 2,
-            borderBottom: '1px solid',
-            borderColor: 'border.muted',
-            bg: 'canvas.default',
-            borderTopLeftRadius: 'var(--theme-radius-bubble, 16px)',
-            borderTopRightRadius: 'var(--theme-radius-bubble, 16px)',
-        }, children: _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold', color: 'fg.muted' }, children: conversationHeaderText(count, chatText) }) }));
+    return (_jsx(Box, { "data-balloon-header": "", flexShrink: 0, display: "flex", alignItems: "center", gap: 2, 
+        // Room for the close control over the corner.
+        pl: 3, pr: 6, py: 2, borderBottom: "1px solid", borderColor: "border.muted", bg: "canvas.default", borderTopLeftRadius: "var(--theme-radius-bubble, 16px)", borderTopRightRadius: "var(--theme-radius-bubble, 16px)", children: _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold', color: 'fg.muted' }, children: conversationHeaderText(count, chatText) }) }));
 }
 /**
  * What the `current` balloon holds: *Now*, then the one thing being said or
@@ -153,17 +133,5 @@ export function CurrentBalloonBody({ text, tool, busy = false, speaking = false,
         }
         onOverflow(element.scrollHeight > element.clientHeight + 1);
     }, [text, whole, onOverflow]);
-    return (_jsxs(Box, { "data-balloon-current": "", sx: { display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 }, children: [_jsx(BalloonNow, { busy: busy }), tool ? (_jsx(BalloonToolCall, { line: tool, waiting: waiting })) : text ? (_jsxs(Box, { "aria-live": "polite", "aria-busy": speaking, ref: textRef, "data-balloon-current-text": whole ? 'whole' : '', sx: whole
-                    ? {
-                        maxHeight: 240,
-                        overflowY: 'auto',
-                        overflowWrap: 'anywhere',
-                        pr: 1,
-                    }
-                    : {
-                        // About four lines; *more* shows the rest.
-                        maxHeight: '5.6em',
-                        overflow: 'hidden',
-                        overflowWrap: 'anywhere',
-                    }, children: [_jsx(ChatMarkdown, { density: "compact", text: whole ? (fullText ?? text) : text }), waiting && (_jsx(Box, { as: "span", sx: { ml: 2, display: 'inline-flex' }, children: _jsx(TypingDots, { size: 5 }) }))] })) : waiting ? (_jsx(TypingDots, { size: 6 })) : null, attachment, _jsx(ToolLineAnnouncer, { line: tool })] }));
+    return (_jsxs(Box, { "data-balloon-current": "", display: "flex", flexDirection: "column", gap: 1, minWidth: 0, children: [_jsx(BalloonNow, { busy: busy }), tool ? (_jsx(BalloonToolCall, { line: tool, waiting: waiting })) : text ? (_jsxs(Box, { "aria-live": "polite", "aria-busy": speaking, ref: textRef, "data-balloon-current-text": whole ? 'whole' : '', maxHeight: whole ? 240 : '5.6em', overflowY: whole ? 'auto' : undefined, overflowWrap: whole ? 'anywhere' : 'anywhere', pr: whole ? 1 : undefined, overflow: whole ? undefined : 'hidden', children: [_jsx(ChatMarkdown, { density: "compact", text: whole ? (fullText ?? text) : text }), waiting && (_jsx(Box, { as: "span", ml: 2, display: "inline-flex", children: _jsx(TypingDots, { size: 5 }) }))] })) : waiting ? (_jsx(TypingDots, { size: 6 })) : null, attachment, _jsx(ToolLineAnnouncer, { line: tool })] }));
 }

package/lib/chat/assistant/BalloonVisual.js

@@ -31,7 +31,7 @@ export function ExpandedVisual({ visual, target, onClose, }) {
         if (!element) {
             return null;
         }
-        return createPortal(_jsxs(Box, { "data-balloon-expanded": "target", "data-balloon-visual": visual.id, sx: { position: 'relative', minWidth: 0 }, children: [_jsx(Box, { sx: { position: 'absolute', top: 0, right: 0, zIndex: 1 }, children: _jsx(IconButton, { icon: visual.shrink ? ScreenNormalIcon : XIcon, size: "small", variant: "invisible", "aria-label": `${visual.shrink ? 'Shrink' : 'Close'} ${visual.title}`, "data-balloon-expanded-close": "", ...(visual.shrink ? { 'data-balloon-shrink': '' } : {}), onClick: onClose }) }), visual.render('target')] }), element);
+        return createPortal(_jsxs(Box, { "data-balloon-expanded": "target", "data-balloon-visual": visual.id, position: "relative", minWidth: 0, children: [_jsx(Box, { position: "absolute", top: 0, right: 0, zIndex: 1, children: _jsx(IconButton, { icon: visual.shrink ? ScreenNormalIcon : XIcon, size: "small", variant: "invisible", "aria-label": `${visual.shrink ? 'Shrink' : 'Close'} ${visual.title}`, "data-balloon-expanded-close": "", ...(visual.shrink ? { 'data-balloon-shrink': '' } : {}), onClick: onClose }) }), visual.render('target')] }), element);
     }
     // The dialog's × (and Esc) is what shrinks it back: no Shrink of its own.
     return (_jsx(Dialog, { title: visual.title, onClose: onClose, sx: {
@@ -39,7 +39,7 @@ export function ExpandedVisual({ visual, target, onClose, }) {
             maxWidth: EXPANDED_DIALOG_SIZE.width,
             height: EXPANDED_DIALOG_SIZE.height,
             maxHeight: EXPANDED_DIALOG_SIZE.height,
-        }, children: _jsx(Box, { "data-balloon-expanded": "overlay", "data-balloon-visual": visual.id, sx: { minWidth: 0 }, children: visual.render('overlay') }) }));
+        }, children: _jsx(Box, { "data-balloon-expanded": "overlay", "data-balloon-visual": visual.id, minWidth: 0, children: visual.render('overlay') }) }));
 }
 /**
  * Brings an expanded visual into view in its target: scrolled to, and the

package/lib/chat/assistant/ConversationBalloon.js

@@ -61,7 +61,7 @@ export function conversationBalloonSx(tail, tailBg = 'canvas.default') {
 }
 /** The open balloon's close control, over its top right corner. */
 export function ConversationBalloonClose({ name, onClose, }) {
-    return (_jsx(Box, { "data-conversation-balloon-close": "", sx: { position: 'absolute', top: '6px', right: '6px', zIndex: 30 }, children: _jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": name
+    return (_jsx(Box, { "data-conversation-balloon-close": "", position: "absolute", top: "6px", right: "6px", zIndex: 30, children: _jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": name
                 ? `Close the conversation with ${name}`
                 : 'Close the conversation', onClick: onClose, sx: { bg: 'canvas.default', borderRadius: '50%' } }) }));
 }
@@ -76,16 +76,7 @@ export function BalloonApprovalMessage({ approval, }) {
     useEffect(() => {
         ref.current?.scrollIntoView?.({ block: 'nearest' });
     }, [approval.id]);
-    return (_jsx(Box, { ref: ref, "data-balloon-approval": approval.id, sx: { px: 3, py: 2, display: 'flex' }, children: _jsxs(Box, { sx: {
-                maxWidth: '90%',
-                px: 3,
-                py: 2,
-                bg: 'attention.subtle',
-                border: '1px solid',
-                borderColor: 'attention.muted',
-                borderRadius: 'var(--theme-radius-bubble, 16px)',
-                fontSize: 1,
-            }, children: [_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: chatText.waitingForYou }), _jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2, alignItems: 'center' }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: chatText.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: chatText.deny }), approval.others > 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: chatText.moreWaiting(approval.others) })) : null] })] }) }));
+    return (_jsx(Box, { ref: ref, "data-balloon-approval": approval.id, px: 3, py: 2, display: "flex", children: _jsxs(Box, { maxWidth: "90%", px: 3, py: 2, bg: "attention.subtle", border: "1px solid", borderColor: "attention.muted", borderRadius: "var(--theme-radius-bubble, 16px)", fontSize: 1, children: [_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: chatText.waitingForYou }), _jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { display: "flex", gap: 2, mt: 2, alignItems: "center", children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: chatText.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: chatText.deny }), approval.others > 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: chatText.moreWaiting(approval.others) })) : null] })] }) }));
 }
 /** How many more wait, in two words: "2 more". */
 export function moreWaiting(others) {

package/lib/chat/assistant/DecisionAsk.js

@@ -53,10 +53,10 @@ export function DecisionAsk({ ask, onActiveChange, }) {
         show(false);
     };
     if (!open) {
-        return (_jsx(Box, { as: "button", type: "button", "data-balloon-ask-decision": "", onClick: () => show(true), sx: { ...LINK_SX, display: 'block' }, children: DECISION_WORDS.ask }));
+        return (_jsx(Box, { as: "button", type: "button", "data-balloon-ask-decision": "", onClick: () => show(true), ...LINK_SX, display: "block", children: DECISION_WORDS.ask }));
     }
     if (answer !== undefined) {
-        return (_jsxs(Box, { "data-balloon-decision": "answered", sx: { mt: 2 }, children: [_jsx(Text, { as: "p", "data-decision-answer": "", sx: { m: 0, fontWeight: 'semibold' }, children: answer }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", onClick: () => setAnswer(undefined), children: DECISION_WORDS.again }), _jsx(Button, { size: "small", variant: "invisible", onClick: close, children: DECISION_WORDS.cancel })] })] }));
+        return (_jsxs(Box, { "data-balloon-decision": "answered", mt: 2, children: [_jsx(Text, { as: "p", "data-decision-answer": "", sx: { m: 0, fontWeight: 'semibold' }, children: answer }), _jsxs(Box, { display: "flex", gap: 2, mt: 2, children: [_jsx(Button, { size: "small", onClick: () => setAnswer(undefined), children: DECISION_WORDS.again }), _jsx(Button, { size: "small", variant: "invisible", onClick: close, children: DECISION_WORDS.cancel })] })] }));
     }
     const submit = async () => {
         const asked = {
@@ -91,6 +91,6 @@ export function DecisionAsk({ ask, onActiveChange, }) {
             if (event.key === 'Escape') {
                 close();
             }
-        }, sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Situation" }), _jsx(Textarea, { block: true, rows: 3, resize: "vertical", name: "situation", placeholder: "Help! My payouts have been failing for 3 days.", value: situation, onChange: event => setSituation(event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Question" }), _jsx(TextInput, { block: true, size: "small", name: "question", placeholder: "Is it urgent?", value: question, onChange: event => setQuestion(event.target.value) })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Type" }), _jsx(Select, { block: true, size: "small", name: "type", value: type, onChange: event => setType(event.target.value), children: Object.keys(DECISION_WORDS.types).map(option => (_jsx(Select.Option, { value: option, children: DECISION_WORDS.types[option] }, option))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, size: "small", name: "name", placeholder: "Answer", value: name, onChange: event => setName(event.target.value) })] })] }), type === 'choice' && (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Options, one per line" }), _jsx(Textarea, { block: true, rows: 3, resize: "vertical", name: "options", placeholder: 'Billing\nTech\nSales', value: options, onChange: event => setOptions(event.target.value) })] })), type === 'score' && (_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "From" }), _jsx(TextInput, { block: true, size: "small", type: "number", name: "from", value: from, onChange: event => setFrom(event.target.value) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "To" }), _jsx(TextInput, { block: true, size: "small", type: "number", name: "to", value: to, onChange: event => setTo(event.target.value) })] })] })), problem ? (_jsx(Text, { as: "p", role: "alert", sx: { m: 0, color: 'danger.fg', fontSize: 0 }, children: problem })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", type: "submit", disabled: asking, children: asking ? DECISION_WORDS.asking : DECISION_WORDS.submit }), _jsx(Button, { size: "small", type: "button", onClick: close, disabled: asking, children: DECISION_WORDS.cancel })] })] }));
+        }, mt: 2, display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Situation" }), _jsx(Textarea, { block: true, rows: 3, resize: "vertical", name: "situation", placeholder: "Help! My payouts have been failing for 3 days.", value: situation, onChange: event => setSituation(event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Question" }), _jsx(TextInput, { block: true, size: "small", name: "question", placeholder: "Is it urgent?", value: question, onChange: event => setQuestion(event.target.value) })] }), _jsxs(Box, { display: "flex", gap: 2, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Type" }), _jsx(Select, { block: true, size: "small", name: "type", value: type, onChange: event => setType(event.target.value), children: Object.keys(DECISION_WORDS.types).map(option => (_jsx(Select.Option, { value: option, children: DECISION_WORDS.types[option] }, option))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, size: "small", name: "name", placeholder: "Answer", value: name, onChange: event => setName(event.target.value) })] })] }), type === 'choice' && (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Options, one per line" }), _jsx(Textarea, { block: true, rows: 3, resize: "vertical", name: "options", placeholder: 'Billing\nTech\nSales', value: options, onChange: event => setOptions(event.target.value) })] })), type === 'score' && (_jsxs(Box, { display: "flex", gap: 2, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "From" }), _jsx(TextInput, { block: true, size: "small", type: "number", name: "from", value: from, onChange: event => setFrom(event.target.value) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "To" }), _jsx(TextInput, { block: true, size: "small", type: "number", name: "to", value: to, onChange: event => setTo(event.target.value) })] })] })), problem ? (_jsx(Text, { as: "p", role: "alert", sx: { m: 0, color: 'danger.fg', fontSize: 0 }, children: problem })) : null, _jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { size: "small", variant: "primary", type: "submit", disabled: asking, children: asking ? DECISION_WORDS.asking : DECISION_WORDS.submit }), _jsx(Button, { size: "small", type: "button", onClick: close, disabled: asking, children: DECISION_WORDS.cancel })] })] }));
 }
 export default DecisionAsk;

package/lib/chat/assistant/SandboxDetailsDialog.js

@@ -20,7 +20,7 @@ function StatusLabel({ status }) {
 /** A URL, linked, with a copy button. */
 function UrlValue({ url }) {
     const [copied, setCopied] = useState(false);
-    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }, children: [_jsx(Link, { href: url, target: "_blank", rel: "noreferrer", sx: { fontFamily: 'mono', fontSize: 0, wordBreak: 'break-all' }, children: url }), _jsx(IconButton, { icon: copied ? CheckIcon : CopyIcon, "aria-label": "Copy the URL", size: "small", variant: "invisible", onClick: () => {
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, minWidth: 0, children: [_jsx(Link, { href: url, target: "_blank", rel: "noreferrer", sx: { fontFamily: 'mono', fontSize: 0, wordBreak: 'break-all' }, children: url }), _jsx(IconButton, { icon: copied ? CheckIcon : CopyIcon, "aria-label": "Copy the URL", size: "small", variant: "invisible", onClick: () => {
                     void navigator.clipboard?.writeText(url).then(() => {
                         setCopied(true);
                         setTimeout(() => setCopied(false), 1500);
@@ -193,22 +193,8 @@ export function SandboxDetailsDialog({ sandbox, name, onClose, }) {
     add('Packages', pyodide && pyodide.packages.length > 0 ? (_jsxs(Box, { children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowPackages(!showPackages), "aria-expanded": showPackages, sx: { px: 1 }, children: `${pyodide.packages.length} loaded` }), showPackages && (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, fontFamily: 'mono', fontSize: 0 }, "data-sandbox-packages": "", children: pyodide.packages.join(', ') }))] })) : undefined);
     add('Started', moment(sandbox.startedAt));
     add('Last activity', moment(sandbox.lastActivity ?? kernel.lastActivity));
-    return (_jsx(Dialog, { title: `${name} · Code Sandbox`, onClose: onClose, width: "xlarge", height: "large", children: _jsxs(Box, { "data-assistant-sandbox-details": "", sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { "data-sandbox-summary": "", sx: {
-                        p: 3,
-                        bg: 'canvas.subtle',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, "data-sandbox-kind": sandbox.kind, children: [SANDBOX_KIND_LABELS[sandbox.kind], sandbox.kind === 'runtime' && sandbox.variant
+    return (_jsx(Dialog, { title: `${name} · Code Sandbox`, onClose: onClose, width: "xlarge", height: "large", children: _jsxs(Box, { "data-assistant-sandbox-details": "", display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { "data-sandbox-summary": "", p: 3, bg: "canvas.subtle", border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'semibold' }, "data-sandbox-kind": sandbox.kind, children: [SANDBOX_KIND_LABELS[sandbox.kind], sandbox.kind === 'runtime' && sandbox.variant
                                             ? ` (${sandbox.variant})`
-                                            : ''] }), sandbox.status && _jsx(StatusLabel, { status: sandbox.status })] }), _jsx(Box, { as: "dl", sx: {
-                                display: 'grid',
-                                gridTemplateColumns: 'max-content minmax(0, 1fr)',
-                                columnGap: 3,
-                                rowGap: 1,
-                                m: 0,
-                                fontSize: 1,
-                                alignItems: 'center',
-                            }, children: facts.map(([key, value]) => (_jsxs(Box, { sx: { display: 'contents' }, children: [_jsx(Box, { as: "dt", sx: { color: 'fg.muted' }, children: key }), _jsx(Box, { as: "dd", sx: { m: 0, minWidth: 0 }, "data-sandbox-fact": key, children: value })] }, key))) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "Variables" }), sandboxIsLive(sandbox) ? (_jsx(KernelVariables, { connection: connection, execute: execute, maxHeight: "calc(80vh - 360px)" })) : (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, "data-sandbox-not-running": "", children: NO_SANDBOX_YET }))] })] }) }));
+                                            : ''] }), sandbox.status && _jsx(StatusLabel, { status: sandbox.status })] }), _jsx(Box, { as: "dl", display: "grid", gridTemplateColumns: "max-content minmax(0, 1fr)", columnGap: 3, rowGap: 1, m: 0, fontSize: 1, alignItems: "center", children: facts.map(([key, value]) => (_jsxs(Box, { display: "contents", children: [_jsx(Box, { as: "dt", color: "fg.muted", children: key }), _jsx(Box, { as: "dd", m: 0, minWidth: 0, "data-sandbox-fact": key, children: value })] }, key))) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "Variables" }), sandboxIsLive(sandbox) ? (_jsx(KernelVariables, { connection: connection, execute: execute, maxHeight: "calc(80vh - 360px)" })) : (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, "data-sandbox-not-running": "", children: NO_SANDBOX_YET }))] })] }) }));
 }
 export default SandboxDetailsDialog;

package/lib/chat/assistant/SpeechBalloon.js

@@ -12,7 +12,7 @@ import { useChatWords } from '../ChatLanguage';
 /** The suggestions, as chips: each sends its prompt. */
 export function BalloonSuggestions({ suggestions, onSuggestion, }) {
     const chatText = useChatWords();
-    return (_jsx(Box, { role: "group", "aria-label": chatText.suggestions, "data-balloon-suggestions": "", sx: { display: 'flex', flexWrap: 'wrap', gap: 1, mt: 2 }, children: suggestions.map(suggestion => (_jsx(Button, { size: "small", "data-balloon-suggestion": suggestion.label, "aria-label": `Ask: ${suggestion.prompt}`, title: suggestion.prompt, onClick: () => onSuggestion(suggestion), sx: { borderRadius: 999 }, children: suggestion.label }, suggestion.label))) }));
+    return (_jsx(Box, { role: "group", "aria-label": chatText.suggestions, "data-balloon-suggestions": "", display: "flex", flexWrap: "wrap", gap: 1, mt: 2, children: suggestions.map(suggestion => (_jsx(Button, { size: "small", "data-balloon-suggestion": suggestion.label, "aria-label": `Ask: ${suggestion.prompt}`, title: suggestion.prompt, onClick: () => onSuggestion(suggestion), sx: { borderRadius: 999 }, children: suggestion.label }, suggestion.label))) }));
 }
 /** How tall the listed conversation grows before it scrolls, in pixels. */
 export const BALLOON_HISTORY_MAX_HEIGHT = 220;
@@ -30,7 +30,7 @@ export const BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT = 120;
  */
 export function BalloonHistoryLarge({ history, tool, attachment, }) {
     const chatText = useChatWords();
-    return (_jsxs(Box, { role: "log", "aria-label": chatText.conversation, "data-balloon-history-large": "", sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(BalloonChatItems, { items: withToolCall(history, tool), density: "comfortable" }), attachment ? _jsx(Box, { children: attachment }) : null] }));
+    return (_jsxs(Box, { role: "log", "aria-label": chatText.conversation, "data-balloon-history-large": "", display: "flex", flexDirection: "column", gap: 2, children: [_jsx(BalloonChatItems, { items: withToolCall(history, tool), density: "comfortable" }), attachment ? _jsx(Box, { children: attachment }) : null] }));
 }
 function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGHT, onExpand, tool, waiting = false, }) {
     const chatText = useChatWords();
@@ -56,26 +56,7 @@ function BalloonHistory({ history, onOpen, maxHeight = BALLOON_HISTORY_MAX_HEIGH
         observer.observe(content);
         return () => observer.disconnect();
     }, []);
-    return (_jsxs(Box, { "data-balloon-history": "", sx: { flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-header": "", onClick: onOpen, sx: {
-                    m: 0,
-                    p: 0,
-                    pb: 1,
-                    border: 0,
-                    bg: 'transparent',
-                    font: 'inherit',
-                    textAlign: 'left',
-                    cursor: 'pointer',
-                    fontSize: 0,
-                    fontWeight: 'semibold',
-                    color: 'fg.muted',
-                    '&:hover': { textDecoration: 'underline' },
-                }, children: conversationHeaderText(conversationCount(history), chatText) }), onExpand ? (_jsx(IconButton, { icon: ScreenFullIcon, size: "small", variant: "invisible", "aria-label": chatText.expandConversation, "data-balloon-history-expand": "", onClick: onExpand, sx: { position: 'absolute', top: '4px', right: '28px' } })) : null, _jsx(Box, { ref: listRef, role: "log", "aria-label": chatText.conversation, "data-balloon-history-list": "", sx: {
-                    maxHeight,
-                    overflowY: 'auto',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    pr: 1,
-                }, children: _jsx(BalloonChatItems, { items: withToolCall(history, tool), waiting: waiting }) })] }));
+    return (_jsxs(Box, { "data-balloon-history": "", flex: 1, minWidth: 0, display: "flex", flexDirection: "column", children: [_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-header": "", onClick: onOpen, m: 0, p: 0, pb: 1, border: 0, bg: "transparent", font: "inherit", textAlign: "left", cursor: "pointer", fontSize: 0, fontWeight: "semibold", color: "fg.muted", hover: { textDecoration: 'underline' }, children: conversationHeaderText(conversationCount(history), chatText) }), onExpand ? (_jsx(IconButton, { icon: ScreenFullIcon, size: "small", variant: "invisible", "aria-label": chatText.expandConversation, "data-balloon-history-expand": "", onClick: onExpand, sx: { position: 'absolute', top: '4px', right: '28px' } })) : null, _jsx(Box, { ref: listRef, role: "log", "aria-label": chatText.conversation, "data-balloon-history-list": "", maxHeight: maxHeight, overflowY: "auto", display: "flex", flexDirection: "column", pr: 1, children: _jsx(BalloonChatItems, { items: withToolCall(history, tool), waiting: waiting }) })] }));
 }
 export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, approval, decide, onDecisionActive, wide = false, onDismissPeek, display = 'history', tool, speaking = false, busy = false, attachment, history, onExpand, expandTitle, suggestions, onSuggestion, waiting = false, fullText, onExpandHistory, }) {
     const chatText = useChatWords();
@@ -94,33 +75,22 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
     const current = display === 'current';
     // History with messages to list: all of them, not the newest line alone.
     const listed = !current && history && history.length > 0 ? history : null;
-    return (_jsxs(Box, { "data-speech-balloon": "", "data-balloon-display": display, sx: {
+    return (_jsxs(Box, { "data-speech-balloon": "", "data-balloon-display": display, maxWidth: wide || listed || offered || whole || (current && attachment)
+            ? 300
+            : current
+                ? 260
+                : 280, px: 3, py: 2, color: "fg.default", border: "1px solid", borderRadius: "bubble", boxShadow: "shadow.medium", fontSize: 1, textAlign: "left", 
+        // Pixels, as strings: a number here is read as the theme's space
+        // scale (`-7` would be `-space[7]`, 48px).
+        bottom: side === 'above' ? `${above}px` : undefined, top: side === 'above' ? undefined : `${above}px`, sx: {
             position: 'absolute',
-            // Pixels, as strings: a number here is read as the theme's space
-            // scale (`-7` would be `-space[7]`, 48px).
-            ...(side === 'above'
-                ? { bottom: `${above}px` }
-                : { top: `${above}px` }),
             [align]: 0,
-            maxWidth: wide || listed || offered || whole || (current && attachment)
-                ? 300
-                : current
-                    ? 260
-                    : 280,
             width: wide || listed || offered || whole || (current && attachment)
                 ? 300
                 : 'max-content',
-            px: 3,
-            py: 2,
             bg: 'canvas.default',
-            color: 'fg.default',
-            border: '1px solid',
             // The current balloon is the agent's voice now: its accent's edge.
             borderColor: current ? 'accent.muted' : 'border.default',
-            borderRadius: 'var(--theme-radius-bubble, 16px)',
-            boxShadow: 'shadow.medium',
-            fontSize: 1,
-            textAlign: 'left',
             // The tail, toward what speaks.
             '&::after': {
                 content: '""',
@@ -135,7 +105,7 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                 borderColor: current ? 'accent.muted' : 'border.default',
                 transform: side === 'above' ? 'rotate(45deg)' : 'rotate(225deg)',
             },
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: 1 }, children: [current && !approval ? (
+        }, children: [_jsxs(Box, { display: "flex", alignItems: "flex-start", gap: 1, children: [current && !approval ? (
                     // Not a <button>: the body draws the chat's tool card, a button of
                     // its own, and a click on that card is the card's alone.
                     _jsx(Box, { role: "button", tabIndex: 0, "data-balloon-peek": "", onClick: (event) => {
@@ -150,45 +120,11 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                                 event.preventDefault();
                                 onOpen();
                             }
-                        }, sx: {
-                            flex: 1,
-                            minWidth: 0,
-                            m: 0,
-                            p: 0,
-                            border: 0,
-                            bg: 'transparent',
-                            color: 'inherit',
-                            font: 'inherit',
-                            textAlign: 'left',
-                            cursor: 'pointer',
-                        }, children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking, waiting: waiting, whole: whole, fullText: wholeText, onOverflow: setOverflowing }) })) : listed ? (_jsx(BalloonHistory, { history: listed, onOpen: onOpen, onExpand: onExpandHistory, tool: tool, waiting: waiting, maxHeight: attachment
+                        }, flex: 1, minWidth: 0, m: 0, p: 0, border: 0, bg: "transparent", color: "inherit", font: "inherit", textAlign: "left", cursor: "pointer", children: _jsx(CurrentBalloonBody, { text: text, tool: tool, busy: busy, speaking: speaking, waiting: waiting, whole: whole, fullText: wholeText, onOverflow: setOverflowing }) })) : listed ? (_jsx(BalloonHistory, { history: listed, onOpen: onOpen, onExpand: onExpandHistory, tool: tool, waiting: waiting, maxHeight: attachment
                             ? BALLOON_HISTORY_WITH_ATTACHMENT_MAX_HEIGHT
                             : BALLOON_HISTORY_MAX_HEIGHT })) : tool ? (
                     // The tool being called: the chat's card, not inside the peek's
                     // button (the card is a button of its own).
-                    _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(BalloonToolCall, { line: tool }) })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, sx: {
-                            flex: 1,
-                            minWidth: 0,
-                            m: 0,
-                            p: 0,
-                            border: 0,
-                            bg: 'transparent',
-                            color: 'inherit',
-                            font: 'inherit',
-                            textAlign: 'left',
-                            cursor: 'pointer',
-                            '&:hover': { textDecoration: 'underline' },
-                        }, children: _jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text }) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": chatText.dismiss, "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), current && !approval && !tool && (cut || overflowing || whole) ? (_jsx(Box, { as: "button", type: "button", "aria-expanded": whole, "data-balloon-whole": whole ? 'less' : 'more', onClick: () => setWhole(!whole), sx: {
-                    m: 0,
-                    mt: 1,
-                    p: 0,
-                    border: 0,
-                    bg: 'transparent',
-                    color: 'accent.fg',
-                    font: 'inherit',
-                    fontSize: 0,
-                    cursor: 'pointer',
-                    '&:hover': { textDecoration: 'underline' },
-                }, children: whole ? chatText.showLess : chatText.showMore })) : null, !current && !listed && waiting ? (_jsx(Box, { "data-balloon-waiting": "", sx: { mt: 1 }, children: _jsx(BalloonChatItems, { items: [], waiting: true }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: chatText.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: chatText.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: chatText.moreWaiting(approval.others) })) : null] })), offered && onSuggestion ? (_jsx(BalloonSuggestions, { suggestions: offered, onSuggestion: onSuggestion })) : null, attachment ? (_jsxs(Box, { "data-balloon-attachment": "", sx: { mt: 2, display: 'flex', flexDirection: 'column', gap: 1 }, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? chatText.theVisual, onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
+                    _jsx(Box, { flex: 1, minWidth: 0, children: _jsx(BalloonToolCall, { line: tool }) })) : (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", "data-balloon-more": more ? '' : undefined, onClick: onOpen, flex: 1, minWidth: 0, m: 0, p: 0, border: 0, bg: "transparent", color: "inherit", font: "inherit", textAlign: "left", cursor: "pointer", hover: { textDecoration: 'underline' }, children: _jsx(Box, { as: "span", role: "status", "aria-live": "polite", children: text }) })), onDismissPeek && !approval ? (_jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": chatText.dismiss, "data-balloon-dismiss": "", onClick: onDismissPeek, sx: { mt: '-4px', mr: '-8px', flexShrink: 0 } })) : null] }), current && !approval && !tool && (cut || overflowing || whole) ? (_jsx(Box, { as: "button", type: "button", "aria-expanded": whole, "data-balloon-whole": whole ? 'less' : 'more', onClick: () => setWhole(!whole), m: 0, mt: 1, p: 0, border: 0, bg: "transparent", color: "accent.fg", font: "inherit", fontSize: 0, cursor: "pointer", hover: { textDecoration: 'underline' }, children: whole ? chatText.showLess : chatText.showMore })) : null, !current && !listed && waiting ? (_jsx(Box, { "data-balloon-waiting": "", mt: 1, children: _jsx(BalloonChatItems, { items: [], waiting: true }) })) : null, approval && (_jsxs(Box, { "data-balloon-approval": approval.id, mt: 1, children: [_jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: approval.asks }), approval.why ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: approval.why })) : null, _jsxs(Box, { display: "flex", gap: 2, mt: 2, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approval.deciding, onClick: approval.onApprove, children: chatText.approve }), _jsx(Button, { size: "small", disabled: approval.deciding, onClick: approval.onDeny, children: chatText.deny })] }), approval.others > 0 ? (_jsx(Text, { as: "p", sx: { m: 0, mt: 1, color: 'fg.muted', fontSize: 0 }, children: chatText.moreWaiting(approval.others) })) : null] })), offered && onSuggestion ? (_jsx(BalloonSuggestions, { suggestions: offered, onSuggestion: onSuggestion })) : null, attachment ? (_jsxs(Box, { "data-balloon-attachment": "", mt: 2, display: "flex", flexDirection: "column", gap: 1, children: [attachment, onExpand ? (_jsx(BalloonExpandButton, { title: expandTitle ?? chatText.theVisual, onExpand: onExpand })) : null] })) : null, !current ? _jsx(ToolLineAnnouncer, { line: tool }) : null, decide && _jsx(DecisionAsk, { ask: decide, onActiveChange: onDecisionActive })] }));
 }
 export default SpeechBalloon;