@datalayer/agent-runtimes 1.3.74 → 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 { 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';
@@ -14,7 +16,7 @@ import { toolLineText } from '../../chat/assistant/toolLine';
 const NODE_WIDTH = 200;
 const BALLOON_ROOM = 144;
 /** The room a balloon that holds a notebook needs above its member. */
-const NOTEBOOK_BALLOON_ROOM = 340;
+const NOTEBOOK_BALLOON_ROOM = 480;
 /** How tall the notebook in a balloon grows before it scrolls. */
 const NOTEBOOK_PREVIEW_HEIGHT = 180;
 const GAP = 220;
@@ -44,16 +46,67 @@ 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);
-    if (!member) {
+    // Its balloon's display, as its menu changes it.
+    const [display, setDisplay] = useState();
+    // 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
+        ? { history: member.history }
+        : {};
     // A notebook it was given: read-only in its balloon, and its large visual
     // the one that runs, editable — under the graph, or in a dialog.
     const notebookTitle = member.notebookTitle ?? (persona.notebook?.name || 'The notebook');
@@ -63,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,
@@ -81,37 +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: member.balloonDisplay ?? 'current', balloon: persona.tool
-                        ? {
-                            text: toolLineText(persona.tool),
-                            tool: persona.tool,
-                            busy: persona.state !== 'idle',
-                            ...given,
+                        : { 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,
-                                more: persona.saying.endsWith('…'),
-                                speaking: persona.state === 'speaking',
-                                busy: persona.state === 'thinking' ||
-                                    persona.state === 'working' ||
-                                    persona.state === 'speaking',
-                                ...given,
+                        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;
                             }
-                            : undefined, expandTarget: member.expandTarget, expandOnArrival: !!member.expandTarget, insist: persona.insist, onDismiss: away => member.onAway?.(away !== 'none'), 
+                            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: 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;
     }
@@ -123,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',
@@ -133,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'
@@ -201,7 +374,7 @@ export function teamViewport(width) {
     return { zoom, x: (width - WIDTH * zoom) / 2, y: 0 };
 }
 /** Draw a team of two over A2A, the link moving with what travels on it. */
-export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size = 96, calls = [], }) {
+export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size = 96, calls = [], balloonRoom = BALLOON_ROOM, }) {
     const box = useRef(null);
     const [width, setWidth] = useState(0);
     useEffect(() => {
@@ -234,17 +407,53 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
     const hasConnections = placed.some(({ connections }) => connections.length);
     // A notebook in a balloon: more room above the members.
     const room = [entry, peer].some(member => member.persona.notebook)
-        ? NOTEBOOK_BALLOON_ROOM
-        : BALLOON_ROOM;
+        ? Math.max(NOTEBOOK_BALLOON_ROOM, balloonRoom)
+        : balloonRoom;
     const height = Math.ceil((room +
         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,
@@ -256,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,
@@ -265,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,
@@ -290,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(() => {
@@ -379,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,
@@ -386,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/NotebookPreviewView.js

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { useTheme } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { JupyterReactTheme, Notebook, ServiceManagerLess, } from '@datalayer/jupyter-react';
+import { JUPYTER_DARK_VARIABLES, JUPYTER_LIGHT_VARIABLES, } from './jupyterThemeVariables';
 /** Each preview has its own id in jupyter-react's store. */
 let drawn = 0;
 export function NotebookPreviewView({ nbformat, height, }) {
@@ -16,7 +17,14 @@ export function NotebookPreviewView({ nbformat, height, }) {
     }, [nbformat]);
     const content = useMemo(() => JSON.parse(JSON.stringify(nbformat)), [nbformat]);
     const { colorScheme } = useTheme();
-    return (_jsxs(Box, { "data-notebook-preview-theme": "", sx: { height }, children: [_jsx("span", { "data-jupyter-react-theme-root": "notebook-preview", hidden: true }), _jsx(JupyterReactTheme, { colormode: colorScheme?.startsWith('dark') ? 'dark' : 'light', children: _jsx(Box, { "data-notebook-preview-view": id, sx: {
+    const mode = colorScheme?.startsWith('dark') ? 'dark' : 'light';
+    return (_jsxs(Box, { "data-notebook-preview-theme": mode, sx: { height }, 
+        // JupyterLab writes its theme for the whole page, so two previews in
+        // two modes would share the last one written: each carries its own
+        // mode's variables on its own subtree.
+        style: (mode === 'dark'
+            ? JUPYTER_DARK_VARIABLES
+            : JUPYTER_LIGHT_VARIABLES), children: [_jsx("span", { "data-jupyter-react-theme-root": "notebook-preview", hidden: true }), _jsx(JupyterReactTheme, { colormode: mode, children: _jsx(Box, { "data-notebook-preview-view": id, sx: {
                         height,
                         // No toolbar: no room kept for one.
                         '& .datalayer-NotebookPanel-header': {

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

@@ -25,11 +25,13 @@ export type TeamNotebookProps = {
     title: string;
     /** How tall the notebook is, in pixels. */
     height?: number;
+    /** Leave the heading out: the dialog it is drawn in shows the title. */
+    hideTitle?: boolean;
 };
 /** The file a notebook is saved as: the peer's name for it, else its name. */
 export declare function notebookFileName(notebook: A2APeerArtifact): string;
 /** A notebook a member of the team gave, under its title, to run in the page. */
-export declare function TeamNotebook({ notebook, title, height, }: TeamNotebookProps): JSX.Element;
+export declare function TeamNotebook({ notebook, title, height, hideTitle, }: TeamNotebookProps): JSX.Element;
 /**
  * A notebook as a balloon's large visual: read-only in the balloon, and,
  * expanded, this notebook — editable, run on the browser sandbox, loaded

package/lib/components/teams/TeamNotebook.js

@@ -16,7 +16,7 @@ export function notebookFileName(notebook) {
     return `${stem}.ipynb`;
 }
 /** A notebook a member of the team gave, under its title, to run in the page. */
-export function TeamNotebook({ notebook, title, height = 560, }) {
+export function TeamNotebook({ notebook, title, height = 560, hideTitle = false, }) {
     return (_jsxs(Box, { as: "section", "aria-label": title, "data-team-notebook": "", 
         // Focused when the notebook in a balloon is clicked (`focusExpanded`).
         tabIndex: -1, sx: {
@@ -32,7 +32,7 @@ export function TeamNotebook({ notebook, title, height = 560, }) {
                 outlineOffset: 4,
                 borderRadius: 2,
             },
-        }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title }), _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Opening the notebook\u2026" }), children: _jsx(TeamNotebookView, { notebook: notebook, fileName: notebookFileName(notebook), height: height }) })] }));
+        }, children: [!hideTitle && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0 }, children: title })), _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Opening the notebook\u2026" }), children: _jsx(TeamNotebookView, { notebook: notebook, fileName: notebookFileName(notebook), height: height }) })] }));
 }
 /**
  * A notebook as a balloon's large visual: read-only in the balloon, and,
@@ -43,7 +43,7 @@ export function notebookBalloonVisual(notebook, title, height) {
     return {
         id: `notebook:${notebook.filename ?? notebook.name}`,
         title,
-        render: () => (_jsx(TeamNotebook, { notebook: notebook, title: title, height: height })),
+        render: place => (_jsx(TeamNotebook, { notebook: notebook, title: title, height: height, hideTitle: place === 'overlay' })),
     };
 }
 export default TeamNotebook;

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/jupyterThemeVariables.d.ts

@@ -0,0 +1,9 @@
+/**
+ * JupyterLab's theme variables, light and dark, as its theme extensions state
+ * them. Generated by scripts/codegen/generate_jupyter_theme_variables.mjs: do
+ * not edit.
+ *
+ * @module components/teams/jupyterThemeVariables
+ */
+export declare const JUPYTER_LIGHT_VARIABLES: Readonly<Record<string, string>>;
+export declare const JUPYTER_DARK_VARIABLES: Readonly<Record<string, string>>;