@datalayer/agent-runtimes 1.3.25 → 1.3.27

package/lib/chat/messages/ChatMessages.d.ts

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import type { ChatMessage } from '../../types/messages';
-import type { ExtensionRegistry } from '../../extensions/ExtensionRegistry';
+import type { UIPluginRegistry } from '../../ui-plugins/UIPluginRegistry';
 /**
  * ChatMessages props
  */
@@ -26,11 +26,11 @@ export interface ChatMessagesProps {
     autoScroll?: boolean;
     /** Custom class name */
     className?: string;
-    /** Optional extension registry (defaults to store value) */
-    extensionRegistry?: ExtensionRegistry;
+    /** Optional plugin registry (defaults to store value) */
+    uiPluginRegistry?: UIPluginRegistry;
 }
 /**
  * Chat Messages component
  */
-export declare function ChatMessages({ messageRenderer, activityRenderer, showTimestamps, showAvatars, autoScroll, className, extensionRegistry: extensionRegistryProp, }: ChatMessagesProps): React.JSX.Element;
+export declare function ChatMessages({ messageRenderer, activityRenderer, showTimestamps, showAvatars, autoScroll, className, uiPluginRegistry: uiPluginRegistryProp, }: ChatMessagesProps): React.JSX.Element;
 export default ChatMessages;

package/lib/chat/messages/ChatMessages.js

@@ -14,14 +14,14 @@ import { Text, RelativeTime } from '@primer/react';
 import { Box, useThemeStore, getColorPalette } from '@datalayer/primer-addons';
 import { PersonIcon, ToolsIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { useChatMessages, useChatExtensionRegistry, } from '../../stores/chatStore';
+import { useChatMessages, useChatUIPluginRegistry, } from '../../stores/chatStore';
 /**
  * Chat Messages component
  */
-export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps = true, showAvatars = true, autoScroll = true, className, extensionRegistry: extensionRegistryProp, }) {
+export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps = true, showAvatars = true, autoScroll = true, className, uiPluginRegistry: uiPluginRegistryProp, }) {
     const messages = useChatMessages();
-    const storeExtensionRegistry = useChatExtensionRegistry();
-    const extensionRegistry = extensionRegistryProp ?? storeExtensionRegistry;
+    const storeUIPluginRegistry = useChatUIPluginRegistry();
+    const uiPluginRegistry = uiPluginRegistryProp ?? storeUIPluginRegistry;
     const containerRef = useRef(null);
     const lastMessageRef = useRef(null);
     // Resolve a light color from the current user theme palette so the
@@ -40,12 +40,12 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
         if (messageRenderer) {
             return messageRenderer(message);
         }
-        // Check extension registry for custom renderer
-        if (extensionRegistry) {
-            const messageRenderers = extensionRegistry.getMessageRenderers();
-            const extensionRenderer = messageRenderers.find(r => r.canRender(message));
-            if (extensionRenderer) {
-                return extensionRenderer.render({
+        // Check plugin registry for custom renderer
+        if (uiPluginRegistry) {
+            const messageRenderers = uiPluginRegistry.getMessageRenderers();
+            const pluginRenderer = messageRenderers.find(r => r.canRender(message));
+            if (pluginRenderer) {
+                return pluginRenderer.render({
                     message,
                     isStreaming: false,
                 });
@@ -86,7 +86,7 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
                                         ? 'You'
                                         : message.role === 'assistant'
                                             ? 'Assistant'
-                                            : 'System' }), showTimestamps && message.createdAt && (_jsx(RelativeTime, { datetime: message.createdAt.toISOString(), sx: { fontSize: 0, color: 'fg.muted' } }))] }), _jsx(Box, { sx: { fontSize: 1, lineHeight: 1.5 }, children: renderMessageContent(message, activityRenderer, extensionRegistry ?? undefined) })] })] }, message.id));
+                                            : 'System' }), showTimestamps && message.createdAt && (_jsx(RelativeTime, { datetime: message.createdAt.toISOString(), sx: { fontSize: 0, color: 'fg.muted' } }))] }), _jsx(Box, { sx: { fontSize: 1, lineHeight: 1.5 }, children: renderMessageContent(message, activityRenderer, uiPluginRegistry ?? undefined) })] })] }, message.id));
     };
     if (messages.length === 0) {
         return (_jsxs(Box, { className: className, sx: {
@@ -107,7 +107,7 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
 /**
  * Render message content based on type
  */
-function renderMessageContent(message, activityRenderer, extensionRegistry) {
+function renderMessageContent(message, activityRenderer, uiPluginRegistry) {
     const { content } = message;
     // Simple string content
     if (typeof content === 'string') {
@@ -115,14 +115,14 @@ function renderMessageContent(message, activityRenderer, extensionRegistry) {
     }
     // Array of content parts
     if (Array.isArray(content)) {
-        return (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: content.map((part, index) => renderContentPart(part, index, activityRenderer, extensionRegistry)) }));
+        return (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: content.map((part, index) => renderContentPart(part, index, activityRenderer, uiPluginRegistry)) }));
     }
     return null;
 }
 /**
  * Render individual content part
  */
-function renderContentPart(part, index, activityRenderer, extensionRegistry) {
+function renderContentPart(part, index, activityRenderer, uiPluginRegistry) {
     switch (part.type) {
         case 'text':
             return (_jsx(Text, { sx: { whiteSpace: 'pre-wrap' }, children: part.text }, index));
@@ -168,9 +168,9 @@ function renderContentPart(part, index, activityRenderer, extensionRegistry) {
                         data: part.data,
                     }) }, index));
             }
-            // Check extension registry
-            if (extensionRegistry) {
-                const renderer = extensionRegistry.getActivityRenderer(part.activityType || 'unknown');
+            // Check plugin registry
+            if (uiPluginRegistry) {
+                const renderer = uiPluginRegistry.getActivityRenderer(part.activityType || 'unknown');
                 if (renderer) {
                     return (_jsx(Box, { children: renderer.render({
                             activityType: part.activityType || 'unknown',

package/lib/config/AgentConfiguration.js

@@ -231,7 +231,7 @@ const EXTENSIONS = [
     {
         value: 'a2ui',
         label: 'A2UI',
-        description: 'Agent-to-UI extension',
+        description: 'Agent-to-UI plugin',
     },
     {
         value: 'mcp-ui',

package/lib/examples/example-selector.js

@@ -75,7 +75,7 @@ export const EXAMPLE_ENTRIES = [
     makeEntry('A2UiRestaurantExample', () => import('./A2UiRestaurantExample'), 'A2UI restaurant flow example.'),
     makeEntry('A2UiViewerExample', () => import('./A2UiViewerExample'), 'A2UI viewer integration example.'),
     makeEntry('A2UiJupyterOutputExample', () => import('./A2UiJupyterOutputExample'), 'One Jupyter execution shown twice: raw kernel outputs, and the A2UI surface the server converter makes of them.'),
-    makeEntry('A2UiAgentExample', () => import('./A2UiAgentExample'), 'A2UI Agent with built-in chat component and Python A2UI extension surface.'),
+    makeEntry('A2UiAgentExample', () => import('./A2UiAgentExample'), 'A2UI Agent with built-in chat component and Python A2UI UI plugin surface.'),
     makeEntry('AgUiAgenticExample', () => import('./AgUiAgenticExample'), 'AG-UI agentic workflow example.'),
     makeEntry('AgUiBackendToolRenderingExample', () => import('./AgUiBackendToolRenderingExample'), 'AG-UI backend tool rendering example.'),
     makeEntry('AgUiHaikuGenUiExample', () => import('./AgUiHaikuGenUiExample'), 'AG-UI generative UI Haiku example.'),

package/lib/loop/apps/AppRenderer.js

@@ -135,6 +135,13 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, ...embed }) {
         targetFixed: true, 
         // Applications first (LOOP T-12): an application's conversation wears
         // the `loop` theme; a host may say otherwise.
-        themeVariant: "loop", datalayerCreatePayload: datalayerCreatePayload, ...embed, plugins: allPlugins }));
+        themeVariant: "loop", 
+        // Its own face, name and welcome in the chat (T-08); no counters: a
+        // person using an application is not asking about tokens.
+        presence: {
+            name: app.name,
+            face: app.emoji,
+            welcome: app.interface.welcome || app.description,
+        }, showTokenUsage: false, datalayerCreatePayload: datalayerCreatePayload, ...embed, plugins: allPlugins }));
 }
 export default AppRenderer;

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

@@ -1,4 +1,4 @@
-import type { AppSpec } from '../../types/agentspecs';
+import type { AppSpec, ComponentSpec } from '../../types/agentspecs';
 export declare const NOT_READY = "Not ready";
 export declare const NEEDS_ATTENTION = "Needs attention";
 export declare const PASSES = "Passes the instant checks";
@@ -9,6 +9,11 @@ export interface AppCheck {
     attention: string[];
     setup: string[];
 }
+/**
+ * The component a layout names (LOOP C-13), from the catalogs of the enabled
+ * UI plugins, by the name a surface gives it.
+ */
+export declare const componentNamed: (name: string) => ComponentSpec | undefined;
 /** The Guards the runtime executes (agent-runtimes `loop/apps/guards.py`). */
 export declare const EXECUTED_GUARDS: readonly string[];
 /** The instant checks of an application as an editor holds it. */

package/lib/loop/apps/checks.js

@@ -29,6 +29,7 @@ import { getCog } from '../../specs/cogs';
 import { getFrame } from '../../specs/frames';
 import { getGate } from '../../specs/gates';
 import { GUARD_CATALOGUE } from '../../specs/guards';
+import { getComponent } from '../../specs/uiPlugins';
 import { MCP_SERVER_LIBRARY } from '../../specs/mcpServers';
 import { getMemory } from '../../specs/memory';
 import { getModel } from '../../specs/models';
@@ -47,6 +48,11 @@ const idOf = (ref) => {
     const at = ref.lastIndexOf(':');
     return at > 0 && ref.slice(at + 1).includes('.') ? ref.slice(0, at) : ref;
 };
+/**
+ * The component a layout names (LOOP C-13), from the catalogs of the enabled
+ * UI plugins, by the name a surface gives it.
+ */
+export const componentNamed = (name) => getComponent(name);
 const own = (record, key) => Object.prototype.hasOwnProperty.call(record, key) ? record[key] : undefined;
 const ACTIONS = {
     write: 'create or change things',
@@ -175,6 +181,17 @@ function referenceProblems(app) {
     if (app.model && !getModel(app.model)) {
         missing('model', app.model);
     }
+    // The components it may use, and those its surface uses, are the catalog's (C-13).
+    for (const name of app.interface.components ?? []) {
+        if (!componentNamed(name)) {
+            problems.push(`There is no component named “${name}” in the catalog.`);
+        }
+    }
+    for (const node of app.interface.surface?.components ?? []) {
+        if (!componentNamed(String(node.component))) {
+            problems.push(`The surface's “${String(node.id)}” is a “${String(node.component)}”, which the catalog does not have.`);
+        }
+    }
     const judge = app.decision?.judgmentModel;
     if (judge) {
         const model = getModel(judge);

package/lib/loop/embed/LoopEmbed.js

@@ -66,6 +66,10 @@ export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions,
         preset.datalayerAgentSpecId,
         preset.targetFixed,
         preset.themeVariant,
+        preset.presence?.name,
+        preset.presence?.face,
+        preset.presence?.welcome,
+        preset.showTokenUsage,
         // By its content: an application's spec written inline is a new object each render.
         JSON.stringify(preset.datalayerCreatePayload ?? null),
         preset.defaultEditor,
@@ -126,6 +130,15 @@ export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions,
      */
     useReactor(reactor);
     const shell = (_jsx(LoopWorkspace, { serverUrl: preset.serverUrl ?? '', agentId: agentId, reactor: reactor, manageReactor: false, showViewSelector: preset.showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, headerActions: headerActions, headerContainer: headerContainer }));
-    return (_jsx(QueryClientProvider, { client: internalQueryClient, children: frameTitle !== undefined ? (_jsx(WindowFrame, { title: frameTitle, height: frameHeight, children: shell })) : (_jsx(Box, { sx: { height: '100%', minHeight: 0 }, children: shell })) }));
+    return (_jsx(QueryClientProvider, { client: internalQueryClient, children: frameTitle !== undefined ? (_jsx(WindowFrame, { title: frameTitle, height: frameHeight, children: shell })) : (
+        // Filling its host, whatever the host is: in a flex row it used to
+        // shrink to the chat's own width and leave the rest of the frame bare.
+        _jsx(Box, { sx: {
+                height: '100%',
+                minHeight: 0,
+                width: '100%',
+                flex: '1 1 auto',
+                minWidth: 0,
+            }, children: shell })) }));
 }
 export default LoopEmbed;

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

@@ -722,6 +722,7 @@ export default function ChatView({ workspace }) {
     })), [suggestions]);
     /* The icon its spec asked for, at the size the empty state draws. */
     const BrandIcon = agentIcon(spec?.icon);
+    const presence = config?.presence;
     /* And the team's, for the level above it. */
     const TeamIcon = agentIcon(team?.team.icon);
     /*
@@ -1290,7 +1291,7 @@ export default function ChatView({ workspace }) {
         onSelectAgent: id => team?.select(id),
         // On unless the host said otherwise: a public page turns the counters
         // off, because they answer questions a visitor is not asking.
-        showTokenUsage: chatExtras.showTokenUsage ?? true,
+        showTokenUsage: chatExtras.showTokenUsage ?? config?.showTokenUsage ?? true,
         showContextRing: true,
         agentUsage: contextUsage ?? undefined,
         showModelSelector: true,
@@ -1423,7 +1424,7 @@ export default function ChatView({ workspace }) {
                             nothing about this one. The empty state is the first thing a
                             person sees and the only place the agent introduces itself.
                           */
-                        title: member?.name ?? spec?.name ?? agentId, description: spec?.description, 
+                        title: presence?.name ?? member?.name ?? spec?.name ?? agentId, description: presence?.welcome ?? spec?.description, 
                         /*
                             Two sizes, because it is drawn in two places.
             
@@ -1435,13 +1436,15 @@ export default function ChatView({ workspace }) {
                         // Big enough to read as the agent's mark rather than as
                         // punctuation before its name, and still short enough not to
                         // set the header's height.
-                        brandIcon: _jsx(BrandIcon, { size: 20 }), emptyState: {
-                            icon: _jsx(BrandIcon, { size: 48 }),
+                        brandIcon: presence?.face ? (_jsx("span", { "aria-hidden": true, style: { fontSize: 20, lineHeight: 1 }, children: presence.face })) : (_jsx(BrandIcon, { size: 20 })), emptyState: {
+                            // An application's own face, large: the thing a person's eye
+                            // lands on first (LOOP T-08).
+                            icon: presence?.face ? (_jsx("span", { "aria-hidden": true, style: { fontSize: 48, lineHeight: 1 }, children: presence.face })) : (_jsx(BrandIcon, { size: 48 })),
                             // `ChatEmptyState` reads its heading from here and nowhere
                             // else — the `title` above reaches the header only — so
                             // without this the agent introduced itself as "Start a
                             // conversation".
-                            title: member?.name ?? spec?.name ?? agentId,
+                            title: presence?.name ?? member?.name ?? spec?.name ?? agentId,
                             /*
                               Two levels when there is a team: the team first — its name,
                               what it is for, what it can be asked — and under it the
@@ -1600,7 +1603,7 @@ export default function ChatView({ workspace }) {
                         // A host example's own tool-result renderer, when it feeds one
                         // through the extras channel — the A2UI examples draw their
                         // surface here. Wins over the notebook surfaces in ChatBase.
-                        renderToolResult: chatExtras.renderToolResult, showTurnFooter: chatExtras.showTokenUsage ?? true, onContextSnapshot: handleContextSnapshot, onLoadingChange: handleLoadingChange, onItemsChange: handleMessagesChange, onDisplayItemsChange: handleDisplayItemsChange, enableStreaming: true }) }), besideChat && !promptHidden ? prompt : null] }) }));
+                        renderToolResult: chatExtras.renderToolResult, showTurnFooter: chatExtras.showTokenUsage ?? config?.showTokenUsage ?? true, onContextSnapshot: handleContextSnapshot, onLoadingChange: handleLoadingChange, onItemsChange: handleMessagesChange, onDisplayItemsChange: handleDisplayItemsChange, enableStreaming: true }) }), besideChat && !promptHidden ? prompt : null] }) }));
     // Off when the host asked for the menu alone: the composer's suggestions
     // control carries the same openers (`suggestions` above).
     const chipsEl = config?.suggestionLabels !== false && chatSuggestions.length > 0 ? (_jsx(Box, { "aria-label": "Suggested prompts", sx: { display: 'flex', flexWrap: 'wrap', gap: 2, px: 2, pb: '6px' }, children: chatSuggestions.map(item => (_jsx(Box, { as: "button", type: "button", 

package/lib/loop/plugins/chat/index.d.ts

@@ -1,4 +1,12 @@
 /** What a host may set on the chat. */
+/** Who is answering, as the person meets them. */
+export interface ChatPresence {
+    name: string;
+    /** An emoji: its face where only an icon goes. */
+    face?: string;
+    /** What it says before anyone writes. */
+    welcome?: string;
+}
 export type ChatPluginConfig = {
     /**
      * The theme the conversation wears, by name: the person's unless said. An
@@ -6,6 +14,17 @@ export type ChatPluginConfig = {
      * the theme's bubbles, pills and colours whatever the page around it wears.
      */
     themeVariant?: string;
+    /**
+     * Who is answering, as the person meets them (LOOP T-08): a name, a face
+     * and a welcome, in place of the agent's id and a generic icon. An
+     * application sets its own.
+     */
+    presence?: ChatPresence;
+    /**
+     * Whether the counters — tokens, context — are shown under the prompt.
+     * On unless said: a person using an application is not asking.
+     */
+    showTokenUsage?: boolean;
     /**
      * What the empty prompt says.
      *

package/lib/loop/presets.d.ts

@@ -21,7 +21,7 @@
  */
 import { type PluginRef } from '@datalayer/reactor';
 import { type AgentsConfig, type SandboxTarget } from './plugins/agents';
-import { type ChatPluginConfig } from './plugins/chat';
+import { type ChatPluginConfig, type ChatPresence } from './plugins/chat';
 import { type PageSize } from './plugins/page-layout';
 export type LoopPresetOptions = {
     /** Where the agent runtimes service is. */
@@ -128,6 +128,10 @@ export type LoopPresetOptions = {
     targetFixed?: boolean;
     /** The theme the conversation wears, by name; the person's unless said. */
     themeVariant?: string;
+    /** Who is answering, as the person meets them (LOOP T-08). */
+    presence?: ChatPresence;
+    /** Whether the counters are shown under the prompt; on unless said. */
+    showTokenUsage?: boolean;
     /**
      * The agentspec the local agent is created from, by id.
      *

package/lib/loop/presets.js

@@ -31,7 +31,7 @@ import { ShellPlugin } from './plugins/shell';
 import { PromptPlugin } from './plugins/prompt';
 import { AgentspecsPlugin } from './plugins/agentspecs';
 import { AgentsPlugin, } from './plugins/agents';
-import { ChatPlugin } from './plugins/chat';
+import { ChatPlugin, } from './plugins/chat';
 import { ChatHeaderPlugin } from './plugins/chat-header';
 import { A2uiSurfacePlugin } from './plugins/a2ui-surface';
 import { ChatViewPlugin } from './plugins/chat-view';
@@ -52,7 +52,7 @@ import { LoopPageLayoutPlugin } from './plugins/page-layout';
  * be installed or signed into, and the switches a demonstration wants are off.
  */
 export function loopPlugins(options = {}) {
-    const { serverUrl, target = 'browser', defaultEditor = 'notebook', showViewSelector = true, hideChatHeader = false, chatHeaderButtons = false, promptPlacement, autoFocusPrompt = true, suggestionLabels = true, fullScreenTopOffset = 0, showAgentVariants = false, agentSummary = true, teamId, teamPicker = true, pageLayout = false, pageLayoutTurnPanel = 'below', pageLayoutPrompt = 'docked', pageLayoutPromptAnchor = 'top', pageLayoutSize, pageLayoutTurnPanelFooter = 'full', localAgent, localAgentSpec, datalayerAgentSpecId, datalayerCreatePayload, targetFixed, themeVariant, floatingPrompt = false, editorSelector = false, editors = true, graph = false, commandPalette = false, pluginsPanel = false, windowFrame = false, firstPromptHook, } = options;
+    const { serverUrl, target = 'browser', defaultEditor = 'notebook', showViewSelector = true, hideChatHeader = false, chatHeaderButtons = false, promptPlacement, autoFocusPrompt = true, suggestionLabels = true, fullScreenTopOffset = 0, showAgentVariants = false, agentSummary = true, teamId, teamPicker = true, pageLayout = false, pageLayoutTurnPanel = 'below', pageLayoutPrompt = 'docked', pageLayoutPromptAnchor = 'top', pageLayoutSize, pageLayoutTurnPanelFooter = 'full', localAgent, localAgentSpec, datalayerAgentSpecId, datalayerCreatePayload, targetFixed, themeVariant, presence, showTokenUsage, floatingPrompt = false, editorSelector = false, editors = true, graph = false, commandPalette = false, pluginsPanel = false, windowFrame = false, firstPromptHook, } = options;
     return [
         // The chat owns the editor beside it, so which one opens is its
         // configuration rather than the workspace's.
@@ -69,6 +69,8 @@ export function loopPlugins(options = {}) {
             suggestionLabels,
             fullScreenTopOffset,
             themeVariant,
+            presence,
+            showTokenUsage,
         }),
         // The composer and the title bar are plugins of their own: the chat
         // assembles their props, these render them. In the preset by default —

package/lib/protocols/A2AAdapter.d.ts

@@ -8,7 +8,7 @@ import { BaseProtocolAdapter } from './BaseProtocolAdapter';
 export interface A2AAdapterConfig extends ProtocolAdapterConfig {
     /** Agent URL for .well-known/agent-card.json discovery */
     agentUrl?: string;
-    /** Enable A2UI extension */
+    /** Enable the A2UI UI plugin */
     enableA2UI?: boolean;
 }
 /**

package/lib/specs/uiPlugins.d.ts

@@ -6,7 +6,7 @@
  * This file is AUTO-GENERATED from YAML specifications.
  * DO NOT EDIT MANUALLY - run 'make specs' to regenerate.
  */
-import type { UIPluginSpec } from '../types/agentspecs';
+import type { ComponentSpec, UIPluginSpec } from '../types/agentspecs';
 export declare const A2UI_UI_PLUGIN_0_0_1: UIPluginSpec;
 export declare const MCP_APPS_UI_PLUGIN_0_0_1: UIPluginSpec;
 export declare const MCP_UI_UI_PLUGIN_0_0_1: UIPluginSpec;
@@ -14,3 +14,8 @@ export declare const UI_PLUGIN_CATALOGUE: Record<string, UIPluginSpec>;
 /** The plugin an agent spec's `uiPlugin` names, or undefined. */
 export declare function getUIPlugin(pluginId: string): UIPluginSpec | undefined;
 export declare function listUIPlugins(): UIPluginSpec[];
+/** The visual components the enabled UI plugins render, by the name a surface gives them (LOOP C-13). */
+export declare const COMPONENT_CATALOGUE: Record<string, ComponentSpec>;
+/** The component a layout names, or undefined. */
+export declare function getComponent(name: string): ComponentSpec | undefined;
+export declare function listComponents(): ComponentSpec[];