@datalayer/agent-runtimes 1.3.66 → 1.3.68

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

@@ -9,6 +9,13 @@
  * 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.
  *
+ * 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
+ * (`SpecMark`), linked to it by an edge of its own. That edge is still until
+ * the member calls one of the connection's tools: then it flows toward the
+ * connection for as long as the call runs ({@link A2ATeamCall}), with the
+ * tool's name on it; under reduced motion, the arrow and the words alone.
+ *
  * The graph is a picture, not an editor: nothing is dragged, panned or
  * zoomed, and the wheel scrolls the page. Its viewport is worked out from its
  * box, so it fits a phone as it fits a desk.
@@ -16,9 +23,9 @@
  * @module components/teams/A2ATeamGraph
  */
 import type { JSX } from 'react';
-import { type Viewport } from '@xyflow/react';
+import { type Edge, type EdgeProps, type Viewport } from '@xyflow/react';
 import '@xyflow/react/dist/base.css';
-import type { A2ATeamFlow } from './a2aTeamFlow';
+import { type A2ATeamCall, type A2ATeamConnection, type A2ATeamFlow } from './a2aTeamFlow';
 import type { A2ATeamPersona } from './useA2ATeam';
 /** One member of the team, as the graph draws it. */
 export type A2ATeamGraphMember = {
@@ -34,6 +41,8 @@ export type A2ATeamGraphMember = {
     onToggle?: () => void;
     /** It was sent away, or called back. */
     onAway?: (away: boolean) => void;
+    /** The MCP servers it reaches, drawn under it (`teamConnectionsOf`). */
+    connections?: A2ATeamConnection[];
 };
 export type A2ATeamGraphProps = {
     /** The member that asks: drawn on the left. */
@@ -48,11 +57,21 @@ export type A2ATeamGraphProps = {
     label?: string;
     /** The character's size, in pixels at full scale. */
     size?: number;
+    /** The tool calls running now, to the members' connections (`useA2ATeam`). */
+    calls?: A2ATeamCall[];
 };
 /** The words on the edge for a flow. */
 export declare function flowWords(flow: A2ATeamFlow, entry: string, peer: string): string;
+type CallData = {
+    /** The tool being called, in words (`list invoices`); empty while none is. */
+    calling: string;
+};
+/** A member's link to a connection: still, or flowing toward it while a call runs. */
+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, }: A2ATeamGraphProps): JSX.Element;
+export declare function A2ATeamGraph({ entry, peer, flow, connected, label, size, calls, }: A2ATeamGraphProps): JSX.Element;
 export default A2ATeamGraph;

package/lib/components/teams/A2ATeamGraph.js

@@ -5,11 +5,18 @@ import '@xyflow/react/dist/base.css';
 import { Button, Label, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AssistantStage } from '../../chat/assistant/AssistantStage';
+import { SpecMark } from '../../chat/marks/SpecMark';
+import { toolWords, } from './a2aTeamFlow';
 /** The graph's own coordinates: the members, and room above them for their balloons. */
 const NODE_WIDTH = 200;
 const BALLOON_ROOM = 120;
 const GAP = 220;
 const WIDTH = NODE_WIDTH * 2 + GAP;
+/** A connection's node: half a member's. */
+const CONNECTION_WIDTH = NODE_WIDTH / 2;
+/** Between a member and its connections. */
+const CONNECTION_GAP = 44;
+const CONNECTIONS_APART = 16;
 /** Where the edge leaves and reaches a member: the middle of its character. */
 const HANDLE = (size) => ({
     opacity: 0,
@@ -28,6 +35,10 @@ const HANDLE = (size) => ({
  * 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({});
+/** A connection's node id: under its member. */
+const connectionNodeId = (member, connection) => `${member}/${connection}`;
 const MemberNode = memo(function MemberNode({ data, }) {
     const { id, side, size } = data;
     const member = useContext(Members)[id];
@@ -61,7 +72,35 @@ const MemberNode = memo(function MemberNode({ data, }) {
                         ? { position: 'absolute', left: 'auto' }
                         : { position: 'absolute', right: 'auto' }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: member.onToggle ?? (() => undefined), balloon: persona.saying
                         ? { text: persona.saying, more: persona.saying.endsWith('…') }
-                        : undefined, insist: persona.insist, onDismiss: away => member.onAway?.(away !== 'none') })) }), _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 })] }));
+                        : undefined, insist: persona.insist, onDismiss: away => member.onAway?.(away !== 'none') })) }), _jsxs(Text, { sx: { fontWeight: 600, textAlign: 'center' }, children: [member.emoji ? `${member.emoji} ` : '', member.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', textAlign: 'center' }, "data-member-where": "", children: member.where }), _jsx(Handle, { type: "source", position: Position.Right, style: HANDLE(size), isConnectable: false }), member.connections?.length ? (_jsx(Handle, { id: "connections", type: "source", position: Position.Bottom, style: { ...HANDLE(size), top: 'auto', bottom: 0 }, isConnectable: false })) : null] }));
+});
+/** A connection of a member's: the server's mark, what it reaches, and how. */
+const ConnectionNode = memo(function ConnectionNode({ id, data, }) {
+    const { member, connection: connectionId, size } = data;
+    const connection = useContext(Members)[member]?.connections?.find(known => known.id === connectionId);
+    const tool = useContext(Busy)[id];
+    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.Top, style: { ...HANDLE(0), top: 0 }, isConnectable: false }), _jsx(Box, { className: tool ? 'a2a-team-connection-busy' : undefined, sx: {
+                    width: size,
+                    height: size,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: tool ? 'accent.emphasis' : 'border.default',
+                    bg: 'canvas.default',
+                }, children: _jsx(SpecMark, { icon: connection.icon, emoji: connection.emoji, size: Math.round(size * 0.66) }) }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1, textAlign: 'center' }, children: connection.label }), connection.via && (_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted', textAlign: 'center' }, "data-connection-via": "", children: connection.via }))] }));
 });
 /** The words on the edge for a flow. */
 export function flowWords(flow, entry, peer) {
@@ -94,15 +133,42 @@ const LinkEdge = memo(function LinkEdge({ id, sourceX, sourceY, targetX, targetY
                         textAlign: 'center',
                     }, children: _jsx(Label, { variant: data?.connected ? 'accent' : 'secondary', children: data?.label }) }) })] }));
 });
-const NODE_TYPES = { member: MemberNode };
-const EDGE_TYPES = { a2a: LinkEdge };
+/** 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, #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 }) }) }))] }));
+});
+const NODE_TYPES = { member: MemberNode, connection: ConnectionNode };
+const EDGE_TYPES = { a2a: LinkEdge, mcp: CallEdge };
+/** Where a member's connections sit: under it, side by side, centred. */
+function connectionsX(memberX, count) {
+    const row = count * CONNECTION_WIDTH + (count - 1) * CONNECTIONS_APART;
+    const left = memberX + (NODE_WIDTH - row) / 2;
+    return Array.from({ length: count }, (_, at) => left + at * (CONNECTION_WIDTH + CONNECTIONS_APART));
+}
+/** 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)}`;
+}
 /** 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 };
 }
 /** 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, }) {
+export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size = 96, calls = [], }) {
     const box = useRef(null);
     const [width, setWidth] = useState(0);
     useEffect(() => {
@@ -122,7 +188,21 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
     const viewport = useMemo(() => teamViewport(width || WIDTH), [width]);
     // The members' height: the character, its name and where it runs.
     const memberHeight = size + 56;
-    const height = Math.ceil((BALLOON_ROOM + memberHeight) * viewport.zoom);
+    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 connections' ids, member by member: the nodes change only when they do.
+    const placed = [entry, peer].map(member => ({
+        member: member.id,
+        connections: (member.connections ?? []).map(connection => connection.id),
+    }));
+    const placedKey = JSON.stringify(placed);
+    const hasConnections = placed.some(({ connections }) => connections.length);
+    const height = Math.ceil((BALLOON_ROOM +
+        memberHeight +
+        (hasConnections ? CONNECTION_GAP + connectionHeight : 0)) *
+        viewport.zoom);
     const nodes = useMemo(() => [
         {
             id: entry.id,
@@ -147,9 +227,50 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
             zIndex: 10,
             data: { id: peer.id, side: 'right', size },
         },
-    ], [entry.id, peer.id, size, memberHeight]);
+        ...JSON.parse(placedKey).flatMap(({ member, connections }, side) => {
+            const xs = connectionsX(side === 0 ? 0 : NODE_WIDTH + GAP, connections.length);
+            return connections.map((connection, at) => ({
+                id: connectionNodeId(member, connection),
+                type: 'connection',
+                position: {
+                    x: xs[at],
+                    y: BALLOON_ROOM + memberHeight + CONNECTION_GAP,
+                },
+                width: CONNECTION_WIDTH,
+                height: connectionHeight,
+                draggable: false,
+                selectable: false,
+                zIndex: 5,
+                data: { member, connection, size: connectionSize },
+            }));
+        }),
+    ], [
+        entry.id,
+        peer.id,
+        size,
+        memberHeight,
+        placedKey,
+        connectionSize,
+        connectionHeight,
+    ]);
     const members = useMemo(() => ({ [entry.id]: entry, [peer.id]: peer }), [entry, peer]);
     const words = flowWords(flow, entry.name, peer.name);
+    // The tool each connection is answering now, in words, by its node's id.
+    const busy = useMemo(() => {
+        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) {
+                continue;
+            }
+            const node = connectionNodeId(member.id, connection.id);
+            byNode[node] ??= toolWords(call.tool, connection);
+            said.push(callWords(member.name, connection, call.tool));
+        }
+        return { byNode, said: [...new Set(said)] };
+    }, [calls, entry, peer]);
     const edges = useMemo(() => [
         {
             id: `${entry.id}->${peer.id}`,
@@ -164,8 +285,23 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
                 label: words ? `${label} · ${words}` : label,
             },
         },
-    ], [entry.id, peer.id, flow, connected, label, words]);
-    return (_jsxs(Box, { ref: box, "data-a2a-team-graph": "", "data-a2a-flow": flow, sx: {
+        ...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',
+                target: node,
+                type: 'mcp',
+                selectable: false,
+                focusable: false,
+                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: {
             width: '100%',
             height,
             position: 'relative',
@@ -179,17 +315,32 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
             '& .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, #ddf4ff)',
+                },
+            },
+            '& .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': { animation: 'none' },
+                '& .a2a-team-flow, & .a2a-team-connection-busy': {
+                    animation: 'none',
+                },
             },
             '& .react-flow, & .react-flow__renderer, & .react-flow__viewport': {
                 overflow: 'visible',
             },
             '& .react-flow__node': { cursor: 'default' },
-            // The library's credit stays, quietly (as the landing's network does).
-            '& .react-flow__attribution': { bg: 'transparent', color: 'fg.muted' },
-            '& .react-flow__attribution a': { color: 'fg.muted' },
         }, children: [_jsx(Box, { as: "span", "aria-live": "polite", sx: {
                     position: 'absolute',
                     width: 1,
@@ -197,6 +348,8 @@ export function A2ATeamGraph({ entry, peer, flow, connected, label = 'A2A', size
                     overflow: 'hidden',
                     clip: 'rect(0 0 0 0)',
                     whiteSpace: 'nowrap',
-                }, children: words }), _jsx(Members.Provider, { value: members, 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' }, "aria-label": `${entry.name} and ${peer.name}, over A2A` }) })] }));
+                }, children: heard }), _jsx(Members.Provider, { value: members, children: _jsx(Busy.Provider, { value: busy.byNode, children: _jsx(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: NODE_TYPES, edgeTypes: EDGE_TYPES, viewport: viewport, nodesDraggable: false, nodesConnectable: false, nodesFocusable: false, edgesFocusable: false, elementsSelectable: false, deleteKeyCode: null, selectionKeyCode: null, multiSelectionKeyCode: null, panOnDrag: false, panOnScroll: false, zoomOnScroll: false, zoomOnPinch: false, zoomOnDoubleClick: false, preventScrolling: false, style: { overflow: 'visible', background: 'transparent' }, 
+                        // The library is MIT: its credit is not required on the page.
+                        proOptions: { hideAttribution: true }, "aria-label": `${entry.name} and ${peer.name}, over A2A` }) }) })] }));
 }
 export default A2ATeamGraph;

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

@@ -31,3 +31,63 @@ export declare function flowEnds(flow: A2ATeamFlow, entry: string, peer: string)
     from: string;
     to: string;
 } | undefined;
+/**
+ * A member's connection, as the graph draws it: an MCP server it reaches,
+ * with its mark, and the tools that are its (`teamConnectionsOf` reads them
+ * from the member's Appspec and the server's spec).
+ */
+export type A2ATeamConnection = {
+    /** The MCP server's id: `odoo-accounting`. */
+    id: string;
+    /** The server's name: `Odoo Accounting`. */
+    name: string;
+    /** What the node says: the system it reaches, `Odoo`. */
+    label: string;
+    /** Its mark, `<package>:<name>`, as `SpecMark` draws it. */
+    icon?: string;
+    emoji?: string;
+    /** How it is reached, in small words under the label: `via MCP`. */
+    via?: string;
+    /** Its tools, by name: `odoo_accounting_list_invoices`. */
+    tools: string[];
+    /** What its tools' names begin with when its spec lists none: `odoo_accounting_`. */
+    prefix?: string;
+};
+/** A tool call a member's connection is answering now. */
+export type A2ATeamCall = {
+    /** The member that calls. */
+    member: string;
+    /** The connection called. */
+    connection: string;
+    /** The tool, as the runtime names it. */
+    tool: string;
+    /** The call's id, when the runtime gives one. */
+    id?: string;
+    /** When it started, in milliseconds. */
+    started: number;
+    /** Ended, but shown until it has been shown {@link CALL_SHOWN_MS}. */
+    ended?: boolean;
+};
+/** The least time a call is shown, in milliseconds: a quick one still reads. */
+export declare const CALL_SHOWN_MS = 900;
+/**
+ * The connection a tool is of: one whose tools name it (a toolset's prefix
+ * before the name is allowed, as a host may add one), else one whose
+ * prefix it begins with.
+ */
+export declare function connectionOfTool(tool: string, connections: A2ATeamConnection[]): A2ATeamConnection | undefined;
+/** A tool's name in a few words, without its connection's prefix: `list invoices`. */
+export declare function toolWords(tool: string, connection?: A2ATeamConnection): string;
+/**
+ * The calls running after an event of the peer's (`member`): a call it
+ * starts to one of its connections is added; its end marks it ended, and
+ * drops it once it has been shown long enough (else `holdMs` says when to
+ * look again, with {@link pruneCalls}). A new request, an answer or a
+ * failure ends them all.
+ */
+export declare function callsAfter(calls: A2ATeamCall[], event: A2APeerEvent, member: string, connections: A2ATeamConnection[], now: number): {
+    calls: A2ATeamCall[];
+    holdMs?: number;
+};
+/** The calls without those ended and shown long enough. */
+export declare function pruneCalls(calls: A2ATeamCall[], now: number): A2ATeamCall[];

package/lib/components/teams/a2aTeamFlow.js

@@ -30,3 +30,79 @@ export function flowEnds(flow, entry, peer) {
     }
     return undefined;
 }
+/** The least time a call is shown, in milliseconds: a quick one still reads. */
+export const CALL_SHOWN_MS = 900;
+/**
+ * The connection a tool is of: one whose tools name it (a toolset's prefix
+ * before the name is allowed, as a host may add one), else one whose
+ * prefix it begins with.
+ */
+export function connectionOfTool(tool, connections) {
+    return (connections.find(connection => connection.tools.some(name => tool === name ||
+        tool.endsWith(`_${name}`) ||
+        tool.endsWith(`.${name}`))) ??
+        connections.find(connection => connection.prefix && tool.includes(connection.prefix)));
+}
+/** A tool's name in a few words, without its connection's prefix: `list invoices`. */
+export function toolWords(tool, connection) {
+    let name = tool;
+    const prefix = connection?.prefix;
+    if (prefix && name.includes(prefix)) {
+        name = name.slice(name.indexOf(prefix) + prefix.length);
+    }
+    return name.replace(/[_-]+/g, ' ').trim() || tool;
+}
+/**
+ * The calls running after an event of the peer's (`member`): a call it
+ * starts to one of its connections is added; its end marks it ended, and
+ * drops it once it has been shown long enough (else `holdMs` says when to
+ * look again, with {@link pruneCalls}). A new request, an answer or a
+ * failure ends them all.
+ */
+export function callsAfter(calls, event, member, connections, now) {
+    if (event.phase !== 'working') {
+        return { calls: [] };
+    }
+    const step = event.tool;
+    if (!step) {
+        return { calls };
+    }
+    const connection = connectionOfTool(step.name, connections);
+    if (!connection) {
+        return { calls };
+    }
+    if (!step.ended) {
+        return {
+            calls: [
+                ...calls,
+                {
+                    member,
+                    connection: connection.id,
+                    tool: step.name,
+                    ...(step.id ? { id: step.id } : {}),
+                    started: now,
+                },
+            ],
+        };
+    }
+    const index = calls.findIndex(call => !call.ended &&
+        call.connection === connection.id &&
+        (step.id && call.id ? call.id === step.id : call.tool === step.name));
+    if (index < 0) {
+        return { calls };
+    }
+    const call = calls[index];
+    const left = call.started + CALL_SHOWN_MS - now;
+    if (left <= 0) {
+        return { calls: calls.filter((_, at) => at !== index) };
+    }
+    return {
+        calls: calls.map((c, at) => (at === index ? { ...c, ended: true } : c)),
+        holdMs: left,
+    };
+}
+/** The calls without those ended and shown long enough. */
+export function pruneCalls(calls, now) {
+    const kept = calls.filter(call => !call.ended || call.started + CALL_SHOWN_MS > now);
+    return kept.length === calls.length ? calls : kept;
+}

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

@@ -7,5 +7,6 @@
  * @module components/teams
  */
 export * from './a2aTeamFlow';
+export * from './teamConnections';
 export * from './useA2ATeam';
 export * from './A2ATeamGraph';

package/lib/components/teams/index.js

@@ -11,5 +11,6 @@
  * @module components/teams
  */
 export * from './a2aTeamFlow';
+export * from './teamConnections';
 export * from './useA2ATeam';
 export * from './A2ATeamGraph';

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

@@ -0,0 +1,8 @@
+import type { AppSpec } from '../../types/agentspecs';
+import type { A2ATeamConnection } from './a2aTeamFlow';
+/**
+ * The connections of an application, each with its server's name and mark
+ * and its tools. A connection to a server the catalogue does not have is
+ * left out: there is nothing to draw it with.
+ */
+export declare function teamConnectionsOf(app: Pick<AppSpec, 'connections'>): A2ATeamConnection[];

package/lib/components/teams/teamConnections.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A member's connections, as the team graph draws them, read from its
+ * Appspec: each connection names an MCP server, whose spec gives its name,
+ * its mark (`icon`, as `SpecMark` draws it) and, from the server's actions,
+ * the names of its tools.
+ *
+ * @module components/teams/teamConnections
+ */
+import { MCP_SERVER_LIBRARY } from '../../specs/mcpServers';
+import { SERVER_ACTIONS } from '../../specs/actions';
+/** A server reference without its version: `odoo-accounting:0.0.1` is `odoo-accounting`. */
+const idOf = (ref) => {
+    const at = ref.lastIndexOf(':');
+    return at > 0 && ref.slice(at + 1).includes('.') ? ref.slice(0, at) : ref;
+};
+/**
+ * The connections of an application, each with its server's name and mark
+ * and its tools. A connection to a server the catalogue does not have is
+ * left out: there is nothing to draw it with.
+ */
+export function teamConnectionsOf(app) {
+    const connections = [];
+    for (const connection of app.connections ?? []) {
+        const id = idOf(connection.server);
+        const server = MCP_SERVER_LIBRARY[id];
+        if (!server || connections.some(known => known.id === id)) {
+            continue;
+        }
+        // A pattern (`odoo_accounting_*`) is not a name a call has.
+        const tools = Object.keys(SERVER_ACTIONS[id]?.tools ?? {}).filter(name => !/[*?[]/.test(name));
+        connections.push({
+            id,
+            name: server.name,
+            // The system it reaches: the first word of its name ("Odoo Accounting").
+            label: server.name.split(/\s+/)[0] || server.name,
+            ...(server.icon ? { icon: server.icon } : {}),
+            ...(server.emoji ? { emoji: server.emoji } : {}),
+            via: 'via MCP',
+            tools,
+            // The gateway names a toolset's tools after it: `odoo_accounting_…`.
+            prefix: `${id.replace(/-/g, '_')}_`,
+        });
+    }
+    return connections;
+}

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

@@ -2,7 +2,7 @@ import type { AssistantState } from '../../chat/assistant/state';
 import { type BrowserModelOptions } from '../../runtimes/browser/model';
 import { type A2APeer } from '../../runtimes/browser/a2aPeer';
 import type { AppSpec } from '../../types/agentspecs';
-import { type A2ATeamFlow } from './a2aTeamFlow';
+import { type A2ATeamCall, type A2ATeamConnection, type A2ATeamFlow } from './a2aTeamFlow';
 /** What one member's character does: its state, its balloon, and whether it was sent away. */
 export type A2ATeamPersona = {
     state: AssistantState;
@@ -33,6 +33,8 @@ export type UseA2ATeamOptions = {
     askTool?: string;
     /** The most steps of one turn. */
     maxSteps?: number;
+    /** The peer's connections (`teamConnectionsOf(peerApp)`): the calls to them are kept. */
+    peerConnections?: A2ATeamConnection[];
 };
 export type A2ATeam = {
     entryPersona: A2ATeamPersona;
@@ -46,6 +48,8 @@ export type A2ATeam = {
     report: string | null;
     /** Which way the link carries a message now. */
     flow: A2ATeamFlow;
+    /** The tool calls the peer's connections are answering now. */
+    calls: A2ATeamCall[];
     /** Whether a turn is under way. */
     busy: boolean;
     /** Whether the entry can be asked: its peer is connected. */

package/lib/components/teams/useA2ATeam.js

@@ -13,7 +13,9 @@
  * {@link a2aPeerTool}. What each of them does is kept as a persona — the
  * state its character acts and what its balloon says — and the exchange
  * between them as a log, the peer's last answer as the report, and the way
- * the link carries a message as the flow ({@link flowAfter}).
+ * the link carries a message as the flow ({@link flowAfter}). The tools the
+ * peer calls on its connections (its MCP servers), told over A2A as it calls
+ * them, are kept as the calls running now ({@link callsAfter}).
  *
  * What `A2ATeamGraph` draws, and what a page's composer sends.
  *
@@ -23,7 +25,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { stepCountIs, ToolLoopAgent } from 'ai';
 import { createBrowserModel, } from '../../runtimes/browser/model';
 import { a2aPeerTool, } from '../../runtimes/browser/a2aPeer';
-import { flowAfter } from './a2aTeamFlow';
+import { callsAfter, flowAfter, pruneCalls, } from './a2aTeamFlow';
+const NO_CONNECTIONS = [];
 export const AT_REST = {
     state: 'idle',
     insist: false,
@@ -36,7 +39,7 @@ export function balloonLine(text, length = 120) {
 }
 /** Run a team of two over A2A in the page. */
 export function useA2ATeam(options) {
-    const { entry, peerApp, peer, inference, maxSteps = 6 } = options;
+    const { entry, peerApp, peer, inference, maxSteps = 6, peerConnections = NO_CONNECTIONS, } = options;
     const askTool = options.askTool ?? `ask_${peerApp.id.replace(/-/g, '_')}`;
     const [entryPersona, setEntryPersona] = useState(() => ({
         ...AT_REST,
@@ -49,6 +52,9 @@ export function useA2ATeam(options) {
     const [report, setReport] = useState(null);
     const [exchange, setExchange] = useState([]);
     const [flow, setFlow] = useState('still');
+    const [calls, setCalls] = useState([]);
+    const callsNow = useRef([]);
+    const callTimer = useRef(undefined);
     const [busy, setBusy] = useState(false);
     const history = useRef([]);
     const abort = useRef(null);
@@ -61,6 +67,18 @@ export function useA2ATeam(options) {
         if (next.holdMs) {
             flowTimer.current = setTimeout(() => setFlow('still'), next.holdMs);
         }
+        // The calls to the peer's connections: a call's end, when it came
+        // quickly, is shown a moment longer.
+        const after = callsAfter(callsNow.current, event, peerApp.id, peerConnections, Date.now());
+        callsNow.current = after.calls;
+        setCalls(after.calls);
+        if (after.holdMs) {
+            clearTimeout(callTimer.current);
+            callTimer.current = setTimeout(() => {
+                callsNow.current = pruneCalls(callsNow.current, Date.now());
+                setCalls(callsNow.current);
+            }, after.holdMs);
+        }
         if (event.phase === 'asked') {
             setExchange(prev => [
                 ...prev,
@@ -109,7 +127,7 @@ export function useA2ATeam(options) {
                 insist: true,
             }));
         }
-    }, [entry.name, peerApp.name]);
+    }, [entry.name, peerApp.id, peerApp.name, peerConnections]);
     const agent = useMemo(() => {
         if (!peer) {
             return null;
@@ -203,6 +221,8 @@ export function useA2ATeam(options) {
                 insist: true,
             }));
             setFlow('still');
+            callsNow.current = [];
+            setCalls([]);
         }
         finally {
             abort.current = null;
@@ -213,6 +233,7 @@ export function useA2ATeam(options) {
     useEffect(() => () => {
         abort.current?.abort();
         clearTimeout(flowTimer.current);
+        clearTimeout(callTimer.current);
     }, []);
     const setEntryAway = useCallback((away) => setEntryPersona(prev => ({ ...prev, away })), []);
     const setPeerAway = useCallback((away) => setPeerPersona(prev => ({ ...prev, away })), []);
@@ -225,6 +246,7 @@ export function useA2ATeam(options) {
         exchange,
         report,
         flow,
+        calls,
         busy,
         ready: agent !== null,
         send,

package/lib/examples/AgentA2ATeamExample.d.ts

@@ -11,8 +11,10 @@
  * Accounting the wizard, as their Appspecs say, in a graph (`A2ATeamGraph`)
  * whose one edge is the A2A link. The exchange is shown as it happens: Sales
  * asks — the edge flows toward Accounting — Accounting works and then answers
- * — the edge flows back — each in its own state and balloon. Then the report
- * appears. The page's own state is `useA2ATeam`'s, which the landing's home
+ * — the edge flows back — each in its own state and balloon. Under
+ * Accounting hangs Odoo, its connection (the odoo-accounting MCP server, from
+ * its Appspec): the edge to it flows while Accounting calls one of its tools,
+ * the tool's name on it. Then the report appears. The page's own state is `useA2ATeam`'s, which the landing's home
  * page runs too.
  *
  * Where Accounting is: `VITE_A2A_ACCOUNTING_URL`, else the examples' local

package/lib/examples/AgentA2ATeamExample.js

@@ -10,12 +10,14 @@ import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useBrowserInference } from '../hooks/useBrowserInference';
 import { readJwtClaims, tokenLifetimeMs, useAnonymousSessionStore, } from '../runtimes/browser/anonymousToken';
 import { connectA2APeer } from '../runtimes/browser/a2aPeer';
-import { A2ATeamGraph, useA2ATeam } from '../components/teams';
+import { A2ATeamGraph, teamConnectionsOf, useA2ATeam, } from '../components/teams';
 import { ACCOUNTING_APP_0_0_1, SALES_APP_0_0_1 } from '../specs/apps';
 import { SALES_AND_ACCOUNTING_TEAM_SPEC_0_0_1 } from '../specs/teams/teams';
 const TEAM = SALES_AND_ACCOUNTING_TEAM_SPEC_0_0_1;
 const SALES = SALES_APP_0_0_1;
 const ACCOUNTING = ACCOUNTING_APP_0_0_1;
+/** What Accounting reaches, from its Appspec: Odoo, through the odoo-accounting MCP server. */
+const ACCOUNTING_CONNECTIONS = teamConnectionsOf(ACCOUNTING);
 /** The members of the team, as the team spec says them. */
 function members() {
     const sales = TEAM.agents.find(member => member.id === TEAM.entry);
@@ -67,6 +69,7 @@ function AgentA2ATeam() {
         peer,
         inference,
         askTool: 'ask_accounting',
+        peerConnections: ACCOUNTING_CONNECTIONS,
     });
     const send = (text) => {
         setDraft('');
@@ -106,7 +109,8 @@ function AgentA2ATeam() {
                         where: accountingWhere,
                         persona: team.peerPersona,
                         onAway: team.setPeerAway,
-                    }, flow: team.flow, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { flex: '1 1 420px', minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: ["Ask ", SALES.name] }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', mb: 2 }, children: (SALES.interface.starters ?? []).map(starter => (_jsx(Button, { size: "small", disabled: !team.ready || team.busy, onClick: () => send(starter.message), children: starter.label }, starter.label))) }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: "Ask for a financial report\u2026", onChange: event => setDraft(event.target.value), onKeyDown: event => {
+                        connections: ACCOUNTING_CONNECTIONS,
+                    }, flow: team.flow, calls: team.calls, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { flex: '1 1 420px', minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: ["Ask ", SALES.name] }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', mb: 2 }, children: (SALES.interface.starters ?? []).map(starter => (_jsx(Button, { size: "small", disabled: !team.ready || team.busy, onClick: () => send(starter.message), children: starter.label }, starter.label))) }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: "Ask for a financial report\u2026", onChange: event => setDraft(event.target.value), onKeyDown: event => {
                                     if (event.key === 'Enter' && !event.shiftKey) {
                                         event.preventDefault();
                                         send(draft);

package/lib/examples/VoiceChatExample.d.ts

@@ -13,7 +13,8 @@
  *   agent (http://127.0.0.1:8765);
  * - `?voiceModelsUrl=` — the browser's models, as pinned
  *   (`scripts/voice/serve_store.py`, http://127.0.0.1:8770);
- * - `?speechUrl=` — ai-agents' speech service (http://127.0.0.1:4401).
+ * - `?speechUrl=` — Datalayer's speech service, datalayer-speech on r1
+ *   (https://r1.datalayer.run), asked with the signed-in person's token.
  */
 import React from 'react';
 declare const VoiceChatExample: React.FC;

package/lib/examples/VoiceChatExample.js

@@ -18,7 +18,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   agent (http://127.0.0.1:8765);
  * - `?voiceModelsUrl=` — the browser's models, as pinned
  *   (`scripts/voice/serve_store.py`, http://127.0.0.1:8770);
- * - `?speechUrl=` — ai-agents' speech service (http://127.0.0.1:4401).
+ * - `?speechUrl=` — Datalayer's speech service, datalayer-speech on r1
+ *   (https://r1.datalayer.run), asked with the signed-in person's token.
  */
 import { useMemo, useState } from 'react';
 import { Heading, Link, SegmentedControl, Text } from '@primer/react';
@@ -34,7 +35,7 @@ function fromAddress(name, otherwise) {
 }
 const SERVER = fromAddress('agentRuntimesUrl', 'http://127.0.0.1:8765');
 const MODELS = fromAddress('voiceModelsUrl', 'http://127.0.0.1:8770');
-const SPEECH = fromAddress('speechUrl', 'http://127.0.0.1:4401');
+const SPEECH = fromAddress('speechUrl', 'https://r1.datalayer.run');
 /** The packages that hear, loaded the first time the microphone is used. */
 const ENGINES = {
     transformers: () => import('@huggingface/transformers'),

package/lib/runtimes/browser/a2aPeer.d.ts

@@ -46,6 +46,19 @@ export type ConnectA2APeerOptions = {
  * application has one, named for it.
  */
 export declare function connectA2APeer(options: ConnectA2APeerOptions): Promise<A2APeer>;
+/**
+ * A tool the peer calls while it works, as its runtime tells it: the call,
+ * then its end (`ended`), the two sharing the call's id.
+ */
+export type A2APeerToolStep = {
+    /** The call's id, when the runtime gives one: its end has the same. */
+    id?: string;
+    name: string;
+    /** Whether this is the call's end rather than its start. */
+    ended: boolean;
+    /** Why it failed, when it did. */
+    error?: string;
+};
 /** What happens to one request, as it happens. */
 export type A2APeerEvent = {
     phase: 'asked';
@@ -54,6 +67,8 @@ export type A2APeerEvent = {
     phase: 'working';
     taskId: string;
     note?: string;
+    /** The tool it calls or has finished with, when the step is one. */
+    tool?: A2APeerToolStep;
 } | {
     phase: 'answered';
     taskId: string;
@@ -66,6 +81,19 @@ export type A2APeerEvent = {
 export declare function textOf(parts: Part[] | undefined): string;
 /** A user's message of one text part, as the SDK's 1.x types write it. */
 export declare function textMessage(text: string): Message;
+/**
+ * What a working status says while the peer works: in a few words, and the
+ * tool step when it is one.
+ *
+ * The runtime's A2A worker publishes each tool call of its agent, and each
+ * call's end, as a `working` status whose message has one data part:
+ * `{tool_call: {id, name, arguments}}`, then
+ * `{tool_result: {id, name, result, error}}`.
+ */
+export declare function stepOf(message: Message | undefined): {
+    note?: string;
+    tool?: A2APeerToolStep;
+};
 /**
  * Ask a peer once, streaming the task, and return its answer.
  *

package/lib/runtimes/browser/a2aPeer.js

@@ -90,23 +90,41 @@ export function textMessage(text) {
         referenceTaskIds: [],
     };
 }
-/** What a tool call or a tool result says while the peer works, in a few words. */
-function noteOf(message) {
+/**
+ * What a working status says while the peer works: in a few words, and the
+ * tool step when it is one.
+ *
+ * The runtime's A2A worker publishes each tool call of its agent, and each
+ * call's end, as a `working` status whose message has one data part:
+ * `{tool_call: {id, name, arguments}}`, then
+ * `{tool_result: {id, name, result, error}}`.
+ */
+export function stepOf(message) {
     for (const part of message?.parts ?? []) {
         const content = part.content;
         if (content?.$case === 'text' && content.value.trim()) {
-            return content.value;
+            return { note: content.value };
         }
         if (content?.$case === 'data' && content.value) {
-            // What the runtime's A2A worker publishes while its agent works.
             const data = content.value;
-            const name = (data.tool_call ?? data.tool_result)?.name;
-            if (name) {
-                return data.tool_call ? `Calling ${name}` : `Read ${name}`;
+            const told = data.tool_call ?? data.tool_result;
+            if (told?.name) {
+                const ended = !data.tool_call;
+                return {
+                    note: ended ? `Read ${told.name}` : `Calling ${told.name}`,
+                    tool: {
+                        ...(told.id ? { id: told.id } : {}),
+                        name: told.name,
+                        ended,
+                        ...(data.tool_result?.error
+                            ? { error: String(data.tool_result.error) }
+                            : {}),
+                    },
+                };
             }
         }
     }
-    return undefined;
+    return {};
 }
 const ENDED_BADLY = {
     [TaskState.TASK_STATE_FAILED]: 'failed',
@@ -158,7 +176,7 @@ async function streamTask(peer, request, signal, onEvent) {
             const status = payload.value.status;
             taskId = payload.value.taskId || taskId;
             if (status?.state === TaskState.TASK_STATE_WORKING) {
-                onEvent?.({ phase: 'working', taskId, note: noteOf(status.message) });
+                onEvent?.({ phase: 'working', taskId, ...stepOf(status.message) });
             }
             else if (status) {
                 ended = status.state;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datalayer/agent-runtimes",
-    "version": "1.3.66",
+    "version": "1.3.68",
     "type": "module",
     "workspaces": [
         ".",