@datalayer/agent-runtimes 1.3.25 → 1.3.28

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.d.ts

@@ -1,6 +1,7 @@
 import type { ReactorPlugin } from '@datalayer/reactor';
 import type { AppSpec } from '../../types/agentspecs';
 import { type LoopEmbedProps } from '../embed/LoopEmbed';
+import type { PresenceState } from '../plugins/chat/presenceStatus';
 /** The id of an agent or a Cog, without its version. */
 export declare const agentIdOf: (app: Pick<AppSpec, "agent" | "team">) => string;
 /**
@@ -30,6 +31,12 @@ export type AppRendererProps = Omit<LoopEmbedProps, 'agentId'> & {
     app: AppSpec;
     /** What its record is kept under, on Datalayer: the application, its deployment. */
     instance?: AppInstance;
+    /**
+     * Told what the application is doing — idle, thinking, working, waiting for
+     * you — for a host that draws its face in a frame of its own (T-08). A
+     * stable function, such as a state setter.
+     */
+    onPresence?: (state: PresenceState) => void;
 };
 /**
  * An application in a LOOP workspace: its agent, its starters, its layout.
@@ -40,5 +47,5 @@ export type AppRendererProps = Omit<LoopEmbedProps, 'agentId'> & {
 /** No host plugins: one array, so that it never reads as a change. */
 /** The agentspec a runtime is allocated with before an application's agent is created on it. */
 export declare const DATALAYER_BOOTSTRAP_AGENTSPEC = "example-simple";
-export declare function AppRenderer({ app, plugins, instance, ...embed }: AppRendererProps): React.JSX.Element;
+export declare function AppRenderer({ app, plugins, instance, onPresence, ...embed }: AppRendererProps): React.JSX.Element;
 export default AppRenderer;

package/lib/loop/apps/AppRenderer.js

@@ -76,7 +76,7 @@ export function defineAppPlugin(app) {
 /** The agentspec a runtime is allocated with before an application's agent is created on it. */
 export const DATALAYER_BOOTSTRAP_AGENTSPEC = 'example-simple';
 const NO_PLUGINS = [];
-export function AppRenderer({ app, plugins = NO_PLUGINS, instance, ...embed }) {
+export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, ...embed }) {
     const chatOnly = app.interface.layout === 'chat';
     /*
      * The application plugin, made once per application. `LoopEmbed` rebuilds
@@ -135,6 +135,14 @@ 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,
+            onPresence,
+        }, 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

@@ -43,6 +43,8 @@ import { turnWritersOf } from './turnState';
 import { isInactiveSurfaceContribution, orderToolContributions, toolsForChatView, } from './chatViewTools';
 import { useAgentCommandTools } from '../../../tools/adapters/commands';
 import { NONE_EDITOR, seedEditorChoice, setEditorOptions, } from '../shell/editorChoice';
+import { PresenceFace, PresenceLine } from './Presence';
+import { presenceState } from './presenceStatus';
 /** No editor: the conversation on its own. */
 const NO_SURFACE = '';
 /**
@@ -186,6 +188,16 @@ export default function ChatView({ workspace }) {
      */
     const [busy, setBusy] = useState(false);
     const [sendReady, setSendReady] = useState(false);
+    const [presenceTool, setPresenceTool] = useState({
+        open: false,
+        pendingApproval: false,
+    });
+    const presenceNow = presenceState(busy, presenceTool);
+    const onPresence = config?.presence?.onPresence;
+    // A host drawing the face in a frame of its own is told as it changes.
+    useEffect(() => {
+        onPresence?.(presenceNow);
+    }, [onPresence, presenceNow]);
     const handleSendReady = useCallback((controls) => {
         controlsRef.current = controls;
         setSendReady(!!controls);
@@ -199,6 +211,22 @@ export default function ChatView({ workspace }) {
      * Cleared when nothing is running.
      */
     const handleDisplayItemsChange = useCallback((items) => {
+        // The newest tool call, for an application's line of status (T-08).
+        let newest;
+        for (let index = items.length - 1; index >= 0; index -= 1) {
+            const item = items[index];
+            if (typeof item.toolName === 'string' && item.toolCallId) {
+                newest = item;
+                break;
+            }
+        }
+        const open = !!newest && newest.status !== 'complete' && newest.status !== 'error';
+        const pendingApproval = open &&
+            newest?.result
+                ?.pending_approval === true;
+        setPresenceTool(previous => previous.open === open && previous.pendingApproval === pendingApproval
+            ? previous
+            : { open, pendingApproval });
         const feed = turnFeedRef.current;
         if (!feed) {
             return;
@@ -722,6 +750,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 +1319,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 +1452,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 +1464,18 @@ 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(PresenceFace, { face: presence.face, size: 20, state: presenceNow })) : (_jsx(BrandIcon, { size: 20 })), 
+                        // An application says what it is doing, in plain words, beside
+                        // its name (T-08); an agent's chat keeps its header as it is.
+                        headerContent: presence ? _jsx(PresenceLine, { state: presenceNow }) : undefined, 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 +1634,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/Presence.d.ts

@@ -0,0 +1,9 @@
+import { type PresenceState } from './presenceStatus';
+export declare function PresenceFace({ face, size, state, }: {
+    face: string;
+    size: number;
+    state: PresenceState;
+}): import("react").JSX.Element;
+export declare function PresenceLine({ state }: {
+    state: PresenceState;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * An application's presence in its chat (LOOP T-08): its face, with a quiet
+ * motion around it while it thinks or works, and one line saying what it is
+ * doing. The face is never redrawn; the motion is a soft ring in the accent,
+ * still under `prefers-reduced-motion`, and the line changes at the theme's
+ * status pace (T-10).
+ *
+ * @module loop/plugins/chat/Presence
+ */
+import { Box, Text } from '@primer/react';
+import { PRESENCE_LINES } from './presenceStatus';
+const ACCENT = 'var(--loop-accent, var(--fgColor-accent))';
+export function PresenceFace({ face, size, state, }) {
+    const active = state === 'thinking' || state === 'working';
+    return (_jsxs(Box, { as: "span", "aria-hidden": true, "data-presence": state, sx: {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: size + 8,
+            height: size + 8,
+            flexShrink: 0,
+            fontSize: size,
+            lineHeight: 1,
+        }, children: [_jsx(Box, { as: "span", sx: {
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '50%',
+                    boxShadow: `0 0 0 2px ${ACCENT}`,
+                    opacity: active ? 0.9 : state === 'waiting' ? 0.9 : 0,
+                    transition: 'opacity var(--theme-motion-status, 0ms) var(--theme-motion-easing, ease)',
+                    animation: active
+                        ? 'loopPresenceBreath 1.8s ease-in-out infinite'
+                        : 'none',
+                    '@keyframes loopPresenceBreath': {
+                        '0%, 100%': { transform: 'scale(0.92)', opacity: 0.35 },
+                        '50%': { transform: 'scale(1.06)', opacity: 0.9 },
+                    },
+                    '@media (prefers-reduced-motion: reduce)': {
+                        animation: 'none',
+                    },
+                } }), face] }));
+}
+export function PresenceLine({ state }) {
+    return (_jsx(Text, { role: "status", "aria-live": "polite", "data-presence-line": state, sx: {
+            fontSize: 0,
+            color: state === 'waiting' ? 'fg.default' : 'fg.muted',
+            fontWeight: state === 'waiting' ? 'semibold' : 'normal',
+            whiteSpace: 'nowrap',
+            flexShrink: 0,
+        }, children: PRESENCE_LINES[state] }));
+}

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

@@ -1,4 +1,20 @@
+import type { PresenceState } from './presenceStatus';
 /** 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;
+    /**
+     * Told what it is doing as it changes — idle, thinking, working, waiting
+     * for you — for a host that draws the face itself, in a frame of its own.
+     * Read once, when the workspace is built: pass a stable function, such as
+     * a state setter.
+     */
+    onPresence?: (state: PresenceState) => void;
+}
 export type ChatPluginConfig = {
     /**
      * The theme the conversation wears, by name: the person's unless said. An
@@ -6,6 +22,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/plugins/chat/presenceStatus.d.ts

@@ -0,0 +1,26 @@
+/**
+ * What an application is doing, in plain words (LOOP T-08): the one line of
+ * status beside its face.
+ *
+ * @module loop/plugins/chat/presenceStatus
+ */
+/** The states a person is told about. Paused waits for a pause to exist. */
+export type PresenceState = 'idle' | 'thinking' | 'working' | 'waiting';
+/** The line each state is said by. */
+export declare const PRESENCE_LINES: Record<PresenceState, string>;
+/** The newest tool call of the conversation, as far as presence reads it. */
+export interface PresenceTool {
+    /** It has not returned. */
+    open: boolean;
+    /** It waits on a person's approval. */
+    pendingApproval: boolean;
+}
+/**
+ * The state, from whether a turn is running and the newest tool call.
+ *
+ * Waiting for an approval is said whether or not the turn is still
+ * streaming — the stream may end while the approval is asked. A tool that
+ * has not returned counts as work only during a turn: a stopped turn can
+ * leave one open, and the application is not working then.
+ */
+export declare function presenceState(busy: boolean, tool?: PresenceTool): PresenceState;

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** The line each state is said by. */
+export const PRESENCE_LINES = {
+    idle: 'Ready',
+    thinking: 'Thinking…',
+    working: 'Working…',
+    waiting: 'Waiting for you',
+};
+/**
+ * The state, from whether a turn is running and the newest tool call.
+ *
+ * Waiting for an approval is said whether or not the turn is still
+ * streaming — the stream may end while the approval is asked. A tool that
+ * has not returned counts as work only during a turn: a stopped turn can
+ * leave one open, and the application is not working then.
+ */
+export function presenceState(busy, tool) {
+    if (tool?.open && tool.pendingApproval) {
+        return 'waiting';
+    }
+    if (!busy) {
+        return 'idle';
+    }
+    return tool?.open ? 'working' : 'thinking';
+}

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[];