@datalayer/agent-runtimes 1.3.85 → 1.3.87

package/lib/examples/ScenesExample.js

@@ -0,0 +1,241 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Flash, Heading, Text, Textarea, UnderlineNav, } 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 { Streamdown } from 'streamdown';
+import { ThemedProvider } from './utils/themedProvider';
+import { useBrowserInference } from '../hooks/useBrowserInference';
+import { useAnonymousSessionStore } from '../runtimes/browser/anonymousToken';
+import { connectA2APeer } from '../runtimes/browser/a2aPeer';
+import { A2ATeamGraph, NOTEBOOK_AND_WORDS, PERSON, SceneView, sceneCuesOf, sceneMemberUrl, sceneRuntimePorts, sceneStageOf, teamConnectionsOf, teamToolClassifier, useA2ATeam, } from '../components/teams';
+import { listSceneSpecs } from '../specs/scenes';
+import { classifyToolCall, traceA2AFetch, useAgentInspector, } from '../components/inspector';
+/** Where the members on a runtime are, by application id: the local ports, unless a variable says. */
+const PORTS = sceneRuntimePorts();
+/**
+ * Reach a member on a runtime: read its card at `url`, its traffic recorded
+ * as spans for the inspectors and the transcript, as asked by `asker`.
+ */
+function useReached(url, asker, name, connections, tracer) {
+    const [reached, setReached] = useState({ peer: null, error: null });
+    useEffect(() => {
+        let current = true;
+        setReached({ peer: null, error: null });
+        connectA2APeer({
+            url,
+            fetch: traceA2AFetch(globalThis.fetch.bind(globalThis), {
+                tracer,
+                asker,
+                peer: name,
+                classifyTool: teamToolClassifier(connections, classifyToolCall),
+            }),
+        })
+            .then(peer => current && setReached({ peer, error: null }))
+            .catch(error => current &&
+            setReached({
+                peer: null,
+                error: error instanceof Error ? error.message : String(error),
+            }));
+        return () => {
+            current = false;
+        };
+    }, [url, asker, name, connections, tracer]);
+    return reached;
+}
+/** The members of a scene that run on a runtime, each with its address and connections. */
+function runtimeMembersOf(stage) {
+    const env = import.meta.env;
+    return stage.members
+        .filter(member => member.runsIn === 'runtime')
+        .map(member => ({
+        ...member,
+        url: sceneMemberUrl(member.app.id, env, PORTS),
+        connections: teamConnectionsOf(member.app),
+    }));
+}
+/** One member on a runtime: reached, and told to the scene. */
+function ReachMember({ member, asker, tracer, onReached, }) {
+    const reached = useReached(member.url, asker, member.app.name, member.connections, tracer);
+    useEffect(() => onReached(member.id, reached), [member.id, reached, onReached]);
+    return null;
+}
+/** What a member not reached needs: its application's setup, and how to serve it. */
+function memberNeeds(member, error) {
+    return [
+        `${member.app.name} is not reachable at ${member.url}: ${error}`,
+        ...member.setup,
+        `Serve it with python examples/sales-accounting-a2a/serve_scenes.py (npm run examples does), or set VITE_A2A_${member.app.id
+            .replace(/-/g, '_')
+            .toUpperCase()}_URL to where it runs.`,
+    ];
+}
+function Scene({ scene }) {
+    const stage = useMemo(() => sceneStageOf(scene), [scene]);
+    const entry = stage.entry;
+    const entryInBrowser = entry.runsIn === 'browser';
+    const runtimeMembers = useMemo(() => runtimeMembersOf(stage), [stage]);
+    const { inference, needsSignIn, anonymous } = useBrowserInference(entryInBrowser);
+    // One tracer of what every member does: each inspector shows its own.
+    const { tracer: inspector } = useAgentInspector();
+    const [reached, setReached] = useState({});
+    const onReached = useMemo(() => (id, found) => setReached(prev => prev[id]?.peer === found.peer && prev[id]?.error === found.error
+        ? prev
+        : { ...prev, [id]: found }), []);
+    const reachedOf = (id) => reached[id] ?? { peer: null, error: null };
+    // The entry's peers over A2A, in the cast's order; the entry itself when
+    // it runs on a runtime.
+    const peerOptions = useMemo(() => stage.peers.map(peer => {
+        const member = runtimeMembers.find(one => one.id === peer.id);
+        return {
+            app: peer.app,
+            peer: reached[peer.id]?.peer ?? null,
+            connections: member?.connections ?? [],
+            ...(stage.opensFirst === peer.id
+                ? { greeting: peer.cast.persona.line }
+                : {}),
+        };
+    }), [stage, runtimeMembers, reached]);
+    const team = useA2ATeam({
+        entry: entry.app,
+        peers: peerOptions,
+        entryPeer: entryInBrowser ? undefined : reachedOf(entry.id).peer,
+        inference,
+        accept: NOTEBOOK_AND_WORDS,
+        inspector,
+    });
+    // The script's cues, labelled by the entry's starters (A-13): chips in
+    // its balloon while it waits for a question.
+    const suggestions = useMemo(() => sceneCuesOf(scene, entry.app.interface.starters ?? []), [scene, entry.app]);
+    const [draft, setDraft] = useState('');
+    const composer = useRef(null);
+    // Under the graph: where a notebook a member gives runs.
+    const notebookArea = useRef(null);
+    const send = (text) => {
+        setDraft('');
+        void team.send(text);
+    };
+    // The members as the transcript names them: the spans' services, and the
+    // connections a tool call is of.
+    const transcriptMembers = useMemo(() => stage.members.map(member => ({
+        id: member.app.id,
+        name: member.app.name,
+        connections: runtimeMembers.find(one => one.id === member.id)?.connections ?? [],
+    })), [stage, runtimeMembers]);
+    const whereOf = (member) => member.runsIn === 'browser'
+        ? 'in your browser'
+        : `on a runtime, ${new URL(runtimeMembers.find(one => one.id === member.id)?.url ?? 'http://runtime').host}`;
+    const aboutOf = (member) => {
+        const peer = reachedOf(member.id).peer;
+        const url = runtimeMembers.find(one => one.id === member.id)?.url;
+        return {
+            name: member.app.name,
+            spec: `${member.app.id}:${member.app.version}`,
+            model: member.app.model || undefined,
+            where: whereOf(member),
+            description: peer?.card.description || member.app.description || undefined,
+            skills: peer?.card.skills.map(skill => skill.name),
+            protocol: peer ? 'a2a' : undefined,
+            url: peer ? url : undefined,
+        };
+    };
+    const notReached = runtimeMembers.filter(member => reachedOf(member.id).error);
+    const notebookGiver = stage.peers[0] ?? entry;
+    return (_jsxs(Box, { "data-scene-example": scene.id, children: [_jsx(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, "data-scene-assumes": "", children: stage.assumes }), anonymous.status === 'active' && anonymous.expiresAt && (_jsx(Box, { sx: { mb: 3 }, children: _jsx(AnonymousKeyTimer, { expiresAt: anonymous.expiresAt, grantedMs: anonymous.grantedMs, label: `${entry.app.name}'s trial key`, onExpire: () => useAnonymousSessionStore.getState().expire() }) })), anonymous.status === 'expired' && (_jsx(Box, { sx: { mb: 3 }, children: _jsx(AnonymousKeyExpired, { agentName: entry.app.name, onSignedIn: () => useAnonymousSessionStore.getState().clear() }) })), entryInBrowser && needsSignIn && (_jsxs(Flash, { variant: "warning", sx: { mb: 3 }, children: [entry.app.name, " asks its model through the Datalayer inference service: sign in, or wait for a visitor\u2019s trial key."] })), notReached.map(member => (_jsx(Flash, { variant: "danger", sx: { mb: 3 }, "data-scene-needs": member.app.id, children: memberNeeds(member, reachedOf(member.id).error ?? '').map(line => (_jsx(Text, { as: "p", sx: { m: 0 }, children: line }, line))) }, member.id))), runtimeMembers.map(member => (_jsx(ReachMember, { member: member, 
+                // Its requests are the entry's, or the person's own when the
+                // page asks it itself.
+                asker: member.entry ? PERSON : entry.app.name, tracer: inspector, onReached: onReached }, member.id))), _jsx(Box, { sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.subtle',
+                    px: 2,
+                    pt: 2,
+                    mb: 3,
+                }, children: _jsx(SceneView, { members: transcriptMembers, tracer: inspector, emptyText: `Nothing said yet: ask ${entry.app.name} with one of the suggestions.`, children: _jsx(A2ATeamGraph, { entry: {
+                            id: entry.app.id,
+                            name: entry.app.name,
+                            emoji: entry.cast.persona.face || entry.app.emoji,
+                            character: entry.app.interface.assistant ?? 'paperclip',
+                            where: whereOf(entry),
+                            persona: team.entryPersona,
+                            onToggle: () => composer.current?.focus(),
+                            conversationLabel: `Ask ${entry.app.name}`,
+                            onAway: team.setEntryAway,
+                            history: team.entryHistory,
+                            connections: runtimeMembers.find(one => one.id === entry.id)
+                                ?.connections,
+                            expandTarget: notebookArea,
+                            notebookTitle: `${notebookGiver.app.name}’s notebook`,
+                            suggestions: team.ready && !team.busy ? suggestions : undefined,
+                            onSuggestion: suggestion => send(suggestion.prompt),
+                            inspector,
+                            onStop: team.busy ? team.stop : undefined,
+                            about: aboutOf(entry),
+                        }, peers: stage.peers.map(peer => {
+                            const kept = team.peers.find(one => one.id === peer.app.id);
+                            return {
+                                id: peer.app.id,
+                                name: peer.app.name,
+                                emoji: reachedOf(peer.id).peer?.face?.emoji ||
+                                    peer.cast.persona.face ||
+                                    peer.app.emoji,
+                                character: peer.app.interface.assistant ?? 'wizard',
+                                where: whereOf(peer),
+                                persona: kept?.persona ?? team.peerPersona,
+                                onAway: kept?.setAway,
+                                history: kept?.history,
+                                connections: runtimeMembers.find(one => one.id === peer.id)
+                                    ?.connections,
+                                inspector,
+                                about: aboutOf(peer),
+                            };
+                        }), flows: team.flows, calls: team.calls, links: stage.links.map(link => ({
+                            from: stage.members.find(m => m.id === link.from)?.app.id ??
+                                link.from,
+                            to: stage.members.find(m => m.id === link.to)?.app.id ?? link.to,
+                        })), positions: Object.fromEntries(stage.members
+                            .filter(member => stage.positions[member.id])
+                            .map(member => [member.app.id, stage.positions[member.id]])), connected: Object.fromEntries(stage.peers.map(peer => [
+                            peer.app.id,
+                            reachedOf(peer.id).peer !== null,
+                        ])), labels: Object.fromEntries(stage.peers.map(peer => {
+                            const found = reachedOf(peer.id).peer;
+                            return [
+                                peer.app.id,
+                                found ? `A2A · ${found.skill.name}` : 'A2A · not connected',
+                            ];
+                        })), 
+                        // Room for the balloons: suggestions, *more* and a notebook.
+                        balloonRoom: 320 }) }) }), _jsx(Box, { ref: notebookArea, sx: { mb: team.notebook ? 3 : 0 }, "data-team-notebook-placement": "under-graph" }), _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 ", entry.app.name] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: "Or choose one of its suggestions in its balloon: the script\u2019s cues." }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: suggestions[0]?.prompt ?? 'Ask…', onChange: event => setDraft(event.target.value), onKeyDown: event => {
+                                    if (event.key === 'Enter' && !event.shiftKey) {
+                                        event.preventDefault();
+                                        send(draft);
+                                    }
+                                } }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 2 }, children: [_jsx(Button, { variant: "primary", disabled: !team.ready || team.busy || !draft.trim(), onClick: () => send(draft), children: "Ask" }), team.busy && _jsx(Button, { onClick: team.stop, children: "Stop" })] }), _jsx(Box, { sx: { mt: 3 }, "data-team-conversation": "", children: team.turns.map((turn, index) => (_jsxs(Box, { sx: {
+                                        p: 2,
+                                        mb: 2,
+                                        borderRadius: 2,
+                                        bg: turn.role === 'user' ? 'accent.subtle' : 'canvas.subtle',
+                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: turn.role === 'user' ? PERSON : entry.app.name }), _jsx(Streamdown, { children: turn.text })] }, index))) })] }), _jsxs(Box, { sx: { flex: '1 1 360px', minWidth: 0 }, children: [!team.notebook && stage.peers.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: "The report" }), _jsx(Box, { sx: {
+                                            p: 3,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            borderRadius: 2,
+                                            minHeight: 120,
+                                        }, "data-team-report": "", children: team.report ? (_jsx(Streamdown, { children: team.report })) : (_jsx(Text, { sx: { color: 'fg.muted' }, children: "What the last member asked returns appears here, as it returned it, or as a notebook to run when it gives one." })) })] })), scene.setup.length > 0 && (_jsxs(Box, { sx: { mt: 3 }, "data-scene-setup": "", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1, mb: 1 }, children: "What this scene needs" }), scene.setup.map(line => (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: line }, line)))] }))] })] })] }));
+}
+function Scenes() {
+    const scenes = useMemo(() => listSceneSpecs(), []);
+    const [selected, setSelected] = useState(scenes[0]?.id ?? '');
+    const scene = scenes.find(one => one.id === selected) ?? scenes[0];
+    return (_jsxs(Box, { sx: { p: 4, maxWidth: 1080, mx: 'auto' }, children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Scenes" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', mt: 0 }, children: ["The catalogue\u2019s scenes, played against the local servers: each member on a runtime is served over A2A by ", _jsx("code", { children: "serve_scenes.py" }), "; the entry in your browser asks on your token or a visitor\u2019s trial key."] }), _jsx(UnderlineNav, { "aria-label": "Scenes", sx: { mb: 3 }, children: scenes.map(one => (_jsxs(UnderlineNav.Item, { "aria-current": one.id === scene?.id ? 'page' : undefined, onSelect: event => {
+                        event.preventDefault();
+                        setSelected(one.id);
+                    }, "data-scene-tab": one.id, children: [one.emoji, " ", one.name] }, one.id))) }), scene && _jsx(Scene, { scene: scene }, scene.id)] }));
+}
+export function ScenesExample() {
+    return (_jsx(ThemedProvider, { children: _jsx(Scenes, {}) }));
+}
+export default ScenesExample;

package/lib/examples/example-selector.js

@@ -112,6 +112,7 @@ export const EXAMPLE_ENTRIES = [
     // for one sandbox — and a second one that would not agree with the first.
     ['example', 'loop', 'workspace', 'sandbox', 'owns-sandbox-control']),
     makeEntry('LoopAppComputerExample', () => import('./LoopAppComputerExample'), 'An application beside its computer: what its agent ran on its sandbox, its files, and Take over and Hand back (LOOP R-23).', ['example', 'loop', 'app', 'computer', 'sandbox', 'owns-sandbox-control']),
+    makeEntry('ScenesExample', () => import('./ScenesExample'), 'The scenes of the catalogue in tabs — Sales & Accounting, Month-end close, Crop monitoring, Disaster assessment — each its graph and transcript, its cues as suggestions, played against the local servers (LOOP A-15).', ['example', 'loop', 'scenes', 'a2a', 'agentspecs', 'team']),
     makeEntry('LoopShellExample', () => import('./LoopShellExample'), 'The Loop shell at its most naked: a blank canvas, a floating draggable prompt, and an editor selector in the corner — none, notebook or document.', 
     // `owns-sandbox-control`: the shell is pinned to the browser sandbox, so
     // the page's selector would offer three targets it cannot move to.

package/lib/examples/exampleGroups.js

@@ -23,7 +23,10 @@ export const EXAMPLE_GROUP_ORDER = [
     'CopilotKit',
 ];
 export const getExampleGroup = (id) => {
+    // The library of specs, the Loop shells, and the scenes of the catalogue
+    // (LOOP A-15): the applications and what is staged with them.
     if (id === 'AgentspecsExample' ||
+        id === 'ScenesExample' ||
         id.startsWith('Loop') ||
         id === 'DecksAgent') {
         return 'Apps';

package/lib/examples/index.d.ts

@@ -27,6 +27,7 @@ export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentCodeSandboxesExample } from './AgentCodeSandboxesExample';
 export { default as AgentDecideExample } from './AgentDecideExample';
 export { default as AgentA2ATeamExample } from './AgentA2ATeamExample';
+export { default as ScenesExample } from './ScenesExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';
 export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
 export { default as AgentHooksExample } from './AgentHooksExample';

package/lib/examples/index.js

@@ -33,6 +33,7 @@ export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentCodeSandboxesExample } from './AgentCodeSandboxesExample';
 export { default as AgentDecideExample } from './AgentDecideExample';
 export { default as AgentA2ATeamExample } from './AgentA2ATeamExample';
+export { default as ScenesExample } from './ScenesExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';
 export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
 export { default as AgentHooksExample } from './AgentHooksExample';

package/lib/examples/main.js

@@ -62,6 +62,9 @@ const ANONYMOUS_EXAMPLES = new Set([
     // The Sales and Accounting team: Sales in the page on a visitor's trial
     // key, Accounting on the local server, which answers the machine itself.
     'AgentA2ATeamExample',
+    // The scenes of the catalogue: each entry in the page on a visitor's trial
+    // key, the members on a runtime on local servers that answer the machine.
+    'ScenesExample',
     // Decide, on the local agent-runtimes server as above: Jev is asked
     // through the server's ai-inference, with the server's own key.
     'AgentDecideExample',
@@ -1045,6 +1048,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                         'LoopStrategyExample',
                         'LoopAppComputerExample',
                         'AgentspecsExample',
+                        'ScenesExample',
                     ];
                     const loopOrder = (id) => {
                         const index = LOOP_ORDER.indexOf(id);

package/lib/specs/index.d.ts

@@ -27,5 +27,6 @@ export * from './gates';
 export * from './tracks';
 export * from './ops';
 export * from './apps';
+export * from './scenes';
 export * from './actions';
 export * from './appspecSchema';

package/lib/specs/index.js

@@ -31,5 +31,6 @@ export * from './gates';
 export * from './tracks';
 export * from './ops';
 export * from './apps';
+export * from './scenes';
 export * from './actions';
 export * from './appspecSchema';

package/lib/specs/mcpServers.js

@@ -68,12 +68,18 @@ export const EARTHDATA_MCP_SERVER_0_0_1 = {
     emoji: '🌍',
     url: '',
     command: 'npx',
-    args: ['-y', 'earthdata-mcp-server'],
+    args: [
+        '-y',
+        'mcp-remote',
+        'https://mcp.datalayer.run/mcp?only=earthdata',
+        '--header',
+        'Authorization: Bearer ${DATALAYER_API_KEY}',
+    ],
     transport: 'stdio',
     enabled: true,
     isAvailable: false,
     tools: [],
-    requiredEnvVars: ['EARTHDATA_USERNAME:0.0.1', 'EARTHDATA_PASSWORD:0.0.1'],
+    requiredEnvVars: ['DATALAYER_API_KEY:0.0.1'],
 };
 export const EURUS_MCP_SERVER_0_0_1 = {
     id: 'eurus',

package/lib/specs/sceneSchema.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The scene spec's JSON Schema (`loop.scene/v1`), generated from agentspecs by
+ * `scripts/codegen/generate_scenes.py`. Do not edit.
+ *
+ * @module specs/sceneSchema
+ */
+import type { JsonSchema } from './appspecSchema';
+export declare const SCENE_SCHEMA: JsonSchema;