@datalayer/agent-runtimes 1.3.61 → 1.3.63

package/lib/chat/assistant/AssistantStage.js

@@ -275,6 +275,11 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
             '&[data-assistant-state="goodbye"] .assistant-body': {
                 animation: 'assistantLeave 0.6s ease-in forwards',
             },
+            // A sprite plays its own goodbye, and leaves as the drawn ones do:
+            // a character whose file has no goodbye would otherwise stay.
+            '&[data-assistant-state="goodbye"] .assistant-sprite': {
+                animation: 'assistantLeave 0.6s ease-in forwards',
+            },
             // One still frame per state for a reader who asks for no motion.
             '@media (prefers-reduced-motion: reduce)': {
                 '& *': { animation: 'none !important' },

package/lib/chat/assistant/SpriteCharacter.js

@@ -51,7 +51,7 @@ export function SpriteCharacter({ character, state, size, }) {
     }, [animation, frame, play, character, state, still]);
     const { width, height } = character.frameSize;
     const scale = size / Math.max(width, height);
-    return (_jsx("span", { role: "img", "aria-label": character.name, "data-sprite-animation": play.name, style: {
+    return (_jsx("span", { className: "assistant-sprite", role: "img", "aria-label": character.name, "data-sprite-animation": play.name, style: {
             position: 'relative',
             display: 'block',
             width: size,

package/lib/chat/assistant/characters.js

@@ -40,7 +40,6 @@ const WIZARD = {
         brim: '#4A3C9E',
         robe: '#5B4BB7',
         face: '#F2D3B3',
-        faceEdge: '#A0694A',
         beard: '#F4F4F6',
         beardEdge: '#7A808A',
         star: '#F8D469',
@@ -51,7 +50,6 @@ const WIZARD = {
         brim: '#7B67DB',
         robe: '#8F7CE8',
         face: '#E8C4A0',
-        faceEdge: '#E8C4A0',
         beard: '#E4E4EA',
         beardEdge: loopColors.grayDark,
         star: '#F8D469',
@@ -100,7 +98,7 @@ function PaperClip({ size, mode = 'light', }) {
 /** A wizard: a starred hat, a white beard, kind eyes. */
 function Wizard({ size, mode = 'light', }) {
     const c = WIZARD[mode];
-    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "Wizard", "data-assistant-mode": mode, children: _jsxs("g", { className: "assistant-body", children: [_jsx("path", { d: "M24 92 Q48 58 72 92 Z", fill: c.robe }), _jsx("circle", { cx: 48, cy: 48, r: 17, fill: c.face, stroke: c.faceEdge, strokeWidth: 1.5 }), _jsx("path", { d: "M31 50 Q48 92 65 50 Q57 60 48 60 Q39 60 31 50 Z", fill: c.beard, stroke: c.beardEdge, strokeWidth: 1.2 }), _jsx("path", { d: "M22 36 L48 2 L74 36 Q48 30 22 36 Z", fill: c.hat }), _jsx("path", { d: "M20 37 Q48 29 76 37 Q48 43 20 37 Z", fill: c.brim }), _jsx("path", { d: "M52 14 l2 4 4 1 -3 3 1 4 -4 -2 -4 2 1 -4 -3 -3 4 -1 Z", fill: c.star }), _jsx("circle", { cx: 40, cy: 26, r: 1.8, fill: c.star }), _jsx(Eyes, { cx: 48, cy: 46, gap: 13, r: 5, colours: c.eye }), _jsx("path", { className: "assistant-mouth", d: "M44 58 Q48 61 52 58", stroke: INK, strokeWidth: 2, fill: "none", strokeLinecap: "round" })] }) }));
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "Wizard", "data-assistant-mode": mode, children: _jsxs("g", { className: "assistant-body", children: [_jsx("path", { d: "M34 58 Q48 52 62 58 Q70 74 76 92 Q48 98 20 92 Q26 74 34 58 Z", fill: c.robe }), _jsx("path", { d: "M21 90 Q48 96 75 90 L76 92 Q48 98 20 92 Z", fill: c.brim }), _jsx("circle", { cx: 30, cy: 82, r: 1.6, fill: c.star }), _jsx("circle", { cx: 67, cy: 78, r: 1.3, fill: c.star }), _jsx("ellipse", { cx: 48, cy: 46, rx: 13, ry: 12, fill: c.face }), _jsx("path", { d: "M33 38 Q31 66 40 77 Q48 89 56 77 Q65 66 63 38 Q61 50 56 53 Q48 58 40 53 Q35 50 33 38 Z", fill: c.beard, stroke: c.beardEdge, strokeWidth: 1, strokeLinejoin: "round" }), _jsx("path", { className: "assistant-mouth", d: "M44 59 Q48 62 52 59", stroke: INK, strokeWidth: 1.8, fill: "none", strokeLinecap: "round" }), _jsx("path", { d: "M39 55 Q44 51 48 54 Q52 51 57 55 Q52 57 48 56 Q44 57 39 55 Z", fill: c.beard, stroke: c.beardEdge, strokeWidth: 0.8 }), _jsx("path", { d: "M25 36 Q35 26 39 14 Q43 2 58 3 Q50 8 53 18 Q58 30 71 36 Q48 30 25 36 Z", fill: c.hat }), _jsx("path", { d: "M18 37 Q48 27 78 37 Q48 45 18 37 Z", fill: c.brim }), _jsx("path", { d: "M47 17 l1.8 3.6 4 .6 -2.9 2.8 .7 4 -3.6 -1.9 -3.6 1.9 .7 -4 -2.9 -2.8 4 -.6 Z", fill: c.star }), _jsx("circle", { cx: 56, cy: 28, r: 1.4, fill: c.star }), _jsx(Eyes, { cx: 48, cy: 46, gap: 11, r: 4, colours: c.eye })] }) }));
 }
 /** A cat: round, two ears, whiskers, a tail. */
 function Cat({ size, mode = 'light', }) {
@@ -146,7 +144,6 @@ export const ASSISTANT_CHARACTERS = [
                     WIZARD.light.hat,
                     WIZARD.light.brim,
                     WIZARD.light.robe,
-                    WIZARD.light.faceEdge,
                     WIZARD.light.beardEdge,
                 ],
                 eye: eyeOf(WIZARD.light.eye, WIZARD.light.face),
@@ -156,7 +153,6 @@ export const ASSISTANT_CHARACTERS = [
                     WIZARD.dark.hat,
                     WIZARD.dark.brim,
                     WIZARD.dark.robe,
-                    WIZARD.dark.faceEdge,
                     WIZARD.dark.beardEdge,
                 ],
                 eye: eyeOf(WIZARD.dark.eye, WIZARD.dark.face),

package/lib/config/AgentConfiguration.js

@@ -193,12 +193,6 @@ const AGENT_LIBRARIES = [
         description: 'LangChain agent implementations and tools',
         disabled: true,
     },
-    {
-        value: 'google-adk',
-        label: 'Google ADK',
-        description: 'Google’s Agent Development Kit',
-        disabled: true,
-    },
 ];
 const TRANSPORTS = [
     {

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,296 @@
+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 { 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 { 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, anonymous } = useBrowserInference(true);
+    // The temporary key's own clock, read out of it: when it ends and how long
+    // it was signed for, as core's countdown draws them.
+    const accountingKeyClock = useMemo(() => {
+        const exp = accountingKey ? readJwtClaims(accountingKey)?.exp : undefined;
+        return accountingKey && exp
+            ? { expiresAt: exp * 1000, grantedMs: tokenLifetimeMs(accountingKey) }
+            : undefined;
+    }, [accountingKey]);
+    const [accountingKeyEnded, setAccountingKeyEnded] = useState(() => accountingKeyClock !== undefined &&
+        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);
+        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 }), ((anonymous.status === 'active' && anonymous.expiresAt) ||
+                (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,
+                    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.d.ts

@@ -5,7 +5,9 @@
  *
  * The characters offered are what the enabled plugins contribute to
  * `loop.assistant.character` (T-24): Datalayer's four, and an owl from a
- * small example plugin (`utils/owlCharacterPlugin`).
+ * small example plugin (`utils/owlCharacterPlugin`). Pixel, the test sprite,
+ * is read through the clippy.js reader, as a character a person brings is,
+ * and so are the characters clippy.js publishes, fetched when picked.
  */
 import React from 'react';
 declare const ChatAssistantExample: React.FC;

package/lib/examples/ChatAssistantExample.js

@@ -10,9 +10,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * The characters offered are what the enabled plugins contribute to
  * `loop.assistant.character` (T-24): Datalayer's four, and an owl from a
- * small example plugin (`utils/owlCharacterPlugin`).
+ * small example plugin (`utils/owlCharacterPlugin`). Pixel, the test sprite,
+ * is read through the clippy.js reader, as a character a person brings is,
+ * and so are the characters clippy.js publishes, fetched when picked.
  */
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { buildReactorFromPlugins } from '@datalayer/reactor';
 import { Button, Heading, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
@@ -20,6 +22,8 @@ import { ThemedProvider } from './utils/themedProvider';
 import { ChatFloating } from '../chat';
 import { AssistantCharactersPlugin, assistantCharacterNamed, assistantCharactersOf, } from '../loop/plugins/assistant-characters';
 import { OwlCharacterPlugin } from './utils/owlCharacterPlugin';
+import { readTestSpriteCharacter } from './utils/testSpriteCharacter';
+import { CLIPPY_JS_CHARACTERS, CLIPPY_JS_VERSION, readClippyJsCharacter, } from './utils/clippyJsCharacters';
 import { readAcsCharacter, readClippyCharacter, } from '../chat/assistant/formats';
 /**
  * The agent-runtimes server the assistant talks to: `?agentRuntimesUrl=`
@@ -69,10 +73,72 @@ 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: () => {
-                                    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) => {
+    // Pixel, the test sprite, read once through the clippy.js reader.
+    const [pixel, setPixel] = useState();
+    useEffect(() => {
+        let cancelled = false;
+        readTestSpriteCharacter().then(read => {
+            if (!cancelled) {
+                setPixel(read);
+            }
+        }, error => {
+            if (!cancelled) {
+                setLoadError(error instanceof Error ? error.message : String(error));
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    // The object URL lives as long as the page does.
+    useEffect(() => () => {
+        if (pixel) {
+            URL.revokeObjectURL(pixel.sprite);
+        }
+    }, [pixel]);
+    // The clippy.js characters, each fetched the first time it is picked.
+    const [clippyJs, setClippyJs] = useState({});
+    const [fetching, setFetching] = useState();
+    const fetched = useRef([]);
+    useEffect(() => () => {
+        for (const read of fetched.current) {
+            URL.revokeObjectURL(read.sprite);
+        }
+    }, []);
+    const pickClippyJs = async (name) => {
+        const known = clippyJs[name];
+        if (known) {
+            setCharacter(known);
+            setLoadError(undefined);
+            return;
+        }
+        setFetching(name);
+        try {
+            const read = await readClippyJsCharacter(name);
+            fetched.current.push(read);
+            setClippyJs(previous => ({ ...previous, [name]: read }));
+            setCharacter(read);
+            setLoadError(undefined);
+        }
+        catch (error) {
+            setLoadError(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setFetching(undefined);
+        }
+    };
+    const isClippyJs = typeof character !== 'string' &&
+        Object.values(clippyJs).includes(character);
+    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." }), _jsxs(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))), pixel && (_jsxs(Button, { variant: character === pixel ? 'primary' : 'default', onClick: () => {
+                                        setCharacter(pixel);
+                                        setLoadError(undefined);
+                                    }, "aria-pressed": character === pixel, "data-assistant-character": "sprite", children: [pixel.name, " (sprite)"] }))] }), _jsxs(Box, { as: "section", sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 2, mb: 1 }, children: "The clippy.js characters" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mb: 2 }, children: ["Fetched when picked from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr and read as data by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: CLIPPY_JS_CHARACTERS.map(name => {
+                                        const picked = clippyJs[name] !== undefined && character === clippyJs[name];
+                                        return (_jsx(Button, { variant: picked ? 'primary' : 'default', onClick: () => void pickClippyJs(name), disabled: fetching !== undefined, "aria-pressed": picked, "data-assistant-character": `clippy-js-${name.toLowerCase()}`, children: fetching === name ? `${name}…` : name }, name));
+                                    }) })] }), _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) => {
                                         const files = Array.from(event.target.files ?? []);
                                         if (!files.length) {
                                             return;
@@ -84,7 +150,9 @@ const ChatAssistantExample = () => {
                                         catch (error) {
                                             setLoadError(error instanceof Error ? error.message : String(error));
                                         }
-                                    } }), loadError && (_jsx(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mt: 2 }, children: loadError })), typeof character !== 'string' && (_jsxs(Text, { as: "p", sx: { mt: 2 }, children: ["Playing ", character.name, "."] }))] })] }), _jsx(ChatFloating, { defaultViewMode: "assistant", assistantCharacter: drawn, protocol: "vercel-ai", endpoint: `${SERVER}/api/v1/vercel-ai/assistant`, title: "Assistant", description: "Hello! Ask me anything about this page.", position: "bottom-right", useStore: false, 
+                                    } }), loadError && (_jsx(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mt: 2 }, children: loadError })), typeof character !== 'string' &&
+                                    character !== pixel &&
+                                    !isClippyJs && (_jsxs(Text, { as: "p", sx: { mt: 2 }, children: ["Playing ", character.name, "."] }))] })] }), _jsx(ChatFloating, { defaultViewMode: "assistant", assistantCharacter: drawn, protocol: "vercel-ai", endpoint: `${SERVER}/api/v1/vercel-ai/assistant`, title: "Assistant", description: "Hello! Ask me anything about this page.", position: "bottom-right", useStore: false, 
                     // Ask a decision beside the composer: Jev, through this server.
                     decisions: { serverUrl: SERVER } }, typeof character === 'string' ? character : character.sprite)] }) }));
 };

package/lib/examples/ChatAssistantGalleryExample.d.ts

@@ -1,8 +1,9 @@
 /**
  * Every representation of the floating assistant, as a gallery (LOOP T-21
  * to T-27): each character — Datalayer's four, the owl an example plugin
- * contributes to `loop.assistant.character`, and a test sprite read through
- * the clippy.js reader — in each state it acts, stepped aside, with its
+ * contributes to `loop.assistant.character`, a test sprite read through
+ * the clippy.js reader, and, when asked, the characters clippy.js publishes,
+ * fetched from jsDelivr — in each state it acts, stepped aside, with its
  * balloon, in light and dark, moving or still.
  *
  * Static data, no agent: it opens without a server or an account.

package/lib/examples/ChatAssistantGalleryExample.js

@@ -6,8 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /**
  * Every representation of the floating assistant, as a gallery (LOOP T-21
  * to T-27): each character — Datalayer's four, the owl an example plugin
- * contributes to `loop.assistant.character`, and a test sprite read through
- * the clippy.js reader — in each state it acts, stepped aside, with its
+ * contributes to `loop.assistant.character`, a test sprite read through
+ * the clippy.js reader, and, when asked, the characters clippy.js publishes,
+ * fetched from jsDelivr — in each state it acts, stepped aside, with its
  * balloon, in light and dark, moving or still.
  *
  * Static data, no agent: it opens without a server or an account.
@@ -21,6 +22,7 @@ import { AssistantStage } from '../chat/assistant/AssistantStage';
 import { useViewportDrag } from '../chat/useViewportDrag';
 import { AssistantGalleryGrid, GalleryObstacle, Still, useGalleryCharacters, } from './utils/AssistantGalleryGrid';
 import { GALLERY_POSES, GALLERY_POSE_LABELS, balloonForPose, sampleApproval, sampleSaying, stateOfPose, } from './utils/assistantGallery';
+import { CLIPPY_JS_VERSION, useClippyJsCharacters, } from './utils/clippyJsCharacters';
 const STAGE_SIZE = 96;
 const PANEL_HEIGHT = 420;
 const LEAVE_MS = 700;
@@ -98,7 +100,10 @@ function InModes({ modes, stacked = false, children, }) {
         }, children: shown.map(mode => (_jsx(Box, { sx: { flex: '1 1 320px', minWidth: 0 }, children: _jsx(DatalayerThemeProvider, { colorMode: mode, theme: config.primerTheme, themeStyles: config.themeStyles, children: children(mode) }) }, mode))) }));
 }
 const ChatAssistantGalleryExample = () => {
-    const { characters, problem } = useGalleryCharacters();
+    const { characters: ours, problem } = useGalleryCharacters();
+    const [withClippyJs, setWithClippyJs] = useState(false);
+    const clippyJs = useClippyJsCharacters(withClippyJs);
+    const characters = [...ours, ...clippyJs.characters];
     const [characterId, setCharacterId] = useState('paperclip');
     const [pose, setPose] = useState('idle');
     const [view, setView] = useState('stage');
@@ -142,7 +147,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(Text, { as: "p", sx: { color: 'fg.muted', mb: 3, maxWidth: 760 }, children: ["The characters clippy.js publishes \u2014 Clippy, Merlin, Links, Rover and the others \u2014 are loaded on request from the", ' ', _jsxs("code", { children: ["clippyjs@", CLIPPY_JS_VERSION] }), " package on jsDelivr (about 15 MB) and read by the same reader. They are not in this repository: clippy.js\u2019s licence covers its code only, and the characters are Microsoft\u2019s."] }), _jsxs(Box, { as: "section", "aria-label": "Gallery controls", sx: {
                             display: 'grid',
                             gap: 3,
                             mb: 4,
@@ -160,7 +165,7 @@ const ChatAssistantGalleryExample = () => {
                                                 ? 'Side by side'
                                                 : option === 'light'
                                                     ? 'Light'
-                                                    : 'Dark' }, option))) }), _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: still, onChange: event => setStill(event.target.checked) }), _jsx(FormControl.Label, { children: "Reduced motion" })] }), _jsx(Button, { onClick: () => setReplay(replay + 1), children: "Replay the motions" })] }), view === 'stage' && (_jsxs(_Fragment, { children: [_jsx(Box, { role: "group", "aria-label": "Character", sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: characters.map(option => (_jsx(Button, { size: "small", variant: option.id === character.id ? 'primary' : 'default', "aria-pressed": option.id === character.id, "data-gallery-character": option.id, onClick: () => setCharacterId(option.id), children: option.name }, option.id))) }), _jsx(Box, { role: "group", "aria-label": "State", sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: GALLERY_POSES.map(option => (_jsx(Button, { size: "small", variant: option === pose ? 'primary' : 'default', "aria-pressed": option === pose, "data-gallery-pose": option, onClick: () => {
+                                                    : 'Dark' }, option))) }), _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: still, onChange: event => setStill(event.target.checked) }), _jsx(FormControl.Label, { children: "Reduced motion" })] }), _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: withClippyJs, onChange: event => setWithClippyJs(event.target.checked), "data-gallery-clippy-js": "" }), _jsxs(FormControl.Label, { children: ["clippy.js characters", clippyJs.loading ? ' (loading…)' : ''] })] }), _jsx(Button, { onClick: () => setReplay(replay + 1), children: "Replay the motions" })] }), view === 'stage' && (_jsxs(_Fragment, { children: [_jsx(Box, { role: "group", "aria-label": "Character", sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: characters.map(option => (_jsx(Button, { size: "small", variant: option.id === character.id ? 'primary' : 'default', "aria-pressed": option.id === character.id, "data-gallery-character": option.id, onClick: () => setCharacterId(option.id), children: option.name }, option.id))) }), _jsx(Box, { role: "group", "aria-label": "State", sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: GALLERY_POSES.map(option => (_jsx(Button, { size: "small", variant: option === pose ? 'primary' : 'default', "aria-pressed": option === pose, "data-gallery-pose": option, onClick: () => {
                                                 setPose(option);
                                                 setDecision(undefined);
                                                 setReplay(replay + 1);
@@ -169,7 +174,7 @@ const ChatAssistantGalleryExample = () => {
                                             gap: 2,
                                             flexWrap: 'wrap',
                                             alignItems: 'center',
-                                        }, children: [_jsx(Button, { onClick: say, "data-gallery-say": "", children: "Say something" }), saying !== undefined && (_jsx(Button, { variant: "invisible", onClick: () => setSaying(undefined), children: "Hush" })), presence === 'away' ? (_jsx(Button, { onClick: callBack, children: "Call it back" })) : (_jsx(Button, { onClick: () => sendAway('page'), disabled: presence !== 'here', "data-gallery-send-away": "", children: "Send it away" })), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Drag the character to move it; hover it for its own send-away menu." }), decision && (_jsx(Text, { role: "status", sx: { fontSize: 1 }, children: decision }))] })] }))] }), problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["The test sprite could not be read: ", problem] })), _jsx(Still, { still: still, children: view === 'stage' ? (_jsx(InModes, { modes: modes, children: mode => (_jsx(ModePanel, { mode: mode, character: character, pose: pose, presence: presence, balloon: balloon, insist: insist, onToggle: () => saying === undefined ? say() : setSaying(undefined), onDismiss: sendAway, onCallBack: callBack, away: away, replay: replay })) })) : (_jsx(InModes, { modes: modes, stacked: true, children: mode => (_jsx(Box, { "data-gallery-mode": mode, sx: {
+                                        }, children: [_jsx(Button, { onClick: say, "data-gallery-say": "", children: "Say something" }), saying !== undefined && (_jsx(Button, { variant: "invisible", onClick: () => setSaying(undefined), children: "Hush" })), presence === 'away' ? (_jsx(Button, { onClick: callBack, children: "Call it back" })) : (_jsx(Button, { onClick: () => sendAway('page'), disabled: presence !== 'here', "data-gallery-send-away": "", children: "Send it away" })), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Drag the character to move it; hover it for its own send-away menu." }), decision && (_jsx(Text, { role: "status", sx: { fontSize: 1 }, children: decision }))] })] }))] }), problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["The test sprite could not be read: ", problem] })), clippyJs.problem && (_jsxs(Text, { as: "p", role: "alert", sx: { color: 'danger.fg', mb: 3 }, children: ["A clippy.js character could not be read: ", clippyJs.problem] })), _jsx(Still, { still: still, children: view === 'stage' ? (_jsx(InModes, { modes: modes, children: mode => (_jsx(ModePanel, { mode: mode, character: character, pose: pose, presence: presence, balloon: balloon, insist: insist, onToggle: () => saying === undefined ? say() : setSaying(undefined), onDismiss: sendAway, onCallBack: callBack, away: away, replay: replay })) })) : (_jsx(InModes, { modes: modes, stacked: true, children: mode => (_jsx(Box, { "data-gallery-mode": mode, sx: {
                                     bg: 'canvas.default',
                                     border: '1px solid',
                                     borderColor: 'border.default',