@datalayer/agent-runtimes 1.3.75 → 1.3.79

package/lib/chat/messages/ChatMessageList.js

@@ -14,13 +14,12 @@ import { Fragment, useState, useCallback, useEffect, useMemo, useRef, } from 're
 import { Text, Spinner, Link, Label, RelativeTime } from '@primer/react';
 import { ArrowRightIcon, BroadcastIcon, ClockIcon, DependabotIcon, PersonIcon, SkipIcon, ToolsIcon, XCircleFillIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { Streamdown } from 'streamdown';
-import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
+import { streamdownCodeBlockStyles } from '../styles/streamdownStyles';
+import { ChatMarkdown } from './ChatMarkdown';
 import { ToolCallDisplay } from '../tools/ToolCallDisplay';
 import { marksOfToolCall, skillIdOfCall } from '../marks';
 import { TypingDots } from '../indicators/TypingDots';
 import { TurnFooter } from './TurnFooter';
-import { normalizeAssistantMarkdown } from './assistantMarkdown';
 import { parseFormSubmission } from './formSubmission';
 import { FormSubmissionMessage } from './FormSubmissionMessage';
 import { isToolCallMessage, getMessageText } from '../../utils';
@@ -263,7 +262,7 @@ export function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint,
 // DefaultToolCallRenderer — reads approvals from the Zustand store,
 // sends decisions over the shared WebSocket (no REST polling).
 // ---------------------------------------------------------------------------
-function DefaultToolCallRenderer({ item, onRespond, mcpServers, }) {
+function DefaultToolCallRenderer({ item, onRespond, mcpServers, density, }) {
     const resultObject = item.result && typeof item.result === 'object'
         ? item.result
         : undefined;
@@ -379,12 +378,18 @@ function DefaultToolCallRenderer({ item, onRespond, mcpServers, }) {
                     ? () => makeDecision('approve')
                     : undefined, onDeny: effectiveApprovalId && !decision && !externalDecision
                     ? () => makeDecision('reject')
-                    : undefined, approvalLoading: false, marks: marks }), isSubagentDelegation && (_jsx(SubagentChatPanel, { toolCallId: item.toolCallId, subagentName: delegatedSubagentName }))] }));
+                    : undefined, approvalLoading: false, marks: marks, summary: item.summary, density: density }), isSubagentDelegation && (_jsx(SubagentChatPanel, { toolCallId: item.toolCallId, subagentName: delegatedSubagentName }))] }));
 }
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, showTurnFooters = false, agentUsage, onRemoveItems, renderMessageFooter, mcpServers, }) {
+export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, showTurnFooters = false, agentUsage, onRemoveItems, renderMessageFooter, mcpServers, density = 'comfortable', }) {
+    const compact = density === 'compact';
+    if (compact) {
+        // The balloon's: no avatars, no turn footers.
+        avatarConfig = { ...avatarConfig, showAvatars: false };
+        showTurnFooters = false;
+    }
     if (displayItems.length === 0) {
         return _jsx(_Fragment, { children: emptyContent });
     }
@@ -486,7 +491,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                   not care about hid those tools entirely. Offering the default as a
                   node lets it compose instead of choosing.
                 */
-            const defaultUI = (_jsx(DefaultToolCallRenderer, { item: item, approvalConfig: approvalConfig, onRespond: createRespondCallback(item.toolCallId), mcpServers: mcpServers }));
+            const defaultUI = (_jsx(DefaultToolCallRenderer, { item: item, approvalConfig: approvalConfig, onRespond: createRespondCallback(item.toolCallId), mcpServers: mcpServers, density: density }));
             const toolUI = renderToolResult
                 ? renderToolResult({
                     toolCallId: item.toolCallId,
@@ -502,7 +507,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                 : defaultUI;
             if (toolUI === null || toolUI === undefined)
                 return null;
-            return (_jsx(Box, { sx: {
+            return (_jsx(Box, { "data-chat-tool-row": item.toolName, sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-start',
@@ -517,7 +522,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                         */
                     width: '100%',
                     px: padding,
-                    py: 1,
+                    py: compact ? '2px' : 1,
                 }, children: toolUI }, item.id));
         }
         // ---- Chat message item ----
@@ -586,12 +591,12 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                 }
             }
         }
-        return (_jsx(Box, { sx: {
+        return (_jsx(Box, { "data-chat-message": message.role, sx: {
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: isUser ? 'flex-end' : 'flex-start',
                 px: padding,
-                py: 1,
+                py: compact ? '2px' : 1,
             }, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     gap: 2,
@@ -635,7 +640,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                             ? speaker.initials || '?'
                             : isUser
                                 ? avatarConfig.userAvatar
-                                : avatarConfig.assistantAvatar })), _jsxs(Box, { sx: { maxWidth: '85%', minWidth: 0 }, children: [speaker ? (_jsxs(Box, { sx: {
+                                : avatarConfig.assistantAvatar })), _jsxs(Box, { sx: { maxWidth: compact ? '92%' : '85%', minWidth: 0 }, children: [speaker ? (_jsxs(Box, { sx: {
                                     display: 'flex',
                                     gap: 2,
                                     alignItems: 'baseline',
@@ -657,7 +662,8 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                                     fontSize: 1,
                                                     color: toneColorsOf(message.directedTo.tone).fg,
                                                 }, children: message.directedTo.name })] })) : speaker.role ? (_jsx(Label, { size: "small", children: speaker.role })) : null, message.createdAt ? (_jsx(RelativeTime, { datetime: message.createdAt.toISOString(), sx: { fontSize: 0, color: 'fg.muted' } })) : null] })) : null, _jsxs(Box, { sx: {
-                                    p: 2,
+                                    p: compact ? 1 : 2,
+                                    px: compact ? 2 : 2,
                                     overflowX: 'auto',
                                     // The theme's bubble (LOOP T-03, T-06): today's 6px elsewhere.
                                     borderRadius: 'var(--theme-radius-bubble, 6px)',
@@ -696,7 +702,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                         const text = getMessageText(message);
                                         const submission = parseFormSubmission(text);
                                         return submission ? (_jsx(FormSubmissionMessage, { submission: submission })) : (_jsxs(Text, { sx: {
-                                                fontSize: 1,
+                                                fontSize: compact ? 0 : 1,
                                                 whiteSpace: 'pre-wrap',
                                                 wordBreak: 'break-word',
                                             }, children: [message.metadata?.input === 'voice' ? (_jsx(Box, { as: "span", "data-spoken": "", title: "Said aloud", "aria-label": "Said aloud:", sx: {
@@ -705,7 +711,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                                         mr: 1,
                                                         opacity: 0.85,
                                                     }, children: _jsx(MicrophoneIcon, { size: 14, "aria-hidden": "true" }) })) : null, text] }));
-                                    })()) : message.live && !getMessageText(message) ? (_jsx(TypingDots, { size: 6 })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: normalizeAssistantMarkdown(getMessageText(message) || (isStreaming ? '...' : '')) }) }))] }), renderMessageFooter ? (_jsx(Box, { sx: {
+                                    })()) : message.live && !getMessageText(message) ? (_jsx(TypingDots, { size: 6 })) : (_jsx(ChatMarkdown, { density: density, text: getMessageText(message) || (isStreaming ? '...' : '') }))] }), renderMessageFooter ? (_jsx(Box, { sx: {
                                     display: 'flex',
                                     gap: 2,
                                     alignItems: 'center',
@@ -721,7 +727,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                     return null;
                 }
                 return (_jsxs(Fragment, { children: [itemUI, footer] }, item.id));
-            }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
+            }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { "data-chat-typing": "", sx: {
                     display: 'flex',
                     alignItems: 'flex-start',
                     px: padding,
@@ -743,9 +749,9 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                             }, children: avatarConfig.assistantAvatar })), _jsx(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
-                                p: 2,
+                                p: compact ? 1 : 2,
                                 borderRadius: 'var(--theme-radius-bubble, 6px)',
                                 bg: 'canvas.subtle',
-                                minHeight: '32px',
+                                minHeight: compact ? '20px' : '32px',
                             }, children: _jsx(TypingDots, {}) })] }) })), _jsx("div", { ref: messagesEndRef })] }));
 }

package/lib/chat/styles/streamdownStyles.js

@@ -215,8 +215,10 @@ export const streamdownMarkdownStyles = {
         marginRight: 0,
         color: 'fg.muted',
     },
+    // A link reads as its theme says (LOOP T-06): in the accent, or plain —
+    // the colour of the words around it — and underlined in every theme.
     '& a': {
-        color: 'accent.fg',
+        color: 'var(--theme-message-link, var(--fgColor-accent, #0969da))',
         textDecoration: 'underline',
     },
     '& table': {

package/lib/chat/tools/ToolCallDisplay.d.ts

@@ -50,6 +50,13 @@ export interface ToolCallDisplayProps {
      * icon, else the emoji, else nothing.
      */
     marks?: Marks | null;
+    /** What it does in its runtime's words: shown in place of the arguments. */
+    summary?: string;
+    /**
+     * How dense: the chat's (`comfortable`), or the floating assistant's
+     * balloon (`compact`: a smaller header, the same card).
+     */
+    density?: 'comfortable' | 'compact';
 }
 /**
  * ToolCallDisplay component - Default display for tool calls in chat
@@ -61,5 +68,5 @@ export interface ToolCallDisplayProps {
  * - Color-coded status indicators
  * - Rich error display distinguishing execution errors from code errors
  */
-export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired, approvalState, approvalDecisionSource, onApprove, onDeny, approvalLoading, marks, }: ToolCallDisplayProps): React.JSX.Element;
+export declare function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired, approvalState, approvalDecisionSource, onApprove, onDeny, approvalLoading, marks, summary, density, }: ToolCallDisplayProps): React.JSX.Element;
 export default ToolCallDisplay;

package/lib/chat/tools/ToolCallDisplay.js

@@ -125,7 +125,8 @@ function getArgsSummary(args) {
  * - Color-coded status indicators
  * - Rich error display distinguishing execution errors from code errors
  */
-export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired = false, approvalState, approvalDecisionSource, onApprove, onDeny, approvalLoading = false, marks, }) {
+export function ToolCallDisplay({ toolCallId, toolName, args, result, status, error, executionResult, codeError, exitCode, executionError, approvalRequired = false, approvalState, approvalDecisionSource, onApprove, onDeny, approvalLoading = false, marks, summary, density = 'comfortable', }) {
+    const compact = density === 'compact';
     const [isExpanded, setIsExpanded] = useState(false);
     // Determine effective exit code from props or execution result
     const effectiveExitCode = exitCode ?? executionResult?.exit_code;
@@ -143,7 +144,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
         : undefined;
     const statusDisplay = getStatusDisplay(status, errorType);
     const displayName = formatToolName(toolName);
-    const argsSummary = getArgsSummary(args);
+    const argsSummary = summary || getArgsSummary(args);
     const resultObject = result && typeof result === 'object'
         ? result
         : undefined;
@@ -168,19 +169,19 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                     result.stderr ??
                     undefined)
                 : undefined);
-    return (_jsxs(Box, { sx: {
+    return (_jsxs(Box, { "data-tool-call": toolName, "data-tool-call-status": status, sx: {
             width: '100%',
             border: '1px solid',
             borderColor: 'border.default',
-            borderRadius: '12px',
+            borderRadius: compact ? '8px' : '12px',
             overflow: 'hidden',
             backgroundColor: 'canvas.default',
         }, children: [_jsxs(Box, { as: "button", onClick: () => setIsExpanded(!isExpanded), sx: {
                     width: '100%',
                     display: 'flex',
                     alignItems: 'center',
-                    gap: 2,
-                    padding: 2,
+                    gap: compact ? 1 : 2,
+                    padding: compact ? 1 : 2,
                     backgroundColor: 'canvas.subtle',
                     border: 'none',
                     borderBottom: isExpanded ? '1px solid' : 'none',
@@ -192,7 +193,7 @@ export function ToolCallDisplay({ toolCallId, toolName, args, result, status, er
                     },
                 }, children: [_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0 }, children: isExpanded ? (_jsx(ChevronDownIcon, { size: 16 })) : (_jsx(ChevronRightIcon, { size: 16 })) }), hasMark(marks) && (_jsx(Box, { sx: { color: 'fg.muted', flexShrink: 0, display: 'flex' }, children: _jsx(SpecMark, { icon: marks?.icon, emoji: marks?.emoji, size: 16 }) })), _jsx(Text, { sx: {
                             fontWeight: 'semibold',
-                            fontSize: 1,
+                            fontSize: compact ? 0 : 1,
                             color: 'fg.default',
                             flexShrink: 0,
                         }, children: displayName }), _jsxs(Box, { sx: {

package/lib/components/code-sandboxes/CodeSandboxCellVariablesDialog.js

@@ -3,8 +3,9 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Dialog } from '@primer/react/experimental';
 import { nullTranslator } from '@jupyterlab/translation';
 import { JSONExt } from '@lumino/coreutils';
-import { KernelExecutor } from '@datalayer/jupyter-react';
+import { kernelConnectionExecutor, listKernelVariables, } from '@datalayer/jupyter-react';
 import { RuntimeSnippetsFacade } from '../../jupyter';
+import { transferableVariables } from './CodeSandboxVariables';
 import { CodeSandboxCellVariables } from './CodeSandboxCellVariables';
 /**
  * Dialog to define the runtime cell variables to transfer
@@ -53,16 +54,9 @@ export function CodeSandboxCellVariablesDialog(props) {
         }
         const connection = sessionContext.session.kernel;
         const spec = sessionContext.specsManager.specs.kernelspecs[connection.model.name];
-        const snippets = new RuntimeSnippetsFacade(spec.language);
-        const outputs = await new KernelExecutor({ connection }).execute(snippets.listVariables());
-        const content = outputs.get(0).data['text/plain'];
-        if (content) {
-            const runtimeVariables = JSON.parse(
-            // We need to remove the quotes prior to parsing
-            content.slice(1, content.length - 1));
-            return Object.keys(runtimeVariables ?? {});
-        }
-        return [];
+        return Object.keys(transferableVariables(await listKernelVariables(kernelConnectionExecutor(connection), {
+            language: spec.language,
+        })));
     }, [preference, sessionContext]);
     const getOutputCandidates = useCallback(async () => {
         // TODO this is only valid for python - using cell mimetype?

package/lib/components/code-sandboxes/CodeSandboxVariables.d.ts

@@ -1,7 +1,15 @@
 import { ReactElement } from 'react';
 import { ISessionContext } from '@jupyterlab/apputils';
 import { ITranslator } from '@jupyterlab/translation';
+import { type KernelVariable } from '@datalayer/jupyter-react';
 import type { IRuntimeDesc } from '../../models';
+/**
+ * The variables that can be carried to another sandbox, by name and type:
+ * values, not the modules, functions and classes code defines again.
+ */
+export declare function transferableVariables(variables: readonly KernelVariable[]): {
+    [name: string]: string;
+};
 /** What {@link useCodeSandboxVariablesTransfer} answers. */
 export interface ICodeSandboxVariablesTransfer {
     /**

package/lib/components/code-sandboxes/CodeSandboxVariables.js

@@ -10,8 +10,19 @@ import { Blankslate, DataTable, Table } from '@primer/react/experimental';
 import { nullTranslator } from '@jupyterlab/translation';
 import { checkIcon } from '@jupyterlab/ui-components';
 import { JSONExt } from '@lumino/coreutils';
-import { KernelExecutor } from '@datalayer/jupyter-react';
+import { kernelConnectionExecutor, listKernelVariables, } from '@datalayer/jupyter-react';
 import { RuntimeSnippetsFacade } from '../../jupyter';
+/**
+ * The variables that can be carried to another sandbox, by name and type:
+ * values, not the modules, functions and classes code defines again.
+ */
+export function transferableVariables(variables) {
+    return Object.fromEntries(variables
+        .filter(variable => variable.kind !== 'module' &&
+        variable.kind !== 'function' &&
+        variable.kind !== 'class')
+        .map(variable => [variable.name, variable.type]));
+}
 /**
  * The variables of the current sandbox, and which of them to carry over.
  *
@@ -45,18 +56,13 @@ export function useCodeSandboxVariablesTransfer(sessionContext, target, enabled
             setVariables({});
             return;
         }
-        const snippets = new RuntimeSnippetsFacade(spec.language);
-        const outputs = await new KernelExecutor({ connection }).execute(snippets.listVariables());
-        const content = outputs.get(0).data['text/plain'];
-        if (!content) {
-            setVariables({});
-            return;
-        }
-        // The payload comes quoted, as the representation of a string.
-        const listedVariables = JSON.parse(content.slice(1, content.length - 1));
+        // jupyter-react's snippet, run silently: the variables, typed.
+        const listedVariables = transferableVariables(await listKernelVariables(kernelConnectionExecutor(connection), {
+            language: spec.language,
+        }));
         setVariables(listedVariables);
         // Everything is carried over unless the user says otherwise.
-        setSelectedState(Object.keys(listedVariables ?? {}));
+        setSelectedState(Object.keys(listedVariables));
     }, [listed, sessionContext]);
     const setSelected = useCallback((names) => {
         setSelectedState(current => JSONExt.deepEqual(current, names) ? current : names);

package/lib/components/teams/A2ATeamGraph.d.ts

@@ -27,8 +27,9 @@ import { type Edge, type EdgeProps, type Viewport } from '@xyflow/react';
 import '@xyflow/react/dist/base.css';
 import { type AssistantAbout } from '../../chat/assistant/AssistantStage';
 import type { BalloonSuggestion } from '../../chat/assistant/SpeechBalloon';
-import type { BalloonHistoryMessage } from '../../chat/assistant/state';
+import type { DisplayItem } from '../../types/chat';
 import type { AssistantMenuItem } from '../../chat/assistant/AssistantContextMenu';
+import type { AssistantSandbox } from '../../chat/assistant/assistantDetails';
 import type { AgentInspectorSink } from '../inspector/agentInspector';
 import { type A2ATeamCall, type A2ATeamConnection, type A2ATeamFlow } from './a2aTeamFlow';
 import type { A2ATeamPersona } from './useA2ATeam';
@@ -83,8 +84,14 @@ export type A2ATeamGraphMember = {
     inspector?: AgentInspectorSink | null;
     /** Stops its turn, from its menu, while it works. */
     onStop?: () => void;
-    /** What its menu's *About* says. */
+    /** What its menu's *About* and *Agent Details…* say. */
     about?: AssistantAbout;
+    /**
+     * Its code sandbox, for *Code Sandbox Details…*. The entry — the agent in
+     * the page — has the kernel of the notebook open under the graph, while
+     * one is.
+     */
+    sandbox?: AssistantSandbox;
     /** The host's own entries of its menu. */
     contextMenu?: readonly AssistantMenuItem[];
     /**
@@ -97,7 +104,7 @@ export type A2ATeamGraphMember = {
      * What it said and did, as its `history` balloon lists it (`useA2ATeam`'s
      * `entryHistory`, `peerHistory`): shown when its menu chooses *History*.
      */
-    history?: readonly BalloonHistoryMessage[];
+    history?: readonly DisplayItem[];
     /** Its balloon's display was chosen in its menu: the page may keep it. */
     onBalloonDisplayChange?: (display: BalloonDisplay) => void;
 };
@@ -123,6 +130,26 @@ export type A2ATeamGraphProps = {
      */
     balloonRoom?: number;
 };
+/** How far a member was moved from its place, in the graph's coordinates. */
+export type MemberOffset = {
+    dx: number;
+    dy: number;
+};
+/** How far a member may move: its node stays inside the graph's box. */
+export type MemberBounds = {
+    minDx: number;
+    maxDx: number;
+    minDy: number;
+    maxDy: number;
+};
+/** An offset kept inside its bounds. */
+export declare function clampOffset(offset: MemberOffset, bounds: MemberBounds): MemberOffset;
+/** A member's accessible name: its name, and where it runs. */
+export declare function memberLabel(member: Pick<A2ATeamGraphMember, 'name' | 'where'>): string;
+/** A connection's accessible name: `Odoo, Accounting's MCP connection`. */
+export declare function connectionLabel(connection: Pick<A2ATeamConnection, 'label'>, member: string | undefined): string;
+/** What a connection's details say: the server, who reaches it, and the call running now. */
+export declare function connectionDetails(connection: Pick<A2ATeamConnection, 'name' | 'tools'>, member: string | undefined, calling?: string): string;
 /** The words on the edge for a flow. */
 export declare function flowWords(flow: A2ATeamFlow, entry: string, peer: string): string;
 type CallData = {