@datalayer/agent-runtimes 1.3.85 → 1.3.86

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

@@ -1,13 +1,23 @@
 /**
- * A team of two over A2A, as a graph (React Flow): each member is its
- * character (`AssistantStage`), with its name and where it runs under it, and
- * one edge links the entry to the peer.
+ * A team over A2A, as a graph (React Flow): each member is its character
+ * (`AssistantStage`), with its name and where it runs under it, and an edge
+ * links the entry to each peer it asks — one peer (`peer`, a team of two)
+ * or several (`peers`, a team of N; LOOP A-08). The edges are the team's
+ * `talks_to` (`links`): a peer that talks to another peer has its edge
+ * drawn too, still, since the page runs the entry's asks only.
  *
- * The edge is still until a message travels on it. While the entry asks, it
+ * An edge is still until a message travels on it. While the entry asks, it
  * flows from the entry to the peer; while the peer answers, from the peer to
- * the entry ({@link A2ATeamFlow}, from the `A2APeerEvent` phases). A reader
- * who asks for no motion sees the same thing without the movement: the arrow
- * at the end the message goes to, and the word for it on the edge.
+ * the entry ({@link A2ATeamFlow}, from the `A2APeerEvent` phases; one flow
+ * per peer, `flows`). A reader who asks for no motion sees the same thing
+ * without the movement: the arrow at the end the message goes to, and the
+ * word for it on the edge.
+ *
+ * The members stand where the layout puts them: the entry on the left and
+ * the peers to its right, one under another — or where a scene's stage
+ * directions say (`positions`, fractions of the box; LOOP A-13): the
+ * distinct `x` values are the columns, left to right, the distinct `y`
+ * values the rows, top to bottom.
  *
  * A member's connections — the MCP servers it reaches, Odoo for Accounting —
  * hang under it, each a node half a member's size with the server's mark
@@ -108,17 +118,43 @@ export type A2ATeamGraphMember = {
     /** Its balloon's display was chosen in its menu: the page may keep it. */
     onBalloonDisplayChange?: (display: BalloonDisplay) => void;
 };
+/** Who talks to whom over A2A: an edge of the graph. */
+export type A2ATeamGraphLink = {
+    from: string;
+    to: string;
+};
+/** Where a member stands: fractions of the box, as a scene's stage says. */
+export type A2ATeamGraphPosition = {
+    x: number;
+    y: number;
+};
 export type A2ATeamGraphProps = {
     /** The member that asks: drawn on the left. */
     entry: A2ATeamGraphMember;
-    /** The member asked over A2A: drawn on the right. */
-    peer: A2ATeamGraphMember;
-    /** Which way the link carries a message now. */
-    flow: A2ATeamFlow;
-    /** Whether the peer is reached: the edge is drawn faint until it is. */
-    connected: boolean;
-    /** What the edge says at rest: `A2A · <the peer's skill>`. */
+    /** The member asked over A2A: drawn on the right. A team of two. */
+    peer?: A2ATeamGraphMember;
+    /** The members asked over A2A, a team of N: after `peer` when both are given. */
+    peers?: readonly A2ATeamGraphMember[];
+    /** Which way the link to `peer` carries a message now. */
+    flow?: A2ATeamFlow;
+    /** Which way each peer's link carries a message now, by the peer's id. */
+    flows?: Record<string, A2ATeamFlow>;
+    /**
+     * Whether the peers are reached: an edge is drawn faint until its peer
+     * is. One answer for all, or one per peer id.
+     */
+    connected: boolean | Record<string, boolean>;
+    /** What an edge says at rest: `A2A · <the peer's skill>`. */
     label?: string;
+    /** What each peer's edge says at rest, by the peer's id; `label` unsaid. */
+    labels?: Record<string, string>;
+    /**
+     * The edges: the team's `talks_to` over A2A. Unsaid, the entry to each
+     * peer. An edge between two peers is drawn still.
+     */
+    links?: readonly A2ATeamGraphLink[];
+    /** Where each member stands, by its id (a scene's `stage.positions`). */
+    positions?: Record<string, A2ATeamGraphPosition>;
     /** The character's size, in pixels at full scale. */
     size?: number;
     /** The tool calls running now, to the members' connections (`useA2ATeam`). */
@@ -130,6 +166,36 @@ export type A2ATeamGraphProps = {
      */
     balloonRoom?: number;
 };
+/**
+ * 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 declare const MEMBER_HANDLES: {
+    readonly inLeft: "in-left";
+    readonly outRight: "out-right";
+    readonly inTop: "in-top";
+    readonly outBottom: "out-bottom";
+    readonly inRight: "in-right";
+    readonly outLeft: "out-left";
+    readonly inBottom: "in-bottom";
+    readonly outTop: "out-top";
+    readonly 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
+ * above.
+ */
+export declare function handlesBetween(from: {
+    x: number;
+    y: number;
+}, to: {
+    x: number;
+    y: number;
+}): {
+    sourceHandle: string;
+    targetHandle: string;
+};
 /** How far a member was moved from its place, in the graph's coordinates. */
 export type MemberOffset = {
     dx: number;
@@ -152,6 +218,17 @@ export declare function connectionLabel(connection: Pick<A2ATeamConnection, 'lab
 export declare function connectionDetails(connection: Pick<A2ATeamConnection, 'name' | 'tools'>, member: string | undefined, calling?: string): string;
 /** The words on the edge for a flow. */
 export declare function flowWords(flow: A2ATeamFlow, entry: string, peer: string): string;
+/**
+ * An arrowhead at the end a message goes to — the target's when `forward`,
+ * the source's otherwise — pointing along the edge.
+ */
+export declare function arrowPath(source: {
+    x: number;
+    y: number;
+}, target: {
+    x: number;
+    y: number;
+}, forward: boolean): string;
 type CallData = {
     /** The tool being called, in words (`list invoices`); empty while none is. */
     calling: string;
@@ -160,8 +237,26 @@ type CallData = {
 export declare const CallEdge: import("react").NamedExoticComponent<EdgeProps<Edge<CallData>>>;
 /** What a member's call says, on its edge and to a screen reader. */
 export declare function callWords(member: string, connection: A2ATeamConnection, tool: string): string;
-/** The viewport that shows the graph's width whole in a box `width` wide, never larger than drawn. */
-export declare function teamViewport(width: number): Viewport;
-/** Draw a team of two over A2A, the link moving with what travels on it. */
-export declare function A2ATeamGraph({ entry, peer, flow, connected, label, size, calls, balloonRoom, }: A2ATeamGraphProps): JSX.Element;
+/** The viewport that shows a graph `drawn` wide whole in a box `width` wide, never larger than drawn. */
+export declare function teamViewport(width: number, drawn?: number): Viewport;
+/** Where a member is laid out: its column and row, from the positions or the default. */
+export type MemberPlace = {
+    column: number;
+    row: number;
+};
+/**
+ * Where each member stands, as columns and rows: from the positions given
+ * (the distinct `x` values are the columns left to right, the distinct `y`
+ * values the rows top to bottom), or the entry in the first column and the
+ * peers one under another in the second.
+ */
+export declare function placeMembers(entryId: string, peerIds: readonly string[], positions?: Record<string, A2ATeamGraphPosition>): {
+    places: Record<string, MemberPlace>;
+    columns: number;
+    rows: number;
+};
+/** The one flow the graph reports for all its edges: asking before answering before still. */
+export declare function flowOfAll(flows: readonly A2ATeamFlow[]): A2ATeamFlow;
+/** Draw a team over A2A, each link moving with what travels on it. */
+export declare function A2ATeamGraph({ entry, peer, peers: more, flow, flows, connected, label, labels, links, positions, size, calls, balloonRoom, }: A2ATeamGraphProps): JSX.Element;
 export default A2ATeamGraph;

package/lib/components/teams/A2ATeamGraph.js

@@ -21,6 +21,8 @@ const NOTEBOOK_BALLOON_ROOM = 480;
 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. */
@@ -37,6 +39,50 @@ const HANDLE = (size) => ({
     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
+ * above.
+ */
+export function handlesBetween(from, to) {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    if (Math.abs(dx) >= Math.abs(dy)) {
+        return dx >= 0
+            ? {
+                sourceHandle: MEMBER_HANDLES.outRight,
+                targetHandle: MEMBER_HANDLES.inLeft,
+            }
+            : {
+                sourceHandle: MEMBER_HANDLES.outLeft,
+                targetHandle: MEMBER_HANDLES.inRight,
+            };
+    }
+    return dy >= 0
+        ? {
+            sourceHandle: MEMBER_HANDLES.outBottom,
+            targetHandle: MEMBER_HANDLES.inTop,
+        }
+        : {
+            sourceHandle: MEMBER_HANDLES.outTop,
+            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
@@ -159,7 +205,7 @@ const MemberNode = memo(function MemberNode({ data, }) {
             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, { 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, 
+            : 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, 
                     // In the node, not over the page; the balloon opens toward the
                     // middle of the graph: rightward from the left member.
                     place: side === 'left'
@@ -236,7 +282,7 @@ const MemberNode = memo(function MemberNode({ data, }) {
                     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] }));
+                    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.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) {
@@ -317,14 +363,29 @@ export function flowWords(flow, entry, peer) {
             : '';
 }
 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.
+ */
+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`;
+}
 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.
+    // The arrow at the end the message goes to, along the edge.
     const towardPeer = flow === 'asking';
-    const tipX = towardPeer ? targetX : sourceX;
-    const back = towardPeer ? -ARROW : ARROW;
-    const arrow = `M ${tipX},${targetY} L ${tipX + back},${targetY - ARROW / 1.6} L ${tipX + back},${targetY + ARROW / 1.6} Z`;
+    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, #0969da)'
@@ -368,13 +429,60 @@ function connectionsX(memberX, count) {
 export function callWords(member, connection, tool) {
     return `${member} calls ${connection.label} · ${toolWords(tool, connection)}`;
 }
-/** The viewport that shows the graph's width whole in a box `width` wide, never larger than drawn. */
-export function teamViewport(width) {
-    const zoom = Math.min(1, width / WIDTH);
-    return { zoom, x: (width - WIDTH * zoom) / 2, y: 0 };
+/** The viewport that shows a graph `drawn` wide whole in a box `width` wide, never larger than drawn. */
+export function teamViewport(width, drawn = WIDTH) {
+    const zoom = Math.min(1, width / drawn);
+    return { zoom, x: (width - drawn * 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 = [], balloonRoom = BALLOON_ROOM, }) {
+/**
+ * Where each member stands, as columns and rows: from the positions given
+ * (the distinct `x` values are the columns left to right, the distinct `y`
+ * values the rows top to bottom), or the entry in the first column and the
+ * peers one under another in the second.
+ */
+export function placeMembers(entryId, peerIds, positions) {
+    const ids = [entryId, ...peerIds];
+    const placed = positions ?? {};
+    if (ids.every(id => placed[id])) {
+        const xs = [...new Set(ids.map(id => placed[id].x))].sort((a, b) => a - b);
+        const ys = [...new Set(ids.map(id => placed[id].y))].sort((a, b) => a - b);
+        return {
+            places: Object.fromEntries(ids.map(id => [
+                id,
+                { column: xs.indexOf(placed[id].x), row: ys.indexOf(placed[id].y) },
+            ])),
+            columns: xs.length,
+            rows: ys.length,
+        };
+    }
+    return {
+        places: {
+            [entryId]: { column: 0, row: 0 },
+            ...Object.fromEntries(peerIds.map((id, at) => [id, { column: 1, row: at }])),
+        },
+        columns: peerIds.length ? 2 : 1,
+        rows: Math.max(1, peerIds.length),
+    };
+}
+/** The one flow the graph reports for all its edges: asking before answering before still. */
+export function flowOfAll(flows) {
+    return flows.includes('asking')
+        ? 'asking'
+        : flows.includes('answering')
+            ? 'answering'
+            : 'still';
+}
+const NO_PEERS = [];
+/** 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, }) {
+    const peers = useMemo(() => [...(peer ? [peer] : []), ...more], [peer, more]);
+    const members = useMemo(() => [entry, ...peers], [entry, peers]);
+    const memberOf = (id) => members.find(member => member.id === id);
+    const flowOf = (peerId) => flows?.[peerId] ??
+        (peer && peerId === peer.id ? (flow ?? 'still') : 'still');
+    const connectedOf = (peerId) => typeof connected === 'boolean' ? connected : Boolean(connected[peerId]);
+    const labelOf = (peerId) => labels?.[peerId] ?? label;
+    const edgesWanted = links ?? peers.map(one => ({ from: entry.id, to: one.id }));
     const box = useRef(null);
     const [width, setWidth] = useState(0);
     useEffect(() => {
@@ -391,7 +499,11 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
         observer.observe(element);
         return () => observer.disconnect();
     }, []);
-    const viewport = useMemo(() => teamViewport(width || WIDTH), [width]);
+    // Where the members stand, as columns and rows, and the width that takes.
+    const peerIds = peers.map(one => one.id);
+    const placing = placeMembers(entry.id, peerIds, positions);
+    const drawn = Math.max(WIDTH, placing.columns * NODE_WIDTH + (placing.columns - 1) * GAP);
+    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);
@@ -399,43 +511,47 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
     // and room under it before the graph's edge.
     const connectionHeight = connectionSize + 58;
     // The connections' ids, member by member: the nodes change only when they do.
-    const placed = [entry, peer].map(member => ({
+    const placed = members.map(member => ({
         member: member.id,
         connections: (member.connections ?? []).map(connection => connection.id),
     }));
     const placedKey = JSON.stringify(placed);
     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)
+    const room = members.some(member => member.persona.notebook)
         ? Math.max(NOTEBOOK_BALLOON_ROOM, balloonRoom)
         : balloonRoom;
-    const height = Math.ceil((room +
-        memberHeight +
-        (hasConnections ? CONNECTION_GAP + connectionHeight : 0)) *
-        viewport.zoom);
+    // Under a member: its connections, when any member has some.
+    const below = hasConnections ? CONNECTION_GAP + connectionHeight : 0;
+    const rowHeight = memberHeight + below;
+    const total = room + placing.rows * rowHeight + (placing.rows - 1) * ROW_GAP;
+    const height = Math.ceil(total * viewport.zoom);
+    // Where each member is laid out, before it is moved.
+    const layoutOf = (id) => {
+        const place = placing.places[id] ?? { column: 0, row: 0 };
+        return {
+            x: place.column * (NODE_WIDTH + GAP),
+            y: room + place.row * (rowHeight + ROW_GAP),
+        };
+    };
     // 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
+        const layout = layoutOf(id);
+        const under = 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,
+            minDx: -layout.x,
+            maxDx: drawn - NODE_WIDTH - layout.x,
+            minDy: -layout.y,
+            maxDy: total - layout.y - memberHeight - under,
         };
     };
-    const [moved, setMoved] = useState(() => ({
-        [entry.id]: MOVED.get(movedKey(entry.id)) ?? AT_PLACE,
-        [peer.id]: MOVED.get(movedKey(peer.id)) ?? AT_PLACE,
-    }));
+    const [moved, setMoved] = useState(() => Object.fromEntries(members.map(member => [
+        member.id,
+        MOVED.get(movedKey(member.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,
@@ -449,66 +565,55 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
             setMoved(current => ({ ...current, [id]: AT_PLACE }));
         },
     };
-    const nodes = useMemo(() => [
+    // Each member's place and move, and its connections: the nodes are made
+    // again only when one of them changes.
+    const layout = members.map(member => {
+        const at = layoutOf(member.id);
+        const offset = offsetOf(member.id);
+        return {
+            id: member.id,
+            x: at.x + offset.dx,
+            y: at.y + offset.dy,
+            // Its balloon opens toward the middle of the graph.
+            side: at.x + NODE_WIDTH / 2 <= drawn / 2
+                ? 'left'
+                : 'right',
+            connections: (member.connections ?? []).map(connection => connection.id),
+        };
+    });
+    const layoutKey = JSON.stringify(layout);
+    const nodes = useMemo(() => JSON.parse(layoutKey).flatMap(({ id, x, y, side, connections }) => [
         {
-            id: entry.id,
+            id,
             type: 'member',
-            position: { x: entryOffset.dx, y: room + entryOffset.dy },
+            position: { x, y },
             width: NODE_WIDTH,
             height: memberHeight,
             draggable: false,
             selectable: false,
             // Above the edge and its label: a balloon overflows its node.
             zIndex: 10,
-            data: { id: entry.id, side: 'left', size },
+            data: { id, side, size },
         },
-        {
-            id: peer.id,
-            type: 'member',
-            position: {
-                x: NODE_WIDTH + GAP + peerOffset.dx,
-                y: room + peerOffset.dy,
-            },
-            width: NODE_WIDTH,
-            height: memberHeight,
-            draggable: false,
-            selectable: false,
-            zIndex: 10,
-            data: { id: peer.id, side: 'right', size },
-        },
-        ...JSON.parse(placedKey).flatMap(({ member, connections }, side) => {
-            // 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),
+        // A member's connections move with it.
+        ...connections.map((connection, at) => {
+            const xs = connectionsX(x, connections.length);
+            return {
+                id: connectionNodeId(id, connection),
                 type: 'connection',
                 position: {
                     x: xs[at],
-                    y: room + memberHeight + CONNECTION_GAP + moveBy.dy,
+                    y: y + memberHeight + CONNECTION_GAP,
                 },
                 width: CONNECTION_WIDTH,
                 height: connectionHeight,
                 draggable: false,
                 selectable: false,
                 zIndex: 5,
-                data: { member, connection, size: connectionSize },
-            }));
+                data: { member: id, connection, size: connectionSize },
+            };
         }),
-    ], [
-        entry.id,
-        peer.id,
-        size,
-        room,
-        memberHeight,
-        placedKey,
-        connectionSize,
-        connectionHeight,
-        entryOffset.dx,
-        entryOffset.dy,
-        peerOffset.dx,
-        peerOffset.dy,
-    ]);
+    ]), [layoutKey, size, memberHeight, connectionSize, connectionHeight]);
     // 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);
@@ -526,16 +631,23 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
                 }
                 : { 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);
+    const membersById = useMemo(() => ({
+        [entry.id]: entryMember,
+        ...Object.fromEntries(peers.map(one => [one.id, one])),
+    }), [entry.id, entryMember, peers]);
+    // The words for each flow, for the edges and for a screen reader.
+    const wordsOf = (link) => link.from === entry.id
+        ? 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.
     const busy = useMemo(() => {
         const byNode = {};
         const said = [];
         for (const call of calls) {
-            const member = call.member === entry.id ? entry : peer;
-            const connection = member.connections?.find(known => known.id === call.connection);
-            if (!connection || member.id !== call.member) {
+            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);
@@ -543,28 +655,35 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
             said.push(callWords(member.name, connection, call.tool));
         }
         return { byNode, said: [...new Set(said)] };
-    }, [calls, entry, peer]);
+    }, [calls, members]);
+    const linkKey = JSON.stringify(edgesWanted.map(link => ({
+        ...link,
+        flow: link.from === entry.id ? flowOf(link.to) : 'still',
+        connected: connectedOf(link.to),
+        label: wordsOf(link)
+            ? `${labelOf(link.to)} · ${wordsOf(link)}`
+            : labelOf(link.to),
+        ...handlesBetween(layoutOf(link.from), layoutOf(link.to)),
+    })));
     const edges = useMemo(() => [
-        {
-            id: `${entry.id}->${peer.id}`,
-            source: entry.id,
-            target: peer.id,
+        ...JSON.parse(linkKey).map(({ from, to, flow: linkFlow, connected: reached, label: said, sourceHandle, targetHandle, }) => ({
+            id: `${from}->${to}`,
+            source: from,
+            sourceHandle,
+            target: to,
+            targetHandle,
             type: 'a2a',
             selectable: false,
             focusable: false,
-            data: {
-                flow,
-                connected,
-                label: words ? `${label} · ${words}` : label,
-            },
-        },
+            data: { flow: linkFlow, connected: reached, label: said },
+        })),
         ...JSON.parse(placedKey).flatMap(({ member, connections }) => connections.map(connection => {
             const node = connectionNodeId(member, connection);
             const calling = busy.byNode[node] ?? '';
             return {
                 id: `${member}->${node}`,
                 source: member,
-                sourceHandle: 'connections',
+                sourceHandle: MEMBER_HANDLES.connections,
                 target: node,
                 type: 'mcp',
                 selectable: false,
@@ -572,9 +691,10 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
                 data: { calling },
             };
         })),
-    ], [entry.id, peer.id, flow, connected, label, words, placedKey, busy]);
-    const heard = [words, ...busy.said].filter(Boolean).join('. ');
-    return (_jsxs(Box, { ref: box, "data-a2a-team-graph": "", "data-a2a-flow": flow, "data-a2a-calls": calls.length, sx: {
+    ], [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',
@@ -626,8 +746,8 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
                     overflow: 'hidden',
                     clip: 'rect(0 0 0 0)',
                     whiteSpace: 'nowrap',
-                }, 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' }, 
+                }, 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 ${peer.name}, over A2A` }) }) }) })] }));
+                            proOptions: { hideAttribution: true }, "aria-label": `${entry.name} and ${peers.map(one => one.name).join(', ')}, over A2A` }) }) }) })] }));
 }
 export default A2ATeamGraph;

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

@@ -16,3 +16,4 @@ export * from './NotebookPreview';
 export * from './sceneTranscript';
 export * from './SceneTranscript';
 export * from './SceneView';
+export * from './sceneStage';

package/lib/components/teams/index.js

@@ -20,3 +20,4 @@ export * from './NotebookPreview';
 export * from './sceneTranscript';
 export * from './SceneTranscript';
 export * from './SceneView';
+export * from './sceneStage';