@datalayer/agent-runtimes 1.5.89 → 1.5.91

package/lib/components/teams/A2ATeamGraph.js

@@ -1,65 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, memo, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
-import { BaseEdge, EdgeLabelRenderer, Handle, Position, ReactFlow, } from '@xyflow/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { 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.js';
 import { useSignalValue } from '@datalayer/reactor/react';
 import { teamNotebookKernel } from './teamNotebookKernel.js';
-import { SpecMark } from '../../chat/marks/SpecMark.js';
-import { toolWords, } from './a2aTeamFlow.js';
-import { NotebookPreview } from './NotebookPreview.js';
-import { notebookBalloonVisual } from './TeamNotebook.js';
+import { callFlow, toolWords, } from './a2aTeamFlow.js';
 import { useBalloonRoom } from './useBalloonRoom.js';
-import { toolLineText } from '../../chat/assistant/toolLine.js';
-/** The graph's own coordinates: the members, and room above them for their balloons. */
-const NODE_WIDTH = 200;
-const BALLOON_ROOM = 144;
+import { sceneBackdrop, sceneStageSx } from './backdrops/index.js';
+import { AT_PLACE, Busy, MEMBER_HANDLES, Members, Moving, clampOffset, connectionNodeId, } from './backdrops/nodes.js';
+import { STUDIO_LAYOUT } from './backdrops/studio.js';
+export { MEMBER_HANDLES, clampOffset, connectionDetails, connectionLabel, memberLabel, } from './backdrops/nodes.js';
+export { arrowPath } from './backdrops/edges.js';
+export { CallEdge, LinkEdge, MemberNode, ConnectionNode, } from './backdrops/studio.js';
+/** Whether a selection is on the edge between two ends: by its id, or by its ends either way. */
+export function edgeSelected(selected, from, to) {
+    return Boolean(selected &&
+        (selected.id === `${from}->${to}` ||
+            (selected.from === from && selected.to === to) ||
+            (selected.from === to && selected.to === from)));
+}
+/** The studio's width at full scale: the entry, a peer, and the room between them. */
+const WIDTH = STUDIO_LAYOUT.nodeWidth * 2 + STUDIO_LAYOUT.gap;
 /** The room a balloon that holds a notebook needs above its member. */
 const NOTEBOOK_BALLOON_ROOM = 480;
-/** How tall the notebook in a balloon grows before it scrolls. */
-const NOTEBOOK_PREVIEW_HEIGHT = 180;
-const GAP = 220;
-const WIDTH = NODE_WIDTH * 2 + GAP;
-/** Between two rows of members. */
-const ROW_GAP = 48;
-/** A connection's node: half a member's. */
-const CONNECTION_WIDTH = NODE_WIDTH / 2;
-/** Between a member and its connections, to its right. */
-const CONNECTION_GAP = 44;
-const CONNECTIONS_APART = 16;
-/** Where a member's connections start: right of it. */
-const CONNECTION_X = NODE_WIDTH + CONNECTION_GAP;
-/** Below the character's middle, so the A2A edge leaving it passes above. */
-/** What a member's connections take beside it. */
-const CONNECTIONS_BESIDE = CONNECTION_GAP + CONNECTION_WIDTH;
-/** Where the edge leaves and reaches a member: the middle of its character. */
-const HANDLE = (size) => ({
-    opacity: 0,
-    pointerEvents: 'none',
-    top: size / 2,
-    width: 1,
-    height: 1,
-    minWidth: 0,
-    minHeight: 0,
-    border: 0,
-});
-/**
- * The handles an edge leaves and reaches a member by, named: the middle of
- * its character on each side, chosen by where the other member stands.
- */
-export const MEMBER_HANDLES = {
-    inLeft: 'in-left',
-    outRight: 'out-right',
-    inTop: 'in-top',
-    outBottom: 'out-bottom',
-    inRight: 'in-right',
-    outLeft: 'out-left',
-    inBottom: 'in-bottom',
-    outTop: 'out-top',
-    connections: 'connections',
-};
 /**
  * The handles for an edge from one place to another: rightward across,
  * leftward across, or down or up when the other member is mostly below or
@@ -89,243 +53,12 @@ export function handlesBetween(from, to) {
             targetHandle: MEMBER_HANDLES.inBottom,
         };
 }
-/**
- * The members as they are now, by id. Not in the nodes' data: a node whose
- * object changes is taken by React Flow for a new one, measured again, and
- * the edge is dropped until it is — the line vanished as the characters
- * moved. The nodes stay the same objects; what they show is read from here.
- */
-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: beside 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();
-    // 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 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');
-    const given = persona.notebook
-        ? {
-            attachment: (_jsx(NotebookPreview, { notebook: persona.notebook.data, title: notebookTitle, maxHeight: NOTEBOOK_PREVIEW_HEIGHT, onOpen: member.onNotebookOpen, openLabel: member.expandTarget ? 'Open it below to run it' : undefined })),
-            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,
-    // its balloon and its menu take it back, and are left to themselves —
-    // no drag, no pan, no wheel.
-    , { 
-        // React Flow lets the pointer through a node that is neither dragged
-        // 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", 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, { 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, 
-                    // 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;
-                        }
-                        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;
-                            }
-                            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, 
-                    // 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, { id: MEMBER_HANDLES.outRight, type: "source", position: Position.Right, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outLeft, type: "source", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outBottom, type: "source", position: Position.Bottom, style: { ...HANDLE(size), top: size }, isConnectable: false }), _jsx(Handle, { id: MEMBER_HANDLES.outTop, type: "source", position: Position.Top, style: { ...HANDLE(size), top: 0 }, isConnectable: false }), member.connections?.length ? (_jsx(Handle, { id: MEMBER_HANDLES.connections, type: "source", position: Position.Right, style: { ...HANDLE(size), left: 'auto', right: 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 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;
-    }
-    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);
-                    }
-                }, 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) {
-    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'
@@ -334,72 +67,42 @@ export function flowWords(flow, entry, peer) {
             ? `${peer} answers ${entry}`
             : '';
 }
-const ARROW = 9;
 /**
- * An arrowhead at the end a message goes to — the target's when `forward`,
- * the source's otherwise — pointing along the edge.
+ * Where a member's connections sit: right of it, the first one's top where
+ * the backdrop puts it (level with the character's middle on `studio`),
+ * the next ones under it.
  */
-export function arrowPath(source, target, forward) {
-    const tip = forward ? target : source;
-    const from = forward ? source : target;
-    const length = Math.hypot(tip.x - from.x, tip.y - from.y) || 1;
-    // Along the edge, toward the tip; and across it.
-    const ax = (tip.x - from.x) / length;
-    const ay = (tip.y - from.y) / length;
-    const bx = tip.x - ax * ARROW;
-    const by = tip.y - ay * ARROW;
-    const px = -ay * (ARROW / 1.6);
-    const py = ax * (ARROW / 1.6);
-    return `M ${tip.x},${tip.y} L ${bx + px},${by + py} L ${bx - px},${by - py} Z`;
+function connectionsY(memberY, top, count, connectionHeight, apart) {
+    return Array.from({ length: count }, (_, at) => memberY + top + at * (connectionHeight + apart));
 }
-const LinkEdge = memo(function LinkEdge({ id, sourceX, sourceY, targetX, targetY, data, }) {
-    const flow = data?.flow ?? 'still';
-    const path = `M ${sourceX},${sourceY} L ${targetX},${targetY}`;
-    // The arrow at the end the message goes to, along the edge.
-    const towardPeer = flow === 'asking';
-    const arrow = arrowPath({ x: sourceX, y: sourceY }, { x: targetX, y: targetY }, towardPeer);
-    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, path: path, style: {
-                    stroke: data?.connected
-                        ? 'var(--borderColor-accent-emphasis)'
-                        : 'var(--borderColor-muted)',
-                    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)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "10 14" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent)" })] })), _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, }) {
-    const calling = Boolean(data?.calling);
-    const path = `M ${sourceX},${sourceY} L ${targetX},${targetY}`;
-    const arrow = `M ${targetX},${targetY} L ${targetX - ARROW / 1.6},${targetY - ARROW} L ${targetX + ARROW / 1.6},${targetY - ARROW} Z`;
-    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, path: path, style: {
-                    stroke: 'var(--borderColor-default)',
-                    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)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "6 8" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent)" })] })), 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 };
+/** How far down a member's connections reach, from its top; none, 0. */
+function connectionsReach(top, count, connectionHeight, apart) {
+    return count ? top + count * connectionHeight + (count - 1) * apart : 0;
+}
+/** What a link to a connection says at rest, as `A2A` says the members' link. */
+export const MCP_LABEL = 'MCP';
 /**
- * Where a member's connections sit: right of it, the first one's mark level
- * with the character's middle (a mark half the character's size, so a
- * quarter down), the next ones under it.
+ * What a link to a connection says while it carries a call, short enough
+ * for the room beside the member: the tool going out, `MCP · list invoices`,
+ * then `MCP · Odoo answers` as its result comes back.
  */
-function connectionsY(memberY, size, count, connectionHeight) {
-    const top = memberY + size / 4;
-    return Array.from({ length: count }, (_, at) => top + at * (connectionHeight + CONNECTIONS_APART));
-}
-/** How far down a member's connections reach, from its top; none, 0. */
-function connectionsReach(size, count, connectionHeight) {
-    return count
-        ? size / 4 + count * connectionHeight + (count - 1) * CONNECTIONS_APART
-        : 0;
+export function callEdgeWords(connection, tool, flow) {
+    return flow === 'asking'
+        ? `${MCP_LABEL} · ${toolWords(tool, connection)}`
+        : flow === 'answering'
+            ? `${MCP_LABEL} · ${connection.label} answers`
+            : MCP_LABEL;
 }
-/** What a member's call says, on its edge and to a screen reader. */
-export function callWords(member, connection, tool) {
-    return `${member} calls ${connection.label} · ${toolWords(tool, connection)}`;
+/**
+ * What a member's call says, on its edge and to a screen reader: the call
+ * going out, `Accounting calls Odoo · list invoices`, then its result
+ * coming back, `Odoo answers Accounting · list invoices`.
+ */
+export function callWords(member, connection, tool, flow = 'asking') {
+    const words = toolWords(tool, connection);
+    return flow === 'answering'
+        ? `${connection.label} answers ${member} · ${words}`
+        : `${member} calls ${connection.label} · ${words}`;
 }
 /** The viewport that shows a graph `drawn` wide whole in a box `width` wide, never larger than drawn. */
 export function teamViewport(width, drawn = WIDTH) {
@@ -445,8 +148,58 @@ export function flowOfAll(flows) {
             : 'still';
 }
 const NO_PEERS = [];
+/**
+ * The rules on the graph's box: what every backdrop needs — React Flow
+ * overflowing so a balloon shows whole, the cursors, a busy connection's
+ * pulse, and no movement under reduced motion — then the backdrop's own
+ * and its variables, light and dark (`sceneStageSx`).
+ */
+function stageRules(theme, clickable) {
+    return {
+        // An edge is clicked for its latest exchange: it takes the pointer.
+        ...(clickable
+            ? { '& .react-flow__edge': { cursor: 'pointer', pointerEvents: 'all' } }
+            : {}),
+        '@keyframes a2aTeamPulse': {
+            '0%, 100%': { boxShadow: '0 0 0 0 transparent' },
+            '50%': {
+                boxShadow: '0 0 0 4px var(--bgColor-accent-muted)',
+            },
+        },
+        '& .a2a-team-connection-busy': {
+            animation: 'a2aTeamPulse 1s ease-in-out infinite',
+        },
+        // The arrow and the words say which way; the movement is extra.
+        '@media (prefers-reduced-motion: reduce)': {
+            '& .a2a-team-flow, & .a2a-team-connection-busy': {
+                animation: 'none',
+            },
+        },
+        '& .react-flow, & .react-flow__renderer, & .react-flow__viewport': {
+            overflow: 'visible',
+        },
+        '& .react-flow__node': { cursor: 'default' },
+        // A member is moved by dragging its figure.
+        '& [data-team-member] [data-assistant-figure]': { cursor: 'grab' },
+        '& [data-team-member] [data-assistant-figure]:active': {
+            cursor: 'grabbing',
+        },
+        ...sceneStageSx(theme),
+    };
+}
 /** Draw a team over A2A, each link moving with what travels on it. */
-export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows, connected, label = 'A2A', labels, links, positions, size = 96, calls = [], balloonRoom = BALLOON_ROOM, }) {
+export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows, connected, label = 'A2A', labels, links, positions, size = 96, calls = [], balloonRoom, backdrop, selected, onSelectEdge, }) {
+    // How the stage is drawn: its nodes and edges, its colours, its layout.
+    const look = sceneBackdrop(backdrop);
+    const { layout: sized, theme } = look;
+    const NODE_WIDTH = sized.nodeWidth;
+    const GAP = sized.gap;
+    const ROW_GAP = sized.rowGap;
+    const CONNECTION_WIDTH = sized.connectionWidth;
+    const CONNECTIONS_APART = sized.connectionsApart;
+    const CONNECTION_X = NODE_WIDTH + sized.connectionGap;
+    const CONNECTIONS_BESIDE = sized.connectionGap + CONNECTION_WIDTH;
+    const roomFloor = balloonRoom ?? sized.balloonRoom;
     const peers = useMemo(() => [...(peer ? [peer] : []), ...more], [peer, more]);
     const members = useMemo(() => [entry, ...peers], [entry, peers]);
     const memberOf = (id) => members.find(member => member.id === id);
@@ -476,16 +229,17 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
     const placing = placeMembers(entry.id, peerIds, positions);
     const hasConnections = members.some(member => member.connections?.length);
     // The last column's connections sit beside it, inside the graph.
-    const drawn = Math.max(WIDTH, placing.columns * NODE_WIDTH +
+    const drawn = Math.max(NODE_WIDTH * 2 + GAP, placing.columns * NODE_WIDTH +
         (placing.columns - 1) * GAP +
         (hasConnections ? CONNECTIONS_BESIDE : 0));
     const viewport = useMemo(() => teamViewport(width || drawn, drawn), [width, drawn]);
-    // The members' height: the character, its name and where it runs.
-    const memberHeight = size + 56;
-    const connectionSize = Math.round(size / 2);
-    // Its mark, its label and how it is reached (about 45px under the mark),
-    // and room under it before the graph's edge.
-    const connectionHeight = connectionSize + 58;
+    // The members' height: the figure, its name and where it runs.
+    const memberHeight = sized.memberHeight(size);
+    const connectionSize = Math.round(size * sized.connectionScale);
+    // Its mark, its label and how it is reached, and room under it before
+    // the graph's edge.
+    const connectionHeight = sized.connectionHeight(connectionSize);
+    const connectionsTop = sized.connectionsTop(size);
     // The connections' ids, member by member: the nodes change only when they do.
     const placed = members.map(member => ({
         member: member.id,
@@ -497,13 +251,13 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
     const measured = useBalloonRoom(box, {
         anchor: '[data-team-member]',
         zoom: viewport.zoom,
-        floor: balloonRoom,
+        floor: roomFloor,
     });
     const room = members.some(member => member.persona.notebook)
         ? 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 reach = Math.max(0, ...placed.map(({ connections }) => connectionsReach(connectionsTop, connections.length, connectionHeight, CONNECTIONS_APART)));
     const rowHeight = Math.max(memberHeight, reach);
     const total = room + placing.rows * rowHeight + (placing.rows - 1) * ROW_GAP;
     const height = Math.ceil(total * viewport.zoom);
@@ -520,7 +274,7 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         const layout = layoutOf(id);
         const count = placed.find(({ member }) => member === id)?.connections.length ?? 0;
         const beside = count ? CONNECTIONS_BESIDE : 0;
-        const tall = Math.max(memberHeight, connectionsReach(size, count, connectionHeight));
+        const tall = Math.max(memberHeight, connectionsReach(connectionsTop, count, connectionHeight, CONNECTIONS_APART));
         return {
             minDx: -layout.x,
             maxDx: drawn - NODE_WIDTH - beside - layout.x,
@@ -578,7 +332,7 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         },
         // A member's connections move with it.
         ...connections.map((connection, at) => {
-            const ys = connectionsY(y, size, connections.length, connectionHeight);
+            const ys = connectionsY(y, connectionsTop, connections.length, connectionHeight, CONNECTIONS_APART);
             return {
                 id: connectionNodeId(id, connection),
                 type: 'connection',
@@ -594,7 +348,18 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
                 data: { member: id, connection, size: connectionSize },
             };
         }),
-    ]), [layoutKey, size, memberHeight, connectionSize, connectionHeight]);
+    ]), [
+        layoutKey,
+        size,
+        memberHeight,
+        connectionSize,
+        connectionHeight,
+        connectionsTop,
+        CONNECTIONS_APART,
+        CONNECTION_X,
+        CONNECTION_WIDTH,
+        NODE_WIDTH,
+    ]);
     // 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);
@@ -621,21 +386,34 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         ? flowWords(flowOf(link.to), entry.name, memberOf(link.to)?.name ?? link.to)
         : '';
     const words = edgesWanted.map(wordsOf).filter(Boolean);
-    // The tool each connection is answering now, in words, by its node's id.
+    // The tool each connection is answering now, in words, by its node's id,
+    // and which way its edge carries it: a call still running before one
+    // whose result is coming back.
     const busy = useMemo(() => {
         const byNode = {};
+        const edgeByNode = {};
         const said = [];
-        for (const call of calls) {
+        const running = [
+            ...calls.filter(call => callFlow(call) === 'asking'),
+            ...calls.filter(call => callFlow(call) === 'answering'),
+        ];
+        for (const call of running) {
             const member = members.find(one => one.id === call.member);
             const connection = member?.connections?.find(known => known.id === call.connection);
             if (!member || !connection) {
                 continue;
             }
             const node = connectionNodeId(member.id, connection.id);
+            const flow = callFlow(call);
+            const words = callWords(member.name, connection, call.tool, flow);
             byNode[node] ??= toolWords(call.tool, connection);
-            said.push(callWords(member.name, connection, call.tool));
+            edgeByNode[node] ??= {
+                flow,
+                label: callEdgeWords(connection, call.tool, flow),
+            };
+            said.push(words);
         }
-        return { byNode, said: [...new Set(said)] };
+        return { byNode, edgeByNode, said: [...new Set(said)] };
     }, [calls, members]);
     const linkKey = JSON.stringify(edgesWanted.map(link => ({
         ...link,
@@ -644,10 +422,11 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
         label: wordsOf(link)
             ? `${labelOf(link.to)} · ${wordsOf(link)}`
             : labelOf(link.to),
+        selected: edgeSelected(selected, link.from, link.to),
         ...handlesBetween(layoutOf(link.from), layoutOf(link.to)),
     })));
     const edges = useMemo(() => [
-        ...JSON.parse(linkKey).map(({ from, to, flow: linkFlow, connected: reached, label: said, sourceHandle, targetHandle, }) => ({
+        ...JSON.parse(linkKey).map(({ from, to, flow: linkFlow, connected: reached, label: said, selected: chosen, sourceHandle, targetHandle, }) => ({
             id: `${from}->${to}`,
             source: from,
             sourceHandle,
@@ -656,11 +435,17 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
             type: 'a2a',
             selectable: false,
             focusable: false,
-            data: { flow: linkFlow, connected: reached, label: said },
+            data: {
+                flow: linkFlow,
+                connected: reached,
+                label: said,
+                selected: chosen,
+            },
         })),
         ...JSON.parse(placedKey).flatMap(({ member, connections }) => connections.map(connection => {
             const node = connectionNodeId(member, connection);
             const calling = busy.byNode[node] ?? '';
+            const carried = busy.edgeByNode[node];
             return {
                 id: `${member}->${node}`,
                 source: member,
@@ -669,55 +454,29 @@ export function A2ATeamGraph({ entry, peer, peers: more = NO_PEERS, flow, flows,
                 type: 'mcp',
                 selectable: false,
                 focusable: false,
-                data: { calling },
+                data: {
+                    flow: carried?.flow ?? 'still',
+                    calling,
+                    label: carried?.label ?? MCP_LABEL,
+                    selected: edgeSelected(selected, member, node),
+                },
             };
         })),
-    ], [linkKey, placedKey, busy]);
+    ], [linkKey, placedKey, busy, selected]);
     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, width: "100%", height: height, position: "relative", sx: {
-            '@keyframes a2aTeamFlow': {
-                from: { strokeDashoffset: 24 },
-                to: { strokeDashoffset: 0 },
-            },
-            '& .a2a-team-flow-asking': {
-                animation: 'a2aTeamFlow 0.6s linear infinite',
-            },
-            '& .a2a-team-flow-answering': {
-                animation: 'a2aTeamFlow 0.6s linear infinite reverse',
-            },
-            '@keyframes a2aTeamCall': {
-                from: { strokeDashoffset: 14 },
-                to: { strokeDashoffset: 0 },
-            },
-            '@keyframes a2aTeamPulse': {
-                '0%, 100%': { boxShadow: '0 0 0 0 transparent' },
-                '50%': {
-                    boxShadow: '0 0 0 4px var(--bgColor-accent-muted)',
-                },
-            },
-            '& .a2a-team-call': {
-                animation: 'a2aTeamCall 0.5s linear infinite',
-            },
-            '& .a2a-team-connection-busy': {
-                animation: 'a2aTeamPulse 1s ease-in-out infinite',
-            },
-            // The arrow and the words say which way; the movement is extra.
-            '@media (prefers-reduced-motion: reduce)': {
-                '& .a2a-team-flow, & .a2a-team-connection-busy': {
-                    animation: 'none',
-                },
-            },
-            '& .react-flow, & .react-flow__renderer, & .react-flow__viewport': {
-                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", 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' }, 
+    const clickable = Boolean(onSelectEdge);
+    const stageSx = useMemo(() => stageRules(theme, clickable), [theme, clickable]);
+    return (_jsxs(Box, { ref: box, "data-a2a-team-graph": "", "data-scene-backdrop": look.id, "data-a2a-flow": flowNow, "data-a2a-calls": calls.length, "data-a2a-members": members.length, "data-a2a-selected": selected ? selected.id : undefined, width: "100%", height: height, position: "relative", sx: stageSx, 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: look.nodeTypes, edgeTypes: look.edgeTypes, 
+                            // A click on an edge: its latest exchange, for the page (S3-02).
+                            onEdgeClick: onSelectEdge
+                                ? (_event, edge) => onSelectEdge({
+                                    id: edge.id,
+                                    from: edge.source,
+                                    to: edge.target,
+                                    over: edge.type === 'mcp' ? 'mcp' : 'a2a',
+                                })
+                                : undefined, 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` }) }) }) })] }));
 }