@datalayer/agent-runtimes 1.3.75 → 1.3.79

package/lib/chat/ChatFloating.d.ts

@@ -26,6 +26,7 @@ import { type PresenceState } from './presence/presenceStatus';
 import type { AgentInspectorSink } from '../components/inspector/agentInspector';
 import type { AssistantMenuItem } from './assistant/AssistantContextMenu';
 import type { AssistantAbout } from './assistant/AssistantStage';
+import { type AssistantSandbox } from './assistant/assistantDetails';
 import type { ChatCommonProps, ChatViewMode, ThemeOverrides } from '../types';
 /**
  * A conversation the host draws in the floating window, in place of the
@@ -184,8 +185,17 @@ export interface ChatFloatingProps extends ChatCommonProps {
     onBalloonDisplayChange?: (display: BalloonDisplay) => void;
     /** Opens the host's character picker, from the assistant's menu. */
     onChangeCharacter?: () => void;
-    /** What the assistant's menu's *About* says. */
+    /**
+     * What the assistant's menu's *About* and *Agent Details…* say. The
+     * chat's own agent (its id and runtime, from `endpoint`) is described
+     * without it.
+     */
     about?: AssistantAbout;
+    /**
+     * The agent's code sandbox, for *Code Sandbox Details…*. Without it, the
+     * sandbox the agent's runtime reports (its codemode status), if any.
+     */
+    sandbox?: AssistantSandbox;
     /** The host's own entries of the assistant's menu. */
     contextMenu?: readonly AssistantMenuItem[];
     /**
@@ -200,5 +210,5 @@ export interface ChatFloatingProps extends ChatCommonProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, buttonGlow, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, sidebarMountPoint, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, showContextRing, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, assistantCharacter, balloonDisplay: balloonDisplayGiven, expandTarget, conversation, decisions, voice, inspector, onBalloonDisplayChange, onChangeCharacter, about, contextMenu, }: ChatFloatingProps): React.JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, buttonGlow, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, sidebarMountPoint, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, showContextRing, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, assistantCharacter, balloonDisplay: balloonDisplayGiven, expandTarget, conversation, decisions, voice, inspector, onBalloonDisplayChange, onChangeCharacter, about, sandbox, contextMenu, }: ChatFloatingProps): React.JSX.Element;
 export default ChatFloating;

package/lib/chat/ChatFloating.js

@@ -40,10 +40,12 @@ import { ConversationBalloonHeader, CurrentBalloonBody, } from './assistant/Ball
 import { DEFAULT_BALLOON_DISPLAY, conversationCount, newestToolLine, toolLineText, } from './assistant/toolLine';
 import { SpeechBalloon } from './assistant/SpeechBalloon';
 import { DEFAULT_ASSISTANT_CHARACTER, } from './assistant/characters';
-import { assistantStateOf, balloonHistoryOf, latestSaying, newestIsAnswer, keepAway, keptAway, ASSISTANT_WORDS, } from './assistant/state';
+import { assistantStateOf, latestSaying, newestIsAnswer, keepAway, keptAway, ASSISTANT_WORDS, } from './assistant/state';
 import { presenceState, presenceToolOf, } from './presence/presenceStatus';
 import { useChatOpen, useChatMessages, useChatStore, } from '../stores/chatStore';
 import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
+import { assistantSandboxOf, } from './assistant/assistantDetails';
+import { useAgentRuntimeCodemodeStatus } from '../stores/agentRuntimeStore';
 /**
  * Hook to detect mobile viewport
  */
@@ -70,7 +72,7 @@ const clamp = (value, max) => Math.max(8, Math.min(value, Math.max(8, max)));
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, buttonGlow = true, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, sidebarMountPoint = null, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, showContextRing = false, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching = false, launchingMessage, assistantCharacter = DEFAULT_ASSISTANT_CHARACTER, balloonDisplay: balloonDisplayGiven = DEFAULT_BALLOON_DISPLAY, expandTarget, conversation, decisions, voice, inspector, onBalloonDisplayChange, onChangeCharacter, about, contextMenu, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, buttonGlow = true, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, sidebarMountPoint = null, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, showContextRing = false, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching = false, launchingMessage, assistantCharacter = DEFAULT_ASSISTANT_CHARACTER, balloonDisplay: balloonDisplayGiven = DEFAULT_BALLOON_DISPLAY, expandTarget, conversation, decisions, voice, inspector, onBalloonDisplayChange, onChangeCharacter, about, sandbox, contextMenu, }) {
     // The chat's own send, once it can: what a suggestion in the balloon sends.
     const chatControls = useRef(null);
     const [suggestionPrompt, setSuggestionPrompt] = useState();
@@ -150,6 +152,8 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const [ownTool, setOwnTool] = useState();
     const [messageCount, setMessageCount] = useState(0);
     // The conversation's messages, listed in the closed `history` balloon.
+    // The chat's own items — its messages and tool calls — as it holds them:
+    // the balloon draws them with the chat's components.
     const [ownHistory, setOwnHistory] = useState([]);
     /*
      * Its voice (VOICE.md V1): the answers said by the speech service, as
@@ -273,7 +277,16 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     // The tool line, while its call runs or its turn goes on (T-23).
     const toolSaid = toolLine && (toolLine.phase === 'running' || atWork) ? toolLine : undefined;
     // Current: what is said now — thinking until the answer's words arrive.
-    const currentWords = atWork && !answering ? 'Thinking…' : saying?.text || undefined;
+    // The words as written (markdown, drawn by the chat's markdown), or cut
+    // to fit with the whole kept for *more*.
+    const currentWords = atWork && !answering
+        ? 'Thinking…'
+        : (saying?.more ? saying.text : saying?.markdown) || undefined;
+    const currentWhole = atWork && !answering
+        ? undefined
+        : saying?.more
+            ? saying.markdown
+            : undefined;
     // History: the closed balloon lists the conversation, not its newest line.
     const listedHistory = !showsCurrent && !conversation && ownHistory.length > 0
         ? ownHistory
@@ -303,6 +316,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                                 ? // Current: the words as they are written, whole.
                                     {
                                         text: currentWords ?? description,
+                                        fullText: currentWhole,
                                         more: saying?.more,
                                         speaking: answering && atWork,
                                         busy: atWork,
@@ -371,12 +385,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             ? previous
             : line);
         setMessageCount(conversationCount(items));
-        const listed = balloonHistoryOf(items);
-        setOwnHistory(previous => previous.length === listed.length &&
-            previous.every((message, index) => message.id === listed[index].id &&
-                message.text === listed[index].text)
-            ? previous
-            : listed);
+        setOwnHistory(items);
         setVoiceItems(items);
         const said = latestSaying(items);
         setSaying(previous => previous?.id === said?.id && previous?.text === said?.text
@@ -540,6 +549,34 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         showSkillsMenu,
         showTokenUsage,
     ]);
+    // What the assistant's menu says of the agent (*Agent Details…*): the
+    // host's words first, the chat's own agent and runtime under them.
+    const runtimeBase = endpoint?.match(/^(.*?)\/api\/v1\//)?.[1];
+    const agentAbout = useMemo(() => about || protocol?.agentId
+        ? {
+            name: title,
+            protocol: protocol?.type,
+            url: protocol?.endpoint,
+            agentId: protocol?.agentId,
+            apiBase: runtimeBase,
+            ...about,
+        }
+        : undefined, [about, protocol, title, runtimeBase]);
+    // Its sandbox (*Code Sandbox Details…*): the host's, or what its runtime
+    // reports.
+    const codemodeStatus = useAgentRuntimeCodemodeStatus();
+    const agentSandbox = useMemo(() => sandbox ??
+        assistantSandboxOf(codemodeStatus
+            ?.sandbox, { agentId: protocol?.agentId, serverUrl: runtimeBase }) ??
+        // An agent on a runtime can always have one: offered before it runs.
+        (protocol?.agentId && runtimeBase
+            ? {
+                kind: 'runtime',
+                status: 'not running',
+                agentId: protocol.agentId,
+                serverUrl: runtimeBase,
+            }
+            : undefined), [sandbox, codemodeStatus, protocol?.agentId, runtimeBase]);
     // Clear messages when endpoint/protocol changes (e.g., switching examples)
     useEffect(() => {
         clearStoreMessages();
@@ -1058,7 +1095,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     showAvatars: true,
                 }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: frontendTools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, showContextRing: showContextRing, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt ?? suggestionPrompt, inspector: inspector, showInformation: showInformation, onInformationClick: onInformationClick, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, voice: voice, voiceSpeaking: speakerState.speaking, onStopSpeaking: speaker ? stopSpeaking : undefined, ...panelProps, ...assistantChat, onLoadingChange: handleLoadingChange, onDisplayItemsChange: handleDisplayItemsChange, onSendReady: handleSendReady, children: conversationBalloon && currentOpen ? (
                 // Current: the one thing said or done now, over the composer.
-                _jsx(Box, { sx: { px: 3, pt: 3, pb: 2, overflow: 'hidden' }, children: _jsx(CurrentBalloonBody, { text: toolSaid ? undefined : (currentWords ?? description), tool: toolSaid, busy: atWork, speaking: answering && atWork, waiting: atWork && !answering }) })) : (children) }))] }));
+                _jsx(Box, { sx: { px: 3, pt: 3, pb: 2, overflow: 'hidden' }, children: _jsx(CurrentBalloonBody, { text: toolSaid ? undefined : (currentWords ?? description), fullText: toolSaid ? undefined : currentWhole, tool: toolSaid, busy: atWork, speaking: answering && atWork, waiting: atWork && !answering }) })) : (children) }))] }));
     /*
      * The floating popup's button. Words not yet heard make it blink for the
      * person's attention, until the chat is opened; hovered, they show in a
@@ -1118,7 +1155,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                             setSpeechMuted(!speechMuted);
                         },
                     }
-                    : undefined, onResetPosition: stageDrag.position ? stageDrag.reset : undefined, about: about, contextMenu: contextMenu })), showButton && !isOpen && !assistantShown && (_jsx(Box, { sx: {
+                    : undefined, onResetPosition: stageDrag.position ? stageDrag.reset : undefined, about: agentAbout, sandbox: agentSandbox, contextMenu: contextMenu })), showButton && !isOpen && !assistantShown && (_jsx(Box, { sx: {
                     ...getPositionStyles(),
                 }, children: _jsxs(Box, { sx: {
                         position: 'relative',

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

@@ -0,0 +1,21 @@
+/**
+ * *Agent Details…*, from the assistant's menu: the agent's `AgentDetails`
+ * in a dialog over the page. On an agent-runtimes server it reads what that
+ * server says of the agent (its spec, MCP servers, codemode, context); an
+ * agent in the page, or a peer known by its A2A card, is described by what
+ * its host knows: its Appspec, model and where it runs.
+ *
+ * Loaded when it is first opened, never with the character.
+ *
+ * @module chat/assistant/AgentDetailsDialog
+ */
+import type { JSX } from 'react';
+import type { AssistantAbout } from './AssistantStage';
+export type AgentDetailsDialogProps = {
+    about: AssistantAbout;
+    /** The character's name, when the agent has none of its own. */
+    name: string;
+    onClose: () => void;
+};
+export declare function AgentDetailsDialog({ about, name, onClose, }: AgentDetailsDialogProps): JSX.Element;
+export default AgentDetailsDialog;

package/lib/chat/assistant/AgentDetailsDialog.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Dialog } from '@primer/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { AgentDetails } from '../../agents/AgentDetails';
+export function AgentDetailsDialog({ about, name, onClose, }) {
+    // AgentDetails reads the runtime through react-query; a page that shows
+    // only a character has no client of its own.
+    const queries = useMemo(() => new QueryClient(), []);
+    const onRuntime = Boolean(about.agentId && about.apiBase);
+    return (_jsx(Dialog, { title: `${about.name ?? name} · Agent Details`, onClose: onClose, width: "xlarge", height: "large", children: _jsx("div", { "data-assistant-agent-details": "", children: _jsx(QueryClientProvider, { client: queries, children: _jsx(AgentDetails, { name: about.name ?? name, protocol: about.protocol ?? (onRuntime ? 'agent-runtimes' : 'browser'), url: about.url ?? '', messageCount: 0, agentId: about.agentId, apiBase: about.apiBase, onBack: onClose, showBackHeader: false, showUsage: onRuntime, padded: false, runtime: onRuntime, summary: {
+                        spec: about.spec,
+                        model: about.model,
+                        where: about.where,
+                        description: about.description,
+                        skills: about.skills,
+                    } }) }) }) }));
+}
+export default AgentDetailsDialog;

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

@@ -30,11 +30,13 @@ import { type AssistantCharacter } from './characters';
 import { type BalloonSuggestion } from './SpeechBalloon';
 import { type AssistantMenuItem } from './AssistantContextMenu';
 import type { AgentInspectorSink } from '../../components/inspector/agentInspector';
+import type { AssistantSandbox } from './assistantDetails';
 import { type BalloonExpandTarget, type BalloonVisual } from './BalloonVisual';
 import type { AssistantCharacterData } from './formats/types';
 import type { DecisionAsker } from './decisions';
-import type { BalloonDisplay, BalloonToolLine } from './toolLine';
-import { type AssistantAway, type AssistantState, type BalloonApproval, type BalloonHistoryMessage } from './state';
+import { type BalloonDisplay, type BalloonToolLine } from './toolLine';
+import type { DisplayItem } from '../../types/chat';
+import { type AssistantAway, type AssistantState, type BalloonApproval } from './state';
 /** What the assistant's *About* says. */
 export type AssistantAbout = {
     /** The agent's name, or its application's. */
@@ -45,6 +47,19 @@ export type AssistantAbout = {
     model?: string;
     /** Where it runs: `in your browser`, `on a runtime`. */
     where?: string;
+    /** What it does, in a sentence: its card's or its spec's description. */
+    description?: string;
+    /** What it can do: its card's skills. */
+    skills?: string[];
+    /**
+     * The agent on an agent-runtimes server, and that server: *Agent
+     * Details…* then reads its spec, MCP servers and codemode there.
+     */
+    agentId?: string;
+    apiBase?: string;
+    /** How it is reached (`a2a`, `ag-ui`, …) and where. */
+    protocol?: string;
+    url?: string;
 };
 /**
  * The entries of the assistant's menu, composed from what the host passes:
@@ -58,6 +73,10 @@ export declare function assistantMenuItems(options: {
     /** The conversation entry's label; `false` leaves it out. */
     conversationLabel?: string | false;
     inspect?: () => void;
+    /** Opens *Agent Details…*: offered where the host describes the agent. */
+    agentDetails?: () => void;
+    /** Opens *Code Sandbox Details…*: offered where the agent has a sandbox. */
+    sandboxDetails?: () => void;
     balloonDisplay?: BalloonDisplay;
     onBalloonDisplayChange?: (display: BalloonDisplay) => void;
     suggestions?: readonly BalloonSuggestion[];
@@ -123,6 +142,17 @@ export interface AssistantStageProps {
     open: boolean;
     /** Open or close the conversation. */
     onToggle: () => void;
+    /**
+     * What a click on the character does, when it is not `onToggle`: a team's
+     * member shows and hides its balloon, and its menu's conversation entry
+     * (*Ask Sales*) still does `onToggle`.
+     */
+    onCharacterClick?: () => void;
+    /**
+     * A key pressed on the focused character, after its own (the menu's):
+     * a team's member moves with the arrow keys.
+     */
+    onCharacterKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     /**
      * The peek while the conversation is closed: one short line — the agent's
      * newest words, as the Office Assistant said them (T-23), or a welcome —
@@ -149,7 +179,7 @@ export interface AssistantStageProps {
          * The conversation's messages (`history`): the balloon lists them all,
          * counted and scrolled, rather than the newest line alone.
          */
-        history?: readonly BalloonHistoryMessage[];
+        history?: readonly DisplayItem[];
         /**
          * The large visual `attachment` is the compact form of (a notebook):
          * the balloon offers *Expand*, and draws it large — into
@@ -211,8 +241,13 @@ export interface AssistantStageProps {
     };
     /** Puts it back where it started, after a drag: offered in its menu. */
     onResetPosition?: () => void;
-    /** What its menu's *About* says. */
+    /** What its menu's *About* and *Agent Details…* say. */
     about?: AssistantAbout;
+    /**
+     * The agent's code sandbox, when it has one: its menu offers *Code
+     * Sandbox Details…* — where it runs, and its variables.
+     */
+    sandbox?: AssistantSandbox;
     /** The host's or a plugin's own entries of its menu. */
     contextMenu?: readonly AssistantMenuItem[];
     /** Send it away (T-27): for the page, for the session, or for good. */
@@ -239,6 +274,17 @@ export interface AssistantStageProps {
      * and its neighbours, not a page somebody is working on.
      */
     stayPut?: boolean;
+    /**
+     * The agent's own name, used in place of the character's by its menu and
+     * its *Send … away*: `Sales`, where the character is a paper clip.
+     */
+    agentName?: string;
+    /**
+     * The figure's accessible name, in place of *Talk to <character>*:
+     * `Sales (in your browser)`. Given this or `agentName`, the character's
+     * name describes the figure instead (`aria-describedby`).
+     */
+    label?: string;
 }
 /** The openings of the mouth, by level: shut, a little, half, wide. */
 export declare function mouthOpening(level: number): 0 | 1 | 2 | 3;
@@ -247,5 +293,5 @@ export declare function mouthOpening(level: number): 0 | 1 | 2 | 3;
  * `data-assistant-mouth`, each frame, without drawing the character again.
  */
 export declare function useMouth(stageRef: RefObject<HTMLElement | null>, mouthLevel: (() => number) | undefined, speaking: boolean): void;
-export declare function AssistantStage({ character, state, size, place, stageRef, onDragStart, open, onToggle, balloon, insist, onDismiss, ownRef, decide, mouthLevel, stayPut, balloonDisplay, expandTarget, expandOnArrival, suggestions, onSuggestion, inspector, inspectAgent, conversationLabel, onBalloonDisplayChange, onStop, onNewChat, onClear, onChangeCharacter, speech, onResetPosition, about, contextMenu, }: AssistantStageProps): JSX.Element;
+export declare function AssistantStage({ character, state, size, place, stageRef, onDragStart, open, onToggle, onCharacterClick, onCharacterKeyDown, balloon, insist, onDismiss, ownRef, decide, mouthLevel, stayPut, balloonDisplay, expandTarget, expandOnArrival, suggestions, onSuggestion, inspector, inspectAgent, conversationLabel, onBalloonDisplayChange, onStop, onNewChat, onClear, onChangeCharacter, speech, onResetPosition, about, sandbox, contextMenu, agentName, label, }: AssistantStageProps): JSX.Element;
 export default AssistantStage;

package/lib/chat/assistant/AssistantStage.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useCallback, 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 { CommentDiscussionIcon, InfoIcon, MuteIcon, PencilIcon, PlusIcon, PulseIcon, ScreenNormalIcon, SquareFillIcon, TrashIcon, UnmuteIcon, 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 { BalloonHistoryLarge, SpeechBalloon, } from './SpeechBalloon';
@@ -10,6 +10,7 @@ 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 = {
@@ -63,6 +64,10 @@ const AWAY_CHOICES = [
 ];
 /** 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.
@@ -77,6 +82,22 @@ export function assistantMenuItems(options) {
             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',
@@ -335,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, suggestions, onSuggestion, inspector, inspectAgent, conversationLabel, onBalloonDisplayChange, onStop, onNewChat, onClear, onChangeCharacter, speech, onResetPosition, about, contextMenu, }) {
+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'
@@ -343,9 +364,14 @@ 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';
@@ -355,13 +381,19 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
     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 || menuAt !== null || inspecting || telling || 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);
@@ -379,6 +411,8 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
         onDismiss,
         conversationLabel,
         inspect: inspector ? () => setInspecting(true) : undefined,
+        agentDetails: about ? () => setDetailing('agent') : undefined,
+        sandboxDetails: sandbox ? () => setDetailing('sandbox') : undefined,
         balloonDisplay,
         onBalloonDisplayChange,
         suggestions,
@@ -410,7 +444,7 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
     const historyVisual = balloonDisplay !== 'current' && history && history.length > 0
         ? {
             id: 'balloon-history',
-            title: conversationHeaderText(history.length),
+            title: conversationHeaderText(conversationCount(history)),
             shrink: true,
             render: () => (_jsx(BalloonHistoryLarge, { history: history, tool: balloon?.tool, attachment: balloon?.attachment })),
         }
@@ -530,7 +564,8 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
                         : 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 }) })), _jsx(Box, { as: "button", type: "button", "aria-label": open ? `Close the conversation with ${name}` : `Talk to ${name}`, "aria-expanded": open, "aria-haspopup": "menu", ref: characterRef, "data-assistant-figure": "", onContextMenu: (event) => {
+                        !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 });
@@ -539,7 +574,9 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
                         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 &&
@@ -565,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,
@@ -583,13 +620,26 @@ 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(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();
@@ -598,7 +648,7 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
                     ['Spec', about.spec],
                     ['Model', about.model],
                     ['Runs', about.where],
-                    ['Character', name],
+                    ['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))) }))] }));

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