@datalayer/agent-runtimes 1.3.63 → 1.3.65

package/lib/components/teams/A2ATeamGraph.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { BaseEdge, EdgeLabelRenderer, Handle, Position, ReactFlow, } from '@xyflow/react';
+import '@xyflow/react/dist/base.css';
+import { Button, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AssistantStage } from '../../chat/assistant/AssistantStage';
+/** 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;
+/** 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,
+});
+const MemberNode = memo(function MemberNode({ data, }) {
+    const { member, side, size } = data;
+    const stageRef = useRef(null);
+    const { persona } = member;
+    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", sx: {
+            width: NODE_WIDTH,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 1,
+            cursor: 'default',
+            pointerEvents: 'all',
+        }, "data-team-member": member.id, "data-member-state": persona.state, children: [_jsx(Handle, { type: "target", position: Position.Left, style: HANDLE(size), isConnectable: false }), _jsx(Box, { sx: { width: size, height: size, position: 'relative' }, children: persona.away ? (_jsxs(Button, { size: "small", sx: { position: 'absolute', top: size / 2 - 16, left: -24 }, onClick: () => member.onAway?.(false), children: ["Call ", member.name, " back"] })) : (_jsx(AssistantStage, { character: member.character, state: persona.state, size: size, 
+                    // In the node, not over the page; the balloon opens toward the
+                    // middle of the graph: rightward from the left member.
+                    place: side === 'left'
+                        ? { position: 'absolute', left: 'auto' }
+                        : { position: 'absolute', right: 'auto' }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: member.onToggle ?? (() => undefined), 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 })] }));
+});
+/** The words on the edge for a flow. */
+export function flowWords(flow, entry, peer) {
+    return flow === 'asking'
+        ? `${entry} asks ${peer}`
+        : flow === 'answering'
+            ? `${peer} answers ${entry}`
+            : '';
+}
+const ARROW = 9;
+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.
+    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`;
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { id: id, path: path, style: {
+                    stroke: data?.connected
+                        ? 'var(--borderColor-accent-emphasis, #0969da)'
+                        : 'var(--borderColor-muted, #d0d7de)',
+                    strokeWidth: 2,
+                    strokeDasharray: data?.connected ? undefined : '6 6',
+                    opacity: flow === 'still' ? 0.6 : 0.25,
+                } }), flow !== 'still' && (_jsxs("g", { "data-a2a-edge-flow": flow, children: [_jsx("path", { d: path, fill: "none", className: `a2a-team-flow a2a-team-flow-${flow}`, stroke: "var(--fgColor-accent, #0969da)", strokeWidth: 3, strokeLinecap: "round", strokeDasharray: "10 14" }), _jsx("path", { d: arrow, fill: "var(--fgColor-accent, #0969da)" })] })), _jsx(EdgeLabelRenderer, { children: _jsx(Box, { className: "nodrag nopan", sx: {
+                        position: 'absolute',
+                        transform: `translate(-50%, 12px) translate(${(sourceX + targetX) / 2}px, ${(sourceY + targetY) / 2}px)`,
+                        pointerEvents: 'none',
+                        textAlign: 'center',
+                    }, children: _jsx(Label, { variant: data?.connected ? 'accent' : 'secondary', children: data?.label }) }) })] }));
+});
+const NODE_TYPES = { member: MemberNode };
+const EDGE_TYPES = { a2a: LinkEdge };
+/** 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, }) {
+    const box = useRef(null);
+    const [width, setWidth] = useState(0);
+    useEffect(() => {
+        const element = box.current;
+        if (!element) {
+            return undefined;
+        }
+        const measure = () => setWidth(element.clientWidth);
+        measure();
+        if (typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    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 nodes = useMemo(() => [
+        {
+            id: entry.id,
+            type: 'member',
+            position: { x: 0, y: BALLOON_ROOM },
+            width: NODE_WIDTH,
+            height: memberHeight,
+            draggable: false,
+            selectable: false,
+            // Above the edge and its label: a balloon overflows its node.
+            zIndex: 10,
+            data: { member: entry, side: 'left', size },
+        },
+        {
+            id: peer.id,
+            type: 'member',
+            position: { x: NODE_WIDTH + GAP, y: BALLOON_ROOM },
+            width: NODE_WIDTH,
+            height: memberHeight,
+            draggable: false,
+            selectable: false,
+            zIndex: 10,
+            data: { member: peer, side: 'right', size },
+        },
+    ], [entry, peer, size, memberHeight]);
+    const words = flowWords(flow, entry.name, peer.name);
+    const edges = useMemo(() => [
+        {
+            id: `${entry.id}->${peer.id}`,
+            source: entry.id,
+            target: peer.id,
+            type: 'a2a',
+            selectable: false,
+            focusable: false,
+            data: {
+                flow,
+                connected,
+                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: {
+            width: '100%',
+            height,
+            position: 'relative',
+            '@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',
+            },
+            // The arrow and the words say which way; the movement is extra.
+            '@media (prefers-reduced-motion: reduce)': {
+                '& .a2a-team-flow': { 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,
+                    height: 1,
+                    overflow: 'hidden',
+                    clip: 'rect(0 0 0 0)',
+                    whiteSpace: 'nowrap',
+                }, children: words }), _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` })] }));
+}
+export default A2ATeamGraph;

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

@@ -0,0 +1,33 @@
+/**
+ * Which way a team's A2A link carries a message, read from what happens to
+ * a request (`A2APeerEvent`).
+ *
+ * The member that is asked is the peer; the one that asks is the entry (the
+ * team's `entry`, who talks to the person). While a request is out — asked,
+ * then worked on — the link carries it from the entry to the peer:
+ * `asking`. When the peer answers, the answer comes back the other way for a
+ * moment: `answering`. Otherwise, and when a request fails, it is `still`.
+ *
+ * Pure, so that a test reads it and a page drives it the same way.
+ *
+ * @module components/teams/a2aTeamFlow
+ */
+import type { A2APeerEvent } from '../../runtimes/browser/a2aPeer';
+/** Which way the link carries a message, if it carries one. */
+export type A2ATeamFlow = 'still' | 'asking' | 'answering';
+/** How long an answer is shown travelling back, in milliseconds. */
+export declare const ANSWER_SHOWN_MS = 1800;
+/**
+ * The flow after an event: where the link goes now, and for how long it
+ * stays that way before it is `still` again (`holdMs`, only for an answer:
+ * the request's flow lasts as long as the request).
+ */
+export declare function flowAfter(event: A2APeerEvent): {
+    flow: A2ATeamFlow;
+    holdMs?: number;
+};
+/** The member a message leaves, and the one it reaches, for a flow. */
+export declare function flowEnds(flow: A2ATeamFlow, entry: string, peer: string): {
+    from: string;
+    to: string;
+} | undefined;

package/lib/components/teams/a2aTeamFlow.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** How long an answer is shown travelling back, in milliseconds. */
+export const ANSWER_SHOWN_MS = 1800;
+/**
+ * The flow after an event: where the link goes now, and for how long it
+ * stays that way before it is `still` again (`holdMs`, only for an answer:
+ * the request's flow lasts as long as the request).
+ */
+export function flowAfter(event) {
+    switch (event.phase) {
+        case 'asked':
+        case 'working':
+            return { flow: 'asking' };
+        case 'answered':
+            return { flow: 'answering', holdMs: ANSWER_SHOWN_MS };
+        default:
+            return { flow: 'still' };
+    }
+}
+/** The member a message leaves, and the one it reaches, for a flow. */
+export function flowEnds(flow, entry, peer) {
+    if (flow === 'asking') {
+        return { from: entry, to: peer };
+    }
+    if (flow === 'answering') {
+        return { from: peer, to: entry };
+    }
+    return undefined;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * A team of applications over A2A, drawn and run in a page.
+ *
+ * Not re-exported by `components/index.ts`: it brings React Flow, which a
+ * page that shows no team should not load. Import it from here.
+ *
+ * @module components/teams
+ */
+export * from './a2aTeamFlow';
+export * from './useA2ATeam';
+export * from './A2ATeamGraph';

package/lib/components/teams/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A team of applications over A2A, drawn and run in a page.
+ *
+ * Not re-exported by `components/index.ts`: it brings React Flow, which a
+ * page that shows no team should not load. Import it from here.
+ *
+ * @module components/teams
+ */
+export * from './a2aTeamFlow';
+export * from './useA2ATeam';
+export * from './A2ATeamGraph';

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

@@ -0,0 +1,57 @@
+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';
+/** What one member's character does: its state, its balloon, and whether it was sent away. */
+export type A2ATeamPersona = {
+    state: AssistantState;
+    /** What its balloon says. */
+    saying?: string;
+    /** Whether the balloon shows without the pointer over it. */
+    insist: boolean;
+    away: boolean;
+};
+export declare const AT_REST: A2ATeamPersona;
+/** One turn of the conversation with the entry. */
+export type A2ATeamTurn = {
+    role: 'user' | 'assistant';
+    text: string;
+};
+/** A line short enough for a balloon. */
+export declare function balloonLine(text: string, length?: number): string;
+export type UseA2ATeamOptions = {
+    /** The member that talks to the person and asks: it runs in this page. */
+    entry: AppSpec;
+    /** The member it asks over A2A. */
+    peerApp: AppSpec;
+    /** The peer, once its card is read; `null` until then. */
+    peer: A2APeer | null;
+    /** Where the entry's model is asked, and with whose token. */
+    inference: Omit<BrowserModelOptions, 'model'>;
+    /** The name of the entry's tool, as its instructions call it: `ask_<peer id>`. */
+    askTool?: string;
+    /** The most steps of one turn. */
+    maxSteps?: number;
+};
+export type A2ATeam = {
+    entryPersona: A2ATeamPersona;
+    peerPersona: A2ATeamPersona;
+    setEntryAway: (away: boolean) => void;
+    setPeerAway: (away: boolean) => void;
+    turns: A2ATeamTurn[];
+    /** The exchange between the two, a line a step. */
+    exchange: string[];
+    /** The peer's last answer, as it gave it. */
+    report: string | null;
+    /** Which way the link carries a message now. */
+    flow: A2ATeamFlow;
+    /** Whether a turn is under way. */
+    busy: boolean;
+    /** Whether the entry can be asked: its peer is connected. */
+    ready: boolean;
+    send: (text: string) => Promise<void>;
+    stop: () => void;
+};
+/** Run a team of two over A2A in the page. */
+export declare function useA2ATeam(options: UseA2ATeamOptions): A2ATeam;

package/lib/components/teams/useA2ATeam.js

@@ -0,0 +1,233 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A team of two applications over A2A, as a page runs it: the entry's loop
+ * turns in the page and asks its peer over A2A with one tool.
+ *
+ * The entry (Sales) talks to the person: its instructions and its model run
+ * here (the Vercel AI SDK's loop), its model reached through ai-inference
+ * with whatever `inference` holds — a signed-in person's token, or a
+ * visitor's trial key. Its one tool asks the peer (Accounting) with
+ * {@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}).
+ *
+ * What `A2ATeamGraph` draws, and what a page's composer sends.
+ *
+ * @module components/teams/useA2ATeam
+ */
+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';
+export const AT_REST = {
+    state: 'idle',
+    insist: false,
+    away: false,
+};
+/** A line short enough for a balloon. */
+export function balloonLine(text, length = 120) {
+    const flat = text.replace(/\s+/g, ' ').trim();
+    return flat.length > length ? `${flat.slice(0, length - 1)}…` : flat;
+}
+/** Run a team of two over A2A in the page. */
+export function useA2ATeam(options) {
+    const { entry, peerApp, peer, inference, maxSteps = 6 } = options;
+    const askTool = options.askTool ?? `ask_${peerApp.id.replace(/-/g, '_')}`;
+    const [entryPersona, setEntryPersona] = useState(() => ({
+        ...AT_REST,
+        state: 'greeting',
+        saying: balloonLine(entry.interface.welcome ?? ''),
+        insist: Boolean(entry.interface.welcome),
+    }));
+    const [peerPersona, setPeerPersona] = useState(AT_REST);
+    const [turns, setTurns] = useState([]);
+    const [report, setReport] = useState(null);
+    const [exchange, setExchange] = useState([]);
+    const [flow, setFlow] = useState('still');
+    const [busy, setBusy] = useState(false);
+    const history = useRef([]);
+    const abort = useRef(null);
+    const flowTimer = useRef(undefined);
+    // What the peer does, as it does it: its own state and balloon, and the link.
+    const onPeerEvent = useCallback((event) => {
+        const next = flowAfter(event);
+        clearTimeout(flowTimer.current);
+        setFlow(next.flow);
+        if (next.holdMs) {
+            flowTimer.current = setTimeout(() => setFlow('still'), next.holdMs);
+        }
+        if (event.phase === 'asked') {
+            setExchange(prev => [
+                ...prev,
+                `${entry.name} → ${peerApp.name}: ${event.request}`,
+            ]);
+            setPeerPersona(prev => ({
+                ...prev,
+                state: 'greeting',
+                saying: 'On it. Let me read the books.',
+                insist: true,
+            }));
+        }
+        else if (event.phase === 'working') {
+            if (event.note) {
+                setExchange(prev => [...prev, `${peerApp.name}: ${event.note}`]);
+            }
+            setPeerPersona(prev => ({
+                ...prev,
+                state: 'working',
+                saying: event.note ? balloonLine(event.note) : prev.saying,
+                insist: Boolean(event.note) || prev.insist,
+            }));
+        }
+        else if (event.phase === 'answered') {
+            setExchange(prev => [
+                ...prev,
+                `${peerApp.name} → ${entry.name}: the report`,
+            ]);
+            setReport(event.answer);
+            setPeerPersona(prev => ({
+                ...prev,
+                state: 'speaking',
+                saying: balloonLine(event.answer),
+                insist: true,
+            }));
+        }
+        else {
+            setExchange(prev => [
+                ...prev,
+                `${peerApp.name} could not answer: ${event.error}`,
+            ]);
+            setPeerPersona(prev => ({
+                ...prev,
+                state: 'idle',
+                saying: balloonLine(event.error),
+                insist: true,
+            }));
+        }
+    }, [entry.name, peerApp.name]);
+    const agent = useMemo(() => {
+        if (!peer) {
+            return null;
+        }
+        return new ToolLoopAgent({
+            id: entry.id,
+            model: createBrowserModel({
+                ...inference,
+                model: entry.model || undefined,
+            }),
+            instructions: entry.instructions,
+            tools: { [askTool]: a2aPeerTool({ peer, onEvent: onPeerEvent }) },
+            stopWhen: stepCountIs(maxSteps),
+        });
+    }, [peer, inference, onPeerEvent, entry, askTool, maxSteps]);
+    const send = useCallback(async (text) => {
+        const asked = text.trim();
+        if (!asked || !agent || busy) {
+            return;
+        }
+        setBusy(true);
+        setReport(null);
+        setExchange([]);
+        setTurns(prev => [...prev, { role: 'user', text: asked }]);
+        setEntryPersona({
+            ...AT_REST,
+            state: 'thinking',
+            saying: 'Let me see…',
+            insist: true,
+        });
+        setPeerPersona(AT_REST);
+        history.current = [...history.current, { role: 'user', content: asked }];
+        abort.current = new AbortController();
+        let said = '';
+        try {
+            const result = await agent.stream({
+                messages: history.current,
+                abortSignal: abort.current.signal,
+            });
+            for await (const part of result.fullStream) {
+                if (part.type === 'tool-call' && part.toolName === askTool) {
+                    const request = String(part.input?.request ?? '');
+                    setEntryPersona(prev => ({
+                        ...prev,
+                        state: 'waiting',
+                        saying: balloonLine(`${peerApp.name}, could you: ${request}`),
+                        insist: true,
+                    }));
+                }
+                else if (part.type === 'tool-result' && part.toolName === askTool) {
+                    setEntryPersona(prev => ({
+                        ...prev,
+                        state: 'thinking',
+                        saying: 'Thanks!',
+                    }));
+                }
+                else if (part.type === 'text-delta') {
+                    said += part.text;
+                    setEntryPersona(prev => ({
+                        ...prev,
+                        state: 'speaking',
+                        saying: balloonLine(said),
+                        insist: true,
+                    }));
+                }
+                else if (part.type === 'error') {
+                    throw part.error;
+                }
+            }
+            history.current = [
+                ...history.current,
+                { role: 'assistant', content: said },
+            ];
+            setTurns(prev => [...prev, { role: 'assistant', text: said }]);
+            setEntryPersona(prev => ({
+                ...prev,
+                state: 'idle',
+                saying: balloonLine(said),
+            }));
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            setTurns(prev => [
+                ...prev,
+                { role: 'assistant', text: `Something went wrong: ${message}` },
+            ]);
+            setEntryPersona(prev => ({
+                ...prev,
+                state: 'idle',
+                saying: balloonLine(`Something went wrong: ${message}`),
+                insist: true,
+            }));
+            setFlow('still');
+        }
+        finally {
+            abort.current = null;
+            setBusy(false);
+        }
+    }, [agent, busy, askTool, peerApp.name]);
+    const stop = useCallback(() => abort.current?.abort(), []);
+    useEffect(() => () => {
+        abort.current?.abort();
+        clearTimeout(flowTimer.current);
+    }, []);
+    const setEntryAway = useCallback((away) => setEntryPersona(prev => ({ ...prev, away })), []);
+    const setPeerAway = useCallback((away) => setPeerPersona(prev => ({ ...prev, away })), []);
+    return {
+        entryPersona,
+        peerPersona,
+        setEntryAway,
+        setPeerAway,
+        turns,
+        exchange,
+        report,
+        flow,
+        busy,
+        ready: agent !== null,
+        send,
+        stop,
+    };
+}

package/lib/examples/AgentA2ATeamExample.d.ts

@@ -8,9 +8,12 @@
  * `odoo-accounting` toolset, and only reads them.
  *
  * Both are on screen as Office Assistant characters, Sales the paper clip and
- * Accounting the wizard, as their Appspecs say. The exchange is shown as it
- * happens: Sales asks, Accounting works and then answers, each in its own
- * state and balloon. Then the report appears.
+ * 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
+ * page runs too.
  *
  * Where Accounting is: `VITE_A2A_ACCOUNTING_URL`, else the examples' local
  * server (`…:8765/api/v1/a2a/agents/accounting`), which answers this machine