@datalayer/agent-runtimes 1.3.74 → 1.3.78

package/lib/chat/assistant/AssistantStage.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { Suspense, lazy, useCallback, useEffect, useId, useRef, useState, } from 'react';
 import { ActionList, ActionMenu, IconButton, useTheme } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { XIcon } from '@primer/octicons-react';
+import { CodeIcon, CommentDiscussionIcon, DependabotIcon, InfoIcon, MuteIcon, PencilIcon, PlusIcon, PulseIcon, ScreenNormalIcon, SquareFillIcon, TrashIcon, UnmuteIcon, XIcon, } from '@primer/octicons-react';
+import { Dialog, Text } from '@primer/react';
 import { assistantCharacter } from './characters';
-import { SpeechBalloon } from './SpeechBalloon';
+import { BalloonHistoryLarge, SpeechBalloon, } from './SpeechBalloon';
+import { conversationHeaderText } from './BalloonParts';
+import { AssistantContextMenu, LONG_PRESS_MS, opensContextMenu, } from './AssistantContextMenu';
 import { BalloonExpandContext, ExpandedVisual, focusExpanded, } from './BalloonVisual';
 import { SpriteCharacter } from './SpriteCharacter';
+import { conversationCount, } from './toolLine';
 import { ASSISTANT_OBSTACLES, POINTER_CALM_MS, boxesMeet, pointerNear, } from './state';
 /** The motions, by the state the stage is in. */
 const MOTIONS = {
@@ -58,6 +62,148 @@ const AWAY_CHOICES = [
     { away: 'session', label: 'Hide for this session' },
     { away: 'always', label: 'Don\u2019t show again' },
 ];
+/** The Agent Inspector's dialog: loaded when it is first asked for. */
+const AgentInspectorDialog = lazy(() => import('../../components/inspector/AgentInspectorDialog'));
+/** *Agent Details…*: loaded when it is first asked for. */
+const AgentDetailsDialog = lazy(() => import('./AgentDetailsDialog'));
+/** *Code Sandbox Details…*: loaded when it is first asked for. */
+const SandboxDetailsDialog = lazy(() => import('./SandboxDetailsDialog'));
+/**
+ * The entries of the assistant's menu, composed from what the host passes:
+ * each shows when what it does is there to do.
+ */
+export function assistantMenuItems(options) {
+    const items = [];
+    if (options.inspect) {
+        items.push({
+            id: 'inspect',
+            label: 'Inspect the agent…',
+            icon: PulseIcon,
+            onSelect: options.inspect,
+        });
+    }
+    if (options.agentDetails) {
+        items.push({
+            id: 'agent-details',
+            label: 'Agent Details…',
+            icon: DependabotIcon,
+            onSelect: options.agentDetails,
+        });
+    }
+    if (options.sandboxDetails) {
+        items.push({
+            id: 'sandbox-details',
+            label: 'Code Sandbox Details…',
+            icon: CodeIcon,
+            onSelect: options.sandboxDetails,
+        });
+    }
+    if (options.conversationLabel !== false) {
+        items.push({
+            id: 'conversation',
+            label: options.conversationLabel ??
+                (options.open ? 'Close the conversation' : 'Open the conversation'),
+            icon: CommentDiscussionIcon,
+            onSelect: options.onToggle,
+        });
+    }
+    if (options.busy && options.onStop) {
+        items.push({
+            id: 'stop',
+            label: 'Stop the turn',
+            icon: SquareFillIcon,
+            onSelect: options.onStop,
+        });
+    }
+    if (options.onNewChat) {
+        items.push({
+            id: 'new-chat',
+            label: 'New conversation',
+            icon: PlusIcon,
+            onSelect: options.onNewChat,
+        });
+    }
+    if (options.onClear) {
+        items.push({
+            id: 'clear',
+            label: 'Clear the conversation',
+            icon: TrashIcon,
+            onSelect: options.onClear,
+        });
+    }
+    if (options.suggestions?.length && options.onSuggestion) {
+        const send = options.onSuggestion;
+        for (const suggestion of options.suggestions) {
+            items.push({
+                id: `suggestion:${suggestion.label}`,
+                label: suggestion.label,
+                description: suggestion.prompt,
+                group: 'Suggestions',
+                disabled: options.busy,
+                onSelect: () => send(suggestion),
+            });
+        }
+    }
+    if (options.onBalloonDisplayChange) {
+        const change = options.onBalloonDisplayChange;
+        items.push({
+            id: 'balloon-history',
+            label: 'History',
+            group: 'Balloon',
+            checked: options.balloonDisplay !== 'current',
+            onSelect: () => change('history'),
+        }, {
+            id: 'balloon-current',
+            label: 'Current',
+            group: 'Balloon',
+            checked: options.balloonDisplay === 'current',
+            onSelect: () => change('current'),
+        });
+    }
+    if (options.onChangeCharacter) {
+        items.push({
+            id: 'character',
+            label: 'Change character…',
+            icon: PencilIcon,
+            onSelect: options.onChangeCharacter,
+        });
+    }
+    if (options.speech) {
+        items.push({
+            id: 'speech',
+            label: options.speech.muted ? 'Unmute speech' : 'Mute speech',
+            icon: options.speech.muted ? UnmuteIcon : MuteIcon,
+            onSelect: options.speech.onToggle,
+        });
+    }
+    if (options.onResetPosition) {
+        items.push({
+            id: 'reset-position',
+            label: 'Reset position',
+            icon: ScreenNormalIcon,
+            onSelect: options.onResetPosition,
+        });
+    }
+    if (options.about) {
+        items.push({
+            id: 'about',
+            label: `About ${options.name}`,
+            icon: InfoIcon,
+            onSelect: options.about,
+        });
+    }
+    items.push(...(options.extra ?? []));
+    for (const choice of AWAY_CHOICES) {
+        items.push({
+            id: `away:${choice.away}`,
+            label: choice.label,
+            group: 'Send away',
+            icon: XIcon,
+            onSelect: () => options.onDismiss(choice.away),
+        });
+    }
+    return items;
+}
 /** Room the balloon needs above the character before it goes below. */
 const BALLOON_ROOM = 200;
 /** A place's length in pixels, given as a number or as `"<n>px"`. */
@@ -210,7 +356,7 @@ export function useMouth(stageRef, mouthLevel, speaking) {
         };
     }, [stageRef, mouthLevel, speaking]);
 }
-export function AssistantStage({ character, state, size = 88, place, stageRef, onDragStart, open, onToggle, balloon, insist = false, onDismiss, ownRef, decide, mouthLevel, stayPut = false, balloonDisplay = 'history', expandTarget, expandOnArrival = false, }) {
+export function AssistantStage({ character, state, size = 88, place, stageRef, onDragStart, open, onToggle, onCharacterClick, onCharacterKeyDown, balloon, insist = false, onDismiss, ownRef, decide, mouthLevel, stayPut = false, balloonDisplay = 'history', expandTarget, expandOnArrival = false, suggestions, onSuggestion, inspector, inspectAgent, conversationLabel, onBalloonDisplayChange, onStop, onNewChat, onClear, onChangeCharacter, speech, onResetPosition, about, sandbox, contextMenu, agentName, label, }) {
     // A shipped one by id, a drawing contributed by a plugin (T-24), or a
     // character read from a file (T-26).
     const shipped = typeof character === 'string'
@@ -218,21 +364,69 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
         : 'Drawing' in character
             ? character
             : undefined;
-    const name = shipped
+    const characterName = shipped
         ? shipped.name
         : character.name;
+    // The agent's name where the host gives it, else the character's.
+    const name = agentName ?? characterName;
+    // The character, as the figure's description, when it is not its name.
+    const describedBy = useId();
+    const described = Boolean(agentName || label);
     // Drawn for the chat's colour mode: the dark drawing on a dark page (T-25).
     const { colorScheme } = useTheme();
     const colorMode = colorScheme?.startsWith('dark') ? 'dark' : 'light';
     const [hovered, setHovered] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
+    // Its own menu, where it was opened; the inspector and *About* it opens.
+    const [menuAt, setMenuAt] = useState(null);
+    const [inspecting, setInspecting] = useState(false);
+    const [telling, setTelling] = useState(false);
+    const [detailing, setDetailing] = useState(null);
+    const characterRef = useRef(null);
+    const longPress = useRef(undefined);
+    const closeMenu = useCallback(() => setMenuAt(null), []);
+    useEffect(() => () => clearTimeout(longPress.current), []);
     // Where the press began: a press that moves is a drag, not a click.
     const pressedAt = useRef(null);
-    const aside = useKeepClear(stageRef, ownRef, menuOpen || stayPut);
+    const aside = useKeepClear(stageRef, ownRef, menuOpen ||
+        menuAt !== null ||
+        inspecting ||
+        telling ||
+        detailing !== null ||
+        stayPut);
     useMouth(stageRef, mouthLevel, state === 'speaking');
     // A decision being asked, or its answer, keeps the balloon up.
     const [deciding, setDeciding] = useState(false);
     const showBalloon = !aside && !open && !!balloon && (hovered || insist || deciding);
+    // Suggestions while it waits for a question.
+    const waitsForQuestion = (state === 'idle' || state === 'greeting') &&
+        !balloon?.tool &&
+        !balloon?.approval &&
+        !balloon?.busy;
+    const busy = state === 'thinking' || state === 'working' || state === 'speaking';
+    const menuItems = assistantMenuItems({
+        name,
+        open,
+        onToggle,
+        onDismiss,
+        conversationLabel,
+        inspect: inspector ? () => setInspecting(true) : undefined,
+        agentDetails: about ? () => setDetailing('agent') : undefined,
+        sandboxDetails: sandbox ? () => setDetailing('sandbox') : undefined,
+        balloonDisplay,
+        onBalloonDisplayChange,
+        suggestions,
+        onSuggestion,
+        busy,
+        onStop,
+        onNewChat,
+        onClear,
+        onChangeCharacter,
+        speech,
+        onResetPosition,
+        about: about ? () => setTelling(true) : undefined,
+        extra: contextMenu,
+    });
     // The large visual drawn now: kept while the balloon moves on to other
     // words, until it is closed or another one is expanded.
     const visual = balloon?.visual;
@@ -245,6 +439,17 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
             }
         }
         : null;
+    // The history, large: drawn from the balloon's messages as they are now.
+    const history = balloon?.history;
+    const historyVisual = balloonDisplay !== 'current' && history && history.length > 0
+        ? {
+            id: 'balloon-history',
+            title: conversationHeaderText(conversationCount(history)),
+            shrink: true,
+            render: () => (_jsx(BalloonHistoryLarge, { history: history, tool: balloon?.tool, attachment: balloon?.attachment })),
+        }
+        : null;
+    const shown = expanded?.id === 'balloon-history' ? historyVisual : expanded;
     useEffect(() => {
         if (visual && expandOnArrival && expandTarget) {
             setExpanded(visual);
@@ -349,8 +554,46 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
             '@media (prefers-reduced-motion: reduce)': {
                 '& *': { animation: 'none !important' },
             },
-        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [expanded && (_jsx(ExpandedVisual, { visual: expanded, target: expandTarget, onClose: () => setExpanded(null) })), showBalloon && balloon && (_jsx(BalloonExpandContext.Provider, { value: expand, children: _jsx(SpeechBalloon, { text: balloon.text, more: balloon.more, approval: balloon.approval, onDismissPeek: balloon.onDismiss, display: balloonDisplay, tool: balloon.tool, speaking: balloon.speaking, busy: balloon.busy, attachment: balloon.attachment, history: balloon.history, onExpand: expand ?? undefined, expandTitle: visual?.title, decide: decide, onDecisionActive: setDeciding, wide: deciding, onOpen: onToggle, above: size + 8, side: balloonSide(place).side, align: balloonSide(place).align, tailAt: size / 2 }) })), _jsx(Box, { as: "button", type: "button", "aria-label": open ? `Close the conversation with ${name}` : `Talk to ${name}`, "aria-expanded": open, onPointerDown: (event) => {
+        }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [shown && (_jsx(ExpandedVisual, { visual: shown, target: expandTarget, onClose: () => setExpanded(null) })), showBalloon && balloon && (_jsx(BalloonExpandContext.Provider, { value: expand, children: _jsx(SpeechBalloon, { text: balloon.text, more: balloon.more, approval: balloon.approval, onDismissPeek: balloon.onDismiss, display: balloonDisplay, tool: balloon.tool, speaking: balloon.speaking, busy: balloon.busy, attachment: balloon.attachment, history: balloon.history, onExpand: expand ?? undefined, expandTitle: visual?.title, onExpandHistory: historyVisual
+                        ? () => {
+                            setExpanded(historyVisual);
+                            if (expandTarget) {
+                                requestAnimationFrame(() => focusExpanded(expandTarget));
+                            }
+                        }
+                        : undefined, suggestions: waitsForQuestion ? suggestions : undefined, fullText: balloon.fullText, waiting: (state === 'thinking' ||
+                        state === 'working' ||
+                        state === 'waiting') &&
+                        !balloon.speaking, onSuggestion: onSuggestion, decide: decide, onDecisionActive: setDeciding, wide: deciding, onOpen: onToggle, above: size + 8, side: balloonSide(place).side, align: balloonSide(place).align, tailAt: size / 2 }) })), _jsxs(Box, { as: "button", type: "button", "aria-label": label ??
+                    (open ? `Close the conversation with ${name}` : `Talk to ${name}`), "aria-describedby": described ? describedBy : undefined, "aria-expanded": open, "aria-haspopup": "menu", ref: characterRef, "data-assistant-figure": "", onContextMenu: (event) => {
+                    event.preventDefault();
+                    clearTimeout(longPress.current);
+                    setMenuAt({ x: event.clientX, y: event.clientY });
+                }, onKeyDown: (event) => {
+                    if (opensContextMenu(event)) {
+                        event.preventDefault();
+                        const box = event.currentTarget.getBoundingClientRect();
+                        setMenuAt({ x: box.left + box.width / 2, y: box.bottom });
+                        return;
+                    }
+                    onCharacterKeyDown?.(event);
+                }, onPointerUp: () => clearTimeout(longPress.current), onPointerCancel: () => clearTimeout(longPress.current), onPointerMove: (event) => {
+                    const from = pressedAt.current;
+                    if (from &&
+                        Math.hypot(event.clientX - from.x, event.clientY - from.y) > 8) {
+                        clearTimeout(longPress.current);
+                    }
+                }, onPointerDown: (event) => {
                     pressedAt.current = { x: event.clientX, y: event.clientY };
+                    if (event.pointerType === 'touch') {
+                        const at = { x: event.clientX, y: event.clientY };
+                        clearTimeout(longPress.current);
+                        longPress.current = setTimeout(() => {
+                            // Held, not tapped: the menu, and no click after it.
+                            pressedAt.current = { x: -1e6, y: -1e6 };
+                            setMenuAt(at);
+                        }, LONG_PRESS_MS);
+                    }
                     onDragStart(event);
                 }, onClick: (event) => {
                     const from = pressedAt.current;
@@ -359,7 +602,7 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
                         Math.hypot(event.clientX - from.x, event.clientY - from.y) > 4) {
                         return;
                     }
-                    onToggle();
+                    (onCharacterClick ?? onToggle)();
                 }, sx: {
                     display: 'block',
                     width: size,
@@ -377,10 +620,37 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
                         outlineOffset: 2,
                         borderRadius: '50%',
                     },
-                }, children: shipped ? (_jsx(shipped.Drawing, { size: size, mode: colorMode })) : (_jsx(SpriteCharacter, { character: character, state: state, size: size })) }), (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: {
+                }, 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 }))] }), (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: {
                                     bg: 'canvas.default',
                                     borderRadius: '50%',
                                     boxShadow: 'shadow.small',
-                                } }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: AWAY_CHOICES.map(choice => (_jsx(ActionList.Item, { "data-assistant-away": choice.away, onSelect: () => onDismiss(choice.away), children: choice.label }, choice.away))) }) })] }) }))] }));
+                                } }) }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { children: AWAY_CHOICES.map(choice => (_jsx(ActionList.Item, { "data-assistant-away": choice.away, onSelect: () => onDismiss(choice.away), children: choice.label }, choice.away))) }) })] }) })), _jsx(AssistantContextMenu, { at: menuAt, items: menuItems, onClose: closeMenu, returnFocusRef: characterRef, label: `${name}\u2019s menu` }), inspecting && (_jsx(Suspense, { fallback: null, children: _jsx(AgentInspectorDialog, { sink: inspector ?? null, agent: inspectAgent, title: `${about?.name ?? name} \u00b7 Agent Inspector`, onClose: () => {
+                        setInspecting(false);
+                        characterRef.current?.focus();
+                    } }) })), detailing === 'agent' && about && (_jsx(Suspense, { fallback: null, children: _jsx(AgentDetailsDialog, { about: about, name: name, onClose: () => {
+                        setDetailing(null);
+                        characterRef.current?.focus();
+                    } }) })), detailing === 'sandbox' && sandbox && (_jsx(Suspense, { fallback: null, children: _jsx(SandboxDetailsDialog, { sandbox: sandbox, name: about?.name ?? name, onClose: () => {
+                        setDetailing(null);
+                        characterRef.current?.focus();
+                    } }) })), telling && about && (_jsx(Dialog, { title: `About ${about.name ?? name}`, onClose: () => {
+                    setTelling(false);
+                    characterRef.current?.focus();
+                }, "data-assistant-about": "", children: [
+                    ['Agent', about.name],
+                    ['Spec', about.spec],
+                    ['Model', about.model],
+                    ['Runs', about.where],
+                    ['Character', characterName],
+                ]
+                    .filter(([, value]) => value)
+                    .map(([key, value]) => (_jsxs(Text, { as: "p", sx: { m: 0, mb: 1 }, children: [_jsxs(Text, { sx: { color: 'fg.muted' }, children: [key, ": "] }), value] }, key))) }))] }));
 }
 export default AssistantStage;

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

@@ -7,15 +7,29 @@
  * @module chat/assistant/BalloonParts
  */
 import type { JSX, ReactNode } from 'react';
+import { type ChatDensity } from '../messages/ChatMarkdown';
+import type { DisplayItem } from '../../types/chat';
 import { type BalloonToolLine } from './toolLine';
 /**
- * A tool call in the balloon, in plain words: its mark when the catalogue
- * gives one (an MCP server's, a skill's, a tool set's), else a tool; "Using
- * **list_invoices**…", "Done: **list_invoices**", "**list_invoices** failed".
+ * The conversation's items in the balloon, drawn by the chat's own
+ * components (`ChatMessageList`): markdown, code blocks, tool calls and
+ * their approvals, notes, the three dots — in the compact density, or the
+ * chat's own when drawn large.
+ */
+export declare function BalloonChatItems({ items, density, waiting, }: {
+    items: readonly DisplayItem[];
+    density?: ChatDensity;
+    /** At work with nothing written yet: the chat's dots, last. */
+    waiting?: boolean;
+}): JSX.Element;
+/**
+ * The tool being called, in the balloon: the chat's tool call card, compact,
+ * with its runtime's own words (`Asking Accounting…`) as its summary.
  * Seen, not read out: {@link ToolLineAnnouncer} says it once per change.
  */
-export declare function BalloonToolLineView({ line, }: {
+export declare function BalloonToolCall({ line, waiting, }: {
     line: BalloonToolLine;
+    waiting?: boolean;
 }): JSX.Element;
 /**
  * What a screen reader hears of the tool lines, politely: once when a call
@@ -45,10 +59,24 @@ export declare function ConversationBalloonHeader({ count, }: {
  * done — the tool line while a tool runs, else the words — cut to a few
  * lines, never scrolled; and what goes with them (`attachment`).
  */
-export declare function CurrentBalloonBody({ text, tool, busy, speaking, attachment, }: {
+export declare function CurrentBalloonBody({ text, tool, busy, speaking, attachment, waiting, whole, fullText, onOverflow, }: {
+    /**
+     * Shown whole: the full text (`fullText`, else `text`), unclamped, in a
+     * taller box that scrolls.
+     */
+    whole?: boolean;
+    /** The text uncut, when `text` was cut to fit (`…`). */
+    fullText?: string;
+    /** Whether the clamped text overflows its lines: *more* has more to show. */
+    onOverflow?: (overflowing: boolean) => void;
     text?: string;
     tool?: BalloonToolLine;
     busy?: boolean;
+    /**
+     * At work with nothing written yet (thinking, working, waiting): the
+     * chat's three dots follow the line, or stand alone.
+     */
+    waiting?: boolean;
     /** Words are arriving: read out once they have. */
     speaking?: boolean;
     attachment?: ReactNode;

package/lib/chat/assistant/BalloonParts.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { CheckIcon, ToolsIcon, XIcon } from '@primer/octicons-react';
-import { SpecMark, hasMark, marksOfToolCall } from '../marks';
-import { toolAnnouncement, toolLineParts, } from './toolLine';
+import { TypingDots } from '../indicators/TypingDots';
+import { ChatMessageList } from '../messages/ChatMessageList';
+import { ChatMarkdown } from '../messages/ChatMarkdown';
+import { agentRuntimeStore } from '../../stores/agentRuntimeStore';
+import { toolAnnouncement, displayItemOfLine, } from './toolLine';
 /** Out of sight, still heard. */
 const VISUALLY_HIDDEN = {
     position: 'absolute',
@@ -14,42 +16,48 @@ const VISUALLY_HIDDEN = {
     clip: 'rect(0 0 0 0)',
     whiteSpace: 'nowrap',
 };
-const PHASE_COLOR = {
-    running: 'fg.muted',
-    done: 'success.fg',
-    failed: 'danger.fg',
+/** How the balloon's chat items know their people: no avatars are drawn. */
+const BALLOON_AVATARS = {
+    userAvatar: null,
+    assistantAvatar: null,
+    showAvatars: false,
+    avatarSize: 0,
+    userAvatarBg: 'neutral.muted',
+    assistantAvatarBg: 'accent.emphasis',
 };
 /**
- * A tool call in the balloon, in plain words: its mark when the catalogue
- * gives one (an MCP server's, a skill's, a tool set's), else a tool; "Using
- * **list_invoices**…", "Done: **list_invoices**", "**list_invoices** failed".
+ * Inline approvals answered in the balloon go where the chat's go: the
+ * shared monitoring socket.
+ */
+async function respondInBalloon(_toolCallId, result) {
+    if (result && typeof result === 'object') {
+        const record = result;
+        if (record.type === 'tool-approval-decision' &&
+            typeof record.approved === 'boolean' &&
+            typeof record.approvalId === 'string') {
+            agentRuntimeStore
+                .getState()
+                .sendDecision(record.approvalId, record.approved);
+        }
+    }
+}
+/**
+ * The conversation's items in the balloon, drawn by the chat's own
+ * components (`ChatMessageList`): markdown, code blocks, tool calls and
+ * their approvals, notes, the three dots — in the compact density, or the
+ * chat's own when drawn large.
+ */
+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 }) }));
+}
+/**
+ * The tool being called, in the balloon: the chat's tool call card, compact,
+ * with its runtime's own words (`Asking Accounting…`) as its summary.
  * Seen, not read out: {@link ToolLineAnnouncer} says it once per change.
  */
-export function BalloonToolLineView({ line, }) {
-    const { before, name, after } = toolLineParts(line);
-    const marks = line.tool ? marksOfToolCall(line.tool, undefined) : null;
-    const Icon = line.phase === 'done'
-        ? CheckIcon
-        : line.phase === 'failed'
-            ? XIcon
-            : ToolsIcon;
-    return (_jsxs(Box, { as: "span", "aria-hidden": "true", "data-balloon-tool": line.phase, "data-balloon-tool-name": line.tool || undefined, sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            minWidth: 0,
-            maxWidth: '100%',
-            color: line.phase === 'failed' ? 'danger.fg' : 'fg.default',
-        }, children: [_jsx(Box, { as: "span", sx: {
-                    display: 'inline-flex',
-                    flexShrink: 0,
-                    color: PHASE_COLOR[line.phase],
-                }, children: line.phase === 'running' && hasMark(marks) ? (_jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 14 })) : (_jsx(Icon, { size: 14 })) }), _jsxs(Box, { as: "span", sx: {
-                    minWidth: 0,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                }, children: [before, name ? (_jsx(Box, { as: "strong", sx: { fontWeight: 'semibold' }, children: name })) : null, after] })] }));
+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 }) }));
 }
 /**
  * What a screen reader hears of the tool lines, politely: once when a call
@@ -129,12 +137,26 @@ export function ConversationBalloonHeader({ count, }) {
  * done — the tool line while a tool runs, else the words — cut to a few
  * lines, never scrolled; and what goes with them (`attachment`).
  */
-export function CurrentBalloonBody({ text, tool, busy = false, speaking = false, attachment, }) {
-    return (_jsxs(Box, { "data-balloon-current": "", sx: { display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 }, children: [_jsx(BalloonNow, { busy: busy }), tool ? (_jsx(BalloonToolLineView, { line: tool })) : text ? (_jsx(Box, { "aria-live": "polite", "aria-busy": speaking, "data-balloon-current-text": "", sx: {
-                    display: '-webkit-box',
-                    WebkitLineClamp: 4,
-                    WebkitBoxOrient: 'vertical',
-                    overflow: 'hidden',
-                    overflowWrap: 'anywhere',
-                }, children: text })) : null, attachment, _jsx(ToolLineAnnouncer, { line: tool })] }));
+export function CurrentBalloonBody({ text, tool, busy = false, speaking = false, attachment, waiting = false, whole = false, fullText, onOverflow, }) {
+    const textRef = useRef(null);
+    useLayoutEffect(() => {
+        const element = textRef.current;
+        if (!element || whole || !onOverflow) {
+            return;
+        }
+        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 })] }));
 }

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

@@ -19,8 +19,16 @@ export interface BalloonVisual {
     id: string;
     /** What it is: `Accounting's notebook`; the dialog's title. */
     title: string;
-    /** The visual, large: drawn only once it is expanded. */
-    render: () => ReactNode;
+    /**
+     * The visual, large: drawn only once it is expanded — in the page's
+     * target, or in a dialog, which already shows `title`.
+     */
+    render: (place: 'target' | 'overlay') => ReactNode;
+    /**
+     * Large, it shrinks back into the balloon (*Shrink*) rather than closes:
+     * the balloon's own content drawn large, such as its history.
+     */
+    shrink?: boolean;
 }
 /** Where an expanded visual goes: an element of the page, or none (a dialog). */
 export type BalloonExpandTarget = RefObject<HTMLElement | null>;

package/lib/chat/assistant/BalloonVisual.js

@@ -3,7 +3,7 @@ import { createContext, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { Button, Dialog, IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { ScreenFullIcon, XIcon } from '@primer/octicons-react';
+import { ScreenFullIcon, ScreenNormalIcon, XIcon, } from '@primer/octicons-react';
 /**
  * Expands the visual of the balloon it is in: what its compact form (a
  * notebook's preview) calls when it is clicked. None outside such a balloon.
@@ -29,14 +29,15 @@ 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: XIcon, size: "small", variant: "invisible", "aria-label": `Close ${visual.title}`, "data-balloon-expanded-close": "", onClick: onClose }) }), visual.render()] }), element);
+        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);
     }
+    // The dialog's × (and Esc) is what shrinks it back: no Shrink of its own.
     return (_jsx(Dialog, { title: visual.title, onClose: onClose, sx: {
             width: EXPANDED_DIALOG_SIZE.width,
             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() }) }));
+        }, children: _jsx(Box, { "data-balloon-expanded": "overlay", "data-balloon-visual": visual.id, sx: { minWidth: 0 }, children: visual.render('overlay') }) }));
 }
 /**
  * Brings an expanded visual into view in its target: scrolled to, and the

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

@@ -0,0 +1,44 @@
+/**
+ * *Code Sandbox Details…*, from the assistant's menu: where the agent's
+ * code runs, and what is in it.
+ *
+ * A compact summary first — the kind and where, its URL (without its
+ * tokens), the kernel (name, id, language, status), a cloud runtime's uid,
+ * environment and time left, a local server's agent, Pyodide's version and
+ * packages, when it started and was last active — each field shown only
+ * when it is known. Then the kernel's variables: jupyter-react's
+ * `KernelVariables`, with its renderers, ipywidgets drawn live where the
+ * page talks to the kernel.
+ *
+ * How the variables are read, by what the page can reach:
+ * - a kernel connection the host holds (the browser's Pyodide kernel):
+ *   listed live, refreshed after each execution;
+ * - a Jupyter server and the sandbox's kernel id (a local server, a cloud
+ *   runtime): a connection to that kernel is opened here, and closed with
+ *   the dialog;
+ * - neither (an `eval` sandbox, a provider's, a server whose token the page
+ *   does not hold): the agent-runtimes server runs the same snippet in the
+ *   agent's sandbox (`POST /api/v1/sandbox/execute`), listed on demand.
+ *
+ * Loaded when it is first opened, never with the character.
+ *
+ * @module chat/assistant/SandboxDetailsDialog
+ */
+import type { JSX } from 'react';
+import { type AssistantSandbox } from './assistantDetails';
+export type SandboxDetailsDialogProps = {
+    sandbox: AssistantSandbox;
+    /** The agent's name, for the title. */
+    name: string;
+    onClose: () => void;
+};
+/** Pyodide's version and loaded packages, asked of the kernel. */
+type PyodideFacts = {
+    version?: string;
+    python?: string;
+    packages: string[];
+};
+/** Pyodide's facts out of what the snippet printed. */
+export declare function parsePyodideFacts(stdout: string): PyodideFacts | undefined;
+export declare function SandboxDetailsDialog({ sandbox, name, onClose, }: SandboxDetailsDialogProps): JSX.Element;
+export default SandboxDetailsDialog;