@datalayer/agent-runtimes 1.3.84 → 1.3.86

package/lib/examples/AgentA2ATeamExample.d.ts

@@ -19,15 +19,16 @@
  * list_invoices…" while Accounting calls Odoo. Then the report appears. The
  * page's own state is `useA2ATeam`'s, which the landing's home page runs too.
  *
- * Under the graph, each member has its own Agent Inspector: Sales' — its
- * model turns, its `ask_accounting` call, the A2A messages it sends and
- * receives — and Accounting's — what it received over A2A, its Odoo MCP
- * calls, `write_notebook`, its status updates and artifacts, as the A2A
- * stream tells them. Both read one record (`useAgentInspector`), fed by the
- * team (`useA2ATeam`'s `inspector`) and by the fetch the A2A client sends
- * with (`inspectA2AFetch`); an A2A message shows in both, sent in one and
- * received in the other. Right-click a member for its menu: *Inspect the
- * agent…* opens its inspector over the page.
+ * Under the graph, each member has its own Agent Inspector, core's OTEL
+ * view of the page's OpenTelemetry spans: Sales' — its model turns
+ * (`invoke_agent`), its `ask_accounting` call (`execute_tool`), the A2A
+ * requests it sends and what came back, event by event — and Accounting's —
+ * the A2A requests sent to it (`peer.service`), its Odoo MCP calls,
+ * `write_notebook`, as the A2A stream tells them. Both read one tracer
+ * (`useAgentInspector`), fed by the team (`useA2ATeam`'s `inspector`) and by
+ * the fetch the A2A client sends with (`traceA2AFetch`); an A2A request
+ * shows in both. Right-click a member for its menu: *Inspect the agent…*
+ * opens its inspector over the page.
  *
  * Sales' suggestions — its Appspec's starters — are chips in its balloon
  * while it waits for a question: one clicked is asked, as if typed.

package/lib/examples/AgentA2ATeamExample.js

@@ -10,9 +10,9 @@ import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useBrowserInference } from '../hooks/useBrowserInference';
 import { readJwtClaims, tokenLifetimeMs, useAnonymousSessionStore, } from '../runtimes/browser/anonymousToken';
 import { connectA2APeer } from '../runtimes/browser/a2aPeer';
-import { A2ATeamGraph, NOTEBOOK_AND_WORDS, teamConnectionsOf, teamToolClassifier, useA2ATeam, usePeerSandbox, } from '../components/teams';
+import { A2ATeamGraph, SceneView, NOTEBOOK_AND_WORDS, teamConnectionsOf, teamToolClassifier, useA2ATeam, usePeerSandbox, } from '../components/teams';
 import { ACCOUNTING_APP_0_0_1, SALES_APP_0_0_1 } from '../specs/apps';
-import { AgentInspector, classifyToolCall, inspectA2AFetch, useAgentInspector, } from '../components/inspector';
+import { AgentInspector, classifyToolCall, traceA2AFetch, useAgentInspector, } from '../components/inspector';
 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;
@@ -46,8 +46,18 @@ function AgentA2ATeam() {
     }, [accountingKey]);
     const [accountingKeyEnded, setAccountingKeyEnded] = useState(() => accountingKeyClock !== undefined &&
         accountingKeyClock.expiresAt <= Date.now());
-    // One record of what both members do, each inspector showing its own.
-    const { sink: inspector } = useAgentInspector();
+    // One tracer of what both members do, each inspector showing its own.
+    const { tracer: inspector } = useAgentInspector();
+    // The members as the transcript names them: the spans' services, and the
+    // connections a tool call is of (Accounting → Odoo).
+    const sceneMembers = useMemo(() => [
+        { id: SALES.id, name: SALES.name },
+        {
+            id: ACCOUNTING.id,
+            name: ACCOUNTING.name,
+            connections: ACCOUNTING_CONNECTIONS,
+        },
+    ], []);
     const [peer, setPeer] = useState(null);
     const [peerError, setPeerError] = useState(null);
     const [draft, setDraft] = useState('');
@@ -61,9 +71,9 @@ function AgentA2ATeam() {
         connectA2APeer({
             url: accountingUrl,
             key: accountingKey,
-            // The A2A traffic, recorded: Sales sends, Accounting answers.
-            fetch: inspectA2AFetch(globalThis.fetch.bind(globalThis), {
-                sink: inspector,
+            // The A2A traffic, as spans: Sales sends, Accounting answers.
+            fetch: traceA2AFetch(globalThis.fetch.bind(globalThis), {
+                tracer: inspector,
                 asker: SALES.name,
                 peer: ACCOUNTING.name,
                 classifyTool: teamToolClassifier(ACCOUNTING_CONNECTIONS, classifyToolCall),
@@ -116,66 +126,66 @@ function AgentA2ATeam() {
                     px: 2,
                     pt: 2,
                     mb: 3,
-                }, children: _jsx(A2ATeamGraph, { entry: {
-                        id: SALES.id,
-                        name: SALES.name,
-                        emoji: SALES.emoji,
-                        character: SALES.interface.assistant ?? 'paperclip',
-                        where: salesMember.runsIn === 'browser'
-                            ? 'in your browser'
-                            : 'on a runtime',
-                        persona: team.entryPersona,
-                        onToggle: () => composer.current?.focus(),
-                        conversationLabel: `Ask ${SALES.name}`,
-                        onAway: team.setEntryAway,
-                        history: team.entryHistory,
-                        expandTarget: notebookArea,
-                        notebookTitle: `${ACCOUNTING.name}\u2019s notebook`,
-                        suggestions: team.ready && !team.busy ? suggestions : undefined,
-                        onSuggestion: suggestion => send(suggestion.prompt),
-                        inspector,
-                        onStop: team.busy ? team.stop : undefined,
-                        about: {
+                }, children: _jsx(SceneView, { members: sceneMembers, tracer: inspector, emptyText: "Ask Sales: what it says to Accounting, what Accounting reads in Odoo and answers, line by line, shows here.", children: _jsx(A2ATeamGraph, { entry: {
+                            id: SALES.id,
                             name: SALES.name,
-                            spec: `${SALES.id}:${SALES.version}`,
-                            model: SALES.model || undefined,
-                            where: 'in your browser',
-                            description: SALES.description || undefined,
-                        },
-                    }, peer: {
-                        id: ACCOUNTING.id,
-                        name: ACCOUNTING.name,
-                        // Its face as its card says it, once it is reached.
-                        emoji: peer?.face?.emoji ?? ACCOUNTING.emoji,
-                        character: ACCOUNTING.interface.assistant ?? 'wizard',
-                        where: accountingWhere,
-                        persona: team.peerPersona,
-                        onAway: team.setPeerAway,
-                        history: team.peerHistory,
-                        connections: ACCOUNTING_CONNECTIONS,
-                        inspector,
-                        sandbox: accountingSandbox,
-                        about: {
+                            emoji: SALES.emoji,
+                            character: SALES.interface.assistant ?? 'paperclip',
+                            where: salesMember.runsIn === 'browser'
+                                ? 'in your browser'
+                                : 'on a runtime',
+                            persona: team.entryPersona,
+                            onToggle: () => composer.current?.focus(),
+                            conversationLabel: `Ask ${SALES.name}`,
+                            onAway: team.setEntryAway,
+                            history: team.entryHistory,
+                            expandTarget: notebookArea,
+                            notebookTitle: `${ACCOUNTING.name}\u2019s notebook`,
+                            suggestions: team.ready && !team.busy ? suggestions : undefined,
+                            onSuggestion: suggestion => send(suggestion.prompt),
+                            inspector,
+                            onStop: team.busy ? team.stop : undefined,
+                            about: {
+                                name: SALES.name,
+                                spec: `${SALES.id}:${SALES.version}`,
+                                model: SALES.model || undefined,
+                                where: 'in your browser',
+                                description: SALES.description || undefined,
+                            },
+                        }, peer: {
+                            id: ACCOUNTING.id,
                             name: ACCOUNTING.name,
-                            spec: `${ACCOUNTING.id}:${ACCOUNTING.version}`,
-                            model: ACCOUNTING.model || undefined,
+                            // Its face as its card says it, once it is reached.
+                            emoji: peer?.face?.emoji ?? ACCOUNTING.emoji,
+                            character: ACCOUNTING.interface.assistant ?? 'wizard',
                             where: accountingWhere,
-                            // What its A2A card says, once it is reached.
-                            description: peer?.card.description || ACCOUNTING.description || undefined,
-                            skills: peer?.card.skills.map(skill => skill.name),
-                            protocol: peer ? 'a2a' : undefined,
-                            url: peer ? accountingUrl : undefined,
-                        },
-                    }, flow: team.flow, calls: team.calls, 
-                    // Room for the balloons: suggestions, *more* and a notebook.
-                    balloonRoom: 320, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }), _jsx(Box, { ref: notebookArea, sx: { mb: team.notebook ? 3 : 0 }, "data-team-notebook-placement": "under-graph" }), _jsx(Box, { sx: {
+                            persona: team.peerPersona,
+                            onAway: team.setPeerAway,
+                            history: team.peerHistory,
+                            connections: ACCOUNTING_CONNECTIONS,
+                            inspector,
+                            sandbox: accountingSandbox,
+                            about: {
+                                name: ACCOUNTING.name,
+                                spec: `${ACCOUNTING.id}:${ACCOUNTING.version}`,
+                                model: ACCOUNTING.model || undefined,
+                                where: accountingWhere,
+                                // What its A2A card says, once it is reached.
+                                description: peer?.card.description || ACCOUNTING.description || undefined,
+                                skills: peer?.card.skills.map(skill => skill.name),
+                                protocol: peer ? 'a2a' : undefined,
+                                url: peer ? accountingUrl : undefined,
+                            },
+                        }, flow: team.flow, calls: team.calls, 
+                        // Room for the balloons: suggestions, *more* and a notebook.
+                        balloonRoom: 320, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }) }), _jsx(Box, { ref: notebookArea, sx: { mb: team.notebook ? 3 : 0 }, "data-team-notebook-placement": "under-graph" }), _jsx(Box, { sx: {
                     display: 'grid',
                     gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'],
                     gap: 3,
                     mb: 3,
-                }, "data-team-inspectors": "", children: [SALES, ACCOUNTING].map(member => (_jsxs(Box, { sx: { minWidth: 0 }, "data-team-inspector": member.id, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: [member.emoji, " ", member.name, "\u2019s Agent Inspector"] }), _jsx(AgentInspector, { sink: inspector, agent: member.name, maxHeight: 360, exportName: `agent-inspector-${member.id}`, emptyText: member === SALES
-                                ? 'Its model turns, its call to Accounting and the A2A messages it sends and receives show here.'
-                                : 'What it receives over A2A, its Odoo MCP calls and what it sends back show here.' })] }, member.id))) }), _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] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: ["Or choose one of ", SALES.name, "\u2019s suggestions in its balloon."] }), _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 => {
+                }, "data-team-inspectors": "", children: [SALES, ACCOUNTING].map(member => (_jsxs(Box, { sx: { minWidth: 0 }, "data-team-inspector": member.id, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: [member.emoji, " ", member.name, "\u2019s Agent Inspector"] }), _jsx(AgentInspector, { tracer: inspector, agent: member.name, compact: true, maxHeight: 360, exportName: `agent-inspector-${member.id}`, emptyText: member === SALES
+                                ? 'Its model turns, its call to Accounting and the A2A requests it sends, with what came back, show here.'
+                                : 'The A2A requests sent to it, its Odoo MCP calls and what it sends back show here.' })] }, member.id))) }), _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] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: ["Or choose one of ", SALES.name, "\u2019s suggestions in its balloon."] }), _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();
                                         send(draft);

package/lib/examples/AssistantExample.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * and so are the characters clippy.js publishes, fetched when picked.
  */
 import { useEffect, useRef, useState } from 'react';
-import { useAgentInspector } from '../components/inspector/agentInspector';
+import { useAgentInspector } from '../components/inspector/agentSpans';
 import { buildReactorFromPlugins } from '@datalayer/reactor';
 import { Button, Heading, Text, ToggleSwitch } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
@@ -96,7 +96,7 @@ const AssistantExample = () => {
     // How the balloon shows the conversation (T-23): history, or current.
     const [balloon, setBalloon] = useState('history');
     // What the agent does, for the menu's *Inspect the agent…*.
-    const { sink: inspector } = useAgentInspector();
+    const { tracer: inspector } = useAgentInspector();
     // Pixel, the test sprite, read once through the clippy.js reader.
     const [pixel, setPixel] = useState();
     useEffect(() => {

package/lib/examples/ScenesExample.d.ts

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

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/loop/apps/AppComposer.d.ts

@@ -23,7 +23,8 @@
  *   conversation keeps its profile: the picker says so and picks no other.
  *
  * Given the application as the person reads it (`translatedAppspec`, LOOP
- * P-26), its words are theirs; the composer's own, `language`'s.
+ * P-26), its words are theirs; the composer's own, the chat's language's
+ * (`useChatLanguage`).
  *
  * @module loop/apps/AppComposer
  */

package/lib/loop/apps/AppComposer.js

@@ -28,7 +28,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *   conversation keeps its profile: the picker says so and picks no other.
  *
  * Given the application as the person reads it (`translatedAppspec`, LOOP
- * P-26), its words are theirs; the composer's own, `language`'s.
+ * P-26), its words are theirs; the composer's own, the chat's language's
+ * (`useChatLanguage`).
  *
  * @module loop/apps/AppComposer
  */
@@ -40,8 +41,8 @@ import { useSignalValue } from '@datalayer/reactor/react';
 import { readFile, } from '../../components/a2ui/datalayer/FileUpload';
 import { LoopChatExtras, LoopCommand, LoopRunProps, LoopSlots, } from '../core';
 import { commandPrompt, modeChoice, modeDefaults, profileChoice, startersFor, } from './composer';
-import { DEFAULT_LANGUAGE } from './appspec';
 import { interfaceWords } from './language';
+import { useChatLanguage } from '../../chat/ChatLanguage';
 import { uploadsAccept, uploadsInWords, uploadsRefusal } from './uploads';
 /**
  * Files chosen in the composer, held for the next message: the refusal the
@@ -89,7 +90,6 @@ export const needsAppComposer = (app) => (app.interface.commands ?? []).length >
  * Nothing for an application with none: its plugin contributes nothing.
  */
 export function defineAppComposerPlugin(app) {
-    const words = interfaceWords(app.interface.language ?? DEFAULT_LANGUAGE);
     const profiles = app.interface.profiles ?? [];
     /** The profile picked, and whether the conversation has started with it. */
     const profile = signal(profileChoice(app)?.id);
@@ -98,6 +98,8 @@ export function defineAppComposerPlugin(app) {
         openers: startersAsOpeners(startersFor(app, profile.value)),
     }));
     function ProfilePicker() {
+        // In the chat's language, as the chat's own words (P-26).
+        const words = interfaceWords(useChatLanguage());
         const now = profileChoice(app, useSignalValue(profile));
         const kept = useSignalValue(started);
         if (!now) {
@@ -131,6 +133,7 @@ export function defineAppComposerPlugin(app) {
     /** The files held for the next message, and the last refusal (P-21). */
     const held = signal({ files: [], refused: null });
     function Attach() {
+        const words = interfaceWords(useChatLanguage());
         const now = useSignalValue(held);
         const input = useRef(null);
         if (!uploads) {

package/lib/loop/apps/AppRenderer.d.ts

@@ -176,7 +176,8 @@ export type AppPreset = {
  *   whose contributions are the blocks it may draw (R-01b); a thumb and a
  *   comment on each answer when its record keeps feedback (V-18); its
  *   commands in the composer's `/` menu and its modes beside it (P-19); the
- *   side panel and the pages its code opens (`app-elements`, P-18); what it
+ *   side panel and the pages its code opens (`app-elements`, P-18); the
+ *   components its developer wrote (`app-components`, P-17); what it
  *   keeps and for how long, under its prompt before the first message, when
  *   `kept` says it (R-31); with
  *   `sidebar`, its rules and approvals card, its activity feed and its