@datalayer/agent-runtimes 1.3.62 → 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.js

@@ -2,6 +2,8 @@ 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';
@@ -9,6 +11,7 @@ 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';
@@ -60,7 +63,17 @@ function AgentA2ATeam() {
     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 { 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({
@@ -235,7 +248,11 @@ function AgentA2ATeam() {
     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: {
+    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',

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: "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) => {
+    // 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: "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: {
+            }, 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',

package/lib/examples/DecksAgent.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
-import { registerDecks } from '@datalayer/decks';
-import { exampleDecks } from '@datalayer/decks/examples';
+import { registerDeckComponents, registerDecks } from '@datalayer/decks';
+import { exampleDeckComponents, exampleDecks } from '@datalayer/decks/examples';
 import { LoopEmbed } from '../loop';
 import { DeckViewPlugin, LoopDecksPlugin } from '../loop/plugins/decks';
 // The package's example decks, so the catalog has something to open and the
 // agent's suggestions point at decks that exist. Once, at module load.
 registerDecks(exampleDecks);
+// And the components their slides name (AgentsHero, LiveAppearance…).
+registerDeckComponents(exampleDeckComponents);
 // Module-level, so the embed builds its reactor once rather than on every
 // render of this component.
 const DECK_PLUGINS = [LoopDecksPlugin, DeckViewPlugin];

package/lib/examples/LoopShellExample.js

@@ -3,8 +3,8 @@ import { useMemo } from 'react';
 import { Box } from '@primer/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { useReactor } from '@datalayer/reactor/react';
-import { registerDecks } from '@datalayer/decks';
-import { exampleDecks } from '@datalayer/decks/examples';
+import { registerDeckComponents, registerDecks } from '@datalayer/decks';
+import { exampleDeckComponents, exampleDecks } from '@datalayer/decks/examples';
 import { buildLoopReactor, LoopWorkspace } from '../loop/shell';
 import { DeckViewPlugin, LoopDecksPlugin } from '../loop/plugins/decks';
 import { loopPlugins } from '../loop/presets';
@@ -18,6 +18,8 @@ const FRONT_DOOR = 'jupyter-data-analyst';
 // The package's example decks, so the Decks member has something to open and
 // change before it has made one. Once, at module load.
 registerDecks(exampleDecks);
+// And the components their slides name (AgentsHero, LiveAppearance…).
+registerDeckComponents(exampleDeckComponents);
 export function LoopShellExample({ serverUrl = resolveExampleAgentRuntimesUrl('local'), agentId = FRONT_DOOR, defaultEditor = 'none', inheritTheme = false, }) {
     // Built once: rebuilding would restart every plugin on each render.
     const reactor = useMemo(() => buildLoopReactor([

package/lib/examples/main.js

@@ -47,7 +47,7 @@ const DEFAULT_LOCAL_JUPYTER_SERVER_URL = 'http://localhost:8888/api/jupyter-serv
 const DEFAULT_LOCAL_JUPYTER_SERVER_TOKEN = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
 const DEFAULT_CLOUD_RUNTIME_ENVIRONMENT = 'ai-agents-env';
 const EXAMPLE_GROUP_ORDER = [
-    'Loop',
+    'Apps',
     'A2UI',
     'A2A',
     'AG-UI',
@@ -91,11 +91,9 @@ const ANONYMOUS_EXAMPLES = new Set([
 ]);
 const getExampleGroup = (id) => {
     if (id === 'AgentspecsExample' ||
-        id === 'LoopStrategyExample' ||
-        id === 'LoopWorkspaceExample' ||
-        id === 'LoopShellExample' ||
+        id.startsWith('Loop') ||
         id === 'DecksAgent') {
-        return 'Loop';
+        return 'Apps';
     }
     if (id.startsWith('A2Ui'))
         return 'A2UI';
@@ -1072,13 +1070,14 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
         }
         for (const [groupName, examples] of groups) {
             examples.sort((left, right) => {
-                if (groupName === 'Loop') {
+                if (groupName === 'Apps') {
                     // The shells first, most naked first; then the strategy that drives a
                     // notebook; then the library of specs behind them all.
                     const LOOP_ORDER = [
                         'LoopShellExample',
                         'LoopWorkspaceExample',
                         'LoopStrategyExample',
+                        'LoopAppComputerExample',
                         'AgentspecsExample',
                     ];
                     const loopOrder = (id) => {

package/lib/examples/utils/clippyJsCharacters.d.ts

@@ -0,0 +1,18 @@
+import type { AssistantCharacterData } from '../../chat/assistant/formats/types';
+import type { GalleryCharacter } from './AssistantGalleryGrid';
+/** The version of `clippyjs` the characters are read from. */
+export declare const CLIPPY_JS_VERSION = "0.1.0";
+/** The characters the package publishes: their names, and their folders. */
+export declare const CLIPPY_JS_CHARACTERS: readonly ["Clippy", "Merlin", "Links", "Rover", "Genie", "Genius", "F1", "Peedy", "Rocky", "Bonzi"];
+export type ClippyJsCharacterName = (typeof CLIPPY_JS_CHARACTERS)[number];
+/** One clippy.js character, fetched and read. */
+export declare function readClippyJsCharacter(name: ClippyJsCharacterName): Promise<AssistantCharacterData>;
+/**
+ * The clippy.js characters as the gallery shows them, fetched once `enabled`
+ * and kept while it stays so; each as soon as it is read.
+ */
+export declare function useClippyJsCharacters(enabled: boolean): {
+    characters: readonly GalleryCharacter[];
+    loading: boolean;
+    problem?: string;
+};

package/lib/examples/utils/clippyJsCharacters.js

@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The characters clippy.js publishes — Clippy, Merlin, Links, Rover and the
+ * others — loaded into the floating assistant's gallery from the `clippyjs`
+ * package on jsDelivr, at the reader's request, and read through the same
+ * clippy.js reader a person's files go through.
+ *
+ * Nothing of them is in this repository: clippy.js's licence covers its code
+ * only, and the characters, their names and their drawings are Microsoft's
+ * (§6.9). The page fetches them when asked and keeps them in memory.
+ *
+ * The package ships each character as ES modules: `agent.mjs` exports the
+ * character's data, `map.mjs` its sprite sheet as a data URL. Both are read as
+ * text, never run: the data is rewritten as the `clippy.ready(...)` call the
+ * reader expects. Sounds are left out.
+ *
+ * @module examples/utils/clippyJsCharacters
+ */
+import { useEffect, useState } from 'react';
+import { readClippyCharacter } from '../../chat/assistant/formats/clippy';
+/** The version of `clippyjs` the characters are read from. */
+export const CLIPPY_JS_VERSION = '0.1.0';
+const BASE = `https://cdn.jsdelivr.net/npm/clippyjs@${CLIPPY_JS_VERSION}/dist/agents`;
+/** The characters the package publishes: their names, and their folders. */
+export const CLIPPY_JS_CHARACTERS = [
+    'Clippy',
+    'Merlin',
+    'Links',
+    'Rover',
+    'Genie',
+    'Genius',
+    'F1',
+    'Peedy',
+    'Rocky',
+    'Bonzi',
+];
+async function fetchText(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`${url} answered ${response.status}.`);
+    }
+    return response.text();
+}
+/** The value a module exports by default: `var x = <value>;\nexport …`. */
+function defaultExportText(module, what) {
+    const match = /^var [A-Za-z_$][\w$]* = ([\s\S]*?);\s*export\s*\{/m.exec(module);
+    if (!match) {
+        throw new Error(`${what} does not export its value as clippy.js 0.1 does.`);
+    }
+    return match[1];
+}
+/** One clippy.js character, fetched and read. */
+export async function readClippyJsCharacter(name) {
+    const folder = `${BASE}/${name.toLowerCase()}`;
+    const [agentModule, mapModule] = await Promise.all([
+        fetchText(`${folder}/agent.mjs`),
+        fetchText(`${folder}/map.mjs`),
+    ]);
+    const data = defaultExportText(agentModule, `${name}'s agent.mjs`);
+    const mapUrl = defaultExportText(mapModule, `${name}'s map.mjs`);
+    if (!/^"data:image\/(png|gif|webp|jpeg);base64,[A-Za-z0-9+/=]+"$/.test(mapUrl)) {
+        throw new Error(`${name}'s map.mjs does not hold an image.`);
+    }
+    const mapPng = await (await fetch(mapUrl.slice(1, -1))).blob();
+    return readClippyCharacter({
+        agentJs: `clippy.ready(${JSON.stringify(name)}, ${data});`,
+        mapPng,
+    });
+}
+/**
+ * The clippy.js characters as the gallery shows them, fetched once `enabled`
+ * and kept while it stays so; each as soon as it is read.
+ */
+export function useClippyJsCharacters(enabled) {
+    const [read, setRead] = useState([]);
+    const [pending, setPending] = useState(0);
+    const [problem, setProblem] = useState();
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        let cancelled = false;
+        const loaded = [];
+        setRead([]);
+        setProblem(undefined);
+        setPending(CLIPPY_JS_CHARACTERS.length);
+        for (const name of CLIPPY_JS_CHARACTERS) {
+            readClippyJsCharacter(name).then(character => {
+                if (cancelled) {
+                    URL.revokeObjectURL(character.sprite);
+                    return;
+                }
+                loaded.push(character);
+                setRead(previous => [
+                    ...previous,
+                    {
+                        id: `clippy-js-${name.toLowerCase()}`,
+                        name: character.name,
+                        character,
+                        from: `clippy.js ${CLIPPY_JS_VERSION}`,
+                    },
+                ].sort((a, b) => CLIPPY_JS_CHARACTERS.indexOf(a.name) -
+                    CLIPPY_JS_CHARACTERS.indexOf(b.name)));
+                setPending(count => count - 1);
+            }, error => {
+                if (cancelled) {
+                    return;
+                }
+                setProblem(`${name}: ${error instanceof Error ? error.message : String(error)}`);
+                setPending(count => count - 1);
+            });
+        }
+        // The object URLs live as long as the characters are shown.
+        return () => {
+            cancelled = true;
+            for (const character of loaded) {
+                URL.revokeObjectURL(character.sprite);
+            }
+        };
+    }, [enabled]);
+    return {
+        characters: enabled ? read : [],
+        loading: enabled && pending > 0,
+        problem: enabled ? problem : undefined,
+    };
+}

package/lib/loop/apps/checks.js

@@ -484,7 +484,7 @@ export function documentShapeProblems(document) {
     }
     for (const key of [
         'skills',
-        'tools',
+        'backend_tools',
         'context',
         'contents',
         'notifications',

package/lib/types/agents.d.ts

@@ -3,7 +3,7 @@
  */
 import type { Agentspec } from './agentspecs';
 import type { AgentConnection } from './connection';
-export type AgentLibrary = 'pydantic-ai' | 'langchain' | 'google-adk';
+export type AgentLibrary = 'pydantic-ai' | 'langchain';
 /**
  * Unified agent status covering runtime lifecycle and UI lifecycle.
  */

package/package.json

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