@datalayer/agent-runtimes 1.3.64 → 1.3.66

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

@@ -0,0 +1,58 @@
+/**
+ * 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.
+ *
+ * The 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 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.
+ *
+ * @module components/teams/A2ATeamGraph
+ */
+import type { JSX } from 'react';
+import { type Viewport } from '@xyflow/react';
+import '@xyflow/react/dist/base.css';
+import type { A2ATeamFlow } from './a2aTeamFlow';
+import type { A2ATeamPersona } from './useA2ATeam';
+/** One member of the team, as the graph draws it. */
+export type A2ATeamGraphMember = {
+    id: string;
+    name: string;
+    emoji?: string;
+    /** Its character, as its Appspec's `interface.assistant` names it. */
+    character: string;
+    /** Where it runs, in a few words: "in your browser", "on a runtime". */
+    where: string;
+    persona: A2ATeamPersona;
+    /** A click on the character. */
+    onToggle?: () => void;
+    /** It was sent away, or called back. */
+    onAway?: (away: boolean) => void;
+};
+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>`. */
+    label?: string;
+    /** The character's size, in pixels at full scale. */
+    size?: number;
+};
+/** The words on the edge for a flow. */
+export declare function flowWords(flow: A2ATeamFlow, entry: string, peer: 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 default A2ATeamGraph;

package/lib/components/teams/A2ATeamGraph.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, memo, useContext, 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,
+});
+/**
+ * The members as they are now, by id. Not in the nodes' data: a node whose
+ * object changes is taken by React Flow for a new one, measured again, and
+ * the edge is dropped until it is — the line vanished as the characters
+ * moved. The nodes stay the same objects; what they show is read from here.
+ */
+const Members = createContext({});
+const MemberNode = memo(function MemberNode({ data, }) {
+    const { id, side, size } = data;
+    const member = useContext(Members)[id];
+    const stageRef = useRef(null);
+    if (!member) {
+        return 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: { id: entry.id, 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: { id: peer.id, side: 'right', size },
+        },
+    ], [entry.id, peer.id, size, memberHeight]);
+    const members = useMemo(() => ({ [entry.id]: entry, [peer.id]: peer }), [entry, peer]);
+    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(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` }) })] }));
+}
+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

package/lib/examples/AgentA2ATeamExample.js

@@ -1,33 +1,21 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Flash, Heading, Label, Text, Textarea } from '@primer/react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Flash, Heading, Text, Textarea } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AnonymousKeyExpired } from '@datalayer/core/lib/components/anonymous/AnonymousKeyExpired';
 import { AnonymousKeyTimer } from '@datalayer/core/lib/components/anonymous/AnonymousKeyTimer';
-import { stepCountIs, ToolLoopAgent } from 'ai';
 import { Streamdown } from 'streamdown';
 import { ThemedProvider } from './utils/themedProvider';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { AssistantStage } from '../chat/assistant/AssistantStage';
 import { useBrowserInference } from '../hooks/useBrowserInference';
-import { createBrowserModel } from '../runtimes/browser/model';
 import { readJwtClaims, tokenLifetimeMs, useAnonymousSessionStore, } from '../runtimes/browser/anonymousToken';
-import { a2aPeerTool, connectA2APeer, } from '../runtimes/browser/a2aPeer';
+import { connectA2APeer } from '../runtimes/browser/a2aPeer';
+import { A2ATeamGraph, 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;
-/** The name Sales's tool goes by, as its instructions call it. */
-const ASK_TOOL = 'ask_accounting';
-const STAGE_SIZE = 104;
-const STAGE_HEIGHT = 300;
-const AT_REST = { state: 'idle', insist: false, away: false };
-/** A line short enough for a balloon. */
-function line(text, length = 120) {
-    const flat = text.replace(/\s+/g, ' ').trim();
-    return flat.length > length ? `${flat.slice(0, length - 1)}…` : flat;
-}
 /** The members of the team, as the team spec says them. */
 function members() {
     const sales = TEAM.agents.find(member => member.id === TEAM.entry);
@@ -38,25 +26,6 @@ function members() {
     }
     return { sales, accounting };
 }
-/** One persona at its desk, with its name and where it runs under it. */
-function Desk({ app, persona, where, left, onToggle, onAway, }) {
-    const stageRef = useRef(null);
-    const character = app.interface.assistant ?? 'paperclip';
-    return (_jsxs(Box, { sx: {
-            position: 'absolute',
-            left,
-            top: 0,
-            width: 220,
-            height: STAGE_HEIGHT,
-        }, "data-team-member": app.id, "data-member-state": persona.state, children: [persona.away ? (_jsxs(Button, { size: "small", sx: { position: 'absolute', top: STAGE_HEIGHT - 150 }, onClick: () => onAway(false), children: ["Call ", app.name, " back"] })) : (_jsx(AssistantStage, { character: character, state: persona.state, size: STAGE_SIZE, place: { position: 'absolute', left: 56, top: STAGE_HEIGHT - 170 }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: onToggle, balloon: persona.saying
-                    ? { text: persona.saying, more: persona.saying.endsWith('…') }
-                    : undefined, insist: persona.insist, onDismiss: away => onAway(away !== 'none') })), _jsxs(Box, { sx: {
-                    position: 'absolute',
-                    bottom: 0,
-                    width: '100%',
-                    textAlign: 'center',
-                }, children: [_jsxs(Text, { sx: { fontWeight: 600, display: 'block' }, children: [app.emoji, " ", app.name] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: where })] })] }));
-}
 function AgentA2ATeam() {
     const { sales: salesMember } = useMemo(members, []);
     const runtimeUrl = useExampleAgentRuntimesUrl();
@@ -76,21 +45,8 @@ function AgentA2ATeam() {
         accountingKeyClock.expiresAt <= Date.now());
     const [peer, setPeer] = useState(null);
     const [peerError, setPeerError] = useState(null);
-    const [sales, setSales] = useState({
-        ...AT_REST,
-        state: 'greeting',
-        saying: line(SALES.interface.welcome ?? ''),
-        insist: true,
-    });
-    const [accounting, setAccounting] = useState(AT_REST);
-    const [turns, setTurns] = useState([]);
-    const [report, setReport] = useState(null);
-    const [exchange, setExchange] = useState([]);
     const [draft, setDraft] = useState('');
-    const [busy, setBusy] = useState(false);
     const composer = useRef(null);
-    const history = useRef([]);
-    const abort = useRef(null);
     useEffect(() => {
         let current = true;
         setPeer(null);
@@ -103,148 +59,19 @@ function AgentA2ATeam() {
             current = false;
         };
     }, [accountingUrl, accountingKey]);
-    // What Accounting does, as it does it: its own state and balloon.
-    const onPeerEvent = useCallback((event) => {
-        if (event.phase === 'asked') {
-            setExchange(prev => [...prev, `Sales → Accounting: ${event.request}`]);
-            setAccounting(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, `Accounting: ${event.note}`]);
-            }
-            setAccounting(prev => ({
-                ...prev,
-                state: 'working',
-                saying: event.note ? line(event.note) : prev.saying,
-                insist: Boolean(event.note) || prev.insist,
-            }));
-        }
-        else if (event.phase === 'answered') {
-            setExchange(prev => [...prev, 'Accounting → Sales: the report']);
-            setReport(event.answer);
-            setAccounting(prev => ({
-                ...prev,
-                state: 'speaking',
-                saying: line(event.answer),
-                insist: true,
-            }));
-        }
-        else {
-            setExchange(prev => [
-                ...prev,
-                `Accounting could not answer: ${event.error}`,
-            ]);
-            setAccounting(prev => ({
-                ...prev,
-                state: 'idle',
-                saying: line(event.error),
-                insist: true,
-            }));
-        }
-    }, []);
-    const agent = useMemo(() => {
-        if (!peer) {
-            return null;
-        }
-        return new ToolLoopAgent({
-            id: SALES.id,
-            model: createBrowserModel({
-                ...inference,
-                model: SALES.model || undefined,
-            }),
-            instructions: SALES.instructions,
-            tools: { [ASK_TOOL]: a2aPeerTool({ peer, onEvent: onPeerEvent }) },
-            stopWhen: stepCountIs(6),
-        });
-    }, [peer, inference, onPeerEvent]);
-    const send = useCallback(async (text) => {
-        const asked = text.trim();
-        if (!asked || !agent || busy) {
-            return;
-        }
-        setBusy(true);
+    // Sales runs here and asks Accounting over A2A: the conversation, the
+    // exchange, the report and the way the link carries a message.
+    const team = useA2ATeam({
+        entry: SALES,
+        peerApp: ACCOUNTING,
+        peer,
+        inference,
+        askTool: 'ask_accounting',
+    });
+    const send = (text) => {
         setDraft('');
-        setReport(null);
-        setExchange([]);
-        setTurns(prev => [...prev, { role: 'user', text: asked }]);
-        setSales({
-            ...AT_REST,
-            state: 'thinking',
-            saying: 'Let me see…',
-            insist: true,
-        });
-        setAccounting(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 === ASK_TOOL) {
-                    const request = String(part.input?.request ?? '');
-                    setSales(prev => ({
-                        ...prev,
-                        state: 'waiting',
-                        saying: line(`Accounting, could you: ${request}`),
-                        insist: true,
-                    }));
-                }
-                else if (part.type === 'tool-result' &&
-                    part.toolName === ASK_TOOL) {
-                    setSales(prev => ({
-                        ...prev,
-                        state: 'thinking',
-                        saying: 'Thanks!',
-                    }));
-                }
-                else if (part.type === 'text-delta') {
-                    said += part.text;
-                    setSales(prev => ({
-                        ...prev,
-                        state: 'speaking',
-                        saying: line(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 }]);
-            setSales(prev => ({ ...prev, state: 'idle', saying: line(said) }));
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            setTurns(prev => [
-                ...prev,
-                { role: 'assistant', text: `Something went wrong: ${message}` },
-            ]);
-            setSales(prev => ({
-                ...prev,
-                state: 'idle',
-                saying: line(`Something went wrong: ${message}`),
-                insist: true,
-            }));
-        }
-        finally {
-            abort.current = null;
-            setBusy(false);
-        }
-    }, [agent, busy]);
-    useEffect(() => () => abort.current?.abort(), []);
+        void team.send(text);
+    };
     const accountingWhere = accountingKey
         ? `on a runtime, ${new URL(accountingUrl).host}, with a temporary key`
         : `on a runtime, ${new URL(accountingUrl).host}`;
@@ -252,43 +79,50 @@ function AgentA2ATeam() {
                 (accountingKeyClock && !accountingKeyEnded)) && (_jsxs(Box, { sx: { display: 'flex', gap: 4, flexWrap: 'wrap', mb: 3 }, children: [anonymous.status === 'active' && anonymous.expiresAt && (_jsx(AnonymousKeyTimer, { expiresAt: anonymous.expiresAt, grantedMs: anonymous.grantedMs, label: `${SALES.name}'s trial key`, onExpire: () => useAnonymousSessionStore.getState().expire() })), accountingKeyClock && !accountingKeyEnded && (_jsx(AnonymousKeyTimer, { expiresAt: accountingKeyClock.expiresAt, grantedMs: accountingKeyClock.grantedMs, label: `${ACCOUNTING.name}'s temporary key`, onExpire: () => setAccountingKeyEnded(true) }))] })), anonymous.status === 'expired' && (_jsx(Box, { sx: { mb: 3 }, children: _jsx(AnonymousKeyExpired, { agentName: SALES.name, 
                     // Sales runs in this page: what ended is its model's key, and
                     // signing in gives it the person's own.
-                    onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), accountingKeyEnded && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: [ACCOUNTING.name, "\u2019s temporary key has ended: it no longer answers. Make a new one with", ' ', _jsx("code", { children: "examples/sales-accounting-a2a/make_temp_key.py" }), " and reload."] })), needsSignIn && (_jsx(Flash, { variant: "warning", sx: { mb: 3 }, children: "Sales asks its model through the Datalayer inference service: sign in, or wait for a visitor's trial key." })), peerError && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: ["Accounting is not reachable at ", accountingUrl, ": ", peerError, " Serve it with", ' ', _jsx("code", { children: "python examples/sales-accounting-a2a/serve_accounting.py" }), ' ', "on the local server, or", ' ', _jsx("code", { children: "loop apps run accounting.yaml --cloud --a2a" }), " and set", ' ', _jsx("code", { children: "VITE_A2A_ACCOUNTING_URL" }), "."] })), _jsxs(Box, { sx: {
-                    position: 'relative',
-                    height: STAGE_HEIGHT,
+                    onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), accountingKeyEnded && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: [ACCOUNTING.name, "\u2019s temporary key has ended: it no longer answers. Make a new one with", ' ', _jsx("code", { children: "examples/sales-accounting-a2a/make_temp_key.py" }), " and reload."] })), needsSignIn && (_jsx(Flash, { variant: "warning", sx: { mb: 3 }, children: "Sales asks its model through the Datalayer inference service: sign in, or wait for a visitor's trial key." })), peerError && (_jsxs(Flash, { variant: "danger", sx: { mb: 3 }, children: ["Accounting is not reachable at ", accountingUrl, ": ", peerError, " Serve it with", ' ', _jsx("code", { children: "python examples/sales-accounting-a2a/serve_accounting.py" }), ' ', "on the local server, or", ' ', _jsx("code", { children: "loop apps run accounting.yaml --cloud --a2a" }), " and set", ' ', _jsx("code", { children: "VITE_A2A_ACCOUNTING_URL" }), "."] })), _jsx(Box, { sx: {
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
                     bg: 'canvas.subtle',
-                    overflow: 'visible',
+                    px: 2,
+                    pt: 2,
                     mb: 3,
-                }, children: [_jsx(Desk, { app: SALES, persona: sales, where: salesMember.runsIn === 'browser'
+                }, children: _jsx(A2ATeamGraph, { entry: {
+                        id: SALES.id,
+                        name: SALES.name,
+                        emoji: SALES.emoji,
+                        character: SALES.interface.assistant ?? 'paperclip',
+                        where: salesMember.runsIn === 'browser'
                             ? 'in your browser'
-                            : 'on a runtime', left: "8%", onToggle: () => composer.current?.focus(), onAway: away => setSales(prev => ({ ...prev, away })) }), _jsxs(Box, { sx: {
-                            position: 'absolute',
-                            left: '38%',
-                            right: '38%',
-                            top: STAGE_HEIGHT / 2,
-                            textAlign: 'center',
-                        }, children: [_jsx(Box, { sx: {
-                                    borderTop: '2px dashed',
-                                    borderColor: peer ? 'accent.emphasis' : 'border.muted',
-                                } }), _jsxs(Label, { variant: peer ? 'accent' : 'secondary', sx: { mt: 2 }, children: ["A2A ", peer ? `· ${peer.skill.name}` : '· not connected'] })] }), _jsx(Desk, { app: ACCOUNTING, persona: accounting, where: accountingWhere, left: "66%", onToggle: () => undefined, onAway: away => setAccounting(prev => ({ ...prev, away })) })] }), _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: !agent || busy, onClick: () => void 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 => {
+                            : 'on a runtime',
+                        persona: team.entryPersona,
+                        onToggle: () => composer.current?.focus(),
+                        onAway: team.setEntryAway,
+                    }, peer: {
+                        id: ACCOUNTING.id,
+                        name: ACCOUNTING.name,
+                        emoji: ACCOUNTING.emoji,
+                        character: ACCOUNTING.interface.assistant ?? 'wizard',
+                        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 => {
                                     if (event.key === 'Enter' && !event.shiftKey) {
                                         event.preventDefault();
-                                        void send(draft);
+                                        send(draft);
                                     }
-                                } }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { variant: "primary", disabled: !agent || busy || !draft.trim(), onClick: () => void send(draft), children: "Ask" }), busy && (_jsx(Button, { onClick: () => abort.current?.abort(), children: "Stop" }))] }), _jsx(Box, { sx: { mt: 3 }, "data-team-conversation": "", children: turns.map((turn, index) => (_jsxs(Box, { sx: {
+                                } }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { variant: "primary", disabled: !team.ready || team.busy || !draft.trim(), onClick: () => send(draft), children: "Ask" }), team.busy && _jsx(Button, { onClick: team.stop, children: "Stop" })] }), _jsx(Box, { sx: { mt: 3 }, "data-team-conversation": "", children: team.turns.map((turn, index) => (_jsxs(Box, { sx: {
                                         p: 2,
                                         mb: 2,
                                         borderRadius: 2,
                                         bg: turn.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
-                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: turn.role === 'user' ? 'You' : SALES.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsxs(Box, { sx: { flex: '1 1 360px', minWidth: 0 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "The exchange" }), _jsx(Box, { as: "ol", sx: { pl: 3, color: 'fg.muted', fontSize: 1 }, "data-team-exchange": "", children: exchange.length === 0 ? (_jsx(Text, { as: "li", children: "Nothing asked yet." })) : (exchange.map((step, index) => (_jsx(Text, { as: "li", children: step }, index)))) }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, mt: 3, mb: 2 }, children: "The report" }), _jsx(Box, { sx: {
+                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: turn.role === 'user' ? 'You' : SALES.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsxs(Box, { sx: { flex: '1 1 360px', minWidth: 0 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "The exchange" }), _jsx(Box, { as: "ol", sx: { pl: 3, color: 'fg.muted', fontSize: 1 }, "data-team-exchange": "", children: team.exchange.length === 0 ? (_jsx(Text, { as: "li", children: "Nothing asked yet." })) : (team.exchange.map((step, index) => (_jsx(Text, { as: "li", children: step }, index)))) }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, mt: 3, mb: 2 }, children: "The report" }), _jsx(Box, { sx: {
                                     p: 3,
                                     border: '1px solid',
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     minHeight: 120,
-                                }, "data-team-report": "", children: report ? (_jsx(Streamdown, { children: report })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "The report Accounting returns appears here, as it returned it." })) })] })] })] }));
+                                }, "data-team-report": "", children: team.report ? (_jsx(Streamdown, { children: team.report })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "The report Accounting returns appears here, as it returned it." })) })] })] })] }));
 }
 export function AgentA2ATeamExample() {
     return (_jsx(ThemedProvider, { children: _jsx(AgentA2ATeam, {}) }));

package/package.json

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