@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/components/icons/ArtifactIcon.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { createElement } from 'react';
-import { DatabaseIcon, RowsIcon, BookIcon, DiffModifiedIcon, PencilIcon, FeedIssueDraftIcon, FeedRocketIcon, MilestoneIcon, OrganizationIcon, PeopleIcon, RocketIcon, FileIcon, StackIcon, GearIcon, GraphIcon, NumberIcon, PaperAirplaneIcon, ArchiveIcon, TagIcon, MortarBoardIcon, ContainerIcon, HomeIcon, ShareIcon, FileDirectoryIcon, TrophyIcon, QuestionIcon, PersonIcon, MailIcon, ZapIcon, } from '@primer/octicons-react';
+import { DatabaseIcon, RowsIcon, BookIcon, DiffModifiedIcon, PencilIcon, FeedIssueDraftIcon, FeedRocketIcon, MilestoneIcon, OrganizationIcon, PeopleIcon, RocketIcon, FileIcon, StackIcon, GearIcon, GraphIcon, NumberIcon, PaperAirplaneIcon, ArchiveIcon, TagIcon, MortarBoardIcon, ContainerIcon, HomeIcon, ShareIcon, FileDirectoryIcon, TrophyIcon, QuestionIcon, PersonIcon, MailIcon, FileMediaIcon, ZapIcon, } from '@primer/octicons-react';
 import { GalileoIcon, CircleWhiteIcon, BookOpenIcon, CameraIcon, CellIcon, NotebookOutlineIcon, } from '@datalayer/icons-react';
 const ARTIFACT_ICONS = new Map([
     ['assignment', MilestoneIcon],
@@ -13,6 +13,7 @@ const ARTIFACT_ICONS = new Map([
     ['credits', NumberIcon],
     ['dataset', StackIcon],
     ['datasource', DatabaseIcon],
+    ['deck', FileMediaIcon],
     ['document', FileIcon],
     ['documentation', BookOpenIcon],
     ['environment', ContainerIcon],

package/lib/components/nbgrader/NbGradesDetails.d.ts

@@ -1,5 +1,5 @@
 import { IStudentItem } from '../../models';
 export declare const NbGradesDetails: (props: {
     studentItem?: IStudentItem;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default NbGradesDetails;

package/lib/components/progress/CreditsIndicator.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { IRemoteServicesManager } from '../../runtimes';
 type ICreditsIndicatorProps = {
     /**

package/lib/components/progress/CreditsIndicator.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useState, useEffect } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { ConsumptionBar } from '@datalayer/core/lib/components/progress/ConsumptionBar';

package/lib/components/scheduler/ScheduleMenu.d.ts

@@ -50,5 +50,5 @@ export type ScheduleMenuProps = {
  * anchor icon while a save request is in flight. The scheduler service URL is
  * configurable through the `baseUrl` prop.
  */
-export declare const ScheduleMenu: ({ notebookUid, scheduleUid, token, baseUrl, enabled, icon, iconColor, ariaLabel, initialPreset, initialCronExpression, onSaved, onDeleted, onError, }: ScheduleMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScheduleMenu: ({ notebookUid, scheduleUid, token, baseUrl, enabled, icon, iconColor, ariaLabel, initialPreset, initialCronExpression, onSaved, onDeleted, onError, }: ScheduleMenuProps) => import("react").JSX.Element;
 export default ScheduleMenu;

package/lib/components/snapshots/SandboxSnapshotMenu.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { type PropsWithChildren } from 'react';
 import { Kernel } from '@jupyterlab/services';
 import { IMultiServiceManager } from '../../runtimes';
@@ -20,7 +21,7 @@ type ICodeSandboxSnapshotMenu = {
      *
      * It is needed for remote kernels.
      */
-    podName?: string;
+    runtimeName?: string;
     /**
      * Whether the menu is disabled.
      */
@@ -29,5 +30,5 @@ type ICodeSandboxSnapshotMenu = {
 /**
  * Code Sandbox Snapshot menu component.
  */
-export declare function SandboxSnapshotMenu({ children, connection, podName, multiServiceManager, disabled, }: PropsWithChildren<ICodeSandboxSnapshotMenu>): JSX.Element;
+export declare function SandboxSnapshotMenu({ children, connection, runtimeName, multiServiceManager, disabled, }: PropsWithChildren<ICodeSandboxSnapshotMenu>): JSX.Element;
 export {};

package/lib/components/snapshots/SandboxSnapshotMenu.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useCallback, useEffect, useState, } from 'react';
 import { DeviceCameraIcon } from '@primer/octicons-react';
 import { ActionList, ActionMenu, Flash, FormControl, Select, Spinner, } from '@primer/react';
@@ -15,7 +11,7 @@ import { createSandboxSnapshotName } from '@datalayer/core/lib/utils';
 /**
  * Code Sandbox Snapshot menu component.
  */
-export function SandboxSnapshotMenu({ children, connection, podName, multiServiceManager, disabled = false, }) {
+export function SandboxSnapshotMenu({ children, connection, runtimeName, multiServiceManager, disabled = false, }) {
     const { addSandboxSnapshot, runtimesUrl, runtimeSnapshots, setSandboxSnapshots, } = useRuntimesStore();
     const { enqueueToast, trackAsyncTask } = useToast();
     const [openLoadDialog, setOpenLoadDialog] = useState(false);
@@ -42,10 +38,10 @@ export function SandboxSnapshotMenu({ children, connection, podName, multiServic
     const onSandboxSnapshotChanged = useCallback(event => {
         setSelection(event.target.value);
     }, []);
-    const onLoadSandboxSnapshotSubmit = useCallback(async ({ id, connection, podName, }) => {
-        if (podName) {
-            await loadSandboxSnapshot({ id: podName, from: id });
-            enqueueToast(`Code Sandbox snapshot ${podName} is loaded.`, {
+    const onLoadSandboxSnapshotSubmit = useCallback(async ({ id, connection, runtimeName, }) => {
+        if (runtimeName) {
+            await loadSandboxSnapshot({ id: runtimeName, from: id });
+            enqueueToast(`Code Sandbox snapshot ${runtimeName} is loaded.`, {
                 variant: 'success',
             });
         }
@@ -63,15 +59,15 @@ export function SandboxSnapshotMenu({ children, connection, podName, multiServic
             let task;
             let ref = '';
             let snapshotName = '';
-            if (podName && multiServiceManager?.remote) {
+            if (runtimeName && multiServiceManager?.remote) {
                 snapshotName = createSandboxSnapshotName('cloud');
                 task = multiServiceManager.remote.runtimesManager.snapshotRuntime({
-                    podName,
+                    runtimeName,
                     name: snapshotName,
                     description: snapshotName,
                     stop: false,
                 });
-                ref = podName.split('-', 2).reverse()[0];
+                ref = runtimeName.split('-', 2).reverse()[0];
                 task.then(s => {
                     snapshot = s;
                 });
@@ -121,7 +117,7 @@ export function SandboxSnapshotMenu({ children, connection, podName, multiServic
         finally {
             setTakingSandboxSnapshot(false);
         }
-    }, [connection, podName, multiServiceManager]);
+    }, [connection, runtimeName, multiServiceManager]);
     return (_jsxs(_Fragment, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { leadingVisual: DeviceCameraIcon, variant: "invisible", size: "small", disabled: loadingSandboxSnapshot || takingSandboxSnapshot || disabled, children: children }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: onLoadSandboxSnapshot, disabled: loadingSandboxSnapshot || runtimeSnapshots.length === 0, children: "Load a code sandbox snapshot\u2026" }), _jsx(ActionList.Item, { onSelect: onTakeSandboxSnapshot, disabled: takingSandboxSnapshot, children: "Take a code sandbox snapshot" })] }) })] }), openLoadDialog && (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Choose a code sandbox snapshot to load" }), onClose: () => {
                     setOpenLoadDialog(false);
                 }, footerButtons: [
@@ -146,11 +142,11 @@ export function SandboxSnapshotMenu({ children, connection, podName, multiServic
                                 try {
                                     setError(undefined);
                                     const snapshot = runtimeSnapshots.find(s => s.id === selection);
-                                    if (snapshot && (connection || podName)) {
+                                    if (snapshot && (connection || runtimeName)) {
                                         await onLoadSandboxSnapshotSubmit({
                                             connection,
                                             id: snapshot.id,
-                                            podName,
+                                            runtimeName,
                                         });
                                     }
                                     else {

package/lib/components/snippets/SnippetDialog.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { CodeCellModel } from '@jupyterlab/cells';
 import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
 import { ITranslator } from '@jupyterlab/translation';

package/lib/components/snippets/SnippetDialog.js

@@ -1,8 +1,4 @@
 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.
- */
 import { useCallback, useMemo, useState } from 'react';
 import { nullTranslator } from '@jupyterlab/translation';
 import { FormControl, Select, Text } from '@primer/react';

package/lib/components/specs/SpecPayloadPreview.d.ts

@@ -0,0 +1,34 @@
+/**
+ * A spec, as the YAML somebody would have written.
+ *
+ * The agentspecs example grew this to show what it was about to launch, and
+ * the agent details pane wants the same thing for what is already running —
+ * "here is the spec, in the form it is written in" is one question, and two
+ * renderings of it would drift.
+ *
+ * The serialiser is deliberately small and local. A YAML library would be a
+ * dependency for a read-only preview of data this application produced itself,
+ * and the shapes here are plain objects, arrays, strings and numbers.
+ *
+ * @module components/specs/SpecPayloadPreview
+ */
+import type { JSX } from 'react';
+/** A spec rendered as YAML. Exported for callers that only want the text. */
+export declare function specToYaml(value: unknown): string;
+export type SpecPayloadPreviewProps = {
+    /** The spec to render. */
+    spec: unknown;
+    /** Called when the reader dismisses it. */
+    onClose: () => void;
+    /** What the panel calls itself. */
+    title?: string;
+};
+/**
+ * The preview, as a panel over whatever is behind it.
+ *
+ * Escape closes it as well as the button, because a panel that covers the
+ * view and can only be dismissed by finding one control is a panel people
+ * feel trapped in.
+ */
+export declare function SpecPayloadPreview({ spec, onClose, title, }: SpecPayloadPreviewProps): JSX.Element;
+export default SpecPayloadPreview;

package/lib/components/specs/SpecPayloadPreview.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { IconButton, Text } from '@primer/react';
+import { XIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const yamlScalar = (value) => {
+    if (value === null || value === undefined) {
+        return 'null';
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    const str = String(value);
+    if (str === '') {
+        return "''";
+    }
+    if (/^[a-zA-Z0-9._/-]+$/.test(str)) {
+        return str;
+    }
+    return JSON.stringify(str);
+};
+const toYaml = (value, indent = 0) => {
+    const pad = '  '.repeat(indent);
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return '[]';
+        }
+        return value
+            .map(item => {
+            if (isPlainObject(item) || Array.isArray(item)) {
+                return `${pad}-\n${toYaml(item, indent + 1)}`;
+            }
+            return `${pad}- ${yamlScalar(item)}`;
+        })
+            .join('\n');
+    }
+    if (isPlainObject(value)) {
+        const entries = Object.entries(value).filter(([, v]) => v !== undefined);
+        if (entries.length === 0) {
+            return '{}';
+        }
+        return entries
+            .map(([key, val]) => {
+            if (isPlainObject(val) || Array.isArray(val)) {
+                return `${pad}${key}:\n${toYaml(val, indent + 1)}`;
+            }
+            return `${pad}${key}: ${yamlScalar(val)}`;
+        })
+            .join('\n');
+    }
+    return `${pad}${yamlScalar(value)}`;
+};
+/** A spec rendered as YAML. Exported for callers that only want the text. */
+export function specToYaml(value) {
+    return toYaml(value);
+}
+/**
+ * The preview, as a panel over whatever is behind it.
+ *
+ * Escape closes it as well as the button, because a panel that covers the
+ * view and can only be dismissed by finding one control is a panel people
+ * feel trapped in.
+ */
+export function SpecPayloadPreview({ spec, onClose, title = 'Spec Payload Preview (YAML)', }) {
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [onClose]);
+    return (_jsxs(Box, { role: "dialog", "aria-label": title, "aria-modal": "true", sx: {
+            position: 'fixed',
+            inset: 24,
+            zIndex: 300,
+            bg: 'canvas.default',
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 1,
+            boxShadow: 'shadow.large',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: title }), _jsx(IconButton, { icon: XIcon, "aria-label": "Close spec preview", size: "small", variant: "invisible", onClick: onClose })] }), _jsx(Box, { sx: { p: 3, overflow: 'auto', flex: 1 }, children: _jsx(Box, { as: "pre", sx: {
+                        m: 0,
+                        whiteSpace: 'pre',
+                        fontFamily: 'monospace',
+                        fontSize: 0,
+                        lineHeight: '20px',
+                    }, children: specToYaml(spec) }) })] }));
+}
+export default SpecPayloadPreview;

package/lib/components/tokens/SpaceVariantToken.d.ts

@@ -1,5 +1,5 @@
 import { ISpaceVariant } from '../../models';
 export declare const SpaceVariantToken: (props: {
     variant: ISpaceVariant | string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SpaceVariantToken;

package/lib/context/ContextDistribution.d.ts

@@ -109,5 +109,5 @@ export interface ContextDistributionProps {
 /**
  * ContextDistribution component displays context distribution as a treemap.
  */
-export declare function ContextDistribution({ agentId, height, liveData, }: ContextDistributionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextDistribution({ agentId, height, liveData, }: ContextDistributionProps): import("react").JSX.Element;
 export default ContextDistribution;

package/lib/context/ContextInspector.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { MessageDetail } from './MessageHistory';
 /**
  * Tool detail from API
@@ -66,5 +67,5 @@ export interface ContextInspectorProps {
 /**
  * ContextInspector component displays full detailed context snapshot.
  */
-export declare function ContextInspector({ agentId, apiBase, liveData, }: ContextInspectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextInspector({ agentId, apiBase, liveData, }: ContextInspectorProps): React.JSX.Element;
 export default ContextInspector;

package/lib/context/ContextPanel.d.ts

@@ -110,5 +110,5 @@ export interface ContextPanelProps {
 /**
  * ContextPanel component - unified context usage display.
  */
-export declare function ContextPanel({ agentId, apiBase, liveData, messageCount, defaultView, chartHeight, }: ContextPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextPanel({ agentId, apiBase, liveData, messageCount, defaultView, chartHeight, }: ContextPanelProps): import("react").JSX.Element;
 export default ContextPanel;

package/lib/context/ContextUsage.d.ts

@@ -31,5 +31,5 @@ export interface ContextUsageProps {
 /**
  * ContextUsage component displays token usage breakdown by category.
  */
-export declare function ContextUsage({ agentId, baseUrl }: ContextUsageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextUsage({ agentId, baseUrl }: ContextUsageProps): import("react").JSX.Element;
 export default ContextUsage;

package/lib/context/CostTracker.d.ts

@@ -39,5 +39,5 @@ export interface CostTrackerProps {
 /**
  * Displays running cost and budget utilization for an agent.
  */
-export declare function CostTracker({ agentId: _agentId, compact, liveData, }: CostTrackerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CostTracker({ agentId: _agentId, compact, liveData, }: CostTrackerProps): import("react").JSX.Element;
 export default CostTracker;

package/lib/context/CostUsageChart.d.ts

@@ -9,5 +9,5 @@ export interface CostUsageChartProps {
     liveTimestampMs?: number | null;
     height?: number;
 }
-export declare function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, otelUrl, wsUrl, liveCumulativeUsd, liveTimestampMs, height, }: CostUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CostUsageChart({ serviceName, agentId, runtimeId, apiKey, otelUrl, wsUrl, liveCumulativeUsd, liveTimestampMs, height, }: CostUsageChartProps): import("react").JSX.Element;
 export default CostUsageChart;

package/lib/context/CostUsageChart.js

@@ -178,8 +178,8 @@ function extractRuntimeId(row) {
     const directCandidates = [
         row.runtime_id,
         row.runtime,
-        row.pod_name,
-        row.k8s_pod_name,
+        row.runtime_name,
+        row.k8s_runtime_name,
     ];
     for (const candidate of directCandidates) {
         if (typeof candidate === 'string' && candidate.trim().length > 0) {
@@ -194,7 +194,7 @@ function extractRuntimeId(row) {
         : {};
     const attrCandidates = [
         attrs['runtime.id'],
-        attrs['runtime.pod_name'],
+        attrs['runtime.runtime_name'],
         attrs['k8s.pod.name'],
     ];
     for (const candidate of attrCandidates) {
@@ -205,7 +205,7 @@ function extractRuntimeId(row) {
     const resourceAttributes = parseResourceAttributes(row.resource_attributes);
     const resourceCandidates = [
         resourceAttributes['runtime.id'],
-        resourceAttributes['runtime.pod_name'],
+        resourceAttributes['runtime.runtime_name'],
         resourceAttributes['k8s.pod.name'],
     ];
     for (const candidate of resourceCandidates) {

package/lib/context/MessageHistory.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * Message detail from API.
  */
@@ -17,7 +18,7 @@ export interface MessageDetail {
  */
 export declare function MessageDetailView({ message }: {
     message: MessageDetail;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export interface MessageHistoryProps {
     /** Full ordered list of conversation messages. */
     messages: MessageDetail[];
@@ -26,5 +27,5 @@ export interface MessageHistoryProps {
  * Renders the conversation message history split into out-of-context and
  * in-context groups.
  */
-export declare function MessageHistory({ messages }: MessageHistoryProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageHistory({ messages }: MessageHistoryProps): React.JSX.Element;
 export default MessageHistory;

package/lib/context/TokenUsageChart.d.ts

@@ -14,5 +14,5 @@ export interface TokenUsageChartProps {
     height?: number;
     days?: number;
 }
-export declare function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, otelUrl, wsUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height, }: TokenUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, otelUrl, wsUrl, liveSystemPromptTokens, liveToolsDescriptionTokens, liveUserMessageTokens, liveAgentMessageTokens, liveToolsUsageTokens, liveTimestampMs, height, }: TokenUsageChartProps): import("react").JSX.Element;
 export default TokenUsageChart;

package/lib/context/TokenUsageChart.js

@@ -229,8 +229,8 @@ function extractRuntimeId(row) {
     const directCandidates = [
         row.runtime_id,
         row.runtime,
-        row.pod_name,
-        row.k8s_pod_name,
+        row.runtime_name,
+        row.k8s_runtime_name,
     ];
     for (const candidate of directCandidates) {
         if (typeof candidate === 'string' && candidate.trim().length > 0) {
@@ -240,7 +240,7 @@ function extractRuntimeId(row) {
     const attrs = parseAttributes(row.attributes);
     const attrCandidates = [
         attrs['runtime.id'],
-        attrs['runtime.pod_name'],
+        attrs['runtime.runtime_name'],
         attrs['k8s.pod.name'],
     ];
     for (const candidate of attrCandidates) {
@@ -251,7 +251,7 @@ function extractRuntimeId(row) {
     const resourceAttributes = parseResourceAttributes(row.resource_attributes);
     const resourceCandidates = [
         resourceAttributes['runtime.id'],
-        resourceAttributes['runtime.pod_name'],
+        resourceAttributes['runtime.runtime_name'],
         resourceAttributes['k8s.pod.name'],
     ];
     for (const candidate of resourceCandidates) {

package/lib/examples/A2UiAgentExample.js

@@ -30,11 +30,12 @@ import { A2UI_RENDER_SCOPE_SX, A2uiSurfaceComposed } from '../components/a2ui';
 import { ThemedProvider } from './utils/themedProvider';
 import { A2uiMarkdownProvider } from './utils/a2uiMarkdownProvider';
 import { useA2uiProcessor } from './utils/a2ui';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
 import { uniqueAgentId } from './utils/agentId';
 import { useSpecRenderToolResult, specRendererClassName, } from './hooks/useSpecRenderToolResult';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { AgentA2uiPlugin } from '../loop/plugins/agent-a2ui';
+import { createChatExtrasPlugin } from '../loop/plugins/chat-extras';
 setupPrimerPortals();
 const AGENT_NAME = 'a2ui-agent';
 const AGENTSPEC_ID = 'example-a2ui-agent';
@@ -98,7 +99,7 @@ function validateFieldValue(rule, value) {
         return `${rule.label} must be a valid email address.`;
     }
     if (rule.pattern && typeof value === 'string') {
-        let matches = true;
+        let matches;
         try {
             matches = new RegExp(rule.pattern).test(value.trim());
         }
@@ -207,9 +208,8 @@ const InlineA2uiSurface = ({ messages, onAction, validationError }) => {
                 }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] }));
 };
 const A2UiAgentExample = () => {
-    const baseUrl = useExampleAgentRuntimesUrl();
     const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
-    const { agentId, error: chatError, status, isReady, } = useExampleAgentRuntime({
+    const { agentId, error: chatError, status, isReady, baseUrl, } = useExampleAgentRuntime({
         exampleId: 'A2UiAgentExample',
         agentName,
         specId: AGENTSPEC_ID,
@@ -222,6 +222,7 @@ const A2UiAgentExample = () => {
     const [surfaceTitle, setSurfaceTitle] = useState(null);
     const [submissions, setSubmissions] = useState([]);
     const [pendingPrompt, setPendingPrompt] = useState(undefined);
+    void pendingPrompt;
     const [validationError, setValidationError] = useState(null);
     const submissionSeq = useRef(0);
     // Validation rules per surface id, populated from each tool result so the
@@ -320,6 +321,14 @@ const A2UiAgentExample = () => {
         },
     }), [handleAction, validationError]);
     const renderToolResult = useSpecRenderToolResult(AGENTSPEC_ID, renderers);
+    // The chat column is the shared loop on the A2UI capacity plugin; the
+    // example's own surface renderer reaches the transcript through the
+    // chat-extras channel, so tool results still draw as A2UI surfaces.
+    const { plugin: extrasPlugin, setExtras } = useMemo(() => createChatExtrasPlugin(), []);
+    const chatPlugins = useMemo(() => [AgentA2uiPlugin, extrasPlugin], [extrasPlugin]);
+    useEffect(() => {
+        setExtras({ renderToolResult });
+    }, [renderToolResult, setExtras]);
     const clearCanvas = useCallback(() => {
         resetSurfaces();
         setSurfaceTitle(null);
@@ -437,6 +446,6 @@ const A2UiAgentExample = () => {
                                 justifyContent: 'center',
                                 height: '100%',
                                 gap: 3,
-                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Creating A2UI agent..." })] })) : chatError || !agentId ? (_jsx(Box, { sx: { p: 3 }, children: _jsxs(Text, { sx: { color: 'danger.fg' }, children: ["Failed to initialize chat:", ' ', chatError || 'No agent id returned'] }) })) : (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "A2UI Agent", description: "Generate interactive A2UI surfaces", placeholder: "Describe the UI you want...", showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: SUGGESTIONS, submitOnSuggestionClick: true, pendingPrompt: pendingPrompt, renderToolResult: renderToolResult })) })] }) }) }));
+                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Creating A2UI agent..." })] })) : chatError || !agentId ? (_jsx(Box, { sx: { p: 3 }, children: _jsxs(Text, { sx: { color: 'danger.fg' }, children: ["Failed to initialize chat:", ' ', chatError || 'No agent id returned'] }) })) : (_jsx(LoopEmbed, { serverUrl: baseUrl, target: "local", agentId: agentId, defaultEditor: "none", showHeader: true, plugins: chatPlugins })) })] }) }) }));
 };
 export default A2UiAgentExample;

package/lib/examples/A2UiComponentsGalleryExample.d.ts

@@ -1,3 +1,13 @@
+/**
+ * A2UI Components Gallery, as a reactor application.
+ *
+ * The scene lives in `./scenes/A2UiComponentsGalleryScene` and arrives as an A2UI scene
+ * plugin — one workspace view, ordered ahead of the chat. The rest is the
+ * standard chat plugins; there is no agent behind this scene, so the
+ * workspace runs on the browser target and costs no server.
+ *
+ * @module examples/A2UiComponentsGalleryExample
+ */
 import React from 'react';
 declare const A2UiComponentsGalleryExample: React.FC;
 export default A2UiComponentsGalleryExample;