@datalayer/agent-runtimes 1.3.75 → 1.3.78

package/lib/components/teams/A2ATeamGraph.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, memo, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { createContext, memo, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
 import { BaseEdge, EdgeLabelRenderer, Handle, Position, ReactFlow, } from '@xyflow/react';
 import '@xyflow/react/dist/base.css';
 import { Button, Label, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AssistantStage, } from '../../chat/assistant/AssistantStage';
+import { useSignalValue } from '@datalayer/reactor/react';
+import { teamNotebookKernel } from './teamNotebookKernel';
 import { SpecMark } from '../../chat/marks/SpecMark';
 import { toolWords, } from './a2aTeamFlow';
 import { NotebookPreview } from './NotebookPreview';
@@ -44,18 +46,62 @@ const HANDLE = (size) => ({
 const Members = createContext({});
 /** The connections being called now, by node id: read by their nodes, as the members are. */
 const Busy = createContext({});
+const AT_PLACE = { dx: 0, dy: 0 };
+/** An offset kept inside its bounds. */
+export function clampOffset(offset, bounds) {
+    return {
+        dx: Math.min(bounds.maxDx, Math.max(bounds.minDx, offset.dx)),
+        dy: Math.min(bounds.maxDy, Math.max(bounds.minDy, offset.dy)),
+    };
+}
+/**
+ * Where the members were moved, by page and member: kept for the session,
+ * in memory, so a graph drawn again on the page keeps them where they were.
+ */
+const MOVED = new Map();
+const movedKey = (id) => `${typeof location === 'undefined' ? '' : location.pathname}#${id}`;
+/** How far a press moves before it is a drag, not a click, in pixels. */
+const DRAG_THRESHOLD = 4;
+/** How far an arrow key moves a member; with Shift, more. */
+const NUDGE = 10;
+const NUDGE_FAR = 40;
+/** The members' moves, read by their nodes. */
+const Moving = createContext({
+    zoom: 1,
+    offsetOf: () => AT_PLACE,
+    move: () => undefined,
+    reset: () => undefined,
+});
 /** A connection's node id: under its member. */
 const connectionNodeId = (member, connection) => `${member}/${connection}`;
 const MemberNode = memo(function MemberNode({ data, }) {
     const { id, side, size } = data;
     const member = useContext(Members)[id];
+    const moving = useContext(Moving);
+    const offset = moving.offsetOf(id);
     const stageRef = useRef(null);
     // Its balloon's display, as its menu changes it.
     const [display, setDisplay] = useState();
-    if (!member) {
+    // Its balloon as a click on it left it: shown, hidden, or as the team
+    // says (`auto`: what it is doing, and on hover).
+    const [shown, setShown] = useState('auto');
+    // What it says or does now: something new reopens a hidden balloon.
+    const persona = member?.persona;
+    const news = [
+        persona?.saying,
+        persona?.tool ? toolLineText(persona.tool) : '',
+        persona?.notebook?.name,
+    ].join('\u0000');
+    const seen = useRef(news);
+    useEffect(() => {
+        if (news !== seen.current) {
+            seen.current = news;
+            setShown(current => (current === 'hidden' ? 'auto' : current));
+        }
+    }, [news]);
+    if (!member || !persona) {
         return null;
     }
-    const { persona } = member;
     const shownDisplay = display ?? member.balloonDisplay ?? 'current';
     // History: what it said and did, listed.
     const listed = shownDisplay === 'history' && member.history?.length
@@ -70,6 +116,29 @@ const MemberNode = memo(function MemberNode({ data, }) {
             visual: notebookBalloonVisual(persona.notebook, notebookTitle),
         }
         : {};
+    const balloonNow = persona.tool
+        ? {
+            text: toolLineText(persona.tool),
+            tool: persona.tool,
+            busy: persona.state !== 'idle',
+            ...given,
+            ...listed,
+        }
+        : persona.saying
+            ? {
+                text: persona.saying,
+                ...(persona.full ? { fullText: persona.full } : {}),
+                more: persona.saying.endsWith('…'),
+                speaking: persona.state === 'speaking',
+                busy: persona.state === 'thinking' ||
+                    persona.state === 'working' ||
+                    persona.state === 'speaking',
+                ...given,
+                ...listed,
+            }
+            : 'history' in listed
+                ? { text: '', ...listed }
+                : undefined;
     return (_jsxs(Box
     // React Flow lets the pointer through a node that is neither dragged
     // nor selected (`pointer-events: none` on its wrapper): the character,
@@ -88,47 +157,106 @@ const MemberNode = memo(function MemberNode({ data, }) {
             gap: 1,
             cursor: 'default',
             pointerEvents: 'all',
-        }, "data-team-member": member.id, "data-member-state": persona.state, children: [_jsx(Handle, { type: "target", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Box, { sx: { width: size, height: size, position: 'relative' }, children: persona.away ? (_jsxs(Button, { size: "small", sx: { position: 'absolute', top: size / 2 - 16, left: -24 }, onClick: () => member.onAway?.(false), children: ["Call ", member.name, " back"] })) : (_jsx(AssistantStage, { character: member.character, state: persona.state, size: size, 
+        }, "data-team-member": member.id, "data-member-balloon": shown, "data-member-moved": offset.dx || offset.dy
+            ? `${Math.round(offset.dx)},${Math.round(offset.dy)}`
+            : undefined, "data-member-state": persona.state, children: [_jsx(Handle, { type: "target", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Box, { sx: { width: size, height: size, position: 'relative' }, children: persona.away ? (_jsxs(Button, { size: "small", sx: { position: 'absolute', top: size / 2 - 16, left: -24 }, onClick: () => member.onAway?.(false), children: ["Call ", member.name, " back"] })) : (_jsx(AssistantStage, { character: member.character, state: persona.state, size: size, 
                     // In the node, not over the page; the balloon opens toward the
                     // middle of the graph: rightward from the left member.
                     place: side === 'left'
                         ? { position: 'absolute', left: 'auto' }
-                        : { position: 'absolute', right: 'auto' }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: member.onToggle ?? (() => undefined), balloonDisplay: shownDisplay, onBalloonDisplayChange: next => {
-                        setDisplay(next);
-                        member.onBalloonDisplayChange?.(next);
-                    }, conversationLabel: member.onToggle ? (member.conversationLabel ?? undefined) : false, balloon: persona.tool
-                        ? {
-                            text: toolLineText(persona.tool),
-                            tool: persona.tool,
-                            busy: persona.state !== 'idle',
-                            ...given,
-                            ...listed,
+                        : { position: 'absolute', right: 'auto' }, stageRef: stageRef, 
+                    // Dragged within the graph's box: a press that moves more than
+                    // a few pixels is a drag; one that does not is a click, and the
+                    // stage ignores the click that ends a drag.
+                    onDragStart: event => {
+                        if (event.button !== 0) {
+                            return;
                         }
-                        : persona.saying
-                            ? {
-                                text: persona.saying,
-                                ...(persona.full ? { fullText: persona.full } : {}),
-                                more: persona.saying.endsWith('…'),
-                                speaking: persona.state === 'speaking',
-                                busy: persona.state === 'thinking' ||
-                                    persona.state === 'working' ||
-                                    persona.state === 'speaking',
-                                ...given,
-                                ...listed,
+                        const start = { x: event.clientX, y: event.clientY };
+                        const from = offset;
+                        let dragging = false;
+                        const onMove = (next) => {
+                            const dx = next.clientX - start.x;
+                            const dy = next.clientY - start.y;
+                            if (!dragging && Math.hypot(dx, dy) <= DRAG_THRESHOLD) {
+                                return;
                             }
-                            : 'history' in listed
-                                ? { text: '', ...listed }
-                                : undefined, expandTarget: member.expandTarget, expandOnArrival: !!member.expandTarget, 
+                            dragging = true;
+                            moving.move(id, {
+                                dx: from.dx + dx / moving.zoom,
+                                dy: from.dy + dy / moving.zoom,
+                            });
+                        };
+                        const onUp = () => {
+                            window.removeEventListener('pointermove', onMove);
+                            window.removeEventListener('pointerup', onUp);
+                            window.removeEventListener('pointercancel', onUp);
+                        };
+                        window.addEventListener('pointermove', onMove);
+                        window.addEventListener('pointerup', onUp);
+                        window.addEventListener('pointercancel', onUp);
+                    }, onCharacterKeyDown: event => {
+                        const step = event.shiftKey ? NUDGE_FAR : NUDGE;
+                        const by = {
+                            ArrowLeft: { dx: -step, dy: 0 },
+                            ArrowRight: { dx: step, dy: 0 },
+                            ArrowUp: { dx: 0, dy: -step },
+                            ArrowDown: { dx: 0, dy: step },
+                        };
+                        const nudge = by[event.key];
+                        if (nudge) {
+                            event.preventDefault();
+                            moving.move(id, {
+                                dx: offset.dx + nudge.dx,
+                                dy: offset.dy + nudge.dy,
+                            });
+                        }
+                    }, onResetPosition: offset.dx || offset.dy ? () => moving.reset(id) : undefined, open: false, onToggle: member.onToggle ?? (() => undefined), 
+                    // A click shows and hides its balloon; the menu's *Ask Sales*
+                    // still takes the reader to the composer.
+                    onCharacterClick: () => setShown(current => current === 'shown' ||
+                        (current === 'auto' &&
+                            (persona.insist || display === 'history'))
+                        ? 'hidden'
+                        : 'shown'), balloonDisplay: shownDisplay, onBalloonDisplayChange: next => {
+                        setDisplay(next);
+                        member.onBalloonDisplayChange?.(next);
+                    }, conversationLabel: member.onToggle ? (member.conversationLabel ?? undefined) : false, balloon: shown === 'hidden'
+                        ? undefined
+                        : (balloonNow ??
+                            (shown === 'shown'
+                                ? {
+                                    text: `${member.name}, ${member.where ?? ''}`.replace(/, $/, ''),
+                                }
+                                : undefined)), expandTarget: member.expandTarget, expandOnArrival: !!member.expandTarget, 
                     // History, chosen in its menu: shown until Current is.
-                    insist: persona.insist || display === 'history', onDismiss: away => member.onAway?.(away !== 'none'), suggestions: member.suggestions, onSuggestion: member.onSuggestion, inspector: member.inspector, inspectAgent: member.name, onStop: member.onStop, about: member.about, contextMenu: member.contextMenu, 
+                    insist: shown === 'shown' ||
+                        (shown === 'auto' && (persona.insist || display === 'history')), onDismiss: away => member.onAway?.(away !== 'none'), suggestions: member.suggestions, onSuggestion: member.onSuggestion, inspector: member.inspector, inspectAgent: member.name, onStop: member.onStop, about: member.about, sandbox: member.sandbox, contextMenu: member.contextMenu, 
                     // A member of the graph: what is clicked around it is the graph.
-                    stayPut: true })) }), _jsxs(Text, { sx: { fontWeight: 600, textAlign: 'center' }, children: [member.emoji ? `${member.emoji} ` : '', member.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', textAlign: 'center' }, "data-member-where": "", children: member.where }), _jsx(Handle, { type: "source", position: Position.Right, style: HANDLE(size), isConnectable: false }), member.connections?.length ? (_jsx(Handle, { id: "connections", type: "source", position: Position.Bottom, style: { ...HANDLE(size), top: 'auto', bottom: 0 }, isConnectable: false })) : null] }));
+                    stayPut: true, 
+                    // Named as the member, not its character: `Sales (in your
+                    // browser)`; the character describes it.
+                    agentName: member.name, label: memberLabel(member) })) }), _jsxs(Text, { sx: { fontWeight: 600, textAlign: 'center' }, children: [member.emoji ? `${member.emoji} ` : '', member.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', textAlign: 'center' }, "data-member-where": "", children: member.where }), _jsx(Handle, { type: "source", position: Position.Right, style: HANDLE(size), isConnectable: false }), member.connections?.length ? (_jsx(Handle, { id: "connections", type: "source", position: Position.Bottom, style: { ...HANDLE(size), top: 'auto', bottom: 0 }, isConnectable: false })) : null] }));
 });
+/** A member's accessible name: its name, and where it runs. */
+export function memberLabel(member) {
+    return member.where ? `${member.name} (${member.where})` : member.name;
+}
+/** A connection's accessible name: `Odoo, Accounting's MCP connection`. */
+export function connectionLabel(connection, member) {
+    return member
+        ? `${connection.label}, ${member}\u2019s MCP connection`
+        : `${connection.label}, an MCP connection`;
+}
 /** A connection of a member's: the server's mark, what it reaches, and how. */
 const ConnectionNode = memo(function ConnectionNode({ id, data, }) {
     const { member, connection: connectionId, size } = data;
-    const connection = useContext(Members)[member]?.connections?.find(known => known.id === connectionId);
+    const owner = useContext(Members)[member];
+    const connection = owner?.connections?.find(known => known.id === connectionId);
     const tool = useContext(Busy)[id];
+    // Its details, shown and hidden by a click or Enter on its mark.
+    const [told, setTold] = useState(false);
+    const detailsId = useId();
     if (!connection) {
         return null;
     }
@@ -140,9 +268,15 @@ const ConnectionNode = memo(function ConnectionNode({ id, data, }) {
             gap: '2px',
             cursor: 'default',
             pointerEvents: 'all',
-        }, title: connection.name, "data-team-connection": connection.id, "data-connection-busy": tool ? 'true' : 'false', children: [_jsx(Handle, { type: "target", position: Position.Top, style: { ...HANDLE(0), top: 0 }, isConnectable: false }), _jsx(Box, { className: tool ? 'a2a-team-connection-busy' : undefined, sx: {
+        }, title: connection.name, "data-team-connection": connection.id, "data-connection-busy": tool ? 'true' : 'false', children: [_jsx(Handle, { type: "target", position: Position.Top, style: { ...HANDLE(0), top: 0 }, isConnectable: false }), _jsx(Box, { as: "button", type: "button", className: tool ? 'a2a-team-connection-busy' : undefined, "aria-label": connectionLabel(connection, owner?.name), "aria-expanded": told, "aria-controls": detailsId, "data-connection-figure": "", onClick: () => setTold(shown => !shown), onKeyDown: (event) => {
+                    if (event.key === 'Escape' && told) {
+                        event.stopPropagation();
+                        setTold(false);
+                    }
+                }, sx: {
                     width: size,
                     height: size,
+                    p: 0,
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
@@ -150,8 +284,30 @@ const ConnectionNode = memo(function ConnectionNode({ id, data, }) {
                     border: '1px solid',
                     borderColor: tool ? 'accent.emphasis' : 'border.default',
                     bg: 'canvas.default',
-                }, children: _jsx(SpecMark, { icon: connection.icon, emoji: connection.emoji, size: Math.round(size * 0.66) }) }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1, textAlign: 'center' }, children: connection.label }), connection.via && (_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted', textAlign: 'center' }, "data-connection-via": "", children: connection.via }))] }));
+                    cursor: 'pointer',
+                    '&:focus-visible': {
+                        outline: '2px solid',
+                        outlineColor: 'var(--focus-outlineColor, var(--fgColor-accent))',
+                        outlineOffset: 2,
+                    },
+                }, children: _jsx(SpecMark, { icon: connection.icon, emoji: connection.emoji, size: Math.round(size * 0.66) }) }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1, textAlign: 'center' }, children: connection.label }), connection.via && (_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted', textAlign: 'center' }, "data-connection-via": "", children: connection.via })), _jsx(Box, { id: detailsId, hidden: !told, "data-connection-details": "", sx: {
+                    fontSize: '10px',
+                    color: 'fg.muted',
+                    textAlign: 'center',
+                    maxWidth: CONNECTION_WIDTH + 40,
+                }, children: connectionDetails(connection, owner?.name, tool) })] }));
 });
+/** What a connection's details say: the server, who reaches it, and the call running now. */
+export function connectionDetails(connection, member, calling) {
+    const tools = connection.tools.length;
+    return [
+        `${connection.name}, an MCP server${member ? ` ${member} reaches` : ''}.`,
+        tools ? `${tools} tool${tools === 1 ? '' : 's'}.` : '',
+        calling ? `Now: ${calling}.` : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+}
 /** The words on the edge for a flow. */
 export function flowWords(flow, entry, peer) {
     return flow === 'asking'
@@ -257,11 +413,47 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
         memberHeight +
         (hasConnections ? CONNECTION_GAP + connectionHeight : 0)) *
         viewport.zoom);
+    // Where the members were moved, kept inside the graph's box.
+    const total = room +
+        memberHeight +
+        (hasConnections ? CONNECTION_GAP + connectionHeight : 0);
+    const boundsOf = (id) => {
+        const layoutX = id === entry.id ? 0 : NODE_WIDTH + GAP;
+        const below = placed.find(({ member }) => member === id)?.connections.length
+            ? CONNECTION_GAP + connectionHeight
+            : 0;
+        return {
+            minDx: -layoutX,
+            maxDx: WIDTH - NODE_WIDTH - layoutX,
+            minDy: -room,
+            maxDy: total - room - memberHeight - below,
+        };
+    };
+    const [moved, setMoved] = useState(() => ({
+        [entry.id]: MOVED.get(movedKey(entry.id)) ?? AT_PLACE,
+        [peer.id]: MOVED.get(movedKey(peer.id)) ?? AT_PLACE,
+    }));
+    const offsetOf = (id) => clampOffset(moved[id] ?? AT_PLACE, boundsOf(id));
+    const entryOffset = offsetOf(entry.id);
+    const peerOffset = offsetOf(peer.id);
+    const movingValue = {
+        zoom: viewport.zoom,
+        offsetOf,
+        move: (id, offset) => {
+            const next = clampOffset(offset, boundsOf(id));
+            MOVED.set(movedKey(id), next);
+            setMoved(current => ({ ...current, [id]: next }));
+        },
+        reset: (id) => {
+            MOVED.delete(movedKey(id));
+            setMoved(current => ({ ...current, [id]: AT_PLACE }));
+        },
+    };
     const nodes = useMemo(() => [
         {
             id: entry.id,
             type: 'member',
-            position: { x: 0, y: room },
+            position: { x: entryOffset.dx, y: room + entryOffset.dy },
             width: NODE_WIDTH,
             height: memberHeight,
             draggable: false,
@@ -273,7 +465,10 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
         {
             id: peer.id,
             type: 'member',
-            position: { x: NODE_WIDTH + GAP, y: room },
+            position: {
+                x: NODE_WIDTH + GAP + peerOffset.dx,
+                y: room + peerOffset.dy,
+            },
             width: NODE_WIDTH,
             height: memberHeight,
             draggable: false,
@@ -282,13 +477,15 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
             data: { id: peer.id, side: 'right', size },
         },
         ...JSON.parse(placedKey).flatMap(({ member, connections }, side) => {
-            const xs = connectionsX(side === 0 ? 0 : NODE_WIDTH + GAP, connections.length);
+            // A member's connections move with it.
+            const moveBy = side === 0 ? entryOffset : peerOffset;
+            const xs = connectionsX((side === 0 ? 0 : NODE_WIDTH + GAP) + moveBy.dx, connections.length);
             return connections.map((connection, at) => ({
                 id: connectionNodeId(member, connection),
                 type: 'connection',
                 position: {
                     x: xs[at],
-                    y: room + memberHeight + CONNECTION_GAP,
+                    y: room + memberHeight + CONNECTION_GAP + moveBy.dy,
                 },
                 width: CONNECTION_WIDTH,
                 height: connectionHeight,
@@ -307,8 +504,29 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
         placedKey,
         connectionSize,
         connectionHeight,
+        entryOffset.dx,
+        entryOffset.dy,
+        peerOffset.dx,
+        peerOffset.dy,
     ]);
-    const members = useMemo(() => ({ [entry.id]: entry, [peer.id]: peer }), [entry, peer]);
+    // The notebook open under the graph runs on a Pyodide kernel in the page:
+    // the entry's sandbox, while it is open.
+    const notebookKernel = useSignalValue(teamNotebookKernel);
+    const entryMember = useMemo(() => entry.sandbox
+        ? entry
+        : {
+            ...entry,
+            // The entry runs in the page: its sandbox is the Pyodide kernel
+            // of the notebook open under the graph, and none until one is.
+            sandbox: notebookKernel
+                ? {
+                    kind: 'browser',
+                    status: 'running',
+                    connection: notebookKernel,
+                }
+                : { kind: 'browser', status: 'not running' },
+        }, [entry, notebookKernel]);
+    const members = useMemo(() => ({ [entry.id]: entryMember, [peer.id]: peer }), [entry.id, entryMember, peer]);
     const words = flowWords(flow, entry.name, peer.name);
     // The tool each connection is answering now, in words, by its node's id.
     const busy = useMemo(() => {
@@ -396,6 +614,11 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
                 overflow: 'visible',
             },
             '& .react-flow__node': { cursor: 'default' },
+            // A member is moved by dragging its character.
+            '& [data-team-member] [data-assistant-figure]': { cursor: 'grab' },
+            '& [data-team-member] [data-assistant-figure]:active': {
+                cursor: 'grabbing',
+            },
         }, children: [_jsx(Box, { as: "span", "aria-live": "polite", sx: {
                     position: 'absolute',
                     width: 1,
@@ -403,8 +626,8 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
                     overflow: 'hidden',
                     clip: 'rect(0 0 0 0)',
                     whiteSpace: 'nowrap',
-                }, children: heard }), _jsx(Members.Provider, { value: members, children: _jsx(Busy.Provider, { value: busy.byNode, children: _jsx(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: NODE_TYPES, edgeTypes: EDGE_TYPES, viewport: viewport, nodesDraggable: false, nodesConnectable: false, nodesFocusable: false, edgesFocusable: false, elementsSelectable: false, deleteKeyCode: null, selectionKeyCode: null, multiSelectionKeyCode: null, panOnDrag: false, panOnScroll: false, zoomOnScroll: false, zoomOnPinch: false, zoomOnDoubleClick: false, preventScrolling: false, style: { overflow: 'visible', background: 'transparent' }, 
-                        // The library is MIT: its credit is not required on the page.
-                        proOptions: { hideAttribution: true }, "aria-label": `${entry.name} and ${peer.name}, over A2A` }) }) })] }));
+                }, children: heard }), _jsx(Moving.Provider, { value: movingValue, children: _jsx(Members.Provider, { value: members, children: _jsx(Busy.Provider, { value: busy.byNode, children: _jsx(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: NODE_TYPES, edgeTypes: EDGE_TYPES, viewport: viewport, nodesDraggable: false, nodesConnectable: false, nodesFocusable: false, edgesFocusable: false, elementsSelectable: false, deleteKeyCode: null, selectionKeyCode: null, multiSelectionKeyCode: null, panOnDrag: false, panOnScroll: false, zoomOnScroll: false, zoomOnPinch: false, zoomOnDoubleClick: false, preventScrolling: false, style: { overflow: 'visible', background: 'transparent' }, 
+                            // The library is MIT: its credit is not required on the page.
+                            proOptions: { hideAttribution: true }, "aria-label": `${entry.name} and ${peer.name}, over A2A` }) }) }) })] }));
 }
 export default A2ATeamGraph;

package/lib/components/teams/TeamNotebookView.js

@@ -8,6 +8,7 @@ import { useSignalValue } from '@datalayer/reactor/react';
 import { notebookStore } from '@datalayer/jupyter-react';
 import { EphemeralNotebook } from '../../chat/notebook/EphemeralNotebook';
 import { createBrowserSandboxService } from '../../loop/plugins/agents/browserService';
+import { teamNotebookKernel } from './teamNotebookKernel';
 /** Each notebook drawn has its own id in jupyter-react's store. */
 let drawn = 0;
 /** Save a notebook as an `.ipynb` file, as Jupyter writes one. */
@@ -57,6 +58,20 @@ export function TeamNotebookView({ notebook, fileName, height, }) {
     const manager = service.getServiceManager() ??
         undefined;
     const running = snapshot.state === 'running' && manager !== undefined;
+    // Say which kernel the notebook runs on, while it does: the browser
+    // agent's *Code Sandbox Details…* lists its variables.
+    useEffect(() => {
+        const kernel = running ? service.getKernelConnection() : null;
+        if (!kernel) {
+            return;
+        }
+        teamNotebookKernel.value = kernel;
+        return () => {
+            if (teamNotebookKernel.peek() === kernel) {
+                teamNotebookKernel.value = null;
+            }
+        };
+    }, [running, service]);
     return (_jsx(QueryClientProvider, { client: queries, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: {
                         display: 'flex',
                         alignItems: 'center',

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

@@ -0,0 +1,3 @@
+import type { Kernel } from '@jupyterlab/services';
+/** The open team notebook's kernel, or `null` when none is open. */
+export declare const teamNotebookKernel: import("@datalayer/reactor").Signal<Kernel.IKernelConnection | null>;

package/lib/components/teams/teamNotebookKernel.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The kernel of the notebook a team member gave, while one is open.
+ *
+ * `TeamNotebookView` runs the notebook on a Pyodide kernel in the page and
+ * says so here; the team's graph reads it for the browser agent's *Code
+ * Sandbox Details…*, which lists that kernel's variables. Light: a signal,
+ * nothing of Jupyter loaded with it.
+ *
+ * @module components/teams/teamNotebookKernel
+ */
+import { signal } from '@datalayer/reactor';
+/** The open team notebook's kernel, or `null` when none is open. */
+export const teamNotebookKernel = signal(null);

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

@@ -1,4 +1,5 @@
-import type { AssistantState, BalloonHistoryMessage } from '../../chat/assistant/state';
+import type { AssistantState } from '../../chat/assistant/state';
+import type { DisplayItem } from '../../types/chat';
 import { type BrowserModelOptions } from '../../runtimes/browser/model';
 import { type A2APeer, type A2APeerArtifact } from '../../runtimes/browser/a2aPeer';
 import type { AppSpec } from '../../types/agentspecs';
@@ -69,13 +70,16 @@ export type A2ATeam = {
     setEntryAway: (away: boolean) => void;
     setPeerAway: (away: boolean) => void;
     turns: A2ATeamTurn[];
-    /** The entry's conversation, as its `history` balloon lists it. */
-    entryHistory: BalloonHistoryMessage[];
     /**
-     * What the peer was asked, what it did (its tool lines) and what it
-     * answered, as its `history` balloon lists it.
+     * The entry's conversation, in the chat's model (its messages): what its
+     * `history` balloon draws with the chat's components.
      */
-    peerHistory: BalloonHistoryMessage[];
+    entryHistory: DisplayItem[];
+    /**
+     * What the peer was asked, the tools it called and what it answered, in
+     * the chat's model (messages and tool calls).
+     */
+    peerHistory: DisplayItem[];
     /** The peer's last answer, as it gave it. */
     report: string | null;
     /** What the peer gave besides words with its last answer, by media type. */

package/lib/components/teams/useA2ATeam.js

@@ -85,9 +85,31 @@ export function useA2ATeam(options) {
     const told = useRef(0);
     const tell = useCallback((role, text) => {
         told.current += 1;
-        const id = `peer-${told.current}`;
-        setPeerHistory(prev => [...prev, { id, role, text }]);
+        const message = {
+            id: `peer-${told.current}`,
+            role,
+            content: text,
+            createdAt: new Date(),
+        };
+        setPeerHistory(prev => [...prev, message]);
     }, []);
+    // A tool the peer calls, as the chat holds one: added when it starts,
+    // updated when it ends.
+    const toolCalled = useCallback((step) => {
+        const id = step.id ?? step.name;
+        const call = {
+            id: `peer-tool:${id}`,
+            type: 'tool-call',
+            toolCallId: id,
+            toolName: toolOwnName(step.name, peerConnections),
+            args: {},
+            status: step.error ? 'error' : step.ended ? 'complete' : 'executing',
+            ...(step.error ? { error: step.error } : {}),
+        };
+        setPeerHistory(prev => prev.some(item => item.id === call.id)
+            ? prev.map(item => (item.id === call.id ? call : item))
+            : [...prev, call]);
+    }, [peerConnections]);
     const [report, setReport] = useState(null);
     const [artifacts, setArtifacts] = useState([]);
     const [notebook, setNotebook] = useState(null);
@@ -134,10 +156,8 @@ export function useA2ATeam(options) {
             }));
         }
         else if (event.phase === 'working') {
-            if (event.tool?.ended) {
-                tell('assistant', event.tool.error
-                    ? `${event.tool.name} failed: ${event.tool.error}`
-                    : `Used ${toolOwnName(event.tool.name, peerConnections)}`);
+            if (event.tool) {
+                toolCalled(event.tool);
             }
             setPeerPersona(prev => ({
                 ...prev,
@@ -184,7 +204,7 @@ export function useA2ATeam(options) {
                 tool: undefined,
             }));
         }
-    }, [peerApp.id, peerConnections, inspector, tell]);
+    }, [peerApp.id, peerConnections, inspector, tell, toolCalled]);
     const agent = useMemo(() => {
         if (!peer) {
             return null;
@@ -373,7 +393,8 @@ export function useA2ATeam(options) {
     const entryHistory = useMemo(() => turns.map((turn, index) => ({
         id: `turn-${index}`,
         role: turn.role,
-        text: turn.text,
+        content: turn.text,
+        createdAt: new Date(0),
     })), [turns]);
     return {
         entryHistory,

package/lib/examples/AgentA2ATeamExample.js

@@ -137,6 +137,7 @@ function AgentA2ATeam() {
                             spec: `${SALES.id}:${SALES.version}`,
                             model: SALES.model || undefined,
                             where: 'in your browser',
+                            description: SALES.description || undefined,
                         },
                     }, peer: {
                         id: ACCOUNTING.id,
@@ -154,6 +155,11 @@ function AgentA2ATeam() {
                             spec: `${ACCOUNTING.id}:${ACCOUNTING.version}`,
                             model: ACCOUNTING.model || undefined,
                             where: accountingWhere,
+                            // What its A2A card says, once it is reached.
+                            description: peer?.card.description || ACCOUNTING.description || undefined,
+                            skills: peer?.card.skills.map(skill => skill.name),
+                            protocol: peer ? 'a2a' : undefined,
+                            url: peer ? accountingUrl : undefined,
                         },
                     }, flow: team.flow, calls: team.calls, 
                     // Room for the balloons: suggestions, *more* and a notebook.