@datalayer/agent-runtimes 1.3.114 → 1.4.0

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,28 @@
+/**
+ * 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 attached in the composer (until
+ * RU-6). 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 }: RendererProps): JSX.Element;
+export default QuestionView;

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

@@ -0,0 +1,57 @@
+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 }) {
+    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' ? (_jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: ["Attach the file in the message box", question.accept.length ? ` (${question.accept.join(', ')})` : '', "."] })) : null, said ? (_jsx(Text, { as: "p", sx: { color: 'danger.fg', fontSize: 1, m: 0 }, children: said })) : null] }));
+}
+export default QuestionView;

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

@@ -5,10 +5,12 @@
  * code (`session.close`) or by the person. Inline, an element is a message,
  * which the chat draws (P-04); this plugin draws the other two.
  *
- * The chat keeps what is open (`chat/base/loopElement`), from the session
- * API's `loop.element` events; this plugin draws it from the workspace's
- * root slot, positioned against the workspace, so that nothing is laid out
- * while nothing is open.
+ * The chat keeps what is open (`chat/base/loopElement`), from the session's
+ * ui socket (REACTOR_UI RU-3, RU-W); this plugin draws it from the
+ * workspace's root slot, positioned against the workspace, so that nothing
+ * is laid out while nothing is open. It also contributes the renderer of
+ * what the code asks (`QuestionView`, RU-4), drawn under the message that
+ * asks it.
  *
  * @module apps/plugins/app-elements
  */
@@ -17,4 +19,5 @@ export declare const APP_ELEMENTS_PLUGIN_NAME = "@datalayer/loop-plugin-app-elem
 /** The plugin that draws an application's side panel and pages. */
 export declare const AppElementsPlugin: ReactorPlugin<Record<string, never>, unknown, unknown>;
 export { AppElements, APP_PANEL_WIDTH, elementsByPlace } from './AppElements';
+export { QUESTION_DISPLAY_TYPE, QuestionView, questionOf, } from './QuestionView';
 export default AppElementsPlugin;

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

@@ -9,17 +9,22 @@
  * code (`session.close`) or by the person. Inline, an element is a message,
  * which the chat draws (P-04); this plugin draws the other two.
  *
- * The chat keeps what is open (`chat/base/loopElement`), from the session
- * API's `loop.element` events; this plugin draws it from the workspace's
- * root slot, positioned against the workspace, so that nothing is laid out
- * while nothing is open.
+ * The chat keeps what is open (`chat/base/loopElement`), from the session's
+ * ui socket (REACTOR_UI RU-3, RU-W); this plugin draws it from the
+ * workspace's root slot, positioned against the workspace, so that nothing
+ * is laid out while nothing is open. It also contributes the renderer of
+ * what the code asks (`QuestionView`, RU-4), drawn under the message that
+ * asks it.
  *
  * @module apps/plugins/app-elements
  */
-import { definePlugin } from '@datalayer/reactor';
+import { contribution, definePlugin, } from '@datalayer/reactor';
+import { Renderers } from '@datalayer/reactor/ui';
+import { defineRenderer } from '@datalayer/reactor/ui/react';
 import { clearLoopElements } from '../../../chat/base/loopElement';
 import { LoopSlots } from '../../core';
 import { AppElements } from './AppElements';
+import { QUESTION_DISPLAY_TYPE, QuestionView } from './QuestionView';
 export const APP_ELEMENTS_PLUGIN_NAME = '@datalayer/loop-plugin-app-elements';
 /** The plugin that draws an application's side panel and pages. */
 export const AppElementsPlugin = definePlugin({
@@ -27,6 +32,9 @@ export const AppElementsPlugin = definePlugin({
     displayName: 'Side panel and pages',
     description: 'What an application opens beside the conversation: a side panel, or a page of its own.',
     octicon: 'sidebar-expand',
+    contributes: [
+        contribution(Renderers, defineRenderer({ type: QUESTION_DISPLAY_TYPE, component: QuestionView }), { id: 'app-elements:question' }),
+    ],
     build: () => ({
         components: [
             {
@@ -40,4 +48,5 @@ export const AppElementsPlugin = definePlugin({
     register: () => clearLoopElements,
 });
 export { AppElements, APP_PANEL_WIDTH, elementsByPlace } from './AppElements';
+export { QUESTION_DISPLAY_TYPE, QuestionView, questionOf, } from './QuestionView';
 export default AppElementsPlugin;

package/lib/apps/plugins/canvas-blocks/index.d.ts

@@ -1,6 +1,6 @@
 /**
- * The Canvas's palette as a contribution point (LOOP C-12): each UI plugin of
- * the catalogue that renders components (`agentspecs/ui-plugins`, C-13) is a
+ * The Canvas's palette as a contribution point (LOOP C-12): each UI of
+ * the catalogue that renders components (`agentspecs/ui`, C-13) is a
  * Reactor plugin contributing its components to `loop.canvas.block`. The
  * palette lists what the enabled plugins contribute, and nothing else; a
  * plugin disabled takes its blocks off it, and an application that uses one
@@ -12,7 +12,7 @@
  * @module apps/plugins/canvas-blocks
  */
 import { type ReactorPlatform, type ReactorPlugin } from '@datalayer/reactor';
-import type { AppSpec, ComponentSpec, UIPluginSpec } from '../../../types/agentspecs';
+import type { AppSpec, ComponentSpec, UISpec } from '../../../types/agentspecs';
 import { LoopCanvasBlock, type CanvasBlockContribution } from '../../core/canvasBlocks';
 /** What is read of a reactor here: its contributions to the point, and who is enabled. */
 type BlocksReader = {
@@ -20,12 +20,12 @@ type BlocksReader = {
         value: CanvasBlockContribution;
     }>;
 };
-/** The name of the Reactor plugin that contributes a UI plugin's blocks. */
-export declare const canvasBlocksPluginName: (uiPlugin: string) => string;
-/** A UI plugin of the catalogue as the Reactor plugin contributing its components as blocks. */
-export declare function uiPluginBlocks(uiPlugin: UIPluginSpec): ReactorPlugin<Record<string, never>, unknown, unknown>;
+/** The name of the Reactor plugin that contributes a UI's blocks. */
+export declare const canvasBlocksPluginName: (ui: string) => string;
+/** A UI of the catalogue as the Reactor plugin contributing its components as blocks. */
+export declare function uiPluginBlocks(ui: UISpec): ReactorPlugin<Record<string, never>, unknown, unknown>;
 /**
- * The plugins of the catalogue's UI plugins that render components and may
+ * The plugins of the catalogue's UI specs that render components and may
  * be named today (`enabled` in the catalogue).
  */
 export declare const CANVAS_BLOCK_PLUGINS: ReactorPlugin<Record<string, never>, unknown, unknown>[];
@@ -35,16 +35,16 @@ export declare const CANVAS_BLOCK_PLUGINS: ReactorPlugin<Record<string, never>,
  */
 export declare function canvasBlocksReactor(disabled?: readonly string[], plugins?: ReactorPlugin<any, any, any>[]): ReactorPlatform;
 /**
- * The palette of an organization: the block plugins of the UI plugins it has
+ * The palette of an organization: the block plugins of the UI specs it has
  * turned off (`plugins_off` in IAM, catalogue ids such as 'a2ui') switched
- * off. A UI plugin of the catalogue that contributes no block takes nothing
+ * off. A UI of the catalogue that contributes no block takes nothing
  * off; an id the catalogue does not have is said by `unknownPluginsOff`.
  */
 export declare function canvasBlocksReactorOf(pluginsOff: readonly string[]): ReactorPlatform;
-/** The ids an organization turns off that no UI plugin of the catalogue has. */
+/** The ids an organization turns off that no UI of the catalogue has. */
 export declare function unknownPluginsOff(pluginsOff: readonly string[]): string[];
 /**
- * What an application's page uses from a UI plugin its organization has
+ * What an application's page uses from a UI its organization has
  * turned off, as its setup notes say it (`blockSetupNotes`, on the palette of
  * `canvasBlocksReactorOf`).
  */
@@ -55,7 +55,7 @@ export declare function canvasBlocksOf(reactor: BlocksReader): ComponentSpec[];
 export declare function componentsUsedBy(app: Pick<AppSpec, 'interface'>): string[];
 /**
  * What an application's page uses that no enabled plugin contributes, as its
- * setup notes say it: one sentence per UI plugin of the catalogue whose
+ * setup notes say it: one sentence per UI of the catalogue whose
  * blocks it uses while its plugin is off. A component the catalogue does not
  * have is not a note but a problem of the instant checks.
  */

package/lib/apps/plugins/canvas-blocks/index.js

@@ -3,8 +3,8 @@
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * The Canvas's palette as a contribution point (LOOP C-12): each UI plugin of
- * the catalogue that renders components (`agentspecs/ui-plugins`, C-13) is a
+ * The Canvas's palette as a contribution point (LOOP C-12): each UI of
+ * the catalogue that renders components (`agentspecs/ui`, C-13) is a
  * Reactor plugin contributing its components to `loop.canvas.block`. The
  * palette lists what the enabled plugins contribute, and nothing else; a
  * plugin disabled takes its blocks off it, and an application that uses one
@@ -16,26 +16,26 @@
  * @module apps/plugins/canvas-blocks
  */
 import { buildReactorFromPlugins, contribution, definePlugin, } from '@datalayer/reactor';
-import { listUIPlugins } from '../../../specs/uiPlugins';
+import { listUI } from '../../../specs/ui';
 import { LoopCanvasBlock, } from '../../core/canvasBlocks';
-/** The name of the Reactor plugin that contributes a UI plugin's blocks. */
-export const canvasBlocksPluginName = (uiPlugin) => `@datalayer/loop-plugin-ui-${uiPlugin}`;
-/** A UI plugin of the catalogue as the Reactor plugin contributing its components as blocks. */
-export function uiPluginBlocks(uiPlugin) {
+/** The name of the Reactor plugin that contributes a UI's blocks. */
+export const canvasBlocksPluginName = (ui) => `@datalayer/loop-plugin-ui-${ui}`;
+/** A UI of the catalogue as the Reactor plugin contributing its components as blocks. */
+export function uiPluginBlocks(ui) {
     return definePlugin({
-        name: canvasBlocksPluginName(uiPlugin.id),
-        displayName: uiPlugin.name,
-        description: `The blocks of ${uiPlugin.name} on the Canvas: ${uiPlugin.components.map(component => component.name).join(', ')}.`,
+        name: canvasBlocksPluginName(ui.id),
+        displayName: ui.name,
+        description: `The blocks of ${ui.name} on the Canvas: ${ui.components.map(component => component.name).join(', ')}.`,
         octicon: 'apps',
-        contributes: uiPlugin.components.map(component => contribution(LoopCanvasBlock, { id: component.id, uiPlugin: uiPlugin.id, component }, { id: component.id })),
+        contributes: ui.components.map(component => contribution(LoopCanvasBlock, { id: component.id, ui: ui.id, component }, { id: component.id })),
     });
 }
 /**
- * The plugins of the catalogue's UI plugins that render components and may
+ * The plugins of the catalogue's UI specs that render components and may
  * be named today (`enabled` in the catalogue).
  */
-export const CANVAS_BLOCK_PLUGINS = listUIPlugins()
-    .filter(uiPlugin => uiPlugin.enabled && uiPlugin.components.length > 0)
+export const CANVAS_BLOCK_PLUGINS = listUI()
+    .filter(ui => ui.enabled && ui.components.length > 0)
     .map(uiPluginBlocks);
 /**
  * A reactor holding the block plugins given, started, with those named in
@@ -53,9 +53,9 @@ export function canvasBlocksReactor(disabled = [], plugins = CANVAS_BLOCK_PLUGIN
     return reactor;
 }
 /**
- * The palette of an organization: the block plugins of the UI plugins it has
+ * The palette of an organization: the block plugins of the UI specs it has
  * turned off (`plugins_off` in IAM, catalogue ids such as 'a2ui') switched
- * off. A UI plugin of the catalogue that contributes no block takes nothing
+ * off. A UI of the catalogue that contributes no block takes nothing
  * off; an id the catalogue does not have is said by `unknownPluginsOff`.
  */
 export function canvasBlocksReactorOf(pluginsOff) {
@@ -64,13 +64,13 @@ export function canvasBlocksReactorOf(pluginsOff) {
         .map(canvasBlocksPluginName)
         .filter(name => blockPlugins.has(name)));
 }
-/** The ids an organization turns off that no UI plugin of the catalogue has. */
+/** The ids an organization turns off that no UI of the catalogue has. */
 export function unknownPluginsOff(pluginsOff) {
-    const known = new Set(listUIPlugins().map(uiPlugin => uiPlugin.id));
+    const known = new Set(listUI().map(ui => ui.id));
     return pluginsOff.filter(id => !known.has(id));
 }
 /**
- * What an application's page uses from a UI plugin its organization has
+ * What an application's page uses from a UI its organization has
  * turned off, as its setup notes say it (`blockSetupNotes`, on the palette of
  * `canvasBlocksReactorOf`).
  */
@@ -96,7 +96,7 @@ export function componentsUsedBy(app) {
 }
 /**
  * What an application's page uses that no enabled plugin contributes, as its
- * setup notes say it: one sentence per UI plugin of the catalogue whose
+ * setup notes say it: one sentence per UI of the catalogue whose
  * blocks it uses while its plugin is off. A component the catalogue does not
  * have is not a note but a problem of the instant checks.
  */
@@ -107,12 +107,12 @@ export function blockSetupNotes(app, reactor) {
         if (contributed.has(name)) {
             continue;
         }
-        for (const uiPlugin of listUIPlugins()) {
-            const component = uiPlugin.components.find(each => each.id === name);
+        for (const ui of listUI()) {
+            const component = ui.components.find(each => each.id === name);
             if (component) {
-                off.set(uiPlugin, [...(off.get(uiPlugin) ?? []), component.name]);
+                off.set(ui, [...(off.get(ui) ?? []), component.name]);
             }
         }
     }
-    return [...off.entries()].map(([uiPlugin, names]) => `The UI plugin “${uiPlugin.name}” is not enabled, and its page uses its ${names.length === 1 ? 'block' : 'blocks'} ${names.join(', ')}: ${names.length === 1 ? 'it is' : 'they are'} off the Canvas until it is.`);
+    return [...off.entries()].map(([ui, names]) => `The UI “${ui.name}” is not enabled, and its page uses its ${names.length === 1 ? 'block' : 'blocks'} ${names.join(', ')}: ${names.length === 1 ? 'it is' : 'they are'} off the Canvas until it is.`);
 }

package/lib/apps/plugins/canvas-parts/index.d.ts

@@ -15,7 +15,7 @@ type PartsReader = {
     }>;
 };
 /** The short ids an organization turns off, and the plugin each names. */
-export declare const CANVAS_PART_SOURCES: readonly ["connections", "skills", "models", "rules", "tests", "events"];
+export declare const CANVAS_PART_SOURCES: readonly ["connections", "skills", "models", "rules", "tests", "events", "protocols", "ui", "characters"];
 export type CanvasPartSource = (typeof CANVAS_PART_SOURCES)[number];
 export declare const canvasPartsPluginName: (source: CanvasPartSource) => string;
 /** A connection to each server of the catalogue: read-only, as its owner, every tool. */
@@ -30,6 +30,12 @@ export declare const RULE_PARTS: CanvasPartContribution[];
 export declare const TEST_PARTS: CanvasPartContribution[];
 /** The events an application answers (C-21): on a schedule, on an event, once. */
 export declare const EVENT_PARTS: CanvasPartContribution[];
+/** Each protocol of the catalogue (AGENT_PROTOCOLS PS-04): a planned one offered, not enabled. */
+export declare const PROTOCOL_PARTS: CanvasPartContribution[];
+/** Each UI of the catalogue its answers may render in (AGENT_PROTOCOLS PS-04). */
+export declare const UI_PARTS: CanvasPartContribution[];
+/** Datalayer's characters for its floating assistant, dropped on the agent (AGENT_PROTOCOLS PS-05). */
+export declare const CHARACTER_PARTS: CanvasPartContribution[];
 export declare const CANVAS_PART_PLUGINS: ReactorPlugin<Record<string, never>, unknown, unknown>[];
 /** The toolbox's reactor, its named plugins disabled; a name no plugin has is refused. */
 export declare function canvasPartsReactor(disabled?: readonly string[], plugins?: ReactorPlugin<any, any, any>[]): ReactorPlatform;

package/lib/apps/plugins/canvas-parts/index.js

@@ -15,6 +15,9 @@ import { buildReactorFromPlugins, contribution, definePlugin, } from '@datalayer
 import { MCP_SERVER_LIBRARY } from '../../../specs/mcpServers';
 import { listChatModels } from '../../../specs/models';
 import { getSkillSpecs } from '../../../specs/skills';
+import { listProtocolSpecs } from '../../../specs/protocols';
+import { listUI } from '../../../specs/ui';
+import { ASSISTANT_CHARACTERS } from '../../../chat/assistant/characters';
 import { LoopCanvasPart, } from '../../core/canvasParts';
 /** The short ids an organization turns off, and the plugin each names. */
 export const CANVAS_PART_SOURCES = [
@@ -24,6 +27,9 @@ export const CANVAS_PART_SOURCES = [
     'rules',
     'tests',
     'events',
+    'protocols',
+    'ui',
+    'characters',
 ];
 export const canvasPartsPluginName = (source) => `@datalayer/loop-plugin-parts-${source}`;
 const partsPlugin = (source, displayName, parts) => definePlugin({
@@ -172,6 +178,33 @@ export const EVENT_PARTS = [
         enabled: true,
     },
 ];
+/** Each protocol of the catalogue (AGENT_PROTOCOLS PS-04): a planned one offered, not enabled. */
+export const PROTOCOL_PARTS = listProtocolSpecs().map(protocol => ({
+    id: `protocol:${protocol.id}`,
+    kind: 'protocol',
+    label: protocol.name,
+    says: protocol.connects,
+    example: protocol.id,
+    enabled: protocol.status === 'shipped',
+}));
+/** Each UI of the catalogue its answers may render in (AGENT_PROTOCOLS PS-04). */
+export const UI_PARTS = listUI().map(ui => ({
+    id: `ui:${ui.id}`,
+    kind: 'ui',
+    label: ui.name,
+    says: ui.description,
+    example: ui.id,
+    enabled: ui.enabled,
+}));
+/** Datalayer's characters for its floating assistant, dropped on the agent (AGENT_PROTOCOLS PS-05). */
+export const CHARACTER_PARTS = ASSISTANT_CHARACTERS.map(character => ({
+    id: `character:${character.id}`,
+    kind: 'character',
+    label: character.name,
+    says: `Its floating assistant shows ${character.name}.`,
+    example: character.id,
+    enabled: true,
+}));
 export const CANVAS_PART_PLUGINS = [
     partsPlugin('connections', 'Connections', CONNECTION_PARTS),
     partsPlugin('skills', 'Skills', SKILL_PARTS),
@@ -179,6 +212,9 @@ export const CANVAS_PART_PLUGINS = [
     partsPlugin('rules', 'Rules', RULE_PARTS),
     partsPlugin('tests', 'Tests', TEST_PARTS),
     partsPlugin('events', 'Events', EVENT_PARTS),
+    partsPlugin('protocols', 'Protocols', PROTOCOL_PARTS),
+    partsPlugin('ui', 'UI', UI_PARTS),
+    partsPlugin('characters', 'Characters', CHARACTER_PARTS),
 ];
 /** The toolbox's reactor, its named plugins disabled; a name no plugin has is refused. */
 export function canvasPartsReactor(disabled = [], plugins = CANVAS_PART_PLUGINS) {

package/lib/apps/plugins/chat/ChatView.js

@@ -1374,6 +1374,13 @@ export default function ChatView({ workspace }) {
                     ? `${agentServerUrl}/api/v1/apps/agents/${encodeURIComponent(agentId)}/ag-ui/`
                     : `${agentServerUrl}/api/v1/ag-ui/${agentId}/`,
                 ...(runsApp && iamToken ? { authToken: iamToken } : {}),
+                // Its session's ui channel (REACTOR_UI RU-W): what its answers
+                // show, its steps and its elements, beside the run's text.
+                ...(runsApp
+                    ? {
+                        uiSocket: `${agentServerUrl.replace(/^http/, 'ws')}/api/v1/apps/ui`,
+                    }
+                    : {}),
                 agentId,
                 // `/api/v1/configure`, not `/api/v1/configure/config`: the hooks
                 // strip one trailing `config`/`configure` segment to find the API