@datalayer/agent-runtimes 1.3.114 → 1.5.0

package/lib/apps/embed/hostBridge.js

@@ -2,6 +2,54 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+/**
+ * The host page and an embedded application, talking (LOOP D-10).
+ *
+ * In: the values the page passes — `user`, `page`, or names of its own —
+ * read by the application's agent with the tool `host_context`, only those
+ * its Appspec names (`deployment.embedded.host.context`).
+ *
+ * Out: what the application does, as events — `message` when it has said
+ * something, `action` when it called a function of the page,
+ * `window-message` when its code told the page something outside the
+ * conversation (LOOP P-25, `session.send_window_message`) — beside the
+ * `decision` and `token-expired` the element raises already.
+ *
+ * Window messages, in (P-25): the page posts one with
+ * `element.postWindowMessage(data)`; its code's `@app.window` reads it, on
+ * the host's own server (`server`), and what it answers comes back as
+ * `window-message` events.
+ *
+ * Who its user is (LOOP D-21): what the page says as `user` is a claim.
+ * An application whose Appspec says `deployment.embedded.host.user: signed`
+ * takes only a token the host's **server** signed with the deployment's
+ * secret (HS256: `sub`, `name`, `exp` at most an hour away), which the page
+ * hands over as `userToken` (the element's `user-token`). It goes with every
+ * run as `forwardedProps.loop.user_token` (`hostUserRunProps`); the runtime
+ * verifies it where the session opens, refuses the session without it, and
+ * answers `host_context`'s `user` with the user it names. The secret never
+ * reaches the page.
+ *
+ * Offered: the functions of the page its Appspec names
+ * (`deployment.embedded.host.functions`), as Reactor has a plugin offer
+ * what it does (REACTOR_UI RU-7): each a **command** of the host's plugin,
+ * `host.<name>` (`host.context` for the values it passes), and the plugin's
+ * **agent tools** bundle (`AgentTools`, id `host`) naming them for its agent
+ * as the tools `host_<name>` and `host_context` — which the chat turns into
+ * tools that run `reactor.executeCommand`, as for any plugin's bundle, and
+ * hands its agent wherever it runs (`agentToolBundles`). Every one of these
+ * commands is decided in the page by the rule that names its tool
+ * (`behaviourFor`), before the page is called: one no rule names, or
+ * *leave it to me*, is refused; *ask me first* and *do it if I asked* ask
+ * the person on the page (`ask`, else the browser's `confirm`), and a call
+ * they do not allow is refused; *do it* is done.
+ *
+ * Pure: the commands call the page, and ask, through what they are given.
+ *
+ * @module apps/embed/hostBridge
+ */
+import { AgentTools, contribution, defineAgentTools, definePlugin, signal, } from '@datalayer/reactor';
+import { LoopChatExtras, } from '../core';
 import { behaviourFor } from '../apps/rules';
 import { HOST_CONTEXT_TOOL, HOST_NAME, hostTool, hostToolsOf, signedUser, } from '../apps/hostTools';
 export { HOST_CONTEXT_TOOL, HOST_NAME, hostTool, hostToolsOf, signedUser };
@@ -15,26 +63,33 @@ const confirmOnPage = (question) => typeof window !== 'undefined' && typeof wind
     : false;
 /** The words of the rule that names the tool, for the question. */
 const actionOf = (app, tool) => app.rules.find(rule => rule.appliesTo.includes(tool))?.action;
+/** The command that reads what the page passes (`host_context`). */
+export const HOST_CONTEXT_COMMAND = 'host.context';
+/** The command a function of the page runs as. */
+export const hostCommand = (name) => `host.${name}`;
+/** The id of the host plugin's agent tools bundle. */
+export const HOST_TOOLS_BUNDLE = 'host';
 /**
- * The frontend tools its agent is given for the page: `host_context` when
- * the Appspec names values, and `host_<name>` for each function it names.
- * `host` is read at each call, so that what the page passes is the newest.
+ * The host plugin's commands (REACTOR_UI RU-7): `host.context` when the
+ * Appspec names values, and `host.<name>` for each function it names, each
+ * decided by the rule naming its tool before the page is called. `host` is
+ * read at each call, so that what the page passes is the newest.
  */
-export function hostFrontendTools(app, host) {
+export function hostCommands(app, host) {
     const bridge = app.deployment.embedded?.host;
     if (!bridge) {
         return [];
     }
     const behaviour = (tool) => behaviourFor(app, tool);
     const ruled = (tool) => behaviour(tool) !== 'leave_to_me';
-    const tools = [];
+    const commands = [];
     if (bridge.context.length > 0) {
-        tools.push({
-            name: HOST_CONTEXT_TOOL,
-            description: `What the page you are embedded in says of its visitor and of itself: ${bridge.context.join(', ')}. Read it before answering what depends on them.`,
-            parameters: { type: 'object', properties: {} },
-            location: 'frontend',
-            handler: async () => {
+        commands.push({
+            id: HOST_CONTEXT_COMMAND,
+            name: `What the page says to ${app.name}`,
+            description: `Read ${bridge.context.join(', ')} from the page.`,
+            category: 'Host',
+            execute: async () => {
                 if (!ruled(HOST_CONTEXT_TOOL)) {
                     return { error: hostRefused(HOST_CONTEXT_TOOL) };
                 }
@@ -55,12 +110,13 @@ export function hostFrontendTools(app, host) {
     }
     for (const fn of bridge.functions) {
         const tool = hostTool(fn.name);
-        tools.push({
-            name: tool,
-            description: fn.description,
-            parameters: fn.parameters,
-            location: 'frontend',
-            handler: async (args) => {
+        commands.push({
+            id: hostCommand(fn.name),
+            name: fn.description,
+            description: `The page's ${fn.name}.`,
+            category: 'Host',
+            execute: async (given) => {
+                const args = given ?? {};
                 const said = (detail) => {
                     host().onEvent?.({
                         type: 'action',
@@ -100,7 +156,68 @@ export function hostFrontendTools(app, host) {
             },
         });
     }
-    return tools;
+    return commands;
+}
+/**
+ * The host plugin's agent tools (REACTOR_UI RU-7): `host_context` and
+ * `host_<name>`, each running its command; `null` for an application the
+ * Appspec embeds with no host bridge.
+ */
+export function hostAgentTools(app) {
+    const bridge = app.deployment.embedded?.host;
+    if (!bridge) {
+        return null;
+    }
+    return defineAgentTools({
+        id: HOST_TOOLS_BUNDLE,
+        name: `The page ${app.name} is embedded in`,
+        description: 'What the host page passes, and the functions it offers.',
+        commands: [
+            ...(bridge.context.length > 0
+                ? [
+                    {
+                        name: HOST_CONTEXT_TOOL,
+                        command: HOST_CONTEXT_COMMAND,
+                        description: `What the page you are embedded in says of its visitor and of itself: ${bridge.context.join(', ')}. Read it before answering what depends on them.`,
+                        parameters: { type: 'object', properties: {} },
+                    },
+                ]
+                : []),
+            ...bridge.functions.map(fn => ({
+                name: hostTool(fn.name),
+                command: hostCommand(fn.name),
+                description: fn.description,
+                parameters: fn.parameters,
+            })),
+        ],
+    });
+}
+/**
+ * The host's plugin (REACTOR_UI RU-7): its commands, its agent tools bundle,
+ * and the chat extras that hand the bundle to the chat's agent wherever it
+ * runs. `null` for an application with no host bridge.
+ */
+export function hostPlugin(app, host) {
+    const bundle = hostAgentTools(app);
+    if (!bundle) {
+        return null;
+    }
+    const extras = {
+        id: `host-${app.id}`,
+        extras: signal({ agentToolBundles: [bundle.id] }),
+    };
+    return definePlugin({
+        name: `loop-host-${app.id}`,
+        displayName: `${app.name}: its host page`,
+        description: `The values the page passes ${app.name} and the functions it offers, as commands and agent tools.`,
+        octicon: 'browser',
+        emoji: '\u{1F310}',
+        commands: hostCommands(app, host),
+        contributes: [
+            contribution(AgentTools, bundle, { id: bundle.id }),
+            contribution(LoopChatExtras, extras, { id: extras.id }),
+        ],
+    });
 }
 /**
  * What goes with every run for the host's user (LOOP D-21): the token the

package/lib/apps/index.d.ts

@@ -70,7 +70,7 @@ export { PromptPlugin, PROMPT_PLUGIN_NAME } from './plugins/prompt';
 export { LoopEmbed, type LoopEmbedProps } from './embed/LoopEmbed';
 export { AppEmbed, AppFloating, embedAssistantCharacter, type AppEmbedProps, type AppFloatingProps, type EmbedSession, useEmbedSession, useHostBridge, } from './embed/AppEmbed';
 export { EMBED_SESSION_KEY_PREFIX, embedSessionKey, visitOfToken, } from './embed/embedSession';
-export { HOST_CONTEXT_TOOL, hostFrontendTools, hostNotAllowed, hostRefused, hostTool, hostToolsOf, hostUserRunProps, fetchUserToken, signedUser, type SignedUserToken, type AppEmbedHost, type HostEvent, type HostFunction, type HostQuestion, } from './embed/hostBridge';
+export { HOST_CONTEXT_COMMAND, HOST_CONTEXT_TOOL, HOST_TOOLS_BUNDLE, hostAgentTools, hostCommand, hostCommands, hostPlugin, hostNotAllowed, hostRefused, hostTool, hostToolsOf, hostUserRunProps, fetchUserToken, signedUser, type SignedUserToken, type AppEmbedHost, type HostEvent, type HostFunction, type HostQuestion, } from './embed/hostBridge';
 export { defineDatalayerAppElement, type DatalayerAppElementOptions, } from './embed/element';
 export { EMBED_ATTRIBUTES, EMBED_HOST_VARIABLES, EMBED_TAG, embedLookOf, embedSnippetOf, floatingViewOf, languageOf, resumeOf, type EmbedLook, type EmbedSnippetOptions, } from './embed/embedConfig';
 export { SubagentActivityPlugin, SubagentPulse, SUBAGENT_ACTIVITY_PLUGIN_NAME, } from './plugins/subagent-activity';

package/lib/apps/index.js

@@ -91,7 +91,7 @@ export { LoopEmbed } from './embed/LoopEmbed';
 export { AppEmbed, AppFloating, embedAssistantCharacter, useEmbedSession, useHostBridge, } from './embed/AppEmbed';
 export { EMBED_SESSION_KEY_PREFIX, embedSessionKey, visitOfToken, } from './embed/embedSession';
 // The host page and an embedded application, talking (LOOP D-10).
-export { HOST_CONTEXT_TOOL, hostFrontendTools, hostNotAllowed, hostRefused, hostTool, hostToolsOf, hostUserRunProps, fetchUserToken, signedUser, } from './embed/hostBridge';
+export { HOST_CONTEXT_COMMAND, HOST_CONTEXT_TOOL, HOST_TOOLS_BUNDLE, hostAgentTools, hostCommand, hostCommands, hostPlugin, hostNotAllowed, hostRefused, hostTool, hostToolsOf, hostUserRunProps, fetchUserToken, signedUser, } from './embed/hostBridge';
 export { defineDatalayerAppElement, } from './embed/element';
 export { EMBED_ATTRIBUTES, EMBED_HOST_VARIABLES, EMBED_TAG, embedLookOf, embedSnippetOf, floatingViewOf, languageOf, resumeOf, } from './embed/embedConfig';
 export { SubagentActivityPlugin, SubagentPulse, SUBAGENT_ACTIVITY_PLUGIN_NAME, } from './plugins/subagent-activity';

package/lib/apps/plugins/a2ui-surface/AnswerShows.d.ts

@@ -0,0 +1,21 @@
+/**
+ * What an application's answer shows, drawn from its display (LOOP P-04,
+ * REACTOR_UI RU-2): the A2UI surface in its data, and its buttons pressing
+ * only the actions the display offered, each with the token the session
+ * minted for it. The answer under its message and an element in a panel or
+ * a page of its own are drawn by this one view.
+ *
+ * @module apps/plugins/a2ui-surface/AnswerShows
+ */
+import type { JSX } from 'react';
+import type { Display } from '@datalayer/reactor/ui';
+export type AnswerShowsViewProps = {
+    display: Display;
+    /**
+     * Say something as the reader, with what goes with the run besides it;
+     * `false` when the chat cannot take it.
+     */
+    send: (message: string, forwardedProps?: Record<string, unknown>) => boolean;
+};
+export declare function AnswerShowsView({ display, send, }: AnswerShowsViewProps): JSX.Element;
+export default AnswerShowsView;

package/lib/apps/plugins/a2ui-surface/AnswerShows.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Text } from '@primer/react';
+import { InlineSurface, SURFACE_CATALOG_ID } from './InlineSurface';
+import { useOwnCatalog } from './ownComponents';
+import { answerPress, answerSurface } from './toolResult';
+export function AnswerShowsView({ display, send, }) {
+    const parsed = useMemo(() => answerSurface(display, SURFACE_CATALOG_ID), [display]);
+    // With the components the application's developer wrote (LOOP P-17).
+    const catalog = useOwnCatalog();
+    const [said, setSaid] = useState(null);
+    if (!parsed?.messages || parsed.messages.length === 0) {
+        return _jsx(Text, { sx: { color: 'fg.muted' }, children: display.text });
+    }
+    const onAction = (action) => {
+        const pressed = answerPress(display, action);
+        if ('refused' in pressed) {
+            setSaid(pressed.refused);
+            return;
+        }
+        setSaid(send(pressed.message, pressed.forwardedProps)
+            ? null
+            : 'The chat is not ready to take it yet.');
+    };
+    return (_jsx(InlineSurface
+    // Drawn again whole when the code changes it.
+    , { messages: parsed.messages, onAction: onAction, validationError: said, catalog: catalog }, JSON.stringify(display)));
+}
+export default AnswerShowsView;

package/lib/apps/plugins/a2ui-surface/SurfaceToolResult.js

@@ -5,7 +5,7 @@ import { Box } from '@datalayer/primer-addons';
 import { encodeFormSubmission } from '../../../chat/messages/formSubmission';
 import { InlineSurface, SURFACE_CATALOG_ID } from './InlineSurface';
 import { useOwnCatalog } from './ownComponents';
-import { answerAction, readA2uiToolResult, validateA2uiSubmission, } from './toolResult';
+import { readA2uiToolResult, validateA2uiSubmission, } from './toolResult';
 export function SurfaceToolResult({ context, send, onRendered, onSubmitted, }) {
     const parsed = useMemo(() => context.status === 'complete'
         ? readA2uiToolResult(context.result, SURFACE_CATALOG_ID)
@@ -30,12 +30,9 @@ export function SurfaceToolResult({ context, send, onRendered, onSubmitted, }) {
     }, [parsed, context.toolCallId]);
     const handleAction = useCallback((action) => {
         if (action.name !== 'submit_a2ui_form') {
-            // A button of what an application's answer shows: its action goes to
-            // the application, as a button of its page does (LOOP P-04).
-            const pressed = answerAction(action);
-            if (pressed && !send(pressed.message, pressed.forwardedProps)) {
-                setValidationError('The chat is not ready to take it yet.');
-            }
+            // A tool's surface submits its form, and nothing else: the buttons
+            // of what an application's answer shows are its display's
+            // (`AnswerShowsView`, REACTOR_UI RU-2).
             return;
         }
         const values = (action.context ?? {});

package/lib/apps/plugins/a2ui-surface/index.d.ts

@@ -32,5 +32,6 @@ export declare function createA2uiSurfacePlugin(options?: A2uiSurfacePluginOptio
 /** The instance the preset mounts: no host callbacks. */
 export declare const A2uiSurfacePlugin: ReactorPlugin<Record<string, never>, unknown, unknown>;
 export type { SurfaceRendered, SurfaceSubmitted } from './SurfaceToolResult';
-export { answerAction, readA2uiToolResult, validateA2uiField, validateA2uiSubmission, type A2uiFieldRule, type A2uiToolResult, } from './toolResult';
+export { AnswerShowsView } from './AnswerShows';
+export { ANSWER_DISPLAY_TYPE, answerPress, answerSurface, readA2uiToolResult, validateA2uiField, validateA2uiSubmission, type A2uiFieldRule, type A2uiToolResult, type AnswerPress, } from './toolResult';
 export default A2uiSurfacePlugin;

package/lib/apps/plugins/a2ui-surface/index.js

@@ -5,6 +5,8 @@ import { Renderers, ToolBindings } from '@datalayer/reactor/ui';
 import { defineRenderer, } from '@datalayer/reactor/ui/react';
 import { AGENTSPECS } from '../../../specs/agents';
 import { LoopSlots } from '../../core';
+import { AnswerShowsView } from './AnswerShows';
+import { ANSWER_DISPLAY_TYPE } from './toolResult';
 import { SurfaceToolResult, } from './SurfaceToolResult';
 export const A2UI_SURFACE_PLUGIN_NAME = '@datalayer/loop-plugin-a2ui-surface';
 /** The renderer name a spec binds a tool to. */
@@ -74,6 +76,11 @@ export function createA2uiSurfacePlugin(options = {}) {
         }
         return (_jsx(SurfaceToolResult, { context: context, send: send, onRendered: options.onRendered, onSubmitted: options.onSubmitted }, context.toolCallId));
     }
+    // What an application's answer shows (REACTOR_UI RU-2): its buttons press
+    // what the display offered, through the workspace's chat.
+    function Answer({ display }) {
+        return _jsx(AnswerShowsView, { display: display, send: send });
+    }
     const plugin = definePlugin({
         name: counter === 1
             ? A2UI_SURFACE_PLUGIN_NAME
@@ -89,6 +96,7 @@ export function createA2uiSurfacePlugin(options = {}) {
                 // A host's own instance, with its callbacks, over the preset's.
                 rank: options.onRendered || options.onSubmitted ? 1 : 0,
             }), { id }),
+            contribution(Renderers, defineRenderer({ type: ANSWER_DISPLAY_TYPE, component: Answer }), { id: `${id}:answer` }),
             ...[...surfaceToolNames()].map(tool => contribution(ToolBindings, { tool, type: A2UI_SURFACE_TYPE }, { id: `${id}:${tool}` })),
         ],
         build() {
@@ -103,5 +111,6 @@ export function createA2uiSurfacePlugin(options = {}) {
 }
 /** The instance the preset mounts: no host callbacks. */
 export const A2uiSurfacePlugin = createA2uiSurfacePlugin();
-export { answerAction, readA2uiToolResult, validateA2uiField, validateA2uiSubmission, } from './toolResult';
+export { AnswerShowsView } from './AnswerShows';
+export { ANSWER_DISPLAY_TYPE, answerPress, answerSurface, readA2uiToolResult, validateA2uiField, validateA2uiSubmission, } from './toolResult';
 export default A2uiSurfacePlugin;

package/lib/apps/plugins/a2ui-surface/toolResult.d.ts

@@ -8,6 +8,7 @@
  * @module apps/plugins/a2ui-surface/toolResult
  */
 import type { A2uiMessage } from '@a2ui/web_core/v0_9';
+import type { Display } from '@datalayer/reactor/ui';
 export type A2uiRequiredField = {
     id: string;
     label: string;
@@ -50,10 +51,13 @@ export declare function isEmptyA2uiValue(value: unknown): boolean;
 export declare function validateA2uiField(rule: A2uiFieldRule, value: unknown): string | null;
 /** Every rule's complaint about a submission; empty when it passes. */
 export declare function validateA2uiSubmission(rules: A2uiFieldRule[], values: Record<string, unknown>): string[];
-/** Where the surface of what an application's answer shows is named (LOOP P-04). */
-export declare const ANSWER_SURFACE_PREFIX = "answer-";
-/** A button pressed on an answer's surface, as the chat sends it on. */
-export type AnswerAction = {
+/**
+ * The display type of what an application's answer shows (LOOP P-04,
+ * REACTOR_UI RU-2): `AnswerShows` in `agent_runtimes.loop.apps.components`.
+ */
+export declare const ANSWER_DISPLAY_TYPE = "application/vnd.datalayer.loop.answer+json";
+/** A button pressed on what an answer shows, as the chat sends it on. */
+export type AnswerPress = {
     /** The person's turn, in words: the action's name. */
     message: string;
     /** What the session API reads besides the message (`forwardedProps.loop`). */
@@ -61,19 +65,24 @@ export type AnswerAction = {
         loop: {
             action: {
                 name: string;
+                display_id: string;
+                token: string;
                 payload: Record<string, unknown>;
             };
         };
     };
 };
+/** The A2UI surface an answer's display draws, or `null` for a display that has none. */
+export declare function answerSurface(display: Display, catalogId: string): A2uiToolResult | null;
 /**
- * What a button pressed on the surface an application's answer shows sends:
- * its action, by name, with what it read — the application's code reacts
- * with its `@app.action(name)`, as to a button of its page. `null` for any
- * other surface, whose buttons stay the agent's form submission.
+ * What a button pressed on what an answer shows sends: the action the
+ * display offered under that name, with its token and what the button read
+ * — the application's code reacts with its `@app.action(name)`. A button
+ * whose action the display did not offer sends nothing: the sentence why.
  */
-export declare function answerAction(action: {
+export declare function answerPress(display: Display, action: {
     name: string;
-    surfaceId: string;
     context?: Record<string, unknown>;
-}): AnswerAction | null;
+}): AnswerPress | {
+    refused: string;
+};

package/lib/apps/plugins/a2ui-surface/toolResult.js

@@ -104,24 +104,40 @@ export function validateA2uiSubmission(rules, values) {
         .map(rule => validateA2uiField(rule, values[rule.id]))
         .filter((message) => message !== null);
 }
-/** Where the surface of what an application's answer shows is named (LOOP P-04). */
-export const ANSWER_SURFACE_PREFIX = 'answer-';
 /**
- * What a button pressed on the surface an application's answer shows sends:
- * its action, by name, with what it read — the application's code reacts
- * with its `@app.action(name)`, as to a button of its page. `null` for any
- * other surface, whose buttons stay the agent's form submission.
+ * The display type of what an application's answer shows (LOOP P-04,
+ * REACTOR_UI RU-2): `AnswerShows` in `agent_runtimes.loop.apps.components`.
  */
-export function answerAction(action) {
-    if (!action.surfaceId.startsWith(ANSWER_SURFACE_PREFIX) ||
-        !action.name.trim()) {
+export const ANSWER_DISPLAY_TYPE = 'application/vnd.datalayer.loop.answer+json';
+/** The A2UI surface an answer's display draws, or `null` for a display that has none. */
+export function answerSurface(display, catalogId) {
+    if (display.type !== ANSWER_DISPLAY_TYPE) {
         return null;
     }
+    return readA2uiToolResult(display.data?.surface, catalogId);
+}
+/**
+ * What a button pressed on what an answer shows sends: the action the
+ * display offered under that name, with its token and what the button read
+ * — the application's code reacts with its `@app.action(name)`. A button
+ * whose action the display did not offer sends nothing: the sentence why.
+ */
+export function answerPress(display, action) {
+    const name = action.name.trim();
+    const offer = (display.actions ?? []).find(one => one.name === name);
+    if (!offer) {
+        return { refused: `“${name || 'This button'}” was not offered here.` };
+    }
     return {
-        message: action.name.trim(),
+        message: name,
         forwardedProps: {
             loop: {
-                action: { name: action.name.trim(), payload: { ...action.context } },
+                action: {
+                    name,
+                    display_id: display.id,
+                    token: offer.token,
+                    payload: { ...action.context },
+                },
             },
         },
     };

package/lib/apps/plugins/app-components/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * `app-components` — the components an application's developer wrote (LOOP
  * P-17), registered as that application's A2UI contributions: each a block
- * of its Canvas's palette (`loop.canvas.block`, as a UI plugin's components
+ * of its Canvas's palette (`loop.canvas.block`, as a UI's components
  * are) and a renderer of the catalog its page, its elements and its answers
  * are drawn with (`loop.a2ui.component`). One plugin per application, in its
  * workspace's preset only: the catalog grows for it, it does not open.

package/lib/apps/plugins/app-components/index.js

@@ -5,7 +5,7 @@
 /**
  * `app-components` — the components an application's developer wrote (LOOP
  * P-17), registered as that application's A2UI contributions: each a block
- * of its Canvas's palette (`loop.canvas.block`, as a UI plugin's components
+ * of its Canvas's palette (`loop.canvas.block`, as a UI's components
  * are) and a renderer of the catalog its page, its elements and its answers
  * are drawn with (`loop.a2ui.component`). One plugin per application, in its
  * workspace's preset only: the catalog grows for it, it does not open.
@@ -43,7 +43,7 @@ export function defineAppComponentsPlugin(app, fetcher) {
         contributes: own.flatMap(component => [
             contribution(LoopCanvasBlock, {
                 id: component.name,
-                uiPlugin: `app:${app.id}`,
+                ui: `app:${app.id}`,
                 component: customComponentEntry(component, app.version),
             }, { id: component.name }),
             contribution(LoopA2uiComponent, {

package/lib/apps/plugins/app-elements/AppElements.d.ts

@@ -1,9 +1,9 @@
 /**
  * The elements an application's code opened beside the conversation (LOOP
  * P-18): a side panel on the trailing edge, and a page of its own over the
- * workspace — each drawn from the same A2UI surface an answer is drawn from
- * (`InlineSurface`), its buttons sent to the application's actions as an
- * answer's are (`answerAction`), and closed with its own button.
+ * workspace — each drawn from its display as an answer is (`AnswerShowsView`),
+ * its buttons pressing the actions the display offered, and closed with its
+ * own button.
  *
  * Drawn from the workspace's root slot, positioned against the workspace:
  * nothing is drawn, and nothing is laid out, while nothing is open.

package/lib/apps/plugins/app-elements/AppElements.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useSyncExternalStore } from 'react';
+import { useSyncExternalStore } from 'react';
 import { IconButton, Text } from '@primer/react';
 import { XIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { closeLoopElement, onLoopElements, openLoopElements, } from '../../../chat/base/loopElement';
-import { InlineSurface, SURFACE_CATALOG_ID, } from '../a2ui-surface/InlineSurface';
-import { answerAction, readA2uiToolResult } from '../a2ui-surface/toolResult';
-import { useOwnCatalog } from '../a2ui-surface/ownComponents';
+import { AnswerShowsView } from '../a2ui-surface/AnswerShows';
 /** How wide the side panel is, at most. */
 export const APP_PANEL_WIDTH = 380;
 /** What is open now: the panels in the order they opened, and the last page. */
@@ -18,22 +16,9 @@ export function elementsByPlace(open) {
     };
 }
 function ElementBody({ element, send, }) {
-    const parsed = useMemo(() => readA2uiToolResult(element.shows, SURFACE_CATALOG_ID), [element.shows]);
-    // With the components its developer wrote (P-17).
-    const catalog = useOwnCatalog();
-    const onAction = (action) => {
-        // A button of what its code shows: its action goes to the application,
-        // as a button of an answer does (LOOP P-04).
-        const pressed = answerAction(action);
-        if (pressed)
-            send?.(pressed.message, pressed.forwardedProps);
-    };
-    if (!parsed?.messages || parsed.messages.length === 0) {
-        return _jsx(Text, { sx: { color: 'fg.muted' }, children: "Nothing to show." });
-    }
-    return (_jsx(InlineSurface
-    // Drawn again whole when the code changes it.
-    , { messages: parsed.messages, onAction: onAction, catalog: catalog }, JSON.stringify(element.shows)));
+    // What its code shows, drawn as an answer's display is: its buttons press
+    // what the display offered (LOOP P-04, REACTOR_UI RU-2).
+    return (_jsx(AnswerShowsView, { display: element.shows, send: (message, forwardedProps) => send !== undefined && !send(message, forwardedProps) }));
 }
 function ElementHeader({ element }) {
     return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mb: 2, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'bold', m: 0 }, children: element.title }), _jsx(IconButton, { icon: XIcon, variant: "invisible", size: "small", "aria-label": `Close ${element.title}`, onClick: () => closeLoopElement(element.id) })] }));

package/lib/apps/plugins/app-elements/QuestionView.d.ts

@@ -0,0 +1,30 @@
+/**
+ * What an application's code asks, drawn from its display (REACTOR_UI
+ * RU-4): `application/vnd.datalayer.loop.question+json`, shown under the
+ * message that asks it in words. A choice is its buttons — a rule's prompt
+ * is Allow and Refuse — the words a field, a form its fields; each press of
+ * it is `reactor.answer`, through the display's `act`, which the chat sends
+ * up the conversation's ui socket. A file is chosen here, uploaded first
+ * through the display's `upload`, and its ref is the answer (RU-6): its
+ * bytes never ride in the press. Answered, it says what answered it, and
+ * offers nothing.
+ *
+ * @module apps/plugins/app-elements/QuestionView
+ */
+import type { JSX } from 'react';
+import { type Display } from '@datalayer/reactor/ui';
+import type { RendererProps } from '@datalayer/reactor/ui/react';
+/** The display type of what an application's code asks (`QuestionShown`). */
+export declare const QUESTION_DISPLAY_TYPE = "application/vnd.datalayer.loop.question+json";
+/** A question as its display says it. Throws for a display that is not one. */
+export declare function questionOf(display: Display): {
+    kind: 'text' | 'choice' | 'file' | 'form';
+    prompt: string;
+    options: string[];
+    accept: string[];
+    form: Record<string, unknown>;
+    answered: string | null;
+    answerable: boolean;
+};
+export declare function QuestionView({ display, act, upload, }: RendererProps): JSX.Element;
+export default QuestionView;

package/lib/apps/plugins/app-elements/QuestionView.js

@@ -0,0 +1,70 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { lazy, Suspense, useState } from 'react';
+import { Box, Button, Text, TextInput } from '@primer/react';
+import { ANSWER_ACTION } from '@datalayer/reactor/ui';
+/** The display type of what an application's code asks (`QuestionShown`). */
+export const QUESTION_DISPLAY_TYPE = 'application/vnd.datalayer.loop.question+json';
+const SchemaForm = lazy(() => import('../../../components/a2ui/datalayer/SchemaForm'));
+/** A question as its display says it. Throws for a display that is not one. */
+export function questionOf(display) {
+    const data = display.data ?? {};
+    const kind = data.kind;
+    if (display.type !== QUESTION_DISPLAY_TYPE ||
+        (kind !== 'text' &&
+            kind !== 'choice' &&
+            kind !== 'file' &&
+            kind !== 'form') ||
+        typeof data.prompt !== 'string') {
+        throw new Error(`Display ${display.id} is not a question`);
+    }
+    const strings = (value) => Array.isArray(value)
+        ? value.filter((item) => typeof item === 'string')
+        : [];
+    return {
+        kind,
+        prompt: data.prompt,
+        options: strings(data.options),
+        accept: strings(data.accept),
+        form: data.form && typeof data.form === 'object'
+            ? data.form
+            : {},
+        answered: typeof data.answered === 'string' ? data.answered : null,
+        answerable: (display.actions ?? []).some(offer => offer.name === ANSWER_ACTION),
+    };
+}
+export function QuestionView({ display, act, upload, }) {
+    const question = questionOf(display);
+    const [words, setWords] = useState('');
+    const [said, setSaid] = useState(null);
+    const answer = (value) => {
+        if (!act) {
+            setSaid('The chat cannot take an answer here.');
+            return;
+        }
+        setSaid(null);
+        void Promise.resolve(act({ action: ANSWER_ACTION, payload: { value } })).catch((failure) => setSaid(failure instanceof Error ? failure.message : String(failure)));
+    };
+    if (question.answered !== null) {
+        return (_jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: ["Answered: ", question.answered] }));
+    }
+    const live = question.answerable && !!act;
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, "data-question-kind": question.kind, children: [question.kind === 'choice' ? (_jsx(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: question.options.map(option => (_jsx(Button, { size: "small", disabled: !live, onClick: () => answer(option), children: option }, option))) })) : null, question.kind === 'text' ? (_jsxs(Box, { as: "form", display: "flex", gap: 2, onSubmit: (event) => {
+                    event.preventDefault();
+                    if (words.trim())
+                        answer(words.trim());
+                }, children: [_jsx(TextInput, { "aria-label": question.prompt, value: words, disabled: !live, onChange: event => setWords(event.target.value) }), _jsx(Button, { type: "submit", size: "small", disabled: !live || !words.trim(), children: "Answer" })] })) : null, question.kind === 'form' ? (_jsx(Suspense, { fallback: null, children: _jsx(SchemaForm, { schema: question.form, disabled: !live, onSubmit: ({ formData }) => answer(formData ?? {}) }) })) : null, question.kind === 'file' ? (_jsx("input", { type: "file", "aria-label": question.prompt, accept: question.accept.join(',') || undefined, disabled: !live || !upload, onChange: event => {
+                    const chosen = event.target.files?.[0];
+                    if (!chosen)
+                        return;
+                    if (!upload) {
+                        setSaid('The chat cannot take a file here.');
+                        return;
+                    }
+                    setSaid(null);
+                    // Uploaded first: the answer is its ref (REACTOR_UI RU-6).
+                    void upload(chosen)
+                        .then(ref => answer(ref))
+                        .catch((failure) => setSaid(failure instanceof Error ? failure.message : String(failure)));
+                } })) : null, said ? (_jsx(Text, { as: "p", sx: { color: 'danger.fg', fontSize: 1, m: 0 }, children: said })) : null] }));
+}
+export default QuestionView;