@datalayer/agent-runtimes 1.3.61 → 1.3.62

package/lib/examples/AgentA2ATeamExample.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A team of two applications over A2A (agentspecs `sales-and-accounting`).
+ *
+ * Sales runs here, in the browser: its instructions and model turn in the
+ * page (the Vercel AI SDK's loop, the in-browser harness), and its one tool
+ * asks Accounting over A2A with `@a2a-js/sdk` 1.x. Accounting runs on a
+ * runtime, served with fasta2a: its agent reads the Odoo books through the
+ * `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.
+ *
+ * Where Accounting is: `VITE_A2A_ACCOUNTING_URL`, else the examples' local
+ * server (`…:8765/api/v1/a2a/agents/accounting`), which answers this machine
+ * without a key. A cloud runtime needs a key granted to its route:
+ * `VITE_A2A_ACCOUNTING_KEY`, which `examples/sales-accounting-a2a/make_temp_key.py`
+ * writes to `.env.local`, never committed.
+ */
+import type { JSX } from 'react';
+export declare function AgentA2ATeamExample(): JSX.Element;
+export default AgentA2ATeamExample;

package/lib/examples/AgentA2ATeamExample.js

@@ -0,0 +1,279 @@
+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 { Box } from '@datalayer/primer-addons';
+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 { a2aPeerTool, connectA2APeer, } from '../runtimes/browser/a2aPeer';
+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);
+    const asked = sales?.talksTo?.find(link => link.over === 'a2a');
+    const accounting = TEAM.agents.find(member => member.id === asked?.member);
+    if (!sales || !accounting) {
+        throw new Error(`The team ${TEAM.id} does not say who a person talks to and whom it asks over A2A.`);
+    }
+    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();
+    const accountingUrl = import.meta.env.VITE_A2A_ACCOUNTING_URL ||
+        `${runtimeUrl}/api/v1/a2a/agents/${ACCOUNTING.id}`;
+    const accountingKey = import.meta.env.VITE_A2A_ACCOUNTING_KEY || undefined;
+    const { inference, needsSignIn } = useBrowserInference(true);
+    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);
+        setPeerError(null);
+        connectA2APeer({ url: accountingUrl, key: accountingKey })
+            .then(found => current && setPeer(found))
+            .catch(error => current &&
+            setPeerError(error instanceof Error ? error.message : String(error)));
+        return () => {
+            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);
+        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(), []);
+    const accountingWhere = accountingKey
+        ? `on a runtime, ${new URL(accountingUrl).host}, with a temporary key`
+        : `on a runtime, ${new URL(accountingUrl).host}`;
+    return (_jsxs(Box, { sx: { p: 4, maxWidth: 1080, mx: 'auto' }, children: [_jsxs(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: [TEAM.emoji, " ", TEAM.name] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, children: TEAM.description }), 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,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.subtle',
+                    overflow: 'visible',
+                    mb: 3,
+                }, children: [_jsx(Desk, { app: SALES, persona: sales, 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 => {
+                                    if (event.key === 'Enter' && !event.shiftKey) {
+                                        event.preventDefault();
+                                        void 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: {
+                                        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: {
+                                    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." })) })] })] })] }));
+}
+export function AgentA2ATeamExample() {
+    return (_jsx(ThemedProvider, { children: _jsx(AgentA2ATeam, {}) }));
+}
+export default AgentA2ATeamExample;

package/lib/examples/ChatAssistantExample.js

@@ -69,7 +69,7 @@ const ChatAssistantExample = () => {
         ? assistantCharacterNamed(reactor, character)
         : character;
     const [loadError, setLoadError] = useState();
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: { minHeight: '100vh', bg: 'canvas.default', p: 4 }, children: [_jsxs(Box, { sx: { maxWidth: 720, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Floating assistant" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "The chat as a character on the page. It greets you, acts out what the agent is doing, and says the agent\u2019s words in a balloon while the conversation is closed. Click it to talk, drag it to move it, hover it to send it away." }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: CATALOGUE.map(option => (_jsx(Button, { variant: option.id === character ? 'primary' : 'default', onClick: () => {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: { minHeight: '100vh', bg: 'canvas.default', p: 4 }, children: [_jsxs(Box, { sx: { maxWidth: 720, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Chat Assistant" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "The chat as a character on the page. It greets you, acts out what the agent is doing, and says the agent\u2019s words in a balloon while the conversation is closed. Click it to talk, drag it to move it, hover it to send it away." }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: CATALOGUE.map(option => (_jsx(Button, { variant: option.id === character ? 'primary' : 'default', onClick: () => {
                                     setCharacter(option.id);
                                     setLoadError(undefined);
                                 }, "aria-pressed": option.id === character, "data-assistant-character": option.id, children: option.name }, option.id))) }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "A character you bring" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["The characters of Microsoft Office \u2014 Clippy, Merlin, Links and the others \u2014 are Microsoft\u2019s. Load only a character file you have the right to use: a Microsoft Agent ", _jsx("code", { children: ".acs" }), " file, or a clippy.js character\u2019s ", _jsx("code", { children: "agent.js" }), " and map image. It is read in this page and sent nowhere."] }), _jsx("input", { type: "file", multiple: true, accept: ".acs,.js,.png,.gif,.webp,.jpg,.jpeg", "aria-label": "Character files", onChange: async (event) => {

package/lib/examples/ChatAssistantGalleryExample.js

@@ -142,7 +142,7 @@ const ChatAssistantGalleryExample = () => {
                 bg: 'canvas.default',
                 color: 'fg.default',
                 p: 4,
-            }, children: _jsxs(Box, { sx: { maxWidth: 1200, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Floating assistant gallery" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["Every character in every state the floating assistant acts, with its balloon, in light and dark. Datalayer\u2019s four and the owl are what the enabled plugins contribute to", ' ', _jsx("code", { children: "loop.assistant.character" }), "; Pixel is a test sprite of our own, read through the clippy.js reader. No agent is behind it: the words are a sample conversation."] }), _jsxs(Box, { as: "section", "aria-label": "Gallery controls", sx: {
+            }, children: _jsxs(Box, { sx: { maxWidth: 1200, mx: 'auto' }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Chat Assistant gallery" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["Every character in every state the floating assistant acts, with its balloon, in light and dark. Datalayer\u2019s four and the owl are what the enabled plugins contribute to", ' ', _jsx("code", { children: "loop.assistant.character" }), "; Pixel is a test sprite of our own, read through the clippy.js reader. No agent is behind it: the words are a sample conversation."] }), _jsxs(Box, { as: "section", "aria-label": "Gallery controls", sx: {
                             display: 'grid',
                             gap: 3,
                             mb: 4,

package/lib/examples/LoopStrategyExample.d.ts

@@ -0,0 +1,12 @@
+import { ServiceManager } from '@jupyterlab/services';
+interface LoopStrategyExampleInnerProps {
+    serviceManager?: ServiceManager.IManager;
+}
+export declare function LoopStrategyExampleInner({ serviceManager, }: LoopStrategyExampleInnerProps): import("react").JSX.Element;
+/**
+ * Main example component with Jupyter provider wrapper.
+ */
+export declare function LoopStrategyExample({ serviceManager, }: {
+    serviceManager?: ServiceManager.IManager;
+}): import("react").JSX.Element;
+export default LoopStrategyExample;

package/lib/examples/{AgentStrategyExample.js → LoopStrategyExample.js}

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * AgentStrategyExample - Define and launch an agent reasoning *strategy*.
+ * LoopStrategyExample - Define and launch an agent reasoning *strategy*.
  *
  * This example demonstrates the control-loop paradigm (observe → think → act →
  * evaluate) instead of one-shot prompting. It is fully driven by the generic
@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 1. Start the agent-runtimes server.
  * 2. Select this example from the header dropdown (Agent group).
  *
- * @module examples/AgentStrategyExample
+ * @module examples/LoopStrategyExample
  */
 import { useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
@@ -131,7 +131,7 @@ function StrategySummary({ strategy }) {
                         fontWeight: 'bold',
                     }, children: [index + 1, ". ", phase] }, phase))) }), strategy.objective && (_jsxs(Box, { sx: { color: 'fg.muted' }, children: [_jsx("strong", { children: "Objective:" }), " ", strategy.objective] })), strategy.termination && (_jsxs(Box, { sx: { color: 'fg.muted', mt: 1 }, children: [_jsx("strong", { children: "Max iterations:" }), " ", strategy.termination.maxIterations, ' ', "\u00B7 ", _jsx("strong", { children: "On blocked:" }), " ", strategy.termination.onBlocked] }))] }));
 }
-export function AgentStrategyExampleInner({ serviceManager, }) {
+export function LoopStrategyExampleInner({ serviceManager, }) {
     // All available strategies come from the generated strategy catalogue.
     const strategies = useMemo(() => listStrategies(), []);
     const [selectedStrategyId, setSelectedStrategyId] = useState(DEFAULT_STRATEGY);
@@ -141,9 +141,9 @@ export function AgentStrategyExampleInner({ serviceManager, }) {
     // where the strategy turns, and the hook decides that.
     const tools = useNotebookTools(NOTEBOOK_ID);
     const { agentReady, protocol: protocolConfig, chatFrontendTools, error, unavailableReason, createAttempted, } = useExampleJupyterAgent({
-        exampleId: 'AgentStrategyExample',
+        exampleId: 'LoopStrategyExample',
         agentName: DEFAULT_AGENT_ID,
-        description: `Strategy agent (${selectedStrategy.name}) for AgentStrategyExample`,
+        description: `Strategy agent (${selectedStrategy.name}) for LoopStrategyExample`,
         systemPrompt,
         serviceManager,
         frontendTools: tools,
@@ -204,7 +204,7 @@ export function AgentStrategyExampleInner({ serviceManager, }) {
                                         justifyContent: 'space-between',
                                         gap: 3,
                                         flexWrap: 'wrap',
-                                    }, children: [_jsxs(Box, { children: [_jsxs("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: [selectedStrategy.emoji, " Agent Strategy Example"] }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Define and launch an agent reasoning strategy \u2014 observe, think, act, evaluate \u2014 over a live notebook." })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, title: isStrategySelectorDisabled
+                                    }, children: [_jsxs(Box, { children: [_jsxs("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: [selectedStrategy.emoji, " Loop Strategy Example"] }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Define and launch an agent reasoning strategy \u2014 observe, think, act, evaluate \u2014 over a live notebook." })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, title: isStrategySelectorDisabled
                                                 ? 'Strategy selector is temporarily disabled while launching the agent'
                                                 : 'Choose a strategy', children: [_jsx(Box, { as: "label", sx: { fontSize: 1, fontWeight: 'bold' }, children: "Strategy" }), _jsx(Box, { as: "select", value: selectedStrategyId, onChange: (e) => setSelectedStrategyId(e.target.value), disabled: isStrategySelectorDisabled, "aria-label": "Strategy specification", sx: {
                                                         px: 2,
@@ -250,7 +250,7 @@ export function AgentStrategyExampleInner({ serviceManager, }) {
 /**
  * Main example component with Jupyter provider wrapper.
  */
-export function AgentStrategyExample({ serviceManager, }) {
-    return (_jsx(ThemedProvider, { children: _jsx(AgentStrategyExampleInner, { serviceManager: serviceManager }) }));
+export function LoopStrategyExample({ serviceManager, }) {
+    return (_jsx(ThemedProvider, { children: _jsx(LoopStrategyExampleInner, { serviceManager: serviceManager }) }));
 }
-export default AgentStrategyExample;
+export default LoopStrategyExample;

package/lib/examples/example-selector.js

@@ -113,7 +113,7 @@ export const EXAMPLE_ENTRIES = [
     // `owns-sandbox-control`: the shell is pinned to the browser sandbox, so
     // the page's selector would offer three targets it cannot move to.
     ['example', 'loop', 'shell', 'prompt', 'editors', 'owns-sandbox-control']),
-    makeEntry('AgentStrategyExample', () => import('./AgentStrategyExample'), 'Define and launch an agent reasoning strategy (a control loop: observe/think/act/evaluate) over a live notebook, driven by generic strategy specs.', ['example', 'agent', 'strategy', 'notebook', 'agentspecs']),
+    makeEntry('LoopStrategyExample', () => import('./LoopStrategyExample'), 'Define and launch an agent reasoning strategy (a control loop: observe/think/act/evaluate) over a live notebook, driven by generic strategy specs.', ['example', 'agent', 'strategy', 'notebook', 'agentspecs']),
     makeEntry('AgentToolApprovalsExample', () => import('./AgentToolApprovalsExample'), 'Tool approval workflows and manual decisions.'),
     makeEntry('AgentMemoryExample', () => import('./AgentMemoryExample'), 'Memory-aware conversation and retrieval example.'),
     makeEntry('AgentSkillsExample', () => import('./AgentSkillsExample'), 'Skills discovery, execution, and monitoring example.'),
@@ -123,6 +123,7 @@ export const EXAMPLE_ENTRIES = [
     makeEntry('AgentMonitoringExample', () => import('./AgentMonitoringExample'), 'Runtime monitoring and live metrics example.'),
     makeEntry('AgentSubagentsExample', () => import('./AgentSubagentsExample'), 'Multi-agent delegation with the in-repo subagents capability.'),
     makeEntry('AgentA2AExample', () => import('./AgentA2AExample'), 'Delegation to separate agents over the A2A protocol, launched locally or on Datalayer runtimes.'),
+    makeEntry('AgentA2ATeamExample', () => import('./AgentA2ATeamExample'), 'Two applications as a team over A2A: Sales in the browser (@a2a-js/sdk) asks Accounting on a runtime (fasta2a, Odoo read only), each an Office Assistant character.'),
     makeEntry('AgentNotificationsExample', () => import('./AgentNotificationsExample'), 'Notifications and event routing example.'),
     makeEntry('AgentOutputsExample', () => import('./AgentOutputsExample'), 'Structured outputs and rendering patterns.'),
     makeEntry('AgentParametersExample', () => import('./AgentParametersExample'), 'Launch-time parameterized agent creation with JSON schema.'),

package/lib/examples/index.d.ts

@@ -26,11 +26,12 @@ export { default as AgentCompactionExample } from './AgentCompactionExample';
 export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentCodeSandboxesExample } from './AgentCodeSandboxesExample';
 export { default as AgentDecideExample } from './AgentDecideExample';
+export { default as AgentA2ATeamExample } from './AgentA2ATeamExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';
 export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
 export { default as AgentHooksExample } from './AgentHooksExample';
 export { default as AgentInferenceProviderExample } from './AgentInferenceProviderExample';
-export { default as AgentStrategyExample } from './AgentStrategyExample';
+export { default as LoopStrategyExample } from './LoopStrategyExample';
 export { default as AgentToolApprovalsExample } from './AgentToolApprovalsExample';
 export { default as AgentMemoryExample } from './AgentMemoryExample';
 export { default as AgentOtelExample } from './AgentOtelExample';

package/lib/examples/index.js

@@ -32,11 +32,12 @@ export { default as AgentCompactionExample } from './AgentCompactionExample';
 export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentCodeSandboxesExample } from './AgentCodeSandboxesExample';
 export { default as AgentDecideExample } from './AgentDecideExample';
+export { default as AgentA2ATeamExample } from './AgentA2ATeamExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';
 export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
 export { default as AgentHooksExample } from './AgentHooksExample';
 export { default as AgentInferenceProviderExample } from './AgentInferenceProviderExample';
-export { default as AgentStrategyExample } from './AgentStrategyExample';
+export { default as LoopStrategyExample } from './LoopStrategyExample';
 export { default as AgentToolApprovalsExample } from './AgentToolApprovalsExample';
 export { default as AgentMemoryExample } from './AgentMemoryExample';
 export { default as AgentOtelExample } from './AgentOtelExample';

package/lib/examples/main.js

@@ -51,10 +51,10 @@ const EXAMPLE_GROUP_ORDER = [
     'A2UI',
     'A2A',
     'AG-UI',
-    'Capabilities',
     'Chat',
     'Document',
     'Notebook',
+    'Capabilities',
     'Cell',
     'CopilotKit',
 ];
@@ -91,7 +91,7 @@ const ANONYMOUS_EXAMPLES = new Set([
 ]);
 const getExampleGroup = (id) => {
     if (id === 'AgentspecsExample' ||
-        id === 'AgentStrategyExample' ||
+        id === 'LoopStrategyExample' ||
         id === 'LoopWorkspaceExample' ||
         id === 'LoopShellExample' ||
         id === 'DecksAgent') {
@@ -1078,7 +1078,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                     const LOOP_ORDER = [
                         'LoopShellExample',
                         'LoopWorkspaceExample',
-                        'AgentStrategyExample',
+                        'LoopStrategyExample',
                         'AgentspecsExample',
                     ];
                     const loopOrder = (id) => {

package/lib/hooks/useA2A.d.ts

@@ -1,4 +1,40 @@
-import type { AgentCard, Task } from '@a2a-js/sdk';
+/**
+ * The A2A objects this hook reads, as the JSON it receives (the 0.3 wire it
+ * was written against). Not the SDK's types: `@a2a-js/sdk` 1.x types are the
+ * 1.0 protobuf shapes, which `runtimes/browser/a2aPeer` uses with the SDK's
+ * own client.
+ */
+export interface A2AWireTextPart {
+    kind: 'text';
+    text: string;
+}
+export type A2AWirePart = A2AWireTextPart | {
+    kind: string;
+    text?: string;
+};
+export interface A2AWireTask {
+    id: string;
+    contextId: string;
+    status: {
+        state: string;
+        message?: {
+            parts?: A2AWirePart[];
+        };
+    };
+    artifacts?: {
+        parts?: A2AWirePart[];
+    }[];
+}
+export interface A2AWireAgentCard {
+    name: string;
+    description?: string;
+    capabilities?: {
+        streaming?: boolean;
+    };
+    [key: string]: unknown;
+}
+type AgentCard = A2AWireAgentCard;
+type Task = A2AWireTask;
 export interface Message {
     role: 'user' | 'assistant' | 'system';
     content: string;

package/lib/runtimes/__tests__/fixtures/accounting-agent-card.json

@@ -0,0 +1,60 @@
+{
+  "name": "Accounting",
+  "description": "Answers requests for financial reports, such as open invoices, aged balances, a trial balance or a customer's ledger, from the Odoo books, which it only reads.",
+  "version": "0.0.1",
+  "supportedInterfaces": [
+    {
+      "protocolBinding": "JSONRPC",
+      "url": "http://runtime.test/api/v1/a2a/agents/accounting/",
+      "protocolVersion": "1.0"
+    }
+  ],
+  "skills": [
+    {
+      "id": "accounting",
+      "name": "Accounting",
+      "description": "Answers requests for financial reports, such as open invoices, aged balances, a trial balance or a customer's ledger, from the Odoo books, which it only reads.",
+      "tags": ["example", "accounting", "finance", "odoo", "a2a", "team"],
+      "inputModes": ["text/plain"],
+      "outputModes": ["text/plain"],
+      "examples": [
+        "List the customer invoices that are still open, with the total due.",
+        "Give the aged receivables as of today, by customer.",
+        "Give the trial balance for last month."
+      ]
+    }
+  ],
+  "defaultInputModes": ["application/json"],
+  "defaultOutputModes": ["application/json"],
+  "capabilities": {
+    "streaming": true,
+    "pushNotifications": false,
+    "extensions": [
+      {
+        "uri": "https://datalayer.ai/extensions/orchestration/v1",
+        "description": "Pause at a checkpoint and resume from it; steer a task while it works.",
+        "required": false,
+        "params": {
+          "pause": "/api/v1/a2a/pause",
+          "steer": "/api/v1/a2a/steer"
+        }
+      }
+    ]
+  },
+  "securitySchemes": {
+    "datalayer": {
+      "httpAuthSecurityScheme": {
+        "scheme": "Bearer",
+        "bearerFormat": "JWT",
+        "description": "A Datalayer key granted to this route: a token exchanged from a task grant whose task is this application's route on this runtime. The machine itself needs none."
+      }
+    }
+  },
+  "securityRequirements": [
+    {
+      "schemes": {
+        "datalayer": []
+      }
+    }
+  ]
+}