@datalayer/agent-runtimes 1.3.85 → 1.3.87

package/lib/components/teams/useA2ATeam.js

@@ -3,28 +3,34 @@
  * 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.
+ * A team of applications over A2A, as a page runs it: the entry's loop
+ * turns in the page and asks each of its peers over A2A with a tool of its
+ * own.
  *
  * 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 — the peer's last
- * answer as the report, and the way
- * the link carries a message as the flow ({@link flowAfter}). What the peer
- * gives besides words — the formats the page accepts (`accept`), such as a
- * Jupyter notebook — is kept as its artifacts, and its latest notebook kept
- * until another one comes ({@link A2ATeam.notebook}). 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}).
+ * visitor's trial key. Its tools ask its peers (Accounting; Disaster
+ * assessment and Change detection), one `ask_<peer>` tool per peer, with
+ * {@link a2aPeerTool}. A team of two names its peer as `peerApp`; a team of
+ * N names them as `peers` (LOOP A-08). An entry that runs on a runtime
+ * itself (a scene of one member: Month-end close, Crop monitoring) is asked
+ * over A2A from the page, with no agent in the browser: `entryPeer`.
+ *
+ * What each of them does is kept as a persona — the state its character
+ * acts and what its balloon says — each peer's last answer as the report,
+ * and the way each link carries a message as its flow ({@link flowAfter}).
+ * What a peer gives besides words — the formats the page accepts
+ * (`accept`), such as a Jupyter notebook — is kept as its artifacts, and
+ * the latest notebook kept until another one comes ({@link A2ATeam.notebook}).
+ * The tools a peer calls on its connections (its MCP servers), told over
+ * A2A as it calls them, are kept as the calls running now ({@link callsAfter}).
  *
  * Given the Agent Inspector's tracer (`inspector`), the entry's turns (an
- * `invoke_agent` span: its model, its tokens) and its call to the peer (an
- * `execute_tool` span under it) are recorded there as OpenTelemetry spans;
- * the A2A traffic itself, under that call, is recorded by the peer's fetch
- * (`traceA2AFetch`).
+ * `invoke_agent` span: its model, its tokens) and its calls to its peers
+ * (`execute_tool` spans under it) are recorded there as OpenTelemetry
+ * spans; the A2A traffic itself, under those calls, is recorded by each
+ * peer's fetch (`traceA2AFetch`).
  *
  * What `A2ATeamGraph` draws, and what a page's composer sends.
  *
@@ -33,11 +39,12 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { stepCountIs, ToolLoopAgent } from 'ai';
 import { createBrowserModel, } from '../../runtimes/browser/model';
-import { a2aPeerTool, NOTEBOOK_MEDIA_TYPE, } from '../../runtimes/browser/a2aPeer';
+import { a2aPeerTool, askA2APeer, NOTEBOOK_MEDIA_TYPE, } from '../../runtimes/browser/a2aPeer';
 import { endAgentTurn, endToolCall, startAgentTurn, startToolCall, } from '../inspector/agentSpans';
 import { callsAfter, flowAfter, toolOwnName, pruneCalls, } from './a2aTeamFlow';
 import { toolLineOfStep, } from '../../chat/assistant/toolLine';
 const NO_CONNECTIONS = [];
+const NO_PEERS = [];
 export const AT_REST = {
     state: 'idle',
     insist: false,
@@ -66,14 +73,84 @@ 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. */
+/** The name of the entry's tool for a peer, as its instructions call it: `ask_<peer id>`. */
+export function askToolOf(peerId) {
+    return `ask_${peerId.replace(/-/g, '_')}`;
+}
+/**
+ * What a member says when it is asked, before it works: the books when it
+ * reaches Odoo, the system it reaches otherwise, or just that it is on it.
+ */
+export function askedLine(connections) {
+    if (connections.some(connection => connection.id.startsWith('odoo'))) {
+        return 'On it. Let me read the books.';
+    }
+    const systems = [...new Set(connections.map(connection => connection.label))];
+    return systems.length
+        ? `On it. Let me look in ${systems.join(' and ')}.`
+        : 'On it.';
+}
+/**
+ * The entry's instructions for a team of more than one peer: its own, and
+ * which tool asks whom, so that it names each. A team of two keeps the
+ * entry's instructions as they are.
+ */
+export function teamInstructions(entry, peers) {
+    if (peers.length < 2) {
+        return entry.instructions;
+    }
+    const who = peers
+        .map(peer => `${peer.app.name} with \`${peer.askTool}\``)
+        .join(', ');
+    return `${entry.instructions}\n\nYour team, over A2A: ask ${who}. Each answers one request on its own.`;
+}
+/** A persona at rest, or greeting with a line when it has one. */
+function restingPersona(greeting) {
+    return greeting
+        ? {
+            ...AT_REST,
+            state: 'greeting',
+            saying: balloonLine(greeting),
+            full: greeting,
+            insist: true,
+        }
+        : AT_REST;
+}
+/** Run a team over A2A in the page. */
 export function useA2ATeam(options) {
-    const { entry, peerApp, peer, inference, maxSteps = 6, peerConnections = NO_CONNECTIONS, inspector = null, } = options;
+    const { entry, peerApp, peer = null, peerConnections = NO_CONNECTIONS, peers: given = NO_PEERS, entryPeer = null, inference, maxSteps = 6, inspector = null, } = options;
     // By what it names, so that a page passing a new array of the same media
     // types does not make the agent again.
     const acceptKey = options.accept?.join('\n');
     const accept = useMemo(() => (acceptKey ? acceptKey.split('\n') : undefined), [acceptKey]);
-    const askTool = options.askTool ?? `ask_${peerApp.id.replace(/-/g, '_')}`;
+    const askTool = options.askTool ?? (peerApp ? askToolOf(peerApp.id) : '');
+    // The peers, resolved: the one of a team of two, then those of a team of N.
+    const peerList = useMemo(() => [
+        ...(peerApp
+            ? [
+                {
+                    id: peerApp.id,
+                    app: peerApp,
+                    peer,
+                    askTool,
+                    connections: peerConnections,
+                },
+            ]
+            : []),
+        ...given.map(one => ({
+            id: one.app.id,
+            app: one.app,
+            peer: one.peer,
+            askTool: one.askTool ?? askToolOf(one.app.id),
+            connections: one.connections ?? NO_CONNECTIONS,
+            ...(one.greeting ? { greeting: one.greeting } : {}),
+        })),
+    ], [peerApp, peer, askTool, peerConnections, given]);
+    // Read by the event handlers, so that they need not be made again when
+    // a peer connects.
+    const peersNow = useRef(peerList);
+    peersNow.current = peerList;
+    const peerOf = useCallback((id) => peersNow.current.find(one => one.id === id), []);
     const [entryPersona, setEntryPersona] = useState(() => ({
         ...AT_REST,
         state: 'greeting',
@@ -81,11 +158,28 @@ export function useA2ATeam(options) {
         full: entry.interface.welcome ?? '',
         insist: Boolean(entry.interface.welcome),
     }));
-    const [peerPersona, setPeerPersona] = useState(AT_REST);
+    const [personas, setPersonas] = useState(() => Object.fromEntries(peerList.map(one => [one.id, restingPersona(one.greeting)])));
+    const personaOf = useCallback((id) => personas[id] ?? restingPersona(peerOf(id)?.greeting), [personas, peerOf]);
+    /** Change a member's persona: the entry's, or a peer's by id. */
+    const setPersona = useCallback((id, next) => {
+        if (id === entry.id) {
+            setEntryPersona(next);
+        }
+        else {
+            setPersonas(prev => ({
+                ...prev,
+                [id]: next(prev[id] ?? restingPersona(peerOf(id)?.greeting)),
+            }));
+        }
+    }, [entry.id, peerOf]);
     const [turns, setTurns] = useState([]);
-    const [peerHistory, setPeerHistory] = useState([]);
+    const [histories, setHistories] = useState({});
     const told = useRef(0);
-    const tell = useCallback((role, text) => {
+    const tell = useCallback((id, role, text) => {
+        if (id === entry.id) {
+            // The entry's history is its turns.
+            return;
+        }
         told.current += 1;
         const message = {
             id: `peer-${told.current}`,
@@ -93,62 +187,82 @@ export function useA2ATeam(options) {
             content: text,
             createdAt: new Date(),
         };
-        setPeerHistory(prev => [...prev, message]);
-    }, []);
-    // A tool the peer calls, as the chat holds one: added when it starts,
+        setHistories(prev => ({ ...prev, [id]: [...(prev[id] ?? []), message] }));
+    }, [entry.id]);
+    // A tool a peer calls, as the chat holds one: added when it starts,
     // updated when it ends.
-    const toolCalled = useCallback((step) => {
-        const id = step.id ?? step.name;
+    const toolCalled = useCallback((id, step) => {
+        if (id === entry.id) {
+            return;
+        }
+        const connections = peerOf(id)?.connections ?? NO_CONNECTIONS;
+        const callId = step.id ?? step.name;
         const call = {
-            id: `peer-tool:${id}`,
+            id: `peer-tool:${callId}`,
             type: 'tool-call',
-            toolCallId: id,
-            toolName: toolOwnName(step.name, peerConnections),
+            toolCallId: callId,
+            toolName: toolOwnName(step.name, connections),
             args: {},
             status: step.error ? 'error' : step.ended ? 'complete' : 'executing',
             ...(step.error ? { error: step.error } : {}),
         };
-        setPeerHistory(prev => prev.some(item => item.id === call.id)
-            ? prev.map(item => (item.id === call.id ? call : item))
-            : [...prev, call]);
-    }, [peerConnections]);
+        setHistories(prev => {
+            const history = prev[id] ?? [];
+            return {
+                ...prev,
+                [id]: history.some(item => item.id === call.id)
+                    ? history.map(item => (item.id === call.id ? call : item))
+                    : [...history, call],
+            };
+        });
+    }, [entry.id, peerOf]);
     const [report, setReport] = useState(null);
+    const [reports, setReports] = useState({});
     const [artifacts, setArtifacts] = useState([]);
+    const [givens, setGivens] = useState({});
     const [notebook, setNotebook] = useState(null);
-    const [flow, setFlow] = useState('still');
+    const [flows, setFlows] = useState({});
     const [calls, setCalls] = useState([]);
     const callsNow = useRef([]);
     const callTimer = useRef(undefined);
     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);
-        }
-        // 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);
+    const flowTimers = useRef(new Map());
+    // What a member does, as it does it: its own state and balloon, and its
+    // link. A peer's when the entry asks it; the entry's own when the entry
+    // is asked over A2A.
+    const onMemberEvent = useCallback((id, event) => {
+        const connections = id === entry.id
+            ? NO_CONNECTIONS
+            : (peerOf(id)?.connections ?? NO_CONNECTIONS);
+        if (id !== entry.id) {
+            const next = flowAfter(event);
+            clearTimeout(flowTimers.current.get(id));
+            setFlows(prev => ({ ...prev, [id]: next.flow }));
+            if (next.holdMs) {
+                flowTimers.current.set(id, setTimeout(() => setFlows(prev => ({ ...prev, [id]: 'still' })), next.holdMs));
+            }
+            // The calls to its connections: a call's end, when it came
+            // quickly, is shown a moment longer. Another peer's calls are its own.
+            const others = callsNow.current.filter(call => call.member !== id);
+            const after = callsAfter(callsNow.current.filter(call => call.member === id), event, id, connections, Date.now());
+            callsNow.current = [...others, ...after.calls];
+            setCalls(callsNow.current);
+            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') {
-            tell('user', event.request);
-            setPeerPersona(prev => ({
+            tell(id, 'user', event.request);
+            setPersona(id, prev => ({
                 ...prev,
                 state: 'greeting',
-                saying: 'On it. Let me read the books.',
+                saying: askedLine(connections),
                 full: undefined,
                 insist: true,
                 tool: undefined,
@@ -156,9 +270,9 @@ export function useA2ATeam(options) {
         }
         else if (event.phase === 'working') {
             if (event.tool) {
-                toolCalled(event.tool);
+                toolCalled(id, event.tool);
             }
-            setPeerPersona(prev => ({
+            setPersona(id, prev => ({
                 ...prev,
                 state: 'working',
                 saying: event.note ? balloonLine(event.note) : prev.saying,
@@ -167,19 +281,21 @@ export function useA2ATeam(options) {
                 // The tool it calls, in plain words, from the step it told; a
                 // step without a tool (its own words) puts the tool line away.
                 tool: event.tool
-                    ? toolLineOfStep(event.tool, toolOwnName(event.tool.name, peerConnections))
+                    ? toolLineOfStep(event.tool, toolOwnName(event.tool.name, connections))
                     : undefined,
             }));
         }
         else if (event.phase === 'answered') {
-            tell('assistant', event.answer);
+            tell(id, 'assistant', event.answer);
             setReport(event.answer);
+            setReports(prev => ({ ...prev, [id]: event.answer }));
             setArtifacts(event.artifacts);
+            setGivens(prev => ({ ...prev, [id]: event.artifacts }));
             const given = notebookAmong(event.artifacts);
             if (given) {
                 setNotebook(given);
             }
-            setPeerPersona(prev => ({
+            setPersona(id, prev => ({
                 ...prev,
                 state: 'speaking',
                 saying: balloonLine(event.answer),
@@ -188,13 +304,13 @@ export function useA2ATeam(options) {
                 tool: undefined,
             }));
             // The entry was given a notebook: in its balloon, read-only.
-            if (given) {
+            if (given && id !== entry.id) {
                 setEntryPersona(prev => ({ ...prev, notebook: given }));
             }
         }
         else {
-            tell('assistant', `Could not answer: ${event.error}`);
-            setPeerPersona(prev => ({
+            tell(id, 'assistant', `Could not answer: ${event.error}`);
+            setPersona(id, prev => ({
                 ...prev,
                 state: 'idle',
                 saying: balloonLine(event.error),
@@ -203,27 +319,81 @@ export function useA2ATeam(options) {
                 tool: undefined,
             }));
         }
-    }, [peerApp.id, peerConnections, tell, toolCalled]);
+    }, [entry.id, peerOf, setPersona, tell, toolCalled]);
+    // The peers' ids and whether each is reached: the agent is made again
+    // when one connects, not when a peer's state changes.
     const agent = useMemo(() => {
-        if (!peer) {
+        if (entryPeer || !peerList.length || peerList.some(one => !one.peer)) {
             return null;
         }
+        const tools = {};
+        for (const one of peerList) {
+            tools[one.askTool] = a2aPeerTool({
+                peer: one.peer,
+                onEvent: event => onMemberEvent(one.id, event),
+                accept,
+            });
+        }
         return new ToolLoopAgent({
             id: entry.id,
             model: createBrowserModel({
                 ...inference,
                 model: entry.model || undefined,
             }),
-            instructions: entry.instructions,
-            tools: {
-                [askTool]: a2aPeerTool({ peer, onEvent: onPeerEvent, accept }),
-            },
+            instructions: teamInstructions(entry, peerList),
+            tools,
             stopWhen: stepCountIs(maxSteps),
         });
-    }, [peer, inference, onPeerEvent, entry, askTool, maxSteps, accept]);
+    }, [entryPeer, peerList, inference, onMemberEvent, entry, maxSteps, accept]);
+    /** Every peer at rest again, its greeting gone. */
+    const peersAtRest = useCallback(() => {
+        setPersonas(Object.fromEntries(peersNow.current.map(one => [one.id, AT_REST])));
+    }, []);
+    // The entry on a runtime: asked over A2A from the page, as the person.
+    const sendOverA2A = useCallback(async (asked, to) => {
+        setBusy(true);
+        setReport(null);
+        setArtifacts([]);
+        setTurns(prev => [...prev, { role: 'user', text: asked }]);
+        abort.current = new AbortController();
+        try {
+            const { answer } = await askA2APeer(to, asked, {
+                signal: abort.current.signal,
+                onEvent: event => onMemberEvent(entry.id, event),
+                accept,
+            });
+            setTurns(prev => [...prev, { role: 'assistant', text: answer }]);
+            setEntryPersona(prev => ({ ...prev, state: 'idle' }));
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            setTurns(prev => [
+                ...prev,
+                { role: 'assistant', text: `Could not answer: ${message}` },
+            ]);
+            setEntryPersona(prev => ({
+                ...prev,
+                state: 'idle',
+                saying: balloonLine(message),
+                full: message,
+                insist: true,
+                tool: undefined,
+            }));
+        }
+        finally {
+            abort.current = null;
+            setBusy(false);
+        }
+    }, [entry.id, onMemberEvent, accept]);
     const send = useCallback(async (text) => {
         const asked = text.trim();
-        if (!asked || !agent || busy) {
+        if (!asked || busy) {
+            return;
+        }
+        if (entryPeer) {
+            return sendOverA2A(asked, entryPeer);
+        }
+        if (!agent) {
             return;
         }
         setBusy(true);
@@ -236,12 +406,12 @@ export function useA2ATeam(options) {
             saying: 'Let me see…',
             insist: true,
         });
-        setPeerPersona(AT_REST);
+        peersAtRest();
         history.current = [...history.current, { role: 'user', content: asked }];
         abort.current = new AbortController();
         let said = '';
         // The turn, as a span: the entry's model, from the question to the
-        // answer, and its tokens; its calls to the peer under it.
+        // answer, and its tokens; its calls to the peers under it.
         const turnSpan = inspector
             ? startAgentTurn(inspector, {
                 agent: entry.name,
@@ -250,19 +420,26 @@ export function useA2ATeam(options) {
             })
             : undefined;
         const toolSpans = new Map();
+        // The peer a tool asks, by the tool's name.
+        const askedPeer = (toolName) => peersNow.current.find(one => one.askTool === toolName);
         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 to = part.type === 'tool-call' ||
+                    part.type === 'tool-result' ||
+                    part.type === 'tool-error'
+                    ? askedPeer(part.toolName)
+                    : undefined;
+                if (part.type === 'tool-call' && to) {
                     const request = String(part.input?.request ?? '');
                     // Its tool runs here, in the page, and asks the peer over A2A.
                     if (inspector && turnSpan) {
                         toolSpans.set(part.toolCallId, startToolCall(inspector, {
                             agent: entry.name,
-                            name: askTool,
+                            name: to.askTool,
                             id: part.toolCallId,
                             args: part.input,
                             tool: { kind: 'frontend' },
@@ -272,20 +449,20 @@ export function useA2ATeam(options) {
                     setEntryPersona(prev => ({
                         ...prev,
                         state: 'waiting',
-                        saying: balloonLine(`${peerApp.name}, could you: ${request}`),
-                        full: `${peerApp.name}, could you: ${request}`,
+                        saying: balloonLine(`${to.app.name}, could you: ${request}`),
+                        full: `${to.app.name}, could you: ${request}`,
                         insist: true,
-                        // Its one tool, in its own words: it asks its peer.
+                        // Its tool, in its own words: it asks its peer.
                         tool: {
                             id: part.toolCallId,
-                            tool: askTool,
-                            name: askTool,
+                            tool: to.askTool,
+                            name: to.askTool,
                             phase: 'running',
-                            words: `Asking ${peerApp.name}…`,
+                            words: `Asking ${to.app.name}…`,
                         },
                     }));
                 }
-                else if (part.type === 'tool-result' && part.toolName === askTool) {
+                else if (part.type === 'tool-result' && to) {
                     const output = part.output;
                     const toolSpan = toolSpans.get(part.toolCallId);
                     if (toolSpan) {
@@ -302,9 +479,9 @@ export function useA2ATeam(options) {
                         full: undefined,
                         tool: undefined,
                     }));
-                    // Accounting has handed its answer over: back at rest, its last
+                    // The peer has handed its answer over: back at rest, its last
                     // words still in its balloon.
-                    setPeerPersona(prev => ({ ...prev, state: 'idle' }));
+                    setPersona(to.id, prev => ({ ...prev, state: 'idle' }));
                 }
                 else if (part.type === 'text-delta') {
                     said += part.text;
@@ -317,7 +494,7 @@ export function useA2ATeam(options) {
                         tool: undefined,
                     }));
                 }
-                else if (part.type === 'tool-error' && part.toolName === askTool) {
+                else if (part.type === 'tool-error' && to) {
                     const toolSpan = toolSpans.get(part.toolCallId);
                     if (toolSpan) {
                         toolSpans.delete(part.toolCallId);
@@ -373,48 +550,83 @@ export function useA2ATeam(options) {
                 insist: true,
                 tool: undefined,
             }));
-            setFlow('still');
+            setFlows({});
             callsNow.current = [];
             setCalls([]);
         }
         finally {
             abort.current = null;
             setBusy(false);
-            // However the turn ended, neither member is still at work.
-            setPeerPersona(prev => prev.state === 'idle' && !prev.tool
-                ? prev
-                : { ...prev, state: 'idle', tool: undefined });
+            // However the turn ended, no member is still at work.
+            setPersonas(prev => Object.fromEntries(Object.entries(prev).map(([id, one]) => [
+                id,
+                one.state === 'idle' && !one.tool
+                    ? one
+                    : { ...one, state: 'idle', tool: undefined },
+            ])));
         }
-    }, [agent, busy, askTool, peerApp.name, entry, inspector]);
+    }, [
+        agent,
+        busy,
+        entry,
+        inspector,
+        entryPeer,
+        sendOverA2A,
+        setPersona,
+        peersAtRest,
+    ]);
     const stop = useCallback(() => abort.current?.abort(), []);
     useEffect(() => () => {
         abort.current?.abort();
-        clearTimeout(flowTimer.current);
+        flowTimers.current.forEach(timer => clearTimeout(timer));
         clearTimeout(callTimer.current);
     }, []);
     const setEntryAway = useCallback((away) => setEntryPersona(prev => ({ ...prev, away })), []);
-    const setPeerAway = useCallback((away) => setPeerPersona(prev => ({ ...prev, away })), []);
+    const setAwayOf = useCallback((id, away) => setPersona(id, prev => ({ ...prev, away })), [setPersona]);
+    const setPeerAway = useCallback((away) => {
+        const first = peersNow.current[0];
+        if (first) {
+            setAwayOf(first.id, away);
+        }
+    }, [setAwayOf]);
     const entryHistory = useMemo(() => turns.map((turn, index) => ({
         id: `turn-${index}`,
         role: turn.role,
         content: turn.text,
         createdAt: new Date(0),
     })), [turns]);
+    const NONE = useMemo(() => [], []);
+    const teamPeers = useMemo(() => peerList.map(one => ({
+        id: one.id,
+        app: one.app,
+        askTool: one.askTool,
+        connections: one.connections,
+        connected: one.peer !== null,
+        persona: personaOf(one.id),
+        history: histories[one.id] ?? NONE,
+        report: reports[one.id] ?? null,
+        artifacts: givens[one.id] ?? [],
+        flow: flows[one.id] ?? 'still',
+        setAway: (away) => setAwayOf(one.id, away),
+    })), [peerList, personaOf, histories, reports, givens, flows, setAwayOf, NONE]);
+    const first = teamPeers[0];
     return {
         entryHistory,
-        peerHistory,
+        peerHistory: first?.history ?? NONE,
         entryPersona,
-        peerPersona,
+        peerPersona: first?.persona ?? AT_REST,
         setEntryAway,
         setPeerAway,
         turns,
+        peers: teamPeers,
+        flows,
         report,
         artifacts,
         notebook,
-        flow,
+        flow: first?.flow ?? 'still',
         calls,
         busy,
-        ready: agent !== null,
+        ready: entryPeer ? true : agent !== null,
         send,
         stop,
     };

package/lib/examples/ScenesExample.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The scenes of the catalogue (agentspecs `scenes`, LOOP A-15), in tabs:
+ * each scene's face and name, its `assumes` line under them, its graph and
+ * its transcript behind *Graph · Transcript* (`SceneView`), its members
+ * standing where its stage directions put them (`positions`), the entry's
+ * balloon open first (`opens_first`), and the script's cues as the entry's
+ * suggestions. A scene is tried here before it is deployed anywhere.
+ *
+ * Played against the local servers (`npm run examples`): the entry in the
+ * browser asks its model through the examples' inference — a signed-in
+ * person's token or a visitor's trial key — and the members on a runtime
+ * are served over A2A by `examples/sales-accounting-a2a/serve_scenes.py`,
+ * Accounting on :8767 as before and each other member on a runtime of its
+ * own from :8768 (`sceneRuntimePorts`), or wherever `VITE_A2A_<MEMBER>_URL`
+ * says. A scene whose entry runs on a runtime itself (Month-end close, Crop
+ * monitoring) is asked over A2A from the page, as the person
+ * (`useA2ATeam`'s `entryPeer`). A member that is not reached is drawn all
+ * the same, and the box says what its application needs (`setup`) and how
+ * to serve it, rather than failing.
+ *
+ * Right-click a member for its menu: *Inspect the agent…* opens its Agent
+ * Inspector over the page, on the one tracer every member records into.
+ */
+import type { JSX } from 'react';
+export declare function ScenesExample(): JSX.Element;
+export default ScenesExample;