@datalayer/agent-runtimes 1.3.88 → 1.3.90

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

@@ -160,9 +160,10 @@ export type A2ATeamGraphProps = {
     /** The tool calls running now, to the members' connections (`useA2ATeam`). */
     calls?: A2ATeamCall[];
     /**
-     * The room above the members for their balloons, in pixels at full scale:
-     * a page that shows suggestions, *more* and a notebook in them gives more.
-     * A notebook in a balloon gets at least its own.
+     * The least room above the members for their balloons, in pixels at full
+     * scale: the graph keeps what its balloons take now (`useBalloonRoom`) —
+     * suggestions, *more* unfolded — and never less than this. A notebook in
+     * a balloon gets at least its own.
      */
     balloonRoom?: number;
 };

package/lib/components/teams/A2ATeamGraph.js

@@ -11,6 +11,7 @@ import { SpecMark } from '../../chat/marks/SpecMark';
 import { toolWords, } from './a2aTeamFlow';
 import { NotebookPreview } from './NotebookPreview';
 import { notebookBalloonVisual } from './TeamNotebook';
+import { useBalloonRoom } from './useBalloonRoom';
 import { toolLineText } from '../../chat/assistant/toolLine';
 /** The graph's own coordinates: the members, and room above them for their balloons. */
 const NODE_WIDTH = 200;
@@ -201,17 +202,9 @@ const MemberNode = memo(function MemberNode({ data, }) {
         // nor selected (`pointer-events: none` on its wrapper): the character,
         // its balloon and its menu take it back, and are left to themselves —
         // no drag, no pan, no wheel.
-        className: "nodrag nopan nowheel", sx: {
-            width: NODE_WIDTH,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 1,
-            cursor: 'default',
-            pointerEvents: 'all',
-        }, "data-team-member": member.id, "data-member-balloon": shown, "data-member-moved": offset.dx || offset.dy
+        className: "nodrag nopan nowheel", width: NODE_WIDTH, display: "flex", flexDirection: "column", alignItems: "center", gap: 1, cursor: "default", pointerEvents: "all", "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, { id: MEMBER_HANDLES.inLeft, type: "target", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inRight, type: "target", position: Position.Right, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inTop, type: "target", position: Position.Top, style: { ...HANDLE(size), top: 0 }, isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inBottom, type: "target", position: Position.Bottom, style: { ...HANDLE(size), top: 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, 
+            : undefined, "data-member-state": persona.state, children: [_jsx(Handle, { id: MEMBER_HANDLES.inLeft, type: "target", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inRight, type: "target", position: Position.Right, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inTop, type: "target", position: Position.Top, style: { ...HANDLE(size), top: 0 }, isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.inBottom, type: "target", position: Position.Bottom, style: { ...HANDLE(size), top: size }, isConnectable: false }), _jsx(Box, { 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'
@@ -312,42 +305,16 @@ const ConnectionNode = memo(function ConnectionNode({ id, data, }) {
     if (!connection) {
         return null;
     }
-    return (_jsxs(Box, { className: "nodrag nopan nowheel", sx: {
-            width: CONNECTION_WIDTH,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            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.Left, style: { ...HANDLE(size), left: 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) => {
+    return (_jsxs(Box, { className: "nodrag nopan nowheel", width: CONNECTION_WIDTH, display: "flex", flexDirection: "column", alignItems: "center", 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.Left, style: { ...HANDLE(size), left: 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',
-                    borderRadius: 2,
-                    border: '1px solid',
-                    borderColor: tool ? 'accent.emphasis' : 'border.default',
-                    bg: 'canvas.default',
-                    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) })] }));
+                }, width: size, height: size, p: 0, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 2, border: "1px solid", borderColor: tool ? 'accent.emphasis' : 'border.default', bg: "canvas.default", cursor: "pointer", focusVisible: {
+                    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": "", 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) {
@@ -399,12 +366,7 @@ const LinkEdge = memo(function LinkEdge({ id, sourceX, sourceY, targetX, targetY
                     strokeWidth: 2,
                     strokeDasharray: data?.connected ? undefined : '6 6',
                     opacity: flow === 'still' ? 0.6 : 0.25,
-                } }), flow !== 'still' && (_jsxs("g", { "data-a2a-edge-flow": flow, children: [_jsx("path", { d: path, fill: "none", className: `a2a-team-flow a2a-team-flow-${flow}`, stroke: "var(--fgColor-accent, #0969da)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "10 14" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent, #0969da)" })] })), _jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", sx: {
-                        position: 'absolute',
-                        transform: `translate(-50%, 12px) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`,
-                        pointerEvents: 'none',
-                        textAlign: 'center',
-                    }, children: _jsx(Label, { variant: data?.connected ? 'accent' : 'secondary', children: data?.label }) }) })] }));
+                } }), flow !== 'still' && (_jsxs("g", { "data-a2a-edge-flow": flow, children: [_jsx("path", { d: path, fill: "none", className: `a2a-team-flow a2a-team-flow-${flow}`, stroke: "var(--fgColor-accent, #0969da)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "10 14" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent, #0969da)" })] })), _jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", transform: `translate(-50%, 12px) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`, pointerEvents: "none", textAlign: "center", children: _jsx(Label, { variant: data?.connected ? 'accent' : 'secondary', children: data?.label }) }) })] }));
 });
 /** A member's link to a connection: still, or flowing toward it while a call runs. */
 export const CallEdge = memo(function CallEdge({ id, sourceX, sourceY, targetX, targetY, data, }) {
@@ -415,13 +377,9 @@ export const CallEdge = memo(function CallEdge({ id, sourceX, sourceY, targetX,
                     stroke: 'var(--borderColor-default, #d0d7de)',
                     strokeWidth: 2,
                     opacity: calling ? 0.3 : 0.8,
-                } }), calling && (_jsxs("g", { "data-mcp-edge-call": data?.calling, children: [_jsx("path", { d: path, fill: "none", className: "a2a-team-flow a2a-team-call", stroke: "var(--fgColor-accent, #0969da)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "6 8" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent, #0969da)" })] })), calling && (_jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", sx: {
-                        position: 'absolute',
-                        // Beside the edge, toward the middle of the graph.
-                        transform: `translate(calc(-100% - 10px), -50%) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`,
-                        pointerEvents: 'none',
-                        whiteSpace: 'nowrap',
-                    }, children: _jsx(Label, { variant: "accent", children: data?.calling }) }) }))] }));
+                } }), calling && (_jsxs("g", { "data-mcp-edge-call": data?.calling, children: [_jsx("path", { d: path, fill: "none", className: "a2a-team-flow a2a-team-call", stroke: "var(--fgColor-accent, #0969da)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "6 8" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent, #0969da)" })] })), calling && (_jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", position: "absolute", 
+                    // Beside the edge, toward the middle of the graph.
+                    transform: `translate(calc(-100% - 10px), -50%) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`, pointerEvents: "none", whiteSpace: "nowrap", children: _jsx(Label, { variant: "accent", children: data?.calling }) }) }))] }));
 });
 const NODE_TYPES = { member: MemberNode, connection: ConnectionNode };
 const EDGE_TYPES = { a2a: LinkEdge, mcp: CallEdge };
@@ -534,10 +492,16 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         connections: (member.connections ?? []).map(connection => connection.id),
     }));
     const placedKey = JSON.stringify(placed);
-    // A notebook in a balloon: more room above the members.
+    // What the balloons take now, at least the room the page gives; a
+    // notebook in a balloon, at least its own.
+    const measured = useBalloonRoom(box, {
+        anchor: '[data-team-member]',
+        zoom: viewport.zoom,
+        floor: balloonRoom,
+    });
     const room = members.some(member => member.persona.notebook)
-        ? Math.max(NOTEBOOK_BALLOON_ROOM, balloonRoom)
-        : balloonRoom;
+        ? Math.max(NOTEBOOK_BALLOON_ROOM, measured)
+        : measured;
     // Beside a member, its connections may reach below it: the row takes them.
     const reach = Math.max(0, ...placed.map(({ connections }) => connectionsReach(size, connections.length, connectionHeight)));
     const rowHeight = Math.max(memberHeight, reach);
@@ -711,10 +675,7 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
     ], [linkKey, placedKey, busy]);
     const heard = [...words, ...busy.said].filter(Boolean).join('. ');
     const flowNow = flowOfAll(peers.map(one => flowOf(one.id)));
-    return (_jsxs(Box, { ref: box, "data-a2a-team-graph": "", "data-a2a-flow": flowNow, "data-a2a-calls": calls.length, "data-a2a-members": members.length, sx: {
-            width: '100%',
-            height,
-            position: 'relative',
+    return (_jsxs(Box, { ref: box, "data-a2a-team-graph": "", "data-a2a-flow": flowNow, "data-a2a-calls": calls.length, "data-a2a-members": members.length, width: "100%", height: height, position: "relative", sx: {
             '@keyframes a2aTeamFlow': {
                 from: { strokeDashoffset: 24 },
                 to: { strokeDashoffset: 0 },
@@ -732,7 +693,7 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
             '@keyframes a2aTeamPulse': {
                 '0%, 100%': { boxShadow: '0 0 0 0 transparent' },
                 '50%': {
-                    boxShadow: '0 0 0 4px var(--bgColor-accent-muted, #ddf4ff)',
+                    boxShadow: '0 0 0 4px var(--bgColor-accent-muted)',
                 },
             },
             '& .a2a-team-call': {
@@ -756,14 +717,7 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
             '& [data-team-member] [data-assistant-figure]:active': {
                 cursor: 'grabbing',
             },
-        }, children: [_jsx(Box, { as: "span", "aria-live": "polite", sx: {
-                    position: 'absolute',
-                    width: 1,
-                    height: 1,
-                    overflow: 'hidden',
-                    clip: 'rect(0 0 0 0)',
-                    whiteSpace: 'nowrap',
-                }, children: heard }), _jsx(Moving.Provider, { value: movingValue, children: _jsx(Members.Provider, { value: membersById, 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' }, 
+        }, children: [_jsx(Box, { as: "span", "aria-live": "polite", position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap", children: heard }), _jsx(Moving.Provider, { value: movingValue, children: _jsx(Members.Provider, { value: membersById, 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 ${peers.map(one => one.name).join(', ')}, over A2A` }) }) }) })] }));
 }

package/lib/components/teams/AnswerSurfacesView.js

@@ -22,9 +22,9 @@ function OneSurface({ surface, name, onPress, }) {
         }));
     }, [answered, onPress, surface]);
     const title = parsed?.title || surface.artifact.name;
-    return (_jsxs(Box, { as: "section", "aria-label": name ? `${name}: ${title}` : title, "data-answer-surface": surface.id, sx: { display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: name ? `${name} · ${title}` : title }), parsed?.messages?.length ? (_jsx(InlineSurface, { messages: parsed.messages, onAction: onAction })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This could not be drawn: it holds no surface." })), answered ? (_jsxs(Box, { role: "status", "data-answer-reply": "", sx: { display: 'flex', flexDirection: 'column', gap: 1, fontSize: 1 }, children: [_jsxs(Text, { sx: { color: 'fg.muted' }, children: ["You chose: ", answered.chose] }), answered.waiting ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: name ? `Asking ${name}…` : 'Asking…' })] })) : answered.reply ? (_jsx(Text, { children: name ? `${name}: ${answered.reply}` : answered.reply })) : null] })) : null] }));
+    return (_jsxs(Box, { as: "section", "aria-label": name ? `${name}: ${title}` : title, "data-answer-surface": surface.id, display: "flex", flexDirection: "column", gap: 2, minWidth: 0, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: name ? `${name} · ${title}` : title }), parsed?.messages?.length ? (_jsx(InlineSurface, { messages: parsed.messages, onAction: onAction })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This could not be drawn: it holds no surface." })), answered ? (_jsxs(Box, { role: "status", "data-answer-reply": "", display: "flex", flexDirection: "column", gap: 1, fontSize: 1, children: [_jsxs(Text, { sx: { color: 'fg.muted' }, children: ["You chose: ", answered.chose] }), answered.waiting ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: name ? `Asking ${name}…` : 'Asking…' })] })) : answered.reply ? (_jsx(Text, { children: name ? `${name}: ${answered.reply}` : answered.reply })) : null] })) : null] }));
 }
 export function AnswerSurfacesView({ surfaces, names = {}, onPress, }) {
-    return (_jsx(Box, { "data-answer-surfaces": "", sx: { display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }, children: surfaces.map(surface => (_jsx(OneSurface, { surface: surface, name: names[surface.giver], onPress: onPress }, surface.id))) }));
+    return (_jsx(Box, { "data-answer-surfaces": "", display: "flex", flexDirection: "column", gap: 3, minWidth: 0, children: surfaces.map(surface => (_jsx(OneSurface, { surface: surface, name: names[surface.giver], onPress: onPress }, surface.id))) }));
 }
 export default AnswerSurfacesView;

package/lib/components/teams/NotebookPreview.js

@@ -32,16 +32,7 @@ export function NotebookPreview({ notebook, title, maxHeight = 220, onOpen: onOp
     if (!doc) {
         return null;
     }
-    return (_jsxs(Box, { "data-notebook-preview": "", sx: { display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 }, children: [_jsx(Box, { role: "region", "aria-label": `${title}, read-only`, onClick: onOpen, "data-notebook-preview-cells": doc.cells.length, sx: {
-                    position: 'relative',
-                    height: maxHeight,
-                    overflow: 'hidden',
-                    border: '1px solid',
-                    borderColor: 'border.muted',
-                    borderRadius: 2,
-                    bg: 'canvas.default',
-                    cursor: onOpen ? 'pointer' : 'default',
-                }, children: _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 0, m: 2 }, children: "Opening the notebook\u2026" }), children: _jsx(NotebookPreviewView, { nbformat: doc, height: maxHeight }) }) }), onOpen && (onOpenGiven || openLabel) ? (_jsx(Text, { as: "button", type: "button", onClick: onOpen, "data-notebook-preview-open": "", sx: {
+    return (_jsxs(Box, { "data-notebook-preview": "", display: "flex", flexDirection: "column", gap: 1, minWidth: 0, children: [_jsx(Box, { role: "region", "aria-label": `${title}, read-only`, onClick: onOpen, "data-notebook-preview-cells": doc.cells.length, position: "relative", height: maxHeight, overflow: "hidden", border: "1px solid", borderColor: "border.muted", borderRadius: 2, bg: "canvas.default", cursor: onOpen ? 'pointer' : 'default', children: _jsx(Suspense, { fallback: _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 0, m: 2 }, children: "Opening the notebook\u2026" }), children: _jsx(NotebookPreviewView, { nbformat: doc, height: maxHeight }) }) }), onOpen && (onOpenGiven || openLabel) ? (_jsx(Text, { as: "button", type: "button", onClick: onOpen, "data-notebook-preview-open": "", sx: {
                     alignSelf: 'flex-start',
                     p: 0,
                     border: 0,

package/lib/components/teams/NotebookPreviewView.js

@@ -18,14 +18,13 @@ export function NotebookPreviewView({ nbformat, height, }) {
     const content = useMemo(() => JSON.parse(JSON.stringify(nbformat)), [nbformat]);
     const { colorScheme } = useTheme();
     const mode = colorScheme?.startsWith('dark') ? 'dark' : 'light';
-    return (_jsxs(Box, { "data-notebook-preview-theme": mode, sx: { height }, 
+    return (_jsxs(Box, { "data-notebook-preview-theme": mode, height: 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,
+            : 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, height: height, sx: {
                         // No toolbar: no room kept for one.
                         '& .datalayer-NotebookPanel-header': {
                             display: 'none',

package/lib/components/teams/SceneTranscript.js

@@ -26,29 +26,15 @@ export function SceneTranscript({ lines, emptyText = 'What the scene says and do
             // The clipboard refused: nothing to say but the text, still on screen.
         }
     };
-    return (_jsxs(Box, { "data-scene-transcript": "", "data-scene-lines": lines.length, children: [lines.length === 0 ? (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: emptyText })) : (_jsx(Box, { as: "ol", "aria-label": "Transcript", sx: {
-                    listStyle: 'none',
-                    m: 0,
-                    p: 0,
-                    fontSize: 1,
-                    ...(maxHeight ? { maxHeight, overflowY: 'auto' } : {}),
-                }, children: lines.map(line => (_jsxs(Box, { as: "li", "data-transcript-line": line.kind, "data-transcript-from": line.from, "data-transcript-to": line.to, "aria-busy": line.open ? 'true' : undefined, sx: {
-                        display: 'grid',
-                        gridTemplateColumns: 'auto 1fr',
-                        gap: 2,
-                        py: 1,
-                        borderBottom: '1px solid',
-                        borderColor: 'border.muted',
-                        opacity: line.open ? 0.75 : 1,
-                    }, children: [_jsx(Text, { as: "time", sx: {
+    return (_jsxs(Box, { "data-scene-transcript": "", "data-scene-lines": lines.length, children: [lines.length === 0 ? (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: emptyText })) : (_jsx(Box, { as: "ol", "aria-label": "Transcript", listStyle: "none", m: 0, p: 0, fontSize: 1, sx: maxHeight ? { maxHeight, overflowY: 'auto' } : {}, children: lines.map(line => (_jsxs(Box, { as: "li", "data-transcript-line": line.kind, "data-transcript-from": line.from, "data-transcript-to": line.to, "aria-busy": line.open ? 'true' : undefined, display: "grid", gridTemplateColumns: "auto 1fr", gap: 2, py: 1, borderBottom: "1px solid", borderColor: "border.muted", opacity: line.open ? 0.75 : 1, children: [_jsx(Text, { as: "time", sx: {
                                 color: 'fg.muted',
                                 fontFamily: 'mono',
                                 fontSize: 0,
                                 pt: '2px',
                                 whiteSpace: 'nowrap',
-                            }, dateTime: new Date(line.at).toISOString(), children: timeText(line.at) }), _jsxs(Box, { sx: { minWidth: 0, overflowWrap: 'anywhere' }, children: [_jsxs(Text, { sx: { fontWeight: 600 }, children: [lineHeading(line), ": "] }), _jsxs(Text, { sx: {
+                            }, dateTime: new Date(line.at).toISOString(), children: timeText(line.at) }), _jsxs(Box, { minWidth: 0, overflowWrap: "anywhere", children: [_jsxs(Text, { sx: { fontWeight: 600 }, children: [lineHeading(line), ": "] }), _jsxs(Text, { sx: {
                                         fontFamily: line.kind === 'called' ? 'mono' : undefined,
                                         color: line.failed ? 'danger.fg' : undefined,
-                                    }, children: [line.text, line.open ? '…' : '', line.failed ? ' (failed)' : ''] })] })] }, line.key))) })), copy && lines.length > 0 && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { size: "small", onClick: () => void onCopy(), "data-transcript-copy": "", children: copied ? 'Copied' : 'Copy as text' }) }))] }));
+                                    }, children: [line.text, line.open ? '…' : '', line.failed ? ' (failed)' : ''] })] })] }, line.key))) })), copy && lines.length > 0 && (_jsx(Box, { mt: 2, children: _jsx(Button, { size: "small", onClick: () => void onCopy(), "data-transcript-copy": "", children: copied ? 'Copied' : 'Copy as text' }) }))] }));
 }
 export default SceneTranscript;

package/lib/components/teams/SceneView.js

@@ -14,14 +14,7 @@ export function SceneView({ children, members = NO_MEMBERS, tracer, lines, defau
     };
     const live = useSceneTranscript(lines ? null : tracer, members);
     const transcript = lines ?? live;
-    return (_jsxs(Box, { "data-scene-view": shown, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: 2,
-                    flexWrap: 'wrap',
-                    mb: 2,
-                }, children: [_jsxs(SegmentedControl, { "aria-label": "Scene view", size: "small", children: [_jsx(SegmentedControl.Button, { selected: shown === 'graph', onClick: () => choose('graph'), "data-scene-choice": "graph", children: "Graph" }), _jsx(SegmentedControl.Button, { selected: shown === 'transcript', onClick: () => choose('transcript'), "data-scene-choice": "transcript", children: transcript.length
+    return (_jsxs(Box, { "data-scene-view": shown, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap", mb: 2, children: [_jsxs(SegmentedControl, { "aria-label": "Scene view", size: "small", children: [_jsx(SegmentedControl.Button, { selected: shown === 'graph', onClick: () => choose('graph'), "data-scene-choice": "graph", children: "Graph" }), _jsx(SegmentedControl.Button, { selected: shown === 'transcript', onClick: () => choose('transcript'), "data-scene-choice": "transcript", children: transcript.length
                                     ? `Transcript (${transcript.length})`
                                     : 'Transcript' })] }), aside] }), _jsx(Box, { hidden: shown !== 'graph', "data-scene-graph": "", children: children }), shown === 'transcript' && (_jsx(SceneTranscript, { lines: transcript, emptyText: emptyText, maxHeight: maxHeight }))] }));
 }

package/lib/components/teams/TeamNotebook.js

@@ -19,19 +19,11 @@ export function notebookFileName(notebook) {
 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: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            minWidth: 0,
-            scrollMarginTop: '16px',
-            '&:focus': { outline: 'none' },
-            '&:focus-visible': {
-                outline: '2px solid',
-                outlineColor: 'var(--focus-outlineColor, var(--fgColor-accent))',
-                outlineOffset: 4,
-                borderRadius: 2,
-            },
+        tabIndex: -1, display: "flex", flexDirection: "column", gap: 2, minWidth: 0, scrollMarginTop: "16px", focus: { outline: 'none' }, focusVisible: {
+            outline: '2px solid',
+            outlineColor: 'var(--focus-outlineColor, var(--fgColor-accent))',
+            outlineOffset: 4,
+            borderRadius: 2,
         }, 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 }) })] }));
 }
 /**

package/lib/components/teams/TeamNotebookView.js

@@ -72,21 +72,11 @@ export function TeamNotebookView({ notebook, fileName, height, }) {
             }
         };
     }, [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',
-                        gap: 2,
-                        flexWrap: 'wrap',
-                    }, children: [_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, flex: '1 1 auto' }, children: running
+    return (_jsx(QueryClientProvider, { client: queries, children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", children: [_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, flex: '1 1 auto' }, children: running
                                 ? 'It runs in your browser, with Python (Pyodide): run its cells, change them, add your own.'
-                                : 'Starting Python in your browser…' }), _jsx(Button, { size: "small", leadingVisual: DownloadIcon, onClick: save, "data-team-notebook-download": "", children: "Download .ipynb" })] }), failed && _jsx(Flash, { variant: "warning", children: failed }), _jsx(Box, { "data-team-notebook-sheet": "", sx: {
-                        position: 'relative',
+                                : 'Starting Python in your browser…' }), _jsx(Button, { size: "small", leadingVisual: DownloadIcon, onClick: save, "data-team-notebook-download": "", children: "Download .ipynb" })] }), failed && _jsx(Flash, { variant: "warning", children: failed }), _jsx(Box, { "data-team-notebook-sheet": "", position: "relative", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", sx: {
                         height,
                         minHeight: 0,
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        overflow: 'hidden',
                         // As the loop's notebook view pins them: Lumino sizes these
                         // itself, and a resize it never hears of leaves them at zero.
                         '& .jp-NotebookPanel': {

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

@@ -16,5 +16,6 @@ export * from './NotebookPreview';
 export * from './sceneTranscript';
 export * from './SceneTranscript';
 export * from './SceneView';
+export * from './useBalloonRoom';
 export * from './sceneStage';
 export * from './AnswerSurfaces';

package/lib/components/teams/index.js

@@ -20,5 +20,6 @@ export * from './NotebookPreview';
 export * from './sceneTranscript';
 export * from './SceneTranscript';
 export * from './SceneView';
+export * from './useBalloonRoom';
 export * from './sceneStage';
 export * from './AnswerSurfaces';

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

@@ -0,0 +1,39 @@
+/**
+ * The room a scene's balloons take above their members, measured: a graph
+ * (`A2ATeamGraph`) or a member alone on its stage keeps above its members
+ * what their balloons take now — the greeting, the suggestions, *more*
+ * unfolded — and no more, so that the scene's box fits what it shows.
+ *
+ * @module components/teams/useBalloonRoom
+ */
+import type { RefObject } from 'react';
+/** A balloon, as measured on the page: its top and its anchor's, in pixels. */
+export type BalloonRect = {
+    /** The top of what it speaks for: the member's node, or its figure. */
+    anchorTop: number;
+    /** The balloon's top. */
+    top: number;
+    /** Its height: a hidden balloon (`display: none`) has none and takes no room. */
+    height: number;
+};
+/** Between the tallest balloon and the edge above it, in pixels at full scale. */
+export declare const BALLOON_MARGIN = 12;
+/** The room is kept to steps of this many pixels: a line more or less does not move the members. */
+export declare const BALLOON_ROOM_STEP = 8;
+/**
+ * The room above the members their balloons take, in pixels at full scale:
+ * the tallest balloon above its anchor, with a margin, in steps — at least
+ * `floor`. `zoom` is the scale the balloons are drawn at (a graph's
+ * viewport): their measures are divided by it.
+ */
+export declare function balloonRoomOf(balloons: readonly BalloonRect[], zoom?: number, floor?: number): number;
+/**
+ * The room the balloons inside `box` take above their anchors (the closest
+ * ancestor of each matching `anchor`), kept current as they open, close
+ * and change: at least `floor`, in pixels at full scale.
+ */
+export declare function useBalloonRoom(box: RefObject<HTMLElement | null>, { anchor, zoom, floor, }: {
+    anchor: string;
+    zoom?: number;
+    floor?: number;
+}): number;

package/lib/components/teams/useBalloonRoom.js

@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
+/** Between the tallest balloon and the edge above it, in pixels at full scale. */
+export const BALLOON_MARGIN = 12;
+/** The room is kept to steps of this many pixels: a line more or less does not move the members. */
+export const BALLOON_ROOM_STEP = 8;
+/**
+ * The room above the members their balloons take, in pixels at full scale:
+ * the tallest balloon above its anchor, with a margin, in steps — at least
+ * `floor`. `zoom` is the scale the balloons are drawn at (a graph's
+ * viewport): their measures are divided by it.
+ */
+export function balloonRoomOf(balloons, zoom = 1, floor = 0) {
+    const scale = zoom > 0 ? zoom : 1;
+    const above = Math.max(0, ...balloons
+        .filter(balloon => balloon.height > 0)
+        .map(balloon => (balloon.anchorTop - balloon.top) / scale));
+    const room = above > 0
+        ? Math.ceil((above + BALLOON_MARGIN) / BALLOON_ROOM_STEP) *
+            BALLOON_ROOM_STEP
+        : 0;
+    return Math.max(floor, room);
+}
+/**
+ * The room the balloons inside `box` take above their anchors (the closest
+ * ancestor of each matching `anchor`), kept current as they open, close
+ * and change: at least `floor`, in pixels at full scale.
+ */
+export function useBalloonRoom(box, { anchor, zoom = 1, floor = 0, }) {
+    const [room, setRoom] = useState(floor);
+    useEffect(() => {
+        const element = box.current;
+        if (!element ||
+            typeof ResizeObserver === 'undefined' ||
+            typeof MutationObserver === 'undefined') {
+            setRoom(floor);
+            return undefined;
+        }
+        let frame = 0;
+        const measure = () => {
+            frame = 0;
+            const balloons = [];
+            element
+                .querySelectorAll('[data-speech-balloon]')
+                .forEach(balloon => {
+                const owner = balloon.closest(anchor);
+                if (!owner || !element.contains(owner)) {
+                    return;
+                }
+                const rect = balloon.getBoundingClientRect();
+                balloons.push({
+                    anchorTop: owner.getBoundingClientRect().top,
+                    top: rect.top,
+                    height: rect.height,
+                });
+            });
+            const next = balloonRoomOf(balloons, zoom, floor);
+            setRoom(current => (current === next ? current : next));
+        };
+        const later = () => {
+            if (!frame) {
+                frame = requestAnimationFrame(measure);
+            }
+        };
+        const sizes = new ResizeObserver(later);
+        // A balloon that opens, closes or is made again is observed anew.
+        const observe = () => {
+            sizes.disconnect();
+            element
+                .querySelectorAll('[data-speech-balloon]')
+                .forEach(balloon => sizes.observe(balloon));
+            later();
+        };
+        const changes = new MutationObserver(observe);
+        changes.observe(element, { childList: true, subtree: true });
+        observe();
+        return () => {
+            if (frame) {
+                cancelAnimationFrame(frame);
+            }
+            sizes.disconnect();
+            changes.disconnect();
+        };
+    }, [box, anchor, zoom, floor]);
+    return room;
+}